From 7657f0a8e5edb7b8db1a127fe2f70fa378a3a5b6 Mon Sep 17 00:00:00 2001
From: Patrick Simianer <p@simianer.de>
Date: Fri, 18 Sep 2015 12:44:12 +0200
Subject: refactoring, removing bugs and glitches

---
 edit.html |   2 +-
 edit.js   | 255 +++++++++++++++++++++++++++++---------------------------------
 2 files changed, 121 insertions(+), 136 deletions(-)

diff --git a/edit.html b/edit.html
index 2772e32..1cb97d2 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">
-  <pre id="debug" style="background:red;width:200px">DEBUG: </pre>
+  <pre id="debug" style="background:red;width:100%"></pre>
   </pre>
   <h3>Instructions</h3>
   <ul>
diff --git a/edit.js b/edit.js
index 61af8c9..0d87e78 100644
--- a/edit.js
+++ b/edit.js
@@ -2,37 +2,46 @@
  * global vars and data
  *
  */
-var shapes_by_id = {},
-    r,
-    curDrag = null,
-    curEd = null,
-    curEdShape = null,
-    shapes = [],
+var r,
+    // objects
+    shapes_by_id  = {},
+    shapes        = [],
     target_shapes = [],
-    texts = [],
-    connections = {},
-    margin = 30,
-    padding = margin/3,
-    xbegin = 80,
-    ybegin = 5,
-    box_height = 50,
+    texts         = [],
+    connections   = {},
+    id            = 0,
+    // layout
+    margin      = 30,
+    padding     = margin/3,
+    xbegin      = 80,
+    ybegin      = 5,
+    box_height  = 50,
     line_margin = 150,
-    ysource = ybegin,
-    ytarget = ysource+line_margin;
-    font_size = 20,
-    font_width = -1,
-    id = 0,
-    connect_mode = false,
+    ysource     = ybegin,
+    ytarget     = ysource+line_margin;
+    font_size   = 20,
+    font_width  = -1,
+    text_att = { "fill": "#000", "stroke": "none", "text-anchor": "start",
+                 "font-size": font_size, "font-family": "Times New Roman" },
+    shape_att = { "fill": "#eee", "stroke": "#000", "fill-opacity": 0,
+                  "stroke-width": 1 }
+    // dragging
+    cur_drag = null,
+    new_pos = -1,
+    old_pos = -1;
+    // connecting
+    connect_mode       = false,
     connect_mode_shape = null,
+    // editing
+    cur_ed      = null,
+    cur_ed_shape = null,
     edit_mode = false,
+    // removing
     rm_shape = null,
-    text_att = { 'fill': '#000', 'stroke': 'none', 'text-anchor': 'start', 'font-size': font_size, 'font-family': 'Times New Roman' },
-    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],
-    new_pos = -1,
-    old_pos = -1;
+    // data
+    source = ["Das", "ist ein", "kleines", "Haus", "gewesen", "."],
+    target = ["This", "has been", "a", "small", "house", "."],
+    align  = [0, 1, 3, 4, 1, 5];
 
 /*
  * connection
@@ -101,17 +110,21 @@ make_conns_from_a = function (align)
 }
 
 /*
- * drag'n drop
+ * drag"n drop
  *
  */
 var dragger = function ()
 {
-  if (edit_mode) return;
-  curDrag = this;
-  old_pos = curDrag["grid_"];
+  if (edit_mode)
+    return;
+  cur_drag = this;
+  // drag shape, not text
   if (this.type == "text")
-    curDrag = this.pair;
-  curDrag.toFront();
+    cur_drag = this.pair;
+  cur_drag.toFront();
+  // remember grid pos
+  old_pos = cur_drag["grid_"];
+  new_pos = cur_drag["grid_"];
   // remember original coords
   this.ox = this.attr("x");
   this.oy = this.attr("y");
@@ -132,6 +145,7 @@ move = function (dx, dy)
   for (key in connections) {
     r.connection(connections[key]);
   }
+
   r.safari();
 };
 
@@ -139,72 +153,56 @@ move = function (dx, dy)
  * snap-to-grid
  *
  */
