patch(TS): canvas patch init 2

src/canvas/canvas.class.ts

@@ -497,6 +497,7 @@ export class SelectableCanvas<
   _activeObject?: FabricObject;
   _hasITextHandlers?: boolean;
   _iTextInstances: (IText | Textbox)[];
+
   /**
    * Constructor
    * @param {HTMLCanvasElement | String} el canvas element to initialize instance on
@@ -505,20 +506,14 @@ export class SelectableCanvas<
    */
   constructor(el: string | HTMLCanvasElement, options = {}) {
     super(el, options);
+    this._createCacheCanvas();
   }
 
-  _init(el: string | HTMLCanvasElement, options = {}) {
-    this.renderAndResetBound = this.renderAndReset.bind(this);
-    this.requestRenderAllBound = this.requestRenderAll.bind(this);
-    this._initStatic(el, options);
+  protected initElements(el: string | HTMLCanvasElement) {
+    super.initElements(el);
     this._applyCanvasStyle(this.lowerCanvasEl);
     this._initWrapperElement();
     this._createUpperCanvas();
-    // @ts-ignore
-    this._initEventListeners();
-    this._initRetinaScaling();
-    this.calcOffset();
-    this._createCacheCanvas();
   }
 
   /**

src/canvas/static_canvas.class.ts

@@ -271,10 +271,7 @@ export class StaticCanvas<
    * in order to return it to original state on dispose
    * @type string
    */
-  _originalCanvasStyle?: string;
-
-  renderAndResetBound: () => void;
-  requestRenderAllBound: () => void;
+  private _originalCanvasStyle?: string;
 
   _offset: { left: number; top: number };
   protected hasLostContext: boolean;
@@ -286,6 +283,22 @@ export class StaticCanvas<
     kill: (reason?: any) => void;
   };
 
+  constructor(el: string | HTMLCanvasElement, options = {}) {
+    super();
+    this.renderAndReset = this.renderAndReset.bind(this);
+    this.requestRenderAll = this.requestRenderAll.bind(this);
+    this.initElements(el);
+    this._initOptions(options);
+    this.calcOffset();
+    this._initRetinaScaling();
+    this.calcViewportBoundaries();
+  }
+
+  protected initElements(el: string | HTMLCanvasElement) {
+    this._createLowerCanvas(el);
+    this._originalCanvasStyle = this.lowerCanvasEl.style.cssText;
+  }
+
   add(...objects: FabricObject[]) {
     const size = super.add(...objects);
     objects.length > 0 && this.renderOnAddRemove && this.requestRenderAll();
@@ -332,37 +345,6 @@ export class StaticCanvas<
     this.renderOnAddRemove && this.requestRenderAll();
   }
 
-  constructor(el: string | HTMLCanvasElement, options = {}) {
-    super();
-    this._init(el, options);
-  }
-
-  /**
-   * @private
-   * @param {HTMLCanvasElement | String} el <canvas> element to initialize instance on
-   * @param {Object} [options] Options object
-   */
-  _init(el: string | HTMLCanvasElement, options = {}) {
-    this.renderAndResetBound = this.renderAndReset.bind(this);
-    this.requestRenderAllBound = this.requestRenderAll.bind(this);
-    this._initStatic(el, options);
-    this._initRetinaScaling();
-    this.calcViewportBoundaries();
-  }
-
-  /**
-   * @private
-   * @param {HTMLCanvasElement | String} el <canvas> element to initialize instance on
-   * @param {Object} [options] Options object
-   */
-  _initStatic(el: string | HTMLCanvasElement, options = {}) {
-    this._objects = [];
-    this._createLowerCanvas(el);
-    this._originalCanvasStyle = this.lowerCanvasEl.style.cssText;
-    this._initOptions(options);
-    this.calcOffset();
-  }
-
   /**
    * @private
    */
@@ -727,7 +709,7 @@ export class StaticCanvas<
    */
   requestRenderAll() {
     if (!this.nextRenderHandle && !this.disposed && !this.destroyed) {
-      this.nextRenderHandle = requestAnimFrame(this.renderAndResetBound);
+      this.nextRenderHandle = requestAnimFrame(this.renderAndReset);
     }
   }
 

src/mixins/canvas_animation.mixin.ts

@@ -116,7 +116,7 @@ fabric.util.object.extend(
      */
     fxStraightenObject: function (object: FabricObject) {
       return object.fxStraighten({
-        onChange: this.requestRenderAllBound,
+        onChange: this.requestRenderAll,
       });
     },
   }

test/unit/canvas.js

@@ -193,8 +193,7 @@
     assert.ok(canvas.selection, 'default is true');
   });
 
-  QUnit.test('_initInteractive', function(assert) {
-    assert.ok(typeof canvas._init === 'function');
+  QUnit.test('init', function(assert) {
     assert.equal(canvas.lowerCanvasEl.getAttribute('data-fabric'), 'main', 'el should be marked by canvas init');
     assert.equal(canvas.upperCanvasEl.getAttribute('data-fabric'), 'top', 'el should be marked by canvas init');
     assert.equal(canvas.wrapperEl.getAttribute('data-fabric'), 'wrapper', 'el should be marked by canvas init');

test/unit/canvas_static.js

@@ -202,6 +202,8 @@
     assert.ok('imageSmoothingEnabled' in canvas);
     assert.ok('backgroundVpt' in canvas);
     assert.ok('overlayVpt' in canvas);
+    assert.ok(Array.isArray(canvas._objects), 'is array');
+    assert.equal(canvas._objects.length, 0, 'is empty array');
 
     assert.equal(canvas.includeDefaultValues, true);
     assert.equal(canvas.stateful, false);

test/unit/collection.js

@@ -21,6 +21,14 @@
     }
   });
 
+  QUnit.test('init', function (assert) {
+    assert.ok(Array.isArray(collection._objects), 'is array');
+    assert.equal(collection._objects.length, 0, 'is empty array');
+    assert.ok(Array.isArray(collection2._objects), 'is array');
+    assert.equal(collection2._objects.length, 0, 'is empty array');
+    assert.notEqual(collection._objects, collection2._objects, 'different array');
+  });
+
   QUnit.test('add', function(assert) {
     var obj = { prop: 4 };
     assert.ok(typeof collection.add === 'function', 'has add method');