wip

dflex-js · Sep 2, 2023 · 1eb9f82 · 1eb9f82
1 parent d931242
commit 1eb9f82
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts b/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts
@@ -145,7 +145,7 @@ class DFlexDnDStore extends DFlexBaseStore {
 
   isUpdating: boolean;
 
-  isComposing: boolean;
+  isProcessingRegistration: boolean;
 
   deferred: Deferred;
 
@@ -167,7 +167,7 @@ class DFlexDnDStore extends DFlexBaseStore {
     this.scrolls = new Map();
     this.unifiedContainerDimensions = {};
     this._terminatedDOMiDs = new Set();
-    [this._unregisterSchedule] = DFlexCreateTimeout(0);
+    [this._unregisterSchedule] = DFlexCreateTimeout(10);
 
     // @ts-ignore- `null` until we have element to drag.
     this.migration = null;
@@ -179,7 +179,8 @@ class DFlexDnDStore extends DFlexBaseStore {
     // Observers.
     this.mutationObserverMap = new Map();
 
-    this.isComposing = true;
+    this.isProcessingRegistration = false;
+
     this.isUpdating = false;
     this.deferred = [];
     this.updatesQueue = [];
@@ -199,7 +200,10 @@ class DFlexDnDStore extends DFlexBaseStore {
   }
 
   isLayoutAvailable(): boolean {
-    return !(this.isComposing || hasMutationsInProgress()) && this.isIdle();
+    return (
+      !(this.isProcessingRegistration || hasMutationsInProgress()) &&
+      this.isIdle()
+    );
   }
 
   private _initWhenRegister() {
@@ -364,7 +368,7 @@ class DFlexDnDStore extends DFlexBaseStore {
       }
     });
 
-    this.isComposing = false;
+    this.isProcessingRegistration = false;
 
     this.endRegistration();
 
@@ -385,6 +389,8 @@ class DFlexDnDStore extends DFlexBaseStore {
       this._isInitialized = true;
     }
 
+    this.isProcessingRegistration = true;
+
     const { id, readonly = false, depth = 0, CSSTransform = null } = elm;
 
     // DFlex optimizes registration so that when one sibling is registered, all
@@ -447,11 +453,16 @@ class DFlexDnDStore extends DFlexBaseStore {
       return;
     }
 
+    if (this.isProcessingRegistration) {
+      return;
+    }
+
     this._terminatedDOMiDs.add(id);
 
-    this._unregisterSchedule(() => {
-      // Abort. Leave it to the observer.
+    const performCleanup = () => {
+      // Abort & clear pending ids. Leave it to the observer.
       if (hasMutationsInProgress()) {
+        this._terminatedDOMiDs.clear();
         if (__DEV__) {
           if (featureFlags.enableRegisterDebugger) {
             // eslint-disable-next-line no-console
@@ -466,7 +477,11 @@ class DFlexDnDStore extends DFlexBaseStore {
 
       DFlexIDGarbageCollector(this, this._terminatedDOMiDs);
       this._terminatedDOMiDs.clear();
-    }, true);
+    };
+
+    // Don't execute immediately to prevent race condition with mutation observer.
+    // Instead reschedule and then check observer flag.
+    this._unregisterSchedule(performCleanup, true);
   }
 
   private _updateContainerRect(
@@ -599,7 +614,7 @@ class DFlexDnDStore extends DFlexBaseStore {
       return;
     }
 
-    this.isComposing = true;
+    this.isProcessingRegistration = true;
 
     const refreshAllBranchElements =
       this._refreshAllElmBranchWhileReconcile === undefined
@@ -646,7 +661,7 @@ class DFlexDnDStore extends DFlexBaseStore {
         this.migration.clear();
 
         this._refreshAllElmBranchWhileReconcile = undefined;
-        this.isComposing = false;
+        this.isProcessingRegistration = false;
       },
     });
   }

diff --git a/packages/dflex-store/src/DFlexBaseStore.ts b/packages/dflex-store/src/DFlexBaseStore.ts
@@ -558,7 +558,8 @@ class DFlexBaseStore {
 
       if (__DEV__) {
         if (!isElmRegistered) {
-          throw new Error(
+          // eslint-disable-next-line no-console
+          console.warn(
             `register: Element ${id} has not been registered. Element should be registered when detecting its parent.`
           );
         }

diff --git a/packages/dflex-utils/src/collections/index.ts b/packages/dflex-utils/src/collections/index.ts
@@ -3,6 +3,7 @@ export { default as warnOnce } from "./warnOnce";
 export { default as assertElmPos } from "./assertElmPos";
 export { default as getAnimationOptions } from "./getAnimationOptions";
 export { default as noop } from "./utils";
+// export { default as waitForCondition } from "./waitForCondition";
 
 export {
   getDimensionTypeByAxis,

diff --git a/packages/dflex-utils/src/collections/waitForCondition.ts b/packages/dflex-utils/src/collections/waitForCondition.ts
@@ -0,0 +1,32 @@
+import { noop } from ".";
+
+let isWaiting = false;
+
+function waitForCondition(
+  condition: () => boolean,
+  task: () => void,
+  cb: () => void = noop
+) {
+  if (isWaiting) {
+    // If already waiting, ignore this call.
+    return;
+  }
+
+  isWaiting = true;
+
+  function checkCondition() {
+    if (condition()) {
+      task();
+      cb();
+      isWaiting = false;
+
+      return;
+    }
+
+    setTimeout(checkCondition, 0);
+  }
+
+  checkCondition();
+}
+
+export default waitForCondition;
diff --git a/packages/dflex-utils/src/index.ts b/packages/dflex-utils/src/index.ts
@@ -41,6 +41,7 @@ export {
   getEndingPointByAxis,
   getOppositeAxis,
   getAnimationOptions,
+  // waitForCondition,
 } from "./collections";
 
 export {