-var collide = function collide(obj)
+var collide = function collide (obj)
 {
-  if (!obj["id_"])
+  // not a shape
+  if (!obj["id_"] || obj.type!="rect")
     return;
-  debug();
-  if (obj.type != 'rect') {
+  // remove
+  if (obj["rm_shape_"]) {
+    cur_drag["delete_me_"] = true;
     return;
   }
-  if (obj["rm_shape"]) {
-    curDrag["delete_me_"] = true;
-    return;
-  }
-  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) };
+  if (cur_drag["grid_tmp_"] > obj["grid_tmp_"]) {
+  // right -> left
+    if (cur_drag.getBBox().width < obj.getBBox().width &&
+        cur_drag.getBBox().x > (obj.getBBox().x+obj.getBBox().width/1000)) { // ignored tolerance, when
+      return;                                                                // dragging onto shapes
+    }
+    att = { x: obj.attr("x")+cur_drag.getBBox().width+(margin-2*padding) };
     obj.attr(att);
-    att = { x: obj.pair.attr("x")+curDrag.getBBox().width+(margin-2*padding) };
+    att = { x: obj.pair.attr("x")+cur_drag.getBBox().width+(margin-2*padding) };
     obj.pair.attr(att);
-  } else { // left -> right
-    /*if (curDrag.getBBox().width < obj.getBBox().width &&
-        curDrag.getBBox().x < (obj.getBBox().x+obj.getBBox().width/3)) {
+  } else {
+  // left -> right
+    if (cur_drag.getBBox().width < obj.getBBox().width &&
+        cur_drag.getBBox().x < (obj.getBBox().x+obj.getBBox().width/1000)) {
       return;
-    }*/
-    att = { x: obj.attr("x")-(curDrag.getBBox().width+(margin-2*padding)) };
+    }
+    att = { x: obj.attr("x")-(cur_drag.getBBox().width+(margin-2*padding)) };
     obj.attr(att);
-    att = { x: obj.pair.attr("x")-(curDrag.getBBox().width+(margin-2*padding)) };
+    att = { x: obj.pair.attr("x")-(cur_drag.getBBox().width+(margin-2*padding)) };
     obj.pair.attr(att);
   }
-  // switch grid pos
+  // grid pos
   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);
+  var tmp_pos = cur_drag["grid_tmp_"];
+  cur_drag["grid_tmp_"] = obj["grid_tmp_"];
+  obj["grid_tmp_"] = tmp_pos;
 },
 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) {
-      if (key.split("-")[1] == curDrag["id_"]) {
+      if (key.split("-")[1] == cur_drag["id_"]) {
         rm_conn(key.split("-")[0], key.split("-")[1]);
       }
     }
@@ -235,33 +233,20 @@ up = function () {
 
   snap_to_grid(true);
 },
-snap_to_grid = function (anim=false,drag=false)
+snap_to_grid = function (anim=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_"];
+  // switch
+  if (cur_drag) { // fix glitch when calling from add_obj
+  cur_drag["grid_"] = new_pos;
+  cur_id = cur_drag["id_"];
   if (new_pos > old_pos) {
+  // left -> right
     for (var i=0; i < target_shapes.length; i++) {
       pos = target_shapes[i]["grid_"];
       id = target_shapes[i]["id_"];
@@ -274,6 +259,7 @@ snap_to_grid = function (anim=false,drag=false)
       }
     }
   } else if (new_pos < old_pos) {
+  // right -> left
     for (var i=0; i < target_shapes.length; i++) {
       pos = target_shapes[i]["grid_"];
       id = target_shapes[i]["id_"];
@@ -286,10 +272,12 @@ snap_to_grid = function (anim=false,drag=false)
       }
     }
   }
-  debug1();
+  } // ^ fix glitch
+  // sort by grid pos
   target_shapes.sort(function(a, b) {
     return a["grid_"]-b["grid_"];
   });
