commons-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jbe...@apache.org
Subject svn commit: r984022 - in /commons/sandbox/gsoc/2010/scxml-js/trunk: demo/drawing-tool/ demo/drawing-tool/behaviour/ src/javascript/scxml/cgf/util/xsl/ src/xslt/backends/js/
Date Tue, 10 Aug 2010 14:18:07 GMT
Author: jbeard
Date: Tue Aug 10 14:18:07 2010
New Revision: 984022

URL: http://svn.apache.org/viewvc?rev=984022&view=rev
Log:
Added toolbar. Can now create circles and rects.

Added:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/toolbar.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
    commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/xsl/browser.js
    commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/backends/js/AbstractStatechartGenerator.xsl

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=984022&r1=984021&r2=984022&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:18:07 2010
@@ -6,7 +6,7 @@
 	initial="initial_default"
 	name="Canvas">
 
-	<script>
+	<script><![CDATA[
 		function computeTDelta(oldEvent,newEvent){
 			//summary:computes the offset between two events; to be later used with this.translate
 			var dx = newEvent.clientX - oldEvent.clientX;
@@ -15,26 +15,37 @@
 			return {'dx':dx,'dy':dy};
 		}
 
-		function updateRect(rawNode,tDelta){
-			rawNode.width.baseVal.value = tDelta.dx;
-			rawNode.height.baseVal.value = tDelta.dy;
+		function updateRect(node,tDelta){
+			node.width.baseVal.value = tDelta.dx;
+			node.height.baseVal.value = tDelta.dy;
 		}
-	</script>
+
+		function updateCircle(node,startPosition,currentPosition){
+			var dxByTwo = (currentPosition.clientX - startPosition.clientX)/2;
+			var dyByTwo = (currentPosition.clientY - startPosition.clientY)/2;
+			node.cx.baseVal.value = startPosition.clientX + dxByTwo;
+			node.cy.baseVal.value = startPosition.clientY + dyByTwo;
+			node.rx.baseVal.value = dxByTwo;
+			node.ry.baseVal.value = dyByTwo;
+		}
+	]]></script>
 
 
 	<datamodel>
 		<data id="rawNode"/>
 		<data id="api"/>
+		<data id="toolbarStatechart"/>
 		<data id="tDelta"/>
 		<data id="firstEvent"/>
 		<data id="eventStamp"/>
-		<data id="rectNode"/>
+		<data id="nodeBeingDrawn"/>
 		<data id="svgNs" expr="'http://www.w3.org/2000/svg'"/>
 	</datamodel>
 
 	<state id="initial_default">
 		<transition event="init" target="idle">
 			<assign location="rawNode" expr="_event.data.rawNode"/>
+			<assign location="toolbarStatechart" expr="_event.data.toolbarStatechart"/>
 			<assign location="api" expr="_event.data.api"/>
 		</transition>
 	</state>
@@ -53,15 +64,26 @@
 				//obj.canvasDeselect();
 			</script>
 		</transition>
-		<transition event="mousemove" target="drawing">
+		<transition event="mousemove" target="drawing_rect" cond="toolbarStatechart.$in(toolbarStatechart._states.rect_selected)">
+			<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+			<script>
+				nodeBeingDrawn = document.createElementNS(svgNs,"rect");
+				nodeBeingDrawn.setAttributeNS(null,"x",_event.data.clientX);
+				nodeBeingDrawn.setAttributeNS(null,"y",_event.data.clientY);
+				nodeBeingDrawn.setAttributeNS(null,"fill","red");
+				nodeBeingDrawn.setAttributeNS(null,"stroke","black");
+				rawNode.appendChild(nodeBeingDrawn);
+			</script>
+		</transition>
+		<transition event="mousemove" target="drawing_ellipse" cond="toolbarStatechart.$in(toolbarStatechart._states.ellipse_selected)">
 			<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
 			<script>
-				rectNode = document.createElementNS(svgNs,"rect");
-				rectNode.setAttributeNS(null,"x",_event.data.clientX);
-				rectNode.setAttributeNS(null,"y",_event.data.clientY);
-				rectNode.setAttributeNS(null,"fill","red");
-				rectNode.setAttributeNS(null,"stroke","black");
-				rawNode.appendChild(rectNode);
+				nodeBeingDrawn = document.createElementNS(svgNs,"ellipse");
+				nodeBeingDrawn.setAttributeNS(null,"cx",_event.data.clientX);
+				nodeBeingDrawn.setAttributeNS(null,"cy",_event.data.clientY);
+				nodeBeingDrawn.setAttributeNS(null,"fill","blue");
+				nodeBeingDrawn.setAttributeNS(null,"stroke","black");
+				rawNode.appendChild(nodeBeingDrawn);
 			</script>
 		</transition>
 	</state>
@@ -69,7 +91,7 @@
 	<state id="drawing">
 		<transition event="mouseup" target="idle">
 			<script>
-				api.createRectObject(rectNode);
+				api.addBehaviourToNode(nodeBeingDrawn);
 			</script>
 		</transition>
 
@@ -79,12 +101,23 @@
 		</transition>
 		-->
 
-		<transition event="mousemove" target="drawing">
-			<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
-			<script>
-				updateRect(rectNode,tDelta);
-			</script>
-		</transition>
+		<state id="drawing_rect">
+			<transition event="mousemove" target="drawing_rect">
+				<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+				<script>
+					updateRect(nodeBeingDrawn,tDelta);
+				</script>
+			</transition>
+		</state>
+
+		<state id="drawing_ellipse">
+			<transition event="mousemove" target="drawing_ellipse">
+				<script>
+					updateCircle(nodeBeingDrawn,eventStamp,_event.data);
+				</script>
+			</transition>
+		</state>
+
 	</state>
 
 </scxml>

Added: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/toolbar.xml
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/toolbar.xml?rev=984022&view=auto
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/toolbar.xml (added)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/toolbar.xml Tue Aug
10 14:18:07 2010
@@ -0,0 +1,53 @@
+<scxml 
+	xmlns="http://www.w3.org/2005/07/scxml"
+	version="1.0"
+	profile="ecmascript"
+	id="scxmlRoot"
+	initial="initial_default"
+	name="Toolbar">
+
+	<datamodel>
+		<data id="ellipseButton"/>
+		<data id="rectButton"/>
+	</datamodel>
+
+	<state id="initial_default">
+		<transition event="init" target="ellipse_selected">
+			<assign location="ellipseButton" expr="_event.data.ellipseButton"/>
+			<assign location="ellipseIcon" expr="_event.data.ellipseIcon"/>
+			<assign location="rectButton" expr="_event.data.rectButton"/>
+			<assign location="rectIcon" expr="_event.data.rectIcon"/>
+		</transition>
+	</state>
+
+	<state id="ellipse_selected">
+		<onentry>
+			<script>
+				ellipseButton.setAttributeNS(null,"class","selected");
+			</script>
+		</onentry>
+		<onexit>
+			<script>
+				ellipseButton.removeAttributeNS(null,"class");
+			</script>
+		</onexit>
+		<transition event="mousedown" target="rect_selected" cond="_event.data.target == rectIcon"/>
+	</state>
+
+	<state id="rect_selected">
+		<onentry>
+			<script>
+				rectButton.setAttributeNS(null,"class","selected");
+			</script>
+		</onentry>
+		<onexit>
+			<script>
+				rectButton.removeAttributeNS(null,"class");
+			</script>
+		</onexit>
+		<transition event="mousedown" target="ellipse_selected" cond="_event.data.target ==
ellipseIcon"/>
+	</state>
+
+</scxml>
+
+

Propchange: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/toolbar.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=984022&r1=984021&r2=984022&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:18:07 2010
@@ -24,12 +24,30 @@
 				margin: 0;
 				padding: 0;
 			}
