feat: add preventClickEventOnDrag prop

and change preventClickDefault, clickable working

package.json

@@ -92,7 +92,7 @@
         "@scena/matrix": "^1.1.1",
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
-        "gesto": "^1.9.0",
+        "gesto": "^1.11.1",
         "overlap-area": "^1.1.0",
         "react-compat-css-styled": "^1.0.8",
         "react-css-styled": "^1.0.3"
@@ -114,7 +114,7 @@
         "@scena/matrix": "^1.1.1",
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
-        "gesto": "^1.9.0",
+        "gesto": "^1.11.1",
         "overlap-area": "^1.1.0",
         "react-compat-css-styled": "^1.0.8",
         "react-css-styled": "^1.0.3"

packages/react-compat-moveable/package.json

@@ -75,7 +75,7 @@
         "@scena/matrix": "^1.1.1",
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
-        "gesto": "^1.9.0",
+        "gesto": "^1.11.1",
         "overlap-area": "^1.1.0",
         "react-compat-css-styled": "^1.0.8",
         "react-css-styled": "^1.0.3",

packages/react-moveable/package.json

@@ -105,7 +105,7 @@
         "@scena/react-guides": "^0.17.1",
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
-        "gesto": "^1.9.0",
+        "gesto": "^1.11.1",
         "overlap-area": "^1.1.0",
         "react-css-styled": "^1.0.3"
     },

packages/react-moveable/src/react-moveable/MoveableManager.tsx

@@ -63,6 +63,9 @@ export default class MoveableManager<T = {}>
         cssStyled: null,
         customStyledMap: {},
         props: {},
