Skip to content

Commit b9dfabf

Browse files
pruzandpruzand
committed
initial revision
git-svn-id: http://svn.dojotoolkit.org/src/demos/trunk@27158 560b804f-0ae3-0310-86f3-f6aa0a117693
1 parent 6c67f70 commit b9dfabf

File tree

7 files changed

+218
-0
lines changed

7 files changed

+218
-0
lines changed

‎gfxserialization/README‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
-------------------------------------------------------------------------------
2+
GFX Serialization - A demo that shows the gfx serialization capabilities.
3+
-------------------------------------------------------------------------------
4+
Demo description
5+
6+
This demo shows the gfx serialization in action. A drawing is displayed in the
7+
left canvas and replicated via the gfx serialization in the right canvas. A text
8+
representation is also displayed in the text area at the bottom.
9+
You can drag any shapes of the left canvas to modify their positions. Any changes on
10+
the left canvas immediatly triggers a new replication to the right canvas
11+
(unless the 'Buffered updates' check box is checked - in this case replications
12+
are batched) .
13+
14+
-------------------------------------------------------------------------------
15+
Dependencies:
16+
17+
Dojo Core (dom, on, aspect, json)
18+
DojoX Gfx (gfx, Moveable, utils)
19+
20+
-------------------------------------------------------------------------------
21+
Installation instructions
22+
23+
Simply run the included demo.html
24+
25+
-------------------------------------------------------------------------------
26+
@rank:751

‎gfxserialization/demo.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
font-family:sans-serif;
3+
}
4+
5+
.panel {
6+
margin-top:10px;
7+
background-color:#ececec;
8+
border-width:2px;
9+
border-color:gray;
10+
border-style:solid;
11+
-moz-border-radius: 10px;
12+
border-radius: 10px;
13+
}
14+
15+
.canvas {
16+
width:300px;
17+
height:300px;
18+
display:inline-block;
19+
}
20+
21+
.dump {
22+
width:610px;
23+
height:200px;
24+
overflow:scroll;
25+
}
26+
27+
#textview {
28+
font-family:sans-serif;
29+
font-size:8pt;
30+
}
31+
32+
.carboncopy {
33+
}
34+
35+
.serializing {
36+
border-style:dashed;
37+
border-width:10px;
38+
border-color:rgba(0,255,0,.5);
39+
}
40+
41+
.textview {
42+
width:50%;
43+
max-width:300px;
44+
height:155px;
45+
display:inline-block;
46+
}
47+
48+
.surfaceHeader {
49+
text-align:center;
50+
}

‎gfxserialization/demo.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2+
"http://www.w3.org/TR/html4/strict.dtd">
3+
<html>
4+
<head>
5+
<title>GFX Serialization Demo</title>
6+
<link rel="stylesheet" href="demo.css">
7+
<script type="text/javascript" src="../../dojo/dojo.js" charset="utf-8" djConfig="async:true"></script>
8+
<script type="text/javascript" src="src.js" charset="utf-8"></script>
9+
</head>
10+
<body>
11+
<h1>GFX Serialization Demo</h1>
12+
<table>
13+
<tr>
14+
<td>Drag a shape in the canvas...</td>
15+
<td>...the drawing is deserialized here!</td>
16+
</tr>
17+
<tr>
18+
<td>
19+
<div id="surface" class="panel canvas">
20+
</div>
21+
</td>
22+
<td>
23+
<div id="overview" class="panel canvas carboncopy"></div>
24+
</td>
25+
</tr>
26+
<tr>
27+
<td><input type="checkbox" id="bufferCheck"/>Buffered Updates</td><td></td>
28+
</tr>
29+
</table>
30+
<p>And view the drawing text representation below:
31+
<div id="dump" class="panel dump">
32+
<span id="textview"></span>
33+
</div>
34+
</p>
35+
</body>
36+
</html>

