wip

Author: jalal246

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

@@ -13,6 +13,12 @@ import DFlexScrollableElement from "./DFlexScrollableElement";
 export function isIDEligible(elmID: string, draggedID: string): boolean {
   const { registry } = store;
 
+  if (__DEV__) {
+    if (!elmID) {
+      throw new Error("isIDEligible: received undefined elmID");
+    }
+  }
+
   return (
     elmID.length > 0 &&
     elmID !== draggedID &&
@@ -21,6 +27,23 @@ export function isIDEligible(elmID: string, draggedID: string): boolean {
   );
 }
 
+// eslint-disable-next-line no-unused-vars
+type ForEachSiblingsCB = (elmID: string, index: number) => boolean;
+
+function forEachDraggedSiblings(cb: ForEachSiblingsCB) {
+  const { SK } = store.migration.latest();
+
+  const siblings = store.getElmSiblingsByKey(SK);
+
+  for (let i = 0; i < siblings.length; i += 1) {
+    const id = siblings[i];
+
+    if (cb(id, i)) {
+      break;
+    }
+  }
+}
+
 class DFlexMechanismController extends DFlexScrollableElement {
   private isOnDragOutThresholdEvtEmitted: boolean;
 
@@ -71,27 +94,27 @@ class DFlexMechanismController extends DFlexScrollableElement {
 
     const { draggedElm } = this.draggable;
 
-    const { SK } = store.migration.latest();
-
-    const siblings = store.getElmSiblingsByKey(SK);
+    forEachDraggedSiblings((id, i) => {
+      if (!isIDEligible(id, draggedElm.id)) {
+        return false;
+      }
 
-    for (let i = 0; i < siblings.length; i += 1) {
-      const id = siblings[i];
+      let isQualified = false;
 
-      if (isIDEligible(id, draggedElm.id)) {
-        const element = store.registry.get(id)!;
+      const dflexElm = store.registry.get(id)!;
 
-        const isQualified = element.rect.isIntersect(
-          this.draggable.getAbsoluteCurrentPosition()
-        );
+      isQualified = dflexElm.rect.isIntersect(
+        this.draggable.getAbsoluteCurrentPosition()
+      );
 
-        if (isQualified) {
-          droppableIndex = i;
+      if (isQualified) {
+        droppableIndex = i;
 
-          break;
-        }
+        return true;
       }
-    }
+
+      return false;
+    });
 
     return droppableIndex;
   }
@@ -109,7 +132,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
      * If tempIndex is zero, the dragged is coming from the top. So, move them
      * down all: to=0
      */
-    let hasToMoveSiblingsDown = true;
+    let hasToShiftSiblings = true;
 
     const isEmpty = isEmptyBranch(siblings);
 
@@ -129,7 +152,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
 
       insertAt = siblings.length - 1;
 
-      hasToMoveSiblingsDown = false;
+      hasToShiftSiblings = false;
     }
 
     this.draggable.setDraggedTempIndex(insertAt);
@@ -144,15 +167,15 @@ class DFlexMechanismController extends DFlexScrollableElement {
         this.getComposedOccupiedTranslateAndGrid(
           SK,
           insertAt,
-          hasToMoveSiblingsDown,
+          hasToShiftSiblings,
           "y"
         ));
     }
 
     // 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);
+    if (hasToShiftSiblings && !isEmpty) {
+      this._shiftSiblings(insertAt);
     }
 
     draggedElm.removeAttribute(this.draggable.draggedDOM, "OUT_CONTAINER");
@@ -372,7 +395,7 @@ class DFlexMechanismController extends DFlexScrollableElement {
    *
    * @param to - index
    */
-  private _moveDown(to: number): void {
+  private _shiftSiblings(to: number): void {
     const { events, draggedElm } = this.draggable;
     const { migration } = store;
 

packages/dflex-utils/src/Box/BoxNum.ts

@@ -16,6 +16,14 @@ class BoxNum extends Box<number> {
     );
   }
 
+  isIntersectY(box: BoxNum): boolean {
+    return this.top < box.bottom || this.bottom > box.top;
+  }
+
+  isIntersectX(box: BoxNum): boolean {
+    return this.left < box.right || this.right > box.left;
+  }
+
   /**
    * True when it's intersected with other box.
    *

packages/dflex-utils/src/constants.ts

@@ -0,0 +1,7 @@
+/** Single Axis. */
+export const AXIS = Object.freeze({
+  X: "x",
+  Y: "y",
+});
+
+export type Axis = (typeof AXIS)[keyof typeof AXIS];

packages/dflex-utils/src/index.ts

@@ -16,7 +16,6 @@ export type {
   RectDimensions,
   RectBoundaries,
   Axes,
-  Axis,
   Direction,
 } from "./types";
 
@@ -35,3 +34,7 @@ export {
 export { canUseDOM, getSelection, getParentElm } from "./dom";
 
 export * as featureFlags from "./FeatureFlags";
+
+export { AXIS } from "./constants";
+
+export type { Axis } from "./constants";