feat: support pos guideline info #707

daybrush · Jul 25, 2022 · 1cd1b81 · 1cd1b81
1 parent e9b5864
commit 1cd1b81
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 12 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/snappable/render.tsx b/packages/react-moveable/src/react-moveable/ables/snappable/render.tsx
@@ -93,7 +93,7 @@ export function renderGuidelines(
         }
         return true;
     }).map((guideline, i) => {
-        const { pos, size, element } = guideline;
+        const { pos, size, element, className } = guideline;
 
         const renderPos = [
             -targetPos[0] + pos[0],
@@ -103,7 +103,7 @@ export function renderGuidelines(
         return renderInnerGuideline(
             {
                 key: `${type}-default-guideline-${i}`,
-                classNames: element ? [prefix("bold")] : [],
+                classNames: element ? [prefix("bold"), className] : [className],
                 direction: type,
                 posValue: renderPos,
                 sizeValue: size,

diff --git a/packages/react-moveable/src/react-moveable/ables/snappable/utils.ts b/packages/react-moveable/src/react-moveable/ables/snappable/utils.ts
@@ -3,7 +3,7 @@ import { isObject, throttle } from "@daybrush/utils";
 import { diff } from "@egjs/children-differ";
 import { minus } from "@scena/matrix";
 import { getMinMaxs } from "overlap-area";
-import { SnapElementRect } from "src/react-moveable";
+import { PosGuideline, SnapElementRect } from "src/react-moveable";
 import {
     ElementGuidelineValue, MoveableClientRect, MoveableManagerInterface,
     SnapDirectionPoses,
@@ -234,8 +234,8 @@ export function getGapGuidelines(
     return gapGuidelines;
 }
 export function getDefaultGuidelines(
-    horizontalGuidelines: number[] | false,
-    verticalGuidelines: number[] | false,
+    horizontalGuidelines: Array<PosGuideline | number> | false,
+    verticalGuidelines: Array<PosGuideline | number> | false,
     width: number,
     height: number,
     clientLeft = 0,
@@ -252,20 +252,26 @@ export function getDefaultGuidelines(
     const snapWidth = width! + snapOffsetRight - snapOffsetLeft;
     const snapHeight = height! + snapOffsetBottom - snapOffsetTop;
 
-    horizontalGuidelines && horizontalGuidelines!.forEach(pos => {
+    horizontalGuidelines && horizontalGuidelines!.forEach(posInfo => {
+        const nextPosInfo = isObject(posInfo) ? posInfo : { pos: posInfo };
+
         guidelines.push({
             type: "horizontal", pos: [
                 snapOffsetLeft,
-                throttle(pos - clientTop + snapOffsetTop, 0.1),
+                throttle(nextPosInfo.pos - clientTop + snapOffsetTop, 0.1),
             ], size: snapWidth,
+            className: nextPosInfo.className,
         });
     });
-    verticalGuidelines && verticalGuidelines!.forEach(pos => {
+    verticalGuidelines && verticalGuidelines!.forEach(posInfo => {
+        const nextPosInfo = isObject(posInfo) ? posInfo : { pos: posInfo };
+
         guidelines.push({
             type: "vertical", pos: [
-                throttle(pos - clientLeft + snapOffsetLeft, 0.1),
+                throttle(nextPosInfo.pos - clientLeft + snapOffsetLeft, 0.1),
                 snapOffsetTop,
             ], size: snapHeight,
+            className: nextPosInfo.className,
         });
     });
     return guidelines;

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -2109,12 +2109,12 @@ export interface SnappableOptions {
      * Add guidelines in the horizontal direction.
      * @default []
      */
-    horizontalGuidelines?: number[];
+    horizontalGuidelines?: Array<PosGuideline | number>;
     /**
      * Add guidelines in the vertical direction.
      * @default []
      */
-    verticalGuidelines?: number[];
+    verticalGuidelines?: Array<PosGuideline | number>;
     /**
      * Add guidelines for the element.
      * @default []
@@ -2194,7 +2194,42 @@ export interface ElementGuidelineValue extends SnapDirections {
      */
     refresh?: boolean;
 }
-
+/**
+ * @typedef
+ * @memberof Moveable.Snappable
+ */
+export interface PosGuideline {
+    /**
+     * guideline pos
+     */
+    pos: number;
+    /**
+     * class names to add to guideline
+     * @default ""
+     */
+    className?: string;
+}
+/**
+ * @typedef
+ * @memberof Moveable.Snappable
+ * @extends Moveable.Snappable.SnapDirections
+ */
+export interface ElementGuidelineValue extends SnapDirections {
+    /**
+     * guideline element
+     */
+    element: Element;
+    /**
+     * class names to add to guideline
+     * @default ""
+     */
+    className?: string;
+    /**
+     * Whether to update the element size at every render
+     * @default false
+     */
+    refresh?: boolean;
+}
 export interface SnappableEvents {
     onSnap: OnSnap;
 }

diff --git a/packages/react-moveable/stories/5A-Advanced/5-Snappable/Deafult.stories.tsx b/packages/react-moveable/stories/5A-Advanced/5-Snappable/Deafult.stories.tsx
@@ -0,0 +1,10 @@
+import { makeStoryGroup } from "../../utils/story";
+
+
+const group = makeStoryGroup("Advanced Snappable", module);
+
+
+group.add("Guidelines with custom styles", {
+    app: require("./ReactCustomGuidelinesApp").default,
+    text: require("!!raw-loader!./ReactCustomGuidelinesApp").default,
+});
diff --git a/packages/react-moveable/stories/5A-Advanced/5-Snappable/ReactCustomGuidelinesApp.tsx b/packages/react-moveable/stories/5A-Advanced/5-Snappable/ReactCustomGuidelinesApp.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    const moveableRef = React.useRef<Moveable>(null);
+
+    return (
+        <div className="root">
+            <style dangerouslySetInnerHTML={{ __html: `.red { background: red!important;}` }} />
+            <div className="container" style={{
+                width: "500px",
+                height: "500px",
+                border: "1px solid #ccc",
+            }}>
+                <div className="target" style={{
+                    width: "200px",
+                    height: "150px",
+                }}>Target</div>
+                <Moveable
+                    ref={moveableRef}
+                    target={".target"}
+                    draggable={true}
+                    snappable={true}
+                    verticalGuidelines={[
+                        0,
+                        100,
+                        {
+                            pos: 200,
+                            className: "red",
+                        },
+                    ]}
+                    onDrag={e => {
+                        e.target.style.transform = e.transform;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}