fix: occur unset for idle state #917

daybrush · May 16, 2023 · a9d1de8 · a9d1de8
1 parent 875fc19
commit a9d1de8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/packages/react-moveable/src/MoveableGroup.tsx b/packages/react-moveable/src/MoveableGroup.tsx
@@ -437,8 +437,8 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
         const isTargetChanged = added.length || removed.length;
 
         if (isTargetChanged || prevTarget !== nextTarget) {
-            unset(this, "targetGesto");
-            unset(this, "controlGesto");
+            unset(this, false);
+            unset(this, true);
             this.updateState({ gestos: {} });
         }
         if (prevTarget !== nextTarget) {

diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -244,8 +244,8 @@ export default class MoveableManager<T = {}>
         if (viewContainer) {
             this._changeAbleViewClassNames([]);
         }
-        unset(this, "targetGesto");
-        unset(this, "controlGesto");
+        unset(this, false);
+        unset(this, true);
 
         const events = this.events;
         for (const name in events) {
@@ -924,11 +924,11 @@ export default class MoveableManager<T = {}>
             || this._isTargetChanged(true);
 
         if (isUnset) {
-            unset(this, "targetGesto");
+            unset(this, false);
             this.updateState({ gestos: {} });
         }
         if (!hasControlAble) {
-            unset(this, "controlGesto");
+            unset(this, true);
         }
 
         if (target && hasTargetAble && !this.targetGesto) {

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -989,9 +989,17 @@ export function roundSign(num: number) {
     return Math.round(num % 1 === -0.5 ? num - 1 : num);
 }
 
-export function unset(self: any, name: string) {
-    self[name]?.unset();
-    self[name] = null;
+export function unset(self: MoveableManagerInterface, isControl: boolean) {
+    const gestoName = isControl ? "controlGesto" : "targetGesto";
+    const gesto = self[gestoName];
+
+    if (gesto?.isIdle() === false) {
+        self[isControl ? "controlAbles" : "targetAbles"].forEach(able => {
+            able.unset && able.unset(self);
+        });
+    }
+    gesto?.unset();
+    self[gestoName] = null as any;
 }
 
 export function fillCSSObject(style: Record<string, any>, resolvedEvent?: any): CSSObject {

diff --git a/packages/react-moveable/stories/99-Tests/ReactChangeTargetsOnClickApp.tsx b/packages/react-moveable/stories/99-Tests/ReactChangeTargetsOnClickApp.tsx
@@ -20,12 +20,14 @@ export default function App() {
                 ref={moveableRef}
                 draggable={true}
                 target={targets}
-                onClickGroup={() => {
-                    if (targets.length === 2) {
-                        setTargets([".cube1", ".cube2", ".cube3"]);
-                    } else if (targets.length === 3) {
-                        setTargets([".cube1", ".cube2", ".cube3", ".cube4"]);
-                    }
+                onDragGroupStart={() => {
+                    requestAnimationFrame(() => {
+                        if (targets.length === 2) {
+                            setTargets([".cube1", ".cube2", ".cube3"]);
+                        } else if (targets.length === 3) {
+                            setTargets([".cube1", ".cube2", ".cube3", ".cube4"]);
+                        }
+                    });
                 }}
                 onDrag={e => {
                     e.target.style.cssText += e.cssText;