commons-commits mailing list archives

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

URL: http://svn.apache.org/viewvc?rev=984029&view=rev
Log:
Intermediat commit. Added drawing behaviour.

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=984029&r1=984028&r2=984029&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:09 2010
@@ -213,12 +213,6 @@ In both:
 		<data id="selectedNodes" expr="[]"/>
 		<data id="nodesOnCanvas" expr="[]"/>
 
-		<data id="firstEvent"/>
-		<data id="eventStamp"/>
-		<data id="tDelta"/>
-		<data id="cachedCenterPoint"/>
-		<data id="cachedBBox"/>
-
 	</datamodel>
 
 	<state id="initial_default">
@@ -237,6 +231,11 @@ In both:
 
 			<state id="transform_tool_selected">
 
+				<initial id="transform_tool_selected_initial">
+					<transition target="no_nodes_selected" cond="selectedNodes.length === 0"/> 
+					<transition target="nodes_selected" cond="selectedNodes.length !== 0"/> 
+				</initial>
+
 				<state id="no_nodes_selected">
 					<transition target="nodes_selected" event="NODES_SELECTED_WITH_CLICK"/>
 					<transition target="nodes_selected_history" event="NODES_SELECTED_WITH_DRAG"/>
@@ -301,11 +300,22 @@ In both:
 		<state id="processing_events">
 			<datamodel>
 				<data id="clickedNode"/>
+
+				<data id="firstEvent"/>
+				<data id="eventStamp"/>
+				<data id="tDelta"/>
+				<data id="cachedCenterPoint"/>
+				<data id="cachedBBox"/>
+
+				<data id="nodeBeingDrawn"/>
 			</datamodel>
 
 			<state id="ready">
 				<onexit>
 					<assign location="clickedNode" expr="_event.data.target"/>
+
+					<assign location="firstEvent" expr="_event.data"/>
+					<assign location="eventStamp" expr="_event.data"/>
 				</onexit>
 
 				<transition target="after_mousedown_on_selected_nodes" event="mousedown" 
@@ -335,43 +345,94 @@ In both:
 						&& In(ready_to_scale)"/>
 			</state>
 
-			<!-- TODO: add rotation and scale code -->
-			<state id="rotating">
-				<transition target="ready" event="mouseup"/>
-				<transition target="rotating" event="mousemove"/>
-			</state>
+			<state id="after_mousedown" initial="after_mousedown_on_selected_nodes">
 
-			<state id="scaling">
-				<transition target="ready" event="mouseup"/>
-				<transition target="scaling" event="mousemove"/>
-			</state>
+				<state id="after_mousedown_on_selected_nodes">
+					<transition target="ready" event="mouseup" >
+						<if cond="In(transform_tool_selected)">
+							<send event="TOGGLE_TRANSFORM"/>
+						</if>
+					</transition>
+
+					<transition target="dragging" event="mousemove" cond="In(transform_tool_selected)">
+						<!-- TODO: add dragging behaviour -->
+					</transition>
+				</state>
 
-			<state id="after_mousedown_on_selected_nodes">
-				<transition target="dragging" event="mousemove" cond="In(transform_tool_selected)"/>
-				<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)"/>
-				<transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)"/>
-
-				<transition target="ready" event="mouseup" >
-					<if cond="In(transform_tool_selected)">
-						<send event="TOGGLE_TRANSFORM"/>
-					</if>
-				</transition>
+				<state id="after_mousedown_with_shift_key_on_selected_nodes">
+					<transition target="ready" event="mouseup">
+						<script>
+							$(clickedNode).removeClass("selected");
+
+							selectedNodes.splice(selectedNodes.indexOf(clickedNode),1);
+						</script>
+						<send event="CHECK_NODES"/>
+					</transition>
 
-			</state>
+					<!-- TODO: add marquee-drawing logic -->
+					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
 
