1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Inspect DojoX GFX JSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
td.cell { padding: 1em 1em 0em 0em; }
td.note { font-size: 80%; }
</style>
<!--
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
<script type="text/javascript" src="Silverlight.js"></script>
-->
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojox.gfx");
dojo.require("dojox.gfx.move");
dojo.require("dojox.gfx.utils");
surface = null;
container_pos = null;
mover = null;
init = function(){
// initialize graphics
var container = dojo.byId("gfx");
surface = dojox.gfx.createSurface(container, 500, 500);
container_pos = dojo.coords(container, true);
// wire UI
dojo.connect(dojo.byId("load"), "onclick", onLoad);
dojo.connect(dojo.byId("add"), "onclick", onAdd);
// handle moves
dojo.subscribe("/gfx/move/start", function(m){ mover = m; });
dojo.subscribe("/gfx/move/stop", function(){ mover = null; });
// handle shape operations
dojo.connect(document, "onkeydown", onKeyDown);
// cancel text selection and text dragging
dojo.connect(container, "ondragstart", dojo, "stopEvent");
dojo.connect(container, "onselectstart", dojo, "stopEvent");
};
onLoad = function(){
var s = dojo.byId("source");
if(!s.value){
alert("Name of the file is required.");
return;
}
dojo.xhrGet({
url: s.value,
preventCache: true,
handleAs: "json",
load: loadObjects,
error: function(r){ alert("Error: " + r); }
});
};
mainObject = null;
names = [];
loadObjects = function(r){
if(!r){
alert("Wrong JSON object. Did you type the file name correctly?");
return;
}
mainObject = r;
// clear old object names
names = [];
var s = dojo.byId("names"), ni = dojo.byId("names_info");
ni.innerHTML = "";
while(s.childNodes.length){ s.removeChild(s.lastChild); }
// find new names
findNames(s, dojo.byId("named").checked, "", mainObject);
ni.innerHTML = " (" + names.length + ")";
};
findNames = function(selector, named_only, prefix, o){
if(o instanceof Array){
for(var i = 0; i < o.length; ++i){
findNames(selector, named_only, prefix, o[i]);
}
return;
}
if(named_only && !("name" in o)) return;
var name = ("name" in o) ? o.name : "*",
full = prefix ? prefix + "/" + name : name,
opt = document.createElement("option");
opt.value = names.length;
opt.innerHTML = full;
names.push(o);
selector.appendChild(opt);
if("children" in o){
findNames(selector, named_only, full, o.children);
}
};
onAdd = function(){
var s = dojo.byId("names");
for(var i = 0; i < s.options.length; ++i){
var opt = s.options[i];
if(!opt.selected) continue;
var object = names[Number(opt.value)];
var group = surface.createGroup();
dojox.gfx.utils.deserialize(group, object);
new dojox.gfx.Moveable(group); // make it moveable as whole
}
};
// event handling
onKeyDown = function(e){
if(!mover) return;
switch(e.keyCode){
case "f".charCodeAt(0): case "F".charCodeAt(0):
mover.shape.moveToFront();
break;
case "b".charCodeAt(0): case "B".charCodeAt(0):
mover.shape.moveToBack();
break;
case "q".charCodeAt(0): case "Q".charCodeAt(0):
mover.shape.applyLeftTransform(dojox.gfx.matrix.rotategAt(-15, mover.lastX - container_pos.x, mover.lastY - container_pos.y));
break;
case "w".charCodeAt(0): case "W".charCodeAt(0):
mover.shape.applyLeftTransform(dojox.gfx.matrix.rotategAt(15, mover.lastX - container_pos.x, mover.lastY - container_pos.y));
break;
case "d".charCodeAt(0): case "D".charCodeAt(0):
mover.shape.parent.remove(mover.shape);
mover.shape.rawNode = null;
mover.destroy();
break;
}
dojo.stopEvent(e);
};
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1>Inspect DojoX GFX JSON</h1>
<p>Help: load a file, select an object, and add it, move it around, or apply operations to selected items:<br />
F — bring to front, B — bring to back, Q — rotate CCW, W — rotate CW, D — delete.<br />
(all operations work on currently dragged item).</p>
<p><strong>VML note:</strong> VML doesn't process PNG images with opacity correctly.</p>
<table><tr>
<td align="left" valign="top" class="cell"><div id="gfx" style="width: 500px; height: 500px; border: solid 1px black;"></div></td>
<td align="left" valign="top" class="cell"><table>
<tr><td>Source:</td></tr>
<tr><td><input type="text" id="source" value="data/Lars.json" size="30" /> <button id="load">Load</button><br />
<input type="checkbox" id="named" checked="checked" /> <label for="named">Load only named objects</label></td></tr>
<tr><td class="note"><em>Available sources:</em></td></tr>
<tr><td class="note"><em>data/Lars.json — vectors from SVG</em></td></tr>
<tr><td class="note"><em>data/Nils.json — vectors from SVG</em></td></tr>
<tr><td class="note"><em>data/LarsDreaming.json — vectors from SVG</em></td></tr>
<tr><td class="note"><em>data/buratino.json — images</em></td></tr>
<tr><td class="note"><em>data/transform.json — from dojox.gfx</em></td></tr>
<tr><td> </td></tr>
<tr><td>Objects<span id="names_info"></span>:</td></tr>
<tr><td><select id="names" multiple="multiple" size="10" style="width: 300px;"></select></td></tr>
<tr><td><button id="add">Add Selected</button></td></tr>
<tr><td class="note"><div style="width: 300px;">Object names are hierarchical and separated by "/". Adding a selected object creates a group for this object.
A higher-level object (a group) always includes lower-level objects as children.</div></td></tr>
</table></td>
</tr></table>
</body>
</html>
|
