Subversion Repositories Applications.papyrus

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

}