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:18 UTC
svn commit: r984030 -
/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml
Author: jbeard
Date: Tue Aug 10 14:19:18 2010
New Revision: 984030
URL: http://svn.apache.org/viewvc?rev=984030&view=rev
Log:
Added executable content for performing transforms.
Modified:
commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/behaviour/canvas.xml
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=984030&r1=984029&r2=984030&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:18 2010
@@ -78,21 +78,59 @@ In both:
node.ry.baseVal.value = dyByTwo;
}
- function updateTransformHandles(rotationButtonHandle,scaleButtonHandle){
+ function updateTransformHandles(){
var sePtX = cachedBBox.width + cachedBBox.x;
var sePtY = cachedBBox.height + cachedBBox.y;
- var sScale = scaleButtonHandle.transform.baseVal.getItem(0);
+ var sScale = scaleHandle.transform.baseVal.getItem(0);
var newM = identity.translate(sePtX,sePtY);
sScale.setMatrix(newM);
- var rScale = rotationButtonHandle.transform.baseVal.getItem(0);
+ var rScale = rotationHandle.transform.baseVal.getItem(0);
var newM = identity.translate(sePtX,sePtY);
rScale.setMatrix(newM);
}
- function getCenterPoint(canvas){
- var bbox = canvas.getBBox();
+ function getAggregateBBox(nodes){
+
+ //get the aggregate of the bounding boxes of his children, or if he has no hier children, get his own bbox
+ var newBBox;
+ if(nodes.length){
+ var bboxes = $(nodes).map(function(e){
+ return e.visualObject.getBBoxInEntitySpace(boundingBoxGraphEntity.visualObject);
+ });
+
+ var newBBoxX0 = Math.min.apply(this,bboxes.map(function(bbox){ return bbox.x }))
+ var newBBoxY0 = Math.min.apply(this,bboxes.map(function(bbox){ return bbox.y }))
+ var newBBoxX1 = Math.max.apply(this,bboxes.map(function(bbox){return bbox.x+bbox.width}))
+ var newBBoxY1 = Math.max.apply(this,bboxes.map(function(bbox){ return bbox.y+bbox.height}))
+
+ var newBBoxWidth = newBBoxX1 - newBBoxX0
+ var newBBoxHeight = newBBoxY1 - newBBoxY0
+
+ newBBox = {
+ x : newBBoxX0,
+ y : newBBoxY0,
+ width : newBBoxWidth,
+ height : newBBoxHeight
+ };
+
+ }else{
+ newBBox = {
+ x : 0,
+ y : 0,
+ width : 0,
+ height : 0
+ }
+ }
+
+ return newBBox;
+
+ }
+
+ function getAggregateCenterPoint(nodes){
+ var bbox = getAggregateBBox(nodes);
+
var cPt = {
'x': bbox.x + (bbox.width / 2),
'y': bbox.y + (bbox.height / 2)
@@ -294,7 +332,7 @@ In both:
<!-- TODO: add reference to transform button handle -->
<transition target="transform_tool_selected" event="mousedown" cond="_event.data.target === transformButtonHandle"/>
- <state>
+ </state>
</state>
<state id="processing_events">
@@ -320,29 +358,29 @@ In both:
<transition target="after_mousedown_on_selected_nodes" event="mousedown"
cond="selectedNodes.indexOf(_event.data.target) !== -1
- && !_event.data.shiftKey"/>
+ && !_event.data.shiftKey"/>
<transition target="after_mousedown_with_shift_key_on_selected_nodes" event="mousedown"
cond="selectedNodes.indexOf(_event.data.target) !== -1
- && _event.data.shiftKey"/>
+ && _event.data.shiftKey"/>
<transition target="after_mousedown_on_nonselected_nodes" event="mousedown"
cond="allNodes.indexOf(_event.data.target) !== -1
- && !_event.data.shiftKey"/>
+ && !_event.data.shiftKey"/>
<transition target="after_mousedown_with_shift_key_on_nonselected_nodes" event="mousedown"
cond="allNodes.indexOf(_event.data.target) !== -1
- && _event.data.shiftKey"/>
+ && _event.data.shiftKey"/>
<transition target="after_mousedown_on_canvas" event="mousedown" cond="_event.data.target === canvas"/>
<transition target="rotating" event="mousedown"
cond="_event.data.target === rotationHandle
- && In(ready_to_rotate)"/>
+ && In(ready_to_rotate)"/>
<transition target="scaling" event="mousedown"
cond="_event.data.target === rotationHandle
- && In(ready_to_scale)"/>
+ && In(ready_to_scale)"/>
</state>
<state id="after_mousedown" initial="after_mousedown_on_selected_nodes">
@@ -356,6 +394,7 @@ In both:
<transition target="dragging" event="mousemove" cond="In(transform_tool_selected)">
<!-- TODO: add dragging behaviour -->
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
</transition>
</state>
@@ -370,7 +409,9 @@ In both:
</transition>
<!-- TODO: add marquee-drawing logic -->
- <transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+ <transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)">
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+ </transition>
</state>
@@ -391,6 +432,8 @@ In both:
<assign location="selectedNodes" expr="[clickedNode]"/>
<send event="NODES_SELECTED_WITH_DRAG"/>
<!-- TODO: add dragging logic -->
+
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
</transition>
</state>
@@ -407,7 +450,9 @@ In both:
</transition>
<!-- TODO: add marquee-drawing logic -->
- <transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+ <transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)">
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+ </transition>
</state>
@@ -420,36 +465,94 @@ In both:
<send event="CHECK_NODES"/>
</transition>
- <transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)"/>
+ <transition target="drawing_marquee" event="mousemove" cond="In(transform_tool_selected)">
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+ </transition>
</state>
<transition target="drawing_rect" event="mousemove" cond="In(rect_tool_selected)">
<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"})"/>
+ <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)">
<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"})"/>
+ <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"/>
+ <transition target="dragging" event="mousemove">
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+ <assign location="eventStamp" expr="_event.data"/>
+ <script><![CDATA[
+ for(var i=0,l=selectedNodes.length; i < l; i++){
+ var n = selectedNodes[i];
+
+ transformModule.translate(n,tDelta);
+ }
+ ]]></script>
+ </transition>
+ <transition target="ready" event="ready">
+ <assign location="tDelta" expr="computeTDelta(firstEvent,eventStamp)"/>
+ <assign location="cachedCenterPoint" expr="getCenterPoint(selectedNodes)"/>
+ <assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+ <!-- TODO -->
+ <script>
+ updateTransformHandles();
+ </script>
+ </transition>
</state>
-
<!-- TODO: add rotation and scale code -->
+ <!-- TODO: alter various scripts to use all nodes -->
<state id="rotating">
- <transition target="ready" event="mouseup"/>
- <transition target="rotating" event="mousemove"/>
+ <transition target="ready" event="mouseup">
+ <assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+ <script>
+ updateTransformHandles();
+ </script>
+ </transition>
+
+ <transition target="rotating" event="mousemove">
+ <assign target="rDelta" expr="computeRDelta(eventStamp,_event.data,cachedCenterPoint)"/>
+ <assign location="eventStamp" expr="_event.data"/>
+ <script><![CDATA[
+ for(var i=0,l=selectedNodes.length; i < l; i++){
+ var n = selectedNodes[i];
+
+ transformModule.rotate(n,rDelta,cachedCenterPoint.x,cachedCenterPoint.y);
+ }
+
+ transformModule.rotate(rotationHandle,rDelta,cachedCenterPoint.x,cachedCenterPoint.y);
+ ]]></script>
+ </transition>
</state>
<state id="scaling">
- <transition target="ready" event="mouseup"/>
- <transition target="scaling" event="mousemove"/>
+ <transition target="ready" event="mouseup">
+ <assign location="cachedCenterPoint" expr="getCenterPoint(selectedNodes)"/>
+ <assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+ <script>
+ updateTransformHandles();
+ </script>
+ </transition>
+ <transition target="scaling" event="mousemove">
+ <script><![CDATA[
+ for(var i=0,l=selectedNodes.length; i < l; i++){
+ var n = selectedNodes[i];
+
+ transformModule.scale(n,eventStamp,_event.data)
+ }
+ ]]></script>
+ <assign location="cachedBBox" expr="getAggregateBBox(selectedNodes)"/>
+ <assign location="eventStamp" expr="_event.data"/>
+ <script>
+ updateTransformHandles();
+ </script>
+ </transition>
</state>