fixed mixing up of boxes on fast dragging

2 files changed, 91 insertions, 13 deletions

diff --git a/edit.html b/edit.html
index 476fa30..2772e32 100644
--- a/edit.html
+++ b/edit.html
@@ -17,7 +17,7 @@
   <input type="button" value="reset" onClick="reset();" />
   <input type="button" value="D" onClick="extract_data()" />
   <pre id="data">
-  <p id="debug">&nbsp;</p>
+  <pre id="debug" style="background:red;width:200px">DEBUG: </pre>
   </pre>
   <h3>Instructions</h3>
   <ul>
diff --git a/edit.js b/edit.js
index 1198636..61af8c9 100644
--- a/edit.js
+++ b/edit.js
@@ -30,7 +30,9 @@ var shapes_by_id = {},
     shape_att = { fill: "#eee", stroke: "#000", "fill-opacity": 0, "stroke-width": 1 }
     source = ["Das", "ist ein", "kleines", "Haus", "gewesen", "."], // data
     target = ["This", "has been", "a", "small", "house", "."],      // ^
-    align  = [0, 1, 3, 4, 1, 5];                                    // ^
+    align  = [0, 1, 3, 4, 1, 5],
+    new_pos = -1,
+    old_pos = -1;
 
 /*
  * connection
@@ -106,6 +108,7 @@ var dragger = function ()
 {
   if (edit_mode) return;
   curDrag = this;
+  old_pos = curDrag["grid_"];
   if (this.type == "text")
     curDrag = this.pair;
   curDrag.toFront();
@@ -138,6 +141,9 @@ move = function (dx, dy)
  */
 var collide = function collide(obj)
 {
+  if (!obj["id_"])
+    return;
+  debug();
   if (obj.type != 'rect') {
     return;
   }
@@ -145,31 +151,56 @@ var collide = function collide(obj)
     curDrag["delete_me_"] = true;
     return;
   }
-  if (curDrag["grid_"] > obj["grid_"]) {
-    if (curDrag.getBBox().width < obj.getBBox().width &&
+  if (curDrag["grid_tmp_"] > obj["grid_tmp_"]) { // right -> left
+    /*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-2*padding) };
     obj.attr(att);
     att = { x: obj.pair.attr("x")+curDrag.getBBox().width+(margin-2*padding) };
     obj.pair.attr(att);
-  } else {
-    if (curDrag.getBBox().width < obj.getBBox().width &&
+  } else { // left -> right
+    /*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-2*padding)) };
     obj.attr(att);
     att = { x: obj.pair.attr("x")-(curDrag.getBBox().width+(margin-2*padding)) };
     obj.pair.attr(att);
   }
   // switch grid pos
-  var tmpx = curDrag["grid_"];
-  curDrag["grid_"] = obj["grid_"];
-  obj["grid_"] = tmpx;
+  new_pos = obj["grid_tmp_"];
+  var tmpx = curDrag["grid_tmp_"];
+  curDrag["grid_tmp_"] = obj["grid_tmp_"];
+  obj["grid_tmp_"] = tmpx;
+  //snap_to_grid(true,true);
 },
+debug = function () {
+  var s = "";
+  for (var i=0; i<target_shapes.length; i++) {
+    s+= target_shapes[i]["id_"] + " " ;
+  }
+  document.getElementById("debug").innerHTML = s;
+}
+debug1 = function () {
+  var s = "";
+  for (var i=0; i<target_shapes.length; i++) {
+    s+= target_shapes[i]["id_"] + "(" + target_shapes[i]["grid_"]+") " ;
+  }
+  document.getElementById("debug").innerHTML = s;
+  document.getElementById("debug").innerHTML += " new:"+new_pos + " old:"+old_pos;
+}
+debug2 = function () {
+  var s = "";
+  for (var i=0; i<target_shapes.length; i++) {
+    s+= target_shapes[i]["grid_tmp_"] + " " ;
+  }
+  document.getElementById("debug").innerHTML = s;
+}
 up = function () {
+  debug();
   if (this["delete_me_"]) {
     var del = shapes_by_id[this["id_"]];
     for (key in connections) {
@@ -204,15 +235,61 @@ up = function () {
 
   snap_to_grid(true);
 },
-snap_to_grid = function (anim=false)
+snap_to_grid = function (anim=false,drag=false)
 {
   // just x coord, y is fixed in drag
   var d = xbegin;
   var d2 = 0;
+  var b = false;
   // just target objs
   target_shapes.sort(function(a, b) {
     return a["grid_"]-b["grid_"];
   });
+  /*for (var i=0; i < target_shapes.length; i++) {
+    if (target_shapes[i]["id_"] == curDrag["id_"]) {
+      b = true;
+      target_shapes[i]["grid_"] = new_pos;
+      continue;
+    }
+    if (b && (new_pos>old_pos)) {
+      target_shapes[i]["grid_"] += 1;
+    } else if (b && new_pos<old_pos) {
+      target_shapes[i]["grid_"] -= 1;
+    }
+  }*/
+  if (new_pos == old_pos)
+    return;
+  curDrag["grid_"] = new_pos;
+  cur_id = curDrag["id_"];
+  if (new_pos > old_pos) {
+    for (var i=0; i < target_shapes.length; i++) {
+      pos = target_shapes[i]["grid_"];
+      id = target_shapes[i]["id_"];
+      if (id == cur_id)
+        continue;
+      if (pos >= old_pos && pos <= new_pos) {
+        target_shapes[i]["grid_"] -= 1;
+      } else {
+        continue;
+      }
+    }
+  } else if (new_pos < old_pos) {
+    for (var i=0; i < target_shapes.length; i++) {
+      pos = target_shapes[i]["grid_"];
+      id = target_shapes[i]["id_"];
+      if (id == cur_id)
+        continue;
+      if (pos >= new_pos && pos <= old_pos) {
+        target_shapes[i]["grid_"] += 1;
+      } else {
+        continue;
+      }
+    }
+  }
+  debug1();
+  target_shapes.sort(function(a, b) {
+    return a["grid_"]-b["grid_"];
+  });
   for (var i = 0; i < target_shapes.length; i++) {
     var obj = target_shapes[i];
     if (!obj || !obj.attrs) { // removed
@@ -272,6 +349,7 @@ var make_obj = function(x, text, type)
     sh.attr({ cursor: "move" });
     tx.drag(move, dragger, up);
     sh["grid_"] = id;
+    sh["grid_tmp_"] = id;
     sh.click(function() {
       if (connect_mode) {
         if (connections[conn_str(connect_mode_shape,this)]) {
@@ -352,7 +430,7 @@ add_obj = function()
     }
   }
   if (!shapes[max_idx]) {
-    make_obj(xbegin+padding, "NEW", "target", 0);
+    make_obj(xbegin+padding, "X", "target", 0);
   } else {
     make_obj(shapes[max_idx].getBBox().x2+(margin-padding),
              "NEW",