+
+			div#toolbarDiv {
+				position:absolute;
+				bottom:0px;
+				right:0px;
+			}
+
+
+			div#toolbarDiv > svg > g > rect.background {
+				fill : none;
+				stroke : none;
+			}
+
+			div#toolbarDiv > svg > g.selected > rect.background {
+				fill : #AAAAAA;
+				stroke : none;
+			}
 		</style>
 		<script src="../../lib/js/requirejs/require.js" type="text/javascript"></script>
 		<script src="../../lib/js/requirejs/require/text.js" type="text/javascript"></script>
 		<script src="../../lib/js/requirejs/require/xml.js" type="text/javascript"></script>
 	</head>
 	<body>
+		<div id="toolbarDiv"></div>
 		<script>
 			var resultText;
 
@@ -40,24 +58,82 @@
 			} 
 
 
-			//prep scxml document to transform by pulling the scxml node into its own document
 			var scxmlns = "http://www.w3.org/2005/07/scxml";
 			var svgns = "http://www.w3.org/2000/svg";
 
+			//build up the DOM
 			var svg = document.createElementNS(svgns,"svg");
 			svg.setAttributeNS(null,"width","100%");
 			svg.setAttributeNS(null,"height","100%");
 
 			document.body.appendChild(svg);
 
+			//make a draggable toolbar
+			var toolbarDiv = document.getElementById("toolbarDiv");
+			var toolbar = document.createElementNS(svgns,"svg");
+			toolbar.setAttributeNS(null,"width","100px");
+			toolbar.setAttributeNS(null,"height","50px");
+
+			var toolbarOutlineRect = document.createElementNS(svgns,"rect");
+			toolbarOutlineRect.setAttributeNS(null,"width",100); 
+			toolbarOutlineRect.setAttributeNS(null,"height",50); 
+			toolbarOutlineRect.setAttributeNS(null,"x",0); 
+			toolbarOutlineRect.setAttributeNS(null,"y",0); 
+			toolbarOutlineRect.setAttributeNS(null,"fill","white"); 
+			toolbarOutlineRect.setAttributeNS(null,"stroke","black"); 
+			
+			var rectButton = document.createElementNS(svgns,"g");
+			var rectButtonIcon = document.createElementNS(svgns,"rect");
+			rectButtonIcon.setAttributeNS(null,"width",30); 
+			rectButtonIcon.setAttributeNS(null,"height",30); 
+			rectButtonIcon.setAttributeNS(null,"x",10); 
+			rectButtonIcon.setAttributeNS(null,"y",10); 
+			rectButtonIcon.setAttributeNS(null,"fill","red"); 
+			rectButtonIcon.setAttributeNS(null,"stroke","black"); 
+
+			var rectButtonBackground = document.createElementNS(svgns,"rect");
+			rectButtonBackground.setAttributeNS(null,"width",50); 
+			rectButtonBackground.setAttributeNS(null,"height",50); 
+			rectButtonBackground.setAttributeNS(null,"x",0); 
+			rectButtonBackground.setAttributeNS(null,"y",0); 
+			rectButtonBackground.setAttributeNS(null,"class","background"); 
+
+			var ellipseButton = document.createElementNS(svgns,"g");
+			var ellipseButtonIcon = document.createElementNS(svgns,"circle");
+
+			ellipseButton.setAttributeNS(null,"transform","translate(50,0)")
+			ellipseButtonIcon.setAttributeNS(null,"cx",25);
+			ellipseButtonIcon.setAttributeNS(null,"cy",25);
+			ellipseButtonIcon.setAttributeNS(null,"r",15);
+			ellipseButtonIcon.setAttributeNS(null,"fill","blue");
+			ellipseButtonIcon.setAttributeNS(null,"stroke","black");
+
+			var ellipseButtonBackground = document.createElementNS(svgns,"rect");
+			ellipseButtonBackground.setAttributeNS(null,"width",50); 
+			ellipseButtonBackground.setAttributeNS(null,"height",50); 
+			ellipseButtonBackground.setAttributeNS(null,"x",0); 
+			ellipseButtonBackground.setAttributeNS(null,"y",0); 
+			ellipseButtonBackground.setAttributeNS(null,"class","background"); 
+
+			rectButton.appendChild(rectButtonBackground);
+			rectButton.appendChild(rectButtonIcon);
+			ellipseButton.appendChild(ellipseButtonBackground);
+			ellipseButton.appendChild(ellipseButtonIcon);
+			
+			toolbar.appendChild(toolbarOutlineRect);
+			toolbar.appendChild(rectButton);
+			toolbar.appendChild(ellipseButton);
+			toolbarDiv.appendChild(toolbar);
 
 			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);
