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 19:01:37 UTC
svn commit: r958638 - in
/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop:
./ drag-and-drop.xhtml
Author: jbeard
Date: Mon Jun 28 17:01:36 2010
New Revision: 958638
URL: http://svn.apache.org/viewvc?rev=958638&view=rev
Log:
Created new demo that illustrates drag-and-drop behaviour with SCXML. Doesn't work yet.
Added:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml (with props)
Added: 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=958638&view=auto
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml (added)
+++ commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml Mon Jun 28 17:01:36 2010
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
+ <head>
+ <style type="text/css">
+ body {
+ height:100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ div{
+ width:100%;
+ height:100%;
+ }
+ </style>
+ <script src="../../lib/js/requirejs/require.js" type="text/javascript"/>
+ </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">
+
+ <scxml
+ xmlns="http://www.w3.org/2005/07/scxml"
+ version="1.0"
+ profile="ecmascript"
+ id="scxmlRoot">
+
+ <script>
+ function computeTDelta(oldEvent,newEvent){
+ //summary:computes the offset between two events; to be later used with this.translate
+ var dx = newEvent.localX - oldEvent.localX;
+ var dy = newEvent.localY - oldEvent.localY;
+
+ return {'dx':dx,'dy':dy};
+ }
+
+ function translate(rawNode,tDelta){
+ var tl = rawNode.transform.baseVal;
+ var t = tl.numberOfItems ? tl.getItem(0) : canvas.createSVGTransform();
+ var m = t.matrix;
+ var newM = identity.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="default">
+ <transition event="init">
+ <assign location="rectToTranslate" expr="_event.data.rectToTranslate"/>
+ </transition>
+ </state>
+
+ <state id="idle">
+ <transition event="mousedown">
+ <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>
+ <script>
+ var resultText;
+
+ require(
+ {
+ "baseUrl":"/"
+ },
+ ["src/javascript/scxml/cgf/SCXMLCompiler"],
+
+ function(compiler){
+
+ //pull UI controls from DOM
+ var scxml_input = document.getElementById("scxmlRoot");
+ var rect = document.getElementById("rectToTranslate");
+
+ var compiledStatechartConstructor, compiledStatechartInstance;
+
+ compiler.compile({
+ inFiles:[scxml_input],
+ backend:"state",
+ beautify:true,
+ verbose:false,
+ log:true,
+ 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);
+ });
+ });
+ }
+ );
+ </script>
+ </body>
+</html>
+
+
Propchange: commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
------------------------------------------------------------------------------
svn:eol-style = native