Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/test_drawing.html
+++ b/master/examples/test_drawing.html
@@ -0,0 +1,160 @@
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
+<head>
+    <title>Drawing GFX Toolbar Test</title>
+	<style>
+		@import url("../../../dijit/themes/dijit.css");
+		@import url("../../../dojox/drawing/resources/drawing.css");
+		@import url("../../../dojox/drawing/resources/toolbar.css");
+		@import url("../../../dojox/drawing/resources/GreekPalette.css");
+		href, body{
+		}
+		.drawing{
+			width:800px;
+			height:500px;
+			border:1px solid #ccc;
+			cursor:crosshair;
+		}
+		#data{
+			display:block;
+			height:100px;
+			width:800px;
+			margin-top:5px;
+		}
+		button{
+			border:2px solid #ccc;
+			border-color:#D9E1F9 #B5BCD0 #878E9D #C6CEE4;
+			background-color:#CDDCF3;
+			cursor:pointer;
+		}
+		.gfxToolbar{
+			width:800px;
+			height:50px;
+			margin-bottom:10px;
+			border:1px solid #ccc;
+		}
+	</style>
+
+	<script>
+		djConfig = {
+			isDebug:false,
+			parseOnLoad:true
+		};
+	</script>
+	<script src="../../../dojo/dojo.js"></script>
+	<script>
+		dojo.require("dojo.parser");
+		dojo.require("dojox.drawing");
+
+
+		// custom Tools and Plugins need to be required
+		dojo.require("dojox.drawing.tools.TextBlock");
+		dojo.require("dojox.drawing.tools.Rect");
+		dojo.require("dojox.drawing.tools.Ellipse");
+		dojo.require("dojox.drawing.tools.Line");
+		dojo.require("dojox.drawing.tools.Path");
+		dojo.require("dojox.drawing.tools.Pencil");
+
+		dojo.require("dojox.drawing.tools.custom.Vector");
+		dojo.require("dojox.drawing.tools.custom.Axes");
+		dojo.require("dojox.drawing.tools.Arrow");
+
+		dojo.require("dojox.drawing.plugins.tools.Pan");
+		dojo.require("dojox.drawing.plugins.tools.Zoom");
+		dojo.require("dojox.drawing.plugins.tools.Iconize");
+
+		dojo.require("dojox.drawing.plugins.drawing.GreekPalette");
+		dojo.require("dojox.drawing.plugins.drawing.Grid");
+		
+		dojo.require("dojox.drawing.ui.Toolbar");
+		dojo.require("dojox.drawing.ui.Button");
+		//dojo.require("dojox.drawing.ui.Tooltip");
+
+		var doExport = function(){
+			var o = myDrawing.exporter();
+			console.log("EXPORT:")
+			console.dir(o)
+			console.log(dojo.toJson(o));
+			dojo.byId("data").value = dojo.toJson(o, true);
+		}
+
+		var doImport = function(){
+			myDrawing.importer(dojo.fromJson(dojo.byId("data").value));
+		}
+
+		var doClear = function(){
+			myDrawing.removeAll();
+		}
+
+		dojo.addOnLoad(function(){
+			dojo.connect(myDrawing, "onSurfaceReady", function(){
+				new dojox.drawing.ui.Toolbar({
+					drawing:myDrawing,
+					tools:"all",
+					plugs:"all",
+					selected:"",
+					size:30,
+					radius:2,
+					margin:5
+				});
+
+			});
+
+			dojo.connect(dojo.byId("import"), "click", doImport);
+			dojo.connect(dojo.byId("export"), "click", doExport);
+			dojo.connect(dojo.byId("clear"), "click", doClear);
+			dojo.connect(dojo.byId("selectall"), "click", function(){
+				myDrawing.selectAll();
+			});
+
+			dojo.connect(dojo.byId("red"), "click", function(){
+				myDrawing.changeDefaults({
+					norm:{
+						fill:"#ff0000",
+						width:5,
+						color:"#ff00ff"
+					}
+				});
+			});
+			dojo.connect(dojo.byId("blue"), "click", function(){
+				myDrawing.changeDefaults({
+					norm:{
+						fill:"#0000ff",
+						width:5,
+						color:"#ffff00"
+					}
+				});
+			});
+			dojo.connect(dojo.byId("yellow"), "click", function(){
+				myDrawing.toSelected("attr", {
+					fill:"#ffff00"
+				});
+			});
+		})
+	</script>
+
+</head>
+<body>
+    <h2>Drawing Test</h2>
+	<div id="conEdit" contenteditable="true"></div>
+	<div id="wrapper">
+		<div dojoType="dojox.drawing.Drawing" id="drawingNode" jsId="myDrawing" class="drawing"
+			 plugins="[{'name':'dojox.drawing.plugins.drawing.Grid', 'options':{minor:20, major:100}}]">
+		</div>
+	</div>
+
+	<br/>
+	<button id="import">Import</button>
+	<button id="export">Export</button>
+	<button id="selectall">Select All</button>
+	<button id="clear">Clear Drawing</button>
+	&nbsp;&nbsp;&nbsp;
+	<button id="blue">Change defaults to Blue</button>
+	<button id="red">Change defaults to Red</button>
+	<button id="yellow">Change selected to Yellow</button>
+	<br/>
+	<br/>
+
+	<textarea id="data"></textarea>
+	<div dojoType="dojox.drawing.plugins.drawing.GreekPalette" id="greekPalette"></div>
+</body>
+</html>