wip

packages/dflex-dnd/src/LayoutManager/DFlexDOMReconciler.ts

@@ -1,11 +1,10 @@
 /* eslint-disable no-console */
 import type { DFlexElement } from "@dflex/core-instance";
-import type { Siblings } from "@dflex/dom-gen";
 import { featureFlags } from "@dflex/utils";
 import type DFlexDnDStore from "./DFlexDnDStore";
 
 function switchElmDOMPosition(
-  branchIDs: Readonly<Siblings>,
+  branchIDs: Readonly<string[]>,
   branchDOM: HTMLElement,
   store: DFlexDnDStore,
   dflexElm: DFlexElement,
@@ -42,7 +41,7 @@ function switchElmDOMPosition(
 }
 
 function commitElm(
-  branchIDs: Readonly<Siblings>,
+  branchIDs: Readonly<string[]>,
   branchDOM: HTMLElement,
   store: DFlexDnDStore,
   elmID: string,
@@ -88,7 +87,7 @@ type ReconciledElementIDs = Set<string>;
  * @returns An array of tuples containing the reconciled elements and their corresponding DOM elements.
  */
 function DFlexDOMReconciler(
-  siblingsIDs: Readonly<Siblings>,
+  siblingsIDs: Readonly<string[]>,
   containerDOM: HTMLElement,
   SK: string,
   store: DFlexDnDStore,

packages/dflex-dnd/src/LayoutManager/DFlexDnDExportedStore.ts

@@ -1,6 +1,5 @@
 import type { DFlexGlobalConfig, RegisterInputOpts } from "@dflex/store";
 import type { DFlexSerializedElement } from "@dflex/core-instance";
-import type { Siblings } from "@dflex/dom-gen";
 
 import DFlexDnDStore from "./DFlexDnDStore";
 
@@ -46,7 +45,7 @@ class DFlexDnDExportedStore {
    * @param SK - Sibling Key.
    * @returns An object containing the sibling element IDs.
    */
-  getElmSiblingsByKey(SK: string): Siblings {
+  getElmSiblingsByKey(SK: string): string[] {
     return this._base.getElmSiblingsByKey(SK);
   }
 

packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts

@@ -356,9 +356,9 @@ class DFlexDnDStore extends DFlexBaseStore {
   }
 
   private _initObservers() {
-    const highestSKInAllBranches = this.DOMGen.getAllHighestSKs();
+    const containerIDs = this.DOMGen.getTopLevelSKs();
 
-    highestSKInAllBranches.forEach(({ id }) => {
+    containerIDs.forEach(({ id }) => {
       if (__DEV__) {
         if (!this.interactiveDOM.has(id)) {
           throw new Error(`_initObservers: Unable to find DOM for SK: ${id}`);
@@ -842,7 +842,7 @@ class DFlexDnDStore extends DFlexBaseStore {
       }
     }
 
-    const SKIDs = this.DOMGen.getAllHighestSKs();
+    const SKIDs = this.DOMGen.getTopLevelSKs();
 
     SKIDs.forEach(({ SK: _SK, id }) => {
       if (SK === _SK) {

packages/dflex-dnd/src/LayoutManager/DFlexVisibilityUpdater.ts

@@ -1,5 +1,4 @@
 import type { DFlexElement, DFlexScrollContainer } from "@dflex/core-instance";
-import type { Siblings } from "@dflex/dom-gen";
 import type DFlexDnDStore from "./DFlexDnDStore";
 
 let prevVisibility = false;
@@ -25,7 +24,7 @@ function updateElmVisibility(
 }
 
 function updateSiblingsVisibility(
-  sibling: Siblings,
+  sibling: string[],
   store: DFlexDnDStore,
   from: number,
   to: number,

packages/dflex-dnd/test/__snapshots__/layoutManager.test.tsx.snap

@@ -29,7 +29,6 @@ DFlexDnDStore {
           "SK": "dflex_sk_1_0",
           "ids": [
             "dflex_id_0",
-            "dflex_id_1",
           ],
         },
       },
@@ -45,7 +44,6 @@ DFlexDnDStore {
         1 => {
           "SK": "dflex_sk_1_0",
           "ids": [
-            "dflex_id_0",
             "dflex_id_1",
           ],
         },
@@ -250,6 +248,7 @@ DFlexDnDStore {
   "migration": null,
   "mutationObserverMap": Map {
     "dflex_id_0" => MutationObserver {},
+    "dflex_id_1" => MutationObserver {},
   },
   "registry": Map {
     "id-1" => DFlexElement {

packages/dflex-dom-gen/src/DFlexDOMKeysGenerator.ts

@@ -52,19 +52,11 @@ export interface Pointer {
   order: Order;
 }
 
-export type Siblings = SiblingKey[];
-
-export type SKCollection = SiblingKey[];
-
 type RestoreKey = {
   BK: string;
   PK: string;
 };
 
-/**
- * Generate keys to connect relations between DOM-elements depending on tree
- * depth.
- */
 class DOMKeysGenerator extends DOMKeysManager {
   /**
    * Counter store. Each depth has it's own indicator. Allowing us to go

packages/dflex-dom-gen/src/DFlexDOMKeysManager.ts

@@ -8,16 +8,18 @@ type Depth = number;
 
 type BranchValue = { SK: SiblingKey; ids: ElmID[] };
 
-function deleteIDfromArr(siblings: string[], id: string): string[] {
+function deleteElmFromArr(siblings: string[], id: string): string[] {
   const updatedSiblings = siblings.filter((existingId) => existingId !== id);
 
   return updatedSiblings;
 }
 
-function addToUniqueArray<T>(arr: T[], element: T): void {
+function addToUniqueArray<T>(arr: T[], element: T): T[] {
   if (!arr.some((existingElement) => existingElement === element)) {
     arr.push(element);
   }
+
+  return arr;
 }
 
 class DOMKeysManager {
@@ -71,31 +73,39 @@ class DOMKeysManager {
   private _getHighestDepthInBranch(BK: string): [Depth, BranchValue] {
     const depthMap = this._branchesRegistry.get(BK)!;
 
-    const highestDepth = Math.max(...depthMap.keys());
+    const highestDepth = depthMap.size - 1;
 
     const highestDepthValue = depthMap.get(highestDepth)!;
 
     return [highestDepth, highestDepthValue];
   }
 
-  getAllHighestSKs(): Set<{ SK: string; id: string }> {
-    const allHighestSKs = new Set<{ SK: string; id: string }>();
+  getTopLevelSKs(): Set<{ SK: string; id: string }> {
+    const topLevelSKs = new Set<{ SK: string; id: string }>();
 
     this._branchesRegistry.forEach((_, BK) => {
       const [, { SK, ids }] = this._getHighestDepthInBranch(BK)!;
 
-      allHighestSKs.add({ SK, id: ids[0] });
+      topLevelSKs.add({ SK, id: ids[0] });
     });
 
-    return allHighestSKs;
+    return topLevelSKs;
   }
 
   private _updateBranchValue(
     SK: string,
     BK: string,
     depth: number,
   ): BranchValue {
-    const ids = this._idsBySk.get(SK)!;
+    let ids = this._idsBySk.get(SK)!;
+
+    // If depth equals to zero then it's all siblings.
+    // If not (meaning there are parent elements), then it's just the immediate parent.
+    if (depth > 0) {
+      // For non-zero depth, only include the immediate parent ID.
+      ids = [ids[ids.length - 1]];
+    }
+
     let branch = this._branchesRegistry.get(BK);
 
     if (!branch) {
@@ -120,7 +130,7 @@ class DOMKeysManager {
     return branchValue;
   }
 
-  private _shareParentFromPrevBranch(BK: BranchKey, latestDepth: number): void {
+  private _shareParentFromPrevBranch(BK: BranchKey, depth: number): void {
     const prevBK = this._findLastNotMatchingBK(BK);
 
     if (__DEV__) {
@@ -135,9 +145,10 @@ class DOMKeysManager {
 
     const [prevDepth, prevValue] = this._getHighestDepthInBranch(prevBK!)!;
 
-    if (latestDepth + 1 !== prevDepth) {
+    // Sharing the same parent in DOM but it's not in the registry.
+    if (depth + 1 !== prevDepth) {
       if (__DEV__) {
-        if (latestDepth !== prevDepth) {
+        if (depth !== prevDepth) {
           throw new Error(
             "_shareParentFromPrevBranch: Unable to add new higher depth and share the container. " +
               "Both siblings must have the same highest depth " +
@@ -148,6 +159,9 @@ class DOMKeysManager {
       return;
     }
 
+    // Update the current branch with previous values as they are shared.
+    // Essentially, we're informing the current branch that it shares a parent
+    // with the previous branch, so it should inherit the parent's values.
     this._updateBranchValue(prevValue.SK, BK, prevDepth);
   }
 
@@ -199,7 +213,7 @@ class DOMKeysManager {
   }
 
   private _deleteBKfromPrevBKs(BK: BranchKey): void {
-    deleteIDfromArr(this._prevBKs, BK);
+    deleteElmFromArr(this._prevBKs, BK);
   }
 
   private _deleteSKFromDepth(SK: string, depth: number): void {
@@ -234,7 +248,7 @@ class DOMKeysManager {
 
     const siblings = this._idsBySk.get(SK)!;
 
-    const updatedSiblings = deleteIDfromArr(siblings, id);
+    const updatedSiblings = deleteElmFromArr(siblings, id);
 
     if (updatedSiblings.length === 0) {
       this._idsBySk.delete(SK);
@@ -256,7 +270,7 @@ class DOMKeysManager {
 
     const deptVal = depthMap.get(depth)!;
 
-    const updatedSiblings = deleteIDfromArr(deptVal.ids, id);
+    const updatedSiblings = deleteElmFromArr(deptVal.ids, id);
 
     if (updatedSiblings.length === 0) {
       depthMap.delete(depth);

packages/dflex-dom-gen/src/index.ts

@@ -1,5 +1,5 @@
 import DOMKeysGenerator from "./DFlexDOMKeysGenerator";
 
-export type { Keys, Order, Pointer, Siblings } from "./DFlexDOMKeysGenerator";
+export type { Keys, Order, Pointer } from "./DFlexDOMKeysGenerator";
 
 export default DOMKeysGenerator;

packages/dflex-store/src/DFlexBaseStore.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import DOMKeysGenerator, { Keys, Siblings } from "@dflex/dom-gen";
+import DOMKeysGenerator, { Keys } from "@dflex/dom-gen";
 
 import { DFlexElement, DFlexElementInput } from "@dflex/core-instance";
 import {
@@ -539,7 +539,7 @@ class DFlexBaseStore extends DFlexDOMManager {
    * @param SK - Siblings Key.
    * @returns
    */
-  getElmSiblingsByKey(SK: string): Siblings {
+  getElmSiblingsByKey(SK: string): string[] {
     return this.DOMGen.getSiblingsByKey(SK);
   }
 
@@ -549,7 +549,7 @@ class DFlexBaseStore extends DFlexDOMManager {
    * @param dp - depth.
    * @returns
    */
-  getSiblingKeysByDepth(dp: number): Siblings {
+  getSiblingKeysByDepth(dp: number): string[] {
     return this.DOMGen.getSKByDepth(dp);
   }
 
@@ -559,7 +559,7 @@ class DFlexBaseStore extends DFlexDOMManager {
    * @param SK
    * @param newSiblings
    */
-  mutateSiblings(SK: string, newSiblings: Siblings): void {
+  mutateSiblings(SK: string, newSiblings: string[]): void {
     this.DOMGen.mutateSiblings(SK, newSiblings);
   }