if (!dojo._hasResource["dojox.gfx.svg"]) { // _hasResource checks added by // build. Do not use _hasResource // directly in your code. dojo._hasResource["dojox.gfx.svg"] = true; dojo.provide("dojox.gfx.svg"); dojo.require("dojox.gfx._base"); dojo.require("dojox.gfx.shape"); dojo.require("dojox.gfx.path"); dojox.gfx.svg.xmlns = { xlink : "http://www.w3.org/1999/xlink", svg : "http://www.w3.org/2000/svg" }; dojox.gfx.svg.getRef = function(name) { // summary: returns a DOM Node specified by the name argument or null // name: String: an SVG external reference if (!name || name == "none") return null; if (name.match(/^url\(#.+\)$/)) { return dojo.byId(name.slice(5, -1)); // Node } // alternative representation of a reference if (name.match(/^#dojoUnique\d+$/)) { // we assume here that a reference was generated by dojox.gfx return dojo.byId(name.slice(1)); // Node } return null; // Node }; dojox.gfx.svg.dasharray = { solid : "none", shortdash : [4, 1], shortdot : [1, 1], shortdashdot : [4, 1, 1, 1], shortdashdotdot : [4, 1, 1, 1, 1, 1], dot : [1, 3], dash : [4, 3], longdash : [8, 3], dashdot : [4, 3, 1, 3], longdashdot : [8, 3, 1, 3], longdashdotdot : [8, 3, 1, 3, 1, 3] }; dojo.extend(dojox.gfx.Shape, { // summary: SVG-specific implementation of dojox.gfx.Shape methods setFill : function(fill) { // summary: sets a fill object (SVG) // fill: Object: a fill object // (see dojox.gfx.defaultLinearGradient, // dojox.gfx.defaultRadialGradient, // dojox.gfx.defaultPattern, // or dojo.Color) if (!fill) { // don't fill this.fillStyle = null; this.rawNode.setAttribute("fill", "none"); this.rawNode.setAttribute("fill-opacity", 0); return this; } var f; // FIXME: slightly magical. We're using the outer scope's "f", but // setting it later var setter = function(x) { // we assume that we're executing in the scope of the node to // mutate this.setAttribute(x, f[x].toFixed(8)); }; if (typeof(fill) == "object" && "type" in fill) { // gradient switch (fill.type) { case "linear" : f = dojox.gfx.makeParameters( dojox.gfx.defaultLinearGradient, fill); var gradient = this._setFillObject(f, "linearGradient"); dojo .forEach(["x1", "y1", "x2", "y2"], setter, gradient); break; case "radial" : f = dojox.gfx.makeParameters( dojox.gfx.defaultRadialGradient, fill); var gradient = this._setFillObject(f, "radialGradient"); dojo.forEach(["cx", "cy", "r"], setter, gradient); break; case "pattern" : f = dojox.gfx.makeParameters(dojox.gfx.defaultPattern, fill); var pattern = this._setFillObject(f, "pattern"); dojo.forEach(["x", "y", "width", "height"], setter, pattern); break; } this.fillStyle = f; return this; } // color object var f = dojox.gfx.normalizeColor(fill); this.fillStyle = f; this.rawNode.setAttribute("fill", f.toCss()); this.rawNode.setAttribute("fill-opacity", f.a); this.rawNode.setAttribute("fill-rule", "evenodd"); return this; // self }, setStroke : function(stroke) { // summary: sets a stroke object (SVG) // stroke: Object: a stroke object // (see dojox.gfx.defaultStroke) if (!stroke) { // don't stroke this.strokeStyle = null; this.rawNode.setAttribute("stroke", "none"); this.rawNode.setAttribute("stroke-opacity", 0); return this; } // normalize the stroke if (typeof stroke == "string") { stroke = { color : stroke }; } var s = this.strokeStyle = dojox.gfx.makeParameters( dojox.gfx.defaultStroke, stroke); s.color = dojox.gfx.normalizeColor(s.color); // generate attributes var rn = this.rawNode; if (s) { rn.setAttribute("stroke", s.color.toCss()); rn.setAttribute("stroke-opacity", s.color.a); rn.setAttribute("stroke-width", s.width); rn.setAttribute("stroke-linecap", s.cap); if (typeof s.join == "number") { rn.setAttribute("stroke-linejoin", "miter"); rn.setAttribute("stroke-miterlimit", s.join); } else { rn.setAttribute("stroke-linejoin", s.join); } var da = s.style.toLowerCase(); if (da in dojox.gfx.svg.dasharray) { da = dojox.gfx.svg.dasharray[da]; } if (da instanceof Array) { da = dojo.clone(da); for (var i = 0; i < da.length; ++i) { da[i] *= s.width; } if (s.cap != "butt") { for (var i = 0; i < da.length; i += 2) { da[i] -= s.width; if (da[i] < 1) { da[i] = 1; } } for (var i = 1; i < da.length; i += 2) { da[i] += s.width; } } da = da.join(","); } rn.setAttribute("stroke-dasharray", da); rn.setAttribute("dojoGfxStrokeStyle", s.style); } return this; // self }, _getParentSurface : function() { var surface = this.parent; for (; surface && !(surface instanceof dojox.gfx.Surface); surface = surface.parent); return surface; }, _setFillObject : function(f, nodeType) { var svgns = dojox.gfx.svg.xmlns.svg; this.fillStyle = f; var surface = this._getParentSurface(); var defs = surface.defNode; var fill = this.rawNode.getAttribute("fill"); var ref = dojox.gfx.svg.getRef(fill); if (ref) { fill = ref; if (fill.tagName.toLowerCase() != nodeType.toLowerCase()) { var id = fill.id; fill.parentNode.removeChild(fill); fill = document.createElementNS(svgns, nodeType); fill.setAttribute("id", id); defs.appendChild(fill); } else { while (fill.childNodes.length) { fill.removeChild(fill.lastChild); } } } else { fill = document.createElementNS(svgns, nodeType); fill.setAttribute("id", dojox.gfx._base._getUniqueId()); defs.appendChild(fill); } if (nodeType == "pattern") { if (dojo.isSafari) { fill.setAttributeNS(null, "patternUnits", "userSpaceOnUse"); } else { fill.setAttribute("patternUnits", "userSpaceOnUse"); } var img = document.createElementNS(svgns, "image"); img.setAttribute("x", 0); img.setAttribute("y", 0); img.setAttribute("width", f.width.toFixed(8)); img.setAttribute("height", f.height.toFixed(8)); img.setAttributeNS(dojox.gfx.svg.xmlns.xlink, "href", f.src); fill.appendChild(img); } else { if (dojo.isSafari) { fill .setAttributeNS(null, "gradientUnits", "userSpaceOnUse"); } else { fill.setAttribute("gradientUnits", "userSpaceOnUse"); } for (var i = 0; i < f.colors.length; ++i) { var c = f.colors[i], t = document.createElementNS(svgns, "stop"), cc = c.color = dojox.gfx .normalizeColor(c.color); t.setAttribute("offset", c.offset.toFixed(8)); t.setAttribute("stop-color", cc.toCss()); t.setAttribute("stop-opacity", cc.a); fill.appendChild(t); } } this.rawNode.setAttribute("fill", "url(#" + fill.getAttribute("id") + ")"); this.rawNode.removeAttribute("fill-opacity"); this.rawNode.setAttribute("fill-rule", "evenodd"); return fill; }, _applyTransform : function() { var matrix = this.matrix; if (matrix) { var tm = this.matrix; this.rawNode.setAttribute("transform", "matrix(" + tm.xx.toFixed(8) + "," + tm.yx.toFixed(8) + "," + tm.xy.toFixed(8) + "," + tm.yy.toFixed(8) + "," + tm.dx.toFixed(8) + "," + tm.dy.toFixed(8) + ")"); } else { this.rawNode.removeAttribute("transform"); } return this; }, setRawNode : function(rawNode) { // summary: // assigns and clears the underlying node that will represent this // shape. Once set, transforms, gradients, etc, can be applied. // (no fill & stroke by default) var r = this.rawNode = rawNode; r.setAttribute("fill", "none"); r.setAttribute("fill-opacity", 0); r.setAttribute("stroke", "none"); r.setAttribute("stroke-opacity", 0); r.setAttribute("stroke-width", 1); r.setAttribute("stroke-linecap", "butt"); r.setAttribute("stroke-linejoin", "miter"); r.setAttribute("stroke-miterlimit", 4); }, setShape : function(newShape) { // summary: sets a shape object (SVG) // newShape: Object: a shape object // (see dojox.gfx.defaultPath, // dojox.gfx.defaultPolyline, // dojox.gfx.defaultRect, // dojox.gfx.defaultEllipse, // dojox.gfx.defaultCircle, // dojox.gfx.defaultLine, // or dojox.gfx.defaultImage) this.shape = dojox.gfx.makeParameters(this.shape, newShape); for (var i in this.shape) { if (i != "type") { this.rawNode.setAttribute(i, this.shape[i]); } } return this; // self }, // move family _moveToFront : function() { // summary: moves a shape to front of its parent's list of shapes // (SVG) this.rawNode.parentNode.appendChild(this.rawNode); return this; // self }, _moveToBack : function() { // summary: moves a shape to back of its parent's list of shapes // (SVG) this.rawNode.parentNode.insertBefore(this.rawNode, this.rawNode.parentNode.firstChild); return this; // self } }); dojo.declare("dojox.gfx.Group", dojox.gfx.Shape, { // summary: a group shape (SVG), which can be used // to logically group shapes (e.g, to propagate matricies) constructor : function() { dojox.gfx.svg.Container._init.call(this); }, setRawNode : function(rawNode) { // summary: sets a raw SVG node to be used by this shape // rawNode: Node: an SVG node this.rawNode = rawNode; } }); dojox.gfx.Group.nodeType = "g"; dojo.declare("dojox.gfx.Rect", dojox.gfx.shape.Rect, { // summary: a rectangle shape (SVG) setShape : function(newShape) { // summary: sets a rectangle shape object (SVG) // newShape: Object: a rectangle shape object this.shape = dojox.gfx.makeParameters(this.shape, newShape); this.bbox = null; for (var i in this.shape) { if (i != "type" && i != "r") { this.rawNode.setAttribute(i, this.shape[i]); } } if (this.shape.r) { this.rawNode.setAttribute("ry", this.shape.r); this.rawNode.setAttribute("rx", this.shape.r); } return this; // self } }); dojox.gfx.Rect.nodeType = "rect"; dojox.gfx.Ellipse = dojox.gfx.shape.Ellipse; dojox.gfx.Ellipse.nodeType = "ellipse"; dojox.gfx.Circle = dojox.gfx.shape.Circle; dojox.gfx.Circle.nodeType = "circle"; dojox.gfx.Line = dojox.gfx.shape.Line; dojox.gfx.Line.nodeType = "line"; dojo.declare("dojox.gfx.Polyline", dojox.gfx.shape.Polyline, { // summary: a polyline/polygon shape (SVG) setShape : function(points, closed) { // summary: sets a polyline/polygon shape object (SVG) // points: Object: a polyline/polygon shape object if (points && points instanceof Array) { // branch // points: Array: an array of points this.shape = dojox.gfx.makeParameters(this.shape, { points : points }); if (closed && this.shape.points.length) { this.shape.points.push(this.shape.points[0]); } } else { this.shape = dojox.gfx.makeParameters(this.shape, points); } this.box = null; var attr = []; var p = this.shape.points; for (var i = 0; i < p.length; ++i) { if (typeof p[i] == "number") { attr.push(p[i].toFixed(8)); } else { attr.push(p[i].x.toFixed(8)); attr.push(p[i].y.toFixed(8)); } } this.rawNode.setAttribute("points", attr.join(" ")); return this; // self } }); dojox.gfx.Polyline.nodeType = "polyline"; dojo.declare("dojox.gfx.Image", dojox.gfx.shape.Image, { // summary: an image (SVG) setShape : function(newShape) { // summary: sets an image shape object (SVG) // newShape: Object: an image shape object this.shape = dojox.gfx.makeParameters(this.shape, newShape); this.bbox = null; var rawNode = this.rawNode; for (var i in this.shape) { if (i != "type" && i != "src") { rawNode.setAttribute(i, this.shape[i]); } } rawNode.setAttributeNS(dojox.gfx.svg.xmlns.xlink, "href", this.shape.src); return this; // self } }); dojox.gfx.Image.nodeType = "image"; dojo.declare("dojox.gfx.Text", dojox.gfx.shape.Text, { // summary: an anchored text (SVG) setShape : function(newShape) { // summary: sets a text shape object (SVG) // newShape: Object: a text shape object this.shape = dojox.gfx.makeParameters(this.shape, newShape); this.bbox = null; var r = this.rawNode; var s = this.shape; r.setAttribute("x", s.x); r.setAttribute("y", s.y); r.setAttribute("text-anchor", s.align); r.setAttribute("text-decoration", s.decoration); r.setAttribute("rotate", s.rotated ? 90 : 0); r.setAttribute("kerning", s.kerning ? "auto" : 0); r.setAttribute("text-rendering", "optimizeLegibility"); r.textContent = s.text; return this; // self }, getTextWidth : function() { // summary: get the text width in pixels var rawNode = this.rawNode; var oldParent = rawNode.parentNode; var _measurementNode = rawNode.cloneNode(true); _measurementNode.style.visibility = "hidden"; // solution to the "orphan issue" in FF var _width = 0; var _text = _measurementNode.firstChild.nodeValue; oldParent.appendChild(_measurementNode); // solution to the "orphan issue" in Opera // (nodeValue == "" hangs firefox) if (_text != "") { while (!_width) { _width = parseInt(_measurementNode.getBBox().width); } } oldParent.removeChild(_measurementNode); return _width; } }); dojox.gfx.Text.nodeType = "text"; dojo.declare("dojox.gfx.Path", dojox.gfx.path.Path, { // summary: a path shape (SVG) _updateWithSegment : function(segment) { // summary: updates the bounding box of path with new segment // segment: Object: a segment dojox.gfx.Path.superclass._updateWithSegment.apply(this, arguments); if (typeof(this.shape.path) == "string") { this.rawNode.setAttribute("d", this.shape.path); } }, setShape : function(newShape) { // summary: forms a path using a shape (SVG) // newShape: Object: an SVG path string or a path object (see // dojox.gfx.defaultPath) dojox.gfx.Path.superclass.setShape.apply(this, arguments); this.rawNode.setAttribute("d", this.shape.path); return this; // self } }); dojox.gfx.Path.nodeType = "path"; dojo.declare("dojox.gfx.TextPath", dojox.gfx.path.TextPath, { // summary: a textpath shape (SVG) _updateWithSegment : function(segment) { // summary: updates the bounding box of path with new segment // segment: Object: a segment dojox.gfx.Path.superclass._updateWithSegment.apply(this, arguments); this._setTextPath(); }, setShape : function(newShape) { // summary: forms a path using a shape (SVG) // newShape: Object: an SVG path string or a path object (see // dojox.gfx.defaultPath) dojox.gfx.Path.superclass.setShape.apply(this, arguments); this._setTextPath(); return this; // self }, _setTextPath : function() { if (typeof this.shape.path != "string") { return; } var r = this.rawNode; if (!r.firstChild) { var tp = document.createElementNS(dojox.gfx.svg.xmlns.svg, "textPath"); var tx = document.createTextNode(""); tp.appendChild(tx); r.appendChild(tp); } var ref = r.firstChild.getAttributeNS(dojox.gfx.svg.xmlns.xlink, "href"); var path = ref && dojox.gfx.svg.getRef(ref); if (!path) { var surface = this._getParentSurface(); if (surface) { var defs = surface.defNode; path = document.createElementNS(dojox.gfx.svg.xmlns.svg, "path"); var id = dojox.gfx._base._getUniqueId(); path.setAttribute("id", id); defs.appendChild(path); r.firstChild.setAttributeNS(dojox.gfx.svg.xmlns.xlink, "href", "#" + id); } } if (path) { path.setAttribute("d", this.shape.path); } }, _setText : function() { var r = this.rawNode; if (!r.firstChild) { var tp = document.createElementNS(dojox.gfx.svg.xmlns.svg, "textPath"); var tx = document.createTextNode(""); tp.appendChild(tx); r.appendChild(tp); } r = r.firstChild; var t = this.text; r.setAttribute("alignment-baseline", "middle"); switch (t.align) { case "middle" : r.setAttribute("text-anchor", "middle"); r.setAttribute("startOffset", "50%"); break; case "end" : r.setAttribute("text-anchor", "end"); r.setAttribute("startOffset", "100%"); break; default : r.setAttribute("text-anchor", "start"); r.setAttribute("startOffset", "0%"); break; } // r.parentNode.setAttribute("alignment-baseline", "central"); // r.setAttribute("dominant-baseline", "central"); r.setAttribute("baseline-shift", "0.5ex"); r.setAttribute("text-decoration", t.decoration); r.setAttribute("rotate", t.rotated ? 90 : 0); r.setAttribute("kerning", t.kerning ? "auto" : 0); r.firstChild.data = t.text; } }); dojox.gfx.TextPath.nodeType = "text"; dojo.declare("dojox.gfx.Surface", dojox.gfx.shape.Surface, { // summary: a surface object to be used for drawings (SVG) constructor : function() { dojox.gfx.svg.Container._init.call(this); }, setDimensions : function(width, height) { // summary: sets the width and height of the rawNode // width: String: width of surface, e.g., "100px" // height: String: height of surface, e.g., "100px" if (!this.rawNode) { return this; } this.rawNode.setAttribute("width", width); this.rawNode.setAttribute("height", height); return this; // self }, getDimensions : function() { // summary: returns an object with properties "width" and // "height" return this.rawNode ? { width : this.rawNode.getAttribute("width"), height : this.rawNode.getAttribute("height") } : null; // Object } }); dojox.gfx.createSurface = function(parentNode, width, height) { // summary: creates a surface (SVG) // parentNode: Node: a parent node // width: String: width of surface, e.g., "100px" // height: String: height of surface, e.g., "100px" var s = new dojox.gfx.Surface(); s.rawNode = document.createElementNS(dojox.gfx.svg.xmlns.svg, "svg"); s.rawNode.setAttribute("width", width); s.rawNode.setAttribute("height", height); var node = document.createElementNS(dojox.gfx.svg.xmlns.svg, "defs"); s.rawNode.appendChild(node); s.defNode = node; dojo.byId(parentNode).appendChild(s.rawNode); return s; // dojox.gfx.Surface }; // Extenders dojox.gfx.svg.Font = { _setFont : function() { // summary: sets a font object (SVG) var f = this.fontStyle; // next line doesn't work in Firefox 2 or Opera 9 // this.rawNode.setAttribute("font", // dojox.gfx.makeFontString(this.fontStyle)); this.rawNode.setAttribute("font-style", f.style); this.rawNode.setAttribute("font-variant", f.variant); this.rawNode.setAttribute("font-weight", f.weight); this.rawNode.setAttribute("font-size", f.size); this.rawNode.setAttribute("font-family", f.family); } }; dojox.gfx.svg.Container = { _init : function() { dojox.gfx.shape.Container._init.call(this); }, add : function(shape) { // summary: adds a shape to a group/surface // shape: dojox.gfx.Shape: an VML shape object if (this != shape.getParent()) { this.rawNode.appendChild(shape.rawNode); // dojox.gfx.Group.superclass.add.apply(this, arguments); // this.inherited(arguments); dojox.gfx.shape.Container.add.apply(this, arguments); } return this; // self }, remove : function(shape, silently) { // summary: remove a shape from a group/surface // shape: dojox.gfx.Shape: an VML shape object // silently: Boolean?: if true, regenerate a picture if (this == shape.getParent()) { if (this.rawNode == shape.rawNode.parentNode) { this.rawNode.removeChild(shape.rawNode); } // dojox.gfx.Group.superclass.remove.apply(this, arguments); // this.inherited(arguments); dojox.gfx.shape.Container.remove.apply(this, arguments); } return this; // self }, clear : function() { // summary: removes all shapes from a group/surface var r = this.rawNode; while (r.lastChild) { r.removeChild(r.lastChild); } // return this.inherited(arguments); // self return dojox.gfx.shape.Container.clear.apply(this, arguments); }, _moveChildToFront : dojox.gfx.shape.Container._moveChildToFront, _moveChildToBack : dojox.gfx.shape.Container._moveChildToBack }; dojo.mixin(dojox.gfx.shape.Creator, { // summary: SVG shape creators createObject : function(shapeType, rawShape) { // summary: creates an instance of the passed shapeType // class // shapeType: Function: a class constructor to create an // instance of // rawShape: Object: properties to be passed in to the // classes "setShape" method if (!this.rawNode) { return null; } var shape = new shapeType(); var node = document.createElementNS( dojox.gfx.svg.xmlns.svg, shapeType.nodeType); shape.setRawNode(node); this.rawNode.appendChild(node); shape.setShape(rawShape); this.add(shape); return shape; // dojox.gfx.Shape } }); dojo.extend(dojox.gfx.Text, dojox.gfx.svg.Font); dojo.extend(dojox.gfx.TextPath, dojox.gfx.svg.Font); dojo.extend(dojox.gfx.Group, dojox.gfx.svg.Container); dojo.extend(dojox.gfx.Group, dojox.gfx.shape.Creator); dojo.extend(dojox.gfx.Surface, dojox.gfx.svg.Container); dojo.extend(dojox.gfx.Surface, dojox.gfx.shape.Creator); }