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:19:28 UTC
svn commit: r984031 - in /commons/sandbox/gsoc/2010/scxml-js/trunk:
demo/drawing-tool/behaviour/canvas.xml demo/drawing-tool/drawing-tool.html
src/xslt/ir-compiler/computeLCA.xsl
Author: jbeard
Date: Tue Aug 10 14:19:27 2010
New Revision: 984031
URL: http://svn.apache.org/viewvc?rev=984031&view=rev
Log:
Updated canvas behaviour and drawing tool.
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/xslt/ir-compiler/computeLCA.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=984031&r1=984030&r2=984031&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:19:27 2010
@@ -180,74 +180,28 @@ In both:
return angle;
}
- function applyTransformToBBox(bbox,matrix){
- //takes a bbox and a matrix and returns the bbox with the matrix applied to all points
- var nwX = bbox.x;
- var nwY = bbox.y;
- var neX = nwX + bbox.width;
- var neY = nwY;
- var swX = nwX;
- var swY = nwX + bbox.height;
- var seX = neX;
- var seY = swY;
-
- var nw = canvas.createSVGPoint();
- nw.x = nwX;
- nw.y + nwY;
-
- var ne = canvas.createSVGPoint();
- ne.x = neX;
- ne.y = neY;
-
- var sw = canvas.createSVGPoint();
- sw.x = swX;
- sw.y = swY;
-
- var se = canvas.createSVGPoint();
- se.x = seX;
- se.y = seY;
-
- nw = nw.matrixTransform(matrix);
- ne = ne.matrixTransform(matrix);
- sw = sw.matrixTransform(matrix);
- se = se.matrixTransform(matrix);
-
- var newWidth = Math.abs(ne.x - nw.x);
- var newHeight = Math.abs(se.y - ne.y);
-
- return {x:nw.x,y:nw.y,width:newWidth,height:newHeight}
- }
-
- function applyLeftTransform(canvas,transformMatrix){
- var t = canvas.transform.baseVal.getItem(0);
- var m = t.matrix;
- var newM = transformMatrix.multiply(m); //note the left transform, pre-muliplication here
- t.setMatrix(newM);
- return t;
- }
-
- function applyLeftTransformFromNodeToOtherNode(fromNode,toNode){
- var t = fromNode.transform.baseVal.getItem(0);
- var m = t.matrix;
- return applyLeftTransform(toNode,m);
- }
-
]]></script>
<datamodel>
<!-- these get passed in on initiation -->
<data id="svg"/>
- <data id="toolbarStatechart"/>
- <data id="scaleButtonHandle"/>
- <data id="rotationButtonHandle"/>
- <data id="canvas"/>
<data id="transformModule"/>
<data id="scaleHandle"/>
<data id="rotationHandle"/>
+ <!-- toolbar stuff -->
+ <data id="ellipseButton"/>
+ <data id="ellipseIcon"/>
+ <data id="rectButton"/>
+ <data id="rectIcon"/>
+ <data id="transformButton"/>
+ <data id="transformIcon"/>
+
+ <!-- constant expression -->
<data id="svgNs" expr="'http://www.w3.org/2000/svg'"/>
+ <!-- dynamically changing data -->
<data id="selectedNodes" expr="[]"/>
<data id="nodesOnCanvas" expr="[]"/>
@@ -256,9 +210,16 @@ In both:
<state id="initial_default">
<transition event="init" target="main">
<assign location="svg" expr="_event.data.svg"/>
- <assign location="toolbarStatechart" expr="_event.data.toolbarStatechart"/>
- <assign location="scaleButtonHandle" expr="_event.data.scaleButtonHandle"/>
- <assign location="rotationButtonHandle" expr="_event.data.rotationButtonHandle"/>
+ <assign location="transformModule" expr="_event.data.transformModule"/>
+ <assign location="scaleHandle" expr="_event.data.scaleHandle"/>
+ <assign location="rotationHandle" expr="_event.data.rotationHandle"/>
+
+ <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"/>
+ <assign location="transformButton" expr="_event.data.transformButton"/>
+ <assign location="transformIcon" expr="_event.data.transformIcon"/>
</transition>
</state>
@@ -268,6 +229,17 @@ In both:
<state id="presentation_state">
<state id="transform_tool_selected">
+ <onentry>
+ <script>
+ $(transformButton).addClass("selected");
+ </script>
+ </onentry>
+ <onexit>
+ <script>
+ $(transformButton).removeClass("selected");
+ </script>
+ </onexit>
+
<initial id="transform_tool_selected_initial">
<transition target="no_nodes_selected" cond="selectedNodes.length === 0"/>
@@ -317,17 +289,39 @@ In both:
</state>
- <transition target="circle_tool_selected" event="mousedown" cond="_event.data.target === rotationButtonHandle"/>
+ <transition target="ellipse_tool_selected" event="mousedown" cond="_event.data.target === rotationButtonHandle"/>
<transition target="rect_tool_selected" event="mousedown" cond="_event.data.target === scaleButtonHandle"/>
</state>
<state id="drawing_tool_selected">
- <state id="circle_tool_selected">
+ <state id="ellipse_tool_selected">
+ <onentry>
+ <script>
+ $(ellipseButton).addClass("selected");
+ </script>
+ </onentry>
+ <onexit>
+ <script>
+ $(ellipseButton).removeClass("selected");
+ </script>
+ </onexit>
+
<transition target="rect_tool_selected" event="mousedown" cond="_event.data.target === scaleButtonHandle"/>
</state>
<state id="rect_tool_selected">
- <transition target="circle_tool_selected" event="mousedown" cond="_event.data.target === rotationButtonHandle"/>
+ <onentry>
+ <script>
+ $(rectButton).addClass("selected");
+ </script>
+ </onentry>
+ <onexit>
+ <script>
+ $(rectButton).removeClass("selected");
+ </script>
+ </onexit>
+
+ <transition target="ellipse_tool_selected" event="mousedown" cond="_event.data.target === rotationButtonHandle"/>
</state>
<!-- TODO: add reference to transform button handle -->
@@ -372,7 +366,7 @@ In both:
cond="allNodes.indexOf(_event.data.target) !== -1
&& _event.data.shiftKey"/>
- <transition target="after_mousedown_on_canvas" event="mousedown" cond="_event.data.target === canvas"/>
+ <transition target="after_mousedown_on_canvas" event="mousedown" cond="_event.data.target === svg.root()"/>
<transition target="rotating" event="mousedown"
cond="_event.data.target === rotationHandle
@@ -475,14 +469,13 @@ In both:
<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
<assign location="nodeBeingDrawn" expr="svg.rect(_event.data.clientX,_event.data.clientY,1,1,{'fill':'red','stroke':'black'})"/>
</transition>
- <transition target="drawing_circle" event="mousemove" cond="In(circle_tool_selected)">
+ <transition target="drawing_ellipse" event="mousemove" cond="In(ellipse_tool_selected)">
<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
<assign location="nodeBeingDrawn" expr="svg.ellipse(_event.data.clientX,_event.data.clientY,1,1,{'fill':'blue','stroke':'black'})"/>
</transition>
</state>
- <!-- TODO: add dragging behaviour with the tdeltas and stuff -->
<state id="dragging">
<transition target="dragging" event="mousemove">
<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
@@ -495,7 +488,7 @@ In both:
}
]]></script>
</transition>
- <transition target="ready" event="ready">
+ <transition target="ready" event="mouseup">
<assign location="tDelta" expr="computeTDelta(firstEvent,eventStamp)"/>
<assign location="cachedCenterPoint" expr="getCenterPoint(selectedNodes)"/>
<assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
@@ -506,8 +499,6 @@ In both:
</transition>
</state>
- <!-- TODO: add rotation and scale code -->
- <!-- TODO: alter various scripts to use all nodes -->
<state id="rotating">
<transition target="ready" event="mouseup">
<assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
@@ -567,8 +558,8 @@ In both:
</state>
<state id="drawing">
- <state id="drawing_circle">
- <transition target="drawing_circle" event="mousemove">
+ <state id="drawing_ellipse">
+ <transition target="drawing_ellipse" event="mousemove">
<script>
updateCircle(nodeBeingDrawn,eventStamp,_event.data);
</script>
@@ -586,6 +577,7 @@ In both:
<transition target="ready" event="mouseup">
<script>
+ nodesOnCanvas.push(nodeBeingDrawn);
selectedNodes.push(nodeBeingDrawn);
$(nodeBeingDrawn).addClass("selected");
</script>
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=984031&r1=984030&r2=984031&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:19:27 2010
@@ -69,7 +69,7 @@
$("#toolbarDiv").svg({
onLoad:function(toolbar){
$(toolbar.root()).attr({
- "width":"100px",
+ "width":"150px",
"height":"50px"
});
@@ -81,12 +81,24 @@
"height":"100%"
});
- var toolbarOutlineRect = toolbar.rect(0,0,100,50,{
+ var toolbarOutlineRect = toolbar.rect(0,0,150,50,{
fill:"white",
stroke:"black"
}) ;
+
+ var transformButton = toolbar.group();
+
+ var transformButtonBackground = toolbar.rect(transformButton,0,0,50,50,{
+ class:"background"
+ });
+
+ //TODO: make proper icon
+ var transformButtonIcon = toolbar.circle(transformButton,25,25,15,{
+ fill:"green",
+ stroke:"black"
+ });
- var rectButton = toolbar.group();
+ var rectButton = toolbar.group({"transform":"translate(50,0)"});
var rectButtonBackground = toolbar.rect(rectButton,0,0,50,50,{
class:"background"
});
@@ -95,7 +107,7 @@
stroke:"black"
});
- var ellipseButton = toolbar.group({"transform":"translate(50,0)"});
+ var ellipseButton = toolbar.group({"transform":"translate(100,0)"});
var ellipseButtonBackground = toolbar.rect(ellipseButton,0,0,50,50,{
class:"background"
@@ -130,11 +142,9 @@
},
["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" ],
+ "xml!demo/drawing-tool/behaviour/canvas.xml" ],
- function(compiler,svgTransformer,canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML){
+ function(compiler,svgTransformer,canvasBehaviourSCXML){
require( [window.DOMParser ?
"src/javascript/scxml/cgf/util/xsl/browser" :
@@ -145,7 +155,7 @@
var d = new Date();
compiler.compile({
- inFiles:[canvasBehaviourSCXML,nodeBehaviourSCXML,toolbarBehaviourSCXML],
+ inFiles:[canvasBehaviourSCXML],
//debug:true,
backend:"state",
beautify:true,
@@ -161,19 +171,6 @@
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);
-
//hook up canvas behaviour
var canvasSC = new CanvasStatechartExecutionContext();
@@ -184,29 +181,18 @@
//pass in reference to rect
canvasSC.init({
svg:svg,
- toolbarStatechart:toolbarSC,
scaleHandle:scaleHandle,
rotationHandle:rotationHandle,
- api:{
- addBehaviourToNode:function(node){
- //add behaviour
- var nodeSc = new NodeStatechartExecutionContext();
-
- node.statechart = nodeSc; //hook up dom node reference
-
- nodeSc.initialize();
- nodeSc.init({
- rawNode:node,
- transformModule:svgTransformer,
- scaleHandle:scaleHandle,
- rotationHandle:rotationHandle
- });
- hookUpDOMEvents(node,nodeSc);
- }
- }
+ ellipseButton:ellipseButton,
+ rectButton:rectButton,
+ transformButton:transformButton,
+ ellipseIcon:ellipseButtonIcon,
+ rectIcon:rectButtonIcon,
+ transformIcon:transformIcon
});
hookUpDOMEvents(svg.root(),canvasSC);
+ hookUpDOMEvents(toolbar.root(),canvasSC);
},xslTransformer);
})
Modified: commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/ir-compiler/computeLCA.xsl
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/ir-compiler/computeLCA.xsl?rev=984031&r1=984030&r2=984031&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/ir-compiler/computeLCA.xsl (original)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/src/xslt/ir-compiler/computeLCA.xsl Tue Aug 10 14:19:27 2010
@@ -124,6 +124,19 @@ to the input document as children in the
<xsl:variable name="firstTargetStateId" select="c:targets/c:target/c:targetState/text()[1]"/>
<xsl:variable name="firstTargetState" select="//*[(self::s:state or self::s:parallel or self::s:final or self::s:initial or self::s:scxml or self::s:history) and @id = $firstTargetStateId]"/>
+ <xsl:choose>
+ <xsl:when test="not($firstTargetStateId)">
+ <xsl:message terminate="yes">
+ Error compiling statechart: target state does not have id, for source state with id: <xsl:value-of select="$srcState/@id"/>
+ </xsl:message>
+ </xsl:when>
+ <xsl:when test="not($firstTargetState)">
+ <xsl:message terminate="yes">
+ Error compiling statechart: Could not find targe state with id <xsl:value-of select="$firstTargetStateId"/>
+ </xsl:message>
+ </xsl:when>
+ </xsl:choose>
+
<!-- compute the least common ancestor using the Kaysian method for intersection-->
<!-- http://stackoverflow.com/questions/538293/find-common-parent-using-xpath -->
<xsl:variable name="lca"