commons-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jbe...@apache.org
Subject svn commit: r984030 - /commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml
Date Tue, 10 Aug 2010 14:19:18 GMT
Author: jbeard
Date: Tue Aug 10 14:19:18 2010
New Revision: 984030

URL: http://svn.apache.org/viewvc?rev=984030&view=rev
Log:
Added executable content for performing transforms.

Modified:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml

Modified: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml?rev=984030&r1=984029&r2=984030&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml (original)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml Tue Aug
10 14:19:18 2010
@@ -78,21 +78,59 @@ In both:
 			node.ry.baseVal.value = dyByTwo;
 		}
 
-		function updateTransformHandles(rotationButtonHandle,scaleButtonHandle){
+		function updateTransformHandles(){
 			var sePtX = cachedBBox.width + cachedBBox.x;
 			var sePtY = cachedBBox.height + cachedBBox.y;
 
-			var sScale = scaleButtonHandle.transform.baseVal.getItem(0);
+			var sScale = scaleHandle.transform.baseVal.getItem(0);
 			var newM = identity.translate(sePtX,sePtY);
 			sScale.setMatrix(newM);
 
-			var rScale = rotationButtonHandle.transform.baseVal.getItem(0);
+			var rScale = rotationHandle.transform.baseVal.getItem(0);
 			var newM = identity.translate(sePtX,sePtY);
 			rScale.setMatrix(newM);
 		}
 
-		function getCenterPoint(canvas){
-			var bbox = canvas.getBBox();
+		function getAggregateBBox(nodes){
+
+			//get the aggregate of the bounding boxes of his children, or if he has no hier children,
get his own bbox
+			var newBBox;
+			if(nodes.length){
+				var bboxes = $(nodes).map(function(e){
+					return e.visualObject.getBBoxInEntitySpace(boundingBoxGraphEntity.visualObject);
+				});
+
+				var newBBoxX0 = Math.min.apply(this,bboxes.map(function(bbox){ return bbox.x }))
+				var newBBoxY0 = Math.min.apply(this,bboxes.map(function(bbox){ return bbox.y }))
+				var newBBoxX1 = Math.max.apply(this,bboxes.map(function(bbox){return bbox.x+bbox.width}))
+				var newBBoxY1 = Math.max.apply(this,bboxes.map(function(bbox){ return bbox.y+bbox.height}))
+
+				var newBBoxWidth = newBBoxX1 - newBBoxX0
+				var newBBoxHeight = newBBoxY1 - newBBoxY0
+
+				newBBox = {
+					x : newBBoxX0,
+					y : newBBoxY0,
+					width : newBBoxWidth,
+					height : newBBoxHeight
+				};
+
+			}else{
+				newBBox = {
+					x : 0,
+					y : 0,
+					width : 0,
+					height : 0
+				}
+			}
+			
+			return newBBox;
+
+		}
+
+		function getAggregateCenterPoint(nodes){
+			var bbox = getAggregateBBox(nodes);
+
 			var cPt = {
 				'x': bbox.x + (bbox.width / 2),
 				'y': bbox.y + (bbox.height / 2)
@@ -294,7 +332,7 @@ In both:
 
 				<!-- TODO: add reference to transform button handle -->
 				<transition target="transform_tool_selected" event="mousedown" cond="_event.data.target
=== transformButtonHandle"/>
-			<state>
+			</state>
 		</state>
 
 		<state id="processing_events">
@@ -320,29 +358,29 @@ In both:
 
 				<transition target="after_mousedown_on_selected_nodes" event="mousedown" 
 					cond="selectedNodes.indexOf(_event.data.target) !== -1 
-						&& !_event.data.shiftKey"/>
+						&amp;&amp; !_event.data.shiftKey"/>
 
 				<transition target="after_mousedown_with_shift_key_on_selected_nodes" event="mousedown"

 					cond="selectedNodes.indexOf(_event.data.target) !== -1 
-						&& _event.data.shiftKey"/>
+						&amp;&amp; _event.data.shiftKey"/>
 
 				<transition target="after_mousedown_on_nonselected_nodes" event="mousedown"
 					cond="allNodes.indexOf(_event.data.target) !== -1 
-						&& !_event.data.shiftKey"/>
+						&amp;&amp; !_event.data.shiftKey"/>
 
 				<transition target="after_mousedown_with_shift_key_on_nonselected_nodes" event="mousedown"
 					cond="allNodes.indexOf(_event.data.target) !== -1 
-						&& _event.data.shiftKey"/>
+						&amp;&amp; _event.data.shiftKey"/>
 
 				<transition target="after_mousedown_on_canvas" event="mousedown" cond="_event.data.target
=== canvas"/>
 
 				<transition target="rotating" event="mousedown" 
 					cond="_event.data.target === rotationHandle 
-						&& In(ready_to_rotate)"/>
+						&amp;&amp; In(ready_to_rotate)"/>
 
 				<transition target="scaling" event="mousedown" 
 					cond="_event.data.target === rotationHandle 
-						&& In(ready_to_scale)"/>
+						&amp;&amp; In(ready_to_scale)"/>
 			</state>
 
 			<state id="after_mousedown" initial="after_mousedown_on_selected_nodes">
@@ -356,6 +394,7 @@ In both:
 
 					<transition target="dragging" event="mousemove" cond="In(transform_tool_selected)">
 						<!-- TODO: add dragging behaviour -->
+						<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
 					</transition>
 				</state>
 
@@ -370,7 +409,9 @@ In both:
 					</transition>
 
 					<!-- TODO: add marquee-drawing logic -->
-					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)">
+						<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+					</transition>
 
 				</state>
 
@@ -391,6 +432,8 @@ In both:
 						<assign location="selectedNodes" expr="[clickedNode]"/>
 						<send event="NODES_SELECTED_WITH_DRAG"/>
 						<!-- TODO: add dragging logic -->
+
+						<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
 					</transition>
 
 				</state>
@@ -407,7 +450,9 @@ In both:
 					</transition>
 
 					<!-- TODO: add marquee-drawing logic -->
-					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)">
+						<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+					</transition>
 
 				</state>
 
@@ -420,36 +465,94 @@ In both:
 						<send event="CHECK_NODES"/>
 					</transition>
 
-					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)">
+						<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+					</transition>
 
 				</state>
 
 				<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)">
 					<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
