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

@@ -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);

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;