perf(): reduce setCoords calls

CHANGELOG.md

@@ -75,6 +75,7 @@
 - refactor(): Separate defaults for base fabric object vs interactive object. Also some moving around of variables [#9474](https://github.com/fabricjs/fabric.js/pull/9474)
 - refactor(): Change how LayoutManager handles restoring groups [#9522](https://github.com/fabricjs/fabric.js/pull/9522)
 - fix(BaseConfiguration): set `devicePixelRatio` from window [#9470](https://github.com/fabricjs/fabric.js/pull/9470)
+- perf(): reduce setCoords calls [#9550](https://github.com/fabricjs/fabric.js/pull/9550)
 - fix(): bubble dirty flag for group only when true [#9540](https://github.com/fabricjs/fabric.js/pull/9540)
 - test() Backport a test to capture a failing text style situation [#9531](https://github.com/fabricjs/fabric.js/pull/9531)
 

src/LayoutManager/LayoutManager.ts

@@ -251,6 +251,8 @@ export class LayoutManager {
       target.setPositionByOrigin(nextCenter, CENTER, CENTER);
       // invalidate
       target.setCoords();
+      (target.subTargetCheck || target.interactive) &&
+        target.forEachObject((object) => object.setCoords());
       target.set('dirty', true);
     }
   }
@@ -286,6 +288,8 @@ export class LayoutManager {
       left: object.left + offset.x,
       top: object.top + offset.y,
     });
+    // TODO: should we delete aCoords/oCoords here so they are not stale if subTargetCheck is false?
+    //  or should we apply offset instead of recalculating aCoords?
   }
 
   protected onAfterLayout(

src/brushes/PencilBrush.ts

@@ -288,13 +288,12 @@ export class PencilBrush extends BaseBrush {
 
     const path = this.createPath(pathData);
     this.canvas.clearContext(this.canvas.contextTop);
-    this.canvas.fire('before:path:created', { path: path });
+    this.canvas.fire('before:path:created', { path });
     this.canvas.add(path);
     this.canvas.requestRenderAll();
-    path.setCoords();
     this._resetShadow();
 
     // fire event 'path' created
-    this.canvas.fire('path:created', { path: path });
+    this.canvas.fire('path:created', { path });
   }
 }

src/canvas/Canvas.ts

@@ -1304,19 +1304,16 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     transform: Transform,
     pointer: Point
   ) {
-    const x = pointer.x,
-      y = pointer.y,
-      action = transform.action,
-      actionHandler = transform.actionHandler;
-    let actionPerformed = false;
-    // this object could be created from the function in the control handlers
-
-    if (actionHandler) {
-      actionPerformed = actionHandler(e, transform, x, y);
-    }
+    const { action, actionHandler, target } = transform;
+
+    const actionPerformed =
+      !!actionHandler && actionHandler(e, transform, pointer.x, pointer.y);
+    // This call needs to recurse down
+    actionPerformed && target.setCoords();
+
     if (action === 'drag' && actionPerformed) {
-      transform.target.isMoving = true;
-      this.setCursor(transform.target.moveCursor || this.moveCursor);
+      target.isMoving = true;
+      this.setCursor(target.moveCursor || this.moveCursor);
     }
     transform.actionPerformed = transform.actionPerformed || actionPerformed;
   }
@@ -1332,7 +1329,6 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       this.setCursor(this.defaultCursor);
       return;
     }
-    let hoverCursor = target.hoverCursor || this.hoverCursor;
     const activeSelection = isActiveSelection(this._activeObject)
         ? this._activeObject
         : null,
@@ -1345,17 +1341,11 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         target.findControl(this.getViewportPoint(e));
 
     if (!corner) {
-      if ((target as Group).subTargetCheck) {
-        // hoverCursor should come from top-most subTarget,
-        // so we walk the array backwards
-        this.targets
-          .concat()
-          .reverse()
-          .map((_target) => {
-            hoverCursor = _target.hoverCursor || hoverCursor;
-          });
-      }
-      this.setCursor(hoverCursor);
+      // hoverCursor should come from top-most subTarget
+      const hoverCursor =
+        (target as Group).subTargetCheck &&
+        this.targets.find((target) => target.hoverCursor)?.hoverCursor;
+      this.setCursor(hoverCursor || target.hoverCursor || this.hoverCursor);
     } else {
       const control = corner.control;
       this.setCursor(control.cursorStyleHandler(e, control, target));

src/canvas/SelectableCanvas.ts

@@ -836,7 +836,10 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     while (i--) {
       const target = objects[i];
       if (this._checkTarget(target, pointer)) {
-        if (isCollection(target) && target.subTargetCheck) {
+        if (
+          isCollection(target) &&
+          (target.subTargetCheck || target.interactive)
+        ) {
           const subTarget = this._searchPossibleTargets(
             target._objects as FabricObject[],
             pointer
@@ -1148,9 +1151,10 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
 
     if (isActiveSelection(object) && prevActiveObject !== object) {
       object.set('canvas', this);
-      object.setCoords();
     }
 
+    object.setCoords();
+
     return true;
   }
 

src/canvas/StaticCanvas.ts

@@ -379,21 +379,7 @@ export class StaticCanvas<
    * @param {Array} vpt a Canvas 2D API transform matrix
    */
   setViewportTransform(vpt: TMat2D) {
-    const backgroundObject = this.backgroundImage,
-      overlayObject = this.overlayImage,
-      len = this._objects.length;
-
-    this.viewportTransform = vpt;
-    for (let i = 0; i < len; i++) {
-      const object = this._objects[i];
-      object.group || object.setCoords();
-    }
-    if (backgroundObject) {
-      backgroundObject.setCoords();
-    }
-    if (overlayObject) {
-      overlayObject.setCoords();
-    }
+    this.viewportTransform = [...vpt];
     this.calcViewportBoundaries();
     this.renderOnAddRemove && this.requestRenderAll();
   }

src/shapes/ActiveSelection.ts

@@ -20,6 +20,8 @@ export interface ActiveSelectionOptions extends GroupProps {
 const activeSelectionDefaultValues: Partial<TClassProperties<ActiveSelection>> =
   {
     multiSelectionStacking: 'canvas-stacking',
+    subTargetCheck: true,
+    interactive: false,
   };
 
 /**
@@ -68,13 +70,6 @@ export class ActiveSelection extends Group {
     });
   }
 
-  /**
-   * @private
-   */
-  _shouldSetNestedCoords() {
-    return true;
-  }
-
   /**
    * @private
    * @override we don't want the selection monitor to be active
@@ -149,6 +144,7 @@ export class ActiveSelection extends Group {
     // the object will be in the objects array of both the ActiveSelection and the Group
     // but referenced in the group's _activeObjects so that it won't be rendered twice.
     this._enterGroup(object, removeParentTransform);
+    object.setCoords();
   }
 
   /**

src/shapes/Group.ts

@@ -91,7 +91,6 @@ export class Group
   /**
    * Used to allow targeting of object inside groups.
    * set to true if you want to select an object inside a group.\
-   * **REQUIRES** `subTargetCheck` set to true
    * This will be not removed but slowly replaced with a method setInteractive
    * that will take care of enabling subTargetCheck and necessary object events.
    * There is too much attached to group interactivity to just be evaluated by a
@@ -284,13 +283,6 @@ export class Group
     return this;
   }
 
-  /**
-   * @private
-   */
-  _shouldSetNestedCoords() {
-    return this.subTargetCheck;
-  }
-
   /**
    * Remove all objects
    * @returns {FabricObject[]} removed objects
@@ -365,7 +357,7 @@ export class Group
         )
       );
     }
-    this._shouldSetNestedCoords() && object.setCoords();
+
     object._set('group', this);
     object._set('canvas', this.canvas);
     this._watchObject(true, object);
@@ -412,7 +404,6 @@ export class Group
           object.calcTransformMatrix()
         )
       );
-      object.setCoords();
     }
     this._watchObject(false, object);
     const index =
@@ -489,16 +480,6 @@ export class Group
     this._drawClipPath(ctx, this.clipPath);
   }
 
-  /**
-   * @override
-   * @return {Boolean}
-   */
-  setCoords() {
-    super.setCoords();
-    this._shouldSetNestedCoords() &&
-      this.forEachObject((object) => object.setCoords());
-  }
-
   triggerLayout(options: ImperativeLayoutOptions = {}) {
     this.layoutManager.performLayout({
       target: this,
@@ -689,7 +670,6 @@ export class Group
         target: group,
         targets: group.getObjects(),
       });
-      group.setCoords();
       return group;
     });
   }

src/shapes/Object/InteractiveObject.ts

@@ -534,7 +534,6 @@ export class InteractiveFabricObject<
       ctx.strokeStyle = options.cornerStrokeColor;
     }
     this._setLineDash(ctx, options.cornerDashArray);
-    this.setCoords();
     this.forEachControl((control, key) => {
       if (control.getVisibility(this, key)) {
         const p = this.oCoords[key];

src/shapes/Text/Text.ts

@@ -427,7 +427,6 @@ export class FabricText<
       this.setPathInfo();
     }
     this.initDimensions();
-    this.setCoords();
   }
 
   /**
@@ -1694,6 +1693,7 @@ export class FabricText<
     }
     if (this._forceClearCache) {
       this.initDimensions();
+      this.setCoords();
     }
     super.render(ctx);
   }

test/unit/canvas_static.js

@@ -1714,27 +1714,6 @@
     canvas.viewportTransform = fabric.StaticCanvas.getDefaults().viewportTransform;
   });
 
-  QUnit.test('setViewportTransform calls objects setCoords', function(assert) {
-    var vpt = [2, 0, 0, 2, 50, 50];
-    assert.deepEqual(canvas.viewportTransform, [1, 0, 0, 1, 0, 0], 'initial viewport is identity matrix');
-    var rect = new fabric.Rect({ width: 10, heigth: 10 });
-    var rectBg = new fabric.Rect({ width: 10, heigth: 10 });
-    var rectOverlay = new fabric.Rect({ width: 10, heigth: 10 });
-    canvas.add(rect);
-    canvas.cancelRequestedRender();
-    rectBg.canvas = canvas;
-    canvas.backgroundImage = rectBg;
-    rectOverlay.canvas = canvas;
-    canvas.overlayImage = rectOverlay;
-    assert.deepEqual(new fabric.Point(rect.oCoords.tl), new fabric.Point(0,0), 'rect oCoords are set for normal viewport');
-    assert.equal(rectBg.oCoords, undefined, 'rectBg oCoords are not set');
-    assert.equal(rectOverlay.oCoords, undefined, 'rectOverlay oCoords are not set');
-    canvas.setViewportTransform(vpt);
-    assert.deepEqual(new fabric.Point(rect.oCoords.tl), new fabric.Point(50,50), 'rect oCoords are set');
-    assert.deepEqual(new fabric.Point(rectBg.oCoords.tl),  new fabric.Point(50,50), 'rectBg oCoords are set');
-    assert.deepEqual(new fabric.Point(rectOverlay.oCoords.tl),  new fabric.Point(50,50), 'rectOverlay oCoords are set');
-  });
-
   QUnit.test('getZoom', function(assert) {
     assert.ok(typeof canvas.getZoom === 'function');
     var vpt = [2, 0, 0, 2, 50, 50];