From 5490e1d27872c3ec3d3425f53066d5b3aa0d3454 Mon Sep 17 00:00:00 2001 From: Patrick Simianer Date: Fri, 6 Nov 2015 10:01:58 +0100 Subject: new rm functionality, some UI tweaks --- derivation-editor.js | 193 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 114 insertions(+), 79 deletions(-) diff --git a/derivation-editor.js b/derivation-editor.js index 29cc34d..b987f77 100644 --- a/derivation-editor.js +++ b/derivation-editor.js @@ -25,16 +25,18 @@ var DE_paper, DE_ui_stroke_width = 1, DE_ui_stroke_width_hi = 3, DE_ui_align_stroke = "#ccc", - DE_ui_align_stroke_hi = "#aaa", + DE_ui_align_stroke_hi = "#000", + DE_ui_fill_opacity_hi = { "fill-opacity": .2 }, DE_ui_text_att = { "fill": "#000", "stroke": "none", "text-anchor": "start", "font-size": DE_ui_font_size, "font-family": "Times New Roman" }, - DE_ui_shape_att = { "fill": "#eee", "stroke": "#000", "fill-opacity": 0, + DE_ui_shape_att = { "fill": "red", "stroke": "#000", "fill-opacity": 0, "stroke-width": DE_ui_stroke_width } // dragging DE_cur_drag = null, - DE_new_pos = -1, - DE_old_pos = -1; + DE_dragging = false, + DE_new_pos = -1, + DE_old_pos = -1; // connecting DE_connect_mode = false, DE_connect_mode_shape = null, @@ -45,6 +47,7 @@ var DE_paper, DE_edit_mode = false, // removing DE_rm_shape = null, + DE_rm_mult = [], // data DE_data_source = null, DE_data_target = null, @@ -138,6 +141,7 @@ var DE_dragger = function () if (DE_edit_mode) return; DE_cur_drag = this; + DE_dragging = true; // drag shape, not text if (this.type == "text") DE_cur_drag = this.pair; @@ -151,9 +155,9 @@ var DE_dragger = function () this.pair.ox = this.pair.attr("x"); this.pair.oy = this.pair.attr("y"); if (this.type != "text") - this.animate({ "fill-opacity": .2 }, 500); + this.animate(DE_ui_fill_opacity_hi, 250); if (this.pair.type != "text") - this.pair.animate({ "fill-opacity": .2 }, 500); + this.pair.animate(DE_ui_fill_opacity_hi, 250); } var DE_move = function (dx, dy) @@ -171,55 +175,15 @@ var DE_move = function (dx, dy) } var DE_up = function () { + DE_dragging = false; if (this["delete_me_"]) { - var del = DE_shapes_by_id[this["id_"]]; - if (!del) - return; - var del_grid = del["grid_"] - for (key in DE_connections) { - if (key.split("-")[1] == DE_cur_drag["id_"]) { - DE_rm_conn(key.split("-")[0], key.split("-")[1]); - } - } - var i=DE_data_source.length; - for (; i del_grid) { - DE_target_shapes[i]["grid_"] -= 1; - } - if (g > max) - max = g; - } - DE_next_grid = g; - if (!DE_next_grid) // empty - DE_next_grid = 0; - DE_cur_drag = null; - snap_to_grid(true); + rm_obj(this); return; } if (this.type != "text") - this.animate({"fill-opacity": 0}, 500); + this.animate({"fill-opacity": 0}, 250); if (this.pair.type != "text") - this.pair.animate({"fill-opacity": 0}, 500); + this.pair.animate({"fill-opacity": 0}, 250); snap_to_grid(true); } @@ -231,6 +195,7 @@ var DE_up = function () { */ var DE_collide = function (obj) { + if (obj["type_"]=="source") return; // not a shape if (!obj["id_"] || obj.type!="rect") return; @@ -277,35 +242,35 @@ var snap_to_grid = function (anim=false) }); // switch if (DE_cur_drag) { // fix glitch when calling from DE_add_object() and up() - DE_cur_drag["grid_"] = DE_new_pos; - cur_id = DE_cur_drag["id_"]; - if (DE_new_pos > DE_old_pos) { - // left -> right - for (var i=0; i < DE_target_shapes.length; i++) { - pos = DE_target_shapes[i]["grid_"]; - id_ = DE_target_shapes[i]["id_"]; - if (id_ == cur_id) - continue; - if (pos >= DE_old_pos && pos <= DE_new_pos) { - DE_target_shapes[i]["grid_"] -= 1; - } else { - continue; + DE_cur_drag["grid_"] = DE_new_pos; + cur_id = DE_cur_drag["id_"]; + if (DE_new_pos > DE_old_pos) { + // left -> right + for (var i=0; i < DE_target_shapes.length; i++) { + pos = DE_target_shapes[i]["grid_"]; + id_ = DE_target_shapes[i]["id_"]; + if (id_ == cur_id) + continue; + if (pos >= DE_old_pos && pos <= DE_new_pos) { + DE_target_shapes[i]["grid_"] -= 1; + } else { + continue; + } } - } - } else if (DE_new_pos < DE_old_pos) { - // right -> left - for (var i=0; i < DE_target_shapes.length; i++) { - pos = DE_target_shapes[i]["grid_"]; - id_ = DE_target_shapes[i]["id_"]; - if (id_ == cur_id) - continue; - if (pos >= DE_new_pos && pos <= DE_old_pos) { - DE_target_shapes[i]["grid_"] += 1; - } else { - continue; + } else if (DE_new_pos < DE_old_pos) { + // right -> left + for (var i=0; i < DE_target_shapes.length; i++) { + pos = DE_target_shapes[i]["grid_"]; + id_ = DE_target_shapes[i]["id_"]; + if (id_ == cur_id) + continue; + if (pos >= DE_new_pos && pos <= DE_old_pos) { + DE_target_shapes[i]["grid_"] += 1; + } else { + continue; + } } } - } } // ^ fix glitch // sort by grid pos DE_target_shapes.sort(function(a, b) { @@ -383,21 +348,34 @@ var DE_make_obj = function (x, text, type) sh["id_"] = DE_id; DE_shapes_by_id[DE_id] = sh; if (type == "target") { - sh.drag(DE_move, DE_dragger, DE_up).onDragOver( function(obj) { DE_collide(obj); }) + sh.drag(DE_move, DE_dragger, DE_up).onDragOver(function(obj) { DE_collide(obj); }) sh.attr({ cursor: "move" }); tx.drag(DE_move, DE_dragger, DE_up); sh["grid_"] = DE_next_grid; sh["grid_tmp_"] = DE_next_grid; - sh.click(function() { + sh.click(function(e) { if (DE_connect_mode) { if (DE_connections[DE_conn_str(DE_connect_mode_shape,this)]) { DE_rm_conn(DE_connect_mode_shape["id_"], this["id_"]); } else { DE_make_conn(DE_connect_mode_shape, this); + DE_connect_mode_shape.attr({"stroke":DE_ui_align_stroke_hi,"stroke-width":DE_ui_stroke_width_hi}); } DE_connect_mode_shape.attr({"fill-opacity": 0}); DE_connect_mode = false; DE_connect_mode_shape = null; + } else { // delete + if (e.shiftKey) { + var index = DE_rm_mult.indexOf(this); + if (index != -1) { + DE_rm_mult.splice(index, 1); + this.animate({"stroke":"#000"}); + this.animate({"fill-opacity":0}); + } else { + this.animate({"stroke":"red"}); + DE_rm_mult.push(this); + } + } } }); DE_target_shapes.push(sh); @@ -454,7 +432,7 @@ var DE_make_obj = function (x, text, type) DE_connect_mode = false; DE_connect_mode_shape = null; } else { - this.animate({"fill-opacity": .5}, 250); + this.animate(DE_ui_fill_opacity_hi, 250); DE_connect_mode = true; DE_connect_mode_shape = this; } @@ -462,6 +440,7 @@ var DE_make_obj = function (x, text, type) } // mouseover -out sh.mouseover(function() { + if (DE_dragging) return; var idx, other_idx; if (this["type_"] == "target") { idx = 1; @@ -542,6 +521,62 @@ var DE_make_objs = function (a, type) } }; +var rm_obj = function(obj) +{ + var del = DE_shapes_by_id[obj["id_"]]; + if (!del) + return; + var del_grid = del["grid_"] + for (key in DE_connections) { + if (key.split("-")[1] == obj["id_"]) { + DE_rm_conn(key.split("-")[0], key.split("-")[1]); + } + } + var i=DE_data_source.length; + for (; i del_grid) { + DE_target_shapes[i]["grid_"] -= 1; + } + if (g > max) + max = g; + } + DE_next_grid = g; + if (!DE_next_grid) // empty + DE_next_grid = 0; + DE_cur_drag = null; + snap_to_grid(true); + return; +} + +$(document).keypress(function(e){ + if (DE_rm_mult.length>0 && e.which==0) { + for (var i=0; i