From 3da0436e953a79cc283944f7c5f4ff27a0f72545 Mon Sep 17 00:00:00 2001 From: jalal246 Date: Sat, 16 Sep 2023 18:51:35 +0300 Subject: [PATCH] wip --- .../src/LayoutManager/DFlexDOMReconciler.ts | 7 ++-- .../LayoutManager/DFlexDnDExportedStore.ts | 3 +- .../src/LayoutManager/DFlexDnDStore.ts | 6 +-- .../LayoutManager/DFlexVisibilityUpdater.ts | 3 +- .../__snapshots__/layoutManager.test.tsx.snap | 3 +- .../src/DFlexDOMKeysGenerator.ts | 8 ---- .../dflex-dom-gen/src/DFlexDOMKeysManager.ts | 42 ++++++++++++------- packages/dflex-dom-gen/src/index.ts | 2 +- packages/dflex-store/src/DFlexBaseStore.ts | 8 ++-- 9 files changed, 42 insertions(+), 40 deletions(-) diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexDOMReconciler.ts b/packages/dflex-dnd/src/LayoutManager/DFlexDOMReconciler.ts index 3712b835c..302aca011 100644 --- a/packages/dflex-dnd/src/LayoutManager/DFlexDOMReconciler.ts +++ b/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, + branchIDs: Readonly, branchDOM: HTMLElement, store: DFlexDnDStore, dflexElm: DFlexElement, @@ -42,7 +41,7 @@ function switchElmDOMPosition( } function commitElm( - branchIDs: Readonly, + branchIDs: Readonly, branchDOM: HTMLElement, store: DFlexDnDStore, elmID: string, @@ -88,7 +87,7 @@ type ReconciledElementIDs = Set; * @returns An array of tuples containing the reconciled elements and their corresponding DOM elements. */ function DFlexDOMReconciler( - siblingsIDs: Readonly, + siblingsIDs: Readonly, containerDOM: HTMLElement, SK: string, store: DFlexDnDStore, diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexDnDExportedStore.ts b/packages/dflex-dnd/src/LayoutManager/DFlexDnDExportedStore.ts index e459a6541..f0bcd6043 100644 --- a/packages/dflex-dnd/src/LayoutManager/DFlexDnDExportedStore.ts +++ b/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); } diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts b/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts index 8060adfb6..be5df64fa 100644 --- a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts +++ b/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) { diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexVisibilityUpdater.ts b/packages/dflex-dnd/src/LayoutManager/DFlexVisibilityUpdater.ts index 91221aed4..38647ace7 100644 --- a/packages/dflex-dnd/src/LayoutManager/DFlexVisibilityUpdater.ts +++ b/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, diff --git a/packages/dflex-dnd/test/__snapshots__/layoutManager.test.tsx.snap b/packages/dflex-dnd/test/__snapshots__/layoutManager.test.tsx.snap index c3209ac51..94fe36e59 100644 --- a/packages/dflex-dnd/test/__snapshots__/layoutManager.test.tsx.snap +++ b/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 { diff --git a/packages/dflex-dom-gen/src/DFlexDOMKeysGenerator.ts b/packages/dflex-dom-gen/src/DFlexDOMKeysGenerator.ts index fa2cd9b59..03c336825 100644 --- a/packages/dflex-dom-gen/src/DFlexDOMKeysGenerator.ts +++ b/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 diff --git a/packages/dflex-dom-gen/src/DFlexDOMKeysManager.ts b/packages/dflex-dom-gen/src/DFlexDOMKeysManager.ts index 54a19a2de..c352b2f60 100644 --- a/packages/dflex-dom-gen/src/DFlexDOMKeysManager.ts +++ b/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(arr: T[], element: T): void { +function addToUniqueArray(arr: T[], element: T): T[] { if (!arr.some((existingElement) => existingElement === element)) { arr.push(element); } + + return arr; } class DOMKeysManager { @@ -71,23 +73,23 @@ 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( @@ -95,7 +97,15 @@ class DOMKeysManager { 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); diff --git a/packages/dflex-dom-gen/src/index.ts b/packages/dflex-dom-gen/src/index.ts index e9417f6da..54e836adc 100644 --- a/packages/dflex-dom-gen/src/index.ts +++ b/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; diff --git a/packages/dflex-store/src/DFlexBaseStore.ts b/packages/dflex-store/src/DFlexBaseStore.ts index 507378405..fe9dbb9d0 100644 --- a/packages/dflex-store/src/DFlexBaseStore.ts +++ b/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); }