Return-Path: 
 <commits-return-13264-apmail-commons-commits-archive=commons.apache.org@commons.apache.org>
Delivered-To: apmail-commons-commits-archive@minotaur.apache.org
Received: (qmail 15341 invoked from network); 10 Aug 2010 14:19:41 -0000
Received: from unknown (HELO mail.apache.org) (140.211.11.3)
  by 140.211.11.9 with SMTP; 10 Aug 2010 14:19:41 -0000
Received: (qmail 58166 invoked by uid 500); 10 Aug 2010 14:19:41 -0000
Delivered-To: apmail-commons-commits-archive@commons.apache.org
Received: (qmail 58070 invoked by uid 500); 10 Aug 2010 14:19:39 -0000
Mailing-List: contact commits-help@commons.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@commons.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@commons.apache.org>
List-Post: <mailto:commits@commons.apache.org>
List-Id: <commits.commons.apache.org>
Reply-To: dev@commons.apache.org
Delivered-To: mailing list commits@commons.apache.org
Received: (qmail 58063 invoked by uid 99); 10 Aug 2010 14:19:39 -0000
Received: from nike.apache.org (HELO nike.apache.org) (192.87.106.230)
    by apache.org (qpsmtpd/0.29) with ESMTP; Tue, 10 Aug 2010 14:19:39 +0000
X-ASF-Spam-Status: No, hits=-2000.0 required=10.0
	tests=ALL_TRUSTED
X-Spam-Check-By: apache.org
Received: from [140.211.11.4] (HELO eris.apache.org) (140.211.11.4)
    by apache.org (qpsmtpd/0.29) with ESMTP; Tue, 10 Aug 2010 14:19:35 +0000
Received: by eris.apache.org (Postfix, from userid 65534)
	id E67E923889E7; Tue, 10 Aug 2010 14:18:16 +0000 (UTC)
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Subject: svn commit: r984023 - 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:18:16 -0000
To: commits@commons.apache.org
From: jbeard@apache.org
X-Mailer: svnmailer-1.0.8
Message-Id: <20100810141816.E67E923889E7@eris.apache.org>
X-Virus-Checked: Checked by ClamAV on apache.org

Author: jbeard
Date: Tue Aug 10 14:18:16 2010
New Revision: 984023

URL: http://svn.apache.org/viewvc?rev=984023&view=rev
Log:
Intermediate commit, trying to use requirejs with jquery.

Modified:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.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=984023&r1=984022&r2=984023&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:16 2010
@@ -32,7 +32,7 @@
 
 
 	<datamodel>
-		<data id="rawNode"/>
+		<data id="svg"/>
 		<data id="api"/>
 		<data id="toolbarStatechart"/>
 		<data id="tDelta"/>
@@ -44,7 +44,7 @@
 
 	<state id="initial_default">
 		<transition event="init" target="idle">
-			<assign location="rawNode" expr="_event.data.rawNode"/>
+			<assign location="svg" expr="_event.data.svg"/>
 			<assign location="toolbarStatechart" expr="_event.data.toolbarStatechart"/>
 			<assign location="api" expr="_event.data.api"/>
 		</transition>
@@ -67,23 +67,13 @@
 		<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);
+				nodeBeingDrawn = svg.rect(_event.data.clientX,_event.data.clientY,1,1,{"fill":"red","stroke":"black"});
 			</script>
 		</transition>
 		<transition event="mousemove" target="drawing_ellipse" cond="toolbarStatechart.$in(toolbarStatechart._states.ellipse_selected)">
 			<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
 			<script>
-				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);
+				nodeBeingDrawn = svg.ellipse(_event.data.clientX,_event.data.clientY,1,1,{"fill":"blue","stroke":"black"});
 			</script>
 		</transition>
 	</state>

Modified: 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=984023&r1=984022&r2=984023&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml (original)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml Tue Aug 10 14:18:16 2010
@@ -6,7 +6,7 @@
 	initial="initial_default"
 	name="Node">
 
-	<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,16 +15,7 @@
 			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>
