feat: add linePadding prop #837

daybrush · Jan 29, 2023 · af818ab · af818ab
1 parent a6dfc21
commit af818ab
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 9 deletions.
diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -55,6 +55,7 @@ export default class MoveableManager<T = {}>
         parentPosition: null,
         portalContainer: null,
         useResizeObserver: false,
+        linePadding: 0,
         ables: [],
         pinchThreshold: 20,
         dragArea: false,
@@ -132,6 +133,7 @@ export default class MoveableManager<T = {}>
             cssStyled: ControlBoxElement,
             portalContainer,
             groupable,
+            linePadding,
         } = props;
 
         this._checkUpdateRootContainer();
@@ -165,6 +167,17 @@ export default class MoveableManager<T = {}>
             translate[0] += offsetDelta[0];
             translate[1] += offsetDelta[1];
         }
+        const style: Record<string, any> = {
+            "position": hasFixed ? "fixed" : "absolute",
+            "display": isDisplay ? "block" : "none",
+            "visibility": isVisible ? "visible" : "hidden",
+            "transform": `translate3d(${translate[0]}px, ${translate[1]}px, ${translateZ})`,
+            "--zoom": zoom,
+            "--zoompx": `${zoom}px`,
+        };
+        if (linePadding) {
+            style["--moveable-line-padding"] = linePadding;
+        }
         return (
             <ControlBoxElement
                 cspNonce={cspNonce}
@@ -173,14 +186,7 @@ export default class MoveableManager<T = {}>
                 {...ableAttributes}
                 onClick={this._onPreventClick}
                 portalContainer={portalContainer}
-                style={{
-                    "position": hasFixed ? "fixed" : "absolute",
-                    "display": isDisplay ? "block" : "none",
-                    "visibility": isVisible ? "visible" : "hidden",
-                    "transform": `translate3d(${translate[0]}px, ${translate[1]}px, ${translateZ})`,
-                    "--zoom": zoom,
-                    "--zoompx": `${zoom}px`,
-                }}>
+                style={style}>
                 {this.renderAbles()}
                 {this._renderLines()}
             </ControlBoxElement>

diff --git a/packages/react-moveable/src/ables/Default.ts b/packages/react-moveable/src/ables/Default.ts
@@ -28,6 +28,7 @@ export default {
         persistData: Object,
         useAccuratePosition: Boolean,
         firstRenderState: Object,
+        linePadding: Boolean,
     } as const,
     events: {
         onChangeTargets: "changeTargets",

diff --git a/packages/react-moveable/src/consts.ts b/packages/react-moveable/src/consts.ts
@@ -134,6 +134,15 @@ ${[0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165].map(degree => `
 	${getCursorCSS(degree)}
 }
 `).join("\n")}
+
+.line.direction:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: calc(var(--moveable-line-padding, 0) * 1px);
+    bottom: 0;
+    left: 0;
+}
 .group {
     z-index: -1;
 }

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -52,6 +52,7 @@ export interface MoveablePosition {
 /**
  * @typedef
  * @memberof Moveable
+ * @options
  */
 export interface DefaultOptions {
     /**
@@ -182,6 +183,12 @@ export interface DefaultOptions {
      * @default false
      */
     useAccuratePosition?: boolean;
+    /**
+     * By adding padding to the line, you can increase the area of the line that can be clicked and dragged.
+     * @since 0.43.0
+     * @default 0
+     */
+    linePadding?: number;
     /**
      * @private
      * single => group로 변환과정에 도형 유지를 위한 첫 렌더링 state

diff --git a/packages/react-moveable/stories/4-Options/0-Default.stories.tsx b/packages/react-moveable/stories/4-Options/0-Default.stories.tsx
@@ -1,4 +1,5 @@
 
+import { makeArgType, makeOptionLink } from "../utils";
 import { makeStoryGroup } from "../utils/story";
 
 
@@ -21,6 +22,20 @@ group.add("useResizeObserver (Individual Group)", {
 });
 
 
+group.add("linePadding", {
+    app: require("./ReactLinePaddingApp").default,
+    path: require.resolve("./ReactLinePaddingApp"),
+    argsTypes: {
+        linePadding: makeArgType({
+            type: "number",
+            description: makeOptionLink("Moveable", "DefaultOptions", "linePadding"),
+            defaultValue: 0,
+            value: 10,
+        }),
+    },
+});
+
+
 group.add("checkInput", {
     app: require("./ReactCheckInputApp").default,
     path: require.resolve("./ReactCheckInputApp"),

diff --git a/packages/react-moveable/stories/4-Options/ReactLinePaddingApp.tsx b/packages/react-moveable/stories/4-Options/ReactLinePaddingApp.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    return <div className="container">
+        <div className="target"></div>
+        <Moveable
+            target={".target"}
+            draggable={true}
+            resizable={true}
+            linePadding={props.linePadding}
+            edge={true}
+            onRender={e => {
+                e.target.style.cssText += e.cssText;
+            }}
+        />
+    </div>;
+}
diff --git a/packages/react-moveable/stories/utils.ts b/packages/react-moveable/stories/utils.ts
@@ -9,6 +9,7 @@ export function makeArgType(param: {
     type: "array" | "text" | "radio" | "object" | "number" | "boolean" | "inline-radio";
     description?: string;
     defaultValue: any;
+    value?: any;
     category?: string;
     control?: Record<string, any>;
     table?: Record<string, any>;
@@ -22,11 +23,12 @@ export function makeArgType(param: {
             ...(param.table || {}),
         },
         description: param.description,
+        value: "value" in param ? param.value : param.defaultValue,
     };
 }
 export function makeArgs(argTypes: any) {
     return Object.keys(argTypes).reduce((prev, cur) => {
-        prev[cur] = argTypes[cur].table.defaultValue.summary;
+        prev[cur] = argTypes[cur].value;
 
         return prev;
     }, {} as Record<string, any>);