fix: fix snap for fixed position #791

Author: daybrush

packages/react-moveable/src/react-moveable/ables/snappable/getTotalGuidelines.ts

@@ -4,7 +4,9 @@ import { minus } from "@scena/matrix";
 import { getMinMaxs } from "overlap-area";
 import {
     MoveableManagerInterface, SnappableProps,
-    SnappableState, SnapGuideline, SnapDirectionPoses, PosGuideline, ElementGuidelineValue, SnapElementRect,
+    SnappableState, SnapGuideline, SnapDirectionPoses,
+    PosGuideline, ElementGuidelineValue,
+    SnapElementRect,
 } from "../../types";
 import { getRect, getAbsolutePosesByState, getRefTarget, calculateInversePosition, roundSign } from "../../utils";
 import {
@@ -15,18 +17,20 @@ import {
 export function getTotalGuidelines(
     moveable: MoveableManagerInterface<SnappableProps, SnappableState>,
 ) {
+    const state = moveable.state;
     const {
-        snapOffset,
-        containerClientRect: {
-            overflow,
-            scrollHeight: containerHeight,
-            scrollWidth: containerWidth,
-            clientHeight: containerClientHeight,
-            clientWidth: containerClientWidth,
-            clientLeft,
-            clientTop,
-        },
-    } = moveable.state;
+        containerClientRect,
+        hasFixed,
+    } = state;
+    const {
+        overflow,
+        scrollHeight: containerHeight,
+        scrollWidth: containerWidth,
+        clientHeight: containerClientHeight,
+        clientWidth: containerClientWidth,
+        clientLeft,
+        clientTop,
+    } = containerClientRect;
     const {
         snapGap = true,
         verticalGuidelines,
@@ -54,6 +58,20 @@ export function getTotalGuidelines(
         clientLeft,
         clientTop,
     ));
+    const snapOffset = {
+        ...(state.snapOffset || {
+            left: 0,
+            top: 0,
+            bottom: 0,
+            right: 0,
+        }),
+    };
+
+
+    if (hasFixed) {
+        snapOffset.left += containerClientRect.left;
+        snapOffset.top += containerClientRect.top;
+    }
 
     totalGuidelines.push(...getDefaultGuidelines(
         horizontalGuidelines || false,
@@ -398,21 +416,25 @@ export function getDefaultGuidelines(
         const nextPosInfo = isObject(posInfo) ? posInfo : { pos: posInfo };
 
         guidelines.push({
-            type: "horizontal", pos: [
+            type: "horizontal",
+            pos: [
                 snapOffsetLeft,
                 throttle(nextPosInfo.pos - clientTop + snapOffsetTop, 0.1),
-            ], size: snapWidth,
+            ],
+            size: snapWidth,
             className: nextPosInfo.className,
         });
     });
     verticalGuidelines && verticalGuidelines!.forEach(posInfo => {
         const nextPosInfo = isObject(posInfo) ? posInfo : { pos: posInfo };
 
         guidelines.push({
-            type: "vertical", pos: [
+            type: "vertical",
+            pos: [
                 throttle(nextPosInfo.pos - clientLeft + snapOffsetLeft, 0.1),
                 snapOffsetTop,
-            ], size: snapHeight,
+            ],
+            size: snapHeight,
             className: nextPosInfo.className,
         });
     });

packages/react-moveable/src/react-moveable/types.ts

@@ -2738,7 +2738,7 @@ export interface OnCustomDrag extends GestoTypes.Position {
  * @memberof Moveable
  */
 export type PersistRectData = Omit<Partial<RectInfo>, "children"> & {
-    children?: Partial<RectInfo>;
+    children?: Array<Partial<RectInfo>>;
 };
 
 

packages/react-moveable/src/react-moveable/utils/persist.ts

@@ -15,7 +15,7 @@ export function getPersistState(rect: PersistRectData): Partial<MoveableManagerS
     }
     const minPos = getMinMaxs([pos1!, pos2!, pos3!, pos4!]);
     const posDelta = [minPos.minX, minPos.minY];
-    const origin = minus(rect.origin, posDelta);
+    const origin = minus(rect.origin!, posDelta);
 
     pos1 = minus(pos1, posDelta);
     pos2 = minus(pos2, posDelta);

packages/react-moveable/stories/9-Scrolling/apps/ScrollableApp.tsx

@@ -29,7 +29,7 @@ export default function App() {
                 <div className="target" ref={targetRef}>Target</div>
                 <Moveable
                     scrollable={true}
-                    scrollContainer={() => viewerRef.current!.getElement()}
+                    scrollContainer={() => viewerRef.current!.getContainer()}
                     scrollThreshold={20}
                     getScrollPosition={() => {
                         return [

packages/react-moveable/stories/99-Tests/Deafult.stories.tsx

@@ -85,3 +85,10 @@ group.add("Test Changing Snap Container", {
     app: require("./ReactChangingSnapContainerApp").default,
     path: require.resolve("./ReactChangingSnapContainerApp"),
 });
+
+
+
+group.add("Test Snap with position: fixed", {
+    app: require("./ReactFixedSnapApp").default,
+    path: require.resolve("./ReactFixedSnapApp"),
+});

packages/react-moveable/stories/99-Tests/ReactFixedSnapApp.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    return (
+        <div className="root">
+            <div className="container" style={{
+                height: "900px",
+            }}>
+                <div className="target element1" style={{
+                    width: "100px",
+                    height: "100px",
+                    left: "0px",
+                    top: "120px",
+                }}>Element1</div>
+                <div className="target element2" style={{
+                    width: "100px",
+                    height: "100px",
+                    left: "400px",
+                    top: "120px",
+                }}>Element2</div>
+                <div className="target element3" style={{
+                    width: "300px",
+                    height: "100px",
+                    top: "400px",
+                    left: "50px",
+                }}>Element3</div>
+                <div className="target target1" style={{
+                    position: "fixed",
+                    width: "150px",
+                    height: "150px",
+                }}>Target</div>
+                <Moveable
+                    target=".target1"
+                    draggable={true}
+                    scalable={true}
+                    rotatable={true}
+                    snappable={true}
+                    // verticalGuidelines={[0, 100, 200]}
+                    horizontalGuidelines={[0, 100, 200]}
+                    elementGuidelines={[{
+                        element: ".element1",
+                        refresh: true,
+                    }, ".element2", ".element3"]}
+                    onRender={e => {
+                        // console.log(e.moveable.state.guidelines);
+                        e.target.style.cssText += e.cssText;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}