+  // fix box layout
   for (var i = 0; i < target_shapes.length; i++) {
     var obj = target_shapes[i];
     if (!obj || !obj.attrs) { // removed
@@ -308,6 +296,8 @@ snap_to_grid = function (anim=false,drag=false)
       obj.pair.attr(att);
     }
     d += obj.getBBox().width+(margin-2*padding);
+    // fix tmp grid
+    obj["grid_tmp_"] = obj["grid_"];
   }
   for (key in connections) {
     r.connection(connections[key]);
@@ -369,25 +359,29 @@ var make_obj = function(x, text, type)
       if (edit_mode) return;
       edit_mode = true;
       this.pair.toFront();
-      curEd = this.pair;
-      curEdShape = this;
-      var input = curEd.inlineTextEditing.startEditing();
+      cur_ed = this.pair;
+      cur_ed_shape = this;
+      var input = cur_ed.inlineTextEditing.startEditing();
       input.addEventListener("keypress", function(e) {
-        if (e.keyCode==27||e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40) { // esc, arrows, backspace
+        if (e.keyCode==27||e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40) {
+        // esc, arrows, backspace
           return;
-        } else if (e.keyCode == 8) { // backspace
-          curEdShape.animate({width:curEdShape.getBBox().width-font_width},125);
+        } else if (e.keyCode == 8) {
+        // backspace
+          cur_ed_shape.animate({width:cur_ed_shape.getBBox().width-font_width},125);
           setTimeout(function(){snap_to_grid(true);},125);
-        } else if (e.keyCode == 13) { // enter
+        } else if (e.keyCode == 13) {
+        // return
           e.preventDefault();
-          curEd.inlineTextEditing.stopEditing();
-          curEdShape.toFront();
-          curEd.toBack();
-          curEdShape.animate({width:curEd.getBBox().width+(margin-padding)},125);
+          cur_ed.inlineTextEditing.stopEditing();
+          cur_ed_shape.toFront();
+          cur_ed.toBack();
+          cur_ed_shape.animate({width:cur_ed.getBBox().width+(margin-padding)},125);
           setTimeout(function(){snap_to_grid(true);},125);
           edit_mode = false;
         } else {
-          curEdShape.animate({width:(this.value.length*font_width)+2*font_width+2*padding},25);
+        // input
+          cur_ed_shape.animate({width:(this.value.length*font_width)+2*font_width+2*padding},25);
           setTimeout(function(){
             snap_to_grid(true);
             r.setSize(r.width+font_width, r.height);
@@ -395,10 +389,10 @@ var make_obj = function(x, text, type)
         }
       });
       input.addEventListener("blur", function(e) {
-          curEd.inlineTextEditing.stopEditing();
-          curEdShape.toFront();
-          curEd.toBack();
-          curEdShape.animate({width:curEd.getBBox().width+(margin-padding)},125);
+          cur_ed.inlineTextEditing.stopEditing();
+          cur_ed_shape.toFront();
+          cur_ed.toBack();
+          cur_ed_shape.animate({width:cur_ed.getBBox().width+(margin-padding)},125);
           setTimeout(function(){snap_to_grid(true);},125);
           edit_mode = false;
       }, true);
@@ -476,9 +470,9 @@ var extract_data = function ()
   }
   // alignment
   for (key in connections) {
-    var a = key.split('-');
+    var a = key.split("-");
     var src = a[0], tgt = ids.indexOf(parseInt(a[1]));
-    d["align"].push(src+'-'+tgt);
+    d["align"].push(src+"-"+tgt);
   }
   // source
   for (var i=0; i<shapes.length; i++) {
@@ -511,14 +505,15 @@ var init = function ()
   for (var i=0; i<target.length; i++) {
     d += target[i].length;
   }
-  font_width = r.text(-100,-100,'m').getBBox().width;
+  font_width = r.text(-100,-100,"m").getBBox().width;
   var paper_width  = xbegin+(Math.max(source.length,target.length)*(margin+padding))
                       +(Math.max(c,d)*font_width),
       paper_height = ybegin+2*box_height+line_margin;
   r.setSize(paper_width, paper_height);
   rm_shape = r.rect(5, line_margin+ybegin, 50, box_height).attr({"fill":"#fff","stroke":0}).animate({"fill":"red"}, 2000);
   rm_shape.toBack();
-  rm_shape["rm_shape"] = true;
+  rm_shape["rm_shape_"] = true;
+  rm_shape["id_"] = -1;
   // source objs
   make_objs(source, "source");
   // target objs
@@ -528,28 +523,18 @@ var init = function ()
 },
 reset = function()
 {
-  shapes_by_id = {};
-  curDrag = null;
-  curEd = null;
-  curEdShape = null;
-  shapes = [];
+  shapes_by_id  = {};
+  shapes        = [];
   target_shapes = [];
-  texts = [];
-  connections = {};
-  margin = 30;
-  padding = margin/3;
-  xbegin = 80;
-  ybegin = 5;
-  box_height = 50;
-  line_margin = 150;
-  ysource = ybegin;
-  ytarget = ysource+line_margin;
-  font_size = 20;
-  font_width = -1;
-  id = 0;
-  connect_mode = false;
+  texts         = [];
+  connections   = {};
+  id            = 0;
+  cur_drag = null;
+  edit_mode    = false;
+  cur_ed       = null;
+  cur_ed_shape = null;
+  connect_mode       = false;
   connect_mode_shape = null;
-  edit_mode = false;
   rm_shape = null;
 
   document.getElementById("holder").parentElement.removeChild(document.getElementById("holder"));
-- 
cgit v1.2.3