commons-commits mailing list archives

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

URL: http://svn.apache.org/viewvc?rev=984021&view=rev
Log:
Demo now supports drawing, and then dragging drawn rects.

Added:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml   (with
props)
Modified:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool.html

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=984021&r1=984020&r2=984021&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:17:53 2010
@@ -3,7 +3,8 @@
 	version="1.0"
 	profile="ecmascript"
 	id="scxmlRoot"
-	initial="initial_default">
+	initial="initial_default"
+	name="Canvas">
 
 	<script>
 		function computeTDelta(oldEvent,newEvent){
@@ -23,6 +24,7 @@
 
 	<datamodel>
 		<data id="rawNode"/>
+		<data id="api"/>
 		<data id="tDelta"/>
 		<data id="firstEvent"/>
 		<data id="eventStamp"/>
@@ -33,6 +35,7 @@
 	<state id="initial_default">
 		<transition event="init" target="idle">
 			<assign location="rawNode" expr="_event.data.rawNode"/>
+			<assign location="api" expr="_event.data.api"/>
 		</transition>
 	</state>
 
@@ -65,7 +68,9 @@
 
 	<state id="drawing">
 		<transition event="mouseup" target="idle">
-			<!-- TODO: finalize by turning rect into semantic object -->
+			<script>
+				api.createRectObject(rectNode);
+			</script>
 		</transition>
 
 		<!-- if escape keypress, kill the node -->

Added: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml?rev=984021&view=auto
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml (added)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml Tue Aug
10 14:17:53 2010
@@ -0,0 +1,67 @@
+<scxml 
+	xmlns="http://www.w3.org/2005/07/scxml"
+	version="1.0"
+	profile="ecmascript"
+	id="scxmlRoot"
+	initial="initial_default"
+	name="Node">
+
+	<script>
+		function computeTDelta(oldEvent,newEvent){
+			//summary:computes the offset between two events; to be later used with this.translate
+			var dx = newEvent.clientX - oldEvent.clientX;
+			var dy = newEvent.clientY - oldEvent.clientY;
+
+			return {'dx':dx,'dy':dy};
+		}
+
+		function translate(rawNode,tDelta){
+			var tl = rawNode.transform.baseVal;
+			var t = tl.numberOfItems ? tl.getItem(0) : rawNode.ownerSVGElement.createSVGTransform();
+			var m = t.matrix;
+			var newM = rawNode.ownerSVGElement.createSVGMatrix().translate(tDelta.dx,tDelta.dy).multiply(m);
+			t.setMatrix(newM);
+			tl.initialize(t);
+			return newM;
+		}
+	</script>
+
+	<datamodel>
+		<data id="firstEvent"/>
+		<data id="eventStamp"/>
+		<data id="tDelta"/>
+		<data id="rawNode"/>
+	</datamodel>
+
+	<state id="initial_default">
+		<transition event="init" target="idle">
+			<assign location="rawNode" expr="_event.data.rawNode"/>
+		</transition>
+	</state>
+
+	<state id="idle">
+		<transition event="mousedown" target="dragging">
+			<assign location="firstEvent" expr="_event.data"/>
+			<assign location="eventStamp" expr="_event.data"/>
+			<script>
+				//prevents the canvas from capturing the event (which would normally bubble up) and drawing
another statechart
+				_event.data.stopPropagation();	
+			</script>
+		</transition>
+	</state>
+
+	<state id="dragging">
+		<transition event="mouseup" target="idle">
+		</transition>
+
+		<transition event="mousemove" target="dragging">
+			<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+			<script>
+				translate(rawNode,tDelta);
+			</script>
+			<assign location="eventStamp" expr="_event.data"/>
+		</transition>
+	</state>
+
+</scxml>
+

Propchange: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml
------------------------------------------------------------------------------
    svn:eol-style = native

Modified: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool.html
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool.html?rev=984021&r1=984020&r2=984021&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool.html (original)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool.html Tue Aug 10
14:17:53 2010
@@ -51,14 +51,25 @@
 			document.body.appendChild(svg);
 
 
+			function hookUpDOMEvents(node,compiledStatechartInstance){
+				//hook up DOM events
+				["mousedown","mouseup","mousemove"].forEach(function(eventName){
+					node.addEventListener(eventName,function(e){
+						e.preventDefault();
+						compiledStatechartInstance[eventName](e)
+					},false);
+				});
+			}
+
 			require(
 				{
 					"baseUrl":"/"
 				},
 				["src/javascript/scxml/cgf/SCXMLCompiler",
-					"xml!demo/drawing-tool/behaviour/canvas.xml"],
+					"xml!demo/drawing-tool/behaviour/canvas.xml",
+					"xml!demo/drawing-tool/behaviour/node.xml" ],
 
-				function(compiler,canvasBehaviourSCXML){
+				function(compiler,canvasBehaviourSCXML,nodeBehaviourSCXML){
 
 					require( [window.DOMParser ?
 							"src/javascript/scxml/cgf/util/xsl/browser" :
@@ -66,35 +77,39 @@
 						function(transform){
 
 		
-						var compiledStatechartConstructor, compiledStatechartInstance; 
-
 						compiler.compile({
-							inFiles:[canvasBehaviourSCXML],
+							inFiles:[canvasBehaviourSCXML,nodeBehaviourSCXML],
 							//debug:true,
 							backend:"state",
 							beautify:true,
 							verbose:false,
-							log:true,
+							log:false,
 							ie:false
 						}, function(scArr){
-							var transformedJs = scArr[0];
-
 							//eval
-							console.log(transformedJs);
-							eval(transformedJs);
-							compiledStatechartConstructor = StatechartExecutionContext;
-							compiledStatechartInstance = new compiledStatechartConstructor(); 
+							console.log(scArr[0]);
+							eval(scArr[0]);
+
+							console.log(scArr[1]);
+							eval(scArr[1]);
+
+							var compiledStatechartInstance = new CanvasStatechartExecutionContext(); 
 
 							//initialize
 							compiledStatechartInstance.initialize();
 							
 							//pass in reference to rect
-							compiledStatechartInstance.init({rawNode:svg}); 
+							compiledStatechartInstance.init({rawNode:svg,api:{
+								createRectObject:function(node){
+									var nodeSc = new NodeStatechartExecutionContext();
+									nodeSc.initialize();
+									nodeSc.init({rawNode:node});
+									hookUpDOMEvents(node,nodeSc);
+								}
+							}}); 	
+
+							hookUpDOMEvents(svg,compiledStatechartInstance);
 
-							//hook up DOM events
-							["mousedown","mouseup","mousemove"].forEach(function(eventName){
-								svg.addEventListener(eventName,function(e){e.preventDefault();compiledStatechartInstance[eventName](e)},false);
-							});
 						},transform);
 					})
 				}



Mime
View raw message