+					if(compiledStatechartInstance[eventName]){
+						node.addEventListener(eventName,function(e){
+							e.preventDefault();
+							compiledStatechartInstance[eventName](e)
+						},false);
+					}
 				});
 			}
 
@@ -67,9 +143,10 @@
 				},
 				["src/javascript/scxml/cgf/SCXMLCompiler",
 					"xml!demo/drawing-tool/behaviour/canvas.xml",
-					"xml!demo/drawing-tool/behaviour/node.xml" ],
+					"xml!demo/drawing-tool/behaviour/node.xml",
+					"xml!demo/drawing-tool/behaviour/toolbar.xml" ],
 
-				function(compiler,canvasBehaviourSCXML,nodeBehaviourSCXML){
+				function(compiler,canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML){
 
 					require( [window.DOMParser ?
 							"src/javascript/scxml/cgf/util/xsl/browser" :
@@ -77,8 +154,10 @@
 						function(transform){
 
 		
+						var d = new Date();
+
 						compiler.compile({
-							inFiles:[canvasBehaviourSCXML,nodeBehaviourSCXML],
+							inFiles:[canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML],
 							//debug:true,
 							backend:"state",
 							beautify:true,
@@ -86,29 +165,46 @@
 							log:false,
 							ie:false
 						}, function(scArr){
+	
+							console.log("Compiling statecharts took:",new Date() - d);
 							//eval
-							console.log(scArr[0]);
-							eval(scArr[0]);
+							for(var i=0, l=scArr.length; i < l; i++){
+								console.log(scArr[i]);
+								eval(scArr[i]);
+							}
 
-							console.log(scArr[1]);
-							eval(scArr[1]);
 
-							var compiledStatechartInstance = new CanvasStatechartExecutionContext(); 
+							//hook up toolbar behaviour
+							var toolbarSC = new ToolbarStatechartExecutionContext();
+							toolbarSC.initialize();
+							toolbarSC.init({
+								ellipseButton:ellipseButton,
+								rectButton:rectButton,
+								ellipseIcon:ellipseButtonIcon,
+								rectIcon:rectButtonIcon	
+							});
+							
+							hookUpDOMEvents(toolbar,toolbarSC);
 
-							//initialize
-							compiledStatechartInstance.initialize();
+							//hook up canvas behaviour
+							var canvasSC = new CanvasStatechartExecutionContext(); 
+							canvasSC.initialize();
 							
 							//pass in reference to rect
-							compiledStatechartInstance.init({rawNode:svg,api:{
-								createRectObject:function(node){
-									var nodeSc = new NodeStatechartExecutionContext();
-									nodeSc.initialize();
-									nodeSc.init({rawNode:node});
-									hookUpDOMEvents(node,nodeSc);
+							canvasSC.init({	
+								rawNode:svg,
+								toolbarStatechart:toolbarSC,
+								api:{
+									addBehaviourToNode:function(node){
+										var nodeSc = new NodeStatechartExecutionContext();
+										nodeSc.initialize();
+										nodeSc.init({rawNode:node});
+										hookUpDOMEvents(node,nodeSc);
+									}
 								}
-							}}); 	
+							}); 	
 
-							hookUpDOMEvents(svg,compiledStatechartInstance);
+							hookUpDOMEvents(svg,canvasSC);
 
 						},transform);
 					})

Modified: commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/xsl/browser.js
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/xsl/browser.js?rev=984022&r1=984021&r2=984022&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/xsl/browser.js
(original)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/xsl/browser.js
Tue Aug 10 14:18:07 2010
@@ -45,7 +45,8 @@ function(){
 		processors.forEach(function(p){
 			for(paramName in params){
 				 var paramValue = params[paramName];
-				 if (typeof paramValue == "string") p.setParameter(null,paramName,paramValue);
+				 if ((typeof paramValue == "string") || (typeof paramValue == "boolean")) 
+					p.setParameter(null,paramName,paramValue);
 			}
 		});
 

Modified: commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/backends/js/AbstractStatechartGenerator.xsl
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/backends/js/AbstractStatechartGenerator.xsl?rev=984022&r1=984021&r2=984022&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/backends/js/AbstractStatechartGenerator.xsl
(original)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/backends/js/AbstractStatechartGenerator.xsl
Tue Aug 10 14:18:07 2010
@@ -21,7 +21,7 @@
 	version="1.0">
 	<output method="text"/>
 
-	<param name="log"/>
+	<param name="log" select="false()"/>
 	<param name="noIndexOf" select="false()"/>
 	<param name="noMap" select="false()"/>
 	<param name="noForEach" select="false()"/>



Mime
View raw message