SVGPath.js revision 9eaaa502227248d304ac9170902697d02158c1d9
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp/**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * The SVGPath class creates a shape through the use of drawing methods.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @class SVGPath
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @extends SVGShape
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
9eaaa502227248d304ac9170902697d02158c1d9TrippSVGPath = function(cfg)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp{
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp SVGPath.superclass.constructor.apply(this, arguments);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp};
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTrippSVGPath.NAME = "svgPath";
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTrippY.extend(SVGPath, Y.SVGShape, {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Left edge of the path
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @private
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _left: 0,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Right edge of the path
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @private
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _right: 0,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Top edge of the path
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @private
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _top: 0,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Bottom edge of the path
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @private
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _bottom: 0,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Indicates the type of shape
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @property _type
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @readOnly
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @type String
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _type: "path",
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws the path.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _draw
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @private
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _draw: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp var pathArray,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp segmentArray,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp pathType,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp len,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val2,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp i,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp path = "",
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp node = this.node,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp tx = this.get("translateX"),
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp ty = this.get("translateY"),
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp left = this._left,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp top = this._top,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp fill = this.get("fill");
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(this._pathArray)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp pathArray = this._pathArray.concat();
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp while(pathArray && pathArray.length > 0)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp segmentArray = pathArray.shift();
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp len = segmentArray.length;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp pathType = segmentArray[0];
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp path += " " + pathType + (segmentArray[1] - left);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp switch(pathType)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp case "L" :
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp case "M" :
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp case "Q" :
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp for(i = 2; i < len; ++i)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val = (i % 2 === 0) ? top : left;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val = segmentArray[i] - val;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp path += ", " + val;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp break;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp case "C" :
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp for(i = 2; i < len; ++i)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val = (i % 2 === 0) ? top : left;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val2 = segmentArray[i];
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp val2 -= val;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp path += " " + val2;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp break;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(fill && fill.color)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp path += 'z';
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(path)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp node.setAttribute("d", path);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp //Use transform to handle positioning.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._transformArgs = this._transformArgs || {};
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._transformArgs.translate = [left + tx, top + ty];
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._path = path;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._fillChangeHandler();
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._strokeChangeHandler();
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateTransform();
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Applies translate transformation.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method translate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x The x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y The y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp translate: function(x, y)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp x = parseInt(x, 10);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp y = parseInt(y, 10);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._translateX = x;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._translateY = y;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._translate(this._left + x, this._top + y);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
9eaaa502227248d304ac9170902697d02158c1d9Tripp
9eaaa502227248d304ac9170902697d02158c1d9Tripp /**
9eaaa502227248d304ac9170902697d02158c1d9Tripp * @private
9eaaa502227248d304ac9170902697d02158c1d9Tripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _updateHandler: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp //do nothing
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Completes a drawing operation.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method end
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp end: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._draw();
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._graphic.addToRedrawQueue(this);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Clears the path.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method clear
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp clear: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._left = 0;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._right = 0;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._top = 0;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._bottom = 0;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._pathArray = [];
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._path = "";
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Returns the bounds for a shape.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method getBounds
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @return Object
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp getBounds: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp var wt = 0,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp bounds = {},
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp stroke = this.get("stroke"),
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp tx = this.get("translateX"),
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp ty = this.get("translateY");
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(stroke && stroke.weight)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp wt = stroke.weight;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp bounds.left = this._left - wt + tx;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp bounds.top = this._top - wt + ty;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp bounds.right = (this._right - this._left) + wt + tx;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp bounds.bottom = (this._bottom - this._top) + wt + ty;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return bounds;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _path: ""
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp});
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTrippSVGPath.ATTRS = Y.merge(Y.SVGShape.ATTRS, {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
9eaaa502227248d304ac9170902697d02158c1d9Tripp * Path string of the shape
9eaaa502227248d304ac9170902697d02158c1d9Tripp *
9eaaa502227248d304ac9170902697d02158c1d9Tripp * @attribute path
9eaaa502227248d304ac9170902697d02158c1d9Tripp * @type String
9eaaa502227248d304ac9170902697d02158c1d9Tripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp path: {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp readOnly: true,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp getter: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this._path;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Indicates the height of the shape
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @attribute height
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @type Number
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp width: {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp getter: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp var val = Math.max(this._right - this._left, 0);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return val;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp },
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp /**
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Indicates the height of the shape
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp *
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @attribute height
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @type Number
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp */
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp height: {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp getter: function()
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return Math.max(this._bottom - this._top, 0);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp }
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp});
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTrippSVGPath.prototype = Y.merge(Y.merge(Y.SVGDrawing.prototype, Y.SVGShape.prototype), SVGPath.prototype);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTrippY.SVGPath = SVGPath;