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/06/28 20:57:28 UTC
svn commit: r958680 -
/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
Author: jbeard
Date: Mon Jun 28 18:57:28 2010
New Revision: 958680
URL: http://svn.apache.org/viewvc?rev=958680&view=rev
Log:
Fixed the styling issues.
Modified:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
Modified: commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml?rev=958680&r1=958679&r2=958680&view=diff
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml (original)
+++ commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml Mon Jun 28 18:57:28 2010
@@ -24,89 +24,80 @@
margin: 0;
padding: 0;
}
-
- div{
- width:100%;
- min-height:100%;
- }
</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="svgContainer">
-
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
-
- <rect width="100" height="100" stroke="black" fill="red" id="rectToTranslate" >
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="99%" >
- <scxml
- xmlns="http://www.w3.org/2005/07/scxml"
- version="1.0"
- profile="ecmascript"
- id="scxmlRoot"
- initial="initial_default">
-
- <script>
- function computeTDelta(oldEvent,newEvent){
- //summary:computes the offset between two events; to be later used with this.translate
- //console.log(oldEvent);
- //console.log(newEvent);
- var dx = newEvent.clientX - oldEvent.clientX;
- var dy = newEvent.clientY - oldEvent.clientY;
-
- return {'dx':dx,'dy':dy};
- }
-
- function translate(rawNode,tDelta){
- //console.log("dx: %d,dy: %d",tDelta.dx,tDelta.dy);
- 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>
-
- <datamodel>
- <data id="firstEvent"/>
- <data id="eventStamp"/>
- <data id="tDelta"/>
- <data id="rectToTranslate"/>
- </datamodel>
-
- <state id="initial_default">
- <transition event="init" target="idle">
- <assign location="rectToTranslate" expr="_event.data.rectToTranslate"/>
- </transition>
- </state>
-
- <state id="idle">
- <transition event="mousedown" target="dragging">
- <assign location="firstEvent" expr="_event.data"/>
- <assign location="eventStamp" expr="_event.data"/>
- </transition>
- </state>
-
- <state id="dragging">
- <transition event="mouseup" target="idle"/>
-
- <transition event="mousemove" target="dragging">
- <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
- <script>
- translate(rectToTranslate,tDelta);
- </script>
- <assign location="eventStamp" expr="_event.data"/>
- </transition>
- </state>
-
- </scxml>
- </rect>
- </svg>
- </div>
+ <rect width="100" height="100" stroke="black" fill="red" id="rectToTranslate" >
+ <scxml
+ xmlns="http://www.w3.org/2005/07/scxml"
+ version="1.0"
+ profile="ecmascript"
+ id="scxmlRoot"
+ initial="initial_default">
+
+ <script>
+ function computeTDelta(oldEvent,newEvent){
+ //summary:computes the offset between two events; to be later used with this.translate
+ //console.log(oldEvent);
+ //console.log(newEvent);
+ var dx = newEvent.clientX - oldEvent.clientX;
+ var dy = newEvent.clientY - oldEvent.clientY;
+
+ return {'dx':dx,'dy':dy};
+ }
+
+ function translate(rawNode,tDelta){
+ //console.log("dx: %d,dy: %d",tDelta.dx,tDelta.dy);
+ 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>
+
+ <datamodel>
+ <data id="firstEvent"/>
+ <data id="eventStamp"/>
+ <data id="tDelta"/>
+ <data id="rectToTranslate"/>
+ </datamodel>
+
+ <state id="initial_default">
+ <transition event="init" target="idle">
+ <assign location="rectToTranslate" expr="_event.data.rectToTranslate"/>
+ </transition>
+ </state>
+
+ <state id="idle">
+ <transition event="mousedown" target="dragging">
+ <assign location="firstEvent" expr="_event.data"/>
+ <assign location="eventStamp" expr="_event.data"/>
+ </transition>
+ </state>
+
+ <state id="dragging">
+ <transition event="mouseup" target="idle"/>
+
+ <transition event="mousemove" target="dragging">
+ <assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
+ <script>
+ translate(rectToTranslate,tDelta);
+ </script>
+ <assign location="eventStamp" expr="_event.data"/>
+ </transition>
+ </state>
+
+ </scxml>
+ </rect>
+ </svg>
<script>
var resultText;