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