Page MenuHomeCode
Files F391848

svg.js
No OneTemporary
Actions

svg.js
View Options

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);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Feb 22, 20:24 (1 d, 18 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26455
Default Alt Text
svg.js (20 KB)

Event Timeline