Arrow icons update

css/style.css

@@ -72,6 +72,10 @@ body {
   font-size: 0;
 }
 
+.layers-canvas {
+  opacity: 0.2;
+}
+
 .sticky-section {
   position: fixed;
   top: 0;
@@ -141,13 +145,17 @@ body {
 }
 
 
-.canvas.canvas-overlay {
+.canvas.canvas-overlay, .canvas.layers-canvas {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
 }
 
+.canvas.layers-down-canvas  {z-index: 7;}
+.canvas.drawing-canvas  {z-index: 8;}
+.canvas.layers-up-canvas  {z-index: 9;}
+.canvas.canvas-overlay {z-index: 10;}
+
 
 /**
  * Animated preview styles.
@@ -181,22 +189,23 @@ body {
  * Layers container
  */
 .layers-container {
-  border : 1px solid #444;
-  font-size : medium;
+  border: 4px solid #888;
+  font-size: medium;
   color: white;
   text-align: left;
+  border-radius: 4px;
   margin-top: 10px;
 }
 
 .layers-title {
-  padding : 10px;
+  padding: 8px;
   margin: 0;
-  font-size : 18px;
-  background : #222;
+  font-size: 15px;
+  background: #222;
   background-image: url('../img/layers.svg');
-  background-size: 24px 24px;
+  background-size: 22px;
   background-repeat: no-repeat;
-  background-position: 95%; 
+  background-position: 97%;
 }
 
 .layers-list {
@@ -224,6 +233,11 @@ body {
   overflow : hidden;
 }
 
+.layers-button-arrow {
+  font-family : 'Lucida Grande', Calibri;
+  padding : 2px 6px 0 6px;
+}
+
 .layers-button {
   line-height: 24px;
   margin: 0;

js/controller/DrawingController.js

@@ -22,8 +22,10 @@
       "supportGridRendering" : true
     };
     
-    this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
     this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
+    this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
+    this.layersDownRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-down-canvas");
+    this.layersUpRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-up-canvas");
     
 
     // State of drawing controller:
@@ -36,8 +38,7 @@
   };
 
   ns.DrawingController.prototype.init = function () {
-    this.renderer.render(this.piskelController.getCurrentFrame());
-    this.overlayRenderer.render(this.overlayFrame);
+    // this.render();
     
     this.initMouseBehavior();
 
@@ -242,6 +243,7 @@
   };
 
   ns.DrawingController.prototype.render = function () {
+    this.renderLayers();
     this.renderFrame();
     this.renderOverlay();
   };
@@ -266,6 +268,35 @@
     }
   };
 
+  ns.DrawingController.prototype.renderLayers = function () {
+    var layers = this.piskelController.getLayers();
+    var currentFrameIndex = this.piskelController.currentFrameIndex;
+    var currentLayerIndex = this.piskelController.currentLayerIndex;
+
+    var serialized = [currentFrameIndex, this.piskelController.currentLayerIndex, layers.length].join("-");
+    if (this.serializedLayerFrame != serialized) {
+      var downLayers = layers.slice(0, currentLayerIndex);
+      var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
+      this.layersDownRenderer.render(downFrame);
+
+      // try {this.layersUpRenderer.clear();}catch(e) {}
+      if (currentLayerIndex + 1 < layers.length) {
+        var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
+        var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
+        this.layersUpRenderer.render(upFrame);
+      }
+
+      this.serializedLayerFrame = serialized;
+    }
+  };
+
+  ns.DrawingController.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
+    var frames = layers.map(function (l) {
+      return l.getFrameAt(frameIndex);
+    });
+    return pskl.utils.FrameUtils.merge(frames);
+  };
+
   ns.DrawingController.prototype.forceRendering_ = function () {
     this.serializedFrame = this.serializedOverlay = null;
   };
@@ -297,8 +328,8 @@
    */
   ns.DrawingController.prototype.updateDPI_ = function() {
     var dpi = this.calculateDPI_();
-    this.renderer.updateDPI(dpi);
     this.overlayRenderer.updateDPI(dpi);
+    this.renderer.updateDPI(dpi);
 
     var currentFrameHeight =  this.piskelController.getCurrentFrame().getHeight();
     var canvasHeight = currentFrameHeight * dpi;

js/rendering/FrameRenderer.js

@@ -65,15 +65,17 @@
   };
 
   ns.FrameRenderer.prototype.render = function (frame) {
-    this.clear(frame);
-    var context = this.getCanvas_(frame).getContext('2d');
-    for(var col = 0, width = frame.getWidth(); col < width; col++) {
-      for(var row = 0, height = frame.getHeight(); row < height; row++) {
-        var color = frame.getPixel(col, row);
-        this.renderPixel_(color, col, row, context);
+    if (frame) {
+      this.clear(frame);
+      var context = this.getCanvas_(frame).getContext('2d');
+      for(var col = 0, width = frame.getWidth(); col < width; col++) {
+        for(var row = 0, height = frame.getHeight(); row < height; row++) {
+          var color = frame.getPixel(col, row);
+          this.renderPixel_(color, col, row, context);
+        }
       }
+      this.lastRenderedFrame = frame;
     }
-    this.lastRenderedFrame = frame;
   };
 
   ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
@@ -142,7 +144,7 @@
       var pixelHeight =  row * this.dpi + this.gridStrokeWidth * (row - 1);
       var classes = ['canvas'];
       if (this.className) {
-        classes.push(this.className);  
+        classes = classes.concat(this.className.split(' '));
       }
       var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, classes);
 

js/utils/FrameUtils.js

@@ -3,10 +3,13 @@
 
   ns.FrameUtils = {
     merge : function (frames) {
-      var merged = frames[0].clone();
-      var w = merged.getWidth(), h = merged.getHeight();
-      for (var i = 1 ; i < frames.length ; i++) {
-        pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
+      var merged = null;
+      if (frames.length) {
+        merged = frames[0].clone();
+        var w = merged.getWidth(), h = merged.getHeight();
+        for (var i = 1 ; i < frames.length ; i++) {
+          pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
+        }
       }
       return merged;
     },

templates/layers.html

@@ -3,8 +3,8 @@
   <div class="layers-button-container">
     <button class="layers-button" data-action="add"  >Add</button>
     <button class="layers-button" data-action="delete"  >Delete</button>
-    <button class="layers-button" data-action="up"   >&#8593;</button>
-    <button class="layers-button" data-action="down" >&#8595;</button>
+    <button class="layers-button layers-button-arrow" data-action="up"   >&#8593;</button>
+    <button class="layers-button layers-button-arrow" data-action="down" >&#8595;</button>
   </div>
   <script type="text/template" id="layer-item-template">
     <li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>