+	]]></script>
 
 	<datamodel>
 		<data id="firstEvent"/>

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=984023&r1=984022&r2=984023&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:16 2010
@@ -41,176 +41,188 @@
 				fill : #AAAAAA;
 				stroke : none;
 			}
+
+			@import "lib/jquery.svg.css";
+
 		</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;
 
-			//hook up minimal console api
-			if(typeof console == "undefined"){
-				console = {};
-				["log","info","error","dirxml"].forEach(function(m){console[m] = console[m] || function(){} });
-			} 
-
-
-			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){
-					if(compiledStatechartInstance[eventName]){
-						node.addEventListener(eventName,function(e){
-							e.preventDefault();
-							compiledStatechartInstance[eventName](e)
-						},false);
-					}
-				});
-			}
+				//hook up minimal console api
+				if(typeof console == "undefined"){
+					console = {};
+					["log","info","error","dirxml"].forEach(function(m){console[m] = console[m] || function(){} });
+				} 
+
+
+				var scxmlns = "http://www.w3.org/2005/07/scxml";
+				var svgns = "http://www.w3.org/2000/svg";
+
+				function hookUpDOMEvents(node,compiledStatechartInstance){
+					//hook up DOM events
+					["mousedown","mouseup","mousemove"].forEach(function(eventName){
+						if(compiledStatechartInstance[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/node.xml",
-					"xml!demo/drawing-tool/behaviour/toolbar.xml" ],
-
-				function(compiler,canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML){
-
-					require( [window.DOMParser ?
-							"src/javascript/scxml/cgf/util/xsl/browser" :
-							"src/javascript/scxml/cgf/util/xsl/ie"],
-						function(transform){
-
-		
-						var d = new Date();
-
-						compiler.compile({
-							inFiles:[canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML],
-							//debug:true,
-							backend:"state",
-							beautify:true,
-							verbose:false,
-							log:false,
-							ie:false
-						}, function(scArr){
-	
-							console.log("Compiling statecharts took:",new Date() - d);
-							//eval
-							for(var i=0, l=scArr.length; i < l; i++){
-								console.log(scArr[i]);
-								eval(scArr[i]);
-							}
-
-
-							//hook up toolbar behaviour
-							var toolbarSC = new ToolbarStatechartExecutionContext();
-							toolbarSC.initialize();
-							toolbarSC.init({
-								ellipseButton:ellipseButton,
-								rectButton:rectButton,
-								ellipseIcon:ellipseButtonIcon,
-								rectIcon:rectButtonIcon	
-							});
-							
-							hookUpDOMEvents(toolbar,toolbarSC);
 
-							//hook up canvas behaviour
-							var canvasSC = new CanvasStatechartExecutionContext(); 
-							canvasSC.initialize();
+				require(
+					{
+						"baseUrl":"/"
+					},
+					["src/javascript/scxml/cgf/SCXMLCompiler",
+						"demo/drawing-tool/transform",
+						"xml!demo/drawing-tool/behaviour/canvas.xml",
+						"xml!demo/drawing-tool/behaviour/node.xml",
+						"xml!demo/drawing-tool/behaviour/toolbar.xml", 
+						"lib/jquery-1.4.2.js",
+						"lib/jquery.svg.js",
+						"lib/jquery.svgdom.js" ],
+
+					function(compiler,transform,canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML){
+
+						require( [window.DOMParser ?
+								"src/javascript/scxml/cgf/util/xsl/browser" :
+								"src/javascript/scxml/cgf/util/xsl/ie"],
+							function(transform){
+
+							$(document).ready(function(){
+
+								//construct DOM
+								$("toolbarDiv").svg({
+									"width":"100px",
+									"height":"50px",
+									onLoad:function(toolbar){
+										$(document.body).svg({
+											width:"100%",
+											height:"100%",
+											onLoad:function(svg){
+
+												var toolbarOutlineRect = svg.rect(0,0,100,50,{
+													fill:"white", 
+													stroke:"black"
+												}) ;
+												
+												var rectButton = svg.group();
+												var rectButtonIcon = svg.rect(rectButton,10,10,30,30,{ 
+													fill:"red", 
+													stroke:"black"
+												});
+
+												var rectButtonBackground = svg.rect(rectButton,0,0,50,50,{ 
+													class:"background"
+												});
+
+												var ellipseButton = svg.group({"transform":"translate(50,0)"});
+												var ellipseButtonIcon = svg.circle(ellipseButton,25,25,15,{
+													fill:"blue",
+													stroke:"black"
+												});
+
+												var ellipseButtonBackground = svg.rect(ellipseButton,0,0,50,50,{
+													class:"background"
+												});
+
+
+												//compile
+												var d = new Date();
+
+												compiler.compile({
+													inFiles:[canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML],
+													//debug:true,
+													backend:"state",
+													beautify:true,
+													verbose:false,
+													log:false,
+													ie:false
+												}, function(scArr){
 							
-							//pass in reference to rect
-							canvasSC.init({	
-								rawNode:svg,
-								toolbarStatechart:toolbarSC,
-								api:{
-									addBehaviourToNode:function(node){
-										var nodeSc = new NodeStatechartExecutionContext();
-										nodeSc.initialize();
-										nodeSc.init({rawNode:node});
-										hookUpDOMEvents(node,nodeSc);
-									}
-								}
-							}); 	
+													console.log("Compiling statecharts took:",new Date() - d);
+													//eval
+													for(var i=0, l=scArr.length; i < l; i++){
+														console.log(scArr[i]);
+														eval(scArr[i]);
+													}
+
+
+													//hook up toolbar behaviour
+													var toolbarSC = new ToolbarStatechartExecutionContext();
+													toolbarSC.initialize();
+													toolbarSC.init({
+														ellipseButton:ellipseButton,
+														rectButton:rectButton,
+														ellipseIcon:ellipseButtonIcon,
+														rectIcon:rectButtonIcon	
+													});
+													
+													hookUpDOMEvents(toolbar,toolbarSC);
+
+													//hook up canvas behaviour
+													var canvasSC = new CanvasStatechartExecutionContext(); 
+													canvasSC.initialize();
+													
+													//pass in reference to rect
+													canvasSC.init({	
+														svg:svg,
+														toolbarStatechart:toolbarSC,
+														api:{
+															transform:transform,
+															addBehaviourToNode:function(node){
+
+																var bbox = node.getBBox(); 
+
+																node.parentNode.removeChild(node);
+
+																//create scale and rotate handles
+																var g = document.createElementNS(svgNs,"g");
+
+																var scaleHandle = document.createElementNS(svgNS,"path")
+																scaleHandle.setAttributeNS(null,"d","M 0 0 L -4 6 L -2 6 L -2 12 L -4 12 L 0 18 L 4 12 L 2 12 L 2 6 L 4 6 L 0 0 z");
+																scaleHandle.setAttributeNS(null,"style","fill:#000;stroke:#000;")
+																scaleHandle.setAttributeNS(null,"transform","matrix(1,0,0,1,0,0)");
+																scaleHandle.setAttributeNS(null,"display","none");
+																rotate(scaleHandle,-45);
+																translate(scaleHandle,bbox.x+bbox.width,bbox.y+bbox.height);
+							
+																//set them as properties
+																g.scaleHandle = scaleHandle;
 
-							hookUpDOMEvents(svg,canvasSC);
+																
 
-						},transform);
-					})
-				}
-			);
+
+																//add behaviour
+																var nodeSc = new NodeStatechartExecutionContext();
+																nodeSc.initialize();
+																nodeSc.init({rawNode:node});
+																hookUpDOMEvents(node,nodeSc);
+
+															}
+														}
+													}); 	
+
+													hookUpDOMEvents(svg,canvasSC);
+
+												},transform);
+											}
+										})
+									}
+								});
+							});
+					});
+				})
 		</script>
+
+	</head>
+	<body>
+		<div id="toolbarDiv"></div>
 	</body>
 </html>