feat(perPixelTargetFind): support not-selected option

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- feat(`perPixelTargetFind`): support `not-selected` option [#9167](https://github.com/fabricjs/fabric.js/pull/9167)
 - CD(): website submodule [#9165](https://github.com/fabricjs/fabric.js/pull/9165)
 
 ## [6.0.0-beta12]

src/canvas/CanvasOptions.ts

@@ -1,6 +1,6 @@
 import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs';
 import type { ActiveSelection } from '../shapes/ActiveSelection';
-import type { TOptions } from '../typedefs';
+import type { PerPixelTargetFind, TOptions } from '../typedefs';
 import type { StaticCanvasOptions } from './StaticCanvasOptions';
 
 export interface CanvasTransformOptions {
@@ -182,7 +182,7 @@ export interface TargetFindOptions {
    * @type Boolean
    * @default
    */
-  perPixelTargetFind: boolean;
+  perPixelTargetFind: PerPixelTargetFind;
 
   /**
    * Number of pixels around target pixel to tolerate (consider active) during object detection

src/canvas/SelectableCanvas.ts

@@ -20,6 +20,7 @@ import { isCollection } from '../util/typeAssertions';
 import { invertTransform, transformPoint } from '../util/misc/matrix';
 import { isTransparent } from '../util/misc/isTransparent';
 import type {
+  PerPixelTargetFind,
   TMat2D,
   TOriginX,
   TOriginY,
@@ -167,7 +168,7 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
   declare containerClass: string;
 
   // target find config
-  declare perPixelTargetFind: boolean;
+  declare perPixelTargetFind: PerPixelTargetFind;
   declare targetFindTolerance: number;
   declare skipTargetFind: boolean;
 
@@ -772,25 +773,20 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     obj: FabricObject,
     globalPointer: Point
   ): boolean {
-    if (
-      obj &&
-      obj.visible &&
-      obj.evented &&
-      // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
-      // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
-      obj.containsPoint(pointer)
-    ) {
-      if (
-        (this.perPixelTargetFind || obj.perPixelTargetFind) &&
-        !(obj as unknown as IText).isEditing
-      ) {
-        if (!this.isTargetTransparent(obj, globalPointer.x, globalPointer.y)) {
-          return true;
-        }
-      } else {
-        return true;
-      }
+    if (obj && obj.visible && obj.evented && obj.containsPoint(pointer)) {
+      const shouldPerformPixelFind =
+        !(obj as unknown as IText).isEditing &&
+        (this.perPixelTargetFind === true ||
+          obj.perPixelTargetFind === true ||
+          ((this.perPixelTargetFind === 'not-selected' ||
+            obj.perPixelTargetFind === 'not-selected') &&
+            !this.getActiveObjects().includes(obj)));
+
+      return shouldPerformPixelFind
+        ? !this.isTargetTransparent(obj, globalPointer.x, globalPointer.y)
+        : true;
     }
+
     return false;
   }
 

src/canvas/__tests__/perPixelTargetFind.spec.ts

@@ -0,0 +1,57 @@
+import { Point } from '../../Point';
+import type { IText } from '../../shapes/IText/IText';
+import { FabricObject } from '../../shapes/Object/FabricObject';
+import { Canvas } from '../Canvas';
+
+describe('perPixelTargetFind', () => {
+  let canvas: Canvas;
+  let object: FabricObject;
+  let isTargetTransparent: jest.SpyInstance;
+
+  beforeEach(() => {
+    canvas = new Canvas(null);
+    isTargetTransparent = jest
+      .spyOn(canvas, 'isTargetTransparent')
+      .mockReturnValue(true);
+    object = new FabricObject();
+    jest.spyOn(object, 'containsPoint').mockReturnValue(true);
+  });
+
+  afterEach(() => {
+    return canvas.dispose();
+  });
+
+  const checkTarget = () =>
+    canvas._checkTarget(new Point(), object, new Point());
+
+  test('perPixelTargetFind === false', () => {
+    expect(checkTarget()).toBe(true);
+    expect(isTargetTransparent).not.toBeCalled();
+  });
+
+  test('perPixelTargetFind === true', () => {
+    object.perPixelTargetFind = true;
+    expect(checkTarget()).toBe(false);
+    expect(isTargetTransparent).toBeCalled();
+  });
+
+  test('perPixelTargetFind === true, object is editing', () => {
+    object.perPixelTargetFind = true;
+    (object as IText).isEditing = true;
+    expect(checkTarget()).toBe(true);
+    expect(isTargetTransparent).not.toBeCalled();
+  });
+
+  test('perPixelTargetFind === "not-selected", object is not selected', () => {
+    object.perPixelTargetFind = 'not-selected';
+    expect(checkTarget()).toBe(false);
+    expect(isTargetTransparent).toBeCalled();
+  });
+
+  test('perPixelTargetFind === "not-selected", object is selected', () => {
+    object.perPixelTargetFind = 'not-selected';
+    canvas.setActiveObject(object);
+    expect(checkTarget()).toBe(true);
+    expect(isTargetTransparent).not.toBeCalled();
+  });
+});

src/shapes/Object/InteractiveObject.ts

@@ -1,5 +1,5 @@
 import { Point } from '../../Point';
-import type { TCornerPoint, TDegree } from '../../typedefs';
+import type { PerPixelTargetFind, TCornerPoint, TDegree } from '../../typedefs';
 import { FabricObject } from './Object';
 import { degreesToRadians } from '../../util/misc/radiansDegreesConversion';
 import type { TQrDecomposeOut } from '../../util/misc/matrix';
@@ -87,7 +87,7 @@ export class InteractiveFabricObject<
 
   declare selectable: boolean;
   declare evented: boolean;
-  declare perPixelTargetFind: boolean;
+  declare perPixelTargetFind: PerPixelTargetFind;
   declare activeOn: 'down' | 'up';
 
   declare hoverCursor: CSSStyleDeclaration['cursor'] | null;

src/shapes/Object/types/FabricObjectProps.ts

@@ -1,4 +1,4 @@
-import type { TDegree } from '../../../typedefs';
+import type { PerPixelTargetFind, TDegree } from '../../../typedefs';
 import type { BorderProps } from './BorderProps';
 import type { ControlProps } from './ControlProps';
 import type { LockInteractionProps } from './LockInteractionProps';
@@ -81,7 +81,7 @@ export interface FabricObjectProps
    * @type Boolean
    * @default
    */
-  perPixelTargetFind: boolean;
+  perPixelTargetFind: PerPixelTargetFind;
 
   /**
    * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).

src/typedefs.ts

@@ -124,3 +124,5 @@ export type Abortable = {
 };
 
 export type TOptions<T> = Partial<T> & Record<string, any>;
+
+export type PerPixelTargetFind = boolean | 'not-selected';