diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js index 63ef3ba2..ab91d6af 100644 --- a/src/js/controller/preview/PreviewController.js +++ b/src/js/controller/preview/PreviewController.js @@ -244,7 +244,8 @@ }; ns.PreviewController.prototype.shouldRender_ = function () { - return (this.renderFlag || this.popupPreviewController.renderFlag) && (Date.now() - this.lastRenderTime > RENDER_MINIMUM_DELAY); + return (this.renderFlag || this.popupPreviewController.renderFlag) && + (Date.now() - this.lastRenderTime > RENDER_MINIMUM_DELAY); }; ns.PreviewController.prototype.toggleOnionSkin_ = function () { diff --git a/src/js/model/Frame.js b/src/js/model/Frame.js index 58d96fca..3e692fe4 100644 --- a/src/js/model/Frame.js +++ b/src/js/model/Frame.js @@ -16,12 +16,16 @@ ns.Frame.fromPixelGrid = function (pixels, width, height) { if (pixels.length) { + var w; + var h; + var buffer; + if (pixels[0].length) { - var w = pixels.length; - var h = pixels[0].length; - var buffer = []; + w = pixels.length; + h = pixels[0].length; + buffer = []; for (var y = 0; y < h; y++) { - for (var x = 0; x < w; x++ ) { + for (var x = 0; x < w; x++) { if (typeof pixels[x][y] == 'string') { buffer[y * w + x] = pskl.utils.colorToInt(pixels[x][y]); } else { @@ -30,13 +34,13 @@ } } } else if (width && height) { - var w = width; - var h = height; + w = width; + h = height; buffer = pixels; } else { throw 'Bad arguments in pskl.model.frame.fromPixelGrid, missing width and height'; } - + var frame = new pskl.model.Frame(w, h); frame.setPixels(buffer); return frame; @@ -48,7 +52,7 @@ var _emptyPixelGridCache = {}; ns.Frame.createEmptyPixelGrid_ = function (width, height) { var pixels; - var key = width+"-"+height; + var key = width + '-' + height; if (_emptyPixelGridCache[key]) { pixels = _emptyPixelGridCache[key]; } else { @@ -114,8 +118,8 @@ var p = this.pixels[index]; if (typeof color === 'string') { color = pskl.utils.colorToInt(color); - } - + } + if (p !== color) { this.pixels[index] = color || pskl.utils.colorToInt(Constants.TRANSPARENT_COLOR); this.version++; diff --git a/src/js/model/frame/AsyncCachedFrameProcessor.js b/src/js/model/frame/AsyncCachedFrameProcessor.js index 61a7a524..1bfcad8d 100644 --- a/src/js/model/frame/AsyncCachedFrameProcessor.js +++ b/src/js/model/frame/AsyncCachedFrameProcessor.js @@ -32,23 +32,12 @@ processedFrame = cache[key1]; } else if (frame instanceof pskl.model.frame.RenderedFrame) { // Cannot use 2nd level cache with rendered frames - var callbackFirstLvlCacheOnly = this.onProcessorComplete_.bind(this, deferred, cache, key1/*, key1*/); + var callbackFirstLvlCacheOnly = this.onProcessorComplete_.bind(this, deferred, cache, key1); this.frameProcessor(frame, callbackFirstLvlCacheOnly); } else { - // TODO: Remove? or offload to worker - /* - var framePixels = new Float64Array(frame.pixels.buffer).toString(); - var key2 = pskl.utils.hashCode(framePixels); - if (cache[key2]) { - processedFrame = this.outputCloner(cache[key2], frame); - } else { - */ - var callback = this.onProcessorComplete_.bind(this, deferred, cache, key1/*, key1*/); + var callback = this.onProcessorComplete_.bind(this, deferred, cache, key1); this.frameProcessor(frame, callback); cache[key1] = processedFrame; - /* - } - */ } if (processedFrame) { @@ -58,9 +47,8 @@ return deferred.promise; }; - ns.AsyncCachedFrameProcessor.prototype.onProcessorComplete_ = function (deferred, cache, key1/*, key2*/, result) { + ns.AsyncCachedFrameProcessor.prototype.onProcessorComplete_ = function (deferred, cache, key1, result) { cache[key1] = result; - //cache[key2] = result; deferred.resolve(result); }; })(); diff --git a/src/js/model/frame/CachedFrameProcessor.js b/src/js/model/frame/CachedFrameProcessor.js index 44de9b74..648eacaf 100644 --- a/src/js/model/frame/CachedFrameProcessor.js +++ b/src/js/model/frame/CachedFrameProcessor.js @@ -71,22 +71,8 @@ processedFrame = this.frameProcessor(frame); cache[cacheKey] = processedFrame; } else { - // TODO: Remove? - /* - // Float64Array.toString() is about 2.4x times faster compared to Uint32Array.toString() - var framePixels = new Float64Array(frame.pixels.buffer).toString(); - var frameAsString = pskl.utils.hashCode(framePixels); - if (cache[frameAsString]) { - this.cacheHitLvl2_++; - processedFrame = this.outputCloner(cache[frameAsString], frame); - } else { - */ processedFrame = this.frameProcessor(frame); cache[cacheKey] = processedFrame; - /* - cache[frameAsString] = processedFrame; - } - */ } return processedFrame; diff --git a/src/js/service/CurrentColorsService.js b/src/js/service/CurrentColorsService.js index bff8f69a..245a1f79 100644 --- a/src/js/service/CurrentColorsService.js +++ b/src/js/service/CurrentColorsService.js @@ -96,10 +96,17 @@ var colors = {}; var framesToBatch = []; + + var removeColorsIfNotInCurrent = function(hash, color) { + if (!frameCache[hash][color]) { + delete colors[color]; + } + }; + for (var i = 0, length = frames.length; i < length; ++i) { var frame = frames[i]; var hash = frame.getHash(); - + if (frameCache[hash]) { colors = Object.assign(colors, frameCache[hash]); @@ -107,14 +114,10 @@ var hashVersion = parseInt(hashParts.pop()); if (hashVersion > 0) { - var lastColors = frameCache[hashParts.join('-')+'-'+(hashVersion - 1)]; + var lastColors = frameCache[hashParts.join('-') + '-' + (hashVersion - 1)]; if (lastColors) { - Object.keys(lastColors).forEach(function(color) { - if (!frameCache[hash][color]) { - delete colors[color]; - } - }); + Object.keys(lastColors).forEach(removeColorsIfNotInCurrent.bind(this, hash)); } } } else { @@ -140,7 +143,7 @@ this.setCurrentColors(hexColors); }.bind(this, colors); - if (framesToBatch.length == 0) { + if (framesToBatch.length === 0) { batchAllThen([colors]); } else { batchAll(framesToBatch, job).then(batchAllThen); diff --git a/src/js/service/storage/LocalStorageService.js b/src/js/service/storage/LocalStorageService.js index 8633f45f..ad11208e 100644 --- a/src/js/service/storage/LocalStorageService.js +++ b/src/js/service/storage/LocalStorageService.js @@ -41,7 +41,7 @@ ns.LocalStorageService.prototype.load = function(name) { var piskelString = this.getPiskel(name); var key = this.getKey_(name); - + var serializedPiskel = new Uint16Array(piskelString.length); for (var i = 0, length = piskelString.length; i < length; i++) { serializedPiskel[i] = piskelString.charCodeAt(i); diff --git a/src/js/utils/FileUtils.js b/src/js/utils/FileUtils.js index fb8bdeb6..345cbd20 100644 --- a/src/js/utils/FileUtils.js +++ b/src/js/utils/FileUtils.js @@ -16,7 +16,7 @@ readFileAsArrayBuffer : function (file, callback) { var reader = new FileReader(); - reader.addEventListener("loadend", function() { + reader.addEventListener('loadend', function() { callback(reader.result); }); reader.readAsArrayBuffer(file); diff --git a/src/js/utils/FrameUtils.js b/src/js/utils/FrameUtils.js index 55aebf33..cdf21e7d 100644 --- a/src/js/utils/FrameUtils.js +++ b/src/js/utils/FrameUtils.js @@ -53,7 +53,7 @@ var transparentColorInt = pskl.utils.colorToInt(transparentColor); if (transparentColorInt != constantTransparentColorInt) { pixels = frame.getPixels(); - for (var i = 0; i < pixels.length; i++) { + for (var i = 0, length = pixels.length; i < length; i++) { if (pixels[i] == constantTransparentColorInt) { pixels[i] = transparentColorInt; } @@ -61,7 +61,7 @@ } // Imagedata from cache - var imageDataKey = w+"-"+h; + var imageDataKey = w + '-' + h; var imageData; if (!imageDataPool[imageDataKey]) { imageData = imageDataPool[imageDataKey] = context.createImageData(w, h); @@ -75,7 +75,7 @@ imgDataData.set(data); // Offcanvas from cache - var offCanvasKey = w+"-"+h; + var offCanvasKey = w + '-' + h; var offCanvas; if (!offCanvasPool[offCanvasKey]) { offCanvas = offCanvasPool[offCanvasKey] = pskl.utils.CanvasUtils.createCanvas(w, h); diff --git a/src/js/utils/core.js b/src/js/utils/core.js index 56a71d2d..458d9543 100644 --- a/src/js/utils/core.js +++ b/src/js/utils/core.js @@ -91,13 +91,17 @@ if (!Function.prototype.bind) { }; ns.hashCode = function(str) { - var hash = 0, i, chr, len; - if (str.length === 0) return hash; - for (i = 0, len = str.length; i < len; i++) { - chr = str.charCodeAt(i); - hash = hash * 31 + chr; - hash |= 0; // Convert to 32bit integer + var hash = 0; + if (str.length === 0) { + return hash; } + + for (var i = 0, len = str.length, chr; i < len; i++) { + chr = str.charCodeAt(i); + hash = hash * 31 + chr; + hash |= 0; // Convert to 32bit integer + } + return hash; }; @@ -120,6 +124,7 @@ if (!Function.prototype.bind) { }; var colorCache = {}; + var colorCacheReverse = {}; ns.colorToInt = function (color) { if (typeof color === 'number') { return color; @@ -130,26 +135,30 @@ if (!Function.prototype.bind) { } var intValue = 0; + var r; + var g; + var b; + var a; // Hexadecimal if ((color.length == 9 || color.length == 7 || color.length == 3) && color[0] == '#') { - var hex = parseInt(color.substr(1), 16); - if (color.length == 9) { - r = hex >> 24 & 0xff; - g = hex >> 16 & 0xff; - b = hex >> 8 & 0xff; - a = hex & 0xff; - } else if (color.length == 7) { - r = hex >> 16 & 0xff; - g = hex >> 8 & 0xff; - b = hex & 0xff; - a = 255; - } else { - r = hex >> 8 & 0xf * 16; - g = hex >> 4 & 0xf * 16; - b = hex & 0xf * 16; - a = 255; - } + var hex = parseInt(color.substr(1), 16); + if (color.length == 9) { + r = hex >> 24 & 0xff; + g = hex >> 16 & 0xff; + b = hex >> 8 & 0xff; + a = hex & 0xff; + } else if (color.length == 7) { + r = hex >> 16 & 0xff; + g = hex >> 8 & 0xff; + b = hex & 0xff; + a = 255; + } else { + r = hex >> 8 & 0xf * 16; + g = hex >> 4 & 0xf * 16; + b = hex & 0xf * 16; + a = 255; + } } else if (color.length > 5 && color.substr(0, 5) == 'rgba(') { // RGBA var rgba = color.substr(5).slice(0, -1).split(','); r = parseInt(rgba[0]); @@ -161,13 +170,14 @@ if (!Function.prototype.bind) { r = parseInt(rgb[0]); g = parseInt(rgb[1]); b = parseInt(rgb[2]); + a = 255; } else { // NO HOPE // Determine color by using the browser itself - d = document.createElement("div"); + var d = document.createElement('div'); d.style.color = color; document.body.appendChild(d); - // Color in RGB + // Color in RGB color = window.getComputedStyle(d).color; document.body.removeChild(d); @@ -181,10 +191,9 @@ if (!Function.prototype.bind) { return intValue; }; - var colorCacheReverse = {}; ns.intToColor = function(intValue) { - if (typeof colorCache[color] !== 'undefined') { - return colorCache[color]; + if (typeof intValue === 'string') { + return intValue; } if (typeof colorCacheReverse[intValue] !== 'undefined') { @@ -195,7 +204,7 @@ if (!Function.prototype.bind) { var g = intValue >> 8 & 0xff; var b = intValue >> 16 & 0xff; var a = (intValue >> 24 >>> 0 & 0xff) / 255; - var color = 'rgba('+r+','+g+','+b+','+a+')'; + var color = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; colorCache[color] = intValue; colorCacheReverse[intValue] = color; diff --git a/src/js/utils/serialization/Deserializer.js b/src/js/utils/serialization/Deserializer.js index e700f108..e80773f4 100644 --- a/src/js/utils/serialization/Deserializer.js +++ b/src/js/utils/serialization/Deserializer.js @@ -15,7 +15,7 @@ // Backward compatibility for JSON (modelVersion < 3) if (String.fromCharCode(uint8[0]) == '{') { - var data = ""; + data = ''; for (var i = 0; i < uint8.length; i++) { data += String.fromCharCode(uint8[i]); } @@ -43,6 +43,8 @@ }; ns.Deserializer.prototype.deserialize = function (name) { + var i; + var j; var buffer = this.data_; var arr8 = new Uint8Array(buffer); var arr16 = new Uint16Array(buffer); @@ -69,21 +71,22 @@ /********/ // Descriptor name var descriptorName = ''; - for (var i = 0; i < descriptorNameLength; i++) { + for (i = 0; i < descriptorNameLength; i++) { descriptorName += String.fromCharCode(arr16[7 + i]); } // Descriptor description var descriptorDescription = ''; - for (var i = 0; i < descriptorDescriptionLength; i++) { + for (i = 0; i < descriptorDescriptionLength; i++) { descriptorDescription = String.fromCharCode(arr16[7 + descriptorNameLength + i]); } // Layers var layerStartIndex = 7 + descriptorNameLength + descriptorDescriptionLength; var layers = []; - for (var i = 0; i < layerCount; i++) { - var layer = {}; + var layer; + for (i = 0; i < layerCount; i++) { + layer = {}; var frames = []; // Meta @@ -96,13 +99,13 @@ // Name var layerName = ''; - for (var j = 0; j < layerNameLength; j++) { + for (j = 0; j < layerNameLength; j++) { layerName += String.fromCharCode(arr16[layerStartIndex + 5 + j]); } // Data URI var dataUri = ''; - for (var j = 0; j < dataUriLength; j++) { + for (j = 0; j < dataUriLength; j++) { dataUri += String.fromCharCode(arr8[(layerStartIndex + 5 + layerNameLength) * 2 + j]); } dataUri = 'data:image/png;base64,' + btoa(dataUri); @@ -119,26 +122,29 @@ var descriptor = new pskl.model.piskel.Descriptor(descriptorName, descriptorDescription); var piskel = new pskl.model.Piskel(width, height, descriptor); var loadedLayers = 0; - for (var i = 0; i < layerCount; i++) { - var layer = layers[i]; + + var loadLayerImage = function(layer, cb) { + var image = new Image(); + image.onload = function() { + var frames = pskl.utils.LayerUtils.createFramesFromSpritesheet(this, layer.frameCount); + frames.forEach(layer.model.addFrame.bind(layer.model)); + + loadedLayers++; + if (loadedLayers == layerCount) { + cb(piskel, {fps: fps}); + } + }; + image.src = layer.dataUri; + }; + + for (i = 0; i < layerCount; i++) { + layer = layers[i]; var nlayer = new pskl.model.Layer(layer.name); layer.model = nlayer; nlayer.setOpacity(layer.opacity); piskel.addLayer(nlayer); - var image = new Image(); - (function(layer, cb) { - image.onload = function() { - var frames = pskl.utils.LayerUtils.createFramesFromSpritesheet(this, layer.frameCount); - frames.forEach(layer.model.addFrame.bind(layer.model)); - - loadedLayers++; - if (loadedLayers == layerCount) { - cb(piskel, {fps: fps}); - } - }; - })(layer, this.callback_); - image.src = layer.dataUri; + loadLayerImage.bind(this, layer, this.callback_)(); } }; })(); diff --git a/src/js/utils/serialization/Serializer.js b/src/js/utils/serialization/Serializer.js index 1da51327..67dc5e30 100644 --- a/src/js/utils/serialization/Serializer.js +++ b/src/js/utils/serialization/Serializer.js @@ -10,11 +10,11 @@ * [1] = width * [2] = height * [3] = fps - * + * * // Descriptor * [4] = name length * [5] = description length - * + * * // Layers * [6] = layers count * [layer data index start] = layer name length @@ -30,8 +30,7 @@ * [name length..description length-1] = description * [layer data index start + 4..layer name length-1] = layer name * [layer name length..base 64 png data url length-1] = base 64 png data url - * - * + * */ ns.Serializer = { @@ -70,21 +69,27 @@ bytes += 3 * 2; bytes += layers[i].name.length * 2; bytes += framesData[i].length; - if (bytes%2 == 1) { + if (bytes % 2 == 1) { bytes++; - } + } } return bytes; }, serializePiskel : function (piskel, expanded) { + var i; + var j; + var layers; + var dataUri; + var dataUriLength; + // Render frames var framesData = []; - for (var i = 0, layers = piskel.getLayers(); i < layers.length; i++) { + for (i = 0, layers = piskel.getLayers(); i < layers.length; i++) { var renderer = new pskl.rendering.FramesheetRenderer(layers[i].getFrames()); - var dataUri = atob(renderer.renderAsCanvas().toDataURL().split(',')[1]); - var dataUriLength = dataUri.length; + dataUri = atob(renderer.renderAsCanvas().toDataURL().split(',')[1]); + dataUriLength = dataUri.length; framesData.push({uri: dataUri, length: dataUriLength}); } @@ -122,18 +127,18 @@ /* DATA */ /********/ // Descriptor name - for (var i = 0; i < descriptorNameLength; i++) { + for (i = 0; i < descriptorNameLength; i++) { arr16[7 + i] = descriptorName.charCodeAt(i); } // Descriptor description - for (var i = 0; i < descriptorDescriptionLength; i++) { + for (i = 0; i < descriptorDescriptionLength; i++) { arr16[7 + descriptorNameLength + i] = descriptorDescription.charCodeAt(i); } // Layers var layerStartIndex = 7 + descriptorNameLength + descriptorDescriptionLength; - for (var i = 0, layers = piskel.getLayers(); i < layers.length; i++) { + for (i = 0, layers = piskel.getLayers(); i < layers.length; i++) { var layer = layers[i]; var frames = layer.getFrames(); @@ -142,8 +147,8 @@ var opacity = layer.getOpacity(); var frameCount = frames.length; - var dataUri = framesData[i].uri - var dataUriLength = framesData[i].length + dataUri = framesData[i].uri; + dataUriLength = framesData[i].length; // Meta arr16[layerStartIndex] = layerNameLength; @@ -153,20 +158,19 @@ arr16[layerStartIndex + 4] = ((dataUriLength & 0x0000ffff)) >>> 0; // Lower 16 // Name - for (var j = 0; j < layerNameLength; j++) { + for (j = 0; j < layerNameLength; j++) { arr16[layerStartIndex + 5 + j] = layerName.charCodeAt(j); } // Data URI - for (var j = 0; j < dataUriLength; j++) { + for (j = 0; j < dataUriLength; j++) { arr8[(layerStartIndex + 5 + layerNameLength) * 2 + j] = dataUri.charCodeAt(j); } layerStartIndex += Math.ceil(5 + layerNameLength + (dataUriLength / 2)); } - return buffer; } - } + }; })(); diff --git a/src/js/utils/serialization/backward/Deserializer_v0.js b/src/js/utils/serialization/backward/Deserializer_v0.js index 99cef062..d1eec0c0 100644 --- a/src/js/utils/serialization/backward/Deserializer_v0.js +++ b/src/js/utils/serialization/backward/Deserializer_v0.js @@ -14,6 +14,6 @@ var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', ''); var layer = pskl.model.Layer.fromFrames('Layer 1', frames); - this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor), { fps: Constants.DEFAULTS.FPS}); + this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor), {fps: Constants.DEFAULTS.FPS}); }; })(); diff --git a/src/js/utils/serialization/backward/Deserializer_v1.js b/src/js/utils/serialization/backward/Deserializer_v1.js index 9eb9c5cf..7b777c62 100644 --- a/src/js/utils/serialization/backward/Deserializer_v1.js +++ b/src/js/utils/serialization/backward/Deserializer_v1.js @@ -16,7 +16,7 @@ piskel.addLayer(layer); }.bind(this)); - this.callback_(piskel, { fps: Constants.DEFAULTS.FPS}); + this.callback_(piskel, {fps: Constants.DEFAULTS.FPS}); }; ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) { diff --git a/src/js/utils/serialization/backward/Deserializer_v2.js b/src/js/utils/serialization/backward/Deserializer_v2.js index 3d1b3721..708d3505 100644 --- a/src/js/utils/serialization/backward/Deserializer_v2.js +++ b/src/js/utils/serialization/backward/Deserializer_v2.js @@ -13,7 +13,7 @@ var data = this.data_; var piskelData = data.piskel; name = piskelData.name || 'Deserialized piskel'; - description = piskelData.description || ''; + var description = piskelData.description || ''; var descriptor = new pskl.model.piskel.Descriptor(name, description); this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor); diff --git a/src/js/worker/framecolors/FrameColors.js b/src/js/worker/framecolors/FrameColors.js index 0ecc1e92..5c4d73a2 100644 --- a/src/js/worker/framecolors/FrameColors.js +++ b/src/js/worker/framecolors/FrameColors.js @@ -13,7 +13,10 @@ }; ns.FrameColors.prototype.process = function () { - this.worker.postMessage([pskl.utils.colorToInt(Constants.TRANSPARENT_COLOR), Constants.MAX_PALETTE_COLORS, this.pixels]); + this.worker.postMessage([ + pskl.utils.colorToInt(Constants.TRANSPARENT_COLOR), + Constants.MAX_PALETTE_COLORS, this.pixels + ]); }; ns.FrameColors.prototype.onWorkerMessage = function (event) { diff --git a/src/js/worker/framecolors/FrameColorsWorker.js b/src/js/worker/framecolors/FrameColorsWorker.js index 1609815f..348b8805 100644 --- a/src/js/worker/framecolors/FrameColorsWorker.js +++ b/src/js/worker/framecolors/FrameColorsWorker.js @@ -1,6 +1,6 @@ (function () { var ns = $.namespace('pskl.worker.framecolors'); - + if (Constants.TRANSPARENT_COLOR !== 'rgba(0, 0, 0, 0)') { throw 'Constants.TRANSPARENT_COLOR, please update FrameColorsWorker'; } @@ -52,7 +52,7 @@ for (var i = 0, length = frame.length; i < length && colors < this.MAX_PALETTE_COLORS; i++) { var color = frame[i]; if (color !== transparentColorInt) { - if (!frameColors[color]) { + if (!frameColors[color]) { frameColors[color] = true; colors++; }