feat(V6): brush layering POC

build.js

@@ -196,6 +196,7 @@ var filesToInclude = [
   'src/shapes/polygon.class.js',
   'src/shapes/path.class.js',
   'src/shapes/group.class.js',
+  'src/shapes/layer.class.js',
   ifSpecifiedInclude('interaction', 'src/shapes/active_selection.class.js'),
   'src/shapes/image.class.js',
 

src/brushes/base_brush.class.js

@@ -64,13 +64,39 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
 
   limitedToCanvasSize: false,
 
+  initialize: function (layer) {
+    this.layer = layer;
+    this.canvas = this.layer.canvas;
+    var ctx = this.getContext();
+    ctx.save();
+    ctx.translate(-this.layer.width / 2, -this.layer.height / 2);
+  },
+
+  _isMainEvent: function (e) {
+    return this.canvas._isMainEvent(e);
+  },
+
+  getContext: function () {
+    if (!this.layer._cacheCanvas || !this.layer._cacheContext) {
+      this.layer._createCacheCanvas();
+    }
+    return this.layer._cacheContext;
+  },
+
+  resetContext: function () {
+    var canvas = this.layer._cacheCanvas, ctx = this.layer._cacheContext;
+    //console.log('reset')
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  },
 
   /**
    * Sets brush styles
    * @private
    * @param {CanvasRenderingContext2D} ctx
    */
-  _setBrushStyles: function (ctx) {
+  _setBrushStyles: function () {
+    ctx = this.getContext();
     ctx.strokeStyle = this.color;
     ctx.lineWidth = this.width;
     ctx.lineCap = this.strokeLineCap;
@@ -86,8 +112,11 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
    */
   _saveAndTransform: function(ctx) {
     var v = this.canvas.viewportTransform;
+
+    this.layer._updateCacheCanvas();
     ctx.save();
-    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
+    //ctx.translate(-this.layer.width / 2, -this.layer.height / 2);
+   // ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
   },
 
   /**

src/brushes/pencil_brush.class.js

@@ -34,8 +34,8 @@
      * @param {fabric.Canvas} canvas
      * @return {fabric.PencilBrush} Instance of a pencil brush
      */
-    initialize: function(canvas) {
-      this.canvas = canvas;
+    initialize: function(layer) {
+      this.callSuper('initialize', layer);
       this._points = [];
     },
 
@@ -58,7 +58,7 @@
      * @param {Object} pointer
      */
     onMouseDown: function(pointer, options) {
-      if (!this.canvas._isMainEvent(options.e)) {
+      if (!this._isMainEvent(options.e)) {
         return;
       }
       this.drawStraightLine = options.e[this.straightLineKey];
@@ -74,7 +74,7 @@
      * @param {Object} pointer
      */
     onMouseMove: function(pointer, options) {
-      if (!this.canvas._isMainEvent(options.e)) {
+      if (!this._isMainEvent(options.e)) {
         return;
       }
       this.drawStraightLine = options.e[this.straightLineKey];
@@ -85,11 +85,11 @@
         if (this.needsFullRender()) {
           // redraw curve
           // clear top canvas
-          this.canvas.clearContext(this.canvas.contextTop);
+          this.getContext().reset();
           this._render();
         }
         else {
-          var points = this._points, length = points.length, ctx = this.canvas.contextTop;
+          var points = this._points, length = points.length, ctx = this.getContext();
           // draw the curve update
           this._saveAndTransform(ctx);
           if (this.oldEnd) {
@@ -98,6 +98,8 @@
           }
           this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true);
           ctx.stroke();
+          this.layer._drawClipPath(this.getContext(), this.layer.clipPath);
+          this.layer.drawCacheOnCanvas(this.canvas.contextTop);
           ctx.restore();
         }
       }
@@ -107,12 +109,13 @@
      * Invoked on mouse up
      */
     onMouseUp: function(options) {
-      if (!this.canvas._isMainEvent(options.e)) {
+      if (!this._isMainEvent(options.e)) {
         return true;
       }
       this.drawStraightLine = false;
       this.oldEnd = undefined;
       this._finalizeAndAddPath();
+      this.resetContext();
       return false;
     },
 
@@ -126,7 +129,7 @@
 
       this._reset();
       this._addPoint(p);
-      this.canvas.contextTop.moveTo(p.x, p.y);
+      this.getContext().moveTo(p.x, p.y);
     },
 
     /**
@@ -151,7 +154,7 @@
      */
     _reset: function() {
       this._points = [];
-      this._setBrushStyles(this.canvas.contextTop);
+      this._setBrushStyles(this.getContext());
       this._setShadow();
       this._hasStraightLine = false;
     },
@@ -174,7 +177,7 @@
       var i, len,
           p1 = this._points[0],
           p2 = this._points[1];
-      ctx = ctx || this.canvas.contextTop;
+      ctx = ctx || this.getContext();
       this._saveAndTransform(ctx);
       ctx.beginPath();
       //if we only have 2 points in the path and they are the same
@@ -279,7 +282,7 @@
      * and add it to the fabric canvas.
      */
     _finalizeAndAddPath: function() {
-      var ctx = this.canvas.contextTop;
+      var ctx = this.getContext();
       ctx.closePath();
       if (this.decimate) {
         this._points = this.decimatePoints(this._points, this.decimate);
@@ -295,7 +298,7 @@
       }
 
       var path = this.createPath(pathData);
-      this.canvas.clearContext(this.canvas.contextTop);
+      this.getContext().reset();
       this.canvas.fire('before:path:created', { path: path });
       this.canvas.add(path);
       this.canvas.requestRenderAll();

src/canvas.class.js

@@ -393,7 +393,11 @@
 
       this._initRetinaScaling();
 
-      this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this);
+      if (fabric.PencilBrush) {
+        var drawingLayer = new fabric.Layer([], { canvas: this, objectCaching: true });
+        this.add(drawingLayer);
+        this.freeDrawingBrush = new fabric.PencilBrush(drawingLayer);
+      }
 
       this.calcOffset();
     },

src/mixins/canvas_events.mixin.js

@@ -383,8 +383,9 @@
     /**
      * @private
      */
-    _onResize: function () {
+    _onResize: function (e) {
       this.calcOffset();
+      this.fire('window:resize', { e: e });
     },
 
     /**

src/mixins/object_geometry.mixin.js

@@ -720,6 +720,8 @@
      * @param {Number} [options.scaleY]
      * @param {Number} [options.skewX]
      * @param {Number} [options.skewY]
+     * @param {Number} [options.width]
+     * @param {Number} [options.height]
      * @private
      * @returns {fabric.Point} dimensions
      */