+        stopPropagation: false,
+        preventClickDefault: false,
+        preventClickEventOnDrag: true,
         flushSync: defaultSync,
     };
     public state: MoveableManagerState = {

packages/react-moveable/src/react-moveable/ables/Clickable.ts

@@ -3,44 +3,36 @@ import {
     ClickableProps, OnClick, OnClickGroup,
 } from "../types";
 import { triggerEvent, fillParams } from "../utils";
-import { addEvent, findIndex, removeEvent, requestAnimationFrame } from "@daybrush/utils";
+import { findIndex } from "@daybrush/utils";
 import { makeAble } from "./AbleManager";
 
 export default makeAble("clickable", {
     props: {
         clickable: Boolean,
-        preventClickDefault: Boolean,
     },
     events: {
         onClick: "click",
         onClickGroup: "clickGroup",
     } as const,
     always: true,
     dragRelation: "weak",
-    dragStart(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
-        if (!e.isRequest) {
-            addEvent(window, "click", moveable.onPreventClick, true);
-        }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    dragStart() {
+        return;
     },
-    dragControlStart(moveable: MoveableManagerInterface, e: any) {
-        this.dragStart(moveable, e);
+    dragControlStart() {
+        this.dragStart();
     },
     dragGroupStart(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
-        this.dragStart(moveable, e);
         e.datas.inputTarget = e.inputEvent && e.inputEvent.target;
     },
     dragEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
-        this.endEvent(moveable);
         const target = moveable.state.target!;
         const inputEvent = e.inputEvent;
         const inputTarget = e.inputTarget;
-
         const isMoveableElement = moveable.isMoveableElement(inputTarget);
         const containsElement = !isMoveableElement && moveable.controlBox.getElement().contains(inputTarget);
 
-        if ((!moveable.props.preventClickDefault && !e.isDrag) || containsElement) {
-            this.unset(moveable);
-        }
         if (
             !inputEvent || !inputTarget || e.isDrag
             || moveable.isMoveableElement(inputTarget)
@@ -59,7 +51,6 @@ export default makeAble("clickable", {
         }));
     },
     dragGroupEnd(moveable: MoveableGroupInterface<ClickableProps>, e: any) {
-        this.endEvent(moveable);
         const inputEvent = e.inputEvent;
         const inputTarget = e.inputTarget;
 
@@ -96,14 +87,6 @@ export default makeAble("clickable", {
     dragGroupControlEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
         this.dragEnd(moveable, e);
     },
-    endEvent(moveable: MoveableManagerInterface<ClickableProps>) {
-        requestAnimationFrame(() => {
-            this.unset(moveable);
-        });
-    },
-    unset(moveable: MoveableManagerInterface<ClickableProps>) {
-        removeEvent(window, "click", moveable.onPreventClick, true);
-    },
 });
 
 /**

packages/react-moveable/src/react-moveable/ables/Default.ts

@@ -22,6 +22,8 @@ export default {
         props: Object,
         flushSync: Function,
         stopPropagation: Boolean,
+        preventClickEventOnDrag: Boolean,
+        preventClickDefault: Boolean,
     } as const,
     events: {} as const,
 };

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

@@ -15,6 +15,7 @@ import {
 } from "../types";
 import { setCustomDrag } from "./CustomGesto";
 import { parse, parseMat } from "css-to-mat";
+import { Draggable } from "../index.esm";
 
 export function calculatePointerDist(moveable: MoveableManagerInterface, e: any) {
     const { clientX, clientY, datas } = e;
@@ -438,8 +439,7 @@ export function fillTransformEvent(
 ): OnTransformEvent {
     fillOriginalTransform(e, nextTransform);
 
-    const draggable = moveable.getAble("draggable");
-    const drag = draggable && draggable.drag!(
+    const drag = Draggable.drag!(
         moveable,
         setCustomDrag(e, moveable.state, delta, isPinch, false),
     ) as OnDrag;

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

@@ -1,7 +1,7 @@
 import { Able, MoveableManagerInterface, MoveableGroupInterface } from "../types";
 import { hasClass, IObject } from "@daybrush/utils";
 import { convertDragDist, defaultSync } from "../utils";
-import Gesto from "gesto";
+import Gesto, { GestoOptions } from "gesto";
 import BeforeRenderable from "../ables/BeforeRenderable";
 import Renderable from "../ables/Renderable";
 
@@ -191,17 +191,22 @@ export function getAbleGesto(
     eventAffix: string,
     conditionFunctions: IObject<any> = {},
 ) {
+    const isTargetAbles = ableType === "targetAbles";
     const {
         pinchOutside,
         pinchThreshold,
+        preventClickEventOnDrag,
+        preventClickDefault,
     } = moveable.props;
-    const options: IObject<any> = {
+    const options: GestoOptions = {
         preventDefault: false,
         preventRightClick: true,
         preventWheelClick: true,
         container: window,
         pinchThreshold,
         pinchOutside,
+        preventClickEventOnDrag: isTargetAbles ? preventClickEventOnDrag : false,
+        preventClickEventOnDragStart: isTargetAbles ? preventClickDefault : false,
     };
     const gesto = new Gesto(target!, options);
 

packages/react-moveable/src/react-moveable/types.ts

@@ -145,6 +145,16 @@ export interface DefaultOptions {
      * @default false
      */
     stopPropagation?: boolean;
+    /**
+     * Prevent click event on drag. (mousemove, touchmove)
+     * @default true
+     */
+    preventClickEventOnDrag?: boolean;
+    /**
+     * Prevent click event on dragStart. (mousedown, touchstart)
+     * @default false
+     */
+    preventClickDefault?: boolean;
     /**
      * You can use props in object format or custom props.
      * @default empty object
@@ -2134,6 +2144,11 @@ export interface SnappableOptions {
      * @default []
      */
     elementGuidelines?: Array<ElementGuidelineValue | MoveableRefType<Element>>;
+    /**
+     * Maximum distance to which element guidelines can be snapped.
+     * @default Infinity
+     */
+    maxSnapElementGuidelineDistance?: number;
     /**
      * You can set up boundaries.
      * @default null
@@ -2386,16 +2401,9 @@ export interface ArrayFormat<T = any> {
 export interface ClickableOptions {
     /**
      * Whether to trigger the moveable's click event.
-     * If true, the event is not propagated to the target's parent element.
      * @default true
      */
     clickable?: boolean;
-    /**
-     * Whether to prevents the default behavior of native `click` events.
-     * If true, call preventDefault on click event.
-     * @default false
-     */
-    preventClickDefault?: boolean;
 }
 /**
  * @memberof Moveable.Clickable

packages/react-moveable/stories/9Z-etc/apps/ClickApp.tsx

@@ -18,6 +18,7 @@ export default function App(props: Record<string, any>) {
                     target={targetRef}
                     resizable={true}
                     preventClickDefault={true}
+                    draggable={true}
                     onDrag={e => {
                         e.target.style.transform = e.transform;
                     }}

yarn.lock

@@ -11128,12 +11128,12 @@ gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-gesto@^1.3.0, gesto@^1.5.1, gesto@^1.7.0, gesto@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.9.0.tgz#2500d529a8ac78eec1b2ae79e4be14e7b0f99728"
-  integrity sha512-WxzswA0zAHK+hM5WyR8G6PdIMt2d/TEY1lFfkfhC8YHHLO5pM5k8AyGu8lhwyBnrPntomWgLy3xl+iBzLHelew==
+gesto@^1.11.1, gesto@^1.3.0, gesto@^1.5.1, gesto@^1.7.0, gesto@^1.9.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.11.1.tgz#32dccc7af867af539002362726fad2b4109195ba"
+  integrity sha512-NvgkhaY6pawGlD3F9N+ZxYg7hiBeUMBwQeymR4jiegUZkW6ulb58D3X6neCCT38BqRv72HYmr+iZIgmqwV2Eow==
   dependencies:
-    "@daybrush/utils" "^1.0.0"
+    "@daybrush/utils" "^1.7.1"
     "@scena/event-emitter" "^1.0.2"
 
 get-caller-file@^2.0.1, get-caller-file@^2.0.5:
@@ -18957,6 +18957,24 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-moveable@~0.36.0:
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/react-moveable/-/react-moveable-0.36.0.tgz#c8592dff4b2d9466cc4a254c729ac2cc2ea8ddb6"
+  integrity sha512-1NmwIBjU30Hm7JfVCp+RTcoZ9Wh1faii3VYatcVFNdHUqxHnr4XqTHs6C7RcrTdZHeNJ3Lx1B6g7Y4F2MGkfgQ==
+  dependencies:
+    "@daybrush/utils" "^1.7.1"
+    "@egjs/agent" "^2.2.1"
+    "@egjs/children-differ" "^1.0.1"
+    "@scena/dragscroll" "^1.2.0"
+    "@scena/event-emitter" "^1.0.5"
+    "@scena/matrix" "^1.1.1"
+    "@scena/react-guides" "^0.17.1"
+    css-to-mat "^1.0.3"
+    framework-utils "^1.1.0"
+    gesto "^1.9.0"
+    overlap-area "^1.1.0"
+    react-css-styled "^1.0.3"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"