-					<assign location="nodeBeingDrawn" expr="svg.rect(_event.data.clientX,_event.data.clientY,1,1,{"fill":"red","stroke":"black"})"/>
+					<assign location="nodeBeingDrawn" expr="svg.rect(_event.data.clientX,_event.data.clientY,1,1,{'fill':'red','stroke':'black'})"/>
 				</transition>
 				<transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)">
 					<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
-					<assign location="nodeBeingDrawn" expr="svg.ellipse(_event.data.clientX,_event.data.clientY,1,1,{"fill":"blue","stroke":"black"})"/>
+					<assign location="nodeBeingDrawn" expr="svg.ellipse(_event.data.clientX,_event.data.clientY,1,1,{'fill':'blue','stroke':'black'})"/>
 				</transition>
 
 			</state>
 
 			<!-- TODO: add dragging behaviour with the tdeltas and stuff -->
 			<state id="dragging">
-				<transition target="dragging" event="mousemove"/>
+				<transition target="dragging" event="mousemove">
+					<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+					<assign location="eventStamp" expr="_event.data"/>
+					<script><![CDATA[
+						for(var i=0,l=selectedNodes.length; i < l; i++){
+							var n = selectedNodes[i];
+
+							transformModule.translate(n,tDelta);
+						}
+					]]></script>
+				</transition>
+				<transition target="ready" event="ready">
+					<assign location="tDelta" expr="computeTDelta(firstEvent,eventStamp)"/>
+					<assign location="cachedCenterPoint" expr="getCenterPoint(selectedNodes)"/>
+					<assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+					<!-- TODO -->
+					<script>
+						updateTransformHandles();
+					</script>
+				</transition>
 			</state>
 
-
 			<!-- TODO: add rotation and scale code -->
+			<!-- TODO: alter various scripts to use all nodes -->
 			<state id="rotating">
-				<transition target="ready" event="mouseup"/>
-				<transition target="rotating" event="mousemove"/>
+				<transition target="ready" event="mouseup">
+					<assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+					<script>
+						updateTransformHandles();
+					</script>
+				</transition>
+
+				<transition target="rotating" event="mousemove">
+					<assign target="rDelta" expr="computeRDelta(eventStamp,_event.data,cachedCenterPoint)"/>
+					<assign location="eventStamp" expr="_event.data"/>
+					<script><![CDATA[
+						for(var i=0,l=selectedNodes.length; i < l; i++){
+							var n = selectedNodes[i];
+
+							transformModule.rotate(n,rDelta,cachedCenterPoint.x,cachedCenterPoint.y);
+						}
+
+						transformModule.rotate(rotationHandle,rDelta,cachedCenterPoint.x,cachedCenterPoint.y);
+					]]></script>
+				</transition>
 			</state>
 
 			<state id="scaling">
-				<transition target="ready" event="mouseup"/>
-				<transition target="scaling" event="mousemove"/>
+				<transition target="ready" event="mouseup">
+					<assign location="cachedCenterPoint" expr="getCenterPoint(selectedNodes)"/>
+					<assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+					<script>
+						updateTransformHandles();
+					</script>
+				</transition>
+				<transition target="scaling" event="mousemove">
+					<script><![CDATA[
+						for(var i=0,l=selectedNodes.length; i < l; i++){
+							var n = selectedNodes[i];
+
+							transformModule.scale(n,eventStamp,_event.data)
+						}
+					]]></script>
+					<assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+					<assign location="eventStamp" expr="_event.data"/>
+					<script>
+						updateTransformHandles();
+					</script>
+				</transition>
 			</state>
 
 



Mime
View raw message