‎gfxserialization/demo.profile.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
dependencies = {
2+
layers: [
3+
{
4+
name: "../demos/gfxserialization/src.js",
5+
resourceName: "demos.gfxserialization.src",
6+
dependencies: [
7+
"demos.gfxserialization.src"
8+
]
9+
}
10+
],
11+
12+
prefixes: [
13+
[ "dijit", "../dijit" ],
14+
[ "dojox", "../dojox" ],
15+
[ "demos", "../demos" ]
16+
]
17+
}

‎gfxserialization/resources/shapes.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
[
2+
{
3+
shape:{ type:'rect', r:8, x:10,y:20,width:80,height:80},
4+
fill:'rgba(238,223,204,.6)',
5+
stroke:{color:'#CDC0B0', width:2}
6+
},
7+
{
8+
shape:{type:'polyline', points:[117.639953710391,195.182708784827,82.3600462896092,195.182708784827,49.4625123637738,182.438136245216,23.390346181097,158.670216307581,7.66473825540938,127.088938262093,4.40951907567668,91.9595287066958,14.064324029914,58.0264090606251,35.3252182099305,29.8724351619895,65.3208000460332,11.2999571923546,99.9999999999999,4.81729121517272,134.679199953967,11.2999571923545,164.674781790069,29.8724351619893,185.935675970086,58.0264090606249,195.590480924323,91.9595287066956,192.335261744591,127.088938262092,176.609653818903,158.670216307581,150.537487636226,182.438136245216,117.639953710391,195.182708784827]},
9+
fill:'rgba(205,205,180,.6)',
10+
stroke:{color:'#8B8B7A', width:2},
11+
transform:{xx:0.5,yy:0.5,dx:70,dy:35}
12+
},
13+
{
14+
shape:{type:'path', path:"M 10.499686,177.03840 L 31.174931,178.56990 C 52.615925,154.32116 61.039171,82.595924 187.38789,96.634671 C 182.79339,403.95560 48.021426,436.37234 56.444675,499.41907 C 59.507674,535.15406 87.840417,557.10556 118.47041,558.38181 C 215.21014,555.06356 210.87089,424.63084 240.99038,95.868921 L 365.80760,95.868921 C 359.17110,211.75239 341.04836,327.63586 339.00636,441.22208 C 340.53786,516.77606 386.48285,557.10556 446.97708,557.61606 C 546.52456,560.93431 577.92030,444.79558 577.92030,395.27709 L 556.47931,395.27710 C 554.43731,436.11709 534.78306,465.47083 492.92207,467.25758 C 378.82535,468.78908 441.61683,266.63113 442.38258,97.400421 L 577.92030,98.166171 L 577.15455,11.636437 C 13.807491,8.9075799 85.312284,-2.1366151 10.499686,177.03840 z"},
15+
fill:'rgba(162,205,90)',
16+
stroke:{color:'rgb(110,139,61)', width:4},
17+
transform:{xx:0.2,yy:0.2,dx:170,dy:95}
18+
},
19+
{
20+
shape:{type:'path', path:"M694.594,104.102v60.604h40.403v-60.604H694.594z M694.998,471.96c-0.812,17.886-11.512,56.267-45.76,80.509l26.369,36.766c0,0,62.211-66.451,59.391-114.733V184.906h-40.4L694.998,471.96zM1046.902,335.198c0,73.13-60.609,121.206-121.207,121.206c-70.703,0-118.781-60.604-118.781-121.206c0-65.651,53.125-118.778,118.781-118.778C998.82,216.419,1046.902,277.023,1046.902,335.198z M1087.302,335.198c0-85.854-68.278-159.182-161.606-159.182c-65.656,0-141.411,40.403-159.185,136.359v48.076c0,5.054,2.623,15.148,5.051,22.625c25.251,80.809,98.578,113.732,154.134,113.732C1011.544,496.811,1087.302,428.531,1087.302,335.198z M280.47,94v126.057v71.61v89.591c-18.989,46.672-65.653,75.151-112.322,75.151c-70.703,0-118.78-60.604-118.78-121.206c0-65.651,53.128-118.779,118.78-118.779c30.608,0,56.867,10.708,77.064,27.268l7.072-45.048c-24.141-14.238-52.722-22.619-84.139-22.619c-65.65-0.009-141.404,40.395-159.18,136.351v48.076c0,5.054,2.623,15.149,5.052,22.625c25.252,80.809,98.578,113.733,154.129,113.733c42.524,0,82.729-16.869,112.322-45.232v36.355h50.499V94.011H280.47V94z M632.775,335.198c0,73.13-60.604,121.206-121.207,121.206c-70.703,0-118.78-60.604-118.78-121.206c0-65.651,53.125-118.778,118.78-118.778C584.699,216.419,632.775,277.023,632.775,335.198z M673.178,335.198c0-85.854-68.275-159.182-161.609-159.182c-65.651,0-141.406,40.403-159.182,136.359v48.076c0,5.054,2.623,15.148,5.052,22.625c25.25,80.809,98.578,113.732,154.129,113.732C597.423,496.811,673.178,428.531,673.178,335.198z M993.773,115.415h-131.31c-2.432,2.623-5.053,2.623-5.053,7.674c0,7.476,2.621,7.476,2.621,10.102h131.309c2.433-2.623,5.053-2.623,5.053-10.102C996.394,118.041,993.773,118.041,993.773,115.415z M579.65,115.415H448.34c-2.426,2.623-5.049,2.623-5.049,7.674c0,7.476,2.623,7.476,2.623,10.102h131.307c2.43-2.623,5.053-2.623,5.053-10.102C582.273,118.041,579.65,118.041,579.65,115.415z"},
21+
fill:'#010101',
22+
transform:{xx:0.2,yy:0.2,dx:50,dy:150}
23+
}
24+
]
25+

