fix: fix changing snapContainer #773

daybrush · Oct 30, 2022 · c3ee847 · c3ee847
1 parent 1db881f
commit c3ee847
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/packages/lit-moveable/src/LitMoveable.ts b/packages/lit-moveable/src/LitMoveable.ts
@@ -29,7 +29,6 @@ export class LitMoveable extends LitElement {
                 options[name as any] = this[litName];
             }
         });
-        console.log(options);
 
         this.moveable = new VanillaMoveable(this, {
             portalContainer: this,

diff --git a/packages/react-moveable/src/react-moveable/ables/Snappable.tsx b/packages/react-moveable/src/react-moveable/ables/Snappable.tsx
@@ -75,16 +75,16 @@ export interface SnapPoses {
     horizontal: number[];
 }
 
-export function snapStart(
+export function checkSnapInfo(
     moveable: MoveableManagerInterface<SnappableProps, SnappableState>
 ) {
     const state = moveable.state;
+    const container = state.container;
+    const snapContainer = moveable.props.snapContainer || container!;
 
-    if (state.guidelines && state.guidelines.length) {
-        return;
+    if (state.snapContainer === snapContainer && state.guidelines && state.guidelines.length) {
+        return false;
     }
-    const container = moveable.state.container;
-    const snapContainer = moveable.props.snapContainer || container!;
 
     const containerClientRect = state.containerClientRect;
     const snapOffset = {
@@ -108,22 +108,18 @@ export function snapStart(
                 snapContainerRect.bottom - containerClientRect.bottom,
             ]);
 
-            console.log(
-                snapContainerRect, containerClientRect,
-                offset2[1] - offset1[1],
-                containerClientRect.overflow,
-                containerClientRect.overflow ? containerClientRect.scrollHeight! : containerClientRect.clientHeight!
-            );
             snapOffset.left = throttle(offset1[0], 0.00001);
             snapOffset.top = throttle(offset1[1], 0.00001);
             snapOffset.right = throttle(offset2[0], 0.00001);
             snapOffset.bottom = throttle(offset2[1], 0.00001);
         }
     }
 
+    state.snapContainer = snapContainer;
     state.snapOffset = snapOffset;
     state.guidelines = getTotalGuidelines(moveable);
     state.enableSnap = true;
+    return true;
 }
 
 function getNextFixedPoses(
@@ -795,13 +791,15 @@ export default {
             snap: true,
             center: true,
         };
-        snapStart(moveable);
+        checkSnapInfo(moveable);
     },
     drag(
         moveable: MoveableManagerInterface<SnappableProps, SnappableState>
     ) {
         const state = moveable.state;
-        state.guidelines = getTotalGuidelines(moveable);
+        if (!checkSnapInfo(moveable)) {
+            state.guidelines = getTotalGuidelines(moveable);
+        }
     },
     pinchStart(
         moveable: MoveableManagerInterface<SnappableProps, SnappableState>
@@ -825,7 +823,7 @@ export default {
         moveable: MoveableManagerInterface<SnappableProps, SnappableState>
     ) {
         moveable.state.snapRenderInfo = null;
-        snapStart(moveable);
+        checkSnapInfo(moveable);
     },
     dragControl(
         moveable: MoveableManagerInterface<SnappableProps, SnappableState>
@@ -854,7 +852,7 @@ export default {
         moveable: MoveableGroupInterface<SnappableProps, SnappableState>
     ) {
         moveable.state.snapRenderInfo = null;
-        snapStart(moveable);
+        checkSnapInfo(moveable);
     },
     dragGroupControl(
         moveable: MoveableManagerInterface<SnappableProps, SnappableState>

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -2458,6 +2458,7 @@ export interface SnappableState {
     staticGuidelines: SnapGuideline[];
     elementRects: SnapElementRect[];
     guidelines: SnapGuideline[];
+    snapContainer: MoveableRefType<HTMLElement | SVGElement>;
     snapOffset: { left: number, top: number, bottom: number, right: number }
     snapRenderInfo?: SnapRenderInfo | null;
     enableSnap: boolean;

diff --git a/packages/react-moveable/stories/99-Tests/ReactChangingSnapContainerApp.tsx b/packages/react-moveable/stories/99-Tests/ReactChangingSnapContainerApp.tsx
@@ -2,6 +2,11 @@ import * as React from "react";
 import Moveable from "@/react-moveable";
 import "./snap.css";
 export default function App(props: Record<string, any>) {
+    const [snapContainer, setSnapContainer] = React.useState<HTMLElement | string>(".snapGrid");
+    const onMoustEnter = React.useCallback((e: MouseEvent) => {
+        console.log(e.currentTarget);
+        setSnapContainer(e.currentTarget);
+    }, []);
     return (
         <div className="root" style={{
             position: "relative",
@@ -11,11 +16,23 @@ export default function App(props: Record<string, any>) {
                 target={".target"}
                 draggable={true}
                 snappable={true}
-                elementGuidelines={[document.getElementById("box1")]}
-                verticalGuidelines={[0, 100, 200, 300, 400]}
-                snapContainer={".snapGrid"}
+                horizontalGuidelines={[0, 100, 200, 300]}
+                verticalGuidelines={[0, 100, 200, 300]}
+                snapContainer={snapContainer}
+                onDragStart={() => {
+                    document.querySelectorAll<HTMLElement>(".snapGrid").forEach(grid => {
+                        grid.addEventListener("mouseenter", onMoustEnter);
+                    });
+                }}
                 onDrag={e => {
                     e.target.style.transform = e.transform;
+                    e.target.style.pointerEvents = "none";
+                }}
+                onDragEnd={() => {
+                    e.target.style.pointerEvents = "";
+                    document.querySelectorAll<HTMLElement>(".snapGrid").forEach(grid => {
+                        grid.removeEventListener("mouseenter", onMoustEnter);
+                    });
                 }}
             />
             <div className="container">