BREAKING(Object Stacking): 🔙 refactor logic to support Group 🔝

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
 
+- fix(Object Stacking): 🔙 refactor logic to support Group 🔝
+- chore(TS): migrate Group/ActiveSelection [#8455](https://github.com/fabricjs/fabric.js/pull/8455)
 - chore(TS): Move object classes #8511
 - chore(TS): polish text [#8489](https://github.com/fabricjs/fabric.js/pull/8489)
 - chore(TS): fix import cycle, extract `groupSVGElements` [#8506](https://github.com/fabricjs/fabric.js/pull/8506)

index.js

@@ -19,7 +19,6 @@ import './src/mixins/canvas_gestures.mixin'; // optional gestures
 import './src/mixins/canvas_animation.mixin'; // optional animation
 import './src/mixins/canvas_straightening.mixin'; // optional animation
 import './src/shapes/Object/FabricObject';
-import './src/mixins/object_stacking.mixin'; // removed in #8461
 import './src/mixins/stateful.mixin'; // will die soon
 import './src/shapes/line.class';
 import './src/shapes/circle.class';

src/mixins/collection.mixin.ts

@@ -1,6 +1,7 @@
 import { fabric } from '../../HEADER';
 import type { FabricObject } from '../shapes/Object/FabricObject';
 import type { Constructor } from '../typedefs';
+import { removeFromArray } from '../util/internals';
 
 export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
   class Collection extends Base {
@@ -19,6 +20,11 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
       // subclasses should override this method
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _onStackOrderChanged(object: FabricObject) {
+      // subclasses should override this method
+    }
+
     /**
      * Adds objects to collection
      * Objects should be instances of (or inherit from) FabricObject
@@ -152,6 +158,152 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
         return memo;
       }, 0);
     }
+
+    /**
+     * Moves an object or the objects of a multiple selection
+     * to the bottom of the stack of drawn objects
+     * @param {fabric.Object} object Object to send to back
+     * @returns {boolean} true if change occurred
+     */
+    sendObjectToBack(object: FabricObject) {
+      if (!object || object === this._objects[0]) {
+        return false;
+      }
+      removeFromArray(this._objects, object);
+      this._objects.unshift(object);
+      this._onStackOrderChanged(object);
+      return true;
+    }
+
+    /**
+     * Moves an object or the objects of a multiple selection
+     * to the top of the stack of drawn objects
+     * @param {fabric.Object} object Object to send
+     * @returns {boolean} true if change occurred
+     */
+    bringObjectToFront(object: FabricObject) {
+      if (!object || object === this._objects[this._objects.length - 1]) {
+        return false;
+      }
+      removeFromArray(this._objects, object);
+      this._objects.push(object);
+      this._onStackOrderChanged(object);
+      return true;
+    }
+
+    /**
+     * Moves an object or a selection down in stack of drawn objects
+     * An optional parameter, `intersecting` allows to move the object in behind
+     * the first intersecting object. Where intersection is calculated with
+     * bounding box. If no intersection is found, there will not be change in the
+     * stack.
+     * @param {fabric.Object} object Object to send
+     * @param {boolean} [intersecting] If `true`, send object behind next lower intersecting object
+     * @returns {boolean} true if change occurred
+     */
+    sendObjectBackwards(object: FabricObject, intersecting?: boolean) {
+      if (!object) {
+        return false;
+      }
+      const idx = this._objects.indexOf(object);
+      if (idx !== 0) {
+        // if object is not on the bottom of stack
+        const newIdx = this.findNewLowerIndex(object, idx, intersecting);
+        removeFromArray(this._objects, object);
+        this._objects.splice(newIdx, 0, object);
+        this._onStackOrderChanged(object);
+        return true;
+      }
+      return false;
+    }
+
+    /**
+     * Moves an object or a selection up in stack of drawn objects
+     * An optional parameter, intersecting allows to move the object in front
+     * of the first intersecting object. Where intersection is calculated with
+     * bounding box. If no intersection is found, there will not be change in the
+     * stack.
+     * @param {fabric.Object} object Object to send
+     * @param {boolean} [intersecting] If `true`, send object in front of next upper intersecting object
+     * @returns {boolean} true if change occurred
+     */
+    bringObjectForward(object: FabricObject, intersecting?: boolean) {
+      if (!object) {
+        return false;
+      }
+      const idx = this._objects.indexOf(object);
+      if (idx !== this._objects.length - 1) {
+        // if object is not on top of stack (last item in an array)
+        const newIdx = this.findNewUpperIndex(object, idx, intersecting);
+        removeFromArray(this._objects, object);
+        this._objects.splice(newIdx, 0, object);
+        this._onStackOrderChanged(object);
+        return true;
+      }
+      return false;
+    }
+
+    /**
+     * Moves an object to specified level in stack of drawn objects
+     * @param {fabric.Object} object Object to send
+     * @param {number} index Position to move to
+     * @returns {boolean} true if change occurred
+     */
+    moveObjectTo(object: FabricObject, index: number) {
+      if (object === this._objects[index]) {
+        return false;
+      }
+      removeFromArray(this._objects, object);
+      this._objects.splice(index, 0, object);
+      this._onStackOrderChanged(object);
+      return true;
+    }
+
+    findNewLowerIndex(
+      object: FabricObject,
+      idx: number,
+      intersecting?: boolean
+    ) {
+      let newIdx;
+
+      if (intersecting) {
+        newIdx = idx;
+        // traverse down the stack looking for the nearest intersecting object
+        for (let i = idx - 1; i >= 0; --i) {
+          if (object.isOverlapping(this._objects[i])) {
+            newIdx = i;
+            break;
+          }
+        }
+      } else {
+        newIdx = idx - 1;
+      }
+
+      return newIdx;
+    }
+
+    findNewUpperIndex(
+      object: FabricObject,
+      idx: number,
+      intersecting?: boolean
+    ) {
+      let newIdx;
+
+      if (intersecting) {
+        newIdx = idx;
+        // traverse up the stack looking for the nearest intersecting object
+        for (let i = idx + 1; i < this.objects.length; ++i) {
+          if (object.isOverlapping(this.objects[i])) {
+            newIdx = i;
+            break;
+          }
+        }
+      } else {
+        newIdx = idx + 1;
+      }
+
+      return newIdx;
+    }
   }
 
   // https://github.com/microsoft/TypeScript/issues/32080

src/shapes/Object/ObjectGeometry.ts

@@ -270,8 +270,8 @@ export class ObjectGeometry<
   intersectsWithRect(
     pointTL: Point,
     pointBR: Point,
-    absolute: boolean,
-    calculate: boolean
+    absolute?: boolean,
+    calculate?: boolean
   ): boolean {
     const coords = this.getCoords(absolute, calculate),
       intersection = Intersection.intersectPolygonRectangle(
@@ -341,8 +341,8 @@ export class ObjectGeometry<
   isContainedWithinRect(
     pointTL: Point,
     pointBR: Point,
-    absolute: boolean,
-    calculate: boolean
+    absolute?: boolean,
+    calculate?: boolean
   ): boolean {
     const boundingRect = this.getBoundingRect(absolute, calculate);
     return (
@@ -353,6 +353,14 @@ export class ObjectGeometry<
     );
   }
 
+  isOverlapping<T extends ObjectGeometry>(other: T): boolean {
+    return (
+      this.intersectsWithObject(other) ||
+      this.isContainedWithinObject(other) ||
+      other.isContainedWithinObject(this)
+    );
+  }
+
   /**
    * Checks if point is inside the object
    * @param {Point} point Point to check against
@@ -417,7 +425,7 @@ export class ObjectGeometry<
   private _containsCenterOfCanvas(
     pointTL: Point,
     pointBR: Point,
-    calculate: boolean
+    calculate?: boolean
   ): boolean {
     // worst case scenario the object is so big that contains the screen
     const centerPoint = pointTL.midPointFrom(pointBR);
@@ -429,7 +437,7 @@ export class ObjectGeometry<
    * @param {Boolean} [calculate] use coordinates of current position instead of stored ones
    * @return {Boolean} true if object is partially contained within canvas
    */
-  isPartiallyOnScreen(calculate: boolean): boolean {
+  isPartiallyOnScreen(calculate?: boolean): boolean {
     if (!this.canvas) {
       return false;
     }
@@ -583,7 +591,7 @@ export class ObjectGeometry<
    * @param {Boolean} absolute ignore viewport
    * @return {void}
    */
-  scaleToWidth(value: number, absolute: boolean) {
+  scaleToWidth(value: number, absolute?: boolean) {
     // adjust to bounding rect factor so that rotated shapes would fit as well
     const boundingRectFactor =
       this.getBoundingRect(absolute).width / this.getScaledWidth();

src/shapes/active_selection.class.ts

@@ -61,7 +61,6 @@ export class ActiveSelection extends Group {
    * @param {FabricObject[]} targets
    */
   _onAfterObjectsChange(type: 'added' | 'removed', targets: FabricObject[]) {
-    // @TODO figure out this change. This part wasn't here before migration.
     super._onAfterObjectsChange(type, targets);
     const groups: Group[] = [];
     targets.forEach((object) => {

src/shapes/group.class.ts

@@ -262,6 +262,10 @@ export class Group extends createCollectionMixin(FabricObject<GroupEvents>) {
     this._set('dirty', true);
   }
 
+  _onStackOrderChanged() {
+    this._set('dirty', true);
+  }
+
   /**
    * @private
    * @param {string} key