diff options
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | src/rz_core.js | 181 |
2 files changed, 88 insertions, 101 deletions
@@ -66,14 +66,6 @@ </div> </div> - <div class='editinfo'> - <input id="editname"> - </div> - - <div class='editlinkinfo'> - <input id="editlinkname"/> - </div> - <div class="typeselection"> <table> <tr><td><img id="keys" width="56" height="26" src="res/img/keys.png"/></td></tr> diff --git a/src/rz_core.js b/src/rz_core.js index 592fbb91..2bf71e78 100644 --- a/src/rz_core.js +++ b/src/rz_core.js @@ -3,26 +3,34 @@ define(['jquery', 'd3', 'consts', 'rz_bus', 'util', 'model/graph', 'model/core', 'view/helpers', 'view/view', 'rz_observer', 'view/selection'], function($, d3, consts, rz_bus, util, model_graph, model_core, view_helpers, view, rz_observer, selection) { -var addednodes = []; +var addednodes = [], + vis, + graphstate = "GRAPH", + graphinterval = 0, + timeline_timer = 0, + deliverables = [], + circle, // <-- should not be module globals. + scrollValue = 0, + graph, + drag, + force; -var vis; +// SVG Util +function appendForeignElementInputWithID(base, elemid, width, height) +{ + var input = document.createElement('input'), + body = document.createElement('body'), + fo = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); -var graphstate = "GRAPH"; -var graphinterval = 0; - -var timeline_timer = 0; - -var deliverables = []; - -var circle; // <-- should not be module globals. - -var scrollValue = 0; - -var graph; - -var drag; - -var force; + body.appendChild(input); + + fo.setAttribute('width', width || '100px'); + fo.setAttribute('height', height || '100px'); + fo.appendChild(body); + base.appendChild(fo); + input.setAttribute('id', elemid); + return input; +} function recenterZoom() { vis.attr("transform", "translate(0,0)scale(1)"); @@ -256,7 +264,7 @@ function update_view__graph(no_relayout) { .attr("text-anchor", "middle") .on("click", function(d, i) { if (d.state !== "temp") { - editLink(this, d); + editLinkText(this, d); } }); @@ -575,103 +583,90 @@ function showNodeInfo(d, i) { } function overlay_mousedown() { - $('.editinfo').hide(); - $('.editlinkinfo').hide(); + createOrGetSvgInputFO().hide(); selection.clear(); view.hide(); update_view__graph(true); } -$('#editname').keypress(function(e) { +function editname_on_keypress(e) { var ret = undefined, - editinfo = $('.editinfo'); + element = createOrGetSvgInput(), + newname = element.val(), + fo = createOrGetSvgInputFO(), + d; - if (e.which == 13) { - editinfo.hide(); - var element = $('#editname'); - var newname = element.val(); - var d = element.data().d; - graph.editName(d.id, newname); - update_view__graph(true); - ret = false; + if (element != this) { + console.log('unexpected editname_on_keypress this should be the svg-input element'); } - if (e.which == 27) { - editinfo.hide(); + + if (e.which == 13 || e.which == 27) { + fo.hide(); ret = false; + d = element.data().d; + if (e.which == 13 && newname != d.name) { + if (d.hasOwnProperty('__src')) { + graph.editLink(d.__src.id, d.__dst.id, newname); + } else { + graph.editName(d.id, newname); + } + update_view__graph(true); + } } rz_bus.ui_key.push({where: consts.KEYSTROKE_WHERE_EDIT_NODE, keys: [e.which]}); return ret; -}); +}; + +function createOrGetSvgInput() +{ + var svg_input_name = 'svg-input', + svg_input_selector = '#' + svg_input_name, + svg_input = $(svg_input_selector); + if (svg_input.length == 0) { + console.log('creating new svg-input'); + svg_input = $(appendForeignElementInputWithID(vis[0][0], svg_input_name)); + svg_input.on('keypress', editname_on_keypress); + } + return svg_input; +} + +function createOrGetSvgInputFO() +{ + return createOrGetSvgInput().parent().parent(); +} /** * @param e visual node element * @param n node model object */ -function editNodeText(e, n) { +function editBothText(e, n) { var oldname = n.name, - en_element = $('#editname'), - offset = $(e).offset(), - editinfo = $('.editinfo'); + svg_input = createOrGetSvgInput(), + fo = createOrGetSvgInputFO(), + is_link = n.hasOwnProperty('__src'); - editinfo.css({top: offset.top, left: offset.left}); - editinfo.show(); - en_element.val(oldname); - en_element.data().d = n; - en_element.focus(); + e.parentNode.appendChild(fo[0]); // This will unparent from the old parent + if (is_link) { + fo.attr('transform', e.getAttribute('transform')); + fo.attr('dx', null); + fo.attr('dy', null); + svg_input.attr('class', 'linklabel graph'); + } else { + fo.attr('dx', e.getAttribute('dx')); + fo.attr('dy', e.getAttribute('dy')); + fo.attr('transform', null); + svg_input.attr('class', 'nodetext graph'); + } + fo.show(); + svg_input.val(oldname); + svg_input.data().d = n; + svg_input.focus(); // TODO: set cursor to correct location in text - // TODO: reparent editinfo instead of offset - will fix paning. Can I put it under an svg? } -var linkedit = (function() { - var editlinkinfo = $('.editlinkinfo'), - editlinkname = $('#editlinkname'), - link = null, - d = null; - - editlinkname.on('submit', function() { - return false; - }); - - editlinkname.on('blur', function() { - editlinkinfo.hide(); - }); - - editlinkname.on('keydown', function(e) { - if (!link || !d) { - return false; - } - switch (e.which) { - case 27: - editlinkinfo.hide(); - return false; - case 13: - graph.editLink(d.__src.id, d.__dst.id, editlinkname.val()); - update_view__graph(true); - editlinkinfo.hide(); - return false; - } - }); - - function editLink(_link, _d) { - var offset = $(_link).offset(), - oldname = _d.name; - - d = _d; - link = _link; - - editlinkinfo.show(); - // TODO: put under svg, or account for svg.g transform otherwise - editlinkinfo.css({top: offset.top, left: offset.left}); - editlinkname.val(oldname); - - update_view__graph(true); - } - - return {editLink: editLink}; -})(); - -var editLink = linkedit.editLink; +var editLinkText = editBothText; +var editNodeText = editBothText; return { graph: graph, |