From d5f867f0a89594638ac33e3dcce20ef389381e81 Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Mon, 30 Nov 2009 19:14:23 +0000 Subject: [PATCH] Fixed issue 68 by adding Convert to Path button, also included Reorient Path button git-svn-id: http://svg-edit.googlecode.com/svn/trunk@981 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/images/svg_edit_icons.svg | 35 ++++++++++++++++ editor/svg-editor.html | 2 + editor/svg-editor.js | 31 ++++++++++++-- editor/svgcanvas.js | 69 ++++++++++++++++++++++++++++---- 4 files changed, 126 insertions(+), 11 deletions(-) diff --git a/editor/images/svg_edit_icons.svg b/editor/images/svg_edit_icons.svg index 9e06b0d2..f49e173b 100644 --- a/editor/images/svg_edit_icons.svg +++ b/editor/images/svg_edit_icons.svg @@ -511,6 +511,41 @@ + + + + + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/editor/svg-editor.html b/editor/svg-editor.html index b59a19a6..cdb2c87f 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -106,6 +106,8 @@ script type="text/javascript" src="locale/locale.min.js">
+
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 377e92ac..36dcfa30 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -342,7 +342,7 @@ function svg_edit_setup() { if (svgCanvas.getMode() == 'rotate' && elem != null) { $('#angle').val(svgCanvas.getRotationAngle(elem)); return; - } else if(svgCanvas.addedNew && elem != null && elem.nodeName == 'image') { + } else if(svgCanvas.addedNew && elem != null && elname == 'image') { promptImgURL(); } var is_node = elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; @@ -350,17 +350,19 @@ function svg_edit_setup() { $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\ #ellipse_panel, #line_panel, #text_panel, #image_panel').hide(); if (elem != null) { - $('#angle').val(svgCanvas.getRotationAngle(elem)); + var elname = elem.nodeName; + var angle = svgCanvas.getRotationAngle(elem); + $('#angle').val(angle); if(!is_node) { $('#selected_panel').show(); // Elements in this array already have coord fields - if($.inArray(elem.nodeName, ['line', 'circle', 'ellipse']) != -1) { + if($.inArray(elname, ['line', 'circle', 'ellipse']) != -1) { $('#xy_panel').hide(); } else { var x,y; // Get BBox vals for g, polyline and path - if($.inArray(elem.nodeName, ['g', 'polyline', 'path']) != -1) { + if($.inArray(elname, ['g', 'polyline', 'path']) != -1) { var bb = svgCanvas.getStrokedBBox([elem]); x = bb.x; y = bb.y; @@ -372,6 +374,11 @@ function svg_edit_setup() { $('#selected_y').val(y || 0); $('#xy_panel').show(); } + + // Elements in this array cannot be converted to a path + var no_path = $.inArray(elname, ['image', 'text', 'path', 'g']) == -1; + $('#tool_topath').toggle(no_path); + $('#tool_reorient').toggle(elname == 'path'); } else { var point = svgCanvas.getNodePoint(); if(point) { @@ -873,6 +880,18 @@ function svg_edit_setup() { svgCanvas.moveToBottomSelectedElement(); } }; + + var convertToPath = function() { + if (selectedElement != null) { + svgCanvas.convertToPath(); + } + } + + var reorientPath = function() { + if (selectedElement != null) { + svgCanvas.reorientPath(); + } + } var moveSelected = function(dx,dy) { if (selectedElement != null || multiselected) { @@ -1358,10 +1377,12 @@ function svg_edit_setup() { $('#tool_docprops').click(showDocProperties); $('#tool_delete').click(deleteSelected); $('#tool_delete_multi').click(deleteSelected); + $('#tool_reorient').click(reorientPath); $('#tool_node_clone').click(clonePathNode); $('#tool_node_delete').click(deletePathNode); $('#tool_move_top').click(moveToTopSelected); $('#tool_move_bottom').click(moveToBottomSelected); + $('#tool_topath').click(convertToPath); $('#tool_undo').click(clickUndo); $('#tool_redo').click(clickRedo); $('#tool_clone').click(clickClone); @@ -2184,6 +2205,8 @@ function setSVGIcons() { '#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete', '#tool_move_top':'move_top', '#tool_move_bottom':'move_bottom', + '#tool_topath':'to_path', + '#tool_reorient':'reorient', '#tool_group':'group', '#tool_ungroup':'ungroup', diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 4ebf400d..f4a0f78f 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -2447,6 +2447,9 @@ function BatchCommand(text) { xform.setTranslate(dx,dy); if(tlist.numberOfItems) { tlist.replaceItem(xform, 0); + // TODO: Webkit returns null here, find out why +// console.log(selected.getAttribute("transform")) + } else { tlist.appendItem(xform); } @@ -2708,7 +2711,30 @@ function BatchCommand(text) { return shortFloat(val[0]) + ',' + shortFloat(val[1]); } } + + this.reorientPath = function() { + var elem = selectedElements[0]; + if(!elem) return; + var angle = canvas.getRotationAngle(elem); + if(angle == 0) return; + var batchCmd = new BatchCommand("Reorient path"); + var changes = { + d: elem.getAttribute('d'), + transform: elem.getAttribute('transform') + }; + batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); + canvas.clearSelection(); + resetPathOrientation(elem, angle); + addCommandToHistory(batchCmd); + current_path = elem; + resetPointGrips(); + setPointContainerTransform(""); // Maybe this should be in resetPointGrips? + removeAllPointGripsFromPath(); + canvas.addToSelection([elem], true); + call("changed", selectedElements); + } + // Rotate all points of a path and remove its transform value var resetPathOrientation = function(path, angle) { if(path == null || path.nodeName != 'path') return false; @@ -2744,10 +2770,20 @@ function BatchCommand(text) { } // Convert an element to a path - var convertToPath = function(elem, getBBox, angle) { - if(elem == null) return; + this.convertToPath = function(elem, getBBox, angle) { + if(elem == null) { + var elems = selectedElements; + $.each(selectedElements, function(i, elem) { + if(elem) canvas.convertToPath(elem); + }); + return; + } + + if(!getBBox) { + var batchCmd = new BatchCommand("Convert element to Path"); + } + var attrs = getBBox?{}:{ - "id": elem.id, "fill": cur_shape.fill, "fill-opacity": cur_shape.fill_opacity, "stroke": cur_shape.stroke, @@ -2763,9 +2799,19 @@ function BatchCommand(text) { "attr": attrs }); - path.setAttribute("transform",elem.getAttribute("transform")); + var eltrans = elem.getAttribute("transform"); + if(eltrans) { + path.setAttribute("transform",eltrans); + } + + var id = elem.id; + var parent = elem.parentNode; + if(elem.nextSibling) { + parent.insertBefore(path, elem); + } else { + parent.appendChild(path); + } - elem.parentNode.appendChild(path); var d = ''; var joinSegs = function(segs) { @@ -2859,8 +2905,17 @@ function BatchCommand(text) { if(!getBBox) { // Replace the current element with the converted one + batchCmd.addSubCommand(new RemoveElementCommand(elem, parent)); + batchCmd.addSubCommand(new InsertElementCommand(path)); + + canvas.clearSelection(); elem.parentNode.removeChild(elem) + path.setAttribute('id', id); path.removeAttribute("visibility"); + canvas.addToSelection([path], true); + + addCommandToHistory(batchCmd); + } else { // Get the correct BBox of the new path, then discard it resetPathOrientation(path, angle); @@ -5600,13 +5655,13 @@ function BatchCommand(text) { // Get the BBox from the raw path for these elements var elemNames = ['ellipse','path','line','polyline','polygon']; if($.inArray(elem.tagName, elemNames) != -1) { - bb = good_bb = convertToPath(elem, true, angle); + bb = good_bb = canvas.convertToPath(elem, true, angle); } else if(elem.tagName == 'rect') { // Look for radius var rx = elem.getAttribute('rx'); var ry = elem.getAttribute('ry'); if(rx || ry) { - bb = good_bb = convertToPath(elem, true, angle); + bb = good_bb = canvas.convertToPath(elem, true, angle); } }