wip

Author: jalal246

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

@@ -1,4 +1,11 @@
-import { AxesPoint, featureFlags, PointNum, Tracker } from "@dflex/utils";
+import {
+  AxesPoint,
+  AXIS,
+  Axis,
+  featureFlags,
+  PointNum,
+  Tracker,
+} from "@dflex/utils";
 
 import { DFLEX_EVENTS, scheduler, store } from "../LayoutManager";
 import type DraggableInteractive from "../Draggable";
@@ -152,7 +159,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
     // If it has solo empty id then there's no need to move down. Because it's
     // empty branch.
     if (hasToMoveSiblingsDown && !isEmpty) {
-      this._moveDown(insertAt);
+      this._moveDown(insertAt, "y");
     }
 
     draggedElm.removeAttribute(this.draggable.draggedDOM, "OUT_CONTAINER");
@@ -274,7 +281,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
     }
   }
 
-  private _switchElementPosition(isIncrease: boolean): void {
+  private _switchElementPosition(axis: Axis, isIncrease: boolean): void {
     const { draggedElm } = this.draggable;
     const { SK, index, cycleID } = store.migration.latest();
 
@@ -294,14 +301,14 @@ class DFlexMechanismController extends DFlexScrollableElement {
     if (isIDEligible(id, draggedElm.id)) {
       this.draggable.setDraggedTempIndex(elmIndex);
 
-      this.updateElement(id, siblings, cycleID, isIncrease);
+      this.updateElement(axis, id, siblings, cycleID, isIncrease);
     }
   }
 
   /**
    * Filling the space when the head of the list is leaving the list.
    */
-  private _fillHeadUp(): void {
+  private _fillHeadUp(axis: Axis): void {
     const { occupiedPosition, draggedElm, events } = this.draggable;
     const { migration } = store;
 
@@ -363,7 +370,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
       const id = siblings[i];
 
       if (isIDEligible(id, draggedElm.id)) {
-        this.updateElement(id, siblings, cycleID, true);
+        this.updateElement(axis, id, siblings, cycleID, true);
       }
     }
   }
@@ -372,7 +379,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
    *
    * @param to - index
    */
-  private _moveDown(to: number): void {
+  private _moveDown(axis: Axis, to: number): void {
     const { events, draggedElm } = this.draggable;
     const { migration } = store;
 
@@ -390,7 +397,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
       const id = siblings[i];
 
       if (isIDEligible(id, draggedElm.id)) {
-        this.updateElement(id, siblings, cycleID, false);
+        this.updateElement(axis, id, siblings, cycleID, false);
       }
     }
   }
@@ -407,12 +414,16 @@ class DFlexMechanismController extends DFlexScrollableElement {
 
     const { grid: siblingsGrid } = store.containers.get(SK)!;
 
+    let axis: Axis;
+
     // Check if top or bottom.
     if (isOut[id].isOneTruthyByAxis("y")) {
       const newRow = isOut[id].bottom
         ? gridPlaceholder.y + 1
         : gridPlaceholder.y - 1;
 
+      axis = AXIS.Y;
+
       if (__DEV__) {
         if (featureFlags.enableMechanismDebugger) {
           // eslint-disable-next-line no-console
@@ -427,7 +438,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
         // lock the parent
         this._lockParent(true);
 
-        this._fillHeadUp();
+        this._fillHeadUp(axis);
 
         return;
       }
@@ -440,7 +451,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
         return;
       }
 
-      this._switchElementPosition(isOut[id].bottom);
+      this._switchElementPosition(axis, isOut[id].bottom);
 
       return;
     }
@@ -449,6 +460,8 @@ class DFlexMechanismController extends DFlexScrollableElement {
       ? gridPlaceholder.x + 1
       : gridPlaceholder.x - 1;
 
+    axis = AXIS.X;
+
     if (__DEV__) {
       if (featureFlags.enableMechanismDebugger) {
         // eslint-disable-next-line no-console
@@ -462,12 +475,12 @@ class DFlexMechanismController extends DFlexScrollableElement {
       // lock the parent
       this._lockParent(true);
 
-      this._fillHeadUp();
+      this._fillHeadUp(axis);
 
       return;
     }
 
-    this._switchElementPosition(isOut[id].right);
+    this._switchElementPosition(axis, isOut[id].right);
   }
 
   private _lockParent(isOut: boolean) {
@@ -504,7 +517,8 @@ class DFlexMechanismController extends DFlexScrollableElement {
               if (!(isOutSiblingsContainer || this.isParentLocked)) {
                 this._lockParent(true);
 
-                this._fillHeadUp();
+                // TODO: FIx this.
+                this._fillHeadUp(AXIS.Y);
               }
             },
           });

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

@@ -436,6 +436,7 @@ class DFlexPositionUpdater {
    * invokes for each eligible element in the parent container.
    */
   protected updateElement(
+    axis: Axis,
     id: string,
     siblings: Siblings,
     cycleID: string,
@@ -448,31 +449,6 @@ class DFlexPositionUpdater {
 
     const [element, DOM] = store.getElmWithDOM(id);
 
-    const {
-      keys: { SK },
-    } = element;
-
-    const { grid: siblingsGrid } = store.containers.get(SK)!;
-
-    const isContainerHasCol =
-      this.draggable.gridPlaceholder.x + 1 <= siblingsGrid.x;
-
-    let axis: Axis;
-
-    if (isContainerHasCol) {
-      axis = "x";
-    } else {
-      axis = "y";
-
-      // const isContainerHasRowAbove =
-      //   this.draggable.gridPlaceholder.y + 1 <= siblingsGrid.y;
-
-      // if (isContainerHasRowAbove) {
-      //   // Bi-directional
-      //   axis = "z";
-      // }
-    }
-
     if (__DEV__) {
       if (featureFlags.enableMechanismDebugger) {
         // eslint-disable-next-line no-console