From 451a5f518b2c757df64010194bd8e799d6387b72 Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Tue, 29 Sep 2009 15:58:46 +0000 Subject: [PATCH] Added many more fixes to curve editing/node moving git-svn-id: http://svg-edit.googlecode.com/svn/trunk@729 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/svgcanvas.js | 206 +++++++++++++++++++++++++++++++------------- 1 file changed, 146 insertions(+), 60 deletions(-) diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 1a97f7df..01aadc3f 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -1942,6 +1942,8 @@ function BatchCommand(text) { if (current_poly_pt_drag != -1 && current_poly) { var i = current_poly_pt_drag * 2; + var old_poly_pts = $.map(current_poly_pts, function(n){return n;}); + // if the image is rotated, then we must modify the x,y mouse coordinates // and rotate them into the shape's rotated coordinate system var angle = canvas.getRotationAngle(current_poly) * Math.PI / 180.0; @@ -1960,26 +1962,70 @@ function BatchCommand(text) { current_poly_pts[i] = x * current_zoom; current_poly_pts[i+1] = y * current_zoom; } - + // reset the path's d attribute using current_poly_pts - var oldd = current_poly.getAttribute("d"); - var closedPath = (oldd[oldd.length-1] == 'z' || oldd[oldd.length-1] == 'Z'); - var len = current_poly_pts.length/2; - var arr = new Array(len+1); - var curx = current_poly_pts[0]/current_zoom, - cury = current_poly_pts[1]/current_zoom; - arr[0] = ["M", curx, ",", cury].join(''); - for (var j = 1; j < len; ++j) { - var px = current_poly_pts[j*2]/current_zoom, py = current_poly_pts[j*2+1]/current_zoom; - arr[j] = ["l", round(px-curx), ",", round(py-cury)].join(''); - curx = px; - cury = py; + var index = current_poly_pt_drag; + var node_x = (getPolyPoint(index)[0] - getPolyPoint(index-1)[0]) / current_zoom; + var node_y = (getPolyPoint(index)[1] - getPolyPoint(index-1)[1]) / current_zoom; + var next_x = getPolyPoint(index+1)[0] / current_zoom; + var next_y = getPolyPoint(index+1)[1] / current_zoom; + + var item = current_poly.pathSegList.getItem(index); + var next_index = index+1 >= (current_poly_pts/2).length ? 0 : index+1; + var next_item = current_poly.pathSegList.getItem(next_index); + var x_diff = x - old_poly_pts[index*2]; + var y_diff = y - old_poly_pts[index*2 + 1]; + var newSeg = null; + +// console.log('index',index); +// console.log('item.pathSegType',item.pathSegType); +// console.log('nextitem.pathSegType',next_item.pathSegType); + + if(item.pathSegType == 7) { + newSeg = current_poly.createSVGPathSegCurvetoCubicRel(node_x,node_y, item.x1,item.y1, item.x2 + x_diff,item.y2 + y_diff); + } else { + if(index == 0) { + newSeg = current_poly.createSVGPathSegMovetoAbs(current_poly_pts[0]/current_zoom, current_poly_pts[1]/current_zoom); + } else { + newSeg = current_poly.createSVGPathSegLinetoRel(node_x, node_y); + } } - if (closedPath) { - arr[len] = "z"; + current_poly.pathSegList.replaceItem(newSeg, index); + + switch (next_item.pathSegType) { + case 1: + newSeg = current_poly.createSVGPathSegClosePath(); + break; + case 5: + newSeg = current_poly.createSVGPathSegLinetoRel(next_item.x - x_diff, next_item.y - y_diff); + break; + case 7: + newSeg = current_poly.createSVGPathSegCurvetoCubicRel(next_item.x - x_diff,next_item.y - y_diff, next_item.x1,next_item.y1, next_item.x2 - x_diff,next_item.y2 - y_diff); + break; + default: + break; } - // we don't want to undo this, we are in the middle of a drag - current_poly.setAttribute("d", arr.join(' ')); + current_poly.pathSegList.replaceItem(newSeg, next_index); + + // Original method: Re-calculate the "d" attribute +// var oldd = current_poly.getAttribute("d"); +// var closedPath = (oldd[oldd.length-1] == 'z' || oldd[oldd.length-1] == 'Z'); +// var len = current_poly_pts.length/2; +// var arr = new Array(len+1); +// var curx = current_poly_pts[0]/current_zoom, +// cury = current_poly_pts[1]/current_zoom; +// arr[0] = ["M", curx, ",", cury].join(''); +// for (var j = 1; j < len; ++j) { +// var px = current_poly_pts[j*2]/current_zoom, py = current_poly_pts[j*2+1]/current_zoom; +// arr[j] = ["l", round(px-curx), ",", round(py-cury)].join(''); +// curx = px; +// cury = py; +// } +// if (closedPath) { +// arr[len] = "z"; +// } +// // we don't want to undo this, we are in the middle of a drag +// current_poly.setAttribute("d", arr.join(' ')); // move the point grip var grip = document.getElementById("polypointgrip_" + current_poly_pt_drag); @@ -1987,6 +2033,27 @@ function BatchCommand(text) { grip.setAttribute("cx", mouse_x); grip.setAttribute("cy", mouse_y); } + + if(item.pathSegType != 5) { + var id2 = (current_poly_pt_drag-1)+'c2'; + var line = document.getElementById("ctrlLine_"+id2); + if(line) { + var x2 = line.getAttribute('x2') - 0 + x_diff; + var y2 = line.getAttribute('y2') - 0 + y_diff; + addControlPointGrip(x2,y2, mouse_x,mouse_y, id2); + } + } + + if(next_item.pathSegType != 5) { + var id1 = (current_poly_pt_drag)+'c1'; + var line = document.getElementById("ctrlLine_"+id1); + if(line) { + var x2 = line.getAttribute('x2') - 0 + x_diff; + var y2 = line.getAttribute('y2') - 0 + y_diff; + addControlPointGrip(x2,y2, mouse_x,mouse_y, id1); + } + } + } else if (current_ctrl_pt_drag != -1 && current_poly) { // Moving the control point. Since only one segment is altered, // we only need to do a pathSegList replace. @@ -1994,9 +2061,10 @@ function BatchCommand(text) { var index = data[0]-0; var ctrl_num = data[1]-0; var c_item = current_poly.pathSegList.getItem(index+1); - c_item['x' + ctrl_num] = x; - c_item['y' + ctrl_num] = y; - var newCurve = current_poly.createSVGPathSegCurvetoCubicAbs(c_item.x,c_item.y, c_item.x1,c_item.y1, c_item.x2,c_item.y2); + + c_item['x' + ctrl_num] = x - getPolyPoint(index)[0]; + c_item['y' + ctrl_num] = y - getPolyPoint(index)[1]; + var newCurve = current_poly.createSVGPathSegCurvetoCubicRel(c_item.x,c_item.y, c_item.x1,c_item.y1, c_item.x2,c_item.y2); current_poly.pathSegList.replaceItem(newCurve, index+1); var grip = document.getElementById("ctrlpointgrip_" + current_ctrl_pt_drag); @@ -2055,24 +2123,16 @@ function BatchCommand(text) { var index = i/2; var item = current_poly.pathSegList.getItem(index); - if(item.pathSegType == 6) { + if(item.pathSegType == 7) { index -= 1; // Same code as when making a curve, needs to be in own function - var pt_index = index*2; - var cur_x = current_poly_pts[pt_index]; - var cur_y = current_poly_pts[pt_index+1]; - if(pt_index + 2 >= current_poly_pts.length) { - var next_x = current_poly_pts[0]; - var next_y = current_poly_pts[1]; - } else { - var next_x = current_poly_pts[pt_index+2]; - var next_y = current_poly_pts[pt_index+3]; - } - addControlPointGrip(item.x1,item.y1, cur_x,cur_y, index+'c1'); - addControlPointGrip(item.x2,item.y2, next_x,next_y, index+'c2'); - } else if(item.pathSegType == 7) { - // TODO: Make relative curve handles appear here - } + var cur_x = getPolyPoint(index)[0]; + var cur_y = getPolyPoint(index)[1]; + var next_x = getPolyPoint(index+1)[0]; + var next_y = getPolyPoint(index+1)[1]; + addControlPointGrip(cur_x + item.x1,cur_y + item.y1, cur_x,cur_y, index+'c1'); + addControlPointGrip(cur_x + item.x2,cur_y + item.y2, next_x,next_y, index+'c2'); + } } var pointGripContainer = document.getElementById("polypointgrip_container"); // FIXME: we cannot just use the same transform as the poly because we might be @@ -2118,38 +2178,53 @@ function BatchCommand(text) { grip.dblclick( function() { // Toggle segment to curve/straight line var type = current_poly.pathSegList.getItem(index+1).pathSegType; - var pt_index = index*2; - var cur_x = current_poly_pts[pt_index]; - var cur_y = current_poly_pts[pt_index+1]; - if(pt_index + 2 >= current_poly_pts.length) { - var next_x = current_poly_pts[0]; - var next_y = current_poly_pts[1]; - } else { - var next_x = current_poly_pts[pt_index+2]; - var next_y = current_poly_pts[pt_index+3]; - } + 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]; + +// for(var i=0; i= pt_num) { + index -= pt_num; + } + return [current_poly_pts[index*2], current_poly_pts[index*2 + 1]]; + } + var addControlPointGrip = function(x, y, source_x, source_y, id) { // create the container of all the control point grips var ctrlPointGripContainer = document.getElementById("ctrlpointgrip_container");