fix: fix flash of single, group toggling #760

daybrush · Oct 17, 2022 · 5578030 · 5578030
1 parent 352073c
commit 5578030
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 9 deletions.
diff --git a/packages/moveable/test/manual/updateSelecgtors2.html b/packages/moveable/test/manual/updateSelecgtors2.html
@@ -0,0 +1,59 @@
+<body>
+    <div class="target1 box"></div>
+    <div class="target2 box"></div>
+    <button id="btn1">selectFirst</button>
+    <button id="btn2">selectSecond</button>
+    <button id="btn3">clearSelect</button>
+</body>
+<style>
+    body {
+        background-color: black;
+    }
+
+    .target1,
+    .target2 {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        background: #f55;
+        border: 1px solid #333;
+    }
+
+    .target2 {
+        left: 500px;
+        top: 200px;
+    }
+
+    .target1 {
+        left: 300px;
+        top: 100px;
+    }
+</style>
+<script src="../../dist/moveable.js"></script>
+<script>
+    const moveable = new Moveable(document.body, {
+        draggable: true,
+        target: ".target",
+        resizable: true
+    }).on("drag", (e) => {
+        e.target.style.transform = e.transform;
+    });
+
+    document.querySelector("#btn1").addEventListener("click", (e) => {
+        document.querySelector(".target1").classList.add("target");
+        moveable.updateSelectors();
+    });
+    document.querySelector("#btn2").addEventListener("click", (e) => {
+        document.querySelector(".target1").classList.remove("target");
+        moveable.updateSelectors();
+        document.querySelector(".target1").classList.add("target");
+        document.querySelector(".target2").classList.add("target");
+        moveable.updateSelectors();
+    });
+    document.querySelector("#btn3").addEventListener("click", (e) => {
+        document.querySelectorAll(".target").forEach((item) => {
+            item.classList.remove("target");
+        });
+        moveable.updateSelectors();
+    });
+</script>
diff --git a/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts b/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts
@@ -1,4 +1,4 @@
 // auto
 // eslint-disable-next-line max-len
-export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTarget","container","portalContainer","rootContainer","useResizeObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","getScrollPosition","padding","origin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","defaultGroupRotate","defaultGroupOrigin","groupable","targetGroups","hideChildMoveableDefaultLines","individualGroupable","clickable","dragArea","passDragArea"] = ["target","dragTarget","container","portalContainer","rootContainer","useResizeObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","getScrollPosition","padding","origin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","defaultGroupRotate","defaultGroupOrigin","groupable","targetGroups","hideChildMoveableDefaultLines","individualGroupable","clickable","dragArea","passDragArea"];
+export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTarget","container","portalContainer","rootContainer","useResizeObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","getScrollPosition","padding","origin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","targetGroups","hideChildMoveableDefaultLines","individualGroupable","clickable","dragArea","passDragArea"] = ["target","dragTarget","container","portalContainer","rootContainer","useResizeObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","getScrollPosition","padding","origin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","targetGroups","hideChildMoveableDefaultLines","individualGroupable","clickable","dragArea","passDragArea"];
 export const ANGULAR_MOVEABLE_OUTPUTS: ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","snap","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"] = ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","snap","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"];
diff --git a/packages/react-moveable/src/react-moveable/InitialMoveable.tsx b/packages/react-moveable/src/react-moveable/InitialMoveable.tsx
@@ -7,7 +7,7 @@ import {
 import MoveableManager from "./MoveableManager";
 import MoveableGroup from "./MoveableGroup";
 import { ref, withMethods, prefixCSS } from "framework-utils";
-import { getKeys, IObject, isArray, isString } from "@daybrush/utils";
+import { find, getKeys, IObject, isArray, isString } from "@daybrush/utils";
 import { MOVEABLE_METHODS, PREFIX, MOVEABLE_CSS } from "./consts";
 import Default from "./ables/Default";
 import Groupable from "./ables/Groupable";
@@ -151,6 +151,11 @@ export class InitialMoveable<T = {}>
         };
 
         this._elementTargets = elementTargets;
+
+        let firstRenderState: MoveableManagerState | null = null;
+        const prevMoveable = this.moveable;
+
+
         if (isGroup) {
             if (props.individualGroupable) {
                 return <MoveableIndividualGroup key="individual-group" ref={ref(this, "moveable")}
@@ -161,15 +166,12 @@ export class InitialMoveable<T = {}>
             }
             const targetGroups = getTargetGroups(refTargets, this.selectorMap);
 
-            let firstRenderState: MoveableManagerState | null = null;
-            const prevMoveable = this.moveable;
-
             // manager
             if (prevMoveable && !prevMoveable.props.groupable && !(prevMoveable.props as any).individualGroupable) {
                 const target = prevMoveable.props.target!;
 
                 if (target && elementTargets.indexOf(target) > -1) {
-                    firstRenderState = {...prevMoveable.state};
+                    firstRenderState = { ...prevMoveable.state };
                 }
             }
 
@@ -181,9 +183,21 @@ export class InitialMoveable<T = {}>
                 firstRenderState={firstRenderState}
             />;
         } else {
+            const target = elementTargets[0];
+            // manager
+            if (prevMoveable && (prevMoveable.props.groupable || (prevMoveable.props as any).individualGroupable)) {
+                const moveables = (prevMoveable as MoveableGroup | MoveableIndividualGroup).moveables || [];
+                const prevTargetMoveable = find(moveables, mv => mv.props.target === target);
+
+                if (prevTargetMoveable) {
+                    firstRenderState = { ...prevTargetMoveable.state };
+                }
+            }
+
             return <MoveableManager<any> key="single" ref={ref(this, "moveable")}
                 {...nextProps}
-                target={elementTargets[0]} />;
+                target={target}
+                firstRenderState={firstRenderState} />;
         }
     }
     public componentDidMount() {

diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -180,12 +180,13 @@ export default class MoveableManager<T = {}>
         this._updateTargets();
         this._updateNativeEvents();
         this._updateEvents();
+        this.updateCheckInput();
+        this._updateObserver(this.props);
 
         if (!container && !parentMoveable && !wrapperMoveable) {
             this.updateRect("", false, true);
+            this.forceUpdate();
         }
-        this.updateCheckInput();
-        this._updateObserver(this.props);
     }
     public componentDidUpdate(prevProps: any) {
         this._checkUpdateRootContainer();