Project

General

Profile

Statistics
| Revision:

root / trunk / web / dojo / dojox / gfx / svg.js @ 10

History | View | Annotate | Download (14.2 KB)

1
/*
2
        Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
3
        Available via Academic Free License >= 2.1 OR the modified BSD license.
4
        see: http://dojotoolkit.org/license for details
5
*/
6

    
7

    
8
if(!dojo._hasResource["dojox.gfx.svg"]){
9
dojo._hasResource["dojox.gfx.svg"]=true;
10
dojo.provide("dojox.gfx.svg");
11
dojo.require("dojox.gfx._base");
12
dojo.require("dojox.gfx.shape");
13
dojo.require("dojox.gfx.path");
14
(function(){
15
var d=dojo,g=dojox.gfx,gs=g.shape,_1=g.svg;
16
_1.useSvgWeb=(typeof (window.svgweb)!=="undefined");
17
var _2=function(ns,_3){
18
if(dojo.doc.createElementNS){
19
return dojo.doc.createElementNS(ns,_3);
20
}else{
21
return dojo.doc.createElement(_3);
22
}
23
};
24
var _4=function(_5){
25
if(_1.useSvgWeb){
26
return dojo.doc.createTextNode(_5,true);
27
}else{
28
return dojo.doc.createTextNode(_5);
29
}
30
};
31
var _6=function(){
32
if(_1.useSvgWeb){
33
return dojo.doc.createDocumentFragment(true);
34
}else{
35
return dojo.doc.createDocumentFragment();
36
}
37
};
38
_1.xmlns={xlink:"http://www.w3.org/1999/xlink",svg:"http://www.w3.org/2000/svg"};
39
_1.getRef=function(_7){
40
if(!_7||_7=="none"){
41
return null;
42
}
43
if(_7.match(/^url\(#.+\)$/)){
44
return d.byId(_7.slice(5,-1));
45
}
46
if(_7.match(/^#dojoUnique\d+$/)){
47
return d.byId(_7.slice(1));
48
}
49
return null;
50
};
51
_1.dasharray={solid:"none",shortdash:[4,1],shortdot:[1,1],shortdashdot:[4,1,1,1],shortdashdotdot:[4,1,1,1,1,1],dot:[1,3],dash:[4,3],longdash:[8,3],dashdot:[4,3,1,3],longdashdot:[8,3,1,3],longdashdotdot:[8,3,1,3,1,3]};
52
d.extend(g.Shape,{setFill:function(_8){
53
if(!_8){
54
this.fillStyle=null;
55
this.rawNode.setAttribute("fill","none");
56
this.rawNode.setAttribute("fill-opacity",0);
57
return this;
58
}
59
var f;
60
var _9=function(x){
61
this.setAttribute(x,f[x].toFixed(8));
62
};
63
if(typeof (_8)=="object"&&"type" in _8){
64
switch(_8.type){
65
case "linear":
66
f=g.makeParameters(g.defaultLinearGradient,_8);
67
var _a=this._setFillObject(f,"linearGradient");
68
d.forEach(["x1","y1","x2","y2"],_9,_a);
69
break;
70
case "radial":
71
f=g.makeParameters(g.defaultRadialGradient,_8);
72
var _a=this._setFillObject(f,"radialGradient");
73
d.forEach(["cx","cy","r"],_9,_a);
74
break;
75
case "pattern":
76
f=g.makeParameters(g.defaultPattern,_8);
77
var _b=this._setFillObject(f,"pattern");
78
d.forEach(["x","y","width","height"],_9,_b);
79
break;
80
}
81
this.fillStyle=f;
82
return this;
83
}
84
var f=g.normalizeColor(_8);
85
this.fillStyle=f;
86
this.rawNode.setAttribute("fill",f.toCss());
87
this.rawNode.setAttribute("fill-opacity",f.a);
88
this.rawNode.setAttribute("fill-rule","evenodd");
89
return this;
90
},setStroke:function(_c){
91
var rn=this.rawNode;
92
if(!_c){
93
this.strokeStyle=null;
94
rn.setAttribute("stroke","none");
95
rn.setAttribute("stroke-opacity",0);
96
return this;
97
}
98
if(typeof _c=="string"||d.isArray(_c)||_c instanceof d.Color){
99
_c={color:_c};
100
}
101
var s=this.strokeStyle=g.makeParameters(g.defaultStroke,_c);
102
s.color=g.normalizeColor(s.color);
103
if(s){
104
rn.setAttribute("stroke",s.color.toCss());
105
rn.setAttribute("stroke-opacity",s.color.a);
106
rn.setAttribute("stroke-width",s.width);
107
rn.setAttribute("stroke-linecap",s.cap);
108
if(typeof s.join=="number"){
109
rn.setAttribute("stroke-linejoin","miter");
110
rn.setAttribute("stroke-miterlimit",s.join);
111
}else{
112
rn.setAttribute("stroke-linejoin",s.join);
113
}
114
var da=s.style.toLowerCase();
115
if(da in _1.dasharray){
116
da=_1.dasharray[da];
117
}
118
if(da instanceof Array){
119
da=d._toArray(da);
120
for(var i=0;i<da.length;++i){
121
da[i]*=s.width;
122
}
123
if(s.cap!="butt"){
124
for(var i=0;i<da.length;i+=2){
125
da[i]-=s.width;
126
if(da[i]<1){
127
da[i]=1;
128
}
129
}
130
for(var i=1;i<da.length;i+=2){
131
da[i]+=s.width;
132
}
133
}
134
da=da.join(",");
135
}
136
rn.setAttribute("stroke-dasharray",da);
137
rn.setAttribute("dojoGfxStrokeStyle",s.style);
138
}
139
return this;
140
},_getParentSurface:function(){
141
var _d=this.parent;
142
for(;_d&&!(_d instanceof g.Surface);_d=_d.parent){
143
}
144
return _d;
145
},_setFillObject:function(f,_e){
146
var _f=_1.xmlns.svg;
147
this.fillStyle=f;
148
var _10=this._getParentSurface(),_11=_10.defNode,_12=this.rawNode.getAttribute("fill"),ref=_1.getRef(_12);
149
if(ref){
150
_12=ref;
151
if(_12.tagName.toLowerCase()!=_e.toLowerCase()){
152
var id=_12.id;
153
_12.parentNode.removeChild(_12);
154
_12=_2(_f,_e);
155
_12.setAttribute("id",id);
156
_11.appendChild(_12);
157
}else{
158
while(_12.childNodes.length){
159
_12.removeChild(_12.lastChild);
160
}
161
}
162
}else{
163
_12=_2(_f,_e);
164
_12.setAttribute("id",g._base._getUniqueId());
165
_11.appendChild(_12);
166
}
167
if(_e=="pattern"){
168
_12.setAttribute("patternUnits","userSpaceOnUse");
169
var img=_2(_f,"image");
170
img.setAttribute("x",0);
171
img.setAttribute("y",0);
172
img.setAttribute("width",f.width.toFixed(8));
173
img.setAttribute("height",f.height.toFixed(8));
174
img.setAttributeNS(_1.xmlns.xlink,"xlink:href",f.src);
175
_12.appendChild(img);
176
}else{
177
_12.setAttribute("gradientUnits","userSpaceOnUse");
178
for(var i=0;i<f.colors.length;++i){
179
var c=f.colors[i],t=_2(_f,"stop"),cc=c.color=g.normalizeColor(c.color);
180
t.setAttribute("offset",c.offset.toFixed(8));
181
t.setAttribute("stop-color",cc.toCss());
182
t.setAttribute("stop-opacity",cc.a);
183
_12.appendChild(t);
184
}
185
}
186
this.rawNode.setAttribute("fill","url(#"+_12.getAttribute("id")+")");
187
this.rawNode.removeAttribute("fill-opacity");
188
this.rawNode.setAttribute("fill-rule","evenodd");
189
return _12;
190
},_applyTransform:function(){
191
var _13=this.matrix;
192
if(_13){
193
var tm=this.matrix;
194
this.rawNode.setAttribute("transform","matrix("+tm.xx.toFixed(8)+","+tm.yx.toFixed(8)+","+tm.xy.toFixed(8)+","+tm.yy.toFixed(8)+","+tm.dx.toFixed(8)+","+tm.dy.toFixed(8)+")");
195
}else{
196
this.rawNode.removeAttribute("transform");
197
}
198
return this;
199
},setRawNode:function(_14){
200
var r=this.rawNode=_14;
201
if(this.shape.type!="image"){
202
r.setAttribute("fill","none");
203
}
204
r.setAttribute("fill-opacity",0);
205
r.setAttribute("stroke","none");
206
r.setAttribute("stroke-opacity",0);
207
r.setAttribute("stroke-width",1);
208
r.setAttribute("stroke-linecap","butt");
209
r.setAttribute("stroke-linejoin","miter");
210
r.setAttribute("stroke-miterlimit",4);
211
},setShape:function(_15){
212
this.shape=g.makeParameters(this.shape,_15);
213
for(var i in this.shape){
214
if(i!="type"){
215
this.rawNode.setAttribute(i,this.shape[i]);
216
}
217
}
218
this.bbox=null;
219
return this;
220
},_moveToFront:function(){
221
this.rawNode.parentNode.appendChild(this.rawNode);
222
return this;
223
},_moveToBack:function(){
224
this.rawNode.parentNode.insertBefore(this.rawNode,this.rawNode.parentNode.firstChild);
225
return this;
226
}});
227
dojo.declare("dojox.gfx.Group",g.Shape,{constructor:function(){
228
_1.Container._init.call(this);
229
},setRawNode:function(_16){
230
this.rawNode=_16;
231
}});
232
g.Group.nodeType="g";
233
dojo.declare("dojox.gfx.Rect",gs.Rect,{setShape:function(_17){
234
this.shape=g.makeParameters(this.shape,_17);
235
this.bbox=null;
236
for(var i in this.shape){
237
if(i!="type"&&i!="r"){
238
this.rawNode.setAttribute(i,this.shape[i]);
239
}
240
}
241
if(this.shape.r){
242
this.rawNode.setAttribute("ry",this.shape.r);
243
this.rawNode.setAttribute("rx",this.shape.r);
244
}
245
return this;
246
}});
247
g.Rect.nodeType="rect";
248
g.Ellipse=gs.Ellipse;
249
g.Ellipse.nodeType="ellipse";
250
g.Circle=gs.Circle;
251
g.Circle.nodeType="circle";
252
g.Line=gs.Line;
253
g.Line.nodeType="line";
254
dojo.declare("dojox.gfx.Polyline",gs.Polyline,{setShape:function(_18,_19){
255
if(_18&&_18 instanceof Array){
256
this.shape=g.makeParameters(this.shape,{points:_18});
257
if(_19&&this.shape.points.length){
258
this.shape.points.push(this.shape.points[0]);
259
}
260
}else{
261
this.shape=g.makeParameters(this.shape,_18);
262
}
263
this.bbox=null;
264
this._normalizePoints();
265
var _1a=[],p=this.shape.points;
266
for(var i=0;i<p.length;++i){
267
_1a.push(p[i].x.toFixed(8),p[i].y.toFixed(8));
268
}
269
this.rawNode.setAttribute("points",_1a.join(" "));
270
return this;
271
}});
272
g.Polyline.nodeType="polyline";
273
dojo.declare("dojox.gfx.Image",gs.Image,{setShape:function(_1b){
274
this.shape=g.makeParameters(this.shape,_1b);
275
this.bbox=null;
276
var _1c=this.rawNode;
277
for(var i in this.shape){
278
if(i!="type"&&i!="src"){
279
_1c.setAttribute(i,this.shape[i]);
280
}
281
}
282
_1c.setAttribute("preserveAspectRatio","none");
283
_1c.setAttributeNS(_1.xmlns.xlink,"xlink:href",this.shape.src);
284
return this;
285
}});
286
g.Image.nodeType="image";
287
dojo.declare("dojox.gfx.Text",gs.Text,{setShape:function(_1d){
288
this.shape=g.makeParameters(this.shape,_1d);
289
this.bbox=null;
290
var r=this.rawNode,s=this.shape;
291
r.setAttribute("x",s.x);
292
r.setAttribute("y",s.y);
293
r.setAttribute("text-anchor",s.align);
294
r.setAttribute("text-decoration",s.decoration);
295
r.setAttribute("rotate",s.rotated?90:0);
296
r.setAttribute("kerning",s.kerning?"auto":0);
297
r.setAttribute("text-rendering","optimizeLegibility");
298
if(r.firstChild){
299
r.firstChild.nodeValue=s.text;
300
}else{
301
r.appendChild(_4(s.text));
302
}
303
return this;
304
},getTextWidth:function(){
305
var _1e=this.rawNode,_1f=_1e.parentNode,_20=_1e.cloneNode(true);
306
_20.style.visibility="hidden";
307
var _21=0,_22=_20.firstChild.nodeValue;
308
_1f.appendChild(_20);
309
if(_22!=""){
310
while(!_21){
311
if(_20.getBBox){
312
_21=parseInt(_20.getBBox().width);
313
}else{
314
_21=68;
315
}
316
}
317
}
318
_1f.removeChild(_20);
319
return _21;
320
}});
321
g.Text.nodeType="text";
322
dojo.declare("dojox.gfx.Path",g.path.Path,{_updateWithSegment:function(_23){
323
g.Path.superclass._updateWithSegment.apply(this,arguments);
324
if(typeof (this.shape.path)=="string"){
325
this.rawNode.setAttribute("d",this.shape.path);
326
}
327
},setShape:function(_24){
328
g.Path.superclass.setShape.apply(this,arguments);
329
this.rawNode.setAttribute("d",this.shape.path);
330
return this;
331
}});
332
g.Path.nodeType="path";
333
dojo.declare("dojox.gfx.TextPath",g.path.TextPath,{_updateWithSegment:function(_25){
334
g.Path.superclass._updateWithSegment.apply(this,arguments);
335
this._setTextPath();
336
},setShape:function(_26){
337
g.Path.superclass.setShape.apply(this,arguments);
338
this._setTextPath();
339
return this;
340
},_setTextPath:function(){
341
if(typeof this.shape.path!="string"){
342
return;
343
}
344
var r=this.rawNode;
345
if(!r.firstChild){
346
var tp=_2(_1.xmlns.svg,"textPath"),tx=_4("");
347
tp.appendChild(tx);
348
r.appendChild(tp);
349
}
350
var ref=r.firstChild.getAttributeNS(_1.xmlns.xlink,"href"),_27=ref&&_1.getRef(ref);
351
if(!_27){
352
var _28=this._getParentSurface();
353
if(_28){
354
var _29=_28.defNode;
355
_27=_2(_1.xmlns.svg,"path");
356
var id=g._base._getUniqueId();
357
_27.setAttribute("id",id);
358
_29.appendChild(_27);
359
r.firstChild.setAttributeNS(_1.xmlns.xlink,"xlink:href","#"+id);
360
}
361
}
362
if(_27){
363
_27.setAttribute("d",this.shape.path);
364
}
365
},_setText:function(){
366
var r=this.rawNode;
367
if(!r.firstChild){
368
var tp=_2(_1.xmlns.svg,"textPath"),tx=_4("");
369
tp.appendChild(tx);
370
r.appendChild(tp);
371
}
372
r=r.firstChild;
373
var t=this.text;
374
r.setAttribute("alignment-baseline","middle");
375
switch(t.align){
376
case "middle":
377
r.setAttribute("text-anchor","middle");
378
r.setAttribute("startOffset","50%");
379
break;
380
case "end":
381
r.setAttribute("text-anchor","end");
382
r.setAttribute("startOffset","100%");
383
break;
384
default:
385
r.setAttribute("text-anchor","start");
386
r.setAttribute("startOffset","0%");
387
break;
388
}
389
r.setAttribute("baseline-shift","0.5ex");
390
r.setAttribute("text-decoration",t.decoration);
391
r.setAttribute("rotate",t.rotated?90:0);
392
r.setAttribute("kerning",t.kerning?"auto":0);
393
r.firstChild.data=t.text;
394
}});
395
g.TextPath.nodeType="text";
396
dojo.declare("dojox.gfx.Surface",gs.Surface,{constructor:function(){
397
_1.Container._init.call(this);
398
},destroy:function(){
399
this.defNode=null;
400
this.inherited(arguments);
401
},setDimensions:function(_2a,_2b){
402
if(!this.rawNode){
403
return this;
404
}
405
this.rawNode.setAttribute("width",_2a);
406
this.rawNode.setAttribute("height",_2b);
407
return this;
408
},getDimensions:function(){
409
var t=this.rawNode?{width:g.normalizedLength(this.rawNode.getAttribute("width")),height:g.normalizedLength(this.rawNode.getAttribute("height"))}:null;
410
return t;
411
}});
412
g.createSurface=function(_2c,_2d,_2e){
413
var s=new g.Surface();
414
s.rawNode=_2(_1.xmlns.svg,"svg");
415
if(_2d){
416
s.rawNode.setAttribute("width",_2d);
417
}
418
if(_2e){
419
s.rawNode.setAttribute("height",_2e);
420
}
421
var _2f=_2(_1.xmlns.svg,"defs");
422
s.rawNode.appendChild(_2f);
423
s.defNode=_2f;
424
s._parent=d.byId(_2c);
425
s._parent.appendChild(s.rawNode);
426
return s;
427
};
428
_1.Font={_setFont:function(){
429
var f=this.fontStyle;
430
this.rawNode.setAttribute("font-style",f.style);
431
this.rawNode.setAttribute("font-variant",f.variant);
432
this.rawNode.setAttribute("font-weight",f.weight);
433
this.rawNode.setAttribute("font-size",f.size);
434
this.rawNode.setAttribute("font-family",f.family);
435
}};
436
_1.Container={_init:function(){
437
gs.Container._init.call(this);
438
},openBatch:function(){
439
this.fragment=_6();
440
},closeBatch:function(){
441
if(this.fragment){
442
this.rawNode.appendChild(this.fragment);
443
delete this.fragment;
444
}
445
},add:function(_30){
446
if(this!=_30.getParent()){
447
if(this.fragment){
448
this.fragment.appendChild(_30.rawNode);
449
}else{
450
this.rawNode.appendChild(_30.rawNode);
451
}
452
gs.Container.add.apply(this,arguments);
453
}
454
return this;
455
},remove:function(_31,_32){
456
if(this==_31.getParent()){
457
if(this.rawNode==_31.rawNode.parentNode){
458
this.rawNode.removeChild(_31.rawNode);
459
}
460
if(this.fragment&&this.fragment==_31.rawNode.parentNode){
461
this.fragment.removeChild(_31.rawNode);
462
}
463
gs.Container.remove.apply(this,arguments);
464
}
465
return this;
466
},clear:function(){
467
var r=this.rawNode;
468
while(r.lastChild){
469
r.removeChild(r.lastChild);
470
}
471
var _33=this.defNode;
472
if(_33){
473
while(_33.lastChild){
474
_33.removeChild(_33.lastChild);
475
}
476
r.appendChild(_33);
477
}
478
return gs.Container.clear.apply(this,arguments);
479
},_moveChildToFront:gs.Container._moveChildToFront,_moveChildToBack:gs.Container._moveChildToBack};
480
d.mixin(gs.Creator,{createObject:function(_34,_35){
481
if(!this.rawNode){
482
return null;
483
}
484
var _36=new _34(),_37=_2(_1.xmlns.svg,_34.nodeType);
485
_36.setRawNode(_37);
486
_36.setShape(_35);
487
this.add(_36);
488
return _36;
489
}});
490
d.extend(g.Text,_1.Font);
491
d.extend(g.TextPath,_1.Font);
492
d.extend(g.Group,_1.Container);
493
d.extend(g.Group,gs.Creator);
494
d.extend(g.Surface,_1.Container);
495
d.extend(g.Surface,gs.Creator);
496
if(_1.useSvgWeb){
497
g.createSurface=function(_38,_39,_3a){
498
var s=new g.Surface();
499
if(!_39||!_3a){
500
var pos=d.position(_38);
501
_39=_39||pos.w;
502
_3a=_3a||pos.h;
503
}
504
_38=d.byId(_38);
505
var id=_38.id?_38.id+"_svgweb":g._base._getUniqueId();
506
var _3b=_2(_1.xmlns.svg,"svg");
507
_3b.id=id;
508
_3b.setAttribute("width",_39);
509
_3b.setAttribute("height",_3a);
510
svgweb.appendChild(_3b,_38);
511
_3b.addEventListener("SVGLoad",function(){
512
s.rawNode=this;
513
s.isLoaded=true;
514
var _3c=_2(_1.xmlns.svg,"defs");
515
s.rawNode.appendChild(_3c);
516
s.defNode=_3c;
517
if(s.onLoad){
518
s.onLoad(s);
519
}
520
},false);
521
s.isLoaded=false;
522
return s;
523
};
524
dojo.extend(dojox.gfx.shape.Surface,{destroy:function(){
525
var _3d=this.rawNode;
526
svgweb.removeChild(_3d,_3d.parentNode);
527
}});
528
gs._eventsProcessing.connect=function(_3e,_3f,_40){
529
if(_3e.substring(0,2)==="on"){
530
_3e=_3e.substring(2);
531
}
532
if(arguments.length==2){
533
_40=_3f;
534
}else{
535
_40=d.hitch(_3f,_40);
536
}
537
this.getEventSource().addEventListener(_3e,_40,false);
538
return [this,_3e,_40];
539
};
540
gs._eventsProcessing.disconnect=function(_41){
541
this.getEventSource().removeEventListener(_41[1],_41[2],false);
542
delete _41[0];
543
};
544
dojo.extend(dojox.gfx.Shape,dojox.gfx.shape._eventsProcessing);
545
dojo.extend(dojox.gfx.shape.Surface,dojox.gfx.shape._eventsProcessing);
546
}
547
})();
548
}