feat: add dragTargetSelf prop #972

daybrush · Jul 8, 2023 · 4537dfe · 4537dfe
1 parent c9db51f
commit 4537dfe
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 15 deletions.
diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -47,6 +47,7 @@ import { setStoreCache } from "./store/Store";
 export default class MoveableManager<T = {}>
     extends React.PureComponent<MoveableManagerProps<T>, MoveableManagerState> {
     public static defaultProps: Required<MoveableManagerProps> = {
+        dragTargetSelf: false,
         target: null,
         dragTarget: null,
         container: null,

diff --git a/packages/react-moveable/src/ables/Default.ts b/packages/react-moveable/src/ables/Default.ts
@@ -2,6 +2,7 @@ export default {
     name: "",
     props: [
         "target",
+        "dragTargetSelf",
         "dragTarget",
         "dragContainer",
         "container",

diff --git a/packages/react-moveable/src/gesto/getAbleGesto.ts b/packages/react-moveable/src/gesto/getAbleGesto.ts
@@ -227,14 +227,21 @@ export function getTargetAbleGesto(
 ) {
     const controlBox = moveable.controlBox;
     const targets: Array<HTMLElement | SVGElement> = [];
-    const dragTarget = moveable.props.dragTarget;
+    const props = moveable.props;
+    const dragArea =  props.dragArea;
+    const target = moveable.state.target;
+    const dragTarget = props.dragTarget;
 
     targets.push(controlBox);
 
-    if (!moveable.props.dragArea || dragTarget) {
+    if (!dragArea || dragTarget) {
         targets.push(moveableTarget);
     }
 
+    if (!dragArea && dragTarget && target && moveableTarget !== target && props.dragTargetSelf) {
+        targets.push(target);
+    }
+
     return getAbleGesto(moveable, targets, "targetAbles", eventAffix, {
         dragStart: checkMoveableTarget(moveable),
         pinchStart: checkMoveableTarget(moveable),

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -61,10 +61,16 @@ export interface DefaultOptions {
      */
     target?: SVGElement | HTMLElement | null;
     /**
-     * The target(s) to drag Moveable target(s)
+     * The external target(s) to drag Moveable target(s)
      * @default target
      */
     dragTarget?: MoveableRefType | null;
+    /**
+     * If dragTarget is set directly, taget itself cannot be dragged.
+     * Whether to drag the target as well.
+     * @default false
+     */
+    dragTargetSelf?: boolean;
     /**
      * Container area where drag works
      * @default window

diff --git a/packages/react-moveable/stories/4-Options/0-Default.stories.tsx b/packages/react-moveable/stories/4-Options/0-Default.stories.tsx
@@ -151,3 +151,10 @@ export const OptionsDragTarget = add("other dragTarget", {
     app: require("./ReactDragTargetApp").default,
     path: require.resolve("./ReactDragTargetApp"),
 });
+
+
+
+export const OptionsDragTargetSelf = add("dragTargetSelf with other dragTarget", {
+    app: require("./ReactDragTargetSelfApp").default,
+    path: require.resolve("./ReactDragTargetSelfApp"),
+});
diff --git a/packages/react-moveable/stories/4-Options/ReactDragTargetApp.tsx b/packages/react-moveable/stories/4-Options/ReactDragTargetApp.tsx
@@ -14,12 +14,6 @@ export default function App() {
             scalable={true}
             rotatable={true}
             dragTarget={".drag-area"}
-            padding={{
-                left: 10,
-                right: 20,
-                top: 30,
-                bottom: 40,
-            }}
             onRender={e => {
                 e.target.style.cssText += e.cssText;
             }}

diff --git a/packages/react-moveable/stories/4-Options/ReactDragTargetSelfApp.tsx b/packages/react-moveable/stories/4-Options/ReactDragTargetSelfApp.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return <div className="container">
+        <div className="drag-area" style={{
+            width: "100px",
+            height: "100px",
+        }}>Drag</div>
+        <div className="target"></div>
+        <Moveable
+            target={".target"}
+            draggable={true}
+            scalable={true}
+            rotatable={true}
+            dragTarget={".drag-area"}
+            dragTargetSelf={true}
+            onRender={e => {
+                e.target.style.cssText += e.cssText;
+            }}
+        />
+    </div>;
+}
diff --git a/storybook/stories/4-Options/react/ReactDragTargetApp.tsx b/storybook/stories/4-Options/react/ReactDragTargetApp.tsx
@@ -14,12 +14,6 @@ export default function App() {
             scalable={true}
             rotatable={true}
             dragTarget={".drag-area"}
-            padding={{
-                left: 10,
-                right: 20,
-                top: 30,
-                bottom: 40,
-            }}
             onRender={e => {
                 e.target.style.cssText += e.cssText;
             }}