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:16 UTC
svn commit: r984023 - in
/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool:
behaviour/canvas.xml behaviour/node.xml drawing-tool.html
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>