From 105bb1ce073e349c77f6a0c4dd8d3d259a03aabe Mon Sep 17 00:00:00 2001
From: Daybrush <younkue.choi@navercorp.com>
Date: Sun, 25 Sep 2022 10:49:41 +0900
Subject: [PATCH] fix: fix drag start edge #745

---
 .../src/react-moveable/MoveableManager.tsx    | 13 +++-
 .../src/react-moveable/gesto/getAbleGesto.ts  | 31 +++++----
 .../stories/99-Tests/Deafult.stories.tsx      |  4 ++
 .../99-Tests/ReactDragStartGroupApp.tsx       | 63 +++++++++++++++++++
 4 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-moveable/stories/99-Tests/ReactDragStartGroupApp.tsx

diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
index 319356c8f..031b12104 100644
--- a/packages/react-moveable/src/react-moveable/MoveableManager.tsx
+++ b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -22,7 +22,7 @@ import {
     MoveableDefaultOptions,
     GroupableProps,
 } from "./types";
-import { triggerAble, getTargetAbleGesto, getAbleGesto } from "./gesto/getAbleGesto";
+import { triggerAble, getTargetAbleGesto, getAbleGesto, checkMoveableTarget } from "./gesto/getAbleGesto";
 import { plus } from "@scena/matrix";
 import { cancelAnimationFrame, find, getKeys, IObject, requestAnimationFrame } from "@daybrush/utils";
 import { renderLine } from "./renderDirections";
@@ -239,9 +239,16 @@ export default class MoveableManager<T = {}>
      */
     public dragStart(e: MouseEvent | TouchEvent) {
         const targetGesto = this.targetGesto;
+        const controlGesto = this.controlGesto;
 
-        if (targetGesto && !targetGesto.isFlag()) {
-            targetGesto.triggerDragStart(e);
+        if (targetGesto && checkMoveableTarget(this)({ inputEvent: e })) {
+            if (!targetGesto.isFlag()) {
+                targetGesto.triggerDragStart(e);
+            }
+        } else if (controlGesto && this.isMoveableElement(e.target as Element)) {
+            if (!controlGesto.isFlag()) {
+                controlGesto.triggerDragStart(e);
+            }
         }
         return this;
     }
diff --git a/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts b/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
index 1dcc9afa8..9956a77c8 100644
--- a/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
+++ b/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
@@ -159,6 +159,22 @@ export function triggerAble(
     return true;
 }
 
+export function checkMoveableTarget(moveable: MoveableManagerInterface) {
+    const dragTarget = moveable.props.dragTarget;
+
+    return (e: { inputEvent: Event }) => {
+        const eventTarget = e.inputEvent.target as Element;
+        const areaElement = moveable.areaElement;
+
+        return dragTarget && (eventTarget === dragTarget || dragTarget.contains(eventTarget))
+            || eventTarget === areaElement
+            || (!moveable.isMoveableElement(eventTarget) && !moveable.controlBox.getElement().contains(eventTarget))
+            || hasClass(eventTarget, "moveable-area")
+            || hasClass(eventTarget, "moveable-padding")
+            || hasClass(eventTarget, "moveable-edgeDraggable");
+    };
+}
+
 export function getTargetAbleGesto(
     moveable: MoveableManagerInterface,
     moveableTarget: HTMLElement | SVGElement,
@@ -174,20 +190,9 @@ export function getTargetAbleGesto(
         targets.push(moveableTarget);
     }
 
-    const startFunc = (e: any) => {
-        const eventTarget = e.inputEvent.target;
-        const areaElement = moveable.areaElement;
-
-        return dragTarget && (eventTarget === dragTarget || dragTarget.contains(eventTarget))
-            || eventTarget === areaElement
-            || (!moveable.isMoveableElement(eventTarget) && !moveable.controlBox.getElement().contains(eventTarget))
-            || hasClass(eventTarget, "moveable-area")
-            || hasClass(eventTarget, "moveable-padding");
-    };
-
     return getAbleGesto(moveable, targets, "targetAbles", eventAffix, {
-        dragStart: startFunc,
-        pinchStart: startFunc,
+        dragStart: checkMoveableTarget(moveable),
+        pinchStart: checkMoveableTarget(moveable),
     });
 }
 export function getAbleGesto(
diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
index 519c14b3d..83797efdf 100644
--- a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
+++ b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -75,3 +75,7 @@ group.add("Test Drag Target", {
     app: require("./ReactDragTargetApp").default,
     text: require("!!raw-loader!./ReactDragTargetApp").default,
 });
+group.add("Test Drag Start Group Manually", {
+    app: require("./ReactDragStartGroupApp").default,
+    text: require("!!raw-loader!./ReactDragStartGroupApp").default,
+});
diff --git a/packages/react-moveable/stories/99-Tests/ReactDragStartGroupApp.tsx b/packages/react-moveable/stories/99-Tests/ReactDragStartGroupApp.tsx
new file mode 100644
index 000000000..6659c8ac0
--- /dev/null
+++ b/packages/react-moveable/stories/99-Tests/ReactDragStartGroupApp.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import { useState } from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    const [groupInstances, setGroupInstances] = useState<any[]>([]);
+    const t1 = React.useRef<any>(null);
+    const t2 = React.useRef<any>(null);
+    const groupMoveable = React.useRef<any>(null);
+
+    function initGroupElements() {
+        const arr: any[] = [];
+        arr.push(document.getElementsByClassName("target1")[0]);
+        arr.push(document.getElementsByClassName("target2")[0]);
+        setGroupInstances(arr);
+    }
+
+    function handleDragStart(e: any) {
+        initGroupElements();
+        groupMoveable.current!.dragStart(e.inputEvent);
+    }
+
+    return (
+        <div className="root">
+            <div className="container">
+                <div className={`target target1`}>Target 1</div>
+                <div className={`target target2`}>Target 2</div>
+                <Moveable
+                    ref={t1}
+                    target={`.target1` as string}
+                    draggable={true}
+                    edgeDraggable={true}
+                    origin={false}
+                    onDragStart={handleDragStart}
+                />
+                <Moveable
+                    ref={t2}
+                    target={`.target2` as string}
+                    draggable={true}
+                    origin={false}
+                    edgeDraggable={true}
+                    onDragStart={handleDragStart}
+                />
+                <Moveable
+                    ref={groupMoveable}
+                    target={groupInstances}
+                    hideDefaultLines={false}
+                    draggable={true}
+                    onDragGroup={(e) => {
+                        e.events.forEach(
+                            (ev) => (ev.target.style.transform = ev.transform)
+                        );
+                        t1.current.updateRect();
+                        t2.current.updateRect();
+                    }}
+                    onDragGroupEnd={() => {
+                        setGroupInstances([]);
+                    }}
+                />
+            </div>
+        </div>
+    );
+}