fix: fix dragTarget in control box #1054

packages/react-moveable/src/MoveableGroup.tsx

@@ -1,7 +1,7 @@
 import MoveableManager from "./MoveableManager";
 import { GroupableProps, GroupRect, MoveableManagerInterface, MoveableTargetGroupsType, RectInfo } from "./types";
 import ChildrenDiffer from "@egjs/children-differ";
-import { getAbleGesto, getTargetAbleGesto } from "./gesto/getAbleGesto";
+import { getControlAbleGesto, getTargetAbleGesto } from "./gesto/getAbleGesto";
 import Groupable from "./ables/Groupable";
 import { MIN_NUM, MAX_NUM, TINY_NUM } from "./consts";
 import {
@@ -462,7 +462,7 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
                 this.targetGesto = getTargetAbleGesto(this, this._dragTarget!, "Group");
             }
             if (!this.controlGesto) {
-                this.controlGesto = getAbleGesto(this, this.controlBox, "controlAbles", "GroupControl");
+                this.controlGesto = getControlAbleGesto(this, "GroupControl");
             }
         }
         const isContainerChanged = !equals(state.container, props.container);

packages/react-moveable/src/MoveableManager.tsx

@@ -27,7 +27,10 @@ import {
     GroupableProps,
     MoveableRefType,
 } from "./types";
-import { triggerAble, getTargetAbleGesto, getAbleGesto, checkMoveableTarget } from "./gesto/getAbleGesto";
+import {
+    triggerAble, getTargetAbleGesto,
+    checkMoveableTarget, getControlAbleGesto,
+} from "./gesto/getAbleGesto";
 import { createOriginMatrix, multiplies, plus } from "@scena/matrix";
 import {
     addClass, cancelAnimationFrame, find,
@@ -1045,7 +1048,6 @@ export default class MoveableManager<T = {}>
         this._updateMutationObserver(prevProps);
     }
     protected _updateEvents() {
-        const controlBoxElement = this.controlBox;
         const hasTargetAble = this.targetAbles.length;
         const hasControlAble = this.controlAbles.length;
         const target = this._dragTarget;
@@ -1064,7 +1066,7 @@ export default class MoveableManager<T = {}>
             this.targetGesto = getTargetAbleGesto(this, target!, "");
         }
         if (!this.controlGesto && hasControlAble) {
-            this.controlGesto = getAbleGesto(this, controlBoxElement, "controlAbles", "Control");
+            this.controlGesto = getControlAbleGesto(this, "Control");
         }
     }
     protected _updateTargets() {

packages/react-moveable/src/gesto/getAbleGesto.ts

@@ -200,13 +200,13 @@ export function triggerAble(
     return true;
 }
 
-export function checkMoveableTarget(moveable: MoveableManagerInterface) {
+export function checkMoveableTarget(moveable: MoveableManagerInterface, isControl?: boolean) {
     return (e: { inputEvent: Event }, target: EventTarget | null = e.inputEvent.target) => {
         const eventTarget = target as Element;
         const areaElement = moveable.areaElement;
         const dragTargetElement = (moveable as any)._dragTarget;
 
-        if (!dragTargetElement || moveable.controlGesto?.isFlag()) {
+        if (!dragTargetElement || (!isControl && moveable.controlGesto?.isFlag())) {
             return false;
         }
 
@@ -241,12 +241,39 @@ export function getTargetAbleGesto(
     if (!dragArea && dragTarget && target && moveableTarget !== target && props.dragTargetSelf) {
         targets.push(target);
     }
+    const checkTarget = checkMoveableTarget(moveable);
 
     return getAbleGesto(moveable, targets, "targetAbles", eventAffix, {
-        dragStart: checkMoveableTarget(moveable),
-        pinchStart: checkMoveableTarget(moveable),
+        dragStart: checkTarget,
+        pinchStart: checkTarget,
     });
 }
+
+export function getControlAbleGesto(
+    moveable: MoveableManagerInterface,
+    eventAffix: string,
+) {
+    const controlBox = moveable.controlBox;
+    const targets: Array<HTMLElement | SVGElement> = [];
+
+    targets.push(controlBox);
+
+    const checkTarget = checkMoveableTarget(moveable, true);
+    const checkControlTarget = (e: any, target: EventTarget | null = e.inputEvent.target) => {
+        if (target === controlBox) {
+            return true;
+        }
+        const result = checkTarget(e, target);
+
+        return !result;
+    };
+
+    return getAbleGesto(moveable, targets, "controlAbles", eventAffix, {
+        dragStart: checkControlTarget,
+        pinchStart: checkControlTarget,
+    });
+}
+
 export function getAbleGesto(
     moveable: MoveableManagerInterface,
     target: HTMLElement | SVGElement | Array<HTMLElement | SVGElement>,

packages/react-moveable/stories/6-CustomAble/0-CustomAble.stories.tsx

@@ -23,3 +23,9 @@ export const CustomAbleMouseEnterLeave = add("Mouse Enter & Leave", {
     app: require("./ReactMouseEnterLeaveApp").default,
     path: require.resolve("./ReactMouseEnterLeaveApp"),
 });
+
+
+export const CustomAbleDragTarget = add("DragTarget", {
+    app: require("./ReactDragTargetAbleApp").default,
+    path: require.resolve("./ReactDragTargetAbleApp"),
+});

packages/react-moveable/stories/6-CustomAble/ReactDragTargetAbleApp.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+// import "./App.css";
+import Moveable, { MoveableManagerInterface, Renderer } from "@/react-moveable";
+
+const DimensionViewable = {
+    name: "dimensionViewable",
+    props: [],
+    events: [],
+    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+        const rect = moveable.getRect();
+
+        // Add key (required)
+        // Add class prefix moveable-(required)
+        return (
+            <div
+                key={"dimension-viewer"}
+                className={"moveable-dimension"}
+                style={{
+                    position: "absolute",
+                    left: `${rect.width / 2}px`,
+                    top: `${rect.height + 20}px`,
+                    background: "#4af",
+                    borderRadius: "2px",
+                    padding: "2px 4px",
+                    color: "white",
+                    fontSize: "13px",
+                    whiteSpace: "nowrap",
+                    fontWeight: "bold",
+                    willChange: "transform",
+                    transform: `translate(-50%, 0px)`,
+                }}
+            >
+                Target
+            </div>
+        );
+    },
+} as const;
+
+function App() {
+    const [dragTarget, setDragTarget] = React.useState<HTMLElement>();
+
+    React.useEffect(() => {
+        setDragTarget(document.querySelector<HTMLElement>(".moveable-dimension")!);
+    }, []);
+    return (
+        <div className="container">
+            <div className="target target1"></div>
+            <div className="target target2"></div>
+            <Moveable
+                ables={[DimensionViewable]}
+                dragTarget={dragTarget}
+                resizable={true}
+                props={{
+                    dimensionViewable: true,
+                }}
+                target={[".target1"]}
+                draggable={true}
+                onDrag={(e) => {
+                    e.target.style.transform = e.transform;
+                }}
+                onResize={(e) => {
+                    e.target.style.width = `${e.width}px`;
+                    e.target.style.height = `${e.height}px`;
+                    e.target.style.transform = e.drag.transform;
+                }}
+                onRotate={(e) => {
+                    e.target.style.transform = e.drag.transform;
+                }}
+                elementGuidelines={[".target1", ".target2"]}
+                snappable={true}
+            />
+        </div>
+    );
+}
+
+export default App;