1 /*
  2  * Dual-licensed under the MIT License & the Academic Free License v. 2.1.
  3  * See the file LICENSE for more information.
  4  *
  5  * (c) 2007-2008 by Per Cederberg & Dynabyte AB. All rights reserved.
  6  */
  7  
  8  // Check for loaded MochiKit
  9 if (typeof(MochiKit) == "undefined") {
 10     throw new ReferenceError("MochiKit must be loaded before loading this script");
 11 }
 12 
 13 /**
 14  * @name MochiKit.SVG
 15  * @namespace Provides functions for creating embedded SVG images.
 16  */
 17 if (typeof(MochiKit.SVG) == "undefined") {
 18     MochiKit.SVG = {};
 19 }
 20 
 21 /**
 22  * Creates an SVG document node.
 23  *
 24  * @function
 25  * @param {Object} [attrs] the optional node attributes
 26  * @param {Object} [...] the nodes or text to add as children
 27  *
 28  * @return {Node} the SVG DOM document node created
 29  */
 30 MochiKit.SVG.SVG =
 31     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "svg",
 32                                    [],
 33                                    { version: "1.1", baseProfile: "full" });
 34 
 35 /**
 36  * Creates an SVG definitions node.
 37  *
 38  * @function
 39  * @param {Object} [attrs] the optional node attributes
 40  * @param {Object} [...] the nodes or text to add as children
 41  *
 42  * @return {Node} the SVG DOM document node created
 43  */
 44 MochiKit.SVG.DEFS =
 45     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "defs");
 46 
 47 /**
 48  * Creates an SVG group node.
 49  *
 50  * @function
 51  * @param {Object} [attrs] the optional node attributes
 52  * @param {Object} [...] the nodes or text to add as children
 53  *
 54  * @return {Node} the SVG DOM document node created
 55  */
 56 MochiKit.SVG.G =
 57     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "g");
 58 
 59 /**
 60  * Creates an SVG line node.
 61  *
 62  * @function
 63  * @param {String} x1 the x1 coordinate value
 64  * @param {String} y1 the y1 coordinate value
 65  * @param {String} x2 the x2 coordinate value
 66  * @param {String} y2 the y2 coordinate value
 67  * @param {Object} [attrs] the optional node attributes
 68  *
 69  * @return {Node} the SVG DOM document node created
 70  */
 71 MochiKit.SVG.LINE =
 72     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "line",
 73                                   ["x1", "y1", "x2", "y2"]);
 74 
 75 /**
 76  * Creates an SVG rectangle node.
 77  *
 78  * @function
 79  * @param {String} x the x coordinate value
 80  * @param {String} y the y coordinate value
 81  * @param {String} width the width value
 82  * @param {String} height the height value
 83  * @param {Object} [attrs] the optional node attributes
 84  *
 85  * @return {Node} the SVG DOM document node created
 86  */
 87 MochiKit.SVG.RECT =
 88     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "rect",
 89                                   ["x", "y", "width", "height"]);
 90 
 91 /**
 92  * Creates an SVG circle node.
 93  *
 94  * @function
 95  * @param {String} cx the center x coordinate value
 96  * @param {String} cy the center y coordinate value
 97  * @param {String} r the radius value
 98  * @param {Object} [attrs] the optional node attributes
 99  *
100  * @return {Node} the SVG DOM document node created
101  */
102 MochiKit.SVG.CIRCLE =
103     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "circle",
104                                   ["cx", "cy", "r"]);
105 
106 /**
107  * Creates an SVG path node.
108  *
109  * @function
110  * @param {String} d the path data value
111  * @param {Object} [attrs] the optional node attributes
112  *
113  * @return {Node} the SVG DOM document node created
114  */
115 MochiKit.SVG.PATH =
116     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "path",
117                                   ["d"]);
118 
119 /**
120  * Creates an SVG text node.
121  *
122  * @function
123  * @param {String} x the x coordinate value
124  * @param {String} y the y coordinate value
125  * @param {Object} [attrs] the optional node attributes
126  * @param {Object} [...] the text to add as children
127  *
128  * @return {Node} the SVG DOM document node created
129  */
130 MochiKit.SVG.TEXT =
131     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "text",
132                                   ["x", "y"]);
133 
134 /**
135  * Creates an SVG radial gradient node.
136  *
137  * @function
138  * @param {String} id the id of the node
139  * @param {Object} [attrs] the optional node attributes
140  * @param {Object} [...] the stop nodes to add as children
141  *
142  * @return {Node} the SVG DOM document node created
143  */
144 MochiKit.SVG.RADIALGRADIENT =
145     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "radialGradient",
146                                   ["id"],
147                                   { gradientUnits: "objectBoundingBox",
148                                     cx: "0.5", cy: "0.5", r: "0.5" });
149 
150 /**
151  * Creates an SVG gradient stop node.
152  *
153  * @function
154  * @param {String} offset the stop offset
155  * @param {String} color the stop color
156  * @param {Object} [attrs] the optional node attributes
157  *
158  * @return {Node} the SVG DOM document node created
159  */
160 MochiKit.SVG.STOP =
161     MochiKit.DOM.createDOMFuncExt(MochiKit.DOM.NS.SVG, "stop",
162                                   ["offset", "stop-color"]);
163 
164 /**
165  * Moves a node to the top of the SVG drawing order (i.e. z-index).
166  * Note that this will only have effect on other SVG DOM nodes with
167  * the same parent node. Otherwise, the node must be moved down in
168  * the SVG DOM tree by changing parent node.
169  *
170  * @param {Node/String} node the SVG DOM node or unique id
171  */
172 MochiKit.SVG.moveToTop = function(node) {
173     node = MochiKit.DOM.getElement(node);
174     if (node != null) {
175         var parent = node.parentNode;
176         if (parent && parent.lastChild !== node) {
177             parent.appendChild(node);
178         }
179     }
180 }
181 
182 /**
183  * Moves a node to the bottom of the SVG drawing order (i.e. z-index).
184  * Note that this will only have effect on other SVG DOM nodes with
185  * the same parent node. Otherwise, the node must be moved up in
186  * the SVG DOM tree by changing parent node.
187  *
188  * @param {Node/String} node the SVG DOM node or unique id
189  */
190 MochiKit.SVG.moveToBottom = function(node) {
191     node = MochiKit.DOM.getElement(node);
192     if (node != null) {
193         var parent = node.parentNode;
194         if (parent && parent.firstChild !== node) {
195             parent.insertBefore(node, parent.firstChild);
196         }
197     }
198 }
199 
200 /**
201  * Adds a rotation transform to a SVG DOM node. Any previous
202  * rotation transform will be kept intact.
203  *
204  * @param {Node/String} node the SVG DOM node or unique id
205  * @param {String/Number} angle the numeric angle
206  * @param {String/Number} [x] the x coordinate value
207  * @param {String/Number} [y] the y coordinate value
208  */
209 MochiKit.SVG.rotate = function(node, angle, x, y) {
210     var str = MochiKit.DOM.getNodeAttribute(node, "transform");
211     x = x || 0;
212     y = y || 0;
213     if (str == null || str == "") {
214         str = "";
215     } else {
216         str += " ";
217     }
218     str += "rotate(" + angle + "," + x + "," + y + ")";
219     MochiKit.DOM.setNodeAttribute(node, "transform", str);
220 }
221