844 lines
26 KiB
JavaScript
844 lines
26 KiB
JavaScript
//>>built
|
|
define("dojox/gfx/svg", ["dojo/_base/lang", "dojo/_base/window", "dojo/dom","dojo/_base/declare", "dojo/_base/array",
|
|
"dojo/dom-geometry", "dojo/_base/Color", "./_base", "./shape", "./path"],
|
|
function(lang, win, dom, declare, arr, domGeom, Color, g, gs, pathLib){
|
|
/*=====
|
|
dojox.gfx.svg = {
|
|
// module:
|
|
// dojox/gfx/svg
|
|
// summary:
|
|
// This the graphics rendering bridge for browsers compliant with W3C SVG1.0.
|
|
// This is the preferred renderer to use for interactive and accessible graphics.
|
|
};
|
|
pathLib.Path = dojox.gfx.path.Path;
|
|
pathLib.TextPath = dojox.gfx.path.TextPath;
|
|
svg.Shape = dojox.gfx.canvas.Shape;
|
|
gs.Shape = dojox.gfx.shape.Shape;
|
|
gs.Rect = dojox.gfx.shape.Rect;
|
|
gs.Ellipse = dojox.gfx.shape.Ellipse;
|
|
gs.Circle = dojox.gfx.shape.Circle;
|
|
gs.Line = dojox.gfx.shape.Line;
|
|
gs.PolyLine = dojox.gfx.shape.PolyLine;
|
|
gs.Image = dojox.gfx.shape.Image;
|
|
gs.Text = dojox.gfx.shape.Text;
|
|
gs.Surface = dojox.gfx.shape.Surface;
|
|
=====*/
|
|
var svg = g.svg = {};
|
|
svg.useSvgWeb = (typeof window.svgweb != "undefined");
|
|
|
|
// Need to detect iOS in order to workaround bug when
|
|
// touching nodes with text
|
|
var uagent = navigator.userAgent.toLowerCase(),
|
|
safMobile = uagent.search('iphone') > -1 ||
|
|
uagent.search('ipad') > -1 ||
|
|
uagent.search('ipod') > -1;
|
|
|
|
function _createElementNS(ns, nodeType){
|
|
// summary:
|
|
// Internal helper to deal with creating elements that
|
|
// are namespaced. Mainly to get SVG markup output
|
|
// working on IE.
|
|
if(win.doc.createElementNS){
|
|
return win.doc.createElementNS(ns,nodeType);
|
|
}else{
|
|
return win.doc.createElement(nodeType);
|
|
}
|
|
}
|
|
|
|
function _createTextNode(text){
|
|
if(svg.useSvgWeb){
|
|
return win.doc.createTextNode(text, true);
|
|
}else{
|
|
return win.doc.createTextNode(text);
|
|
}
|
|
}
|
|
|
|
function _createFragment(){
|
|
if(svg.useSvgWeb){
|
|
return win.doc.createDocumentFragment(true);
|
|
}else{
|
|
return win.doc.createDocumentFragment();
|
|
}
|
|
}
|
|
|
|
svg.xmlns = {
|
|
xlink: "http://www.w3.org/1999/xlink",
|
|
svg: "http://www.w3.org/2000/svg"
|
|
};
|
|
|
|
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 dom.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 dom.byId(name.slice(1)); // Node
|
|
}
|
|
return null; // Node
|
|
};
|
|
|
|
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]
|
|
};
|
|
|
|
declare("dojox.gfx.svg.Shape", gs.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 = g.makeParameters(g.defaultLinearGradient, fill);
|
|
var gradient = this._setFillObject(f, "linearGradient");
|
|
arr.forEach(["x1", "y1", "x2", "y2"], setter, gradient);
|
|
break;
|
|
case "radial":
|
|
f = g.makeParameters(g.defaultRadialGradient, fill);
|
|
var grad = this._setFillObject(f, "radialGradient");
|
|
arr.forEach(["cx", "cy", "r"], setter, grad);
|
|
break;
|
|
case "pattern":
|
|
f = g.makeParameters(g.defaultPattern, fill);
|
|
var pattern = this._setFillObject(f, "pattern");
|
|
arr.forEach(["x", "y", "width", "height"], setter, pattern);
|
|
break;
|
|
}
|
|
this.fillStyle = f;
|
|
return this;
|
|
}
|
|
// color object
|
|
f = g.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)
|
|
|
|
var rn = this.rawNode;
|
|
if(!stroke){
|
|
// don't stroke
|
|
this.strokeStyle = null;
|
|
rn.setAttribute("stroke", "none");
|
|
rn.setAttribute("stroke-opacity", 0);
|
|
return this;
|
|
}
|
|
// normalize the stroke
|
|
if(typeof stroke == "string" || lang.isArray(stroke) || stroke instanceof Color){
|
|
stroke = { color: stroke };
|
|
}
|
|
var s = this.strokeStyle = g.makeParameters(g.defaultStroke, stroke);
|
|
s.color = g.normalizeColor(s.color);
|
|
// generate attributes
|
|
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 svg.dasharray){
|
|
da = svg.dasharray[da];
|
|
}
|
|
if(da instanceof Array){
|
|
da = lang._toArray(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 g.Surface); surface = surface.parent);
|
|
return surface;
|
|
},
|
|
|
|
_setFillObject: function(f, nodeType){
|
|
var svgns = svg.xmlns.svg;
|
|
this.fillStyle = f;
|
|
var surface = this._getParentSurface(),
|
|
defs = surface.defNode,
|
|
fill = this.rawNode.getAttribute("fill"),
|
|
ref = svg.getRef(fill);
|
|
if(ref){
|
|
fill = ref;
|
|
if(fill.tagName.toLowerCase() != nodeType.toLowerCase()){
|
|
var id = fill.id;
|
|
fill.parentNode.removeChild(fill);
|
|
fill = _createElementNS(svgns, nodeType);
|
|
fill.setAttribute("id", id);
|
|
defs.appendChild(fill);
|
|
}else{
|
|
while(fill.childNodes.length){
|
|
fill.removeChild(fill.lastChild);
|
|
}
|
|
}
|
|
}else{
|
|
fill = _createElementNS(svgns, nodeType);
|
|
fill.setAttribute("id", g._base._getUniqueId());
|
|
defs.appendChild(fill);
|
|
}
|
|
if(nodeType == "pattern"){
|
|
fill.setAttribute("patternUnits", "userSpaceOnUse");
|
|
var img = _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(svg.xmlns.xlink, "xlink:href", f.src);
|
|
fill.appendChild(img);
|
|
}else{
|
|
fill.setAttribute("gradientUnits", "userSpaceOnUse");
|
|
for(var i = 0; i < f.colors.length; ++i){
|
|
var c = f.colors[i], t = _createElementNS(svgns, "stop"),
|
|
cc = c.color = g.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;
|
|
if(this.shape.type!="image"){
|
|
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);
|
|
// Bind GFX object with SVG node for ease of retrieval - that is to
|
|
// save code/performance to keep this association elsewhere
|
|
r.__gfxObject__ = this.getUID();
|
|
},
|
|
|
|
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 = g.makeParameters(this.shape, newShape);
|
|
for(var i in this.shape){
|
|
if(i != "type"){
|
|
this.rawNode.setAttribute(i, this.shape[i]);
|
|
}
|
|
}
|
|
this.bbox = null;
|
|
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
|
|
}
|
|
});
|
|
|
|
declare("dojox.gfx.svg.Group", svg.Shape, {
|
|
// summary: a group shape (SVG), which can be used
|
|
// to logically group shapes (e.g, to propagate matricies)
|
|
constructor: function(){
|
|
gs.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;
|
|
// Bind GFX object with SVG node for ease of retrieval - that is to
|
|
// save code/performance to keep this association elsewhere
|
|
this.rawNode.__gfxObject__ = this.getUID();
|
|
}
|
|
});
|
|
svg.Group.nodeType = "g";
|
|
|
|
declare("dojox.gfx.svg.Rect", [svg.Shape, gs.Rect], {
|
|
// summary: a rectangle shape (SVG)
|
|
setShape: function(newShape){
|
|
// summary: sets a rectangle shape object (SVG)
|
|
// newShape: Object: a rectangle shape object
|
|
this.shape = g.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 != null){
|
|
this.rawNode.setAttribute("ry", this.shape.r);
|
|
this.rawNode.setAttribute("rx", this.shape.r);
|
|
}
|
|
return this; // self
|
|
}
|
|
});
|
|
svg.Rect.nodeType = "rect";
|
|
|
|
declare("dojox.gfx.svg.Ellipse", [svg.Shape, gs.Ellipse], {});
|
|
svg.Ellipse.nodeType = "ellipse";
|
|
|
|
declare("dojox.gfx.svg.Circle", [svg.Shape, gs.Circle], {});
|
|
svg.Circle.nodeType = "circle";
|
|
|
|
declare("dojox.gfx.svg.Line", [svg.Shape, gs.Line], {});
|
|
svg.Line.nodeType = "line";
|
|
|
|
declare("dojox.gfx.svg.Polyline", [svg.Shape, gs.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 = g.makeParameters(this.shape, { points: points });
|
|
if(closed && this.shape.points.length){
|
|
this.shape.points.push(this.shape.points[0]);
|
|
}
|
|
}else{
|
|
this.shape = g.makeParameters(this.shape, points);
|
|
}
|
|
this.bbox = null;
|
|
this._normalizePoints();
|
|
var attr = [], p = this.shape.points;
|
|
for(var i = 0; i < p.length; ++i){
|
|
attr.push(p[i].x.toFixed(8), p[i].y.toFixed(8));
|
|
}
|
|
this.rawNode.setAttribute("points", attr.join(" "));
|
|
return this; // self
|
|
}
|
|
});
|
|
svg.Polyline.nodeType = "polyline";
|
|
|
|
declare("dojox.gfx.svg.Image", [svg.Shape, gs.Image], {
|
|
// summary: an image (SVG)
|
|
setShape: function(newShape){
|
|
// summary: sets an image shape object (SVG)
|
|
// newShape: Object: an image shape object
|
|
this.shape = g.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.setAttribute("preserveAspectRatio", "none");
|
|
rawNode.setAttributeNS(svg.xmlns.xlink, "xlink:href", this.shape.src);
|
|
// Bind GFX object with SVG node for ease of retrieval - that is to
|
|
// save code/performance to keep this association elsewhere
|
|
rawNode.__gfxObject__ = this.getUID();
|
|
return this; // self
|
|
}
|
|
});
|
|
svg.Image.nodeType = "image";
|
|
|
|
declare("dojox.gfx.svg.Text", [svg.Shape, gs.Text], {
|
|
// summary: an anchored text (SVG)
|
|
setShape: function(newShape){
|
|
// summary: sets a text shape object (SVG)
|
|
// newShape: Object: a text shape object
|
|
this.shape = g.makeParameters(this.shape, newShape);
|
|
this.bbox = null;
|
|
var r = this.rawNode, 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");
|
|
|
|
// update the text content
|
|
if(r.firstChild){
|
|
r.firstChild.nodeValue = s.text;
|
|
}else{
|
|
r.appendChild(_createTextNode(s.text));
|
|
}
|
|
return this; // self
|
|
},
|
|
getTextWidth: function(){
|
|
// summary: get the text width in pixels
|
|
var rawNode = this.rawNode,
|
|
oldParent = rawNode.parentNode,
|
|
_measurementNode = rawNode.cloneNode(true);
|
|
_measurementNode.style.visibility = "hidden";
|
|
|
|
// solution to the "orphan issue" in FF
|
|
var _width = 0, _text = _measurementNode.firstChild.nodeValue;
|
|
oldParent.appendChild(_measurementNode);
|
|
|
|
// solution to the "orphan issue" in Opera
|
|
// (nodeValue == "" hangs firefox)
|
|
if(_text!=""){
|
|
while(!_width){
|
|
//Yang: work around svgweb bug 417 -- http://code.google.com/p/svgweb/issues/detail?id=417
|
|
if (_measurementNode.getBBox)
|
|
_width = parseInt(_measurementNode.getBBox().width);
|
|
else
|
|
_width = 68;
|
|
}
|
|
}
|
|
oldParent.removeChild(_measurementNode);
|
|
return _width;
|
|
}
|
|
});
|
|
svg.Text.nodeType = "text";
|
|
|
|
declare("dojox.gfx.svg.Path", [svg.Shape, pathLib.Path], {
|
|
// summary: a path shape (SVG)
|
|
_updateWithSegment: function(segment){
|
|
// summary: updates the bounding box of path with new segment
|
|
// segment: Object: a segment
|
|
this.inherited(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)
|
|
this.inherited(arguments);
|
|
if(this.shape.path){
|
|
this.rawNode.setAttribute("d", this.shape.path);
|
|
}else{
|
|
this.rawNode.removeAttribute("d");
|
|
}
|
|
return this; // self
|
|
}
|
|
});
|
|
svg.Path.nodeType = "path";
|
|
|
|
declare("dojox.gfx.svg.TextPath", [svg.Shape, pathLib.TextPath], {
|
|
// summary: a textpath shape (SVG)
|
|
_updateWithSegment: function(segment){
|
|
// summary: updates the bounding box of path with new segment
|
|
// segment: Object: a segment
|
|
this.inherited(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)
|
|
this.inherited(arguments);
|
|
this._setTextPath();
|
|
return this; // self
|
|
},
|
|
_setTextPath: function(){
|
|
if(typeof this.shape.path != "string"){ return; }
|
|
var r = this.rawNode;
|
|
if(!r.firstChild){
|
|
var tp = _createElementNS(svg.xmlns.svg, "textPath"),
|
|
tx = _createTextNode("");
|
|
tp.appendChild(tx);
|
|
r.appendChild(tp);
|
|
}
|
|
var ref = r.firstChild.getAttributeNS(svg.xmlns.xlink, "href"),
|
|
path = ref && svg.getRef(ref);
|
|
if(!path){
|
|
var surface = this._getParentSurface();
|
|
if(surface){
|
|
var defs = surface.defNode;
|
|
path = _createElementNS(svg.xmlns.svg, "path");
|
|
var id = g._base._getUniqueId();
|
|
path.setAttribute("id", id);
|
|
defs.appendChild(path);
|
|
r.firstChild.setAttributeNS(svg.xmlns.xlink, "xlink:href", "#" + id);
|
|
}
|
|
}
|
|
if(path){
|
|
path.setAttribute("d", this.shape.path);
|
|
}
|
|
},
|
|
_setText: function(){
|
|
var r = this.rawNode;
|
|
if(!r.firstChild){
|
|
var tp = _createElementNS(svg.xmlns.svg, "textPath"),
|
|
tx = _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;
|
|
}
|
|
});
|
|
svg.TextPath.nodeType = "text";
|
|
|
|
declare("dojox.gfx.svg.Surface", gs.Surface, {
|
|
// summary: a surface object to be used for drawings (SVG)
|
|
constructor: function(){
|
|
gs.Container._init.call(this);
|
|
},
|
|
destroy: function(){
|
|
this.defNode = null; // release the external reference
|
|
this.inherited(arguments);
|
|
},
|
|
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"
|
|
var t = this.rawNode ? {
|
|
width: g.normalizedLength(this.rawNode.getAttribute("width")),
|
|
height: g.normalizedLength(this.rawNode.getAttribute("height"))} : null;
|
|
return t; // Object
|
|
}
|
|
});
|
|
|
|
svg.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 svg.Surface();
|
|
s.rawNode = _createElementNS(svg.xmlns.svg, "svg");
|
|
s.rawNode.setAttribute("overflow", "hidden");
|
|
if(width){
|
|
s.rawNode.setAttribute("width", width);
|
|
}
|
|
if(height){
|
|
s.rawNode.setAttribute("height", height);
|
|
}
|
|
|
|
var defNode = _createElementNS(svg.xmlns.svg, "defs");
|
|
s.rawNode.appendChild(defNode);
|
|
s.defNode = defNode;
|
|
|
|
s._parent = dom.byId(parentNode);
|
|
s._parent.appendChild(s.rawNode);
|
|
|
|
return s; // dojox.gfx.Surface
|
|
};
|
|
|
|
// Extenders
|
|
|
|
var 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);
|
|
}
|
|
};
|
|
|
|
var C = gs.Container, Container = {
|
|
openBatch: function() {
|
|
// summary: starts a new batch, subsequent new child shapes will be held in
|
|
// the batch instead of appending to the container directly
|
|
this.fragment = _createFragment();
|
|
},
|
|
closeBatch: function() {
|
|
// summary: submits the current batch, append all pending child shapes to DOM
|
|
if (this.fragment) {
|
|
this.rawNode.appendChild(this.fragment);
|
|
delete this.fragment;
|
|
}
|
|
},
|
|
add: function(shape){
|
|
// summary: adds a shape to a group/surface
|
|
// shape: dojox.gfx.Shape: an VML shape object
|
|
if(this != shape.getParent()){
|
|
if (this.fragment) {
|
|
this.fragment.appendChild(shape.rawNode);
|
|
} else {
|
|
this.rawNode.appendChild(shape.rawNode);
|
|
}
|
|
C.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);
|
|
}
|
|
if(this.fragment && this.fragment == shape.rawNode.parentNode){
|
|
this.fragment.removeChild(shape.rawNode);
|
|
}
|
|
C.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);
|
|
}
|
|
var defNode = this.defNode;
|
|
if(defNode){
|
|
while(defNode.lastChild){
|
|
defNode.removeChild(defNode.lastChild);
|
|
}
|
|
r.appendChild(defNode);
|
|
}
|
|
return C.clear.apply(this, arguments);
|
|
},
|
|
_moveChildToFront: C._moveChildToFront,
|
|
_moveChildToBack: C._moveChildToBack
|
|
};
|
|
|
|
var 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(),
|
|
node = _createElementNS(svg.xmlns.svg, shapeType.nodeType);
|
|
|
|
shape.setRawNode(node);
|
|
shape.setShape(rawShape);
|
|
// rawNode.appendChild() will be done inside this.add(shape) below
|
|
this.add(shape);
|
|
return shape; // dojox.gfx.Shape
|
|
}
|
|
};
|
|
|
|
lang.extend(svg.Text, Font);
|
|
lang.extend(svg.TextPath, Font);
|
|
|
|
lang.extend(svg.Group, Container);
|
|
lang.extend(svg.Group, gs.Creator);
|
|
lang.extend(svg.Group, Creator);
|
|
|
|
lang.extend(svg.Surface, Container);
|
|
lang.extend(svg.Surface, gs.Creator);
|
|
lang.extend(svg.Surface, Creator);
|
|
|
|
// Mouse/Touch event
|
|
svg.fixTarget = function(event, gfxElement) {
|
|
// summary:
|
|
// Adds the gfxElement to event.gfxTarget if none exists. This new
|
|
// property will carry the GFX element associated with this event.
|
|
// event: Object
|
|
// The current input event (MouseEvent or TouchEvent)
|
|
// gfxElement: Object
|
|
// The GFX target element
|
|
if (!event.gfxTarget) {
|
|
if (safMobile && event.target.wholeText) {
|
|
// Workaround iOS bug when touching text nodes
|
|
event.gfxTarget = gs.byId(event.target.parentElement.__gfxObject__);
|
|
} else {
|
|
event.gfxTarget = gs.byId(event.target.__gfxObject__);
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
|
|
// some specific override for svgweb + flash
|
|
if(svg.useSvgWeb){
|
|
// override createSurface()
|
|
svg.createSurface = function(parentNode, width, height){
|
|
var s = new svg.Surface();
|
|
|
|
// ensure width / height
|
|
if(!width || !height){
|
|
var pos = domGeom.position(parentNode);
|
|
width = width || pos.w;
|
|
height = height || pos.h;
|
|
}
|
|
|
|
// ensure id
|
|
parentNode = dom.byId(parentNode);
|
|
var id = parentNode.id ? parentNode.id+'_svgweb' : g._base._getUniqueId();
|
|
|
|
// create dynamic svg root
|
|
var mockSvg = _createElementNS(svg.xmlns.svg, 'svg');
|
|
mockSvg.id = id;
|
|
mockSvg.setAttribute('width', width);
|
|
mockSvg.setAttribute('height', height);
|
|
svgweb.appendChild(mockSvg, parentNode);
|
|
|
|
// notice: any call to the raw node before flash init will fail.
|
|
mockSvg.addEventListener('SVGLoad', function(){
|
|
// become loaded
|
|
s.rawNode = this;
|
|
s.isLoaded = true;
|
|
|
|
// init defs
|
|
var defNode = _createElementNS(svg.xmlns.svg, "defs");
|
|
s.rawNode.appendChild(defNode);
|
|
s.defNode = defNode;
|
|
|
|
// notify application
|
|
if (s.onLoad)
|
|
s.onLoad(s);
|
|
}, false);
|
|
|
|
// flash not loaded yet
|
|
s.isLoaded = false;
|
|
return s;
|
|
};
|
|
|
|
// override Surface.destroy()
|
|
svg.Surface.extend({
|
|
destroy: function(){
|
|
var mockSvg = this.rawNode;
|
|
svgweb.removeChild(mockSvg, mockSvg.parentNode);
|
|
}
|
|
});
|
|
|
|
// override connect() & disconnect() for Shape & Surface event processing
|
|
var _eventsProcessing = {
|
|
connect: function(name, object, method){
|
|
// connect events using the mock addEventListener() provided by svgweb
|
|
if (name.substring(0, 2)==='on') { name = name.substring(2); }
|
|
if (arguments.length == 2) {
|
|
method = object;
|
|
} else {
|
|
method = lang.hitch(object, method);
|
|
}
|
|
this.getEventSource().addEventListener(name, method, false);
|
|
return [this, name, method];
|
|
},
|
|
disconnect: function(token){
|
|
// disconnect events using the mock removeEventListener() provided by svgweb
|
|
this.getEventSource().removeEventListener(token[1], token[2], false);
|
|
delete token[0];
|
|
}
|
|
};
|
|
|
|
lang.extend(svg.Shape, _eventsProcessing);
|
|
lang.extend(svg.Surface, _eventsProcessing);
|
|
}
|
|
|
|
return svg;
|
|
});
|