From 3398b37947e7a268562eab64d3192c6301934b0c Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Thu, 27 Jan 2011 14:23:33 +0000 Subject: [PATCH] Fixed Issue 336: 'Live Updates to Dimensions' and Issue 766: 'Rotating an object produce many elementChanged events' by creating/using 'transition' event git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1940 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/svg-editor.js | 70 +++++++++++++++++++++++++++++++++++++++----- editor/svgcanvas.js | 8 ++++- 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 926d3bdb..26e80a5d 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -702,6 +702,35 @@ }); }; + // Call when part of element is in process of changing, generally + // on mousemove actions like rotate, move, etc. + var elementTransition = function(window,elems) { + var mode = svgCanvas.getMode(); + var elem = elems[0]; + + if(!elem) return; + + multiselected = (elems.length >= 2 && elems[1] != null); + + // Only updating fields for single elements for now + if(!multiselected) { + switch ( mode ) { + case "rotate": + var ang = svgCanvas.getRotationAngle(elem); + $('#angle').val(ang); + $('#tool_reorient').toggleClass('disabled', ang == 0); + break; + + case "select": + updateCoords(elem); + break; + } + } + svgCanvas.runExtensions("elementTransition", { + elems: elems + }); + }; + // called when any element has changed var elementChanged = function(window,elems) { var mode = svgCanvas.getMode(); @@ -1346,6 +1375,39 @@ return new $.jGraduate.Paint(opts); }; + // Updates coordinate data of given elements. Could use optimization! + var updateCoords = function(elem) { + var elname = elem.tagName; + var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null; + var x, y; + + // Get BBox vals for g, polyline and path + if(['g', 'polyline', 'path'].indexOf(elname) >= 0) { + var bb = svgCanvas.getStrokedBBox([elem]); + if(bb) { + x = bb.x; + y = bb.y; + } + } else { + x = elem.getAttribute('x'); + y = elem.getAttribute('y'); + } + + // Transform point + var newPt = svgedit.math.transformPoint(x, y, svgCanvas.transformListToTransform(svgCanvas.getTransformList(elem)).matrix); + + x = newPt.x; + y = newPt.y; + + if(unit) { + x = svgCanvas.convertUnit(x); + y = svgCanvas.convertUnit(y); + } + $('#selected_x').val(x || 0); + $('#selected_y').val(y || 0); + } + + // updates the toolbar (colors, opacity, etc) based on the selected element // This function also updates the opacity and id elements that are in the context panel var updateToolbar = function() { @@ -1450,13 +1512,6 @@ if(elem != null && !elem.parentNode) elem = null; var currentLayerName = svgCanvas.getCurrentLayerName(); var currentMode = svgCanvas.getMode(); - // No need to update anything else in rotate mode - if (currentMode == 'rotate' && elem != null) { - var ang = svgCanvas.getRotationAngle(elem); - $('#angle').val(ang); - $('#tool_reorient').toggleClass('disabled', ang == 0); - return; - } var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null; var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; @@ -1691,6 +1746,7 @@ // bind the selected event to our function that handles updates to the UI svgCanvas.bind("selected", selectedChanged); + svgCanvas.bind("transition", elementTransition); svgCanvas.bind("changed", elementChanged); svgCanvas.bind("saved", saveHandler); svgCanvas.bind("exported", exportHandler); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index afb8245b..3007fb9a 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -1124,6 +1124,7 @@ this.setRotationAngle = function(val, preventUndo) { var newTransform = elem.getAttribute("transform"); elem.setAttribute("transform", oldTransform); changeSelectedAttribute("transform",newTransform,selectedElements); + call("changed", selectedElements); } var pointGripContainer = getElem("pathpointgrip_container"); // if(elem.nodeName == "path" && pointGripContainer) { @@ -2899,6 +2900,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) { // update our internal bbox that we're tracking while dragging selectorManager.requestSelector(selected).resize(); } + + call("transition", selectedElements); } } break; @@ -3024,6 +3027,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) { } selectorManager.requestSelector(selected).resize(); + + call("transition", selectedElements); + break; case "zoom": real_x *= current_zoom; @@ -3198,7 +3204,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) { } canvas.setRotationAngle(angle<-180?(360+angle):angle, true); - call("changed", selectedElements); + call("transition", selectedElements); break; default: break;