source: Dev/branches/rest-dojo-ui/client/dojox/drawing/tests/drawing.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
  • Property svn:executable set to *
File size: 6.9 KB
Line 
1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
2<head>
3    <title>Drawing Test</title>
4        <style>
5                @import url("../../../dijit/themes/dijit.css");
6                @import url("../../../dojox/drawing/resources/drawing.css");
7                @import url("../../../dojox/drawing/resources/toolbar.css");
8                @import url("../../../dojox/drawing/resources/GreekPalette.css");
9                href, body{
10                }
11                .drawing{
12                        margin-left:52px;
13                        width:800px;
14                        height:500px;
15                        border:1px solid #ccc;
16                        cursor:crosshair;
17                }
18                #data{
19                        display:block;
20                        height:100px;
21                        width:855px;
22                        margin-top:5px;
23                }
24                button{
25                        border:2px solid #ccc;
26                        border-color:#D9E1F9 #B5BCD0 #878E9D #C6CEE4;
27                        background-color:#CDDCF3;
28                        cursor:pointer;
29                }
30        </style>
31
32        <script>
33                djConfig = {
34                        isDebug:false,
35                        parseOnLoad:true
36                };
37        </script>
38        <script src="../../../dojo/dojo.js"></script>
39        <script>
40                dojo.require("dojo.parser");
41                dojo.require("dojox.drawing");
42                // custom Tools and Plugins need to be required
43                dojo.require("dojox.drawing.ui.dom.Toolbar");
44                dojo.require("dojox.drawing.tools.TextBlock");
45                dojo.require("dojox.drawing.tools.Rect");
46                dojo.require("dojox.drawing.tools.Ellipse");
47                dojo.require("dojox.drawing.tools.Line");
48                dojo.require("dojox.drawing.tools.Path");
49
50                dojo.require("dojox.drawing.annotations.Label");
51                dojo.require("dojox.drawing.annotations.Angle");
52                dojo.require("dojox.drawing.annotations.Arrow");
53                dojo.require("dojox.drawing.annotations.BoxShadow");
54
55                dojo.require("dojox.drawing.tools.custom.Vector");
56                dojo.require("dojox.drawing.tools.custom.Axes");
57                dojo.require("dojox.drawing.tools.Arrow");
58                dojo.require("dojox.drawing.ui.dom.Pan");
59                dojo.require("dojox.drawing.ui.dom.Zoom");
60                dojo.require("dojox.drawing.plugins.drawing.Grid");
61                dojo.require("dojox.drawing.plugins.drawing.GreekPalette");
62
63
64                var doExport = function(){
65                        var o = myDrawing.exporter();
66                        console.log("EXPORT:")
67                        console.dir(o)
68                        console.log(dojo.toJson(o));
69                        dojo.byId("data").value = dojo.toJson(o, true);
70                }
71
72                var doImport = function(){
73                        myDrawing.importer(dojo.fromJson(dojo.byId("data").value));
74                }
75
76                var doClear = function(){
77                        myDrawing.removeAll();
78                }
79
80                dojo.addOnLoad(function(){
81
82
83                        // myDrawing referenced by jsId
84                        dojo.connect(myDrawing, "onSurfaceReady", function(){
85
86                                var rect = myDrawing.addStencil("rect", {data:{x:50, y:275, width:100, height:100}});
87
88
89                                var json = '[{"color":"#0000FF","style":"Solid","cap":"round","fill":{"r":256,"g":0,"b":0,"a":0.5},"borderWidth":1,"x":413,"y":366,"width":100,"height":32,"type":"textBlock","text":"DojoX Drawing is Mike","pad":3,"size":"12px","family":"sans-serif","weight":"normal"},{"color":"#0000FF","style":"Solid","cap":"round","fill":{"r":256,"g":0,"b":0,"a":0.5},"borderWidth":1,"cx":732.5,"cy":197.54166412353516,"rx":54.5,"ry":187.54166412353516,"type":"ellipse"},{"color":"#000000","style":"Solid","cap":"round","fill":"#CCCCCC","borderWidth":1,"x1":430,"y1":342.0833282470703,"x2":675.4108328989848,"y2":143.3535541923843,"type":"line"},{"color":"#000000","style":"Solid","cap":"round","fill":"#CCCCCC","borderWidth":1,"x":499,"y":199.0833282470703,"width":100,"height":103,"type":"rect"},{"color":"#0000FF","style":"Solid","cap":"round","fill":{"r":256,"g":0,"b":0,"a":0.5},"borderWidth":1,"x":395,"y":354,"width":269,"height":19,"type":"textBlock","text":"DojoX Rocks with Socks","pad":3,"size":"24px","family":"sans-serif","weight":"bold"},{"color":"#0000FF","style":"Solid","cap":"round","fill":{"r":256,"g":0,"b":0,"a":0.5},"borderWidth":1,"cx":510.5,"cy":167.04166412353516,"rx":89.5,"ry":17.041664123535156,"type":"ellipse"}]';
90                                dojo.byId("data").value = json;
91
92
93                                var textBlock = myDrawing.addStencil("textBlock", {data:{x:20, y:30, width:200, text:"DojoX Drawing Rocks"}});
94                                textBlock.attr({fill:{r:256,g:0,b:0,a:.5}, width:10, color:"#0000FF", size:"24px", weight:"bold"});
95
96
97                                var ellipse = myDrawing.addStencil("ellipse", {data:{cx:200, cy:200, rx:100, ry:50}});
98                                ellipse.attr({fill:{r:256,g:0,b:0,a:.5}, width:500, height:200, color:"#0000FF"});
99
100
101                                var arrow = myDrawing.addStencil("arrow", {data:{x1:400, y1:200, x2:500, y2:300}, arrowStart:true});
102                                arrow.attr({angle:210, radius:200, borderWidth:3, label:"My Arrow"})
103
104                                var text = myDrawing.addStencil("text", {data:{x:300, y:260, width:200, text:"This is just text"}});
105
106                                myDrawing.addStencil("path", {points:[{x:700, y:20},{x:650, y:150},{x:750,y:150}, {t:"Z", x:700, y:20}, {t:"M", x:700, y:40},{x:680, y:120},{x:720,y:120} ], shadow:{place:"C", size:4, mult:4, color:"#00ff00"}});//
107
108                        });
109
110                        dojo.connect(dojo.byId("import"), "click", doImport);
111                        dojo.connect(dojo.byId("export"), "click", doExport);
112                        dojo.connect(dojo.byId("clear"), "click", doClear);
113                        dojo.connect(dojo.byId("selectall"), "click", function(){
114                                myDrawing.selectAll();
115                        });
116
117                        dojo.connect(dojo.byId("red"), "click", function(){
118                                myDrawing.changeDefaults({
119                                        norm:{
120                                                fill:"#ff0000",
121                                                width:5,
122                                                color:"#ff00ff"
123                                        }
124                                });
125                        });
126                        dojo.connect(dojo.byId("blue"), "click", function(){
127                                myDrawing.changeDefaults({
128                                        norm:{
129                                                fill:"#0000ff",
130                                                width:5,
131                                                color:"#ffff00"
132                                        }
133                                });
134                        });
135                        dojo.connect(dojo.byId("yellow"), "click", function(){
136                                myDrawing.toSelected("attr", {
137                                        fill:"#ffff00"
138                                });
139                        });
140                });
141
142
143        </script>
144
145</head>
146<body>
147    <h2>Drawing Test</h2>
148        <div id="conEdit" contenteditable="true"></div>
149        <div id="wrapper">
150                <div dojoType="dojox.drawing.ui.dom.Toolbar" drawingId="drawingNode" class="drawingToolbar vertical">
151                        <div tool="dojox.drawing.tools.Line" selected="false">Line</div>
152                        <div tool="dojox.drawing.tools.Rect" selected="false">Rect</div>
153                        <div tool="dojox.drawing.tools.Ellipse" selected="false">Ellipse</div>
154                        <div tool="dojox.drawing.tools.Path" selected="true">Path</div>
155                        <div tool="dojox.drawing.tools.TextBlock" selected="false">Text</div>
156                        <div tool="dojox.drawing.tools.Arrow" selected="false">Arrow</div>
157                        <div tool="dojox.drawing.tools.custom.Vector" selected="false">Vector</div>
158                        <div tool="dojox.drawing.tools.custom.Axes" selected="false">Axes</div>
159                        <div plugin="dojox.drawing.ui.dom.Pan" options="{}">Pan</div>
160                        <div plugin="dojox.drawing.ui.dom.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div>
161
162                </div>
163
164                <div dojoType="dojox.drawing.Drawing" id="drawingNode" jsId="myDrawing" drawingType="canvas" class="drawing"
165                         plugins="[{'name':'dojox.drawing.plugins.drawing.Grid', 'options':{gap:100}}]">
166
167                </div>
168        </div>
169
170        <br/>
171        <br/>
172        <button id="import">Import</button>
173        <button id="export">Export</button>
174        <button id="selectall">Select All</button>
175        <button id="clear">Clear Drawing</button>
176        &nbsp;&nbsp;&nbsp;
177        <button id="blue">Change defaults to Blue</button>
178        <button id="red">Change defaults to Red</button>
179        <button id="yellow">Change selected to Yellow</button>
180        <br/>
181        <br/>
182
183        <textarea id="data"></textarea>
184        <div dojoType="dojox.drawing.plugins.drawing.GreekPalette" id="greekPalette"></div>
185</body>
186</html>
Note: See TracBrowser for help on using the repository browser.