+
+
+
+
+
+
+
+
+
GUI\'s constructor:\n\n \n\n localStorage on exit.\n\n localStorage will\n override those passed to dat.GUI\'s constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n \n Some items are not shown due to the current visibility settings. Use the checkboxes at the upper right of this page to change the visibility settings.
This class doesn\'t provide any methods, properties, attributes, or events.
{{name}}Default: {{default}}
- {{/if}} - - {{#if emit}} -{{name}}Change- Fires when the value for the configuration attribute `{{{name}}}` is - changed. You can listen for the event using the `on` method if you - wish to be notified before the attribute's value has changed, or - using the `after` method if you wish to be notified after the - attribute's value has changed. -
- -e
- {{#crossLink "EventFacade"}}{{/crossLink}}
-
- prevVal
- Any
- newVal
- Any
- attrName
- {{#crossLink "String"}}{{/crossLink}}
- subAttrName
- {{#crossLink "String"}}{{/crossLink}}
- - {{#if deprecationMessage}} - Deprecated: {{deprecationMessage}} - {{else}} - This class is deprecated. - {{/if}} -
-{{name}}[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- {{#if multiple}}
- Multiple
- {{/if}}
-
- [{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- {{name}}
- {{#crossLink type}}{{/crossLink}}
-
-
-{{fileData}}
-
-{{name}}[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{else}}
- {{name}}
- {{/if}}
- [{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- {{#if multiple}}
- multiple
- {{/if}}
-
- [{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- [{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- - {{#if deprecationMessage}} - Deprecated: {{deprecationMessage}} - {{else}} - This module is deprecated. - {{/if}} -
-This module provides the following classes:
- -This module is a rollup of the following modules:
- -{{name}}Default: {{default}}
- {{/if}} - - {{#example}} -[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- [{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]
- {{#crossLink type}}{{/crossLink}}
- optional
- {{else}}
- {{name}}
- {{#crossLink type}}{{/crossLink}}
- {{/if}}
-
- ` tags and adds the __prettyprint__ `className` to them
- * @method _parseCode
- * @private
- * @param {HTML} html The HTML to parse
- * @return {HTML} The parsed HTML
- */
- _parseCode: function (html) {
- html = html || '';
- //html = html.replace(//g, '');
- html = html.replace(/' + Y.escapeHTML(code) + ' \n\t\t * \t- capture phase: starting from the top parent to the target
\n\t\t * \t- at target phase: currently being dispatched from the target
\n\t\t * \t- bubbling phase: from the target to the top parent
\n\t\t *
\n\t\t *\n\t\t * @type number\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.eventPhase = 0;\n\n\t\t/**\n\t\t * Indicates whether the event will bubble through the display list.\n\t\t *\n\t\t * @type boolean\n\t\t * @readonly\n\t\t */\n\t\tthis.bubbles = bubbles;\n\n\t\t/**\n\t\t * Indicates whether the default behaviour of this event can be cancelled via {@link core.Event#preventDefault}.\n\t\t *\n\t\t * @type boolean\n\t\t * @readonly\n\t\t */\n\t\tthis.cancelable = cancelable;\n\n\t\t/**\n\t\t * The epoch time at which this event was created.\n\t\t *\n\t\t * @type number\n\t\t * @readonly\n\t\t */\n\t\tthis.timeStamp = new Date().getTime();\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#preventDefault} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.defaultPrevented = false;\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#stopPropagation} or {@link core.Event#stopImmediatePropagation} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.propagationStopped = false;\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#stopImmediatePropagation} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.immediatePropagationStopped = false;\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#remove} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.removed = false;\n\t}\n\n\t/**\n\t * Sets {@link core.Event#defaultPrevented} to true if the event is cancelable.\n\t * Mirrors the DOM level 2 event standard. In general, cancelable events that have `preventDefault()` called will\n\t * cancel the default behaviour associated with the event.\n\t * @return {core.Event} this, chainable\n\t */\n\tpreventDefault () {\n\t\tthis.defaultPrevented = this.cancelable;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets {@link core.Event#propagationStopped} to true.\n\t * Mirrors the DOM event standard.\n\t * @return {core.Event} this, chainable\n\t */\n\tstopPropagation () {\n\t\tthis.propagationStopped = true;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets {@link core.Event#propagationStopped} and {@link core.Event#immediatePropagationStopped} to true.\n\t * Mirrors the DOM event standard.\n\t * @return {core.Event} this, chainable\n\t */\n\tstopImmediatePropagation () {\n\t\tthis.immediatePropagationStopped = this.propagationStopped = true;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Causes the active listener to be removed via removeEventListener();\n\t *\n\t * @example\n\t * myBtn.addEventListener(\"click\", event => {\n\t * event.remove(); // removes this listener.\n\t * });\n\t *\n\t * @return {core.Event} this, chainable\n\t */\n\tremove () {\n\t\tthis.removed = true;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of the Event instance.\n\t *\n\t * @return {core.Event} a clone of the Event instance.\n\t */\n\tclone () {\n\t\tconst event = new Event(this.type, this.bubbles, this.cancelable);\n\t\tfor (let n in this) {\n\t\t\tif (this.hasOwnProperty(n)) {\n\t\t\t\tevent[n] = this[n];\n\t\t\t}\n\t\t}\n\t\treturn event;\n\t}\n\n\t/**\n\t * Provides a return {core.Event} this, chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t * @param {Object} props A generic object containing properties to copy to the instance.\n\t * @return {core.Event} this, chainable\n\t */\n\tset (props) {\n\t\tfor (let n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t *\n\t * @return {string} A string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (type=${this.type})]`;\n\t}\n\n}\n\nexport default Event;\n","/**\n * @license EventDispatcher\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Event from \"./Event\";\n\n/**\n * EventDispatcher provides methods for managing queues of event listeners and dispatching events.\n *\n * You can either extend EventDispatcher or mix its methods into an existing prototype or instance by using the\n * EventDispatcher {@link core.EventDispatcher.initialize} method.\n *\n * Together with the CreateJS Event class, EventDispatcher provides an extended event model that is based on the\n * DOM Level 2 event model, including addEventListener, removeEventListener, and dispatchEvent. It supports\n * bubbling / capture, preventDefault, stopPropagation, stopImmediatePropagation, and handleEvent.\n *\n * EventDispatcher also exposes a {@link core.EventDispatcher#on} method, which makes it easier\n * to create scoped listeners, listeners that only run once, and listeners with associated arbitrary data. The\n * {@link core.EventDispatcher#off} method is merely an alias to {@link core.EventDispatcher#removeEventListener}.\n *\n * Another addition to the DOM Level 2 model is the {@link core.EventDispatcher#removeAllEventListeners}\n * method, which can be used to listeners for all events, or listeners for a specific event. The Event object also\n * includes a {@link core.Event#remove} method which removes the active listener.\n *\n * @memberof core\n * @example\n * // add EventDispatcher capabilities to the \"MyClass\" class.\n * EventDispatcher.initialize(MyClass.prototype);\n *\n * // Add an event.\n * instance.addEventListener(\"eventName\", event => console.log(event.target + \" was clicked.\"));\n *\n * // scope (\"this\") can be be a challenge with events.\n * // using the {@link core.EventDispatcher#on} method to subscribe to events simplifies this.\n * instance.addEventListener(\"click\", event => console.log(instance === this)); // false, scope is ambiguous.\n * instance.on(\"click\", event => console.log(instance === this)); // true, `on` uses dispatcher scope by default.\n */\nclass EventDispatcher {\n\n\t/**\n\t * Static initializer to mix EventDispatcher methods into a target object or prototype.\n\t *\n\t * @static\n\t * @example\n\t * EventDispatcher.initialize(MyClass.prototype); // add to the prototype of the class\n\t * EventDispatcher.initialize(myInstance); // add to a specific instance\n\t *\n\t * @param {Object} target The target object to inject EventDispatcher methods into.\n\t */\n\tstatic initialize (target) {\n\t\tconst p = EventDispatcher.prototype;\n\t\ttarget.addEventListener = p.addEventListener;\n\t\ttarget.on = p.on;\n\t\ttarget.removeEventListener = target.off = p.removeEventListener;\n\t\ttarget.removeAllEventListeners = p.removeAllEventListeners;\n\t\ttarget.hasEventListener = p.hasEventListener;\n\t\ttarget.dispatchEvent = p.dispatchEvent;\n\t\ttarget._dispatchEvent = p._dispatchEvent;\n\t\ttarget.willTrigger = p.willTrigger;\n\t}\n\n\tconstructor () {\n\t\t/**\n\t\t * @private\n\t\t * @default null\n\t\t * @type Object\n\t\t */\n\t\tthis._listeners = null;\n\n\t\t/**\n\t\t * @private\n\t\t * @default null\n\t\t * @type Object\n\t\t */\n\t\tthis._captureListeners = null;\n\t}\n\n\t/**\n\t * Adds the specified event listener. Note that adding multiple listeners to the same function will result in\n\t * multiple callbacks getting fired.\n\t *\n\t * @example\n\t * displayObject.addEventListener(\"click\", event => console.log('clicked', event));\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener An object with a handleEvent method, or a function that will be called when the event is dispatched.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t * @return {Function|Object} Returns the listener for chaining or assignment.\n\t */\n\taddEventListener (type, listener, useCapture = false) {\n\t\tlet listeners;\n\t\tif (useCapture) {\n\t\t\tlisteners = this._captureListeners = this._captureListeners || {};\n\t\t} else {\n\t\t\tlisteners = this._listeners = this._listeners || {};\n\t\t}\n\t\tlet arr = listeners[type];\n\t\tif (arr) {\n\t\t\tthis.removeEventListener(type, listener, useCapture);\n\t\t\tarr = listeners[type]; // remove may have deleted the array\n\t\t}\n\t\tif (arr) { arr.push(listener); }\n\t\telse { listeners[type] = [listener]; }\n\t\treturn listener;\n\t}\n\n\t/**\n\t * A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener\n\t * only run once, associate arbitrary data with the listener, and remove the listener.\n\t *\n\t * This method works by creating an anonymous wrapper function and subscribing it with `addEventListener`.\n\t * The wrapper function is returned for use with `removeEventListener` (or `off`).\n\t *\n\t * To remove a listener added with `on`, you must pass in the returned wrapper function as the listener, or use\n\t * {@link core.Event#remove}. Likewise, each time you call `on` a NEW wrapper function is subscribed, so multiple calls\n\t * to `on` with the same params will create multiple listeners.\n\t *\n\t * @example\n\t * const listener = myBtn.on(\"click\", handleClick, null, false, { count: 3 });\n\t * function handleClick (evt, data) {\n\t * data.count -= 1;\n\t * console.log(this == myBtn); // true - scope defaults to the dispatcher\n\t * if (data.count == 0) {\n\t * alert(\"clicked 3 times!\");\n\t * myBtn.off(\"click\", listener);\n\t * // alternately: evt.remove();\n\t * }\n\t * }\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener An object with a handleEvent method, or a function that will be called when the event is dispatched.\n\t * @param {Object} [scope=null] The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).\n\t * @param {boolean} [once=false] If true, the listener will remove itself after the first time it is triggered.\n\t * @param {*} [data={}] Arbitrary data that will be included as the second parameter when the listener is called.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t * @return {Function} Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.\n\t */\n\ton (type, listener, scope = null, once = false, data = {}, useCapture = false) {\n\t\tif (listener.handleEvent) {\n\t\t\tscope = scope || listener;\n\t\t\tlistener = listener.handleEvent;\n\t\t}\n\t\tscope = scope || this;\n\t\treturn this.addEventListener(type, evt => {\n\t\t\tlistener.call(scope, evt, data);\n\t\t\tonce && evt.remove();\n\t\t}, useCapture);\n\t}\n\n\t/**\n\t * Removes the specified event listener.\n\t *\n\t * You must pass the exact function reference used when the event was added. If a proxy\n\t * function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or\n\t * closure will not work.\n\t *\n\t * @example\n\t * displayObject.removeEventListener(\"click\", handleClick);\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener The listener function or object.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t */\n\tremoveEventListener (type, listener, useCapture = false) {\n\t\tconst listeners = useCapture ? this._captureListeners : this._listeners;\n\t\tif (!listeners) { return; }\n\t\tconst arr = listeners[type];\n\t\tif (!arr) { return; }\n\t\tconst l = arr.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tif (arr[i] === listener) {\n\t\t\t\tif (l === 1) { delete(listeners[type]); } // allows for faster checks.\n\t\t\t\telse { arr.splice(i, 1); }\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the\n\t * `on` method.\n\t *\n\t * To remove a listener added with `on`, you must pass in the returned wrapper function as the listener. See\n\t * {@link core.EventDispatcher#on} for an example.\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener The listener function or object.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t */\n\toff (type, listener, useCapture = false) {\n\t\tthis.removeEventListener(type, listener, useCapture);\n\t}\n\n\t/**\n\t * Removes all listeners for the specified type, or all listeners of all types.\n\t *\n\t * @example\n\t * // remove all listeners\n\t * displayObject.removeAllEventListeners();\n\t *\n\t * // remove all click listeners\n\t * displayObject.removeAllEventListeners(\"click\");\n\t *\n\t * @param {string} [type=null] The string type of the event. If omitted, all listeners for all types will be removed.\n\t */\n\tremoveAllEventListeners (type = null) {\n\t\tif (type) {\n\t\t\tif (this._listeners) { delete(this._listeners[type]); }\n\t\t\tif (this._captureListeners) { delete(this._captureListeners[type]); }\n\t\t} else {\n\t\t\tthis._listeners = this._captureListeners = null;\n\t\t}\n\t}\n\n\t/**\n\t * Dispatches the specified event to all listeners.\n\t *\n\t * @example\n\t * // use a string event\n\t * this.dispatchEvent(\"complete\")\n\t *\n\t * // use an Event instance\n\t * const event = new createjs.Event(\"progress\");\n\t * this.dispatchEvent(event);\n\t *\n\t * @param {Object|Event|string} eventObj An object with a \"type\" property, or a string type.\n\t * While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used,\n\t * dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can\n\t * be used to avoid event object instantiation for non-bubbling events that may not have any listeners.\n\t * @param {boolean} [bubbles=false] Specifies the `bubbles` value when a string was passed to eventObj.\n\t * @param {boolean} [cancelable=false] Specifies the `cancelable` value when a string was passed to eventObj.\n\t * @return {boolean} Returns false if `preventDefault()` was called on a cancelable event, true otherwise.\n\t */\n\tdispatchEvent (eventObj, bubbles = false, cancelable = false) {\n\t\tif (typeof eventObj === \"string\") {\n\t\t\t// skip everything if there's no listeners and it doesn't bubble:\n\t\t\tconst listeners = this._listeners;\n\t\t\tif (!bubbles && (!listeners || !listeners[eventObj])) { return true; }\n\t\t\teventObj = new Event(eventObj, bubbles, cancelable);\n\t\t} else if (eventObj.target && eventObj.clone) {\n\t\t\t// redispatching an active event object, so clone it:\n\t\t\teventObj = eventObj.clone();\n\t\t}\n\n\t\t// TODO: it would be nice to eliminate this. Maybe in favour of evtObj instanceof Event? Or !!evtObj.createEvent\n\t\ttry { eventObj.target = this; } catch (e) {} // try/catch allows redispatching of native events\n\n\t\tif (!eventObj.bubbles || !this.parent) {\n\t\t\tthis._dispatchEvent(eventObj, 2);\n\t\t} else {\n\t\t\tlet top = this;\n\t\t\tconst list = [top];\n\t\t\twhile (top.parent) { list.push(top = top.parent); }\n\t\t\tconst l = list.length;\n\t\t\tlet i;\n\n\t\t\t// capture & atTarget\n\t\t\tfor (i = l - 1; i >= 0 && !eventObj.propagationStopped; i--) {\n\t\t\t\tlist[i]._dispatchEvent(eventObj, 1+(i==0));\n\t\t\t}\n\t\t\t// bubbling\n\t\t\tfor (i = 1; i < l && !eventObj.propagationStopped; i++) {\n\t\t\t\tlist[i]._dispatchEvent(eventObj, 3);\n\t\t\t}\n\t\t}\n\t\treturn !eventObj.defaultPrevented;\n\t}\n\n\t/**\n\t * Indicates whether there is at least one listener for the specified event type.\n\t *\n\t * @param {string} type The string type of the event.\n\t * @return {boolean} Returns true if there is at least one listener for the specified event.\n\t */\n\thasEventListener (type) {\n\t\tconst listeners = this._listeners, captureListeners = this._captureListeners;\n\t\treturn !!((listeners && listeners[type]) || (captureListeners && captureListeners[type]));\n\t}\n\n\t/**\n\t * Indicates whether there is at least one listener for the specified event type on this object or any of its\n\t * ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the\n\t * specified type is dispatched from this object, it will trigger at least one listener.\n\t *\n\t * This is similar to {@link core.EventDispatcher#hasEventListener}, but it searches the entire\n\t * event flow for a listener, not just this object.\n\t *\n\t * @param {string} type The string type of the event.\n\t * @return {boolean} Returns `true` if there is at least one listener for the specified event.\n\t */\n\twillTrigger (type) {\n\t\tlet o = this;\n\t\twhile (o) {\n\t\t\tif (o.hasEventListener(type)) { return true; }\n\t\t\to = o.parent;\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name + this.name ? ` ${this.name}` : \"\"}]`;\n\t}\n\n\t/**\n\t * @private\n\t * @param {Object|Event|string} eventObj\n\t * @param {Object} eventPhase\n\t */\n\t_dispatchEvent (eventObj, eventPhase) {\n\t\tconst listeners = eventPhase === 1 ? this._captureListeners : this._listeners;\n\t\tif (eventObj && listeners) {\n\t\t\tlet arr = listeners[eventObj.type];\n\t\t\tlet l;\n\t\t\tif (!arr || (l = arr.length) === 0) { return; }\n\t\t\ttry { eventObj.currentTarget = this; } catch (e) {}\n\t\t\ttry { eventObj.eventPhase = eventPhase; } catch (e) {}\n\t\t\teventObj.removed = false;\n\n\t\t\tarr = arr.slice(); // to avoid issues with items being removed or added during the dispatch\n\t\t\tfor (let i = 0; i < l && !eventObj.immediatePropagationStopped; i++) {\n\t\t\t\tlet o = arr[i];\n\t\t\t\tif (o.handleEvent) { o.handleEvent(eventObj); }\n\t\t\t\telse { o(eventObj); }\n\t\t\t\tif (eventObj.removed) {\n\t\t\t\t\tthis.off(eventObj.type, o, eventPhase === 1);\n\t\t\t\t\teventObj.removed = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n}\n\nexport default EventDispatcher;\n","/**\n * @license Ticker\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport EventDispatcher from \"../events/EventDispatcher\";\nimport Event from \"../events/Event\";\n\n/**\n * The Ticker provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick\n * event to be notified when a set time interval has elapsed.\n *\n * Note that the interval that the tick event is called is a target interval, and may be broadcast at a slower interval\n * when under high CPU load. The Ticker class uses a static interface (ex. `Ticker.framerate = 30;`) and\n * can not be instantiated.\n *\n * @todo Pass timingMode, maxDelta, paused values as instantiation arguments?\n *\n * @memberof core\n * @example\n * Ticker.addEventListener(\"tick\", event => {\n * // Actions carried out each tick (aka frame)\n * if (!event.paused) {\n * // Actions carried out when the Ticker is not paused.\n * }\n * });\n * @example\n * // Ticker export explanation\n * import Ticker, { Ticker as TickerClass, getTicker } from \"@createjs/core\";\n * Ticker.name, Ticker.RAF // -> createjs.global, undefined\n * TickerClass.RAF // -> raf\n * Ticker === getTicker(\"createjs.global\") // -> true\n *\n * @extends core.EventDispatcher\n * @param {string} name The name assigned to this instance.\n */\nclass Ticker extends EventDispatcher {\n\n\t/**\n\t * In this mode, Ticker uses the requestAnimationFrame API, but attempts to synch the ticks to target framerate. It\n\t * uses a simple heuristic that compares the time of the RAF return to the target time for the current frame and\n\t * dispatches the tick when the time is within a certain threshold.\n\t *\n\t * This mode has a higher variance for time between frames than {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}},\n\t * but does not require that content be time based as with {{#crossLink \"Ticker/RAF:property\"}}{{/crossLink}} while\n\t * gaining the benefits of that API (screen synch, background throttling).\n\t *\n\t * Variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so\n\t * framerates of 10, 12, 15, 20, and 30 work well.\n\t *\n\t * Falls back to {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}} if the requestAnimationFrame API is not\n\t * supported.\n\t *\n\t * @static\n\t * @type {string}\n\t * @default \"synched\"\n\t * @readonly\n\t */\n\tstatic get RAF_SYNCHED () { return \"synched\"; }\n\n\t/**\n\t * In this mode, Ticker passes through the requestAnimationFrame heartbeat, ignoring the target framerate completely.\n\t * Because requestAnimationFrame frequency is not deterministic, any content using this mode should be time based.\n\t * You can leverage {@link core.Ticker#getTime} and the {@link core.Ticker#event:tick}\n\t * event object's \"delta\" properties to make this easier.\n\t *\n\t * Falls back on {@link core.Ticker.TIMEOUT} if the requestAnimationFrame API is not supported.\n\t *\n\t * @static\n\t * @type {string}\n\t * @default \"raf\"\n\t * @readonly\n\t */\n\tstatic get RAF () { return \"raf\"; }\n\n\t/**\n\t * In this mode, Ticker uses the setTimeout API. This provides predictable, adaptive frame timing, but does not\n\t * provide the benefits of requestAnimationFrame (screen synch, background throttling).\n\t *\n\t * @static\n\t * @type {string}\n\t * @default \"timeout\"\n\t * @readonly\n\t */\n\tstatic get TIMEOUT () { return \"timeout\"; }\n\n\tconstructor (name) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The name of this instance.\n\t\t * @type {string}\n\t\t */\n\t\tthis.name = name;\n\n\t\t/**\n\t\t * Specifies the timing api (setTimeout or requestAnimationFrame) and mode to use.\n\t\t *\n\t\t * @see {@link core.Ticker.TIMEOUT}\n\t\t * @see {@link core.Ticker.RAF}\n\t\t * @see {@link core.Ticker.RAF_SYNCHED}\n\t\t *\n\t\t * @type {string}\n\t\t * @default Ticker.TIMEOUT\n\t\t */\n\t\tthis.timingMode = Ticker.TIMEOUT;\n\n\t\t/**\n\t\t * Specifies a maximum value for the delta property in the tick event object. This is useful when building time\n\t\t * based animations and systems to prevent issues caused by large time gaps caused by background tabs, system sleep,\n\t\t * alert dialogs, or other blocking routines. Double the expected frame duration is often an effective value\n\t\t * (ex. maxDelta=50 when running at 40fps).\n\t\t *\n\t\t * This does not impact any other values (ex. time, runTime, etc), so you may experience issues if you enable maxDelta\n\t\t * when using both delta and other values.\n\t\t *\n\t\t * If 0, there is no maximum.\n\t\t *\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis.maxDelta = 0;\n\n\t\t/**\n\t\t * When the ticker is paused, all listeners will still receive a tick event, but the `paused` property\n\t\t * of the event will be `true`. Also, while paused the `runTime` will not increase.\n\t\t *\n\t\t * @example\n\t\t * Ticker.addEventListener(\"tick\", event => console.log(event.paused, Ticker.getTime(false), Ticker.getTime(true)));\n\t\t * Ticker.paused = true;\n\t\t *\n\t\t * @see {@link core.Ticker#event:tick}\n\t\t * @see {@link core.Ticker#getTime}\n\t\t * @see {@link core.Ticker#getEventTime}\n\t\t *\n\t\t * @type {boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.paused = false;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._inited = false;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._startTime = 0;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._pausedTime = 0;\n\n\t\t/**\n\t\t * The number of ticks that have passed.\n\t\t *\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._ticks = 0;\n\n\t\t/**\n\t\t * The number of ticks that have passed while Ticker has been paused.\n\t\t *\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default\n\t\t */\n\t\tthis._pausedTicks = 0;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default\n\t\t */\n\t\tthis._interval = 50;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default\n\t\t */\n\t\tthis._lastTime = 0;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {Array}\n\t\t * @default null\n\t\t */\n\t\tthis._times = null;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {Array}\n\t\t * @default null\n\t\t */\n\t\tthis._tickTimes = null;\n\n\t\t/**\n\t\t * Stores the timeout or requestAnimationFrame id.\n\t\t *\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default null\n\t\t */\n\t\tthis._timerId = null;\n\n\t\t/**\n\t\t * True if currently using requestAnimationFrame, false if using setTimeout. This may be different than timingMode\n\t\t * if that property changed and a tick hasn't fired.\n\t\t *\n\t\t * @private\n\t\t * @type {boolean}\n\t\t * @default true\n\t\t */\n\t\tthis._raf = true;\n\t}\n\n\t/**\n\t * Indicates the target time (in milliseconds) between ticks. Default is 50 (20 FPS).\n\t * Note that actual time between ticks may be more than specified depending on CPU load.\n\t * This property is ignored if the ticker is using the `RAF` timing mode.\n\t *\n\t * @type {number}\n\t */\n\tget interval () { return this._interval; }\n\tset interval (interval) {\n\t\tthis._interval = interval;\n\t\tif (!this._inited) { return; }\n\t\tthis._setupTick();\n\t}\n\n\t/**\n\t * Indicates the target frame rate in frames per second (FPS). Effectively just a shortcut to `interval`, where\n\t * `framerate == 1000/interval`.\n\t *\n\t * @type {number}\n\t */\n\tget framerate () { return 1000 / this._interval; }\n\tset framerate (framerate) { this.interval = 1000 / framerate; }\n\n\t/**\n\t * Starts the tick. This is called automatically when the first listener is added.\n\t */\n\tinit () {\n\t\tif (this._inited) { return; }\n\t\tthis._inited = true;\n\t\tthis._times = [];\n\t\tthis._tickTimes = [];\n\t\tthis._startTime = this._getTime();\n\t\tthis._times.push(this._lastTime = 0);\n\t\tthis._setupTick();\n\t}\n\n\t/**\n\t * Stops the Ticker and removes all listeners. Use init() to restart the Ticker.\n\t */\n\treset () {\n\t\tif (this._raf) {\n\t\t\tlet f = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame;\n\t\t\tf && f(this._timerId);\n\t\t} else {\n\t\t\tclearTimeout(this._timerId);\n\t\t}\n\t\tthis.removeAllEventListeners(\"tick\");\n\t\tthis._timerId = this._times = this._tickTimes = null;\n\t\tthis._startTime = this._lastTime = this._ticks = 0;\n\t\tthis._inited = false;\n\t}\n\n\t/**\n\t * Init the Ticker instance if it hasn't been already.\n\t */\n\taddEventListener (type, listener, useCapture) {\n\t\t!this._inited && this.init();\n\t\treturn super.addEventListener(type, listener, useCapture);\n\t}\n\n\t/**\n\t * Returns the average time spent within a tick. This can vary significantly from the value provided by getMeasuredFPS\n\t * because it only measures the time spent within the tick execution stack.\n\t *\n\t * Example 1: With a target FPS of 20, getMeasuredFPS() returns 20fps, which indicates an average of 50ms between\n\t * the end of one tick and the end of the next. However, getMeasuredTickTime() returns 15ms. This indicates that\n\t * there may be up to 35ms of \"idle\" time between the end of one tick and the start of the next.\n\t *\n\t * Example 2: With a target FPS of 30, getFPS() returns 10fps, which indicates an average of 100ms between the end of\n\t * one tick and the end of the next. However, getMeasuredTickTime() returns 20ms. This would indicate that something\n\t * other than the tick is using ~80ms (another script, DOM rendering, etc).\n\t *\n\t * @param {number} [ticks=null] The number of previous ticks over which to measure the average time spent in a tick.\n\t * Defaults to the number of ticks per second. To get only the last tick's time, pass in 1.\n\t * @return {number} The average time spent in a tick in milliseconds.\n\t */\n\tgetMeasuredTickTime (ticks = null) {\n\t\tconst times = this._tickTimes;\n\t\tif (!times || times.length < 1) { return -1; }\n\t\t// by default, calculate average for the past ~1 second:\n\t\tticks = Math.min(times.length, ticks || (this.framerate | 0));\n\t\treturn times.reduce((a, b) => a + b, 0) / ticks;\n\t}\n\n\t/**\n\t * Returns the actual frames / ticks per second.\n\t *\n\t * @param {number} [ticks=null] The number of previous ticks over which to measure the actual frames / ticks per second.\n\t * Defaults to the number of ticks per second.\n\t * @return {number} The actual frames / ticks per second. Depending on performance, this may differ\n\t * from the target frames per second.\n\t */\n\tgetMeasuredFPS (ticks = null) {\n\t\tconst times = this._times;\n\t\tif (!times || times.length < 2) { return -1; }\n\t\t// by default, calculate fps for the past ~1 second:\n\t\tticks = Math.min(times.length - 1, ticks || (this.framerate | 0));\n\t\treturn 1000 / ((times[0] - times[ticks]) / ticks);\n\t}\n\n\t/**\n\t * Returns the number of milliseconds that have elapsed since Ticker was initialized via {@link core.Ticker#init}.\n\t * Returns -1 if Ticker has not been initialized. For example, you could use\n\t * this in a time synchronized animation to determine the exact amount of time that has elapsed.\n\t *\n\t * @param {boolean} [runTime=false] If true only time elapsed while Ticker was not paused will be returned.\n\t * If false, the value returned will be total time elapsed since the first tick event listener was added.\n\t * @return {number} Number of milliseconds that have elapsed since Ticker was initialized or -1.\n\t */\n\tgetTime (runTime = false) {\n\t\treturn this._startTime ? this._getTime() - (runTime ? this._pausedTime : 0) : -1;\n\t}\n\n\t/**\n\t * Similar to {@link core.Ticker#getTime}, but returns the time on the most recent {@link core.Ticker#event:tick}\n\t * event object.\n\t *\n\t * @param {boolean} [runTime=false] If true, the runTime property will be returned instead of time.\n\t * @returns {number} The time or runTime property from the most recent tick event or -1.\n\t */\n\tgetEventTime (runTime = false) {\n\t\treturn this._startTime ? (this._lastTime || this._startTime) - (runTime ? this._pausedTime : 0) : -1;\n\t}\n\n\t/**\n\t * Returns the number of ticks that have been broadcast by Ticker.\n\t *\n\t * @param {boolean} [pauseable=false] Indicates whether to include ticks that would have been broadcast\n\t * while Ticker was paused. If true only tick events broadcast while Ticker is not paused will be returned.\n\t * If false, tick events that would have been broadcast while Ticker was paused will be included in the return\n\t * value.\n\t * @return {number} of ticks that have been broadcast.\n\t */\n\tgetTicks (pauseable = false) {\n\t\treturn this._ticks - (pauseable ? this._pausedTicks : 0);\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_handleSynch () {\n\t\tthis._timerId = null;\n\t\tthis._setupTick();\n\n\t\t// run if enough time has elapsed, with a little bit of flexibility to be early:\n\t\tif (this._getTime() - this._lastTime >= (this._interval - 1) * 0.97) {\n\t\t\tthis._tick();\n\t\t}\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_handleRAF () {\n\t\tthis._timerId = null;\n\t\tthis._setupTick();\n\t\tthis._tick();\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_handleTimeout () {\n\t\tthis._timerId = null;\n\t\tthis._setupTick();\n\t\tthis._tick();\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_setupTick () {\n\t\tif (this._timerId != null) { return; } // avoid duplicates\n\t\tconst mode = this.timingMode || (this._raf && Ticker.RAF);\n\t\tif (mode === Ticker.RAF_SYNCHED || mode === Ticker.RAF) {\n\t\t\tconst f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;\n\t\t\tif (f) {\n\t\t\t\tthis._timerId = f(mode === Ticker.RAF ? this._handleRAF.bind(this) : this._handleSynch.bind(this));\n\t\t\t\tthis._raf = true;\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tthis._raf = false;\n\t\tthis._timerId = setTimeout(this._handleTimeout.bind(this), this._interval);\n\t}\n\n\t/**\n\t * @private\n\t * @emits core.Ticker#event:tick\n\t */\n\t_tick () {\n\t\tconst paused = this.paused, time = this._getTime(), elapsedTime = time - this._lastTime;\n\t\tthis._lastTime = time;\n\t\tthis._ticks++;\n\n\t\tif (paused) {\n\t\t\tthis._pausedTicks++;\n\t\t\tthis._pausedTime += elapsedTime;\n\t\t}\n\n\t\tif (this.hasEventListener(\"tick\")) {\n\t\t\tconst event = new Event(\"tick\");\n\t\t\tconst maxDelta = this.maxDelta;\n\t\t\tevent.delta = (maxDelta && elapsedTime > maxDelta) ? maxDelta : elapsedTime;\n\t\t\tevent.paused = paused;\n\t\t\tevent.time = time;\n\t\t\tevent.runTime = time - this._pausedTime;\n\t\t\tthis.dispatchEvent(event);\n\t\t}\n\n\t\tthis._tickTimes.unshift(this._getTime() - time);\n\t\twhile (this._tickTimes.length > 100) { this._tickTimes.pop(); }\n\n\t\tthis._times.unshift(time);\n\t\twhile (this._times.length > 100) { this._times.pop(); }\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_getTime () {\n\t\tconst now = window.performance && window.performance.now;\n\t\treturn ((now && now.call(performance)) || (new Date().getTime())) - this._startTime;\n\t}\n\n\tstatic on (type, listener, scope, once, data, useCapture) { return _instance.on(type, listener, scope, once, data, useCapture); }\n\tstatic removeEventListener (type, listener, useCapture) { _instance.removeEventListener(type, listener, useCapture); }\n\tstatic off (type, listener, useCapture) { _instance.off(type, listener, useCapture); }\n\tstatic removeAllEventListeners (type) { _instance.removeAllEventListeners(type); }\n\tstatic dispatchEvent (eventObj, bubbles, cancelable) { return _instance.dispatchEvent(eventObj, bubbles, cancelable); }\n\tstatic hasEventListener (type) { return _instance.hasEventListener(type); }\n\tstatic willTrigger (type) { return _instance.willTrigger(type); }\n\tstatic toString () { return _instance.toString(); }\n\tstatic init () { _instance.init(); }\n\tstatic reset () { _instance.reset(); }\n\tstatic addEventListener (type, listener, useCapture) { _instance.addEventListener(type, listener, useCapture); }\n\tstatic getMeasuredTickTime (ticks) { return _instance.getMeasuredTickTime(ticks); }\n\tstatic getMeasuredFPS (ticks) { return _instance.getMeasuredFPS(ticks); }\n\tstatic getTime (runTime) { return _instance.getTime(runTime); }\n\tstatic getEventTime (runTime) { return _instance.getEventTime(runTime); }\n\tstatic getTicks (pauseable) { return _instance.getTicks(pauseable); }\n\n\tstatic get interval () { return _instance.interval; }\n\tstatic set interval (interval) { _instance.interval = interval; }\n\tstatic get framerate () { return _instance.framerate; }\n\tstatic set framerate (framerate) { _instance.framerate = framerate; }\n\tstatic get name () { return _instance.name; }\n\tstatic set name (name) { _instance.name = name; }\n\tstatic get timingMode () { return _instance.timingMode; }\n\tstatic set timingMode (timingMode) { _instance.timingMode = timingMode; }\n\tstatic get maxDelta () { return _instance.maxDelta; }\n\tstatic set maxDelta (maxDelta) { _instance.maxDelta = maxDelta; }\n\tstatic get paused () { return _instance.paused; }\n\tstatic set paused (paused) { _instance.paused = paused; }\n\n}\n\n/**\n * Dispatched each tick. The event will be dispatched to each listener even when the Ticker has been paused.\n *\n * @example\n * Ticker.addEventListener(\"tick\", event => console.log(\"Paused:\", event.paused, event.delta));\n *\n * @event core.Ticker#tick\n * @type {Object}\n * @property {Object} target The object that dispatched the event.\n * @property {string} type The event type.\n * @property {boolean} paused Indicates whether the ticker is currently paused.\n * @property {number} delta The time elapsed in ms since the last tick.\n * @property {number} time The total time in ms since Ticker was initialized.\n * @property {number} runTime The total time in ms that Ticker was not paused since it was initialized. For example,\n * you could determine the amount of time that the Ticker has been paused since initialization with `time-runTime`.\n * @since 0.6.0\n */\n\nexport default Ticker;\n\n// the default Ticker instance\nconst _instance = new Ticker(\"createjs.global\");\n","/**\n * @license\n *\n * StageGL\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nclass StageGL {\n\tconstructor () {\n\t\tthrow new Error(`\n\t\t\tStageGL is not currently supported on the EaselJS 2.0 branch.\n\t\t\tEnd of Q1 2018 is targetted for StageGL support.\n\t\t\tFollow @CreateJS on Twitter for updates.\n\t\t`);\n\t}\n}\n\nexport default StageGL;\n","/**\n * @license Shadow\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * This class encapsulates the properties required to define a shadow to apply to a {@link easeljs.DisplayObject}\n * via its `shadow` property.\n *\n * @memberof easeljs\n * @example\n * img.shadow = new Shadow(\"#000000\", 5, 5, 10);\n *\n * @param {String} [color=black] The color of the shadow. This can be any valid CSS color value.\n * @param {Number} [offsetX=0] The x offset of the shadow in pixels.\n * @param {Number} [offsetY=0] The y offset of the shadow in pixels.\n * @param {Number} [blur=0] The size of the blurring effect.\n */\nexport default class Shadow {\n\n\tconstructor (color = \"black\", offsetX = 0, offsetY = 0, blur = 0) {\n\t\t/**\n\t\t * The color of the shadow. This can be any valid CSS color value.\n\t\t * @type {String}\n\t\t * @default black\n\t\t */\n\t\tthis.color = color;\n\n\t\t/**\n\t\t * The x offset of the shadow.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offsetX = offsetX;\n\n\t\t/**\n\t\t * The y offset of the shadow.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offsetY = offsetY;\n\n\t\t/**\n\t\t * The blur of the shadow.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.blur = blur;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String}\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * Returns a clone of this Shadow instance.\n\t * @return {Shadow} A clone of the current Shadow instance.\n\t */\n\tclone () {\n\t\treturn new Shadow(this.color, this.offsetX, this.offsetY, this.blur);\n\t}\n\n}\n\n/**\n * An identity shadow object (all properties are set to 0).\n * @type {easeljs.Shadow}\n * @static\n * @readonly\n */\nShadow.identity = new Shadow(\"transparent\");\n","/**\n * @license uid\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/** @ignore */\nlet _nextId = 0;\n\n/**\n * Global utility for generating sequential unique ID numbers.\n *\n * @memberof easeljs\n * @name easeljs.uid\n * @example\n * import { uid } from \"@createjs/easeljs\";\n * var ids = [];\n * while (ids.length <= 3) {\n * ids.push(uid());\n * }\n * // ids == [0, 1, 2, 3]\n */\nexport default function uid () {\n\treturn _nextId++;\n}\n","/**\n * @license Point\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Represents a point on a 2 dimensional x / y coordinate system.\n *\n * @memberof easeljs\n * @example\n * let point = new Point(0, 100);\n *\n * @param {Number} [x] X position.\n * @param {Number} [y] Y position.\n */\nexport default class Point {\n\n\tconstructor (x, y) {\n\t\tthis.setValues(x, y);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * X position.\n\t\t * @property x\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Y position.\n\t\t * @property y\n\t\t * @type {Number}\n\t\t */\n\t}\n\n\t/**\n\t * Sets the specified values on this instance.\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @return {easeljs.Point} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (x = 0, y = 0) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Copies all properties from the specified point to this point.\n\t * @param {easeljs.Point} point The point to copy properties from.\n\t * @return {easeljs.Point} This point. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tcopy (point) {\n\t\tthis.x = point.x;\n\t\tthis.y = point.y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of the Point instance.\n\t * @return {easeljs.Point} a clone of the Point instance.\n\t */\n\tclone () {\n\t\treturn new Point(this.x, this.y);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (x=${this.x} y=${this.y})]`;\n\t}\n\n}\n","/**\n * @license Matrix2D\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Point from \"./Point\";\n\n/**\n * Represents an affine transformation matrix, and provides tools for constructing and concatenating matrices.\n *\n * \n * This matrix can be visualized as:\n *\n * \t[ a c tx\n * \t b d ty\n * \t 0 0 1 ]\n *\n * Note the locations of b and c.\n *
\n *\n * @param {Number} [a] Specifies the a property for the new matrix.\n * @param {Number} [b] Specifies the b property for the new matrix.\n * @param {Number} [c] Specifies the c property for the new matrix.\n * @param {Number} [d] Specifies the d property for the new matrix.\n * @param {Number} [tx] Specifies the tx property for the new matrix.\n * @param {Number} [ty] Specifies the ty property for the new matrix.\n */\nexport default class Matrix2D {\n\n\tconstructor (a, b, c, d, tx, ty) {\n\t\tthis.setValues(a, b, c, d, tx, ty);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * Position (0, 0) in a 3x3 affine transformation matrix.\n\t\t * @property a\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (0, 1) in a 3x3 affine transformation matrix.\n\t\t * @property b\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (1, 0) in a 3x3 affine transformation matrix.\n\t\t * @property c\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (1, 1) in a 3x3 affine transformation matrix.\n\t\t * @property d\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (2, 0) in a 3x3 affine transformation matrix.\n\t\t * @property tx\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (2, 1) in a 3x3 affine transformation matrix.\n\t\t * @property ty\n\t\t * @type {Number}\n\t\t */\n\t}\n\n\t/**\n\t * Sets the specified values on this instance.\n\t * @param {Number} [a=1] Specifies the a property for the new matrix.\n\t * @param {Number} [b=0] Specifies the b property for the new matrix.\n\t * @param {Number} [c=0] Specifies the c property for the new matrix.\n\t * @param {Number} [d=1] Specifies the d property for the new matrix.\n\t * @param {Number} [tx=0] Specifies the tx property for the new matrix.\n\t * @param {Number} [ty=0] Specifies the ty property for the new matrix.\n\t * @return {Matrix2D} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) {\n\t\t// don't forget to update docs in the constructor if these change:\n\t\tthis.a = a;\n\t\tthis.b = b;\n\t\tthis.c = c;\n\t\tthis.d = d;\n\t\tthis.tx = tx;\n\t\tthis.ty = ty;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Appends the specified matrix properties to this matrix. All parameters are required.\n\t * This is the equivalent of multiplying `(this matrix) * (specified matrix)`.\n\t * @param {Number} a\n\t * @param {Number} b\n\t * @param {Number} c\n\t * @param {Number} d\n\t * @param {Number} tx\n\t * @param {Number} ty\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tappend (a, b, c, d, tx, ty) {\n\t\tlet a1 = this.a;\n\t\tlet b1 = this.b;\n\t\tlet c1 = this.c;\n\t\tlet d1 = this.d;\n\t\tif (a != 1 || b != 0 || c != 0 || d != 1) {\n\t\t\tthis.a = a1*a+c1*b;\n\t\t\tthis.b = b1*a+d1*b;\n\t\t\tthis.c = a1*c+c1*d;\n\t\t\tthis.d = b1*c+d1*d;\n\t\t}\n\t\tthis.tx = a1*tx+c1*ty+this.tx;\n\t\tthis.ty = b1*tx+d1*ty+this.ty;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Prepends the specified matrix properties to this matrix.\n\t * This is the equivalent of multiplying `(specified matrix) * (this matrix)`.\n\t * @param {Number} a\n\t * @param {Number} b\n\t * @param {Number} c\n\t * @param {Number} d\n\t * @param {Number} tx\n\t * @param {Number} ty\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tprepend (a, b, c, d, tx, ty) {\n\t\tlet a1 = this.a;\n\t\tlet c1 = this.c;\n\t\tlet tx1 = this.tx;\n\n\t\tthis.a = a*a1+c*this.b;\n\t\tthis.b = b*a1+d*this.b;\n\t\tthis.c = a*c1+c*this.d;\n\t\tthis.d = b*c1+d*this.d;\n\t\tthis.tx = a*tx1+c*this.ty+tx;\n\t\tthis.ty = b*tx1+d*this.ty+ty;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Appends the specified matrix to this matrix.\n\t * This is the equivalent of multiplying `(this matrix) * (specified matrix)`.\n\t * @param {easeljs.Matrix2D} matrix\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tappendMatrix (matrix) {\n\t\treturn this.append(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t}\n\n\t/**\n\t * Prepends the specified matrix to this matrix.\n\t * This is the equivalent of multiplying `(specified matrix) * (this matrix)`.\n\t *\n\t * @example Calculate the combined transformation for a child object \n\t * let o = displayObject;\n\t * let mtx = o.getMatrix();\n\t * while (o = o.parent) {\n\t * \t // prepend each parent's transformation in turn:\n\t * \t o.prependMatrix(o.getMatrix());\n\t * }\n\t *\n\t * @param {easeljs.Matrix2D} matrix\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tprependMatrix (matrix) {\n\t\treturn this.prepend(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t}\n\n\t/**\n\t * Generates matrix properties from the specified display object transform properties, and appends them to this matrix.\n\t *\n\t * @example Generate a matrix representing the transformations of a display object \n\t * let mtx = new Matrix2D();\n\t * mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation);\n\t *\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} scaleX\n\t * @param {Number} scaleY\n\t * @param {Number} rotation\n\t * @param {Number} skewX\n\t * @param {Number} skewY\n\t * @param {Number} [regX]\n\t * @param {Number} [regY]\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tappendTransform (x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tlet r, cos, sin;\n\t\tif (rotation%360) {\n\t\t\tr = rotation*Matrix2D.DEG_TO_RAD;\n\t\t\tcos = Math.cos(r);\n\t\t\tsin = Math.sin(r);\n\t\t} else {\n\t\t\tcos = 1;\n\t\t\tsin = 0;\n\t\t}\n\n\t\tif (skewX || skewY) {\n\t\t\t// TODO: can this be combined into a single append operation?\n\t\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\t\tthis.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);\n\t\t\tthis.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);\n\t\t} else {\n\t\t\tthis.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);\n\t\t}\n\n\t\tif (regX || regY) {\n\t\t\t// append the registration offset:\n\t\t\tthis.tx -= regX*this.a+regY*this.c;\n\t\t\tthis.ty -= regX*this.b+regY*this.d;\n\t\t}\n\t\treturn this;\n\t}\n\n\t/**\n\t * Generates matrix properties from the specified display object transform properties, and prepends them to this matrix.\n\t *\n\t * Note that the above example would not account for {@link easeljs.DisplayObject#transformMatrix} values.\n\t * See {@link easeljs.Matrix2D#prependMatrix} for an example that does.\n\t *\n\t * @example Calculate the combined transformation for a child object \n\t * let o = displayObject;\n\t * let mtx = new Matrix2D();\n\t * do {\n\t * \t // prepend each parent's transformation in turn:\n\t * \t mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);\n\t * } while (o = o.parent);\n\t *\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} scaleX\n\t * @param {Number} scaleY\n\t * @param {Number} rotation\n\t * @param {Number} skewX\n\t * @param {Number} skewY\n\t * @param {Number} [regX]\n\t * @param {Number} [regY]\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t */\n\tprependTransform (x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tlet r, cos, sin;\n\t\tif (rotation%360) {\n\t\t\tr = rotation*Matrix2D.DEG_TO_RAD;\n\t\t\tcos = Math.cos(r);\n\t\t\tsin = Math.sin(r);\n\t\t} else {\n\t\t\tcos = 1;\n\t\t\tsin = 0;\n\t\t}\n\n\t\tif (regX || regY) {\n\t\t\t// prepend the registration offset:\n\t\t\tthis.tx -= regX; this.ty -= regY;\n\t\t}\n\t\tif (skewX || skewY) {\n\t\t\t// TODO: can this be combined into a single prepend operation?\n\t\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\t\tthis.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);\n\t\t\tthis.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);\n\t\t} else {\n\t\t\tthis.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);\n\t\t}\n\t\treturn this;\n\t}\n\n\t/**\n\t * Applies a clockwise rotation transformation to the matrix.\n\t * @param {Number} angle The angle to rotate by, in degrees. To use a value in radians, multiply it by `Math.PI/180`.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\trotate (angle) {\n\t\tangle *= Matrix2D.DEG_TO_RAD;\n\t\tlet cos = Math.cos(angle);\n\t\tlet sin = Math.sin(angle);\n\n\t\tlet a1 = this.a;\n\t\tlet b1 = this.b;\n\n\t\tthis.a = a1*cos+this.c*sin;\n\t\tthis.b = b1*cos+this.d*sin;\n\t\tthis.c = -a1*sin+this.c*cos;\n\t\tthis.d = -b1*sin+this.d*cos;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Applies a skew transformation to the matrix.\n\t * @param {Number} skewX The amount to skew horizontally in degrees. To use a value in radians, multiply it by `Math.PI/180`.\n\t * @param {Number} skewY The amount to skew vertically in degrees.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tskew (skewX, skewY) {\n\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\tthis.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), 0, 0);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Applies a scale transformation to the matrix.\n\t * @param {Number} x The amount to scale horizontally. E.G. a value of 2 will double the size in the X direction, and 0.5 will halve it.\n\t * @param {Number} y The amount to scale vertically.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tscale (x, y) {\n\t\tthis.a *= x;\n\t\tthis.b *= x;\n\t\tthis.c *= y;\n\t\tthis.d *= y;\n\t\t//this.tx *= x;\n\t\t//this.ty *= y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Translates the matrix on the x and y axes.\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\ttranslate (x, y) {\n\t\tthis.tx += this.a*x + this.c*y;\n\t\tthis.ty += this.b*x + this.d*y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets the properties of the matrix to those of an identity matrix (one that applies a null transformation).\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tidentity () {\n\t\tthis.a = this.d = 1;\n\t\tthis.b = this.c = this.tx = this.ty = 0;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Inverts the matrix, causing it to perform the opposite transformation.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tinvert () {\n\t\tlet a1 = this.a;\n\t\tlet b1 = this.b;\n\t\tlet c1 = this.c;\n\t\tlet d1 = this.d;\n\t\tlet tx1 = this.tx;\n\t\tlet n = a1*d1-b1*c1;\n\n\t\tthis.a = d1/n;\n\t\tthis.b = -b1/n;\n\t\tthis.c = -c1/n;\n\t\tthis.d = a1/n;\n\t\tthis.tx = (c1*this.ty-d1*tx1)/n;\n\t\tthis.ty = -(a1*this.ty-b1*tx1)/n;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns true if the matrix is an identity matrix.\n\t * @return {Boolean}\n\t */\n\tisIdentity () {\n\t\treturn this.tx === 0 && this.ty === 0 && this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1;\n\t}\n\n\t/**\n\t * Returns true if this matrix is equal to the specified matrix (all property values are equal).\n\t * @param {easeljs.Matrix2D} matrix The matrix to compare.\n\t * @return {Boolean}\n\t */\n\tequals (matrix) {\n\t\treturn this.tx === matrix.tx && this.ty === matrix.ty && this.a === matrix.a && this.b === matrix.b && this.c === matrix.c && this.d === matrix.d;\n\t}\n\n\t/**\n\t * Transforms a point according to this matrix.\n\t * @param {Number} x The x component of the point to transform.\n\t * @param {Number} y The y component of the point to transform.\n\t * @param {easeljs.Point | Object} [pt] An object to copy the result into. If omitted a generic object with x/y properties will be returned.\n\t * @return {easeljs.Point} This matrix. Useful for chaining method calls.\n\t */\n\ttransformPoint (x, y, pt = new Point()) {\n\t\tpt.x = x*this.a+y*this.c+this.tx;\n\t\tpt.y = x*this.b+y*this.d+this.ty;\n\t\treturn pt;\n\t}\n\n\t/**\n\t * Decomposes the matrix into transform properties (x, y, scaleX, scaleY, and rotation). Note that these values\n\t * may not match the transform properties you used to generate the matrix, though they will produce the same visual\n\t * results.\n\t * @param {Object} [target] The object to apply the transform properties to. If null, then a new object will be returned.\n\t * @return {Object} The target, or a new generic object with the transform properties applied.\n\t*/\n\tdecompose (target = {}) {\n\t\t// TODO: it would be nice to be able to solve for whether the matrix can be decomposed into only scale/rotation even when scale is negative\n\t\ttarget.x = this.tx;\n\t\ttarget.y = this.ty;\n\t\ttarget.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);\n\t\ttarget.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);\n\n\t\tlet skewX = Math.atan2(-this.c, this.d);\n\t\tlet skewY = Math.atan2(this.b, this.a);\n\n\t\tlet delta = Math.abs(1-skewX/skewY);\n\t\tif (delta < 0.00001) { // effectively identical, can use rotation:\n\t\t\ttarget.rotation = skewY/Matrix2D.DEG_TO_RAD;\n\t\t\tif (this.a < 0 && this.d >= 0) {\n\t\t\t\ttarget.rotation += (target.rotation <= 0) ? 180 : -180;\n\t\t\t}\n\t\t\ttarget.skewX = target.skewY = 0;\n\t\t} else {\n\t\t\ttarget.skewX = skewX/Matrix2D.DEG_TO_RAD;\n\t\t\ttarget.skewY = skewY/Matrix2D.DEG_TO_RAD;\n\t\t}\n\t\treturn target;\n\t}\n\n\t/**\n\t * Copies all properties from the specified matrix to this matrix.\n\t * @param {easeljs.Matrix2D} matrix The matrix to copy properties from.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tcopy (matrix) {\n\t\treturn this.setValues(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t}\n\n\t/**\n\t * Returns a clone of the Matrix2D instance.\n\t * @return {easeljs.Matrix2D} a clone of the Matrix2D instance.\n\t */\n\tclone () {\n\t\treturn new Matrix2D(this.a, this.b, this.c, this.d, this.tx, this.ty);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (a=${this.a} b=${this.b} c=${this.c} d=${this.d} tx=${this.tx} ty=${this.ty})]`;\n\t}\n\n}\n\n/**\n * Multiplier for converting degrees to radians. Used internally by Matrix2D.\n * @static\n * @type {Number}\n * @readonly\n */\nMatrix2D.DEG_TO_RAD = Math.PI/180;\n/**\n * An identity matrix, representing a null transformation.\n * @static\n * @type {easeljs.Matrix2D}\n * @readonly\n */\nMatrix2D.identity = new Matrix2D();\n","/**\n * @license DisplayProps\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Matrix2D from \"./Matrix2D\";\n\n/**\n * Used for calculating and encapsulating display related properties.\n * @memberof easeljs\n * @param {Number} [visible] Visible value.\n * @param {Number} [alpha] Alpha value.\n * @param {Number} [shadow] A Shadow instance or null.\n * @param {Number} [compositeOperation] A compositeOperation value or null.\n * @param {Number} [matrix] A transformation matrix. Defaults to a new identity matrix.\n */\nexport default class DisplayProps {\n\n\tconstructor (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.setValues(visible, alpha, shadow, compositeOperation, matrix);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * Property representing the alpha that will be applied to a display object.\n\t\t * @property alpha\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Property representing the shadow that will be applied to a display object.\n\t\t * @property shadow\n\t\t * @type {easeljs.Shadow}\n\t\t */\n\n\t\t/**\n\t\t * Property representing the compositeOperation that will be applied to a display object.\n\t\t * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing}\n\t\t * @property compositeOperation\n\t\t * @type {String}\n\t\t */\n\n\t\t/**\n\t\t * Property representing the value for visible that will be applied to a display object.\n\t\t * @property visible\n\t\t * @type {Boolean}\n\t\t */\n\n\t\t/**\n\t\t * The transformation matrix that will be applied to a display object.\n\t\t * @property matrix\n\t\t * @type {easeljs.Matrix2D}\n\t\t */\n\t}\n\n\t/**\n\t * Reinitializes the instance with the specified values.\n\t * @param {Number} [visible=true] Visible value.\n\t * @param {Number} [alpha=1] Alpha value.\n\t * @param {Number} [shadow] A Shadow instance or null.\n\t * @param {Number} [compositeOperation] A compositeOperation value or null.\n\t * @param {Number} [matrix] A transformation matrix. Defaults to an identity matrix.\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (visible = true, alpha = 1, shadow, compositeOperation, matrix) {\n\t\tthis.visible = visible;\n\t\tthis.alpha = alpha;\n\t\tthis.shadow = shadow;\n\t\tthis.compositeOperation = compositeOperation;\n\t\tthis.matrix = matrix || (this.matrix&&this.matrix.identity()) || new Matrix2D();\n\t\treturn this;\n\t}\n\n\t/**\n\t * Appends the specified display properties. This is generally used to apply a child's properties its parent's.\n\t * @param {Boolean} visible desired visible value\n\t * @param {Number} alpha desired alpha value\n\t * @param {easeljs.Shadow} shadow desired shadow value\n\t * @param {String} compositeOperation desired composite operation value\n\t * @param {easeljs.Matrix2D} [matrix] a Matrix2D instance\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tappend (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.alpha *= alpha;\n\t\tthis.shadow = shadow || this.shadow;\n\t\tthis.compositeOperation = compositeOperation || this.compositeOperation;\n\t\tthis.visible = this.visible && visible;\n\t\tmatrix&&this.matrix.appendMatrix(matrix);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Prepends the specified display properties. This is generally used to apply a parent's properties to a child's.\n\t * For example, to get the combined display properties that would be applied to a child, you could use:\n\t *\n\t * @example\n\t * let o = displayObject;\n\t * let props = new DisplayProps();\n\t * do {\n\t * \t // prepend each parent's props in turn:\n\t * \t props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation, o.getMatrix());\n\t * } while (o = o.parent);\n\t *\n\t * @param {Boolean} visible desired visible value\n\t * @param {Number} alpha desired alpha value\n\t * @param {easeljs.Shadow} shadow desired shadow value\n\t * @param {String} compositeOperation desired composite operation value\n\t * @param {easeljs.Matrix2D} [matrix] a Matrix2D instance\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tprepend (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.alpha *= alpha;\n\t\tthis.shadow = this.shadow || shadow;\n\t\tthis.compositeOperation = this.compositeOperation || compositeOperation;\n\t\tthis.visible = this.visible && visible;\n\t\tmatrix&&this.matrix.prependMatrix(matrix);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Resets this instance and its matrix to default values.\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tidentity () {\n\t\tthis.visible = true;\n\t\tthis.alpha = 1;\n\t\tthis.shadow = this.compositeOperation = null;\n\t\tthis.matrix.identity();\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of the DisplayProps instance. Clones the associated matrix.\n\t * @return {easeljs.DisplayProps} a clone of the DisplayProps instance.\n\t */\n\tclone () {\n\t\treturn new DisplayProps(this.alpha, this.shadow, this.compositeOperation, this.visible, this.matrix.clone());\n\t}\n\n}\n","/**\n * @license Rectangle\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Represents a rectangle as defined by the points (x, y) and (x+width, y+height).\n * Used by {@link easeljs.DisplayObjects#getBounds}.\n *\n * @memberof easeljs\n * @example\n * let rect = new Rectangle(0, 0, 100, 100);\n *\n * @param {Number} [x] X position.\n * @param {Number} [y] Y position.\n * @param {Number} [width] The width of the Rectangle.\n * @param {Number} [height] The height of the Rectangle.\n */\nexport default class Rectangle {\n\n\tconstructor (x, y, width, height) {\n\t\tthis.setValues(x, y, width, height);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * X position.\n\t\t * @property x\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Y position.\n\t\t * @property y\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Width.\n\t\t * @property width\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Height.\n\t\t * @property height\n\t\t * @type {Number}\n\t\t */\n\t}\n\n\t/**\n\t * Sets the specified values on this instance.\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @param {Number} [width=0] The width of the Rectangle.\n\t * @param {Number} [height=0] The height of the Rectangle.\n\t * @return {easeljs.Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (x = 0, y = 0, width = 0, height = 0) {\n\t\t// don't forget to update docs in the constructor if these change:\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.width = width;\n\t\tthis.height = height;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Extends the rectangle's bounds to include the described point or rectangle.\n\t * @param {Number} x X position of the point or rectangle.\n\t * @param {Number} y Y position of the point or rectangle.\n\t * @param {Number} [width=0] The width of the rectangle.\n\t * @param {Number} [height=0] The height of the rectangle.\n\t * @return {easeljs.Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\textend (x, y, width = 0, height = 0) {\n\t\tif (x+width > this.x+this.width) { this.width = x+width-this.x; }\n\t\tif (y+height > this.y+this.height) { this.height = y+height-this.y; }\n\t\tif (x < this.x) { this.width += this.x-x; this.x = x; }\n\t\tif (y < this.y) { this.height += this.y-y; this.y = y; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Adds the specified padding to the rectangle's bounds.\n\t * @param {Number} top\n\t * @param {Number} left\n\t * @param {Number} bottom\n\t * @param {Number} right\n\t * @return {easeljs.Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tpad (top, left, bottom, right) {\n\t\tthis.x -= left;\n\t\tthis.y -= top;\n\t\tthis.width += left+right;\n\t\tthis.height += top+bottom;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Copies all properties from the specified rectangle to this rectangle.\n\t * @param {easeljs.Rectangle} rectangle The rectangle to copy properties from.\n\t * @return {easeljs.Rectangle} This rectangle. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tcopy (rect) {\n\t\treturn this.setValues(rect.x, rect.y, rect.width, rect.height);\n\t}\n\n\t/**\n\t * Returns true if this rectangle fully encloses the described point or rectangle.\n\t * @param {Number} x X position of the point or rectangle.\n\t * @param {Number} y Y position of the point or rectangle.\n\t * @param {Number} [width=0] The width of the rectangle.\n\t * @param {Number} [height=0] The height of the rectangle.\n\t * @return {Boolean} True if the described point or rectangle is contained within this rectangle.\n\t*/\n\tcontains (x, y, width = 0, height = 0) {\n\t\treturn (x >= this.x && x+width <= this.x+this.width && y >= this.y && y+height <= this.y+this.height);\n\t}\n\n\t/**\n\t * Returns a new rectangle which contains this rectangle and the specified rectangle.\n\t * @param {easeljs.Rectangle} rect The rectangle to calculate a union with.\n\t * @return {easeljs.Rectangle} A new rectangle describing the union.\n\t*/\n\tunion (rect) {\n\t\treturn this.clone().extend(rect.x, rect.y, rect.width, rect.height);\n\t}\n\n\t/**\n\t * Returns a new rectangle which describes the intersection (overlap) of this rectangle and the specified rectangle,\n\t * or null if they do not intersect.\n\t * @param {easeljs.Rectangle} rect The rectangle to calculate an intersection with.\n\t * @return {easeljs.Rectangle} A new rectangle describing the intersection or null.\n\t*/\n\tintersection (rect) {\n\t\tlet x1 = rect.x, y1 = rect.y, x2 = x1+rect.width, y2 = y1+rect.height;\n\t\tif (this.x > x1) { x1 = this.x; }\n\t\tif (this.y > y1) { y1 = this.y; }\n\t\tif (this.x + this.width < x2) { x2 = this.x + this.width; }\n\t\tif (this.y + this.height < y2) { y2 = this.y + this.height; }\n\t\treturn (x2 <= x1 || y2 <= y1) ? null : new Rectangle(x1, y1, x2-x1, y2-y1);\n\t}\n\n\t/**\n\t * Returns true if the specified rectangle intersects (has any overlap) with this rectangle.\n\t * @param {easeljs.Rectangle} rect The rectangle to compare.\n\t * @return {Boolean} True if the rectangles intersect.\n\t*/\n\tintersects (rect) {\n\t\treturn (rect.x <= this.x+this.width && this.x <= rect.x+rect.width && rect.y <= this.y+this.height && this.y <= rect.y + rect.height);\n\t}\n\n\t/**\n\t * Returns true if the width or height are equal or less than 0.\n\t * @return {Boolean} True if the rectangle is empty.\n\t*/\n\tisEmpty () {\n\t\treturn this.width <= 0 || this.height <= 0;\n\t}\n\n\t/**\n\t * Returns a clone of the Rectangle instance.\n\t * @return {easeljs.Rectangle} a clone of the Rectangle instance.\n\t */\n\tclone () {\n\t\treturn new Rectangle(this.x, this.y, this.width, this.height);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (x=${this.x} y=${this.y} width=${this.width} height=${this.height})]`;\n\t}\n\n}\n","/**\n * @license Filter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using\n * the {@link easeljs.DisplayObject#cache} method. If an object changes, please cache it again, or use\n * {@link easeljs.DisplayObject#updateCache}. Note that the filters must be applied before caching.\n *\n * Note that each filter can implement a {@link easeljs.Filter#getBounds} method, which returns the\n * margins that need to be applied in order to fully display the filter. For example, the {@link easeljs.BlurFilter}\n * will cause an object to feather outwards, resulting in a margin around the shape.\n *\n * EaselJS Filters
\n * EaselJS comes with a number of pre-built filters:\n *
\n * - {@link easeljs.AlphaMapFilter}: Map a greyscale image to the alpha channel of a display object
\n * - {@link easeljs.AlphaMaskFilter}: Map an image's alpha channel to the alpha channel of a display object
\n * - {@link easeljs.BlurFilter}: Apply vertical and horizontal blur to a display object
\n * - {@link easeljs.ColorFilter}: Color transform a display object
\n * - {@link easeljs.ColorMatrixFilter}: Transform an image using a {{#crossLink \"ColorMatrix\"}}{{/crossLink}}
\n *
\n *\n * @memberof easeljs\n * @example\n * shape.filters = [\n * new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),\n * new createjs.BlurFilter(5, 5, 10)\n * ];\n * shape.cache(0, 0, 100, 100);\n */\nexport default class Filter {\n\n\tconstructor () {\n\t\t/**\n\t\t * A flag stating that this filter uses a context draw mode and cannot be batched into imageData processing.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.usesContext = false;\n\n\t\t/**\n\t\t * Another filter that is required to act as part of this filter and created and managed under the hood.\n\t\t * @private\n\t\t * @type {easeljs.Filter}\n\t\t * @default null\n\t\t */\n\t\tthis._multiPass = null;\n\n\t\t/**\n\t\t * Pre-processing shader code, will be parsed before being fed in.\n\t\t * This should be based upon StageGL.SHADER_VERTEX_BODY_REGULAR\n\t\t * @virtual\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.VTX_SHADER_BODY = null;\n\n\t\t/**\n\t\t * Pre-processing shader code, will be parsed before being fed in.\n\t\t * This should be based upon StageGL.SHADER_FRAGMENT_BODY_REGULAR\n\t\t * @virtual\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.FRAG_SHADER_BODY = null;\n\t}\n\n\t/**\n\t * Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.\n\t * @abstract\n\t * @param {easeljs.Rectangle} [rect] If specified, the provided Rectangle instance will be expanded by the padding amounts and returned.\n\t * @return {easeljs.Rectangle} If a `rect` param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.\n\t */\n\tgetBounds (rect) { }\n\n\t/**\n\t * @virtual\n\t * @abstract\n\t * @param {WebGLContext} gl The context associated with the stage performing the render.\n\t * @param {easeljs.StageGL} stage The stage instance that will be rendering.\n\t * @param {ShaderProgram} shaderProgram The compiled shader that is going to be sued to perform the render.\n\t */\n\tshaderParamSetup (gl, stage, shaderProgram) { }\n\n\t/**\n\t * Applies the filter to the specified context.\n\t * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.\n\t * @param {Number} x The x position to use for the source rect.\n\t * @param {Number} y The y position to use for the source rect.\n\t * @param {Number} width The width to use for the source rect.\n\t * @param {Number} height The height to use for the source rect.\n\t * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx.\n\t * @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x.\n\t * @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y.\n\t * @return {Boolean} If the filter was applied successfully.\n\t */\n\tapplyFilter (ctx, x, y, width, height, targetCtx, targetX, targetY) {\n\t\t// this is the default behaviour because most filters access pixel data. It is overridden when not needed.\n\t\ttargetCtx = targetCtx || ctx;\n\t\tif (targetX == null) { targetX = x; }\n\t\tif (targetY == null) { targetY = y; }\n\t\ttry {\n\t\t\tlet imageData = ctx.getImageData(x, y, width, height);\n\t\t\tif (this._applyFilter(imageData)) {\n\t\t\t\ttargetCtx.putImageData(imageData, targetX, targetY);\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} catch (e) {}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * Returns a clone of this Filter instance.\n\t * @return {easeljs.Filter} A clone of the current Filter instance.\n\t */\n\tclone () {\n\t\treturn new Filter();\n\t}\n\n\t/**\n\t * @abstract\n\t * @param {ImageData} imageData Target ImageData instance.\n\t * @return {Boolean}\n\t */\n\t_applyFilter (imageData) { }\n\n}\n","/**\n * @license BitmapCache\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\nimport Rectangle from \"../geom/Rectangle\";\nimport StageGL from \"../display/StageGL\";\n\n/**\n * The BitmapCache is an internal representation of all the cache properties and logic required in order to \"cache\"\n * an object. This information and functionality used to be located on a {@link easeljs.DisplayObject#cache}\n * method in {@link easeljs.DisplayObject}, but was moved to its own class.\n *\n * Caching in this context is purely visual, and will render the DisplayObject out into an image to be used instead\n * of the object. The actual cache itself is still stored on the target with the {@link easeljs.DisplayObject#cacheCanvas}.\n *\n * Working with a singular image like a {@link easeljs.Bitmap}, there is little benefit to performing\n * a cache operation, as it is already a single image. Caching is best done on containers that have multiple complex\n * parts that do not change often, so that rendering the image will improve overall rendering speed. A cached object\n * will not visually update until explicitly told to do so with a call to {@link easeljs.Stage#update},\n * much like a Stage. If a cache is being updated every frame, it is likely not improving rendering performance.\n * Caches are best used when updates will be sparse.\n *\n * Caching is also a co-requisite for applying filters to prevent expensive filters running constantly without need.\n * The BitmapCache is also responsible for applying filters to objects, and reads each {@link easeljs.Filter}.\n * Real-time Filters are not recommended when dealing with a Context2D canvas if performance is a concern. For best\n * performance and to still allow for some visual effects, use a {{#crossLink \"DisplayObject/compositeOperation:property\"}}{{/crossLink}}\n * when possible.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n */\nexport default class BitmapCache extends Filter {\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t/**\n\t\t * Width of the cache relative to the target object.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.width = undefined;\n\n\t\t/**\n\t\t * Height of the cache relative to the target object.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.height = undefined;\n\n\t\t/**\n\t\t * Horizontal position of the cache relative to the target's origin.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.x = undefined;\n\n\t\t/**\n\t\t * Vertical position of the cache relative to target's origin.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.y = undefined;\n\n\t\t/**\n\t\t * The internal scale of the cache image, does not affects display size. This is useful to both increase and\n\t\t * decrease render quality. Objects with increased scales are more likely to look good when scaled up. Objects\n\t\t * with decreased scales can save on rendering performance.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scale = 1;\n\n\t\t/**\n\t\t * The relative offset of the {@link easeljs.BitmapCache#x} position, used for drawing\n\t\t * into the cache with the correct offsets. Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offX = 0;\n\n\t\t/**\n\t\t * The relative offset of the {@link easeljs.BitmapCache#y} position, used for drawing\n\t\t * into the cache with the correct offsets. Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offY = 0;\n\n\t\t/**\n\t\t * Track how many times the cache has been updated, mostly used for preventing duplicate cacheURLs. This can be\n\t\t * useful to see if a cache has been updated.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.cacheID = 0;\n\n\t\t/**\n\t\t * Relative offset of the x position, used for drawing the cache into other scenes.\n\t\t * Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @todo Is this description right? Its the same as offX.\n\t\t */\n\t\tthis._filterOffX = 0;\n\n\t\t/**\n\t\t * Relative offset of the y position, used for drawing into the cache into other scenes.\n\t\t * Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @todo Is this description right? Its the same as offY.\n\t\t */\n\t\tthis._filterOffY = 0;\n\n\t\t/**\n\t\t * The cacheID when a DataURL was requested.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._cacheDataURLID = 0;\n\n\t\t/**\n\t\t * The cache's DataURL, generated on-demand using the getter.\n\t\t * @protected\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis._cacheDataURL = null;\n\n\t\t/**\n\t\t * Internal tracking of final bounding width, approximately `width*scale;` however, filters can complicate the actual value.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._drawWidth = 0;\n\n\t\t/**\n\t\t * Internal tracking of final bounding height, approximately `height*scale;` however, filters can complicate the actual value.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._drawHeight = 0;\n\n\t\t/**\n\t\t * Internal tracking of the last requested bounds, may happen repeadtedly so stored to avoid object creation.\n\t\t * @protected\n\t\t * @type {easeljs.Rectangle}\n\t\t * @default easeljs.Rectangle\n\t\t */\n\t\tthis._boundRect = new Rectangle();\n\n\t}\n\n\t/**\n\t * Returns the bounds that surround all applied filters. This relies on each filter to describe how it changes bounds.\n\t * @param {easeljs.DisplayObject} target The object to check the filter bounds for.\n\t * @param {easeljs.Rectangle} [output] Calculated bounds will be applied to this rect.\n\t * @return {easeljs.Rectangle}\n\t * @static\n\t */\n\tstatic getFilterBounds (target, output = new Rectangle()) {\n\t\tlet filters = target.filters;\n\t\tlet filterCount = filters && filters.length;\n\t\tif (!!filterCount <= 0) { return output; }\n\n\t\tfor (let i=0; i= 1 ? width : 1;\n\t\tthis.height = height >= 1 ? height : 1;\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.scale = scale;\n\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Directly called via {@link easeljs.DisplayObject#updateCache}, but also internally. This\n\t * has the dual responsibility of making sure the surface is ready to be drawn to, and performing the draw. For\n\t * full details of each behaviour, check the protected functions {@link easeljs.BitmapCache#_updateSurface}\n\t * and {@link easeljs.BitmapCache#_drawToCache} respectively.\n\t * @param {String} [compositeOperation] The DisplayObject this cache is linked to.\n\t */\n\tupdate (compositeOperation) {\n\t\tif (!this.target) { throw \"define() must be called before update()\"; }\n\n\t\tlet filterBounds = BitmapCache.getFilterBounds(this.target);\n\t\tlet surface = this.target.cacheCanvas;\n\n\t\tthis._drawWidth = Math.ceil(this.width*this.scale) + filterBounds.width;\n\t\tthis._drawHeight = Math.ceil(this.height*this.scale) + filterBounds.height;\n\n\t\tif (!surface || this._drawWidth != surface.width || this._drawHeight != surface.height) {\n\t\t\tthis._updateSurface();\n\t\t}\n\n\t\tthis._filterOffX = filterBounds.x;\n\t\tthis._filterOffY = filterBounds.y;\n\t\tthis.offX = this.x*this.scale + this._filterOffX;\n\t\tthis.offY = this.y*this.scale + this._filterOffY;\n\n\t\tthis._drawToCache(compositeOperation);\n\n\t\tthis.cacheID = this.cacheID?this.cacheID+1:1;\n\t}\n\n\t/**\n\t * Reset and release all the properties and memory associated with this cache.\n\t */\n\trelease () {\n\t\tlet stage = this.target.stage;\n\t\tif (this._useWebGL && this._webGLCache) {\n\t\t\t// if it isn't cache controlled clean up after yourself\n\t\t\tif (!this._webGLCache.isCacheControlled) {\n\t\t\t\tif (this.__lastRT) { this.__lastRT = undefined; }\n\t\t\t\tif (this.__rtA) { this._webGLCache._killTextureObject(this.__rtA); }\n\t\t\t\tif (this.__rtB) { this._webGLCache._killTextureObject(this.__rtB); }\n\t\t\t\tif (this.target && this.target.cacheCanvas) { this._webGLCache._killTextureObject(this.target.cacheCanvas); }\n\t\t\t}\n\t\t\t// set the context to none and let the garbage collector get the rest when the canvas itself gets removed\n\t\t\tthis._webGLCache = false;\n\t\t} else if (stage instanceof StageGL) {\n\t\t\tstage.releaseTexture(this.target.cacheCanvas);\n\t\t}\n\t\tthis.target = this.target.cacheCanvas = null;\n\t\tthis.cacheID = this._cacheDataURLID = this._cacheDataURL = undefined;\n\t\tthis.width = this.height = this.x = this.y = this.offX = this.offY = 0;\n\t\tthis.scale = 1;\n\t}\n\n\t/**\n\t * Returns a data URL for the cache, or `null` if this display object is not cached.\n\t * Uses {@link easeljs.BitmapCache#cacheID} to ensure a new data URL is not generated if the\n\t * cache has not changed.\n\t * @return {String} The image data url for the cache.\n\t */\n\tgetCacheDataURL () {\n\t\tlet cacheCanvas = this.target && this.target.cacheCanvas;\n\t\tif (!cacheCanvas) { return null; }\n\t\tif (this.cacheID != this._cacheDataURLID) {\n\t\t\tthis._cacheDataURLID = this.cacheID;\n\t\t\tthis._cacheDataURL = cacheCanvas.toDataURL?cacheCanvas.toDataURL():null;\t// incase function is\n\t\t}\n\t\treturn this._cacheDataURL;\n\t}\n\n\t/**\n\t * Use context2D drawing commands to display the cache canvas being used.\n\t * @param {CanvasRenderingContext2D} ctx The context to draw into.\n\t * @return {Boolean} Whether the draw was handled successfully.\n\t */\n\tdraw (ctx) {\n\t\tif (!this.target) { return false; }\n\t\tctx.drawImage(\n\t\t\tthis.target.cacheCanvas,\n\t\t\tthis.x + (this._filterOffX/this.scale),\n\t\t\tthis.y + (this._filterOffY/this.scale),\n\t\t\tthis._drawWidth/this.scale,\n\t\t\tthis._drawHeight/this.scale\n\t\t);\n\t\treturn true;\n\t}\n\n\t/**\n\t * Determine the bounds of the shape in local space.\n\t * @returns {easeljs.Rectangle}\n\t */\n\tgetBounds () {\n\t\tconst scale = this.scale;\n\t\treturn this._boundRect.setValue(\n\t\t\tthis._filterOffX/scale,\n\t\t\tthis._filterOffY/scale,\n\t\t\tthis.width/scale,\n\t\t\tthis.height/scale\n\t\t);\n\t}\n\n\t/**\n\t * Basic context2D caching works by creating a new canvas element and setting its physical size. This function will\n\t * create and or size the canvas as needed.\n\t * @protected\n\t */\n\t_updateSurface () {\n\t\tlet surface;\n\t\tif (!this._useWebGL) {\n\t\t\tsurface = this.target.cacheCanvas;\n\t\t\t// create it if it's missing\n\t\t\tif (!surface) {\n\t\t\t\tsurface = this.target.cacheCanvas = window.createjs&&createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\t}\n\t\t\t// now size it\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t\t// skip the webgl-only updates\n\t\t\treturn;\n\t\t}\n\n\t\t// create it if it's missing\n\t\tif (!this._webGLCache) {\n\t\t\tif (this._options.useGL === \"stage\") {\n\t\t\t\tif(!(this.target.stage != null && this.target.stage.isWebGL)) {\n\t\t\t\t\tthrow `Cannot use 'stage' for cache because the object's parent stage is ${this.target.stage != null ? \"non WebGL.\" : \"not set, please addChild to the correct stage.\"}`;\n\t\t\t\t}\n\t\t\t\tthis.target.cacheCanvas = true; // will be replaced with RenderTexture, temporary positive value for old \"isCached\" checks\n\t\t\t\tthis._webGLCache = this.target.stage;\n\t\t\t} else if (this._options.useGL === \"new\") {\n\t\t\t\tthis.target.cacheCanvas = document.createElement(\"canvas\"); // we can turn off autopurge because we wont be making textures here\n\t\t\t\tthis._webGLCache = new StageGL(this.target.cacheCanvas, {antialias: true, transparent: true, autoPurge: -1});\n\t\t\t\tthis._webGLCache.isCacheControlled = true; // use this flag to control stage sizing and final output\n\t\t\t} else {\n\t\t\t\tthrow \"Invalid option provided to useGL, expected ['stage', 'new', StageGL, undefined], got \"+ this._options.useGL;\n\t\t\t}\n\t\t}\n\n\t\t// now size render surfaces\n\t\tlet stageGL = this._webGLCache;\n\t\tsurface = this.target.cacheCanvas;\n\n\t\t// if we have a dedicated stage we've gotta size it\n\t\tif (stageGL.isCacheControlled) {\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t\tstageGL.updateViewport(this._drawWidth, this._drawHeight);\n\t\t}\n\t\tif (this.target.filters) {\n\t\t\t// with filters we can't tell how many we'll need but the most we'll ever need is two, so make them now\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t} else if (!stageGL.isCacheControlled) {\n\t\t\t// without filters then we only need one RenderTexture, and that's only if its not a dedicated stage\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t}\n\t}\n\n\t/**\n\t * Perform the cache draw out for context 2D now that the setup properties have been performed.\n\t * @protected\n\t */\n\t_drawToCache (compositeOperation) {\n\t\tlet target = this.target;\n\t\tlet surface = target.cacheCanvas;\n\t\tlet webGL = this._webGLCache;\n\n\t\tif (!this._useWebGL || !webGL) {\n\t\t\tlet ctx = surface.getContext(\"2d\");\n\n\t\t\tif (!compositeOperation) {\n\t\t\t\tctx.clearRect(0, 0, this._drawWidth+1, this._drawHeight+1);\n\t\t\t}\n\n\t\t\tctx.save();\n\t\t\tctx.globalCompositeOperation = compositeOperation;\n\t\t\tctx.setTransform(this.scale,0,0,this.scale, -this._filterOffX,-this._filterOffY);\n\t\t\tctx.translate(-this.x, -this.y);\n\t\t\ttarget.draw(ctx, true);\n\t\t\tctx.restore();\n\n\t\t\tif (target.filters && target.filters.length) {\n\t\t\t\tthis._applyFilters(target);\n\t\t\t}\n\t\t\tsurface._invalid = true;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._webGLCache.cacheDraw(target, target.filters, this);\n\t\t// NOTE: we may of swapped around which element the surface is, so we re-fetch it\n\t\tsurface = this.target.cacheCanvas;\n\t\tsurface.width = this._drawWidth;\n\t\tsurface.height = this._drawHeight;\n\t\tsurface._invalid = true;\n\t}\n\n\t/**\n\t * Work through every filter and apply its individual transformation to it.\n\t * @protected\n\t */\n\t_applyFilters () {\n\t\tlet surface = this.target.cacheCanvas;\n\t\tlet filters = this.target.filters;\n\n\t\tlet w = this._drawWidth;\n\t\tlet h = this._drawHeight;\n\n\t\t// setup\n\t\tlet data = surface.getContext(\"2d\").getImageData(0,0, w,h);\n\n\t\t// apply\n\t\tlet l = filters.length;\n\t\tfor (let i=0; iWebGL cache with 2d context\n * let stage = new Stage();\n * let bmp = new Bitmap(src);\n * bmp.cache(0, 0, bmp.width, bmp.height, 1, true); // no StageGL to use, so make one\n * let shape = new Shape();\n * shape.graphics.clear().fill(\"red\").drawRect(0,0,20,20);\n * shape.cache(0, 0, 20, 20, 1); // cannot use WebGL cache\n *\n * @example WebGL cache with WebGL context \n * let stageGL = new StageGL();\n * let bmp = new Bitmap(src);\n * bmp.cache(0, 0, bmp.width, bmp.height, 1, stageGL); // use our StageGL to cache\n * let shape = new Shape();\n * shape.graphics.clear().fill(\"red\").drawRect(0,0,20,20);\n * shape.cache(0, 0, 20, 20, 1); // cannot use WebGL cache\n *\n * @param {Number} x The x coordinate origin for the cache region.\n * @param {Number} y The y coordinate origin for the cache region.\n * @param {Number} width The width of the cache region.\n * @param {Number} height The height of the cache region.\n * @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape using\n * \tmyShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate\n * \tcached elements with greater fidelity.\n * @param {Boolean | easeljs.StageGL} [options] Select whether to use context 2D, or WebGL rendering, and whether to make a new stage instance or use an existing one.\n */\n","/**\n * @license DisplayObject\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport { EventDispatcher } from \"@createjs/core\";\nimport Shadow from \"./Shadow\";\nimport uid from \"../utils/uid\";\nimport DisplayProps from \"../geom/DisplayProps\";\nimport Rectangle from \"../geom/Rectangle\";\nimport Point from \"../geom/Point\";\nimport Matrix2D from \"../geom/Matrix2D\";\nimport BitmapCache from \"../filters/BitmapCache\";\n\n/**\n * DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such as\n * {@link easeljs.Container}, {@link easeljs.Bitmap}, and {@link easeljs.Shape}.\n * DisplayObject is the base class for all display classes in the EaselJS library. It defines the core properties and\n * methods that are shared between all display objects, such as transformation properties (x, y, scaleX, scaleY, etc),\n * caching, and mouse handlers.\n *\n * @memberof easeljs\n * @extends EventDispatcher\n */\nexport default class DisplayObject extends EventDispatcher {\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t/**\n\t\t * The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.alpha = 1;\n\n\t\t/**\n\t\t * If a cache is active, this returns the canvas that holds the image of this display object.\n\t\t * Use this to display the result of a cache. This will be a HTMLCanvasElement unless special cache rules have been deliberately enabled for this cache.\n\t\t * @see {@link easeljs.DisplayObject#cache}\n\t\t * @type {HTMLCanvasElement | Object}\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.cacheCanvas = null;\n\n\t\t/**\n\t\t * If a cache has been made, this returns the class that is managing the cacheCanvas and its properties.\n\t\t * @see {@link easeljs.BitmapCache}\n\t\t * @type {easeljs.BitmapCache}\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.bitmapCache = null;\n\n\t\t/**\n\t\t * Unique ID for this display object. Makes display objects easier for some uses.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.id = uid();\n\n\t\t/**\n\t\t * Indicates whether to include this object when running mouse interactions. Setting this to `false` for children\n\t\t * of a {@link easeljs.Container} will cause events on the Container to not fire when that child is\n\t\t * clicked. Setting this property to `false` does not prevent the {@link easeljs.Container#getObjectsUnderPoint}\n\t\t * method from returning the child.\n\t\t *\n\t\t * Note: In EaselJS 0.7.0, the `mouseEnabled` property will not work properly with nested Containers.\n\t\t *\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.mouseEnabled = true;\n\n\t\t/**\n\t\t * If false, the tick will not run on this display object (or its children). This can provide some performance benefits.\n\t\t * In addition to preventing the {@link core.Ticker#event:tick} event from being dispatched, it will also prevent tick related updates\n\t\t * on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).\n\t\t * @type Boolean\n\t\t * @default true\n\t\t */\n\t\tthis.tickEnabled = true;\n\n\t\t/**\n\t\t * An optional name for this display object. Included in {@link easeljs.DisplayObject#toString}. Useful for debugging.\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.name = null;\n\n\t\t/**\n\t\t * A reference to the {@link easeljs.Container} or {@link easeljs.Stage} object that\n\t\t * contains this display object, or null if it has not been added to one.\n\t\t * @type {easeljs.Container}\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.parent = null;\n\n\t\t/**\n\t\t * The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate\n\t\t * around its center, you would set regX and {@link easeljs.DisplayObject#regY} to 50.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.regX = 0;\n\n\t\t/**\n\t\t * The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around\n\t\t * its center, you would set {@link easeljs.DisplayObject#regX} and regY to 50.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.regY = 0;\n\n\t\t/**\n\t\t * The rotation in degrees for this display object.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.rotation = 0;\n\n\t\t/**\n\t\t * The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display\n\t\t * object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scaleX = 1;\n\n\t\t/**\n\t\t * The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display\n\t\t * object to half its nominal height. To vertically flip an object, set the scale to a negative number.\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scaleY = 1;\n\n\t\t/**\n\t\t * The factor to skew this display object horizontally.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.skewX = 0;\n\n\t\t/**\n\t\t * The factor to skew this display object vertically.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.skewY = 0;\n\n\t\t/**\n\t\t * A shadow object that defines the shadow to render on this display object. Set to `null` to remove a shadow. If\n\t\t * null, this property is inherited from the parent container.\n\t\t * @type {easeljs.Shadow}\n\t\t * @default null\n\t\t */\n\t\tthis.shadow = null;\n\n\t\t/**\n\t\t * Indicates whether this display object should be rendered to the canvas and included when running the Stage\n\t\t * {@link easeljs.Stage#getObjectsUnderPoint} method.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.visible = true;\n\n\t\t/**\n\t\t * The x (horizontal) position of the display object, relative to its parent.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.x = 0;\n\n\t\t/**\n\t\t * The y (vertical) position of the display object, relative to its parent.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.y = 0;\n\n\t\t/**\n\t\t * If set, defines the transformation for this display object, overriding all other transformation properties\n\t\t * (x, y, rotation, scale, skew).\n\t\t * @type {easeljs.Matrix2D}\n\t\t * @default null\n\t\t */\n\t\tthis.transformMatrix = null;\n\n\t\t/**\n\t\t * The composite operation indicates how the pixels of this display object will be composited with the elements\n\t\t * behind it. If `null`, this property is inherited from the parent container.\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing \"WHATWG spec on compositing\"}\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.compositeOperation = null;\n\n\t\t/**\n\t\t * Indicates whether the display object should be drawn to a whole pixel when {@link easeljs.Stage#snapToPixelEnabled} is true.\n\t\t * To enable/disable snapping on whole categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.snapToPixel = true;\n\n\t\t/**\n\t\t * An array of Filter objects to apply to this display object. Filters are only applied / updated when {@link easeljs.DisplayObject#cache}\n\t\t * or {@link easeljs.DisplayObject#updateCache} is called on the display object, and only apply to the area that is cached.\n\t\t * @type {Array}\n\t\t * @default null\n\t\t */\n\t\tthis.filters = null;\n\n\t\t/**\n\t\t * A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation\n\t\t * will be applied relative to the display object's parent coordinates (as if it were a child of the parent).\n\t\t * @type {easeljs.Shape}\n\t\t * @default null\n\t\t */\n\t\tthis.mask = null;\n\n\t\t/**\n\t\t * A display object that will be tested when checking mouse interactions or testing {@link easeljs.Container#getObjectsUnderPoint}.\n\t\t * The hit area will have its transformation applied relative to this display object's coordinate space (as though\n\t\t * the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested\n\t\t * using only its own `alpha` value regardless of the alpha value on the target display object, or the target's\n\t\t * ancestors (parents).\n\t\t *\n\t\t * If set on a {@link easeljs.Container}, children of the Container will not receive mouse events.\n\t\t * This is similar to setting {@link easeljs.DisplayObject#mouseChildren} to false.\n\t\t *\n\t\t * Note that hitArea is NOT currently used by the `hitTest()` method, nor is it supported for {@link easeljs.Stage}.\n\t\t *\n\t\t * @type {easeljs.DisplayObject}\n\t\t * @default null\n\t\t */\n\t\tthis.hitArea = null;\n\n\t\t/**\n\t\t * A CSS cursor (ex. \"pointer\", \"help\", \"text\", etc) that will be displayed when the user hovers over this display\n\t\t * object. You must enable mouseover events using the {@link easeljs.Stage#enableMouseOver} method to\n\t\t * use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.\n\t\t *\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.cursor = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.DisplayProps}\n\t\t */\n\t\tthis._props = new DisplayProps();\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Rectangle}\n\t\t */\n\t\tthis._rectangle = new Rectangle();\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Rectangle}\n\t\t * @default null\n\t\t */\n\t\tthis._bounds = null;\n\n\t\t/**\n\t\t * Where StageGL should look for required display properties, matters only for leaf display objects. Containers\n\t\t * or cached objects won't use this property, it's for native display of terminal elements.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_NONE;\n\t}\n\n\t/**\n\t * Returns the {@link easeljs.Stage} instance that this display object will be rendered on, or null if it has not been added to one.\n\t * @type {Stage}\n\t * @readonly\n\t */\n\tget stage () {\n\t\t// uses dynamic access to avoid circular dependencies;\n\t\tlet o = this;\n\t\twhile (o.parent) { o = o.parent; }\n\t\tif (/^\\[Stage(GL)?(\\s\\(name=\\w+\\))?\\]$/.test(o.toString())) { return o; }\n\t\treturn null;\n\t}\n\n\t/**\n\t * Set both the {@link easeljs.DisplayObject#scaleX} and the {@link easeljs.DisplayObject#scaleY} property to the same value.\n\t * Note that when you get the value, if the `scaleX` and `scaleY` are different values, it will return only the `scaleX`.\n\t * @type {Number}\n\t * @default 1\n\t */\n\tset scale (value) { this.scaleX = this.scaleY = value; }\n\tget scale () { return this.scaleX; }\n\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t */\n\tisVisible () {\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);\n\t}\n\n\t/**\n\t * Alias for drawCache(). Used by grandchildren (or deeper) in their draw method to directly\n\t * call {@link easeljs.DisplayObject#drawCache}, bypassing their parent(s).\n\t *\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,\n\t * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean}\n\t */\n\tdraw (ctx, ignoreCache = false) {\n\t\treturn this.drawCache(ctx, ignoreCache);\n\t}\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns `true` if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,\n\t * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean}\n\t */\n\tdrawCache (ctx, ignoreCache = false) {\n\t\tlet cache = this.bitmapCache;\n\t\tif (cache && !ignoreCache) {\n\t\t\treturn cache.draw(ctx);\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow\n\t * to the specified context. This is typically called prior to {@link easeljs.DisplayObject#draw}.\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D to update.\n\t */\n\tupdateContext (ctx) {\n\t\tlet o=this, mask=o.mask, mtx=o._props.matrix;\n\n\t\tif (mask && mask.graphics && !mask.graphics.isEmpty()) {\n\t\t\tmask.getMatrix(mtx);\n\t\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);\n\n\t\t\tmask.graphics.drawAsPath(ctx);\n\t\t\tctx.clip();\n\n\t\t\tmtx.invert();\n\t\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);\n\t\t}\n\n\t\tthis.getMatrix(mtx);\n\t\tlet tx = mtx.tx, ty = mtx.ty;\n\t\tif (DisplayObject._snapToPixelEnabled && o.snapToPixel) {\n\t\t\ttx = tx + (tx < 0 ? -0.5 : 0.5) | 0;\n\t\t\tty = ty + (ty < 0 ? -0.5 : 0.5) | 0;\n\t\t}\n\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, tx, ty);\n\t\tctx.globalAlpha *= o.alpha;\n\t\tif (o.compositeOperation) { ctx.globalCompositeOperation = o.compositeOperation; }\n\t\tif (o.shadow) { this._applyShadow(ctx, o.shadow); }\n\t}\n\n\t/**\n\t * Draws the display object into a new element, which is then used for subsequent draws. Intended for complex content\n\t * that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape),\n\t * this can provide for much faster rendering because the content does not need to be re-rendered each tick. The\n\t * cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually\n\t * update the cache by calling `updateCache()` again. You must specify the cached area via the x, y, w,\n\t * and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.\n\t *\n\t * Note that filters need to be defined before the cache is applied or you will have to call updateCache after\n\t * application. Check out the {@link easeljs.Filter} class for more information. Some filters\n\t * (ex. {@link easeljs.BlurFilter}) may not work as expected in conjunction with the scale param.\n\t *\n\t * Usually, the resulting cacheCanvas will have the dimensions width*scale by height*scale, however some filters (ex. BlurFilter)\n\t * will add padding to the canvas dimensions.\n\t *\n\t * Actual implementation of the caching mechanism can change with a {@link easeljs.StageGL} and so\n\t * all caching and filter behaviour has been moved to the {@link easeljs.BitmapCache}\n\t *\n\t * @example\n\t * // If you defined a Shape that drew a circle at 0, 0 with a radius of 25:\n\t * var shape = new createjs.Shape();\n\t * shape.graphics.beginFill(\"#ff0000\").drawCircle(0, 0, 25);\n\t * shape.cache(-25, -25, 50, 50);\n\t *\n\t * @param {Number} x The x coordinate origin for the cache region.\n\t * @param {Number} y The y coordinate origin for the cache region.\n\t * @param {Number} width The width of the cache region.\n\t * @param {Number} height The height of the cache region.\n\t * @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape using\n\t * \tmyShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate\n\t * \tcached elements with greater fidelity. Default is 1.\n\t * @param {Object} [options] When using alternate displays there may be extra caching opportunities or needs.\n\t */\n\tcache (x, y, width, height, scale = 1, options) {\n\t\tif (!this.bitmapCache) {\n\t\t\tthis.bitmapCache = new BitmapCache();\n\t\t}\n\t\tthis.bitmapCache.define(this, x, y, width, height, scale, options);\n\t}\n\n\t/**\n\t * Redraws the display object to its cache. Calling updateCache without an active cache will throw an error.\n\t * If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object\n\t * will be drawn over the existing cache using the specified compositeOperation.\n\t *\n\t * Actual implementation of the caching mechanism can change with a {@link easeljs.StageGL} and so\n\t * all caching and filter behaviour has been moved to the {@link easeljs.BitmapCache}\n\t *\n\t * @example\n\t * // clear current graphics\n\t * shapeInstance.clear();\n\t * // draw new instructions\n\t * shapeInstance.setStrokeStyle(3).beginStroke(\"#FF0000\").moveTo(100, 100).lineTo(200,200);\n\t * // update cache, drawing new line on top of old one\n\t * shapeInstance.updateCache();\n\t *\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing \"WHATWG spec on compositing\"}\n\t * @param {String} compositeOperation The compositeOperation to use, or null to clear the cache and redraw it.\n\t */\n\tupdateCache (compositeOperation) {\n\t\tif (!this.bitmapCache) {\n\t\t\tthrow \"No cache found. cache() must be called before updateCache()\";\n\t\t}\n\t\tthis.bitmapCache.update(compositeOperation);\n\t}\n\n\t/**\n\t * Clears the current cache.\n\t * @see {@link easeljs.DisplayObject.#cache}\n\t */\n\tuncache () {\n\t\tif (this.bitmapCache) {\n\t\t\tthis.bitmapCache.release();\n\t\t\tthis.bitmapCache = undefined;\n\t\t}\n\t}\n\n\t/**\n\t * Returns a data URL for the cache, or null if this display object is not cached.\n\t * Only generated if the cache has changed, otherwise returns last result.\n\t * @return {String} The image data url for the cache.\n\t */\n\tgetCacheDataURL () {\n\t\treturn this.bitmapCache ? this.bitmapCache.getDataURL() : null;\n\t}\n\n\t/**\n\t * Transforms the specified x and y position from the coordinate space of the display object\n\t * to the global (stage) coordinate space. For example, this could be used to position an HTML label\n\t * over a specific point on a nested display object. Returns a Point instance with x and y properties\n\t * correlating to the transformed coordinates on the stage.\n\t *\n\t * @example\n\t * displayObject.x = 300;\n\t * displayObject.y = 200;\n\t * stage.addChild(displayObject);\n\t * let point = displayObject.localToGlobal(100, 100);\n\t * // Results in x=400, y=300\n\t *\n\t * @param {Number} x The x position in the source display object to transform.\n\t * @param {Number} y The y position in the source display object to transform.\n\t * @param {easeljs.Point | Object} [pt=Point] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.\n\t * @return {easeljs.Point} A Point instance with x and y properties correlating to the transformed coordinates\n\t * on the stage.\n\t */\n\tlocalToGlobal (x, y, pt = new Point()) {\n\t\treturn this.getConcatenatedMatrix(this._props.matrix).transformPoint(x, y, pt);\n\t}\n\n\t/**\n\t * Transforms the specified x and y position from the global (stage) coordinate space to the\n\t * coordinate space of the display object. For example, this could be used to determine\n\t * the current mouse position within the display object. Returns a Point instance with x and y properties\n\t * correlating to the transformed position in the display object's coordinate space.\n\t *\n\t * @example\n\t * displayObject.x = 300;\n\t * displayObject.y = 200;\n\t * stage.addChild(displayObject);\n\t * let point = displayObject.globalToLocal(100, 100);\n\t * // Results in x=-200, y=-100\n\t *\n\t * @param {Number} x The x position on the stage to transform.\n\t * @param {Number} y The y position on the stage to transform.\n\t * @param {easeljs.Point | Object} [pt=Point] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.\n\t * @return {easeljs.Point} A Point instance with x and y properties correlating to the transformed position in the\n\t * display object's coordinate space.\n\t */\n\tglobalToLocal (x, y, pt = new Point()) {\n\t\treturn this.getConcatenatedMatrix(this._props.matrix).invert().transformPoint(x, y, pt);\n\t}\n\n\t/**\n\t * Transforms the specified x and y position from the coordinate space of this display object to the coordinate\n\t * space of the target display object. Returns a Point instance with x and y properties correlating to the\n\t * transformed position in the target's coordinate space. Effectively the same as using the following code with\n\t * {@link easeljs.DisplayObject#localToGlobal} and {@link easeljs.DisplayObject#globalToLocal}.\n\t *\n\t * @example\n\t * // long way\n\t * let pt = this.localToGlobal(x, y);\n\t * pt = target.globalToLocal(pt.x, pt.y);\n\t * // shorthand\n\t * let pt = this.localToLocal(x, y, target);\n\t *\n\t * @param {Number} x The x position in the source display object to transform.\n\t * @param {Number} y The y position on the source display object to transform.\n\t * @param {easeljs.DisplayObject} target The target display object to which the coordinates will be transformed.\n\t * @param {easeljs.Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.\n\t * @return {easeljs.Point} Returns a Point instance with x and y properties correlating to the transformed position\n\t * in the target's coordinate space.\n\t */\n\tlocalToLocal (x, y, target, pt) {\n\t\tpt = this.localToGlobal(x, y, pt);\n\t\treturn target.globalToLocal(pt.x, pt.y, pt);\n\t}\n\n\t/**\n\t * Shortcut method to quickly set the transform properties on the display object. All parameters are optional.\n\t * Omitted parameters will have the default value set.\n\t *\n\t * @example\n\t * displayObject.setTransform(100, 100, 2, 2);\n\t *\n\t * @param {Number} [x=0] The horizontal translation (x position) in pixels\n\t * @param {Number} [y=0] The vertical translation (y position) in pixels\n\t * @param {Number} [scaleX=1] The horizontal scale, as a percentage of 1\n\t * @param {Number} [scaleY=1] the vertical scale, as a percentage of 1\n\t * @param {Number} [rotation=0] The rotation, in degrees\n\t * @param {Number} [skewX=0] The horizontal skew factor\n\t * @param {Number} [skewY=0] The vertical skew factor\n\t * @param {Number} [regX=0] The horizontal registration point in pixels\n\t * @param {Number} [regY=0] The vertical registration point in pixels\n\t * @return {easeljs.DisplayObject} Returns this instance. Useful for chaining commands.\n\t*/\n\tsetTransform (x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, regX=0, regY=0) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.scaleX = scaleX;\n\t\tthis.scaleY = scaleY;\n\t\tthis.rotation = rotation;\n\t\tthis.skewX = skewX;\n\t\tthis.skewY = skewY;\n\t\tthis.regX = regX;\n\t\tthis.regY = regY;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a matrix based on this object's current transform.\n\t * @param {easeljs.Matrix2D} [matrix] A Matrix2D object to populate with the calculated values. If null, a new Matrix object is returned.\n\t * @return {easeljs.Matrix2D} A matrix representing this display object's transform.\n\t */\n\tgetMatrix (matrix) {\n\t\tlet o = this, mtx = matrix&&matrix.identity() || new Matrix2D();\n\t\treturn o.transformMatrix ? mtx.copy(o.transformMatrix) : mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);\n\t}\n\n\t/**\n\t * Generates a Matrix2D object representing the combined transform of the display object and all of its\n\t * parent Containers up to the highest level ancestor (usually the {@link easeljs.Stage}). This can\n\t * be used to transform positions between coordinate spaces, such as with {@link easeljs.DisplayObject#localToGlobal}\n\t * and {@link easeljs.DisplayObject#globalToLocal}.\n\t *\n\t * @param {easeljs.Matrix2D} [matrix] A Matrix2D object to populate with the calculated values. If null, a new Matrix2D object is returned.\n\t * @return {easeljs.Matrix2D} The combined matrix.\n\t */\n\tgetConcatenatedMatrix (matrix) {\n\t\tlet o = this, mtx = this.getMatrix(matrix);\n\t\twhile (o = o.parent) {\n\t\t\tmtx.prependMatrix(o.getMatrix(o._props.matrix));\n\t\t}\n\t\treturn mtx;\n\t}\n\n\t/**\n\t * Generates a DisplayProps object representing the combined display properties of the object and all of its\n\t * parent Containers up to the highest level ancestor (usually the {@link easeljs.Stage}).\n\t * @param {easeljs.DisplayProps} [props] A DisplayProps object to populate with the calculated values. If null, a new DisplayProps object is returned.\n\t * @return {easeljs.DisplayProps} The combined display properties.\n\t */\n\tgetConcatenatedDisplayProps (props) {\n\t\tprops = props ? props.identity() : new DisplayProps();\n\t\tlet o = this, mtx = o.getMatrix(props.matrix);\n\t\tdo {\n\t\t\tprops.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);\n\n\t\t\t// we do this to avoid problems with the matrix being used for both operations when o._props.matrix is passed in as the props param.\n\t\t\t// this could be simplified (ie. just done as part of the prepend above) if we switched to using a pool.\n\t\t\tif (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); }\n\t\t} while (o = o.parent);\n\t\treturn props;\n\t}\n\n\t/**\n\t * Tests whether the display object intersects the specified point in local coordinates (ie. draws a pixel with alpha > 0 at\n\t * the specified position). This ignores the alpha, shadow, hitArea, mask, and compositeOperation of the display object.\n\t *\n\t * Please note that shape-to-shape collision is not currently supported by EaselJS.\n\t *\n\t * @example\n\t * stage.addEventListener(\"stagemousedown\", event => {\n\t * let hit = shape.hitTest(event.stageX, event.stageY);\n\t * // hit == true when shape is clicked\n\t * });\n\t *\n\t * @param {Number} x The x position to check in the display object's local coordinates.\n\t * @param {Number} y The y position to check in the display object's local coordinates.\n\t * @return {Boolean} A Boolean indicating whether a visible portion of the DisplayObject intersect the specified\n\t * local Point.\n\t*/\n\thitTest (x, y) {\n\t\tlet ctx = DisplayObject._hitTestContext;\n\t\tctx.setTransform(1, 0, 0, 1, -x, -y);\n\t\tthis.draw(ctx);\n\n\t\tlet hit = this._testHit(ctx);\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, 2, 2);\n\t\treturn hit;\n\t}\n\n\t/**\n\t * Provides a chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t * @example\n\t * let graphics = new Graphics().beginFill(\"#ff0000\").drawCircle(0, 0, 25);\n\t * let shape = stage.addChild(new Shape()).set({ graphics, x: 100, y: 100, alpha: 0.5 });\n\t *\n\t * @param {Object} props A generic object containing properties to copy to the DisplayObject instance.\n\t * @return {easeljs.DisplayObject} Returns the instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t*/\n\tset (props) {\n\t\tfor (let n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation).\n\t * Objects that have been cached will return the bounds of the cache.\n\t *\n\t * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use\n\t * {@link easeljs.DisplayObject#setBounds} so that they are included when calculating Container bounds.\n\t *\n\t * \n\t * \tAll \n\t * \t\tAll display objects support setting bounds manually using setBounds(). Likewise, display objects that\n\t * \t\thave been cached using cache() will return the bounds of their cache. Manual and cache bounds will override\n\t * \t\tthe automatic calculations listed below.\n\t * \t Bitmap \n\t * \t\tReturns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).\n\t * \t Sprite \n\t * \t\tReturns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified\n\t * \t\tin the spritesheet data. See also {@link easeljs.SpriteSheet#getFrameBounds}\n\t * \t Container \n\t * \t\tReturns the aggregate (combined) bounds of all children that return a non-null value from getBounds().\n\t * \t Shape \n\t * \t\tDoes not currently support automatic bounds calculations. Use setBounds() to manually define bounds.\n\t * \t Text \n\t * \t\tReturns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are\n\t * \t\tnot, especially when using textBaseline values other than \"top\".\n\t * \t BitmapText \n\t * \t\tReturns approximate bounds. Values will be more accurate if spritesheet frame registration points are close\n\t * \t\tto (x=0,y=0).\n\t * \t
\n\t *\n\t * @example\n\t * /* Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and\n\t * are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the\n\t * bounds explicitly. *\\/\n\t * let bounds = obj.getBounds();\n\t * obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);\n\t * // getBounds will now use the set values, instead of recalculating\n\t *\n\t * @example\n\t * // To reduce memory impact, the returned Rectangle instance may be reused internally\n\t * let bounds = obj.getBounds().clone();\n\t * // OR:\n\t * rect.copy(obj.getBounds());\n\t *\n\t * @return {easeljs.Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.\n\t */\n\tgetBounds () {\n\t\tif (this._bounds) { return this._rectangle.copy(this._bounds); }\n\t\tlet cacheCanvas = this.cacheCanvas;\n\t\tif (cacheCanvas) {\n\t\t\tlet scale = this._cacheScale;\n\t\t\treturn this._rectangle.setValues(this._cacheOffsetX, this._cacheOffsetY, cacheCanvas.width/scale, cacheCanvas.height/scale);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied).\n\t * Objects that have been cached will return the transformed bounds of the cache.\n\t *\n\t * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use\n\t * {@link easeljs.DisplayObject#setBounds} so that they are included when calculating Container bounds.\n\t *\n\t * To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its\n\t * values if you need to retain it.\n\t *\n\t * Container instances calculate aggregate bounds for all children that return bounds via getBounds.\n\t * @return {easeljs.Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.\n\t */\n\tgetTransformedBounds () {\n\t\treturn this._getBounds();\n\t}\n\n\t/**\n\t * Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape &\n\t * Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always\n\t * override calculated bounds.\n\t *\n\t * The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance\n\t * with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).\n\t *\n\t * @param {Number} x The x origin of the bounds. Pass null to remove the manual bounds.\n\t * @param {Number} y The y origin of the bounds.\n\t * @param {Number} width The width of the bounds.\n\t * @param {Number} height The height of the bounds.\n\t */\n\tsetBounds (x, y, width, height) {\n\t\tif (x == null) { this._bounds = null; }\n\t\tthis._bounds = (this._bounds || new Rectangle()).setValues(x, y, width, height);\n\t}\n\n\t/**\n\t * Returns a clone of this DisplayObject. Some properties that are specific to this instance's current context are\n\t * reverted to their defaults (for example .parent). Caches are not maintained across clones, and some elements\n\t * are copied by reference (masks, individual filter instances, hit area)\n\t *\n\t * @return {easeljs.DisplayObject} A clone of the current DisplayObject instance.\n\t */\n\tclone () {\n\t\treturn this._cloneProps(new DisplayObject());\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}${this.name ? ` (name=${this.name})` : \"\"}]`;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.DisplayObject} o The DisplayObject instance which will have properties from the current DisplayObject\n\t * instance copied into.\n\t * @return {easeljs.DisplayObject} o\n\t */\n\t_cloneProps (o) {\n\t\to.alpha = this.alpha;\n\t\to.mouseEnabled = this.mouseEnabled;\n\t\to.tickEnabled = this.tickEnabled;\n\t\to.name = this.name;\n\t\to.regX = this.regX;\n\t\to.regY = this.regY;\n\t\to.rotation = this.rotation;\n\t\to.scaleX = this.scaleX;\n\t\to.scaleY = this.scaleY;\n\t\to.shadow = this.shadow;\n\t\to.skewX = this.skewX;\n\t\to.skewY = this.skewY;\n\t\to.visible = this.visible;\n\t\to.x = this.x;\n\t\to.y = this.y;\n\t\to.compositeOperation = this.compositeOperation;\n\t\to.snapToPixel = this.snapToPixel;\n\t\to.filters = this.filters==null?null:this.filters.slice(0);\n\t\to.mask = this.mask;\n\t\to.hitArea = this.hitArea;\n\t\to.cursor = this.cursor;\n\t\to._bounds = this._bounds;\n\t\treturn o;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {easeljs.Shadow} [shadow=Shadow]\n\t */\n\t_applyShadow (ctx, shadow = Shadow.identity) {\n\t\tshadow = shadow;\n\t\tctx.shadowColor = shadow.color;\n\t\tctx.shadowOffsetX = shadow.offsetX;\n\t\tctx.shadowOffsetY = shadow.offsetY;\n\t\tctx.shadowBlur = shadow.blur;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.\n\t */\n\t_tick (evtObj) {\n\t\t// because tick can be really performance sensitive, check for listeners before calling dispatchEvent.\n\t\tlet ls = this._listeners;\n\t\tif (ls && ls[\"tick\"]) {\n\t\t\t// reset & reuse the event object to avoid construction / GC costs:\n\t\t\tevtObj.target = null;\n\t\t\tevtObj.propagationStopped = evtObj.immediatePropagationStopped = false;\n\t\t\tthis.dispatchEvent(evtObj);\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @return {Boolean}\n\t */\n\t_testHit (ctx) {\n\t\ttry {\n\t\t\treturn ctx.getImageData(0, 0, 1, 1).data[3] > 1;\n\t\t} catch (e) {\n\t\t\tif (!DisplayObject.suppressCrossDomainErrors) {\n\t\t\t\tthrow \"An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.\";\n\t\t\t}\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform If true, does not apply this object's transform.\n\t * @return {easeljs.Rectangle}\n\t */\n\t_getBounds (matrix, ignoreTransform) {\n\t\treturn this._transformBounds(this.getBounds(), matrix, ignoreTransform);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.Rectangle} bounds\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform\n\t * @return {easeljs.Rectangle}\n\t */\n\t_transformBounds (bounds, matrix, ignoreTransform) {\n\t\tif (!bounds) { return bounds; }\n\t\tlet { x, y, width, height } = bounds;\n\t\tlet mtx = this._props.matrix;\n\t\tmtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);\n\n\t\tif (x || y) { mtx.appendTransform(0,0,1,1,0,0,0,-x,-y); } // TODO: simplify this.\n\t\tif (matrix) { mtx.prependMatrix(matrix); }\n\n\t\tlet x_a = width*mtx.a, x_b = width*mtx.b;\n\t\tlet y_c = height*mtx.c, y_d = height*mtx.d;\n\t\tlet tx = mtx.tx, ty = mtx.ty;\n\n\t\tlet minX = tx, maxX = tx, minY = ty, maxY = ty;\n\n\t\tif ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\t\tif ((x = x_a + y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\t\tif ((x = y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\n\t\tif ((y = x_b + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\t\tif ((y = x_b + y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\t\tif ((y = y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\n\t\treturn bounds.setValues(minX, minY, maxX-minX, maxY-minY);\n\t}\n\n\t/**\n\t * Indicates whether the display object has any mouse event listeners or a cursor.\n\t * @protected\n\t * @return {Boolean}\n\t */\n\t_hasMouseEventListener () {\n\t\tlet evts = DisplayObject._MOUSE_EVENTS;\n\t\tfor (let i=0, l=evts.length; i}\n * @readonly\n */\nDisplayObject._MOUSE_EVENTS = [\"click\",\"dblclick\",\"mousedown\",\"mouseout\",\"mouseover\",\"pressmove\",\"pressup\",\"rollout\",\"rollover\"];\n\n/**\n * Suppresses errors generated when using features like hitTest, mouse events, and {{#crossLink \"getObjectsUnderPoint\"}}{{/crossLink}}\n * with cross domain content.\n * @static\n * @type {Boolean}\n * @default false\n */\nDisplayObject.suppressCrossDomainErrors = false;\n\n/**\n * @static\n * @type {Boolean}\n * @default false\n */\nDisplayObject.snapToPixelEnabled = false;\n\n/**\n * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n * @static\n * @type {Number}\n */\nDisplayObject._StageGL_NONE = 0;\n\n/**\n * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n * @static\n * @type {Number}\n */\nDisplayObject._StageGL_SPRITE = 1;\n\n/**\n * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n * @static\n * @type {Number}\n */\nDisplayObject._StageGL_BITMAP = 2;\n\n/**\n * Dispatched when the user presses their left mouse button over the display object.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#mousedown\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user presses their left mouse button and then releases it while over the display object.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#click\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user double clicks their left mouse button over this display object.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#dblclick\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user's mouse enters this display object. This event must be enabled using\n * {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.DisplayObject#event:rollover}\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#mouseover\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user's mouse leaves this display object. This event must be enabled using\n * {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.DisplayObject#event:rollout}\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#mouseout\n * @since 0.6.0\n */\n\n/**\n * This event is similar to {@link easeljs.DisplayObject#event:mouseover}, with the following\n * differences: it does not bubble, and it considers {@link easeljs.Container} instances as an\n * aggregate of their content.\n *\n * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over\n * shapeA and then directly on to shapeB. With a listener for {@link easeljs.DisplayObject#event:mouseover} on\n * myContainer, two events would be received, each targeting a child element:\n * \n * - when the mouse enters shapeA (target=shapeA)
\n * - when the mouse enters shapeB (target=shapeB)
\n *
\n * However, with a listener for \"rollover\" instead, only a single event is received when the mouse first enters\n * the aggregate myContainer content (target=myContainer).\n *\n * This event must be enabled using {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#rollover\n * @since 0.7.0\n */\n\n/**\n * This event is similar to {@link easeljs.DisplayObject#event:mouseout}, with the following\n * differences: it does not bubble, and it considers {@link easeljs.Container} instances as an\n * aggregate of their content.\n *\n * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over\n * shapeA, then directly on to shapeB, then off both. With a listener for {@link easeljs.DisplayObject#event:mouseout}\n * on myContainer, two events would be received, each targeting a child element:\n * - when the mouse leaves shapeA (target=shapeA)
\n * - when the mouse leaves shapeB (target=shapeB)
\n *
\n * However, with a listener for \"rollout\" instead, only a single event is received when the mouse leaves\n * the aggregate myContainer content (target=myContainer).\n *\n * This event must be enabled using {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#rollout\n * @since 0.7.0\n */\n\n/**\n * After a {@link easeljs.DisplayObject#event:mousedown} occurs on a display object, a pressmove\n * event will be generated on that object whenever the mouse moves until the mouse press is released. This can be\n * useful for dragging and similar operations.\n * @event easeljs.DisplayObject#pressmove\n * @since 0.7.0\n */\n\n/**\n * After a {@link easeljs.DisplayObject#event:mousedown} occurs on a display object, a pressup event\n * will be generated on that object when that mouse press is released. This can be useful for dragging and similar\n * operations.\n * @event easeljs.DisplayObject#pressup\n * @since 0.7.0\n */\n\n/**\n * Dispatched when the display object is added to a parent container.\n * @event easeljs.DisplayObject#added\n */\n\n/**\n * Dispatched when the display object is removed from its parent container.\n * @event easeljs.DisplayObject#removed\n */\n\n/**\n * Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the\n * rendering (draw) pass. When {@link easeljs.Stage#update} is called, first all display objects on\n * the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their\n * tick event dispatched in order of their depth prior to the event being dispatched on their parent.\n * @event easeljs.DisplayObject#tick\n * @param {Object} target The object that dispatched the event.\n * @param {String} type The event type.\n * @param {Array} params An array containing any arguments that were passed to the Stage.update() method.\n * @since 0.6.0\n */\n","/**\n * @license Container\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\n\n/**\n * A Container is a nestable display list that allows you to work with compound display elements. For example you could\n * group arm, leg, torso and head {{#crossLink \"Bitmap\"}}{{/crossLink}} instances together into a Person Container, and\n * transform them as a group, while still being able to move the individual parts relative to each other. Children of\n * containers have their `transform` and `alpha` properties concatenated with their parent\n * Container.\n *\n * For example, a {{#crossLink \"Shape\"}}{{/crossLink}} with x=100 and alpha=0.5, placed in a Container with `x=50`\n * and `alpha=0.7` will be rendered to the canvas at `x=150` and `alpha=0.35`.\n * Containers have some overhead, so you generally shouldn't create a Container to hold a single child.\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * import { Container } from \"@createjs/easeljs\";\n * const container = new Container();\n * container.addChild(bitmapInstance, shapeInstance);\n * container.x = 100;\n */\nexport default class Container extends DisplayObject {\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t/**\n\t\t * The array of children in the display list. You should usually use the child management methods such as\n\t\t * {@link easeljs.Container#addChild}, {@link easeljs.Container#removeChild}, {@link easeljs.Container#swapChildren},\n\t\t * etc, rather than accessing this directly, but it is included for advanced uses.\n\t\t * @type {Array}\n\t\t * @default []\n\t\t */\n\t\tthis.children = [];\n\n\t\t/**\n\t\t * Indicates whether the children of this container are independently enabled for mouse/pointer interaction.\n\t\t * If false, the children will be aggregated under the container - for example, a click on a child shape would\n\t\t * trigger a click event on the container.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.mouseChildren = true;\n\n\t\t/**\n\t\t * If false, the tick will not be propagated to children of this Container. This can provide some performance benefits.\n\t\t * In addition to preventing the {@link core.Ticker#event:tick} event from being dispatched, it will also prevent tick related updates\n\t\t * on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.tickChildren = true;\n\t}\n\n\t/**\n\t * Returns the number of children in the container.\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget numChildren () {\n\t\treturn this.children.length;\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || this.children.length;\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache = false) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\n\t\t// this ensures we don't have issues with display list changes that occur during a draw:\n\t\tlet list = this.children.slice();\n\t\tfor (let i=0,l=list.length; i 1) {\n\t\t\tfor (let i = 0; i < l; i++) { child = this.addChild(children[i]); }\n\t\t\treturn child;\n\t\t}\n // Note: a lot of duplication with addChildAt, but push is WAY faster than splice.\n let parent = child.parent, silent = parent === this;\n parent && parent._removeChildAt(parent.children.indexOf(child), silent);\n\t\tchild.parent = this;\n\t\tthis.children.push(child);\n if (!silent) { child.dispatchEvent(\"added\"); }\n\t\treturn child;\n\t}\n\n\t/**\n\t * Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and\n\t * setting its parent to this container.\n\t *\n\t * @example\n\t * container.addChildAt(child1, index);\n\t * // You can also add multiple children, such as:\n\t * container.addChildAt(child1, child2, ..., index);\n\t * // The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list, you could use:\n\t * container.addChildAt(myShape, container.getChildIndex(otherShape));\n\t * // This would also bump otherShape's index up by one. Fails silently if the index is out of range.\n\t *\n\t * @param {...easeljs.DisplayObject} children The display object(s) to add.\n\t * @param {Number} index The index to add the child at.\n\t * @return {easeljs.DisplayObject} Returns the last child that was added, or the last child if multiple children were added.\n\t */\n\taddChildAt (...children) {\n\t\tconst l = children.length;\n if (l === 0) { return null; }\n let index = children.pop();\n\t\tif (index < 0 || index > this.children.length) { return children[l - 2]; }\n\t\tif (l > 2) {\n\t\t\tfor (let i = 0; i < l - 1; i++) { this.addChildAt(children[i], index++); }\n\t\t\treturn children[l - 2];\n\t\t}\n\t\tlet child = children[0];\n let parent = child.parent, silent = parent === this;\n parent && parent._removeChildAt(parent.children.indexOf(child), silent);\n\t\tchild.parent = this;\n\t\tthis.children.splice(index++, 0, child);\n if (!silent) { child.dispatchEvent(\"added\"); }\n\t\treturn child;\n\t}\n\n\t/**\n\t * Removes the specified child from the display list. Note that it is faster to use removeChildAt() if the index is\n\t * already known.\n\t *\n\t * @example\n\t * container.removeChild(child);\n\t * // You can also remove multiple children:\n\t * container.removeChild(child1, child2, ...);\n\t *\n\t * @param {...easeljs.DisplayObject} children The display object(s) to remove.\n\t * @return {Boolean} true if the child (or children) was removed, or false if it was not in the display list.\n\t */\n\tremoveChild (...children) {\n\t\tconst l = children.length;\n if (l === 0) { return true; }\n\t\tif (l > 1) {\n\t\t\tlet good = true;\n\t\t\tfor (let i = 0; i < l; i++) { good = good && this.removeChild(children[i]); }\n\t\t\treturn good;\n\t\t}\n\t\treturn this._removeChildAt(this.children.indexOf(children[0]));\n\t}\n\n\t/**\n\t * Removes the child at the specified index from the display list, and sets its parent to null.\n\t *\n\t * @example\n\t * container.removeChildAt(2);\n\t * // You can also remove multiple children:\n\t * container.removeChildAt(2, 7, ...)\n\t *\n\t * @param {...Number} indexes The indexes of children to remove.\n\t * @return {Boolean} true if the child (or children) was removed, or false if any index was out of range.\n\t */\n\tremoveChildAt (...indexes) {\n\t\tconst l = indexes.length;\n if (l === 0) { return true; }\n\t\tif (l > 1) {\n\t\t\tindexes.sort((a, b) => b - a);\n\t\t\tlet good = true;\n\t\t\tfor (let i = 0; i < l; i++) { good = good && this._removeChildAt(indexes[i]); }\n\t\t\treturn good;\n\t\t}\n\t\treturn this._removeChildAt(indexes[0]);\n\t}\n\n\t/**\n\t * Removes all children from the display list.\n\t */\n\tremoveAllChildren () {\n\t\tlet kids = this.children;\n\t\twhile (kids.length) { this._removeChildAt(0); }\n\t}\n\n\t/**\n\t * Returns the child at the specified index.\n\t * @param {Number} index The index of the child to return.\n\t * @return {easeljs.DisplayObject} The child at the specified index. Returns null if there is no child at the index.\n\t */\n\tgetChildAt (index) {\n\t\treturn this.children[index];\n\t}\n\n\t/**\n\t * Returns the child with the specified name.\n\t * @param {String} name The name of the child to return.\n\t * @return {easeljs.DisplayObject} The child with the specified name.\n\t */\n\tgetChildByName (name) {\n\t\tlet kids = this.children;\n\t\tconst l = kids.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tif (kids[i].name === name) { return kids[i]; }\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * Performs an array sort operation on the child list.\n\t *\n\t * @example\n\t * // Display children with a higher y in front.\n\t * container.sortChildren((obj1, obj2, options) => {\n\t * \t if (obj1.y > obj2.y) { return 1; }\n\t * if (obj1.y < obj2.y) { return -1; }\n\t * return 0;\n\t * });\n\t *\n\t * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort}\n\t * @param {Function} sortFunction the function to use to sort the child list.\n\t */\n\tsortChildren (sortFunction) {\n\t\tthis.children.sort(sortFunction);\n\t}\n\n\t/**\n\t * Returns the index of the specified child in the display list, or -1 if it is not in the display list.\n\t * @param {easeljs.DisplayObject} child The child to return the index of.\n\t * @return {Number} The index of the specified child. -1 if the child is not found.\n\t */\n\tgetChildIndex (child) {\n\t\treturn this.children.indexOf(child);\n\t}\n\n\t/**\n\t * Swaps the children at the specified indexes. Fails silently if either index is out of range.\n\t * @param {Number} index1\n\t * @param {Number} index2\n\t */\n\tswapChildrenAt (index1, index2) {\n\t\tlet kids = this.children;\n\t\tlet o1 = kids[index1];\n\t\tlet o2 = kids[index2];\n\t\tif (!o1 || !o2) { return; }\n\t\tkids[index1] = o2;\n\t\tkids[index2] = o1;\n\t};\n\n\t/**\n\t * Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this\n\t * Container.\n\t * @param {easeljs.DisplayObject} child1\n\t * @param {easeljs.DisplayObject} child2\n\t */\n\tswapChildren (child1, child2) {\n\t\tlet kids = this.children;\n\t\tconst l = kids.length;\n\t\tlet index1,index2;\n\t\tfor (var i = 0; i < l; i++) {\n\t\t\tif (kids[i] === child1) { index1 = i; }\n\t\t\tif (kids[i] === child2) { index2 = i; }\n\t\t\tif (index1 != null && index2 != null) { break; }\n\t\t}\n\t\tif (i === l) { return; } // TODO: throw error?\n\t\tkids[index1] = child2;\n\t\tkids[index2] = child1;\n\t}\n\n\t/**\n\t * Changes the depth of the specified child. Fails silently if the child is not a child of this container, or the index is out of range.\n\t * @param {easeljs.DisplayObject} child\n\t * @param {Number} index\n\t */\n\tsetChildIndex (child, index) {\n\t\tlet kids = this.children;\n\t\tconst l = kids.length;\n\t\tif (child.parent != this || index < 0 || index >= l) { return; }\n\t\tfor (var i = 0; i < l; i++) {\n\t\t\tif (kids[i] === child) { break; }\n\t\t}\n\t\tif (i === l || i === index) { return; }\n\t\tkids.splice(i, 1);\n\t\tkids.splice(index, 0, child);\n\t}\n\n\t/**\n\t * Returns true if the specified display object either is this container or is a descendent (child, grandchild, etc)\n\t * of this container.\n\t * @param {easeljs.DisplayObject} child The DisplayObject to be checked.\n\t * @return {Boolean} true if the specified display object either is this container or is a descendent.\n\t */\n\tcontains (child) {\n\t\twhile (child) {\n\t\t\tif (child === this) { return true; }\n\t\t\tchild = child.parent;\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the\n\t * specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all\n\t * transform properties including regX/Y.\n\t * @param {Number} x The x position to check in the display object's local coordinates.\n\t * @param {Number} y The y position to check in the display object's local coordinates.\n\t * @return {Boolean} A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified\n\t * coordinates.\n\t */\n\thitTest (x, y) {\n\t\t// TODO: optimize to use the fast cache check where possible.\n\t\treturn this.getObjectUnderPoint(x, y) != null;\n\t}\n\n\t/**\n\t * Returns an array of all display objects under the specified coordinates that are in this container's display\n\t * list. This routine ignores any display objects with {@link easeljs.DisplayObject#mouseEnabled} set to `false`.\n\t * The array will be sorted in order of visual depth, with the top-most display object at index 0.\n\t * This uses shape based hit detection, and can be an expensive operation to run, so it is best to use it carefully.\n\t * For example, if testing for objects under the mouse, test on tick (instead of on {@link easeljs.DisplayObject#event:mousemove}),\n\t * and only if the mouse's position has changed.\n\t *\n\t * \n\t * - By default (mode=0) this method evaluates all display objects.
\n\t * - By setting the `mode` parameter to `1`, the {@link easeljs.DisplayObject#mouseEnabled}\n\t * and {@link easeljs.DisplayObject#mouseChildren} properties will be respected.
\n\t * - Setting the `mode` to `2` additionally excludes display objects that do not have active mouse event\n\t * listeners or a {@link easeljs.DisplayObject#cursor} property. That is, only objects\n\t * that would normally intercept mouse interaction will be included. This can significantly improve performance\n\t * in some cases by reducing the number of display objects that need to be tested.
\n\t *
\n\t *\n\t * This method accounts for both {@link easeljs.DisplayObject#hitArea} and {@link easeljs.DisplayObject#mask}.\n\t *\n\t * @param {Number} x The x position in the container to test.\n\t * @param {Number} y The y position in the container to test.\n\t * @param {Number} [mode=0] The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.\n\t * @return {Array} An array of DisplayObjects under the specified coordinates.\n\t */\n\tgetObjectsUnderPoint (x, y, mode = 0) {\n\t\tlet arr = [];\n\t\tlet pt = this.localToGlobal(x, y);\n\t\tthis._getObjectsUnderPoint(pt.x, pt.y, arr, mode > 0, mode === 1);\n\t\treturn arr;\n\t}\n\n\t/**\n\t * Similar to {@link easeljs.Container#getObjectsUnderPoint}, but returns only the top-most display\n\t * object. This runs significantly faster than `getObjectsUnderPoint()`, but is still potentially an expensive\n\t * operation.\n\t *\n\t * @param {Number} x The x position in the container to test.\n\t * @param {Number} y The y position in the container to test.\n\t * @param {Number} [mode=0] The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.\n\t * @return {easeljs.DisplayObject} The top-most display object under the specified coordinates.\n\t */\n\tgetObjectUnderPoint (x, y, mode = 0) {\n\t\tlet pt = this.localToGlobal(x, y);\n\t\treturn this._getObjectsUnderPoint(pt.x, pt.y, null, mode > 0, mode === 1);\n\t}\n\n\tgetBounds () {\n\t\treturn this._getBounds(null, true);\n\t}\n\n\tgetTransformedBounds () {\n\t\treturn this._getBounds();\n\t}\n\n\t/**\n\t * Returns a clone of this Container. Some properties that are specific to this instance's current context are\n\t * reverted to their defaults (for example `.parent`).\n\t * @param {Boolean} [recursive=false] If true, all of the descendants of this container will be cloned recursively. If false, the\n\t * properties of the container will be cloned, but the new instance will not have any children.\n\t * @return {easeljs.Container} A clone of the current Container instance.\n\t */\n\tclone (recursive = false) {\n\t\tlet o = this._cloneProps(new Container());\n\t\tif (recursive) { this._cloneChildren(o); }\n\t\treturn o;\n\t}\n\n\t_tick (evtObj) {\n\t\tif (this.tickChildren) {\n\t\t\tfor (let i = this.children.length - 1; i >= 0; i--) {\n\t\t\t\tlet child = this.children[i];\n\t\t\t\tif (child.tickEnabled && child._tick) { child._tick(evtObj); }\n\t\t\t}\n\t\t}\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * Recursively clones all children of this container, and adds them to the target container.\n\t * @protected\n\t * @param {easeljs.Container} o The target container.\n\t */\n\t_cloneChildren (o) {\n\t\tif (o.children.length) { o.removeAllChildren(); }\n\t\tlet arr = o.children;\n\t\tconst l = this.children.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tlet clone = this.children[i].clone(true);\n\t\t\tclone.parent = o;\n\t\t\tarr.push(clone);\n\t\t}\n\t}\n\n /**\n * Removes the child at the specified index from the display list, and sets its parent to null.\n * Used by `removeChildAt`, `addChild`, and `addChildAt`.\n *\n * @protected\n * @param {Number} index The index of the child to remove.\n * @param {Boolean} [silent=false] Prevents dispatch of `removed` event if true.\n * @return {Boolean} true if the child (or children) was removed, or false if any index was out of range.\n */\n _removeChildAt (index, silent = false) {\n\t\tif (index < 0 || index > this.children.length - 1) { return false; }\n\t\tlet child = this.children[index];\n\t\tif (child) { child.parent = null; }\n\t\tthis.children.splice(index, 1);\n\t\tif (!silent) { child.dispatchEvent(\"removed\"); }\n\t\treturn true;\n }\n\n\t/**\n\t * @protected\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Array} arr\n\t * @param {Boolean} mouse If true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and active listeners.\n\t * @param {Boolean} activeListener If true, there is an active mouse event listener on a parent object.\n\t * @param {Number} [currentDepth=0] Indicates the current depth of the search.\n\t * @return {easeljs.DisplayObject}\n\t */\n\t_getObjectsUnderPoint (x, y, arr, mouse, activeListener, currentDepth = 0) {\n\t\tif (!currentDepth && !this._testMask(this, x, y)) { return null; }\n\t\tlet mtx, ctx = DisplayObject._hitTestContext;\n\t\tactiveListener = activeListener || (mouse && this._hasMouseEventListener());\n\n\t\t// draw children one at a time, and check if we get a hit:\n\t\tlet children = this.children;\n\t\tconst l = children.length;\n\t\tfor (let i = l - 1; i >= 0; i--) {\n\t\t\tlet child = children[i];\n\t\t\tlet hitArea = child.hitArea;\n\t\t\tif (!child.visible || (!hitArea && !child.isVisible()) || (mouse && !child.mouseEnabled)) { continue; }\n\t\t\tif (!hitArea && !this._testMask(child, x, y)) { continue; }\n\n\t\t\t// if a child container has a hitArea then we only need to check its hitArea, so we can treat it as a normal DO:\n\t\t\tif (!hitArea && child instanceof Container) {\n\t\t\t\tlet result = child._getObjectsUnderPoint(x, y, arr, mouse, activeListener, currentDepth + 1);\n\t\t\t\tif (!arr && result) { return (mouse && !this.mouseChildren) ? this : result; }\n\t\t\t} else {\n\t\t\t\tif (mouse && !activeListener && !child._hasMouseEventListener()) { continue; }\n\n\t\t\t\t// TODO: can we pass displayProps forward, to avoid having to calculate this backwards every time? It's kind of a mixed bag. When we're only hunting for DOs with event listeners, it may not make sense.\n\t\t\t\tlet props = child.getConcatenatedDisplayProps(child._props);\n\t\t\t\tmtx = props.matrix;\n\n\t\t\t\tif (hitArea) {\n\t\t\t\t\tmtx.appendMatrix(hitArea.getMatrix(hitArea._props.matrix));\n\t\t\t\t\tprops.alpha = hitArea.alpha;\n\t\t\t\t}\n\n\t\t\t\tctx.globalAlpha = props.alpha;\n\t\t\t\tctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);\n\t\t\t\t(hitArea || child).draw(ctx);\n\t\t\t\tif (!this._testHit(ctx)) { continue; }\n\t\t\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\t\t\tctx.clearRect(0, 0, 2, 2);\n\t\t\t\tif (arr) { arr.push(child); }\n\t\t\t\telse { return (mouse && !this.mouseChildren) ? this : child; }\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.DisplayObject} target\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Boolean} Indicates whether the x/y is within the masked region.\n\t */\n\t_testMask (target, x, y) {\n\t\tlet mask = target.mask;\n\t\tif (!mask || !mask.graphics || mask.graphics.isEmpty()) { return true; }\n\n\t\tlet mtx = this._props.matrix, parent = target.parent;\n\t\tmtx = parent ? parent.getConcatenatedMatrix(mtx) : mtx.identity();\n\t\tmtx = mask.getMatrix(mask._props.matrix).prependMatrix(mtx);\n\n\t\tlet ctx = DisplayObject._hitTestContext;\n\t\tctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);\n\n\t\t// draw the mask as a solid fill:\n\t\tmask.graphics.drawAsPath(ctx);\n\t\tctx.fillStyle = \"#000\";\n\t\tctx.fill();\n\n\t\tif (!this._testHit(ctx)) { return false; }\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, 2, 2);\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform If true, does not apply this object's transform.\n\t * @return {easeljs.Rectangle}\n\t */\n\t_getBounds (matrix, ignoreTransform) {\n\t\tlet bounds = super.getBounds();\n\t\tif (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }\n\n\t\tlet mtx = this._props.matrix;\n\t\tmtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);\n\t\tif (matrix) { mtx.prependMatrix(matrix); }\n\n\t\tconst l = this.children.length;\n\t\tlet rect = null;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tlet child = this.children[i];\n\t\t\tif (!child.visible || !(bounds = child._getBounds(mtx))) { continue; }\n\t\t\tif (rect) { rect.extend(bounds.x, bounds.y, bounds.width, bounds.height); }\n\t\t\telse { rect = bounds.clone(); }\n\t\t}\n\t\treturn rect;\n\t}\n\n}\n","/**\n * @license MouseEvent\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport { Event } from \"@createjs/core\";\n\n/**\n * Passed as the parameter to all mouse/pointer/touch related events. For a listing of mouse events and their properties,\n * see the {@link easeljs.DisplayObject} and {@link easeljs.Stage} event listings.\n * @memberof easeljs\n * @extends core.Event\n * @param {String} type The event type.\n * @param {Boolean} bubbles Indicates whether the event will bubble through the display list.\n * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled.\n * @param {Number} stageX The normalized x position relative to the stage.\n * @param {Number} stageY The normalized y position relative to the stage.\n * @param {easeljs.MouseEvent} nativeEvent The native DOM event related to this mouse event.\n * @param {Number} pointerID The unique id for the pointer.\n * @param {Boolean} primary Indicates whether this is the primary pointer in a multitouch environment.\n * @param {Number} rawX The raw x position relative to the stage.\n * @param {Number} rawY The raw y position relative to the stage.\n * @param {easeljs.DisplayObject} relatedTarget The secondary target for the event.\n */\nexport default class MouseEvent extends Event {\n\n\tconstructor (type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY, relatedTarget) {\n\t\tsuper(type, bubbles, cancelable);\n\n// public properties:\n\t\t/**\n\t\t * The normalized x position on the stage. This will always be within the range 0 to stage width.\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.stageX = stageX;\n\n\t\t/**\n\t\t * The normalized y position on the stage. This will always be within the range 0 to stage height.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.stageY = stageY;\n\n\t\t/**\n\t\t * The raw x position relative to the stage. Normally this will be the same as the stageX value, unless\n\t\t * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.rawX = (rawX==null)?stageX:rawX;\n\n\t\t/**\n\t\t * The raw y position relative to the stage. Normally this will be the same as the stageY value, unless\n\t\t * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.rawY = (rawY==null)?stageY:rawY;\n\n\t\t/**\n\t\t * The native MouseEvent generated by the browser. The properties and API for this\n\t\t * event may differ between browsers. This property will be null if the\n\t\t * EaselJS property was not directly generated from a native MouseEvent.\n\t\t * @type {HTMLMouseEvent}\n\t\t */\n\t\tthis.nativeEvent = nativeEvent;\n\n\t\t/**\n\t\t * The unique id for the pointer (touch point or cursor). This will be either -1 for the mouse, or the system\n\t\t * supplied id value.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.pointerID = pointerID;\n\n\t\t/**\n\t\t * Indicates whether this is the primary pointer in a multitouch environment. This will always be true for the mouse.\n\t\t * For touch pointers, the first pointer in the current stack will be considered the primary pointer.\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.primary = !!primary;\n\n\t\t/**\n\t\t * The secondary target for the event, if applicable. This is used for mouseout/rollout\n\t\t * events to indicate the object that the mouse entered from, mouseover/rollover for the object the mouse exited,\n\t\t * and stagemousedown/stagemouseup events for the object that was the under the cursor, if any.\n\t\t *\n\t\t * Only valid interaction targets will be returned (ie. objects with mouse listeners or a cursor set).\n\t\t * @type {easeljs.DisplayObject}\n\t\t */\n\t\tthis.relatedTarget = relatedTarget;\n\t}\n\n\t/**\n\t * Returns the x position of the mouse in the local coordinate system of the current target (ie. the dispatcher).\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget localX () {\n\t\treturn this.currentTarget.globalToLocal(this.rawX, this.rawY).x;\n\t}\n\n\t/**\n\t * Returns the y position of the mouse in the local coordinate system of the current target (ie. the dispatcher).\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget localY () {\n\t\treturn this.currentTarget.globalToLocal(this.rawX, this.rawY).y;\n\t}\n\n\t/**\n\t * Indicates whether the event was generated by a touch input (versus a mouse input).\n\t * @type {Boolean}\n\t * @readonly\n\t */\n\tget isTouch () {\n\t\treturn this.pointerID !== -1;\n\t}\n\n\t/**\n\t * Returns a clone of the MouseEvent instance.\n\t * @return {easeljs.MouseEvent} a clone of the MouseEvent instance.\n\t */\n\tclone () {\n\t\treturn new MouseEvent(this.type, this.bubbles, this.cancelable, this.stageX, this.stageY, this.nativeEvent, this.pointerID, this.primary, this.rawX, this.rawY);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (type=${this.type} stageX=${this.stageX} stageY=${this.stageY})]`;\n\t}\n\n}\n","/**\n * @license Stage\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Container from \"./Container\";\nimport DisplayObject from \"./DisplayObject\";\nimport { Event } from \"@createjs/core\";\nimport MouseEvent from \"../events/MouseEvent\";\n\n/**\n * A stage is the root level {@link easeljs.Container} for a display list. Each time its {@link easeljs.Stage#tick}\n * method is called, it will render its display list to its target canvas.\n *\n * @memberof easeljs\n * @extends easeljs.Container\n * @example\n * let stage = new Stage(\"canvasElementId\");\n * let image = new Bitmap(\"imagePath.png\");\n * stage.addChild(image);\n * Ticker.addEventListener(\"tick\", event => {\n * image.x += 10;\n * \t stage.update();\n * });\n *\n * @param {HTMLCanvasElement | String | Object} canvas A canvas object that the Stage will render to, or the string id\n * of a canvas object in the current document.\n */\nexport default class Stage extends Container {\n\n\tconstructor (canvas) {\n\t\tsuper();\n\n\t\t/**\n\t\t * Indicates whether the stage should automatically clear the canvas before each render. You can set this to `false`\n\t\t * to manually control clearing (for generative art, or when pointing multiple stages at the same canvas for\n\t\t * example).\n\t\t *\n\t\t * @example\n\t\t * let stage = new Stage(\"canvasId\");\n\t\t * stage.autoClear = false;\n\t\t *\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.autoClear = true;\n\n\t\t/**\n\t\t * The canvas the stage will render to. Multiple stages can share a single canvas, but you must disable autoClear for all but the\n\t\t * first stage that will be ticked (or they will clear each other's render).\n\t\t *\n\t\t * When changing the canvas property you must disable the events on the old canvas, and enable events on the\n\t\t * new canvas or mouse events will not work as expected.\n\t\t *\n\t\t * @example\n\t\t * stage.enableDOMEvents(false);\n\t\t * stage.canvas = anotherCanvas;\n\t\t * stage.enableDOMEvents(true);\n\t\t *\n\t\t * @type {HTMLCanvasElement | Object}\n\t\t */\n\t\tthis.canvas = (typeof canvas === \"string\") ? document.getElementById(canvas) : canvas;\n\n\t\t/**\n\t\t * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent\n\t\t * position over the canvas, and mouseInBounds will be set to false.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.mouseX = 0;\n\n\t\t/**\n\t\t * The current mouse Y position on the canvas. If the mouse leaves the canvas, this will indicate the most recent\n\t\t * position over the canvas, and mouseInBounds will be set to false.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.mouseY = 0;\n\n\t\t/**\n\t\t * Specifies the area of the stage to affect when calling update. This can be use to selectively\n\t\t * re-draw specific regions of the canvas. If null, the whole canvas area is drawn.\n\t\t * @type {easeljs.Rectangle}\n\t\t */\n\t\tthis.drawRect = null;\n\n\t\t/**\n\t\t * Indicates whether display objects should be rendered on whole pixels. You can set the {@link easeljs.DisplayObject.snapToPixelEnabled}\n\t\t * property of display objects to false to enable/disable this behaviour on a per instance basis.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.snapToPixelEnabled = false;\n\n\t\t/**\n\t\t * Indicates whether the mouse is currently within the bounds of the canvas.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.mouseInBounds = false;\n\n\t\t/**\n\t\t * If true, tick callbacks will be called on all display objects on the stage prior to rendering to the canvas.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.tickOnUpdate = true;\n\n\t\t/**\n\t\t * If true, mouse move events will continue to be called when the mouse leaves the target canvas.\n\t\t * See {@link easeljs.Stage#mouseInBounds}, and {@link easeljs.MouseEvent} x/y/rawX/rawY.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.mouseMoveOutside = false;\n\n\n\t\t/**\n\t\t * Prevents selection of other elements in the html page if the user clicks and drags, or double clicks on the canvas.\n\t\t * This works by calling `preventDefault()` on any mousedown events (or touch equivalent) originating on the canvas.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.preventSelection = true;\n\n\t\t/**\n\t\t * The hitArea property is not supported for Stage.\n\t\t * @property hitArea\n\t\t * @override\n\t\t * @default null\n\t\t * @private\n\t\t */\n\n\t\t/**\n\t\t * Holds objects with data for each active pointer id. Each object has the following properties:\n\t\t * x, y, event, target, overTarget, overX, overY, inBounds, posEvtObj (native event that last updated position)\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._pointerData = {};\n\n\t\t/**\n\t\t * Number of active pointers.\n\t\t * @type {Number}\n\t\t * @private\n\t\t */\n\t\tthis._pointerCount = 0;\n\n\t\t/**\n\t\t * The ID of the primary pointer.\n\t\t * @type {String}\n\t\t * @private\n\t\t */\n\t\tthis._primaryPointerID = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._mouseOverIntervalID = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Stage}\n\t\t */\n\t\tthis._nextStage = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Stage}\n\t\t */\n\t\tthis._prevStage = null;\n\n\t\tthis.enableDOMEvents(true);\n\t}\n\n\t/**\n\t * Specifies a target stage that will have mouse/touch interactions relayed to it after this stage handles them.\n\t * This can be useful in cases where you have multiple layered canvases and want user interactions\n\t * events to pass through.\n\t *\n\t * MouseOver, MouseOut, RollOver, and RollOut interactions are also passed through using the mouse over settings\n\t * of the top-most stage, but are only processed if the target stage has mouse over interactions enabled.\n\t * Considerations when using roll over in relay targets:\n\t * \n\t * - The top-most (first) stage must have mouse over interactions enabled (via enableMouseOver)
\n\t * - All stages that wish to participate in mouse over interaction must enable them via enableMouseOver
\n\t * - All relay targets will share the frequency value of the top-most stage
\n\t *
\n\t *\n\t * @example Relay mouse events from topStage to bottomStage \n\t * topStage.nextStage = bottomStage;\n\t *\n\t * @example Disable DOM events \n\t * stage.enableDOMEvents(false);\n\t *\n\t * @type {easeljs.Stage}\n\t */\n\tget nextStage () { return this._nextStage; }\n\tset nextStage (stage) {\n\t\tif (this._nextStage) { this._nextStage._prevStage = null; }\n\t\tif (stage) { stage._prevStage = this; }\n\t\tthis._nextStage = stage;\n\t}\n\n// public methods:\n\t/**\n\t * Each time the update method is called, the stage will call {@link easeljs.Stage#tick}\n\t * unless {@link easeljs.Stage#tickOnupdate} is set to false,\n\t * and then render the display list to the canvas.\n\t *\n\t * @param {Object} [props] Props object to pass to `tick()`. Should usually be a {@link core.Ticker} event object, or similar object with a delta property.\n\t */\n\tupdate (props) {\n\t\tif (!this.canvas) { return; }\n\t\tif (this.tickOnUpdate) { this.tick(props); }\n\t\tif (this.dispatchEvent(\"drawstart\", false, true) === false) { return; }\n\t\tDisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;\n\t\tlet r = this.drawRect, ctx = this.canvas.getContext(\"2d\");\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tif (this.autoClear) {\n\t\t\tif (r) { ctx.clearRect(r.x, r.y, r.width, r.height); }\n\t\t\telse { ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1); }\n\t\t}\n\t\tctx.save();\n\t\tif (this.drawRect) {\n\t\t\tctx.beginPath();\n\t\t\tctx.rect(r.x, r.y, r.width, r.height);\n\t\t\tctx.clip();\n\t\t}\n\t\tthis.updateContext(ctx);\n\t\tthis.draw(ctx, false);\n\t\tctx.restore();\n\t\tthis.dispatchEvent(\"drawend\");\n\t}\n\n\t/**\n\t * Propagates a tick event through the display list. This is automatically called by {@link easeljs.Stage#update}\n\t * unless {@link easeljs.Stage#tickOnUpdate} is set to false.\n\t *\n\t * If a props object is passed to `tick()`, then all of its properties will be copied to the event object that is\n\t * propagated to listeners.\n\t *\n\t * Some time-based features in EaselJS (for example {@link easeljs.Sprite#framerate} require that\n\t * a {@link core.Ticker#event:tick} event object (or equivalent object with a delta property) be\n\t * passed as the `props` parameter to `tick()`.\n\t *\n\t * @example\n\t * Ticker.on(\"tick\", (evt) => {\n\t * // clone the event object from Ticker, and add some custom data to it:\n\t * \t let data = evt.clone().set({ greeting: \"hello\", name: \"world\" });\n\t * \t // pass it to stage.update():\n\t * \t stage.update(data); // subsequently calls tick() with the same param\n\t * });\n\t *\n\t * shape.on(\"tick\", (evt) => {\n\t * console.log(evt.delta); // the delta property from the Ticker tick event object\n\t * \t console.log(evt.greeting, evt.name); // custom data: \"hello world\"\n\t * });\n\t *\n\t * @emits easeljs.Stage#event:tickstart\n\t * @emits easeljs.Stage#event:tickend\n\t * @param {Object} [props] An object with properties that should be copied to the event object. Should usually be a Ticker event object, or similar object with a delta property.\n\t */\n\ttick (props) {\n\t\tif (!this.tickEnabled || this.dispatchEvent(\"tickstart\", false, true) === false) { return; }\n\t\tlet evtObj = new Event(\"tick\");\n\t\tif (props) {\n\t\t\tfor (let n in props) {\n\t\t\t\tif (props.hasOwnProperty(n)) { evtObj[n] = props[n]; }\n\t\t\t}\n\t\t}\n\t\tthis._tick(evtObj);\n\t\tthis.dispatchEvent(\"tickend\");\n\t}\n\n\t/**\n\t * Default event handler that calls the Stage {@link easeljs.Stage#update} method when a {@link easeljs.DisplayObject#event:tick}\n\t * event is received. This allows you to register a Stage instance as a event listener on {@link core.Ticker} directly.\n\t * Note that if you subscribe to ticks using this pattern, then the tick event object will be passed through to\n\t * display object tick handlers, instead of `delta` and `paused` parameters.\n\t */\n\thandleEvent (evt) {\n\t\tif (evt.type === \"tick\") { this.update(evt); }\n\t}\n\n\t/**\n\t * Clears the target canvas. Useful if {@link easeljs.State#autoClear} is set to `false`.\n\t */\n\tclear () {\n\t\tif (!this.canvas) { return; }\n\t\tlet ctx = this.canvas.getContext(\"2d\");\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1);\n\t}\n\n\t/**\n\t * Returns a data url that contains a Base64-encoded image of the contents of the stage. The returned data url can\n\t * be specified as the src value of an image element.\n\t *\n\t * @param {String} [backgroundColor] The background color to be used for the generated image. Any valid CSS color\n\t * value is allowed. The default value is a transparent background.\n\t * @param {String} [mimeType=\"image/png\"] The MIME type of the image format to be create. If an unknown MIME type\n\t * is passed in, or if the browser does not support the specified MIME type, the default value will be used.\n\t * @return {String} a Base64 encoded image.\n\t */\n\ttoDataURL (backgroundColor, mimeType = \"image/png\") {\n\t\tlet data, ctx = this.canvas.getContext('2d'), w = this.canvas.width, h = this.canvas.height;\n\n\t\tif (backgroundColor) {\n\t\t\tdata = ctx.getImageData(0, 0, w, h);\n\t\t\tvar compositeOperation = ctx.globalCompositeOperation;\n\t\t\tctx.globalCompositeOperation = \"destination-over\";\n\n\t\t\tctx.fillStyle = backgroundColor;\n\t\t\tctx.fillRect(0, 0, w, h);\n\t\t}\n\n\t\tlet dataURL = this.canvas.toDataURL(mimeType);\n\n\t\tif (backgroundColor) {\n\t\t\tctx.putImageData(data, 0, 0);\n\t\t\tctx.globalCompositeOperation = compositeOperation;\n\t\t}\n\n\t\treturn dataURL;\n\t}\n\n\t/**\n\t * Enables or disables (by passing a frequency of 0) mouse over {@link easeljs.DisplayObject#event:mouseover}\n\t * and {@link easeljs.DisplayObject#event:mouseout} and roll over events {@link easeljs.DisplayObject#event:rollover}\n\t * and {@link easeljs.DisplayObject#event:rollout} for this stage's display list. These events can\n\t * be expensive to generate, so they are disabled by default. The frequency of the events can be controlled\n\t * independently of mouse move events via the optional `frequency` parameter.\n\t *\n\t * @example\n\t * const stage = new Stage(\"canvasId\");\n\t * stage.enableMouseOver(10); // 10 updates per second\n\t *\n\t * @param {Number} [frequency=20] Optional param specifying the maximum number of times per second to broadcast\n\t * mouse over/out events. Set to 0 to disable mouse over events completely. Maximum is 50. A lower frequency is less\n\t * responsive, but uses less CPU.\n\t */\n\tenableMouseOver (frequency = 20) {\n\t\tif (this._mouseOverIntervalID) {\n\t\t\tclearInterval(this._mouseOverIntervalID);\n\t\t\tthis._mouseOverIntervalID = null;\n\t\t\tif (frequency === 0) {\n\t\t\t\tthis._testMouseOver(true);\n\t\t\t}\n\t\t}\n\t\tif (frequency <= 0) { return; }\n\t\tthis._mouseOverIntervalID = setInterval(() => this._testMouseOver(), 1000/Math.min(50,frequency));\n\t}\n\n\t/**\n\t * Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). It is good\n\t * practice to disable events when disposing of a Stage instance, otherwise the stage will continue to receive\n\t * events from the page.\n\t * When changing the canvas property you must disable the events on the old canvas, and enable events on the\n\t * new canvas or mouse events will not work as expected.\n\t *\n\t * @example\n\t * stage.enableDOMEvents(false);\n\t * stage.canvas = anotherCanvas;\n\t * stage.enableDOMEvents(true);\n\t *\n\t * @param {Boolean} [enable=true] Indicates whether to enable or disable the events.\n\t */\n\tenableDOMEvents (enable = true) {\n\t\tlet ls = this._eventListeners;\n\t\tif (!enable && ls) {\n\t\t\tfor (let n in ls) {\n\t\t\t\tlet o = ls[n];\n\t\t\t\to.t.removeEventListener(n, o.f, false);\n\t\t\t}\n\t\t\tthis._eventListeners = null;\n\t\t} else if (enable && !ls && this.canvas) {\n\t\t\tlet t = window.addEventListener ? window : document;\n\t\t\tls = this._eventListeners = {\n\t\t\t\tmouseup: {t, f:e => this._handleMouseUp(e) },\n\t\t\t\tmousemove: {t, f:e => this._handleMouseMove(e) },\n\t\t\t\tdblclick: {t:this.canvas, f:e => this._handleDoubleClick(e) },\n\t\t\t\tmousedown: {t:this.canvas, f:e => this._handleMouseDown(e) }\n\t\t\t};\n\t\t\tfor (let n in ls) {\n\t\t\t\tlet o = ls[n];\n\t\t\t\to.t.addEventListener && o.t.addEventListener(n, o.f, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Stage instances cannot be cloned.\n\t * @throws Stage cannot be cloned\n\t * @override\n\t */\n\tclone () {\n\t\tthrow \"Stage cannot be cloned.\";\n\t}\n\n\t/**\n\t * @protected\n\t * @param {HTMLElement} e\n\t * @returns {Object}\n\t */\n\t_getElementRect (e) {\n\t\tlet bounds;\n\t\ttry { bounds = e.getBoundingClientRect(); } // this can fail on disconnected DOM elements in IE9\n\t\tcatch (err) { bounds = {top:e.offsetTop, left:e.offsetLeft, width:e.offsetWidth, height:e.offsetHeight}; }\n\n\t\tlet offX = (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0);\n\t\tlet offY = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || document.body.clientTop || 0);\n\n\t\tlet styles = window.getComputedStyle ? getComputedStyle(e, null) : e.currentStyle; // IE <9 compatibility.\n\t\tlet padL = parseInt(styles.paddingLeft)+parseInt(styles.borderLeftWidth);\n\t\tlet padT = parseInt(styles.paddingTop)+parseInt(styles.borderTopWidth);\n\t\tlet padR = parseInt(styles.paddingRight)+parseInt(styles.borderRightWidth);\n\t\tlet padB = parseInt(styles.paddingBottom)+parseInt(styles.borderBottomWidth);\n\n\t\t// note: in some browsers bounds properties are read only.\n\t\treturn {\n\t\t\tleft: bounds.left+offX+padL,\n\t\t\tright: bounds.right+offX-padR,\n\t\t\ttop: bounds.top+offY+padT,\n\t\t\tbottom: bounds.bottom+offY-padB\n\t\t};\n\t}\n\n\t/**\n\t * @protected\n\t * @param {Number} id\n\t * @returns {Object}\n\t */\n\t_getPointerData (id) {\n\t\tlet data = this._pointerData[id];\n\t\tif (!data) { data = this._pointerData[id] = {x:0, y:0}; }\n\t\treturn data;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.MouseEvent} [e=window.event]\n\t */\n\t_handleMouseMove (e = window.event) {\n\t\tthis._handlePointerMove(-1, e, e.pageX, e.pageY);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.DisplayObject#event:mouseleave}\n\t * @emits {@link easeljs.DisplayObject#event:mouseenter}\n\t * @emits {@link easeljs.DisplayObject#event:pressmove}\n\t * @emits {@link easeljs.Stage#event:stagemousemove}\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handlePointerMove (id, e, pageX, pageY, owner) {\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\t\tif (!this.canvas) { return; }\n\t\tlet nextStage=this._nextStage, o=this._getPointerData(id);\n\n\t\tlet inBounds = o.inBounds;\n\t\tthis._updatePointerPosition(id, e, pageX, pageY);\n\t\tif (inBounds || o.inBounds || this.mouseMoveOutside) {\n\t\t\tif (id === -1 && o.inBounds === !inBounds) {\n\t\t\t\tthis._dispatchMouseEvent(this, (inBounds ? \"mouseleave\" : \"mouseenter\"), false, id, o, e);\n\t\t\t}\n\n\t\t\tthis._dispatchMouseEvent(this, \"stagemousemove\", false, id, o, e);\n\t\t\tthis._dispatchMouseEvent(o.target, \"pressmove\", true, id, o, e);\n\t\t}\n\n\t\tnextStage&&nextStage._handlePointerMove(id, e, pageX, pageY, null);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t */\n\t_updatePointerPosition (id, e, pageX, pageY) {\n\t\tlet rect = this._getElementRect(this.canvas);\n\t\tpageX -= rect.left;\n\t\tpageY -= rect.top;\n\n\t\tlet w = this.canvas.width;\n\t\tlet h = this.canvas.height;\n\t\tpageX /= (rect.right-rect.left)/w;\n\t\tpageY /= (rect.bottom-rect.top)/h;\n\t\tlet o = this._getPointerData(id);\n\t\tif (o.inBounds = (pageX >= 0 && pageY >= 0 && pageX <= w-1 && pageY <= h-1)) {\n\t\t\to.x = pageX;\n\t\t\to.y = pageY;\n\t\t} else if (this.mouseMoveOutside) {\n\t\t\to.x = pageX < 0 ? 0 : (pageX > w-1 ? w-1 : pageX);\n\t\t\to.y = pageY < 0 ? 0 : (pageY > h-1 ? h-1 : pageY);\n\t\t}\n\n\t\to.posEvtObj = e;\n\t\to.rawX = pageX;\n\t\to.rawY = pageY;\n\n\t\tif (id === this._primaryPointerID || id === -1) {\n\t\t\tthis.mouseX = o.x;\n\t\t\tthis.mouseY = o.y;\n\t\t\tthis.mouseInBounds = o.inBounds;\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.MouseEvent} e\n\t */\n\t_handleMouseUp (e) {\n\t\tthis._handlePointerUp(-1, e, false);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.Stage#event:stagemouseup}\n\t * @emits {@link easeljs.DisplayObject#event:click}\n\t * @emits {@link easeljs.DisplayObject#event:pressup}\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Boolean} clear\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handlePointerUp (id, e, clear, owner) {\n\t\tlet nextStage = this._nextStage, o = this._getPointerData(id);\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\n\t\tlet target=null, oTarget = o.target;\n\t\tif (!owner && (oTarget || nextStage)) { target = this._getObjectsUnderPoint(o.x, o.y, null, true); }\n\n\t\tif (o.down) { this._dispatchMouseEvent(this, \"stagemouseup\", false, id, o, e, target); o.down = false; }\n\n\t\tif (target === oTarget) { this._dispatchMouseEvent(oTarget, \"click\", true, id, o, e); }\n\t\tthis._dispatchMouseEvent(oTarget, \"pressup\", true, id, o, e);\n\n\t\tif (clear) {\n\t\t\tif (id==this._primaryPointerID) { this._primaryPointerID = null; }\n\t\t\tdelete(this._pointerData[id]);\n\t\t} else { o.target = null; }\n\n\t\tnextStage&&nextStage._handlePointerUp(id, e, clear, owner || target && this);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.MouseEvent} e\n\t */\n\t_handleMouseDown (e) {\n\t\tthis._handlePointerDown(-1, e, e.pageX, e.pageY);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.Stage#event:stagemousedown}\n\t * @emits {@link easeljs.DisplayObject#event:mousedown}\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handlePointerDown (id, e, pageX, pageY, owner) {\n\t\tif (this.preventSelection) { e.preventDefault(); }\n\t\tif (this._primaryPointerID == null || id === -1) { this._primaryPointerID = id; } // mouse always takes over.\n\n\t\tif (pageY != null) { this._updatePointerPosition(id, e, pageX, pageY); }\n\t\tlet target = null, nextStage = this._nextStage, o = this._getPointerData(id);\n\t\tif (!owner) { target = o.target = this._getObjectsUnderPoint(o.x, o.y, null, true); }\n\n\t\tif (o.inBounds) { this._dispatchMouseEvent(this, \"stagemousedown\", false, id, o, e, target); o.down = true; }\n\t\tthis._dispatchMouseEvent(target, \"mousedown\", true, id, o, e);\n\n\t\tnextStage&&nextStage._handlePointerDown(id, e, pageX, pageY, owner || target && this);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.DisplayObject#event:mouseout}\n\t * @emits {@link easeljs.DisplayObject#event:rollout}\n\t * @emits {@link easeljs.DisplayObject#event:rollover}\n\t * @emits {@link easeljs.DisplayObject#event:mouseover}\n\t * @param {Boolean} clear If true, clears the mouseover / rollover (ie. no target)\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t * @param {easeljs.Stage} eventTarget The stage that the cursor is actively over.\n\t * @protected\n\t */\n\t_testMouseOver (clear, owner, eventTarget) {\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\n\t\tlet nextStage = this._nextStage;\n\t\tif (!this._mouseOverIntervalID) {\n\t\t\t// not enabled for mouseover, but should still relay the event.\n\t\t\tnextStage&&nextStage._testMouseOver(clear, owner, eventTarget);\n\t\t\treturn;\n\t\t}\n\t\tlet o = this._getPointerData(-1);\n\t\t// only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs.\n\t\tif (!o || (!clear && this.mouseX === this._mouseOverX && this.mouseY === this._mouseOverY && this.mouseInBounds)) { return; }\n\n\t\tlet e = o.posEvtObj;\n\t\tlet isEventTarget = eventTarget || e&&(e.target === this.canvas);\n\t\tlet target=null, common = -1, cursor=\"\";\n\n\t\tif (!owner && (clear || this.mouseInBounds && isEventTarget)) {\n\t\t\ttarget = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, true);\n\t\t\tthis._mouseOverX = this.mouseX;\n\t\t\tthis._mouseOverY = this.mouseY;\n\t\t}\n\n\t\tlet oldList = this._mouseOverTarget||[];\n\t\tlet oldTarget = oldList[oldList.length-1];\n\t\tlet list = this._mouseOverTarget = [];\n\n\t\t// generate ancestor list and check for cursor:\n\t\tlet t = target;\n\t\twhile (t) {\n\t\t\tlist.unshift(t);\n\t\t\tif (!cursor) { cursor = t.cursor; }\n\t\t\tt = t.parent;\n\t\t}\n\t\tthis.canvas.style.cursor = cursor;\n\t\tif (!owner && eventTarget) { eventTarget.canvas.style.cursor = cursor; }\n\n\t\t// find common ancestor:\n\t\tfor (let i=0,l=list.length; icommon; i--) {\n\t\t\tthis._dispatchMouseEvent(oldList[i], \"rollout\", false, -1, o, e, target);\n\t\t}\n\n\t\tfor (let i=list.length-1; i>common; i--) {\n\t\t\tthis._dispatchMouseEvent(list[i], \"rollover\", false, -1, o, e, oldTarget);\n\t\t}\n\n\t\tif (oldTarget != target) {\n\t\t\tthis._dispatchMouseEvent(target, \"mouseover\", true, -1, o, e, oldTarget);\n\t\t}\n\n\t\tnextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.DisplayObject#event:dblclick}\n\t * @protected\n\t * @param {easeljs.MouseEvent} e\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handleDoubleClick (e, owner) {\n\t\tlet target=null, nextStage=this._nextStage, o=this._getPointerData(-1);\n\t\tif (!owner) {\n\t\t\ttarget = this._getObjectsUnderPoint(o.x, o.y, null, true);\n\t\t\tthis._dispatchMouseEvent(target, \"dblclick\", true, -1, o, e);\n\t\t}\n\t\tnextStage&&nextStage._handleDoubleClick(e, owner || target && this);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.DisplayObject} target\n\t * @param {String} type\n\t * @param {Boolean} bubbles\n\t * @param {Number} pointerId\n\t * @param {Object} o\n\t * @param {easeljs.MouseEvent} [nativeEvent]\n\t * @param {easeljs.DisplayObject} [relatedTarget]\n\t */\n\t_dispatchMouseEvent (target, type, bubbles, pointerId, o, nativeEvent, relatedTarget) {\n\t\t// TODO: might be worth either reusing MouseEvent instances, or adding a willTrigger method to avoid GC.\n\t\tif (!target || (!bubbles && !target.hasEventListener(type))) { return; }\n\t\t/*\n\t\t// TODO: account for stage transformations?\n\t\tthis._mtx = this.getConcatenatedMatrix(this._mtx).invert();\n\t\tlet pt = this._mtx.transformPoint(o.x, o.y);\n\t\tlet evt = new MouseEvent(type, bubbles, false, pt.x, pt.y, nativeEvent, pointerId, pointerId==this._primaryPointerID || pointerId==-1, o.rawX, o.rawY);\n\t\t*/\n\t\tlet evt = new MouseEvent(type, bubbles, false, o.x, o.y, nativeEvent, pointerId, pointerId === this._primaryPointerID || pointerId === -1, o.rawX, o.rawY, relatedTarget);\n\t\ttarget.dispatchEvent(evt);\n\t}\n\n}\n\n/**\n * Dispatched when the user moves the mouse over the canvas.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#stagemousemove\n * @since 0.6.0\n */\n/**\n * Dispatched when the user presses their left mouse button on the canvas.\n * You can use {@link easeljs.Stage#mouseInBounds} to check whether the mouse is currently within the stage bounds.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#stagemousedown\n * @since 0.6.0\n */\n/**\n * Dispatched when the user the user presses somewhere on the stage, then releases the mouse button anywhere that the page can detect it (this varies slightly between browsers).\n * You can use {@link easeljs.Stage#mouseInBounds} to check whether the mouse is currently within the stage bounds.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#stagemouseup\n * @since 0.6.0\n */\n/**\n * Dispatched when the mouse moves from within the canvas area (mouseInBounds === true) to outside it (mouseInBounds === false).\n * This is currently only dispatched for mouse input (not touch).\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#mouseleave\n * @since 0.7.0\n */\n/**\n * Dispatched when the mouse moves into the canvas area (mouseInBounds === false) from outside it (mouseInBounds === true).\n * This is currently only dispatched for mouse input (not touch).\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#mouseenter\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately before the tick event is propagated through the display list.\n * You can call preventDefault on the event object to cancel propagating the tick event.\n * @event easeljs.Stage#tickstart\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately after the tick event is propagated through the display list. Does not fire if\n * tickOnUpdate is false. Precedes the \"drawstart\" event.\n * @event easeljs.Stage#tickend\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately before the canvas is cleared and the display list is drawn to it.\n * You can call preventDefault on the event object to cancel the draw.\n * @event easeljs.Stage#drawstart\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately after the display list is drawn to the canvas and the canvas context is restored.\n * @event easeljs.Stage#drawend\n * @since 0.7.0\n */\n","/**\r\n * @license Canvas\r\n * Visit http://createjs.com/ for documentation, updates and examples.\r\n *\r\n * Copyright (c) 2017 gskinner.com, inc.\r\n *\r\n * Permission is hereby granted, free of charge, to any person\r\n * obtaining a copy of this software and associated documentation\r\n * files (the \"Software\"), to deal in the Software without\r\n * restriction, including without limitation the rights to use,\r\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\r\n * copies of the Software, and to permit persons to whom the\r\n * Software is furnished to do so, subject to the following\r\n * conditions:\r\n *\r\n * The above copyright notice and this permission notice shall be\r\n * included in all copies or substantial portions of the Software.\r\n *\r\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\r\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\r\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\r\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\r\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\r\n * OTHER DEALINGS IN THE SOFTWARE.\r\n */\r\n\r\n/**\r\n * Global utility for creating canvases.\r\n * @memberof easeljs\n * @name easeljs.createCanvas\n * @param {Number} [width=1]\n * @param {Number} [height=1]\r\n */\r\nexport default function createCanvas(width=1, height=1) {\n\tlet c;\n\tif (window.createjs !== undefined && window.createjs.createCanvas !== undefined) {\n\t\tc = window.createjs.createCanvas();\n\t}\n\tif (window.document !== undefined && window.document.createElement !== undefined) {\n\t\tc = document.createElement(\"canvas\");\n\t}\n\tif (c !== undefined) {\n\t\tc.width = width;\n\t\tc.height = height;\n\t\treturn c;\n\t}\n\n\tthrow \"Canvas not supported in this environment.\";\r\n}\r\n","/**\n * @license VideoBuffer\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2010 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport createCanvas from \"./Canvas\";\n\n/**\n * When an HTML video seeks, including when looping, there is an indeterminate period before a new frame is available.\n * This can result in the video blinking or flashing when it is drawn to a canvas. The VideoBuffer class resolves\n * this issue by drawing each frame to an off-screen canvas and preserving the prior frame during a seek.\n *\n * @example\n * let buffer = new VideoBuffer(video);\n * let bitmap = new Bitmap(buffer);\n *\n * @param {HTMLVideoElement} video The HTML video element to buffer.\n */\nexport default class VideoBuffer {\n\n constructor (video) {\n\n \t/**\n \t * Used by Bitmap to determine when the video buffer is ready to be drawn. Not intended for general use.\n \t * @protected\n \t * @type {Number}\n \t */\n \tthis.readyState = video.readyState;\n\n \t/**\n \t * @protected\n \t * @type {HTMLVideoElement}\n \t */\n \tthis._video = video;\n\n \t/**\n \t * @protected\n \t * @type {HTMLCanvasElement}\n \t */\n \tthis._canvas = null;\n\n \t/**\n \t * @protected\n \t * @type {Number}\n \t * @default -1\n \t */\n \tthis._lastTime = -1;\n\n \tif (this.readyState < 2) {\n video.addEventListener(\"canplaythrough\", this._videoReady.bind(this));\n }\n // {once: true} isn't supported everywhere, but its a non-critical optimization here.\n }\n\n /**\n * Gets an HTML canvas element showing the current video frame, or the previous frame if in a seek / loop.\n * Primarily for use by {@link easeljs.Bitmap}.\n */\n getImage () {\n \tif (this.readyState < 2) { return; }\n \tlet canvas = this._canvas, video = this._video;\n \tif (!canvas) {\n\t\t\tcanvas = this._canvas = createCanvas();\n \t\tcanvas.width = video.videoWidth;\n \t\tcanvas.height = video.videoHeight;\n \t}\n \tif (video.readyState >= 2 && video.currentTime !== this._lastTime) {\n \t\tconst ctx = canvas.getContext(\"2d\");\n \t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n \t\tctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n \t\tthis._lastTime = video.currentTime;\n \t}\n \treturn canvas;\n }\n\n /**\n * @protected\n */\n _videoReady () {\n \tthis.readyState = 2;\n }\n\n}\n","/**\n * @license Bitmap\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport VideoBuffer from \"../utils/VideoBuffer\";\n\n/**\n * A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing\n * HTML element, or a string.\n *\n * Notes:\n * \n * - When using a video source that may loop or seek, use a {@link easeljs.VideoBuffer} object to\n * blinking / flashing.\n *
- When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it\n * will be displayed.
\n * - Bitmaps with an SVG source currently will not respect an alpha value other than 0 or 1. To get around this,\n * the Bitmap can be cached.
\n * - Bitmaps with an SVG source will taint the canvas with cross-origin data, which prevents interactivity. This\n * happens in all browsers except recent Firefox builds.
\n * - Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using\n * methods such as `getObjectUnderPoint`, or using filters, or caching. You can get around this by setting\n * `crossOrigin` flags on your images before passing them to EaselJS, eg: `img.crossOrigin=\"Anonymous\";`
\n *
\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * const bitmap = new Bitmap(\"imagePath.jpg\");\n *\n * @param {CanvasImageSource | String | Object} imageOrUri The source image to display. This can be a CanvasImageSource\n * (image, video, canvas), an object with a `getImage` method that returns a CanvasImageSource, or a string URL to an image.\n * If the latter, a new Image instance with the URL as its src will be used.\n */\nexport default class Bitmap extends DisplayObject {\n\n\tconstructor (imageOrUri) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The source image to display. This can be a CanvasImageSource\n\t\t * (image, video, canvas), an object with a `getImage` method that returns a CanvasImageSource, or a string URL to an image.\n\t\t * If the latter, a new Image instance with the URL as its src will be used.\n\t\t * @property image\n\t\t * @type {CanvasImageSource | Object}\n\t\t */\n\t\tif (typeof imageOrUri === \"string\") {\n\t\t\tthis.image = document.createElement(\"img\");\n\t\t\tthis.image.src = imageOrUri;\n\t\t} else {\n\t\t\tthis.image = imageOrUri;\n\t\t}\n\n\t\t/**\n\t\t * Specifies an area of the source image to draw. If omitted, the whole image will be drawn.\n\t\t * Note that video sources must have a width / height set to work correctly with `sourceRect`.\n\t\t * @type {easeljs.Rectangle}\n\t\t * @default null\n\t\t */\n\t\tthis.sourceRect = null;\n\n\t\t/**\n\t\t * Set as compatible with WebGL.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_BITMAP;\n\t}\n\n\tisVisible () {\n\t\tlet image = this.image;\n\t\tlet hasContent = this.cacheCanvas || (image && (image.naturalWidth || image.getContext || image.readyState >= 2));\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache = false) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\t\tlet img = this.image, rect = this.sourceRect;\n\t\tif (img instanceof VideoBuffer) { img = img.getImage(); }\n\t\tif (img == null) { return true; }\n\t\tif (rect) {\n\t\t\t// some browsers choke on out of bound values, so we'll fix them:\n\t\t\tlet x1 = rect.x, y1 = rect.y, x2 = x1 + rect.width, y2 = y1 + rect.height, x = 0, y = 0, w = img.width, h = img.height;\n\t\t\tif (x1 < 0) { x -= x1; x1 = 0; }\n\t\t\tif (x2 > w) { x2 = w; }\n\t\t\tif (y1 < 0) { y -= y1; y1 = 0; }\n\t\t\tif (y2 > h) { y2 = h; }\n\t\t\tctx.drawImage(img, x1, y1, x2-x1, y2-y1, x, y, x2-x1, y2-y1);\n\t\t} else {\n\t\t\tctx.drawImage(img, 0, 0);\n\t\t}\n\t\treturn true;\n\t}\n\n\t// Note, the doc sections below document using the specified APIs (from DisplayObject) from\n\t// Bitmap. This is why they have no method implementations.\n\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the {@link easeljs.DisplayObject#cache} method.\n\t *\n\t * @alias easeljs.Bitmap#cache\n\t */\n\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the {@link easeljs.DisplayObject#cache} method.\n\t *\n\t * @alias easeljs.Bitmap#updateCache\n\t */\n\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the {@link easeljs.DisplayObject#cache} method.\n\t *\n\t * @alias easeljs.Bitmap#uncache\n\t */\n\n\tgetBounds () {\n\t\tlet rect = super.getBounds();\n\t\tif (rect) { return rect; }\n\t\tlet image = this.image, o = this.sourceRect || image;\n\t\tlet hasContent = (image && (image.naturalWidth || image.getContext || image.readyState >= 2));\n\t\treturn hasContent ? this._rectangle.setValues(0, 0, o.width, o.height) : null;\n\t}\n\n\t/**\n\t * Returns a clone of the Bitmap instance.\n\t * @param {Boolean} [node] Whether the underlying DOM element should be cloned as well.\n\t * @return {easeljs.Bitmap} A clone of the Bitmap instance.\n\t */\n\tclone (node) {\n\t\tlet img = this.image;\n\t\tif (img != null && node != null) { img = img.cloneNode(); }\n\t\tlet bmp = new Bitmap(img);\n\t\tif (this.sourceRect) { bmp.sourceRect = this.sourceRect.clone(); }\n\t\tthis._cloneProps(bmp);\n\t\treturn bmp;\n\t}\n\n}\n","/**\n * @license Sprite\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport { Event } from \"@createjs/core\";\n\n/**\n * Displays a frame or sequence of frames (ie. an animation) from a SpriteSheet instance. A sprite sheet is a series of\n * images (usually animation frames) combined into a single image. For example, an animation consisting of 8 100x100\n * images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). You can display individual frames,\n * play frames as an animation, and even sequence animations together.\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * let sprite = new Sprite(spriteSheet);\n * sprite.gotoAndStop(\"frameName\");\n *\n * Until {@link easeljs.Sprite#gotoAndStop} or {@link easeljs.Sprite#gotoAndPlay} is called,\n * only the first defined frame defined in the sprite sheet will be displayed.\n *\n * @see {@link easeljs.SpriteSheet \"More information on setting up frames and animations.\"}\n * @param {SpriteSheet} spriteSheet The SpriteSheet instance to play back. This includes the source image(s), frame\n * dimensions, and frame data.\n * @param {String | Number} [frameOrAnimation] The frame number or animation to play initially.\n */\nexport default class Sprite extends DisplayObject {\n\n\tconstructor (spriteSheet, frameOrAnimation) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The frame index that will be drawn when draw is called. Note that with some {@link easeljs.SpriteSheet}\n\t\t * definitions, this will advance non-sequentially. This will always be an integer value.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.currentFrame = 0;\n\n\t\t/**\n\t\t * Returns the name of the currently playing animation.\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.currentAnimation = null;\n\n\t\t/**\n\t\t * Prevents the animation from advancing each tick automatically. For example, you could create a sprite\n\t\t * sheet of icons, set paused to true, and display the appropriate icon by setting `currentFrame`.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.paused = true;\n\n\t\t/**\n\t\t * The SpriteSheet instance to play back. This includes the source image, frame dimensions, and frame data.\n\t\t * @type {easeljs.SpriteSheet}\n\t\t * @readonly\n\t\t */\n\t\tthis.spriteSheet = spriteSheet;\n\n\t\t/**\n\t\t * Specifies the current frame index within the currently playing animation. When playing normally, this will increase\n\t\t * from 0 to n-1, where n is the number of frames in the current animation.\n\t\t * This could be a non-integer value if using time-based playback, or if the animation's speed is not an integer.\n\t\t * @see {@link easeljs.Sprite#framerate}\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.currentAnimationFrame = 0;\n\n\t\t/**\n\t\t * By default Sprite instances advance one frame per tick. Specifying a framerate for the Sprite (or its related\n\t\t * SpriteSheet) will cause it to advance based on elapsed time between ticks as appropriate to maintain the target\n\t\t * framerate.\n\t\t *\n\t\t * For example, if a Sprite with a framerate of 10 is placed on a Stage being updated at 40fps, then the Sprite will\n\t\t * advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will\n\t\t * vary slightly between frames.\n\t\t *\n\t\t * This feature is dependent on the tick event object (or an object with an appropriate \"delta\" property) being\n\t\t * passed into {@link easeljs.Stage#update}.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.framerate = 0;\n\n\t\t/**\n\t\t * Current animation object.\n\t\t * @protected\n\t\t * @type {Object}\n\t\t * @default null\n\t\t */\n\t\tthis._animation = null;\n\n\t\t/**\n\t\t * Current frame index.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._currentFrame = null;\n\n\t\t/**\n\t\t * Skips the next auto advance. Used by gotoAndPlay to avoid immediately jumping to the next frame\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._skipAdvance = false;\n\n\t\t/**\n\t\t * Set as compatible with WebGL.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_SPRITE;\n\n\t\tif (frameOrAnimation != null) {\n\t\t\tthis.gotoAndPlay(frameOrAnimation);\n\t\t}\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || this.spriteSheet.complete;\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\t\tthis._normalizeFrame();\n\t\tlet o = this.spriteSheet.getFrame(this._currentFrame|0);\n\t\tif (!o) { return false; }\n\t\tlet rect = o.rect;\n\t\tif (rect.width && rect.height) { ctx.drawImage(o.image, rect.x, rect.y, rect.width, rect.height, -o.regX, -o.regY, rect.width, rect.height); }\n\t\treturn true;\n\t}\n\n\t// Note, the doc sections below document using the specified APIs (from DisplayObject) from\n\t// Bitmap. This is why they have no method implementations.\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @name easeljs.Sprite#cache\n\t */\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @name easeljs.Sprite#updateCache\n\t */\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @name easeljs.Sprite#uncache\n\t */\n\n\t/**\n\t * Play (unpause) the current animation. The Sprite will be paused if either {@link easeljs.Sprite#stop}\n\t * or {@link easeljs.Sprite#gotoAndStop} is called. Single frame animations will remain unchanged.\n\t */\n\tplay () {\n\t\tthis.paused = false;\n\t}\n\n\t/**\n\t * Stop playing a running animation. The Sprite will be playing if {@link easeljs.Sprite#gotoAndPlay} is called.\n\t * Note that calling `gotoAndPlay()` or {@link easeljs.Sprite#play} will resume playback.\n\t */\n\tstop () {\n\t\tthis.paused = true;\n\t}\n\n\t/**\n\t * Sets paused to false and plays the specified animation name, named frame, or frame number.\n\t * @param {String | Number} frameOrAnimation The frame number or animation name that the playhead should move to\n\t * and begin playing.\n\t */\n\tgotoAndPlay (frameOrAnimation) {\n\t\tthis.paused = false;\n\t\tthis._skipAdvance = true;\n\t\tthis._goto(frameOrAnimation);\n\t}\n\n\t/**\n\t * Sets paused to true and seeks to the specified animation name, named frame, or frame number.\n\t * @param {String | Number} frameOrAnimation The frame number or animation name that the playhead should move to\n\t * and stop.\n\t */\n\tgotoAndStop (frameOrAnimation) {\n\t\tthis.paused = true;\n\t\tthis._goto(frameOrAnimation);\n\t}\n\n\t/**\n\t * Advances the playhead. This occurs automatically each tick by default.\n\t * @param {Number} [time] The amount of time in ms to advance by. Only applicable if framerate is set on the Sprite\n\t * or its SpriteSheet.\n\t*/\n\tadvance (time) {\n\t\tlet fps = this.framerate || this.spriteSheet.framerate;\n\t\tlet t = (fps && time != null) ? time/(1000/fps) : 1;\n\t\tthis._normalizeFrame(t);\n\t}\n\n\t/**\n\t * Returns a {@link easeljs.Rectangle} instance defining the bounds of the current frame relative to\n\t * the origin. For example, a 90 x 70 frame with `regX=50` and `regY=40` would return a\n\t * rectangle with [x=-50, y=-40, width=90, height=70]. This ignores transformations on the display object.\n\t *\n\t * @see {@link easeljs.SpriteSheet#frameBounds}\n\t * @return {easeljs.Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully loaded.\n\t */\n\tgetBounds () {\n\t\t// TODO: should this normalizeFrame?\n\t\treturn super.getBounds() || this.spriteSheet.getFrameBounds(this.currentFrame, this._rectangle);\n\t}\n\n\t/**\n\t * Returns a clone of the Sprite instance. Note that the same SpriteSheet is shared between cloned instances.\n\t * @return {easeljs.Sprite} a clone of the Sprite instance.\n\t */\n\tclone () {\n\t\treturn this._cloneProps(new Sprite(this.spriteSheet));\n\t}\n\n\t/**\n\t * @param {easeljs.Sprite} o\n\t * @return {easeljs.Sprite} o\n\t * @protected\n\t */\n\t_cloneProps (o) {\n\t\tsuper._cloneProps(o);\n\t\to.currentFrame = this.currentFrame;\n\t\to.currentAnimation = this.currentAnimation;\n\t\to.paused = this.paused;\n\t\to.currentAnimationFrame = this.currentAnimationFrame;\n\t\to.framerate = this.framerate;\n\n\t\to._animation = this._animation;\n\t\to._currentFrame = this._currentFrame;\n\t\to._skipAdvance = this._skipAdvance;\n\t\treturn o;\n\t}\n\n\t_tick (evtObj) {\n\t\tif (!this.paused) {\n\t\t\tif (!this._skipAdvance) { this.advance(evtObj&&evtObj.delta); }\n\t\t\tthis._skipAdvance = false;\n\t\t}\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * Normalizes the current frame, advancing animations and dispatching callbacks as appropriate.\n\t * @protected\n\t * @param {Number} [frameDelta=0]\n\t */\n\t_normalizeFrame (frameDelta = 0) {\n\t\tlet animation = this._animation;\n\t\tlet paused = this.paused;\n\t\tlet frame = this._currentFrame;\n\n\t\tif (animation) {\n\t\t\tlet speed = animation.speed || 1;\n\t\t\tlet animFrame = this.currentAnimationFrame;\n\t\t\tlet l = animation.frames.length;\n\t\t\tif (animFrame + frameDelta * speed >= l) {\n\t\t\t\tlet next = animation.next;\n\t\t\t\tif (this._dispatchAnimationEnd(animation, frame, paused, next, l - 1)) {\n\t\t\t\t\t// something changed in the event stack, so we shouldn't make any more changes here.\n\t\t\t\t\treturn;\n\t\t\t\t} else if (next) {\n\t\t\t\t\t// sequence. Automatically calls _normalizeFrame again with the remaining frames.\n\t\t\t\t\treturn this._goto(next, frameDelta - (l - animFrame) / speed);\n\t\t\t\t} else {\n\t\t\t\t\t// end.\n\t\t\t\t\tthis.paused = true;\n\t\t\t\t\tanimFrame = animation.frames.length - 1;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tanimFrame += frameDelta * speed;\n\t\t\t}\n\t\t\tthis.currentAnimationFrame = animFrame;\n\t\t\tthis._currentFrame = animation.frames[animFrame | 0]\n\t\t} else {\n\t\t\tframe = (this._currentFrame += frameDelta);\n\t\t\tlet l = this.spriteSheet.getNumFrames();\n\t\t\tif (frame >= l && l > 0) {\n\t\t\t\tif (!this._dispatchAnimationEnd(animation, frame, paused, l - 1)) {\n\t\t\t\t\t// looped.\n\t\t\t\t\tif ((this._currentFrame -= l) >= l) { return this._normalizeFrame(); }\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tframe = this._currentFrame | 0;\n\t\tif (this.currentFrame != frame) {\n\t\t\tthis.currentFrame = frame;\n\t\t\tthis.dispatchEvent(\"change\");\n\t\t}\n\t};\n\n\t/**\n\t * Dispatches the \"animationend\" event. Returns true if a handler changed the animation (ex. calling {@link easlejs.Sprite#stop},\n\t * {@link easeljs.Sprite#gotoAndPlay}, etc.)\n\t * @param animation\n\t * @param frame\n\t * @param paused\n\t * @param next\n\t * @param end\n\t * @private\n\t */\n\t_dispatchAnimationEnd (animation, frame, paused, next, end) {\n\t\tlet name = animation ? animation.name : null;\n\t\tif (this.hasEventListener(\"animationend\")) {\n\t\t\tlet evt = new Event(\"animationend\");\n\t\t\tevt.name = name;\n\t\t\tevt.next = next;\n\t\t\tthis.dispatchEvent(evt);\n\t\t}\n\t\t// did the animation get changed in the event stack?:\n\t\tlet changed = (this._animation != animation || this._currentFrame != frame);\n\t\t// if the animation hasn't changed, but the sprite was paused, then we want to stick to the last frame:\n\t\tif (!changed && !paused && this.paused) { this.currentAnimationFrame = end; changed = true; }\n\t\treturn changed;\n\t}\n\n\t/**\n\t * Moves the playhead to the specified frame number or animation.\n\t * @param {String | Number} frameOrAnimation The frame number or animation that the playhead should move to.\n\t * @param {Number} [frame=0] The frame of the animation to go to. Defaults to 0.\n\t * @protected\n\t */\n\t_goto (frameOrAnimation, frame = 0) {\n\t\tthis.currentAnimationFrame = 0;\n\t\tif (isNaN(frameOrAnimation)) {\n\t\t\tlet data = this.spriteSheet.getAnimation(frameOrAnimation);\n\t\t\tif (data) {\n\t\t\t\tthis._animation = data;\n\t\t\t\tthis.currentAnimation = frameOrAnimation;\n\t\t\t\tthis._normalizeFrame(frame);\n\t\t\t}\n\t\t} else {\n\t\t\tthis.currentAnimation = this._animation = null;\n\t\t\tthis._currentFrame = frameOrAnimation;\n\t\t\tthis._normalizeFrame();\n\t\t}\n\t}\n\n}\n\n/**\n * Dispatched when an animation reaches its ends.\n * @event easeljs.Sprite#animationend\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @property {String} name The name of the animation that just ended.\n * @property {String} next The name of the next animation that will be played, or null. This will be the same as name if the animation is looping.\n * @since 0.6.0\n */\n\n/**\n * Dispatched any time the current frame changes. For example, this could be due to automatic advancement on a tick,\n * or calling gotoAndPlay() or gotoAndStop().\n * @event easeljs.Sprite#change\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n */\n","/**\n * @license BitmapText\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Container from \"./Container\";\nimport Sprite from \"./Sprite\";\n\n/**\n * Displays text using bitmap glyphs defined in a sprite sheet. Multi-line text is supported using new line characters,\n * but automatic wrapping is not supported. See the {@link easeljs.BitmapText#spriteSheet} property for more information on defining glyphs.\n *\n * Important: While BitmapText extends Container, it is not designed to be used as one.\n * As such, methods like addChild and removeChild are disabled.\n *\n * @memberof easeljs\n * @extends easeljs.Container\n *\n * @param {String} [text=\"\"] The text to display.\n * @param {SpriteSheet} [spriteSheet=null] The spritesheet that defines the character glyphs.\n */\nexport default class BitmapText extends Container {\n\n\tconstructor (text = \"\", spriteSheet = null) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The text to display.\n\t\t * @type {String}\n\t\t * @default \"\"\n\t\t */\n\t\tthis.text = text;\n\n\t\t/**\n\t\t * A SpriteSheet instance that defines the glyphs for this bitmap text. Each glyph/character\n\t\t * should have a single frame animation defined in the sprite sheet named the same as\n\t\t * corresponding character.\n\t\t *\n\t\t * @example\n\t\t * // the following animation definition would indicate that the frame at index 0 of the spritesheet should be drawn for the \"A\" character.\n\t\t * \"A\": {frames: [0]}\n\t\t * // The short form is also acceptable:\n\t\t * \"A\": 0\n\t\t *\n\t\t * Note that if a character in the text is not found in the sprite sheet, it will also\n\t\t * try to use the alternate case (upper or lower).\n\t\t *\n\t\t * @see {@link easeljs.SpriteSheet}\n\t\t * @type {easeljs.SpriteSheet}\n\t\t * @default null\n\t\t */\n\t\tthis.spriteSheet = spriteSheet;\n\n\t\t/**\n\t\t * The height of each line of text. If 0, then it will use a line height calculated\n\t\t * by checking for the height of the \"1\", \"T\", or \"L\" character (in that order). If\n\t\t * those characters are not defined, it will use the height of the first frame of the\n\t\t * sprite sheet.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.lineHeight = 0;\n\n\t\t/**\n\t\t * This spacing (in pixels) will be added after each character in the output.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.letterSpacing = 0;\n\n\t\t/**\n\t\t * If a space character is not defined in the sprite sheet, then empty pixels equal to\n\t\t * spaceWidth will be inserted instead. If 0, then it will use a value calculated\n\t\t * by checking for the width of the \"1\", \"l\", \"E\", or \"A\" character (in that order). If\n\t\t * those characters are not defined, it will use the width of the first frame of the\n\t\t * sprite sheet.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.spaceWidth = 0;\n\n\t \t/**\n\t\t * @type {Object}\n\t\t * @protected\n\t\t */\n\t\tthis._oldProps = {text:0,spriteSheet:0,lineHeight:0,letterSpacing:0,spaceWidth:0};\n\n\t\t/**\n\t\t * Used to track the object which this class attached listeners to, helps optimize listener attachment.\n\t\t * @type {easeljs.Stage}\n\t\t * @protected\n\t\t */\n\t\tthis._oldStage = null;\n\n\t\t/**\n\t\t * The event listener proxy triggered drawing draw for special circumstances.\n\t\t * @type {Function}\n\t\t * @protected\n\t\t */\n\t\tthis._drawAction = null;\n\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\tif (this.drawCache(ctx, ignoreCache)) { return; }\n\t\tthis._updateState();\n\t\tsuper.draw(ctx, ignoreCache);\n\t}\n\n\tgetBounds () {\n\t\tthis._updateText();\n\t\treturn super.getBounds();\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || (this.spriteSheet && this.spriteSheet.complete && this.text);\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX !== 0 && this.scaleY !== 0 && hasContent);\n\t}\n\n\tclone () {\n\t\treturn this._cloneProps(new BitmapText(this.text, this.spriteSheet));\n\t}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\taddChild () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\taddChildAt () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\tremoveChild () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\tremoveChildAt () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\tremoveAllChildren () {}\n\n\t_updateState () {\n\t\tthis._updateText();\n\t}\n\n \t/**\n\t * @param {easeljs.BitmapText} o\n\t * @return {easeljs.BitmapText}\n\t * @protected\n\t */\n\t_cloneProps (o) {\n\t\tsuper._cloneProps(o);\n\t\to.lineHeight = this.lineHeight;\n\t\to.letterSpacing = this.letterSpacing;\n\t\to.spaceWidth = this.spaceWidth;\n\t\treturn o;\n\t}\n\n\t/**\n\t * @param {String} character\n\t * @param {easeljs.SpriteSheet} spriteSheet\n\t * @return {Number}\n\t * @protected\n\t */\n\t_getFrameIndex (character, spriteSheet) {\n\t\tlet c, o = spriteSheet.getAnimation(character);\n\t\tif (!o) {\n\t\t\t(character != (c = character.toUpperCase())) || (character != (c = character.toLowerCase())) || (c = null);\n\t\t\tif (c) { o = spriteSheet.getAnimation(c); }\n\t\t}\n\t\treturn o && o.frames[0];\n\t}\n\n\t/**\n\t * @param {String} character\n\t * @param {easeljs.SpriteSheet} spriteSheet\n\t * @return {Object}\n\t * @protected\n\t */\n\t_getFrame (character, spriteSheet) {\n\t\tlet index = this._getFrameIndex(character, spriteSheet);\n\t\treturn index == null ? index : spriteSheet.getFrame(index);\n\t}\n\n\t/**\n\t * @param {easeljs.SpriteSheet} ss\n\t * @return {Number}\n\t * @protected\n\t */\n\t_getLineHeight (ss) {\n\t\tlet frame = this._getFrame(\"1\", ss) || this._getFrame(\"T\", ss) || this._getFrame(\"L\", ss) || ss.getFrame(0);\n\t\treturn frame ? frame.rect.height : 1;\n\t}\n\n\t/**\n\t * @param {easeljs.SpriteSheet} ss\n\t * @return {Number}\n\t * @protected\n\t */\n\t_getSpaceWidth (ss) {\n\t\tlet frame = this._getFrame(\"1\", ss) || this._getFrame(\"l\", ss) || this._getFrame(\"e\", ss) || this._getFrame(\"a\", ss) || ss.getFrame(0);\n\t\treturn frame ? frame.rect.width : 1;\n\t}\n\n\t_tick (evtObj) {\n\t\tlet stage = this.stage;\n\t\tstage && stage.on(\"drawstart\", this._updateText, this, true);\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_updateText () {\n\t\tlet x = 0, y = 0, o = this._oldProps, change = false, spaceW = this.spaceWidth, lineH = this.lineHeight, ss = this.spriteSheet;\n\t\tlet pool = BitmapText._spritePool, kids = this.children, childIndex = 0, numKids = kids.length, sprite;\n\n\t\tfor (let n in o) {\n\t\t\tif (o[n] != this[n]) {\n\t\t\t\to[n] = this[n];\n\t\t\t\tchange = true;\n\t\t\t}\n\t\t}\n\t\tif (!change) { return; }\n\n\t\tlet hasSpace = !!this._getFrame(\" \", ss);\n\t\tif (!hasSpace && !spaceW) { spaceW = this._getSpaceWidth(ss); }\n\t\tif (!lineH) { lineH = this._getLineHeight(ss); }\n\n\t\tfor (let i = 0, l = this.text.length; i < l; i++) {\n\t\t\tlet character = this.text.charAt(i);\n\t\t\tif (character === \" \" && !hasSpace) {\n\t\t\t\tx += spaceW;\n\t\t\t\tcontinue;\n\t\t\t} else if (character === \"\\n\" || character === \"\\r\") {\n\t\t\t\tif (character === \"\\r\" && this.text.charAt(i+1) === \"\\n\") { i++; } // crlf\n\t\t\t\tx = 0;\n\t\t\t\ty += lineH;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tlet index = this._getFrameIndex(character, ss);\n\t\t\tif (index == null) { continue; }\n\n\t\t\tif (childIndex < numKids) {\n\t\t\t\tsprite = kids[childIndex];\n\t\t\t} else {\n\t\t\t\tkids.push(sprite = pool.length ? pool.pop() : new Sprite());\n\t\t\t\tsprite.parent = this;\n\t\t\t\tnumKids++;\n\t\t\t}\n\t\t\tsprite.spriteSheet = ss;\n\t\t\tsprite.gotoAndStop(index);\n\t\t\tsprite.x = x;\n\t\t\tsprite.y = y;\n\t\t\tchildIndex++;\n\n\t\t\tx += sprite.getBounds().width + this.letterSpacing;\n\t\t}\n\n\t\twhile (numKids > childIndex) {\n\t\t\t // faster than removeChild.\n\t\t\tpool.push(sprite = kids.pop());\n\t\t\tsprite.parent = null;\n\t\t\tnumKids--;\n\t\t}\n\t\tif (pool.length > BitmapText.maxPoolSize) { pool.length = BitmapText.maxPoolSize; }\n\t}\n\n}\n\n/**\n * BitmapText uses Sprite instances to draw text. To reduce the creation and destruction of instances (and thus garbage collection), it maintains\n * an internal object pool of sprite instances to reuse. Increasing this value can cause more sprites to be\n * retained, slightly increasing memory use, but reducing instantiation.\n * @type {Number}\n * @static\n * @default 100\n */\nBitmapText.maxPoolSize = 100;\n/**\n * Sprite object pool.\n * @type {Array}\n * @static\n * @private\n * @readonly\n */\nBitmapText._spritePool = [];\n","/**\n * @license DOMElement\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport DisplayProps from \"../geom/DisplayProps\";\n\n/**\n * This class is still experimental, and more advanced use is likely to be buggy. Please report bugs.\n *\n * A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed\n * within the DOM as though it is child of the {{#crossLink \"Container\"}}{{/crossLink}} it is added to. However, it is\n * not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be\n * drawn in front of or behind the canvas).\n *\n * The position of a DOMElement is relative to their parent node in the DOM. It is recommended that\n * the DOM Object be added to a div that also contains the canvas so that they share the same position\n * on the page.\n *\n * DOMElement is useful for positioning HTML elements over top of canvas content, and for elements\n * that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML\n * content.\n *\n * Mouse Interaction
\n *\n * DOMElement instances are not full EaselJS display objects, and do not participate in EaselJS mouse\n * events or support methods like hitTest. To get mouse events from a DOMElement, you must instead add handlers to\n * the htmlElement (note, this does not support EventDispatcher)\n *\n * var domElement = new createjs.DOMElement(htmlElement);\n * domElement.htmlElement.onclick = function() {\n * console.log(\"clicked\");\n * }\n *\n * Important: This class needs to be notified it is about to be drawn, this will happen automatically\n * if you call stage.update, calling stage.draw or disabling tickEnabled will miss important steps and it will render\n * stale information.\n *\n * @memberof easeljs\n * @extends DisplayObject\n * @param {HTMLElement | String} htmlElement A reference or id for the DOM element to manage.\n */\nexport default class DOMElement extends DisplayObject {\n\n\tconstructor (htmlElement) {\n\t\tsuper();\n\n\t\tif (typeof htmlElement === \"string\") { htmlElement = document.getElementById(htmlElement); }\n\t\tthis.mouseEnabled = false;\n\n\t\tlet style = htmlElement.style;\n\t\tstyle.position = \"absolute\";\n\t\tstyle.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = \"0% 0%\";\n\n\t\t/**\n\t\t * The DOM object to manage.\n\t\t * @type {HTMLElement}\n\t\t */\n\t\tthis.htmlElement = htmlElement;\n\n\t\t/**\n\t\t * @type {easeljs.Matrix2D}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._oldProps = null;\n\n\t\t/**\n\t\t * Used to track the object which this class attached listeners to, helps optimize listener attachment.\n\t\t * @type {easeljs.Stage}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._oldStage = null;\n\t\t/**\n\t\t * The event listener proxy triggered drawing draw for special circumstances.\n\t\t * @type {Function}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._drawAction = null;\n\t}\n\n\tisVisible () {\n\t\treturn this.htmlElement != null;\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\t// this relies on the _tick method because draw isn't called if the parent is not visible.\n\t\t// the actual update happens in _handleDrawEnd\n\t\treturn true;\n\t}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tcache () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tuncache () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tupdateCache () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\thitTest () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tlocalToGlobal () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tglobalToLocal () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tlocalToLocal () {}\n\n\t/**\n\t * DOMElement cannot be cloned.\n\t * @throws DOMElement cannot be cloned\n\t */\n\tclone () {\n\t\tthrow \"DOMElement cannot be cloned.\";\n\t}\n\n\t_tick (evtObj) {\n\t\tlet stage = this.stage;\n\t\tif (stage != null && stage !== this._oldStage) {\n\t\t\tthis._drawAction && stage.off(\"drawend\", this._drawAction);\n\t\t\tthis._drawAction = stage.on(\"drawend\", this._handleDrawEnd, this);\n\t\t\tthis._oldStage = stage;\n\t\t}\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * @param {core.Event} evt\n\t * @protected\n\t */\n\t_handleDrawEnd (evt) {\n\t\tlet o = this.htmlElement;\n\t\tif (!o) { return; }\n\t\tlet style = o.style;\n\n\t\tlet props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;\n\n\t\tlet visibility = props.visible ? \"visible\" : \"hidden\";\n\t\tif (visibility != style.visibility) { style.visibility = visibility; }\n\t\tif (!props.visible) { return; }\n\n\t\tlet oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;\n\t\tlet n = 10000; // precision\n\n\t\tif (!oldMtx || !oldMtx.equals(mtx)) {\n\t\t\tlet str = \"matrix(\" + (mtx.a*n|0)/n +\",\"+ (mtx.b*n|0)/n +\",\"+ (mtx.c*n|0)/n +\",\"+ (mtx.d*n|0)/n +\",\"+ (mtx.tx+0.5|0);\n\t\t\tstyle.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +\",\"+ (mtx.ty+0.5|0) +\")\";\n\t\t\tstyle.MozTransform = str +\"px,\"+ (mtx.ty+0.5|0) +\"px)\";\n\t\t\tif (!oldProps) { oldProps = this._oldProps = new DisplayProps(true, null); }\n\t\t\toldProps.matrix.copy(mtx);\n\t\t}\n\n\t\tif (oldProps.alpha != props.alpha) {\n\t\t\tstyle.opacity = \"\"+(props.alpha*n|0)/n;\n\t\t\toldProps.alpha = props.alpha;\n\t\t}\n\t}\n\n}\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#click\n */\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#dblClick\n */\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#mousedown\n */\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#mouseover\n */\n\n/**\n * Disabled in DOMElement.\n * @event easeljs.DOMElement#tick\n */\n","/**\n * @license Graphics\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport createCanvas from \"../utils/Canvas\";\n\n/**\n * The Graphics class exposes an easy to use API for generating vector drawing instructions and drawing them to a\n * specified context. Note that you can use Graphics without any dependency on the EaselJS framework by calling {@link easeljs.Graphics#draw}\n * directly, or it can be used with the {@link easeljs.Shape} object to draw vector graphics within the\n * context of an EaselJS display list.\n *\n * There are two approaches to working with Graphics object: calling methods on a Graphics instance (the \"Graphics API\"), or\n * instantiating Graphics command objects and adding them to the graphics queue via {@link easeljs.Graphics#append}.\n * The former abstracts the latter, simplifying beginning and ending paths, fills, and strokes.\n *\n * Tiny API
\n * The Graphics class also includes a \"tiny API\", which is one or two-letter methods that are shortcuts for all of the\n * Graphics methods. These methods are great for creating compact instructions, and is used by the Toolkit for CreateJS\n * to generate readable code. All tiny methods are marked as protected, so you can view them by enabling protected\n * descriptions in the docs.\n *\n * \n * Tiny Method Tiny Method mt {@link easeljs.Graphics#moveTo} \n * lt {@link easeljs.Graphics#lineTo} a/at {@link easeljs.Graphics#arc} / {@link easeljs.Graphics#arcTo} \n * bt {@link easeljs.Graphics#bezierCurveTo} qt {@link easeljs.Graphics#quadraticCurveTo} (also curveTo) \n * r {@link easeljs.Graphics#rect} cp {@link easeljs.Graphics#closePath} \n * c {@link easeljs.Graphics#clear} f {@link easeljs.Graphics#beginFill} \n * lf {@link easeljs.Graphics#beginLinearGradientFill} rf {@link easeljs.Graphics#beginRadialGradientFill} \n * bf {@link easeljs.Graphics#beginBitmapFill} ef {@link easeljs.Graphics#endFill} \n * ss / sd {@link easeljs.Graphics#setStrokeStyle} / {@link easeljs.Graphics#setStrokeDash} s {@link easeljs.Graphics#beginStroke} \n * ls {@link easeljs.Graphics#beginLinearGradientStroke} rs {@link easeljs.Graphics#beginRadialGradientStroke} \n * bs {@link easeljs.Graphics#beginBitmapStroke} es {@link easeljs.Graphics#endStroke} \n * dr {@link easeljs.Graphics#drawRect} rr {@link easeljs.Graphics#drawRoundRect} \n * rc {@link easeljs.Graphics#drawRoundRectComplex} dc {@link easeljs.Graphics#drawCircle} \n * de {@link easeljs.Graphics#drawEllipse} dp {@link easeljs.Graphics#drawPolyStar} \n * p {@link easeljs.Graphics#decodePath}
\n *\n * @example\n * var g = new createjs.Graphics();\n * g.setStrokeStyle(1);\n * g.beginStroke(\"#000000\");\n * g.beginFill(\"red\");\n * g.drawCircle(0,0,30);\n *\n * @example\n * // All drawing methods in Graphics return the Graphics instance, so they can be chained together.\n * graphics.beginStroke(\"red\").beginFill(\"blue\").drawRect(20, 20, 100, 50);\n *\n * @example\n * // Each graphics API call generates a command object (see below). The last command to be created can be accessed via .command\n * let fillCommand = graphics.beginFill(\"red\").command;\n * fillCommand.style = \"blue\";\n * // or change it to a bitmap fill:\n * fillCommand.bitmap(img);\n *\n * @example\n * // For more direct control of rendering, you can instantiate and append command objects to the graphics queue directly.\n * // In this case, you need to manage path creation manually, and ensure that fill/stroke is applied to a defined path:\n *\n * // start a new path. Graphics.beginCmd is a reusable BeginPath instance:\n * graphics.append(Graphics.beginCmd);\n * // we need to define the path before applying the fill:\n * let circle = new Graphics.Circle(0,0,30);\n * graphics.append(circle);\n * // fill the path we just defined:\n * let fill = new Graphics.Fill(\"red\");\n * graphics.append(fill);\n *\n * // These approaches can be used together, for example to insert a custom command:\n * graphics.beginFill(\"red\");\n * let customCommand = new CustomSpiralCommand(etc);\n * graphics.append(customCommand);\n * graphics.beginFill(\"blue\");\n * graphics.drawCircle(0, 0, 30);\n *\n * @example Using the Tiny API \n * graphics.s(\"red\").f(\"blue\").r(20, 20, 100, 50);\n *\n * @see {@link easeljs.Graphics#append}\n * @memberof easeljs\n */\nexport default class Graphics {\n\n\tconstructor () {\n\t\t/**\n\t\t * Holds a reference to the last command that was created or appended. For example, you could retain a reference\n\t\t * to a Fill command in order to dynamically update the color later by using:\n\t\t *\n\t\t * @example\n\t\t * let fill = graphics.beginFill(\"red\").command;\n\t\t * // update color later:\n\t\t * fill.style = \"yellow\";\n\t\t *\n\t\t * @type {Object}\n\t\t * @default null\n\t\t */\n\t\tthis.command = null;\n\n\n\t// private properties\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.Stroke}\n\t\t */\n\t\tthis._stroke = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeStyle}\n\t\t */\n\t\tthis._strokeStyle = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeStyle}\n\t\t */\n\t\tthis._oldStrokeStyle = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeDash}\n\t\t */\n\t\tthis._strokeDash = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeDash}\n\t\t */\n\t\tthis._oldStrokeDash = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.Fill}\n\t\t */\n\t\tthis._fill = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis._strokeIgnoreScale = false;\n\n\t\t/**\n\t\t * Indicates the last instruction index that was committed.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._commitIndex = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._instructions = [];\n\n\t\t/**\n\t\t * Uncommitted instructions.\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._activeInstructions = [];\n\n\t\t/**\n\t\t * This indicates that there have been changes to the activeInstruction list since the last updateInstructions call.\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._dirty = false;\n\n\t\t/**\n\t\t * Index to draw from if a store operation has happened.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._storeIndex = 0;\n\n\t\t/**\n\t\t * Maps the familiar ActionScript `curveTo()` method to the functionally similar {@link easeljs.Graphics#quadraticCurveTo} method.\n\t\t * @param {Number} cpx\n\t\t * @param {Number} cpy\n\t\t * @param {Number} x\n\t\t * @param {Number} y\n\t\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t\t * @chainable\n\t\t */\n\t\tthis.curveTo = this.quadraticCurveTo;\n\n\t\t/**\n\t\t * Maps the familiar ActionScript `drawRect()` method to the functionally similar {@link easeljs.Graphics#rect} method.\n\t\t * @param {Number} x\n\t\t * @param {Number} y\n\t\t * @param {Number} w Width of the rectangle\n\t\t * @param {Number} h Height of the rectangle\n\t\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t\t * @chainable\n\t\t */\n\t\tthis.drawRect = this.rect;\n\n\t\t// tiny api\n\t\tthis.mt = this.moveTo;\n\t\tthis.lt = this.lineTo;\n\t\tthis.at = this.arcTo;\n\t\tthis.bt = this.bezierCurveTo;\n\t\tthis.qt = this.quadraticCurveTo;\n\t\tthis.a = this.arc;\n\t\tthis.r = this.rect;\n\t\tthis.cp = this.closePath;\n\t\tthis.c = this.clear;\n\t\tthis.f = this.beginFill;\n\t\tthis.lf = this.beginLinearGradientFill;\n\t\tthis.rf = this.beginRadialGradientFill;\n\t\tthis.bf = this.beginBitmapFill;\n\t\tthis.ef = this.endFill;\n\t\tthis.ss = this.setStrokeStyle;\n\t\tthis.sd = this.setStrokeDash;\n\t\tthis.s = this.beginStroke;\n\t\tthis.ls = this.beginLinearGradientStroke;\n\t\tthis.rs = this.beginRadialGradientStroke;\n\t\tthis.bs = this.beginBitmapStroke;\n\t\tthis.es = this.endStroke;\n\t\tthis.dr = this.drawRect;\n\t\tthis.rr = this.drawRoundRect;\n\t\tthis.rc = this.drawRoundRectComplex;\n\t\tthis.dc = this.drawCircle;\n\t\tthis.de = this.drawEllipse;\n\t\tthis.dp = this.drawPolyStar;\n\t\tthis.p = this.decodePath;\n\n\t\tthis.clear();\n\t}\n\n\t/**\n\t * Returns a CSS compatible color string based on the specified RGB numeric color values in the format\n\t * \"rgba(255,255,255,1.0)\", or if alpha is null then in the format \"rgb(255,255,255)\".\n\t * It also supports passing a single hex color value as the first param, and an optional alpha value as the second\n\t * param.\n\t *\n\t * @example\n\t * Graphics.getRGB(50, 100, 150, 0.5); // rgba(50,100,150,0.5)\n\t * Graphics.getRGB(0xFF00FF, 0.2); // rgba(255,0,255,0.2)\n\t *\n\t * @static\n\t * @param {Number} r The red component for the color, between 0 and 0xFF (255).\n\t * @param {Number} g The green component for the color, between 0 and 0xFF (255).\n\t * @param {Number} b The blue component for the color, between 0 and 0xFF (255).\n\t * @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.\n\t * @return {String} A CSS compatible color string based on the specified RGB numeric color values in the format\n\t * \"rgba(255,255,255,1.0)\", or if alpha is null then in the format \"rgb(255,255,255)\".\n\t */\n\tstatic getRGB (r, g, b, alpha) {\n\t\tif (r != null && b == null) {\n\t\t\talpha = g;\n\t\t\tb = r&0xFF;\n\t\t\tg = r>>8&0xFF;\n\t\t\tr = r>>16&0xFF;\n\t\t}\n\t\tif (alpha == null) {\n\t\t\treturn `rgb(${r},${g},${b})`;\n\t\t} else {\n\t\t\treturn `rgba(${r},${g},${b},${alpha})`;\n\t\t}\n\t}\n\n\t/**\n\t * Returns a CSS compatible color string based on the specified HSL numeric color values in the format \"hsla(360,100,100,1.0)\",\n\t * or if alpha is null then in the format \"hsl(360,100,100)\".\n\t *\n\t * @example\n\t * Graphics.getHSL(150, 100, 70); // hsl(150,100,70)\n\t *\n\t * @static\n\t * @param {Number} hue The hue component for the color, between 0 and 360.\n\t * @param {Number} saturation The saturation component for the color, between 0 and 100.\n\t * @param {Number} lightness The lightness component for the color, between 0 and 100.\n\t * @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.\n\t * @return {String} A CSS compatible color string based on the specified HSL numeric color values in the format\n\t * \"hsla(360,100,100,1.0)\", or if alpha is null then in the format \"hsl(360,100,100)\".\n\t */\n\tstatic getHSL (hue, saturation, lightness, alpha) {\n\t\tif (alpha == null) {\n\t\t\treturn `hsl(${hue % 360},${saturation}%,${lightness}%)`;\n\t\t} else {\n\t\t\treturn `hsl(${hue % 360},${saturation}%,${lightness}%,${alpha})`;\n\t\t}\n\t}\n\n\t/**\n\t * Returns the graphics instructions array. Each entry is a graphics command object (ex. Graphics.Fill, Graphics.Rect)\n\t * Modifying the returned array directly is not recommended, and is likely to result in unexpected behaviour.\n\t *\n\t * This property is mainly intended for introspection of the instructions (ex. for graphics export).\n\t * @type {Array}\n\t * @readonly\n\t */\n\tget instructions () {\n\t\tthis._updateInstructions();\n\t\treturn this._instructions;\n\t}\n\n\t/**\n\t * Returns true if this Graphics instance has no drawing commands.\n\t * @return {Boolean} Returns true if this Graphics instance has no drawing commands.\n\t */\n\tisEmpty () {\n\t\treturn !(this._instructions.length || this._activeInstructions.length);\n\t}\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t *\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Object} data Optional data that is passed to graphics command exec methods. When called from a Shape instance, the shape passes itself as the data parameter. This can be used by custom graphic commands to insert contextual data.\n\t */\n\tdraw (ctx, data) {\n\t\tthis._updateInstructions();\n\t\tlet instr = this._instructions;\n\t\tconst l = instr.length;\n\t\tfor (let i = this._storeIndex; i < l; i++) {\n\t\t\tinstr[i].exec(ctx, data);\n\t\t}\n\t}\n\n\t/**\n\t * Draws only the path described for this Graphics instance, skipping any non-path instructions, including fill and\n\t * stroke descriptions. Used for `DisplayObject.mask` to draw the clipping path, for example.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t *\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t */\n\tdrawAsPath (ctx) {\n\t\tthis._updateInstructions();\n\t\tlet instr, instrs = this._instructions;\n\t\tconst l = instrs.length;\n\t\tfor (let i = this._storeIndex; i < l; i++) {\n\t\t\t// the first command is always a beginPath command.\n\t\t\tif ((instr = instrs[i]).path !== false) { instr.exec(ctx); }\n\t\t}\n\t}\n\n\t/**\n\t * Moves the drawing point to the specified position.\n\t * A tiny API method \"mt\" also exists.\n\t * @param {Number} x The x coordinate the drawing point should move to.\n\t * @param {Number} y The y coordinate the drawing point should move to.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls).\n\t * @chainable\n\t */\n\tmoveTo (x, y) {\n\t\treturn this.append(new MoveTo(x,y), true);\n\t}\n\n\t/**\n\t * Draws a line from the current drawing point to the specified position, which become the new current drawing\n\t * point. Note that you *must* call {@link easeljs.Graphics#moveTo} before the first `lineTo()`.\n\t * A tiny API method \"lt\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-(paths) \"WHATWG spec\"}\n\t * @param {Number} x The x coordinate the drawing point should draw to.\n\t * @param {Number} y The y coordinate the drawing point should draw to.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tlineTo (x, y) {\n\t\treturn this.append(new LineTo(x,y));\n\t}\n\n\t/**\n\t * Draws an arc with the specified control points and radius.\n\t * A tiny API method \"at\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arcto \"WHATWG spec\"}\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} x2\n\t * @param {Number} y2\n\t * @param {Number} radius\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tarcTo (x1, y1, x2, y2, radius) {\n\t\treturn this.append(new ArcTo(x1, y1, x2, y2, radius));\n\t}\n\n\t/**\n\t * Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y).\n\t * A tiny API method \"a\" also exists.\n\t *\n\t * @example\n\t * // draw a full circle with a radius of 20 centered at (100, 100)\n\t * arc(100, 100, 20, 0, Math.PI*2);\n\t *\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arc \"WHATWG spec\"}\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} radius\n\t * @param {Number} startAngle Measured in radians.\n\t * @param {Number} endAngle Measured in radians.\n\t * @param {Boolean} anticlockwise\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tarc (x, y, radius, startAngle, endAngle, anticlockwise) {\n\t\treturn this.append(new Arc(x, y, radius, startAngle, endAngle, anticlockwise));\n\t}\n\n\t/**\n\t * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy).\n\t * A tiny API method \"qt\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-quadraticcurveto \"WHATWG spec\"}\n\t * @param {Number} cpx\n\t * @param {Number} cpy\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tquadraticCurveTo (cpx, cpy, x, y) {\n\t\treturn this.append(new QuadraticCurveTo(cpx, cpy, x, y));\n\t}\n\n\t/**\n\t * Draws a bezier curve from the current drawing point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y).\n\t * A tiny API method \"bt\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-beziercurveto \"WHATWG spec\"}\n\t * @param {Number} cp1x\n\t * @param {Number} cp1y\n\t * @param {Number} cp2x\n\t * @param {Number} cp2y\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) {\n\t\treturn this.append(new BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y));\n\t}\n\n\t/**\n\t * Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke.\n\t * A tiny API method \"r\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-rect \"WHATWG spec\"}\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w Width of the rectangle\n\t * @param {Number} h Height of the rectangle\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\trect (x, y, w, h) {\n\t\treturn this.append(new Rect(x, y, w, h));\n\t}\n\n\t/**\n\t * Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified\n\t * since the fill or stroke was last set.\n\t * A tiny API method \"cp\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tclosePath () {\n\t\treturn this._activeInstructions.length ? this.append(new ClosePath()) : this;\n\t}\n\n\t/**\n\t * Clears all drawing instructions, effectively resetting this Graphics instance. Any line and fill styles will need\n\t * to be redefined to draw shapes following a clear call.\n\t * A tiny API method \"c\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tclear () {\n\t\tthis._instructions.length = this._activeInstructions.length = this._commitIndex = 0;\n\t\tthis._strokeStyle = this._oldStrokeStyle = this._stroke = this._fill = this._strokeDash = this._oldStrokeDash = null;\n\t\tthis._dirty = this._strokeIgnoreScale = false;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Begins a fill with the specified color. This ends the current sub-path.\n\t * A tiny API method \"f\" also exists.\n\t * @param {String} color A CSS compatible color value (ex. \"red\", \"#FF0000\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no fill.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginFill (color) {\n\t\treturn this._setFill(color ? new Fill(color) : null);\n\t}\n\n\t/**\n\t * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1).\n\t * A tiny API method \"lf\" also exists.\n\t *\n\t * @example Define a black to white vertical gradient ranging from 20px to 120px, and draw a square to display it \n\t * graphics.beginLinearGradientFill([\"#000\",\"#FFF\"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define a gradient\n\t * drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw\n\t * the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginLinearGradientFill (colors, ratios, x0, y0, x1, y1) {\n\t\treturn this._setFill(new Fill().linearGradient(colors, ratios, x0, y0, x1, y1));\n\t}\n\n\t/**\n\t * Begins a radial gradient fill. This ends the current sub-path.\n\t * A tiny API method \"rf\" also exists.\n\t *\n\t * @example Define a red to blue radial gradient centered at (100, 100), with a radius of 50, and draw a circle to display it \n\t * graphics.beginRadialGradientFill([\"#F00\",\"#00F\"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginRadialGradientFill (colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\treturn this._setFill(new Fill().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));\n\t}\n\n\t/**\n\t * Begins a pattern fill using the specified image. This ends the current sub-path.\n\t * A tiny API method \"bf\" also exists.\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} repetition Optional. Indicates whether to repeat the image in the fill area. One of \"repeat\",\n\t * \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\". Note that Firefox does not support \"repeat-x\" or\n\t * \"repeat-y\" (latest tests were in FF 20.0), and will default to \"repeat\".\n\t * @param {easeljs.Matrix2D} matrix Optional. Specifies a transformation matrix for the bitmap fill. This transformation\n\t * will be applied relative to the parent transform.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginBitmapFill (image, repetition, matrix) {\n\t\treturn this._setFill(new Fill(null, matrix).bitmap(image, repetition));\n\t}\n\n\t/**\n\t * Ends the current sub-path, and begins a new one with no fill. Functionally identical to `beginFill(null)`.\n\t * A tiny API method \"ef\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tendFill () {\n\t\treturn this.beginFill();\n\t}\n\n\t/**\n\t * Sets the stroke style.\n\t * A tiny API method \"ss\" also exists.\n\t *\n\t * @example\n\t * graphics.setStrokeStyle(8,\"round\").beginStroke(\"#F00\");\n\t *\n\t * @param {Number} thickness The width of the stroke.\n\t * @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt,\n\t * round, or square. Defaults to \"butt\". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with\n\t * the tiny API.\n\t * @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet.\n\t * One of bevel, round, or miter. Defaults to \"miter\". Also accepts the values 0 (miter), 1 (round), and 2 (bevel)\n\t * for use with the tiny API.\n\t * @param {Number} [miterLimit=10] If joints is set to \"miter\", then you can specify a miter limit ratio which\n\t * controls at what point a mitered joint will be clipped.\n\t * @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless\n\t * of active transformations.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tsetStrokeStyle (thickness, caps = 0, joints = 0, miterLimit = 10, ignoreScale = false) {\n\t\tthis._updateInstructions(true);\n\t\tthis._strokeStyle = this.command = new StrokeStyle(thickness, caps, joints, miterLimit, ignoreScale);\n\n\t\t// ignoreScale lives on Stroke, not StrokeStyle, so we do a little trickery:\n\t\tif (this._stroke) { this._stroke.ignoreScale = ignoreScale; }\n\t\tthis._strokeIgnoreScale = ignoreScale;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets or clears the stroke dash pattern.\n\t * A tiny API method `sd` also exists.\n\t *\n\t * @example\n\t * graphics.setStrokeDash([20, 10], 0);\n\t *\n\t * @param {Array} [segments] An array specifying the dash pattern, alternating between line and gap.\n\t * For example, `[20,10]` would create a pattern of 20 pixel lines with 10 pixel gaps between them.\n\t * Passing null or an empty array will clear the existing stroke dash.\n\t * @param {Number} [offset=0] The offset of the dash pattern. For example, you could increment this value to create a \"marching ants\" effect.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tsetStrokeDash (segments, offset = 0) {\n\t\tthis._updateInstructions(true);\n\t\tthis._strokeDash = this.command = new StrokeDash(segments, offset);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Begins a stroke with the specified color. This ends the current sub-path.\n\t * A tiny API method \"s\" also exists.\n\t *\n\t * @param {String} color A CSS compatible color value (ex. \"#FF0000\", \"red\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no stroke.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginStroke (color) {\n\t\treturn this._setStroke(color ? new Stroke(color) : null);\n\t}\n\n\t/**\n\t * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path.\n\t * A tiny API method \"ls\" also exists.\n\t *\n\t * @example Define a black to white vertical gradient ranging from 20px to 120px, and draw a square to display it \n\t * graphics.setStrokeStyle(10)\n\t * .beginLinearGradientStroke([\"#000\",\"#FFF\"], [0, 1], 0, 20, 0, 120)\n\t * .drawRect(20, 20, 120, 120);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginLinearGradientStroke (colors, ratios, x0, y0, x1, y1) {\n\t\treturn this._setStroke(new Stroke().linearGradient(colors, ratios, x0, y0, x1, y1));\n\t}\n\n\t/**\n\t * Begins a radial gradient stroke. This ends the current sub-path.\n\t * A tiny API method \"rs\" also exists.\n\t *\n\t * @example Define a red to blue radial gradient centered at (100, 100), with a radius of 50, and draw a rectangle to display it \n\t * graphics.setStrokeStyle(10)\n\t * .beginRadialGradientStroke([\"#F00\",\"#00F\"], [0, 1], 100, 100, 0, 100, 100, 50)\n\t * .drawRect(50, 90, 150, 110);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color\n\t * to 100%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginRadialGradientStroke (colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\treturn this._setStroke(new Stroke().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));\n\t}\n\n\t/**\n\t * Begins a pattern fill using the specified image. This ends the current sub-path. Note that unlike bitmap fills,\n\t * strokes do not currently support a matrix parameter due to limitations in the canvas API.\n\t * A tiny API method \"bs\" also exists.\n\t *\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} [repetition=\"repeat\"] Indicates whether to repeat the image in the fill area. One of\n\t * \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\".\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginBitmapStroke (image, repetition = \"repeat\") {\n\t\t// NOTE: matrix is not supported for stroke because transforms on strokes also affect the drawn stroke width.\n\t\treturn this._setStroke(new Stroke().bitmap(image, repetition));\n\t}\n\n\t/**\n\t * Ends the current sub-path, and begins a new one with no stroke. Functionally identical to `beginStroke(null)`.\n\t * A tiny API method \"es\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tendStroke () {\n\t\treturn this.beginStroke();\n\t}\n\n\t/**\n\t * Draws a rounded rectangle with all corners with the specified radius.\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w\n\t * @param {Number} h\n\t * @param {Number} radius Corner radius.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawRoundRect (x, y, w, h, radius) {\n\t\treturn this.drawRoundRectComplex(x, y, w, h, radius, radius, radius, radius);\n\t}\n\n\t/**\n\t * Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii.\n\t * A tiny API method \"rc\" also exists.\n\t * @param {Number} x The horizontal coordinate to draw the round rect.\n\t * @param {Number} y The vertical coordinate to draw the round rect.\n\t * @param {Number} w The width of the round rect.\n\t * @param {Number} h The height of the round rect.\n\t * @param {Number} radiusTL Top left corner radius.\n\t * @param {Number} radiusTR Top right corner radius.\n\t * @param {Number} radiusBR Bottom right corner radius.\n\t * @param {Number} radiusBL Bottom left corner radius.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawRoundRectComplex (x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {\n\t\treturn this.append(new RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL));\n\t}\n\n\t/**\n\t * Draws a circle with the specified radius at (x, y).\n\t * A tiny API method \"dc\" also exists.\n\t *\n\t * @example\n\t * let g = new Graphics();\n\t * g.setStrokeStyle(1);\n\t * g.beginStroke(Graphics.getRGB(0,0,0));\n\t * g.beginFill(Graphics.getRGB(255,0,0));\n\t * g.drawCircle(0,0,3);\n\t * let s = new Shape(g);\n\t * s.x = 100;\n\t * s.y = 100;\n\t * stage.addChild(s);\n\t * stage.update();\n\t *\n\t * @param {Number} x x coordinate center point of circle.\n\t * @param {Number} y y coordinate center point of circle.\n\t * @param {Number} radius Radius of circle.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawCircle (x, y, radius) {\n\t\treturn this.append(new Circle(x, y, radius));\n\t}\n\n\t/**\n\t * Draws an ellipse (oval) with a specified width (w) and height (h). Similar to {@link easels.Graphics#drawCircle},\n\t * except the width and height can be different.\n\t * A tiny API method \"de\" also exists.\n\t * @param {Number} x The left coordinate point of the ellipse. Note that this is different from {@link easels.Graphics#drawCircle}\n\t * which draws from center.\n\t * @param {Number} y The top coordinate point of the ellipse. Note that this is different from {@link easels.Graphics#drawCircle}\n\t * which draws from the center.\n\t * @param {Number} w The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this\n\t * number.\n\t * @param {Number} h The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawEllipse (x, y, w, h) {\n\t\treturn this.append(new Ellipse(x, y, w, h));\n\t}\n\n\t/**\n\t * Draws a star if pointSize is greater than 0, or a regular polygon if pointSize is 0 with the specified number of points.\n\t * A tiny API method \"dp\" also exists.\n\t *\n\t * @example Draw a 5 pointed star shape centered at 100, 100 and with a radius of 50 \n\t * graphics.beginFill(\"#FF0\").drawPolyStar(100, 100, 50, 5, 0.6, -90);\n\t * // Note: -90 makes the first point vertical\n\t *\n\t * @param {Number} x Position of the center of the shape.\n\t * @param {Number} y Position of the center of the shape.\n\t * @param {Number} radius The outer radius of the shape.\n\t * @param {Number} sides The number of points on the star or sides on the polygon.\n\t * @param {Number} pointSize The depth or \"pointy-ness\" of the star points. A pointSize of 0 will draw a regular\n\t * polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.\n\t * @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point\n\t * directly to the right of the center.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawPolyStar (x, y, radius, sides, pointSize, angle) {\n\t\treturn this.append(new PolyStar(x, y, radius, sides, pointSize, angle));\n\t}\n\n\t/**\n\t * Appends a graphics command object to the graphics queue. Command objects expose an \"exec\" method\n\t * that accepts two parameters: the Context2D to operate on, and an arbitrary data object passed into\n\t * {@link easeljs.Graphics#draw}. The latter will usually be the Shape instance that called draw.\n\t *\n\t * This method is used internally by Graphics methods, such as drawCircle, but can also be used directly to insert\n\t * built-in or custom graphics commands.\n\t *\n\t * @example\n\t * // attach data to our shape, so we can access it during the draw:\n\t * shape.color = \"red\";\n\t *\n\t * // append a Circle command object:\n\t * shape.graphics.append(new Graphics.Circle(50, 50, 30));\n\t *\n\t * // append a custom command object with an exec method that sets the fill style\n\t * // based on the shape's data, and then fills the circle.\n\t * shape.graphics.append({\n\t * exec: (ctx, shape) => {\n\t * ctx.fillStyle = shape.color;\n\t * ctx.fill();\n\t * }\n\t * });\n\t *\n\t * @param {Object} command A graphics command object exposing an \"exec\" method.\n\t * @param {Boolean} clean The clean param is primarily for internal use. A value of true indicates that a command does not generate a path that should be stroked or filled.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tappend (command, clean) {\n\t\tthis._activeInstructions.push(command);\n\t\tthis.command = command;\n\t\tif (!clean) { this._dirty = true; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Decodes a compact encoded path string into a series of draw instructions.\n\t * This format is not intended to be human readable, and is meant for use by authoring tools.\n\t * The format uses a base64 character set, with each character representing 6 bits, to define a series of draw\n\t * commands.\n\t *\n\t * Each command is comprised of a single \"header\" character followed by a variable number of alternating x and y\n\t * position values. Reading the header bits from left to right (most to least significant): bits 1 to 3 specify the\n\t * type of operation (0-moveTo, 1-lineTo, 2-quadraticCurveTo, 3-bezierCurveTo, 4-closePath, 5-7 unused). Bit 4\n\t * indicates whether position values use 12 bits (2 characters) or 18 bits (3 characters), with a one indicating the\n\t * latter. Bits 5 and 6 are currently unused.\n\t *\n\t * Following the header is a series of 0 (closePath), 2 (moveTo, lineTo), 4 (quadraticCurveTo), or 6 (bezierCurveTo)\n\t * parameters. These parameters are alternating x/y positions represented by 2 or 3 characters (as indicated by the\n\t * 4th bit in the command char). These characters consist of a 1 bit sign (1 is negative, 0 is positive), followed\n\t * by an 11 (2 char) or 17 (3 char) bit integer value. All position values are in tenths of a pixel. Except in the\n\t * case of move operations which are absolute, this value is a delta from the previous x or y position (as\n\t * appropriate).\n\t *\n\t * For example, the string \"A3cAAMAu4AAA\" represents a line starting at -150,0 and ending at 150,0.\n\t *
A - bits 000000. First 3 bits (000) indicate a moveTo operation. 4th bit (0) indicates 2 chars per\n\t * parameter.\n\t *
n0 - 110111011100. Absolute x position of -150.0px. First bit indicates a negative value, remaining bits\n\t * indicate 1500 tenths of a pixel.\n\t *
AA - 000000000000. Absolute y position of 0.\n\t *
I - 001100. First 3 bits (001) indicate a lineTo operation. 4th bit (1) indicates 3 chars per parameter.\n\t *
Au4 - 000000101110111000. An x delta of 300.0px, which is added to the previous x value of -150.0px to\n\t * provide an absolute position of +150.0px.\n\t *
AAA - 000000000000000000. A y delta value of 0.\n\t *\n\t * A tiny API method \"p\" also exists.\n\t *\n\t * @param {String} str The path string to decode.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdecodePath (str) {\n\t\tlet instructions = [this.moveTo, this.lineTo, this.quadraticCurveTo, this.bezierCurveTo, this.closePath];\n\t\tlet paramCount = [2, 2, 4, 6, 0];\n\t\tlet i = 0;\n\t\tconst l = str.length;\n\t\tlet params = [];\n\t\tlet x = 0, y = 0;\n\t\tlet base64 = Graphics._BASE_64;\n\n\t\twhile (i < l) {\n\t\t\tlet c = str.charAt(i);\n\t\t\tlet n = base64[c];\n\t\t\tlet fi = n>>3; // highest order bits 1-3 code for operation.\n\t\t\tlet f = instructions[fi];\n\t\t\t// check that we have a valid instruction & that the unused bits are empty:\n\t\t\tif (!f || (n&3)) { throw `Bad path data (@${i}):c`; }\n\t\t\tconst pl = paramCount[fi];\n\t\t\tif (!fi) { x=y=0; } // move operations reset the position.\n\t\t\tparams.length = 0;\n\t\t\ti++;\n\t\t\tlet charCount = (n>>2&1)+2; // 4th header bit indicates number size for this operation.\n\t\t\tfor (let p = 0; p < pl; p++) {\n\t\t\t\tlet num = base64[str.charAt(i)];\n\t\t\t\tlet sign = (num>>5) ? -1 : 1;\n\t\t\t\tnum = ((num&31)<<6)|(base64[str.charAt(i+1)]);\n\t\t\t\tif (charCount === 3) { num = (num<<6)|(base64[str.charAt(i+2)]); }\n\t\t\t\tnum = sign*num/10;\n\t\t\t\tif (p%2) { x = (num += x); }\n\t\t\t\telse { y = (num += y); }\n\t\t\t\tparams[p] = num;\n\t\t\t\ti += charCount;\n\t\t\t}\n\t\t\tf.apply(this, params);\n\t\t}\n\t\treturn this;\n\t}\n\n\t/**\n\t * Stores all graphics commands so they won't be executed in future draws. Calling store() a second time adds to\n\t * the existing store. This also affects `drawAsPath()`.\n\t *\n\t * This is useful in cases where you are creating vector graphics in an iterative manner (ex. generative art), so\n\t * that only new graphics need to be drawn (which can provide huge performance benefits), but you wish to retain all\n\t * of the vector instructions for later use (ex. scaling, modifying, or exporting).\n\t *\n\t * Note that calling store() will force the active path (if any) to be ended in a manner similar to changing\n\t * the fill or stroke.\n\t *\n\t * For example, consider a application where the user draws lines with the mouse. As each line segment (or collection of\n\t * segments) are added to a Shape, it can be rasterized using {@link easeljs.DisplayObject#updateCache},\n\t * and then stored, so that it can be redrawn at a different scale when the application is resized, or exported to SVGraphics.\n\t *\n\t * @example\n\t * // set up cache:\n\t * shape.cache(0,0,500,500,scale);\n\t *\n\t * // when the user drags, draw a new line:\n\t * shape.graphics.moveTo(oldX,oldY).lineTo(newX,newY);\n\t * // then draw it into the existing cache:\n\t * shape.updateCache(\"source-over\");\n\t * // store the new line, so it isn't redrawn next time:\n\t * shape.store();\n\t *\n\t * // then, when the window resizes, we can re-render at a different scale:\n\t * // first, unstore all our lines:\n\t * shape.unstore();\n\t * // then cache using the new scale:\n\t * shape.cache(0,0,500,500,newScale);\n\t * // finally, store the existing commands again:\n\t * shape.store();\n\t *\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tstore () {\n\t\tthis._updateInstructions(true);\n\t\tthis._storeIndex = this._instructions.length;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Unstores any graphics commands that were previously stored using {@link easeljs.Graphics#store}\n\t * so that they will be executed in subsequent draw calls.\n\t *\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tunstore () {\n\t\tthis._storeIndex = 0;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of this Graphics instance. Note that the individual command objects are not cloned.\n\t * @return {easeljs.Graphics} A clone of the current Graphics instance.\n\t */\n\tclone () {\n\t\tlet o = new Graphics();\n\t\to.command = this.command;\n\t\to._stroke = this._stroke;\n\t\to._strokeStyle = this._strokeStyle;\n\t\to._strokeDash = this._strokeDash;\n\t\to._strokeIgnoreScale = this._strokeIgnoreScale;\n\t\to._fill = this._fill;\n\t\to._instructions = this._instructions.slice();\n\t\to._commitIndex = this._commitIndex;\n\t\to._activeInstructions = this._activeInstructions.slice();\n\t\to._dirty = this._dirty;\n\t\to._storeIndex = this._storeIndex;\n\t\treturn o;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * @param {Boolean} commit\n\t * @protected\n\t */\n\t_updateInstructions (commit) {\n\t\tlet instr = this._instructions, active = this._activeInstructions, commitIndex = this._commitIndex;\n\n\t\tif (this._dirty && active.length) {\n\t\t\tinstr.length = commitIndex; // remove old, uncommitted commands\n\t\t\tinstr.push(Graphics.beginCmd);\n\n\t\t\tconst l = active.length, ll = instr.length;\n\t\t\tinstr.length = ll+l;\n\t\t\tfor (let i = 0; i < l; i++) { instr[i+ll] = active[i]; }\n\n\t\t\tif (this._fill) { instr.push(this._fill); }\n\t\t\tif (this._stroke) {\n\t\t\t\t// doesn't need to be re-applied if it hasn't changed.\n\t\t\t\tif (this._strokeDash !== this._oldStrokeDash) {\n\t\t\t\t\tinstr.push(this._strokeDash);\n\t\t\t\t}\n\t\t\t\tif (this._strokeStyle !== this._oldStrokeStyle) {\n\t\t\t\t\tinstr.push(this._strokeStyle);\n\t\t\t\t}\n\t\t\t\tif (commit) {\n\t\t\t\t\tthis._oldStrokeDash = this._strokeDash;\n\t\t\t\t\tthis._oldStrokeStyle = this._strokeStyle;\n\t\t\t\t}\n\t\t\t\tinstr.push(this._stroke);\n\t\t\t}\n\n\t\t\tthis._dirty = false;\n\t\t}\n\n\t\tif (commit) {\n\t\t\tactive.length = 0;\n\t\t\tthis._commitIndex = instr.length;\n\t\t}\n\t};\n\n\t/**\n\t * @param {easeljs.Graphics.Fill} fill\n\t * @protected\n\t */\n\t_setFill (fill) {\n\t\tthis._updateInstructions(true);\n\t\tthis.command = this._fill = fill;\n\t\treturn this;\n\t}\n\n\t/**\n\t * @param {easeljs.Graphics.Stroke} stroke\n\t * @protected\n\t */\n\t_setStroke (stroke) {\n\t\tthis._updateInstructions(true);\n\t\tif (this.command = this._stroke = stroke) {\n\t\t\tstroke.ignoreScale = this._strokeIgnoreScale;\n\t\t}\n\t\treturn this;\n\t}\n\n\tstatic get LineTo () { return LineTo; }\n\tstatic get MoveTo () { return MoveTo; }\n\tstatic get ArcTo () { return ArcTo; }\n\tstatic get Arc () { return Arc; }\n\tstatic get QuadraticCurveTo () { return QuadraticCurveTo; }\n\tstatic get BezierCurveTo () { return BezierCurveTo; }\n\tstatic get Rect () { return Rect; }\n\tstatic get ClosePath () { return ClosePath; }\n\tstatic get BeginPath () { return BeginPath; }\n\tstatic get Fill () { return Fill; }\n\tstatic get Stroke () { return Stroke; }\n\tstatic get StrokeStyle () { return StrokeStyle; }\n\tstatic get StrokeDash () { return StrokeDash; }\n\tstatic get RoundRect () { return RoundRect; }\n\tstatic get Circle () { return Circle; }\n\tstatic get Ellipse () { return Ellipse; }\n\tstatic get PolyStar () { return PolyStar; }\n\n}\n\n/**\n * @see {@link easeljs.Graphics#lineTo}\n * @alias easeljs.Graphics.LineTo\n * @param {Number} x\n * @param {Number} y\n */\nclass LineTo {\n\tconstructor (x, y) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tctx.lineTo(this.x, this.y);\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#moveTo}\n * @alias easeljs.Graphics.MoveTo\n * @param {Number} x\n * @param {Number} y\n */\nclass MoveTo {\n \tconstructor (x, y) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n \t\tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n \t}\n\t/**\n\t * @param {CanvasRenderingContext2D} ctx\n\t */\n \texec (ctx) {\n \t\tctx.moveTo(this.x, this.y);\n \t}\n}\n\n\n/**\n * @see {@link easeljs.Graphics#arcTo}\n * @alias easeljs.Graphics.ArcTo\n * @param {Number} x1\n * @param {Number} y1\n * @param {Number} x2\n * @param {Number} y2\n * @param {Number} radius\n */\nclass ArcTo {\n \tconstructor (x1, y1, x2, y2, radius) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x1 = x1;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y1 = y1;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x2 = x2;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y2 = y2;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.arcTo(this.x1, this.y1, this.x2, this.y2, this.radius);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#arc}\n * @alias easeljs.Graphics.Arc\n * @param {Number} x\n * @param {Number} y\n * @param {Number} radius\n * @param {Number} startAngle\n * @param {Number} endAngle\n * @param {Boolean} [anticlockwise=false]\n */\nclass Arc {\n \tconstructor (x, y, radius, startAngle, endAngle, anticlockwise = false) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.startAngle = startAngle;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.endAngle = endAngle;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t \tthis.anticlockwise = anticlockwise;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle, this.anticlockwise);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#quadraticCurveTo}\n * @alias easeljs.Graphics.QuadraticCurveTo\n * @param {Number} cpx\n * @param {Number} cpy\n * @param {Number} x\n * @param {Number} y\n */\nclass QuadraticCurveTo {\n \tconstructor (cpx, cpy, x, y) {\n\t\t/**\n\t\t * @property cpx\n\t\t * @type Number\n\t\t */\n\t \tthis.cpx = cpx;\n\t\t/**\n\t\t * @property cpy\n\t\t * @type Number\n\t\t */\n\t\tthis.cpy = cpy;\n\t\t/**\n\t\t * @property x\n\t\t * @type Number\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @property y\n\t\t * @type Number\n\t\t */\n\t\tthis.y = y;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.quadraticCurveTo(this.cpx, this.cpy, this.x, this.y);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#bezierCurveTo}\n * @alias easeljs.Graphics.BezierCurveTo\n * @param {Number} cp1x\n * @param {Number} cp1y\n * @param {Number} cp2x\n * @param {Number} cp2y\n * @param {Number} x\n * @param {Number} y\n */\nclass BezierCurveTo {\n \tconstructor (cp1x, cp1y, cp2x, cp2y, x, y) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.cp1x = cp1x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.cp1y = cp1y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.cp2x = cp2x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.cp2y = cp2y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.bezierCurveTo(this.cp1x, this.cp1y, this.cp2x, this.cp2y, this.x, this.y);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#rect}\n * @alias easeljs.Graphics.Rect\n * @param {Number} x\n * @param {Number} y\n * @param {Number} w\n * @param {Number} h\n */\nclass Rect {\n \tconstructor (x, y, w, h) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.w = w;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.h = h;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.rect(this.x, this.y, this.w, this.h);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#closePath}\n * @alias easeljs.Graphics.ClosePath\n */\nclass ClosePath {\n \tconstructor () { }\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.closePath();\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#beginPath}\n * @alias easeljs.Graphics.BeginPath\n */\nclass BeginPath {\n \tconstructor () { }\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.beginPath();\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#beginFill}\n * @alias easeljs.Graphics.Fill\n * @param {Object} style A valid Context2D fillStyle.\n * @param {Matrix2D} matrix\n */\nclass Fill {\n\tconstructor (style, matrix) {\n\t\t/**\n\t\t * A valid Context2D fillStyle.\n\t\t * @type {Object}\n\t\t */\n\t\tthis.style = style;\n\t\t/**\n\t\t * @type {easeljs.Matrix2D}\n\t\t */\n\t\tthis.matrix = matrix;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.path = false;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tif (!this.style) { return; }\n\t\tctx.fillStyle = this.style;\n\t\tlet mtx = this.matrix;\n\t\tif (mtx) { ctx.save(); ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); }\n\t\tctx.fill();\n\t\tif (mtx) { ctx.restore(); }\n\t}\n\t/**\n\t * Creates a linear gradient style and assigns it to {@link easeljs.Graphics.Fill#style}.\n\t * @see {@link easeljs.Graphics#beginLinearGradientFill}\n\t * @param {Array} colors\n\t * @param {Array} ratios\n\t * @param {Number} x0\n\t * @param {Number} y0\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @return {easeljs.Graphics.Fill} Returns this Fill object for chaining or assignment.\n\t */\n\tlinearGradient (colors, ratios, x0, y0, x1, y1) {\n\t\tlet o = this.style = Graphics._ctx.createLinearGradient(x0, y0, x1, y1);\n\t\tconst l = colors.length;\n\t\tfor (let i = 0; i < l; i++) { o.addColorStop(ratios[i], colors[i]); }\n\t\to.props = {colors, ratios, x0, y0, x1, y1, type:\"linear\"};\n\t\treturn this;\n\t}\n\t/**\n\t * Creates a linear gradient style and assigns it to {@link easeljs.Graphics.Fill#style}.\n\t * @see {@link easeljs.Graphics#beginRadialGradientFill}\n\t * @param {Array} colors\n\t * @param {Array} ratios\n\t * @param {Number} x0\n\t * @param {Number} y0\n\t * @param {Number} r0\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} r1\n\t * @return {easeljs.Graphics.Fill} Returns this Fill object for chaining or assignment.\n\t */\n\tradialGradient (colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\tlet o = this.style = Graphics._ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);\n\t\tconst l = colors.length;\n\t\tfor (let i = 0; i < l; i++) { o.addColorStop(ratios[i], colors[i]); }\n\t\to.props = {colors, ratios, x0, y0, r0, x1, y1, r1, type: \"radial\"};\n\t\treturn this;\n\t}\n\t/**\n\t * Creates a linear gradient style and assigns it to {@link easeljs.Graphics.Fill#style}.\n\t * @see {@link easeljs.Graphics#beginBitmapFill}\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} [repetition=\"\"] One of: repeat, repeat-x, repeat-y, or no-repeat.\n\t * @return {easeljs.Graphics.Fill} Returns this Fill object for chaining or assignment.\n\t */\n\tbitmap (image, repetition = \"\") {\n\t\tif (image.naturalWidth || image.getContext || image.readyState >= 2) {\n\t\t\tlet o = this.style = Graphics._ctx.createPattern(image, repetition);\n\t\t\to.props = {image, repetition, type: \"bitmap\"};\n\t\t}\n\t\treturn this;\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#beginStroke}\n * @alias easeljs.Graphics.Stroke\n * @extends easeljs.Graphics.Fill\n * @param {Object} style A valid Context2D fillStyle.\n * @param {Boolean} ignoreScale\n */\nclass Stroke extends Fill {\n\tconstructor (style, ignoreScale) {\n\t\tsuper();\n\t\t/**\n\t\t * A valid Context2D strokeStyle.\n\t\t * @type {Object}\n\t\t */\n\t\tthis.style = style;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.ignoreScale = ignoreScale;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.path = false;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @override\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tif (!this.style) { return; }\n\t\tctx.strokeStyle = this.style;\n\t\tif (this.ignoreScale) { ctx.save(); ctx.setTransform(1,0,0,1,0,0); }\n\t\tctx.stroke();\n\t\tif (this.ignoreScale) { ctx.restore(); }\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#setStrokeStyle}\n * @alias easeljs.Graphics.StrokeStyle\n * @param {Number} [width=1]\n * @param {String} [caps=butt]\n * @param {String} [joints=miter]\n * @param {Number} [miterLimit=10]\n * @param {Boolean} [ignoreScale=false]\n */\nclass StrokeStyle {\n\tconstructor (width=1, caps=\"butt\", joints=\"miter\", miterLimit=10, ignoreScale=false) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.width = width;\n\t\t/**\n\t\t * One of: butt, round, square\n\t\t * @type {String}\n\t\t */\n\t\tthis.caps = caps;\n\t\t/**\n\t\t * One of: round, bevel, miter\n\t\t * @type {String}\n\t\t */\n\t\tthis.joints = joints;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.miterLimit = miterLimit;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.ignoreScale = ignoreScale;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.path = false;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tctx.lineWidth = this.width;\n\t\tctx.lineCap = (isNaN(this.caps) ? this.caps : Graphics._STROKE_CAPS_MAP[this.caps]);\n\t\tctx.lineJoin = (isNaN(this.joints) ? this.joints : Graphics._STROKE_JOINTS_MAP[this.joints]);\n\t\tctx.miterLimit = this.miterLimit;\n\t\tctx.ignoreScale = this.ignoreScale;\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#setStrokeDash}\n * @alias easeljs.Graphics.StrokeDash\n * @param {Array} [segments=[]]\n * @param {Number} [offset=0]\n */\nclass StrokeDash {\n \tconstructor (segments=[], offset=0) {\n\t\t/**\n\t\t * @type {Array}\n\t\t */\n\t \tthis.segments = segments;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.offset = offset;\n \t}\n\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tif (ctx.setLineDash) { // feature detection.\n\t \t\tctx.setLineDash(this.segments);\n\t \t\tctx.lineDashOffset = this.offset;\n\t \t}\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawRoundRectComplex}\n * @alias easeljs.Graphics.RoundRect\n * @param {Number} x\n * @param {Number} y\n * @param {Number} w\n * @param {Number} h\n * @param {Number} radiusTL\n * @param {Number} radiusTR\n * @param {Number} radiusBR\n * @param {Number} radiusBL\n */\nclass RoundRect {\n \tconstructor (x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.w = w;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.h = h;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radiusTL = radiusTL;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.radiusTR = radiusTR;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radiusBR = radiusBR;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.radiusBL = radiusBL;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tlet max = (this.w max) { rTL = max; }\n\t \tif (rTR < 0) { rTR *= (mTR=-1); }\n\t \tif (rTR > max) { rTR = max; }\n\t \tif (rBR < 0) { rBR *= (mBR=-1); }\n\t \tif (rBR > max) { rBR = max; }\n\t \tif (rBL < 0) { rBL *= (mBL=-1); }\n\t \tif (rBL > max) { rBL = max; }\n\n\t \tctx.moveTo(x+w-rTR, y);\n\t \tctx.arcTo(x+w+rTR*mTR, y-rTR*mTR, x+w, y+rTR, rTR);\n\t \tctx.lineTo(x+w, y+h-rBR);\n\t \tctx.arcTo(x+w+rBR*mBR, y+h+rBR*mBR, x+w-rBR, y+h, rBR);\n\t \tctx.lineTo(x+rBL, y+h);\n\t \tctx.arcTo(x-rBL*mBL, y+h+rBL*mBL, x, y+h-rBL, rBL);\n\t \tctx.lineTo(x, y+rTL);\n\t \tctx.arcTo(x-rTL*mTL, y-rTL*mTL, x+rTL, y, rTL);\n\t \tctx.closePath();\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawCircle}\n * @alias easeljs.Graphics.Circle\n * @param {Number} x\n * @param {Number} y\n * @param {Number} radius\n */\nclass Circle {\n \tconstructor (x, y, radius) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawEllipse}\n * @alias easeljs.Graphics.Ellipse\n * @param {Number} x\n * @param {Number} y\n * @param {Number} w\n * @param {Number} h\n */\nclass Ellipse {\n \tconstructor (x, y, w, h) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.w = w;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.h = h;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tlet x = this.x, y = this.y;\n\t \tlet w = this.w, h = this.h;\n\n\t \tlet k = 0.5522848;\n\t \tlet ox = (w / 2) * k;\n\t \tlet oy = (h / 2) * k;\n\t \tlet xe = x + w;\n\t \tlet ye = y + h;\n\t \tlet xm = x + w / 2;\n\t \tlet ym = y + h / 2;\n\n\t \tctx.moveTo(x, ym);\n\t \tctx.bezierCurveTo(x, ym-oy, xm-ox, y, xm, y);\n\t \tctx.bezierCurveTo(xm+ox, y, xe, ym-oy, xe, ym);\n\t \tctx.bezierCurveTo(xe, ym+oy, xm+ox, ye, xm, ye);\n\t \tctx.bezierCurveTo(xm-ox, ye, x, ym+oy, x, ym);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawPolyStar}\n * @alias easeljs.Graphics.PolyStar\n * @param {Number} x\n * @param {Number} y\n * @param {Number} radius\n * @param {Number} sides\n * @param {Number} [pointSize=0]\n * @param {Number} [angle=0]\n */\nclass PolyStar {\n \tconstructor (x, y, radius, sides, pointSize=0, angle=0) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.sides = sides;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.pointSize = pointSize;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.angle = angle;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tlet x = this.x, y = this.y;\n\t \tlet radius = this.radius;\n\t \tlet angle = this.angle/180*Math.PI;\n\t \tlet sides = this.sides;\n\t \tlet ps = 1-this.pointSize;\n\t \tlet a = Math.PI/sides;\n\n\t \tctx.moveTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);\n\t \tfor (let i = 0; i < sides; i++) {\n\t \t\tangle += a;\n\t \t\tif (ps != 1) {\n\t \t\t\tctx.lineTo(x+Math.cos(angle)*radius*ps, y+Math.sin(angle)*radius*ps);\n\t \t\t}\n\t \t\tangle += a;\n\t \t\tctx.lineTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);\n\t \t}\n\t \tctx.closePath();\n \t}\n}\n\n/**\n * A reusable instance of {@link easeljs.Graphics.BeginPath} to avoid unnecessary instantiation.\n * @static\n * @readonly\n * @type {easeljs.Graphics.BeginPath}\n */\nGraphics.beginCmd = new BeginPath();\n/**\n * Map of Base64 characters to values. Used by {@link easeljs.Graphics#decodePath}.\n * @static\n * @readonly\n * @protected\n * @type {Object}\n */\nGraphics._BASE_64 = {\"A\":0,\"B\":1,\"C\":2,\"D\":3,\"E\":4,\"F\":5,\"G\":6,\"H\":7,\"I\":8,\"J\":9,\"K\":10,\"L\":11,\"M\":12,\"N\":13,\"O\":14,\"P\":15,\"Q\":16,\"R\":17,\"S\":18,\"T\":19,\"U\":20,\"V\":21,\"W\":22,\"X\":23,\"Y\":24,\"Z\":25,\"a\":26,\"b\":27,\"c\":28,\"d\":29,\"e\":30,\"f\":31,\"g\":32,\"h\":33,\"i\":34,\"j\":35,\"k\":36,\"l\":37,\"m\":38,\"n\":39,\"o\":40,\"p\":41,\"q\":42,\"r\":43,\"s\":44,\"t\":45,\"u\":46,\"v\":47,\"w\":48,\"x\":49,\"y\":50,\"z\":51,\"0\":52,\"1\":53,\"2\":54,\"3\":55,\"4\":56,\"5\":57,\"6\":58,\"7\":59,\"8\":60,\"9\":61,\"+\":62,\"/\":63};\n/**\n * Maps numeric values for the caps parameter of {@link easeljs.Graphics#setStrokeStyle} to\n * corresponding string values. This is primarily for use with the tiny API.
\n * The mappings are as follows:\n * \n * - 0 to \"butt\"
\n * - 1 to \"round\"
\n * - 2 to \"square\".
\n *
\n *\n * @example Set line caps to \"square\" \n * graphics.ss(16, 2);\n *\n * @static\n * @readonly\n * @protected\n * @type {Array}\n */\nGraphics._STROKE_CAPS_MAP = [\"butt\",\"round\",\"square\"];\n/**\n * Maps numeric values for the joints parameter of {@link easeljs.Graphics#setStrokeStyle} to\n * corresponding string values. This is primarily for use with the tiny API.
\n * The mappings are as follows:\n * \n * - 0 to \"miter\"
\n * - 1 to \"round\"
\n * - 2 to \"bevel\".
\n *
\n *\n * @example Set the line joints to \"bevel\" \n * graphics.ss(16, 0, 2);\n *\n * @static\n * @readonly\n * @protected\n * @type {Array}\n */\nGraphics._STROKE_JOINTS_MAP = [\"miter\", \"round\", \"bevel\"];\n/**\n * @static\n * @readonly\n * @protected\n * @type {CanvasRenderingContext2D}\n */\nGraphics._ctx = createCanvas().getContext(\"2d\");\n","/**\n * @license MovieClip\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Container from \"./Container\";\nimport DisplayObject from \"./DisplayObject\";\nimport { Tween, Timeline } from \"@createjs/tweenjs\";\n\n/**\n * The MovieClip class associates a TweenJS Timeline with an EaselJS {@link easeljs.Container}. It allows\n * you to create objects which encapsulate timeline animations, state changes, and synched actions. Due to the\n * complexities inherent in correctly setting up a MovieClip, it is largely intended for tool output and is not included\n * in the main EaselJS library.\n *\n * Currently MovieClip only works properly if it is tick based (as opposed to time based) though some concessions have\n * been made to support time-based timelines in the future.\n *\n * It is recommended to use `tween.to()` to animate and set properties (use no duration to have it set\n * immediately), and the `tween.wait()` method to create delays between animations. Note that using the\n * `tween.set()` method to affect properties will likely not provide the desired result.\n *\n * @memberof easeljs\n * @example Animate two shapes back and forth \n * let stage = new Stage(\"canvas\");\n * Ticker.addEventListener(\"tick\", stage);\n *\n * let mc = new MovieClip(null, 0, true, {start:20});\n * stage.addChild(mc);\n *\n * let child1 = new Shape(\n * new Graphics().beginFill(\"#999999\").drawCircle(30,30,30)\n * );\n * let child2 = new Shape(\n * new Graphics().beginFill(\"#5a9cfb\").drawCircle(30,30,30)\n * );\n *\n * mc.timeline.addTween(\n * Tween.get(child1).to({x:0}).to({x:60}, 50).to({x:0}, 50)\n * );\n * mc.timeline.addTween(\n * Tween.get(child2).to({x:60}).to({x:0}, 50).to({x:60}, 50)\n * );\n *\n * mc.gotoAndPlay(\"start\");\n *\n * @extends easeljs.Container\n * @param {Object} [props] The configuration properties to apply to this instances.\n * This object will also be passed into the Timeline instance associated with this MovieClip.\n * See the documentation for Timeline for a list of supported props.\n */\nexport default class MovieClip extends Container {\n\n\tconstructor (props) {\n\t\tsuper();\n\t\t!MovieClip.inited && MovieClip.init();\n\n\t\t/**\n\t\t * Controls how this MovieClip advances its time. Must be one of 0 (INDEPENDENT), 1 (SINGLE_FRAME), or 2 (SYNCHED).\n\t\t * See each constant for a description of the behaviour.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.mode = props.mode != null ? props.mode : MovieClip.INDEPENDENT;\n\n\t\t/**\n\t\t * Specifies what the first frame to play in this movieclip, or the only frame to display if mode is SINGLE_FRAME.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.startPosition = props.startPosition != null ? props.startPosition : 0;\n\n\t\t/**\n * Specifies how many times this MovieClip should loop. A value of -1 indicates it should loop indefinitely. A value of\n * 1 would cause it to loop once (ie. play a total of twice).\n * @property loop\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t */\n\t\tif (typeof props.loop === \"number\") {\n\t\t\tthis.loop = props.loop;\n\t\t} else if (props.loop === false) {\n\t\t\tthis.loop = 0;\n\t\t} else {\n\t\t\tthis.loop = -1;\n\t\t}\n\n\t\t/**\n\t\t * The current frame of the movieclip.\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.currentFrame = 0;\n\n\t\t/**\n * The TweenJS Timeline that is associated with this MovieClip. This is created automatically when the MovieClip\n * instance is initialized. Animations are created by adding TweenJS Tween\n * instances to the timeline.\n *\n * Elements can be added and removed from the timeline by toggling an \"_off\" property\n * using the `tweenInstance.to()` method. Note that using `Tween.set` is not recommended to\n * create MovieClip animations. The following example will toggle the target off on frame 0, and then back on for\n * frame 1. You can use the \"visible\" property to achieve the same effect.\n *\n * @example\n * let tween = Tween.get(target).to({x:0}).to({x:100}, 30);\n * let mc = new MovieClip();\n * mc.timeline.addTween(tween);\n *\n * @example\n * Tween.get(target).to({_off:false})\n * .wait(1).to({_off:true})\n * .wait(1).to({_off:false});\n *\n * @type {easeljs.Timeline}\n\t\t */\n\t\tthis.timeline = new Timeline(Object.assign({ useTicks: true, paused: true }, props));\n\n\t\t/**\n\t\t * If true, the MovieClip's position will not advance when ticked.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.paused = props.paused != null ? props.paused : false;\n\n\t\t/**\n\t\t * If true, actions in this MovieClip's tweens will be run when the playhead advances.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.actionsEnabled = true;\n\n\t\t/**\n\t\t * If true, the MovieClip will automatically be reset to its first frame whenever the timeline adds\n\t\t * it back onto the display list. This only applies to MovieClip instances with mode=INDEPENDENT.\n\t\t *
\n\t\t * For example, if you had a character animation with a \"body\" child MovieClip instance\n\t\t * with different costumes on each frame, you could set `body.autoReset = false`, so that\n\t\t * you can manually change the frame it is on, without worrying that it will be reset\n\t\t * automatically.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.autoReset = true;\n\n\t\t/**\n\t\t * An array of bounds for each frame in the MovieClip. This is mainly intended for tool output.\n\t\t * @type {Array}\n\t\t */\n\t\tthis.frameBounds = this.frameBounds || props.frameBounds; // frameBounds are set on the prototype in Animate.\n\n\t\t/**\n\t\t * By default MovieClip instances advance one frame per tick. Specifying a framerate for the MovieClip\n\t\t * will cause it to advance based on elapsed time between ticks as appropriate to maintain the target\n\t\t * framerate.\n\t\t *\n\t\t * For example, if a MovieClip with a framerate of 10 is placed on a Stage being updated at 40fps, then the MovieClip will\n\t\t * advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will\n\t\t * vary slightly between frames.\n\t\t *\n\t\t * This feature is dependent on the tick event object (or an object with an appropriate \"delta\" property) being\n\t\t * passed into {@link easeljs.Stage#update}.\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis.framerate = null;\n\n\t\t/**\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @private\n\t\t */\n\t\tthis._synchOffset = 0;\n\n\t\t/**\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t * @private\n\t\t */\n\t\tthis._rawPosition = -1; // TODO: evaluate using a ._reset Boolean prop instead of -1.\n\n\t\t/**\n\t\t * The time remaining from the previous tick, only applicable when .framerate is set.\n\t\t * @type {Number}\n\t\t * @private\n\t\t */\n\t\tthis._t = 0;\n\n\t\t/**\n\t\t * List of display objects that are actively being managed by the MovieClip.\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._managed = {};\n\n\t\t/**\n\t\t * @type {Function}\n\t\t * @private\n\t\t */\n\t\tthis._bound_resolveState = this._resolveState.bind(this);\n\t}\n\n\tstatic init () {\n\t\tif (MovieClip.inited) { return; }\n\t\t// plugins introduce some overhead to Tween, so we only install this if an MC is instantiated.\n\t\tMovieClipPlugin.install();\n\t\tMovieClip.inited = true;\n\t}\n\n\t// TODO: can we just proxy `get currentFrame` to timeline.position as well? Ditto for `get loop` (or just remove entirely).\n\t//\n\t/**\n\t * Returns an array of objects with label and position (aka frame) properties, sorted by position.\n\t * @see {@link tweenjs.Timeline#labels}\n\t * @type {Array}\n\t * @readonly\n\t */\n\tget labels () {\n\t\treturn this.timeline.labels;\n\t}\n\n\t/**\n\t * Returns the name of the label on or immediately before the current frame.\n\t * @see {@link tweenjs.Timeline#currentLabel}\n\t * for more information.\n\t * @type {String}\n\t * @readonly\n\t */\n\tget currentLabel () {\n\t\treturn this.timeline.currentLabel;\n\t}\n\n\t /**\n \t * Returns the duration of this MovieClip in seconds or ticks.\n \t * @see {@link tweenjs.Timeline#duration}\n \t * @type {Number}\n \t * @readonly\n \t */\n \tget duration () {\n\t\treturn this.timeline.duration;\n\t}\n\n\t/**\n\t * Returns the duration of this MovieClip in seconds or ticks. Identical to {@link easeljs.MovieClip#duration}\n\t * and provided for Adobe Flash/Animate API compatibility.\n\t * @see {@link tweenjs.Timeline#duration}\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget totalFrames () {\n\t\treturn this.duration;\n\t}\n\n\tisVisible () {\n\t\t// children are placed in draw, so we can't determine if we have content.\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\t// draw to cache first:\n\t\tif (this.drawCache(ctx, ignoreCache)) { return true; }\n this._updateState();\n\t\tsuper.draw(ctx, ignoreCache);\n\t\treturn true;\n\t}\n\n\t/**\n\t * Sets paused to false.\n\t */\n\tplay () {\n\t\tthis.paused = false;\n\t}\n\n\t/**\n\t * Sets paused to true.\n\t */\n\tstop () {\n\t\tthis.paused = true;\n\t}\n\n\t/**\n\t * Advances this movie clip to the specified position or label and plays the timeline.\n\t * @param {String | Number} positionOrLabel The animation name or frame number to go to.\n\t */\n\tgotoAndPlay (positionOrLabel) {\n\t\tthis.play();\n\t\tthis._goto(positionOrLabel);\n\t}\n\n\t/**\n\t * Advances this movie clip to the specified position or label and stops the timeline.\n\t * @param {String | Number} positionOrLabel The animation or frame name to go to.\n\t */\n\tgotoAndStop (positionOrLabel) {\n\t\tthis.stop();\n\t\tthis._goto(positionOrLabel);\n\t}\n\n\t/**\n\t * Advances the playhead. This occurs automatically each tick by default.\n\t * @param {Number} [time] The amount of time in ms to advance by. Only applicable if framerate is set.\n\t*/\n\tadvance (time) {\n\t\tif (this.mode !== MovieClip.INDEPENDENT) { return; } // update happens in draw for synched clips\n\t\t// if this MC doesn't have a framerate, hunt ancestors for one:\n\t\tlet o = this, fps = o.framerate;\n\t\twhile ((o = o.parent) && fps === null) {\n\t\t\tif (o.mode === MovieClip.INDEPENDENT) { fps = o._framerate; }\n\t\t}\n\t\tthis._framerate = fps;\n\n\t\tif (this.paused) { return; }\n\t\t// calculate how many frames to advance:\n\t\tlet t = (fps !== null && fps !== -1 && time !== null) ? time / (1000 / fps) + this._t : 1;\n\t\tlet frames = t | 0;\n\t\tthis._t = t - frames; // leftover time, save to add to next advance.\n\n\t\twhile (frames--) {\n\t\t\tthis._updateTimeline(this._rawPosition + 1, false);\n\t\t}\n\t}\n\n\t/**\n\t * MovieClip instances cannot be cloned.\n\t * @throws MovieClip cannot be cloned.\n\t */\n\tclone () {\n\t\t// TODO: add support for this? Need to clone the Timeline & retarget tweens - pretty complex.\n\t\tthrow \"MovieClip cannot be cloned.\";\n\t}\n\n\t_updateState () {\n\t\tif (this._rawPosition === -1 || this.mode !== MovieClip.INDEPENDENT) { this._updateTimeline(-1); }\n\t}\n\n\t_tick (evtObj) {\n\t\tthis.advance(evtObj && evtObj.delta);\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * @param {String | Number} positionOrLabel The animation name or frame number to go to.\n\t * @protected\n\t */\n\t_goto (positionOrLabel) {\n\t\tlet pos = this.timeline.resolve(positionOrLabel);\n\t\tif (pos == null) { return; }\n\t\tthis._t = 0;\n\t\tthis._updateTimeline(pos, true);\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_reset () {\n\t\tthis._rawPosition = -1;\n\t\tthis._t = this.currentFrame = 0;\n\t\tthis.paused = false;\n\t}\n\n\t/**\n\t * @param {Number} rawPosition\n\t * @param {Boolean} jump Indicates whether this update is due to jumping (via gotoAndXX) to a new position.\n\t * @protected\n\t */\n\t_updateTimeline (rawPosition, jump) {\n\t\tlet synced = this.mode !== MovieClip.INDEPENDENT, tl = this.timeline;\n\t\tif (synced) { rawPosition = this.startPosition + (this.mode === MovieClip.SINGLE_FRAME ? 0 : this._synchOffset); }\n\t\tif (rawPosition < 1) { rawPosition = 0; }\n\t\tif (this._rawPosition === rawPosition && !synced) { return; }\n\t\tthis._rawPosition = rawPosition;\n\n\t\t// update timeline position, ignoring actions if this is a graphic.\n\t\ttl.loop = this.loop; // TODO: should we maintain this on MovieClip, or just have it on timeline?\n\t\ttl.setPosition(rawPosition, synced || !this.actionsEnabled, jump, this._bound_resolveState);\n\t}\n\n\t/**\n\t * Renders position 0 without running actions or updating _rawPosition.\n\t * Primarily used by Animate CC to build out the first frame in the constructor of MC symbols.\n\t * NOTE: not tested when run after the MC advances past the first frame.\n\t * @protected\n\t */\n\t_renderFirstFrame () {\n\t\tconst tl = this.timeline, pos = tl.rawPosition;\n\t\ttl.setPosition(0, true, true, this._bound_resolveState);\n\t\ttl.rawPosition = pos;\n\t}\n\n\t/**\n\t * Runs via a callback after timeline property updates and before actions.\n\t * @protected\n\t */\n\t_resolveState () {\n\t\tlet tl = this.timeline;\n\t\tthis.currentFrame = tl.position;\n\n\t\tfor (let n in this._managed) { this._managed[n] = 1; }\n\n\t\tlet tweens = tl.tweens;\n\t\tfor (let tween of tweens) {\n\t\t\tlet target = tween.target;\n\t\t\tif (target === this || tween.passive) { continue; } // TODO: this assumes the actions tween from Animate has `this` as the target. Likely a better approach.\n\t\t\tlet offset = tween._stepPosition;\n\n\t\t\tif (target instanceof DisplayObject) {\n\t\t\t\t// motion tween.\n\t\t\t\tthis._addManagedChild(target, offset);\n\t\t\t} else {\n\t\t\t\t// state tween.\n\t\t\t\tthis._setState(target.state, offset);\n\t\t\t}\n\t\t}\n\n\t\tlet kids = this.children;\n\t\tfor (let i=kids.length-1; i>=0; i--) {\n\t\t\tlet id = kids[i].id;\n\t\t\tif (this._managed[id] === 1) {\n\t\t\t\tthis.removeChildAt(i);\n\t\t\t\tdelete(this._managed[id]);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * @param {Array} state\n\t * @param {Number} offset\n\t * @protected\n\t */\n\t_setState (state, offset) {\n\t\tif (!state) { return; }\n\t\tfor (let i = state.length - 1; i >= 0; i--) {\n\t\t\tlet o = state[i];\n\t\t\tlet target = o.t;\n\t\t\tlet props = o.p;\n\t\t\tfor (let n in props) { target[n] = props[n]; }\n\t\t\tthis._addManagedChild(target, offset);\n\t\t}\n\t}\n\n\t/**\n\t * Adds a child to the timeline, and sets it up as a managed child.\n\t * @param {easeljs.MovieClip} child The child MovieClip to manage\n\t * @param {Number} offset\n\t * @private\n\t */\n\t_addManagedChild (child, offset) {\n\t\tif (child._off) { return; }\n\t\tthis.addChildAt(child, 0);\n\n\t\tif (child instanceof MovieClip) {\n\t\t\tchild._synchOffset = offset;\n\t\t\t// TODO: this does not precisely match Adobe Flash/Animate, which loses track of the clip if it is renamed or removed from the timeline, which causes it to reset.\n // TODO: should also reset when MovieClip loops, though that will be a bit tricky to detect.\n\t\t\tif (child.mode === MovieClip.INDEPENDENT && child.autoReset && !this._managed[child.id]) { child._reset(); }\n\t\t}\n\t\tthis._managed[child.id] = 2;\n\t}\n\n\t/**\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform\n\t * @return {easeljs.Rectangle}\n\t * @protected\n\t */\n\t_getBounds (matrix, ignoreTransform) {\n\t\tlet bounds = this.getBounds();\n\t\tif (!bounds && this.frameBounds) { bounds = this._rectangle.copy(this.frameBounds[this.currentFrame]); }\n\t\tif (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }\n\t\treturn super._getBounds(matrix, ignoreTransform);\n\t}\n\n}\n\n/**\n * The MovieClip will advance independently of its parent, even if its parent is paused.\n * This is the default mode.\n * @static\n * @type {String}\n * @default independent\n * @readonly\n */\nMovieClip.INDEPENDENT = \"independent\";\n/**\n * The MovieClip will only display a single frame (as determined by the startPosition property).\n * @static\n * @type {String}\n * @default single\n * @readonly\n */\nMovieClip.SINGLE_FRAME = \"single\";\n/**\n * The MovieClip will be advanced only when its parent advances and will be synched to the position of\n * the parent MovieClip.\n * @static\n * @type {String}\n * @default synched\n * @readonly\n */\nMovieClip.SYNCHED = \"synched\";\n/**\n * Has the MovieClipPlugin been installed to TweenJS yet?\n * @static\n * @type {Boolean}\n * @default false\n * @readonly\n */\nMovieClip.inited = false;\n\n/**\n * This plugin works with TweenJS to prevent the startPosition property from tweening.\n * @todo update to new plugin model\n * @static\n * @inner\n */\nclass MovieClipPlugin {\n\n\tconstructor () {\n\t\tthrow \"MovieClipPlugin cannot be instantiated.\";\n\t}\n\n\t/**\n\t * @private\n\t */\n\tstatic install () {\n\t\tTween.installPlugin(MovieClipPlugin);\n\t}\n\n\t/**\n\t * @param {tweenjs.Tween} tween\n\t * @param {String} prop\n\t * @param {String|Number|Boolean} value\n\t * @private\n\t */\n\tstatic init (tween, prop, value) {\n\t\treturn value;\n\t}\n\n\t/**\n\t * @param {tweenjs.Tween} tween\n\t * @param {String} prop\n\t * @param {String | Number | Boolean} value\n\t * @param {Array} startValues\n\t * @param {Array} endValues\n\t * @param {Number} ratio\n\t * @param {Object} wait\n\t * @param {Object} end\n\t * @return {*}\n\t */\n\tstatic tween (tween, prop, value, startValues, endValues, ratio, wait, end) {\n\t\tif (!(tween.target instanceof MovieClip)) { return value; }\n\t\treturn (ratio === 1 ? endValues[prop] : startValues[prop]);\n\t}\n\n}\n\n/**\n * @static\n * @type {Number}\n * @default 100\n * @readonly\n */\nMovieClipPlugin.priority = 100;\n","/**\n * @license Shape\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport Graphics from \"./Graphics\";\n\n/**\n * A Shape allows you to display vector art in the display list. It composites a {@link easeljs.Graphics}\n * instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape\n * instances to display the same vector graphics with different positions or transforms.\n *\n * If the vector art will not change between draws, you may want to use the {@link easeljs.DisplayObject#cache}\n * method to reduce the rendering cost.\n *\n * @memberof easeljs\n * @example\n * var graphics = new Graphics().beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n * var shape = new Shape(graphics);\n * // Alternatively use can also use the graphics property of the Shape class to renderer the same as above.\n * var shape = new Shape();\n * shape.graphics.beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n *\n * @extends easeljs.DisplayObject\n * @param {easeljs.Graphics} [graphics] The graphics instance to display. If null, a new Graphics instance will be created.\n */\nexport default class Shape extends DisplayObject {\n\n\tconstructor (graphics = new Graphics()) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The graphics instance to display.\n\t\t * @type {easeljs.Graphics}\n\t\t */\n\t\tthis.graphics = graphics;\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty());\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache = false) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\t\tthis.graphics.draw(ctx, this);\n\t\treturn true;\n\t}\n\n\t/**\n\t * Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to\n\t * their defaults (for example .parent).\n\t * @override\n\t * @param {Boolean} [recursive=false] If true, this Shape's {@link easeljs.Graphics} instance will also be\n\t * cloned. If false, the Graphics instance will be shared with the new Shape.\n\t */\n\tclone (recursive = false) {\n\t\tlet g = (recursive && this.graphics) ? this.graphics.clone() : this.graphics;\n\t\treturn this._cloneProps(new Shape(g));\n\t}\n\n}\n","/**\n * @license SpriteSheet\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPliED, INCLUDING BUT NOT liMITED TO THE WARRANTIES\n * OF MERCHANTABIliTY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HolDERS BE liABLE FOR ANY CLAIM, DAMAGES OR OTHER liABIliTY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEAliNGS IN THE SOFTWARE.\n */\n\nimport { EventDispatcher, Event } from \"@createjs/core\";\nimport Rectangle from \"../geom/Rectangle\";\n\n/**\n * Encapsulates the properties and methods associated with a sprite sheet. A sprite sheet is a series of images (usually\n * animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x100\n * images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high).\n *
\n * The data passed to the SpriteSheet constructor defines:\n * \n * \t- The source image or images to use.
\n * \t- The positions of individual image frames.
\n * \t- Sequences of frames that form named animations. Optional.
\n * \t- The target playback framerate. Optional.
\n *
\n *\n * SpriteSheet Format
\n * SpriteSheets are an object with two required properties (`images` and `frames`), and two optional properties\n * (`framerate` and `animations`). This makes them easy to define in javascript code, or in JSON.\n *\n * images
\n * An array of source images. Images can be either an HTMlimage\n * instance, or a uri to an image. The former is recommended to control preloading.\n *\n * \timages: [image1, \"path/to/image2.png\"],\n *\n * frames
\n * Defines the individual frames. There are two supported formats for frame data:\n * When all of the frames are the same size (in a grid), use an object with `width`, `height`, `regX`, `regY`,\n * and `count` properties.\n *\n * \n * - `width` & `height` are required and specify the dimensions of the frames
\n * - `regX` & `regY` indicate the registration point or \"origin\" of the frames
\n * - `spacing` indicate the spacing between frames
\n * - `margin` specify the margin around the image(s)
\n * - `count` allows you to specify the total number of frames in the spritesheet; if omitted, this will\n * be calculated based on the dimensions of the source images and the frames. Frames will be assigned\n * indexes based on their position in the source images (left to right, top to bottom).
\n *
\n *\n * \tframes: {width:64, height:64, count:20, regX: 32, regY:64, spacing:0, margin:0}\n *\n * If the frames are of different sizes, use an array of frame definitions. Each definition is itself an array\n * with 4 required and 3 optional entries, in the order:\n *\n * \n * - The first four, `x`, `y`, `width`, and `height` are required and define the frame rectangle.
\n * - The fifth, `imageIndex`, specifies the index of the source image (defaults to 0)
\n * - The last two, `regX` and `regY` specify the registration point of the frame
\n *
\n *\n * \tframes: [\n * \t\t// x, y, width, height, imageIndex*, regX*, regY*\n * \t\t[64, 0, 96, 64],\n * \t\t[0, 0, 64, 64, 1, 32, 32]\n * \t\t// etc.\n * \t]\n *\n * animations
\n * Optional. An object defining sequences of frames to play as named animations. Each property corresponds to an\n * animation of the same name. Each animation must specify the frames to play, and may\n * also include a relative playback `speed` (ex. 2 would playback at double speed, 0.5 at half), and\n * the name of the `next` animation to sequence to after it completes.\n *\n * There are three formats supported for defining the frames in an animation, which can be mixed and matched as appropriate:\n * \n * \t- for a single frame animation, you can simply specify the frame index\n *\n * \t\tanimations: {\n * \t\t\tsit: 7\n * \t\t}\n *\n *
\n * - \n * for an animation of consecutive frames, you can use an array with two required, and two optional entries\n * \t\tin the order: `start`, `end`, `next`, and `speed`. This will play the frames from start to end inclusive.\n *\n * \t\tanimations: {\n * \t\t\t// start, end, next*, speed*\n * \t\t\trun: [0, 8],\n * \t\t\tjump: [9, 12, \"run\", 2]\n * \t\t}\n *\n *
\n * - \n * for non-consecutive frames, you can use an object with a `frames` property defining an array of frame\n * indexes to play in order. The object can also specify `next` and `speed` properties.\n *\n * \t\tanimations: {\n * \t\t\twalk: {\n * \t\t\t\tframes: [1,2,3,3,2,1]\n * \t\t\t},\n * \t\t\tshoot: {\n * \t\t\t\tframes: [1,4,5,6],\n * \t\t\t\tnext: \"walk\",\n * \t\t\t\tspeed: 0.5\n * \t\t\t}\n * \t\t}\n *\n *
\n *
\n * Note: the `speed` property was added in EaselJS 0.7.0. Earlier versions had a `frequency`\n * property instead, which was the inverse of `speed`. For example, a value of \"4\" would be 1/4 normal speed in\n * earlier versions, but is 4x normal speed in EaselJS 0.7.0+.\n *\n * framerate
\n * Optional. Indicates the default framerate to play this spritesheet at in frames per second. See\n * {{#crossLink \"SpriteSheet/framerate:property\"}}{{/crossLink}} for more information.\n *\n * \t\tframerate: 20\n *\n * Note that the Sprite framerate will only work if the stage update method is provided with the {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}}\n * event generated by the {{#crossLink \"Ticker\"}}{{/crossLink}}.\n *\n * \t\tcreatejs.Ticker.on(\"tick\", handleTick);\n * \t\tfunction handleTick(event) {\n *\t\t\tstage.update(event);\n *\t\t}\n *\n * Example
\n * To define a simple sprite sheet, with a single image \"sprites.jpg\" arranged in a regular 50x50 grid with three\n * animations: \"stand\" showing the first frame, \"run\" looping frame 1-5 inclusive, and \"jump\" playing frame 6-8 and\n * sequencing back to run.\n *\n * \t\tvar data = {\n * \t\t\timages: [\"sprites.jpg\"],\n * \t\t\tframes: {width:50, height:50},\n * \t\t\tanimations: {\n * \t\t\t\tstand:0,\n * \t\t\t\trun:[1,5],\n * \t\t\t\tjump:[6,8,\"run\"]\n * \t\t\t}\n * \t\t};\n * \t\tvar spriteSheet = new createjs.SpriteSheet(data);\n * \t\tvar animation = new createjs.Sprite(spriteSheet, \"run\");\n *\n * Generating SpriteSheet Images
\n * Spritesheets can be created manually by combining images in PhotoShop, and specifying the frame size or\n * coordinates manually, however there are a number of tools that facilitate this.\n * \n * - Exporting SpriteSheets or HTML5 content from Adobe Flash/Animate supports the EaselJS SpriteSheet format.
\n * - The popular Texture Packer has\n * EaselJS support.\n *
- SWF animations in Adobe Flash/Animate can be exported to SpriteSheets using
\n *
\n *\n * Cross Origin Issues
\n * Warning: Images loaded cross-origin will throw cross-origin security errors when interacted with\n * using:\n * \n * - a mouse
\n * - methods such as {{#crossLink \"Container/getObjectUnderPoint\"}}{{/crossLink}}
\n * - Filters (see {{#crossLink \"Filter\"}}{{/crossLink}})
\n * - caching (see {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}})
\n *
\n * You can get around this by setting `crossOrigin` property on your images before passing them to EaselJS, or\n * setting the `crossOrigin` property on PreloadJS' LoadQueue or LoadItems.\n *\n * \t\tvar image = new Image();\n * \t\timg.crossOrigin=\"Anonymous\";\n * \t\timg.src = \"http://server-with-CORS-support.com/path/to/image.jpg\";\n *\n * If you pass string paths to SpriteSheets, they will not work cross-origin. The server that stores the image must\n * support cross-origin requests, or this will not work. For more information, check out\n * CORS overview on MDN.\n *\n * @memberof easeljs\n * @extends core.EventDispatcher\n * @param {Object} data An object describing the SpriteSheet data.\n */\nexport default class SpriteSheet extends EventDispatcher {\n\n\tconstructor (data) {\n\t\tsuper();\n\n\t\t/**\n\t\t * Indicates whether all images are finished loading.\n\t\t * @type {Boolean}\n\t\t * @readonly\n\t\t */\n\t\tthis.complete = true;\n\n\t\t/**\n\t\t * Specifies the framerate to use by default for Sprite instances using the SpriteSheet. See the Sprite class\n\t\t * {@link easeljs.Sprite#framerate} for more information.\n\t\t * @type Number\n\t\t */\n\t\tthis.framerate = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._animations = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._frames = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._images = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Object}\n\t\t */\n\t\tthis._data = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._loadCount = 0;\n\n\t\t// only used for simple frame defs:\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._frameHeight = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._frameWidth = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._numFrames = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._regX = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._regY = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._spacing = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._margin = 0;\n\n\t\tthis._parseData(data);\n\t}\n\n\t/**\n\t * Returns an array of all available animation names available on this sprite sheet as strings.\n\t * @type {Array}\n\t * @readonly\n\t */\n\tget animations () {\n\t\treturn this._animations.slice();\n\t}\n\n\t/**\n\t * Returns the total number of frames in the specified animation, or in the whole sprite\n\t * sheet if the animation param is omitted. Returns 0 if the spritesheet relies on calculated frame counts, and\n\t * the images have not been fully loaded.\n\t * @param {String} animation The name of the animation to get a frame count for.\n\t * @return {Number} The number of frames in the animation, or in the entire sprite sheet if the animation param is omitted.\n\t */\n\tgetNumFrames (animation) {\n\t\tif (animation == null) {\n\t\t\treturn this._frames ? this._frames.length : this._numFrames || 0;\n\t\t} else {\n\t\t\tlet data = this._data[animation];\n\t\t\tif (data == null) { return 0; }\n\t\t\telse { return data.frames.length; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns an object defining the specified animation. The returned object contains:\n\t * \n\t * \t- frames: an array of the frame ids in the animation
\n\t * \t- speed: the playback speed for this animation
\n\t * \t- name: the name of the animation
\n\t * \t- next: the default animation to play next. If the animation loops, the name and next property will be the same.
\n\t *
\n\t * @param {String} name The name of the animation to get.\n\t * @return {Object} a generic object with frames, speed, name, and next properties.\n\t */\n\tgetAnimation (name) {\n\t\treturn this._data[name];\n\t}\n\n\t/**\n\t * Returns an object specifying the image and source rect of the specified frame. The returned object has:\n\t * \n\t * \t- an image property holding a reference to the image object in which the frame is found
\n\t * \t- a rect property containing a Rectangle instance which defines the boundaries for the frame within that image.
\n\t * \t- A regX and regY property corresponding to the regX/Y values for the frame.\n\t *
\n\t * @param {Number} frameIndex The index of the frame.\n\t * @return {Object} a generic object with image and rect properties. Returns null if the frame does not exist.\n\t */\n\tgetFrame (frameIndex) {\n\t\tlet frame;\n\t\tif (this._frames && (frame = this._frames[frameIndex])) { return frame; }\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns a {@link easeljs.Rectangle} instance defining the bounds of the specified frame relative\n\t * to the origin.\n\t *\n\t * @param {Number} frameIndex The index of the frame.\n\t * @param {easeljs.Rectangle} [rectangle] A Rectangle instance to copy the values into. By default a new instance is created.\n\t * @return {easeljs.Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully loaded.\n\t */\n\tgetFrameBounds (frameIndex, rectangle = new Rectangle()) {\n\t\tlet frame = this.getFrame(frameIndex);\n\t\treturn frame ? rectangle.setValues(-frame.regX, -frame.regY, frame.rect.width, frame.rect.height) : null;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * SpriteSheet cannot be cloned. A SpriteSheet can be shared by multiple Sprite instances without cloning it.\n\t * @override\n\t * @throws SpriteSheet cannot be cloned.\n\t */\n\tclone () {\n\t\tthrow \"SpriteSheet cannot be cloned.\";\n\t}\n\n\t/**\n\t * @param {Object} data An object describing the SpriteSheet data.\n\t * @protected\n\t */\n\t_parseData (data) {\n\t\tif (data == null) { return; }\n\t\tthis.framerate = data.framerate||0;\n\n\t\t// parse images:\n\t\tif (data.images) {\n\t\t\tfor (let img of data.images) {\n\t\t\t\tlet a = this._images = [];\n\t\t\t\tlet src;\n\t\t\t\tif (typeof img === \"string\") {\n\t\t\t\t\tsrc = img;\n\t\t\t\t\timg = document.createElement(\"img\");\n\t\t\t\t\timg.src = src;\n\t\t\t\t}\n\t\t\t\ta.push(img);\n\t\t\t\tif (!img.getContext && !img.naturalWidth) {\n\t\t\t\t\tthis._loadCount++;\n\t\t\t\t\tthis.complete = false;\n\t\t\t\t\timg.onload = () => this._handleImageLoad(src);\n\t\t\t\t\timg.onerror = () => this._handleImageError(src);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// parse frames:\n\t\tif (data.frames != null) {\n\t\t\tif (Array.isArray(data.frames)) {\n\t\t\t\tthis._frames = [];\n\t\t\t\tfor (let arr of data.frames) {\n\t\t\t\t\tthis._frames.push({image:this._images[arr[4]?arr[4]:0], rect:new Rectangle(arr[0],arr[1],arr[2],arr[3]), regX:arr[5]||0, regY:arr[6]||0 });\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tlet o = data.frames;\n\t\t\t\tthis._frameWidth = o.width;\n\t\t\t\tthis._frameHeight = o.height;\n\t\t\t\tthis._regX = o.regX||0;\n\t\t\t\tthis._regY = o.regY||0;\n\t\t\t\tthis._spacing = o.spacing||0;\n\t\t\t\tthis._margin = o.margin||0;\n\t\t\t\tthis._numFrames = o.count;\n\t\t\t\tif (this._loadCount === 0) { this._calculateFrames(); }\n\t\t\t}\n\t\t}\n\n\t\t// parse animations:\n\t\tthis._animations = [];\n\t\tif (data.animations != null) {\n\t\t\tthis._data = {};\n\t\t\tlet o = data.animations;\n\t\t\tfor (let name in o) {\n\t\t\t\tlet anim = { name };\n\t\t\t\tlet obj = o[name];\n\t\t\t\tlet a;\n\t\t\t\tif (typeof obj === \"number\") { // single frame\n\t\t\t\t\ta = anim.frames = [obj];\n\t\t\t\t} else if (Array.isArray(obj)) { // simple\n\t\t\t\t\tif (obj.length === 1) { anim.frames = [obj[0]]; }\n\t\t\t\t\telse {\n\t\t\t\t\t\tanim.speed = obj[3];\n\t\t\t\t\t\tanim.next = obj[2];\n\t\t\t\t\t\ta = anim.frames = [];\n\t\t\t\t\t\tfor (let i=obj[0];i<=obj[1];i++) {\n\t\t\t\t\t\t\ta.push(i);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else { // complex\n\t\t\t\t\tanim.speed = obj.speed;\n\t\t\t\t\tanim.next = obj.next;\n\t\t\t\t\tlet frames = obj.frames;\n\t\t\t\t\ta = anim.frames = (typeof frames === \"number\") ? [frames] : frames.slice(0);\n\t\t\t\t}\n\t\t\t\tif (anim.next === true || anim.next === undefined) { anim.next = name; } // loop\n\t\t\t\tif (anim.next === false || (a.length < 2 && anim.next === name)) { anim.next = null; } // stop\n\t\t\t\tif (!anim.speed) { anim.speed = 1; }\n\t\t\t\tthis._animations.push(name);\n\t\t\t\tthis._data[name] = anim;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * @emits easeljs.SpriteSheet#event:complete\n\t * @protected\n\t * @param {Object} src\n\t */\n\t _handleImageLoad (src) {\n\t\tif (--this._loadCount === 0) {\n\t\t\tthis._calculateFrames();\n\t\t\tthis.complete = true;\n\t\t\tthis.dispatchEvent(\"complete\");\n\t\t}\n\t}\n\n\t/**\n\t * @emits easeljs.SpriteSheet#event:complete\n\t * @emits easeljs.SpriteSheet#event:error\n\t * @protected\n\t * @param {Object} src\n\t */\n\t_handleImageError (src) {\n\t\tlet errorEvent = new Event(\"error\");\n\t\terrorEvent.src = src;\n\t\tthis.dispatchEvent(errorEvent);\n\n\t\t// Complete is still dispatched.\n\t\tif (--this._loadCount === 0) {\n\t\t\tthis.dispatchEvent(\"complete\");\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_calculateFrames () {\n\t\tif (this._frames || this._frameWidth === 0) { return; }\n\n\t\tthis._frames = [];\n\n\t\tlet maxFrames = this._numFrames || 100000; // if we go over this, something is wrong.\n\t\tlet frameCount = 0, frameWidth = this._frameWidth, frameHeight = this._frameHeight;\n\t\tlet spacing = this._spacing, margin = this._margin;\n\n\t\timgLoop:\n\t\tfor (let i=0, imgs=this._images, l=imgs.length; i= maxFrames) { break imgLoop; }\n\t\t\t\t\tframeCount++;\n\t\t\t\t\tthis._frames.push({\n\t\t\t\t\t\timage: img,\n\t\t\t\t\t\trect: new Rectangle(x, y, frameWidth, frameHeight),\n\t\t\t\t\t\tregX: this._regX,\n\t\t\t\t\t\tregY: this._regY\n\t\t\t\t\t});\n\t\t\t\t\tx += frameWidth+spacing;\n\t\t\t\t}\n\t\t\t\ty += frameHeight+spacing;\n\t\t\t}\n\t\t}\n\t\tthis._numFrames = frameCount;\n\t}\n\n}\n\n/**\n * Dispatched when all images are loaded. Note that this only fires if the images\n * were not fully loaded when the sprite sheet was initialized. You should check the complete property\n * to prior to adding a listener. Ex.\n *\n * \tvar sheet = new createjs.SpriteSheet(data);\n * \tif (!sheet.complete) {\n * \t\t// not preloaded, listen for the complete event:\n * \t\tsheet.addEventListener(\"complete\", handler);\n * \t}\n *\n * @event easeljs.SpriteSheet#complete\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @since 0.6.0\n */\n\n/**\n * Dispatched when getFrame is called with a valid frame index. This is primarily intended for use by {@link easeljs.SpriteSheetBuilder}\n * when doing on-demand rendering.\n * @event easeljs.SpriteSheet#getframe\n * @property {Number} index The frame index.\n * @property {Object} frame The frame object that getFrame will return.\n */\n\n/**\n * Dispatched when an image encounters an error. A SpriteSheet will dispatch an error event for each image that\n * encounters an error, and will still dispatch a {@link easeljs.SpriteSheet#event:complete}\n * event once all images are finished processing, even if an error is encountered.\n * @event easeljs.SpriteSheet#error\n * @property {String} src The source of the image that failed to load.\n * @since 0.8.2\n */\n","/**\n * @license Text\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport createCanvas from \"../utils/Canvas\";\n\n/**\n * Display one or more lines of dynamic text (not user editable) in the display list. Line wrapping support (using the\n * lineWidth) is very basic, wrapping on spaces and tabs only. Note that as an alternative to Text, you can position HTML\n * text above or below the canvas relative to items in the display list using the {@link easeljs.DisplayObject#localToGlobal}\n * method, or using {@link easeljs.DOMElement}.\n *\n * Please note that Text does not support HTML text, and can only display one font style at a time. To use\n * multiple font styles, you will need to create multiple text instances, and position them manually.\n *\n * CreateJS Text supports web fonts (the same rules as Canvas). The font must be loaded and supported by the browser\n * before it can be displayed.\n *\n * Note: Text can be expensive to generate, so cache instances where possible. Be aware that not all\n * browsers will render Text exactly the same.\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * let text = new Text(\"Hello World\", \"20px Arial\", \"#ff7700\");\n * text.x = 100;\n * text.textBaseline = \"alphabetic\";\n *\n * @param {String} [text] The text to display.\n * @param {String} [font] The font style to use. Any valid value for the CSS font attribute is acceptable (ex. \"bold\n * 36px Arial\").\n * @param {String} [color] The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex.\n * \"#F00\", \"red\", or \"#FF0000\").\n */\nexport default class Text extends DisplayObject {\n\n\tconstructor (text, font, color) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The text to display.\n\t\t * @type {String}\n\t\t */\n\t\tthis.text = text;\n\n\t\t/**\n\t\t * The font style to use. Any valid value for the CSS font attribute is acceptable (ex. \"bold 36px Arial\").\n\t\t * @type {String}\n\t\t */\n\t\tthis.font = font;\n\n\t\t/**\n\t\t * The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. \"#F00\"). Default is \"#000\".\n\t\t * It will also accept valid canvas fillStyle values.\n\t\t * @type {String}\n\t\t */\n\t\tthis.color = color;\n\n\t\t/**\n\t\t * The horizontal text alignment. Any of \"start\", \"end\", \"left\", \"right\", and \"center\".\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles \"WHATWG spec\"}\n\t\t * @type {String}\n\t\t * @default left\n\t\t */\n\t\tthis.textAlign = \"left\";\n\n\t\t/**\n\t\t * The vertical alignment point on the font. Any of \"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", or \"bottom\".\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles \"WHATWG spec\"}\n\t\t * @type {String}\n\t\t * @default top\n\t\t*/\n\t\tthis.textBaseline = \"top\";\n\n\t\t/**\n\t\t * The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or\n\t\t * shrunk to make it fit in this width.\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles \"WHATWG spec\"}\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.maxWidth = null;\n\n\t\t/**\n\t\t * If greater than 0, the text will be drawn as a stroke (outline) of the specified width.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.outline = 0;\n\n\t\t/**\n\t\t * Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0,\n\t\t * the value of getMeasuredLineHeight is used.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.lineHeight = 0;\n\n\t\t/**\n\t\t * Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null,\n\t\t * the text will not be wrapped.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.lineWidth = null;\n\t}\n\n \tisVisible () {\n \t\tlet hasContent = this.cacheCanvas || (this.text != null && this.text !== \"\");\n \t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n \t}\n\n \tdraw (ctx, ignoreCache) {\n \t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\n \t\tlet col = this.color || \"#000\";\n \t\tif (this.outline) { ctx.strokeStyle = col; ctx.lineWidth = this.outline*1; }\n \t\telse { ctx.fillStyle = col; }\n\n \t\tthis._drawText(this._prepContext(ctx));\n \t\treturn true;\n \t}\n\n \t/**\n \t * Returns the measured, untransformed width of the text without wrapping. Use getBounds for a more robust value.\n \t * @return {Number} The measured, untransformed width of the text.\n \t */\n \tgetMeasuredWidth () {\n \t\treturn this._getMeasuredWidth(this.text);\n \t}\n\n \t/**\n \t * Returns an approximate line height of the text, ignoring the lineHeight property. This is based on the measured\n \t * width of a \"M\" character multiplied by 1.2, which provides an approximate line height for most fonts.\n \t * @return {Number} an approximate line height of the text, ignoring the lineHeight property. This is\n \t * based on the measured width of a \"M\" character multiplied by 1.2, which approximates em for most fonts.\n \t */\n \tgetMeasuredLineHeight () {\n \t\treturn this._getMeasuredWidth(\"M\")*1.2;\n \t}\n\n \t/**\n \t * Returns the approximate height of multi-line text by multiplying the number of lines against either the\n \t * `lineHeight` (if specified) or {@link easeljs.Text#getMeasuredLineHeight}. Note that\n \t * this operation requires the text flowing logic to run, which has an associated CPU cost.\n \t * @return {Number} The approximate height of the untransformed multi-line text.\n \t */\n \tgetMeasuredHeight () {\n \t\treturn this._drawText(null, {}).height;\n \t}\n\n \tgetBounds () {\n \t\tlet rect = super.getBounds();\n \t\tif (rect) { return rect; }\n \t\tif (this.text == null || this.text === \"\") { return null; }\n \t\tlet o = this._drawText(null, {});\n \t\tlet w = (this.maxWidth && this.maxWidth < o.width) ? this.maxWidth : o.width;\n \t\tlet x = w * Text.H_OFFSETS[this.textAlign||\"left\"];\n \t\tlet lineHeight = this.lineHeight||this.getMeasuredLineHeight();\n \t\tlet y = lineHeight * Text.V_OFFSETS[this.textBaseline||\"top\"];\n \t\treturn this._rectangle.setValues(x, y, w, o.height);\n \t}\n\n \t/**\n \t * Returns an object with width, height, and lines properties. The width and height are the visual width and height\n \t * of the drawn text. The lines property contains an array of strings, one for\n \t * each line of text that will be drawn, accounting for line breaks and wrapping. These strings have trailing\n \t * whitespace removed.\n \t * @return {Object} An object with width, height, and lines properties.\n \t */\n \tgetMetrics () {\n \t\tlet o = {lines:[]};\n \t\to.lineHeight = this.lineHeight || this.getMeasuredLineHeight();\n \t\to.vOffset = o.lineHeight * Text.V_OFFSETS[this.textBaseline||\"top\"];\n \t\treturn this._drawText(null, o, o.lines);\n \t}\n\n \t/**\n \t * Returns a clone of the Text instance.\n \t * @return {easeljs.Text} a clone of the Text instance.\n \t */\n \tclone () {\n \t\treturn this._cloneProps(new Text(this.text, this.font, this.color));\n \t}\n\n \t/**\n \t * Returns a string representation of this object.\n \t * @override\n \t * @return {String} a string representation of the instance.\n \t */\n \ttoString () {\n \t\treturn `[${this.constructor.name} (text=${this.text.length > 20 ? `${this.text.substr(0, 17)}...` : this.text})]`;\n \t}\n\n \t/**\n \t * @param {easeljs.Text} o\n \t * @protected\n \t * @return {easeljs.Text} o\n \t */\n \t_cloneProps (o) {\n \t\tsuper._cloneProps(o);\n \t\to.textAlign = this.textAlign;\n \t\to.textBaseline = this.textBaseline;\n \t\to.maxWidth = this.maxWidth;\n \t\to.outline = this.outline;\n \t\to.lineHeight = this.lineHeight;\n \t\to.lineWidth = this.lineWidth;\n \t\treturn o;\n \t}\n\n \t/**\n \t * @param {CanvasRenderingContext2D} ctx\n \t * @return {CanvasRenderingContext2D}\n \t * @protected\n \t */\n \t_prepContext (ctx) {\n \t\tctx.font = this.font||\"10px sans-serif\";\n \t\tctx.textAlign = this.textAlign||\"left\";\n \t\tctx.textBaseline = this.textBaseline||\"top\";\n\t\tctx.lineJoin = \"miter\";\n\t\tctx.miterLimit = 2.5;\n\t\treturn ctx;\n\t}\n\n\t/**\n\t * Draws multiline text.\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {Object} o\n\t * @param {Array} lines\n\t * @return {Object}\n\t * @protected\n\t */\n \t_drawText (ctx, o, lines) {\n \t\tconst paint = !!ctx;\n \t\tif (!paint) {\n \t\t\tctx = Text._ctx;\n \t\t\tctx.save();\n \t\t\tthis._prepContext(ctx);\n \t\t}\n \t\tlet lineHeight = this.lineHeight||this.getMeasuredLineHeight();\n\n \t\tlet maxW = 0, count = 0;\n \t\tlet hardLines = String(this.text).split(/(?:\\r\\n|\\r|\\n)/);\n \t\tfor (let str of hardLines) {\n \t\t\tlet w = null;\n\n \t\t\tif (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {\n \t\t\t\t// text wrapping:\n \t\t\t\tlet words = str.split(/(\\s)/);\n \t\t\t\tstr = words[0];\n \t\t\t\tw = ctx.measureText(str).width;\n\n\t\t\t\tconst l = words.length;\n \t\t\t\tfor (let i=1; i this.lineWidth) {\n \t\t\t\t\t\tif (paint) { this._drawTextLine(ctx, str, count*lineHeight); }\n \t\t\t\t\t\tif (lines) { lines.push(str); }\n \t\t\t\t\t\tif (w > maxW) { maxW = w; }\n \t\t\t\t\t\tstr = words[i+1];\n \t\t\t\t\t\tw = ctx.measureText(str).width;\n \t\t\t\t\t\tcount++;\n \t\t\t\t\t} else {\n \t\t\t\t\t\tstr += words[i] + words[i+1];\n \t\t\t\t\t\tw += wordW;\n \t\t\t\t\t}\n \t\t\t\t}\n \t\t\t}\n\n \t\t\tif (paint) { this._drawTextLine(ctx, str, count*lineHeight); }\n \t\t\tif (lines) { lines.push(str); }\n \t\t\tif (o && w == null) { w = ctx.measureText(str).width; }\n \t\t\tif (w > maxW) { maxW = w; }\n \t\t\tcount++;\n \t\t}\n\n \t\tif (o) {\n \t\t\to.width = maxW;\n \t\t\to.height = count*lineHeight;\n \t\t}\n \t\tif (!paint) { ctx.restore(); }\n \t\treturn o;\n \t}\n\n \t/**\n \t * @param {CanvasRenderingContext2D} ctx\n \t * @param {String} text\n \t * @param {Number} y\n \t * @protected\n \t */\n \t_drawTextLine (ctx, text, y) {\n \t\t// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:\n \t\tif (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }\n \t\telse { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }\n \t}\n\n \t/**\n \t * @param {String} text\n \t * @protected\n \t */\n \t_getMeasuredWidth (text) {\n \t\tlet ctx = Text._ctx;\n \t\tctx.save();\n \t\tlet w = this._prepContext(ctx).measureText(text).width;\n \t\tctx.restore();\n \t\treturn w;\n \t}\n\n}\n\n/**\n * Lookup table for the ratio to offset bounds x calculations based on the textAlign property.\n * @type {Object}\n * @readonly\n * @static\n */\nText.H_OFFSETS = {start: 0, left: 0, center: -0.5, end: -1, right: -1};\n/**\n * Lookup table for the ratio to offset bounds y calculations based on the textBaseline property.\n * @type {Object}\n * @readonly\n * @static\n */\nText.V_OFFSETS = {top: 0, hanging: -0.01, middle: -0.4, alphabetic: -0.8, ideographic: -0.85, bottom: -1};\n\n/**\n * @property _ctx\n * @type {CanvasRenderingContext2D}\n * @private\n * @static\n */\nText._ctx = createCanvas().getContext(\"2d\");\n","/**\n * @license AlphaMapFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\n\n/**\n * Applies a greyscale alpha map image (or canvas) to the target, such that the alpha channel of the result will\n * be copied from the red channel of the map, and the RGB channels will be copied from the target.\n *\n * Generally, it is recommended that you use {@link easeljs.AlphaMaskFilter}, because it has much better performance.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example *\n * let box = new Shape();\n * box.graphics.beginLinearGradientFill([\"#ff0000\", \"#0000ff\"], [0, 1], 0, 0, 0, 100)\n * box.graphics.drawRect(0, 0, 100, 100);\n * box.cache(0, 0, 100, 100);\n * let bmp = new Bitmap(\"path/to/image.jpg\");\n * bmp.filters = [ new AlphaMapFilter(box.cacheCanvas) ];\n * bmp.cache(0, 0, 100, 100);\n *\n * @param {HTMLImageElement | HTMLCanvasElement} alphaMap The greyscale image (or canvas) to use as the alpha value for the\n * result. This should be exactly the same dimensions as the target.\n */\nexport default class AlphaMapFilter extends Filter {\n\n\tconstructor (alphaMap) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same\n\t\t * dimensions as the target.\n\t\t * @type {HTMLImageElement | HTMLCanvasElement}\n\t\t */\n\t\tthis.alphaMap = alphaMap;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {HTMLImageElement | HTMLCanvasElement}\n\t\t * @default null\n\t\t */\n\t\tthis._alphaMap = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Uint8ClampedArray}\n\t\t * @default null\n\t\t */\n\t\tthis._mapData = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {*}\n\t\t * @default null\n\t\t */\n\t\tthis._mapTexture = null;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform sampler2D uAlphaSampler;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\t\t\t\tvec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\n\n\t\t\t\t// some image formats can have transparent white rgba(1,1,1, 0) when put on the GPU, this means we need a slight tweak\n\t\t\t\t// using ceil ensure that the colour will be used so long as it exists but pure transparency will be treated black\n\t\t\t\tgl_FragColor = vec4(color.rgb, color.a * (alphaMap.r * ceil(alphaMap.a)));\n\t\t\t}\n\t\t`;\n\t}\n\n\t/**\n\t * @todo docs\n\t * @param {*} gl\n\t * @param {*} stage\n\t * @param {*} shaderProgram\n\t */\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tif (!this._mapTexture) { this._mapTexture = gl.createTexture(); }\n\n\t\tgl.activeTexture(gl.TEXTURE1);\n\t\tgl.bindTexture(gl.TEXTURE_2D, this._mapTexture);\n\t\tstage.setTextureParams(gl);\n\t\tgl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.alphaMap);\n\n\t\tgl.uniform1i(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uAlphaSampler\"),\n\t\t\t1\n\t\t);\n\t}\n\n\t/**\n\t * @return {easeljs.AlphaMapFilter}\n\t */\n\tclone () {\n\t\tlet o = new AlphaMapFilter(this.alphaMap);\n\t\to._alphaMap = this._alphaMap;\n\t\to._mapData = this._mapData;\n\t\treturn o;\n\t}\n\n\t_applyFilter (imageData) {\n\t\tif (!this.alphaMap) { return true; }\n\t\tif (!this._prepAlphaMap()) { return false; }\n\n\t\t// TODO: update to support scenarios where the target has different dimensions.\n\t\tlet data = imageData.data;\n\t\tlet map = this._mapData;\n\t\tconst l = data.length;\n\t\tfor (let i=0; iIMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * var box = new Shape();\n * box.graphics.beginLinearGradientFill([\"#000000\", \"rgba(0, 0, 0, 0)\"], [0, 1], 0, 0, 100, 100)\n * box.graphics.drawRect(0, 0, 100, 100);\n * box.cache(0, 0, 100, 100);\n * var bmp = new Bitmap(\"path/to/image.jpg\");\n * bmp.filters = [ new AlphaMaskFilter(box.cacheCanvas) ];\n * bmp.cache(0, 0, 100, 100);\n *\n * @param {HTMLImageElement | HTMLCanvasElement} mask\n */\nexport default class AlphaMaskFilter extends Filter {\n\n\tconstructor (mask) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The image (or canvas) to use as the mask.\n\t\t * @type {HTMLImageElement | HTMLCanvasElement}\n\t\t */\n\t\tthis.mask = mask;\n\n\t\tthis.usesContext = true;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform sampler2D uAlphaSampler;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\t\t\t\tvec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\n\n\t\t\t\tgl_FragColor = vec4(color.rgb, color.a * alphaMap.a);\n\t\t\t}\n\t\t`;\n\t}\n\n\t/**\n\t * Applies the filter to the specified context.\n\t *\n\t * IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.\n\t * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.\n\t * @param {Number} x The x position to use for the source rect.\n\t * @param {Number} y The y position to use for the source rect.\n\t * @param {Number} width The width to use for the source rect.\n\t * @param {Number} height The height to use for the source rect.\n\t * @param {CanvasRenderingContext2D} [targetCtx] NOT SUPPORTED IN THIS FILTER. The 2D context to draw the result to. Defaults to the context passed to ctx.\n\t * @param {Number} [targetX] NOT SUPPORTED IN THIS FILTER. The x position to draw the result to. Defaults to the value passed to x.\n\t * @param {Number} [targetY] NOT SUPPORTED IN THIS FILTER. The y position to draw the result to. Defaults to the value passed to y.\n\t * @return {Boolean} If the filter was applied successfully.\n\t */\n\tapplyFilter (ctx, x, y, width, height, targetCtx, targetX, targetY) {\n\t\tif (!this.mask) { return true; }\n\t\ttargetCtx = targetCtx || ctx;\n\t\tif (targetX == null) { targetX = x; }\n\t\tif (targetY == null) { targetY = y; }\n\n\t\ttargetCtx.save();\n\t\tif (ctx != targetCtx) {\n\t\t\t// TODO: support targetCtx and targetX/Y\n\t\t\t// clearRect, then draw the ctx in?\n\t\t\treturn false;\n\t\t}\n\n\t\ttargetCtx.globalCompositeOperation = \"destination-in\";\n\t\ttargetCtx.drawImage(this.mask, targetX, targetY);\n\t\ttargetCtx.restore();\n\t\treturn true;\n\t}\n\n\t/**\n\t * @return {easeljs.AlphaMaskFilter}\n\t */\n\tclone () {\n\t\treturn new AlphaMaskFilter(this.mask);\n\t}\n\n\t/**\n\t * @todo docs\n\t * @param {*} gl\n\t * @param {*} stage\n\t * @param {*} shaderProgram\n\t */\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tif(!this._mapTexture) { this._mapTexture = gl.createTexture(); }\n\n\t\tgl.activeTexture(gl.TEXTURE1);\n\t\tgl.bindTexture(gl.TEXTURE_2D, this._mapTexture);\n\t\tstage.setTextureParams(gl);\n\t\tgl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.mask);\n\n\t\tgl.uniform1i(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uAlphaSampler\"),\n\t\t\t1\n\t\t);\n\t}\n\n}\n","/**\n * @license BlurFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * BoxBlur Algorithm by Mario Klingemann, quasimondo.com\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\nimport Rectangle from \"../geom/Rectangle\";\n\n/**\n * Applies a box blur to DisplayObjects. Note that this filter is fairly CPU intensive, particularly if the quality is\n * set higher than 1.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * let shape = new Shape().set({x:100,y:100});\n * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n * let blurFilter = new BlurFilter(5, 5, 1);\n * shape.filters = [blurFilter];\n * let bounds = blurFilter.getBounds();\n * shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);\n *\n * @param {Number} [blurX=0] The horizontal blur radius in pixels.\n * @param {Number} [blurY=0] The vertical blur radius in pixels.\n * @param {Number} [quality=1] The number of blur iterations.\n */\nexport default class BlurFilter extends Filter {\n\n\tconstructor (blurX = 0, blurY = 0, quality = 1) {\n\t\tsuper();\n\n\t\t/**\n\t\t * @protected\n\t\t * @default 0\n\t\t * @type {Number}\n\t\t */\n\t\tthis._blurX = blurX;\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._blurXTable = [];\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._lastBlurX = null;\n\n\t\t/**\n\t\t * @default 0\n\t\t * @type {Number}\n\t\t */\n\t\tthis._blurY = blurY;\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._blurYTable = [];\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._lastBlurY = null;\n\n\t\t/**\n\t\t * Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a\n\t\t * smoother blur, but take twice as long to run.\n\t\t * @default 1\n\t\t * @type {Number}\n\t\t */\n\t\tthis._quality = (isNaN(quality) || quality < 1) ? 1 : quality;\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._lastQuality = null;\n\n\t\tthis.FRAG_SHADER_TEMPLATE = `\n\t\t\tuniform float xWeight[{{blurX}}];\n\t\t\tuniform float yWeight[{{blurY}}];\n\t\t\tuniform vec2 textureOffset;\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = vec4(0.0);\n\n\t\t\t\tfloat xAdj = ({{blurX}}.0-1.0)/2.0;\n\t\t\t\tfloat yAdj = ({{blurY}}.0-1.0)/2.0;\n\t\t\t\tvec2 sampleOffset;\n\n\t\t\t\tfor(int i=0; i<{{blurX}}; i++) {\n\t\t\t\t\tfor(int j=0; j<{{blurY}}; j++) {\n\t\t\t\t\t\tsampleOffset = vRenderCoord + (textureOffset * vec2(float(i)-xAdj, float(j)-yAdj));\n\t\t\t\t\t\tcolor += texture2D(uSampler, sampleOffset) * (xWeight[i] * yWeight[j]);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tgl_FragColor = color.rgba;\n\t\t\t}\n\t\t`;\n\t}\n\n\t/**\n\t * Horizontal blur radius in pixels.\n\t * @type {Number}\n\t */\n\tget blurX () { return this._blurX; }\n\tset blurX (blurX) {\n\t\tif (isNaN(blurX) || blurX < 0) { blurX = 0; }\n\t\tthis._blurX = blurX;\n\t}\n\n\t/**\n\t * Vertical blur radius in pixels.\n\t * @type {Number}\n\t */\n\tget blurY () { return this._blurY; }\n\tset blurY (blurY) {\n\t\tif (isNaN(blurY) || blurY < 0) { blurY = 0; }\n\t\tthis._blurY = blurY;\n\t}\n\n\t/**\n\t * Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a\n\t * smoother blur, but take twice as long to run.\n\t * @type {Number}\n\t */\n\tget quality () { return this._quality | 0; }\n\tset quality (quality) {\n\t\tif (isNaN(quality) || quality < 0) { quality = 0; }\n\t\tthis._quality = quality;\n\t}\n\n\t/**\n\t * @protected\n\t * @type {*}\n\t */\n\tget _buildShader () {\n\t\tconst xChange = this._lastBlurX !== this._blurX;\n\t\tconst yChange = this._lastBlurY !== this._blurY;\n\t\tconst qChange = this._lastQuality !== this._quality;\n\t\tif (xChange || yChange || qChange) {\n\t\t\t\tif (xChange || qChange) { this._blurXTable = this._getTable(this._blurX * this._quality); }\n\t\t\t\tif (yChange || qChange) { this._blurYTable = this._getTable(this._blurY * this._quality); }\n\t\t\t\tthis._updateShader();\n\t\t\t\tthis._lastBlurX = this._blurX;\n\t\t\t\tthis._lastBlurY = this._blurY;\n\t\t\t\tthis._lastQuality = this._quality;\n\t\t\t\treturn undefined; // force a rebuild\n\t\t}\n\t\treturn this._compiledShader;\n\t}\n\tset _builtShader (value) { this._compiledShader = value; }\n\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\t// load the normalized gaussian weight tables\n\t\tgl.uniform1fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"xWeight\"),\n\t\t\tthis._blurXTable\n\t\t);\n\t\tgl.uniform1fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"yWeight\"),\n\t\t\tthis._blurYTable\n\t\t);\n\n\t\t// what is the size of a single pixel in -1, 1 (webGL) space\n\t\tgl.uniform2f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"textureOffset\"),\n\t\t\t2/(stage._viewportWidth*this._quality), 2/(stage._viewportHeight*this._quality)\n\t\t);\n\t}\n\n\tgetBounds (rect) {\n\t\tlet x = this.blurX|0, y = this.blurY| 0;\n\t\tif (x <= 0 && y <= 0) { return rect; }\n\t\tlet q = Math.pow(this.quality, 0.2);\n\t\treturn (rect || new Rectangle()).pad(y*q+1,x*q+1,y*q+1,x*q+1);\n\t}\n\n\t/**\n\t * @return {easeljs.BlurFilter}\n\t */\n\tclone () {\n\t\treturn new BlurFilter(this.blurX, this.blurY, this.quality);\n\t}\n\n\t_updateShader () {\n\t\tlet result = this.FRAG_SHADER_TEMPLATE;\n\t\tresult = result.replace(/{{blurX}}/g, this._blurXTable.length.toFixed(0));\n\t\tresult = result.replace(/{{blurY}}/g, this._blurYTable.length.toFixed(0));\n\t\tthis.FRAG_SHADER_BODY = result;\n\t}\n\n\t_getTable (spread) {\n\t\tconst EDGE = 4.2;\n\t\tif (spread <= 1) { return [1]; }\n\n\t\tlet result = [];\n\t\tlet count = Math.ceil(spread*2);\n\t\tcount += (count%2)?0:1;\n\t\tlet adjust = (count/2)|0;\n\t\tfor (let i = -adjust; i<=adjust; i++) {\n\t\t\tlet x = (i/adjust)*EDGE;\n\t\t\tresult.push(1/Math.sqrt(2*Math.PI) * Math.pow(Math.E, -(Math.pow(x,2)/4)));\n\t\t}\n\t\tlet factor = result.reduce((a, b) => a + b, 0);\n\t\treturn result.map(currentValue => currentValue / factor);\n\t}\n\n\t_applyFilter (imageData) {\n\t\tlet radiusX = this._blurX >> 1;\n\t\tif (isNaN(radiusX) || radiusX < 0) return false;\n\t\tlet radiusY = this._blurY >> 1;\n\t\tif (isNaN(radiusY) || radiusY < 0) return false;\n\t\tif (radiusX === 0 && radiusY === 0) return false;\n\n\t\tlet iterations = this.quality;\n\t\tif (isNaN(iterations) || iterations < 1) iterations = 1;\n\t\titerations |= 0;\n\t\tif (iterations > 3) iterations = 3;\n\t\tif (iterations < 1) iterations = 1;\n\n\t\tlet px = imageData.data;\n\t\tlet x=0, y=0, i=0, p=0, yp=0, yi=0, yw=0, r=0, g=0, b=0, a=0, pr=0, pg=0, pb=0, pa=0;\n\n\t\tlet divx = (radiusX + radiusX + 1) | 0;\n\t\tlet divy = (radiusY + radiusY + 1) | 0;\n\t\tlet w = imageData.width | 0;\n\t\tlet h = imageData.height | 0;\n\n\t\tlet w1 = (w - 1) | 0;\n\t\tlet h1 = (h - 1) | 0;\n\t\tlet rxp1 = (radiusX + 1) | 0;\n\t\tlet ryp1 = (radiusY + 1) | 0;\n\n\t\tlet ssx = {r:0,b:0,g:0,a:0};\n\t\tlet sx = ssx;\n\t\tfor ( i = 1; i < divx; i++ )\n\t\t{\n\t\t\tsx = sx.n = {r:0,b:0,g:0,a:0};\n\t\t}\n\t\tsx.n = ssx;\n\n\t\tlet ssy = {r:0,b:0,g:0,a:0};\n\t\tlet sy = ssy;\n\t\tfor ( i = 1; i < divy; i++ )\n\t\t{\n\t\t\tsy = sy.n = {r:0,b:0,g:0,a:0};\n\t\t}\n\t\tsy.n = ssy;\n\n\t\tlet si = null;\n\n\n\t\tlet mtx = BlurFilter.MUL_TABLE[radiusX] | 0;\n\t\tlet stx = BlurFilter.SHG_TABLE[radiusX] | 0;\n\t\tlet mty = BlurFilter.MUL_TABLE[radiusY] | 0;\n\t\tlet sty = BlurFilter.SHG_TABLE[radiusY] | 0;\n\n\t\twhile (iterations-- > 0) {\n\n\t\t\tyw = yi = 0;\n\t\t\tlet ms = mtx;\n\t\t\tlet ss = stx;\n\t\t\tfor (y = h; --y > -1;) {\n\t\t\t\tr = rxp1 * (pr = px[(yi) | 0]);\n\t\t\t\tg = rxp1 * (pg = px[(yi + 1) | 0]);\n\t\t\t\tb = rxp1 * (pb = px[(yi + 2) | 0]);\n\t\t\t\ta = rxp1 * (pa = px[(yi + 3) | 0]);\n\n\t\t\t\tsx = ssx;\n\n\t\t\t\tfor( i = rxp1; --i > -1; )\n\t\t\t\t{\n\t\t\t\t\tsx.r = pr;\n\t\t\t\t\tsx.g = pg;\n\t\t\t\t\tsx.b = pb;\n\t\t\t\t\tsx.a = pa;\n\t\t\t\t\tsx = sx.n;\n\t\t\t\t}\n\n\t\t\t\tfor( i = 1; i < rxp1; i++ )\n\t\t\t\t{\n\t\t\t\t\tp = (yi + ((w1 < i ? w1 : i) << 2)) | 0;\n\t\t\t\t\tr += ( sx.r = px[p]);\n\t\t\t\t\tg += ( sx.g = px[p+1]);\n\t\t\t\t\tb += ( sx.b = px[p+2]);\n\t\t\t\t\ta += ( sx.a = px[p+3]);\n\n\t\t\t\t\tsx = sx.n;\n\t\t\t\t}\n\n\t\t\t\tsi = ssx;\n\t\t\t\tfor ( x = 0; x < w; x++ )\n\t\t\t\t{\n\t\t\t\t\tpx[yi++] = (r * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (g * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (b * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (a * ms) >>> ss;\n\n\t\t\t\t\tp = ((yw + ((p = x + radiusX + 1) < w1 ? p : w1)) << 2);\n\n\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\tsi = si.n;\n\n\t\t\t\t}\n\t\t\t\tyw += w;\n\t\t\t}\n\n\t\t\tms = mty;\n\t\t\tss = sty;\n\t\t\tfor (x = 0; x < w; x++) {\n\t\t\t\tyi = (x << 2) | 0;\n\n\t\t\t\tr = (ryp1 * (pr = px[yi])) | 0;\n\t\t\t\tg = (ryp1 * (pg = px[(yi + 1) | 0])) | 0;\n\t\t\t\tb = (ryp1 * (pb = px[(yi + 2) | 0])) | 0;\n\t\t\t\ta = (ryp1 * (pa = px[(yi + 3) | 0])) | 0;\n\n\t\t\t\tsy = ssy;\n\t\t\t\tfor( i = 0; i < ryp1; i++ )\n\t\t\t\t{\n\t\t\t\t\tsy.r = pr;\n\t\t\t\t\tsy.g = pg;\n\t\t\t\t\tsy.b = pb;\n\t\t\t\t\tsy.a = pa;\n\t\t\t\t\tsy = sy.n;\n\t\t\t\t}\n\n\t\t\t\typ = w;\n\n\t\t\t\tfor( i = 1; i <= radiusY; i++ )\n\t\t\t\t{\n\t\t\t\t\tyi = ( yp + x ) << 2;\n\n\t\t\t\t\tr += ( sy.r = px[yi]);\n\t\t\t\t\tg += ( sy.g = px[yi+1]);\n\t\t\t\t\tb += ( sy.b = px[yi+2]);\n\t\t\t\t\ta += ( sy.a = px[yi+3]);\n\n\t\t\t\t\tsy = sy.n;\n\n\t\t\t\t\tif( i < h1 )\n\t\t\t\t\t{\n\t\t\t\t\t\typ += w;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tyi = x;\n\t\t\t\tsi = ssy;\n\t\t\t\tif ( iterations > 0 )\n\t\t\t\t{\n\t\t\t\t\tfor ( y = 0; y < h; y++ )\n\t\t\t\t\t{\n\t\t\t\t\t\tp = yi << 2;\n\t\t\t\t\t\tpx[p+3] = pa =(a * ms) >>> ss;\n\t\t\t\t\t\tif ( pa > 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpx[p] = ((r * ms) >>> ss );\n\t\t\t\t\t\t\tpx[p+1] = ((g * ms) >>> ss );\n\t\t\t\t\t\t\tpx[p+2] = ((b * ms) >>> ss );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tpx[p] = px[p+1] = px[p+2] = 0\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tp = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;\n\n\t\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\t\tsi = si.n;\n\n\t\t\t\t\t\tyi += w;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tfor ( y = 0; y < h; y++ )\n\t\t\t\t\t{\n\t\t\t\t\t\tp = yi << 2;\n\t\t\t\t\t\tpx[p+3] = pa =(a * ms) >>> ss;\n\t\t\t\t\t\tif ( pa > 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpa = 255 / pa;\n\t\t\t\t\t\t\tpx[p] = ((r * ms) >>> ss ) * pa;\n\t\t\t\t\t\t\tpx[p+1] = ((g * ms) >>> ss ) * pa;\n\t\t\t\t\t\t\tpx[p+2] = ((b * ms) >>> ss ) * pa;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tpx[p] = px[p+1] = px[p+2] = 0\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tp = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;\n\n\t\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\t\tsi = si.n;\n\n\t\t\t\t\t\tyi += w;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t\treturn true;\n\t}\n\n}\n\n/**\n * Array of multiply values for blur calculations.\n * @type {Array}\n * @protected\n * @readonly\n * @static\n */\nBlurFilter.MUL_TABLE = [1, 171, 205, 293, 57, 373, 79, 137, 241, 27, 391, 357, 41, 19, 283, 265, 497, 469, 443, 421, 25, 191, 365, 349, 335, 161, 155, 149, 9, 278, 269, 261, 505, 245, 475, 231, 449, 437, 213, 415, 405, 395, 193, 377, 369, 361, 353, 345, 169, 331, 325, 319, 313, 307, 301, 37, 145, 285, 281, 69, 271, 267, 263, 259, 509, 501, 493, 243, 479, 118, 465, 459, 113, 446, 55, 435, 429, 423, 209, 413, 51, 403, 199, 393, 97, 3, 379, 375, 371, 367, 363, 359, 355, 351, 347, 43, 85, 337, 333, 165, 327, 323, 5, 317, 157, 311, 77, 305, 303, 75, 297, 294, 73, 289, 287, 71, 141, 279, 277, 275, 68, 135, 67, 133, 33, 262, 260, 129, 511, 507, 503, 499, 495, 491, 61, 121, 481, 477, 237, 235, 467, 232, 115, 457, 227, 451, 7, 445, 221, 439, 218, 433, 215, 427, 425, 211, 419, 417, 207, 411, 409, 203, 202, 401, 399, 396, 197, 49, 389, 387, 385, 383, 95, 189, 47, 187, 93, 185, 23, 183, 91, 181, 45, 179, 89, 177, 11, 175, 87, 173, 345, 343, 341, 339, 337, 21, 167, 83, 331, 329, 327, 163, 81, 323, 321, 319, 159, 79, 315, 313, 39, 155, 309, 307, 153, 305, 303, 151, 75, 299, 149, 37, 295, 147, 73, 291, 145, 289, 287, 143, 285, 71, 141, 281, 35, 279, 139, 69, 275, 137, 273, 17, 271, 135, 269, 267, 133, 265, 33, 263, 131, 261, 130, 259, 129, 257, 1];\n/**\n * Array of shift values for blur calculations.\n * @type {Array}\n * @protected\n * @static\n */\nBlurFilter.SHG_TABLE = [0, 9, 10, 11, 9, 12, 10, 11, 12, 9, 13, 13, 10, 9, 13, 13, 14, 14, 14, 14, 10, 13, 14, 14, 14, 13, 13, 13, 9, 14, 14, 14, 15, 14, 15, 14, 15, 15, 14, 15, 15, 15, 14, 15, 15, 15, 15, 15, 14, 15, 15, 15, 15, 15, 15, 12, 14, 15, 15, 13, 15, 15, 15, 15, 16, 16, 16, 15, 16, 14, 16, 16, 14, 16, 13, 16, 16, 16, 15, 16, 13, 16, 15, 16, 14, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 13, 14, 16, 16, 15, 16, 16, 10, 16, 15, 16, 14, 16, 16, 14, 16, 16, 14, 16, 16, 14, 15, 16, 16, 16, 14, 15, 14, 15, 13, 16, 16, 15, 17, 17, 17, 17, 17, 17, 14, 15, 17, 17, 16, 16, 17, 16, 15, 17, 16, 17, 11, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 16, 17, 17, 16, 16, 17, 17, 17, 16, 14, 17, 17, 17, 17, 15, 16, 14, 16, 15, 16, 13, 16, 15, 16, 14, 16, 15, 16, 12, 16, 15, 16, 17, 17, 17, 17, 17, 13, 16, 15, 17, 17, 17, 16, 15, 17, 17, 17, 16, 15, 17, 17, 14, 16, 17, 17, 16, 17, 17, 16, 15, 17, 16, 14, 17, 16, 15, 17, 16, 17, 17, 16, 17, 15, 16, 17, 14, 17, 16, 15, 17, 16, 17, 13, 17, 16, 17, 17, 16, 17, 14, 17, 16, 17, 16, 17, 16, 17, 9];\n","/**\n * @license ColorFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\n\n/**\n * Applies a color transform to DisplayObjects.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * let shape = new Shape().set({ x: 100, y: 100 });\n * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n * shape.filters = [ new ColorFilter(0,0,0,1, 0,0,255,0) ];\n * shape.cache(-50, -50, 100, 100);\n *\n * @param {Number} [redMultiplier=1] The amount to multiply against the red channel. This is a range between 0 and 1.\n * @param {Number} [greenMultiplier=1] The amount to multiply against the green channel. This is a range between 0 and 1.\n * @param {Number} [blueMultiplier=1] The amount to multiply against the blue channel. This is a range between 0 and 1.\n * @param {Number} [alphaMultiplier=1] The amount to multiply against the alpha channel. This is a range between 0 and 1.\n * @param {Number} [redOffset=0] The amount to add to the red channel after it has been multiplied. This is a range\n * between -255 and 255.\n * @param {Number} [greenOffset=0] The amount to add to the green channel after it has been multiplied. This is a range\n * between -255 and 255.\n * @param {Number} [blueOffset=0] The amount to add to the blue channel after it has been multiplied. This is a range\n * between -255 and 255.\n * @param {Number} [alphaOffset=0] The amount to add to the alpha channel after it has been multiplied. This is a range\n * between -255 and 255.\n */\nexport default class ColorFilter extends Filter {\n\n\tconstructor (redMultiplier = 1, greenMultiplier = 1, blueMultiplier = 1, alphaMultiplier = 1, redOffset = 0, greenOffset = 0, blueOffset = 0, alphaOffset = 0) {\n\t\tsuper();\n\n\t\t/**\n\t\t * Red channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.redMultiplier = redMultiplier;\n\n\t\t/**\n\t\t * Green channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.greenMultiplier = greenMultiplier;\n\n\t\t/**\n\t\t * Blue channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.blueMultiplier = blueMultiplier;\n\n\t\t/**\n\t\t * Alpha channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.alphaMultiplier = alphaMultiplier;\n\n\t\t/**\n\t\t * Red channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.redOffset = redOffset;\n\n\t\t/**\n\t\t * Green channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.greenOffset = greenOffset;\n\n\t\t/**\n\t\t * Blue channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.blueOffset = blueOffset;\n\n\t\t/**\n\t\t * Alpha channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.alphaOffset = alphaOffset;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform vec4 uColorMultiplier;\n\t\t\tuniform vec4 uColorOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tgl_FragColor = (color * uColorMultiplier) + uColorOffset;\n\t\t\t}\n\t\t`;\n\n\t}\n\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMultiplier\"),\n\t\t\tthis.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier\n\t\t);\n\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorOffset\"),\n\t\t\tthis.redOffset/255, this.greenOffset/255, this.blueOffset/255, this.alphaOffset/255\n\t\t);\n\t}\n\n\t/**\n\t * @return {easeljs.ColorFilter}\n\t */\n\tclone () {\n\t\treturn new ColorFilter(\n\t\t\tthis.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier,\n\t\t\tthis.redOffset, this.greenOffset, this.blueOffset, this.alphaOffset\n\t\t);\n\t}\n\n\t_applyFilter (imageData) {\n\t\tlet data = imageData.data;\n\t\tconst l = data.length;\n\t\tfor (let i=0; i 0) ? 3*value/100 : value/100);\n\t\tlet lumR = 0.3086;\n\t\tlet lumG = 0.6094;\n\t\tlet lumB = 0.0820;\n\t\tthis._multiplyMatrix([\n\t\t\tlumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0,\n\t\t\tlumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0,\n\t\t\tlumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t}\n\n\n\t/**\n\t * Adjusts the hue of the pixel color.\n\t * @param {Number} value A value between -180 & 180.\n\t * @return {easeljs.ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tadjustHue (value) {\n\t\tif (value === 0 || isNaN(value)) { return this; }\n\t\tvalue = this._cleanValue(value, 180)/180*Math.PI;\n\t\tlet cosVal = Math.cos(value);\n\t\tlet sinVal = Math.sin(value);\n\t\tlet lumR = 0.213;\n\t\tlet lumG = 0.715;\n\t\tlet lumB = 0.072;\n\t\tthis._multiplyMatrix([\n\t\t\tlumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,\n\t\t\tlumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,\n\t\t\tlumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Concatenates (multiplies) the specified matrix with this one.\n\t * @param {Array} matrix An array or ColorMatrix instance.\n\t * @return {easeljs.ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tconcat (matrix) {\n\t\tmatrix = this._fixMatrix(matrix);\n\t\tif (matrix.length != ColorMatrix.LENGTH) { return this; }\n\t\tthis._multiplyMatrix(matrix);\n\t\treturn this;\n\t}\n\n\t/**\n\t * @return {easeljs.ColorMatrix} A clone of this ColorMatrix.\n\t */\n\tclone () {\n\t\treturn (new ColorMatrix()).copy(this);\n\t}\n\n\t/**\n\t * Return a length 25 (5x5) array instance containing this matrix's values.\n\t * @return {Array} An array holding this matrix's values.\n\t */\n\ttoArray () {\n\t\tconst arr = [];\n\t\tconst l = ColorMatrix.LENGTH;\n\t\tfor (let i=0; i ColorMatrix.LENGTH) {\n\t\t\tmatrix = matrix.slice(0, ColorMatrix.LENGTH);\n\t\t}\n\t\treturn matrix;\n\t}\n\n}\n\n/**\n * Array of delta values for contrast calculations.\n * @type {Array}\n * @protected\n * @readonly\n * @static\n */\nColorMatrix.DELTA_INDEX = Object.freeze([\n \t0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,\n \t0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,\n \t0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,\n \t0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,\n \t0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,\n \t1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,\n \t1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,\n \t2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,\n \t4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,\n \t7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,\n \t10.0\n]);\n/**\n * Identity matrix values.\n * @type {Array}\n * @protected\n * @readonly\n * @static\n */\nColorMatrix.IDENTITY_MATRIX = Object.freeze([\n \t1,0,0,0,0,\n \t0,1,0,0,0,\n \t0,0,1,0,0,\n \t0,0,0,1,0,\n \t0,0,0,0,1\n]);\n/**\n * The constant length of a color matrix.\n * @type {Number}\n * @protected\n * @readonly\n * @static\n */\nColorMatrix.LENGTH = 25;\n","/**\n * @license ColorMatrixFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\n\n/**\n * Allows you to carry out complex color operations such as modifying saturation, brightness, or inverting. See the\n * {@link easeljs.ColorMatrix} for more information on changing colors. For an easier color transform,\n * consider the {@link easeljs.ColorFilter}.\n *\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * let shape = new Shape().set({ x: 100, y: 100 });\n * shape.graphics.beginFill(\"#ff0000\").drawCircle(0, 0, 50);\n * let matrix = new ColorMatrix().adjustHue(180).adjustSaturation(100);\n * shape.filters = [ new ColorMatrixFilter(matrix) ];\n * shape.cache(-50, -50, 100, 100);\n *\n * @param {Array | easeljs.ColorMatrix} matrix A 4x5 matrix describing the color operation to perform.\n */\nexport default class ColorMatrixFilter extends Filter {\n\n\tconstructor (matrix) {\n\t\tsuper();\n\n\t\t/**\n\t\t * A 4x5 matrix describing the color operation to perform.\n\t\t * @type {Array | easeljs.ColorMatrix}\n\t\t */\n\t\tthis.matrix = matrix;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform mat4 uColorMatrix;\n\t\t\tuniform vec4 uColorMatrixOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tmat4 m = uColorMatrix;\n\t\t\t\tvec4 newColor = vec4(0,0,0,0);\n\t\t\t\tnewColor.r = color.r*m[0][0] + color.g*m[0][1] + color.b*m[0][2] + color.a*m[0][3];\n\t\t\t\tnewColor.g = color.r*m[1][0] + color.g*m[1][1] + color.b*m[1][2] + color.a*m[1][3];\n\t\t\t\tnewColor.b = color.r*m[2][0] + color.g*m[2][1] + color.b*m[2][2] + color.a*m[2][3];\n\t\t\t\tnewColor.a = color.r*m[3][0] + color.g*m[3][1] + color.b*m[3][2] + color.a*m[3][3];\n\n\t\t\t\tgl_FragColor = newColor + uColorMatrixOffset;\n\t\t\t}\n\t\t`;\n\t}\n\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tlet mat = this.matrix;\n\t\tlet colorMatrix = new Float32Array([\n\t\t\tmat[0],mat[1],mat[2],mat[3],\n\t\t\tmat[5],mat[6],mat[7],mat[8],\n\t\t\tmat[10],mat[11],mat[12],mat[13],\n\t\t\tmat[15],mat[16],mat[17],mat[18]\n\t\t]);\n\n\t\tgl.uniformMatrix4fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMatrix\"),\n\t\t\tfalse, colorMatrix\n\t\t);\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMatrixOffset\"),\n\t\t\tmat[4]/255, mat[9]/255, mat[14]/255, mat[19]/255\n\t\t);\n\t}\n\n\t/**\n\t * @return {easeljs.ColorMatrixFilter}\n\t */\n\tclone () {\n\t\treturn new ColorMatrixFilter(this.matrix);\n\t}\n\n\t_applyFilter (imageData) {\n\t\tlet data = imageData.data;\n\t\tconst l = data.length;\n\t\tlet r,g,b,a;\n\t\tlet mtx = this.matrix;\n\t\tlet m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4];\n\t\tlet m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9];\n\t\tlet m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14];\n\t\tlet m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19];\n\n\t\tfor (let i=0; i {\n * // clicked\n * }));\n *\n * @param {easeljs.Sprite | easeljs.MovieClip} target The instance to manage.\n * @param {String} [outLabel=\"out\"] The label or animation to go to when the user rolls out of the button.\n * @param {String} [overLabel=\"over\"] The label or animation to go to when the user rolls over the button.\n * @param {String} [downLabel=\"down\"] The label or animation to go to when the user presses the button.\n * @param {Boolean} [play=false] If the helper should call \"gotoAndPlay\" or \"gotoAndStop\" on the button when changing\n * states.\n * @param {easeljs.DisplayObject} [hitArea] An optional item to use as the hit state for the button. If this is not defined,\n * then the button's visible states will be used instead. Note that the same instance as the \"target\" argument can be\n * used for the hitState.\n * @param {String} [hitLabel] The label or animation on the hitArea instance that defines the hitArea bounds. If this is\n * null, then the default state of the hitArea will be used.\n */\nexport default class ButtonHelper {\n\n\tconstructor (target, outLabel = \"out\", overLabel = \"over\", downLabel = \"down\", play = false, hitArea, hitLabel) {\n\t\tif (!target.addEventListener) { return; }\n\n\t\t/**\n\t\t * The target for this button helper.\n\t\t * @type {easeljs.MovieClip | easeljs.Sprite}\n\t\t * @readonly\n\t\t */\n\t\tthis.target = target;\n\n\t\t/**\n\t\t * The label name or frame number to display when the user mouses out of the target.\n\t\t * @default \"over\"\n\t\t * @type {String | Number}\n\t\t */\n\t\tthis.overLabel = overLabel;\n\n\t\t/**\n\t\t * The label name or frame number to display when the user mouses over the target.\n\t\t * @default \"out\"\n\t\t * @type {String | Number}\n\t\t */\n\t\tthis.outLabel = outLabel;\n\n\t\t/**\n\t\t * The label name or frame number to display when the user presses on the target.\n\t\t * @default \"down\"\n\t\t * @type {String | Number}\n\t\t */\n\t\tthis.downLabel = downLabel == null;\n\n\t\t/**\n\t\t * If true, then ButtonHelper will call gotoAndPlay, if false, it will use gotoAndStop.\n\t\t * @default false\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.play = play;\n\n\t\t/**\n\t\t * @type {Boolean}\n\t\t * @protected\n\t\t */\n\t\tthis._isPressed = false;\n\n\t\t/**\n\t\t * @type {Boolean}\n\t\t * @protected\n\t\t */\n\t\tthis._isOver = false;\n\n\t\t/**\n\t\t * @type {Boolean}\n\t\t * @protected\n\t\t */\n\t\tthis._enabled = false;\n\n\t\ttarget.mouseChildren = false; // prevents issues when children are removed from the display list when state changes.\n\t\tthis.enabled = true;\n\t\tthis.handleEvent({});\n\t\tif (hitArea) {\n\t\t\tif (hitLabel) {\n\t\t\t\thitArea.actionsEnabled = false;\n\t\t\t\thitArea.gotoAndStop&&hitArea.gotoAndStop(hitLabel);\n\t\t\t}\n\t\t\ttarget.hitArea = hitArea;\n\t\t}\n\t}\n\n\t/**\n\t * Enables or disables the button functionality on the target.\n\t * @type {Boolean}\n\t */\n\tget enabled () { return this._enabled; }\n\tset enabled (enabled) {\n\t\tif (enabled === this._enabled) { return; }\n\t\tlet o = this.target;\n\t\tthis._enabled = enabled;\n\t\tif (enabled) {\n\t\t\to.cursor = \"pointer\";\n\t\t\to.addEventListener(\"rollover\", this);\n\t\t\to.addEventListener(\"rollout\", this);\n\t\t\to.addEventListener(\"mousedown\", this);\n\t\t\to.addEventListener(\"pressup\", this);\n\t\t\tif (o._reset) { o.__reset = o._reset; o._reset = this._reset;}\n\t\t} else {\n\t\t\to.cursor = null;\n\t\t\to.removeEventListener(\"rollover\", this);\n\t\t\to.removeEventListener(\"rollout\", this);\n\t\t\to.removeEventListener(\"mousedown\", this);\n\t\t\to.removeEventListener(\"pressup\", this);\n\t\t\tif (o.__reset) { o._reset = o.__reset; delete(o.__reset); }\n\t\t}\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * @param {Object} evt The mouse event to handle.\n\t * @protected\n\t */\n\thandleEvent (evt) {\n\t\tlet label, t = this.target, type = evt.type;\n\t\tif (type === \"mousedown\") {\n\t\t\tthis._isPressed = true;\n\t\t\tlabel = this.downLabel;\n\t\t} else if (type === \"pressup\") {\n\t\t\tthis._isPressed = false;\n\t\t\tlabel = this._isOver ? this.overLabel : this.outLabel;\n\t\t} else if (type === \"rollover\") {\n\t\t\tthis._isOver = true;\n\t\t\tlabel = this._isPressed ? this.downLabel : this.overLabel;\n\t\t} else { // rollout and default\n\t\t\tthis._isOver = false;\n\t\t\tlabel = this._isPressed ? this.overLabel : this.outLabel;\n\t\t}\n\t\tif (this.play) {\n\t\t\tt.gotoAndPlay&&t.gotoAndPlay(label);\n\t\t} else {\n\t\t\tt.gotoAndStop&&t.gotoAndStop(label);\n\t\t}\n\t}\n\n\t/**\n\t * Injected into target. Preserves the paused state through a reset.\n\t * @protected\n\t */\n\t_reset () {\n\t\t// TODO: explore better ways to handle this issue. This is hacky & disrupts object signatures.\n\t\tlet p = this.paused;\n\t\tthis.__reset();\n\t\tthis.paused = p;\n\t}\n\n}\n","/**\n * @license Touch\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Global utility for working with multi-touch enabled devices in EaselJS. Currently supports W3C Touch API (iOS and\n * modern Android browser) and the Pointer API (IE), including ms-prefixed events in IE10, and unprefixed in IE11.\n *\n * Ensure that you {{#crossLink \"Touch/disable\"}}{{/crossLink}} touch when cleaning up your application. You do not have\n * to check if touch is supported to enable it, as it will fail gracefully if it is not supported.\n *\n * Note: It is important to disable Touch on a stage that you are no longer using:\n *\n * @memberof easeljs\n * @name easeljs.Touch\n * @example\n * let stage = new Stage(\"canvasId\");\n * Touch.enable(stage);\n */\nexport default {\n\n\t/**\n\t * Returns `true` if touch is supported in the current browser.\n\t * @return {Boolean} Indicates whether touch is supported in the current browser.\n\t */\n\tisSupported () {\n\t\treturn\t!!(('ontouchstart' in window) // iOS & Android\n\t\t\t|| (window.MSPointerEvent && window.navigator.msMaxTouchPoints > 0) // IE10\n\t\t\t|| (window.PointerEvent && window.navigator.maxTouchPoints > 0)); // IE11+\n\t},\n\n\t/**\n\t * Enables touch interaction for the specified EaselJS {@link easeljs.Stage}. Currently supports iOS\n\t * (and compatible browsers, such as modern Android browsers), and IE10/11. Supports both single touch and\n\t * multi-touch modes. Extends the EaselJS {@link easeljs.MouseEvent} model, but without support for\n\t * double click or over/out events.\n\t * @param {easeljs.Stage} stage The Stage to enable touch on.\n\t * @param {Boolean} [singleTouch=false] If `true`, only a single touch will be active at a time.\n\t * @param {Boolean} [allowDefault=false] If `true`, then default gesture actions (ex. scrolling, zooming) will be\n\t * allowed when the user is interacting with the target canvas.\n\t * @return {Boolean} Returns `true` if touch was successfully enabled on the target stage.\n\t */\n\tenable (stage, singleTouch = false, allowDefault = false) {\n\t\tif (!stage || !stage.canvas || !this.isSupported()) { return false; }\n\t\tif (stage.__touch) { return true; }\n\n\t\t// inject required properties on stage:\n\t\tstage.__touch = {pointers:{}, multitouch:!singleTouch, preventDefault:!allowDefault, count:0};\n\n\t\t// note that in the future we may need to disable the standard mouse event model before adding\n\t\t// these to prevent duplicate calls. It doesn't seem to be an issue with iOS devices though.\n\t\tif ('ontouchstart' in window) { this._IOS_enable(stage); }\n\t\telse if (window.PointerEvent || window.MSPointerEvent) { this._IE_enable(stage); }\n\t\treturn true;\n\t},\n\n\t/**\n\t * Removes all listeners that were set up when calling `Touch.enable()` on a stage.\n\t * @param {easeljs.Stage} stage The Stage to disable touch on.\n\t */\n\tdisable (stage) {\n\t\tif (!stage) { return; }\n\t\tif ('ontouchstart' in window) { this._IOS_disable(stage); }\n\t\telse if (window.PointerEvent || window.MSPointerEvent) { this._IE_disable(stage); }\n\t\tdelete stage.__touch;\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IOS_enable (stage) {\n\t\tlet canvas = stage.canvas;\n\t\tlet f = stage.__touch.f = e => this._IOS_handleEvent(stage, e);\n\t\tcanvas.addEventListener(\"touchstart\", f, false);\n\t\tcanvas.addEventListener(\"touchmove\", f, false);\n\t\tcanvas.addEventListener(\"touchend\", f, false);\n\t\tcanvas.addEventListener(\"touchcancel\", f, false);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IOS_disable (stage) {\n\t\tlet canvas = stage.canvas;\n\t\tif (!canvas) { return; }\n\t\tlet f = stage.__touch.f;\n\t\tcanvas.removeEventListener(\"touchstart\", f, false);\n\t\tcanvas.removeEventListener(\"touchmove\", f, false);\n\t\tcanvas.removeEventListener(\"touchend\", f, false);\n\t\tcanvas.removeEventListener(\"touchcancel\", f, false);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {Object} e The event to handle\n\t */\n\t_IOS_handleEvent (stage, e) {\n\t\tif (!stage) { return; }\n\t\tif (stage.__touch.preventDefault) { e.preventDefault&&e.preventDefault(); }\n\t\tlet touches = e.changedTouches;\n\t\tlet type = e.type;\n\t\tconst l = touches.length;\n\t\tfor (let touch of touches) {\n\t\t\tlet id = touch.identifier;\n\t\t\tif (touch.target != stage.canvas) { continue; }\n\n\t\t\tif (type === \"touchstart\") {\n\t\t\t\tthis._handleStart(stage, id, e, touch.pageX, touch.pageY);\n\t\t\t} else if (type === \"touchmove\") {\n\t\t\t\tthis._handleMove(stage, id, e, touch.pageX, touch.pageY);\n\t\t\t} else if (type === \"touchend\" || type === \"touchcancel\") {\n\t\t\t\tthis._handleEnd(stage, id, e);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IE_enable (stage) {\n\t\tlet canvas = stage.canvas;\n\t\tlet f = stage.__touch.f = e => this._IE_handleEvent(stage,e);\n\n\t\tif (window.PointerEvent === undefined) {\n\t\t\tcanvas.addEventListener(\"MSPointerDown\", f, false);\n\t\t\twindow.addEventListener(\"MSPointerMove\", f, false);\n\t\t\twindow.addEventListener(\"MSPointerUp\", f, false);\n\t\t\twindow.addEventListener(\"MSPointerCancel\", f, false);\n\t\t\tif (stage.__touch.preventDefault) { canvas.style.msTouchAction = \"none\"; }\n\t\t} else {\n\t\t\tcanvas.addEventListener(\"pointerdown\", f, false);\n\t\t\twindow.addEventListener(\"pointermove\", f, false);\n\t\t\twindow.addEventListener(\"pointerup\", f, false);\n\t\t\twindow.addEventListener(\"pointercancel\", f, false);\n\t\t\tif (stage.__touch.preventDefault) { canvas.style.touchAction = \"none\"; }\n\n\t\t}\n\t\tstage.__touch.activeIDs = {};\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IE_disable (stage) {\n\t\tlet f = stage.__touch.f;\n\n\t\tif (window.PointerEvent === undefined) {\n\t\t\twindow.removeEventListener(\"MSPointerMove\", f, false);\n\t\t\twindow.removeEventListener(\"MSPointerUp\", f, false);\n\t\t\twindow.removeEventListener(\"MSPointerCancel\", f, false);\n\t\t\tif (stage.canvas) {\n\t\t\t\tstage.canvas.removeEventListener(\"MSPointerDown\", f, false);\n\t\t\t}\n\t\t} else {\n\t\t\twindow.removeEventListener(\"pointermove\", f, false);\n\t\t\twindow.removeEventListener(\"pointerup\", f, false);\n\t\t\twindow.removeEventListener(\"pointercancel\", f, false);\n\t\t\tif (stage.canvas) {\n\t\t\t\tstage.canvas.removeEventListener(\"pointerdown\", f, false);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {Object} e The event to handle.\n\t */\n\t_IE_handleEvent (stage, e) {\n\t\tif (!stage) { return; }\n\t\tif (stage.__touch.preventDefault) { e.preventDefault && e.preventDefault(); }\n\t\tlet type = e.type;\n\t\tlet id = e.pointerId;\n\t\tlet ids = stage.__touch.activeIDs;\n\n\t\tif (type === \"MSPointerDown\" || type === \"pointerdown\") {\n\t\t\tif (e.srcElement != stage.canvas) { return; }\n\t\t\tids[id] = true;\n\t\t\tthis._handleStart(stage, id, e, e.pageX, e.pageY);\n\t\t} else if (ids[id]) { // it's an id we're watching\n\t\t\tif (type === \"MSPointerMove\" || type === \"pointermove\") {\n\t\t\t\tthis._handleMove(stage, id, e, e.pageX, e.pageY);\n\t\t\t} else if (type === \"MSPointerUp\" || type === \"MSPointerCancel\"\n\t\t\t\t\t|| type === \"pointerup\" || type === \"pointercancel\") {\n\t\t\t\tdelete(ids[id]);\n\t\t\t\tthis._handleEnd(stage, id, e);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {String | Number} id\n\t * @param {Object} e\n\t * @param {Number} x\n\t * @param {Number} y\n\t */\n\t_handleStart (stage, id, e, x, y) {\n\t\tlet props = stage.__touch;\n\t\tif (!props.multitouch && props.count) { return; }\n\t\tlet ids = props.pointers;\n\t\tif (ids[id]) { return; }\n\t\tids[id] = true;\n\t\tprops.count++;\n\t\tstage._handlePointerDown(id, e, x, y);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {String | Number} id\n\t * @param {Object} e\n\t * @param {Number} x\n\t * @param {Number} y\n\t */\n\t_handleMove (stage, id, e, x, y) {\n\t\tif (!stage.__touch.pointers[id]) { return; }\n\t\tstage._handlePointerMove(id, e, x, y);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {String | Number} id\n\t * @param {Object} e\n\t */\n\t_handleEnd (stage, id, e) {\n\t\t// TODO: cancel should be handled differently for proper UI (ex. an up would trigger a click, a cancel would more closely resemble an out).\n\t\tlet props = stage.__touch;\n\t\tlet ids = props.pointers;\n\t\tif (!ids[id]) { return; }\n\t\tprops.count--;\n\t\tstage._handlePointerUp(id, e, true);\n\t\tdelete(ids[id]);\n\t}\n\n}\n","/**\n * @license SpriteSheetBuilder\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport { EventDispatcher, Event } from \"@createjs/core\";\nimport Rectangle from \"../geom/Rectangle\";\nimport SpriteSheet from \"../display/SpriteSheet\";\n\n/**\n * The SpriteSheetBuilder allows you to generate {@link easeljs.SpriteSheet} instances at run time\n * from any display object. This can allow you to maintain your assets as vector graphics (for low file size), and\n * render them at run time as SpriteSheets for better performance.\n *\n * SpriteSheets can be built either synchronously, or asynchronously, so that large SpriteSheets can be generated\n * without locking the UI.\n *\n * Note that the \"images\" used in the generated SpriteSheet are actually canvas elements, and that they will be\n * sized to the nearest power of 2 up to the value of {@link easeljs.SpriteSheetBuilder#maxWidth}\n * or {@link easeljs.SpriteSheetBuilder#maxHeight}.\n *\n * @memberof easeljs\n * @extends core.EventDispatcher\n *\n * @param {Number} [framerate=0] The {{#crossLink \"SpriteSheet/framerate:property\"}}{{/crossLink}} of\n * {@link easeljs.SpriteSheet} instances that are created.\n */\nexport default class SpriteSheetBuilder extends EventDispatcher {\n\n\tconstructor (framerate = 0) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The maximum width for the images (not individual frames) in the generated SpriteSheet. It is recommended to\n\t\t * use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max\n\t\t * dimensions, then additional images will be created as needed.\n\t\t * @type {Number}\n\t\t * @default 2048\n\t\t*/\n\t\tthis.maxWidth = 2048;\n\n\t\t/**\n\t\t * The maximum height for the images (not individual frames) in the generated SpriteSheet. It is recommended to\n\t\t * use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max\n\t\t * dimensions, then additional images will be created as needed.\n\t\t * @type {Number}\n\t\t * @default 2048\n\t\t */\n\t\tthis.maxHeight = 2048;\n\n\t\t/**\n\t\t * The SpriteSheet that was generated. This will be null before a build is completed successfully.\n\t\t * @type {easeljs.SpriteSheet}\n\t\t */\n\t\tthis.spriteSheet = null;\n\n\t\t/**\n\t\t * The scale to apply when drawing all frames to the SpriteSheet. This is multiplied against any scale specified\n\t\t * in the addFrame call. This can be used, for example, to generate a SpriteSheet at run time that is tailored\n\t\t * to the a specific device resolution (ex. tablet vs mobile).\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scale = 1;\n\n\t\t/**\n\t\t* The padding to use between frames. This is helpful to preserve antialiasing on drawn vector content.\n\t\t* @type {Number}\n\t\t* @default 1\n\t\t*/\n\t\tthis.padding = 1;\n\n\t\t/**\n\t\t * A number from 0.01 to 0.99 that indicates what percentage of time the builder can use. This can be\n\t\t * thought of as the number of seconds per second the builder will use. For example, with a timeSlice value of 0.3,\n\t\t * the builder will run 20 times per second, using approximately 15ms per build (30% of available time, or 0.3s per second).\n\t\t * Defaults to 0.3.\n\t\t * @type {Number}\n\t\t * @default 0.3\n\t\t */\n\t\tthis.timeSlice = 0.3;\n\n\t\t/**\n\t\t * A value between 0 and 1 that indicates the progress of a build, or -1 if a build has not\n\t\t * been initiated.\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t * @readonly\n\t\t */\n\t\tthis.progress = -1;\n\n\t\t/**\n\t\t * A {@link easeljs.SpriteSheet#framerate} value that will be passed to new SpriteSheet instances that are\n\t\t * created. If no framerate is specified (or it is 0), then SpriteSheets will use the {@link core.Ticker} framerate.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.framerate = framerate;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._frames = [];\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._animations = {};\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._data = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._nextFrameIndex = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._index = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._timerID = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._scale = 1;\n\t}\n\n\t/**\n\t * Adds a frame to the {@link easeljs.SpriteSheet}. Note that the frame will not be drawn until you\n\t * call {@link easeljs.SpriteSheetBuilder#build} method. The optional setup params allow you to have\n\t * a function run immediately before the draw occurs. For example, this allows you to add a single source multiple\n\t * times, but manipulate it or its children to change it to generate different frames.\n\t *\n\t * Note that the source's transformations (x, y, scale, rotate, alpha) will be ignored, except for regX/Y. To apply\n\t * transforms to a source object and have them captured in the SpriteSheet, simply place it into a {@link easeljs.Container}\n\t * and pass in the Container as the source.\n\t * @param {easeljs.DisplayObject} source The source {{#crossLink \"DisplayObject\"}}{{/crossLink}} to draw as the frame.\n\t * @param {easeljs.Rectangle} [sourceRect] A {{#crossLink \"Rectangle\"}}{{/crossLink}} defining the portion of the\n\t * source to draw to the frame. If not specified, it will look for a `getBounds` method, bounds property, or\n\t * `nominalBounds` property on the source to use. If one is not found, the frame will be skipped.\n\t * @param {Number} [scale=1] Optional. The scale to draw this frame at. Default is 1.\n\t * @param {Function} [setupFunction] A function to call immediately before drawing this frame. It will be called with two parameters: the source, and setupData.\n\t * @param {Object} [setupData] Arbitrary setup data to pass to setupFunction as the second parameter.\n\t * @return {Number} The index of the frame that was just added, or null if a sourceRect could not be determined.\n\t */\n\taddFrame (source, sourceRect, scale = 1, setupFunction, setupData) {\n\t\tif (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }\n\t\tlet rect = sourceRect||source.bounds||source.nominalBounds||(source.getBounds&&source.getBounds());\n\t\tif (!rect) { return null; }\n\t\treturn this._frames.push({ source, sourceRect: rect, scale, funct: setupFunction, data: setupData, index: this._frames.length, height: rect.height*scale }) - 1;\n\t}\n\n\t/**\n\t * Adds an animation that will be included in the created {@link easeljs.SpriteSheet}.\n\t * @param {String} name The name for the animation.\n\t * @param {Array} frames An array of frame indexes that comprise the animation. Ex. [3,6,5] would describe an animation\n\t * that played frame indexes 3, 6, and 5 in that order.\n\t * @param {String} [next] Specifies the name of the animation to continue to after this animation ends. You can\n\t * also pass false to have the animation stop when it ends. By default it will loop to the start of the same animation.\n\t * @param {Number} [speed] Specifies a frame advance speed for this animation. For example, a value of 0.5 would\n\t * cause the animation to advance every second tick. Note that earlier versions used `frequency` instead, which had\n\t * the opposite effect.\n\t */\n\taddAnimation (name, frames, next, speed) {\n\t\tif (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }\n\t\tthis._animations[name] = { frames, next, speed };\n\t}\n\n\t/**\n\t * This will take a {@link easeljs.MovieClip} instance, and add its frames and labels to this\n\t * builder. Labels will be added as an animation running from the label index to the next label. For example, if\n\t * there is a label named \"foo\" at frame 0 and a label named \"bar\" at frame 10, in a MovieClip with 15 frames, it\n\t * will add an animation named \"foo\" that runs from frame index 0 to 9, and an animation named \"bar\" that runs from\n\t * frame index 10 to 14.\n\t *\n\t * Note that this will iterate through the full MovieClip with {@link easeljs.MovieClip#actionsEnabled}\n\t * set to `false`, ending on the last frame.\n\t * @param {easeljs.MovieClip} source The source MovieClip instance to add to the SpriteSheet.\n\t * @param {easeljs.Rectangle} [sourceRect] A Rectangle defining the portion of the source to\n\t * draw to the frame. If not specified, it will look for a {{#crossLink \"DisplayObject/getBounds\"}}{{/crossLink}}\n\t * method, `frameBounds` Array, `bounds` property, or `nominalBounds` property on the source to use. If one is not\n\t * found, the MovieClip will be skipped.\n\t * @param {Number} [scale=1] The scale to draw the movie clip at.\n\t * @param {Function} [setupFunction] A function to call immediately before drawing each frame. It will be called\n\t * with three parameters: the source, setupData, and the frame index.\n\t * @param {Object} [setupData] Arbitrary setup data to pass to setupFunction as the second parameter.\n\t * @param {Function} [labelFunction] This method will be called for each MovieClip label that is added with four\n\t * parameters: the label name, the source MovieClip instance, the starting frame index (in the movieclip timeline)\n\t * and the end index. It must return a new name for the label/animation, or `false` to exclude the label.\n\t */\n\taddMovieClip (source, sourceRect, scale = 1, setupFunction, setupData, labelFunction) {\n\t\tif (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }\n\t\tlet rects = source.frameBounds;\n\t\tlet rect = sourceRect||source.bounds||source.nominalBounds||(source.getBounds&&source.getBounds());\n\t\tif (!rect && !rects) { return; }\n\n\t\tlet baseFrameIndex = this._frames.length;\n\t\tconst duration = source.timeline.duration;\n\t\tfor (let i=0; i a.index-b.index);\n\t\t\tfor (let i=0,l=lbls.length; i this._run(), 50-Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50);\n\t}\n\n\t/**\n\t * Stops the current asynchronous build.\n\t */\n\tstopAsync () {\n\t\tclearTimeout(this._timerID);\n\t\tthis._data = null;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @override\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_startBuild () {\n\t\tlet pad = this.padding||0;\n\t\tthis.progress = 0;\n\t\tthis.spriteSheet = null;\n\t\tthis._index = 0;\n\t\tthis._scale = this.scale;\n\t\tlet dataFrames = [];\n\t\tthis._data = {\n\t\t\timages: [],\n\t\t\tframes: dataFrames,\n\t\t\tframerate: this.framerate,\n\t\t\tanimations: this._animations // TODO: should we \"clone\" _animations in case someone adds more animations after a build?\n\t\t};\n\n\t\tlet frames = this._frames.slice();\n\t\tframes.sort((a, b) => (a.height<=b.height) ? -1 : 1);\n\n\t\tif (frames[frames.length-1].height+pad*2 > this.maxHeight) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }\n\t\tlet y=0, x=0;\n\t\tlet img = 0;\n\t\twhile (frames.length) {\n\t\t\tlet o = this._fillRow(frames, y, img, dataFrames, pad);\n\t\t\tif (o.w > x) { x = o.w; }\n\t\t\ty += o.h;\n\t\t\tif (!o.h || !frames.length) {\n\t\t\t\tlet canvas = window.createjs&&createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\t\tcanvas.width = this._getSize(x,this.maxWidth);\n\t\t\t\tcanvas.height = this._getSize(y,this.maxHeight);\n\t\t\t\tthis._data.images[img] = canvas;\n\t\t\t\tif (!o.h) {\n\t\t\t\t\tx=y=0;\n\t\t\t\t\timg++;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t */\n\t_setupMovieClipFrame (source, data) {\n\t\tlet ae = source.actionsEnabled;\n\t\tsource.actionsEnabled = false;\n\t\tsource.gotoAndStop(data.i);\n\t\tsource.actionsEnabled = ae;\n\t\tdata.f&&data.f(source, data.d, data.i);\n\t}\n\n\t/**\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t */\n\t_getSize (size, max) {\n\t\tlet pow = 4;\n\t\twhile (Math.pow(2, ++pow) < size) {}\n\t\treturn Math.min(max, Math.pow(2, pow));\n\t};\n\n\t/**\n\t * @protected\n\t * @param {Array} frames\n\t * @param {Number} y\n\t * @param {HTMLImageElement} img\n\t * @param {Object} dataFrames\n\t * @param {Number} pad\n\t * @return {Number} The width & height of the row.\n\t */\n\t_fillRow (frames, y, img, dataFrames, pad) {\n\t\tlet w = this.maxWidth;\n\t\tlet maxH = this.maxHeight;\n\t\ty += pad;\n\t\tlet h = maxH-y;\n\t\tlet x = pad;\n\t\tlet height = 0;\n\t\tfor (let i=frames.length-1; i>=0; i--) {\n\t\t\tlet frame = frames[i];\n\t\t\tlet sc = this._scale*frame.scale;\n\t\t\tlet rect = frame.sourceRect;\n\t\t\tlet source = frame.source;\n\t\t\tlet rx = Math.floor(sc*rect.x-pad);\n\t\t\tlet ry = Math.floor(sc*rect.y-pad);\n\t\t\tlet rh = Math.ceil(sc*rect.height+pad*2);\n\t\t\tlet rw = Math.ceil(sc*rect.width+pad*2);\n\t\t\tif (rw > w) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }\n\t\t\tif (rh > h || x+rw > w) { continue; }\n\t\t\tframe.img = img;\n\t\t\tframe.rect = new Rectangle(x,y,rw,rh);\n\t\t\theight = height || rh;\n\t\t\tframes.splice(i,1);\n\t\t\tdataFrames[frame.index] = [x,y,rw,rh,img,Math.round(-rx+sc*source.regX-pad),Math.round(-ry+sc*source.regY-pad)];\n\t\t\tx += rw;\n\t\t}\n\t\treturn {w:x, h:height};\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_endBuild () {\n\t\tthis.spriteSheet = new SpriteSheet(this._data);\n\t\tthis._data = null;\n\t\tthis.progress = 1;\n\t\tthis.dispatchEvent(\"complete\");\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_run () {\n\t\tlet ts = Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50;\n\t\tlet t = (new Date()).getTime()+ts;\n\t\tlet complete = false;\n\t\twhile (t > (new Date()).getTime()) {\n\t\t\tif (!this._drawNext()) { complete = true; break; }\n\t\t}\n\t\tif (complete) {\n\t\t\tthis._endBuild();\n\t\t} else {\n\t\t\tthis._timerID = setTimeout(() => this._run(), 50-ts);\n\t\t}\n\t\tlet p = this.progress = this._index/this._frames.length;\n\t\tif (this.hasEventListener(\"progress\")) {\n\t\t\tlet evt = new Event(\"progress\");\n\t\t\tevt.progress = p;\n\t\t\tthis.dispatchEvent(evt);\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @return {Boolean} Returns false if this is the last draw.\n\t */\n\t_drawNext () {\n\t\tlet frame = this._frames[this._index];\n\t\tlet sc = frame.scale*this._scale;\n\t\tlet rect = frame.rect;\n\t\tlet sourceRect = frame.sourceRect;\n\t\tlet canvas = this._data.images[frame.img];\n\t\tlet ctx = canvas.getContext(\"2d\");\n\t\tframe.funct&&frame.funct(frame.source, frame.data);\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tctx.rect(rect.x, rect.y, rect.width, rect.height);\n\t\tctx.clip();\n\t\tctx.translate(Math.ceil(rect.x-sourceRect.x*sc), Math.ceil(rect.y-sourceRect.y*sc));\n\t\tctx.scale(sc,sc);\n\t\tframe.source.draw(ctx); // display object will draw itself.\n\t\tctx.restore();\n\t\treturn (++this._index) < this._frames.length;\n\t}\n\n}\n\n/**\n * @static\n * @readonly\n * @protected\n * @type {String}\n */\nSpriteSheetBuilder.ERR_DIMENSIONS = \"frame dimensions exceed max spritesheet dimensions\";\n/**\n * @static\n * @readonly\n * @protected\n * @type {String}\n */\nSpriteSheetBuilder.ERR_RUNNING = \"a build is already running\";\n\n/**\n * Dispatched when a build completes.\n * @event easeljs.SpriteSheetBuilder#complete\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @since 0.6.0\n */\n\n/**\n * Dispatched when an asynchronous build has progress.\n * @event easeljs.SpriteSheetBuilder#progress\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @property {Number} progress The current progress value (0-1).\n * @since 0.6.0\n */\n","/*\n* @license SpriteSheetUtils\n* Visit http://createjs.com/ for documentation, updates and examples.\n*\n* Copyright (c) 2017 gskinner.com, inc.\n*\n* Permission is hereby granted, free of charge, to any person\n* obtaining a copy of this software and associated documentation\n* files (the \"Software\"), to deal in the Software without\n* restriction, including without limitation the rights to use,\n* copy, modify, merge, publish, distribute, sublicense, and/or sell\n* copies of the Software, and to permit persons to whom the\n* Software is furnished to do so, subject to the following\n* conditions:\n*\n* The above copyright notice and this permission notice shall be\n* included in all copies or substantial portions of the Software.\n*\n* THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n* OTHER DEALINGS IN THE SOFTWARE.\n*/\n\nimport createCanvas from \"./Canvas\";\n\n/**\n * The SpriteSheetUtils class is a collection of static methods for working with {{#crossLink \"SpriteSheet\"}}{{/crossLink}}s.\n * A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For\n * example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across\n * by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated.\n *\n * @memberof easeljs\n * @name easeljs.SpriteSheetUtils\n */\nexport default {\n\n\t/**\n\t * @protected\n\t * @type {HTMLCanvasElement | Object}\n\t */\n\t_workingCanvas: createCanvas(),\n\n\t/**\n\t * @protected\n\t * @type {CanvasRenderingContext2D}\n\t */\n\tget _workingContext () { return this._workingCanvas.getContext(\"2d\"); },\n\n\t/**\n\t * Returns a single frame of the specified sprite sheet as a new PNG image. An example of when this may be useful is\n\t * to use a spritesheet frame as the source for a bitmap fill.\n\t *\n\t * WARNING: In almost all cases it is better to display a single frame using a {@link easeljs.Sprite}\n\t * with a {@link easeljs.Sprite#gotoAndStop} call than it is to slice out a frame using this\n\t * method and display it with a Bitmap instance. You can also crop an image using the {@link easeljs.Bitmap#sourceRect}\n\t * property of {@link easeljs.Bitmap}.\n\t *\n\t * The extractFrame method may cause cross-domain warnings since it accesses pixels directly on the canvas.\n\t *\n\t * @param {easeljs.SpriteSheet} spriteSheet The SpriteSheet instance to extract a frame from.\n\t * @param {Number | String} frameOrAnimation The frame number or animation name to extract. If an animation\n\t * name is specified, only the first frame of the animation will be extracted.\n\t * @return {HTMLImageElement} a single frame of the specified sprite sheet as a new PNG image.\n\t */\n\textractFrame (spriteSheet, frameOrAnimation) {\n\t\tif (isNaN(frameOrAnimation)) {\n\t\t\tframeOrAnimation = spriteSheet.getAnimation(frameOrAnimation).frames[0];\n\t\t}\n\t\tlet data = spriteSheet.getFrame(frameOrAnimation);\n\t\tif (!data) { return null; }\n\t\tlet r = data.rect;\n\t\tlet canvas = this._workingCanvas;\n\t\tcanvas.width = r.width;\n\t\tcanvas.height = r.height;\n\t\tthis._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);\n\t\tlet img = document.createElement(\"img\");\n\t\timg.src = canvas.toDataURL(\"image/png\");\n\t\treturn img;\n\t},\n\n\t/**\n\t * @protected\n\t * @param {easeljs.SpriteSheet} spriteSheet\n\t * @param {Number} count\n\t * @param {Number} h\n\t * @param {Number} v\n\t */\n\t_flip (spriteSheet, count, h, v) {\n\t\tlet imgs = spriteSheet._images;\n\t\tlet canvas = this._workingCanvas;\n\t\tlet ctx = this._workingContext;\n\t\tconst il = imgs.length/count;\n\t\tfor (let i=0; i {\n\t\t\tif (a.element._drawID === stage._drawID) { return 1; }\n\t\t\tif (a.element._drawID < b.element._drawID) { return -1; }\n\t\t\treturn 0;\n\t\t});\n\n\t\tconst l = output.length;\n\t\tfor (let i=0; i= 0 && !eventObj.propagationStopped; i--) {
+ list[i]._dispatchEvent(eventObj, 1 + (i == 0));
+ }
+ for (i = 1; i < l && !eventObj.propagationStopped; i++) {
+ list[i]._dispatchEvent(eventObj, 3);
+ }
+ }
+ return !eventObj.defaultPrevented;
+ };
+ _proto.hasEventListener = function hasEventListener(type) {
+ var listeners = this._listeners,
+ captureListeners = this._captureListeners;
+ return !!(listeners && listeners[type] || captureListeners && captureListeners[type]);
+ };
+ _proto.willTrigger = function willTrigger(type) {
+ var o = this;
+ while (o) {
+ if (o.hasEventListener(type)) {
+ return true;
+ }
+ o = o.parent;
+ }
+ return false;
+ };
+ _proto.toString = function toString() {
+ return "[" + (this.constructor.name + this.name ? " " + this.name : "") + "]";
+ };
+ _proto._dispatchEvent = function _dispatchEvent(eventObj, eventPhase) {
+ var listeners = eventPhase === 1 ? this._captureListeners : this._listeners;
+ if (eventObj && listeners) {
+ var arr = listeners[eventObj.type];
+ var l;
+ if (!arr || (l = arr.length) === 0) {
+ return;
+ }
+ try {
+ eventObj.currentTarget = this;
+ } catch (e) {}
+ try {
+ eventObj.eventPhase = eventPhase;
+ } catch (e) {}
+ eventObj.removed = false;
+ arr = arr.slice();
+ for (var i = 0; i < l && !eventObj.immediatePropagationStopped; i++) {
+ var o = arr[i];
+ if (o.handleEvent) {
+ o.handleEvent(eventObj);
+ } else {
+ o(eventObj);
+ }
+ if (eventObj.removed) {
+ this.off(eventObj.type, o, eventPhase === 1);
+ eventObj.removed = false;
+ }
+ }
+ }
+ };
+ return EventDispatcher;
+}();
+
+function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+}
+
+function _inheritsLoose(subClass, superClass) {
+ subClass.prototype = Object.create(superClass.prototype);
+ subClass.prototype.constructor = subClass;
+ subClass.__proto__ = superClass;
+}
+
+function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return self;
+}
+
+var Ticker =
+function (_EventDispatcher) {
+ _inheritsLoose(Ticker, _EventDispatcher);
+ _createClass(Ticker, null, [{
+ key: "RAF_SYNCHED",
+ get: function get() {
+ return "synched";
+ }
+ }, {
+ key: "RAF",
+ get: function get() {
+ return "raf";
+ }
+ }, {
+ key: "TIMEOUT",
+ get: function get() {
+ return "timeout";
+ }
+ }]);
+ function Ticker(name) {
+ var _this;
+ _this = _EventDispatcher.call(this) || this;
+ _this.name = name;
+ _this.timingMode = Ticker.TIMEOUT;
+ _this.maxDelta = 0;
+ _this.paused = false;
+ _this._inited = false;
+ _this._startTime = 0;
+ _this._pausedTime = 0;
+ _this._ticks = 0;
+ _this._pausedTicks = 0;
+ _this._interval = 50;
+ _this._lastTime = 0;
+ _this._times = null;
+ _this._tickTimes = null;
+ _this._timerId = null;
+ _this._raf = true;
+ return _this;
+ }
+ var _proto = Ticker.prototype;
+ _proto.init = function init() {
+ if (this._inited) {
+ return;
+ }
+ this._inited = true;
+ this._times = [];
+ this._tickTimes = [];
+ this._startTime = this._getTime();
+ this._times.push(this._lastTime = 0);
+ this._setupTick();
+ };
+ _proto.reset = function reset() {
+ if (this._raf) {
+ var f = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame;
+ f && f(this._timerId);
+ } else {
+ clearTimeout(this._timerId);
+ }
+ this.removeAllEventListeners("tick");
+ this._timerId = this._times = this._tickTimes = null;
+ this._startTime = this._lastTime = this._ticks = 0;
+ this._inited = false;
+ };
+ _proto.addEventListener = function addEventListener(type, listener, useCapture) {
+ !this._inited && this.init();
+ return _EventDispatcher.prototype.addEventListener.call(this, type, listener, useCapture);
+ };
+ _proto.getMeasuredTickTime = function getMeasuredTickTime(ticks) {
+ if (ticks === void 0) {
+ ticks = null;
+ }
+ var times = this._tickTimes;
+ if (!times || times.length < 1) {
+ return -1;
+ }
+ ticks = Math.min(times.length, ticks || this.framerate | 0);
+ return times.reduce(function (a, b) {
+ return a + b;
+ }, 0) / ticks;
+ };
+ _proto.getMeasuredFPS = function getMeasuredFPS(ticks) {
+ if (ticks === void 0) {
+ ticks = null;
+ }
+ var times = this._times;
+ if (!times || times.length < 2) {
+ return -1;
+ }
+ ticks = Math.min(times.length - 1, ticks || this.framerate | 0);
+ return 1000 / ((times[0] - times[ticks]) / ticks);
+ };
+ _proto.getTime = function getTime(runTime) {
+ if (runTime === void 0) {
+ runTime = false;
+ }
+ return this._startTime ? this._getTime() - (runTime ? this._pausedTime : 0) : -1;
+ };
+ _proto.getEventTime = function getEventTime(runTime) {
+ if (runTime === void 0) {
+ runTime = false;
+ }
+ return this._startTime ? (this._lastTime || this._startTime) - (runTime ? this._pausedTime : 0) : -1;
+ };
+ _proto.getTicks = function getTicks(pauseable) {
+ if (pauseable === void 0) {
+ pauseable = false;
+ }
+ return this._ticks - (pauseable ? this._pausedTicks : 0);
+ };
+ _proto._handleSynch = function _handleSynch() {
+ this._timerId = null;
+ this._setupTick();
+ if (this._getTime() - this._lastTime >= (this._interval - 1) * 0.97) {
+ this._tick();
+ }
+ };
+ _proto._handleRAF = function _handleRAF() {
+ this._timerId = null;
+ this._setupTick();
+ this._tick();
+ };
+ _proto._handleTimeout = function _handleTimeout() {
+ this._timerId = null;
+ this._setupTick();
+ this._tick();
+ };
+ _proto._setupTick = function _setupTick() {
+ if (this._timerId != null) {
+ return;
+ }
+ var mode = this.timingMode || this._raf && Ticker.RAF;
+ if (mode === Ticker.RAF_SYNCHED || mode === Ticker.RAF) {
+ var f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
+ if (f) {
+ this._timerId = f(mode === Ticker.RAF ? this._handleRAF.bind(this) : this._handleSynch.bind(this));
+ this._raf = true;
+ return;
+ }
+ }
+ this._raf = false;
+ this._timerId = setTimeout(this._handleTimeout.bind(this), this._interval);
+ };
+ _proto._tick = function _tick() {
+ var paused = this.paused,
+ time = this._getTime(),
+ elapsedTime = time - this._lastTime;
+ this._lastTime = time;
+ this._ticks++;
+ if (paused) {
+ this._pausedTicks++;
+ this._pausedTime += elapsedTime;
+ }
+ if (this.hasEventListener("tick")) {
+ var event = new Event("tick");
+ var maxDelta = this.maxDelta;
+ event.delta = maxDelta && elapsedTime > maxDelta ? maxDelta : elapsedTime;
+ event.paused = paused;
+ event.time = time;
+ event.runTime = time - this._pausedTime;
+ this.dispatchEvent(event);
+ }
+ this._tickTimes.unshift(this._getTime() - time);
+ while (this._tickTimes.length > 100) {
+ this._tickTimes.pop();
+ }
+ this._times.unshift(time);
+ while (this._times.length > 100) {
+ this._times.pop();
+ }
+ };
+ _proto._getTime = function _getTime() {
+ var now = window.performance && window.performance.now;
+ return (now && now.call(performance) || new Date().getTime()) - this._startTime;
+ };
+ Ticker.on = function on(type, listener, scope, once, data, useCapture) {
+ return _instance.on(type, listener, scope, once, data, useCapture);
+ };
+ Ticker.removeEventListener = function removeEventListener(type, listener, useCapture) {
+ _instance.removeEventListener(type, listener, useCapture);
+ };
+ Ticker.off = function off(type, listener, useCapture) {
+ _instance.off(type, listener, useCapture);
+ };
+ Ticker.removeAllEventListeners = function removeAllEventListeners(type) {
+ _instance.removeAllEventListeners(type);
+ };
+ Ticker.dispatchEvent = function dispatchEvent(eventObj, bubbles, cancelable) {
+ return _instance.dispatchEvent(eventObj, bubbles, cancelable);
+ };
+ Ticker.hasEventListener = function hasEventListener(type) {
+ return _instance.hasEventListener(type);
+ };
+ Ticker.willTrigger = function willTrigger(type) {
+ return _instance.willTrigger(type);
+ };
+ Ticker.toString = function toString() {
+ return _instance.toString();
+ };
+ Ticker.init = function init() {
+ _instance.init();
+ };
+ Ticker.reset = function reset() {
+ _instance.reset();
+ };
+ Ticker.addEventListener = function addEventListener(type, listener, useCapture) {
+ _instance.addEventListener(type, listener, useCapture);
+ };
+ Ticker.getMeasuredTickTime = function getMeasuredTickTime(ticks) {
+ return _instance.getMeasuredTickTime(ticks);
+ };
+ Ticker.getMeasuredFPS = function getMeasuredFPS(ticks) {
+ return _instance.getMeasuredFPS(ticks);
+ };
+ Ticker.getTime = function getTime(runTime) {
+ return _instance.getTime(runTime);
+ };
+ Ticker.getEventTime = function getEventTime(runTime) {
+ return _instance.getEventTime(runTime);
+ };
+ Ticker.getTicks = function getTicks(pauseable) {
+ return _instance.getTicks(pauseable);
+ };
+ _createClass(Ticker, [{
+ key: "interval",
+ get: function get() {
+ return this._interval;
+ },
+ set: function set(interval) {
+ this._interval = interval;
+ if (!this._inited) {
+ return;
+ }
+ this._setupTick();
+ }
+ }, {
+ key: "framerate",
+ get: function get() {
+ return 1000 / this._interval;
+ },
+ set: function set(framerate) {
+ this.interval = 1000 / framerate;
+ }
+ }], [{
+ key: "interval",
+ get: function get() {
+ return _instance.interval;
+ },
+ set: function set(interval) {
+ _instance.interval = interval;
+ }
+ }, {
+ key: "framerate",
+ get: function get() {
+ return _instance.framerate;
+ },
+ set: function set(framerate) {
+ _instance.framerate = framerate;
+ }
+ }, {
+ key: "name",
+ get: function get() {
+ return _instance.name;
+ },
+ set: function set(name) {
+ _instance.name = name;
+ }
+ }, {
+ key: "timingMode",
+ get: function get() {
+ return _instance.timingMode;
+ },
+ set: function set(timingMode) {
+ _instance.timingMode = timingMode;
+ }
+ }, {
+ key: "maxDelta",
+ get: function get() {
+ return _instance.maxDelta;
+ },
+ set: function set(maxDelta) {
+ _instance.maxDelta = maxDelta;
+ }
+ }, {
+ key: "paused",
+ get: function get() {
+ return _instance.paused;
+ },
+ set: function set(paused) {
+ _instance.paused = paused;
+ }
+ }]);
+ return Ticker;
+}(EventDispatcher);
+var _instance = new Ticker("createjs.global");
+
+var StageGL = function StageGL() {
+ throw new Error("\n\t\t\tStageGL is not currently supported on the EaselJS 2.0 branch.\n\t\t\tEnd of Q1 2018 is targetted for StageGL support.\n\t\t\tFollow @CreateJS on Twitter for updates.\n\t\t");
+};
+
+var Shadow =
+function () {
+ function Shadow(color, offsetX, offsetY, blur) {
+ if (color === void 0) {
+ color = "black";
+ }
+ if (offsetX === void 0) {
+ offsetX = 0;
+ }
+ if (offsetY === void 0) {
+ offsetY = 0;
+ }
+ if (blur === void 0) {
+ blur = 0;
+ }
+ this.color = color;
+ this.offsetX = offsetX;
+ this.offsetY = offsetY;
+ this.blur = blur;
+ }
+ var _proto = Shadow.prototype;
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto.clone = function clone() {
+ return new Shadow(this.color, this.offsetX, this.offsetY, this.blur);
+ };
+ return Shadow;
+}();
+Shadow.identity = new Shadow("transparent");
+
+var _nextId = 0;
+function uid() {
+ return _nextId++;
+}
+
+var Point =
+function () {
+ function Point(x, y) {
+ this.setValues(x, y);
+ }
+ var _proto = Point.prototype;
+ _proto.setValues = function setValues(x, y) {
+ if (x === void 0) {
+ x = 0;
+ }
+ if (y === void 0) {
+ y = 0;
+ }
+ this.x = x;
+ this.y = y;
+ return this;
+ };
+ _proto.copy = function copy(point) {
+ this.x = point.x;
+ this.y = point.y;
+ return this;
+ };
+ _proto.clone = function clone() {
+ return new Point(this.x, this.y);
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + " (x=" + this.x + " y=" + this.y + ")]";
+ };
+ return Point;
+}();
+
+var Matrix2D =
+function () {
+ function Matrix2D(a, b, c, d, tx, ty) {
+ this.setValues(a, b, c, d, tx, ty);
+ }
+ var _proto = Matrix2D.prototype;
+ _proto.setValues = function setValues(a, b, c, d, tx, ty) {
+ if (a === void 0) {
+ a = 1;
+ }
+ if (b === void 0) {
+ b = 0;
+ }
+ if (c === void 0) {
+ c = 0;
+ }
+ if (d === void 0) {
+ d = 1;
+ }
+ if (tx === void 0) {
+ tx = 0;
+ }
+ if (ty === void 0) {
+ ty = 0;
+ }
+ this.a = a;
+ this.b = b;
+ this.c = c;
+ this.d = d;
+ this.tx = tx;
+ this.ty = ty;
+ return this;
+ };
+ _proto.append = function append(a, b, c, d, tx, ty) {
+ var a1 = this.a;
+ var b1 = this.b;
+ var c1 = this.c;
+ var d1 = this.d;
+ if (a != 1 || b != 0 || c != 0 || d != 1) {
+ this.a = a1 * a + c1 * b;
+ this.b = b1 * a + d1 * b;
+ this.c = a1 * c + c1 * d;
+ this.d = b1 * c + d1 * d;
+ }
+ this.tx = a1 * tx + c1 * ty + this.tx;
+ this.ty = b1 * tx + d1 * ty + this.ty;
+ return this;
+ };
+ _proto.prepend = function prepend(a, b, c, d, tx, ty) {
+ var a1 = this.a;
+ var c1 = this.c;
+ var tx1 = this.tx;
+ this.a = a * a1 + c * this.b;
+ this.b = b * a1 + d * this.b;
+ this.c = a * c1 + c * this.d;
+ this.d = b * c1 + d * this.d;
+ this.tx = a * tx1 + c * this.ty + tx;
+ this.ty = b * tx1 + d * this.ty + ty;
+ return this;
+ };
+ _proto.appendMatrix = function appendMatrix(matrix) {
+ return this.append(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
+ };
+ _proto.prependMatrix = function prependMatrix(matrix) {
+ return this.prepend(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
+ };
+ _proto.appendTransform = function appendTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {
+ var r, cos, sin;
+ if (rotation % 360) {
+ r = rotation * Matrix2D.DEG_TO_RAD;
+ cos = Math.cos(r);
+ sin = Math.sin(r);
+ } else {
+ cos = 1;
+ sin = 0;
+ }
+ if (skewX || skewY) {
+ skewX *= Matrix2D.DEG_TO_RAD;
+ skewY *= Matrix2D.DEG_TO_RAD;
+ this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);
+ this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0);
+ } else {
+ this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y);
+ }
+ if (regX || regY) {
+ this.tx -= regX * this.a + regY * this.c;
+ this.ty -= regX * this.b + regY * this.d;
+ }
+ return this;
+ };
+ _proto.prependTransform = function prependTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {
+ var r, cos, sin;
+ if (rotation % 360) {
+ r = rotation * Matrix2D.DEG_TO_RAD;
+ cos = Math.cos(r);
+ sin = Math.sin(r);
+ } else {
+ cos = 1;
+ sin = 0;
+ }
+ if (regX || regY) {
+ this.tx -= regX;
+ this.ty -= regY;
+ }
+ if (skewX || skewY) {
+ skewX *= Matrix2D.DEG_TO_RAD;
+ skewY *= Matrix2D.DEG_TO_RAD;
+ this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0);
+ this.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);
+ } else {
+ this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y);
+ }
+ return this;
+ };
+ _proto.rotate = function rotate(angle) {
+ angle *= Matrix2D.DEG_TO_RAD;
+ var cos = Math.cos(angle);
+ var sin = Math.sin(angle);
+ var a1 = this.a;
+ var b1 = this.b;
+ this.a = a1 * cos + this.c * sin;
+ this.b = b1 * cos + this.d * sin;
+ this.c = -a1 * sin + this.c * cos;
+ this.d = -b1 * sin + this.d * cos;
+ return this;
+ };
+ _proto.skew = function skew(skewX, skewY) {
+ skewX *= Matrix2D.DEG_TO_RAD;
+ skewY *= Matrix2D.DEG_TO_RAD;
+ this.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), 0, 0);
+ return this;
+ };
+ _proto.scale = function scale(x, y) {
+ this.a *= x;
+ this.b *= x;
+ this.c *= y;
+ this.d *= y;
+ return this;
+ };
+ _proto.translate = function translate(x, y) {
+ this.tx += this.a * x + this.c * y;
+ this.ty += this.b * x + this.d * y;
+ return this;
+ };
+ _proto.identity = function identity() {
+ this.a = this.d = 1;
+ this.b = this.c = this.tx = this.ty = 0;
+ return this;
+ };
+ _proto.invert = function invert() {
+ var a1 = this.a;
+ var b1 = this.b;
+ var c1 = this.c;
+ var d1 = this.d;
+ var tx1 = this.tx;
+ var n = a1 * d1 - b1 * c1;
+ this.a = d1 / n;
+ this.b = -b1 / n;
+ this.c = -c1 / n;
+ this.d = a1 / n;
+ this.tx = (c1 * this.ty - d1 * tx1) / n;
+ this.ty = -(a1 * this.ty - b1 * tx1) / n;
+ return this;
+ };
+ _proto.isIdentity = function isIdentity() {
+ return this.tx === 0 && this.ty === 0 && this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1;
+ };
+ _proto.equals = function equals(matrix) {
+ return this.tx === matrix.tx && this.ty === matrix.ty && this.a === matrix.a && this.b === matrix.b && this.c === matrix.c && this.d === matrix.d;
+ };
+ _proto.transformPoint = function transformPoint(x, y, pt) {
+ if (pt === void 0) {
+ pt = new Point();
+ }
+ pt.x = x * this.a + y * this.c + this.tx;
+ pt.y = x * this.b + y * this.d + this.ty;
+ return pt;
+ };
+ _proto.decompose = function decompose(target) {
+ if (target === void 0) {
+ target = {};
+ }
+ target.x = this.tx;
+ target.y = this.ty;
+ target.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);
+ target.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);
+ var skewX = Math.atan2(-this.c, this.d);
+ var skewY = Math.atan2(this.b, this.a);
+ var delta = Math.abs(1 - skewX / skewY);
+ if (delta < 0.00001) {
+ target.rotation = skewY / Matrix2D.DEG_TO_RAD;
+ if (this.a < 0 && this.d >= 0) {
+ target.rotation += target.rotation <= 0 ? 180 : -180;
+ }
+ target.skewX = target.skewY = 0;
+ } else {
+ target.skewX = skewX / Matrix2D.DEG_TO_RAD;
+ target.skewY = skewY / Matrix2D.DEG_TO_RAD;
+ }
+ return target;
+ };
+ _proto.copy = function copy(matrix) {
+ return this.setValues(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
+ };
+ _proto.clone = function clone() {
+ return new Matrix2D(this.a, this.b, this.c, this.d, this.tx, this.ty);
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + " (a=" + this.a + " b=" + this.b + " c=" + this.c + " d=" + this.d + " tx=" + this.tx + " ty=" + this.ty + ")]";
+ };
+ return Matrix2D;
+}();
+Matrix2D.DEG_TO_RAD = Math.PI / 180;
+Matrix2D.identity = new Matrix2D();
+
+var DisplayProps =
+function () {
+ function DisplayProps(visible, alpha, shadow, compositeOperation, matrix) {
+ this.setValues(visible, alpha, shadow, compositeOperation, matrix);
+ }
+ var _proto = DisplayProps.prototype;
+ _proto.setValues = function setValues(visible, alpha, shadow, compositeOperation, matrix) {
+ if (visible === void 0) {
+ visible = true;
+ }
+ if (alpha === void 0) {
+ alpha = 1;
+ }
+ this.visible = visible;
+ this.alpha = alpha;
+ this.shadow = shadow;
+ this.compositeOperation = compositeOperation;
+ this.matrix = matrix || this.matrix && this.matrix.identity() || new Matrix2D();
+ return this;
+ };
+ _proto.append = function append(visible, alpha, shadow, compositeOperation, matrix) {
+ this.alpha *= alpha;
+ this.shadow = shadow || this.shadow;
+ this.compositeOperation = compositeOperation || this.compositeOperation;
+ this.visible = this.visible && visible;
+ matrix && this.matrix.appendMatrix(matrix);
+ return this;
+ };
+ _proto.prepend = function prepend(visible, alpha, shadow, compositeOperation, matrix) {
+ this.alpha *= alpha;
+ this.shadow = this.shadow || shadow;
+ this.compositeOperation = this.compositeOperation || compositeOperation;
+ this.visible = this.visible && visible;
+ matrix && this.matrix.prependMatrix(matrix);
+ return this;
+ };
+ _proto.identity = function identity() {
+ this.visible = true;
+ this.alpha = 1;
+ this.shadow = this.compositeOperation = null;
+ this.matrix.identity();
+ return this;
+ };
+ _proto.clone = function clone() {
+ return new DisplayProps(this.alpha, this.shadow, this.compositeOperation, this.visible, this.matrix.clone());
+ };
+ return DisplayProps;
+}();
+
+var Rectangle =
+function () {
+ function Rectangle(x, y, width, height) {
+ this.setValues(x, y, width, height);
+ }
+ var _proto = Rectangle.prototype;
+ _proto.setValues = function setValues(x, y, width, height) {
+ if (x === void 0) {
+ x = 0;
+ }
+ if (y === void 0) {
+ y = 0;
+ }
+ if (width === void 0) {
+ width = 0;
+ }
+ if (height === void 0) {
+ height = 0;
+ }
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ return this;
+ };
+ _proto.extend = function extend(x, y, width, height) {
+ if (width === void 0) {
+ width = 0;
+ }
+ if (height === void 0) {
+ height = 0;
+ }
+ if (x + width > this.x + this.width) {
+ this.width = x + width - this.x;
+ }
+ if (y + height > this.y + this.height) {
+ this.height = y + height - this.y;
+ }
+ if (x < this.x) {
+ this.width += this.x - x;
+ this.x = x;
+ }
+ if (y < this.y) {
+ this.height += this.y - y;
+ this.y = y;
+ }
+ return this;
+ };
+ _proto.pad = function pad(top, left, bottom, right) {
+ this.x -= left;
+ this.y -= top;
+ this.width += left + right;
+ this.height += top + bottom;
+ return this;
+ };
+ _proto.copy = function copy(rect) {
+ return this.setValues(rect.x, rect.y, rect.width, rect.height);
+ };
+ _proto.contains = function contains(x, y, width, height) {
+ if (width === void 0) {
+ width = 0;
+ }
+ if (height === void 0) {
+ height = 0;
+ }
+ return x >= this.x && x + width <= this.x + this.width && y >= this.y && y + height <= this.y + this.height;
+ };
+ _proto.union = function union(rect) {
+ return this.clone().extend(rect.x, rect.y, rect.width, rect.height);
+ };
+ _proto.intersection = function intersection(rect) {
+ var x1 = rect.x,
+ y1 = rect.y,
+ x2 = x1 + rect.width,
+ y2 = y1 + rect.height;
+ if (this.x > x1) {
+ x1 = this.x;
+ }
+ if (this.y > y1) {
+ y1 = this.y;
+ }
+ if (this.x + this.width < x2) {
+ x2 = this.x + this.width;
+ }
+ if (this.y + this.height < y2) {
+ y2 = this.y + this.height;
+ }
+ return x2 <= x1 || y2 <= y1 ? null : new Rectangle(x1, y1, x2 - x1, y2 - y1);
+ };
+ _proto.intersects = function intersects(rect) {
+ return rect.x <= this.x + this.width && this.x <= rect.x + rect.width && rect.y <= this.y + this.height && this.y <= rect.y + rect.height;
+ };
+ _proto.isEmpty = function isEmpty() {
+ return this.width <= 0 || this.height <= 0;
+ };
+ _proto.clone = function clone() {
+ return new Rectangle(this.x, this.y, this.width, this.height);
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + " (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")]";
+ };
+ return Rectangle;
+}();
+
+var Filter =
+function () {
+ function Filter() {
+ this.usesContext = false;
+ this._multiPass = null;
+ this.VTX_SHADER_BODY = null;
+ this.FRAG_SHADER_BODY = null;
+ }
+ var _proto = Filter.prototype;
+ _proto.getBounds = function getBounds(rect) {};
+ _proto.shaderParamSetup = function shaderParamSetup(gl, stage, shaderProgram) {};
+ _proto.applyFilter = function applyFilter(ctx, x, y, width, height, targetCtx, targetX, targetY) {
+ targetCtx = targetCtx || ctx;
+ if (targetX == null) {
+ targetX = x;
+ }
+ if (targetY == null) {
+ targetY = y;
+ }
+ try {
+ var imageData = ctx.getImageData(x, y, width, height);
+ if (this._applyFilter(imageData)) {
+ targetCtx.putImageData(imageData, targetX, targetY);
+ return true;
+ }
+ } catch (e) {}
+ return false;
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto.clone = function clone() {
+ return new Filter();
+ };
+ _proto._applyFilter = function _applyFilter(imageData) {};
+ return Filter;
+}();
+
+var BitmapCache =
+function (_Filter) {
+ _inheritsLoose(BitmapCache, _Filter);
+ function BitmapCache() {
+ var _this;
+ _this = _Filter.call(this) || this;
+ _this.width = undefined;
+ _this.height = undefined;
+ _this.x = undefined;
+ _this.y = undefined;
+ _this.scale = 1;
+ _this.offX = 0;
+ _this.offY = 0;
+ _this.cacheID = 0;
+ _this._filterOffX = 0;
+ _this._filterOffY = 0;
+ _this._cacheDataURLID = 0;
+ _this._cacheDataURL = null;
+ _this._drawWidth = 0;
+ _this._drawHeight = 0;
+ _this._boundRect = new Rectangle();
+ return _this;
+ }
+ BitmapCache.getFilterBounds = function getFilterBounds(target, output) {
+ if (output === void 0) {
+ output = new Rectangle();
+ }
+ var filters = target.filters;
+ var filterCount = filters && filters.length;
+ if (!!filterCount <= 0) {
+ return output;
+ }
+ for (var i = 0; i < filterCount; i++) {
+ var f = filters[i];
+ if (!f || !f.getBounds) {
+ continue;
+ }
+ var test = f.getBounds();
+ if (!test) {
+ continue;
+ }
+ if (i == 0) {
+ output.setValues(test.x, test.y, test.width, test.height);
+ } else {
+ output.extend(test.x, test.y, test.width, test.height);
+ }
+ }
+ return output;
+ };
+ var _proto = BitmapCache.prototype;
+ _proto.define = function define(target, x, y, width, height, scale, options) {
+ if (x === void 0) {
+ x = 0;
+ }
+ if (y === void 0) {
+ y = 0;
+ }
+ if (width === void 0) {
+ width = 1;
+ }
+ if (height === void 0) {
+ height = 1;
+ }
+ if (scale === void 0) {
+ scale = 1;
+ }
+ if (!target) {
+ throw "No symbol to cache";
+ }
+ this._options = options;
+ this._useWebGL = options !== undefined;
+ this.target = target;
+ this.width = width >= 1 ? width : 1;
+ this.height = height >= 1 ? height : 1;
+ this.x = x;
+ this.y = y;
+ this.scale = scale;
+ this.update();
+ };
+ _proto.update = function update(compositeOperation) {
+ if (!this.target) {
+ throw "define() must be called before update()";
+ }
+ var filterBounds = BitmapCache.getFilterBounds(this.target);
+ var surface = this.target.cacheCanvas;
+ this._drawWidth = Math.ceil(this.width * this.scale) + filterBounds.width;
+ this._drawHeight = Math.ceil(this.height * this.scale) + filterBounds.height;
+ if (!surface || this._drawWidth != surface.width || this._drawHeight != surface.height) {
+ this._updateSurface();
+ }
+ this._filterOffX = filterBounds.x;
+ this._filterOffY = filterBounds.y;
+ this.offX = this.x * this.scale + this._filterOffX;
+ this.offY = this.y * this.scale + this._filterOffY;
+ this._drawToCache(compositeOperation);
+ this.cacheID = this.cacheID ? this.cacheID + 1 : 1;
+ };
+ _proto.release = function release() {
+ var stage = this.target.stage;
+ if (this._useWebGL && this._webGLCache) {
+ if (!this._webGLCache.isCacheControlled) {
+ if (this.__lastRT) {
+ this.__lastRT = undefined;
+ }
+ if (this.__rtA) {
+ this._webGLCache._killTextureObject(this.__rtA);
+ }
+ if (this.__rtB) {
+ this._webGLCache._killTextureObject(this.__rtB);
+ }
+ if (this.target && this.target.cacheCanvas) {
+ this._webGLCache._killTextureObject(this.target.cacheCanvas);
+ }
+ }
+ this._webGLCache = false;
+ } else if (stage instanceof StageGL) {
+ stage.releaseTexture(this.target.cacheCanvas);
+ }
+ this.target = this.target.cacheCanvas = null;
+ this.cacheID = this._cacheDataURLID = this._cacheDataURL = undefined;
+ this.width = this.height = this.x = this.y = this.offX = this.offY = 0;
+ this.scale = 1;
+ };
+ _proto.getCacheDataURL = function getCacheDataURL() {
+ var cacheCanvas = this.target && this.target.cacheCanvas;
+ if (!cacheCanvas) {
+ return null;
+ }
+ if (this.cacheID != this._cacheDataURLID) {
+ this._cacheDataURLID = this.cacheID;
+ this._cacheDataURL = cacheCanvas.toDataURL ? cacheCanvas.toDataURL() : null;
+ }
+ return this._cacheDataURL;
+ };
+ _proto.draw = function draw(ctx) {
+ if (!this.target) {
+ return false;
+ }
+ ctx.drawImage(this.target.cacheCanvas, this.x + this._filterOffX / this.scale, this.y + this._filterOffY / this.scale, this._drawWidth / this.scale, this._drawHeight / this.scale);
+ return true;
+ };
+ _proto.getBounds = function getBounds() {
+ var scale = this.scale;
+ return this._boundRect.setValue(this._filterOffX / scale, this._filterOffY / scale, this.width / scale, this.height / scale);
+ };
+ _proto._updateSurface = function _updateSurface() {
+ var surface;
+ if (!this._useWebGL) {
+ surface = this.target.cacheCanvas;
+ if (!surface) {
+ surface = this.target.cacheCanvas = window.createjs && createjs.createCanvas ? createjs.createCanvas() : document.createElement("canvas");
+ }
+ surface.width = this._drawWidth;
+ surface.height = this._drawHeight;
+ return;
+ }
+ if (!this._webGLCache) {
+ if (this._options.useGL === "stage") {
+ if (!(this.target.stage != null && this.target.stage.isWebGL)) {
+ throw "Cannot use 'stage' for cache because the object's parent stage is " + (this.target.stage != null ? "non WebGL." : "not set, please addChild to the correct stage.");
+ }
+ this.target.cacheCanvas = true;
+ this._webGLCache = this.target.stage;
+ } else if (this._options.useGL === "new") {
+ this.target.cacheCanvas = document.createElement("canvas");
+ this._webGLCache = new StageGL(this.target.cacheCanvas, {
+ antialias: true,
+ transparent: true,
+ autoPurge: -1
+ });
+ this._webGLCache.isCacheControlled = true;
+ } else {
+ throw "Invalid option provided to useGL, expected ['stage', 'new', StageGL, undefined], got " + this._options.useGL;
+ }
+ }
+ var stageGL = this._webGLCache;
+ surface = this.target.cacheCanvas;
+ if (stageGL.isCacheControlled) {
+ surface.width = this._drawWidth;
+ surface.height = this._drawHeight;
+ stageGL.updateViewport(this._drawWidth, this._drawHeight);
+ }
+ if (this.target.filters) {
+ stageGL.getTargetRenderTexture(this.target, this._drawWidth, this._drawHeight);
+ stageGL.getTargetRenderTexture(this.target, this._drawWidth, this._drawHeight);
+ } else if (!stageGL.isCacheControlled) {
+ stageGL.getTargetRenderTexture(this.target, this._drawWidth, this._drawHeight);
+ }
+ };
+ _proto._drawToCache = function _drawToCache(compositeOperation) {
+ var target = this.target;
+ var surface = target.cacheCanvas;
+ var webGL = this._webGLCache;
+ if (!this._useWebGL || !webGL) {
+ var ctx = surface.getContext("2d");
+ if (!compositeOperation) {
+ ctx.clearRect(0, 0, this._drawWidth + 1, this._drawHeight + 1);
+ }
+ ctx.save();
+ ctx.globalCompositeOperation = compositeOperation;
+ ctx.setTransform(this.scale, 0, 0, this.scale, -this._filterOffX, -this._filterOffY);
+ ctx.translate(-this.x, -this.y);
+ target.draw(ctx, true);
+ ctx.restore();
+ if (target.filters && target.filters.length) {
+ this._applyFilters(target);
+ }
+ surface._invalid = true;
+ return;
+ }
+ this._webGLCache.cacheDraw(target, target.filters, this);
+ surface = this.target.cacheCanvas;
+ surface.width = this._drawWidth;
+ surface.height = this._drawHeight;
+ surface._invalid = true;
+ };
+ _proto._applyFilters = function _applyFilters() {
+ var surface = this.target.cacheCanvas;
+ var filters = this.target.filters;
+ var w = this._drawWidth;
+ var h = this._drawHeight;
+ var data = surface.getContext("2d").getImageData(0, 0, w, h);
+ var l = filters.length;
+ for (var i = 0; i < l; i++) {
+ filters[i]._applyFilter(data);
+ }
+ surface.getContext("2d").putImageData(data, 0, 0);
+ };
+ return BitmapCache;
+}(Filter);
+
+var DisplayObject =
+function (_EventDispatcher) {
+ _inheritsLoose(DisplayObject, _EventDispatcher);
+ function DisplayObject() {
+ var _this;
+ _this = _EventDispatcher.call(this) || this;
+ _this.alpha = 1;
+ _this.cacheCanvas = null;
+ _this.bitmapCache = null;
+ _this.id = uid();
+ _this.mouseEnabled = true;
+ _this.tickEnabled = true;
+ _this.name = null;
+ _this.parent = null;
+ _this.regX = 0;
+ _this.regY = 0;
+ _this.rotation = 0;
+ _this.scaleX = 1;
+ _this.scaleY = 1;
+ _this.skewX = 0;
+ _this.skewY = 0;
+ _this.shadow = null;
+ _this.visible = true;
+ _this.x = 0;
+ _this.y = 0;
+ _this.transformMatrix = null;
+ _this.compositeOperation = null;
+ _this.snapToPixel = true;
+ _this.filters = null;
+ _this.mask = null;
+ _this.hitArea = null;
+ _this.cursor = null;
+ _this._props = new DisplayProps();
+ _this._rectangle = new Rectangle();
+ _this._bounds = null;
+ _this._webGLRenderStyle = DisplayObject._StageGL_NONE;
+ return _this;
+ }
+ var _proto = DisplayObject.prototype;
+ _proto.isVisible = function isVisible() {
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (ignoreCache === void 0) {
+ ignoreCache = false;
+ }
+ return this.drawCache(ctx, ignoreCache);
+ };
+ _proto.drawCache = function drawCache(ctx, ignoreCache) {
+ if (ignoreCache === void 0) {
+ ignoreCache = false;
+ }
+ var cache = this.bitmapCache;
+ if (cache && !ignoreCache) {
+ return cache.draw(ctx);
+ }
+ return false;
+ };
+ _proto.updateContext = function updateContext(ctx) {
+ var o = this,
+ mask = o.mask,
+ mtx = o._props.matrix;
+ if (mask && mask.graphics && !mask.graphics.isEmpty()) {
+ mask.getMatrix(mtx);
+ ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);
+ mask.graphics.drawAsPath(ctx);
+ ctx.clip();
+ mtx.invert();
+ ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);
+ }
+ this.getMatrix(mtx);
+ var tx = mtx.tx,
+ ty = mtx.ty;
+ if (DisplayObject._snapToPixelEnabled && o.snapToPixel) {
+ tx = tx + (tx < 0 ? -0.5 : 0.5) | 0;
+ ty = ty + (ty < 0 ? -0.5 : 0.5) | 0;
+ }
+ ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, tx, ty);
+ ctx.globalAlpha *= o.alpha;
+ if (o.compositeOperation) {
+ ctx.globalCompositeOperation = o.compositeOperation;
+ }
+ if (o.shadow) {
+ this._applyShadow(ctx, o.shadow);
+ }
+ };
+ _proto.cache = function cache(x, y, width, height, scale, options) {
+ if (scale === void 0) {
+ scale = 1;
+ }
+ if (!this.bitmapCache) {
+ this.bitmapCache = new BitmapCache();
+ }
+ this.bitmapCache.define(this, x, y, width, height, scale, options);
+ };
+ _proto.updateCache = function updateCache(compositeOperation) {
+ if (!this.bitmapCache) {
+ throw "No cache found. cache() must be called before updateCache()";
+ }
+ this.bitmapCache.update(compositeOperation);
+ };
+ _proto.uncache = function uncache() {
+ if (this.bitmapCache) {
+ this.bitmapCache.release();
+ this.bitmapCache = undefined;
+ }
+ };
+ _proto.getCacheDataURL = function getCacheDataURL() {
+ return this.bitmapCache ? this.bitmapCache.getDataURL() : null;
+ };
+ _proto.localToGlobal = function localToGlobal(x, y, pt) {
+ if (pt === void 0) {
+ pt = new Point();
+ }
+ return this.getConcatenatedMatrix(this._props.matrix).transformPoint(x, y, pt);
+ };
+ _proto.globalToLocal = function globalToLocal(x, y, pt) {
+ if (pt === void 0) {
+ pt = new Point();
+ }
+ return this.getConcatenatedMatrix(this._props.matrix).invert().transformPoint(x, y, pt);
+ };
+ _proto.localToLocal = function localToLocal(x, y, target, pt) {
+ pt = this.localToGlobal(x, y, pt);
+ return target.globalToLocal(pt.x, pt.y, pt);
+ };
+ _proto.setTransform = function setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {
+ if (x === void 0) {
+ x = 0;
+ }
+ if (y === void 0) {
+ y = 0;
+ }
+ if (scaleX === void 0) {
+ scaleX = 1;
+ }
+ if (scaleY === void 0) {
+ scaleY = 1;
+ }
+ if (rotation === void 0) {
+ rotation = 0;
+ }
+ if (skewX === void 0) {
+ skewX = 0;
+ }
+ if (skewY === void 0) {
+ skewY = 0;
+ }
+ if (regX === void 0) {
+ regX = 0;
+ }
+ if (regY === void 0) {
+ regY = 0;
+ }
+ this.x = x;
+ this.y = y;
+ this.scaleX = scaleX;
+ this.scaleY = scaleY;
+ this.rotation = rotation;
+ this.skewX = skewX;
+ this.skewY = skewY;
+ this.regX = regX;
+ this.regY = regY;
+ return this;
+ };
+ _proto.getMatrix = function getMatrix(matrix) {
+ var o = this,
+ mtx = matrix && matrix.identity() || new Matrix2D();
+ return o.transformMatrix ? mtx.copy(o.transformMatrix) : mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);
+ };
+ _proto.getConcatenatedMatrix = function getConcatenatedMatrix(matrix) {
+ var o = this,
+ mtx = this.getMatrix(matrix);
+ while (o = o.parent) {
+ mtx.prependMatrix(o.getMatrix(o._props.matrix));
+ }
+ return mtx;
+ };
+ _proto.getConcatenatedDisplayProps = function getConcatenatedDisplayProps(props) {
+ props = props ? props.identity() : new DisplayProps();
+ var o = this,
+ mtx = o.getMatrix(props.matrix);
+ do {
+ props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);
+ if (o != this) {
+ mtx.prependMatrix(o.getMatrix(o._props.matrix));
+ }
+ } while (o = o.parent);
+ return props;
+ };
+ _proto.hitTest = function hitTest(x, y) {
+ var ctx = DisplayObject._hitTestContext;
+ ctx.setTransform(1, 0, 0, 1, -x, -y);
+ this.draw(ctx);
+ var hit = this._testHit(ctx);
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, 2, 2);
+ return hit;
+ };
+ _proto.set = function set(props) {
+ for (var n in props) {
+ this[n] = props[n];
+ }
+ return this;
+ };
+ _proto.getBounds = function getBounds() {
+ if (this._bounds) {
+ return this._rectangle.copy(this._bounds);
+ }
+ var cacheCanvas = this.cacheCanvas;
+ if (cacheCanvas) {
+ var scale = this._cacheScale;
+ return this._rectangle.setValues(this._cacheOffsetX, this._cacheOffsetY, cacheCanvas.width / scale, cacheCanvas.height / scale);
+ }
+ return null;
+ };
+ _proto.getTransformedBounds = function getTransformedBounds() {
+ return this._getBounds();
+ };
+ _proto.setBounds = function setBounds(x, y, width, height) {
+ if (x == null) {
+ this._bounds = null;
+ }
+ this._bounds = (this._bounds || new Rectangle()).setValues(x, y, width, height);
+ };
+ _proto.clone = function clone() {
+ return this._cloneProps(new DisplayObject());
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + (this.name ? " (name=" + this.name + ")" : "") + "]";
+ };
+ _proto._cloneProps = function _cloneProps(o) {
+ o.alpha = this.alpha;
+ o.mouseEnabled = this.mouseEnabled;
+ o.tickEnabled = this.tickEnabled;
+ o.name = this.name;
+ o.regX = this.regX;
+ o.regY = this.regY;
+ o.rotation = this.rotation;
+ o.scaleX = this.scaleX;
+ o.scaleY = this.scaleY;
+ o.shadow = this.shadow;
+ o.skewX = this.skewX;
+ o.skewY = this.skewY;
+ o.visible = this.visible;
+ o.x = this.x;
+ o.y = this.y;
+ o.compositeOperation = this.compositeOperation;
+ o.snapToPixel = this.snapToPixel;
+ o.filters = this.filters == null ? null : this.filters.slice(0);
+ o.mask = this.mask;
+ o.hitArea = this.hitArea;
+ o.cursor = this.cursor;
+ o._bounds = this._bounds;
+ return o;
+ };
+ _proto._applyShadow = function _applyShadow(ctx, shadow) {
+ if (shadow === void 0) {
+ shadow = Shadow.identity;
+ }
+ shadow = shadow;
+ ctx.shadowColor = shadow.color;
+ ctx.shadowOffsetX = shadow.offsetX;
+ ctx.shadowOffsetY = shadow.offsetY;
+ ctx.shadowBlur = shadow.blur;
+ };
+ _proto._tick = function _tick(evtObj) {
+ var ls = this._listeners;
+ if (ls && ls["tick"]) {
+ evtObj.target = null;
+ evtObj.propagationStopped = evtObj.immediatePropagationStopped = false;
+ this.dispatchEvent(evtObj);
+ }
+ };
+ _proto._testHit = function _testHit(ctx) {
+ try {
+ return ctx.getImageData(0, 0, 1, 1).data[3] > 1;
+ } catch (e) {
+ if (!DisplayObject.suppressCrossDomainErrors) {
+ throw "An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.";
+ }
+ return false;
+ }
+ };
+ _proto._getBounds = function _getBounds(matrix, ignoreTransform) {
+ return this._transformBounds(this.getBounds(), matrix, ignoreTransform);
+ };
+ _proto._transformBounds = function _transformBounds(bounds, matrix, ignoreTransform) {
+ if (!bounds) {
+ return bounds;
+ }
+ var x = bounds.x,
+ y = bounds.y,
+ width = bounds.width,
+ height = bounds.height;
+ var mtx = this._props.matrix;
+ mtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);
+ if (x || y) {
+ mtx.appendTransform(0, 0, 1, 1, 0, 0, 0, -x, -y);
+ }
+ if (matrix) {
+ mtx.prependMatrix(matrix);
+ }
+ var x_a = width * mtx.a,
+ x_b = width * mtx.b;
+ var y_c = height * mtx.c,
+ y_d = height * mtx.d;
+ var tx = mtx.tx,
+ ty = mtx.ty;
+ var minX = tx,
+ maxX = tx,
+ minY = ty,
+ maxY = ty;
+ if ((x = x_a + tx) < minX) {
+ minX = x;
+ } else if (x > maxX) {
+ maxX = x;
+ }
+ if ((x = x_a + y_c + tx) < minX) {
+ minX = x;
+ } else if (x > maxX) {
+ maxX = x;
+ }
+ if ((x = y_c + tx) < minX) {
+ minX = x;
+ } else if (x > maxX) {
+ maxX = x;
+ }
+ if ((y = x_b + ty) < minY) {
+ minY = y;
+ } else if (y > maxY) {
+ maxY = y;
+ }
+ if ((y = x_b + y_d + ty) < minY) {
+ minY = y;
+ } else if (y > maxY) {
+ maxY = y;
+ }
+ if ((y = y_d + ty) < minY) {
+ minY = y;
+ } else if (y > maxY) {
+ maxY = y;
+ }
+ return bounds.setValues(minX, minY, maxX - minX, maxY - minY);
+ };
+ _proto._hasMouseEventListener = function _hasMouseEventListener() {
+ var evts = DisplayObject._MOUSE_EVENTS;
+ for (var i = 0, l = evts.length; i < l; i++) {
+ if (this.hasEventListener(evts[i])) {
+ return true;
+ }
+ }
+ return !!this.cursor;
+ };
+ _createClass(DisplayObject, [{
+ key: "stage",
+ get: function get() {
+ var o = this;
+ while (o.parent) {
+ o = o.parent;
+ }
+ if (/^\[Stage(GL)?(\s\(name=\w+\))?\]$/.test(o.toString())) {
+ return o;
+ }
+ return null;
+ }
+ }, {
+ key: "scale",
+ set: function set(value) {
+ this.scaleX = this.scaleY = value;
+ },
+ get: function get() {
+ return this.scaleX;
+ }
+ }]);
+ return DisplayObject;
+}(EventDispatcher);
+{
+ var canvas = window.createjs && createjs.createCanvas ? createjs.createCanvas() : document.createElement("canvas");
+ if (canvas.getContext) {
+ DisplayObject._hitTestCanvas = canvas;
+ DisplayObject._hitTestContext = canvas.getContext("2d");
+ canvas.width = canvas.height = 1;
+ }
+}
+DisplayObject._MOUSE_EVENTS = ["click", "dblclick", "mousedown", "mouseout", "mouseover", "pressmove", "pressup", "rollout", "rollover"];
+DisplayObject.suppressCrossDomainErrors = false;
+DisplayObject.snapToPixelEnabled = false;
+DisplayObject._StageGL_NONE = 0;
+DisplayObject._StageGL_SPRITE = 1;
+DisplayObject._StageGL_BITMAP = 2;
+
+var Container =
+function (_DisplayObject) {
+ _inheritsLoose(Container, _DisplayObject);
+ function Container() {
+ var _this;
+ _this = _DisplayObject.call(this) || this;
+ _this.children = [];
+ _this.mouseChildren = true;
+ _this.tickChildren = true;
+ return _this;
+ }
+ var _proto = Container.prototype;
+ _proto.isVisible = function isVisible() {
+ var hasContent = this.cacheCanvas || this.children.length;
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (ignoreCache === void 0) {
+ ignoreCache = false;
+ }
+ if (_DisplayObject.prototype.draw.call(this, ctx, ignoreCache)) {
+ return true;
+ }
+ var list = this.children.slice();
+ for (var i = 0, l = list.length; i < l; i++) {
+ var child = list[i];
+ if (!child.isVisible()) {
+ continue;
+ }
+ ctx.save();
+ child.updateContext(ctx);
+ child.draw(ctx);
+ ctx.restore();
+ }
+ return true;
+ };
+ _proto.addChild = function addChild() {
+ var l = arguments.length;
+ if (l === 0) {
+ return null;
+ }
+ var child = arguments.length <= 0 ? undefined : arguments[0];
+ if (l > 1) {
+ for (var i = 0; i < l; i++) {
+ child = this.addChild(i < 0 || arguments.length <= i ? undefined : arguments[i]);
+ }
+ return child;
+ }
+ var parent = child.parent,
+ silent = parent === this;
+ parent && parent._removeChildAt(parent.children.indexOf(child), silent);
+ child.parent = this;
+ this.children.push(child);
+ if (!silent) {
+ child.dispatchEvent("added");
+ }
+ return child;
+ };
+ _proto.addChildAt = function addChildAt() {
+ for (var _len = arguments.length, children = new Array(_len), _key = 0; _key < _len; _key++) {
+ children[_key] = arguments[_key];
+ }
+ var l = children.length;
+ if (l === 0) {
+ return null;
+ }
+ var index = children.pop();
+ if (index < 0 || index > this.children.length) {
+ return children[l - 2];
+ }
+ if (l > 2) {
+ for (var i = 0; i < l - 1; i++) {
+ this.addChildAt(children[i], index++);
+ }
+ return children[l - 2];
+ }
+ var child = children[0];
+ var parent = child.parent,
+ silent = parent === this;
+ parent && parent._removeChildAt(parent.children.indexOf(child), silent);
+ child.parent = this;
+ this.children.splice(index++, 0, child);
+ if (!silent) {
+ child.dispatchEvent("added");
+ }
+ return child;
+ };
+ _proto.removeChild = function removeChild() {
+ var l = arguments.length;
+ if (l === 0) {
+ return true;
+ }
+ if (l > 1) {
+ var good = true;
+ for (var i = 0; i < l; i++) {
+ good = good && this.removeChild(i < 0 || arguments.length <= i ? undefined : arguments[i]);
+ }
+ return good;
+ }
+ return this._removeChildAt(this.children.indexOf(arguments.length <= 0 ? undefined : arguments[0]));
+ };
+ _proto.removeChildAt = function removeChildAt() {
+ for (var _len2 = arguments.length, indexes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ indexes[_key2] = arguments[_key2];
+ }
+ var l = indexes.length;
+ if (l === 0) {
+ return true;
+ }
+ if (l > 1) {
+ indexes.sort(function (a, b) {
+ return b - a;
+ });
+ var good = true;
+ for (var i = 0; i < l; i++) {
+ good = good && this._removeChildAt(indexes[i]);
+ }
+ return good;
+ }
+ return this._removeChildAt(indexes[0]);
+ };
+ _proto.removeAllChildren = function removeAllChildren() {
+ var kids = this.children;
+ while (kids.length) {
+ this._removeChildAt(0);
+ }
+ };
+ _proto.getChildAt = function getChildAt(index) {
+ return this.children[index];
+ };
+ _proto.getChildByName = function getChildByName(name) {
+ var kids = this.children;
+ var l = kids.length;
+ for (var i = 0; i < l; i++) {
+ if (kids[i].name === name) {
+ return kids[i];
+ }
+ }
+ return null;
+ };
+ _proto.sortChildren = function sortChildren(sortFunction) {
+ this.children.sort(sortFunction);
+ };
+ _proto.getChildIndex = function getChildIndex(child) {
+ return this.children.indexOf(child);
+ };
+ _proto.swapChildrenAt = function swapChildrenAt(index1, index2) {
+ var kids = this.children;
+ var o1 = kids[index1];
+ var o2 = kids[index2];
+ if (!o1 || !o2) {
+ return;
+ }
+ kids[index1] = o2;
+ kids[index2] = o1;
+ };
+ _proto.swapChildren = function swapChildren(child1, child2) {
+ var kids = this.children;
+ var l = kids.length;
+ var index1, index2;
+ for (var i = 0; i < l; i++) {
+ if (kids[i] === child1) {
+ index1 = i;
+ }
+ if (kids[i] === child2) {
+ index2 = i;
+ }
+ if (index1 != null && index2 != null) {
+ break;
+ }
+ }
+ if (i === l) {
+ return;
+ }
+ kids[index1] = child2;
+ kids[index2] = child1;
+ };
+ _proto.setChildIndex = function setChildIndex(child, index) {
+ var kids = this.children;
+ var l = kids.length;
+ if (child.parent != this || index < 0 || index >= l) {
+ return;
+ }
+ for (var i = 0; i < l; i++) {
+ if (kids[i] === child) {
+ break;
+ }
+ }
+ if (i === l || i === index) {
+ return;
+ }
+ kids.splice(i, 1);
+ kids.splice(index, 0, child);
+ };
+ _proto.contains = function contains(child) {
+ while (child) {
+ if (child === this) {
+ return true;
+ }
+ child = child.parent;
+ }
+ return false;
+ };
+ _proto.hitTest = function hitTest(x, y) {
+ return this.getObjectUnderPoint(x, y) != null;
+ };
+ _proto.getObjectsUnderPoint = function getObjectsUnderPoint(x, y, mode) {
+ if (mode === void 0) {
+ mode = 0;
+ }
+ var arr = [];
+ var pt = this.localToGlobal(x, y);
+ this._getObjectsUnderPoint(pt.x, pt.y, arr, mode > 0, mode === 1);
+ return arr;
+ };
+ _proto.getObjectUnderPoint = function getObjectUnderPoint(x, y, mode) {
+ if (mode === void 0) {
+ mode = 0;
+ }
+ var pt = this.localToGlobal(x, y);
+ return this._getObjectsUnderPoint(pt.x, pt.y, null, mode > 0, mode === 1);
+ };
+ _proto.getBounds = function getBounds() {
+ return this._getBounds(null, true);
+ };
+ _proto.getTransformedBounds = function getTransformedBounds() {
+ return this._getBounds();
+ };
+ _proto.clone = function clone(recursive) {
+ if (recursive === void 0) {
+ recursive = false;
+ }
+ var o = this._cloneProps(new Container());
+ if (recursive) {
+ this._cloneChildren(o);
+ }
+ return o;
+ };
+ _proto._tick = function _tick(evtObj) {
+ if (this.tickChildren) {
+ for (var i = this.children.length - 1; i >= 0; i--) {
+ var child = this.children[i];
+ if (child.tickEnabled && child._tick) {
+ child._tick(evtObj);
+ }
+ }
+ }
+ _DisplayObject.prototype._tick.call(this, evtObj);
+ };
+ _proto._cloneChildren = function _cloneChildren(o) {
+ if (o.children.length) {
+ o.removeAllChildren();
+ }
+ var arr = o.children;
+ var l = this.children.length;
+ for (var i = 0; i < l; i++) {
+ var clone = this.children[i].clone(true);
+ clone.parent = o;
+ arr.push(clone);
+ }
+ };
+ _proto._removeChildAt = function _removeChildAt(index, silent) {
+ if (silent === void 0) {
+ silent = false;
+ }
+ if (index < 0 || index > this.children.length - 1) {
+ return false;
+ }
+ var child = this.children[index];
+ if (child) {
+ child.parent = null;
+ }
+ this.children.splice(index, 1);
+ if (!silent) {
+ child.dispatchEvent("removed");
+ }
+ return true;
+ };
+ _proto._getObjectsUnderPoint = function _getObjectsUnderPoint(x, y, arr, mouse, activeListener, currentDepth) {
+ if (currentDepth === void 0) {
+ currentDepth = 0;
+ }
+ if (!currentDepth && !this._testMask(this, x, y)) {
+ return null;
+ }
+ var mtx,
+ ctx = DisplayObject._hitTestContext;
+ activeListener = activeListener || mouse && this._hasMouseEventListener();
+ var children = this.children;
+ var l = children.length;
+ for (var i = l - 1; i >= 0; i--) {
+ var child = children[i];
+ var hitArea = child.hitArea;
+ if (!child.visible || !hitArea && !child.isVisible() || mouse && !child.mouseEnabled) {
+ continue;
+ }
+ if (!hitArea && !this._testMask(child, x, y)) {
+ continue;
+ }
+ if (!hitArea && child instanceof Container) {
+ var result = child._getObjectsUnderPoint(x, y, arr, mouse, activeListener, currentDepth + 1);
+ if (!arr && result) {
+ return mouse && !this.mouseChildren ? this : result;
+ }
+ } else {
+ if (mouse && !activeListener && !child._hasMouseEventListener()) {
+ continue;
+ }
+ var props = child.getConcatenatedDisplayProps(child._props);
+ mtx = props.matrix;
+ if (hitArea) {
+ mtx.appendMatrix(hitArea.getMatrix(hitArea._props.matrix));
+ props.alpha = hitArea.alpha;
+ }
+ ctx.globalAlpha = props.alpha;
+ ctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx - x, mtx.ty - y);
+ (hitArea || child).draw(ctx);
+ if (!this._testHit(ctx)) {
+ continue;
+ }
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, 2, 2);
+ if (arr) {
+ arr.push(child);
+ } else {
+ return mouse && !this.mouseChildren ? this : child;
+ }
+ }
+ }
+ return null;
+ };
+ _proto._testMask = function _testMask(target, x, y) {
+ var mask = target.mask;
+ if (!mask || !mask.graphics || mask.graphics.isEmpty()) {
+ return true;
+ }
+ var mtx = this._props.matrix,
+ parent = target.parent;
+ mtx = parent ? parent.getConcatenatedMatrix(mtx) : mtx.identity();
+ mtx = mask.getMatrix(mask._props.matrix).prependMatrix(mtx);
+ var ctx = DisplayObject._hitTestContext;
+ ctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx - x, mtx.ty - y);
+ mask.graphics.drawAsPath(ctx);
+ ctx.fillStyle = "#000";
+ ctx.fill();
+ if (!this._testHit(ctx)) {
+ return false;
+ }
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, 2, 2);
+ return true;
+ };
+ _proto._getBounds = function _getBounds(matrix, ignoreTransform) {
+ var bounds = _DisplayObject.prototype.getBounds.call(this);
+ if (bounds) {
+ return this._transformBounds(bounds, matrix, ignoreTransform);
+ }
+ var mtx = this._props.matrix;
+ mtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);
+ if (matrix) {
+ mtx.prependMatrix(matrix);
+ }
+ var l = this.children.length;
+ var rect = null;
+ for (var i = 0; i < l; i++) {
+ var child = this.children[i];
+ if (!child.visible || !(bounds = child._getBounds(mtx))) {
+ continue;
+ }
+ if (rect) {
+ rect.extend(bounds.x, bounds.y, bounds.width, bounds.height);
+ } else {
+ rect = bounds.clone();
+ }
+ }
+ return rect;
+ };
+ _createClass(Container, [{
+ key: "numChildren",
+ get: function get() {
+ return this.children.length;
+ }
+ }]);
+ return Container;
+}(DisplayObject);
+
+var MouseEvent =
+function (_Event) {
+ _inheritsLoose(MouseEvent, _Event);
+ function MouseEvent(type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY, relatedTarget) {
+ var _this;
+ _this = _Event.call(this, type, bubbles, cancelable) || this;
+ _this.stageX = stageX;
+ _this.stageY = stageY;
+ _this.rawX = rawX == null ? stageX : rawX;
+ _this.rawY = rawY == null ? stageY : rawY;
+ _this.nativeEvent = nativeEvent;
+ _this.pointerID = pointerID;
+ _this.primary = !!primary;
+ _this.relatedTarget = relatedTarget;
+ return _this;
+ }
+ var _proto = MouseEvent.prototype;
+ _proto.clone = function clone() {
+ return new MouseEvent(this.type, this.bubbles, this.cancelable, this.stageX, this.stageY, this.nativeEvent, this.pointerID, this.primary, this.rawX, this.rawY);
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + " (type=" + this.type + " stageX=" + this.stageX + " stageY=" + this.stageY + ")]";
+ };
+ _createClass(MouseEvent, [{
+ key: "localX",
+ get: function get() {
+ return this.currentTarget.globalToLocal(this.rawX, this.rawY).x;
+ }
+ }, {
+ key: "localY",
+ get: function get() {
+ return this.currentTarget.globalToLocal(this.rawX, this.rawY).y;
+ }
+ }, {
+ key: "isTouch",
+ get: function get() {
+ return this.pointerID !== -1;
+ }
+ }]);
+ return MouseEvent;
+}(Event);
+
+var Stage =
+function (_Container) {
+ _inheritsLoose(Stage, _Container);
+ function Stage(canvas) {
+ var _this;
+ _this = _Container.call(this) || this;
+ _this.autoClear = true;
+ _this.canvas = typeof canvas === "string" ? document.getElementById(canvas) : canvas;
+ _this.mouseX = 0;
+ _this.mouseY = 0;
+ _this.drawRect = null;
+ _this.snapToPixelEnabled = false;
+ _this.mouseInBounds = false;
+ _this.tickOnUpdate = true;
+ _this.mouseMoveOutside = false;
+ _this.preventSelection = true;
+ _this._pointerData = {};
+ _this._pointerCount = 0;
+ _this._primaryPointerID = null;
+ _this._mouseOverIntervalID = null;
+ _this._nextStage = null;
+ _this._prevStage = null;
+ _this.enableDOMEvents(true);
+ return _this;
+ }
+ var _proto = Stage.prototype;
+ _proto.update = function update(props) {
+ if (!this.canvas) {
+ return;
+ }
+ if (this.tickOnUpdate) {
+ this.tick(props);
+ }
+ if (this.dispatchEvent("drawstart", false, true) === false) {
+ return;
+ }
+ DisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;
+ var r = this.drawRect,
+ ctx = this.canvas.getContext("2d");
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ if (this.autoClear) {
+ if (r) {
+ ctx.clearRect(r.x, r.y, r.width, r.height);
+ } else {
+ ctx.clearRect(0, 0, this.canvas.width + 1, this.canvas.height + 1);
+ }
+ }
+ ctx.save();
+ if (this.drawRect) {
+ ctx.beginPath();
+ ctx.rect(r.x, r.y, r.width, r.height);
+ ctx.clip();
+ }
+ this.updateContext(ctx);
+ this.draw(ctx, false);
+ ctx.restore();
+ this.dispatchEvent("drawend");
+ };
+ _proto.tick = function tick(props) {
+ if (!this.tickEnabled || this.dispatchEvent("tickstart", false, true) === false) {
+ return;
+ }
+ var evtObj = new Event("tick");
+ if (props) {
+ for (var n in props) {
+ if (props.hasOwnProperty(n)) {
+ evtObj[n] = props[n];
+ }
+ }
+ }
+ this._tick(evtObj);
+ this.dispatchEvent("tickend");
+ };
+ _proto.handleEvent = function handleEvent(evt) {
+ if (evt.type === "tick") {
+ this.update(evt);
+ }
+ };
+ _proto.clear = function clear() {
+ if (!this.canvas) {
+ return;
+ }
+ var ctx = this.canvas.getContext("2d");
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, this.canvas.width + 1, this.canvas.height + 1);
+ };
+ _proto.toDataURL = function toDataURL(backgroundColor, mimeType) {
+ if (mimeType === void 0) {
+ mimeType = "image/png";
+ }
+ var data,
+ ctx = this.canvas.getContext('2d'),
+ w = this.canvas.width,
+ h = this.canvas.height;
+ if (backgroundColor) {
+ data = ctx.getImageData(0, 0, w, h);
+ var compositeOperation = ctx.globalCompositeOperation;
+ ctx.globalCompositeOperation = "destination-over";
+ ctx.fillStyle = backgroundColor;
+ ctx.fillRect(0, 0, w, h);
+ }
+ var dataURL = this.canvas.toDataURL(mimeType);
+ if (backgroundColor) {
+ ctx.putImageData(data, 0, 0);
+ ctx.globalCompositeOperation = compositeOperation;
+ }
+ return dataURL;
+ };
+ _proto.enableMouseOver = function enableMouseOver(frequency) {
+ var _this2 = this;
+ if (frequency === void 0) {
+ frequency = 20;
+ }
+ if (this._mouseOverIntervalID) {
+ clearInterval(this._mouseOverIntervalID);
+ this._mouseOverIntervalID = null;
+ if (frequency === 0) {
+ this._testMouseOver(true);
+ }
+ }
+ if (frequency <= 0) {
+ return;
+ }
+ this._mouseOverIntervalID = setInterval(function () {
+ return _this2._testMouseOver();
+ }, 1000 / Math.min(50, frequency));
+ };
+ _proto.enableDOMEvents = function enableDOMEvents(enable) {
+ var _this3 = this;
+ if (enable === void 0) {
+ enable = true;
+ }
+ var ls = this._eventListeners;
+ if (!enable && ls) {
+ for (var n in ls) {
+ var o = ls[n];
+ o.t.removeEventListener(n, o.f, false);
+ }
+ this._eventListeners = null;
+ } else if (enable && !ls && this.canvas) {
+ var t = window.addEventListener ? window : document;
+ ls = this._eventListeners = {
+ mouseup: {
+ t: t,
+ f: function f(e) {
+ return _this3._handleMouseUp(e);
+ }
+ },
+ mousemove: {
+ t: t,
+ f: function f(e) {
+ return _this3._handleMouseMove(e);
+ }
+ },
+ dblclick: {
+ t: this.canvas,
+ f: function f(e) {
+ return _this3._handleDoubleClick(e);
+ }
+ },
+ mousedown: {
+ t: this.canvas,
+ f: function f(e) {
+ return _this3._handleMouseDown(e);
+ }
+ }
+ };
+ for (var _n in ls) {
+ var _o = ls[_n];
+ _o.t.addEventListener && _o.t.addEventListener(_n, _o.f, false);
+ }
+ }
+ };
+ _proto.clone = function clone() {
+ throw "Stage cannot be cloned.";
+ };
+ _proto._getElementRect = function _getElementRect(e) {
+ var bounds;
+ try {
+ bounds = e.getBoundingClientRect();
+ }
+ catch (err) {
+ bounds = {
+ top: e.offsetTop,
+ left: e.offsetLeft,
+ width: e.offsetWidth,
+ height: e.offsetHeight
+ };
+ }
+ var offX = (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0);
+ var offY = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || document.body.clientTop || 0);
+ var styles = window.getComputedStyle ? getComputedStyle(e, null) : e.currentStyle;
+ var padL = parseInt(styles.paddingLeft) + parseInt(styles.borderLeftWidth);
+ var padT = parseInt(styles.paddingTop) + parseInt(styles.borderTopWidth);
+ var padR = parseInt(styles.paddingRight) + parseInt(styles.borderRightWidth);
+ var padB = parseInt(styles.paddingBottom) + parseInt(styles.borderBottomWidth);
+ return {
+ left: bounds.left + offX + padL,
+ right: bounds.right + offX - padR,
+ top: bounds.top + offY + padT,
+ bottom: bounds.bottom + offY - padB
+ };
+ };
+ _proto._getPointerData = function _getPointerData(id) {
+ var data = this._pointerData[id];
+ if (!data) {
+ data = this._pointerData[id] = {
+ x: 0,
+ y: 0
+ };
+ }
+ return data;
+ };
+ _proto._handleMouseMove = function _handleMouseMove(e) {
+ if (e === void 0) {
+ e = window.event;
+ }
+ this._handlePointerMove(-1, e, e.pageX, e.pageY);
+ };
+ _proto._handlePointerMove = function _handlePointerMove(id, e, pageX, pageY, owner) {
+ if (this._prevStage && owner === undefined) {
+ return;
+ }
+ if (!this.canvas) {
+ return;
+ }
+ var nextStage = this._nextStage,
+ o = this._getPointerData(id);
+ var inBounds = o.inBounds;
+ this._updatePointerPosition(id, e, pageX, pageY);
+ if (inBounds || o.inBounds || this.mouseMoveOutside) {
+ if (id === -1 && o.inBounds === !inBounds) {
+ this._dispatchMouseEvent(this, inBounds ? "mouseleave" : "mouseenter", false, id, o, e);
+ }
+ this._dispatchMouseEvent(this, "stagemousemove", false, id, o, e);
+ this._dispatchMouseEvent(o.target, "pressmove", true, id, o, e);
+ }
+ nextStage && nextStage._handlePointerMove(id, e, pageX, pageY, null);
+ };
+ _proto._updatePointerPosition = function _updatePointerPosition(id, e, pageX, pageY) {
+ var rect = this._getElementRect(this.canvas);
+ pageX -= rect.left;
+ pageY -= rect.top;
+ var w = this.canvas.width;
+ var h = this.canvas.height;
+ pageX /= (rect.right - rect.left) / w;
+ pageY /= (rect.bottom - rect.top) / h;
+ var o = this._getPointerData(id);
+ if (o.inBounds = pageX >= 0 && pageY >= 0 && pageX <= w - 1 && pageY <= h - 1) {
+ o.x = pageX;
+ o.y = pageY;
+ } else if (this.mouseMoveOutside) {
+ o.x = pageX < 0 ? 0 : pageX > w - 1 ? w - 1 : pageX;
+ o.y = pageY < 0 ? 0 : pageY > h - 1 ? h - 1 : pageY;
+ }
+ o.posEvtObj = e;
+ o.rawX = pageX;
+ o.rawY = pageY;
+ if (id === this._primaryPointerID || id === -1) {
+ this.mouseX = o.x;
+ this.mouseY = o.y;
+ this.mouseInBounds = o.inBounds;
+ }
+ };
+ _proto._handleMouseUp = function _handleMouseUp(e) {
+ this._handlePointerUp(-1, e, false);
+ };
+ _proto._handlePointerUp = function _handlePointerUp(id, e, clear, owner) {
+ var nextStage = this._nextStage,
+ o = this._getPointerData(id);
+ if (this._prevStage && owner === undefined) {
+ return;
+ }
+ var target = null,
+ oTarget = o.target;
+ if (!owner && (oTarget || nextStage)) {
+ target = this._getObjectsUnderPoint(o.x, o.y, null, true);
+ }
+ if (o.down) {
+ this._dispatchMouseEvent(this, "stagemouseup", false, id, o, e, target);
+ o.down = false;
+ }
+ if (target === oTarget) {
+ this._dispatchMouseEvent(oTarget, "click", true, id, o, e);
+ }
+ this._dispatchMouseEvent(oTarget, "pressup", true, id, o, e);
+ if (clear) {
+ if (id == this._primaryPointerID) {
+ this._primaryPointerID = null;
+ }
+ delete this._pointerData[id];
+ } else {
+ o.target = null;
+ }
+ nextStage && nextStage._handlePointerUp(id, e, clear, owner || target && this);
+ };
+ _proto._handleMouseDown = function _handleMouseDown(e) {
+ this._handlePointerDown(-1, e, e.pageX, e.pageY);
+ };
+ _proto._handlePointerDown = function _handlePointerDown(id, e, pageX, pageY, owner) {
+ if (this.preventSelection) {
+ e.preventDefault();
+ }
+ if (this._primaryPointerID == null || id === -1) {
+ this._primaryPointerID = id;
+ }
+ if (pageY != null) {
+ this._updatePointerPosition(id, e, pageX, pageY);
+ }
+ var target = null,
+ nextStage = this._nextStage,
+ o = this._getPointerData(id);
+ if (!owner) {
+ target = o.target = this._getObjectsUnderPoint(o.x, o.y, null, true);
+ }
+ if (o.inBounds) {
+ this._dispatchMouseEvent(this, "stagemousedown", false, id, o, e, target);
+ o.down = true;
+ }
+ this._dispatchMouseEvent(target, "mousedown", true, id, o, e);
+ nextStage && nextStage._handlePointerDown(id, e, pageX, pageY, owner || target && this);
+ };
+ _proto._testMouseOver = function _testMouseOver(clear, owner, eventTarget) {
+ if (this._prevStage && owner === undefined) {
+ return;
+ }
+ var nextStage = this._nextStage;
+ if (!this._mouseOverIntervalID) {
+ nextStage && nextStage._testMouseOver(clear, owner, eventTarget);
+ return;
+ }
+ var o = this._getPointerData(-1);
+ if (!o || !clear && this.mouseX === this._mouseOverX && this.mouseY === this._mouseOverY && this.mouseInBounds) {
+ return;
+ }
+ var e = o.posEvtObj;
+ var isEventTarget = eventTarget || e && e.target === this.canvas;
+ var target = null,
+ common = -1,
+ cursor = "";
+ if (!owner && (clear || this.mouseInBounds && isEventTarget)) {
+ target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, true);
+ this._mouseOverX = this.mouseX;
+ this._mouseOverY = this.mouseY;
+ }
+ var oldList = this._mouseOverTarget || [];
+ var oldTarget = oldList[oldList.length - 1];
+ var list = this._mouseOverTarget = [];
+ var t = target;
+ while (t) {
+ list.unshift(t);
+ if (!cursor) {
+ cursor = t.cursor;
+ }
+ t = t.parent;
+ }
+ this.canvas.style.cursor = cursor;
+ if (!owner && eventTarget) {
+ eventTarget.canvas.style.cursor = cursor;
+ }
+ for (var i = 0, l = list.length; i < l; i++) {
+ if (list[i] != oldList[i]) {
+ break;
+ }
+ common = i;
+ }
+ if (oldTarget != target) {
+ this._dispatchMouseEvent(oldTarget, "mouseout", true, -1, o, e, target);
+ }
+ for (var _i = oldList.length - 1; _i > common; _i--) {
+ this._dispatchMouseEvent(oldList[_i], "rollout", false, -1, o, e, target);
+ }
+ for (var _i2 = list.length - 1; _i2 > common; _i2--) {
+ this._dispatchMouseEvent(list[_i2], "rollover", false, -1, o, e, oldTarget);
+ }
+ if (oldTarget != target) {
+ this._dispatchMouseEvent(target, "mouseover", true, -1, o, e, oldTarget);
+ }
+ nextStage && nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);
+ };
+ _proto._handleDoubleClick = function _handleDoubleClick(e, owner) {
+ var target = null,
+ nextStage = this._nextStage,
+ o = this._getPointerData(-1);
+ if (!owner) {
+ target = this._getObjectsUnderPoint(o.x, o.y, null, true);
+ this._dispatchMouseEvent(target, "dblclick", true, -1, o, e);
+ }
+ nextStage && nextStage._handleDoubleClick(e, owner || target && this);
+ };
+ _proto._dispatchMouseEvent = function _dispatchMouseEvent(target, type, bubbles, pointerId, o, nativeEvent, relatedTarget) {
+ if (!target || !bubbles && !target.hasEventListener(type)) {
+ return;
+ }
+ var evt = new MouseEvent(type, bubbles, false, o.x, o.y, nativeEvent, pointerId, pointerId === this._primaryPointerID || pointerId === -1, o.rawX, o.rawY, relatedTarget);
+ target.dispatchEvent(evt);
+ };
+ _createClass(Stage, [{
+ key: "nextStage",
+ get: function get() {
+ return this._nextStage;
+ },
+ set: function set(stage) {
+ if (this._nextStage) {
+ this._nextStage._prevStage = null;
+ }
+ if (stage) {
+ stage._prevStage = this;
+ }
+ this._nextStage = stage;
+ }
+ }]);
+ return Stage;
+}(Container);
+
+function createCanvas(width, height) {
+ if (width === void 0) {
+ width = 1;
+ }
+ if (height === void 0) {
+ height = 1;
+ }
+ var c;
+ if (window.createjs !== undefined && window.createjs.createCanvas !== undefined) {
+ c = window.createjs.createCanvas();
+ }
+ if (window.document !== undefined && window.document.createElement !== undefined) {
+ c = document.createElement("canvas");
+ }
+ if (c !== undefined) {
+ c.width = width;
+ c.height = height;
+ return c;
+ }
+ throw "Canvas not supported in this environment.";
+}
+
+var VideoBuffer =
+function () {
+ function VideoBuffer(video) {
+ this.readyState = video.readyState;
+ this._video = video;
+ this._canvas = null;
+ this._lastTime = -1;
+ if (this.readyState < 2) {
+ video.addEventListener("canplaythrough", this._videoReady.bind(this));
+ }
+ }
+ var _proto = VideoBuffer.prototype;
+ _proto.getImage = function getImage() {
+ if (this.readyState < 2) {
+ return;
+ }
+ var canvas = this._canvas,
+ video = this._video;
+ if (!canvas) {
+ canvas = this._canvas = createCanvas();
+ canvas.width = video.videoWidth;
+ canvas.height = video.videoHeight;
+ }
+ if (video.readyState >= 2 && video.currentTime !== this._lastTime) {
+ var ctx = canvas.getContext("2d");
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+ this._lastTime = video.currentTime;
+ }
+ return canvas;
+ };
+ _proto._videoReady = function _videoReady() {
+ this.readyState = 2;
+ };
+ return VideoBuffer;
+}();
+
+var Bitmap =
+function (_DisplayObject) {
+ _inheritsLoose(Bitmap, _DisplayObject);
+ function Bitmap(imageOrUri) {
+ var _this;
+ _this = _DisplayObject.call(this) || this;
+ if (typeof imageOrUri === "string") {
+ _this.image = document.createElement("img");
+ _this.image.src = imageOrUri;
+ } else {
+ _this.image = imageOrUri;
+ }
+ _this.sourceRect = null;
+ _this._webGLRenderStyle = DisplayObject._StageGL_BITMAP;
+ return _this;
+ }
+ var _proto = Bitmap.prototype;
+ _proto.isVisible = function isVisible() {
+ var image = this.image;
+ var hasContent = this.cacheCanvas || image && (image.naturalWidth || image.getContext || image.readyState >= 2);
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (ignoreCache === void 0) {
+ ignoreCache = false;
+ }
+ if (_DisplayObject.prototype.draw.call(this, ctx, ignoreCache)) {
+ return true;
+ }
+ var img = this.image,
+ rect = this.sourceRect;
+ if (img instanceof VideoBuffer) {
+ img = img.getImage();
+ }
+ if (img == null) {
+ return true;
+ }
+ if (rect) {
+ var x1 = rect.x,
+ y1 = rect.y,
+ x2 = x1 + rect.width,
+ y2 = y1 + rect.height,
+ x = 0,
+ y = 0,
+ w = img.width,
+ h = img.height;
+ if (x1 < 0) {
+ x -= x1;
+ x1 = 0;
+ }
+ if (x2 > w) {
+ x2 = w;
+ }
+ if (y1 < 0) {
+ y -= y1;
+ y1 = 0;
+ }
+ if (y2 > h) {
+ y2 = h;
+ }
+ ctx.drawImage(img, x1, y1, x2 - x1, y2 - y1, x, y, x2 - x1, y2 - y1);
+ } else {
+ ctx.drawImage(img, 0, 0);
+ }
+ return true;
+ };
+ _proto.getBounds = function getBounds() {
+ var rect = _DisplayObject.prototype.getBounds.call(this);
+ if (rect) {
+ return rect;
+ }
+ var image = this.image,
+ o = this.sourceRect || image;
+ var hasContent = image && (image.naturalWidth || image.getContext || image.readyState >= 2);
+ return hasContent ? this._rectangle.setValues(0, 0, o.width, o.height) : null;
+ };
+ _proto.clone = function clone(node) {
+ var img = this.image;
+ if (img != null && node != null) {
+ img = img.cloneNode();
+ }
+ var bmp = new Bitmap(img);
+ if (this.sourceRect) {
+ bmp.sourceRect = this.sourceRect.clone();
+ }
+ this._cloneProps(bmp);
+ return bmp;
+ };
+ return Bitmap;
+}(DisplayObject);
+
+var Sprite =
+function (_DisplayObject) {
+ _inheritsLoose(Sprite, _DisplayObject);
+ function Sprite(spriteSheet, frameOrAnimation) {
+ var _this;
+ _this = _DisplayObject.call(this) || this;
+ _this.currentFrame = 0;
+ _this.currentAnimation = null;
+ _this.paused = true;
+ _this.spriteSheet = spriteSheet;
+ _this.currentAnimationFrame = 0;
+ _this.framerate = 0;
+ _this._animation = null;
+ _this._currentFrame = null;
+ _this._skipAdvance = false;
+ _this._webGLRenderStyle = DisplayObject._StageGL_SPRITE;
+ if (frameOrAnimation != null) {
+ _this.gotoAndPlay(frameOrAnimation);
+ }
+ return _this;
+ }
+ var _proto = Sprite.prototype;
+ _proto.isVisible = function isVisible() {
+ var hasContent = this.cacheCanvas || this.spriteSheet.complete;
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (_DisplayObject.prototype.draw.call(this, ctx, ignoreCache)) {
+ return true;
+ }
+ this._normalizeFrame();
+ var o = this.spriteSheet.getFrame(this._currentFrame | 0);
+ if (!o) {
+ return false;
+ }
+ var rect = o.rect;
+ if (rect.width && rect.height) {
+ ctx.drawImage(o.image, rect.x, rect.y, rect.width, rect.height, -o.regX, -o.regY, rect.width, rect.height);
+ }
+ return true;
+ };
+ _proto.play = function play() {
+ this.paused = false;
+ };
+ _proto.stop = function stop() {
+ this.paused = true;
+ };
+ _proto.gotoAndPlay = function gotoAndPlay(frameOrAnimation) {
+ this.paused = false;
+ this._skipAdvance = true;
+ this._goto(frameOrAnimation);
+ };
+ _proto.gotoAndStop = function gotoAndStop(frameOrAnimation) {
+ this.paused = true;
+ this._goto(frameOrAnimation);
+ };
+ _proto.advance = function advance(time) {
+ var fps = this.framerate || this.spriteSheet.framerate;
+ var t = fps && time != null ? time / (1000 / fps) : 1;
+ this._normalizeFrame(t);
+ };
+ _proto.getBounds = function getBounds() {
+ return _DisplayObject.prototype.getBounds.call(this) || this.spriteSheet.getFrameBounds(this.currentFrame, this._rectangle);
+ };
+ _proto.clone = function clone() {
+ return this._cloneProps(new Sprite(this.spriteSheet));
+ };
+ _proto._cloneProps = function _cloneProps(o) {
+ _DisplayObject.prototype._cloneProps.call(this, o);
+ o.currentFrame = this.currentFrame;
+ o.currentAnimation = this.currentAnimation;
+ o.paused = this.paused;
+ o.currentAnimationFrame = this.currentAnimationFrame;
+ o.framerate = this.framerate;
+ o._animation = this._animation;
+ o._currentFrame = this._currentFrame;
+ o._skipAdvance = this._skipAdvance;
+ return o;
+ };
+ _proto._tick = function _tick(evtObj) {
+ if (!this.paused) {
+ if (!this._skipAdvance) {
+ this.advance(evtObj && evtObj.delta);
+ }
+ this._skipAdvance = false;
+ }
+ _DisplayObject.prototype._tick.call(this, evtObj);
+ };
+ _proto._normalizeFrame = function _normalizeFrame(frameDelta) {
+ if (frameDelta === void 0) {
+ frameDelta = 0;
+ }
+ var animation = this._animation;
+ var paused = this.paused;
+ var frame = this._currentFrame;
+ if (animation) {
+ var speed = animation.speed || 1;
+ var animFrame = this.currentAnimationFrame;
+ var l = animation.frames.length;
+ if (animFrame + frameDelta * speed >= l) {
+ var next = animation.next;
+ if (this._dispatchAnimationEnd(animation, frame, paused, next, l - 1)) {
+ return;
+ } else if (next) {
+ return this._goto(next, frameDelta - (l - animFrame) / speed);
+ } else {
+ this.paused = true;
+ animFrame = animation.frames.length - 1;
+ }
+ } else {
+ animFrame += frameDelta * speed;
+ }
+ this.currentAnimationFrame = animFrame;
+ this._currentFrame = animation.frames[animFrame | 0];
+ } else {
+ frame = this._currentFrame += frameDelta;
+ var _l = this.spriteSheet.getNumFrames();
+ if (frame >= _l && _l > 0) {
+ if (!this._dispatchAnimationEnd(animation, frame, paused, _l - 1)) {
+ if ((this._currentFrame -= _l) >= _l) {
+ return this._normalizeFrame();
+ }
+ }
+ }
+ }
+ frame = this._currentFrame | 0;
+ if (this.currentFrame != frame) {
+ this.currentFrame = frame;
+ this.dispatchEvent("change");
+ }
+ };
+ _proto._dispatchAnimationEnd = function _dispatchAnimationEnd(animation, frame, paused, next, end) {
+ var name = animation ? animation.name : null;
+ if (this.hasEventListener("animationend")) {
+ var evt = new Event("animationend");
+ evt.name = name;
+ evt.next = next;
+ this.dispatchEvent(evt);
+ }
+ var changed = this._animation != animation || this._currentFrame != frame;
+ if (!changed && !paused && this.paused) {
+ this.currentAnimationFrame = end;
+ changed = true;
+ }
+ return changed;
+ };
+ _proto._goto = function _goto(frameOrAnimation, frame) {
+ if (frame === void 0) {
+ frame = 0;
+ }
+ this.currentAnimationFrame = 0;
+ if (isNaN(frameOrAnimation)) {
+ var data = this.spriteSheet.getAnimation(frameOrAnimation);
+ if (data) {
+ this._animation = data;
+ this.currentAnimation = frameOrAnimation;
+ this._normalizeFrame(frame);
+ }
+ } else {
+ this.currentAnimation = this._animation = null;
+ this._currentFrame = frameOrAnimation;
+ this._normalizeFrame();
+ }
+ };
+ return Sprite;
+}(DisplayObject);
+
+var BitmapText =
+function (_Container) {
+ _inheritsLoose(BitmapText, _Container);
+ function BitmapText(text, spriteSheet) {
+ var _this;
+ if (text === void 0) {
+ text = "";
+ }
+ if (spriteSheet === void 0) {
+ spriteSheet = null;
+ }
+ _this = _Container.call(this) || this;
+ _this.text = text;
+ _this.spriteSheet = spriteSheet;
+ _this.lineHeight = 0;
+ _this.letterSpacing = 0;
+ _this.spaceWidth = 0;
+ _this._oldProps = {
+ text: 0,
+ spriteSheet: 0,
+ lineHeight: 0,
+ letterSpacing: 0,
+ spaceWidth: 0
+ };
+ _this._oldStage = null;
+ _this._drawAction = null;
+ return _this;
+ }
+ var _proto = BitmapText.prototype;
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (this.drawCache(ctx, ignoreCache)) {
+ return;
+ }
+ this._updateState();
+ _Container.prototype.draw.call(this, ctx, ignoreCache);
+ };
+ _proto.getBounds = function getBounds() {
+ this._updateText();
+ return _Container.prototype.getBounds.call(this);
+ };
+ _proto.isVisible = function isVisible() {
+ var hasContent = this.cacheCanvas || this.spriteSheet && this.spriteSheet.complete && this.text;
+ return !!(this.visible && this.alpha > 0 && this.scaleX !== 0 && this.scaleY !== 0 && hasContent);
+ };
+ _proto.clone = function clone() {
+ return this._cloneProps(new BitmapText(this.text, this.spriteSheet));
+ };
+ _proto.addChild = function addChild() {};
+ _proto.addChildAt = function addChildAt() {};
+ _proto.removeChild = function removeChild() {};
+ _proto.removeChildAt = function removeChildAt() {};
+ _proto.removeAllChildren = function removeAllChildren() {};
+ _proto._updateState = function _updateState() {
+ this._updateText();
+ };
+ _proto._cloneProps = function _cloneProps(o) {
+ _Container.prototype._cloneProps.call(this, o);
+ o.lineHeight = this.lineHeight;
+ o.letterSpacing = this.letterSpacing;
+ o.spaceWidth = this.spaceWidth;
+ return o;
+ };
+ _proto._getFrameIndex = function _getFrameIndex(character, spriteSheet) {
+ var c,
+ o = spriteSheet.getAnimation(character);
+ if (!o) {
+ character != (c = character.toUpperCase()) || character != (c = character.toLowerCase()) || (c = null);
+ if (c) {
+ o = spriteSheet.getAnimation(c);
+ }
+ }
+ return o && o.frames[0];
+ };
+ _proto._getFrame = function _getFrame(character, spriteSheet) {
+ var index = this._getFrameIndex(character, spriteSheet);
+ return index == null ? index : spriteSheet.getFrame(index);
+ };
+ _proto._getLineHeight = function _getLineHeight(ss) {
+ var frame = this._getFrame("1", ss) || this._getFrame("T", ss) || this._getFrame("L", ss) || ss.getFrame(0);
+ return frame ? frame.rect.height : 1;
+ };
+ _proto._getSpaceWidth = function _getSpaceWidth(ss) {
+ var frame = this._getFrame("1", ss) || this._getFrame("l", ss) || this._getFrame("e", ss) || this._getFrame("a", ss) || ss.getFrame(0);
+ return frame ? frame.rect.width : 1;
+ };
+ _proto._tick = function _tick(evtObj) {
+ var stage = this.stage;
+ stage && stage.on("drawstart", this._updateText, this, true);
+ _Container.prototype._tick.call(this, evtObj);
+ };
+ _proto._updateText = function _updateText() {
+ var x = 0,
+ y = 0,
+ o = this._oldProps,
+ change = false,
+ spaceW = this.spaceWidth,
+ lineH = this.lineHeight,
+ ss = this.spriteSheet;
+ var pool = BitmapText._spritePool,
+ kids = this.children,
+ childIndex = 0,
+ numKids = kids.length,
+ sprite;
+ for (var n in o) {
+ if (o[n] != this[n]) {
+ o[n] = this[n];
+ change = true;
+ }
+ }
+ if (!change) {
+ return;
+ }
+ var hasSpace = !!this._getFrame(" ", ss);
+ if (!hasSpace && !spaceW) {
+ spaceW = this._getSpaceWidth(ss);
+ }
+ if (!lineH) {
+ lineH = this._getLineHeight(ss);
+ }
+ for (var i = 0, l = this.text.length; i < l; i++) {
+ var character = this.text.charAt(i);
+ if (character === " " && !hasSpace) {
+ x += spaceW;
+ continue;
+ } else if (character === "\n" || character === "\r") {
+ if (character === "\r" && this.text.charAt(i + 1) === "\n") {
+ i++;
+ }
+ x = 0;
+ y += lineH;
+ continue;
+ }
+ var index = this._getFrameIndex(character, ss);
+ if (index == null) {
+ continue;
+ }
+ if (childIndex < numKids) {
+ sprite = kids[childIndex];
+ } else {
+ kids.push(sprite = pool.length ? pool.pop() : new Sprite());
+ sprite.parent = this;
+ numKids++;
+ }
+ sprite.spriteSheet = ss;
+ sprite.gotoAndStop(index);
+ sprite.x = x;
+ sprite.y = y;
+ childIndex++;
+ x += sprite.getBounds().width + this.letterSpacing;
+ }
+ while (numKids > childIndex) {
+ pool.push(sprite = kids.pop());
+ sprite.parent = null;
+ numKids--;
+ }
+ if (pool.length > BitmapText.maxPoolSize) {
+ pool.length = BitmapText.maxPoolSize;
+ }
+ };
+ return BitmapText;
+}(Container);
+BitmapText.maxPoolSize = 100;
+BitmapText._spritePool = [];
+
+var DOMElement =
+function (_DisplayObject) {
+ _inheritsLoose(DOMElement, _DisplayObject);
+ function DOMElement(htmlElement) {
+ var _this;
+ _this = _DisplayObject.call(this) || this;
+ if (typeof htmlElement === "string") {
+ htmlElement = document.getElementById(htmlElement);
+ }
+ _this.mouseEnabled = false;
+ var style = htmlElement.style;
+ style.position = "absolute";
+ style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%";
+ _this.htmlElement = htmlElement;
+ _this._oldProps = null;
+ _this._oldStage = null;
+ _this._drawAction = null;
+ return _this;
+ }
+ var _proto = DOMElement.prototype;
+ _proto.isVisible = function isVisible() {
+ return this.htmlElement != null;
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ return true;
+ };
+ _proto.cache = function cache() {};
+ _proto.uncache = function uncache() {};
+ _proto.updateCache = function updateCache() {};
+ _proto.hitTest = function hitTest() {};
+ _proto.localToGlobal = function localToGlobal() {};
+ _proto.globalToLocal = function globalToLocal() {};
+ _proto.localToLocal = function localToLocal() {};
+ _proto.clone = function clone() {
+ throw "DOMElement cannot be cloned.";
+ };
+ _proto._tick = function _tick(evtObj) {
+ var stage = this.stage;
+ if (stage != null && stage !== this._oldStage) {
+ this._drawAction && stage.off("drawend", this._drawAction);
+ this._drawAction = stage.on("drawend", this._handleDrawEnd, this);
+ this._oldStage = stage;
+ }
+ _DisplayObject.prototype._tick.call(this, evtObj);
+ };
+ _proto._handleDrawEnd = function _handleDrawEnd(evt) {
+ var o = this.htmlElement;
+ if (!o) {
+ return;
+ }
+ var style = o.style;
+ var props = this.getConcatenatedDisplayProps(this._props),
+ mtx = props.matrix;
+ var visibility = props.visible ? "visible" : "hidden";
+ if (visibility != style.visibility) {
+ style.visibility = visibility;
+ }
+ if (!props.visible) {
+ return;
+ }
+ var oldProps = this._oldProps,
+ oldMtx = oldProps && oldProps.matrix;
+ var n = 10000;
+ if (!oldMtx || !oldMtx.equals(mtx)) {
+ var str = "matrix(" + (mtx.a * n | 0) / n + "," + (mtx.b * n | 0) / n + "," + (mtx.c * n | 0) / n + "," + (mtx.d * n | 0) / n + "," + (mtx.tx + 0.5 | 0);
+ style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str + "," + (mtx.ty + 0.5 | 0) + ")";
+ style.MozTransform = str + "px," + (mtx.ty + 0.5 | 0) + "px)";
+ if (!oldProps) {
+ oldProps = this._oldProps = new DisplayProps(true, null);
+ }
+ oldProps.matrix.copy(mtx);
+ }
+ if (oldProps.alpha != props.alpha) {
+ style.opacity = "" + (props.alpha * n | 0) / n;
+ oldProps.alpha = props.alpha;
+ }
+ };
+ return DOMElement;
+}(DisplayObject);
+
+var Graphics =
+function () {
+ function Graphics() {
+ this.command = null;
+ this._stroke = null;
+ this._strokeStyle = null;
+ this._oldStrokeStyle = null;
+ this._strokeDash = null;
+ this._oldStrokeDash = null;
+ this._fill = null;
+ this._strokeIgnoreScale = false;
+ this._commitIndex = 0;
+ this._instructions = [];
+ this._activeInstructions = [];
+ this._dirty = false;
+ this._storeIndex = 0;
+ this.curveTo = this.quadraticCurveTo;
+ this.drawRect = this.rect;
+ this.mt = this.moveTo;
+ this.lt = this.lineTo;
+ this.at = this.arcTo;
+ this.bt = this.bezierCurveTo;
+ this.qt = this.quadraticCurveTo;
+ this.a = this.arc;
+ this.r = this.rect;
+ this.cp = this.closePath;
+ this.c = this.clear;
+ this.f = this.beginFill;
+ this.lf = this.beginLinearGradientFill;
+ this.rf = this.beginRadialGradientFill;
+ this.bf = this.beginBitmapFill;
+ this.ef = this.endFill;
+ this.ss = this.setStrokeStyle;
+ this.sd = this.setStrokeDash;
+ this.s = this.beginStroke;
+ this.ls = this.beginLinearGradientStroke;
+ this.rs = this.beginRadialGradientStroke;
+ this.bs = this.beginBitmapStroke;
+ this.es = this.endStroke;
+ this.dr = this.drawRect;
+ this.rr = this.drawRoundRect;
+ this.rc = this.drawRoundRectComplex;
+ this.dc = this.drawCircle;
+ this.de = this.drawEllipse;
+ this.dp = this.drawPolyStar;
+ this.p = this.decodePath;
+ this.clear();
+ }
+ Graphics.getRGB = function getRGB(r, g, b, alpha) {
+ if (r != null && b == null) {
+ alpha = g;
+ b = r & 0xFF;
+ g = r >> 8 & 0xFF;
+ r = r >> 16 & 0xFF;
+ }
+ if (alpha == null) {
+ return "rgb(" + r + "," + g + "," + b + ")";
+ } else {
+ return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
+ }
+ };
+ Graphics.getHSL = function getHSL(hue, saturation, lightness, alpha) {
+ if (alpha == null) {
+ return "hsl(" + hue % 360 + "," + saturation + "%," + lightness + "%)";
+ } else {
+ return "hsl(" + hue % 360 + "," + saturation + "%," + lightness + "%," + alpha + ")";
+ }
+ };
+ var _proto = Graphics.prototype;
+ _proto.isEmpty = function isEmpty() {
+ return !(this._instructions.length || this._activeInstructions.length);
+ };
+ _proto.draw = function draw(ctx, data) {
+ this._updateInstructions();
+ var instr = this._instructions;
+ var l = instr.length;
+ for (var i = this._storeIndex; i < l; i++) {
+ instr[i].exec(ctx, data);
+ }
+ };
+ _proto.drawAsPath = function drawAsPath(ctx) {
+ this._updateInstructions();
+ var instr,
+ instrs = this._instructions;
+ var l = instrs.length;
+ for (var i = this._storeIndex; i < l; i++) {
+ if ((instr = instrs[i]).path !== false) {
+ instr.exec(ctx);
+ }
+ }
+ };
+ _proto.moveTo = function moveTo(x, y) {
+ return this.append(new MoveTo(x, y), true);
+ };
+ _proto.lineTo = function lineTo(x, y) {
+ return this.append(new LineTo(x, y));
+ };
+ _proto.arcTo = function arcTo(x1, y1, x2, y2, radius) {
+ return this.append(new ArcTo(x1, y1, x2, y2, radius));
+ };
+ _proto.arc = function arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+ return this.append(new Arc(x, y, radius, startAngle, endAngle, anticlockwise));
+ };
+ _proto.quadraticCurveTo = function quadraticCurveTo(cpx, cpy, x, y) {
+ return this.append(new QuadraticCurveTo(cpx, cpy, x, y));
+ };
+ _proto.bezierCurveTo = function bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+ return this.append(new BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y));
+ };
+ _proto.rect = function rect(x, y, w, h) {
+ return this.append(new Rect(x, y, w, h));
+ };
+ _proto.closePath = function closePath() {
+ return this._activeInstructions.length ? this.append(new ClosePath()) : this;
+ };
+ _proto.clear = function clear() {
+ this._instructions.length = this._activeInstructions.length = this._commitIndex = 0;
+ this._strokeStyle = this._oldStrokeStyle = this._stroke = this._fill = this._strokeDash = this._oldStrokeDash = null;
+ this._dirty = this._strokeIgnoreScale = false;
+ return this;
+ };
+ _proto.beginFill = function beginFill(color) {
+ return this._setFill(color ? new Fill(color) : null);
+ };
+ _proto.beginLinearGradientFill = function beginLinearGradientFill(colors, ratios, x0, y0, x1, y1) {
+ return this._setFill(new Fill().linearGradient(colors, ratios, x0, y0, x1, y1));
+ };
+ _proto.beginRadialGradientFill = function beginRadialGradientFill(colors, ratios, x0, y0, r0, x1, y1, r1) {
+ return this._setFill(new Fill().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));
+ };
+ _proto.beginBitmapFill = function beginBitmapFill(image, repetition, matrix) {
+ return this._setFill(new Fill(null, matrix).bitmap(image, repetition));
+ };
+ _proto.endFill = function endFill() {
+ return this.beginFill();
+ };
+ _proto.setStrokeStyle = function setStrokeStyle(thickness, caps, joints, miterLimit, ignoreScale) {
+ if (caps === void 0) {
+ caps = 0;
+ }
+ if (joints === void 0) {
+ joints = 0;
+ }
+ if (miterLimit === void 0) {
+ miterLimit = 10;
+ }
+ if (ignoreScale === void 0) {
+ ignoreScale = false;
+ }
+ this._updateInstructions(true);
+ this._strokeStyle = this.command = new StrokeStyle(thickness, caps, joints, miterLimit, ignoreScale);
+ if (this._stroke) {
+ this._stroke.ignoreScale = ignoreScale;
+ }
+ this._strokeIgnoreScale = ignoreScale;
+ return this;
+ };
+ _proto.setStrokeDash = function setStrokeDash(segments, offset) {
+ if (offset === void 0) {
+ offset = 0;
+ }
+ this._updateInstructions(true);
+ this._strokeDash = this.command = new StrokeDash(segments, offset);
+ return this;
+ };
+ _proto.beginStroke = function beginStroke(color) {
+ return this._setStroke(color ? new Stroke(color) : null);
+ };
+ _proto.beginLinearGradientStroke = function beginLinearGradientStroke(colors, ratios, x0, y0, x1, y1) {
+ return this._setStroke(new Stroke().linearGradient(colors, ratios, x0, y0, x1, y1));
+ };
+ _proto.beginRadialGradientStroke = function beginRadialGradientStroke(colors, ratios, x0, y0, r0, x1, y1, r1) {
+ return this._setStroke(new Stroke().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));
+ };
+ _proto.beginBitmapStroke = function beginBitmapStroke(image, repetition) {
+ if (repetition === void 0) {
+ repetition = "repeat";
+ }
+ return this._setStroke(new Stroke().bitmap(image, repetition));
+ };
+ _proto.endStroke = function endStroke() {
+ return this.beginStroke();
+ };
+ _proto.drawRoundRect = function drawRoundRect(x, y, w, h, radius) {
+ return this.drawRoundRectComplex(x, y, w, h, radius, radius, radius, radius);
+ };
+ _proto.drawRoundRectComplex = function drawRoundRectComplex(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {
+ return this.append(new RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL));
+ };
+ _proto.drawCircle = function drawCircle(x, y, radius) {
+ return this.append(new Circle(x, y, radius));
+ };
+ _proto.drawEllipse = function drawEllipse(x, y, w, h) {
+ return this.append(new Ellipse(x, y, w, h));
+ };
+ _proto.drawPolyStar = function drawPolyStar(x, y, radius, sides, pointSize, angle) {
+ return this.append(new PolyStar(x, y, radius, sides, pointSize, angle));
+ };
+ _proto.append = function append(command, clean) {
+ this._activeInstructions.push(command);
+ this.command = command;
+ if (!clean) {
+ this._dirty = true;
+ }
+ return this;
+ };
+ _proto.decodePath = function decodePath(str) {
+ var instructions = [this.moveTo, this.lineTo, this.quadraticCurveTo, this.bezierCurveTo, this.closePath];
+ var paramCount = [2, 2, 4, 6, 0];
+ var i = 0;
+ var l = str.length;
+ var params = [];
+ var x = 0,
+ y = 0;
+ var base64 = Graphics._BASE_64;
+ while (i < l) {
+ var c = str.charAt(i);
+ var n = base64[c];
+ var fi = n >> 3;
+ var f = instructions[fi];
+ if (!f || n & 3) {
+ throw "Bad path data (@" + i + "):c";
+ }
+ var pl = paramCount[fi];
+ if (!fi) {
+ x = y = 0;
+ }
+ params.length = 0;
+ i++;
+ var charCount = (n >> 2 & 1) + 2;
+ for (var p = 0; p < pl; p++) {
+ var num = base64[str.charAt(i)];
+ var sign = num >> 5 ? -1 : 1;
+ num = (num & 31) << 6 | base64[str.charAt(i + 1)];
+ if (charCount === 3) {
+ num = num << 6 | base64[str.charAt(i + 2)];
+ }
+ num = sign * num / 10;
+ if (p % 2) {
+ x = num += x;
+ } else {
+ y = num += y;
+ }
+ params[p] = num;
+ i += charCount;
+ }
+ f.apply(this, params);
+ }
+ return this;
+ };
+ _proto.store = function store() {
+ this._updateInstructions(true);
+ this._storeIndex = this._instructions.length;
+ return this;
+ };
+ _proto.unstore = function unstore() {
+ this._storeIndex = 0;
+ return this;
+ };
+ _proto.clone = function clone() {
+ var o = new Graphics();
+ o.command = this.command;
+ o._stroke = this._stroke;
+ o._strokeStyle = this._strokeStyle;
+ o._strokeDash = this._strokeDash;
+ o._strokeIgnoreScale = this._strokeIgnoreScale;
+ o._fill = this._fill;
+ o._instructions = this._instructions.slice();
+ o._commitIndex = this._commitIndex;
+ o._activeInstructions = this._activeInstructions.slice();
+ o._dirty = this._dirty;
+ o._storeIndex = this._storeIndex;
+ return o;
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto._updateInstructions = function _updateInstructions(commit) {
+ var instr = this._instructions,
+ active = this._activeInstructions,
+ commitIndex = this._commitIndex;
+ if (this._dirty && active.length) {
+ instr.length = commitIndex;
+ instr.push(Graphics.beginCmd);
+ var l = active.length,
+ ll = instr.length;
+ instr.length = ll + l;
+ for (var i = 0; i < l; i++) {
+ instr[i + ll] = active[i];
+ }
+ if (this._fill) {
+ instr.push(this._fill);
+ }
+ if (this._stroke) {
+ if (this._strokeDash !== this._oldStrokeDash) {
+ instr.push(this._strokeDash);
+ }
+ if (this._strokeStyle !== this._oldStrokeStyle) {
+ instr.push(this._strokeStyle);
+ }
+ if (commit) {
+ this._oldStrokeDash = this._strokeDash;
+ this._oldStrokeStyle = this._strokeStyle;
+ }
+ instr.push(this._stroke);
+ }
+ this._dirty = false;
+ }
+ if (commit) {
+ active.length = 0;
+ this._commitIndex = instr.length;
+ }
+ };
+ _proto._setFill = function _setFill(fill) {
+ this._updateInstructions(true);
+ this.command = this._fill = fill;
+ return this;
+ };
+ _proto._setStroke = function _setStroke(stroke) {
+ this._updateInstructions(true);
+ if (this.command = this._stroke = stroke) {
+ stroke.ignoreScale = this._strokeIgnoreScale;
+ }
+ return this;
+ };
+ _createClass(Graphics, [{
+ key: "instructions",
+ get: function get() {
+ this._updateInstructions();
+ return this._instructions;
+ }
+ }], [{
+ key: "LineTo",
+ get: function get() {
+ return LineTo;
+ }
+ }, {
+ key: "MoveTo",
+ get: function get() {
+ return MoveTo;
+ }
+ }, {
+ key: "ArcTo",
+ get: function get() {
+ return ArcTo;
+ }
+ }, {
+ key: "Arc",
+ get: function get() {
+ return Arc;
+ }
+ }, {
+ key: "QuadraticCurveTo",
+ get: function get() {
+ return QuadraticCurveTo;
+ }
+ }, {
+ key: "BezierCurveTo",
+ get: function get() {
+ return BezierCurveTo;
+ }
+ }, {
+ key: "Rect",
+ get: function get() {
+ return Rect;
+ }
+ }, {
+ key: "ClosePath",
+ get: function get() {
+ return ClosePath;
+ }
+ }, {
+ key: "BeginPath",
+ get: function get() {
+ return BeginPath;
+ }
+ }, {
+ key: "Fill",
+ get: function get() {
+ return Fill;
+ }
+ }, {
+ key: "Stroke",
+ get: function get() {
+ return Stroke;
+ }
+ }, {
+ key: "StrokeStyle",
+ get: function get() {
+ return StrokeStyle;
+ }
+ }, {
+ key: "StrokeDash",
+ get: function get() {
+ return StrokeDash;
+ }
+ }, {
+ key: "RoundRect",
+ get: function get() {
+ return RoundRect;
+ }
+ }, {
+ key: "Circle",
+ get: function get() {
+ return Circle;
+ }
+ }, {
+ key: "Ellipse",
+ get: function get() {
+ return Ellipse;
+ }
+ }, {
+ key: "PolyStar",
+ get: function get() {
+ return PolyStar;
+ }
+ }]);
+ return Graphics;
+}();
+var LineTo =
+function () {
+ function LineTo(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+ var _proto2 = LineTo.prototype;
+ _proto2.exec = function exec(ctx) {
+ ctx.lineTo(this.x, this.y);
+ };
+ return LineTo;
+}();
+var MoveTo =
+function () {
+ function MoveTo(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+ var _proto3 = MoveTo.prototype;
+ _proto3.exec = function exec(ctx) {
+ ctx.moveTo(this.x, this.y);
+ };
+ return MoveTo;
+}();
+var ArcTo =
+function () {
+ function ArcTo(x1, y1, x2, y2, radius) {
+ this.x1 = x1;
+ this.y1 = y1;
+ this.x2 = x2;
+ this.y2 = y2;
+ this.radius = radius;
+ }
+ var _proto4 = ArcTo.prototype;
+ _proto4.exec = function exec(ctx) {
+ ctx.arcTo(this.x1, this.y1, this.x2, this.y2, this.radius);
+ };
+ return ArcTo;
+}();
+var Arc =
+function () {
+ function Arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+ if (anticlockwise === void 0) {
+ anticlockwise = false;
+ }
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ this.startAngle = startAngle;
+ this.endAngle = endAngle;
+ this.anticlockwise = anticlockwise;
+ }
+ var _proto5 = Arc.prototype;
+ _proto5.exec = function exec(ctx) {
+ ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle, this.anticlockwise);
+ };
+ return Arc;
+}();
+var QuadraticCurveTo =
+function () {
+ function QuadraticCurveTo(cpx, cpy, x, y) {
+ this.cpx = cpx;
+ this.cpy = cpy;
+ this.x = x;
+ this.y = y;
+ }
+ var _proto6 = QuadraticCurveTo.prototype;
+ _proto6.exec = function exec(ctx) {
+ ctx.quadraticCurveTo(this.cpx, this.cpy, this.x, this.y);
+ };
+ return QuadraticCurveTo;
+}();
+var BezierCurveTo =
+function () {
+ function BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+ this.cp1x = cp1x;
+ this.cp1y = cp1y;
+ this.cp2x = cp2x;
+ this.cp2y = cp2y;
+ this.x = x;
+ this.y = y;
+ }
+ var _proto7 = BezierCurveTo.prototype;
+ _proto7.exec = function exec(ctx) {
+ ctx.bezierCurveTo(this.cp1x, this.cp1y, this.cp2x, this.cp2y, this.x, this.y);
+ };
+ return BezierCurveTo;
+}();
+var Rect =
+function () {
+ function Rect(x, y, w, h) {
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ }
+ var _proto8 = Rect.prototype;
+ _proto8.exec = function exec(ctx) {
+ ctx.rect(this.x, this.y, this.w, this.h);
+ };
+ return Rect;
+}();
+var ClosePath =
+function () {
+ function ClosePath() {}
+ var _proto9 = ClosePath.prototype;
+ _proto9.exec = function exec(ctx) {
+ ctx.closePath();
+ };
+ return ClosePath;
+}();
+var BeginPath =
+function () {
+ function BeginPath() {}
+ var _proto10 = BeginPath.prototype;
+ _proto10.exec = function exec(ctx) {
+ ctx.beginPath();
+ };
+ return BeginPath;
+}();
+var Fill =
+function () {
+ function Fill(style, matrix) {
+ this.style = style;
+ this.matrix = matrix;
+ this.path = false;
+ }
+ var _proto11 = Fill.prototype;
+ _proto11.exec = function exec(ctx) {
+ if (!this.style) {
+ return;
+ }
+ ctx.fillStyle = this.style;
+ var mtx = this.matrix;
+ if (mtx) {
+ ctx.save();
+ ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);
+ }
+ ctx.fill();
+ if (mtx) {
+ ctx.restore();
+ }
+ };
+ _proto11.linearGradient = function linearGradient(colors, ratios, x0, y0, x1, y1) {
+ var o = this.style = Graphics._ctx.createLinearGradient(x0, y0, x1, y1);
+ var l = colors.length;
+ for (var i = 0; i < l; i++) {
+ o.addColorStop(ratios[i], colors[i]);
+ }
+ o.props = {
+ colors: colors,
+ ratios: ratios,
+ x0: x0,
+ y0: y0,
+ x1: x1,
+ y1: y1,
+ type: "linear"
+ };
+ return this;
+ };
+ _proto11.radialGradient = function radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1) {
+ var o = this.style = Graphics._ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
+ var l = colors.length;
+ for (var i = 0; i < l; i++) {
+ o.addColorStop(ratios[i], colors[i]);
+ }
+ o.props = {
+ colors: colors,
+ ratios: ratios,
+ x0: x0,
+ y0: y0,
+ r0: r0,
+ x1: x1,
+ y1: y1,
+ r1: r1,
+ type: "radial"
+ };
+ return this;
+ };
+ _proto11.bitmap = function bitmap(image, repetition) {
+ if (repetition === void 0) {
+ repetition = "";
+ }
+ if (image.naturalWidth || image.getContext || image.readyState >= 2) {
+ var o = this.style = Graphics._ctx.createPattern(image, repetition);
+ o.props = {
+ image: image,
+ repetition: repetition,
+ type: "bitmap"
+ };
+ }
+ return this;
+ };
+ return Fill;
+}();
+var Stroke =
+function (_Fill) {
+ _inheritsLoose(Stroke, _Fill);
+ function Stroke(style, ignoreScale) {
+ var _this;
+ _this = _Fill.call(this) || this;
+ _this.style = style;
+ _this.ignoreScale = ignoreScale;
+ _this.path = false;
+ return _this;
+ }
+ var _proto12 = Stroke.prototype;
+ _proto12.exec = function exec(ctx) {
+ if (!this.style) {
+ return;
+ }
+ ctx.strokeStyle = this.style;
+ if (this.ignoreScale) {
+ ctx.save();
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ }
+ ctx.stroke();
+ if (this.ignoreScale) {
+ ctx.restore();
+ }
+ };
+ return Stroke;
+}(Fill);
+var StrokeStyle =
+function () {
+ function StrokeStyle(width, caps, joints, miterLimit, ignoreScale) {
+ if (width === void 0) {
+ width = 1;
+ }
+ if (caps === void 0) {
+ caps = "butt";
+ }
+ if (joints === void 0) {
+ joints = "miter";
+ }
+ if (miterLimit === void 0) {
+ miterLimit = 10;
+ }
+ if (ignoreScale === void 0) {
+ ignoreScale = false;
+ }
+ this.width = width;
+ this.caps = caps;
+ this.joints = joints;
+ this.miterLimit = miterLimit;
+ this.ignoreScale = ignoreScale;
+ this.path = false;
+ }
+ var _proto13 = StrokeStyle.prototype;
+ _proto13.exec = function exec(ctx) {
+ ctx.lineWidth = this.width;
+ ctx.lineCap = isNaN(this.caps) ? this.caps : Graphics._STROKE_CAPS_MAP[this.caps];
+ ctx.lineJoin = isNaN(this.joints) ? this.joints : Graphics._STROKE_JOINTS_MAP[this.joints];
+ ctx.miterLimit = this.miterLimit;
+ ctx.ignoreScale = this.ignoreScale;
+ };
+ return StrokeStyle;
+}();
+var StrokeDash =
+function () {
+ function StrokeDash(segments, offset) {
+ if (segments === void 0) {
+ segments = [];
+ }
+ if (offset === void 0) {
+ offset = 0;
+ }
+ this.segments = segments;
+ this.offset = offset;
+ }
+ var _proto14 = StrokeDash.prototype;
+ _proto14.exec = function exec(ctx) {
+ if (ctx.setLineDash) {
+ ctx.setLineDash(this.segments);
+ ctx.lineDashOffset = this.offset;
+ }
+ };
+ return StrokeDash;
+}();
+var RoundRect =
+function () {
+ function RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ this.radiusTL = radiusTL;
+ this.radiusTR = radiusTR;
+ this.radiusBR = radiusBR;
+ this.radiusBL = radiusBL;
+ }
+ var _proto15 = RoundRect.prototype;
+ _proto15.exec = function exec(ctx) {
+ var max = (this.w < this.h ? this.w : this.h) / 2;
+ var mTL = 0,
+ mTR = 0,
+ mBR = 0,
+ mBL = 0;
+ var x = this.x,
+ y = this.y,
+ w = this.w,
+ h = this.h;
+ var rTL = this.radiusTL,
+ rTR = this.radiusTR,
+ rBR = this.radiusBR,
+ rBL = this.radiusBL;
+ if (rTL < 0) {
+ rTL *= mTL = -1;
+ }
+ if (rTL > max) {
+ rTL = max;
+ }
+ if (rTR < 0) {
+ rTR *= mTR = -1;
+ }
+ if (rTR > max) {
+ rTR = max;
+ }
+ if (rBR < 0) {
+ rBR *= mBR = -1;
+ }
+ if (rBR > max) {
+ rBR = max;
+ }
+ if (rBL < 0) {
+ rBL *= mBL = -1;
+ }
+ if (rBL > max) {
+ rBL = max;
+ }
+ ctx.moveTo(x + w - rTR, y);
+ ctx.arcTo(x + w + rTR * mTR, y - rTR * mTR, x + w, y + rTR, rTR);
+ ctx.lineTo(x + w, y + h - rBR);
+ ctx.arcTo(x + w + rBR * mBR, y + h + rBR * mBR, x + w - rBR, y + h, rBR);
+ ctx.lineTo(x + rBL, y + h);
+ ctx.arcTo(x - rBL * mBL, y + h + rBL * mBL, x, y + h - rBL, rBL);
+ ctx.lineTo(x, y + rTL);
+ ctx.arcTo(x - rTL * mTL, y - rTL * mTL, x + rTL, y, rTL);
+ ctx.closePath();
+ };
+ return RoundRect;
+}();
+var Circle =
+function () {
+ function Circle(x, y, radius) {
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ }
+ var _proto16 = Circle.prototype;
+ _proto16.exec = function exec(ctx) {
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ };
+ return Circle;
+}();
+var Ellipse =
+function () {
+ function Ellipse(x, y, w, h) {
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ }
+ var _proto17 = Ellipse.prototype;
+ _proto17.exec = function exec(ctx) {
+ var x = this.x,
+ y = this.y;
+ var w = this.w,
+ h = this.h;
+ var k = 0.5522848;
+ var ox = w / 2 * k;
+ var oy = h / 2 * k;
+ var xe = x + w;
+ var ye = y + h;
+ var xm = x + w / 2;
+ var ym = y + h / 2;
+ ctx.moveTo(x, ym);
+ ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ };
+ return Ellipse;
+}();
+var PolyStar =
+function () {
+ function PolyStar(x, y, radius, sides, pointSize, angle) {
+ if (pointSize === void 0) {
+ pointSize = 0;
+ }
+ if (angle === void 0) {
+ angle = 0;
+ }
+ this.x = x;
+ this.y = y;
+ this.radius = radius;
+ this.sides = sides;
+ this.pointSize = pointSize;
+ this.angle = angle;
+ }
+ var _proto18 = PolyStar.prototype;
+ _proto18.exec = function exec(ctx) {
+ var x = this.x,
+ y = this.y;
+ var radius = this.radius;
+ var angle = this.angle / 180 * Math.PI;
+ var sides = this.sides;
+ var ps = 1 - this.pointSize;
+ var a = Math.PI / sides;
+ ctx.moveTo(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
+ for (var i = 0; i < sides; i++) {
+ angle += a;
+ if (ps != 1) {
+ ctx.lineTo(x + Math.cos(angle) * radius * ps, y + Math.sin(angle) * radius * ps);
+ }
+ angle += a;
+ ctx.lineTo(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
+ }
+ ctx.closePath();
+ };
+ return PolyStar;
+}();
+Graphics.beginCmd = new BeginPath();
+Graphics._BASE_64 = {
+ "A": 0,
+ "B": 1,
+ "C": 2,
+ "D": 3,
+ "E": 4,
+ "F": 5,
+ "G": 6,
+ "H": 7,
+ "I": 8,
+ "J": 9,
+ "K": 10,
+ "L": 11,
+ "M": 12,
+ "N": 13,
+ "O": 14,
+ "P": 15,
+ "Q": 16,
+ "R": 17,
+ "S": 18,
+ "T": 19,
+ "U": 20,
+ "V": 21,
+ "W": 22,
+ "X": 23,
+ "Y": 24,
+ "Z": 25,
+ "a": 26,
+ "b": 27,
+ "c": 28,
+ "d": 29,
+ "e": 30,
+ "f": 31,
+ "g": 32,
+ "h": 33,
+ "i": 34,
+ "j": 35,
+ "k": 36,
+ "l": 37,
+ "m": 38,
+ "n": 39,
+ "o": 40,
+ "p": 41,
+ "q": 42,
+ "r": 43,
+ "s": 44,
+ "t": 45,
+ "u": 46,
+ "v": 47,
+ "w": 48,
+ "x": 49,
+ "y": 50,
+ "z": 51,
+ "0": 52,
+ "1": 53,
+ "2": 54,
+ "3": 55,
+ "4": 56,
+ "5": 57,
+ "6": 58,
+ "7": 59,
+ "8": 60,
+ "9": 61,
+ "+": 62,
+ "/": 63
+};
+Graphics._STROKE_CAPS_MAP = ["butt", "round", "square"];
+Graphics._STROKE_JOINTS_MAP = ["miter", "round", "bevel"];
+Graphics._ctx = createCanvas().getContext("2d");
+
+var MovieClip =
+function (_Container) {
+ _inheritsLoose(MovieClip, _Container);
+ function MovieClip(props) {
+ var _this;
+ _this = _Container.call(this) || this;
+ !MovieClip.inited && MovieClip.init();
+ _this.mode = props.mode != null ? props.mode : MovieClip.INDEPENDENT;
+ _this.startPosition = props.startPosition != null ? props.startPosition : 0;
+ if (typeof props.loop === "number") {
+ _this.loop = props.loop;
+ } else if (props.loop === false) {
+ _this.loop = 0;
+ } else {
+ _this.loop = -1;
+ }
+ _this.currentFrame = 0;
+ _this.timeline = new tweenjs.Timeline(Object.assign({
+ useTicks: true,
+ paused: true
+ }, props));
+ _this.paused = props.paused != null ? props.paused : false;
+ _this.actionsEnabled = true;
+ _this.autoReset = true;
+ _this.frameBounds = _this.frameBounds || props.frameBounds;
+ _this.framerate = null;
+ _this._synchOffset = 0;
+ _this._rawPosition = -1;
+ _this._t = 0;
+ _this._managed = {};
+ _this._bound_resolveState = _this._resolveState.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+ return _this;
+ }
+ MovieClip.init = function init() {
+ if (MovieClip.inited) {
+ return;
+ }
+ MovieClipPlugin.install();
+ MovieClip.inited = true;
+ };
+ var _proto = MovieClip.prototype;
+ _proto.isVisible = function isVisible() {
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (this.drawCache(ctx, ignoreCache)) {
+ return true;
+ }
+ this._updateState();
+ _Container.prototype.draw.call(this, ctx, ignoreCache);
+ return true;
+ };
+ _proto.play = function play() {
+ this.paused = false;
+ };
+ _proto.stop = function stop() {
+ this.paused = true;
+ };
+ _proto.gotoAndPlay = function gotoAndPlay(positionOrLabel) {
+ this.play();
+ this._goto(positionOrLabel);
+ };
+ _proto.gotoAndStop = function gotoAndStop(positionOrLabel) {
+ this.stop();
+ this._goto(positionOrLabel);
+ };
+ _proto.advance = function advance(time) {
+ if (this.mode !== MovieClip.INDEPENDENT) {
+ return;
+ }
+ var o = this,
+ fps = o.framerate;
+ while ((o = o.parent) && fps === null) {
+ if (o.mode === MovieClip.INDEPENDENT) {
+ fps = o._framerate;
+ }
+ }
+ this._framerate = fps;
+ if (this.paused) {
+ return;
+ }
+ var t = fps !== null && fps !== -1 && time !== null ? time / (1000 / fps) + this._t : 1;
+ var frames = t | 0;
+ this._t = t - frames;
+ while (frames--) {
+ this._updateTimeline(this._rawPosition + 1, false);
+ }
+ };
+ _proto.clone = function clone() {
+ throw "MovieClip cannot be cloned.";
+ };
+ _proto._updateState = function _updateState() {
+ if (this._rawPosition === -1 || this.mode !== MovieClip.INDEPENDENT) {
+ this._updateTimeline(-1);
+ }
+ };
+ _proto._tick = function _tick(evtObj) {
+ this.advance(evtObj && evtObj.delta);
+ _Container.prototype._tick.call(this, evtObj);
+ };
+ _proto._goto = function _goto(positionOrLabel) {
+ var pos = this.timeline.resolve(positionOrLabel);
+ if (pos == null) {
+ return;
+ }
+ this._t = 0;
+ this._updateTimeline(pos, true);
+ };
+ _proto._reset = function _reset() {
+ this._rawPosition = -1;
+ this._t = this.currentFrame = 0;
+ this.paused = false;
+ };
+ _proto._updateTimeline = function _updateTimeline(rawPosition, jump) {
+ var synced = this.mode !== MovieClip.INDEPENDENT,
+ tl = this.timeline;
+ if (synced) {
+ rawPosition = this.startPosition + (this.mode === MovieClip.SINGLE_FRAME ? 0 : this._synchOffset);
+ }
+ if (rawPosition < 1) {
+ rawPosition = 0;
+ }
+ if (this._rawPosition === rawPosition && !synced) {
+ return;
+ }
+ this._rawPosition = rawPosition;
+ tl.loop = this.loop;
+ tl.setPosition(rawPosition, synced || !this.actionsEnabled, jump, this._bound_resolveState);
+ };
+ _proto._renderFirstFrame = function _renderFirstFrame() {
+ var tl = this.timeline,
+ pos = tl.rawPosition;
+ tl.setPosition(0, true, true, this._bound_resolveState);
+ tl.rawPosition = pos;
+ };
+ _proto._resolveState = function _resolveState() {
+ var tl = this.timeline;
+ this.currentFrame = tl.position;
+ for (var n in this._managed) {
+ this._managed[n] = 1;
+ }
+ var tweens = tl.tweens;
+ for (var _iterator = tweens, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+ var _ref;
+ if (_isArray) {
+ if (_i >= _iterator.length) break;
+ _ref = _iterator[_i++];
+ } else {
+ _i = _iterator.next();
+ if (_i.done) break;
+ _ref = _i.value;
+ }
+ var tween = _ref;
+ var target = tween.target;
+ if (target === this || tween.passive) {
+ continue;
+ }
+ var offset = tween._stepPosition;
+ if (target instanceof DisplayObject) {
+ this._addManagedChild(target, offset);
+ } else {
+ this._setState(target.state, offset);
+ }
+ }
+ var kids = this.children;
+ for (var i = kids.length - 1; i >= 0; i--) {
+ var id = kids[i].id;
+ if (this._managed[id] === 1) {
+ this.removeChildAt(i);
+ delete this._managed[id];
+ }
+ }
+ };
+ _proto._setState = function _setState(state, offset) {
+ if (!state) {
+ return;
+ }
+ for (var i = state.length - 1; i >= 0; i--) {
+ var o = state[i];
+ var target = o.t;
+ var props = o.p;
+ for (var n in props) {
+ target[n] = props[n];
+ }
+ this._addManagedChild(target, offset);
+ }
+ };
+ _proto._addManagedChild = function _addManagedChild(child, offset) {
+ if (child._off) {
+ return;
+ }
+ this.addChildAt(child, 0);
+ if (child instanceof MovieClip) {
+ child._synchOffset = offset;
+ if (child.mode === MovieClip.INDEPENDENT && child.autoReset && !this._managed[child.id]) {
+ child._reset();
+ }
+ }
+ this._managed[child.id] = 2;
+ };
+ _proto._getBounds = function _getBounds(matrix, ignoreTransform) {
+ var bounds = this.getBounds();
+ if (!bounds && this.frameBounds) {
+ bounds = this._rectangle.copy(this.frameBounds[this.currentFrame]);
+ }
+ if (bounds) {
+ return this._transformBounds(bounds, matrix, ignoreTransform);
+ }
+ return _Container.prototype._getBounds.call(this, matrix, ignoreTransform);
+ };
+ _createClass(MovieClip, [{
+ key: "labels",
+ get: function get() {
+ return this.timeline.labels;
+ }
+ }, {
+ key: "currentLabel",
+ get: function get() {
+ return this.timeline.currentLabel;
+ }
+ }, {
+ key: "duration",
+ get: function get() {
+ return this.timeline.duration;
+ }
+ }, {
+ key: "totalFrames",
+ get: function get() {
+ return this.duration;
+ }
+ }]);
+ return MovieClip;
+}(Container);
+MovieClip.INDEPENDENT = "independent";
+MovieClip.SINGLE_FRAME = "single";
+MovieClip.SYNCHED = "synched";
+MovieClip.inited = false;
+var MovieClipPlugin =
+function () {
+ function MovieClipPlugin() {
+ throw "MovieClipPlugin cannot be instantiated.";
+ }
+ MovieClipPlugin.install = function install() {
+ tweenjs.Tween.installPlugin(MovieClipPlugin);
+ };
+ MovieClipPlugin.init = function init(tween, prop, value) {
+ return value;
+ };
+ MovieClipPlugin.tween = function tween(_tween, prop, value, startValues, endValues, ratio, wait, end) {
+ if (!(_tween.target instanceof MovieClip)) {
+ return value;
+ }
+ return ratio === 1 ? endValues[prop] : startValues[prop];
+ };
+ return MovieClipPlugin;
+}();
+MovieClipPlugin.priority = 100;
+
+var Shape =
+function (_DisplayObject) {
+ _inheritsLoose(Shape, _DisplayObject);
+ function Shape(graphics) {
+ var _this;
+ if (graphics === void 0) {
+ graphics = new Graphics();
+ }
+ _this = _DisplayObject.call(this) || this;
+ _this.graphics = graphics;
+ return _this;
+ }
+ var _proto = Shape.prototype;
+ _proto.isVisible = function isVisible() {
+ var hasContent = this.cacheCanvas || this.graphics && !this.graphics.isEmpty();
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (ignoreCache === void 0) {
+ ignoreCache = false;
+ }
+ if (_DisplayObject.prototype.draw.call(this, ctx, ignoreCache)) {
+ return true;
+ }
+ this.graphics.draw(ctx, this);
+ return true;
+ };
+ _proto.clone = function clone(recursive) {
+ if (recursive === void 0) {
+ recursive = false;
+ }
+ var g = recursive && this.graphics ? this.graphics.clone() : this.graphics;
+ return this._cloneProps(new Shape(g));
+ };
+ return Shape;
+}(DisplayObject);
+
+var SpriteSheet =
+function (_EventDispatcher) {
+ _inheritsLoose(SpriteSheet, _EventDispatcher);
+ function SpriteSheet(data) {
+ var _this;
+ _this = _EventDispatcher.call(this) || this;
+ _this.complete = true;
+ _this.framerate = 0;
+ _this._animations = null;
+ _this._frames = null;
+ _this._images = null;
+ _this._data = null;
+ _this._loadCount = 0;
+ _this._frameHeight = 0;
+ _this._frameWidth = 0;
+ _this._numFrames = 0;
+ _this._regX = 0;
+ _this._regY = 0;
+ _this._spacing = 0;
+ _this._margin = 0;
+ _this._parseData(data);
+ return _this;
+ }
+ var _proto = SpriteSheet.prototype;
+ _proto.getNumFrames = function getNumFrames(animation) {
+ if (animation == null) {
+ return this._frames ? this._frames.length : this._numFrames || 0;
+ } else {
+ var data = this._data[animation];
+ if (data == null) {
+ return 0;
+ } else {
+ return data.frames.length;
+ }
+ }
+ };
+ _proto.getAnimation = function getAnimation(name) {
+ return this._data[name];
+ };
+ _proto.getFrame = function getFrame(frameIndex) {
+ var frame;
+ if (this._frames && (frame = this._frames[frameIndex])) {
+ return frame;
+ }
+ return null;
+ };
+ _proto.getFrameBounds = function getFrameBounds(frameIndex, rectangle) {
+ if (rectangle === void 0) {
+ rectangle = new Rectangle();
+ }
+ var frame = this.getFrame(frameIndex);
+ return frame ? rectangle.setValues(-frame.regX, -frame.regY, frame.rect.width, frame.rect.height) : null;
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto.clone = function clone() {
+ throw "SpriteSheet cannot be cloned.";
+ };
+ _proto._parseData = function _parseData(data) {
+ var _this2 = this;
+ if (data == null) {
+ return;
+ }
+ this.framerate = data.framerate || 0;
+ if (data.images) {
+ var _loop = function _loop() {
+ if (_isArray) {
+ if (_i >= _iterator.length) return "break";
+ _ref = _iterator[_i++];
+ } else {
+ _i = _iterator.next();
+ if (_i.done) return "break";
+ _ref = _i.value;
+ }
+ var img = _ref;
+ var a = _this2._images = [];
+ var src = void 0;
+ if (typeof img === "string") {
+ src = img;
+ img = document.createElement("img");
+ img.src = src;
+ }
+ a.push(img);
+ if (!img.getContext && !img.naturalWidth) {
+ _this2._loadCount++;
+ _this2.complete = false;
+ img.onload = function () {
+ return _this2._handleImageLoad(src);
+ };
+ img.onerror = function () {
+ return _this2._handleImageError(src);
+ };
+ }
+ };
+ for (var _iterator = data.images, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+ var _ref;
+ var _ret = _loop();
+ if (_ret === "break") break;
+ }
+ }
+ if (data.frames != null) {
+ if (Array.isArray(data.frames)) {
+ this._frames = [];
+ for (var _iterator2 = data.frames, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
+ var _ref2;
+ if (_isArray2) {
+ if (_i2 >= _iterator2.length) break;
+ _ref2 = _iterator2[_i2++];
+ } else {
+ _i2 = _iterator2.next();
+ if (_i2.done) break;
+ _ref2 = _i2.value;
+ }
+ var arr = _ref2;
+ this._frames.push({
+ image: this._images[arr[4] ? arr[4] : 0],
+ rect: new Rectangle(arr[0], arr[1], arr[2], arr[3]),
+ regX: arr[5] || 0,
+ regY: arr[6] || 0
+ });
+ }
+ } else {
+ var o = data.frames;
+ this._frameWidth = o.width;
+ this._frameHeight = o.height;
+ this._regX = o.regX || 0;
+ this._regY = o.regY || 0;
+ this._spacing = o.spacing || 0;
+ this._margin = o.margin || 0;
+ this._numFrames = o.count;
+ if (this._loadCount === 0) {
+ this._calculateFrames();
+ }
+ }
+ }
+ this._animations = [];
+ if (data.animations != null) {
+ this._data = {};
+ var _o = data.animations;
+ for (var name in _o) {
+ var anim = {
+ name: name
+ };
+ var obj = _o[name];
+ var a = void 0;
+ if (typeof obj === "number") {
+ a = anim.frames = [obj];
+ } else if (Array.isArray(obj)) {
+ if (obj.length === 1) {
+ anim.frames = [obj[0]];
+ } else {
+ anim.speed = obj[3];
+ anim.next = obj[2];
+ a = anim.frames = [];
+ for (var i = obj[0]; i <= obj[1]; i++) {
+ a.push(i);
+ }
+ }
+ } else {
+ anim.speed = obj.speed;
+ anim.next = obj.next;
+ var frames = obj.frames;
+ a = anim.frames = typeof frames === "number" ? [frames] : frames.slice(0);
+ }
+ if (anim.next === true || anim.next === undefined) {
+ anim.next = name;
+ }
+ if (anim.next === false || a.length < 2 && anim.next === name) {
+ anim.next = null;
+ }
+ if (!anim.speed) {
+ anim.speed = 1;
+ }
+ this._animations.push(name);
+ this._data[name] = anim;
+ }
+ }
+ };
+ _proto._handleImageLoad = function _handleImageLoad(src) {
+ if (--this._loadCount === 0) {
+ this._calculateFrames();
+ this.complete = true;
+ this.dispatchEvent("complete");
+ }
+ };
+ _proto._handleImageError = function _handleImageError(src) {
+ var errorEvent = new Event("error");
+ errorEvent.src = src;
+ this.dispatchEvent(errorEvent);
+ if (--this._loadCount === 0) {
+ this.dispatchEvent("complete");
+ }
+ };
+ _proto._calculateFrames = function _calculateFrames() {
+ if (this._frames || this._frameWidth === 0) {
+ return;
+ }
+ this._frames = [];
+ var maxFrames = this._numFrames || 100000;
+ var frameCount = 0,
+ frameWidth = this._frameWidth,
+ frameHeight = this._frameHeight;
+ var spacing = this._spacing,
+ margin = this._margin;
+ imgLoop: for (var i = 0, imgs = this._images, l = imgs.length; i < l; i++) {
+ var img = imgs[i],
+ imgW = img.width || img.naturalWidth,
+ imgH = img.height || img.naturalHeight;
+ var y = margin;
+ while (y <= imgH - margin - frameHeight) {
+ var x = margin;
+ while (x <= imgW - margin - frameWidth) {
+ if (frameCount >= maxFrames) {
+ break imgLoop;
+ }
+ frameCount++;
+ this._frames.push({
+ image: img,
+ rect: new Rectangle(x, y, frameWidth, frameHeight),
+ regX: this._regX,
+ regY: this._regY
+ });
+ x += frameWidth + spacing;
+ }
+ y += frameHeight + spacing;
+ }
+ }
+ this._numFrames = frameCount;
+ };
+ _createClass(SpriteSheet, [{
+ key: "animations",
+ get: function get() {
+ return this._animations.slice();
+ }
+ }]);
+ return SpriteSheet;
+}(EventDispatcher);
+
+var Text =
+function (_DisplayObject) {
+ _inheritsLoose(Text, _DisplayObject);
+ function Text(text, font, color) {
+ var _this;
+ _this = _DisplayObject.call(this) || this;
+ _this.text = text;
+ _this.font = font;
+ _this.color = color;
+ _this.textAlign = "left";
+ _this.textBaseline = "top";
+ _this.maxWidth = null;
+ _this.outline = 0;
+ _this.lineHeight = 0;
+ _this.lineWidth = null;
+ return _this;
+ }
+ var _proto = Text.prototype;
+ _proto.isVisible = function isVisible() {
+ var hasContent = this.cacheCanvas || this.text != null && this.text !== "";
+ return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
+ };
+ _proto.draw = function draw(ctx, ignoreCache) {
+ if (_DisplayObject.prototype.draw.call(this, ctx, ignoreCache)) {
+ return true;
+ }
+ var col = this.color || "#000";
+ if (this.outline) {
+ ctx.strokeStyle = col;
+ ctx.lineWidth = this.outline * 1;
+ } else {
+ ctx.fillStyle = col;
+ }
+ this._drawText(this._prepContext(ctx));
+ return true;
+ };
+ _proto.getMeasuredWidth = function getMeasuredWidth() {
+ return this._getMeasuredWidth(this.text);
+ };
+ _proto.getMeasuredLineHeight = function getMeasuredLineHeight() {
+ return this._getMeasuredWidth("M") * 1.2;
+ };
+ _proto.getMeasuredHeight = function getMeasuredHeight() {
+ return this._drawText(null, {}).height;
+ };
+ _proto.getBounds = function getBounds() {
+ var rect = _DisplayObject.prototype.getBounds.call(this);
+ if (rect) {
+ return rect;
+ }
+ if (this.text == null || this.text === "") {
+ return null;
+ }
+ var o = this._drawText(null, {});
+ var w = this.maxWidth && this.maxWidth < o.width ? this.maxWidth : o.width;
+ var x = w * Text.H_OFFSETS[this.textAlign || "left"];
+ var lineHeight = this.lineHeight || this.getMeasuredLineHeight();
+ var y = lineHeight * Text.V_OFFSETS[this.textBaseline || "top"];
+ return this._rectangle.setValues(x, y, w, o.height);
+ };
+ _proto.getMetrics = function getMetrics() {
+ var o = {
+ lines: []
+ };
+ o.lineHeight = this.lineHeight || this.getMeasuredLineHeight();
+ o.vOffset = o.lineHeight * Text.V_OFFSETS[this.textBaseline || "top"];
+ return this._drawText(null, o, o.lines);
+ };
+ _proto.clone = function clone() {
+ return this._cloneProps(new Text(this.text, this.font, this.color));
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + " (text=" + (this.text.length > 20 ? this.text.substr(0, 17) + "..." : this.text) + ")]";
+ };
+ _proto._cloneProps = function _cloneProps(o) {
+ _DisplayObject.prototype._cloneProps.call(this, o);
+ o.textAlign = this.textAlign;
+ o.textBaseline = this.textBaseline;
+ o.maxWidth = this.maxWidth;
+ o.outline = this.outline;
+ o.lineHeight = this.lineHeight;
+ o.lineWidth = this.lineWidth;
+ return o;
+ };
+ _proto._prepContext = function _prepContext(ctx) {
+ ctx.font = this.font || "10px sans-serif";
+ ctx.textAlign = this.textAlign || "left";
+ ctx.textBaseline = this.textBaseline || "top";
+ ctx.lineJoin = "miter";
+ ctx.miterLimit = 2.5;
+ return ctx;
+ };
+ _proto._drawText = function _drawText(ctx, o, lines) {
+ var paint = !!ctx;
+ if (!paint) {
+ ctx = Text._ctx;
+ ctx.save();
+ this._prepContext(ctx);
+ }
+ var lineHeight = this.lineHeight || this.getMeasuredLineHeight();
+ var maxW = 0,
+ count = 0;
+ var hardLines = String(this.text).split(/(?:\r\n|\r|\n)/);
+ for (var _iterator = hardLines, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+ var _ref;
+ if (_isArray) {
+ if (_i >= _iterator.length) break;
+ _ref = _iterator[_i++];
+ } else {
+ _i = _iterator.next();
+ if (_i.done) break;
+ _ref = _i.value;
+ }
+ var str = _ref;
+ var w = null;
+ if (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {
+ var words = str.split(/(\s)/);
+ str = words[0];
+ w = ctx.measureText(str).width;
+ var l = words.length;
+ for (var i = 1; i < l; i += 2) {
+ var wordW = ctx.measureText(words[i] + words[i + 1]).width;
+ if (w + wordW > this.lineWidth) {
+ if (paint) {
+ this._drawTextLine(ctx, str, count * lineHeight);
+ }
+ if (lines) {
+ lines.push(str);
+ }
+ if (w > maxW) {
+ maxW = w;
+ }
+ str = words[i + 1];
+ w = ctx.measureText(str).width;
+ count++;
+ } else {
+ str += words[i] + words[i + 1];
+ w += wordW;
+ }
+ }
+ }
+ if (paint) {
+ this._drawTextLine(ctx, str, count * lineHeight);
+ }
+ if (lines) {
+ lines.push(str);
+ }
+ if (o && w == null) {
+ w = ctx.measureText(str).width;
+ }
+ if (w > maxW) {
+ maxW = w;
+ }
+ count++;
+ }
+ if (o) {
+ o.width = maxW;
+ o.height = count * lineHeight;
+ }
+ if (!paint) {
+ ctx.restore();
+ }
+ return o;
+ };
+ _proto._drawTextLine = function _drawTextLine(ctx, text, y) {
+ if (this.outline) {
+ ctx.strokeText(text, 0, y, this.maxWidth || 0xFFFF);
+ } else {
+ ctx.fillText(text, 0, y, this.maxWidth || 0xFFFF);
+ }
+ };
+ _proto._getMeasuredWidth = function _getMeasuredWidth(text) {
+ var ctx = Text._ctx;
+ ctx.save();
+ var w = this._prepContext(ctx).measureText(text).width;
+ ctx.restore();
+ return w;
+ };
+ return Text;
+}(DisplayObject);
+Text.H_OFFSETS = {
+ start: 0,
+ left: 0,
+ center: -0.5,
+ end: -1,
+ right: -1
+};
+Text.V_OFFSETS = {
+ top: 0,
+ hanging: -0.01,
+ middle: -0.4,
+ alphabetic: -0.8,
+ ideographic: -0.85,
+ bottom: -1
+};
+Text._ctx = createCanvas().getContext("2d");
+
+var AlphaMapFilter =
+function (_Filter) {
+ _inheritsLoose(AlphaMapFilter, _Filter);
+ function AlphaMapFilter(alphaMap) {
+ var _this;
+ _this = _Filter.call(this) || this;
+ _this.alphaMap = alphaMap;
+ _this._alphaMap = null;
+ _this._mapData = null;
+ _this._mapTexture = null;
+ _this.FRAG_SHADER_BODY = "\n\t\t\tuniform sampler2D uAlphaSampler;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\t\t\t\tvec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\n\n\t\t\t\t// some image formats can have transparent white rgba(1,1,1, 0) when put on the GPU, this means we need a slight tweak\n\t\t\t\t// using ceil ensure that the colour will be used so long as it exists but pure transparency will be treated black\n\t\t\t\tgl_FragColor = vec4(color.rgb, color.a * (alphaMap.r * ceil(alphaMap.a)));\n\t\t\t}\n\t\t";
+ return _this;
+ }
+ var _proto = AlphaMapFilter.prototype;
+ _proto.shaderParamSetup = function shaderParamSetup(gl, stage, shaderProgram) {
+ if (!this._mapTexture) {
+ this._mapTexture = gl.createTexture();
+ }
+ gl.activeTexture(gl.TEXTURE1);
+ gl.bindTexture(gl.TEXTURE_2D, this._mapTexture);
+ stage.setTextureParams(gl);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.alphaMap);
+ gl.uniform1i(gl.getUniformLocation(shaderProgram, "uAlphaSampler"), 1);
+ };
+ _proto.clone = function clone() {
+ var o = new AlphaMapFilter(this.alphaMap);
+ o._alphaMap = this._alphaMap;
+ o._mapData = this._mapData;
+ return o;
+ };
+ _proto._applyFilter = function _applyFilter(imageData) {
+ if (!this.alphaMap) {
+ return true;
+ }
+ if (!this._prepAlphaMap()) {
+ return false;
+ }
+ var data = imageData.data;
+ var map = this._mapData;
+ var l = data.length;
+ for (var i = 0; i < l; i += 4) {
+ data[i + 3] = map[i] || 0;
+ }
+ return true;
+ };
+ _proto._prepAlphaMap = function _prepAlphaMap() {
+ if (!this.alphaMap) {
+ return false;
+ }
+ if (this.alphaMap === this._alphaMap && this._mapData) {
+ return true;
+ }
+ this._mapData = null;
+ var map = this._alphaMap = this.alphaMap;
+ var canvas = map;
+ var ctx;
+ if (map instanceof HTMLCanvasElement) {
+ ctx = canvas.getContext("2d");
+ } else {
+ canvas = window.createjs && createjs.createCanvas ? createjs.createCanvas() : document.createElement("canvas");
+ canvas.width = map.width;
+ canvas.height = map.height;
+ ctx = canvas.getContext("2d");
+ ctx.drawImage(map, 0, 0);
+ }
+ try {
+ this._mapData = ctx.getImageData(0, 0, map.width, map.height).data;
+ return true;
+ } catch (e) {
+ return false;
+ }
+ };
+ return AlphaMapFilter;
+}(Filter);
+
+var AlphaMaskFilter =
+function (_Filter) {
+ _inheritsLoose(AlphaMaskFilter, _Filter);
+ function AlphaMaskFilter(mask) {
+ var _this;
+ _this = _Filter.call(this) || this;
+ _this.mask = mask;
+ _this.usesContext = true;
+ _this.FRAG_SHADER_BODY = "\n\t\t\tuniform sampler2D uAlphaSampler;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\t\t\t\tvec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\n\n\t\t\t\tgl_FragColor = vec4(color.rgb, color.a * alphaMap.a);\n\t\t\t}\n\t\t";
+ return _this;
+ }
+ var _proto = AlphaMaskFilter.prototype;
+ _proto.applyFilter = function applyFilter(ctx, x, y, width, height, targetCtx, targetX, targetY) {
+ if (!this.mask) {
+ return true;
+ }
+ targetCtx = targetCtx || ctx;
+ if (targetX == null) {
+ targetX = x;
+ }
+ if (targetY == null) {
+ targetY = y;
+ }
+ targetCtx.save();
+ if (ctx != targetCtx) {
+ return false;
+ }
+ targetCtx.globalCompositeOperation = "destination-in";
+ targetCtx.drawImage(this.mask, targetX, targetY);
+ targetCtx.restore();
+ return true;
+ };
+ _proto.clone = function clone() {
+ return new AlphaMaskFilter(this.mask);
+ };
+ _proto.shaderParamSetup = function shaderParamSetup(gl, stage, shaderProgram) {
+ if (!this._mapTexture) {
+ this._mapTexture = gl.createTexture();
+ }
+ gl.activeTexture(gl.TEXTURE1);
+ gl.bindTexture(gl.TEXTURE_2D, this._mapTexture);
+ stage.setTextureParams(gl);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.mask);
+ gl.uniform1i(gl.getUniformLocation(shaderProgram, "uAlphaSampler"), 1);
+ };
+ return AlphaMaskFilter;
+}(Filter);
+
+var BlurFilter =
+function (_Filter) {
+ _inheritsLoose(BlurFilter, _Filter);
+ function BlurFilter(blurX, blurY, quality) {
+ var _this;
+ if (blurX === void 0) {
+ blurX = 0;
+ }
+ if (blurY === void 0) {
+ blurY = 0;
+ }
+ if (quality === void 0) {
+ quality = 1;
+ }
+ _this = _Filter.call(this) || this;
+ _this._blurX = blurX;
+ _this._blurXTable = [];
+ _this._lastBlurX = null;
+ _this._blurY = blurY;
+ _this._blurYTable = [];
+ _this._lastBlurY = null;
+ _this._quality = isNaN(quality) || quality < 1 ? 1 : quality;
+ _this._lastQuality = null;
+ _this.FRAG_SHADER_TEMPLATE = "\n\t\t\tuniform float xWeight[{{blurX}}];\n\t\t\tuniform float yWeight[{{blurY}}];\n\t\t\tuniform vec2 textureOffset;\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = vec4(0.0);\n\n\t\t\t\tfloat xAdj = ({{blurX}}.0-1.0)/2.0;\n\t\t\t\tfloat yAdj = ({{blurY}}.0-1.0)/2.0;\n\t\t\t\tvec2 sampleOffset;\n\n\t\t\t\tfor(int i=0; i<{{blurX}}; i++) {\n\t\t\t\t\tfor(int j=0; j<{{blurY}}; j++) {\n\t\t\t\t\t\tsampleOffset = vRenderCoord + (textureOffset * vec2(float(i)-xAdj, float(j)-yAdj));\n\t\t\t\t\t\tcolor += texture2D(uSampler, sampleOffset) * (xWeight[i] * yWeight[j]);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tgl_FragColor = color.rgba;\n\t\t\t}\n\t\t";
+ return _this;
+ }
+ var _proto = BlurFilter.prototype;
+ _proto.shaderParamSetup = function shaderParamSetup(gl, stage, shaderProgram) {
+ gl.uniform1fv(gl.getUniformLocation(shaderProgram, "xWeight"), this._blurXTable);
+ gl.uniform1fv(gl.getUniformLocation(shaderProgram, "yWeight"), this._blurYTable);
+ gl.uniform2f(gl.getUniformLocation(shaderProgram, "textureOffset"), 2 / (stage._viewportWidth * this._quality), 2 / (stage._viewportHeight * this._quality));
+ };
+ _proto.getBounds = function getBounds(rect) {
+ var x = this.blurX | 0,
+ y = this.blurY | 0;
+ if (x <= 0 && y <= 0) {
+ return rect;
+ }
+ var q = Math.pow(this.quality, 0.2);
+ return (rect || new Rectangle()).pad(y * q + 1, x * q + 1, y * q + 1, x * q + 1);
+ };
+ _proto.clone = function clone() {
+ return new BlurFilter(this.blurX, this.blurY, this.quality);
+ };
+ _proto._updateShader = function _updateShader() {
+ var result = this.FRAG_SHADER_TEMPLATE;
+ result = result.replace(/{{blurX}}/g, this._blurXTable.length.toFixed(0));
+ result = result.replace(/{{blurY}}/g, this._blurYTable.length.toFixed(0));
+ this.FRAG_SHADER_BODY = result;
+ };
+ _proto._getTable = function _getTable(spread) {
+ var EDGE = 4.2;
+ if (spread <= 1) {
+ return [1];
+ }
+ var result = [];
+ var count = Math.ceil(spread * 2);
+ count += count % 2 ? 0 : 1;
+ var adjust = count / 2 | 0;
+ for (var i = -adjust; i <= adjust; i++) {
+ var x = i / adjust * EDGE;
+ result.push(1 / Math.sqrt(2 * Math.PI) * Math.pow(Math.E, -(Math.pow(x, 2) / 4)));
+ }
+ var factor = result.reduce(function (a, b) {
+ return a + b;
+ }, 0);
+ return result.map(function (currentValue) {
+ return currentValue / factor;
+ });
+ };
+ _proto._applyFilter = function _applyFilter(imageData) {
+ var radiusX = this._blurX >> 1;
+ if (isNaN(radiusX) || radiusX < 0) return false;
+ var radiusY = this._blurY >> 1;
+ if (isNaN(radiusY) || radiusY < 0) return false;
+ if (radiusX === 0 && radiusY === 0) return false;
+ var iterations = this.quality;
+ if (isNaN(iterations) || iterations < 1) iterations = 1;
+ iterations |= 0;
+ if (iterations > 3) iterations = 3;
+ if (iterations < 1) iterations = 1;
+ var px = imageData.data;
+ var x = 0,
+ y = 0,
+ i = 0,
+ p = 0,
+ yp = 0,
+ yi = 0,
+ yw = 0,
+ r = 0,
+ g = 0,
+ b = 0,
+ a = 0,
+ pr = 0,
+ pg = 0,
+ pb = 0,
+ pa = 0;
+ var divx = radiusX + radiusX + 1 | 0;
+ var divy = radiusY + radiusY + 1 | 0;
+ var w = imageData.width | 0;
+ var h = imageData.height | 0;
+ var w1 = w - 1 | 0;
+ var h1 = h - 1 | 0;
+ var rxp1 = radiusX + 1 | 0;
+ var ryp1 = radiusY + 1 | 0;
+ var ssx = {
+ r: 0,
+ b: 0,
+ g: 0,
+ a: 0
+ };
+ var sx = ssx;
+ for (i = 1; i < divx; i++) {
+ sx = sx.n = {
+ r: 0,
+ b: 0,
+ g: 0,
+ a: 0
+ };
+ }
+ sx.n = ssx;
+ var ssy = {
+ r: 0,
+ b: 0,
+ g: 0,
+ a: 0
+ };
+ var sy = ssy;
+ for (i = 1; i < divy; i++) {
+ sy = sy.n = {
+ r: 0,
+ b: 0,
+ g: 0,
+ a: 0
+ };
+ }
+ sy.n = ssy;
+ var si = null;
+ var mtx = BlurFilter.MUL_TABLE[radiusX] | 0;
+ var stx = BlurFilter.SHG_TABLE[radiusX] | 0;
+ var mty = BlurFilter.MUL_TABLE[radiusY] | 0;
+ var sty = BlurFilter.SHG_TABLE[radiusY] | 0;
+ while (iterations-- > 0) {
+ yw = yi = 0;
+ var ms = mtx;
+ var ss = stx;
+ for (y = h; --y > -1;) {
+ r = rxp1 * (pr = px[yi | 0]);
+ g = rxp1 * (pg = px[yi + 1 | 0]);
+ b = rxp1 * (pb = px[yi + 2 | 0]);
+ a = rxp1 * (pa = px[yi + 3 | 0]);
+ sx = ssx;
+ for (i = rxp1; --i > -1;) {
+ sx.r = pr;
+ sx.g = pg;
+ sx.b = pb;
+ sx.a = pa;
+ sx = sx.n;
+ }
+ for (i = 1; i < rxp1; i++) {
+ p = yi + ((w1 < i ? w1 : i) << 2) | 0;
+ r += sx.r = px[p];
+ g += sx.g = px[p + 1];
+ b += sx.b = px[p + 2];
+ a += sx.a = px[p + 3];
+ sx = sx.n;
+ }
+ si = ssx;
+ for (x = 0; x < w; x++) {
+ px[yi++] = r * ms >>> ss;
+ px[yi++] = g * ms >>> ss;
+ px[yi++] = b * ms >>> ss;
+ px[yi++] = a * ms >>> ss;
+ p = yw + ((p = x + radiusX + 1) < w1 ? p : w1) << 2;
+ r -= si.r - (si.r = px[p]);
+ g -= si.g - (si.g = px[p + 1]);
+ b -= si.b - (si.b = px[p + 2]);
+ a -= si.a - (si.a = px[p + 3]);
+ si = si.n;
+ }
+ yw += w;
+ }
+ ms = mty;
+ ss = sty;
+ for (x = 0; x < w; x++) {
+ yi = x << 2 | 0;
+ r = ryp1 * (pr = px[yi]) | 0;
+ g = ryp1 * (pg = px[yi + 1 | 0]) | 0;
+ b = ryp1 * (pb = px[yi + 2 | 0]) | 0;
+ a = ryp1 * (pa = px[yi + 3 | 0]) | 0;
+ sy = ssy;
+ for (i = 0; i < ryp1; i++) {
+ sy.r = pr;
+ sy.g = pg;
+ sy.b = pb;
+ sy.a = pa;
+ sy = sy.n;
+ }
+ yp = w;
+ for (i = 1; i <= radiusY; i++) {
+ yi = yp + x << 2;
+ r += sy.r = px[yi];
+ g += sy.g = px[yi + 1];
+ b += sy.b = px[yi + 2];
+ a += sy.a = px[yi + 3];
+ sy = sy.n;
+ if (i < h1) {
+ yp += w;
+ }
+ }
+ yi = x;
+ si = ssy;
+ if (iterations > 0) {
+ for (y = 0; y < h; y++) {
+ p = yi << 2;
+ px[p + 3] = pa = a * ms >>> ss;
+ if (pa > 0) {
+ px[p] = r * ms >>> ss;
+ px[p + 1] = g * ms >>> ss;
+ px[p + 2] = b * ms >>> ss;
+ } else {
+ px[p] = px[p + 1] = px[p + 2] = 0;
+ }
+ p = x + ((p = y + ryp1) < h1 ? p : h1) * w << 2;
+ r -= si.r - (si.r = px[p]);
+ g -= si.g - (si.g = px[p + 1]);
+ b -= si.b - (si.b = px[p + 2]);
+ a -= si.a - (si.a = px[p + 3]);
+ si = si.n;
+ yi += w;
+ }
+ } else {
+ for (y = 0; y < h; y++) {
+ p = yi << 2;
+ px[p + 3] = pa = a * ms >>> ss;
+ if (pa > 0) {
+ pa = 255 / pa;
+ px[p] = (r * ms >>> ss) * pa;
+ px[p + 1] = (g * ms >>> ss) * pa;
+ px[p + 2] = (b * ms >>> ss) * pa;
+ } else {
+ px[p] = px[p + 1] = px[p + 2] = 0;
+ }
+ p = x + ((p = y + ryp1) < h1 ? p : h1) * w << 2;
+ r -= si.r - (si.r = px[p]);
+ g -= si.g - (si.g = px[p + 1]);
+ b -= si.b - (si.b = px[p + 2]);
+ a -= si.a - (si.a = px[p + 3]);
+ si = si.n;
+ yi += w;
+ }
+ }
+ }
+ }
+ return true;
+ };
+ _createClass(BlurFilter, [{
+ key: "blurX",
+ get: function get() {
+ return this._blurX;
+ },
+ set: function set(blurX) {
+ if (isNaN(blurX) || blurX < 0) {
+ blurX = 0;
+ }
+ this._blurX = blurX;
+ }
+ }, {
+ key: "blurY",
+ get: function get() {
+ return this._blurY;
+ },
+ set: function set(blurY) {
+ if (isNaN(blurY) || blurY < 0) {
+ blurY = 0;
+ }
+ this._blurY = blurY;
+ }
+ }, {
+ key: "quality",
+ get: function get() {
+ return this._quality | 0;
+ },
+ set: function set(quality) {
+ if (isNaN(quality) || quality < 0) {
+ quality = 0;
+ }
+ this._quality = quality;
+ }
+ }, {
+ key: "_buildShader",
+ get: function get() {
+ var xChange = this._lastBlurX !== this._blurX;
+ var yChange = this._lastBlurY !== this._blurY;
+ var qChange = this._lastQuality !== this._quality;
+ if (xChange || yChange || qChange) {
+ if (xChange || qChange) {
+ this._blurXTable = this._getTable(this._blurX * this._quality);
+ }
+ if (yChange || qChange) {
+ this._blurYTable = this._getTable(this._blurY * this._quality);
+ }
+ this._updateShader();
+ this._lastBlurX = this._blurX;
+ this._lastBlurY = this._blurY;
+ this._lastQuality = this._quality;
+ return undefined;
+ }
+ return this._compiledShader;
+ }
+ }, {
+ key: "_builtShader",
+ set: function set(value) {
+ this._compiledShader = value;
+ }
+ }]);
+ return BlurFilter;
+}(Filter);
+BlurFilter.MUL_TABLE = [1, 171, 205, 293, 57, 373, 79, 137, 241, 27, 391, 357, 41, 19, 283, 265, 497, 469, 443, 421, 25, 191, 365, 349, 335, 161, 155, 149, 9, 278, 269, 261, 505, 245, 475, 231, 449, 437, 213, 415, 405, 395, 193, 377, 369, 361, 353, 345, 169, 331, 325, 319, 313, 307, 301, 37, 145, 285, 281, 69, 271, 267, 263, 259, 509, 501, 493, 243, 479, 118, 465, 459, 113, 446, 55, 435, 429, 423, 209, 413, 51, 403, 199, 393, 97, 3, 379, 375, 371, 367, 363, 359, 355, 351, 347, 43, 85, 337, 333, 165, 327, 323, 5, 317, 157, 311, 77, 305, 303, 75, 297, 294, 73, 289, 287, 71, 141, 279, 277, 275, 68, 135, 67, 133, 33, 262, 260, 129, 511, 507, 503, 499, 495, 491, 61, 121, 481, 477, 237, 235, 467, 232, 115, 457, 227, 451, 7, 445, 221, 439, 218, 433, 215, 427, 425, 211, 419, 417, 207, 411, 409, 203, 202, 401, 399, 396, 197, 49, 389, 387, 385, 383, 95, 189, 47, 187, 93, 185, 23, 183, 91, 181, 45, 179, 89, 177, 11, 175, 87, 173, 345, 343, 341, 339, 337, 21, 167, 83, 331, 329, 327, 163, 81, 323, 321, 319, 159, 79, 315, 313, 39, 155, 309, 307, 153, 305, 303, 151, 75, 299, 149, 37, 295, 147, 73, 291, 145, 289, 287, 143, 285, 71, 141, 281, 35, 279, 139, 69, 275, 137, 273, 17, 271, 135, 269, 267, 133, 265, 33, 263, 131, 261, 130, 259, 129, 257, 1];
+BlurFilter.SHG_TABLE = [0, 9, 10, 11, 9, 12, 10, 11, 12, 9, 13, 13, 10, 9, 13, 13, 14, 14, 14, 14, 10, 13, 14, 14, 14, 13, 13, 13, 9, 14, 14, 14, 15, 14, 15, 14, 15, 15, 14, 15, 15, 15, 14, 15, 15, 15, 15, 15, 14, 15, 15, 15, 15, 15, 15, 12, 14, 15, 15, 13, 15, 15, 15, 15, 16, 16, 16, 15, 16, 14, 16, 16, 14, 16, 13, 16, 16, 16, 15, 16, 13, 16, 15, 16, 14, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 13, 14, 16, 16, 15, 16, 16, 10, 16, 15, 16, 14, 16, 16, 14, 16, 16, 14, 16, 16, 14, 15, 16, 16, 16, 14, 15, 14, 15, 13, 16, 16, 15, 17, 17, 17, 17, 17, 17, 14, 15, 17, 17, 16, 16, 17, 16, 15, 17, 16, 17, 11, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 16, 17, 17, 16, 16, 17, 17, 17, 16, 14, 17, 17, 17, 17, 15, 16, 14, 16, 15, 16, 13, 16, 15, 16, 14, 16, 15, 16, 12, 16, 15, 16, 17, 17, 17, 17, 17, 13, 16, 15, 17, 17, 17, 16, 15, 17, 17, 17, 16, 15, 17, 17, 14, 16, 17, 17, 16, 17, 17, 16, 15, 17, 16, 14, 17, 16, 15, 17, 16, 17, 17, 16, 17, 15, 16, 17, 14, 17, 16, 15, 17, 16, 17, 13, 17, 16, 17, 17, 16, 17, 14, 17, 16, 17, 16, 17, 16, 17, 9];
+
+var ColorFilter =
+function (_Filter) {
+ _inheritsLoose(ColorFilter, _Filter);
+ function ColorFilter(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) {
+ var _this;
+ if (redMultiplier === void 0) {
+ redMultiplier = 1;
+ }
+ if (greenMultiplier === void 0) {
+ greenMultiplier = 1;
+ }
+ if (blueMultiplier === void 0) {
+ blueMultiplier = 1;
+ }
+ if (alphaMultiplier === void 0) {
+ alphaMultiplier = 1;
+ }
+ if (redOffset === void 0) {
+ redOffset = 0;
+ }
+ if (greenOffset === void 0) {
+ greenOffset = 0;
+ }
+ if (blueOffset === void 0) {
+ blueOffset = 0;
+ }
+ if (alphaOffset === void 0) {
+ alphaOffset = 0;
+ }
+ _this = _Filter.call(this) || this;
+ _this.redMultiplier = redMultiplier;
+ _this.greenMultiplier = greenMultiplier;
+ _this.blueMultiplier = blueMultiplier;
+ _this.alphaMultiplier = alphaMultiplier;
+ _this.redOffset = redOffset;
+ _this.greenOffset = greenOffset;
+ _this.blueOffset = blueOffset;
+ _this.alphaOffset = alphaOffset;
+ _this.FRAG_SHADER_BODY = "\n\t\t\tuniform vec4 uColorMultiplier;\n\t\t\tuniform vec4 uColorOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tgl_FragColor = (color * uColorMultiplier) + uColorOffset;\n\t\t\t}\n\t\t";
+ return _this;
+ }
+ var _proto = ColorFilter.prototype;
+ _proto.shaderParamSetup = function shaderParamSetup(gl, stage, shaderProgram) {
+ gl.uniform4f(gl.getUniformLocation(shaderProgram, "uColorMultiplier"), this.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier);
+ gl.uniform4f(gl.getUniformLocation(shaderProgram, "uColorOffset"), this.redOffset / 255, this.greenOffset / 255, this.blueOffset / 255, this.alphaOffset / 255);
+ };
+ _proto.clone = function clone() {
+ return new ColorFilter(this.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier, this.redOffset, this.greenOffset, this.blueOffset, this.alphaOffset);
+ };
+ _proto._applyFilter = function _applyFilter(imageData) {
+ var data = imageData.data;
+ var l = data.length;
+ for (var i = 0; i < l; i += 4) {
+ data[i] = data[i] * this.redMultiplier + this.redOffset;
+ data[i + 1] = data[i + 1] * this.greenMultiplier + this.greenOffset;
+ data[i + 2] = data[i + 2] * this.blueMultiplier + this.blueOffset;
+ data[i + 3] = data[i + 3] * this.alphaMultiplier + this.alphaOffset;
+ }
+ return true;
+ };
+ return ColorFilter;
+}(Filter);
+
+var ColorMatrix =
+function () {
+ function ColorMatrix(brightness, contrast, saturation, hue) {
+ this.setColor(brightness, contrast, saturation, hue);
+ }
+ var _proto = ColorMatrix.prototype;
+ _proto.setColor = function setColor(brightness, contrast, saturation, hue) {
+ return this.reset().adjustColor(brightness, contrast, saturation, hue);
+ };
+ _proto.reset = function reset() {
+ return this.copy(ColorMatrix.IDENTITY_MATRIX);
+ };
+ _proto.adjustColor = function adjustColor(brightness, contrast, saturation, hue) {
+ return this.adjustBrightness(brightness).adjustContrast(contrast).adjustSaturation(saturation).adjustHue(hue);
+ };
+ _proto.adjustBrightness = function adjustBrightness(value) {
+ if (value === 0 || isNaN(value)) {
+ return this;
+ }
+ value = this._cleanValue(value, 255);
+ this._multiplyMatrix([1, 0, 0, 0, value, 0, 1, 0, 0, value, 0, 0, 1, 0, value, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]);
+ return this;
+ };
+ _proto.adjustContrast = function adjustContrast(value) {
+ if (value === 0 || isNaN(value)) {
+ return this;
+ }
+ value = this._cleanValue(value, 100);
+ var x;
+ if (value < 0) {
+ x = 127 + value / 100 * 127;
+ } else {
+ x = value % 1;
+ if (x === 0) {
+ x = ColorMatrix.DELTA_INDEX[value];
+ } else {
+ x = ColorMatrix.DELTA_INDEX[value << 0] * (1 - x) + ColorMatrix.DELTA_INDEX[(value << 0) + 1] * x;
+ }
+ x = x * 127 + 127;
+ }
+ this._multiplyMatrix([x / 127, 0, 0, 0, 0.5 * (127 - x), 0, x / 127, 0, 0, 0.5 * (127 - x), 0, 0, x / 127, 0, 0.5 * (127 - x), 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]);
+ return this;
+ };
+ _proto.adjustSaturation = function adjustSaturation(value) {
+ if (value === 0 || isNaN(value)) {
+ return this;
+ }
+ value = this._cleanValue(value, 100);
+ var x = 1 + (value > 0 ? 3 * value / 100 : value / 100);
+ var lumR = 0.3086;
+ var lumG = 0.6094;
+ var lumB = 0.0820;
+ this._multiplyMatrix([lumR * (1 - x) + x, lumG * (1 - x), lumB * (1 - x), 0, 0, lumR * (1 - x), lumG * (1 - x) + x, lumB * (1 - x), 0, 0, lumR * (1 - x), lumG * (1 - x), lumB * (1 - x) + x, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]);
+ return this;
+ };
+ _proto.adjustHue = function adjustHue(value) {
+ if (value === 0 || isNaN(value)) {
+ return this;
+ }
+ value = this._cleanValue(value, 180) / 180 * Math.PI;
+ var cosVal = Math.cos(value);
+ var sinVal = Math.sin(value);
+ var lumR = 0.213;
+ var lumG = 0.715;
+ var lumB = 0.072;
+ this._multiplyMatrix([lumR + cosVal * (1 - lumR) + sinVal * -lumR, lumG + cosVal * -lumG + sinVal * -lumG, lumB + cosVal * -lumB + sinVal * (1 - lumB), 0, 0, lumR + cosVal * -lumR + sinVal * 0.143, lumG + cosVal * (1 - lumG) + sinVal * 0.140, lumB + cosVal * -lumB + sinVal * -0.283, 0, 0, lumR + cosVal * -lumR + sinVal * -(1 - lumR), lumG + cosVal * -lumG + sinVal * lumG, lumB + cosVal * (1 - lumB) + sinVal * lumB, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]);
+ return this;
+ };
+ _proto.concat = function concat(matrix) {
+ matrix = this._fixMatrix(matrix);
+ if (matrix.length != ColorMatrix.LENGTH) {
+ return this;
+ }
+ this._multiplyMatrix(matrix);
+ return this;
+ };
+ _proto.clone = function clone() {
+ return new ColorMatrix().copy(this);
+ };
+ _proto.toArray = function toArray() {
+ var arr = [];
+ var l = ColorMatrix.LENGTH;
+ for (var i = 0; i < l; i++) {
+ arr[i] = this[i];
+ }
+ return arr;
+ };
+ _proto.copy = function copy(matrix) {
+ var l = ColorMatrix.LENGTH;
+ for (var i = 0; i < l; i++) {
+ this[i] = matrix[i];
+ }
+ return this;
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto._multiplyMatrix = function _multiplyMatrix(matrix) {
+ var col = [];
+ for (var i = 0; i < 5; i++) {
+ for (var j = 0; j < 5; j++) {
+ col[j] = this[j + i * 5];
+ }
+ for (var _j = 0; _j < 5; _j++) {
+ var val = 0;
+ for (var k = 0; k < 5; k++) {
+ val += matrix[_j + k * 5] * col[k];
+ }
+ this[_j + i * 5] = val;
+ }
+ }
+ };
+ _proto._cleanValue = function _cleanValue(value, limit) {
+ return Math.min(limit, Math.max(-limit, value));
+ };
+ _proto._fixMatrix = function _fixMatrix(matrix) {
+ if (matrix instanceof ColorMatrix) {
+ matrix = matrix.toArray();
+ }
+ if (matrix.length < ColorMatrix.LENGTH) {
+ matrix = matrix.slice(0, matrix.length).concat(ColorMatrix.IDENTITY_MATRIX.slice(matrix.length, ColorMatrix.LENGTH));
+ } else if (matrix.length > ColorMatrix.LENGTH) {
+ matrix = matrix.slice(0, ColorMatrix.LENGTH);
+ }
+ return matrix;
+ };
+ return ColorMatrix;
+}();
+ColorMatrix.DELTA_INDEX = Object.freeze([0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11, 0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24, 0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42, 0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68, 0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98, 1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54, 1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25, 2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8, 4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0, 7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8, 10.0]);
+ColorMatrix.IDENTITY_MATRIX = Object.freeze([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]);
+ColorMatrix.LENGTH = 25;
+
+var ColorMatrixFilter =
+function (_Filter) {
+ _inheritsLoose(ColorMatrixFilter, _Filter);
+ function ColorMatrixFilter(matrix) {
+ var _this;
+ _this = _Filter.call(this) || this;
+ _this.matrix = matrix;
+ _this.FRAG_SHADER_BODY = "\n\t\t\tuniform mat4 uColorMatrix;\n\t\t\tuniform vec4 uColorMatrixOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tmat4 m = uColorMatrix;\n\t\t\t\tvec4 newColor = vec4(0,0,0,0);\n\t\t\t\tnewColor.r = color.r*m[0][0] + color.g*m[0][1] + color.b*m[0][2] + color.a*m[0][3];\n\t\t\t\tnewColor.g = color.r*m[1][0] + color.g*m[1][1] + color.b*m[1][2] + color.a*m[1][3];\n\t\t\t\tnewColor.b = color.r*m[2][0] + color.g*m[2][1] + color.b*m[2][2] + color.a*m[2][3];\n\t\t\t\tnewColor.a = color.r*m[3][0] + color.g*m[3][1] + color.b*m[3][2] + color.a*m[3][3];\n\n\t\t\t\tgl_FragColor = newColor + uColorMatrixOffset;\n\t\t\t}\n\t\t";
+ return _this;
+ }
+ var _proto = ColorMatrixFilter.prototype;
+ _proto.shaderParamSetup = function shaderParamSetup(gl, stage, shaderProgram) {
+ var mat = this.matrix;
+ var colorMatrix = new Float32Array([mat[0], mat[1], mat[2], mat[3], mat[5], mat[6], mat[7], mat[8], mat[10], mat[11], mat[12], mat[13], mat[15], mat[16], mat[17], mat[18]]);
+ gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uColorMatrix"), false, colorMatrix);
+ gl.uniform4f(gl.getUniformLocation(shaderProgram, "uColorMatrixOffset"), mat[4] / 255, mat[9] / 255, mat[14] / 255, mat[19] / 255);
+ };
+ _proto.clone = function clone() {
+ return new ColorMatrixFilter(this.matrix);
+ };
+ _proto._applyFilter = function _applyFilter(imageData) {
+ var data = imageData.data;
+ var l = data.length;
+ var r, g, b, a;
+ var mtx = this.matrix;
+ var m0 = mtx[0],
+ m1 = mtx[1],
+ m2 = mtx[2],
+ m3 = mtx[3],
+ m4 = mtx[4];
+ var m5 = mtx[5],
+ m6 = mtx[6],
+ m7 = mtx[7],
+ m8 = mtx[8],
+ m9 = mtx[9];
+ var m10 = mtx[10],
+ m11 = mtx[11],
+ m12 = mtx[12],
+ m13 = mtx[13],
+ m14 = mtx[14];
+ var m15 = mtx[15],
+ m16 = mtx[16],
+ m17 = mtx[17],
+ m18 = mtx[18],
+ m19 = mtx[19];
+ for (var i = 0; i < l; i += 4) {
+ r = data[i];
+ g = data[i + 1];
+ b = data[i + 2];
+ a = data[i + 3];
+ data[i] = r * m0 + g * m1 + b * m2 + a * m3 + m4;
+ data[i + 1] = r * m5 + g * m6 + b * m7 + a * m8 + m9;
+ data[i + 2] = r * m10 + g * m11 + b * m12 + a * m13 + m14;
+ data[i + 3] = r * m15 + g * m16 + b * m17 + a * m18 + m19;
+ }
+ return true;
+ };
+ return ColorMatrixFilter;
+}(Filter);
+
+var ButtonHelper =
+function () {
+ function ButtonHelper(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) {
+ if (outLabel === void 0) {
+ outLabel = "out";
+ }
+ if (overLabel === void 0) {
+ overLabel = "over";
+ }
+ if (downLabel === void 0) {
+ downLabel = "down";
+ }
+ if (play === void 0) {
+ play = false;
+ }
+ if (!target.addEventListener) {
+ return;
+ }
+ this.target = target;
+ this.overLabel = overLabel;
+ this.outLabel = outLabel;
+ this.downLabel = downLabel == null;
+ this.play = play;
+ this._isPressed = false;
+ this._isOver = false;
+ this._enabled = false;
+ target.mouseChildren = false;
+ this.enabled = true;
+ this.handleEvent({});
+ if (hitArea) {
+ if (hitLabel) {
+ hitArea.actionsEnabled = false;
+ hitArea.gotoAndStop && hitArea.gotoAndStop(hitLabel);
+ }
+ target.hitArea = hitArea;
+ }
+ }
+ var _proto = ButtonHelper.prototype;
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto.handleEvent = function handleEvent(evt) {
+ var label,
+ t = this.target,
+ type = evt.type;
+ if (type === "mousedown") {
+ this._isPressed = true;
+ label = this.downLabel;
+ } else if (type === "pressup") {
+ this._isPressed = false;
+ label = this._isOver ? this.overLabel : this.outLabel;
+ } else if (type === "rollover") {
+ this._isOver = true;
+ label = this._isPressed ? this.downLabel : this.overLabel;
+ } else {
+ this._isOver = false;
+ label = this._isPressed ? this.overLabel : this.outLabel;
+ }
+ if (this.play) {
+ t.gotoAndPlay && t.gotoAndPlay(label);
+ } else {
+ t.gotoAndStop && t.gotoAndStop(label);
+ }
+ };
+ _proto._reset = function _reset() {
+ var p = this.paused;
+ this.__reset();
+ this.paused = p;
+ };
+ _createClass(ButtonHelper, [{
+ key: "enabled",
+ get: function get() {
+ return this._enabled;
+ },
+ set: function set(enabled) {
+ if (enabled === this._enabled) {
+ return;
+ }
+ var o = this.target;
+ this._enabled = enabled;
+ if (enabled) {
+ o.cursor = "pointer";
+ o.addEventListener("rollover", this);
+ o.addEventListener("rollout", this);
+ o.addEventListener("mousedown", this);
+ o.addEventListener("pressup", this);
+ if (o._reset) {
+ o.__reset = o._reset;
+ o._reset = this._reset;
+ }
+ } else {
+ o.cursor = null;
+ o.removeEventListener("rollover", this);
+ o.removeEventListener("rollout", this);
+ o.removeEventListener("mousedown", this);
+ o.removeEventListener("pressup", this);
+ if (o.__reset) {
+ o._reset = o.__reset;
+ delete o.__reset;
+ }
+ }
+ }
+ }]);
+ return ButtonHelper;
+}();
+
+var Touch = {
+ isSupported: function isSupported() {
+ return !!('ontouchstart' in window ||
+ window.MSPointerEvent && window.navigator.msMaxTouchPoints > 0
+ || window.PointerEvent && window.navigator.maxTouchPoints > 0);
+ },
+ enable: function enable(stage, singleTouch, allowDefault) {
+ if (singleTouch === void 0) {
+ singleTouch = false;
+ }
+ if (allowDefault === void 0) {
+ allowDefault = false;
+ }
+ if (!stage || !stage.canvas || !this.isSupported()) {
+ return false;
+ }
+ if (stage.__touch) {
+ return true;
+ }
+ stage.__touch = {
+ pointers: {},
+ multitouch: !singleTouch,
+ preventDefault: !allowDefault,
+ count: 0
+ };
+ if ('ontouchstart' in window) {
+ this._IOS_enable(stage);
+ } else if (window.PointerEvent || window.MSPointerEvent) {
+ this._IE_enable(stage);
+ }
+ return true;
+ },
+ disable: function disable(stage) {
+ if (!stage) {
+ return;
+ }
+ if ('ontouchstart' in window) {
+ this._IOS_disable(stage);
+ } else if (window.PointerEvent || window.MSPointerEvent) {
+ this._IE_disable(stage);
+ }
+ delete stage.__touch;
+ },
+ _IOS_enable: function _IOS_enable(stage) {
+ var _this = this;
+ var canvas = stage.canvas;
+ var f = stage.__touch.f = function (e) {
+ return _this._IOS_handleEvent(stage, e);
+ };
+ canvas.addEventListener("touchstart", f, false);
+ canvas.addEventListener("touchmove", f, false);
+ canvas.addEventListener("touchend", f, false);
+ canvas.addEventListener("touchcancel", f, false);
+ },
+ _IOS_disable: function _IOS_disable(stage) {
+ var canvas = stage.canvas;
+ if (!canvas) {
+ return;
+ }
+ var f = stage.__touch.f;
+ canvas.removeEventListener("touchstart", f, false);
+ canvas.removeEventListener("touchmove", f, false);
+ canvas.removeEventListener("touchend", f, false);
+ canvas.removeEventListener("touchcancel", f, false);
+ },
+ _IOS_handleEvent: function _IOS_handleEvent(stage, e) {
+ if (!stage) {
+ return;
+ }
+ if (stage.__touch.preventDefault) {
+ e.preventDefault && e.preventDefault();
+ }
+ var touches = e.changedTouches;
+ var type = e.type;
+ var l = touches.length;
+ for (var _iterator = touches, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+ var _ref;
+ if (_isArray) {
+ if (_i >= _iterator.length) break;
+ _ref = _iterator[_i++];
+ } else {
+ _i = _iterator.next();
+ if (_i.done) break;
+ _ref = _i.value;
+ }
+ var touch = _ref;
+ var id = touch.identifier;
+ if (touch.target != stage.canvas) {
+ continue;
+ }
+ if (type === "touchstart") {
+ this._handleStart(stage, id, e, touch.pageX, touch.pageY);
+ } else if (type === "touchmove") {
+ this._handleMove(stage, id, e, touch.pageX, touch.pageY);
+ } else if (type === "touchend" || type === "touchcancel") {
+ this._handleEnd(stage, id, e);
+ }
+ }
+ },
+ _IE_enable: function _IE_enable(stage) {
+ var _this2 = this;
+ var canvas = stage.canvas;
+ var f = stage.__touch.f = function (e) {
+ return _this2._IE_handleEvent(stage, e);
+ };
+ if (window.PointerEvent === undefined) {
+ canvas.addEventListener("MSPointerDown", f, false);
+ window.addEventListener("MSPointerMove", f, false);
+ window.addEventListener("MSPointerUp", f, false);
+ window.addEventListener("MSPointerCancel", f, false);
+ if (stage.__touch.preventDefault) {
+ canvas.style.msTouchAction = "none";
+ }
+ } else {
+ canvas.addEventListener("pointerdown", f, false);
+ window.addEventListener("pointermove", f, false);
+ window.addEventListener("pointerup", f, false);
+ window.addEventListener("pointercancel", f, false);
+ if (stage.__touch.preventDefault) {
+ canvas.style.touchAction = "none";
+ }
+ }
+ stage.__touch.activeIDs = {};
+ },
+ _IE_disable: function _IE_disable(stage) {
+ var f = stage.__touch.f;
+ if (window.PointerEvent === undefined) {
+ window.removeEventListener("MSPointerMove", f, false);
+ window.removeEventListener("MSPointerUp", f, false);
+ window.removeEventListener("MSPointerCancel", f, false);
+ if (stage.canvas) {
+ stage.canvas.removeEventListener("MSPointerDown", f, false);
+ }
+ } else {
+ window.removeEventListener("pointermove", f, false);
+ window.removeEventListener("pointerup", f, false);
+ window.removeEventListener("pointercancel", f, false);
+ if (stage.canvas) {
+ stage.canvas.removeEventListener("pointerdown", f, false);
+ }
+ }
+ },
+ _IE_handleEvent: function _IE_handleEvent(stage, e) {
+ if (!stage) {
+ return;
+ }
+ if (stage.__touch.preventDefault) {
+ e.preventDefault && e.preventDefault();
+ }
+ var type = e.type;
+ var id = e.pointerId;
+ var ids = stage.__touch.activeIDs;
+ if (type === "MSPointerDown" || type === "pointerdown") {
+ if (e.srcElement != stage.canvas) {
+ return;
+ }
+ ids[id] = true;
+ this._handleStart(stage, id, e, e.pageX, e.pageY);
+ } else if (ids[id]) {
+ if (type === "MSPointerMove" || type === "pointermove") {
+ this._handleMove(stage, id, e, e.pageX, e.pageY);
+ } else if (type === "MSPointerUp" || type === "MSPointerCancel" || type === "pointerup" || type === "pointercancel") {
+ delete ids[id];
+ this._handleEnd(stage, id, e);
+ }
+ }
+ },
+ _handleStart: function _handleStart(stage, id, e, x, y) {
+ var props = stage.__touch;
+ if (!props.multitouch && props.count) {
+ return;
+ }
+ var ids = props.pointers;
+ if (ids[id]) {
+ return;
+ }
+ ids[id] = true;
+ props.count++;
+ stage._handlePointerDown(id, e, x, y);
+ },
+ _handleMove: function _handleMove(stage, id, e, x, y) {
+ if (!stage.__touch.pointers[id]) {
+ return;
+ }
+ stage._handlePointerMove(id, e, x, y);
+ },
+ _handleEnd: function _handleEnd(stage, id, e) {
+ var props = stage.__touch;
+ var ids = props.pointers;
+ if (!ids[id]) {
+ return;
+ }
+ props.count--;
+ stage._handlePointerUp(id, e, true);
+ delete ids[id];
+ }
+};
+
+var SpriteSheetBuilder =
+function (_EventDispatcher) {
+ _inheritsLoose(SpriteSheetBuilder, _EventDispatcher);
+ function SpriteSheetBuilder(framerate) {
+ var _this;
+ if (framerate === void 0) {
+ framerate = 0;
+ }
+ _this = _EventDispatcher.call(this) || this;
+ _this.maxWidth = 2048;
+ _this.maxHeight = 2048;
+ _this.spriteSheet = null;
+ _this.scale = 1;
+ _this.padding = 1;
+ _this.timeSlice = 0.3;
+ _this.progress = -1;
+ _this.framerate = framerate;
+ _this._frames = [];
+ _this._animations = {};
+ _this._data = null;
+ _this._nextFrameIndex = 0;
+ _this._index = 0;
+ _this._timerID = null;
+ _this._scale = 1;
+ return _this;
+ }
+ var _proto = SpriteSheetBuilder.prototype;
+ _proto.addFrame = function addFrame(source, sourceRect, scale, setupFunction, setupData) {
+ if (scale === void 0) {
+ scale = 1;
+ }
+ if (this._data) {
+ throw SpriteSheetBuilder.ERR_RUNNING;
+ }
+ var rect = sourceRect || source.bounds || source.nominalBounds || source.getBounds && source.getBounds();
+ if (!rect) {
+ return null;
+ }
+ return this._frames.push({
+ source: source,
+ sourceRect: rect,
+ scale: scale,
+ funct: setupFunction,
+ data: setupData,
+ index: this._frames.length,
+ height: rect.height * scale
+ }) - 1;
+ };
+ _proto.addAnimation = function addAnimation(name, frames, next, speed) {
+ if (this._data) {
+ throw SpriteSheetBuilder.ERR_RUNNING;
+ }
+ this._animations[name] = {
+ frames: frames,
+ next: next,
+ speed: speed
+ };
+ };
+ _proto.addMovieClip = function addMovieClip(source, sourceRect, scale, setupFunction, setupData, labelFunction) {
+ if (scale === void 0) {
+ scale = 1;
+ }
+ if (this._data) {
+ throw SpriteSheetBuilder.ERR_RUNNING;
+ }
+ var rects = source.frameBounds;
+ var rect = sourceRect || source.bounds || source.nominalBounds || source.getBounds && source.getBounds();
+ if (!rect && !rects) {
+ return;
+ }
+ var baseFrameIndex = this._frames.length;
+ var duration = source.timeline.duration;
+ for (var i = 0; i < duration; i++) {
+ var r = rects && rects[i] ? rects[i] : rect;
+ this.addFrame(source, r, scale, this._setupMovieClipFrame, {
+ i: i,
+ f: setupFunction,
+ d: setupData
+ });
+ }
+ var labels = source.timeline._labels;
+ var lbls = [];
+ for (var n in labels) {
+ lbls.push({
+ index: labels[n],
+ label: n
+ });
+ }
+ if (lbls.length) {
+ lbls.sort(function (a, b) {
+ return a.index - b.index;
+ });
+ for (var _i = 0, l = lbls.length; _i < l; _i++) {
+ var label = lbls[_i].label;
+ var start = baseFrameIndex + lbls[_i].index;
+ var end = baseFrameIndex + (_i === l - 1 ? duration : lbls[_i + 1].index);
+ var frames = [];
+ for (var _i2 = start; _i2 < end; _i2++) {
+ frames.push(_i2);
+ }
+ if (labelFunction) {
+ label = labelFunction(label, source, start, end);
+ if (!label) {
+ continue;
+ }
+ }
+ this.addAnimation(label, frames, true);
+ }
+ }
+ };
+ _proto.build = function build() {
+ if (this._data) {
+ throw SpriteSheetBuilder.ERR_RUNNING;
+ }
+ this._startBuild();
+ while (this._drawNext()) {}
+ this._endBuild();
+ return this.spriteSheet;
+ };
+ _proto.buildAsync = function buildAsync(timeSlice) {
+ var _this2 = this;
+ if (this._data) {
+ throw SpriteSheetBuilder.ERR_RUNNING;
+ }
+ this.timeSlice = timeSlice;
+ this._startBuild();
+ this._timerID = setTimeout(function () {
+ return _this2._run();
+ }, 50 - Math.max(0.01, Math.min(0.99, this.timeSlice || 0.3)) * 50);
+ };
+ _proto.stopAsync = function stopAsync() {
+ clearTimeout(this._timerID);
+ this._data = null;
+ };
+ _proto.toString = function toString() {
+ return "[" + this.constructor.name + "]";
+ };
+ _proto._startBuild = function _startBuild() {
+ var pad = this.padding || 0;
+ this.progress = 0;
+ this.spriteSheet = null;
+ this._index = 0;
+ this._scale = this.scale;
+ var dataFrames = [];
+ this._data = {
+ images: [],
+ frames: dataFrames,
+ framerate: this.framerate,
+ animations: this._animations
+ };
+ var frames = this._frames.slice();
+ frames.sort(function (a, b) {
+ return a.height <= b.height ? -1 : 1;
+ });
+ if (frames[frames.length - 1].height + pad * 2 > this.maxHeight) {
+ throw SpriteSheetBuilder.ERR_DIMENSIONS;
+ }
+ var y = 0,
+ x = 0;
+ var img = 0;
+ while (frames.length) {
+ var o = this._fillRow(frames, y, img, dataFrames, pad);
+ if (o.w > x) {
+ x = o.w;
+ }
+ y += o.h;
+ if (!o.h || !frames.length) {
+ var canvas = window.createjs && createjs.createCanvas ? createjs.createCanvas() : document.createElement("canvas");
+ canvas.width = this._getSize(x, this.maxWidth);
+ canvas.height = this._getSize(y, this.maxHeight);
+ this._data.images[img] = canvas;
+ if (!o.h) {
+ x = y = 0;
+ img++;
+ }
+ }
+ }
+ };
+ _proto._setupMovieClipFrame = function _setupMovieClipFrame(source, data) {
+ var ae = source.actionsEnabled;
+ source.actionsEnabled = false;
+ source.gotoAndStop(data.i);
+ source.actionsEnabled = ae;
+ data.f && data.f(source, data.d, data.i);
+ };
+ _proto._getSize = function _getSize(size, max) {
+ var pow = 4;
+ while (Math.pow(2, ++pow) < size) {}
+ return Math.min(max, Math.pow(2, pow));
+ };
+ _proto._fillRow = function _fillRow(frames, y, img, dataFrames, pad) {
+ var w = this.maxWidth;
+ var maxH = this.maxHeight;
+ y += pad;
+ var h = maxH - y;
+ var x = pad;
+ var height = 0;
+ for (var i = frames.length - 1; i >= 0; i--) {
+ var frame = frames[i];
+ var sc = this._scale * frame.scale;
+ var rect = frame.sourceRect;
+ var source = frame.source;
+ var rx = Math.floor(sc * rect.x - pad);
+ var ry = Math.floor(sc * rect.y - pad);
+ var rh = Math.ceil(sc * rect.height + pad * 2);
+ var rw = Math.ceil(sc * rect.width + pad * 2);
+ if (rw > w) {
+ throw SpriteSheetBuilder.ERR_DIMENSIONS;
+ }
+ if (rh > h || x + rw > w) {
+ continue;
+ }
+ frame.img = img;
+ frame.rect = new Rectangle(x, y, rw, rh);
+ height = height || rh;
+ frames.splice(i, 1);
+ dataFrames[frame.index] = [x, y, rw, rh, img, Math.round(-rx + sc * source.regX - pad), Math.round(-ry + sc * source.regY - pad)];
+ x += rw;
+ }
+ return {
+ w: x,
+ h: height
+ };
+ };
+ _proto._endBuild = function _endBuild() {
+ this.spriteSheet = new SpriteSheet(this._data);
+ this._data = null;
+ this.progress = 1;
+ this.dispatchEvent("complete");
+ };
+ _proto._run = function _run() {
+ var _this3 = this;
+ var ts = Math.max(0.01, Math.min(0.99, this.timeSlice || 0.3)) * 50;
+ var t = new Date().getTime() + ts;
+ var complete = false;
+ while (t > new Date().getTime()) {
+ if (!this._drawNext()) {
+ complete = true;
+ break;
+ }
+ }
+ if (complete) {
+ this._endBuild();
+ } else {
+ this._timerID = setTimeout(function () {
+ return _this3._run();
+ }, 50 - ts);
+ }
+ var p = this.progress = this._index / this._frames.length;
+ if (this.hasEventListener("progress")) {
+ var evt = new Event("progress");
+ evt.progress = p;
+ this.dispatchEvent(evt);
+ }
+ };
+ _proto._drawNext = function _drawNext() {
+ var frame = this._frames[this._index];
+ var sc = frame.scale * this._scale;
+ var rect = frame.rect;
+ var sourceRect = frame.sourceRect;
+ var canvas = this._data.images[frame.img];
+ var ctx = canvas.getContext("2d");
+ frame.funct && frame.funct(frame.source, frame.data);
+ ctx.save();
+ ctx.beginPath();
+ ctx.rect(rect.x, rect.y, rect.width, rect.height);
+ ctx.clip();
+ ctx.translate(Math.ceil(rect.x - sourceRect.x * sc), Math.ceil(rect.y - sourceRect.y * sc));
+ ctx.scale(sc, sc);
+ frame.source.draw(ctx);
+ ctx.restore();
+ return ++this._index < this._frames.length;
+ };
+ return SpriteSheetBuilder;
+}(EventDispatcher);
+SpriteSheetBuilder.ERR_DIMENSIONS = "frame dimensions exceed max spritesheet dimensions";
+SpriteSheetBuilder.ERR_RUNNING = "a build is already running";
+
+var SpriteSheetUtils = {
+ _workingCanvas: createCanvas(),
+ get _workingContext() {
+ return this._workingCanvas.getContext("2d");
+ },
+ extractFrame: function extractFrame(spriteSheet, frameOrAnimation) {
+ if (isNaN(frameOrAnimation)) {
+ frameOrAnimation = spriteSheet.getAnimation(frameOrAnimation).frames[0];
+ }
+ var data = spriteSheet.getFrame(frameOrAnimation);
+ if (!data) {
+ return null;
+ }
+ var r = data.rect;
+ var canvas = this._workingCanvas;
+ canvas.width = r.width;
+ canvas.height = r.height;
+ this._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);
+ var img = document.createElement("img");
+ img.src = canvas.toDataURL("image/png");
+ return img;
+ },
+ _flip: function _flip(spriteSheet, count, h, v) {
+ var imgs = spriteSheet._images;
+ var canvas = this._workingCanvas;
+ var ctx = this._workingContext;
+ var il = imgs.length / count;
+ for (var i = 0; i < il; i++) {
+ var src = imgs[i];
+ src.__tmp = i;
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, canvas.width + 1, canvas.height + 1);
+ canvas.width = src.width;
+ canvas.height = src.height;
+ ctx.setTransform(h ? -1 : 1, 0, 0, v ? -1 : 1, h ? src.width : 0, v ? src.height : 0);
+ ctx.drawImage(src, 0, 0);
+ var img = document.createElement("img");
+ img.src = canvas.toDataURL("image/png");
+ img.width = src.width || src.naturalWidth;
+ img.height = src.height || src.naturalHeight;
+ imgs.push(img);
+ }
+ var frames = spriteSheet._frames;
+ var fl = frames.length / count;
+ for (var _i = 0; _i < fl; _i++) {
+ var _src = frames[_i];
+ var rect = _src.rect.clone();
+ var _img = imgs[_src.image.__tmp + il * count];
+ var frame = {
+ image: _img,
+ rect: rect,
+ regX: _src.regX,
+ regY: _src.regY
+ };
+ if (h) {
+ rect.x = (_img.width || _img.naturalWidth) - rect.x - rect.width;
+ frame.regX = rect.width - _src.regX;
+ }
+ if (v) {
+ rect.y = (_img.height || _img.naturalHeight) - rect.y - rect.height;
+ frame.regY = rect.height - _src.regY;
+ }
+ frames.push(frame);
+ }
+ var sfx = "_" + (h ? "h" : "") + (v ? "v" : "");
+ var names = spriteSheet._animations;
+ var data = spriteSheet._data;
+ var al = names.length / count;
+ for (var _i2 = 0; _i2 < al; _i2++) {
+ var name = names[_i2];
+ var _src2 = data[name];
+ var anim = {
+ name: name + sfx,
+ speed: _src2.speed,
+ next: _src2.next,
+ frames: []
+ };
+ if (_src2.next) {
+ anim.next += sfx;
+ }
+ var _frames = _src2.frames;
+ for (var _i3 = 0, l = _frames.length; _i3 < l; _i3++) {
+ anim.frames.push(_frames[_i3] + fl * count);
+ }
+ data[anim.name] = anim;
+ names.push(anim.name);
+ }
+ }
+};
+
+var WebGLInspector =
+function (_EventDispatcher) {
+ _inheritsLoose(WebGLInspector, _EventDispatcher);
+ function WebGLInspector(stage) {
+ var _this;
+ _this = _EventDispatcher.call(this) || this;
+ _this._stage = stage;
+ return _this;
+ }
+ WebGLInspector.dispProps = function dispProps(item, prepend) {
+ if (prepend === void 0) {
+ prepend = "";
+ }
+ var p = "\tP: " + item.x.toFixed(2) + "x" + item.y.toFixed(2) + "\t";
+ var r = "\tR: " + item.regX.toFixed(2) + "x" + item.regY.toFixed(2) + "\t";
+ WebGLInspector._log(prepend, item.toString() + "\t", p, r);
+ };
+ WebGLInspector._log = function _log() {
+ if (WebGLInspector.alternateOutput) {
+ var _WebGLInspector$alter;
+ (_WebGLInspector$alter = WebGLInspector.alternateOutput).log.apply(_WebGLInspector$alter, arguments);
+ } else {
+ var _console;
+ (_console = console).log.apply(_console, arguments);
+ }
+ };
+ var _proto = WebGLInspector.prototype;
+ _proto.log = function log(stage) {
+ if (!stage) {
+ stage = this._stage;
+ }
+ WebGLInspector._log("Batches Per Draw: " + (stage._batchID / stage._drawID).toFixed(4));
+ this.logContextInfo(stage._webGLContext);
+ this.logDepth(stage.children, "");
+ this.logTextureFill(stage);
+ };
+ _proto.toggleGPUDraw = function toggleGPUDraw(stage, enabled) {
+ if (!stage) {
+ stage = this._stage;
+ }
+ if (enabled === undefined) {
+ enabled = !!stage._drawBuffers_;
+ }
+ if (enabled && stage._drawBuffers_) {
+ stage._drawBuffers = stage._drawBuffers_;
+ stage._drawBuffers_ = undefined;
+ } else {
+ stage._drawBuffers_ = stage._drawBuffers;
+ stage._drawBuffers = function _inspectorDrawBuffers(gl) {
+ if (this.vocalDebug) {
+ WebGLInspector._log("BlankDraw[" + this._drawID + ":" + this._batchID + "] : " + this.batchReason);
+ }
+ };
+ }
+ };
+ _proto.logDepth = function logDepth(children, prepend, logFunc) {
+ if (prepend === void 0) {
+ prepend = "";
+ }
+ if (logFunc === void 0) {
+ logFunc = WebGLInspector._log;
+ }
+ if (!children) {
+ children = this._stage.children;
+ }
+ var l = children.length;
+ for (var i = 0; i < l; i++) {
+ var child = children[i];
+ logFunc(prepend + "-", child);
+ if (child.children && child.children.length) {
+ this.logDepth(child.children, "|" + prepend, logFunc);
+ }
+ }
+ };
+ _proto.logContextInfo = function logContextInfo(gl) {
+ if (!gl) {
+ gl = this._stage._webGLContext;
+ }
+ var data = "\n\t\t\t== LOG:\n\n\t\t\tMax textures per draw: " + gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS) + "\n\n\t\t\tMax textures active: " + gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS) + "\n\n\t\t\t\n\n\t\t\tMax texture size: " + gl.getParameter(gl.MAX_TEXTURE_SIZE) / 2 + "\n\n\t\t\tMax cache size: " + gl.getParameter(gl.MAX_RENDERBUFFER_SIZE) / 2 + "\n\n\t\t\t\n\n\t\t\tMax attributes per vertex: " + gl.getParameter(gl.MAX_VERTEX_ATTRIBS) + "\n\n\t\t\tWebGL Version string: " + gl.getParameter(gl.VERSION) + "\n\n\t\t\t======\n\t\t";
+ WebGLInspector._log(data);
+ };
+ _proto.logTextureFill = function logTextureFill(stage) {
+ if (!stage) {
+ stage = this._stage;
+ }
+ var dict = stage._textureDictionary;
+ var count = stage._batchTextureCount;
+ WebGLInspector._log(textureMax + ": " + count);
+ var output = [];
+ for (var n in dict) {
+ var str = n.replace(window.location.origin, "");
+ var tex = dict[n];
+ var shifted = tex._lastActiveIndex ? tex._lastActiveIndex === tex._activeIndex : false;
+ output.push({
+ src: src,
+ element: tex,
+ shifted: shifted
+ });
+ tex._lastActiveIndex = tex._activeIndex;
+ }
+ output.sort(function (a, b) {
+ if (a.element._drawID === stage._drawID) {
+ return 1;
+ }
+ if (a.element._drawID < b.element._drawID) {
+ return -1;
+ }
+ return 0;
+ });
+ var l = output.length;
+ for (var i = 0; i < l; i++) {
+ var out = output[i];
+ var active = out.element._drawID === stage._drawID;
+ WebGLInspector._log("[" + out.src + "] " + (active ? "ACTIVE" : "stale") + " " + (out.shifted ? "steady" : "DRIFT"), out.element);
+ }
+ };
+ return WebGLInspector;
+}(EventDispatcher);
+WebGLInspector.alternateOutput = null;
+
+exports.Event = Event;
+exports.EventDispatcher = EventDispatcher;
+exports.Ticker = Ticker;
+exports.StageGL = StageGL;
+exports.Stage = Stage;
+exports.Container = Container;
+exports.DisplayObject = DisplayObject;
+exports.Bitmap = Bitmap;
+exports.BitmapText = BitmapText;
+exports.DOMElement = DOMElement;
+exports.Graphics = Graphics;
+exports.MovieClip = MovieClip;
+exports.Shadow = Shadow;
+exports.Shape = Shape;
+exports.Sprite = Sprite;
+exports.SpriteSheet = SpriteSheet;
+exports.Text = Text;
+exports.MouseEvent = MouseEvent;
+exports.AlphaMapFilter = AlphaMapFilter;
+exports.AlphaMaskFilter = AlphaMaskFilter;
+exports.BitmapCache = BitmapCache;
+exports.BlurFilter = BlurFilter;
+exports.ColorFilter = ColorFilter;
+exports.ColorMatrix = ColorMatrix;
+exports.ColorMatrixFilter = ColorMatrixFilter;
+exports.Filter = Filter;
+exports.DisplayProps = DisplayProps;
+exports.Matrix2D = Matrix2D;
+exports.Point = Point;
+exports.Rectangle = Rectangle;
+exports.ButtonHelper = ButtonHelper;
+exports.Touch = Touch;
+exports.SpriteSheetBuilder = SpriteSheetBuilder;
+exports.SpriteSheetUtils = SpriteSheetUtils;
+exports.uid = uid;
+exports.createCanvas = createCanvas;
+exports.WebGLInspector = WebGLInspector;
+
+
+ var cjs = window.createjs = window.createjs || {};
+ var v = cjs.v = cjs.v || {};
+
+v.easeljs = "NEXT";
+//# sourceMappingURL=easeljs.cjs.js.map
diff --git a/dist/easeljs.cjs.js.map b/dist/easeljs.cjs.js.map
new file mode 100644
index 000000000..66ee8ae11
--- /dev/null
+++ b/dist/easeljs.cjs.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"easeljs.cjs.js","sources":["../../core/src/events/Event.js","../../core/src/events/EventDispatcher.js","../../core/src/utils/Ticker.js","../src/display/StageGL.js","../src/display/Shadow.js","../src/utils/uid.js","../src/geom/Point.js","../src/geom/Matrix2D.js","../src/geom/DisplayProps.js","../src/geom/Rectangle.js","../src/filters/Filter.js","../src/filters/BitmapCache.js","../src/display/DisplayObject.js","../src/display/Container.js","../src/events/MouseEvent.js","../src/display/Stage.js","../src/utils/Canvas.js","../src/utils/VideoBuffer.js","../src/display/Bitmap.js","../src/display/Sprite.js","../src/display/BitmapText.js","../src/display/DOMElement.js","../src/display/Graphics.js","../src/display/MovieClip.js","../src/display/Shape.js","../src/display/SpriteSheet.js","../src/display/Text.js","../src/filters/AlphaMapFilter.js","../src/filters/AlphaMaskFilter.js","../src/filters/BlurFilter.js","../src/filters/ColorFilter.js","../src/filters/ColorMatrix.js","../src/filters/ColorMatrixFilter.js","../src/ui/ButtonHelper.js","../src/ui/Touch.js","../src/utils/SpriteSheetBuilder.js","../src/utils/SpriteSheetUtils.js","../src/utils/WebGLInspector.js"],"sourcesContent":["/**\n * @license Event\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Contains properties and methods shared by all events for use with {@link core.EventDispatcher}.\n * Note that Event objects are often reused, so you should never\n * rely on an event object's state outside of the call stack it was received in.\n *\n * @memberof core\n * @example\n * const evt = new Event(\"myEvent\");\n * const dispatcher = new EventDispatcher();\n * dispatcher.on(\"myEvent\", event => console.log(event.type));\n * dispatcher.dispatchEvent(evt); // logs \"myEvent\"\n *\n * @param {string} type The event type.\n * @param {boolean} [bubbles=false] Indicates whether the event will bubble through the display list.\n * @param {boolean} [cancelable=false] Indicates whether the default behaviour of this event can be cancelled.\n */\nclass Event {\n\n\tconstructor (type, bubbles = false, cancelable = false) {\n\t\t/**\n\t\t * The type of event.\n\t\t * @type string\n\t\t */\n\t\tthis.type = type;\n\n\t\t/**\n\t\t * The object that generated an event.\n\t\t *\n\t\t * @type Object\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.target = null;\n\n\t\t/**\n\t\t * The current target that a bubbling event is being dispatched from. For non-bubbling events, this will\n\t\t * always be the same as target. For example, if childObj.parent = parentObj, and a bubbling event\n\t\t * is generated from childObj, then a listener on parentObj would receive the event with\n\t\t * target=childObj (the original target) and currentTarget=parentObj (where the listener was added).\n\t\t *\n\t\t * @type Object\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.currentTarget = null;\n\n\t\t/**\n\t\t * For bubbling events, this indicates the current event phase:\n\t\t * \n\t\t * \t- capture phase: starting from the top parent to the target
\n\t\t * \t- at target phase: currently being dispatched from the target
\n\t\t * \t- bubbling phase: from the target to the top parent
\n\t\t *
\n\t\t *\n\t\t * @type number\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.eventPhase = 0;\n\n\t\t/**\n\t\t * Indicates whether the event will bubble through the display list.\n\t\t *\n\t\t * @type boolean\n\t\t * @readonly\n\t\t */\n\t\tthis.bubbles = bubbles;\n\n\t\t/**\n\t\t * Indicates whether the default behaviour of this event can be cancelled via {@link core.Event#preventDefault}.\n\t\t *\n\t\t * @type boolean\n\t\t * @readonly\n\t\t */\n\t\tthis.cancelable = cancelable;\n\n\t\t/**\n\t\t * The epoch time at which this event was created.\n\t\t *\n\t\t * @type number\n\t\t * @readonly\n\t\t */\n\t\tthis.timeStamp = new Date().getTime();\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#preventDefault} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.defaultPrevented = false;\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#stopPropagation} or {@link core.Event#stopImmediatePropagation} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.propagationStopped = false;\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#stopImmediatePropagation} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.immediatePropagationStopped = false;\n\n\t\t/**\n\t\t * Indicates if {@link core.Event#remove} has been called on this event.\n\t\t *\n\t\t * @type boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t */\n\t\tthis.removed = false;\n\t}\n\n\t/**\n\t * Sets {@link core.Event#defaultPrevented} to true if the event is cancelable.\n\t * Mirrors the DOM level 2 event standard. In general, cancelable events that have `preventDefault()` called will\n\t * cancel the default behaviour associated with the event.\n\t * @return {core.Event} this, chainable\n\t */\n\tpreventDefault () {\n\t\tthis.defaultPrevented = this.cancelable;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets {@link core.Event#propagationStopped} to true.\n\t * Mirrors the DOM event standard.\n\t * @return {core.Event} this, chainable\n\t */\n\tstopPropagation () {\n\t\tthis.propagationStopped = true;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets {@link core.Event#propagationStopped} and {@link core.Event#immediatePropagationStopped} to true.\n\t * Mirrors the DOM event standard.\n\t * @return {core.Event} this, chainable\n\t */\n\tstopImmediatePropagation () {\n\t\tthis.immediatePropagationStopped = this.propagationStopped = true;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Causes the active listener to be removed via removeEventListener();\n\t *\n\t * @example\n\t * myBtn.addEventListener(\"click\", event => {\n\t * event.remove(); // removes this listener.\n\t * });\n\t *\n\t * @return {core.Event} this, chainable\n\t */\n\tremove () {\n\t\tthis.removed = true;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of the Event instance.\n\t *\n\t * @return {core.Event} a clone of the Event instance.\n\t */\n\tclone () {\n\t\tconst event = new Event(this.type, this.bubbles, this.cancelable);\n\t\tfor (let n in this) {\n\t\t\tif (this.hasOwnProperty(n)) {\n\t\t\t\tevent[n] = this[n];\n\t\t\t}\n\t\t}\n\t\treturn event;\n\t}\n\n\t/**\n\t * Provides a return {core.Event} this, chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t * @param {Object} props A generic object containing properties to copy to the instance.\n\t * @return {core.Event} this, chainable\n\t */\n\tset (props) {\n\t\tfor (let n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t *\n\t * @return {string} A string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (type=${this.type})]`;\n\t}\n\n}\n\nexport default Event;\n","/**\n * @license EventDispatcher\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Event from \"./Event\";\n\n/**\n * EventDispatcher provides methods for managing queues of event listeners and dispatching events.\n *\n * You can either extend EventDispatcher or mix its methods into an existing prototype or instance by using the\n * EventDispatcher {@link core.EventDispatcher.initialize} method.\n *\n * Together with the CreateJS Event class, EventDispatcher provides an extended event model that is based on the\n * DOM Level 2 event model, including addEventListener, removeEventListener, and dispatchEvent. It supports\n * bubbling / capture, preventDefault, stopPropagation, stopImmediatePropagation, and handleEvent.\n *\n * EventDispatcher also exposes a {@link core.EventDispatcher#on} method, which makes it easier\n * to create scoped listeners, listeners that only run once, and listeners with associated arbitrary data. The\n * {@link core.EventDispatcher#off} method is merely an alias to {@link core.EventDispatcher#removeEventListener}.\n *\n * Another addition to the DOM Level 2 model is the {@link core.EventDispatcher#removeAllEventListeners}\n * method, which can be used to listeners for all events, or listeners for a specific event. The Event object also\n * includes a {@link core.Event#remove} method which removes the active listener.\n *\n * @memberof core\n * @example\n * // add EventDispatcher capabilities to the \"MyClass\" class.\n * EventDispatcher.initialize(MyClass.prototype);\n *\n * // Add an event.\n * instance.addEventListener(\"eventName\", event => console.log(event.target + \" was clicked.\"));\n *\n * // scope (\"this\") can be be a challenge with events.\n * // using the {@link core.EventDispatcher#on} method to subscribe to events simplifies this.\n * instance.addEventListener(\"click\", event => console.log(instance === this)); // false, scope is ambiguous.\n * instance.on(\"click\", event => console.log(instance === this)); // true, `on` uses dispatcher scope by default.\n */\nclass EventDispatcher {\n\n\t/**\n\t * Static initializer to mix EventDispatcher methods into a target object or prototype.\n\t *\n\t * @static\n\t * @example\n\t * EventDispatcher.initialize(MyClass.prototype); // add to the prototype of the class\n\t * EventDispatcher.initialize(myInstance); // add to a specific instance\n\t *\n\t * @param {Object} target The target object to inject EventDispatcher methods into.\n\t */\n\tstatic initialize (target) {\n\t\tconst p = EventDispatcher.prototype;\n\t\ttarget.addEventListener = p.addEventListener;\n\t\ttarget.on = p.on;\n\t\ttarget.removeEventListener = target.off = p.removeEventListener;\n\t\ttarget.removeAllEventListeners = p.removeAllEventListeners;\n\t\ttarget.hasEventListener = p.hasEventListener;\n\t\ttarget.dispatchEvent = p.dispatchEvent;\n\t\ttarget._dispatchEvent = p._dispatchEvent;\n\t\ttarget.willTrigger = p.willTrigger;\n\t}\n\n\tconstructor () {\n\t\t/**\n\t\t * @private\n\t\t * @default null\n\t\t * @type Object\n\t\t */\n\t\tthis._listeners = null;\n\n\t\t/**\n\t\t * @private\n\t\t * @default null\n\t\t * @type Object\n\t\t */\n\t\tthis._captureListeners = null;\n\t}\n\n\t/**\n\t * Adds the specified event listener. Note that adding multiple listeners to the same function will result in\n\t * multiple callbacks getting fired.\n\t *\n\t * @example\n\t * displayObject.addEventListener(\"click\", event => console.log('clicked', event));\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener An object with a handleEvent method, or a function that will be called when the event is dispatched.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t * @return {Function|Object} Returns the listener for chaining or assignment.\n\t */\n\taddEventListener (type, listener, useCapture = false) {\n\t\tlet listeners;\n\t\tif (useCapture) {\n\t\t\tlisteners = this._captureListeners = this._captureListeners || {};\n\t\t} else {\n\t\t\tlisteners = this._listeners = this._listeners || {};\n\t\t}\n\t\tlet arr = listeners[type];\n\t\tif (arr) {\n\t\t\tthis.removeEventListener(type, listener, useCapture);\n\t\t\tarr = listeners[type]; // remove may have deleted the array\n\t\t}\n\t\tif (arr) { arr.push(listener); }\n\t\telse { listeners[type] = [listener]; }\n\t\treturn listener;\n\t}\n\n\t/**\n\t * A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener\n\t * only run once, associate arbitrary data with the listener, and remove the listener.\n\t *\n\t * This method works by creating an anonymous wrapper function and subscribing it with `addEventListener`.\n\t * The wrapper function is returned for use with `removeEventListener` (or `off`).\n\t *\n\t * To remove a listener added with `on`, you must pass in the returned wrapper function as the listener, or use\n\t * {@link core.Event#remove}. Likewise, each time you call `on` a NEW wrapper function is subscribed, so multiple calls\n\t * to `on` with the same params will create multiple listeners.\n\t *\n\t * @example\n\t * const listener = myBtn.on(\"click\", handleClick, null, false, { count: 3 });\n\t * function handleClick (evt, data) {\n\t * data.count -= 1;\n\t * console.log(this == myBtn); // true - scope defaults to the dispatcher\n\t * if (data.count == 0) {\n\t * alert(\"clicked 3 times!\");\n\t * myBtn.off(\"click\", listener);\n\t * // alternately: evt.remove();\n\t * }\n\t * }\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener An object with a handleEvent method, or a function that will be called when the event is dispatched.\n\t * @param {Object} [scope=null] The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).\n\t * @param {boolean} [once=false] If true, the listener will remove itself after the first time it is triggered.\n\t * @param {*} [data={}] Arbitrary data that will be included as the second parameter when the listener is called.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t * @return {Function} Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.\n\t */\n\ton (type, listener, scope = null, once = false, data = {}, useCapture = false) {\n\t\tif (listener.handleEvent) {\n\t\t\tscope = scope || listener;\n\t\t\tlistener = listener.handleEvent;\n\t\t}\n\t\tscope = scope || this;\n\t\treturn this.addEventListener(type, evt => {\n\t\t\tlistener.call(scope, evt, data);\n\t\t\tonce && evt.remove();\n\t\t}, useCapture);\n\t}\n\n\t/**\n\t * Removes the specified event listener.\n\t *\n\t * You must pass the exact function reference used when the event was added. If a proxy\n\t * function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or\n\t * closure will not work.\n\t *\n\t * @example\n\t * displayObject.removeEventListener(\"click\", handleClick);\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener The listener function or object.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t */\n\tremoveEventListener (type, listener, useCapture = false) {\n\t\tconst listeners = useCapture ? this._captureListeners : this._listeners;\n\t\tif (!listeners) { return; }\n\t\tconst arr = listeners[type];\n\t\tif (!arr) { return; }\n\t\tconst l = arr.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tif (arr[i] === listener) {\n\t\t\t\tif (l === 1) { delete(listeners[type]); } // allows for faster checks.\n\t\t\t\telse { arr.splice(i, 1); }\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the\n\t * `on` method.\n\t *\n\t * To remove a listener added with `on`, you must pass in the returned wrapper function as the listener. See\n\t * {@link core.EventDispatcher#on} for an example.\n\t *\n\t * @param {string} type The string type of the event.\n\t * @param {Function|Object} listener The listener function or object.\n\t * @param {boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t */\n\toff (type, listener, useCapture = false) {\n\t\tthis.removeEventListener(type, listener, useCapture);\n\t}\n\n\t/**\n\t * Removes all listeners for the specified type, or all listeners of all types.\n\t *\n\t * @example\n\t * // remove all listeners\n\t * displayObject.removeAllEventListeners();\n\t *\n\t * // remove all click listeners\n\t * displayObject.removeAllEventListeners(\"click\");\n\t *\n\t * @param {string} [type=null] The string type of the event. If omitted, all listeners for all types will be removed.\n\t */\n\tremoveAllEventListeners (type = null) {\n\t\tif (type) {\n\t\t\tif (this._listeners) { delete(this._listeners[type]); }\n\t\t\tif (this._captureListeners) { delete(this._captureListeners[type]); }\n\t\t} else {\n\t\t\tthis._listeners = this._captureListeners = null;\n\t\t}\n\t}\n\n\t/**\n\t * Dispatches the specified event to all listeners.\n\t *\n\t * @example\n\t * // use a string event\n\t * this.dispatchEvent(\"complete\")\n\t *\n\t * // use an Event instance\n\t * const event = new createjs.Event(\"progress\");\n\t * this.dispatchEvent(event);\n\t *\n\t * @param {Object|Event|string} eventObj An object with a \"type\" property, or a string type.\n\t * While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used,\n\t * dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can\n\t * be used to avoid event object instantiation for non-bubbling events that may not have any listeners.\n\t * @param {boolean} [bubbles=false] Specifies the `bubbles` value when a string was passed to eventObj.\n\t * @param {boolean} [cancelable=false] Specifies the `cancelable` value when a string was passed to eventObj.\n\t * @return {boolean} Returns false if `preventDefault()` was called on a cancelable event, true otherwise.\n\t */\n\tdispatchEvent (eventObj, bubbles = false, cancelable = false) {\n\t\tif (typeof eventObj === \"string\") {\n\t\t\t// skip everything if there's no listeners and it doesn't bubble:\n\t\t\tconst listeners = this._listeners;\n\t\t\tif (!bubbles && (!listeners || !listeners[eventObj])) { return true; }\n\t\t\teventObj = new Event(eventObj, bubbles, cancelable);\n\t\t} else if (eventObj.target && eventObj.clone) {\n\t\t\t// redispatching an active event object, so clone it:\n\t\t\teventObj = eventObj.clone();\n\t\t}\n\n\t\t// TODO: it would be nice to eliminate this. Maybe in favour of evtObj instanceof Event? Or !!evtObj.createEvent\n\t\ttry { eventObj.target = this; } catch (e) {} // try/catch allows redispatching of native events\n\n\t\tif (!eventObj.bubbles || !this.parent) {\n\t\t\tthis._dispatchEvent(eventObj, 2);\n\t\t} else {\n\t\t\tlet top = this;\n\t\t\tconst list = [top];\n\t\t\twhile (top.parent) { list.push(top = top.parent); }\n\t\t\tconst l = list.length;\n\t\t\tlet i;\n\n\t\t\t// capture & atTarget\n\t\t\tfor (i = l - 1; i >= 0 && !eventObj.propagationStopped; i--) {\n\t\t\t\tlist[i]._dispatchEvent(eventObj, 1+(i==0));\n\t\t\t}\n\t\t\t// bubbling\n\t\t\tfor (i = 1; i < l && !eventObj.propagationStopped; i++) {\n\t\t\t\tlist[i]._dispatchEvent(eventObj, 3);\n\t\t\t}\n\t\t}\n\t\treturn !eventObj.defaultPrevented;\n\t}\n\n\t/**\n\t * Indicates whether there is at least one listener for the specified event type.\n\t *\n\t * @param {string} type The string type of the event.\n\t * @return {boolean} Returns true if there is at least one listener for the specified event.\n\t */\n\thasEventListener (type) {\n\t\tconst listeners = this._listeners, captureListeners = this._captureListeners;\n\t\treturn !!((listeners && listeners[type]) || (captureListeners && captureListeners[type]));\n\t}\n\n\t/**\n\t * Indicates whether there is at least one listener for the specified event type on this object or any of its\n\t * ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the\n\t * specified type is dispatched from this object, it will trigger at least one listener.\n\t *\n\t * This is similar to {@link core.EventDispatcher#hasEventListener}, but it searches the entire\n\t * event flow for a listener, not just this object.\n\t *\n\t * @param {string} type The string type of the event.\n\t * @return {boolean} Returns `true` if there is at least one listener for the specified event.\n\t */\n\twillTrigger (type) {\n\t\tlet o = this;\n\t\twhile (o) {\n\t\t\tif (o.hasEventListener(type)) { return true; }\n\t\t\to = o.parent;\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name + this.name ? ` ${this.name}` : \"\"}]`;\n\t}\n\n\t/**\n\t * @private\n\t * @param {Object|Event|string} eventObj\n\t * @param {Object} eventPhase\n\t */\n\t_dispatchEvent (eventObj, eventPhase) {\n\t\tconst listeners = eventPhase === 1 ? this._captureListeners : this._listeners;\n\t\tif (eventObj && listeners) {\n\t\t\tlet arr = listeners[eventObj.type];\n\t\t\tlet l;\n\t\t\tif (!arr || (l = arr.length) === 0) { return; }\n\t\t\ttry { eventObj.currentTarget = this; } catch (e) {}\n\t\t\ttry { eventObj.eventPhase = eventPhase; } catch (e) {}\n\t\t\teventObj.removed = false;\n\n\t\t\tarr = arr.slice(); // to avoid issues with items being removed or added during the dispatch\n\t\t\tfor (let i = 0; i < l && !eventObj.immediatePropagationStopped; i++) {\n\t\t\t\tlet o = arr[i];\n\t\t\t\tif (o.handleEvent) { o.handleEvent(eventObj); }\n\t\t\t\telse { o(eventObj); }\n\t\t\t\tif (eventObj.removed) {\n\t\t\t\t\tthis.off(eventObj.type, o, eventPhase === 1);\n\t\t\t\t\teventObj.removed = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n}\n\nexport default EventDispatcher;\n","/**\n * @license Ticker\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport EventDispatcher from \"../events/EventDispatcher\";\nimport Event from \"../events/Event\";\n\n/**\n * The Ticker provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick\n * event to be notified when a set time interval has elapsed.\n *\n * Note that the interval that the tick event is called is a target interval, and may be broadcast at a slower interval\n * when under high CPU load. The Ticker class uses a static interface (ex. `Ticker.framerate = 30;`) and\n * can not be instantiated.\n *\n * @todo Pass timingMode, maxDelta, paused values as instantiation arguments?\n *\n * @memberof core\n * @example\n * Ticker.addEventListener(\"tick\", event => {\n * // Actions carried out each tick (aka frame)\n * if (!event.paused) {\n * // Actions carried out when the Ticker is not paused.\n * }\n * });\n * @example\n * // Ticker export explanation\n * import Ticker, { Ticker as TickerClass, getTicker } from \"@createjs/core\";\n * Ticker.name, Ticker.RAF // -> createjs.global, undefined\n * TickerClass.RAF // -> raf\n * Ticker === getTicker(\"createjs.global\") // -> true\n *\n * @extends core.EventDispatcher\n * @param {string} name The name assigned to this instance.\n */\nclass Ticker extends EventDispatcher {\n\n\t/**\n\t * In this mode, Ticker uses the requestAnimationFrame API, but attempts to synch the ticks to target framerate. It\n\t * uses a simple heuristic that compares the time of the RAF return to the target time for the current frame and\n\t * dispatches the tick when the time is within a certain threshold.\n\t *\n\t * This mode has a higher variance for time between frames than {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}},\n\t * but does not require that content be time based as with {{#crossLink \"Ticker/RAF:property\"}}{{/crossLink}} while\n\t * gaining the benefits of that API (screen synch, background throttling).\n\t *\n\t * Variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so\n\t * framerates of 10, 12, 15, 20, and 30 work well.\n\t *\n\t * Falls back to {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}} if the requestAnimationFrame API is not\n\t * supported.\n\t *\n\t * @static\n\t * @type {string}\n\t * @default \"synched\"\n\t * @readonly\n\t */\n\tstatic get RAF_SYNCHED () { return \"synched\"; }\n\n\t/**\n\t * In this mode, Ticker passes through the requestAnimationFrame heartbeat, ignoring the target framerate completely.\n\t * Because requestAnimationFrame frequency is not deterministic, any content using this mode should be time based.\n\t * You can leverage {@link core.Ticker#getTime} and the {@link core.Ticker#event:tick}\n\t * event object's \"delta\" properties to make this easier.\n\t *\n\t * Falls back on {@link core.Ticker.TIMEOUT} if the requestAnimationFrame API is not supported.\n\t *\n\t * @static\n\t * @type {string}\n\t * @default \"raf\"\n\t * @readonly\n\t */\n\tstatic get RAF () { return \"raf\"; }\n\n\t/**\n\t * In this mode, Ticker uses the setTimeout API. This provides predictable, adaptive frame timing, but does not\n\t * provide the benefits of requestAnimationFrame (screen synch, background throttling).\n\t *\n\t * @static\n\t * @type {string}\n\t * @default \"timeout\"\n\t * @readonly\n\t */\n\tstatic get TIMEOUT () { return \"timeout\"; }\n\n\tconstructor (name) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The name of this instance.\n\t\t * @type {string}\n\t\t */\n\t\tthis.name = name;\n\n\t\t/**\n\t\t * Specifies the timing api (setTimeout or requestAnimationFrame) and mode to use.\n\t\t *\n\t\t * @see {@link core.Ticker.TIMEOUT}\n\t\t * @see {@link core.Ticker.RAF}\n\t\t * @see {@link core.Ticker.RAF_SYNCHED}\n\t\t *\n\t\t * @type {string}\n\t\t * @default Ticker.TIMEOUT\n\t\t */\n\t\tthis.timingMode = Ticker.TIMEOUT;\n\n\t\t/**\n\t\t * Specifies a maximum value for the delta property in the tick event object. This is useful when building time\n\t\t * based animations and systems to prevent issues caused by large time gaps caused by background tabs, system sleep,\n\t\t * alert dialogs, or other blocking routines. Double the expected frame duration is often an effective value\n\t\t * (ex. maxDelta=50 when running at 40fps).\n\t\t *\n\t\t * This does not impact any other values (ex. time, runTime, etc), so you may experience issues if you enable maxDelta\n\t\t * when using both delta and other values.\n\t\t *\n\t\t * If 0, there is no maximum.\n\t\t *\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis.maxDelta = 0;\n\n\t\t/**\n\t\t * When the ticker is paused, all listeners will still receive a tick event, but the `paused` property\n\t\t * of the event will be `true`. Also, while paused the `runTime` will not increase.\n\t\t *\n\t\t * @example\n\t\t * Ticker.addEventListener(\"tick\", event => console.log(event.paused, Ticker.getTime(false), Ticker.getTime(true)));\n\t\t * Ticker.paused = true;\n\t\t *\n\t\t * @see {@link core.Ticker#event:tick}\n\t\t * @see {@link core.Ticker#getTime}\n\t\t * @see {@link core.Ticker#getEventTime}\n\t\t *\n\t\t * @type {boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.paused = false;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._inited = false;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._startTime = 0;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._pausedTime = 0;\n\n\t\t/**\n\t\t * The number of ticks that have passed.\n\t\t *\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._ticks = 0;\n\n\t\t/**\n\t\t * The number of ticks that have passed while Ticker has been paused.\n\t\t *\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default\n\t\t */\n\t\tthis._pausedTicks = 0;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default\n\t\t */\n\t\tthis._interval = 50;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default\n\t\t */\n\t\tthis._lastTime = 0;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {Array}\n\t\t * @default null\n\t\t */\n\t\tthis._times = null;\n\n\t\t/**\n\t\t * @private\n\t\t * @type {Array}\n\t\t * @default null\n\t\t */\n\t\tthis._tickTimes = null;\n\n\t\t/**\n\t\t * Stores the timeout or requestAnimationFrame id.\n\t\t *\n\t\t * @private\n\t\t * @type {number}\n\t\t * @default null\n\t\t */\n\t\tthis._timerId = null;\n\n\t\t/**\n\t\t * True if currently using requestAnimationFrame, false if using setTimeout. This may be different than timingMode\n\t\t * if that property changed and a tick hasn't fired.\n\t\t *\n\t\t * @private\n\t\t * @type {boolean}\n\t\t * @default true\n\t\t */\n\t\tthis._raf = true;\n\t}\n\n\t/**\n\t * Indicates the target time (in milliseconds) between ticks. Default is 50 (20 FPS).\n\t * Note that actual time between ticks may be more than specified depending on CPU load.\n\t * This property is ignored if the ticker is using the `RAF` timing mode.\n\t *\n\t * @type {number}\n\t */\n\tget interval () { return this._interval; }\n\tset interval (interval) {\n\t\tthis._interval = interval;\n\t\tif (!this._inited) { return; }\n\t\tthis._setupTick();\n\t}\n\n\t/**\n\t * Indicates the target frame rate in frames per second (FPS). Effectively just a shortcut to `interval`, where\n\t * `framerate == 1000/interval`.\n\t *\n\t * @type {number}\n\t */\n\tget framerate () { return 1000 / this._interval; }\n\tset framerate (framerate) { this.interval = 1000 / framerate; }\n\n\t/**\n\t * Starts the tick. This is called automatically when the first listener is added.\n\t */\n\tinit () {\n\t\tif (this._inited) { return; }\n\t\tthis._inited = true;\n\t\tthis._times = [];\n\t\tthis._tickTimes = [];\n\t\tthis._startTime = this._getTime();\n\t\tthis._times.push(this._lastTime = 0);\n\t\tthis._setupTick();\n\t}\n\n\t/**\n\t * Stops the Ticker and removes all listeners. Use init() to restart the Ticker.\n\t */\n\treset () {\n\t\tif (this._raf) {\n\t\t\tlet f = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame;\n\t\t\tf && f(this._timerId);\n\t\t} else {\n\t\t\tclearTimeout(this._timerId);\n\t\t}\n\t\tthis.removeAllEventListeners(\"tick\");\n\t\tthis._timerId = this._times = this._tickTimes = null;\n\t\tthis._startTime = this._lastTime = this._ticks = 0;\n\t\tthis._inited = false;\n\t}\n\n\t/**\n\t * Init the Ticker instance if it hasn't been already.\n\t */\n\taddEventListener (type, listener, useCapture) {\n\t\t!this._inited && this.init();\n\t\treturn super.addEventListener(type, listener, useCapture);\n\t}\n\n\t/**\n\t * Returns the average time spent within a tick. This can vary significantly from the value provided by getMeasuredFPS\n\t * because it only measures the time spent within the tick execution stack.\n\t *\n\t * Example 1: With a target FPS of 20, getMeasuredFPS() returns 20fps, which indicates an average of 50ms between\n\t * the end of one tick and the end of the next. However, getMeasuredTickTime() returns 15ms. This indicates that\n\t * there may be up to 35ms of \"idle\" time between the end of one tick and the start of the next.\n\t *\n\t * Example 2: With a target FPS of 30, getFPS() returns 10fps, which indicates an average of 100ms between the end of\n\t * one tick and the end of the next. However, getMeasuredTickTime() returns 20ms. This would indicate that something\n\t * other than the tick is using ~80ms (another script, DOM rendering, etc).\n\t *\n\t * @param {number} [ticks=null] The number of previous ticks over which to measure the average time spent in a tick.\n\t * Defaults to the number of ticks per second. To get only the last tick's time, pass in 1.\n\t * @return {number} The average time spent in a tick in milliseconds.\n\t */\n\tgetMeasuredTickTime (ticks = null) {\n\t\tconst times = this._tickTimes;\n\t\tif (!times || times.length < 1) { return -1; }\n\t\t// by default, calculate average for the past ~1 second:\n\t\tticks = Math.min(times.length, ticks || (this.framerate | 0));\n\t\treturn times.reduce((a, b) => a + b, 0) / ticks;\n\t}\n\n\t/**\n\t * Returns the actual frames / ticks per second.\n\t *\n\t * @param {number} [ticks=null] The number of previous ticks over which to measure the actual frames / ticks per second.\n\t * Defaults to the number of ticks per second.\n\t * @return {number} The actual frames / ticks per second. Depending on performance, this may differ\n\t * from the target frames per second.\n\t */\n\tgetMeasuredFPS (ticks = null) {\n\t\tconst times = this._times;\n\t\tif (!times || times.length < 2) { return -1; }\n\t\t// by default, calculate fps for the past ~1 second:\n\t\tticks = Math.min(times.length - 1, ticks || (this.framerate | 0));\n\t\treturn 1000 / ((times[0] - times[ticks]) / ticks);\n\t}\n\n\t/**\n\t * Returns the number of milliseconds that have elapsed since Ticker was initialized via {@link core.Ticker#init}.\n\t * Returns -1 if Ticker has not been initialized. For example, you could use\n\t * this in a time synchronized animation to determine the exact amount of time that has elapsed.\n\t *\n\t * @param {boolean} [runTime=false] If true only time elapsed while Ticker was not paused will be returned.\n\t * If false, the value returned will be total time elapsed since the first tick event listener was added.\n\t * @return {number} Number of milliseconds that have elapsed since Ticker was initialized or -1.\n\t */\n\tgetTime (runTime = false) {\n\t\treturn this._startTime ? this._getTime() - (runTime ? this._pausedTime : 0) : -1;\n\t}\n\n\t/**\n\t * Similar to {@link core.Ticker#getTime}, but returns the time on the most recent {@link core.Ticker#event:tick}\n\t * event object.\n\t *\n\t * @param {boolean} [runTime=false] If true, the runTime property will be returned instead of time.\n\t * @returns {number} The time or runTime property from the most recent tick event or -1.\n\t */\n\tgetEventTime (runTime = false) {\n\t\treturn this._startTime ? (this._lastTime || this._startTime) - (runTime ? this._pausedTime : 0) : -1;\n\t}\n\n\t/**\n\t * Returns the number of ticks that have been broadcast by Ticker.\n\t *\n\t * @param {boolean} [pauseable=false] Indicates whether to include ticks that would have been broadcast\n\t * while Ticker was paused. If true only tick events broadcast while Ticker is not paused will be returned.\n\t * If false, tick events that would have been broadcast while Ticker was paused will be included in the return\n\t * value.\n\t * @return {number} of ticks that have been broadcast.\n\t */\n\tgetTicks (pauseable = false) {\n\t\treturn this._ticks - (pauseable ? this._pausedTicks : 0);\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_handleSynch () {\n\t\tthis._timerId = null;\n\t\tthis._setupTick();\n\n\t\t// run if enough time has elapsed, with a little bit of flexibility to be early:\n\t\tif (this._getTime() - this._lastTime >= (this._interval - 1) * 0.97) {\n\t\t\tthis._tick();\n\t\t}\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_handleRAF () {\n\t\tthis._timerId = null;\n\t\tthis._setupTick();\n\t\tthis._tick();\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_handleTimeout () {\n\t\tthis._timerId = null;\n\t\tthis._setupTick();\n\t\tthis._tick();\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_setupTick () {\n\t\tif (this._timerId != null) { return; } // avoid duplicates\n\t\tconst mode = this.timingMode || (this._raf && Ticker.RAF);\n\t\tif (mode === Ticker.RAF_SYNCHED || mode === Ticker.RAF) {\n\t\t\tconst f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;\n\t\t\tif (f) {\n\t\t\t\tthis._timerId = f(mode === Ticker.RAF ? this._handleRAF.bind(this) : this._handleSynch.bind(this));\n\t\t\t\tthis._raf = true;\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tthis._raf = false;\n\t\tthis._timerId = setTimeout(this._handleTimeout.bind(this), this._interval);\n\t}\n\n\t/**\n\t * @private\n\t * @emits core.Ticker#event:tick\n\t */\n\t_tick () {\n\t\tconst paused = this.paused, time = this._getTime(), elapsedTime = time - this._lastTime;\n\t\tthis._lastTime = time;\n\t\tthis._ticks++;\n\n\t\tif (paused) {\n\t\t\tthis._pausedTicks++;\n\t\t\tthis._pausedTime += elapsedTime;\n\t\t}\n\n\t\tif (this.hasEventListener(\"tick\")) {\n\t\t\tconst event = new Event(\"tick\");\n\t\t\tconst maxDelta = this.maxDelta;\n\t\t\tevent.delta = (maxDelta && elapsedTime > maxDelta) ? maxDelta : elapsedTime;\n\t\t\tevent.paused = paused;\n\t\t\tevent.time = time;\n\t\t\tevent.runTime = time - this._pausedTime;\n\t\t\tthis.dispatchEvent(event);\n\t\t}\n\n\t\tthis._tickTimes.unshift(this._getTime() - time);\n\t\twhile (this._tickTimes.length > 100) { this._tickTimes.pop(); }\n\n\t\tthis._times.unshift(time);\n\t\twhile (this._times.length > 100) { this._times.pop(); }\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_getTime () {\n\t\tconst now = window.performance && window.performance.now;\n\t\treturn ((now && now.call(performance)) || (new Date().getTime())) - this._startTime;\n\t}\n\n\tstatic on (type, listener, scope, once, data, useCapture) { return _instance.on(type, listener, scope, once, data, useCapture); }\n\tstatic removeEventListener (type, listener, useCapture) { _instance.removeEventListener(type, listener, useCapture); }\n\tstatic off (type, listener, useCapture) { _instance.off(type, listener, useCapture); }\n\tstatic removeAllEventListeners (type) { _instance.removeAllEventListeners(type); }\n\tstatic dispatchEvent (eventObj, bubbles, cancelable) { return _instance.dispatchEvent(eventObj, bubbles, cancelable); }\n\tstatic hasEventListener (type) { return _instance.hasEventListener(type); }\n\tstatic willTrigger (type) { return _instance.willTrigger(type); }\n\tstatic toString () { return _instance.toString(); }\n\tstatic init () { _instance.init(); }\n\tstatic reset () { _instance.reset(); }\n\tstatic addEventListener (type, listener, useCapture) { _instance.addEventListener(type, listener, useCapture); }\n\tstatic getMeasuredTickTime (ticks) { return _instance.getMeasuredTickTime(ticks); }\n\tstatic getMeasuredFPS (ticks) { return _instance.getMeasuredFPS(ticks); }\n\tstatic getTime (runTime) { return _instance.getTime(runTime); }\n\tstatic getEventTime (runTime) { return _instance.getEventTime(runTime); }\n\tstatic getTicks (pauseable) { return _instance.getTicks(pauseable); }\n\n\tstatic get interval () { return _instance.interval; }\n\tstatic set interval (interval) { _instance.interval = interval; }\n\tstatic get framerate () { return _instance.framerate; }\n\tstatic set framerate (framerate) { _instance.framerate = framerate; }\n\tstatic get name () { return _instance.name; }\n\tstatic set name (name) { _instance.name = name; }\n\tstatic get timingMode () { return _instance.timingMode; }\n\tstatic set timingMode (timingMode) { _instance.timingMode = timingMode; }\n\tstatic get maxDelta () { return _instance.maxDelta; }\n\tstatic set maxDelta (maxDelta) { _instance.maxDelta = maxDelta; }\n\tstatic get paused () { return _instance.paused; }\n\tstatic set paused (paused) { _instance.paused = paused; }\n\n}\n\n/**\n * Dispatched each tick. The event will be dispatched to each listener even when the Ticker has been paused.\n *\n * @example\n * Ticker.addEventListener(\"tick\", event => console.log(\"Paused:\", event.paused, event.delta));\n *\n * @event core.Ticker#tick\n * @type {Object}\n * @property {Object} target The object that dispatched the event.\n * @property {string} type The event type.\n * @property {boolean} paused Indicates whether the ticker is currently paused.\n * @property {number} delta The time elapsed in ms since the last tick.\n * @property {number} time The total time in ms since Ticker was initialized.\n * @property {number} runTime The total time in ms that Ticker was not paused since it was initialized. For example,\n * you could determine the amount of time that the Ticker has been paused since initialization with `time-runTime`.\n * @since 0.6.0\n */\n\nexport default Ticker;\n\n// the default Ticker instance\nconst _instance = new Ticker(\"createjs.global\");\n","/**\n * @license\n *\n * StageGL\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nclass StageGL {\n\tconstructor () {\n\t\tthrow new Error(`\n\t\t\tStageGL is not currently supported on the EaselJS 2.0 branch.\n\t\t\tEnd of Q1 2018 is targetted for StageGL support.\n\t\t\tFollow @CreateJS on Twitter for updates.\n\t\t`);\n\t}\n}\n\nexport default StageGL;\n","/**\n * @license Shadow\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * This class encapsulates the properties required to define a shadow to apply to a {@link easeljs.DisplayObject}\n * via its `shadow` property.\n *\n * @memberof easeljs\n * @example\n * img.shadow = new Shadow(\"#000000\", 5, 5, 10);\n *\n * @param {String} [color=black] The color of the shadow. This can be any valid CSS color value.\n * @param {Number} [offsetX=0] The x offset of the shadow in pixels.\n * @param {Number} [offsetY=0] The y offset of the shadow in pixels.\n * @param {Number} [blur=0] The size of the blurring effect.\n */\nexport default class Shadow {\n\n\tconstructor (color = \"black\", offsetX = 0, offsetY = 0, blur = 0) {\n\t\t/**\n\t\t * The color of the shadow. This can be any valid CSS color value.\n\t\t * @type {String}\n\t\t * @default black\n\t\t */\n\t\tthis.color = color;\n\n\t\t/**\n\t\t * The x offset of the shadow.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offsetX = offsetX;\n\n\t\t/**\n\t\t * The y offset of the shadow.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offsetY = offsetY;\n\n\t\t/**\n\t\t * The blur of the shadow.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.blur = blur;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String}\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * Returns a clone of this Shadow instance.\n\t * @return {Shadow} A clone of the current Shadow instance.\n\t */\n\tclone () {\n\t\treturn new Shadow(this.color, this.offsetX, this.offsetY, this.blur);\n\t}\n\n}\n\n/**\n * An identity shadow object (all properties are set to 0).\n * @type {easeljs.Shadow}\n * @static\n * @readonly\n */\nShadow.identity = new Shadow(\"transparent\");\n","/**\n * @license uid\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/** @ignore */\nlet _nextId = 0;\n\n/**\n * Global utility for generating sequential unique ID numbers.\n *\n * @memberof easeljs\n * @name easeljs.uid\n * @example\n * import { uid } from \"@createjs/easeljs\";\n * var ids = [];\n * while (ids.length <= 3) {\n * ids.push(uid());\n * }\n * // ids == [0, 1, 2, 3]\n */\nexport default function uid () {\n\treturn _nextId++;\n}\n","/**\n * @license Point\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Represents a point on a 2 dimensional x / y coordinate system.\n *\n * @memberof easeljs\n * @example\n * let point = new Point(0, 100);\n *\n * @param {Number} [x] X position.\n * @param {Number} [y] Y position.\n */\nexport default class Point {\n\n\tconstructor (x, y) {\n\t\tthis.setValues(x, y);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * X position.\n\t\t * @property x\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Y position.\n\t\t * @property y\n\t\t * @type {Number}\n\t\t */\n\t}\n\n\t/**\n\t * Sets the specified values on this instance.\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @return {easeljs.Point} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (x = 0, y = 0) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Copies all properties from the specified point to this point.\n\t * @param {easeljs.Point} point The point to copy properties from.\n\t * @return {easeljs.Point} This point. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tcopy (point) {\n\t\tthis.x = point.x;\n\t\tthis.y = point.y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of the Point instance.\n\t * @return {easeljs.Point} a clone of the Point instance.\n\t */\n\tclone () {\n\t\treturn new Point(this.x, this.y);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (x=${this.x} y=${this.y})]`;\n\t}\n\n}\n","/**\n * @license Matrix2D\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Point from \"./Point\";\n\n/**\n * Represents an affine transformation matrix, and provides tools for constructing and concatenating matrices.\n *\n * \n * This matrix can be visualized as:\n *\n * \t[ a c tx\n * \t b d ty\n * \t 0 0 1 ]\n *\n * Note the locations of b and c.\n *
\n *\n * @param {Number} [a] Specifies the a property for the new matrix.\n * @param {Number} [b] Specifies the b property for the new matrix.\n * @param {Number} [c] Specifies the c property for the new matrix.\n * @param {Number} [d] Specifies the d property for the new matrix.\n * @param {Number} [tx] Specifies the tx property for the new matrix.\n * @param {Number} [ty] Specifies the ty property for the new matrix.\n */\nexport default class Matrix2D {\n\n\tconstructor (a, b, c, d, tx, ty) {\n\t\tthis.setValues(a, b, c, d, tx, ty);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * Position (0, 0) in a 3x3 affine transformation matrix.\n\t\t * @property a\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (0, 1) in a 3x3 affine transformation matrix.\n\t\t * @property b\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (1, 0) in a 3x3 affine transformation matrix.\n\t\t * @property c\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (1, 1) in a 3x3 affine transformation matrix.\n\t\t * @property d\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (2, 0) in a 3x3 affine transformation matrix.\n\t\t * @property tx\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Position (2, 1) in a 3x3 affine transformation matrix.\n\t\t * @property ty\n\t\t * @type {Number}\n\t\t */\n\t}\n\n\t/**\n\t * Sets the specified values on this instance.\n\t * @param {Number} [a=1] Specifies the a property for the new matrix.\n\t * @param {Number} [b=0] Specifies the b property for the new matrix.\n\t * @param {Number} [c=0] Specifies the c property for the new matrix.\n\t * @param {Number} [d=1] Specifies the d property for the new matrix.\n\t * @param {Number} [tx=0] Specifies the tx property for the new matrix.\n\t * @param {Number} [ty=0] Specifies the ty property for the new matrix.\n\t * @return {Matrix2D} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) {\n\t\t// don't forget to update docs in the constructor if these change:\n\t\tthis.a = a;\n\t\tthis.b = b;\n\t\tthis.c = c;\n\t\tthis.d = d;\n\t\tthis.tx = tx;\n\t\tthis.ty = ty;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Appends the specified matrix properties to this matrix. All parameters are required.\n\t * This is the equivalent of multiplying `(this matrix) * (specified matrix)`.\n\t * @param {Number} a\n\t * @param {Number} b\n\t * @param {Number} c\n\t * @param {Number} d\n\t * @param {Number} tx\n\t * @param {Number} ty\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tappend (a, b, c, d, tx, ty) {\n\t\tlet a1 = this.a;\n\t\tlet b1 = this.b;\n\t\tlet c1 = this.c;\n\t\tlet d1 = this.d;\n\t\tif (a != 1 || b != 0 || c != 0 || d != 1) {\n\t\t\tthis.a = a1*a+c1*b;\n\t\t\tthis.b = b1*a+d1*b;\n\t\t\tthis.c = a1*c+c1*d;\n\t\t\tthis.d = b1*c+d1*d;\n\t\t}\n\t\tthis.tx = a1*tx+c1*ty+this.tx;\n\t\tthis.ty = b1*tx+d1*ty+this.ty;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Prepends the specified matrix properties to this matrix.\n\t * This is the equivalent of multiplying `(specified matrix) * (this matrix)`.\n\t * @param {Number} a\n\t * @param {Number} b\n\t * @param {Number} c\n\t * @param {Number} d\n\t * @param {Number} tx\n\t * @param {Number} ty\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tprepend (a, b, c, d, tx, ty) {\n\t\tlet a1 = this.a;\n\t\tlet c1 = this.c;\n\t\tlet tx1 = this.tx;\n\n\t\tthis.a = a*a1+c*this.b;\n\t\tthis.b = b*a1+d*this.b;\n\t\tthis.c = a*c1+c*this.d;\n\t\tthis.d = b*c1+d*this.d;\n\t\tthis.tx = a*tx1+c*this.ty+tx;\n\t\tthis.ty = b*tx1+d*this.ty+ty;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Appends the specified matrix to this matrix.\n\t * This is the equivalent of multiplying `(this matrix) * (specified matrix)`.\n\t * @param {easeljs.Matrix2D} matrix\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tappendMatrix (matrix) {\n\t\treturn this.append(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t}\n\n\t/**\n\t * Prepends the specified matrix to this matrix.\n\t * This is the equivalent of multiplying `(specified matrix) * (this matrix)`.\n\t *\n\t * @example Calculate the combined transformation for a child object \n\t * let o = displayObject;\n\t * let mtx = o.getMatrix();\n\t * while (o = o.parent) {\n\t * \t // prepend each parent's transformation in turn:\n\t * \t o.prependMatrix(o.getMatrix());\n\t * }\n\t *\n\t * @param {easeljs.Matrix2D} matrix\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tprependMatrix (matrix) {\n\t\treturn this.prepend(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t}\n\n\t/**\n\t * Generates matrix properties from the specified display object transform properties, and appends them to this matrix.\n\t *\n\t * @example Generate a matrix representing the transformations of a display object \n\t * let mtx = new Matrix2D();\n\t * mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation);\n\t *\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} scaleX\n\t * @param {Number} scaleY\n\t * @param {Number} rotation\n\t * @param {Number} skewX\n\t * @param {Number} skewY\n\t * @param {Number} [regX]\n\t * @param {Number} [regY]\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tappendTransform (x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tlet r, cos, sin;\n\t\tif (rotation%360) {\n\t\t\tr = rotation*Matrix2D.DEG_TO_RAD;\n\t\t\tcos = Math.cos(r);\n\t\t\tsin = Math.sin(r);\n\t\t} else {\n\t\t\tcos = 1;\n\t\t\tsin = 0;\n\t\t}\n\n\t\tif (skewX || skewY) {\n\t\t\t// TODO: can this be combined into a single append operation?\n\t\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\t\tthis.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);\n\t\t\tthis.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);\n\t\t} else {\n\t\t\tthis.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);\n\t\t}\n\n\t\tif (regX || regY) {\n\t\t\t// append the registration offset:\n\t\t\tthis.tx -= regX*this.a+regY*this.c;\n\t\t\tthis.ty -= regX*this.b+regY*this.d;\n\t\t}\n\t\treturn this;\n\t}\n\n\t/**\n\t * Generates matrix properties from the specified display object transform properties, and prepends them to this matrix.\n\t *\n\t * Note that the above example would not account for {@link easeljs.DisplayObject#transformMatrix} values.\n\t * See {@link easeljs.Matrix2D#prependMatrix} for an example that does.\n\t *\n\t * @example Calculate the combined transformation for a child object \n\t * let o = displayObject;\n\t * let mtx = new Matrix2D();\n\t * do {\n\t * \t // prepend each parent's transformation in turn:\n\t * \t mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);\n\t * } while (o = o.parent);\n\t *\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} scaleX\n\t * @param {Number} scaleY\n\t * @param {Number} rotation\n\t * @param {Number} skewX\n\t * @param {Number} skewY\n\t * @param {Number} [regX]\n\t * @param {Number} [regY]\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t */\n\tprependTransform (x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tlet r, cos, sin;\n\t\tif (rotation%360) {\n\t\t\tr = rotation*Matrix2D.DEG_TO_RAD;\n\t\t\tcos = Math.cos(r);\n\t\t\tsin = Math.sin(r);\n\t\t} else {\n\t\t\tcos = 1;\n\t\t\tsin = 0;\n\t\t}\n\n\t\tif (regX || regY) {\n\t\t\t// prepend the registration offset:\n\t\t\tthis.tx -= regX; this.ty -= regY;\n\t\t}\n\t\tif (skewX || skewY) {\n\t\t\t// TODO: can this be combined into a single prepend operation?\n\t\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\t\tthis.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);\n\t\t\tthis.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);\n\t\t} else {\n\t\t\tthis.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);\n\t\t}\n\t\treturn this;\n\t}\n\n\t/**\n\t * Applies a clockwise rotation transformation to the matrix.\n\t * @param {Number} angle The angle to rotate by, in degrees. To use a value in radians, multiply it by `Math.PI/180`.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\trotate (angle) {\n\t\tangle *= Matrix2D.DEG_TO_RAD;\n\t\tlet cos = Math.cos(angle);\n\t\tlet sin = Math.sin(angle);\n\n\t\tlet a1 = this.a;\n\t\tlet b1 = this.b;\n\n\t\tthis.a = a1*cos+this.c*sin;\n\t\tthis.b = b1*cos+this.d*sin;\n\t\tthis.c = -a1*sin+this.c*cos;\n\t\tthis.d = -b1*sin+this.d*cos;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Applies a skew transformation to the matrix.\n\t * @param {Number} skewX The amount to skew horizontally in degrees. To use a value in radians, multiply it by `Math.PI/180`.\n\t * @param {Number} skewY The amount to skew vertically in degrees.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tskew (skewX, skewY) {\n\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\tthis.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), 0, 0);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Applies a scale transformation to the matrix.\n\t * @param {Number} x The amount to scale horizontally. E.G. a value of 2 will double the size in the X direction, and 0.5 will halve it.\n\t * @param {Number} y The amount to scale vertically.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tscale (x, y) {\n\t\tthis.a *= x;\n\t\tthis.b *= x;\n\t\tthis.c *= y;\n\t\tthis.d *= y;\n\t\t//this.tx *= x;\n\t\t//this.ty *= y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Translates the matrix on the x and y axes.\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\ttranslate (x, y) {\n\t\tthis.tx += this.a*x + this.c*y;\n\t\tthis.ty += this.b*x + this.d*y;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets the properties of the matrix to those of an identity matrix (one that applies a null transformation).\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tidentity () {\n\t\tthis.a = this.d = 1;\n\t\tthis.b = this.c = this.tx = this.ty = 0;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Inverts the matrix, causing it to perform the opposite transformation.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t */\n\tinvert () {\n\t\tlet a1 = this.a;\n\t\tlet b1 = this.b;\n\t\tlet c1 = this.c;\n\t\tlet d1 = this.d;\n\t\tlet tx1 = this.tx;\n\t\tlet n = a1*d1-b1*c1;\n\n\t\tthis.a = d1/n;\n\t\tthis.b = -b1/n;\n\t\tthis.c = -c1/n;\n\t\tthis.d = a1/n;\n\t\tthis.tx = (c1*this.ty-d1*tx1)/n;\n\t\tthis.ty = -(a1*this.ty-b1*tx1)/n;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns true if the matrix is an identity matrix.\n\t * @return {Boolean}\n\t */\n\tisIdentity () {\n\t\treturn this.tx === 0 && this.ty === 0 && this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1;\n\t}\n\n\t/**\n\t * Returns true if this matrix is equal to the specified matrix (all property values are equal).\n\t * @param {easeljs.Matrix2D} matrix The matrix to compare.\n\t * @return {Boolean}\n\t */\n\tequals (matrix) {\n\t\treturn this.tx === matrix.tx && this.ty === matrix.ty && this.a === matrix.a && this.b === matrix.b && this.c === matrix.c && this.d === matrix.d;\n\t}\n\n\t/**\n\t * Transforms a point according to this matrix.\n\t * @param {Number} x The x component of the point to transform.\n\t * @param {Number} y The y component of the point to transform.\n\t * @param {easeljs.Point | Object} [pt] An object to copy the result into. If omitted a generic object with x/y properties will be returned.\n\t * @return {easeljs.Point} This matrix. Useful for chaining method calls.\n\t */\n\ttransformPoint (x, y, pt = new Point()) {\n\t\tpt.x = x*this.a+y*this.c+this.tx;\n\t\tpt.y = x*this.b+y*this.d+this.ty;\n\t\treturn pt;\n\t}\n\n\t/**\n\t * Decomposes the matrix into transform properties (x, y, scaleX, scaleY, and rotation). Note that these values\n\t * may not match the transform properties you used to generate the matrix, though they will produce the same visual\n\t * results.\n\t * @param {Object} [target] The object to apply the transform properties to. If null, then a new object will be returned.\n\t * @return {Object} The target, or a new generic object with the transform properties applied.\n\t*/\n\tdecompose (target = {}) {\n\t\t// TODO: it would be nice to be able to solve for whether the matrix can be decomposed into only scale/rotation even when scale is negative\n\t\ttarget.x = this.tx;\n\t\ttarget.y = this.ty;\n\t\ttarget.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);\n\t\ttarget.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);\n\n\t\tlet skewX = Math.atan2(-this.c, this.d);\n\t\tlet skewY = Math.atan2(this.b, this.a);\n\n\t\tlet delta = Math.abs(1-skewX/skewY);\n\t\tif (delta < 0.00001) { // effectively identical, can use rotation:\n\t\t\ttarget.rotation = skewY/Matrix2D.DEG_TO_RAD;\n\t\t\tif (this.a < 0 && this.d >= 0) {\n\t\t\t\ttarget.rotation += (target.rotation <= 0) ? 180 : -180;\n\t\t\t}\n\t\t\ttarget.skewX = target.skewY = 0;\n\t\t} else {\n\t\t\ttarget.skewX = skewX/Matrix2D.DEG_TO_RAD;\n\t\t\ttarget.skewY = skewY/Matrix2D.DEG_TO_RAD;\n\t\t}\n\t\treturn target;\n\t}\n\n\t/**\n\t * Copies all properties from the specified matrix to this matrix.\n\t * @param {easeljs.Matrix2D} matrix The matrix to copy properties from.\n\t * @return {easeljs.Matrix2D} This matrix. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tcopy (matrix) {\n\t\treturn this.setValues(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t}\n\n\t/**\n\t * Returns a clone of the Matrix2D instance.\n\t * @return {easeljs.Matrix2D} a clone of the Matrix2D instance.\n\t */\n\tclone () {\n\t\treturn new Matrix2D(this.a, this.b, this.c, this.d, this.tx, this.ty);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (a=${this.a} b=${this.b} c=${this.c} d=${this.d} tx=${this.tx} ty=${this.ty})]`;\n\t}\n\n}\n\n/**\n * Multiplier for converting degrees to radians. Used internally by Matrix2D.\n * @static\n * @type {Number}\n * @readonly\n */\nMatrix2D.DEG_TO_RAD = Math.PI/180;\n/**\n * An identity matrix, representing a null transformation.\n * @static\n * @type {easeljs.Matrix2D}\n * @readonly\n */\nMatrix2D.identity = new Matrix2D();\n","/**\n * @license DisplayProps\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Matrix2D from \"./Matrix2D\";\n\n/**\n * Used for calculating and encapsulating display related properties.\n * @memberof easeljs\n * @param {Number} [visible] Visible value.\n * @param {Number} [alpha] Alpha value.\n * @param {Number} [shadow] A Shadow instance or null.\n * @param {Number} [compositeOperation] A compositeOperation value or null.\n * @param {Number} [matrix] A transformation matrix. Defaults to a new identity matrix.\n */\nexport default class DisplayProps {\n\n\tconstructor (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.setValues(visible, alpha, shadow, compositeOperation, matrix);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * Property representing the alpha that will be applied to a display object.\n\t\t * @property alpha\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Property representing the shadow that will be applied to a display object.\n\t\t * @property shadow\n\t\t * @type {easeljs.Shadow}\n\t\t */\n\n\t\t/**\n\t\t * Property representing the compositeOperation that will be applied to a display object.\n\t\t * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing}\n\t\t * @property compositeOperation\n\t\t * @type {String}\n\t\t */\n\n\t\t/**\n\t\t * Property representing the value for visible that will be applied to a display object.\n\t\t * @property visible\n\t\t * @type {Boolean}\n\t\t */\n\n\t\t/**\n\t\t * The transformation matrix that will be applied to a display object.\n\t\t * @property matrix\n\t\t * @type {easeljs.Matrix2D}\n\t\t */\n\t}\n\n\t/**\n\t * Reinitializes the instance with the specified values.\n\t * @param {Number} [visible=true] Visible value.\n\t * @param {Number} [alpha=1] Alpha value.\n\t * @param {Number} [shadow] A Shadow instance or null.\n\t * @param {Number} [compositeOperation] A compositeOperation value or null.\n\t * @param {Number} [matrix] A transformation matrix. Defaults to an identity matrix.\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (visible = true, alpha = 1, shadow, compositeOperation, matrix) {\n\t\tthis.visible = visible;\n\t\tthis.alpha = alpha;\n\t\tthis.shadow = shadow;\n\t\tthis.compositeOperation = compositeOperation;\n\t\tthis.matrix = matrix || (this.matrix&&this.matrix.identity()) || new Matrix2D();\n\t\treturn this;\n\t}\n\n\t/**\n\t * Appends the specified display properties. This is generally used to apply a child's properties its parent's.\n\t * @param {Boolean} visible desired visible value\n\t * @param {Number} alpha desired alpha value\n\t * @param {easeljs.Shadow} shadow desired shadow value\n\t * @param {String} compositeOperation desired composite operation value\n\t * @param {easeljs.Matrix2D} [matrix] a Matrix2D instance\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tappend (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.alpha *= alpha;\n\t\tthis.shadow = shadow || this.shadow;\n\t\tthis.compositeOperation = compositeOperation || this.compositeOperation;\n\t\tthis.visible = this.visible && visible;\n\t\tmatrix&&this.matrix.appendMatrix(matrix);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Prepends the specified display properties. This is generally used to apply a parent's properties to a child's.\n\t * For example, to get the combined display properties that would be applied to a child, you could use:\n\t *\n\t * @example\n\t * let o = displayObject;\n\t * let props = new DisplayProps();\n\t * do {\n\t * \t // prepend each parent's props in turn:\n\t * \t props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation, o.getMatrix());\n\t * } while (o = o.parent);\n\t *\n\t * @param {Boolean} visible desired visible value\n\t * @param {Number} alpha desired alpha value\n\t * @param {easeljs.Shadow} shadow desired shadow value\n\t * @param {String} compositeOperation desired composite operation value\n\t * @param {easeljs.Matrix2D} [matrix] a Matrix2D instance\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tprepend (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.alpha *= alpha;\n\t\tthis.shadow = this.shadow || shadow;\n\t\tthis.compositeOperation = this.compositeOperation || compositeOperation;\n\t\tthis.visible = this.visible && visible;\n\t\tmatrix&&this.matrix.prependMatrix(matrix);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Resets this instance and its matrix to default values.\n\t * @return {easeljs.DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tidentity () {\n\t\tthis.visible = true;\n\t\tthis.alpha = 1;\n\t\tthis.shadow = this.compositeOperation = null;\n\t\tthis.matrix.identity();\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of the DisplayProps instance. Clones the associated matrix.\n\t * @return {easeljs.DisplayProps} a clone of the DisplayProps instance.\n\t */\n\tclone () {\n\t\treturn new DisplayProps(this.alpha, this.shadow, this.compositeOperation, this.visible, this.matrix.clone());\n\t}\n\n}\n","/**\n * @license Rectangle\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Represents a rectangle as defined by the points (x, y) and (x+width, y+height).\n * Used by {@link easeljs.DisplayObjects#getBounds}.\n *\n * @memberof easeljs\n * @example\n * let rect = new Rectangle(0, 0, 100, 100);\n *\n * @param {Number} [x] X position.\n * @param {Number} [y] Y position.\n * @param {Number} [width] The width of the Rectangle.\n * @param {Number} [height] The height of the Rectangle.\n */\nexport default class Rectangle {\n\n\tconstructor (x, y, width, height) {\n\t\tthis.setValues(x, y, width, height);\n\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * X position.\n\t\t * @property x\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Y position.\n\t\t * @property y\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Width.\n\t\t * @property width\n\t\t * @type {Number}\n\t\t */\n\n\t\t/**\n\t\t * Height.\n\t\t * @property height\n\t\t * @type {Number}\n\t\t */\n\t}\n\n\t/**\n\t * Sets the specified values on this instance.\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @param {Number} [width=0] The width of the Rectangle.\n\t * @param {Number} [height=0] The height of the Rectangle.\n\t * @return {easeljs.Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tsetValues (x = 0, y = 0, width = 0, height = 0) {\n\t\t// don't forget to update docs in the constructor if these change:\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.width = width;\n\t\tthis.height = height;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Extends the rectangle's bounds to include the described point or rectangle.\n\t * @param {Number} x X position of the point or rectangle.\n\t * @param {Number} y Y position of the point or rectangle.\n\t * @param {Number} [width=0] The width of the rectangle.\n\t * @param {Number} [height=0] The height of the rectangle.\n\t * @return {easeljs.Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\textend (x, y, width = 0, height = 0) {\n\t\tif (x+width > this.x+this.width) { this.width = x+width-this.x; }\n\t\tif (y+height > this.y+this.height) { this.height = y+height-this.y; }\n\t\tif (x < this.x) { this.width += this.x-x; this.x = x; }\n\t\tif (y < this.y) { this.height += this.y-y; this.y = y; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Adds the specified padding to the rectangle's bounds.\n\t * @param {Number} top\n\t * @param {Number} left\n\t * @param {Number} bottom\n\t * @param {Number} right\n\t * @return {easeljs.Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tpad (top, left, bottom, right) {\n\t\tthis.x -= left;\n\t\tthis.y -= top;\n\t\tthis.width += left+right;\n\t\tthis.height += top+bottom;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Copies all properties from the specified rectangle to this rectangle.\n\t * @param {easeljs.Rectangle} rectangle The rectangle to copy properties from.\n\t * @return {easeljs.Rectangle} This rectangle. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tcopy (rect) {\n\t\treturn this.setValues(rect.x, rect.y, rect.width, rect.height);\n\t}\n\n\t/**\n\t * Returns true if this rectangle fully encloses the described point or rectangle.\n\t * @param {Number} x X position of the point or rectangle.\n\t * @param {Number} y Y position of the point or rectangle.\n\t * @param {Number} [width=0] The width of the rectangle.\n\t * @param {Number} [height=0] The height of the rectangle.\n\t * @return {Boolean} True if the described point or rectangle is contained within this rectangle.\n\t*/\n\tcontains (x, y, width = 0, height = 0) {\n\t\treturn (x >= this.x && x+width <= this.x+this.width && y >= this.y && y+height <= this.y+this.height);\n\t}\n\n\t/**\n\t * Returns a new rectangle which contains this rectangle and the specified rectangle.\n\t * @param {easeljs.Rectangle} rect The rectangle to calculate a union with.\n\t * @return {easeljs.Rectangle} A new rectangle describing the union.\n\t*/\n\tunion (rect) {\n\t\treturn this.clone().extend(rect.x, rect.y, rect.width, rect.height);\n\t}\n\n\t/**\n\t * Returns a new rectangle which describes the intersection (overlap) of this rectangle and the specified rectangle,\n\t * or null if they do not intersect.\n\t * @param {easeljs.Rectangle} rect The rectangle to calculate an intersection with.\n\t * @return {easeljs.Rectangle} A new rectangle describing the intersection or null.\n\t*/\n\tintersection (rect) {\n\t\tlet x1 = rect.x, y1 = rect.y, x2 = x1+rect.width, y2 = y1+rect.height;\n\t\tif (this.x > x1) { x1 = this.x; }\n\t\tif (this.y > y1) { y1 = this.y; }\n\t\tif (this.x + this.width < x2) { x2 = this.x + this.width; }\n\t\tif (this.y + this.height < y2) { y2 = this.y + this.height; }\n\t\treturn (x2 <= x1 || y2 <= y1) ? null : new Rectangle(x1, y1, x2-x1, y2-y1);\n\t}\n\n\t/**\n\t * Returns true if the specified rectangle intersects (has any overlap) with this rectangle.\n\t * @param {easeljs.Rectangle} rect The rectangle to compare.\n\t * @return {Boolean} True if the rectangles intersect.\n\t*/\n\tintersects (rect) {\n\t\treturn (rect.x <= this.x+this.width && this.x <= rect.x+rect.width && rect.y <= this.y+this.height && this.y <= rect.y + rect.height);\n\t}\n\n\t/**\n\t * Returns true if the width or height are equal or less than 0.\n\t * @return {Boolean} True if the rectangle is empty.\n\t*/\n\tisEmpty () {\n\t\treturn this.width <= 0 || this.height <= 0;\n\t}\n\n\t/**\n\t * Returns a clone of the Rectangle instance.\n\t * @return {easeljs.Rectangle} a clone of the Rectangle instance.\n\t */\n\tclone () {\n\t\treturn new Rectangle(this.x, this.y, this.width, this.height);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (x=${this.x} y=${this.y} width=${this.width} height=${this.height})]`;\n\t}\n\n}\n","/**\n * @license Filter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using\n * the {@link easeljs.DisplayObject#cache} method. If an object changes, please cache it again, or use\n * {@link easeljs.DisplayObject#updateCache}. Note that the filters must be applied before caching.\n *\n * Note that each filter can implement a {@link easeljs.Filter#getBounds} method, which returns the\n * margins that need to be applied in order to fully display the filter. For example, the {@link easeljs.BlurFilter}\n * will cause an object to feather outwards, resulting in a margin around the shape.\n *\n * EaselJS Filters
\n * EaselJS comes with a number of pre-built filters:\n * \n * - {@link easeljs.AlphaMapFilter}: Map a greyscale image to the alpha channel of a display object
\n * - {@link easeljs.AlphaMaskFilter}: Map an image's alpha channel to the alpha channel of a display object
\n * - {@link easeljs.BlurFilter}: Apply vertical and horizontal blur to a display object
\n * - {@link easeljs.ColorFilter}: Color transform a display object
\n * - {@link easeljs.ColorMatrixFilter}: Transform an image using a {{#crossLink \"ColorMatrix\"}}{{/crossLink}}
\n *
\n *\n * @memberof easeljs\n * @example\n * shape.filters = [\n * new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),\n * new createjs.BlurFilter(5, 5, 10)\n * ];\n * shape.cache(0, 0, 100, 100);\n */\nexport default class Filter {\n\n\tconstructor () {\n\t\t/**\n\t\t * A flag stating that this filter uses a context draw mode and cannot be batched into imageData processing.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.usesContext = false;\n\n\t\t/**\n\t\t * Another filter that is required to act as part of this filter and created and managed under the hood.\n\t\t * @private\n\t\t * @type {easeljs.Filter}\n\t\t * @default null\n\t\t */\n\t\tthis._multiPass = null;\n\n\t\t/**\n\t\t * Pre-processing shader code, will be parsed before being fed in.\n\t\t * This should be based upon StageGL.SHADER_VERTEX_BODY_REGULAR\n\t\t * @virtual\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.VTX_SHADER_BODY = null;\n\n\t\t/**\n\t\t * Pre-processing shader code, will be parsed before being fed in.\n\t\t * This should be based upon StageGL.SHADER_FRAGMENT_BODY_REGULAR\n\t\t * @virtual\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.FRAG_SHADER_BODY = null;\n\t}\n\n\t/**\n\t * Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.\n\t * @abstract\n\t * @param {easeljs.Rectangle} [rect] If specified, the provided Rectangle instance will be expanded by the padding amounts and returned.\n\t * @return {easeljs.Rectangle} If a `rect` param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.\n\t */\n\tgetBounds (rect) { }\n\n\t/**\n\t * @virtual\n\t * @abstract\n\t * @param {WebGLContext} gl The context associated with the stage performing the render.\n\t * @param {easeljs.StageGL} stage The stage instance that will be rendering.\n\t * @param {ShaderProgram} shaderProgram The compiled shader that is going to be sued to perform the render.\n\t */\n\tshaderParamSetup (gl, stage, shaderProgram) { }\n\n\t/**\n\t * Applies the filter to the specified context.\n\t * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.\n\t * @param {Number} x The x position to use for the source rect.\n\t * @param {Number} y The y position to use for the source rect.\n\t * @param {Number} width The width to use for the source rect.\n\t * @param {Number} height The height to use for the source rect.\n\t * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx.\n\t * @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x.\n\t * @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y.\n\t * @return {Boolean} If the filter was applied successfully.\n\t */\n\tapplyFilter (ctx, x, y, width, height, targetCtx, targetX, targetY) {\n\t\t// this is the default behaviour because most filters access pixel data. It is overridden when not needed.\n\t\ttargetCtx = targetCtx || ctx;\n\t\tif (targetX == null) { targetX = x; }\n\t\tif (targetY == null) { targetY = y; }\n\t\ttry {\n\t\t\tlet imageData = ctx.getImageData(x, y, width, height);\n\t\t\tif (this._applyFilter(imageData)) {\n\t\t\t\ttargetCtx.putImageData(imageData, targetX, targetY);\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} catch (e) {}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * Returns a clone of this Filter instance.\n\t * @return {easeljs.Filter} A clone of the current Filter instance.\n\t */\n\tclone () {\n\t\treturn new Filter();\n\t}\n\n\t/**\n\t * @abstract\n\t * @param {ImageData} imageData Target ImageData instance.\n\t * @return {Boolean}\n\t */\n\t_applyFilter (imageData) { }\n\n}\n","/**\n * @license BitmapCache\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\nimport Rectangle from \"../geom/Rectangle\";\nimport StageGL from \"../display/StageGL\";\n\n/**\n * The BitmapCache is an internal representation of all the cache properties and logic required in order to \"cache\"\n * an object. This information and functionality used to be located on a {@link easeljs.DisplayObject#cache}\n * method in {@link easeljs.DisplayObject}, but was moved to its own class.\n *\n * Caching in this context is purely visual, and will render the DisplayObject out into an image to be used instead\n * of the object. The actual cache itself is still stored on the target with the {@link easeljs.DisplayObject#cacheCanvas}.\n *\n * Working with a singular image like a {@link easeljs.Bitmap}, there is little benefit to performing\n * a cache operation, as it is already a single image. Caching is best done on containers that have multiple complex\n * parts that do not change often, so that rendering the image will improve overall rendering speed. A cached object\n * will not visually update until explicitly told to do so with a call to {@link easeljs.Stage#update},\n * much like a Stage. If a cache is being updated every frame, it is likely not improving rendering performance.\n * Caches are best used when updates will be sparse.\n *\n * Caching is also a co-requisite for applying filters to prevent expensive filters running constantly without need.\n * The BitmapCache is also responsible for applying filters to objects, and reads each {@link easeljs.Filter}.\n * Real-time Filters are not recommended when dealing with a Context2D canvas if performance is a concern. For best\n * performance and to still allow for some visual effects, use a {{#crossLink \"DisplayObject/compositeOperation:property\"}}{{/crossLink}}\n * when possible.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n */\nexport default class BitmapCache extends Filter {\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t/**\n\t\t * Width of the cache relative to the target object.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.width = undefined;\n\n\t\t/**\n\t\t * Height of the cache relative to the target object.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.height = undefined;\n\n\t\t/**\n\t\t * Horizontal position of the cache relative to the target's origin.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.x = undefined;\n\n\t\t/**\n\t\t * Vertical position of the cache relative to target's origin.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t */\n\t\tthis.y = undefined;\n\n\t\t/**\n\t\t * The internal scale of the cache image, does not affects display size. This is useful to both increase and\n\t\t * decrease render quality. Objects with increased scales are more likely to look good when scaled up. Objects\n\t\t * with decreased scales can save on rendering performance.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scale = 1;\n\n\t\t/**\n\t\t * The relative offset of the {@link easeljs.BitmapCache#x} position, used for drawing\n\t\t * into the cache with the correct offsets. Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offX = 0;\n\n\t\t/**\n\t\t * The relative offset of the {@link easeljs.BitmapCache#y} position, used for drawing\n\t\t * into the cache with the correct offsets. Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.offY = 0;\n\n\t\t/**\n\t\t * Track how many times the cache has been updated, mostly used for preventing duplicate cacheURLs. This can be\n\t\t * useful to see if a cache has been updated.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.cacheID = 0;\n\n\t\t/**\n\t\t * Relative offset of the x position, used for drawing the cache into other scenes.\n\t\t * Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @todo Is this description right? Its the same as offX.\n\t\t */\n\t\tthis._filterOffX = 0;\n\n\t\t/**\n\t\t * Relative offset of the y position, used for drawing into the cache into other scenes.\n\t\t * Re-calculated every update call before drawing.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @todo Is this description right? Its the same as offY.\n\t\t */\n\t\tthis._filterOffY = 0;\n\n\t\t/**\n\t\t * The cacheID when a DataURL was requested.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._cacheDataURLID = 0;\n\n\t\t/**\n\t\t * The cache's DataURL, generated on-demand using the getter.\n\t\t * @protected\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis._cacheDataURL = null;\n\n\t\t/**\n\t\t * Internal tracking of final bounding width, approximately `width*scale;` however, filters can complicate the actual value.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._drawWidth = 0;\n\n\t\t/**\n\t\t * Internal tracking of final bounding height, approximately `height*scale;` however, filters can complicate the actual value.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._drawHeight = 0;\n\n\t\t/**\n\t\t * Internal tracking of the last requested bounds, may happen repeadtedly so stored to avoid object creation.\n\t\t * @protected\n\t\t * @type {easeljs.Rectangle}\n\t\t * @default easeljs.Rectangle\n\t\t */\n\t\tthis._boundRect = new Rectangle();\n\n\t}\n\n\t/**\n\t * Returns the bounds that surround all applied filters. This relies on each filter to describe how it changes bounds.\n\t * @param {easeljs.DisplayObject} target The object to check the filter bounds for.\n\t * @param {easeljs.Rectangle} [output] Calculated bounds will be applied to this rect.\n\t * @return {easeljs.Rectangle}\n\t * @static\n\t */\n\tstatic getFilterBounds (target, output = new Rectangle()) {\n\t\tlet filters = target.filters;\n\t\tlet filterCount = filters && filters.length;\n\t\tif (!!filterCount <= 0) { return output; }\n\n\t\tfor (let i=0; i= 1 ? width : 1;\n\t\tthis.height = height >= 1 ? height : 1;\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.scale = scale;\n\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Directly called via {@link easeljs.DisplayObject#updateCache}, but also internally. This\n\t * has the dual responsibility of making sure the surface is ready to be drawn to, and performing the draw. For\n\t * full details of each behaviour, check the protected functions {@link easeljs.BitmapCache#_updateSurface}\n\t * and {@link easeljs.BitmapCache#_drawToCache} respectively.\n\t * @param {String} [compositeOperation] The DisplayObject this cache is linked to.\n\t */\n\tupdate (compositeOperation) {\n\t\tif (!this.target) { throw \"define() must be called before update()\"; }\n\n\t\tlet filterBounds = BitmapCache.getFilterBounds(this.target);\n\t\tlet surface = this.target.cacheCanvas;\n\n\t\tthis._drawWidth = Math.ceil(this.width*this.scale) + filterBounds.width;\n\t\tthis._drawHeight = Math.ceil(this.height*this.scale) + filterBounds.height;\n\n\t\tif (!surface || this._drawWidth != surface.width || this._drawHeight != surface.height) {\n\t\t\tthis._updateSurface();\n\t\t}\n\n\t\tthis._filterOffX = filterBounds.x;\n\t\tthis._filterOffY = filterBounds.y;\n\t\tthis.offX = this.x*this.scale + this._filterOffX;\n\t\tthis.offY = this.y*this.scale + this._filterOffY;\n\n\t\tthis._drawToCache(compositeOperation);\n\n\t\tthis.cacheID = this.cacheID?this.cacheID+1:1;\n\t}\n\n\t/**\n\t * Reset and release all the properties and memory associated with this cache.\n\t */\n\trelease () {\n\t\tlet stage = this.target.stage;\n\t\tif (this._useWebGL && this._webGLCache) {\n\t\t\t// if it isn't cache controlled clean up after yourself\n\t\t\tif (!this._webGLCache.isCacheControlled) {\n\t\t\t\tif (this.__lastRT) { this.__lastRT = undefined; }\n\t\t\t\tif (this.__rtA) { this._webGLCache._killTextureObject(this.__rtA); }\n\t\t\t\tif (this.__rtB) { this._webGLCache._killTextureObject(this.__rtB); }\n\t\t\t\tif (this.target && this.target.cacheCanvas) { this._webGLCache._killTextureObject(this.target.cacheCanvas); }\n\t\t\t}\n\t\t\t// set the context to none and let the garbage collector get the rest when the canvas itself gets removed\n\t\t\tthis._webGLCache = false;\n\t\t} else if (stage instanceof StageGL) {\n\t\t\tstage.releaseTexture(this.target.cacheCanvas);\n\t\t}\n\t\tthis.target = this.target.cacheCanvas = null;\n\t\tthis.cacheID = this._cacheDataURLID = this._cacheDataURL = undefined;\n\t\tthis.width = this.height = this.x = this.y = this.offX = this.offY = 0;\n\t\tthis.scale = 1;\n\t}\n\n\t/**\n\t * Returns a data URL for the cache, or `null` if this display object is not cached.\n\t * Uses {@link easeljs.BitmapCache#cacheID} to ensure a new data URL is not generated if the\n\t * cache has not changed.\n\t * @return {String} The image data url for the cache.\n\t */\n\tgetCacheDataURL () {\n\t\tlet cacheCanvas = this.target && this.target.cacheCanvas;\n\t\tif (!cacheCanvas) { return null; }\n\t\tif (this.cacheID != this._cacheDataURLID) {\n\t\t\tthis._cacheDataURLID = this.cacheID;\n\t\t\tthis._cacheDataURL = cacheCanvas.toDataURL?cacheCanvas.toDataURL():null;\t// incase function is\n\t\t}\n\t\treturn this._cacheDataURL;\n\t}\n\n\t/**\n\t * Use context2D drawing commands to display the cache canvas being used.\n\t * @param {CanvasRenderingContext2D} ctx The context to draw into.\n\t * @return {Boolean} Whether the draw was handled successfully.\n\t */\n\tdraw (ctx) {\n\t\tif (!this.target) { return false; }\n\t\tctx.drawImage(\n\t\t\tthis.target.cacheCanvas,\n\t\t\tthis.x + (this._filterOffX/this.scale),\n\t\t\tthis.y + (this._filterOffY/this.scale),\n\t\t\tthis._drawWidth/this.scale,\n\t\t\tthis._drawHeight/this.scale\n\t\t);\n\t\treturn true;\n\t}\n\n\t/**\n\t * Determine the bounds of the shape in local space.\n\t * @returns {easeljs.Rectangle}\n\t */\n\tgetBounds () {\n\t\tconst scale = this.scale;\n\t\treturn this._boundRect.setValue(\n\t\t\tthis._filterOffX/scale,\n\t\t\tthis._filterOffY/scale,\n\t\t\tthis.width/scale,\n\t\t\tthis.height/scale\n\t\t);\n\t}\n\n\t/**\n\t * Basic context2D caching works by creating a new canvas element and setting its physical size. This function will\n\t * create and or size the canvas as needed.\n\t * @protected\n\t */\n\t_updateSurface () {\n\t\tlet surface;\n\t\tif (!this._useWebGL) {\n\t\t\tsurface = this.target.cacheCanvas;\n\t\t\t// create it if it's missing\n\t\t\tif (!surface) {\n\t\t\t\tsurface = this.target.cacheCanvas = window.createjs&&createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\t}\n\t\t\t// now size it\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t\t// skip the webgl-only updates\n\t\t\treturn;\n\t\t}\n\n\t\t// create it if it's missing\n\t\tif (!this._webGLCache) {\n\t\t\tif (this._options.useGL === \"stage\") {\n\t\t\t\tif(!(this.target.stage != null && this.target.stage.isWebGL)) {\n\t\t\t\t\tthrow `Cannot use 'stage' for cache because the object's parent stage is ${this.target.stage != null ? \"non WebGL.\" : \"not set, please addChild to the correct stage.\"}`;\n\t\t\t\t}\n\t\t\t\tthis.target.cacheCanvas = true; // will be replaced with RenderTexture, temporary positive value for old \"isCached\" checks\n\t\t\t\tthis._webGLCache = this.target.stage;\n\t\t\t} else if (this._options.useGL === \"new\") {\n\t\t\t\tthis.target.cacheCanvas = document.createElement(\"canvas\"); // we can turn off autopurge because we wont be making textures here\n\t\t\t\tthis._webGLCache = new StageGL(this.target.cacheCanvas, {antialias: true, transparent: true, autoPurge: -1});\n\t\t\t\tthis._webGLCache.isCacheControlled = true; // use this flag to control stage sizing and final output\n\t\t\t} else {\n\t\t\t\tthrow \"Invalid option provided to useGL, expected ['stage', 'new', StageGL, undefined], got \"+ this._options.useGL;\n\t\t\t}\n\t\t}\n\n\t\t// now size render surfaces\n\t\tlet stageGL = this._webGLCache;\n\t\tsurface = this.target.cacheCanvas;\n\n\t\t// if we have a dedicated stage we've gotta size it\n\t\tif (stageGL.isCacheControlled) {\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t\tstageGL.updateViewport(this._drawWidth, this._drawHeight);\n\t\t}\n\t\tif (this.target.filters) {\n\t\t\t// with filters we can't tell how many we'll need but the most we'll ever need is two, so make them now\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t} else if (!stageGL.isCacheControlled) {\n\t\t\t// without filters then we only need one RenderTexture, and that's only if its not a dedicated stage\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t}\n\t}\n\n\t/**\n\t * Perform the cache draw out for context 2D now that the setup properties have been performed.\n\t * @protected\n\t */\n\t_drawToCache (compositeOperation) {\n\t\tlet target = this.target;\n\t\tlet surface = target.cacheCanvas;\n\t\tlet webGL = this._webGLCache;\n\n\t\tif (!this._useWebGL || !webGL) {\n\t\t\tlet ctx = surface.getContext(\"2d\");\n\n\t\t\tif (!compositeOperation) {\n\t\t\t\tctx.clearRect(0, 0, this._drawWidth+1, this._drawHeight+1);\n\t\t\t}\n\n\t\t\tctx.save();\n\t\t\tctx.globalCompositeOperation = compositeOperation;\n\t\t\tctx.setTransform(this.scale,0,0,this.scale, -this._filterOffX,-this._filterOffY);\n\t\t\tctx.translate(-this.x, -this.y);\n\t\t\ttarget.draw(ctx, true);\n\t\t\tctx.restore();\n\n\t\t\tif (target.filters && target.filters.length) {\n\t\t\t\tthis._applyFilters(target);\n\t\t\t}\n\t\t\tsurface._invalid = true;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._webGLCache.cacheDraw(target, target.filters, this);\n\t\t// NOTE: we may of swapped around which element the surface is, so we re-fetch it\n\t\tsurface = this.target.cacheCanvas;\n\t\tsurface.width = this._drawWidth;\n\t\tsurface.height = this._drawHeight;\n\t\tsurface._invalid = true;\n\t}\n\n\t/**\n\t * Work through every filter and apply its individual transformation to it.\n\t * @protected\n\t */\n\t_applyFilters () {\n\t\tlet surface = this.target.cacheCanvas;\n\t\tlet filters = this.target.filters;\n\n\t\tlet w = this._drawWidth;\n\t\tlet h = this._drawHeight;\n\n\t\t// setup\n\t\tlet data = surface.getContext(\"2d\").getImageData(0,0, w,h);\n\n\t\t// apply\n\t\tlet l = filters.length;\n\t\tfor (let i=0; iWebGL cache with 2d context\n * let stage = new Stage();\n * let bmp = new Bitmap(src);\n * bmp.cache(0, 0, bmp.width, bmp.height, 1, true); // no StageGL to use, so make one\n * let shape = new Shape();\n * shape.graphics.clear().fill(\"red\").drawRect(0,0,20,20);\n * shape.cache(0, 0, 20, 20, 1); // cannot use WebGL cache\n *\n * @example WebGL cache with WebGL context \n * let stageGL = new StageGL();\n * let bmp = new Bitmap(src);\n * bmp.cache(0, 0, bmp.width, bmp.height, 1, stageGL); // use our StageGL to cache\n * let shape = new Shape();\n * shape.graphics.clear().fill(\"red\").drawRect(0,0,20,20);\n * shape.cache(0, 0, 20, 20, 1); // cannot use WebGL cache\n *\n * @param {Number} x The x coordinate origin for the cache region.\n * @param {Number} y The y coordinate origin for the cache region.\n * @param {Number} width The width of the cache region.\n * @param {Number} height The height of the cache region.\n * @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape using\n * \tmyShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate\n * \tcached elements with greater fidelity.\n * @param {Boolean | easeljs.StageGL} [options] Select whether to use context 2D, or WebGL rendering, and whether to make a new stage instance or use an existing one.\n */\n","/**\n * @license DisplayObject\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport { EventDispatcher } from \"@createjs/core\";\nimport Shadow from \"./Shadow\";\nimport uid from \"../utils/uid\";\nimport DisplayProps from \"../geom/DisplayProps\";\nimport Rectangle from \"../geom/Rectangle\";\nimport Point from \"../geom/Point\";\nimport Matrix2D from \"../geom/Matrix2D\";\nimport BitmapCache from \"../filters/BitmapCache\";\n\n/**\n * DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such as\n * {@link easeljs.Container}, {@link easeljs.Bitmap}, and {@link easeljs.Shape}.\n * DisplayObject is the base class for all display classes in the EaselJS library. It defines the core properties and\n * methods that are shared between all display objects, such as transformation properties (x, y, scaleX, scaleY, etc),\n * caching, and mouse handlers.\n *\n * @memberof easeljs\n * @extends EventDispatcher\n */\nexport default class DisplayObject extends EventDispatcher {\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t/**\n\t\t * The alpha (transparency) for this display object. 0 is fully transparent, 1 is fully opaque.\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.alpha = 1;\n\n\t\t/**\n\t\t * If a cache is active, this returns the canvas that holds the image of this display object.\n\t\t * Use this to display the result of a cache. This will be a HTMLCanvasElement unless special cache rules have been deliberately enabled for this cache.\n\t\t * @see {@link easeljs.DisplayObject#cache}\n\t\t * @type {HTMLCanvasElement | Object}\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.cacheCanvas = null;\n\n\t\t/**\n\t\t * If a cache has been made, this returns the class that is managing the cacheCanvas and its properties.\n\t\t * @see {@link easeljs.BitmapCache}\n\t\t * @type {easeljs.BitmapCache}\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.bitmapCache = null;\n\n\t\t/**\n\t\t * Unique ID for this display object. Makes display objects easier for some uses.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.id = uid();\n\n\t\t/**\n\t\t * Indicates whether to include this object when running mouse interactions. Setting this to `false` for children\n\t\t * of a {@link easeljs.Container} will cause events on the Container to not fire when that child is\n\t\t * clicked. Setting this property to `false` does not prevent the {@link easeljs.Container#getObjectsUnderPoint}\n\t\t * method from returning the child.\n\t\t *\n\t\t * Note: In EaselJS 0.7.0, the `mouseEnabled` property will not work properly with nested Containers.\n\t\t *\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.mouseEnabled = true;\n\n\t\t/**\n\t\t * If false, the tick will not run on this display object (or its children). This can provide some performance benefits.\n\t\t * In addition to preventing the {@link core.Ticker#event:tick} event from being dispatched, it will also prevent tick related updates\n\t\t * on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).\n\t\t * @type Boolean\n\t\t * @default true\n\t\t */\n\t\tthis.tickEnabled = true;\n\n\t\t/**\n\t\t * An optional name for this display object. Included in {@link easeljs.DisplayObject#toString}. Useful for debugging.\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.name = null;\n\n\t\t/**\n\t\t * A reference to the {@link easeljs.Container} or {@link easeljs.Stage} object that\n\t\t * contains this display object, or null if it has not been added to one.\n\t\t * @type {easeljs.Container}\n\t\t * @default null\n\t\t * @readonly\n\t\t */\n\t\tthis.parent = null;\n\n\t\t/**\n\t\t * The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate\n\t\t * around its center, you would set regX and {@link easeljs.DisplayObject#regY} to 50.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.regX = 0;\n\n\t\t/**\n\t\t * The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around\n\t\t * its center, you would set {@link easeljs.DisplayObject#regX} and regY to 50.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.regY = 0;\n\n\t\t/**\n\t\t * The rotation in degrees for this display object.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.rotation = 0;\n\n\t\t/**\n\t\t * The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display\n\t\t * object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scaleX = 1;\n\n\t\t/**\n\t\t * The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display\n\t\t * object to half its nominal height. To vertically flip an object, set the scale to a negative number.\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scaleY = 1;\n\n\t\t/**\n\t\t * The factor to skew this display object horizontally.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.skewX = 0;\n\n\t\t/**\n\t\t * The factor to skew this display object vertically.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.skewY = 0;\n\n\t\t/**\n\t\t * A shadow object that defines the shadow to render on this display object. Set to `null` to remove a shadow. If\n\t\t * null, this property is inherited from the parent container.\n\t\t * @type {easeljs.Shadow}\n\t\t * @default null\n\t\t */\n\t\tthis.shadow = null;\n\n\t\t/**\n\t\t * Indicates whether this display object should be rendered to the canvas and included when running the Stage\n\t\t * {@link easeljs.Stage#getObjectsUnderPoint} method.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.visible = true;\n\n\t\t/**\n\t\t * The x (horizontal) position of the display object, relative to its parent.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.x = 0;\n\n\t\t/**\n\t\t * The y (vertical) position of the display object, relative to its parent.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.y = 0;\n\n\t\t/**\n\t\t * If set, defines the transformation for this display object, overriding all other transformation properties\n\t\t * (x, y, rotation, scale, skew).\n\t\t * @type {easeljs.Matrix2D}\n\t\t * @default null\n\t\t */\n\t\tthis.transformMatrix = null;\n\n\t\t/**\n\t\t * The composite operation indicates how the pixels of this display object will be composited with the elements\n\t\t * behind it. If `null`, this property is inherited from the parent container.\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing \"WHATWG spec on compositing\"}\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.compositeOperation = null;\n\n\t\t/**\n\t\t * Indicates whether the display object should be drawn to a whole pixel when {@link easeljs.Stage#snapToPixelEnabled} is true.\n\t\t * To enable/disable snapping on whole categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.snapToPixel = true;\n\n\t\t/**\n\t\t * An array of Filter objects to apply to this display object. Filters are only applied / updated when {@link easeljs.DisplayObject#cache}\n\t\t * or {@link easeljs.DisplayObject#updateCache} is called on the display object, and only apply to the area that is cached.\n\t\t * @type {Array}\n\t\t * @default null\n\t\t */\n\t\tthis.filters = null;\n\n\t\t/**\n\t\t * A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation\n\t\t * will be applied relative to the display object's parent coordinates (as if it were a child of the parent).\n\t\t * @type {easeljs.Shape}\n\t\t * @default null\n\t\t */\n\t\tthis.mask = null;\n\n\t\t/**\n\t\t * A display object that will be tested when checking mouse interactions or testing {@link easeljs.Container#getObjectsUnderPoint}.\n\t\t * The hit area will have its transformation applied relative to this display object's coordinate space (as though\n\t\t * the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested\n\t\t * using only its own `alpha` value regardless of the alpha value on the target display object, or the target's\n\t\t * ancestors (parents).\n\t\t *\n\t\t * If set on a {@link easeljs.Container}, children of the Container will not receive mouse events.\n\t\t * This is similar to setting {@link easeljs.DisplayObject#mouseChildren} to false.\n\t\t *\n\t\t * Note that hitArea is NOT currently used by the `hitTest()` method, nor is it supported for {@link easeljs.Stage}.\n\t\t *\n\t\t * @type {easeljs.DisplayObject}\n\t\t * @default null\n\t\t */\n\t\tthis.hitArea = null;\n\n\t\t/**\n\t\t * A CSS cursor (ex. \"pointer\", \"help\", \"text\", etc) that will be displayed when the user hovers over this display\n\t\t * object. You must enable mouseover events using the {@link easeljs.Stage#enableMouseOver} method to\n\t\t * use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.\n\t\t *\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.cursor = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.DisplayProps}\n\t\t */\n\t\tthis._props = new DisplayProps();\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Rectangle}\n\t\t */\n\t\tthis._rectangle = new Rectangle();\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Rectangle}\n\t\t * @default null\n\t\t */\n\t\tthis._bounds = null;\n\n\t\t/**\n\t\t * Where StageGL should look for required display properties, matters only for leaf display objects. Containers\n\t\t * or cached objects won't use this property, it's for native display of terminal elements.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_NONE;\n\t}\n\n\t/**\n\t * Returns the {@link easeljs.Stage} instance that this display object will be rendered on, or null if it has not been added to one.\n\t * @type {Stage}\n\t * @readonly\n\t */\n\tget stage () {\n\t\t// uses dynamic access to avoid circular dependencies;\n\t\tlet o = this;\n\t\twhile (o.parent) { o = o.parent; }\n\t\tif (/^\\[Stage(GL)?(\\s\\(name=\\w+\\))?\\]$/.test(o.toString())) { return o; }\n\t\treturn null;\n\t}\n\n\t/**\n\t * Set both the {@link easeljs.DisplayObject#scaleX} and the {@link easeljs.DisplayObject#scaleY} property to the same value.\n\t * Note that when you get the value, if the `scaleX` and `scaleY` are different values, it will return only the `scaleX`.\n\t * @type {Number}\n\t * @default 1\n\t */\n\tset scale (value) { this.scaleX = this.scaleY = value; }\n\tget scale () { return this.scaleX; }\n\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t */\n\tisVisible () {\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);\n\t}\n\n\t/**\n\t * Alias for drawCache(). Used by grandchildren (or deeper) in their draw method to directly\n\t * call {@link easeljs.DisplayObject#drawCache}, bypassing their parent(s).\n\t *\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,\n\t * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean}\n\t */\n\tdraw (ctx, ignoreCache = false) {\n\t\treturn this.drawCache(ctx, ignoreCache);\n\t}\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns `true` if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,\n\t * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean}\n\t */\n\tdrawCache (ctx, ignoreCache = false) {\n\t\tlet cache = this.bitmapCache;\n\t\tif (cache && !ignoreCache) {\n\t\t\treturn cache.draw(ctx);\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow\n\t * to the specified context. This is typically called prior to {@link easeljs.DisplayObject#draw}.\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D to update.\n\t */\n\tupdateContext (ctx) {\n\t\tlet o=this, mask=o.mask, mtx=o._props.matrix;\n\n\t\tif (mask && mask.graphics && !mask.graphics.isEmpty()) {\n\t\t\tmask.getMatrix(mtx);\n\t\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);\n\n\t\t\tmask.graphics.drawAsPath(ctx);\n\t\t\tctx.clip();\n\n\t\t\tmtx.invert();\n\t\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);\n\t\t}\n\n\t\tthis.getMatrix(mtx);\n\t\tlet tx = mtx.tx, ty = mtx.ty;\n\t\tif (DisplayObject._snapToPixelEnabled && o.snapToPixel) {\n\t\t\ttx = tx + (tx < 0 ? -0.5 : 0.5) | 0;\n\t\t\tty = ty + (ty < 0 ? -0.5 : 0.5) | 0;\n\t\t}\n\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, tx, ty);\n\t\tctx.globalAlpha *= o.alpha;\n\t\tif (o.compositeOperation) { ctx.globalCompositeOperation = o.compositeOperation; }\n\t\tif (o.shadow) { this._applyShadow(ctx, o.shadow); }\n\t}\n\n\t/**\n\t * Draws the display object into a new element, which is then used for subsequent draws. Intended for complex content\n\t * that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape),\n\t * this can provide for much faster rendering because the content does not need to be re-rendered each tick. The\n\t * cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually\n\t * update the cache by calling `updateCache()` again. You must specify the cached area via the x, y, w,\n\t * and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.\n\t *\n\t * Note that filters need to be defined before the cache is applied or you will have to call updateCache after\n\t * application. Check out the {@link easeljs.Filter} class for more information. Some filters\n\t * (ex. {@link easeljs.BlurFilter}) may not work as expected in conjunction with the scale param.\n\t *\n\t * Usually, the resulting cacheCanvas will have the dimensions width*scale by height*scale, however some filters (ex. BlurFilter)\n\t * will add padding to the canvas dimensions.\n\t *\n\t * Actual implementation of the caching mechanism can change with a {@link easeljs.StageGL} and so\n\t * all caching and filter behaviour has been moved to the {@link easeljs.BitmapCache}\n\t *\n\t * @example\n\t * // If you defined a Shape that drew a circle at 0, 0 with a radius of 25:\n\t * var shape = new createjs.Shape();\n\t * shape.graphics.beginFill(\"#ff0000\").drawCircle(0, 0, 25);\n\t * shape.cache(-25, -25, 50, 50);\n\t *\n\t * @param {Number} x The x coordinate origin for the cache region.\n\t * @param {Number} y The y coordinate origin for the cache region.\n\t * @param {Number} width The width of the cache region.\n\t * @param {Number} height The height of the cache region.\n\t * @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape using\n\t * \tmyShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate\n\t * \tcached elements with greater fidelity. Default is 1.\n\t * @param {Object} [options] When using alternate displays there may be extra caching opportunities or needs.\n\t */\n\tcache (x, y, width, height, scale = 1, options) {\n\t\tif (!this.bitmapCache) {\n\t\t\tthis.bitmapCache = new BitmapCache();\n\t\t}\n\t\tthis.bitmapCache.define(this, x, y, width, height, scale, options);\n\t}\n\n\t/**\n\t * Redraws the display object to its cache. Calling updateCache without an active cache will throw an error.\n\t * If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object\n\t * will be drawn over the existing cache using the specified compositeOperation.\n\t *\n\t * Actual implementation of the caching mechanism can change with a {@link easeljs.StageGL} and so\n\t * all caching and filter behaviour has been moved to the {@link easeljs.BitmapCache}\n\t *\n\t * @example\n\t * // clear current graphics\n\t * shapeInstance.clear();\n\t * // draw new instructions\n\t * shapeInstance.setStrokeStyle(3).beginStroke(\"#FF0000\").moveTo(100, 100).lineTo(200,200);\n\t * // update cache, drawing new line on top of old one\n\t * shapeInstance.updateCache();\n\t *\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing \"WHATWG spec on compositing\"}\n\t * @param {String} compositeOperation The compositeOperation to use, or null to clear the cache and redraw it.\n\t */\n\tupdateCache (compositeOperation) {\n\t\tif (!this.bitmapCache) {\n\t\t\tthrow \"No cache found. cache() must be called before updateCache()\";\n\t\t}\n\t\tthis.bitmapCache.update(compositeOperation);\n\t}\n\n\t/**\n\t * Clears the current cache.\n\t * @see {@link easeljs.DisplayObject.#cache}\n\t */\n\tuncache () {\n\t\tif (this.bitmapCache) {\n\t\t\tthis.bitmapCache.release();\n\t\t\tthis.bitmapCache = undefined;\n\t\t}\n\t}\n\n\t/**\n\t * Returns a data URL for the cache, or null if this display object is not cached.\n\t * Only generated if the cache has changed, otherwise returns last result.\n\t * @return {String} The image data url for the cache.\n\t */\n\tgetCacheDataURL () {\n\t\treturn this.bitmapCache ? this.bitmapCache.getDataURL() : null;\n\t}\n\n\t/**\n\t * Transforms the specified x and y position from the coordinate space of the display object\n\t * to the global (stage) coordinate space. For example, this could be used to position an HTML label\n\t * over a specific point on a nested display object. Returns a Point instance with x and y properties\n\t * correlating to the transformed coordinates on the stage.\n\t *\n\t * @example\n\t * displayObject.x = 300;\n\t * displayObject.y = 200;\n\t * stage.addChild(displayObject);\n\t * let point = displayObject.localToGlobal(100, 100);\n\t * // Results in x=400, y=300\n\t *\n\t * @param {Number} x The x position in the source display object to transform.\n\t * @param {Number} y The y position in the source display object to transform.\n\t * @param {easeljs.Point | Object} [pt=Point] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.\n\t * @return {easeljs.Point} A Point instance with x and y properties correlating to the transformed coordinates\n\t * on the stage.\n\t */\n\tlocalToGlobal (x, y, pt = new Point()) {\n\t\treturn this.getConcatenatedMatrix(this._props.matrix).transformPoint(x, y, pt);\n\t}\n\n\t/**\n\t * Transforms the specified x and y position from the global (stage) coordinate space to the\n\t * coordinate space of the display object. For example, this could be used to determine\n\t * the current mouse position within the display object. Returns a Point instance with x and y properties\n\t * correlating to the transformed position in the display object's coordinate space.\n\t *\n\t * @example\n\t * displayObject.x = 300;\n\t * displayObject.y = 200;\n\t * stage.addChild(displayObject);\n\t * let point = displayObject.globalToLocal(100, 100);\n\t * // Results in x=-200, y=-100\n\t *\n\t * @param {Number} x The x position on the stage to transform.\n\t * @param {Number} y The y position on the stage to transform.\n\t * @param {easeljs.Point | Object} [pt=Point] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.\n\t * @return {easeljs.Point} A Point instance with x and y properties correlating to the transformed position in the\n\t * display object's coordinate space.\n\t */\n\tglobalToLocal (x, y, pt = new Point()) {\n\t\treturn this.getConcatenatedMatrix(this._props.matrix).invert().transformPoint(x, y, pt);\n\t}\n\n\t/**\n\t * Transforms the specified x and y position from the coordinate space of this display object to the coordinate\n\t * space of the target display object. Returns a Point instance with x and y properties correlating to the\n\t * transformed position in the target's coordinate space. Effectively the same as using the following code with\n\t * {@link easeljs.DisplayObject#localToGlobal} and {@link easeljs.DisplayObject#globalToLocal}.\n\t *\n\t * @example\n\t * // long way\n\t * let pt = this.localToGlobal(x, y);\n\t * pt = target.globalToLocal(pt.x, pt.y);\n\t * // shorthand\n\t * let pt = this.localToLocal(x, y, target);\n\t *\n\t * @param {Number} x The x position in the source display object to transform.\n\t * @param {Number} y The y position on the source display object to transform.\n\t * @param {easeljs.DisplayObject} target The target display object to which the coordinates will be transformed.\n\t * @param {easeljs.Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.\n\t * @return {easeljs.Point} Returns a Point instance with x and y properties correlating to the transformed position\n\t * in the target's coordinate space.\n\t */\n\tlocalToLocal (x, y, target, pt) {\n\t\tpt = this.localToGlobal(x, y, pt);\n\t\treturn target.globalToLocal(pt.x, pt.y, pt);\n\t}\n\n\t/**\n\t * Shortcut method to quickly set the transform properties on the display object. All parameters are optional.\n\t * Omitted parameters will have the default value set.\n\t *\n\t * @example\n\t * displayObject.setTransform(100, 100, 2, 2);\n\t *\n\t * @param {Number} [x=0] The horizontal translation (x position) in pixels\n\t * @param {Number} [y=0] The vertical translation (y position) in pixels\n\t * @param {Number} [scaleX=1] The horizontal scale, as a percentage of 1\n\t * @param {Number} [scaleY=1] the vertical scale, as a percentage of 1\n\t * @param {Number} [rotation=0] The rotation, in degrees\n\t * @param {Number} [skewX=0] The horizontal skew factor\n\t * @param {Number} [skewY=0] The vertical skew factor\n\t * @param {Number} [regX=0] The horizontal registration point in pixels\n\t * @param {Number} [regY=0] The vertical registration point in pixels\n\t * @return {easeljs.DisplayObject} Returns this instance. Useful for chaining commands.\n\t*/\n\tsetTransform (x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, regX=0, regY=0) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.scaleX = scaleX;\n\t\tthis.scaleY = scaleY;\n\t\tthis.rotation = rotation;\n\t\tthis.skewX = skewX;\n\t\tthis.skewY = skewY;\n\t\tthis.regX = regX;\n\t\tthis.regY = regY;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a matrix based on this object's current transform.\n\t * @param {easeljs.Matrix2D} [matrix] A Matrix2D object to populate with the calculated values. If null, a new Matrix object is returned.\n\t * @return {easeljs.Matrix2D} A matrix representing this display object's transform.\n\t */\n\tgetMatrix (matrix) {\n\t\tlet o = this, mtx = matrix&&matrix.identity() || new Matrix2D();\n\t\treturn o.transformMatrix ? mtx.copy(o.transformMatrix) : mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);\n\t}\n\n\t/**\n\t * Generates a Matrix2D object representing the combined transform of the display object and all of its\n\t * parent Containers up to the highest level ancestor (usually the {@link easeljs.Stage}). This can\n\t * be used to transform positions between coordinate spaces, such as with {@link easeljs.DisplayObject#localToGlobal}\n\t * and {@link easeljs.DisplayObject#globalToLocal}.\n\t *\n\t * @param {easeljs.Matrix2D} [matrix] A Matrix2D object to populate with the calculated values. If null, a new Matrix2D object is returned.\n\t * @return {easeljs.Matrix2D} The combined matrix.\n\t */\n\tgetConcatenatedMatrix (matrix) {\n\t\tlet o = this, mtx = this.getMatrix(matrix);\n\t\twhile (o = o.parent) {\n\t\t\tmtx.prependMatrix(o.getMatrix(o._props.matrix));\n\t\t}\n\t\treturn mtx;\n\t}\n\n\t/**\n\t * Generates a DisplayProps object representing the combined display properties of the object and all of its\n\t * parent Containers up to the highest level ancestor (usually the {@link easeljs.Stage}).\n\t * @param {easeljs.DisplayProps} [props] A DisplayProps object to populate with the calculated values. If null, a new DisplayProps object is returned.\n\t * @return {easeljs.DisplayProps} The combined display properties.\n\t */\n\tgetConcatenatedDisplayProps (props) {\n\t\tprops = props ? props.identity() : new DisplayProps();\n\t\tlet o = this, mtx = o.getMatrix(props.matrix);\n\t\tdo {\n\t\t\tprops.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);\n\n\t\t\t// we do this to avoid problems with the matrix being used for both operations when o._props.matrix is passed in as the props param.\n\t\t\t// this could be simplified (ie. just done as part of the prepend above) if we switched to using a pool.\n\t\t\tif (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); }\n\t\t} while (o = o.parent);\n\t\treturn props;\n\t}\n\n\t/**\n\t * Tests whether the display object intersects the specified point in local coordinates (ie. draws a pixel with alpha > 0 at\n\t * the specified position). This ignores the alpha, shadow, hitArea, mask, and compositeOperation of the display object.\n\t *\n\t * Please note that shape-to-shape collision is not currently supported by EaselJS.\n\t *\n\t * @example\n\t * stage.addEventListener(\"stagemousedown\", event => {\n\t * let hit = shape.hitTest(event.stageX, event.stageY);\n\t * // hit == true when shape is clicked\n\t * });\n\t *\n\t * @param {Number} x The x position to check in the display object's local coordinates.\n\t * @param {Number} y The y position to check in the display object's local coordinates.\n\t * @return {Boolean} A Boolean indicating whether a visible portion of the DisplayObject intersect the specified\n\t * local Point.\n\t*/\n\thitTest (x, y) {\n\t\tlet ctx = DisplayObject._hitTestContext;\n\t\tctx.setTransform(1, 0, 0, 1, -x, -y);\n\t\tthis.draw(ctx);\n\n\t\tlet hit = this._testHit(ctx);\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, 2, 2);\n\t\treturn hit;\n\t}\n\n\t/**\n\t * Provides a chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t * @example\n\t * let graphics = new Graphics().beginFill(\"#ff0000\").drawCircle(0, 0, 25);\n\t * let shape = stage.addChild(new Shape()).set({ graphics, x: 100, y: 100, alpha: 0.5 });\n\t *\n\t * @param {Object} props A generic object containing properties to copy to the DisplayObject instance.\n\t * @return {easeljs.DisplayObject} Returns the instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t*/\n\tset (props) {\n\t\tfor (let n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation).\n\t * Objects that have been cached will return the bounds of the cache.\n\t *\n\t * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use\n\t * {@link easeljs.DisplayObject#setBounds} so that they are included when calculating Container bounds.\n\t *\n\t * \n\t * \tAll \n\t * \t\tAll display objects support setting bounds manually using setBounds(). Likewise, display objects that\n\t * \t\thave been cached using cache() will return the bounds of their cache. Manual and cache bounds will override\n\t * \t\tthe automatic calculations listed below.\n\t * \t Bitmap \n\t * \t\tReturns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).\n\t * \t Sprite \n\t * \t\tReturns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified\n\t * \t\tin the spritesheet data. See also {@link easeljs.SpriteSheet#getFrameBounds}\n\t * \t Container \n\t * \t\tReturns the aggregate (combined) bounds of all children that return a non-null value from getBounds().\n\t * \t Shape \n\t * \t\tDoes not currently support automatic bounds calculations. Use setBounds() to manually define bounds.\n\t * \t Text \n\t * \t\tReturns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are\n\t * \t\tnot, especially when using textBaseline values other than \"top\".\n\t * \t BitmapText \n\t * \t\tReturns approximate bounds. Values will be more accurate if spritesheet frame registration points are close\n\t * \t\tto (x=0,y=0).\n\t * \t
\n\t *\n\t * @example\n\t * /* Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and\n\t * are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the\n\t * bounds explicitly. *\\/\n\t * let bounds = obj.getBounds();\n\t * obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);\n\t * // getBounds will now use the set values, instead of recalculating\n\t *\n\t * @example\n\t * // To reduce memory impact, the returned Rectangle instance may be reused internally\n\t * let bounds = obj.getBounds().clone();\n\t * // OR:\n\t * rect.copy(obj.getBounds());\n\t *\n\t * @return {easeljs.Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.\n\t */\n\tgetBounds () {\n\t\tif (this._bounds) { return this._rectangle.copy(this._bounds); }\n\t\tlet cacheCanvas = this.cacheCanvas;\n\t\tif (cacheCanvas) {\n\t\t\tlet scale = this._cacheScale;\n\t\t\treturn this._rectangle.setValues(this._cacheOffsetX, this._cacheOffsetY, cacheCanvas.width/scale, cacheCanvas.height/scale);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied).\n\t * Objects that have been cached will return the transformed bounds of the cache.\n\t *\n\t * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use\n\t * {@link easeljs.DisplayObject#setBounds} so that they are included when calculating Container bounds.\n\t *\n\t * To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its\n\t * values if you need to retain it.\n\t *\n\t * Container instances calculate aggregate bounds for all children that return bounds via getBounds.\n\t * @return {easeljs.Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.\n\t */\n\tgetTransformedBounds () {\n\t\treturn this._getBounds();\n\t}\n\n\t/**\n\t * Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape &\n\t * Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always\n\t * override calculated bounds.\n\t *\n\t * The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance\n\t * with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).\n\t *\n\t * @param {Number} x The x origin of the bounds. Pass null to remove the manual bounds.\n\t * @param {Number} y The y origin of the bounds.\n\t * @param {Number} width The width of the bounds.\n\t * @param {Number} height The height of the bounds.\n\t */\n\tsetBounds (x, y, width, height) {\n\t\tif (x == null) { this._bounds = null; }\n\t\tthis._bounds = (this._bounds || new Rectangle()).setValues(x, y, width, height);\n\t}\n\n\t/**\n\t * Returns a clone of this DisplayObject. Some properties that are specific to this instance's current context are\n\t * reverted to their defaults (for example .parent). Caches are not maintained across clones, and some elements\n\t * are copied by reference (masks, individual filter instances, hit area)\n\t *\n\t * @return {easeljs.DisplayObject} A clone of the current DisplayObject instance.\n\t */\n\tclone () {\n\t\treturn this._cloneProps(new DisplayObject());\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}${this.name ? ` (name=${this.name})` : \"\"}]`;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.DisplayObject} o The DisplayObject instance which will have properties from the current DisplayObject\n\t * instance copied into.\n\t * @return {easeljs.DisplayObject} o\n\t */\n\t_cloneProps (o) {\n\t\to.alpha = this.alpha;\n\t\to.mouseEnabled = this.mouseEnabled;\n\t\to.tickEnabled = this.tickEnabled;\n\t\to.name = this.name;\n\t\to.regX = this.regX;\n\t\to.regY = this.regY;\n\t\to.rotation = this.rotation;\n\t\to.scaleX = this.scaleX;\n\t\to.scaleY = this.scaleY;\n\t\to.shadow = this.shadow;\n\t\to.skewX = this.skewX;\n\t\to.skewY = this.skewY;\n\t\to.visible = this.visible;\n\t\to.x = this.x;\n\t\to.y = this.y;\n\t\to.compositeOperation = this.compositeOperation;\n\t\to.snapToPixel = this.snapToPixel;\n\t\to.filters = this.filters==null?null:this.filters.slice(0);\n\t\to.mask = this.mask;\n\t\to.hitArea = this.hitArea;\n\t\to.cursor = this.cursor;\n\t\to._bounds = this._bounds;\n\t\treturn o;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {easeljs.Shadow} [shadow=Shadow]\n\t */\n\t_applyShadow (ctx, shadow = Shadow.identity) {\n\t\tshadow = shadow;\n\t\tctx.shadowColor = shadow.color;\n\t\tctx.shadowOffsetX = shadow.offsetX;\n\t\tctx.shadowOffsetY = shadow.offsetY;\n\t\tctx.shadowBlur = shadow.blur;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.\n\t */\n\t_tick (evtObj) {\n\t\t// because tick can be really performance sensitive, check for listeners before calling dispatchEvent.\n\t\tlet ls = this._listeners;\n\t\tif (ls && ls[\"tick\"]) {\n\t\t\t// reset & reuse the event object to avoid construction / GC costs:\n\t\t\tevtObj.target = null;\n\t\t\tevtObj.propagationStopped = evtObj.immediatePropagationStopped = false;\n\t\t\tthis.dispatchEvent(evtObj);\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @return {Boolean}\n\t */\n\t_testHit (ctx) {\n\t\ttry {\n\t\t\treturn ctx.getImageData(0, 0, 1, 1).data[3] > 1;\n\t\t} catch (e) {\n\t\t\tif (!DisplayObject.suppressCrossDomainErrors) {\n\t\t\t\tthrow \"An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.\";\n\t\t\t}\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform If true, does not apply this object's transform.\n\t * @return {easeljs.Rectangle}\n\t */\n\t_getBounds (matrix, ignoreTransform) {\n\t\treturn this._transformBounds(this.getBounds(), matrix, ignoreTransform);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.Rectangle} bounds\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform\n\t * @return {easeljs.Rectangle}\n\t */\n\t_transformBounds (bounds, matrix, ignoreTransform) {\n\t\tif (!bounds) { return bounds; }\n\t\tlet { x, y, width, height } = bounds;\n\t\tlet mtx = this._props.matrix;\n\t\tmtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);\n\n\t\tif (x || y) { mtx.appendTransform(0,0,1,1,0,0,0,-x,-y); } // TODO: simplify this.\n\t\tif (matrix) { mtx.prependMatrix(matrix); }\n\n\t\tlet x_a = width*mtx.a, x_b = width*mtx.b;\n\t\tlet y_c = height*mtx.c, y_d = height*mtx.d;\n\t\tlet tx = mtx.tx, ty = mtx.ty;\n\n\t\tlet minX = tx, maxX = tx, minY = ty, maxY = ty;\n\n\t\tif ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\t\tif ((x = x_a + y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\t\tif ((x = y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\n\t\tif ((y = x_b + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\t\tif ((y = x_b + y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\t\tif ((y = y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\n\t\treturn bounds.setValues(minX, minY, maxX-minX, maxY-minY);\n\t}\n\n\t/**\n\t * Indicates whether the display object has any mouse event listeners or a cursor.\n\t * @protected\n\t * @return {Boolean}\n\t */\n\t_hasMouseEventListener () {\n\t\tlet evts = DisplayObject._MOUSE_EVENTS;\n\t\tfor (let i=0, l=evts.length; i}\n * @readonly\n */\nDisplayObject._MOUSE_EVENTS = [\"click\",\"dblclick\",\"mousedown\",\"mouseout\",\"mouseover\",\"pressmove\",\"pressup\",\"rollout\",\"rollover\"];\n\n/**\n * Suppresses errors generated when using features like hitTest, mouse events, and {{#crossLink \"getObjectsUnderPoint\"}}{{/crossLink}}\n * with cross domain content.\n * @static\n * @type {Boolean}\n * @default false\n */\nDisplayObject.suppressCrossDomainErrors = false;\n\n/**\n * @static\n * @type {Boolean}\n * @default false\n */\nDisplayObject.snapToPixelEnabled = false;\n\n/**\n * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n * @static\n * @type {Number}\n */\nDisplayObject._StageGL_NONE = 0;\n\n/**\n * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n * @static\n * @type {Number}\n */\nDisplayObject._StageGL_SPRITE = 1;\n\n/**\n * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n * @static\n * @type {Number}\n */\nDisplayObject._StageGL_BITMAP = 2;\n\n/**\n * Dispatched when the user presses their left mouse button over the display object.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#mousedown\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user presses their left mouse button and then releases it while over the display object.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#click\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user double clicks their left mouse button over this display object.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#dblclick\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user's mouse enters this display object. This event must be enabled using\n * {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.DisplayObject#event:rollover}\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#mouseover\n * @since 0.6.0\n */\n\n/**\n * Dispatched when the user's mouse leaves this display object. This event must be enabled using\n * {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.DisplayObject#event:rollout}\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#mouseout\n * @since 0.6.0\n */\n\n/**\n * This event is similar to {@link easeljs.DisplayObject#event:mouseover}, with the following\n * differences: it does not bubble, and it considers {@link easeljs.Container} instances as an\n * aggregate of their content.\n *\n * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over\n * shapeA and then directly on to shapeB. With a listener for {@link easeljs.DisplayObject#event:mouseover} on\n * myContainer, two events would be received, each targeting a child element:\n * \n * - when the mouse enters shapeA (target=shapeA)
\n * - when the mouse enters shapeB (target=shapeB)
\n *
\n * However, with a listener for \"rollover\" instead, only a single event is received when the mouse first enters\n * the aggregate myContainer content (target=myContainer).\n *\n * This event must be enabled using {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#rollover\n * @since 0.7.0\n */\n\n/**\n * This event is similar to {@link easeljs.DisplayObject#event:mouseout}, with the following\n * differences: it does not bubble, and it considers {@link easeljs.Container} instances as an\n * aggregate of their content.\n *\n * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over\n * shapeA, then directly on to shapeB, then off both. With a listener for {@link easeljs.DisplayObject#event:mouseout}\n * on myContainer, two events would be received, each targeting a child element:\n * - when the mouse leaves shapeA (target=shapeA)
\n * - when the mouse leaves shapeB (target=shapeB)
\n *
\n * However, with a listener for \"rollout\" instead, only a single event is received when the mouse leaves\n * the aggregate myContainer content (target=myContainer).\n *\n * This event must be enabled using {@link easeljs.Stage#enableMouseOver}.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.DisplayObject#rollout\n * @since 0.7.0\n */\n\n/**\n * After a {@link easeljs.DisplayObject#event:mousedown} occurs on a display object, a pressmove\n * event will be generated on that object whenever the mouse moves until the mouse press is released. This can be\n * useful for dragging and similar operations.\n * @event easeljs.DisplayObject#pressmove\n * @since 0.7.0\n */\n\n/**\n * After a {@link easeljs.DisplayObject#event:mousedown} occurs on a display object, a pressup event\n * will be generated on that object when that mouse press is released. This can be useful for dragging and similar\n * operations.\n * @event easeljs.DisplayObject#pressup\n * @since 0.7.0\n */\n\n/**\n * Dispatched when the display object is added to a parent container.\n * @event easeljs.DisplayObject#added\n */\n\n/**\n * Dispatched when the display object is removed from its parent container.\n * @event easeljs.DisplayObject#removed\n */\n\n/**\n * Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the\n * rendering (draw) pass. When {@link easeljs.Stage#update} is called, first all display objects on\n * the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their\n * tick event dispatched in order of their depth prior to the event being dispatched on their parent.\n * @event easeljs.DisplayObject#tick\n * @param {Object} target The object that dispatched the event.\n * @param {String} type The event type.\n * @param {Array} params An array containing any arguments that were passed to the Stage.update() method.\n * @since 0.6.0\n */\n","/**\n * @license Container\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\n\n/**\n * A Container is a nestable display list that allows you to work with compound display elements. For example you could\n * group arm, leg, torso and head {{#crossLink \"Bitmap\"}}{{/crossLink}} instances together into a Person Container, and\n * transform them as a group, while still being able to move the individual parts relative to each other. Children of\n * containers have their `transform` and `alpha` properties concatenated with their parent\n * Container.\n *\n * For example, a {{#crossLink \"Shape\"}}{{/crossLink}} with x=100 and alpha=0.5, placed in a Container with `x=50`\n * and `alpha=0.7` will be rendered to the canvas at `x=150` and `alpha=0.35`.\n * Containers have some overhead, so you generally shouldn't create a Container to hold a single child.\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * import { Container } from \"@createjs/easeljs\";\n * const container = new Container();\n * container.addChild(bitmapInstance, shapeInstance);\n * container.x = 100;\n */\nexport default class Container extends DisplayObject {\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t/**\n\t\t * The array of children in the display list. You should usually use the child management methods such as\n\t\t * {@link easeljs.Container#addChild}, {@link easeljs.Container#removeChild}, {@link easeljs.Container#swapChildren},\n\t\t * etc, rather than accessing this directly, but it is included for advanced uses.\n\t\t * @type {Array}\n\t\t * @default []\n\t\t */\n\t\tthis.children = [];\n\n\t\t/**\n\t\t * Indicates whether the children of this container are independently enabled for mouse/pointer interaction.\n\t\t * If false, the children will be aggregated under the container - for example, a click on a child shape would\n\t\t * trigger a click event on the container.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.mouseChildren = true;\n\n\t\t/**\n\t\t * If false, the tick will not be propagated to children of this Container. This can provide some performance benefits.\n\t\t * In addition to preventing the {@link core.Ticker#event:tick} event from being dispatched, it will also prevent tick related updates\n\t\t * on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.tickChildren = true;\n\t}\n\n\t/**\n\t * Returns the number of children in the container.\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget numChildren () {\n\t\treturn this.children.length;\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || this.children.length;\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache = false) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\n\t\t// this ensures we don't have issues with display list changes that occur during a draw:\n\t\tlet list = this.children.slice();\n\t\tfor (let i=0,l=list.length; i 1) {\n\t\t\tfor (let i = 0; i < l; i++) { child = this.addChild(children[i]); }\n\t\t\treturn child;\n\t\t}\n // Note: a lot of duplication with addChildAt, but push is WAY faster than splice.\n let parent = child.parent, silent = parent === this;\n parent && parent._removeChildAt(parent.children.indexOf(child), silent);\n\t\tchild.parent = this;\n\t\tthis.children.push(child);\n if (!silent) { child.dispatchEvent(\"added\"); }\n\t\treturn child;\n\t}\n\n\t/**\n\t * Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and\n\t * setting its parent to this container.\n\t *\n\t * @example\n\t * container.addChildAt(child1, index);\n\t * // You can also add multiple children, such as:\n\t * container.addChildAt(child1, child2, ..., index);\n\t * // The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list, you could use:\n\t * container.addChildAt(myShape, container.getChildIndex(otherShape));\n\t * // This would also bump otherShape's index up by one. Fails silently if the index is out of range.\n\t *\n\t * @param {...easeljs.DisplayObject} children The display object(s) to add.\n\t * @param {Number} index The index to add the child at.\n\t * @return {easeljs.DisplayObject} Returns the last child that was added, or the last child if multiple children were added.\n\t */\n\taddChildAt (...children) {\n\t\tconst l = children.length;\n if (l === 0) { return null; }\n let index = children.pop();\n\t\tif (index < 0 || index > this.children.length) { return children[l - 2]; }\n\t\tif (l > 2) {\n\t\t\tfor (let i = 0; i < l - 1; i++) { this.addChildAt(children[i], index++); }\n\t\t\treturn children[l - 2];\n\t\t}\n\t\tlet child = children[0];\n let parent = child.parent, silent = parent === this;\n parent && parent._removeChildAt(parent.children.indexOf(child), silent);\n\t\tchild.parent = this;\n\t\tthis.children.splice(index++, 0, child);\n if (!silent) { child.dispatchEvent(\"added\"); }\n\t\treturn child;\n\t}\n\n\t/**\n\t * Removes the specified child from the display list. Note that it is faster to use removeChildAt() if the index is\n\t * already known.\n\t *\n\t * @example\n\t * container.removeChild(child);\n\t * // You can also remove multiple children:\n\t * container.removeChild(child1, child2, ...);\n\t *\n\t * @param {...easeljs.DisplayObject} children The display object(s) to remove.\n\t * @return {Boolean} true if the child (or children) was removed, or false if it was not in the display list.\n\t */\n\tremoveChild (...children) {\n\t\tconst l = children.length;\n if (l === 0) { return true; }\n\t\tif (l > 1) {\n\t\t\tlet good = true;\n\t\t\tfor (let i = 0; i < l; i++) { good = good && this.removeChild(children[i]); }\n\t\t\treturn good;\n\t\t}\n\t\treturn this._removeChildAt(this.children.indexOf(children[0]));\n\t}\n\n\t/**\n\t * Removes the child at the specified index from the display list, and sets its parent to null.\n\t *\n\t * @example\n\t * container.removeChildAt(2);\n\t * // You can also remove multiple children:\n\t * container.removeChildAt(2, 7, ...)\n\t *\n\t * @param {...Number} indexes The indexes of children to remove.\n\t * @return {Boolean} true if the child (or children) was removed, or false if any index was out of range.\n\t */\n\tremoveChildAt (...indexes) {\n\t\tconst l = indexes.length;\n if (l === 0) { return true; }\n\t\tif (l > 1) {\n\t\t\tindexes.sort((a, b) => b - a);\n\t\t\tlet good = true;\n\t\t\tfor (let i = 0; i < l; i++) { good = good && this._removeChildAt(indexes[i]); }\n\t\t\treturn good;\n\t\t}\n\t\treturn this._removeChildAt(indexes[0]);\n\t}\n\n\t/**\n\t * Removes all children from the display list.\n\t */\n\tremoveAllChildren () {\n\t\tlet kids = this.children;\n\t\twhile (kids.length) { this._removeChildAt(0); }\n\t}\n\n\t/**\n\t * Returns the child at the specified index.\n\t * @param {Number} index The index of the child to return.\n\t * @return {easeljs.DisplayObject} The child at the specified index. Returns null if there is no child at the index.\n\t */\n\tgetChildAt (index) {\n\t\treturn this.children[index];\n\t}\n\n\t/**\n\t * Returns the child with the specified name.\n\t * @param {String} name The name of the child to return.\n\t * @return {easeljs.DisplayObject} The child with the specified name.\n\t */\n\tgetChildByName (name) {\n\t\tlet kids = this.children;\n\t\tconst l = kids.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tif (kids[i].name === name) { return kids[i]; }\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * Performs an array sort operation on the child list.\n\t *\n\t * @example\n\t * // Display children with a higher y in front.\n\t * container.sortChildren((obj1, obj2, options) => {\n\t * \t if (obj1.y > obj2.y) { return 1; }\n\t * if (obj1.y < obj2.y) { return -1; }\n\t * return 0;\n\t * });\n\t *\n\t * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort}\n\t * @param {Function} sortFunction the function to use to sort the child list.\n\t */\n\tsortChildren (sortFunction) {\n\t\tthis.children.sort(sortFunction);\n\t}\n\n\t/**\n\t * Returns the index of the specified child in the display list, or -1 if it is not in the display list.\n\t * @param {easeljs.DisplayObject} child The child to return the index of.\n\t * @return {Number} The index of the specified child. -1 if the child is not found.\n\t */\n\tgetChildIndex (child) {\n\t\treturn this.children.indexOf(child);\n\t}\n\n\t/**\n\t * Swaps the children at the specified indexes. Fails silently if either index is out of range.\n\t * @param {Number} index1\n\t * @param {Number} index2\n\t */\n\tswapChildrenAt (index1, index2) {\n\t\tlet kids = this.children;\n\t\tlet o1 = kids[index1];\n\t\tlet o2 = kids[index2];\n\t\tif (!o1 || !o2) { return; }\n\t\tkids[index1] = o2;\n\t\tkids[index2] = o1;\n\t};\n\n\t/**\n\t * Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this\n\t * Container.\n\t * @param {easeljs.DisplayObject} child1\n\t * @param {easeljs.DisplayObject} child2\n\t */\n\tswapChildren (child1, child2) {\n\t\tlet kids = this.children;\n\t\tconst l = kids.length;\n\t\tlet index1,index2;\n\t\tfor (var i = 0; i < l; i++) {\n\t\t\tif (kids[i] === child1) { index1 = i; }\n\t\t\tif (kids[i] === child2) { index2 = i; }\n\t\t\tif (index1 != null && index2 != null) { break; }\n\t\t}\n\t\tif (i === l) { return; } // TODO: throw error?\n\t\tkids[index1] = child2;\n\t\tkids[index2] = child1;\n\t}\n\n\t/**\n\t * Changes the depth of the specified child. Fails silently if the child is not a child of this container, or the index is out of range.\n\t * @param {easeljs.DisplayObject} child\n\t * @param {Number} index\n\t */\n\tsetChildIndex (child, index) {\n\t\tlet kids = this.children;\n\t\tconst l = kids.length;\n\t\tif (child.parent != this || index < 0 || index >= l) { return; }\n\t\tfor (var i = 0; i < l; i++) {\n\t\t\tif (kids[i] === child) { break; }\n\t\t}\n\t\tif (i === l || i === index) { return; }\n\t\tkids.splice(i, 1);\n\t\tkids.splice(index, 0, child);\n\t}\n\n\t/**\n\t * Returns true if the specified display object either is this container or is a descendent (child, grandchild, etc)\n\t * of this container.\n\t * @param {easeljs.DisplayObject} child The DisplayObject to be checked.\n\t * @return {Boolean} true if the specified display object either is this container or is a descendent.\n\t */\n\tcontains (child) {\n\t\twhile (child) {\n\t\t\tif (child === this) { return true; }\n\t\t\tchild = child.parent;\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the\n\t * specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all\n\t * transform properties including regX/Y.\n\t * @param {Number} x The x position to check in the display object's local coordinates.\n\t * @param {Number} y The y position to check in the display object's local coordinates.\n\t * @return {Boolean} A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified\n\t * coordinates.\n\t */\n\thitTest (x, y) {\n\t\t// TODO: optimize to use the fast cache check where possible.\n\t\treturn this.getObjectUnderPoint(x, y) != null;\n\t}\n\n\t/**\n\t * Returns an array of all display objects under the specified coordinates that are in this container's display\n\t * list. This routine ignores any display objects with {@link easeljs.DisplayObject#mouseEnabled} set to `false`.\n\t * The array will be sorted in order of visual depth, with the top-most display object at index 0.\n\t * This uses shape based hit detection, and can be an expensive operation to run, so it is best to use it carefully.\n\t * For example, if testing for objects under the mouse, test on tick (instead of on {@link easeljs.DisplayObject#event:mousemove}),\n\t * and only if the mouse's position has changed.\n\t *\n\t * \n\t * - By default (mode=0) this method evaluates all display objects.
\n\t * - By setting the `mode` parameter to `1`, the {@link easeljs.DisplayObject#mouseEnabled}\n\t * and {@link easeljs.DisplayObject#mouseChildren} properties will be respected.
\n\t * - Setting the `mode` to `2` additionally excludes display objects that do not have active mouse event\n\t * listeners or a {@link easeljs.DisplayObject#cursor} property. That is, only objects\n\t * that would normally intercept mouse interaction will be included. This can significantly improve performance\n\t * in some cases by reducing the number of display objects that need to be tested.
\n\t *
\n\t *\n\t * This method accounts for both {@link easeljs.DisplayObject#hitArea} and {@link easeljs.DisplayObject#mask}.\n\t *\n\t * @param {Number} x The x position in the container to test.\n\t * @param {Number} y The y position in the container to test.\n\t * @param {Number} [mode=0] The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.\n\t * @return {Array} An array of DisplayObjects under the specified coordinates.\n\t */\n\tgetObjectsUnderPoint (x, y, mode = 0) {\n\t\tlet arr = [];\n\t\tlet pt = this.localToGlobal(x, y);\n\t\tthis._getObjectsUnderPoint(pt.x, pt.y, arr, mode > 0, mode === 1);\n\t\treturn arr;\n\t}\n\n\t/**\n\t * Similar to {@link easeljs.Container#getObjectsUnderPoint}, but returns only the top-most display\n\t * object. This runs significantly faster than `getObjectsUnderPoint()`, but is still potentially an expensive\n\t * operation.\n\t *\n\t * @param {Number} x The x position in the container to test.\n\t * @param {Number} y The y position in the container to test.\n\t * @param {Number} [mode=0] The mode to use to determine which display objects to include. 0-all, 1-respect mouseEnabled/mouseChildren, 2-only mouse opaque objects.\n\t * @return {easeljs.DisplayObject} The top-most display object under the specified coordinates.\n\t */\n\tgetObjectUnderPoint (x, y, mode = 0) {\n\t\tlet pt = this.localToGlobal(x, y);\n\t\treturn this._getObjectsUnderPoint(pt.x, pt.y, null, mode > 0, mode === 1);\n\t}\n\n\tgetBounds () {\n\t\treturn this._getBounds(null, true);\n\t}\n\n\tgetTransformedBounds () {\n\t\treturn this._getBounds();\n\t}\n\n\t/**\n\t * Returns a clone of this Container. Some properties that are specific to this instance's current context are\n\t * reverted to their defaults (for example `.parent`).\n\t * @param {Boolean} [recursive=false] If true, all of the descendants of this container will be cloned recursively. If false, the\n\t * properties of the container will be cloned, but the new instance will not have any children.\n\t * @return {easeljs.Container} A clone of the current Container instance.\n\t */\n\tclone (recursive = false) {\n\t\tlet o = this._cloneProps(new Container());\n\t\tif (recursive) { this._cloneChildren(o); }\n\t\treturn o;\n\t}\n\n\t_tick (evtObj) {\n\t\tif (this.tickChildren) {\n\t\t\tfor (let i = this.children.length - 1; i >= 0; i--) {\n\t\t\t\tlet child = this.children[i];\n\t\t\t\tif (child.tickEnabled && child._tick) { child._tick(evtObj); }\n\t\t\t}\n\t\t}\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * Recursively clones all children of this container, and adds them to the target container.\n\t * @protected\n\t * @param {easeljs.Container} o The target container.\n\t */\n\t_cloneChildren (o) {\n\t\tif (o.children.length) { o.removeAllChildren(); }\n\t\tlet arr = o.children;\n\t\tconst l = this.children.length;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tlet clone = this.children[i].clone(true);\n\t\t\tclone.parent = o;\n\t\t\tarr.push(clone);\n\t\t}\n\t}\n\n /**\n * Removes the child at the specified index from the display list, and sets its parent to null.\n * Used by `removeChildAt`, `addChild`, and `addChildAt`.\n *\n * @protected\n * @param {Number} index The index of the child to remove.\n * @param {Boolean} [silent=false] Prevents dispatch of `removed` event if true.\n * @return {Boolean} true if the child (or children) was removed, or false if any index was out of range.\n */\n _removeChildAt (index, silent = false) {\n\t\tif (index < 0 || index > this.children.length - 1) { return false; }\n\t\tlet child = this.children[index];\n\t\tif (child) { child.parent = null; }\n\t\tthis.children.splice(index, 1);\n\t\tif (!silent) { child.dispatchEvent(\"removed\"); }\n\t\treturn true;\n }\n\n\t/**\n\t * @protected\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Array} arr\n\t * @param {Boolean} mouse If true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and active listeners.\n\t * @param {Boolean} activeListener If true, there is an active mouse event listener on a parent object.\n\t * @param {Number} [currentDepth=0] Indicates the current depth of the search.\n\t * @return {easeljs.DisplayObject}\n\t */\n\t_getObjectsUnderPoint (x, y, arr, mouse, activeListener, currentDepth = 0) {\n\t\tif (!currentDepth && !this._testMask(this, x, y)) { return null; }\n\t\tlet mtx, ctx = DisplayObject._hitTestContext;\n\t\tactiveListener = activeListener || (mouse && this._hasMouseEventListener());\n\n\t\t// draw children one at a time, and check if we get a hit:\n\t\tlet children = this.children;\n\t\tconst l = children.length;\n\t\tfor (let i = l - 1; i >= 0; i--) {\n\t\t\tlet child = children[i];\n\t\t\tlet hitArea = child.hitArea;\n\t\t\tif (!child.visible || (!hitArea && !child.isVisible()) || (mouse && !child.mouseEnabled)) { continue; }\n\t\t\tif (!hitArea && !this._testMask(child, x, y)) { continue; }\n\n\t\t\t// if a child container has a hitArea then we only need to check its hitArea, so we can treat it as a normal DO:\n\t\t\tif (!hitArea && child instanceof Container) {\n\t\t\t\tlet result = child._getObjectsUnderPoint(x, y, arr, mouse, activeListener, currentDepth + 1);\n\t\t\t\tif (!arr && result) { return (mouse && !this.mouseChildren) ? this : result; }\n\t\t\t} else {\n\t\t\t\tif (mouse && !activeListener && !child._hasMouseEventListener()) { continue; }\n\n\t\t\t\t// TODO: can we pass displayProps forward, to avoid having to calculate this backwards every time? It's kind of a mixed bag. When we're only hunting for DOs with event listeners, it may not make sense.\n\t\t\t\tlet props = child.getConcatenatedDisplayProps(child._props);\n\t\t\t\tmtx = props.matrix;\n\n\t\t\t\tif (hitArea) {\n\t\t\t\t\tmtx.appendMatrix(hitArea.getMatrix(hitArea._props.matrix));\n\t\t\t\t\tprops.alpha = hitArea.alpha;\n\t\t\t\t}\n\n\t\t\t\tctx.globalAlpha = props.alpha;\n\t\t\t\tctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);\n\t\t\t\t(hitArea || child).draw(ctx);\n\t\t\t\tif (!this._testHit(ctx)) { continue; }\n\t\t\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\t\t\tctx.clearRect(0, 0, 2, 2);\n\t\t\t\tif (arr) { arr.push(child); }\n\t\t\t\telse { return (mouse && !this.mouseChildren) ? this : child; }\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.DisplayObject} target\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Boolean} Indicates whether the x/y is within the masked region.\n\t */\n\t_testMask (target, x, y) {\n\t\tlet mask = target.mask;\n\t\tif (!mask || !mask.graphics || mask.graphics.isEmpty()) { return true; }\n\n\t\tlet mtx = this._props.matrix, parent = target.parent;\n\t\tmtx = parent ? parent.getConcatenatedMatrix(mtx) : mtx.identity();\n\t\tmtx = mask.getMatrix(mask._props.matrix).prependMatrix(mtx);\n\n\t\tlet ctx = DisplayObject._hitTestContext;\n\t\tctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);\n\n\t\t// draw the mask as a solid fill:\n\t\tmask.graphics.drawAsPath(ctx);\n\t\tctx.fillStyle = \"#000\";\n\t\tctx.fill();\n\n\t\tif (!this._testHit(ctx)) { return false; }\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, 2, 2);\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform If true, does not apply this object's transform.\n\t * @return {easeljs.Rectangle}\n\t */\n\t_getBounds (matrix, ignoreTransform) {\n\t\tlet bounds = super.getBounds();\n\t\tif (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }\n\n\t\tlet mtx = this._props.matrix;\n\t\tmtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);\n\t\tif (matrix) { mtx.prependMatrix(matrix); }\n\n\t\tconst l = this.children.length;\n\t\tlet rect = null;\n\t\tfor (let i = 0; i < l; i++) {\n\t\t\tlet child = this.children[i];\n\t\t\tif (!child.visible || !(bounds = child._getBounds(mtx))) { continue; }\n\t\t\tif (rect) { rect.extend(bounds.x, bounds.y, bounds.width, bounds.height); }\n\t\t\telse { rect = bounds.clone(); }\n\t\t}\n\t\treturn rect;\n\t}\n\n}\n","/**\n * @license MouseEvent\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport { Event } from \"@createjs/core\";\n\n/**\n * Passed as the parameter to all mouse/pointer/touch related events. For a listing of mouse events and their properties,\n * see the {@link easeljs.DisplayObject} and {@link easeljs.Stage} event listings.\n * @memberof easeljs\n * @extends core.Event\n * @param {String} type The event type.\n * @param {Boolean} bubbles Indicates whether the event will bubble through the display list.\n * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled.\n * @param {Number} stageX The normalized x position relative to the stage.\n * @param {Number} stageY The normalized y position relative to the stage.\n * @param {easeljs.MouseEvent} nativeEvent The native DOM event related to this mouse event.\n * @param {Number} pointerID The unique id for the pointer.\n * @param {Boolean} primary Indicates whether this is the primary pointer in a multitouch environment.\n * @param {Number} rawX The raw x position relative to the stage.\n * @param {Number} rawY The raw y position relative to the stage.\n * @param {easeljs.DisplayObject} relatedTarget The secondary target for the event.\n */\nexport default class MouseEvent extends Event {\n\n\tconstructor (type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY, relatedTarget) {\n\t\tsuper(type, bubbles, cancelable);\n\n// public properties:\n\t\t/**\n\t\t * The normalized x position on the stage. This will always be within the range 0 to stage width.\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.stageX = stageX;\n\n\t\t/**\n\t\t * The normalized y position on the stage. This will always be within the range 0 to stage height.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.stageY = stageY;\n\n\t\t/**\n\t\t * The raw x position relative to the stage. Normally this will be the same as the stageX value, unless\n\t\t * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.rawX = (rawX==null)?stageX:rawX;\n\n\t\t/**\n\t\t * The raw y position relative to the stage. Normally this will be the same as the stageY value, unless\n\t\t * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.rawY = (rawY==null)?stageY:rawY;\n\n\t\t/**\n\t\t * The native MouseEvent generated by the browser. The properties and API for this\n\t\t * event may differ between browsers. This property will be null if the\n\t\t * EaselJS property was not directly generated from a native MouseEvent.\n\t\t * @type {HTMLMouseEvent}\n\t\t */\n\t\tthis.nativeEvent = nativeEvent;\n\n\t\t/**\n\t\t * The unique id for the pointer (touch point or cursor). This will be either -1 for the mouse, or the system\n\t\t * supplied id value.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.pointerID = pointerID;\n\n\t\t/**\n\t\t * Indicates whether this is the primary pointer in a multitouch environment. This will always be true for the mouse.\n\t\t * For touch pointers, the first pointer in the current stack will be considered the primary pointer.\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.primary = !!primary;\n\n\t\t/**\n\t\t * The secondary target for the event, if applicable. This is used for mouseout/rollout\n\t\t * events to indicate the object that the mouse entered from, mouseover/rollover for the object the mouse exited,\n\t\t * and stagemousedown/stagemouseup events for the object that was the under the cursor, if any.\n\t\t *\n\t\t * Only valid interaction targets will be returned (ie. objects with mouse listeners or a cursor set).\n\t\t * @type {easeljs.DisplayObject}\n\t\t */\n\t\tthis.relatedTarget = relatedTarget;\n\t}\n\n\t/**\n\t * Returns the x position of the mouse in the local coordinate system of the current target (ie. the dispatcher).\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget localX () {\n\t\treturn this.currentTarget.globalToLocal(this.rawX, this.rawY).x;\n\t}\n\n\t/**\n\t * Returns the y position of the mouse in the local coordinate system of the current target (ie. the dispatcher).\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget localY () {\n\t\treturn this.currentTarget.globalToLocal(this.rawX, this.rawY).y;\n\t}\n\n\t/**\n\t * Indicates whether the event was generated by a touch input (versus a mouse input).\n\t * @type {Boolean}\n\t * @readonly\n\t */\n\tget isTouch () {\n\t\treturn this.pointerID !== -1;\n\t}\n\n\t/**\n\t * Returns a clone of the MouseEvent instance.\n\t * @return {easeljs.MouseEvent} a clone of the MouseEvent instance.\n\t */\n\tclone () {\n\t\treturn new MouseEvent(this.type, this.bubbles, this.cancelable, this.stageX, this.stageY, this.nativeEvent, this.pointerID, this.primary, this.rawX, this.rawY);\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name} (type=${this.type} stageX=${this.stageX} stageY=${this.stageY})]`;\n\t}\n\n}\n","/**\n * @license Stage\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Container from \"./Container\";\nimport DisplayObject from \"./DisplayObject\";\nimport { Event } from \"@createjs/core\";\nimport MouseEvent from \"../events/MouseEvent\";\n\n/**\n * A stage is the root level {@link easeljs.Container} for a display list. Each time its {@link easeljs.Stage#tick}\n * method is called, it will render its display list to its target canvas.\n *\n * @memberof easeljs\n * @extends easeljs.Container\n * @example\n * let stage = new Stage(\"canvasElementId\");\n * let image = new Bitmap(\"imagePath.png\");\n * stage.addChild(image);\n * Ticker.addEventListener(\"tick\", event => {\n * image.x += 10;\n * \t stage.update();\n * });\n *\n * @param {HTMLCanvasElement | String | Object} canvas A canvas object that the Stage will render to, or the string id\n * of a canvas object in the current document.\n */\nexport default class Stage extends Container {\n\n\tconstructor (canvas) {\n\t\tsuper();\n\n\t\t/**\n\t\t * Indicates whether the stage should automatically clear the canvas before each render. You can set this to `false`\n\t\t * to manually control clearing (for generative art, or when pointing multiple stages at the same canvas for\n\t\t * example).\n\t\t *\n\t\t * @example\n\t\t * let stage = new Stage(\"canvasId\");\n\t\t * stage.autoClear = false;\n\t\t *\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.autoClear = true;\n\n\t\t/**\n\t\t * The canvas the stage will render to. Multiple stages can share a single canvas, but you must disable autoClear for all but the\n\t\t * first stage that will be ticked (or they will clear each other's render).\n\t\t *\n\t\t * When changing the canvas property you must disable the events on the old canvas, and enable events on the\n\t\t * new canvas or mouse events will not work as expected.\n\t\t *\n\t\t * @example\n\t\t * stage.enableDOMEvents(false);\n\t\t * stage.canvas = anotherCanvas;\n\t\t * stage.enableDOMEvents(true);\n\t\t *\n\t\t * @type {HTMLCanvasElement | Object}\n\t\t */\n\t\tthis.canvas = (typeof canvas === \"string\") ? document.getElementById(canvas) : canvas;\n\n\t\t/**\n\t\t * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent\n\t\t * position over the canvas, and mouseInBounds will be set to false.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.mouseX = 0;\n\n\t\t/**\n\t\t * The current mouse Y position on the canvas. If the mouse leaves the canvas, this will indicate the most recent\n\t\t * position over the canvas, and mouseInBounds will be set to false.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.mouseY = 0;\n\n\t\t/**\n\t\t * Specifies the area of the stage to affect when calling update. This can be use to selectively\n\t\t * re-draw specific regions of the canvas. If null, the whole canvas area is drawn.\n\t\t * @type {easeljs.Rectangle}\n\t\t */\n\t\tthis.drawRect = null;\n\n\t\t/**\n\t\t * Indicates whether display objects should be rendered on whole pixels. You can set the {@link easeljs.DisplayObject.snapToPixelEnabled}\n\t\t * property of display objects to false to enable/disable this behaviour on a per instance basis.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.snapToPixelEnabled = false;\n\n\t\t/**\n\t\t * Indicates whether the mouse is currently within the bounds of the canvas.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.mouseInBounds = false;\n\n\t\t/**\n\t\t * If true, tick callbacks will be called on all display objects on the stage prior to rendering to the canvas.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.tickOnUpdate = true;\n\n\t\t/**\n\t\t * If true, mouse move events will continue to be called when the mouse leaves the target canvas.\n\t\t * See {@link easeljs.Stage#mouseInBounds}, and {@link easeljs.MouseEvent} x/y/rawX/rawY.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.mouseMoveOutside = false;\n\n\n\t\t/**\n\t\t * Prevents selection of other elements in the html page if the user clicks and drags, or double clicks on the canvas.\n\t\t * This works by calling `preventDefault()` on any mousedown events (or touch equivalent) originating on the canvas.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.preventSelection = true;\n\n\t\t/**\n\t\t * The hitArea property is not supported for Stage.\n\t\t * @property hitArea\n\t\t * @override\n\t\t * @default null\n\t\t * @private\n\t\t */\n\n\t\t/**\n\t\t * Holds objects with data for each active pointer id. Each object has the following properties:\n\t\t * x, y, event, target, overTarget, overX, overY, inBounds, posEvtObj (native event that last updated position)\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._pointerData = {};\n\n\t\t/**\n\t\t * Number of active pointers.\n\t\t * @type {Number}\n\t\t * @private\n\t\t */\n\t\tthis._pointerCount = 0;\n\n\t\t/**\n\t\t * The ID of the primary pointer.\n\t\t * @type {String}\n\t\t * @private\n\t\t */\n\t\tthis._primaryPointerID = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._mouseOverIntervalID = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Stage}\n\t\t */\n\t\tthis._nextStage = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Stage}\n\t\t */\n\t\tthis._prevStage = null;\n\n\t\tthis.enableDOMEvents(true);\n\t}\n\n\t/**\n\t * Specifies a target stage that will have mouse/touch interactions relayed to it after this stage handles them.\n\t * This can be useful in cases where you have multiple layered canvases and want user interactions\n\t * events to pass through.\n\t *\n\t * MouseOver, MouseOut, RollOver, and RollOut interactions are also passed through using the mouse over settings\n\t * of the top-most stage, but are only processed if the target stage has mouse over interactions enabled.\n\t * Considerations when using roll over in relay targets:\n\t * \n\t * - The top-most (first) stage must have mouse over interactions enabled (via enableMouseOver)
\n\t * - All stages that wish to participate in mouse over interaction must enable them via enableMouseOver
\n\t * - All relay targets will share the frequency value of the top-most stage
\n\t *
\n\t *\n\t * @example Relay mouse events from topStage to bottomStage \n\t * topStage.nextStage = bottomStage;\n\t *\n\t * @example Disable DOM events \n\t * stage.enableDOMEvents(false);\n\t *\n\t * @type {easeljs.Stage}\n\t */\n\tget nextStage () { return this._nextStage; }\n\tset nextStage (stage) {\n\t\tif (this._nextStage) { this._nextStage._prevStage = null; }\n\t\tif (stage) { stage._prevStage = this; }\n\t\tthis._nextStage = stage;\n\t}\n\n// public methods:\n\t/**\n\t * Each time the update method is called, the stage will call {@link easeljs.Stage#tick}\n\t * unless {@link easeljs.Stage#tickOnupdate} is set to false,\n\t * and then render the display list to the canvas.\n\t *\n\t * @param {Object} [props] Props object to pass to `tick()`. Should usually be a {@link core.Ticker} event object, or similar object with a delta property.\n\t */\n\tupdate (props) {\n\t\tif (!this.canvas) { return; }\n\t\tif (this.tickOnUpdate) { this.tick(props); }\n\t\tif (this.dispatchEvent(\"drawstart\", false, true) === false) { return; }\n\t\tDisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;\n\t\tlet r = this.drawRect, ctx = this.canvas.getContext(\"2d\");\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tif (this.autoClear) {\n\t\t\tif (r) { ctx.clearRect(r.x, r.y, r.width, r.height); }\n\t\t\telse { ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1); }\n\t\t}\n\t\tctx.save();\n\t\tif (this.drawRect) {\n\t\t\tctx.beginPath();\n\t\t\tctx.rect(r.x, r.y, r.width, r.height);\n\t\t\tctx.clip();\n\t\t}\n\t\tthis.updateContext(ctx);\n\t\tthis.draw(ctx, false);\n\t\tctx.restore();\n\t\tthis.dispatchEvent(\"drawend\");\n\t}\n\n\t/**\n\t * Propagates a tick event through the display list. This is automatically called by {@link easeljs.Stage#update}\n\t * unless {@link easeljs.Stage#tickOnUpdate} is set to false.\n\t *\n\t * If a props object is passed to `tick()`, then all of its properties will be copied to the event object that is\n\t * propagated to listeners.\n\t *\n\t * Some time-based features in EaselJS (for example {@link easeljs.Sprite#framerate} require that\n\t * a {@link core.Ticker#event:tick} event object (or equivalent object with a delta property) be\n\t * passed as the `props` parameter to `tick()`.\n\t *\n\t * @example\n\t * Ticker.on(\"tick\", (evt) => {\n\t * // clone the event object from Ticker, and add some custom data to it:\n\t * \t let data = evt.clone().set({ greeting: \"hello\", name: \"world\" });\n\t * \t // pass it to stage.update():\n\t * \t stage.update(data); // subsequently calls tick() with the same param\n\t * });\n\t *\n\t * shape.on(\"tick\", (evt) => {\n\t * console.log(evt.delta); // the delta property from the Ticker tick event object\n\t * \t console.log(evt.greeting, evt.name); // custom data: \"hello world\"\n\t * });\n\t *\n\t * @emits easeljs.Stage#event:tickstart\n\t * @emits easeljs.Stage#event:tickend\n\t * @param {Object} [props] An object with properties that should be copied to the event object. Should usually be a Ticker event object, or similar object with a delta property.\n\t */\n\ttick (props) {\n\t\tif (!this.tickEnabled || this.dispatchEvent(\"tickstart\", false, true) === false) { return; }\n\t\tlet evtObj = new Event(\"tick\");\n\t\tif (props) {\n\t\t\tfor (let n in props) {\n\t\t\t\tif (props.hasOwnProperty(n)) { evtObj[n] = props[n]; }\n\t\t\t}\n\t\t}\n\t\tthis._tick(evtObj);\n\t\tthis.dispatchEvent(\"tickend\");\n\t}\n\n\t/**\n\t * Default event handler that calls the Stage {@link easeljs.Stage#update} method when a {@link easeljs.DisplayObject#event:tick}\n\t * event is received. This allows you to register a Stage instance as a event listener on {@link core.Ticker} directly.\n\t * Note that if you subscribe to ticks using this pattern, then the tick event object will be passed through to\n\t * display object tick handlers, instead of `delta` and `paused` parameters.\n\t */\n\thandleEvent (evt) {\n\t\tif (evt.type === \"tick\") { this.update(evt); }\n\t}\n\n\t/**\n\t * Clears the target canvas. Useful if {@link easeljs.State#autoClear} is set to `false`.\n\t */\n\tclear () {\n\t\tif (!this.canvas) { return; }\n\t\tlet ctx = this.canvas.getContext(\"2d\");\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1);\n\t}\n\n\t/**\n\t * Returns a data url that contains a Base64-encoded image of the contents of the stage. The returned data url can\n\t * be specified as the src value of an image element.\n\t *\n\t * @param {String} [backgroundColor] The background color to be used for the generated image. Any valid CSS color\n\t * value is allowed. The default value is a transparent background.\n\t * @param {String} [mimeType=\"image/png\"] The MIME type of the image format to be create. If an unknown MIME type\n\t * is passed in, or if the browser does not support the specified MIME type, the default value will be used.\n\t * @return {String} a Base64 encoded image.\n\t */\n\ttoDataURL (backgroundColor, mimeType = \"image/png\") {\n\t\tlet data, ctx = this.canvas.getContext('2d'), w = this.canvas.width, h = this.canvas.height;\n\n\t\tif (backgroundColor) {\n\t\t\tdata = ctx.getImageData(0, 0, w, h);\n\t\t\tvar compositeOperation = ctx.globalCompositeOperation;\n\t\t\tctx.globalCompositeOperation = \"destination-over\";\n\n\t\t\tctx.fillStyle = backgroundColor;\n\t\t\tctx.fillRect(0, 0, w, h);\n\t\t}\n\n\t\tlet dataURL = this.canvas.toDataURL(mimeType);\n\n\t\tif (backgroundColor) {\n\t\t\tctx.putImageData(data, 0, 0);\n\t\t\tctx.globalCompositeOperation = compositeOperation;\n\t\t}\n\n\t\treturn dataURL;\n\t}\n\n\t/**\n\t * Enables or disables (by passing a frequency of 0) mouse over {@link easeljs.DisplayObject#event:mouseover}\n\t * and {@link easeljs.DisplayObject#event:mouseout} and roll over events {@link easeljs.DisplayObject#event:rollover}\n\t * and {@link easeljs.DisplayObject#event:rollout} for this stage's display list. These events can\n\t * be expensive to generate, so they are disabled by default. The frequency of the events can be controlled\n\t * independently of mouse move events via the optional `frequency` parameter.\n\t *\n\t * @example\n\t * const stage = new Stage(\"canvasId\");\n\t * stage.enableMouseOver(10); // 10 updates per second\n\t *\n\t * @param {Number} [frequency=20] Optional param specifying the maximum number of times per second to broadcast\n\t * mouse over/out events. Set to 0 to disable mouse over events completely. Maximum is 50. A lower frequency is less\n\t * responsive, but uses less CPU.\n\t */\n\tenableMouseOver (frequency = 20) {\n\t\tif (this._mouseOverIntervalID) {\n\t\t\tclearInterval(this._mouseOverIntervalID);\n\t\t\tthis._mouseOverIntervalID = null;\n\t\t\tif (frequency === 0) {\n\t\t\t\tthis._testMouseOver(true);\n\t\t\t}\n\t\t}\n\t\tif (frequency <= 0) { return; }\n\t\tthis._mouseOverIntervalID = setInterval(() => this._testMouseOver(), 1000/Math.min(50,frequency));\n\t}\n\n\t/**\n\t * Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). It is good\n\t * practice to disable events when disposing of a Stage instance, otherwise the stage will continue to receive\n\t * events from the page.\n\t * When changing the canvas property you must disable the events on the old canvas, and enable events on the\n\t * new canvas or mouse events will not work as expected.\n\t *\n\t * @example\n\t * stage.enableDOMEvents(false);\n\t * stage.canvas = anotherCanvas;\n\t * stage.enableDOMEvents(true);\n\t *\n\t * @param {Boolean} [enable=true] Indicates whether to enable or disable the events.\n\t */\n\tenableDOMEvents (enable = true) {\n\t\tlet ls = this._eventListeners;\n\t\tif (!enable && ls) {\n\t\t\tfor (let n in ls) {\n\t\t\t\tlet o = ls[n];\n\t\t\t\to.t.removeEventListener(n, o.f, false);\n\t\t\t}\n\t\t\tthis._eventListeners = null;\n\t\t} else if (enable && !ls && this.canvas) {\n\t\t\tlet t = window.addEventListener ? window : document;\n\t\t\tls = this._eventListeners = {\n\t\t\t\tmouseup: {t, f:e => this._handleMouseUp(e) },\n\t\t\t\tmousemove: {t, f:e => this._handleMouseMove(e) },\n\t\t\t\tdblclick: {t:this.canvas, f:e => this._handleDoubleClick(e) },\n\t\t\t\tmousedown: {t:this.canvas, f:e => this._handleMouseDown(e) }\n\t\t\t};\n\t\t\tfor (let n in ls) {\n\t\t\t\tlet o = ls[n];\n\t\t\t\to.t.addEventListener && o.t.addEventListener(n, o.f, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Stage instances cannot be cloned.\n\t * @throws Stage cannot be cloned\n\t * @override\n\t */\n\tclone () {\n\t\tthrow \"Stage cannot be cloned.\";\n\t}\n\n\t/**\n\t * @protected\n\t * @param {HTMLElement} e\n\t * @returns {Object}\n\t */\n\t_getElementRect (e) {\n\t\tlet bounds;\n\t\ttry { bounds = e.getBoundingClientRect(); } // this can fail on disconnected DOM elements in IE9\n\t\tcatch (err) { bounds = {top:e.offsetTop, left:e.offsetLeft, width:e.offsetWidth, height:e.offsetHeight}; }\n\n\t\tlet offX = (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0);\n\t\tlet offY = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || document.body.clientTop || 0);\n\n\t\tlet styles = window.getComputedStyle ? getComputedStyle(e, null) : e.currentStyle; // IE <9 compatibility.\n\t\tlet padL = parseInt(styles.paddingLeft)+parseInt(styles.borderLeftWidth);\n\t\tlet padT = parseInt(styles.paddingTop)+parseInt(styles.borderTopWidth);\n\t\tlet padR = parseInt(styles.paddingRight)+parseInt(styles.borderRightWidth);\n\t\tlet padB = parseInt(styles.paddingBottom)+parseInt(styles.borderBottomWidth);\n\n\t\t// note: in some browsers bounds properties are read only.\n\t\treturn {\n\t\t\tleft: bounds.left+offX+padL,\n\t\t\tright: bounds.right+offX-padR,\n\t\t\ttop: bounds.top+offY+padT,\n\t\t\tbottom: bounds.bottom+offY-padB\n\t\t};\n\t}\n\n\t/**\n\t * @protected\n\t * @param {Number} id\n\t * @returns {Object}\n\t */\n\t_getPointerData (id) {\n\t\tlet data = this._pointerData[id];\n\t\tif (!data) { data = this._pointerData[id] = {x:0, y:0}; }\n\t\treturn data;\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.MouseEvent} [e=window.event]\n\t */\n\t_handleMouseMove (e = window.event) {\n\t\tthis._handlePointerMove(-1, e, e.pageX, e.pageY);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.DisplayObject#event:mouseleave}\n\t * @emits {@link easeljs.DisplayObject#event:mouseenter}\n\t * @emits {@link easeljs.DisplayObject#event:pressmove}\n\t * @emits {@link easeljs.Stage#event:stagemousemove}\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handlePointerMove (id, e, pageX, pageY, owner) {\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\t\tif (!this.canvas) { return; }\n\t\tlet nextStage=this._nextStage, o=this._getPointerData(id);\n\n\t\tlet inBounds = o.inBounds;\n\t\tthis._updatePointerPosition(id, e, pageX, pageY);\n\t\tif (inBounds || o.inBounds || this.mouseMoveOutside) {\n\t\t\tif (id === -1 && o.inBounds === !inBounds) {\n\t\t\t\tthis._dispatchMouseEvent(this, (inBounds ? \"mouseleave\" : \"mouseenter\"), false, id, o, e);\n\t\t\t}\n\n\t\t\tthis._dispatchMouseEvent(this, \"stagemousemove\", false, id, o, e);\n\t\t\tthis._dispatchMouseEvent(o.target, \"pressmove\", true, id, o, e);\n\t\t}\n\n\t\tnextStage&&nextStage._handlePointerMove(id, e, pageX, pageY, null);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t */\n\t_updatePointerPosition (id, e, pageX, pageY) {\n\t\tlet rect = this._getElementRect(this.canvas);\n\t\tpageX -= rect.left;\n\t\tpageY -= rect.top;\n\n\t\tlet w = this.canvas.width;\n\t\tlet h = this.canvas.height;\n\t\tpageX /= (rect.right-rect.left)/w;\n\t\tpageY /= (rect.bottom-rect.top)/h;\n\t\tlet o = this._getPointerData(id);\n\t\tif (o.inBounds = (pageX >= 0 && pageY >= 0 && pageX <= w-1 && pageY <= h-1)) {\n\t\t\to.x = pageX;\n\t\t\to.y = pageY;\n\t\t} else if (this.mouseMoveOutside) {\n\t\t\to.x = pageX < 0 ? 0 : (pageX > w-1 ? w-1 : pageX);\n\t\t\to.y = pageY < 0 ? 0 : (pageY > h-1 ? h-1 : pageY);\n\t\t}\n\n\t\to.posEvtObj = e;\n\t\to.rawX = pageX;\n\t\to.rawY = pageY;\n\n\t\tif (id === this._primaryPointerID || id === -1) {\n\t\t\tthis.mouseX = o.x;\n\t\t\tthis.mouseY = o.y;\n\t\t\tthis.mouseInBounds = o.inBounds;\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.MouseEvent} e\n\t */\n\t_handleMouseUp (e) {\n\t\tthis._handlePointerUp(-1, e, false);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.Stage#event:stagemouseup}\n\t * @emits {@link easeljs.DisplayObject#event:click}\n\t * @emits {@link easeljs.DisplayObject#event:pressup}\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Boolean} clear\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handlePointerUp (id, e, clear, owner) {\n\t\tlet nextStage = this._nextStage, o = this._getPointerData(id);\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\n\t\tlet target=null, oTarget = o.target;\n\t\tif (!owner && (oTarget || nextStage)) { target = this._getObjectsUnderPoint(o.x, o.y, null, true); }\n\n\t\tif (o.down) { this._dispatchMouseEvent(this, \"stagemouseup\", false, id, o, e, target); o.down = false; }\n\n\t\tif (target === oTarget) { this._dispatchMouseEvent(oTarget, \"click\", true, id, o, e); }\n\t\tthis._dispatchMouseEvent(oTarget, \"pressup\", true, id, o, e);\n\n\t\tif (clear) {\n\t\t\tif (id==this._primaryPointerID) { this._primaryPointerID = null; }\n\t\t\tdelete(this._pointerData[id]);\n\t\t} else { o.target = null; }\n\n\t\tnextStage&&nextStage._handlePointerUp(id, e, clear, owner || target && this);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.MouseEvent} e\n\t */\n\t_handleMouseDown (e) {\n\t\tthis._handlePointerDown(-1, e, e.pageX, e.pageY);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.Stage#event:stagemousedown}\n\t * @emits {@link easeljs.DisplayObject#event:mousedown}\n\t * @protected\n\t * @param {Number} id\n\t * @param {easeljs.MouseEvent | Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handlePointerDown (id, e, pageX, pageY, owner) {\n\t\tif (this.preventSelection) { e.preventDefault(); }\n\t\tif (this._primaryPointerID == null || id === -1) { this._primaryPointerID = id; } // mouse always takes over.\n\n\t\tif (pageY != null) { this._updatePointerPosition(id, e, pageX, pageY); }\n\t\tlet target = null, nextStage = this._nextStage, o = this._getPointerData(id);\n\t\tif (!owner) { target = o.target = this._getObjectsUnderPoint(o.x, o.y, null, true); }\n\n\t\tif (o.inBounds) { this._dispatchMouseEvent(this, \"stagemousedown\", false, id, o, e, target); o.down = true; }\n\t\tthis._dispatchMouseEvent(target, \"mousedown\", true, id, o, e);\n\n\t\tnextStage&&nextStage._handlePointerDown(id, e, pageX, pageY, owner || target && this);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.DisplayObject#event:mouseout}\n\t * @emits {@link easeljs.DisplayObject#event:rollout}\n\t * @emits {@link easeljs.DisplayObject#event:rollover}\n\t * @emits {@link easeljs.DisplayObject#event:mouseover}\n\t * @param {Boolean} clear If true, clears the mouseover / rollover (ie. no target)\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t * @param {easeljs.Stage} eventTarget The stage that the cursor is actively over.\n\t * @protected\n\t */\n\t_testMouseOver (clear, owner, eventTarget) {\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\n\t\tlet nextStage = this._nextStage;\n\t\tif (!this._mouseOverIntervalID) {\n\t\t\t// not enabled for mouseover, but should still relay the event.\n\t\t\tnextStage&&nextStage._testMouseOver(clear, owner, eventTarget);\n\t\t\treturn;\n\t\t}\n\t\tlet o = this._getPointerData(-1);\n\t\t// only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs.\n\t\tif (!o || (!clear && this.mouseX === this._mouseOverX && this.mouseY === this._mouseOverY && this.mouseInBounds)) { return; }\n\n\t\tlet e = o.posEvtObj;\n\t\tlet isEventTarget = eventTarget || e&&(e.target === this.canvas);\n\t\tlet target=null, common = -1, cursor=\"\";\n\n\t\tif (!owner && (clear || this.mouseInBounds && isEventTarget)) {\n\t\t\ttarget = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, true);\n\t\t\tthis._mouseOverX = this.mouseX;\n\t\t\tthis._mouseOverY = this.mouseY;\n\t\t}\n\n\t\tlet oldList = this._mouseOverTarget||[];\n\t\tlet oldTarget = oldList[oldList.length-1];\n\t\tlet list = this._mouseOverTarget = [];\n\n\t\t// generate ancestor list and check for cursor:\n\t\tlet t = target;\n\t\twhile (t) {\n\t\t\tlist.unshift(t);\n\t\t\tif (!cursor) { cursor = t.cursor; }\n\t\t\tt = t.parent;\n\t\t}\n\t\tthis.canvas.style.cursor = cursor;\n\t\tif (!owner && eventTarget) { eventTarget.canvas.style.cursor = cursor; }\n\n\t\t// find common ancestor:\n\t\tfor (let i=0,l=list.length; icommon; i--) {\n\t\t\tthis._dispatchMouseEvent(oldList[i], \"rollout\", false, -1, o, e, target);\n\t\t}\n\n\t\tfor (let i=list.length-1; i>common; i--) {\n\t\t\tthis._dispatchMouseEvent(list[i], \"rollover\", false, -1, o, e, oldTarget);\n\t\t}\n\n\t\tif (oldTarget != target) {\n\t\t\tthis._dispatchMouseEvent(target, \"mouseover\", true, -1, o, e, oldTarget);\n\t\t}\n\n\t\tnextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);\n\t}\n\n\t/**\n\t * @emits {@link easeljs.DisplayObject#event:dblclick}\n\t * @protected\n\t * @param {easeljs.MouseEvent} e\n\t * @param {easeljs.Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t */\n\t_handleDoubleClick (e, owner) {\n\t\tlet target=null, nextStage=this._nextStage, o=this._getPointerData(-1);\n\t\tif (!owner) {\n\t\t\ttarget = this._getObjectsUnderPoint(o.x, o.y, null, true);\n\t\t\tthis._dispatchMouseEvent(target, \"dblclick\", true, -1, o, e);\n\t\t}\n\t\tnextStage&&nextStage._handleDoubleClick(e, owner || target && this);\n\t}\n\n\t/**\n\t * @protected\n\t * @param {easeljs.DisplayObject} target\n\t * @param {String} type\n\t * @param {Boolean} bubbles\n\t * @param {Number} pointerId\n\t * @param {Object} o\n\t * @param {easeljs.MouseEvent} [nativeEvent]\n\t * @param {easeljs.DisplayObject} [relatedTarget]\n\t */\n\t_dispatchMouseEvent (target, type, bubbles, pointerId, o, nativeEvent, relatedTarget) {\n\t\t// TODO: might be worth either reusing MouseEvent instances, or adding a willTrigger method to avoid GC.\n\t\tif (!target || (!bubbles && !target.hasEventListener(type))) { return; }\n\t\t/*\n\t\t// TODO: account for stage transformations?\n\t\tthis._mtx = this.getConcatenatedMatrix(this._mtx).invert();\n\t\tlet pt = this._mtx.transformPoint(o.x, o.y);\n\t\tlet evt = new MouseEvent(type, bubbles, false, pt.x, pt.y, nativeEvent, pointerId, pointerId==this._primaryPointerID || pointerId==-1, o.rawX, o.rawY);\n\t\t*/\n\t\tlet evt = new MouseEvent(type, bubbles, false, o.x, o.y, nativeEvent, pointerId, pointerId === this._primaryPointerID || pointerId === -1, o.rawX, o.rawY, relatedTarget);\n\t\ttarget.dispatchEvent(evt);\n\t}\n\n}\n\n/**\n * Dispatched when the user moves the mouse over the canvas.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#stagemousemove\n * @since 0.6.0\n */\n/**\n * Dispatched when the user presses their left mouse button on the canvas.\n * You can use {@link easeljs.Stage#mouseInBounds} to check whether the mouse is currently within the stage bounds.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#stagemousedown\n * @since 0.6.0\n */\n/**\n * Dispatched when the user the user presses somewhere on the stage, then releases the mouse button anywhere that the page can detect it (this varies slightly between browsers).\n * You can use {@link easeljs.Stage#mouseInBounds} to check whether the mouse is currently within the stage bounds.\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#stagemouseup\n * @since 0.6.0\n */\n/**\n * Dispatched when the mouse moves from within the canvas area (mouseInBounds === true) to outside it (mouseInBounds === false).\n * This is currently only dispatched for mouse input (not touch).\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#mouseleave\n * @since 0.7.0\n */\n/**\n * Dispatched when the mouse moves into the canvas area (mouseInBounds === false) from outside it (mouseInBounds === true).\n * This is currently only dispatched for mouse input (not touch).\n * @see {@link easeljs.MouseEvent}\n * @event easeljs.Stage#mouseenter\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately before the tick event is propagated through the display list.\n * You can call preventDefault on the event object to cancel propagating the tick event.\n * @event easeljs.Stage#tickstart\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately after the tick event is propagated through the display list. Does not fire if\n * tickOnUpdate is false. Precedes the \"drawstart\" event.\n * @event easeljs.Stage#tickend\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately before the canvas is cleared and the display list is drawn to it.\n * You can call preventDefault on the event object to cancel the draw.\n * @event easeljs.Stage#drawstart\n * @since 0.7.0\n */\n/**\n * Dispatched each update immediately after the display list is drawn to the canvas and the canvas context is restored.\n * @event easeljs.Stage#drawend\n * @since 0.7.0\n */\n","/**\r\n * @license Canvas\r\n * Visit http://createjs.com/ for documentation, updates and examples.\r\n *\r\n * Copyright (c) 2017 gskinner.com, inc.\r\n *\r\n * Permission is hereby granted, free of charge, to any person\r\n * obtaining a copy of this software and associated documentation\r\n * files (the \"Software\"), to deal in the Software without\r\n * restriction, including without limitation the rights to use,\r\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\r\n * copies of the Software, and to permit persons to whom the\r\n * Software is furnished to do so, subject to the following\r\n * conditions:\r\n *\r\n * The above copyright notice and this permission notice shall be\r\n * included in all copies or substantial portions of the Software.\r\n *\r\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\r\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\r\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\r\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\r\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\r\n * OTHER DEALINGS IN THE SOFTWARE.\r\n */\r\n\r\n/**\r\n * Global utility for creating canvases.\r\n * @memberof easeljs\n * @name easeljs.createCanvas\n * @param {Number} [width=1]\n * @param {Number} [height=1]\r\n */\r\nexport default function createCanvas(width=1, height=1) {\n\tlet c;\n\tif (window.createjs !== undefined && window.createjs.createCanvas !== undefined) {\n\t\tc = window.createjs.createCanvas();\n\t}\n\tif (window.document !== undefined && window.document.createElement !== undefined) {\n\t\tc = document.createElement(\"canvas\");\n\t}\n\tif (c !== undefined) {\n\t\tc.width = width;\n\t\tc.height = height;\n\t\treturn c;\n\t}\n\n\tthrow \"Canvas not supported in this environment.\";\r\n}\r\n","/**\n * @license VideoBuffer\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2010 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport createCanvas from \"./Canvas\";\n\n/**\n * When an HTML video seeks, including when looping, there is an indeterminate period before a new frame is available.\n * This can result in the video blinking or flashing when it is drawn to a canvas. The VideoBuffer class resolves\n * this issue by drawing each frame to an off-screen canvas and preserving the prior frame during a seek.\n *\n * @example\n * let buffer = new VideoBuffer(video);\n * let bitmap = new Bitmap(buffer);\n *\n * @param {HTMLVideoElement} video The HTML video element to buffer.\n */\nexport default class VideoBuffer {\n\n constructor (video) {\n\n \t/**\n \t * Used by Bitmap to determine when the video buffer is ready to be drawn. Not intended for general use.\n \t * @protected\n \t * @type {Number}\n \t */\n \tthis.readyState = video.readyState;\n\n \t/**\n \t * @protected\n \t * @type {HTMLVideoElement}\n \t */\n \tthis._video = video;\n\n \t/**\n \t * @protected\n \t * @type {HTMLCanvasElement}\n \t */\n \tthis._canvas = null;\n\n \t/**\n \t * @protected\n \t * @type {Number}\n \t * @default -1\n \t */\n \tthis._lastTime = -1;\n\n \tif (this.readyState < 2) {\n video.addEventListener(\"canplaythrough\", this._videoReady.bind(this));\n }\n // {once: true} isn't supported everywhere, but its a non-critical optimization here.\n }\n\n /**\n * Gets an HTML canvas element showing the current video frame, or the previous frame if in a seek / loop.\n * Primarily for use by {@link easeljs.Bitmap}.\n */\n getImage () {\n \tif (this.readyState < 2) { return; }\n \tlet canvas = this._canvas, video = this._video;\n \tif (!canvas) {\n\t\t\tcanvas = this._canvas = createCanvas();\n \t\tcanvas.width = video.videoWidth;\n \t\tcanvas.height = video.videoHeight;\n \t}\n \tif (video.readyState >= 2 && video.currentTime !== this._lastTime) {\n \t\tconst ctx = canvas.getContext(\"2d\");\n \t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n \t\tctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n \t\tthis._lastTime = video.currentTime;\n \t}\n \treturn canvas;\n }\n\n /**\n * @protected\n */\n _videoReady () {\n \tthis.readyState = 2;\n }\n\n}\n","/**\n * @license Bitmap\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport VideoBuffer from \"../utils/VideoBuffer\";\n\n/**\n * A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing\n * HTML element, or a string.\n *\n * Notes:\n * \n * - When using a video source that may loop or seek, use a {@link easeljs.VideoBuffer} object to\n * blinking / flashing.\n *
- When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it\n * will be displayed.
\n * - Bitmaps with an SVG source currently will not respect an alpha value other than 0 or 1. To get around this,\n * the Bitmap can be cached.
\n * - Bitmaps with an SVG source will taint the canvas with cross-origin data, which prevents interactivity. This\n * happens in all browsers except recent Firefox builds.
\n * - Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using\n * methods such as `getObjectUnderPoint`, or using filters, or caching. You can get around this by setting\n * `crossOrigin` flags on your images before passing them to EaselJS, eg: `img.crossOrigin=\"Anonymous\";`
\n *
\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * const bitmap = new Bitmap(\"imagePath.jpg\");\n *\n * @param {CanvasImageSource | String | Object} imageOrUri The source image to display. This can be a CanvasImageSource\n * (image, video, canvas), an object with a `getImage` method that returns a CanvasImageSource, or a string URL to an image.\n * If the latter, a new Image instance with the URL as its src will be used.\n */\nexport default class Bitmap extends DisplayObject {\n\n\tconstructor (imageOrUri) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The source image to display. This can be a CanvasImageSource\n\t\t * (image, video, canvas), an object with a `getImage` method that returns a CanvasImageSource, or a string URL to an image.\n\t\t * If the latter, a new Image instance with the URL as its src will be used.\n\t\t * @property image\n\t\t * @type {CanvasImageSource | Object}\n\t\t */\n\t\tif (typeof imageOrUri === \"string\") {\n\t\t\tthis.image = document.createElement(\"img\");\n\t\t\tthis.image.src = imageOrUri;\n\t\t} else {\n\t\t\tthis.image = imageOrUri;\n\t\t}\n\n\t\t/**\n\t\t * Specifies an area of the source image to draw. If omitted, the whole image will be drawn.\n\t\t * Note that video sources must have a width / height set to work correctly with `sourceRect`.\n\t\t * @type {easeljs.Rectangle}\n\t\t * @default null\n\t\t */\n\t\tthis.sourceRect = null;\n\n\t\t/**\n\t\t * Set as compatible with WebGL.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_BITMAP;\n\t}\n\n\tisVisible () {\n\t\tlet image = this.image;\n\t\tlet hasContent = this.cacheCanvas || (image && (image.naturalWidth || image.getContext || image.readyState >= 2));\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache = false) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\t\tlet img = this.image, rect = this.sourceRect;\n\t\tif (img instanceof VideoBuffer) { img = img.getImage(); }\n\t\tif (img == null) { return true; }\n\t\tif (rect) {\n\t\t\t// some browsers choke on out of bound values, so we'll fix them:\n\t\t\tlet x1 = rect.x, y1 = rect.y, x2 = x1 + rect.width, y2 = y1 + rect.height, x = 0, y = 0, w = img.width, h = img.height;\n\t\t\tif (x1 < 0) { x -= x1; x1 = 0; }\n\t\t\tif (x2 > w) { x2 = w; }\n\t\t\tif (y1 < 0) { y -= y1; y1 = 0; }\n\t\t\tif (y2 > h) { y2 = h; }\n\t\t\tctx.drawImage(img, x1, y1, x2-x1, y2-y1, x, y, x2-x1, y2-y1);\n\t\t} else {\n\t\t\tctx.drawImage(img, 0, 0);\n\t\t}\n\t\treturn true;\n\t}\n\n\t// Note, the doc sections below document using the specified APIs (from DisplayObject) from\n\t// Bitmap. This is why they have no method implementations.\n\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the {@link easeljs.DisplayObject#cache} method.\n\t *\n\t * @alias easeljs.Bitmap#cache\n\t */\n\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the {@link easeljs.DisplayObject#cache} method.\n\t *\n\t * @alias easeljs.Bitmap#updateCache\n\t */\n\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the {@link easeljs.DisplayObject#cache} method.\n\t *\n\t * @alias easeljs.Bitmap#uncache\n\t */\n\n\tgetBounds () {\n\t\tlet rect = super.getBounds();\n\t\tif (rect) { return rect; }\n\t\tlet image = this.image, o = this.sourceRect || image;\n\t\tlet hasContent = (image && (image.naturalWidth || image.getContext || image.readyState >= 2));\n\t\treturn hasContent ? this._rectangle.setValues(0, 0, o.width, o.height) : null;\n\t}\n\n\t/**\n\t * Returns a clone of the Bitmap instance.\n\t * @param {Boolean} [node] Whether the underlying DOM element should be cloned as well.\n\t * @return {easeljs.Bitmap} A clone of the Bitmap instance.\n\t */\n\tclone (node) {\n\t\tlet img = this.image;\n\t\tif (img != null && node != null) { img = img.cloneNode(); }\n\t\tlet bmp = new Bitmap(img);\n\t\tif (this.sourceRect) { bmp.sourceRect = this.sourceRect.clone(); }\n\t\tthis._cloneProps(bmp);\n\t\treturn bmp;\n\t}\n\n}\n","/**\n * @license Sprite\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport { Event } from \"@createjs/core\";\n\n/**\n * Displays a frame or sequence of frames (ie. an animation) from a SpriteSheet instance. A sprite sheet is a series of\n * images (usually animation frames) combined into a single image. For example, an animation consisting of 8 100x100\n * images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). You can display individual frames,\n * play frames as an animation, and even sequence animations together.\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * let sprite = new Sprite(spriteSheet);\n * sprite.gotoAndStop(\"frameName\");\n *\n * Until {@link easeljs.Sprite#gotoAndStop} or {@link easeljs.Sprite#gotoAndPlay} is called,\n * only the first defined frame defined in the sprite sheet will be displayed.\n *\n * @see {@link easeljs.SpriteSheet \"More information on setting up frames and animations.\"}\n * @param {SpriteSheet} spriteSheet The SpriteSheet instance to play back. This includes the source image(s), frame\n * dimensions, and frame data.\n * @param {String | Number} [frameOrAnimation] The frame number or animation to play initially.\n */\nexport default class Sprite extends DisplayObject {\n\n\tconstructor (spriteSheet, frameOrAnimation) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The frame index that will be drawn when draw is called. Note that with some {@link easeljs.SpriteSheet}\n\t\t * definitions, this will advance non-sequentially. This will always be an integer value.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.currentFrame = 0;\n\n\t\t/**\n\t\t * Returns the name of the currently playing animation.\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.currentAnimation = null;\n\n\t\t/**\n\t\t * Prevents the animation from advancing each tick automatically. For example, you could create a sprite\n\t\t * sheet of icons, set paused to true, and display the appropriate icon by setting `currentFrame`.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.paused = true;\n\n\t\t/**\n\t\t * The SpriteSheet instance to play back. This includes the source image, frame dimensions, and frame data.\n\t\t * @type {easeljs.SpriteSheet}\n\t\t * @readonly\n\t\t */\n\t\tthis.spriteSheet = spriteSheet;\n\n\t\t/**\n\t\t * Specifies the current frame index within the currently playing animation. When playing normally, this will increase\n\t\t * from 0 to n-1, where n is the number of frames in the current animation.\n\t\t * This could be a non-integer value if using time-based playback, or if the animation's speed is not an integer.\n\t\t * @see {@link easeljs.Sprite#framerate}\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.currentAnimationFrame = 0;\n\n\t\t/**\n\t\t * By default Sprite instances advance one frame per tick. Specifying a framerate for the Sprite (or its related\n\t\t * SpriteSheet) will cause it to advance based on elapsed time between ticks as appropriate to maintain the target\n\t\t * framerate.\n\t\t *\n\t\t * For example, if a Sprite with a framerate of 10 is placed on a Stage being updated at 40fps, then the Sprite will\n\t\t * advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will\n\t\t * vary slightly between frames.\n\t\t *\n\t\t * This feature is dependent on the tick event object (or an object with an appropriate \"delta\" property) being\n\t\t * passed into {@link easeljs.Stage#update}.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.framerate = 0;\n\n\t\t/**\n\t\t * Current animation object.\n\t\t * @protected\n\t\t * @type {Object}\n\t\t * @default null\n\t\t */\n\t\tthis._animation = null;\n\n\t\t/**\n\t\t * Current frame index.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._currentFrame = null;\n\n\t\t/**\n\t\t * Skips the next auto advance. Used by gotoAndPlay to avoid immediately jumping to the next frame\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._skipAdvance = false;\n\n\t\t/**\n\t\t * Set as compatible with WebGL.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_SPRITE;\n\n\t\tif (frameOrAnimation != null) {\n\t\t\tthis.gotoAndPlay(frameOrAnimation);\n\t\t}\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || this.spriteSheet.complete;\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\t\tthis._normalizeFrame();\n\t\tlet o = this.spriteSheet.getFrame(this._currentFrame|0);\n\t\tif (!o) { return false; }\n\t\tlet rect = o.rect;\n\t\tif (rect.width && rect.height) { ctx.drawImage(o.image, rect.x, rect.y, rect.width, rect.height, -o.regX, -o.regY, rect.width, rect.height); }\n\t\treturn true;\n\t}\n\n\t// Note, the doc sections below document using the specified APIs (from DisplayObject) from\n\t// Bitmap. This is why they have no method implementations.\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @name easeljs.Sprite#cache\n\t */\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @name easeljs.Sprite#updateCache\n\t */\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @name easeljs.Sprite#uncache\n\t */\n\n\t/**\n\t * Play (unpause) the current animation. The Sprite will be paused if either {@link easeljs.Sprite#stop}\n\t * or {@link easeljs.Sprite#gotoAndStop} is called. Single frame animations will remain unchanged.\n\t */\n\tplay () {\n\t\tthis.paused = false;\n\t}\n\n\t/**\n\t * Stop playing a running animation. The Sprite will be playing if {@link easeljs.Sprite#gotoAndPlay} is called.\n\t * Note that calling `gotoAndPlay()` or {@link easeljs.Sprite#play} will resume playback.\n\t */\n\tstop () {\n\t\tthis.paused = true;\n\t}\n\n\t/**\n\t * Sets paused to false and plays the specified animation name, named frame, or frame number.\n\t * @param {String | Number} frameOrAnimation The frame number or animation name that the playhead should move to\n\t * and begin playing.\n\t */\n\tgotoAndPlay (frameOrAnimation) {\n\t\tthis.paused = false;\n\t\tthis._skipAdvance = true;\n\t\tthis._goto(frameOrAnimation);\n\t}\n\n\t/**\n\t * Sets paused to true and seeks to the specified animation name, named frame, or frame number.\n\t * @param {String | Number} frameOrAnimation The frame number or animation name that the playhead should move to\n\t * and stop.\n\t */\n\tgotoAndStop (frameOrAnimation) {\n\t\tthis.paused = true;\n\t\tthis._goto(frameOrAnimation);\n\t}\n\n\t/**\n\t * Advances the playhead. This occurs automatically each tick by default.\n\t * @param {Number} [time] The amount of time in ms to advance by. Only applicable if framerate is set on the Sprite\n\t * or its SpriteSheet.\n\t*/\n\tadvance (time) {\n\t\tlet fps = this.framerate || this.spriteSheet.framerate;\n\t\tlet t = (fps && time != null) ? time/(1000/fps) : 1;\n\t\tthis._normalizeFrame(t);\n\t}\n\n\t/**\n\t * Returns a {@link easeljs.Rectangle} instance defining the bounds of the current frame relative to\n\t * the origin. For example, a 90 x 70 frame with `regX=50` and `regY=40` would return a\n\t * rectangle with [x=-50, y=-40, width=90, height=70]. This ignores transformations on the display object.\n\t *\n\t * @see {@link easeljs.SpriteSheet#frameBounds}\n\t * @return {easeljs.Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully loaded.\n\t */\n\tgetBounds () {\n\t\t// TODO: should this normalizeFrame?\n\t\treturn super.getBounds() || this.spriteSheet.getFrameBounds(this.currentFrame, this._rectangle);\n\t}\n\n\t/**\n\t * Returns a clone of the Sprite instance. Note that the same SpriteSheet is shared between cloned instances.\n\t * @return {easeljs.Sprite} a clone of the Sprite instance.\n\t */\n\tclone () {\n\t\treturn this._cloneProps(new Sprite(this.spriteSheet));\n\t}\n\n\t/**\n\t * @param {easeljs.Sprite} o\n\t * @return {easeljs.Sprite} o\n\t * @protected\n\t */\n\t_cloneProps (o) {\n\t\tsuper._cloneProps(o);\n\t\to.currentFrame = this.currentFrame;\n\t\to.currentAnimation = this.currentAnimation;\n\t\to.paused = this.paused;\n\t\to.currentAnimationFrame = this.currentAnimationFrame;\n\t\to.framerate = this.framerate;\n\n\t\to._animation = this._animation;\n\t\to._currentFrame = this._currentFrame;\n\t\to._skipAdvance = this._skipAdvance;\n\t\treturn o;\n\t}\n\n\t_tick (evtObj) {\n\t\tif (!this.paused) {\n\t\t\tif (!this._skipAdvance) { this.advance(evtObj&&evtObj.delta); }\n\t\t\tthis._skipAdvance = false;\n\t\t}\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * Normalizes the current frame, advancing animations and dispatching callbacks as appropriate.\n\t * @protected\n\t * @param {Number} [frameDelta=0]\n\t */\n\t_normalizeFrame (frameDelta = 0) {\n\t\tlet animation = this._animation;\n\t\tlet paused = this.paused;\n\t\tlet frame = this._currentFrame;\n\n\t\tif (animation) {\n\t\t\tlet speed = animation.speed || 1;\n\t\t\tlet animFrame = this.currentAnimationFrame;\n\t\t\tlet l = animation.frames.length;\n\t\t\tif (animFrame + frameDelta * speed >= l) {\n\t\t\t\tlet next = animation.next;\n\t\t\t\tif (this._dispatchAnimationEnd(animation, frame, paused, next, l - 1)) {\n\t\t\t\t\t// something changed in the event stack, so we shouldn't make any more changes here.\n\t\t\t\t\treturn;\n\t\t\t\t} else if (next) {\n\t\t\t\t\t// sequence. Automatically calls _normalizeFrame again with the remaining frames.\n\t\t\t\t\treturn this._goto(next, frameDelta - (l - animFrame) / speed);\n\t\t\t\t} else {\n\t\t\t\t\t// end.\n\t\t\t\t\tthis.paused = true;\n\t\t\t\t\tanimFrame = animation.frames.length - 1;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tanimFrame += frameDelta * speed;\n\t\t\t}\n\t\t\tthis.currentAnimationFrame = animFrame;\n\t\t\tthis._currentFrame = animation.frames[animFrame | 0]\n\t\t} else {\n\t\t\tframe = (this._currentFrame += frameDelta);\n\t\t\tlet l = this.spriteSheet.getNumFrames();\n\t\t\tif (frame >= l && l > 0) {\n\t\t\t\tif (!this._dispatchAnimationEnd(animation, frame, paused, l - 1)) {\n\t\t\t\t\t// looped.\n\t\t\t\t\tif ((this._currentFrame -= l) >= l) { return this._normalizeFrame(); }\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tframe = this._currentFrame | 0;\n\t\tif (this.currentFrame != frame) {\n\t\t\tthis.currentFrame = frame;\n\t\t\tthis.dispatchEvent(\"change\");\n\t\t}\n\t};\n\n\t/**\n\t * Dispatches the \"animationend\" event. Returns true if a handler changed the animation (ex. calling {@link easlejs.Sprite#stop},\n\t * {@link easeljs.Sprite#gotoAndPlay}, etc.)\n\t * @param animation\n\t * @param frame\n\t * @param paused\n\t * @param next\n\t * @param end\n\t * @private\n\t */\n\t_dispatchAnimationEnd (animation, frame, paused, next, end) {\n\t\tlet name = animation ? animation.name : null;\n\t\tif (this.hasEventListener(\"animationend\")) {\n\t\t\tlet evt = new Event(\"animationend\");\n\t\t\tevt.name = name;\n\t\t\tevt.next = next;\n\t\t\tthis.dispatchEvent(evt);\n\t\t}\n\t\t// did the animation get changed in the event stack?:\n\t\tlet changed = (this._animation != animation || this._currentFrame != frame);\n\t\t// if the animation hasn't changed, but the sprite was paused, then we want to stick to the last frame:\n\t\tif (!changed && !paused && this.paused) { this.currentAnimationFrame = end; changed = true; }\n\t\treturn changed;\n\t}\n\n\t/**\n\t * Moves the playhead to the specified frame number or animation.\n\t * @param {String | Number} frameOrAnimation The frame number or animation that the playhead should move to.\n\t * @param {Number} [frame=0] The frame of the animation to go to. Defaults to 0.\n\t * @protected\n\t */\n\t_goto (frameOrAnimation, frame = 0) {\n\t\tthis.currentAnimationFrame = 0;\n\t\tif (isNaN(frameOrAnimation)) {\n\t\t\tlet data = this.spriteSheet.getAnimation(frameOrAnimation);\n\t\t\tif (data) {\n\t\t\t\tthis._animation = data;\n\t\t\t\tthis.currentAnimation = frameOrAnimation;\n\t\t\t\tthis._normalizeFrame(frame);\n\t\t\t}\n\t\t} else {\n\t\t\tthis.currentAnimation = this._animation = null;\n\t\t\tthis._currentFrame = frameOrAnimation;\n\t\t\tthis._normalizeFrame();\n\t\t}\n\t}\n\n}\n\n/**\n * Dispatched when an animation reaches its ends.\n * @event easeljs.Sprite#animationend\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @property {String} name The name of the animation that just ended.\n * @property {String} next The name of the next animation that will be played, or null. This will be the same as name if the animation is looping.\n * @since 0.6.0\n */\n\n/**\n * Dispatched any time the current frame changes. For example, this could be due to automatic advancement on a tick,\n * or calling gotoAndPlay() or gotoAndStop().\n * @event easeljs.Sprite#change\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n */\n","/**\n * @license BitmapText\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Container from \"./Container\";\nimport Sprite from \"./Sprite\";\n\n/**\n * Displays text using bitmap glyphs defined in a sprite sheet. Multi-line text is supported using new line characters,\n * but automatic wrapping is not supported. See the {@link easeljs.BitmapText#spriteSheet} property for more information on defining glyphs.\n *\n * Important: While BitmapText extends Container, it is not designed to be used as one.\n * As such, methods like addChild and removeChild are disabled.\n *\n * @memberof easeljs\n * @extends easeljs.Container\n *\n * @param {String} [text=\"\"] The text to display.\n * @param {SpriteSheet} [spriteSheet=null] The spritesheet that defines the character glyphs.\n */\nexport default class BitmapText extends Container {\n\n\tconstructor (text = \"\", spriteSheet = null) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The text to display.\n\t\t * @type {String}\n\t\t * @default \"\"\n\t\t */\n\t\tthis.text = text;\n\n\t\t/**\n\t\t * A SpriteSheet instance that defines the glyphs for this bitmap text. Each glyph/character\n\t\t * should have a single frame animation defined in the sprite sheet named the same as\n\t\t * corresponding character.\n\t\t *\n\t\t * @example\n\t\t * // the following animation definition would indicate that the frame at index 0 of the spritesheet should be drawn for the \"A\" character.\n\t\t * \"A\": {frames: [0]}\n\t\t * // The short form is also acceptable:\n\t\t * \"A\": 0\n\t\t *\n\t\t * Note that if a character in the text is not found in the sprite sheet, it will also\n\t\t * try to use the alternate case (upper or lower).\n\t\t *\n\t\t * @see {@link easeljs.SpriteSheet}\n\t\t * @type {easeljs.SpriteSheet}\n\t\t * @default null\n\t\t */\n\t\tthis.spriteSheet = spriteSheet;\n\n\t\t/**\n\t\t * The height of each line of text. If 0, then it will use a line height calculated\n\t\t * by checking for the height of the \"1\", \"T\", or \"L\" character (in that order). If\n\t\t * those characters are not defined, it will use the height of the first frame of the\n\t\t * sprite sheet.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.lineHeight = 0;\n\n\t\t/**\n\t\t * This spacing (in pixels) will be added after each character in the output.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.letterSpacing = 0;\n\n\t\t/**\n\t\t * If a space character is not defined in the sprite sheet, then empty pixels equal to\n\t\t * spaceWidth will be inserted instead. If 0, then it will use a value calculated\n\t\t * by checking for the width of the \"1\", \"l\", \"E\", or \"A\" character (in that order). If\n\t\t * those characters are not defined, it will use the width of the first frame of the\n\t\t * sprite sheet.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.spaceWidth = 0;\n\n\t \t/**\n\t\t * @type {Object}\n\t\t * @protected\n\t\t */\n\t\tthis._oldProps = {text:0,spriteSheet:0,lineHeight:0,letterSpacing:0,spaceWidth:0};\n\n\t\t/**\n\t\t * Used to track the object which this class attached listeners to, helps optimize listener attachment.\n\t\t * @type {easeljs.Stage}\n\t\t * @protected\n\t\t */\n\t\tthis._oldStage = null;\n\n\t\t/**\n\t\t * The event listener proxy triggered drawing draw for special circumstances.\n\t\t * @type {Function}\n\t\t * @protected\n\t\t */\n\t\tthis._drawAction = null;\n\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\tif (this.drawCache(ctx, ignoreCache)) { return; }\n\t\tthis._updateState();\n\t\tsuper.draw(ctx, ignoreCache);\n\t}\n\n\tgetBounds () {\n\t\tthis._updateText();\n\t\treturn super.getBounds();\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || (this.spriteSheet && this.spriteSheet.complete && this.text);\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX !== 0 && this.scaleY !== 0 && hasContent);\n\t}\n\n\tclone () {\n\t\treturn this._cloneProps(new BitmapText(this.text, this.spriteSheet));\n\t}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\taddChild () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\taddChildAt () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\tremoveChild () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\tremoveChildAt () {}\n\n\t/**\n\t * Disabled in BitmapText.\n\t */\n\tremoveAllChildren () {}\n\n\t_updateState () {\n\t\tthis._updateText();\n\t}\n\n \t/**\n\t * @param {easeljs.BitmapText} o\n\t * @return {easeljs.BitmapText}\n\t * @protected\n\t */\n\t_cloneProps (o) {\n\t\tsuper._cloneProps(o);\n\t\to.lineHeight = this.lineHeight;\n\t\to.letterSpacing = this.letterSpacing;\n\t\to.spaceWidth = this.spaceWidth;\n\t\treturn o;\n\t}\n\n\t/**\n\t * @param {String} character\n\t * @param {easeljs.SpriteSheet} spriteSheet\n\t * @return {Number}\n\t * @protected\n\t */\n\t_getFrameIndex (character, spriteSheet) {\n\t\tlet c, o = spriteSheet.getAnimation(character);\n\t\tif (!o) {\n\t\t\t(character != (c = character.toUpperCase())) || (character != (c = character.toLowerCase())) || (c = null);\n\t\t\tif (c) { o = spriteSheet.getAnimation(c); }\n\t\t}\n\t\treturn o && o.frames[0];\n\t}\n\n\t/**\n\t * @param {String} character\n\t * @param {easeljs.SpriteSheet} spriteSheet\n\t * @return {Object}\n\t * @protected\n\t */\n\t_getFrame (character, spriteSheet) {\n\t\tlet index = this._getFrameIndex(character, spriteSheet);\n\t\treturn index == null ? index : spriteSheet.getFrame(index);\n\t}\n\n\t/**\n\t * @param {easeljs.SpriteSheet} ss\n\t * @return {Number}\n\t * @protected\n\t */\n\t_getLineHeight (ss) {\n\t\tlet frame = this._getFrame(\"1\", ss) || this._getFrame(\"T\", ss) || this._getFrame(\"L\", ss) || ss.getFrame(0);\n\t\treturn frame ? frame.rect.height : 1;\n\t}\n\n\t/**\n\t * @param {easeljs.SpriteSheet} ss\n\t * @return {Number}\n\t * @protected\n\t */\n\t_getSpaceWidth (ss) {\n\t\tlet frame = this._getFrame(\"1\", ss) || this._getFrame(\"l\", ss) || this._getFrame(\"e\", ss) || this._getFrame(\"a\", ss) || ss.getFrame(0);\n\t\treturn frame ? frame.rect.width : 1;\n\t}\n\n\t_tick (evtObj) {\n\t\tlet stage = this.stage;\n\t\tstage && stage.on(\"drawstart\", this._updateText, this, true);\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_updateText () {\n\t\tlet x = 0, y = 0, o = this._oldProps, change = false, spaceW = this.spaceWidth, lineH = this.lineHeight, ss = this.spriteSheet;\n\t\tlet pool = BitmapText._spritePool, kids = this.children, childIndex = 0, numKids = kids.length, sprite;\n\n\t\tfor (let n in o) {\n\t\t\tif (o[n] != this[n]) {\n\t\t\t\to[n] = this[n];\n\t\t\t\tchange = true;\n\t\t\t}\n\t\t}\n\t\tif (!change) { return; }\n\n\t\tlet hasSpace = !!this._getFrame(\" \", ss);\n\t\tif (!hasSpace && !spaceW) { spaceW = this._getSpaceWidth(ss); }\n\t\tif (!lineH) { lineH = this._getLineHeight(ss); }\n\n\t\tfor (let i = 0, l = this.text.length; i < l; i++) {\n\t\t\tlet character = this.text.charAt(i);\n\t\t\tif (character === \" \" && !hasSpace) {\n\t\t\t\tx += spaceW;\n\t\t\t\tcontinue;\n\t\t\t} else if (character === \"\\n\" || character === \"\\r\") {\n\t\t\t\tif (character === \"\\r\" && this.text.charAt(i+1) === \"\\n\") { i++; } // crlf\n\t\t\t\tx = 0;\n\t\t\t\ty += lineH;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tlet index = this._getFrameIndex(character, ss);\n\t\t\tif (index == null) { continue; }\n\n\t\t\tif (childIndex < numKids) {\n\t\t\t\tsprite = kids[childIndex];\n\t\t\t} else {\n\t\t\t\tkids.push(sprite = pool.length ? pool.pop() : new Sprite());\n\t\t\t\tsprite.parent = this;\n\t\t\t\tnumKids++;\n\t\t\t}\n\t\t\tsprite.spriteSheet = ss;\n\t\t\tsprite.gotoAndStop(index);\n\t\t\tsprite.x = x;\n\t\t\tsprite.y = y;\n\t\t\tchildIndex++;\n\n\t\t\tx += sprite.getBounds().width + this.letterSpacing;\n\t\t}\n\n\t\twhile (numKids > childIndex) {\n\t\t\t // faster than removeChild.\n\t\t\tpool.push(sprite = kids.pop());\n\t\t\tsprite.parent = null;\n\t\t\tnumKids--;\n\t\t}\n\t\tif (pool.length > BitmapText.maxPoolSize) { pool.length = BitmapText.maxPoolSize; }\n\t}\n\n}\n\n/**\n * BitmapText uses Sprite instances to draw text. To reduce the creation and destruction of instances (and thus garbage collection), it maintains\n * an internal object pool of sprite instances to reuse. Increasing this value can cause more sprites to be\n * retained, slightly increasing memory use, but reducing instantiation.\n * @type {Number}\n * @static\n * @default 100\n */\nBitmapText.maxPoolSize = 100;\n/**\n * Sprite object pool.\n * @type {Array}\n * @static\n * @private\n * @readonly\n */\nBitmapText._spritePool = [];\n","/**\n * @license DOMElement\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport DisplayProps from \"../geom/DisplayProps\";\n\n/**\n * This class is still experimental, and more advanced use is likely to be buggy. Please report bugs.\n *\n * A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed\n * within the DOM as though it is child of the {{#crossLink \"Container\"}}{{/crossLink}} it is added to. However, it is\n * not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be\n * drawn in front of or behind the canvas).\n *\n * The position of a DOMElement is relative to their parent node in the DOM. It is recommended that\n * the DOM Object be added to a div that also contains the canvas so that they share the same position\n * on the page.\n *\n * DOMElement is useful for positioning HTML elements over top of canvas content, and for elements\n * that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML\n * content.\n *\n * Mouse Interaction
\n *\n * DOMElement instances are not full EaselJS display objects, and do not participate in EaselJS mouse\n * events or support methods like hitTest. To get mouse events from a DOMElement, you must instead add handlers to\n * the htmlElement (note, this does not support EventDispatcher)\n *\n * var domElement = new createjs.DOMElement(htmlElement);\n * domElement.htmlElement.onclick = function() {\n * console.log(\"clicked\");\n * }\n *\n * Important: This class needs to be notified it is about to be drawn, this will happen automatically\n * if you call stage.update, calling stage.draw or disabling tickEnabled will miss important steps and it will render\n * stale information.\n *\n * @memberof easeljs\n * @extends DisplayObject\n * @param {HTMLElement | String} htmlElement A reference or id for the DOM element to manage.\n */\nexport default class DOMElement extends DisplayObject {\n\n\tconstructor (htmlElement) {\n\t\tsuper();\n\n\t\tif (typeof htmlElement === \"string\") { htmlElement = document.getElementById(htmlElement); }\n\t\tthis.mouseEnabled = false;\n\n\t\tlet style = htmlElement.style;\n\t\tstyle.position = \"absolute\";\n\t\tstyle.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = \"0% 0%\";\n\n\t\t/**\n\t\t * The DOM object to manage.\n\t\t * @type {HTMLElement}\n\t\t */\n\t\tthis.htmlElement = htmlElement;\n\n\t\t/**\n\t\t * @type {easeljs.Matrix2D}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._oldProps = null;\n\n\t\t/**\n\t\t * Used to track the object which this class attached listeners to, helps optimize listener attachment.\n\t\t * @type {easeljs.Stage}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._oldStage = null;\n\t\t/**\n\t\t * The event listener proxy triggered drawing draw for special circumstances.\n\t\t * @type {Function}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._drawAction = null;\n\t}\n\n\tisVisible () {\n\t\treturn this.htmlElement != null;\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\t// this relies on the _tick method because draw isn't called if the parent is not visible.\n\t\t// the actual update happens in _handleDrawEnd\n\t\treturn true;\n\t}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tcache () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tuncache () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tupdateCache () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\thitTest () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tlocalToGlobal () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tglobalToLocal () {}\n\n\t/**\n\t * Disabled in DOMElement.\n\t */\n\tlocalToLocal () {}\n\n\t/**\n\t * DOMElement cannot be cloned.\n\t * @throws DOMElement cannot be cloned\n\t */\n\tclone () {\n\t\tthrow \"DOMElement cannot be cloned.\";\n\t}\n\n\t_tick (evtObj) {\n\t\tlet stage = this.stage;\n\t\tif (stage != null && stage !== this._oldStage) {\n\t\t\tthis._drawAction && stage.off(\"drawend\", this._drawAction);\n\t\t\tthis._drawAction = stage.on(\"drawend\", this._handleDrawEnd, this);\n\t\t\tthis._oldStage = stage;\n\t\t}\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * @param {core.Event} evt\n\t * @protected\n\t */\n\t_handleDrawEnd (evt) {\n\t\tlet o = this.htmlElement;\n\t\tif (!o) { return; }\n\t\tlet style = o.style;\n\n\t\tlet props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;\n\n\t\tlet visibility = props.visible ? \"visible\" : \"hidden\";\n\t\tif (visibility != style.visibility) { style.visibility = visibility; }\n\t\tif (!props.visible) { return; }\n\n\t\tlet oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;\n\t\tlet n = 10000; // precision\n\n\t\tif (!oldMtx || !oldMtx.equals(mtx)) {\n\t\t\tlet str = \"matrix(\" + (mtx.a*n|0)/n +\",\"+ (mtx.b*n|0)/n +\",\"+ (mtx.c*n|0)/n +\",\"+ (mtx.d*n|0)/n +\",\"+ (mtx.tx+0.5|0);\n\t\t\tstyle.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +\",\"+ (mtx.ty+0.5|0) +\")\";\n\t\t\tstyle.MozTransform = str +\"px,\"+ (mtx.ty+0.5|0) +\"px)\";\n\t\t\tif (!oldProps) { oldProps = this._oldProps = new DisplayProps(true, null); }\n\t\t\toldProps.matrix.copy(mtx);\n\t\t}\n\n\t\tif (oldProps.alpha != props.alpha) {\n\t\t\tstyle.opacity = \"\"+(props.alpha*n|0)/n;\n\t\t\toldProps.alpha = props.alpha;\n\t\t}\n\t}\n\n}\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#click\n */\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#dblClick\n */\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#mousedown\n */\n\n/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event easeljs.DOMElement#mouseover\n */\n\n/**\n * Disabled in DOMElement.\n * @event easeljs.DOMElement#tick\n */\n","/**\n * @license Graphics\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport createCanvas from \"../utils/Canvas\";\n\n/**\n * The Graphics class exposes an easy to use API for generating vector drawing instructions and drawing them to a\n * specified context. Note that you can use Graphics without any dependency on the EaselJS framework by calling {@link easeljs.Graphics#draw}\n * directly, or it can be used with the {@link easeljs.Shape} object to draw vector graphics within the\n * context of an EaselJS display list.\n *\n * There are two approaches to working with Graphics object: calling methods on a Graphics instance (the \"Graphics API\"), or\n * instantiating Graphics command objects and adding them to the graphics queue via {@link easeljs.Graphics#append}.\n * The former abstracts the latter, simplifying beginning and ending paths, fills, and strokes.\n *\n * Tiny API
\n * The Graphics class also includes a \"tiny API\", which is one or two-letter methods that are shortcuts for all of the\n * Graphics methods. These methods are great for creating compact instructions, and is used by the Toolkit for CreateJS\n * to generate readable code. All tiny methods are marked as protected, so you can view them by enabling protected\n * descriptions in the docs.\n *\n * \n * Tiny Method Tiny Method mt {@link easeljs.Graphics#moveTo} \n * lt {@link easeljs.Graphics#lineTo} a/at {@link easeljs.Graphics#arc} / {@link easeljs.Graphics#arcTo} \n * bt {@link easeljs.Graphics#bezierCurveTo} qt {@link easeljs.Graphics#quadraticCurveTo} (also curveTo) \n * r {@link easeljs.Graphics#rect} cp {@link easeljs.Graphics#closePath} \n * c {@link easeljs.Graphics#clear} f {@link easeljs.Graphics#beginFill} \n * lf {@link easeljs.Graphics#beginLinearGradientFill} rf {@link easeljs.Graphics#beginRadialGradientFill} \n * bf {@link easeljs.Graphics#beginBitmapFill} ef {@link easeljs.Graphics#endFill} \n * ss / sd {@link easeljs.Graphics#setStrokeStyle} / {@link easeljs.Graphics#setStrokeDash} s {@link easeljs.Graphics#beginStroke} \n * ls {@link easeljs.Graphics#beginLinearGradientStroke} rs {@link easeljs.Graphics#beginRadialGradientStroke} \n * bs {@link easeljs.Graphics#beginBitmapStroke} es {@link easeljs.Graphics#endStroke} \n * dr {@link easeljs.Graphics#drawRect} rr {@link easeljs.Graphics#drawRoundRect} \n * rc {@link easeljs.Graphics#drawRoundRectComplex} dc {@link easeljs.Graphics#drawCircle} \n * de {@link easeljs.Graphics#drawEllipse} dp {@link easeljs.Graphics#drawPolyStar} \n * p {@link easeljs.Graphics#decodePath}
\n *\n * @example\n * var g = new createjs.Graphics();\n * g.setStrokeStyle(1);\n * g.beginStroke(\"#000000\");\n * g.beginFill(\"red\");\n * g.drawCircle(0,0,30);\n *\n * @example\n * // All drawing methods in Graphics return the Graphics instance, so they can be chained together.\n * graphics.beginStroke(\"red\").beginFill(\"blue\").drawRect(20, 20, 100, 50);\n *\n * @example\n * // Each graphics API call generates a command object (see below). The last command to be created can be accessed via .command\n * let fillCommand = graphics.beginFill(\"red\").command;\n * fillCommand.style = \"blue\";\n * // or change it to a bitmap fill:\n * fillCommand.bitmap(img);\n *\n * @example\n * // For more direct control of rendering, you can instantiate and append command objects to the graphics queue directly.\n * // In this case, you need to manage path creation manually, and ensure that fill/stroke is applied to a defined path:\n *\n * // start a new path. Graphics.beginCmd is a reusable BeginPath instance:\n * graphics.append(Graphics.beginCmd);\n * // we need to define the path before applying the fill:\n * let circle = new Graphics.Circle(0,0,30);\n * graphics.append(circle);\n * // fill the path we just defined:\n * let fill = new Graphics.Fill(\"red\");\n * graphics.append(fill);\n *\n * // These approaches can be used together, for example to insert a custom command:\n * graphics.beginFill(\"red\");\n * let customCommand = new CustomSpiralCommand(etc);\n * graphics.append(customCommand);\n * graphics.beginFill(\"blue\");\n * graphics.drawCircle(0, 0, 30);\n *\n * @example Using the Tiny API \n * graphics.s(\"red\").f(\"blue\").r(20, 20, 100, 50);\n *\n * @see {@link easeljs.Graphics#append}\n * @memberof easeljs\n */\nexport default class Graphics {\n\n\tconstructor () {\n\t\t/**\n\t\t * Holds a reference to the last command that was created or appended. For example, you could retain a reference\n\t\t * to a Fill command in order to dynamically update the color later by using:\n\t\t *\n\t\t * @example\n\t\t * let fill = graphics.beginFill(\"red\").command;\n\t\t * // update color later:\n\t\t * fill.style = \"yellow\";\n\t\t *\n\t\t * @type {Object}\n\t\t * @default null\n\t\t */\n\t\tthis.command = null;\n\n\n\t// private properties\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.Stroke}\n\t\t */\n\t\tthis._stroke = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeStyle}\n\t\t */\n\t\tthis._strokeStyle = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeStyle}\n\t\t */\n\t\tthis._oldStrokeStyle = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeDash}\n\t\t */\n\t\tthis._strokeDash = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.StrokeDash}\n\t\t */\n\t\tthis._oldStrokeDash = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {easeljs.Graphics.Fill}\n\t\t */\n\t\tthis._fill = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis._strokeIgnoreScale = false;\n\n\t\t/**\n\t\t * Indicates the last instruction index that was committed.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._commitIndex = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._instructions = [];\n\n\t\t/**\n\t\t * Uncommitted instructions.\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._activeInstructions = [];\n\n\t\t/**\n\t\t * This indicates that there have been changes to the activeInstruction list since the last updateInstructions call.\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._dirty = false;\n\n\t\t/**\n\t\t * Index to draw from if a store operation has happened.\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._storeIndex = 0;\n\n\t\t/**\n\t\t * Maps the familiar ActionScript `curveTo()` method to the functionally similar {@link easeljs.Graphics#quadraticCurveTo} method.\n\t\t * @param {Number} cpx\n\t\t * @param {Number} cpy\n\t\t * @param {Number} x\n\t\t * @param {Number} y\n\t\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t\t * @chainable\n\t\t */\n\t\tthis.curveTo = this.quadraticCurveTo;\n\n\t\t/**\n\t\t * Maps the familiar ActionScript `drawRect()` method to the functionally similar {@link easeljs.Graphics#rect} method.\n\t\t * @param {Number} x\n\t\t * @param {Number} y\n\t\t * @param {Number} w Width of the rectangle\n\t\t * @param {Number} h Height of the rectangle\n\t\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t\t * @chainable\n\t\t */\n\t\tthis.drawRect = this.rect;\n\n\t\t// tiny api\n\t\tthis.mt = this.moveTo;\n\t\tthis.lt = this.lineTo;\n\t\tthis.at = this.arcTo;\n\t\tthis.bt = this.bezierCurveTo;\n\t\tthis.qt = this.quadraticCurveTo;\n\t\tthis.a = this.arc;\n\t\tthis.r = this.rect;\n\t\tthis.cp = this.closePath;\n\t\tthis.c = this.clear;\n\t\tthis.f = this.beginFill;\n\t\tthis.lf = this.beginLinearGradientFill;\n\t\tthis.rf = this.beginRadialGradientFill;\n\t\tthis.bf = this.beginBitmapFill;\n\t\tthis.ef = this.endFill;\n\t\tthis.ss = this.setStrokeStyle;\n\t\tthis.sd = this.setStrokeDash;\n\t\tthis.s = this.beginStroke;\n\t\tthis.ls = this.beginLinearGradientStroke;\n\t\tthis.rs = this.beginRadialGradientStroke;\n\t\tthis.bs = this.beginBitmapStroke;\n\t\tthis.es = this.endStroke;\n\t\tthis.dr = this.drawRect;\n\t\tthis.rr = this.drawRoundRect;\n\t\tthis.rc = this.drawRoundRectComplex;\n\t\tthis.dc = this.drawCircle;\n\t\tthis.de = this.drawEllipse;\n\t\tthis.dp = this.drawPolyStar;\n\t\tthis.p = this.decodePath;\n\n\t\tthis.clear();\n\t}\n\n\t/**\n\t * Returns a CSS compatible color string based on the specified RGB numeric color values in the format\n\t * \"rgba(255,255,255,1.0)\", or if alpha is null then in the format \"rgb(255,255,255)\".\n\t * It also supports passing a single hex color value as the first param, and an optional alpha value as the second\n\t * param.\n\t *\n\t * @example\n\t * Graphics.getRGB(50, 100, 150, 0.5); // rgba(50,100,150,0.5)\n\t * Graphics.getRGB(0xFF00FF, 0.2); // rgba(255,0,255,0.2)\n\t *\n\t * @static\n\t * @param {Number} r The red component for the color, between 0 and 0xFF (255).\n\t * @param {Number} g The green component for the color, between 0 and 0xFF (255).\n\t * @param {Number} b The blue component for the color, between 0 and 0xFF (255).\n\t * @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.\n\t * @return {String} A CSS compatible color string based on the specified RGB numeric color values in the format\n\t * \"rgba(255,255,255,1.0)\", or if alpha is null then in the format \"rgb(255,255,255)\".\n\t */\n\tstatic getRGB (r, g, b, alpha) {\n\t\tif (r != null && b == null) {\n\t\t\talpha = g;\n\t\t\tb = r&0xFF;\n\t\t\tg = r>>8&0xFF;\n\t\t\tr = r>>16&0xFF;\n\t\t}\n\t\tif (alpha == null) {\n\t\t\treturn `rgb(${r},${g},${b})`;\n\t\t} else {\n\t\t\treturn `rgba(${r},${g},${b},${alpha})`;\n\t\t}\n\t}\n\n\t/**\n\t * Returns a CSS compatible color string based on the specified HSL numeric color values in the format \"hsla(360,100,100,1.0)\",\n\t * or if alpha is null then in the format \"hsl(360,100,100)\".\n\t *\n\t * @example\n\t * Graphics.getHSL(150, 100, 70); // hsl(150,100,70)\n\t *\n\t * @static\n\t * @param {Number} hue The hue component for the color, between 0 and 360.\n\t * @param {Number} saturation The saturation component for the color, between 0 and 100.\n\t * @param {Number} lightness The lightness component for the color, between 0 and 100.\n\t * @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.\n\t * @return {String} A CSS compatible color string based on the specified HSL numeric color values in the format\n\t * \"hsla(360,100,100,1.0)\", or if alpha is null then in the format \"hsl(360,100,100)\".\n\t */\n\tstatic getHSL (hue, saturation, lightness, alpha) {\n\t\tif (alpha == null) {\n\t\t\treturn `hsl(${hue % 360},${saturation}%,${lightness}%)`;\n\t\t} else {\n\t\t\treturn `hsl(${hue % 360},${saturation}%,${lightness}%,${alpha})`;\n\t\t}\n\t}\n\n\t/**\n\t * Returns the graphics instructions array. Each entry is a graphics command object (ex. Graphics.Fill, Graphics.Rect)\n\t * Modifying the returned array directly is not recommended, and is likely to result in unexpected behaviour.\n\t *\n\t * This property is mainly intended for introspection of the instructions (ex. for graphics export).\n\t * @type {Array}\n\t * @readonly\n\t */\n\tget instructions () {\n\t\tthis._updateInstructions();\n\t\treturn this._instructions;\n\t}\n\n\t/**\n\t * Returns true if this Graphics instance has no drawing commands.\n\t * @return {Boolean} Returns true if this Graphics instance has no drawing commands.\n\t */\n\tisEmpty () {\n\t\treturn !(this._instructions.length || this._activeInstructions.length);\n\t}\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t *\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Object} data Optional data that is passed to graphics command exec methods. When called from a Shape instance, the shape passes itself as the data parameter. This can be used by custom graphic commands to insert contextual data.\n\t */\n\tdraw (ctx, data) {\n\t\tthis._updateInstructions();\n\t\tlet instr = this._instructions;\n\t\tconst l = instr.length;\n\t\tfor (let i = this._storeIndex; i < l; i++) {\n\t\t\tinstr[i].exec(ctx, data);\n\t\t}\n\t}\n\n\t/**\n\t * Draws only the path described for this Graphics instance, skipping any non-path instructions, including fill and\n\t * stroke descriptions. Used for `DisplayObject.mask` to draw the clipping path, for example.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t *\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t */\n\tdrawAsPath (ctx) {\n\t\tthis._updateInstructions();\n\t\tlet instr, instrs = this._instructions;\n\t\tconst l = instrs.length;\n\t\tfor (let i = this._storeIndex; i < l; i++) {\n\t\t\t// the first command is always a beginPath command.\n\t\t\tif ((instr = instrs[i]).path !== false) { instr.exec(ctx); }\n\t\t}\n\t}\n\n\t/**\n\t * Moves the drawing point to the specified position.\n\t * A tiny API method \"mt\" also exists.\n\t * @param {Number} x The x coordinate the drawing point should move to.\n\t * @param {Number} y The y coordinate the drawing point should move to.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls).\n\t * @chainable\n\t */\n\tmoveTo (x, y) {\n\t\treturn this.append(new MoveTo(x,y), true);\n\t}\n\n\t/**\n\t * Draws a line from the current drawing point to the specified position, which become the new current drawing\n\t * point. Note that you *must* call {@link easeljs.Graphics#moveTo} before the first `lineTo()`.\n\t * A tiny API method \"lt\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-(paths) \"WHATWG spec\"}\n\t * @param {Number} x The x coordinate the drawing point should draw to.\n\t * @param {Number} y The y coordinate the drawing point should draw to.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tlineTo (x, y) {\n\t\treturn this.append(new LineTo(x,y));\n\t}\n\n\t/**\n\t * Draws an arc with the specified control points and radius.\n\t * A tiny API method \"at\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arcto \"WHATWG spec\"}\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} x2\n\t * @param {Number} y2\n\t * @param {Number} radius\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tarcTo (x1, y1, x2, y2, radius) {\n\t\treturn this.append(new ArcTo(x1, y1, x2, y2, radius));\n\t}\n\n\t/**\n\t * Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y).\n\t * A tiny API method \"a\" also exists.\n\t *\n\t * @example\n\t * // draw a full circle with a radius of 20 centered at (100, 100)\n\t * arc(100, 100, 20, 0, Math.PI*2);\n\t *\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arc \"WHATWG spec\"}\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} radius\n\t * @param {Number} startAngle Measured in radians.\n\t * @param {Number} endAngle Measured in radians.\n\t * @param {Boolean} anticlockwise\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tarc (x, y, radius, startAngle, endAngle, anticlockwise) {\n\t\treturn this.append(new Arc(x, y, radius, startAngle, endAngle, anticlockwise));\n\t}\n\n\t/**\n\t * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy).\n\t * A tiny API method \"qt\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-quadraticcurveto \"WHATWG spec\"}\n\t * @param {Number} cpx\n\t * @param {Number} cpy\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tquadraticCurveTo (cpx, cpy, x, y) {\n\t\treturn this.append(new QuadraticCurveTo(cpx, cpy, x, y));\n\t}\n\n\t/**\n\t * Draws a bezier curve from the current drawing point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y).\n\t * A tiny API method \"bt\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-beziercurveto \"WHATWG spec\"}\n\t * @param {Number} cp1x\n\t * @param {Number} cp1y\n\t * @param {Number} cp2x\n\t * @param {Number} cp2y\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) {\n\t\treturn this.append(new BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y));\n\t}\n\n\t/**\n\t * Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke.\n\t * A tiny API method \"r\" also exists.\n\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-rect \"WHATWG spec\"}\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w Width of the rectangle\n\t * @param {Number} h Height of the rectangle\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\trect (x, y, w, h) {\n\t\treturn this.append(new Rect(x, y, w, h));\n\t}\n\n\t/**\n\t * Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified\n\t * since the fill or stroke was last set.\n\t * A tiny API method \"cp\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tclosePath () {\n\t\treturn this._activeInstructions.length ? this.append(new ClosePath()) : this;\n\t}\n\n\t/**\n\t * Clears all drawing instructions, effectively resetting this Graphics instance. Any line and fill styles will need\n\t * to be redefined to draw shapes following a clear call.\n\t * A tiny API method \"c\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tclear () {\n\t\tthis._instructions.length = this._activeInstructions.length = this._commitIndex = 0;\n\t\tthis._strokeStyle = this._oldStrokeStyle = this._stroke = this._fill = this._strokeDash = this._oldStrokeDash = null;\n\t\tthis._dirty = this._strokeIgnoreScale = false;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Begins a fill with the specified color. This ends the current sub-path.\n\t * A tiny API method \"f\" also exists.\n\t * @param {String} color A CSS compatible color value (ex. \"red\", \"#FF0000\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no fill.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginFill (color) {\n\t\treturn this._setFill(color ? new Fill(color) : null);\n\t}\n\n\t/**\n\t * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1).\n\t * A tiny API method \"lf\" also exists.\n\t *\n\t * @example Define a black to white vertical gradient ranging from 20px to 120px, and draw a square to display it \n\t * graphics.beginLinearGradientFill([\"#000\",\"#FFF\"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define a gradient\n\t * drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw\n\t * the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginLinearGradientFill (colors, ratios, x0, y0, x1, y1) {\n\t\treturn this._setFill(new Fill().linearGradient(colors, ratios, x0, y0, x1, y1));\n\t}\n\n\t/**\n\t * Begins a radial gradient fill. This ends the current sub-path.\n\t * A tiny API method \"rf\" also exists.\n\t *\n\t * @example Define a red to blue radial gradient centered at (100, 100), with a radius of 50, and draw a circle to display it \n\t * graphics.beginRadialGradientFill([\"#F00\",\"#00F\"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginRadialGradientFill (colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\treturn this._setFill(new Fill().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));\n\t}\n\n\t/**\n\t * Begins a pattern fill using the specified image. This ends the current sub-path.\n\t * A tiny API method \"bf\" also exists.\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} repetition Optional. Indicates whether to repeat the image in the fill area. One of \"repeat\",\n\t * \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\". Note that Firefox does not support \"repeat-x\" or\n\t * \"repeat-y\" (latest tests were in FF 20.0), and will default to \"repeat\".\n\t * @param {easeljs.Matrix2D} matrix Optional. Specifies a transformation matrix for the bitmap fill. This transformation\n\t * will be applied relative to the parent transform.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginBitmapFill (image, repetition, matrix) {\n\t\treturn this._setFill(new Fill(null, matrix).bitmap(image, repetition));\n\t}\n\n\t/**\n\t * Ends the current sub-path, and begins a new one with no fill. Functionally identical to `beginFill(null)`.\n\t * A tiny API method \"ef\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tendFill () {\n\t\treturn this.beginFill();\n\t}\n\n\t/**\n\t * Sets the stroke style.\n\t * A tiny API method \"ss\" also exists.\n\t *\n\t * @example\n\t * graphics.setStrokeStyle(8,\"round\").beginStroke(\"#F00\");\n\t *\n\t * @param {Number} thickness The width of the stroke.\n\t * @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt,\n\t * round, or square. Defaults to \"butt\". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with\n\t * the tiny API.\n\t * @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet.\n\t * One of bevel, round, or miter. Defaults to \"miter\". Also accepts the values 0 (miter), 1 (round), and 2 (bevel)\n\t * for use with the tiny API.\n\t * @param {Number} [miterLimit=10] If joints is set to \"miter\", then you can specify a miter limit ratio which\n\t * controls at what point a mitered joint will be clipped.\n\t * @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless\n\t * of active transformations.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tsetStrokeStyle (thickness, caps = 0, joints = 0, miterLimit = 10, ignoreScale = false) {\n\t\tthis._updateInstructions(true);\n\t\tthis._strokeStyle = this.command = new StrokeStyle(thickness, caps, joints, miterLimit, ignoreScale);\n\n\t\t// ignoreScale lives on Stroke, not StrokeStyle, so we do a little trickery:\n\t\tif (this._stroke) { this._stroke.ignoreScale = ignoreScale; }\n\t\tthis._strokeIgnoreScale = ignoreScale;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Sets or clears the stroke dash pattern.\n\t * A tiny API method `sd` also exists.\n\t *\n\t * @example\n\t * graphics.setStrokeDash([20, 10], 0);\n\t *\n\t * @param {Array} [segments] An array specifying the dash pattern, alternating between line and gap.\n\t * For example, `[20,10]` would create a pattern of 20 pixel lines with 10 pixel gaps between them.\n\t * Passing null or an empty array will clear the existing stroke dash.\n\t * @param {Number} [offset=0] The offset of the dash pattern. For example, you could increment this value to create a \"marching ants\" effect.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tsetStrokeDash (segments, offset = 0) {\n\t\tthis._updateInstructions(true);\n\t\tthis._strokeDash = this.command = new StrokeDash(segments, offset);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Begins a stroke with the specified color. This ends the current sub-path.\n\t * A tiny API method \"s\" also exists.\n\t *\n\t * @param {String} color A CSS compatible color value (ex. \"#FF0000\", \"red\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no stroke.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginStroke (color) {\n\t\treturn this._setStroke(color ? new Stroke(color) : null);\n\t}\n\n\t/**\n\t * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path.\n\t * A tiny API method \"ls\" also exists.\n\t *\n\t * @example Define a black to white vertical gradient ranging from 20px to 120px, and draw a square to display it \n\t * graphics.setStrokeStyle(10)\n\t * .beginLinearGradientStroke([\"#000\",\"#FFF\"], [0, 1], 0, 20, 0, 120)\n\t * .drawRect(20, 20, 120, 120);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginLinearGradientStroke (colors, ratios, x0, y0, x1, y1) {\n\t\treturn this._setStroke(new Stroke().linearGradient(colors, ratios, x0, y0, x1, y1));\n\t}\n\n\t/**\n\t * Begins a radial gradient stroke. This ends the current sub-path.\n\t * A tiny API method \"rs\" also exists.\n\t *\n\t * @example Define a red to blue radial gradient centered at (100, 100), with a radius of 50, and draw a rectangle to display it \n\t * graphics.setStrokeStyle(10)\n\t * .beginRadialGradientStroke([\"#F00\",\"#00F\"], [0, 1], 100, 100, 0, 100, 100, 50)\n\t * .drawRect(50, 90, 150, 110);\n\t *\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color\n\t * to 100%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginRadialGradientStroke (colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\treturn this._setStroke(new Stroke().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));\n\t}\n\n\t/**\n\t * Begins a pattern fill using the specified image. This ends the current sub-path. Note that unlike bitmap fills,\n\t * strokes do not currently support a matrix parameter due to limitations in the canvas API.\n\t * A tiny API method \"bs\" also exists.\n\t *\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} [repetition=\"repeat\"] Indicates whether to repeat the image in the fill area. One of\n\t * \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\".\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tbeginBitmapStroke (image, repetition = \"repeat\") {\n\t\t// NOTE: matrix is not supported for stroke because transforms on strokes also affect the drawn stroke width.\n\t\treturn this._setStroke(new Stroke().bitmap(image, repetition));\n\t}\n\n\t/**\n\t * Ends the current sub-path, and begins a new one with no stroke. Functionally identical to `beginStroke(null)`.\n\t * A tiny API method \"es\" also exists.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tendStroke () {\n\t\treturn this.beginStroke();\n\t}\n\n\t/**\n\t * Draws a rounded rectangle with all corners with the specified radius.\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w\n\t * @param {Number} h\n\t * @param {Number} radius Corner radius.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawRoundRect (x, y, w, h, radius) {\n\t\treturn this.drawRoundRectComplex(x, y, w, h, radius, radius, radius, radius);\n\t}\n\n\t/**\n\t * Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii.\n\t * A tiny API method \"rc\" also exists.\n\t * @param {Number} x The horizontal coordinate to draw the round rect.\n\t * @param {Number} y The vertical coordinate to draw the round rect.\n\t * @param {Number} w The width of the round rect.\n\t * @param {Number} h The height of the round rect.\n\t * @param {Number} radiusTL Top left corner radius.\n\t * @param {Number} radiusTR Top right corner radius.\n\t * @param {Number} radiusBR Bottom right corner radius.\n\t * @param {Number} radiusBL Bottom left corner radius.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawRoundRectComplex (x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {\n\t\treturn this.append(new RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL));\n\t}\n\n\t/**\n\t * Draws a circle with the specified radius at (x, y).\n\t * A tiny API method \"dc\" also exists.\n\t *\n\t * @example\n\t * let g = new Graphics();\n\t * g.setStrokeStyle(1);\n\t * g.beginStroke(Graphics.getRGB(0,0,0));\n\t * g.beginFill(Graphics.getRGB(255,0,0));\n\t * g.drawCircle(0,0,3);\n\t * let s = new Shape(g);\n\t * s.x = 100;\n\t * s.y = 100;\n\t * stage.addChild(s);\n\t * stage.update();\n\t *\n\t * @param {Number} x x coordinate center point of circle.\n\t * @param {Number} y y coordinate center point of circle.\n\t * @param {Number} radius Radius of circle.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawCircle (x, y, radius) {\n\t\treturn this.append(new Circle(x, y, radius));\n\t}\n\n\t/**\n\t * Draws an ellipse (oval) with a specified width (w) and height (h). Similar to {@link easels.Graphics#drawCircle},\n\t * except the width and height can be different.\n\t * A tiny API method \"de\" also exists.\n\t * @param {Number} x The left coordinate point of the ellipse. Note that this is different from {@link easels.Graphics#drawCircle}\n\t * which draws from center.\n\t * @param {Number} y The top coordinate point of the ellipse. Note that this is different from {@link easels.Graphics#drawCircle}\n\t * which draws from the center.\n\t * @param {Number} w The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this\n\t * number.\n\t * @param {Number} h The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawEllipse (x, y, w, h) {\n\t\treturn this.append(new Ellipse(x, y, w, h));\n\t}\n\n\t/**\n\t * Draws a star if pointSize is greater than 0, or a regular polygon if pointSize is 0 with the specified number of points.\n\t * A tiny API method \"dp\" also exists.\n\t *\n\t * @example Draw a 5 pointed star shape centered at 100, 100 and with a radius of 50 \n\t * graphics.beginFill(\"#FF0\").drawPolyStar(100, 100, 50, 5, 0.6, -90);\n\t * // Note: -90 makes the first point vertical\n\t *\n\t * @param {Number} x Position of the center of the shape.\n\t * @param {Number} y Position of the center of the shape.\n\t * @param {Number} radius The outer radius of the shape.\n\t * @param {Number} sides The number of points on the star or sides on the polygon.\n\t * @param {Number} pointSize The depth or \"pointy-ness\" of the star points. A pointSize of 0 will draw a regular\n\t * polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.\n\t * @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point\n\t * directly to the right of the center.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdrawPolyStar (x, y, radius, sides, pointSize, angle) {\n\t\treturn this.append(new PolyStar(x, y, radius, sides, pointSize, angle));\n\t}\n\n\t/**\n\t * Appends a graphics command object to the graphics queue. Command objects expose an \"exec\" method\n\t * that accepts two parameters: the Context2D to operate on, and an arbitrary data object passed into\n\t * {@link easeljs.Graphics#draw}. The latter will usually be the Shape instance that called draw.\n\t *\n\t * This method is used internally by Graphics methods, such as drawCircle, but can also be used directly to insert\n\t * built-in or custom graphics commands.\n\t *\n\t * @example\n\t * // attach data to our shape, so we can access it during the draw:\n\t * shape.color = \"red\";\n\t *\n\t * // append a Circle command object:\n\t * shape.graphics.append(new Graphics.Circle(50, 50, 30));\n\t *\n\t * // append a custom command object with an exec method that sets the fill style\n\t * // based on the shape's data, and then fills the circle.\n\t * shape.graphics.append({\n\t * exec: (ctx, shape) => {\n\t * ctx.fillStyle = shape.color;\n\t * ctx.fill();\n\t * }\n\t * });\n\t *\n\t * @param {Object} command A graphics command object exposing an \"exec\" method.\n\t * @param {Boolean} clean The clean param is primarily for internal use. A value of true indicates that a command does not generate a path that should be stroked or filled.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tappend (command, clean) {\n\t\tthis._activeInstructions.push(command);\n\t\tthis.command = command;\n\t\tif (!clean) { this._dirty = true; }\n\t\treturn this;\n\t}\n\n\t/**\n\t * Decodes a compact encoded path string into a series of draw instructions.\n\t * This format is not intended to be human readable, and is meant for use by authoring tools.\n\t * The format uses a base64 character set, with each character representing 6 bits, to define a series of draw\n\t * commands.\n\t *\n\t * Each command is comprised of a single \"header\" character followed by a variable number of alternating x and y\n\t * position values. Reading the header bits from left to right (most to least significant): bits 1 to 3 specify the\n\t * type of operation (0-moveTo, 1-lineTo, 2-quadraticCurveTo, 3-bezierCurveTo, 4-closePath, 5-7 unused). Bit 4\n\t * indicates whether position values use 12 bits (2 characters) or 18 bits (3 characters), with a one indicating the\n\t * latter. Bits 5 and 6 are currently unused.\n\t *\n\t * Following the header is a series of 0 (closePath), 2 (moveTo, lineTo), 4 (quadraticCurveTo), or 6 (bezierCurveTo)\n\t * parameters. These parameters are alternating x/y positions represented by 2 or 3 characters (as indicated by the\n\t * 4th bit in the command char). These characters consist of a 1 bit sign (1 is negative, 0 is positive), followed\n\t * by an 11 (2 char) or 17 (3 char) bit integer value. All position values are in tenths of a pixel. Except in the\n\t * case of move operations which are absolute, this value is a delta from the previous x or y position (as\n\t * appropriate).\n\t *\n\t * For example, the string \"A3cAAMAu4AAA\" represents a line starting at -150,0 and ending at 150,0.\n\t *
A - bits 000000. First 3 bits (000) indicate a moveTo operation. 4th bit (0) indicates 2 chars per\n\t * parameter.\n\t *
n0 - 110111011100. Absolute x position of -150.0px. First bit indicates a negative value, remaining bits\n\t * indicate 1500 tenths of a pixel.\n\t *
AA - 000000000000. Absolute y position of 0.\n\t *
I - 001100. First 3 bits (001) indicate a lineTo operation. 4th bit (1) indicates 3 chars per parameter.\n\t *
Au4 - 000000101110111000. An x delta of 300.0px, which is added to the previous x value of -150.0px to\n\t * provide an absolute position of +150.0px.\n\t *
AAA - 000000000000000000. A y delta value of 0.\n\t *\n\t * A tiny API method \"p\" also exists.\n\t *\n\t * @param {String} str The path string to decode.\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tdecodePath (str) {\n\t\tlet instructions = [this.moveTo, this.lineTo, this.quadraticCurveTo, this.bezierCurveTo, this.closePath];\n\t\tlet paramCount = [2, 2, 4, 6, 0];\n\t\tlet i = 0;\n\t\tconst l = str.length;\n\t\tlet params = [];\n\t\tlet x = 0, y = 0;\n\t\tlet base64 = Graphics._BASE_64;\n\n\t\twhile (i < l) {\n\t\t\tlet c = str.charAt(i);\n\t\t\tlet n = base64[c];\n\t\t\tlet fi = n>>3; // highest order bits 1-3 code for operation.\n\t\t\tlet f = instructions[fi];\n\t\t\t// check that we have a valid instruction & that the unused bits are empty:\n\t\t\tif (!f || (n&3)) { throw `Bad path data (@${i}):c`; }\n\t\t\tconst pl = paramCount[fi];\n\t\t\tif (!fi) { x=y=0; } // move operations reset the position.\n\t\t\tparams.length = 0;\n\t\t\ti++;\n\t\t\tlet charCount = (n>>2&1)+2; // 4th header bit indicates number size for this operation.\n\t\t\tfor (let p = 0; p < pl; p++) {\n\t\t\t\tlet num = base64[str.charAt(i)];\n\t\t\t\tlet sign = (num>>5) ? -1 : 1;\n\t\t\t\tnum = ((num&31)<<6)|(base64[str.charAt(i+1)]);\n\t\t\t\tif (charCount === 3) { num = (num<<6)|(base64[str.charAt(i+2)]); }\n\t\t\t\tnum = sign*num/10;\n\t\t\t\tif (p%2) { x = (num += x); }\n\t\t\t\telse { y = (num += y); }\n\t\t\t\tparams[p] = num;\n\t\t\t\ti += charCount;\n\t\t\t}\n\t\t\tf.apply(this, params);\n\t\t}\n\t\treturn this;\n\t}\n\n\t/**\n\t * Stores all graphics commands so they won't be executed in future draws. Calling store() a second time adds to\n\t * the existing store. This also affects `drawAsPath()`.\n\t *\n\t * This is useful in cases where you are creating vector graphics in an iterative manner (ex. generative art), so\n\t * that only new graphics need to be drawn (which can provide huge performance benefits), but you wish to retain all\n\t * of the vector instructions for later use (ex. scaling, modifying, or exporting).\n\t *\n\t * Note that calling store() will force the active path (if any) to be ended in a manner similar to changing\n\t * the fill or stroke.\n\t *\n\t * For example, consider a application where the user draws lines with the mouse. As each line segment (or collection of\n\t * segments) are added to a Shape, it can be rasterized using {@link easeljs.DisplayObject#updateCache},\n\t * and then stored, so that it can be redrawn at a different scale when the application is resized, or exported to SVGraphics.\n\t *\n\t * @example\n\t * // set up cache:\n\t * shape.cache(0,0,500,500,scale);\n\t *\n\t * // when the user drags, draw a new line:\n\t * shape.graphics.moveTo(oldX,oldY).lineTo(newX,newY);\n\t * // then draw it into the existing cache:\n\t * shape.updateCache(\"source-over\");\n\t * // store the new line, so it isn't redrawn next time:\n\t * shape.store();\n\t *\n\t * // then, when the window resizes, we can re-render at a different scale:\n\t * // first, unstore all our lines:\n\t * shape.unstore();\n\t * // then cache using the new scale:\n\t * shape.cache(0,0,500,500,newScale);\n\t * // finally, store the existing commands again:\n\t * shape.store();\n\t *\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tstore () {\n\t\tthis._updateInstructions(true);\n\t\tthis._storeIndex = this._instructions.length;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Unstores any graphics commands that were previously stored using {@link easeljs.Graphics#store}\n\t * so that they will be executed in subsequent draw calls.\n\t *\n\t * @return {easeljs.Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tunstore () {\n\t\tthis._storeIndex = 0;\n\t\treturn this;\n\t}\n\n\t/**\n\t * Returns a clone of this Graphics instance. Note that the individual command objects are not cloned.\n\t * @return {easeljs.Graphics} A clone of the current Graphics instance.\n\t */\n\tclone () {\n\t\tlet o = new Graphics();\n\t\to.command = this.command;\n\t\to._stroke = this._stroke;\n\t\to._strokeStyle = this._strokeStyle;\n\t\to._strokeDash = this._strokeDash;\n\t\to._strokeIgnoreScale = this._strokeIgnoreScale;\n\t\to._fill = this._fill;\n\t\to._instructions = this._instructions.slice();\n\t\to._commitIndex = this._commitIndex;\n\t\to._activeInstructions = this._activeInstructions.slice();\n\t\to._dirty = this._dirty;\n\t\to._storeIndex = this._storeIndex;\n\t\treturn o;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * @param {Boolean} commit\n\t * @protected\n\t */\n\t_updateInstructions (commit) {\n\t\tlet instr = this._instructions, active = this._activeInstructions, commitIndex = this._commitIndex;\n\n\t\tif (this._dirty && active.length) {\n\t\t\tinstr.length = commitIndex; // remove old, uncommitted commands\n\t\t\tinstr.push(Graphics.beginCmd);\n\n\t\t\tconst l = active.length, ll = instr.length;\n\t\t\tinstr.length = ll+l;\n\t\t\tfor (let i = 0; i < l; i++) { instr[i+ll] = active[i]; }\n\n\t\t\tif (this._fill) { instr.push(this._fill); }\n\t\t\tif (this._stroke) {\n\t\t\t\t// doesn't need to be re-applied if it hasn't changed.\n\t\t\t\tif (this._strokeDash !== this._oldStrokeDash) {\n\t\t\t\t\tinstr.push(this._strokeDash);\n\t\t\t\t}\n\t\t\t\tif (this._strokeStyle !== this._oldStrokeStyle) {\n\t\t\t\t\tinstr.push(this._strokeStyle);\n\t\t\t\t}\n\t\t\t\tif (commit) {\n\t\t\t\t\tthis._oldStrokeDash = this._strokeDash;\n\t\t\t\t\tthis._oldStrokeStyle = this._strokeStyle;\n\t\t\t\t}\n\t\t\t\tinstr.push(this._stroke);\n\t\t\t}\n\n\t\t\tthis._dirty = false;\n\t\t}\n\n\t\tif (commit) {\n\t\t\tactive.length = 0;\n\t\t\tthis._commitIndex = instr.length;\n\t\t}\n\t};\n\n\t/**\n\t * @param {easeljs.Graphics.Fill} fill\n\t * @protected\n\t */\n\t_setFill (fill) {\n\t\tthis._updateInstructions(true);\n\t\tthis.command = this._fill = fill;\n\t\treturn this;\n\t}\n\n\t/**\n\t * @param {easeljs.Graphics.Stroke} stroke\n\t * @protected\n\t */\n\t_setStroke (stroke) {\n\t\tthis._updateInstructions(true);\n\t\tif (this.command = this._stroke = stroke) {\n\t\t\tstroke.ignoreScale = this._strokeIgnoreScale;\n\t\t}\n\t\treturn this;\n\t}\n\n\tstatic get LineTo () { return LineTo; }\n\tstatic get MoveTo () { return MoveTo; }\n\tstatic get ArcTo () { return ArcTo; }\n\tstatic get Arc () { return Arc; }\n\tstatic get QuadraticCurveTo () { return QuadraticCurveTo; }\n\tstatic get BezierCurveTo () { return BezierCurveTo; }\n\tstatic get Rect () { return Rect; }\n\tstatic get ClosePath () { return ClosePath; }\n\tstatic get BeginPath () { return BeginPath; }\n\tstatic get Fill () { return Fill; }\n\tstatic get Stroke () { return Stroke; }\n\tstatic get StrokeStyle () { return StrokeStyle; }\n\tstatic get StrokeDash () { return StrokeDash; }\n\tstatic get RoundRect () { return RoundRect; }\n\tstatic get Circle () { return Circle; }\n\tstatic get Ellipse () { return Ellipse; }\n\tstatic get PolyStar () { return PolyStar; }\n\n}\n\n/**\n * @see {@link easeljs.Graphics#lineTo}\n * @alias easeljs.Graphics.LineTo\n * @param {Number} x\n * @param {Number} y\n */\nclass LineTo {\n\tconstructor (x, y) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tctx.lineTo(this.x, this.y);\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#moveTo}\n * @alias easeljs.Graphics.MoveTo\n * @param {Number} x\n * @param {Number} y\n */\nclass MoveTo {\n \tconstructor (x, y) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n \t\tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n \t}\n\t/**\n\t * @param {CanvasRenderingContext2D} ctx\n\t */\n \texec (ctx) {\n \t\tctx.moveTo(this.x, this.y);\n \t}\n}\n\n\n/**\n * @see {@link easeljs.Graphics#arcTo}\n * @alias easeljs.Graphics.ArcTo\n * @param {Number} x1\n * @param {Number} y1\n * @param {Number} x2\n * @param {Number} y2\n * @param {Number} radius\n */\nclass ArcTo {\n \tconstructor (x1, y1, x2, y2, radius) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x1 = x1;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y1 = y1;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x2 = x2;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y2 = y2;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.arcTo(this.x1, this.y1, this.x2, this.y2, this.radius);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#arc}\n * @alias easeljs.Graphics.Arc\n * @param {Number} x\n * @param {Number} y\n * @param {Number} radius\n * @param {Number} startAngle\n * @param {Number} endAngle\n * @param {Boolean} [anticlockwise=false]\n */\nclass Arc {\n \tconstructor (x, y, radius, startAngle, endAngle, anticlockwise = false) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.startAngle = startAngle;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.endAngle = endAngle;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t \tthis.anticlockwise = anticlockwise;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle, this.anticlockwise);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#quadraticCurveTo}\n * @alias easeljs.Graphics.QuadraticCurveTo\n * @param {Number} cpx\n * @param {Number} cpy\n * @param {Number} x\n * @param {Number} y\n */\nclass QuadraticCurveTo {\n \tconstructor (cpx, cpy, x, y) {\n\t\t/**\n\t\t * @property cpx\n\t\t * @type Number\n\t\t */\n\t \tthis.cpx = cpx;\n\t\t/**\n\t\t * @property cpy\n\t\t * @type Number\n\t\t */\n\t\tthis.cpy = cpy;\n\t\t/**\n\t\t * @property x\n\t\t * @type Number\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @property y\n\t\t * @type Number\n\t\t */\n\t\tthis.y = y;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.quadraticCurveTo(this.cpx, this.cpy, this.x, this.y);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#bezierCurveTo}\n * @alias easeljs.Graphics.BezierCurveTo\n * @param {Number} cp1x\n * @param {Number} cp1y\n * @param {Number} cp2x\n * @param {Number} cp2y\n * @param {Number} x\n * @param {Number} y\n */\nclass BezierCurveTo {\n \tconstructor (cp1x, cp1y, cp2x, cp2y, x, y) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.cp1x = cp1x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.cp1y = cp1y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.cp2x = cp2x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.cp2y = cp2y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.bezierCurveTo(this.cp1x, this.cp1y, this.cp2x, this.cp2y, this.x, this.y);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#rect}\n * @alias easeljs.Graphics.Rect\n * @param {Number} x\n * @param {Number} y\n * @param {Number} w\n * @param {Number} h\n */\nclass Rect {\n \tconstructor (x, y, w, h) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.w = w;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.h = h;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.rect(this.x, this.y, this.w, this.h);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#closePath}\n * @alias easeljs.Graphics.ClosePath\n */\nclass ClosePath {\n \tconstructor () { }\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.closePath();\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#beginPath}\n * @alias easeljs.Graphics.BeginPath\n */\nclass BeginPath {\n \tconstructor () { }\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.beginPath();\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#beginFill}\n * @alias easeljs.Graphics.Fill\n * @param {Object} style A valid Context2D fillStyle.\n * @param {Matrix2D} matrix\n */\nclass Fill {\n\tconstructor (style, matrix) {\n\t\t/**\n\t\t * A valid Context2D fillStyle.\n\t\t * @type {Object}\n\t\t */\n\t\tthis.style = style;\n\t\t/**\n\t\t * @type {easeljs.Matrix2D}\n\t\t */\n\t\tthis.matrix = matrix;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.path = false;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tif (!this.style) { return; }\n\t\tctx.fillStyle = this.style;\n\t\tlet mtx = this.matrix;\n\t\tif (mtx) { ctx.save(); ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty); }\n\t\tctx.fill();\n\t\tif (mtx) { ctx.restore(); }\n\t}\n\t/**\n\t * Creates a linear gradient style and assigns it to {@link easeljs.Graphics.Fill#style}.\n\t * @see {@link easeljs.Graphics#beginLinearGradientFill}\n\t * @param {Array} colors\n\t * @param {Array} ratios\n\t * @param {Number} x0\n\t * @param {Number} y0\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @return {easeljs.Graphics.Fill} Returns this Fill object for chaining or assignment.\n\t */\n\tlinearGradient (colors, ratios, x0, y0, x1, y1) {\n\t\tlet o = this.style = Graphics._ctx.createLinearGradient(x0, y0, x1, y1);\n\t\tconst l = colors.length;\n\t\tfor (let i = 0; i < l; i++) { o.addColorStop(ratios[i], colors[i]); }\n\t\to.props = {colors, ratios, x0, y0, x1, y1, type:\"linear\"};\n\t\treturn this;\n\t}\n\t/**\n\t * Creates a linear gradient style and assigns it to {@link easeljs.Graphics.Fill#style}.\n\t * @see {@link easeljs.Graphics#beginRadialGradientFill}\n\t * @param {Array} colors\n\t * @param {Array} ratios\n\t * @param {Number} x0\n\t * @param {Number} y0\n\t * @param {Number} r0\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} r1\n\t * @return {easeljs.Graphics.Fill} Returns this Fill object for chaining or assignment.\n\t */\n\tradialGradient (colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\tlet o = this.style = Graphics._ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);\n\t\tconst l = colors.length;\n\t\tfor (let i = 0; i < l; i++) { o.addColorStop(ratios[i], colors[i]); }\n\t\to.props = {colors, ratios, x0, y0, r0, x1, y1, r1, type: \"radial\"};\n\t\treturn this;\n\t}\n\t/**\n\t * Creates a linear gradient style and assigns it to {@link easeljs.Graphics.Fill#style}.\n\t * @see {@link easeljs.Graphics#beginBitmapFill}\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} [repetition=\"\"] One of: repeat, repeat-x, repeat-y, or no-repeat.\n\t * @return {easeljs.Graphics.Fill} Returns this Fill object for chaining or assignment.\n\t */\n\tbitmap (image, repetition = \"\") {\n\t\tif (image.naturalWidth || image.getContext || image.readyState >= 2) {\n\t\t\tlet o = this.style = Graphics._ctx.createPattern(image, repetition);\n\t\t\to.props = {image, repetition, type: \"bitmap\"};\n\t\t}\n\t\treturn this;\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#beginStroke}\n * @alias easeljs.Graphics.Stroke\n * @extends easeljs.Graphics.Fill\n * @param {Object} style A valid Context2D fillStyle.\n * @param {Boolean} ignoreScale\n */\nclass Stroke extends Fill {\n\tconstructor (style, ignoreScale) {\n\t\tsuper();\n\t\t/**\n\t\t * A valid Context2D strokeStyle.\n\t\t * @type {Object}\n\t\t */\n\t\tthis.style = style;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.ignoreScale = ignoreScale;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.path = false;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @override\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tif (!this.style) { return; }\n\t\tctx.strokeStyle = this.style;\n\t\tif (this.ignoreScale) { ctx.save(); ctx.setTransform(1,0,0,1,0,0); }\n\t\tctx.stroke();\n\t\tif (this.ignoreScale) { ctx.restore(); }\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#setStrokeStyle}\n * @alias easeljs.Graphics.StrokeStyle\n * @param {Number} [width=1]\n * @param {String} [caps=butt]\n * @param {String} [joints=miter]\n * @param {Number} [miterLimit=10]\n * @param {Boolean} [ignoreScale=false]\n */\nclass StrokeStyle {\n\tconstructor (width=1, caps=\"butt\", joints=\"miter\", miterLimit=10, ignoreScale=false) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.width = width;\n\t\t/**\n\t\t * One of: butt, round, square\n\t\t * @type {String}\n\t\t */\n\t\tthis.caps = caps;\n\t\t/**\n\t\t * One of: round, bevel, miter\n\t\t * @type {String}\n\t\t */\n\t\tthis.joints = joints;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.miterLimit = miterLimit;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.ignoreScale = ignoreScale;\n\t\t/**\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.path = false;\n\t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\texec (ctx) {\n\t\tctx.lineWidth = this.width;\n\t\tctx.lineCap = (isNaN(this.caps) ? this.caps : Graphics._STROKE_CAPS_MAP[this.caps]);\n\t\tctx.lineJoin = (isNaN(this.joints) ? this.joints : Graphics._STROKE_JOINTS_MAP[this.joints]);\n\t\tctx.miterLimit = this.miterLimit;\n\t\tctx.ignoreScale = this.ignoreScale;\n\t}\n}\n\n/**\n * @see {@link easeljs.Graphics#setStrokeDash}\n * @alias easeljs.Graphics.StrokeDash\n * @param {Array} [segments=[]]\n * @param {Number} [offset=0]\n */\nclass StrokeDash {\n \tconstructor (segments=[], offset=0) {\n\t\t/**\n\t\t * @type {Array}\n\t\t */\n\t \tthis.segments = segments;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.offset = offset;\n \t}\n\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tif (ctx.setLineDash) { // feature detection.\n\t \t\tctx.setLineDash(this.segments);\n\t \t\tctx.lineDashOffset = this.offset;\n\t \t}\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawRoundRectComplex}\n * @alias easeljs.Graphics.RoundRect\n * @param {Number} x\n * @param {Number} y\n * @param {Number} w\n * @param {Number} h\n * @param {Number} radiusTL\n * @param {Number} radiusTR\n * @param {Number} radiusBR\n * @param {Number} radiusBL\n */\nclass RoundRect {\n \tconstructor (x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.w = w;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.h = h;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radiusTL = radiusTL;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.radiusTR = radiusTR;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radiusBR = radiusBR;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.radiusBL = radiusBL;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tlet max = (this.w max) { rTL = max; }\n\t \tif (rTR < 0) { rTR *= (mTR=-1); }\n\t \tif (rTR > max) { rTR = max; }\n\t \tif (rBR < 0) { rBR *= (mBR=-1); }\n\t \tif (rBR > max) { rBR = max; }\n\t \tif (rBL < 0) { rBL *= (mBL=-1); }\n\t \tif (rBL > max) { rBL = max; }\n\n\t \tctx.moveTo(x+w-rTR, y);\n\t \tctx.arcTo(x+w+rTR*mTR, y-rTR*mTR, x+w, y+rTR, rTR);\n\t \tctx.lineTo(x+w, y+h-rBR);\n\t \tctx.arcTo(x+w+rBR*mBR, y+h+rBR*mBR, x+w-rBR, y+h, rBR);\n\t \tctx.lineTo(x+rBL, y+h);\n\t \tctx.arcTo(x-rBL*mBL, y+h+rBL*mBL, x, y+h-rBL, rBL);\n\t \tctx.lineTo(x, y+rTL);\n\t \tctx.arcTo(x-rTL*mTL, y-rTL*mTL, x+rTL, y, rTL);\n\t \tctx.closePath();\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawCircle}\n * @alias easeljs.Graphics.Circle\n * @param {Number} x\n * @param {Number} y\n * @param {Number} radius\n */\nclass Circle {\n \tconstructor (x, y, radius) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawEllipse}\n * @alias easeljs.Graphics.Ellipse\n * @param {Number} x\n * @param {Number} y\n * @param {Number} w\n * @param {Number} h\n */\nclass Ellipse {\n \tconstructor (x, y, w, h) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.w = w;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.h = h;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tlet x = this.x, y = this.y;\n\t \tlet w = this.w, h = this.h;\n\n\t \tlet k = 0.5522848;\n\t \tlet ox = (w / 2) * k;\n\t \tlet oy = (h / 2) * k;\n\t \tlet xe = x + w;\n\t \tlet ye = y + h;\n\t \tlet xm = x + w / 2;\n\t \tlet ym = y + h / 2;\n\n\t \tctx.moveTo(x, ym);\n\t \tctx.bezierCurveTo(x, ym-oy, xm-ox, y, xm, y);\n\t \tctx.bezierCurveTo(xm+ox, y, xe, ym-oy, xe, ym);\n\t \tctx.bezierCurveTo(xe, ym+oy, xm+ox, ye, xm, ye);\n\t \tctx.bezierCurveTo(xm-ox, ye, x, ym+oy, x, ym);\n \t}\n}\n\n/**\n * @see {@link easeljs.Graphics#drawPolyStar}\n * @alias easeljs.Graphics.PolyStar\n * @param {Number} x\n * @param {Number} y\n * @param {Number} radius\n * @param {Number} sides\n * @param {Number} [pointSize=0]\n * @param {Number} [angle=0]\n */\nclass PolyStar {\n \tconstructor (x, y, radius, sides, pointSize=0, angle=0) {\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.x = x;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t\tthis.y = y;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.radius = radius;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.sides = sides;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.pointSize = pointSize;\n\t\t/**\n\t\t * @type {Number}\n\t\t */\n\t \tthis.angle = angle;\n \t}\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n \texec (ctx) {\n \t\tlet x = this.x, y = this.y;\n\t \tlet radius = this.radius;\n\t \tlet angle = this.angle/180*Math.PI;\n\t \tlet sides = this.sides;\n\t \tlet ps = 1-this.pointSize;\n\t \tlet a = Math.PI/sides;\n\n\t \tctx.moveTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);\n\t \tfor (let i = 0; i < sides; i++) {\n\t \t\tangle += a;\n\t \t\tif (ps != 1) {\n\t \t\t\tctx.lineTo(x+Math.cos(angle)*radius*ps, y+Math.sin(angle)*radius*ps);\n\t \t\t}\n\t \t\tangle += a;\n\t \t\tctx.lineTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);\n\t \t}\n\t \tctx.closePath();\n \t}\n}\n\n/**\n * A reusable instance of {@link easeljs.Graphics.BeginPath} to avoid unnecessary instantiation.\n * @static\n * @readonly\n * @type {easeljs.Graphics.BeginPath}\n */\nGraphics.beginCmd = new BeginPath();\n/**\n * Map of Base64 characters to values. Used by {@link easeljs.Graphics#decodePath}.\n * @static\n * @readonly\n * @protected\n * @type {Object}\n */\nGraphics._BASE_64 = {\"A\":0,\"B\":1,\"C\":2,\"D\":3,\"E\":4,\"F\":5,\"G\":6,\"H\":7,\"I\":8,\"J\":9,\"K\":10,\"L\":11,\"M\":12,\"N\":13,\"O\":14,\"P\":15,\"Q\":16,\"R\":17,\"S\":18,\"T\":19,\"U\":20,\"V\":21,\"W\":22,\"X\":23,\"Y\":24,\"Z\":25,\"a\":26,\"b\":27,\"c\":28,\"d\":29,\"e\":30,\"f\":31,\"g\":32,\"h\":33,\"i\":34,\"j\":35,\"k\":36,\"l\":37,\"m\":38,\"n\":39,\"o\":40,\"p\":41,\"q\":42,\"r\":43,\"s\":44,\"t\":45,\"u\":46,\"v\":47,\"w\":48,\"x\":49,\"y\":50,\"z\":51,\"0\":52,\"1\":53,\"2\":54,\"3\":55,\"4\":56,\"5\":57,\"6\":58,\"7\":59,\"8\":60,\"9\":61,\"+\":62,\"/\":63};\n/**\n * Maps numeric values for the caps parameter of {@link easeljs.Graphics#setStrokeStyle} to\n * corresponding string values. This is primarily for use with the tiny API.
\n * The mappings are as follows:\n * \n * - 0 to \"butt\"
\n * - 1 to \"round\"
\n * - 2 to \"square\".
\n *
\n *\n * @example Set line caps to \"square\" \n * graphics.ss(16, 2);\n *\n * @static\n * @readonly\n * @protected\n * @type {Array}\n */\nGraphics._STROKE_CAPS_MAP = [\"butt\",\"round\",\"square\"];\n/**\n * Maps numeric values for the joints parameter of {@link easeljs.Graphics#setStrokeStyle} to\n * corresponding string values. This is primarily for use with the tiny API.
\n * The mappings are as follows:\n * \n * - 0 to \"miter\"
\n * - 1 to \"round\"
\n * - 2 to \"bevel\".
\n *
\n *\n * @example Set the line joints to \"bevel\" \n * graphics.ss(16, 0, 2);\n *\n * @static\n * @readonly\n * @protected\n * @type {Array}\n */\nGraphics._STROKE_JOINTS_MAP = [\"miter\", \"round\", \"bevel\"];\n/**\n * @static\n * @readonly\n * @protected\n * @type {CanvasRenderingContext2D}\n */\nGraphics._ctx = createCanvas().getContext(\"2d\");\n","/**\n * @license MovieClip\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Container from \"./Container\";\nimport DisplayObject from \"./DisplayObject\";\nimport { Tween, Timeline } from \"@createjs/tweenjs\";\n\n/**\n * The MovieClip class associates a TweenJS Timeline with an EaselJS {@link easeljs.Container}. It allows\n * you to create objects which encapsulate timeline animations, state changes, and synched actions. Due to the\n * complexities inherent in correctly setting up a MovieClip, it is largely intended for tool output and is not included\n * in the main EaselJS library.\n *\n * Currently MovieClip only works properly if it is tick based (as opposed to time based) though some concessions have\n * been made to support time-based timelines in the future.\n *\n * It is recommended to use `tween.to()` to animate and set properties (use no duration to have it set\n * immediately), and the `tween.wait()` method to create delays between animations. Note that using the\n * `tween.set()` method to affect properties will likely not provide the desired result.\n *\n * @memberof easeljs\n * @example Animate two shapes back and forth \n * let stage = new Stage(\"canvas\");\n * Ticker.addEventListener(\"tick\", stage);\n *\n * let mc = new MovieClip(null, 0, true, {start:20});\n * stage.addChild(mc);\n *\n * let child1 = new Shape(\n * new Graphics().beginFill(\"#999999\").drawCircle(30,30,30)\n * );\n * let child2 = new Shape(\n * new Graphics().beginFill(\"#5a9cfb\").drawCircle(30,30,30)\n * );\n *\n * mc.timeline.addTween(\n * Tween.get(child1).to({x:0}).to({x:60}, 50).to({x:0}, 50)\n * );\n * mc.timeline.addTween(\n * Tween.get(child2).to({x:60}).to({x:0}, 50).to({x:60}, 50)\n * );\n *\n * mc.gotoAndPlay(\"start\");\n *\n * @extends easeljs.Container\n * @param {Object} [props] The configuration properties to apply to this instances.\n * This object will also be passed into the Timeline instance associated with this MovieClip.\n * See the documentation for Timeline for a list of supported props.\n */\nexport default class MovieClip extends Container {\n\n\tconstructor (props) {\n\t\tsuper();\n\t\t!MovieClip.inited && MovieClip.init();\n\n\t\t/**\n\t\t * Controls how this MovieClip advances its time. Must be one of 0 (INDEPENDENT), 1 (SINGLE_FRAME), or 2 (SYNCHED).\n\t\t * See each constant for a description of the behaviour.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.mode = props.mode != null ? props.mode : MovieClip.INDEPENDENT;\n\n\t\t/**\n\t\t * Specifies what the first frame to play in this movieclip, or the only frame to display if mode is SINGLE_FRAME.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.startPosition = props.startPosition != null ? props.startPosition : 0;\n\n\t\t/**\n * Specifies how many times this MovieClip should loop. A value of -1 indicates it should loop indefinitely. A value of\n * 1 would cause it to loop once (ie. play a total of twice).\n * @property loop\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t */\n\t\tif (typeof props.loop === \"number\") {\n\t\t\tthis.loop = props.loop;\n\t\t} else if (props.loop === false) {\n\t\t\tthis.loop = 0;\n\t\t} else {\n\t\t\tthis.loop = -1;\n\t\t}\n\n\t\t/**\n\t\t * The current frame of the movieclip.\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.currentFrame = 0;\n\n\t\t/**\n * The TweenJS Timeline that is associated with this MovieClip. This is created automatically when the MovieClip\n * instance is initialized. Animations are created by adding TweenJS Tween\n * instances to the timeline.\n *\n * Elements can be added and removed from the timeline by toggling an \"_off\" property\n * using the `tweenInstance.to()` method. Note that using `Tween.set` is not recommended to\n * create MovieClip animations. The following example will toggle the target off on frame 0, and then back on for\n * frame 1. You can use the \"visible\" property to achieve the same effect.\n *\n * @example\n * let tween = Tween.get(target).to({x:0}).to({x:100}, 30);\n * let mc = new MovieClip();\n * mc.timeline.addTween(tween);\n *\n * @example\n * Tween.get(target).to({_off:false})\n * .wait(1).to({_off:true})\n * .wait(1).to({_off:false});\n *\n * @type {easeljs.Timeline}\n\t\t */\n\t\tthis.timeline = new Timeline(Object.assign({ useTicks: true, paused: true }, props));\n\n\t\t/**\n\t\t * If true, the MovieClip's position will not advance when ticked.\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.paused = props.paused != null ? props.paused : false;\n\n\t\t/**\n\t\t * If true, actions in this MovieClip's tweens will be run when the playhead advances.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.actionsEnabled = true;\n\n\t\t/**\n\t\t * If true, the MovieClip will automatically be reset to its first frame whenever the timeline adds\n\t\t * it back onto the display list. This only applies to MovieClip instances with mode=INDEPENDENT.\n\t\t *
\n\t\t * For example, if you had a character animation with a \"body\" child MovieClip instance\n\t\t * with different costumes on each frame, you could set `body.autoReset = false`, so that\n\t\t * you can manually change the frame it is on, without worrying that it will be reset\n\t\t * automatically.\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t */\n\t\tthis.autoReset = true;\n\n\t\t/**\n\t\t * An array of bounds for each frame in the MovieClip. This is mainly intended for tool output.\n\t\t * @type {Array}\n\t\t */\n\t\tthis.frameBounds = this.frameBounds || props.frameBounds; // frameBounds are set on the prototype in Animate.\n\n\t\t/**\n\t\t * By default MovieClip instances advance one frame per tick. Specifying a framerate for the MovieClip\n\t\t * will cause it to advance based on elapsed time between ticks as appropriate to maintain the target\n\t\t * framerate.\n\t\t *\n\t\t * For example, if a MovieClip with a framerate of 10 is placed on a Stage being updated at 40fps, then the MovieClip will\n\t\t * advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will\n\t\t * vary slightly between frames.\n\t\t *\n\t\t * This feature is dependent on the tick event object (or an object with an appropriate \"delta\" property) being\n\t\t * passed into {@link easeljs.Stage#update}.\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis.framerate = null;\n\n\t\t/**\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @private\n\t\t */\n\t\tthis._synchOffset = 0;\n\n\t\t/**\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t * @private\n\t\t */\n\t\tthis._rawPosition = -1; // TODO: evaluate using a ._reset Boolean prop instead of -1.\n\n\t\t/**\n\t\t * The time remaining from the previous tick, only applicable when .framerate is set.\n\t\t * @type {Number}\n\t\t * @private\n\t\t */\n\t\tthis._t = 0;\n\n\t\t/**\n\t\t * List of display objects that are actively being managed by the MovieClip.\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._managed = {};\n\n\t\t/**\n\t\t * @type {Function}\n\t\t * @private\n\t\t */\n\t\tthis._bound_resolveState = this._resolveState.bind(this);\n\t}\n\n\tstatic init () {\n\t\tif (MovieClip.inited) { return; }\n\t\t// plugins introduce some overhead to Tween, so we only install this if an MC is instantiated.\n\t\tMovieClipPlugin.install();\n\t\tMovieClip.inited = true;\n\t}\n\n\t// TODO: can we just proxy `get currentFrame` to timeline.position as well? Ditto for `get loop` (or just remove entirely).\n\t//\n\t/**\n\t * Returns an array of objects with label and position (aka frame) properties, sorted by position.\n\t * @see {@link tweenjs.Timeline#labels}\n\t * @type {Array}\n\t * @readonly\n\t */\n\tget labels () {\n\t\treturn this.timeline.labels;\n\t}\n\n\t/**\n\t * Returns the name of the label on or immediately before the current frame.\n\t * @see {@link tweenjs.Timeline#currentLabel}\n\t * for more information.\n\t * @type {String}\n\t * @readonly\n\t */\n\tget currentLabel () {\n\t\treturn this.timeline.currentLabel;\n\t}\n\n\t /**\n \t * Returns the duration of this MovieClip in seconds or ticks.\n \t * @see {@link tweenjs.Timeline#duration}\n \t * @type {Number}\n \t * @readonly\n \t */\n \tget duration () {\n\t\treturn this.timeline.duration;\n\t}\n\n\t/**\n\t * Returns the duration of this MovieClip in seconds or ticks. Identical to {@link easeljs.MovieClip#duration}\n\t * and provided for Adobe Flash/Animate API compatibility.\n\t * @see {@link tweenjs.Timeline#duration}\n\t * @type {Number}\n\t * @readonly\n\t */\n\tget totalFrames () {\n\t\treturn this.duration;\n\t}\n\n\tisVisible () {\n\t\t// children are placed in draw, so we can't determine if we have content.\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);\n\t}\n\n\tdraw (ctx, ignoreCache) {\n\t\t// draw to cache first:\n\t\tif (this.drawCache(ctx, ignoreCache)) { return true; }\n this._updateState();\n\t\tsuper.draw(ctx, ignoreCache);\n\t\treturn true;\n\t}\n\n\t/**\n\t * Sets paused to false.\n\t */\n\tplay () {\n\t\tthis.paused = false;\n\t}\n\n\t/**\n\t * Sets paused to true.\n\t */\n\tstop () {\n\t\tthis.paused = true;\n\t}\n\n\t/**\n\t * Advances this movie clip to the specified position or label and plays the timeline.\n\t * @param {String | Number} positionOrLabel The animation name or frame number to go to.\n\t */\n\tgotoAndPlay (positionOrLabel) {\n\t\tthis.play();\n\t\tthis._goto(positionOrLabel);\n\t}\n\n\t/**\n\t * Advances this movie clip to the specified position or label and stops the timeline.\n\t * @param {String | Number} positionOrLabel The animation or frame name to go to.\n\t */\n\tgotoAndStop (positionOrLabel) {\n\t\tthis.stop();\n\t\tthis._goto(positionOrLabel);\n\t}\n\n\t/**\n\t * Advances the playhead. This occurs automatically each tick by default.\n\t * @param {Number} [time] The amount of time in ms to advance by. Only applicable if framerate is set.\n\t*/\n\tadvance (time) {\n\t\tif (this.mode !== MovieClip.INDEPENDENT) { return; } // update happens in draw for synched clips\n\t\t// if this MC doesn't have a framerate, hunt ancestors for one:\n\t\tlet o = this, fps = o.framerate;\n\t\twhile ((o = o.parent) && fps === null) {\n\t\t\tif (o.mode === MovieClip.INDEPENDENT) { fps = o._framerate; }\n\t\t}\n\t\tthis._framerate = fps;\n\n\t\tif (this.paused) { return; }\n\t\t// calculate how many frames to advance:\n\t\tlet t = (fps !== null && fps !== -1 && time !== null) ? time / (1000 / fps) + this._t : 1;\n\t\tlet frames = t | 0;\n\t\tthis._t = t - frames; // leftover time, save to add to next advance.\n\n\t\twhile (frames--) {\n\t\t\tthis._updateTimeline(this._rawPosition + 1, false);\n\t\t}\n\t}\n\n\t/**\n\t * MovieClip instances cannot be cloned.\n\t * @throws MovieClip cannot be cloned.\n\t */\n\tclone () {\n\t\t// TODO: add support for this? Need to clone the Timeline & retarget tweens - pretty complex.\n\t\tthrow \"MovieClip cannot be cloned.\";\n\t}\n\n\t_updateState () {\n\t\tif (this._rawPosition === -1 || this.mode !== MovieClip.INDEPENDENT) { this._updateTimeline(-1); }\n\t}\n\n\t_tick (evtObj) {\n\t\tthis.advance(evtObj && evtObj.delta);\n\t\tsuper._tick(evtObj);\n\t}\n\n\t/**\n\t * @param {String | Number} positionOrLabel The animation name or frame number to go to.\n\t * @protected\n\t */\n\t_goto (positionOrLabel) {\n\t\tlet pos = this.timeline.resolve(positionOrLabel);\n\t\tif (pos == null) { return; }\n\t\tthis._t = 0;\n\t\tthis._updateTimeline(pos, true);\n\t}\n\n\t/**\n\t * @private\n\t */\n\t_reset () {\n\t\tthis._rawPosition = -1;\n\t\tthis._t = this.currentFrame = 0;\n\t\tthis.paused = false;\n\t}\n\n\t/**\n\t * @param {Number} rawPosition\n\t * @param {Boolean} jump Indicates whether this update is due to jumping (via gotoAndXX) to a new position.\n\t * @protected\n\t */\n\t_updateTimeline (rawPosition, jump) {\n\t\tlet synced = this.mode !== MovieClip.INDEPENDENT, tl = this.timeline;\n\t\tif (synced) { rawPosition = this.startPosition + (this.mode === MovieClip.SINGLE_FRAME ? 0 : this._synchOffset); }\n\t\tif (rawPosition < 1) { rawPosition = 0; }\n\t\tif (this._rawPosition === rawPosition && !synced) { return; }\n\t\tthis._rawPosition = rawPosition;\n\n\t\t// update timeline position, ignoring actions if this is a graphic.\n\t\ttl.loop = this.loop; // TODO: should we maintain this on MovieClip, or just have it on timeline?\n\t\ttl.setPosition(rawPosition, synced || !this.actionsEnabled, jump, this._bound_resolveState);\n\t}\n\n\t/**\n\t * Renders position 0 without running actions or updating _rawPosition.\n\t * Primarily used by Animate CC to build out the first frame in the constructor of MC symbols.\n\t * NOTE: not tested when run after the MC advances past the first frame.\n\t * @protected\n\t */\n\t_renderFirstFrame () {\n\t\tconst tl = this.timeline, pos = tl.rawPosition;\n\t\ttl.setPosition(0, true, true, this._bound_resolveState);\n\t\ttl.rawPosition = pos;\n\t}\n\n\t/**\n\t * Runs via a callback after timeline property updates and before actions.\n\t * @protected\n\t */\n\t_resolveState () {\n\t\tlet tl = this.timeline;\n\t\tthis.currentFrame = tl.position;\n\n\t\tfor (let n in this._managed) { this._managed[n] = 1; }\n\n\t\tlet tweens = tl.tweens;\n\t\tfor (let tween of tweens) {\n\t\t\tlet target = tween.target;\n\t\t\tif (target === this || tween.passive) { continue; } // TODO: this assumes the actions tween from Animate has `this` as the target. Likely a better approach.\n\t\t\tlet offset = tween._stepPosition;\n\n\t\t\tif (target instanceof DisplayObject) {\n\t\t\t\t// motion tween.\n\t\t\t\tthis._addManagedChild(target, offset);\n\t\t\t} else {\n\t\t\t\t// state tween.\n\t\t\t\tthis._setState(target.state, offset);\n\t\t\t}\n\t\t}\n\n\t\tlet kids = this.children;\n\t\tfor (let i=kids.length-1; i>=0; i--) {\n\t\t\tlet id = kids[i].id;\n\t\t\tif (this._managed[id] === 1) {\n\t\t\t\tthis.removeChildAt(i);\n\t\t\t\tdelete(this._managed[id]);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * @param {Array} state\n\t * @param {Number} offset\n\t * @protected\n\t */\n\t_setState (state, offset) {\n\t\tif (!state) { return; }\n\t\tfor (let i = state.length - 1; i >= 0; i--) {\n\t\t\tlet o = state[i];\n\t\t\tlet target = o.t;\n\t\t\tlet props = o.p;\n\t\t\tfor (let n in props) { target[n] = props[n]; }\n\t\t\tthis._addManagedChild(target, offset);\n\t\t}\n\t}\n\n\t/**\n\t * Adds a child to the timeline, and sets it up as a managed child.\n\t * @param {easeljs.MovieClip} child The child MovieClip to manage\n\t * @param {Number} offset\n\t * @private\n\t */\n\t_addManagedChild (child, offset) {\n\t\tif (child._off) { return; }\n\t\tthis.addChildAt(child, 0);\n\n\t\tif (child instanceof MovieClip) {\n\t\t\tchild._synchOffset = offset;\n\t\t\t// TODO: this does not precisely match Adobe Flash/Animate, which loses track of the clip if it is renamed or removed from the timeline, which causes it to reset.\n // TODO: should also reset when MovieClip loops, though that will be a bit tricky to detect.\n\t\t\tif (child.mode === MovieClip.INDEPENDENT && child.autoReset && !this._managed[child.id]) { child._reset(); }\n\t\t}\n\t\tthis._managed[child.id] = 2;\n\t}\n\n\t/**\n\t * @param {easeljs.Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform\n\t * @return {easeljs.Rectangle}\n\t * @protected\n\t */\n\t_getBounds (matrix, ignoreTransform) {\n\t\tlet bounds = this.getBounds();\n\t\tif (!bounds && this.frameBounds) { bounds = this._rectangle.copy(this.frameBounds[this.currentFrame]); }\n\t\tif (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }\n\t\treturn super._getBounds(matrix, ignoreTransform);\n\t}\n\n}\n\n/**\n * The MovieClip will advance independently of its parent, even if its parent is paused.\n * This is the default mode.\n * @static\n * @type {String}\n * @default independent\n * @readonly\n */\nMovieClip.INDEPENDENT = \"independent\";\n/**\n * The MovieClip will only display a single frame (as determined by the startPosition property).\n * @static\n * @type {String}\n * @default single\n * @readonly\n */\nMovieClip.SINGLE_FRAME = \"single\";\n/**\n * The MovieClip will be advanced only when its parent advances and will be synched to the position of\n * the parent MovieClip.\n * @static\n * @type {String}\n * @default synched\n * @readonly\n */\nMovieClip.SYNCHED = \"synched\";\n/**\n * Has the MovieClipPlugin been installed to TweenJS yet?\n * @static\n * @type {Boolean}\n * @default false\n * @readonly\n */\nMovieClip.inited = false;\n\n/**\n * This plugin works with TweenJS to prevent the startPosition property from tweening.\n * @todo update to new plugin model\n * @static\n * @inner\n */\nclass MovieClipPlugin {\n\n\tconstructor () {\n\t\tthrow \"MovieClipPlugin cannot be instantiated.\";\n\t}\n\n\t/**\n\t * @private\n\t */\n\tstatic install () {\n\t\tTween.installPlugin(MovieClipPlugin);\n\t}\n\n\t/**\n\t * @param {tweenjs.Tween} tween\n\t * @param {String} prop\n\t * @param {String|Number|Boolean} value\n\t * @private\n\t */\n\tstatic init (tween, prop, value) {\n\t\treturn value;\n\t}\n\n\t/**\n\t * @param {tweenjs.Tween} tween\n\t * @param {String} prop\n\t * @param {String | Number | Boolean} value\n\t * @param {Array} startValues\n\t * @param {Array} endValues\n\t * @param {Number} ratio\n\t * @param {Object} wait\n\t * @param {Object} end\n\t * @return {*}\n\t */\n\tstatic tween (tween, prop, value, startValues, endValues, ratio, wait, end) {\n\t\tif (!(tween.target instanceof MovieClip)) { return value; }\n\t\treturn (ratio === 1 ? endValues[prop] : startValues[prop]);\n\t}\n\n}\n\n/**\n * @static\n * @type {Number}\n * @default 100\n * @readonly\n */\nMovieClipPlugin.priority = 100;\n","/**\n * @license Shape\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport Graphics from \"./Graphics\";\n\n/**\n * A Shape allows you to display vector art in the display list. It composites a {@link easeljs.Graphics}\n * instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape\n * instances to display the same vector graphics with different positions or transforms.\n *\n * If the vector art will not change between draws, you may want to use the {@link easeljs.DisplayObject#cache}\n * method to reduce the rendering cost.\n *\n * @memberof easeljs\n * @example\n * var graphics = new Graphics().beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n * var shape = new Shape(graphics);\n * // Alternatively use can also use the graphics property of the Shape class to renderer the same as above.\n * var shape = new Shape();\n * shape.graphics.beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n *\n * @extends easeljs.DisplayObject\n * @param {easeljs.Graphics} [graphics] The graphics instance to display. If null, a new Graphics instance will be created.\n */\nexport default class Shape extends DisplayObject {\n\n\tconstructor (graphics = new Graphics()) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The graphics instance to display.\n\t\t * @type {easeljs.Graphics}\n\t\t */\n\t\tthis.graphics = graphics;\n\t}\n\n\tisVisible () {\n\t\tlet hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty());\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t}\n\n\tdraw (ctx, ignoreCache = false) {\n\t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\t\tthis.graphics.draw(ctx, this);\n\t\treturn true;\n\t}\n\n\t/**\n\t * Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to\n\t * their defaults (for example .parent).\n\t * @override\n\t * @param {Boolean} [recursive=false] If true, this Shape's {@link easeljs.Graphics} instance will also be\n\t * cloned. If false, the Graphics instance will be shared with the new Shape.\n\t */\n\tclone (recursive = false) {\n\t\tlet g = (recursive && this.graphics) ? this.graphics.clone() : this.graphics;\n\t\treturn this._cloneProps(new Shape(g));\n\t}\n\n}\n","/**\n * @license SpriteSheet\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPliED, INCLUDING BUT NOT liMITED TO THE WARRANTIES\n * OF MERCHANTABIliTY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HolDERS BE liABLE FOR ANY CLAIM, DAMAGES OR OTHER liABIliTY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEAliNGS IN THE SOFTWARE.\n */\n\nimport { EventDispatcher, Event } from \"@createjs/core\";\nimport Rectangle from \"../geom/Rectangle\";\n\n/**\n * Encapsulates the properties and methods associated with a sprite sheet. A sprite sheet is a series of images (usually\n * animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x100\n * images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high).\n *
\n * The data passed to the SpriteSheet constructor defines:\n * \n * \t- The source image or images to use.
\n * \t- The positions of individual image frames.
\n * \t- Sequences of frames that form named animations. Optional.
\n * \t- The target playback framerate. Optional.
\n *
\n *\n * SpriteSheet Format
\n * SpriteSheets are an object with two required properties (`images` and `frames`), and two optional properties\n * (`framerate` and `animations`). This makes them easy to define in javascript code, or in JSON.\n *\n * images
\n * An array of source images. Images can be either an HTMlimage\n * instance, or a uri to an image. The former is recommended to control preloading.\n *\n * \timages: [image1, \"path/to/image2.png\"],\n *\n * frames
\n * Defines the individual frames. There are two supported formats for frame data:\n * When all of the frames are the same size (in a grid), use an object with `width`, `height`, `regX`, `regY`,\n * and `count` properties.\n *\n * \n * - `width` & `height` are required and specify the dimensions of the frames
\n * - `regX` & `regY` indicate the registration point or \"origin\" of the frames
\n * - `spacing` indicate the spacing between frames
\n * - `margin` specify the margin around the image(s)
\n * - `count` allows you to specify the total number of frames in the spritesheet; if omitted, this will\n * be calculated based on the dimensions of the source images and the frames. Frames will be assigned\n * indexes based on their position in the source images (left to right, top to bottom).
\n *
\n *\n * \tframes: {width:64, height:64, count:20, regX: 32, regY:64, spacing:0, margin:0}\n *\n * If the frames are of different sizes, use an array of frame definitions. Each definition is itself an array\n * with 4 required and 3 optional entries, in the order:\n *\n * \n * - The first four, `x`, `y`, `width`, and `height` are required and define the frame rectangle.
\n * - The fifth, `imageIndex`, specifies the index of the source image (defaults to 0)
\n * - The last two, `regX` and `regY` specify the registration point of the frame
\n *
\n *\n * \tframes: [\n * \t\t// x, y, width, height, imageIndex*, regX*, regY*\n * \t\t[64, 0, 96, 64],\n * \t\t[0, 0, 64, 64, 1, 32, 32]\n * \t\t// etc.\n * \t]\n *\n * animations
\n * Optional. An object defining sequences of frames to play as named animations. Each property corresponds to an\n * animation of the same name. Each animation must specify the frames to play, and may\n * also include a relative playback `speed` (ex. 2 would playback at double speed, 0.5 at half), and\n * the name of the `next` animation to sequence to after it completes.\n *\n * There are three formats supported for defining the frames in an animation, which can be mixed and matched as appropriate:\n * \n * \t- for a single frame animation, you can simply specify the frame index\n *\n * \t\tanimations: {\n * \t\t\tsit: 7\n * \t\t}\n *\n *
\n * - \n * for an animation of consecutive frames, you can use an array with two required, and two optional entries\n * \t\tin the order: `start`, `end`, `next`, and `speed`. This will play the frames from start to end inclusive.\n *\n * \t\tanimations: {\n * \t\t\t// start, end, next*, speed*\n * \t\t\trun: [0, 8],\n * \t\t\tjump: [9, 12, \"run\", 2]\n * \t\t}\n *\n *
\n * - \n * for non-consecutive frames, you can use an object with a `frames` property defining an array of frame\n * indexes to play in order. The object can also specify `next` and `speed` properties.\n *\n * \t\tanimations: {\n * \t\t\twalk: {\n * \t\t\t\tframes: [1,2,3,3,2,1]\n * \t\t\t},\n * \t\t\tshoot: {\n * \t\t\t\tframes: [1,4,5,6],\n * \t\t\t\tnext: \"walk\",\n * \t\t\t\tspeed: 0.5\n * \t\t\t}\n * \t\t}\n *\n *
\n *
\n * Note: the `speed` property was added in EaselJS 0.7.0. Earlier versions had a `frequency`\n * property instead, which was the inverse of `speed`. For example, a value of \"4\" would be 1/4 normal speed in\n * earlier versions, but is 4x normal speed in EaselJS 0.7.0+.\n *\n * framerate
\n * Optional. Indicates the default framerate to play this spritesheet at in frames per second. See\n * {{#crossLink \"SpriteSheet/framerate:property\"}}{{/crossLink}} for more information.\n *\n * \t\tframerate: 20\n *\n * Note that the Sprite framerate will only work if the stage update method is provided with the {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}}\n * event generated by the {{#crossLink \"Ticker\"}}{{/crossLink}}.\n *\n * \t\tcreatejs.Ticker.on(\"tick\", handleTick);\n * \t\tfunction handleTick(event) {\n *\t\t\tstage.update(event);\n *\t\t}\n *\n * Example
\n * To define a simple sprite sheet, with a single image \"sprites.jpg\" arranged in a regular 50x50 grid with three\n * animations: \"stand\" showing the first frame, \"run\" looping frame 1-5 inclusive, and \"jump\" playing frame 6-8 and\n * sequencing back to run.\n *\n * \t\tvar data = {\n * \t\t\timages: [\"sprites.jpg\"],\n * \t\t\tframes: {width:50, height:50},\n * \t\t\tanimations: {\n * \t\t\t\tstand:0,\n * \t\t\t\trun:[1,5],\n * \t\t\t\tjump:[6,8,\"run\"]\n * \t\t\t}\n * \t\t};\n * \t\tvar spriteSheet = new createjs.SpriteSheet(data);\n * \t\tvar animation = new createjs.Sprite(spriteSheet, \"run\");\n *\n * Generating SpriteSheet Images
\n * Spritesheets can be created manually by combining images in PhotoShop, and specifying the frame size or\n * coordinates manually, however there are a number of tools that facilitate this.\n * \n * - Exporting SpriteSheets or HTML5 content from Adobe Flash/Animate supports the EaselJS SpriteSheet format.
\n * - The popular Texture Packer has\n * EaselJS support.\n *
- SWF animations in Adobe Flash/Animate can be exported to SpriteSheets using
\n *
\n *\n * Cross Origin Issues
\n * Warning: Images loaded cross-origin will throw cross-origin security errors when interacted with\n * using:\n * \n * - a mouse
\n * - methods such as {{#crossLink \"Container/getObjectUnderPoint\"}}{{/crossLink}}
\n * - Filters (see {{#crossLink \"Filter\"}}{{/crossLink}})
\n * - caching (see {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}})
\n *
\n * You can get around this by setting `crossOrigin` property on your images before passing them to EaselJS, or\n * setting the `crossOrigin` property on PreloadJS' LoadQueue or LoadItems.\n *\n * \t\tvar image = new Image();\n * \t\timg.crossOrigin=\"Anonymous\";\n * \t\timg.src = \"http://server-with-CORS-support.com/path/to/image.jpg\";\n *\n * If you pass string paths to SpriteSheets, they will not work cross-origin. The server that stores the image must\n * support cross-origin requests, or this will not work. For more information, check out\n * CORS overview on MDN.\n *\n * @memberof easeljs\n * @extends core.EventDispatcher\n * @param {Object} data An object describing the SpriteSheet data.\n */\nexport default class SpriteSheet extends EventDispatcher {\n\n\tconstructor (data) {\n\t\tsuper();\n\n\t\t/**\n\t\t * Indicates whether all images are finished loading.\n\t\t * @type {Boolean}\n\t\t * @readonly\n\t\t */\n\t\tthis.complete = true;\n\n\t\t/**\n\t\t * Specifies the framerate to use by default for Sprite instances using the SpriteSheet. See the Sprite class\n\t\t * {@link easeljs.Sprite#framerate} for more information.\n\t\t * @type Number\n\t\t */\n\t\tthis.framerate = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._animations = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._frames = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._images = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Object}\n\t\t */\n\t\tthis._data = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._loadCount = 0;\n\n\t\t// only used for simple frame defs:\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._frameHeight = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._frameWidth = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._numFrames = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._regX = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._regY = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._spacing = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._margin = 0;\n\n\t\tthis._parseData(data);\n\t}\n\n\t/**\n\t * Returns an array of all available animation names available on this sprite sheet as strings.\n\t * @type {Array}\n\t * @readonly\n\t */\n\tget animations () {\n\t\treturn this._animations.slice();\n\t}\n\n\t/**\n\t * Returns the total number of frames in the specified animation, or in the whole sprite\n\t * sheet if the animation param is omitted. Returns 0 if the spritesheet relies on calculated frame counts, and\n\t * the images have not been fully loaded.\n\t * @param {String} animation The name of the animation to get a frame count for.\n\t * @return {Number} The number of frames in the animation, or in the entire sprite sheet if the animation param is omitted.\n\t */\n\tgetNumFrames (animation) {\n\t\tif (animation == null) {\n\t\t\treturn this._frames ? this._frames.length : this._numFrames || 0;\n\t\t} else {\n\t\t\tlet data = this._data[animation];\n\t\t\tif (data == null) { return 0; }\n\t\t\telse { return data.frames.length; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns an object defining the specified animation. The returned object contains:\n\t * \n\t * \t- frames: an array of the frame ids in the animation
\n\t * \t- speed: the playback speed for this animation
\n\t * \t- name: the name of the animation
\n\t * \t- next: the default animation to play next. If the animation loops, the name and next property will be the same.
\n\t *
\n\t * @param {String} name The name of the animation to get.\n\t * @return {Object} a generic object with frames, speed, name, and next properties.\n\t */\n\tgetAnimation (name) {\n\t\treturn this._data[name];\n\t}\n\n\t/**\n\t * Returns an object specifying the image and source rect of the specified frame. The returned object has:\n\t * \n\t * \t- an image property holding a reference to the image object in which the frame is found
\n\t * \t- a rect property containing a Rectangle instance which defines the boundaries for the frame within that image.
\n\t * \t- A regX and regY property corresponding to the regX/Y values for the frame.\n\t *
\n\t * @param {Number} frameIndex The index of the frame.\n\t * @return {Object} a generic object with image and rect properties. Returns null if the frame does not exist.\n\t */\n\tgetFrame (frameIndex) {\n\t\tlet frame;\n\t\tif (this._frames && (frame = this._frames[frameIndex])) { return frame; }\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns a {@link easeljs.Rectangle} instance defining the bounds of the specified frame relative\n\t * to the origin.\n\t *\n\t * @param {Number} frameIndex The index of the frame.\n\t * @param {easeljs.Rectangle} [rectangle] A Rectangle instance to copy the values into. By default a new instance is created.\n\t * @return {easeljs.Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully loaded.\n\t */\n\tgetFrameBounds (frameIndex, rectangle = new Rectangle()) {\n\t\tlet frame = this.getFrame(frameIndex);\n\t\treturn frame ? rectangle.setValues(-frame.regX, -frame.regY, frame.rect.width, frame.rect.height) : null;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * SpriteSheet cannot be cloned. A SpriteSheet can be shared by multiple Sprite instances without cloning it.\n\t * @override\n\t * @throws SpriteSheet cannot be cloned.\n\t */\n\tclone () {\n\t\tthrow \"SpriteSheet cannot be cloned.\";\n\t}\n\n\t/**\n\t * @param {Object} data An object describing the SpriteSheet data.\n\t * @protected\n\t */\n\t_parseData (data) {\n\t\tif (data == null) { return; }\n\t\tthis.framerate = data.framerate||0;\n\n\t\t// parse images:\n\t\tif (data.images) {\n\t\t\tfor (let img of data.images) {\n\t\t\t\tlet a = this._images = [];\n\t\t\t\tlet src;\n\t\t\t\tif (typeof img === \"string\") {\n\t\t\t\t\tsrc = img;\n\t\t\t\t\timg = document.createElement(\"img\");\n\t\t\t\t\timg.src = src;\n\t\t\t\t}\n\t\t\t\ta.push(img);\n\t\t\t\tif (!img.getContext && !img.naturalWidth) {\n\t\t\t\t\tthis._loadCount++;\n\t\t\t\t\tthis.complete = false;\n\t\t\t\t\timg.onload = () => this._handleImageLoad(src);\n\t\t\t\t\timg.onerror = () => this._handleImageError(src);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// parse frames:\n\t\tif (data.frames != null) {\n\t\t\tif (Array.isArray(data.frames)) {\n\t\t\t\tthis._frames = [];\n\t\t\t\tfor (let arr of data.frames) {\n\t\t\t\t\tthis._frames.push({image:this._images[arr[4]?arr[4]:0], rect:new Rectangle(arr[0],arr[1],arr[2],arr[3]), regX:arr[5]||0, regY:arr[6]||0 });\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tlet o = data.frames;\n\t\t\t\tthis._frameWidth = o.width;\n\t\t\t\tthis._frameHeight = o.height;\n\t\t\t\tthis._regX = o.regX||0;\n\t\t\t\tthis._regY = o.regY||0;\n\t\t\t\tthis._spacing = o.spacing||0;\n\t\t\t\tthis._margin = o.margin||0;\n\t\t\t\tthis._numFrames = o.count;\n\t\t\t\tif (this._loadCount === 0) { this._calculateFrames(); }\n\t\t\t}\n\t\t}\n\n\t\t// parse animations:\n\t\tthis._animations = [];\n\t\tif (data.animations != null) {\n\t\t\tthis._data = {};\n\t\t\tlet o = data.animations;\n\t\t\tfor (let name in o) {\n\t\t\t\tlet anim = { name };\n\t\t\t\tlet obj = o[name];\n\t\t\t\tlet a;\n\t\t\t\tif (typeof obj === \"number\") { // single frame\n\t\t\t\t\ta = anim.frames = [obj];\n\t\t\t\t} else if (Array.isArray(obj)) { // simple\n\t\t\t\t\tif (obj.length === 1) { anim.frames = [obj[0]]; }\n\t\t\t\t\telse {\n\t\t\t\t\t\tanim.speed = obj[3];\n\t\t\t\t\t\tanim.next = obj[2];\n\t\t\t\t\t\ta = anim.frames = [];\n\t\t\t\t\t\tfor (let i=obj[0];i<=obj[1];i++) {\n\t\t\t\t\t\t\ta.push(i);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else { // complex\n\t\t\t\t\tanim.speed = obj.speed;\n\t\t\t\t\tanim.next = obj.next;\n\t\t\t\t\tlet frames = obj.frames;\n\t\t\t\t\ta = anim.frames = (typeof frames === \"number\") ? [frames] : frames.slice(0);\n\t\t\t\t}\n\t\t\t\tif (anim.next === true || anim.next === undefined) { anim.next = name; } // loop\n\t\t\t\tif (anim.next === false || (a.length < 2 && anim.next === name)) { anim.next = null; } // stop\n\t\t\t\tif (!anim.speed) { anim.speed = 1; }\n\t\t\t\tthis._animations.push(name);\n\t\t\t\tthis._data[name] = anim;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * @emits easeljs.SpriteSheet#event:complete\n\t * @protected\n\t * @param {Object} src\n\t */\n\t _handleImageLoad (src) {\n\t\tif (--this._loadCount === 0) {\n\t\t\tthis._calculateFrames();\n\t\t\tthis.complete = true;\n\t\t\tthis.dispatchEvent(\"complete\");\n\t\t}\n\t}\n\n\t/**\n\t * @emits easeljs.SpriteSheet#event:complete\n\t * @emits easeljs.SpriteSheet#event:error\n\t * @protected\n\t * @param {Object} src\n\t */\n\t_handleImageError (src) {\n\t\tlet errorEvent = new Event(\"error\");\n\t\terrorEvent.src = src;\n\t\tthis.dispatchEvent(errorEvent);\n\n\t\t// Complete is still dispatched.\n\t\tif (--this._loadCount === 0) {\n\t\t\tthis.dispatchEvent(\"complete\");\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_calculateFrames () {\n\t\tif (this._frames || this._frameWidth === 0) { return; }\n\n\t\tthis._frames = [];\n\n\t\tlet maxFrames = this._numFrames || 100000; // if we go over this, something is wrong.\n\t\tlet frameCount = 0, frameWidth = this._frameWidth, frameHeight = this._frameHeight;\n\t\tlet spacing = this._spacing, margin = this._margin;\n\n\t\timgLoop:\n\t\tfor (let i=0, imgs=this._images, l=imgs.length; i= maxFrames) { break imgLoop; }\n\t\t\t\t\tframeCount++;\n\t\t\t\t\tthis._frames.push({\n\t\t\t\t\t\timage: img,\n\t\t\t\t\t\trect: new Rectangle(x, y, frameWidth, frameHeight),\n\t\t\t\t\t\tregX: this._regX,\n\t\t\t\t\t\tregY: this._regY\n\t\t\t\t\t});\n\t\t\t\t\tx += frameWidth+spacing;\n\t\t\t\t}\n\t\t\t\ty += frameHeight+spacing;\n\t\t\t}\n\t\t}\n\t\tthis._numFrames = frameCount;\n\t}\n\n}\n\n/**\n * Dispatched when all images are loaded. Note that this only fires if the images\n * were not fully loaded when the sprite sheet was initialized. You should check the complete property\n * to prior to adding a listener. Ex.\n *\n * \tvar sheet = new createjs.SpriteSheet(data);\n * \tif (!sheet.complete) {\n * \t\t// not preloaded, listen for the complete event:\n * \t\tsheet.addEventListener(\"complete\", handler);\n * \t}\n *\n * @event easeljs.SpriteSheet#complete\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @since 0.6.0\n */\n\n/**\n * Dispatched when getFrame is called with a valid frame index. This is primarily intended for use by {@link easeljs.SpriteSheetBuilder}\n * when doing on-demand rendering.\n * @event easeljs.SpriteSheet#getframe\n * @property {Number} index The frame index.\n * @property {Object} frame The frame object that getFrame will return.\n */\n\n/**\n * Dispatched when an image encounters an error. A SpriteSheet will dispatch an error event for each image that\n * encounters an error, and will still dispatch a {@link easeljs.SpriteSheet#event:complete}\n * event once all images are finished processing, even if an error is encountered.\n * @event easeljs.SpriteSheet#error\n * @property {String} src The source of the image that failed to load.\n * @since 0.8.2\n */\n","/**\n * @license Text\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport DisplayObject from \"./DisplayObject\";\nimport createCanvas from \"../utils/Canvas\";\n\n/**\n * Display one or more lines of dynamic text (not user editable) in the display list. Line wrapping support (using the\n * lineWidth) is very basic, wrapping on spaces and tabs only. Note that as an alternative to Text, you can position HTML\n * text above or below the canvas relative to items in the display list using the {@link easeljs.DisplayObject#localToGlobal}\n * method, or using {@link easeljs.DOMElement}.\n *\n * Please note that Text does not support HTML text, and can only display one font style at a time. To use\n * multiple font styles, you will need to create multiple text instances, and position them manually.\n *\n * CreateJS Text supports web fonts (the same rules as Canvas). The font must be loaded and supported by the browser\n * before it can be displayed.\n *\n * Note: Text can be expensive to generate, so cache instances where possible. Be aware that not all\n * browsers will render Text exactly the same.\n *\n * @memberof easeljs\n * @extends easeljs.DisplayObject\n * @example\n * let text = new Text(\"Hello World\", \"20px Arial\", \"#ff7700\");\n * text.x = 100;\n * text.textBaseline = \"alphabetic\";\n *\n * @param {String} [text] The text to display.\n * @param {String} [font] The font style to use. Any valid value for the CSS font attribute is acceptable (ex. \"bold\n * 36px Arial\").\n * @param {String} [color] The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex.\n * \"#F00\", \"red\", or \"#FF0000\").\n */\nexport default class Text extends DisplayObject {\n\n\tconstructor (text, font, color) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The text to display.\n\t\t * @type {String}\n\t\t */\n\t\tthis.text = text;\n\n\t\t/**\n\t\t * The font style to use. Any valid value for the CSS font attribute is acceptable (ex. \"bold 36px Arial\").\n\t\t * @type {String}\n\t\t */\n\t\tthis.font = font;\n\n\t\t/**\n\t\t * The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. \"#F00\"). Default is \"#000\".\n\t\t * It will also accept valid canvas fillStyle values.\n\t\t * @type {String}\n\t\t */\n\t\tthis.color = color;\n\n\t\t/**\n\t\t * The horizontal text alignment. Any of \"start\", \"end\", \"left\", \"right\", and \"center\".\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles \"WHATWG spec\"}\n\t\t * @type {String}\n\t\t * @default left\n\t\t */\n\t\tthis.textAlign = \"left\";\n\n\t\t/**\n\t\t * The vertical alignment point on the font. Any of \"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", or \"bottom\".\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles \"WHATWG spec\"}\n\t\t * @type {String}\n\t\t * @default top\n\t\t*/\n\t\tthis.textBaseline = \"top\";\n\n\t\t/**\n\t\t * The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or\n\t\t * shrunk to make it fit in this width.\n\t\t * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles \"WHATWG spec\"}\n\t\t * @type {Number}\n\t\t*/\n\t\tthis.maxWidth = null;\n\n\t\t/**\n\t\t * If greater than 0, the text will be drawn as a stroke (outline) of the specified width.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.outline = 0;\n\n\t\t/**\n\t\t * Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0,\n\t\t * the value of getMeasuredLineHeight is used.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.lineHeight = 0;\n\n\t\t/**\n\t\t * Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null,\n\t\t * the text will not be wrapped.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.lineWidth = null;\n\t}\n\n \tisVisible () {\n \t\tlet hasContent = this.cacheCanvas || (this.text != null && this.text !== \"\");\n \t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n \t}\n\n \tdraw (ctx, ignoreCache) {\n \t\tif (super.draw(ctx, ignoreCache)) { return true; }\n\n \t\tlet col = this.color || \"#000\";\n \t\tif (this.outline) { ctx.strokeStyle = col; ctx.lineWidth = this.outline*1; }\n \t\telse { ctx.fillStyle = col; }\n\n \t\tthis._drawText(this._prepContext(ctx));\n \t\treturn true;\n \t}\n\n \t/**\n \t * Returns the measured, untransformed width of the text without wrapping. Use getBounds for a more robust value.\n \t * @return {Number} The measured, untransformed width of the text.\n \t */\n \tgetMeasuredWidth () {\n \t\treturn this._getMeasuredWidth(this.text);\n \t}\n\n \t/**\n \t * Returns an approximate line height of the text, ignoring the lineHeight property. This is based on the measured\n \t * width of a \"M\" character multiplied by 1.2, which provides an approximate line height for most fonts.\n \t * @return {Number} an approximate line height of the text, ignoring the lineHeight property. This is\n \t * based on the measured width of a \"M\" character multiplied by 1.2, which approximates em for most fonts.\n \t */\n \tgetMeasuredLineHeight () {\n \t\treturn this._getMeasuredWidth(\"M\")*1.2;\n \t}\n\n \t/**\n \t * Returns the approximate height of multi-line text by multiplying the number of lines against either the\n \t * `lineHeight` (if specified) or {@link easeljs.Text#getMeasuredLineHeight}. Note that\n \t * this operation requires the text flowing logic to run, which has an associated CPU cost.\n \t * @return {Number} The approximate height of the untransformed multi-line text.\n \t */\n \tgetMeasuredHeight () {\n \t\treturn this._drawText(null, {}).height;\n \t}\n\n \tgetBounds () {\n \t\tlet rect = super.getBounds();\n \t\tif (rect) { return rect; }\n \t\tif (this.text == null || this.text === \"\") { return null; }\n \t\tlet o = this._drawText(null, {});\n \t\tlet w = (this.maxWidth && this.maxWidth < o.width) ? this.maxWidth : o.width;\n \t\tlet x = w * Text.H_OFFSETS[this.textAlign||\"left\"];\n \t\tlet lineHeight = this.lineHeight||this.getMeasuredLineHeight();\n \t\tlet y = lineHeight * Text.V_OFFSETS[this.textBaseline||\"top\"];\n \t\treturn this._rectangle.setValues(x, y, w, o.height);\n \t}\n\n \t/**\n \t * Returns an object with width, height, and lines properties. The width and height are the visual width and height\n \t * of the drawn text. The lines property contains an array of strings, one for\n \t * each line of text that will be drawn, accounting for line breaks and wrapping. These strings have trailing\n \t * whitespace removed.\n \t * @return {Object} An object with width, height, and lines properties.\n \t */\n \tgetMetrics () {\n \t\tlet o = {lines:[]};\n \t\to.lineHeight = this.lineHeight || this.getMeasuredLineHeight();\n \t\to.vOffset = o.lineHeight * Text.V_OFFSETS[this.textBaseline||\"top\"];\n \t\treturn this._drawText(null, o, o.lines);\n \t}\n\n \t/**\n \t * Returns a clone of the Text instance.\n \t * @return {easeljs.Text} a clone of the Text instance.\n \t */\n \tclone () {\n \t\treturn this._cloneProps(new Text(this.text, this.font, this.color));\n \t}\n\n \t/**\n \t * Returns a string representation of this object.\n \t * @override\n \t * @return {String} a string representation of the instance.\n \t */\n \ttoString () {\n \t\treturn `[${this.constructor.name} (text=${this.text.length > 20 ? `${this.text.substr(0, 17)}...` : this.text})]`;\n \t}\n\n \t/**\n \t * @param {easeljs.Text} o\n \t * @protected\n \t * @return {easeljs.Text} o\n \t */\n \t_cloneProps (o) {\n \t\tsuper._cloneProps(o);\n \t\to.textAlign = this.textAlign;\n \t\to.textBaseline = this.textBaseline;\n \t\to.maxWidth = this.maxWidth;\n \t\to.outline = this.outline;\n \t\to.lineHeight = this.lineHeight;\n \t\to.lineWidth = this.lineWidth;\n \t\treturn o;\n \t}\n\n \t/**\n \t * @param {CanvasRenderingContext2D} ctx\n \t * @return {CanvasRenderingContext2D}\n \t * @protected\n \t */\n \t_prepContext (ctx) {\n \t\tctx.font = this.font||\"10px sans-serif\";\n \t\tctx.textAlign = this.textAlign||\"left\";\n \t\tctx.textBaseline = this.textBaseline||\"top\";\n\t\tctx.lineJoin = \"miter\";\n\t\tctx.miterLimit = 2.5;\n\t\treturn ctx;\n\t}\n\n\t/**\n\t * Draws multiline text.\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {Object} o\n\t * @param {Array} lines\n\t * @return {Object}\n\t * @protected\n\t */\n \t_drawText (ctx, o, lines) {\n \t\tconst paint = !!ctx;\n \t\tif (!paint) {\n \t\t\tctx = Text._ctx;\n \t\t\tctx.save();\n \t\t\tthis._prepContext(ctx);\n \t\t}\n \t\tlet lineHeight = this.lineHeight||this.getMeasuredLineHeight();\n\n \t\tlet maxW = 0, count = 0;\n \t\tlet hardLines = String(this.text).split(/(?:\\r\\n|\\r|\\n)/);\n \t\tfor (let str of hardLines) {\n \t\t\tlet w = null;\n\n \t\t\tif (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {\n \t\t\t\t// text wrapping:\n \t\t\t\tlet words = str.split(/(\\s)/);\n \t\t\t\tstr = words[0];\n \t\t\t\tw = ctx.measureText(str).width;\n\n\t\t\t\tconst l = words.length;\n \t\t\t\tfor (let i=1; i this.lineWidth) {\n \t\t\t\t\t\tif (paint) { this._drawTextLine(ctx, str, count*lineHeight); }\n \t\t\t\t\t\tif (lines) { lines.push(str); }\n \t\t\t\t\t\tif (w > maxW) { maxW = w; }\n \t\t\t\t\t\tstr = words[i+1];\n \t\t\t\t\t\tw = ctx.measureText(str).width;\n \t\t\t\t\t\tcount++;\n \t\t\t\t\t} else {\n \t\t\t\t\t\tstr += words[i] + words[i+1];\n \t\t\t\t\t\tw += wordW;\n \t\t\t\t\t}\n \t\t\t\t}\n \t\t\t}\n\n \t\t\tif (paint) { this._drawTextLine(ctx, str, count*lineHeight); }\n \t\t\tif (lines) { lines.push(str); }\n \t\t\tif (o && w == null) { w = ctx.measureText(str).width; }\n \t\t\tif (w > maxW) { maxW = w; }\n \t\t\tcount++;\n \t\t}\n\n \t\tif (o) {\n \t\t\to.width = maxW;\n \t\t\to.height = count*lineHeight;\n \t\t}\n \t\tif (!paint) { ctx.restore(); }\n \t\treturn o;\n \t}\n\n \t/**\n \t * @param {CanvasRenderingContext2D} ctx\n \t * @param {String} text\n \t * @param {Number} y\n \t * @protected\n \t */\n \t_drawTextLine (ctx, text, y) {\n \t\t// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:\n \t\tif (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }\n \t\telse { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }\n \t}\n\n \t/**\n \t * @param {String} text\n \t * @protected\n \t */\n \t_getMeasuredWidth (text) {\n \t\tlet ctx = Text._ctx;\n \t\tctx.save();\n \t\tlet w = this._prepContext(ctx).measureText(text).width;\n \t\tctx.restore();\n \t\treturn w;\n \t}\n\n}\n\n/**\n * Lookup table for the ratio to offset bounds x calculations based on the textAlign property.\n * @type {Object}\n * @readonly\n * @static\n */\nText.H_OFFSETS = {start: 0, left: 0, center: -0.5, end: -1, right: -1};\n/**\n * Lookup table for the ratio to offset bounds y calculations based on the textBaseline property.\n * @type {Object}\n * @readonly\n * @static\n */\nText.V_OFFSETS = {top: 0, hanging: -0.01, middle: -0.4, alphabetic: -0.8, ideographic: -0.85, bottom: -1};\n\n/**\n * @property _ctx\n * @type {CanvasRenderingContext2D}\n * @private\n * @static\n */\nText._ctx = createCanvas().getContext(\"2d\");\n","/**\n * @license AlphaMapFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\n\n/**\n * Applies a greyscale alpha map image (or canvas) to the target, such that the alpha channel of the result will\n * be copied from the red channel of the map, and the RGB channels will be copied from the target.\n *\n * Generally, it is recommended that you use {@link easeljs.AlphaMaskFilter}, because it has much better performance.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example *\n * let box = new Shape();\n * box.graphics.beginLinearGradientFill([\"#ff0000\", \"#0000ff\"], [0, 1], 0, 0, 0, 100)\n * box.graphics.drawRect(0, 0, 100, 100);\n * box.cache(0, 0, 100, 100);\n * let bmp = new Bitmap(\"path/to/image.jpg\");\n * bmp.filters = [ new AlphaMapFilter(box.cacheCanvas) ];\n * bmp.cache(0, 0, 100, 100);\n *\n * @param {HTMLImageElement | HTMLCanvasElement} alphaMap The greyscale image (or canvas) to use as the alpha value for the\n * result. This should be exactly the same dimensions as the target.\n */\nexport default class AlphaMapFilter extends Filter {\n\n\tconstructor (alphaMap) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same\n\t\t * dimensions as the target.\n\t\t * @type {HTMLImageElement | HTMLCanvasElement}\n\t\t */\n\t\tthis.alphaMap = alphaMap;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {HTMLImageElement | HTMLCanvasElement}\n\t\t * @default null\n\t\t */\n\t\tthis._alphaMap = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Uint8ClampedArray}\n\t\t * @default null\n\t\t */\n\t\tthis._mapData = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {*}\n\t\t * @default null\n\t\t */\n\t\tthis._mapTexture = null;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform sampler2D uAlphaSampler;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\t\t\t\tvec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\n\n\t\t\t\t// some image formats can have transparent white rgba(1,1,1, 0) when put on the GPU, this means we need a slight tweak\n\t\t\t\t// using ceil ensure that the colour will be used so long as it exists but pure transparency will be treated black\n\t\t\t\tgl_FragColor = vec4(color.rgb, color.a * (alphaMap.r * ceil(alphaMap.a)));\n\t\t\t}\n\t\t`;\n\t}\n\n\t/**\n\t * @todo docs\n\t * @param {*} gl\n\t * @param {*} stage\n\t * @param {*} shaderProgram\n\t */\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tif (!this._mapTexture) { this._mapTexture = gl.createTexture(); }\n\n\t\tgl.activeTexture(gl.TEXTURE1);\n\t\tgl.bindTexture(gl.TEXTURE_2D, this._mapTexture);\n\t\tstage.setTextureParams(gl);\n\t\tgl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.alphaMap);\n\n\t\tgl.uniform1i(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uAlphaSampler\"),\n\t\t\t1\n\t\t);\n\t}\n\n\t/**\n\t * @return {easeljs.AlphaMapFilter}\n\t */\n\tclone () {\n\t\tlet o = new AlphaMapFilter(this.alphaMap);\n\t\to._alphaMap = this._alphaMap;\n\t\to._mapData = this._mapData;\n\t\treturn o;\n\t}\n\n\t_applyFilter (imageData) {\n\t\tif (!this.alphaMap) { return true; }\n\t\tif (!this._prepAlphaMap()) { return false; }\n\n\t\t// TODO: update to support scenarios where the target has different dimensions.\n\t\tlet data = imageData.data;\n\t\tlet map = this._mapData;\n\t\tconst l = data.length;\n\t\tfor (let i=0; iIMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * var box = new Shape();\n * box.graphics.beginLinearGradientFill([\"#000000\", \"rgba(0, 0, 0, 0)\"], [0, 1], 0, 0, 100, 100)\n * box.graphics.drawRect(0, 0, 100, 100);\n * box.cache(0, 0, 100, 100);\n * var bmp = new Bitmap(\"path/to/image.jpg\");\n * bmp.filters = [ new AlphaMaskFilter(box.cacheCanvas) ];\n * bmp.cache(0, 0, 100, 100);\n *\n * @param {HTMLImageElement | HTMLCanvasElement} mask\n */\nexport default class AlphaMaskFilter extends Filter {\n\n\tconstructor (mask) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The image (or canvas) to use as the mask.\n\t\t * @type {HTMLImageElement | HTMLCanvasElement}\n\t\t */\n\t\tthis.mask = mask;\n\n\t\tthis.usesContext = true;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform sampler2D uAlphaSampler;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\t\t\t\tvec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\n\n\t\t\t\tgl_FragColor = vec4(color.rgb, color.a * alphaMap.a);\n\t\t\t}\n\t\t`;\n\t}\n\n\t/**\n\t * Applies the filter to the specified context.\n\t *\n\t * IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.\n\t * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.\n\t * @param {Number} x The x position to use for the source rect.\n\t * @param {Number} y The y position to use for the source rect.\n\t * @param {Number} width The width to use for the source rect.\n\t * @param {Number} height The height to use for the source rect.\n\t * @param {CanvasRenderingContext2D} [targetCtx] NOT SUPPORTED IN THIS FILTER. The 2D context to draw the result to. Defaults to the context passed to ctx.\n\t * @param {Number} [targetX] NOT SUPPORTED IN THIS FILTER. The x position to draw the result to. Defaults to the value passed to x.\n\t * @param {Number} [targetY] NOT SUPPORTED IN THIS FILTER. The y position to draw the result to. Defaults to the value passed to y.\n\t * @return {Boolean} If the filter was applied successfully.\n\t */\n\tapplyFilter (ctx, x, y, width, height, targetCtx, targetX, targetY) {\n\t\tif (!this.mask) { return true; }\n\t\ttargetCtx = targetCtx || ctx;\n\t\tif (targetX == null) { targetX = x; }\n\t\tif (targetY == null) { targetY = y; }\n\n\t\ttargetCtx.save();\n\t\tif (ctx != targetCtx) {\n\t\t\t// TODO: support targetCtx and targetX/Y\n\t\t\t// clearRect, then draw the ctx in?\n\t\t\treturn false;\n\t\t}\n\n\t\ttargetCtx.globalCompositeOperation = \"destination-in\";\n\t\ttargetCtx.drawImage(this.mask, targetX, targetY);\n\t\ttargetCtx.restore();\n\t\treturn true;\n\t}\n\n\t/**\n\t * @return {easeljs.AlphaMaskFilter}\n\t */\n\tclone () {\n\t\treturn new AlphaMaskFilter(this.mask);\n\t}\n\n\t/**\n\t * @todo docs\n\t * @param {*} gl\n\t * @param {*} stage\n\t * @param {*} shaderProgram\n\t */\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tif(!this._mapTexture) { this._mapTexture = gl.createTexture(); }\n\n\t\tgl.activeTexture(gl.TEXTURE1);\n\t\tgl.bindTexture(gl.TEXTURE_2D, this._mapTexture);\n\t\tstage.setTextureParams(gl);\n\t\tgl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.mask);\n\n\t\tgl.uniform1i(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uAlphaSampler\"),\n\t\t\t1\n\t\t);\n\t}\n\n}\n","/**\n * @license BlurFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * BoxBlur Algorithm by Mario Klingemann, quasimondo.com\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\nimport Rectangle from \"../geom/Rectangle\";\n\n/**\n * Applies a box blur to DisplayObjects. Note that this filter is fairly CPU intensive, particularly if the quality is\n * set higher than 1.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * let shape = new Shape().set({x:100,y:100});\n * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n * let blurFilter = new BlurFilter(5, 5, 1);\n * shape.filters = [blurFilter];\n * let bounds = blurFilter.getBounds();\n * shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);\n *\n * @param {Number} [blurX=0] The horizontal blur radius in pixels.\n * @param {Number} [blurY=0] The vertical blur radius in pixels.\n * @param {Number} [quality=1] The number of blur iterations.\n */\nexport default class BlurFilter extends Filter {\n\n\tconstructor (blurX = 0, blurY = 0, quality = 1) {\n\t\tsuper();\n\n\t\t/**\n\t\t * @protected\n\t\t * @default 0\n\t\t * @type {Number}\n\t\t */\n\t\tthis._blurX = blurX;\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._blurXTable = [];\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._lastBlurX = null;\n\n\t\t/**\n\t\t * @default 0\n\t\t * @type {Number}\n\t\t */\n\t\tthis._blurY = blurY;\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._blurYTable = [];\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._lastBlurY = null;\n\n\t\t/**\n\t\t * Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a\n\t\t * smoother blur, but take twice as long to run.\n\t\t * @default 1\n\t\t * @type {Number}\n\t\t */\n\t\tthis._quality = (isNaN(quality) || quality < 1) ? 1 : quality;\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t */\n\t\tthis._lastQuality = null;\n\n\t\tthis.FRAG_SHADER_TEMPLATE = `\n\t\t\tuniform float xWeight[{{blurX}}];\n\t\t\tuniform float yWeight[{{blurY}}];\n\t\t\tuniform vec2 textureOffset;\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = vec4(0.0);\n\n\t\t\t\tfloat xAdj = ({{blurX}}.0-1.0)/2.0;\n\t\t\t\tfloat yAdj = ({{blurY}}.0-1.0)/2.0;\n\t\t\t\tvec2 sampleOffset;\n\n\t\t\t\tfor(int i=0; i<{{blurX}}; i++) {\n\t\t\t\t\tfor(int j=0; j<{{blurY}}; j++) {\n\t\t\t\t\t\tsampleOffset = vRenderCoord + (textureOffset * vec2(float(i)-xAdj, float(j)-yAdj));\n\t\t\t\t\t\tcolor += texture2D(uSampler, sampleOffset) * (xWeight[i] * yWeight[j]);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tgl_FragColor = color.rgba;\n\t\t\t}\n\t\t`;\n\t}\n\n\t/**\n\t * Horizontal blur radius in pixels.\n\t * @type {Number}\n\t */\n\tget blurX () { return this._blurX; }\n\tset blurX (blurX) {\n\t\tif (isNaN(blurX) || blurX < 0) { blurX = 0; }\n\t\tthis._blurX = blurX;\n\t}\n\n\t/**\n\t * Vertical blur radius in pixels.\n\t * @type {Number}\n\t */\n\tget blurY () { return this._blurY; }\n\tset blurY (blurY) {\n\t\tif (isNaN(blurY) || blurY < 0) { blurY = 0; }\n\t\tthis._blurY = blurY;\n\t}\n\n\t/**\n\t * Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a\n\t * smoother blur, but take twice as long to run.\n\t * @type {Number}\n\t */\n\tget quality () { return this._quality | 0; }\n\tset quality (quality) {\n\t\tif (isNaN(quality) || quality < 0) { quality = 0; }\n\t\tthis._quality = quality;\n\t}\n\n\t/**\n\t * @protected\n\t * @type {*}\n\t */\n\tget _buildShader () {\n\t\tconst xChange = this._lastBlurX !== this._blurX;\n\t\tconst yChange = this._lastBlurY !== this._blurY;\n\t\tconst qChange = this._lastQuality !== this._quality;\n\t\tif (xChange || yChange || qChange) {\n\t\t\t\tif (xChange || qChange) { this._blurXTable = this._getTable(this._blurX * this._quality); }\n\t\t\t\tif (yChange || qChange) { this._blurYTable = this._getTable(this._blurY * this._quality); }\n\t\t\t\tthis._updateShader();\n\t\t\t\tthis._lastBlurX = this._blurX;\n\t\t\t\tthis._lastBlurY = this._blurY;\n\t\t\t\tthis._lastQuality = this._quality;\n\t\t\t\treturn undefined; // force a rebuild\n\t\t}\n\t\treturn this._compiledShader;\n\t}\n\tset _builtShader (value) { this._compiledShader = value; }\n\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\t// load the normalized gaussian weight tables\n\t\tgl.uniform1fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"xWeight\"),\n\t\t\tthis._blurXTable\n\t\t);\n\t\tgl.uniform1fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"yWeight\"),\n\t\t\tthis._blurYTable\n\t\t);\n\n\t\t// what is the size of a single pixel in -1, 1 (webGL) space\n\t\tgl.uniform2f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"textureOffset\"),\n\t\t\t2/(stage._viewportWidth*this._quality), 2/(stage._viewportHeight*this._quality)\n\t\t);\n\t}\n\n\tgetBounds (rect) {\n\t\tlet x = this.blurX|0, y = this.blurY| 0;\n\t\tif (x <= 0 && y <= 0) { return rect; }\n\t\tlet q = Math.pow(this.quality, 0.2);\n\t\treturn (rect || new Rectangle()).pad(y*q+1,x*q+1,y*q+1,x*q+1);\n\t}\n\n\t/**\n\t * @return {easeljs.BlurFilter}\n\t */\n\tclone () {\n\t\treturn new BlurFilter(this.blurX, this.blurY, this.quality);\n\t}\n\n\t_updateShader () {\n\t\tlet result = this.FRAG_SHADER_TEMPLATE;\n\t\tresult = result.replace(/{{blurX}}/g, this._blurXTable.length.toFixed(0));\n\t\tresult = result.replace(/{{blurY}}/g, this._blurYTable.length.toFixed(0));\n\t\tthis.FRAG_SHADER_BODY = result;\n\t}\n\n\t_getTable (spread) {\n\t\tconst EDGE = 4.2;\n\t\tif (spread <= 1) { return [1]; }\n\n\t\tlet result = [];\n\t\tlet count = Math.ceil(spread*2);\n\t\tcount += (count%2)?0:1;\n\t\tlet adjust = (count/2)|0;\n\t\tfor (let i = -adjust; i<=adjust; i++) {\n\t\t\tlet x = (i/adjust)*EDGE;\n\t\t\tresult.push(1/Math.sqrt(2*Math.PI) * Math.pow(Math.E, -(Math.pow(x,2)/4)));\n\t\t}\n\t\tlet factor = result.reduce((a, b) => a + b, 0);\n\t\treturn result.map(currentValue => currentValue / factor);\n\t}\n\n\t_applyFilter (imageData) {\n\t\tlet radiusX = this._blurX >> 1;\n\t\tif (isNaN(radiusX) || radiusX < 0) return false;\n\t\tlet radiusY = this._blurY >> 1;\n\t\tif (isNaN(radiusY) || radiusY < 0) return false;\n\t\tif (radiusX === 0 && radiusY === 0) return false;\n\n\t\tlet iterations = this.quality;\n\t\tif (isNaN(iterations) || iterations < 1) iterations = 1;\n\t\titerations |= 0;\n\t\tif (iterations > 3) iterations = 3;\n\t\tif (iterations < 1) iterations = 1;\n\n\t\tlet px = imageData.data;\n\t\tlet x=0, y=0, i=0, p=0, yp=0, yi=0, yw=0, r=0, g=0, b=0, a=0, pr=0, pg=0, pb=0, pa=0;\n\n\t\tlet divx = (radiusX + radiusX + 1) | 0;\n\t\tlet divy = (radiusY + radiusY + 1) | 0;\n\t\tlet w = imageData.width | 0;\n\t\tlet h = imageData.height | 0;\n\n\t\tlet w1 = (w - 1) | 0;\n\t\tlet h1 = (h - 1) | 0;\n\t\tlet rxp1 = (radiusX + 1) | 0;\n\t\tlet ryp1 = (radiusY + 1) | 0;\n\n\t\tlet ssx = {r:0,b:0,g:0,a:0};\n\t\tlet sx = ssx;\n\t\tfor ( i = 1; i < divx; i++ )\n\t\t{\n\t\t\tsx = sx.n = {r:0,b:0,g:0,a:0};\n\t\t}\n\t\tsx.n = ssx;\n\n\t\tlet ssy = {r:0,b:0,g:0,a:0};\n\t\tlet sy = ssy;\n\t\tfor ( i = 1; i < divy; i++ )\n\t\t{\n\t\t\tsy = sy.n = {r:0,b:0,g:0,a:0};\n\t\t}\n\t\tsy.n = ssy;\n\n\t\tlet si = null;\n\n\n\t\tlet mtx = BlurFilter.MUL_TABLE[radiusX] | 0;\n\t\tlet stx = BlurFilter.SHG_TABLE[radiusX] | 0;\n\t\tlet mty = BlurFilter.MUL_TABLE[radiusY] | 0;\n\t\tlet sty = BlurFilter.SHG_TABLE[radiusY] | 0;\n\n\t\twhile (iterations-- > 0) {\n\n\t\t\tyw = yi = 0;\n\t\t\tlet ms = mtx;\n\t\t\tlet ss = stx;\n\t\t\tfor (y = h; --y > -1;) {\n\t\t\t\tr = rxp1 * (pr = px[(yi) | 0]);\n\t\t\t\tg = rxp1 * (pg = px[(yi + 1) | 0]);\n\t\t\t\tb = rxp1 * (pb = px[(yi + 2) | 0]);\n\t\t\t\ta = rxp1 * (pa = px[(yi + 3) | 0]);\n\n\t\t\t\tsx = ssx;\n\n\t\t\t\tfor( i = rxp1; --i > -1; )\n\t\t\t\t{\n\t\t\t\t\tsx.r = pr;\n\t\t\t\t\tsx.g = pg;\n\t\t\t\t\tsx.b = pb;\n\t\t\t\t\tsx.a = pa;\n\t\t\t\t\tsx = sx.n;\n\t\t\t\t}\n\n\t\t\t\tfor( i = 1; i < rxp1; i++ )\n\t\t\t\t{\n\t\t\t\t\tp = (yi + ((w1 < i ? w1 : i) << 2)) | 0;\n\t\t\t\t\tr += ( sx.r = px[p]);\n\t\t\t\t\tg += ( sx.g = px[p+1]);\n\t\t\t\t\tb += ( sx.b = px[p+2]);\n\t\t\t\t\ta += ( sx.a = px[p+3]);\n\n\t\t\t\t\tsx = sx.n;\n\t\t\t\t}\n\n\t\t\t\tsi = ssx;\n\t\t\t\tfor ( x = 0; x < w; x++ )\n\t\t\t\t{\n\t\t\t\t\tpx[yi++] = (r * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (g * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (b * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (a * ms) >>> ss;\n\n\t\t\t\t\tp = ((yw + ((p = x + radiusX + 1) < w1 ? p : w1)) << 2);\n\n\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\tsi = si.n;\n\n\t\t\t\t}\n\t\t\t\tyw += w;\n\t\t\t}\n\n\t\t\tms = mty;\n\t\t\tss = sty;\n\t\t\tfor (x = 0; x < w; x++) {\n\t\t\t\tyi = (x << 2) | 0;\n\n\t\t\t\tr = (ryp1 * (pr = px[yi])) | 0;\n\t\t\t\tg = (ryp1 * (pg = px[(yi + 1) | 0])) | 0;\n\t\t\t\tb = (ryp1 * (pb = px[(yi + 2) | 0])) | 0;\n\t\t\t\ta = (ryp1 * (pa = px[(yi + 3) | 0])) | 0;\n\n\t\t\t\tsy = ssy;\n\t\t\t\tfor( i = 0; i < ryp1; i++ )\n\t\t\t\t{\n\t\t\t\t\tsy.r = pr;\n\t\t\t\t\tsy.g = pg;\n\t\t\t\t\tsy.b = pb;\n\t\t\t\t\tsy.a = pa;\n\t\t\t\t\tsy = sy.n;\n\t\t\t\t}\n\n\t\t\t\typ = w;\n\n\t\t\t\tfor( i = 1; i <= radiusY; i++ )\n\t\t\t\t{\n\t\t\t\t\tyi = ( yp + x ) << 2;\n\n\t\t\t\t\tr += ( sy.r = px[yi]);\n\t\t\t\t\tg += ( sy.g = px[yi+1]);\n\t\t\t\t\tb += ( sy.b = px[yi+2]);\n\t\t\t\t\ta += ( sy.a = px[yi+3]);\n\n\t\t\t\t\tsy = sy.n;\n\n\t\t\t\t\tif( i < h1 )\n\t\t\t\t\t{\n\t\t\t\t\t\typ += w;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tyi = x;\n\t\t\t\tsi = ssy;\n\t\t\t\tif ( iterations > 0 )\n\t\t\t\t{\n\t\t\t\t\tfor ( y = 0; y < h; y++ )\n\t\t\t\t\t{\n\t\t\t\t\t\tp = yi << 2;\n\t\t\t\t\t\tpx[p+3] = pa =(a * ms) >>> ss;\n\t\t\t\t\t\tif ( pa > 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpx[p] = ((r * ms) >>> ss );\n\t\t\t\t\t\t\tpx[p+1] = ((g * ms) >>> ss );\n\t\t\t\t\t\t\tpx[p+2] = ((b * ms) >>> ss );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tpx[p] = px[p+1] = px[p+2] = 0\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tp = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;\n\n\t\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\t\tsi = si.n;\n\n\t\t\t\t\t\tyi += w;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tfor ( y = 0; y < h; y++ )\n\t\t\t\t\t{\n\t\t\t\t\t\tp = yi << 2;\n\t\t\t\t\t\tpx[p+3] = pa =(a * ms) >>> ss;\n\t\t\t\t\t\tif ( pa > 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpa = 255 / pa;\n\t\t\t\t\t\t\tpx[p] = ((r * ms) >>> ss ) * pa;\n\t\t\t\t\t\t\tpx[p+1] = ((g * ms) >>> ss ) * pa;\n\t\t\t\t\t\t\tpx[p+2] = ((b * ms) >>> ss ) * pa;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tpx[p] = px[p+1] = px[p+2] = 0\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tp = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;\n\n\t\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\t\tsi = si.n;\n\n\t\t\t\t\t\tyi += w;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t\treturn true;\n\t}\n\n}\n\n/**\n * Array of multiply values for blur calculations.\n * @type {Array}\n * @protected\n * @readonly\n * @static\n */\nBlurFilter.MUL_TABLE = [1, 171, 205, 293, 57, 373, 79, 137, 241, 27, 391, 357, 41, 19, 283, 265, 497, 469, 443, 421, 25, 191, 365, 349, 335, 161, 155, 149, 9, 278, 269, 261, 505, 245, 475, 231, 449, 437, 213, 415, 405, 395, 193, 377, 369, 361, 353, 345, 169, 331, 325, 319, 313, 307, 301, 37, 145, 285, 281, 69, 271, 267, 263, 259, 509, 501, 493, 243, 479, 118, 465, 459, 113, 446, 55, 435, 429, 423, 209, 413, 51, 403, 199, 393, 97, 3, 379, 375, 371, 367, 363, 359, 355, 351, 347, 43, 85, 337, 333, 165, 327, 323, 5, 317, 157, 311, 77, 305, 303, 75, 297, 294, 73, 289, 287, 71, 141, 279, 277, 275, 68, 135, 67, 133, 33, 262, 260, 129, 511, 507, 503, 499, 495, 491, 61, 121, 481, 477, 237, 235, 467, 232, 115, 457, 227, 451, 7, 445, 221, 439, 218, 433, 215, 427, 425, 211, 419, 417, 207, 411, 409, 203, 202, 401, 399, 396, 197, 49, 389, 387, 385, 383, 95, 189, 47, 187, 93, 185, 23, 183, 91, 181, 45, 179, 89, 177, 11, 175, 87, 173, 345, 343, 341, 339, 337, 21, 167, 83, 331, 329, 327, 163, 81, 323, 321, 319, 159, 79, 315, 313, 39, 155, 309, 307, 153, 305, 303, 151, 75, 299, 149, 37, 295, 147, 73, 291, 145, 289, 287, 143, 285, 71, 141, 281, 35, 279, 139, 69, 275, 137, 273, 17, 271, 135, 269, 267, 133, 265, 33, 263, 131, 261, 130, 259, 129, 257, 1];\n/**\n * Array of shift values for blur calculations.\n * @type {Array}\n * @protected\n * @static\n */\nBlurFilter.SHG_TABLE = [0, 9, 10, 11, 9, 12, 10, 11, 12, 9, 13, 13, 10, 9, 13, 13, 14, 14, 14, 14, 10, 13, 14, 14, 14, 13, 13, 13, 9, 14, 14, 14, 15, 14, 15, 14, 15, 15, 14, 15, 15, 15, 14, 15, 15, 15, 15, 15, 14, 15, 15, 15, 15, 15, 15, 12, 14, 15, 15, 13, 15, 15, 15, 15, 16, 16, 16, 15, 16, 14, 16, 16, 14, 16, 13, 16, 16, 16, 15, 16, 13, 16, 15, 16, 14, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 13, 14, 16, 16, 15, 16, 16, 10, 16, 15, 16, 14, 16, 16, 14, 16, 16, 14, 16, 16, 14, 15, 16, 16, 16, 14, 15, 14, 15, 13, 16, 16, 15, 17, 17, 17, 17, 17, 17, 14, 15, 17, 17, 16, 16, 17, 16, 15, 17, 16, 17, 11, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 16, 17, 17, 16, 16, 17, 17, 17, 16, 14, 17, 17, 17, 17, 15, 16, 14, 16, 15, 16, 13, 16, 15, 16, 14, 16, 15, 16, 12, 16, 15, 16, 17, 17, 17, 17, 17, 13, 16, 15, 17, 17, 17, 16, 15, 17, 17, 17, 16, 15, 17, 17, 14, 16, 17, 17, 16, 17, 17, 16, 15, 17, 16, 14, 17, 16, 15, 17, 16, 17, 17, 16, 17, 15, 16, 17, 14, 17, 16, 15, 17, 16, 17, 13, 17, 16, 17, 17, 16, 17, 14, 17, 16, 17, 16, 17, 16, 17, 9];\n","/**\n * @license ColorFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\n\n/**\n * Applies a color transform to DisplayObjects.\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * let shape = new Shape().set({ x: 100, y: 100 });\n * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n * shape.filters = [ new ColorFilter(0,0,0,1, 0,0,255,0) ];\n * shape.cache(-50, -50, 100, 100);\n *\n * @param {Number} [redMultiplier=1] The amount to multiply against the red channel. This is a range between 0 and 1.\n * @param {Number} [greenMultiplier=1] The amount to multiply against the green channel. This is a range between 0 and 1.\n * @param {Number} [blueMultiplier=1] The amount to multiply against the blue channel. This is a range between 0 and 1.\n * @param {Number} [alphaMultiplier=1] The amount to multiply against the alpha channel. This is a range between 0 and 1.\n * @param {Number} [redOffset=0] The amount to add to the red channel after it has been multiplied. This is a range\n * between -255 and 255.\n * @param {Number} [greenOffset=0] The amount to add to the green channel after it has been multiplied. This is a range\n * between -255 and 255.\n * @param {Number} [blueOffset=0] The amount to add to the blue channel after it has been multiplied. This is a range\n * between -255 and 255.\n * @param {Number} [alphaOffset=0] The amount to add to the alpha channel after it has been multiplied. This is a range\n * between -255 and 255.\n */\nexport default class ColorFilter extends Filter {\n\n\tconstructor (redMultiplier = 1, greenMultiplier = 1, blueMultiplier = 1, alphaMultiplier = 1, redOffset = 0, greenOffset = 0, blueOffset = 0, alphaOffset = 0) {\n\t\tsuper();\n\n\t\t/**\n\t\t * Red channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.redMultiplier = redMultiplier;\n\n\t\t/**\n\t\t * Green channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.greenMultiplier = greenMultiplier;\n\n\t\t/**\n\t\t * Blue channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.blueMultiplier = blueMultiplier;\n\n\t\t/**\n\t\t * Alpha channel multiplier.\n\t\t * @type {Number}\n\t\t */\n\t\tthis.alphaMultiplier = alphaMultiplier;\n\n\t\t/**\n\t\t * Red channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.redOffset = redOffset;\n\n\t\t/**\n\t\t * Green channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.greenOffset = greenOffset;\n\n\t\t/**\n\t\t * Blue channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.blueOffset = blueOffset;\n\n\t\t/**\n\t\t * Alpha channel offset (added to value).\n\t\t * @type {Number}\n\t\t */\n\t\tthis.alphaOffset = alphaOffset;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform vec4 uColorMultiplier;\n\t\t\tuniform vec4 uColorOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tgl_FragColor = (color * uColorMultiplier) + uColorOffset;\n\t\t\t}\n\t\t`;\n\n\t}\n\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMultiplier\"),\n\t\t\tthis.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier\n\t\t);\n\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorOffset\"),\n\t\t\tthis.redOffset/255, this.greenOffset/255, this.blueOffset/255, this.alphaOffset/255\n\t\t);\n\t}\n\n\t/**\n\t * @return {easeljs.ColorFilter}\n\t */\n\tclone () {\n\t\treturn new ColorFilter(\n\t\t\tthis.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier,\n\t\t\tthis.redOffset, this.greenOffset, this.blueOffset, this.alphaOffset\n\t\t);\n\t}\n\n\t_applyFilter (imageData) {\n\t\tlet data = imageData.data;\n\t\tconst l = data.length;\n\t\tfor (let i=0; i 0) ? 3*value/100 : value/100);\n\t\tlet lumR = 0.3086;\n\t\tlet lumG = 0.6094;\n\t\tlet lumB = 0.0820;\n\t\tthis._multiplyMatrix([\n\t\t\tlumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0,\n\t\t\tlumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0,\n\t\t\tlumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t}\n\n\n\t/**\n\t * Adjusts the hue of the pixel color.\n\t * @param {Number} value A value between -180 & 180.\n\t * @return {easeljs.ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tadjustHue (value) {\n\t\tif (value === 0 || isNaN(value)) { return this; }\n\t\tvalue = this._cleanValue(value, 180)/180*Math.PI;\n\t\tlet cosVal = Math.cos(value);\n\t\tlet sinVal = Math.sin(value);\n\t\tlet lumR = 0.213;\n\t\tlet lumG = 0.715;\n\t\tlet lumB = 0.072;\n\t\tthis._multiplyMatrix([\n\t\t\tlumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,\n\t\t\tlumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,\n\t\t\tlumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t}\n\n\t/**\n\t * Concatenates (multiplies) the specified matrix with this one.\n\t * @param {Array} matrix An array or ColorMatrix instance.\n\t * @return {easeljs.ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tconcat (matrix) {\n\t\tmatrix = this._fixMatrix(matrix);\n\t\tif (matrix.length != ColorMatrix.LENGTH) { return this; }\n\t\tthis._multiplyMatrix(matrix);\n\t\treturn this;\n\t}\n\n\t/**\n\t * @return {easeljs.ColorMatrix} A clone of this ColorMatrix.\n\t */\n\tclone () {\n\t\treturn (new ColorMatrix()).copy(this);\n\t}\n\n\t/**\n\t * Return a length 25 (5x5) array instance containing this matrix's values.\n\t * @return {Array} An array holding this matrix's values.\n\t */\n\ttoArray () {\n\t\tconst arr = [];\n\t\tconst l = ColorMatrix.LENGTH;\n\t\tfor (let i=0; i ColorMatrix.LENGTH) {\n\t\t\tmatrix = matrix.slice(0, ColorMatrix.LENGTH);\n\t\t}\n\t\treturn matrix;\n\t}\n\n}\n\n/**\n * Array of delta values for contrast calculations.\n * @type {Array}\n * @protected\n * @readonly\n * @static\n */\nColorMatrix.DELTA_INDEX = Object.freeze([\n \t0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,\n \t0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,\n \t0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,\n \t0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,\n \t0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,\n \t1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,\n \t1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,\n \t2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,\n \t4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,\n \t7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,\n \t10.0\n]);\n/**\n * Identity matrix values.\n * @type {Array}\n * @protected\n * @readonly\n * @static\n */\nColorMatrix.IDENTITY_MATRIX = Object.freeze([\n \t1,0,0,0,0,\n \t0,1,0,0,0,\n \t0,0,1,0,0,\n \t0,0,0,1,0,\n \t0,0,0,0,1\n]);\n/**\n * The constant length of a color matrix.\n * @type {Number}\n * @protected\n * @readonly\n * @static\n */\nColorMatrix.LENGTH = 25;\n","/**\n * @license ColorMatrixFilter\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport Filter from \"./Filter\";\n\n/**\n * Allows you to carry out complex color operations such as modifying saturation, brightness, or inverting. See the\n * {@link easeljs.ColorMatrix} for more information on changing colors. For an easier color transform,\n * consider the {@link easeljs.ColorFilter}.\n *\n *\n * @memberof easeljs\n * @extends easeljs.Filter\n * @example\n * let shape = new Shape().set({ x: 100, y: 100 });\n * shape.graphics.beginFill(\"#ff0000\").drawCircle(0, 0, 50);\n * let matrix = new ColorMatrix().adjustHue(180).adjustSaturation(100);\n * shape.filters = [ new ColorMatrixFilter(matrix) ];\n * shape.cache(-50, -50, 100, 100);\n *\n * @param {Array | easeljs.ColorMatrix} matrix A 4x5 matrix describing the color operation to perform.\n */\nexport default class ColorMatrixFilter extends Filter {\n\n\tconstructor (matrix) {\n\t\tsuper();\n\n\t\t/**\n\t\t * A 4x5 matrix describing the color operation to perform.\n\t\t * @type {Array | easeljs.ColorMatrix}\n\t\t */\n\t\tthis.matrix = matrix;\n\n\t\tthis.FRAG_SHADER_BODY = `\n\t\t\tuniform mat4 uColorMatrix;\n\t\t\tuniform vec4 uColorMatrixOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tmat4 m = uColorMatrix;\n\t\t\t\tvec4 newColor = vec4(0,0,0,0);\n\t\t\t\tnewColor.r = color.r*m[0][0] + color.g*m[0][1] + color.b*m[0][2] + color.a*m[0][3];\n\t\t\t\tnewColor.g = color.r*m[1][0] + color.g*m[1][1] + color.b*m[1][2] + color.a*m[1][3];\n\t\t\t\tnewColor.b = color.r*m[2][0] + color.g*m[2][1] + color.b*m[2][2] + color.a*m[2][3];\n\t\t\t\tnewColor.a = color.r*m[3][0] + color.g*m[3][1] + color.b*m[3][2] + color.a*m[3][3];\n\n\t\t\t\tgl_FragColor = newColor + uColorMatrixOffset;\n\t\t\t}\n\t\t`;\n\t}\n\n\tshaderParamSetup (gl, stage, shaderProgram) {\n\t\tlet mat = this.matrix;\n\t\tlet colorMatrix = new Float32Array([\n\t\t\tmat[0],mat[1],mat[2],mat[3],\n\t\t\tmat[5],mat[6],mat[7],mat[8],\n\t\t\tmat[10],mat[11],mat[12],mat[13],\n\t\t\tmat[15],mat[16],mat[17],mat[18]\n\t\t]);\n\n\t\tgl.uniformMatrix4fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMatrix\"),\n\t\t\tfalse, colorMatrix\n\t\t);\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMatrixOffset\"),\n\t\t\tmat[4]/255, mat[9]/255, mat[14]/255, mat[19]/255\n\t\t);\n\t}\n\n\t/**\n\t * @return {easeljs.ColorMatrixFilter}\n\t */\n\tclone () {\n\t\treturn new ColorMatrixFilter(this.matrix);\n\t}\n\n\t_applyFilter (imageData) {\n\t\tlet data = imageData.data;\n\t\tconst l = data.length;\n\t\tlet r,g,b,a;\n\t\tlet mtx = this.matrix;\n\t\tlet m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4];\n\t\tlet m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9];\n\t\tlet m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14];\n\t\tlet m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19];\n\n\t\tfor (let i=0; i {\n * // clicked\n * }));\n *\n * @param {easeljs.Sprite | easeljs.MovieClip} target The instance to manage.\n * @param {String} [outLabel=\"out\"] The label or animation to go to when the user rolls out of the button.\n * @param {String} [overLabel=\"over\"] The label or animation to go to when the user rolls over the button.\n * @param {String} [downLabel=\"down\"] The label or animation to go to when the user presses the button.\n * @param {Boolean} [play=false] If the helper should call \"gotoAndPlay\" or \"gotoAndStop\" on the button when changing\n * states.\n * @param {easeljs.DisplayObject} [hitArea] An optional item to use as the hit state for the button. If this is not defined,\n * then the button's visible states will be used instead. Note that the same instance as the \"target\" argument can be\n * used for the hitState.\n * @param {String} [hitLabel] The label or animation on the hitArea instance that defines the hitArea bounds. If this is\n * null, then the default state of the hitArea will be used.\n */\nexport default class ButtonHelper {\n\n\tconstructor (target, outLabel = \"out\", overLabel = \"over\", downLabel = \"down\", play = false, hitArea, hitLabel) {\n\t\tif (!target.addEventListener) { return; }\n\n\t\t/**\n\t\t * The target for this button helper.\n\t\t * @type {easeljs.MovieClip | easeljs.Sprite}\n\t\t * @readonly\n\t\t */\n\t\tthis.target = target;\n\n\t\t/**\n\t\t * The label name or frame number to display when the user mouses out of the target.\n\t\t * @default \"over\"\n\t\t * @type {String | Number}\n\t\t */\n\t\tthis.overLabel = overLabel;\n\n\t\t/**\n\t\t * The label name or frame number to display when the user mouses over the target.\n\t\t * @default \"out\"\n\t\t * @type {String | Number}\n\t\t */\n\t\tthis.outLabel = outLabel;\n\n\t\t/**\n\t\t * The label name or frame number to display when the user presses on the target.\n\t\t * @default \"down\"\n\t\t * @type {String | Number}\n\t\t */\n\t\tthis.downLabel = downLabel == null;\n\n\t\t/**\n\t\t * If true, then ButtonHelper will call gotoAndPlay, if false, it will use gotoAndStop.\n\t\t * @default false\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.play = play;\n\n\t\t/**\n\t\t * @type {Boolean}\n\t\t * @protected\n\t\t */\n\t\tthis._isPressed = false;\n\n\t\t/**\n\t\t * @type {Boolean}\n\t\t * @protected\n\t\t */\n\t\tthis._isOver = false;\n\n\t\t/**\n\t\t * @type {Boolean}\n\t\t * @protected\n\t\t */\n\t\tthis._enabled = false;\n\n\t\ttarget.mouseChildren = false; // prevents issues when children are removed from the display list when state changes.\n\t\tthis.enabled = true;\n\t\tthis.handleEvent({});\n\t\tif (hitArea) {\n\t\t\tif (hitLabel) {\n\t\t\t\thitArea.actionsEnabled = false;\n\t\t\t\thitArea.gotoAndStop&&hitArea.gotoAndStop(hitLabel);\n\t\t\t}\n\t\t\ttarget.hitArea = hitArea;\n\t\t}\n\t}\n\n\t/**\n\t * Enables or disables the button functionality on the target.\n\t * @type {Boolean}\n\t */\n\tget enabled () { return this._enabled; }\n\tset enabled (enabled) {\n\t\tif (enabled === this._enabled) { return; }\n\t\tlet o = this.target;\n\t\tthis._enabled = enabled;\n\t\tif (enabled) {\n\t\t\to.cursor = \"pointer\";\n\t\t\to.addEventListener(\"rollover\", this);\n\t\t\to.addEventListener(\"rollout\", this);\n\t\t\to.addEventListener(\"mousedown\", this);\n\t\t\to.addEventListener(\"pressup\", this);\n\t\t\tif (o._reset) { o.__reset = o._reset; o._reset = this._reset;}\n\t\t} else {\n\t\t\to.cursor = null;\n\t\t\to.removeEventListener(\"rollover\", this);\n\t\t\to.removeEventListener(\"rollout\", this);\n\t\t\to.removeEventListener(\"mousedown\", this);\n\t\t\to.removeEventListener(\"pressup\", this);\n\t\t\tif (o.__reset) { o._reset = o.__reset; delete(o.__reset); }\n\t\t}\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * @param {Object} evt The mouse event to handle.\n\t * @protected\n\t */\n\thandleEvent (evt) {\n\t\tlet label, t = this.target, type = evt.type;\n\t\tif (type === \"mousedown\") {\n\t\t\tthis._isPressed = true;\n\t\t\tlabel = this.downLabel;\n\t\t} else if (type === \"pressup\") {\n\t\t\tthis._isPressed = false;\n\t\t\tlabel = this._isOver ? this.overLabel : this.outLabel;\n\t\t} else if (type === \"rollover\") {\n\t\t\tthis._isOver = true;\n\t\t\tlabel = this._isPressed ? this.downLabel : this.overLabel;\n\t\t} else { // rollout and default\n\t\t\tthis._isOver = false;\n\t\t\tlabel = this._isPressed ? this.overLabel : this.outLabel;\n\t\t}\n\t\tif (this.play) {\n\t\t\tt.gotoAndPlay&&t.gotoAndPlay(label);\n\t\t} else {\n\t\t\tt.gotoAndStop&&t.gotoAndStop(label);\n\t\t}\n\t}\n\n\t/**\n\t * Injected into target. Preserves the paused state through a reset.\n\t * @protected\n\t */\n\t_reset () {\n\t\t// TODO: explore better ways to handle this issue. This is hacky & disrupts object signatures.\n\t\tlet p = this.paused;\n\t\tthis.__reset();\n\t\tthis.paused = p;\n\t}\n\n}\n","/**\n * @license Touch\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Global utility for working with multi-touch enabled devices in EaselJS. Currently supports W3C Touch API (iOS and\n * modern Android browser) and the Pointer API (IE), including ms-prefixed events in IE10, and unprefixed in IE11.\n *\n * Ensure that you {{#crossLink \"Touch/disable\"}}{{/crossLink}} touch when cleaning up your application. You do not have\n * to check if touch is supported to enable it, as it will fail gracefully if it is not supported.\n *\n * Note: It is important to disable Touch on a stage that you are no longer using:\n *\n * @memberof easeljs\n * @name easeljs.Touch\n * @example\n * let stage = new Stage(\"canvasId\");\n * Touch.enable(stage);\n */\nexport default {\n\n\t/**\n\t * Returns `true` if touch is supported in the current browser.\n\t * @return {Boolean} Indicates whether touch is supported in the current browser.\n\t */\n\tisSupported () {\n\t\treturn\t!!(('ontouchstart' in window) // iOS & Android\n\t\t\t|| (window.MSPointerEvent && window.navigator.msMaxTouchPoints > 0) // IE10\n\t\t\t|| (window.PointerEvent && window.navigator.maxTouchPoints > 0)); // IE11+\n\t},\n\n\t/**\n\t * Enables touch interaction for the specified EaselJS {@link easeljs.Stage}. Currently supports iOS\n\t * (and compatible browsers, such as modern Android browsers), and IE10/11. Supports both single touch and\n\t * multi-touch modes. Extends the EaselJS {@link easeljs.MouseEvent} model, but without support for\n\t * double click or over/out events.\n\t * @param {easeljs.Stage} stage The Stage to enable touch on.\n\t * @param {Boolean} [singleTouch=false] If `true`, only a single touch will be active at a time.\n\t * @param {Boolean} [allowDefault=false] If `true`, then default gesture actions (ex. scrolling, zooming) will be\n\t * allowed when the user is interacting with the target canvas.\n\t * @return {Boolean} Returns `true` if touch was successfully enabled on the target stage.\n\t */\n\tenable (stage, singleTouch = false, allowDefault = false) {\n\t\tif (!stage || !stage.canvas || !this.isSupported()) { return false; }\n\t\tif (stage.__touch) { return true; }\n\n\t\t// inject required properties on stage:\n\t\tstage.__touch = {pointers:{}, multitouch:!singleTouch, preventDefault:!allowDefault, count:0};\n\n\t\t// note that in the future we may need to disable the standard mouse event model before adding\n\t\t// these to prevent duplicate calls. It doesn't seem to be an issue with iOS devices though.\n\t\tif ('ontouchstart' in window) { this._IOS_enable(stage); }\n\t\telse if (window.PointerEvent || window.MSPointerEvent) { this._IE_enable(stage); }\n\t\treturn true;\n\t},\n\n\t/**\n\t * Removes all listeners that were set up when calling `Touch.enable()` on a stage.\n\t * @param {easeljs.Stage} stage The Stage to disable touch on.\n\t */\n\tdisable (stage) {\n\t\tif (!stage) { return; }\n\t\tif ('ontouchstart' in window) { this._IOS_disable(stage); }\n\t\telse if (window.PointerEvent || window.MSPointerEvent) { this._IE_disable(stage); }\n\t\tdelete stage.__touch;\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IOS_enable (stage) {\n\t\tlet canvas = stage.canvas;\n\t\tlet f = stage.__touch.f = e => this._IOS_handleEvent(stage, e);\n\t\tcanvas.addEventListener(\"touchstart\", f, false);\n\t\tcanvas.addEventListener(\"touchmove\", f, false);\n\t\tcanvas.addEventListener(\"touchend\", f, false);\n\t\tcanvas.addEventListener(\"touchcancel\", f, false);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IOS_disable (stage) {\n\t\tlet canvas = stage.canvas;\n\t\tif (!canvas) { return; }\n\t\tlet f = stage.__touch.f;\n\t\tcanvas.removeEventListener(\"touchstart\", f, false);\n\t\tcanvas.removeEventListener(\"touchmove\", f, false);\n\t\tcanvas.removeEventListener(\"touchend\", f, false);\n\t\tcanvas.removeEventListener(\"touchcancel\", f, false);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {Object} e The event to handle\n\t */\n\t_IOS_handleEvent (stage, e) {\n\t\tif (!stage) { return; }\n\t\tif (stage.__touch.preventDefault) { e.preventDefault&&e.preventDefault(); }\n\t\tlet touches = e.changedTouches;\n\t\tlet type = e.type;\n\t\tconst l = touches.length;\n\t\tfor (let touch of touches) {\n\t\t\tlet id = touch.identifier;\n\t\t\tif (touch.target != stage.canvas) { continue; }\n\n\t\t\tif (type === \"touchstart\") {\n\t\t\t\tthis._handleStart(stage, id, e, touch.pageX, touch.pageY);\n\t\t\t} else if (type === \"touchmove\") {\n\t\t\t\tthis._handleMove(stage, id, e, touch.pageX, touch.pageY);\n\t\t\t} else if (type === \"touchend\" || type === \"touchcancel\") {\n\t\t\t\tthis._handleEnd(stage, id, e);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IE_enable (stage) {\n\t\tlet canvas = stage.canvas;\n\t\tlet f = stage.__touch.f = e => this._IE_handleEvent(stage,e);\n\n\t\tif (window.PointerEvent === undefined) {\n\t\t\tcanvas.addEventListener(\"MSPointerDown\", f, false);\n\t\t\twindow.addEventListener(\"MSPointerMove\", f, false);\n\t\t\twindow.addEventListener(\"MSPointerUp\", f, false);\n\t\t\twindow.addEventListener(\"MSPointerCancel\", f, false);\n\t\t\tif (stage.__touch.preventDefault) { canvas.style.msTouchAction = \"none\"; }\n\t\t} else {\n\t\t\tcanvas.addEventListener(\"pointerdown\", f, false);\n\t\t\twindow.addEventListener(\"pointermove\", f, false);\n\t\t\twindow.addEventListener(\"pointerup\", f, false);\n\t\t\twindow.addEventListener(\"pointercancel\", f, false);\n\t\t\tif (stage.__touch.preventDefault) { canvas.style.touchAction = \"none\"; }\n\n\t\t}\n\t\tstage.__touch.activeIDs = {};\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t */\n\t_IE_disable (stage) {\n\t\tlet f = stage.__touch.f;\n\n\t\tif (window.PointerEvent === undefined) {\n\t\t\twindow.removeEventListener(\"MSPointerMove\", f, false);\n\t\t\twindow.removeEventListener(\"MSPointerUp\", f, false);\n\t\t\twindow.removeEventListener(\"MSPointerCancel\", f, false);\n\t\t\tif (stage.canvas) {\n\t\t\t\tstage.canvas.removeEventListener(\"MSPointerDown\", f, false);\n\t\t\t}\n\t\t} else {\n\t\t\twindow.removeEventListener(\"pointermove\", f, false);\n\t\t\twindow.removeEventListener(\"pointerup\", f, false);\n\t\t\twindow.removeEventListener(\"pointercancel\", f, false);\n\t\t\tif (stage.canvas) {\n\t\t\t\tstage.canvas.removeEventListener(\"pointerdown\", f, false);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {Object} e The event to handle.\n\t */\n\t_IE_handleEvent (stage, e) {\n\t\tif (!stage) { return; }\n\t\tif (stage.__touch.preventDefault) { e.preventDefault && e.preventDefault(); }\n\t\tlet type = e.type;\n\t\tlet id = e.pointerId;\n\t\tlet ids = stage.__touch.activeIDs;\n\n\t\tif (type === \"MSPointerDown\" || type === \"pointerdown\") {\n\t\t\tif (e.srcElement != stage.canvas) { return; }\n\t\t\tids[id] = true;\n\t\t\tthis._handleStart(stage, id, e, e.pageX, e.pageY);\n\t\t} else if (ids[id]) { // it's an id we're watching\n\t\t\tif (type === \"MSPointerMove\" || type === \"pointermove\") {\n\t\t\t\tthis._handleMove(stage, id, e, e.pageX, e.pageY);\n\t\t\t} else if (type === \"MSPointerUp\" || type === \"MSPointerCancel\"\n\t\t\t\t\t|| type === \"pointerup\" || type === \"pointercancel\") {\n\t\t\t\tdelete(ids[id]);\n\t\t\t\tthis._handleEnd(stage, id, e);\n\t\t\t}\n\t\t}\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {String | Number} id\n\t * @param {Object} e\n\t * @param {Number} x\n\t * @param {Number} y\n\t */\n\t_handleStart (stage, id, e, x, y) {\n\t\tlet props = stage.__touch;\n\t\tif (!props.multitouch && props.count) { return; }\n\t\tlet ids = props.pointers;\n\t\tif (ids[id]) { return; }\n\t\tids[id] = true;\n\t\tprops.count++;\n\t\tstage._handlePointerDown(id, e, x, y);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {String | Number} id\n\t * @param {Object} e\n\t * @param {Number} x\n\t * @param {Number} y\n\t */\n\t_handleMove (stage, id, e, x, y) {\n\t\tif (!stage.__touch.pointers[id]) { return; }\n\t\tstage._handlePointerMove(id, e, x, y);\n\t},\n\n\t/**\n\t * @private\n\t * @param {easeljs.Stage} stage\n\t * @param {String | Number} id\n\t * @param {Object} e\n\t */\n\t_handleEnd (stage, id, e) {\n\t\t// TODO: cancel should be handled differently for proper UI (ex. an up would trigger a click, a cancel would more closely resemble an out).\n\t\tlet props = stage.__touch;\n\t\tlet ids = props.pointers;\n\t\tif (!ids[id]) { return; }\n\t\tprops.count--;\n\t\tstage._handlePointerUp(id, e, true);\n\t\tdelete(ids[id]);\n\t}\n\n}\n","/**\n * @license SpriteSheetBuilder\n * Visit http://createjs.com/ for documentation, updates and examples.\n *\n * Copyright (c) 2017 gskinner.com, inc.\n *\n * Permission is hereby granted, free of charge, to any person\n * obtaining a copy of this software and associated documentation\n * files (the \"Software\"), to deal in the Software without\n * restriction, including without limitation the rights to use,\n * copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following\n * conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n * OTHER DEALINGS IN THE SOFTWARE.\n */\n\nimport { EventDispatcher, Event } from \"@createjs/core\";\nimport Rectangle from \"../geom/Rectangle\";\nimport SpriteSheet from \"../display/SpriteSheet\";\n\n/**\n * The SpriteSheetBuilder allows you to generate {@link easeljs.SpriteSheet} instances at run time\n * from any display object. This can allow you to maintain your assets as vector graphics (for low file size), and\n * render them at run time as SpriteSheets for better performance.\n *\n * SpriteSheets can be built either synchronously, or asynchronously, so that large SpriteSheets can be generated\n * without locking the UI.\n *\n * Note that the \"images\" used in the generated SpriteSheet are actually canvas elements, and that they will be\n * sized to the nearest power of 2 up to the value of {@link easeljs.SpriteSheetBuilder#maxWidth}\n * or {@link easeljs.SpriteSheetBuilder#maxHeight}.\n *\n * @memberof easeljs\n * @extends core.EventDispatcher\n *\n * @param {Number} [framerate=0] The {{#crossLink \"SpriteSheet/framerate:property\"}}{{/crossLink}} of\n * {@link easeljs.SpriteSheet} instances that are created.\n */\nexport default class SpriteSheetBuilder extends EventDispatcher {\n\n\tconstructor (framerate = 0) {\n\t\tsuper();\n\n\t\t/**\n\t\t * The maximum width for the images (not individual frames) in the generated SpriteSheet. It is recommended to\n\t\t * use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max\n\t\t * dimensions, then additional images will be created as needed.\n\t\t * @type {Number}\n\t\t * @default 2048\n\t\t*/\n\t\tthis.maxWidth = 2048;\n\n\t\t/**\n\t\t * The maximum height for the images (not individual frames) in the generated SpriteSheet. It is recommended to\n\t\t * use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max\n\t\t * dimensions, then additional images will be created as needed.\n\t\t * @type {Number}\n\t\t * @default 2048\n\t\t */\n\t\tthis.maxHeight = 2048;\n\n\t\t/**\n\t\t * The SpriteSheet that was generated. This will be null before a build is completed successfully.\n\t\t * @type {easeljs.SpriteSheet}\n\t\t */\n\t\tthis.spriteSheet = null;\n\n\t\t/**\n\t\t * The scale to apply when drawing all frames to the SpriteSheet. This is multiplied against any scale specified\n\t\t * in the addFrame call. This can be used, for example, to generate a SpriteSheet at run time that is tailored\n\t\t * to the a specific device resolution (ex. tablet vs mobile).\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t */\n\t\tthis.scale = 1;\n\n\t\t/**\n\t\t* The padding to use between frames. This is helpful to preserve antialiasing on drawn vector content.\n\t\t* @type {Number}\n\t\t* @default 1\n\t\t*/\n\t\tthis.padding = 1;\n\n\t\t/**\n\t\t * A number from 0.01 to 0.99 that indicates what percentage of time the builder can use. This can be\n\t\t * thought of as the number of seconds per second the builder will use. For example, with a timeSlice value of 0.3,\n\t\t * the builder will run 20 times per second, using approximately 15ms per build (30% of available time, or 0.3s per second).\n\t\t * Defaults to 0.3.\n\t\t * @type {Number}\n\t\t * @default 0.3\n\t\t */\n\t\tthis.timeSlice = 0.3;\n\n\t\t/**\n\t\t * A value between 0 and 1 that indicates the progress of a build, or -1 if a build has not\n\t\t * been initiated.\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t * @readonly\n\t\t */\n\t\tthis.progress = -1;\n\n\t\t/**\n\t\t * A {@link easeljs.SpriteSheet#framerate} value that will be passed to new SpriteSheet instances that are\n\t\t * created. If no framerate is specified (or it is 0), then SpriteSheets will use the {@link core.Ticker} framerate.\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis.framerate = framerate;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._frames = [];\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._animations = {};\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._data = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._nextFrameIndex = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._index = 0;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._timerID = null;\n\n\t\t/**\n\t\t * @protected\n\t\t * @type {Number}\n\t\t */\n\t\tthis._scale = 1;\n\t}\n\n\t/**\n\t * Adds a frame to the {@link easeljs.SpriteSheet}. Note that the frame will not be drawn until you\n\t * call {@link easeljs.SpriteSheetBuilder#build} method. The optional setup params allow you to have\n\t * a function run immediately before the draw occurs. For example, this allows you to add a single source multiple\n\t * times, but manipulate it or its children to change it to generate different frames.\n\t *\n\t * Note that the source's transformations (x, y, scale, rotate, alpha) will be ignored, except for regX/Y. To apply\n\t * transforms to a source object and have them captured in the SpriteSheet, simply place it into a {@link easeljs.Container}\n\t * and pass in the Container as the source.\n\t * @param {easeljs.DisplayObject} source The source {{#crossLink \"DisplayObject\"}}{{/crossLink}} to draw as the frame.\n\t * @param {easeljs.Rectangle} [sourceRect] A {{#crossLink \"Rectangle\"}}{{/crossLink}} defining the portion of the\n\t * source to draw to the frame. If not specified, it will look for a `getBounds` method, bounds property, or\n\t * `nominalBounds` property on the source to use. If one is not found, the frame will be skipped.\n\t * @param {Number} [scale=1] Optional. The scale to draw this frame at. Default is 1.\n\t * @param {Function} [setupFunction] A function to call immediately before drawing this frame. It will be called with two parameters: the source, and setupData.\n\t * @param {Object} [setupData] Arbitrary setup data to pass to setupFunction as the second parameter.\n\t * @return {Number} The index of the frame that was just added, or null if a sourceRect could not be determined.\n\t */\n\taddFrame (source, sourceRect, scale = 1, setupFunction, setupData) {\n\t\tif (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }\n\t\tlet rect = sourceRect||source.bounds||source.nominalBounds||(source.getBounds&&source.getBounds());\n\t\tif (!rect) { return null; }\n\t\treturn this._frames.push({ source, sourceRect: rect, scale, funct: setupFunction, data: setupData, index: this._frames.length, height: rect.height*scale }) - 1;\n\t}\n\n\t/**\n\t * Adds an animation that will be included in the created {@link easeljs.SpriteSheet}.\n\t * @param {String} name The name for the animation.\n\t * @param {Array} frames An array of frame indexes that comprise the animation. Ex. [3,6,5] would describe an animation\n\t * that played frame indexes 3, 6, and 5 in that order.\n\t * @param {String} [next] Specifies the name of the animation to continue to after this animation ends. You can\n\t * also pass false to have the animation stop when it ends. By default it will loop to the start of the same animation.\n\t * @param {Number} [speed] Specifies a frame advance speed for this animation. For example, a value of 0.5 would\n\t * cause the animation to advance every second tick. Note that earlier versions used `frequency` instead, which had\n\t * the opposite effect.\n\t */\n\taddAnimation (name, frames, next, speed) {\n\t\tif (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }\n\t\tthis._animations[name] = { frames, next, speed };\n\t}\n\n\t/**\n\t * This will take a {@link easeljs.MovieClip} instance, and add its frames and labels to this\n\t * builder. Labels will be added as an animation running from the label index to the next label. For example, if\n\t * there is a label named \"foo\" at frame 0 and a label named \"bar\" at frame 10, in a MovieClip with 15 frames, it\n\t * will add an animation named \"foo\" that runs from frame index 0 to 9, and an animation named \"bar\" that runs from\n\t * frame index 10 to 14.\n\t *\n\t * Note that this will iterate through the full MovieClip with {@link easeljs.MovieClip#actionsEnabled}\n\t * set to `false`, ending on the last frame.\n\t * @param {easeljs.MovieClip} source The source MovieClip instance to add to the SpriteSheet.\n\t * @param {easeljs.Rectangle} [sourceRect] A Rectangle defining the portion of the source to\n\t * draw to the frame. If not specified, it will look for a {{#crossLink \"DisplayObject/getBounds\"}}{{/crossLink}}\n\t * method, `frameBounds` Array, `bounds` property, or `nominalBounds` property on the source to use. If one is not\n\t * found, the MovieClip will be skipped.\n\t * @param {Number} [scale=1] The scale to draw the movie clip at.\n\t * @param {Function} [setupFunction] A function to call immediately before drawing each frame. It will be called\n\t * with three parameters: the source, setupData, and the frame index.\n\t * @param {Object} [setupData] Arbitrary setup data to pass to setupFunction as the second parameter.\n\t * @param {Function} [labelFunction] This method will be called for each MovieClip label that is added with four\n\t * parameters: the label name, the source MovieClip instance, the starting frame index (in the movieclip timeline)\n\t * and the end index. It must return a new name for the label/animation, or `false` to exclude the label.\n\t */\n\taddMovieClip (source, sourceRect, scale = 1, setupFunction, setupData, labelFunction) {\n\t\tif (this._data) { throw SpriteSheetBuilder.ERR_RUNNING; }\n\t\tlet rects = source.frameBounds;\n\t\tlet rect = sourceRect||source.bounds||source.nominalBounds||(source.getBounds&&source.getBounds());\n\t\tif (!rect && !rects) { return; }\n\n\t\tlet baseFrameIndex = this._frames.length;\n\t\tconst duration = source.timeline.duration;\n\t\tfor (let i=0; i a.index-b.index);\n\t\t\tfor (let i=0,l=lbls.length; i this._run(), 50-Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50);\n\t}\n\n\t/**\n\t * Stops the current asynchronous build.\n\t */\n\tstopAsync () {\n\t\tclearTimeout(this._timerID);\n\t\tthis._data = null;\n\t}\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @override\n\t * @return {String} a string representation of the instance.\n\t */\n\ttoString () {\n\t\treturn `[${this.constructor.name}]`;\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_startBuild () {\n\t\tlet pad = this.padding||0;\n\t\tthis.progress = 0;\n\t\tthis.spriteSheet = null;\n\t\tthis._index = 0;\n\t\tthis._scale = this.scale;\n\t\tlet dataFrames = [];\n\t\tthis._data = {\n\t\t\timages: [],\n\t\t\tframes: dataFrames,\n\t\t\tframerate: this.framerate,\n\t\t\tanimations: this._animations // TODO: should we \"clone\" _animations in case someone adds more animations after a build?\n\t\t};\n\n\t\tlet frames = this._frames.slice();\n\t\tframes.sort((a, b) => (a.height<=b.height) ? -1 : 1);\n\n\t\tif (frames[frames.length-1].height+pad*2 > this.maxHeight) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }\n\t\tlet y=0, x=0;\n\t\tlet img = 0;\n\t\twhile (frames.length) {\n\t\t\tlet o = this._fillRow(frames, y, img, dataFrames, pad);\n\t\t\tif (o.w > x) { x = o.w; }\n\t\t\ty += o.h;\n\t\t\tif (!o.h || !frames.length) {\n\t\t\t\tlet canvas = window.createjs&&createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\t\tcanvas.width = this._getSize(x,this.maxWidth);\n\t\t\t\tcanvas.height = this._getSize(y,this.maxHeight);\n\t\t\t\tthis._data.images[img] = canvas;\n\t\t\t\tif (!o.h) {\n\t\t\t\t\tx=y=0;\n\t\t\t\t\timg++;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t */\n\t_setupMovieClipFrame (source, data) {\n\t\tlet ae = source.actionsEnabled;\n\t\tsource.actionsEnabled = false;\n\t\tsource.gotoAndStop(data.i);\n\t\tsource.actionsEnabled = ae;\n\t\tdata.f&&data.f(source, data.d, data.i);\n\t}\n\n\t/**\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t */\n\t_getSize (size, max) {\n\t\tlet pow = 4;\n\t\twhile (Math.pow(2, ++pow) < size) {}\n\t\treturn Math.min(max, Math.pow(2, pow));\n\t};\n\n\t/**\n\t * @protected\n\t * @param {Array} frames\n\t * @param {Number} y\n\t * @param {HTMLImageElement} img\n\t * @param {Object} dataFrames\n\t * @param {Number} pad\n\t * @return {Number} The width & height of the row.\n\t */\n\t_fillRow (frames, y, img, dataFrames, pad) {\n\t\tlet w = this.maxWidth;\n\t\tlet maxH = this.maxHeight;\n\t\ty += pad;\n\t\tlet h = maxH-y;\n\t\tlet x = pad;\n\t\tlet height = 0;\n\t\tfor (let i=frames.length-1; i>=0; i--) {\n\t\t\tlet frame = frames[i];\n\t\t\tlet sc = this._scale*frame.scale;\n\t\t\tlet rect = frame.sourceRect;\n\t\t\tlet source = frame.source;\n\t\t\tlet rx = Math.floor(sc*rect.x-pad);\n\t\t\tlet ry = Math.floor(sc*rect.y-pad);\n\t\t\tlet rh = Math.ceil(sc*rect.height+pad*2);\n\t\t\tlet rw = Math.ceil(sc*rect.width+pad*2);\n\t\t\tif (rw > w) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }\n\t\t\tif (rh > h || x+rw > w) { continue; }\n\t\t\tframe.img = img;\n\t\t\tframe.rect = new Rectangle(x,y,rw,rh);\n\t\t\theight = height || rh;\n\t\t\tframes.splice(i,1);\n\t\t\tdataFrames[frame.index] = [x,y,rw,rh,img,Math.round(-rx+sc*source.regX-pad),Math.round(-ry+sc*source.regY-pad)];\n\t\t\tx += rw;\n\t\t}\n\t\treturn {w:x, h:height};\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_endBuild () {\n\t\tthis.spriteSheet = new SpriteSheet(this._data);\n\t\tthis._data = null;\n\t\tthis.progress = 1;\n\t\tthis.dispatchEvent(\"complete\");\n\t}\n\n\t/**\n\t * @protected\n\t */\n\t_run () {\n\t\tlet ts = Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50;\n\t\tlet t = (new Date()).getTime()+ts;\n\t\tlet complete = false;\n\t\twhile (t > (new Date()).getTime()) {\n\t\t\tif (!this._drawNext()) { complete = true; break; }\n\t\t}\n\t\tif (complete) {\n\t\t\tthis._endBuild();\n\t\t} else {\n\t\t\tthis._timerID = setTimeout(() => this._run(), 50-ts);\n\t\t}\n\t\tlet p = this.progress = this._index/this._frames.length;\n\t\tif (this.hasEventListener(\"progress\")) {\n\t\t\tlet evt = new Event(\"progress\");\n\t\t\tevt.progress = p;\n\t\t\tthis.dispatchEvent(evt);\n\t\t}\n\t}\n\n\t/**\n\t * @protected\n\t * @return {Boolean} Returns false if this is the last draw.\n\t */\n\t_drawNext () {\n\t\tlet frame = this._frames[this._index];\n\t\tlet sc = frame.scale*this._scale;\n\t\tlet rect = frame.rect;\n\t\tlet sourceRect = frame.sourceRect;\n\t\tlet canvas = this._data.images[frame.img];\n\t\tlet ctx = canvas.getContext(\"2d\");\n\t\tframe.funct&&frame.funct(frame.source, frame.data);\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tctx.rect(rect.x, rect.y, rect.width, rect.height);\n\t\tctx.clip();\n\t\tctx.translate(Math.ceil(rect.x-sourceRect.x*sc), Math.ceil(rect.y-sourceRect.y*sc));\n\t\tctx.scale(sc,sc);\n\t\tframe.source.draw(ctx); // display object will draw itself.\n\t\tctx.restore();\n\t\treturn (++this._index) < this._frames.length;\n\t}\n\n}\n\n/**\n * @static\n * @readonly\n * @protected\n * @type {String}\n */\nSpriteSheetBuilder.ERR_DIMENSIONS = \"frame dimensions exceed max spritesheet dimensions\";\n/**\n * @static\n * @readonly\n * @protected\n * @type {String}\n */\nSpriteSheetBuilder.ERR_RUNNING = \"a build is already running\";\n\n/**\n * Dispatched when a build completes.\n * @event easeljs.SpriteSheetBuilder#complete\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @since 0.6.0\n */\n\n/**\n * Dispatched when an asynchronous build has progress.\n * @event easeljs.SpriteSheetBuilder#progress\n * @property {Object} target The object that dispatched the event.\n * @property {String} type The event type.\n * @property {Number} progress The current progress value (0-1).\n * @since 0.6.0\n */\n","/*\n* @license SpriteSheetUtils\n* Visit http://createjs.com/ for documentation, updates and examples.\n*\n* Copyright (c) 2017 gskinner.com, inc.\n*\n* Permission is hereby granted, free of charge, to any person\n* obtaining a copy of this software and associated documentation\n* files (the \"Software\"), to deal in the Software without\n* restriction, including without limitation the rights to use,\n* copy, modify, merge, publish, distribute, sublicense, and/or sell\n* copies of the Software, and to permit persons to whom the\n* Software is furnished to do so, subject to the following\n* conditions:\n*\n* The above copyright notice and this permission notice shall be\n* included in all copies or substantial portions of the Software.\n*\n* THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n* OTHER DEALINGS IN THE SOFTWARE.\n*/\n\nimport createCanvas from \"./Canvas\";\n\n/**\n * The SpriteSheetUtils class is a collection of static methods for working with {{#crossLink \"SpriteSheet\"}}{{/crossLink}}s.\n * A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For\n * example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across\n * by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated.\n *\n * @memberof easeljs\n * @name easeljs.SpriteSheetUtils\n */\nexport default {\n\n\t/**\n\t * @protected\n\t * @type {HTMLCanvasElement | Object}\n\t */\n\t_workingCanvas: createCanvas(),\n\n\t/**\n\t * @protected\n\t * @type {CanvasRenderingContext2D}\n\t */\n\tget _workingContext () { return this._workingCanvas.getContext(\"2d\"); },\n\n\t/**\n\t * Returns a single frame of the specified sprite sheet as a new PNG image. An example of when this may be useful is\n\t * to use a spritesheet frame as the source for a bitmap fill.\n\t *\n\t * WARNING: In almost all cases it is better to display a single frame using a {@link easeljs.Sprite}\n\t * with a {@link easeljs.Sprite#gotoAndStop} call than it is to slice out a frame using this\n\t * method and display it with a Bitmap instance. You can also crop an image using the {@link easeljs.Bitmap#sourceRect}\n\t * property of {@link easeljs.Bitmap}.\n\t *\n\t * The extractFrame method may cause cross-domain warnings since it accesses pixels directly on the canvas.\n\t *\n\t * @param {easeljs.SpriteSheet} spriteSheet The SpriteSheet instance to extract a frame from.\n\t * @param {Number | String} frameOrAnimation The frame number or animation name to extract. If an animation\n\t * name is specified, only the first frame of the animation will be extracted.\n\t * @return {HTMLImageElement} a single frame of the specified sprite sheet as a new PNG image.\n\t */\n\textractFrame (spriteSheet, frameOrAnimation) {\n\t\tif (isNaN(frameOrAnimation)) {\n\t\t\tframeOrAnimation = spriteSheet.getAnimation(frameOrAnimation).frames[0];\n\t\t}\n\t\tlet data = spriteSheet.getFrame(frameOrAnimation);\n\t\tif (!data) { return null; }\n\t\tlet r = data.rect;\n\t\tlet canvas = this._workingCanvas;\n\t\tcanvas.width = r.width;\n\t\tcanvas.height = r.height;\n\t\tthis._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);\n\t\tlet img = document.createElement(\"img\");\n\t\timg.src = canvas.toDataURL(\"image/png\");\n\t\treturn img;\n\t},\n\n\t/**\n\t * @protected\n\t * @param {easeljs.SpriteSheet} spriteSheet\n\t * @param {Number} count\n\t * @param {Number} h\n\t * @param {Number} v\n\t */\n\t_flip (spriteSheet, count, h, v) {\n\t\tlet imgs = spriteSheet._images;\n\t\tlet canvas = this._workingCanvas;\n\t\tlet ctx = this._workingContext;\n\t\tconst il = imgs.length/count;\n\t\tfor (let i=0; i {\n\t\t\tif (a.element._drawID === stage._drawID) { return 1; }\n\t\t\tif (a.element._drawID < b.element._drawID) { return -1; }\n\t\t\treturn 0;\n\t\t});\n\n\t\tconst l = output.length;\n\t\tfor (let i=0; i=.97*(this._interval-1)&&this._tick()},t._handleRAF=function(){this._timerId=null,this._setupTick(),this._tick()},t._handleTimeout=function(){this._timerId=null,this._setupTick(),this._tick()},t._setupTick=function(){if(null==this._timerId){var t=this.timingMode||this._raf&&i.RAF;if(t===i.RAF_SYNCHED||t===i.RAF){var e=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame;if(e)return this._timerId=e(t===i.RAF?this._handleRAF.bind(this):this._handleSynch.bind(this)),void(this._raf=!0)}this._raf=!1,this._timerId=setTimeout(this._handleTimeout.bind(this),this._interval)}},t._tick=function(){var t=this.paused,e=this._getTime(),i=e-this._lastTime;if(this._lastTime=e,this._ticks++,t&&(this._pausedTicks++,this._pausedTime+=i),this.hasEventListener("tick")){var n=new h("tick"),r=this.maxDelta;n.delta=r&&rthis.x+this.width&&(this.width=t+i-this.x),e+n>this.y+this.height&&(this.height=e+n-this.y),t=this.x&&t+i<=this.x+this.width&&e>=this.y&&e+n<=this.y+this.height},t.union=function(t){return this.clone().extend(t.x,t.y,t.width,t.height)},t.intersection=function(t){var e=t.x,i=t.y,n=e+t.width,r=i+t.height;return this.x>e&&(e=this.x),this.y>i&&(i=this.y),this.x+this.widththis.children.length)return e[n-2];if(2this.children.length-1)return!1;var i=this.children[t];return i&&(i.parent=null),this.children.splice(t,1),e||i.dispatchEvent("removed"),!0},t._getObjectsUnderPoint=function(t,e,i,n,r,s){if(void 0===s&&(s=0),!s&&!this._testMask(this,t,e))return null;var a,o=w._hitTestContext;r=r||n&&this._hasMouseEventListener();for(var h=this.children,u=h.length-1;0<=u;u--){var l=h[u],c=l.hitArea;if(l.visible&&(c||l.isVisible())&&(!n||l.mouseEnabled)&&(c||this._testMask(l,t,e)))if(!c&&l instanceof p){var d=l._getObjectsUnderPoint(t,e,i,n,r,s+1);if(!i&&d)return n&&!this.mouseChildren?this:d}else{if(n&&!r&&!l._hasMouseEventListener())continue;var f=l.getConcatenatedDisplayProps(l._props);if(a=f.matrix,c&&(a.appendMatrix(c.getMatrix(c._props.matrix)),f.alpha=c.alpha),o.globalAlpha=f.alpha,o.setTransform(a.a,a.b,a.c,a.d,a.tx-t,a.ty-e),(c||l).draw(o),!this._testHit(o))continue;if(o.setTransform(1,0,0,1,0,0),o.clearRect(0,0,2,2),!i)return n&&!this.mouseChildren?this:l;i.push(l)}}return null},t._testMask=function(t,e,i){var n=t.mask;if(!n||!n.graphics||n.graphics.isEmpty())return!0;var r=this._props.matrix,s=t.parent;r=s?s.getConcatenatedMatrix(r):r.identity(),r=n.getMatrix(n._props.matrix).prependMatrix(r);var a=w._hitTestContext;return a.setTransform(r.a,r.b,r.c,r.d,r.tx-e,r.ty-i),n.graphics.drawAsPath(a),a.fillStyle="#000",a.fill(),!!this._testHit(a)&&(a.setTransform(1,0,0,1,0,0),a.clearRect(0,0,2,2),!0)},t._getBounds=function(t,e){var i=h.prototype.getBounds.call(this);if(i)return this._transformBounds(i,t,e);var n=this._props.matrix;n=e?n.identity():this.getMatrix(n),t&&n.prependMatrix(t);for(var r=this.children.length,s=null,a=0;a=h)return this._normalizeFrame()}n=0|this._currentFrame,this.currentFrame!=n&&(this.currentFrame=n,this.dispatchEvent("change"))},e._dispatchAnimationEnd=function(t,e,i,n,r){var s=t?t.name:null;if(this.hasEventListener("animationend")){var a=new h("animationend");a.name=s,a.next=n,this.dispatchEvent(a)}var o=this._animation!=t||this._currentFrame!=e;return o||i||!this.paused||(this.currentAnimationFrame=r,o=!0),o},e._goto=function(t,e){if(void 0===e&&(e=0),this.currentAnimationFrame=0,isNaN(t)){var i=this.spriteSheet.getAnimation(t);i&&(this._animation=i,this.currentAnimation=t,this._normalizeFrame(e))}else this.currentAnimation=this._animation=null,this._currentFrame=t,this._normalizeFrame()},t}(w),D=function(n){function m(t,e){var i;return void 0===t&&(t=""),void 0===e&&(e=null),(i=n.call(this)||this).text=t,i.spriteSheet=e,i.lineHeight=0,i.letterSpacing=0,i.spaceWidth=0,i._oldProps={text:0,spriteSheet:0,lineHeight:0,letterSpacing:0,spaceWidth:0},i._oldStage=null,i._drawAction=null,i}l(m,n);var t=m.prototype;return t.draw=function(t,e){this.drawCache(t,e)||(this._updateState(),n.prototype.draw.call(this,t,e))},t.getBounds=function(){return this._updateText(),n.prototype.getBounds.call(this)},t.isVisible=function(){var t=this.cacheCanvas||this.spriteSheet&&this.spriteSheet.complete&&this.text;return!!(this.visible&&0m.maxPoolSize&&(h.length=m.maxPoolSize)}},m}(b);D.maxPoolSize=100,D._spritePool=[];var L=function(n){function t(t){var e;e=n.call(this)||this,"string"==typeof t&&(t=document.getElementById(t)),e.mouseEnabled=!1;var i=t.style;return i.position="absolute",i.transformOrigin=i.WebkitTransformOrigin=i.msTransformOrigin=i.MozTransformOrigin=i.OTransformOrigin="0% 0%",e.htmlElement=t,e._oldProps=null,e._oldStage=null,e._drawAction=null,e}l(t,n);var e=t.prototype;return e.isVisible=function(){return null!=this.htmlElement},e.draw=function(t,e){return!0},e.cache=function(){},e.uncache=function(){},e.updateCache=function(){},e.hitTest=function(){},e.localToGlobal=function(){},e.globalToLocal=function(){},e.localToLocal=function(){},e.clone=function(){throw"DOMElement cannot be cloned."},e._tick=function(t){var e=this.stage;null!=e&&e!==this._oldStage&&(this._drawAction&&e.off("drawend",this._drawAction),this._drawAction=e.on("drawend",this._handleDrawEnd,this),this._oldStage=e),n.prototype._tick.call(this,t)},e._handleDrawEnd=function(t){var e=this.htmlElement;if(e){var i=e.style,n=this.getConcatenatedDisplayProps(this._props),r=n.matrix,s=n.visible?"visible":"hidden";if(s!=i.visibility&&(i.visibility=s),n.visible){var a=this._oldProps,o=a&&a.matrix,h=1e4;if(!o||!o.equals(r)){var u="matrix("+(r.a*h|0)/h+","+(r.b*h|0)/h+","+(r.c*h|0)/h+","+(r.d*h|0)/h+","+(r.tx+.5|0);i.transform=i.WebkitTransform=i.OTransform=i.msTransform=u+","+(r.ty+.5|0)+")",i.MozTransform=u+"px,"+(r.ty+.5|0)+"px)",a||(a=this._oldProps=new v(!0,null)),a.matrix.copy(r)}a.alpha!=n.alpha&&(i.opacity=""+(n.alpha*h|0)/h,a.alpha=n.alpha)}}},t}(w),A=function(){function g(){this.command=null,this._stroke=null,this._strokeStyle=null,this._oldStrokeStyle=null,this._strokeDash=null,this._oldStrokeDash=null,this._fill=null,this._strokeIgnoreScale=!1,this._commitIndex=0,this._instructions=[],this._activeInstructions=[],this._dirty=!1,this._storeIndex=0,this.curveTo=this.quadraticCurveTo,this.drawRect=this.rect,this.mt=this.moveTo,this.lt=this.lineTo,this.at=this.arcTo,this.bt=this.bezierCurveTo,this.qt=this.quadraticCurveTo,this.a=this.arc,this.r=this.rect,this.cp=this.closePath,this.c=this.clear,this.f=this.beginFill,this.lf=this.beginLinearGradientFill,this.rf=this.beginRadialGradientFill,this.bf=this.beginBitmapFill,this.ef=this.endFill,this.ss=this.setStrokeStyle,this.sd=this.setStrokeDash,this.s=this.beginStroke,this.ls=this.beginLinearGradientStroke,this.rs=this.beginRadialGradientStroke,this.bs=this.beginBitmapStroke,this.es=this.endStroke,this.dr=this.drawRect,this.rr=this.drawRoundRect,this.rc=this.drawRoundRectComplex,this.dc=this.drawCircle,this.de=this.drawEllipse,this.dp=this.drawPolyStar,this.p=this.decodePath,this.clear()}g.getRGB=function(t,e,i,n){return null!=t&&null==i&&(n=e,i=255&t,e=t>>8&255,t=t>>16&255),null==n?"rgb("+t+","+e+","+i+")":"rgba("+t+","+e+","+i+","+n+")"},g.getHSL=function(t,e,i,n){return null==n?"hsl("+t%360+","+e+"%,"+i+"%)":"hsl("+t%360+","+e+"%,"+i+"%,"+n+")"};var t=g.prototype;return t.isEmpty=function(){return!(this._instructions.length||this._activeInstructions.length)},t.draw=function(t,e){this._updateInstructions();for(var i=this._instructions,n=i.length,r=this._storeIndex;r>3,c=e[l];if(!c||3&u)throw"Bad path data (@"+n+"):c";var d=i[l];l||(a=o=0),n++;for(var f=2+(u>>2&1),p=s.length=0;p>5?-1:1;_=(31&_)<<6|h[t.charAt(n+1)],3===f&&(_=_<<6|h[t.charAt(n+2)]),_=v*_/10,p%2?a=_+=a:o=_+=o,s[p]=_,n+=f}c.apply(this,s)}return this},t.store=function(){return this._updateInstructions(!0),this._storeIndex=this._instructions.length,this},t.unstore=function(){return this._storeIndex=0,this},t.clone=function(){var t=new g;return t.command=this.command,t._stroke=this._stroke,t._strokeStyle=this._strokeStyle,t._strokeDash=this._strokeDash,t._strokeIgnoreScale=this._strokeIgnoreScale,t._fill=this._fill,t._instructions=this._instructions.slice(),t._commitIndex=this._commitIndex,t._activeInstructions=this._activeInstructions.slice(),t._dirty=this._dirty,t._storeIndex=this._storeIndex,t},t.toString=function(){return"["+this.constructor.name+"]"},t._updateInstructions=function(t){var e=this._instructions,i=this._activeInstructions,n=this._commitIndex;if(this._dirty&&i.length){e.length=n,e.push(g.beginCmd);var r=i.length,s=e.length;e.length=s+r;for(var a=0;a=i.length)break;s=i[r++]}else{if((r=i.next()).done)break;s=r.value}var a=s,o=a.target;if(o!==this&&!a.passive){var h=a._stepPosition;o instanceof w?this._addManagedChild(o,h):this._setState(o.state,h)}}for(var u=this.children,l=u.length-1;0<=l;l--){var c=u[l].id;1===this._managed[c]&&(this.removeChildAt(l),delete this._managed[c])}},t._setState=function(t,e){if(t)for(var i=t.length-1;0<=i;i--){var n=t[i],r=n.t,s=n.p;for(var a in s)r[a]=s[a];this._addManagedChild(r,e)}},t._addManagedChild=function(t,e){t._off||(this.addChildAt(t,0),t instanceof s&&(t._synchOffset=e,t.mode===s.INDEPENDENT&&t.autoReset&&!this._managed[t.id]&&t._reset()),this._managed[t.id]=2)},t._getBounds=function(t,e){var i=this.getBounds();return!i&&this.frameBounds&&(i=this._rectangle.copy(this.frameBounds[this.currentFrame])),i?this._transformBounds(i,t,e):n.prototype._getBounds.call(this,t,e)},o(s,[{key:"labels",get:function(){return this.timeline.labels}},{key:"currentLabel",get:function(){return this.timeline.currentLabel}},{key:"duration",get:function(){return this.timeline.duration}},{key:"totalFrames",get:function(){return this.duration}}]),s}(b);J.INDEPENDENT="independent",J.SINGLE_FRAME="single",J.SYNCHED="synched",J.inited=!1;var Q=function(){function t(){throw"MovieClipPlugin cannot be instantiated."}return t.install=function(){i.Tween.installPlugin(t)},t.init=function(t,e,i){return i},t.tween=function(t,e,i,n,r,s,a,o){return t.target instanceof J?1===s?r[e]:n[e]:i},t}();Q.priority=100;var K=function(i){function n(t){var e;return void 0===t&&(t=new A),(e=i.call(this)||this).graphics=t,e}l(n,i);var t=n.prototype;return t.isVisible=function(){var t=this.cacheCanvas||this.graphics&&!this.graphics.isEmpty();return!!(this.visible&&0=r.length)return"break";o=r[a++]}else{if((a=r.next()).done)return"break";o=a.value}var t=o,e=n._images=[],i=void 0;"string"==typeof t&&(i=t,(t=document.createElement("img")).src=i),e.push(t),t.getContext||t.naturalWidth||(n._loadCount++,n.complete=!1,t.onload=function(){return n._handleImageLoad(i)},t.onerror=function(){return n._handleImageError(i)})},r=t.images,s=Array.isArray(r),a=0;for(r=s?r:r[Symbol.iterator]();;){var o;if("break"===e())break}}if(null!=t.frames)if(Array.isArray(t.frames)){this._frames=[];var i=t.frames,h=Array.isArray(i),u=0;for(i=h?i:i[Symbol.iterator]();;){var l;if(h){if(u>=i.length)break;l=i[u++]}else{if((u=i.next()).done)break;l=u.value}var c=l;this._frames.push({image:this._images[c[4]?c[4]:0],rect:new x(c[0],c[1],c[2],c[3]),regX:c[5]||0,regY:c[6]||0})}}else{var d=t.frames;this._frameWidth=d.width,this._frameHeight=d.height,this._regX=d.regX||0,this._regY=d.regY||0,this._spacing=d.spacing||0,this._margin=d.margin||0,this._numFrames=d.count,0===this._loadCount&&this._calculateFrames()}if(this._animations=[],null!=t.animations){this._data={};var f=t.animations;for(var p in f){var _={name:p},v=f[p],g=void 0;if("number"==typeof v)g=_.frames=[v];else if(Array.isArray(v))if(1===v.length)_.frames=[v[0]];else{_.speed=v[3],_.next=v[2],g=_.frames=[];for(var m=v[0];m<=v[1];m++)g.push(m)}else{_.speed=v.speed,_.next=v.next;var w=v.frames;g=_.frames="number"==typeof w?[w]:w.slice(0)}!0!==_.next&&void 0!==_.next||(_.next=p),(!1===_.next||g.length<2&&_.next===p)&&(_.next=null),_.speed||(_.speed=1),this._animations.push(p),this._data[p]=_}}}},e._handleImageLoad=function(t){0==--this._loadCount&&(this._calculateFrames(),this.complete=!0,this.dispatchEvent("complete"))},e._handleImageError=function(t){var e=new h("error");e.src=t,this.dispatchEvent(e),0==--this._loadCount&&this.dispatchEvent("complete")},e._calculateFrames=function(){if(!this._frames&&0!==this._frameWidth){this._frames=[];var t=this._numFrames||1e5,e=0,i=this._frameWidth,n=this._frameHeight,r=this._spacing,s=this._margin;t:for(var a=0,o=this._images,h=o.length;a=o.length)break;l=o[u++]}else{if((u=o.next()).done)break;l=u.value}var c=l,d=null;if(null!=this.lineWidth&&(d=t.measureText(c).width)>this.lineWidth){var f=c.split(/(\s)/);c=f[0],d=t.measureText(c).width;for(var p=f.length,_=1;_this.lineWidth?(n&&this._drawTextLine(t,c,a*r),i&&i.push(c),s>1;if(isNaN(e)||e<0)return!1;var i=this._blurY>>1;if(isNaN(i)||i<0)return!1;if(0===e&&0===i)return!1;var n=this.quality;(isNaN(n)||n<1)&&(n=1),3<(n|=0)&&(n=3),n<1&&(n=1);var r=t.data,s=0,a=0,o=0,h=0,u=0,l=0,c=0,d=0,f=0,p=0,_=0,v=0,g=0,m=0,w=0,x=e+e+1|0,y=i+i+1|0,b=0|t.width,T=0|t.height,E=b-1|0,S=T-1|0,C=e+1|0,M=i+1|0,k={r:0,b:0,g:0,a:0},D=k;for(o=1;o>>X,r[l++]=f*B>>>X,r[l++]=p*B>>>X,r[l++]=_*B>>>X,h=c+((h=s+e+1)>>X,0>>X,r[h+1]=f*B>>>X,r[h+2]=p*B>>>X):r[h]=r[h+1]=r[h+2]=0,h=s+((h=a+M)>>X,0>>X)*w,r[h+1]=(f*B>>>X)*w,r[h+2]=(p*B>>>X)*w):r[h]=r[h+1]=r[h+2]=0,h=s+((h=a+M)n.LENGTH&&(t=t.slice(0,n.LENGTH)),t},n}();rt.DELTA_INDEX=Object.freeze([0,.01,.02,.04,.05,.06,.07,.08,.1,.11,.12,.14,.15,.16,.17,.18,.2,.21,.22,.24,.25,.27,.28,.3,.32,.34,.36,.38,.4,.42,.44,.46,.48,.5,.53,.56,.59,.62,.65,.68,.71,.74,.77,.8,.83,.86,.89,.92,.95,.98,1,1.06,1.12,1.18,1.24,1.3,1.36,1.42,1.48,1.54,1.6,1.66,1.72,1.78,1.84,1.9,1.96,2,2.12,2.25,2.37,2.5,2.62,2.75,2.87,3,3.2,3.4,3.6,3.8,4,4.3,4.7,4.9,5,5.5,6,6.5,6.8,7,7.3,7.5,7.8,8,8.4,8.7,9,9.4,9.6,9.8,10]),rt.IDENTITY_MATRIX=Object.freeze([1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1]),rt.LENGTH=25;var st=function(i){function t(t){var e;return(e=i.call(this)||this).matrix=t,e.FRAG_SHADER_BODY="\n\t\t\tuniform mat4 uColorMatrix;\n\t\t\tuniform vec4 uColorMatrixOffset;\n\n\t\t\tvoid main (void) {\n\t\t\t\tvec4 color = texture2D(uSampler, vRenderCoord);\n\n\t\t\t\tmat4 m = uColorMatrix;\n\t\t\t\tvec4 newColor = vec4(0,0,0,0);\n\t\t\t\tnewColor.r = color.r*m[0][0] + color.g*m[0][1] + color.b*m[0][2] + color.a*m[0][3];\n\t\t\t\tnewColor.g = color.r*m[1][0] + color.g*m[1][1] + color.b*m[1][2] + color.a*m[1][3];\n\t\t\t\tnewColor.b = color.r*m[2][0] + color.g*m[2][1] + color.b*m[2][2] + color.a*m[2][3];\n\t\t\t\tnewColor.a = color.r*m[3][0] + color.g*m[3][1] + color.b*m[3][2] + color.a*m[3][3];\n\n\t\t\t\tgl_FragColor = newColor + uColorMatrixOffset;\n\t\t\t}\n\t\t",e}l(t,i);var e=t.prototype;return e.shaderParamSetup=function(t,e,i){var n=this.matrix,r=new Float32Array([n[0],n[1],n[2],n[3],n[5],n[6],n[7],n[8],n[10],n[11],n[12],n[13],n[15],n[16],n[17],n[18]]);t.uniformMatrix4fv(t.getUniformLocation(i,"uColorMatrix"),!1,r),t.uniform4f(t.getUniformLocation(i,"uColorMatrixOffset"),n[4]/255,n[9]/255,n[14]/255,n[19]/255)},e.clone=function(){return new t(this.matrix)},e._applyFilter=function(t){for(var e,i,n,r,s=t.data,a=s.length,o=this.matrix,h=o[0],u=o[1],l=o[2],c=o[3],d=o[4],f=o[5],p=o[6],_=o[7],v=o[8],g=o[9],m=o[10],w=o[11],x=o[12],y=o[13],b=o[14],T=o[15],E=o[16],S=o[17],C=o[18],M=o[19],k=0;k=r.length)break;o=r[a++]}else{if((a=r.next()).done)break;o=a.value}var h=o,u=h.identifier;h.target==t.canvas&&("touchstart"===n?this._handleStart(t,u,e,h.pageX,h.pageY):"touchmove"===n?this._handleMove(t,u,e,h.pageX,h.pageY):"touchend"!==n&&"touchcancel"!==n||this._handleEnd(t,u,e))}}},_IE_enable:function(e){var i=this,t=e.canvas,n=e.__touch.f=function(t){return i._IE_handleEvent(e,t)};void 0===window.PointerEvent?(t.addEventListener("MSPointerDown",n,!1),window.addEventListener("MSPointerMove",n,!1),window.addEventListener("MSPointerUp",n,!1),window.addEventListener("MSPointerCancel",n,!1),e.__touch.preventDefault&&(t.style.msTouchAction="none")):(t.addEventListener("pointerdown",n,!1),window.addEventListener("pointermove",n,!1),window.addEventListener("pointerup",n,!1),window.addEventListener("pointercancel",n,!1),e.__touch.preventDefault&&(t.style.touchAction="none")),e.__touch.activeIDs={}},_IE_disable:function(t){var e=t.__touch.f;void 0===window.PointerEvent?(window.removeEventListener("MSPointerMove",e,!1),window.removeEventListener("MSPointerUp",e,!1),window.removeEventListener("MSPointerCancel",e,!1),t.canvas&&t.canvas.removeEventListener("MSPointerDown",e,!1)):(window.removeEventListener("pointermove",e,!1),window.removeEventListener("pointerup",e,!1),window.removeEventListener("pointercancel",e,!1),t.canvas&&t.canvas.removeEventListener("pointerdown",e,!1))},_IE_handleEvent:function(t,e){if(t){t.__touch.preventDefault&&e.preventDefault&&e.preventDefault();var i=e.type,n=e.pointerId,r=t.__touch.activeIDs;if("MSPointerDown"===i||"pointerdown"===i){if(e.srcElement!=t.canvas)return;r[n]=!0,this._handleStart(t,n,e,e.pageX,e.pageY)}else r[n]&&("MSPointerMove"===i||"pointermove"===i?this._handleMove(t,n,e,e.pageX,e.pageY):"MSPointerUp"!==i&&"MSPointerCancel"!==i&&"pointerup"!==i&&"pointercancel"!==i||(delete r[n],this._handleEnd(t,n,e)))}},_handleStart:function(t,e,i,n,r){var s=t.__touch;if(s.multitouch||!s.count){var a=s.pointers;a[e]||(a[e]=!0,s.count++,t._handlePointerDown(e,i,n,r))}},_handleMove:function(t,e,i,n,r){t.__touch.pointers[e]&&t._handlePointerMove(e,i,n,r)},_handleEnd:function(t,e,i){var n=t.__touch,r=n.pointers;r[e]&&(n.count--,t._handlePointerUp(e,i,!0),delete r[e])}},ht=function(i){function b(t){var e;return void 0===t&&(t=0),(e=i.call(this)||this).maxWidth=2048,e.maxHeight=2048,e.spriteSheet=null,e.scale=1,e.padding=1,e.timeSlice=.3,e.progress=-1,e.framerate=t,e._frames=[],e._animations={},e._data=null,e._nextFrameIndex=0,e._index=0,e._timerID=null,e._scale=1,e}l(b,i);var t=b.prototype;return t.addFrame=function(t,e,i,n,r){if(void 0===i&&(i=1),this._data)throw b.ERR_RUNNING;var s=e||t.bounds||t.nominalBounds||t.getBounds&&t.getBounds();return s?this._frames.push({source:t,sourceRect:s,scale:i,funct:n,data:r,index:this._frames.length,height:s.height*i})-1:null},t.addAnimation=function(t,e,i,n){if(this._data)throw b.ERR_RUNNING;this._animations[t]={frames:e,next:i,speed:n}},t.addMovieClip=function(t,e,i,n,r,s){if(void 0===i&&(i=1),this._data)throw b.ERR_RUNNING;var a=t.frameBounds,o=e||t.bounds||t.nominalBounds||t.getBounds&&t.getBounds();if(o||a){for(var h=this._frames.length,u=t.timeline.duration,l=0;lthis.maxHeight)throw b.ERR_DIMENSIONS;for(var n=0,r=0,s=0;i.length;){var a=this._fillRow(i,n,s,e,t);if(a.w>r&&(r=a.w),n+=a.h,!a.h||!i.length){var o=window.createjs&&createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");o.width=this._getSize(r,this.maxWidth),o.height=this._getSize(n,this.maxHeight),this._data.images[s]=o,a.h||(r=n=0,s++)}}},t._setupMovieClipFrame=function(t,e){var i=t.actionsEnabled;t.actionsEnabled=!1,t.gotoAndStop(e.i),t.actionsEnabled=i,e.f&&e.f(t,e.d,e.i)},t._getSize=function(t,e){for(var i=4;Math.pow(2,++i)(new Date).getTime();)if(!this._drawNext()){n=!0;break}n?this._endBuild():this._timerID=setTimeout(function(){return t._run()},50-e);var r=this.progress=this._index/this._frames.length;if(this.hasEventListener("progress")){var s=new h("progress");s.progress=r,this.dispatchEvent(s)}},t._drawNext=function(){var t=this._frames[this._index],e=t.scale*this._scale,i=t.rect,n=t.sourceRect,r=this._data.images[t.img].getContext("2d");return t.funct&&t.funct(t.source,t.data),r.save(),r.beginPath(),r.rect(i.x,i.y,i.width,i.height),r.clip(),r.translate(Math.ceil(i.x-n.x*e),Math.ceil(i.y-n.y*e)),r.scale(e,e),t.source.draw(r),r.restore(),++this._indexEaselJS: API Test
-
-
+
+
-
+
-
+
-
+
+
+
+
-
+
@@ -48,7 +48,7 @@ AlphaMaskFilter reveal
image = new Image();
image.onload = handleComplete;
- image.src = "../_assets/art/flowers.jpg";
+ image.src = "/assets/art/flowers.jpg";
stage = new createjs.Stage("testCanvas");
text = new createjs.Text("Loading...", "20px Arial", "#FFF");
@@ -61,9 +61,9 @@ AlphaMaskFilter reveal
createjs.Touch.enable(stage);
stage.enableMouseOver();
- stage.addEventListener("stagemousedown", handleMouseDown);
- stage.addEventListener("stagemouseup", handleMouseUp);
- stage.addEventListener("stagemousemove", handleMouseMove);
+ stage.on("stagemousedown", handleMouseDown);
+ stage.on("stagemouseup", handleMouseUp);
+ stage.on("stagemousemove", handleMouseMove);
drawingCanvas = new createjs.Shape();
bitmap = new createjs.Bitmap(image);
@@ -100,7 +100,7 @@ AlphaMaskFilter reveal
var midPoint = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
- .beginStroke("rgba(0,0,0,0.2)")
+ .beginStroke("#FF0099")
.moveTo(midPoint.x, midPoint.y)
.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
diff --git a/examples/BarGraph.html b/examples/BarGraph.html
index 6c268c4c8..fca2200a6 100755
--- a/examples/BarGraph.html
+++ b/examples/BarGraph.html
@@ -4,11 +4,11 @@
EaselJS Example: Drawing an animated vector bar graph.
-
-
-
+
+
+
-
+
diff --git a/examples/BitmapText.html b/examples/BitmapText.html
index 42eba8485..55df6b8a2 100755
--- a/examples/BitmapText.html
+++ b/examples/BitmapText.html
@@ -4,11 +4,11 @@
EaselJS Example: Bitmap Text
-
-
-
+
+
+
-
+
@@ -31,7 +31,7 @@
stage.addChild(text);
stage.update();
};
- img.src = "../_assets/art/spritesheet_font.png";
+ img.src = "../assets/art/spritesheet_font.png";
// Embedded SpriteSheet data.
var data = {
@@ -67,7 +67,7 @@
"?": {"frames": [28]},
"U": {"frames": [20]}
},
- "images": ["../_assets/art/spritesheet_font.png"],
+ "images": ["../assets/art/spritesheet_font.png"],
"frames": [
[155, 2, 25, 41, 0, -10, -3],
[72, 2, 28, 43, 0, -8, -1],
diff --git a/examples/ButtonHelper.html b/examples/ButtonHelper.html
index d8612a8a7..8bc8ec2e9 100755
--- a/examples/ButtonHelper.html
+++ b/examples/ButtonHelper.html
@@ -4,15 +4,15 @@
EaselJS Example: Rollovers and Drag & Drop
-
-
-
+
+
+
-
+
-
+
-
+
diff --git a/examples/Cache.html b/examples/Cache.html
index 738bf8f9e..7b8629270 100755
--- a/examples/Cache.html
+++ b/examples/Cache.html
@@ -4,11 +4,11 @@
EaselJS Example: Using cache and snapToPixel
-
-
-
+
+
+
-
+
@@ -59,7 +59,7 @@
function tick(event) {
var w = canvas.width + radius * 2;
var h = canvas.height + radius * 2;
- var l = stage.getNumChildren() - 1;
+ var l = stage.numChildren - 1;
// iterate through all the children and move them according to their velocity:
for (var i = 1; i < l; i++) {
@@ -76,7 +76,7 @@
function toggleCache(value) {
// iterate all the children except the fpsLabel, and set up the cache:
- var l = stage.getNumChildren() - 1;
+ var l = stage.numChildren - 1;
for (var i = 0; i < l; i++) {
var shape = stage.getChildAt(i);
@@ -87,6 +87,8 @@
}
}
}
+
+ var props = new createjs.DisplayProps();
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Bechmarking page for StageGL, also allows for comparison to PixiJS v4.
+ Give the Garbage Collector time to stabilize after switching properties.
+
+
+
+
+
+ Loading...
+
+
+
+
diff --git a/examples/WebGL/HelloWorld.html b/examples/WebGL/HelloWorld.html
new file mode 100644
index 000000000..5a19ecd6b
--- /dev/null
+++ b/examples/WebGL/HelloWorld.html
@@ -0,0 +1,58 @@
+
+
+
+
+ EaselJS Example: Bitmap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+ Hello World example using Bitmap and StageGL.
+
+
+
+
+
+
+
diff --git a/examples/WebGL/README.md b/examples/WebGL/README.md
index fa61233ab..96b25fbd1 100755
--- a/examples/WebGL/README.md
+++ b/examples/WebGL/README.md
@@ -1,11 +1,15 @@
# WebGL Examples
-These examples are specific to the new WebGL public preview for EaselJS. These demos must all be run from a server, and are dependent on the ../../libs and ../assets directory.
+These examples are specific to the new WebGL classes for EaselJS. These demos MUST all be run from a server, and are dependent on the ../../libs and ../assets directory.
+
+## Sparkles
+
+Benchmarking and an example of a minimal StageGL implementation
## Runners
-Example showing SpriteStage, SpriteContainer, Sprite, BitmapText, and Bitmap in use in WebGL. Also shows the use of vector hit areas, and using the SpriteStage.isWebGL property to scale content when WebGL is not supported.
+Example showing StageGL, Sprite, BitmapText, and Bitmap in use in WebGL. Also shows the use of vector hit areas, and using the StageGL.isWebGL property to scale content when WebGL is not supported.
## TwoStages
-Demonstrates the use of Stage.nextStage to seamlessly pass mouse (and touch) interactions from a Context2D Stage to a WebGL SpriteStage layered beneath it.
\ No newline at end of file
+Demonstrates the use of Stage.nextStage to seamlessly pass mouse (and touch) interactions from a Context2D Stage to a WebGL StageGL layered beneath it.
\ No newline at end of file
diff --git a/examples/WebGL/Runners.html b/examples/WebGL/Runners.html
index e6b886ef9..5d5d0b1ac 100755
--- a/examples/WebGL/Runners.html
+++ b/examples/WebGL/Runners.html
@@ -2,239 +2,276 @@
- EaselJS Example: WebGL Basics
-
-
-
+
+
+
-
+
+
+
-
-
- WebGL Rendering
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ WebGL Rendering
+
+ This sample demonstrates WebGL rendering where available, and reducing
+ effect complexity (in this case particle count)
+ when WebGL is not supported. Uses StageGL.
+ Append "?c2d" to the url to disable WebGL & notice how the
+ particle count is reduced.
+
+
+
+
+
diff --git a/examples/WebGL/Sparkles.html b/examples/WebGL/Sparkles.html
new file mode 100644
index 000000000..f939a05a2
--- /dev/null
+++ b/examples/WebGL/Sparkles.html
@@ -0,0 +1,153 @@
+
+
+
+
+ EaselJS Example: Using Sprite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sparkles
+
+ Example showing how to use simple animated Sprite instances
+ with stagemousemove and stagemousedown events.
+ Move your mouse and click
+ on the canvas. It also demonstrates displaying the current measured
+ framerate with Ticker.getMeasuredFramerate()
+ and Text. Click repeatedly to generate lots of sparkles and
+ slow down the framerate.
+
+
+
+
+
+
+
+
diff --git a/examples/WebGL/SystemInfo.html b/examples/WebGL/SystemInfo.html
new file mode 100644
index 000000000..abee1dfb2
--- /dev/null
+++ b/examples/WebGL/SystemInfo.html
@@ -0,0 +1,89 @@
+
+
+
+
+ EaselJS: WebGL Context Info
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ WebGL Context Info
+
+ Output of common WebGL context variables using the WebGLInspector, useful for investigation or debugging. For in-depth and related statistics visit WebGL Stats
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/WebGL/TwoStages.html b/examples/WebGL/TwoStages.html
index cbd1e6191..8a517d870 100755
--- a/examples/WebGL/TwoStages.html
+++ b/examples/WebGL/TwoStages.html
@@ -3,11 +3,10 @@
EaselJS Example: Passing interactions between a Context2D and WebGL
- stage.
+ EaselJS Example: Passing interactions between a Context2D and WebGL stage.
-
-
+
+