From cb7594d9c1923554efc43215fd1b16b551dc73e9 Mon Sep 17 00:00:00 2001 From: Patrick Simianer Date: Tue, 1 Sep 2015 11:02:28 +0200 Subject: reset --- edit.html | 29 ++-- edit.js | 481 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ r.js | 443 --------------------------------------------------------- 3 files changed, 500 insertions(+), 453 deletions(-) create mode 100644 edit.js delete mode 100644 r.js diff --git a/edit.html b/edit.html index a1394ec..c0905d9 100644 --- a/edit.html +++ b/edit.html @@ -1,21 +1,30 @@ - + - + derivation editor - - - + + + -
- - -

- 

+  

+    

+  

+  
+  
+  
+  
+  
 

+  

   
TODO

   
 
diff --git a/edit.js b/edit.js
new file mode 100644
index 0000000..35ef20a
--- /dev/null
+++ b/edit.js
@@ -0,0 +1,481 @@
+/*
+ * global vars and data
+ *
+ */
+var shapes_by_id = {},
+    r,
+    curDrag = null,
+    curEd = null,
+    curEdShape = null,
+    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,
+    connect_mode_shape = null,
+    edit_mode = false,
+    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];                                    // ^
+
+/*
+ * connection
+ *
+ */
+Raphael.fn.connection = function (obj1, obj2, line, bg)
+{
+  if (obj1.line && obj1.from && obj1.to) {
+    line = obj1;
+    obj1 = line.from;
+    obj2 = line.to;
+  }
+  if (!obj1.getBBox() || !obj2.getBBox())
+    return;
+  var bb1 = obj1.getBBox(),
+      bb2 = obj2.getBBox(),
+      x1 = bb1.x+bb1.width/2,
+      y1 = bb1.y+bb1.height,
+      x2 = bb2.x+bb2.width/2,
+      y2 = bb2.y,
+      path = ["M", x1, y1, "L", x2, y2];
+  if (line && line.line) {
+    line.bg && line.bg.attr({path: path});
+    line.line.attr({path: path});
+  } else {
+    return {
+      bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
+      line: this.path(path).attr({stroke: "#000", fill: "none"}),
+      from: obj1,
+      to: obj2
+    };
+  }
+};
+var conn_str = function (obj1, obj2)
+{
+  return obj1["id_"]+"-"+obj2["id_"];
+}
+var make_conn = function(obj1, obj2)
+{
+  connections[conn_str(obj1,obj2)] = r.connection(obj1, obj2);
+},
+rm_conn = function(id1, id2)
+{
+  var b = false;
+  for (var i=0; i 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-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 &&
+        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;
+},
+up = function () {
+  if (this["delete_me_"]) {
+    var del = shapes_by_id[this["id_"]];
+    for (key in connections) {
+      if (key.split("-")[1] == curDrag["id_"]) {
+        rm_conn(key.split("-")[0], key.split("-")[1]);
+      }
+    }
+    var i=source.length;
+    for (; i max) {
+      max_idx = i;
+      max = shapes[i]["grid_"];
+    }
+  }
+  if (!shapes[max_idx]) {
+    make_obj(xbegin+padding, "NEW", "target", 0);
+  } else {
+    make_obj(shapes[max_idx].getBBox().x2+(margin-padding),
+             "NEW",
+             "target",
+             max+1);
+  }
+  r.setSize(r.width+target_shapes[target_shapes.length-1].getBBox().width+margin, r.height);
+
+  snap_to_grid(true);
+},
+make_objs = function (a, type)
+{
+  for (var i=0; i < a.length; i++) {
+    var x = 0;
+    if (i == 0) {
+      x = xbegin+padding;
+    } else {
+      x = margin+texts[texts.length-1].getBBox().x2;
+    }
+    make_obj(x, a[i], type);
+  }
+};
+
+/*
+ * data
+ *
+ */
+var extract_data = function ()
+{
+  el = document.getElementById("data");
+  d = {};
+  d["source"] = [];
+  d["target"] = [];
+  d["align"] = [];
+  // target
+  var ids = [];
+  target_shapes.sort(function(a, b) {
+    return a["grid_"]-b["grid_"];
+  });
+  for (var i=0; i 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-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 &&
-        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;
-},
-up = function () {
-  if (this["delete_me_"]) {
-    var del = shapes_by_id[this["id_"]];
-    for (key in connections) {
-      if (key.split("-")[1] == curDrag["id_"]) {
-        rm_conn(key.split("-")[0], key.split("-")[1]);
-      }
-    }
-    var i=source.length;
-    for (; i max) {
-      max_idx = i;
-      max = shapes[i]["grid_"];
-    }
-  }
-  if (!shapes[max_idx]) {
-    make_obj(xbegin+padding, "NEW", "target", 0);
-  } else {
-    make_obj(shapes[max_idx].getBBox().x2+(margin-padding),
-             "NEW",
-             "target",
-             max+1);
-  }
-  r.setSize(r.width+target_shapes[target_shapes.length-1].getBBox().width+margin, r.height);
-
-  snap_to_grid(true);
-},
-make_objs = function (a, type)
-{
-  for (var i=0; i < a.length; i++) {
-    var x = 0;
-    if (i == 0) {
-      x = xbegin+padding;
-    } else {
-      x = margin+texts[texts.length-1].getBBox().x2;
-    }
-    make_obj(x, a[i], type);
-  }
-};
-
-/*
- * data
- *
- */
-var extract_data = function ()
-{
-  el = document.getElementById("data");
-  d = {};
-  d["source"] = [];
-  d["target"] = [];
-  d["align"] = [];
-  // target
-  var ids = [];
-  target_shapes.sort(function(a, b) {
-    return a["grid_"]-b["grid_"];
-  });
-  for (var i=0; i