VMLShape.js revision 04f886d0ad2a12c3c0e4ec29a1c42e8732e9327f
/**
* <a href="http://www.w3.org/TR/NOTE-VML">VML</a> implementation of the <a href="Shape.html">`Shape`</a> class.
* `VMLShape` is not intended to be used directly. Instead, use the <a href="Shape.html">`Shape`</a> class.
* If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> and <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a>
* capabilities, the <a href="Shape.html">`Shape`</a> class will point to the `VMLShape` class.
*
* @module graphics
* @class VMLShape
* @constructor
* @param {Object} cfg (optional) Attribute configs
*/
VMLShape = function()
{
this._transforms = [];
this.rotationMatrix = new Y.Matrix();
};
/**
* Indicates the type of shape
*
* @property _type
* @type String
* @private
*/
_type: "shape",
/**
* Init method, invoked during construction.
* Calls `initializer` method.
*
* @method init
* @protected
*/
init: function()
{
},
/**
* Initializes the shape
*
* @private
* @method _initialize
*/
initializer: function(cfg)
{
var host = this,
host.createNode();
this._updateHandler();
},
/**
* Creates the dom node for the shape.
*
* @method createNode
* @return HTMLElement
* @private
*/
createNode: function()
{
var node,
x = this.get("x"),
y = this.get("y"),
w = this.get("width"),
h = this.get("height"),
id,
type,
fill,
stroke = this._getStrokeProps();
fill = this._getFillProps();
nodestring = '<' + type + ' xmlns="urn:schemas-microsft.com:vml" id="' + id + '" class="' + classString + '" style="behavior:url(#default#VML);display:inline-block;position:absolute;left:' + x + 'px;top:' + y + 'px;width:' + w + 'px;height:' + h + 'px;"';
{
nodestring += ' stroked="t" strokecolor="' + stroke.color + '" strokeWeight="' + stroke.weight + 'px"';
strokestring = '<stroke class="vmlstroke" xmlns="urn:schemas-microsft.com:vml" on="t" style="behavior:url(#default#VML);display:inline-block;"';
if(endcap)
{
}
if(joinstyle)
{
}
if(miterlimit)
{
}
if(dashstyle)
{
}
strokestring += '></stroke>';
nodestring += ' stroked="t"';
}
else
{
nodestring += ' stroked="f"';
}
if(fill)
{
{
}
{
}
}
nodestring += '>';
if(this._strokeNode)
{
}
if(this._fillNode)
{
}
this._strokeFlag = false;
this._fillFlag = false;
},
/**
* Add a class name to each node.
*
* @method addClass
* @param {String} className the class name to add to the node's class attribute
*/
{
},
/**
* Removes a class name from each node.
*
* @method removeClass
* @param {String} className the class name to remove from the node's class attribute
*/
removeClass: function(className)
{
},
/**
* Gets the current position of the node in page coordinates.
*
* @method getXY
* @return Array The XY position of the shape.
*/
getXY: function()
{
x = this.get("x"),
y = this.get("y");
},
/**
* Set the position of the shape in page coordinates, regardless of how the node is positioned.
*
* @method setXY
* @param {Array} Contains x & y values for new position (coordinates are page-based)
*
*/
{
},
/**
* Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
*
* @method contains
* @param {VMLShape | HTMLElement} needle The possible node or descendent
* @return Boolean Whether or not this shape is the needle or its ancestor.
*/
{
},
/**
* Compares nodes to determine if they match.
* @method compareTo
* @param {HTMLElement | Node} refNode The reference node to compare to the node.
* @return {Boolean} True if the nodes match, false if they do not.
*/
},
/**
* Test if the supplied node matches the supplied selector.
*
* @method test
* @param {String} selector The CSS selector to test against.
* @return Boolean Wheter or not the shape matches the selector.
*/
{
},
/**
* Calculates and returns properties for setting an initial stroke.
*
* @method _getStrokeProps
* @return Object
*
* @private
*/
_getStrokeProps: function()
{
var props,
dash = "",
val,
i = 0,
len,
{
props = {};
{
linecap = "flat";
}
{
dash = [];
for(i = 0; i < len; ++i)
{
}
}
{
}
else
{
{
}
}
}
return props;
},
/**
* Adds a stroke to the shape node.
*
* @method _strokeChangeHandler
* @private
*/
_strokeChangeHandler: function(e)
{
if(!this._strokeFlag)
{
return;
}
dash = "",
val,
i = 0,
len,
{
{
linecap = "flat";
}
if(!this._strokeNode)
{
}
{
dash = [];
for(i = 0; i < len; ++i)
{
}
}
{
}
else
{
{
}
}
this._strokeNode.on = true;
}
else
{
if(this._strokeNode)
{
this._strokeNode.on = false;
}
}
this._strokeFlag = false;
},
/**
* Calculates and returns properties for setting an initial fill.
*
* @method _getFillProps
* @return Object
*
* @private
*/
_getFillProps: function()
{
i,
filled = false;
if(fill)
{
props = {};
{
filled = true;
fillstring = '<fill xmlns="urn:schemas-microsft.com:vml" class="vmlfill" style="behavior:url(#default#VML);display:inline-block;" opacity="' + fillOpacity + '"';
for(i in gradient)
{
if(gradient.hasOwnProperty(i))
{
}
}
fillstring += ' />';
}
{
filled = true;
if(IS_NUM(fillOpacity))
{
if(fillOpacity < 1)
{
props.node = '<fill xmlns="urn:schemas-microsft.com:vml" class="vmlfill" style="behavior:url(#default#VML);display:inline-block;" type="solid" opacity="' + fillOpacity + '"/>';
}
}
}
}
return props;
},
/**
* Adds a fill to the shape node.
*
* @method _fillChangeHandler
* @private
*/
_fillChangeHandler: function(e)
{
if(!this._fillFlag)
{
return;
}
filled = false,
i,
if(fill)
{
{
filled = true;
if(this._fillNode)
{
for(i in gradient)
{
if(gradient.hasOwnProperty(i))
{
}
}
}
else
{
fillstring = '<fill xmlns="urn:schemas-microsft.com:vml" class="vmlfill" style="behavior:url(#default#VML);display:inline-block;"';
for(i in gradient)
{
if(gradient.hasOwnProperty(i))
{
}
}
fillstring += ' />';
}
}
{
filled = true;
{
if(this._fillNode)
{
{
}
}
else
{
fillstring = '<fill xmlns="urn:schemas-microsft.com:vml" class="vmlfill" style="behavior:url(#default#VML);display:inline-block;" type="solid" opacity="' + fillOpacity + '"/>';
}
}
else if(this._fillNode)
{
}
}
}
this._fillFlag = false;
},
//not used. remove next release.
_updateFillNode: function(node)
{
if(!this._fillNode)
{
}
},
/**
* Calculates and returns an object containing gradient properties for a fill node.
*
* @method _getGradientFill
* @param {Object} fill Object containing fill properties.
* @return Object
* @private
*/
_getGradientFill: function(fill)
{
var gradientProps = {},
w = this.get("width"),
h = this.get("height"),
stop,
i = 0,
oi,
colorstring = "",
r = fill.r,
pct,
if(type === "linear")
{
if(rotation <= 270)
{
}
else if(rotation < 360)
{
}
else
{
rotation = 270;
}
}
else if(type === "radial")
{
gradientBoxWidth = w * (r * 2);
gradientBoxHeight = h * (r * 2);
gradientProps.alignshape = false;
}
for(;i < len; ++i) {
pct *= (r * 2);
if(pct <= 1)
{
}
}
pct *= 100;
{
}
return gradientProps;
},
/**
* Adds a transform to the shape.
*
* @method _addTransform
* @param {String} type The transform being applied.
* @param {Array} args The arguments for the transform.
* @private
*/
{
if(this.initialized)
{
this._updateTransform();
}
},
/**
* Applies all transforms.
*
* @method _updateTransform
* @private
*/
_updateTransform: function()
{
key,
x = this.get("x"),
y = this.get("y"),
w = this.get("width"),
h = this.get("height"),
cx,
cy,
dx,
dy,
tx,
ty,
keys = [],
rotationMatrix = this.rotationMatrix,
i = 0,
{
for(; i < len; ++i)
{
if(key)
{
if(key == "rotate")
{
cx = w * 0.5;
cy = h * 0.5;
}
else if(key == "scale")
{
}
else
{
}
}
}
}
this._graphic.addToRedrawQueue(this);
//only apply the filter if necessary as it degrades image quality
{
}
{
}
this._transforms = [];
x += dx;
y += dy;
},
/**
* Storage for translateX
*
* @property _translateX
* @type Number
* @private
*/
_translateX: 0,
/**
* Storage for translateY
*
* @property _translateY
* @type Number
* @private
*/
_translateY: 0,
/**
* Storage for the transform attribute.
*
* @property _transform
* @type String
* @private
*/
_transform: "",
/**
* Specifies a 2d translation.
*
* @method translate
* @param {Number} x The value to transate on the x-axis.
* @param {Number} y The value to translate on the y-axis.
*/
translate: function(x, y)
{
this._translateX += x;
this._translateY += y;
},
/**
* Translates the shape along the x-axis. When translating x and y coordinates,
* use the `translate` method.
*
* @method translateX
* @param {Number} x The value to translate.
*/
translateX: function(x)
{
this._translateX += x;
},
/**
* Performs a translate on the y-coordinate. When translating x and y coordinates,
* use the `translate` method.
*
* @method translateY
* @param {Number} y The value to translate.
*/
translateY: function(y)
{
this._translateY += y;
},
/**
* Skews the shape around the x-axis and y-axis.
*
* @method skew
* @param {Number} x The value to skew on the x-axis.
* @param {Number} y The value to skew on the y-axis.
*/
skew: function(x, y)
{
},
/**
* Skews the shape around the x-axis.
*
* @method skewX
* @param {Number} x x-coordinate
*/
skewX: function(x)
{
},
/**
* Skews the shape around the y-axis.
*
* @method skewY
* @param {Number} y y-coordinate
*/
skewY: function(y)
{
},
/**
* Storage for `rotation` atribute.
*
* @property _rotation
* @type Number
* @private
*/
_rotation: 0,
/**
* Rotates the shape clockwise around it transformOrigin.
*
* @method rotate
* @param {Number} deg The degree of the rotation.
*/
{
},
/**
* Specifies a 2d scaling operation.
*
* @method scale
* @param {Number} val
*/
scale: function(x, y)
{
},
/**
* Overrides default `on` method. Checks to see if its a dom interaction event. If so,
* return an event attached to the `node` element. If not, return the normal functionality.
*
* @method on
* @param {String} type event type
* @param {Object} callback function
* @private
*/
{
{
}
},
/**
* Draws the shape.
*
* @method _draw
* @private
*/
_draw: function()
{
},
/**
* Updates `Shape` based on attribute changes.
*
* @method _updateHandler
* @private
*/
_updateHandler: function(e)
{
var host = this,
this._draw();
},
/**
* Creates a graphic node
*
* @method _createGraphicNode
* @param {String} type node type to create
* @return HTMLElement
* @private
*/
_createGraphicNode: function(type)
{
return DOCUMENT.createElement('<' + type + ' xmlns="urn:schemas-microsft.com:vml" style="behavior:url(#default#VML);display:inline-block;" class="vml' + type + '"/>');
},
/**
* Value function for fill attribute
*
* @private
* @method _getDefaultFill
* @return Object
*/
_getDefaultFill: function() {
return {
type: "solid",
cx: 0.5,
cy: 0.5,
fx: 0.5,
fy: 0.5,
r: 0.5
};
},
/**
* Value function for stroke attribute
*
* @private
* @method _getDefaultStroke
* @return Object
*/
_getDefaultStroke: function()
{
return {
weight: 1,
dashstyle: "none",
color: "#000",
opacity: 1.0
};
},
/**
* Sets the value of an attribute.
*
* @method set
* @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can
* be passed in to set multiple attributes at once.
* @param {Any} value The value to set the attribute to. This value is ignored if an object is received as
* the name param.
*/
set: function()
{
var host = this;
if(host.initialized)
{
}
},
/**
* Returns the bounds for a shape.
*
* Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.
* The calculated bounding box is used by the graphic instance to calculate its viewBox.
*
* @method getBounds
* @param {Matrix} [optional] cfg Reference to matrix instance
* @return Object
*/
{
var wt,
bounds = {},
a = matrix.a,
b = matrix.b,
c = matrix.c,
d = matrix.d,
w = this.get("width"),
h = this.get("height"),
//[x1, y1]
//[x2, y2]
//[x3, y3]
//[x4, y4]
//if there is a stroke, extend the bounds to accomodate
{
}
return bounds;
},
/**
* Destroys shape
*
* @method destroy
*/
destroy: function()
{
if(this.node)
{
if(this._fillNode)
{
}
if(this._strokeNode)
{
}
if(parentNode)
{
}
}
}
}, Y.VMLDrawing.prototype));
/**
* An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a
* fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].
*
* @config transformOrigin
* @type Array
*/
valueFn: function()
{
return [0.5, 0.5];
}
},
/**
* <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:
*
* <dl>
* <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>
* <dt>translate</dt><dd>Specifies a 2d translation.</dd>
* <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>
* <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>
* <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>
* <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>
* <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>
* <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>
* </dl>
* </p>
* <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform
* that will apply the transform to the current matrix. The below code illustrates how you might use the `transform` attribute to instantiate a recangle with a rotation of 45 degrees.</p>
var myRect = new Y.Rect({
type:"rect",
width: 50,
height: 40,
transform: "rotate(45)"
};
* <p>The code below would apply `translate` and `rotate` to an existing shape.</p>
myRect.set("transform", "translate(40, 50) rotate(45)");
* @config transform
* @type String
*/
transform: {
{
var i = 0,
len,
this._rotation = 0;
for(;i < len; ++i)
{
transform = this._transforms[i];
{
}
}
this._transform = val;
if(this.initialized)
{
this._updateTransform();
}
return val;
},
getter: function()
{
return this._transform;
}
},
/**
* Indicates the x position of shape.
*
* @config x
* @type Number
*/
x: {
value: 0
},
/**
* Indicates the y position of shape.
*
* @config y
* @type Number
*/
y: {
value: 0
},
/**
* Unique id for class instance.
*
* @config id
* @type String
*/
id: {
valueFn: function()
{
return Y.guid();
},
{
if(node)
{
}
return val;
}
},
/**
*
* @config width
*/
width: {
value: 0
},
/**
*
* @config height
*/
height: {
value: 0
},
/**
* Indicates whether the shape is visible.
*
* @config visible
* @type Boolean
*/
visible: {
value: true,
if(node)
{
}
return val;
}
},
/**
* Contains information about the fill of the shape.
* <dl>
* <dt>color</dt><dd>The color of the fill.</dd>
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
* <dt>type</dt><dd>Type of fill.
* <dl>
* <dt>solid</dt><dd>Solid single color fill. (default)</dd>
* <dt>linear</dt><dd>Linear gradient fill.</dd>
* <dt>radial</dt><dd>Radial gradient fill.</dd>
* </dl>
* </dd>
* </dl>
* <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used:
* <dl>
* <dt>stops</dt><dd>An array of objects containing the following properties:
* <dl>
* <dt>color</dt><dd>The color of the stop.</dd>
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8</dd>
* <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>
* </dl>
* </dd>
* <p>Linear gradients also have the following property:</p>
* <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>
* <p>Radial gradients have the following additional properties:</p>
* <dt>r</dt><dd>Radius of the gradient circle.</dd>
* <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
* <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
* </dl>
* <p>The corresponding `SVGShape` class implements the following additional properties.</p>
* <dl>
* <dt>cx</dt><dd>
* <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
* </dd>
* <dt>cy</dt><dd>
* <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
* </dd>
* </dl>
* <p>These properties are not currently implemented in `CanvasShape` or `VMLShape`.</p>
*
* @config fill
* @type Object
*/
fill: {
valueFn: "_getDefaultFill",
{
var i,
fill,
if(val)
{
//ensure, fill type is solid if color is explicitly passed.
{
}
for(i in val)
{
if(val.hasOwnProperty(i))
{
}
}
}
{
{
}
}
this._fillFlag = true;
return fill;
}
},
/**
* Contains information about the stroke of the shape.
* <dl>
* <dt>color</dt><dd>The color of the stroke.</dd>
* <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
* <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the
* length of the dash. The second index indicates the length of gap.
* <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:
* <dl>
* <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>
* <dt>square</dt><dd>Specifies a sqare linecap.</dd>
* <dt>round</dt><dd>Specifies a round linecap.</dd>
* </dl>
* </dd>
* <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:
* <dl>
* <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>
* <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>
* <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having
* separate miter and miter limit values.</dd>
* </dl>
* </dd>
* </dl>
*
* @config stroke
* @type Object
*/
stroke: {
valueFn: "_getDefaultStroke",
{
var i,
wt,
if(val)
{
{
{
}
}
for(i in val)
{
if(val.hasOwnProperty(i))
{
}
}
}
this._strokeFlag = true;
return stroke;
}
},
//Not used. Remove in future.
autoSize: {
value: false
},
// Only implemented in SVG
// Determines whether the instance will receive mouse events.
//
// @config pointerEvents
// @type string
//
value: "visiblePainted"
},
/**
* Dom node for the shape.
*
* @config node
* @type HTMLElement
* @readOnly
*/
node: {
readOnly: true,
getter: function()
{
return this.node;
}
},
/**
* Reference to the container Graphic.
*
* @config graphic
* @type Graphic
*/
graphic: {
readOnly: true,
getter: function()
{
return this._graphic;
}
}
};