patch(TS): canvas patch init 2

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- chore(TS): refactor canvas init, fix `_initRetinaScaling` regression #8520
 - fix(): regression of canvas migration with pointer and sendPointToPlane [#8563](https://github.com/fabricjs/fabric.js/pull/8563)
 - chore(TS): Use exports from files to build fabricJS, get rid of HEADER.js [#8549](https://github.com/fabricjs/fabric.js/pull/8549)
 - chore(): rm `fabric.filterBackend` => `getFilterBackend` [#8487](https://github.com/fabricjs/fabric.js/pull/8487)

src/canvas/canvas.class.ts

@@ -497,34 +497,16 @@ export class SelectableCanvas<
   _activeObject?: FabricObject;
   _hasITextHandlers?: boolean;
   _iTextInstances: (IText | Textbox)[];
-  /**
-   * Constructor
-   * @param {HTMLCanvasElement | String} el canvas element to initialize instance on
-   * @param {Object} [options] Options object
-   * @return {Object} thisArg
-   */
-  constructor(el: string | HTMLCanvasElement, options = {}) {
-    super(el, options);
-  }
 
-  _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();
   }
 
-  /**
-   * @private
-   */
-  _initRetinaScaling() {
+  protected _initRetinaScaling() {
     super._initRetinaScaling();
     this.__initRetinaScaling(this.upperCanvasEl, this.contextTop);
   }
@@ -1233,7 +1215,7 @@ export class SelectableCanvas<
    * @private
    * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
    */
-  _createUpperCanvas() {
+  protected _createUpperCanvas() {
     const lowerCanvasEl = this.lowerCanvasEl;
 
     // if there is no upperCanvas (most common case) we create one.
@@ -1252,30 +1234,15 @@ export class SelectableCanvas<
     upperCanvasEl.style.cssText = lowerCanvasEl.style.cssText;
     this._applyCanvasStyle(upperCanvasEl);
     upperCanvasEl.setAttribute('draggable', 'true');
-    this.contextTop = upperCanvasEl.getContext(
-      '2d'
-    ) as CanvasRenderingContext2D;
+    this.contextTop = upperCanvasEl.getContext('2d')!;
   }
 
-  /**
-   * @private
-   */
-  _createCacheCanvas() {
+  protected _createCacheCanvas() {
     this.cacheCanvasEl = this._createCanvasElement();
-    this.cacheCanvasEl.setAttribute('width', `${this.width}`);
-    this.cacheCanvasEl.setAttribute('height', `${this.height}`);
-    this.contextCache = this.cacheCanvasEl.getContext(
-      '2d'
-    ) as CanvasRenderingContext2D;
+    this.contextCache = this.cacheCanvasEl.getContext('2d')!;
   }
 
-  /**
-   * @private
-   */
-  _initWrapperElement() {
-    if (this.wrapperEl) {
-      return;
-    }
+  protected _initWrapperElement() {
     const container = getEnv().document.createElement('div');
     container.classList.add(this.containerClass);
     this.wrapperEl = wrapElement(this.lowerCanvasEl, container);
@@ -1292,7 +1259,7 @@ export class SelectableCanvas<
    * @private
    * @param {HTMLCanvasElement} element canvas element to apply styles on
    */
-  _applyCanvasStyle(element: HTMLCanvasElement) {
+  protected _applyCanvasStyle(element: HTMLCanvasElement) {
     const width = this.width || element.width,
       height = this.height || element.height;
 

src/canvas/canvas_events.ts

@@ -83,13 +83,6 @@ export class Canvas extends SelectableCanvas {
    */
   enablePointerEvents: boolean;
 
-  /**
-   * an internal flag that is used to remember if we already bound the events
-   * @type Boolean
-   * @private
-   */
-  private eventsBound: boolean;
-
   /**
    * Holds a reference to a setTimeout timer for event synchronization
    * @type number
@@ -123,17 +116,33 @@ export class Canvas extends SelectableCanvas {
    */
   _previousPointer: Point;
 
-  /**
-   * Adds mouse listeners to canvas
-   * @private
-   */
-  private _initEventListeners() {
-    // in case we initialized the class twice. This should not happen normally
-    // but in some kind of applications where the canvas element may be changed
-    // this is a workaround to having double listeners.
-    this.removeListeners();
-    this._bindEvents();
-    // @ts-ginore
+  constructor(el: string | HTMLCanvasElement, options = {}) {
+    super(el, options);
+    // bind event handlers
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onTouchStart = this._onTouchStart.bind(this);
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+    this._onTouchEnd = this._onTouchEnd.bind(this);
+    this._onResize = this._onResize.bind(this);
+    // this._onGesture=this._onGesture.bind(this)
+    // this._onDrag=this._onDrag.bind(this)
+    // this._onShake=this._onShake.bind(this)
+    // this._onLongPress=this._onLongPress.bind(this)
+    // this._onOrientationChange=this._onOrientationChange.bind(this)
+    this._onMouseWheel = this._onMouseWheel.bind(this);
+    this._onMouseOut = this._onMouseOut.bind(this);
+    this._onMouseEnter = this._onMouseEnter.bind(this);
+    this._onContextMenu = this._onContextMenu.bind(this);
+    this._onDoubleClick = this._onDoubleClick.bind(this);
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragEnd = this._onDragEnd.bind(this);
+    this._onDragProgress = this._onDragProgress.bind(this);
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragEnter = this._onDragEnter.bind(this);
+    this._onDragLeave = this._onDragLeave.bind(this);
+    this._onDrop = this._onDrop.bind(this);
+    // register event handlers
     this.addOrRemove(addListener, 'add');
   }
 
@@ -215,47 +224,6 @@ export class Canvas extends SelectableCanvas {
     );
   }
 
-  /**
-   * @private
-   */
-  private _bindEvents() {
-    if (this.eventsBound) {
-      // for any reason we pass here twice we do not want to bind events twice.
-      return;
-    }
-    (
-      [
-        '_onMouseDown',
-        '_onTouchStart',
-        '_onMouseMove',
-        '_onMouseUp',
-        '_onTouchEnd',
-        '_onResize',
-        // '_onGesture',
-        // '_onDrag',
-        // '_onShake',
-        // '_onLongPress',
-        // '_onOrientationChange',
-        '_onMouseWheel',
-        '_onMouseOut',
-        '_onMouseEnter',
-        '_onContextMenu',
-        '_onDoubleClick',
-        '_onDragStart',
-        '_onDragEnd',
-        '_onDragProgress',
-        '_onDragOver',
-        '_onDragEnter',
-        '_onDragLeave',
-        '_onDrop',
-      ] as const
-    ).forEach((eventHandler) => {
-      // @ts-expect-error dumb TS
-      this[eventHandler] = this[eventHandler].bind(this);
-    });
-    this.eventsBound = true;
-  }
-
   /**
    * @private
    * @param {Event} [e] Event object fired on wheel event
@@ -1655,8 +1623,3 @@ export class Canvas extends SelectableCanvas {
     return new Canvas(el);
   }
 }
-
-// there is an order execution bug if i put this as public property.
-Object.assign(Canvas.prototype, {
-  eventsBound: false,
-});