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 23:16:13 UTC
svn commit: r958744 - in
/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop:
drag-and-drop2.xhtml drag-and-drop2.xml
Author: jbeard
Date: Mon Jun 28 21:16:11 2010
New Revision: 958744
URL: http://svn.apache.org/viewvc?rev=958744&view=rev
Log:
Created a second demo to illustrate the use of statechart API for dynamically creating DOM elements with behaviour.
Added:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml
- copied, changed from r958721, commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml (with props)
Copied: commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml (from r958721, 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-drop2.xhtml?p2=commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml&p1=commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml&r1=958721&r2=958744&rev=958744&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-drop2.xhtml Mon Jun 28 21:16:11 2010
@@ -16,16 +16,11 @@
* 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
+This demo is like drag-and-drop.xhtml demo, except that it illustrates how one
+may create state machines and DOM elements dynamically and procedurally, as
+opposed to declaratively, as was done in the previous example. In this example,
+each dynamically-created element will have its own state machine, hence its
+own state.
-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
@@ -42,71 +37,8 @@ using SCXML:
<script src="../../lib/js/requirejs/require/xml.js" type="text/javascript"></script>
</head>
<body>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="99%" >
-
- <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
- var dx = newEvent.clientX - oldEvent.clientX;
- var dy = newEvent.clientY - oldEvent.clientY;
-
- return {'dx':dx,'dy':dy};
- }
-
- function translate(rawNode,tDelta){
- 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="rawNode"/>
- </datamodel>
-
- <state id="initial_default">
- <transition event="init" target="idle">
- <assign location="rawNode" expr="_event.data.rawNode"/>
- </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(rawNode,tDelta);
- </script>
- <assign location="eventStamp" expr="_event.data"/>
- </transition>
- </state>
-
- </scxml>
- </rect>
- </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="99%" id="canvas"/>
+ <button id="elementButton" style="position:absolute;bottom:0px;left:0px;">Make draggable SVG Element</button>
<div id="statusDiv" style="position:absolute;bottom:0px;right:0px;"/>
<script><![CDATA[
var resultText;
@@ -115,59 +47,77 @@ using SCXML:
{
"baseUrl":"/"
},
- ["src/javascript/scxml/cgf/SCXMLCompiler"],
+ ["src/javascript/scxml/cgf/SCXMLCompiler",
+ "xml!demo/drag-and-drop/drag-and-drop2.xml"],
- function(compiler){
+ function(compiler,scxml_input){
+
+ var SVG_NS = "http://www.w3.org/2000/svg";
var statusDiv = document.getElementById("statusDiv");
+ var elementButton = document.getElementById("elementButton");
+ var svgCanvas = document.getElementById("canvas");
- statusDiv.textContent="Compiling SCXML elements...";
+ statusDiv.textContent="Compiling SCXML...";
- //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);
- });
- });
- }
+ var compiledStatechartConstructor;
+
+ //compile statechart
+ compiler.compile({
+ inFiles:[scxml_input],
+ //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;
+ });
statusDiv.textContent+=" Done!";
+
+ //just for fun, random color generator, courtesy of http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
+ function get_random_color() {
+ var letters = '0123456789ABCDEF'.split('');
+ var color = '#';
+ for (var i = 0; i < 6; i++ ) {
+ color += letters[Math.round(Math.random() * 15)];
+ }
+ return color;
+ }
+
+ //hook up button UI control
+ elementButton.addEventListener("click",function(e){
+
+ //do DOM stuff- create new blue circle
+ var newNode = document.createElementNS(SVG_NS,"circle");
+ newNode.setAttributeNS(null,"cx",50);
+ newNode.setAttributeNS(null,"cy",50);
+ newNode.setAttributeNS(null,"r",50);
+ newNode.setAttributeNS(null,"fill",get_random_color());
+ newNode.setAttributeNS(null,"stroke","black");
+
+ var compiledStatechartInstance = new compiledStatechartConstructor();
+
+ //initialize
+ compiledStatechartInstance.initialize();
+
+ //pass in reference to rect
+ compiledStatechartInstance.init({rawNode:newNode});
+
+ //hook up DOM events
+ ["mousedown","mouseup","mousemove"].forEach(function(eventName){
+ newNode.addEventListener(eventName,compiledStatechartInstance[eventName],false);
+ });
+
+ svgCanvas.appendChild(newNode);
+ },false);
}
);
]]></script>
Added: commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml?rev=958744&view=auto
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml (added)
+++ commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml Mon Jun 28 21:16:11 2010
@@ -0,0 +1,60 @@
+<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
+ var dx = newEvent.clientX - oldEvent.clientX;
+ var dy = newEvent.clientY - oldEvent.clientY;
+
+ return {'dx':dx,'dy':dy};
+ }
+
+ function translate(rawNode,tDelta){
+ 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="rawNode"/>
+ </datamodel>
+
+ <state id="initial_default">
+ <transition event="init" target="idle">
+ <assign location="rawNode" expr="_event.data.rawNode"/>
+ </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(rawNode,tDelta);
+ </script>
+ <assign location="eventStamp" expr="_event.data"/>
+ </transition>
+ </state>
+
+</scxml>
Propchange: commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
------------------------------------------------------------------------------
svn:eol-style = native