From b7dc2bcaab403d40893fbf9a4205245fb6b2da31 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Sat, 14 Apr 2018 14:56:14 -0400 Subject: [PATCH 01/37] Experimenting with syntactic sugar for events --- index.html | 2 +- lib/ace/worker-javascript.js | 15 ++++++ lib/polyfills.js | 98 ++++++++++++++++++++++-------------- src/project/WickProject.js | 18 ++++++- 4 files changed, 93 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 70935791..59a40eea 100644 --- a/index.html +++ b/index.html @@ -88,7 +88,7 @@ - + diff --git a/lib/ace/worker-javascript.js b/lib/ace/worker-javascript.js index 0a349aec..b2764112 100755 --- a/lib/ace/worker-javascript.js +++ b/lib/ace/worker-javascript.js @@ -18,6 +18,11 @@ if (!window.console) { window.window = window; window.ace = window; +// wick specific - using this for regex thing to squash missing semicolon error +String.prototype.splice = function(start, delCount, newSubStr) { + return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount)); +}; + window.onerror = function(message, file, line, col, err) { postMessage({type: "error", data: { message: message, @@ -11773,6 +11778,16 @@ oop.inherits(JavaScriptWorker, Mirror); if (!value) return this.sender.emit("annotate", []); + // wick specific: add a semicolon to end of on(event) statements to squash missing ";" error + var onEventFinderRegex = /on *\( *[a-zA-Z]+ *\)/g + var m; + do { + m = onEventFinderRegex.exec(value, 'g'); + if (m) { + value = value.splice(m.index + m[0].length, 0, ';') + } + } while (m); + var errors = []; var maxErrorLevel = this.isValidJS(value) ? "warning" : "error"; lint(value, this.options); diff --git a/lib/polyfills.js b/lib/polyfills.js index 4767a2b1..496dfbeb 100644 --- a/lib/polyfills.js +++ b/lib/polyfills.js @@ -26,6 +26,24 @@ Array.prototype.swap = function (x,y) { return this; } +if (!String.prototype.splice) { + /** + * {JSDoc} + * + * The splice() method changes the content of a string by removing a range of + * characters and/or adding new characters. + * + * @this {String} + * @param {number} start Index at which to start changing the string. + * @param {number} delCount An integer indicating the number of old chars to remove. + * @param {string} newSubStr The String that is spliced in. + * @return {string} A new string with the spliced substring. + */ + String.prototype.splice = function(start, delCount, newSubStr) { + return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount)); + }; +} + // Production steps of ECMA-262, Edition 5, 15.4.4.18 // Reference: http://es5.github.io/#x15.4.4.18 if (!Array.prototype.forEachBackwards) { @@ -142,33 +160,6 @@ Object.defineProperty(Array.prototype, "equals", {enumerable: false}); })(); //} -var BrowserDetect = (function () { - - var browserDetectionUtils = { }; - - browserDetectionUtils.isFirefox = - navigator.userAgent.search("Firefox"); - - browserDetectionUtils.isSafari = - navigator.appVersion.search('Safari') != -1 - && navigator.appVersion.search('Chrome') == -1 - && navigator.appVersion.search('CrMo') == -1 - && navigator.appVersion.search('CriOS') == -1; - - browserDetectionUtils.isIe = ( - navigator.userAgent.toLowerCase().indexOf("msie") != -1 - || navigator.userAgent.toLowerCase().indexOf("trident") != -1 ); - - browserDetectionUtils.isChrome = - /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); - - browserDetectionUtils.inMobileMode = - /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); - - return browserDetectionUtils; - -})(); - //http://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another Array.prototype.move = function (old_index, new_index) { if (new_index >= this.length) { @@ -230,6 +221,48 @@ if (!Array.prototype.includes) { }); } +Element.prototype.remove = function() { + this.parentElement.removeChild(this); +} +NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { + for(var i = this.length - 1; i >= 0; i--) { + if(this[i] && this[i].parentElement) { + this[i].parentElement.removeChild(this[i]); + } + } +} + +////////////////////////////////////////////////// +// BELOW ARE NOT POLYFILLS PLEASE MOVE ELSEWHERE// +////////////////////////////////////////////////// + +var BrowserDetect = (function () { + + var browserDetectionUtils = { }; + + browserDetectionUtils.isFirefox = + navigator.userAgent.search("Firefox"); + + browserDetectionUtils.isSafari = + navigator.appVersion.search('Safari') != -1 + && navigator.appVersion.search('Chrome') == -1 + && navigator.appVersion.search('CrMo') == -1 + && navigator.appVersion.search('CriOS') == -1; + + browserDetectionUtils.isIe = ( + navigator.userAgent.toLowerCase().indexOf("msie") != -1 + || navigator.userAgent.toLowerCase().indexOf("trident") != -1 ); + + browserDetectionUtils.isChrome = + /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); + + browserDetectionUtils.inMobileMode = + /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + + return browserDetectionUtils; + +})(); + var isSafari = navigator.appVersion.search('Safari') != -1 && navigator.appVersion.search('Chrome') == -1 && navigator.appVersion.search('CrMo') == -1 && navigator.appVersion.search('CriOS') == -1; var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 || navigator.userAgent.toLowerCase().indexOf("trident") != -1); var isChrome = /chrome/.test( navigator.userAgent.toLowerCase() ); @@ -304,17 +337,6 @@ function rotate_point(pointX, pointY, originX, originY, angle) { }; } -Element.prototype.remove = function() { - this.parentElement.removeChild(this); -} -NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { - for(var i = this.length - 1; i >= 0; i--) { - if(this[i] && this[i].parentElement) { - this[i].parentElement.removeChild(this[i]); - } - } -} - // http://stackoverflow.com/questions/9705123/how-can-i-get-sin-cos-and-tan-to-use-degrees-instead-of-radians function toRadians (angle) { return angle * (Math.PI / 180); diff --git a/src/project/WickProject.js b/src/project/WickProject.js index dd615111..d281c319 100755 --- a/src/project/WickProject.js +++ b/src/project/WickProject.js @@ -698,7 +698,23 @@ WickProject.prototype.loadScriptOfObject = function (obj) { dummyLoaderScript += '\nthis.'+builtinName+"="+builtinName+";"; }); - var evalScriptTag = ' @@ -98,6 +96,7 @@ + diff --git a/lib/croquis.js b/lib/croquis.js new file mode 100644 index 00000000..642be383 --- /dev/null +++ b/lib/croquis.js @@ -0,0 +1,1547 @@ +function Croquis(imageDataList, properties) { + var self = this; + if (properties != null) + for (var property in properties) + self[property] = properties[property]; + var domElement = document.createElement('div'); + domElement.style.clear = 'both'; + domElement.style.setProperty('user-select', 'none'); + domElement.style.setProperty('-webkit-user-select', 'none'); + domElement.style.setProperty('-ms-user-select', 'none'); + domElement.style.setProperty('-moz-user-select', 'none'); + self.getDOMElement = function () { + return domElement; + }; + self.getRelativePosition = function (absoluteX, absoluteY) { + var rect = domElement.getBoundingClientRect(); + return {x: absoluteX - rect.left,y: absoluteY - rect.top}; + }; + var eventListeners = { + 'ondown': [], + 'onmove': [], + 'onup': [], + 'ontick': [], + 'onchange': [], + 'onundo': [], + 'onredo': [], + 'ontool': [], + 'oncanvassize': [], + 'onlayeradd': [], + 'onlayerremove': [], + 'onlayerswap': [], + 'onlayerselect': [] + }; + function dispatchEvent(event, e) { + event = event.toLowerCase(); + e = e || {}; + if (eventListeners.hasOwnProperty(event)) { + eventListeners[event].forEach(function (listener) { + listener.call(self, e); + }); + } + else throw 'don\'t support ' + event; + } + self.addEventListener = function (event, listener) { + event = event.toLowerCase(); + if (eventListeners.hasOwnProperty(event)) { + if (typeof listener !== 'function') + throw listener + ' is not a function'; + eventListeners[event].push(listener); + } + else throw 'don\'t support ' + event; + }; + self.removeEventListener = function (event, listener) { + event = event.toLowerCase(); + if (eventListeners.hasOwnProperty(event)) { + if (listener == null) { // remove all + eventListeners[event] = []; + return; + } + var listeners = eventListeners[event]; + var index = listeners.indexOf(listener); + if (index >= 0) listeners.splice(index, 1); + } + else throw 'don\'t support ' + event; + }; + self.hasEventListener = function (event, listener) { + event = event.toLowerCase(); + if (eventListeners.hasOwnProperty(event)) { + if (listener == null) + return eventListeners[event].length > 0; + return eventListeners[event].indexOf(listener) >= 0; + } + else return false; + }; + var undoStack = []; + var redoStack = []; + var undoLimit = 10; + var preventPushUndo = false; + var pushToTransaction = false; + self.getUndoLimit = function () { + return undoLimit; + }; + self.setUndoLimit = function (limit) { + undoLimit = limit; + }; + self.lockHistory = function () { + preventPushUndo = true; + }; + self.unlockHistory = function () { + preventPushUndo = false; + }; + self.beginHistoryTransaction = function () { + undoStack.push([]); + pushToTransaction = true; + }; + self.endHistoryTransaction = function () { + pushToTransaction = false; + }; + self.clearHistory = function () { + if (preventPushUndo) + throw 'history is locked'; + undoStack = []; + redoStack = []; + }; + function pushUndo(undoFunction) { + dispatchEvent('onchange'); + if (self.onChanged) + self.onChanged(); + if (preventPushUndo) + return; + redoStack = []; + if (pushToTransaction) + undoStack[undoStack.length - 1].push(undoFunction); + else + undoStack.push([undoFunction]); + while (undoStack.length > undoLimit) + undoStack.shift(); + } + self.undo = function () { + if (pushToTransaction) + throw 'transaction is not ended'; + if (preventPushUndo) + throw 'history is locked'; + if (isDrawing || isStabilizing) + throw 'still drawing'; + if (undoStack.length == 0) + throw 'no more undo data'; + var undoTransaction = undoStack.pop(); + var redoTransaction = []; + while (undoTransaction.length) + redoTransaction.push(undoTransaction.pop()()); + redoStack.push(redoTransaction); + dispatchEvent('onundo'); + }; + self.redo = function () { + if (pushToTransaction) + throw 'transaction is not ended'; + if (preventPushUndo) + throw 'history is locked'; + if (isDrawing || isStabilizing) + throw 'still drawing'; + if (redoStack.length == 0) + throw 'no more redo data'; + var redoTransaction = redoStack.pop(); + var undoTransaction = []; + while (redoTransaction.length) + undoTransaction.push(redoTransaction.pop()()); + undoStack.push(undoTransaction); + dispatchEvent('onredo'); + }; + function pushLayerMetadataUndo(index) { + index = index || layerIndex; + var snapshotMetadata = self.getLayerMetadata(index); + var swap = function () { + self.lockHistory(); + var temp = self.getLayerMetadata(index); + self.setLayerMetadata(snapshotMetadata, index); + snapshotMetadata = temp; + self.unlockHistory(); + return swap; + }; + pushUndo(swap); + } + function pushLayerOpacityUndo(index) { + index = index || layerIndex; + var snapshotOpacity = self.getLayerOpacity(index); + var swap = function () { + self.lockHistory(); + var temp = self.getLayerOpacity(index); + self.setLayerOpacity(snapshotOpacity, index); + snapshotOpacity = temp; + self.unlockHistory(); + return swap; + }; + pushUndo(swap); + } + function pushLayerVisibleUndo(index) { + index = index || layerIndex; + var snapshotVisible = self.getLayerVisible(index); + var swap = function () { + self.lockHistory(); + var temp = self.getLayerVisible(index); + self.setLayerVisible(snapshotVisible, index); + snapshotVisible = temp; + self.unlockHistory(); + return swap; + }; + pushUndo(swap); + } + function pushSwapLayerUndo(layerA, layerB) { + var swap = function () { + self.lockHistory(); + self.swapLayer(layerA, layerB); + self.unlockHistory(); + return swap; + }; + pushUndo(swap); + } + function pushAddLayerUndo(index) { + var add = function () { + self.lockHistory(); + self.addLayer(index); + self.unlockHistory(); + cacheLayer(index); + return remove; + }; + var remove = function () { + self.lockHistory(); + self.removeLayer(index); + self.unlockHistory(); + return add; + }; + pushUndo(remove); + } + function pushRemoveLayerUndo(index) { + var layerContext = getLayerContext(index); + var w = size.width; + var h = size.height; + var snapshotData = layerContext.getImageData(0, 0, w, h); + var snapshotMetadata = self.getLayerMetadata(index); + var snapshotOpacity = self.getLayerOpacity(index); + var snapshotVisible = self.getLayerVisible(index); + var add = function () { + self.lockHistory(); + self.addLayer(index); + self.setLayerMetadata(snapshotMetadata, index); + self.setLayerOpacity(snapshotOpacity, index); + self.setLayerVisible(snapshotVisible, index); + var layerContext = getLayerContext(index); + layerContext.putImageData(snapshotData, 0, 0); + self.unlockHistory(); + cacheLayer(index); + return remove; + }; + var remove = function () { + self.lockHistory(); + self.removeLayer(index); + self.unlockHistory(); + return add; + }; + pushUndo(add); + } + function pushDirtyRectUndo(x, y, width, height, index) { + index = index || layerIndex; + var w = size.width; + var h = size.height; + var right = x + width; + var bottom = y + height; + x = Math.min(w, Math.max(0, x)); + y = Math.min(h, Math.max(0, y)); + width = Math.min(w, Math.max(x, right)) - x; + height = Math.min(h, Math.max(y, bottom)) - y; + if ((x % 1) > 0) + ++width; + if ((y % 1) > 0) + ++height; + x = x | 0; + y = y | 0; + width = Math.min(w - x, Math.ceil(width)); + height = Math.min(h - y, Math.ceil(height)); + if ((width === 0) || (height === 0)) { + var doNothing = function () { + return doNothing; + }; + pushUndo(doNothing); + } + else { + var layerContext = getLayerContext(index); + var snapshotData = layerContext.getImageData(x, y, width, height); + var swap = function () { + var layerContext = getLayerContext(index); + var tempData = layerContext.getImageData(x, y, width, height); + layerContext.putImageData(snapshotData, x, y); + snapshotData = tempData; + cacheLayer(index); + return swap; + }; + pushUndo(swap); + } + if (renderDirtyRect) + drawDirtyRect(x, y, width, height); + } + function pushContextUndo(index) { + index = index || layerIndex; + pushDirtyRectUndo(0, 0, size.width, size.height, index); + } + function pushAllContextUndo() { + var snapshotDatas = []; + var i; + var w = size.width; + var h = size.height; + for (i = 0; i < layers.length; ++i) { + var layerContext = getLayerContext(i); + snapshotDatas.push(layerContext.getImageData(0, 0, w, h)); + } + var swap = function (index) { + var layerContext = getLayerContext(index); + var tempData = layerContext.getImageData(0, 0, w, h); + layerContext.putImageData(snapshotDatas[index], 0, 0); + snapshotDatas[index] = tempData; + cacheLayer(index); + }; + var swapAll = function () { + for (var i = 0; i < layers.length; ++i) + swap(i); + return swapAll; + }; + pushUndo(swapAll); + } + function pushCanvasSizeUndo(width, height, offsetX, offsetY) { + var snapshotSize = self.getCanvasSize(); + var snapshotDatas = []; + var w = snapshotSize.width; + var h = snapshotSize.height; + for (var i = 0; i < layers.length; ++i) { + var layerContext = getLayerContext(i); + snapshotDatas[i] = layerContext.getImageData(0, 0, w, h); + } + function setSize(width, height, offsetX, offsetY) { + self.lockHistory(); + self.setCanvasSize(width, height, offsetX, offsetY); + self.unlockHistory(); + } + var rollback = function () { + setSize(w, h); + for (var i = 0; i < layers.length; ++i) { + var layerContext = getLayerContext(i); + layerContext.putImageData(snapshotDatas[i], 0, 0); + } + return redo; + }; + var redo = function () { + rollback(); + setSize(width, height, offsetX, offsetY); + return rollback; + }; + pushUndo(rollback); + } + var size = {width: 640, height: 480}; + self.getCanvasSize = function () { + return {width: size.width, height: size.height}; //clone size + }; + self.setCanvasSize = function (width, height, offsetX, offsetY) { + offsetX = offsetX || 0; + offsetY = offsetY || 0; + size.width = width = Math.floor(width); + size.height = height = Math.floor(height); + pushCanvasSizeUndo(width, height, offsetX, offsetY); + dispatchEvent('oncanvassize', { + width: width, height: height, + offsetX: offsetX, offsetY: offsetY + }); + paintingCanvas.width = width; + paintingCanvas.height = height; + dirtyRectDisplay.width = width; + dirtyRectDisplay.height = height; + domElement.style.width = width + 'px'; + domElement.style.height = height + 'px'; + for (var i=0; i 2) && (h > 2)) { + context.globalCompositeOperation = 'destination-out'; + context.fillRect(x + 1, y + 1, w - 2, h - 2); + } + } + self.getRenderDirtyRect = function () { + return renderDirtyRect; + }; + self.setRenderDirtyRect = function (render) { + renderDirtyRect = render; + if (render == false) + dirtyRectDisplayContext.clearRect(0, 0, size.width, size.height); + }; + self.createLayerThumbnail = function (index, width, height) { + index = index || layerIndex; + width = width || size.width; + height = height || size.height; + var canvas = getLayerCanvas(index); + var thumbnail = document.createElement('canvas'); + var thumbnailContext = thumbnail.getContext('2d'); + thumbnail.width = width; + thumbnail.height = height; + thumbnailContext.drawImage(canvas, 0, 0, width, height); + return thumbnail; + }; + self.createFlattenThumbnail = function (width, height) { + width = width || size.width; + height = height || size.height; + var thumbnail = document.createElement('canvas'); + var thumbnailContext = thumbnail.getContext('2d'); + thumbnail.width = width; + thumbnail.height = height; + for (var i = 0; i < layers.length; ++i) { + if (!self.getLayerVisible(i)) + continue; + var canvas = getLayerCanvas(i); + thumbnailContext.globalAlpha = self.getLayerOpacity(i); + thumbnailContext.drawImage(canvas, 0, 0, width, height); + } + return thumbnail; + }; + self.getLayers = function () { + return layers.concat(); //clone layers + }; + self.getLayerCount = function () { + return layers.length; + }; + self.addLayer = function (index) { + index = index || layers.length; + pushAddLayerUndo(index); + var layer = document.createElement('div'); + layer.className = 'croquis-layer'; + layer.style.visibility = 'visible'; + layer.style.opacity = 1; + layer['croquis-metadata'] = {}; + var canvas = document.createElement('canvas'); + canvas.className = 'croquis-layer-canvas'; + canvas.width = size.width; + canvas.height = size.height; + canvas.style.position = 'absolute'; + layer.appendChild(canvas); + domElement.appendChild(layer); + layers.splice(index, 0, layer); + sortLayers(); + self.selectLayer(layerIndex); + dispatchEvent('onlayeradd', {index: index}); + if (self.onLayerAdded) + self.onLayerAdded(index); + return layer; + }; + self.removeLayer = function (index) { + index = index || layerIndex; + pushRemoveLayerUndo(index); + domElement.removeChild(layers[index]); + layers.splice(index, 1); + if (layerIndex == layers.length) + self.selectLayer(layerIndex - 1); + sortLayers(); + dispatchEvent('onlayerremove', {index: index}); + if (self.onLayerRemoved) + self.onLayerRemoved(index); + }; + self.removeAllLayer = function () { + while (layers.length) + self.removeLayer(0); + }; + self.swapLayer = function (layerA, layerB) { + pushSwapLayerUndo(layerA, layerB); + var layer = layers[layerA]; + layers[layerA] = layers[layerB]; + layers[layerB] = layer; + sortLayers(); + dispatchEvent('onlayerswap', {a: layerA, b: layerB}); + if (self.onLayerSwapped) + self.onLayerSwapped(layerA, layerB); + }; + self.getCurrentLayerIndex = function () { + return layerIndex; + }; + self.selectLayer = function (index) { + var lastestLayerIndex = layers.length - 1; + if (index > lastestLayerIndex) + index = lastestLayerIndex; + layerIndex = index; + if (paintingCanvas.parentElement != null) + paintingCanvas.parentElement.removeChild(paintingCanvas); + layers[index].appendChild(paintingCanvas); + dispatchEvent('onlayerselect', {index: index}); + if (self.onLayerSelected) + self.onLayerSelected(index); + }; + self.clearLayer = function (index) { + index = index || layerIndex; + pushContextUndo(index); + var context = getLayerContext(index); + context.clearRect(0, 0, size.width, size.height); + cacheLayer(index); + }; + self.fillLayer = function (fillColor, index) { + index = index || layerIndex; + pushContextUndo(index); + var context = getLayerContext(index); + context.fillStyle = fillColor; + context.fillRect(0, 0, size.width, size.height); + cacheLayer(index); + }; + self.fillLayerRect = function (fillColor, x, y, width, height, index) { + index = index || layerIndex; + pushDirtyRectUndo(x, y, width, height, index); + var context = getLayerContext(index); + context.fillStyle = fillColor; + context.fillRect(x, y, width, height); + cacheLayer(index); + }; + self.floodFill = function (x, y, r, g, b, a, index) { + index = index || layerIndex; + pushContextUndo(index); + var context = getLayerContext(index); + var w = size.width; + var h = size.height; + if ((x < 0) || (x >= w) || (y < 0) || (y >= h)) + return; + var imageData = context.getImageData(0, 0, w, h); + var d = imageData.data; + var targetColor = getColor(x, y); + var replacementColor = (r << 24) | (g << 16) | (b << 8) | a; + if (targetColor === replacementColor) + return; + function getColor(x, y) { + var index = ((y * w) + x) * 4; + return ((d[index] << 24) | (d[index + 1] << 16) | + (d[index + 2] << 8) | d[index + 3]); + } + function setColor(x, y) { + var index = ((y * w) + x) * 4; + d[index] = r; + d[index + 1] = g; + d[index + 2] = b; + d[index + 3] = a; + } + var queue = []; + queue.push(x, y); + while (queue.length) { + var nx = queue.shift(); + var ny = queue.shift(); + if ((nx < 0) || (nx >= w) || (ny < 0) || (ny >= h) || + (getColor(nx, ny) !== targetColor)) + continue; + var west, east; + west = east = nx; + do { + var wc = getColor(--west, ny); + } while ((west >= 0) && (wc === targetColor)); + do { + var ec = getColor(++east, ny); + } while ((east < w) && (ec === targetColor)); + for (var i = west + 1; i < east; ++i) { + setColor(i, ny); + var north = ny - 1; + var south = ny + 1; + if (getColor(i, north) === targetColor) + queue.push(i, north); + if (getColor(i, south) === targetColor) + queue.push(i, south); + } + } + context.putImageData(imageData, 0, 0); + cacheLayer(index); + }; + self.getLayerMetadata = function (index) { + index = index || layerIndex; + var metadata = layers[index]['croquis-metadata']; + var clone = {}; + Object.keys(metadata).forEach(function (key) { + clone[key] = metadata[key]; + }); + return clone; + }; + self.setLayerMetadata = function (metadata, index) { + index = index || layerIndex; + pushLayerMetadataUndo(index); + layers[index]['croquis-metadata'] = metadata; + }; + self.getLayerOpacity = function (index) { + index = index || layerIndex; + var opacity = parseFloat( + layers[index].style.getPropertyValue('opacity')); + return window.isNaN(opacity) ? 1 : opacity; + }; + self.setLayerOpacity = function (opacity, index) { + index = index || layerIndex; + pushLayerOpacityUndo(index); + layers[index].style.opacity = opacity; + }; + self.getLayerVisible = function (index) { + index = index || layerIndex; + var visible = layers[index].style.getPropertyValue('visibility'); + return visible != 'hidden'; + }; + self.setLayerVisible = function (visible, index) { + index = index || layerIndex; + pushLayerVisibleUndo(index); + layers[index].style.visibility = visible ? 'visible' : 'hidden'; + }; + function cacheLayer(index) { + index = index || layerIndex; + var w = size.width; + var h = size.height; + layers[index].cache = getLayerContext(index).getImageData(0, 0, w, h); + } + self.getLayerImageDataCache = function (index) { + index = index || layerIndex; + if (layers[index].cache == null) + cacheLayer(index); + return layers[index].cache; + }; + function makeColorData(imageData1x1) { + var data = imageData1x1.data; + var r = data[0]; + var g = data[1]; + var b = data[2]; + var a = data[3]; + return { + r: r, g: g, b: b, a: a, + htmlColor: 'rgba(' + [r, g, b, a / 0xff].join(',') + ')' + }; + } + self.pickColor = function (x, y, index) { + x = x | 0; // cast to int + y = y | 0; + if ((x < 0) || (x >= size.width) || (y < 0) || (y >= size.height)) + return null; + index = index || layerIndex; + var cache = self.getLayerImageDataCache(index); + var position = (y * size.width + x) * 4; + var data = []; + data[0] = cache.data[position]; + data[1] = cache.data[++position]; + data[2] = cache.data[++position]; + data[3] = cache.data[++position]; + return makeColorData({data: data}); + }; + self.eyeDrop = function (x, y, baseColor) { + if (self.pickColor(x, y) == null) + return null; + baseColor = baseColor || '#fff'; + var plane = document.createElement('canvas'); + plane.width = 1; + plane.height = 1; + var planeContext = plane.getContext('2d'); + planeContext.fillStyle = baseColor; + planeContext.fillRect(0, 0, 1, 1); + for (var i = 0; i < layers.length; ++i) { + if (!self.getLayerVisible(i)) + continue; + planeContext.globalAlpha = self.getLayerOpacity(i); + planeContext.fillStyle = self.pickColor(x, y, i).htmlColor; + planeContext.fillRect(0, 0, 1, 1); + } + return makeColorData(planeContext.getImageData(0, 0, 1, 1)); + }; + var tool; + var toolStabilizeLevel = 0; + var toolStabilizeWeight = 0.8; + var stabilizer = null; + var stabilizerInterval = 5; + var tick; + var tickInterval = 20; + var paintingOpacity = 1; + var paintingKnockout = false; + self.getTool = function () { + return tool; + }; + self.setTool = function (value) { + tool = value; + dispatchEvent('ontool', {tool: value}); + paintingContext = paintingCanvas.getContext('2d'); + if (tool && tool.setContext) + tool.setContext(paintingContext); + }; + self.setTool(new Croquis.Brush()); + self.getPaintingOpacity = function () { + return paintingOpacity; + }; + self.setPaintingOpacity = function (opacity) { + paintingOpacity = opacity; + paintingCanvas.style.opacity = opacity; + }; + self.getPaintingKnockout = function () { + return paintingKnockout; + }; + self.setPaintingKnockout = function (knockout) { + if (isDrawing || isStabilizing) + throw 'still drawing'; + paintingKnockout = knockout; + paintingCanvas.style.visibility = knockout ? 'hidden' : 'visible'; + }; + self.getTickInterval = function () { + return tickInterval; + }; + self.setTickInterval = function (interval) { + tickInterval = interval; + }; + /* + stabilize level is the number of coordinate tracker. + higher stabilize level makes lines smoother. + */ + self.getToolStabilizeLevel = function () { + return toolStabilizeLevel; + }; + self.setToolStabilizeLevel = function (level) { + toolStabilizeLevel = (level < 0) ? 0 : level; + }; + /* + higher stabilize weight makes trackers follow slower. + */ + self.getToolStabilizeWeight = function () { + return toolStabilizeWeight; + }; + self.setToolStabilizeWeight = function (weight) { + toolStabilizeWeight = weight; + }; + self.getToolStabilizeInterval = function () { + return stabilizerInterval; + }; + self.setToolStabilizeInterval = function (interval) { + stabilizerInterval = interval; + }; + var isDrawing = false; + var isStabilizing = false; + var beforeKnockout = document.createElement('canvas'); + var knockoutTick; + var knockoutTickInterval = 20; + function gotoBeforeKnockout() { + var context = getLayerContext(layerIndex); + var w = size.width; + var h = size.height; + context.clearRect(0, 0, w, h); + context.drawImage(beforeKnockout, 0, 0, w, h); + } + function drawPaintingCanvas() { //draw painting canvas on current layer + var context = getLayerContext(layerIndex); + var w = size.width; + var h = size.height; + context.save(); + context.globalAlpha = paintingOpacity; + context.globalCompositeOperation = paintingKnockout ? + 'destination-out' : 'source-over'; + context.drawImage(paintingCanvas, 0, 0, w, h); + context.restore(); + } + function _move(x, y, pressure) { + if (tool.move) + tool.move(x, y, pressure); + dispatchEvent('onmove', {x: x, y: y, pressure: pressure}); + if (self.onMoved) + self.onMoved(x, y, pressure); + } + function _up(x, y, pressure) { + isDrawing = false; + isStabilizing = false; + var dirtyRect; + if (tool.up) + dirtyRect = tool.up(x, y, pressure); + if (paintingKnockout) + gotoBeforeKnockout(); + if (dirtyRect) + pushDirtyRectUndo(dirtyRect.x, dirtyRect.y, + dirtyRect.width, dirtyRect.height); + else + pushContextUndo(); + drawPaintingCanvas(); + paintingContext.clearRect(0, 0, size.width, size.height); + dirtyRect = dirtyRect || + {x: 0, y: 0, width: size.width, height: size.height}; + dispatchEvent('onup', + {x: x, y: y, pressure: pressure, dirtyRect: dirtyRect}); + if (self.onUpped) + self.onUpped(x, y, pressure, dirtyRect); + window.clearInterval(knockoutTick); + window.clearInterval(tick); + cacheLayer(self.getCurrentLayerIndex()); + } + self.down = function (x, y, pressure) { + if (isDrawing || isStabilizing) + throw 'still drawing'; + isDrawing = true; + if (tool == null) + return; + if (paintingKnockout) { + var w = size.width; + var h = size.height; + var canvas = getLayerCanvas(layerIndex); + var beforeKnockoutContext = beforeKnockout.getContext('2d'); + beforeKnockout.width = w; + beforeKnockout.height = h; + beforeKnockoutContext.clearRect(0, 0, w, h); + beforeKnockoutContext.drawImage(canvas, 0, 0, w, h); + } + pressure = pressure || Croquis.Tablet.pressure(); + var down = tool.down; + if (toolStabilizeLevel > 0) { + stabilizer = new Croquis.Stabilizer(down, _move, _up, + toolStabilizeLevel, toolStabilizeWeight, + x, y, pressure, stabilizerInterval); + isStabilizing = true; + } + else if (down != null) + down(x, y, pressure); + dispatchEvent('ondown', {x: x, y: y, pressure: pressure}); + if (self.onDowned) + self.onDowned(x, y, pressure); + knockoutTick = window.setInterval(function () { + if (paintingKnockout) { + gotoBeforeKnockout(); + drawPaintingCanvas(); + } + }, knockoutTickInterval); + tick = window.setInterval(function () { + if (tool.tick) + tool.tick(); + dispatchEvent('ontick'); + if (self.onTicked) + self.onTicked(); + }, tickInterval); + }; + self.move = function (x, y, pressure) { + if (!isDrawing) + throw 'you need to call \'down\' first'; + if (tool == null) + return; + pressure = pressure || Croquis.Tablet.pressure(); + if (stabilizer != null) + stabilizer.move(x, y, pressure); + else if (!isStabilizing) + _move(x, y, pressure); + }; + self.up = function (x, y, pressure) { + if (!isDrawing) + throw 'you need to call \'down\' first'; + if (tool == null) { + isDrawing = false; + return; + } + pressure = pressure || Croquis.Tablet.pressure(); + if (stabilizer != null) + stabilizer.up(x, y, pressure); + else + _up(x, y, pressure); + stabilizer = null; + }; + // apply image data + ;(function (croquis, imageDataList) { + if (imageDataList != null) { + if (imageDataList.length === 0) + return; + croquis.lockHistory(); + var first = imageDataList[0]; + croquis.setCanvasSize(first.width, first.height); + for (var i = 0; i < imageDataList.length; ++i) { + var current = imageDataList[i]; + if ((current.width != first.width) || + (current.height != first.height)) + throw 'all image data must have same size'; + croquis.addLayer(); + var context = croquis.getLayerCanvas(i).getContext('2d'); + context.putImageData(current, 0, 0); + } + croquis.selectLayer(0); + croquis.unlockHistory(); + } + }).call(null, self, imageDataList); +} +Croquis.createChecker = function (cellSize, colorA, colorB) { + cellSize = cellSize || 10; + colorA = colorA || '#fff'; + colorB = colorB || '#ccc'; + var size = cellSize + cellSize; + var checker = document.createElement('canvas'); + checker.width = checker.height = size; + var context = checker.getContext('2d'); + context.fillStyle = colorB; + context.fillRect(0, 0, size, size); + context.fillStyle = colorA; + context.fillRect(0, 0, cellSize, cellSize); + context.fillRect(cellSize, cellSize, size, size); + return checker; +}; +Croquis.createBrushPointer = function (brushImage, brushSize, brushAngle, + threshold, antialias, color, + shadow, shadowOffsetX, shadowOffsetY) { + brushSize = brushSize | 0; + var pointer = document.createElement('canvas'); + var pointerContext = pointer.getContext('2d'); + var boundWidth; + var boundHeight; + if (brushSize === 0) { + pointer.width = boundWidth = 1; + pointer.height = boundHeight = 1; + } + if (brushImage == null) { + var halfSize = (brushSize * 0.5) | 0; + pointer.width = boundWidth = brushSize; + pointer.height = boundHeight = brushSize; + pointerContext.fillStyle = '#000'; + pointerContext.beginPath(); + pointerContext.arc(halfSize, halfSize, halfSize, 0, Math.PI * 2); + pointerContext.closePath(); + pointerContext.fill(); + } + else { + var width = brushSize; + var height = brushSize * (brushImage.height / brushImage.width); + var toRad = Math.PI / 180; + var ra = brushAngle * toRad; + var abs = Math.abs; + var sin = Math.sin; + var cos = Math.cos; + boundWidth = abs(height * sin(ra)) + abs(width * cos(ra)); + boundHeight = abs(width * sin(ra)) + abs(height * cos(ra)); + pointer.width = boundWidth; + pointer.height = boundHeight; + pointerContext.save(); + pointerContext.translate(boundWidth * 0.5, boundHeight * 0.5); + pointerContext.rotate(ra); + pointerContext.translate(width * -0.5, height * -0.5); + pointerContext.drawImage(brushImage, 0, 0, width, height); + pointerContext.restore(); + } + var result; + var alphaThresholdBorder = Croquis.createAlphaThresholdBorder( + pointer, threshold, antialias, color); + if (shadow) { + shadowOffsetX = shadowOffsetX || 1; + shadowOffsetY = shadowOffsetY || 1; + result = document.createElement('canvas'); + result.width = boundWidth + shadowOffsetX; + result.height = boundHeight + shadowOffsetY; + var resultContext = result.getContext('2d'); + resultContext.shadowOffsetX = shadowOffsetX; + resultContext.shadowOffsetY = shadowOffsetY; + resultContext.shadowColor = shadow; + resultContext.drawImage( + alphaThresholdBorder, 0, 0, boundWidth, boundHeight); + } + else { + result = alphaThresholdBorder; + } + return result; +}; +Croquis.createAlphaThresholdBorder = function (image, threshold, + antialias, color) { + threshold = threshold || 0x80; + color = color || '#000'; + var width = image.width; + var height = image.height; + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + canvas.width = width; + canvas.height = height; + try { + context.drawImage(image, 0, 0, width, height); + } + catch (e) { + return canvas; + } + var imageData = context.getImageData(0, 0, width, height); + var d = imageData.data; + function getAlphaIndex(index) { + return d[index * 4 + 3]; + } + function setRedIndex(index, red) { + d[index * 4] = red; + } + function getRedXY(x, y) { + var red = d[((y * width) + x) * 4]; + return red || 0; + } + function getGreenXY(x, y) { + var green = d[((y * width) + x) * 4 + 1]; + return green; + } + function setColorXY(x, y, red, green, alpha) { + var i = ((y * width) + x) * 4; + d[i] = red; + d[i + 1] = green; + d[i + 2] = 0; + d[i + 3] = alpha; + } + //threshold + var pixelCount = (d.length * 0.25) | 0; + for (var i = 0; i < pixelCount; ++i) + setRedIndex(i, (getAlphaIndex(i) < threshold) ? 0 : 1); + //outline + var x; + var y; + for (x = 0; x < width; ++x) { + for (y = 0; y < height; ++y) { + if (!getRedXY(x, y)) { + setColorXY(x, y, 0, 0, 0); + } + else { + var redCount = 0; + var left = x - 1; + var right = x + 1; + var up = y - 1; + var down = y + 1; + redCount += getRedXY(left, up); + redCount += getRedXY(left, y); + redCount += getRedXY(left, down); + redCount += getRedXY(right, up); + redCount += getRedXY(right, y); + redCount += getRedXY(right, down); + redCount += getRedXY(x, up); + redCount += getRedXY(x, down); + if (redCount != 8) + setColorXY(x, y, 1, 1, 255); + else + setColorXY(x, y, 1, 0, 0); + } + } + } + //antialias + if (antialias) { + for (x = 0; x < width; ++x) { + for (y = 0; y < height; ++y) { + if (getGreenXY(x, y)) { + var alpha = 0; + if (getGreenXY(x - 1, y) != getGreenXY(x + 1, y)) + setColorXY(x, y, 1, 1, alpha += 0x40); + if (getGreenXY(x, y - 1) != getGreenXY(x, y + 1)) + setColorXY(x, y, 1, 1, alpha + 0x50); + } + } + } + } + context.putImageData(imageData, 0, 0); + context.globalCompositeOperation = 'source-in'; + context.fillStyle = color; + context.fillRect(0, 0, width, height); + return canvas; +}; +Croquis.createFloodFill = function (canvas, x, y, r, g, b, a) { + var result = document.createElement('canvas'); + var w = result.width = canvas.width; + var h = result.height = canvas.height; + if ((x < 0) || (x >= w) || (y < 0) || (y >= h) || !(r || g || b || a)) + return result; + var originalContext = canvas.getContext('2d'); + var originalData = originalContext.getImageData(0, 0, w, h); + var od = originalData.data; + var resultContext = result.getContext('2d'); + var resultData = resultContext.getImageData(0, 0, w, h); + var rd = resultData.data; + var targetColor = getColor(x, y); + var replacementColor = (r << 24) | (g << 16) | (b << 8) | a; + function getColor(x, y) { + var index = ((y * w) + x) * 4; + return (rd[index] ? replacementColor : + ((od[index] << 24) | (od[index + 1] << 16) | + (od[index + 2] << 8) | od[index + 3])); + } + var queue = []; + queue.push(x, y); + while (queue.length) { + var nx = queue.shift(); + var ny = queue.shift(); + if ((nx < 0) || (nx >= w) || (ny < 0) || (ny >= h) || + (getColor(nx, ny) !== targetColor)) + continue; + var west, east; + west = east = nx; + do { + var wc = getColor(--west, ny); + } while ((west >= 0) && (wc === targetColor)); + do { + var ec = getColor(++east, ny); + } while ((east < w) && (ec === targetColor)); + for (var i = west + 1; i < east; ++i) { + rd[((ny * w) + i) * 4] = 1; + var north = ny - 1; + var south = ny + 1; + if (getColor(i, north) === targetColor) + queue.push(i, north); + if (getColor(i, south) === targetColor) + queue.push(i, south); + } + } + for (var i = 0; i < w; ++i) { + for (var j = 0; j < h; ++j) { + var index = ((j * w) + i) * 4; + if (rd[index] === 0) + continue; + rd[index] = r; + rd[index + 1] = g; + rd[index + 2] = b; + rd[index + 3] = a; + } + } + resultContext.putImageData(resultData, 0, 0); + return result; +}; + +Croquis.Tablet = {}; +Croquis.Tablet.plugin = function () { + var plugin = document.querySelector( + 'object[type=\'application/x-wacomtabletplugin\']'); + if (!plugin) { + plugin = document.createElement('object'); + plugin.type = 'application/x-wacomtabletplugin'; + plugin.style.position = 'absolute'; + plugin.style.top = '-1000px'; + document.body.appendChild(plugin); + } + return plugin; +}; +Croquis.Tablet.pen = function () { + var plugin = Croquis.Tablet.plugin(); + return plugin.penAPI; +}; +Croquis.Tablet.pressure = function () { + var pen = Croquis.Tablet.pen(); + return (pen && pen.pointerType) ? pen.pressure : 1; +}; +Croquis.Tablet.isEraser = function () { + var pen = Croquis.Tablet.pen(); + return pen ? pen.isEraser : false; +}; + +Croquis.Stabilizer = function (down, move, up, level, weight, + x, y, pressure, interval) { + interval = interval || 5; + var follow = 1 - Math.min(0.95, Math.max(0, weight)); + var paramTable = []; + var current = { x: x, y: y, pressure: pressure }; + for (var i = 0; i < level; ++i) + paramTable.push({ x: x, y: y, pressure: pressure }); + var first = paramTable[0]; + var last = paramTable[paramTable.length - 1]; + var upCalled = false; + if (down != null) + down(x, y, pressure); + window.setTimeout(_move, interval); + this.getParamTable = function () { //for test + return paramTable; + }; + this.move = function (x, y, pressure) { + current.x = x; + current.y = y; + current.pressure = pressure; + }; + this.up = function (x, y, pressure) { + current.x = x; + current.y = y; + current.pressure = pressure; + upCalled = true; + }; + function dlerp(a, d, t) { + return a + d * t; + } + function _move(justCalc) { + var curr; + var prev; + var dx; + var dy; + var dp; + var delta = 0; + first.x = current.x; + first.y = current.y; + first.pressure = current.pressure; + for (var i = 1; i < paramTable.length; ++i) { + curr = paramTable[i]; + prev = paramTable[i - 1]; + dx = prev.x - curr.x; + dy = prev.y - curr.y; + dp = prev.pressure - curr.pressure; + delta += Math.abs(dx); + delta += Math.abs(dy); + curr.x = dlerp(curr.x, dx, follow); + curr.y = dlerp(curr.y, dy, follow); + curr.pressure = dlerp(curr.pressure, dp, follow); + } + if (justCalc) + return delta; + if (upCalled) { + while(delta > 1) { + move(last.x, last.y, last.pressure); + delta = _move(true); + } + up(last.x, last.y, last.pressure); + } + else { + move(last.x, last.y, last.pressure); + window.setTimeout(_move, interval); + } + } +}; + +Croquis.Random = {}; +Croquis.Random.LFSR113 = function (seed) { + var IA = 16807; + var IM = 2147483647; + var IQ = 127773; + var IR = 2836; + var a, b, c, d, e; + this.get = function () { + var f = ((a << 6) ^ a) >> 13; + a = ((a & 4294967294) << 18) ^ f; + f = ((b << 2) ^ b) >> 27; + b = ((b & 4294967288) << 2) ^ f; + f = ((c << 13) ^ c) >> 21; + c = ((c & 4294967280) << 7) ^ f; + f = ((d << 3) ^ d) >> 12; + d = ((d & 4294967168) << 13) ^ f; + return (a ^ b ^ c ^ d) * 2.3283064365386963e-10 + 0.5; + }; + seed |= 0; + if (seed <= 0) seed = 1; + e = (seed / IQ) | 0; + seed = (((IA * (seed - ((e * IQ) | 0))) | 0) - ((IR * e) | 0)) | 0; + if (seed < 0) seed = (seed + IM) | 0; + if (seed < 2) a = (seed + 2) | 0 ; else a = seed; + e = (seed / IQ) | 0; + seed = (((IA * (seed - ((e * IQ) | 0))) | 0) - ((IR * e) | 0)) | 0; + if (seed < 0) seed = (seed + IM) | 0; + if (seed < 8) b = (seed + 8) | 0; else b = seed; + e = (seed / IQ) | 0; + seed = (((IA * (seed - ((e * IQ) | 0))) | 0) - ((IR * e) | 0)) | 0; + if (seed < 0) seed = (seed + IM) | 0; + if (seed < 16) c = (seed + 16) | 0; else c = seed; + e = (seed / IQ) | 0; + seed = (((IA * (seed - ((e * IQ) | 0))) | 0) - ((IR * e) | 0)) | 0; + if (seed < 0) seed = (seed + IM) | 0; + if (seed < 128) d = (seed + 128) | 0; else d = seed; + this.get(); +}; + +Croquis.Brush = function () { + // math shortcut + var min = Math.min; + var max = Math.max; + var abs = Math.abs; + var sin = Math.sin; + var cos = Math.cos; + var sqrt = Math.sqrt; + var atan2 = Math.atan2; + var PI = Math.PI; + var ONE = PI + PI; + var QUARTER = PI * 0.5; + var random = Math.random; + this.setRandomFunction = function (value) { + random = value; + }; + this.clone = function () { + var clone = new Brush(context); + clone.setColor(this.getColor()); + clone.setFlow(this.getFlow()); + clone.setSize(this.getSize()); + clone.setSpacing(this.getSpacing()); + clone.setAngle(this.getAngle()); + clone.setRotateToDirection(this.getRotateToDirection()); + clone.setNormalSpread(this.getNormalSpread()); + clone.setTangentSpread(this.getTangentSpread()); + clone.setImage(this.getImage()); + }; + var context = null; + this.getContext = function () { + return context; + }; + this.setContext = function (value) { + context = value; + }; + var color = '#000'; + this.getColor = function () { + return color; + }; + this.setColor = function (value) { + color = value; + transformedImageIsDirty = true; + }; + var flow = 1; + this.getFlow = function() { + return flow; + }; + this.setFlow = function(value) { + flow = value; + transformedImageIsDirty = true; + }; + var size = 10; + this.getSize = function () { + return size; + }; + this.setSize = function (value) { + size = (value < 1) ? 1 : value; + transformedImageIsDirty = true; + }; + var spacing = 0.2; + this.getSpacing = function () { + return spacing; + }; + this.setSpacing = function (value) { + spacing = (value < 0.01) ? 0.01 : value; + }; + var toRad = PI / 180; + var toDeg = 1 / toRad; + var angle = 0; // radian unit + this.getAngle = function () { // returns degree unit + return angle * toDeg; + }; + this.setAngle = function (value) { + angle = value * toRad; + }; + var rotateToDirection = false; + this.getRotateToDirection = function () { + return rotateToDirection; + }; + this.setRotateToDirection = function (value) { + rotateToDirection = value; + }; + var normalSpread = 0; + this.getNormalSpread = function () { + return normalSpread; + }; + this.setNormalSpread = function (value) { + normalSpread = value; + }; + var tangentSpread = 0; + this.getTangentSpread = function () { + return tangentSpread; + }; + this.setTangentSpread = function (value) { + tangentSpread = value; + }; + var image = null; + var transformedImage = null; + var transformedImageIsDirty = true; + var imageRatio = 1; + this.getImage = function () { + return image; + }; + this.setImage = function (value) { + if (value == null) { + transformedImage = image = null; + imageRatio = 1; + drawFunction = drawCircle; + } + else if (value != image) { + image = value; + imageRatio = image.height / image.width; + transformedImage = document.createElement('canvas'); + drawFunction = drawImage; + transformedImageIsDirty = true; + } + }; + var delta = 0; + var prevX = 0; + var prevY = 0; + var lastX = 0; + var lastY = 0; + var dir = 0; + var prevScale = 0; + var drawFunction = drawCircle; + var reserved = null; + var dirtyRect; + function spreadRandom() { + return random() - 0.5; + } + function drawReserved() { + if (reserved != null) { + drawTo(reserved.x, reserved.y, reserved.scale); + reserved = null; + } + } + function appendDirtyRect(x, y, width, height) { + if (!(width && height)) + return; + var dxw = dirtyRect.x + dirtyRect.width; + var dyh = dirtyRect.y + dirtyRect.height; + var xw = x + width; + var yh = y + height; + var minX = dirtyRect.width ? min(dirtyRect.x, x) : x; + var minY = dirtyRect.height ? min(dirtyRect.y, y) : y; + dirtyRect.x = minX; + dirtyRect.y = minY; + dirtyRect.width = max(dxw, xw) - minX; + dirtyRect.height = max(dyh, yh) - minY; + } + function transformImage() { + transformedImage.width = size; + transformedImage.height = size * imageRatio; + var brushContext = transformedImage.getContext('2d'); + brushContext.clearRect(0, 0, + transformedImage.width, transformedImage.height); + brushContext.drawImage(image, 0, 0, + transformedImage.width, transformedImage.height); + brushContext.globalCompositeOperation = 'source-in'; + brushContext.fillStyle = color; + brushContext.globalAlpha = flow; + brushContext.fillRect(0, 0, + transformedImage.width, transformedImage.height); + } + function drawCircle(size) { + var halfSize = size * 0.5; + context.fillStyle = color; + context.globalAlpha = flow; + context.beginPath(); + context.arc(halfSize, halfSize, halfSize, 0, ONE); + context.closePath(); + context.fill(); + } + function drawImage(size) { + if (transformedImageIsDirty) + transformImage(); + try { + context.drawImage(transformedImage, 0, 0, size, size * imageRatio); + } + catch (e) { + drawCircle(size); + } + } + function drawTo(x, y, scale) { + var scaledSize = size * scale; + var nrm = dir + QUARTER; + var nr = normalSpread * scaledSize * spreadRandom(); + var tr = tangentSpread * scaledSize * spreadRandom(); + var ra = rotateToDirection ? angle + dir : angle; + var width = scaledSize; + var height = width * imageRatio; + var boundWidth = abs(height * sin(ra)) + abs(width * cos(ra)); + var boundHeight = abs(width * sin(ra)) + abs(height * cos(ra)); + x += Math.cos(nrm) * nr + Math.cos(dir) * tr; + y += Math.sin(nrm) * nr + Math.sin(dir) * tr; + context.save(); + context.translate(x, y); + context.rotate(ra); + context.translate(-(width * 0.5), -(height * 0.5)); + drawFunction(width); + context.restore(); + appendDirtyRect(x - (boundWidth * 0.5), + y - (boundHeight * 0.5), + boundWidth, boundHeight); + } + this.down = function(x, y, scale) { + if (context == null) + throw 'brush needs the context'; + dir = 0; + dirtyRect = {x: 0, y: 0, width: 0, height: 0}; + if (scale > 0) { + if (rotateToDirection || normalSpread !== 0 || tangentSpread !== 0) + reserved = {x: x, y: y, scale: scale}; + else + drawTo(x, y, scale); + } + delta = 0; + lastX = prevX = x; + lastY = prevY = y; + prevScale = scale; + }; + this.move = function(x, y, scale) { + if (context == null) + throw 'brush needs the context'; + if (scale <= 0) { + delta = 0; + prevX = x; + prevY = y; + prevScale = scale; + return; + } + var dx = x - prevX; + var dy = y - prevY; + var ds = scale - prevScale; + var d = sqrt(dx * dx + dy * dy); + prevX = x; + prevY = y; + delta += d; + var midScale = (prevScale + scale) * 0.5; + var drawSpacing = size * spacing * midScale; + var ldx = x - lastX; + var ldy = y - lastY; + var ld = sqrt(ldx * ldx + ldy * ldy); + dir = atan2(ldy, ldx); + if (ldx || ldy) + drawReserved(); + if (drawSpacing < 0.5) + drawSpacing = 0.5; + if (delta < drawSpacing) { + prevScale = scale; + return; + } + var scaleSpacing = ds * (drawSpacing / delta); + if (ld < drawSpacing) { + lastX = x; + lastY = y; + drawTo(lastX, lastY, scale); + delta -= drawSpacing; + } else { + while(delta >= drawSpacing) { + ldx = x - lastX; + ldy = y - lastY; + var tx = cos(dir); + var ty = sin(dir); + lastX += tx * drawSpacing; + lastY += ty * drawSpacing; + prevScale += scaleSpacing; + drawTo(lastX, lastY, prevScale); + delta -= drawSpacing; + } + } + prevScale = scale; + }; + this.up = function (x, y, scale) { + dir = atan2(y - lastY, x - lastX); + drawReserved(); + return dirtyRect; + }; +}; diff --git a/src/editor/tools/Tools.Paintbrush.js b/src/editor/tools/Tools.Paintbrush.js index 6bea56de..135ccd39 100644 --- a/src/editor/tools/Tools.Paintbrush.js +++ b/src/editor/tools/Tools.Paintbrush.js @@ -21,26 +21,11 @@ Tools.Paintbrush = function (wickEditor) { var self = this; + var croquis; + var croquisDOMElement; + this.getCursorImage = function () { - var canvas = document.createElement("canvas"); - canvas.width = 128; - canvas.height = 128; - var context = canvas.getContext('2d'); - var centerX = canvas.width / 2; - var centerY = canvas.height / 2; - var radius = wickEditor.settings.brushThickness/2; - - context.beginPath(); - context.arc(centerX, centerY, radius+1, 0, 2 * Math.PI, false); - context.fillStyle = invertColor(wickEditor.settings.fillColor); - context.fill(); - - context.beginPath(); - context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); - context.fillStyle = wickEditor.settings.fillColor; - context.fill(); - - return 'url(' + canvas.toDataURL() + ') 64 64,default'; + return 'crosshair' }; this.getToolbarIcon = function () { @@ -52,121 +37,95 @@ Tools.Paintbrush = function (wickEditor) { } this.setup = function () { - + croquis = new Croquis(); + croquis.setCanvasSize(window.innerWidth, window.innerHeight); + croquis.addLayer(); + croquis.fillLayer('rgba(0,0,0,0)'); + croquis.addLayer(); + croquis.selectLayer(1); + + var brush = new Croquis.Brush(); + brush.setSize(40); + brush.setColor('#000'); + brush.setSpacing(0.2); + + croquis.setTool(brush); + croquis.setToolStabilizeLevel(20); + croquis.setToolStabilizeWeight(0.2); + + croquisDOMElement = croquis.getDOMElement(); + croquisDOMElement.style.display = 'none' + croquisDOMElement.style.pointerEvents = 'none'; + document.getElementById('editorCanvasContainer').appendChild(croquisDOMElement); } this.onSelected = function () { wickEditor.inspector.openToolSettings('paintbrush'); wickEditor.project.clearSelection(); wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; + croquisDOMElement.style.display = 'block' } this.onDeselected = function () { - if(path) path.remove(); + croquisDOMElement.style.display = 'none' } this.paperTool = new paper.Tool(); - var path; - var totalDelta; - var lastEvent; - - var BRUSH_MIN_DISTANCE = 0.5; this.paperTool.onMouseDown = function (event) { - + e = event.event + var pointerPosition = getRelativePosition(e.clientX, e.clientY); + croquis.down(pointerPosition.x, pointerPosition.y, e.pointerType === "pen" ? e.pressure : 1); } this.paperTool.onMouseDrag = function (event) { - lastEvent = { - delta: event.delta, - middlePoint: event.middlePoint, - } - - if (!path) { - path = new paper.Path({ - fillColor: wickEditor.settings.fillColor, - //strokeColor: '#000', - }); - //path.add(event.lastPoint); - } - - if(!totalDelta) { - totalDelta = event.delta; - } else { - totalDelta.x += event.delta.x; - totalDelta.y += event.delta.y; - } - - if (totalDelta.length > wickEditor.settings.brushThickness*BRUSH_MIN_DISTANCE/wickEditor.canvas.getZoom()) { - - totalDelta.x = 0; - totalDelta.y = 0; - - addNextSegment(event) - - } + e = event.event + var pointerPosition = getRelativePosition(e.clientX, e.clientY); + croquis.move(pointerPosition.x, pointerPosition.y, e.pointerType === "pen" ? e.pressure : 1); } this.paperTool.onMouseUp = function (event) { - if (path) { - path.closed = true; - path.smooth(); - if(wickEditor.settings.brushSmoothingAmount > 0) { - var t = wickEditor.settings.brushThickness; - var s = wickEditor.settings.brushSmoothingAmount/100; - var z = wickEditor.canvas.getZoom(); - path.simplify(t / z * s); - } - path = path.unite(new paper.Path()) - path.remove(); - - var group = new paper.Group({insert:false}); - group.addChild(path); - - var svgString = group.exportSVG({asString:true}); - pathWickObject = WickObject.createPathObject(svgString); - pathWickObject.x = group.position.x; - pathWickObject.y = group.position.y; - pathWickObject.width = group.bounds._width; - pathWickObject.height = group.bounds._height; - pathWickObject.svgX = group.bounds._x; - pathWickObject.svgY = group.bounds._y; - - wickEditor.actionHandler.doAction('addObjects', { - wickObjects: [pathWickObject], - dontSelectObjects: true, - }); - - path = null; - } - } - - var addNextSegment = function (event) { - var thickness = event.delta.length; - thickness /= wickEditor.settings.brushThickness/2; - thickness *= wickEditor.canvas.getZoom(); + e = event.event + var pointerPosition = getRelativePosition(e.clientX, e.clientY); + croquis.up(pointerPosition.x, pointerPosition.y, e.pointerType === "pen" ? e.pressure : 1); - var penPressure = wickEditor.inputHandler.getPenPressure(); - - var step = event.delta.divide(thickness).multiply(penPressure); - step.angle = step.angle + 90; - - var top = event.middlePoint.add(step); - var bottom = event.middlePoint.subtract(step); - - path.add(top); - path.insert(0, bottom); - path.smooth(); - } - - // https://stackoverflow.com/questions/14224535/scaling-between-two-number-ranges - function convertRange( value, r1, r2 ) { - return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ]; + setTimeout(function () { + var i = new Image(); + i.onload = function () { + //previewImage(i) + potraceImage(i, function (svgString) { + var xmlString = svgString + , parser = new DOMParser() + , doc = parser.parseFromString(xmlString, "text/xml"); + var tempPaperForPosition = paper.project.importSVG(doc, {insert:false}); + + var pathWickObject = WickObject.createPathObject(svgString); + pathWickObject.width = tempPaperForPosition.bounds.width; + pathWickObject.height = tempPaperForPosition.bounds.height; + + console.log(tempPaperForPosition) + pathWickObject.x = tempPaperForPosition.position.x - wickEditor.canvas.getPan().x; + pathWickObject.y = tempPaperForPosition.position.y - wickEditor.canvas.getPan().y; + + console.log(wickEditor.canvas) + + //tempPaperForPosition.scale(1/smoothing); + pathWickObject.pathData = tempPaperForPosition.exportSVG({asString:true}); + + wickEditor.actionHandler.doAction('addObjects', { + wickObjects: [pathWickObject], + dontSelectObjects: true, + }); + + //croquis.clearLayer(); + }); + } + i.src = document.getElementsByClassName('croquis-layer-canvas')[1].toDataURL(); + }, 20); } - function getBrushSmoothFactor () { - var bi = 100-wickEditor.settings.brushSmoothing; - var smoothFactor = convertRange(bi, [0,100], [0.3,1]); - return smoothFactor; + function getRelativePosition(absoluteX, absoluteY) { + var rect = croquisDOMElement.getBoundingClientRect(); + return {x: absoluteX - rect.left, y: absoluteY - rect.top}; } -} \ No newline at end of file +} diff --git a/src/editor/tools/Tools.Pencil.js b/src/editor/tools/Tools.Pencil.js index 68435d12..3da2d37b 100644 --- a/src/editor/tools/Tools.Pencil.js +++ b/src/editor/tools/Tools.Pencil.js @@ -78,7 +78,7 @@ Tools.Pencil = function (wickEditor) { totalDelta.y += event.delta.y; } - if (totalDelta.length > 2/wickEditor.canvas.getZoom()) { + if (totalDelta.length > (2+wickEditor.settings.pencilSmoothing)/wickEditor.canvas.getZoom()) { totalDelta.x = 0; totalDelta.y = 0; @@ -87,6 +87,8 @@ Tools.Pencil = function (wickEditor) { path.smooth(); lastEvent = event; + //path.simplify(1); + } } @@ -98,12 +100,12 @@ Tools.Pencil = function (wickEditor) { if(path.segments.length > 2) { path.smooth(); - if(wickEditor.settings.pencilSmoothing > 0) { + /*if(wickEditor.settings.pencilSmoothing > 0) { var t = wickEditor.settings.strokeWidth; var s = wickEditor.settings.pencilSmoothing/100*10; var z = wickEditor.canvas.getZoom(); path.simplify(t / z * s); - } + }*/ path.join(path, 5/wickEditor.canvas.getZoom()) } From 73b1db3afb24e23288ae57e2ac69c16fc977eb26 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 16 Apr 2018 23:44:05 -0400 Subject: [PATCH 04/37] Fixed bug in on(event) finder regex --- lib/ace/worker-javascript.js | 2 +- src/project/WickProject.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ace/worker-javascript.js b/lib/ace/worker-javascript.js index b2764112..15972d05 100755 --- a/lib/ace/worker-javascript.js +++ b/lib/ace/worker-javascript.js @@ -11779,7 +11779,7 @@ oop.inherits(JavaScriptWorker, Mirror); return this.sender.emit("annotate", []); // wick specific: add a semicolon to end of on(event) statements to squash missing ";" error - var onEventFinderRegex = /on *\( *[a-zA-Z]+ *\)/g + var onEventFinderRegex = /^on *\( *[a-zA-Z]+ *\)/g var m; do { m = onEventFinderRegex.exec(value, 'g'); diff --git a/src/project/WickProject.js b/src/project/WickProject.js index d281c319..1213b1f5 100755 --- a/src/project/WickProject.js +++ b/src/project/WickProject.js @@ -699,7 +699,7 @@ WickProject.prototype.loadScriptOfObject = function (obj) { }); var scriptEventsReplaced = obj.wickScript; - var onEventFinderRegex = /on *\( *[a-zA-Z]+ *\)/g + var onEventFinderRegex = /^on *\( *[a-zA-Z]+ *\)/g var m; do { m = onEventFinderRegex.exec(scriptEventsReplaced, 'g'); From ae7f4dbc5836b1f9b68596fb9342135b93b47416 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Tue, 17 Apr 2018 01:16:18 -0400 Subject: [PATCH 05/37] Add WIP howto document --- HOWTO.md | 387 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 387 insertions(+) create mode 100644 HOWTO.md diff --git a/HOWTO.md b/HOWTO.md new file mode 100644 index 00000000..c2a3add9 --- /dev/null +++ b/HOWTO.md @@ -0,0 +1,387 @@ +#Wick Editor v16 + +##Canvas + + - Pan canvas with `Spacebar` + - Zoom in and out with `+` and `-` keys + - Zoom in and out with `Modifier` + `Scroll` + - Reset canvas zoom level to 100% with `Modifier` + `0` + - Canvas color can be changed in project settings + - Canvas dimensions (width/height) can be changed in project settings + +###Undo/Redo + +- Undo any action by clicking `Edit` -> `Undo` or by pressing `Modifier` + `Z` +- Redo any action by clicking `Edit` -> `Redo` or by pressing `Modifier` + `Shift` + `Z` + +###Copy/Cut/Paste/Delete + +- Copy object(s) by pressing `Modifier`+`C` or by clicking `Edit` -> `Copy` in the menu bar +- Cut object(s) by pressing `Modifier`+`X` or by clicking `Edit` -> `Cut` in the menu bar +- Paste object(s) by pressing `Modifier`+`V` or by clicking `Edit` -> `Paste` in the menu bar +- Cut object(s) by pressing `Delete` or `Backspace`, or by clicking `Edit` -> `Delete` in the menu bar + +##Tools + +### Selection Cursor + +_Making selections_ + +- Click to select object +- `Shift` + click to select multiple objects +- Click and drag to select objects touching the selection box +- `Alt` + click and drag to select objects strictly inside the selection box + +_Modifying selections_ + +- Scale by dragging handles on corners and sides +- Scale and keep aspect ratio of object(s) by holding `Shift` and dragging handles on corners +- Rotate by dragging corners +- Move object(s) by 1 pixel in any direction using the arrow keys +- Move object(s) by 10 pixels in any direction using `Shift` + arrow keys +- Select all objects on the canvas by clicking `Edit` -> `Select All` in the menu bar, or by pressing `Modifier` + `A` +- Deselect all objects on the canvas by clicking `Edit` -> `Deselect All` in the menu bar, or by using `Modifier` + `Shift` + `A` + +### Path Cursor + +_Making selections_ + +
    +
  • Drag to select objects touching box
    • +
  • Alt+drag to select objects only inside box
    • +
+Modifying selections +
    +
  • Drag points to move points
    • +
  • Click stroke to add new point
    • +
  • Double click to straighten/smooth points
    • +
  • Command+click to remove points
    • +
  • Drag handles to change curves
    • + +Brush settings +
      +
    • Change fill color to set brush color
      • +
    • Change brush size in inspector
      • +
    • Change smoothness in inspector
      • +
    + +Pencil settings +
      +
    • Change stroke color to set pencil color
      • +
    • Change stroke width in inspector
      • +
    • Change smoothness in inspector
      • +
    + +
    + Change colors of shapes + Fill holes +
    + +Rectangle settings +
      +
    • Change corner roundness in inspector
      • +
    + + +
    Ellipse
    +
    + Draws circles +
    + +
    Line
    +
    + Draws lines +
    + +
    +
    Pen
    +
    + Click and drag to create points and curves + Click first point to close shape + Click the ends of an existing shape to add more curves to that shape +
    +
    +
    + +
    +
    Eyedropper
    +
    + Picks colors +
    +
    +
    + +
    +
    Text
    +
    + Click to create a text box + Double click any text to edit it + Text options in inspector +
    +
    +
    + +
    +
    Zoom
    +
    + Click to zoom in + Alt+click to zoom out + Drag to zoom into a section of the screen + Also can use + and - to zoom + Also can command+scroll to zoom + Also can use zoom box thing near timeline +
    +
    +
    + +
    +
    Pan
    +
    + Click and drag to pan +
    +
    + +##Timeline + +###Frames + +- To add a frame, double click an empty space on the timeline or right click and select `Add Frame` +- Select frames by clicking and dragging, all frames inside the selection box will be selected. +- Delete selected frames by pressing `Delete` or right clicking and selecting `Delete Frame` +- Move frame(s) by clicking and dragging selected frames +- Change the duration of frame(s) by dragging the left or right edges of the selection box + +###Tweens + +- Create a motion tween on a frame by right clicking a frame and selecting `Create Motion Tween`. +- If there are multiple objects on the frame when a motion tween is created, they will be automatically grouped into a single object. +- Create keyframes by right clicking and selecting `Insert Keyframe`. +- Copy and paste keyframes by right clicking a keyframe and selecting `Copy Keyframe` or `Paste Keyframe`. +- Keyframes will be automatically added if an object is modified while the playhead is over a point on the frame without a keyframe. +- **TODO** copy paste tweens +- **TODO** easing +- **TODO** rotations +- Tweening of all transformations (x, y, scale, rotation) is possible, as well as opacity. + +###Sounds + +**TODO** + +###Playhead + +- Move the playhead by dragging it, or by using the `<` and `>` keys. +- Clicking on a frame will jump the playhead to that frame. +- Play the whole timeline by clicking the `Play Preview` button, or by pressing `Enter` +- Loop the timeline by holding `Shift` and clicking the `Play Preview` button, or by pressing `Shift` + `Enter` +- Change the framerate that the timeline is played at in project settings + +###Layers + +- Create a layer with the `Add Layer` button +- Delete the current layer with the `Delete Layer` button +- Rename a layer by clicking on its name +- Layers can be locked by clicking the lock icon on that layer +- Layers can be hidden by clicking the eye icon in that layer +- Layers can be reordered by dragging them by the three lines icon on the left + +###Onion Skinning + +- Click the onion icon to enable onion skinning +- Control how many frames are shown in onion skin by dragging the edges of the box near the playhead. + +##Groups + +Create a group by + +##Clips + +Create a clip by + +Edit timeline + +Start frame +Play once/twice/loop forever +Autoplay? + +##Buttons + +Create a button by +Edit button states + +##Breadcrumbs + +##Inspector + +##Asset Library + +##Import + +###Images + +Import images by dragging them into the editor or by selecting `Import` -> `Image` in the menu bar. + +_Supported image types:_ + +- `PNG` +- `JPEG` +- `BMP` +- `TIFF` +- `GIF` (_Animated GIFs are converted into clips with all the frames of the original GIF_) + +###Sounds + +Import sounds by dragging them into the editor or by selecting `Import` -> `Sound` in the menu bar. + +_Supported sound file types:_ + +- `mp3` +- `wav` +- `ogg` + +###SVG + +Import SVGs by dragging them into the editor or by selecting `Import` -> `SVG` in the menu bar. + +##Saving Projects + +### Autosave + +- Projects are "autosaved" every time you run your project. +- __Autosaved projects are deleted when you clear your browser cache.__ It is recommended to save your projects as .wick files as often as possible. + +### .wick file format + +- A .wick file contains a wick project. +- .wick files can be opened in the editor by dragging them into the browser window, or by clicking `File` -> `Open Project` and selecting them. + +##Exporting Projects + +### .zip archive + +- `File` -> `Export ZIP Archive` +- Most Flash/HTML5 game websites accept `.zip` files. + +### .html file + +- `File` -> `Export HTML File` +- HTML files can be opened by all web browsers and can play the wick project inside. +- HTML files can easily be embedded inside another webpage (see `Embedding Projects`) + +### Animated GIF + +- `File` -> `Export Animated GIF` +- Scripts do not work in animated GIFs, only the animation will play. + +### Video + +- `File` -> `Export Video` +- Choose quality (Low, Medium, High, or Ultra) +- Videos are exported as `mp4` files using the `mpeg4` codec. + +##Embedding Projects + +###Embedding an HTML file + +You can embed a wick project exported as an HTML file by using an iframe. + +_Example:_ + +`` + +###Embedding a .wick file + +To embed a .wick file, you will need the wick player html file. Download it **TODO** here. + +Then embed the player in an iframe and add the filename of your project with an `#` after `player.html` as shown here: + +`` + +##Scripting Window + +##Writing Scripts + +##Script Reference + +###Events + +Name | Description +--- | --- +`on(update)` | TODO +`on(load)` | TODO +`on(click)` | TODO + +###Timeline + +Name | Description +--- | --- +`play()` | TODO +`stop()` | TODO +`gotoAndStop(frame)` | TODO +`gotoAndPlay(frame)` | TODO +`gotoNextFrame()` | TODO +`gotoPrevFrame()` | TODO + +###All Objects Attributes + +Name | Description +--- | --- +`x` | TODO +`y` | TODO +`scaleX` | TODO +`scaleY` | TODO +`rotation` | TODO +`flipX` | TODO +`flipY` | TODO +`opacity` | TODO +`currentFrameName` | TODO + +###Clip Attributes +Name | Description +--- | --- +`currentPlayheadPosition` | TODO +`clones` | TODO + +###Object Methods + +Name | Description +--- | --- +`clone()` | TODO +`hitTest(object)` | TODO + +###Mouse Input + +Name | Description +--- | --- +`mouseX` | TODO +`mouseY` | TODO +`mouseMoveX` | TODO +`mouseMoveY` | TODO + +###Keyboard Input + +Name | Description +--- | --- +`keyIsDown(key)` | TODO +`keyJustPressed(key)` | TODO + +###Keyboard Keys + +Name | Description +--- | --- +`KEY_0` | TODO + +###Sound + +Name | Description +--- | --- +`playSound(filename)` | TODO +`stopAllSounds()` | TODO +`mute()` | TODO +`unmute()` | TODO + +##Builtin Player + +- Play your project in the builtin player by clicking the `Run` button in the menu bar or by pressing `Modifier` + `Enter`. +- Close the builtin player by clicking the X in the top right corner or by pressing `Escape`. +- If script errors happen inside the builtin player, the player will close and the editor will show you where the error happened by selecting the object or frame that caused the error. +- You can run the builtin player in a new window by pressing `Modifier` + `Shift` + `Enter`, but errors will not be shown in the editor. \ No newline at end of file From b0990f12874a2b68c2fa6a0e4dc2751b1baf33b7 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Tue, 17 Apr 2018 11:25:33 -0400 Subject: [PATCH 06/37] Update HOWTO page --- HOWTO.md | 208 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 114 insertions(+), 94 deletions(-) diff --git a/HOWTO.md b/HOWTO.md index c2a3add9..b42b3720 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -1,27 +1,35 @@ -#Wick Editor v16 +# Wick Editor v16 -##Canvas +**Note:** The `Modifier` key in this document refers to the `Control` key in Windows, and the `Command` key on MacOS. + +## Canvas - Pan canvas with `Spacebar` - Zoom in and out with `+` and `-` keys - Zoom in and out with `Modifier` + `Scroll` + - You can also zoom in and out with the plus and minus buttons below the timeline. This is also where you can select the percent at which to zoom. - Reset canvas zoom level to 100% with `Modifier` + `0` - Canvas color can be changed in project settings - Canvas dimensions (width/height) can be changed in project settings -###Undo/Redo +### Undo/Redo - Undo any action by clicking `Edit` -> `Undo` or by pressing `Modifier` + `Z` - Redo any action by clicking `Edit` -> `Redo` or by pressing `Modifier` + `Shift` + `Z` -###Copy/Cut/Paste/Delete +### Copy/Cut/Paste/Delete - Copy object(s) by pressing `Modifier`+`C` or by clicking `Edit` -> `Copy` in the menu bar - Cut object(s) by pressing `Modifier`+`X` or by clicking `Edit` -> `Cut` in the menu bar - Paste object(s) by pressing `Modifier`+`V` or by clicking `Edit` -> `Paste` in the menu bar - Cut object(s) by pressing `Delete` or `Backspace`, or by clicking `Edit` -> `Delete` in the menu bar +- Duplicate object(s) by pressing `Modifier` + `D` or or right clicking and selecting `Duplicate Object(s)`. + +### Ordering + +**TODO** -##Tools +## Tools ### Selection Cursor @@ -141,9 +149,9 @@ Rectangle settings -##Timeline +## Timeline -###Frames +### Frames - To add a frame, double click an empty space on the timeline or right click and select `Add Frame` - Select frames by clicking and dragging, all frames inside the selection box will be selected. @@ -151,23 +159,22 @@ Rectangle settings - Move frame(s) by clicking and dragging selected frames - Change the duration of frame(s) by dragging the left or right edges of the selection box -###Tweens +### Tweens - Create a motion tween on a frame by right clicking a frame and selecting `Create Motion Tween`. - If there are multiple objects on the frame when a motion tween is created, they will be automatically grouped into a single object. - Create keyframes by right clicking and selecting `Insert Keyframe`. - Copy and paste keyframes by right clicking a keyframe and selecting `Copy Keyframe` or `Paste Keyframe`. - Keyframes will be automatically added if an object is modified while the playhead is over a point on the frame without a keyframe. -- **TODO** copy paste tweens -- **TODO** easing -- **TODO** rotations +- You can change the "easing" of a tween in the Inspector. The current options are `None`, `Ease In`, `Ease Out`, and `Ease In-Out`. +- If you want to rotate an object 360 degrees or more in a tween, use the `Number of Rotations` value in the Inspector. _Note: You can rotate objects counter-clockwise by using a negative value here._ - Tweening of all transformations (x, y, scale, rotation) is possible, as well as opacity. -###Sounds +### Sounds **TODO** -###Playhead +### Playhead - Move the playhead by dragging it, or by using the `<` and `>` keys. - Clicking on a frame will jump the playhead to that frame. @@ -175,7 +182,7 @@ Rectangle settings - Loop the timeline by holding `Shift` and clicking the `Play Preview` button, or by pressing `Shift` + `Enter` - Change the framerate that the timeline is played at in project settings -###Layers +### Layers - Create a layer with the `Add Layer` button - Delete the current layer with the `Delete Layer` button @@ -184,39 +191,39 @@ Rectangle settings - Layers can be hidden by clicking the eye icon in that layer - Layers can be reordered by dragging them by the three lines icon on the left -###Onion Skinning +### Onion Skinning - Click the onion icon to enable onion skinning - Control how many frames are shown in onion skin by dragging the edges of the box near the playhead. -##Groups +## Groups Create a group by +Edit group by double clicking or right clicking +Leave group by using breadcrumbs or by double clicking -##Clips +## Clips Create a clip by -Edit timeline +Clips have their own timelines + +Edit timeline by double clicking or right clicking +Leave button timeline by using breadcrumbs or by double clicking Start frame Play once/twice/loop forever Autoplay? -##Buttons +## Buttons Create a button by -Edit button states - -##Breadcrumbs +Edit button states double clicking or right clicking +Leave button timeline by using breadcrumbs or by double clicking -##Inspector +## Import -##Asset Library - -##Import - -###Images +### Images Import images by dragging them into the editor or by selecting `Import` -> `Image` in the menu bar. @@ -228,7 +235,7 @@ _Supported image types:_ - `TIFF` - `GIF` (_Animated GIFs are converted into clips with all the frames of the original GIF_) -###Sounds +### Sounds Import sounds by dragging them into the editor or by selecting `Import` -> `Sound` in the menu bar. @@ -238,71 +245,27 @@ _Supported sound file types:_ - `wav` - `ogg` -###SVG +### SVG Import SVGs by dragging them into the editor or by selecting `Import` -> `SVG` in the menu bar. -##Saving Projects - -### Autosave - -- Projects are "autosaved" every time you run your project. -- __Autosaved projects are deleted when you clear your browser cache.__ It is recommended to save your projects as .wick files as often as possible. - -### .wick file format - -- A .wick file contains a wick project. -- .wick files can be opened in the editor by dragging them into the browser window, or by clicking `File` -> `Open Project` and selecting them. - -##Exporting Projects - -### .zip archive - -- `File` -> `Export ZIP Archive` -- Most Flash/HTML5 game websites accept `.zip` files. - -### .html file - -- `File` -> `Export HTML File` -- HTML files can be opened by all web browsers and can play the wick project inside. -- HTML files can easily be embedded inside another webpage (see `Embedding Projects`) - -### Animated GIF - -- `File` -> `Export Animated GIF` -- Scripts do not work in animated GIFs, only the animation will play. - -### Video - -- `File` -> `Export Video` -- Choose quality (Low, Medium, High, or Ultra) -- Videos are exported as `mp4` files using the `mpeg4` codec. - -##Embedding Projects - -###Embedding an HTML file - -You can embed a wick project exported as an HTML file by using an iframe. +### Asset Library -_Example:_ - -`` - -###Embedding a .wick file +**TODO** -To embed a .wick file, you will need the wick player html file. Download it **TODO** here. +## Scripting Window -Then embed the player in an iframe and add the filename of your project with an `#` after `player.html` as shown here: +**TODO** -`` +## Writing Scripts -##Scripting Window +**TODO** -##Writing Scripts +## Script Reference -##Script Reference +**TODO** -###Events +### Events Name | Description --- | --- @@ -310,7 +273,7 @@ Name | Description `on(load)` | TODO `on(click)` | TODO -###Timeline +### Timeline Name | Description --- | --- @@ -321,7 +284,7 @@ Name | Description `gotoNextFrame()` | TODO `gotoPrevFrame()` | TODO -###All Objects Attributes +### All Objects Attributes Name | Description --- | --- @@ -335,20 +298,21 @@ Name | Description `opacity` | TODO `currentFrameName` | TODO -###Clip Attributes +### Clip Attributes + Name | Description --- | --- `currentPlayheadPosition` | TODO `clones` | TODO -###Object Methods +### Object Methods Name | Description --- | --- `clone()` | TODO `hitTest(object)` | TODO -###Mouse Input +### Mouse Input Name | Description --- | --- @@ -357,20 +321,20 @@ Name | Description `mouseMoveX` | TODO `mouseMoveY` | TODO -###Keyboard Input +### Keyboard Input Name | Description --- | --- `keyIsDown(key)` | TODO `keyJustPressed(key)` | TODO -###Keyboard Keys +### Keyboard Keys Name | Description --- | --- -`KEY_0` | TODO +`KEY_A` | TODO -###Sound +### Sound Name | Description --- | --- @@ -379,9 +343,65 @@ Name | Description `mute()` | TODO `unmute()` | TODO -##Builtin Player +## Saving Projects + +### Autosave + +- Projects are "autosaved" every time you run your project. +- You can also force an autosave by clicking on the title of the project in the top-left corner of the screen, or by pressing `Modifier` + `Shift` + `S`. +- __Autosaved projects are deleted when you clear your browser cache.__ It is recommended to save your projects as .wick files as often as possible. + +### .wick file format + +- A .wick file is the native filetype for Wick projects. +- .wick files can be opened in the editor by dragging them into the browser window, or by clicking `File` -> `Open Project` and selecting them. + +##Exporting Projects + +### .zip archive + +- `File` -> `Export ZIP Archive` +- The exported .zip archive will contain the Wick Player bundled into an html file named `index.html`, as well as your project named `wick-project.wick`. +- Most Flash/HTML5 game websites accept `.zip` files in this format. + +### .html file + +- `File` -> `Export HTML File` +- HTML files can be opened by all web browsers and can play the Wick project inside. +- HTML files can easily be embedded inside another webpage (see `Embedding Projects`) + +### Animated GIF + +- `File` -> `Export Animated GIF` +- Scripts do not work in animated GIFs, only the animation will play. + +### Video + +- `File` -> `Export Video` +- Choose quality (Low, Medium, High, or Ultra) +- Videos are exported as `mp4` files using the `mpeg4` codec. + +## Builtin Player - Play your project in the builtin player by clicking the `Run` button in the menu bar or by pressing `Modifier` + `Enter`. - Close the builtin player by clicking the X in the top right corner or by pressing `Escape`. - If script errors happen inside the builtin player, the player will close and the editor will show you where the error happened by selecting the object or frame that caused the error. -- You can run the builtin player in a new window by pressing `Modifier` + `Shift` + `Enter`, but errors will not be shown in the editor. \ No newline at end of file +- You can run the builtin player in a new window by pressing `Modifier` + `Shift` + `Enter`, but errors will not be shown in the editor. + +## Embedding Projects + +### Embedding an HTML file + +You can embed a Wick project exported as an HTML file by using an iframe. + +_Example:_ + +`` + +### Embedding a .wick file + +To embed a .wick file, you will need the Wick Player html file. Download it **TODO** here. + +Then embed the player in an iframe and add the filename of your project with an `#` after `player.html` as shown here: + +`` \ No newline at end of file From 96c57a3218d35b6a8442245bcaff88c8ccea74fe Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Wed, 18 Apr 2018 09:47:48 -0400 Subject: [PATCH 07/37] Fix #847 (buttons can be clicked through) --- HOWTO.md | 83 +++++++++++++++++++-------- src/player/WickPlayer.InputHandler.js | 2 +- 2 files changed, 60 insertions(+), 25 deletions(-) diff --git a/HOWTO.md b/HOWTO.md index b42b3720..837d57d4 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -2,6 +2,11 @@ **Note:** The `Modifier` key in this document refers to the `Control` key in Windows, and the `Command` key on MacOS. +## Brower Support + +- All features of the Wick Editor are supported in Firefox and Chrome. +- All features of the Wick Player are supported by most major browsers, including mobile browsers. + ## Canvas - Pan canvas with `Spacebar` @@ -29,7 +34,11 @@ **TODO** -## Tools +## Toolbar + +### Color Picker + +**TODO** ### Selection Cursor @@ -159,21 +168,6 @@ Rectangle settings - Move frame(s) by clicking and dragging selected frames - Change the duration of frame(s) by dragging the left or right edges of the selection box -### Tweens - -- Create a motion tween on a frame by right clicking a frame and selecting `Create Motion Tween`. -- If there are multiple objects on the frame when a motion tween is created, they will be automatically grouped into a single object. -- Create keyframes by right clicking and selecting `Insert Keyframe`. -- Copy and paste keyframes by right clicking a keyframe and selecting `Copy Keyframe` or `Paste Keyframe`. -- Keyframes will be automatically added if an object is modified while the playhead is over a point on the frame without a keyframe. -- You can change the "easing" of a tween in the Inspector. The current options are `None`, `Ease In`, `Ease Out`, and `Ease In-Out`. -- If you want to rotate an object 360 degrees or more in a tween, use the `Number of Rotations` value in the Inspector. _Note: You can rotate objects counter-clockwise by using a negative value here._ -- Tweening of all transformations (x, y, scale, rotation) is possible, as well as opacity. - -### Sounds - -**TODO** - ### Playhead - Move the playhead by dragging it, or by using the `<` and `>` keys. @@ -191,6 +185,21 @@ Rectangle settings - Layers can be hidden by clicking the eye icon in that layer - Layers can be reordered by dragging them by the three lines icon on the left +### Tweens + +- Create a motion tween on a frame by right clicking a frame and selecting `Create Motion Tween`. +- If there are multiple objects on the frame when a motion tween is created, they will be automatically grouped into a single object. +- Create keyframes by right clicking and selecting `Insert Keyframe`. +- Copy and paste keyframes by right clicking a keyframe and selecting `Copy Keyframe` or `Paste Keyframe`. +- Keyframes will be automatically added if an object is modified while the playhead is over a point on the frame without a keyframe. +- You can change the "easing" of a tween in the Inspector. The current options are `None`, `Ease In`, `Ease Out`, and `Ease In-Out`. +- If you want to rotate an object 360 degrees or more in a tween, use the `Number of Rotations` value in the Inspector. _Note: You can rotate objects counter-clockwise by using a negative value here._ +- Tweening of all transformations (x, y, scale, rotation) is possible, as well as opacity. + +### Sounds + +**TODO** + ### Onion Skinning - Click the onion icon to enable onion skinning @@ -215,11 +224,14 @@ Start frame Play once/twice/loop forever Autoplay? +Asset dropdown + ## Buttons Create a button by Edit button states double clicking or right clicking Leave button timeline by using breadcrumbs or by double clicking +Asset dropdown ## Import @@ -229,11 +241,10 @@ Import images by dragging them into the editor or by selecting `Import` -> `Imag _Supported image types:_ -- `PNG` -- `JPEG` -- `BMP` -- `TIFF` -- `GIF` (_Animated GIFs are converted into clips with all the frames of the original GIF_) +- `png` +- `jpeg` +- `bmp` +- `gif` (_Animated GIFs are converted into clips with all the frames of the original GIF_) ### Sounds @@ -255,16 +266,39 @@ Import SVGs by dragging them into the editor or by selecting `Import` -> `SVG` i ## Scripting Window -**TODO** +Autocomplete +Reference Section +Syntax Errors +Runtime Errors ## Writing Scripts +### Events + **TODO** -## Script Reference +### Function Calls **TODO** +### Variables + +**TODO** + +### If Statements + +**TODO** + +## Script Reference + +### Scope + +Name | Description +--- | --- +`this` | TODO +`parent` | TODO +`root` | TODO + ### Events Name | Description @@ -296,13 +330,13 @@ Name | Description `flipX` | TODO `flipY` | TODO `opacity` | TODO -`currentFrameName` | TODO ### Clip Attributes Name | Description --- | --- `currentPlayheadPosition` | TODO +`currentFrameName` | TODO `clones` | TODO ### Object Methods @@ -310,6 +344,7 @@ Name | Description Name | Description --- | --- `clone()` | TODO +`delete()` | TODO `hitTest(object)` | TODO ### Mouse Input diff --git a/src/player/WickPlayer.InputHandler.js b/src/player/WickPlayer.InputHandler.js index a7e6f960..03cd94ec 100644 --- a/src/player/WickPlayer.InputHandler.js +++ b/src/player/WickPlayer.InputHandler.js @@ -226,7 +226,7 @@ WickPlayerInputHandler = function (canvasContainer, wickProject) { var clickedObj; wickProject.rootObject.getAllActiveChildObjectsRecursive(true).forEachBackwards(function(child) { - if(!(clickedObj && clickedObj.isButton) && child.isPointInside(self.getMouse())) { + if(!clickedObj && child.mousePressed && child.isPointInside(self.getMouse())) { child._wasClicked = true; child._beingClicked = true; clickedObj = child; From fe0af1249064c9c447ee87a8198d9ca064cb456c Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Fri, 20 Apr 2018 19:25:30 -0400 Subject: [PATCH 08/37] Fix event finder regex bug, add asset source for images to inspector --- HOWTO.md | 326 ++++++++++-------- lib/ace/worker-javascript.js | 2 +- .../Interfaces.Inspector.Properties.js | 25 ++ src/editor/interfaces/Interfaces.Library.js | 4 +- src/player/WickPlayer.InputHandler.js | 3 +- src/project/WickProject.AssetLibrary.js | 5 - src/project/WickProject.js | 3 +- 7 files changed, 215 insertions(+), 153 deletions(-) diff --git a/HOWTO.md b/HOWTO.md index 837d57d4..0d91373e 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -32,13 +32,30 @@ ### Ordering -**TODO** +- Move object(s) forward by right clicking and selecting `Move Forwards` or pressing `Modifier` + `Up` +- Move object(s) backwards by right clicking and selecting `Move Backwards` or pressing `Modifier` + `Down` +- Move object(s) to the front by right clicking and selecting `Move To Front` or pressing `Modifier` + `Shift` + `Up` +- Move object(s) to the back by right clicking and selecting `Move To Back` or pressing `Modifier` + `Shift` + `Down` + +### Snapping + +- Snapping can be enabled in the Inspector when a cursor tool is selected (Selection Cursor or Path Cursor). + +_Snap Align_ + + - Enables selections to snap to nearby objects. Useful for lining things up precicely. ## Toolbar ### Color Picker -**TODO** +- Click either box to change the current fill or stroke color. +- The filled box changes the fill color, and the unfilled box changes the stroke color. +- The default pallete contains twelve basic colors. +- The color picker saves the last six colors used below the default pallete. +- Click and drag the largest square to change the saturation and lightness of the current color. +- Click and drag the vertical rectangle to change the hue of the current color. +- Click and drag the horizontal rectangle to change to opacity of the current color. ### Selection Cursor @@ -63,100 +80,90 @@ _Modifying selections_ _Making selections_ -
      -
    • Drag to select objects touching box
      • -
    • Alt+drag to select objects only inside box
      • -
    -Modifying selections -
      -
    • Drag points to move points
      • -
    • Click stroke to add new point
      • -
    • Double click to straighten/smooth points
      • -
    • Command+click to remove points
      • -
    • Drag handles to change curves
      • - -Brush settings -
        -
      • Change fill color to set brush color
        • -
      • Change brush size in inspector
        • -
      • Change smoothness in inspector
        • -
      - -Pencil settings -
        -
      • Change stroke color to set pencil color
        • -
      • Change stroke width in inspector
        • -
      • Change smoothness in inspector
        • -
      - -
      - Change colors of shapes - Fill holes -
      - -Rectangle settings -
        -
      • Change corner roundness in inspector
        • -
      - - -
      Ellipse
      -
      - Draws circles -
      - -
      Line
      -
      - Draws lines -
      - -
      -
      Pen
      -
      - Click and drag to create points and curves - Click first point to close shape - Click the ends of an existing shape to add more curves to that shape -
      -
      -
      - -
      -
      Eyedropper
      -
      - Picks colors -
      -
      -
      - -
      -
      Text
      -
      - Click to create a text box - Double click any text to edit it - Text options in inspector -
      -
      -
      - -
      -
      Zoom
      -
      - Click to zoom in - Alt+click to zoom out - Drag to zoom into a section of the screen - Also can use + and - to zoom - Also can command+scroll to zoom - Also can use zoom box thing near timeline -
      -
      -
      - -
      -
      Pan
      -
      - Click and drag to pan -
      -
      +- Click any path to select it +- Drag to select paths touching the selection box +- Alt+drag to select objects strictly inside the selection box + +_Modifying Path Segments_ + +- Click and drag points to move them +- Click on a stroke to add a point on that part of the stroke +- Hold `Modifier` and click a point to remove it + +_Modifying Path Curves_ + +- Double click a path to straighten and smooth its curves +- Drag handles to change curvature of strokes + +### Brush + +_Brush Options_ + +- Color + - The brush uses the current fill color as its drawing color. +- Size +- Smoothness +- Stabilizer Level +- Pressure Sensitivity Enabled +- Pressure Sensitivity Level + - A higher Pressure Sensitivity level makes the pressure from a tablet have more impact on the size of the brush. +- Blob Detail + - A higher Blob Detail value will give your strokes more detail when they are converted to paths, but will make drawing strokes slower. + +### Pencil + +_Pencil Options_ + +- Color + - The pencil uses the current stroke color as its drawing color. +- Stroke width +- Smoothness + +### Fill Bucket + +- Click any path to change it's fill or stroke color +- Click any holes created by paths to fill that hole + +### Rectangle + +- Click and drag to draw a rectangle +- Hold shift while dragging to draw a perfect square +- Change corner roundness in inspector + +### Ellipse + +- Click and drag to draw an ellipse +- Hold shift while dragging to draw a perfect circle + +### Line + +- Click and drag to draw a line +- Hold shift while dragging to draw horizontal/vertical/diagonal line + +### Pen + +- Click to create a new point +- Click and drag to create a new point and change it's curvature +- Click first point to close shape +- Click the ends of an existing shape to add more curves to that shape + +### Eyedropper + +- Click any path to set the current fill or stroke color to that path's color. + +### Text + +**DESIGN TODO** + +### Zoom + +- Click to zoom in +- Hold `Alt` and click to zoom out +- Click and drag, draw a rectangle, and release to zoom into a section of the screen + +### Pan + +- Click and drag to pan ## Timeline @@ -205,15 +212,43 @@ Rectangle settings - Click the onion icon to enable onion skinning - Control how many frames are shown in onion skin by dragging the edges of the box near the playhead. -## Groups +## Wick Objects + +all wick objects have **TODO** + +### Paths + +**TODO** + +### Images + +**TODO** + +### Text + +- static +- dynamic + +### Groups Create a group by Edit group by double clicking or right clicking Leave group by using breadcrumbs or by double clicking -## Clips +### Buttons + +Create a button by +The button is added to the asset library +A "library link" is added - to remove/change it, use the dropdown menu in the inspector + +Edit button states double clicking or right clicking +Leave button timeline by using breadcrumbs or by double clicking + +### Clips Create a clip by +The clip is added to the asset library +A "library link" is added - to remove/change it, use the dropdown menu in the inspector Clips have their own timelines @@ -224,15 +259,6 @@ Start frame Play once/twice/loop forever Autoplay? -Asset dropdown - -## Buttons - -Create a button by -Edit button states double clicking or right clicking -Leave button timeline by using breadcrumbs or by double clicking -Asset dropdown - ## Import ### Images @@ -273,21 +299,36 @@ Runtime Errors ## Writing Scripts +Clips and buttons can be scripted + +### Object Access + +- named objects +- 'root' and 'parent' + ### Events -**TODO** +- use events to run code only when a certain event happens, such as when an object is clicked, or when an object is first loaded ### Function Calls -**TODO** +- calling fuctions is like giving a command +- they can have options, too (arguments) ### Variables -**TODO** +- store information by using variables +- objects have many builtin variables +- you can make your own variables too +- put variables that you want to access everywhere in `root` ### If Statements -**TODO** +- use if statements to run code only if certain parameters are met + +### For Loops / For In (?) + +**DESIGN WIP** ## Script Reference @@ -299,14 +340,6 @@ Name | Description `parent` | TODO `root` | TODO -### Events - -Name | Description ---- | --- -`on(update)` | TODO -`on(load)` | TODO -`on(click)` | TODO - ### Timeline Name | Description @@ -317,8 +350,29 @@ Name | Description `gotoAndPlay(frame)` | TODO `gotoNextFrame()` | TODO `gotoPrevFrame()` | TODO +`currentFrameNumber` | TODO +`currentFrameName` | TODO + +### Events + +**TODO** Note mobile equivalents -### All Objects Attributes +Name | Description +--- | --- +`on(update)` | TODO +`on(load)` | TODO +`on(click)` | TODO +`on(mousedown)` | TODO +`on(mouseup)` | TODO +`on(mouseenter)` | TODO +`on(mouseleave)` | TODO +`on(mousehover)` | TODO +`on(mousedrag)` | TODO +`on(keypressed)` | TODO +`on(keydown)` | TODO +`on(keyup)` | TODO + +### Wick Object Attributes Name | Description --- | --- @@ -331,21 +385,12 @@ Name | Description `flipY` | TODO `opacity` | TODO -### Clip Attributes - -Name | Description ---- | --- -`currentPlayheadPosition` | TODO -`currentFrameName` | TODO -`clones` | TODO - -### Object Methods +### Wick Object Methods Name | Description --- | --- -`clone()` | TODO +`hitTest()` | TODO `delete()` | TODO -`hitTest(object)` | TODO ### Mouse Input @@ -360,23 +405,23 @@ Name | Description Name | Description --- | --- +`key` | TODO `keyIsDown(key)` | TODO `keyJustPressed(key)` | TODO -### Keyboard Keys +### Sound Name | Description --- | --- -`KEY_A` | TODO +`playSound(filename)` | TODO +`stopAllSounds()` | TODO -### Sound +### Creating Objects Name | Description --- | --- -`playSound(filename)` | TODO -`stopAllSounds()` | TODO -`mute()` | TODO -`unmute()` | TODO +`createInstanceOf(assetName)` | TODO +`getAllInstancesOf(assetName)` | TODO ## Saving Projects @@ -405,11 +450,6 @@ Name | Description - HTML files can be opened by all web browsers and can play the Wick project inside. - HTML files can easily be embedded inside another webpage (see `Embedding Projects`) -### Animated GIF - -- `File` -> `Export Animated GIF` -- Scripts do not work in animated GIFs, only the animation will play. - ### Video - `File` -> `Export Video` diff --git a/lib/ace/worker-javascript.js b/lib/ace/worker-javascript.js index 15972d05..4aa1aead 100755 --- a/lib/ace/worker-javascript.js +++ b/lib/ace/worker-javascript.js @@ -11779,7 +11779,7 @@ oop.inherits(JavaScriptWorker, Mirror); return this.sender.emit("annotate", []); // wick specific: add a semicolon to end of on(event) statements to squash missing ";" error - var onEventFinderRegex = /^on *\( *[a-zA-Z]+ *\)/g + var onEventFinderRegex = /^ *on *\( *[a-zA-Z]+ *\)/gm var m; do { m = onEventFinderRegex.exec(value, 'g'); diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index 3b10b745..6ec06a02 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -143,6 +143,31 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { } })); + properties.push(new InspectorInterface.SelectInput({ + title: '', + tooltip: 'Image', + optionsFn: function () { + var imageAssetFilenames = wickEditor.project.library.getAllAssets().filter(function (asset) { + return asset.type === 'image'; + }).map(function (asset) { + return asset.filename; + }); + return imageAssetFilenames; + }, + isActiveFn: function () { + return selectionInfo.type == 'wickobject' + && selectionInfo.dataType == 'image' + && selectionInfo.numObjects === 1; + }, + getValueFn: function () { + return wickEditor.project.library.getAsset(selectionInfo.object.assetUUID).filename; + }, + onChangeFn: function (val) { + console.error('!! Need action for this !!') + selectionInfo.object.assetUUID = wickEditor.project.library.getAssetByName(val).uuid + } + })); + properties.push(new InspectorInterface.SelectInput({ title: '', tooltip: 'Font Family', diff --git a/src/editor/interfaces/Interfaces.Library.js b/src/editor/interfaces/Interfaces.Library.js index 66900db6..29520469 100644 --- a/src/editor/interfaces/Interfaces.Library.js +++ b/src/editor/interfaces/Interfaces.Library.js @@ -110,11 +110,11 @@ var LibraryInterface = function (wickEditor) { } this.syncWithEditorState = function () { - if(this.dirty) { + //if(this.dirty) { this.dirty = false; this.clear(); this.populate(); - } + //} } this.populate = function () { diff --git a/src/player/WickPlayer.InputHandler.js b/src/player/WickPlayer.InputHandler.js index 03cd94ec..6aab92b0 100644 --- a/src/player/WickPlayer.InputHandler.js +++ b/src/player/WickPlayer.InputHandler.js @@ -226,7 +226,8 @@ WickPlayerInputHandler = function (canvasContainer, wickProject) { var clickedObj; wickProject.rootObject.getAllActiveChildObjectsRecursive(true).forEachBackwards(function(child) { - if(!clickedObj && child.mousePressed && child.isPointInside(self.getMouse())) { + var hasMousePressedScript = child.mousePressed && child.mousePressed.toString() !== 'function mousePressed(){return;}' + if(!clickedObj && hasMousePressedScript && child.isPointInside(self.getMouse())) { child._wasClicked = true; child._beingClicked = true; clickedObj = child; diff --git a/src/project/WickProject.AssetLibrary.js b/src/project/WickProject.AssetLibrary.js index bfc782aa..7dd8155a 100644 --- a/src/project/WickProject.AssetLibrary.js +++ b/src/project/WickProject.AssetLibrary.js @@ -32,17 +32,12 @@ AssetLibrary.prototype.addAsset = function (asset) { return uuid; } - - wickEditor.library.dirty = true; - } AssetLibrary.prototype.deleteAsset = function (uuid) { this.assets[uuid] = null; delete this.assets[uuid]; - - wickEditor.library.dirty = true; } diff --git a/src/project/WickProject.js b/src/project/WickProject.js index 1213b1f5..f5ff204f 100755 --- a/src/project/WickProject.js +++ b/src/project/WickProject.js @@ -699,7 +699,7 @@ WickProject.prototype.loadScriptOfObject = function (obj) { }); var scriptEventsReplaced = obj.wickScript; - var onEventFinderRegex = /^on *\( *[a-zA-Z]+ *\)/g + var onEventFinderRegex = /^ *on *\( *[a-zA-Z]+ *\)/gm var m; do { m = onEventFinderRegex.exec(scriptEventsReplaced, 'g'); @@ -735,6 +735,7 @@ WickProject.prototype.initScript = function (obj) { this.loadBuiltinFunctions(obj); try { obj.cachedWickScript(); + //obj.cachedWickScript.call(obj instanceof WickObject ? obj : obj.parentObject); } catch (e) { this.handleWickError(e,obj); } From dbbf01aa130d08bc3e908062f579768f357b1811 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Fri, 20 Apr 2018 22:58:11 -0400 Subject: [PATCH 09/37] Update HOWTO --- HOWTO.md | 92 +++++++++---------- .../Interfaces.Inspector.Properties.js | 8 +- 2 files changed, 47 insertions(+), 53 deletions(-) diff --git a/HOWTO.md b/HOWTO.md index 0d91373e..f1016a83 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -37,14 +37,6 @@ - Move object(s) to the front by right clicking and selecting `Move To Front` or pressing `Modifier` + `Shift` + `Up` - Move object(s) to the back by right clicking and selecting `Move To Back` or pressing `Modifier` + `Shift` + `Down` -### Snapping - -- Snapping can be enabled in the Inspector when a cursor tool is selected (Selection Cursor or Path Cursor). - -_Snap Align_ - - - Enables selections to snap to nearby objects. Useful for lining things up precicely. - ## Toolbar ### Color Picker @@ -153,7 +145,8 @@ _Pencil Options_ ### Text -**DESIGN TODO** +- Click and drag to create a text box +- Click text objects to edit them ### Zoom @@ -205,7 +198,7 @@ _Pencil Options_ ### Sounds -**TODO** +- Add a sound to a frame by dragging it from the asset library onto a frame, or by selecing a frame and choosing a sound from the dropdown menu in the Inspector. ### Onion Skinning @@ -214,46 +207,58 @@ _Pencil Options_ ## Wick Objects -all wick objects have **TODO** - ### Paths -**TODO** +- fill color +- stroke color +- stroke width +- boolean ops ### Images -**TODO** +- asset source ### Text -- static -- dynamic +- Font family +- Font size +- Font color +- Text align +- Bold +- Italic ### Groups -Create a group by -Edit group by double clicking or right clicking -Leave group by using breadcrumbs or by double clicking +- Create a group by right clicking wick object(s) and selecting `Group Objects` or by pressing `Modifier` + `G`. +- Edit group by double clicking or right clicking and selecting `Edit Group`. +- Leave group by using breadcrumbs or by double clicking +- Break apart a group by right clicking and selecting `Break Apart` or by pressing `Modifier` + `B` ### Buttons Create a button by -The button is added to the asset library -A "library link" is added - to remove/change it, use the dropdown menu in the inspector +(copy this part from clip section) +Button states Edit button states double clicking or right clicking -Leave button timeline by using breadcrumbs or by double clicking +Leave button by using breadcrumbs or by double clicking ### Clips -Create a clip by -The clip is added to the asset library -A "library link" is added - to remove/change it, use the dropdown menu in the inspector +_Creating a Clip_ -Clips have their own timelines +- Right click a selection of wick object(s) and select `Create Clip from Objects`. +- A dialog box will open up prompting you to name the new Clip +- You also have the option of creating an asset out of the new Clip. If you do, the new Clip will use that asset as its source. _(to change this later, select a different "clip resource" in the inspector)_ -Edit timeline by double clicking or right clicking -Leave button timeline by using breadcrumbs or by double clicking +_Clip timelines_ + +- Clips have their own timelines. +- Clip timelines run independently of the main timeline. +- Edit the timeline of a Clip by double clicking or right clicking the Clip and selecting `Edit Timeline`. +- Leave the timeline of the clip by using breadcrumbs or by double clicking the canvas. + +_Clip options_ Start frame Play once/twice/loop forever @@ -288,7 +293,10 @@ Import SVGs by dragging them into the editor or by selecting `Import` -> `SVG` i ### Asset Library -**TODO** +- All assets used in the project are stored in the Asset Library. +- Reorganize assets by clicking and dragging them. +- Rename assets by selecting an asset and clicking the `Rename Asset` button. +- Delete assets by selecting an asset and clicking the `Delete Asset` button. ## Scripting Window @@ -326,9 +334,13 @@ Clips and buttons can be scripted - use if statements to run code only if certain parameters are met +### Creating Objects Programmatically + ### For Loops / For In (?) -**DESIGN WIP** +use: + +`for (obj in getAllInstancesOf('thingy')) {` ## Script Reference @@ -355,8 +367,6 @@ Name | Description ### Events -**TODO** Note mobile equivalents - Name | Description --- | --- `on(update)` | TODO @@ -444,12 +454,6 @@ Name | Description - The exported .zip archive will contain the Wick Player bundled into an html file named `index.html`, as well as your project named `wick-project.wick`. - Most Flash/HTML5 game websites accept `.zip` files in this format. -### .html file - -- `File` -> `Export HTML File` -- HTML files can be opened by all web browsers and can play the Wick project inside. -- HTML files can easily be embedded inside another webpage (see `Embedding Projects`) - ### Video - `File` -> `Export Video` @@ -465,18 +469,8 @@ Name | Description ## Embedding Projects -### Embedding an HTML file - -You can embed a Wick project exported as an HTML file by using an iframe. - -_Example:_ - -`` - -### Embedding a .wick file - To embed a .wick file, you will need the Wick Player html file. Download it **TODO** here. -Then embed the player in an iframe and add the filename of your project with an `#` after `player.html` as shown here: +Then, embed the player in an iframe and add the filename of your project with an `#` after `player.html` as shown here: `` \ No newline at end of file diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index 6ec06a02..224434ba 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -145,7 +145,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.SelectInput({ title: '', - tooltip: 'Image', + tooltip: 'Image Resource', optionsFn: function () { var imageAssetFilenames = wickEditor.project.library.getAllAssets().filter(function (asset) { return asset.type === 'image'; @@ -545,7 +545,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.SelectInput({ title: '', - tooltip: 'Sound', + tooltip: 'Sound Resource', optionsFn: function () { var audioAssetFilenames = wickEditor.project.library.getAllAssets().filter(function (asset) { return asset.type === 'audio'; @@ -573,7 +573,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { } })); - properties.push(new InspectorInterface.SliderInput({ + /*properties.push(new InspectorInterface.SliderInput({ title: '', tooltip: 'Volume', min: 0, @@ -590,7 +590,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { onChangeFn: function (val) { selectionInfo.object.volume = parseFloat(val); } - })); + }));*/ properties.push(new InspectorInterface.MultiCheckboxInput({ title: '', From 14028770974b35549a04fe837e0d6579357f398d Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Sat, 21 Apr 2018 19:25:29 -0400 Subject: [PATCH 10/37] update HOWTO --- HOWTO.md | 258 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 146 insertions(+), 112 deletions(-) diff --git a/HOWTO.md b/HOWTO.md index f1016a83..d978718c 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -205,21 +205,70 @@ _Pencil Options_ - Click the onion icon to enable onion skinning - Control how many frames are shown in onion skin by dragging the edges of the box near the playhead. +## Import + +### Images + +Import images by dragging them into the editor or by selecting `Import` -> `Image` in the menu bar. + +_Supported image types:_ + +- `png` +- `jpeg` +- `bmp` +- `gif` (_Animated GIFs are converted into clips with all the frames of the original GIF_) + +### Sounds + +Import sounds by dragging them into the editor or by selecting `Import` -> `Sound` in the menu bar. + +_Supported sound file types:_ + +- `mp3` +- `wav` +- `ogg` + +### SVG + +Import SVGs by dragging them into the editor or by selecting `Import` -> `SVG` in the menu bar. + +### Asset Library + +- All assets used in the project are stored in the Asset Library. +- Reorganize assets by clicking and dragging them. +- Rename assets by selecting an asset and clicking the `Rename Asset` button. +- Delete assets by selecting an asset and clicking the `Delete Asset` button. + ## Wick Objects +All Wick Objects have the following attributes: + +- Position (x,y) +- Width +- Height +- Scale (x,y) +- Rotation (angle, 0-360) +- Opacity + ### Paths -- fill color -- stroke color -- stroke width -- boolean ops +_Attributes:_ + +- Fill color +- Stroke color +- Stroke width +- Boolean ops ### Images -- asset source +_Attributes:_ + +- Asset source ### Text +_Attributes:_ + - Font family - Font size - Font color @@ -236,12 +285,14 @@ _Pencil Options_ ### Buttons -Create a button by -(copy this part from clip section) +- Right click a selection of wick object(s) and select `Create Clip from Objects`. +- A dialog box will open up prompting you to name the new Clip +- An asset will be created out of the new Clip, and the new Clip will use that asset as its source. _(to change this later, select a different "clip resource" in the inspector)_ + +_Button Appearance_ -Button states -Edit button states double clicking or right clicking -Leave button by using breadcrumbs or by double clicking +- To change how a button appears when it interacts with the mouse, right click the button and select `Edit Button`. +- Create frames in the places where the timeline is labeled `Up`, `Over`, and `Down`. ### Clips @@ -249,7 +300,7 @@ _Creating a Clip_ - Right click a selection of wick object(s) and select `Create Clip from Objects`. - A dialog box will open up prompting you to name the new Clip -- You also have the option of creating an asset out of the new Clip. If you do, the new Clip will use that asset as its source. _(to change this later, select a different "clip resource" in the inspector)_ +- An asset will be created out of the new Clip, and the new Clip will use that asset as its source. _(to change this later, select a different "clip resource" in the inspector)_ _Clip timelines_ @@ -258,89 +309,72 @@ _Clip timelines_ - Edit the timeline of a Clip by double clicking or right clicking the Clip and selecting `Edit Timeline`. - Leave the timeline of the clip by using breadcrumbs or by double clicking the canvas. -_Clip options_ - -Start frame -Play once/twice/loop forever -Autoplay? - -## Import - -### Images - -Import images by dragging them into the editor or by selecting `Import` -> `Image` in the menu bar. - -_Supported image types:_ - -- `png` -- `jpeg` -- `bmp` -- `gif` (_Animated GIFs are converted into clips with all the frames of the original GIF_) +_Clip attributes_ -### Sounds +- Name (used in scripting - see `Writing Scripts` section.) +- Start frame +- Autoplay -Import sounds by dragging them into the editor or by selecting `Import` -> `Sound` in the menu bar. +__Note__ that the "root object" is actually a Clip that contains everything in the project. You can never leave the root object. -_Supported sound file types:_ - -- `mp3` -- `wav` -- `ogg` - -### SVG +## Writing Scripts -Import SVGs by dragging them into the editor or by selecting `Import` -> `SVG` in the menu bar. +Scripts can be added to Clips, Buttons, and Frames. -### Asset Library +With an Clip, Button, or Frame selected, open the Scripting Window by clicking the bar along the bottom of the editor. -- All assets used in the project are stored in the Asset Library. -- Reorganize assets by clicking and dragging them. -- Rename assets by selecting an asset and clicking the `Rename Asset` button. -- Delete assets by selecting an asset and clicking the `Delete Asset` button. +### Object Access -## Scripting Window +- You can access any named Clip by using its name. For example, to set some value of a Clip named "player", you would use a line of code like this: -Autocomplete -Reference Section -Syntax Errors -Runtime Errors +`player.rotation = 90` -## Writing Scripts +- You can access the object that the script belongs to using the keyword `this`. -Clips and buttons can be scripted +- You can access the root object of the project by using the keyword `root`. -### Object Access +- You can access the parent object of the current object by using the keyword `parent`. -- named objects -- 'root' and 'parent' +### Moving the Timeline Programmatically -### Events +- While a project is running, the playhead will automatically move forward once per "tick". Projects "tick" at the rate of the framerate +- (e.g. a project with a framerate of 12 will tick 12 times per second.) -- use events to run code only when a certain event happens, such as when an object is clicked, or when an object is first loaded +All timeline functions can be used on objects, such as: + +- `root.play()` +- `this.stop()` +- `yourOwnObject.gotoAndPlay(2)` -### Function Calls +as well as by themselves, where they will refer to the timeline where the script was added: -- calling fuctions is like giving a command -- they can have options, too (arguments) +- `play()` +- `gotoAndStop(2)` ### Variables -- store information by using variables -- objects have many builtin variables -- you can make your own variables too -- put variables that you want to access everywhere in `root` +- Store information in an object by using variables as shown: + - `this.level = 5` + - `player.isAlive = true` + - `player.name = "Slombo"` + - `root.numberOfBees = 10000` +- See all builtin variables below in the `Script Reference` section +- Tip: Put variables that you want to access everywhere in `root`. -### If Statements +### Events -- use if statements to run code only if certain parameters are met +- Use events to run code when a certain event happens, such as when an object is clicked, or when an object first appears onscreen. ### Creating Objects Programmatically -### For Loops / For In (?) +- You can create instances of Clips from the Asset Library programmatically by using `createInstanceOf()` with the name of the asset to use. Example: + +`enemy = createInstanceOf("Enemy")` -use: +### Errors -`for (obj in getAllInstancesOf('thingy')) {` +- If your script contains a syntax error, the project will not run until it is fixed. The Scripting Window will highlight the line that contains the syntax error. +- If a runtime error occurs while the project is running, the player will close, and the line that caused the error will be highlighted in the Scripting Window. ## Script Reference @@ -348,90 +382,90 @@ use: Name | Description --- | --- -`this` | TODO -`parent` | TODO -`root` | TODO +`this` | Refers to the Wick Object running the script. +`parent` | Refers to the parent of the Wick Object running the script. (This is `null` for the root object.) +`root` | Refers to the root object of the project. ### Timeline Name | Description --- | --- -`play()` | TODO -`stop()` | TODO -`gotoAndStop(frame)` | TODO -`gotoAndPlay(frame)` | TODO -`gotoNextFrame()` | TODO -`gotoPrevFrame()` | TODO -`currentFrameNumber` | TODO -`currentFrameName` | TODO +`play()` | Plays the timeline. +`stop()` | Stops the timeline. +`gotoAndStop(frame)` | Moves the timeline to the specified frame and stops the timeline. You can use a number to move the timeline to a certain position, or a string to move the timeline to a named frame. +`gotoAndPlay(frame)` | Moves the timeline to the specified frame and plays the timeline. You can use a number to move the timeline to a certain position, or a string to move the timeline to a named frame. +`gotoNextFrame()` | Moves the timeline to the next frame. +`gotoPrevFrame()` | Moves the timeline to the previous frame. +`currentFrameNumber` | The current frame number that the timeline is currently on. +`currentFrameName` | The current name of the frame that the timeline is currently on. If the timeline is on an unnamed frame, this value will be `null`. ### Events Name | Description --- | --- -`on(update)` | TODO -`on(load)` | TODO -`on(click)` | TODO -`on(mousedown)` | TODO -`on(mouseup)` | TODO -`on(mouseenter)` | TODO -`on(mouseleave)` | TODO -`on(mousehover)` | TODO -`on(mousedrag)` | TODO -`on(keypressed)` | TODO -`on(keydown)` | TODO -`on(keyup)` | TODO +`on(load)` | Runs once when the object/frame first appears onscreen. +`on(update)` | Runs once per tick that the object/frame is onscreen. +`on(click)` | Runs when the object/frame is clicked (i.e. a full press and release) +`on(mousedown)` | Runs when the object/frame is first pressed by the mouse. +`on(mouseup)` | Runs when mouse is released over the frame/object. +`on(mouseenter)` | Runs when the mouse first rolls over the frame/object. +`on(mouseleave)` | Runs when the mouse leaves the frame/object. +`on(mousehover)` | Runs every tick that the mouse is hovered over the frame/object. +`on(mousedrag)` | Runs every tick that the mouse is hovered over the frame/object while held down. +`on(keypressed)` | Runs when a key is pressed. +`on(keydown)` | Runs every tick that a key is held down. +`on(keyup)` | Runs when a key is released. ### Wick Object Attributes Name | Description --- | --- -`x` | TODO -`y` | TODO -`scaleX` | TODO -`scaleY` | TODO -`rotation` | TODO -`flipX` | TODO -`flipY` | TODO -`opacity` | TODO +`x` | The horizontal position of the object on the x-axis. +`y` | The vertical position of the object on the y-axis. +`scaleX` | The horizontal scale of the object. +`scaleY` | The vertical scale of the object. +`rotation` | The rotation of the object, in angles. +`flipX` | True if the object is mirrored horizontally, false otherwise. +`flipY` | True if the object is mirrored vertically, false otherwise. +`opacity` | Value from 0.0 to 1.0 where 0.0 is completely transparent, and 1.0 is completely opaque. ### Wick Object Methods Name | Description --- | --- -`hitTest()` | TODO -`delete()` | TODO +`hitTest(object)` | Returns `true` if the object collides with the speicified object. +`delete()` | Deletes the object. ### Mouse Input Name | Description --- | --- -`mouseX` | TODO -`mouseY` | TODO -`mouseMoveX` | TODO -`mouseMoveY` | TODO +`mouseX` | The position of the mouse on the x-axis. +`mouseY` | The position of the mouse on the y-axis. +`mouseMoveX` | The amount the mouse has moved on the x-axis. +`mouseMoveY` | The amount the mouse has moved on the y-axis. ### Keyboard Input Name | Description --- | --- -`key` | TODO -`keyIsDown(key)` | TODO -`keyJustPressed(key)` | TODO +`key` | The last key that was pressed/released/held down. +`keyIsDown(key)` | Returns true if the specified key is currently held down. +`keyJustPressed(key)` | Returns true if the specified key was pressed. ### Sound Name | Description --- | --- -`playSound(filename)` | TODO -`stopAllSounds()` | TODO +`playSound(filename)` | Plays the specified sound from the Asset Library. +`stopAllSounds()` | Stops all currently playing sounds. ### Creating Objects Name | Description --- | --- -`createInstanceOf(assetName)` | TODO -`getAllInstancesOf(assetName)` | TODO +`createInstanceOf(assetName)` | Creates a Clip using the specified asset as its source. +`getAllInstancesOf(assetName)` | Returns an array containing all objects onscreen that are instances of the specified asset. ## Saving Projects From 892555601353a609cde76afcf756bd913fef55b6 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 23 Apr 2018 20:20:04 -0400 Subject: [PATCH 11/37] Update brush, testing adding clips/buttons to the library --- HOWTO.md | 9 ++- index.html | 9 ++- lib/pixi.4.5.6.min.js | 22 ++++++ lib/potrace.js | 2 +- lib/webfont.js | 33 +++++++++ src/editor/WickEditor.GuiActionHandler.js | 26 ++++--- src/editor/WickEditor.WickActionHandler.js | 7 ++ src/editor/interfaces/Interfaces.Library.js | 6 +- src/editor/tools/Tools.Paintbrush.js | 30 ++++---- src/project/WickAsset.js | 2 +- src/project/WickObject.js | 78 +++++++++++++-------- src/project/WickProject.AssetLibrary.js | 2 + src/project/WickProject.Exporter.js | 4 +- 13 files changed, 165 insertions(+), 65 deletions(-) create mode 100644 lib/pixi.4.5.6.min.js create mode 100644 lib/webfont.js diff --git a/HOWTO.md b/HOWTO.md index d978718c..22c90d91 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -162,11 +162,12 @@ _Pencil Options_ ### Frames +**DESIGN TODO** + - To add a frame, double click an empty space on the timeline or right click and select `Add Frame` +- Change the length of frame(s) by dragging the edges left or right. - Select frames by clicking and dragging, all frames inside the selection box will be selected. - Delete selected frames by pressing `Delete` or right clicking and selecting `Delete Frame` -- Move frame(s) by clicking and dragging selected frames -- Change the duration of frame(s) by dragging the left or right edges of the selection box ### Playhead @@ -257,7 +258,9 @@ _Attributes:_ - Fill color - Stroke color - Stroke width -- Boolean ops +- Boolean Operations + - Unite: Combines two or more paths into one path. + - Subtract: Uses the topmost path to cut out a portion of other selected paths. ### Images diff --git a/index.html b/index.html index a8686ab7..e32dba67 100644 --- a/index.html +++ b/index.html @@ -79,11 +79,10 @@ - + - @@ -93,9 +92,9 @@ - - - + + + diff --git a/lib/pixi.4.5.6.min.js b/lib/pixi.4.5.6.min.js new file mode 100644 index 00000000..ec49011d --- /dev/null +++ b/lib/pixi.4.5.6.min.js @@ -0,0 +1,22 @@ +/*! + * pixi.js - v4.5.6 + * Compiled Wed, 20 Sep 2017 15:08:21 UTC + * + * pixi.js is licensed under the MIT License. + * http://www.opensource.org/licenses/mit-license + */ +!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.PIXI=t()}}(function(){var t;return function t(e,r,n){function i(s,a){if(!r[s]){if(!e[s]){var u="function"==typeof require&&require;if(!a&&u)return u(s,!0);if(o)return o(s,!0);var h=new Error("Cannot find module '"+s+"'");throw h.code="MODULE_NOT_FOUND",h}var l=r[s]={exports:{}};e[s][0].call(l.exports,function(t){var r=e[s][1][t];return i(r||t)},l,l.exports,t,e,r,n)}return r[s].exports}for(var o="function"==typeof require&&require,s=0;s0)-(t<0)},r.abs=function(t){var e=t>>31;return(t^e)-e},r.min=function(t,e){return e^(t^e)&-(t65535)<<4,t>>>=e,r=(t>255)<<3,t>>>=r,e|=r,r=(t>15)<<2,t>>>=r,e|=r,r=(t>3)<<1,t>>>=r,(e|=r)|t>>1},r.log10=function(t){return t>=1e9?9:t>=1e8?8:t>=1e7?7:t>=1e6?6:t>=1e5?5:t>=1e4?4:t>=1e3?3:t>=100?2:t>=10?1:0},r.popCount=function(t){return t-=t>>>1&1431655765,16843009*((t=(858993459&t)+(t>>>2&858993459))+(t>>>4)&252645135)>>>24},r.countTrailingZeros=n,r.nextPow2=function(t){return t+=0===t,--t,t|=t>>>1,t|=t>>>2,t|=t>>>4,t|=t>>>8,(t|=t>>>16)+1},r.prevPow2=function(t){return t|=t>>>1,t|=t>>>2,t|=t>>>4,t|=t>>>8,(t|=t>>>16)-(t>>>1)},r.parity=function(t){return t^=t>>>16,t^=t>>>8,t^=t>>>4,27030>>>(t&=15)&1};var i=new Array(256);!function(t){for(var e=0;e<256;++e){var r=e,n=e,i=7;for(r>>>=1;r;r>>>=1)n<<=1,n|=1&r,--i;t[e]=n<>>8&255]<<16|i[t>>>16&255]<<8|i[t>>>24&255]},r.interleave2=function(t,e){return t&=65535,t=16711935&(t|t<<8),t=252645135&(t|t<<4),t=858993459&(t|t<<2),t=1431655765&(t|t<<1),e&=65535,e=16711935&(e|e<<8),e=252645135&(e|e<<4),e=858993459&(e|e<<2),e=1431655765&(e|e<<1),t|e<<1},r.deinterleave2=function(t,e){return t=t>>>e&1431655765,t=858993459&(t|t>>>1),t=252645135&(t|t>>>2),t=16711935&(t|t>>>4),(t=65535&(t|t>>>16))<<16>>16},r.interleave3=function(t,e,r){return t&=1023,t=4278190335&(t|t<<16),t=251719695&(t|t<<8),t=3272356035&(t|t<<4),t=1227133513&(t|t<<2),e&=1023,e=4278190335&(e|e<<16),e=251719695&(e|e<<8),e=3272356035&(e|e<<4),e=1227133513&(e|e<<2),t|=e<<1,r&=1023,r=4278190335&(r|r<<16),r=251719695&(r|r<<8),r=3272356035&(r|r<<4),r=1227133513&(r|r<<2),t|r<<2},r.deinterleave3=function(t,e){return t=t>>>e&1227133513,t=3272356035&(t|t>>>2),t=251719695&(t|t>>>4),t=4278190335&(t|t>>>8),(t=1023&(t|t>>>16))<<22>>22},r.nextCombination=function(t){var e=t|t-1;return e+1|(~e&-~e)-1>>>n(t)+1}},{}],2:[function(t,e,r){"use strict";function n(t,e,r){r=r||2;var n=e&&e.length,o=n?e[0]*r:t.length,a=i(t,0,o,r,!0),u=[];if(!a)return u;var h,l,d,f,p,v,y;if(n&&(a=c(t,e,a,r)),t.length>80*r){h=d=t[0],l=f=t[1];for(var g=r;gd&&(d=p),v>f&&(f=v);y=Math.max(d-h,f-l)}return s(a,u,r,h,l,y),u}function i(t,e,r,n,i){var o,s;if(i===A(t,e,r,n)>0)for(o=e;o=e;o-=n)s=P(o,t[o],t[o+1],s);return s&&T(s,s.next)&&(C(s),s=s.next),s}function o(t,e){if(!t)return t;e||(e=t);var r,n=t;do{if(r=!1,n.steiner||!T(n,n.next)&&0!==x(n.prev,n,n.next))n=n.next;else{if(C(n),(n=e=n.prev)===n.next)return null;r=!0}}while(r||n!==e);return e}function s(t,e,r,n,i,c,d){if(t){!d&&c&&v(t,n,i,c);for(var f,p,y=t;t.prev!==t.next;)if(f=t.prev,p=t.next,c?u(t,n,i,c):a(t))e.push(f.i/r),e.push(t.i/r),e.push(p.i/r),C(t),t=p.next,y=p.next;else if((t=p)===y){d?1===d?(t=h(t,e,r),s(t,e,r,n,i,c,2)):2===d&&l(t,e,r,n,i,c):s(o(t),e,r,n,i,c,1);break}}}function a(t){var e=t.prev,r=t,n=t.next;if(x(e,r,n)>=0)return!1;for(var i=t.next.next;i!==t.prev;){if(_(e.x,e.y,r.x,r.y,n.x,n.y,i.x,i.y)&&x(i.prev,i,i.next)>=0)return!1;i=i.next}return!0}function u(t,e,r,n){var i=t.prev,o=t,s=t.next;if(x(i,o,s)>=0)return!1;for(var a=i.xo.x?i.x>s.x?i.x:s.x:o.x>s.x?o.x:s.x,l=i.y>o.y?i.y>s.y?i.y:s.y:o.y>s.y?o.y:s.y,c=g(a,u,e,r,n),d=g(h,l,e,r,n),f=t.nextZ;f&&f.z<=d;){if(f!==t.prev&&f!==t.next&&_(i.x,i.y,o.x,o.y,s.x,s.y,f.x,f.y)&&x(f.prev,f,f.next)>=0)return!1;f=f.nextZ}for(f=t.prevZ;f&&f.z>=c;){if(f!==t.prev&&f!==t.next&&_(i.x,i.y,o.x,o.y,s.x,s.y,f.x,f.y)&&x(f.prev,f,f.next)>=0)return!1;f=f.prevZ}return!0}function h(t,e,r){var n=t;do{var i=n.prev,o=n.next.next;!T(i,o)&&w(i,n,n.next,o)&&S(i,o)&&S(o,i)&&(e.push(i.i/r),e.push(n.i/r),e.push(o.i/r),C(n),C(n.next),n=t=o),n=n.next}while(n!==t);return n}function l(t,e,r,n,i,a){var u=t;do{for(var h=u.next.next;h!==u.prev;){if(u.i!==h.i&&b(u,h)){var l=M(u,h);return u=o(u,u.next),l=o(l,l.next),s(u,e,r,n,i,a),void s(l,e,r,n,i,a)}h=h.next}u=u.next}while(u!==t)}function c(t,e,r,n){var s,a,u,h,l,c=[];for(s=0,a=e.length;s=n.next.y){var a=n.x+(o-n.y)*(n.next.x-n.x)/(n.next.y-n.y);if(a<=i&&a>s){if(s=a,a===i){if(o===n.y)return n;if(o===n.next.y)return n.next}r=n.x=n.x&&n.x>=l&&_(or.x)&&S(n,t)&&(r=n,d=u),n=n.next;return r}function v(t,e,r,n){var i=t;do{null===i.z&&(i.z=g(i.x,i.y,e,r,n)),i.prevZ=i.prev,i.nextZ=i.next,i=i.next}while(i!==t);i.prevZ.nextZ=null,i.prevZ=null,y(i)}function y(t){var e,r,n,i,o,s,a,u,h=1;do{for(r=t,t=null,o=null,s=0;r;){for(s++,n=r,a=0,e=0;e0||u>0&&n;)0===a?(i=n,n=n.nextZ,u--):0!==u&&n?r.z<=n.z?(i=r,r=r.nextZ,a--):(i=n,n=n.nextZ,u--):(i=r,r=r.nextZ,a--),o?o.nextZ=i:t=i,i.prevZ=o,o=i;r=n}o.nextZ=null,h*=2}while(s>1);return t}function g(t,e,r,n,i){return t=32767*(t-r)/i,e=32767*(e-n)/i,t=16711935&(t|t<<8),t=252645135&(t|t<<4),t=858993459&(t|t<<2),t=1431655765&(t|t<<1),e=16711935&(e|e<<8),e=252645135&(e|e<<4),e=858993459&(e|e<<2),e=1431655765&(e|e<<1),t|e<<1}function m(t){var e=t,r=t;do{e.x=0&&(t-s)*(n-a)-(r-s)*(e-a)>=0&&(r-s)*(o-a)-(i-s)*(n-a)>=0}function b(t,e){return t.next.i!==e.i&&t.prev.i!==e.i&&!E(t,e)&&S(t,e)&&S(e,t)&&O(t,e)}function x(t,e,r){return(e.y-t.y)*(r.x-e.x)-(e.x-t.x)*(r.y-e.y)}function T(t,e){return t.x===e.x&&t.y===e.y}function w(t,e,r,n){return!!(T(t,e)&&T(r,n)||T(t,n)&&T(r,e))||x(t,e,r)>0!=x(t,e,n)>0&&x(r,n,t)>0!=x(r,n,e)>0}function E(t,e){var r=t;do{if(r.i!==t.i&&r.next.i!==t.i&&r.i!==e.i&&r.next.i!==e.i&&w(r,r.next,t,e))return!0;r=r.next}while(r!==t);return!1}function S(t,e){return x(t.prev,t,t.next)<0?x(t,e,t.next)>=0&&x(t,t.prev,e)>=0:x(t,e,t.prev)<0||x(t,t.next,e)<0}function O(t,e){var r=t,n=!1,i=(t.x+e.x)/2,o=(t.y+e.y)/2;do{r.y>o!=r.next.y>o&&i<(r.next.x-r.x)*(o-r.y)/(r.next.y-r.y)+r.x&&(n=!n),r=r.next}while(r!==t);return n}function M(t,e){var r=new R(t.i,t.x,t.y),n=new R(e.i,e.x,e.y),i=t.next,o=e.prev;return t.next=e,e.prev=t,r.next=i,i.prev=r,n.next=r,r.prev=n,o.next=n,n.prev=o,n}function P(t,e,r,n){var i=new R(t,e,r);return n?(i.next=n.next,i.prev=n,n.next.prev=i,n.next=i):(i.prev=i,i.next=i),i}function C(t){t.next.prev=t.prev,t.prev.next=t.next,t.prevZ&&(t.prevZ.nextZ=t.nextZ),t.nextZ&&(t.nextZ.prevZ=t.prevZ)}function R(t,e,r){this.i=t,this.x=e,this.y=r,this.prev=null,this.next=null,this.z=null,this.prevZ=null,this.nextZ=null,this.steiner=!1}function A(t,e,r,n){for(var i=0,o=e,s=r-n;o0&&(n+=t[i-1].length,r.holes.push(n))}return r}},{}],3:[function(t,e,r){"use strict";function n(){}function i(t,e,r){this.fn=t,this.context=e,this.once=r||!1}function o(){this._events=new n,this._eventsCount=0}var s=Object.prototype.hasOwnProperty,a="~";Object.create&&(n.prototype=Object.create(null),(new n).__proto__||(a=!1)),o.prototype.eventNames=function(){var t,e,r=[];if(0===this._eventsCount)return r;for(e in t=this._events)s.call(t,e)&&r.push(a?e.slice(1):e);return Object.getOwnPropertySymbols?r.concat(Object.getOwnPropertySymbols(t)):r},o.prototype.listeners=function(t,e){var r=a?a+t:t,n=this._events[r];if(e)return!!n;if(!n)return[];if(n.fn)return[n.fn];for(var i=0,o=n.length,s=new Array(o);i=0;n--){var i=t[n];"."===i?t.splice(n,1):".."===i?(t.splice(n,1),r++):r&&(t.splice(n,1),r--)}if(e)for(;r--;r)t.unshift("..");return t}function n(t,e){if(t.filter)return t.filter(e);for(var r=[],n=0;n=-1&&!i;o--){var s=o>=0?arguments[o]:t.cwd();if("string"!=typeof s)throw new TypeError("Arguments to path.resolve must be strings");s&&(r=s+"/"+r,i="/"===s.charAt(0))}return r=e(n(r.split("/"),function(t){return!!t}),!i).join("/"),(i?"/":"")+r||"."},r.normalize=function(t){var i=r.isAbsolute(t),o="/"===s(t,-1);return t=e(n(t.split("/"),function(t){return!!t}),!i).join("/"),t||i||(t="."),t&&o&&(t+="/"),(i?"/":"")+t},r.isAbsolute=function(t){return"/"===t.charAt(0)},r.join=function(){var t=Array.prototype.slice.call(arguments,0);return r.normalize(n(t,function(t,e){if("string"!=typeof t)throw new TypeError("Arguments to path.join must be strings");return t}).join("/"))},r.relative=function(t,e){function n(t){for(var e=0;e=0&&""===t[r];r--);return e>r?[]:t.slice(e,r-e+1)}t=r.resolve(t).substr(1),e=r.resolve(e).substr(1);for(var i=n(t.split("/")),o=n(e.split("/")),s=Math.min(i.length,o.length),a=s,u=0;u=t.byteLength?n.bufferSubData(this.type,e,t):n.bufferData(this.type,t,this.drawType),this.data=t},i.prototype.bind=function(){this.gl.bindBuffer(this.type,this.buffer)},i.createVertexBuffer=function(t,e,r){return new i(t,t.ARRAY_BUFFER,e,r)},i.createIndexBuffer=function(t,e,r){return new i(t,t.ELEMENT_ARRAY_BUFFER,e,r)},i.create=function(t,e,r,n){return new i(t,e,r,n)},i.prototype.destroy=function(){this.gl.deleteBuffer(this.buffer)},e.exports=i},{}],10:[function(t,e,r){var n=t("./GLTexture"),i=function(t,e,r){this.gl=t,this.framebuffer=t.createFramebuffer(),this.stencil=null,this.texture=null,this.width=e||100,this.height=r||100};i.prototype.enableTexture=function(t){var e=this.gl;this.texture=t||new n(e),this.texture.bind(),this.bind(),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,this.texture.texture,0)},i.prototype.enableStencil=function(){if(!this.stencil){var t=this.gl;this.stencil=t.createRenderbuffer(),t.bindRenderbuffer(t.RENDERBUFFER,this.stencil),t.framebufferRenderbuffer(t.FRAMEBUFFER,t.DEPTH_STENCIL_ATTACHMENT,t.RENDERBUFFER,this.stencil),t.renderbufferStorage(t.RENDERBUFFER,t.DEPTH_STENCIL,this.width,this.height)}},i.prototype.clear=function(t,e,r,n){this.bind();var i=this.gl;i.clearColor(t,e,r,n),i.clear(i.COLOR_BUFFER_BIT|i.DEPTH_BUFFER_BIT)},i.prototype.bind=function(){var t=this.gl;t.bindFramebuffer(t.FRAMEBUFFER,this.framebuffer)},i.prototype.unbind=function(){var t=this.gl;t.bindFramebuffer(t.FRAMEBUFFER,null)},i.prototype.resize=function(t,e){var r=this.gl;this.width=t,this.height=e,this.texture&&this.texture.uploadData(null,t,e),this.stencil&&(r.bindRenderbuffer(r.RENDERBUFFER,this.stencil),r.renderbufferStorage(r.RENDERBUFFER,r.DEPTH_STENCIL,t,e))},i.prototype.destroy=function(){var t=this.gl;this.texture&&this.texture.destroy(),t.deleteFramebuffer(this.framebuffer),this.gl=null,this.stencil=null,this.texture=null},i.createRGBA=function(t,e,r,o){var s=n.fromData(t,null,e,r);s.enableNearestScaling(),s.enableWrapClamp();var a=new i(t,e,r);return a.enableTexture(s),a.unbind(),a},i.createFloat32=function(t,e,r,o){var s=new n.fromData(t,o,e,r);s.enableNearestScaling(),s.enableWrapClamp();var a=new i(t,e,r);return a.enableTexture(s),a.unbind(),a},e.exports=i},{"./GLTexture":12}],11:[function(t,e,r){var n=t("./shader/compileProgram"),i=t("./shader/extractAttributes"),o=t("./shader/extractUniforms"),s=t("./shader/setPrecision"),a=t("./shader/generateUniformAccessObject"),u=function(t,e,r,u,h){this.gl=t,u&&(e=s(e,u),r=s(r,u)),this.program=n(t,e,r,h),this.attributes=i(t,this.program),this.uniformData=o(t,this.program),this.uniforms=a(t,this.uniformData)};u.prototype.bind=function(){this.gl.useProgram(this.program)},u.prototype.destroy=function(){this.attributes=null,this.uniformData=null,this.uniforms=null,this.gl.deleteProgram(this.program)},e.exports=u},{"./shader/compileProgram":17,"./shader/extractAttributes":19,"./shader/extractUniforms":20,"./shader/generateUniformAccessObject":21,"./shader/setPrecision":25}],12:[function(t,e,r){var n=function(t,e,r,n,i){this.gl=t,this.texture=t.createTexture(),this.mipmap=!1,this.premultiplyAlpha=!1,this.width=e||-1,this.height=r||-1,this.format=n||t.RGBA,this.type=i||t.UNSIGNED_BYTE};n.prototype.upload=function(t){this.bind();var e=this.gl;e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,this.premultiplyAlpha);var r=t.videoWidth||t.width,n=t.videoHeight||t.height;n!==this.height||r!==this.width?e.texImage2D(e.TEXTURE_2D,0,this.format,this.format,this.type,t):e.texSubImage2D(e.TEXTURE_2D,0,0,0,this.format,this.type,t),this.width=r,this.height=n};var i=!1;n.prototype.uploadData=function(t,e,r){this.bind();var n=this.gl;if(t instanceof Float32Array){if(!i){if(!n.getExtension("OES_texture_float"))throw new Error("floating point textures not available");i=!0}this.type=n.FLOAT}else this.type=this.type||n.UNSIGNED_BYTE;n.pixelStorei(n.UNPACK_PREMULTIPLY_ALPHA_WEBGL,this.premultiplyAlpha),e!==this.width||r!==this.height?n.texImage2D(n.TEXTURE_2D,0,this.format,e,r,0,this.format,this.type,t||null):n.texSubImage2D(n.TEXTURE_2D,0,0,0,e,r,this.format,this.type,t||null),this.width=e,this.height=r},n.prototype.bind=function(t){var e=this.gl;void 0!==t&&e.activeTexture(e.TEXTURE0+t),e.bindTexture(e.TEXTURE_2D,this.texture)},n.prototype.unbind=function(){var t=this.gl;t.bindTexture(t.TEXTURE_2D,null)},n.prototype.minFilter=function(t){var e=this.gl;this.bind(),this.mipmap?e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t?e.LINEAR_MIPMAP_LINEAR:e.NEAREST_MIPMAP_NEAREST):e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t?e.LINEAR:e.NEAREST)},n.prototype.magFilter=function(t){var e=this.gl;this.bind(),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t?e.LINEAR:e.NEAREST)},n.prototype.enableMipmap=function(){var t=this.gl;this.bind(),this.mipmap=!0,t.generateMipmap(t.TEXTURE_2D)},n.prototype.enableLinearScaling=function(){this.minFilter(!0),this.magFilter(!0)},n.prototype.enableNearestScaling=function(){this.minFilter(!1),this.magFilter(!1)},n.prototype.enableWrapClamp=function(){var t=this.gl;this.bind(),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE)},n.prototype.enableWrapRepeat=function(){var t=this.gl;this.bind(),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.REPEAT),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.REPEAT)},n.prototype.enableWrapMirrorRepeat=function(){var t=this.gl;this.bind(),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.MIRRORED_REPEAT),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.MIRRORED_REPEAT)},n.prototype.destroy=function(){this.gl.deleteTexture(this.texture)},n.fromSource=function(t,e,r){var i=new n(t);return i.premultiplyAlpha=r||!1,i.upload(e),i},n.fromData=function(t,e,r,i){var o=new n(t);return o.uploadData(e,r,i),o},e.exports=n},{}],13:[function(t,e,r){function n(t,e){if(this.nativeVaoExtension=null,n.FORCE_NATIVE||(this.nativeVaoExtension=t.getExtension("OES_vertex_array_object")||t.getExtension("MOZ_OES_vertex_array_object")||t.getExtension("WEBKIT_OES_vertex_array_object")),this.nativeState=e,this.nativeVaoExtension){this.nativeVao=this.nativeVaoExtension.createVertexArrayOES();var r=t.getParameter(t.MAX_VERTEX_ATTRIBS);this.nativeState={tempAttribState:new Array(r),attribState:new Array(r)}}this.gl=t,this.attributes=[],this.indexBuffer=null,this.dirty=!1}var i=t("./setVertexAttribArrays");n.prototype.constructor=n,e.exports=n,n.FORCE_NATIVE=!1,n.prototype.bind=function(){return this.nativeVao?(this.nativeVaoExtension.bindVertexArrayOES(this.nativeVao),this.dirty&&(this.dirty=!1,this.activate())):this.activate(),this},n.prototype.unbind=function(){return this.nativeVao&&this.nativeVaoExtension.bindVertexArrayOES(null),this},n.prototype.activate=function(){for(var t=this.gl,e=null,r=0;r1)for(var r=1;r1&&(n=r[0]+"@",t=r[1]),t=t.replace(D,"."),n+s(t.split("."),e).join(".")}function u(t){for(var e,r,n=[],i=0,o=t.length;i=55296&&e<=56319&&i65535&&(t-=65536,e+=B(t>>>10&1023|55296),t=56320|1023&t),e+=B(t)}).join("")}function l(t){return t-48<10?t-22:t-65<26?t-65:t-97<26?t-97:w}function c(t,e){return t+22+75*(t<26)-((0!=e)<<5)}function d(t,e,r){var n=0;for(t=r?F(t/M):t>>1,t+=F(t/e);t>N*S>>1;n+=w)t=F(t/N);return F(n+(N+1)*t/(t+O))}function f(t){var e,r,n,i,s,a,u,c,f,p,v=[],y=t.length,g=0,m=C,_=P;for(r=t.lastIndexOf(R),r<0&&(r=0),n=0;n=128&&o("not-basic"),v.push(t.charCodeAt(n));for(i=r>0?r+1:0;i=y&&o("invalid-input"),c=l(t.charCodeAt(i++)),(c>=w||c>F((T-g)/a))&&o("overflow"),g+=c*a,f=u<=_?E:u>=_+S?S:u-_,!(cF(T/p)&&o("overflow"),a*=p;e=v.length+1,_=d(g-s,e,0==s),F(g/e)>T-m&&o("overflow"),m+=F(g/e),g%=e,v.splice(g++,0,m)}return h(v)}function p(t){var e,r,n,i,s,a,h,l,f,p,v,y,g,m,_,b=[];for(t=u(t),y=t.length,e=C,r=0,s=P,a=0;a=e&&vF((T-r)/g)&&o("overflow"),r+=(h-e)*g,e=h,a=0;aT&&o("overflow"),v==e){for(l=r,f=w;p=f<=s?E:f>=s+S?S:f-s,!(l= 0x80 (not a basic code point)","invalid-input":"Invalid input"},N=w-E,F=Math.floor,B=String.fromCharCode;if(b={version:"1.4.1",ucs2:{decode:u,encode:h},decode:f,encode:p,toASCII:y,toUnicode:v},"function"==typeof t&&"object"==typeof t.amd&&t.amd)t("punycode",function(){return b});else if(g&&m)if(r.exports==g)m.exports=b;else for(x in b)b.hasOwnProperty(x)&&(g[x]=b[x]);else i.punycode=b}(this)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],28:[function(t,e,r){"use strict";function n(t,e){return Object.prototype.hasOwnProperty.call(t,e)}e.exports=function(t,e,r,o){e=e||"&",r=r||"=";var s={};if("string"!=typeof t||0===t.length)return s;var a=/\+/g;t=t.split(e);var u=1e3;o&&"number"==typeof o.maxKeys&&(u=o.maxKeys);var h=t.length;u>0&&h>u&&(h=u);for(var l=0;l=0?(c=v.substr(0,y),d=v.substr(y+1)):(c=v,d=""),f=decodeURIComponent(c),p=decodeURIComponent(d),n(s,f)?i(s[f])?s[f].push(p):s[f]=[s[f],p]:s[f]=p}return s};var i=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}},{}],29:[function(t,e,r){"use strict";function n(t,e){if(t.map)return t.map(e);for(var r=[],n=0;n=i||0===r)){r=e+r>i?i-e:r;var o=i-r;for(n=e;n0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10;i(this,t),this.baseUrl=r,this.progress=0,this.loading=!1,this.defaultQueryString="",this._beforeMiddleware=[],this._afterMiddleware=[],this._resourcesParsing=[],this._boundLoadResource=function(t,r){return e._loadResource(t,r)},this._queue=c.queue(this._boundLoadResource,n),this._queue.pause(),this.resources={},this.onProgress=new a.default,this.onError=new a.default,this.onLoad=new a.default,this.onStart=new a.default,this.onComplete=new a.default}return t.prototype.add=function(t,e,r,n){if(Array.isArray(t)){for(var i=0;i0?n=200:1223===n&&(n=204),2!=(n/100|0))return void this.abort("["+e.status+"] "+e.statusText+": "+e.responseURL);if(this.xhrType===t.XHR_RESPONSE_TYPE.TEXT)this.data=r,this.type=t.TYPE.TEXT;else if(this.xhrType===t.XHR_RESPONSE_TYPE.JSON)try{this.data=JSON.parse(r),this.type=t.TYPE.JSON}catch(t){return void this.abort("Error trying to parse loaded json: "+t)}else if(this.xhrType===t.XHR_RESPONSE_TYPE.DOCUMENT)try{if(window.DOMParser){var i=new DOMParser;this.data=i.parseFromString(r,"text/xml")}else{var o=document.createElement("div");o.innerHTML=r,this.data=o}this.type=t.TYPE.XML}catch(t){return void this.abort("Error trying to parse loaded xml: "+t)}else this.data=e.response||r;this.complete()},t.prototype._determineCrossOrigin=function(t,e){if(0===t.indexOf("data:"))return"";e=e||window.location,p||(p=document.createElement("a")),p.href=t,t=(0,l.default)(p.href,{strictMode:!0});var r=!t.port&&""===e.port||t.port===e.port,n=t.protocol?t.protocol+":":"";return t.host===e.hostname&&r&&n===e.protocol?"":"anonymous"},t.prototype._determineXhrType=function(){return t._xhrTypeMap[this.extension]||t.XHR_RESPONSE_TYPE.TEXT},t.prototype._determineLoadType=function(){return t._loadTypeMap[this.extension]||t.LOAD_TYPE.XHR},t.prototype._getExtension=function(){var t=this.url,e="";if(this.isDataUrl){var r=t.indexOf("/");e=t.substring(r+1,t.indexOf(";",r))}else{var n=t.indexOf("?"),i=t.indexOf("#"),o=Math.min(n>-1?n:t.length,i>-1?i:t.length);t=t.substring(0,o),e=t.substring(t.lastIndexOf(".")+1)}return e.toLowerCase()},t.prototype._getMimeFromXhrType=function(e){switch(e){case t.XHR_RESPONSE_TYPE.BUFFER:return"application/octet-binary";case t.XHR_RESPONSE_TYPE.BLOB:return"application/blob";case t.XHR_RESPONSE_TYPE.DOCUMENT:return"application/xml";case t.XHR_RESPONSE_TYPE.JSON:return"application/json";case t.XHR_RESPONSE_TYPE.DEFAULT:case t.XHR_RESPONSE_TYPE.TEXT:default:return"text/plain"}},u(t,[{key:"isDataUrl",get:function(){return this._hasFlag(t.STATUS_FLAGS.DATA_URL)}},{key:"isComplete",get:function(){return this._hasFlag(t.STATUS_FLAGS.COMPLETE)}},{key:"isLoading",get:function(){return this._hasFlag(t.STATUS_FLAGS.LOADING)}}]),t}();r.default=v,v.STATUS_FLAGS={NONE:0,DATA_URL:1,COMPLETE:2,LOADING:4},v.TYPE={UNKNOWN:0,JSON:1,XML:2,IMAGE:3,AUDIO:4,VIDEO:5,TEXT:6},v.LOAD_TYPE={XHR:1,IMAGE:2,AUDIO:3,VIDEO:4},v.XHR_RESPONSE_TYPE={DEFAULT:"text",BUFFER:"arraybuffer",BLOB:"blob",DOCUMENT:"document",JSON:"json",TEXT:"text"},v._loadTypeMap={gif:v.LOAD_TYPE.IMAGE,png:v.LOAD_TYPE.IMAGE,bmp:v.LOAD_TYPE.IMAGE,jpg:v.LOAD_TYPE.IMAGE,jpeg:v.LOAD_TYPE.IMAGE,tif:v.LOAD_TYPE.IMAGE,tiff:v.LOAD_TYPE.IMAGE,webp:v.LOAD_TYPE.IMAGE,tga:v.LOAD_TYPE.IMAGE,svg:v.LOAD_TYPE.IMAGE,"svg+xml":v.LOAD_TYPE.IMAGE,mp3:v.LOAD_TYPE.AUDIO,ogg:v.LOAD_TYPE.AUDIO,wav:v.LOAD_TYPE.AUDIO,mp4:v.LOAD_TYPE.VIDEO,webm:v.LOAD_TYPE.VIDEO},v._xhrTypeMap={xhtml:v.XHR_RESPONSE_TYPE.DOCUMENT,html:v.XHR_RESPONSE_TYPE.DOCUMENT,htm:v.XHR_RESPONSE_TYPE.DOCUMENT,xml:v.XHR_RESPONSE_TYPE.DOCUMENT,tmx:v.XHR_RESPONSE_TYPE.DOCUMENT,svg:v.XHR_RESPONSE_TYPE.DOCUMENT,tsx:v.XHR_RESPONSE_TYPE.DOCUMENT,gif:v.XHR_RESPONSE_TYPE.BLOB,png:v.XHR_RESPONSE_TYPE.BLOB,bmp:v.XHR_RESPONSE_TYPE.BLOB,jpg:v.XHR_RESPONSE_TYPE.BLOB,jpeg:v.XHR_RESPONSE_TYPE.BLOB,tif:v.XHR_RESPONSE_TYPE.BLOB,tiff:v.XHR_RESPONSE_TYPE.BLOB,webp:v.XHR_RESPONSE_TYPE.BLOB,tga:v.XHR_RESPONSE_TYPE.BLOB,json:v.XHR_RESPONSE_TYPE.JSON,text:v.XHR_RESPONSE_TYPE.TEXT,txt:v.XHR_RESPONSE_TYPE.TEXT,ttf:v.XHR_RESPONSE_TYPE.BUFFER,otf:v.XHR_RESPONSE_TYPE.BUFFER},v.EMPTY_GIF="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="},{"mini-signals":5,"parse-uri":7}],34:[function(t,e,r){"use strict";function n(){}function i(t,e,r,n){var i=0,o=t.length;!function s(a){if(a||i===o)return void(r&&r(a));n?setTimeout(function(){e(t[i++],s)},1):e(t[i++],s)}()}function o(t){return function(){if(null===t)throw new Error("Callback was already called.");var e=t;t=null,e.apply(this,arguments)}}function s(t,e){function r(t,e,r){if(null!=r&&"function"!=typeof r)throw new Error("task callback must be a function");if(a.started=!0,null==t&&a.idle())return void setTimeout(function(){return a.drain()},1);var i={data:t,callback:"function"==typeof r?r:n};e?a._tasks.unshift(i):a._tasks.push(i),setTimeout(function(){return a.process()},1)}function i(t){return function(){s-=1,t.callback.apply(t,arguments),null!=arguments[0]&&a.error(arguments[0],t.data),s<=a.concurrency-a.buffer&&a.unsaturated(),a.idle()&&a.drain(),a.process()}}if(null==e)e=1;else if(0===e)throw new Error("Concurrency must not be zero");var s=0,a={_tasks:[],concurrency:e,saturated:n,unsaturated:n,buffer:e/4,empty:n,drain:n,error:n,started:!1,paused:!1,push:function(t,e){r(t,!1,e)},kill:function(){s=0,a.drain=n,a.started=!1,a._tasks=[]},unshift:function(t,e){r(t,!0,e)},process:function(){for(;!a.paused&&s>2,o[1]=(3&n[0])<<4|n[1]>>4,o[2]=(15&n[1])<<2|n[2]>>6,o[3]=63&n[2];switch(r-(t.length-1)){case 2:o[3]=64,o[2]=64;break;case 1:o[3]=64}for(var a=0;a",'"',"`"," ","\r","\n","\t"],p=["{","}","|","\\","^","`"].concat(f),v=["'"].concat(p),y=["%","/","?",";","#"].concat(v),g=["/","?","#"],m=/^[+a-z0-9A-Z_-]{0,63}$/,_=/^([+a-z0-9A-Z_-]{0,63})(.*)$/,b={javascript:!0,"javascript:":!0},x={javascript:!0,"javascript:":!0},T={http:!0,https:!0,ftp:!0,gopher:!0,file:!0,"http:":!0,"https:":!0,"ftp:":!0,"gopher:":!0,"file:":!0},w=t("querystring");n.prototype.parse=function(t,e,r){if(!h.isString(t))throw new TypeError("Parameter 'url' must be a string, not "+typeof t);var n=t.indexOf("?"),i=-1!==n&&n127?L+="x":L+=D[N];if(!L.match(m)){var B=A.slice(0,O),k=A.slice(O+1),j=D.match(_);j&&(B.push(j[1]),k.unshift(j[2])),k.length&&(a="/"+k.join(".")+a),this.hostname=B.join(".");break}}}this.hostname.length>255?this.hostname="":this.hostname=this.hostname.toLowerCase(),R||(this.hostname=u.toASCII(this.hostname));var U=this.port?":"+this.port:"",X=this.hostname||"";this.host=X+U,this.href+=this.host,R&&(this.hostname=this.hostname.substr(1,this.hostname.length-2),"/"!==a[0]&&(a="/"+a))}if(!b[p])for(var O=0,I=v.length;O0)&&r.host.split("@");S&&(r.auth=S.shift(),r.host=r.hostname=S.shift())}return r.search=t.search,r.query=t.query,h.isNull(r.pathname)&&h.isNull(r.search)||(r.path=(r.pathname?r.pathname:"")+(r.search?r.search:"")),r.href=r.format(),r}if(!w.length)return r.pathname=null,r.search?r.path="/"+r.search:r.path=null,r.href=r.format(),r;for(var O=w.slice(-1)[0],M=(r.host||t.host||w.length>1)&&("."===O||".."===O)||""===O,P=0,C=w.length;C>=0;C--)O=w[C],"."===O?w.splice(C,1):".."===O?(w.splice(C,1),P++):P&&(w.splice(C,1),P--);if(!_&&!b)for(;P--;P)w.unshift("..");!_||""===w[0]||w[0]&&"/"===w[0].charAt(0)||w.unshift(""),M&&"/"!==w.join("/").substr(-1)&&w.push("");var R=""===w[0]||w[0]&&"/"===w[0].charAt(0);if(E){r.hostname=r.host=R?"":w.length?w.shift():"";var S=!!(r.host&&r.host.indexOf("@")>0)&&r.host.split("@");S&&(r.auth=S.shift(),r.host=r.hostname=S.shift())}return _=_||r.host&&w.length,_&&!R&&w.unshift(""),w.length?r.pathname=w.join("/"):(r.pathname=null,r.path=null),h.isNull(r.pathname)&&h.isNull(r.search)||(r.path=(r.pathname?r.pathname:"")+(r.search?r.search:"")),r.auth=t.auth||r.auth,r.slashes=r.slashes||t.slashes,r.href=r.format(),r},n.prototype.parseHost=function(){var t=this.host,e=c.exec(t);e&&(e=e[0],":"!==e&&(this.port=e.substr(1)),t=t.substr(0,t.length-e.length)),t&&(this.hostname=t)}},{"./util":39,punycode:27,querystring:30}],39:[function(t,e,r){"use strict";e.exports={isString:function(t){return"string"==typeof t},isObject:function(t){return"object"==typeof t&&null!==t},isNull:function(t){return null===t},isNullOrUndefined:function(t){return null==t}}},{}],40:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var o=t("../core"),s=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}(o),a=t("ismobilejs"),u=n(a),h=t("./accessibleTarget"),l=n(h);s.utils.mixins.delayMixin(s.DisplayObject.prototype,l.default);var c=100,d=0,f=0,p=2,v=function(){function t(e){i(this,t),!u.default.tablet&&!u.default.phone||navigator.isCocoonJS||this.createTouchHook();var r=document.createElement("div");r.style.width=c+"px",r.style.height=c+"px",r.style.position="absolute",r.style.top=d+"px",r.style.left=f+"px",r.style.zIndex=p,this.div=r,this.pool=[],this.renderId=0,this.debug=!1,this.renderer=e,this.children=[],this._onKeyDown=this._onKeyDown.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this.isActive=!1,this.isMobileAccessabillity=!1,window.addEventListener("keydown",this._onKeyDown,!1)}return t.prototype.createTouchHook=function(){var t=this,e=document.createElement("button");e.style.width="1px",e.style.height="1px",e.style.position="absolute",e.style.top="-1000px",e.style.left="-1000px",e.style.zIndex=2,e.style.backgroundColor="#FF0000",e.title="HOOK DIV",e.addEventListener("focus",function(){t.isMobileAccessabillity=!0,t.activate(),document.body.removeChild(e)}),document.body.appendChild(e)},t.prototype.activate=function(){this.isActive||(this.isActive=!0,window.document.addEventListener("mousemove",this._onMouseMove,!0),window.removeEventListener("keydown",this._onKeyDown,!1),this.renderer.on("postrender",this.update,this),this.renderer.view.parentNode&&this.renderer.view.parentNode.appendChild(this.div))},t.prototype.deactivate=function(){this.isActive&&!this.isMobileAccessabillity&&(this.isActive=!1,window.document.removeEventListener("mousemove",this._onMouseMove),window.addEventListener("keydown",this._onKeyDown,!1),this.renderer.off("postrender",this.update),this.div.parentNode&&this.div.parentNode.removeChild(this.div))},t.prototype.updateAccessibleObjects=function(t){if(t.visible){t.accessible&&t.interactive&&(t._accessibleActive||this.addChild(t),t.renderId=this.renderId);for(var e=t.children,r=e.length-1;r>=0;r--)this.updateAccessibleObjects(e[r])}},t.prototype.update=function(){if(this.renderer.renderingToScreen){this.updateAccessibleObjects(this.renderer._lastObjectRendered);var t=this.renderer.view.getBoundingClientRect(),e=t.width/this.renderer.width,r=t.height/this.renderer.height,n=this.div;n.style.left=t.left+"px",n.style.top=t.top+"px",n.style.width=this.renderer.width+"px",n.style.height=this.renderer.height+"px";for(var i=0;ithis.renderer.width&&(t.width=this.renderer.width-t.x),t.y+t.height>this.renderer.height&&(t.height=this.renderer.height-t.y)},t.prototype.addChild=function(t){var e=this.pool.pop();e||(e=document.createElement("button"),e.style.width=c+"px",e.style.height=c+"px",e.style.backgroundColor=this.debug?"rgba(255,0,0,0.5)":"transparent",e.style.position="absolute",e.style.zIndex=p,e.style.borderStyle="none",e.addEventListener("click",this._onClick.bind(this)),e.addEventListener("focus",this._onFocus.bind(this)),e.addEventListener("focusout",this._onFocusOut.bind(this))),t.accessibleTitle?e.title=t.accessibleTitle:t.accessibleTitle||t.accessibleHint||(e.title="displayObject "+this.tabIndex),t.accessibleHint&&e.setAttribute("aria-label",t.accessibleHint),t._accessibleActive=!0,t._accessibleDiv=e,e.displayObject=t,this.children.push(t),this.div.appendChild(t._accessibleDiv),t._accessibleDiv.tabIndex=t.tabIndex},t.prototype._onClick=function(t){var e=this.renderer.plugins.interaction;e.dispatchEvent(t.target.displayObject,"click",e.eventData)},t.prototype._onFocus=function(t){var e=this.renderer.plugins.interaction;e.dispatchEvent(t.target.displayObject,"mouseover",e.eventData)},t.prototype._onFocusOut=function(t){var e=this.renderer.plugins.interaction;e.dispatchEvent(t.target.displayObject,"mouseout",e.eventData)},t.prototype._onKeyDown=function(t){9===t.keyCode&&this.activate()},t.prototype._onMouseMove=function(){this.deactivate()},t.prototype.destroy=function(){this.div=null;for(var t=0;t]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i,r.SHAPES={POLY:0,RECT:1,CIRC:2,ELIP:3,RREC:4},r.PRECISION={LOW:"lowp",MEDIUM:"mediump",HIGH:"highp"},r.TRANSFORM_MODE={STATIC:0,DYNAMIC:1},r.TEXT_GRADIENT={LINEAR_VERTICAL:0,LINEAR_HORIZONTAL:1},r.UPDATE_PRIORITY={INTERACTION:50,HIGH:25,NORMAL:0,LOW:-25,UTILITY:-50}},{}],47:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("../math"),o=function(){function t(){n(this,t),this.minX=1/0,this.minY=1/0,this.maxX=-1/0,this.maxY=-1/0,this.rect=null}return t.prototype.isEmpty=function(){return this.minX>this.maxX||this.minY>this.maxY},t.prototype.clear=function(){this.updateID++,this.minX=1/0,this.minY=1/0,this.maxX=-1/0,this.maxY=-1/0},t.prototype.getRectangle=function(t){return this.minX>this.maxX||this.minY>this.maxY?i.Rectangle.EMPTY:(t=t||new i.Rectangle(0,0,1,1),t.x=this.minX,t.y=this.minY,t.width=this.maxX-this.minX,t.height=this.maxY-this.minY,t)},t.prototype.addPoint=function(t){this.minX=Math.min(this.minX,t.x),this.maxX=Math.max(this.maxX,t.x),this.minY=Math.min(this.minY,t.y),this.maxY=Math.max(this.maxY,t.y)},t.prototype.addQuad=function(t){var e=this.minX,r=this.minY,n=this.maxX,i=this.maxY,o=t[0],s=t[1];e=on?o:n,i=s>i?s:i,o=t[2],s=t[3],e=on?o:n,i=s>i?s:i,o=t[4],s=t[5],e=on?o:n,i=s>i?s:i,o=t[6],s=t[7],e=on?o:n,i=s>i?s:i,this.minX=e,this.minY=r,this.maxX=n,this.maxY=i},t.prototype.addFrame=function(t,e,r,n,i){var o=t.worldTransform,s=o.a,a=o.b,u=o.c,h=o.d,l=o.tx,c=o.ty,d=this.minX,f=this.minY,p=this.maxX,v=this.maxY,y=s*e+u*r+l,g=a*e+h*r+c;d=yp?y:p,v=g>v?g:v,y=s*n+u*r+l,g=a*n+h*r+c,d=yp?y:p,v=g>v?g:v,y=s*e+u*i+l,g=a*e+h*i+c,d=yp?y:p,v=g>v?g:v,y=s*n+u*i+l,g=a*n+h*i+c,d=yp?y:p,v=g>v?g:v,this.minX=d,this.minY=f,this.maxX=p,this.maxY=v},t.prototype.addVertices=function(t,e,r,n){for(var i=t.worldTransform,o=i.a,s=i.b,a=i.c,u=i.d,h=i.tx,l=i.ty,c=this.minX,d=this.minY,f=this.maxX,p=this.maxY,v=r;vf?m:f,p=_>p?_:p}this.minX=c,this.minY=d,this.maxX=f,this.maxY=p},t.prototype.addBounds=function(t){var e=this.minX,r=this.minY,n=this.maxX,i=this.maxY;this.minX=t.minXn?t.maxX:n,this.maxY=t.maxY>i?t.maxY:i},t.prototype.addBoundsMask=function(t,e){var r=t.minX>e.minX?t.minX:e.minX,n=t.minY>e.minY?t.minY:e.minY,i=t.maxXu?i:u,this.maxY=o>h?o:h}},t.prototype.addBoundsArea=function(t,e){var r=t.minX>e.x?t.minX:e.x,n=t.minY>e.y?t.minY:e.y,i=t.maxXu?i:u,this.maxY=o>h?o:h}},t}();r.default=o},{"../math":70}],48:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=function(){function t(t,e){for(var r=0;r1)for(var r=0;rthis.children.length)throw new Error(t+"addChildAt: The index "+e+" supplied is out of bounds "+this.children.length);return t.parent&&t.parent.removeChild(t),t.parent=this,t.transform._parentID=-1,this.children.splice(e,0,t),this._boundsID++,this.onChildrenChange(e),t.emit("added",this),t},e.prototype.swapChildren=function(t,e){if(t!==e){var r=this.getChildIndex(t),n=this.getChildIndex(e);this.children[r]=e,this.children[n]=t,this.onChildrenChange(r=this.children.length)throw new Error("The supplied index is out of bounds");var r=this.getChildIndex(t);(0,a.removeItems)(this.children,r,1),this.children.splice(e,0,t),this.onChildrenChange(e)},e.prototype.getChildAt=function(t){if(t<0||t>=this.children.length)throw new Error("getChildAt: Index ("+t+") does not exist.");return this.children[t]},e.prototype.removeChild=function(t){var e=arguments.length;if(e>1)for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:0,e=arguments[1],r=t,n="number"==typeof e?e:this.children.length,i=n-r,o=void 0;if(i>0&&i<=n){o=this.children.splice(r,i);for(var s=0;s2&&void 0!==arguments[2]&&arguments[2]||(this._recursivePostUpdateTransform(),this.parent?this.displayObjectUpdateTransform():(this.parent=this._tempDisplayObjectParent,this.displayObjectUpdateTransform(),this.parent=null)),this.worldTransform.apply(t,e)},e.prototype.toLocal=function(t,e,r,n){return e&&(t=e.toGlobal(t,r,n)),n||(this._recursivePostUpdateTransform(),this.parent?this.displayObjectUpdateTransform():(this.parent=this._tempDisplayObjectParent,this.displayObjectUpdateTransform(),this.parent=null)),this.worldTransform.applyInverse(t,r)},e.prototype.renderWebGL=function(t){},e.prototype.renderCanvas=function(t){},e.prototype.setParent=function(t){if(!t||!t.addChild)throw new Error("setParent: Argument must be a Container");return t.addChild(this),t},e.prototype.setTransform=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,a=arguments.length>7&&void 0!==arguments[7]?arguments[7]:0,u=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;return this.position.x=t,this.position.y=e,this.scale.x=r||1,this.scale.y=n||1,this.rotation=i,this.skew.x=o,this.skew.y=s,this.pivot.x=a,this.pivot.y=u,this},e.prototype.destroy=function(){this.removeAllListeners(),this.parent&&this.parent.removeChild(this),this.transform=null,this.parent=null,this._bounds=null,this._currentBounds=null,this._mask=null,this.filterArea=null,this.interactive=!1,this.interactiveChildren=!1,this._destroyed=!0},a(e,[{key:"_tempDisplayObjectParent",get:function(){return null===this.tempDisplayObjectParent&&(this.tempDisplayObjectParent=new e),this.tempDisplayObjectParent}},{key:"x",get:function(){return this.position.x},set:function(t){this.transform.position.x=t}},{key:"y",get:function(){return this.position.y},set:function(t){this.transform.position.y=t}},{key:"worldTransform",get:function(){return this.transform.worldTransform}},{key:"localTransform",get:function(){return this.transform.localTransform}},{key:"position",get:function(){return this.transform.position},set:function(t){this.transform.position.copy(t)}},{key:"scale",get:function(){return this.transform.scale},set:function(t){this.transform.scale.copy(t)}},{key:"pivot",get:function(){return this.transform.pivot},set:function(t){this.transform.pivot.copy(t)}},{key:"skew",get:function(){return this.transform.skew},set:function(t){this.transform.skew.copy(t)}},{key:"rotation",get:function(){return this.transform.rotation},set:function(t){this.transform.rotation=t}},{key:"worldVisible",get:function(){var t=this;do{if(!t.visible)return!1;t=t.parent}while(t);return!0}},{key:"mask",get:function(){return this._mask},set:function(t){this._mask&&(this._mask.renderable=!0),this._mask=t,this._mask&&(this._mask.renderable=!1)}},{key:"filters",get:function(){return this._filters&&this._filters.slice()},set:function(t){this._filters=t&&t.slice()}}]),e}(h.default);r.default=b,b.prototype.displayObjectUpdateTransform=b.prototype.updateTransform},{"../const":46,"../math":70,"../settings":101,"./Bounds":47,"./Transform":50,"./TransformStatic":52,eventemitter3:3}],50:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=function(){function t(t,e){for(var r=0;r0&&void 0!==arguments[0]&&arguments[0];i(this,e);var n=o(this,t.call(this));return n.fillAlpha=1,n.lineWidth=0,n.nativeLines=r,n.lineColor=0,n.graphicsData=[],n.tint=16777215,n._prevTint=16777215,n.blendMode=_.BLEND_MODES.NORMAL,n.currentPath=null,n._webGL={},n.isMask=!1,n.boundsPadding=0,n._localBounds=new x.default,n.dirty=0,n.fastRectDirty=-1,n.clearDirty=0,n.boundsDirty=-1,n.cachedSpriteDirty=!1,n._spriteRect=null,n._fastRect=!1,n}return s(e,t),e.prototype.clone=function(){var t=new e;t.renderable=this.renderable,t.fillAlpha=this.fillAlpha,t.lineWidth=this.lineWidth,t.lineColor=this.lineColor,t.tint=this.tint,t.blendMode=this.blendMode,t.isMask=this.isMask,t.boundsPadding=this.boundsPadding,t.dirty=0,t.cachedSpriteDirty=this.cachedSpriteDirty;for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(this.lineWidth=t,this.lineColor=e,this.lineAlpha=r,this.currentPath)if(this.currentPath.shape.points.length){var n=new g.Polygon(this.currentPath.shape.points.slice(-2));n.closed=!1,this.drawShape(n)}else this.currentPath.lineWidth=this.lineWidth,this.currentPath.lineColor=this.lineColor,this.currentPath.lineAlpha=this.lineAlpha;return this},e.prototype.moveTo=function(t,e){var r=new g.Polygon([t,e]);return r.closed=!1,this.drawShape(r),this},e.prototype.lineTo=function(t,e){return this.currentPath.shape.points.push(t,e),this.dirty++,this},e.prototype.quadraticCurveTo=function(t,e,r,n){this.currentPath?0===this.currentPath.shape.points.length&&(this.currentPath.shape.points=[0,0]):this.moveTo(0,0);var i=this.currentPath.shape.points,o=0,s=0;0===i.length&&this.moveTo(0,0);for(var a=i[i.length-2],u=i[i.length-1],h=1;h<=20;++h){var l=h/20;o=a+(t-a)*l,s=u+(e-u)*l,i.push(o+(t+(r-t)*l-o)*l,s+(e+(n-e)*l-s)*l)}return this.dirty++,this},e.prototype.bezierCurveTo=function(t,e,r,n,i,o){this.currentPath?0===this.currentPath.shape.points.length&&(this.currentPath.shape.points=[0,0]):this.moveTo(0,0);var s=this.currentPath.shape.points,a=s[s.length-2],u=s[s.length-1];return s.length-=2,(0,w.default)(a,u,t,e,r,n,i,o,s),this.dirty++,this},e.prototype.arcTo=function(t,e,r,n,i){this.currentPath?0===this.currentPath.shape.points.length&&this.currentPath.shape.points.push(t,e):this.moveTo(t,e);var o=this.currentPath.shape.points,s=o[o.length-2],a=o[o.length-1],u=a-e,h=s-t,l=n-e,c=r-t,d=Math.abs(u*c-h*l);if(d<1e-8||0===i)o[o.length-2]===t&&o[o.length-1]===e||o.push(t,e);else{var f=u*u+h*h,p=l*l+c*c,v=u*l+h*c,y=i*Math.sqrt(f)/d,g=i*Math.sqrt(p)/d,m=y*v/f,_=g*v/p,b=y*c+g*h,x=y*l+g*u,T=h*(g+m),w=u*(g+m),E=c*(y+_),S=l*(y+_),O=Math.atan2(w-x,T-b),M=Math.atan2(S-x,E-b);this.arc(b+t,x+e,i,O,M,h*l>c*u)}return this.dirty++,this},e.prototype.arc=function(t,e,r,n,i){var o=arguments.length>5&&void 0!==arguments[5]&&arguments[5];if(n===i)return this;!o&&i<=n?i+=2*Math.PI:o&&n<=i&&(n+=2*Math.PI);var s=i-n,a=40*Math.ceil(Math.abs(s)/(2*Math.PI));if(0===s)return this;var u=t+Math.cos(n)*r,h=e+Math.sin(n)*r,l=this.currentPath?this.currentPath.shape.points:null;l?l[l.length-2]===u&&l[l.length-1]===h||l.push(u,h):(this.moveTo(u,h),l=this.currentPath.shape.points);for(var c=s/(2*a),d=2*c,f=Math.cos(c),p=Math.sin(c),v=a-1,y=v%1/v,g=0;g<=v;++g){var m=g+y*g,_=c+n+d*m,b=Math.cos(_),x=-Math.sin(_);l.push((f*b+p*x)*r+t,(f*-x+p*b)*r+e)}return this.dirty++,this},e.prototype.beginFill=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return this.filling=!0,this.fillColor=t,this.fillAlpha=e,this.currentPath&&this.currentPath.shape.points.length<=2&&(this.currentPath.fill=this.filling,this.currentPath.fillColor=this.fillColor,this.currentPath.fillAlpha=this.fillAlpha),this},e.prototype.endFill=function(){return this.filling=!1,this.fillColor=null,this.fillAlpha=1,this},e.prototype.drawRect=function(t,e,r,n){return this.drawShape(new g.Rectangle(t,e,r,n)),this},e.prototype.drawRoundedRect=function(t,e,r,n,i){return this.drawShape(new g.RoundedRectangle(t,e,r,n,i)),this},e.prototype.drawCircle=function(t,e,r){return this.drawShape(new g.Circle(t,e,r)),this},e.prototype.drawEllipse=function(t,e,r,n){return this.drawShape(new g.Ellipse(t,e,r,n)),this},e.prototype.drawPolygon=function(t){var e=t,r=!0;if(e instanceof g.Polygon&&(r=e.closed,e=e.points),!Array.isArray(e)){e=new Array(arguments.length);for(var n=0;n0)&&(this.lineWidth=0,this.filling=!1,this.boundsDirty=-1,this.dirty++,this.clearDirty++,this.graphicsData.length=0),this.currentPath=null,this._spriteRect=null,this},e.prototype.isFastRect=function(){return 1===this.graphicsData.length&&this.graphicsData[0].shape.type===_.SHAPES.RECT&&!this.graphicsData[0].lineWidth},e.prototype._renderWebGL=function(t){this.dirty!==this.fastRectDirty&&(this.fastRectDirty=this.dirty,this._fastRect=this.isFastRect()),this._fastRect?this._renderSpriteRect(t):(t.setObjectRenderer(t.plugins.graphics),t.plugins.graphics.render(this))},e.prototype._renderSpriteRect=function(t){var e=this.graphicsData[0].shape;this._spriteRect||(this._spriteRect=new y.default(new d.default(d.default.WHITE)));var r=this._spriteRect;if(16777215===this.tint)r.tint=this.graphicsData[0].fillColor;else{var n=C,i=R;(0,m.hex2rgb)(this.graphicsData[0].fillColor,n),(0,m.hex2rgb)(this.tint,i),n[0]*=i[0],n[1]*=i[1],n[2]*=i[2],r.tint=(0,m.rgb2hex)(n)}r.alpha=this.graphicsData[0].fillAlpha,r.worldAlpha=this.worldAlpha*r.alpha,r.blendMode=this.blendMode,r._texture._frame.width=e.width,r._texture._frame.height=e.height,r.transform.worldTransform=this.transform.worldTransform,r.anchor.set(-e.x/e.width,-e.y/e.height),r._onAnchorUpdate(),r._renderWebGL(t)},e.prototype._renderCanvas=function(t){!0!==this.isMask&&t.plugins.graphics.render(this)},e.prototype._calculateBounds=function(){this.boundsDirty!==this.dirty&&(this.boundsDirty=this.dirty,this.updateLocalBounds(),this.cachedSpriteDirty=!0);var t=this._localBounds;this._bounds.addFrame(this.transform,t.minX,t.minY,t.maxX,t.maxY)},e.prototype.containsPoint=function(t){this.worldTransform.applyInverse(t,P);for(var e=this.graphicsData,r=0;re?o+a:e,r=sn?s+u:n;else if(c===_.SHAPES.CIRC)o=i.x,s=i.y,a=i.radius+d/2,u=i.radius+d/2,t=o-ae?o+a:e,r=s-un?s+u:n;else if(c===_.SHAPES.ELIP)o=i.x,s=i.y,a=i.width+d/2,u=i.height+d/2,t=o-ae?o+a:e,r=s-un?s+u:n;else for(var f=i.points,p=0,v=0,y=0,g=0,m=0,b=0,x=0,T=0,w=0;w+2e?x+m:e,r=T-bn?T+b:n)}else t=0,e=0,r=0,n=0;var E=this.boundsPadding;this._localBounds.minX=t-E,this._localBounds.maxX=e+E,this._localBounds.minY=r-E,this._localBounds.maxY=n+E},e.prototype.drawShape=function(t){this.currentPath&&this.currentPath.shape.points.length<=2&&this.graphicsData.pop(),this.currentPath=null;var e=new p.default(this.lineWidth,this.lineColor,this.lineAlpha,this.fillColor,this.fillAlpha,this.filling,this.nativeLines,t);return this.graphicsData.push(e),e.type===_.SHAPES.POLY&&(e.shape.closed=e.shape.closed||this.filling,this.currentPath=e),this.dirty++,e},e.prototype.generateCanvasTexture=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=this.getLocalBounds(),n=l.default.create(r.width,r.height,t,e);O||(O=new S.default),this.transform.updateLocalTransform(),this.transform.localTransform.copy(M),M.invert(),M.tx-=r.x,M.ty-=r.y,O.render(this,n,!0,M);var i=d.default.fromCanvas(n.baseTexture._canvasRenderTarget.canvas,t,"graphics");return i.baseTexture.resolution=e,i.baseTexture.update(),i},e.prototype.closePath=function(){var t=this.currentPath;return t&&t.shape&&t.shape.close(),this},e.prototype.addHole=function(){var t=this.graphicsData.pop();return this.currentPath=this.graphicsData[this.graphicsData.length-1],this.currentPath.addHole(t.shape),this.currentPath=null,this},e.prototype.destroy=function(e){t.prototype.destroy.call(this,e);for(var r=0;rP?P:M,r.beginPath(),r.moveTo(w,E+M),r.lineTo(w,E+O-M),r.quadraticCurveTo(w,E+O,w+M,E+O),r.lineTo(w+S-M,E+O),r.quadraticCurveTo(w+S,E+O,w+S,E+O-M),r.lineTo(w+S,E+M),r.quadraticCurveTo(w+S,E,w+S-M,E),r.lineTo(w+M,E),r.quadraticCurveTo(w,E,w,E+M),r.closePath(),(u.fillColor||0===u.fillColor)&&(r.globalAlpha=u.fillAlpha*n,r.fillStyle="#"+("00000"+(0|l).toString(16)).substr(-6),r.fill()),u.lineWidth&&(r.globalAlpha=u.lineAlpha*n,r.strokeStyle="#"+("00000"+(0|c).toString(16)).substr(-6),r.stroke())}}},t.prototype.updateGraphicsTint=function(t){t._prevTint=t.tint;for(var e=(t.tint>>16&255)/255,r=(t.tint>>8&255)/255,n=(255&t.tint)/255,i=0;i>16&255)/255*e*255<<16)+((s>>8&255)/255*r*255<<8)+(255&s)/255*n*255,o._lineTint=((a>>16&255)/255*e*255<<16)+((a>>8&255)/255*r*255<<8)+(255&a)/255*n*255}},t.prototype.renderPolygon=function(t,e,r){r.moveTo(t[0],t[1]);for(var n=1;n8&&void 0!==arguments[8]?arguments[8]:[],h=0,l=0,c=0,d=0,f=0;u.push(t,e);for(var p=1,v=0;p<=20;++p)v=p/20,h=1-v,l=h*h,c=l*h,d=v*v,f=d*v,u.push(c*t+3*l*v*r+3*h*d*i+f*s,c*e+3*l*v*n+3*h*d*o+f*a);return u}r.__esModule=!0,r.default=n},{}],57:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var a=t("../../utils"),u=t("../../const"),h=t("../../renderers/webgl/utils/ObjectRenderer"),l=n(h),c=t("../../renderers/webgl/WebGLRenderer"),d=n(c),f=t("./WebGLGraphicsData"),p=n(f),v=t("./shaders/PrimitiveShader"),y=n(v),g=t("./utils/buildPoly"),m=n(g),_=t("./utils/buildRectangle"),b=n(_),x=t("./utils/buildRoundedRectangle"),T=n(x),w=t("./utils/buildCircle"),E=n(w),S=function(t){function e(r){i(this,e);var n=o(this,t.call(this,r));return n.graphicsDataPool=[],n.primitiveShader=null,n.gl=r.gl,n.CONTEXT_UID=0,n}return s(e,t),e.prototype.onContextChange=function(){this.gl=this.renderer.gl,this.CONTEXT_UID=this.renderer.CONTEXT_UID,this.primitiveShader=new y.default(this.gl)},e.prototype.destroy=function(){l.default.prototype.destroy.call(this);for(var t=0;t32e4)&&(n=this.graphicsDataPool.pop()||new p.default(this.renderer.gl,this.primitiveShader,this.renderer.state.attribsState),n.nativeLines=r,n.reset(e),t.data.push(n)),n.dirty=!0,n},e}(l.default);r.default=S,d.default.registerPlugin("graphics",S)},{"../../const":46,"../../renderers/webgl/WebGLRenderer":84,"../../renderers/webgl/utils/ObjectRenderer":94,"../../utils":124,"./WebGLGraphicsData":58,"./shaders/PrimitiveShader":59,"./utils/buildCircle":60,"./utils/buildPoly":62,"./utils/buildRectangle":63,"./utils/buildRoundedRectangle":64}],58:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("pixi-gl-core"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=function(){function t(e,r,i){n(this,t),this.gl=e,this.color=[0,0,0],this.points=[],this.indices=[],this.buffer=o.default.GLBuffer.createVertexBuffer(e),this.indexBuffer=o.default.GLBuffer.createIndexBuffer(e),this.dirty=!0,this.nativeLines=!1,this.glPoints=null,this.glIndices=null,this.shader=r,this.vao=new o.default.VertexArrayObject(e,i).addIndex(this.indexBuffer).addAttribute(this.buffer,r.attributes.aVertexPosition,e.FLOAT,!1,24,0).addAttribute(this.buffer,r.attributes.aColor,e.FLOAT,!1,24,8)}return t.prototype.reset=function(){this.points.length=0,this.indices.length=0},t.prototype.upload=function(){this.glPoints=new Float32Array(this.points),this.buffer.upload(this.glPoints),this.glIndices=new Uint16Array(this.indices),this.indexBuffer.upload(this.glIndices),this.dirty=!1},t.prototype.destroy=function(){this.color=null,this.points=null,this.indices=null,this.vao.destroy(),this.buffer.destroy(),this.indexBuffer.destroy(),this.gl=null,this.buffer=null,this.indexBuffer=null,this.glPoints=null,this.glIndices=null},t}();r.default=s},{"pixi-gl-core":15}],59:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=t("../../../Shader"),a=function(t){return t&&t.__esModule?t:{default:t}}(s),u=function(t){function e(r){return n(this,e),i(this,t.call(this,r,["attribute vec2 aVertexPosition;","attribute vec4 aColor;","uniform mat3 translationMatrix;","uniform mat3 projectionMatrix;","uniform float alpha;","uniform vec3 tint;","varying vec4 vColor;","void main(void){"," gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);"," vColor = aColor * vec4(tint * alpha, alpha);","}"].join("\n"),["varying vec4 vColor;","void main(void){"," gl_FragColor = vColor;","}"].join("\n")))}return o(e,t),e}(a.default);r.default=u},{"../../../Shader":44}],60:[function(t,e,r){"use strict";function n(t,e,r){var n=t.shape,i=n.x,u=n.y,h=void 0,l=void 0;if(t.type===s.SHAPES.CIRC?(h=n.radius,l=n.radius):(h=n.width,l=n.height),0!==h&&0!==l){var c=Math.floor(30*Math.sqrt(n.radius))||Math.floor(15*Math.sqrt(n.width+n.height)),d=2*Math.PI/c;if(t.fill){var f=(0,a.hex2rgb)(t.fillColor),p=t.fillAlpha,v=f[0]*p,y=f[1]*p,g=f[2]*p,m=e.points,_=e.indices,b=m.length/6;_.push(b);for(var x=0;x196*p*p?(R=O-P,A=M-C,I=Math.sqrt(R*R+A*A),R/=I,A/=I,R*=p,A*=p,h.push(T-R,w-A),h.push(g,m,_,y),h.push(T+R,w+A),h.push(g,m,_,y),h.push(T-R,w-A),h.push(g,m,_,y),d++):(h.push(X,G),h.push(g,m,_,y),h.push(T-(X-T),w-(G-w)),h.push(g,m,_,y))}}b=r[2*(c-2)],x=r[2*(c-2)+1],T=r[2*(c-1)],w=r[2*(c-1)+1],O=-(x-w),M=b-T,I=Math.sqrt(O*O+M*M),O/=I,M/=I,O*=p,M*=p,h.push(T-O,w-M),h.push(g,m,_,y),h.push(T+O,w+M),h.push(g,m,_,y),l.push(f);for(var W=0;W=6){for(var i=[],o=t.holes,u=0;u0&&(0,s.default)(t,e,r)}r.__esModule=!0,r.default=i;var o=t("./buildLine"),s=n(o),a=t("../../../utils"),u=t("earcut"),h=n(u)},{"../../../utils":124,"./buildLine":61,earcut:2}],63:[function(t,e,r){"use strict";function n(t,e,r){var n=t.shape,i=n.x,a=n.y,u=n.width,h=n.height;if(t.fill){var l=(0,s.hex2rgb)(t.fillColor),c=t.fillAlpha,d=l[0]*c,f=l[1]*c,p=l[2]*c,v=e.points,y=e.indices,g=v.length/6;v.push(i,a),v.push(d,f,p,c),v.push(i+u,a),v.push(d,f,p,c),v.push(i,a+h),v.push(d,f,p,c),v.push(i+u,a+h),v.push(d,f,p,c),y.push(g,g,g+1,g+2,g+3,g+3)}if(t.lineWidth){var m=t.points;t.points=[i,a,i+u,a,i+u,a+h,i,a+h,i,a],(0,o.default)(t,e,r),t.points=m}}r.__esModule=!0,r.default=n;var i=t("./buildLine"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=t("../../../utils")},{"../../../utils":124,"./buildLine":61}],64:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e,r){var n=t.shape,i=n.x,o=n.y,a=n.width,h=n.height,d=n.radius,f=[];if(f.push(i,o+d),s(i,o+h-d,i,o+h,i+d,o+h,f),s(i+a-d,o+h,i+a,o+h,i+a,o+h-d,f),s(i+a,o+d,i+a,o,i+a-d,o,f),s(i+d,o,i,o,i,o+d+1e-10,f),t.fill){for(var p=(0,c.hex2rgb)(t.fillColor),v=t.fillAlpha,y=p[0]*v,g=p[1]*v,m=p[2]*v,_=e.points,b=e.indices,x=_.length/6,T=(0,u.default)(f,null,2),w=0,E=T.length;w6&&void 0!==arguments[6]?arguments[6]:[],u=a,h=0,l=0,c=0,d=0,f=0,p=0,v=0,y=0;v<=20;++v)y=v/20,h=o(t,r,y),l=o(e,n,y),c=o(r,i,y),d=o(n,s,y),f=o(h,c,y),p=o(l,d,y),u.push(f,p);return u}r.__esModule=!0,r.default=i;var a=t("earcut"),u=n(a),h=t("./buildLine"),l=n(h),c=t("../../../utils")},{"../../../utils":124,"./buildLine":61,earcut:2}],65:[function(t,e,r){"use strict";function n(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}function i(t){return t&&t.__esModule?t:{default:t}}r.__esModule=!0,r.autoDetectRenderer=r.Application=r.Filter=r.SpriteMaskFilter=r.Quad=r.RenderTarget=r.ObjectRenderer=r.WebGLManager=r.Shader=r.CanvasRenderTarget=r.TextureUvs=r.VideoBaseTexture=r.BaseRenderTexture=r.RenderTexture=r.BaseTexture=r.Texture=r.Spritesheet=r.CanvasGraphicsRenderer=r.GraphicsRenderer=r.GraphicsData=r.Graphics=r.TextMetrics=r.TextStyle=r.Text=r.SpriteRenderer=r.CanvasTinter=r.CanvasSpriteRenderer=r.Sprite=r.TransformBase=r.TransformStatic=r.Transform=r.Container=r.DisplayObject=r.Bounds=r.glCore=r.WebGLRenderer=r.CanvasRenderer=r.ticker=r.utils=r.settings=void 0;var o=t("./const");Object.keys(o).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(r,t,{enumerable:!0,get:function(){return o[t]}})});var s=t("./math");Object.keys(s).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(r,t,{enumerable:!0,get:function(){return s[t]}})});var a=t("pixi-gl-core");Object.defineProperty(r,"glCore",{enumerable:!0,get:function(){return i(a).default}});var u=t("./display/Bounds");Object.defineProperty(r,"Bounds",{enumerable:!0,get:function(){return i(u).default}}) +;var h=t("./display/DisplayObject");Object.defineProperty(r,"DisplayObject",{enumerable:!0,get:function(){return i(h).default}});var l=t("./display/Container");Object.defineProperty(r,"Container",{enumerable:!0,get:function(){return i(l).default}});var c=t("./display/Transform");Object.defineProperty(r,"Transform",{enumerable:!0,get:function(){return i(c).default}});var d=t("./display/TransformStatic");Object.defineProperty(r,"TransformStatic",{enumerable:!0,get:function(){return i(d).default}});var f=t("./display/TransformBase");Object.defineProperty(r,"TransformBase",{enumerable:!0,get:function(){return i(f).default}});var p=t("./sprites/Sprite");Object.defineProperty(r,"Sprite",{enumerable:!0,get:function(){return i(p).default}});var v=t("./sprites/canvas/CanvasSpriteRenderer");Object.defineProperty(r,"CanvasSpriteRenderer",{enumerable:!0,get:function(){return i(v).default}});var y=t("./sprites/canvas/CanvasTinter");Object.defineProperty(r,"CanvasTinter",{enumerable:!0,get:function(){return i(y).default}});var g=t("./sprites/webgl/SpriteRenderer");Object.defineProperty(r,"SpriteRenderer",{enumerable:!0,get:function(){return i(g).default}});var m=t("./text/Text");Object.defineProperty(r,"Text",{enumerable:!0,get:function(){return i(m).default}});var _=t("./text/TextStyle");Object.defineProperty(r,"TextStyle",{enumerable:!0,get:function(){return i(_).default}});var b=t("./text/TextMetrics");Object.defineProperty(r,"TextMetrics",{enumerable:!0,get:function(){return i(b).default}});var x=t("./graphics/Graphics");Object.defineProperty(r,"Graphics",{enumerable:!0,get:function(){return i(x).default}});var T=t("./graphics/GraphicsData");Object.defineProperty(r,"GraphicsData",{enumerable:!0,get:function(){return i(T).default}});var w=t("./graphics/webgl/GraphicsRenderer");Object.defineProperty(r,"GraphicsRenderer",{enumerable:!0,get:function(){return i(w).default}});var E=t("./graphics/canvas/CanvasGraphicsRenderer");Object.defineProperty(r,"CanvasGraphicsRenderer",{enumerable:!0,get:function(){return i(E).default}});var S=t("./textures/Spritesheet");Object.defineProperty(r,"Spritesheet",{enumerable:!0,get:function(){return i(S).default}});var O=t("./textures/Texture");Object.defineProperty(r,"Texture",{enumerable:!0,get:function(){return i(O).default}});var M=t("./textures/BaseTexture");Object.defineProperty(r,"BaseTexture",{enumerable:!0,get:function(){return i(M).default}});var P=t("./textures/RenderTexture");Object.defineProperty(r,"RenderTexture",{enumerable:!0,get:function(){return i(P).default}});var C=t("./textures/BaseRenderTexture");Object.defineProperty(r,"BaseRenderTexture",{enumerable:!0,get:function(){return i(C).default}});var R=t("./textures/VideoBaseTexture");Object.defineProperty(r,"VideoBaseTexture",{enumerable:!0,get:function(){return i(R).default}});var A=t("./textures/TextureUvs");Object.defineProperty(r,"TextureUvs",{enumerable:!0,get:function(){return i(A).default}});var I=t("./renderers/canvas/utils/CanvasRenderTarget");Object.defineProperty(r,"CanvasRenderTarget",{enumerable:!0,get:function(){return i(I).default}});var D=t("./Shader");Object.defineProperty(r,"Shader",{enumerable:!0,get:function(){return i(D).default}});var L=t("./renderers/webgl/managers/WebGLManager");Object.defineProperty(r,"WebGLManager",{enumerable:!0,get:function(){return i(L).default}});var N=t("./renderers/webgl/utils/ObjectRenderer");Object.defineProperty(r,"ObjectRenderer",{enumerable:!0,get:function(){return i(N).default}});var F=t("./renderers/webgl/utils/RenderTarget");Object.defineProperty(r,"RenderTarget",{enumerable:!0,get:function(){return i(F).default}});var B=t("./renderers/webgl/utils/Quad");Object.defineProperty(r,"Quad",{enumerable:!0,get:function(){return i(B).default}});var k=t("./renderers/webgl/filters/spriteMask/SpriteMaskFilter");Object.defineProperty(r,"SpriteMaskFilter",{enumerable:!0,get:function(){return i(k).default}});var j=t("./renderers/webgl/filters/Filter");Object.defineProperty(r,"Filter",{enumerable:!0,get:function(){return i(j).default}});var U=t("./Application");Object.defineProperty(r,"Application",{enumerable:!0,get:function(){return i(U).default}});var X=t("./autoDetectRenderer");Object.defineProperty(r,"autoDetectRenderer",{enumerable:!0,get:function(){return X.autoDetectRenderer}});var G=t("./utils"),W=n(G),H=t("./ticker"),Y=n(H),V=t("./settings"),z=i(V),q=t("./renderers/canvas/CanvasRenderer"),K=i(q),Z=t("./renderers/webgl/WebGLRenderer"),J=i(Z);r.settings=z.default,r.utils=W,r.ticker=Y,r.CanvasRenderer=K.default,r.WebGLRenderer=J.default},{"./Application":43,"./Shader":44,"./autoDetectRenderer":45,"./const":46,"./display/Bounds":47,"./display/Container":48,"./display/DisplayObject":49,"./display/Transform":50,"./display/TransformBase":51,"./display/TransformStatic":52,"./graphics/Graphics":53,"./graphics/GraphicsData":54,"./graphics/canvas/CanvasGraphicsRenderer":55,"./graphics/webgl/GraphicsRenderer":57,"./math":70,"./renderers/canvas/CanvasRenderer":77,"./renderers/canvas/utils/CanvasRenderTarget":79,"./renderers/webgl/WebGLRenderer":84,"./renderers/webgl/filters/Filter":86,"./renderers/webgl/filters/spriteMask/SpriteMaskFilter":89,"./renderers/webgl/managers/WebGLManager":93,"./renderers/webgl/utils/ObjectRenderer":94,"./renderers/webgl/utils/Quad":95,"./renderers/webgl/utils/RenderTarget":96,"./settings":101,"./sprites/Sprite":102,"./sprites/canvas/CanvasSpriteRenderer":103,"./sprites/canvas/CanvasTinter":104,"./sprites/webgl/SpriteRenderer":106,"./text/Text":108,"./text/TextMetrics":109,"./text/TextStyle":110,"./textures/BaseRenderTexture":111,"./textures/BaseTexture":112,"./textures/RenderTexture":113,"./textures/Spritesheet":114,"./textures/Texture":115,"./textures/TextureUvs":116,"./textures/VideoBaseTexture":117,"./ticker":120,"./utils":124,"pixi-gl-core":15}],66:[function(t,e,r){"use strict";function n(t){return t<0?-1:t>0?1:0}r.__esModule=!0;var i=t("./Matrix"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=[1,1,0,-1,-1,-1,0,1,1,1,0,-1,-1,-1,0,1],a=[0,1,1,1,0,-1,-1,-1,0,1,1,1,0,-1,-1,-1],u=[0,-1,-1,-1,0,1,1,1,0,1,1,1,0,-1,-1,-1],h=[1,1,0,-1,-1,-1,0,1,-1,-1,0,1,1,1,0,-1],l=[],c=[];!function(){for(var t=0;t<16;t++){var e=[];c.push(e);for(var r=0;r<16;r++)for(var i=n(s[t]*s[r]+u[t]*a[r]),d=n(a[t]*s[r]+h[t]*a[r]),f=n(s[t]*u[r]+u[t]*h[r]),p=n(a[t]*u[r]+h[t]*h[r]),v=0;v<16;v++)if(s[v]===i&&a[v]===d&&u[v]===f&&h[v]===p){e.push(v);break}}for(var y=0;y<16;y++){var g=new o.default;g.set(s[y],a[y],u[y],h[y],0,0),l.push(g)}}();var d={E:0,SE:1,S:2,SW:3,W:4,NW:5,N:6,NE:7,MIRROR_VERTICAL:8,MIRROR_HORIZONTAL:12,uX:function(t){return s[t]},uY:function(t){return a[t]},vX:function(t){return u[t]},vY:function(t){return h[t]},inv:function(t){return 8&t?15&t:7&-t},add:function(t,e){return c[t][e]},sub:function(t,e){return c[t][d.inv(e)]},rotate180:function(t){return 4^t},isSwapWidthHeight:function(t){return 2==(3&t)},byDirection:function(t,e){return 2*Math.abs(t)<=Math.abs(e)?e>=0?d.S:d.N:2*Math.abs(e)<=Math.abs(t)?t>0?d.E:d.W:e>0?t>0?d.SE:d.SW:t>0?d.NE:d.NW},matrixAppendRotationInv:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=l[d.inv(e)];i.tx=r,i.ty=n,t.append(i)}};r.default=d},{"./Matrix":67}],67:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:1,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;n(this,t),this.a=e,this.b=r,this.c=i,this.d=o,this.tx=s,this.ty=a,this.array=null}return t.prototype.fromArray=function(t){this.a=t[0],this.b=t[1],this.c=t[3],this.d=t[4],this.tx=t[2],this.ty=t[5]},t.prototype.set=function(t,e,r,n,i,o){return this.a=t,this.b=e,this.c=r,this.d=n,this.tx=i,this.ty=o,this},t.prototype.toArray=function(t,e){this.array||(this.array=new Float32Array(9));var r=e||this.array;return t?(r[0]=this.a,r[1]=this.b,r[2]=0,r[3]=this.c,r[4]=this.d,r[5]=0,r[6]=this.tx,r[7]=this.ty,r[8]=1):(r[0]=this.a,r[1]=this.c,r[2]=this.tx,r[3]=this.b,r[4]=this.d,r[5]=this.ty,r[6]=0,r[7]=0,r[8]=1),r},t.prototype.apply=function(t,e){e=e||new s.default;var r=t.x,n=t.y;return e.x=this.a*r+this.c*n+this.tx,e.y=this.b*r+this.d*n+this.ty,e},t.prototype.applyInverse=function(t,e){e=e||new s.default;var r=1/(this.a*this.d+this.c*-this.b),n=t.x,i=t.y;return e.x=this.d*r*n+-this.c*r*i+(this.ty*this.c-this.tx*this.d)*r,e.y=this.a*r*i+-this.b*r*n+(-this.ty*this.a+this.tx*this.b)*r,e},t.prototype.translate=function(t,e){return this.tx+=t,this.ty+=e,this},t.prototype.scale=function(t,e){return this.a*=t,this.d*=e,this.c*=t,this.b*=e,this.tx*=t,this.ty*=e,this},t.prototype.rotate=function(t){var e=Math.cos(t),r=Math.sin(t),n=this.a,i=this.c,o=this.tx;return this.a=n*e-this.b*r,this.b=n*r+this.b*e,this.c=i*e-this.d*r,this.d=i*r+this.d*e,this.tx=o*e-this.ty*r,this.ty=o*r+this.ty*e,this},t.prototype.append=function(t){var e=this.a,r=this.b,n=this.c,i=this.d;return this.a=t.a*e+t.b*n,this.b=t.a*r+t.b*i,this.c=t.c*e+t.d*n,this.d=t.c*r+t.d*i,this.tx=t.tx*e+t.ty*n+this.tx,this.ty=t.tx*r+t.ty*i+this.ty,this},t.prototype.setTransform=function(t,e,r,n,i,o,s,a,u){var h=Math.sin(s),l=Math.cos(s),c=Math.cos(u),d=Math.sin(u),f=-Math.sin(a),p=Math.cos(a),v=l*i,y=h*i,g=-h*o,m=l*o;return this.a=c*v+d*g,this.b=c*y+d*m,this.c=f*v+p*g,this.d=f*y+p*m,this.tx=t+(r*v+n*g),this.ty=e+(r*y+n*m),this},t.prototype.prepend=function(t){var e=this.tx;if(1!==t.a||0!==t.b||0!==t.c||1!==t.d){var r=this.a,n=this.c;this.a=r*t.a+this.b*t.c,this.b=r*t.b+this.b*t.d,this.c=n*t.a+this.d*t.c,this.d=n*t.b+this.d*t.d}return this.tx=e*t.a+this.ty*t.c+t.tx,this.ty=e*t.b+this.ty*t.d+t.ty,this},t.prototype.decompose=function(t){var e=this.a,r=this.b,n=this.c,i=this.d,o=-Math.atan2(-n,i),s=Math.atan2(r,e);return Math.abs(o+s)<1e-5?(t.rotation=s,e<0&&i>=0&&(t.rotation+=t.rotation<=0?Math.PI:-Math.PI),t.skew.x=t.skew.y=0):(t.skew.x=o,t.skew.y=s),t.scale.x=Math.sqrt(e*e+r*r),t.scale.y=Math.sqrt(n*n+i*i),t.position.x=this.tx,t.position.y=this.ty,t},t.prototype.invert=function(){var t=this.a,e=this.b,r=this.c,n=this.d,i=this.tx,o=t*n-e*r;return this.a=n/o,this.b=-e/o,this.c=-r/o,this.d=t/o,this.tx=(r*this.ty-n*i)/o,this.ty=-(t*this.ty-e*i)/o,this},t.prototype.identity=function(){return this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0,this},t.prototype.clone=function(){var e=new t;return e.a=this.a,e.b=this.b,e.c=this.c,e.d=this.d,e.tx=this.tx,e.ty=this.ty,e},t.prototype.copy=function(t){return t.a=this.a,t.b=this.b,t.c=this.c,t.d=this.d,t.tx=this.tx,t.ty=this.ty,t},i(t,null,[{key:"IDENTITY",get:function(){return new t}},{key:"TEMP_MATRIX",get:function(){return new t}}]),t}();r.default=a},{"./Point":69}],68:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;n(this,t),this._x=i,this._y=o,this.cb=e,this.scope=r}return t.prototype.set=function(t,e){var r=t||0,n=e||(0!==e?r:0);this._x===r&&this._y===n||(this._x=r,this._y=n,this.cb.call(this.scope))},t.prototype.copy=function(t){this._x===t.x&&this._y===t.y||(this._x=t.x,this._y=t.y,this.cb.call(this.scope))},i(t,[{key:"x",get:function(){return this._x},set:function(t){this._x!==t&&(this._x=t,this.cb.call(this.scope))}},{key:"y",get:function(){return this._y},set:function(t){this._y!==t&&(this._y=t,this.cb.call(this.scope))}}]),t}();r.default=o},{}],69:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;n(this,t),this.x=e,this.y=r}return t.prototype.clone=function(){return new t(this.x,this.y)},t.prototype.copy=function(t){this.set(t.x,t.y)},t.prototype.equals=function(t){return t.x===this.x&&t.y===this.y},t.prototype.set=function(t,e){this.x=t||0,this.y=e||(0!==e?this.x:0)},t}();r.default=i},{}],70:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}r.__esModule=!0;var i=t("./Point");Object.defineProperty(r,"Point",{enumerable:!0,get:function(){return n(i).default}});var o=t("./ObservablePoint");Object.defineProperty(r,"ObservablePoint",{enumerable:!0,get:function(){return n(o).default}});var s=t("./Matrix");Object.defineProperty(r,"Matrix",{enumerable:!0,get:function(){return n(s).default}});var a=t("./GroupD8");Object.defineProperty(r,"GroupD8",{enumerable:!0,get:function(){return n(a).default}});var u=t("./shapes/Circle");Object.defineProperty(r,"Circle",{enumerable:!0,get:function(){return n(u).default}});var h=t("./shapes/Ellipse");Object.defineProperty(r,"Ellipse",{enumerable:!0,get:function(){return n(h).default}});var l=t("./shapes/Polygon");Object.defineProperty(r,"Polygon",{enumerable:!0,get:function(){return n(l).default}});var c=t("./shapes/Rectangle");Object.defineProperty(r,"Rectangle",{enumerable:!0,get:function(){return n(c).default}});var d=t("./shapes/RoundedRectangle");Object.defineProperty(r,"RoundedRectangle",{enumerable:!0,get:function(){return n(d).default}})},{"./GroupD8":66,"./Matrix":67,"./ObservablePoint":68,"./Point":69,"./shapes/Circle":71,"./shapes/Ellipse":72,"./shapes/Polygon":73,"./shapes/Rectangle":74,"./shapes/RoundedRectangle":75}],71:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("./Rectangle"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=t("../../const"),a=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;n(this,t),this.x=e,this.y=r,this.radius=i,this.type=s.SHAPES.CIRC}return t.prototype.clone=function(){return new t(this.x,this.y,this.radius)},t.prototype.contains=function(t,e){if(this.radius<=0)return!1;var r=this.radius*this.radius,n=this.x-t,i=this.y-e;return n*=n,i*=i,n+i<=r},t.prototype.getBounds=function(){return new o.default(this.x-this.radius,this.y-this.radius,2*this.radius,2*this.radius)},t}();r.default=a},{"../../const":46,"./Rectangle":74}],72:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("./Rectangle"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=t("../../const"),a=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;n(this,t),this.x=e,this.y=r,this.width=i,this.height=o,this.type=s.SHAPES.ELIP}return t.prototype.clone=function(){return new t(this.x,this.y,this.width,this.height)},t.prototype.contains=function(t,e){if(this.width<=0||this.height<=0)return!1;var r=(t-this.x)/this.width,n=(e-this.y)/this.height;return r*=r,n*=n,r+n<=1},t.prototype.getBounds=function(){return new o.default(this.x-this.width,this.y-this.height,this.width,this.height)},t}();r.default=a},{"../../const":46,"./Rectangle":74}],73:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("../Point"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=t("../../const"),a=function(){function t(){for(var e=arguments.length,r=Array(e),i=0;ie!=h>e&&t<(e-a)/(h-a)*(u-s)+s&&(r=!r)}return r},t}();r.default=a},{"../../const":46,"../Point":69}],74:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;n(this,t),this.x=Number(e),this.y=Number(r),this.width=Number(i),this.height=Number(s),this.type=o.SHAPES.RECT}return t.prototype.clone=function(){return new t(this.x,this.y,this.width,this.height)},t.prototype.copy=function(t){return this.x=t.x,this.y=t.y,this.width=t.width,this.height=t.height,this},t.prototype.contains=function(t,e){return!(this.width<=0||this.height<=0)&&(t>=this.x&&t=this.y&&et.x+t.width&&(this.width=t.width-this.x,this.width<0&&(this.width=0)),this.y+this.height>t.y+t.height&&(this.height=t.height-this.y,this.height<0&&(this.height=0))},t.prototype.enlarge=function(t){var e=Math.min(this.x,t.x),r=Math.max(this.x+this.width,t.x+t.width),n=Math.min(this.y,t.y),i=Math.max(this.y+this.height,t.y+t.height);this.x=e,this.width=r-e,this.y=n,this.height=i-n},i(t,[{key:"left",get:function(){return this.x}},{key:"right",get:function(){return this.x+this.width}},{key:"top",get:function(){return this.y}},{key:"bottom",get:function(){return this.y+this.height}}],[{key:"EMPTY",get:function(){return new t(0,0,0,0)}}]),t}();r.default=s},{"../../const":46}],75:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("../../const"),o=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:20;n(this,t),this.x=e,this.y=r,this.width=o,this.height=s,this.radius=a,this.type=i.SHAPES.RREC}return t.prototype.clone=function(){return new t(this.x,this.y,this.width,this.height,this.radius)},t.prototype.contains=function(t,e){if(this.width<=0||this.height<=0)return!1;if(t>=this.x&&t<=this.x+this.width&&e>=this.y&&e<=this.y+this.height){if(e>=this.y+this.radius&&e<=this.y+this.height-this.radius||t>=this.x+this.radius&&t<=this.x+this.width-this.radius)return!0;var r=t-(this.x+this.radius),n=e-(this.y+this.radius),i=this.radius*this.radius;if(r*r+n*n<=i)return!0;if((r=t-(this.x+this.width-this.radius))*r+n*n<=i)return!0;if(n=e-(this.y+this.height-this.radius),r*r+n*n<=i)return!0;if((r=t-(this.x+this.radius))*r+n*n<=i)return!0}return!1},t}();r.default=o},{"../../const":46}],76:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var a=function(){function t(t,e){for(var r=0;rE?E:w,e.moveTo(_,b+w),e.lineTo(_,b+T-w),e.quadraticCurveTo(_,b+T,_+w,b+T),e.lineTo(_+x-w,b+T),e.quadraticCurveTo(_+x,b+T,_+x,b+T-w),e.lineTo(_+x,b+w),e.quadraticCurveTo(_+x,b,_+x-w,b),e.lineTo(_+w,b),e.quadraticCurveTo(_,b,_,b+w),e.closePath()}}}},t.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},t.prototype.destroy=function(){},t}();r.default=o},{"../../../const":46}],79:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:[];return(0,s.default)()?(t[i.BLEND_MODES.NORMAL]="source-over",t[i.BLEND_MODES.ADD]="lighter",t[i.BLEND_MODES.MULTIPLY]="multiply",t[i.BLEND_MODES.SCREEN]="screen",t[i.BLEND_MODES.OVERLAY]="overlay",t[i.BLEND_MODES.DARKEN]="darken",t[i.BLEND_MODES.LIGHTEN]="lighten",t[i.BLEND_MODES.COLOR_DODGE]="color-dodge",t[i.BLEND_MODES.COLOR_BURN]="color-burn", +t[i.BLEND_MODES.HARD_LIGHT]="hard-light",t[i.BLEND_MODES.SOFT_LIGHT]="soft-light",t[i.BLEND_MODES.DIFFERENCE]="difference",t[i.BLEND_MODES.EXCLUSION]="exclusion",t[i.BLEND_MODES.HUE]="hue",t[i.BLEND_MODES.SATURATION]="saturate",t[i.BLEND_MODES.COLOR]="color",t[i.BLEND_MODES.LUMINOSITY]="luminosity"):(t[i.BLEND_MODES.NORMAL]="source-over",t[i.BLEND_MODES.ADD]="lighter",t[i.BLEND_MODES.MULTIPLY]="source-over",t[i.BLEND_MODES.SCREEN]="source-over",t[i.BLEND_MODES.OVERLAY]="source-over",t[i.BLEND_MODES.DARKEN]="source-over",t[i.BLEND_MODES.LIGHTEN]="source-over",t[i.BLEND_MODES.COLOR_DODGE]="source-over",t[i.BLEND_MODES.COLOR_BURN]="source-over",t[i.BLEND_MODES.HARD_LIGHT]="source-over",t[i.BLEND_MODES.SOFT_LIGHT]="source-over",t[i.BLEND_MODES.DIFFERENCE]="source-over",t[i.BLEND_MODES.EXCLUSION]="source-over",t[i.BLEND_MODES.HUE]="source-over",t[i.BLEND_MODES.SATURATION]="source-over",t[i.BLEND_MODES.COLOR]="source-over",t[i.BLEND_MODES.LUMINOSITY]="source-over"),t[i.BLEND_MODES.NORMAL_NPM]=t[i.BLEND_MODES.NORMAL],t[i.BLEND_MODES.ADD_NPM]=t[i.BLEND_MODES.ADD],t[i.BLEND_MODES.SCREEN_NPM]=t[i.BLEND_MODES.SCREEN],t}r.__esModule=!0,r.default=n;var i=t("../../../const"),o=t("./canUseNewCanvasBlendModes"),s=function(t){return t&&t.__esModule?t:{default:t}}(o)},{"../../../const":46,"./canUseNewCanvasBlendModes":80}],82:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("../../const"),o=t("../../settings"),s=function(t){return t&&t.__esModule?t:{default:t}}(o),a=function(){function t(e){n(this,t),this.renderer=e,this.count=0,this.checkCount=0,this.maxIdle=s.default.GC_MAX_IDLE,this.checkCountMax=s.default.GC_MAX_CHECK_COUNT,this.mode=s.default.GC_MODE}return t.prototype.update=function(){this.count++,this.mode!==i.GC_MODES.MANUAL&&++this.checkCount>this.checkCountMax&&(this.checkCount=0,this.run())},t.prototype.run=function(){for(var t=this.renderer.textureManager,e=t._managedTextures,r=!1,n=0;nthis.maxIdle&&(t.destroyTexture(i,!0),e[n]=null,r=!0)}if(r){for(var o=0,s=0;s=0;r--)this.unload(t.children[r])},t}();r.default=a},{"../../const":46,"../../settings":101}],83:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("pixi-gl-core"),o=t("../../const"),s=t("./utils/RenderTarget"),a=function(t){return t&&t.__esModule?t:{default:t}}(s),u=t("../../utils"),h=function(){function t(e){n(this,t),this.renderer=e,this.gl=e.gl,this._managedTextures=[]}return t.prototype.bindTexture=function(){},t.prototype.getTexture=function(){},t.prototype.updateTexture=function(t,e){var r=this.gl,n=!!t._glRenderTargets;if(!t.hasLoaded)return null;var s=this.renderer.boundTextures;if(void 0===e){e=0;for(var u=0;u 0.5)"," {"," color = vec4(1.0, 0.0, 0.0, 1.0);"," }"," else"," {"," color = vec4(0.0, 1.0, 0.0, 1.0);"," }"," gl_FragColor = mix(sample, masky, 0.5);"," gl_FragColor *= sample.a;","}"].join("\n")}}]),t}();r.default=f},{"../../../const":46,"../../../settings":101,"../../../utils":124,"./extractUniformsFromSrc":87}],87:[function(t,e,r){"use strict";function n(t,e,r){var n=i(t),o=i(e);return Object.assign(n,o)}function i(t){for(var e=new RegExp("^(projectionMatrix|uSampler|filterArea|filterClamp)$"),r={},n=void 0,i=t.replace(/\s+/g," ").split(/\s*;\s*/),o=0;o-1){var u=s.split(" "),h=u[1],l=u[2],c=1;l.indexOf("[")>-1&&(n=l.split(/\[|]/),l=n[0],c*=Number(n[1])),l.match(e)||(r[l]={value:a(h,c),name:l,type:h})}}return r}r.__esModule=!0,r.default=n;var o=t("pixi-gl-core"),s=function(t){return t&&t.__esModule?t:{default:t}}(o),a=s.default.shader.defaultValue},{"pixi-gl-core":15}],88:[function(t,e,r){"use strict";function n(t,e,r){var n=t.identity();return n.translate(e.x/r.width,e.y/r.height),n.scale(r.width,r.height),n}function i(t,e,r){var n=t.identity();n.translate(e.x/r.width,e.y/r.height);var i=r.width/e.width,o=r.height/e.height;return n.scale(i,o),n}function o(t,e,r,n){var i=n._texture.baseTexture,o=t.set(r.width,0,0,r.height,e.x,e.y),a=n.worldTransform.copy(s.Matrix.TEMP_MATRIX);return a.invert(),o.prepend(a),o.scale(1/i.width,1/i.height),o.translate(n.anchor.x,n.anchor.y),o}r.__esModule=!0,r.calculateScreenSpaceMatrix=n,r.calculateNormalizedScreenSpaceMatrix=i,r.calculateSpriteMatrix=o;var s=t("../../../math")},{"../../../math":70}],89:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=t("../Filter"),a=function(t){return t&&t.__esModule?t:{default:t}}(s),u=t("../../../../math"),h=(t("path"),function(t){function e(r){n(this,e);var o=new u.Matrix,s=i(this,t.call(this,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nuniform mat3 otherMatrix;\n\nvarying vec2 vMaskCoord;\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n\n vTextureCoord = aTextureCoord;\n vMaskCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;\n}\n","varying vec2 vMaskCoord;\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float alpha;\nuniform sampler2D mask;\n\nvoid main(void)\n{\n // check clip! this will stop the mask bleeding out from the edges\n vec2 text = abs( vMaskCoord - 0.5 );\n text = step(0.5, text);\n\n float clip = 1.0 - max(text.y, text.x);\n vec4 original = texture2D(uSampler, vTextureCoord);\n vec4 masky = texture2D(mask, vMaskCoord);\n\n original *= (masky.r * masky.a * alpha * clip);\n\n gl_FragColor = original;\n}\n"));return r.renderable=!1,s.maskSprite=r,s.maskMatrix=o,s}return o(e,t),e.prototype.apply=function(t,e,r){var n=this.maskSprite;this.uniforms.mask=n._texture,this.uniforms.otherMatrix=t.calculateSpriteMatrix(this.maskMatrix,n),this.uniforms.alpha=n.worldAlpha,t.applyFilter(this,e,r)},e}(a.default));r.default=h},{"../../../../math":70,"../Filter":86,path:8}],90:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var a=t("./WebGLManager"),u=n(a),h=t("../utils/RenderTarget"),l=n(h),c=t("../utils/Quad"),d=n(c),f=t("../../../math"),p=t("../../../Shader"),v=n(p),y=t("../filters/filterTransforms"),g=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}(y),m=t("bit-twiddle"),_=n(m),b=function t(){s(this,t),this.renderTarget=null,this.sourceFrame=new f.Rectangle,this.destinationFrame=new f.Rectangle,this.filters=[],this.target=null,this.resolution=1},x=function(t){function e(r){s(this,e);var n=i(this,t.call(this,r));return n.gl=n.renderer.gl,n.quad=new d.default(n.gl,r.state.attribState),n.shaderCache={},n.pool={},n.filterData=null,n.managedFilters=[],n}return o(e,t),e.prototype.pushFilter=function(t,e){var r=this.renderer,n=this.filterData;if(!n){n=this.renderer._activeRenderTarget.filterStack;var i=new b;i.sourceFrame=i.destinationFrame=this.renderer._activeRenderTarget.size,i.renderTarget=r._activeRenderTarget,this.renderer._activeRenderTarget.filterData=n={index:0,stack:[i]},this.filterData=n}var o=n.stack[++n.index];o||(o=n.stack[n.index]=new b);var s=e[0].resolution,a=0|e[0].padding,u=t.filterArea||t.getBounds(!0),h=o.sourceFrame,l=o.destinationFrame;h.x=(u.x*s|0)/s,h.y=(u.y*s|0)/s,h.width=(u.width*s|0)/s,h.height=(u.height*s|0)/s,n.stack[0].renderTarget.transform||e[0].autoFit&&h.fit(n.stack[0].destinationFrame),h.pad(a),l.width=h.width,l.height=h.height;var c=this.getPotRenderTarget(r.gl,h.width,h.height,s);o.target=t,o.filters=e,o.resolution=s,o.renderTarget=c,c.setFrame(l,h),r.bindRenderTarget(c),c.clear()},e.prototype.popFilter=function(){var t=this.filterData,e=t.stack[t.index-1],r=t.stack[t.index];this.quad.map(r.renderTarget.size,r.sourceFrame).upload();var n=r.filters;if(1===n.length)n[0].apply(this,r.renderTarget,e.renderTarget,!1,r),this.freePotRenderTarget(r.renderTarget);else{var i=r.renderTarget,o=this.getPotRenderTarget(this.renderer.gl,r.sourceFrame.width,r.sourceFrame.height,r.resolution);o.setFrame(r.destinationFrame,r.sourceFrame),o.clear();var s=0;for(s=0;s0&&void 0!==arguments[0]&&arguments[0],e=this.renderer,r=this.managedFilters,n=0;n0&&(e+="\nelse "),r1&&void 0!==arguments[1]?arguments[1]:[];return e[i.BLEND_MODES.NORMAL]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.ADD]=[t.ONE,t.DST_ALPHA],e[i.BLEND_MODES.MULTIPLY]=[t.DST_COLOR,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.SCREEN]=[t.ONE,t.ONE_MINUS_SRC_COLOR],e[i.BLEND_MODES.OVERLAY]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.DARKEN]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.LIGHTEN]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.COLOR_DODGE]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.COLOR_BURN]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.HARD_LIGHT]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.SOFT_LIGHT]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.DIFFERENCE]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.EXCLUSION]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.HUE]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.SATURATION]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.COLOR]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.LUMINOSITY]=[t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.NORMAL_NPM]=[t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA,t.ONE,t.ONE_MINUS_SRC_ALPHA],e[i.BLEND_MODES.ADD_NPM]=[t.SRC_ALPHA,t.DST_ALPHA,t.ONE,t.DST_ALPHA],e[i.BLEND_MODES.SCREEN_NPM]=[t.SRC_ALPHA,t.ONE_MINUS_SRC_COLOR,t.ONE,t.ONE_MINUS_SRC_COLOR],e}r.__esModule=!0,r.default=n;var i=t("../../../const")},{"../../../const":46}],99:[function(t,e,r){"use strict";function n(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e[i.DRAW_MODES.POINTS]=t.POINTS,e[i.DRAW_MODES.LINES]=t.LINES,e[i.DRAW_MODES.LINE_LOOP]=t.LINE_LOOP,e[i.DRAW_MODES.LINE_STRIP]=t.LINE_STRIP,e[i.DRAW_MODES.TRIANGLES]=t.TRIANGLES,e[i.DRAW_MODES.TRIANGLE_STRIP]=t.TRIANGLE_STRIP,e[i.DRAW_MODES.TRIANGLE_FAN]=t.TRIANGLE_FAN,e}r.__esModule=!0,r.default=n;var i=t("../../../const")},{"../../../const":46}],100:[function(t,e,r){"use strict";function n(t){t.getContextAttributes().stencil||console.warn("Provided WebGL context does not have a stencil buffer, masks may not render correctly")}r.__esModule=!0,r.default=n},{}],101:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}r.__esModule=!0;var i=t("./utils/maxRecommendedTextures"),o=n(i),s=t("./utils/canUploadSameBuffer"),a=n(s);r.default={TARGET_FPMS:.06,MIPMAP_TEXTURES:!0,RESOLUTION:1,FILTER_RESOLUTION:1,SPRITE_MAX_TEXTURES:(0,o.default)(32),SPRITE_BATCH_SIZE:4096,RETINA_PREFIX:/@([0-9\.]+)x/,RENDER_OPTIONS:{view:null,antialias:!1,forceFXAA:!1,autoResize:!1,transparent:!1,backgroundColor:0,clearBeforeRender:!0,preserveDrawingBuffer:!1,roundPixels:!1,width:800,height:600,legacy:!1},TRANSFORM_MODE:0,GC_MODE:0,GC_MAX_IDLE:3600,GC_MAX_CHECK_COUNT:600,WRAP_MODE:0,SCALE_MODE:0,PRECISION_VERTEX:"highp",PRECISION_FRAGMENT:"mediump",CAN_UPLOAD_SAME_BUFFER:(0,a.default)()}},{"./utils/canUploadSameBuffer":121,"./utils/maxRecommendedTextures":126}],102:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r=n&&v.x=i&&v.y>16)+(65280&t)+((255&t)<<16)}},{key:"texture",get:function(){return this._texture},set:function(t){this._texture!==t&&(this._texture=t,this.cachedTint=16777215,this._textureID=-1,this._textureTrimmedID=-1,t&&(t.baseTexture.hasLoaded?this._onTextureUpdate():t.once("update",this._onTextureUpdate,this)))}}]),e}(p.default);r.default=y},{"../const":46,"../display/Container":48,"../math":70,"../textures/Texture":115,"../utils":124}],103:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var o=t("../../renderers/canvas/CanvasRenderer"),s=n(o),a=t("../../const"),u=t("../../math"),h=t("./CanvasTinter"),l=n(h),c=new u.Matrix,d=function(){function t(e){i(this,t),this.renderer=e}return t.prototype.render=function(t){var e=t._texture,r=this.renderer,n=e._frame.width,i=e._frame.height,o=t.transform.worldTransform,s=0,h=0;if(!(e.orig.width<=0||e.orig.height<=0)&&e.baseTexture.source&&(r.setBlendMode(t.blendMode),e.valid)){r.context.globalAlpha=t.worldAlpha;var d=e.baseTexture.scaleMode===a.SCALE_MODES.LINEAR;r.smoothProperty&&r.context[r.smoothProperty]!==d&&(r.context[r.smoothProperty]=d),e.trim?(s=e.trim.width/2+e.trim.x-t.anchor.x*e.orig.width,h=e.trim.height/2+e.trim.y-t.anchor.y*e.orig.height):(s=(.5-t.anchor.x)*e.orig.width,h=(.5-t.anchor.y)*e.orig.height),e.rotate&&(o.copy(c),o=c,u.GroupD8.matrixAppendRotationInv(o,e.rotate,s,h),s=0,h=0),s-=n/2,h-=i/2,r.roundPixels?(r.context.setTransform(o.a,o.b,o.c,o.d,o.tx*r.resolution|0,o.ty*r.resolution|0),s|=0,h|=0):r.context.setTransform(o.a,o.b,o.c,o.d,o.tx*r.resolution,o.ty*r.resolution);var f=e.baseTexture.resolution;16777215!==t.tint?(t.cachedTint===t.tint&&t.tintedTexture.tintId===t._texture._updateID||(t.cachedTint=t.tint,t.tintedTexture=l.default.getTintedTexture(t,t.tint)),r.context.drawImage(t.tintedTexture,0,0,n*f,i*f,s*r.resolution,h*r.resolution,n*r.resolution,i*r.resolution)):r.context.drawImage(e.baseTexture.source,e._frame.x*f,e._frame.y*f,n*f,i*f,s*r.resolution,h*r.resolution,n*r.resolution,i*r.resolution)}},t.prototype.destroy=function(){this.renderer=null},t}();r.default=d,s.default.registerPlugin("sprite",d)},{"../../const":46,"../../math":70,"../../renderers/canvas/CanvasRenderer":77,"./CanvasTinter":104}],104:[function(t,e,r){"use strict";r.__esModule=!0;var n=t("../../utils"),i=t("../../renderers/canvas/utils/canUseNewCanvasBlendModes"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s={getTintedTexture:function(t,e){var r=t._texture;e=s.roundColor(e);var n="#"+("00000"+(0|e).toString(16)).substr(-6);r.tintCache=r.tintCache||{};var i=r.tintCache[n],o=void 0;if(i){if(i.tintId===r._updateID)return r.tintCache[n];o=r.tintCache[n]}else o=s.canvas||document.createElement("canvas");if(s.tintMethod(r,e,o),o.tintId=r._updateID,s.convertTintToImage){var a=new Image;a.src=o.toDataURL(),r.tintCache[n]=a}else r.tintCache[n]=o,s.canvas=null;return o},tintWithMultiply:function(t,e,r){var n=r.getContext("2d"),i=t._frame.clone(),o=t.baseTexture.resolution;i.x*=o,i.y*=o,i.width*=o,i.height*=o,r.width=Math.ceil(i.width),r.height=Math.ceil(i.height),n.save(),n.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),n.fillRect(0,0,i.width,i.height),n.globalCompositeOperation="multiply",n.drawImage(t.baseTexture.source,i.x,i.y,i.width,i.height,0,0,i.width,i.height),n.globalCompositeOperation="destination-atop",n.drawImage(t.baseTexture.source,i.x,i.y,i.width,i.height,0,0,i.width,i.height),n.restore()},tintWithOverlay:function(t,e,r){var n=r.getContext("2d"),i=t._frame.clone(),o=t.baseTexture.resolution;i.x*=o,i.y*=o,i.width*=o,i.height*=o,r.width=Math.ceil(i.width),r.height=Math.ceil(i.height),n.save(),n.globalCompositeOperation="copy",n.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),n.fillRect(0,0,i.width,i.height),n.globalCompositeOperation="destination-atop",n.drawImage(t.baseTexture.source,i.x,i.y,i.width,i.height,0,0,i.width,i.height),n.restore()},tintWithPerPixel:function(t,e,r){var i=r.getContext("2d"),o=t._frame.clone(),s=t.baseTexture.resolution;o.x*=s,o.y*=s,o.width*=s,o.height*=s,r.width=Math.ceil(o.width),r.height=Math.ceil(o.height),i.save(),i.globalCompositeOperation="copy",i.drawImage(t.baseTexture.source,o.x,o.y,o.width,o.height,0,0,o.width,o.height),i.restore();for(var a=(0,n.hex2rgb)(e),u=a[0],h=a[1],l=a[2],c=i.getImageData(0,0,o.width,o.height),d=c.data,f=0;f=this.size&&this.flush(),t._texture._uvs&&(this.sprites[this.currentIndex++]=t)},e.prototype.flush=function(){if(0!==this.currentIndex){var t=this.renderer.gl,e=this.MAX_TEXTURES,r=S.default.nextPow2(this.currentIndex),n=S.default.log2(r),i=this.buffers[n],o=this.sprites,s=this.groups,a=i.float32View,u=i.uint32View,h=this.boundTextures,l=this.renderer.boundTextures,c=this.renderer.textureGC.count,d=0,f=void 0,p=void 0,v=1,y=0,g=s[0],m=void 0,_=void 0,T=x.premultiplyBlendMode[o[0]._texture.baseTexture.premultipliedAlpha?1:0][o[0].blendMode];g.textureCount=0,g.start=0,g.blend=T,O++;var E=void 0;for(E=0;E0&&(e+="\nelse "),r0&&(r.shadowColor=e.dropShadowColor);for(var f=Math.cos(e.dropShadowAngle)*e.dropShadowDistance,p=Math.sin(e.dropShadowAngle)*e.dropShadowDistance,v=0;v3&&void 0!==arguments[3]&&arguments[3],i=this._style,o=i.letterSpacing;if(0===o)return void(n?this.context.strokeText(t,e,r):this.context.fillText(t,e,r));for(var s=String.prototype.split.call(t,""),a=e,u=0,h="";u3&&void 0!==arguments[3]?arguments[3]:t._canvas;n=n||r.wordWrap;var o=r.toFontString(),s=t.measureFont(o),a=i.getContext("2d");a.font=o;for(var u=n?t.wordWrap(e,r,i):e,h=u.split(/(?:\r\n|\r|\n)/),l=new Array(h.length),c=0,d=0;d2&&void 0!==arguments[2]?arguments[2]:t._canvas,i=n.getContext("2d"),o="",s=e.split("\n"),a=r.wordWrapWidth,u={},h=0;ha)for(var p=c[d].split(""),v=0;vl?(o+="\n"+y,l=a-g):(0===v&&(o+=" "),o+=y,l-=g)}else{var m=f+i.measureText(" ").width;0===d||m>l?(d>0&&(o+="\n"),o+=c[d],l=a-f):(l-=m,o+=" "+c[d])}}hs;--c){for(var v=0;v=0;r--){var n=e[r].trim();/([\"\'])[^\'\"]+\1/.test(n)||(n='"'+n+'"'),e[r]=n}return this.fontStyle+" "+this.fontVariant+" "+this.fontWeight+" "+t+" "+e.join(",")},a(t,[{key:"align",get:function(){return this._align},set:function(t){this._align!==t&&(this._align=t,this.styleID++)}},{key:"breakWords",get:function(){return this._breakWords},set:function(t){this._breakWords!==t&&(this._breakWords=t,this.styleID++)}},{key:"dropShadow",get:function(){return this._dropShadow},set:function(t){this._dropShadow!==t&&(this._dropShadow=t,this.styleID++)}},{key:"dropShadowAlpha",get:function(){return this._dropShadowAlpha},set:function(t){this._dropShadowAlpha!==t&&(this._dropShadowAlpha=t,this.styleID++)}},{key:"dropShadowAngle",get:function(){return this._dropShadowAngle},set:function(t){this._dropShadowAngle!==t&&(this._dropShadowAngle=t,this.styleID++)}},{key:"dropShadowBlur",get:function(){return this._dropShadowBlur},set:function(t){this._dropShadowBlur!==t&&(this._dropShadowBlur=t,this.styleID++)}},{key:"dropShadowColor",get:function(){return this._dropShadowColor},set:function(t){var e=o(t);this._dropShadowColor!==e&&(this._dropShadowColor=e,this.styleID++)}},{key:"dropShadowDistance",get:function(){return this._dropShadowDistance},set:function(t){this._dropShadowDistance!==t&&(this._dropShadowDistance=t,this.styleID++)}},{key:"fill",get:function(){return this._fill},set:function(t){var e=o(t);this._fill!==e&&(this._fill=e,this.styleID++)}},{key:"fillGradientType",get:function(){return this._fillGradientType},set:function(t){this._fillGradientType!==t&&(this._fillGradientType=t,this.styleID++)}},{key:"fillGradientStops",get:function(){return this._fillGradientStops},set:function(t){s(this._fillGradientStops,t)||(this._fillGradientStops=t,this.styleID++)}},{key:"fontFamily",get:function(){return this._fontFamily},set:function(t){this.fontFamily!==t&&(this._fontFamily=t,this.styleID++)}},{key:"fontSize",get:function(){return this._fontSize},set:function(t){this._fontSize!==t&&(this._fontSize=t,this.styleID++)}},{key:"fontStyle",get:function(){return this._fontStyle},set:function(t){this._fontStyle!==t&&(this._fontStyle=t,this.styleID++)}},{key:"fontVariant",get:function(){return this._fontVariant},set:function(t){this._fontVariant!==t&&(this._fontVariant=t,this.styleID++)}},{key:"fontWeight",get:function(){return this._fontWeight},set:function(t){this._fontWeight!==t&&(this._fontWeight=t,this.styleID++)}},{key:"letterSpacing",get:function(){return this._letterSpacing},set:function(t){this._letterSpacing!==t&&(this._letterSpacing=t,this.styleID++)}},{key:"lineHeight",get:function(){return this._lineHeight},set:function(t){this._lineHeight!==t&&(this._lineHeight=t,this.styleID++)}},{key:"leading",get:function(){return this._leading},set:function(t){this._leading!==t&&(this._leading=t,this.styleID++)}},{key:"lineJoin",get:function(){return this._lineJoin},set:function(t){this._lineJoin!==t&&(this._lineJoin=t,this.styleID++)}},{key:"miterLimit",get:function(){return this._miterLimit},set:function(t){this._miterLimit!==t&&(this._miterLimit=t,this.styleID++)}},{key:"padding",get:function(){return this._padding},set:function(t){this._padding!==t&&(this._padding=t,this.styleID++)}},{key:"stroke",get:function(){return this._stroke},set:function(t){var e=o(t);this._stroke!==e&&(this._stroke=e,this.styleID++)}},{key:"strokeThickness",get:function(){return this._strokeThickness},set:function(t){this._strokeThickness!==t&&(this._strokeThickness=t,this.styleID++)}},{key:"textBaseline",get:function(){return this._textBaseline},set:function(t){this._textBaseline!==t&&(this._textBaseline=t,this.styleID++)}},{key:"trim",get:function(){return this._trim},set:function(t){this._trim!==t&&(this._trim=t,this.styleID++)}},{key:"wordWrap",get:function(){return this._wordWrap},set:function(t){this._wordWrap!==t&&(this._wordWrap=t,this.styleID++)}},{key:"wordWrapWidth",get:function(){return this._wordWrapWidth},set:function(t){this._wordWrapWidth!==t&&(this._wordWrapWidth=t,this.styleID++)}}]),t}();r.default=c},{"../const":46,"../utils":124}],111:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var a=t("./BaseTexture"),u=n(a),h=t("../settings"),l=n(h),c=function(t){function e(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,s=arguments[2],a=arguments[3];i(this,e);var u=o(this,t.call(this,null,s));return u.resolution=a||l.default.RESOLUTION,u.width=r,u.height=n,u.realWidth=u.width*u.resolution,u.realHeight=u.height*u.resolution,u.scaleMode=void 0!==s?s:l.default.SCALE_MODE,u.hasLoaded=!0,u._glRenderTargets={},u._canvasRenderTarget=null,u.valid=!1,u}return s(e,t),e.prototype.resize=function(t,e){t===this.width&&e===this.height||(this.valid=t>0&&e>0,this.width=t,this.height=e,this.realWidth=this.width*this.resolution,this.realHeight=this.height*this.resolution,this.valid&&this.emit("update",this))},e.prototype.destroy=function(){t.prototype.destroy.call(this,!0),this.renderer=null},e}(u.default);r.default=c},{"../settings":101,"./BaseTexture":112}],112:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var a=t("../utils"),u=t("../settings"),h=n(u),l=t("eventemitter3"),c=n(l),d=t("../utils/determineCrossOrigin"),f=n(d),p=t("bit-twiddle"),v=n(p),y=function(t){function e(r,n,s){i(this,e);var u=o(this,t.call(this));return u.uid=(0,a.uid)(),u.touched=0,u.resolution=s||h.default.RESOLUTION,u.width=100,u.height=100,u.realWidth=100,u.realHeight=100,u.scaleMode=void 0!==n?n:h.default.SCALE_MODE,u.hasLoaded=!1,u.isLoading=!1,u.source=null,u.origSource=null,u.imageType=null,u.sourceScale=1,u.premultipliedAlpha=!0,u.imageUrl=null,u.isPowerOfTwo=!1,u.mipmap=h.default.MIPMAP_TEXTURES,u.wrapMode=h.default.WRAP_MODE,u._glTextures={},u._enabled=0,u._virtalBoundId=-1,u._destroyed=!1,u.textureCacheIds=[],r&&u.loadSource(r),u}return s(e,t),e.prototype.update=function(){"svg"!==this.imageType&&(this.realWidth=this.source.naturalWidth||this.source.videoWidth||this.source.width,this.realHeight=this.source.naturalHeight||this.source.videoHeight||this.source.height,this._updateDimensions()),this.emit("update",this)},e.prototype._updateDimensions=function(){this.width=this.realWidth/this.resolution,this.height=this.realHeight/this.resolution,this.isPowerOfTwo=v.default.isPow2(this.realWidth)&&v.default.isPow2(this.realHeight)},e.prototype.loadSource=function(t){var e=this.isLoading;this.hasLoaded=!1,this.isLoading=!1,e&&this.source&&(this.source.onload=null,this.source.onerror=null);var r=!this.source;if(this.source=t,(t.src&&t.complete||t.getContext)&&t.width&&t.height)this._updateImageType(),"svg"===this.imageType?this._loadSvgSource():this._sourceLoaded(),r&&this.emit("loaded",this);else if(!t.getContext){this.isLoading=!0;var n=this;if(t.onload=function(){if(n._updateImageType(),t.onload=null,t.onerror=null,n.isLoading){if(n.isLoading=!1,n._sourceLoaded(),"svg"===n.imageType)return void n._loadSvgSource();n.emit("loaded",n)}},t.onerror=function(){t.onload=null,t.onerror=null,n.isLoading&&(n.isLoading=!1,n.emit("error",n))},t.complete&&t.src){if(t.onload=null,t.onerror=null,"svg"===n.imageType)return void n._loadSvgSource();this.isLoading=!1,t.width&&t.height?(this._sourceLoaded(),e&&this.emit("loaded",this)):e&&this.emit("error",this)}}},e.prototype._updateImageType=function(){if(this.imageUrl){var t=(0,a.decomposeDataUri)(this.imageUrl),e=void 0;if(t&&"image"===t.mediaType){var r=t.subType.split("+")[0];if(!(e=(0,a.getUrlFileExtension)("."+r)))throw new Error("Invalid image type in data URI.")}else(e=(0,a.getUrlFileExtension)(this.imageUrl))||(e="png");this.imageType=e}},e.prototype._loadSvgSource=function(){if("svg"===this.imageType){var t=(0,a.decomposeDataUri)(this.imageUrl);t?this._loadSvgSourceUsingDataUri(t):this._loadSvgSourceUsingXhr()}},e.prototype._loadSvgSourceUsingDataUri=function(t){var e=void 0;if("base64"===t.encoding){if(!atob)throw new Error("Your browser doesn't support base64 conversions.");e=atob(t.data)}else e=t.data;this._loadSvgSourceUsingString(e)},e.prototype._loadSvgSourceUsingXhr=function(){var t=this,e=new XMLHttpRequest;e.onload=function(){if(e.readyState!==e.DONE||200!==e.status)throw new Error("Failed to load SVG using XHR.");t._loadSvgSourceUsingString(e.response)},e.onerror=function(){return t.emit("error",t)},e.open("GET",this.imageUrl,!0),e.send()},e.prototype._loadSvgSourceUsingString=function(t){var r=(0,a.getSvgSize)(t),n=r.width,i=r.height;if(!n||!i)throw new Error("The SVG image must have width and height defined (in pixels), canvas API needs them.");this.realWidth=Math.round(n*this.sourceScale),this.realHeight=Math.round(i*this.sourceScale),this._updateDimensions();var o=document.createElement("canvas");o.width=this.realWidth,o.height=this.realHeight,o._pixiId="canvas_"+(0,a.uid)(),o.getContext("2d").drawImage(this.source,0,0,n,i,0,0,this.realWidth,this.realHeight),this.origSource=this.source,this.source=o,e.addToCache(this,o._pixiId),this.isLoading=!1,this._sourceLoaded(),this.emit("loaded",this)},e.prototype._sourceLoaded=function(){this.hasLoaded=!0,this.update()},e.prototype.destroy=function(){this.imageUrl&&(delete a.TextureCache[this.imageUrl],this.imageUrl=null,navigator.isCocoonJS||(this.source.src="")),this.source=null,this.dispose(),e.removeFromCache(this),this.textureCacheIds=null,this._destroyed=!0},e.prototype.dispose=function(){this.emit("dispose",this)},e.prototype.updateSourceImage=function(t){this.source.src=t,this.loadSource(this.source)},e.fromImage=function(t,r,n,i){var o=a.BaseTextureCache[t];if(!o){var s=new Image;void 0===r&&0!==t.indexOf("data:")?s.crossOrigin=(0,f.default)(t):r&&(s.crossOrigin="string"==typeof r?r:"anonymous"),o=new e(s,n),o.imageUrl=t,i&&(o.sourceScale=i),o.resolution=(0,a.getResolutionOfUrl)(t),s.src=t,e.addToCache(o,t)}return o},e.fromCanvas=function(t,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"canvas";t._pixiId||(t._pixiId=n+"_"+(0,a.uid)());var i=a.BaseTextureCache[t._pixiId];return i||(i=new e(t,r),e.addToCache(i,t._pixiId)),i},e.from=function(t,r,n){if("string"==typeof t)return e.fromImage(t,void 0,r,n);if(t instanceof HTMLImageElement){var i=t.src,o=a.BaseTextureCache[i];return o||(o=new e(t,r),o.imageUrl=i,n&&(o.sourceScale=n),o.resolution=(0,a.getResolutionOfUrl)(i),e.addToCache(o,i)),o}return t instanceof HTMLCanvasElement?e.fromCanvas(t,r):t},e.addToCache=function(t,e){e&&(-1===t.textureCacheIds.indexOf(e)&&t.textureCacheIds.push(e),a.BaseTextureCache[e]=t)},e.removeFromCache=function(t){if("string"==typeof t){var e=a.BaseTextureCache[t];if(e){var r=e.textureCacheIds.indexOf(t);return r>-1&&e.textureCacheIds.splice(r,1),delete a.BaseTextureCache[t],e}}else if(t&&t.textureCacheIds){for(var n=0;n0&&e>0,this._frame.width=this.orig.width=t,this._frame.height=this.orig.height=e,r||this.baseTexture.resize(t,e),this._updateUvs()},e.create=function(t,r,n,i){return new e(new u.default(t,r,n,i))},e}(l.default);r.default=c},{"./BaseRenderTexture":111,"./Texture":115}],114:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r2&&void 0!==arguments[2]?arguments[2]:null;n(this,t),this.baseTexture=e,this.textures={},this.data=r,this.resolution=this._updateResolution(i||this.baseTexture.imageUrl),this._frames=this.data.frames,this._frameKeys=Object.keys(this._frames),this._batchIndex=0,this._callback=null}return i(t,null,[{key:"BATCH_SIZE",get:function(){return 1e3}}]),t.prototype._updateResolution=function(t){var e=this.data.meta.scale,r=(0,s.getResolutionOfUrl)(t,null);return null===r&&(r=void 0!==e?parseFloat(e):1),1!==r&&(this.baseTexture.resolution=r,this.baseTexture.update()),r},t.prototype.parse=function(e){this._batchIndex=0,this._callback=e,this._frameKeys.length<=t.BATCH_SIZE?(this._processFrames(0),this._parseComplete()):this._nextBatch()},t.prototype._processFrames=function(e){for(var r=e,n=t.BATCH_SIZE,i=this.baseTexture.sourceScale;r-e0&&void 0!==arguments[0]&&arguments[0];for(var e in this.textures)this.textures[e].destroy();this._frames=null,this._frameKeys=null,this.data=null,this.textures=null,t&&this.baseTexture.destroy(),this.baseTexture=null},t}();r.default=a},{"../":65,"../utils":124}],115:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t){t.destroy=function(){},t.on=function(){},t.once=function(){},t.emit=function(){}}r.__esModule=!0;var u=function(){function t(t,e){for(var r=0;r2&&void 0!==arguments[2]?arguments[2]:"canvas";return new e(l.default.fromCanvas(t,r,n))},e.fromVideo=function(t,r){return"string"==typeof t?e.fromVideoUrl(t,r):new e(d.default.fromVideo(t,r))},e.fromVideoUrl=function(t,r){return new e(d.default.fromUrl(t,r))},e.from=function(t){if("string"==typeof t){var r=m.TextureCache[t];if(!r){return null!==t.match(/\.(mp4|webm|ogg|h264|avi|mov)$/)?e.fromVideoUrl(t):e.fromImage(t)}return r}return t instanceof HTMLImageElement?new e(l.default.from(t)):t instanceof HTMLCanvasElement?e.fromCanvas(t,b.default.SCALE_MODE,"HTMLCanvasElement"):t instanceof HTMLVideoElement?e.fromVideo(t):t instanceof l.default?new e(t):t},e.fromLoader=function(t,r,n){var i=new l.default(t,void 0,(0,m.getResolutionOfUrl)(r)),o=new e(i);return i.imageUrl=r,n||(n=r),l.default.addToCache(o.baseTexture,n),e.addToCache(o,n),n!==r&&(l.default.addToCache(o.baseTexture,r),e.addToCache(o,r)),o},e.addToCache=function(t,e){e&&(-1===t.textureCacheIds.indexOf(e)&&t.textureCacheIds.push(e),m.TextureCache[e]=t)},e.removeFromCache=function(t){if("string"==typeof t){var e=m.TextureCache[t];if(e){var r=e.textureCacheIds.indexOf(t);return r>-1&&e.textureCacheIds.splice(r,1),delete m.TextureCache[t],e}}else if(t&&t.textureCacheIds){for(var n=0;nthis.baseTexture.width,s=r+i>this.baseTexture.height;if(o||s){var a=o&&s?"and":"or",u="X: "+e+" + "+n+" = "+(e+n)+" > "+this.baseTexture.width,h="Y: "+r+" + "+i+" = "+(r+i)+" > "+this.baseTexture.height;throw new Error("Texture Error: frame does not fit inside the base Texture dimensions: "+u+" "+a+" "+h)}this.valid=n&&i&&this.baseTexture.hasLoaded,this.trim||this.rotate||(this.orig=t),this.valid&&this._updateUvs()}},{key:"rotate",get:function(){return this._rotate},set:function(t){this._rotate=t,this.valid&&this._updateUvs()}},{key:"width",get:function(){return this.orig.width}},{key:"height",get:function(){return this.orig.height}}]),e}(y.default);r.default=x,x.EMPTY=new x(new l.default),a(x.EMPTY),a(x.EMPTY.baseTexture),x.WHITE=function(){var t=document.createElement("canvas");t.width=10,t.height=10;var e=t.getContext("2d");return e.fillStyle="white",e.fillRect(0,0,10,10),new x(new l.default(t))}(),a(x.WHITE),a(x.WHITE.baseTexture)},{"../math":70,"../settings":101,"../utils":124,"./BaseTexture":112,"./TextureUvs":116,"./VideoBaseTexture":117,eventemitter3:3}],116:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("../math/GroupD8"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=function(){function t(){n(this,t),this.x0=0,this.y0=0,this.x1=1,this.y1=0,this.x2=1,this.y2=1,this.x3=0,this.y3=1,this.uvsUint32=new Uint32Array(4)}return t.prototype.set=function(t,e,r){var n=e.width,i=e.height;if(r){var s=t.width/2/n,a=t.height/2/i,u=t.x/n+s,h=t.y/i+a;r=o.default.add(r,o.default.NW),this.x0=u+s*o.default.uX(r),this.y0=h+a*o.default.uY(r),r=o.default.add(r,2),this.x1=u+s*o.default.uX(r),this.y1=h+a*o.default.uY(r),r=o.default.add(r,2),this.x2=u+s*o.default.uX(r),this.y2=h+a*o.default.uY(r),r=o.default.add(r,2),this.x3=u+s*o.default.uX(r),this.y3=h+a*o.default.uY(r)}else this.x0=t.x/n,this.y0=t.y/i,this.x1=(t.x+t.width)/n,this.y1=t.y/i,this.x2=(t.x+t.width)/n,this.y2=(t.y+t.height)/i,this.x3=t.x/n,this.y3=(t.y+t.height)/i;this.uvsUint32[0]=(65535*this.y0&65535)<<16|65535*this.x0&65535,this.uvsUint32[1]=(65535*this.y1&65535)<<16|65535*this.x1&65535,this.uvsUint32[2]=(65535*this.y2&65535)<<16|65535*this.x2&65535,this.uvsUint32[3]=(65535*this.y3&65535)<<16|65535*this.x3&65535},t}();r.default=s},{"../math/GroupD8":66}],117:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e){e||(e="video/"+t.substr(t.lastIndexOf(".")+1));var r=document.createElement("source");return r.src=t,r.type=e,r}r.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r0&&!1===t.paused&&!1===t.ended&&t.readyState>2},e.prototype._isSourceReady=function(){return 3===this.source.readyState||4===this.source.readyState},e.prototype._onPlayStart=function(){this.hasLoaded||this._onCanPlay(),!this._isAutoUpdating&&this.autoUpdate&&(c.shared.add(this.update,this,d.UPDATE_PRIORITY.HIGH),this._isAutoUpdating=!0)},e.prototype._onPlayStop=function(){this._isAutoUpdating&&(c.shared.remove(this.update,this),this._isAutoUpdating=!1)},e.prototype._onCanPlay=function(){this.hasLoaded=!0,this.source&&(this.source.removeEventListener("canplay",this._onCanPlay),this.source.removeEventListener("canplaythrough",this._onCanPlay),this.width=this.source.videoWidth,this.height=this.source.videoHeight,this.__loaded||(this.__loaded=!0,this.emit("loaded",this)),this._isSourcePlaying()?this._onPlayStart():this.autoPlay&&this.source.play())},e.prototype.destroy=function(){this._isAutoUpdating&&c.shared.remove(this.update,this),this.source&&this.source._pixiId&&(h.default.removeFromCache(this.source._pixiId),delete this.source._pixiId),t.prototype.destroy.call(this)},e.fromVideo=function(t,r){t._pixiId||(t._pixiId="video_"+(0,l.uid)());var n=l.BaseTextureCache[t._pixiId];return n||(n=new e(t,r),h.default.addToCache(n,t._pixiId)),n},e.fromUrl=function(t,r){var n=document.createElement("video");if(n.setAttribute("webkit-playsinline",""),n.setAttribute("playsinline",""),Array.isArray(t))for(var i=0;i2&&void 0!==arguments[2]?arguments[2]:u.UPDATE_PRIORITY.NORMAL;return this._addListener(new l.default(t,e,r))},t.prototype.addOnce=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:u.UPDATE_PRIORITY.NORMAL;return this._addListener(new l.default(t,e,r,!0))},t.prototype._addListener=function(t){var e=this._head.next,r=this._head;if(e){for(;e;){if(t.priority>e.priority){t.connect(r);break}r=e,e=e.next}t.previous||t.connect(r)}else t.connect(r);return this._startIfPossible(),this},t.prototype.remove=function(t,e){for(var r=this._head.next;r;)r=r.match(t,e)?r.destroy():r.next;return this._head.next||this._cancelIfNeeded(),this},t.prototype.start=function(){this.started||(this.started=!0,this._requestIfNeeded())},t.prototype.stop=function(){this.started&&(this.started=!1,this._cancelIfNeeded())},t.prototype.destroy=function(){this.stop();for(var t=this._head.next;t;)t=t.destroy(!0);this._head.destroy(),this._head=null},t.prototype.update=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:performance.now(),e=void 0;if(t>this.lastTime){e=this.elapsedMS=t-this.lastTime,e>this._maxElapsedMS&&(e=this._maxElapsedMS),this.deltaTime=e*a.default.TARGET_FPMS*this.speed;for(var r=this._head,n=r.next;n;)n=n.emit(this.deltaTime);r.next||this._cancelIfNeeded()}else this.deltaTime=this.elapsedMS=0;this.lastTime=t},o(t,[{key:"FPS",get:function(){return 1e3/this.elapsedMS}},{key:"minFPS",get:function(){return 1e3/this._maxElapsedMS},set:function(t){var e=Math.min(Math.max(0,t)/1e3,a.default.TARGET_FPMS);this._maxElapsedMS=1/e}}]),t}();r.default=c},{"../const":46,"../settings":101,"./TickerListener":119}],119:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]&&arguments[3];n(this,t),this.fn=e,this.context=r,this.priority=i,this.once=o,this.next=null,this.previous=null,this._destroyed=!1}return t.prototype.match=function(t,e){return e=e||null,this.fn===t&&this.context===e},t.prototype.emit=function(t){this.fn&&(this.context?this.fn.call(this.context,t):this.fn(t));var e=this.next;return this.once&&this.destroy(!0),this._destroyed&&(this.next=null),e},t.prototype.connect=function(t){this.previous=t,t.next&&(t.next.previous=this),this.next=t.next,t.next=this},t.prototype.destroy=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this._destroyed=!0,this.fn=null,this.context=null,this.previous&&(this.previous.next=this.next),this.next&&(this.next.previous=this.previous);var e=this.previous;return this.next=t?null:e,this.previous=null,e},t}();r.default=i},{}],120:[function(t,e,r){"use strict";r.__esModule=!0,r.Ticker=r.shared=void 0;var n=t("./Ticker"),i=function(t){return t&&t.__esModule?t:{default:t}}(n),o=new i.default;o.autoStart=!0,o.destroy=function(){},r.shared=o,r.Ticker=i.default},{"./Ticker":118}],121:[function(t,e,r){"use strict";function n(){return!(!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform))}r.__esModule=!0,r.default=n},{}],122:[function(t,e,r){"use strict";function n(t){for(var e=6*t,r=new Uint16Array(e),n=0,i=0;n1&&void 0!==arguments[1]?arguments[1]:window.location;if(0===t.indexOf("data:"))return"";e=e||window.location,s||(s=document.createElement("a")),s.href=t,t=o.default.parse(s.href);var r=!t.port&&""===e.port||t.port===e.port;return t.hostname===e.hostname&&r&&t.protocol===e.protocol?"":"anonymous"}r.__esModule=!0,r.default=n;var i=t("url"),o=function(t){return t&&t.__esModule?t:{default:t}}(i),s=void 0},{url:38}],124:[function(t,e,r){"use strict";function n(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}function i(t){return t&&t.__esModule?t:{default:t}}function o(){return++k}function s(t,e){return e=e||[],e[0]=(t>>16&255)/255,e[1]=(t>>8&255)/255,e[2]=(255&t)/255,e}function a(t){return t=t.toString(16),"#"+(t="000000".substr(0,6-t.length)+t)}function u(t){return(255*t[0]<<16)+(255*t[1]<<8)+(255*t[2]|0)}function h(t,e){var r=S.default.RETINA_PREFIX.exec(t);return r?parseFloat(r[1]):void 0!==e?e:1}function l(t){var e=w.DATA_URI.exec(t);if(e)return{mediaType:e[1]?e[1].toLowerCase():void 0,subType:e[2]?e[2].toLowerCase():void 0,encoding:e[3]?e[3].toLowerCase():void 0,data:e[4]}}function c(t){var e=w.URL_FILE_EXTENSION.exec(t);if(e)return e[1].toLowerCase()}function d(t){var e=w.SVG_SIZE.exec(t),r={};return e&&(r[e[1]]=Math.round(parseFloat(e[3])),r[e[5]]=Math.round(parseFloat(e[7]))),r}function f(){j=!0}function p(t){if(!j){if(navigator.userAgent.toLowerCase().indexOf("chrome")>-1){var e=["\n %c %c %c PixiJS "+w.VERSION+" - ✰ "+t+" ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n","background: #ff66a5; padding:5px 0;","background: #ff66a5; padding:5px 0;","color: #ff66a5; background: #030307; padding:5px 0;","background: #ff66a5; padding:5px 0;","background: #ffc3dc; padding:5px 0;","background: #ff66a5; padding:5px 0;","color: #ff2424; background: #fff; padding:5px 0;","color: #ff2424; background: #fff; padding:5px 0;","color: #ff2424; background: #fff; padding:5px 0;"];window.console.log.apply(console,e)}else window.console&&window.console.log("PixiJS "+w.VERSION+" - "+t+" - http://www.pixijs.com/");j=!0}}function v(){var t={stencil:!0,failIfMajorPerformanceCaveat:!0};try{if(!window.WebGLRenderingContext)return!1;var e=document.createElement("canvas"),r=e.getContext("webgl",t)||e.getContext("experimental-webgl",t),n=!(!r||!r.getContextAttributes().stencil);if(r){var i=r.getExtension("WEBGL_lose_context");i&&i.loseContext()}return r=null,n}catch(t){return!1}}function y(t){return 0===t?0:t<0?-1:1}function g(){var t=void 0;for(t in U)U[t].destroy();for(t in X)X[t].destroy()}function m(){var t=void 0;for(t in U)delete U[t];for(t in X)delete X[t]}function _(t,e){return G[e?1:0][t]}function b(t,e){if(1===e)return(255*e<<24)+t;if(0===e)return 0;var r=t>>16&255,n=t>>8&255,i=255&t;return r=r*e+.5|0,n=n*e+.5|0,i=i*e+.5|0,(255*e<<24)+(r<<16)+(n<<8)+i}function x(t,e,r,n){return r=r||new Float32Array(4),n||void 0===n?(r[0]=t[0]*e,r[1]=t[1]*e,r[2]=t[2]*e):(r[0]=t[0],r[1]=t[1],r[2]=t[2]),r[3]=e,r}function T(t,e,r,n){return r=r||new Float32Array(4),r[0]=(t>>16&255)/255,r[1]=(t>>8&255)/255,r[2]=(255&t)/255,(n||void 0===n)&&(r[0]*=e,r[1]*=e,r[2]*=e),r[3]=e,r}r.__esModule=!0,r.premultiplyBlendMode=r.BaseTextureCache=r.TextureCache=r.mixins=r.pluginTarget=r.EventEmitter=r.removeItems=r.isMobile=void 0,r.uid=o,r.hex2rgb=s,r.hex2string=a,r.rgb2hex=u,r.getResolutionOfUrl=h,r.decomposeDataUri=l,r.getUrlFileExtension=c,r.getSvgSize=d,r.skipHello=f,r.sayHello=p,r.isWebGLSupported=v,r.sign=y,r.destroyTextureCache=g,r.clearTextureCache=m,r.correctBlendMode=_,r.premultiplyTint=b,r.premultiplyRgba=x,r.premultiplyTintToRgba=T;var w=t("../const"),E=t("../settings"),S=i(E),O=t("eventemitter3"),M=i(O),P=t("./pluginTarget"),C=i(P),R=t("./mixin"),A=n(R),I=t("ismobilejs"),D=n(I),L=t("remove-array-items"),N=i(L),F=t("./mapPremultipliedBlendModes"),B=i(F),k=0,j=!1;r.isMobile=D,r.removeItems=N.default,r.EventEmitter=M.default,r.pluginTarget=C.default,r.mixins=A;var U=r.TextureCache=Object.create(null),X=r.BaseTextureCache=Object.create(null),G=r.premultiplyBlendMode=(0,B.default)()},{"../const":46,"../settings":101,"./mapPremultipliedBlendModes":125,"./mixin":127,"./pluginTarget":128,eventemitter3:3,ismobilejs:4,"remove-array-items":31}],125:[function(t,e,r){"use strict";function n(){for(var t=[],e=[],r=0;r<32;r++)t[r]=r,e[r]=r;t[i.BLEND_MODES.NORMAL_NPM]=i.BLEND_MODES.NORMAL,t[i.BLEND_MODES.ADD_NPM]=i.BLEND_MODES.ADD,t[i.BLEND_MODES.SCREEN_NPM]=i.BLEND_MODES.SCREEN,e[i.BLEND_MODES.NORMAL]=i.BLEND_MODES.NORMAL_NPM,e[i.BLEND_MODES.ADD]=i.BLEND_MODES.ADD_NPM,e[i.BLEND_MODES.SCREEN]=i.BLEND_MODES.SCREEN_NPM;var n=[];return n.push(e),n.push(t),n}r.__esModule=!0,r.default=n;var i=t("../const")},{"../const":46}],126:[function(t,e,r){"use strict";function n(t){return o.default.tablet||o.default.phone?4:t}r.__esModule=!0,r.default=n;var i=t("ismobilejs"),o=function(t){return t&&t.__esModule?t:{default:t}}(i)},{ismobilejs:4}],127:[function(t,e,r){"use strict";function n(t,e){if(t&&e)for(var r=Object.keys(e),n=0;n1?this._fontStyle="italic":t.indexOf("oblique")>-1?this._fontStyle="oblique":this._fontStyle="normal",t.indexOf("small-caps")>-1?this._fontVariant="small-caps":this._fontVariant="normal";var e=t.split(" "),r=-1;this._fontSize=26;for(var i=0;i-1&&r=this._durations[this.currentFrame];)n-=this._durations[this.currentFrame]*i,this._currentTime+=i;this._currentTime+=n/this._durations[this.currentFrame]}else this._currentTime+=e;this._currentTime<0&&!this.loop?(this.gotoAndStop(0),this.onComplete&&this.onComplete()):this._currentTime>=this._textures.length&&!this.loop?(this.gotoAndStop(this._textures.length-1),this.onComplete&&this.onComplete()):r!==this.currentFrame&&(this.loop&&this.onLoop&&(this.animationSpeed>0&&this.currentFramer&&this.onLoop()),this.updateTexture())},e.prototype.updateTexture=function(){this._texture=this._textures[this.currentFrame],this._textureID=-1,this.cachedTint=16777215,this.onFrameChange&&this.onFrameChange(this.currentFrame)},e.prototype.destroy=function(e){this.stop(),t.prototype.destroy.call(this,e)},e.fromFrames=function(t){for(var r=[],n=0;n1&&void 0!==arguments[1]?arguments[1]:{};i(this,e);var s=o(this,t.call(this));return s._textWidth=0,s._textHeight=0,s._glyphs=[],s._font={tint:void 0!==n.tint?n.tint:16777215,align:n.align||"left",name:null,size:0},s.font=n.font,s._text=r,s._maxWidth=0,s._maxLineHeight=0,s._anchor=new c.default(function(){s.dirty=!0},s,0,0),s.dirty=!1,s.updateText(),s}return s(e,t),e.prototype.updateText=function(){for(var t=e.fonts[this._font.name],r=this._font.size/t.size,n=new h.Point,i=[],o=[],s=null,a=0,u=0,l=0,c=-1,d=0,f=0,p=0,v=0;v0&&n.x*r>this._maxWidth)h.utils.removeItems(i,c-f,v-c),v=c,c=-1,++f,o.push(d),u=Math.max(u,d),l++,n.x=0,n.y+=t.lineHeight,s=null;else{var g=t.chars[y];g&&(s&&g.kerning[s]&&(n.x+=g.kerning[s]),i.push({texture:g.texture,line:l,charCode:y,position:new h.Point(n.x+g.xOffset,n.y+g.yOffset)}),a=n.x+(g.texture.width+g.xOffset),n.x+=g.xAdvance,p=Math.max(p,g.yOffset+g.texture.height),s=y)}}o.push(a),u=Math.max(u,a);for(var m=[],_=0;_<=l;_++){var b=0;"right"===this._font.align?b=u-o[_]:"center"===this._font.align&&(b=(u-o[_])/2),m.push(b)}for(var x=i.length,T=this.tint,w=0;w=0?t:16777215,this.dirty=!0}},{key:"align",get:function(){return this._font.align},set:function(t){this._font.align=t||"left",this.dirty=!0}},{key:"anchor",get:function(){return this._anchor},set:function(t){"number"==typeof t?this._anchor.set(t):this._anchor.copy(t)}},{key:"font",get:function(){return this._font},set:function(t){t&&("string"==typeof t?(t=t.split(" "),this._font.name=1===t.length?t[0]:t.slice(1).join(" "),this._font.size=t.length>=2?parseInt(t[0],10):e.fonts[this._font.name].size):(this._font.name=t.name,this._font.size="number"==typeof t.size?t.size:parseInt(t.size,10)),this.dirty=!0)}},{key:"text",get:function(){return this._text},set:function(t){t=t.toString()||" ",this._text!==t&&(this._text=t,this.dirty=!0)}},{key:"maxWidth",get:function(){return this._maxWidth},set:function(t){this._maxWidth!==t&&(this._maxWidth=t,this.dirty=!0)}},{key:"maxLineHeight",get:function(){return this.validate(),this._maxLineHeight}},{key:"textWidth",get:function(){return this.validate(),this._textWidth}},{key:"textHeight",get:function(){return this.validate(),this._textHeight}}]),e}(h.Container);r.default=p,p.fonts={}},{"../core":65,"../core/math/ObservablePoint":68,"../core/settings":101}],136:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:100,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:100;i(this,e);var a=o(this,t.call(this,r));return a.tileTransform=new h.TransformStatic,a._width=n,a._height=s,a._canvasPattern=null,a.uvTransform=r.transform||new f.default(r),a.pluginName="tilingSprite",a.uvRespectAnchor=!1,a}return s(e,t),e.prototype._onTextureUpdate=function(){this.uvTransform&&(this.uvTransform.texture=this._texture),this.cachedTint=16777215},e.prototype._renderWebGL=function(t){var e=this._texture;e&&e.valid&&(this.tileTransform.updateLocalTransform(),this.uvTransform.update(),t.setObjectRenderer(t.plugins[this.pluginName]),t.plugins[this.pluginName].render(this))},e.prototype._renderCanvas=function(t){var e=this._texture;if(e.baseTexture.hasLoaded){var r=t.context,n=this.worldTransform,i=t.resolution,o=e.baseTexture,s=o.resolution,a=this.tilePosition.x/this.tileScale.x%e._frame.width*s,u=this.tilePosition.y/this.tileScale.y%e._frame.height*s;if(this._textureID!==this._texture._updateID||this.cachedTint!==this.tint){this._textureID=this._texture._updateID;var l=new h.CanvasRenderTarget(e._frame.width,e._frame.height,s);16777215!==this.tint?(this.tintedTexture=c.default.getTintedTexture(this,this.tint),l.context.drawImage(this.tintedTexture,0,0)):l.context.drawImage(o.source,-e._frame.x*s,-e._frame.y*s),this.cachedTint=this.tint,this._canvasPattern=l.context.createPattern(l.canvas,"repeat")}r.globalAlpha=this.worldAlpha,r.setTransform(n.a*i,n.b*i,n.c*i,n.d*i,n.tx*i,n.ty*i),t.setBlendMode(this.blendMode),r.fillStyle=this._canvasPattern,r.scale(this.tileScale.x/s,this.tileScale.y/s);var d=this.anchor.x*-this._width,f=this.anchor.y*-this._height;this.uvRespectAnchor?(r.translate(a,u),r.fillRect(-a+d,-u+f,this._width/this.tileScale.x*s,this._height/this.tileScale.y*s)):(r.translate(a+d,u+f),r.fillRect(-a,-u,this._width/this.tileScale.x*s,this._height/this.tileScale.y*s))}},e.prototype._calculateBounds=function(){var t=this._width*-this._anchor._x,e=this._height*-this._anchor._y,r=this._width*(1-this._anchor._x),n=this._height*(1-this._anchor._y);this._bounds.addFrame(this.transform,t,e,r,n)},e.prototype.getLocalBounds=function(e){return 0===this.children.length?(this._bounds.minX=this._width*-this._anchor._x,this._bounds.minY=this._height*-this._anchor._y,this._bounds.maxX=this._width*(1-this._anchor._x),this._bounds.maxY=this._height*(1-this._anchor._x),e||(this._localBoundsRect||(this._localBoundsRect=new h.Rectangle),e=this._localBoundsRect),this._bounds.getRectangle(e)):t.prototype.getLocalBounds.call(this,e)},e.prototype.containsPoint=function(t){this.worldTransform.applyInverse(t,p);var e=this._width,r=this._height,n=-e*this.anchor._x;if(p.x>=n&&p.x=i&&p.y0&&void 0!==arguments[0]?arguments[0]:new i.Point,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return this.parent?this.parent.toGlobal(this.position,t,e):(t.x=this.position.x,t.y=this.position.y),t}},{"../core":65}],141:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}r.__esModule=!0,r.BitmapText=r.TilingSpriteRenderer=r.TilingSprite=r.TextureTransform=r.AnimatedSprite=void 0;var i=t("./AnimatedSprite");Object.defineProperty(r,"AnimatedSprite",{enumerable:!0,get:function(){return n(i).default}});var o=t("./TextureTransform");Object.defineProperty(r,"TextureTransform",{enumerable:!0,get:function(){return n(o).default}});var s=t("./TilingSprite");Object.defineProperty(r,"TilingSprite",{enumerable:!0,get:function(){return n(s).default}});var a=t("./webgl/TilingSpriteRenderer");Object.defineProperty(r,"TilingSpriteRenderer",{enumerable:!0,get:function(){return n(a).default}});var u=t("./BitmapText");Object.defineProperty(r,"BitmapText",{enumerable:!0,get:function(){return n(u).default}}),t("./cacheAsBitmap"),t("./getChildByName"),t("./getGlobalPosition")},{"./AnimatedSprite":134,"./BitmapText":135,"./TextureTransform":136,"./TilingSprite":137,"./cacheAsBitmap":138,"./getChildByName":139,"./getGlobalPosition":140,"./webgl/TilingSpriteRenderer":142}],142:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=t("../../core"),a=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}(s),u=t("../../core/const"),h=(t("path"),new a.Matrix),l=function(t){function e(r){n(this,e);var o=i(this,t.call(this,r));return o.shader=null,o.simpleShader=null,o.quad=null,o}return o(e,t),e.prototype.onContextChange=function(){var t=this.renderer.gl;this.shader=new a.Shader(t,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nuniform mat3 translationMatrix;\nuniform mat3 uTransform;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n\n vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;\n}\n","varying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec4 uColor;\nuniform mat3 uMapCoord;\nuniform vec4 uClampFrame;\nuniform vec2 uClampOffset;\n\nvoid main(void)\n{\n vec2 coord = mod(vTextureCoord - uClampOffset, vec2(1.0, 1.0)) + uClampOffset;\n coord = (uMapCoord * vec3(coord, 1.0)).xy;\n coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);\n\n vec4 sample = texture2D(uSampler, coord);\n gl_FragColor = sample * uColor;\n}\n"),this.simpleShader=new a.Shader(t,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nuniform mat3 translationMatrix;\nuniform mat3 uTransform;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n\n vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;\n}\n","varying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec4 uColor;\n\nvoid main(void)\n{\n vec4 sample = texture2D(uSampler, vTextureCoord);\n gl_FragColor = sample * uColor;\n}\n"),this.renderer.bindVao(null),this.quad=new a.Quad(t,this.renderer.state.attribState),this.quad.initVao(this.shader)},e.prototype.render=function(t){var e=this.renderer,r=this.quad;e.bindVao(r.vao);var n=r.vertices;n[0]=n[6]=t._width*-t.anchor.x,n[1]=n[3]=t._height*-t.anchor.y,n[2]=n[4]=t._width*(1-t.anchor.x),n[5]=n[7]=t._height*(1-t.anchor.y),t.uvRespectAnchor&&(n=r.uvs,n[0]=n[6]=-t.anchor.x,n[1]=n[3]=-t.anchor.y,n[2]=n[4]=1-t.anchor.x,n[5]=n[7]=1-t.anchor.y),r.upload();var i=t._texture,o=i.baseTexture,s=t.tileTransform.localTransform,l=t.uvTransform,c=o.isPowerOfTwo&&i.frame.width===o.width&&i.frame.height===o.height;c&&(o._glTextures[e.CONTEXT_UID]?c=o.wrapMode!==u.WRAP_MODES.CLAMP:o.wrapMode===u.WRAP_MODES.CLAMP&&(o.wrapMode=u.WRAP_MODES.REPEAT));var d=c?this.simpleShader:this.shader;e.bindShader(d);var f=i.width,p=i.height,v=t._width,y=t._height;h.set(s.a*f/v,s.b*f/y,s.c*p/v,s.d*p/y,s.tx/v,s.ty/y),h.invert(),c?h.prepend(l.mapCoord):(d.uniforms.uMapCoord=l.mapCoord.toArray(!0),d.uniforms.uClampFrame=l.uClampFrame,d.uniforms.uClampOffset=l.uClampOffset),d.uniforms.uTransform=h.toArray(!0),d.uniforms.uColor=a.utils.premultiplyTintToRgba(t.tint,t.worldAlpha,d.uniforms.uColor,o.premultipliedAlpha),d.uniforms.translationMatrix=t.transform.worldTransform.toArray(!0),d.uniforms.uSampler=e.bindTexture(i), +e.setBlendMode(a.utils.correctBlendMode(t.blendMode,o.premultipliedAlpha)),r.vao.draw(this.renderer.gl.TRIANGLES,6,0)},e}(a.ObjectRenderer);r.default=l,a.WebGLRenderer.registerPlugin("tilingSprite",l)},{"../../core":65,"../../core/const":46,path:8}],143:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r=r&&(u=t-h-1),l=l.replace("%value%",e[u]),s+=l,s+="\n"}return n=n.replace("%blur%",s),n=n.replace("%size%",t)}r.__esModule=!0,r.default=n;var i={5:[.153388,.221461,.250301],7:[.071303,.131514,.189879,.214607],9:[.028532,.067234,.124009,.179044,.20236],11:[.0093,.028002,.065984,.121703,.175713,.198596],13:[.002406,.009255,.027867,.065666,.121117,.174868,.197641],15:[489e-6,.002403,.009246,.02784,.065602,.120999,.174697,.197448]},o=["varying vec2 vBlurTexCoords[%size%];","uniform sampler2D uSampler;","void main(void)","{"," gl_FragColor = vec4(0.0);"," %blur%","}"].join("\n")},{}],147:[function(t,e,r){"use strict";function n(t,e){var r=Math.ceil(t/2),n=i,o="",s=void 0;s=e?"vBlurTexCoords[%index%] = aTextureCoord + vec2(%sampleIndex% * strength, 0.0);":"vBlurTexCoords[%index%] = aTextureCoord + vec2(0.0, %sampleIndex% * strength);";for(var a=0;ae;)r-=2;return r}r.__esModule=!0,r.default=n},{}],149:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=function(){function t(t,e){for(var r=0;r 0.0) {\n c.rgb /= c.a;\n }\n\n vec4 result;\n\n result.r = (m[0] * c.r);\n result.r += (m[1] * c.g);\n result.r += (m[2] * c.b);\n result.r += (m[3] * c.a);\n result.r += m[4];\n\n result.g = (m[5] * c.r);\n result.g += (m[6] * c.g);\n result.g += (m[7] * c.b);\n result.g += (m[8] * c.a);\n result.g += m[9];\n\n result.b = (m[10] * c.r);\n result.b += (m[11] * c.g);\n result.b += (m[12] * c.b);\n result.b += (m[13] * c.a);\n result.b += m[14];\n\n result.a = (m[15] * c.r);\n result.a += (m[16] * c.g);\n result.a += (m[17] * c.b);\n result.a += (m[18] * c.a);\n result.a += m[19];\n\n vec3 rgb = mix(c.rgb, result.rgb, uAlpha);\n\n // Premultiply alpha again.\n rgb *= result.a;\n\n gl_FragColor = vec4(rgb, result.a);\n}\n"));return r.uniforms.m=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],r.alpha=1,r}return o(e,t),e.prototype._loadMatrix=function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=t;e&&(this._multiply(r,this.uniforms.m,t),r=this._colorMatrix(r)),this.uniforms.m=r},e.prototype._multiply=function(t,e,r){return t[0]=e[0]*r[0]+e[1]*r[5]+e[2]*r[10]+e[3]*r[15],t[1]=e[0]*r[1]+e[1]*r[6]+e[2]*r[11]+e[3]*r[16],t[2]=e[0]*r[2]+e[1]*r[7]+e[2]*r[12]+e[3]*r[17],t[3]=e[0]*r[3]+e[1]*r[8]+e[2]*r[13]+e[3]*r[18],t[4]=e[0]*r[4]+e[1]*r[9]+e[2]*r[14]+e[3]*r[19]+e[4],t[5]=e[5]*r[0]+e[6]*r[5]+e[7]*r[10]+e[8]*r[15],t[6]=e[5]*r[1]+e[6]*r[6]+e[7]*r[11]+e[8]*r[16],t[7]=e[5]*r[2]+e[6]*r[7]+e[7]*r[12]+e[8]*r[17],t[8]=e[5]*r[3]+e[6]*r[8]+e[7]*r[13]+e[8]*r[18],t[9]=e[5]*r[4]+e[6]*r[9]+e[7]*r[14]+e[8]*r[19]+e[9],t[10]=e[10]*r[0]+e[11]*r[5]+e[12]*r[10]+e[13]*r[15],t[11]=e[10]*r[1]+e[11]*r[6]+e[12]*r[11]+e[13]*r[16],t[12]=e[10]*r[2]+e[11]*r[7]+e[12]*r[12]+e[13]*r[17],t[13]=e[10]*r[3]+e[11]*r[8]+e[12]*r[13]+e[13]*r[18],t[14]=e[10]*r[4]+e[11]*r[9]+e[12]*r[14]+e[13]*r[19]+e[14],t[15]=e[15]*r[0]+e[16]*r[5]+e[17]*r[10]+e[18]*r[15],t[16]=e[15]*r[1]+e[16]*r[6]+e[17]*r[11]+e[18]*r[16],t[17]=e[15]*r[2]+e[16]*r[7]+e[17]*r[12]+e[18]*r[17],t[18]=e[15]*r[3]+e[16]*r[8]+e[17]*r[13]+e[18]*r[18],t[19]=e[15]*r[4]+e[16]*r[9]+e[17]*r[14]+e[18]*r[19]+e[19],t},e.prototype._colorMatrix=function(t){var e=new Float32Array(t);return e[4]/=255,e[9]/=255,e[14]/=255,e[19]/=255,e},e.prototype.brightness=function(t,e){var r=[t,0,0,0,0,0,t,0,0,0,0,0,t,0,0,0,0,0,1,0];this._loadMatrix(r,e)},e.prototype.greyscale=function(t,e){var r=[t,t,t,0,0,t,t,t,0,0,t,t,t,0,0,0,0,0,1,0];this._loadMatrix(r,e)},e.prototype.blackAndWhite=function(t){var e=[.3,.6,.1,0,0,.3,.6,.1,0,0,.3,.6,.1,0,0,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.hue=function(t,e){t=(t||0)/180*Math.PI;var r=Math.cos(t),n=Math.sin(t),i=Math.sqrt,o=1/3,s=i(o),a=r+(1-r)*o,u=o*(1-r)-s*n,h=o*(1-r)+s*n,l=o*(1-r)+s*n,c=r+o*(1-r),d=o*(1-r)-s*n,f=o*(1-r)-s*n,p=o*(1-r)+s*n,v=r+o*(1-r),y=[a,u,h,0,0,l,c,d,0,0,f,p,v,0,0,0,0,0,1,0];this._loadMatrix(y,e)},e.prototype.contrast=function(t,e){var r=(t||0)+1,n=-.5*(r-1),i=[r,0,0,0,n,0,r,0,0,n,0,0,r,0,n,0,0,0,1,0];this._loadMatrix(i,e)},e.prototype.saturate=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments[1],r=2*t/3+1,n=-.5*(r-1),i=[r,n,n,0,0,n,r,n,0,0,n,n,r,0,0,0,0,0,1,0];this._loadMatrix(i,e)},e.prototype.desaturate=function(){this.saturate(-1)},e.prototype.negative=function(t){var e=[0,1,1,0,0,1,0,1,0,0,1,1,0,0,0,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.sepia=function(t){var e=[.393,.7689999,.18899999,0,0,.349,.6859999,.16799999,0,0,.272,.5339999,.13099999,0,0,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.technicolor=function(t){var e=[1.9125277891456083,-.8545344976951645,-.09155508482755585,0,11.793603434377337,-.3087833385928097,1.7658908555458428,-.10601743074722245,0,-70.35205161461398,-.231103377548616,-.7501899197440212,1.847597816108189,0,30.950940869491138,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.polaroid=function(t){var e=[1.438,-.062,-.062,0,0,-.122,1.378,-.122,0,0,-.016,-.016,1.483,0,0,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.toBGR=function(t){var e=[0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.kodachrome=function(t){var e=[1.1285582396593525,-.3967382283601348,-.03992559172921793,0,63.72958762196502,-.16404339962244616,1.0835251566291304,-.05498805115633132,0,24.732407896706203,-.16786010706155763,-.5603416277695248,1.6014850761964943,0,35.62982807460946,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.browni=function(t){var e=[.5997023498159715,.34553243048391263,-.2708298674538042,0,47.43192855600873,-.037703249837783157,.8609577587992641,.15059552388459913,0,-36.96841498319127,.24113635128153335,-.07441037908422492,.44972182064877153,0,-7.562075277591283,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.vintage=function(t){var e=[.6279345635605994,.3202183420819367,-.03965408211312453,0,9.651285835294123,.02578397704808868,.6441188644374771,.03259127616149294,0,7.462829176470591,.0466055556782719,-.0851232987247891,.5241648018700465,0,5.159190588235296,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.colorTone=function(t,e,r,n,i){t=t||.2,e=e||.15,r=r||16770432,n=n||3375104;var o=(r>>16&255)/255,s=(r>>8&255)/255,a=(255&r)/255,u=(n>>16&255)/255,h=(n>>8&255)/255,l=(255&n)/255,c=[.3,.59,.11,0,0,o,s,a,t,0,u,h,l,e,0,o-u,s-h,a-l,0,0];this._loadMatrix(c,i)},e.prototype.night=function(t,e){t=t||.1;var r=[-2*t,-t,0,0,0,-t,0,t,0,0,0,t,2*t,0,0,0,0,0,1,0];this._loadMatrix(r,e)},e.prototype.predator=function(t,e){var r=[11.224130630493164*t,-4.794486999511719*t,-2.8746118545532227*t,0*t,.40342438220977783*t,-3.6330697536468506*t,9.193157196044922*t,-2.951810836791992*t,0*t,-1.316135048866272*t,-3.2184197902679443*t,-4.2375030517578125*t,7.476448059082031*t,0*t,.8044459223747253*t,0,0,0,1,0];this._loadMatrix(r,e)},e.prototype.lsd=function(t){var e=[2,-.4,.5,0,0,-.5,2,-.4,0,0,-.4,-.5,3,0,0,0,0,0,1,0];this._loadMatrix(e,t)},e.prototype.reset=function(){var t=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0];this._loadMatrix(t,!1)},s(e,[{key:"matrix",get:function(){return this.uniforms.m},set:function(t){this.uniforms.m=t}},{key:"alpha",get:function(){return this.uniforms.uAlpha},set:function(t){this.uniforms.uAlpha=t}}]),e}(u.Filter));r.default=h,h.prototype.grayscale=h.prototype.greyscale},{"../../core":65,path:8}],150:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=function(){function t(t,e){for(var r=0;r lumaMax))\n color = vec4(rgbA, texColor.a);\n else\n color = vec4(rgbB, texColor.a);\n return color;\n}\n\nvoid main() {\n\n vec2 fragCoord = vTextureCoord * filterArea.xy;\n\n vec4 color;\n\n color = fxaa(uSampler, fragCoord, filterArea.xy, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n\n gl_FragColor = color;\n}\n'))}return o(e,t),e}(a.Filter));r.default=u},{"../../core":65,path:8}],152:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}r.__esModule=!0;var i=t("./fxaa/FXAAFilter");Object.defineProperty(r,"FXAAFilter",{enumerable:!0,get:function(){return n(i).default}});var o=t("./noise/NoiseFilter");Object.defineProperty(r,"NoiseFilter",{enumerable:!0,get:function(){return n(o).default}});var s=t("./displacement/DisplacementFilter");Object.defineProperty(r,"DisplacementFilter",{enumerable:!0,get:function(){return n(s).default}});var a=t("./blur/BlurFilter");Object.defineProperty(r,"BlurFilter",{enumerable:!0,get:function(){return n(a).default}});var u=t("./blur/BlurXFilter");Object.defineProperty(r,"BlurXFilter",{enumerable:!0,get:function(){return n(u).default}});var h=t("./blur/BlurYFilter");Object.defineProperty(r,"BlurYFilter",{enumerable:!0,get:function(){return n(h).default}});var l=t("./colormatrix/ColorMatrixFilter");Object.defineProperty(r,"ColorMatrixFilter",{enumerable:!0,get:function(){return n(l).default}});var c=t("./void/VoidFilter");Object.defineProperty(r,"VoidFilter",{enumerable:!0,get:function(){return n(c).default}})},{"./blur/BlurFilter":143,"./blur/BlurXFilter":144,"./blur/BlurYFilter":145,"./colormatrix/ColorMatrixFilter":149,"./displacement/DisplacementFilter":150,"./fxaa/FXAAFilter":151,"./noise/NoiseFilter":153,"./void/VoidFilter":154}],153:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=function(){function t(t,e){for(var r=0;r0&&void 0!==arguments[0]?arguments[0]:.5,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Math.random();n(this,e);var s=i(this,t.call(this,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n}","precision highp float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform float uNoise;\nuniform float uSeed;\nuniform sampler2D uSampler;\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvoid main()\n{\n vec4 color = texture2D(uSampler, vTextureCoord);\n float randomValue = rand(gl_FragCoord.xy * uSeed);\n float diff = (randomValue - 0.5) * uNoise;\n\n // Un-premultiply alpha before applying the color matrix. See issue #3539.\n if (color.a > 0.0) {\n color.rgb /= color.a;\n }\n\n color.r += diff;\n color.g += diff;\n color.b += diff;\n\n // Premultiply alpha again.\n color.rgb *= color.a;\n\n gl_FragColor = color;\n}\n"));return s.noise=r,s.seed=o,s}return o(e,t),s(e,[{key:"noise",get:function(){return this.uniforms.uNoise},set:function(t){this.uniforms.uNoise=t}},{key:"seed",get:function(){return this.uniforms.uSeed},set:function(t){this.uniforms.uSeed=t}}]),e}(u.Filter));r.default=h},{"../../core":65,path:8}],154:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}r.__esModule=!0;var s=t("../../core"),a=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}(s),u=(t("path"),function(t){function e(){n(this,e);var r=i(this,t.call(this,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n}","varying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n gl_FragColor = texture2D(uSampler, vTextureCoord);\n}\n"));return r.glShaderKey="void",r}return o(e,t),e}(a.Filter));r.default=u},{"../../core":65,path:8}],155:[function(t,e,r){"use strict";function n(t,e){ +if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(t,e){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:1;this.removeEvents(),this.interactionDOMElement=t,this.resolution=e,this.addEvents()},e.prototype.addEvents=function(){this.interactionDOMElement&&(h.ticker.shared.add(this.update,this,h.UPDATE_PRIORITY.INTERACTION),window.navigator.msPointerEnabled?(this.interactionDOMElement.style["-ms-content-zooming"]="none",this.interactionDOMElement.style["-ms-touch-action"]="none"):this.supportsPointerEvents&&(this.interactionDOMElement.style["touch-action"]="none"),this.supportsPointerEvents?(window.document.addEventListener("pointermove",this.onPointerMove,!0),this.interactionDOMElement.addEventListener("pointerdown",this.onPointerDown,!0),this.interactionDOMElement.addEventListener("pointerleave",this.onPointerOut,!0),this.interactionDOMElement.addEventListener("pointerover",this.onPointerOver,!0),window.addEventListener("pointercancel",this.onPointerCancel,!0),window.addEventListener("pointerup",this.onPointerUp,!0)):(window.document.addEventListener("mousemove",this.onPointerMove,!0),this.interactionDOMElement.addEventListener("mousedown",this.onPointerDown,!0),this.interactionDOMElement.addEventListener("mouseout",this.onPointerOut,!0),this.interactionDOMElement.addEventListener("mouseover",this.onPointerOver,!0),window.addEventListener("mouseup",this.onPointerUp,!0)),this.supportsTouchEvents&&(this.interactionDOMElement.addEventListener("touchstart",this.onPointerDown,!0),this.interactionDOMElement.addEventListener("touchcancel",this.onPointerCancel,!0),this.interactionDOMElement.addEventListener("touchend",this.onPointerUp,!0),this.interactionDOMElement.addEventListener("touchmove",this.onPointerMove,!0)),this.eventsAdded=!0)},e.prototype.removeEvents=function(){this.interactionDOMElement&&(h.ticker.shared.remove(this.update,this),window.navigator.msPointerEnabled?(this.interactionDOMElement.style["-ms-content-zooming"]="",this.interactionDOMElement.style["-ms-touch-action"]=""):this.supportsPointerEvents&&(this.interactionDOMElement.style["touch-action"]=""),this.supportsPointerEvents?(window.document.removeEventListener("pointermove",this.onPointerMove,!0),this.interactionDOMElement.removeEventListener("pointerdown",this.onPointerDown,!0),this.interactionDOMElement.removeEventListener("pointerleave",this.onPointerOut,!0),this.interactionDOMElement.removeEventListener("pointerover",this.onPointerOver,!0),window.removeEventListener("pointercancel",this.onPointerCancel,!0),window.removeEventListener("pointerup",this.onPointerUp,!0)):(window.document.removeEventListener("mousemove",this.onPointerMove,!0),this.interactionDOMElement.removeEventListener("mousedown",this.onPointerDown,!0),this.interactionDOMElement.removeEventListener("mouseout",this.onPointerOut,!0),this.interactionDOMElement.removeEventListener("mouseover",this.onPointerOver,!0),window.removeEventListener("mouseup",this.onPointerUp,!0)),this.supportsTouchEvents&&(this.interactionDOMElement.removeEventListener("touchstart",this.onPointerDown,!0),this.interactionDOMElement.removeEventListener("touchcancel",this.onPointerCancel,!0),this.interactionDOMElement.removeEventListener("touchend",this.onPointerUp,!0),this.interactionDOMElement.removeEventListener("touchmove",this.onPointerMove,!0)),this.interactionDOMElement=null,this.eventsAdded=!1)},e.prototype.update=function(t){if(this._deltaTime+=t,!(this._deltaTime=0;h--){var l=u[h],c=this.processInteractive(t,l,r,n,a);if(c){if(!l.parent)continue;a=!1,c&&(t.target&&(n=!1),s=!0)}}return i&&(n&&!t.target&&(e.hitArea?(e.worldTransform.applyInverse(o,this._tempPoint),e.hitArea.contains(this._tempPoint.x,this._tempPoint.y)&&(s=!0)):e.containsPoint&&e.containsPoint(o)&&(s=!0)),e.interactive&&(s&&!t.target&&(t.target=e),r&&r(t,e,!!s))),s},e.prototype.onPointerDown=function(t){if(!this.supportsTouchEvents||"touch"!==t.pointerType){var e=this.normalizeToPointerData(t);this.autoPreventDefault&&e[0].isNormalized&&t.preventDefault();for(var r=e.length,n=0;n1&&(l=1);var c=Math.sqrt(n*n+i*i),d=this._texture.height/2;n/=c,i/=c,n*=d,i*=d,o[h]=u.x+n,o[h+1]=u.y+i,o[h+2]=u.x-n,o[h+3]=u.y-i,e=u}},e.prototype.updateTransform=function(){this.autoUpdate&&this.refreshVertices(),this.containerUpdateTransform()},e}(a.default);r.default=u},{"./Mesh":166}],170:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=t("../../core"),o=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}(i),s=t("../Mesh"),a=function(t){return t&&t.__esModule?t:{default:t}}(s),u=function(){function t(e){n(this,t),this.renderer=e}return t.prototype.render=function(t){var e=this.renderer,r=e.context,n=t.worldTransform,i=e.resolution;e.roundPixels?r.setTransform(n.a*i,n.b*i,n.c*i,n.d*i,n.tx*i|0,n.ty*i|0):r.setTransform(n.a*i,n.b*i,n.c*i,n.d*i,n.tx*i,n.ty*i),e.setBlendMode(t.blendMode),t.drawMode===a.default.DRAW_MODES.TRIANGLE_MESH?this._renderTriangleMesh(t):this._renderTriangles(t)},t.prototype._renderTriangleMesh=function(t){for(var e=t.vertices.length/2,r=0;r0){var S=t.canvasPadding/t.worldTransform.a,O=t.canvasPadding/t.worldTransform.d,M=(_+b+x)/3,P=(T+w+E)/3,C=_-M,R=T-P,A=Math.sqrt(C*C+R*R);_=M+C/A*(A+S),T=P+R/A*(A+O),C=b-M,R=w-P,A=Math.sqrt(C*C+R*R),b=M+C/A*(A+S),w=P+R/A*(A+O),C=x-M,R=E-P,A=Math.sqrt(C*C+R*R),x=M+C/A*(A+S),E=P+R/A*(A+O)}i.save(),i.beginPath(),i.moveTo(_,T),i.lineTo(b,w),i.lineTo(x,E),i.closePath(),i.clip();var I=d*y+v*p+f*g-y*p-v*f-d*g,D=_*y+v*x+b*g-y*x-v*b-_*g,L=d*b+_*p+f*x-b*p-_*f-d*x,N=d*y*x+v*b*p+_*f*g-_*y*p-v*f*x-d*b*g,F=T*y+v*E+w*g-y*E-v*w-T*g,B=d*w+T*p+f*E-w*p-T*f-d*E,k=d*y*E+v*w*p+T*f*g-T*y*p-v*f*E-d*w*g;i.transform(D/I,F/I,L/I,B/I,N/I,k/I),i.drawImage(h,0,0,l*u.resolution,c*u.resolution,0,0,l,c),i.restore(),this.renderer.invalidateBlendMode()}},t.prototype.renderMeshFlat=function(t){var e=this.renderer.context,r=t.vertices,n=r.length/2;e.beginPath();for(var i=1;i0&&void 0!==arguments[0]?arguments[0]:1500,o=arguments[1],s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:16384,a=arguments.length>3&&void 0!==arguments[3]&&arguments[3];n(this,e);var h=i(this,t.call(this));return s>16384&&(s=16384),s>r&&(s=r),h._properties=[!1,!0,!1,!1,!1],h._maxSize=r,h._batchSize=s,h._glBuffers={},h._bufferToUpdate=0,h.interactiveChildren=!1,h.blendMode=u.BLEND_MODES.NORMAL,h.autoResize=a,h.roundPixels=!0,h.baseTexture=null,h.setProperties(o),h._tint=0,h.tintRgb=new Float32Array(4),h.tint=16777215,h}return o(e,t),e.prototype.setProperties=function(t){t&&(this._properties[0]="scale"in t?!!t.scale:this._properties[0],this._properties[1]="position"in t?!!t.position:this._properties[1],this._properties[2]="rotation"in t?!!t.rotation:this._properties[2],this._properties[3]="uvs"in t?!!t.uvs:this._properties[3],this._properties[4]="alpha"in t||"tint"in t?!!t.alpha||!!t.tint:this._properties[4])},e.prototype.updateTransform=function(){this.displayObjectUpdateTransform()},e.prototype.renderWebGL=function(t){var e=this;this.visible&&!(this.worldAlpha<=0)&&this.children.length&&this.renderable&&(this.baseTexture||(this.baseTexture=this.children[0]._texture.baseTexture,this.baseTexture.hasLoaded||this.baseTexture.once("update",function(){return e.onChildrenChange(0)})),t.setObjectRenderer(t.plugins.particle),t.plugins.particle.render(this))},e.prototype.onChildrenChange=function(t){var e=Math.floor(t/this._batchSize);er&&(o=r);var s=t._glBuffers[i.CONTEXT_UID];s||(s=t._glBuffers[i.CONTEXT_UID]=this.generateBuffers(t));var a=e[0]._texture.baseTexture;this.renderer.setBlendMode(u.utils.correctBlendMode(t.blendMode,a.premultipliedAlpha));var h=i.gl,l=t.worldTransform.copy(this.tempMatrix);l.prepend(i._activeRenderTarget.projectionMatrix),this.shader.uniforms.projectionMatrix=l.toArray(!0),this.shader.uniforms.uColor=u.utils.premultiplyRgba(t.tintRgb,t.worldAlpha,this.shader.uniforms.uColor,a.premultipliedAlpha),this.shader.uniforms.uSampler=i.bindTexture(a);for(var c=0,d=0;cn&&(f=n),d>=s.length){if(!t.autoResize)break;s.push(this._generateOneMoreBuffer(t))}var p=s[d];p.uploadDynamic(e,c,f),t._bufferToUpdate===d&&(p.uploadStatic(e,c,f),t._bufferToUpdate=d+1),i.bindVao(p.vao),p.vao.draw(h.TRIANGLES,6*f)}}},e.prototype.generateBuffers=function(t){for(var e=this.renderer.gl,r=[],n=t._maxSize,i=t._batchSize,o=t._properties,s=0;s0?1:-1})},{}],179:[function(t,e,r){"use strict";var n=t("object-assign"),i=function(t){return t&&t.__esModule?t:{default:t}}(n);Object.assign||(Object.assign=i.default)},{"object-assign":6}],180:[function(t,e,r){"use strict";t("./Object.assign"),t("./requestAnimationFrame"),t("./Math.sign"),window.ArrayBuffer||(window.ArrayBuffer=Array),window.Float32Array||(window.Float32Array=Array),window.Uint32Array||(window.Uint32Array=Array),window.Uint16Array||(window.Uint16Array=Array)},{"./Math.sign":178,"./Object.assign":179,"./requestAnimationFrame":181}],181:[function(t,e,r){(function(t){"use strict";if(Date.now&&Date.prototype.getTime||(Date.now=function(){return(new Date).getTime()}),!t.performance||!t.performance.now){var e=Date.now();t.performance||(t.performance={}),t.performance.now=function(){return Date.now()-e}}for(var r=Date.now(),n=["ms","moz","webkit","o"],i=0;i=0;n--)this.add(t.children[n]);return this},t.prototype.destroy=function(){this.ticking&&v.remove(this.tick,this),this.ticking=!1,this.addHooks=null, +this.uploadHooks=null,this.renderer=null,this.completes=null,this.queue=null,this.limiter=null,this.uploadHookHelper=null},t}();r.default=y},{"../core":65,"./limiters/CountLimiter":185}],183:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e){if(e instanceof u.BaseTexture){var r=e.source,n=0===r.width?t.canvas.width:Math.min(t.canvas.width,r.width),i=0===r.height?t.canvas.height:Math.min(t.canvas.height,r.height);return t.ctx.drawImage(r,0,0,n,i,0,0,t.canvas.width,t.canvas.height),!0}return!1}r.__esModule=!0;var a=t("../../core"),u=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e.default=t,e}(a),h=t("../BasePrepare"),l=function(t){return t&&t.__esModule?t:{default:t}}(h),c=16,d=function(t){function e(r){n(this,e);var o=i(this,t.call(this,r));return o.uploadHookHelper=o,o.canvas=document.createElement("canvas"),o.canvas.width=c,o.canvas.height=c,o.ctx=o.canvas.getContext("2d"),o.registerUploadHook(s),o}return o(e,t),e.prototype.destroy=function(){t.prototype.destroy.call(this),this.ctx=null,this.canvas=null},e}(l.default);r.default=d,u.CanvasRenderer.registerPlugin("prepare",d)},{"../../core":65,"../BasePrepare":182}],184:[function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}r.__esModule=!0;var i=t("./webgl/WebGLPrepare");Object.defineProperty(r,"webgl",{enumerable:!0,get:function(){return n(i).default}});var o=t("./canvas/CanvasPrepare");Object.defineProperty(r,"canvas",{enumerable:!0,get:function(){return n(o).default}});var s=t("./BasePrepare");Object.defineProperty(r,"BasePrepare",{enumerable:!0,get:function(){return n(s).default}});var a=t("./limiters/CountLimiter");Object.defineProperty(r,"CountLimiter",{enumerable:!0,get:function(){return n(a).default}});var u=t("./limiters/TimeLimiter");Object.defineProperty(r,"TimeLimiter",{enumerable:!0,get:function(){return n(u).default}})},{"./BasePrepare":182,"./canvas/CanvasPrepare":183,"./limiters/CountLimiter":185,"./limiters/TimeLimiter":186,"./webgl/WebGLPrepare":187}],185:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(e){n(this,t),this.maxItemsPerFrame=e,this.itemsLeft=0}return t.prototype.beginFrame=function(){this.itemsLeft=this.maxItemsPerFrame},t.prototype.allowedToUpload=function(){return this.itemsLeft-- >0},t}();r.default=i},{}],186:[function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}r.__esModule=!0;var i=function(){function t(e){n(this,t),this.maxMilliseconds=e,this.frameStart=0}return t.prototype.beginFrame=function(){this.frameStart=Date.now()},t.prototype.allowedToUpload=function(){return Date.now()-this.frameStart=b.f?e():a.fonts.load(fa(b.a),b.h).then(function(a){1<=a.length?d():setTimeout(k,25)},function(){e()})}k()}),e=new Promise(function(a,d){setTimeout(d,b.f)});Promise.race([e,d]).then(function(){b.g(b.a)},function(){b.j(b.a)})};function R(a,b,c,d,e,f,g){this.v=a;this.B=b;this.c=c;this.a=d;this.s=g||"BESbswy";this.f={};this.w=e||3E3;this.u=f||null;this.o=this.j=this.h=this.g=null;this.g=new N(this.c,this.s);this.h=new N(this.c,this.s);this.j=new N(this.c,this.s);this.o=new N(this.c,this.s);a=new H(this.a.c+",serif",K(this.a));a=P(a);this.g.a.style.cssText=a;a=new H(this.a.c+",sans-serif",K(this.a));a=P(a);this.h.a.style.cssText=a;a=new H("serif",K(this.a));a=P(a);this.j.a.style.cssText=a;a=new H("sans-serif",K(this.a));a= +P(a);this.o.a.style.cssText=a;O(this.g);O(this.h);O(this.j);O(this.o)}var S={D:"serif",C:"sans-serif"},T=null;function U(){if(null===T){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);T=!!a&&(536>parseInt(a[1],10)||536===parseInt(a[1],10)&&11>=parseInt(a[2],10))}return T}R.prototype.start=function(){this.f.serif=this.j.a.offsetWidth;this.f["sans-serif"]=this.o.a.offsetWidth;this.A=q();la(this)}; +function ma(a,b,c){for(var d in S)if(S.hasOwnProperty(d)&&b===a.f[S[d]]&&c===a.f[S[d]])return!0;return!1}function la(a){var b=a.g.a.offsetWidth,c=a.h.a.offsetWidth,d;(d=b===a.f.serif&&c===a.f["sans-serif"])||(d=U()&&ma(a,b,c));d?q()-a.A>=a.w?U()&&ma(a,b,c)&&(null===a.u||a.u.hasOwnProperty(a.a.c))?V(a,a.v):V(a,a.B):na(a):V(a,a.v)}function na(a){setTimeout(p(function(){la(this)},a),50)}function V(a,b){setTimeout(p(function(){v(this.g.a);v(this.h.a);v(this.j.a);v(this.o.a);b(this.a)},a),0)};function W(a,b,c){this.c=a;this.a=b;this.f=0;this.o=this.j=!1;this.s=c}var X=null;W.prototype.g=function(a){var b=this.a;b.g&&w(b.f,[b.a.c("wf",a.c,K(a).toString(),"active")],[b.a.c("wf",a.c,K(a).toString(),"loading"),b.a.c("wf",a.c,K(a).toString(),"inactive")]);L(b,"fontactive",a);this.o=!0;oa(this)}; +W.prototype.h=function(a){var b=this.a;if(b.g){var c=y(b.f,b.a.c("wf",a.c,K(a).toString(),"active")),d=[],e=[b.a.c("wf",a.c,K(a).toString(),"loading")];c||d.push(b.a.c("wf",a.c,K(a).toString(),"inactive"));w(b.f,d,e)}L(b,"fontinactive",a);oa(this)};function oa(a){0==--a.f&&a.j&&(a.o?(a=a.a,a.g&&w(a.f,[a.a.c("wf","active")],[a.a.c("wf","loading"),a.a.c("wf","inactive")]),L(a,"active")):M(a.a))};function pa(a){this.j=a;this.a=new ja;this.h=0;this.f=this.g=!0}pa.prototype.load=function(a){this.c=new ca(this.j,a.context||this.j);this.g=!1!==a.events;this.f=!1!==a.classes;qa(this,new ha(this.c,a),a)}; +function ra(a,b,c,d,e){var f=0==--a.h;(a.f||a.g)&&setTimeout(function(){var a=e||null,k=d||null||{};if(0===c.length&&f)M(b.a);else{b.f+=c.length;f&&(b.j=f);var h,m=[];for(h=0;h Date: Mon, 23 Apr 2018 20:46:42 -0400 Subject: [PATCH 12/37] Added gui action for creating asset from symbol --- src/editor/WickEditor.GuiActionHandler.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/editor/WickEditor.GuiActionHandler.js b/src/editor/WickEditor.GuiActionHandler.js index 56307f60..13330830 100644 --- a/src/editor/WickEditor.GuiActionHandler.js +++ b/src/editor/WickEditor.GuiActionHandler.js @@ -1232,6 +1232,17 @@ var GuiActionHandler = function (wickEditor) { }); + registerAction('createAssetFromSelection', + [], + [], + {}, + function (args) { + var json = wickEditor.project.getSelectedObject().getAsJSON(); + var asset = new WickAsset(json, 'symbol', prompt('Name ur new thing')); + wickEditor.project.library.addAsset(asset); + wickEditor.project.getSelectedObject().assetUUID = asset.uuid; + }); + registerAction('createObjectFromAsset', [], [], From c8f7ed611fab2750a84f3d63baa821430965dbb3 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 23 Apr 2018 21:06:23 -0400 Subject: [PATCH 13/37] Small fix to HOWTO --- HOWTO.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/HOWTO.md b/HOWTO.md index 22c90d91..d8d72d68 100644 --- a/HOWTO.md +++ b/HOWTO.md @@ -483,7 +483,7 @@ Name | Description - A .wick file is the native filetype for Wick projects. - .wick files can be opened in the editor by dragging them into the browser window, or by clicking `File` -> `Open Project` and selecting them. -##Exporting Projects +## Exporting Projects ### .zip archive From 3ff70a20d8459df451bf233cbc2b9042b8ac452c Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 30 Apr 2018 14:49:16 -0400 Subject: [PATCH 14/37] Create code-of-conduct.md --- code-of-conduct.md | 73 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 code-of-conduct.md diff --git a/code-of-conduct.md b/code-of-conduct.md new file mode 100644 index 00000000..ca2f40c6 --- /dev/null +++ b/code-of-conduct.md @@ -0,0 +1,73 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +education, socio-economic status, nationality, personal appearance, race, +religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at *contact@wickeditor.com*. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org From 0bffbb4bbe1286646e911413e2675143a0e9d482 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 30 Apr 2018 15:03:41 -0400 Subject: [PATCH 15/37] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index fdb879de..e6bff3aa 100755 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ Wick is a browser-based hybrid animation/coding environment for making interacti # How to contribute to Wick Want to help us make Wick? There's plenty to do, we'd love your help. +Be sure to read the [code of conduct](https://github.com/zrispo/wick-editor/blob/master/code-of-conduct.md)!! + ### Create tutorials Wick needs tutorials! If you're interested in making text or video tutorials, contact [@zrispo](https://twitter.com/zrispo), especially if you want to make non-english tutorials! The [tutorial page](http://wickeditor.com/#tutorials) is a good place to start if you want a template. From 144a6a5111d8535919d6798fca898420906cb90e Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 30 Apr 2018 15:08:01 -0400 Subject: [PATCH 16/37] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e6bff3aa..5a1416d3 100755 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Want to help us make Wick? There's plenty to do, we'd love your help. Be sure to read the [code of conduct](https://github.com/zrispo/wick-editor/blob/master/code-of-conduct.md)!! ### Create tutorials -Wick needs tutorials! If you're interested in making text or video tutorials, contact [@zrispo](https://twitter.com/zrispo), especially if you want to make non-english tutorials! The [tutorial page](http://wickeditor.com/#tutorials) is a good place to start if you want a template. +Wick needs tutorials! If you're interested in making text or video tutorials, contact us at *contact@wickeditor.com*, especially if you want to make non-english tutorials! The [tutorial page](http://wickeditor.com/#tutorials) is a good place to start if you want a template. ### Report bugs and submit bug fixes Found a bug? Add it to the [issue tracker](https://github.com/zrispo/wick/issues). You can also look at existing bugs in the issue tracker. If you're just getting started, check out the bugs tagged as `small-bugs` - these are smaller fixes that you can do to get acquainted with the codebase. @@ -29,4 +29,4 @@ If you're a creator that wants to support Wick, one of the most helpful things t * `http-server` to start * Open a browser window, and go to `http://localhost:8000/` -Need help? Feel free to contact [@zrispo](https://twitter.com/zrispo) (that's me). +Need help? Feel free to contact us at *contact@wickeditor.com* From b7a795ddfd77d36888090b981396dc5534fe4af5 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Wed, 6 Jun 2018 00:02:27 -0400 Subject: [PATCH 17/37] When bold/italic enabled, load bold/italic variant from Google TODO: If bold or italic is enabled and you choose a font that doesn't support either one, the font will refuse to load and throw a console error. Fix this. --- bash.exe.stackdump | 9 +++++ sh.exe.stackdump | 9 +++++ .../Interfaces.Inspector.Properties.js | 33 +++++++++++++------ 3 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 bash.exe.stackdump create mode 100644 sh.exe.stackdump diff --git a/bash.exe.stackdump b/bash.exe.stackdump new file mode 100644 index 00000000..4dc695d9 --- /dev/null +++ b/bash.exe.stackdump @@ -0,0 +1,9 @@ +Exception: STATUS_STACK_OVERFLOW at rip=7FFAA279ECE7 +rax=0000000000001250 rbx=00000000FFFF8F90 rcx=0000000000000000 +rdx=0000000180010018 rsi=00000000FFFF8F98 rdi=000000018028E980 +r8 =00000000000B1CA4 r9 =000000018028E980 r10=00000000FFFF7000 +r11=00000000FFE03310 r12=0000000000000420 r13=00000000FFFF8E70 +r14=000000018022F490 r15=00000000FFFF8E10 +rbp=0000000000000208 rsp=00000000FFFF8C88 +program=C:\Program Files\Git\usr\bin\bash.exe, pid 6152, thread +cs=0033 ds=002B es=002B fs=0053 gs=002B ss=002B diff --git a/sh.exe.stackdump b/sh.exe.stackdump new file mode 100644 index 00000000..bed688aa --- /dev/null +++ b/sh.exe.stackdump @@ -0,0 +1,9 @@ +Exception: STATUS_STACK_OVERFLOW at rip=7FFAA279ECE7 +rax=0000000000001250 rbx=00000000FFFFAA00 rcx=0000000000000000 +rdx=0000000180010018 rsi=00000000FFFFAA08 rdi=000000018028E980 +r8 =00000000007F3AB0 r9 =000000018028E980 r10=00000000FFFF9000 +r11=00000000FFE03180 r12=0000000000000420 r13=00000000FFFFA8E0 +r14=000000018022F490 r15=00000000FFFFA880 +rbp=000000000000020C rsp=00000000FFFFA6F8 +program=C:\Program Files\Git\usr\bin\sh.exe, pid 11800, thread +cs=0033 ds=002B es=002B fs=0053 gs=002B ss=002B diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index 224434ba..f6d71030 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -168,6 +168,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { } })); + //font family properties.push(new InspectorInterface.SelectInput({ title: '', tooltip: 'Font Family', @@ -181,14 +182,20 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { return selectionInfo.object.textData.fontFamily; }, onChangeFn: function (val) { - loadGoogleFonts([val], function () { + //these variables will be attached to the font name in the WebFont Importer + var weight = ":"+selectionInfo.object.textData.fontWeight; + var italic = (selectionInfo.object.textData.fontStyle == "italic") ? 'i' : ''; + console.log(val+weight+italic); + //example: "Open Sans:300i" + //reload Google Font with new weight and italic value + loadGoogleFonts([val+weight+italic], function () { selectionInfo.object.textData.fontFamily = val; wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; wickEditor.syncInterfaces(); }); } })); - + properties.push(new InspectorInterface.SliderInput({ title: '', tooltip: 'Font Size', @@ -211,7 +218,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.MultiCheckboxInput({ title: '', icons: [ - 'resources/align-left.svg', + 'resources/align-left.svg', 'resources/align-center.svg', 'resources/align-right.svg', 'resources/text-bold.svg', @@ -222,11 +229,11 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { }, getValueFn: function () { return [ - selectionInfo.object.textData.textAlign === 'left', - selectionInfo.object.textData.textAlign === 'center', - selectionInfo.object.textData.textAlign === 'right', - selectionInfo.object.textData.fontWeight === 'bold', - selectionInfo.object.textData.fontStyle === 'italic' + selectionInfo.object.textData.textAlign === 'left', //vals[0] + selectionInfo.object.textData.textAlign === 'center', //vals[1] + selectionInfo.object.textData.textAlign === 'right', //vals[2] + selectionInfo.object.textData.fontWeight === 'bold', //vals[3] + selectionInfo.object.textData.fontStyle === 'italic' //vals[4] ]; }, onChangeFn: function (vals) { @@ -242,8 +249,14 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { } selectionInfo.object.textData.fontWeight = vals[3] ? 'bold' : ''; selectionInfo.object.textData.fontStyle = vals[4] ? 'italic' : ''; - wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; - wickEditor.syncInterfaces(); + //these variables will be attached to the font name in the WebFont Importer + var weight = ":"+selectionInfo.object.textData.fontWeight; + var italic = (selectionInfo.object.textData.fontStyle == "italic") ? 'i' : ''; + //reload Google Font with new weight and italic value + loadGoogleFonts([selectionInfo.object.textData.fontFamily+weight+italic], function () { + wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; + wickEditor.syncInterfaces(); + }); } })); From ce6f18e3f43e7d72272531ab616ea71062a4bc86 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Thu, 28 Jun 2018 16:23:31 -0400 Subject: [PATCH 18/37] Fix bugs relating to bold/italic Also, "Font loading..." appears in alert box now. The alertbox is also more sophisticated. TODO: Proper font weight/italic still doesn't show up in Player. Also, it's still impossible to choose alternative weights like Light or ExtraBold. --- lib/polyfills.js | 12 +++++++++-- player.html | 11 +++++++++- src/editor/interfaces/Interfaces.AlertBox.js | 14 ++++++++----- .../Interfaces.Inspector.Properties.js | 20 ++++++++++++++++--- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/lib/polyfills.js b/lib/polyfills.js index 496dfbeb..098cd4d4 100644 --- a/lib/polyfills.js +++ b/lib/polyfills.js @@ -594,16 +594,24 @@ function getAllGoogleFonts () { return GOOGLE_FONTS; } -function loadGoogleFonts (fontFamilyArray, callback) { +function loadGoogleFonts (fontFamilyArray, callback, failedCallback) { if(fontFamilyArray.length === 0) return; WebFont.load({ google: { families: fontFamilyArray, }, + //what should be done if this function succeeds? active: callback, + //what should be done if this function fails? + inactive: (failedCallback == undefined) + ? function () { + //provide a default value for failedCallback so it doesn't always have to be defined + console.log("Font(s) \'"+fontFamilyArray+"\' could not be loaded."); + } + : failedCallback, }); } - + // https://stackoverflow.com/questions/20958078/resize-a-base-64-image-in-javascript-without-using-canvas // Takes a data URI and returns the Data URI corresponding to the resized image at the wanted size. function resizedataURL(datas, wantedWidth, wantedHeight, callback, jpeg) diff --git a/player.html b/player.html index 7cdfba66..1cfdee0e 100644 --- a/player.html +++ b/player.html @@ -669,15 +669,24 @@ return GOOGLE_FONTS; } -function loadGoogleFonts (fontFamilyArray, callback) { +function loadGoogleFonts (fontFamilyArray, callback, failedCallback) { if(fontFamilyArray.length === 0) return; WebFont.load({ google: { families: fontFamilyArray, }, + //what should be done if this function succeeds? active: callback, + //what should be done if this function fails? + inactive: (failedCallback == undefined) + ? function () { + //provide a default value for failedCallback so it doesn't always have to be defined + console.log("Font(s) \'"+fontFamilyArray+"\' could not be loaded."); + } + : failedCallback, }); } +
      - NOTE: The Wick Editor is currently in open beta!
      Please report all bugs on the forums!! + NOTE: The Wick Editor is currently in open beta!
      Please report all bugs on the forums.
      diff --git a/resources/hide-layer-disabled.svg b/resources/hide-layer-disabled.svg new file mode 100644 index 00000000..f193da20 --- /dev/null +++ b/resources/hide-layer-disabled.svg @@ -0,0 +1,63 @@ + + + + + + image/svg+xml + + hide-layer-disabled + + + + + + hide-layer-disabled + Created with Sketch. + + + + diff --git a/resources/hide-layer.svg b/resources/hide-layer.svg index 316be169..a1b3c136 100644 --- a/resources/hide-layer.svg +++ b/resources/hide-layer.svg @@ -1,13 +1,67 @@ - - - - hide-layer - Created with Sketch. - - - - - - - - \ No newline at end of file + + + + + + image/svg+xml + + + + + + + hide-layer + Created with Sketch. + + + + + diff --git a/resources/layer-gnurl.svg b/resources/layer-gnurl.svg index 01a2c355..73b0de5f 100644 --- a/resources/layer-gnurl.svg +++ b/resources/layer-gnurl.svg @@ -1,40 +1,54 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +image/svg+xml \ No newline at end of file diff --git a/resources/lock-layer-disabled.svg b/resources/lock-layer-disabled.svg new file mode 100644 index 00000000..7759e354 --- /dev/null +++ b/resources/lock-layer-disabled.svg @@ -0,0 +1,77 @@ + + + + + + image/svg+xml + + lock-layer + + + + + + lock-layer + Created with Sketch. + + + + + + + + diff --git a/resources/lock-layer.svg b/resources/lock-layer.svg index 75e65454..c2735921 100644 --- a/resources/lock-layer.svg +++ b/resources/lock-layer.svg @@ -1,18 +1,74 @@ - - - - lock-layer - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file + + + + + + image/svg+xml + + + + + + + lock-layer + Created with Sketch. + + + + + + + + diff --git a/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js b/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js index 4c392a41..d0c01527 100644 --- a/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js +++ b/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js @@ -343,7 +343,7 @@ TimelineInterface.Frame = function (wickEditor, timeline) { waveformDiv.style.display = 'none'; if(this.wickFrame.tweens.length > 0) { thumbnailDiv.style.display = 'none'; - this.elem.style.backgroundColor = '#e4eafb'; + this.elem.style.background = 'var(--tween-background)'; } else if(this.wickFrame.wickObjects.length > 0) { this.elem.style.backgroundColor = '#EEE'; thumbnailDiv.src = 'resources/fullframe.svg'; diff --git a/styles/editor.css b/styles/editor.css index 65a3665d..810df8c9 100755 --- a/styles/editor.css +++ b/styles/editor.css @@ -35,24 +35,32 @@ html, body { width:100%; height:100%; overflow: hidden; } /* just to be sure these are full screen*/ :root { + --ui-white: white; + --ui-black: black; --ui-base: #333333; --ui-base-light1: #555555; --ui-base-light2: #777777; + --ui-base-light3: #848484; --ui-base-dark1: #111111; --ui-base-dark2: #000000; --ui-complement: #DDDDDD; --ui-complement-light1: #EEEEEE; - --ui-complement-light2: #FFFFFF; + --ui-complement-light2: #F0F0F0; --ui-complement-dark1: #BBBBBB; --ui-complement-dark2: #999999; - --ui-accent1: #23d891; - --ui-accent1-dark1: #33846d; + --ui-accent1-bright1: #23d891; + --ui-accent1: #0ebb7e; + --ui-accent1-dark1: #2b6b59; + --ui-accent1-dark2: #2b4c43; --ui-accent1-light1: #76ffc9; - --ui-accent2: #e4748f + --ui-accent2: #e4748f; --ui-accent2-light1: #ffc4c8; --ui-accent2-dark1: #a23956; --ui-accent2-dark2: #561829; - --ui-warningText: #FF0000; + --ui-accent3: #786fc7; + --ui-accent3-dark1: #786fc7; + --ui-accent3-dark2: #786fc7; + --ui-warning-text: #FF0000; --ui-shadow1: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); --ui-font: "San Franscisco", "Segoe UI", sans-serif; @@ -156,7 +164,7 @@ select { top: 30px; left: 0px; min-width: 70px; - border-left: 2px solid var(--ui-accent1-dark1); + border-left: 2px solid var(--ui-accent1); border-top:none; text-align: left; z-index: 10; @@ -173,7 +181,7 @@ select { .menubarButton, .rightClickMenuButton { cursor: pointer; - color: var(--ui-complement-light2); + color: var(--ui-white); padding: 8px; -webkit-transition: background-color 100ms ease-in-out; -ms-transition: background-color 100ms ease-in-out; @@ -181,7 +189,7 @@ select { } .menubarButton:hover, .rightClickMenuButton:hover { cursor: pointer; - background-color: var(--ui-accent1-dark1); + background-color: var(--ui-accent1); } .rightClickMenuButtonIcon { @@ -209,7 +217,7 @@ select { .menuBarProjectTitle { margin-top: 3px; - color: var(--ui-complement-light2); + color: var(--ui-white); cursor: pointer; flex-grow: 1; flex-shrink: 1; @@ -226,7 +234,7 @@ select { } .unsavedText { - color: var(--ui-warningText); + color: var(--ui-warning-text); } .menuBarProjectSettingsButton { flex-shrink: 0; @@ -579,7 +587,7 @@ select { text-overflow: clip; background-size: 30px 30px; - color: var(--ui-complement-light2); + color: var(--ui-white); float: left; width: 50px; @@ -588,7 +596,7 @@ select { .alert-box-text { float: right; - color: var(--ui-complement-light2); + color: var(--ui-white); font-size: 24px; text-align: center; @@ -640,17 +648,16 @@ select { position: absolute; right: 15px; top: 15px; - width: 300px; - height: 115px; - background-color: var(--ui-accent2); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 320px; + height: 105px; + background-color: var(--ui-base-light1); + box-shadow: var(--ui-shadow1); z-index: 999999999; - font-size: 18px; + font-size: 16px; border-radius: 3px; - - font-weight: bold; + font-weight: 500; font-family: var(--ui-font); - color: var(--ui-accent2-dark3); + color: var(--ui-complement-dark1); } .alpha-warning-text { @@ -815,7 +822,7 @@ select { margin-left: 5%; width: 90%; height: 17px; - color: white; + color: var(--ui-white); } .hotkey-title { width: 47%; @@ -845,7 +852,7 @@ hr.hotkeyhr { bottom: 0px; margin-bottom: 3px; right: 0px; - color: white; + color: var(--ui-white); font-family: var(--ui-font); text-align: center; cursor: pointer; diff --git a/styles/inspector.css b/styles/inspector.css index 03ffd64b..3326eb63 100644 --- a/styles/inspector.css +++ b/styles/inspector.css @@ -13,38 +13,39 @@ } #inspector-title { - color: #BBB; + color: var(--ui-complement-dark1); text-align: center; - background-color: #666; + background-color: var(--ui-base-light1); width: 100%; border-radius: 3px; } .inspector-selection-icon { - width: 50px; - height: 50px; - + width: 32px; + height: 32px; + margin-left: 12px; + margin-top: 3px; background-repeat: no-repeat; - background-position: center; - text-overflow: clip; - overflow: hidden; - background-size: 60% 60%; - float: left; + background-position: center; + text-overflow: clip; + overflow: hidden; + background-size: 100% 100%; + float: left; } .inspector-title-bar { - height: 50px; width: 100%; + height: 30px; } .inspector-selection-title { color: white; - font-size: 20px; + font-size: 18px; + font-weight: 500; width: calc(100% - 55px); - height: 45px; float: right; - margin-top: 12px; - margin-left: 5px; + margin-top: 6px; + margin-bottom: 10px; } .inspector-allitems-container { @@ -56,11 +57,11 @@ .inspector-properties-container { width: 100%; height:auto; - padding-top: 5px; + padding-top: 0px; padding-bottom: 10px; - display: flex; - flex-wrap: wrap; - justify-content: center; + display: flex; + flex-wrap: wrap; + justify-content: center; } .inspector-buttons-container { @@ -252,7 +253,7 @@ overflow: hidden; background-size: 60% 60%; - box-shadow: 2px 2px 2px rgba(0,0,0,0.5); + box-shadow: var(--ui-shadow1); cursor: pointer; @@ -280,7 +281,7 @@ } .inspector-button-frames { - background-color: #C44D58; + background-color: var(--ui-accent2); } .inspector-button-playranges { diff --git a/styles/scriptingide.css b/styles/scriptingide.css index f49dac17..5dac60c8 100644 --- a/styles/scriptingide.css +++ b/styles/scriptingide.css @@ -12,7 +12,7 @@ #errorMessage { margin-left: 3px; margin-top: 3px; - color: red; + color: var(--ui-warning-text); display:hidden; position: absolute; font-weight: bold; @@ -32,7 +32,7 @@ font-size: 14px; border-style: solid; border-width: 1px; - border-color: #AAA; + border-color: var(--ui-complement); } #scriptEditorSidebar { @@ -41,23 +41,23 @@ height: calc(100% - 36px); left: 2px; top: 24px; - background-color: #333; + background-color: var(--ui-base-dark1); border-style: solid; border-width: 1px; - border-color: #AAA; + border-color: var(--ui-complement); overflow-x: hidden; overflow-y: auto; } #noSelectionDiv { - color: #DDD; + color: var(--ui-complement); height: calc(100% - 36px); - background-color: #444; + background-color: var(--ui-base); border-style: solid; border-width: 1px; - border-color: #666; + border-color: var(--ui-base-light1); margin-left: 2px; margin-right: 2px; margin-top: 24px; @@ -185,7 +185,7 @@ position: absolute; background-color: rgba(0,0,0,0); cursor: ns-resize; - height: 24px; + height: 18px; width: 100%; left: 0px; top: 0px; @@ -223,8 +223,8 @@ transition: color 50ms linear; } .sidebarTitle:hover { - background-color: #31E19C; - color: black; + background-color: var(--ui-accent1); + color: var(--ui-white); } .sidebarGroupElement { diff --git a/styles/timeline.css b/styles/timeline.css index 4c39ed90..7db9addf 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -21,19 +21,16 @@ body { --max-timeline-height: 160px; --layers-width: 135px; - --layer-height: 30px; + --layer-height: 20px; - --frame-width: 20px; + --frame-width: 15px; --frame-handle-width: 8px; --frame-padding-width: 4px; - --frame-padding-height: 4px; + --frame-padding-height: 2px; - --frames-strip-padding-vertical: 3px; - - --shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); - --border: inset 0px 0px 1px #555; + --frames-strip-padding-vertical: 4px; --timeline-left-padding: 5px; --timeline-top-padding: 6px; @@ -44,12 +41,13 @@ body { --scrollbar-thickness: 14px; - --number-line-height: 16px; - + --number-line-height: 17px; + + --tween-background: linear-gradient(to right, #76ffc9, #e3c4ff, #ffc4c8); } .timeline { - background-color: #585757; + background-color: var(--ui-base-dark1); margin: 0px; padding: 0px; @@ -93,7 +91,6 @@ body { .layers-container { background-color: #414141; -/* border-right-color: #878787;*/ width: var(--layers-width); height: 1000%; left: 0px; @@ -101,8 +98,6 @@ body { position: absolute; overflow: hidden; - - box-shadow: var(--border); } .layer-tools-button { @@ -128,36 +123,36 @@ body { .add-layer-button { position: absolute; - top: 5px; + top: 0px; left: 5px; background-image: url("../resources/plusButton.svg"); } .add-layer-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .delete-layer-button { position: absolute; - top: 5px; + top: 0px; left: 25px; background-image: url("../resources/minusButton.svg"); } .delete-layer-button:hover { /*width: 100px;*/ - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .onion-skin-button { position: absolute; - top: 5px; + top: 0px; left: 110px; border-radius: 7px; background-image: url("../resources/onion.png"); } .onion-skin-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .small-frames-button { @@ -167,7 +162,7 @@ body { background-image: url('../resources/zoomin.png'); } .small-frames-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .play-preview-button { @@ -179,7 +174,7 @@ body { background-size: 8px 8px; } .play-preview-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .pause-preview-button { @@ -190,7 +185,7 @@ body { background-size: 8px 8px; } .pause-preview-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .step-backward-preview-button { @@ -200,7 +195,7 @@ body { background-image: url('../resources/step-backward.png'); } .step-backward-preview-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .step-forward-preview-button { @@ -210,11 +205,12 @@ body { background-image: url('../resources/step-forward.png'); } .step-forward-preview-button:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .layer { - background-color: #4a6588; + /*I think this should be a random accent color*/ + background-color: var(--ui-accent1-dark1); /*background-image: url('../resources/layer-handle.svg'); background-size: 15px 17px; background-repeat: no-repeat; @@ -230,14 +226,12 @@ body { line-height: calc(var(--layer-height) - 5px); color: white; position: absolute; - box-shadow: var(--border); font-size: 12px; font-family: var(--ui-font); - font-style: Bold; } .soundLayer { - background-color: #47ad8a; + background-color: var(--ui-accent3-dark1); } .layer-name { @@ -254,28 +248,23 @@ body { height: 15px; z-index: 999; position: absolute; - top: 5px; + top: 0px; left: 60px; font-size: 12px; font-family: var(--ui-font); - font-style: Bold; } .layer-gnurl { - width: 14px; - height: 21px; + width: 13px; + height: 13px; left: 2px; - top: 2px; + top: 1px; position: absolute; cursor: move; background-image: url('../resources/layer-gnurl.svg'); background-size: 100% 100%; background-repeat: no-repeat; background-position: left; - opacity: 0.6; -} -.layer-gnurl:hover { - opacity: 0.95; } .active-layer { @@ -283,11 +272,10 @@ body { border-style: solid; border-color: white; border-width: 1px; - /* box-shadow: 0 0 10px 3px rgba(255,255,255,0.18);*/ } .active-soundLayer { - background-color: #60e5b6; + background-color: var(--ui-accent3); } .layer-lock-button { @@ -295,26 +283,23 @@ body { width: 15px; height: 15px; position: absolute; - top: 5px; + top: 0px; left: 19px; background-color: transparent; - background-image: url('../resources/lock-layer.svg'); - background-size: 13px 13px; + background-image: url('../resources/lock-layer-disabled.svg'); + background-size: 15px 15px; background-repeat: no-repeat; background-position: center; cursor: pointer; - opacity: 0.6; } .layer-lock-button:hover { - background-color: rgba(255,255,255,0.4); + background-color: var(--ui-accent1-dark1); } .layer-lock-button:active { - background-color: rgba(255,255,255,0.8);; - opacity: 1.0; + background-color: var(--ui-accent1-dark2); } .layer-locked { - opacity: 1.0; - background-color: rgba(255,255,255,0.5); + background-image: url('../resources/lock-layer.svg'); } .layer-hide-button { @@ -322,30 +307,27 @@ body { width: 15px; height: 15px; position: absolute; - top: 5px; + top: 0px; left: 36px; background-color: transparent; - background-image: url('../resources/hide-layer.svg'); + background-image: url('../resources/hide-layer-disabled.svg'); background-size: 13px 13px; background-repeat: no-repeat; background-position: center; cursor: pointer; - opacity: 0.6; } .layer-hide-button:hover { - background-color: rgba(255,255,255,0.4); + background-color: var(--ui-accent1-dark1); } .layer-hide-button:active { - background-color: rgba(255,255,255,0.8); - opacity: 1.0; + background-color: var(--ui-accent1-dark2); } .layer-hidden { - opacity: 1.0; - background-color: rgba(255,255,255,0.5); + background-image: url('../resources/hide-layer.svg'); } .frames-container { - background-color: #3C3C3C; + background-color: var(--ui-base); width: 10000%; height: 1000%; @@ -356,8 +338,6 @@ body { overflow: hidden; display: inline-block; - - box-shadow: var(--border); } .frames-cell { @@ -367,13 +347,13 @@ body { height: 200px; /*box-shadow: inset 0px 0px 1px #555;*/ - border-left: 1px solid #444; + border-left: 1px dashed var(--ui-base-light1); position: absolute; } .frames-strip { - background-color: #C2C2C2; + background-color: var(--ui-base-light2); width: 100%; height: calc(var(--layer-height) - var(--frames-strip-padding-vertical)*2); @@ -382,8 +362,6 @@ body { left: 5px; position: absolute; - box-shadow: var(--border); - overflow: hidden; border-radius: 5px; @@ -396,9 +374,7 @@ body { width: var(--frame-width); height: calc(var(--layer-height) - var(--frames-strip-padding-vertical)*2); - - /*box-shadow: inset 0px 0px 1px #555;*/ - border-left: 1px solid #999; + border-left: 1px solid var(--ui-base-light3); position: absolute; } @@ -408,8 +384,7 @@ body { } .frame { - background-color: #FFFFFF; -/* opacity: 0.5;*/ + background-color: var(--ui-white); cursor: move; width: calc(var(--frame-width) - var(--common-padding)); @@ -419,7 +394,6 @@ body { overflow: hidden; margin-top: 7px; margin-left: 15px; -/* box-shadow: var(--border), var(--shadow);*/ border-radius: 1px; } @@ -429,7 +403,7 @@ body { max-width: 100%; width: 12px; height: 12px; - margin-top: 12px; + margin-top: 3px; padding: 0px; display: block; @@ -455,7 +429,8 @@ body { height: 100%; pointer-events: none; font-size: 10px; - color: black; + color: var(--ui-black); + font-weight: 500; } .has-scripts-icon { @@ -476,16 +451,15 @@ body { cursor: pointer; } .has-scripts-icon:hover { - background-color: #31E19C; + background-color: var(--ui-accent1-bright1); } .frame-tween-mode { - } .frame-extender-handle { background-color: rgba(0,0,0,0); - + cursor: ew-resize; width: var(--frame-handle-width); height: 100%; @@ -529,7 +503,7 @@ body { height: 100%; position: absolute; pointer-events: none; - box-shadow: inset 0px 0px 0px 3px #5BBEDB, 0px 0px 0px 2px #48A5BE; + box-shadow: inset 0px 0px 0px 3px var(--ui-accent1-bright1), 0px 0px 0px 2px var(--ui-accent1-bright1); /* background-color: cyan;*/ /* border-color: red; @@ -566,8 +540,8 @@ body { } .selection-box { - background-color: #AAAAFF; - box-shadow: inset 0px 0px 1px #0000FF; + background-color: var(--ui-accent1-bright1); + box-shadow: inset 0px 0px 2px var(--ui-accent1); opacity: 0.5; position: absolute; pointer-events: none; @@ -609,7 +583,7 @@ body { width: var(--scrollbar-thickness); height: var(--scrollbar-thickness); position: absolute; - background-color: #2E2E2E; + background-color: transparent; opacity: 1.0; } .scrollbar-button:hover { @@ -626,7 +600,7 @@ body { } .scrollbar-button-right { - color: blue; + color: blue; /*is this for testing or something? :V*/ right: 0px; top: 0px; @@ -685,23 +659,22 @@ body { cursor: default; - background-color: #252525; + background-color: var(--ui-base-dark2); } .number-line-cell { position: absolute; height: var(--number-line-height); - color: #fafafa; + color: var(--ui-complement); } .number-line-cell-number { position: absolute; top: 1px; left: 10px; - font-size: 14px; font-weight: bold; - font-family: "arial", sans-serif; + font-family: var(--ui-font); } .number-line-cell-number-small { font-size: 12px; @@ -840,7 +813,7 @@ body { height: var(--number-line-height); top: 0px; left: 0px; - background-color: #252525; + background-color: var(--ui-base-dark1); } .layer-toolbar { @@ -851,7 +824,7 @@ body { left: 0px; border-top: 1px; border-color: black; - background-color: #252525; + background-color: var(--ui-base-dark1); } .hide-scrollbar-connect-piece { @@ -860,7 +833,7 @@ body { height: var(--scrollbar-thickness); bottom: 0px; left: calc(100% - var(--scrollbar-thickness)); - background-color: #252525; + background-color: var(--ui-base-dark1); } .resize-timeline-bar { @@ -878,7 +851,7 @@ body { height: var(--scrollbar-thickness); bottom: 0px; left: calc(100% - var(--scrollbar-thickness) - 49px); - background-color: #252525; + background-color: var(--ui-base-dark1); } .fps-box { @@ -927,7 +900,7 @@ body { } .timeline-zoom-percent-sign { - color: white; + color: var(--ui-white); position: absolute; width: 12px; height: 12px; @@ -942,35 +915,36 @@ body { /* Breadcrumbs */ #breadcrumbsGUI { - top: 30px; + top: 25px; left: 46px; width: calc(100% - 266px); - height: 15px; - background-color: #000; + height: 20px; + background-color: var(--ui-base-dark2); overflow: hidden; - color: white; + color: var(--ui-white); padding-left: 5px; } .breadcrumbs-button { + height: 17px; width: auto; - border-radius: 4px; - color: white; + border-radius: 0px; + color: var(--ui-white); float: left; cursor: pointer; - font-size: 14px; - margin-top: 2px; + font-size: 12px; + margin-top: 0px; - -webkit-transition: background-color 100ms linear; - -ms-transition: background-color 100ms linear; - transition: background-color 100ms linear; + -webkit-transition: background-color 100ms ease-in-out; + -ms-transition: background-color 100ms ease-in-out; + transition: background-color 100ms ease-in-out; } .breadcrumbs-button:hover { - background-color: #31E19C; - color: black; + border-bottom: 2px solid var(--ui-accent1-bright1); + background-color: var(--ui-accent1-dark2); } .breadcrumbs-spacer { - color:white; + color: var(--ui-white); float: left; margin-left: 15px; margin-right: 15px; @@ -994,7 +968,7 @@ body { left: 0px; width: 14px; height: 14px; - margin-top: 6px; + margin-top: 4px; margin-left: 3px; background-color: none; cursor: pointer; @@ -1005,7 +979,7 @@ body { background-position: left; } .tween:hover { - box-shadow: inset 1px 1px 2px yellow; + box-shadow: inset 0px 0px 0px 2px yellow; } .hover-highlight-overlay { diff --git a/styles/toolbar.css b/styles/toolbar.css index d3689c24..137ec827 100644 --- a/styles/toolbar.css +++ b/styles/toolbar.css @@ -18,6 +18,7 @@ text-align: left; } +/* #tooltipGUI { position: absolute; top: 0px; @@ -28,8 +29,8 @@ border: none; padding-left:5px; padding-right: 5px; - box-shadow: 2px 2px 2px #AAA; -} + box-shadow: var(--ui-shadow1); +}*/ .toolButton { height: 28px; @@ -51,15 +52,14 @@ transition: background-color 100ms linear; } .toolButton:hover { - background-color: #31E19C; + background-color: var(--ui-accent1); } .toolButton:active { - background-color: #658a7c; + background-color: var(--ui-accent1-dark2); } .toolButtonActive { - background-color: #333; /*#31E19C;*/ - fill: purple; + box-shadow: 0px 0px 0px 2px var(--ui-accent1); } .drawing-tool-options-container { @@ -166,7 +166,7 @@ hr { height: 14px; border-radius: 3px; border: 1px solid white; - background-color: #555; + background-color: var(--ui-base); cursor: pointer; } From 1a90675f8bc8942eb1a95968b6ddf305868b2700 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Mon, 9 Jul 2018 11:24:15 -0400 Subject: [PATCH 24/37] Fix "color picker cannot close" bug --- src/editor/WickEditor.WickActionHandler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/WickEditor.WickActionHandler.js b/src/editor/WickEditor.WickActionHandler.js index 61860ce1..ddcf04db 100755 --- a/src/editor/WickEditor.WickActionHandler.js +++ b/src/editor/WickEditor.WickActionHandler.js @@ -326,7 +326,7 @@ var WickActionHandler = function (wickEditor) { if(wickObj.updateFrameTween) wickObj.updateFrameTween(); }; - var source = wickObj.getSourceInside(); + var source = (wickObj != undefined) ? wickObj.getSourceInside() : undefined; if(source) { var asset = wickEditor.project.library.getAsset(source.assetUUID); asset.data = source.getAsJSON(); From 8f9544e0a3d66f9884eec6af94ea0ff990a579b5 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Mon, 9 Jul 2018 20:16:16 -0400 Subject: [PATCH 25/37] More awesome UI tweaks Also fixed bug where mousing over other menu bar options while one is open does not open those up. Using the menu bar is much more intuitive now. --- index.html | 5 +- resources/flashy-white-icon.svg | 62 ++++++++++++++++ .../Interfaces.Inspector.Properties.js | 4 +- src/editor/interfaces/Interfaces.Inspector.js | 11 +-- src/editor/interfaces/Interfaces.MenuBar.js | 63 ++++++++++------ styles/colorpicker.css | 2 +- styles/editor.css | 14 ++-- styles/inspector.css | 33 +++++---- styles/library.css | 72 ++++++++++--------- styles/scriptingide.css | 27 +++---- styles/timeline.css | 13 ++-- styles/videoExporter.css | 38 +++++----- 12 files changed, 211 insertions(+), 133 deletions(-) create mode 100644 resources/flashy-white-icon.svg diff --git a/index.html b/index.html index d5f2bead..73c6abcc 100644 --- a/index.html +++ b/index.html @@ -204,7 +204,7 @@
      -
      Hotkeys
      +
      Keyboard Shortcuts
      @@ -222,7 +222,6 @@
      -
      Inspector
      @@ -232,7 +231,7 @@
      -
      Asset Library
      +
      Asset Library
      diff --git a/resources/flashy-white-icon.svg b/resources/flashy-white-icon.svg new file mode 100644 index 00000000..81ce6a65 --- /dev/null +++ b/resources/flashy-white-icon.svg @@ -0,0 +1,62 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index 224434ba..7edec8de 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -22,7 +22,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', - tooltip: 'Position (x,y)', + tooltip: 'Position (X, Y)', otherTitle: 'x', isActiveFn: function () { return selectionInfo.numObjects === 1 @@ -47,7 +47,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', - tooltip: 'Width / Height', + tooltip: 'Width, Height', otherTitle: 'x', isActiveFn: function () { return selectionInfo.numObjects === 1 diff --git a/src/editor/interfaces/Interfaces.Inspector.js b/src/editor/interfaces/Interfaces.Inspector.js index 1e668c96..b72320c2 100644 --- a/src/editor/interfaces/Interfaces.Inspector.js +++ b/src/editor/interfaces/Interfaces.Inspector.js @@ -21,7 +21,6 @@ var InspectorInterface = function (wickEditor) { var selectionIcon; var selectionTitle; - var inspectorTitle; var specialMode; @@ -39,7 +38,6 @@ var InspectorInterface = function (wickEditor) { selectionTitleBar = document.getElementById('inspector-title-bar'); selectionIcon = document.getElementsByClassName('inspector-selection-icon')[0]; selectionTitle = document.getElementsByClassName('inspector-selection-title')[0]; - inspectorTitle = document.getElementById('inspector-title'); allItemsContainer = document.getElementsByClassName('inspector-allitems-container')[0]; propertiesContainer = document.getElementsByClassName('inspector-properties-container')[0]; @@ -167,7 +165,6 @@ var InspectorInterface = function (wickEditor) { var updateSelectonTypeTitle = function () { - var noSelectionTitle = "Inspector"; var title; var image; @@ -217,10 +214,9 @@ var InspectorInterface = function (wickEditor) { image = "./resources/tools/Line.svg"; } else if(selectionInfo.type === 'none') { - - noSelectionTitle = "Inspector (No Selection)" - title = "" - image = null; + + title = "Nothing selected." + image = "./resources/flashy-white-icon.svg"; } else if(selectionInfo.numObjects > 1) { @@ -263,7 +259,6 @@ var InspectorInterface = function (wickEditor) { } selectionTitle.innerHTML = title; - inspectorTitle.innerHTML = noSelectionTitle; if(image) selectionIcon.style.backgroundImage = 'url('+image+')'; else diff --git a/src/editor/interfaces/Interfaces.MenuBar.js b/src/editor/interfaces/Interfaces.MenuBar.js index 34e67475..8b217be2 100644 --- a/src/editor/interfaces/Interfaces.MenuBar.js +++ b/src/editor/interfaces/Interfaces.MenuBar.js @@ -25,6 +25,9 @@ var MenuBarInterface = function (wickEditor) { var tabs; + //only one tab can be open at a time + var openTabName; + var Tab = function (name, buttons, func) { this.buttons = buttons; this.name = name; @@ -36,13 +39,14 @@ var MenuBarInterface = function (wickEditor) { tabElem.className = "menubarTab"; tabElem.id = 'menubarMenu' + this.name; tabElem.innerHTML = this.name; - tabElem.onclick = function () { + var openUp = function () { if(func) { func(); return; } var visible = self.elem.style.display === "block"; closeAllMenus(); + openTabName = tabElem.id; if(visible) { self.elem.style.display = "none"; } else { @@ -50,6 +54,20 @@ var MenuBarInterface = function (wickEditor) { } self.elem.style.left = (tabElem.offsetLeft-8) + 'px'; } + tabElem.onclick = openUp; + tabElem.onmouseover = function() { + if (openTabName !== tabElem.id && openTabName !== undefined) { + var visible = self.elem.style.display === "block"; + closeAllMenus(); + openTabName = tabElem.id; + if(visible) { + self.elem.style.display = "none"; + } else { + self.elem.style.display = "block"; + } + self.elem.style.left = (tabElem.offsetLeft-8) + 'px'; + } + } tabContainer.appendChild(tabElem); this.elem = document.createElement('div'); @@ -125,13 +143,13 @@ var MenuBarInterface = function (wickEditor) { }); addTab('File', [ - new TabButton('New Project', function () { + new TabButton('New Project...', function () { wickEditor.guiActionHandler.doAction("newProject"); }), - new TabButton('Open Project', function () { + new TabButton('Open Project...', function () { wickEditor.guiActionHandler.doAction("openFile"); }), - new TabButton('Save Project', function () { + new TabButton('Save Project To Disk...', function () { wickEditor.guiActionHandler.doAction("exportProjectWick"); }), new TabSpacer(), @@ -142,27 +160,27 @@ var MenuBarInterface = function (wickEditor) { new TabButton('Export PNG', function () { wickEditor.guiActionHandler.doAction("exportProjectPNG"); }),*/ - new TabButton('Export HTML', function () { + new TabButton('Export HTML...', function () { wickEditor.guiActionHandler.doAction("exportProjectHTML"); }), - new TabButton('Export ZIP', function () { + new TabButton('Export ZIP...', function () { wickEditor.guiActionHandler.doAction("exportProjectZIP"); }), /*new TabButton('Export Project as JSON', function () { wickEditor.guiActionHandler.doAction("exportProjectJSON"); }),*/ - new TabButton('Export Animated GIF', function () { + new TabButton('Export Animated GIF...', function () { wickEditor.guiActionHandler.doAction("exportProjectGIF"); }), - new TabButton('Export Video', function () { + new TabButton('Export MP4 Video...', function () { wickEditor.guiActionHandler.doAction("openProjectExportWindow"); }), new TabSpacer(), - new TabButton('Run project', function () { + new TabButton('Run Project...', function () { wickEditor.guiActionHandler.doAction("runProject"); }), - new TabButton('Project settings', function () { + new TabButton('Project Settings', function () { wickEditor.guiActionHandler.doAction("openProjectSettings"); }), ]); @@ -199,13 +217,13 @@ var MenuBarInterface = function (wickEditor) { ]); addTab('Import', [ - new TabButton('Image', function () { + new TabButton('Image...', function () { wickEditor.guiActionHandler.doAction("importFile"); }), - new TabButton('Sound', function () { + new TabButton('Sound...', function () { wickEditor.guiActionHandler.doAction("importFile"); }), - new TabButton('SVG', function () { + new TabButton('SVG...', function () { wickEditor.guiActionHandler.doAction("importFile"); }), /*new TabButton('JSON', function () { @@ -217,33 +235,33 @@ var MenuBarInterface = function (wickEditor) { ]); addTab('Help', [ - new TabButton('Hotkeys', function () { + new TabButton('Keyboard Shortcuts...', function () { wickEditor.guiActionHandler.doAction("openEditorSettings"); }), - new TabButton('Examples', function () { + new TabButton('Examples...', function () { window.open('http://www.wickeditor.com/#examples') }), - new TabButton('Tutorials', function () { + new TabButton('Tutorials...', function () { window.open('http://www.wickeditor.com/#tutorials') }), - new TabButton('Forums', function () { + new TabButton('Wick Forums...', function () { window.open('http://forum.wickeditor.com/') }), - new TabButton('Browser Info', function () { + new TabButton('Browser Info...', function () { wickEditor.guiActionHandler.doAction('printBrowserInfo'); }), ]); addTab('About', [ - new TabButton('Source code', function () { + new TabButton('Source Code...', function () { window.open('https://www.github.com/zrispo/wick/'); }), - new TabButton('Credits', function () { + new TabButton('Credits...', function () { window.open('http://www.wickeditor.com/#about'); }), ]); - addTab('Run', [], function () { + addTab('Run...', [], function () { wickEditor.guiActionHandler.doAction("runProject"); }); } @@ -255,9 +273,10 @@ var MenuBarInterface = function (wickEditor) { } var closeAllMenus = function () { + openTabName = undefined; tabs.forEach(function (tab) { tab.elem.style.display = "none"; - }) + }); } this.syncWithEditorState = function () { diff --git a/styles/colorpicker.css b/styles/colorpicker.css index ae25d28b..f860b822 100644 --- a/styles/colorpicker.css +++ b/styles/colorpicker.css @@ -7,7 +7,7 @@ border: 1px solid white; z-index: 9; border-radius: 4px; - background-color: #444; + background-color: var(--ui-base); } .color-picker-close-button { diff --git a/styles/editor.css b/styles/editor.css index 810df8c9..9eee414b 100755 --- a/styles/editor.css +++ b/styles/editor.css @@ -98,7 +98,6 @@ input { } select { font-size: 16px; - color: #666; width: 80px; } @@ -385,7 +384,7 @@ select { left: 0px; width: 0px; height: 0px; - color: #888; + color: var(--ui-white); font-weight: bold; text-align: left; font-size: 18px; @@ -541,11 +540,11 @@ select { display: none; z-index: 1000; border: none; - padding-left:5px; + padding: 3px; + padding-left: 5px; padding-right: 5px; max-width: 300px; box-shadow: var(--ui-shadow1); - padding: 2px; opacity: 0.0; pointer-events: none; border-radius: 2px; @@ -595,13 +594,10 @@ select { } .alert-box-text { float: right; - color: var(--ui-white); font-size: 24px; - text-align: center; - margin-top: 10px; - + margin-top: 7px; width: 250px; height: 50px; } @@ -848,7 +844,7 @@ hr.hotkeyhr { position: absolute; width: 220px; height: 15px; - font-size: 13px; + font-size: 12px; bottom: 0px; margin-bottom: 3px; right: 0px; diff --git a/styles/inspector.css b/styles/inspector.css index 3326eb63..b3a253a4 100644 --- a/styles/inspector.css +++ b/styles/inspector.css @@ -1,7 +1,7 @@ #inspectorGUI { right: 0px; top: 0px; - margin-top: 30px; + margin-top: 25px; height: calc(100% - 25px); width: 210px; display: inline; @@ -12,7 +12,7 @@ padding: 5px; } -#inspector-title { +#inspector-title { /*not used anymore*/ color: var(--ui-complement-dark1); text-align: center; background-color: var(--ui-base-light1); @@ -23,7 +23,7 @@ .inspector-selection-icon { width: 32px; height: 32px; - margin-left: 12px; + margin-left: 9px; margin-top: 3px; background-repeat: no-repeat; background-position: center; @@ -35,7 +35,8 @@ .inspector-title-bar { width: 100%; - height: 30px; + height: 40px; + margin-bottom: 5px; } .inspector-selection-title { @@ -44,8 +45,9 @@ font-weight: 500; width: calc(100% - 55px); float: right; - margin-top: 6px; - margin-bottom: 10px; + margin-left: 10px; + margin-top: 5px; + margin-bottom: 0px; } .inspector-allitems-container { @@ -57,7 +59,6 @@ .inspector-properties-container { width: 100%; height:auto; - padding-top: 0px; padding-bottom: 10px; display: flex; flex-wrap: wrap; @@ -112,16 +113,14 @@ .inspector-input-string { border-radius: 4px; - width: 65%; - height: 22px; - + height: 21px; float: left; - margin-bottom: 4px; - + margin-bottom: 1px; + padding-bottom: 1px; text-align: center; - font-size: 14px; + font-family: var(--ui-font); } .inspector-input-string-small { width: 25%; @@ -209,9 +208,13 @@ .inspector-input-select { width: 65%; height: 22px; - float: left; margin-bottom: 4px; + padding-bottom: 1px; + font-size: 14px; + font-family: var(--ui-font); + border: 0px; + border-radius: 3px; } .inspector-color-picker { @@ -265,7 +268,7 @@ } .inspector-button-common { - background-color: #4ECDC4; + background-color: var(--ui-accent1); } .inspector-button-multiple { diff --git a/styles/library.css b/styles/library.css index fdc00b9b..54dec212 100644 --- a/styles/library.css +++ b/styles/library.css @@ -11,20 +11,22 @@ } #asset-library-title { + width: 100%; + font-weight: 500; color: white; - margin-bottom: 3px; + margin-bottom: 1px; + text-align: center; } #tree { - border-radius: 0px 0px 2px 2px; - position: absolute; - width: 100%; - border: none; - background-color: white; - height: calc(100% - 60px); - overflow-y: auto; - background-color: #CFCFCF; - box-sizing:border-box; + position: absolute; + width: 100%; + border: none; + background-color: white; + height: calc(100% - 60px); + overflow-y: auto; + background-color: var(--ui-complement); + box-sizing:border-box; } #draggedAsset { @@ -46,31 +48,25 @@ } #treeFilterInput { - color: #4E4D4D; + color: var(--ui-black); width: 100%; - background: #A2A2A2 url(../resources/icon_search.png) no-repeat scroll 3px 3px; + background: var(--ui-white) url(../resources/icon_search.png) no-repeat scroll 3px 3px; background-size: 12px 12px; padding-left:20px; text-overflow: ellipsis; display: block; - border-radius: 2px 2px 0px 0px; + border-radius: 3px 3px 0px 0px; box-sizing:border-box; } #treeOptionsContainer { position: absolute; - height: 20px; - background-color: #CFCFCF; + height: 16px; + background-color: var(--ui-base-light1); width: 100%; - bottom: 0px; - border-top: #A2A2A2 1px solid; - border-radius: 0px 0px 2px 2px; -} - -.assetLibraryButton { - padding-right:2px; - text-align: right; + bottom: 3px; + border-radius: 0px 0px 3px 3px; } .fancytree-expander { @@ -103,30 +99,38 @@ span.fancytree-title:active { } .assetLibraryButton { - height: 20px; - width: 20px; - float: right; - background: #CFCFCF no-repeat 1px 0px; - background-size: 20px 20px; + height: 16px; + width: 15px; + float: right; + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; border-radius: 2px; + margin-right: 4px; + padding-right: 2px; } .assetLibraryButton:hover { - background: #A2A2A2 no-repeat 1px 0px; - background-size: 20px 20px; + background: var(--ui-accent1); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; cursor: pointer; } .assetLibraryButton:active { - background: #CFCFCF no-repeat 1px 0px; - background-size: 20px 20px; + background: var(--ui-base-light2); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; cursor: pointer; } #deleteAssetButton { - background-image: url(../resources/delete_layer.png); + background-image: url(../resources/delete-layer.svg); } #renameAssetButton { - background-image: url(../resources/rename.png); + background-image: url(../resources/inspector-icons/name.svg); + background-size: 14px; } diff --git a/styles/scriptingide.css b/styles/scriptingide.css index 5dac60c8..ce1b1465 100644 --- a/styles/scriptingide.css +++ b/styles/scriptingide.css @@ -92,25 +92,21 @@ left: 0px; top: 0px; width: calc(100% - 7px); - height: 23px; + height: 20; position: absolute; color: white; - padding-top: 6px; + padding-top: 3px; padding-left: 7px; text-align: left; - font-size: 14px; - + z-index: -1; background-color: none; /*cursor: pointer;*/ - box-shadow: none; - -webkit-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; - - border-radius: 7px; + border-radius: 0; } /*#scriptingIDEHeader:hover { box-shadow: inset 0 0 1px #fff; @@ -207,14 +203,13 @@ } .sidebarTitle { - font-weight: bold; + font-weight: 600; margin-left: 6px; border-radius: 3px; - color: #BBB; + color: var(--ui-complement); padding-left: 3px; - + line-height: 100%; width: 90%; - -webkit-transition: background-color 50ms linear; -ms-transition: background-color 50ms linear; transition: background-color 50ms linear; @@ -228,16 +223,16 @@ } .sidebarGroupElement { + font-size: 12px; cursor: pointer; margin-left: 18px; border-radius: 3px; - color: #BBB; + color: var(--ui-complement-dark1); padding-left: 3px; } .sidebarGroupElement:hover { - background-color: #31E19C; - color: black; - + background-color: var(--ui-accent1); + color: var(--ui-white); -webkit-transition: background-color 50ms linear; -ms-transition: background-color 50ms linear; transition: background-color 50ms linear; diff --git a/styles/timeline.css b/styles/timeline.css index 7db9addf..bae4e67a 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -67,6 +67,7 @@ body { pointer-events: none; cursor: pointer; + z-index: 0; } .playhead-body { width: 100%; @@ -98,6 +99,7 @@ body { position: absolute; overflow: hidden; + z-index: 1; } .layer-tools-button { @@ -474,9 +476,9 @@ body { .frame-extender-handle-right:hover { float: right; background: rgba(249,221,0,0.34); - border-right: 2px solid #F9DE00; - border-top: 2px solid #F9DE00; - border-bottom: 2px solid #F9DE00; + border-right: 2px solid #ffff00; + border-top: 2px solid #ffff00; + border-bottom: 2px solid #ffff00; box-sizing: border-box; border-top-right-radius: 0.8; border-bottom-right-radius: 0.8; @@ -946,8 +948,9 @@ body { .breadcrumbs-spacer { color: var(--ui-white); float: left; - margin-left: 15px; - margin-right: 15px; + margin-left: 10px; + margin-right: 10px; + margin-top: -2px; } .numberline-container { diff --git a/styles/videoExporter.css b/styles/videoExporter.css index 6b4164e1..b0d83210 100644 --- a/styles/videoExporter.css +++ b/styles/videoExporter.css @@ -43,21 +43,22 @@ .dropbtn { width: 60px; height: 16px; - padding: 6px; - - background-color: #3498DB; + padding: 4px; + padding-bottom: 10px; + background-color: var(--ui-accent2); color: white; - border: none; border-radius: 5px; cursor: pointer; - text-align: center; font-size: 16px; } .dropbtn:hover, .dropbtn:focus { - background-color: #2980B9; + background-color: var(--ui-accent2-dark1); + -webkit-transition: background-color 100ms linear; + -ms-transition: background-color 100ms linear; + transition: background-color 100ms linear; } .dropdown { @@ -68,23 +69,23 @@ .dropdown-content { display: none; position: absolute; - background-color: #f1f1f1; - min-width: 120px; + background-color: var(--ui-base-light1); + min-width: 100px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-item { - color: black; - padding: 6px 8px; + color: var(--ui-white); + padding: 6px 2px; text-decoration: none; display: block; z-index: 12; } .dropdown-item:hover { - background-color: #FFF; + background-color: var(--ui-accent1); } .show { @@ -94,12 +95,13 @@ .videoDownloadButton { border-radius: 5px; cursor: pointer; - color: white; - font-size: 18px; - background-color: #333; + color: var(--ui-white); + font-size: 16px; + background-color: var(--ui-base-light1); text-align: center; - padding: 6px; - height: 20px; + padding: 4px; + padding-bottom: 10px; + height: 16px; width: 160px; float:right; @@ -109,9 +111,9 @@ } .videoDownloadButton:hover { - background-color: #00D9A7; + background-color: var(--ui-accent1); } .videoDownloadButton:active { - background-color: #01C094; + background-color: var(--ui-accent1); } From c40cbf1354d36dbefc15e6a7bf96a2422524fadd Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Mon, 9 Jul 2018 20:20:36 -0400 Subject: [PATCH 26/37] Replace x's with multiplication signs in inspector --- src/editor/interfaces/Interfaces.Inspector.Properties.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index 7edec8de..e8cb1a94 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -23,7 +23,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Position (X, Y)', - otherTitle: 'x', + otherTitle: '×', isActiveFn: function () { return selectionInfo.numObjects === 1 && selectionInfo.type == 'wickobject'; @@ -48,7 +48,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Width, Height', - otherTitle: 'x', + otherTitle: '×', isActiveFn: function () { return selectionInfo.numObjects === 1 && selectionInfo.type == 'wickobject' @@ -74,7 +74,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Scale', - otherTitle: 'x', + otherTitle: '×', isActiveFn: function () { return selectionInfo.numObjects === 1 && selectionInfo.type == 'wickobject' @@ -340,7 +340,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Project Size', - otherTitle: 'x', + otherTitle: '×', isActiveFn: function () { return selectionInfo.type === 'project'; }, From 1581e47d8e53874629db339c1f95e8dc2745bca7 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Mon, 9 Jul 2018 21:01:57 -0400 Subject: [PATCH 27/37] Color picker tweaks Multiplication sign in inspector is buggy --- lib/spectrum.css | 39 +++++++++---------- lib/spectrum.js | 2 +- .../interfaces/Interfaces.ColorPicker.js | 4 +- styles/colorpicker.css | 24 ++++++------ styles/inspector.css | 16 ++++---- styles/scriptingide.css | 4 +- styles/timeline.css | 1 + 7 files changed, 44 insertions(+), 46 deletions(-) diff --git a/lib/spectrum.css b/lib/spectrum.css index 33c4a1e0..559d15e5 100644 --- a/lib/spectrum.css +++ b/lib/spectrum.css @@ -86,7 +86,7 @@ License: MIT width: 6px; left: 50%; cursor: pointer; - border: 1px solid black; + border: 2px solid black; background: white; opacity: .8; } @@ -99,7 +99,6 @@ License: MIT height: 8px; } .sp-alpha-inner { - border: solid 1px #333; } .sp-clear { @@ -216,7 +215,7 @@ License: MIT /* Clearfix hack */ .sp-cf:before, .sp-cf:after { content: ""; display: table; } .sp-cf:after { clear: both; } -.sp-cf { *zoom: 1; border-radius: 3px; } +.sp-cf { *zoom: 1;border-radius: 3px;} /* Mobile devices, make hue slider bigger so it is easier to slide */ @media (max-device-width: 480px) { @@ -228,8 +227,8 @@ License: MIT border-radius: 5px; height: 5px; width: 5px; - border: 1px solid #fff; - background: #000; + border: 2px solid black; + background: white; cursor: pointer; position:absolute; top:0; @@ -242,7 +241,7 @@ License: MIT height: 3px; left: -1px; right: -1px; - border: 1px solid #000; + border: 2px solid #000; background: white; opacity: .8; } @@ -260,7 +259,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. padding: 0; } .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear { - font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + font: var(--ui-font); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -269,9 +268,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. .sp-top { margin-bottom: 3px; } -.sp-color, .sp-hue, .sp-clear { - border: solid 1px #666; -} +.sp-color, .sp-hue, .sp-clear {box-shadow: var(--ui-shadow1);} /* Input */ .sp-input-container { @@ -284,13 +281,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. } .sp-input { font-size: 12px !important; - border: 1px inset; - padding: 4px 5px; - margin: 0; - width: 100%; - background:#FFF; + border: 0px inset; + padding: 3px 5px; + margin-left: 5px; + width: 95%; + background: var(--ui-white); border-radius: 3px; - color: #222; + color: var(--ui-black); } .sp-input:focus { border: 1px solid orange; @@ -302,12 +299,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. .sp-picker-container , .sp-palette-container { float:left; position: relative; - padding: 10px; + padding: 5px; padding-bottom: 300px; margin-bottom: -290px; } .sp-picker-container { - width: 172px; + width: 162px; border-left: solid 1px #fff; } @@ -343,8 +340,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. border: solid 1px #333; } .sp-initial span { - width: 30px; - height: 25px; + width: 20px; + height: 20px; border:none; display:block; float:left; @@ -412,7 +409,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. width: 16px; height: 16px; margin:2px 1px; - border: solid 1px #AAA; + box-shadow: 0px 2px 7px #000000a6; } .sp-container { diff --git a/lib/spectrum.js b/lib/spectrum.js index 2b2aa99a..c0f3a0f5 100644 --- a/lib/spectrum.js +++ b/lib/spectrum.js @@ -32,7 +32,7 @@ flat: false, showInput: false, allowEmpty: false, - showButtons: true, + showButtons: false, clickoutFiresChange: true, showInitial: false, showPalette: false, diff --git a/src/editor/interfaces/Interfaces.ColorPicker.js b/src/editor/interfaces/Interfaces.ColorPicker.js index a45d2c6e..6872368d 100644 --- a/src/editor/interfaces/Interfaces.ColorPicker.js +++ b/src/editor/interfaces/Interfaces.ColorPicker.js @@ -34,12 +34,12 @@ var ColorPickerInterface = function (wickEditor) { colorPickerContainer = document.getElementById('colorPickerGUI'); colorPickerContainer.style.display = 'none'; - var closeButton = document.createElement('div'); + /*var closeButton = document.createElement('div'); closeButton.className = 'color-picker-close-button'; closeButton.onclick = function () { self.close(); } - colorPickerContainer.appendChild(closeButton); + colorPickerContainer.appendChild(closeButton);*/ colorPicker = document.createElement('input'); colorPicker.type = 'text'; diff --git a/styles/colorpicker.css b/styles/colorpicker.css index f860b822..a3c1cfa2 100644 --- a/styles/colorpicker.css +++ b/styles/colorpicker.css @@ -1,10 +1,10 @@ #colorPickerGUI { - width: 335px; - height: 250px; + width: 294px; + height: 192px; position: absolute; left: 0px; top: 0px; - border: 1px solid white; + border: 1px solid var(--ui-white); z-index: 9; border-radius: 4px; background-color: var(--ui-base); @@ -35,17 +35,17 @@ float: right; cursor: pointer; background-image: url("../resources/tools/Dropper.svg"); - background-repeat: no-repeat; - background-position: center; - text-overflow: clip; - overflow: hidden; - background-size: 25px 25px; - opacity: 1.0; - margin-top: 3px; + background-repeat: no-repeat; + background-position: center; + text-overflow: clip; + overflow: hidden; + background-size: 25px 25px; + opacity: 1.0; + margin-top: 3px; margin-right: 3px; position: absolute; - left: 122px; - top: 203px; + left: 164px; + top: 161px; z-index: 99999999999; } .color-picker-dropper-button:hover { diff --git a/styles/inspector.css b/styles/inspector.css index b3a253a4..1fcfc96d 100644 --- a/styles/inspector.css +++ b/styles/inspector.css @@ -132,14 +132,14 @@ .inspector-input-slider { width: 45%; -webkit-appearance: none; - height: 22px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - margin-left: 10px; - border-radius: 3px; + height: 22px; + background: var(--ui-base-light2); + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + margin-left: 10px; + border-radius: 3px; } .inspector-input-slider:hover { opacity: 1.0; diff --git a/styles/scriptingide.css b/styles/scriptingide.css index ce1b1465..83a6cb14 100644 --- a/styles/scriptingide.css +++ b/styles/scriptingide.css @@ -6,7 +6,7 @@ height: 300px; z-index: 4; /* transition: height 0.2s ease; */ - border-radius: 9px 9px 0px 0px; + border-radius: 0px; } #errorMessage { @@ -106,7 +106,7 @@ -webkit-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; - border-radius: 0; + border-radius: 0px; } /*#scriptingIDEHeader:hover { box-shadow: inset 0 0 1px #fff; diff --git a/styles/timeline.css b/styles/timeline.css index bae4e67a..80fae876 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -230,6 +230,7 @@ body { position: absolute; font-size: 12px; font-family: var(--ui-font); + border-radius: 2px; } .soundLayer { From f6d43087cbd8e880f91c7afb2be50661555ac038 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 16:05:53 -0400 Subject: [PATCH 28/37] Revert "Replace x's with multiplication signs in inspector" This reverts commit c40cbf1354d36dbefc15e6a7bf96a2422524fadd. --- src/editor/interfaces/Interfaces.Inspector.Properties.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index e8cb1a94..7edec8de 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -23,7 +23,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Position (X, Y)', - otherTitle: '×', + otherTitle: 'x', isActiveFn: function () { return selectionInfo.numObjects === 1 && selectionInfo.type == 'wickobject'; @@ -48,7 +48,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Width, Height', - otherTitle: '×', + otherTitle: 'x', isActiveFn: function () { return selectionInfo.numObjects === 1 && selectionInfo.type == 'wickobject' @@ -74,7 +74,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Scale', - otherTitle: '×', + otherTitle: 'x', isActiveFn: function () { return selectionInfo.numObjects === 1 && selectionInfo.type == 'wickobject' @@ -340,7 +340,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { properties.push(new InspectorInterface.TwoStringInput({ title: '', tooltip: 'Project Size', - otherTitle: '×', + otherTitle: 'x', isActiveFn: function () { return selectionInfo.type === 'project'; }, From 393b8040e7759a246e26ae8626f72672454d0ca4 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 16:18:19 -0400 Subject: [PATCH 29/37] Minor timeline css adjustments --- styles/timeline.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/timeline.css b/styles/timeline.css index 80fae876..6d75997c 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -676,7 +676,7 @@ body { top: 1px; left: 10px; font-size: 14px; - font-weight: bold; + font-weight: 550; font-family: var(--ui-font); } .number-line-cell-number-small { @@ -885,6 +885,8 @@ body { left: 17px; top: 1px; text-align: center; + font-family: var(--ui-font); + font-weight: 550; } .timeline-zoom-icon { From 32b1c6acf7a82985354002e1b016aa4b27e5fe97 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 16:36:50 -0400 Subject: [PATCH 30/37] Minor CSS tweaks and capitalization fix --- src/editor/interfaces/Interfaces.MenuBar.js | 2 +- styles/editor.css | 14 +++++++------- styles/inspector.css | 2 +- styles/timeline.css | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/editor/interfaces/Interfaces.MenuBar.js b/src/editor/interfaces/Interfaces.MenuBar.js index 8b217be2..0c9899f3 100644 --- a/src/editor/interfaces/Interfaces.MenuBar.js +++ b/src/editor/interfaces/Interfaces.MenuBar.js @@ -125,7 +125,7 @@ var MenuBarInterface = function (wickEditor) { projectSettingsElem = document.createElement('div'); projectSettingsElem.className = 'tooltipElem menuBarProjectSettingsButton'; - projectSettingsElem.setAttribute('alt', "Project settings"); + projectSettingsElem.setAttribute('alt', "Project Settings"); projectSettingsElem.onclick = function () { wickEditor.guiActionHandler.doAction("toggleProjectSettings"); } diff --git a/styles/editor.css b/styles/editor.css index 9eee414b..988c3bc4 100755 --- a/styles/editor.css +++ b/styles/editor.css @@ -53,16 +53,16 @@ html, body { width:100%; height:100%; overflow: hidden; } /* just to be sure the --ui-accent1-dark1: #2b6b59; --ui-accent1-dark2: #2b4c43; --ui-accent1-light1: #76ffc9; - --ui-accent2: #e4748f; + --ui-accent2: #dc576d; --ui-accent2-light1: #ffc4c8; - --ui-accent2-dark1: #a23956; - --ui-accent2-dark2: #561829; - --ui-accent3: #786fc7; - --ui-accent3-dark1: #786fc7; - --ui-accent3-dark2: #786fc7; + --ui-accent2-dark1: #a24f5f; + --ui-accent2-dark2: #5a3640; + --ui-accent3: #77658a; + --ui-accent3-dark1: #5b5267; + --ui-accent3-dark2: #3e3c48; + --ui-accent4: #d6bb24; --ui-warning-text: #FF0000; --ui-shadow1: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - --ui-font: "San Franscisco", "Segoe UI", sans-serif; --ui-system-sans-font: "San Franscisco", "Segoe UI", "Helvetica Neue", sans-serif; } diff --git a/styles/inspector.css b/styles/inspector.css index 1fcfc96d..e6c081a1 100644 --- a/styles/inspector.css +++ b/styles/inspector.css @@ -272,7 +272,7 @@ } .inspector-button-multiple { - background-color: #556270; + background-color: var(--ui-accent3); } .inspector-button-symbol { diff --git a/styles/timeline.css b/styles/timeline.css index 6d75997c..e3734420 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -476,7 +476,7 @@ body { .frame-extender-handle-right:hover { float: right; - background: rgba(249,221,0,0.34); + background: #ffffff; border-right: 2px solid #ffff00; border-top: 2px solid #ffff00; border-bottom: 2px solid #ffff00; From b92378ba278d0bf00912b5c60bdb6b13ce127d1b Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 17:07:40 -0400 Subject: [PATCH 31/37] More CSS tweaks --- styles/editor.css | 7 +++---- styles/inspector.css | 6 +++--- styles/timeline.css | 9 +++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/styles/editor.css b/styles/editor.css index 988c3bc4..d3f8362f 100755 --- a/styles/editor.css +++ b/styles/editor.css @@ -57,10 +57,9 @@ html, body { width:100%; height:100%; overflow: hidden; } /* just to be sure the --ui-accent2-light1: #ffc4c8; --ui-accent2-dark1: #a24f5f; --ui-accent2-dark2: #5a3640; - --ui-accent3: #77658a; - --ui-accent3-dark1: #5b5267; - --ui-accent3-dark2: #3e3c48; - --ui-accent4: #d6bb24; + --ui-accent3: #8781b1; + --ui-accent3-dark1: #624e8a; + --ui-accent3-dark2: #413c50; --ui-warning-text: #FF0000; --ui-shadow1: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); --ui-font: "San Franscisco", "Segoe UI", sans-serif; diff --git a/styles/inspector.css b/styles/inspector.css index e6c081a1..14995fb4 100644 --- a/styles/inspector.css +++ b/styles/inspector.css @@ -276,7 +276,7 @@ } .inspector-button-symbol { - background-color: #FF6B6B; + background-color: var(--ui-accent2); } .inspector-button-all-paths { @@ -284,7 +284,7 @@ } .inspector-button-frames { - background-color: var(--ui-accent2); + background-color: var(--ui-accent3); } .inspector-button-playranges { @@ -292,7 +292,7 @@ } .inspector-button-tweens { - background-color: #556270; + background-color: var(--ui-accent3-dark1); } .inspector-divider { diff --git a/styles/timeline.css b/styles/timeline.css index e3734420..8c6a835d 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -28,12 +28,12 @@ body { --frame-handle-width: 8px; --frame-padding-width: 4px; - --frame-padding-height: 2px; + --frame-padding-height: 4px; --frames-strip-padding-vertical: 4px; --timeline-left-padding: 5px; - --timeline-top-padding: 6px; + --timeline-top-padding: 5px; --timeline-bottom-padding: 5px; --frames-cell-first-padding: 5px; @@ -91,7 +91,7 @@ body { } .layers-container { - background-color: #414141; + background-color: var(--ui-base-dark1); width: var(--layers-width); height: 1000%; left: 0px; @@ -121,6 +121,7 @@ body { background-position: 50% 50%; background-size: 12px 12px; background-size: 12px 12px; + z-index: 2; } .add-layer-button { @@ -816,7 +817,7 @@ body { height: var(--number-line-height); top: 0px; left: 0px; - background-color: var(--ui-base-dark1); + background-color: var(--ui-base-dark2); } .layer-toolbar { From 1e77cda804667e1c091e32f5f84c9e0cf49c2a3b Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 17:27:40 -0400 Subject: [PATCH 32/37] Fix minor menu bar bug --- src/editor/interfaces/Interfaces.MenuBar.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/editor/interfaces/Interfaces.MenuBar.js b/src/editor/interfaces/Interfaces.MenuBar.js index 0c9899f3..069bc61d 100644 --- a/src/editor/interfaces/Interfaces.MenuBar.js +++ b/src/editor/interfaces/Interfaces.MenuBar.js @@ -39,22 +39,21 @@ var MenuBarInterface = function (wickEditor) { tabElem.className = "menubarTab"; tabElem.id = 'menubarMenu' + this.name; tabElem.innerHTML = this.name; - var openUp = function () { + tabElem.onclick = function () { if(func) { func(); return; } var visible = self.elem.style.display === "block"; closeAllMenus(); - openTabName = tabElem.id; if(visible) { self.elem.style.display = "none"; } else { + openTabName = tabElem.id; self.elem.style.display = "block"; } self.elem.style.left = (tabElem.offsetLeft-8) + 'px'; } - tabElem.onclick = openUp; tabElem.onmouseover = function() { if (openTabName !== tabElem.id && openTabName !== undefined) { var visible = self.elem.style.display === "block"; From 804361234e24a315fa77268b3cb2f4dab07c1cfd Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 17:46:35 -0400 Subject: [PATCH 33/37] Color picker clickout now fires change --- src/editor/interfaces/Interfaces.ColorPicker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor/interfaces/Interfaces.ColorPicker.js b/src/editor/interfaces/Interfaces.ColorPicker.js index 6872368d..40e72db4 100644 --- a/src/editor/interfaces/Interfaces.ColorPicker.js +++ b/src/editor/interfaces/Interfaces.ColorPicker.js @@ -61,6 +61,7 @@ var ColorPickerInterface = function (wickEditor) { localStorageKey: "spectrum.demo", showAlpha: true, maxSelectionSize: 6, + clickoutFiresChange: true, move: function (color) { var colorString = color.toString(); if(previewType && previewType === 'background-color') { From 95de01d16ecb3a662d2584db1709580a9bf436d7 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 18:56:08 -0400 Subject: [PATCH 34/37] Allow resizing of timeline and fix related bugs --- .../Interfaces.Timeline.FramesContainer.js | 2 +- styles/timeline.css | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js b/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js index d0c01527..8a5a7c0b 100644 --- a/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js +++ b/src/editor/interfaces/Interfaces.Timeline.FramesContainer.js @@ -145,7 +145,7 @@ TimelineInterface.FramesContainer = function (wickEditor, timeline) { var scrollX = -timeline.horizontalScrollBar.getScrollPosition(); var scrollY = -timeline.verticalScrollBar.getScrollPosition(); - if(wickEditor.project.getCurrentObject().layers.length < 4) { + if(wickEditor.project.getCurrentObject().layers.length*(cssVar('--layer-height')+cssVar('--common-padding')) < wickEditor.project.timelineHeight) { scrollY = 0; timeline.verticalScrollBar.reset(); } diff --git a/styles/timeline.css b/styles/timeline.css index 8c6a835d..c42ac2e1 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -96,7 +96,6 @@ body { height: 1000%; left: 0px; top: 0px; - position: absolute; overflow: hidden; z-index: 1; @@ -227,7 +226,7 @@ body { border-radius: 1px; text-align: center; line-height: calc(var(--layer-height) - 5px); - color: white; + color: var(--ui-white); position: absolute; font-size: 12px; font-family: var(--ui-font); @@ -818,6 +817,7 @@ body { top: 0px; left: 0px; background-color: var(--ui-base-dark2); + z-index: 2; } .layer-toolbar { @@ -826,9 +826,10 @@ body { height: var(--scrollbar-thickness); bottom: 0px; left: 0px; - border-top: 1px; - border-color: black; + border-top: 1px; + border-color: black; background-color: var(--ui-base-dark1); + z-index: 2; } .hide-scrollbar-connect-piece { @@ -842,11 +843,13 @@ body { .resize-timeline-bar { height: var(--scrollbar-thickness); - width: 100%; + margin-left: 50px; + width: 84px; bottom: 0px; position: absolute; left: 0px; cursor: ns-resize; + z-index: 2; } .zoom-box { From a1ffd0f7ba59bacb43cdc867bcbf4cacddca7e13 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 19:16:05 -0400 Subject: [PATCH 35/37] Fix medium fonts in Firefox --- src/editor/interfaces/Interfaces.MenuBar.js | 2 +- styles/editor.css | 2 +- styles/inspector.css | 2 +- styles/library.css | 2 +- styles/timeline.css | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/editor/interfaces/Interfaces.MenuBar.js b/src/editor/interfaces/Interfaces.MenuBar.js index 069bc61d..e74b35c5 100644 --- a/src/editor/interfaces/Interfaces.MenuBar.js +++ b/src/editor/interfaces/Interfaces.MenuBar.js @@ -260,7 +260,7 @@ var MenuBarInterface = function (wickEditor) { }), ]); - addTab('Run...', [], function () { + addTab('Run...', [], function () { wickEditor.guiActionHandler.doAction("runProject"); }); } diff --git a/styles/editor.css b/styles/editor.css index d3f8362f..b9538699 100755 --- a/styles/editor.css +++ b/styles/editor.css @@ -650,7 +650,7 @@ select { z-index: 999999999; font-size: 16px; border-radius: 3px; - font-weight: 500; + font-weight: 550; font-family: var(--ui-font); color: var(--ui-complement-dark1); } diff --git a/styles/inspector.css b/styles/inspector.css index 14995fb4..2eae45bf 100644 --- a/styles/inspector.css +++ b/styles/inspector.css @@ -42,7 +42,7 @@ .inspector-selection-title { color: white; font-size: 18px; - font-weight: 500; + font-weight: 550; width: calc(100% - 55px); float: right; margin-left: 10px; diff --git a/styles/library.css b/styles/library.css index 54dec212..329563d9 100644 --- a/styles/library.css +++ b/styles/library.css @@ -12,7 +12,7 @@ #asset-library-title { width: 100%; - font-weight: 500; + font-weight: 550; color: white; margin-bottom: 1px; text-align: center; diff --git a/styles/timeline.css b/styles/timeline.css index c42ac2e1..7ef6c750 100644 --- a/styles/timeline.css +++ b/styles/timeline.css @@ -433,7 +433,7 @@ body { pointer-events: none; font-size: 10px; color: var(--ui-black); - font-weight: 500; + font-weight: 550; } .has-scripts-icon { From d92cee8f1c58911a25502598f5a9662b89b356d7 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Fri, 13 Jul 2018 20:41:57 -0400 Subject: [PATCH 36/37] Lightened background color, fixed toolshelf misalign --- styles/editor.css | 2 +- styles/toolbar.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/editor.css b/styles/editor.css index b9538699..3e63dfa3 100755 --- a/styles/editor.css +++ b/styles/editor.css @@ -67,7 +67,7 @@ html, body { width:100%; height:100%; overflow: hidden; } /* just to be sure the } body { - background-color: var(--ui-base-dark1); + background-color: var(--ui-complement-dark2); } canvas { display:block; } /* To remove the scrollbars */ diff --git a/styles/toolbar.css b/styles/toolbar.css index 137ec827..95b5544e 100644 --- a/styles/toolbar.css +++ b/styles/toolbar.css @@ -1,5 +1,5 @@ #toolbarGUI { - top: 30px; + top: 25px; left: 0px; height: calc(100%); width: 40px; @@ -7,8 +7,8 @@ padding: 3px; padding-top: 5px; overflow: hidden; -/* border-left-color: #585757;*/ -/* border-bottom-color: #585757;*/ + /* border-left-color: #585757;*/ + /* border-bottom-color: #585757;*/ } #toolOptionsGUI { From 79dfa064a6655be9bbc8d3038014e2080f291172 Mon Sep 17 00:00:00 2001 From: Landon J <30781325+kryptot7@users.noreply.github.com> Date: Sun, 29 Jul 2018 15:47:18 -0400 Subject: [PATCH 37/37] Bold/italic fonts now show up properly in export and project preview Arial bold/italic is missing outside of the editor though, but I don't know how to fix this. --- player.html | 13 ++++++++-- .../Interfaces.Inspector.Properties.js | 26 ++++++++++++++----- src/project/WickProject.js | 8 ++++-- 3 files changed, 37 insertions(+), 10 deletions(-) diff --git a/player.html b/player.html index 1cfdee0e..48433808 100644 --- a/player.html +++ b/player.html @@ -6525,8 +6525,17 @@ var self = this; var fontsInProject = []; self.getAllObjects().forEach(function (o) { - if(o.isText) - fontsInProject.push(o.textData.fontFamily); + if(o.isText) { + //these variables will be attached to the font name in the WebFont Importer + var weight = ":"+o.textData.fontWeight; + var italic = (o.textData.fontStyle == "italic") ? 'i' : ''; + //only webfonts need those two variables, not the default font, Arial + if (o.textData.fontFamily === 'Arial' || o.textData.fontFamily === 'arial') { + weight = italic = ""; + } else { + fontsInProject.push(o.textData.fontFamily+weight+italic); + } + } }); loadGoogleFonts(fontsInProject, function () { wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; diff --git a/src/editor/interfaces/Interfaces.Inspector.Properties.js b/src/editor/interfaces/Interfaces.Inspector.Properties.js index 5e216fe4..d9236dbe 100644 --- a/src/editor/interfaces/Interfaces.Inspector.Properties.js +++ b/src/editor/interfaces/Interfaces.Inspector.Properties.js @@ -185,8 +185,13 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { //these variables will be attached to the font name in the WebFont Importer var weight = ":"+selectionInfo.object.textData.fontWeight; var italic = (selectionInfo.object.textData.fontStyle == "italic") ? 'i' : ''; - //log stuff like "Open Sans:boldi" for testing - console.log(val+weight+italic); + //console.log(val+weight+italic); + + //only webfonts need those two variables, not the default font, Arial + if (selectionInfo.object.textData.fontFamily === 'Arial' + || selectionInfo.object.textData.fontFamily === 'arial') { + weight = italic = ""; + } //if font is loaded succesfully, update canvas and setting var callback = function () { @@ -199,7 +204,7 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { //reload Google Font with new weight and italic value. //if you enable bold and/or italic then change to a font that doesn't support one of those, Wick will load Regular //and reset the Bold and Italic buttons. Trying to load every single variant to check its validity takes too long. - //This problem can be alleviated using a Google Web Font API Key. + //This problem could be alleviated if Wick Editor had a Google Web Font API Key. loadGoogleFonts([val+weight+italic], callback, function () { loadGoogleFonts([val], callback); @@ -266,11 +271,20 @@ InspectorInterface.getProperties = function (wickEditor, inspector) { //these variables will be attached to the font name in the WebFont Importer var weight = ":"+selectionInfo.object.textData.fontWeight; var italic = (selectionInfo.object.textData.fontStyle == "italic") ? 'i' : ''; - //reload Google Font with new weight and italic value - loadGoogleFonts([selectionInfo.object.textData.fontFamily+weight+italic], function () { + + //only webfonts need those two variables, not the default font, Arial + if (selectionInfo.object.textData.fontFamily === 'Arial' + || selectionInfo.object.textData.fontFamily === 'arial') { + weight = italic = ""; wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; wickEditor.syncInterfaces(); - }); + } else { + //reload Google Font with new weight and italic value + loadGoogleFonts([selectionInfo.object.textData.fontFamily+weight+italic], function () { + wickEditor.canvas.getInteractiveCanvas().needsUpdate = true; + wickEditor.syncInterfaces(); + }); + } } })); diff --git a/src/project/WickProject.js b/src/project/WickProject.js index 4491b49a..6fe1b86e 100755 --- a/src/project/WickProject.js +++ b/src/project/WickProject.js @@ -771,8 +771,12 @@ WickProject.prototype.loadFonts = function (callback) { var self = this; var fontsInProject = []; self.getAllObjects().forEach(function (o) { - if(o.isText && o.textData.fontFamily !== 'Arial' && o.textData.fontFamily !== 'arial' && fontsInProject.indexOf(o.textData.fontFamily)) - fontsInProject.push(o.textData.fontFamily); + if(o.isText && o.textData.fontFamily !== 'Arial' && o.textData.fontFamily !== 'arial' && fontsInProject.indexOf(o.textData.fontFamily+weight+italic)) { + //these variables will be attached to the font name in the WebFont Importer + var weight = ":"+o.textData.fontWeight; + var italic = (o.textData.fontStyle == "italic") ? 'i' : ''; + fontsInProject.push(o.textData.fontFamily+weight+italic); + } }); if(fontsInProject.length === 0 && callback) { callback()