/*
MIT License
Copyright (c) 2012 - 2021 jonobr1 / http://jonobr1.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/**
* @name Two.Commands
* @property {Object} - Map of possible path commands. Taken from the SVG specification.
*/
var Commands = {
move: 'M',
line: 'L',
curve: 'C',
arc: 'A',
close: 'Z'
};
var root;
if (typeof window !== 'undefined') {
root = window;
} else if (typeof global !== 'undefined') {
root = global;
} else if (typeof self !== 'undefined') {
root = self;
}
var root$1 = root;
var Matrix$1;
/**
* @name Two.Utils.decomposeMatrix
* @function
* @param {Two.Matrix} matrix - The matrix to decompose.
* @returns {Object} An object containing relevant skew values.
* @description Decompose a 2D 3x3 Matrix to find the skew.
*/
var decomposeMatrix = function(matrix) {
// TODO: Include skewX, skewY
// https://math.stackexchange.com/questions/237369/given-this-transformation-matrix-how-do-i-decompose-it-into-translation-rotati/417813
// https://stackoverflow.com/questions/45159314/decompose-2d-transformation-matrix
return {
translateX: matrix.e,
translateY: matrix.f,
scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),
scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
rotation: 180 * Math.atan2(matrix.b, matrix.a) / Math.PI
};
};
var setMatrix = function(M) {
Matrix$1 = M;
};
/**
* @name Two.Utils.getComputedMatrix
* @function
* @param {Two.Shape} object - The Two.js object that has a matrix property to calculate from.
* @param {Two.Matrix} [matrix] - The matrix to apply calculated transformations to if available.
* @returns {Two.Matrix} The computed matrix of a nested object. If no `matrix` was passed in arguments then a `new Two.Matrix` is returned.
* @description Method to get the world space transformation of a given object in a Two.js scene.
*/
var getComputedMatrix = function(object, matrix) {
matrix = (matrix && matrix.identity()) || new Matrix$1();
var parent = object, matrices = [];
while (parent && parent._matrix) {
matrices.push(parent._matrix);
parent = parent.parent;
}
matrices.reverse();
for (var i = 0; i < matrices.length; i++) {
var m = matrices[i];
var e = m.elements;
matrix.multiply(
e[0], e[1], e[2], e[3], e[4], e[5], e[6], e[7], e[8], e[9]);
}
return matrix;
};
/**
* @name Two.Utils.lerp
* @function
* @param {Number} a - Start value.
* @param {Number} b - End value.
* @param {Number} t - Zero-to-one value describing percentage between a and b.
* @returns {Number}
* @description Linear interpolation between two values `a` and `b` by an amount `t`.
*/
var lerp = function(a, b, t) {
return t * (b - a) + a;
};
/**
* @name Two.Utils.mod
* @function
* @param {Number} v - The value to modulo
* @param {Number} l - The value to modulo by
* @returns {Number}
* @description Modulo with added functionality to handle negative values in a positive manner.
*/
var mod = function(v, l) {
while (v < 0) {
v += l;
}
return v % l;
};
var NumArray = root$1.Float32Array || Array;
/**
* @name Two.Utils.toFixed
* @function
* @param {Number} v - Any float
* @returns {Number} That float trimmed to the third decimal place.
* @description A pretty fast toFixed(3) alternative.
* @see {@link http://jsperf.com/parsefloat-tofixed-vs-math-round/18}
*/
var toFixed = function(v) {
return Math.floor(v * 1000000) / 1000000;
};
var math = /*#__PURE__*/Object.freeze({
__proto__: null,
decomposeMatrix: decomposeMatrix,
getComputedMatrix: getComputedMatrix,
setMatrix: setMatrix,
lerp: lerp,
mod: mod,
NumArray: NumArray,
toFixed: toFixed
});
var slice = Array.prototype.slice;
var isArrayLike = function(collection) {
if (collection === null || collection === undefined) return false;
var length = collection.length;
// Arrays cannot hold more than 2^32 - 1 items
return (typeof length == 'number' && length >= 0 && length < 4294967296);
};
var _ = {
isNaN: function(obj) {
return typeof obj === 'number' && obj !== +obj;
},
isElement: function(obj) {
return !!(obj && obj.nodeType === 1);
},
isObject: function(obj) {
var type = typeof obj;
return type === 'function' || type === 'object' && !!obj;
},
extend: function(base) {
var sources = slice.call(arguments, 1);
for (var i = 0; i < sources.length; i++) {
var obj = sources[i];
for (var k in obj) {
base[k] = obj[k];
}
}
return base;
},
defaults: function(base) {
var sources = slice.call(arguments, 1);
for (var i = 0; i < sources.length; i++) {
var obj = sources[i];
for (var k in obj) {
if (base[k] === void 0) {
base[k] = obj[k];
}
}
}
return base;
},
each: function(obj, iteratee, context) {
var ctx = context || this;
var keys = !isArrayLike(obj) && Object.keys(obj);
var length = (keys || obj).length;
for (var i = 0; i < length; i++) {
var k = keys ? keys[i] : i;
iteratee.call(ctx, obj[k], k, obj);
}
return obj;
},
/**
* @name Two.Utils.performance
* @property {Date} - A special `Date` like object to get the current millis of the session. Used internally to calculate time between frames.
* e.g: `Utils.performance.now() // milliseconds since epoch`
*/
performance: ((root$1.performance && root$1.performance.now) ? root$1.performance : Date),
};
/**
* @name Two.Events
* @class
* @description Object inherited by many Two.js objects in order to facilitate custom events.
*/
var Events = {
/**
* @name Two.Events#on
* @function
* @param {String} [name] - The name of the event to bind a function to.
* @param {Function} [handler] - The function to be invoked when the event is dispatched.
* @description Call to add a listener to a specific event name.
*/
on: addEventListener,
/**
* @name Two.Events#off
* @function
* @param {String} [name] - The name of the event intended to be removed.
* @param {Function} [handler] - The handler intended to be reomved.
* @description Call to remove listeners from a specific event. If only `name` is passed then all the handlers attached to that `name` will be removed. If no arguments are passed then all handlers for every event on the obejct are removed.
*/
off: removeEventListener,
/**
* @name Two.Events#trigger
* @function
* @param {String} name - The name of the event to dispatch.
* @param arguments - Anything can be passed after the name and those will be passed on to handlers attached to the event in the order they are passed.
* @description Call to trigger a custom event. Any additional arguments passed after the name will be passed along to the attached handlers.
*/
trigger: function(name) {
var scope = this;
if (!scope._events) return scope;
var args = Array.prototype.slice.call(arguments, 1);
var events = scope._events[name];
if (events) dispatch(scope, events, args);
return scope;
},
listen: function(obj, name, handler) {
var bound = this;
if (obj) {
var event = function () {
handler.apply(bound, arguments);
};
// Add references about the object that assigned this listener
event.obj = obj;
event.name = name;
event.handler = handler;
obj.on(name, event);
}
return bound;
},
ignore: function(obj, name, handler) {
var scope = this;
obj.off(name, handler);
return scope;
},
/**
* @name Two.Events.Types
* @property {Object} - Object of different types of Two.js specific events.
*/
Types: {
play: 'play',
pause: 'pause',
update: 'update',
render: 'render',
resize: 'resize',
change: 'change',
remove: 'remove',
insert: 'insert',
order: 'order',
load: 'load'
}
};
/**
* @name Two.Events.bind
* @function
* @description Alias for {@link Two.Events.on}.
*/
Events.bind = addEventListener;
/**
* @name Two.Events.unbind
* @function
* @description Alias for {@link Two.Events.off}.
*/
Events.unbind = removeEventListener;
/**
* @private
* @returns {Two.Events} - Returns an instance of self for the purpose of chaining.
*/
function addEventListener(name, handler) {
var scope = this;
scope._events || (scope._events = {});
var list = scope._events[name] || (scope._events[name] = []);
list.push(handler);
return scope;
}
/**
* @private
* @returns {Two.Events} - Returns an instance of self for the purpose of chaining.
*/
function removeEventListener(name, handler) {
var scope = this;
if (!scope._events) {
return scope;
}
if (!name && !handler) {
scope._events = {};
return scope;
}
var names = name ? [name] : Object.keys(scope._events);
for (var i = 0, l = names.length; i < l; i++) {
name = names[i];
var list = scope._events[name];
if (list) {
var events = [];
if (handler) {
for (var j = 0, k = list.length; j < k; j++) {
var ev = list[j];
ev = ev.handler ? ev.handler : ev;
if (handler && handler !== ev) {
events.push(ev);
}
}
}
scope._events[name] = events;
}
}
return scope;
}
function dispatch(obj, events, args) {
var method;
switch (args.length) {
case 0:
method = function(i) {
events[i].call(obj, args[0]);
};
break;
case 1:
method = function(i) {
events[i].call(obj, args[0], args[1]);
};
break;
case 2:
method = function(i) {
events[i].call(obj, args[0], args[1], args[2]);
};
break;
case 3:
method = function(i) {
events[i].call(obj, args[0], args[1], args[2], args[3]);
};
break;
default:
method = function(i) {
events[i].apply(obj, args);
};
}
for (var i = 0; i < events.length; i++) {
method(i);
}
}
/**
* @name Two.Vector
* @class
* @param {Number} [x=0] - Any number to represent the horizontal x-component of the vector.
* @param {Number} [y=0] - Any number to represent the vertical y-component of the vector.
* @description A class to store x / y component vector data. In addition to storing data `Two.Vector` has suped up methods for commonplace mathematical operations.
*/
function Vector(x, y) {
/**
* @name Two.Vector#x
* @property {Number} - The horizontal x-component of the vector.
*/
this.x = x || 0;
/**
* @name Two.Vector#y
* @property {Number} - The vertical y-component of the vector.
*/
this.y = y || 0;
}
_.extend(Vector, {
/**
* @name Two.Vector.zero
* @readonly
* @property {Two.Vector} - Handy reference to a vector with component values 0, 0 at all times.
*/
zero: new Vector(),
/**
* @name Two.Vector.add
* @function
* @param {Two.Vector} v1
* @param {Two.Vector} v2
* @returns {Two.Vector}
* @description Add two vectors together.
*/
add: function(v1, v2) {
return new Vector(v1.x + v2.x, v1.y + v2.y);
},
/**
* @name Two.Vector.sub
* @function
* @param {Two.Vector} v1
* @param {Two.Vector} v2
* @returns {Two.Vector}
* @description Subtract two vectors: `v2` from `v1`.
*/
sub: function(v1, v2) {
return new Vector(v1.x - v2.x, v1.y - v2.y);
},
/**
* @name Two.Vector.subtract
* @function
* @description Alias for {@link Two.Vector.sub}.
*/
subtract: function(v1, v2) {
return Vector.sub(v1, v2);
},
/**
* @name Two.Vector.ratioBetween
* @function
* @param {Two.Vector} A
* @param {Two.Vector} B
* @returns {Number} The ratio betwen two points `v1` and `v2`.
*/
ratioBetween: function(v1, v2) {
return (v1.x * v2.x + v1.y * v2.y) / (v1.length() * v2.length());
},
/**
* @name Two.Vector.angleBetween
* @function
* @param {Two.Vector} v1
* @param {Two.Vector} v2
* @returns {Number} The angle between points `v1` and `v2`.
*/
angleBetween: function(v1, v2) {
var dx, dy;
if (arguments.length >= 4) {
dx = arguments[0] - arguments[2];
dy = arguments[1] - arguments[3];
return Math.atan2(dy, dx);
}
dx = v1.x - v2.x;
dy = v1.y - v2.y;
return Math.atan2(dy, dx);
},
/**
* @name Two.Vector.distanceBetween
* @function
* @param {Two.Vector} v1
* @param {Two.Vector} v2
* @returns {Number} The distance between points `v1` and `v2`. Distance is always positive.
*/
distanceBetween: function(v1, v2) {
return Math.sqrt(Vector.distanceBetweenSquared(v1, v2));
},
/**
* @name Two.Vector.distanceBetweenSquared
* @function
* @param {Two.Vector} v1
* @param {Two.Vector} v2
* @returns {Number} The squared distance between points `v1` and `v2`.
*/
distanceBetweenSquared: function(v1, v2) {
var dx = v1.x - v2.x;
var dy = v1.y - v2.y;
return dx * dx + dy * dy;
},
/**
* @name Two.Vector.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Vector} to any object. Handy if you'd like to extend the {@link Two.Vector} class on a custom class.
*/
MakeObservable: function(object) {
// /**
// * Override Backbone bind / on in order to add properly broadcasting.
// * This allows Two.Vector to not broadcast events unless event listeners
// * are explicity bound to it.
// */
object.bind = object.on = function() {
if (!this._bound) {
this._x = this.x;
this._y = this.y;
Object.defineProperty(this, 'x', xgs);
Object.defineProperty(this, 'y', ygs);
_.extend(this, BoundProto);
this._bound = true; // Reserved for event initialization check
}
Events.bind.apply(this, arguments);
return this;
};
}
});
_.extend(Vector.prototype, Events, {
constructor: Vector,
/**
* @name Two.Vector#set
* @function
* @param {Number} x
* @param {Number} y
* @description Set the x / y components of a vector to specific number values.
*/
set: function(x, y) {
this.x = x;
this.y = y;
return this;
},
/**
* @name Two.Vector#copy
* @function
* @param {Two.Vector} v
* @description Copy the x / y components of another object `v`.
*/
copy: function(v) {
this.x = v.x;
this.y = v.y;
return this;
},
/**
* @name Two.Vector#clear
* @function
* @description Set the x / y component values of the vector to zero.
*/
clear: function() {
this.x = 0;
this.y = 0;
return this;
},
/**
* @name Two.Vector#clone
* @function
* @description Create a new vector and copy the existing values onto the newly created instance.
*/
clone: function() {
return new Vector(this.x, this.y);
},
/**
* @name Two.Vector#add
* @function
* @param {Two.Vector} v
* @description Add an object with x / y component values to the instance.
* @overloaded
*/
/**
* @name Two.Vector#add
* @function
* @param {Number} v
* @description Add the **same** number to both x / y component values of the instance.
* @overloaded
*/
/**
* @name Two.Vector#add
* @function
* @param {Number} x
* @param {Number} y
* @description Add `x` / `y` values to their respective component value on the instance.
* @overloaded
*/
add: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this.x += x;
this.y += x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this.x += x.x;
this.y += x.y;
}
} else {
this.x += x;
this.y += y;
}
return this;
},
/**
* @name Two.Vector#addSelf
* @function
* @description Alias for {@link Two.Vector.add}.
*/
addSelf: function(v) {
return this.add.apply(this, arguments);
},
/**
* @name Two.Vector#sub
* @function
* @param {Two.Vector} v
* @description Subtract an object with x / y component values to the instance.
* @overloaded
*/
/**
* @name Two.Vector#sub
* @function
* @param {Number} v
* @description Subtract the **same** number to both x / y component values of the instance.
* @overloaded
*/
/**
* @name Two.Vector#sub
* @function
* @param {Number} x
* @param {Number} y
* @description Subtract `x` / `y` values to their respective component value on the instance.
* @overloaded
*/
sub: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this.x -= x;
this.y -= x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this.x -= x.x;
this.y -= x.y;
}
} else {
this.x -= x;
this.y -= y;
}
return this;
},
/**
* @name Two.Vector#subtract
* @function
* @description Alias for {@link Two.Vector.sub}.
*/
subtract: function() {
return this.sub.apply(this, arguments);
},
/**
* @name Two.Vector#subSelf
* @function
* @description Alias for {@link Two.Vector.sub}.
*/
subSelf: function(v) {
return this.sub.apply(this, arguments);
},
/**
* @name Two.Vector#subtractSelf
* @function
* @description Alias for {@link Two.Vector.sub}.
*/
subtractSelf: function(v) {
return this.sub.apply(this, arguments);
},
/**
* @name Two.Vector#multiply
* @function
* @param {Two.Vector} v
* @description Multiply an object with x / y component values to the instance.
* @overloaded
*/
/**
* @name Two.Vector#multiply
* @function
* @param {Number} v
* @description Multiply the **same** number to both x / y component values of the instance.
* @overloaded
*/
/**
* @name Two.Vector#multiply
* @function
* @param {Number} x
* @param {Number} y
* @description Multiply `x` / `y` values to their respective component value on the instance.
* @overloaded
*/
multiply: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this.x *= x;
this.y *= x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this.x *= x.x;
this.y *= x.y;
}
} else {
this.x *= x;
this.y *= y;
}
return this;
},
/**
* @name Two.Vector#multiplySelf
* @function
* @description Alias for {@link Two.Vector.multiply}.
*/
multiplySelf: function(v) {
return this.multiply.apply(this, arguments);
},
/**
* @name Two.Vector#multiplyScalar
* @function
* @param {Number} s - The scalar to multiply by.
* @description Mulitiply the vector by a single number. Shorthand to call {@link Two.Vector#multiply} directly.
*/
multiplyScalar: function(s) {
return this.multiply(s);
},
/**
* @name Two.Vector#divide
* @function
* @param {Two.Vector} v
* @description Divide an object with x / y component values to the instance.
* @overloaded
*/
/**
* @name Two.Vector#divide
* @function
* @param {Number} v
* @description Divide the **same** number to both x / y component values of the instance.
* @overloaded
*/
/**
* @name Two.Vector#divide
* @function
* @param {Number} x
* @param {Number} y
* @description Divide `x` / `y` values to their respective component value on the instance.
* @overloaded
*/
divide: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this.x /= x;
this.y /= x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this.x /= x.x;
this.y /= x.y;
}
} else {
this.x /= x;
this.y /= y;
}
if (_.isNaN(this.x)) {
this.x = 0;
}
if (_.isNaN(this.y)) {
this.y = 0;
}
return this;
},
/**
* @name Two.Vector#divideSelf
* @function
* @description Alias for {@link Two.Vector.divide}.
*/
divideSelf: function(v) {
return this.divide.apply(this, arguments);
},
/**
* @name Two.Vector#divideScalar
* @function
* @param {Number} s - The scalar to divide by.
* @description Divide the vector by a single number. Shorthand to call {@link Two.Vector#divide} directly.
*/
divideScalar: function(s) {
return this.divide(s);
},
/**
* @name Two.Vector#negate
* @function
* @description Invert each component's sign value.
*/
negate: function() {
return this.multiply(-1);
},
/**
* @name Two.Vector#negate
* @function
* @returns {Number}
* @description Get the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the vector.
*/
dot: function(v) {
return this.x * v.x + this.y * v.y;
},
/**
* @name Two.Vector#length
* @function
* @returns {Number}
* @description Get the length of a vector.
*/
length: function() {
return Math.sqrt(this.lengthSquared());
},
/**
* @name Two.Vector#lengthSquared
* @function
* @returns {Number}
* @description Get the length of the vector to the power of two. Widely used as less expensive than {@link Two.Vector#length}, because it isn't square-rooting any numbers.
*/
lengthSquared: function() {
return this.x * this.x + this.y * this.y;
},
/**
* @name Two.Vector#normalize
* @function
* @description Normalize the vector from negative one to one.
*/
normalize: function() {
return this.divideScalar(this.length());
},
/**
* @name Two.Vector#distanceTo
* @function
* @returns {Number}
* @description Get the distance between two vectors.
*/
distanceTo: function(v) {
return Math.sqrt(this.distanceToSquared(v));
},
/**
* @name Two.Vector#distanceToSquared
* @function
* @returns {Number}
* @description Get the distance between two vectors to the power of two. Widely used as less expensive than {@link Two.Vector#distanceTo}, because it isn't square-rooting any numbers.
*/
distanceToSquared: function(v) {
var dx = this.x - v.x,
dy = this.y - v.y;
return dx * dx + dy * dy;
},
/**
* @name Two.Vector#setLength
* @function
* @param {Number} l - length to set vector to.
* @description Set the length of a vector.
*/
setLength: function(l) {
return this.normalize().multiplyScalar(l);
},
/**
* @name Two.Vector#equals
* @function
* @param {Two.Vector} v - The vector to compare against.
* @param {Number} [eps=0.0001] - An options epsilon for precision.
* @returns {Boolean}
* @description Qualify if one vector roughly equal another. With a margin of error defined by epsilon.
*/
equals: function(v, eps) {
eps = (typeof eps === 'undefined') ? 0.0001 : eps;
return (this.distanceTo(v) < eps);
},
/**
* @name Two.Vector#lerp
* @function
* @param {Two.Vector} v - The destination vector to step towards.
* @param {Number} t - The zero to one value of how close the current vector gets to the destination vector.
* @description Linear interpolate one vector to another by an amount `t` defined as a zero to one number.
* @see [Matt DesLauriers](https://twitter.com/mattdesl/status/1031305279227478016) has a good thread about this.
*/
lerp: function(v, t) {
var x = (v.x - this.x) * t + this.x;
var y = (v.y - this.y) * t + this.y;
return this.set(x, y);
},
/**
* @name Two.Vector#isZero
* @function
* @param {Number} [eps=0.0001] - Optional precision amount to check against.
* @returns {Boolean}
* @description Check to see if vector is roughly zero, based on the `epsilon` precision value.
*/
isZero: function(eps) {
eps = (typeof eps === 'undefined') ? 0.0001 : eps;
return (this.length() < eps);
},
/**
* @name Two.Vector#toString
* @function
* @returns {String}
* @description Return a comma-separated string of x, y value. Great for storing in a database.
*/
toString: function() {
return this.x + ', ' + this.y;
},
/**
* @name Two.Vector#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the vector.
*/
toObject: function() {
return { x: this.x, y: this.y };
},
/**
* @name Two.Vector#rotate
* @function
* @param {Number} Number - The amoun to rotate the vector by.
* @description Rotate a vector.
*/
rotate: function(Number) {
var cos = Math.cos(Number);
var sin = Math.sin(Number);
this.x = this.x * cos - this.y * sin;
this.y = this.x * sin + this.y * cos;
return this;
}
});
// The same set of prototypical functions, but using the underlying
// getter or setter for `x` and `y` values. This set of functions
// is used instead of the previously documented ones above when
// Two.Vector#bind is invoked and there is event dispatching processed
// on x / y property changes.
var BoundProto = {
constructor: Vector,
set: function(x, y) {
this._x = x;
this._y = y;
return this.trigger(Events.Types.change);
},
copy: function(v) {
this._x = v.x;
this._y = v.y;
return this.trigger(Events.Types.change);
},
clear: function() {
this._x = 0;
this._y = 0;
return this.trigger(Events.Types.change);
},
clone: function() {
return new Vector(this._x, this._y);
},
add: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this._x += x;
this._y += x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this._x += x.x;
this._y += x.y;
}
} else {
this._x += x;
this._y += y;
}
return this.trigger(Events.Types.change);
},
sub: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this._x -= x;
this._y -= x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this._x -= x.x;
this._y -= x.y;
}
} else {
this._x -= x;
this._y -= y;
}
return this.trigger(Events.Types.change);
},
multiply: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this._x *= x;
this._y *= x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this._x *= x.x;
this._y *= x.y;
}
} else {
this._x *= x;
this._y *= y;
}
return this.trigger(Events.Types.change);
},
divide: function(x, y) {
if (arguments.length <= 0) {
return this;
} else if (arguments.length <= 1) {
if (typeof x === 'number') {
this._x /= x;
this._y /= x;
} else if (x && typeof x.x === 'number' && typeof x.y === 'number') {
this._x /= x.x;
this._y /= x.y;
}
} else {
this._x /= x;
this._y /= y;
}
if (_.isNaN(this._x)) {
this._x = 0;
}
if (_.isNaN(this._y)) {
this._y = 0;
}
return this.trigger(Events.Types.change);
},
dot: function(v) {
return this._x * v.x + this._y * v.y;
},
lengthSquared: function() {
return this._x * this._x + this._y * this._y;
},
distanceToSquared: function(v) {
var dx = this._x - v.x,
dy = this._y - v.y;
return dx * dx + dy * dy;
},
lerp: function(v, t) {
var x = (v.x - this._x) * t + this._x;
var y = (v.y - this._y) * t + this._y;
return this.set(x, y);
},
toString: function() {
return this._x + ', ' + this._y;
},
toObject: function() {
return { x: this._x, y: this._y };
},
rotate: function (Number) {
var cos = Math.cos(Number);
var sin = Math.sin(Number);
this._x = this._x * cos - this._y * sin;
this._y = this._x * sin + this._y * cos;
return this;
}
};
var xgs = {
enumerable: true,
get: function() {
return this._x;
},
set: function(v) {
this._x = v;
this.trigger(Events.Types.change, 'x');
}
};
var ygs = {
enumerable: true,
get: function() {
return this._y;
},
set: function(v) {
this._y = v;
this.trigger(Events.Types.change, 'y');
}
};
Vector.MakeObservable(Vector.prototype);
/**
* @class
* @name Two.Anchor
* @param {Number} [x=0] - The x position of the root anchor point.
* @param {Number} [y=0] - The y position of the root anchor point.
* @param {Number} [lx=0] - The x position of the left handle point.
* @param {Number} [ly=0] - The y position of the left handle point.
* @param {Number} [rx=0] - The x position of the right handle point.
* @param {Number} [ry=0] - The y position of the right handle point.
* @param {String} [command=Two.Commands.move] - The command to describe how to render. Applicable commands are {@link Two.Commands}
* @extends Two.Vector
* @description An object that holds 3 {@link Two.Vector}s, the anchor point and its corresponding handles: `left` and `right`. In order to properly describe the bezier curve about the point there is also a command property to describe what type of drawing should occur when Two.js renders the anchors.
*/
function Anchor(x, y, lx, ly, rx, ry, command) {
Vector.call(this, x, y);
this._broadcast = (function() {
this.trigger(Events.Types.change);
}).bind(this);
this._command = command || Commands.move;
this._relative = true;
var ilx = typeof lx === 'number';
var ily = typeof ly === 'number';
var irx = typeof rx === 'number';
var iry = typeof ry === 'number';
// Append the `controls` object only if control points are specified,
// keeping the Two.Anchor inline with a Two.Vector until it needs to
// evolve beyond those functions - e.g: a simple 2 component vector.
if (ilx || ily || irx || iry) {
Anchor.AppendCurveProperties(this);
}
if (ilx) {
this.controls.left.x = lx;
}
if (ily) {
this.controls.left.y = ly;
}
if (irx) {
this.controls.right.x = rx;
}
if (iry) {
this.controls.right.y = ry;
}
}
_.extend(Anchor, {
/**
* @name Two.Anchor.AppendCurveProperties
* @function
* @param {Two.Anchor} anchor - The instance to append the `control`object to.
* @description Adds the `controls` property as an object with `left` and `right` properties to access the bezier control handles that define how the curve is drawn. It also sets the `relative` property to `true` making vectors in the `controls` object relative to their corresponding root anchor point.
*/
AppendCurveProperties: function(anchor) {
anchor.relative = true;
/**
* @name Two.Anchor#controls
* @property {Object} controls
* @description An plain object that holds the controls handles for a {@link Two.Anchor}.
*/
anchor.controls = {};
/**
* @name Two.Anchor#controls#left
* @property {Two.Vector} left
* @description The "left" control point to define handles on a bezier curve.
*/
anchor.controls.left = new Vector(0, 0);
/**
* @name Two.Anchor#controls#right
* @property {Two.Vector} right
* @description The "left" control point to define handles on a bezier curve.
*/
anchor.controls.right = new Vector(0, 0);
},
/**
* @name Two.Anchor.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Anchor} to any object. Handy if you'd like to extend the {@link Two.Anchor} class on a custom class.
*/
MakeObservable: function(object) {
/**
* @name Two.Anchor#command
* @property {Two.Commands}
* @description A draw command associated with the anchor point.
*/
Object.defineProperty(object, 'command', {
enumerable: true,
get: function() {
return this._command;
},
set: function(c) {
this._command = c;
if (this._command === Commands.curve && !_.isObject(this.controls)) {
Anchor.AppendCurveProperties(this);
}
this.trigger(Events.Types.change);
}
});
/**
* @name Two.Anchor#relative
* @property {Boolean}
* @description A boolean to render control points relative to the root anchor point or in global coordinate-space to the rest of the scene.
*/
Object.defineProperty(object, 'relative', {
enumerable: true,
get: function() {
return this._relative;
},
set: function(b) {
if (this._relative != b) {
this._relative = !!b;
this.trigger(Events.Types.change);
}
}
});
_.extend(object, Vector.prototype, AnchorProto);
// Make it possible to bind and still have the Anchor specific
// inheritance from Two.Vector. In this case relying on `Two.Vector`
// to do much of the heavy event-listener binding / unbinding.
object.bind = object.on = function() {
var bound = this._bound;
Vector.prototype.bind.apply(this, arguments);
if (!bound) {
_.extend(this, AnchorProto);
}
};
}
});
var AnchorProto = {
constructor: Anchor,
/**
* @name Two.Anchor#listen
* @function
* @description Convenience method used mainly by {@link Two.Path#vertices} to listen and propagate changes from control points up to their respective anchors and further if necessary.
*/
listen: function() {
if (!_.isObject(this.controls)) {
Anchor.AppendCurveProperties(this);
}
this.controls.left.bind(Events.Types.change, this._broadcast);
this.controls.right.bind(Events.Types.change, this._broadcast);
return this;
},
/**
* @name Two.Anchor#ignore
* @function
* @description Convenience method used mainly by {@link Two.Path#vertices} to ignore changes from a specific anchor's control points.
*/
ignore: function() {
this.controls.left.unbind(Events.Types.change, this._broadcast);
this.controls.right.unbind(Events.Types.change, this._broadcast);
return this;
},
/**
* @name Two.Anchor#copy
* @function
* @param {Two.Anchor} v - The anchor to apply values to.
* @description Copy the properties of one {@link Two.Anchor} onto another.
*/
copy: function(v) {
this.x = v.x;
this.y = v.y;
if (typeof v.command === 'string') {
this.command = v.command;
}
if (_.isObject(v.controls)) {
if (!_.isObject(this.controls)) {
Anchor.AppendCurveProperties(this);
}
// TODO: Do we need to listen here?
this.controls.left.copy(v.controls.left);
this.controls.right.copy(v.controls.right);
}
if (typeof v.relative === 'boolean') {
this.relative = v.relative;
}
// TODO: Hack for `Two.Commands.arc`
if (this.command === Commands.arc) {
this.rx = v.rx;
this.ry = v.ry;
this.xAxisRotation = v.xAxisRotation;
this.largeArcFlag = v.largeArcFlag;
this.sweepFlag = v.sweepFlag;
}
return this;
},
/**
* @name Two.Anchor#clone
* @function
* @returns {Two.Anchor}
* @description Create a new {@link Two.Anchor}, set all its values to the current instance and return it for use.
*/
clone: function() {
var controls = this.controls;
var clone = new Anchor(
this.x,
this.y,
controls && controls.left.x,
controls && controls.left.y,
controls && controls.right.x,
controls && controls.right.y,
this.command
);
clone.relative = this._relative;
return clone;
},
/**
* @name Two.Anchor#toObject
* @function
* @returns {Object} - An object with properties filled out to mirror {@link Two.Anchor}.
* @description Create a JSON compatible plain object of the current instance. Intended for use with storing values in a database.
*/
toObject: function() {
var o = {
x: this.x,
y: this.y
};
if (this._command) {
o.command = this._command;
}
if (this._relative) {
o.relative = this._relative;
}
if (this.controls) {
o.controls = {
left: this.controls.left.toObject(),
right: this.controls.right.toObject()
};
}
return o;
},
/**
* @name Two.Anchor#toString
* @function
* @returns {String} - A String with comma-separated values reflecting the various values on the current instance.
* @description Create a string form of the current instance. Intended for use with storing values in a database. This is lighter to store than the JSON compatible {@link Two.Anchor#toObject}.
*/
toString: function() {
if (!this.controls) {
return [this._x, this._y].join(', ');
}
return [this._x, this._y, this.controls.left.x, this.controls.left.y,
this.controls.right.x, this.controls.right.y, this._command,
this._relative ? 1 : 0].join(', ');
}
};
Anchor.MakeObservable(Anchor.prototype);
var count = 0;
var Constants = {
/**
* @name Two.nextFrameID
* @property {Number}
* @description The id of the next requestAnimationFrame function.
*/
nextFrameID: null,
// Primitive
/**
* @name Two.Types
* @property {Object} - The different rendering types available in the library.
*/
Types: {
webgl: 'WebGLRenderer',
svg: 'SVGRenderer',
canvas: 'CanvasRenderer'
},
/**
* @name Two.Version
* @property {String} - The current working version of the library.
*/
Version: 'v0.7.6',
/**
* @name Two.PublishDate
* @property {String} - The automatically generated publish date in the build process to verify version release candidates.
*/
PublishDate: '2021-06-08T20:19:33.699Z',
/**
* @name Two.Identifier
* @property {String} - String prefix for all Two.js object's ids. This trickles down to SVG ids.
*/
Identifier: 'two-',
/**
* @name Two.Resolution
* @property {Number} - Default amount of vertices to be used for interpreting Arcs and ArcSegments.
*/
Resolution: 12,
/**
* @name Two.AutoCalculateImportedMatrices
* @property {Boolean} - When importing SVGs through the {@link two#interpret} and {@link two#load}, this boolean determines whether Two.js infers and then overrides the exact transformation matrix of the reference SVG.
* @nota-bene `false` copies the exact transformation matrix values, but also sets the path's `matrix.manual = true`.
*/
AutoCalculateImportedMatrices: true,
/**
* @name Two.Instances
* @property {Two[]} - Registered list of all Two.js instances in the current session.
*/
Instances: [],
/**
* @function Two.uniqueId
* @description Simple method to access an incrementing value. Used for `id` allocation on all Two.js objects.
* @returns {Number} Ever increasing Number.
*/
uniqueId: function() {
return count++;
}
};
var HALF_PI$3 = Math.PI / 2;
/**
* @name Two.Utils.Curve
* @property {Object} - Additional utility constant variables related to curve math and calculations.
*/
var Curve = {
CollinearityEpsilon: Math.pow(10, -30),
RecursionLimit: 16,
CuspLimit: 0,
Tolerance: {
distance: 0.25,
angle: 0,
epsilon: Number.EPSILON
},
// Lookup tables for abscissas and weights with values for n = 2 .. 16.
// As values are symmetric, only store half of them and adapt algorithm
// to factor in symmetry.
abscissas: [
[ 0.5773502691896257645091488],
[0,0.7745966692414833770358531],
[ 0.3399810435848562648026658,0.8611363115940525752239465],
[0,0.5384693101056830910363144,0.9061798459386639927976269],
[ 0.2386191860831969086305017,0.6612093864662645136613996,0.9324695142031520278123016],
[0,0.4058451513773971669066064,0.7415311855993944398638648,0.9491079123427585245261897],
[ 0.1834346424956498049394761,0.5255324099163289858177390,0.7966664774136267395915539,0.9602898564975362316835609],
[0,0.3242534234038089290385380,0.6133714327005903973087020,0.8360311073266357942994298,0.9681602395076260898355762],
[ 0.1488743389816312108848260,0.4333953941292471907992659,0.6794095682990244062343274,0.8650633666889845107320967,0.9739065285171717200779640],
[0,0.2695431559523449723315320,0.5190961292068118159257257,0.7301520055740493240934163,0.8870625997680952990751578,0.9782286581460569928039380],
[ 0.1252334085114689154724414,0.3678314989981801937526915,0.5873179542866174472967024,0.7699026741943046870368938,0.9041172563704748566784659,0.9815606342467192506905491],
[0,0.2304583159551347940655281,0.4484927510364468528779129,0.6423493394403402206439846,0.8015780907333099127942065,0.9175983992229779652065478,0.9841830547185881494728294],
[ 0.1080549487073436620662447,0.3191123689278897604356718,0.5152486363581540919652907,0.6872929048116854701480198,0.8272013150697649931897947,0.9284348836635735173363911,0.9862838086968123388415973],
[0,0.2011940939974345223006283,0.3941513470775633698972074,0.5709721726085388475372267,0.7244177313601700474161861,0.8482065834104272162006483,0.9372733924007059043077589,0.9879925180204854284895657],
[ 0.0950125098376374401853193,0.2816035507792589132304605,0.4580167776572273863424194,0.6178762444026437484466718,0.7554044083550030338951012,0.8656312023878317438804679,0.9445750230732325760779884,0.9894009349916499325961542]
],
weights: [
[1],
[0.8888888888888888888888889,0.5555555555555555555555556],
[0.6521451548625461426269361,0.3478548451374538573730639],
[0.5688888888888888888888889,0.4786286704993664680412915,0.2369268850561890875142640],
[0.4679139345726910473898703,0.3607615730481386075698335,0.1713244923791703450402961],
[0.4179591836734693877551020,0.3818300505051189449503698,0.2797053914892766679014678,0.1294849661688696932706114],
[0.3626837833783619829651504,0.3137066458778872873379622,0.2223810344533744705443560,0.1012285362903762591525314],
[0.3302393550012597631645251,0.3123470770400028400686304,0.2606106964029354623187429,0.1806481606948574040584720,0.0812743883615744119718922],
[0.2955242247147528701738930,0.2692667193099963550912269,0.2190863625159820439955349,0.1494513491505805931457763,0.0666713443086881375935688],
[0.2729250867779006307144835,0.2628045445102466621806889,0.2331937645919904799185237,0.1862902109277342514260976,0.1255803694649046246346943,0.0556685671161736664827537],
[0.2491470458134027850005624,0.2334925365383548087608499,0.2031674267230659217490645,0.1600783285433462263346525,0.1069393259953184309602547,0.0471753363865118271946160],
[0.2325515532308739101945895,0.2262831802628972384120902,0.2078160475368885023125232,0.1781459807619457382800467,0.1388735102197872384636018,0.0921214998377284479144218,0.0404840047653158795200216],
[0.2152638534631577901958764,0.2051984637212956039659241,0.1855383974779378137417166,0.1572031671581935345696019,0.1215185706879031846894148,0.0801580871597602098056333,0.0351194603317518630318329],
[0.2025782419255612728806202,0.1984314853271115764561183,0.1861610000155622110268006,0.1662692058169939335532009,0.1395706779261543144478048,0.1071592204671719350118695,0.0703660474881081247092674,0.0307532419961172683546284],
[0.1894506104550684962853967,0.1826034150449235888667637,0.1691565193950025381893121,0.1495959888165767320815017,0.1246289712555338720524763,0.0951585116824927848099251,0.0622535239386478928628438,0.0271524594117540948517806]
]
};
/**
* @name Two.Utils.getComponentOnCubicBezier
* @function
* @param {Number} t - Zero-to-one value describing what percentage to calculate.
* @param {Number} a - The firt point's component value.
* @param {Number} b - The first point's bezier component value.
* @param {Number} c - The second point's bezier component value.
* @param {Number} d - The second point's component value.
* @returns {Number} The coordinate value for a specific component along a cubic bezier curve by `t`.
*/
var getComponentOnCubicBezier = function(t, a, b, c, d) {
var k = 1 - t;
return (k * k * k * a) + (3 * k * k * t * b) + (3 * k * t * t * c) +
(t * t * t * d);
};
/**
* @name Two.Utils.subdivide
* @function
* @param {Number} x1 - x position of first anchor point.
* @param {Number} y1 - y position of first anchor point.
* @param {Number} x2 - x position of first anchor point's "right" bezier handle.
* @param {Number} y2 - y position of first anchor point's "right" bezier handle.
* @param {Number} x3 - x position of second anchor point's "left" bezier handle.
* @param {Number} y3 - y position of second anchor point's "left" bezier handle.
* @param {Number} x4 - x position of second anchor point.
* @param {Number} y4 - y position of second anchor point.
* @param {Number} [limit=Two.Utils.Curve.RecursionLimit] - The amount of vertices to create by subdividing.
* @returns {Anchor[]} A list of anchor points ordered in between `x1`, `y1` and `x4`, `y4`
* @description Given 2 points (a, b) and corresponding control point for each return an array of points that represent points plotted along the curve. The number of returned points is determined by `limit`.
*/
var subdivide = function(x1, y1, x2, y2, x3, y3, x4, y4, limit) {
limit = limit || Curve.RecursionLimit;
var amount = limit + 1;
// TODO: Abstract 0.001 to a limiting variable
// Don't recurse if the end points are identical
if (Math.abs(x1 - x4) < 0.001 && Math.abs(y1 - y4) < 0.001) {
return [new Anchor(x4, y4)];
}
var result = [];
for (var i = 0; i < amount; i++) {
var t = i / amount;
var x = getComponentOnCubicBezier(t, x1, x2, x3, x4);
var y = getComponentOnCubicBezier(t, y1, y2, y3, y4);
result.push(new Anchor(x, y));
}
return result;
};
/**
* @name Two.Utils.getCurveLength
* @function
* @param {Number} x1 - x position of first anchor point.
* @param {Number} y1 - y position of first anchor point.
* @param {Number} x2 - x position of first anchor point's "right" bezier handle.
* @param {Number} y2 - y position of first anchor point's "right" bezier handle.
* @param {Number} x3 - x position of second anchor point's "left" bezier handle.
* @param {Number} y3 - y position of second anchor point's "left" bezier handle.
* @param {Number} x4 - x position of second anchor point.
* @param {Number} y4 - y position of second anchor point.
* @param {Number} [limit=Two.Utils.Curve.RecursionLimit] - The amount of vertices to create by subdividing.
* @returns {Number} The length of a curve.
* @description Given 2 points (a, b) and corresponding control point for each, return a float that represents the length of the curve using Gauss-Legendre algorithm. Limit iterations of calculation by `limit`.
*/
var getCurveLength$1 = function(x1, y1, x2, y2, x3, y3, x4, y4, limit) {
// TODO: Better / fuzzier equality check
// Linear calculation
if (x1 === x2 && y1 === y2 && x3 === x4 && y3 === y4) {
var dx = x4 - x1;
var dy = y4 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
// Calculate the coefficients of a Bezier derivative.
var ax = 9 * (x2 - x3) + 3 * (x4 - x1),
bx = 6 * (x1 + x3) - 12 * x2,
cx = 3 * (x2 - x1),
ay = 9 * (y2 - y3) + 3 * (y4 - y1),
by = 6 * (y1 + y3) - 12 * y2,
cy = 3 * (y2 - y1);
var integrand = function(t) {
// Calculate quadratic equations of derivatives for x and y
var dx = (ax * t + bx) * t + cx,
dy = (ay * t + by) * t + cy;
return Math.sqrt(dx * dx + dy * dy);
};
return integrate(
integrand, 0, 1, limit || Curve.RecursionLimit
);
};
/**
* @name Two.Utils.getCurveBoundingBox
* @function
* @param {Number} x1 - x position of first anchor point.
* @param {Number} y1 - y position of first anchor point.
* @param {Number} x2 - x position of first anchor point's "right" bezier handle.
* @param {Number} y2 - y position of first anchor point's "right" bezier handle.
* @param {Number} x3 - x position of second anchor point's "left" bezier handle.
* @param {Number} y3 - y position of second anchor point's "left" bezier handle.
* @param {Number} x4 - x position of second anchor point.
* @param {Number} y4 - y position of second anchor point.
* @returns {Object} Object contains min and max `x` / `y` bounds.
* @see {@link https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js#L856}
*/
var getCurveBoundingBox = function(x1, y1, x2, y2, x3, y3, x4, y4) {
var tvalues = [];
var bounds = [[], []];
var a, b, c, t, t1, t2, b2ac, sqrtb2ac;
for (var i = 0; i < 2; ++i) {
if (i == 0) {
b = 6 * x1 - 12 * x2 + 6 * x3;
a = -3 * x1 + 9 * x2 - 9 * x3 + 3 * x4;
c = 3 * x2 - 3 * x1;
} else {
b = 6 * y1 - 12 * y2 + 6 * y3;
a = -3 * y1 + 9 * y2 - 9 * y3 + 3 * y4;
c = 3 * y2 - 3 * y1;
}
if (Math.abs(a) < 1e-12) {
if (Math.abs(b) < 1e-12) {
continue;
}
t = -c / b;
if (0 < t && t < 1) {
tvalues.push(t);
}
continue;
}
b2ac = b * b - 4 * c * a;
sqrtb2ac = Math.sqrt(b2ac);
if (b2ac < 0) {
continue;
}
t1 = (-b + sqrtb2ac) / (2 * a);
if (0 < t1 && t1 < 1) {
tvalues.push(t1);
}
t2 = (-b - sqrtb2ac) / (2 * a);
if (0 < t2 && t2 < 1) {
tvalues.push(t2);
}
}
var j = tvalues.length;
var jlen = j;
var mt;
while (j--) {
t = tvalues[j];
mt = 1 - t;
bounds[0][j] = mt * mt * mt * x1 + 3 * mt * mt * t * x2 + 3 * mt * t * t * x3 + t * t * t * x4;
bounds[1][j] = mt * mt * mt * y1 + 3 * mt * mt * t * y2 + 3 * mt * t * t * y3 + t * t * t * y4;
}
bounds[0][jlen] = x1;
bounds[1][jlen] = y1;
bounds[0][jlen + 1] = x4;
bounds[1][jlen + 1] = y4;
bounds[0].length = bounds[1].length = jlen + 2;
return {
min: { x: Math.min.apply(0, bounds[0]), y: Math.min.apply(0, bounds[1]) },
max: { x: Math.max.apply(0, bounds[0]), y: Math.max.apply(0, bounds[1]) }
};
};
/**
* @name Two.Utils.integrate
* @function
* @param {Function} f
* @param {Number} a
* @param {Number} b
* @param {Number} n
* @description Integration for `getCurveLength` calculations.
* @see [Paper.js](@link https://github.com/paperjs/paper.js/blob/master/src/util/Numerical.js#L101)
*/
var integrate = function(f, a, b, n) {
var x = Curve.abscissas[n - 2],
w = Curve.weights[n - 2],
A = 0.5 * (b - a),
B = A + a,
i = 0,
m = (n + 1) >> 1,
sum = n & 1 ? w[i++] * f(B) : 0; // Handle odd n
while (i < m) {
var Ax = A * x[i];
sum += w[i++] * (f(B + Ax) + f(B - Ax));
}
return A * sum;
};
/**
* @name Two.Utils.getCurveFromPoints
* @function
* @param {Anchor[]} points
* @param {Boolean} closed
* @description Sets the bezier handles on {@link Anchor}s in the `points` list with estimated values to create a catmull-rom like curve. Used by {@link Two.Path#plot}.
*/
var getCurveFromPoints = function(points, closed) {
var l = points.length, last = l - 1;
for (var i = 0; i < l; i++) {
var point = points[i];
if (!_.isObject(point.controls)) {
Anchor.AppendCurveProperties(point);
}
var prev = closed ? mod(i - 1, l) : Math.max(i - 1, 0);
var next = closed ? mod(i + 1, l) : Math.min(i + 1, last);
var a = points[prev];
var b = point;
var c = points[next];
getControlPoints(a, b, c);
b.command = i === 0 ? Commands.move : Commands.curve;
}
};
/**
* @name Two.Utils.getControlPoints
* @function
* @param {Anchor} a
* @param {Anchor} b
* @param {Anchor} c
* @returns {Anchor} Returns the passed middle point `b`.
* @description Given three coordinates set the control points for the middle, b, vertex based on its position with the adjacent points.
*/
var getControlPoints = function(a, b, c) {
var a1 = Vector.angleBetween(a, b);
var a2 = Vector.angleBetween(c, b);
var d1 = Vector.distanceBetween(a, b);
var d2 = Vector.distanceBetween(c, b);
var mid = (a1 + a2) / 2;
// TODO: Issue 73
if (d1 < 0.0001 || d2 < 0.0001) {
if (typeof b.relative === 'boolean' && !b.relative) {
b.controls.left.copy(b);
b.controls.right.copy(b);
}
return b;
}
d1 *= 0.33; // Why 0.33?
d2 *= 0.33;
if (a2 < a1) {
mid += HALF_PI$3;
} else {
mid -= HALF_PI$3;
}
b.controls.left.x = Math.cos(mid) * d1;
b.controls.left.y = Math.sin(mid) * d1;
mid -= Math.PI;
b.controls.right.x = Math.cos(mid) * d2;
b.controls.right.y = Math.sin(mid) * d2;
if (typeof b.relative === 'boolean' && !b.relative) {
b.controls.left.x += b.x;
b.controls.left.y += b.y;
b.controls.right.x += b.x;
b.controls.right.y += b.y;
}
return b;
};
/**
* @name Two.Utils.getReflection
* @function
* @param {Vector} a
* @param {Vector} b
* @param {Boolean} [relative=false]
* @returns {Vector} New {@link Vector} that represents the reflection point.
* @description Get the reflection of a point `b` about point `a`. Where `a` is in absolute space and `b` is relative to `a`.
* @see {@link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes}
*/
var getReflection = function(a, b, relative) {
return new Vector(
2 * a.x - (b.x + a.x) - (relative ? a.x : 0),
2 * a.y - (b.y + a.y) - (relative ? a.y : 0)
);
};
/**
* @name Two.Utils.getAnchorsFromArcData
* @function
* @param {Vector} center
* @param {Number} xAxisRotation
* @param {Number} rx - x radius
* @param {Number} ry - y radius
* @param {Number} ts
* @param {Number} td
* @param {Boolean} [ccw=false] - Set path traversal to counter-clockwise
*/
var getAnchorsFromArcData = function(center, xAxisRotation, rx, ry, ts, td, ccw) {
var resolution = Constants.Resolution;
for (var i = 0; i < resolution; i++) {
var pct = (i + 1) / resolution;
if (ccw) {
pct = 1 - pct;
}
var theta = pct * td + ts;
var x = rx * Math.cos(theta);
var y = ry * Math.sin(theta);
// x += center.x;
// y += center.y;
var anchor = new Anchor(x, y);
Anchor.AppendCurveProperties(anchor);
anchor.command = Commands.line;
}
};
var Curves = /*#__PURE__*/Object.freeze({
__proto__: null,
Curve: Curve,
getComponentOnCubicBezier: getComponentOnCubicBezier,
subdivide: subdivide,
getCurveLength: getCurveLength$1,
getCurveBoundingBox: getCurveBoundingBox,
integrate: integrate,
getCurveFromPoints: getCurveFromPoints,
getControlPoints: getControlPoints,
getReflection: getReflection,
getAnchorsFromArcData: getAnchorsFromArcData
});
var devicePixelRatio = root$1.devicePixelRatio || 1;
var getBackingStoreRatio = function(ctx) {
return ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
};
/**
* @name Two.Utils.getRatio
* @function
* @param {CanvasRenderingContext2D} ctx
* @returns {Number} The ratio of a unit in Two.js to the pixel density of a session's screen.
* @see [High DPI Rendering](http://www.html5rocks.com/en/tutorials/canvas/hidpi/)
*/
var getRatio = function(ctx) {
return devicePixelRatio / getBackingStoreRatio(ctx);
};
// Constants
var cos$5 = Math.cos, sin$5 = Math.sin, tan = Math.tan;
var array = [];
/**
* @name Two.Matrix
* @class
* @param {Number} [a=1] - The value for element at the first column and first row.
* @param {Number} [b=0] - The value for element at the second column and first row.
* @param {Number} [c=0] - The value for element at the third column and first row.
* @param {Number} [d=0] - The value for element at the first column and second row.
* @param {Number} [e=1] - The value for element at the second column and second row.
* @param {Number} [f=0] - The value for element at the third column and second row.
* @param {Number} [g=0] - The value for element at the first column and third row.
* @param {Number} [h=0] - The value for element at the second column and third row.
* @param {Number} [i=1] - The value for element at the third column and third row.
* @description A class to store 3 x 3 transformation matrix information. In addition to storing data `Two.Matrix` has suped up methods for commonplace mathematical operations.
* @nota-bene Order is based on how to construct transformation strings for the browser.
*/
function Matrix(a, b, c, d, e, f) {
/**
* @name Two.Matrix#elements
* @property {Number[]} - The underlying data stored as an array.
*/
this.elements = new NumArray(9);
var elements = a;
if (!Array.isArray(elements)) {
elements = Array.prototype.slice.call(arguments);
}
// initialize the elements with default values.
this.identity();
if (elements.length > 0) {
this.set(elements);
}
}
setMatrix(Matrix);
_.extend(Matrix, {
/**
* @name Two.Matrix.Identity
* @property {Number[]} - A stored reference to the default value of a 3 x 3 matrix.
*/
Identity: [
1, 0, 0,
0, 1, 0,
0, 0, 1
],
/**
* @name Two.Matrix.Multiply
* @function
* @param {Two.Matrix} A
* @param {Two.Matrix} B
* @param {Two.Matrix} [C] - An optional matrix to apply the multiplication to.
* @returns {Two.Matrix} - If an optional `C` matrix isn't passed then a new one is created and returned.
* @description Multiply two matrices together and return the result.
*/
Multiply: function(A, B, C) {
if (B.length <= 3) { // Multiply Vector
var x, y, z, e = A;
var a = B[0] || 0,
b = B[1] || 0,
c = B[2] || 0;
// Go down rows first
// a, d, g, b, e, h, c, f, i
x = e[0] * a + e[1] * b + e[2] * c;
y = e[3] * a + e[4] * b + e[5] * c;
z = e[6] * a + e[7] * b + e[8] * c;
return { x: x, y: y, z: z };
}
var A0 = A[0], A1 = A[1], A2 = A[2];
var A3 = A[3], A4 = A[4], A5 = A[5];
var A6 = A[6], A7 = A[7], A8 = A[8];
var B0 = B[0], B1 = B[1], B2 = B[2];
var B3 = B[3], B4 = B[4], B5 = B[5];
var B6 = B[6], B7 = B[7], B8 = B[8];
C = C || new NumArray(9);
C[0] = A0 * B0 + A1 * B3 + A2 * B6;
C[1] = A0 * B1 + A1 * B4 + A2 * B7;
C[2] = A0 * B2 + A1 * B5 + A2 * B8;
C[3] = A3 * B0 + A4 * B3 + A5 * B6;
C[4] = A3 * B1 + A4 * B4 + A5 * B7;
C[5] = A3 * B2 + A4 * B5 + A5 * B8;
C[6] = A6 * B0 + A7 * B3 + A8 * B6;
C[7] = A6 * B1 + A7 * B4 + A8 * B7;
C[8] = A6 * B2 + A7 * B5 + A8 * B8;
return C;
}
});
_.extend(Matrix.prototype, Events, {
constructor: Matrix,
/**
* @name Two.Matrix#manual
* @property {Boolean} - Determines whether Two.js automatically calculates the values for the matrix or if the developer intends to manage the matrix.
* @nota-bene - Setting to `true` nullifies {@link Two.Shape#translation}, {@link Two.Shape#rotation}, and {@link Two.Shape#scale}.
*/
manual: false,
/**
* @name Two.Matrix#set
* @function
* @param {Number} a - The value for element at the first column and first row.
* @param {Number} b - The value for element at the second column and first row.
* @param {Number} c - The value for element at the third column and first row.
* @param {Number} d - The value for element at the first column and second row.
* @param {Number} e - The value for element at the second column and second row.
* @param {Number} f - The value for element at the third column and second row.
* @param {Number} g - The value for element at the first column and third row.
* @param {Number} h - The value for element at the second column and third row.
* @param {Number} i - The value for element at the third column and third row.
* @description Set an array of values onto the matrix. Order described in {@link Two.Matrix}.
*/
/**
* @name Two.Matrix#set
* @function
* @param {Number[]} a - The array of elements to apply.
* @description Set an array of values onto the matrix. Order described in {@link Two.Matrix}.
*/
set: function(a, b, c, d, e, f, g, h, i) {
var elements;
if (typeof b === 'undefined') {
elements = a;
a = elements[0];
b = elements[1];
c = elements[2];
d = elements[3];
e = elements[4];
f = elements[5];
g = elements[6];
h = elements[7];
i = elements[8];
}
this.elements[0] = a;
this.elements[1] = b;
this.elements[2] = c;
this.elements[3] = d;
this.elements[4] = e;
this.elements[5] = f;
this.elements[6] = g;
this.elements[7] = h;
this.elements[8] = i;
return this.trigger(Events.Types.change);
},
/**
* @name Two.Matrix#copy
* @function
* @description Copy the matrix of one to the current instance.
*/
copy: function(m) {
this.elements[0] = m.elements[0];
this.elements[1] = m.elements[1];
this.elements[2] = m.elements[2];
this.elements[3] = m.elements[3];
this.elements[4] = m.elements[4];
this.elements[5] = m.elements[5];
this.elements[6] = m.elements[6];
this.elements[7] = m.elements[7];
this.elements[8] = m.elements[8];
this.manual = m.manual;
return this.trigger(Events.Types.change);
},
/**
* @name Two.Matrix#identity
* @function
* @description Turn matrix to the identity, like resetting.
*/
identity: function() {
this.elements[0] = Matrix.Identity[0];
this.elements[1] = Matrix.Identity[1];
this.elements[2] = Matrix.Identity[2];
this.elements[3] = Matrix.Identity[3];
this.elements[4] = Matrix.Identity[4];
this.elements[5] = Matrix.Identity[5];
this.elements[6] = Matrix.Identity[6];
this.elements[7] = Matrix.Identity[7];
this.elements[8] = Matrix.Identity[8];
return this.trigger(Events.Types.change);
},
/**
* @name Two.Matrix#multiply
* @function
* @param {Number} a - The scalar to be multiplied.
* @description Multiply all components of the matrix against a single scalar value.
* @overloaded
*/
/**
* @name Two.Matrix#multiply
* @function
* @param {Number} a - The x component to be multiplied.
* @param {Number} b - The y component to be multiplied.
* @param {Number} c - The z component to be multiplied.
* @description Multiply all components of a matrix against a 3 component vector.
* @overloaded
*/
/**
* @name Two.Matrix#multiply
* @function
* @param {Number} a - The value at the first column and first row of the matrix to be multiplied.
* @param {Number} b - The value at the second column and first row of the matrix to be multiplied.
* @param {Number} c - The value at the third column and first row of the matrix to be multiplied.
* @param {Number} d - The value at the first column and second row of the matrix to be multiplied.
* @param {Number} e - The value at the second column and second row of the matrix to be multiplied.
* @param {Number} f - The value at the third column and second row of the matrix to be multiplied.
* @param {Number} g - The value at the first column and third row of the matrix to be multiplied.
* @param {Number} h - The value at the second column and third row of the matrix to be multiplied.
* @param {Number} i - The value at the third column and third row of the matrix to be multiplied.
* @description Multiply all components of a matrix against another matrix.
* @overloaded
*/
multiply: function(a, b, c, d, e, f, g, h, i) {
// Multiply scalar
if (typeof b === 'undefined') {
this.elements[0] *= a;
this.elements[1] *= a;
this.elements[2] *= a;
this.elements[3] *= a;
this.elements[4] *= a;
this.elements[5] *= a;
this.elements[6] *= a;
this.elements[7] *= a;
this.elements[8] *= a;
return this.trigger(Events.Types.change);
}
if (typeof d === 'undefined') { // Multiply Vector
var x, y, z;
a = a || 0;
b = b || 0;
c = c || 0;
e = this.elements;
// Go down rows first
// a, d, g, b, e, h, c, f, i
x = e[0] * a + e[1] * b + e[2] * c;
y = e[3] * a + e[4] * b + e[5] * c;
z = e[6] * a + e[7] * b + e[8] * c;
return { x: x, y: y, z: z };
}
// Multiple matrix
var A = this.elements;
var B = [a, b, c, d, e, f, g, h, i];
var A0 = A[0], A1 = A[1], A2 = A[2];
var A3 = A[3], A4 = A[4], A5 = A[5];
var A6 = A[6], A7 = A[7], A8 = A[8];
var B0 = B[0], B1 = B[1], B2 = B[2];
var B3 = B[3], B4 = B[4], B5 = B[5];
var B6 = B[6], B7 = B[7], B8 = B[8];
this.elements[0] = A0 * B0 + A1 * B3 + A2 * B6;
this.elements[1] = A0 * B1 + A1 * B4 + A2 * B7;
this.elements[2] = A0 * B2 + A1 * B5 + A2 * B8;
this.elements[3] = A3 * B0 + A4 * B3 + A5 * B6;
this.elements[4] = A3 * B1 + A4 * B4 + A5 * B7;
this.elements[5] = A3 * B2 + A4 * B5 + A5 * B8;
this.elements[6] = A6 * B0 + A7 * B3 + A8 * B6;
this.elements[7] = A6 * B1 + A7 * B4 + A8 * B7;
this.elements[8] = A6 * B2 + A7 * B5 + A8 * B8;
return this.trigger(Events.Types.change);
},
/**
* @name Two.Matrix#inverse
* @function
* @param {Two.Matrix} [out] - The optional matrix to apply the inversion to.
* @description Return an inverted version of the matrix. If no optional one is passed a new matrix is created and returned.
*/
inverse: function(out) {
var a = this.elements;
out = out || new Matrix();
var a00 = a[0], a01 = a[1], a02 = a[2];
var a10 = a[3], a11 = a[4], a12 = a[5];
var a20 = a[6], a21 = a[7], a22 = a[8];
var b01 = a22 * a11 - a12 * a21;
var b11 = -a22 * a10 + a12 * a20;
var b21 = a21 * a10 - a11 * a20;
// Calculate the determinant
var det = a00 * b01 + a01 * b11 + a02 * b21;
if (!det) {
return null;
}
det = 1.0 / det;
out.elements[0] = b01 * det;
out.elements[1] = (-a22 * a01 + a02 * a21) * det;
out.elements[2] = (a12 * a01 - a02 * a11) * det;
out.elements[3] = b11 * det;
out.elements[4] = (a22 * a00 - a02 * a20) * det;
out.elements[5] = (-a12 * a00 + a02 * a10) * det;
out.elements[6] = b21 * det;
out.elements[7] = (-a21 * a00 + a01 * a20) * det;
out.elements[8] = (a11 * a00 - a01 * a10) * det;
return out;
},
/**
* @name Two.Matrix#scale
* @function
* @param {Number} scale - The one dimensional scale to apply to the matrix.
* @description Uniformly scale the transformation matrix.
*/
/**
* @name Two.Matrix#scale
* @function
* @param {Number} sx - The horizontal scale factor.
* @param {Number} sy - The vertical scale factor
* @description Scale the transformation matrix in two dimensions.
*/
scale: function(sx, sy) {
var l = arguments.length;
if (l <= 1) {
sy = sx;
}
return this.multiply(sx, 0, 0, 0, sy, 0, 0, 0, 1);
},
/**
* @name Two.Matrix#rotate
* @function
* @param {Number} Number - The amount to rotate in Number.
* @description Rotate the matrix.
*/
rotate: function(Number) {
var c = cos$5(Number);
var s = sin$5(Number);
return this.multiply(c, -s, 0, s, c, 0, 0, 0, 1);
},
/**
* @name Two.Matrix#translate
* @function
* @param {Number} x - The horizontal translation value to apply.
* @param {Number} y - The vertical translation value to apply.
* @description Translate the matrix.
*/
translate: function(x, y) {
return this.multiply(1, 0, x, 0, 1, y, 0, 0, 1);
},
/**
* @name Two.Matrix#skewX
* @function
* @param {Number} Number - The amount to skew in Number.
* @description Skew the matrix by an angle in the x axis direction.
*/
skewX: function(Number) {
var a = tan(Number);
return this.multiply(1, a, 0, 0, 1, 0, 0, 0, 1);
},
/**
* @name Two.Matrix#skewY
* @function
* @param {Number} Number - The amount to skew in Number.
* @description Skew the matrix by an angle in the y axis direction.
*/
skewY: function(Number) {
var a = tan(Number);
return this.multiply(1, 0, 0, a, 1, 0, 0, 0, 1);
},
/**
* @name Two.Matrix#toString
* @function
* @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 for 2D transformations.
* @returns {String} - The transformation matrix as a 6 component string separated by spaces.
* @description Create a transform string. Used for the Two.js rendering APIs.
*/
toString: function(fullMatrix) {
array.length = 0;
this.toTransformArray(fullMatrix, array);
return array.map(toFixed).join(' ');
},
/**
* @name Two.Matrix#toTransformArray
* @function
* @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 in the format for 2D transformations.
* @param {Number[]} [output] - An array empty or otherwise to apply the values to.
* @description Create a transform array. Used for the Two.js rendering APIs.
*/
toTransformArray: function(fullMatrix, output) {
var elements = this.elements;
var hasOutput = !!output;
var a = elements[0];
var b = elements[1];
var c = elements[2];
var d = elements[3];
var e = elements[4];
var f = elements[5];
if (fullMatrix) {
var g = elements[6];
var h = elements[7];
var i = elements[8];
if (hasOutput) {
output[0] = a;
output[1] = d;
output[2] = g;
output[3] = b;
output[4] = e;
output[5] = h;
output[6] = c;
output[7] = f;
output[8] = i;
return;
}
return [
a, d, g, b, e, h, c, f, i
];
}
if (hasOutput) {
output[0] = a;
output[1] = d;
output[2] = b;
output[3] = e;
output[4] = c;
output[5] = f;
return;
}
return [
a, d, b, e, c, f // Specific format see LN:19
];
},
/**
* @name Two.Matrix#toArray
* @function
* @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 for 2D transformations.
* @param {Number[]} [output] - An array empty or otherwise to apply the values to.
* @description Create a transform array. Used for the Two.js rendering APIs.
*/
toArray: function(fullMatrix, output) {
var elements = this.elements;
var hasOutput = !!output;
var a = elements[0];
var b = elements[1];
var c = elements[2];
var d = elements[3];
var e = elements[4];
var f = elements[5];
if (fullMatrix) {
var g = elements[6];
var h = elements[7];
var i = elements[8];
if (hasOutput) {
output[0] = a;
output[1] = b;
output[2] = c;
output[3] = d;
output[4] = e;
output[5] = f;
output[6] = g;
output[7] = h;
output[8] = i;
return;
}
return [
a, b, c, d, e, f, g, h, i
];
}
if (hasOutput) {
output[0] = a;
output[1] = b;
output[2] = c;
output[3] = d;
output[4] = e;
output[5] = f;
return;
}
return [
a, b, c, d, e, f
];
},
/**
* @name Two.Matrix#toObject
* @function
* @description Create a JSON compatible object that represents information of the matrix.
*/
toObject: function() {
return {
elements: this.toArray(true),
manual: !!this.manual
};
},
/**
* @name Two.Matrix#clone
* @function
* @description Clone the current matrix.
*/
clone: function() {
return new Matrix().copy(this);
}
});
/**
* @name Two.Shape
* @class
* @extends Two.Events
* @description The foundational transformation object for the Two.js scenegraph.
*/
function Shape() {
/**
* @name Two.Shape#renderer
* @property {Object}
* @description Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.
* @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape.renderer.elem`.
*/
this.renderer = {};
this._renderer.flagMatrix = Shape.FlagMatrix.bind(this);
this.isShape = true;
/**
* @name Two.Shape#id
* @property {String} - Session specific unique identifier.
* @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too.
*/
this.id = Constants.Identifier + Constants.uniqueId();
/**
* @name Two.Shape#classList
* @property {String[]}
* @description A list of class strings stored if imported / interpreted from an SVG element.
*/
this.classList = [];
/**
* @name Two.Shape#matrix
* @property {Two.Matrix}
* @description The transformation matrix of the shape.
* @nota-bene {@link Two.Shape#translation}, {@link Two.Shape#rotation}, {@link Two.Shape#scale}, {@link Two.Shape#skewX}, and {@link Two.Shape#skewY} apply their values to the matrix when changed. The matrix is what is sent to the renderer to be drawn.
*/
this.matrix = new Matrix();
/**
* @name Two.Shape#translation
* @property {Two.Vector} - The x and y value for where the shape is placed relative to its parent.
*/
this.translation = new Vector();
/**
* @name Two.Shape#rotation
* @property {Number} - The value in Number for how much the shape is rotated relative to its parent.
*/
this.rotation = 0;
/**
* @name Two.Shape#scale
* @property {Number} - The value for how much the shape is scaled relative to its parent.
* @nota-bene This value can be replaced with a {@link Two.Vector} to do non-uniform scaling. e.g: `shape.scale = new Two.Vector(2, 1);`
*/
this.scale = 1;
/**
* @name Two.Shape#skewX
* @property {Number} - The value in Number for how much the shape is skewed relative to its parent.
* @description Skew the shape by an angle in the x axis direction.
*/
this.skewX = 0;
/**
* @name Two.Shape#skewY
* @property {Number} - The value in Number for how much the shape is skewed relative to its parent.
* @description Skew the shape by an angle in the y axis direction.
*/
this.skewY = 0;
}
_.extend(Shape, {
/**
* @name Two.Shape.FlagMatrix
* @function
* @description Utility function used in conjunction with event handlers to update the flagMatrix of a shape.
*/
FlagMatrix: function() {
this._flagMatrix = true;
},
/**
* @name Two.Shape.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Shape} to any object. Handy if you'd like to extend the {@link Two.Shape} class on a custom class.
*/
MakeObservable: function(object) {
var translation = {
enumerable: false,
get: function() {
return this._translation;
},
set: function(v) {
if (this._translation) {
this._translation.unbind(Events.Types.change, this._renderer.flagMatrix);
}
this._translation = v;
this._translation.bind(Events.Types.change, this._renderer.flagMatrix);
Shape.FlagMatrix.call(this);
}
};
Object.defineProperty(object, 'translation', translation);
Object.defineProperty(object, 'position', translation);
Object.defineProperty(object, 'rotation', {
enumerable: true,
get: function() {
return this._rotation;
},
set: function(v) {
this._rotation = v;
this._flagMatrix = true;
}
});
Object.defineProperty(object, 'scale', {
enumerable: true,
get: function() {
return this._scale;
},
set: function(v) {
if (this._scale instanceof Vector) {
this._scale.unbind(Events.Types.change, this._renderer.flagMatrix);
}
this._scale = v;
if (this._scale instanceof Vector) {
this._scale.bind(Events.Types.change, this._renderer.flagMatrix);
}
this._flagMatrix = true;
this._flagScale = true;
}
});
Object.defineProperty(object, 'skewX', {
enumerable: true,
get: function() {
return this._skewX;
},
set: function(v) {
this._skewX = v;
this._flagMatrix = true;
}
});
Object.defineProperty(object, 'skewY', {
enumerable: true,
get: function() {
return this._skewY;
},
set: function(v) {
this._skewY = v;
this._flagMatrix = true;
}
});
Object.defineProperty(object, 'matrix', {
enumerable: true,
get: function() {
return this._matrix;
},
set: function(v) {
this._matrix = v;
this._flagMatrix = true;
}
});
Object.defineProperty(object, 'id', {
enumerable: true,
get: function() {
return this._id;
},
set: function(v) {
var id = this._id;
if (v === this._id) {
return;
}
this._id = v;
this._flagId = true;
if (this.parent) {
delete this.parent.children.ids[id];
this.parent.children.ids[this._id] = this;
}
}
});
Object.defineProperty(object, 'className', {
enumerable: true,
get: function() {
return this._className;
},
set: function(v) {
this._flagClassName = this._className !== v;
if (this._flagClassName) {
var prev = this._className.split(/\s+?/);
var dest = v.split(/\s+?/);
for (var i = 0; i < prev.length; i++) {
var className = prev[i];
var index = Array.prototype.indexOf.call(this.classList, className);
if (index >= 0) {
this.classList.splice(index, 1);
}
}
this.classList = this.classList.concat(dest);
}
this._className = v;
}
});
Object.defineProperty(object, 'renderer', {
enumerable: false,
get: function() {
return this._renderer;
},
set: function(obj) {
this._renderer = obj;
}
});
}
});
_.extend(Shape.prototype, Events, {
constructor: Shape,
// Flags
/**
* @name Two.Shape#_id
* @private
* @property {Boolean} - Determines whether the id needs updating.
*/
_flagId: true,
/**
* @name Two.Shape#_flagMatrix
* @private
* @property {Boolean} - Determines whether the matrix needs updating.
*/
_flagMatrix: true,
/**
* @name Two.Shape#_flagScale
* @private
* @property {Boolean} - Determines whether the scale needs updating.
*/
_flagScale: false,
// _flagMask: false,
// _flagClip: false,
/**
* @name Two.Shape#_flagClassName
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#className} need updating.
*/
_flagClassName: false,
// Underlying Properties
_id: '',
/**
* @name Two.Shape#_translation
* @private
* @property {Two.Vector} - The translation values as a {@link Two.Vector}.
*/
_translation: null,
/**
* @name Two.Shape#_rotation
* @private
* @property {Number} - The rotation value in Number.
*/
_rotation: 0,
/**
* @name Two.Shape#_translation
* @private
* @property {Two.Vector} - The translation values as a {@link Two.Vector}.
*/
_scale: 1,
/**
* @name Two.Shape#_skewX
* @private
* @property {Number} - The rotation value in Number.
*/
_skewX: 0,
/**
* @name Two.Shape#_skewY
* @private
* @property {Number} - The rotation value in Number.
*/
_skewY: 0,
/**
* @name Two.Shape#className
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
* @nota-bene Only available for the SVG renderer.
*/
_className: '',
/**
* @name Two.Shape#addTo
* @function
* @param {Two.Group} group - The parent the shape adds itself to.
* @description Convenience method to add itself to the scenegraph.
*/
addTo: function(group) {
group.add(this);
return this;
},
/**
* @name Two.Shape#clone
* @function
* @param {Two.Group} [parent] - Optional argument to automatically add the shape to a scenegraph.
* @returns {Two.Shape}
* @description Create a new {@link Two.Shape} with the same values as the current shape.
*/
clone: function(parent) {
var clone = new Shape();
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
if (parent) {
parent.add(clone);
}
return clone._update();
},
/**
* @name Two.Shape#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function(bubbles) {
if (!this._matrix.manual && this._flagMatrix) {
this._matrix
.identity()
.translate(this.translation.x, this.translation.y);
if (this._scale instanceof Vector) {
this._matrix.scale(this._scale.x, this._scale.y);
} else {
this._matrix.scale(this._scale);
}
this._matrix.rotate(this.rotation);
this._matrix.skewX(this.skewX);
this._matrix.skewY(this.skewY);
}
if (bubbles) {
if (this.parent && this.parent._update) {
this.parent._update();
}
}
return this;
},
/**
* @name Two.Shape#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagId = this._flagMatrix = this._flagScale =
this._flagClassName = false;
return this;
}
});
Shape.MakeObservable(Shape.prototype);
/**
* @name Two.Collection
* @class
* @extends Two.Events
* @description An `Array` like object with additional event propagation on actions. `pop`, `shift`, and `splice` trigger `removed` events. `push`, `unshift`, and `splice` with more than 2 arguments trigger 'inserted'. Finally, `sort` and `reverse` trigger `order` events.
*/
function Collection() {
Array.call(this);
if (arguments[0] && Array.isArray(arguments[0])) {
if (arguments[0].length > 0) {
Array.prototype.push.apply(this, arguments[0]);
}
} else if (arguments.length > 0) {
Array.prototype.push.apply(this, arguments);
}
}
Collection.prototype = new Array();
_.extend(Collection.prototype, Events, {
constructor: Collection,
pop: function() {
var popped = Array.prototype.pop.apply(this, arguments);
this.trigger(Events.Types.remove, [popped]);
return popped;
},
shift: function() {
var shifted = Array.prototype.shift.apply(this, arguments);
this.trigger(Events.Types.remove, [shifted]);
return shifted;
},
push: function() {
var pushed = Array.prototype.push.apply(this, arguments);
this.trigger(Events.Types.insert, arguments);
return pushed;
},
unshift: function() {
var unshifted = Array.prototype.unshift.apply(this, arguments);
this.trigger(Events.Types.insert, arguments);
return unshifted;
},
splice: function() {
var spliced = Array.prototype.splice.apply(this, arguments);
var inserted;
this.trigger(Events.Types.remove, spliced);
if (arguments.length > 2) {
inserted = this.slice(arguments[0], arguments[0] + arguments.length - 2);
this.trigger(Events.Types.insert, inserted);
this.trigger(Events.Types.order);
}
return spliced;
},
sort: function() {
Array.prototype.sort.apply(this, arguments);
this.trigger(Events.Types.order);
return this;
},
reverse: function() {
Array.prototype.reverse.apply(this, arguments);
this.trigger(Events.Types.order);
return this;
},
indexOf: function() {
return Array.prototype.indexOf.apply(this, arguments);
}
});
/**
* @class
* @name Two.Group.Children
* @extends Two.Collection
* @description A children collection which is accesible both by index and by object `id`.
*/
function Children(children) {
Collection.apply(this, arguments);
Object.defineProperty(this, '_events', {
value : {},
enumerable: false
});
/**
* @name Two.Group.Children#ids
* @property {Object} - Map of all elements in the list keyed by `id`s.
*/
this.ids = {};
this.attach(
Array.isArray(children) ? children : Array.prototype.slice.call(arguments)
);
this.on(Events.Types.insert, this.attach);
this.on(Events.Types.remove, this.detach);
}
Children.prototype = new Collection();
_.extend(Children.prototype, {
constructor: Children,
/**
* @function
* @name Two.Group.Children#attach
* @param {Two.Shape[]} children - The objects which extend {@link Two.Shape} to be added.
* @description Adds elements to the `ids` map.
*/
attach: function(children) {
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child && child.id) {
this.ids[child.id] = child;
}
}
return this;
},
/**
* @function
* @name Two.Group.Children#detach
* @param {Two.Shape[]} children - The objects which extend {@link Two.Shape} to be removed.
* @description Removes elements to the `ids` map.
*/
detach: function(children) {
for (var i = 0; i < children.length; i++) {
delete this.ids[children[i].id];
}
return this;
}
});
// Constants
var min$3 = Math.min, max$3 = Math.max;
/**
* @name Two.Group
* @class
* @extends Two.Shape
* @param {Two.Shape[]} [children] - A list of objects that inherit {@link Two.Shape}. For instance, the array could be a {@link Two.Path}, {@link Two.Text}, and {@link Two.RoundedRectangle}.
* @description This is the primary class for grouping objects that are then drawn in Two.js. In Illustrator this is a group, in After Effects it would be a Null Object. Whichever the case, the `Two.Group` contains a transformation matrix and commands to style its children, but it by itself doesn't render to the screen.
* @nota-bene The {@link Two#scene} is an instance of `Two.Group`.
*/
function Group(children) {
Shape.call(this, true);
this._renderer.type = 'group';
/**
* @name Two.Group#additions
* @property {Two.Shape[]}
* @description An automatically updated list of children that need to be appended to the renderer's scenegraph.
*/
this.additions = [];
/**
* @name Two.Group#subtractions
* @property {Two.Shape[]}
* @description An automatically updated list of children that need to be removed from the renderer's scenegraph.
*/
this.subtractions = [];
/**
* @name Two.Group#children
* @property {Two.Group.Children}
* @description A list of all the children in the scenegraph.
* @nota-bene Ther order of this list indicates the order each element is rendered to the screen.
*/
this.children = Array.isArray(children) ? children : Array.prototype.slice.call(arguments);
}
_.extend(Group, {
Children: Children,
/**
* @name Two.Group.InsertChildren
* @function
* @param {Two.Shape[]} children - The objects to be inserted.
* @description Cached method to let renderers know children have been added to a {@link Two.Group}.
*/
InsertChildren: function(children) {
for (var i = 0; i < children.length; i++) {
replaceParent.call(this, children[i], this);
}
},
/**
* @name Two.Group.RemoveChildren
* @function
* @param {Two.Shape[]} children - The objects to be removed.
* @description Cached method to let renderers know children have been removed from a {@link Two.Group}.
*/
RemoveChildren: function(children) {
for (var i = 0; i < children.length; i++) {
replaceParent.call(this, children[i]);
}
},
/**
* @name Two.Group.OrderChildren
* @function
* @description Cached method to let renderers know order has been updated on a {@link Two.Group}.
*/
OrderChildren: function(children) {
this._flagOrder = true;
},
/**
* @name Two.Group.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Group}.
*/
Properties: [
'fill',
'stroke',
'linewidth',
'cap',
'join',
'miter',
'closed',
'curved',
'automatic'
],
/**
* @name Two.Group.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Group} to any object. Handy if you'd like to extend the {@link Two.Group} class on a custom class.
*/
MakeObservable: function(object) {
var properties = Group.Properties;
Object.defineProperty(object, 'visible', {
enumerable: true,
get: function() {
return this._visible;
},
set: function(v) {
this._flagVisible = this._visible !== v || this._flagVisible;
this._visible = v;
}
});
Object.defineProperty(object, 'opacity', {
enumerable: true,
get: function() {
return this._opacity;
},
set: function(v) {
this._flagOpacity = this._opacity !== v || this._flagOpacity;
this._opacity = v;
}
});
Object.defineProperty(object, 'beginning', {
enumerable: true,
get: function() {
return this._beginning;
},
set: function(v) {
this._flagBeginning = this._beginning !== v || this._flagBeginning;
this._beginning = v;
}
});
Object.defineProperty(object, 'ending', {
enumerable: true,
get: function() {
return this._ending;
},
set: function(v) {
this._flagEnding = this._ending !== v || this._flagEnding;
this._ending = v;
}
});
Object.defineProperty(object, 'length', {
enumerable: true,
get: function() {
if (this._flagLength || this._length <= 0) {
this._length = 0;
if (!this.children) {
return this._length;
}
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
this._length += child.length;
}
}
return this._length;
}
});
Shape.MakeObservable(object);
Group.MakeGetterSetters(object, properties);
Object.defineProperty(object, 'children', {
enumerable: true,
get: function() {
return this._children;
},
set: function(children) {
var insertChildren = Group.InsertChildren.bind(this);
var removeChildren = Group.RemoveChildren.bind(this);
var orderChildren = Group.OrderChildren.bind(this);
if (this._children) {
this._children.unbind();
if (this._children.length > 0) {
removeChildren(this._children);
}
}
this._children = new Children(children);
this._children.bind(Events.Types.insert, insertChildren);
this._children.bind(Events.Types.remove, removeChildren);
this._children.bind(Events.Types.order, orderChildren);
if (children.length > 0) {
insertChildren(children);
}
}
});
Object.defineProperty(object, 'mask', {
enumerable: true,
get: function() {
return this._mask;
},
set: function(v) {
this._mask = v;
this._flagMask = true;
if (!v.clip) {
v.clip = true;
}
}
});
},
/**
* @name Two.Group.MakeGetterSetters
* @function
* @param {Two.Group} group - The group to apply getters and setters.
* @param {Object} properties - A key / value object containing properties to inherit.
* @description Convenience method to apply getter / setter logic on an array of properties. Used in {@link Two.Group.MakeObservable}.
*/
MakeGetterSetters: function(group, properties) {
if (!Array.isArray(properties)) {
properties = [properties];
}
_.each(properties, function(k) {
Group.MakeGetterSetter(group, k);
});
},
/**
* @name Two.Group.MakeGetterSetter
* @function
* @param {Two.Group} group - The group to apply getters and setters.
* @param {String} key - The key which will become a property on the group.
* @description Convenience method to apply getter / setter logic specific to how `Two.Group`s trickle down styles to their children. Used in {@link Two.Group.MakeObservable}.
*/
MakeGetterSetter: function(group, key) {
var secret = '_' + key;
Object.defineProperty(group, key, {
enumerable: true,
get: function() {
return this[secret];
},
set: function(v) {
this[secret] = v;
// Trickle down styles
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
child[key] = v;
}
}
});
}
});
_.extend(Group.prototype, Shape.prototype, {
constructor: Group,
// Flags
// http://en.wikipedia.org/wiki/Flag
/**
* @name Two.Group#_flagAdditions
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#additions} needs updating.
*/
_flagAdditions: false,
/**
* @name Two.Group#_flagSubtractions
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#subtractions} needs updating.
*/
_flagSubtractions: false,
/**
* @name Two.Group#_flagOrder
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#order} needs updating.
*/
_flagOrder: false,
/**
* @name Two.Group#_flagVisible
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#visible} needs updating.
*/
/**
* @name Two.Group#_flagOpacity
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#opacity} needs updating.
*/
_flagOpacity: true,
/**
* @name Two.Group#_flagBeginning
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#beginning} needs updating.
*/
_flagBeginning: false,
/**
* @name Two.Group#_flagEnding
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#ending} needs updating.
*/
_flagEnding: false,
/**
* @name Two.Group#_flagLength
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#length} needs updating.
*/
_flagLength: false,
/**
* @name Two.Group#_flagMask
* @private
* @property {Boolean} - Determines whether the {@link Two.Group#mask} needs updating.
*/
_flagMask: false,
// Underlying Properties
/**
* @name Two.Group#fill
* @property {(String|Two.Gradient|Two.Texture)} - The value of what all child shapes should be filled in with.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
*/
_fill: '#fff',
/**
* @name Two.Group#stroke
* @property {(String|Two.Gradient|Two.Texture)} - The value of what all child shapes should be outlined in with.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
*/
_stroke: '#000',
/**
* @name Two.Group#linewidth
* @property {Number} - The thickness in pixels of the stroke for all child shapes.
*/
_linewidth: 1.0,
/**
* @name Two.Group#opacity
* @property {Number} - The opaqueness of all child shapes.
* @nota-bene Becomes multiplied by the individual child's opacity property.
*/
_opacity: 1.0,
/**
* @name Two.Group#visible
* @property {Boolean} - Display the path or not.
* @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
*/
_visible: true,
/**
* @name Two.Group#cap
* @property {String}
* @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty}
*/
_cap: 'round',
/**
* @name Two.Group#join
* @property {String}
* @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty}
*/
_join: 'round',
/**
* @name Two.Group#miter
* @property {String}
* @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty}
*/
_miter: 4,
/**
* @name Two.Group#closed
* @property {Boolean} - Determines whether a final line is drawn between the final point in the `vertices` array and the first point of all child shapes.
*/
_closed: true,
/**
* @name Two.Group#curved
* @property {Boolean} - When the child's path is `automatic = true` this boolean determines whether the lines between the points are curved or not.
*/
_curved: false,
/**
* @name Two.Group#automatic
* @property {Boolean} - Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.
*/
_automatic: true,
/**
* @name Two.Group#beginning
* @property {Number} - Number between zero and one to state the beginning of where the path is rendered.
* @description {@link Two.Group#beginning} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
* @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#ending}.
*/
_beginning: 0,
/**
* @name Two.Group#ending
* @property {Number} - Number between zero and one to state the ending of where the path is rendered.
* @description {@link Two.Group#ending} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
* @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#beginning}.
*/
_ending: 1.0,
/**
* @name Two.Group#length
* @property {Number} - The sum of distances between all child lengths.
*/
_length: 0,
/**
* @name Two.Group#mask
* @property {Two.Shape} - The Two.js object to clip from a group's rendering.
*/
_mask: null,
/**
* @name Two.Group#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Group}
* @description Create a new instance of {@link Two.Group} with the same properties of the current group.
*/
clone: function(parent) {
// /**
// * TODO: Group has a gotcha in that it's at the moment required to be bound to
// * an instance of two in order to add elements correctly. This needs to
// * be rethought and fixed.
// */
var clone = new Group();
var children = this.children.map(function(child) {
return child.clone();
});
clone.add(children);
clone.opacity = this.opacity;
if (this.mask) {
clone.mask = this.mask;
}
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.className = this.className;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
if (parent) {
parent.add(clone);
}
return clone._update();
},
/**
* @name Two.Group#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the group.
*/
toObject: function() {
var result = {
children: [],
translation: this.translation.toObject(),
rotation: this.rotation,
scale: this.scale instanceof Vector ? this.scale.toObject() : this.scale,
opacity: this.opacity,
className: this.className,
mask: (this.mask ? this.mask.toObject() : null)
};
if (this.matrix.manual) {
result.matrix = this.matrix.toObject();
}
_.each(this.children, function(child, i) {
result.children[i] = child.toObject();
}, this);
return result;
},
/**
* @name Two.Group#corner
* @function
* @description Orient the children of the group to the upper left-hand corner of that group.
*/
corner: function() {
var rect = this.getBoundingClientRect(true);
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
child.translation.x -= rect.left;
child.translation.y -= rect.top;
}
return this;
},
/**
* @name Two.Group#center
* @function
* @description Orient the children of the group to the center of that group.
*/
center: function() {
var rect = this.getBoundingClientRect(true);
var cx = rect.left + rect.width / 2 - this.translation.x;
var cy = rect.top + rect.height / 2 - this.translation.y;
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
if (child.isShape) {
child.translation.x -= cx;
child.translation.y -= cy;
}
}
return this;
},
/**
* @name Two.Group#getById
* @function
* @description Recursively search for id. Returns the first element found.
* @returns {Two.Shape} - Or `null` if nothing is found.
*/
getById: function (id) {
var found = null;
function search(node) {
if (node.id === id) {
return node;
} else if (node.children) {
for (var i = 0; i < node.children.length; i++) {
found = search(node.children[i]);
if (found) {
return found;
}
}
}
return null;
}
return search(this);
},
/**
* @name Two.Group#getByClassName
* @function
* @description Recursively search for classes. Returns an array of matching elements.
* @returns {Two.Shape[]} - Or empty array if nothing is found.
*/
getByClassName: function(className) {
var found = [];
function search(node) {
if (Array.prototype.indexOf.call(node.classList, className) >= 0) {
found.push(node);
}
if (node.children) {
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
search(child);
}
}
return found;
}
return search(this);
},
/**
* @name Two.Group#getByType
* @function
* @description Recursively search for children of a specific type, e.g. {@link Two.Path}. Pass a reference to this type as the param. Returns an array of matching elements.
* @returns {Two.Shape[]} - Empty array if nothing is found.
*/
getByType: function(type) {
var found = [];
function search(node) {
if (node instanceof type) {
found.push(node);
}
if (node.children) {
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
search(child);
}
}
return found;
}
return search(this);
},
/**
* @name Two.Group#add
* @function
* @param {Two.Shape[]} objects - An array of objects to be added. Can be also be supplied as individual arguments.
* @description Add objects to the group.
*/
add: function(objects) {
// Allow to pass multiple objects either as array or as multiple arguments
// If it's an array also create copy of it in case we're getting passed
// a childrens array directly.
if (!(objects instanceof Array)) {
objects = Array.prototype.slice.call(arguments);
} else {
objects = objects.slice();
}
// Add the objects
for (var i = 0; i < objects.length; i++) {
var child = objects[i];
if (!(child && child.id)) {
continue;
}
var index = Array.prototype.indexOf.call(this.children, child);
if (index >= 0) {
this.children.splice(index, 1);
}
this.children.push(child);
}
return this;
},
/**
* @name Two.Group#add
* @function
* @param {Two.Shape[]} objects - An array of objects to be removed. Can be also removed as individual arguments.
* @description Remove objects from the group.
*/
remove: function(objects) {
var l = arguments.length,
grandparent = this.parent;
// Allow to call remove without arguments
// This will detach the object from its own parent.
if (l <= 0 && grandparent) {
grandparent.remove(this);
return this;
}
// Allow to pass multiple objects either as array or as multiple arguments
// If it's an array also create copy of it in case we're getting passed
// a childrens array directly.
if (!(objects instanceof Array)) {
objects = Array.prototype.slice.call(arguments);
} else {
objects = objects.slice();
}
// Remove the objects
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
if (!object || !this.children.ids[object.id]) {
continue;
}
var index = this.children.indexOf(object);
if (index >= 0) {
this.children.splice(index, 1);
}
}
return this;
},
/**
* @name Two.Group#getBoundingClientRect
* @function
* @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
* @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
* @description Return an object with top, left, right, bottom, width, and height parameters of the group.
*/
getBoundingClientRect: function(shallow) {
var rect, matrix, a, b, c, d, tc, lc, rc, bc;
// TODO: Update this to not __always__ update. Just when it needs to.
this._update(true);
// Variables need to be defined here, because of nested nature of groups.
var left = Infinity, right = -Infinity,
top = Infinity, bottom = -Infinity;
var regex = /texture|gradient/i;
matrix = shallow ? this._matrix : getComputedMatrix(this);
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
if (!child.visible || regex.test(child._renderer.type)) {
continue;
}
rect = child.getBoundingClientRect(shallow);
tc = typeof rect.top !== 'number' || _.isNaN(rect.top) || !isFinite(rect.top);
lc = typeof rect.left !== 'number' || _.isNaN(rect.left) || !isFinite(rect.left);
rc = typeof rect.right !== 'number' || _.isNaN(rect.right) || !isFinite(rect.right);
bc = typeof rect.bottom !== 'number' || _.isNaN(rect.bottom) || !isFinite(rect.bottom);
if (tc || lc || rc || bc) {
continue;
}
top = min$3(rect.top, top);
left = min$3(rect.left, left);
right = max$3(rect.right, right);
bottom = max$3(rect.bottom, bottom);
}
if (shallow) {
a = matrix.multiply(left, top, 1);
b = matrix.multiply(left, bottom, 1);
c = matrix.multiply(right, top, 1);
d = matrix.multiply(right, bottom, 1);
top = min$3(a.y, b.y, c.y, d.y);
left = min$3(a.x, b.x, c.x, d.x);
right = max$3(a.x, b.x, c.x, d.x);
bottom = max$3(a.y, b.y, c.y, d.y);
}
return {
top: top,
left: left,
right: right,
bottom: bottom,
width: right - left,
height: bottom - top
};
},
/**
* @name Two.Group#noFill
* @function
* @description Apply `noFill` method to all child shapes.
*/
noFill: function() {
this.children.forEach(function(child) {
child.noFill();
});
return this;
},
/**
* @name Two.Group#noStroke
* @function
* @description Apply `noStroke` method to all child shapes.
*/
noStroke: function() {
this.children.forEach(function(child) {
child.noStroke();
});
return this;
},
/**
* @name Two.Group#subdivide
* @function
* @description Apply `subdivide` method to all child shapes.
*/
subdivide: function() {
var args = arguments;
this.children.forEach(function(child) {
child.subdivide.apply(child, args);
});
return this;
},
/**
* @name Two.Group#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
var i, l, child;
if (this._flagBeginning || this._flagEnding) {
var beginning = Math.min(this._beginning, this._ending);
var ending = Math.max(this._beginning, this._ending);
var length = this.length;
var sum = 0;
var bd = beginning * length;
var ed = ending * length;
for (i = 0; i < this.children.length; i++) {
child = this.children[i];
l = child.length;
if (bd > sum + l) {
child.beginning = 1;
child.ending = 1;
} else if (ed < sum) {
child.beginning = 0;
child.ending = 0;
} else if (bd > sum && bd < sum + l) {
child.beginning = (bd - sum) / l;
child.ending = 1;
} else if (ed > sum && ed < sum + l) {
child.beginning = 0;
child.ending = (ed - sum) / l;
} else {
child.beginning = 0;
child.ending = 1;
}
sum += l;
}
}
return Shape.prototype._update.apply(this, arguments);
},
/**
* @name Two.Group#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
if (this._flagAdditions) {
this.additions.length = 0;
this._flagAdditions = false;
}
if (this._flagSubtractions) {
this.subtractions.length = 0;
this._flagSubtractions = false;
}
this._flagOrder = this._flagMask = this._flagOpacity =
this._flagBeginning = this._flagEnding = false;
Shape.prototype.flagReset.call(this);
return this;
}
});
Group.MakeObservable(Group.prototype);
// /**
// * Helper function used to sync parent-child relationship within the
// * `Two.Group.children` object.
// *
// * Set the parent of the passed object to another object
// * and updates parent-child relationships
// * Calling with one arguments will simply remove the parenting
// */
function replaceParent(child, newParent) {
var parent = child.parent;
var index;
if (parent === newParent) {
add();
return;
}
if (parent && parent.children.ids[child.id]) {
index = Array.prototype.indexOf.call(parent.children, child);
parent.children.splice(index, 1);
splice();
}
if (newParent) {
add();
return;
}
splice();
if (parent._flagAdditions && parent.additions.length === 0) {
parent._flagAdditions = false;
}
if (parent._flagSubtractions && parent.subtractions.length === 0) {
parent._flagSubtractions = false;
}
delete child.parent;
function add() {
if (newParent.subtractions.length > 0) {
index = Array.prototype.indexOf.call(newParent.subtractions, child);
if (index >= 0) {
newParent.subtractions.splice(index, 1);
}
}
if (newParent.additions.length > 0) {
index = Array.prototype.indexOf.call(newParent.additions, child);
if (index >= 0) {
newParent.additions.splice(index, 1);
}
}
child.parent = newParent;
newParent.additions.push(child);
newParent._flagAdditions = true;
}
function splice() {
index = Array.prototype.indexOf.call(parent.additions, child);
if (index >= 0) {
parent.additions.splice(index, 1);
}
index = Array.prototype.indexOf.call(parent.subtractions, child);
if (index < 0) {
parent.subtractions.push(child);
parent._flagSubtractions = true;
}
}
}
// Constants
var emptyArray = [];
var TWO_PI$5 = Math.PI * 2,
max$2 = Math.max,
min$2 = Math.min,
abs = Math.abs,
sin$4 = Math.sin,
cos$4 = Math.cos,
acos = Math.acos,
sqrt = Math.sqrt;
// Returns true if this is a non-transforming matrix
var isDefaultMatrix = function (m) {
return (m[0] == 1 && m[3] == 0 && m[1] == 0 && m[4] == 1 && m[2] == 0 && m[5] == 0);
};
var canvas = {
isHidden: /(undefined|none|transparent)/i,
alignments: {
left: 'start',
middle: 'center',
right: 'end'
},
shim: function(elem, name) {
elem.tagName = elem.nodeName = name || 'canvas';
elem.nodeType = 1;
elem.getAttribute = function(prop) {
return this[prop];
};
elem.setAttribute = function(prop, val) {
this[prop] = val;
return this;
};
return elem;
},
group: {
renderChild: function(child) {
canvas[child._renderer.type].render.call(child, this.ctx, true, this.clip);
},
render: function(ctx) {
if (!this._visible) {
return this;
}
this._update();
var matrix = this._matrix.elements;
var parent = this.parent;
this._renderer.opacity = this._opacity
* (parent && parent._renderer ? parent._renderer.opacity : 1);
var mask = this._mask;
// var clip = this._clip;
var defaultMatrix = isDefaultMatrix(matrix);
var shouldIsolate = !defaultMatrix || !!mask;
if (!this._renderer.context) {
this._renderer.context = {};
}
this._renderer.context.ctx = ctx;
// this._renderer.context.clip = clip;
if (shouldIsolate) {
ctx.save();
if (!defaultMatrix) {
ctx.transform(matrix[0], matrix[3], matrix[1],
matrix[4], matrix[2], matrix[5]);
}
}
if (mask) {
canvas[mask._renderer.type].render.call(mask, ctx, true);
}
if (this._opacity > 0 && this._scale !== 0) {
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
canvas[child._renderer.type].render.call(child, ctx);
}
}
if (shouldIsolate) {
ctx.restore();
}
// Commented two-way functionality of clips / masks with groups and
// polygons. Uncomment when this bug is fixed:
// https://code.google.com/p/chromium/issues/detail?id=370951
// if (clip) {
// ctx.clip();
// }
return this.flagReset();
}
},
path: {
render: function(ctx, forced, parentClipped) {
var matrix, stroke, linewidth, fill, opacity, visible, cap, join, miter,
closed, commands, length, last, next, prev, a, b, c, d, ux, uy, vx, vy,
ar, bl, br, cl, x, y, mask, clip, defaultMatrix, isOffset, dashes, po;
po = (this.parent && this.parent._renderer)
? this.parent._renderer.opacity : 1;
mask = this._mask;
clip = this._clip;
opacity = this._opacity * (po || 1);
visible = this._visible;
if (!forced && (!visible || clip || opacity === 0)) {
return this;
}
this._update();
matrix = this._matrix.elements;
stroke = this._stroke;
linewidth = this._linewidth;
fill = this._fill;
cap = this._cap;
join = this._join;
miter = this._miter;
closed = this._closed;
commands = this._renderer.vertices; // Commands
length = commands.length;
last = length - 1;
defaultMatrix = isDefaultMatrix(matrix);
dashes = this.dashes;
// Transform
if (!defaultMatrix) {
ctx.save();
ctx.transform(matrix[0], matrix[3], matrix[1], matrix[4], matrix[2], matrix[5]);
}
// Commented two-way functionality of clips / masks with groups and
// polygons. Uncomment when this bug is fixed:
// https://code.google.com/p/chromium/issues/detail?id=370951
if (mask) {
canvas[mask._renderer.type].render.call(mask, ctx, true);
}
// Styles
if (fill) {
if (typeof fill === 'string') {
ctx.fillStyle = fill;
} else {
canvas[fill._renderer.type].render.call(fill, ctx);
ctx.fillStyle = fill._renderer.effect;
}
}
if (stroke) {
if (typeof stroke === 'string') {
ctx.strokeStyle = stroke;
} else {
canvas[stroke._renderer.type].render.call(stroke, ctx);
ctx.strokeStyle = stroke._renderer.effect;
}
if (linewidth) {
ctx.lineWidth = linewidth;
}
if (miter) {
ctx.miterLimit = miter;
}
if (join) {
ctx.lineJoin = join;
}
if (!closed && cap) {
ctx.lineCap = cap;
}
}
if (typeof opacity === 'number') {
ctx.globalAlpha = opacity;
}
if (dashes && dashes.length > 0) {
ctx.lineDashOffset = dashes.offset || 0;
ctx.setLineDash(dashes);
}
ctx.beginPath();
for (var i = 0; i < commands.length; i++) {
b = commands[i];
x = b.x;
y = b.y;
switch (b.command) {
case Commands.close:
ctx.closePath();
break;
case Commands.arc:
var rx = b.rx;
var ry = b.ry;
var xAxisRotation = b.xAxisRotation;
var largeArcFlag = b.largeArcFlag;
var sweepFlag = b.sweepFlag;
prev = closed ? mod(i - 1, length) : max$2(i - 1, 0);
a = commands[prev];
var ax = a.x;
var ay = a.y;
canvas.renderSvgArcCommand(ctx, ax, ay, rx, ry, largeArcFlag, sweepFlag, xAxisRotation, x, y);
break;
case Commands.curve:
prev = closed ? mod(i - 1, length) : Math.max(i - 1, 0);
next = closed ? mod(i + 1, length) : Math.min(i + 1, last);
a = commands[prev];
c = commands[next];
ar = (a.controls && a.controls.right) || Vector.zero;
bl = (b.controls && b.controls.left) || Vector.zero;
if (a._relative) {
vx = (ar.x + a.x);
vy = (ar.y + a.y);
} else {
vx = ar.x;
vy = ar.y;
}
if (b._relative) {
ux = (bl.x + b.x);
uy = (bl.y + b.y);
} else {
ux = bl.x;
uy = bl.y;
}
ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
if (i >= last && closed) {
c = d;
br = (b.controls && b.controls.right) || Vector.zero;
cl = (c.controls && c.controls.left) || Vector.zero;
if (b._relative) {
vx = (br.x + b.x);
vy = (br.y + b.y);
} else {
vx = br.x;
vy = br.y;
}
if (c._relative) {
ux = (cl.x + c.x);
uy = (cl.y + c.y);
} else {
ux = cl.x;
uy = cl.y;
}
x = c.x;
y = c.y;
ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
}
break;
case Commands.line:
ctx.lineTo(x, y);
break;
case Commands.move:
d = b;
ctx.moveTo(x, y);
break;
}
}
// Loose ends
if (closed) {
ctx.closePath();
}
if (!clip && !parentClipped) {
if (!canvas.isHidden.test(fill)) {
isOffset = fill._renderer && fill._renderer.offset;
if (isOffset) {
ctx.save();
ctx.translate(
- fill._renderer.offset.x, - fill._renderer.offset.y);
ctx.scale(fill._renderer.scale.x, fill._renderer.scale.y);
}
ctx.fill();
if (isOffset) {
ctx.restore();
}
}
if (!canvas.isHidden.test(stroke)) {
isOffset = stroke._renderer && stroke._renderer.offset;
if (isOffset) {
ctx.save();
ctx.translate(
- stroke._renderer.offset.x, - stroke._renderer.offset.y);
ctx.scale(stroke._renderer.scale.x, stroke._renderer.scale.y);
ctx.lineWidth = linewidth / stroke._renderer.scale.x;
}
ctx.stroke();
if (isOffset) {
ctx.restore();
}
}
}
if (!defaultMatrix) {
ctx.restore();
}
if (clip && !parentClipped) {
ctx.clip();
}
if (dashes && dashes.length > 0) {
ctx.setLineDash(emptyArray);
}
return this.flagReset();
}
},
text: {
render: function(ctx, forced, parentClipped) {
var po = (this.parent && this.parent._renderer)
? this.parent._renderer.opacity : 1;
var opacity = this._opacity * po;
var visible = this._visible;
var mask = this._mask;
var clip = this._clip;
if (!forced && (!visible || clip || opacity === 0)) {
return this;
}
this._update();
var matrix = this._matrix.elements;
var stroke = this._stroke;
var linewidth = this._linewidth;
var fill = this._fill;
var decoration = this._decoration;
var defaultMatrix = isDefaultMatrix(matrix);
var isOffset = fill._renderer && fill._renderer.offset
&& stroke._renderer && stroke._renderer.offset;
var dashes = this.dashes;
var alignment = canvas.alignments[this._alignment] || this._alignment;
var baseline = this._baseline;
var a, b, c, d, e, sx, sy, x1, y1, x2, y2;
// Transform
if (!defaultMatrix) {
ctx.save();
ctx.transform(matrix[0], matrix[3], matrix[1], matrix[4], matrix[2], matrix[5]);
}
// Commented two-way functionality of clips / masks with groups and
// polygons. Uncomment when this bug is fixed:
// https://code.google.com/p/chromium/issues/detail?id=370951
if (mask) {
canvas[mask._renderer.type].render.call(mask, ctx, true);
}
if (!isOffset) {
ctx.font = [this._style, this._weight, this._size + 'px/' +
this._leading + 'px', this._family].join(' ');
}
ctx.textAlign = alignment;
ctx.textBaseline = baseline;
// Styles
if (fill) {
if (typeof fill === 'string') {
ctx.fillStyle = fill;
} else {
canvas[fill._renderer.type].render.call(fill, ctx);
ctx.fillStyle = fill._renderer.effect;
}
}
if (stroke) {
if (typeof stroke === 'string') {
ctx.strokeStyle = stroke;
} else {
canvas[stroke._renderer.type].render.call(stroke, ctx);
ctx.strokeStyle = stroke._renderer.effect;
}
if (linewidth) {
ctx.lineWidth = linewidth;
}
}
if (typeof opacity === 'number') {
ctx.globalAlpha = opacity;
}
if (dashes && dashes.length > 0) {
ctx.lineDashOffset = dashes.offset || 0;
ctx.setLineDash(dashes);
}
if (!clip && !parentClipped) {
if (!canvas.isHidden.test(fill)) {
if (fill._renderer && fill._renderer.offset) {
sx = fill._renderer.scale.x;
sy = fill._renderer.scale.y;
ctx.save();
ctx.translate( - fill._renderer.offset.x,
- fill._renderer.offset.y);
ctx.scale(sx, sy);
a = this._size / fill._renderer.scale.y;
b = this._leading / fill._renderer.scale.y;
ctx.font = [this._style, this._weight, a + 'px/',
b + 'px', this._family].join(' ');
c = fill._renderer.offset.x / fill._renderer.scale.x;
d = fill._renderer.offset.y / fill._renderer.scale.y;
ctx.fillText(this.value, c, d);
ctx.restore();
} else {
ctx.fillText(this.value, 0, 0);
}
}
if (!canvas.isHidden.test(stroke)) {
if (stroke._renderer && stroke._renderer.offset) {
sx = stroke._renderer.scale.x;
sy = stroke._renderer.scale.y;
ctx.save();
ctx.translate(- stroke._renderer.offset.x,
- stroke._renderer.offset.y);
ctx.scale(sx, sy);
a = this._size / stroke._renderer.scale.y;
b = this._leading / stroke._renderer.scale.y;
ctx.font = [this._style, this._weight, a + 'px/',
b + 'px', this._family].join(' ');
c = stroke._renderer.offset.x / stroke._renderer.scale.x;
d = stroke._renderer.offset.y / stroke._renderer.scale.y;
e = linewidth / stroke._renderer.scale.x;
ctx.lineWidth = e;
ctx.strokeText(this.value, c, d);
ctx.restore();
} else {
ctx.strokeText(this.value, 0, 0);
}
}
}
// Handle text-decoration
if (/(underline|strikethrough)/i.test(decoration)) {
var metrics = ctx.measureText(this.value);
var scalar = 1;
switch (decoration) {
case 'underline':
y1 = metrics.actualBoundingBoxAscent;
y2 = metrics.actualBoundingBoxAscent;
break;
case 'strikethrough':
y1 = 0;
y2 = 0;
scalar = 0.5;
break;
}
switch (baseline) {
case 'top':
y1 += this._size * scalar;
y2 += this._size * scalar;
break;
case 'baseline':
case 'bottom':
y1 -= this._size * scalar;
y2 -= this._size * scalar;
break;
}
switch (alignment) {
case 'left':
case 'start':
x1 = 0;
x2 = metrics.width;
break;
case 'right':
case 'end':
x1 = - metrics.width;
x2 = 0;
break;
default:
x1 = - metrics.width / 2;
x2 = metrics.width / 2;
}
ctx.lineWidth = Math.max(Math.floor(this._size / 15), 1);
ctx.strokeStyle = ctx.fillStyle;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
if (!defaultMatrix) {
ctx.restore();
}
// TODO: Test for text
if (clip && !parentClipped) {
ctx.clip();
}
if (dashes && dashes.length > 0) {
ctx.setLineDash(emptyArray);
}
return this.flagReset();
}
},
'linear-gradient': {
render: function(ctx) {
this._update();
if (!this._renderer.effect || this._flagEndPoints || this._flagStops) {
this._renderer.effect = ctx.createLinearGradient(
this.left._x, this.left._y,
this.right._x, this.right._y
);
for (var i = 0; i < this.stops.length; i++) {
var stop = this.stops[i];
this._renderer.effect.addColorStop(stop._offset, stop._color);
}
}
return this.flagReset();
}
},
'radial-gradient': {
render: function(ctx) {
this._update();
if (!this._renderer.effect || this._flagCenter || this._flagFocal
|| this._flagRadius || this._flagStops) {
this._renderer.effect = ctx.createRadialGradient(
this.center._x, this.center._y, 0,
this.focal._x, this.focal._y, this._radius
);
for (var i = 0; i < this.stops.length; i++) {
var stop = this.stops[i];
this._renderer.effect.addColorStop(stop._offset, stop._color);
}
}
return this.flagReset();
}
},
texture: {
render: function(ctx) {
this._update();
var image = this.image;
if (!this._renderer.effect || ((this._flagLoaded || this._flagImage || this._flagVideo || this._flagRepeat) && this.loaded)) {
this._renderer.effect = ctx.createPattern(this.image, this._repeat);
}
if (this._flagOffset || this._flagLoaded || this._flagScale) {
if (!(this._renderer.offset instanceof Vector)) {
this._renderer.offset = new Vector();
}
this._renderer.offset.x = - this._offset.x;
this._renderer.offset.y = - this._offset.y;
if (image) {
this._renderer.offset.x += image.width / 2;
this._renderer.offset.y += image.height / 2;
if (this._scale instanceof Vector) {
this._renderer.offset.x *= this._scale.x;
this._renderer.offset.y *= this._scale.y;
} else {
this._renderer.offset.x *= this._scale;
this._renderer.offset.y *= this._scale;
}
}
}
if (this._flagScale || this._flagLoaded) {
if (!(this._renderer.scale instanceof Vector)) {
this._renderer.scale = new Vector();
}
if (this._scale instanceof Vector) {
this._renderer.scale.copy(this._scale);
} else {
this._renderer.scale.set(this._scale, this._scale);
}
}
return this.flagReset();
}
},
renderSvgArcCommand: function(ctx, ax, ay, rx, ry, largeArcFlag, sweepFlag, xAxisRotation, x, y) {
xAxisRotation = xAxisRotation * Math.PI / 180;
// Ensure radii are positive
rx = abs(rx);
ry = abs(ry);
// Compute (x1′, y1′)
var dx2 = (ax - x) / 2.0;
var dy2 = (ay - y) / 2.0;
var x1p = cos$4(xAxisRotation) * dx2 + sin$4(xAxisRotation) * dy2;
var y1p = - sin$4(xAxisRotation) * dx2 + cos$4(xAxisRotation) * dy2;
// Compute (cx′, cy′)
var rxs = rx * rx;
var rys = ry * ry;
var x1ps = x1p * x1p;
var y1ps = y1p * y1p;
// Ensure radii are large enough
var cr = x1ps / rxs + y1ps / rys;
if (cr > 1) {
// scale up rx,ry equally so cr == 1
var s = sqrt(cr);
rx = s * rx;
ry = s * ry;
rxs = rx * rx;
rys = ry * ry;
}
var dq = (rxs * y1ps + rys * x1ps);
var pq = (rxs * rys - dq) / dq;
var q = sqrt(max$2(0, pq));
if (largeArcFlag === sweepFlag) q = - q;
var cxp = q * rx * y1p / ry;
var cyp = - q * ry * x1p / rx;
// Step 3: Compute (cx, cy) from (cx′, cy′)
var cx = cos$4(xAxisRotation) * cxp
- sin$4(xAxisRotation) * cyp + (ax + x) / 2;
var cy = sin$4(xAxisRotation) * cxp
+ cos$4(xAxisRotation) * cyp + (ay + y) / 2;
// Step 4: Compute θ1 and Δθ
var startAngle = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
var delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry,
(- x1p - cxp) / rx, (- y1p - cyp) / ry) % TWO_PI$5;
var endAngle = startAngle + delta;
var clockwise = sweepFlag === 0;
renderArcEstimate(ctx, cx, cy, rx, ry, startAngle, endAngle,
clockwise, xAxisRotation);
}
};
/**
* @name Two.CanvasRenderer
* @class
* @extends Two.Events
* @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}.
* @param {Element} [parameters.domElement] - The `` to draw to. If none given a new one will be constructed.
* @param {Boolean} [parameters.overdraw] - Determines whether the canvas should clear the background or not. Defaults to `true`.
* @param {Boolean} [parameters.smoothing=true] - Determines whether the canvas should antialias drawing. Set it to `false` when working with pixel art. `false` can lead to better performance, since it would use a cheaper interpolation algorithm.
* @description This class is used by {@link Two} when constructing with `type` of `Two.Types.canvas`. It takes Two.js' scenegraph and renders it to a ``.
*/
function Renderer$2(params) {
// It might not make a big difference on GPU backed canvases.
var smoothing = (params.smoothing !== false);
/**
* @name Two.CanvasRenderer#domElement
* @property {Element} - The `` associated with the Two.js scene.
*/
this.domElement = params.domElement || document.createElement('canvas');
/**
* @name Two.CanvasRenderer#ctx
* @property {Canvas2DContext} - Associated two dimensional context to render on the ``.
*/
this.ctx = this.domElement.getContext('2d');
/**
* @name Two.CanvasRenderer#overdraw
* @property {Boolean} - Determines whether the canvas clears the background each draw call.
* @default true
*/
this.overdraw = params.overdraw || false;
if (typeof this.ctx.imageSmoothingEnabled !== 'undefined') {
this.ctx.imageSmoothingEnabled = smoothing;
}
/**
* @name Two.CanvasRenderer#scene
* @property {Two.Group} - The root group of the scenegraph.
*/
this.scene = new Group();
this.scene.parent = this;
}
_.extend(Renderer$2, {
/**
* @name Two.CanvasRenderer.Utils
* @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a ``.
*/
Utils: canvas
});
_.extend(Renderer$2.prototype, Events, {
constructor: Renderer$2,
/**
* @name Two.CanvasRenderer#setSize
* @function
* @fires resize
* @param {Number} width - The new width of the renderer.
* @param {Number} height - The new height of the renderer.
* @param {Number} [ratio] - The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen.
* @description Change the size of the renderer.
*/
setSize: function(width, height, ratio) {
this.width = width;
this.height = height;
this.ratio = typeof ratio === 'undefined' ? getRatio(this.ctx) : ratio;
this.domElement.width = width * this.ratio;
this.domElement.height = height * this.ratio;
if (this.domElement.style) {
_.extend(this.domElement.style, {
width: width + 'px',
height: height + 'px'
});
}
return this.trigger(Events.Types.resize, width, height, ratio);
},
/**
* @name Two.CanvasRenderer#render
* @function
* @description Render the current scene to the ``.
*/
render: function() {
var isOne = this.ratio === 1;
if (!isOne) {
this.ctx.save();
this.ctx.scale(this.ratio, this.ratio);
}
if (!this.overdraw) {
this.ctx.clearRect(0, 0, this.width, this.height);
}
canvas.group.render.call(this.scene, this.ctx);
if (!isOne) {
this.ctx.restore();
}
return this;
}
});
function renderArcEstimate(ctx, ox, oy, rx, ry, startAngle, endAngle, clockwise, xAxisRotation) {
var epsilon = Curve.Tolerance.epsilon;
var deltaAngle = endAngle - startAngle;
var samePoints = Math.abs(deltaAngle) < epsilon;
// ensures that deltaAngle is 0 .. 2 PI
deltaAngle = mod(deltaAngle, TWO_PI$5);
if (deltaAngle < epsilon) {
if (samePoints) {
deltaAngle = 0;
} else {
deltaAngle = TWO_PI$5;
}
}
if (clockwise === true && ! samePoints) {
if (deltaAngle === TWO_PI$5) {
deltaAngle = - TWO_PI$5;
} else {
deltaAngle = deltaAngle - TWO_PI$5;
}
}
for (var i = 0; i < Constants.Resolution; i++) {
var t = i / (Constants.Resolution - 1);
var angle = startAngle + t * deltaAngle;
var x = ox + rx * Math.cos(angle);
var y = oy + ry * Math.sin(angle);
if (xAxisRotation !== 0) {
var cos = Math.cos(xAxisRotation);
var sin = Math.sin(xAxisRotation);
var tx = x - ox;
var ty = y - oy;
// Rotate the point about the center of the ellipse.
x = tx * cos - ty * sin + ox;
y = tx * sin + ty * cos + oy;
}
ctx.lineTo(x, y);
}
}
function svgAngle(ux, uy, vx, vy) {
var dot = ux * vx + uy * vy;
var len = sqrt(ux * ux + uy * uy) * sqrt(vx * vx + vy * vy);
// floating point precision, slightly over values appear
var ang = acos(max$2(-1, min$2(1, dot / len)));
if ((ux * vy - uy * vx) < 0) {
ang = - ang;
}
return ang;
}
var CanvasShim = {
Image: null,
isHeadless: false,
/**
* @name Two.Utils.shim
* @function
* @param {canvas} canvas - The instanced `Canvas` object provided by `node-canvas`.
* @param {Image} [Image] - The prototypical `Image` object provided by `node-canvas`. This is only necessary to pass if you're going to load bitmap imagery.
* @returns {canvas} Returns the instanced canvas object you passed from with additional attributes needed for Two.js.
* @description Convenience method for defining all the dependencies from the npm package `node-canvas`. See [node-canvas](https://github.com/Automattic/node-canvas) for additional information on setting up HTML5 `` drawing in a node.js environment.
*/
shim: function(canvas, Image) {
Renderer$2.Utils.shim(canvas);
if (typeof Image !== 'undefined') {
CanvasShim.Image = Image;
}
CanvasShim.isHeadless = true;
return canvas;
}
};
var dom = {
hasEventListeners: typeof root$1.addEventListener === 'function',
bind: function(elem, event, func, bool) {
if (this.hasEventListeners) {
elem.addEventListener(event, func, !!bool);
} else {
elem.attachEvent('on' + event, func);
}
return dom;
},
unbind: function(elem, event, func, bool) {
if (dom.hasEventListeners) {
elem.removeEventListeners(event, func, !!bool);
} else {
elem.detachEvent('on' + event, func);
}
return dom;
},
getRequestAnimationFrame: function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
var request = root$1.requestAnimationFrame, cancel;
if(!request) {
for (var i = 0; i < vendors.length; i++) {
request = root$1[vendors[i] + 'RequestAnimationFrame'] || request;
cancel = root$1[vendors[i] + 'CancelAnimationFrame']
|| root$1[vendors[i] + 'CancelRequestAnimationFrame'] || cancel;
}
request = request || function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = root$1.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
return request;
}
};
var temp = (root$1.document ? root$1.document.createElement('div') : {});
temp.id = 'help-two-load';
Object.defineProperty(dom, 'temp', {
enumerable: true,
get: function() {
if (_.isElement(temp) && !root$1.document.head.contains(temp)) {
_.extend(temp.style, {
display: 'none'
});
root$1.document.head.appendChild(temp);
}
return temp;
}
});
/**
* @name Two.Utils.Error
* @class
* @description Custom error throwing for Two.js specific identification.
*/
function TwoError(message) {
this.name = 'Two.js';
this.message = message;
}
TwoError.prototype = new Error();
_.extend(TwoError.prototype, {
constructor: TwoError
});
/**
* @name Two.Utils.defineGetterSetter
* @function
* @this Two#
* @param {String} property - The property to add an enumerable getter / setter to.
* @description Convenience function to setup the flag based getter / setter that most properties are defined as in Two.js.
*/
var defineGetterSetter = function(property) {
var object = this;
var secret = '_' + property;
var flag = '_flag' + property.charAt(0).toUpperCase() + property.slice(1);
Object.defineProperty(object, property, {
enumerable: true,
get: function() {
return this[secret];
},
set: function(v) {
this[secret] = v;
this[flag] = true;
}
});
};
/**
* @name Two.Registry
* @class
* @description An arbitrary class to manage a directory of things. Mainly used for keeping tabs of textures in Two.js.
*/
function Registry() {
this.map = {};
}
_.extend(Registry.prototype, {
constructor: Registry,
/**
* @name Two.Registry#add
* @function
* @param {String} id - A unique identifier.
* @param value - Any type of variable to be registered to the directory.
* @description Adds any value to the directory. Assigned by the `id`.
*/
add: function(id, obj) {
this.map[id] = obj;
return this;
},
/**
* @name Two.Registry#remove
* @function
* @param {String} id - A unique identifier.
* @description Remove any value from the directory by its `id`.
*/
remove: function(id) {
delete this.map[id];
return this;
},
/**
* @name Two.Registry#get
* @function
* @param {String} id - A unique identifier.
* @returns {?Object} The associated value. If unavailable then `undefined` is returned.
* @description Get a registered value by its `id`.
*/
get: function(id) {
return this.map[id];
},
/**
* @name Two.Registry#contains
* @function
* @param {String} id - A unique identifier.
* @returns {Boolean}
* @description Convenience method to see if a value is registered to an `id` already.
*/
contains: function(id) {
return id in this.map;
}
});
/**
* @name Two.Stop
* @class
* @param {Number} [offset] - The offset percentage of the stop represented as a zero-to-one value. Default value flip flops from zero-to-one as new stops are created.
* @param {String} [color] - The color of the stop. Default value flip flops from white to black as new stops are created.
* @param {Number} [opacity] - The opacity value. Default value is 1, cannot be lower than 0.
* @nota-bene Used specifically in conjunction with {@link Two.Gradient}s to control color graduation.
*/
function Stop(offset, color, opacity) {
/**
* @name Two.Stop#renderer
* @property {Object}
* @description Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.
* @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape.renderer.elem`.
*/
this.renderer = {};
this._renderer.type = 'stop';
/**
* @name Two.Stop#offset
* @property {Number} - The offset percentage of the stop represented as a zero-to-one value.
*/
this.offset = typeof offset === 'number' ? offset
: Stop.Index <= 0 ? 0 : 1;
/**
* @name Two.Stop#opacity
* @property {Number} - The alpha percentage of the stop represented as a zero-to-one value.
*/
this.opacity = typeof opacity === 'number' ? opacity : 1;
/**
* @name Two.Stop#color
* @property {String} - The color of the stop.
*/
this.color = (typeof color === 'string') ? color
: Stop.Index <= 0 ? '#fff' : '#000';
Stop.Index = (Stop.Index + 1) % 2;
}
_.extend(Stop, {
/**
* @name Two.Stop.Index
* @property {Number} - The current index being referenced for calculating a stop's default offset value.
*/
Index: 0,
/**
* @name Two.Stop.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Stop}.
*/
Properties: [
'offset',
'opacity',
'color'
],
/**
* @name Two.Stop.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Stop} to any object. Handy if you'd like to extend the {@link Two.Stop} class on a custom class.
*/
MakeObservable: function(object) {
_.each(Stop.Properties, function(property) {
var object = this;
var secret = '_' + property;
var flag = '_flag' + property.charAt(0).toUpperCase() + property.slice(1);
Object.defineProperty(object, property, {
enumerable: true,
get: function() {
return this[secret];
},
set: function(v) {
this[secret] = v;
this[flag] = true;
if (this.parent) {
this.parent._flagStops = true;
}
}
});
}, object);
Object.defineProperty(object, 'renderer', {
enumerable: false,
get: function() {
return this._renderer;
},
set: function(obj) {
this._renderer = obj;
}
});
}
});
_.extend(Stop.prototype, Events, {
constructor: Stop,
/**
* @name Two.Stop#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Stop}
* @description Create a new instance of {@link Two.Stop} with the same properties of the current path.
*/
clone: function() {
var clone = new Stop();
_.each(Stop.Properties, function(property) {
clone[property] = this[property];
}, this);
return clone;
},
/**
* @name Two.Stop#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var result = {};
_.each(Stop.Properties, function(k) {
result[k] = this[k];
}, this);
return result;
},
/**
* @name Two.Stop#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagOffset = this._flagColor = this._flagOpacity = false;
return this;
}
});
Stop.MakeObservable(Stop.prototype);
/**
* @name Two.Gradient
* @class
* @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
* @description This is the base class for constructing different types of gradients with Two.js. The two common gradients are {@link Two.LinearGradient} and {@link Two.RadialGradient}.
*/
function Gradient(stops) {
/**
* @name Two.Gradient#renderer
* @property {Object}
* @description Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.
* @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape.renderer.elem`.
*/
this.renderer = {};
this._renderer.type = 'gradient';
/**
* @name Two.Gradient#id
* @property {String} - Session specific unique identifier.
* @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too.
*/
this.id = Constants.Identifier + Constants.uniqueId();
this.classList = [];
this._renderer.flagStops = Gradient.FlagStops.bind(this);
this._renderer.bindStops = Gradient.BindStops.bind(this);
this._renderer.unbindStops = Gradient.UnbindStops.bind(this);
/**
* @name Two.Gradient#spread
* @property {String} - Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are `'pad'`, `'reflect'`, and `'repeat'`.
* @see {@link https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute} for more information
*/
this.spread = 'pad';
/**
* @name Two.Gradient#stops
* @property {Two.Stop[]} - An ordered list of {@link Two.Stop}s for rendering the gradient.
*/
if (stops) {
this.stops = stops;
}
}
_.extend(Gradient, {
/**
* @name Two.Gradient.Stop
* @see {@link Two.Stop}
*/
Stop: Stop,
/**
* @name Two.Gradient.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Gradient}.
*/
Properties: [
'spread'
],
/**
* @name Two.Gradient.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Gradient} to any object. Handy if you'd like to extend the {@link Two.Gradient} class on a custom class.
*/
MakeObservable: function(object) {
_.each(Gradient.Properties, defineGetterSetter, object);
Object.defineProperty(object, 'stops', {
enumerable: true,
get: function() {
return this._stops;
},
set: function(stops) {
var bindStops = this._renderer.bindStops;
var unbindStops = this._renderer.unbindStops;
// Remove previous listeners
if (this._stops) {
this._stops
.unbind(Events.Types.insert, bindStops)
.unbind(Events.Types.remove, unbindStops);
}
// Create new Collection with copy of Stops
this._stops = new Collection((stops || []).slice(0));
// Listen for Collection changes and bind / unbind
this._stops
.bind(Events.Types.insert, bindStops)
.bind(Events.Types.remove, unbindStops);
// Bind Initial Stops
bindStops(this._stops);
}
});
Object.defineProperty(object, 'renderer', {
enumerable: false,
get: function() {
return this._renderer;
},
set: function(obj) {
this._renderer = obj;
}
});
Object.defineProperty(object, 'id', {
enumerable: true,
get: function() {
return this._id;
},
set: function(v) {
this._id = v;
}
});
},
/**
* @name Two.Gradient.FlagStops
* @function
* @description Cached method to let renderers know stops have been updated on a {@link Two.Gradient}.
*/
FlagStops: function() {
this._flagStops = true;
},
/**
* @name Two.Gradient.BindVertices
* @function
* @description Cached method to let {@link Two.Gradient} know vertices have been added to the instance.
*/
BindStops: function(items) {
// This function is called a lot
// when importing a large SVG
var i = items.length;
while(i--) {
items[i].bind(Events.Types.change, this._renderer.flagStops);
items[i].parent = this;
}
this._renderer.flagStops();
},
/**
* @name Two.Gradient.UnbindStops
* @function
* @description Cached method to let {@link Two.Gradient} know vertices have been removed from the instance.
*/
UnbindStops: function(items) {
var i = items.length;
while(i--) {
items[i].unbind(Events.Types.change, this._renderer.flagStops);
delete items[i].parent;
}
this._renderer.flagStops();
}
});
_.extend(Gradient.prototype, Events, {
constructor: Gradient,
/**
* @name Two.Gradient#_flagId
* @private
* @property {Boolean} - Determines whether the {@link Two.Gradient#id} needs updating.
*/
_flagId: false,
/**
* @name Two.Gradient#_flagStops
* @private
* @property {Boolean} - Determines whether the {@link Two.Gradient#stops} needs updating.
*/
_flagStops: false,
/**
* @name Two.Gradient#_flagSpread
* @private
* @property {Boolean} - Determines whether the {@link Two.Gradient#spread} needs updating.
*/
_flagSpread: false,
_id: '',
/**
* @name Two.Gradient#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Gradient}
* @description Create a new instance of {@link Two.Gradient} with the same properties of the current path.
*/
clone: function(parent) {
var stops = this.stops.map(function(s) {
return s.clone();
});
var clone = new Gradient(stops);
_.each(Gradient.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Gradient#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var result = {
stops: this.stops.map(function(s) {
return s.toObject();
})
};
_.each(Gradient.Properties, function(k) {
result[k] = this[k];
}, this);
return result;
},
/**
* @name Two.Gradient#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagSpread || this._flagStops) {
this.trigger(Events.Types.change);
}
return this;
},
/**
* @name Two.Gradient#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagSpread = this._flagStops = false;
return this;
}
});
Gradient.MakeObservable(Gradient.prototype);
/**
* @name Two.LinearGradient
* @class
* @extends Two.Gradient
* @param {Number} [x1=0] - The x position of the first end point of the linear gradient.
* @param {Number} [y1=0] - The y position of the first end point of the linear gradient.
* @param {Number} [x2=0] - The x position of the second end point of the linear gradient.
* @param {Number} [y2=0] - The y position of the second end point of the linear gradient.
* @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
* @nota-bene The linear gradient lives within the space of the parent object's matrix space.
*/
function LinearGradient(x1, y1, x2, y2, stops) {
Gradient.call(this, stops);
this._renderer.type = 'linear-gradient';
var flagEndPoints = LinearGradient.FlagEndPoints.bind(this);
/**
* @name Two.LinearGradient#left
* @property {Two.Vector} - The x and y value for where the first end point is placed on the canvas.
*/
this.left = new Vector().bind(Events.Types.change, flagEndPoints);
/**
* @name Two.LinearGradient#right
* @property {Two.Vector} - The x and y value for where the second end point is placed on the canvas.
*/
this.right = new Vector().bind(Events.Types.change, flagEndPoints);
if (typeof x1 === 'number') {
this.left.x = x1;
}
if (typeof y1 === 'number') {
this.left.y = y1;
}
if (typeof x2 === 'number') {
this.right.x = x2;
}
if (typeof y2 === 'number') {
this.right.y = y2;
}
}
_.extend(LinearGradient, {
/**
* @name Two.LinearGradient.Stop
* @see {@link Two.Stop}
*/
Stop: Stop,
/**
* @name Two.LinearGradient.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.LinearGradient} to any object. Handy if you'd like to extend the {@link Two.LinearGradient} class on a custom class.
*/
MakeObservable: function(object) {
Gradient.MakeObservable(object);
},
/**
* @name Two.LinearGradient.FlagEndPoints
* @function
* @description Cached method to let renderers know end points have been updated on a {@link Two.LinearGradient}.
*/
FlagEndPoints: function() {
this._flagEndPoints = true;
}
});
_.extend(LinearGradient.prototype, Gradient.prototype, {
constructor: LinearGradient,
/**
* @name Two.LinearGradient#_flagEndPoints
* @private
* @property {Boolean} - Determines whether the {@link Two.LinearGradient#left} or {@link Two.LinearGradient#right} changed and needs to update.
*/
_flagEndPoints: false,
/**
* @name Two.LinearGradient#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Gradient}
* @description Create a new instance of {@link Two.LinearGradient} with the same properties of the current path.
*/
clone: function(parent) {
var stops = this.stops.map(function(stop) {
return stop.clone();
});
var clone = new LinearGradient(this.left._x, this.left._y,
this.right._x, this.right._y, stops);
_.each(Gradient.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.LinearGradient#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var result = Gradient.prototype.toObject.call(this);
result.left = this.left.toObject();
result.right = this.right.toObject();
return result;
},
/**
* @name Two.LinearGradient#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagEndPoints || this._flagSpread || this._flagStops) {
this.trigger(Events.Types.change);
}
return this;
},
/**
* @name Two.LinearGradient#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagEndPoints = false;
Gradient.prototype.flagReset.call(this);
return this;
}
});
LinearGradient.MakeObservable(LinearGradient.prototype);
/**
* @name Two.RadialGradient
* @class
* @extends Two.Gradient
* @param {Number} [x=0] - The x position of the origin of the radial gradient.
* @param {Number} [y=0] - The y position of the origin of the radial gradient.
* @param {Number} [radius=0] - The radius of the radial gradient.
* @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
* @param {Number} [focalX=0] - The x position of the focal point on the radial gradient.
* @param {Number} [focalY=0] - The y position of the focal point on the radial gradient.
* @nota-bene The radial gradient lives within the space of the parent object's matrix space.
*/
function RadialGradient(cx, cy, r, stops, fx, fy) {
Gradient.call(this, stops);
this._renderer.type = 'radial-gradient';
/**
* @name Two.RadialGradient#center
* @property {Two.Vector} - The x and y value for where the origin of the radial gradient is.
*/
this.center = new Vector()
.bind(Events.Types.change, (function() {
this._flagCenter = true;
}).bind(this));
this.radius = typeof r === 'number' ? r : 20;
/**
* @name Two.RadialGradient#focal
* @property {Two.Vector} - The x and y value for where the focal point of the radial gradient is.
* @nota-bene This effects the spray or spread of the radial gradient.
*/
this.focal = new Vector()
.bind(Events.Types.change, (function() {
this._flagFocal = true;
}).bind(this));
if (typeof cx === 'number') {
this.center.x = cx;
}
if (typeof cy === 'number') {
this.center.y = cy;
}
this.focal.copy(this.center);
if (typeof fx === 'number') {
this.focal.x = fx;
}
if (typeof fy === 'number') {
this.focal.y = fy;
}
}
_.extend(RadialGradient, {
/**
* @name Two.RadialGradient.Stop
* @see {@link Two.Stop}
*/
Stop: Stop,
/**
* @name Two.RadialGradient.Properties
* @property {String[]} - A list of properties that are on every {@link Two.RadialGradient}.
*/
Properties: [
'radius'
],
/**
* @name Two.RadialGradient.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.RadialGradient} to any object. Handy if you'd like to extend the {@link Two.RadialGradient} class on a custom class.
*/
MakeObservable: function(object) {
Gradient.MakeObservable(object);
_.each(RadialGradient.Properties, defineGetterSetter, object);
}
});
_.extend(RadialGradient.prototype, Gradient.prototype, {
constructor: RadialGradient,
/**
* @name Two.RadialGradient#_flagRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.RadialGradient#radius} changed and needs to update.
*/
_flagRadius: false,
/**
* @name Two.RadialGradient#_flagCenter
* @private
* @property {Boolean} - Determines whether the {@link Two.RadialGradient#center} changed and needs to update.
*/
_flagCenter: false,
/**
* @name Two.RadialGradient#_flagFocal
* @private
* @property {Boolean} - Determines whether the {@link Two.RadialGradient#focal} changed and needs to update.
*/
_flagFocal: false,
/**
* @name Two.RadialGradient#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Gradient}
* @description Create a new instance of {@link Two.RadialGradient} with the same properties of the current path.
*/
clone: function(parent) {
var stops = this.stops.map(function(stop) {
return stop.clone();
});
var clone = new RadialGradient(this.center._x, this.center._y,
this._radius, stops, this.focal._x, this.focal._y);
_.each(Gradient.Properties.concat(RadialGradient.Properties), function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.RadialGradient#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var result = Gradient.prototype.toObject.call(this);
_.each(RadialGradient.Properties, function(k) {
result[k] = this[k];
}, this);
result.center = this.center.toObject();
result.focal = this.focal.toObject();
return result;
},
/**
* @name Two.RadialGradient#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagRadius || this._flatCenter || this._flagFocal
|| this._flagSpread || this._flagStops) {
this.trigger(Events.Types.change);
}
return this;
},
/**
* @name Two.RadialGradient#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagRadius = this._flagCenter = this._flagFocal = false;
Gradient.prototype.flagReset.call(this);
return this;
}
});
RadialGradient.MakeObservable(RadialGradient.prototype);
var anchor;
var regex$1 = {
video: /\.(mp4|webm|ogg)$/i,
image: /\.(jpe?g|png|gif|tiff|webp)$/i,
effect: /texture|gradient/i
};
if (root$1.document) {
anchor = document.createElement('a');
}
/**
* @name Two.Texture
* @class
* @extends Two.Shape
* @param {String|HTMLImageElement} [src] - The URL path to an image file or an `` element.
* @param {Function} [callback] - An optional callback function once the image has been loaded.
* @description Fundamental to work with bitmap data, a.k.a. pregenerated imagery, in Two.js. Supported formats include jpg, png, gif, and tiff. See {@link Two.Texture.RegularExpressions} for a full list of supported formats.
*/
function Texture(src, callback) {
/**
* @name Two.Texture#renderer
* @property {Object}
* @description Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.
* @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape.renderer.elem`.
*/
this.renderer = {};
this._renderer.type = 'texture';
this._renderer.flagOffset = Texture.FlagOffset.bind(this);
this._renderer.flagScale = Texture.FlagScale.bind(this);
this.id = Constants.Identifier + Constants.uniqueId();
this.classList = [];
/**
* @name Two.Texture#loaded
* @property {Boolean} - Shorthand value to determine if image has been loaded into the texture.
*/
this.loaded = false;
/**
* @name Two.Texture#repeat
* @property {String} - CSS style declaration to tile {@link Two.Path}. Valid values include: `'no-repeat'`, `'repeat'`, `'repeat-x'`, `'repeat-y'`.
* @see {@link https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern}
*/
this.repeat = 'no-repeat';
/**
* @name Two.Texture#offset
* @property {Two.Vector} - A two-component vector describing any pixel offset of the texture when applied to a {@link Two.Path}.
*/
this.offset = new Vector();
if (typeof callback === 'function') {
var loaded = (function() {
this.unbind(Events.Types.load, loaded);
if (typeof callback === 'function') {
callback();
}
}).bind(this);
this.bind(Events.Types.load, loaded);
}
/**
* @name Two.Texture#src
* @property {String} - The URL path to the image data.
* @nota-bene This property is ultimately serialized in a {@link Two.Registry} to cache retrieval.
*/
if (typeof src === 'string') {
this.src = src;
} else if (typeof src === 'object') {
var elemString = Object.prototype.toString.call(src);
if (
elemString === '[object HTMLImageElement]' ||
elemString === '[object HTMLCanvasElement]' ||
elemString === '[object HTMLVideoElement]' ||
elemString === '[object Image]'
) {
/**
* @name Two.Texture#image
* @property {Element} - The corresponding DOM Element of the texture. Can be a ``, ``, or `` element. See {@link Two.Texture.RegularExpressions} for a full list of supported elements.
* @nota-bene In headless environments this is a `Canvas.Image` object. See {@link https://github.com/Automattic/node-canvas} for more information on headless image objects.
*/
this.image = src;
}
}
this._update();
}
_.extend(Texture, {
/**
* @name Two.Texture.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Texture}.
*/
Properties: [
'id',
'src',
'loaded',
'repeat'
],
/**
* @name Two.Texture.RegularExpressions
* @property {Object} - A map of compatible DOM Elements categorized by media format.
*/
RegularExpressions: regex$1,
/**
* @name Two.Texture.ImageRegistry
* @property {Two.Registry} - A canonical listing of image data used in a single session of Two.js.
* @nota-bene This object is used to cache image data between different textures.
*/
ImageRegistry: new Registry(),
/**
* @name Two.Texture.getAbsoluteURL
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}.
* @param {String} path
* @returns {String} - The serialized absolute path.
*/
getAbsoluteURL: function(path) {
if (!anchor) {
// TODO: Fix for headless environments
return path;
}
anchor.href = path;
return anchor.href;
},
/**
* @name Two.Texture.loadHeadlessBuffer
* @property {Function} - Loads an image as a buffer in headless environments.
* @param {Two.Texture} texture - The {@link Two.Texture} to be loaded.
* @param {Function} loaded - The callback function to be triggered once the image is loaded.
* @nota-bene - This function uses node's `fs.readFileSync` to spoof the `` loading process in the browser.
*/
loadHeadlessBuffer: function(texture, loaded) {
texture.image.onload = loaded;
texture.image.src = texture.src;
},
/**
* @name Two.Texture.getTag
* @property {Function} - Retrieves the tag name of an image, video, or canvas node.
* @param {HTMLImageElement} - The image to infer the tag name from.
* @returns {String} - Returns the tag name of an image, video, or canvas node.
*/
getTag: function(image) {
return (image && image.nodeName && image.nodeName.toLowerCase())
// Headless environments
|| 'img';
},
/**
* @name Two.Texture.getImage
* @property {Function} - Convenience function to set {@link Two.Texture#image} properties with canonincal versions set in {@link Two.Texture.ImageRegistry}.
* @param {String} src - The URL path of the image.
* @returns {HTMLImageElement} - Returns either a cached version of the image or a new one that is registered in {@link Two.Texture.ImageRegistry}.
*/
getImage: function(src) {
var absoluteSrc = Texture.getAbsoluteURL(src);
if (Texture.ImageRegistry.contains(absoluteSrc)) {
return Texture.ImageRegistry.get(absoluteSrc);
}
var image;
if (CanvasShim.Image) {
// TODO: Fix for headless environments
image = new CanvasShim.Image();
Renderer$2.Utils.shim(image, 'img');
} else if (root$1.document) {
if (regex$1.video.test(absoluteSrc)) {
image = document.createElement('video');
} else {
image = document.createElement('img');
}
} else {
console.warn('Two.js: no prototypical image defined for Two.Texture');
}
image.crossOrigin = 'anonymous';
return image;
},
/**
* @name Two.Register
* @interface
* @description A collection of functions to register different types of textures. Used internally by a {@link Two.Texture}.
*/
Register: {
canvas: function(texture, callback) {
texture._src = '#' + texture.id;
Texture.ImageRegistry.add(texture.src, texture.image);
if (typeof callback === 'function') {
callback();
}
},
img: function(texture, callback) {
var image = texture.image;
var loaded = function(e) {
if (!CanvasShim.isHeadless && image.removeEventListener && typeof image.removeEventListener === 'function') {
image.removeEventListener('load', loaded, false);
image.removeEventListener('error', error, false);
}
if (typeof callback === 'function') {
callback();
}
};
var error = function(e) {
if (!CanvasShim.isHeadless && typeof image.removeEventListener === 'function') {
image.removeEventListener('load', loaded, false);
image.removeEventListener('error', error, false);
}
throw new TwoError('unable to load ' + texture.src);
};
if (typeof image.width === 'number' && image.width > 0
&& typeof image.height === 'number' && image.height > 0) {
loaded();
} else if (!CanvasShim.isHeadless && typeof image.addEventListener === 'function') {
image.addEventListener('load', loaded, false);
image.addEventListener('error', error, false);
}
texture._src = Texture.getAbsoluteURL(texture._src);
if (!CanvasShim.isHeadless && image && image.getAttribute('two-src')) {
return;
}
if (!CanvasShim.isHeadless) {
image.setAttribute('two-src', texture.src);
}
Texture.ImageRegistry.add(texture.src, image);
if (CanvasShim.isHeadless) {
Texture.loadHeadlessBuffer(texture, loaded);
} else {
texture.image.src = texture.src;
}
},
video: function(texture, callback) {
if (CanvasShim.isHeadless) {
throw new TwoError('video textures are not implemented in headless environments.');
}
var loaded = function(e) {
texture.image.removeEventListener('canplaythrough', loaded, false);
texture.image.removeEventListener('error', error, false);
texture.image.width = texture.image.videoWidth;
texture.image.height = texture.image.videoHeight;
if (typeof callback === 'function') {
callback();
}
};
var error = function(e) {
texture.image.removeEventListener('canplaythrough', loaded, false);
texture.image.removeEventListener('error', error, false);
throw new TwoError('unable to load ' + texture.src);
};
texture._src = Texture.getAbsoluteURL(texture._src);
if (!texture.image.getAttribute('two-src')) {
texture.image.setAttribute('two-src', texture.src);
Texture.ImageRegistry.add(texture.src, texture.image);
}
if (texture.image.readyState >= 4) {
loaded();
} else {
texture.image.addEventListener('canplaythrough', loaded, false);
texture.image.addEventListener('error', error, false);
texture.image.src = texture.src;
texture.image.load();
}
}
},
/**
* @name Two.Texture.load
* @function
* @param {Two.Texture} texture - The texture to load.
* @param {Function} callback - The function to be called once the texture is loaded.
*/
load: function(texture, callback) {
var image = texture.image;
var tag = Texture.getTag(image);
if (texture._flagImage) {
if (/canvas/i.test(tag)) {
Texture.Register.canvas(texture, callback);
} else {
texture._src = (!CanvasShim.isHeadless && image.getAttribute('two-src')) || image.src;
Texture.Register[tag](texture, callback);
}
}
if (texture._flagSrc) {
if (!image) {
image = Texture.getImage(texture.src);
texture.image = image;
}
tag = Texture.getTag(image);
Texture.Register[tag](texture, callback);
}
},
/**
* @name Two.Texture.FlagOffset
* @function
* @description Cached method to let renderers know `offset` has been updated on a {@link Two.Texture}.
*/
FlagOffset: function() {
this._flagOffset = true;
},
/**
* @name Two.Texture.FlagScale
* @function
* @description Cached method to let renderers know `scale` has been updated on a {@link Two.Texture}.
*/
FlagScale: function() {
this._flagScale = true;
},
/**
* @name Two.Texture.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Texture} to any object. Handy if you'd like to extend or inherit the {@link Two.Texture} class on a custom class.
*/
MakeObservable: function(object) {
_.each(Texture.Properties, defineGetterSetter, object);
Object.defineProperty(object, 'image', {
enumerable: true,
get: function() {
return this._image;
},
set: function(image) {
var tag = Texture.getTag(image);
var index;
switch (tag) {
case 'canvas':
index = '#' + image.id;
break;
default:
index = image.src;
}
if (Texture.ImageRegistry.contains(index)) {
this._image = Texture.ImageRegistry.get(image.src);
} else {
this._image = image;
}
this._flagImage = true;
}
});
Object.defineProperty(object, 'offset', {
enumerable: true,
get: function() {
return this._offset;
},
set: function(v) {
if (this._offset) {
this._offset.unbind(Events.Types.change, this._renderer.flagOffset);
}
this._offset = v;
this._offset.bind(Events.Types.change, this._renderer.flagOffset);
this._flagOffset = true;
}
});
Object.defineProperty(object, 'scale', {
enumerable: true,
get: function() {
return this._scale;
},
set: function(v) {
if (this._scale instanceof Vector) {
this._scale.unbind(Events.Types.change, this._renderer.flagScale);
}
this._scale = v;
if (this._scale instanceof Vector) {
this._scale.bind(Events.Types.change, this._renderer.flagScale);
}
this._flagScale = true;
}
});
Object.defineProperty(object, 'renderer', {
enumerable: false,
get: function() {
return this._renderer;
},
set: function(obj) {
this._renderer = obj;
}
});
}
});
_.extend(Texture.prototype, Events, Shape.prototype, {
constructor: Texture,
/**
* @name Two.Texture#_flagId
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#id} needs updating.
*/
_flagId: false,
/**
* @name Two.Texture#_flagSrc
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#src} needs updating.
*/
_flagSrc: false,
/**
* @name Two.Texture#_flagImage
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#image} needs updating.
*/
_flagImage: false,
/**
* @name Two.Texture#_flagVideo
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#video} needs updating.
*/
_flagVideo: false,
/**
* @name Two.Texture#_flagLoaded
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#loaded} needs updating.
*/
_flagLoaded: false,
/**
* @name Two.Texture#_flagRepeat
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#repeat} needs updating.
*/
_flagRepeat: false,
/**
* @name Two.Texture#_flagOffset
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#offset} needs updating.
*/
_flagOffset: false,
/**
* @name Two.Texture#_flagScale
* @private
* @property {Boolean} - Determines whether the {@link Two.Texture#scale} needs updating.
*/
_flagScale: false,
/**
* @name Two.Texture#_id
* @private
* @see {@link Two.Texture#id}
*/
_id: '',
/**
* @name Two.Texture#_src
* @private
* @see {@link Two.Texture#src}
*/
_src: '',
/**
* @name Two.Texture#_image
* @private
* @see {@link Two.Texture#image}
*/
_image: null,
/**
* @name Two.Texture#_loaded
* @private
* @see {@link Two.Texture#loaded}
*/
_loaded: false,
/**
* @name Two.Texture#_repeat
* @private
* @see {@link Two.Texture#repeat}
*/
_repeat: 'no-repeat',
/**
* @name Two.Texture#_scale
* @private
* @see {@link Two.Texture#scale}
*/
_scale: 1,
/**
* @name Two.Texture#_offset
* @private
* @see {@link Two.Texture#offset}
*/
_offset: null,
/**
* @name Two.Texture#clone
* @function
* @returns {Two.Texture}
* @description Create a new instance of {@link Two.Texture} with the same properties of the current texture.
*/
clone: function() {
var clone = new Texture(this.src);
clone.repeat = this.repeat;
clone.offset.copy(this.origin);
clone.scale = this.scale;
return clone;
},
/**
* @name Two.Texture#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the texture.
*/
toObject: function() {
return {
src: this.src,
// image: this.image,
repeat: this.repeat,
origin: this.origin.toObject(),
scale: typeof this.scale === 'number' ? this.scale : this.scale.toObject()
};
},
/**
* @name Two.Texture#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagSrc || this._flagImage) {
this.trigger(Events.Types.change);
if (this._flagSrc || this._flagImage) {
this.loaded = false;
Texture.load(this, (function() {
this.loaded = true;
this
.trigger(Events.Types.change)
.trigger(Events.Types.load);
}).bind(this));
}
}
if (this._image && this._image.readyState >= 4) {
this._flagVideo = true;
}
return this;
},
/**
* @name Two.Texture#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagSrc = this._flagImage = this._flagLoaded
= this._flagVideo = this._flagScale = this._flagOffset = false;
return this;
}
});
Texture.MakeObservable(Texture.prototype);
// Constants
var min$1 = Math.min, max$1 = Math.max,
ceil = Math.ceil, floor = Math.floor;
/**
* @name Two.Path
* @class
* @extends Two.Shape
* @param {Two.Anchor[]} [vertices] - A list of {@link Two.Anchor}s that represent the order and coordinates to construct the rendered shape.
* @param {Boolean} [closed=false] - Describes whether the shape is closed or open.
* @param {Boolean} [curved=false] - Describes whether the shape automatically calculates bezier handles for each vertex.
* @param {Boolean} [manual=false] - Describes whether the developer controls how vertices are plotted or if Two.js automatically plots coordinates based on closed and curved booleans.
* @description This is the primary primitive class for creating all drawable shapes in Two.js. Unless specified methods return their instance of `Two.Path` for the purpose of chaining.
*/
function Path(vertices, closed, curved, manual) {
Shape.call(this);
this._renderer.type = 'path';
this._renderer.flagVertices = Path.FlagVertices.bind(this);
this._renderer.bindVertices = Path.BindVertices.bind(this);
this._renderer.unbindVertices = Path.UnbindVertices.bind(this);
this._renderer.flagFill = Path.FlagFill.bind(this);
this._renderer.flagStroke = Path.FlagStroke.bind(this);
this._renderer.vertices = [];
this._renderer.collection = [];
/**
* @name Two.Path#closed
* @property {Boolean} - Determines whether a final line is drawn between the final point in the `vertices` array and the first point.
*/
this._closed = !!closed;
/**
* @name Two.Path#curved
* @property {Boolean} - When the path is `automatic = true` this boolean determines whether the lines between the points are curved or not.
*/
this._curved = !!curved;
/**
* @name Two.Path#beginning
* @property {Number} - Number between zero and one to state the beginning of where the path is rendered.
* @description {@link Two.Path#beginning} is a percentage value that represents at what percentage into the path should the renderer start drawing.
* @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Path#ending}.
*/
this.beginning = 0;
/**
* @name Two.Path#ending
* @property {Number} - Number between zero and one to state the ending of where the path is rendered.
* @description {@link Two.Path#ending} is a percentage value that represents at what percentage into the path should the renderer start drawing.
* @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Path#beginning}.
*/
this.ending = 1;
// Style properties
/**
* @name Two.Path#fill
* @property {(String|Two.Gradient|Two.Texture)} - The value of what the path should be filled in with.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
*/
this.fill = '#fff';
/**
* @name Two.Path#stroke
* @property {(String|Two.Gradient|Two.Texture)} - The value of what the path should be outlined in with.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
*/
this.stroke = '#000';
/**
* @name Two.Path#linewidth
* @property {Number} - The thickness in pixels of the stroke.
*/
this.linewidth = 1.0;
/**
* @name Two.Path#opacity
* @property {Number} - The opaqueness of the path.
* @nota-bene Can be used in conjunction with CSS Colors that have an alpha value.
*/
this.opacity = 1.0;
/**
* @name Two.Path#className
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
* @nota-bene Only available for the SVG renderer.
*/
this.className = '';
/**
* @name Two.Path#visible
* @property {Boolean} - Display the path or not.
* @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
*/
this.visible = true;
/**
* @name Two.Path#cap
* @property {String}
* @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty}
*/
this.cap = 'butt'; // Default of Adobe Illustrator
/**
* @name Two.Path#join
* @property {String}
* @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty}
*/
this.join = 'miter'; // Default of Adobe Illustrator
/**
* @name Two.Path#miter
* @property {String}
* @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty}
*/
this.miter = 4; // Default of Adobe Illustrator
/**
* @name Two.Path#vertices
* @property {Two.Anchor[]} - An ordered list of anchor points for rendering the path.
* @description A list of {@link Two.Anchor} objects that consist of what form the path takes.
* @nota-bene The array when manipulating is actually a {@link Two.Collection}.
*/
this.vertices = vertices;
/**
* @name Two.Path#automatic
* @property {Boolean} - Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.
*/
this.automatic = !manual;
/**
* @name Two.Path#dashes
* @property {Number[]} - Array of numbers. Odd indices represent dash length. Even indices represent dash space.
* @description A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray} for more information on the SVG stroke-dasharray attribute.
*/
this.dashes = [];
/**
* @name Two.Path#dashes#offset
* @property {Number} - A number in pixels to offset {@link Two.Path#dashes} display.
*/
this.dashes.offset = 0;
}
_.extend(Path, {
/**
* @name Two.Path.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Path}.
*/
Properties: [
'fill',
'stroke',
'linewidth',
'opacity',
'visible',
'cap',
'join',
'miter',
'closed',
'curved',
'automatic',
'beginning',
'ending'
],
Utils: {
getCurveLength: getCurveLength
},
/**
* @name Two.Path.FlagVertices
* @function
* @description Cached method to let renderers know vertices have been updated on a {@link Two.Path}.
*/
FlagVertices: function() {
this._flagVertices = true;
this._flagLength = true;
if (this.parent) {
this.parent._flagLength = true;
}
},
/**
* @name Two.Path.BindVertices
* @function
* @description Cached method to let {@link Two.Path} know vertices have been added to the instance.
*/
BindVertices: function(items) {
// This function is called a lot
// when importing a large SVG
var i = items.length;
while (i--) {
items[i].bind(Events.Types.change, this._renderer.flagVertices);
}
this._renderer.flagVertices();
},
/**
* @name Two.Path.UnbindVertices
* @function
* @description Cached method to let {@link Two.Path} know vertices have been removed from the instance.
*/
UnbindVertices: function(items) {
var i = items.length;
while (i--) {
items[i].unbind(Events.Types.change, this._renderer.flagVertices);
}
this._renderer.flagVertices();
},
/**
* @name Two.Path.FlagFill
* @function
* @description Cached method to let {@link Two.Path} know the fill has changed.
*/
FlagFill: function() {
this._flagFill = true;
},
/**
* @name Two.Path.FlagFill
* @function
* @description Cached method to let {@link Two.Path} know the stroke has changed.
*/
FlagStroke: function() {
this._flagStroke = true;
},
/**
* @name Two.Path.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Path} to any object. Handy if you'd like to extend the {@link Two.Path} class on a custom class.
*/
MakeObservable: function(object) {
Shape.MakeObservable(object);
// Only the 7 defined properties are flagged like this. The subsequent
// properties behave differently and need to be hand written.
_.each(Path.Properties.slice(2, 8), defineGetterSetter, object);
Object.defineProperty(object, 'fill', {
enumerable: true,
get: function() {
return this._fill;
},
set: function(f) {
if (this._fill instanceof Gradient
|| this._fill instanceof LinearGradient
|| this._fill instanceof RadialGradient
|| this._fill instanceof Texture) {
this._fill.unbind(Events.Types.change, this._renderer.flagFill);
}
this._fill = f;
this._flagFill = true;
if (this._fill instanceof Gradient
|| this._fill instanceof LinearGradient
|| this._fill instanceof RadialGradient
|| this._fill instanceof Texture) {
this._fill.bind(Events.Types.change, this._renderer.flagFill);
}
}
});
Object.defineProperty(object, 'stroke', {
enumerable: true,
get: function() {
return this._stroke;
},
set: function(f) {
if (this._stroke instanceof Gradient
|| this._stroke instanceof LinearGradient
|| this._stroke instanceof RadialGradient
|| this._stroke instanceof Texture) {
this._stroke.unbind(Events.Types.change, this._renderer.flagStroke);
}
this._stroke = f;
this._flagStroke = true;
if (this._stroke instanceof Gradient
|| this._stroke instanceof LinearGradient
|| this._stroke instanceof RadialGradient
|| this._stroke instanceof Texture) {
this._stroke.bind(Events.Types.change, this._renderer.flagStroke);
}
}
});
/**
* @name Two.Path#length
* @property {Number} - The sum of distances between all {@link Two.Path#vertices}.
*/
Object.defineProperty(object, 'length', {
get: function() {
if (this._flagLength) {
this._updateLength();
}
return this._length;
}
});
Object.defineProperty(object, 'closed', {
enumerable: true,
get: function() {
return this._closed;
},
set: function(v) {
this._closed = !!v;
this._flagVertices = true;
}
});
Object.defineProperty(object, 'curved', {
enumerable: true,
get: function() {
return this._curved;
},
set: function(v) {
this._curved = !!v;
this._flagVertices = true;
}
});
Object.defineProperty(object, 'automatic', {
enumerable: true,
get: function() {
return this._automatic;
},
set: function(v) {
if (v === this._automatic) {
return;
}
this._automatic = !!v;
var method = this._automatic ? 'ignore' : 'listen';
_.each(this.vertices, function(v) {
v[method]();
});
}
});
Object.defineProperty(object, 'beginning', {
enumerable: true,
get: function() {
return this._beginning;
},
set: function(v) {
this._beginning = v;
this._flagVertices = true;
}
});
Object.defineProperty(object, 'ending', {
enumerable: true,
get: function() {
return this._ending;
},
set: function(v) {
this._ending = v;
this._flagVertices = true;
}
});
Object.defineProperty(object, 'vertices', {
enumerable: true,
get: function() {
return this._collection;
},
set: function(vertices) {
var bindVertices = this._renderer.bindVertices;
var unbindVertices = this._renderer.unbindVertices;
// Remove previous listeners
if (this._collection) {
this._collection
.unbind(Events.Types.insert, bindVertices)
.unbind(Events.Types.remove, unbindVertices);
}
// Create new Collection with copy of vertices
if (vertices instanceof Collection) {
this._collection = vertices;
} else {
this._collection = new Collection(vertices || []);
}
// Listen for Collection changes and bind / unbind
this._collection
.bind(Events.Types.insert, bindVertices)
.bind(Events.Types.remove, unbindVertices);
// Bind Initial Vertices
bindVertices(this._collection);
}
});
/**
* @name Two.Path#mask
* @property {Two.Shape} - The shape whose alpha property becomes a clipping area for the path.
* @nota-bene This property is currently not working becuase of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
*/
Object.defineProperty(object, 'mask', {
enumerable: true,
get: function() {
return this._mask;
},
set: function(v) {
this._mask = v;
this._flagMask = true;
if (!v.clip) {
v.clip = true;
}
}
});
/**
* @name Two.Path#clip
* @property {Boolean} - Tells Two.js renderer if this object represents a mask for another object (or not).
*/
Object.defineProperty(object, 'clip', {
enumerable: true,
get: function() {
return this._clip;
},
set: function(v) {
this._clip = v;
this._flagClip = true;
}
});
Object.defineProperty(object, 'dashes', {
enumerable: true,
get: function() {
return this._dashes;
},
set: function(v) {
if (typeof v.offset !== 'number') {
v.offset = this._dashes.offset || 0;
}
this._dashes = v;
}
});
}
});
_.extend(Path.prototype, Shape.prototype, {
constructor: Path,
// Flags
// http://en.wikipedia.org/wiki/Flag
/**
* @name Two.Path#_flagVertices
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#vertices} need updating.
*/
_flagVertices: true,
/**
* @name Two.Path#_flagLength
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#length} needs updating.
*/
_flagLength: true,
/**
* @name Two.Path#_flagFill
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#fill} needs updating.
*/
_flagFill: true,
/**
* @name Two.Path#_flagStroke
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#stroke} needs updating.
*/
_flagStroke: true,
/**
* @name Two.Path#_flagLinewidth
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#linewidth} needs updating.
*/
_flagLinewidth: true,
/**
* @name Two.Path#_flagOpacity
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#opacity} needs updating.
*/
_flagOpacity: true,
/**
* @name Two.Path#_flagVisible
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#visible} needs updating.
*/
_flagVisible: true,
/**
* @name Two.Path#_flagCap
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#cap} needs updating.
*/
_flagCap: true,
/**
* @name Two.Path#_flagJoin
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#join} needs updating.
*/
_flagJoin: true,
/**
* @name Two.Path#_flagMiter
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#miter} needs updating.
*/
_flagMiter: true,
/**
* @name Two.Path#_flagMask
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#mask} needs updating.
*/
_flagMask: false,
/**
* @name Two.Path#_flagClip
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#clip} needs updating.
*/
_flagClip: false,
// Underlying Properties
/**
* @name Two.Path#_length
* @private
* @see {@link Two.Path#length}
*/
_length: 0,
/**
* @name Two.Path#_fill
* @private
* @see {@link Two.Path#fill}
*/
_fill: '#fff',
/**
* @name Two.Path#_stroke
* @private
* @see {@link Two.Path#stroke}
*/
_stroke: '#000',
/**
* @name Two.Path#_linewidth
* @private
* @see {@link Two.Path#linewidth}
*/
_linewidth: 1.0,
/**
* @name Two.Path#_opacity
* @private
* @see {@link Two.Path#opacity}
*/
_opacity: 1.0,
/**
* @name Two.Path#_visible
* @private
* @see {@link Two.Path#visible}
*/
_visible: true,
/**
* @name Two.Path#_cap
* @private
* @see {@link Two.Path#cap}
*/
_cap: 'round',
/**
* @name Two.Path#_join
* @private
* @see {@link Two.Path#join}
*/
_join: 'round',
/**
* @name Two.Path#_miter
* @private
* @see {@link Two.Path#miter}
*/
_miter: 4,
/**
* @name Two.Path#_closed
* @private
* @see {@link Two.Path#closed}
*/
_closed: true,
/**
* @name Two.Path#_curved
* @private
* @see {@link Two.Path#curved}
*/
_curved: false,
/**
* @name Two.Path#_automatic
* @private
* @see {@link Two.Path#automatic}
*/
_automatic: true,
/**
* @name Two.Path#_beginning
* @private
* @see {@link Two.Path#beginning}
*/
_beginning: 0,
/**
* @name Two.Path#_ending
* @private
* @see {@link Two.Path#ending}
*/
_ending: 1.0,
/**
* @name Two.Path#_mask
* @private
* @see {@link Two.Path#mask}
*/
_mask: null,
/**
* @name Two.Path#_clip
* @private
* @see {@link Two.Path#clip}
*/
_clip: false,
/**
* @name Two.Path#_dashes
* @private
* @see {@link Two.Path#dashes}
*/
_dashes: [],
/**
* @name Two.Path#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Path}
* @description Create a new instance of {@link Two.Path} with the same properties of the current path.
*/
clone: function(parent) {
var clone = new Path();
for (var j = 0; j < this.vertices.length; j++) {
clone.vertices.push(this.vertices[j].clone());
}
for (var i = 0; i < Path.Properties.length; i++) {
var k = Path.Properties[i];
clone[k] = this[k];
}
clone.className = this.className;
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
if (parent) {
parent.add(clone);
}
return clone._update();
},
/**
* @name Two.Path#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var result = {
vertices: this.vertices.map(function(v) {
return v.toObject();
})
};
_.each(Path.Properties, function(k) {
result[k] = this[k];
}, this);
result.className = this.className;
result.translation = this.translation.toObject();
result.rotation = this.rotation;
result.scale = this.scale instanceof Vector ? this.scale.toObject() : this.scale;
result.skewX = this.skewX;
result.skewY = this.skewY;
if (this.matrix.manual) {
result.matrix = this.matrix.toObject();
}
return result;
},
/**
* @name Two.Path#noFill
* @function
* @description Short hand method to set fill to `transparent`.
*/
noFill: function() {
this.fill = 'transparent';
return this;
},
/**
* @name Two.Path#noStroke
* @function
* @description Short hand method to set stroke to `transparent`.
*/
noStroke: function() {
this.stroke = undefined;
return this;
},
/**
* @name Two.Path#corner
* @function
* @description Orient the vertices of the shape to the upper left-hand corner of the path.
*/
corner: function() {
var rect = this.getBoundingClientRect(true);
var hw = rect.width / 2;
var hh = rect.height / 2;
var cx = rect.left + rect.width / 2;
var cy = rect.top + rect.height / 2;
for (var i = 0; i < this.vertices.length; i++) {
var v = this.vertices[i];
v.x -= cx;
v.y -= cy;
v.x += hw;
v.y += hh;
}
return this;
},
/**
* @name Two.Path#center
* @function
* @description Orient the vertices of the shape to the center of the path.
*/
center: function() {
var rect = this.getBoundingClientRect(true);
var cx = rect.left + rect.width / 2 - this.translation.x;
var cy = rect.top + rect.height / 2 - this.translation.y;
for (var i = 0; i < this.vertices.length; i++) {
var v = this.vertices[i];
v.x -= cx;
v.y -= cy;
}
return this;
},
/**
* @name Two.Path#remove
* @function
* @description Remove self from the scene / parent.
*/
remove: function() {
if (!this.parent) {
return this;
}
this.parent.remove(this);
return this;
},
/**
* @name Two.Path#getBoundingClientRect
* @function
* @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
* @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
* @description Return an object with top, left, right, bottom, width, and height parameters of the path.
*/
getBoundingClientRect: function(shallow) {
var matrix, border, l, i, v0, v1, c0x, c0y, c1x, c1y, a, b, c, d;
var left = Infinity, right = -Infinity,
top = Infinity, bottom = -Infinity;
// TODO: Update this to not __always__ update. Just when it needs to.
this._update(true);
matrix = shallow ? this._matrix : getComputedMatrix(this);
border = (this.linewidth || 0) / 2;
l = this._renderer.vertices.length;
if (l <= 0) {
return {
width: 0,
height: 0
};
}
for (i = 0; i < l; i++) {
v1 = this._renderer.vertices[i];
// If i = 0, then this "wraps around" to the last vertex. Otherwise, it's the previous vertex.
// This is important for handling cyclic paths.
v0 = this._renderer.vertices[(i + l - 1) % l];
if (v0.controls && v1.controls) {
c0x = v0.controls.right.x;
c0y = v0.controls.right.y;
if (v0.relative) {
c0x += v0.x;
c0y += v0.y;
}
c1x = v1.controls.left.x;
c1y = v1.controls.left.y;
if (v1.relative) {
c1x += v1.x;
c1y += v1.y;
}
var bb = getCurveBoundingBox(v0.x, v0.y,
c0x, c0y, c1x, c1y, v1.x, v1.y);
top = min$1(bb.min.y - border, top);
left = min$1(bb.min.x - border, left);
right = max$1(bb.max.x + border, right);
bottom = max$1(bb.max.y + border, bottom);
} else {
if (i <= 1) {
top = min$1(v0.y - border, top);
left = min$1(v0.x - border, left);
right = max$1(v0.x + border, right);
bottom = max$1(v0.y + border, bottom);
}
top = min$1(v1.y - border, top);
left = min$1(v1.x - border, left);
right = max$1(v1.x + border, right);
bottom = max$1(v1.y + border, bottom);
}
}
a = matrix.multiply(left, top, 1);
b = matrix.multiply(left, bottom, 1);
c = matrix.multiply(right, top, 1);
d = matrix.multiply(right, bottom, 1);
top = min$1(a.y, b.y, c.y, d.y);
left = min$1(a.x, b.x, c.x, d.x);
right = max$1(a.x, b.x, c.x, d.x);
bottom = max$1(a.y, b.y, c.y, d.y);
return {
top: top,
left: left,
right: right,
bottom: bottom,
width: right - left,
height: bottom - top
};
},
/**
* @name Two.Path#getPointAt
* @function
* @param {Boolean} t - Percentage value describing where on the Two.Path to estimate and assign coordinate values.
* @param {Two.Vector} [obj=undefined] - Object to apply calculated x, y to. If none available returns new Object.
* @returns {Object}
* @description Given a float `t` from 0 to 1, return a point or assign a passed `obj`'s coordinates to that percentage on this Two.Path's curve.
*/
getPointAt: function(t, obj) {
var ia, ib, result;
var x, x1, x2, x3, x4, y, y1, y2, y3, y4, left, right;
var target = this.length * Math.min(Math.max(t, 0), 1);
var length = this.vertices.length;
var last = length - 1;
var a = null;
var b = null;
for (var i = 0, l = this._lengths.length, sum = 0; i < l; i++) {
if (sum + this._lengths[i] >= target) {
if (this._closed) {
ia = mod(i, length);
ib = mod(i - 1, length);
if (i === 0) {
ia = ib;
ib = i;
}
} else {
ia = i;
ib = Math.min(Math.max(i - 1, 0), last);
}
a = this.vertices[ia];
b = this.vertices[ib];
target -= sum;
if (this._lengths[i] !== 0) {
t = target / this._lengths[i];
} else {
t = 0;
}
break;
}
sum += this._lengths[i];
}
if (a === null || b === null) {
return null;
}
if (!a) {
return b;
} else if (!b) {
return a;
}
right = b.controls && b.controls.right;
left = a.controls && a.controls.left;
x1 = b.x;
y1 = b.y;
x2 = (right || b).x;
y2 = (right || b).y;
x3 = (left || a).x;
y3 = (left || a).y;
x4 = a.x;
y4 = a.y;
if (right && b.relative) {
x2 += b.x;
y2 += b.y;
}
if (left && a.relative) {
x3 += a.x;
y3 += a.y;
}
x = getComponentOnCubicBezier(t, x1, x2, x3, x4);
y = getComponentOnCubicBezier(t, y1, y2, y3, y4);
// Higher order points for control calculation.
var t1x = lerp(x1, x2, t);
var t1y = lerp(y1, y2, t);
var t2x = lerp(x2, x3, t);
var t2y = lerp(y2, y3, t);
var t3x = lerp(x3, x4, t);
var t3y = lerp(y3, y4, t);
// Calculate the returned points control points.
var brx = lerp(t1x, t2x, t);
var bry = lerp(t1y, t2y, t);
var alx = lerp(t2x, t3x, t);
var aly = lerp(t2y, t3y, t);
if (_.isObject(obj)) {
obj.x = x;
obj.y = y;
if (!_.isObject(obj.controls)) {
Anchor.AppendCurveProperties(obj);
}
obj.controls.left.x = brx;
obj.controls.left.y = bry;
obj.controls.right.x = alx;
obj.controls.right.y = aly;
if (!typeof obj.relative === 'boolean' || obj.relative) {
obj.controls.left.x -= x;
obj.controls.left.y -= y;
obj.controls.right.x -= x;
obj.controls.right.y -= y;
}
obj.t = t;
return obj;
}
result = new Anchor(
x, y, brx - x, bry - y, alx - x, aly - y,
this._curved ? Commands.curve : Commands.line
);
result.t = t;
return result;
},
/**
* @name Two.Path#plot
* @function
* @description Based on closed / curved and sorting of vertices plot where all points should be and where the respective handles should be too.
* @nota-bene While this method is public it is internally called by {@link Two.Path#_update} when `automatic = true`.
*/
plot: function() {
if (this.curved) {
getCurveFromPoints(this._collection, this.closed);
return this;
}
for (var i = 0; i < this._collection.length; i++) {
this._collection[i].command = i === 0 ? Commands.move : Commands.line;
}
return this;
},
/**
* @name Two.Path#subdivide
* @function
* @param {Number} limit - How many times to recurse subdivisions.
* @description Insert a {@link Two.Anchor} at the midpoint between every item in {@link Two.Path#vertices}.
*/
subdivide: function(limit) {
//TODO: DRYness (function below)
this._update();
var last = this.vertices.length - 1;
var b = this.vertices[last];
var closed = this._closed || this.vertices[last]._command === Commands.close;
var points = [];
_.each(this.vertices, function(a, i) {
if (i <= 0 && !closed) {
b = a;
return;
}
if (a.command === Commands.move) {
points.push(new Anchor(b.x, b.y));
if (i > 0) {
points[points.length - 1].command = Commands.line;
}
b = a;
return;
}
var verts = getSubdivisions(a, b, limit);
points = points.concat(verts);
// Assign commands to all the verts
_.each(verts, function(v, i) {
if (i <= 0 && b.command === Commands.move) {
v.command = Commands.move;
} else {
v.command = Commands.line;
}
});
if (i >= last) {
// TODO: Add check if the two vectors in question are the same values.
if (this._closed && this._automatic) {
b = a;
verts = getSubdivisions(a, b, limit);
points = points.concat(verts);
// Assign commands to all the verts
_.each(verts, function(v, i) {
if (i <= 0 && b.command === Commands.move) {
v.command = Commands.move;
} else {
v.command = Commands.line;
}
});
} else if (closed) {
points.push(new Anchor(a.x, a.y));
}
points[points.length - 1].command = closed
? Commands.close : Commands.line;
}
b = a;
}, this);
this._automatic = false;
this._curved = false;
this.vertices = points;
return this;
},
/**
* @name Two.Path#_updateLength
* @function
* @private
* @param {Number} [limit=] -
* @param {Boolean} [silent=false] - If set to `true` then the path isn't updated before calculation. Useful for internal use.
* @description Recalculate the {@link Two.Path#length} value.
*/
_updateLength: function(limit, silent) {
//TODO: DRYness (function above)
if (!silent) {
this._update();
}
var length = this.vertices.length;
var last = length - 1;
var b = this.vertices[last];
var closed = false;//this._closed || this.vertices[last]._command === Commands.close;
var sum = 0;
if (typeof this._lengths === 'undefined') {
this._lengths = [];
}
_.each(this.vertices, function(a, i) {
if ((i <= 0 && !closed) || a.command === Commands.move) {
b = a;
this._lengths[i] = 0;
return;
}
this._lengths[i] = getCurveLength(a, b, limit);
sum += this._lengths[i];
if (i >= last && closed) {
b = this.vertices[(i + 1) % length];
this._lengths[i + 1] = getCurveLength(a, b, limit);
sum += this._lengths[i + 1];
}
b = a;
}, this);
this._length = sum;
this._flagLength = false;
return this;
},
/**
* @name Two.Path#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices) {
if (this._automatic) {
this.plot();
}
if (this._flagLength) {
this._updateLength(undefined, true);
}
var l = this._collection.length;
var closed = this._closed;
var beginning = Math.min(this._beginning, this._ending);
var ending = Math.max(this._beginning, this._ending);
var bid = getIdByLength(this, beginning * this._length);
var eid = getIdByLength(this, ending * this._length);
var low = ceil(bid);
var high = floor(eid);
var left, right, prev, next, v;
this._renderer.vertices.length = 0;
for (var i = 0; i < l; i++) {
if (this._renderer.collection.length <= i) {
// Expected to be `relative` anchor points.
this._renderer.collection.push(new Anchor());
}
if (i > high && !right) {
v = this._renderer.collection[i];
v.copy(this._collection[i]);
this.getPointAt(ending, v);
v.command = this._renderer.collection[i].command;
this._renderer.vertices.push(v);
right = v;
prev = this._collection[i - 1];
// Project control over the percentage `t`
// of the in-between point
if (prev && prev.controls) {
v.controls.right.clear();
this._renderer.collection[i - 1].controls.right
.clear()
.lerp(prev.controls.right, v.t);
}
} else if (i >= low && i <= high) {
v = this._renderer.collection[i]
.copy(this._collection[i]);
this._renderer.vertices.push(v);
if (i === high && contains(this, ending)) {
right = v;
if (!closed && right.controls) {
right.controls.right.clear();
}
} else if (i === low && contains(this, beginning)) {
left = v;
left.command = Commands.move;
if (!closed && left.controls) {
left.controls.left.clear();
}
}
}
}
// Prepend the trimmed point if necessary.
if (low > 0 && !left) {
i = low - 1;
v = this._renderer.collection[i];
v.copy(this._collection[i]);
this.getPointAt(beginning, v);
v.command = Commands.move;
this._renderer.vertices.unshift(v);
left = v;
next = this._collection[i + 1];
// Project control over the percentage `t`
// of the in-between point
if (next && next.controls) {
v.controls.left.clear();
this._renderer.collection[i + 1].controls.left
.copy(next.controls.left)
.lerp(Vector.zero, v.t);
}
}
}
Shape.prototype._update.apply(this, arguments);
return this;
},
/**
* @name Two.Path#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagVertices = this._flagFill = this._flagStroke =
this._flagLinewidth = this._flagOpacity = this._flagVisible =
this._flagCap = this._flagJoin = this._flagMiter =
this._flagClip = false;
Shape.prototype.flagReset.call(this);
return this;
}
});
Path.MakeObservable(Path.prototype);
// Utility functions
function contains(path, t) {
if (t === 0 || t === 1) {
return true;
}
var length = path._length;
var target = length * t;
var elapsed = 0;
for (var i = 0; i < path._lengths.length; i++) {
var dist = path._lengths[i];
if (elapsed >= target) {
return target - elapsed >= 0;
}
elapsed += dist;
}
return false;
}
/**
* @private
* @param {Two.Path} path - The path to analyze against.
* @param {Number} target - The target length at which to find an anchor.
* @returns {Number}
* @description Return the id of an anchor based on a target length.
*/
function getIdByLength(path, target) {
var total = path._length;
if (target <= 0) {
return 0;
} else if (target >= total) {
return path._lengths.length - 1;
}
for (var i = 0, sum = 0; i < path._lengths.length; i++) {
if (sum + path._lengths[i] >= target) {
target -= sum;
return Math.max(i - 1, 0) + target / path._lengths[i];
}
sum += path._lengths[i];
}
return - 1;
}
function getCurveLength(a, b, limit) {
// TODO: DRYness
var x1, x2, x3, x4, y1, y2, y3, y4;
var right = b.controls && b.controls.right;
var left = a.controls && a.controls.left;
x1 = b.x;
y1 = b.y;
x2 = (right || b).x;
y2 = (right || b).y;
x3 = (left || a).x;
y3 = (left || a).y;
x4 = a.x;
y4 = a.y;
if (right && b._relative) {
x2 += b.x;
y2 += b.y;
}
if (left && a._relative) {
x3 += a.x;
y3 += a.y;
}
return getCurveLength$1(x1, y1, x2, y2, x3, y3, x4, y4, limit);
}
function getSubdivisions(a, b, limit) {
// TODO: DRYness
var x1, x2, x3, x4, y1, y2, y3, y4;
var right = b.controls && b.controls.right;
var left = a.controls && a.controls.left;
x1 = b.x;
y1 = b.y;
x2 = (right || b).x;
y2 = (right || b).y;
x3 = (left || a).x;
y3 = (left || a).y;
x4 = a.x;
y4 = a.y;
if (right && b._relative) {
x2 += b.x;
y2 += b.y;
}
if (left && a._relative) {
x3 += a.x;
y3 += a.y;
}
return subdivide(x1, y1, x2, y2, x3, y3, x4, y4, limit);
}
/**
* @name Two.Rectangle
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the rectangle.
* @param {Number} [y=0] - The y position of the rectangle.
* @param {Number} [width] - The width value of the rectangle.
* @param {Number} [height] - The width value of the rectangle.
*/
function Rectangle(x, y, width, height) {
Path.call(this, [
new Anchor(),
new Anchor(),
new Anchor(),
new Anchor()
// new Anchor() // TODO: Figure out how to handle this for `beginning` / `ending` animations
], true, false, true);
/**
* @name Two.Rectangle#width
* @property {Number} - The size of the width of the rectangle.
*/
this.width = width;
/**
* @name Two.Rectangle#height
* @property {Number} - The size of the height of the rectangle.
*/
this.height = height;
/**
* @name Two.Rectangle#origin
* @property {Number} - A two-component vector describing the origin offset to draw the rectangle. Default is `0, 0`.
*/
this.origin = new Vector();
this.translation.set(x, y);
this._update();
}
_.extend(Rectangle, {
/**
* @name Two.Rectangle.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Rectangle}.
*/
Properties: ['width', 'height'],
/**
* @name Two.Rectangle.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Rectangle} to any object. Handy if you'd like to extend the {@link Two.Rectangle} class on a custom class.
*/
MakeObservable: function(object) {
Path.MakeObservable(object);
_.each(Rectangle.Properties, defineGetterSetter, object);
Object.defineProperty(object, 'origin', {
enumerable: true,
get: function() {
return this._origin;
},
set: function(v) {
if (this._origin) {
this._origin.unbind(Events.Types.change, this._renderer.flagVertices);
}
this._origin = v;
this._origin.bind(Events.Types.change, this._renderer.flagVertices);
this._renderer.flagVertices();
}
});
}
});
_.extend(Rectangle.prototype, Path.prototype, {
constructor: Rectangle,
/**
* @name Two.Rectangle#_flagWidth
* @private
* @property {Boolean} - Determines whether the {@link Two.Rectangle#width} needs updating.
*/
_flagWidth: 0,
/**
* @name Two.Rectangle#_flagHeight
* @private
* @property {Boolean} - Determines whether the {@link Two.Rectangle#height} needs updating.
*/
_flagHeight: 0,
/**
* @name Two.Rectangle#_width
* @private
* @see {@link Two.Rectangle#width}
*/
_width: 0,
/**
* @name Two.Rectangle#_height
* @private
* @see {@link Two.Rectangle#height}
*/
_height: 0,
_origin: null,
/**
* @name Two.Rectangle#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagWidth || this._flagHeight) {
var xr = this._width / 2;
var yr = this._height / 2;
if (!this._closed && this.vertices.length === 4) {
this.vertices.push(new Anchor());
}
this.vertices[0].set(-xr, -yr).add(this._origin).command = Commands.move;
this.vertices[1].set(xr, -yr).add(this._origin).command = Commands.line;
this.vertices[2].set(xr, yr).add(this._origin).command = Commands.line;
this.vertices[3].set(-xr, yr).add(this._origin).command = Commands.line;
// FYI: Two.Sprite and Two.ImageSequence have 4 verts
if (this.vertices[4]) {
this.vertices[4].set(-xr, -yr).add(this._origin).command = Commands.line;
}
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.Rectangle#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagWidth = this._flagHeight = false;
Path.prototype.flagReset.call(this);
return this;
},
/**
* @name Two.Rectangle#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Rectangle}
* @description Create a new instance of {@link Two.Rectangle} with the same properties of the current path.
*/
clone: function(parent) {
var clone = new Rectangle(0, 0, this.width, this.height);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Rectangle#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
object.width = this.width;
object.height = this.height;
object.origin = this.origin.toObject();
return object;
}
});
Rectangle.MakeObservable(Rectangle.prototype);
/**
* @name Two.Sprite
* @class
* @extends Two.Rectangle
* @param {String|Two.Texture} [path] - The URL path or {@link Two.Texture} to be used as the bitmap data displayed on the sprite.
* @param {Number} [ox=0] - The initial `x` position of the Two.Sprite.
* @param {Number} [oy=0] - The initial `y` position of the Two.Sprite.
* @param {Number} [cols=1] - The number of columns the sprite contains.
* @param {Number} [rows=1] - The number of rows the sprite contains.
* @param {Number} [frameRate=0] - The frame rate at which the partitions of the image should playback at.
* @description A convenient package to display still or animated images through a tiled image source. For more information on the principals of animated imagery through tiling see [Texture Atlas](https://en.wikipedia.org/wiki/Texture_atlas) on Wikipedia.
*/
function Sprite(path, ox, oy, cols, rows, frameRate) {
// Not using default constructor of Rectangle due to odd `beginning` / `ending` behavior.
// See: https://github.com/jonobr1/two.js/issues/383
Path.call(this, [
new Anchor(),
new Anchor(),
new Anchor(),
new Anchor()
], true);
this.noStroke();
this.noFill();
/**
* @name Two.Sprite#texture
* @property {Two.Texture} - The texture to be used as bitmap data to display image in the scene.
*/
if (path instanceof Texture) {
this.texture = path;
} else if (typeof path === 'string') {
this.texture = new Texture(path);
}
this.origin = new Vector();
this._update();
this.translation.set(ox || 0, oy || 0);
/**
* @name Two.Sprite#columns
* @property {Number} - The number of columns to split the texture into. Defaults to `1`.
*/
if (typeof cols === 'number') {
this.columns = cols;
}
/**
* @name Two.Sprite#rows
* @property {Number} - The number of rows to split the texture into. Defaults to `1`.
*/
if (typeof rows === 'number') {
this.rows = rows;
}
/**
* @name Two.Sprite#frameRate
* @property {Number} - The number of frames to animate against per second. Defaults to `0` for non-animated sprites.
*/
if (typeof frameRate === 'number') {
this.frameRate = frameRate;
}
/**
* @name Two.Sprite#index
* @property {Number} - The index of the current tile of the sprite to display. Defaults to `0`.
*/
this.index = 0;
}
_.extend(Sprite, {
/**
* @name Two.Sprite.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Sprite}.
*/
Properties: [
'texture', 'columns', 'rows', 'frameRate', 'index'
],
/**
* @name Two.Sprite.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Sprite} to any object. Handy if you'd like to extend or inherit the {@link Two.Sprite} class on a custom class.
*/
MakeObservable: function(obj) {
Rectangle.MakeObservable(obj);
_.each(Sprite.Properties, defineGetterSetter, obj);
}
});
_.extend(Sprite.prototype, Rectangle.prototype, {
constructor: Sprite,
/**
* @name Two.Sprite#_flagTexture
* @private
* @property {Boolean} - Determines whether the {@link Two.Sprite#texture} needs updating.
*/
_flagTexture: false,
/**
* @name Two.Sprite#_flagColumns
* @private
* @property {Boolean} - Determines whether the {@link Two.Sprite#columns} need updating.
*/
_flagColumns: false,
/**
* @name Two.Sprite#_flagRows
* @private
* @property {Boolean} - Determines whether the {@link Two.Sprite#rows} need updating.
*/
_flagRows: false,
/**
* @name Two.Sprite#_flagFrameRate
* @private
* @property {Boolean} - Determines whether the {@link Two.Sprite#flagFrameRate} needs updating.
*/
_flagFrameRate: false,
/**
* @name Two.Sprite#_flagIndex
* @private
* @property {Boolean} - Determines whether the {@link Two.Sprite#index} needs updating.
*/
flagIndex: false,
// Private variables
/**
* @name Two.Sprite#_amount
* @private
* @property {Number} - Number of frames for a given {@link Two.Sprite}.
*/
_amount: 1,
/**
* @name Two.Sprite#_duration
* @private
* @property {Number} - Number of milliseconds a {@link Two.Sprite}.
*/
_duration: 0,
/**
* @name Two.Sprite#_startTime
* @private
* @property {Milliseconds} - Epoch time in milliseconds of when the {@link Two.Sprite} started.
*/
_startTime: 0,
/**
* @name Two.Sprite#_playing
* @private
* @property {Boolean} - Dictates whether the {@link Two.Sprite} is animating or not.
*/
_playing: false,
/**
* @name Two.Sprite#_firstFrame
* @private
* @property {Number} - The frame the {@link Two.Sprite} should start with.
*/
_firstFrame: 0,
/**
* @name Two.Sprite#_lastFrame
* @private
* @property {Number} - The frame the {@link Two.Sprite} should end with.
*/
_lastFrame: 0,
/**
* @name Two.Sprite#_playing
* @private
* @property {Boolean} - Dictates whether the {@link Two.Sprite} should loop or not.
*/
_loop: true,
// Exposed through getter-setter
/**
* @name Two.Sprite#_texture
* @private
* @see {@link Two.Sprite#texture}
*/
_texture: null,
/**
* @name Two.Sprite#_columns
* @private
* @see {@link Two.Sprite#columns}
*/
_columns: 1,
/**
* @name Two.Sprite#_rows
* @private
* @see {@link Two.Sprite#rows}
*/
_rows: 1,
/**
* @name Two.Sprite#_frameRate
* @private
* @see {@link Two.Sprite#frameRate}
*/
_frameRate: 0,
/**
* @name Two.Sprite#_index
* @private
* @property {Number} - The current frame the {@link Two.Sprite} is currently displaying.
*/
_index: 0,
/**
* @name Two.Sprite#_origin
* @private
* @see {@link Two.Sprite#origin}
*/
_origin: null,
/**
* @name Two.Sprite#play
* @function
* @param {Number} [firstFrame=0] - The index of the frame to start the animation with.
* @param {Number} [lastFrame] - The index of the frame to end the animation with. Defaults to the last item in the {@link Two.Sprite#textures}.
* @param {Function} [onLastFrame] - Optional callback function to be triggered after playing the last frame. This fires multiple times when the sprite is looped.
* @description Initiate animation playback of a {@link Two.Sprite}.
*/
play: function(firstFrame, lastFrame, onLastFrame) {
this._playing = true;
this._firstFrame = 0;
this._lastFrame = this.amount - 1;
this._startTime = _.performance.now();
if (typeof firstFrame === 'number') {
this._firstFrame = firstFrame;
}
if (typeof lastFrame === 'number') {
this._lastFrame = lastFrame;
}
if (typeof onLastFrame === 'function') {
this._onLastFrame = onLastFrame;
} else {
delete this._onLastFrame;
}
if (this._index !== this._firstFrame) {
this._startTime -= 1000 * Math.abs(this._index - this._firstFrame)
/ this._frameRate;
}
return this;
},
/**
* @name Two.Sprite#pause
* @function
* @description Halt animation playback of a {@link Two.Sprite}.
*/
pause: function() {
this._playing = false;
return this;
},
/**
* @name Two.Sprite#stop
* @function
* @description Halt animation playback of a {@link Two.Sprite} and set the current frame back to the first frame.
*/
stop: function() {
this._playing = false;
this._index = 0;
return this;
},
/**
* @name Two.Sprite#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Sprite}
* @description Create a new instance of {@link Two.Sprite} with the same properties of the current sprite.
*/
clone: function(parent) {
var clone = new Sprite(
this.texture, this.translation.x, this.translation.y,
this.columns, this.rows, this.frameRate
);
if (this.playing) {
clone.play(this._firstFrame, this._lastFrame);
clone._loop = this._loop;
}
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Sprite#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Rectangle.prototype.toObject.call(this);
object.texture = this.texture.toObject();
object.columns = this.columns;
object.rows = this.rows;
object.frameRate = this.frameRate;
object.index = this.index;
object._firstFrame = this._firstFrame;
object._lastFrame = this._lastFrame;
object._loop = this._loop;
return object;
},
/**
* @name Two.Sprite#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
var effect = this._texture;
var cols = this._columns;
var rows = this._rows;
var width, height, elapsed, amount, duration;
var index, iw, ih, frames;
if (this._flagColumns || this._flagRows) {
this._amount = this._columns * this._rows;
}
if (this._flagFrameRate) {
this._duration = 1000 * this._amount / this._frameRate;
}
if (this._flagTexture) {
this.fill = this._texture;
}
if (this._texture.loaded) {
iw = effect.image.width;
ih = effect.image.height;
width = iw / cols;
height = ih / rows;
amount = this._amount;
if (this.width !== width) {
this.width = width;
}
if (this.height !== height) {
this.height = height;
}
if (this._playing && this._frameRate > 0) {
if (_.isNaN(this._lastFrame)) {
this._lastFrame = amount - 1;
}
// TODO: Offload perf logic to instance of `Two`.
elapsed = _.performance.now() - this._startTime;
frames = this._lastFrame + 1;
duration = 1000 * (frames - this._firstFrame) / this._frameRate;
if (this._loop) {
elapsed = elapsed % duration;
} else {
elapsed = Math.min(elapsed, duration);
}
index = lerp(this._firstFrame, frames, elapsed / duration);
index = Math.floor(index);
if (index !== this._index) {
this._index = index;
if (index >= this._lastFrame - 1 && this._onLastFrame) {
this._onLastFrame(); // Shortcut for chainable sprite animations
}
}
}
var col = this._index % cols;
var row = Math.floor(this._index / cols);
var ox = - width * col + (iw - width) / 2;
var oy = - height * row + (ih - height) / 2;
// TODO: Improve performance
if (ox !== effect.offset.x) {
effect.offset.x = ox;
}
if (oy !== effect.offset.y) {
effect.offset.y = oy;
}
}
Rectangle.prototype._update.call(this);
return this;
},
/**
* @name Two.Sprite#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagTexture = this._flagColumns = this._flagRows
= this._flagFrameRate = false;
Rectangle.prototype.flagReset.call(this);
return this;
}
});
Sprite.MakeObservable(Sprite.prototype);
var TWO_PI$4 = Math.PI * 2, HALF_PI$2 = Math.PI / 2;
var cos$3 = Math.cos, sin$3 = Math.sin;
/**
* @name Two.Circle
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the circle.
* @param {Number} [y=0] - The y position of the circle.
* @param {Number} [radius=0] - The radius value of the circle.
* @param {Number} [resolution=4] - The number of vertices used to construct the circle.
*/
function Circle(ox, oy, r, resolution) {
// At least 2 vertices are required for proper circlage
var amount = resolution ? Math.max(resolution, 2) : 4;
var points = [];
for (var i = 0; i < amount; i++) {
points.push(new Anchor(0, 0, 0, 0, 0, 0));
}
Path.call(this, points, true, true, true);
/**
* @name Two.Circle#radius
* @property {Number} - The size of the radius of the circle.
*/
if (typeof r === 'number') {
this.radius = r;
}
this._update();
if (typeof ox === 'number') {
this.translation.x = ox;
}
if (typeof oy === 'number') {
this.translation.y = oy;
}
}
_.extend(Circle, {
/**
* @name Two.Circle.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Circle}.
*/
Properties: ['radius'],
/**
* @name Two.Circle.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Circle} to any object. Handy if you'd like to extend the {@link Two.Circle} class on a custom class.
*/
MakeObservable: function(obj) {
Path.MakeObservable(obj);
_.each(Circle.Properties, defineGetterSetter, obj);
}
});
_.extend(Circle.prototype, Path.prototype, {
constructor: Circle,
/**
* @name Two.Circle#_flagRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.Circle#radius} needs updating.
*/
_flagRadius: false,
/**
* @name Two.Circle#_radius
* @private
* @see {@link Two.Circle#radius}
*/
_radius: 0,
/**
* @name Two.Circle#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagRadius) {
var length = this.vertices.length;
if (!this._closed && length > 2) {
length -= 1;
}
// Coefficient for approximating circular arcs with Bezier curves
var c = (4 / 3) * Math.tan(Math.PI / (length * 2));
var radius = this._radius;
var rc = radius * c;
for (var i = 0; i < this.vertices.length; i++) {
var pct = i / length;
var theta = pct * TWO_PI$4;
var x = radius * cos$3(theta);
var y = radius * sin$3(theta);
var lx = rc * cos$3(theta - HALF_PI$2);
var ly = rc * sin$3(theta - HALF_PI$2);
var rx = rc * cos$3(theta + HALF_PI$2);
var ry = rc * sin$3(theta + HALF_PI$2);
var v = this.vertices[i];
v.command = i === 0 ? Commands.move : Commands.curve;
v.set(x, y);
v.controls.left.set(lx, ly);
v.controls.right.set(rx, ry);
}
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.Circle#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagRadius = false;
Path.prototype.flagReset.call(this);
return this;
},
/**
* @name Two.Circle#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Circle}
* @description Create a new instance of {@link Two.Circle} with the same properties of the current path.
*/
clone: function(parent) {
var clone = new Circle(0, 0, this.radius, this.vertices.length);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Circle#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
_.each(Circle.Properties, function(property) {
object[property] = this[property];
}, this);
return object;
}
});
Circle.MakeObservable(Circle.prototype);
var TWO_PI$3 = Math.PI * 2, HALF_PI$1 = Math.PI / 2;
var cos$2 = Math.cos, sin$2 = Math.sin;
/**
* @name Two.Ellipse
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the ellipse.
* @param {Number} [y=0] - The y position of the ellipse.
* @param {Number} [rx=0] - The radius value of the ellipse in the x direction.
* @param {Number} [ry=0] - The radius value of the ellipse in the y direction.
* @param {Number} [resolution=4] - The number of vertices used to construct the ellipse.
*/
function Ellipse(ox, oy, rx, ry, resolution) {
if (typeof ry !== 'number' && typeof rx === 'number') {
ry = rx;
}
// At least 2 vertices are required for proper circlage
var amount = resolution ? Math.max(resolution, 2) : 4;
var points = [];
for (var i = 0; i < amount; i++) {
points.push(new Anchor());
}
Path.call(this, points, true, true, true);
/**
* @name Two.Ellipse#width
* @property {Number} - The width of the ellipse.
*/
if (typeof rx === 'number') {
this.width = rx * 2;
}
/**
* @name Two.Ellipse#height
* @property {Number} - The height of the ellipse.
*/
if (typeof ry === 'number') {
this.height = ry * 2;
}
this._update();
this.translation.set(ox, oy);
}
_.extend(Ellipse, {
/**
* @name Two.Ellipse.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Ellipse}.
*/
Properties: ['width', 'height'],
/**
* @name Two.Ellipse.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Ellipse} to any object. Handy if you'd like to extend the {@link Two.Ellipse} class on a custom class.
*/
MakeObservable: function(obj) {
Path.MakeObservable(obj);
_.each(Ellipse.Properties, defineGetterSetter, obj);
}
});
_.extend(Ellipse.prototype, Path.prototype, {
/**
* @name Two.Ellipse#_flagWidth
* @private
* @property {Boolean} - Determines whether the {@link Two.Ellipse#width} needs updating.
*/
_flagWidth: false,
/**
* @name Two.Ellipse#_flagHeight
* @private
* @property {Boolean} - Determines whether the {@link Two.Ellipse#height} needs updating.
*/
_flagHeight: false,
/**
* @name Two.Polygon#_width
* @private
* @see {@link Two.Ellipse#width}
*/
_width: 0,
/**
* @name Two.Polygon#_height
* @private
* @see {@link Two.Ellipse#height}
*/
_height: 0,
constructor: Ellipse,
/**
* @name Two.Ellipse#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagWidth || this._flagHeight) {
var length = this.vertices.length;
if (!this._closed && length > 2) {
length -= 1;
}
// Coefficient for approximating circular arcs with Bezier curves
var c = (4 / 3) * Math.tan(Math.PI / (this.vertices.length * 2));
var radiusX = this._width / 2;
var radiusY = this._height / 2;
for (var i = 0; i < this.vertices.length; i++) {
var pct = i / length;
var theta = pct * TWO_PI$3;
var x = radiusX * cos$2(theta);
var y = radiusY * sin$2(theta);
var lx = radiusX * c * cos$2(theta - HALF_PI$1);
var ly = radiusY * c * sin$2(theta - HALF_PI$1);
var rx = radiusX * c * cos$2(theta + HALF_PI$1);
var ry = radiusY * c * sin$2(theta + HALF_PI$1);
var v = this.vertices[i];
v.command = i === 0 ? Commands.move : Commands.curve;
v.set(x, y);
v.controls.left.set(lx, ly);
v.controls.right.set(rx, ry);
}
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.Ellipse#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagWidth = this._flagHeight = false;
Path.prototype.flagReset.call(this);
return this;
},
/**
* @name Two.Ellipse#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Polygon}
* @description Create a new instance of {@link Two.Polygon} with the same properties of the current path.
*/
clone: function(parent) {
var rx = this.width / 2;
var ry = this.height / 2;
var resolution = this.vertices.length;
var clone = new Ellipse(0, 0, rx, ry, resolution);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Ellipse#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
_.each(Ellipse.Properties, function(property) {
object[property] = this[property];
}, this);
return object;
}
});
Ellipse.MakeObservable(Ellipse.prototype);
/**
* @name Two.Line
* @class
* @extends Two.Path
* @param {Number} [x1=0] - The x position of the first vertex on the line.
* @param {Number} [y1=0] - The y position of the first vertex on the line.
* @param {Number} [x2=0] - The x position of the second vertex on the line.
* @param {Number} [y2=0] - The y position of the second vertex on the line.
*/
function Line(x1, y1, x2, y2) {
Path.call(this, [
new Anchor(x1, y1),
new Anchor(x2, y2)
]);
this.vertices[0].command = Commands.move;
this.vertices[1].command = Commands.line;
this.automatic = false;
}
_.extend(Line.prototype, Path.prototype, {
constructor: Line
});
Path.MakeObservable(Line.prototype);
/**
* @name Two.RoundedRectangle
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the rounded rectangle.
* @param {Number} [y=0] - The y position of the rounded rectangle.
* @param {Number} [width=0] - The width value of the rounded rectangle.
* @param {Number} [height=0] - The width value of the rounded rectangle.
* @param {Number} [radius=0] - The radius value of the rounded rectangle.
* @param {Number} [resolution=12] - The number of vertices used to construct the rounded rectangle.
*/
function RoundedRectangle(ox, oy, width, height, radius) {
if (typeof radius === 'undefined' &&
typeof width === 'number' && typeof height === 'number') {
radius = Math.floor(Math.min(width, height) / 12);
}
var amount = 10;
var points = [];
for (var i = 0; i < amount; i++) {
points.push(
new Anchor(0, 0, 0, 0, 0, 0,
i === 0 ? Commands.move : Commands.curve)
);
}
// points[points.length - 1].command = Two.Commands.close;
Path.call(this, points);
this.closed = true;
this.automatic = false;
this._renderer.flagRadius = RoundedRectangle.FlagRadius.bind(this);
/**
* @name Two.RoundedRectangle#width
* @property {Number} - The width of the rounded rectangle.
*/
if (typeof width === 'number') {
this.width = width;
}
/**
* @name Two.RoundedRectangle#height
* @property {Number} - The height of the rounded rectangle.
*/
if (typeof height === 'number') {
this.height = height;
}
/**
* @name Two.RoundedRectangle#radius
* @property {Number} - The size of the radius of the rounded rectangle.
*/
if (typeof radius === 'number') {
this.radius = radius;
}
this._update();
this.translation.set(ox, oy);
}
_.extend(RoundedRectangle, {
/**
* @name Two.RoundedRectangle.Properties
* @property {String[]} - A list of properties that are on every {@link Two.RoundedRectangle}.
*/
Properties: ['width', 'height'],
/**
* @name Two.RoundedRectangle.FlagRadius
* @property {Function} - A convenience function to trigger the flag for radius changing.
*/
FlagRadius: function() {
this._flagRadius = true;
},
/**
* @name Two.RoundedRectangle.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.RoundedRectangle} to any object. Handy if you'd like to extend the {@link Two.RoundedRectangle} class on a custom class.
*/
MakeObservable: function(object) {
Path.MakeObservable(object);
_.each(RoundedRectangle.Properties, defineGetterSetter, object);
Object.defineProperty(object, 'radius', {
enumerable: true,
get: function() {
return this._radius;
},
set: function(v) {
if (this._radius instanceof Vector) {
this._radius.unbind(Events.Types.change, this._renderer.flagRadius);
}
this._radius = v;
if (this._radius instanceof Vector) {
this._radius.bind(Events.Types.change, this._renderer.flagRadius);
}
this._flagRadius = true;
}
});
}
});
_.extend(RoundedRectangle.prototype, Path.prototype, {
constructor: RoundedRectangle,
/**
* @name Two.RoundedRectangle#_flagWidth
* @private
* @property {Boolean} - Determines whether the {@link Two.RoundedRectangle#width} needs updating.
*/
_flagWidth: false,
/**
* @name Two.RoundedRectangle#_flagHeight
* @private
* @property {Boolean} - Determines whether the {@link Two.RoundedRectangle#height} needs updating.
*/
_flagHeight: false,
/**
* @name Two.RoundedRectangle#_flagRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.RoundedRectangle#radius} needs updating.
*/
_flagRadius: false,
/**
* @name Two.RoundedRectangle#_width
* @private
* @see {@link Two.RoundedRectangle#width}
*/
_width: 0,
/**
* @name Two.RoundedRectangle#_height
* @private
* @see {@link Two.RoundedRectangle#height}
*/
_height: 0,
/**
* @name Two.RoundedRectangle#_radius
* @private
* @see {@link Two.RoundedRectangle#radius}
*/
_radius: 12,
/**
* @name Two.RoundedRectangle#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagWidth || this._flagHeight || this._flagRadius) {
var width = this._width;
var height = this._height;
var rx, ry;
if (this._radius instanceof Vector) {
rx = this._radius.x;
ry = this._radius.y;
} else {
rx = this._radius;
ry = this._radius;
}
var v;
var w = width / 2;
var h = height / 2;
v = this.vertices[0];
v.x = - (w - rx);
v.y = - h;
// Upper Right Corner
v = this.vertices[1];
v.x = (w - rx);
v.y = - h;
v.controls.left.clear();
v.controls.right.x = rx;
v.controls.right.y = 0;
v = this.vertices[2];
v.x = w;
v.y = - (h - ry);
v.controls.right.clear();
v.controls.left.clear();
// Bottom Right Corner
v = this.vertices[3];
v.x = w;
v.y = (h - ry);
v.controls.left.clear();
v.controls.right.x = 0;
v.controls.right.y = ry;
v = this.vertices[4];
v.x = (w - rx);
v.y = h;
v.controls.right.clear();
v.controls.left.clear();
// Bottom Left Corner
v = this.vertices[5];
v.x = - (w - rx);
v.y = h;
v.controls.left.clear();
v.controls.right.x = - rx;
v.controls.right.y = 0;
v = this.vertices[6];
v.x = - w;
v.y = (h - ry);
v.controls.left.clear();
v.controls.right.clear();
// Upper Left Corner
v = this.vertices[7];
v.x = - w;
v.y = - (h - ry);
v.controls.left.clear();
v.controls.right.x = 0;
v.controls.right.y = - ry;
v = this.vertices[8];
v.x = - (w - rx);
v.y = - h;
v.controls.left.clear();
v.controls.right.clear();
v = this.vertices[9];
v.copy(this.vertices[8]);
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.RoundedRectangle#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagWidth = this._flagHeight = this._flagRadius = false;
Path.prototype.flagReset.call(this);
return this;
},
/**
* @name Two.RoundedRectangle#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.RoundedRectangle}
* @description Create a new instance of {@link Two.RoundedRectangle} with the same properties of the current path.
*/
clone: function(parent) {
var width = this.width;
var height = this.height;
var radius = this.radius;
var clone = new RoundedRectangle(0, 0, width, height, radius);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.RoundedRectangle#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
_.each(RoundedRectangle.Properties, function(property) {
object[property] = this[property];
}, this);
object.radius = typeof this.radius === 'number'
? this.radius : this.radius.toObject();
return object;
}
});
RoundedRectangle.MakeObservable(RoundedRectangle.prototype);
var min = Math.min, max = Math.max;
/**
* @name Two.Text
* @class
* @extends Two.Shape
* @param {String} [message] - The String to be rendered to the scene.
* @param {Number} [x=0] - The position in the x direction for the object.
* @param {Number} [y=0] - The position in the y direction for the object.
* @param {Object} [styles] - An object where styles are applied. Attribute must exist in Two.Text.Properties.
* @description This is a primitive class for creating drawable text that can be added to the scenegraph.
* @returns {Two.Text}
*/
function Text(message, x, y, styles) {
Shape.call(this);
this._renderer.type = 'text';
this._renderer.flagFill = Text.FlagFill.bind(this);
this._renderer.flagStroke = Text.FlagStroke.bind(this);
this.value = message;
if (typeof x === 'number') {
this.translation.x = x;
}
if (typeof y === 'number') {
this.translation.y = y;
}
/**
* @name Two.Text#dashes
* @property {Number[]} - Array of numbers. Odd indices represent dash length. Even indices represent dash space.
* @description A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray} for more information on the SVG stroke-dasharray attribute.
*/
this.dashes = [];
/**
* @name Two.Text#dashes#offset
* @property {Number} - A number in pixels to offset {@link Two.Text#dashes} display.
*/
this.dashes.offset = 0;
if (!_.isObject(styles)) {
return this;
}
_.each(Text.Properties, function(property) {
if (property in styles) {
this[property] = styles[property];
}
}, this);
}
_.extend(Text, {
/**
* @name Two.Text.Ratio
* @property {Number} - Approximate aspect ratio of a typeface's character width to height.
*/
Ratio: 0.6,
/**
* @name Two.Text.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Text}.
*/
Properties: [
'value', 'family', 'size', 'leading', 'alignment', 'linewidth', 'style',
'weight', 'decoration', 'baseline', 'opacity', 'visible', 'className',
'fill', 'stroke',
],
/**
* @name Two.Text.FlagFill
* @function
* @description Cached method to let renderers know the fill property have been updated on a {@link Two.Text}.
*/
FlagFill: function() {
this._flagFill = true;
},
/**
* @name Two.Text.FlagStroke
* @function
* @description Cached method to let renderers know the stroke property have been updated on a {@link Two.Text}.
*/
FlagStroke: function() {
this._flagStroke = true;
},
MakeObservable: function(object) {
Shape.MakeObservable(object);
_.each(Text.Properties.slice(0, 12), defineGetterSetter, object);
Object.defineProperty(object, 'fill', {
enumerable: true,
get: function() {
return this._fill;
},
set: function(f) {
if (this._fill instanceof Gradient
|| this._fill instanceof LinearGradient
|| this._fill instanceof RadialGradient
|| this._fill instanceof Texture) {
this._fill.unbind(Events.Types.change, this._renderer.flagFill);
}
this._fill = f;
this._flagFill = true;
if (this._fill instanceof Gradient
|| this._fill instanceof LinearGradient
|| this._fill instanceof RadialGradient
|| this._fill instanceof Texture) {
this._fill.bind(Events.Types.change, this._renderer.flagFill);
}
}
});
Object.defineProperty(object, 'stroke', {
enumerable: true,
get: function() {
return this._stroke;
},
set: function(f) {
if (this._stroke instanceof Gradient
|| this._stroke instanceof LinearGradient
|| this._stroke instanceof RadialGradient
|| this._stroke instanceof Texture) {
this._stroke.unbind(Events.Types.change, this._renderer.flagStroke);
}
this._stroke = f;
this._flagStroke = true;
if (this._stroke instanceof Gradient
|| this._stroke instanceof LinearGradient
|| this._stroke instanceof RadialGradient
|| this._stroke instanceof Texture) {
this._stroke.bind(Events.Types.change, this._renderer.flagStroke);
}
}
});
Object.defineProperty(object, 'mask', {
enumerable: true,
get: function() {
return this._mask;
},
set: function(v) {
this._mask = v;
this._flagMask = true;
if (!v.clip) {
v.clip = true;
}
}
});
Object.defineProperty(object, 'clip', {
enumerable: true,
get: function() {
return this._clip;
},
set: function(v) {
this._clip = v;
this._flagClip = true;
}
});
Object.defineProperty(object, 'dashes', {
enumerable: true,
get: function() {
return this._dashes;
},
set: function(v) {
if (typeof v.offset !== 'number') {
v.offset = this._dashes.offset || 0;
}
this._dashes = v;
}
});
}
});
_.extend(Text.prototype, Shape.prototype, {
constructor: Text,
// Flags
// http://en.wikipedia.org/wiki/Flag
/**
* @name Two.Text#_flagValue
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#value} need updating.
*/
_flagValue: true,
/**
* @name Two.Text#_flagFamily
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#family} need updating.
*/
_flagFamily: true,
/**
* @name Two.Text#_flagSize
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#size} need updating.
*/
_flagSize: true,
/**
* @name Two.Text#_flagLeading
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#leading} need updating.
*/
_flagLeading: true,
/**
* @name Two.Text#_flagAlignment
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#alignment} need updating.
*/
_flagAlignment: true,
/**
* @name Two.Text#_flagBaseline
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#baseline} need updating.
*/
_flagBaseline: true,
/**
* @name Two.Text#_flagStyle
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#style} need updating.
*/
_flagStyle: true,
/**
* @name Two.Text#_flagWeight
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#weight} need updating.
*/
_flagWeight: true,
/**
* @name Two.Text#_flagDecoration
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#decoration} need updating.
*/
_flagDecoration: true,
/**
* @name Two.Text#_flagFill
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#fill} need updating.
*/
_flagFill: true,
/**
* @name Two.Text#_flagStroke
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#stroke} need updating.
*/
_flagStroke: true,
/**
* @name Two.Text#_flagLinewidth
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#linewidth} need updating.
*/
_flagLinewidth: true,
/**
* @name Two.Text#_flagOpacity
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#opacity} need updating.
*/
_flagOpacity: true,
/**
* @name Two.Text#_flagClassName
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#className} need updating.
*/
_flagClassName: true,
/**
* @name Two.Text#_flagVisible
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#visible} need updating.
*/
_flagVisible: true,
/**
* @name Two.Path#_flagMask
* @private
* @property {Boolean} - Determines whether the {@link Two.Path#mask} needs updating.
*/
_flagMask: false,
/**
* @name Two.Text#_flagClip
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#clip} need updating.
*/
_flagClip: false,
// Underlying Properties
/**
* @name Two.Text#value
* @property {String} - The characters to be rendered to the the screen. Referred to in the documentation sometimes as the `message`.
*/
_value: '',
/**
* @name Two.Text#family
* @property {String} - The font family Two.js should attempt to regsiter for rendering. The default value is `'sans-serif'`. Comma separated font names can be supplied as a "stack", similar to the CSS implementation of `font-family`.
*/
_family: 'sans-serif',
/**
* @name Two.Text#size
* @property {Number} - The font size in Two.js point space. Defaults to `13`.
*/
_size: 13,
/**
* @name Two.Text#leading
* @property {Number} - The height between lines measured from base to base in Two.js point space. Defaults to `17`.
*/
_leading: 17,
/**
* @name Two.Text#alignment
* @property {String} - Alignment of text in relation to {@link Two.Text#translation}'s coordinates. Possible values include `'left'`, `'center'`, `'right'`. Defaults to `'center'`.
*/
_alignment: 'center',
/**
* @name Two.Text#baseline
* @property {String} - The vertical aligment of the text in relation to {@link Two.Text#translation}'s coordinates. Possible values include `'top'`, `'middle'`, `'bottom'`, and `'baseline'`. Defaults to `'baseline'`.
*/
_baseline: 'middle',
/**
* @name Two.Text#style
* @property {String} - The font's style. Possible values include '`normal`', `'italic'`. Defaults to `'normal'`.
*/
_style: 'normal',
/**
* @name Two.Text#weight
* @property {Number} - A number at intervals of 100 to describe the font's weight. This compatibility varies with the typeface's variant weights. Larger values are bolder. Smaller values are thinner. Defaults to `'500'`.
*/
_weight: 500,
/**
* @name Two.Text#decoration
* @property {String} - String to delineate whether text should be decorated with for instance an `'underline'`. Defaults to `'none'`.
*/
_decoration: 'none',
/**
* @name Two.Text#fill
* @property {(String|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
*/
_fill: '#000',
/**
* @name Two.Text#stroke
* @property {(String|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
*/
_stroke: 'transparent',
/**
* @name Two.Text#linewidth
* @property {Number} - The thickness in pixels of the stroke.
*/
_linewidth: 1,
/**
* @name Two.Text#opacity
* @property {Number} - The opaqueness of the text object.
* @nota-bene Can be used in conjunction with CSS Colors that have an alpha value.
*/
_opacity: 1,
/**
* @name Two.Text#className
* @property {String} - A class to be applied to the element to be compatible with CSS styling. Only available for the {@link Two.SvgRenderer}.
*/
_className: '',
/**
* @name Two.Text#visible
* @property {Boolean} - Display the text object or not.
* @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
*/
_visible: true,
/**
* @name Two.Text#mask
* @property {Two.Shape} - The shape whose alpha property becomes a clipping area for the text.
* @nota-bene This property is currently not working becuase of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
*/
_mask: null,
/**
* @name Two.Text#clip
* @property {Two.Shape} - Object to define clipping area.
* @nota-bene This property is currently not working becuase of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
*/
_clip: false,
/**
* @name Two.Text#_dashes
* @private
* @see {@link Two.Text#dashes}
*/
_dashes: [],
/**
* @name Two.Text#remove
* @function
* @description Remove self from the scene / parent.
*/
remove: function() {
if (!this.parent) {
return this;
}
this.parent.remove(this);
return this;
},
/**
* @name Two.Text#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Text}
* @description Create a new instance of {@link Two.Text} with the same properties of the current text object.
*/
clone: function(parent) {
var clone = new Text(this.value);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
_.each(Text.Properties, function(property) {
clone[property] = this[property];
}, this);
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
if (parent) {
parent.add(clone);
}
return clone._update();
},
/**
* @name Two.Text#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the text object.
*/
toObject: function() {
var result = {
translation: this.translation.toObject(),
rotation: this.rotation,
scale: this.scale
};
if (this.matrix.manual) {
result.matrix = this.matrix.toObject();
}
_.each(Text.Properties, function(property) {
result[property] = this[property];
}, this);
return result;
},
/**
* @name Two.Text#noFill
* @function
* @description Short hand method to set fill to `transparent`.
*/
noFill: function() {
this.fill = 'transparent';
return this;
},
/**
* @name Two.Text#noStroke
* @function
* @description Short hand method to set stroke to `transparent`.
*/
noStroke: function() {
this.stroke = undefined;
this.linewidth = undefined;
return this;
},
// A shim to not break `getBoundingClientRect` calls.
// TODO: Implement a way to calculate proper bounding
// boxes of `Two.Text`.
/**
* @name Two.Text#getBoundingClientRect
* @function
* @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
* @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
* @description Return an object with top, left, right, bottom, width, and height parameters of the text object.
*/
getBoundingClientRect: function(shallow) {
var matrix, a, b, c, d;
var left, right, top, bottom;
// TODO: Update this to not __always__ update. Just when it needs to.
this._update(true);
matrix = shallow ? this._matrix : getComputedMatrix(this);
var height = this.leading;
var width = this.value.length * this.size * Text.Ratio;
var border = (this._linewidth || 0) / 2;
switch (this.alignment) {
case 'left':
left = - border;
right = width + border;
break;
case 'right':
left = - (width + border);
right = border;
break;
default:
left = - (width / 2 + border);
right = width / 2 + border;
}
switch (this.baseline) {
case 'top':
top = - border;
bottom = height + border;
break;
case 'bottom':
top = - (height + border);
bottom = border;
break;
default:
top = - (height / 2 + border);
bottom = height / 2 + border;
}
a = matrix.multiply(left, top, 1);
b = matrix.multiply(left, bottom, 1);
c = matrix.multiply(right, top, 1);
d = matrix.multiply(right, bottom, 1);
top = min(a.y, b.y, c.y, d.y);
left = min(a.x, b.x, c.x, d.x);
right = max(a.x, b.x, c.x, d.x);
bottom = max(a.y, b.y, c.y, d.y);
return {
top: top,
left: left,
right: right,
bottom: bottom,
width: right - left,
height: bottom - top
};
},
/**
* @name Two.Text#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagValue = this._flagFamily = this._flagSize =
this._flagLeading = this._flagAlignment = this._flagFill =
this._flagStroke = this._flagLinewidth = this._flagOpacity =
this._flagVisible = this._flagClip = this._flagDecoration =
this._flagClassName = this._flagBaseline = this._flagWeight =
this._flagStyle = false;
Shape.prototype.flagReset.call(this);
return this;
}
});
Text.MakeObservable(Text.prototype);
// https://github.com/jonobr1/two.js/issues/507#issuecomment-777159213
var regex = {
path: /[+-]?(?:\d*\.\d+|\d+)(?:[eE][+-]\d+)?/g
};
var alignments = {
start: 'left',
middle: 'center',
end: 'right'
};
/**
* @name Two.Utils.getAlignment
* @function
* @param {AlignmentString}
* @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor}
*/
var getAlignment = function(anchor) {
return alignments[anchor];
};
var getBaseline = function(node) {
var a = node.getAttribute('dominant-baseline');
var b = node.getAttribute('alignment-baseline');
return a || b;
};
var getTagName = function(tag) {
return tag.replace(/svg:/ig, '').toLowerCase();
};
var applyTransformsToVector = function(transforms, vector) {
vector.x += transforms.translateX;
vector.y += transforms.translateY;
vector.x *= transforms.scaleX;
vector.y *= transforms.scaleY;
if (transforms.rotation !== 0) {
// TODO: Test further
var l = vector.length();
vector.x = l * Math.cos(transforms.rotation);
vector.y = l * Math.sin(transforms.rotation);
}
};
/**
* @name Two.Utils.extractCSSText
* @function
* @param {String} text - The CSS text body to be parsed and extracted.
* @param {Object} [styles] - The styles object to apply CSS key values to.
* @returns {Object} styles
* @description Parse CSS text body and apply them as key value pairs to a JavaScript object.
*/
var extractCSSText = function(text, styles) {
var commands, command, name, value;
if (!styles) {
styles = {};
}
commands = text.split(';');
for (var i = 0; i < commands.length; i++) {
command = commands[i].split(':');
name = command[0];
value = command[1];
if (typeof name === 'undefined' || typeof value === 'undefined') {
continue;
}
styles[name] = value.replace(/\s/, '');
}
return styles;
};
/**
* @name Two.Utils.getSvgStyles
* @function
* @param {SVGElement} node - The SVG node to parse.
* @returns {Object} styles
* @description Get the CSS comands from the `style` attribute of an SVG node and apply them as key value pairs to a JavaScript object.
*/
var getSvgStyles = function(node) {
var styles = {};
var attributes = getSvgAttributes(node);
var length = Math.max(attributes.length, node.style.length);
for (var i = 0; i < length; i++) {
var command = node.style[i];
var attribute = attributes[i];
if (command) {
styles[command] = node.style[command];
}
if (attribute) {
styles[attribute] = node.getAttribute(attribute);
}
}
return styles;
};
var getSvgAttributes = function(node) {
var attributes = node.getAttributeNames();
// Reserved attributes to remove
var keywords = ['id', 'class', 'transform', 'xmlns', 'viewBox'];
for (var i = 0; i < keywords.length; i++) {
var keyword = keywords[i];
var index = Array.prototype.indexOf.call(attributes, keyword);
if (index >= 0) {
attributes.splice(index, 1);
}
}
return attributes;
};
/**
* @name Two.Utils.applySvgViewBox
* @function
* @param {Two.Shape} node - The Two.js object to apply viewbox matrix to
* @param {String} value - The viewBox value from the SVG attribute
* @returns {Two.Shape} node
* @description Applies the transform of the SVG Viewbox on a given node.
*/
var applySvgViewBox = function(node, value) {
var elements = value.split(/\s/);
var x = parseFloat(elements[0]);
var y = parseFloat(elements[1]);
var width = parseFloat(elements[2]);
var height = parseFloat(elements[3]);
var s = Math.min(this.width / width, this.height / height);
node.translation.x -= x * s;
node.translation.y -= y * s;
node.scale = s;
return node;
};
/**
* @name Two.Utils.applySvgAttributes
* @function
* @param {SVGElement} node - An SVG Node to extrapolate attributes from.
* @param {Two.Shape} elem - The Two.js object to apply extrapolated attributes to.
* @returns {Two.Shape} The Two.js object passed now with applied attributes.
* @description This function iterates through an SVG Node's properties and stores ones of interest. It tries to resolve styles applied via CSS as well.
* @TODO Reverse calculate {@link Two.Gradient}s for fill / stroke of any given path.
*/
var applySvgAttributes = function(node, elem, parentStyles) {
var styles = {}, attributes = {}, extracted = {}, i, m, key, value, attr;
var transforms, x, y;
var id, scene, ref, tagName;
// Not available in non browser environments
if (root$1.getComputedStyle) {
// Convert CSSStyleDeclaration to a normal object
var computedStyles = root$1.getComputedStyle(node);
i = computedStyles.length;
while (i--) {
key = computedStyles[i];
value = computedStyles[key];
// Gecko returns undefined for unset properties
// Webkit returns the default value
if (typeof value !== 'undefined') {
styles[key] = value;
}
}
}
// Convert NodeMap to a normal object
for (i = 0; i < node.attributes.length; i++) {
attr = node.attributes[i];
if (/style/i.test(attr.nodeName)) {
extractCSSText(attr.value, extracted);
} else {
attributes[attr.nodeName] = attr.value;
}
}
// Getting the correct opacity is a bit tricky, since SVG path elements don't
// support opacity as an attribute, but you can apply it via CSS.
// So we take the opacity and set (stroke/fill)-opacity to the same value.
if (typeof styles.opacity !== 'undefined') {
styles['stroke-opacity'] = styles.opacity;
styles['fill-opacity'] = styles.opacity;
delete styles.opacity;
}
// Merge attributes and applied styles (attributes take precedence)
if (parentStyles) {
_.defaults(styles, parentStyles);
}
_.extend(styles, extracted, attributes);
// Similarly visibility is influenced by the value of both display and visibility.
// Calculate a unified value here which defaults to `true`.
styles.visible = !(typeof styles.display === 'undefined' && /none/i.test(styles.display))
|| (typeof styles.visibility === 'undefined' && /hidden/i.test(styles.visibility));
// Now iterate the whole thing
for (key in styles) {
value = styles[key];
switch (key) {
case 'gradientTransform':
// TODO: Check this out https://github.com/paperjs/paper.js/blob/develop/src/svg/SvgImport.js#L315
if (/none/i.test(value)) break;
m = (node.gradientTransform && node.gradientTransform.baseVal && node.gradientTransform.baseVal.length > 0)
? node.gradientTransform.baseVal[0].matrix
: (node.getCTM ? node.getCTM() : null);
if (m === null) break;
transforms = decomposeMatrix(m);
switch (elem._renderer.type) {
case 'linear-gradient':
applyTransformsToVector(transforms, elem.left);
applyTransformsToVector(transforms, elem.right);
break;
case 'radial-gradient':
elem.center.x += transforms.translateX;
elem.center.y += transforms.translateY;
elem.focal.x += transforms.translateX;
elem.focal.y += transforms.translateY;
elem.radius *= Math.max(transforms.scaleX, transforms.scaleY);
break;
}
break;
case 'transform':
// TODO: Check this out https://github.com/paperjs/paper.js/blob/develop/src/svg/SvgImport.js#L315
if (/none/i.test(value)) break;
m = (node.transform && node.transform.baseVal && node.transform.baseVal.length > 0)
? node.transform.baseVal[0].matrix
: (node.getCTM ? node.getCTM() : null);
// Might happen when transform string is empty or not valid.
if (m === null) break;
if (Constants.AutoCalculateImportedMatrices) {
// Decompose and infer Two.js related properties.
transforms = decomposeMatrix(m);
elem.translation.set(transforms.translateX, transforms.translateY);
elem.rotation = Math.PI * (transforms.rotation / 180);
elem.scale = new Vector(transforms.scaleX, transforms.scaleY);
x = parseFloat((styles.x + '').replace('px'));
y = parseFloat((styles.y + '').replace('px'));
// Override based on attributes.
if (x) {
elem.translation.x = x;
}
if (y) {
elem.translation.y = y;
}
} else {
// Edit the underlying matrix and don't force an auto calc.
m = node.getCTM();
elem._matrix.manual = true;
elem._matrix.set(m.a, m.b, m.c, m.d, m.e, m.f);
}
break;
case 'viewBox':
applySvgViewBox.call(this, elem, value);
break;
case 'visible':
if (elem instanceof Group) {
elem._visible = value;
break;
}
elem.visible = value;
break;
case 'stroke-linecap':
if (elem instanceof Group) {
elem._cap = value;
break;
}
elem.cap = value;
break;
case 'stroke-linejoin':
if (elem instanceof Group) {
elem._join = value;
break;
}
elem.join = value;
break;
case 'stroke-miterlimit':
if (elem instanceof Group) {
elem._miter = value;
break;
}
elem.miter = value;
break;
case 'stroke-width':
if (elem instanceof Group) {
elem._linewidth = parseFloat(value);
break;
}
elem.linewidth = parseFloat(value);
break;
case 'opacity':
case 'stroke-opacity':
case 'fill-opacity':
// Only apply styles to rendered shapes
// in the scene.
if (elem instanceof Group) {
elem._opacity = parseFloat(value);
break;
}
elem.opacity = parseFloat(value);
break;
case 'clip-path':
if (/url\(#.*\)/i.test(value)) {
id = value.replace(/url\(#(.*)\)/i, '$1');
if (read.defs.current && read.defs.current.contains(id)) {
ref = read.defs.current.get(id);
if (ref && ref.childNodes.length > 0) {
ref = ref.childNodes[0];
tagName = getTagName(ref.nodeName);
elem.mask = read[tagName].call(this, ref, {});
switch (elem._renderer.type) {
case 'path':
// The matrix here needs to change to insure that the object
// clipping is in the same coordinate space as the `elem`.
elem.position.add(elem.mask.position);
elem.mask.position.clear();
break;
}
}
}
}
break;
case 'fill':
case 'stroke':
if (elem instanceof Group) {
key = '_' + key;
}
if (/url\(#.*\)/i.test(value)) {
id = value.replace(/url\(#(.*)\)/i, '$1');
if (read.defs.current && read.defs.current.contains(id)) {
ref = read.defs.current.get(id);
tagName = getTagName(ref.nodeName);
ref = read[tagName].call(this, ref, {});
} else {
scene = getScene(this);
ref = scene.getById(id);
}
elem[key] = ref;
} else {
elem[key] = (/none/i.test(value)) ? 'transparent' : value;
}
break;
case 'id':
elem.id = value;
// Overwritten id for non-conflicts on same page SVG documents
// TODO: Make this non-descructive
node.id = value + '-' + Constants.Identifier + 'applied';
break;
case 'class':
case 'className':
elem.classList = value.split(' ');
break;
case 'x':
case 'y':
var ca = elem instanceof Gradient;
var cb = elem instanceof LinearGradient;
var cc = elem instanceof RadialGradient;
if (ca || cb || cc) {
break;
}
if (value.match('[a-z%]$') && !value.endsWith('px')) {
var error = new TwoError(
'only pixel values are supported with the ' + key + ' attribute.');
console.warn(error.name, error.message);
}
elem.translation[key] = parseFloat(value);
break;
case 'font-family':
if (elem instanceof Text) {
elem.family = value;
}
break;
case 'font-size':
if (elem instanceof Text) {
elem.size = value;
}
break;
case 'font-weight':
if (elem instanceof Text) {
elem.weight = value;
}
break;
case 'font-style':
if (elem instanceof Text) {
elem.style = value;
}
break;
case 'text-decoration':
if (elem instanceof Text) {
elem.decoration = value;
}
break;
case 'line-height':
if (elem instanceof Text) {
elem.leading = value;
}
break;
}
}
return styles;
};
/**
* @name Two.Utils.updateDefsCache
* @function
* @param {SVGElement} node - The SVG Node with which to update the defs cache.
* @param {Object} Object - The defs cache to be updated.
* @description Update the cache of children of tags.
*/
var updateDefsCache = function(node, defsCache) {
for (var i = 0, l = node.childNodes.length; i < l; i++) {
var n = node.childNodes[i];
if (!n.id) continue;
var tagName = getTagName(node.nodeName);
if (tagName === '#text') continue;
defsCache.add(n.id, n);
}
};
/**
* @name Two.Utils.getScene
* @param {Two.Shape} node - The currently available object in the scenegraph.
* @returns {Group} - The highest order {@link Two.Group} in the scenegraph.
* @property {Function}
*/
var getScene = function(node) {
while (node.parent) {
node = node.parent;
}
return node.scene;
};
/**
* @name Two.Utils.read
* @property {Object} read - A map of functions to read any number of SVG node types and create Two.js equivalents of them. Primarily used by the {@link Two#interpret} method.
*/
var read = {
svg: function(node) {
var defs = read.defs.current = new Registry();
var elements = node.getElementsByTagName('defs');
for (var i = 0; i < elements.length; i++) {
updateDefsCache(elements[i], defs);
}
var svg = read.g.call(this, node);
// var viewBox = node.getAttribute('viewBox');
svg.defs = defs; // Export out the for later use
// Utils.applySvgViewBox(svg, viewBox);
delete read.defs.current;
return svg;
},
defs: function(node) {
return null;
},
use: function(node, styles) {
var error;
var href = node.getAttribute('href') || node.getAttribute('xlink:href');
if (!href) {
error = new TwoError('encountered with no href.');
console.warn(error.name, error.message);
return null;
}
var id = href.slice(1);
if (!read.defs.current.contains(id)) {
error = new TwoError(
'unable to find element for reference ' + href + '.');
console.warn(error.name, error.message);
return null;
}
var template = read.defs.current.get(id);
var fullNode = template.cloneNode(true);
var overwriteAttrs = ['x', 'y', 'width', 'height', 'href', 'xlink:href'];
for (var i = 0; i < node.attributes.length; i++) {
var attr = node.attributes[i];
var ca = overwriteAttrs.includes(attr.nodeName);
var cb = !fullNode.hasAttribute(attr.nodeName);
if (ca || cb) {
fullNode.setAttribute(attr.nodeName, attr.value);
}
}
var tagName = getTagName(fullNode.nodeName);
return read[tagName].call(this, fullNode, styles);
},
g: function(node, parentStyles) {
var styles;
var group = new Group();
applySvgAttributes.call(this, node, group, parentStyles);
this.add(group);
// Switched up order to inherit more specific styles
styles = getSvgStyles.call(this, node);
for (var i = 0, l = node.childNodes.length; i < l; i++) {
var n = node.childNodes[i];
var tag = n.nodeName;
if (!tag) return;
var tagName = getTagName(tag);
if (tagName in read) {
var o = read[tagName].call(group, n, styles);
if (!!o && !o.parent) {
group.add(o);
}
}
}
return group;
},
polygon: function(node, parentStyles) {
var points = node.getAttribute('points');
var verts = [];
points.replace(/(-?[\d.eE-]+)[,|\s](-?[\d.eE-]+)/g, function(match, p1, p2) {
verts.push(new Anchor(parseFloat(p1), parseFloat(p2)));
});
var poly = new Path(verts, true).noStroke();
poly.fill = 'black';
applySvgAttributes.call(this, node, poly, parentStyles);
return poly;
},
polyline: function(node, parentStyles) {
var poly = read.polygon.call(this, node, parentStyles);
poly.closed = false;
return poly;
},
path: function(node, parentStyles) {
var path = node.getAttribute('d');
var points = [];
var closed = false, relative = false;
if (path) {
// Create a Two.Path from the paths.
var coord = new Anchor();
var control, coords;
var commands = path.match(/[a-df-z][^a-df-z]*/ig);
var last = commands.length - 1;
// Split up polybeziers
_.each(commands.slice(0), function(command, i) {
var items = command.slice(1).trim().match(regex.path);
var type = command[0];
var lower = type.toLowerCase();
var bin, j, l, ct, times, result = [];
if (i === 0) {
commands = [];
}
switch (lower) {
case 'h':
case 'v':
if (items.length > 1) {
bin = 1;
}
break;
case 'm':
case 'l':
case 't':
if (items.length > 2) {
bin = 2;
}
break;
case 's':
case 'q':
if (items.length > 4) {
bin = 4;
}
break;
case 'c':
if (items.length > 6) {
bin = 6;
}
break;
case 'a':
if (items.length > 7) {
bin = 7;
}
break;
}
// This means we have a polybezier.
if (bin) {
for (j = 0, l = items.length, times = 0; j < l; j+=bin) {
ct = type;
if (times > 0) {
switch (type) {
case 'm':
ct = 'l';
break;
case 'M':
ct = 'L';
break;
}
}
result.push(ct + items.slice(j, j + bin).join(' '));
times++;
}
commands = Array.prototype.concat.apply(commands, result);
} else {
commands.push(command);
}
});
// Create the vertices for our Two.Path
_.each(commands, function(command, i) {
var result, x, y;
var type = command[0];
var lower = type.toLowerCase();
coords = command.slice(1).trim().match(regex.path);
relative = type === lower;
var x1, y1, x2, y2, x3, y3, x4, y4, reflection;
switch (lower) {
case 'z':
if (i >= last) {
closed = true;
} else {
x = coord.x;
y = coord.y;
result = new Anchor(
x, y,
undefined, undefined,
undefined, undefined,
Commands.close
);
// Make coord be the last `m` command
for (var j = points.length - 1; j >= 0; j--) {
var point = points[j];
if (/m/i.test(point.command)) {
coord = point;
break;
}
}
}
break;
case 'm':
case 'l':
control = undefined;
x = parseFloat(coords[0]);
y = parseFloat(coords[1]);
result = new Anchor(
x, y,
undefined, undefined,
undefined, undefined,
/m/i.test(lower) ? Commands.move : Commands.line
);
if (relative) {
result.addSelf(coord);
}
// result.controls.left.copy(result);
// result.controls.right.copy(result);
coord = result;
break;
case 'h':
case 'v':
var a = /h/i.test(lower) ? 'x' : 'y';
var b = /x/i.test(a) ? 'y' : 'x';
result = new Anchor(
undefined, undefined,
undefined, undefined,
undefined, undefined,
Commands.line
);
result[a] = parseFloat(coords[0]);
result[b] = coord[b];
if (relative) {
result[a] += coord[a];
}
// result.controls.left.copy(result);
// result.controls.right.copy(result);
coord = result;
break;
case 'c':
case 's':
x1 = coord.x;
y1 = coord.y;
if (!control) {
control = new Vector();//.copy(coord);
}
if (/c/i.test(lower)) {
x2 = parseFloat(coords[0]);
y2 = parseFloat(coords[1]);
x3 = parseFloat(coords[2]);
y3 = parseFloat(coords[3]);
x4 = parseFloat(coords[4]);
y4 = parseFloat(coords[5]);
} else {
// Calculate reflection control point for proper x2, y2
// inclusion.
reflection = getReflection(coord, control, relative);
x2 = reflection.x;
y2 = reflection.y;
x3 = parseFloat(coords[0]);
y3 = parseFloat(coords[1]);
x4 = parseFloat(coords[2]);
y4 = parseFloat(coords[3]);
}
if (relative) {
x2 += x1;
y2 += y1;
x3 += x1;
y3 += y1;
x4 += x1;
y4 += y1;
}
if (!_.isObject(coord.controls)) {
Anchor.AppendCurveProperties(coord);
}
coord.controls.right.set(x2 - coord.x, y2 - coord.y);
result = new Anchor(
x4, y4,
x3 - x4, y3 - y4,
undefined, undefined,
Commands.curve
);
coord = result;
control = result.controls.left;
break;
case 't':
case 'q':
x1 = coord.x;
y1 = coord.y;
if (!control) {
control = new Vector();
}
if (/q/i.test(lower)) {
x2 = parseFloat(coords[0]);
y2 = parseFloat(coords[1]);
x3 = parseFloat(coords[0]);
y3 = parseFloat(coords[1]);
x4 = parseFloat(coords[2]);
y4 = parseFloat(coords[3]);
} else {
reflection = getReflection(coord, control, relative);
x2 = reflection.x;
y2 = reflection.y;
x3 = reflection.x;
y3 = reflection.y;
x4 = parseFloat(coords[0]);
y4 = parseFloat(coords[1]);
}
if (relative) {
x2 += x1;
y2 += y1;
x3 += x1;
y3 += y1;
x4 += x1;
y4 += y1;
}
if (!_.isObject(coord.controls)) {
Anchor.AppendCurveProperties(coord);
}
coord.controls.right.set(
(x2 - coord.x) * 0.33, (y2 - coord.y) * 0.33);
result = new Anchor(
x4, y4,
x3 - x4, y3 - y4,
undefined, undefined,
Commands.curve
);
coord = result;
control = result.controls.left;
break;
case 'a':
x1 = coord.x;
y1 = coord.y;
var rx = parseFloat(coords[0]);
var ry = parseFloat(coords[1]);
var xAxisRotation = parseFloat(coords[2]);// * PI / 180;
var largeArcFlag = parseFloat(coords[3]);
var sweepFlag = parseFloat(coords[4]);
x4 = parseFloat(coords[5]);
y4 = parseFloat(coords[6]);
if (relative) {
x4 += x1;
y4 += y1;
}
var anchor = new Anchor(x4, y4);
anchor.command = Commands.arc;
anchor.rx = rx;
anchor.ry = ry;
anchor.xAxisRotation = xAxisRotation;
anchor.largeArcFlag = largeArcFlag;
anchor.sweepFlag = sweepFlag;
result = anchor;
coord = anchor;
control = undefined;
break;
}
if (result) {
if (Array.isArray(result)) {
points = points.concat(result);
} else {
points.push(result);
}
}
});
}
path = new Path(points, closed, undefined, true).noStroke();
path.fill = 'black';
var rect = path.getBoundingClientRect(true);
// Center objects to stay consistent
// with the rest of the Two.js API.
rect.centroid = {
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2
};
_.each(path.vertices, function(v) {
v.subSelf(rect.centroid);
});
applySvgAttributes.call(this, node, path, parentStyles);
path.translation.addSelf(rect.centroid);
return path;
},
circle: function(node, parentStyles) {
var x = parseFloat(node.getAttribute('cx'));
var y = parseFloat(node.getAttribute('cy'));
var r = parseFloat(node.getAttribute('r'));
var circle = new Circle(0, 0, r).noStroke();
circle.fill = 'black';
applySvgAttributes.call(this, node, circle, parentStyles);
circle.translation.x = x;
circle.translation.y = y;
return circle;
},
ellipse: function(node, parentStyles) {
var x = parseFloat(node.getAttribute('cx'));
var y = parseFloat(node.getAttribute('cy'));
var width = parseFloat(node.getAttribute('rx'));
var height = parseFloat(node.getAttribute('ry'));
var ellipse = new Ellipse(0, 0, width, height).noStroke();
ellipse.fill = 'black';
applySvgAttributes.call(this, node, ellipse, parentStyles);
ellipse.translation.x = x;
ellipse.translation.y = y;
return ellipse;
},
rect: function(node, parentStyles) {
var rx = parseFloat(node.getAttribute('rx'));
var ry = parseFloat(node.getAttribute('ry'));
if (!_.isNaN(rx) || !_.isNaN(ry)) {
return read['rounded-rect'](node);
}
var width = parseFloat(node.getAttribute('width'));
var height = parseFloat(node.getAttribute('height'));
var w2 = width / 2;
var h2 = height / 2;
var rect = new Rectangle(0, 0, width, height)
.noStroke();
rect.fill = 'black';
applySvgAttributes.call(this, node, rect, parentStyles);
// For rectangles, (x, y) is the center of the shape rather than the top
// left corner.
rect.translation.x += w2;
rect.translation.y += h2;
return rect;
},
'rounded-rect': function(node, parentStyles) {
var rx = parseFloat(node.getAttribute('rx')) || 0;
var ry = parseFloat(node.getAttribute('ry')) || 0;
var width = parseFloat(node.getAttribute('width'));
var height = parseFloat(node.getAttribute('height'));
var w2 = width / 2;
var h2 = height / 2;
var radius = new Vector(rx, ry);
var rect = new RoundedRectangle(0, 0, width, height, radius)
.noStroke();
rect.fill = 'black';
applySvgAttributes.call(this, node, rect, parentStyles);
// For rectangles, (x, y) is the center of the shape rather than the top
// left corner.
rect.translation.x += w2;
rect.translation.y += h2;
return rect;
},
line: function(node, parentStyles) {
var x1 = parseFloat(node.getAttribute('x1'));
var y1 = parseFloat(node.getAttribute('y1'));
var x2 = parseFloat(node.getAttribute('x2'));
var y2 = parseFloat(node.getAttribute('y2'));
var line = new Line(x1, y1, x2, y2).noFill();
applySvgAttributes.call(this, node, line, parentStyles);
return line;
},
lineargradient: function(node, parentStyles) {
var x1 = parseFloat(node.getAttribute('x1'));
var y1 = parseFloat(node.getAttribute('y1'));
var x2 = parseFloat(node.getAttribute('x2'));
var y2 = parseFloat(node.getAttribute('y2'));
var ox = (x2 + x1) / 2;
var oy = (y2 + y1) / 2;
var stops = [];
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
var offset = child.getAttribute('offset');
if (/%/ig.test(offset)) {
offset = parseFloat(offset.replace(/%/ig, '')) / 100;
}
offset = parseFloat(offset);
var color = child.getAttribute('stop-color');
var opacity = child.getAttribute('stop-opacity');
var style = child.getAttribute('style');
var matches;
if (color === null) {
matches = style ? style.match(/stop-color:\s?([#a-fA-F0-9]*)/) : false;
color = matches && matches.length > 1 ? matches[1] : undefined;
}
if (opacity === null) {
matches = style ? style.match(/stop-opacity:\s?([0-9.-]*)/) : false;
opacity = matches && matches.length > 1 ? parseFloat(matches[1]) : 1;
} else {
opacity = parseFloat(opacity);
}
stops.push(new Stop(offset, color, opacity));
}
var gradient = new LinearGradient(x1 - ox, y1 - oy, x2 - ox,
y2 - oy, stops);
applySvgAttributes.call(this, node, gradient, parentStyles);
return gradient;
},
radialgradient: function(node, parentStyles) {
var cx = parseFloat(node.getAttribute('cx')) || 0;
var cy = parseFloat(node.getAttribute('cy')) || 0;
var r = parseFloat(node.getAttribute('r'));
var fx = parseFloat(node.getAttribute('fx'));
var fy = parseFloat(node.getAttribute('fy'));
if (_.isNaN(fx)) {
fx = cx;
}
if (_.isNaN(fy)) {
fy = cy;
}
var ox = Math.abs(cx + fx) / 2;
var oy = Math.abs(cy + fy) / 2;
var stops = [];
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
var offset = child.getAttribute('offset');
if (/%/ig.test(offset)) {
offset = parseFloat(offset.replace(/%/ig, '')) / 100;
}
offset = parseFloat(offset);
var color = child.getAttribute('stop-color');
var opacity = child.getAttribute('stop-opacity');
var style = child.getAttribute('style');
var matches;
if (color === null) {
matches = style ? style.match(/stop-color:\s?([#a-fA-F0-9]*)/) : false;
color = matches && matches.length > 1 ? matches[1] : undefined;
}
if (opacity === null) {
matches = style ? style.match(/stop-opacity:\s?([0-9.-]*)/) : false;
opacity = matches && matches.length > 1 ? parseFloat(matches[1]) : 1;
} else {
opacity = parseFloat(opacity);
}
stops.push(new Stop(offset, color, opacity));
}
var gradient = new RadialGradient(cx - ox, cy - oy, r,
stops, fx - ox, fy - oy);
applySvgAttributes.call(this, node, gradient, parentStyles);
return gradient;
},
text: function(node, parentStyles) {
var alignment = getAlignment(node.getAttribute('text-anchor')) || 'left';
var baseline = getBaseline(node) || 'baseline';
var message = node.textContent;
var text = new Text(message);
applySvgAttributes.call(this, node, text, parentStyles);
text.alignment = alignment;
text.baseline = baseline;
return text;
},
clippath: function(node, parentStyles) {
if (read.defs.current && !read.defs.current.contains(node.id)) {
read.defs.current.add(node.id, node);
}
return null;
},
image: function(node, parentStyles) {
var href = node.getAttribute('href') || node.getAttribute('xlink:href');
if (!href) {
var error = new TwoError('encountered with no href.');
console.warn(error.name, error.message);
return null;
}
var x = parseFloat(node.getAttribute('x')) || 0;
var y = parseFloat(node.getAttribute('y')) || 0;
var width = parseFloat(node.getAttribute('width'));
var height = parseFloat(node.getAttribute('height'));
var sprite = new Sprite(href, x, y);
if (!_.isNaN(width)) {
sprite.width = width;
}
if (!_.isNaN(height)) {
sprite.height = height;
}
applySvgAttributes.call(this, node, sprite, parentStyles);
return sprite;
}
};
/**
* @name Two.Utils.xhr
* @function
* @param {String} path
* @param {Function} callback
* @returns {XMLHttpRequest} The constructed and called XHR request.
* @description Canonical method to initiate `GET` requests in the browser. Mainly used by {@link Two#load} method.
*/
function xhr(path, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', path);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.send();
return xhr;
}
/**
* @name Two.ImageSequence
* @class
* @extends Two.Rectangle
* @param {String|String[]|Two.Texture|Two.Texture[]} paths - A list of URLs or {@link Two.Texture}s.
* @param {Number} [ox=0] - The initial `x` position of the Two.ImageSequence.
* @param {Number} [oy=0] - The initial `y` position of the Two.ImageSequence.
* @param {Number} [frameRate=30] - The frame rate at which the images should playback at.
* @description A convenient package to display still or animated images organized as a series of still images.
*/
function ImageSequence(paths, ox, oy, frameRate) {
// Not using default constructor of Rectangle due to odd `beginning` / `ending` behavior.
// See: https://github.com/jonobr1/two.js/issues/383
Path.call(this, [
new Anchor(),
new Anchor(),
new Anchor(),
new Anchor()
], true);
this._renderer.flagTextures = ImageSequence.FlagTextures.bind(this);
this._renderer.bindTextures = ImageSequence.BindTextures.bind(this);
this._renderer.unbindTextures = ImageSequence.UnbindTextures.bind(this);
this.noStroke();
this.noFill();
/**
* @name Two.ImageSequence#textures
* @property {Two.Texture[]} - A list of textures to be used as frames for animating the {@link Two.ImageSequence}.
*/
if (Array.isArray(paths)) {
this.textures = paths.map(ImageSequence.GenerateTexture.bind(this));
} else {
// If just a single path convert into a single Two.Texture
this.textures = [ImageSequence.GenerateTexture(paths)];
}
this.origin = new Vector();
this._update();
this.translation.set(ox || 0, oy || 0);
/**
* @name Two.ImageSequence#frameRate
* @property {Number} - The number of frames to animate against per second.
*/
if (typeof frameRate === 'number') {
this.frameRate = frameRate;
} else {
this.frameRate = ImageSequence.DefaultFrameRate;
}
/**
* @name Two.ImageSequence#index
* @property {Number} - The index of the current tile of the sprite to display. Defaults to `0`.
*/
this.index = 0;
}
_.extend(ImageSequence, {
/**
* @name Two.ImageSequence.Properties
* @property {String[]} - A list of properties that are on every {@link Two.ImageSequence}.
*/
Properties: [
'frameRate',
'index'
],
/**
* @name Two.ImageSequence.DefaultFrameRate
* @property The default frame rate that {@link Two.ImageSequence#frameRate} is set to when instantiated.
*/
DefaultFrameRate: 30,
/**
* @name Two.ImageSequence.FlagTextures
* @function
* @description Cached method to let renderers know textures have been updated on a {@link Two.ImageSequence}.
*/
FlagTextures: function() {
this._flagTextures = true;
},
/**
* @name Two.ImageSequence.BindTextures
* @function
* @description Cached method to let {@link Two.ImageSequence} know textures have been added to the instance.
*/
BindTextures: function(items) {
var i = items.length;
while (i--) {
items[i].bind(Events.Types.change, this._renderer.flagTextures);
}
this._renderer.flagTextures();
},
/**
* @name Two.ImageSequence.UnbindVertices
* @function
* @description Cached method to let {@link Two.ImageSequence} know textures have been removed from the instance.
*/
UnbindTextures: function(items) {
var i = items.length;
while (i--) {
items[i].unbind(Events.Types.change, this._renderer.flagTextures);
}
this._renderer.flagTextures();
},
/**
* @name Two.ImageSequence.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.ImageSequence} to any object. Handy if you'd like to extend or inherit the {@link Two.ImageSequence} class on a custom class.
*/
MakeObservable: function(obj) {
Rectangle.MakeObservable(obj);
_.each(ImageSequence.Properties, defineGetterSetter, obj);
Object.defineProperty(obj, 'textures', {
enumerable: true,
get: function() {
return this._textures;
},
set: function(textures) {
var bindTextures = this._renderer.bindTextures;
var unbindTextures = this._renderer.unbindTextures;
// Remove previous listeners
if (this._textures) {
this._textures
.unbind(Events.Types.insert, bindTextures)
.unbind(Events.Types.remove, unbindTextures);
}
// Create new Collection with copy of vertices
this._textures = new Collection((textures || []).slice(0));
// Listen for Collection changes and bind / unbind
this._textures
.bind(Events.Types.insert, bindTextures)
.bind(Events.Types.remove, unbindTextures);
// Bind Initial Textures
bindTextures(this._textures);
}
});
},
/**
* @name Two.ImageSequence.GenerateTexture
* @property {Function} - Shorthand function to prepare source image material into readable format by {@link Two.ImageSequence}.
* @param {String|Two.Texture} textureOrString - The texture or string to create a {@link Two.Texture} from.
* @description Function used internally by {@link Two.ImageSequence} to parse arguments and return {@link Two.Texture}s.
* @returns {Two.Texture}
*/
GenerateTexture: function(obj) {
if (obj instanceof Texture) {
return obj;
} else if (typeof obj === 'string') {
return new Texture(obj);
}
}
});
_.extend(ImageSequence.prototype, Rectangle.prototype, {
constructor: ImageSequence,
/**
* @name Two.ImageSequence#_flagTextures
* @private
* @property {Boolean} - Determines whether the {@link Two.ImageSequence#textures} need updating.
*/
_flagTextures: false,
/**
* @name Two.ImageSequence#_flagFrameRate
* @private
* @property {Boolean} - Determines whether the {@link Two.ImageSequence#frameRate} needs updating.
*/
_flagFrameRate: false,
/**
* @name Two.ImageSequence#_flagIndex
* @private
* @property {Boolean} - Determines whether the {@link Two.ImageSequence#index} needs updating.
*/
_flagIndex: false,
// Private variables
/**
* @name Two.ImageSequence#_amount
* @private
* @property {Number} - Number of frames for a given {@link Two.ImageSequence}.
*/
_amount: 1,
/**
* @name Two.ImageSequence#_duration
* @private
* @property {Number} - Number of milliseconds a {@link Two.ImageSequence}.
*/
_duration: 0,
/**
* @name Two.ImageSequence#_index
* @private
* @property {Number} - The current frame the {@link Two.ImageSequence} is currently displaying.
*/
_index: 0,
/**
* @name Two.ImageSequence#_startTime
* @private
* @property {Milliseconds} - Epoch time in milliseconds of when the {@link Two.ImageSequence} started.
*/
_startTime: 0,
/**
* @name Two.ImageSequence#_playing
* @private
* @property {Boolean} - Dictates whether the {@link Two.ImageSequence} is animating or not.
*/
_playing: false,
/**
* @name Two.ImageSequence#_firstFrame
* @private
* @property {Number} - The frame the {@link Two.ImageSequence} should start with.
*/
_firstFrame: 0,
/**
* @name Two.ImageSequence#_lastFrame
* @private
* @property {Number} - The frame the {@link Two.ImageSequence} should end with.
*/
_lastFrame: 0,
/**
* @name Two.ImageSequence#_playing
* @private
* @property {Boolean} - Dictates whether the {@link Two.ImageSequence} should loop or not.
*/
_loop: true,
// Exposed through getter-setter
/**
* @name Two.ImageSequence#_textures
* @private
* @see {@link Two.ImageSequence#textures}
*/
_textures: null,
/**
* @name Two.ImageSequence#_frameRate
* @private
* @see {@link Two.ImageSequence#frameRate}
*/
_frameRate: 0,
/**
* @name Two.ImageSequence#_origin
* @private
* @see {@link Two.ImageSequence#origin}
*/
_origin: null,
/**
* @name Two.ImageSequence#play
* @function
* @param {Number} [firstFrame=0] - The index of the frame to start the animation with.
* @param {Number} [lastFrame] - The index of the frame to end the animation with. Defaults to the last item in the {@link Two.ImageSequence#textures}.
* @param {Function} [onLastFrame] - Optional callback function to be triggered after playing the last frame. This fires multiple times when the image sequence is looped.
* @description Initiate animation playback of a {@link Two.ImageSequence}.
*/
play: function(firstFrame, lastFrame, onLastFrame) {
this._playing = true;
this._firstFrame = 0;
this._lastFrame = this.amount - 1;
this._startTime = _.performance.now();
if (typeof firstFrame === 'number') {
this._firstFrame = firstFrame;
}
if (typeof lastFrame === 'number') {
this._lastFrame = lastFrame;
}
if (typeof onLastFrame === 'function') {
this._onLastFrame = onLastFrame;
} else {
delete this._onLastFrame;
}
if (this._index !== this._firstFrame) {
this._startTime -= 1000 * Math.abs(this._index - this._firstFrame)
/ this._frameRate;
}
return this;
},
/**
* @name Two.ImageSequence#pause
* @function
* @description Halt animation playback of a {@link Two.ImageSequence}.
*/
pause: function() {
this._playing = false;
return this;
},
/**
* @name Two.ImageSequence#stop
* @function
* @description Halt animation playback of a {@link Two.ImageSequence} and set the current frame back to the first frame.
*/
stop: function() {
this._playing = false;
this._index = this._firstFrame;
return this;
},
/**
* @name Two.ImageSequence#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.ImageSequence}
* @description Create a new instance of {@link Two.ImageSequence} with the same properties of the current image sequence.
*/
clone: function(parent) {
var clone = new ImageSequence(this.textures, this.translation.x,
this.translation.y, this.frameRate);
clone._loop = this._loop;
if (this._playing) {
clone.play();
}
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.ImageSequence#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Rectangle.prototype.toObject.call(this);
object.textures = this.textures.map(function(texture) {
return texture.toObject();
});
object.frameRate = this.frameRate;
object.index = this.index;
object._firstFrame = this._firstFrame;
object._lastFrame = this._lastFrame;
object._loop = this._loop;
return object;
},
/**
* @name Two.ImageSequence#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
var effects = this._textures;
var width, height, elapsed, amount, duration, texture;
var index, frames;
if (this._flagTextures) {
this._amount = effects.length;
}
if (this._flagFrameRate) {
this._duration = 1000 * this._amount / this._frameRate;
}
if (this._playing && this._frameRate > 0) {
amount = this._amount;
if (_.isNaN(this._lastFrame)) {
this._lastFrame = amount - 1;
}
// TODO: Offload perf logic to instance of `Two`.
elapsed = _.performance.now() - this._startTime;
frames = this._lastFrame + 1;
duration = 1000 * (frames - this._firstFrame) / this._frameRate;
if (this._loop) {
elapsed = elapsed % duration;
} else {
elapsed = Math.min(elapsed, duration);
}
index = lerp(this._firstFrame, frames, elapsed / duration);
index = Math.floor(index);
if (index !== this._index) {
this._index = index;
texture = effects[this._index];
if (texture.loaded) {
width = texture.image.width;
height = texture.image.height;
if (this.width !== width) {
this.width = width;
}
if (this.height !== height) {
this.height = height;
}
this.fill = texture;
if (index >= this._lastFrame - 1 && this._onLastFrame) {
this._onLastFrame(); // Shortcut for chainable sprite animations
}
}
}
} else if (this._flagIndex || !(this.fill instanceof Texture)) {
texture = effects[this._index];
if (texture.loaded) {
width = texture.image.width;
height = texture.image.height;
if (this.width !== width) {
this.width = width;
}
if (this.height !== height) {
this.height = height;
}
}
this.fill = texture;
}
Rectangle.prototype._update.call(this);
return this;
},
/**
* @name Two.ImageSequence#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagTextures = this._flagFrameRate = false;
Rectangle.prototype.flagReset.call(this);
return this;
}
});
ImageSequence.MakeObservable(ImageSequence.prototype);
var TWO_PI$2 = Math.PI * 2, HALF_PI = Math.PI / 2;
/**
* @name Two.ArcSegment
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the arc segment.
* @param {Number} [y=0] - The y position of the arc segment.
* @param {Number} [innerRadius=0] - The inner radius value of the arc segment.
* @param {Number} [outerRadius=0] - The outer radius value of the arc segment.
* @param {Number} [startAngle=0] - The start angle of the arc segment in Number.
* @param {Number} [endAngle=6.2831] - The end angle of the arc segment in Number.
* @param {Number} [resolution=24] - The number of vertices used to construct the arc segment.
*/
function ArcSegment(ox, oy, ir, or, sa, ea, res) {
var amount = res || (Constants.Resolution * 3);
var points = [];
for (var i = 0; i < amount; i++) {
points.push(new Anchor());
}
Path.call(this, points, true, false, true);
/**
* @name Two.ArcSegment#innerRadius
* @property {Number} - The size of the inner radius of the arc segment.
*/
if (typeof ir === 'number') {
this.innerRadius = ir;
}
/**
* @name Two.ArcSegment#outerRadius
* @property {Number} - The size of the outer radius of the arc segment.
*/
if (typeof or === 'number') {
this.outerRadius = or;
}
/**
* @name Two.ArcSegment#startRadius
* @property {Number} - The angle of one side for the arc segment.
*/
if (typeof sa === 'number') {
this.startAngle = sa;
}
/**
* @name Two.ArcSegment#endAngle
* @property {Number} - The angle of the other side for the arc segment.
*/
if (typeof ea === 'number') {
this.endAngle = ea;
}
this._update();
if (typeof ox === 'number') {
this.translation.x = ox;
}
if (typeof oy === 'number') {
this.translation.y = oy;
}
}
_.extend(ArcSegment, {
/**
* @name Two.ArcSegment.Properties
* @property {String[]} - A list of properties that are on every {@link Two.ArcSegment}.
*/
Properties: ['startAngle', 'endAngle', 'innerRadius', 'outerRadius'],
/**
* @name Two.ArcSegment.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.ArcSegment} to any object. Handy if you'd like to extend the {@link Two.ArcSegment} class on a custom class.
*/
MakeObservable: function(obj) {
Path.MakeObservable(obj);
_.each(ArcSegment.Properties, defineGetterSetter, obj);
}
});
_.extend(ArcSegment.prototype, Path.prototype, {
constructor: ArcSegment,
/**
* @name Two.ArcSegment#_flagStartAngle
* @private
* @property {Boolean} - Determines whether the {@link Two.ArcSegment#startAngle} needs updating.
*/
_flagStartAngle: false,
/**
* @name Two.ArcSegment#_flagEndAngle
* @private
* @property {Boolean} - Determines whether the {@link Two.ArcSegment#endAngle} needs updating.
*/
_flagEndAngle: false,
/**
* @name Two.ArcSegment#_flagInnerRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.ArcSegment#innerRadius} needs updating.
*/
_flagInnerRadius: false,
/**
* @name Two.ArcSegment#_flagOuterRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.ArcSegment#outerRadius} needs updating.
*/
_flagOuterRadius: false,
/**
* @name Two.ArcSegment#_startAngle
* @private
* @see {@link Two.ArcSegment#startAngle}
*/
_startAngle: 0,
/**
* @name Two.ArcSegment#_endAngle
* @private
* @see {@link Two.ArcSegment#endAngle}
*/
_endAngle: TWO_PI$2,
/**
* @name Two.ArcSegment#_innerRadius
* @private
* @see {@link Two.ArcSegment#innerRadius}
*/
_innerRadius: 0,
/**
* @name Two.ArcSegment#_outerRadius
* @private
* @see {@link Two.ArcSegment#outerRadius}
*/
_outerRadius: 0,
/**
* @name Two.ArcSegment#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagStartAngle || this._flagEndAngle
|| this._flagInnerRadius || this._flagOuterRadius) {
var sa = this._startAngle;
var ea = this._endAngle;
var ir = this._innerRadius;
var or = this._outerRadius;
var connected = mod(sa, TWO_PI$2) === mod(ea, TWO_PI$2);
var punctured = ir > 0;
var vertices = this.vertices;
var length = (punctured ? vertices.length / 2 : vertices.length);
var command, id = 0;
if (connected) {
length--;
} else if (!punctured) {
length -= 2;
}
/**
* Outer Circle
*/
for (var i = 0, last = length - 1; i < length; i++) {
var pct = i / last;
var v = vertices[id];
var theta = pct * (ea - sa) + sa;
var step = (ea - sa) / length;
var x = or * Math.cos(theta);
var y = or * Math.sin(theta);
switch (i) {
case 0:
command = Commands.move;
break;
default:
command = Commands.curve;
}
v.command = command;
v.x = x;
v.y = y;
v.controls.left.clear();
v.controls.right.clear();
if (v.command === Commands.curve) {
var amp = or * step / Math.PI;
v.controls.left.x = amp * Math.cos(theta - HALF_PI);
v.controls.left.y = amp * Math.sin(theta - HALF_PI);
v.controls.right.x = amp * Math.cos(theta + HALF_PI);
v.controls.right.y = amp * Math.sin(theta + HALF_PI);
if (i === 1) {
v.controls.left.multiplyScalar(2);
}
if (i === last) {
v.controls.right.multiplyScalar(2);
}
}
id++;
}
if (punctured) {
if (connected) {
vertices[id].command = Commands.close;
id++;
} else {
length--;
last = length - 1;
}
/**
* Inner Circle
*/
for (i = 0; i < length; i++) {
pct = i / last;
v = vertices[id];
theta = (1 - pct) * (ea - sa) + sa;
step = (ea - sa) / length;
x = ir * Math.cos(theta);
y = ir * Math.sin(theta);
command = Commands.curve;
if (i <= 0) {
command = connected ? Commands.move : Commands.line;
}
v.command = command;
v.x = x;
v.y = y;
v.controls.left.clear();
v.controls.right.clear();
if (v.command === Commands.curve) {
amp = ir * step / Math.PI;
v.controls.left.x = amp * Math.cos(theta + HALF_PI);
v.controls.left.y = amp * Math.sin(theta + HALF_PI);
v.controls.right.x = amp * Math.cos(theta - HALF_PI);
v.controls.right.y = amp * Math.sin(theta - HALF_PI);
if (i === 1) {
v.controls.left.multiplyScalar(2);
}
if (i === last) {
v.controls.right.multiplyScalar(2);
}
}
id++;
}
// Final Point
vertices[id].copy(vertices[0]);
vertices[id].command = Commands.line;
} else if (!connected) {
vertices[id].command = Commands.line;
vertices[id].x = 0;
vertices[id].y = 0;
id++;
// Final Point
vertices[id].copy(vertices[0]);
vertices[id].command = Commands.line;
}
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.ArcSegment#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
Path.prototype.flagReset.call(this);
this._flagStartAngle = this._flagEndAngle
= this._flagInnerRadius = this._flagOuterRadius = false;
return this;
},
/**
* @name Two.ArcSegment#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.ArcSegment}
* @description Create a new instance of {@link Two.ArcSegment} with the same properties of the current path.
*/
clone: function(parent) {
var ir = this.innerRadius;
var or = this.outerRadius;
var sa = this.startAngle;
var ea = this.endAngle;
var resolution = this.vertices.length;
var clone = new ArcSegment(0, 0, ir, or, sa, ea, resolution);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.ArcSegment#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
_.each(ArcSegment.Properties, function(property) {
object[property] = this[property];
}, this);
return object;
}
});
ArcSegment.MakeObservable(ArcSegment.prototype);
var TWO_PI$1 = Math.PI * 2, cos$1 = Math.cos, sin$1 = Math.sin;
/**
* @name Two.Polygon
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the polygon.
* @param {Number} [y=0] - The y position of the polygon.
* @param {Number} [radius=0] - The radius value of the polygon.
* @param {Number} [sides=12] - The number of vertices used to construct the polygon.
*/
function Polygon(ox, oy, r, sides) {
sides = Math.max(sides || 0, 3);
Path.call(this);
this.closed = true;
this.automatic = false;
/**
* @name Two.Polygon#width
* @property {Number} - The size of the width of the polygon.
*/
if (typeof r === 'number') {
this.width = r * 2;
}
/**
* @name Two.Polygon#height
* @property {Number} - The size of the height of the polygon.
*/
if (typeof r === 'number') {
this.height = r * 2;
}
/**
* @name Two.Polygon#sides
* @property {Number} - The amount of sides the polyogn has.
*/
if (typeof sides === 'number') {
this.sides = sides;
}
this._update();
if (typeof ox === 'number') {
this.translation.x = ox;
}
if (typeof oy === 'number') {
this.translation.y = oy;
}
}
_.extend(Polygon, {
/**
* @name Two.Polygon.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Polygon}.
*/
Properties: ['width', 'height', 'sides'],
/**
* @name Two.Polygon.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Polygon} to any object. Handy if you'd like to extend the {@link Two.Polygon} class on a custom class.
*/
MakeObservable: function(obj) {
Path.MakeObservable(obj);
_.each(Polygon.Properties, defineGetterSetter, obj);
}
});
_.extend(Polygon.prototype, Path.prototype, {
constructor: Polygon,
/**
* @name Two.Polygon#_flagWidth
* @private
* @property {Boolean} - Determines whether the {@link Two.Polygon#width} needs updating.
*/
_flagWidth: false,
/**
* @name Two.Polygon#_flagHeight
* @private
* @property {Boolean} - Determines whether the {@link Two.Polygon#height} needs updating.
*/
_flagHeight: false,
/**
* @name Two.Polygon#_flagSides
* @private
* @property {Boolean} - Determines whether the {@link Two.Polygon#sides} needs updating.
*/
_flagSides: false,
/**
* @name Two.Polygon#_width
* @private
* @see {@link Two.Polygon#width}
*/
_width: 0,
/**
* @name Two.Polygon#_height
* @private
* @see {@link Two.Polygon#height}
*/
_height: 0,
/**
* @name Two.Polygon#_sides
* @private
* @see {@link Two.Polygon#sides}
*/
_sides: 0,
/**
* @name Two.Polygon#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagWidth || this._flagHeight || this._flagSides) {
var sides = this._sides;
var amount = sides + 1;
var length = this.vertices.length;
if (length > sides) {
this.vertices.splice(sides - 1, length - sides);
length = sides;
}
for (var i = 0; i < amount; i++) {
var pct = (i + 0.5) / sides;
var theta = TWO_PI$1 * pct + Math.PI / 2;
var x = this._width * cos$1(theta) / 2;
var y = this._height * sin$1(theta) / 2;
if (i >= length) {
this.vertices.push(new Anchor(x, y));
} else {
this.vertices[i].set(x, y);
}
this.vertices[i].command = i === 0 ? Commands.move : Commands.line;
}
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.Polygon#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagWidth = this._flagHeight = this._flagSides = false;
Path.prototype.flagReset.call(this);
return this;
},
/**
* @name Two.Polygon#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Polygon}
* @description Create a new instance of {@link Two.Polygon} with the same properties of the current path.
*/
clone: function(parent) {
var clone = new Polygon(0, 0, this.radius, this.sides);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Polygon#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
_.each(Polygon.Properties, function(property) {
object[property] = this[property];
}, this);
return object;
}
});
Polygon.MakeObservable(Polygon.prototype);
var TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
/**
* @name Two.Star
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the star.
* @param {Number} [y=0] - The y position of the star.
* @param {Number} [innerRadius=0] - The inner radius value of the star.
* @param {Number} [outerRadius=0] - The outer radius value of the star.
* @param {Number} [sides=5] - The number of sides used to construct the star.
*/
function Star(ox, oy, ir, or, sides) {
if (arguments.length <= 3) {
or = ir;
ir = or / 2;
}
if (typeof sides !== 'number' || sides <= 0) {
sides = 5;
}
Path.call(this);
this.closed = true;
this.automatic = false;
/**
* @name Two.Star#innerRadius
* @property {Number} - The size of the inner radius of the star.
*/
if (typeof ir === 'number') {
this.innerRadius = ir;
}
/**
* @name Two.Star#outerRadius
* @property {Number} - The size of the outer radius of the star.
*/
if (typeof or === 'number') {
this.outerRadius = or;
}
/**
* @name Two.Star#sides
* @property {Number} - The amount of sides the star has.
*/
if (typeof sides === 'number') {
this.sides = sides;
}
this._update();
if (typeof ox === 'number') {
this.translation.x = ox;
}
if (typeof oy === 'number') {
this.translation.y = oy;
}
}
_.extend(Star, {
/**
* @name Two.Star.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Star}.
*/
Properties: ['innerRadius', 'outerRadius', 'sides'],
/**
* @name Two.Star.MakeObservable
* @function
* @param {Object} object - The object to make observable.
* @description Convenience function to apply observable qualities of a {@link Two.Star} to any object. Handy if you'd like to extend the {@link Two.Star} class on a custom class.
*/
MakeObservable: function(obj) {
Path.MakeObservable(obj);
_.each(Star.Properties, defineGetterSetter, obj);
}
});
_.extend(Star.prototype, Path.prototype, {
constructor: Star,
/**
* @name Two.Star#_flagInnerRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.Star#innerRadius} needs updating.
*/
_flagInnerRadius: false,
/**
* @name Two.Star#_flagOuterRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.Star#outerRadius} needs updating.
*/
_flagOuterRadius: false,
/**
* @name Two.Star#_flagSides
* @private
* @property {Boolean} - Determines whether the {@link Two.Star#sides} needs updating.
*/
_flagSides: false,
/**
* @name Two.Star#_innerRadius
* @private
* @see {@link Two.Star#innerRadius}
*/
_innerRadius: 0,
/**
* @name Two.Star#_outerRadius
* @private
* @see {@link Two.Star#outerRadius}
*/
_outerRadius: 0,
/**
* @name Two.Star#_sides
* @private
* @see {@link Two.Star#sides}
*/
_sides: 0,
/**
* @name Two.Star#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update: function() {
if (this._flagVertices || this._flagInnerRadius || this._flagOuterRadius || this._flagSides) {
var sides = this._sides * 2;
var amount = sides + 1;
var length = this.vertices.length;
if (length > sides) {
this.vertices.splice(sides - 1, length - sides);
length = sides;
}
for (var i = 0; i < amount; i++) {
var pct = (i + 0.5) / sides;
var theta = TWO_PI * pct;
var r = (!(i % 2) ? this._innerRadius : this._outerRadius) / 2;
var x = r * cos(theta);
var y = r * sin(theta);
if (i >= length) {
this.vertices.push(new Anchor(x, y));
} else {
this.vertices[i].set(x, y);
}
this.vertices[i].command = i === 0 ? Commands.move : Commands.line;
}
}
Path.prototype._update.call(this);
return this;
},
/**
* @name Two.Star#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset: function() {
this._flagInnerRadius = this._flagOuterRadius = this._flagSides = false;
Path.prototype.flagReset.call(this);
return this;
},
/**
* @name Two.Star#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Star}
* @description Create a new instance of {@link Two.Star} with the same properties of the current path.
*/
clone: function(parent) {
var ir = this.innerRadius;
var or = this.outerRadius;
var sides = this.sides;
var clone = new Star(0, 0, ir, or, sides);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
_.each(Path.Properties, function(k) {
clone[k] = this[k];
}, this);
if (parent) {
parent.add(clone);
}
return clone;
},
/**
* @name Two.Star#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject: function() {
var object = Path.prototype.toObject.call(this);
_.each(Star.Properties, function(property) {
object[property] = this[property];
}, this);
return object;
}
});
Star.MakeObservable(Star.prototype);
var svg = {
version: 1.1,
ns: 'http://www.w3.org/2000/svg',
xlink: 'http://www.w3.org/1999/xlink',
alignments: {
left: 'start',
center: 'middle',
right: 'end'
},
// Create an svg namespaced element.
createElement: function(name, attrs) {
var tag = name;
var elem = document.createElementNS(svg.ns, tag);
if (tag === 'svg') {
attrs = _.defaults(attrs || {}, {
version: svg.version
});
}
if (attrs && Object.keys(attrs).length > 0) {
svg.setAttributes(elem, attrs);
}
return elem;
},
// Add attributes from an svg element.
setAttributes: function(elem, attrs) {
var keys = Object.keys(attrs);
for (var i = 0; i < keys.length; i++) {
if (/href/.test(keys[i])) {
elem.setAttributeNS(svg.xlink, keys[i], attrs[keys[i]]);
} else {
elem.setAttribute(keys[i], attrs[keys[i]]);
}
}
return this;
},
// Remove attributes from an svg element.
removeAttributes: function(elem, attrs) {
for (var key in attrs) {
elem.removeAttribute(key);
}
return this;
},
// Turn a set of vertices into a string for the d property of a path
// element. It is imperative that the string collation is as fast as
// possible, because this call will be happening multiple times a
// second.
toString: function(points, closed) {
var l = points.length,
last = l - 1,
d, // The elusive last Commands.move point
string = '';
for (var i = 0; i < l; i++) {
var b = points[i];
var command;
var prev = closed ? mod(i - 1, l) : Math.max(i - 1, 0);
var next = closed ? mod(i + 1, l) : Math.min(i + 1, last);
var a = points[prev];
var c = points[next];
var vx, vy, ux, uy, ar, bl, br, cl;
var rx, ry, xAxisRotation, largeArcFlag, sweepFlag;
// Access x and y directly,
// bypassing the getter
var x = toFixed(b.x);
var y = toFixed(b.y);
switch (b.command) {
case Commands.close:
command = Commands.close;
break;
case Commands.arc:
rx = b.rx;
ry = b.ry;
xAxisRotation = b.xAxisRotation;
largeArcFlag = b.largeArcFlag;
sweepFlag = b.sweepFlag;
command = Commands.arc + ' ' + rx + ' ' + ry + ' '
+ xAxisRotation + ' ' + largeArcFlag + ' ' + sweepFlag + ' '
+ x + ' ' + y;
break;
case Commands.curve:
ar = (a.controls && a.controls.right) || Vector.zero;
bl = (b.controls && b.controls.left) || Vector.zero;
if (a.relative) {
vx = toFixed((ar.x + a.x));
vy = toFixed((ar.y + a.y));
} else {
vx = toFixed(ar.x);
vy = toFixed(ar.y);
}
if (b.relative) {
ux = toFixed((bl.x + b.x));
uy = toFixed((bl.y + b.y));
} else {
ux = toFixed(bl.x);
uy = toFixed(bl.y);
}
command = ((i === 0) ? Commands.move : Commands.curve) +
' ' + vx + ' ' + vy + ' ' + ux + ' ' + uy + ' ' + x + ' ' + y;
break;
case Commands.move:
d = b;
command = Commands.move + ' ' + x + ' ' + y;
break;
default:
command = b.command + ' ' + x + ' ' + y;
}
// Add a final point and close it off
if (i >= last && closed) {
if (b.command === Commands.curve) {
// Make sure we close to the most previous Commands.move
c = d;
br = (b.controls && b.controls.right) || b;
cl = (c.controls && c.controls.left) || c;
if (b.relative) {
vx = toFixed((br.x + b.x));
vy = toFixed((br.y + b.y));
} else {
vx = toFixed(br.x);
vy = toFixed(br.y);
}
if (c.relative) {
ux = toFixed((cl.x + c.x));
uy = toFixed((cl.y + c.y));
} else {
ux = toFixed(cl.x);
uy = toFixed(cl.y);
}
x = toFixed(c.x);
y = toFixed(c.y);
command +=
' C ' + vx + ' ' + vy + ' ' + ux + ' ' + uy + ' ' + x + ' ' + y;
}
if (b.command !== Commands.close) {
command += ' Z';
}
}
string += command + ' ';
}
return string;
},
getClip: function(shape, domElement) {
var clip = shape._renderer.clip;
if (!clip) {
clip = shape._renderer.clip = svg.createElement('clipPath', {
'clip-rule': 'nonzero'
});
domElement.defs.appendChild(clip);
}
return clip;
},
group: {
// TODO: Can speed up.
// TODO: How does this effect a f
appendChild: function(object) {
var elem = object._renderer.elem;
if (!elem) {
return;
}
var tag = elem.nodeName;
if (!tag || /(radial|linear)gradient/i.test(tag) || object._clip) {
return;
}
this.elem.appendChild(elem);
},
removeChild: function(object) {
var elem = object._renderer.elem;
if (!elem || elem.parentNode != this.elem) {
return;
}
var tag = elem.nodeName;
if (!tag) {
return;
}
// Defer subtractions while clipping.
if (object._clip) {
return;
}
this.elem.removeChild(elem);
},
orderChild: function(object) {
this.elem.appendChild(object._renderer.elem);
},
renderChild: function(child) {
svg[child._renderer.type].render.call(child, this);
},
render: function(domElement) {
// Shortcut for hidden objects.
// Doesn't reset the flags, so changes are stored and
// applied once the object is visible again
if ((!this._visible && !this._flagVisible)
|| (this._opacity === 0 && !this._flagOpacity)) {
return this;
}
this._update();
if (!this._renderer.elem) {
this._renderer.elem = svg.createElement('g', {
id: this.id
});
domElement.appendChild(this._renderer.elem);
}
// _Update styles for the
var flagMatrix = this._matrix.manual || this._flagMatrix;
var context = {
domElement: domElement,
elem: this._renderer.elem
};
if (flagMatrix) {
this._renderer.elem.setAttribute('transform', 'matrix(' + this._matrix.toString() + ')');
}
for (var i = 0; i < this.children.length; i++) {
var child = this.children[i];
svg[child._renderer.type].render.call(child, domElement);
}
if (this._flagId) {
this._renderer.elem.setAttribute('id', this._id);
}
if (this._flagOpacity) {
this._renderer.elem.setAttribute('opacity', this._opacity);
}
if (this._flagVisible) {
this._renderer.elem.setAttribute('display', this._visible ? 'inline' : 'none');
}
if (this._flagClassName) {
this._renderer.elem.setAttribute('class', this.classList.join(' '));
}
if (this._flagAdditions) {
this.additions.forEach(svg.group.appendChild, context);
}
if (this._flagSubtractions) {
this.subtractions.forEach(svg.group.removeChild, context);
}
if (this._flagOrder) {
this.children.forEach(svg.group.orderChild, context);
}
// Commented two-way functionality of clips / masks with groups and
// polygons. Uncomment when this bug is fixed:
// https://code.google.com/p/chromium/issues/detail?id=370951
// if (this._flagClip) {
// clip = svg.getClip(this, domElement);
// elem = this._renderer.elem;
// if (this._clip) {
// elem.removeAttribute('id');
// clip.setAttribute('id', this.id);
// clip.appendChild(elem);
// } else {
// clip.removeAttribute('id');
// elem.setAttribute('id', this.id);
// this.parent._renderer.elem.appendChild(elem); // TODO: should be insertBefore
// }
// }
if (this._flagMask) {
if (this._mask) {
svg[this._mask._renderer.type].render.call(this._mask, domElement);
this._renderer.elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
} else {
this._renderer.elem.removeAttribute('clip-path');
}
}
return this.flagReset();
}
},
path: {
render: function(domElement) {
// Shortcut for hidden objects.
// Doesn't reset the flags, so changes are stored and
// applied once the object is visible again
if (this._opacity === 0 && !this._flagOpacity) {
return this;
}
this._update();
// Collect any attribute that needs to be changed here
var changed = {};
var flagMatrix = this._matrix.manual || this._flagMatrix;
if (flagMatrix) {
changed.transform = 'matrix(' + this._matrix.toString() + ')';
}
if (this._flagId) {
changed.id = this._id;
}
if (this._flagVertices) {
var vertices = svg.toString(this._renderer.vertices, this._closed);
changed.d = vertices;
}
if (this._fill && this._fill._renderer) {
this._fill._update();
svg[this._fill._renderer.type].render.call(this._fill, domElement, true);
}
if (this._flagFill) {
changed.fill = this._fill && this._fill.id
? 'url(#' + this._fill.id + ')' : this._fill;
}
if (this._stroke && this._stroke._renderer) {
this._stroke._update();
svg[this._stroke._renderer.type].render.call(this._stroke, domElement, true);
}
if (this._flagStroke) {
changed.stroke = this._stroke && this._stroke.id
? 'url(#' + this._stroke.id + ')' : this._stroke;
}
if (this._flagLinewidth) {
changed['stroke-width'] = this._linewidth;
}
if (this._flagOpacity) {
changed['stroke-opacity'] = this._opacity;
changed['fill-opacity'] = this._opacity;
}
if (this._flagClassName) {
changed['class'] = this.classList.join(' ');
}
if (this._flagVisible) {
changed.visibility = this._visible ? 'visible' : 'hidden';
}
if (this._flagCap) {
changed['stroke-linecap'] = this._cap;
}
if (this._flagJoin) {
changed['stroke-linejoin'] = this._join;
}
if (this._flagMiter) {
changed['stroke-miterlimit'] = this._miter;
}
if (this.dashes && this.dashes.length > 0) {
changed['stroke-dasharray'] = this.dashes.join(' ');
changed['stroke-dashoffset'] = this.dashes.offset || 0;
}
// If there is no attached DOM element yet,
// create it with all necessary attributes.
if (!this._renderer.elem) {
changed.id = this._id;
this._renderer.elem = svg.createElement('path', changed);
domElement.appendChild(this._renderer.elem);
// Otherwise apply all pending attributes
} else {
svg.setAttributes(this._renderer.elem, changed);
}
if (this._flagClip) {
var clip = svg.getClip(this, domElement);
var elem = this._renderer.elem;
if (this._clip) {
elem.removeAttribute('id');
clip.setAttribute('id', this.id);
clip.appendChild(elem);
} else {
clip.removeAttribute('id');
elem.setAttribute('id', this.id);
this.parent._renderer.elem.appendChild(elem); // TODO: should be insertBefore
}
}
// Commented two-way functionality of clips / masks with groups and
// polygons. Uncomment when this bug is fixed:
// https://code.google.com/p/chromium/issues/detail?id=370951
if (this._flagMask) {
if (this._mask) {
svg[this._mask._renderer.type].render.call(this._mask, domElement);
this._renderer.elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
} else {
this._renderer.elem.removeAttribute('clip-path');
}
}
return this.flagReset();
}
},
text: {
render: function(domElement) {
this._update();
var changed = {};
var flagMatrix = this._matrix.manual || this._flagMatrix;
if (flagMatrix) {
changed.transform = 'matrix(' + this._matrix.toString() + ')';
}
if (this._flagId) {
changed.id = this._id;
}
if (this._flagFamily) {
changed['font-family'] = this._family;
}
if (this._flagSize) {
changed['font-size'] = this._size;
}
if (this._flagLeading) {
changed['line-height'] = this._leading;
}
if (this._flagAlignment) {
changed['text-anchor'] = svg.alignments[this._alignment] || this._alignment;
}
if (this._flagBaseline) {
changed['alignment-baseline'] = changed['dominant-baseline'] = this._baseline;
}
if (this._flagStyle) {
changed['font-style'] = this._style;
}
if (this._flagWeight) {
changed['font-weight'] = this._weight;
}
if (this._flagDecoration) {
changed['text-decoration'] = this._decoration;
}
if (this._fill && this._fill._renderer) {
this._fill._update();
svg[this._fill._renderer.type].render.call(this._fill, domElement, true);
}
if (this._flagFill) {
changed.fill = this._fill && this._fill.id
? 'url(#' + this._fill.id + ')' : this._fill;
}
if (this._stroke && this._stroke._renderer) {
this._stroke._update();
svg[this._stroke._renderer.type].render.call(this._stroke, domElement, true);
}
if (this._flagStroke) {
changed.stroke = this._stroke && this._stroke.id
? 'url(#' + this._stroke.id + ')' : this._stroke;
}
if (this._flagLinewidth) {
changed['stroke-width'] = this._linewidth;
}
if (this._flagOpacity) {
changed.opacity = this._opacity;
}
if (this._flagClassName) {
changed['class'] = this.classList.join(' ');
}
if (this._flagVisible) {
changed.visibility = this._visible ? 'visible' : 'hidden';
}
if (this.dashes && this.dashes.length > 0) {
changed['stroke-dasharray'] = this.dashes.join(' ');
changed['stroke-dashoffset'] = this.dashes.offset || 0;
}
if (!this._renderer.elem) {
changed.id = this._id;
this._renderer.elem = svg.createElement('text', changed);
domElement.defs.appendChild(this._renderer.elem);
} else {
svg.setAttributes(this._renderer.elem, changed);
}
if (this._flagClip) {
var clip = svg.getClip(this, domElement);
var elem = this._renderer.elem;
if (this._clip) {
elem.removeAttribute('id');
clip.setAttribute('id', this.id);
clip.appendChild(elem);
} else {
clip.removeAttribute('id');
elem.setAttribute('id', this.id);
this.parent._renderer.elem.appendChild(elem); // TODO: should be insertBefore
}
}
// Commented two-way functionality of clips / masks with groups and
// polygons. Uncomment when this bug is fixed:
// https://code.google.com/p/chromium/issues/detail?id=370951
if (this._flagMask) {
if (this._mask) {
svg[this._mask._renderer.type].render.call(this._mask, domElement);
this._renderer.elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
} else {
this._renderer.elem.removeAttribute('clip-path');
}
}
if (this._flagValue) {
this._renderer.elem.textContent = this._value;
}
return this.flagReset();
}
},
'linear-gradient': {
render: function(domElement, silent) {
if (!silent) {
this._update();
}
var changed = {};
if (this._flagId) {
changed.id = this._id;
}
if (this._flagEndPoints) {
changed.x1 = this.left._x;
changed.y1 = this.left._y;
changed.x2 = this.right._x;
changed.y2 = this.right._y;
}
if (this._flagSpread) {
changed.spreadMethod = this._spread;
}
// If there is no attached DOM element yet,
// create it with all necessary attributes.
if (!this._renderer.elem) {
changed.id = this._id;
changed.gradientUnits = 'userSpaceOnUse';
this._renderer.elem = svg.createElement('linearGradient', changed);
domElement.defs.appendChild(this._renderer.elem);
// Otherwise apply all pending attributes
} else {
svg.setAttributes(this._renderer.elem, changed);
}
if (this._flagStops) {
var lengthChanged = this._renderer.elem.childNodes.length
!== this.stops.length;
if (lengthChanged) {
while (this._renderer.elem.lastChild) {
this._renderer.elem.removeChild(this._renderer.elem.lastChild);
}
}
for (var i = 0; i < this.stops.length; i++) {
var stop = this.stops[i];
var attrs = {};
if (stop._flagOffset) {
attrs.offset = 100 * stop._offset + '%';
}
if (stop._flagColor) {
attrs['stop-color'] = stop._color;
}
if (stop._flagOpacity) {
attrs['stop-opacity'] = stop._opacity;
}
if (!stop._renderer.elem) {
stop._renderer.elem = svg.createElement('stop', attrs);
} else {
svg.setAttributes(stop._renderer.elem, attrs);
}
if (lengthChanged) {
this._renderer.elem.appendChild(stop._renderer.elem);
}
stop.flagReset();
}
}
return this.flagReset();
}
},
'radial-gradient': {
render: function(domElement, silent) {
if (!silent) {
this._update();
}
var changed = {};
if (this._flagId) {
changed.id = this._id;
}
if (this._flagCenter) {
changed.cx = this.center._x;
changed.cy = this.center._y;
}
if (this._flagFocal) {
changed.fx = this.focal._x;
changed.fy = this.focal._y;
}
if (this._flagRadius) {
changed.r = this._radius;
}
if (this._flagSpread) {
changed.spreadMethod = this._spread;
}
// If there is no attached DOM element yet,
// create it with all necessary attributes.
if (!this._renderer.elem) {
changed.id = this._id;
changed.gradientUnits = 'userSpaceOnUse';
this._renderer.elem = svg.createElement('radialGradient', changed);
domElement.defs.appendChild(this._renderer.elem);
// Otherwise apply all pending attributes
} else {
svg.setAttributes(this._renderer.elem, changed);
}
if (this._flagStops) {
var lengthChanged = this._renderer.elem.childNodes.length
!== this.stops.length;
if (lengthChanged) {
while (this._renderer.elem.lastChild) {
this._renderer.elem.removeChild(this._renderer.elem.lastChild);
}
}
for (var i = 0; i < this.stops.length; i++) {
var stop = this.stops[i];
var attrs = {};
if (stop._flagOffset) {
attrs.offset = 100 * stop._offset + '%';
}
if (stop._flagColor) {
attrs['stop-color'] = stop._color;
}
if (stop._flagOpacity) {
attrs['stop-opacity'] = stop._opacity;
}
if (!stop._renderer.elem) {
stop._renderer.elem = svg.createElement('stop', attrs);
} else {
svg.setAttributes(stop._renderer.elem, attrs);
}
if (lengthChanged) {
this._renderer.elem.appendChild(stop._renderer.elem);
}
stop.flagReset();
}
}
return this.flagReset();
}
},
texture: {
render: function(domElement, silent) {
if (!silent) {
this._update();
}
var changed = {};
var styles = { x: 0, y: 0 };
var image = this.image;
if (this._flagId) {
changed.id = this._id;
}
if (this._flagLoaded && this.loaded) {
switch (image.nodeName.toLowerCase()) {
case 'canvas':
styles.href = styles['xlink:href'] = image.toDataURL('image/png');
break;
case 'img':
case 'image':
styles.href = styles['xlink:href'] = this.src;
break;
}
}
if (this._flagOffset || this._flagLoaded || this._flagScale) {
changed.x = this._offset.x;
changed.y = this._offset.y;
if (image) {
changed.x -= image.width / 2;
changed.y -= image.height / 2;
if (this._scale instanceof Vector) {
changed.x *= this._scale.x;
changed.y *= this._scale.y;
} else {
changed.x *= this._scale;
changed.y *= this._scale;
}
}
if (changed.x > 0) {
changed.x *= - 1;
}
if (changed.y > 0) {
changed.y *= - 1;
}
}
if (this._flagScale || this._flagLoaded || this._flagRepeat) {
changed.width = 0;
changed.height = 0;
if (image) {
styles.width = changed.width = image.width;
styles.height = changed.height = image.height;
// TODO: Hack / Band-aid
switch (this._repeat) {
case 'no-repeat':
changed.width += 1;
changed.height += 1;
break;
}
if (this._scale instanceof Vector) {
changed.width *= this._scale.x;
changed.height *= this._scale.y;
} else {
changed.width *= this._scale;
changed.height *= this._scale;
}
}
}
if (this._flagScale || this._flagLoaded) {
if (!this._renderer.image) {
this._renderer.image = svg.createElement('image', styles);
} else {
svg.setAttributes(this._renderer.image, styles);
}
}
if (!this._renderer.elem) {
changed.id = this._id;
changed.patternUnits = 'userSpaceOnUse';
this._renderer.elem = svg.createElement('pattern', changed);
domElement.defs.appendChild(this._renderer.elem);
} else if (Object.keys(changed).length !== 0) {
svg.setAttributes(this._renderer.elem, changed);
}
if (this._renderer.elem && this._renderer.image && !this._renderer.appended) {
this._renderer.elem.appendChild(this._renderer.image);
this._renderer.appended = true;
}
return this.flagReset();
}
}
};
/**
* @name Two.SVGRenderer
* @class
* @extends Two.Events
* @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}.
* @param {Element} [parameters.domElement] - The `` to draw to. If none given a new one will be constructed.
* @description This class is used by {@link Two} when constructing with `type` of `Two.Types.svg` (the default type). It takes Two.js' scenegraph and renders it to a ``.
*/
function Renderer$1(params) {
/**
* @name Two.SVGRenderer#domElement
* @property {Element} - The `` associated with the Two.js scene.
*/
this.domElement = params.domElement || svg.createElement('svg');
/**
* @name Two.SVGRenderer#scene
* @property {Two.Group} - The root group of the scenegraph.
*/
this.scene = new Group();
this.scene.parent = this;
/**
* @name Two.SVGRenderer#defs
* @property {SvgDefintionsElement} - The `` to apply gradients, patterns, and bitmap imagery.
*/
this.defs = svg.createElement('defs');
this.domElement.appendChild(this.defs);
this.domElement.defs = this.defs;
this.domElement.style.overflow = 'hidden';
}
_.extend(Renderer$1, {
/**
* @name Two.SVGRenderer.Utils
* @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a ``.
*/
Utils: svg
});
_.extend(Renderer$1.prototype, Events, {
constructor: Renderer$1,
/**
* @name Two.SVGRenderer#setSize
* @function
* @param {Number} width - The new width of the renderer.
* @param {Number} height - The new height of the renderer.
* @description Change the size of the renderer.
* @nota-bene Triggers a `Two.Events.resize`.
*/
setSize: function(width, height) {
this.width = width;
this.height = height;
svg.setAttributes(this.domElement, {
width: width,
height: height
});
return this.trigger(Events.Types.resize, width, height);
},
/**
* @name Two.SVGRenderer#render
* @function
* @description Render the current scene to the ``.
*/
render: function() {
svg.group.render.call(this.scene, this.domElement);
return this;
}
});
// Constants
var multiplyMatrix = Matrix.Multiply,
identity = [1, 0, 0, 0, 1, 0, 0, 0, 1],
transformation = new NumArray(9),
CanvasUtils = Renderer$2.Utils;
var webgl = {
isHidden: /(undefined|none|transparent)/i,
canvas: (root$1.document ? root$1.document.createElement('canvas') : { getContext: function() {} }),
alignments: {
left: 'start',
middle: 'center',
right: 'end'
},
matrix: new Matrix(),
group: {
removeChild: function(child, gl) {
if (child.children) {
for (var i = 0; i < child.children.length; i++) {
webgl.group.removeChild(child.children[i], gl);
}
return;
}
// Deallocate texture to free up gl memory.
gl.deleteTexture(child._renderer.texture);
delete child._renderer.texture;
},
render: function(gl, program) {
if (!this._visible) {
return;
}
this._update();
var parent = this.parent;
var flagParentMatrix = (parent._matrix && parent._matrix.manual) || parent._flagMatrix;
var flagMatrix = this._matrix.manual || this._flagMatrix;
if (flagParentMatrix || flagMatrix) {
if (!this._renderer.matrix) {
this._renderer.matrix = new NumArray(9);
}
// Reduce amount of object / array creation / deletion
this._matrix.toTransformArray(true, transformation);
multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);
if (!(this._renderer.scale instanceof Vector)) {
this._renderer.scale = new Vector();
}
if (this._scale instanceof Vector) {
this._renderer.scale.x = this._scale.x;
this._renderer.scale.y = this._scale.y;
} else {
this._renderer.scale.x = this._scale;
this._renderer.scale.y = this._scale;
}
if (!(/renderer/i.test(parent._renderer.type))) {
this._renderer.scale.x *= parent._renderer.scale.x;
this._renderer.scale.y *= parent._renderer.scale.y;
}
if (flagParentMatrix) {
this._flagMatrix = true;
}
}
if (this._mask) {
// Stencil away everything that isn't rendered by the mask
gl.clear(gl.STENCIL_BUFFER_BIT);
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 0);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
// Don't draw the element onto the canvas, only onto the stencil buffer
gl.colorMask(false, false, false, false);
webgl[this._mask._renderer.type].render.call(this._mask, gl, program, this);
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
gl.colorMask(true, true, true, true);
}
this._flagOpacity = parent._flagOpacity || this._flagOpacity;
this._renderer.opacity = this._opacity
* (parent && parent._renderer ? parent._renderer.opacity : 1);
var i;
if (this._flagSubtractions) {
for (i = 0; i < this.subtractions.length; i++) {
webgl.group.removeChild(this.subtractions[i], gl);
}
}
for (i = 0; i < this.children.length; i++) {
var child = this.children[i];
webgl[child._renderer.type].render.call(child, gl, program);
}
if (this._mask) {
gl.disable(gl.STENCIL_TEST);
}
return this.flagReset();
}
},
path: {
updateCanvas: function(elem) {
var next, prev, a, c, ux, uy, vx, vy, ar, bl, br, cl, x, y;
var isOffset;
var commands = elem._renderer.vertices;
var canvas = this.canvas;
var ctx = this.ctx;
// Styles
var scale = elem._renderer.scale;
var stroke = elem._stroke;
var linewidth = elem._linewidth;
var fill = elem._fill;
var opacity = elem._renderer.opacity || elem._opacity;
var cap = elem._cap;
var join = elem._join;
var miter = elem._miter;
var closed = elem._closed;
var dashes = elem.dashes;
var length = commands.length;
var last = length - 1;
canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);
var centroid = elem._renderer.rect.centroid;
var cx = centroid.x;
var cy = centroid.y;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (fill) {
if (typeof fill === 'string') {
ctx.fillStyle = fill;
} else {
webgl[fill._renderer.type].render.call(fill, ctx, elem);
ctx.fillStyle = fill._renderer.effect;
}
}
if (stroke) {
if (typeof stroke === 'string') {
ctx.strokeStyle = stroke;
} else {
webgl[stroke._renderer.type].render.call(stroke, ctx, elem);
ctx.strokeStyle = stroke._renderer.effect;
}
if (linewidth) {
ctx.lineWidth = linewidth;
}
if (miter) {
ctx.miterLimit = miter;
}
if (join) {
ctx.lineJoin = join;
}
if (!closed && cap) {
ctx.lineCap = cap;
}
}
if (typeof opacity === 'number') {
ctx.globalAlpha = opacity;
}
if (dashes && dashes.length > 0) {
ctx.lineDashOffset = dashes.offset || 0;
ctx.setLineDash(dashes);
}
var d;
ctx.save();
ctx.scale(scale.x, scale.y);
ctx.translate(cx, cy);
ctx.beginPath();
for (var i = 0; i < commands.length; i++) {
var b = commands[i];
x = b.x;
y = b.y;
switch (b.command) {
case Commands.close:
ctx.closePath();
break;
case Commands.arc:
var rx = b.rx;
var ry = b.ry;
var xAxisRotation = b.xAxisRotation;
var largeArcFlag = b.largeArcFlag;
var sweepFlag = b.sweepFlag;
prev = closed ? mod(i - 1, length) : Math.max(i - 1, 0);
a = commands[prev];
var ax = a.x;
var ay = a.y;
CanvasUtils.renderSvgArcCommand(ctx, ax, ay, rx, ry, largeArcFlag, sweepFlag, xAxisRotation, x, y);
break;
case Commands.curve:
prev = closed ? mod(i - 1, length) : Math.max(i - 1, 0);
next = closed ? mod(i + 1, length) : Math.min(i + 1, last);
a = commands[prev];
c = commands[next];
ar = (a.controls && a.controls.right) || Vector.zero;
bl = (b.controls && b.controls.left) || Vector.zero;
if (a._relative) {
vx = ar.x + a.x;
vy = ar.y + a.y;
} else {
vx = ar.x;
vy = ar.y;
}
if (b._relative) {
ux = bl.x + b.x;
uy = bl.y + b.y;
} else {
ux = bl.x;
uy = bl.y;
}
ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
if (i >= last && closed) {
c = d;
br = (b.controls && b.controls.right) || Vector.zero;
cl = (c.controls && c.controls.left) || Vector.zero;
if (b._relative) {
vx = br.x + b.x;
vy = br.y + b.y;
} else {
vx = br.x;
vy = br.y;
}
if (c._relative) {
ux = cl.x + c.x;
uy = cl.y + c.y;
} else {
ux = cl.x;
uy = cl.y;
}
x = c.x;
y = c.y;
ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
}
break;
case Commands.line:
ctx.lineTo(x, y);
break;
case Commands.move:
d = b;
ctx.moveTo(x, y);
break;
}
}
// Loose ends
if (closed) {
ctx.closePath();
}
if (!webgl.isHidden.test(fill)) {
isOffset = fill._renderer && fill._renderer.offset;
if (isOffset) {
ctx.save();
ctx.translate(
- fill._renderer.offset.x, - fill._renderer.offset.y);
ctx.scale(fill._renderer.scale.x, fill._renderer.scale.y);
}
ctx.fill();
if (isOffset) {
ctx.restore();
}
}
if (!webgl.isHidden.test(stroke)) {
isOffset = stroke._renderer && stroke._renderer.offset;
if (isOffset) {
ctx.save();
ctx.translate(
- stroke._renderer.offset.x, - stroke._renderer.offset.y);
ctx.scale(stroke._renderer.scale.x, stroke._renderer.scale.y);
ctx.lineWidth = linewidth / stroke._renderer.scale.x;
}
ctx.stroke();
if (isOffset) {
ctx.restore();
}
}
ctx.restore();
},
// Returns the rect of a set of verts. Typically takes vertices that are
// "centered" around 0 and returns them to be anchored upper-left.
getBoundingClientRect: function(vertices, border, rect) {
var left = Infinity, right = -Infinity,
top = Infinity, bottom = -Infinity,
width, height;
vertices.forEach(function(v) {
var x = v.x, y = v.y, controls = v.controls;
var a, b, c, d, cl, cr;
top = Math.min(y, top);
left = Math.min(x, left);
right = Math.max(x, right);
bottom = Math.max(y, bottom);
if (!v.controls) {
return;
}
cl = controls.left;
cr = controls.right;
if (!cl || !cr) {
return;
}
a = v._relative ? cl.x + x : cl.x;
b = v._relative ? cl.y + y : cl.y;
c = v._relative ? cr.x + x : cr.x;
d = v._relative ? cr.y + y : cr.y;
if (!a || !b || !c || !d) {
return;
}
top = Math.min(b, d, top);
left = Math.min(a, c, left);
right = Math.max(a, c, right);
bottom = Math.max(b, d, bottom);
});
// Expand borders
if (typeof border === 'number') {
top -= border;
left -= border;
right += border;
bottom += border;
}
width = right - left;
height = bottom - top;
rect.top = top;
rect.left = left;
rect.right = right;
rect.bottom = bottom;
rect.width = width;
rect.height = height;
if (!rect.centroid) {
rect.centroid = {};
}
rect.centroid.x = - left;
rect.centroid.y = - top;
},
render: function(gl, program, forcedParent) {
if (!this._visible || !this._opacity) {
return this;
}
this._update();
// Calculate what changed
var parent = forcedParent || this.parent;
var flagParentMatrix = parent._matrix.manual || parent._flagMatrix;
var flagMatrix = this._matrix.manual || this._flagMatrix;
var parentChanged = this._renderer.parent !== parent;
var flagTexture = this._flagVertices || this._flagFill
|| (this._fill instanceof LinearGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagEndPoints))
|| (this._fill instanceof RadialGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagRadius || this._fill._flagCenter || this._fill._flagFocal))
|| (this._fill instanceof Texture && (this._fill._flagLoaded && this._fill.loaded || this._fill._flagImage || this._fill._flagVideo || this._fill._flagRepeat || this._fill._flagOffset || this._fill._flagScale))
|| (this._stroke instanceof LinearGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagEndPoints))
|| (this._stroke instanceof RadialGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagRadius || this._stroke._flagCenter || this._stroke._flagFocal))
|| (this._stroke instanceof Texture && (this._stroke._flagLoaded && this._stroke.loaded || this._stroke._flagImage || this._stroke._flagVideo || this._stroke._flagRepeat || this._stroke._flagOffset || this._fill._flagScale))
|| this._flagStroke || this._flagLinewidth || this._flagOpacity
|| parent._flagOpacity || this._flagVisible || this._flagCap
|| this._flagJoin || this._flagMiter || this._flagScale
|| (this.dashes && this.dashes.length > 0)
|| !this._renderer.texture;
if (flagParentMatrix || flagMatrix || parentChanged) {
if (!this._renderer.matrix) {
this._renderer.matrix = new NumArray(9);
}
// Reduce amount of object / array creation / deletion
this._matrix.toTransformArray(true, transformation);
multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);
if (!(this._renderer.scale instanceof Vector)) {
this._renderer.scale = new Vector();
}
if (this._scale instanceof Vector) {
this._renderer.scale.x = this._scale.x * parent._renderer.scale.x;
this._renderer.scale.y = this._scale.y * parent._renderer.scale.y;
} else {
this._renderer.scale.x = this._scale * parent._renderer.scale.x;
this._renderer.scale.y = this._scale * parent._renderer.scale.y;
}
if (parentChanged) {
this._renderer.parent = parent;
}
}
if (this._mask) {
// Stencil away everything that isn't rendered by the mask
gl.clear(gl.STENCIL_BUFFER_BIT);
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 0);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
// Don't draw the element onto the canvas, only onto the stencil buffer
gl.colorMask(false, false, false, false);
webgl[this._mask._renderer.type].render.call(this._mask, gl, program, this);
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
gl.colorMask(true, true, true, true);
}
if (flagTexture) {
if (!this._renderer.rect) {
this._renderer.rect = {};
}
this._renderer.opacity = this._opacity * parent._renderer.opacity;
webgl.path.getBoundingClientRect(this._renderer.vertices, this._linewidth, this._renderer.rect);
webgl.updateTexture.call(webgl, gl, this);
} else {
// We still need to update child Two elements on the fill and
// stroke properties.
if (this._fill && this._fill._update) {
this._fill._update();
}
if (this._stroke && this._stroke._update) {
this._stroke._update();
}
}
if (this._clip && !forcedParent) {
return;
}
// Draw Texture
gl.bindTexture(gl.TEXTURE_2D, this._renderer.texture);
// Draw Rect
var rect = this._renderer.rect;
gl.uniformMatrix3fv(program.matrix, false, this._renderer.matrix);
gl.uniform4f(program.rect, rect.left, rect.top, rect.right, rect.bottom);
gl.drawArrays(gl.TRIANGLES, 0, 6);
if (this._mask) {
gl.disable(gl.STENCIL_TEST);
}
return this.flagReset();
}
},
text: {
updateCanvas: function(elem) {
var canvas = this.canvas;
var ctx = this.ctx;
// Styles
var scale = elem._renderer.scale;
var stroke = elem._stroke;
var linewidth = elem._linewidth * scale;
var fill = elem._fill;
var opacity = elem._renderer.opacity || elem._opacity;
var dashes = elem.dashes;
var decoration = elem._decoration;
canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);
var centroid = elem._renderer.rect.centroid;
var cx = centroid.x;
var cy = centroid.y;
var a, b, c, d, e, sx, sy, x1, y1, x2, y2;
var isOffset = fill._renderer && fill._renderer.offset
&& stroke._renderer && stroke._renderer.offset;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!isOffset) {
ctx.font = [elem._style, elem._weight, elem._size + 'px/' +
elem._leading + 'px', elem._family].join(' ');
}
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Styles
if (fill) {
if (typeof fill === 'string') {
ctx.fillStyle = fill;
} else {
webgl[fill._renderer.type].render.call(fill, ctx, elem);
ctx.fillStyle = fill._renderer.effect;
}
}
if (stroke) {
if (typeof stroke === 'string') {
ctx.strokeStyle = stroke;
} else {
webgl[stroke._renderer.type].render.call(stroke, ctx, elem);
ctx.strokeStyle = stroke._renderer.effect;
}
if (linewidth) {
ctx.lineWidth = linewidth;
}
}
if (typeof opacity === 'number') {
ctx.globalAlpha = opacity;
}
if (dashes && dashes.length > 0) {
ctx.lineDashOffset = dashes.offset || 0;
ctx.setLineDash(dashes);
}
ctx.save();
ctx.scale(scale.x, scale.y);
ctx.translate(cx, cy);
if (!webgl.isHidden.test(fill)) {
if (fill._renderer && fill._renderer.offset) {
sx = fill._renderer.scale.x;
sy = fill._renderer.scale.y;
ctx.save();
ctx.translate( - fill._renderer.offset.x,
- fill._renderer.offset.y);
ctx.scale(sx, sy);
a = elem._size / fill._renderer.scale.y;
b = elem._leading / fill._renderer.scale.y;
ctx.font = [elem._style, elem._weight, a + 'px/',
b + 'px', elem._family].join(' ');
c = fill._renderer.offset.x / fill._renderer.scale.x;
d = fill._renderer.offset.y / fill._renderer.scale.y;
ctx.fillText(elem.value, c, d);
ctx.restore();
} else {
ctx.fillText(elem.value, 0, 0);
}
}
if (!webgl.isHidden.test(stroke)) {
if (stroke._renderer && stroke._renderer.offset) {
sx = stroke._renderer.scale.x;
sy = stroke._renderer.scale.y;
ctx.save();
ctx.translate(- stroke._renderer.offset.x,
- stroke._renderer.offset.y);
ctx.scale(sx, sy);
a = elem._size / stroke._renderer.scale.y;
b = elem._leading / stroke._renderer.scale.y;
ctx.font = [elem._style, elem._weight, a + 'px/',
b + 'px', elem._family].join(' ');
c = stroke._renderer.offset.x / stroke._renderer.scale.x;
d = stroke._renderer.offset.y / stroke._renderer.scale.y;
e = linewidth / stroke._renderer.scale.x;
ctx.lineWidth = e;
ctx.strokeText(elem.value, c, d);
ctx.restore();
} else {
ctx.strokeText(elem.value, 0, 0);
}
}
// Handle text-decoration
if (/(underline|strikethrough)/i.test(decoration)) {
var metrics = ctx.measureText(elem.value);
switch (decoration) {
case 'underline':
y1 = metrics.actualBoundingBoxAscent;
y2 = metrics.actualBoundingBoxAscent;
break;
case 'strikethrough':
y1 = 0;
y2 = 0;
break;
}
x1 = - metrics.width / 2;
x2 = metrics.width / 2;
ctx.lineWidth = Math.max(Math.floor(elem._size / 15), 1);
ctx.strokeStyle = ctx.fillStyle;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
ctx.restore();
},
getBoundingClientRect: function(elem, rect) {
var ctx = webgl.ctx;
ctx.font = [elem._style, elem._weight, elem._size + 'px/' +
elem._leading + 'px', elem._family].join(' ');
ctx.textAlign = 'center';
ctx.textBaseline = elem._baseline;
// TODO: Estimate this better
var width = ctx.measureText(elem._value).width * 1.25;
var height = Math.max(elem._size, elem._leading) * 1.25;
if (this._linewidth && !webgl.isHidden.test(this._stroke)) {
width += this._linewidth * 2;
height += this._linewidth * 2;
}
var w = width / 2;
var h = height / 2;
switch (webgl.alignments[elem._alignment] || elem._alignment) {
case webgl.alignments.left:
rect.left = 0;
rect.right = width;
break;
case webgl.alignments.right:
rect.left = - width;
rect.right = 0;
break;
default:
rect.left = - w;
rect.right = w;
}
// TODO: Gradients aren't inherited...
switch (elem._baseline) {
case 'bottom':
rect.top = - height;
rect.bottom = 0;
break;
case 'top':
rect.top = 0;
rect.bottom = height;
break;
default:
rect.top = - h;
rect.bottom = h;
}
rect.width = width;
rect.height = height;
if (!rect.centroid) {
rect.centroid = {};
}
// TODO:
rect.centroid.x = w;
rect.centroid.y = h;
},
render: function(gl, program, forcedParent) {
if (!this._visible || !this._opacity) {
return this;
}
this._update();
// Calculate what changed
var parent = forcedParent || this.parent;
var flagParentMatrix = parent._matrix.manual || parent._flagMatrix;
var flagMatrix = this._matrix.manual || this._flagMatrix;
var parentChanged = this._renderer.parent !== parent;
var flagTexture = this._flagVertices || this._flagFill
|| (this._fill instanceof LinearGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagEndPoints))
|| (this._fill instanceof RadialGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagRadius || this._fill._flagCenter || this._fill._flagFocal))
|| (this._fill instanceof Texture && (this._fill._flagLoaded && this._fill.loaded || this._fill._flagImage || this._fill._flagVideo || this._fill._flagRepeat || this._fill._flagOffset || this._fill._flagScale))
|| (this._stroke instanceof LinearGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagEndPoints))
|| (this._stroke instanceof RadialGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagRadius || this._stroke._flagCenter || this._stroke._flagFocal))
|| (this._stroke instanceof Texture && (this._stroke._flagLoaded && this._stroke.loaded || this._stroke._flagImage || this._stroke._flagVideo || this._stroke._flagRepeat || this._stroke._flagOffset || this._fill._flagScale))
|| this._flagStroke || this._flagLinewidth || this._flagOpacity
|| parent._flagOpacity || this._flagVisible || this._flagScale
|| this._flagValue || this._flagFamily || this._flagSize
|| this._flagLeading || this._flagAlignment || this._flagBaseline
|| this._flagStyle || this._flagWeight || this._flagDecoration
|| (this.dashes && this.dashes.length > 0)
|| !this._renderer.texture;
if (flagParentMatrix || flagMatrix || parentChanged) {
if (!this._renderer.matrix) {
this._renderer.matrix = new NumArray(9);
}
// Reduce amount of object / array creation / deletion
this._matrix.toTransformArray(true, transformation);
multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);
if (!(this._renderer.scale instanceof Vector)) {
this._renderer.scale = new Vector();
}
if (this._scale instanceof Vector) {
this._renderer.scale.x = this._scale.x * parent._renderer.scale.x;
this._renderer.scale.y = this._scale.y * parent._renderer.scale.y;
} else {
this._renderer.scale.x = this._scale * parent._renderer.scale.x;
this._renderer.scale.y = this._scale * parent._renderer.scale.y;
}
if (parentChanged) {
this._renderer.parent = parent;
}
}
if (this._mask) {
// Stencil away everything that isn't rendered by the mask
gl.clear(gl.STENCIL_BUFFER_BIT);
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 0);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
// Don't draw the element onto the canvas, only onto the stencil buffer
gl.colorMask(false, false, false, false);
webgl[this._mask._renderer.type].render.call(this._mask, gl, program, this);
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
gl.colorMask(true, true, true, true);
}
if (flagTexture) {
if (!this._renderer.rect) {
this._renderer.rect = {};
}
this._renderer.opacity = this._opacity * parent._renderer.opacity;
webgl.text.getBoundingClientRect(this, this._renderer.rect);
webgl.updateTexture.call(webgl, gl, this);
} else {
// We still need to update child Two elements on the fill and
// stroke properties.
if (this._fill && this._fill._update) {
this._fill._update();
}
if (this._stroke && this._stroke._update) {
this._stroke._update();
}
}
if (this._clip && !forcedParent) {
return;
}
// Draw Texture
gl.bindTexture(gl.TEXTURE_2D, this._renderer.texture);
// Draw Rect
var rect = this._renderer.rect;
gl.uniformMatrix3fv(program.matrix, false, this._renderer.matrix);
gl.uniform4f(program.rect, rect.left, rect.top, rect.right, rect.bottom);
gl.drawArrays(gl.TRIANGLES, 0, 6);
if (this._mask) {
gl.disable(gl.STENCIL_TEST);
}
return this.flagReset();
}
},
'linear-gradient': {
render: function(ctx, elem) {
if (!ctx.canvas.getContext('2d')) {
return;
}
this._update();
if (!this._renderer.effect || this._flagEndPoints || this._flagStops) {
this._renderer.effect = ctx.createLinearGradient(
this.left._x, this.left._y,
this.right._x, this.right._y
);
for (var i = 0; i < this.stops.length; i++) {
var stop = this.stops[i];
this._renderer.effect.addColorStop(stop._offset, stop._color);
}
}
return this.flagReset();
}
},
'radial-gradient': {
render: function(ctx, elem) {
if (!ctx.canvas.getContext('2d')) {
return;
}
this._update();
if (!this._renderer.effect || this._flagCenter || this._flagFocal
|| this._flagRadius || this._flagStops) {
this._renderer.effect = ctx.createRadialGradient(
this.center._x, this.center._y, 0,
this.focal._x, this.focal._y, this._radius
);
for (var i = 0; i < this.stops.length; i++) {
var stop = this.stops[i];
this._renderer.effect.addColorStop(stop._offset, stop._color);
}
}
return this.flagReset();
}
},
texture: {
render: function(ctx, elem) {
if (!ctx.canvas.getContext('2d')) {
return;
}
this._update();
var image = this.image;
if (((this._flagLoaded || this._flagImage || this._flagVideo || this._flagRepeat) && this.loaded)) {
this._renderer.effect = ctx.createPattern(image, this._repeat);
} else if (!this._renderer.effect) {
return this.flagReset();
}
if (this._flagOffset || this._flagLoaded || this._flagScale) {
if (!(this._renderer.offset instanceof Vector)) {
this._renderer.offset = new Vector();
}
this._renderer.offset.x = - this._offset.x;
this._renderer.offset.y = - this._offset.y;
if (image) {
this._renderer.offset.x += image.width / 2;
this._renderer.offset.y += image.height / 2;
if (this._scale instanceof Vector) {
this._renderer.offset.x *= this._scale.x;
this._renderer.offset.y *= this._scale.y;
} else {
this._renderer.offset.x *= this._scale;
this._renderer.offset.y *= this._scale;
}
}
}
if (this._flagScale || this._flagLoaded) {
if (!(this._renderer.scale instanceof Vector)) {
this._renderer.scale = new Vector();
}
if (this._scale instanceof Vector) {
this._renderer.scale.copy(this._scale);
} else {
this._renderer.scale.set(this._scale, this._scale);
}
}
return this.flagReset();
}
},
updateTexture: function(gl, elem) {
this[elem._renderer.type].updateCanvas.call(webgl, elem);
if (!elem._renderer.texture) {
elem._renderer.texture = gl.createTexture();
}
gl.bindTexture(gl.TEXTURE_2D, elem._renderer.texture);
// Set the parameters so we can render any size image.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
if (this.canvas.width <= 0 || this.canvas.height <= 0) {
return;
}
// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.canvas);
},
program: {
create: function(gl, shaders) {
var program, linked, error;
program = gl.createProgram();
_.each(shaders, function(s) {
gl.attachShader(program, s);
});
gl.linkProgram(program);
linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
error = gl.getProgramInfoLog(program);
gl.deleteProgram(program);
throw new TwoError('unable to link program: ' + error);
}
return program;
}
},
shaders: {
create: function(gl, source, type) {
var shader, compiled, error;
shader = gl.createShader(gl[type]);
gl.shaderSource(shader, source);
gl.compileShader(shader);
compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
error = gl.getShaderInfoLog(shader);
gl.deleteShader(shader);
throw new TwoError('unable to compile shader ' + shader + ': ' + error);
}
return shader;
},
types: {
vertex: 'VERTEX_SHADER',
fragment: 'FRAGMENT_SHADER'
},
vertex: [
'precision mediump float;',
'attribute vec2 a_position;',
'',
'uniform mat3 u_matrix;',
'uniform vec2 u_resolution;',
'uniform vec4 u_rect;',
'',
'varying vec2 v_textureCoords;',
'',
'void main() {',
' vec2 rectCoords = (a_position * (u_rect.zw - u_rect.xy)) + u_rect.xy;',
' vec2 projected = (u_matrix * vec3(rectCoords, 1.0)).xy;',
' vec2 normal = projected / u_resolution;',
' vec2 clipspace = (normal * 2.0) - 1.0;',
'',
' gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);',
' v_textureCoords = a_position;',
'}'
].join('\n'),
fragment: [
'precision mediump float;',
'',
'uniform sampler2D u_image;',
'varying vec2 v_textureCoords;',
'',
'void main() {',
' vec4 texel = texture2D(u_image, v_textureCoords);',
' if (texel.a == 0.0) {',
' discard;',
' }',
' gl_FragColor = texel;',
'}'
].join('\n')
},
TextureRegistry: new Registry()
};
webgl.ctx = webgl.canvas.getContext('2d');
/**
* @name Two.WebGLRenderer
* @class
* @extends Two.Events
* @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}.
* @param {Element} [parameters.domElement] - The `` to draw to. If none given a new one will be constructed.
* @param {HTMLCanvasElement} [parameters.offscreenElement] - The offscreen two dimensional `` to render each element on WebGL texture updates.
* @param {Boolean} [parameters.antialias] - Determines whether the canvas should clear render with antialias on.
* @description This class is used by {@link Two} when constructing with `type` of `Two.Types.webgl`. It takes Two.js' scenegraph and renders it to a `` through the WebGL api.
* @see {@link https://www.khronos.org/registry/webgl/specs/latest/1.0/}
*/
function Renderer(params) {
var gl, vs, fs;
/**
* @name Two.WebGLRenderer#domElement
* @property {Element} - The `` associated with the Two.js scene.
*/
this.domElement = params.domElement || document.createElement('canvas');
if (typeof params.offscreenElement !== 'undefined') {
webgl.canvas = params.offscreenElement;
webgl.ctx = webgl.canvas.getContext('2d');
}
/**
* @name Two.WebGLRenderer#scene
* @property {Two.Group} - The root group of the scenegraph.
*/
this.scene = new Group();
this.scene.parent = this;
this._renderer = {
type: 'renderer',
matrix: new NumArray(identity),
scale: 1,
opacity: 1
};
this._flagMatrix = true;
// http://games.greggman.com/game/webgl-and-alpha/
// http://www.khronos.org/registry/webgl/specs/latest/#5.2
params = _.defaults(params || {}, {
antialias: false,
alpha: true,
premultipliedAlpha: true,
stencil: true,
preserveDrawingBuffer: true,
overdraw: false
});
/**
* @name Two.WebGLRenderer#overdraw
* @property {Boolean} - Determines whether the canvas clears the background each draw call.
* @default true
*/
this.overdraw = params.overdraw;
/**
* @name Two.WebGLRenderer#ctx
* @property {WebGLContext} - Associated two dimensional context to render on the ``.
*/
gl = this.ctx = this.domElement.getContext('webgl', params) ||
this.domElement.getContext('experimental-webgl', params);
if (!this.ctx) {
throw new TwoError(
'unable to create a webgl context. Try using another renderer.');
}
// Compile Base Shaders to draw in pixel space.
vs = webgl.shaders.create(
gl, webgl.shaders.vertex, webgl.shaders.types.vertex);
fs = webgl.shaders.create(
gl, webgl.shaders.fragment, webgl.shaders.types.fragment);
/**
* @name Two.WebGLRenderer#program
* @property {WebGLProgram} - Associated WebGL program to render all elements from the scenegraph.
*/
this.program = webgl.program.create(gl, [vs, fs]);
gl.useProgram(this.program);
// Create and bind the drawing buffer
// look up where the vertex data needs to go.
this.program.position = gl.getAttribLocation(this.program, 'a_position');
this.program.matrix = gl.getUniformLocation(this.program, 'u_matrix');
this.program.rect = gl.getUniformLocation(this.program, 'u_rect');
// Bind the vertex buffer
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(this.program.position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(this.program.position);
gl.bufferData(
gl.ARRAY_BUFFER,
new NumArray([
0, 0,
1, 0,
0, 1,
0, 1,
1, 0,
1, 1
]),
gl.STATIC_DRAW);
// Setup some initial statements of the gl context
gl.enable(gl.BLEND);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
}
_.extend(Renderer, {
/**
* @name Two.WebGLRenderer.Utils
* @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a `` through the WebGL API.
*/
Utils: webgl
});
_.extend(Renderer.prototype, Events, {
constructor: Renderer,
/**
* @name Two.WebGLRenderer#setSize
* @function
* @fires resize
* @param {Number} width - The new width of the renderer.
* @param {Number} height - The new height of the renderer.
* @param {Number} [ratio] - The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen.
* @description Change the size of the renderer.
*/
setSize: function(width, height, ratio) {
this.width = width;
this.height = height;
this.ratio = typeof ratio === 'undefined' ? getRatio(this.ctx) : ratio;
this.domElement.width = width * this.ratio;
this.domElement.height = height * this.ratio;
if (_.isObject(this.domElement.style)) {
_.extend(this.domElement.style, {
width: width + 'px',
height: height + 'px'
});
}
// Set for this.stage parent scaling to account for HDPI
this._renderer.matrix[0] = this._renderer.matrix[4] = this._renderer.scale = this.ratio;
this._flagMatrix = true;
this.ctx.viewport(0, 0, width * this.ratio, height * this.ratio);
var resolutionLocation = this.ctx.getUniformLocation(
this.program, 'u_resolution');
this.ctx.uniform2f(resolutionLocation, width * this.ratio, height * this.ratio);
return this.trigger(Events.Types.resize, width, height, ratio);
},
/**
* @name Two.WebGLRenderer#render
* @function
* @description Render the current scene to the ``.
*/
render: function() {
var gl = this.ctx;
if (!this.overdraw) {
gl.clear(gl.COLOR_BUFFER_BIT);
}
webgl.group.render.call(this.scene, gl, this.program);
this._flagMatrix = false;
return this;
}
});
// Utils
/**
* @name Two
* @class
* @global
* @param {Object} [options]
* @param {Boolean} [options.fullscreen=false] - Set to `true` to automatically make the stage adapt to the width and height of the parent document. This parameter overrides `width` and `height` parameters if set to `true`. This overrides `options.fitted` as well.
* @param {Boolean} [options.fitted=false] = Set to `true` to automatically make the stage adapt to the width and height of the parent element. This parameter overrides `width` and `height` parameters if set to `true`.
* @param {Number} [options.width=640] - The width of the stage on construction. This can be set at a later time.
* @param {Number} [options.height=480] - The height of the stage on construction. This can be set at a later time.
* @param {String} [options.type=Two.Types.svg] - The type of renderer to setup drawing with. See {@link Two.Types} for available options.
* @param {Boolean} [options.autostart=false] - Set to `true` to add the instance to draw on `requestAnimationFrame`. This is a convenient substitute for {@link Two#play}.
* @param {Element} [options.domElement] - The canvas or SVG element to draw into. This overrides the `options.type` argument.
* @description The entrypoint for Two.js. Instantiate a `new Two` in order to setup a scene to render to. `Two` is also the publicly accessible namespace that all other sub-classes, functions, and utilities attach to.
*/
function Two(options) {
// Determine what Renderer to use and setup a scene.
var params = _.defaults(options || {}, {
fullscreen: false,
fitted: false,
width: 640,
height: 480,
type: Two.Types.svg,
autostart: false
});
_.each(params, function(v, k) {
if (/fullscreen/i.test(k) || /autostart/i.test(k)) {
return;
}
this[k] = v;
}, this);
// Specified domElement overrides type declaration only if the element does not support declared renderer type.
if (_.isElement(params.domElement)) {
var tagName = params.domElement.tagName.toLowerCase();
// TODO: Reconsider this if statement's logic.
if (!/^(CanvasRenderer-canvas|WebGLRenderer-canvas|SVGRenderer-svg)$/.test(this.type+'-'+tagName)) {
this.type = Two.Types[tagName];
}
}
this.renderer = new Two[this.type](this);
this.setPlaying(params.autostart);
this.frameCount = 0;
/**
* @name Two#fit
* @function
* @description If `options.fullscreen` or `options.fitted` in construction create this function. It sets the `width` and `height` of the instance to its respective parent `window` or `element` depending on the `options` passed.
*/
if (params.fullscreen) {
this.fit = fitToWindow.bind(this);
this.fit.domElement = window;
this.fit.attached = true;
_.extend(document.body.style, {
overflow: 'hidden',
margin: 0,
padding: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
position: 'fixed'
});
_.extend(this.renderer.domElement.style, {
display: 'block',
top: 0,
left: 0,
right: 0,
bottom: 0,
position: 'fixed'
});
dom.bind(this.fit.domElement, 'resize', this.fit);
this.fit();
} else if (params.fitted) {
this.fit = fitToParent.bind(this);
_.extend(this.renderer.domElement.style, {
display: 'block'
});
} else if (!_.isElement(params.domElement)) {
this.renderer.setSize(params.width, params.height, this.ratio);
this.width = params.width;
this.height = params.height;
}
this.renderer.bind(Events.Types.resize, updateDimensions.bind(this));
this.scene = this.renderer.scene;
Two.Instances.push(this);
if (params.autostart) {
raf.init();
}
}
_.extend(Two, Constants);
_.extend(Two.prototype, Events, {
constructor: Two,
/**
* @name Two#type
* @property {String} - A string representing which type of renderer the instance has instantiated.
*/
type: '',
/**
* @name Two#renderer
* @property {(Two.SVGRenderer|Two.CanvasRenderer|Two.WebGLRenderer)} - The instantiated rendering class for the instance. For a list of possible rendering types check out Two.Types.
*/
renderer: null,
/**
* @name Two#scene
* @property {Two.Group} - The base level {@link Two.Group} which houses all objects for the instance. Because it is a {@link Two.Group} transformations can be applied to it that will affect all objects in the instance. This is handy as a makeshift inverted camera.
*/
scene: null,
/**
* @name Two#width
* @property {Number} - The width of the instance's dom element.
*/
width: 0,
/**
* @name Two#height
* @property {Number} - The height of the instance's dom element.
*/
height: 0,
/**
* @name Two#frameCount
* @property {Number} - An integer representing how many frames have elapsed.
*/
frameCount: 0,
/**
* @name Two#timeDelta
* @property {Number} - A number representing how much time has elapsed since the last frame in milliseconds.
*/
timeDelta: 0,
/**
* @name Two#playing
* @property {Boolean} - A boolean representing whether or not the instance is being updated through the automatic `requestAnimationFrame`.
*/
playing: false,
/**
* @name Two#appendTo
* @function
* @param {Element} elem - The DOM element to append the Two.js stage to.
* @description Shorthand method to append your instance of Two.js to the `document`.
*/
appendTo: function(elem) {
elem.appendChild(this.renderer.domElement);
if (this.fit) {
if (this.fit.domElement !== window) {
this.fit.domElement = elem;
this.fit.attached = false;
}
this.update();
}
return this;
},
/**
* @name Two#play
* @function
* @fires Two.Events.Types.play event
* @description Call to start an internal animation loop.
* @nota-bene This function initiates a `requestAnimationFrame` loop.
*/
play: function() {
this.playing = true;
raf.init();
return this.trigger(Events.Types.play);
},
/**
* @name Two#pause
* @function
* @fires Two.Events.Types.pause event
* @description Call to stop the internal animation loop for a specific instance of Two.js.
*/
pause: function() {
this.playing = false;
return this.trigger(Events.Types.pause);
},
setPlaying: function(p) {
this.playing = p;
},
/**
* @name Two#release
* @function
* @param {Object} obj
* @returns {Object} The object passed for event deallocation.
* @description Release an arbitrary class' events from the Two.js corpus and recurse through its children and or vertices.
*/
release: function(obj) {
var i, v, child;
if (!_.isObject(obj)) {
return;
}
if (typeof obj.unbind === 'function') {
obj.unbind();
}
if (obj.vertices) {
if (typeof obj.vertices.unbind === 'function') {
obj.vertices.unbind();
}
for (i = 0; i < obj.vertices.length; i++) {
v = obj.vertices[i];
if (typeof v.unbind === 'function') {
v.unbind();
}
}
}
if (obj.children) {
for (i = 0; i < obj.children.length; i++) {
child = obj.children[i];
this.release(child);
}
}
return obj;
},
/**
* @name Two#update
* @function
* @fires Two.Events.Types.update event
* @description Update positions and calculations in one pass before rendering. Then render to the canvas.
* @nota-bene This function is called automatically if using {@link Two#play} or the `autostart` parameter in construction.
*/
update: function() {
var animated = !!this._lastFrame;
var now = _.performance.now();
if (animated) {
this.timeDelta = parseFloat((now - this._lastFrame).toFixed(3));
}
this._lastFrame = now;
if (this.fit && this.fit.domElement && !this.fit.attached) {
dom.bind(this.fit.domElement, 'resize', this.fit);
this.fit.attached = true;
this.fit();
}
var width = this.width;
var height = this.height;
var renderer = this.renderer;
// Update width / height for the renderer
if (width !== renderer.width || height !== renderer.height) {
renderer.setSize(width, height, this.ratio);
}
this.trigger(Events.Types.update, this.frameCount, this.timeDelta);
return this.render();
},
/**
* @name Two#render
* @function
* @fires render
* @description Render all drawable and visible objects of the scene.
*/
render: function() {
this.renderer.render();
return this.trigger(Events.Types.render, this.frameCount++);
},
// Convenience Methods
/**
* @name Two#add
* @function
* @param {(Two.Shape[]|...Two.Shape)} [objects] - An array of Two.js objects. Alternatively can add objects as individual arguments.
* @description A shorthand method to add specific Two.js objects to the scene.
*/
add: function(o) {
var objects = o;
if (!(objects instanceof Array)) {
objects = Array.prototype.slice.call(arguments);
}
this.scene.add(objects);
return this;
},
/**
* @name Two#remove
* @function
* @param {(Two.Shape[]|...Two.Shape)} [objects] - An array of Two.js objects.
* @description A shorthand method to remove specific Two.js objects from the scene.
*/
remove: function(o) {
var objects = o;
if (!(objects instanceof Array)) {
objects = Array.prototype.slice.call(arguments);
}
this.scene.remove(objects);
return this;
},
/**
* @name Two#clear
* @function
* @description Removes all objects from the instance's scene. If you intend to have the browser garbage collect this, don't forget to delete the references in your application as well.
*/
clear: function() {
this.scene.remove(this.scene.children);
return this;
},
/**
* @name Two#makeLine
* @function
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
* @returns {Two.Line}
* @description Creates a Two.js line and adds it to the scene.
*/
makeLine: function(x1, y1, x2, y2) {
var line = new Line(x1, y1, x2, y2);
this.scene.add(line);
return line;
},
/**
* @name Two#makeArrow
* @function
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
* @returns {Two.Path}
* @description Creates a Two.js arrow and adds it to the scene.
*/
makeArrow: function(x1, y1, x2, y2, size) {
var headlen = typeof size === 'number' ? size : 10;
var angle = Math.atan2(y2 - y1, x2 - x1);
var vertices = [
new Anchor(x1, y1, undefined, undefined, undefined, undefined, Commands.move),
new Anchor(x2, y2, undefined, undefined, undefined, undefined, Commands.line),
new Anchor(
x2 - headlen * Math.cos(angle - Math.PI / 4),
y2 - headlen * Math.sin(angle - Math.PI / 4),
undefined, undefined, undefined, undefined, Commands.line
),
new Anchor(x2, y2, undefined, undefined, undefined, undefined, Commands.move),
new Anchor(
x2 - headlen * Math.cos(angle + Math.PI / 4),
y2 - headlen * Math.sin(angle + Math.PI / 4),
undefined, undefined, undefined, undefined, Commands.line
)
];
var path = new Path(vertices, false, false, true);
path.noFill();
path.cap = 'round';
path.join = 'round';
this.scene.add(path);
return path;
},
/**
* @name Two#makeRectangle
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} width
* @param {Number} height
* @returns {Two.Rectangle}
* @description Creates a Two.js rectangle and adds it to the scene.
*/
makeRectangle: function(x, y, width, height) {
var rect = new Rectangle(x, y, width, height);
this.scene.add(rect);
return rect;
},
/**
* @name Two#makeRoundedRectangle
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} width
* @param {Number} height
* @param {Number} sides
* @returns {Two.Rectangle}
* @description Creates a Two.js rounded rectangle and adds it to the scene.
*/
makeRoundedRectangle: function(x, y, width, height, sides) {
var rect = new RoundedRectangle(x, y, width, height, sides);
this.scene.add(rect);
return rect;
},
/**
* @name Two#makeCircle
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} radius
* @param {Number} [resolution=4]
* @returns {Two.Circle}
* @description Creates a Two.js circle and adds it to the scene.
*/
makeCircle: function(x, y, radius, resolution) {
var circle = new Circle(x, y, radius, resolution);
this.scene.add(circle);
return circle;
},
/**
* @name Two#makeEllipse
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} rx
* @param {Number} ry
* @param {Number} [resolution=4]
* @returns {Two.Ellipse}
* @description Creates a Two.js ellipse and adds it to the scene.
*/
makeEllipse: function(x, y, rx, ry, resolution) {
var ellipse = new Ellipse(x, y, rx, ry, resolution);
this.scene.add(ellipse);
return ellipse;
},
/**
* @name Two#makeStar
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} outerRadius
* @param {Number} innerRadius
* @param {Number} sides
* @returns {Two.Star}
* @description Creates a Two.js star and adds it to the scene.
*/
makeStar: function(ox, oy, outerRadius, innerRadius, sides) {
var star = new Star(ox, oy, outerRadius, innerRadius, sides);
this.scene.add(star);
return star;
},
/**
* @name Two#makeCurve
* @function
* @param {Two.Anchor[]} [points] - An array of {@link Two.Anchor} points.
* @param {...Number} - Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into {@link Two.Anchor}s for use in the path.
* @returns {Two.Path} - Where `path.curved` is set to `true`.
* @description Creates a Two.js path that is curved and adds it to the scene.
* @nota-bene In either case of passing an array or passing numbered arguments the last argument is an optional `Boolean` that defines whether the path should be open or closed.
*/
makeCurve: function(p) {
var l = arguments.length, points = p;
if (!Array.isArray(p)) {
points = [];
for (var i = 0; i < l; i+=2) {
var x = arguments[i];
if (typeof x !== 'number') {
break;
}
var y = arguments[i + 1];
points.push(new Anchor(x, y));
}
}
var last = arguments[l - 1];
var curve = new Path(points, !(typeof last === 'boolean' ? last : undefined), true);
var rect = curve.getBoundingClientRect();
curve.center().translation
.set(rect.left + rect.width / 2, rect.top + rect.height / 2);
this.scene.add(curve);
return curve;
},
/**
* @name Two#makePolygon
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} radius
* @param {Number} sides
* @returns {Two.Polygon}
* @description Creates a Two.js polygon and adds it to the scene.
*/
makePolygon: function(x, y, radius, sides) {
var poly = new Polygon(x, y, radius, sides);
this.scene.add(poly);
return poly;
},
/**
* @name Two#makeArcSegment
* @function
* @param {Number} x
* @param {Number} y
* @param {Number} innerRadius
* @param {Number} outerRadius
* @param {Number} startAngle
* @param {Number} endAngle
* @param {Number} [resolution=Two.Resolution] - The number of vertices that should comprise the arc segment.
*/
makeArcSegment: function(ox, oy, ir, or, sa, ea, res) {
var arcSegment = new ArcSegment(ox, oy, ir, or, sa, ea, res);
this.scene.add(arcSegment);
return arcSegment;
},
/**
* @name Two#makePath
* @function
* @param {Two.Anchor[]} [points] - An array of {@link Two.Anchor} points.
* @param {...Number} - Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into {@link Two.Anchor}s for use in the path.
* @returns {Two.Path}
* @description Creates a Two.js path and adds it to the scene.
* @nota-bene In either case of passing an array or passing numbered arguments the last argument is an optional `Boolean` that defines whether the path should be open or closed.
*/
makePath: function(p) {
var l = arguments.length, points = p;
if (!Array.isArray(p)) {
points = [];
for (var i = 0; i < l; i+=2) {
var x = arguments[i];
if (typeof x !== 'number') {
break;
}
var y = arguments[i + 1];
points.push(new Anchor(x, y));
}
}
var last = arguments[l - 1];
var path = new Path(points, !(typeof last === 'boolean' ? last : undefined));
var rect = path.getBoundingClientRect();
if (typeof rect.top === 'number' && typeof rect.left === 'number' &&
typeof rect.right === 'number' && typeof rect.bottom === 'number') {
path.center().translation
.set(rect.left + rect.width / 2, rect.top + rect.height / 2);
}
this.scene.add(path);
return path;
},
/**
* @name Two#makeText
* @function
* @param {String} message
* @param {Number} x
* @param {Number} y
* @param {Object} [styles] - An object to describe any of the {@link Two.Text.Properties} including `fill`, `stroke`, `linewidth`, `family`, `alignment`, `leading`, `opacity`, etc..
* @returns {Two.Text}
* @description Creates a Two.js text object and adds it to the scene.
*/
makeText: function(message, x, y, styles) {
var text = new Text(message, x, y, styles);
this.add(text);
return text;
},
/**
* @name Two#makeLinearGradient
* @function
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
* @param {...Two.Stop} stops - Any number of color stops sometimes reffered to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied.
* @returns {Two.LinearGradient}
* @description Creates a Two.js linear gradient and ads it to the scene. In the case of an effect it's added to an invisible "definitions" group.
*/
makeLinearGradient: function(x1, y1, x2, y2 /* stops */) {
var stops = Array.prototype.slice.call(arguments, 4);
var gradient = new LinearGradient(x1, y1, x2, y2, stops);
this.add(gradient);
return gradient;
},
/**
* @name Two#makeRadialGradient
* @function
* @param {Number} x1
* @param {Number} y1
* @param {Number} radius
* @param {...Two.Stop} stops - Any number of color stops sometimes reffered to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied.
* @returns {Two.RadialGradient}
* @description Creates a Two.js linear-gradient object and ads it to the scene. In the case of an effect it's added to an invisible "definitions" group.
*/
makeRadialGradient: function(x1, y1, r /* stops */) {
var stops = Array.prototype.slice.call(arguments, 3);
var gradient = new RadialGradient(x1, y1, r, stops);
this.add(gradient);
return gradient;
},
/**
* @name Two#makeSprite
* @function
* @param {(String|Two.Texture)} pathOrTexture - The URL path to an image or an already created {@link Two.Texture}.
* @param {Number} x
* @param {Number} y
* @param {Number} [columns=1]
* @param {Number} [rows=1]
* @param {Number} [frameRate=0]
* @param {Boolean} [autostart=false]
* @returns {Two.Sprite}
* @description Creates a Two.js sprite object and adds it to the scene. Sprites can be used for still images as well as animations.
*/
makeSprite: function(path, x, y, cols, rows, frameRate, autostart) {
var sprite = new Sprite(path, x, y, cols, rows, frameRate);
if (autostart) {
sprite.play();
}
this.add(sprite);
return sprite;
},
/**
* @name Two#makeImageSequence
* @function
* @param {(String[]|Two.Texture[])} pathsOrTextures - An array of paths or of {@link Two.Textures}.
* @param {Number} x
* @param {Number} y
* @param {Number} [frameRate=0]
* @param {Boolean} [autostart=false]
* @returns {Two.ImageSequence}
* @description Creates a Two.js image sequence object and adds it to the scene.
*/
makeImageSequence: function(paths, x, y, frameRate, autostart) {
var imageSequence = new ImageSequence(paths, x, y, frameRate);
if (autostart) {
imageSequence.play();
}
this.add(imageSequence);
return imageSequence;
},
/**
* @name Two#makeTexture
* @function
* @param {(String|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement)} [pathOrSource] - The URL path to an image or a DOM image-like element.
* @param {Function} [callback] - Function to be invoked when the image is loaded.
* @returns {Two.Texture}
* @description Creates a Two.js texture object.
*/
makeTexture: function(path, callback) {
var texture = new Texture(path, callback);
return texture;
},
/**
* @name Two#makeGroup
* @function
* @param {(Two.Shape[]|...Two.Shape)} [objects] - Two.js objects to be added to the group in the form of an array or as individual arguments.
* @returns {Two.Group}
* @description Creates a Two.js group object and adds it to the scene.
*/
makeGroup: function(o) {
var objects = o;
if (!(objects instanceof Array)) {
objects = Array.prototype.slice.call(arguments);
}
var group = new Group();
this.scene.add(group);
group.add(objects);
return group;
},
/**
* @name Two#interpret
* @function
* @param {SVGElement} SVGElement - The SVG node to be parsed.
* @param {Boolean} shallow - Don't create a top-most group but append all content directly.
* @param {Boolean} add – Automatically add the reconstructed SVG node to scene.
* @returns {Two.Group}
* @description Interpret an SVG Node and add it to this instance's scene. The distinction should be made that this doesn't `import` svg's, it solely interprets them into something compatible for Two.js - this is slightly different than a direct transcription.
*/
interpret: function(SVGElement, shallow, add) {
var tag = SVGElement.tagName.toLowerCase();
add = (typeof add !== 'undefined') ? add : true;
if (!(tag in read)) {
return null;
}
var node = read[tag].call(this, SVGElement);
if (add) {
this.add(shallow && node instanceof Group ? node.children : node);
} else if (node.parent) {
// Remove `g` tags that have been added to scenegraph / DOM
// in order to be compatible with `getById` methods.
node.remove();
}
return node;
},
/**
* @name Two#load
* @function
* @param {String|SVGElement} pathOrSVGContent - The URL path of an SVG file or an SVG document as text.
* @param {Function} callback - Function to call once loading has completed.
* @returns {Two.Group}
* @description Load an SVG file or SVG text and interpret it into Two.js legible objects.
*/
load: function(text, callback) {
var group = new Group();
var elem, i, j, child;
var attach = (function(data) {
dom.temp.innerHTML = data;
for (i = 0; i < dom.temp.children.length; i++) {
elem = dom.temp.children[i];
if (/svg/i.test(elem.nodeName)) {
child = this.interpret(elem);
// Two.Utils.applySvgViewBox.call(this, group, elem.getAttribute('viewBox'));
for (j = 0; j < child.children.length; j++) {
group.add(child.children[j]);
}
} else {
group.add(this.interpret(elem));
}
}
if (typeof callback === 'function') {
var svg = dom.temp.children.length <= 1
? dom.temp.children[0] : dom.temp.children;
callback(group, svg);
}
}).bind(this);
if (/.*\.svg/ig.test(text)) {
xhr(text, attach);
return group;
}
attach(text);
return group;
}
});
function fitToWindow() {
var wr = document.body.getBoundingClientRect();
var width = this.width = wr.width;
var height = this.height = wr.height;
this.renderer.setSize(width, height, this.ratio);
}
function fitToParent() {
var parent = this.renderer.domElement.parentElement;
if (!parent) {
console.warn('Two.js: Attempting to fit to parent, but no parent found.');
return;
}
var wr = parent.getBoundingClientRect();
var width = this.width = wr.width;
var height = this.height = wr.height;
this.renderer.setSize(width, height, this.ratio);
}
function updateDimensions(width, height) {
this.width = width;
this.height = height;
this.trigger(Events.Types.resize, width, height);
}
// Request Animation Frame
var raf = dom.getRequestAnimationFrame();
function loop() {
for (var i = 0; i < Two.Instances.length; i++) {
var t = Two.Instances[i];
if (t.playing) {
t.update();
}
}
Two.nextFrameID = raf(loop);
}
raf.init = function() {
loop();
raf.init = function() {};
};
_.extend(Two, {
Anchor: Anchor,
Collection: Collection,
Events: Events,
Group: Group,
Matrix: Matrix,
Path: Path,
Registry: Registry,
Shape: Shape,
Text: Text,
Vector: Vector,
Gradient: Gradient,
ImageSequence: ImageSequence,
LinearGradient: LinearGradient,
RadialGradient: RadialGradient,
Sprite: Sprite,
Stop: Stop,
Texture: Texture,
ArcSegment: ArcSegment,
Circle: Circle,
Ellipse: Ellipse,
Line: Line,
Polygon: Polygon,
Rectangle: Rectangle,
RoundedRectangle: RoundedRectangle,
Star: Star,
CanvasRenderer: Renderer$2,
SVGRenderer: Renderer$1,
WebGLRenderer: Renderer,
Commands: Commands,
/**
* @name Two.Utils
* @property {Object} - A massive object filled with utility functions and properties.
*/
Utils: _.extend({
Error: TwoError,
getRatio: getRatio,
defineGetterSetter: defineGetterSetter,
read: read,
xhr: xhr
}, _, CanvasShim, Curves, math)
});
export default Two;