Merge pull request #435 from juliandescottes/add-layer-opacity-2

Add layer opacity support

src/css/toolbox-layers-list.css

@@ -46,6 +46,11 @@
   background : #222;
 }
 
+.layer-item-opacity {
+  position: absolute;
+  right: 8px;
+}
+
 .current-layer-item,
 .current-layer-item:hover {
   background : #333;

src/js/app.js

@@ -203,9 +203,14 @@
     },
 
     getFirstFrameAsPng : function () {
-      var firstFrame = this.piskelController.getFrameAt(0);
-      var firstFrameCanvas = pskl.utils.FrameUtils.toImage(firstFrame);
-      return firstFrameCanvas.toDataURL('image/png');
+      var frame = pskl.utils.LayerUtils.mergeFrameAt(this.piskelController.getLayers(), 0);
+      var canvas;
+      if (frame instanceof pskl.model.frame.RenderedFrame) {
+        canvas = pskl.utils.CanvasUtils.createFromImage(frame.getRenderedFrame());
+      } else {
+        canvas = pskl.utils.FrameUtils.toImage(frame);
+      }
+      return canvas.toDataURL('image/png');
     },
 
     getFramesheetAsPng : function () {

src/js/controller/LayersListController.js

@@ -88,7 +88,8 @@
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
       'layername' : layer.getName(),
       'layerindex' : index,
-      'isselected:current-layer-item' : isSelected
+      'isselected:current-layer-item' : isSelected,
+      'opacity': layer.getOpacity()
     });
     var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
     this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
@@ -102,6 +103,11 @@
     } else if (el.classList.contains('layer-item')) {
       index = el.dataset.layerIndex;
       this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
+    } else if (el.classList.contains('layer-item-opacity')) {
+      index = pskl.utils.Dom.getData(el, 'layerIndex');
+      var layer = this.piskelController.getLayerAt(parseInt(index, 10));
+      var opacity = window.prompt('Set layer opacity (value between 0 and 1)', layer.getOpacity());
+      this.piskelController.setLayerOpacityAt(index, opacity);
     }
   };
 

src/js/controller/piskel/PiskelController.js

@@ -90,17 +90,14 @@
     return this.piskel;
   };
 
