commons-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jbe...@apache.org
Subject svn commit: r958638 - in /commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop: ./ drag-and-drop.xhtml
Date Mon, 28 Jun 2010 17:01:37 GMT
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



Mime
View raw message