-			<state id="after_mousedown_with_shift_key_on_selected_nodes">
-				<transition target="ready" event="mouseup">
-					<script>
-						//remove selected node from selection
-						selectedNodes.splice(selectedNodes.indexOf(clickNode),1);
-					</script>
-					<send event="CHECK_NODES"/>
+				</state>
+
+				<state id="after_mousedown_on_nonselected_nodes">
+					<transition target="ready" event="mouseup">
+						<script>
+							$(selectedNodes).removeClass("selected");
+							$(clickedNode).addClass("selected");
+						</script>
+						<assign location="selectedNodes" expr="[clickedNode]"/>
+						<send event="NODES_SELECTED_WITH_CLICK"/>
+					</transition>
+					<transition target="dragging" event="mousemove" cond="In(transform_tool_selected)">
+						<script>
+							$(selectedNodes).removeClass("selected");
+							$(clickedNode).addClass("selected");
+						</script>
+						<assign location="selectedNodes" expr="[clickedNode]"/>
+						<send event="NODES_SELECTED_WITH_DRAG"/>
+						<!-- TODO: add dragging logic -->
+					</transition>
+
+				</state>
+
+				<!-- TODO-->
+				<state id="after_mousedown_with_shift_key_on_nonselected_nodes">
+					<transition target="ready" event="mouseup">
+						<script>
+							$(clickedNode).addClass("selected");
+
+							selectedNodes.push(clickedNode);
+						</script>
+						<send event="NODES_SELECTED_WITH_CLICK"/>
+					</transition>
+
+					<!-- TODO: add marquee-drawing logic -->
+					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+
+				</state>
+
+				<state id="after_mousedown_on_canvas">
+					<transition target="ready" event="mouseup">
+						<script>
+							$(selectedNodes).removeClass("selected");
+						</script>
+						<assign location="selectedNodes" expr="[]"/>
+						<send event="CHECK_NODES"/>
+					</transition>
+
+					<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+
+				</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"})"/>
+				</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"})"/>
 				</transition>
 
-				<!-- TODO: add marquee-drawing logic -->
-				<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
-				<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)"/>
-				<transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)"/>
 			</state>
 
 			<!-- TODO: add dragging behaviour with the tdeltas and stuff -->
@@ -379,69 +440,53 @@ In both:
 				<transition target="dragging" event="mousemove"/>
 			</state>
 
-			<state id="after_mousedown_on_nonselected_nodes">
-				<transition target="ready" event="mouseup">
-					<assign location="selectedNodes" expr="[clickedNode]"/>
-					<send event="NODES_SELECTED_WITH_CLICK"/>
-				</transition>
-				<transition target="dragging" event="mousemove" cond="In(transform_tool_selected)">
-					<assign location="selectedNodes" expr="[clickedNode]"/>
-					<send event="NODES_SELECTED_WITH_DRAG"/>
-					<!-- TODO: add dragging logic -->
-				</transition>
 
-				<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)"/>
-				<transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)"/>
+			<!-- TODO: add rotation and scale code -->
+			<state id="rotating">
+				<transition target="ready" event="mouseup"/>
+				<transition target="rotating" event="mousemove"/>
 			</state>
 
-			<!-- TODO-->
-			<state id="after_mousedown_with_shift_key_on_nonselected_nodes">
-				<transition target="ready" event="mouseup">
-					<script>
-						selectedNodes.push(clickNode);
-					</script>
-					<send event="NODES_SELECTED_WITH_CLICK"/>
-				</transition>
-
-				<!-- TODO: add marquee-drawing logic -->
-				<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
-
-				<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)"/>
-				<transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)"/>
+			<state id="scaling">
+				<transition target="ready" event="mouseup"/>
+				<transition target="scaling" event="mousemove"/>
 			</state>
 
-			<state id="after_mousedown_on_canvas">
-				<transition target="ready" event="mouseup">
-					<assign location="selectedNodes" expr="[]"/>
-					<send event="CHECK_NODES"/>
-				</transition>
-
-				<transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
-
-				<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)"/>
-				<transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)"/>
-			</state>
 
 			<!-- TODO: add marquee-drawing logic -->
 			<state id="drawing_marquee">
 				<transition target="ready" event="mouseup">
-					<script>
-						<!-- TODO: select what is inside marquee -->
-					</script>
+					<!-- TODO: select what is inside marquee -->
 					<send event="CHECK_NODES"/>
 				</transition>
 
 				<transition target="drawing_marquee" event="mousemove"/>
 			</state>
 
-			<state id="drawing_circle">
-				<transition target="drawing_circle" event="mousemove"/>
-				<transition target="ready" event="mouseup"/>
-			</state>
+			<state id="drawing">
+				<state id="drawing_circle">
+					<transition target="drawing_circle" event="mousemove">
+						<script>
+							updateCircle(nodeBeingDrawn,eventStamp,_event.data);
+						</script>
+					</transition>
+				</state>
 
-			<state id="drawing_rect">
-				<transition target="drawing_rect" event="mousemove"/>
-				<transition target="ready" event="mouseup"/>
+				<state id="drawing_rect">
+					<transition target="drawing_rect" event="mousemove">
+						<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+						<script>
+							updateRect(nodeBeingDrawn,tDelta);
+						</script>
+					</transition>
+				</state>
+				
+				<transition target="ready" event="mouseup">
+					<script>
+						selectedNodes.push(nodeBeingDrawn);
+						$(nodeBeingDrawn).addClass("selected");
+					</script>
+				</transition>
 			</state>
 		</state>
 	</parallel>



Mime
View raw message