summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/two.js
diff options
context:
space:
mode:
Diffstat (limited to 'debian/missing-sources/two.js')
-rw-r--r--debian/missing-sources/two.js10244
1 files changed, 10244 insertions, 0 deletions
diff --git a/debian/missing-sources/two.js b/debian/missing-sources/two.js
new file mode 100644
index 000000000..859d3b418
--- /dev/null
+++ b/debian/missing-sources/two.js
@@ -0,0 +1,10244 @@
+/**
+ * two.js
+ * a two-dimensional drawing api meant for modern browsers. It is renderer
+ * agnostic enabling the same api for rendering in multiple contexts: webgl,
+ * canvas2d, and svg.
+ *
+ * Copyright (c) 2012 - 2017 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.
+ *
+ */
+
+this.Two = (function(previousTwo) {
+
+ var root = typeof window != 'undefined' ? window : typeof global != 'undefined' ? global : null;
+ var toString = Object.prototype.toString;
+ var _ = {
+ // http://underscorejs.org/ • 1.8.3
+ _indexAmount: 0,
+ natural: {
+ slice: Array.prototype.slice,
+ indexOf: Array.prototype.indexOf,
+ keys: Object.keys,
+ bind: Function.prototype.bind,
+ create: Object.create
+ },
+ identity: function(value) {
+ return value;
+ },
+ isArguments: function(obj) {
+ return toString.call(obj) === '[object Arguments]';
+ },
+ isFunction: function(obj) {
+ return toString.call(obj) === '[object Function]';
+ },
+ isString: function(obj) {
+ return toString.call(obj) === '[object String]';
+ },
+ isNumber: function(obj) {
+ return toString.call(obj) === '[object Number]';
+ },
+ isDate: function(obj) {
+ return toString.call(obj) === '[object Date]';
+ },
+ isRegExp: function(obj) {
+ return toString.call(obj) === '[object RegExp]';
+ },
+ isError: function(obj) {
+ return toString.call(obj) === '[object Error]';
+ },
+ isFinite: function(obj) {
+ return isFinite(obj) && !isNaN(parseFloat(obj));
+ },
+ isNaN: function(obj) {
+ return _.isNumber(obj) && obj !== +obj;
+ },
+ isBoolean: function(obj) {
+ return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
+ },
+ isNull: function(obj) {
+ return obj === null;
+ },
+ isUndefined: function(obj) {
+ return obj === void 0;
+ },
+ isEmpty: function(obj) {
+ if (obj == null) return true;
+ if (isArrayLike && (_.isArray(obj) || _.isString(obj) || _.isArguments(obj))) return obj.length === 0;
+ return _.keys(obj).length === 0;
+ },
+ isElement: function(obj) {
+ return !!(obj && obj.nodeType === 1);
+ },
+ isArray: Array.isArray || function(obj) {
+ return toString.call(obj) === '[object Array]';
+ },
+ isObject: function(obj) {
+ var type = typeof obj;
+ return type === 'function' || type === 'object' && !!obj;
+ },
+ toArray: function(obj) {
+ if (!obj) {
+ return [];
+ }
+ if (_.isArray(obj)) {
+ return slice.call(obj);
+ }
+ if (isArrayLike(obj)) {
+ return _.map(obj, _.identity);
+ }
+ return _.values(obj);
+ },
+ range: function(start, stop, step) {
+ if (stop == null) {
+ stop = start || 0;
+ start = 0;
+ }
+ step = step || 1;
+
+ var length = Math.max(Math.ceil((stop - start) / step), 0);
+ var range = Array(length);
+
+ for (var idx = 0; idx < length; idx++, start += step) {
+ range[idx] = start;
+ }
+
+ return range;
+ },
+ indexOf: function(list, item) {
+ if (!!_.natural.indexOf) {
+ return _.natural.indexOf.call(list, item);
+ }
+ for (var i = 0; i < list.length; i++) {
+ if (list[i] === item) {
+ return i;
+ }
+ }
+ return -1;
+ },
+ has: function(obj, key) {
+ return obj != null && hasOwnProperty.call(obj, key);
+ },
+ bind: function(func, ctx) {
+ var natural = _.natural.bind;
+ if (natural && func.bind === natural) {
+ return natural.apply(func, slice.call(arguments, 1));
+ }
+ var args = slice.call(arguments, 2);
+ return function() {
+ func.apply(ctx, args);
+ };
+ },
+ 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;
+ },
+ keys: function(obj) {
+ if (!_.isObject(obj)) {
+ return [];
+ }
+ if (_.natural.keys) {
+ return _.natural.keys(obj);
+ }
+ var keys = [];
+ for (var k in obj) {
+ if (_.has(obj, k)) {
+ keys.push(k);
+ }
+ }
+ return keys;
+ },
+ values: function(obj) {
+ var keys = _.keys(obj);
+ var values = [];
+ for (var i = 0; i < keys.length; i++) {
+ var k = keys[i];
+ values.push(obj[k]);
+ }
+ return values;
+ },
+ each: function(obj, iteratee, context) {
+ var ctx = context || this;
+ var keys = !isArrayLike(obj) && _.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;
+ },
+ map: function(obj, iteratee, context) {
+ var ctx = context || this;
+ var keys = !isArrayLike(obj) && _.keys(obj);
+ var length = (keys || obj).length;
+ var result = [];
+ for (var i = 0; i < length; i++) {
+ var k = keys ? keys[i] : i;
+ result[i] = iteratee.call(ctx, obj[k], k, obj);
+ }
+ return result;
+ },
+ once: function(func) {
+ var init = false;
+ return function() {
+ if (!!init) {
+ return func;
+ }
+ init = true;
+ return func.apply(this, arguments);
+ }
+ },
+ after: function(times, func) {
+ return function() {
+ while (--times < 1) {
+ return func.apply(this, arguments);
+ }
+ }
+ },
+ uniqueId: function(prefix) {
+ var id = ++_._indexAmount + '';
+ return prefix ? prefix + id : id;
+ }
+ };
+
+ /**
+ * Constants
+ */
+
+ var sin = Math.sin,
+ cos = Math.cos,
+ atan2 = Math.atan2,
+ sqrt = Math.sqrt,
+ round = Math.round,
+ abs = Math.abs,
+ PI = Math.PI,
+ TWO_PI = PI * 2,
+ HALF_PI = PI / 2,
+ pow = Math.pow,
+ min = Math.min,
+ max = Math.max;
+
+ /**
+ * Localized variables
+ */
+
+ var count = 0;
+ var slice = _.natural.slice;
+ var perf = ((root.performance && root.performance.now) ? root.performance : Date);
+ var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
+ var getLength = function(obj) {
+ return obj == null ? void 0 : obj['length'];
+ };
+ var isArrayLike = function(collection) {
+ var length = getLength(collection);
+ return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
+ };
+
+ /**
+ * Cross browser dom events.
+ */
+ var dom = {
+
+ temp: (root.document ? root.document.createElement('div') : {}),
+
+ hasEventListeners: _.isFunction(root.addEventListener),
+
+ 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.requestAnimationFrame, cancel;
+
+ if(!request) {
+ for (var i = 0; i < vendors.length; i++) {
+ request = root[vendors[i] + 'RequestAnimationFrame'] || request;
+ cancel = root[vendors[i] + 'CancelAnimationFrame']
+ || root[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.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ // cancel = cancel || function(id) {
+ // clearTimeout(id);
+ // };
+ }
+
+ request.init = _.once(loop);
+
+ return request;
+
+ }
+
+ };
+
+ /**
+ * @class
+ */
+ var Two = root.Two = function(options) {
+
+ // Determine what Renderer to use and setup a scene.
+
+ var params = _.defaults(options || {}, {
+ fullscreen: false,
+ width: 640,
+ height: 480,
+ type: Two.Types.svg,
+ autostart: false
+ });
+
+ _.each(params, function(v, k) {
+ if (k === 'fullscreen' || k === 'autostart') {
+ 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);
+ Two.Utils.setPlaying.call(this, params.autostart);
+ this.frameCount = 0;
+
+ if (params.fullscreen) {
+
+ var fitted = _.bind(fitToWindow, this);
+ _.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(root, 'resize', fitted);
+ fitted();
+
+
+ } else if (!_.isElement(params.domElement)) {
+
+ this.renderer.setSize(params.width, params.height, this.ratio);
+ this.width = params.width;
+ this.height = params.height;
+
+ }
+
+ this.scene = this.renderer.scene;
+
+ Two.Instances.push(this);
+ raf.init();
+
+ };
+
+ _.extend(Two, {
+
+ /**
+ * Access to root in other files.
+ */
+
+ root: root,
+
+ /**
+ * Primitive
+ */
+
+ Array: root.Float32Array || Array,
+
+ Types: {
+ webgl: 'WebGLRenderer',
+ svg: 'SVGRenderer',
+ canvas: 'CanvasRenderer'
+ },
+
+ Version: 'v0.7.0',
+
+ Identifier: 'two_',
+
+ Properties: {
+ hierarchy: 'hierarchy',
+ demotion: 'demotion'
+ },
+
+ Events: {
+ play: 'play',
+ pause: 'pause',
+ update: 'update',
+ render: 'render',
+ resize: 'resize',
+ change: 'change',
+ remove: 'remove',
+ insert: 'insert',
+ order: 'order',
+ load: 'load'
+ },
+
+ Commands: {
+ move: 'M',
+ line: 'L',
+ curve: 'C',
+ close: 'Z'
+ },
+
+ Resolution: 8,
+
+ Instances: [],
+
+ noConflict: function() {
+ root.Two = previousTwo;
+ return this;
+ },
+
+ uniqueId: function() {
+ var id = count;
+ count++;
+ return id;
+ },
+
+ Utils: _.extend(_, {
+
+ performance: perf,
+
+ defineProperty: 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;
+ }
+ });
+
+ },
+
+ /**
+ * Release an arbitrary class' events from the two.js corpus and recurse
+ * through its children and or vertices.
+ */
+ release: function(obj) {
+
+ if (!_.isObject(obj)) {
+ return;
+ }
+
+ if (_.isFunction(obj.unbind)) {
+ obj.unbind();
+ }
+
+ if (obj.vertices) {
+ if (_.isFunction(obj.vertices.unbind)) {
+ obj.vertices.unbind();
+ }
+ _.each(obj.vertices, function(v) {
+ if (_.isFunction(v.unbind)) {
+ v.unbind();
+ }
+ });
+ }
+
+ if (obj.children) {
+ _.each(obj.children, function(obj) {
+ Two.Utils.release(obj);
+ });
+ }
+
+ },
+
+ xhr: function(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;
+
+ },
+
+ Curve: {
+
+ CollinearityEpsilon: pow(10, -30),
+
+ RecursionLimit: 16,
+
+ CuspLimit: 0,
+
+ Tolerance: {
+ distance: 0.25,
+ angle: 0,
+ epsilon: 0.01
+ },
+
+ // 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]
+ ]
+
+ },
+
+ /**
+ * Account for high dpi rendering.
+ * http://www.html5rocks.com/en/tutorials/canvas/hidpi/
+ */
+
+ devicePixelRatio: root.devicePixelRatio || 1,
+
+ getBackingStoreRatio: function(ctx) {
+ return ctx.webkitBackingStorePixelRatio ||
+ ctx.mozBackingStorePixelRatio ||
+ ctx.msBackingStorePixelRatio ||
+ ctx.oBackingStorePixelRatio ||
+ ctx.backingStorePixelRatio || 1;
+ },
+
+ getRatio: function(ctx) {
+ return Two.Utils.devicePixelRatio / getBackingStoreRatio(ctx);
+ },
+
+ /**
+ * Properly defer play calling until after all objects
+ * have been updated with their newest styles.
+ */
+ setPlaying: function(b) {
+
+ this.playing = !!b;
+ return this;
+
+ },
+
+ /**
+ * Return the computed matrix of a nested object.
+ * TODO: Optimize traversal.
+ */
+ getComputedMatrix: function(object, matrix) {
+
+ matrix = (matrix && matrix.identity()) || new Two.Matrix();
+ var parent = object, matrices = [];
+
+ while (parent && parent._matrix) {
+ matrices.push(parent._matrix);
+ parent = parent.parent;
+ }
+
+ matrices.reverse();
+
+ _.each(matrices, function(m) {
+
+ 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;
+
+ },
+
+ deltaTransformPoint: function(matrix, x, y) {
+
+ var dx = x * matrix.a + y * matrix.c + 0;
+ var dy = x * matrix.b + y * matrix.d + 0;
+
+ return new Two.Vector(dx, dy);
+
+ },
+
+ /**
+ * https://gist.github.com/2052247
+ */
+ decomposeMatrix: function(matrix) {
+
+ // calculate delta transform point
+ var px = Two.Utils.deltaTransformPoint(matrix, 0, 1);
+ var py = Two.Utils.deltaTransformPoint(matrix, 1, 0);
+
+ // calculate skew
+ var skewX = ((180 / Math.PI) * Math.atan2(px.y, px.x) - 90);
+ var skewY = ((180 / Math.PI) * Math.atan2(py.y, py.x));
+
+ 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),
+ skewX: skewX,
+ skewY: skewY,
+ rotation: skewX // rotation is the same as skew x
+ };
+
+ },
+
+ /**
+ * Walk through item properties and pick the ones of interest.
+ * Will try to resolve styles applied via CSS
+ *
+ * TODO: Reverse calculate `Two.Gradient`s for fill / stroke
+ * of any given path.
+ */
+ applySvgAttributes: function(node, elem) {
+
+ var attributes = {}, styles = {}, i, key, value, attr;
+
+ // Not available in non browser environments
+ if (getComputedStyle) {
+ // Convert CSSStyleDeclaration to a normal object
+ var computedStyles = 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 (value !== undefined) {
+ styles[key] = value;
+ }
+ }
+ }
+
+ // Convert NodeMap to a normal object
+ i = node.attributes.length;
+ while (i--) {
+ attr = node.attributes[i];
+ 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 (!_.isUndefined(styles.opacity)) {
+ styles['stroke-opacity'] = styles.opacity;
+ styles['fill-opacity'] = styles.opacity;
+ }
+
+ // Merge attributes and applied styles (attributes take precedence)
+ _.extend(styles, attributes);
+
+ // Similarly visibility is influenced by the value of both display and visibility.
+ // Calculate a unified value here which defaults to `true`.
+ styles.visible = !(_.isUndefined(styles.display) && styles.display === 'none')
+ || (_.isUndefined(styles.visibility) && styles.visibility === 'hidden');
+
+ // Now iterate the whole thing
+ for (key in styles) {
+ value = styles[key];
+
+ switch (key) {
+ case 'transform':
+ // TODO: Check this out https://github.com/paperjs/paper.js/blob/master/src/svg/SVGImport.js#L313
+ if (value === 'none') break;
+ var m = node.getCTM ? node.getCTM() : null;
+
+ // Might happen when transform string is empty or not valid.
+ if (m === null) break;
+
+ // // Option 1: edit the underlying matrix and don't force an auto calc.
+ // var m = node.getCTM();
+ // elem._matrix.manual = true;
+ // elem._matrix.set(m.a, m.b, m.c, m.d, m.e, m.f);
+
+ // Option 2: Decompose and infer Two.js related properties.
+ var transforms = Two.Utils.decomposeMatrix(node.getCTM());
+
+ elem.translation.set(transforms.translateX, transforms.translateY);
+ elem.rotation = transforms.rotation;
+ // Warning: Two.js elements only support uniform scalars...
+ elem.scale = transforms.scaleX;
+
+ var x = parseFloat((styles.x + '').replace('px'));
+ var y = parseFloat((styles.y + '').replace('px'));
+
+ // Override based on attributes.
+ if (x) {
+ elem.translation.x = x;
+ }
+
+ if (y) {
+ elem.translation.y = y;
+ }
+
+ break;
+ case 'visible':
+ elem.visible = value;
+ break;
+ case 'stroke-linecap':
+ elem.cap = value;
+ break;
+ case 'stroke-linejoin':
+ elem.join = value;
+ break;
+ case 'stroke-miterlimit':
+ elem.miter = value;
+ break;
+ case 'stroke-width':
+ elem.linewidth = parseFloat(value);
+ break;
+ case 'stroke-opacity':
+ case 'fill-opacity':
+ case 'opacity':
+ elem.opacity = parseFloat(value);
+ break;
+ case 'fill':
+ case 'stroke':
+ if (/url\(\#.*\)/i.test(value)) {
+ elem[key] = this.getById(
+ value.replace(/url\(\#(.*)\)/i, '$1'));
+ } else {
+ elem[key] = (value === 'none') ? 'transparent' : value;
+ }
+ break;
+ case 'id':
+ elem.id = value;
+ break;
+ case 'class':
+ elem.classList = value.split(' ');
+ break;
+ }
+ }
+
+ return elem;
+
+ },
+
+ /**
+ * Read any number of SVG node types and create Two equivalents of them.
+ */
+ read: {
+
+ svg: function() {
+ return Two.Utils.read.g.apply(this, arguments);
+ },
+
+ g: function(node) {
+
+ var group = new Two.Group();
+
+ // Switched up order to inherit more specific styles
+ Two.Utils.applySvgAttributes.call(this, node, group);
+
+ 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 = tag.replace(/svg\:/ig, '').toLowerCase();
+
+ if (tagName in Two.Utils.read) {
+ var o = Two.Utils.read[tagName].call(group, n);
+ group.add(o);
+ }
+ }
+
+ return group;
+
+ },
+
+ polygon: function(node, open) {
+
+ var points = node.getAttribute('points');
+
+ var verts = [];
+ points.replace(/(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g, function(match, p1, p2) {
+ verts.push(new Two.Anchor(parseFloat(p1), parseFloat(p2)));
+ });
+
+ var poly = new Two.Path(verts, !open).noStroke();
+ poly.fill = 'black';
+
+ return Two.Utils.applySvgAttributes.call(this, node, poly);
+
+ },
+
+ polyline: function(node) {
+ return Two.Utils.read.polygon.call(this, node, true);
+ },
+
+ path: function(node) {
+
+ var path = node.getAttribute('d');
+
+ // Create a Two.Path from the paths.
+
+ var coord = new Two.Anchor();
+ var control, coords;
+ var closed = false, relative = false;
+ 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 type = command[0];
+ var lower = type.toLowerCase();
+ var items = command.slice(1).trim().split(/[\s,]+|(?=\s?[+\-])/);
+ var pre, post, result = [], bin;
+
+ 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':
+ // TODO: Handle Ellipses
+ break;
+ }
+
+ if (bin) {
+
+ for (var j = 0, l = items.length, times = 0; j < l; j+=bin) {
+
+ var ct = type;
+ if (times > 0) {
+
+ switch (type) {
+ case 'm':
+ ct = 'l';
+ break;
+ case 'M':
+ ct = 'L';
+ break;
+ }
+
+ }
+
+ result.push([ct].concat(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
+
+ var points = [];
+ _.each(commands, function(command, i) {
+
+ var result, x, y;
+ var type = command[0];
+ var lower = type.toLowerCase();
+
+ coords = command.slice(1).trim();
+ coords = coords.replace(/(-?\d+(?:\.\d*)?)[eE]([+\-]?\d+)/g, function(match, n1, n2) {
+ return parseFloat(n1) * pow(10, n2);
+ });
+ coords = coords.split(/[\s,]+|(?=\s?[+\-])/);
+ 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 Two.Anchor(
+ x, y,
+ undefined, undefined,
+ undefined, undefined,
+ Two.Commands.close
+ );
+ }
+ break;
+
+ case 'm':
+ case 'l':
+
+ x = parseFloat(coords[0]);
+ y = parseFloat(coords[1]);
+
+ result = new Two.Anchor(
+ x, y,
+ undefined, undefined,
+ undefined, undefined,
+ lower === 'm' ? Two.Commands.move : Two.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 = lower === 'h' ? 'x' : 'y';
+ var b = a === 'x' ? 'y' : 'x';
+
+ result = new Two.Anchor(
+ undefined, undefined,
+ undefined, undefined,
+ undefined, undefined,
+ Two.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 Two.Vector();//.copy(coord);
+ }
+
+ if (lower === 'c') {
+
+ 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)) {
+ Two.Anchor.AppendCurveProperties(coord);
+ }
+
+ coord.controls.right.set(x2 - coord.x, y2 - coord.y);
+ result = new Two.Anchor(
+ x4, y4,
+ x3 - x4, y3 - y4,
+ undefined, undefined,
+ Two.Commands.curve
+ );
+
+ coord = result;
+ control = result.controls.left;
+
+ break;
+
+ case 't':
+ case 'q':
+
+ x1 = coord.x;
+ y1 = coord.y;
+
+ if (!control) {
+ control = new Two.Vector();//.copy(coord);
+ }
+
+ if (control.isZero()) {
+ x2 = x1;
+ y2 = y1;
+ } else {
+ x2 = control.x;
+ y1 = control.y;
+ }
+
+ if (lower === 'q') {
+
+ x3 = parseFloat(coords[0]);
+ y3 = parseFloat(coords[1]);
+ x4 = parseFloat(coords[1]);
+ y4 = parseFloat(coords[2]);
+
+ } else {
+
+ reflection = getReflection(coord, control, relative);
+
+ 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)) {
+ Two.Anchor.AppendCurveProperties(coord);
+ }
+
+ coord.controls.right.set(x2 - coord.x, y2 - coord.y);
+ result = new Two.Anchor(
+ x4, y4,
+ x3 - x4, y3 - y4,
+ undefined, undefined,
+ Two.Commands.curve
+ );
+
+ coord = result;
+ control = result.controls.left;
+
+ break;
+
+ case 'a':
+
+ // throw new Two.Utils.Error('not yet able to interpret Elliptical Arcs.');
+ x1 = coord.x;
+ y1 = coord.y;
+
+ var rx = parseFloat(coords[0]);
+ var ry = parseFloat(coords[1]);
+ var xAxisRotation = parseFloat(coords[2]) * Math.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;
+ }
+
+ // http://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
+
+ // Calculate midpoint mx my
+ var mx = (x4 - x1) / 2;
+ var my = (y4 - y1) / 2;
+
+ // Calculate x1' y1' F.6.5.1
+ var _x = mx * Math.cos(xAxisRotation) + my * Math.sin(xAxisRotation);
+ var _y = - mx * Math.sin(xAxisRotation) + my * Math.cos(xAxisRotation);
+
+ var rx2 = rx * rx;
+ var ry2 = ry * ry;
+ var _x2 = _x * _x;
+ var _y2 = _y * _y;
+
+ // adjust radii
+ var l = _x2 / rx2 + _y2 / ry2;
+ if (l > 1) {
+ rx *= Math.sqrt(l);
+ ry *= Math.sqrt(l);
+ }
+
+ var amp = Math.sqrt((rx2 * ry2 - rx2 * _y2 - ry2 * _x2) / (rx2 * _y2 + ry2 * _x2));
+
+ if (_.isNaN(amp)) {
+ amp = 0;
+ } else if (largeArcFlag != sweepFlag && amp > 0) {
+ amp *= -1;
+ }
+
+ // Calculate cx' cy' F.6.5.2
+ var _cx = amp * rx * _y / ry;
+ var _cy = - amp * ry * _x / rx;
+
+ // Calculate cx cy F.6.5.3
+ var cx = _cx * Math.cos(xAxisRotation) - _cy * Math.sin(xAxisRotation) + (x1 + x4) / 2;
+ var cy = _cx * Math.sin(xAxisRotation) + _cy * Math.cos(xAxisRotation) + (y1 + y4) / 2;
+
+ // vector magnitude
+ var m = function(v) { return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2)); }
+ // ratio between two vectors
+ var r = function(u, v) { return (u[0] * v[0] + u[1] * v[1]) / (m(u) * m(v)) }
+ // angle between two vectors
+ var a = function(u, v) { return (u[0] * v[1] < u[1] * v[0] ? - 1 : 1) * Math.acos(r(u,v)); }
+
+ // Calculate theta1 and delta theta F.6.5.4 + F.6.5.5
+ var t1 = a([1, 0], [(_x - _cx) / rx, (_y - _cy) / ry]);
+ var u = [(_x - _cx) / rx, (_y - _cy) / ry];
+ var v = [( - _x - _cx) / rx, ( - _y - _cy) / ry];
+ var dt = a(u, v);
+
+ if (r(u, v) <= -1) dt = Math.PI;
+ if (r(u, v) >= 1) dt = 0;
+
+ // F.6.5.6
+ if (largeArcFlag) {
+ dt = mod(dt, Math.PI * 2);
+ }
+
+ if (sweepFlag && dt > 0) {
+ dt -= Math.PI * 2;
+ }
+
+ var length = Two.Resolution;
+
+ // Save a projection of our rotation and translation to apply
+ // to the set of points.
+ var projection = new Two.Matrix()
+ .translate(cx, cy)
+ .rotate(xAxisRotation);
+
+ // Create a resulting array of Two.Anchor's to export to the
+ // the path.
+ result = _.map(_.range(length), function(i) {
+ var pct = 1 - (i / (length - 1));
+ var theta = pct * dt + t1;
+ var x = rx * Math.cos(theta);
+ var y = ry * Math.sin(theta);
+ var projected = projection.multiply(x, y, 1);
+ return new Two.Anchor(projected.x, projected.y, false, false, false, false, Two.Commands.line);;
+ });
+
+ result.push(new Two.Anchor(x4, y4, false, false, false, false, Two.Commands.line));
+
+ coord = result[result.length - 1];
+ control = coord.controls.left;
+
+ break;
+
+ }
+
+ if (result) {
+ if (_.isArray(result)) {
+ points = points.concat(result);
+ } else {
+ points.push(result);
+ }
+ }
+
+ });
+
+ if (points.length <= 1) {
+ return;
+ }
+
+ var path = new Two.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);
+ });
+
+ path.translation.addSelf(rect.centroid);
+
+ return Two.Utils.applySvgAttributes.call(this, node, path);
+
+ },
+
+ circle: function(node) {
+
+ var x = parseFloat(node.getAttribute('cx'));
+ var y = parseFloat(node.getAttribute('cy'));
+ var r = parseFloat(node.getAttribute('r'));
+
+ var circle = new Two.Circle(x, y, r).noStroke();
+ circle.fill = 'black';
+
+ return Two.Utils.applySvgAttributes.call(this, node, circle);
+
+ },
+
+ ellipse: function(node) {
+
+ 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 Two.Ellipse(x, y, width, height).noStroke();
+ ellipse.fill = 'black';
+
+ return Two.Utils.applySvgAttributes.call(this, node, ellipse);
+
+ },
+
+ rect: function(node) {
+
+ 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 w2 = width / 2;
+ var h2 = height / 2;
+
+ var rect = new Two.Rectangle(x + w2, y + h2, width, height)
+ .noStroke();
+ rect.fill = 'black';
+
+ return Two.Utils.applySvgAttributes.call(this, node, rect);
+
+ },
+
+ line: function(node) {
+
+ 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 Two.Line(x1, y1, x2, y2).noFill();
+
+ return Two.Utils.applySvgAttributes.call(this, node, line);
+
+ },
+
+ lineargradient: function(node) {
+
+ 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 = parseFloat(child.getAttribute('offset'));
+ var color = child.getAttribute('stop-color');
+ var opacity = child.getAttribute('stop-opacity');
+ var style = child.getAttribute('style');
+
+ if (_.isNull(color)) {
+ var matches = style ? style.match(/stop\-color\:\s?([\#a-fA-F0-9]*)/) : false;
+ color = matches && matches.length > 1 ? matches[1] : undefined;
+ }
+
+ if (_.isNull(opacity)) {
+ var matches = style ? style.match(/stop\-opacity\:\s?([0-9\.\-]*)/) : false;
+ opacity = matches && matches.length > 1 ? parseFloat(matches[1]) : 1;
+ }
+
+ stops.push(new Two.Gradient.Stop(offset, color, opacity));
+
+ }
+
+ var gradient = new Two.LinearGradient(x1 - ox, y1 - oy, x2 - ox,
+ y2 - oy, stops);
+
+ return Two.Utils.applySvgAttributes.call(this, node, gradient);
+
+ },
+
+ radialgradient: function(node) {
+
+ 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 = parseFloat(child.getAttribute('offset'));
+ var color = child.getAttribute('stop-color');
+ var opacity = child.getAttribute('stop-opacity');
+ var style = child.getAttribute('style');
+
+ if (_.isNull(color)) {
+ var matches = style ? style.match(/stop\-color\:\s?([\#a-fA-F0-9]*)/) : false;
+ color = matches && matches.length > 1 ? matches[1] : undefined;
+ }
+
+ if (_.isNull(opacity)) {
+ var matches = style ? style.match(/stop\-opacity\:\s?([0-9\.\-]*)/) : false;
+ opacity = matches && matches.length > 1 ? parseFloat(matches[1]) : 1;
+ }
+
+ stops.push(new Two.Gradient.Stop(offset, color, opacity));
+
+ }
+
+ var gradient = new Two.RadialGradient(cx - ox, cy - oy, r,
+ stops, fx - ox, fy - oy);
+
+ return Two.Utils.applySvgAttributes.call(this, node, gradient);
+
+ }
+
+ },
+
+ /**
+ * Given 2 points (a, b) and corresponding control point for each
+ * return an array of points that represent points plotted along
+ * the curve. Number points determined by limit.
+ */
+ subdivide: function(x1, y1, x2, y2, x3, y3, x4, y4, limit) {
+
+ limit = limit || Two.Utils.Curve.RecursionLimit;
+ var amount = limit + 1;
+
+ // TODO: Issue 73
+ // Don't recurse if the end points are identical
+ if (x1 === x4 && y1 === y4) {
+ return [new Two.Anchor(x4, y4)];
+ }
+
+ return _.map(_.range(0, amount), function(i) {
+
+ var t = i / amount;
+ var x = getPointOnCubicBezier(t, x1, x2, x3, x4);
+ var y = getPointOnCubicBezier(t, y1, y2, y3, y4);
+
+ return new Two.Anchor(x, y);
+
+ });
+
+ },
+
+ getPointOnCubicBezier: 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);
+ },
+
+ /**
+ * 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`.
+ */
+ getCurveLength: 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 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 sqrt(dx * dx + dy * dy);
+ };
+
+ return integrate(
+ integrand, 0, 1, limit || Two.Utils.Curve.RecursionLimit
+ );
+
+ },
+
+ /**
+ * Integration for `getCurveLength` calculations. Referenced from
+ * Paper.js: https://github.com/paperjs/paper.js/blob/master/src/util/Numerical.js#L101
+ */
+ integrate: function(f, a, b, n) {
+ var x = Two.Utils.Curve.abscissas[n - 2],
+ w = Two.Utils.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;
+ },
+
+ /**
+ * Creates a set of points that have u, v values for anchor positions
+ */
+ 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)) {
+ Two.Anchor.AppendCurveProperties(point);
+ }
+
+ var prev = closed ? mod(i - 1, l) : max(i - 1, 0);
+ var next = closed ? mod(i + 1, l) : min(i + 1, last);
+
+ var a = points[prev];
+ var b = point;
+ var c = points[next];
+ getControlPoints(a, b, c);
+
+ b._command = i === 0 ? Two.Commands.move : Two.Commands.curve;
+
+ b.controls.left.x = _.isNumber(b.controls.left.x) ? b.controls.left.x : b.x;
+ b.controls.left.y = _.isNumber(b.controls.left.y) ? b.controls.left.y : b.y;
+
+ b.controls.right.x = _.isNumber(b.controls.right.x) ? b.controls.right.x : b.x;
+ b.controls.right.y = _.isNumber(b.controls.right.y) ? b.controls.right.y : b.y;
+
+ }
+
+ },
+
+ /**
+ * Given three coordinates return the control points for the middle, b,
+ * vertex.
+ */
+ getControlPoints: function(a, b, c) {
+
+ var a1 = angleBetween(a, b);
+ var a2 = angleBetween(c, b);
+
+ var d1 = distanceBetween(a, b);
+ var d2 = distanceBetween(c, b);
+
+ var mid = (a1 + a2) / 2;
+
+ // So we know which angle corresponds to which side.
+
+ b.u = _.isObject(b.controls.left) ? b.controls.left : new Two.Vector(0, 0);
+ b.v = _.isObject(b.controls.right) ? b.controls.right : new Two.Vector(0, 0);
+
+ // TODO: Issue 73
+ if (d1 < 0.0001 || d2 < 0.0001) {
+ if (!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;
+ } else {
+ mid -= HALF_PI;
+ }
+
+ b.controls.left.x = cos(mid) * d1;
+ b.controls.left.y = sin(mid) * d1;
+
+ mid -= PI;
+
+ b.controls.right.x = cos(mid) * d2;
+ b.controls.right.y = sin(mid) * d2;
+
+ if (!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;
+
+ },
+
+ /**
+ * Get the reflection of a point "b" about point "a". Where "a" is in
+ * absolute space and "b" is relative to "a".
+ *
+ * http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
+ */
+ getReflection: function(a, b, relative) {
+
+ return new Two.Vector(
+ 2 * a.x - (b.x + a.x) - (relative ? a.x : 0),
+ 2 * a.y - (b.y + a.y) - (relative ? a.y : 0)
+ );
+
+ },
+
+ getAnchorsFromArcData: function(center, xAxisRotation, rx, ry, ts, td, ccw) {
+
+ var matrix = new Two.Matrix()
+ .translate(center.x, center.y)
+ .rotate(xAxisRotation);
+
+ var l = Two.Resolution;
+
+ return _.map(_.range(l), function(i) {
+
+ var pct = (i + 1) / l;
+ 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 Two.Anchor(x, y);
+ Two.Anchor.AppendCurveProperties(anchor);
+ anchor.command = Two.Commands.line;
+
+ // TODO: Calculate control points here...
+
+ return anchor;
+
+ });
+
+ },
+
+ ratioBetween: function(A, B) {
+
+ return (A.x * B.x + A.y * B.y) / (A.length() * B.length());
+
+ },
+
+ angleBetween: function(A, B) {
+
+ var dx, dy;
+
+ if (arguments.length >= 4) {
+
+ dx = arguments[0] - arguments[2];
+ dy = arguments[1] - arguments[3];
+
+ return atan2(dy, dx);
+
+ }
+
+ dx = A.x - B.x;
+ dy = A.y - B.y;
+
+ return atan2(dy, dx);
+
+ },
+
+ distanceBetweenSquared: function(p1, p2) {
+
+ var dx = p1.x - p2.x;
+ var dy = p1.y - p2.y;
+
+ return dx * dx + dy * dy;
+
+ },
+
+ distanceBetween: function(p1, p2) {
+
+ return sqrt(distanceBetweenSquared(p1, p2));
+
+ },
+
+ lerp: function(a, b, t) {
+ return t * (b - a) + a;
+ },
+
+ // A pretty fast toFixed(3) alternative
+ // See http://jsperf.com/parsefloat-tofixed-vs-math-round/18
+ toFixed: function(v) {
+ return Math.floor(v * 1000) / 1000;
+ },
+
+ mod: function(v, l) {
+
+ while (v < 0) {
+ v += l;
+ }
+
+ return v % l;
+
+ },
+
+ /**
+ * Array like collection that triggers inserted and removed events
+ * removed : pop / shift / splice
+ * inserted : push / unshift / splice (with > 2 arguments)
+ */
+ Collection: function() {
+
+ Array.call(this);
+
+ if (arguments.length > 1) {
+ Array.prototype.push.apply(this, arguments);
+ } else if (arguments[0] && Array.isArray(arguments[0])) {
+ Array.prototype.push.apply(this, arguments[0]);
+ }
+
+ },
+
+ // Custom Error Throwing for Two.js
+
+ Error: function(message) {
+ this.name = 'two.js';
+ this.message = message;
+ },
+
+ Events: {
+
+ on: function(name, callback) {
+
+ this._events || (this._events = {});
+ var list = this._events[name] || (this._events[name] = []);
+
+ list.push(callback);
+
+ return this;
+
+ },
+
+ off: function(name, callback) {
+
+ if (!this._events) {
+ return this;
+ }
+ if (!name && !callback) {
+ this._events = {};
+ return this;
+ }
+
+ var names = name ? [name] : _.keys(this._events);
+ for (var i = 0, l = names.length; i < l; i++) {
+
+ var name = names[i];
+ var list = this._events[name];
+
+ if (!!list) {
+ var events = [];
+ if (callback) {
+ for (var j = 0, k = list.length; j < k; j++) {
+ var ev = list[j];
+ ev = ev.callback ? ev.callback : ev;
+ if (callback && callback !== ev) {
+ events.push(ev);
+ }
+ }
+ }
+ this._events[name] = events;
+ }
+ }
+
+ return this;
+ },
+
+ trigger: function(name) {
+ if (!this._events) return this;
+ var args = slice.call(arguments, 1);
+ var events = this._events[name];
+ if (events) trigger(this, events, args);
+ return this;
+ },
+
+ listen: function (obj, name, callback) {
+
+ var bound = this;
+
+ if (obj) {
+ var ev = function () {
+ callback.apply(bound, arguments);
+ };
+
+ // add references about the object that assigned this listener
+ ev.obj = obj;
+ ev.name = name;
+ ev.callback = callback;
+
+ obj.on(name, ev);
+ }
+
+ return this;
+
+ },
+
+ ignore: function (obj, name, callback) {
+
+ obj.off(name, callback);
+
+ return this;
+
+ }
+
+ }
+
+ })
+
+ });
+
+ Two.Utils.Events.bind = Two.Utils.Events.on;
+ Two.Utils.Events.unbind = Two.Utils.Events.off;
+
+ var trigger = function(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);
+ }
+ };
+
+ Two.Utils.Error.prototype = new Error();
+ Two.Utils.Error.prototype.constructor = Two.Utils.Error;
+
+ Two.Utils.Collection.prototype = new Array();
+ Two.Utils.Collection.prototype.constructor = Two.Utils.Collection;
+
+ _.extend(Two.Utils.Collection.prototype, Two.Utils.Events, {
+
+ pop: function() {
+ var popped = Array.prototype.pop.apply(this, arguments);
+ this.trigger(Two.Events.remove, [popped]);
+ return popped;
+ },
+
+ shift: function() {
+ var shifted = Array.prototype.shift.apply(this, arguments);
+ this.trigger(Two.Events.remove, [shifted]);
+ return shifted;
+ },
+
+ push: function() {
+ var pushed = Array.prototype.push.apply(this, arguments);
+ this.trigger(Two.Events.insert, arguments);
+ return pushed;
+ },
+
+ unshift: function() {
+ var unshifted = Array.prototype.unshift.apply(this, arguments);
+ this.trigger(Two.Events.insert, arguments);
+ return unshifted;
+ },
+
+ splice: function() {
+ var spliced = Array.prototype.splice.apply(this, arguments);
+ var inserted;
+
+ this.trigger(Two.Events.remove, spliced);
+
+ if (arguments.length > 2) {
+ inserted = this.slice(arguments[0], arguments[0] + arguments.length - 2);
+ this.trigger(Two.Events.insert, inserted);
+ this.trigger(Two.Events.order);
+ }
+ return spliced;
+ },
+
+ sort: function() {
+ Array.prototype.sort.apply(this, arguments);
+ this.trigger(Two.Events.order);
+ return this;
+ },
+
+ reverse: function() {
+ Array.prototype.reverse.apply(this, arguments);
+ this.trigger(Two.Events.order);
+ return this;
+ }
+
+ });
+
+ // Localize utils
+
+ var distanceBetween = Two.Utils.distanceBetween,
+ getAnchorsFromArcData = Two.Utils.getAnchorsFromArcData,
+ distanceBetweenSquared = Two.Utils.distanceBetweenSquared,
+ ratioBetween = Two.Utils.ratioBetween,
+ angleBetween = Two.Utils.angleBetween,
+ getControlPoints = Two.Utils.getControlPoints,
+ getCurveFromPoints = Two.Utils.getCurveFromPoints,
+ solveSegmentIntersection = Two.Utils.solveSegmentIntersection,
+ decoupleShapes = Two.Utils.decoupleShapes,
+ mod = Two.Utils.mod,
+ getBackingStoreRatio = Two.Utils.getBackingStoreRatio,
+ getPointOnCubicBezier = Two.Utils.getPointOnCubicBezier,
+ getCurveLength = Two.Utils.getCurveLength,
+ integrate = Two.Utils.integrate,
+ getReflection = Two.Utils.getReflection;
+
+ _.extend(Two.prototype, Two.Utils.Events, {
+
+ appendTo: function(elem) {
+
+ elem.appendChild(this.renderer.domElement);
+ return this;
+
+ },
+
+ play: function() {
+
+ Two.Utils.setPlaying.call(this, true);
+ return this.trigger(Two.Events.play);
+
+ },
+
+ pause: function() {
+
+ this.playing = false;
+ return this.trigger(Two.Events.pause);
+
+ },
+
+ /**
+ * Update positions and calculations in one pass before rendering.
+ */
+ update: function() {
+
+ var animated = !!this._lastFrame;
+ var now = perf.now();
+
+ this.frameCount++;
+
+ if (animated) {
+ this.timeDelta = parseFloat((now - this._lastFrame).toFixed(3));
+ }
+ this._lastFrame = now;
+
+ 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(Two.Events.update, this.frameCount, this.timeDelta);
+
+ return this.render();
+
+ },
+
+ /**
+ * Render all drawable - visible objects of the scene.
+ */
+ render: function() {
+
+ this.renderer.render();
+ return this.trigger(Two.Events.render, this.frameCount);
+
+ },
+
+ /**
+ * Convenience Methods
+ */
+
+ add: function(o) {
+
+ var objects = o;
+ if (!(objects instanceof Array)) {
+ objects = _.toArray(arguments);
+ }
+
+ this.scene.add(objects);
+ return this;
+
+ },
+
+ remove: function(o) {
+
+ var objects = o;
+ if (!(objects instanceof Array)) {
+ objects = _.toArray(arguments);
+ }
+
+ this.scene.remove(objects);
+
+ return this;
+
+ },
+
+ clear: function() {
+
+ this.scene.remove(_.toArray(this.scene.children));
+ return this;
+
+ },
+
+ makeLine: function(x1, y1, x2, y2) {
+
+ var line = new Two.Line(x1, y1, x2, y2);
+ this.scene.add(line);
+
+ return line;
+
+ },
+
+ makeRectangle: function(x, y, width, height) {
+
+ var rect = new Two.Rectangle(x, y, width, height);
+ this.scene.add(rect);
+
+ return rect;
+
+ },
+
+ makeRoundedRectangle: function(x, y, width, height, sides) {
+
+ var rect = new Two.RoundedRectangle(x, y, width, height, sides);
+ this.scene.add(rect);
+
+ return rect;
+
+ },
+
+ makeCircle: function(ox, oy, r) {
+
+ var circle = new Two.Circle(ox, oy, r);
+ this.scene.add(circle);
+
+ return circle;
+
+ },
+
+ makeEllipse: function(ox, oy, rx, ry) {
+
+ var ellipse = new Two.Ellipse(ox, oy, rx, ry);
+ this.scene.add(ellipse);
+
+ return ellipse;
+
+ },
+
+ makeStar: function(ox, oy, or, ir, sides) {
+
+ var star = new Two.Star(ox, oy, or, ir, sides);
+ this.scene.add(star);
+
+ return star;
+
+ },
+
+ makeCurve: function(p) {
+
+ var l = arguments.length, points = p;
+ if (!_.isArray(p)) {
+ points = [];
+ for (var i = 0; i < l; i+=2) {
+ var x = arguments[i];
+ if (!_.isNumber(x)) {
+ break;
+ }
+ var y = arguments[i + 1];
+ points.push(new Two.Anchor(x, y));
+ }
+ }
+
+ var last = arguments[l - 1];
+ var curve = new Two.Path(points, !(_.isBoolean(last) ? 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;
+
+ },
+
+ makePolygon: function(ox, oy, r, sides) {
+
+ var poly = new Two.Polygon(ox, oy, r, sides);
+ this.scene.add(poly);
+
+ return poly;
+
+ },
+
+ /*
+ * Make an Arc Segment
+ */
+
+ makeArcSegment: function(ox, oy, ir, or, sa, ea, res) {
+ var arcSegment = new Two.ArcSegment(ox, oy, ir, or, sa, ea, res);
+ this.scene.add(arcSegment);
+ return arcSegment;
+ },
+
+ /**
+ * Convenience method to make and draw a Two.Path.
+ */
+ makePath: function(p) {
+
+ var l = arguments.length, points = p;
+ if (!_.isArray(p)) {
+ points = [];
+ for (var i = 0; i < l; i+=2) {
+ var x = arguments[i];
+ if (!_.isNumber(x)) {
+ break;
+ }
+ var y = arguments[i + 1];
+ points.push(new Two.Anchor(x, y));
+ }
+ }
+
+ var last = arguments[l - 1];
+ var path = new Two.Path(points, !(_.isBoolean(last) ? last : undefined));
+ var rect = path.getBoundingClientRect();
+ path.center().translation
+ .set(rect.left + rect.width / 2, rect.top + rect.height / 2);
+
+ this.scene.add(path);
+
+ return path;
+
+ },
+
+ /**
+ * Convenience method to make and add a Two.Text.
+ */
+ makeText: function(message, x, y, styles) {
+ var text = new Two.Text(message, x, y, styles);
+ this.add(text);
+ return text;
+ },
+
+ /**
+ * Convenience method to make and add a Two.LinearGradient.
+ */
+ makeLinearGradient: function(x1, y1, x2, y2 /* stops */) {
+
+ var stops = slice.call(arguments, 4);
+ var gradient = new Two.LinearGradient(x1, y1, x2, y2, stops);
+
+ this.add(gradient);
+
+ return gradient;
+
+ },
+
+ /**
+ * Convenience method to make and add a Two.RadialGradient.
+ */
+ makeRadialGradient: function(x1, y1, r /* stops */) {
+
+ var stops = slice.call(arguments, 3);
+ var gradient = new Two.RadialGradient(x1, y1, r, stops);
+
+ this.add(gradient);
+
+ return gradient;
+
+ },
+
+ makeSprite: function(path, x, y, cols, rows, frameRate, autostart) {
+
+ var sprite = new Two.Sprite(path, x, y, cols, rows, frameRate);
+ if (!!autostart) {
+ sprite.play();
+ }
+ this.add(sprite);
+
+ return sprite;
+
+ },
+
+ makeImageSequence: function(paths, x, y, frameRate, autostart) {
+
+ var imageSequence = new Two.ImageSequence(paths, x, y, frameRate);
+ if (!!autostart) {
+ imageSequence.play();
+ }
+ this.add(imageSequence);
+
+ return imageSequence;
+
+ },
+
+ makeTexture: function(path, callback) {
+
+ var texture = new Two.Texture(path, callback);
+ return texture;
+
+ },
+
+ makeGroup: function(o) {
+
+ var objects = o;
+ if (!(objects instanceof Array)) {
+ objects = _.toArray(arguments);
+ }
+
+ var group = new Two.Group();
+ this.scene.add(group);
+ group.add(objects);
+
+ return group;
+
+ },
+
+ /**
+ * 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.
+ *
+ * @param {Object} svgNode - The node to be parsed
+ * @param {Boolean} shallow - Don't create a top-most group but
+ * append all contents directly
+ */
+ interpret: function(svgNode, shallow) {
+
+ var tag = svgNode.tagName.toLowerCase();
+
+ if (!(tag in Two.Utils.read)) {
+ return null;
+ }
+
+ var node = Two.Utils.read[tag].call(this, svgNode);
+
+ if (shallow && node instanceof Two.Group) {
+ this.add(node.children);
+ } else {
+ this.add(node);
+ }
+
+ return node;
+
+ },
+
+ /**
+ * Load an SVG file / text and interpret.
+ */
+ load: function(text, callback) {
+
+ var nodes = [], elem, i;
+
+ if (/.*\.svg/ig.test(text)) {
+
+ Two.Utils.xhr(text, _.bind(function(data) {
+
+ dom.temp.innerHTML = data;
+ for (i = 0; i < dom.temp.children.length; i++) {
+ elem = dom.temp.children[i];
+ nodes.push(this.interpret(elem));
+ }
+
+ callback(nodes.length <= 1 ? nodes[0] : nodes,
+ dom.temp.children.length <= 1 ? dom.temp.children[0] : dom.temp.children);
+
+ }, this));
+
+ return this;
+
+ }
+
+ dom.temp.innerHTML = text;
+ for (i = 0; i < dom.temp.children.length; i++) {
+ elem = dom.temp.children[i];
+ nodes.push(this.interpret(elem));
+ }
+
+ callback(nodes.length <= 1 ? nodes[0] : nodes,
+ dom.temp.children.length <= 1 ? dom.temp.children[0] : dom.temp.children);
+
+ return this;
+
+ }
+
+ });
+
+ 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);
+ this.trigger(Two.Events.resize, width, height);
+
+ }
+
+ // Request Animation Frame
+
+ var raf = dom.getRequestAnimationFrame();
+
+ function loop() {
+
+ raf(loop);
+
+ for (var i = 0; i < Two.Instances.length; i++) {
+ var t = Two.Instances[i];
+ if (t.playing) {
+ t.update();
+ }
+ }
+
+ }
+
+ if (typeof define === 'function' && define.amd) {
+ define('two', [], function() {
+ return Two;
+ });
+ } else if (typeof module != 'undefined' && module.exports) {
+ module.exports = Two;
+ }
+
+ return Two;
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+
+ var Registry = Two.Registry = function() {
+
+ this.map = {};
+
+ };
+
+ _.extend(Registry, {
+
+ });
+
+ _.extend(Registry.prototype, {
+
+ add: function(id, obj) {
+ this.map[id] = obj;
+ return this;
+ },
+
+ remove: function(id) {
+ delete this.map[id];
+ return this;
+ },
+
+ get: function(id) {
+ return this.map[id];
+ },
+
+ contains: function(id) {
+ return id in this.map;
+ }
+
+ });
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+
+ var Vector = Two.Vector = function(x, y) {
+
+ this.x = x || 0;
+ this.y = y || 0;
+
+ };
+
+ _.extend(Vector, {
+
+ zero: new Two.Vector()
+
+ });
+
+ _.extend(Vector.prototype, Two.Utils.Events, {
+
+ set: function(x, y) {
+ this.x = x;
+ this.y = y;
+ return this;
+ },
+
+ copy: function(v) {
+ this.x = v.x;
+ this.y = v.y;
+ return this;
+ },
+
+ clear: function() {
+ this.x = 0;
+ this.y = 0;
+ return this;
+ },
+
+ clone: function() {
+ return new Vector(this.x, this.y);
+ },
+
+ add: function(v1, v2) {
+ this.x = v1.x + v2.x;
+ this.y = v1.y + v2.y;
+ return this;
+ },
+
+ addSelf: function(v) {
+ this.x += v.x;
+ this.y += v.y;
+ return this;
+ },
+
+ sub: function(v1, v2) {
+ this.x = v1.x - v2.x;
+ this.y = v1.y - v2.y;
+ return this;
+ },
+
+ subSelf: function(v) {
+ this.x -= v.x;
+ this.y -= v.y;
+ return this;
+ },
+
+ multiplySelf: function(v) {
+ this.x *= v.x;
+ this.y *= v.y;
+ return this;
+ },
+
+ multiplyScalar: function(s) {
+ this.x *= s;
+ this.y *= s;
+ return this;
+ },
+
+ divideScalar: function(s) {
+ if (s) {
+ this.x /= s;
+ this.y /= s;
+ } else {
+ this.set(0, 0);
+ }
+ return this;
+ },
+
+ negate: function() {
+ return this.multiplyScalar(-1);
+ },
+
+ dot: function(v) {
+ return this.x * v.x + this.y * v.y;
+ },
+
+ lengthSquared: function() {
+ return this.x * this.x + this.y * this.y;
+ },
+
+ length: function() {
+ return Math.sqrt(this.lengthSquared());
+ },
+
+ normalize: function() {
+ return this.divideScalar(this.length());
+ },
+
+ distanceTo: function(v) {
+ return Math.sqrt(this.distanceToSquared(v));
+ },
+
+ distanceToSquared: function(v) {
+ var dx = this.x - v.x,
+ dy = this.y - v.y;
+ return dx * dx + dy * dy;
+ },
+
+ setLength: function(l) {
+ return this.normalize().multiplyScalar(l);
+ },
+
+ equals: function(v, eps) {
+ eps = (typeof eps === 'undefined') ? 0.0001 : eps;
+ return (this.distanceTo(v) < eps);
+ },
+
+ 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);
+ },
+
+ isZero: function(eps) {
+ eps = (typeof eps === 'undefined') ? 0.0001 : eps;
+ return (this.length() < eps);
+ },
+
+ toString: function() {
+ return this.x + ', ' + this.y;
+ },
+
+ toObject: function() {
+ return { x: this.x, y: this.y };
+ },
+
+ rotate: function (radians) {
+ var cos = Math.cos(radians);
+ var sin = Math.sin(radians);
+ this.x = this.x * cos - this.y * sin;
+ this.y = this.x * sin + this.y * cos;
+ return this;
+ }
+
+ });
+
+ var BoundProto = {
+
+ set: function(x, y) {
+ this._x = x;
+ this._y = y;
+ return this.trigger(Two.Events.change);
+ },
+
+ copy: function(v) {
+ this._x = v.x;
+ this._y = v.y;
+ return this.trigger(Two.Events.change);
+ },
+
+ clear: function() {
+ this._x = 0;
+ this._y = 0;
+ return this.trigger(Two.Events.change);
+ },
+
+ clone: function() {
+ return new Vector(this._x, this._y);
+ },
+
+ add: function(v1, v2) {
+ this._x = v1.x + v2.x;
+ this._y = v1.y + v2.y;
+ return this.trigger(Two.Events.change);
+ },
+
+ addSelf: function(v) {
+ this._x += v.x;
+ this._y += v.y;
+ return this.trigger(Two.Events.change);
+ },
+
+ sub: function(v1, v2) {
+ this._x = v1.x - v2.x;
+ this._y = v1.y - v2.y;
+ return this.trigger(Two.Events.change);
+ },
+
+ subSelf: function(v) {
+ this._x -= v.x;
+ this._y -= v.y;
+ return this.trigger(Two.Events.change);
+ },
+
+ multiplySelf: function(v) {
+ this._x *= v.x;
+ this._y *= v.y;
+ return this.trigger(Two.Events.change);
+ },
+
+ multiplyScalar: function(s) {
+ this._x *= s;
+ this._y *= s;
+ return this.trigger(Two.Events.change);
+ },
+
+ divideScalar: function(s) {
+ if (s) {
+ this._x /= s;
+ this._y /= s;
+ return this.trigger(Two.Events.change);
+ }
+ return this.clear();
+ },
+
+ negate: function() {
+ return this.multiplyScalar(-1);
+ },
+
+ dot: function(v) {
+ return this._x * v.x + this._y * v.y;
+ },
+
+ lengthSquared: function() {
+ return this._x * this._x + this._y * this._y;
+ },
+
+ length: function() {
+ return Math.sqrt(this.lengthSquared());
+ },
+
+ normalize: function() {
+ return this.divideScalar(this.length());
+ },
+
+ distanceTo: function(v) {
+ return Math.sqrt(this.distanceToSquared(v));
+ },
+
+ distanceToSquared: function(v) {
+ var dx = this._x - v.x,
+ dy = this._y - v.y;
+ return dx * dx + dy * dy;
+ },
+
+ setLength: function(l) {
+ return this.normalize().multiplyScalar(l);
+ },
+
+ equals: function(v, eps) {
+ eps = (typeof eps === 'undefined') ? 0.0001 : eps;
+ return (this.distanceTo(v) < eps);
+ },
+
+ 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);
+ },
+
+ isZero: function(eps) {
+ eps = (typeof eps === 'undefined') ? 0.0001 : eps;
+ return (this.length() < eps);
+ },
+
+ toString: function() {
+ return this._x + ', ' + this._y;
+ },
+
+ toObject: function() {
+ return { x: this._x, y: this._y };
+ },
+
+ rotate: function (radians) {
+ var cos = Math.cos(radians);
+ var sin = Math.sin(radians);
+ 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(Two.Events.change, 'x');
+ }
+ };
+
+ var ygs = {
+ enumerable: true,
+ get: function() {
+ return this._y;
+ },
+ set: function(v) {
+ this._y = v;
+ this.trigger(Two.Events.change, 'y');
+ }
+ };
+
+ /**
+ * 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.
+ */
+
+ Two.Vector.prototype.bind = Two.Vector.prototype.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
+ }
+
+ Two.Utils.Events.bind.apply(this, arguments);
+
+ return this;
+
+ };
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ // Localized variables
+ var commands = Two.Commands;
+ var _ = Two.Utils;
+
+ /**
+ * An object that holds 3 `Two.Vector`s, the anchor point and its
+ * corresponding handles: `left` and `right`.
+ */
+ var Anchor = Two.Anchor = function(x, y, ux, uy, vx, vy, command) {
+
+ Two.Vector.call(this, x, y);
+
+ this._broadcast = _.bind(function() {
+ this.trigger(Two.Events.change);
+ }, this);
+
+ this._command = command || commands.move;
+ this._relative = true;
+
+ if (!command) {
+ return this;
+ }
+
+ Anchor.AppendCurveProperties(this);
+
+ if (_.isNumber(ux)) {
+ this.controls.left.x = ux;
+ }
+ if (_.isNumber(uy)) {
+ this.controls.left.y = uy;
+ }
+ if (_.isNumber(vx)) {
+ this.controls.right.x = vx;
+ }
+ if (_.isNumber(vy)) {
+ this.controls.right.y = vy;
+ }
+
+ };
+
+ _.extend(Anchor, {
+
+ AppendCurveProperties: function(anchor) {
+ anchor.controls = {
+ left: new Two.Vector(0, 0),
+ right: new Two.Vector(0, 0)
+ };
+ }
+
+ });
+
+ var AnchorProto = {
+
+ listen: function() {
+
+ if (!_.isObject(this.controls)) {
+ Anchor.AppendCurveProperties(this);
+ }
+
+ this.controls.left.bind(Two.Events.change, this._broadcast);
+ this.controls.right.bind(Two.Events.change, this._broadcast);
+
+ return this;
+
+ },
+
+ ignore: function() {
+
+ this.controls.left.unbind(Two.Events.change, this._broadcast);
+ this.controls.right.unbind(Two.Events.change, this._broadcast);
+
+ return this;
+
+ },
+
+ clone: function() {
+
+ var controls = this.controls;
+
+ var clone = new Two.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;
+
+ },
+
+ 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;
+ },
+
+ 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].join(', ');
+ }
+
+ };
+
+ Object.defineProperty(Anchor.prototype, '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);
+ }
+ return this.trigger(Two.Events.change);
+ }
+
+ });
+
+ Object.defineProperty(Anchor.prototype, 'relative', {
+
+ enumerable: true,
+
+ get: function() {
+ return this._relative;
+ },
+
+ set: function(b) {
+ if (this._relative == b) {
+ return this;
+ }
+ this._relative = !!b;
+ return this.trigger(Two.Events.change);
+ }
+
+ });
+
+ _.extend(Anchor.prototype, Two.Vector.prototype, AnchorProto);
+
+ // Make it possible to bind and still have the Anchor specific
+ // inheritance from Two.Vector
+ Two.Anchor.prototype.bind = Two.Anchor.prototype.on = function() {
+ Two.Vector.prototype.bind.apply(this, arguments);
+ _.extend(this, AnchorProto);
+ };
+
+ Two.Anchor.prototype.unbind = Two.Anchor.prototype.off = function() {
+ Two.Vector.prototype.unbind.apply(this, arguments);
+ _.extend(this, AnchorProto);
+ };
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ /**
+ * Constants
+ */
+ var cos = Math.cos, sin = Math.sin, tan = Math.tan;
+ var _ = Two.Utils;
+
+ /**
+ * Two.Matrix contains an array of elements that represent
+ * the two dimensional 3 x 3 matrix as illustrated below:
+ *
+ * =====
+ * a b c
+ * d e f
+ * g h i // this row is not really used in 2d transformations
+ * =====
+ *
+ * String order is for transform strings: a, d, b, e, c, f
+ *
+ * @class
+ */
+ var Matrix = Two.Matrix = function(a, b, c, d, e, f) {
+
+ this.elements = new Two.Array(9);
+
+ var elements = a;
+ if (!_.isArray(elements)) {
+ elements = _.toArray(arguments);
+ }
+
+ // initialize the elements with default values.
+
+ this.identity().set(elements);
+
+ };
+
+ _.extend(Matrix, {
+
+ Identity: [
+ 1, 0, 0,
+ 0, 1, 0,
+ 0, 0, 1
+ ],
+
+ /**
+ * Multiply two matrix 3x3 arrays
+ */
+ 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 Two.Array(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, Two.Utils.Events, {
+
+ /**
+ * Takes an array of elements or the arguments list itself to
+ * set and update the current matrix's elements. Only updates
+ * specified values.
+ */
+ set: function(a) {
+
+ var elements = a;
+ if (!_.isArray(elements)) {
+ elements = _.toArray(arguments);
+ }
+
+ _.extend(this.elements, elements);
+
+ return this.trigger(Two.Events.change);
+
+ },
+
+ /**
+ * Turn matrix to identity, like resetting.
+ */
+ identity: function() {
+
+ this.set(Matrix.Identity);
+
+ return this;
+
+ },
+
+ /**
+ * Multiply scalar or multiply by another matrix.
+ */
+ multiply: function(a, b, c, d, e, f, g, h, i) {
+
+ var elements = arguments, l = elements.length;
+
+ // Multiply scalar
+
+ if (l <= 1) {
+
+ _.each(this.elements, function(v, i) {
+ this.elements[i] = v * a;
+ }, this);
+
+ return this.trigger(Two.Events.change);
+
+ }
+
+ if (l <= 3) { // 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 = elements;
+
+ 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(Two.Events.change);
+
+ },
+
+ inverse: function(out) {
+
+ var a = this.elements;
+ out = out || new Two.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;
+
+ },
+
+ /**
+ * Set a scalar onto the matrix.
+ */
+ 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);
+
+ },
+
+ /**
+ * Rotate the matrix.
+ */
+ rotate: function(radians) {
+
+ var c = cos(radians);
+ var s = sin(radians);
+
+ return this.multiply(c, -s, 0, s, c, 0, 0, 0, 1);
+
+ },
+
+ /**
+ * Translate the matrix.
+ */
+ translate: function(x, y) {
+
+ return this.multiply(1, 0, x, 0, 1, y, 0, 0, 1);
+
+ },
+
+ /*
+ * Skew the matrix by an angle in the x axis direction.
+ */
+ skewX: function(radians) {
+
+ var a = tan(radians);
+
+ return this.multiply(1, a, 0, 0, 1, 0, 0, 0, 1);
+
+ },
+
+ /*
+ * Skew the matrix by an angle in the y axis direction.
+ */
+ skewY: function(radians) {
+
+ var a = tan(radians);
+
+ return this.multiply(1, 0, 0, a, 1, 0, 0, 0, 1);
+
+ },
+
+ /**
+ * Create a transform string to be used with rendering apis.
+ */
+ toString: function(fullMatrix) {
+ var temp = [];
+
+ this.toArray(fullMatrix, temp);
+
+ return temp.join(' ');
+
+ },
+
+ /**
+ * Create a transform array to be used with rendering apis.
+ */
+ toArray: function(fullMatrix, output) {
+
+ var elements = this.elements;
+ var hasOutput = !!output;
+
+ var a = parseFloat(elements[0].toFixed(3));
+ var b = parseFloat(elements[1].toFixed(3));
+ var c = parseFloat(elements[2].toFixed(3));
+ var d = parseFloat(elements[3].toFixed(3));
+ var e = parseFloat(elements[4].toFixed(3));
+ var f = parseFloat(elements[5].toFixed(3));
+
+ if (!!fullMatrix) {
+
+ var g = parseFloat(elements[6].toFixed(3));
+ var h = parseFloat(elements[7].toFixed(3));
+ var i = parseFloat(elements[8].toFixed(3));
+
+ 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
+ ];
+
+ },
+
+ /**
+ * Clone the current matrix.
+ */
+ clone: function() {
+ var a, b, c, d, e, f, g, h, i;
+
+ a = this.elements[0];
+ b = this.elements[1];
+ c = this.elements[2];
+ d = this.elements[3];
+ e = this.elements[4];
+ f = this.elements[5];
+ g = this.elements[6];
+ h = this.elements[7];
+ i = this.elements[8];
+
+ return new Two.Matrix(a, b, c, d, e, f, g, h, i);
+
+ }
+
+ });
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ // Localize variables
+ var mod = Two.Utils.mod, toFixed = Two.Utils.toFixed;
+ var _ = Two.Utils;
+
+ 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 (!_.isEmpty(attrs)) {
+ 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 Two.Commands.move point
+ ret = '';
+
+ 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;
+
+ // Access x and y directly,
+ // bypassing the getter
+ var x = toFixed(b._x);
+ var y = toFixed(b._y);
+
+ switch (b._command) {
+
+ case Two.Commands.close:
+ command = Two.Commands.close;
+ break;
+
+ case Two.Commands.curve:
+
+ ar = (a.controls && a.controls.right) || Two.Vector.zero;
+ bl = (b.controls && b.controls.left) || Two.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) ? Two.Commands.move : Two.Commands.curve) +
+ ' ' + vx + ' ' + vy + ' ' + ux + ' ' + uy + ' ' + x + ' ' + y;
+ break;
+
+ case Two.Commands.move:
+ d = b;
+ command = Two.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 === Two.Commands.curve) {
+
+ // Make sure we close to the most previous Two.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;
+ }
+
+ command += ' Z';
+
+ }
+
+ ret += command + ' ';
+
+ }
+
+ return ret;
+
+ },
+
+ getClip: function(shape) {
+
+ var clip = shape._renderer.clip;
+
+ if (!clip) {
+
+ var root = shape;
+
+ while (root.parent) {
+ root = root.parent;
+ }
+
+ clip = shape._renderer.clip = svg.createElement('clipPath');
+ root.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) {
+
+ this._update();
+
+ // 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;
+ }
+
+ if (!this._renderer.elem) {
+ this._renderer.elem = svg.createElement('g', {
+ id: this.id
+ });
+ domElement.appendChild(this._renderer.elem);
+ }
+
+ // _Update styles for the <g>
+ 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._flagOpacity) {
+ this._renderer.elem.setAttribute('opacity', this._opacity);
+ }
+
+ 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);
+ // 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) {
+ this._renderer.elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
+ } else {
+ this._renderer.elem.removeAttribute('clip-path');
+ }
+ }
+
+ return this.flagReset();
+
+ }
+
+ },
+
+ path: {
+
+ render: function(domElement) {
+
+ this._update();
+
+ // 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;
+ }
+
+ // 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._flagVertices) {
+ var vertices = svg.toString(this._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._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 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);
+ 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) {
+ // elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
+ // } else {
+ // 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._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._flagVisible) {
+ changed.visibility = this._visible ? 'visible' : 'hidden';
+ }
+
+ 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);
+ 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
+ }
+
+ }
+
+ 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._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) {
+ this._renderer.elem.childNodes.length = 0;
+ }
+
+ 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._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) {
+ this._renderer.elem.childNodes.length = 0;
+ }
+
+ 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._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 Two.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 / Bandaid
+ switch (this._repeat) {
+ case 'no-repeat':
+ changed.width += 1;
+ changed.height += 1;
+ break;
+ }
+
+ if (this._scale instanceof Two.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 if (!_.isEmpty(styles)) {
+ 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 (!_.isEmpty(changed)) {
+
+ 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();
+
+ }
+
+ }
+
+ };
+
+ /**
+ * @class
+ */
+ var Renderer = Two[Two.Types.svg] = function(params) {
+
+ this.domElement = params.domElement || svg.createElement('svg');
+
+ this.scene = new Two.Group();
+ this.scene.parent = this;
+
+ this.defs = svg.createElement('defs');
+ this.domElement.appendChild(this.defs);
+ this.domElement.defs = this.defs;
+ this.domElement.style.overflow = 'hidden';
+
+ };
+
+ _.extend(Renderer, {
+
+ Utils: svg
+
+ });
+
+ _.extend(Renderer.prototype, Two.Utils.Events, {
+
+ setSize: function(width, height) {
+
+ this.width = width;
+ this.height = height;
+
+ svg.setAttributes(this.domElement, {
+ width: width,
+ height: height
+ });
+
+ return this;
+
+ },
+
+ render: function() {
+
+ svg.group.render.call(this.scene, this.domElement);
+
+ return this;
+
+ }
+
+ });
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ /**
+ * Constants
+ */
+ var mod = Two.Utils.mod, toFixed = Two.Utils.toFixed;
+ var getRatio = Two.Utils.getRatio;
+ var _ = Two.Utils;
+
+ // 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: /(none|transparent)/i,
+
+ alignments: {
+ left: 'start',
+ middle: 'center',
+ right: 'end'
+ },
+
+ shim: function(elem) {
+ elem.tagName = 'canvas';
+ elem.nodeType = 1;
+ return elem;
+ },
+
+ group: {
+
+ renderChild: function(child) {
+ canvas[child._renderer.type].render.call(child, this.ctx, true, this.clip);
+ },
+
+ render: function(ctx) {
+
+ // TODO: Add a check here to only invoke _update if need be.
+ this._update();
+
+ var matrix = this._matrix.elements;
+ var parent = this.parent;
+ this._renderer.opacity = this._opacity * (parent && parent._renderer ? parent._renderer.opacity : 1);
+
+ var defaultMatrix = isDefaultMatrix(matrix);
+
+ var mask = this._mask;
+ // var clip = this._clip;
+
+ if (!this._renderer.context) {
+ this._renderer.context = {};
+ }
+
+ this._renderer.context.ctx = ctx;
+ // this._renderer.context.clip = clip;
+
+ if (!defaultMatrix) {
+ ctx.save();
+ 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 (!defaultMatrix) {
+ 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;
+
+ // TODO: Add a check here to only invoke _update if need be.
+ this._update();
+
+ matrix = this._matrix.elements;
+ stroke = this._stroke;
+ linewidth = this._linewidth;
+ fill = this._fill;
+ opacity = this._opacity * this.parent._renderer.opacity;
+ visible = this._visible;
+ cap = this._cap;
+ join = this._join;
+ miter = this._miter;
+ closed = this._closed;
+ commands = this._vertices; // Commands
+ length = commands.length;
+ last = length - 1;
+ defaultMatrix = isDefaultMatrix(matrix);
+
+ // mask = this._mask;
+ clip = this._clip;
+
+ if (!forced && (!visible || clip)) {
+ return this;
+ }
+
+ // 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 (_.isString(fill)) {
+ ctx.fillStyle = fill;
+ } else {
+ canvas[fill._renderer.type].render.call(fill, ctx);
+ ctx.fillStyle = fill._renderer.effect;
+ }
+ }
+ if (stroke) {
+ if (_.isString(stroke)) {
+ 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 (cap) {
+ ctx.lineCap = cap;
+ }
+ if (_.isNumber(opacity)) {
+ ctx.globalAlpha = opacity;
+ }
+
+ ctx.beginPath();
+
+ for (var i = 0; i < commands.length; i++) {
+
+ b = commands[i];
+
+ x = toFixed(b._x);
+ y = toFixed(b._y);
+
+ switch (b._command) {
+
+ case Two.Commands.close:
+ ctx.closePath();
+ break;
+
+ case Two.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) || Two.Vector.zero;
+ bl = (b.controls && b.controls.left) || Two.Vector.zero;
+
+ if (a._relative) {
+ vx = (ar.x + toFixed(a._x));
+ vy = (ar.y + toFixed(a._y));
+ } else {
+ vx = toFixed(ar.x);
+ vy = toFixed(ar.y);
+ }
+
+ if (b._relative) {
+ ux = (bl.x + toFixed(b._x));
+ uy = (bl.y + toFixed(b._y));
+ } else {
+ ux = toFixed(bl.x);
+ uy = toFixed(bl.y);
+ }
+
+ ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
+
+ if (i >= last && closed) {
+
+ c = d;
+
+ br = (b.controls && b.controls.right) || Two.Vector.zero;
+ cl = (c.controls && c.controls.left) || Two.Vector.zero;
+
+ if (b._relative) {
+ vx = (br.x + toFixed(b._x));
+ vy = (br.y + toFixed(b._y));
+ } else {
+ vx = toFixed(br.x);
+ vy = toFixed(br.y);
+ }
+
+ if (c._relative) {
+ ux = (cl.x + toFixed(c._x));
+ uy = (cl.y + toFixed(c._y));
+ } else {
+ ux = toFixed(cl.x);
+ uy = toFixed(cl.y);
+ }
+
+ x = toFixed(c._x);
+ y = toFixed(c._y);
+
+ ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
+
+ }
+
+ break;
+
+ case Two.Commands.line:
+ ctx.lineTo(x, y);
+ break;
+
+ case Two.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();
+ }
+
+ return this.flagReset();
+
+ }
+
+ },
+
+ text: {
+
+ render: function(ctx, forced, parentClipped) {
+
+ // TODO: Add a check here to only invoke _update if need be.
+ this._update();
+
+ var matrix = this._matrix.elements;
+ var stroke = this._stroke;
+ var linewidth = this._linewidth;
+ var fill = this._fill;
+ var opacity = this._opacity * this.parent._renderer.opacity;
+ var visible = this._visible;
+ var defaultMatrix = isDefaultMatrix(matrix);
+ var isOffset = fill._renderer && fill._renderer.offset
+ && stroke._renderer && stroke._renderer.offset;
+
+ var a, b, c, d, e, sx, sy;
+
+ // mask = this._mask;
+ var clip = this._clip;
+
+ if (!forced && (!visible || clip)) {
+ return this;
+ }
+
+ // 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 = canvas.alignments[this._alignment] || this._alignment;
+ ctx.textBaseline = this._baseline;
+
+ // Styles
+ if (fill) {
+ if (_.isString(fill)) {
+ ctx.fillStyle = fill;
+ } else {
+ canvas[fill._renderer.type].render.call(fill, ctx);
+ ctx.fillStyle = fill._renderer.effect;
+ }
+ }
+ if (stroke) {
+ if (_.isString(stroke)) {
+ ctx.strokeStyle = stroke;
+ } else {
+ canvas[stroke._renderer.type].render.call(stroke, ctx);
+ ctx.strokeStyle = stroke._renderer.effect;
+ }
+ }
+ if (linewidth) {
+ ctx.lineWidth = linewidth;
+ }
+ if (_.isNumber(opacity)) {
+ ctx.globalAlpha = opacity;
+ }
+
+ if (!clip && !parentClipped) {
+
+ if (!canvas.isHidden.test(fill)) {
+
+ if (fill._renderer && fill._renderer.offset) {
+
+ sx = toFixed(fill._renderer.scale.x);
+ sy = toFixed(fill._renderer.scale.y);
+
+ ctx.save();
+ ctx.translate( - toFixed(fill._renderer.offset.x),
+ - toFixed(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, toFixed(a) + 'px/',
+ toFixed(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, toFixed(c), toFixed(d));
+ ctx.restore();
+
+ } else {
+ ctx.fillText(this.value, 0, 0);
+ }
+
+ }
+
+ if (!canvas.isHidden.test(stroke)) {
+
+ if (stroke._renderer && stroke._renderer.offset) {
+
+ sx = toFixed(stroke._renderer.scale.x);
+ sy = toFixed(stroke._renderer.scale.y);
+
+ ctx.save();
+ ctx.translate(- toFixed(stroke._renderer.offset.x),
+ - toFixed(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, toFixed(a) + 'px/',
+ toFixed(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 = toFixed(e);
+ ctx.strokeText(this.value, toFixed(c), toFixed(d));
+ ctx.restore();
+
+ } else {
+ ctx.strokeText(this.value, 0, 0);
+ }
+ }
+ }
+
+ if (!defaultMatrix) {
+ ctx.restore();
+ }
+
+ // TODO: Test for text
+ if (clip && !parentClipped) {
+ ctx.clip();
+ }
+
+ 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;
+ var repeat;
+
+ 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 Two.Vector)) {
+ this._renderer.offset = new Two.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 Two.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 Two.Vector)) {
+ this._renderer.scale = new Two.Vector();
+ }
+
+ if (this._scale instanceof Two.Vector) {
+ this._renderer.scale.copy(this._scale);
+ } else {
+ this._renderer.scale.set(this._scale, this._scale);
+ }
+
+ }
+
+ return this.flagReset();
+
+ }
+
+ }
+
+ };
+
+ var Renderer = Two[Two.Types.canvas] = function(params) {
+ // Smoothing property. Defaults to true
+ // Set it to false when working with pixel art.
+ // false can lead to better performance, since it would use a cheaper interpolation algorithm.
+ // It might not make a big difference on GPU backed canvases.
+ var smoothing = (params.smoothing !== false);
+ this.domElement = params.domElement || document.createElement('canvas');
+ this.ctx = this.domElement.getContext('2d');
+ this.overdraw = params.overdraw || false;
+
+ if (!_.isUndefined(this.ctx.imageSmoothingEnabled)) {
+ this.ctx.imageSmoothingEnabled = smoothing;
+ }
+
+ // Everything drawn on the canvas needs to be added to the scene.
+ this.scene = new Two.Group();
+ this.scene.parent = this;
+ };
+
+
+ _.extend(Renderer, {
+
+ Utils: canvas
+
+ });
+
+ _.extend(Renderer.prototype, Two.Utils.Events, {
+
+ setSize: function(width, height, ratio) {
+
+ this.width = width;
+ this.height = height;
+
+ this.ratio = _.isUndefined(ratio) ? 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;
+
+ },
+
+ 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 resetTransform(ctx) {
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ }
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ /**
+ * Constants
+ */
+
+ var root = Two.root,
+ multiplyMatrix = Two.Matrix.Multiply,
+ mod = Two.Utils.mod,
+ identity = [1, 0, 0, 0, 1, 0, 0, 0, 1],
+ transformation = new Two.Array(9),
+ getRatio = Two.Utils.getRatio,
+ getComputedMatrix = Two.Utils.getComputedMatrix,
+ toFixed = Two.Utils.toFixed,
+ _ = Two.Utils;
+
+ var webgl = {
+
+ isHidden: /(none|transparent)/i,
+
+ canvas: (root.document ? root.document.createElement('canvas') : { getContext: _.identity }),
+
+ alignments: {
+ left: 'start',
+ middle: 'center',
+ right: 'end'
+ },
+
+ matrix: new Two.Matrix(),
+
+ uv: new Two.Array([
+ 0, 0,
+ 1, 0,
+ 0, 1,
+ 0, 1,
+ 1, 0,
+ 1, 1
+ ]),
+
+ 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;
+ },
+
+ renderChild: function(child) {
+ webgl[child._renderer.type].render.call(child, this.gl, this.program);
+ },
+
+ render: function(gl, program) {
+
+ 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 Two.Array(9);
+ }
+
+ // Reduce amount of object / array creation / deletion
+ this._matrix.toArray(true, transformation);
+
+ multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);
+ this._renderer.scale = this._scale * parent._renderer.scale;
+
+ if (flagParentMatrix) {
+ this._flagMatrix = true;
+ }
+
+ }
+
+ if (this._mask) {
+
+ gl.enable(gl.STENCIL_TEST);
+ gl.stencilFunc(gl.ALWAYS, 1, 1);
+
+ gl.colorMask(false, false, false, true);
+ gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
+
+ webgl[this._mask._renderer.type].render.call(this._mask, gl, program, this);
+
+ gl.colorMask(true, true, true, true);
+ gl.stencilFunc(gl.NOTEQUAL, 0, 1);
+ gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+
+ }
+
+ this._flagOpacity = parent._flagOpacity || this._flagOpacity;
+
+ this._renderer.opacity = this._opacity
+ * (parent && parent._renderer ? parent._renderer.opacity : 1);
+
+ if (this._flagSubtractions) {
+ for (var i = 0; i < this.subtractions.length; i++) {
+ webgl.group.removeChild(this.subtractions[i], gl);
+ }
+ }
+
+ this.children.forEach(webgl.group.renderChild, {
+ gl: gl,
+ program: program
+ });
+
+ if (this._mask) {
+
+ gl.colorMask(false, false, false, false);
+ gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR);
+
+ webgl[this._mask._renderer.type].render.call(this._mask, gl, program, this);
+
+ gl.colorMask(true, true, true, true);
+ gl.stencilFunc(gl.NOTEQUAL, 0, 1);
+ gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+
+ 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._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 length = commands.length;
+ var last = length - 1;
+
+ canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale), 1);
+ canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale), 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 (_.isString(fill)) {
+ ctx.fillStyle = fill;
+ } else {
+ webgl[fill._renderer.type].render.call(fill, ctx, elem);
+ ctx.fillStyle = fill._renderer.effect;
+ }
+ }
+ if (stroke) {
+ if (_.isString(stroke)) {
+ 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 (cap) {
+ ctx.lineCap = cap;
+ }
+ if (_.isNumber(opacity)) {
+ ctx.globalAlpha = opacity;
+ }
+
+ var d;
+ ctx.save();
+ ctx.scale(scale, scale);
+ ctx.translate(cx, cy);
+
+ ctx.beginPath();
+ for (var i = 0; i < commands.length; i++) {
+
+ b = commands[i];
+
+ x = toFixed(b._x);
+ y = toFixed(b._y);
+
+ switch (b._command) {
+
+ case Two.Commands.close:
+ ctx.closePath();
+ break;
+
+ case Two.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) || Two.Vector.zero;
+ bl = (b.controls && b.controls.left) || Two.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);
+ }
+
+ ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
+
+ if (i >= last && closed) {
+
+ c = d;
+
+ br = (b.controls && b.controls.right) || Two.Vector.zero;
+ cl = (c.controls && c.controls.left) || Two.Vector.zero;
+
+ 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);
+
+ ctx.bezierCurveTo(vx, vy, ux, uy, x, y);
+
+ }
+
+ break;
+
+ case Two.Commands.line:
+ ctx.lineTo(x, y);
+ break;
+
+ case Two.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 (_.isNumber(border)) {
+ 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 = this.parent;
+ var flagParentMatrix = parent._matrix.manual || parent._flagMatrix;
+ var flagMatrix = this._matrix.manual || this._flagMatrix;
+ var flagTexture = this._flagVertices || this._flagFill
+ || (this._fill instanceof Two.LinearGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagEndPoints))
+ || (this._fill instanceof Two.RadialGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagRadius || this._fill._flagCenter || this._fill._flagFocal))
+ || (this._fill instanceof Two.Texture && (this._fill._flagLoaded && this._fill.loaded || this._fill._flagOffset || this._fill._flagScale))
+ || (this._stroke instanceof Two.LinearGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagEndPoints))
+ || (this._stroke instanceof Two.RadialGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagRadius || this._stroke._flagCenter || this._stroke._flagFocal))
+ || (this._stroke instanceof Two.Texture && (this._stroke._flagLoaded && this._stroke.loaded || 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._renderer.texture;
+
+ if (flagParentMatrix || flagMatrix) {
+
+ if (!this._renderer.matrix) {
+ this._renderer.matrix = new Two.Array(9);
+ }
+
+ // Reduce amount of object / array creation / deletion
+
+ this._matrix.toArray(true, transformation);
+
+ multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);
+ this._renderer.scale = this._scale * parent._renderer.scale;
+
+ }
+
+ if (flagTexture) {
+
+ if (!this._renderer.rect) {
+ this._renderer.rect = {};
+ }
+
+ if (!this._renderer.triangles) {
+ this._renderer.triangles = new Two.Array(12);
+ }
+
+ this._renderer.opacity = this._opacity * parent._renderer.opacity;
+
+ webgl.path.getBoundingClientRect(this._vertices, this._linewidth, this._renderer.rect);
+ webgl.getTriangles(this._renderer.rect, this._renderer.triangles);
+
+ webgl.updateBuffer.call(webgl, gl, this, program);
+ webgl.updateTexture.call(webgl, gl, this);
+
+ }
+
+ // if (this._mask) {
+ // webgl[this._mask._renderer.type].render.call(mask, gl, program, this);
+ // }
+
+ if (this._clip && !forcedParent) {
+ return;
+ }
+
+ // Draw Texture
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._renderer.textureCoordsBuffer);
+
+ gl.vertexAttribPointer(program.textureCoords, 2, gl.FLOAT, false, 0, 0);
+
+ gl.bindTexture(gl.TEXTURE_2D, this._renderer.texture);
+
+
+ // Draw Rect
+
+ gl.uniformMatrix3fv(program.matrix, false, this._renderer.matrix);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._renderer.buffer);
+
+ gl.vertexAttribPointer(program.position, 2, gl.FLOAT, false, 0, 0);
+
+ gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+ 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;
+
+ canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale), 1);
+ canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale), 1);
+
+ var centroid = elem._renderer.rect.centroid;
+ var cx = centroid.x;
+ var cy = centroid.y;
+
+ var a, b, c, d, e, sx, sy;
+ 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 (_.isString(fill)) {
+ ctx.fillStyle = fill;
+ } else {
+ webgl[fill._renderer.type].render.call(fill, ctx, elem);
+ ctx.fillStyle = fill._renderer.effect;
+ }
+ }
+ if (stroke) {
+ if (_.isString(stroke)) {
+ ctx.strokeStyle = stroke;
+ } else {
+ webgl[stroke._renderer.type].render.call(stroke, ctx, elem);
+ ctx.strokeStyle = stroke._renderer.effect;
+ }
+ }
+ if (linewidth) {
+ ctx.lineWidth = linewidth;
+ }
+ if (_.isNumber(opacity)) {
+ ctx.globalAlpha = opacity;
+ }
+
+ ctx.save();
+ ctx.scale(scale, scale);
+ ctx.translate(cx, cy);
+
+ if (!webgl.isHidden.test(fill)) {
+
+ if (fill._renderer && fill._renderer.offset) {
+
+ sx = toFixed(fill._renderer.scale.x);
+ sy = toFixed(fill._renderer.scale.y);
+
+ ctx.save();
+ ctx.translate( - toFixed(fill._renderer.offset.x),
+ - toFixed(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, toFixed(a) + 'px/',
+ toFixed(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, toFixed(c), toFixed(d));
+ ctx.restore();
+
+ } else {
+ ctx.fillText(elem.value, 0, 0);
+ }
+
+ }
+
+ if (!webgl.isHidden.test(stroke)) {
+
+ if (stroke._renderer && stroke._renderer.offset) {
+
+ sx = toFixed(stroke._renderer.scale.x);
+ sy = toFixed(stroke._renderer.scale.y);
+
+ ctx.save();
+ ctx.translate(- toFixed(stroke._renderer.offset.x),
+ - toFixed(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, toFixed(a) + 'px/',
+ toFixed(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 = toFixed(e);
+ ctx.strokeText(elem.value, toFixed(c), toFixed(d));
+ ctx.restore();
+
+ } else {
+ ctx.strokeText(elem.value, 0, 0);
+ }
+
+ }
+
+ 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;
+ var height = Math.max(elem._size || elem._leading);
+
+ if (this._linewidth && !webgl.isHidden.test(this._stroke)) {
+ // width += this._linewidth; // TODO: Not sure if the `measure` calcs this.
+ height += this._linewidth;
+ }
+
+ 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 = this.parent;
+ var flagParentMatrix = parent._matrix.manual || parent._flagMatrix;
+ var flagMatrix = this._matrix.manual || this._flagMatrix;
+ var flagTexture = this._flagVertices || this._flagFill
+ || (this._fill instanceof Two.LinearGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagEndPoints))
+ || (this._fill instanceof Two.RadialGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagRadius || this._fill._flagCenter || this._fill._flagFocal))
+ || (this._fill instanceof Two.Texture && (this._fill._flagLoaded && this._fill.loaded))
+ || (this._stroke instanceof Two.LinearGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagEndPoints))
+ || (this._stroke instanceof Two.RadialGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagRadius || this._stroke._flagCenter || this._stroke._flagFocal))
+ || (this._texture instanceof Two.Texture && (this._texture._flagLoaded && this._texture.loaded))
+ || 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._renderer.texture;
+
+ if (flagParentMatrix || flagMatrix) {
+
+ if (!this._renderer.matrix) {
+ this._renderer.matrix = new Two.Array(9);
+ }
+
+ // Reduce amount of object / array creation / deletion
+
+ this._matrix.toArray(true, transformation);
+
+ multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);
+ this._renderer.scale = this._scale * parent._renderer.scale;
+
+ }
+
+ if (flagTexture) {
+
+ if (!this._renderer.rect) {
+ this._renderer.rect = {};
+ }
+
+ if (!this._renderer.triangles) {
+ this._renderer.triangles = new Two.Array(12);
+ }
+
+ this._renderer.opacity = this._opacity * parent._renderer.opacity;
+
+ webgl.text.getBoundingClientRect(this, this._renderer.rect);
+ webgl.getTriangles(this._renderer.rect, this._renderer.triangles);
+
+ webgl.updateBuffer.call(webgl, gl, this, program);
+ webgl.updateTexture.call(webgl, gl, this);
+
+ }
+
+ // if (this._mask) {
+ // webgl[this._mask._renderer.type].render.call(mask, gl, program, this);
+ // }
+
+ if (this._clip && !forcedParent) {
+ return;
+ }
+
+ // Draw Texture
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._renderer.textureCoordsBuffer);
+
+ gl.vertexAttribPointer(program.textureCoords, 2, gl.FLOAT, false, 0, 0);
+
+ gl.bindTexture(gl.TEXTURE_2D, this._renderer.texture);
+
+
+ // Draw Rect
+
+ gl.uniformMatrix3fv(program.matrix, false, this._renderer.matrix);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._renderer.buffer);
+
+ gl.vertexAttribPointer(program.position, 2, gl.FLOAT, false, 0, 0);
+
+ gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+ 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;
+ var repeat;
+
+ if (!this._renderer.effect || ((this._flagLoaded || this._flagRepeat) && this.loaded)) {
+ this._renderer.effect = ctx.createPattern(image, this._repeat);
+ }
+
+ if (this._flagOffset || this._flagLoaded || this._flagScale) {
+
+ if (!(this._renderer.offset instanceof Two.Vector)) {
+ this._renderer.offset = new Two.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 Two.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 Two.Vector)) {
+ this._renderer.scale = new Two.Vector();
+ }
+
+ if (this._scale instanceof Two.Vector) {
+ this._renderer.scale.copy(this._scale);
+ } else {
+ this._renderer.scale.set(this._scale, this._scale);
+ }
+
+ }
+
+ return this.flagReset();
+
+ }
+
+ },
+
+ getTriangles: function(rect, triangles) {
+
+ var top = rect.top,
+ left = rect.left,
+ right = rect.right,
+ bottom = rect.bottom;
+
+ // First Triangle
+
+ triangles[0] = left;
+ triangles[1] = top;
+
+ triangles[2] = right;
+ triangles[3] = top;
+
+ triangles[4] = left;
+ triangles[5] = bottom;
+
+ // Second Triangle
+
+ triangles[6] = left;
+ triangles[7] = bottom;
+
+ triangles[8] = right;
+ triangles[9] = top;
+
+ triangles[10] = right;
+ triangles[11] = bottom;
+
+ },
+
+ updateTexture: function(gl, elem) {
+
+ this[elem._renderer.type].updateCanvas.call(webgl, elem);
+
+ if (elem._renderer.texture) {
+ gl.deleteTexture(elem._renderer.texture);
+ }
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, elem._renderer.textureCoordsBuffer);
+
+ // TODO: Is this necessary every time or can we do once?
+ // TODO: Create a registry for textures
+ 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);
+
+ },
+
+ updateBuffer: function(gl, elem, program) {
+
+ if (_.isObject(elem._renderer.buffer)) {
+ gl.deleteBuffer(elem._renderer.buffer);
+ }
+
+ elem._renderer.buffer = gl.createBuffer();
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, elem._renderer.buffer);
+ gl.enableVertexAttribArray(program.position);
+
+ gl.bufferData(gl.ARRAY_BUFFER, elem._renderer.triangles, gl.STATIC_DRAW);
+
+ if (_.isObject(elem._renderer.textureCoordsBuffer)) {
+ gl.deleteBuffer(elem._renderer.textureCoordsBuffer);
+ }
+
+ elem._renderer.textureCoordsBuffer = gl.createBuffer();
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, elem._renderer.textureCoordsBuffer);
+ gl.enableVertexAttribArray(program.textureCoords);
+
+ gl.bufferData(gl.ARRAY_BUFFER, this.uv, gl.STATIC_DRAW);
+
+ },
+
+ 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 Two.Utils.Error('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 Two.Utils.Error('unable to compile shader ' + shader + ': ' + error);
+ }
+
+ return shader;
+
+ },
+
+ types: {
+ vertex: 'VERTEX_SHADER',
+ fragment: 'FRAGMENT_SHADER'
+ },
+
+ vertex: [
+ 'attribute vec2 a_position;',
+ 'attribute vec2 a_textureCoords;',
+ '',
+ 'uniform mat3 u_matrix;',
+ 'uniform vec2 u_resolution;',
+ '',
+ 'varying vec2 v_textureCoords;',
+ '',
+ 'void main() {',
+ ' vec2 projected = (u_matrix * vec3(a_position, 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_textureCoords;',
+ '}'
+ ].join('\n'),
+
+ fragment: [
+ 'precision mediump float;',
+ '',
+ 'uniform sampler2D u_image;',
+ 'varying vec2 v_textureCoords;',
+ '',
+ 'void main() {',
+ ' gl_FragColor = texture2D(u_image, v_textureCoords);',
+ '}'
+ ].join('\n')
+
+ },
+
+ TextureRegistry: new Two.Registry()
+
+ };
+
+ webgl.ctx = webgl.canvas.getContext('2d');
+
+ var Renderer = Two[Two.Types.webgl] = function(options) {
+
+ var params, gl, vs, fs;
+ this.domElement = options.domElement || document.createElement('canvas');
+
+ // Everything drawn on the canvas needs to come from the stage.
+ this.scene = new Two.Group();
+ this.scene.parent = this;
+
+ this._renderer = {
+ matrix: new Two.Array(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(options || {}, {
+ antialias: false,
+ alpha: true,
+ premultipliedAlpha: true,
+ stencil: true,
+ preserveDrawingBuffer: true,
+ overdraw: false
+ });
+
+ this.overdraw = params.overdraw;
+
+ gl = this.ctx = this.domElement.getContext('webgl', params) ||
+ this.domElement.getContext('experimental-webgl', params);
+
+ if (!this.ctx) {
+ throw new Two.Utils.Error(
+ '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);
+
+ 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.textureCoords = gl.getAttribLocation(this.program, 'a_textureCoords');
+
+ // Copied from Three.js WebGLRenderer
+ gl.disable(gl.DEPTH_TEST);
+
+ // Setup some initial statements of the gl context
+ gl.enable(gl.BLEND);
+
+ // https://code.google.com/p/chromium/issues/detail?id=316393
+ // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, gl.TRUE);
+
+ gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+ gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,
+ gl.ONE, gl.ONE_MINUS_SRC_ALPHA );
+
+ };
+
+ _.extend(Renderer, {
+
+ Utils: webgl
+
+ });
+
+ _.extend(Renderer.prototype, Two.Utils.Events, {
+
+ setSize: function(width, height, ratio) {
+
+ this.width = width;
+ this.height = height;
+
+ this.ratio = _.isUndefined(ratio) ? getRatio(this.ctx) : ratio;
+
+ this.domElement.width = width * this.ratio;
+ this.domElement.height = height * this.ratio;
+
+ _.extend(this.domElement.style, {
+ width: width + 'px',
+ height: height + 'px'
+ });
+
+ width *= this.ratio;
+ height *= this.ratio;
+
+ // 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, height);
+
+ var resolutionLocation = this.ctx.getUniformLocation(
+ this.program, 'u_resolution');
+ this.ctx.uniform2f(resolutionLocation, width, height);
+
+ return this;
+
+ },
+
+ render: function() {
+
+ var gl = this.ctx;
+
+ if (!this.overdraw) {
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+ }
+
+ webgl.group.render.call(this.scene, gl, this.program);
+ this._flagMatrix = false;
+
+ return this;
+
+ }
+
+ });
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+
+ var Shape = Two.Shape = function() {
+
+ // Private object for renderer specific variables.
+ this._renderer = {};
+ this._renderer.flagMatrix = _.bind(Shape.FlagMatrix, this);
+ this.isShape = true;
+
+ this.id = Two.Identifier + Two.uniqueId();
+ this.classList = [];
+
+ // Define matrix properties which all inherited
+ // objects of Shape have.
+
+ this._matrix = new Two.Matrix();
+
+ this.translation = new Two.Vector();
+ this.rotation = 0;
+ this.scale = 1;
+
+ };
+
+ _.extend(Shape, {
+
+ FlagMatrix: function() {
+ this._flagMatrix = true;
+ },
+
+ MakeObservable: function(object) {
+
+ Object.defineProperty(object, 'translation', {
+ enumerable: true,
+ get: function() {
+ return this._translation;
+ },
+ set: function(v) {
+ if (this._translation) {
+ this._translation.unbind(Two.Events.change, this._renderer.flagMatrix);
+ }
+ this._translation = v;
+ this._translation.bind(Two.Events.change, this._renderer.flagMatrix);
+ Shape.FlagMatrix.call(this);
+ }
+ });
+
+ 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 Two.Vector) {
+ this._scale.unbind(Two.Events.change, this._renderer.flagMatrix);
+ }
+
+ this._scale = v;
+
+ if (this._scale instanceof Two.Vector) {
+ this._scale.bind(Two.Events.change, this._renderer.flagMatrix);
+ }
+
+ this._flagMatrix = true;
+ this._flagScale = true;
+
+ }
+ });
+
+ }
+
+ });
+
+ _.extend(Shape.prototype, Two.Utils.Events, {
+
+ // Flags
+
+ _flagMatrix: true,
+ _flagScale: false,
+
+ // _flagMask: false,
+ // _flagClip: false,
+
+ // Underlying Properties
+
+ _rotation: 0,
+ _scale: 1,
+ _translation: null,
+
+ // _mask: null,
+ // _clip: false,
+
+ addTo: function(group) {
+ group.add(this);
+ return this;
+ },
+
+ clone: function() {
+ var clone = new Shape();
+ clone.translation.copy(this.translation);
+ clone.rotation = this.rotation;
+ clone.scale = this.scale;
+ _.each(Shape.Properties, function(k) {
+ clone[k] = this[k];
+ }, this);
+ return clone._update();
+ },
+
+ /**
+ * To be called before render that calculates and collates all information
+ * to be as up-to-date as possible for the render. Called once a frame.
+ */
+ _update: function(deep) {
+
+ if (!this._matrix.manual && this._flagMatrix) {
+
+ this._matrix
+ .identity()
+ .translate(this.translation.x, this.translation.y);
+
+ if (this._scale instanceof Two.Vector) {
+ this._matrix.scale(this._scale.x, this._scale.y);
+ } else {
+ this._matrix.scale(this._scale);
+ }
+
+ this._matrix.rotate(this.rotation);
+
+ }
+
+ if (deep) {
+ // Bubble up to parents mainly for `getBoundingClientRect` method.
+ if (this.parent && this.parent._update) {
+ this.parent._update();
+ }
+ }
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagMatrix = this._flagScale = false;
+
+ return this;
+
+ }
+
+ });
+
+ Shape.MakeObservable(Shape.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ /**
+ * Constants
+ */
+
+ var min = Math.min, max = Math.max, round = Math.round,
+ getComputedMatrix = Two.Utils.getComputedMatrix;
+
+ var commands = {};
+ var _ = Two.Utils;
+
+ _.each(Two.Commands, function(v, k) {
+ commands[k] = new RegExp(v);
+ });
+
+ var Path = Two.Path = function(vertices, closed, curved, manual) {
+
+ Two.Shape.call(this);
+
+ this._renderer.type = 'path';
+ this._renderer.flagVertices = _.bind(Path.FlagVertices, this);
+ this._renderer.bindVertices = _.bind(Path.BindVertices, this);
+ this._renderer.unbindVertices = _.bind(Path.UnbindVertices, this);
+
+ this._renderer.flagFill = _.bind(Path.FlagFill, this);
+ this._renderer.flagStroke = _.bind(Path.FlagStroke, this);
+
+ this._closed = !!closed;
+ this._curved = !!curved;
+
+ this.beginning = 0;
+ this.ending = 1;
+
+ // Style properties
+
+ this.fill = '#fff';
+ this.stroke = '#000';
+ this.linewidth = 1.0;
+ this.opacity = 1.0;
+ this.visible = true;
+
+ this.cap = 'butt'; // Default of Adobe Illustrator
+ this.join = 'miter'; // Default of Adobe Illustrator
+ this.miter = 4; // Default of Adobe Illustrator
+
+ this._vertices = [];
+ this.vertices = vertices;
+
+ // 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;
+
+ };
+
+ _.extend(Path, {
+
+ Properties: [
+ 'fill',
+ 'stroke',
+ 'linewidth',
+ 'opacity',
+ 'visible',
+ 'cap',
+ 'join',
+ 'miter',
+
+ 'closed',
+ 'curved',
+ 'automatic',
+ 'beginning',
+ 'ending'
+ ],
+
+ FlagVertices: function() {
+ this._flagVertices = true;
+ this._flagLength = true;
+ },
+
+ BindVertices: function(items) {
+
+ // This function is called a lot
+ // when importing a large SVG
+ var i = items.length;
+ while (i--) {
+ items[i].bind(Two.Events.change, this._renderer.flagVertices);
+ }
+
+ this._renderer.flagVertices();
+
+ },
+
+ UnbindVertices: function(items) {
+
+ var i = items.length;
+ while (i--) {
+ items[i].unbind(Two.Events.change, this._renderer.flagVertices);
+ }
+
+ this._renderer.flagVertices();
+
+ },
+
+ FlagFill: function() {
+ this._flagFill = true;
+ },
+
+ FlagStroke: function() {
+ this._flagStroke = true;
+ },
+
+ MakeObservable: function(object) {
+
+ Two.Shape.MakeObservable(object);
+
+ // Only the 6 defined properties are flagged like this. The subsequent
+ // properties behave differently and need to be hand written.
+ _.each(Path.Properties.slice(2, 8), Two.Utils.defineProperty, object);
+
+ Object.defineProperty(object, 'fill', {
+ enumerable: true,
+ get: function() {
+ return this._fill;
+ },
+ set: function(f) {
+
+ if (this._fill instanceof Two.Gradient
+ || this._fill instanceof Two.LinearGradient
+ || this._fill instanceof Two.RadialGradient
+ || this._fill instanceof Two.Texture) {
+ this._fill.unbind(Two.Events.change, this._renderer.flagFill);
+ }
+
+ this._fill = f;
+ this._flagFill = true;
+
+ if (this._fill instanceof Two.Gradient
+ || this._fill instanceof Two.LinearGradient
+ || this._fill instanceof Two.RadialGradient
+ || this._fill instanceof Two.Texture) {
+ this._fill.bind(Two.Events.change, this._renderer.flagFill);
+ }
+
+ }
+ });
+
+ Object.defineProperty(object, 'stroke', {
+ enumerable: true,
+ get: function() {
+ return this._stroke;
+ },
+ set: function(f) {
+
+ if (this._stroke instanceof Two.Gradient
+ || this._stroke instanceof Two.LinearGradient
+ || this._stroke instanceof Two.RadialGradient
+ || this._stroke instanceof Two.Texture) {
+ this._stroke.unbind(Two.Events.change, this._renderer.flagStroke);
+ }
+
+ this._stroke = f;
+ this._flagStroke = true;
+
+ if (this._stroke instanceof Two.Gradient
+ || this._stroke instanceof Two.LinearGradient
+ || this._stroke instanceof Two.RadialGradient
+ || this._stroke instanceof Two.Texture) {
+ this._stroke.bind(Two.Events.change, this._renderer.flagStroke);
+ }
+
+ }
+ });
+
+ 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 updateVertices = this._renderer.flagVertices;
+ var bindVertices = this._renderer.bindVertices;
+ var unbindVertices = this._renderer.unbindVertices;
+
+ // Remove previous listeners
+ if (this._collection) {
+ this._collection
+ .unbind(Two.Events.insert, bindVertices)
+ .unbind(Two.Events.remove, unbindVertices);
+ }
+
+ // Create new Collection with copy of vertices
+ this._collection = new Two.Utils.Collection((vertices || []).slice(0));
+
+ // Listen for Collection changes and bind / unbind
+ this._collection
+ .bind(Two.Events.insert, bindVertices)
+ .bind(Two.Events.remove, unbindVertices);
+
+ // Bind Initial Vertices
+ bindVertices(this._collection);
+
+ }
+
+ });
+
+ Object.defineProperty(object, 'clip', {
+ enumerable: true,
+ get: function() {
+ return this._clip;
+ },
+ set: function(v) {
+ this._clip = v;
+ this._flagClip = true;
+ }
+ });
+
+ }
+
+ });
+
+ _.extend(Path.prototype, Two.Shape.prototype, {
+
+ // Flags
+ // http://en.wikipedia.org/wiki/Flag
+
+ _flagVertices: true,
+ _flagLength: true,
+
+ _flagFill: true,
+ _flagStroke: true,
+ _flagLinewidth: true,
+ _flagOpacity: true,
+ _flagVisible: true,
+
+ _flagCap: true,
+ _flagJoin: true,
+ _flagMiter: true,
+
+ _flagClip: false,
+
+ // Underlying Properties
+
+ _length: 0,
+
+ _fill: '#fff',
+ _stroke: '#000',
+ _linewidth: 1.0,
+ _opacity: 1.0,
+ _visible: true,
+
+ _cap: 'round',
+ _join: 'round',
+ _miter: 4,
+
+ _closed: true,
+ _curved: false,
+ _automatic: true,
+ _beginning: 0,
+ _ending: 1.0,
+
+ _clip: false,
+
+ clone: function(parent) {
+
+ parent = parent || this.parent;
+
+ var points = _.map(this.vertices, function(v) {
+ return v.clone();
+ });
+
+ var clone = new Path(points, this.closed, this.curved, !this.automatic);
+
+ _.each(Two.Path.Properties, function(k) {
+ clone[k] = this[k];
+ }, this);
+
+ clone.translation.copy(this.translation);
+ clone.rotation = this.rotation;
+ clone.scale = this.scale;
+
+ if (parent) {
+ parent.add(clone);
+ }
+
+ return clone;
+
+ },
+
+ toObject: function() {
+
+ var result = {
+ vertices: _.map(this.vertices, function(v) {
+ return v.toObject();
+ })
+ };
+
+ _.each(Two.Shape.Properties, function(k) {
+ result[k] = this[k];
+ }, this);
+
+ result.translation = this.translation.toObject;
+ result.rotation = this.rotation;
+ result.scale = this.scale;
+
+ return result;
+
+ },
+
+ noFill: function() {
+ this.fill = 'transparent';
+ return this;
+ },
+
+ noStroke: function() {
+ this.stroke = 'transparent';
+ return this;
+ },
+
+ /**
+ * Orient the vertices of the shape to the upper lefthand
+ * corner of the path.
+ */
+ corner: function() {
+
+ var rect = this.getBoundingClientRect(true);
+
+ rect.centroid = {
+ x: rect.left + rect.width / 2,
+ y: rect.top + rect.height / 2
+ };
+
+ _.each(this.vertices, function(v) {
+ v.addSelf(rect.centroid);
+ });
+
+ return this;
+
+ },
+
+ /**
+ * Orient the vertices of the shape to the center of the
+ * path.
+ */
+ center: function() {
+
+ var rect = this.getBoundingClientRect(true);
+
+ rect.centroid = {
+ x: rect.left + rect.width / 2,
+ y: rect.top + rect.height / 2
+ };
+
+ _.each(this.vertices, function(v) {
+ v.subSelf(rect.centroid);
+ });
+
+ // this.translation.addSelf(rect.centroid);
+
+ return this;
+
+ },
+
+ /**
+ * Remove self from the scene / parent.
+ */
+ remove: function() {
+
+ if (!this.parent) {
+ return this;
+ }
+
+ this.parent.remove(this);
+
+ return this;
+
+ },
+
+ /**
+ * Return an object with top, left, right, bottom, width, and height
+ * parameters of the group.
+ */
+ getBoundingClientRect: function(shallow) {
+ var matrix, border, l, x, y, i, v;
+
+ 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 / 2;
+ l = this._vertices.length;
+
+ if (l <= 0) {
+ v = matrix.multiply(0, 0, 1);
+ return {
+ top: v.y,
+ left: v.x,
+ right: v.x,
+ bottom: v.y,
+ width: 0,
+ height: 0
+ };
+ }
+
+ for (i = 0; i < l; i++) {
+ v = this._vertices[i];
+
+ x = v.x;
+ y = v.y;
+
+ v = matrix.multiply(x, y, 1);
+ top = min(v.y - border, top);
+ left = min(v.x - border, left);
+ right = max(v.x + border, right);
+ bottom = max(v.y + border, bottom);
+ }
+
+ return {
+ top: top,
+ left: left,
+ right: right,
+ bottom: bottom,
+ width: right - left,
+ height: bottom - top
+ };
+
+ },
+
+ /**
+ * 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;
+ 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 = Two.Utils.mod(i, length);
+ ib = Two.Utils.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];
+ }
+
+ break;
+
+ }
+
+ sum += this._lengths[i];
+
+ }
+
+ // console.log(sum, a.command, b.command);
+
+ if (_.isNull(a) || _.isNull(b)) {
+ return null;
+ }
+
+ 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 = Two.Utils.getPointOnCubicBezier(t, x1, x2, x3, x4);
+ y = Two.Utils.getPointOnCubicBezier(t, y1, y2, y3, y4);
+
+ if (_.isObject(obj)) {
+ obj.x = x;
+ obj.y = y;
+ return obj;
+ }
+
+ return new Two.Vector(x, y);
+
+ },
+
+ /**
+ * Based on closed / curved and sorting of vertices plot where all points
+ * should be and where the respective handles should be too.
+ */
+ plot: function() {
+
+ if (this.curved) {
+ Two.Utils.getCurveFromPoints(this._vertices, this.closed);
+ return this;
+ }
+
+ for (var i = 0; i < this._vertices.length; i++) {
+ this._vertices[i]._command = i === 0 ? Two.Commands.move : Two.Commands.line;
+ }
+
+ return this;
+
+ },
+
+ 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 === Two.Commands.close;
+ var points = [];
+ _.each(this.vertices, function(a, i) {
+
+ if (i <= 0 && !closed) {
+ b = a;
+ return;
+ }
+
+ if (a.command === Two.Commands.move) {
+ points.push(new Two.Anchor(b.x, b.y));
+ if (i > 0) {
+ points[points.length - 1].command = Two.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 === Two.Commands.move) {
+ v.command = Two.Commands.move;
+ } else {
+ v.command = Two.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 === Two.Commands.move) {
+ v.command = Two.Commands.move;
+ } else {
+ v.command = Two.Commands.line;
+ }
+ });
+
+ } else if (closed) {
+ points.push(new Two.Anchor(a.x, a.y));
+ }
+
+ points[points.length - 1].command = closed ? Two.Commands.close : Two.Commands.line;
+
+ }
+
+ b = a;
+
+ }, this);
+
+ this._automatic = false;
+ this._curved = false;
+ this.vertices = points;
+
+ return this;
+
+ },
+
+ _updateLength: function(limit) {
+ //TODO: DRYness (function above)
+ this._update();
+
+ var length = this.vertices.length;
+ var last = length - 1;
+ var b = this.vertices[last];
+ var closed = this._closed || this.vertices[last]._command === Two.Commands.close;
+ var sum = 0;
+
+ if (_.isUndefined(this._lengths)) {
+ this._lengths = [];
+ }
+
+ _.each(this.vertices, function(a, i) {
+
+ if ((i <= 0 && !closed) || a.command === Two.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;
+
+ return this;
+
+ },
+
+ _update: function() {
+
+ if (this._flagVertices) {
+
+ var l = this.vertices.length;
+ var last = l - 1, v;
+
+ // TODO: Should clamp this so that `ia` and `ib`
+ // cannot select non-verts.
+ var ia = round((this._beginning) * last);
+ var ib = round((this._ending) * last);
+
+ this._vertices.length = 0;
+
+ for (var i = ia; i < ib + 1; i++) {
+ v = this.vertices[i];
+ this._vertices.push(v);
+ }
+
+ if (this._automatic) {
+ this.plot();
+ }
+
+ }
+
+ Two.Shape.prototype._update.apply(this, arguments);
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagVertices = this._flagFill = this._flagStroke =
+ this._flagLinewidth = this._flagOpacity = this._flagVisible =
+ this._flagCap = this._flagJoin = this._flagMiter =
+ this._flagClip = false;
+
+ Two.Shape.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ Path.MakeObservable(Path.prototype);
+
+ /**
+ * Utility functions
+ */
+
+ 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 Two.Utils.getCurveLength(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 Two.Utils.subdivide(x1, y1, x2, y2, x3, y3, x4, y4, limit);
+
+ }
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path;
+ var _ = Two.Utils;
+
+ var Line = Two.Line = function(x1, y1, x2, y2) {
+
+ var width = x2 - x1;
+ var height = y2 - y1;
+
+ var w2 = width / 2;
+ var h2 = height / 2;
+
+ Path.call(this, [
+ new Two.Anchor(- w2, - h2),
+ new Two.Anchor(w2, h2)
+ ]);
+
+ this.translation.set(x1 + w2, y1 + h2);
+
+ };
+
+ _.extend(Line.prototype, Path.prototype);
+
+ Path.MakeObservable(Line.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path;
+ var _ = Two.Utils;
+
+ var Rectangle = Two.Rectangle = function(x, y, width, height) {
+
+ Path.call(this, [
+ new Two.Anchor(),
+ new Two.Anchor(),
+ new Two.Anchor(),
+ new Two.Anchor()
+ ], true);
+
+ this.width = width;
+ this.height = height;
+ this._update();
+
+ this.translation.set(x, y);
+
+ };
+
+ _.extend(Rectangle, {
+
+ Properties: ['width', 'height'],
+
+ MakeObservable: function(obj) {
+ Path.MakeObservable(obj);
+ _.each(Rectangle.Properties, Two.Utils.defineProperty, obj);
+ }
+
+ });
+
+ _.extend(Rectangle.prototype, Path.prototype, {
+
+ _width: 0,
+ _height: 0,
+
+ _flagWidth: 0,
+ _flagHeight: 0,
+
+ _update: function() {
+
+ if (this._flagWidth || this._flagHeight) {
+
+ var xr = this._width / 2;
+ var yr = this._height / 2;
+
+ this.vertices[0].set(-xr, -yr);
+ this.vertices[1].set(xr, -yr);
+ this.vertices[2].set(xr, yr);
+ this.vertices[3].set(-xr, yr);
+
+ }
+
+ Path.prototype._update.call(this);
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagWidth = this._flagHeight = false;
+ Path.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ Rectangle.MakeObservable(Rectangle.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path, TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
+ var _ = Two.Utils;
+
+ var Ellipse = Two.Ellipse = function(ox, oy, rx, ry) {
+
+ if (!_.isNumber(ry)) {
+ ry = rx;
+ }
+
+ var amount = Two.Resolution;
+
+ var points = _.map(_.range(amount), function(i) {
+ return new Two.Anchor();
+ }, this);
+
+ Path.call(this, points, true, true);
+
+ this.width = rx * 2;
+ this.height = ry * 2;
+
+ this._update();
+ this.translation.set(ox, oy);
+
+ };
+
+ _.extend(Ellipse, {
+
+ Properties: ['width', 'height'],
+
+ MakeObservable: function(obj) {
+
+ Path.MakeObservable(obj);
+ _.each(Ellipse.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ });
+
+ _.extend(Ellipse.prototype, Path.prototype, {
+
+ _width: 0,
+ _height: 0,
+
+ _flagWidth: false,
+ _flagHeight: false,
+
+ _update: function() {
+
+ if (this._flagWidth || this._flagHeight) {
+ for (var i = 0, l = this.vertices.length; i < l; i++) {
+ var pct = i / l;
+ var theta = pct * TWO_PI;
+ var x = this._width * cos(theta) / 2;
+ var y = this._height * sin(theta) / 2;
+ this.vertices[i].set(x, y);
+ }
+ }
+
+ Path.prototype._update.call(this);
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagWidth = this._flagHeight = false;
+
+ Path.prototype.flagReset.call(this);
+ return this;
+
+ }
+
+ });
+
+ Ellipse.MakeObservable(Ellipse.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path, TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
+ var _ = Two.Utils;
+
+ var Circle = Two.Circle = function(ox, oy, r) {
+
+ var amount = Two.Resolution;
+
+ var points = _.map(_.range(amount), function(i) {
+ return new Two.Anchor();
+ }, this);
+
+ Path.call(this, points, true, true);
+
+ this.radius = r;
+
+ this._update();
+ this.translation.set(ox, oy);
+
+ };
+
+ _.extend(Circle, {
+
+ Properties: ['radius'],
+
+ MakeObservable: function(obj) {
+
+ Path.MakeObservable(obj);
+ _.each(Circle.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ });
+
+ _.extend(Circle.prototype, Path.prototype, {
+
+ _radius: 0,
+ _flagRadius: false,
+
+ _update: function() {
+
+ if (this._flagRadius) {
+ for (var i = 0, l = this.vertices.length; i < l; i++) {
+ var pct = i / l;
+ var theta = pct * TWO_PI;
+ var x = this._radius * cos(theta);
+ var y = this._radius * sin(theta);
+ this.vertices[i].set(x, y);
+ }
+ }
+
+ Path.prototype._update.call(this);
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagRadius = false;
+
+ Path.prototype.flagReset.call(this);
+ return this;
+
+ }
+
+ });
+
+ Circle.MakeObservable(Circle.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path, TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
+ var _ = Two.Utils;
+
+ var Polygon = Two.Polygon = function(ox, oy, r, sides) {
+
+ sides = Math.max(sides || 0, 3);
+
+ var points = _.map(_.range(sides), function(i) {
+ return new Two.Anchor();
+ });
+
+ Path.call(this, points, true);
+
+ this.width = r * 2;
+ this.height = r * 2;
+ this.sides = sides;
+
+ this._update();
+ this.translation.set(ox, oy);
+
+ };
+
+ _.extend(Polygon, {
+
+ Properties: ['width', 'height', 'sides'],
+
+ MakeObservable: function(obj) {
+
+ Path.MakeObservable(obj);
+ _.each(Polygon.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ });
+
+ _.extend(Polygon.prototype, Path.prototype, {
+
+ _width: 0,
+ _height: 0,
+ _sides: 0,
+
+ _flagWidth: false,
+ _flagHeight: false,
+ _flagSides: false,
+
+ _update: function() {
+
+ if (this._flagWidth || this._flagHeight || this._flagSides) {
+
+ var sides = this._sides;
+ var amount = this.vertices.length;
+
+ if (amount > sides) {
+ this.vertices.splice(sides - 1, amount - sides);
+ }
+
+ for (var i = 0; i < sides; i++) {
+
+ var pct = (i + 0.5) / sides;
+ var theta = TWO_PI * pct + Math.PI / 2;
+ var x = this._width * cos(theta);
+ var y = this._height * sin(theta);
+
+ if (i >= amount) {
+ this.vertices.push(new Two.Anchor(x, y));
+ } else {
+ this.vertices[i].set(x, y);
+ }
+
+ }
+
+ }
+
+ Path.prototype._update.call(this);
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagWidth = this._flagHeight = this._flagSides = false;
+ Path.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ Polygon.MakeObservable(Polygon.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path, PI = Math.PI, TWO_PI = Math.PI * 2, HALF_PI = Math.PI / 2,
+ cos = Math.cos, sin = Math.sin, abs = Math.abs, _ = Two.Utils;
+
+ var ArcSegment = Two.ArcSegment = function(ox, oy, ir, or, sa, ea, res) {
+
+ var points = _.map(_.range(res || (Two.Resolution * 3)), function() {
+ return new Two.Anchor();
+ });
+
+ Path.call(this, points, false, false, true);
+
+ this.innerRadius = ir;
+ this.outerRadius = or;
+
+ this.startAngle = sa;
+ this.endAngle = ea;
+
+ this._update();
+ this.translation.set(ox, oy);
+
+ }
+
+ _.extend(ArcSegment, {
+
+ Properties: ['startAngle', 'endAngle', 'innerRadius', 'outerRadius'],
+
+ MakeObservable: function(obj) {
+
+ Path.MakeObservable(obj);
+ _.each(ArcSegment.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ });
+
+ _.extend(ArcSegment.prototype, Path.prototype, {
+
+ _flagStartAngle: false,
+ _flagEndAngle: false,
+ _flagInnerRadius: false,
+ _flagOuterRadius: false,
+
+ _startAngle: 0,
+ _endAngle: TWO_PI,
+ _innerRadius: 0,
+ _outerRadius: 0,
+
+ _update: function() {
+
+ if (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) === mod(ea, TWO_PI);
+ 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 = Two.Commands.move;
+ break;
+ default:
+ command = Two.Commands.curve;
+ }
+
+ v.command = command;
+ v.x = x;
+ v.y = y;
+ v.controls.left.clear();
+ v.controls.right.clear();
+
+ if (v.command === Two.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 = Two.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 = Two.Commands.curve;
+ if (i <= 0) {
+ command = connected ? Two.Commands.move : Two.Commands.line;
+ }
+
+ v.command = command;
+ v.x = x;
+ v.y = y;
+ v.controls.left.clear();
+ v.controls.right.clear();
+
+ if (v.command === Two.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++;
+
+ }
+
+ } else if (!connected) {
+
+ vertices[id].command = Two.Commands.line;
+ vertices[id].x = 0;
+ vertices[id].y = 0;
+ id++;
+
+ }
+
+ /**
+ * Final Point
+ */
+ vertices[id].command = Two.Commands.close;
+
+ }
+
+ Path.prototype._update.call(this);
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ Path.prototype.flagReset.call(this);
+
+ this._flagStartAngle = this._flagEndAngle
+ = this._flagInnerRadius = this._flagOuterRadius = false;
+
+ return this;
+
+ }
+
+ });
+
+ ArcSegment.MakeObservable(ArcSegment.prototype);
+
+ function mod(v, l) {
+ while (v < 0) {
+ v += l;
+ }
+ return v % l;
+ }
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path, TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
+ var _ = Two.Utils;
+
+ var Star = Two.Star = function(ox, oy, or, ir, sides) {
+
+ if (!_.isNumber(ir)) {
+ ir = or / 2;
+ }
+
+ if (!_.isNumber(sides) || sides <= 0) {
+ sides = 5;
+ }
+
+ var length = sides * 2;
+
+ var points = _.map(_.range(length), function(i) {
+ return new Two.Anchor();
+ });
+
+ Path.call(this, points, true);
+
+ this.innerRadius = ir;
+ this.outerRadius = or;
+ this.sides = sides;
+
+ this._update();
+ this.translation.set(ox, oy);
+
+ };
+
+ _.extend(Star, {
+
+ Properties: ['innerRadius', 'outerRadius', 'sides'],
+
+ MakeObservable: function(obj) {
+
+ Path.MakeObservable(obj);
+ _.each(Star.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ });
+
+ _.extend(Star.prototype, Path.prototype, {
+
+ _innerRadius: 0,
+ _outerRadius: 0,
+ _sides: 0,
+
+ _flagInnerRadius: false,
+ _flagOuterRadius: false,
+ _flagSides: false,
+
+ _update: function() {
+
+ if (this._flagInnerRadius || this._flagOuterRadius || this._flagSides) {
+
+ var sides = this._sides * 2;
+ var amount = this.vertices.length;
+
+ if (amount > sides) {
+ this.vertices.splice(sides - 1, amount - sides);
+ }
+
+ for (var i = 0; i < sides; i++) {
+
+ var pct = (i + 0.5) / sides;
+ var theta = TWO_PI * pct;
+ var r = (i % 2 ? this._innerRadius : this._outerRadius);
+ var x = r * cos(theta);
+ var y = r * sin(theta);
+
+ if (i >= amount) {
+ this.vertices.push(new Two.Anchor(x, y));
+ } else {
+ this.vertices[i].set(x, y);
+ }
+
+ }
+
+ }
+
+ Path.prototype._update.call(this);
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagInnerRadius = this._flagOuterRadius = this._flagSides = false;
+ Path.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ Star.MakeObservable(Star.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var Path = Two.Path;
+ var _ = Two.Utils;
+
+ var RoundedRectangle = Two.RoundedRectangle = function(ox, oy, width, height, radius) {
+
+ if (!_.isNumber(radius)) {
+ radius = Math.floor(Math.min(width, height) / 12);
+ }
+
+ var amount = 10;
+
+ var points = _.map(_.range(amount), function(i) {
+ return new Two.Anchor(0, 0, 0, 0, 0, 0,
+ i === 0 ? Two.Commands.move : Two.Commands.curve);
+ });
+
+ points[points.length - 1].command = Two.Commands.close;
+
+ Path.call(this, points, false, false, true);
+
+ this.width = width;
+ this.height = height;
+ this.radius = radius;
+
+ this._update();
+ this.translation.set(ox, oy);
+
+ };
+
+ _.extend(RoundedRectangle, {
+
+ Properties: ['width', 'height', 'radius'],
+
+ MakeObservable: function(obj) {
+
+ Path.MakeObservable(obj);
+ _.each(RoundedRectangle.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ });
+
+ _.extend(RoundedRectangle.prototype, Path.prototype, {
+
+ _width: 0,
+ _height: 0,
+ _radius: 0,
+
+ _flagWidth: false,
+ _flagHeight: false,
+ _flagRadius: false,
+
+ _update: function() {
+
+ if (this._flagWidth || this._flagHeight || this._flagRadius) {
+
+ var width = this._width;
+ var height = this._height;
+ var radius = Math.min(Math.max(this._radius, 0),
+ Math.min(width, height));
+
+ var v;
+ var w = width / 2;
+ var h = height / 2;
+
+ v = this.vertices[0];
+ v.x = - (w - radius);
+ v.y = - h;
+
+ // Upper Right Corner
+
+ v = this.vertices[1];
+ v.x = (w - radius);
+ v.y = - h;
+ v.controls.left.clear();
+ v.controls.right.x = radius;
+ v.controls.right.y = 0;
+
+ v = this.vertices[2];
+ v.x = w;
+ v.y = - (h - radius);
+ v.controls.right.clear();
+ v.controls.left.clear();
+
+ // Bottom Right Corner
+
+ v = this.vertices[3];
+ v.x = w;
+ v.y = (h - radius);
+ v.controls.left.clear();
+ v.controls.right.x = 0;
+ v.controls.right.y = radius;
+
+ v = this.vertices[4];
+ v.x = (w - radius);
+ v.y = h;
+ v.controls.right.clear();
+ v.controls.left.clear();
+
+ // Bottom Left Corner
+
+ v = this.vertices[5];
+ v.x = - (w - radius);
+ v.y = h;
+ v.controls.left.clear();
+ v.controls.right.x = - radius;
+ v.controls.right.y = 0;
+
+ v = this.vertices[6];
+ v.x = - w;
+ v.y = (h - radius);
+ v.controls.left.clear();
+ v.controls.right.clear();
+
+ // Upper Left Corner
+
+ v = this.vertices[7];
+ v.x = - w;
+ v.y = - (h - radius);
+ v.controls.left.clear();
+ v.controls.right.x = 0;
+ v.controls.right.y = - radius;
+
+ v = this.vertices[8];
+ v.x = - (w - radius);
+ 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;
+
+ },
+
+ flagReset: function() {
+
+ this._flagWidth = this._flagHeight = this._flagRadius = false;
+ Path.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ RoundedRectangle.MakeObservable(RoundedRectangle.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var root = Two.root;
+ var getComputedMatrix = Two.Utils.getComputedMatrix;
+ var _ = Two.Utils;
+
+ var canvas = (root.document ? root.document.createElement('canvas') : { getContext: _.identity });
+ var ctx = canvas.getContext('2d');
+
+ var Text = Two.Text = function(message, x, y, styles) {
+
+ Two.Shape.call(this);
+
+ this._renderer.type = 'text';
+ this._renderer.flagFill = _.bind(Text.FlagFill, this);
+ this._renderer.flagStroke = _.bind(Text.FlagStroke, this);
+
+ this.value = message;
+
+ if (_.isNumber(x)) {
+ this.translation.x = x;
+ }
+ if (_.isNumber(y)) {
+ this.translation.y = y;
+ }
+
+ if (!_.isObject(styles)) {
+ return this;
+ }
+
+ _.each(Two.Text.Properties, function(property) {
+
+ if (property in styles) {
+ this[property] = styles[property];
+ }
+
+ }, this);
+
+ };
+
+ _.extend(Two.Text, {
+
+ Properties: [
+ 'value', 'family', 'size', 'leading', 'alignment', 'linewidth', 'style',
+ 'weight', 'decoration', 'baseline', 'opacity', 'visible', 'fill', 'stroke'
+ ],
+
+ FlagFill: function() {
+ this._flagFill = true;
+ },
+
+ FlagStroke: function() {
+ this._flagStroke = true;
+ },
+
+ MakeObservable: function(object) {
+
+ Two.Shape.MakeObservable(object);
+
+ _.each(Two.Text.Properties.slice(0, 12), Two.Utils.defineProperty, object);
+
+ Object.defineProperty(object, 'fill', {
+ enumerable: true,
+ get: function() {
+ return this._fill;
+ },
+ set: function(f) {
+
+ if (this._fill instanceof Two.Gradient
+ || this._fill instanceof Two.LinearGradient
+ || this._fill instanceof Two.RadialGradient
+ || this._fill instanceof Two.Texture) {
+ this._fill.unbind(Two.Events.change, this._renderer.flagFill);
+ }
+
+ this._fill = f;
+ this._flagFill = true;
+
+ if (this._fill instanceof Two.Gradient
+ || this._fill instanceof Two.LinearGradient
+ || this._fill instanceof Two.RadialGradient
+ || this._fill instanceof Two.Texture) {
+ this._fill.bind(Two.Events.change, this._renderer.flagFill);
+ }
+
+ }
+ });
+
+ Object.defineProperty(object, 'stroke', {
+ enumerable: true,
+ get: function() {
+ return this._stroke;
+ },
+ set: function(f) {
+
+ if (this._stroke instanceof Two.Gradient
+ || this._stroke instanceof Two.LinearGradient
+ || this._stroke instanceof Two.RadialGradient
+ || this._stroke instanceof Two.Texture) {
+ this._stroke.unbind(Two.Events.change, this._renderer.flagStroke);
+ }
+
+ this._stroke = f;
+ this._flagStroke = true;
+
+ if (this._stroke instanceof Two.Gradient
+ || this._stroke instanceof Two.LinearGradient
+ || this._stroke instanceof Two.RadialGradient
+ || this._stroke instanceof Two.Texture) {
+ this._stroke.bind(Two.Events.change, this._renderer.flagStroke);
+ }
+
+ }
+ });
+
+ Object.defineProperty(object, 'clip', {
+ enumerable: true,
+ get: function() {
+ return this._clip;
+ },
+ set: function(v) {
+ this._clip = v;
+ this._flagClip = true;
+ }
+ });
+
+ }
+
+ });
+
+ _.extend(Two.Text.prototype, Two.Shape.prototype, {
+
+ // Flags
+ // http://en.wikipedia.org/wiki/Flag
+
+ _flagValue: true,
+ _flagFamily: true,
+ _flagSize: true,
+ _flagLeading: true,
+ _flagAlignment: true,
+ _flagBaseline: true,
+ _flagStyle: true,
+ _flagWeight: true,
+ _flagDecoration: true,
+
+ _flagFill: true,
+ _flagStroke: true,
+ _flagLinewidth: true,
+ _flagOpacity: true,
+ _flagVisible: true,
+
+ _flagClip: false,
+
+ // Underlying Properties
+
+ _value: '',
+ _family: 'sans-serif',
+ _size: 13,
+ _leading: 17,
+ _alignment: 'center',
+ _baseline: 'middle',
+ _style: 'normal',
+ _weight: 500,
+ _decoration: 'none',
+
+ _fill: '#000',
+ _stroke: 'transparent',
+ _linewidth: 1,
+ _opacity: 1,
+ _visible: true,
+
+ _clip: false,
+
+ remove: function() {
+
+ if (!this.parent) {
+ return this;
+ }
+
+ this.parent.remove(this);
+
+ return this;
+
+ },
+
+ clone: function(parent) {
+
+ var parent = parent || this.parent;
+
+ var clone = new Two.Text(this.value);
+ clone.translation.copy(this.translation);
+ clone.rotation = this.rotation;
+ clone.scale = this.scale;
+
+ _.each(Two.Text.Properties, function(property) {
+ clone[property] = this[property];
+ }, this);
+
+ if (parent) {
+ parent.add(clone);
+ }
+
+ return clone;
+
+ },
+
+ toObject: function() {
+
+ var result = {
+ translation: this.translation.toObject(),
+ rotation: this.rotation,
+ scale: this.scale
+ };
+
+ _.each(Two.Text.Properties, function(property) {
+ result[property] = this[property];
+ }, this);
+
+ return result;
+
+ },
+
+ noStroke: function() {
+ this.stroke = 'transparent';
+ return this;
+ },
+
+ noFill: function() {
+ this.fill = 'transparent';
+ return this;
+ },
+
+ /**
+ * A shim to not break `getBoundingClientRect` calls. TODO: Implement a
+ * way to calculate proper bounding boxes of `Two.Text`.
+ */
+ getBoundingClientRect: function(shallow) {
+
+ var matrix, border, l, x, y, i, v;
+
+ 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);
+
+ v = matrix.multiply(0, 0, 1);
+
+ return {
+ top: v.x,
+ left: v.y,
+ right: v.x,
+ bottom: v.y,
+ width: 0,
+ height: 0
+ };
+
+ },
+
+ flagReset: function() {
+
+ this._flagValue = this._flagFamily = this._flagSize =
+ this._flagLeading = this._flagAlignment = this._flagFill =
+ this._flagStroke = this._flagLinewidth = this._flagOpaicty =
+ this._flagVisible = this._flagClip = this._flagDecoration =
+ this._flagBaseline = false;
+
+ Two.Shape.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ Two.Text.MakeObservable(Two.Text.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+
+ var Stop = Two.Stop = function(offset, color, opacity) {
+
+ this._renderer = {};
+ this._renderer.type = 'stop';
+
+ this.offset = _.isNumber(offset) ? offset
+ : Stop.Index <= 0 ? 0 : 1;
+
+ this.opacity = _.isNumber(opacity) ? opacity : 1;
+
+ this.color = _.isString(color) ? color
+ : Stop.Index <= 0 ? '#fff' : '#000';
+
+ Stop.Index = (Stop.Index + 1) % 2;
+
+ };
+
+ _.extend(Stop, {
+
+ Index: 0,
+
+ Properties: [
+ 'offset',
+ 'opacity',
+ 'color'
+ ],
+
+ 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);
+
+ }
+
+ });
+
+ _.extend(Stop.prototype, Two.Utils.Events, {
+
+ clone: function() {
+
+ var clone = new Stop();
+
+ _.each(Stop.Properties, function(property) {
+ clone[property] = this[property];
+ }, this);
+
+ return clone;
+
+ },
+
+ toObject: function() {
+
+ var result = {};
+
+ _.each(Stop.Properties, function(k) {
+ result[k] = this[k];
+ }, this);
+
+ return result;
+
+ },
+
+ flagReset: function() {
+
+ this._flagOffset = this._flagColor = this._flagOpacity = false;
+
+ return this;
+
+ }
+
+ });
+
+ Stop.MakeObservable(Stop.prototype);
+
+ var Gradient = Two.Gradient = function(stops) {
+
+ this._renderer = {};
+ this._renderer.type = 'gradient';
+
+ this.id = Two.Identifier + Two.uniqueId();
+ this.classList = [];
+
+ this._renderer.flagStops = _.bind(Gradient.FlagStops, this);
+ this._renderer.bindStops = _.bind(Gradient.BindStops, this);
+ this._renderer.unbindStops = _.bind(Gradient.UnbindStops, this);
+
+ this.spread = 'pad';
+
+ this.stops = stops;
+
+ };
+
+ _.extend(Gradient, {
+
+ Stop: Stop,
+
+ Properties: [
+ 'spread'
+ ],
+
+ MakeObservable: function(object) {
+
+ _.each(Gradient.Properties, Two.Utils.defineProperty, object);
+
+ Object.defineProperty(object, 'stops', {
+
+ enumerable: true,
+
+ get: function() {
+ return this._stops;
+ },
+
+ set: function(stops) {
+
+ var updateStops = this._renderer.flagStops;
+ var bindStops = this._renderer.bindStops;
+ var unbindStops = this._renderer.unbindStops;
+
+ // Remove previous listeners
+ if (this._stops) {
+ this._stops
+ .unbind(Two.Events.insert, bindStops)
+ .unbind(Two.Events.remove, unbindStops);
+ }
+
+ // Create new Collection with copy of Stops
+ this._stops = new Two.Utils.Collection((stops || []).slice(0));
+
+ // Listen for Collection changes and bind / unbind
+ this._stops
+ .bind(Two.Events.insert, bindStops)
+ .bind(Two.Events.remove, unbindStops);
+
+ // Bind Initial Stops
+ bindStops(this._stops);
+
+ }
+
+ });
+
+ },
+
+ FlagStops: function() {
+ this._flagStops = true;
+ },
+
+ BindStops: function(items) {
+
+ // This function is called a lot
+ // when importing a large SVG
+ var i = items.length;
+ while(i--) {
+ items[i].bind(Two.Events.change, this._renderer.flagStops);
+ items[i].parent = this;
+ }
+
+ this._renderer.flagStops();
+
+ },
+
+ UnbindStops: function(items) {
+
+ var i = items.length;
+ while(i--) {
+ items[i].unbind(Two.Events.change, this._renderer.flagStops);
+ delete items[i].parent;
+ }
+
+ this._renderer.flagStops();
+
+ }
+
+ });
+
+ _.extend(Gradient.prototype, Two.Utils.Events, {
+
+ _flagStops: false,
+ _flagSpread: false,
+
+ clone: function(parent) {
+
+ parent = parent || this.parent;
+
+ var stops = _.map(this.stops, function(s) {
+ return s.clone();
+ });
+
+ var clone = new Gradient(stops);
+
+ _.each(Two.Gradient.Properties, function(k) {
+ clone[k] = this[k];
+ }, this);
+
+ if (parent) {
+ parent.add(clone);
+ }
+
+ return clone;
+
+ },
+
+ toObject: function() {
+
+ var result = {
+ stops: _.map(this.stops, function(s) {
+ return s.toObject();
+ })
+ };
+
+ _.each(Gradient.Properties, function(k) {
+ result[k] = this[k];
+ }, this);
+
+ return result;
+
+ },
+
+ _update: function() {
+
+ if (this._flagSpread || this._flagStops) {
+ this.trigger(Two.Events.change);
+ }
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagSpread = this._flagStops = false;
+
+ return this;
+
+ }
+
+ });
+
+ Gradient.MakeObservable(Gradient.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+
+ var LinearGradient = Two.LinearGradient = function(x1, y1, x2, y2, stops) {
+
+ Two.Gradient.call(this, stops);
+
+ this._renderer.type = 'linear-gradient';
+
+ var flagEndPoints = _.bind(LinearGradient.FlagEndPoints, this);
+ this.left = new Two.Vector().bind(Two.Events.change, flagEndPoints);
+ this.right = new Two.Vector().bind(Two.Events.change, flagEndPoints);
+
+ if (_.isNumber(x1)) {
+ this.left.x = x1;
+ }
+ if (_.isNumber(y1)) {
+ this.left.y = y1;
+ }
+ if (_.isNumber(x2)) {
+ this.right.x = x2;
+ }
+ if (_.isNumber(y2)) {
+ this.right.y = y2;
+ }
+
+ };
+
+ _.extend(LinearGradient, {
+
+ Stop: Two.Gradient.Stop,
+
+ MakeObservable: function(object) {
+ Two.Gradient.MakeObservable(object);
+ },
+
+ FlagEndPoints: function() {
+ this._flagEndPoints = true;
+ }
+
+ });
+
+ _.extend(LinearGradient.prototype, Two.Gradient.prototype, {
+
+ _flagEndPoints: false,
+
+ clone: function(parent) {
+
+ parent = parent || this.parent;
+
+ var stops = _.map(this.stops, function(stop) {
+ return stop.clone();
+ });
+
+ var clone = new LinearGradient(this.left._x, this.left._y,
+ this.right._x, this.right._y, stops);
+
+ _.each(Two.Gradient.Properties, function(k) {
+ clone[k] = this[k];
+ }, this);
+
+ if (parent) {
+ parent.add(clone);
+ }
+
+ return clone;
+
+ },
+
+ toObject: function() {
+
+ var result = Two.Gradient.prototype.toObject.call(this);
+
+ result.left = this.left.toObject();
+ result.right = this.right.toObject();
+
+ return result;
+
+ },
+
+ _update: function() {
+
+ if (this._flagEndPoints || this._flagSpread || this._flagStops) {
+ this.trigger(Two.Events.change);
+ }
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagEndPoints = false;
+
+ Two.Gradient.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ LinearGradient.MakeObservable(LinearGradient.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+
+ var RadialGradient = Two.RadialGradient = function(cx, cy, r, stops, fx, fy) {
+
+ Two.Gradient.call(this, stops);
+
+ this._renderer.type = 'radial-gradient';
+
+ this.center = new Two.Vector()
+ .bind(Two.Events.change, _.bind(function() {
+ this._flagCenter = true;
+ }, this));
+
+ this.radius = _.isNumber(r) ? r : 20;
+
+ this.focal = new Two.Vector()
+ .bind(Two.Events.change, _.bind(function() {
+ this._flagFocal = true;
+ }, this));
+
+ if (_.isNumber(cx)) {
+ this.center.x = cx;
+ }
+ if (_.isNumber(cy)) {
+ this.center.y = cy;
+ }
+
+ this.focal.copy(this.center);
+
+ if (_.isNumber(fx)) {
+ this.focal.x = fx;
+ }
+ if (_.isNumber(fy)) {
+ this.focal.y = fy;
+ }
+
+ };
+
+ _.extend(RadialGradient, {
+
+ Stop: Two.Gradient.Stop,
+
+ Properties: [
+ 'radius'
+ ],
+
+ MakeObservable: function(object) {
+
+ Two.Gradient.MakeObservable(object);
+
+ _.each(RadialGradient.Properties, Two.Utils.defineProperty, object);
+
+ }
+
+ });
+
+ _.extend(RadialGradient.prototype, Two.Gradient.prototype, {
+
+ _flagRadius: false,
+ _flagCenter: false,
+ _flagFocal: false,
+
+ clone: function(parent) {
+
+ parent = parent || this.parent;
+
+ var stops = _.map(this.stops, 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(Two.Gradient.Properties.concat(RadialGradient.Properties), function(k) {
+ clone[k] = this[k];
+ }, this);
+
+ if (parent) {
+ parent.add(clone);
+ }
+
+ return clone;
+
+ },
+
+ toObject: function() {
+
+ var result = Two.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;
+
+ },
+
+ _update: function() {
+
+ if (this._flagRadius || this._flatCenter || this._flagFocal
+ || this._flagSpread || this._flagStops) {
+ this.trigger(Two.Events.change);
+ }
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagRadius = this._flagCenter = this._flagFocal = false;
+
+ Two.Gradient.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ RadialGradient.MakeObservable(RadialGradient.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+ var anchor;
+ var regex = {
+ video: /\.(mp4|webm)$/i,
+ image: /\.(jpe?g|png|gif|tiff)$/i
+ };
+
+ if (this.document) {
+ anchor = document.createElement('a');
+ }
+
+ var Texture = Two.Texture = function(src, callback) {
+
+ this._renderer = {};
+ this._renderer.type = 'texture';
+ this._renderer.flagOffset = _.bind(Texture.FlagOffset, this);
+ this._renderer.flagScale = _.bind(Texture.FlagScale, this);
+
+ this.id = Two.Identifier + Two.uniqueId();
+ this.classList = [];
+
+ this.offset = new Two.Vector();
+
+ if (_.isFunction(callback)) {
+ var loaded = _.bind(function() {
+ this.unbind(Two.Events.load, loaded);
+ if (_.isFunction(callback)) {
+ callback();
+ }
+ }, this);
+ this.bind(Two.Events.load, loaded);
+ }
+
+ if (_.isString(src)) {
+ this.src = src;
+ } else if (_.isElement(src)) {
+ this.image = src;
+ }
+
+ this._update();
+
+ };
+
+ _.extend(Texture, {
+
+ Properties: [
+ 'src',
+ 'loaded',
+ 'repeat'
+ ],
+
+ ImageRegistry: new Two.Registry(),
+
+ getAbsoluteURL: function(path) {
+ if (!anchor) {
+ // TODO: Fix for headless environment
+ return path;
+ }
+ anchor.href = path;
+ return anchor.href;
+ },
+
+ getImage: function(src) {
+
+ var absoluteSrc = Texture.getAbsoluteURL(src);
+
+ if (Texture.ImageRegistry.contains(absoluteSrc)) {
+ return Texture.ImageRegistry.get(absoluteSrc);
+ }
+
+ var image;
+
+ if (regex.video.test(absoluteSrc)) {
+ image = document.createElement('video');
+ } else {
+ image = document.createElement('img');
+ }
+
+ image.crossOrigin = 'anonymous';
+
+ return image;
+
+ },
+
+ Register: {
+ canvas: function(texture, callback) {
+ texture._src = '#' + texture.id;
+ Texture.ImageRegistry.add(texture.src, texture.image);
+ if (_.isFunction(callback)) {
+ callback();
+ }
+ },
+ img: function(texture, callback) {
+
+ var loaded = function(e) {
+ texture.image.removeEventListener('load', loaded, false);
+ texture.image.removeEventListener('error', error, false);
+ if (_.isFunction(callback)) {
+ callback();
+ }
+ };
+ var error = function(e) {
+ texture.image.removeEventListener('load', loaded, false);
+ texture.image.removeEventListener('error', error, false);
+ throw new Two.Utils.Error('unable to load ' + texture.src);
+ };
+
+ if (_.isNumber(texture.image.width) && texture.image.width > 0
+ && _.isNumber(texture.image.height) && texture.image.height > 0) {
+ loaded();
+ } else {
+ texture.image.addEventListener('load', loaded, false);
+ texture.image.addEventListener('error', error, false);
+ }
+
+ texture._src = Texture.getAbsoluteURL(texture._src);
+
+ if (texture.image && texture.image.getAttribute('two-src')) {
+ return;
+ }
+
+ texture.image.setAttribute('two-src', texture.src);
+ Texture.ImageRegistry.add(texture.src, texture.image);
+ texture.image.src = texture.src;
+
+ },
+ video: function(texture, callback) {
+
+ var loaded = function(e) {
+ texture.image.removeEventListener('load', loaded, false);
+ texture.image.removeEventListener('error', error, false);
+ texture.image.width = texture.image.videoWidth;
+ texture.image.height = texture.image.videoHeight;
+ texture.image.play();
+ if (_.isFunction(callback)) {
+ callback();
+ }
+ };
+ var error = function(e) {
+ texture.image.removeEventListener('load', loaded, false);
+ texture.image.removeEventListener('error', error, false);
+ throw new Two.Utils.Error('unable to load ' + texture.src);
+ };
+
+ texture._src = Texture.getAbsoluteURL(texture._src);
+ texture.image.addEventListener('canplaythrough', loaded, false);
+ texture.image.addEventListener('error', error, false);
+
+ if (texture.image && texture.image.getAttribute('two-src')) {
+ return;
+ }
+
+ texture.image.setAttribute('two-src', texture.src);
+ Texture.ImageRegistry.add(texture.src, texture.image);
+ texture.image.src = texture.src;
+ texture.image.loop = true;
+ texture.image.load();
+
+ }
+ },
+
+ load: function(texture, callback) {
+
+ var src = texture.src;
+ var image = texture.image;
+ var tag = image && image.nodeName.toLowerCase();
+
+ if (texture._flagImage) {
+ if (/canvas/i.test(tag)) {
+ Texture.Register.canvas(texture, callback);
+ } else {
+ texture._src = image.getAttribute('two-src') || image.src;
+ Texture.Register[tag](texture, callback);
+ }
+ }
+
+ if (texture._flagSrc) {
+ if (!image) {
+ texture.image = Texture.getImage(texture.src);
+ }
+ tag = texture.image.nodeName.toLowerCase();
+ Texture.Register[tag](texture, callback);
+ }
+
+ },
+
+ FlagOffset: function() {
+ this._flagOffset = true;
+ },
+
+ FlagScale: function() {
+ this._flagScale = true;
+ },
+
+ MakeObservable: function(object) {
+
+ _.each(Texture.Properties, Two.Utils.defineProperty, object);
+
+ Object.defineProperty(object, 'image', {
+ enumerable: true,
+ get: function() {
+ return this._image;
+ },
+ set: function(image) {
+
+ var tag = image && image.nodeName.toLowerCase();
+ 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(Two.Events.change, this._renderer.flagOffset);
+ }
+ this._offset = v;
+ this._offset.bind(Two.Events.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 Two.Vector) {
+ this._scale.unbind(Two.Events.change, this._renderer.flagScale);
+ }
+
+ this._scale = v;
+
+ if (this._scale instanceof Two.Vector) {
+ this._scale.bind(Two.Events.change, this._renderer.flagScale);
+ }
+
+ this._flagScale = true;
+
+ }
+ });
+
+ }
+
+ });
+
+ _.extend(Texture.prototype, Two.Utils.Events, Two.Shape.prototype, {
+
+ _flagSrc: false,
+ _flagImage: false,
+ _flagVideo: false,
+ _flagLoaded: false,
+ _flagRepeat: false,
+
+ _flagOffset: false,
+ _flagScale: false,
+
+ _src: '',
+ _image: null,
+ _loaded: false,
+ _repeat: 'no-repeat',
+
+ _scale: 1,
+ _offset: null,
+
+ clone: function() {
+ return new Texture(this.src);
+ },
+
+ toObject: function() {
+ return {
+ src: this.src,
+ image: this.image
+ }
+ },
+
+ _update: function() {
+
+ if (this._flagSrc || this._flagImage || this._flagVideo) {
+
+ this.trigger(Two.Events.change);
+
+ if (this._flagSrc || this._flagImage) {
+ this.loaded = false;
+ Texture.load(this, _.bind(function() {
+ this.loaded = true;
+ this
+ .trigger(Two.Events.change)
+ .trigger(Two.Events.load);
+ }, this));
+ }
+
+ }
+
+ if (this._image && this._image.readyState >= 4) {
+ this._flagVideo = true;
+ }
+
+ return this;
+
+ },
+
+ flagReset: function() {
+
+ this._flagSrc = this._flagImage = this._flagLoaded
+ = this._flagVideo = this._flagScale = this._flagOffset = false;
+
+ return this;
+
+ }
+
+ });
+
+ Texture.MakeObservable(Texture.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+ var Path = Two.Path;
+ var Rectangle = Two.Rectangle;
+
+ var Sprite = Two.Sprite = function(path, ox, oy, cols, rows, frameRate) {
+
+ Path.call(this, [
+ new Two.Anchor(),
+ new Two.Anchor(),
+ new Two.Anchor(),
+ new Two.Anchor()
+ ], true);
+
+ this.noStroke();
+ this.noFill();
+
+ if (path instanceof Two.Texture) {
+ this.texture = path;
+ } else if (_.isString(path)) {
+ this.texture = new Two.Texture(path);
+ }
+
+ this._update();
+ this.translation.set(ox || 0, oy || 0);
+
+ if (_.isNumber(cols)) {
+ this.columns = cols;
+ }
+ if (_.isNumber(rows)) {
+ this.rows = rows;
+ }
+ if (_.isNumber(frameRate)) {
+ this.frameRate = frameRate;
+ }
+
+ };
+
+ _.extend(Sprite, {
+
+ Properties: [
+ 'texture', 'columns', 'rows', 'frameRate', 'index'
+ ],
+
+ MakeObservable: function(obj) {
+
+ Rectangle.MakeObservable(obj);
+ _.each(Sprite.Properties, Two.Utils.defineProperty, obj);
+
+ }
+
+ })
+
+ _.extend(Sprite.prototype, Rectangle.prototype, {
+
+ _flagTexture: false,
+ _flagColumns: false,
+ _flagRows: false,
+ _flagFrameRate: false,
+ flagIndex: false,
+
+ // Private variables
+ _amount: 1,
+ _duration: 0,
+ _startTime: 0,
+ _playing: false,
+ _firstFrame: 0,
+ _lastFrame: 0,
+ _loop: true,
+
+ // Exposed through getter-setter
+ _texture: null,
+ _columns: 1,
+ _rows: 1,
+ _frameRate: 0,
+ _index: 0,
+
+ play: function(firstFrame, lastFrame, onLastFrame) {
+
+ this._playing = true;
+ this._firstFrame = 0;
+ this._lastFrame = this.amount - 1;
+ this._startTime = _.performance.now();
+
+ if (_.isNumber(firstFrame)) {
+ this._firstFrame = firstFrame;
+ }
+ if (_.isNumber(lastFrame)) {
+ this._lastFrame = lastFrame;
+ }
+ if (_.isFunction(onLastFrame)) {
+ 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;
+
+ },
+
+ pause: function() {
+
+ this._playing = false;
+ return this;
+
+ },
+
+ stop: function() {
+
+ this._playing = false;
+ this._index = 0;
+
+ return this;
+
+ },
+
+ clone: function(parent) {
+
+ parent = parent || this.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;
+
+ },
+
+ _update: function() {
+
+ var effect = this._texture;
+ var cols = this._columns;
+ var rows = this._rows;
+
+ var width, height, elapsed, amount, duration;
+ var index, iw, ih, isRange, 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;
+
+ },
+
+ flagReset: function() {
+
+ this._flagTexture = this._flagColumns = this._flagRows
+ = this._flagFrameRate = false;
+
+ Rectangle.prototype.flagReset.call(this);
+
+ return this;
+ }
+
+
+ });
+
+ Sprite.MakeObservable(Sprite.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ var _ = Two.Utils;
+ var Path = Two.Path;
+ var Rectangle = Two.Rectangle;
+
+ var ImageSequence = Two.ImageSequence = function(paths, ox, oy, frameRate) {
+
+ Path.call(this, [
+ new Two.Anchor(),
+ new Two.Anchor(),
+ new Two.Anchor(),
+ new Two.Anchor()
+ ], true);
+
+ this._renderer.flagTextures = _.bind(ImageSequence.FlagTextures, this);
+ this._renderer.bindTextures = _.bind(ImageSequence.BindTextures, this);
+ this._renderer.unbindTextures = _.bind(ImageSequence.UnbindTextures, this);
+
+ this.noStroke();
+ this.noFill();
+
+ this.textures = _.map(paths, ImageSequence.GenerateTexture, this);
+
+ this._update();
+ this.translation.set(ox || 0, oy || 0);
+
+ if (_.isNumber(frameRate)) {
+ this.frameRate = frameRate;
+ } else {
+ this.frameRate = ImageSequence.DefaultFrameRate;
+ }
+
+ };
+
+ _.extend(ImageSequence, {
+
+ Properties: [
+ 'frameRate',
+ 'index'
+ ],
+
+ DefaultFrameRate: 30,
+
+ FlagTextures: function() {
+ this._flagTextures = true;
+ },
+
+ BindTextures: function(items) {
+
+ var i = items.length;
+ while (i--) {
+ items[i].bind(Two.Events.change, this._renderer.flagTextures);
+ }
+
+ this._renderer.flagTextures();
+
+ },
+
+ UnbindTextures: function(items) {
+
+ var i = items.length;
+ while (i--) {
+ items[i].unbind(Two.Events.change, this._renderer.flagTextures);
+ }
+
+ this._renderer.flagTextures();
+
+ },
+
+ MakeObservable: function(obj) {
+
+ Rectangle.MakeObservable(obj);
+ _.each(ImageSequence.Properties, Two.Utils.defineProperty, obj);
+
+ Object.defineProperty(obj, 'textures', {
+
+ enumerable: true,
+
+ get: function() {
+ return this._textures;
+ },
+
+ set: function(textures) {
+
+ var updateTextures = this._renderer.flagTextures;
+ var bindTextures = this._renderer.bindTextures;
+ var unbindTextures = this._renderer.unbindTextures;
+
+ // Remove previous listeners
+ if (this._textures) {
+ this._textures
+ .unbind(Two.Events.insert, bindTextures)
+ .unbind(Two.Events.remove, unbindTextures);
+ }
+
+ // Create new Collection with copy of vertices
+ this._textures = new Two.Utils.Collection((textures || []).slice(0));
+
+ // Listen for Collection changes and bind / unbind
+ this._textures
+ .bind(Two.Events.insert, bindTextures)
+ .bind(Two.Events.remove, unbindTextures);
+
+ // Bind Initial Textures
+ bindTextures(this._textures);
+
+ }
+
+ });
+
+ },
+
+ GenerateTexture: function(obj) {
+ if (obj instanceof Two.Texture) {
+ return obj;
+ } else if (_.isString(obj)) {
+ return new Two.Texture(obj);
+ }
+ }
+
+ });
+
+ _.extend(ImageSequence.prototype, Rectangle.prototype, {
+
+ _flagTextures: false,
+ _flagFrameRate: false,
+ _flagIndex: false,
+
+ // Private variables
+ _amount: 1,
+ _duration: 0,
+ _index: 0,
+ _startTime: 0,
+ _playing: false,
+ _firstFrame: 0,
+ _lastFrame: 0,
+ _loop: true,
+
+ // Exposed through getter-setter
+ _textures: null,
+ _frameRate: 0,
+
+ play: function(firstFrame, lastFrame, onLastFrame) {
+
+ this._playing = true;
+ this._firstFrame = 0;
+ this._lastFrame = this.amount - 1;
+ this._startTime = _.performance.now();
+
+ if (_.isNumber(firstFrame)) {
+ this._firstFrame = firstFrame;
+ }
+ if (_.isNumber(lastFrame)) {
+ this._lastFrame = lastFrame;
+ }
+ if (_.isFunction(onLastFrame)) {
+ 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;
+
+ },
+
+ pause: function() {
+
+ this._playing = false;
+ return this;
+
+ },
+
+ stop: function() {
+
+ this._playing = false;
+ this._index = 0;
+
+ return this;
+
+ },
+
+ clone: function(parent) {
+
+ parent = parent || this.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;
+
+ },
+
+ _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 Two.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;
+
+ },
+
+ flagReset: function() {
+
+ this._flagTextures = this._flagFrameRate = false;
+ Rectangle.prototype.flagReset.call(this);
+
+ return this;
+
+ }
+
+ });
+
+ ImageSequence.MakeObservable(ImageSequence.prototype);
+
+})((typeof global !== 'undefined' ? global : this).Two);
+
+(function(Two) {
+
+ /**
+ * Constants
+ */
+ var min = Math.min, max = Math.max;
+ var _ = Two.Utils;
+
+ /**
+ * A children collection which is accesible both by index and by object id
+ * @constructor
+ */
+ var Children = function() {
+
+ Two.Utils.Collection.apply(this, arguments);
+
+ Object.defineProperty(this, '_events', {
+ value : {},
+ enumerable: false
+ });
+
+ this.ids = {};
+
+ this.on(Two.Events.insert, this.attach);
+ this.on(Two.Events.remove, this.detach);
+ Children.prototype.attach.apply(this, arguments);
+
+ };
+
+ Children.prototype = new Two.Utils.Collection();
+ Children.prototype.constructor = Children;
+
+ _.extend(Children.prototype, {
+
+ attach: function(children) {
+ for (var i = 0; i < children.length; i++) {
+ this.ids[children[i].id] = children[i];
+ }
+ return this;
+ },
+
+ detach: function(children) {
+ for (var i = 0; i < children.length; i++) {
+ delete this.ids[children[i].id];
+ }
+ return this;
+ }
+
+ });
+
+ var Group = Two.Group = function() {
+
+ Two.Shape.call(this, true);
+
+ this._renderer.type = 'group';
+
+ this.additions = [];
+ this.subtractions = [];
+
+ this.children = arguments;
+
+ };
+
+ _.extend(Group, {
+
+ Children: Children,
+
+ InsertChildren: function(children) {
+ for (var i = 0; i < children.length; i++) {
+ replaceParent.call(this, children[i], this);
+ }
+ },
+
+ RemoveChildren: function(children) {
+ for (var i = 0; i < children.length; i++) {
+ replaceParent.call(this, children[i]);
+ }
+ },
+
+ OrderChildren: function(children) {
+ this._flagOrder = true;
+ },
+
+ MakeObservable: function(object) {
+
+ var properties = Two.Path.Properties.slice(0);
+ var oi = _.indexOf(properties, 'opacity');
+
+ if (oi >= 0) {
+
+ properties.splice(oi, 1);
+
+ Object.defineProperty(object, 'opacity', {
+
+ enumerable: true,
+
+ get: function() {
+ return this._opacity;
+ },
+
+ set: function(v) {
+ // Only set flag if there is an actual difference
+ this._flagOpacity = (this._opacity != v);
+ this._opacity = v;
+ }
+
+ });
+
+ }
+
+ Two.Shape.MakeObservable(object);
+ Group.MakeGetterSetters(object, properties);
+
+ Object.defineProperty(object, 'children', {
+
+ enumerable: true,
+
+ get: function() {
+ return this._children;
+ },
+
+ set: function(children) {
+
+ var insertChildren = _.bind(Group.InsertChildren, this);
+ var removeChildren = _.bind(Group.RemoveChildren, this);
+ var orderChildren = _.bind(Group.OrderChildren, this);
+
+ if (this._children) {
+ this._children.unbind();
+ }
+
+ this._children = new Children(children);
+ this._children.bind(Two.Events.insert, insertChildren);
+ this._children.bind(Two.Events.remove, removeChildren);
+ this._children.bind(Two.Events.order, orderChildren);
+
+ }
+
+ });
+
+ 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;
+ }
+ }
+
+ });
+
+ },
+
+ MakeGetterSetters: function(group, properties) {
+
+ if (!_.isArray(properties)) {
+ properties = [properties];
+ }
+
+ _.each(properties, function(k) {
+ Group.MakeGetterSetter(group, k);
+ });
+
+ },
+
+ MakeGetterSetter: function(group, k) {
+
+ var secret = '_' + k;
+
+ Object.defineProperty(group, k, {
+
+ enumerable: true,
+
+ get: function() {
+ return this[secret];
+ },
+
+ set: function(v) {
+ this[secret] = v;
+ _.each(this.children, function(child) { // Trickle down styles
+ child[k] = v;
+ });
+ }
+
+ });
+
+ }
+
+ });
+
+ _.extend(Group.prototype, Two.Shape.prototype, {
+
+ // Flags
+ // http://en.wikipedia.org/wiki/Flag
+
+ _flagAdditions: false,
+ _flagSubtractions: false,
+ _flagOrder: false,
+ _flagOpacity: true,
+
+ _flagMask: false,
+
+ // Underlying Properties
+
+ _fill: '#fff',
+ _stroke: '#000',
+ _linewidth: 1.0,
+ _opacity: 1.0,
+ _visible: true,
+
+ _cap: 'round',
+ _join: 'round',
+ _miter: 4,
+
+ _closed: true,
+ _curved: false,
+ _automatic: true,
+ _beginning: 0,
+ _ending: 1.0,
+
+ _mask: null,
+
+ /**
+ * 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.
+ */
+ clone: function(parent) {
+
+ parent = parent || this.parent;
+
+ var group = new Group();
+ var children = _.map(this.children, function(child) {
+ return child.clone(group);
+ });
+
+ group.add(children);
+
+ group.opacity = this.opacity;
+
+ if (this.mask) {
+ group.mask = this.mask;
+ }
+
+ group.translation.copy(this.translation);
+ group.rotation = this.rotation;
+ group.scale = this.scale;
+
+ if (parent) {
+ parent.add(group);
+ }
+
+ return group;
+
+ },
+
+ /**
+ * Export the data from the instance of Two.Group into a plain JavaScript
+ * object. This also makes all children plain JavaScript objects. Great
+ * for turning into JSON and storing in a database.
+ */
+ toObject: function() {
+
+ var result = {
+ children: [],
+ translation: this.translation.toObject(),
+ rotation: this.rotation,
+ scale: this.scale,
+ opacity: this.opacity,
+ mask: (this.mask ? this.mask.toObject() : null)
+ };
+
+ _.each(this.children, function(child, i) {
+ result.children[i] = child.toObject();
+ }, this);
+
+ return result;
+
+ },
+
+ /**
+ * Anchor all children to the upper left hand corner
+ * of the group.
+ */
+ corner: function() {
+
+ var rect = this.getBoundingClientRect(true),
+ corner = { x: rect.left, y: rect.top };
+
+ this.children.forEach(function(child) {
+ child.translation.subSelf(corner);
+ });
+
+ return this;
+
+ },
+
+ /**
+ * Anchors all children around the center of the group,
+ * effectively placing the shape around the unit circle.
+ */
+ center: function() {
+
+ var rect = this.getBoundingClientRect(true);
+
+ rect.centroid = {
+ x: rect.left + rect.width / 2,
+ y: rect.top + rect.height / 2
+ };
+
+ this.children.forEach(function(child) {
+ if (child.isShape) {
+ child.translation.subSelf(rect.centroid);
+ }
+ });
+
+ // this.translation.copy(rect.centroid);
+
+ return this;
+
+ },
+
+ /**
+ * Recursively search for id. Returns the first element found.
+ * Returns null if none found.
+ */
+ getById: function (id) {
+ var search = function (node, id) {
+ if (node.id === id) {
+ return node;
+ } else if (node.children) {
+ var i = node.children.length;
+ while (i--) {
+ var found = search(node.children[i], id);
+ if (found) return found;
+ }
+ }
+
+ };
+ return search(this, id) || null;
+ },
+
+ /**
+ * Recursively search for classes. Returns an array of matching elements.
+ * Empty array if none found.
+ */
+ getByClassName: function (cl) {
+ var found = [];
+ var search = function (node, cl) {
+ if (node.classList.indexOf(cl) != -1) {
+ found.push(node);
+ } else if (node.children) {
+ node.children.forEach(function (child) {
+ search(child, cl);
+ });
+ }
+ return found;
+ };
+ return search(this, cl);
+ },
+
+ /**
+ * Recursively search for children of a specific type,
+ * e.g. Two.Polygon. Pass a reference to this type as the param.
+ * Returns an empty array if none found.
+ */
+ getByType: function(type) {
+ var found = [];
+ var search = function (node, type) {
+ for (var id in node.children) {
+ if (node.children[id] instanceof type) {
+ found.push(node.children[id]);
+ } else if (node.children[id] instanceof Two.Group) {
+ search(node.children[id], type);
+ }
+ }
+ return found;
+ };
+ return search(this, type);
+ },
+
+ /**
+ * 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 = _.toArray(arguments);
+ } else {
+ objects = objects.slice();
+ }
+
+ // Add the objects
+ for (var i = 0; i < objects.length; i++) {
+ if (!(objects[i] && objects[i].id)) continue;
+ this.children.push(objects[i]);
+ }
+
+ return this;
+
+ },
+
+ /**
+ * 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 the scene.
+ 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 = _.toArray(arguments);
+ } else {
+ objects = objects.slice();
+ }
+
+ // Remove the objects
+ for (var i = 0; i < objects.length; i++) {
+ if (!objects[i] || !(this.children.ids[objects[i].id])) continue;
+ this.children.splice(_.indexOf(this.children, objects[i]), 1);
+ }
+
+ return this;
+
+ },
+
+ /**
+ * Return an object with top, left, right, bottom, width, and height
+ * parameters of the group.
+ */
+ getBoundingClientRect: function(shallow) {
+ var rect;
+
+ // 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;
+
+ this.children.forEach(function(child) {
+
+ if (/(linear-gradient|radial-gradient|gradient)/.test(child._renderer.type)) {
+ return;
+ }
+
+ rect = child.getBoundingClientRect(shallow);
+
+ if (!_.isNumber(rect.top) || !_.isNumber(rect.left) ||
+ !_.isNumber(rect.right) || !_.isNumber(rect.bottom)) {
+ return;
+ }
+
+ top = min(rect.top, top);
+ left = min(rect.left, left);
+ right = max(rect.right, right);
+ bottom = max(rect.bottom, bottom);
+
+ }, this);
+
+ return {
+ top: top,
+ left: left,
+ right: right,
+ bottom: bottom,
+ width: right - left,
+ height: bottom - top
+ };
+
+ },
+
+ /**
+ * Trickle down of noFill
+ */
+ noFill: function() {
+ this.children.forEach(function(child) {
+ child.noFill();
+ });
+ return this;
+ },
+
+ /**
+ * Trickle down of noStroke
+ */
+ noStroke: function() {
+ this.children.forEach(function(child) {
+ child.noStroke();
+ });
+ return this;
+ },
+
+ /**
+ * Trickle down subdivide
+ */
+ subdivide: function() {
+ var args = arguments;
+ this.children.forEach(function(child) {
+ child.subdivide.apply(child, args);
+ });
+ return this;
+ },
+
+ 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 = false;
+
+ Two.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) {
+ this.additions.push(child);
+ this._flagAdditions = true;
+ return;
+ }
+
+ if (parent && parent.children.ids[child.id]) {
+
+ index = _.indexOf(parent.children, child);
+ parent.children.splice(index, 1);
+
+ // If we're passing from one parent to another...
+ index = _.indexOf(parent.additions, child);
+
+ if (index >= 0) {
+ parent.additions.splice(index, 1);
+ } else {
+ parent.subtractions.push(child);
+ parent._flagSubtractions = true;
+ }
+
+ }
+
+ if (newParent) {
+ child.parent = newParent;
+ this.additions.push(child);
+ this._flagAdditions = true;
+ return;
+ }
+
+ // If we're passing from one parent to another...
+ index = _.indexOf(this.additions, child);
+
+ if (index >= 0) {
+ this.additions.splice(index, 1);
+ } else {
+ this.subtractions.push(child);
+ this._flagSubtractions = true;
+ }
+
+ delete child.parent;
+
+ }
+
+})((typeof global !== 'undefined' ? global : this).Two);
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-04 19:16:11 +0000