summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--snap-to-grid.html15
-rw-r--r--snap-to-grid.js78
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];
- }
-};
-