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];
+  }
+};
+