diff options
| -rw-r--r-- | derivation-editor.js | 878 | ||||
| -rw-r--r-- | raphael.inline_text_editing.js | 2 |
2 files changed, 701 insertions, 179 deletions
diff --git a/derivation-editor.js b/derivation-editor.js index eecf90a..2a9fbcf 100644 --- a/derivation-editor.js +++ b/derivation-editor.js @@ -14,7 +14,7 @@ var DE_paper, // ui DE_ui_margin = 32, DE_ui_padding = DE_ui_margin/3, - DE_ui_xbegin = 5, + DE_ui_xbegin = 10, DE_ui_ybegin = 5, DE_ui_box_height = 32, DE_ui_line_margin = 64, @@ -22,16 +22,14 @@ var DE_paper, DE_ui_ytarget = DE_ui_ysource+DE_ui_line_margin; DE_ui_font_size = 14, DE_ui_font_width = -1, +/////////////////////////////////////////////////////////////////////////////// DE_ui_stroke_width = 1, DE_ui_stroke_width_hi = 4, DE_ui_align_stroke = "#000", 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, + DE_ui_text_att = { "text-anchor": "start", "font-size": DE_ui_font_size, "font-family": "Times New Roman" }, - DE_ui_shape_att = { "fill": "red", "stroke": "#000", "fill-opacity": 0, - "stroke-width": DE_ui_stroke_width } +/////////////////////////////////////////////////////////////////////////////// // dragging DE_cur_drag = null, DE_dragging = false, @@ -47,10 +45,167 @@ var DE_paper, DE_edit_mode = false, // removing DE_rm_mult = [], + // keyboard interface + DE_kbd_focused_phrase = null, + DE_kbd_move_mode = false, + DE_kbd_select_mode = false, + // done + DE_target_done = [], // data DE_data_source = null, DE_data_target = null, - DE_data_align = null; + DE_data_align = null, + // lock + DE_locked = false; + + +/****************************************************************************** + * + * style + * + */ +var ch_style = function (item, shape_att, text_att, anim=false, anim_dur=50) +{ + if (!anim) { + item.attr(shape_att); + if (item.pair) + item.pair.attr(text_att); + } else { + item.animate(shape_att, anim_dur); + item.pair.animate(text_att, anim_dur); + } +} + +var DE_ui_style_normal = function (item, type=null) +{ + if (!type) + type = item["type_"]; + var to_delete = false; + var color = stroke_color = "#000"; + var text_color = "#fff"; + if (DE_rm_mult.indexOf(item)>-1) + color = stroke_color = "#f00"; + if (DE_target_done.indexOf(item)>-1) { + color = "#fff"; + text_color = stroke_color= "#000"; + } + var shape_att; + var text_att; + if (type == "source") { + shape_att = { + "fill": "#fff", + "fill-opacity": 1.0, + "stroke": "#000", + "stroke-width": 1 + }; + text_att = { + "fill": "#000", + "fill-opacity": 1.0, + "stroke": "none", + "stroke-width": 0 + }; + } else { // type == "target" + shape_att = { + "fill": color, + "fill-opacity": 1.0, + "stroke": stroke_color, + "stroke-width": 1 + }; + text_att = { + "fill": text_color, + "fill-opacity": 1.0, + "stroke": text_color, + "stroke-width": 0 + }; + } + + ch_style(item, shape_att, text_att); +} + +var DE_ui_style_highlight = function (item, type=null) +{ + if (!type) + type = item["type_"]; + var to_delete = false; + var color = stroke_color = "#000"; + var stroke_width = 9; + var text_color = "#fff"; + if (DE_rm_mult.indexOf(item)>-1) + color = stroke_color = "#f00"; + if (DE_target_done.indexOf(item)>-1) { + color = "#fff"; + text_color = stroke_color = "#000"; + stroke_width = 5; + } + var shape_att; + var text_att; + if (type == "source") { + shape_att = { + "fill": "#fff", + "fill-opacity": 1.0, + "stroke": "#000", + "stroke-width": 3 + }; + text_att = { + "fill": "#000", + "fill-opacity": 1.0, + "stroke": "none", + "stroke-width": 0 + }; + } else { // type == "target" + shape_att = { + "fill": color, + "fill-opacity": 1.0, + "stroke": stroke_color, + "stroke-width": stroke_width + }; + text_att = { + "fill": text_color, + "fill-opacity": 1.0, + "stroke": text_color, + "stroke-width": 0 + }; + } + + ch_style(item, shape_att, text_att); +} + +var DE_ui_style_mark = function (item, type=null) +{ + if (!type) + type = item["type_"]; + var shape_att; + var text_att; + if (type == "source") { + shape_att = { + "fill": "#ff0000", + "fill-opacity": 0.25, + "stroke": "#000", + "stroke-width": 3 + }; + text_att = { + "fill": "#000", + "fill-opacity": 1.0, + "stroke": "none", + "stroke-width": 0 + }; + } else { // type == "target" + shape_att = { + "fill": "#000", + "fill-opacity": 1.0, + "stroke": "#000000", + "stroke-width": 9 + }; + text_att = { + "fill": "#fff", + "fill-opacity": 1.0, + "stroke": "#fff", + "stroke-width": 0 + }; + } + + ch_style(item, shape_att, text_att); +} /****************************************************************************** * @@ -78,8 +233,15 @@ Raphael.fn.connection = function (obj1, obj2, line, bg) 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: DE_ui_align_stroke, fill: "none"}), + 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": DE_ui_align_stroke, + "fill": "none" + }), from: obj1, to: obj2 }; @@ -96,7 +258,10 @@ var DE_make_conn = function(obj1, obj2) DE_connections[DE_conn_str(obj1,obj2)] = DE_paper.connection(obj1, obj2); if (DE_connect_mode) { DE_new_conns.push(DE_connections[DE_conn_str(obj1,obj2)]); - DE_connections[DE_conn_str(obj1,obj2)].line.attr({"stroke":DE_ui_align_stroke_hi,"stroke-width":DE_ui_stroke_width_hi}); + DE_connections[DE_conn_str(obj1,obj2)].line.attr({ + "stroke":DE_ui_align_stroke_hi, + "stroke-width":DE_ui_stroke_width_hi + }); } } @@ -117,6 +282,11 @@ var DE_rm_conn = function (id1, id2) if (b) break; } + for (c in DE_connections) { + a = c.split("-"); + if (id1 == parseInt(a[0]) && parseInt(a[1])==DE_kbd_focused_phrase["id_"]) + return; + } DE_shapes_by_id[id1].attr({"stroke-width":DE_ui_stroke_width}); } @@ -189,7 +359,7 @@ var DE_up = function () { * snap-to-grid * */ -var DE_colldetect = function (dir) // FIXME +var DE_colldetect = function (dir) { DE_target_shapes.sort(function(a, b) { return a["grid_"]-b["grid_"]; @@ -208,8 +378,7 @@ var DE_colldetect = function (dir) // FIXME continue; var b_left = b.attr("x"); var b_right = b.attr("x")+b.attr("width"); - if (!(a_left >= b_right || a_right <= b_left)) { - //b.attr({"stroke":"green","stroke-width":4}); + if (!(a_left >= b_right || a_right <= b_left)) { // collision! if (a["grid_"] > b["grid_"]) { // a should be right of b a.attr({"x": a.attr("x")+(a_right-b_left)}); a.pair.attr({"x": a.pair.attr("x")+(a_right-b_left)}); @@ -229,8 +398,7 @@ var DE_collide = function (obj) // not a shape if (!obj["id_"] || obj.type!="rect") return; - if (DE_cur_drag["grid_tmp_"] > obj["grid_tmp_"]) { - // right -> left + if (DE_cur_drag["grid_tmp_"] > obj["grid_tmp_"]) { // right -> left /*if (DE_cur_drag.getBBox().width < obj.getBBox().width && DE_cur_drag.getBBox().x > (obj.getBBox().x+obj.getBBox().width/1000)) { // ignored tolerance, when return; // dragging onto shapes @@ -240,8 +408,7 @@ var DE_collide = function (obj) att = { x: obj.pair.attr("x")+DE_cur_drag.getBBox().width+(DE_ui_margin-2*DE_ui_padding) }; obj.pair.attr(att); DE_colldetect("rl"); - } else { - // left -> right + } else { // left -> right /*if (DE_cur_drag.getBBox().width < obj.getBBox().width && DE_cur_drag.getBBox().x < (obj.getBBox().x+obj.getBBox().width/1000)) { return; @@ -271,8 +438,7 @@ var DE_snap_to_grid = function (anim=false, ignore_cur_drag=false) 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 + 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_"]; @@ -284,8 +450,7 @@ var DE_snap_to_grid = function (anim=false, ignore_cur_drag=false) continue; } } - } else if (DE_new_pos < DE_old_pos) { - // right -> left + } 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_"]; @@ -319,7 +484,8 @@ var DE_snap_to_grid = function (anim=false, ignore_cur_drag=false) } att = { x: obj.getBBox().x+DE_ui_padding }; if (anim) { - obj.pair.animate(att,125); + //obj.pair.animate(att,50); + obj.pair.attr(att); } else { obj.pair.attr(att); } @@ -348,6 +514,178 @@ var DE_debug_DE_snap_to_grid = function () { /****************************************************************************** * + * mouseover-out / click events + * + */ +DE_item_mouseover = function (item) +{ + if (DE_locked) return; + if (DE_dragging) return; + if (DE_edit_mode) return; + + // fix z-index + //this.pair.toBack(); + //this.toFront(); + + // reset others + var not_reset = []; + for (c in DE_connections) { + if (DE_shapes_by_id[parseInt(c.split("-")[1])] != DE_kbd_focused_phrase || + c.split("-")[1] != DE_kbd_focused_phrase["id_"]) + DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width}); + if (c.split("-")[1] == DE_kbd_focused_phrase["id_"]) + not_reset.push(c.split("-")[0]); + } + for (sh in DE_shapes_by_id) { + if (sh != DE_kbd_focused_phrase["id_"] + && not_reset.indexOf(sh)==-1) { + if (!(DE_connect_mode_shape && sh==DE_connect_mode_shape["id_"])) { + DE_ui_style_normal(DE_shapes_by_id[sh]); + } + } + } + + var idx, other_idx; + if (item["type_"] == "target") { + idx = 1; + other_idx = 0; + } else { + idx = 0; + other_idx = 1; + } + for (c in DE_connections) { + if (parseInt(c.split("-")[idx]) == item["id_"]) { + DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width_hi}); + if (DE_shapes_by_id[parseInt(c.split("-")[other_idx])] != DE_connect_mode_shape) + DE_ui_style_highlight(DE_shapes_by_id[parseInt(c.split("-")[other_idx])]); + } + } + + if (item != DE_connect_mode_shape) + DE_ui_style_highlight(item); +} + +DE_item_mouseout = function (item) +{ + if (DE_cur_drag) return; + if (DE_edit_mode) return; // FIXME + if (item == DE_connect_mode_shape) return; + if (item == DE_kbd_focused_phrase) return; + + // fix z-index + //this.pair.toFront(); + //this.toBack(); + + var idx, other_idx; + if (item["type_"] == "target") { + idx = 1; + other_idx = 0; + } else { + idx = 0; + other_idx = 1; + } + var aligned_with_focused = false; + for (c in DE_connections) { + if (parseInt(c.split("-")[idx]) == item["id_"]) { + var obj = DE_shapes_by_id[parseInt(c.split("-")[other_idx])]; + if (parseInt(c.split("-")[1]) != DE_kbd_focused_phrase["id_"]) { + var x = false; + for (d in DE_connections) { + if (d == c.split("-")[0]+'-'+DE_kbd_focused_phrase["id_"]) { + x = true; + break; + } + } + if (!x) { + if (!(DE_connect_mode_shape && obj["id_"]==DE_connect_mode_shape["id_"])) + DE_ui_style_normal(obj); + } + DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width}); + } else { + aligned_with_focused = true; + } + } + } + if (!aligned_with_focused) + DE_ui_style_normal(item); + for (var i=0; i<DE_new_conns.length; i++) { + DE_new_conns[i].line.attr({"stroke-width":DE_ui_stroke_width}); + } + DE_new_conns = []; +} + +var DE_item_click_target = function (e, item) +{ + if (DE_locked) return; + if (DE_connect_mode) { + if (DE_connections[DE_conn_str(DE_connect_mode_shape,item)]) { + DE_rm_conn(DE_connect_mode_shape["id_"], item["id_"]); + DE_ui_style_normal(DE_connect_mode_shape); + } else { + DE_ui_style_highlight(DE_connect_mode_shape); + DE_make_conn(DE_connect_mode_shape, item); + } + DE_connect_mode = false; + DE_connect_mode_shape = null; + } else { // delete + if (e.altKey) { + if (DE_target_done.indexOf(item)>-1) return; + var index = DE_rm_mult.indexOf(item); + if (index != -1) { + DE_rm_mult.splice(index, 1); + for (c in DE_connections) { + var i = parseInt(c.split("-")[1]); + if (i == item["id_"]) + DE_connections[c].line.attr({"stroke":"#000"}); + } + DE_ui_style_highlight(item); + } else { + item.attr({"stroke":"red", "fill":"red"}); + for (c in DE_connections) { + var i = parseInt(c.split("-")[1]); + if (i == item["id_"]) + DE_connections[c].line.attr({"stroke":"#f00"}); + } + DE_rm_mult.push(item); + } + } else if(e.shiftKey && false) { // add + var x = DE_shapes_by_id[item["id_"]].attr("x")+DE_shapes_by_id[item["id_"]].attr("width") + +2*DE_ui_padding; + var new_obj = DE_make_obj(x, "", "target"); + var new_grid = item["grid_"]+1; + new_obj["grid_"] = new_grid; + new_obj.pair["grid_"] = new_grid; + for (var i=0; i<DE_target_shapes.length; i++) { + var sh = DE_target_shapes[i]; + if (sh!=new_obj && sh["grid_"] >=new_grid) { + sh["grid_"] += 1; + sh.pair["grid_"] += 1; + } + } + DE_snap_to_grid(true); + } + } +} + +var DE_item_click_source = function (e, item) +{ + if (DE_locked) return; + if (DE_connect_mode) { + if (item != DE_connect_mode_shape) + return; + if (item != DE_kbd_focused_phrase) + DE_ui_style_highlight(item); + DE_connect_mode = false; + DE_connect_mode_shape = null; + } else { + DE_ui_style_mark(item); + DE_connect_mode = true; + DE_connect_mode_shape = item; + } +} + +/****************************************************************************** + * * add/remove objects * */ @@ -364,180 +702,68 @@ var DE_make_obj = function (x, text, type) // make shape obj var x_shape = DE_texts[DE_texts.length-1].getBBox().x-DE_ui_padding, x_width = DE_texts[DE_texts.length-1].getBBox().width+(2*DE_ui_padding); - DE_shapes.push(DE_paper.rect(x_shape, y, x_width, DE_ui_box_height, 5).attr(DE_ui_shape_att)); + DE_shapes.push(DE_paper.rect(x_shape, y, x_width, DE_ui_box_height, 5)); tx = DE_texts[DE_texts.length-1]; sh = DE_shapes[DE_shapes.length-1]; // fix z-index - tx.toBack(); - sh.toFront(); + tx.toFront(); + sh.toBack(); // pair text/shape tx.pair = DE_shapes[DE_shapes.length-1]; sh.pair = DE_texts[DE_texts.length-1]; + // style + DE_ui_style_normal(DE_shapes[DE_shapes.length-1]); // meta sh["type_"] = 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.attr({ cursor: "move" }); - tx.drag(DE_move, DE_dragger, DE_up); + // :'( + //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(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); - } - } else if(e.ctrlKey) { // add - var x = DE_shapes_by_id[this["id_"]].attr("x")+DE_shapes_by_id[this["id_"]].attr("width") - +2*DE_ui_padding; - var new_obj = DE_make_obj(x, "", "target"); - var new_grid = this["grid_"]+1; - new_obj["grid_"] = new_grid; - new_obj.pair["grid_"] = new_grid; - for (var i=0; i<DE_target_shapes.length; i++) { - var sh = DE_target_shapes[i]; - if (sh!=new_obj && sh["grid_"] >=new_grid) { - sh["grid_"] += 1; - sh.pair["grid_"] += 1; - } - } - DE_snap_to_grid(true); - } - } + DE_item_click_target(e, this); + }); + tx.click(function(e) { + DE_item_click_target(e, this.pair); }); DE_target_shapes.push(sh); // inline text editing DE_paper.inlineTextEditing(tx); sh.dblclick(function(){ - if (DE_edit_mode) return; - DE_edit_mode = true; - this.pair.toFront(); - this.toBack(); - //this.animate({"opacity":0}, 250); - DE_cur_ed = this.pair; - DE_cur_ed_shape = this; - var input = DE_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 - DE_cur_ed_shape.animate({width:DE_cur_ed_shape.getBBox().width-DE_ui_font_width},125); - setTimeout(function(){DE_snap_to_grid(true);},125); - } else if (e.keyCode == 13) { - // return - e.preventDefault(); - DE_cur_ed.inlineTextEditing.stopEditing(); - DE_cur_ed_shape.toFront(); - DE_cur_ed.toBack(); - DE_cur_ed_shape.animate({width:DE_cur_ed.getBBox().width+(DE_ui_margin-DE_ui_padding)},125); - setTimeout(function(){DE_snap_to_grid(true);},125); - DE_edit_mode = false; - } else { - // input - DE_cur_ed_shape.animate({width:(this.value.length*DE_ui_font_width)+2*DE_ui_font_width+2*DE_ui_padding},25); - setTimeout(function(){ - DE_snap_to_grid(true); - DE_paper.setSize(DE_paper.width+DE_ui_font_width, DE_paper.height); - },25); - } - }); - input.addEventListener("blur", function(e) { - DE_cur_ed.inlineTextEditing.stopEditing(); - DE_cur_ed_shape.toFront(); - DE_cur_ed.toBack(); - DE_cur_ed_shape.animate({width:DE_cur_ed.getBBox().width+(DE_ui_margin-DE_ui_padding)},125); - setTimeout(function(){DE_snap_to_grid(true);},125); - DE_edit_mode = false; - }, true); + DE_enter_edit_mode(this); }); + tx.dblclick(function(){ + DE_enter_edit_mode(this.pair); + }) } else if (type == "source") { - sh.click(function() { - if (DE_connect_mode) { - if (this != DE_connect_mode_shape) - return; - this.animate({"fill-opacity": 0}, 250); - DE_connect_mode = false; - DE_connect_mode_shape = null; - } else { - this.animate(DE_ui_fill_opacity_hi, 250); - DE_connect_mode = true; - DE_connect_mode_shape = this; - } + sh.click(function(e) { + DE_item_click_source(e, this); + }); + tx.click(function(e) { + DE_item_click_source(e, this.pair); }); } + // mouseover -out sh.mouseover(function() { - if (DE_dragging) return; - if (DE_edit_mode) return; - - // reset others - for (c in DE_connections) { - DE_connections[c].line.attr({"stroke":DE_ui_align_stroke,"stroke-width":DE_ui_stroke_width}); - } - for (sh in DE_shapes_by_id) { - DE_shapes_by_id[sh].attr({"stroke-width":DE_ui_stroke_width}); - } - - var idx, other_idx; - if (this["type_"] == "target") { - idx = 1; - other_idx = 0; - } else { - idx = 0; - other_idx = 1; - } - for (c in DE_connections) { - if (parseInt(c.split("-")[idx]) == this["id_"]) { - DE_connections[c].line.attr({"stroke":DE_ui_align_stroke_hi,"stroke-width":DE_ui_stroke_width_hi}); - DE_shapes_by_id[parseInt(c.split("-")[other_idx])].attr({"stroke-width":DE_ui_stroke_width_hi}); - } - } - this.animate({"stroke-width":DE_ui_stroke_width_hi}) + DE_item_mouseover(this); }); sh.mouseout(function() { - if (DE_cur_drag) return; - if (DE_edit_mode) return; // FIXME - var idx, other_idx; - if (this["type_"] == "target") { - idx = 1; - other_idx = 0; - } else { - idx = 0; - other_idx = 1; - } - for (c in DE_connections) { - if (parseInt(c.split("-")[idx]) == this["id_"]) { - DE_connections[c].line.attr({"stroke":DE_ui_align_stroke,"stroke-width":DE_ui_stroke_width}); - DE_shapes_by_id[parseInt(c.split("-")[other_idx])].attr({"stroke-width":DE_ui_stroke_width}); - } - } - this.animate({"stroke-width":DE_ui_stroke_width}) - for (var i=0; i<DE_new_conns.length; i++) { - DE_new_conns[i].line.attr({"stroke":DE_ui_align_stroke,"stroke-width":DE_ui_stroke_width}); - } - DE_new_conns = []; + DE_item_mouseout(this); + }); + tx.mouseover(function() { + DE_item_mouseover(this.pair); }); + tx.mouseout(function() { + //DE_item_mouseout(this.pair); + }); + DE_id++; + if (type == "target") DE_next_grid++; @@ -561,9 +787,17 @@ var DE_add_object = function() "", "target"); } - DE_paper.setSize(DE_paper.width+DE_target_shapes[DE_target_shapes.length-1].getBBox().width+DE_ui_margin, DE_paper.height); + DE_paper.setSize( + DE_paper.width + +DE_target_shapes[DE_target_shapes.length-1].getBBox().width + +DE_ui_margin, + DE_paper.height); DE_cur_drag = null; + + if (DE_target_shapes.length==1) + DE_kbd_focus_shape(DE_target_shapes[0]); + DE_snap_to_grid(true); } @@ -582,6 +816,7 @@ var DE_make_objs = function (a, type) var rm_obj = function(obj) { + if (!obj) return; var del = DE_shapes_by_id[obj["id_"]]; if (!del) return; @@ -624,17 +859,58 @@ var rm_obj = function(obj) DE_next_grid = 0; DE_cur_drag = null; DE_snap_to_grid(true); + return; } -$(document).keypress(function(e){ - if (DE_rm_mult.length>0 && e.which==0) { - for (var i=0; i<DE_rm_mult.length; i++) { - rm_obj(DE_rm_mult[i]); +var DE_enter_edit_mode = function (sh, kbd=false) +{ + if (DE_locked) return; + if (DE_edit_mode) return; + if (kbd && !DE_kbd_focused_phrase) return; + if (DE_target_done.indexOf(sh)>-1) return; + if (DE_rm_mult.indexOf(sh)>-1) return; + DE_edit_mode = true; + //sh.pair.toFront(); + //sh.toBack(); + DE_cur_ed = sh.pair; + DE_cur_ed_shape = sh; + var input = DE_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 + DE_cur_ed_shape.animate({width:DE_cur_ed_shape.getBBox().width-DE_ui_font_width},50); + setTimeout(function(){DE_snap_to_grid(true);},125); + } else if (e.keyCode == 13) { // return + e.preventDefault(); + DE_cur_ed.inlineTextEditing.stopEditing(); + //DE_cur_ed_shape.toFront(); + //DE_cur_ed.toBack(); + DE_cur_ed_shape.animate({width:DE_cur_ed.getBBox().width+(DE_ui_margin-DE_ui_padding)},50); + setTimeout(function(){DE_snap_to_grid(true);},125); + DE_edit_mode = false; + } else { // input + DE_cur_ed_shape.animate({width:(this.value.length*DE_ui_font_width)+2*DE_ui_font_width+2*DE_ui_padding},25); + setTimeout(function(){ + DE_snap_to_grid(true); + DE_paper.setSize(DE_paper.width+DE_ui_font_width, DE_paper.height); + },25); } - DE_rm_mult = []; - } -}); + }); + input.addEventListener("blur", function(e) { + DE_cur_ed.inlineTextEditing.stopEditing(); + //DE_cur_ed_shape.toFront(); + //DE_cur_ed.toBack(); + DE_cur_ed_shape.animate({width:DE_cur_ed.getBBox().width+(DE_ui_margin-DE_ui_padding)},125); + //setTimeout(function(){DE_snap_to_grid(true);},125); + DE_edit_mode = false; + }, true); +} /****************************************************************************** * @@ -647,7 +923,7 @@ var DE_extract_data = function () d = {}; d["source"] = []; d["target"] = []; - d["align"] = []; + d["align"] = []; // target var ids = []; DE_target_shapes.sort(function(a, b) { @@ -713,6 +989,11 @@ var DE_reset = function() DE_cur_ed_shape = null; DE_connect_mode = false; DE_connect_mode_shape = null; + DE_kbd_focused_phrase = null; + DE_kbd_move_mode = false; + DE_kbd_select_mode = false; + DE_target_done = []; + DE_locked = false; document.getElementById("holder").parentElement.removeChild( document.getElementById("holder") @@ -743,8 +1024,12 @@ var DE_init = function () d += DE_data_target[i].length; } DE_ui_font_width = DE_paper.text(-100,-100,"a").getBBox().width; - var avg_box_len = (Math.max(c,d)/Math.max(DE_data_source.length,DE_data_target.length))*DE_ui_font_width; - var paper_width = DE_ui_xbegin+(Math.max(DE_data_source.length,DE_data_target.length)*(DE_ui_margin+DE_ui_padding+avg_box_len)), + var avg_box_len = (Math.max(c,d) + / Math.max(DE_data_source.length,DE_data_target.length))*DE_ui_font_width; + var paper_width = DE_ui_xbegin+(Math.max( + DE_data_source.length, + DE_data_target.length) + * (DE_ui_margin+DE_ui_padding+avg_box_len)), paper_height = DE_ui_ybegin+2*DE_ui_box_height+DE_ui_line_margin; DE_paper.setSize(paper_width, paper_height); @@ -754,5 +1039,242 @@ var DE_init = function () DE_make_objs(DE_data_target, "target"); // initial connections from alignment DE_make_conns_from_a(DE_data_align); + + // kbd interace + DE_kbd_start_interface(); +} + +/****************************************************************************** + * keyboard interface + * + */ +document.onkeypress = function (e) { + if (DE_locked) return; + if (DE_edit_mode) return; + + e = e || window.event; + var char_code = e.which || e.keyCode; + var char_str = String.fromCharCode(char_code); + + if (char_str == "X" + && !DE_edit_mode + && DE_kbd_focused_phrase + && DE_rm_mult.indexOf(DE_kbd_focused_phrase)==-1) { + if (DE_target_done.indexOf(DE_kbd_focused_phrase)>-1) { + DE_target_done.splice(DE_target_done.indexOf(DE_kbd_focused_phrase),1); + } else { + DE_target_done.push(DE_kbd_focused_phrase); + DE_kbd_move_mode = false; + DE_kbd_select_mode = true; + } + DE_ui_style_highlight(DE_kbd_focused_phrase); + } + + if (char_str == "A") { // add + if (DE_target_shapes.length > 0) { + var x = DE_kbd_focused_phrase.attr("x")+DE_kbd_focused_phrase.attr("width") + +2*DE_ui_padding; + var new_obj = DE_make_obj(x, "", "target"); + var new_grid = DE_kbd_focused_phrase["grid_"]+1; + new_obj["grid_"] = new_grid; + new_obj.pair["grid_"] = new_grid; + for (var i=0; i<DE_target_shapes.length; i++) { + var sh = DE_target_shapes[i]; + if (sh!=new_obj && sh["grid_"] >=new_grid) { + sh["grid_"] += 1; + sh.pair["grid_"] += 1; + } + } + } else { + var new_obj = DE_make_obj(0, "", "target"); + DE_kbd_focus_shape(new_obj); + } + DE_snap_to_grid(true); + } else if (char_str == "M") { // move mode + if (DE_kbd_move_mode) { + DE_kbd_move_mode = false; + DE_kbd_select_mode = true; + } else { + if (DE_target_done.indexOf(DE_kbd_focused_phrase)>-1) return; + DE_kbd_move_mode = true; + DE_kbd_select_mode = false; + } + } else if (char_str == "E") { // edit mode + DE_enter_edit_mode(DE_kbd_focused_phrase, true); + } else if (char_str=="S") { // select mode + if (DE_kbd_select_mode) { + DE_kbd_move_mode = false; + } else { + DE_kbd_select_mode = true; + DE_kbd_move_mode = false; + } + } else if (char_str == "D") { // remove + var x = false; + if (DE_rm_mult.indexOf(DE_kbd_focused_phrase) > -1) + x = true; + if (DE_rm_mult.length>0) { + for (var i=0; i<DE_rm_mult.length; i++) { + rm_obj(DE_rm_mult[i]); + } + DE_rm_mult = []; + if (x) { + DE_kbd_select_mode = true; + DE_kbd_move_mode = false; + if (DE_target_shapes.length > 0) + DE_kbd_focus_shape(DE_target_shapes[0]); + } + } else { + var d = DE_kbd_focused_phrase; + if (DE_target_done.indexOf(d) > -1) return; + DE_kbd_focused_phrase = DE_kbd_get_next_to("right", DE_kbd_focused_phrase); + if (!DE_kbd_focused_phrase) { + DE_kbd_focused_phrase = DE_kbd_get_next_to("left", d); + } + DE_kbd_focus_shape(DE_kbd_focused_phrase); + rm_obj(d); + } + } + + if (DE_kbd_select_mode && DE_kbd_focused_phrase) { // select <- -> + if (e.keyCode == 39) { // right + e.preventDefault(); + DE_kbd_select_phrase("right", DE_kbd_focused_phrase); + } else if (e.keyCode == 37) { // left + e.preventDefault(); + DE_kbd_select_phrase("left", DE_kbd_focused_phrase); + } + } + + if (DE_kbd_move_mode && DE_kbd_focused_phrase) { // move <- -> + if (e.keyCode == 39) { // right + e.preventDefault(); + DE_kbd_swap("right", DE_kbd_focused_phrase); + } else if (e.keyCode == 37) { // left + e.preventDefault(); + DE_kbd_swap("left", DE_kbd_focused_phrase); + } + } +}; + +var DE_kbd_get_next_to = function(dir, shape) +{ + if (!shape) return null; + + DE_target_shapes.sort(function(a, b) { + return a["grid_"]-b["grid_"]; + }); + + for (var i=0; i<DE_target_shapes.length; i++) + DE_target_shapes[i]["grid_"] = i; + + var grid_pos = []; + for (var i=0; i<DE_target_shapes.length; i++) + grid_pos.push(DE_target_shapes[i]["grid_"]); + var at = grid_pos.indexOf(shape["grid_"]); + if ((at==0 && dir=="left") || (at==DE_target_shapes.length-1 && dir=="right")) + return; + + var obj = null; + if (dir == "left") { + obj = DE_target_shapes[at-1]; + } else { // right + obj = DE_target_shapes[at+1]; + } + + return obj; +} + +var DE_kbd_select_phrase = function(dir="right", shape) +{ + var obj = DE_kbd_get_next_to(dir, shape); + + if (obj) + DE_kbd_focus_shape(obj, DE_kbd_focused_phrase); +} + +var DE_kbd_focus_shape = function(obj, obj2=null) +{ + if (!obj) return; + + // reset others + for (c in DE_connections) + DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width}); + for (sh in DE_shapes_by_id) + DE_ui_style_normal(DE_shapes_by_id[sh]); + + DE_kbd_focused_phrase = obj; + + // style + DE_ui_style_highlight(obj); + for (c in DE_connections) { + if (parseInt(c.split("-")[1]) == DE_kbd_focused_phrase["id_"]) { + DE_connections[c].line.attr({"stroke-width":DE_ui_stroke_width_hi}); + DE_ui_style_highlight(DE_shapes_by_id[parseInt(c.split("-")[0])], "source"); + } + } + if (obj2) + DE_ui_style_normal(obj2); +} + +var DE_kbd_swap = function(dir="right", shape) +{ + if (DE_edit_mode) return; + if (!shape) return; + if (DE_target_done.indexOf(shape)>-1) return; + + DE_target_shapes.sort(function(a, b) { + return a["grid_"]-b["grid_"]; + }); + var grid_pos = []; + for (var i=0; i<DE_target_shapes.length; i++) + grid_pos.push(DE_target_shapes[i]["grid_"]); + var at = grid_pos.indexOf(shape["grid_"]); + if ((at == 0 && dir=="left") || (at == DE_target_shapes.length-1 && dir=="right")) + return; + + var obj = null; + if (dir == "left") { + obj = DE_target_shapes[at-1]; + } else { // right + obj = DE_target_shapes[at+1]; + } + + // right -> left + if (dir == "left") { + att = { x: obj.attr("x")+shape.getBBox().width+(DE_ui_margin-2*DE_ui_padding) }; + obj.attr(att); + att = { x: obj.pair.attr("x")+shape.getBBox().width+(DE_ui_margin-2*DE_ui_padding) }; + obj.pair.attr(att); + + att = { x: shape.attr("x")-(obj.getBBox().width+(DE_ui_margin-2*DE_ui_padding)) }; + shape.attr(att); + att = { x: shape.pair.attr("x")-(obj.getBBox().width+(DE_ui_margin-2*DE_ui_padding)) }; + shape.pair.attr(att); + } else { // right + att = { x: obj.attr("x")-(shape.getBBox().width+(DE_ui_margin-2*DE_ui_padding)) }; + obj.attr(att); + att = { x: obj.pair.attr("x")-(shape.getBBox().width+(DE_ui_margin-2*DE_ui_padding)) }; + obj.pair.attr(att); + + att = { x: shape.attr("x")+(obj.getBBox().width+(DE_ui_margin-2*DE_ui_padding)) }; + shape.attr(att); + att = { x: shape.pair.attr("x")+(obj.getBBox().width+(DE_ui_margin-2*DE_ui_padding)) }; + shape.pair.attr(att); + } + + // grid pos + var tmp_pos = shape["grid_"]; + shape["grid_"] = obj["grid_"]; + obj["grid_"] = tmp_pos; + + for (key in DE_connections) { + DE_paper.connection(DE_connections[key]); + } +} + +var DE_kbd_start_interface = function () +{ + DE_kbd_focus_shape(DE_target_shapes[0]); + DE_kbd_select_mode = true; } diff --git a/raphael.inline_text_editing.js b/raphael.inline_text_editing.js index ccc37ed..ca17af0 100644 --- a/raphael.inline_text_editing.js +++ b/raphael.inline_text_editing.js @@ -99,7 +99,7 @@ // Prepare input styles var oStyles = { position: 'absolute', - background: 'red', + background: 'black', left: x-3+'px', top: y-3+'px', width: width+10+'px', |