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">
+
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;