Fix : Window resize is erasing the canvas

Issue was coming from the cached frame renderer.
During the window resize, we update the displaySize of the frame renderer,
regardless of the fact that the dimensions changed or not.

The setDisplaySize triggers a destruction of the canvas. But the
CachedFrameRenderer will render the frame only if it detects a change. In
this case, setDisplaySize has been overrided in CachedFrameRenderer to
skip any processing if the dimensions didn't change.

This behavior could be actually done in the FrameRenderer itself, but
since this is crucial to the CachedFrameRenderer behavior, I prefer to
keep it in this class.

Alternatively, could implement a way to discard caches of
CachedFrameRenderers from the outside.

src/css/tools.css

@@ -167,7 +167,7 @@
 
 .tool-color-picker:nth-child(2) {
   z-index : 90;
-  margin-top: 20px;
+  margin-top: 25px;
   margin-left:-20px;
 }
 

src/js/controller/DrawingController.js

@@ -60,6 +60,7 @@
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this));
 
+    // this.afterWindowResize_.bind(this);
     window.setTimeout(this.afterWindowResize_.bind(this), 100);
   };
 

src/js/rendering/frame/CachedFrameRenderer.js

@@ -14,6 +14,20 @@
 
   pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer, pskl.rendering.frame.FrameRenderer);
 
+  /**
+   * Only call display size if provided values are different from current values.
+   * FrameRenderer:setDisplaySize destroys the underlying canvas
+   * If the canvas is destroyed, a rendering is mandatory.
+   * (Alternatively we could find a way to force the rendering of the CachedFrameRenderer from the outside)
+   * @param {Number} width
+   * @param {Number} height
+   */
+  ns.CachedFrameRenderer.prototype.setDisplaySize = function (width, height) {
+    if (this.displayWidth !== width || this.displayHeight !== height) {
+      pskl.rendering.frame.FrameRenderer.prototype.setDisplaySize.call(this, width, height);
+    }
+  };
+
   ns.CachedFrameRenderer.prototype.render = function (frame) {
     var offset = this.getOffset();
     var size = this.getDisplaySize();