diff options
| author | Patrick Simianer <p@simianer.de> | 2015-08-22 19:59:46 +0200 |
|---|---|---|
| committer | Patrick Simianer <p@simianer.de> | 2015-08-22 19:59:46 +0200 |
| commit | 9f9408b3093fb64a9d1f5129a9c4b564c9795dce (patch) | |
| tree | 6a39f7f3419c935b19c4ce331e13cbef5bc1ef3b | |
| parent | d2c5ad4b611d21cb6d0211628f8951d0f292e449 (diff) | |
minimal snap-to-grid example
| -rw-r--r-- | r.js | 45 | ||||
| -rw-r--r-- | snaptogrid.html | 14 | ||||
| -rw-r--r-- | snaptogrid.js | 74 |
3 files changed, 116 insertions, 17 deletions
@@ -27,6 +27,7 @@ Raphael.fn.connection = function (obj1, obj2, line, bg) { var el; window.curDrag = null; +window.grid = []; window.onload = function () { var color, i, ii, tempS, tempT, dragger = function () { @@ -119,25 +120,35 @@ window.onload = function () { shapes.push(r.rect(shapes[4].getBBox().x2+inner_pad, 150, texts[5].getBBox().width+(2*inner_pad), 20)) shapes.push(r.rect(shapes[5].getBBox().x2+inner_pad, 150, texts[6].getBBox().width+(2*inner_pad), 20)) shapes.push(r.rect(shapes[6].getBBox().x2+inner_pad, 150, texts[7].getBBox().width+(2*inner_pad), 20)) + window.grid.push(0); + window.grid.push(1); + window.grid.push(2); + window.grid.push(3); + window.gridToShape = { 0: shapes[4].id, 1: shapes[5].id, 2: shapes[6].id, 3: shapes[7].id } + window.shapeToGrid = {} + shapeToGrid[shapes[4].id] = 0; + shapeToGrid[shapes[5].id] = 1; + shapeToGrid[shapes[6].id] = 2; + shapeToGrid[shapes[7].id] = 3; - function collide(a) { - document.getElementById("debug").innerHTML = curDrag.type + " | " + a.type + " " + a.getBBox().x; - if (a.type == "rect") { - if (curDrag.getBBox().x < a.getBBox().x) { - att = {x: a.getBBox().x-a.getBBox().width-padding} - a.attr(att); - att = {x: a.pair.getBBox().x-a.getBBox().width-padding} - a.pair.attr(att); - } else { - att = {x: a.getBBox().x+a.getBBox().width+padding} - a.attr(att); - att = {x: a.pair.getBBox().x+a.getBBox().width+padding} - a.pair.attr(att); - } - } - //hitFill = a.attr("fill"); - }; + function collide(a) { + document.getElementById("debug").innerHTML = curDrag.type + " | " + a.type + " " + a.getBBox().x; + if (a.type == "rect") { + if (shapeToGrid[curDrag.id] < shapeToGrid[a.id]) { + att = {x: curDrag.getBBox().x-curDrag.getBBox().width+padding} + a.attr(att); + att = {x: curDrag.pair.getBBox().x-curDrag.getBBox().width+padding} + a.pair.attr(att); + } else { + att = {x: a.getBBox().x+a.getBBox().width+padding} + a.attr(att); + att = {x: a.pair.getBBox().x+a.getBBox().width+padding} + a.pair.attr(att); + } + } + hitFill = a.attr("fill"); + }; for (i = 0, ii = shapes.length; i < ii; i++) { tempS = shapes[i].attr({fill: "#aaa", stroke: "#000", "fill-opacity": 0, "stroke-width": 1, cursor: "move"}); diff --git a/snaptogrid.html b/snaptogrid.html new file mode 100644 index 0000000..5a2e622 --- /dev/null +++ b/snaptogrid.html @@ -0,0 +1,14 @@ +<!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 new file mode 100644 index 0000000..2d86968 --- /dev/null +++ b/snaptogrid.js @@ -0,0 +1,74 @@ +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.getBBox().x > ee.getBBox().x) { + att = {x: ee.attr("x")+70}; + ee.attr(att); + } else { + att = {x: ee.attr("x")-70}; + 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); + } + + for (var i = 0; i < 4; i++) { + obj = shapesById[i]; + att = {x:obj["grid"]*70}; + obj.animate(att,250); + } + }; + r = Raphael("holder", 280, 100), + shapes = [ + r.rect(0, 50, 60, 30, 0), + r.rect(70, 50, 60, 30, 0), + r.rect(140, 50, 60, 30, 0), + r.rect(210, 50, 60, 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]; + } + +}; + |