summaryrefslogtreecommitdiff
path: root/edit.js
diff options
context:
space:
mode:
authorPatrick Simianer <p@simianer.de>2015-10-28 12:50:55 +0100
committerPatrick Simianer <p@simianer.de>2015-10-28 12:50:55 +0100
commit09f8c82118223b71a091600256af7a3d56734ddd (patch)
tree41ca3c6cff270923c5a648275f8a5073258510d2 /edit.js
parent20461c1beb880be96727265266e483b79cbeec04 (diff)
remove raphael lib, mv
Diffstat (limited to 'edit.js')
-rw-r--r--edit.js663
1 files changed, 0 insertions, 663 deletions
diff --git a/edit.js b/edit.js
deleted file mode 100644
index 1adf2ac..0000000
--- a/edit.js
+++ /dev/null
@@ -1,663 +0,0 @@
-/*
- * global vars and data
- *
- */
-var r,
- // objects
- shapes_by_id = {},
- shapes = [],
- target_shapes = [],
- texts = [],
- connections = {},
- id = 0,
- next_grid = 0,
- // layout
- margin = 30,
- padding = margin/3,
- xbegin = 80,
- ybegin = 5,
- box_height = 30,
- line_margin = 80,
- ysource = ybegin,
- ytarget = ysource+line_margin;
- font_size = 10,
- font_width = -1,
- stroke_width = 1,
- stroke_width_hi = 3,
- align_stroke = "#eee",
- align_stroke_hi = "#000",
- 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": stroke_width }
- // dragging
- cur_drag = null,
- new_pos = -1,
- old_pos = -1;
- // connecting
- connect_mode = false,
- connect_mode_shape = null,
- new_conns = [],
- // editing
- cur_ed = null,
- cur_ed_shape = null,
- edit_mode = false,
- // removing
- rm_shape = null,
- // data
- source = null,
- target = null,
- align = null;
-
-/*
- * 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: align_stroke, 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);
- if (connect_mode) {
- new_conns.push(connections[conn_str(obj1,obj2)]);
- connections[conn_str(obj1,obj2)].line.attr({"stroke":align_stroke_hi,"stroke-width":stroke_width_hi});
- }
-},
-rm_conn = function(id1, id2)
-{
- var b = false;
- for (var i=0; i<source.length; i++) {
- for (var j=0; j<target_shapes.length; j++) {
- if (i==id1 && target_shapes[j]["id_"]==id2) {
- var key = id1+"-"+id2;
- var q = connections[key];
- q.line.remove();
- delete connections[key];
- b = true;
- break;
- }
- }
- if (b)
- break;
- }
- shapes_by_id[id1].attr({"stroke-width":stroke_width});
-}
-make_conns_from_a = function (align)
-{
- var offset = source.length;
- for (var i=0; i < align.length; i++) {
- for (var j=0; j<align[i].length; j++) {
- make_conn(shapes[i], shapes[offset+align[i][j]]);
- }
- }
-}
-
-/*
- * drag"n drop
- *
- */
-var dragger = function ()
-{
- if (edit_mode)
- return;
- cur_drag = this;
- // drag shape, not text
- if (this.type == "text")
- 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");
- this.pair.ox = this.pair.attr("x");
- this.pair.oy = this.pair.attr("y");
- if (this.type != "text")
- this.animate({ "fill-opacity": .2 }, 500);
- if (this.pair.type != "text")
- this.pair.animate({ "fill-opacity": .2 }, 500);
-},
-move = function (dx, dy)
-{
- if (edit_mode) return;
- var att = { x: this.ox + dx, y: this.oy };
- this.attr(att);
- att = { x: this.pair.ox + dx, y: this.pair.oy };
- this.pair.attr(att);
- for (key in connections) {
- r.connection(connections[key]);
- }
-
- r.safari();
-};
-
-/*
- * snap-to-grid
- *
- */
-var collide = function collide (obj)
-{
- // not a shape
- if (!obj["id_"] || obj.type!="rect")
- return;
- // remove
- if (obj["rm_shape_"]) {
- cur_drag["delete_me_"] = true;
- return;
- }
- 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")+cur_drag.getBBox().width+(margin-2*padding) };
- obj.pair.attr(att);
- } 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")-(cur_drag.getBBox().width+(margin-2*padding)) };
- obj.attr(att);
- att = { x: obj.pair.attr("x")-(cur_drag.getBBox().width+(margin-2*padding)) };
- obj.pair.attr(att);
- }
- // grid pos
- new_pos = obj["grid_tmp_"];
- 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_"] + "@" + target_shapes[i]["grid_"]+" " ;
- }
- document.getElementById("debug").innerHTML = s;
- document.getElementById("debug").innerHTML += " new:"+new_pos + " old:"+old_pos;
- document.getElementById("debug").innerHTML += " next_grid:"+next_grid;
-},
-up = function () {
- if (this["delete_me_"]) {
- var del = shapes_by_id[this["id_"]];
- if (!del)
- return;
- var del_grid = del["grid_"]
- for (key in connections) {
- if (key.split("-")[1] == cur_drag["id_"]) {
- rm_conn(key.split("-")[0], key.split("-")[1]);
- }
- }
- var i=source.length;
- for (; i<shapes.length; i++) {
- if (shapes[i] == this) {
- break;
- }
- }
- shapes.splice(i, 1);
- for (var i=0; i<target_shapes.length; i++) {
- if (target_shapes[i] == this) {
- break;
- }
- }
- target_shapes.splice(i, 1);
- delete shapes_by_id[this["id_"]];
- var x = del.pair;
- if (x)
- x.remove();
- if (del)
- del.remove();
- var max = -1;
- for (var i=0; i<target_shapes.length; i++) {
- var g = target_shapes[i]["grid_"];
- if (g > del_grid) {
- target_shapes[i]["grid_"] -= 1;
- }
- if (g > max)
- max = g;
- }
- next_grid = g;
- if (!next_grid) // empty
- next_grid = 0;
- cur_drag = null;
- snap_to_grid(true);
- return;
- }
- if (this.type != "text")
- this.animate({"fill-opacity": 0}, 500);
- if (this.pair.type != "text")
- this.pair.animate({"fill-opacity": 0}, 500);
-
- snap_to_grid(true);
-},
-snap_to_grid = function (anim=false)
-{
- // just x coord, y is fixed in drag
- var d = xbegin;
- // just target objs
- target_shapes.sort(function(a, b) {
- return a["grid_"]-b["grid_"];
- });
- // switch
- if (cur_drag) { // fix glitch when calling from add_obj() and up()
- 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_"];
- 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) {
- // right -> left
- 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;
- }
- }
- }
- } // ^ 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
- return;
- }
- att = { x:d };
- if (anim) {
- obj.attr(att);
- } else {
- obj.attr(att);
- }
- att = { x: obj.getBBox().x+padding };
- if (anim) {
- obj.pair.animate(att,125);
- } else {
- 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]);
- }
-};
-
-/*
- * objs
- *
- */
-var make_obj = function(x, text, type)
-{
- var y;
- if (type == "source") {
- y = ysource;
- } else if (type == "target") {
- y = ytarget;
- }
- // make text obj
- texts.push(r.text(x, y+(box_height/2), text).attr(text_att));
- // make shape obj
- var x_shape = texts[texts.length-1].getBBox().x-padding,
- x_width = texts[texts.length-1].getBBox().width+(2*padding);
- shapes.push(r.rect(x_shape, y, x_width, box_height, 5).attr(shape_att));
- tx = texts[texts.length-1];
- sh = shapes[shapes.length-1];
- // fix z-index
- tx.toBack();
- sh.toFront();
- // pair text/shape
- tx.pair = shapes[shapes.length-1];
- sh.pair = texts[texts.length-1];
- // meta
- sh["type_"] = type;
- sh["id_"] = id;
- shapes_by_id[id] = sh;
- if (type == "target") {
- sh.drag(move, dragger, up).onDragOver( function(obj) { collide(obj); })
- sh.attr({ cursor: "move" });
- tx.drag(move, dragger, up);
- sh["grid_"] = next_grid;
- sh["grid_tmp_"] = next_grid;
- sh.click(function() {
- if (connect_mode) {
- if (connections[conn_str(connect_mode_shape,this)]) {
- rm_conn(connect_mode_shape["id_"], this["id_"]);
- } else {
- make_conn(connect_mode_shape, this);
- }
- connect_mode_shape.attr({"fill-opacity": 0});
- connect_mode = false;
- connect_mode_shape = null;
- }
- });
- target_shapes.push(sh);
- // inline text editing
- r.inlineTextEditing(tx);
- sh.dblclick(function(){
- if (edit_mode) return;
- edit_mode = true;
- this.pair.toFront();
- 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
- return;
- } 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) {
- // return
- e.preventDefault();
- 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 {
- // 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);
- },25);
- }
- });
- input.addEventListener("blur", function(e) {
- 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);
- });
- } else if (type == "source") {
- sh.click(function() {
- if (connect_mode) {
- if (this != connect_mode_shape)
- return;
- this.animate({"fill-opacity": 0}, 250);
- connect_mode = false;
- connect_mode_shape = null;
- } else {
- this.animate({"fill-opacity": .5}, 250);
- connect_mode = true;
- connect_mode_shape = this;
- }
- });
- }
- // mouseover -out
- sh.mouseover(function() {
- var idx, other_idx;
- if (this["type_"] == "target") {
- idx = 1;
- other_idx = 0;
- } else {
- idx = 0;
- other_idx = 1;
- }
- for (c in connections) {
- if (parseInt(c.split("-")[idx]) == this["id_"]) {
- connections[c].line.attr({"stroke":align_stroke_hi,"stroke-width":stroke_width_hi});
- shapes_by_id[parseInt(c.split("-")[other_idx])].attr({"stroke-width":stroke_width_hi});
- }
- }
- this.animate({"stroke-width":stroke_width_hi})
- });
- sh.mouseout(function() {
- var idx, other_idx;
- if (this["type_"] == "target") {
- idx = 1;
- other_idx = 0;
- } else {
- idx = 0;
- other_idx = 1;
- }
- for (c in connections) {
- if (parseInt(c.split("-")[idx]) == this["id_"]) {
- connections[c].line.attr({"stroke":align_stroke,"stroke-width":stroke_width});
- shapes_by_id[parseInt(c.split("-")[other_idx])].attr({"stroke-width":stroke_width});
- }
- }
- this.animate({"stroke-width":stroke_width})
- for (var i=0; i<new_conns.length; i++) {
- new_conns[i].line.attr({"stroke":align_stroke,"stroke-width":stroke_width});
- }
- new_conns = [];
- });
- id++;
- if (type == "target")
- next_grid++;
-},
-add_obj = function()
-{
- if (!data) return;
- var max=0, max_idx=-1;
- for (var i=0; i < shapes.length; i++) {
- if (shapes[i]["grid_"] > max) {
- max_idx = i;
- max = shapes[i]["grid_"];
- }
- }
- if (!shapes[max_idx]) {
- make_obj(xbegin+padding, "X", "target");
- } else {
- make_obj(shapes[max_idx].getBBox().x2+(margin-padding),
- "X",
- "target");
- }
- r.setSize(r.width+target_shapes[target_shapes.length-1].getBBox().width+margin, r.height);
-
- cur_drag = null;
- 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<target_shapes.length; i++) {
- d["target"].push(target_shapes[i].pair.attr("text"));
- ids.push(target_shapes[i]["id_"]);
- }
- // alignment
- for (key in connections) {
- var a = key.split("-");
- var src = a[0], tgt = ids.indexOf(parseInt(a[1]));
- d["align"].push(src+"-"+tgt);
- }
- // source
- for (var i=0; i<shapes.length; i++) {
- if (shapes[i]["type_"] == "source") {
- d["source"].push(shapes[i].pair.attr("text"));
- } else {
- break;
- }
- }
- // output
- s = JSON.stringify(d);
- el.innerHTML = s;
-
- return s;
-}
-
-
-///////////////////////////////////////////////////////////////////////////////
-
-function loadJSON(callback) {
- /*var xobj = new XMLHttpRequest();
- xobj.overrideMimeType("application/json");
- xobj.open('GET', 'http://simianer.de/tmp/example.json', true);
- xobj.onreadystatechange = function () {
- if (xobj.readyState == 4 && xobj.status == "200") {
- callback(xobj.responseText);
- }
- };
- xobj.send(null);*/
-}
-
-function load_data()
-{
- //loadJSON(function(r) {
- //data=JSON.parse(r);
- //data=JSON.parse('{"phrase_alignment":[[0,2],[1],[0,2],[3],[4],[5],[6],[7,9],[8],[7,9],[10,18],[11],[10,18],[12],[13],[14],[15],[16],[17],[10,18],[19],[20],[21,23],[22],[21,23],[24],[25]],"source_groups":["hier also","ein bescheidener",",","auf alle","demokratien","anzuwendender","vorschlag",":","der markt für","ideen","funktioniert","besser",",","wenn es den","bürgern","leichter","fällt , die","zielkonflikte zwischen","treffsicherheit","der","aussagen und","unterhaltung","oder zwischen","treffsicherheit","und","parteitreue","zu erkennen ."],"target_groups":["so here","a modest",",","to all","democracies","anzuwendender","proposal",":","the market for","ideas","works","better","if","citizens","easier",", the","trade @-@ offs between","treffsicherheit","the","statements and","entertainment","or","treffsicherheit","and","parteitreue","."]}');
- //data = JSON.parse(document.getElementById("last_post_edit").value);
- source = data["source_groups"];
- target = data["target_groups"];
- align = data["phrase_alignment"];
- init_derivation_editor();
- //});
-}
-
-var reset_derivation_edtior = function(load=false)
-{
- if (!data) return;
- if (r) {
- for (var x in shapes_by_id) {
- if (x.remove) {
- x.pair.remove();
- x.remove();
- }
- }
- for (var x in connections) {
- if (x.line)
- x.line.remove()
- }
- r.remove();
- }
-
- shapes_by_id = {};
- shapes = [];
- target_shapes = [];
- texts = [];
- connections = {};
- id = 0;
- next_grid = 0;
- cur_drag = null;
- edit_mode = false;
- cur_ed = null;
- cur_ed_shape = null;
- connect_mode = false;
- connect_mode_shape = null;
- rm_shape = null;
-
- document.getElementById("holder").parentElement.removeChild(document.getElementById("holder"));
- var new_holder = document.createElement("div");
- new_holder.setAttribute("id","holder");
- $("#derivation_editor").prepend(new_holder);
- if (load) { load_data() }
-}
-
-var init_derivation_editor = function ()
-{
- reset_derivation_edtior();
- // canvas
- r = Raphael("holder",0,0);
- var c = 0,
- d = 0,
- a = null;
- for (var i=0; i<source.length; i++) {
- c += source[i].length;
- }
- for (var i=0; i<target.length; i++) {
- d += target[i].length;
- }
- 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), // FIXME
- 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["id_"] = -1;
- // source objs
- make_objs(source, "source");
- // target objs
- make_objs(target, "target");
- // initial connections from alignment
- make_conns_from_a(align);
-}
-