diff options
-rw-r--r-- | snap-to-grid.html | 15 | ||||
-rw-r--r-- | snap-to-grid.js | 78 |
2 files changed, 0 insertions, 93 deletions
diff --git a/snap-to-grid.html b/snap-to-grid.html deleted file mode 100644 index c44b524..0000000 --- a/snap-to-grid.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- 2015-08-26 --> -<html> -<head> - <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> - <title>snap-to-grid</title> - <script src='raphael.js' type='text/javascript' charset='utf-8'></script> - <script src='snap-to-grid.js' type='text/javascript' charset='utf-8'></script> -</head> -<body> - <div id='holder'></div> - <p id='debug'></p> -</body> -</html> - diff --git a/snap-to-grid.js b/snap-to-grid.js deleted file mode 100644 index d0360a3..0000000 --- a/snap-to-grid.js +++ /dev/null @@ -1,78 +0,0 @@ -window.onload = function () { - var dragger = function () - { - curDrag = this; - this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); - this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); - }, - move = function (dx, dy) - { - var att = this.type == "rect" ? { x: this.ox + dx, y: this.oy } : { cx: this.ox + dx, cy: this.oy }; - this.attr(att); - r.safari(); - }, - collide = function (obj) - { - document.getElementById("debug").innerHTML = curDrag["id"] + " <-> " + obj["id"] - if (curDrag["grid"] > obj["grid"]) { - if (curDrag.getBBox().width < obj.getBBox().width && - curDrag.getBBox().x > (obj.getBBox().x+obj.getBBox().width/3)) { - return; - } - att = { x: obj.attr("x")+curDrag.getBBox().width+margin }; - obj.attr(att); - } else { - if (curDrag.getBBox().width < obj.getBBox().width && - curDrag.getBBox().x < (obj.getBBox().x+obj.getBBox().width/3)) { - return; - } - att = { x: obj.attr("x")-(curDrag.getBBox().width+margin) }; - obj.attr(att); - } - - var tmp = curDrag["grid"]; - curDrag["grid"] = obj["grid"]; - obj["grid"] = tmp; - }, - up = function () - { - snapToGrid(this); - }, - snapToGrid = function (obj) - { - // just x coord, y is fixed in drag - var d = 0; - for (var i = 0; i < 4; i++) { - obj = null - for (var j = 0; j < shapes.length; j++) { - obj = shapesById[j]; - if (obj["grid"] == i) - break; - } - att = {x:d}; - obj.animate(att,250); - d += obj.getBBox().width+margin; - } - }, - widths = [ 10, 128, 30, 40 ], - r = Raphael("holder", widths[0]+widths[1]+widths[2]+widths[3]+3*margin, 100), - fix_y = 50, - margin = 10, - shapes = [ - r.rect(0, fix_y, widths[0], 30, 0), - r.rect(widths[0]+margin, fix_y, widths[1], 30, 0), - r.rect(widths[0]+widths[1]+2*margin, fix_y, widths[2], 30, 0), - r.rect(widths[0]+widths[1]+widths[2]+3*margin, fix_y, widths[3], 30, 0), - ], - colors = [ "#000", "#ccc", "#0f0", "#00f" ], - shapesById = {}, - curDrag = null; - for (var i = 0; i < shapes.length; i++) { - shapes[i].attr({fill: colors[i], cursor: "move"}); - shapes[i].drag(move, dragger, up).onDragOver( function(a) { collide(a);}); - shapes[i]["id"] = i; - shapes[i]["grid"] = i; - shapesById[i] = shapes[i]; - } -}; - |