commons-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jbe...@apache.org
Subject svn commit: r985577 - /commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html
Date Sat, 14 Aug 2010 20:01:37 GMT
Author: jbeard
Date: Sat Aug 14 20:01:36 2010
New Revision: 985577

URL: http://svn.apache.org/viewvc?rev=985577&view=rev
Log:
Created drawing tool demo that is compiled in-browser, generates graphical representation
on the fly, and graphically simulates it.

Added:
    commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html
  (with props)

Added: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html
URL: http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html?rev=985577&view=auto
==============================================================================
--- commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html
(added)
+++ commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html
Sat Aug 14 20:01:36 2010
@@ -0,0 +1,357 @@
+<?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">
+      html, body {
+        height:100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      div#toolbarDiv {
+        position:absolute;
+        bottom:0px;
+        right:0px;
+      }
+
+
+      div#toolbarDiv > svg > g > rect.background {
+        fill : none;
+        stroke : none;
+      }
+
+      div#toolbarDiv > svg > g.selected > rect.background {
+        fill : #AAAAAA;
+        stroke : none;
+      }
+
+      ellipse.selected, rect.selected {
+        stroke-dasharray : 5,5;
+      }
+
+      @import "lib/jquery.svg.css";
+
+    </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>
+
+    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
+    <script src="lib/jquery.svg.js" type="text/javascript"></script>
+    <script src="lib/jquery.svgdom.js" type="text/javascript"></script>
+
+    <script>
+$(document).ready(function(){
+
+	//hook up minimal console api
+	if(typeof console == "undefined"){
+		console = {};
+		["log","info","error","dirxml"].forEach(function(m){console[m] = console[m] || function(){}
});
+	} 
+
+	var scxmlns = "http://www.w3.org/2005/07/scxml";
+	var svgns = "http://www.w3.org/2000/svg";
+
+	$("#toolbarDiv").svg({
+		onLoad:function(toolbar){
+			$(toolbar.root()).attr({
+				"width":"150px",
+				"height":"50px"
+			});
+
+			$(document.body).svg({
+				onLoad:function(svg){
+
+					$(svg.root()).attr({
+						"width":"100%",
+						"height":"100%"
+					});
+
+					var toolbarOutlineRect = toolbar.rect(0,0,150,50,{
+						fill:"white", 
+						stroke:"black"
+					}) ;
+
+					var transformButton = toolbar.group();
+
+					var transformButtonBackground = toolbar.rect(transformButton,0,0,50,50,{
+						class:"background"
+					});
+
+					//TODO: make proper icon
+					var transformButtonIcon = toolbar.circle(transformButton,25,25,15,{
+						fill:"green",
+						stroke:"black"
+					});
+					
+					var rectButton = toolbar.group({"transform":"translate(50,0)"});
+					var rectButtonBackground = toolbar.rect(rectButton,0,0,50,50,{ 
+						class:"background"
+					});
+					var rectButtonIcon = toolbar.rect(rectButton,10,10,30,30,{ 
+						fill:"red", 
+						stroke:"black"
+					});
+
+					var ellipseButton = toolbar.group({"transform":"translate(100,0)"});
+
+					var ellipseButtonBackground = toolbar.rect(ellipseButton,0,0,50,50,{
+						class:"background"
+					});
+
+					var ellipseButtonIcon = toolbar.circle(ellipseButton,25,25,15,{
+						fill:"blue",
+						stroke:"black"
+					});
+
+					//workaround for webkit: svg root element does not receive events on its own, 
+					//so we create a white background rect, and proxy events to svg element
+					if($.browser.webkit){
+						 var backgroundRect = svg.rect(0,0,"100%","100%",{
+							stroke:"none",
+							fill:"white"
+						}) 
+						console.log(backgroundRect);
+
+						$(["mousedown","mouseup","mousemove"]).each(function(index,eventName){
+							backgroundRect.addEventListener(eventName,function(e){
+								svg.root().dispatchEvent(e);
+							},false)
+						});
+					}
+
+					var scaleHandle = svg.path("M 0 0 L -4 6 L -2 6 L -2 12 L -4 12 L 0 18 L 4 12 L 2 12
L 2 6 L 4 6 L 0 0 z",{
+						transform:"rotate(-45)",
+						visibility:"hidden"
+					})
+
+					var rotationHandle = svg.path("M 12 0 L 17 5 L 15 5 Q 15 15 5 15 L 5 17 L 0 12 L 5 7
L 5 9 Q 9 9 9 5 L 7 5 L 12 0 z",{
+						visibility:"hidden",
+						transform:"translate(0,0)"
+					})
+
+
+					function hookUpDOMEvents(node,compiledStatechartInstance){
+						//hook up DOM events
+						["mousedown","mouseup","mousemove"].forEach(function(eventName){
+							if(compiledStatechartInstance[eventName]){
+								node.addEventListener(eventName,function(e){
+									e.preventDefault();
+									compiledStatechartInstance[eventName](e)
+								},false);
+							}
+						});
+					}
+
+					require(
+						{
+							"baseUrl":"/"
+						},
+						["src/javascript/scxml/cgf/SCXMLCompiler",
+							"demo/drawing-tool/transform",
+							"xml!demo/drawing-tool/behaviour/canvas.xml",
+							"src/javascript/scxml/cgf/listener/GraphicalSimulator",
+							"src/javascript/scxml/cgf/layout",
+							"src/javascript/scxml/cgf/layout/hierarchical/HierarchicalLayout" ],
+
+						function(compiler,svgTransformModule,canvasBehaviourSCXML,Simulator,layout,HierarchicalLayout){
+
+							require( [window.DOMParser ?
+								"src/javascript/scxml/cgf/util/xsl/browser" :
+								"src/javascript/scxml/cgf/util/xsl/ie"],
+								function(xslTransformer){
+
+
+									//open new window and get DOM attach point
+									var w = window.open("display.html");
+
+									w.addEventListener("DOMContentLoaded",function(e){
+
+										//apply layout
+										var layoutInfo = layout.applyHierarchicalLayout(
+											xslTransformer,
+											canvasBehaviourSCXML,
+											{heuristic:HierarchicalLayout.HEURISTICS_ENUM.MINIMUM_WIDTH_LAYERING},
+											w.document.body);
+
+										var svgDoc = layoutInfo.svgDoc;
+								
+										var d = new Date();
+
+										compiler.compile({
+											inFiles:[canvasBehaviourSCXML],
+											//debug:true,
+											backend:"state",
+											beautify:true,
+											verbose:false,
+											log:false,
+											ie:false
+										}, function(scArr){
+								
+											console.log("Compiling statecharts took:",new Date() - d);
+
+											//eval
+											for(var i=0, l=scArr.length; i < l; i++){
+												console.log(scArr[i]);
+												eval(scArr[i]);
+											}
+
+											//hook up canvas behaviour
+											canvasSC = new CanvasStatechartExecutionContext(); 
+
+
+											//hook up graphical simulator
+											var simulator = new Simulator(svgDoc);
+											canvasSC.addListener(simulator);
+
+											//initialize statechart instance
+											canvasSC.initialize();
+
+											//pass in reference to rect
+											canvasSC.init({	
+												svg:svg,
+												transformModule:svgTransformModule,
+												scaleHandle:scaleHandle,
+												rotationHandle:rotationHandle,
+												ellipseButton:ellipseButton,
+												rectButton:rectButton,
+												transformButton:transformButton,
+												ellipseIcon:ellipseButtonIcon,
+												rectIcon:rectButtonIcon,
+												transformIcon:transformButtonIcon 
+											});	 
+
+											hookUpDOMEvents(svg.root(),canvasSC);
+											hookUpDOMEvents(toolbar.root(),canvasSC);
+
+
+										},xslTransformer);
+
+									},true);
+							})
+						}
+					);
+				}	
+			})
+		}
+	});
+
+});
+
+
+
+      $(document).ready(function(){
+
+        //hook up minimal console api
+        if(typeof console == "undefined"){
+          console = {};
+          ["log","info","error","dirxml"].forEach(function(m){console[m] = console[m] ||
function(){} });
+        } 
+
+
+        var scxmlns = "http://www.w3.org/2005/07/scxml";
+        var svgns = "http://www.w3.org/2000/svg";
+
+        $("#toolbarDiv").svg({
+          onLoad:function(toolbar){
+            $(toolbar.root()).attr({
+              "width":"150px",
+              "height":"50px"
+            });
+
+            $(document.body).svg({
+              onLoad:function(svg){
+
+                $(svg.root()).attr({
+                  "width":"100%",
+                  "height":"100%"
+                });
+
+                var toolbarOutlineRect = toolbar.rect(0,0,150,50,{
+                  fill:"white", 
+                  stroke:"black"
+                }) ;
+
+                var transformButton = toolbar.group();
+
+                var transformButtonBackground = toolbar.rect(transformButton,0,0,50,50,{
+                  class:"background"
+                });
+
+								//TODO: make proper icon
+                var transformButtonIcon = toolbar.circle(transformButton,25,25,15,{
+                  fill:"green",
+                  stroke:"black"
+                });
+                
+                var rectButton = toolbar.group({"transform":"translate(50,0)"});
+                var rectButtonBackground = toolbar.rect(rectButton,0,0,50,50,{ 
+                  class:"background"
+                });
+                var rectButtonIcon = toolbar.rect(rectButton,10,10,30,30,{ 
+                  fill:"red", 
+                  stroke:"black"
+                });
+
+                var ellipseButton = toolbar.group({"transform":"translate(100,0)"});
+
+                var ellipseButtonBackground = toolbar.rect(ellipseButton,0,0,50,50,{
+                  class:"background"
+                });
+
+                var ellipseButtonIcon = toolbar.circle(ellipseButton,25,25,15,{
+                  fill:"blue",
+                  stroke:"black"
+                });
+
+		var scaleHandle = svg.path("M 0 0 L -4 6 L -2 6 L -2 12 L -4 12 L 0 18 L 4 12 L 2 12 L
2 6 L 4 6 L 0 0 z",{
+		  transform:"rotate(-45)",
+		  visibility:"hidden"
+		})
+		var rotationHandle =  svg.path("M 12 0 L 17 5 L 15 5 Q 15 15 5 15 L 5 17 L 0 12 L 5 7 L
5 9 Q 9 9 9 5 L 7 5 L 12 0 z",{visibility:"hidden"})
+
+                function hookUpDOMEvents(node,compiledStatechartInstance){
+                  //hook up DOM events
+                  ["mousedown","mouseup","mousemove"].forEach(function(eventName){
+                    if(compiledStatechartInstance[eventName]){
+                      node.addEventListener(eventName,function(e){
+                        e.preventDefault();
+                        compiledStatechartInstance[eventName](e)
+                      },false);
+                    }
+                  });
+                }
+
+              }  
+            })
+          }
+        });
+
+        //build up the DOM
+      });
+    </script>
+  </head>
+  <body>
+    <div id="toolbarDiv"></div>
+  </body>
+</html>
+
+
+

Propchange: commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drawing-tool/drawing-tool-with-graphical-debugger.html
------------------------------------------------------------------------------
    svn:eol-style = native



Mime
View raw message