-  ns.PiskelController.prototype.getFrameAt = function (index) {
-    var hash = [];
-    var frames = this.getLayers().map(function (l) {
-      var frame = l.getFrameAt(index);
-      hash.push(frame.getHash());
-      return frame;
+  ns.PiskelController.prototype.isTransparent = function () {
+    return this.getLayers().some(function (l) {
+      return l.isTransparent();
     });
-    var mergedFrame = pskl.utils.FrameUtils.merge(frames);
-    mergedFrame.id = hash.join('-');
-    mergedFrame.version = 0;
-    return mergedFrame;
+  };
+
+  ns.PiskelController.prototype.renderFrameAt = function (index, preserveOpacity) {
+    return pskl.utils.LayerUtils.flattenFrameAt(this.getLayers(), index, preserveOpacity);
   };
 
   ns.PiskelController.prototype.hasFrameAt = function (index) {
@@ -205,6 +202,13 @@
     }
   };
 
+  ns.PiskelController.prototype.setLayerOpacityAt = function (index, opacity) {
+    var layer = this.getLayerByIndex(index);
+    if (layer) {
+      layer.setOpacity(opacity);
+    }
+  };
+
   ns.PiskelController.prototype.mergeDownLayerAt = function (index) {
     var layer = this.getLayerByIndex(index);
     var downLayer = this.getLayerByIndex(index - 1);

src/js/controller/piskel/PublicPiskelController.js

@@ -29,6 +29,7 @@
     this.saveWrap_('moveLayerUp', true);
     this.saveWrap_('moveLayerDown', true);
     this.saveWrap_('removeCurrentLayer', true);
+    this.saveWrap_('setLayerOpacityAt', true);
 
     var shortcuts = pskl.service.keyboard.Shortcuts;
     pskl.app.shortcutService.registerShortcut(shortcuts.MISC.PREVIOUS_FRAME, this.selectPreviousFrame.bind(this));

src/js/controller/preview/PreviewController.js

@@ -168,9 +168,9 @@
   ns.PreviewController.prototype.render = function (delta) {
     this.elapsedTime += delta;
     var index = this.getNextIndex_(delta);
-    if (this.shoudlRender_() || this.currentIndex != index) {
+    if (this.shouldRender_() || this.currentIndex != index) {
       this.currentIndex = index;
-      var frame = this.piskelController.getFrameAt(this.currentIndex);
+      var frame = pskl.utils.LayerUtils.mergeFrameAt(this.piskelController.getLayers(), index);
       this.renderer.render(frame);
       this.renderFlag = false;
 
@@ -240,7 +240,7 @@
     this.renderFlag = bool;
   };
 
-  ns.PreviewController.prototype.shoudlRender_ = function () {
+  ns.PreviewController.prototype.shouldRender_ = function () {
     return this.renderFlag || this.popupPreviewController.renderFlag;
   };
 

src/js/controller/settings/exportimage/GifExportController.js

@@ -105,7 +105,9 @@
   ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
     var currentColors = pskl.app.currentColorsService.getCurrentColors();
 
-    var preserveColors = currentColors.length < MAX_GIF_COLORS;
+    var layers = this.piskelController.getLayers();
+    var isTransparent = layers.some(function (l) {return l.isTransparent();});
+    var preserveColors = !isTransparent && currentColors.length < MAX_GIF_COLORS;
 
     var transparentColor, transparent;
     // transparency only supported if preserveColors is true, see Issue #357
@@ -117,23 +119,30 @@
       transparent = null;
     }
 
+    var width = this.piskelController.getWidth();
+    var height = this.piskelController.getHeight();
+
     var gif = new window.GIF({
       workers: 5,
       quality: 1,
-      width: this.piskelController.getWidth() * zoom,
-      height: this.piskelController.getHeight() * zoom,
+      width: width * zoom,
+      height: height * zoom,
       preserveColors : preserveColors,
       transparent : transparent
     });
 
+    // Create a background canvas that will be filled with the transparent color before each render.
+    var background = pskl.utils.CanvasUtils.createCanvas(width, height);
+    var context = background.getContext('2d');
+    context.fillStyle = transparentColor;
+
     for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) {
-      var frame = this.piskelController.getFrameAt(i);
-      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
-      if (preserveColors) {
+      var render = this.piskelController.renderFrameAt(i, true);
+      context.clearRect(0, 0, width, height);
+      context.fillRect(0, 0, width, height);
+      context.drawImage(render, 0, 0, width, height);
 
-      }
-      canvasRenderer.drawTransparentAs(transparentColor);
-      var canvas = canvasRenderer.render();
+      var canvas = pskl.utils.ImageResizer.scale(background, zoom);
       gif.addFrame(canvas.getContext('2d'), {
         delay: 1000 / fps
       });

src/js/controller/settings/exportimage/PngExportController.js

@@ -60,8 +60,8 @@
   ns.PngExportController.prototype.mergedExport_ = function (zip) {
     var paddingLength = ('' + this.piskelController.getFrameCount()).length;
     for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
-      var frame = this.piskelController.getFrameAt(i);
-      var canvas = this.getFrameAsCanvas_(frame);
+      var render = this.piskelController.renderFrameAt(i, true);
+      var canvas = pskl.utils.CanvasUtils.createFromImage(render);
       var basename = this.pngFilePrefixInput.value;
       var id = pskl.utils.StringUtils.leftPad(i, paddingLength, '0');
       var filename = basename + id + '.png';
@@ -77,8 +77,8 @@
       var layer = this.piskelController.getLayerAt(j);
       var layerid = pskl.utils.StringUtils.leftPad(j, layerPaddingLength, '0');
       for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
-        var frame = layer.getFrameAt(i);
-        var canvas = this.getFrameAsCanvas_(frame);
+        var render = pskl.utils.LayerUtils.renderFrameAt(layer, i, true);
+        var canvas = pskl.utils.CanvasUtils.createFromImage(render);
         var basename = this.pngFilePrefixInput.value;
         var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
         var filename = 'l' + layerid + '_' + basename + frameid + '.png';
@@ -87,12 +87,6 @@
     }
   };
 
-  ns.PngExportController.prototype.getFrameAsCanvas_ = function (frame) {
-    var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
-    canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
-    return canvasRenderer.render();
-  };
-
   ns.PngExportController.prototype.getPiskelName_ = function () {
     return this.piskelController.getPiskel().getDescriptor().name;
   };

src/js/controller/settings/resize/ResizeController.js

@@ -71,8 +71,11 @@
   };
 
   ns.ResizeController.prototype.resizeLayer_ = function (layer) {
+    var opacity = layer.getOpacity();
     var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
-    return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
+    var resizedLayer = pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
+    resizedLayer.setOpacity(opacity);
+    return resizedLayer;
   };
 
   ns.ResizeController.prototype.onResizeContentChange_ = function (evt) {

src/js/model/Layer.js

@@ -7,6 +7,7 @@
     } else {
       this.name = name;
       this.frames = [];
+      this.opacity = 1;
     }
   };
 
@@ -31,6 +32,21 @@
     this.name = name;
   };
 
+  ns.Layer.prototype.getOpacity = function () {
+    return this.opacity;
+  };
+
+  ns.Layer.prototype.setOpacity = function (opacity) {
+    if (opacity === null || isNaN(opacity) || opacity < 0 || opacity > 1) {
+      return;
+    }
+    this.opacity = opacity;
+  };
+
+  ns.Layer.prototype.isTransparent = function () {
+    return this.opacity > 0 && this.opacity < 1;
+  };
+
   ns.Layer.prototype.getFrames = function () {
     return this.frames;
   };

src/js/model/frame/AsyncCachedFrameProcessor.js

@@ -30,6 +30,10 @@
     var key1 = frame.getHash();
     if (cache[key1]) {
       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);
+      this.frameProcessor(frame, callbackFirstLvlCacheOnly);
     } else {
       var framePixels = JSON.stringify(frame.getPixels());
       var key2 = pskl.utils.hashCode(framePixels);

src/js/model/frame/CachedFrameProcessor.js

@@ -66,6 +66,10 @@
     var cacheKey = frame.getHash();
     if (cache[cacheKey]) {
       processedFrame = cache[cacheKey];
+    } else if (frame instanceof pskl.model.frame.RenderedFrame) {
+      // Cannot use 2nd level cache with rendered frames
+      processedFrame = this.frameProcessor(frame);
+      cache[cacheKey] = processedFrame;
     } else {
       var framePixels = JSON.stringify(frame.getPixels());
       var frameAsString = pskl.utils.hashCode(framePixels);

src/js/model/frame/RenderedFrame.js

@@ -0,0 +1,49 @@
+(function () {
+  var ns = $.namespace('pskl.model.frame');
+
+  /**
+   * Create a frame instance that provides an image getter. Can be faster
+   * to use after merging using transparency. Transparent frames are merged to
+   * an image and this allows to reuse the image rather than retransform into
+   * a frame before calling the renderers.
+   *
+   * This rendered frame should only be used with renderers that support it.
+   *
+   * @param {Function} imageFn getter that will create the image
+   * @param {Number} width image width in pixels
+   * @param {Number} height image height in pixels
+   * @param {String} id will be used as hash, so should be as unique as possible
+   */
+  ns.RenderedFrame = function (renderFn, width, height, id) {
+    this.width = width;
+    this.height = height;
+    this.id = id;
+    this.renderFn = renderFn;
+  };
+
+  ns.RenderedFrame.prototype.getRenderedFrame = function () {
+    return this.renderFn();
+  };
+
+  ns.RenderedFrame.prototype.getHash = function () {
+    return this.id;
+  };
+
+  ns.RenderedFrame.prototype.getWidth = function () {
+    return this.width;
+  };
+
+  ns.RenderedFrame.prototype.getHeight = function () {
+    return this.height;
+  };
+
+  ns.RenderedFrame.prototype.getPixels = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.containsPixel = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.isSameSize = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.clone = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.setPixels = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.clear = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.setPixel = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.getPixel = Constants.ABSTRACT_FUNCTION;
+  ns.RenderedFrame.prototype.forEachPixel = Constants.ABSTRACT_FUNCTION;
+})();

src/js/rendering/CanvasRenderer.js

@@ -4,6 +4,7 @@
   ns.CanvasRenderer = function (frame, zoom) {
     this.frame = frame;
     this.zoom = zoom;
+    this.opacity_ = 1;
     this.transparentColor_ = 'white';
   };
 
@@ -16,11 +17,15 @@
     this.transparentColor_ = color;
   };
 
+  ns.CanvasRenderer.prototype.setOpacity = function (opacity) {
+    this.opacity_ = opacity;
+  };
+
   ns.CanvasRenderer.prototype.render = function  () {
     var canvas = this.createCanvas_();
 
     // Draw in canvas
-    pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_);
+    pskl.utils.FrameUtils.drawToCanvas(this.frame, canvas, this.transparentColor_, this.opacity_);
 
     var scaledCanvas = this.createCanvas_(this.zoom);
     var scaledContext = scaledCanvas.getContext('2d');

src/js/rendering/PiskelRenderer.js

@@ -5,10 +5,30 @@
   ns.PiskelRenderer = function (piskelController) {
     var frames = [];
     for (var i = 0 ; i < piskelController.getFrameCount() ; i++) {
-      frames.push(piskelController.getFrameAt(i));
+      frames.push(piskelController.renderFrameAt(i, true));
     }
-    ns.FramesheetRenderer.call(this, frames);
+    this.piskelController = piskelController;
+    this.frames = frames;
   };
 
-  pskl.utils.inherit(ns.PiskelRenderer, ns.FramesheetRenderer);
+  ns.PiskelRenderer.prototype.renderAsCanvas = function () {
+    var canvas = this.createCanvas_();
+    for (var i = 0 ; i < this.frames.length ; i++) {
+      var frame = this.frames[i];
+      this.drawFrameInCanvas_(frame, canvas, i * this.piskelController.getWidth(), 0);
+    }
+    return canvas;
+  };
+
+  ns.PiskelRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
+    var context = canvas.getContext('2d');
+    context.drawImage(frame, offsetWidth, offsetHeight, frame.width, frame.height);
+  };
+
+  ns.PiskelRenderer.prototype.createCanvas_ = function () {
+    var count = this.frames.length;
+    var width = count * this.piskelController.getWidth();
+    var height = this.piskelController.getHeight();
+    return pskl.utils.CanvasUtils.createCanvas(width, height);
+  };
 })();

src/js/rendering/frame/BackgroundImageFrameRenderer.js

@@ -16,7 +16,12 @@
   };
 
   ns.BackgroundImageFrameRenderer.prototype.frameToDataUrl_ = function (frame) {
-    var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
+    var canvas;
+    if (frame instanceof pskl.model.frame.RenderedFrame) {
+      canvas = pskl.utils.ImageResizer.scale(frame.getRenderedFrame(), this.zoom);
+    } else {
+      canvas = pskl.utils.FrameUtils.toImage(frame, this.zoom);
+    }
     return canvas.toDataURL('image/png');
   };