diff options
| -rw-r--r-- | snap-to-grid.js | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/snap-to-grid.js b/snap-to-grid.js new file mode 100644 index 0000000..eee8cae --- /dev/null +++ b/snap-to-grid.js @@ -0,0 +1,79 @@ +window.onload = function () { + var color, i, ii, tempS, tempT, + 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]; + } +}; + |