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 22:50:12 UTC
svn commit: r958721 -
/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
Author: jbeard
Date: Mon Jun 28 20:50:12 2010
New Revision: 958721
URL: http://svn.apache.org/viewvc?rev=958721&view=rev
Log:
Tweaked demo again.
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=958721&r1=958720&r2=958721&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 20:50:12 2010
@@ -15,6 +15,18 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
+<!--
+This demo illustrates mixing HTML, SVG, and SCXML content in a single compound
+XML document.
+
+It also illustrates a fairly general technique, which would
+allow authoring of SVG content with inline, declarative behavioural descriptions
+using SCXML:
+* the document is searched for scxml elements
+* it compiles them locally to JavaScript, and then hooks up event listeners on the parent DOM node,
+ so that DOM events are sent to the state machine for processing
+* the state machine is able to manipulate the DOM directly through executable content nodes
+-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
@@ -43,8 +55,6 @@
<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;
@@ -52,7 +62,6 @@
}
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;
@@ -67,12 +76,12 @@
<data id="firstEvent"/>
<data id="eventStamp"/>
<data id="tDelta"/>
- <data id="rectToTranslate"/>
+ <data id="rawNode"/>
</datamodel>
<state id="initial_default">
<transition event="init" target="idle">
- <assign location="rectToTranslate" expr="_event.data.rectToTranslate"/>
+ <assign location="rawNode" expr="_event.data.rawNode"/>
</transition>
</state>
@@ -89,7 +98,7 @@
<transition event="mousemove" target="dragging">
<assign location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
<script>
- translate(rectToTranslate,tDelta);
+ translate(rawNode,tDelta);
</script>
<assign location="eventStamp" expr="_event.data"/>
</transition>
@@ -98,7 +107,8 @@
</scxml>
</rect>
</svg>
- <script>
+ <div id="statusDiv" style="position:absolute;bottom:0px;right:0px;"/>
+ <script><![CDATA[
var resultText;
require(
@@ -109,49 +119,58 @@
function(compiler){
- //pull UI controls from DOM
- var rect = document.getElementById("rectToTranslate");
- var scxml_input = rect.children[0];
-
- //prep scxml document to transform by pulling the scxml node into its own document
- var scxmlns = "http://www.w3.org/2005/07/scxml";
- var scxmlToTransform = document.implementation.createDocument (scxmlns , "scxml", null);
- var newNode = scxmlToTransform.importNode(scxml_input.cloneNode(true),true);
- scxmlToTransform.replaceChild(newNode,scxmlToTransform.documentElement);
-
- var compiledStatechartConstructor, compiledStatechartInstance;
-
- compiler.compile({
- inFiles:[scxmlToTransform],
- //debug:true,
- backend:"state",
- beautify:true,
- verbose:false,
- log:false,
- ie:false
- }, function(scArr){
- var transformedJs = scArr[0];
-
- //eval
- console.log(transformedJs);
- eval(transformedJs);
- compiledStatechartConstructor = StatechartExecutionContext;
- compiledStatechartInstance = new compiledStatechartConstructor();
-
- //initialize
- compiledStatechartInstance.initialize();
-
- //pass in reference to rect
- compiledStatechartInstance.init({rectToTranslate:rect});
-
- //hook up DOM events
- ["mousedown","mouseup","mousemove"].forEach(function(eventName){
- rect.addEventListener(eventName,compiledStatechartInstance[eventName],false);
+ var statusDiv = document.getElementById("statusDiv");
+
+ statusDiv.textContent="Compiling SCXML elements...";
+
+ //pull SCXML nodes from DOM
+ var scxmlElements = document.getElementsByTagName("scxml");
+ for(var i = 0; i < scxmlElements.length; i++){
+ var scxml_input = scxmlElements[i];
+ var domNodeToHookUp = scxml_input.parentNode;
+
+ //prep scxml document to transform by pulling the scxml node into its own document
+ var scxmlns = "http://www.w3.org/2005/07/scxml";
+ var scxmlToTransform = document.implementation.createDocument (scxmlns , "scxml", null);
+ var newNode = scxmlToTransform.importNode(scxml_input.cloneNode(true),true);
+ scxmlToTransform.replaceChild(newNode,scxmlToTransform.documentElement);
+
+ var compiledStatechartConstructor, compiledStatechartInstance;
+
+ compiler.compile({
+ inFiles:[scxmlToTransform],
+ //debug:true,
+ backend:"state",
+ beautify:true,
+ verbose:false,
+ log:false,
+ ie:false
+ }, function(scArr){
+ var transformedJs = scArr[0];
+
+ //eval
+ console.log(transformedJs);
+ eval(transformedJs);
+ compiledStatechartConstructor = StatechartExecutionContext;
+ compiledStatechartInstance = new compiledStatechartConstructor();
+
+ //initialize
+ compiledStatechartInstance.initialize();
+
+ //pass in reference to rect
+ compiledStatechartInstance.init({rawNode:domNodeToHookUp});
+
+ //hook up DOM events
+ ["mousedown","mouseup","mousemove"].forEach(function(eventName){
+ domNodeToHookUp.addEventListener(eventName,compiledStatechartInstance[eventName],false);
+ });
});
- });
+ }
+
+ statusDiv.textContent+=" Done!";
}
);
- </script>
+ ]]></script>
</body>
</html>