proposal1

fabricjs · Dec 28, 2024 · 1b6afb3 · 1b6afb3
1 parent 682c760
commit 1b6afb3
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 49 deletions.
diff --git a/.codesandbox/templates/vanilla/src/testcases/loadingSvgs.ts b/.codesandbox/templates/vanilla/src/testcases/loadingSvgs.ts
@@ -1,24 +1,29 @@
 import * as fabric from 'fabric';
 
-const svgString = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="5 3 10 10" version="1.1" width="400" height="400">
-<g>
-    <g>
-    <clipPath id="a">
-        <circle transform="scale(1.2, 1.2) translate(-1, -1)"  r="4"  cx="8" cy="8" />
-    </clipPath>
-    <clipPath id="t" clip-path="url(#a)">
-        <circle r="6" transform="scale(1.3, 0.8) translate(1, 1)"  cx="7" cy="7" />
-    </clipPath>
-    <clipPath id="c" clip-path="url(#t)" >
-        <circle  transform="translate(12, 10) scale(14, 14)"  r="0.5"  cx="0.01" cy="0.01" />
-    </clipPath>
-<path clip-path="url(#c)" d="M15.422,18.129l-5.264-2.768l-5.265,2.768l1.006-5.863L1.64,8.114l5.887-0.855
-	l2.632-5.334l2.633,5.334l5.885,0.855l-4.258,4.152L15.422,18.129z" fill="red"/>
-    </g>
-</g>
-</svg>`;
-
 export async function testCase(canvas: fabric.Canvas) {
-  const svg = await fabric.loadSVGFromString(svgString);
-  canvas.add(...(svg.objects.filter((obj) => !!obj) as fabric.FabricObject[]));
+  const rect = new fabric.Rect({
+    id: 'a',
+    left: 40,
+    top: 20,
+    width: 100,
+    height: 100,
+  });
+  const rect2 = new fabric.Rect({
+    id: 'b',
+    left: 160,
+    top: 10,
+    width: 100,
+    height: 100,
+  });
+  const rect3 = new fabric.Rect({
+    id: 'c',
+    left: 80,
+    top: 80,
+    width: 100,
+    height: 100,
+  });
+  canvas.add(rect, rect2, rect3);
+  canvas.on('mouse:over', (e) => {
+    console.log(e.target?.type);
+  }
 }
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -15244,7 +15244,7 @@ class Canvas extends SelectableCanvas {
    * @private
    */
   _resetTransformEventData() {
-    this._target = this._pointer = this._absolutePointer = undefined;
+    this._multiSelectTarget = this._target = this._pointer = this._absolutePointer = undefined;
   }
 
   /**
@@ -15255,9 +15255,17 @@ class Canvas extends SelectableCanvas {
   _cacheTransformEventData(e) {
     // reset in order to avoid stale caching
     this._resetTransformEventData();
-    this._pointer = this.getViewportPoint(e);
+    const pointer = this.getViewportPoint(e);
+    this._pointer = pointer;
     this._absolutePointer = sendPointToPlane(this._pointer, undefined, this.viewportTransform);
     this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e);
+    // in case we have a multi selection as a target, search additional targets
+    this._multiSelectTarget = isActiveSelection(this._target) ?
+    // first search active objects for a target to remove
+    this.searchPossibleTargets(this._target.getObjects(), pointer) ||
+    //  if not found, search under active selection for a target to add
+    // `prevActiveObjects` will be searched but we already know they will not be found
+    this.searchPossibleTargets(this._objects, pointer) : undefined;
   }
 
   /**
@@ -15516,13 +15524,7 @@ class Canvas extends SelectableCanvas {
       if (isAS) {
         const prevActiveObjects = activeObject.getObjects();
         if (target === activeObject) {
-          const pointer = this.getViewportPoint(e);
-          target =
-          // first search active objects for a target to remove
-          this.searchPossibleTargets(prevActiveObjects, pointer) ||
-          //  if not found, search under active selection for a target to add
-          // `prevActiveObjects` will be searched but we already know they will not be found
-          this.searchPossibleTargets(this._objects, pointer);
+          target = this._multiSelectTarget;
           // if nothing is found bail out
           if (!target || !target.selectable) {
             return false;

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/dist/index.node.mjs b/dist/index.node.mjs
@@ -15300,7 +15300,7 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
    * @private
    */
   _resetTransformEventData() {
-    this._target = this._pointer = this._absolutePointer = undefined;
+    this._multiSelectTarget = this._target = this._pointer = this._absolutePointer = undefined;
   }
 
   /**
@@ -15311,9 +15311,17 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
   _cacheTransformEventData(e) {
     // reset in order to avoid stale caching
     this._resetTransformEventData();
-    this._pointer = this.getViewportPoint(e);
+    const pointer = this.getViewportPoint(e);
+    this._pointer = pointer;
     this._absolutePointer = sendPointToPlane(this._pointer, undefined, this.viewportTransform);
     this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e);
+    // in case we have a multi selection as a target, search additional targets
+    this._multiSelectTarget = isActiveSelection(this._target) ?
+    // first search active objects for a target to remove
+    this.searchPossibleTargets(this._target.getObjects(), pointer) ||
+    //  if not found, search under active selection for a target to add
+    // `prevActiveObjects` will be searched but we already know they will not be found
+    this.searchPossibleTargets(this._objects, pointer) : undefined;
   }
 
   /**
@@ -15572,13 +15580,7 @@ let Canvas$1 = class Canvas extends SelectableCanvas {
       if (isAS) {
         const prevActiveObjects = activeObject.getObjects();
         if (target === activeObject) {
-          const pointer = this.getViewportPoint(e);
-          target =
-          // first search active objects for a target to remove
-          this.searchPossibleTargets(prevActiveObjects, pointer) ||
-          //  if not found, search under active selection for a target to add
-          // `prevActiveObjects` will be searched but we already know they will not be found
-          this.searchPossibleTargets(this._objects, pointer);
+          target = this._multiSelectTarget;
           // if nothing is found bail out
           if (!target || !target.selectable) {
             return false;

diff --git a/dist/index.node.mjs.map b/dist/index.node.mjs.map
diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts
@@ -1099,7 +1099,11 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
    * @private
    */
   _resetTransformEventData() {
-    this._target = this._pointer = this._absolutePointer = undefined;
+    this._multiSelectTarget =
+      this._target =
+      this._pointer =
+      this._absolutePointer =
+        undefined;
   }
 
   /**
@@ -1110,7 +1114,8 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
   _cacheTransformEventData(e: TPointerEvent) {
     // reset in order to avoid stale caching
     this._resetTransformEventData();
-    this._pointer = this.getViewportPoint(e);
+    const pointer = this.getViewportPoint(e);
+    this._pointer = pointer;
     this._absolutePointer = sendPointToPlane(
       this._pointer,
       undefined,
@@ -1119,6 +1124,14 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     this._target = this._currentTransform
       ? this._currentTransform.target
       : this.findTarget(e);
+    // in case we have a multi selection as a target, search additional targets
+    this._multiSelectTarget = isActiveSelection(this._target)
+      ? // first search active objects for a target to remove
+        this.searchPossibleTargets(this._target.getObjects(), pointer) ||
+        //  if not found, search under active selection for a target to add
+        // `prevActiveObjects` will be searched but we already know they will not be found
+        this.searchPossibleTargets(this._objects, pointer)
+      : undefined;
   }
 
   /**
@@ -1413,13 +1426,7 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
       if (isAS) {
         const prevActiveObjects = activeObject.getObjects();
         if (target === activeObject) {
-          const pointer = this.getViewportPoint(e);
-          target =
-            // first search active objects for a target to remove
-            this.searchPossibleTargets(prevActiveObjects, pointer) ||
-            //  if not found, search under active selection for a target to add
-            // `prevActiveObjects` will be searched but we already know they will not be found
-            this.searchPossibleTargets(this._objects, pointer);
+          target = this._multiSelectTarget;
           // if nothing is found bail out
           if (!target || !target.selectable) {
             return false;

diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts
@@ -285,6 +285,16 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    */
   protected declare _target?: FabricObject;
 
+  /**
+   * During a mouse event we may need the target multiple times in multiple functions.
+   * _multiSelectTarget holds a reference to the target that is inside or outside the multi selection
+   * and that may be the object added or removed from the multi selection.
+   * This reference is valid for the lifespan of the event.
+   * Every fabricJS mouse event create and delete the cache every time.
+   * @type {FabricObject}
+   */
+  protected declare _multiSelectTarget?: FabricObject;
+
   static ownDefaults = canvasDefaults;
 
   static getDefaults(): Record<string, any> {