BREAKING: remove absolute true/false from the api.

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- BREAKING: remove absolute true/false from the api. [#9395](https://github.com/fabricjs/fabric.js/pull/9395)
 - refactor(Canvas): BREAKING deprecate `getPointer`, add new getScenePoint and getViewportPoint methods, removed `restorePointerVpt`, extended mouse events data [#9175](https://github.com/fabricjs/fabric.js/pull/9175)
 - fix(Object): Fix detection of falsy shadows in Object.needsItsOwnCache method [#9469](https://github.com/fabricjs/fabric.js/pull/9469)
 - feat(util): expose `calcPlaneRotation` [#9419](https://github.com/fabricjs/fabric.js/pull/9419)

e2e/tests/selection/selection-hit-region/index.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+import setup from '../../../setup';
+import { CanvasUtil } from '../../../utils/CanvasUtil';
+
+setup();
+
+test('Selection hit regions', async ({ page }) => {
+  const canvasUtil = new CanvasUtil(page);
+  // prepare some common functions
+  await canvasUtil.executeInBrowser((canvas) => {
+    const render = ({ x, y }: fabric.XY, fill: string) => {
+      const ctx = canvas.getTopContext();
+      ctx.fillStyle = fill;
+      ctx.globalAlpha = 0.5;
+      ctx.beginPath();
+      ctx.fillRect(x, y, 1, 1);
+      ctx.fill();
+    };
+
+    window.renderRectsPadding = (rects) => {
+      for (let y = 0; y <= canvas.height; y += 2) {
+        for (let x = 0; x < canvas.width; x += 2) {
+          rects.some((rect) => {
+            if (canvas._checkTarget(rect, new fabric.Point(x, y))) {
+              render({ x, y }, rect.fill as string);
+            }
+          });
+        }
+      }
+    };
+  });
+
+  await canvasUtil.executeInBrowser((canvas) => {
+    const group = canvas.getObjects()[0] as fabric.Group;
+    const rects = group.getObjects();
+    window.renderRectsPadding(rects);
+  });
+
+  expect(await new CanvasUtil(page).screenshot()).toMatchSnapshot({
+    name: 'group-padding.png',
+  });
+
+  await canvasUtil.executeInBrowser((canvas) => {
+    const group = canvas.getObjects()[0] as fabric.Group;
+    const rects = group.getObjects();
+    group.scaleX = 0.5;
+    group.scaleY = 0.5;
+    group.rotate(45);
+    canvas.centerObject(group);
+    canvas.contextTopDirty = true;
+    canvas.renderAll();
+    window.renderRectsPadding(rects);
+  });
+
+  expect(await new CanvasUtil(page).screenshot()).toMatchSnapshot({
+    name: 'transformed-group-padding.png',
+  });
+
+  await canvasUtil.executeInBrowser((canvas) => {
+    const group = canvas.getObjects()[0] as fabric.Group;
+    const rects = group.getObjects();
+    canvas.setZoom(2);
+    canvas.viewportCenterObject(group);
+    canvas.contextTopDirty = true;
+    canvas.renderAll();
+    window.renderRectsPadding(rects);
+  });
+
+  expect(await new CanvasUtil(page).screenshot()).toMatchSnapshot({
+    name: 'zoomed-transformed-group-padding.png',
+  });
+});

e2e/tests/selection/selection-hit-region/index.ts

@@ -0,0 +1,48 @@
+/**
+ * Runs in the **BROWSER**
+ * Imports are defined in 'e2e/imports.ts'
+ */
+
+import { Rect, Group } from 'fabric';
+import { beforeAll } from '../../test';
+
+beforeAll((canvas) => {
+  canvas.setDimensions({ width: 500, height: 500 });
+
+  const rect = new Rect({
+    width: 200,
+    height: 200,
+    padding: 30,
+    left: 40,
+    top: 50,
+    fill: 'green',
+    opacity: 0.5,
+  });
+  const rect2 = new Rect({
+    width: 200,
+    angle: 10,
+    top: 60,
+    left: 250,
+    height: 200,
+    padding: 6,
+    fill: 'blue',
+    opacity: 0.5,
+  });
+  const rect3 = new Rect({
+    width: 200,
+    angle: 45,
+    left: 60,
+    top: 260,
+    height: 200,
+    padding: 0,
+    fill: 'purple',
+    opacity: 0.5,
+  });
+
+  const group = new Group([rect, rect2, rect3], {
+    subTargetCheck: true,
+  });
+  canvas.add(group);
+
+  return { group, rect, rect2, rect3 };
+});

src/Collection.ts

@@ -85,7 +85,7 @@
         object: FabricObject,
         index: number,
         array: FabricObject[]
       ) => any
     ) {
       this.getObjects().forEach((object, index, objects) =>
         callback(object, index, objects)
@@ -311,6 +311,8 @@
      * Given a bounding box, return all the objects of the collection that are contained in the bounding box.
      * If `includeIntersecting` is true, return also the objects that intersect the bounding box as well.
      * This is meant to work with selection. Is not a generic method.
+     * @param {TBBox} bbox a bounding box in scene coordinates
+     * @param {{ includeIntersecting?: boolean }} options an object with includeIntersecting
      * @returns array of objects contained in the bounding box, ordered from top to bottom stacking wise
      */
     collectObjects(
@@ -327,10 +329,10 @@
         if (
           object.selectable &&
           object.visible &&
-          ((includeIntersecting && object.intersectsWithRect(tl, br, true)) ||
-            object.isContainedWithinRect(tl, br, true) ||
-            (includeIntersecting && object.containsPoint(tl, true)) ||
-            (includeIntersecting && object.containsPoint(br, true)))
+          ((includeIntersecting && object.intersectsWithRect(tl, br)) ||
+            object.isContainedWithinRect(tl, br) ||
+            (includeIntersecting && object.containsPoint(tl)) ||
+            (includeIntersecting && object.containsPoint(br)))
         ) {
           objects.push(object);
         }

src/benchmarks/raycasting.mjs

@@ -102,10 +102,7 @@ export const cornerPointContainsPoint = (point, cornerPoint) => {
 
 class Test1 extends FabricObject {
   containsPoint(point, absolute, calculate) {
-    return cornerPointContainsPoint(
-      point,
-      this._getCoords(absolute, calculate)
-    );
+    return cornerPointContainsPoint(point, this._getCoords(calculate));
   }
 }