Mercurial > hg > digilib-old
comparison client/src/main/webapp/jquery/svg/jquery.svg.js @ 892:ba1eb2d821a2 mvnify
rearrange sources to maven directory standard
author | robcast |
---|---|
date | Tue, 19 Apr 2011 18:44:25 +0200 |
parents | client/digitallibrary/jquery/svg/jquery.svg.js@ccf67eaf97ee |
children |
comparison
equal
deleted
inserted
replaced
891:6584af320296 | 892:ba1eb2d821a2 |
---|---|
1 /* http://keith-wood.name/svg.html | |
2 SVG for jQuery v1.4.3. | |
3 Written by Keith Wood (kbwood{at}iinet.com.au) August 2007. | |
4 Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and | |
5 MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. | |
6 Please attribute the author if you use it. */ | |
7 | |
8 (function($) { // Hide scope, no $ conflict | |
9 | |
10 /* SVG manager. | |
11 Use the singleton instance of this class, $.svg, | |
12 to interact with the SVG functionality. */ | |
13 function SVGManager() { | |
14 this._settings = []; // Settings to be remembered per SVG object | |
15 this._extensions = []; // List of SVG extensions added to SVGWrapper | |
16 // for each entry [0] is extension name, [1] is extension class (function) | |
17 // the function takes one parameter - the SVGWrapper instance | |
18 this.regional = []; // Localisations, indexed by language, '' for default (English) | |
19 this.regional[''] = {errorLoadingText: 'Error loading', | |
20 notSupportedText: 'This browser does not support SVG'}; | |
21 this.local = this.regional['']; // Current localisation | |
22 this._uuid = new Date().getTime(); | |
23 this._renesis = detectActiveX('RenesisX.RenesisCtrl'); | |
24 } | |
25 | |
26 /* Determine whether a given ActiveX control is available. | |
27 @param classId (string) the ID for the ActiveX control | |
28 @return (boolean) true if found, false if not */ | |
29 function detectActiveX(classId) { | |
30 try { | |
31 return !!(window.ActiveXObject && new ActiveXObject(classId)); | |
32 } | |
33 catch (e) { | |
34 return false; | |
35 } | |
36 } | |
37 | |
38 var PROP_NAME = 'svgwrapper'; | |
39 | |
40 $.extend(SVGManager.prototype, { | |
41 /* Class name added to elements to indicate already configured with SVG. */ | |
42 markerClassName: 'hasSVG', | |
43 | |
44 /* SVG namespace. */ | |
45 svgNS: 'http://www.w3.org/2000/svg', | |
46 /* XLink namespace. */ | |
47 xlinkNS: 'http://www.w3.org/1999/xlink', | |
48 | |
49 /* SVG wrapper class. */ | |
50 _wrapperClass: SVGWrapper, | |
51 | |
52 /* Camel-case versions of attribute names containing dashes or are reserved words. */ | |
53 _attrNames: {class_: 'class', in_: 'in', | |
54 alignmentBaseline: 'alignment-baseline', baselineShift: 'baseline-shift', | |
55 clipPath: 'clip-path', clipRule: 'clip-rule', | |
56 colorInterpolation: 'color-interpolation', | |
57 colorInterpolationFilters: 'color-interpolation-filters', | |
58 colorRendering: 'color-rendering', dominantBaseline: 'dominant-baseline', | |
59 enableBackground: 'enable-background', fillOpacity: 'fill-opacity', | |
60 fillRule: 'fill-rule', floodColor: 'flood-color', | |
61 floodOpacity: 'flood-opacity', fontFamily: 'font-family', | |
62 fontSize: 'font-size', fontSizeAdjust: 'font-size-adjust', | |
63 fontStretch: 'font-stretch', fontStyle: 'font-style', | |
64 fontVariant: 'font-variant', fontWeight: 'font-weight', | |
65 glyphOrientationHorizontal: 'glyph-orientation-horizontal', | |
66 glyphOrientationVertical: 'glyph-orientation-vertical', | |
67 horizAdvX: 'horiz-adv-x', horizOriginX: 'horiz-origin-x', | |
68 imageRendering: 'image-rendering', letterSpacing: 'letter-spacing', | |
69 lightingColor: 'lighting-color', markerEnd: 'marker-end', | |
70 markerMid: 'marker-mid', markerStart: 'marker-start', | |
71 stopColor: 'stop-color', stopOpacity: 'stop-opacity', | |
72 strikethroughPosition: 'strikethrough-position', | |
73 strikethroughThickness: 'strikethrough-thickness', | |
74 strokeDashArray: 'stroke-dasharray', strokeDashOffset: 'stroke-dashoffset', | |
75 strokeLineCap: 'stroke-linecap', strokeLineJoin: 'stroke-linejoin', | |
76 strokeMiterLimit: 'stroke-miterlimit', strokeOpacity: 'stroke-opacity', | |
77 strokeWidth: 'stroke-width', textAnchor: 'text-anchor', | |
78 textDecoration: 'text-decoration', textRendering: 'text-rendering', | |
79 underlinePosition: 'underline-position', underlineThickness: 'underline-thickness', | |
80 vertAdvY: 'vert-adv-y', vertOriginY: 'vert-origin-y', | |
81 wordSpacing: 'word-spacing', writingMode: 'writing-mode'}, | |
82 | |
83 /* Add the SVG object to its container. */ | |
84 _attachSVG: function(container, settings) { | |
85 var svg = (container.namespaceURI == this.svgNS ? container : null); | |
86 var container = (svg ? null : container); | |
87 if ($(container || svg).hasClass(this.markerClassName)) { | |
88 return; | |
89 } | |
90 if (typeof settings == 'string') { | |
91 settings = {loadURL: settings}; | |
92 } | |
93 else if (typeof settings == 'function') { | |
94 settings = {onLoad: settings}; | |
95 } | |
96 $(container || svg).addClass(this.markerClassName); | |
97 try { | |
98 if (!svg) { | |
99 svg = document.createElementNS(this.svgNS, 'svg'); | |
100 svg.setAttribute('version', '1.1'); | |
101 svg.setAttribute('width', container.clientWidth); | |
102 svg.setAttribute('height', container.clientHeight); | |
103 container.appendChild(svg); | |
104 } | |
105 this._afterLoad(container, svg, settings || {}); | |
106 } | |
107 catch (e) { | |
108 if ($.browser.msie) { | |
109 if (!container.id) { | |
110 container.id = 'svg' + (this._uuid++); | |
111 } | |
112 this._settings[container.id] = settings; | |
113 container.innerHTML = '<embed type="image/svg+xml" width="100%" ' + | |
114 'height="100%" src="' + (settings.initPath || '') + 'blank.svg"/>'; | |
115 } | |
116 else { | |
117 container.innerHTML = '<p class="svg_error">' + | |
118 this.local.notSupportedText + '</p>'; | |
119 } | |
120 } | |
121 }, | |
122 | |
123 /* SVG callback after loading - register SVG root. */ | |
124 _registerSVG: function() { | |
125 for (var i = 0; i < document.embeds.length; i++) { // Check all | |
126 var container = document.embeds[i].parentNode; | |
127 if (!$(container).hasClass($.svg.markerClassName) || // Not SVG | |
128 $.data(container, PROP_NAME)) { // Already done | |
129 continue; | |
130 } | |
131 var svg = null; | |
132 try { | |
133 svg = document.embeds[i].getSVGDocument(); | |
134 } | |
135 catch(e) { | |
136 setTimeout($.svg._registerSVG, 250); // Renesis takes longer to load | |
137 return; | |
138 } | |
139 svg = (svg ? svg.documentElement : null); | |
140 if (svg) { | |
141 $.svg._afterLoad(container, svg); | |
142 } | |
143 } | |
144 }, | |
145 | |
146 /* Post-processing once loaded. */ | |
147 _afterLoad: function(container, svg, settings) { | |
148 var settings = settings || this._settings[container.id]; | |
149 this._settings[container ? container.id : ''] = null; | |
150 var wrapper = new this._wrapperClass(svg, container); | |
151 $.data(container || svg, PROP_NAME, wrapper); | |
152 try { | |
153 if (settings.loadURL) { // Load URL | |
154 wrapper.load(settings.loadURL, settings); | |
155 } | |
156 if (settings.settings) { // Additional settings | |
157 wrapper.configure(settings.settings); | |
158 } | |
159 if (settings.onLoad && !settings.loadURL) { // Onload callback | |
160 settings.onLoad.apply(container || svg, [wrapper]); | |
161 } | |
162 } | |
163 catch (e) { | |
164 alert(e); | |
165 } | |
166 }, | |
167 | |
168 /* Return the SVG wrapper created for a given container. | |
169 @param container (string) selector for the container or | |
170 (element) the container for the SVG object or | |
171 jQuery collection - first entry is the container | |
172 @return (SVGWrapper) the corresponding SVG wrapper element, or null if not attached */ | |
173 _getSVG: function(container) { | |
174 container = (typeof container == 'string' ? $(container)[0] : | |
175 (container.jquery ? container[0] : container)); | |
176 return $.data(container, PROP_NAME); | |
177 }, | |
178 | |
179 /* Remove the SVG functionality from a div. | |
180 @param container (element) the container for the SVG object */ | |
181 _destroySVG: function(container) { | |
182 var $container = $(container); | |
183 if (!$container.hasClass(this.markerClassName)) { | |
184 return; | |
185 } | |
186 $container.removeClass(this.markerClassName); | |
187 if (container.namespaceURI != this.svgNS) { | |
188 $container.empty(); | |
189 } | |
190 $.removeData(container, PROP_NAME); | |
191 }, | |
192 | |
193 /* Extend the SVGWrapper object with an embedded class. | |
194 The constructor function must take a single parameter that is | |
195 a reference to the owning SVG root object. This allows the | |
196 extension to access the basic SVG functionality. | |
197 @param name (string) the name of the SVGWrapper attribute to access the new class | |
198 @param extClass (function) the extension class constructor */ | |
199 addExtension: function(name, extClass) { | |
200 this._extensions.push([name, extClass]); | |
201 } | |
202 }); | |
203 | |
204 /* The main SVG interface, which encapsulates the SVG element. | |
205 Obtain a reference from $().svg('get') */ | |
206 function SVGWrapper(svg, container) { | |
207 this._svg = svg; // The SVG root node | |
208 this._container = container; // The containing div | |
209 for (var i = 0; i < $.svg._extensions.length; i++) { | |
210 var extension = $.svg._extensions[i]; | |
211 this[extension[0]] = new extension[1](this); | |
212 } | |
213 } | |
214 | |
215 $.extend(SVGWrapper.prototype, { | |
216 | |
217 /* Retrieve the width of the SVG object. */ | |
218 _width: function() { | |
219 return (this._container ? this._container.clientWidth : this._svg.width); | |
220 }, | |
221 | |
222 /* Retrieve the height of the SVG object. */ | |
223 _height: function() { | |
224 return (this._container ? this._container.clientHeight : this._svg.height); | |
225 }, | |
226 | |
227 /* Retrieve the root SVG element. | |
228 @return the top-level SVG element */ | |
229 root: function() { | |
230 return this._svg; | |
231 }, | |
232 | |
233 /* Configure the SVG root. | |
234 @param settings (object) additional settings for the root | |
235 @param clear (boolean) true to remove existing attributes first, | |
236 false to add to what is already there (optional) | |
237 @return (SVGWrapper) this root */ | |
238 configure: function(settings, clear) { | |
239 if (clear) { | |
240 for (var i = this._svg.attributes.length - 1; i >= 0; i--) { | |
241 var attr = this._svg.attributes.item(i); | |
242 if (!(attr.nodeName == 'onload' || attr.nodeName == 'version' || | |
243 attr.nodeName.substring(0, 5) == 'xmlns')) { | |
244 this._svg.attributes.removeNamedItem(attr.nodeName); | |
245 } | |
246 } | |
247 } | |
248 for (var attrName in settings) { | |
249 this._svg.setAttribute(attrName, settings[attrName]); | |
250 } | |
251 return this; | |
252 }, | |
253 | |
254 /* Locate a specific element in the SVG document. | |
255 @param id (string) the element's identifier | |
256 @return (element) the element reference, or null if not found */ | |
257 getElementById: function(id) { | |
258 return this._svg.ownerDocument.getElementById(id); | |
259 }, | |
260 | |
261 /* Change the attributes for a SVG node. | |
262 @param element (SVG element) the node to change | |
263 @param settings (object) the new settings | |
264 @return (SVGWrapper) this root */ | |
265 change: function(element, settings) { | |
266 if (element) { | |
267 for (var name in settings) { | |
268 if (settings[name] == null) { | |
269 element.removeAttribute(name); | |
270 } | |
271 else { | |
272 element.setAttribute(name, settings[name]); | |
273 } | |
274 } | |
275 } | |
276 return this; | |
277 }, | |
278 | |
279 /* Check for parent being absent and adjust arguments accordingly. */ | |
280 _args: function(values, names, optSettings) { | |
281 names.splice(0, 0, 'parent'); | |
282 names.splice(names.length, 0, 'settings'); | |
283 var args = {}; | |
284 var offset = 0; | |
285 if (values[0] != null && values[0].jquery) { | |
286 values[0] = values[0][0]; | |
287 } | |
288 if (values[0] != null && !(typeof values[0] == 'object' && values[0].nodeName)) { | |
289 args['parent'] = null; | |
290 offset = 1; | |
291 } | |
292 for (var i = 0; i < values.length; i++) { | |
293 args[names[i + offset]] = values[i]; | |
294 } | |
295 if (optSettings) { | |
296 $.each(optSettings, function(i, value) { | |
297 if (typeof args[value] == 'object') { | |
298 args.settings = args[value]; | |
299 args[value] = null; | |
300 } | |
301 }); | |
302 } | |
303 return args; | |
304 }, | |
305 | |
306 /* Add a title. | |
307 @param parent (element or jQuery) the parent node for the new title (optional) | |
308 @param text (string) the text of the title | |
309 @param settings (object) additional settings for the title (optional) | |
310 @return (element) the new title node */ | |
311 title: function(parent, text, settings) { | |
312 var args = this._args(arguments, ['text']); | |
313 var node = this._makeNode(args.parent, 'title', args.settings || {}); | |
314 node.appendChild(this._svg.ownerDocument.createTextNode(args.text)); | |
315 return node; | |
316 }, | |
317 | |
318 /* Add a description. | |
319 @param parent (element or jQuery) the parent node for the new description (optional) | |
320 @param text (string) the text of the description | |
321 @param settings (object) additional settings for the description (optional) | |
322 @return (element) the new description node */ | |
323 describe: function(parent, text, settings) { | |
324 var args = this._args(arguments, ['text']); | |
325 var node = this._makeNode(args.parent, 'desc', args.settings || {}); | |
326 node.appendChild(this._svg.ownerDocument.createTextNode(args.text)); | |
327 return node; | |
328 }, | |
329 | |
330 /* Add a definitions node. | |
331 @param parent (element or jQuery) the parent node for the new definitions (optional) | |
332 @param id (string) the ID of this definitions (optional) | |
333 @param settings (object) additional settings for the definitions (optional) | |
334 @return (element) the new definitions node */ | |
335 defs: function(parent, id, settings) { | |
336 var args = this._args(arguments, ['id'], ['id']); | |
337 return this._makeNode(args.parent, 'defs', $.extend( | |
338 (args.id ? {id: args.id} : {}), args.settings || {})); | |
339 }, | |
340 | |
341 /* Add a symbol definition. | |
342 @param parent (element or jQuery) the parent node for the new symbol (optional) | |
343 @param id (string) the ID of this symbol | |
344 @param x1 (number) the left coordinate for this symbol | |
345 @param y1 (number) the top coordinate for this symbol | |
346 @param width (number) the width of this symbol | |
347 @param height (number) the height of this symbol | |
348 @param settings (object) additional settings for the symbol (optional) | |
349 @return (element) the new symbol node */ | |
350 symbol: function(parent, id, x1, y1, width, height, settings) { | |
351 var args = this._args(arguments, ['id', 'x1', 'y1', 'width', 'height']); | |
352 return this._makeNode(args.parent, 'symbol', $.extend({id: args.id, | |
353 viewBox: args.x1 + ' ' + args.y1 + ' ' + args.width + ' ' + args.height}, | |
354 args.settings || {})); | |
355 }, | |
356 | |
357 /* Add a marker definition. | |
358 @param parent (element or jQuery) the parent node for the new marker (optional) | |
359 @param id (string) the ID of this marker | |
360 @param refX (number) the x-coordinate for the reference point | |
361 @param refY (number) the y-coordinate for the reference point | |
362 @param mWidth (number) the marker viewport width | |
363 @param mHeight (number) the marker viewport height | |
364 @param orient (string or int) 'auto' or angle (degrees) (optional) | |
365 @param settings (object) additional settings for the marker (optional) | |
366 @return (element) the new marker node */ | |
367 marker: function(parent, id, refX, refY, mWidth, mHeight, orient, settings) { | |
368 var args = this._args(arguments, ['id', 'refX', 'refY', | |
369 'mWidth', 'mHeight', 'orient'], ['orient']); | |
370 return this._makeNode(args.parent, 'marker', $.extend( | |
371 {id: args.id, refX: args.refX, refY: args.refY, markerWidth: args.mWidth, | |
372 markerHeight: args.mHeight, orient: args.orient || 'auto'}, args.settings || {})); | |
373 }, | |
374 | |
375 /* Add a style node. | |
376 @param parent (element or jQuery) the parent node for the new node (optional) | |
377 @param styles (string) the CSS styles | |
378 @param settings (object) additional settings for the node (optional) | |
379 @return (element) the new style node */ | |
380 style: function(parent, styles, settings) { | |
381 var args = this._args(arguments, ['styles']); | |
382 var node = this._makeNode(args.parent, 'style', $.extend( | |
383 {type: 'text/css'}, args.settings || {})); | |
384 node.appendChild(this._svg.ownerDocument.createTextNode(args.styles)); | |
385 if ($.browser.opera) { | |
386 $('head').append('<style type="text/css">' + args.styles + '</style>'); | |
387 } | |
388 return node; | |
389 }, | |
390 | |
391 /* Add a script node. | |
392 @param parent (element or jQuery) the parent node for the new node (optional) | |
393 @param script (string) the JavaScript code | |
394 @param type (string) the MIME type for the code (optional, default 'text/javascript') | |
395 @param settings (object) additional settings for the node (optional) | |
396 @return (element) the new script node */ | |
397 script: function(parent, script, type, settings) { | |
398 var args = this._args(arguments, ['script', 'type'], ['type']); | |
399 var node = this._makeNode(args.parent, 'script', $.extend( | |
400 {type: args.type || 'text/javascript'}, args.settings || {})); | |
401 node.appendChild(this._svg.ownerDocument.createTextNode(this._escapeXML(args.script))); | |
402 if (!$.browser.mozilla) { | |
403 $.globalEval(args.script); | |
404 } | |
405 return node; | |
406 }, | |
407 | |
408 /* Add a linear gradient definition. | |
409 Specify all of x1, y1, x2, y2 or none of them. | |
410 @param parent (element or jQuery) the parent node for the new gradient (optional) | |
411 @param id (string) the ID for this gradient | |
412 @param stops (string[][]) the gradient stops, each entry is | |
413 [0] is offset (0.0-1.0 or 0%-100%), [1] is colour, | |
414 [2] is opacity (optional) | |
415 @param x1 (number) the x-coordinate of the gradient start (optional) | |
416 @param y1 (number) the y-coordinate of the gradient start (optional) | |
417 @param x2 (number) the x-coordinate of the gradient end (optional) | |
418 @param y2 (number) the y-coordinate of the gradient end (optional) | |
419 @param settings (object) additional settings for the gradient (optional) | |
420 @return (element) the new gradient node */ | |
421 linearGradient: function(parent, id, stops, x1, y1, x2, y2, settings) { | |
422 var args = this._args(arguments, | |
423 ['id', 'stops', 'x1', 'y1', 'x2', 'y2'], ['x1']); | |
424 var sets = $.extend({id: args.id}, | |
425 (args.x1 != null ? {x1: args.x1, y1: args.y1, x2: args.x2, y2: args.y2} : {})); | |
426 return this._gradient(args.parent, 'linearGradient', | |
427 $.extend(sets, args.settings || {}), args.stops); | |
428 }, | |
429 | |
430 /* Add a radial gradient definition. | |
431 Specify all of cx, cy, r, fx, fy or none of them. | |
432 @param parent (element or jQuery) the parent node for the new gradient (optional) | |
433 @param id (string) the ID for this gradient | |
434 @param stops (string[][]) the gradient stops, each entry | |
435 [0] is offset, [1] is colour, [2] is opacity (optional) | |
436 @param cx (number) the x-coordinate of the largest circle centre (optional) | |
437 @param cy (number) the y-coordinate of the largest circle centre (optional) | |
438 @param r (number) the radius of the largest circle (optional) | |
439 @param fx (number) the x-coordinate of the gradient focus (optional) | |
440 @param fy (number) the y-coordinate of the gradient focus (optional) | |
441 @param settings (object) additional settings for the gradient (optional) | |
442 @return (element) the new gradient node */ | |
443 radialGradient: function(parent, id, stops, cx, cy, r, fx, fy, settings) { | |
444 var args = this._args(arguments, | |
445 ['id', 'stops', 'cx', 'cy', 'r', 'fx', 'fy'], ['cx']); | |
446 var sets = $.extend({id: args.id}, (args.cx != null ? | |
447 {cx: args.cx, cy: args.cy, r: args.r, fx: args.fx, fy: args.fy} : {})); | |
448 return this._gradient(args.parent, 'radialGradient', | |
449 $.extend(sets, args.settings || {}), args.stops); | |
450 }, | |
451 | |
452 /* Add a gradient node. */ | |
453 _gradient: function(parent, name, settings, stops) { | |
454 var node = this._makeNode(parent, name, settings); | |
455 for (var i = 0; i < stops.length; i++) { | |
456 var stop = stops[i]; | |
457 this._makeNode(node, 'stop', $.extend( | |
458 {offset: stop[0], stopColor: stop[1]}, | |
459 (stop[2] != null ? {stopOpacity: stop[2]} : {}))); | |
460 } | |
461 return node; | |
462 }, | |
463 | |
464 /* Add a pattern definition. | |
465 Specify all of vx, vy, xwidth, vheight or none of them. | |
466 @param parent (element or jQuery) the parent node for the new pattern (optional) | |
467 @param id (string) the ID for this pattern | |
468 @param x (number) the x-coordinate for the left edge of the pattern | |
469 @param y (number) the y-coordinate for the top edge of the pattern | |
470 @param width (number) the width of the pattern | |
471 @param height (number) the height of the pattern | |
472 @param vx (number) the minimum x-coordinate for view box (optional) | |
473 @param vy (number) the minimum y-coordinate for the view box (optional) | |
474 @param vwidth (number) the width of the view box (optional) | |
475 @param vheight (number) the height of the view box (optional) | |
476 @param settings (object) additional settings for the pattern (optional) | |
477 @return (element) the new pattern node */ | |
478 pattern: function(parent, id, x, y, width, height, vx, vy, vwidth, vheight, settings) { | |
479 var args = this._args(arguments, ['id', 'x', 'y', 'width', 'height', | |
480 'vx', 'vy', 'vwidth', 'vheight'], ['vx']); | |
481 var sets = $.extend({id: args.id, x: args.x, y: args.y, | |
482 width: args.width, height: args.height}, (args.vx != null ? | |
483 {viewBox: args.vx + ' ' + args.vy + ' ' + args.vwidth + ' ' + args.vheight} : {})); | |
484 return this._makeNode(args.parent, 'pattern', $.extend(sets, args.settings || {})); | |
485 }, | |
486 | |
487 /* Add a mask definition. | |
488 @param parent (element or jQuery) the parent node for the new mask (optional) | |
489 @param id (string) the ID for this mask | |
490 @param x (number) the x-coordinate for the left edge of the mask | |
491 @param y (number) the y-coordinate for the top edge of the mask | |
492 @param width (number) the width of the mask | |
493 @param height (number) the height of the mask | |
494 @param settings (object) additional settings for the mask (optional) | |
495 @return (element) the new mask node */ | |
496 mask: function(parent, id, x, y, width, height, settings) { | |
497 var args = this._args(arguments, ['id', 'x', 'y', 'width', 'height']); | |
498 return this._makeNode(args.parent, 'mask', $.extend( | |
499 {id: args.id, x: args.x, y: args.y, width: args.width, height: args.height}, | |
500 args.settings || {})); | |
501 }, | |
502 | |
503 /* Create a new path object. | |
504 @return (SVGPath) a new path object */ | |
505 createPath: function() { | |
506 return new SVGPath(); | |
507 }, | |
508 | |
509 /* Create a new text object. | |
510 @return (SVGText) a new text object */ | |
511 createText: function() { | |
512 return new SVGText(); | |
513 }, | |
514 | |
515 /* Add an embedded SVG element. | |
516 Specify all of vx, vy, vwidth, vheight or none of them. | |
517 @param parent (element or jQuery) the parent node for the new node (optional) | |
518 @param x (number) the x-coordinate for the left edge of the node | |
519 @param y (number) the y-coordinate for the top edge of the node | |
520 @param width (number) the width of the node | |
521 @param height (number) the height of the node | |
522 @param vx (number) the minimum x-coordinate for view box (optional) | |
523 @param vy (number) the minimum y-coordinate for the view box (optional) | |
524 @param vwidth (number) the width of the view box (optional) | |
525 @param vheight (number) the height of the view box (optional) | |
526 @param settings (object) additional settings for the node (optional) | |
527 @return (element) the new node */ | |
528 svg: function(parent, x, y, width, height, vx, vy, vwidth, vheight, settings) { | |
529 var args = this._args(arguments, ['x', 'y', 'width', 'height', | |
530 'vx', 'vy', 'vwidth', 'vheight'], ['vx']); | |
531 var sets = $.extend({x: args.x, y: args.y, width: args.width, height: args.height}, | |
532 (args.vx != null ? {viewBox: args.vx + ' ' + args.vy + ' ' + | |
533 args.vwidth + ' ' + args.vheight} : {})); | |
534 return this._makeNode(args.parent, 'svg', $.extend(sets, args.settings || {})); | |
535 }, | |
536 | |
537 /* Create a group. | |
538 @param parent (element or jQuery) the parent node for the new group (optional) | |
539 @param id (string) the ID of this group (optional) | |
540 @param settings (object) additional settings for the group (optional) | |
541 @return (element) the new group node */ | |
542 group: function(parent, id, settings) { | |
543 var args = this._args(arguments, ['id'], ['id']); | |
544 return this._makeNode(args.parent, 'g', $.extend({id: args.id}, args.settings || {})); | |
545 }, | |
546 | |
547 /* Add a usage reference. | |
548 Specify all of x, y, width, height or none of them. | |
549 @param parent (element or jQuery) the parent node for the new node (optional) | |
550 @param x (number) the x-coordinate for the left edge of the node (optional) | |
551 @param y (number) the y-coordinate for the top edge of the node (optional) | |
552 @param width (number) the width of the node (optional) | |
553 @param height (number) the height of the node (optional) | |
554 @param ref (string) the ID of the definition node | |
555 @param settings (object) additional settings for the node (optional) | |
556 @return (element) the new node */ | |
557 use: function(parent, x, y, width, height, ref, settings) { | |
558 var args = this._args(arguments, ['x', 'y', 'width', 'height', 'ref']); | |
559 if (typeof args.x == 'string') { | |
560 args.ref = args.x; | |
561 args.settings = args.y; | |
562 args.x = args.y = args.width = args.height = null; | |
563 } | |
564 var node = this._makeNode(args.parent, 'use', $.extend( | |
565 {x: args.x, y: args.y, width: args.width, height: args.height}, | |
566 args.settings || {})); | |
567 node.setAttributeNS($.svg.xlinkNS, 'href', args.ref); | |
568 return node; | |
569 }, | |
570 | |
571 /* Add a link, which applies to all child elements. | |
572 @param parent (element or jQuery) the parent node for the new link (optional) | |
573 @param ref (string) the target URL | |
574 @param settings (object) additional settings for the link (optional) | |
575 @return (element) the new link node */ | |
576 link: function(parent, ref, settings) { | |
577 var args = this._args(arguments, ['ref']); | |
578 var node = this._makeNode(args.parent, 'a', args.settings); | |
579 node.setAttributeNS($.svg.xlinkNS, 'href', args.ref); | |
580 return node; | |
581 }, | |
582 | |
583 /* Add an image. | |
584 @param parent (element or jQuery) the parent node for the new image (optional) | |
585 @param x (number) the x-coordinate for the left edge of the image | |
586 @param y (number) the y-coordinate for the top edge of the image | |
587 @param width (number) the width of the image | |
588 @param height (number) the height of the image | |
589 @param ref (string) the path to the image | |
590 @param settings (object) additional settings for the image (optional) | |
591 @return (element) the new image node */ | |
592 image: function(parent, x, y, width, height, ref, settings) { | |
593 var args = this._args(arguments, ['x', 'y', 'width', 'height', 'ref']); | |
594 var node = this._makeNode(args.parent, 'image', $.extend( | |
595 {x: args.x, y: args.y, width: args.width, height: args.height}, | |
596 args.settings || {})); | |
597 node.setAttributeNS($.svg.xlinkNS, 'href', args.ref); | |
598 return node; | |
599 }, | |
600 | |
601 /* Draw a path. | |
602 @param parent (element or jQuery) the parent node for the new shape (optional) | |
603 @param path (string or SVGPath) the path to draw | |
604 @param settings (object) additional settings for the shape (optional) | |
605 @return (element) the new shape node */ | |
606 path: function(parent, path, settings) { | |
607 var args = this._args(arguments, ['path']); | |
608 return this._makeNode(args.parent, 'path', $.extend( | |
609 {d: (args.path.path ? args.path.path() : args.path)}, args.settings || {})); | |
610 }, | |
611 | |
612 /* Draw a rectangle. | |
613 Specify both of rx and ry or neither. | |
614 @param parent (element or jQuery) the parent node for the new shape (optional) | |
615 @param x (number) the x-coordinate for the left edge of the rectangle | |
616 @param y (number) the y-coordinate for the top edge of the rectangle | |
617 @param width (number) the width of the rectangle | |
618 @param height (number) the height of the rectangle | |
619 @param rx (number) the x-radius of the ellipse for the rounded corners (optional) | |
620 @param ry (number) the y-radius of the ellipse for the rounded corners (optional) | |
621 @param settings (object) additional settings for the shape (optional) | |
622 @return (element) the new shape node */ | |
623 rect: function(parent, x, y, width, height, rx, ry, settings) { | |
624 var args = this._args(arguments, ['x', 'y', 'width', 'height', 'rx', 'ry'], ['rx']); | |
625 return this._makeNode(args.parent, 'rect', $.extend( | |
626 {x: args.x, y: args.y, width: args.width, height: args.height}, | |
627 (args.rx ? {rx: args.rx, ry: args.ry} : {}), args.settings || {})); | |
628 }, | |
629 | |
630 /* Draw a circle. | |
631 @param parent (element or jQuery) the parent node for the new shape (optional) | |
632 @param cx (number) the x-coordinate for the centre of the circle | |
633 @param cy (number) the y-coordinate for the centre of the circle | |
634 @param r (number) the radius of the circle | |
635 @param settings (object) additional settings for the shape (optional) | |
636 @return (element) the new shape node */ | |
637 circle: function(parent, cx, cy, r, settings) { | |
638 var args = this._args(arguments, ['cx', 'cy', 'r']); | |
639 return this._makeNode(args.parent, 'circle', $.extend( | |
640 {cx: args.cx, cy: args.cy, r: args.r}, args.settings || {})); | |
641 }, | |
642 | |
643 /* Draw an ellipse. | |
644 @param parent (element or jQuery) the parent node for the new shape (optional) | |
645 @param cx (number) the x-coordinate for the centre of the ellipse | |
646 @param cy (number) the y-coordinate for the centre of the ellipse | |
647 @param rx (number) the x-radius of the ellipse | |
648 @param ry (number) the y-radius of the ellipse | |
649 @param settings (object) additional settings for the shape (optional) | |
650 @return (element) the new shape node */ | |
651 ellipse: function(parent, cx, cy, rx, ry, settings) { | |
652 var args = this._args(arguments, ['cx', 'cy', 'rx', 'ry']); | |
653 return this._makeNode(args.parent, 'ellipse', $.extend( | |
654 {cx: args.cx, cy: args.cy, rx: args.rx, ry: args.ry}, args.settings || {})); | |
655 }, | |
656 | |
657 /* Draw a line. | |
658 @param parent (element or jQuery) the parent node for the new shape (optional) | |
659 @param x1 (number) the x-coordinate for the start of the line | |
660 @param y1 (number) the y-coordinate for the start of the line | |
661 @param x2 (number) the x-coordinate for the end of the line | |
662 @param y2 (number) the y-coordinate for the end of the line | |
663 @param settings (object) additional settings for the shape (optional) | |
664 @return (element) the new shape node */ | |
665 line: function(parent, x1, y1, x2, y2, settings) { | |
666 var args = this._args(arguments, ['x1', 'y1', 'x2', 'y2']); | |
667 return this._makeNode(args.parent, 'line', $.extend( | |
668 {x1: args.x1, y1: args.y1, x2: args.x2, y2: args.y2}, args.settings || {})); | |
669 }, | |
670 | |
671 /* Draw a polygonal line. | |
672 @param parent (element or jQuery) the parent node for the new shape (optional) | |
673 @param points (number[][]) the x-/y-coordinates for the points on the line | |
674 @param settings (object) additional settings for the shape (optional) | |
675 @return (element) the new shape node */ | |
676 polyline: function(parent, points, settings) { | |
677 var args = this._args(arguments, ['points']); | |
678 return this._poly(args.parent, 'polyline', args.points, args.settings); | |
679 }, | |
680 | |
681 /* Draw a polygonal shape. | |
682 @param parent (element or jQuery) the parent node for the new shape (optional) | |
683 @param points (number[][]) the x-/y-coordinates for the points on the shape | |
684 @param settings (object) additional settings for the shape (optional) | |
685 @return (element) the new shape node */ | |
686 polygon: function(parent, points, settings) { | |
687 var args = this._args(arguments, ['points']); | |
688 return this._poly(args.parent, 'polygon', args.points, args.settings); | |
689 }, | |
690 | |
691 /* Draw a polygonal line or shape. */ | |
692 _poly: function(parent, name, points, settings) { | |
693 var ps = ''; | |
694 for (var i = 0; i < points.length; i++) { | |
695 ps += points[i].join() + ' '; | |
696 } | |
697 return this._makeNode(parent, name, $.extend( | |
698 {points: $.trim(ps)}, settings || {})); | |
699 }, | |
700 | |
701 /* Draw text. | |
702 Specify both of x and y or neither of them. | |
703 @param parent (element or jQuery) the parent node for the text (optional) | |
704 @param x (number or number[]) the x-coordinate(s) for the text (optional) | |
705 @param y (number or number[]) the y-coordinate(s) for the text (optional) | |
706 @param value (string) the text content or | |
707 (SVGText) text with spans and references | |
708 @param settings (object) additional settings for the text (optional) | |
709 @return (element) the new text node */ | |
710 text: function(parent, x, y, value, settings) { | |
711 var args = this._args(arguments, ['x', 'y', 'value']); | |
712 if (typeof args.x == 'string' && arguments.length < 4) { | |
713 args.value = args.x; | |
714 args.settings = args.y; | |
715 args.x = args.y = null; | |
716 } | |
717 return this._text(args.parent, 'text', args.value, $.extend( | |
718 {x: (args.x && isArray(args.x) ? args.x.join(' ') : args.x), | |
719 y: (args.y && isArray(args.y) ? args.y.join(' ') : args.y)}, | |
720 args.settings || {})); | |
721 }, | |
722 | |
723 /* Draw text along a path. | |
724 @param parent (element or jQuery) the parent node for the text (optional) | |
725 @param path (string) the ID of the path | |
726 @param value (string) the text content or | |
727 (SVGText) text with spans and references | |
728 @param settings (object) additional settings for the text (optional) | |
729 @return (element) the new text node */ | |
730 textpath: function(parent, path, value, settings) { | |
731 var args = this._args(arguments, ['path', 'value']); | |
732 var node = this._text(args.parent, 'textPath', args.value, args.settings || {}); | |
733 node.setAttributeNS($.svg.xlinkNS, 'href', args.path); | |
734 return node; | |
735 }, | |
736 | |
737 /* Draw text. */ | |
738 _text: function(parent, name, value, settings) { | |
739 var node = this._makeNode(parent, name, settings); | |
740 if (typeof value == 'string') { | |
741 node.appendChild(node.ownerDocument.createTextNode(value)); | |
742 } | |
743 else { | |
744 for (var i = 0; i < value._parts.length; i++) { | |
745 var part = value._parts[i]; | |
746 if (part[0] == 'tspan') { | |
747 var child = this._makeNode(node, part[0], part[2]); | |
748 child.appendChild(node.ownerDocument.createTextNode(part[1])); | |
749 node.appendChild(child); | |
750 } | |
751 else if (part[0] == 'tref') { | |
752 var child = this._makeNode(node, part[0], part[2]); | |
753 child.setAttributeNS($.svg.xlinkNS, 'href', part[1]); | |
754 node.appendChild(child); | |
755 } | |
756 else if (part[0] == 'textpath') { | |
757 var set = $.extend({}, part[2]); | |
758 set.href = null; | |
759 var child = this._makeNode(node, part[0], set); | |
760 child.setAttributeNS($.svg.xlinkNS, 'href', part[2].href); | |
761 child.appendChild(node.ownerDocument.createTextNode(part[1])); | |
762 node.appendChild(child); | |
763 } | |
764 else { // straight text | |
765 node.appendChild(node.ownerDocument.createTextNode(part[1])); | |
766 } | |
767 } | |
768 } | |
769 return node; | |
770 }, | |
771 | |
772 /* Add a custom SVG element. | |
773 @param parent (element or jQuery) the parent node for the new element (optional) | |
774 @param name (string) the name of the element | |
775 @param settings (object) additional settings for the element (optional) | |
776 @return (element) the new custom node */ | |
777 other: function(parent, name, settings) { | |
778 var args = this._args(arguments, ['name']); | |
779 return this._makeNode(args.parent, args.name, args.settings || {}); | |
780 }, | |
781 | |
782 /* Create a shape node with the given settings. */ | |
783 _makeNode: function(parent, name, settings) { | |
784 parent = parent || this._svg; | |
785 var node = this._svg.ownerDocument.createElementNS($.svg.svgNS, name); | |
786 for (var name in settings) { | |
787 var value = settings[name]; | |
788 if (value != null && value != null && | |
789 (typeof value != 'string' || value != '')) { | |
790 node.setAttribute($.svg._attrNames[name] || name, value); | |
791 } | |
792 } | |
793 parent.appendChild(node); | |
794 return node; | |
795 }, | |
796 | |
797 /* Add an existing SVG node to the diagram. | |
798 @param parent (element or jQuery) the parent node for the new node (optional) | |
799 @param node (element) the new node to add or | |
800 (string) the jQuery selector for the node or | |
801 (jQuery collection) set of nodes to add | |
802 @return (SVGWrapper) this wrapper */ | |
803 add: function(parent, node) { | |
804 var args = this._args((arguments.length == 1 ? [null, parent] : arguments), ['node']); | |
805 var svg = this; | |
806 args.parent = args.parent || this._svg; | |
807 try { | |
808 if ($.svg._renesis) { | |
809 throw 'Force traversal'; | |
810 } | |
811 args.parent.appendChild(args.node.cloneNode(true)); | |
812 } | |
813 catch (e) { | |
814 args.node = (args.node.jquery ? args.node : $(args.node)); | |
815 args.node.each(function() { | |
816 var child = svg._cloneAsSVG(this); | |
817 if (child) { | |
818 args.parent.appendChild(child); | |
819 } | |
820 }); | |
821 } | |
822 return this; | |
823 }, | |
824 | |
825 /* SVG nodes must belong to the SVG namespace, so clone and ensure this is so. */ | |
826 _cloneAsSVG: function(node) { | |
827 var newNode = null; | |
828 if (node.nodeType == 1) { // element | |
829 newNode = this._svg.ownerDocument.createElementNS( | |
830 $.svg.svgNS, this._checkName(node.nodeName)); | |
831 for (var i = 0; i < node.attributes.length; i++) { | |
832 var attr = node.attributes.item(i); | |
833 if (attr.nodeName != 'xmlns' && attr.nodeValue) { | |
834 if (attr.prefix == 'xlink') { | |
835 newNode.setAttributeNS($.svg.xlinkNS, attr.localName, attr.nodeValue); | |
836 } | |
837 else { | |
838 newNode.setAttribute(this._checkName(attr.nodeName), attr.nodeValue); | |
839 } | |
840 } | |
841 } | |
842 for (var i = 0; i < node.childNodes.length; i++) { | |
843 var child = this._cloneAsSVG(node.childNodes[i]); | |
844 if (child) { | |
845 newNode.appendChild(child); | |
846 } | |
847 } | |
848 } | |
849 else if (node.nodeType == 3) { // text | |
850 if ($.trim(node.nodeValue)) { | |
851 newNode = this._svg.ownerDocument.createTextNode(node.nodeValue); | |
852 } | |
853 } | |
854 else if (node.nodeType == 4) { // CDATA | |
855 if ($.trim(node.nodeValue)) { | |
856 try { | |
857 newNode = this._svg.ownerDocument.createCDATASection(node.nodeValue); | |
858 } | |
859 catch (e) { | |
860 newNode = this._svg.ownerDocument.createTextNode( | |
861 node.nodeValue.replace(/&/g, '&'). | |
862 replace(/</g, '<').replace(/>/g, '>')); | |
863 } | |
864 } | |
865 } | |
866 return newNode; | |
867 }, | |
868 | |
869 /* Node names must be lower case and without SVG namespace prefix. */ | |
870 _checkName: function(name) { | |
871 name = (name.substring(0, 1) >= 'A' && name.substring(0, 1) <= 'Z' ? | |
872 name.toLowerCase() : name); | |
873 return (name.substring(0, 4) == 'svg:' ? name.substring(4) : name); | |
874 }, | |
875 | |
876 /* Load an external SVG document. | |
877 @param url (string) the location of the SVG document or | |
878 the actual SVG content | |
879 @param settings (boolean) see addTo below or | |
880 (function) see onLoad below or | |
881 (object) additional settings for the load with attributes below: | |
882 addTo (boolean) true to add to what's already there, | |
883 or false to clear the canvas first | |
884 changeSize (boolean) true to allow the canvas size to change, | |
885 or false to retain the original | |
886 onLoad (function) callback after the document has loaded, | |
887 'this' is the container, receives SVG object and | |
888 optional error message as a parameter | |
889 @return (SVGWrapper) this root */ | |
890 load: function(url, settings) { | |
891 settings = (typeof settings == 'boolean'? {addTo: settings} : | |
892 (typeof settings == 'function'? {onLoad: settings} : settings || {})); | |
893 if (!settings.addTo) { | |
894 this.clear(false); | |
895 } | |
896 var size = [this._svg.getAttribute('width'), this._svg.getAttribute('height')]; | |
897 var wrapper = this; | |
898 // Report a problem with the load | |
899 var reportError = function(message) { | |
900 message = $.svg.local.errorLoadingText + ': ' + message; | |
901 if (settings.onLoad) { | |
902 settings.onLoad.apply(wrapper._container || wrapper._svg, [wrapper, message]); | |
903 } | |
904 else { | |
905 wrapper.text(null, 10, 20, message); | |
906 } | |
907 }; | |
908 // Create a DOM from SVG content | |
909 var loadXML4IE = function(data) { | |
910 var xml = new ActiveXObject('Microsoft.XMLDOM'); | |
911 xml.validateOnParse = false; | |
912 xml.resolveExternals = false; | |
913 xml.async = false; | |
914 xml.loadXML(data); | |
915 if (xml.parseError.errorCode != 0) { | |
916 reportError(xml.parseError.reason); | |
917 return null; | |
918 } | |
919 return xml; | |
920 }; | |
921 // Load the SVG DOM | |
922 var loadSVG = function(data) { | |
923 if (!data) { | |
924 return; | |
925 } | |
926 if (data.documentElement.nodeName != 'svg') { | |
927 var errors = data.getElementsByTagName('parsererror'); | |
928 var messages = (errors.length ? errors[0].getElementsByTagName('div') : []); // Safari | |
929 reportError(!errors.length ? '???' : | |
930 (messages.length ? messages[0] : errors[0]).firstChild.nodeValue); | |
931 return; | |
932 } | |
933 var attrs = {}; | |
934 for (var i = 0; i < data.documentElement.attributes.length; i++) { | |
935 var attr = data.documentElement.attributes.item(i); | |
936 if (!(attr.nodeName == 'version' || attr.nodeName.substring(0, 5) == 'xmlns')) { | |
937 attrs[attr.nodeName] = attr.nodeValue; | |
938 } | |
939 } | |
940 wrapper.configure(attrs, true); | |
941 var nodes = data.documentElement.childNodes; | |
942 for (var i = 0; i < nodes.length; i++) { | |
943 try { | |
944 if ($.svg._renesis) { | |
945 throw 'Force traversal'; | |
946 } | |
947 wrapper._svg.appendChild(nodes[i].cloneNode(true)); | |
948 if (nodes[i].nodeName == 'script') { | |
949 $.globalEval(nodes[i].textContent); | |
950 } | |
951 } | |
952 catch (e) { | |
953 wrapper.add(null, nodes[i]); | |
954 } | |
955 } | |
956 if (!settings.changeSize) { | |
957 wrapper.configure({width: size[0], height: size[1]}); | |
958 } | |
959 if (settings.onLoad) { | |
960 settings.onLoad.apply(wrapper._container || wrapper._svg, [wrapper]); | |
961 } | |
962 }; | |
963 if (url.match('<svg')) { // Inline SVG | |
964 loadSVG($.browser.msie ? loadXML4IE(url) : | |
965 new DOMParser().parseFromString(url, 'text/xml')); | |
966 } | |
967 else { // Remote SVG | |
968 $.ajax({url: url, dataType: ($.browser.msie ? 'text' : 'xml'), | |
969 success: function(xml) { | |
970 loadSVG($.browser.msie ? loadXML4IE(xml) : xml); | |
971 }, error: function(http, message, exc) { | |
972 reportError(message + (exc ? ' ' + exc.message : '')); | |
973 }}); | |
974 } | |
975 return this; | |
976 }, | |
977 | |
978 /* Delete a specified node. | |
979 @param node (element or jQuery) the drawing node to remove | |
980 @return (SVGWrapper) this root */ | |
981 remove: function(node) { | |
982 node = (node.jquery ? node[0] : node); | |
983 node.parentNode.removeChild(node); | |
984 return this; | |
985 }, | |
986 | |
987 /* Delete everything in the current document. | |
988 @param attrsToo (boolean) true to clear any root attributes as well, | |
989 false to leave them (optional) | |
990 @return (SVGWrapper) this root */ | |
991 clear: function(attrsToo) { | |
992 if (attrsToo) { | |
993 this.configure({}, true); | |
994 } | |
995 while (this._svg.firstChild) { | |
996 this._svg.removeChild(this._svg.firstChild); | |
997 } | |
998 return this; | |
999 }, | |
1000 | |
1001 /* Serialise the current diagram into an SVG text document. | |
1002 @param node (SVG element) the starting node (optional) | |
1003 @return (string) the SVG as text */ | |
1004 toSVG: function(node) { | |
1005 node = node || this._svg; | |
1006 return (typeof XMLSerializer == 'undefined' ? this._toSVG(node) : | |
1007 new XMLSerializer().serializeToString(node)); | |
1008 }, | |
1009 | |
1010 /* Serialise one node in the SVG hierarchy. */ | |
1011 _toSVG: function(node) { | |
1012 var svgDoc = ''; | |
1013 if (!node) { | |
1014 return svgDoc; | |
1015 } | |
1016 if (node.nodeType == 3) { // Text | |
1017 svgDoc = node.nodeValue; | |
1018 } | |
1019 else if (node.nodeType == 4) { // CDATA | |
1020 svgDoc = '<![CDATA[' + node.nodeValue + ']]>'; | |
1021 } | |
1022 else { // Element | |
1023 svgDoc = '<' + node.nodeName; | |
1024 if (node.attributes) { | |
1025 for (var i = 0; i < node.attributes.length; i++) { | |
1026 var attr = node.attributes.item(i); | |
1027 if (!($.trim(attr.nodeValue) == '' || attr.nodeValue.match(/^\[object/) || | |
1028 attr.nodeValue.match(/^function/))) { | |
1029 svgDoc += ' ' + (attr.namespaceURI == $.svg.xlinkNS ? 'xlink:' : '') + | |
1030 attr.nodeName + '="' + attr.nodeValue + '"'; | |
1031 } | |
1032 } | |
1033 } | |
1034 if (node.firstChild) { | |
1035 svgDoc += '>'; | |
1036 var child = node.firstChild; | |
1037 while (child) { | |
1038 svgDoc += this._toSVG(child); | |
1039 child = child.nextSibling; | |
1040 } | |
1041 svgDoc += '</' + node.nodeName + '>'; | |
1042 } | |
1043 else { | |
1044 svgDoc += '/>'; | |
1045 } | |
1046 } | |
1047 return svgDoc; | |
1048 }, | |
1049 | |
1050 /* Escape reserved characters in XML. */ | |
1051 _escapeXML: function(text) { | |
1052 text = text.replace(/&/g, '&'); | |
1053 text = text.replace(/</g, '<'); | |
1054 text = text.replace(/>/g, '>'); | |
1055 return text; | |
1056 } | |
1057 }); | |
1058 | |
1059 /* Helper to generate an SVG path. | |
1060 Obtain an instance from the SVGWrapper object. | |
1061 String calls together to generate the path and use its value: | |
1062 var path = root.createPath(); | |
1063 root.path(null, path.move(100, 100).line(300, 100).line(200, 300).close(), {fill: 'red'}); | |
1064 or | |
1065 root.path(null, path.move(100, 100).line([[300, 100], [200, 300]]).close(), {fill: 'red'}); */ | |
1066 function SVGPath() { | |
1067 this._path = ''; | |
1068 } | |
1069 | |
1070 $.extend(SVGPath.prototype, { | |
1071 /* Prepare to create a new path. | |
1072 @return (SVGPath) this path */ | |
1073 reset: function() { | |
1074 this._path = ''; | |
1075 return this; | |
1076 }, | |
1077 | |
1078 /* Move the pointer to a position. | |
1079 @param x (number) x-coordinate to move to or | |
1080 (number[][]) x-/y-coordinates to move to | |
1081 @param y (number) y-coordinate to move to (omitted if x is array) | |
1082 @param relative (boolean) true for coordinates relative to the current point, | |
1083 false for coordinates being absolute | |
1084 @return (SVGPath) this path */ | |
1085 move: function(x, y, relative) { | |
1086 relative = (isArray(x) ? y : relative); | |
1087 return this._coords((relative ? 'm' : 'M'), x, y); | |
1088 }, | |
1089 | |
1090 /* Draw a line to a position. | |
1091 @param x (number) x-coordinate to move to or | |
1092 (number[][]) x-/y-coordinates to move to | |
1093 @param y (number) y-coordinate to move to (omitted if x is array) | |
1094 @param relative (boolean) true for coordinates relative to the current point, | |
1095 false for coordinates being absolute | |
1096 @return (SVGPath) this path */ | |
1097 line: function(x, y, relative) { | |
1098 relative = (isArray(x) ? y : relative); | |
1099 return this._coords((relative ? 'l' : 'L'), x, y); | |
1100 }, | |
1101 | |
1102 /* Draw a horizontal line to a position. | |
1103 @param x (number) x-coordinate to draw to or | |
1104 (number[]) x-coordinates to draw to | |
1105 @param relative (boolean) true for coordinates relative to the current point, | |
1106 false for coordinates being absolute | |
1107 @return (SVGPath) this path */ | |
1108 horiz: function(x, relative) { | |
1109 this._path += (relative ? 'h' : 'H') + (isArray(x) ? x.join(' ') : x); | |
1110 return this; | |
1111 }, | |
1112 | |
1113 /* Draw a vertical line to a position. | |
1114 @param y (number) y-coordinate to draw to or | |
1115 (number[]) y-coordinates to draw to | |
1116 @param relative (boolean) true for coordinates relative to the current point, | |
1117 false for coordinates being absolute | |
1118 @return (SVGPath) this path */ | |
1119 vert: function(y, relative) { | |
1120 this._path += (relative ? 'v' : 'V') + (isArray(y) ? y.join(' ') : y); | |
1121 return this; | |
1122 }, | |
1123 | |
1124 /* Draw a cubic Bézier curve. | |
1125 @param x1 (number) x-coordinate of beginning control point or | |
1126 (number[][]) x-/y-coordinates of control and end points to draw to | |
1127 @param y1 (number) y-coordinate of beginning control point (omitted if x1 is array) | |
1128 @param x2 (number) x-coordinate of ending control point (omitted if x1 is array) | |
1129 @param y2 (number) y-coordinate of ending control point (omitted if x1 is array) | |
1130 @param x (number) x-coordinate of curve end (omitted if x1 is array) | |
1131 @param y (number) y-coordinate of curve end (omitted if x1 is array) | |
1132 @param relative (boolean) true for coordinates relative to the current point, | |
1133 false for coordinates being absolute | |
1134 @return (SVGPath) this path */ | |
1135 curveC: function(x1, y1, x2, y2, x, y, relative) { | |
1136 relative = (isArray(x1) ? y1 : relative); | |
1137 return this._coords((relative ? 'c' : 'C'), x1, y1, x2, y2, x, y); | |
1138 }, | |
1139 | |
1140 /* Continue a cubic Bézier curve. | |
1141 Starting control point is the reflection of the previous end control point. | |
1142 @param x2 (number) x-coordinate of ending control point or | |
1143 (number[][]) x-/y-coordinates of control and end points to draw to | |
1144 @param y2 (number) y-coordinate of ending control point (omitted if x2 is array) | |
1145 @param x (number) x-coordinate of curve end (omitted if x2 is array) | |
1146 @param y (number) y-coordinate of curve end (omitted if x2 is array) | |
1147 @param relative (boolean) true for coordinates relative to the current point, | |
1148 false for coordinates being absolute | |
1149 @return (SVGPath) this path */ | |
1150 smoothC: function(x2, y2, x, y, relative) { | |
1151 relative = (isArray(x2) ? y2 : relative); | |
1152 return this._coords((relative ? 's' : 'S'), x2, y2, x, y); | |
1153 }, | |
1154 | |
1155 /* Draw a quadratic Bézier curve. | |
1156 @param x1 (number) x-coordinate of control point or | |
1157 (number[][]) x-/y-coordinates of control and end points to draw to | |
1158 @param y1 (number) y-coordinate of control point (omitted if x1 is array) | |
1159 @param x (number) x-coordinate of curve end (omitted if x1 is array) | |
1160 @param y (number) y-coordinate of curve end (omitted if x1 is array) | |
1161 @param relative (boolean) true for coordinates relative to the current point, | |
1162 false for coordinates being absolute | |
1163 @return (SVGPath) this path */ | |
1164 curveQ: function(x1, y1, x, y, relative) { | |
1165 relative = (isArray(x1) ? y1 : relative); | |
1166 return this._coords((relative ? 'q' : 'Q'), x1, y1, x, y); | |
1167 }, | |
1168 | |
1169 /* Continue a quadratic Bézier curve. | |
1170 Control point is the reflection of the previous control point. | |
1171 @param x (number) x-coordinate of curve end or | |
1172 (number[][]) x-/y-coordinates of points to draw to | |
1173 @param y (number) y-coordinate of curve end (omitted if x is array) | |
1174 @param relative (boolean) true for coordinates relative to the current point, | |
1175 false for coordinates being absolute | |
1176 @return (SVGPath) this path */ | |
1177 smoothQ: function(x, y, relative) { | |
1178 relative = (isArray(x) ? y : relative); | |
1179 return this._coords((relative ? 't' : 'T'), x, y); | |
1180 }, | |
1181 | |
1182 /* Generate a path command with (a list of) coordinates. */ | |
1183 _coords: function(cmd, x1, y1, x2, y2, x3, y3) { | |
1184 if (isArray(x1)) { | |
1185 for (var i = 0; i < x1.length; i++) { | |
1186 var cs = x1[i]; | |
1187 this._path += (i == 0 ? cmd : ' ') + cs[0] + ',' + cs[1] + | |
1188 (cs.length < 4 ? '' : ' ' + cs[2] + ',' + cs[3] + | |
1189 (cs.length < 6 ? '': ' ' + cs[4] + ',' + cs[5])); | |
1190 } | |
1191 } | |
1192 else { | |
1193 this._path += cmd + x1 + ',' + y1 + | |
1194 (x2 == null ? '' : ' ' + x2 + ',' + y2 + | |
1195 (x3 == null ? '' : ' ' + x3 + ',' + y3)); | |
1196 } | |
1197 return this; | |
1198 }, | |
1199 | |
1200 /* Draw an arc to a position. | |
1201 @param rx (number) x-radius of arc or | |
1202 (number/boolean[][]) x-/y-coordinates and flags for points to draw to | |
1203 @param ry (number) y-radius of arc (omitted if rx is array) | |
1204 @param xRotate (number) x-axis rotation (degrees, clockwise) (omitted if rx is array) | |
1205 @param large (boolean) true to draw the large part of the arc, | |
1206 false to draw the small part (omitted if rx is array) | |
1207 @param clockwise (boolean) true to draw the clockwise arc, | |
1208 false to draw the anti-clockwise arc (omitted if rx is array) | |
1209 @param x (number) x-coordinate of arc end (omitted if rx is array) | |
1210 @param y (number) y-coordinate of arc end (omitted if rx is array) | |
1211 @param relative (boolean) true for coordinates relative to the current point, | |
1212 false for coordinates being absolute | |
1213 @return (SVGPath) this path */ | |
1214 arc: function(rx, ry, xRotate, large, clockwise, x, y, relative) { | |
1215 relative = (isArray(rx) ? ry : relative); | |
1216 this._path += (relative ? 'a' : 'A'); | |
1217 if (isArray(rx)) { | |
1218 for (var i = 0; i < rx.length; i++) { | |
1219 var cs = rx[i]; | |
1220 this._path += (i == 0 ? '' : ' ') + cs[0] + ',' + cs[1] + ' ' + | |
1221 cs[2] + ' ' + (cs[3] ? '1' : '0') + ',' + | |
1222 (cs[4] ? '1' : '0') + ' ' + cs[5] + ',' + cs[6]; | |
1223 } | |
1224 } | |
1225 else { | |
1226 this._path += rx + ',' + ry + ' ' + xRotate + ' ' + | |
1227 (large ? '1' : '0') + ',' + (clockwise ? '1' : '0') + ' ' + x + ',' + y; | |
1228 } | |
1229 return this; | |
1230 }, | |
1231 | |
1232 /* Close the current path. | |
1233 @return (SVGPath) this path */ | |
1234 close: function() { | |
1235 this._path += 'z'; | |
1236 return this; | |
1237 }, | |
1238 | |
1239 /* Return the string rendering of the specified path. | |
1240 @return (string) stringified path */ | |
1241 path: function() { | |
1242 return this._path; | |
1243 } | |
1244 }); | |
1245 | |
1246 SVGPath.prototype.moveTo = SVGPath.prototype.move; | |
1247 SVGPath.prototype.lineTo = SVGPath.prototype.line; | |
1248 SVGPath.prototype.horizTo = SVGPath.prototype.horiz; | |
1249 SVGPath.prototype.vertTo = SVGPath.prototype.vert; | |
1250 SVGPath.prototype.curveCTo = SVGPath.prototype.curveC; | |
1251 SVGPath.prototype.smoothCTo = SVGPath.prototype.smoothC; | |
1252 SVGPath.prototype.curveQTo = SVGPath.prototype.curveQ; | |
1253 SVGPath.prototype.smoothQTo = SVGPath.prototype.smoothQ; | |
1254 SVGPath.prototype.arcTo = SVGPath.prototype.arc; | |
1255 | |
1256 /* Helper to generate an SVG text object. | |
1257 Obtain an instance from the SVGWrapper object. | |
1258 String calls together to generate the text and use its value: | |
1259 var text = root.createText(); | |
1260 root.text(null, x, y, text.string('This is '). | |
1261 span('red', {fill: 'red'}).string('!'), {fill: 'blue'}); */ | |
1262 function SVGText() { | |
1263 this._parts = []; // The components of the text object | |
1264 } | |
1265 | |
1266 $.extend(SVGText.prototype, { | |
1267 /* Prepare to create a new text object. | |
1268 @return (SVGText) this text */ | |
1269 reset: function() { | |
1270 this._parts = []; | |
1271 return this; | |
1272 }, | |
1273 | |
1274 /* Add a straight string value. | |
1275 @param value (string) the actual text | |
1276 @return (SVGText) this text object */ | |
1277 string: function(value) { | |
1278 this._parts[this._parts.length] = ['text', value]; | |
1279 return this; | |
1280 }, | |
1281 | |
1282 /* Add a separate text span that has its own settings. | |
1283 @param value (string) the actual text | |
1284 @param settings (object) the settings for this text | |
1285 @return (SVGText) this text object */ | |
1286 span: function(value, settings) { | |
1287 this._parts[this._parts.length] = ['tspan', value, settings]; | |
1288 return this; | |
1289 }, | |
1290 | |
1291 /* Add a reference to a previously defined text string. | |
1292 @param id (string) the ID of the actual text | |
1293 @param settings (object) the settings for this text | |
1294 @return (SVGText) this text object */ | |
1295 ref: function(id, settings) { | |
1296 this._parts[this._parts.length] = ['tref', id, settings]; | |
1297 return this; | |
1298 }, | |
1299 | |
1300 /* Add text drawn along a path. | |
1301 @param id (string) the ID of the path | |
1302 @param value (string) the actual text | |
1303 @param settings (object) the settings for this text | |
1304 @return (SVGText) this text object */ | |
1305 path: function(id, value, settings) { | |
1306 this._parts[this._parts.length] = ['textpath', value, | |
1307 $.extend({href: id}, settings || {})]; | |
1308 return this; | |
1309 } | |
1310 }); | |
1311 | |
1312 /* Attach the SVG functionality to a jQuery selection. | |
1313 @param command (string) the command to run (optional, default 'attach') | |
1314 @param options (object) the new settings to use for these SVG instances | |
1315 @return jQuery (object) for chaining further calls */ | |
1316 $.fn.svg = function(options) { | |
1317 var otherArgs = Array.prototype.slice.call(arguments, 1); | |
1318 if (typeof options == 'string' && options == 'get') { | |
1319 return $.svg['_' + options + 'SVG'].apply($.svg, [this[0]].concat(otherArgs)); | |
1320 } | |
1321 return this.each(function() { | |
1322 if (typeof options == 'string') { | |
1323 $.svg['_' + options + 'SVG'].apply($.svg, [this].concat(otherArgs)); | |
1324 } | |
1325 else { | |
1326 $.svg._attachSVG(this, options || {}); | |
1327 } | |
1328 }); | |
1329 }; | |
1330 | |
1331 /* Determine whether an object is an array. */ | |
1332 function isArray(a) { | |
1333 return (a && a.constructor == Array); | |
1334 } | |
1335 | |
1336 // Singleton primary SVG interface | |
1337 $.svg = new SVGManager(); | |
1338 | |
1339 })(jQuery); |