commons-commits mailing list archives

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

URL: http://svn.apache.org/viewvc?rev=984024&view=rev
Log:
Drawing tool demo now working again after adding in jquery-svg API.

Added:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/transform.js   (with props)
Modified:
    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/node.xml
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/node.xml?rev=984024&r1=984023&r2=984024&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:25 2010
@@ -22,11 +22,13 @@
 		<data id="eventStamp"/>
 		<data id="tDelta"/>
 		<data id="rawNode"/>
+		<data id="transformModule"/>
 	</datamodel>
 
 	<state id="initial_default">
 		<transition event="init" target="idle">
 			<assign location="rawNode" expr="_event.data.rawNode"/>
+			<assign location="transformModule" expr="_event.data.transformModule"/>
 		</transition>
 	</state>
 
@@ -48,7 +50,7 @@
 		<transition event="mousemove" target="dragging">
 			<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
 			<script>
-				translate(rawNode,tDelta);
+				transformModule.translate(rawNode,tDelta);
 			</script>
 			<assign location="eventStamp" expr="_event.data"/>
 		</transition>

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=984024&r1=984023&r2=984024&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:25 2010
@@ -49,7 +49,12 @@
 		<script src="../../lib/js/requirejs/require/text.js" type="text/javascript"></script>
 		<script src="../../lib/js/requirejs/require/xml.js" type="text/javascript"></script>
 
+		<script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
+		<script src="lib/jquery.svg.js" type="text/javascript"></script>
+		<script src="lib/jquery.svgdom.js" type="text/javascript"></script>
+
 		<script>
+			$(document).ready(function(){
 
 				//hook up minimal console api
 				if(typeof console == "undefined"){
@@ -61,165 +66,145 @@
 				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",
-						"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"
-												});
+				$("#toolbarDiv").svg({
+					onLoad:function(toolbar){
+						$(toolbar.root()).attr({
+							"width":"100px",
+							"height":"50px"
+						});
+
+						$(document.body).svg({
+							onLoad:function(svg){
+
+								$(svg.root()).attr({
+									"width":"100%",
+									"height":"100%"
+								});
 
-												var rectButtonBackground = svg.rect(rectButton,0,0,50,50,{ 
-													class:"background"
-												});
+								var toolbarOutlineRect = toolbar.rect(0,0,100,50,{
+									fill:"white", 
+									stroke:"black"
+								}) ;
+								
+								var rectButton = toolbar.group();
+								var rectButtonBackground = toolbar.rect(rectButton,0,0,50,50,{ 
+									class:"background"
+								});
+								var rectButtonIcon = toolbar.rect(rectButton,10,10,30,30,{ 
+									fill:"red", 
+									stroke:"black"
+								});
 
-												var ellipseButton = svg.group({"transform":"translate(50,0)"});
-												var ellipseButtonIcon = svg.circle(ellipseButton,25,25,15,{
-													fill:"blue",
-													stroke:"black"
-												});
+								var ellipseButton = toolbar.group({"transform":"translate(50,0)"});
 
-												var ellipseButtonBackground = svg.rect(ellipseButton,0,0,50,50,{
-													class:"background"
-												});
+								var ellipseButtonBackground = toolbar.rect(ellipseButton,0,0,50,50,{
+									class:"background"
+								});
 
+								var ellipseButtonIcon = toolbar.circle(ellipseButton,25,25,15,{
+									fill:"blue",
+									stroke:"black"
+								});
 
-												//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){
-							
-													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]);
-													}
 
+								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",
+										"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" ],
+
+									function(compiler,svgTransformer,canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML){
+
+										require( [window.DOMParser ?
+												"src/javascript/scxml/cgf/util/xsl/browser" :
+												"src/javascript/scxml/cgf/util/xsl/ie"],
+											function(xslTransformer){
 
-													//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;
-
-																
+											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.root(),toolbarSC);
 
-																//add behaviour
-																var nodeSc = new NodeStatechartExecutionContext();
-																nodeSc.initialize();
-																nodeSc.init({rawNode:node});
-																hookUpDOMEvents(node,nodeSc);
-
-															}
+												//hook up canvas behaviour
+												var canvasSC = new CanvasStatechartExecutionContext(); 
+												canvasSC.initialize();
+												
+												//pass in reference to rect
+												canvasSC.init({	
+													svg:svg,
+													toolbarStatechart:toolbarSC,
+													api:{
+														addBehaviourToNode:function(node){
+															//add behaviour
+															var nodeSc = new NodeStatechartExecutionContext();
+															nodeSc.initialize();
+															nodeSc.init({
+																rawNode:node,
+																transformModule:svgTransformer
+															});
+															hookUpDOMEvents(node,nodeSc);
 														}
-													}); 	
+													}
+												}); 	
 
-													hookUpDOMEvents(svg,canvasSC);
+												hookUpDOMEvents(svg.root(),canvasSC);
 
-												},transform);
-											}
+											},xslTransformer);
 										})
 									}
