source: Dev/trunk/src/client/dojox/gfx/svg_attach.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 7.2 KB
Line 
1define(["dojo/_base/kernel", "dojo/_base/lang", "dojo/_base/array","dojo/_base/Color", "./_base","./svg","./matrix"],
2  function(kernel, lang, arr, Color, g, svg, Matrix){
3
4        kernel.experimental("dojox.gfx.svg_attach");
5       
6        svg.attachNode = function(node){
7                // summary:
8                //              creates a shape from a Node
9                // node: Node
10                //              an SVG node
11                if(!node){
12                        return null;
13                }
14                var s = null;
15                switch(node.tagName.toLowerCase()){
16                        case svg.Rect.nodeType:
17                                s = new svg.Rect(node);
18                                attachRect(s);
19                                break;
20                        case svg.Ellipse.nodeType:
21                                s = new svg.Ellipse(node);
22                                attachShape(s, g.defaultEllipse);
23                                break;
24                        case svg.Polyline.nodeType:
25                                s = new svg.Polyline(node);
26                                attachShape(s, g.defaultPolyline);
27                                break;
28                        case svg.Path.nodeType:
29                                s = new svg.Path(node);
30                                attachShape(s, g.defaultPath);
31                                break;
32                        case svg.Circle.nodeType:
33                                s = new svg.Circle(node);
34                                attachShape(s, g.defaultCircle);
35                                break;
36                        case svg.Line.nodeType:
37                                s = new svg.Line(node);
38                                attachShape(s, g.defaultLine);
39                                break;
40                        case svg.Image.nodeType:
41                                s = new svg.Image(node);
42                                attachShape(s, g.defaultImage);
43                                break;
44                        case svg.Text.nodeType:
45                                var t = node.getElementsByTagName("textPath");
46                                if(t && t.length){
47                                        s = new svg.TextPath(node);
48                                        attachShape(s, g.defaultPath);
49                                        attachTextPath(s);
50                                }else{
51                                        s = new svg.Text(node);
52                                        attachText(s);
53                                }
54                                attachFont(s);
55                                break;
56                        default:
57                                //console.debug("FATAL ERROR! tagName = " + node.tagName);
58                                return null;
59                }
60                if(!(s instanceof svg.Image)){
61                        attachFill(s);
62                        attachStroke(s);
63                }
64                attachTransform(s);
65                return s;       // dojox/gfx/shape.Shape
66        };
67
68        svg.attachSurface = function(node){
69                // summary:
70                //              creates a surface from a Node
71                // node: Node
72                //              an SVG node
73                var s = new svg.Surface();
74                s.rawNode = node;
75                var def_elems = node.getElementsByTagName("defs");
76                if(def_elems.length == 0){
77                        return null;    // dojox/gfx.Surface
78                }
79                s.defNode = def_elems[0];
80                return s;       // dojox/gfx.Surface
81        };
82
83        function attachFill(object){
84                // summary:
85                //              deduces a fill style from a node.
86                // object: dojox/gfx/shape.Shape
87                //              an SVG shape
88                var fill = object.rawNode.getAttribute("fill");
89                if(fill == "none"){
90                        object.fillStyle = null;
91                        return;
92                }
93                var fillStyle = null, gradient = svg.getRef(fill);
94                if(gradient){
95                        switch(gradient.tagName.toLowerCase()){
96                                case "lineargradient":
97                                        fillStyle = _getGradient(g.defaultLinearGradient, gradient);
98                                        arr.forEach(["x1", "y1", "x2", "y2"], function(x){
99                                                fillStyle[x] = gradient.getAttribute(x);
100                                        });
101                                        break;
102                                case "radialgradient":
103                                        fillStyle = _getGradient(g.defaultRadialGradient, gradient);
104                                        arr.forEach(["cx", "cy", "r"], function(x){
105                                                fillStyle[x] = gradient.getAttribute(x);
106                                        });
107                                        fillStyle.cx = gradient.getAttribute("cx");
108                                        fillStyle.cy = gradient.getAttribute("cy");
109                                        fillStyle.r  = gradient.getAttribute("r");
110                                        break;
111                                case "pattern":
112                                        fillStyle = lang.clone(g.defaultPattern);
113                                        arr.forEach(["x", "y", "width", "height"], function(x){
114                                                fillStyle[x] = gradient.getAttribute(x);
115                                        });
116                                        fillStyle.src = gradient.firstChild.getAttributeNS(svg.xmlns.xlink, "href");
117                                        break;
118                        }
119                }else{
120                        fillStyle = new Color(fill);
121                        var opacity = object.rawNode.getAttribute("fill-opacity");
122                        if(opacity != null){ fillStyle.a = opacity; }
123                }
124                object.fillStyle = fillStyle;
125        }
126
127        function _getGradient(defaultGradient, gradient){
128                var fillStyle = lang.clone(defaultGradient);
129                fillStyle.colors = [];
130                for(var i = 0; i < gradient.childNodes.length; ++i){
131                        fillStyle.colors.push({
132                                offset: gradient.childNodes[i].getAttribute("offset"),
133                                color:  new Color(gradient.childNodes[i].getAttribute("stop-color"))
134                        });
135                }
136                return fillStyle;
137        }
138
139        function attachStroke(object){
140                // summary:
141                //              deduces a stroke style from a node.
142                // object: dojox/gfx/shape.Shape
143                //              an SVG shape
144                var rawNode = object.rawNode, stroke = rawNode.getAttribute("stroke");
145                if(stroke == null || stroke == "none"){
146                        object.strokeStyle = null;
147                        return;
148                }
149                var strokeStyle = object.strokeStyle = lang.clone(g.defaultStroke);
150                var color = new Color(stroke);
151                if(color){
152                        strokeStyle.color = color;
153                        strokeStyle.color.a = rawNode.getAttribute("stroke-opacity");
154                        strokeStyle.width = rawNode.getAttribute("stroke-width");
155                        strokeStyle.cap = rawNode.getAttribute("stroke-linecap");
156                        strokeStyle.join = rawNode.getAttribute("stroke-linejoin");
157                        if(strokeStyle.join == "miter"){
158                                strokeStyle.join = rawNode.getAttribute("stroke-miterlimit");
159                        }
160                        strokeStyle.style = rawNode.getAttribute("dojoGfxStrokeStyle");
161                }
162        }
163
164        function attachTransform(object){
165                // summary:
166                //              deduces a transformation matrix from a node.
167                // object: dojox/gfx/shape.Shape
168                //              an SVG shape
169                var matrix = object.rawNode.getAttribute("transform");
170                if(matrix.match(/^matrix\(.+\)$/)){
171                        var t = matrix.slice(7, -1).split(",");
172                        object.matrix = Matrix.normalize({
173                                xx: parseFloat(t[0]), xy: parseFloat(t[2]),
174                                yx: parseFloat(t[1]), yy: parseFloat(t[3]),
175                                dx: parseFloat(t[4]), dy: parseFloat(t[5])
176                        });
177                }else{
178                        object.matrix = null;
179                }
180        }
181
182        function attachFont(object){
183                // summary:
184                //              deduces a font style from a Node.
185                // object: dojox/gfx/shape.Shape
186                //              an SVG shape
187                var fontStyle = object.fontStyle = lang.clone(g.defaultFont),
188                        r = object.rawNode;
189                fontStyle.style = r.getAttribute("font-style");
190                fontStyle.variant = r.getAttribute("font-variant");
191                fontStyle.weight = r.getAttribute("font-weight");
192                fontStyle.size = r.getAttribute("font-size");
193                fontStyle.family = r.getAttribute("font-family");
194        }
195
196        function attachShape(object, def){
197                // summary:
198                //              builds a shape from a node.
199                // object: dojox/gfx/shape.Shape
200                //              an SVG shape
201                // def: Object
202                //              a default shape template
203                var shape = object.shape = lang.clone(def), r = object.rawNode;
204                for(var i in shape) {
205                        shape[i] = r.getAttribute(i);
206                }
207        }
208
209        function attachRect(object){
210                // summary:
211                //              builds a rectangle shape from a node.
212                // object: dojox/gfx/shape.Shape
213                //              an SVG shape
214                attachShape(object, g.defaultRect);
215                object.shape.r = Math.min(object.rawNode.getAttribute("rx"), object.rawNode.getAttribute("ry"));
216        }
217
218        function attachText(object){
219                // summary:
220                //              builds a text shape from a node.
221                // object: dojox/gfx/shape.Shape
222                //              an SVG shape
223                var shape = object.shape = lang.clone(g.defaultText),
224                        r = object.rawNode;
225                shape.x = r.getAttribute("x");
226                shape.y = r.getAttribute("y");
227                shape.align = r.getAttribute("text-anchor");
228                shape.decoration = r.getAttribute("text-decoration");
229                shape.rotated = parseFloat(r.getAttribute("rotate")) != 0;
230                shape.kerning = r.getAttribute("kerning") == "auto";
231                shape.text = r.firstChild.nodeValue;
232        }
233
234        function attachTextPath(object){
235                // summary:
236                //              builds a textpath shape from a node.
237                // object: dojox/gfx/shape.Shape
238                //              an SVG shape
239                var shape = object.shape = lang.clone(g.defaultTextPath),
240                        r = object.rawNode;
241                shape.align = r.getAttribute("text-anchor");
242                shape.decoration = r.getAttribute("text-decoration");
243                shape.rotated = parseFloat(r.getAttribute("rotate")) != 0;
244                shape.kerning = r.getAttribute("kerning") == "auto";
245                shape.text = r.firstChild.nodeValue;
246        }
247
248        return svg; // return augmented svg api
249});
Note: See TracBrowser for help on using the repository browser.