‎gfxserialization/resources/specimen.png‎

19.3 KB
Loading

‎gfxserialization/src.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
require([
2+
"dojo/ready",
3+
"dojo/_base/sniff",
4+
"dojo/on",
5+
"dojo/aspect",
6+
"dojo/string",
7+
"dojo/json",
8+
"dojo/dom",
9+
"dojo/dom-geometry",
10+
"dojo/dom-attr",
11+
"dojo/_base/array",
12+
"dojox/gfx",
13+
"dojox/gfx/matrix",
14+
"dojox/gfx/utils",
15+
"dojox/gfx/Moveable",
16+
"dojo/text!./resources/shapes.json"
17+
],function(ready, has, on, aspect, string, json, dom, domgeom, domattr, array, gfx, matrix, gutils, Moveable, lion){
18+
var surfaces=[], cc, overview, timer, delayUpdate;
19+
20+
var initSurface = function(){
21+
gutils.fromJson(surfaces[0], lion);
22+
array.forEach(surfaces[0].children, function(s){
23+
var v = new Moveable(s);
24+
aspect.after(v,"onMoved", copy);
25+
});
26+
// carboncopy
27+
cc = surfaces[1].createGroup();
28+
surfaces[1].createImage({src:'./resources/specimen.png',width:300,height:300});
29+
};
30+
31+
var copy = function(){
32+
if (timer)
33+
clearTimeout(timer);
34+
var f = function(){
35+
var c = gutils.serialize(surfaces[0]);
36+
dojo.byId("textview").innerHTML=json.stringify(c);
37+
cc.clear();
38+
gutils.deserialize(cc,c);
39+
};
40+
if(delayUpdate){
41+
timer = setTimeout(f, 200);
42+
}else{
43+
f();
44+
}
45+
};
46+
ready(function(){
47+
var box;
48+
array.forEach(["surface","overview"], function(id){
49+
box = domgeom.getContentBox(dom.byId(id));
50+
surfaces.push(gfx.createSurface(id, box.width, box.height));
51+
})
52+
overview = dom.byId("overview");
53+
initSurface();
54+
copy();
55+
var cbox = dom.byId("bufferCheck");
56+
if (has("ie")<9){
57+
domattr.set(cbox,"checked", true);
58+
}
59+
on(cbox,"click", function(){
60+
delayUpdate = domattr.get(cbox,"checked");
61+
});
62+
delayUpdate = domattr.get(cbox,"checked");
63+
});
64+
});

0 commit comments

Comments
 (0)