-								});
-							});
-					});
-				})
-		</script>
+								);
+							}	
+						})
+					}
+				});
 
+				//build up the DOM
+			});
+		</script>
 	</head>
 	<body>
 		<div id="toolbarDiv"></div>

Added: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/transform.js
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/transform.js?rev=984024&view=auto
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/transform.js (added)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/transform.js Tue Aug 10 14:18:25
2010
@@ -0,0 +1,118 @@
+require.def("demo/drawing-tool/transform",
+function(){
+	function getBoundingBoxInArbitrarySpace (element,mat){
+		var svgRoot = element.ownerSVGElement;
+		var bbox = element.getBBox();
+
+		var cPt1 =  svgRoot.createSVGPoint();
+		cPt1.x = bbox.x;
+		cPt1.y = bbox.y;
+		cPt1 = cPt1.matrixTransform(mat);
+			
+		// repeat for other corner points and the new bbox is
+		// simply the minX/minY  to maxX/maxY of the four points.
+		var cPt2 = svgRoot.createSVGPoint();
+		cPt2.x = bbox.x + bbox.width;
+		cPt2.y = bbox.y;
+		cPt2 = cPt2.matrixTransform(mat);
+		
+		var cPt3 = svgRoot.createSVGPoint();
+		cPt3.x = bbox.x;
+		cPt3.y = bbox.y + bbox.height;
+		cPt3 = cPt3.matrixTransform(mat);
+
+		var cPt4 = svgRoot.createSVGPoint();
+		cPt4.x = bbox.x + bbox.width;
+		cPt4.y = bbox.y + bbox.height;
+		cPt4 = cPt4.matrixTransform(mat);
+		
+		var points = [cPt1,cPt2,cPt3,cPt4]
+		
+		//find minX,minY,maxX,maxY
+		var minX=1000000000000
+		var minY=1000000000000
+		var maxX=0
+		var maxY=0
+		for(i=0;i<points.length;i++)
+		{
+			if (points[i].x < minX)
+			{
+				minX = points[i].x
+			}
+			if (points[i].y < minY)
+			{
+				minY = points[i].y
+			}
+			if (points[i].x > maxX)
+			{
+				maxX = points[i].x
+			}
+			if (points[i].y > maxY)
+			{
+				maxY = points[i].y
+			}
+		}
+
+		//instantiate new object that is like an SVGRect
+		var newBBox = {"x":minX,"y":minY,"width":maxX-minX,"height":maxY-minY}
+		return newBBox;	
+	}	
+
+	function getBoundingBoxInCanvasCoordinates (rawNode){
+		return getBoundingBoxInArbitrarySpace(rawNode,rawNode.ownerSVGElement);
+	}
+
+	function radiansToDegrees(r){
+		return r*180/Math.PI;
+	}
+
+	return {
+		translate : function(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;
+		},
+
+		rotate : function (rawNode,d,cx,cy){
+			//rawNode : isa csGraphObj || SVGElement
+			cx = cx || 0;
+			cy = cy || 0;
+
+			var tl = rawNode.transform.baseVal;
+			var t = tl.numberOfItems ? tl.getItem(0) : rawNode.ownerSVGElement.createSVGTransform();
+			var m = t.matrix;
+			//console.log(d);
+			//console.log(cx);
+			//console.log(cy);
+			var newM = rawNode.ownerSVGElement.createSVGMatrix().translate(cx,cy).rotate(d).translate(-cx,-cy).multiply(m);
+			t.setMatrix(newM);
+			tl.initialize(t);
+			return newM;
+		},
+
+		rotateRadians : function (rawNode,radians,cx,cy){
+			this.rotate(rawNode,raidansToDegrees(radians),cx,cy);
+		},
+
+		scale : function (rawNode,e1,e2){
+			//rawNode : isa csGraphObj || SVGElement
+			var tl = rawNode.transform.baseVal;
+			var t = tl.numberOfItems ? tl.getItem(0) : rawNode.ownerSVGElement.createSVGTransform();
+			var m = t.matrix;
+
+			var pt1 = {x:e1.localX,y:e1.localY},pt2 = {x:e2.localX,y:e2.localY}
+			var bbox = rawNode.cachedBBox || getBoundingBoxInCanvasCoordinates(csGraphObj);
+			var scaleTransform = _computeScaleTransform(pt1,pt2,bbox);
+
+			var newM = scaleTransform.multiply(m);
+			t.setMatrix(newM);
+			tl.initialize(t);
+			return newM;
+		}
+	}
+}
+)

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



Mime
View raw message