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:07 UTC
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/
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()"/>