snap-to-grid

From dbf290de2ed382fb245113da0550c0b7ce5f809b Mon Sep 17 00:00:00 2001 From: Patrick Simianer Date: Wed, 26 Aug 2015 12:04:32 +0200 Subject: finished snap-to-grid --- snap-to-grid.html | 15 ++++++++++ snap-to-grid.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++ snaptogrid.html | 14 --------- snaptogrid.js | 90 ------------------------------------------------------- 4 files changed, 94 insertions(+), 104 deletions(-) create mode 100644 snap-to-grid.html create mode 100644 snap-to-grid.js delete mode 100644 snaptogrid.html delete mode 100644 snaptogrid.js 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 @@ + + + + + + snap-to-grid + + + + +

+ + + 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 @@ - - - - - derivation editor - - - - -

- - - 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]; - } - -}; - -- cgit v1.2.3