<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Генератор паніні</title>
<link rel="stylesheet" href="css/style.css">
<!--TODO Replace with minimised-->
<script src="lib/svg.js"></script>
<script src="lib/svg.draggable.min.js"></script>
<script src="lib/svg.export.min.js"></script>
<script src="lib/img-base64.js"></script>
<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="paper"></div>
<div id="card"></div>
<button>Save</button>
<script>
var draw = SVG('card');
var stamps = [];
//TODO Appearing animation this.instance.animate().opacity(.5)
for (var i = 0; i < 10; i++) {
var encodedImg;
imgToDataURL('merci/0' + (i + 1) + '.png', function (err, txt) {
encodedImg = txt;
console.log(txt);
});
var img = draw.image('merci/0' + (i + 1)/*Random.int(10)*/ + '.png', 200, 70)
.x(Random.int(100) + 30)
.y(i * 70)
.attr('class', 'stamp');
var cardBounds = function (x, y) {
return {
x: x > 0 && x < 200,
y: y > 0 && y < 650
}
};
img.draggable(cardBounds);
img.dragstart = function (e) {
this.opacity(0.3);
};
var transformVal = [0, 0];
img.beforedrag = function (e) {
if (e.target.attributes.transform != undefined) {
transformVal = e.target.attributes.transform.value.match(/-?\d+/g).map(parseFloat);
}
};
img.dragmove = function (delta, event) {
var stamp = this,
rightClick = (event.button === 2),
allowedRotation = delta.y >= -90 && delta.y <= 90;
// stamp.translate(transformVal[0] > 0 ? transformVal[0] / 2 : -transformVal[0],
// transformVal[1] > 0 ? 0 : -transformVal[1]);
if (rightClick) {
if (allowedRotation) {
stamp.transform({
rotation: delta.y,
x: -delta.x,
y: -delta.y
});
}
if (delta.x != 0 || delta.y != 0) {
stamp.transform({
x: -(delta.x || 0),
y: -(delta.y || 0)
});
}
}
};
img.dragend = function () {
this.opacity(1);
};
stamps.push(img);
}
for (var i = 0; i < stamps.length - 1; i++) {
var a = stamps[i].node;
var b = stamps[i + 1].node;
//shiftUnless(a, b, stamps[i + 1]);
console.log(!Stamps.intersect(a, b) ? "yay :)" : ":(");
}
function shiftUnless(a, b, el) {
while (Stamps.intersect(a, b)) {
//TODO Shift in another direction, rotate 90deg
for (var i = 0; (i < 10) || !Stamps.intersect(a, b); i++) {
el.dx(1);
if (!Stamps.intersect(a, b)) return;
}
for (var i = 0; (i < 10) || !Stamps.intersect(a, b); i++) {
el.dy(1);
if (!Stamps.intersect(a, b)) return;
}
}
}
$('button').on('click', function () {
var svgExport = draw.exportSvg();
console.log(svgExport);
})
</script>
</body>
</html>