diff --git a/editor/svg-editor.js b/editor/svg-editor.js index dd6cc24e..3ca3b908 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -140,6 +140,22 @@ function svg_edit_setup() { $('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}'); svgCanvas.setMode('select'); }; + + var togglePathEditMode = function(editmode) { + $('#path_node_panel').toggle(editmode); + $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode); + var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); + if(editmode) { + // Change select icon + $('.tool_button').removeClass('tool_button_current'); + $('#tool_select').addClass('tool_button_current') + .empty().append($.getSvgIcon('select_node')); + multiselected = false; + } else { + $('#tool_select').empty().append($.getSvgIcon('select')); + } + $.resizeSvgIcons({'#tool_select .svg_icon':size}); + } // used to make the flyouts stay on the screen longer the very first time var flyoutspeed = 1250; @@ -164,15 +180,8 @@ function svg_edit_setup() { // called when we've selected a different element var selectedChanged = function(window,elems) { - - if (selectedElement && selectedElement.id.indexOf('pathpointgrip') == 0) { - $('#path_node_panel').hide(); - $('#tools_bottom_2,#tools_bottom_3').show(); - var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); - $('#tool_select').empty().append($.getSvgIcon('select')); - $.resizeSvgIcons({'#tool_select .svg_icon':size}); - } - + var mode = svgCanvas.getMode(); + var is_node = (mode == "pathedit"); // if elems[1] is present, then we have more than one element selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null); multiselected = (elems.length >= 2 && elems[1] != null); @@ -181,37 +190,18 @@ function svg_edit_setup() { // upon creation of a text element the editor is switched into // select mode and this event fires - we need our UI to be in sync - if (svgCanvas.getMode() != "multiselect") { + if (mode != "multiselect" && !is_node) { setSelectMode(); updateToolbar(); } - } // if (elem != null) - + + // Deal with pathedit mode + togglePathEditMode(is_node); updateContextPanel(); }; - - // called when we've selected a different path node - var selectedPathNodeChanged = function(window, elems) { - $('#path_node_panel').show(); - $('#tools_bottom_2,#tools_bottom_3').hide(); - var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); - - // Change select icon - $('.tool_button').removeClass('tool_button_current'); - $('#tool_select').addClass('tool_button_current') - .empty().append($.getSvgIcon('select_node')); - - $.resizeSvgIcons({'#tool_select .svg_icon':size}); - - updateContextPanel(); - if(elems.length) { - selectedElement = elems[0]; -// multiselected = (elems.length >= 2); - } - }; // called when any element has changed var elementChanged = function(window,elems) { @@ -220,7 +210,12 @@ function svg_edit_setup() { // if the element changed was the svg, then it could be a resolution change if (elem && elem.tagName == "svg") { + +// var vb = elem.getAttribute("viewBox").split(' '); +// changeResolution(parseInt(vb[2]), +// parseInt(vb[3])); populateLayers(); + updateCanvas(); } // Update selectedElement if element is no longer part of the image. // This occurs for the text elements in Firefox @@ -371,7 +366,7 @@ function svg_edit_setup() { $('#tool_reorient').toggleClass('tool_button_disabled', ang == 0); return; } - var is_node = elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; + var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\ #ellipse_panel, #line_panel, #text_panel, #image_panel').hide(); @@ -516,7 +511,6 @@ function svg_edit_setup() { // bind the selected event to our function that handles updates to the UI svgCanvas.bind("selected", selectedChanged); - svgCanvas.bind("nodeselected", selectedPathNodeChanged); svgCanvas.bind("changed", elementChanged); svgCanvas.bind("saved", saveHandler); svgCanvas.bind("zoomed", zoomChanged); @@ -2514,7 +2508,7 @@ function svg_edit_setup() { if(loc.indexOf('?source=') != -1) { var pre = '?source=data:image/svg+xml;base64,'; var src = loc.substring(loc.indexOf(pre) + pre.length); - svgCanvas.setSvgString(Utils.decode64(src)); + svgCanvas.setSvgString(Utils.decode64(src)); } } }); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 524f121e..9b4f65aa 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -2624,6 +2624,8 @@ function BatchCommand(text) { case "path": // Fall through case "pathedit": + start_x *= current_zoom; + start_y *= current_zoom; pathActions.mouseDown(evt, mouse_target, start_x, start_y); started = true; break; @@ -2906,6 +2908,8 @@ function BatchCommand(text) { case "path": // fall through case "pathedit": + x *= current_zoom; + y *= current_zoom; if(rubberBox && rubberBox.getAttribute('display') != 'none') { assignAttributes(rubberBox, { 'x': Math.min(start_x,x), @@ -3340,7 +3344,7 @@ function BatchCommand(text) { updateSegLine(); updateSegLine(true); - call("nodeselected", grips); + call("selected", grips); }; var removeNodeFromSelection = function(point) { @@ -3361,7 +3365,7 @@ function BatchCommand(text) { updateSegLine(); updateSegLine(true); -// call("nodeselected", grips); +// call("selected", grips); }; var removeAllNodesFromSelection = function() { @@ -3371,7 +3375,7 @@ function BatchCommand(text) { $('#pathpointgrip_container circle').attr('stroke','#EEE'); $('#ctrlpointgrip_container circle').attr('fill', '#EEE'); selected_pts = []; -// call("nodeselected", []); +// call("selected", []); }; var selectNode = function(point) { @@ -4005,14 +4009,15 @@ function BatchCommand(text) { // if we are dragging a point, let's move it if (current_path_pt_drag != -1 && current_path) { var old_path_pts = $.map(current_path_pts, function(n){return n/current_zoom;}); - var diff_x = mouse_x - old_path_pts[current_path_pt*2]; - var diff_y = mouse_y - old_path_pts[current_path_pt*2+1]; -// console.log(diff_x, diff_y); + var diff_x = mouse_x - current_path_pts[current_path_pt*2]; + var diff_y = mouse_y - current_path_pts[current_path_pt*2+1]; + for(var i=0; i