diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 0bf398c4..34173d43 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -250,6 +250,10 @@ script type="text/javascript" src="locale/locale.min.js"> + Clone Delete diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 869c0168..4929117d 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -210,8 +210,9 @@ function svg_edit_setup() { $('#poly_node_panel').show(); var point = svgCanvas.getNodePoint(); if(point) { - $('#poly_node_x').val(point[0]); - $('#poly_node_y').val(point[1]); + $('#poly_node_x').val(point.x); + $('#poly_node_y').val(point.y); + $('#seg_type').val(point.type); } return; } @@ -353,6 +354,10 @@ function svg_edit_setup() { svgCanvas.setFontFamily(this.options[this.selectedIndex].value); }); + $('#seg_type').change(function() { + svgCanvas.setSegType($(this).val()); + }); + $('#text').keyup(function(){ svgCanvas.setTextContent(this.value); }); @@ -633,15 +638,15 @@ function svg_edit_setup() { } }; - var cloneNode = function() { + var clonePolyNode = function() { if (svgCanvas.getNodePoint()) { - svgCanvas.cloneNode(); + svgCanvas.clonePolyNode(); } }; - var deleteNode = function() { + var deletePolyNode = function() { if (svgCanvas.getNodePoint()) { - svgCanvas.deleteNode(); + svgCanvas.deletePolyNode(); } }; @@ -858,8 +863,8 @@ function svg_edit_setup() { $('#tool_docprops').click(showDocProperties); $('#tool_delete').click(deleteSelected); $('#tool_delete_multi').click(deleteSelected); - $('#tool_node_clone').click(cloneNode); - $('#tool_node_delete').click(deleteNode); + $('#tool_node_clone').click(clonePolyNode); + $('#tool_node_delete').click(deletePolyNode); $('#tool_move_top').click(moveToTopSelected); $('#tool_move_bottom').click(moveToBottomSelected); $('#tool_undo').click(clickUndo); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index ba35a319..d6fc0b0f 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -1007,8 +1007,6 @@ function BatchCommand(text) { // if there was a rotation transform, re-set it, otherwise empty out the transform attribute var angle = canvas.getRotationAngle(selected); - var pointGripContainer = document.getElementById("polypointgrip_container"); - var ctrlPointGripContainer = document.getElementById("ctrlpointgrip_container"); if (angle) { // this is our old center upon which we have rotated the shape var tr_x = round(box.x + box.width/2), @@ -1068,26 +1066,14 @@ function BatchCommand(text) { var changes = {}; changes["transform"] = ["rotate(", angle, " ", tr_x, ",", tr_y, ")"].join(''); batchCmd.addSubCommand(new ChangeElementCommand(selected, changes)); - if(pointGripContainer) { - pointGripContainer.setAttribute("transform", rotate); - } - if(ctrlPointGripContainer) { - ctrlPointGripContainer.setAttribute("transform", rotate); - } + setPointContainerTransform(rotate); } else { // This fixes Firefox 2- behavior - which does not reset values when the attribute has // been removed, see https://bugzilla.mozilla.org/show_bug.cgi?id=320622 selected.setAttribute("transform", ""); selected.removeAttribute("transform"); - if(pointGripContainer) { - pointGripContainer.setAttribute("transform", ""); - pointGripContainer.removeAttribute("transform"); - } - if(ctrlPointGripContainer) { - ctrlPointGripContainer.setAttribute("transform", ""); - ctrlPointGripContainer.removeAttribute("transform"); - } + setPointContainerTransform(""); } // if it's a group, transfer the transform attribute to each child element @@ -2046,6 +2032,16 @@ function BatchCommand(text) { svgroot.unsuspendRedraw(sr); }; + var setPointContainerTransform = function(value) { + var conts = $('#polypointgrip_container,#ctrlpointgrip_container'); + $.each(conts,function() { + this.setAttribute("transform", value); + if(!value) { + this.removeAttribute("transform"); + } + }); + } + var recalcPolyPoints = function() { current_poly_pts = []; var segList = current_poly.pathSegList; @@ -2093,7 +2089,7 @@ function BatchCommand(text) { $('#ctrlpointgrip_container *').attr('display','none'); }; - var addAllPointGripsToPoly = function() { + var addAllPointGripsToPoly = function(pointToSelect) { // loop through and show all pointgrips var len = current_poly_pts.length; for (var i = 0; i < len; i += 2) { @@ -2122,8 +2118,6 @@ function BatchCommand(text) { addControlPointGrip(cur_x + item.x2,cur_y + item.y2, next_x,next_y, index+'c2'); } } - var pointGripContainer = document.getElementById("polypointgrip_container"); - var ctrlPointGripContainer = document.getElementById("ctrlpointgrip_container"); // FIXME: we cannot just use the same transform as the poly because we might be // at a different zoom level var angle = canvas.getRotationAngle(current_poly); @@ -2132,8 +2126,10 @@ function BatchCommand(text) { var cx = (bbox.x + bbox.width/2) * current_zoom, cy = (bbox.y + bbox.height/2) * current_zoom; var xform = ["rotate(", angle, " ", cx, ",", cy, ")"].join(""); - pointGripContainer.setAttribute("transform", xform); - if(ctrlPointGripContainer) ctrlPointGripContainer.setAttribute("transform", xform); + setPointContainerTransform(xform); + } + if(pointToSelect != null) { + canvas.addNodeToSelection(pointToSelect); } }; @@ -2163,61 +2159,11 @@ function BatchCommand(text) { pointGrip = pointGripContainer.appendChild(pointGrip); var grip = $('#polypointgrip_'+index); - grip.mouseover( function() { this.setAttribute("stroke", "#F00"); } ); - grip.mouseout( function() {this.setAttribute("stroke", "#00F"); } ); +// grip.mouseover( function() { this.setAttribute("stroke", "#F00"); } ); +// grip.mouseout( function() {this.setAttribute("stroke", "#00F"); } ); grip.dblclick( function() { - - var old_d = current_poly.getAttribute('d'); - // Index could have changed by deleting nodes - index = grip[0].id.split('_')[1] - 0; - - var last_index = current_poly_pts.length/2 - 1; - var is_closed = current_poly.getAttribute('d').toLowerCase().indexOf('z') != -1; - - if(!is_closed && index == last_index) { - return; // Last point of unclosed poly should do nothing - } else if(index >= last_index && is_closed) { - index = 0; - } - - var batchCmd = new BatchCommand("Toggle Poly Segment Type"); - - // Toggle segment to curve/straight line - var type = current_poly.pathSegList.getItem(index+1).pathSegType; - - var next_index = index+1; - - var cur_x = getPolyPoint(index)[0]; - var cur_y = getPolyPoint(index)[1]; - var next_x = getPolyPoint(next_index)[0]; - var next_y = getPolyPoint(next_index)[1]; - - var next_rel_x = next_x - cur_x; - var next_rel_y = next_y - cur_y; - - if(type != 7) { // 6 = abs, 7 = rel - // Change to CubicRel curve - - var ct1_x = (next_y/-2 - cur_y/-2); - var ct1_y = (next_x/-2 - cur_x/-2); - var ct2_x = (next_y/-2 - cur_y/-2); - var ct2_y = (next_x/-2 - cur_x/-2); - - replacePathSeg(7, next_index, [next_rel_x,next_rel_y, ct1_x,ct1_y, ct2_x+next_rel_x,ct2_y+next_rel_y]); - - // Add the control points + lines - addControlPointGrip(ct1_x+cur_x,ct1_y+cur_y, cur_x,cur_y, index+'c1'); - addControlPointGrip(ct2_x+next_x,ct2_y+next_y, next_x,next_y, index+'c2'); - } else { - // Revert to relative line - replacePathSeg(5, next_index, [next_rel_x,next_rel_y]); - removeControlPointGrips(index); - } - - batchCmd.addSubCommand(new ChangeElementCommand(current_poly, {d: old_d})); - addCommandToHistory(batchCmd); - call("changed", [current_poly]); + canvas.setSegType(); }); } @@ -2229,6 +2175,28 @@ function BatchCommand(text) { }); }; + // Hack for Webktit to change the segment list from absolute values + // back to relative values. Probably inefficient, so not currently used +// var fixWebkitNodes = function() { +// var list = current_poly.pathSegList; +// var pts = current_poly_pts; +// var num = list.numberOfItems; +// for(var i = 0; i= last_index && is_closed) { + index = 0; + } + + var next_index = index+1; + var cur_x = getPolyPoint(index)[0]; + var cur_y = getPolyPoint(index)[1]; + var next_x = getPolyPoint(next_index)[0]; + var next_y = getPolyPoint(next_index)[1]; + + var next_rel_x = next_x - cur_x; + var next_rel_y = next_y - cur_y; + + if(!new_type) { // double-click, so just toggle + var batchCmd = new BatchCommand("Toggle Poly Segment Type"); + + // Toggle segment to curve/straight line + var old_type = current_poly.pathSegList.getItem(index+1).pathSegType; + + new_type = (old_type == 7) ? 5 : 7; + + } else { + new_type -= 0; + var batchCmd = new BatchCommand("Change Poly Segment Type"); + } + + var points; + + switch ( new_type ) { + case 7: + var ct1_x = (next_y/-2 - cur_y/-2); + var ct1_y = (next_x/-2 - cur_x/-2); + var ct2_x = (next_y/-2 - cur_y/-2); + var ct2_y = (next_x/-2 - cur_x/-2); + + points = [next_rel_x,next_rel_y, ct1_x,ct1_y, ct2_x+next_rel_x,ct2_y+next_rel_y]; + + // Add the control points + lines + addControlPointGrip(ct1_x+cur_x,ct1_y+cur_y, cur_x,cur_y, index+'c1'); + addControlPointGrip(ct2_x+next_x,ct2_y+next_y, next_x,next_y, index+'c2'); + break; + case 5: + points = [next_rel_x,next_rel_y]; + removeControlPointGrips(index); + break; + } + + replacePathSeg(new_type, next_index, points); + + batchCmd.addSubCommand(new ChangeElementCommand(current_poly, {d: old_d})); + addCommandToHistory(batchCmd); + call("changed", [current_poly]); + } + this.quickClone = function(elem) { // Hack for Firefox bugs where text element features aren't updated if(navigator.userAgent.indexOf('Gecko/') == -1) return elem;