You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@commons.apache.org by jb...@apache.org on 2010/08/10 16:18:26 UTC
svn commit: r984024 - in
/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool:
behaviour/node.xml drawing-tool.html transform.js
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