From d126023c4a49c27234e2f4069398e7490dd4e77f Mon Sep 17 00:00:00 2001 From: jdescottes Date: Mon, 30 Jun 2014 20:38:14 +0200 Subject: [PATCH] temp --- src/js/controller/PreviewFilmController.js | 33 +++++++++++++++++--- src/js/controller/piskel/PiskelController.js | 10 ++++-- src/js/drawingtools/SimplePen.js | 15 +++++++-- src/js/rendering/frame/TiledFrameRenderer.js | 26 +++++++++++++-- src/js/utils/CanvasUtils.js | 10 ++++++ 5 files changed, 82 insertions(+), 12 deletions(-) diff --git a/src/js/controller/PreviewFilmController.js b/src/js/controller/PreviewFilmController.js index bbca4eda..5366b7bb 100644 --- a/src/js/controller/PreviewFilmController.js +++ b/src/js/controller/PreviewFilmController.js @@ -1,6 +1,8 @@ (function () { var ns = $.namespace("pskl.controller"); + var CACHE_RESET_INTERVAL = 1000 * 60 * 10; + var ACTION = { SELECT : 'select', CLONE : 'clone', @@ -15,6 +17,9 @@ this.refreshZoom_(); this.redrawFlag = true; + + this.cache_ = {}; + window.setInterval(function () {this.cache_ = {};}.bind(this), CACHE_RESET_INTERVAL); }; ns.PreviewFilmController.prototype.init = function() { @@ -175,11 +180,8 @@ cloneFrameButton.className = "tile-overlay duplicate-frame-action"; previewTileRoot.appendChild(cloneFrameButton); - var canvasRenderer = new pskl.rendering.CanvasRenderer(currentFrame, this.zoom); - canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR); - var canvas = canvasRenderer.render(); - canvas.classList.add('tile-view', 'canvas'); - canvasContainer.appendChild(canvas); + + canvasContainer.appendChild(this.getCanvasForFrame(currentFrame)); previewTileRoot.appendChild(canvasContainer); if(tileNumber > 0 || this.piskelController.getFrameCount() > 1) { @@ -206,6 +208,27 @@ return previewTileRoot; }; + ns.PreviewFilmController.prototype.getCanvasForFrame = function (frame) { + var canvas = null; + var cacheKey = frame.getHash() + this.zoom; + if (this.cache_[cacheKey]) { + canvas = this.cache_[cacheKey]; + } else { + var frameAsString = JSON.stringify(frame.getPixels()); + if (this.cache_[frameAsString]) { + canvas = pskl.CanvasUtils.clone(this.cache_[frameAsString]); + } else { + var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, this.zoom); + canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR); + canvas = canvasRenderer.render(); + this.cache_[frameAsString] = canvas; + } + canvas.classList.add('tile-view', 'canvas'); + this.cache_[cacheKey] = canvas; + } + return canvas; + }; + /** * Calculate the preview zoom depending on the piskel size */ diff --git a/src/js/controller/piskel/PiskelController.js b/src/js/controller/piskel/PiskelController.js index a66a5875..b337866e 100644 --- a/src/js/controller/piskel/PiskelController.js +++ b/src/js/controller/piskel/PiskelController.js @@ -77,10 +77,16 @@ }; ns.PiskelController.prototype.getFrameAt = function (index) { + var hash = []; var frames = this.getLayers().map(function (l) { - return l.getFrameAt(index); + var frame = l.getFrameAt(index); + hash.push(frame.getHash()); + return frame; }); - return pskl.utils.FrameUtils.merge(frames); + var mergedFrame = pskl.utils.FrameUtils.merge(frames); + mergedFrame.id = hash.join('-'); + mergedFrame.version = 0; + return mergedFrame; }; ns.PiskelController.prototype.hasFrameAt = function (index) { diff --git a/src/js/drawingtools/SimplePen.js b/src/js/drawingtools/SimplePen.js index dd9ab9ce..41f1c28f 100644 --- a/src/js/drawingtools/SimplePen.js +++ b/src/js/drawingtools/SimplePen.js @@ -22,7 +22,7 @@ * @override */ ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { - frame.setPixel(col, row, color); + overlay.setPixel(col, row, color); this.previousCol = col; this.previousRow = row; this.pixels.push({ @@ -55,17 +55,26 @@ ns.SimplePen.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { + // apply on real frame + this.setPixelsToFrame_(frame, this.pixels, color); + + // save state this.raiseSaveStateEvent({ pixels : this.pixels.slice(0), color : color }); + + // reset this.pixels = []; }; ns.SimplePen.prototype.replay = function (frame, replayData) { - var pixels = replayData.pixels; + this.setPixelsToFrame_(frame, replayData.pixels, replayData.color); + }; + + ns.SimplePen.prototype.setPixelsToFrame_ = function (frame, pixels, color) { pixels.forEach(function (pixel) { - frame.setPixel(pixel.col, pixel.row, replayData.color); + frame.setPixel(pixel.col, pixel.row, color); }); }; })(); diff --git a/src/js/rendering/frame/TiledFrameRenderer.js b/src/js/rendering/frame/TiledFrameRenderer.js index 4b41bb1d..ce8a3c9a 100644 --- a/src/js/rendering/frame/TiledFrameRenderer.js +++ b/src/js/rendering/frame/TiledFrameRenderer.js @@ -1,6 +1,8 @@ (function () { var ns = $.namespace('pskl.rendering.frame'); + var CACHE_RESET_INTERVAL = 1000 * 60 * 10; + ns.TiledFrameRenderer = function (container, zoom) { this.container = container; this.setZoom(zoom); @@ -8,11 +10,31 @@ this.displayContainer = document.createElement('div'); this.displayContainer.classList.add('tiled-frame-container'); container.get(0).appendChild(this.displayContainer); + + this.cache_ = {}; + window.setInterval(function () {this.cache_ = {};}.bind(this), CACHE_RESET_INTERVAL); }; ns.TiledFrameRenderer.prototype.render = function (frame) { - var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom); - this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')'; + var frameData = null; + + var hash = frame.getHash(); + if (this.cache_[hash]) { + frameData = this.cache_[hash]; + } else { + var frameAsString = JSON.stringify(frame.getPixels()); + if (this.cache_[frameAsString]) { + frameData = this.cache_[frameAsString]; + } else { + var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom); + frameData = canvas.toDataURL('image/png'); + this.cache_[frameAsString] = frameData; + } + + this.cache_[hash] = frameData; + } + + this.displayContainer.style.backgroundImage = 'url(' + frameData + ')'; }; ns.TiledFrameRenderer.prototype.show = function () { diff --git a/src/js/utils/CanvasUtils.js b/src/js/utils/CanvasUtils.js index a6eca20e..8ef9d161 100644 --- a/src/js/utils/CanvasUtils.js +++ b/src/js/utils/CanvasUtils.js @@ -48,6 +48,16 @@ } }, + clone : function (canvas) { + var clone = pskl.CanvasUtils.createCanvas(canvas.width, canvas.height); + + //apply the old canvas to the new one + clone.getContext('2d').drawImage(canvas, 0, 0); + + //return the new canvas + return clone; + }, + getImageDataFromCanvas : function (canvas) { var sourceContext = canvas.getContext('2d'); return sourceContext.getImageData(0, 0, canvas.width, canvas.height).data;