zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Issue 134: Correctly center the selector box after a rotated poly has been edited 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@499 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-08-29 18:38:34 +00:00
parent ec75f35c7a
commit 3118679dfe
2 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
editor/svg-editor.js
View File

@ -667,7 +667,6 @@ function svg_edit_setup() {
var button = document.getElementById(shortcutButtons[i]); var button = document.getElementById(shortcutButtons[i]);
var title = button.title; var title = button.title;
var index = title.indexOf("Ctrl+"); var index = title.indexOf("Ctrl+");
console.log(index);
button.title = [title.substr(0,index), "Cmd+", title.substr(index+5)].join(''); button.title = [title.substr(0,index), "Cmd+", title.substr(index+5)].join('');
} }
} }

73
editor/svgcanvas.js
View File

@ -22,16 +22,16 @@ if(!window.console) {
// TODO: add <a> elements to this // TODO: add <a> elements to this
// TODO: add xmlns:xlink attr to <svg> element // TODO: add xmlns:xlink attr to <svg> element
var svgWhiteList = { var svgWhiteList = {
"circle": ["cx", "cy", "fill", "fill-opacity", "opacity", "id", "r", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"], "circle": ["cx", "cy", "fill", "fill-opacity", "id", "opacity", "r", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"],
"defs": [], "defs": [],
"ellipse": ["cx", "cy", "fill", "fill-opacity", "opacity", "id", "rx", "ry", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"], "ellipse": ["cx", "cy", "fill", "fill-opacity", "id", "opacity", "rx", "ry", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"],
"line": ["fill", "fill-opacity", "opacity", "id", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-opacity", "stroke-width", "transform", "x1", "x2", "y1", "y2"], "line": ["fill", "fill-opacity", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-opacity", "stroke-width", "transform", "x1", "x2", "y1", "y2"],
"linearGradient": ["id", "gradientTransform", "gradientUnits", "spreadMethod", "x1", "x2", "y1", "y2"], "linearGradient": ["id", "gradientTransform", "gradientUnits", "spreadMethod", "x1", "x2", "y1", "y2"],
"path": ["d", "fill", "fill-opacity", "opacity", "id", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform"], "path": ["d", "fill", "fill-opacity", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform"],
"polygon": ["id", "fill", "fill-opacity", "opacity", "points", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform"], "polygon": ["id", "fill", "fill-opacity", "id", "opacity", "points", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform"],
"polyline": ["id", "points", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform"], "polyline": ["id", "opacity", "points", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform"],
"radialGradient": ["id", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "r", "spreadMethod"], "radialGradient": ["id", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "r", "spreadMethod"],
"rect": ["fill", "fill-opacity", "opacity", "height", "id", "rx", "ry", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform", "width", "x", "y"], "rect": ["fill", "fill-opacity", "height", "id", "opacity", "rx", "ry", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform", "width", "x", "y"],
"stop": ["id", "offset", "stop-color", "stop-opacity"], "stop": ["id", "offset", "stop-color", "stop-opacity"],
"svg": ["id", "height", "transform", "width", "xmlns"], "svg": ["id", "height", "transform", "width", "xmlns"],
"text": ["fill", "fill-opacity", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform", "text-anchor", "x", "y"], "text": ["fill", "fill-opacity", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform", "text-anchor", "x", "y"],
@ -356,8 +356,8 @@ function SvgCanvas(c)
var transform = elem.getAttribute("transform"); var transform = elem.getAttribute("transform");
var angle = canvas.getRotationAngle(elem); var angle = canvas.getRotationAngle(elem);
if (angle) { if (angle) {
var cx = oldbox.x + oldbox.width/2, //l + w/2, var cx = oldbox.x + oldbox.width/2
cy = oldbox.y + oldbox.height/2; //t + h/2; cy = oldbox.y + oldbox.height/2;
this.selectorGroup.setAttribute("transform", "rotate("+angle+" " + cx + "," + cy + ")"); this.selectorGroup.setAttribute("transform", "rotate("+angle+" " + cx + "," + cy + ")");
} }
svgroot.unsuspendRedraw(sr_handle); svgroot.unsuspendRedraw(sr_handle);
@ -394,7 +394,6 @@ function SvgCanvas(c)
this.requestSelector = function(elem) { this.requestSelector = function(elem) {
if (elem == null) return null; if (elem == null) return null;
var N = this.selectors.length; var N = this.selectors.length;
// if we've already acquired one for this element, return it // if we've already acquired one for this element, return it
if (typeof(this.selectorMap[elem.id]) == "object") { if (typeof(this.selectorMap[elem.id]) == "object") {
this.selectorMap[elem.id].locked = true; this.selectorMap[elem.id].locked = true;
@ -1682,6 +1681,7 @@ function SvgCanvas(c)
if (closedPath) { if (closedPath) {
arr[len] = "z"; arr[len] = "z";
} }
// we don't want to undo this, we are in the middle of a drag
current_poly.setAttribute("d", arr.join(' ')); current_poly.setAttribute("d", arr.join(' '));
// move the point grip // move the point grip
@ -2069,22 +2069,29 @@ function SvgCanvas(c)
newcx = box.x + box.width/2, newcx = box.x + box.width/2,
newcy = box.y + box.height/2; newcy = box.y + box.height/2;
// un-rotate the new center to the proper position
var dx = newcx - oldcx,
dy = newcy - oldcy;
var r = Math.sqrt(dx*dx + dy*dy);
var theta = Math.atan2(dy,dx) + angle;
newcx = r * Math.cos(theta) + oldcx;
newcy = r * Math.sin(theta) + oldcy;
var i = current_poly_pts.length; var i = current_poly_pts.length;
console.log(current_poly_pts);
while (i) { while (i) {
i -= 2; i -= 2;
var dx = current_poly_pts[i] - oldcx, dx = current_poly_pts[i] - oldcx;
dy = current_poly_pts[i+1] - oldcy; dy = current_poly_pts[i+1] - oldcy;
// rotate the point around the old center // rotate the point around the old center
var r = Math.sqrt(dx*dx + dy*dy); r = Math.sqrt(dx*dx + dy*dy);
var theta = Math.atan2(dy,dx) + angle; theta = Math.atan2(dy,dx) + angle;
dx = r * Math.cos(theta) + oldcx; current_poly_pts[i] = dx = r * Math.cos(theta) + oldcx;
dy = r * Math.sin(theta) + oldcy; current_poly_pts[i+1] = dy = r * Math.sin(theta) + oldcy;
// dx,dy should now hold the actual coordinates of each // dx,dy should now hold the actual coordinates of each
// point after being rotated // point after being rotated
// now we want to rotate them around the new center in the reverse direction // now we want to rotate them around the new center in the reverse direction
dx -= newcx; dx -= newcx;
dy -= newcy; dy -= newcy;
@ -2094,8 +2101,7 @@ function SvgCanvas(c)
current_poly_pts[i] = parseInt(r * Math.cos(theta) + newcx); current_poly_pts[i] = parseInt(r * Math.cos(theta) + newcx);
current_poly_pts[i+1] = parseInt(r * Math.sin(theta) + newcy); current_poly_pts[i+1] = parseInt(r * Math.sin(theta) + newcy);
} } // loop for each point
console.log(current_poly_pts);
// now set the d attribute to the new value of current_poly_pts // now set the d attribute to the new value of current_poly_pts
var oldd = current_poly.getAttribute("d"); var oldd = current_poly.getAttribute("d");
@ -2105,25 +2111,35 @@ function SvgCanvas(c)
var curx = current_poly_pts[0], var curx = current_poly_pts[0],
cury = current_poly_pts[1]; cury = current_poly_pts[1];
arr[0] = ["M", curx, ",", cury].join(''); arr[0] = ["M", curx, ",", cury].join('');
assignAttributes(document.getElementById("polypointgrip_0"),
{"cx":curx,"cy":cury}, 100);
for (var j = 1; j < len; ++j) { for (var j = 1; j < len; ++j) {
var px = current_poly_pts[j*2], py = current_poly_pts[j*2+1]; var px = current_poly_pts[j*2], py = current_poly_pts[j*2+1];
arr[j] = ["l", parseInt(px-curx), ",", parseInt(py-cury)].join(''); arr[j] = ["l", parseInt(px-curx), ",", parseInt(py-cury)].join('');
curx = px; curx = px;
cury = py; cury = py;
assignAttributes(document.getElementById("polypointgrip_"+j),
{"cx":px,"cy":py}, 100);
} }
if (closedPath) { if (closedPath) {
arr[len] = "z"; arr[len] = "z";
} }
current_poly.setAttribute("d", arr.join(' ')); current_poly.setAttribute("d", arr.join(' '));
box = canvas.getBBox(current_poly);
selectedBBoxes[0].x = box.x; selectedBBoxes[0].y = box.y;
selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height;
// now we must set the new transform to be rotated around the new center // now we must set the new transform to be rotated around the new center
angle *= 180.0 / Math.PI; var rotate = "rotate(" + (angle * 180.0 / Math.PI) + " " + newcx + "," + newcy + ")";
current_poly.setAttribute("transform", "rotate(" + angle + " " + newcx + "," + newcy + ")"); current_poly.setAttribute("transform", rotate);
selectedBBox[0].x = box.x; selectedBBox[0].y = box.y; var pointGripContainer = document.getElementById("polypointgrip_container");
selectedBBox[0].width = box.width; selectedBBox[0].height = box.height; if(pointGripContainer) {
} pointGripContainer.setAttribute("transform", rotate);
} }
} // if rotated
} // if (current_poly_pt_drag != -1)
// else, move back to select mode // else, move back to select mode
else { else {
current_mode = "select"; current_mode = "select";
@ -2863,8 +2879,9 @@ function SvgCanvas(c)
var copiedElements = []; var copiedElements = [];
var len = selectedElements.length; var len = selectedElements.length;
for (var i = 0; i < len; ++i) { for (var i = 0; i < len; ++i) {
if (selectedElements[i] == null) break; var elem = selectedElements[i];
copiedElements.push(selectedElements[i].cloneNode(true)); if (elem == null) break;
copiedElements.push(elem.cloneNode(true));
} }
this.clearSelection(); this.clearSelection();
var len = copiedElements.length; var len = copiedElements.length;