Support undo for grid container transformation

package.json

@@ -66,10 +66,5 @@
     "typescript": "^5.0.3",
     "vite": "^4.2.1",
     "vite-plugin-replace": "^0.1.1"
-  },
-  "size-limit": [
-    {
-      "path": "packages/dflex-core-instance/dist/dflex-core.js"
-    }
-  ]
+  }
 }

packages/dflex-core-instance/src/Container/DFlexParentContainer.ts

@@ -5,6 +5,15 @@ import type { Dimensions, AxesPoint } from "@dflex/utils";
 
 const EMPTY_GRID_INDEX = -1;
 
+type TransitionHistory = {
+  /**
+   * Preserve the last element position in the list .
+   * Usage: Getting this position when the dragged is going back from the tail.
+   */
+  lastElmPosition: PointNum;
+  grid: PointNum;
+};
+
 class DFlexParentContainer {
   private _boundariesByRow: BoxNum;
 
@@ -30,7 +39,7 @@ class DFlexParentContainer {
    * Preserve the last element position in the list .
    * Usage: Getting this position when the dragged is going back from the tail.
    */
-  lastElmPosition!: PointNum;
+  private _translateHistory?: TransitionHistory[];
 
   constructor(DOM: HTMLElement, originLength: number, id: string) {
     this.id = id;
@@ -39,7 +48,9 @@ class DFlexParentContainer {
     this.originLength = originLength;
     this._boundariesByRow = new BoxNum(0, 0, 0, 0);
     this._siblingBoundaries = null;
+    this._translateHistory = undefined;
     this._initRect(DOM);
+
     // @ts-expect-error
     this.lastElmPosition = null;
 
@@ -161,12 +172,25 @@ class DFlexParentContainer {
     this.lastElmPosition = null;
   }
 
-  preservePosition(pos: AxesPoint): void {
-    if (this.lastElmPosition) {
-      this.lastElmPosition.setAxes(pos.x, pos.y);
-    } else {
-      this.lastElmPosition = new PointNum(pos.x, pos.y);
-    }
+  preservePosition(lastElmPosition: AxesPoint, grid: AxesPoint): void {
+    const elmAxesHistory: TransitionHistory = {
+      lastElmPosition: new PointNum(lastElmPosition.x, lastElmPosition.y),
+      grid: new PointNum(grid.x, grid.y),
+    };
+
+    this._translateHistory = [elmAxesHistory];
+  }
+
+  getLastElmPosition() {
+    return Array.isArray(this._translateHistory)
+      ? this._translateHistory[0].lastElmPosition
+      : null;
+  }
+
+  getLastGrid() {
+    return Array.isArray(this._translateHistory)
+      ? this._translateHistory[0].grid
+      : null;
   }
 }
 

packages/dflex-core-instance/src/Element/DFlexCoreElement.ts

@@ -93,6 +93,12 @@ function assertGridBoundaries(
   }
 }
 
+function getAxisToProcess(axes: Axes): readonly Axis[] {
+  const axisToProcess = axes === "z" ? BOTH_AXIS : [axes];
+
+  return axisToProcess;
+}
+
 class DFlexCoreElement extends DFlexBaseElement {
   private _initialPosition: PointNum;
 
@@ -342,7 +348,7 @@ class DFlexCoreElement extends DFlexBaseElement {
     return [oldIndex, newIndex];
   }
 
-  private _updateDOMGridOnAxes(
+  private _updateDOMGridOnAxis(
     direction: Direction,
     numberOfPassedElm: number,
     maxContainerGridBoundaries: PointNum
@@ -377,10 +383,10 @@ class DFlexCoreElement extends DFlexBaseElement {
    * @param mainAxisDirection
    * @param elmTransition
    * @param cycleID
-   * @param axis
+   * @param axes
    */
   reconcilePosition(
-    axis: Axes,
+    axes: Axes,
     mainAxisDirection: Direction,
     DOM: HTMLElement,
     siblings: string[],
@@ -393,24 +399,22 @@ class DFlexCoreElement extends DFlexBaseElement {
      * `mainAxisDirection` decides the direction of the element, negative or positive.
      * If the element is dragged to the left, the `mainAxisDirection` is -1.
      */
-    let axisToProcess: readonly Axis[];
 
-    const direction = {
+    const direction: AxesPoint<Direction> = {
       x: mainAxisDirection === 1 ? -1 : 1,
       y: mainAxisDirection,
     };
 
-    if (axis === "z") {
-      axisToProcess = BOTH_AXIS;
-    } else {
-      axisToProcess = [axis];
-      direction[axis] = mainAxisDirection;
+    if (axes !== "z") {
+      direction[axes] = mainAxisDirection;
     }
 
+    const axisToProcess = getAxisToProcess(axes);
+
     axisToProcess.forEach((_axis) => {
       elmTransition[_axis] *= direction[_axis];
 
-      this._updateDOMGridOnAxes(
+      this._updateDOMGridOnAxis(
         direction[_axis] as Direction,
         numberOfPassedElm,
         maxContainerGridBoundaries
@@ -421,7 +425,7 @@ class DFlexCoreElement extends DFlexBaseElement {
       assertGridBoundaries(this.id, this.DOMGrid, maxContainerGridBoundaries);
     }
 
-    this._pushToTranslateHistory(axis, cycleID, numberOfPassedElm);
+    this._pushToTranslateHistory(axes, cycleID, numberOfPassedElm);
 
     const indexIncrement = mainAxisDirection * numberOfPassedElm;
 
@@ -452,7 +456,11 @@ class DFlexCoreElement extends DFlexBaseElement {
    *
    * @param cycleID
    */
-  rollBackPosition(DOM: HTMLElement, cycleID: string): void {
+  rollBackPosition(
+    DOM: HTMLElement,
+    maxContainerGridBoundaries: PointNum,
+    cycleID: string
+  ): void {
     if (
       this._translateHistory === undefined ||
       !this._translateHistory.has(cycleID)
@@ -482,22 +490,29 @@ class DFlexCoreElement extends DFlexBaseElement {
 
     let indexIncrement = 0;
 
-    const direction = {
+    const direction: AxesPoint<Direction> = {
       x: elmTransition.x > 0 ? 1 : -1,
       y: elmTransition.y > 0 ? 1 : -1,
     };
 
-    if (axes === "z") {
-      indexIncrement = elmTransition.x > 0 || elmTransition.y > 0 ? 1 : -1;
+    const axisToProcess = getAxisToProcess(axes);
+
+    axisToProcess.forEach((_axis) => {
+      this._updateDOMGridOnAxis(
+        direction[_axis] as Direction,
+        numberOfPassedElm,
+        maxContainerGridBoundaries
+      );
+    });
 
-      this.DOMGrid.increase({
-        x: direction.x * numberOfPassedElm,
-        y: direction.y * numberOfPassedElm,
-      });
+    if (__DEV__) {
+      assertGridBoundaries(this.id, this.DOMGrid, maxContainerGridBoundaries);
+    }
+
+    if (axes === "z") {
+      indexIncrement = elmTransition.y > 0 ? 1 : -1;
     } else {
       indexIncrement = direction[axes] * numberOfPassedElm;
-
-      this.DOMGrid[axes] += indexIncrement;
     }
 
     this._transformationProcess(DOM, elmTransition, true, indexIncrement);
@@ -512,7 +527,7 @@ class DFlexCoreElement extends DFlexBaseElement {
       return;
     }
 
-    this.rollBackPosition(DOM, cycleID);
+    this.rollBackPosition(DOM, maxContainerGridBoundaries, cycleID);
   }
 
   hasTransformedFromOrigin(): boolean {

packages/dflex-dnd/src/Draggable/DraggableAxes.ts

@@ -32,10 +32,10 @@ import type {
 function initContainers(SK: string, siblings: Siblings) {
   const container = store.containers.get(SK)!;
 
-  if (!container.lastElmPosition) {
+  if (!container.getLastElmPosition()) {
     const lastElm = store.registry.get(siblings[siblings.length - 1])!;
 
-    container.preservePosition(lastElm.rect.getPosition());
+    container.preservePosition(lastElm.rect.getPosition(), container.grid);
   }
 }
 

packages/dflex-dnd/src/Mechanism/DFlexMechanismController.ts

@@ -145,7 +145,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
     // Enforce attaching it from the bottom since it's already inside the container.
     if (typeof insertAt !== "number") {
       // Restore the last element position from the bottom.
-      const { lastElmPosition } = container;
+      const lastElmPosition = container.getLastElmPosition();
       if (!migration.isTransitioning && lastElmPosition) {
         this.updateDraggedThresholdPosition(
           lastElmPosition.x,
@@ -514,7 +514,9 @@ class DFlexMechanismController extends DFlexScrollableElement {
     if (__DEV__) {
       if (!(id && isIDEligible(id, draggedID))) {
         throw new Error(
-          `_actionCaller: incorrect element index: ${elmIndex} for siblings: ${siblings}`
+          `_actionCaller: incorrect element index: ${elmIndex} for siblings: ${JSON.stringify(
+            siblings
+          )}`
         );
       }
 

packages/dflex-dnd/src/Mechanism/DFlexPositionUpdater.ts

@@ -76,7 +76,10 @@ export function getInsertionELmMeta(
   const { length } = siblings;
 
   // Restore the last known current position.
-  const { lastElmPosition, originLength } = store.containers.get(SK)!;
+  const container = store.containers.get(SK)!;
+
+  const { originLength } = container;
+  const lastElmPosition = container.getLastElmPosition();
 
   const position = new PointNum(0, 0);
   const isEmpty = isEmptyBranch(siblings);
@@ -182,7 +185,10 @@ export function handleElmMigration(
     originSiblings[originSiblings.length - 1]
   )!;
 
-  originContainer.preservePosition(lastInOrigin.rect.getPosition());
+  originContainer.preservePosition(
+    lastInOrigin.rect.getPosition(),
+    originContainer.grid
+  );
 }
 
 class DFlexPositionUpdater {

packages/dflex-dnd/src/Mechanism/EndCycle.ts

@@ -18,7 +18,7 @@ class EndCycle extends DFlexMechanismController {
       },
     } = this.draggable;
 
-    const { index: tempIndex, cycleID } = cycle;
+    const { index: tempIndex, cycleID, SK } = cycle;
 
     const isElmLiftedUp =
       this.isParentLocked || threshold.isOut[draggedID].bottom;
@@ -32,6 +32,10 @@ class EndCycle extends DFlexMechanismController {
       }
     }
 
+    const container = store.containers.get(SK)!;
+
+    const grid = container.getLastGrid() || container.grid;
+
     for (let i = siblings.length - 1; i >= 0; i -= 1) {
       const elmID = siblings[i];
 
@@ -42,7 +46,7 @@ class EndCycle extends DFlexMechanismController {
          * Note: rolling back won't affect order array. It only deals with element
          * itself and totally ignore any instance related to store.
          */
-        dflexElm.rollBackPosition(DOM, cycleID);
+        dflexElm.rollBackPosition(DOM, grid, cycleID);
       }
     }
 

packages/dflex-utils/src/Point/Point.ts

@@ -21,6 +21,10 @@ class Point<T> extends AxesPoint<T> {
     this.setAxes(target.x, target.y);
   }
 
+  duplicate(): Point<T> {
+    return new Point(this.x, this.y);
+  }
+
   /**
    * Get local instance of point.
    *