summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPatrick Simianer <p@simianer.de>2015-08-26 12:04:32 +0200
committerPatrick Simianer <p@simianer.de>2015-08-26 12:04:32 +0200
commitdbf290de2ed382fb245113da0550c0b7ce5f809b (patch)
tree518879fbdf97e490bd144d6df6cbfe4e7787c96c
parent07594bccda051ca54ebb52757f5968801c5775de (diff)
finished snap-to-grid
Diffstat
-rw-r--r--snap-to-grid.html15
-rw-r--r--snap-to-grid.js79
-rw-r--r--snaptogrid.html14
-rw-r--r--snaptogrid.js90
4 files changed, 94 insertions, 104 deletions
diff --git a/snap-to-grid.html b/snap-to-grid.html
new file mode 100644
index 0000000..c44b524
--- /dev/null
+++ b/snap-to-grid.html
@@ -0,0 +1,15 @@
+<!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
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];
+ }
+};
+
diff --git a/snaptogrid.html b/snaptogrid.html
deleted file mode 100644
index 5a2e622..0000000
--- a/snaptogrid.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>derivation editor</title>
- <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
- <script src="snaptogrid.js" type="text/javascript" charset="utf-8"></script>
-</head>
-<body>
- <div id="holder"></div>
- <p id="debug"></p>
-</body>
-</html>
-
diff --git a/snaptogrid.js b/snaptogrid.js
deleted file mode 100644
index cc2be8a..0000000
--- a/snaptogrid.js
+++ /dev/null
@@ -1,90 +0,0 @@
-var el;
-window.onload = function () {
- var color, i, ii, tempS, tempT,
- dragger = function ()
- {
- el = 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 = el["id"] + " <-> " + obj["id"]
- ee = shapesById[obj["id"]];
- if (el["grid"] > ee["grid"]) {
- if (el.getBBox().width < obj.getBBox().width &&
- el.getBBox().x > (obj.getBBox().x+obj.getBBox().width/2)) {
- return;
- }
- att = {x: ee.attr("x")+el.getBBox().width+10};
- ee.attr(att);
- } else {
- if (el.getBBox().width < obj.getBBox().width &&
- el.getBBox().x < (obj.getBBox().x+obj.getBBox().width/2)) {
- return;
- }
- att = {x: ee.attr("x")-(el.getBBox().width+10)};
- ee.attr(att);
- }
-
- var tmp = el["grid"];
- el["grid"] = obj["grid"];
- obj["grid"] = tmp;
- },
- up = function ()
- {
- snapToGrid(this);
- }
- snapToGrid = function (obj)
- {
- // y
- var sy = 50;
- if (obj.getBBox().y != sy) {
- att = {y: sy};
- obj.animate(att, 250);
- }
- // x
- /*if (el.getBBox().x != el["grid"]*70) {
- att = {x:el["grid"]*70};
- obj.animate(att,250);
- }*/
-
- 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+10;
- }
- };
- r = Raphael("holder", 280, 100),
- xAnchors = [ 0, 20, 60, 130 ]
- shapes = [
- r.rect(xAnchors[0], 50, 10, 30, 0),
- r.rect(xAnchors[1], 50, 30, 30, 0),
- r.rect(xAnchors[2], 50, 60, 30, 0),
- r.rect(xAnchors[3], 50, 30, 30, 0),
- ];
- colors = [ "#000", "#ccc", "#0f0", "#00f" ];
- shapesById = {};
- 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];
- }
-
-};
-
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-02 22:29:28 +0000