fix: fix request with bounds #809

Author: daybrush

packages/react-moveable/src/ables/Draggable.tsx

@@ -174,9 +174,11 @@ export default {
             distY = r * Math.sin(dragRotateRad);
         }
 
-        if (!isPinch && !parentEvent && !parentFlag && (!throttleDragRotate || distX || distY)) {
+        if (!isPinch && !parentEvent && !parentFlag) {
             const [verticalInfo, horizontalInfo] = checkSnapBoundsDrag(
-                moveable, distX, distY, throttleDragRotate, isRequest || deltaOffset, datas,
+                moveable, distX, distY,
+                throttleDragRotate,
+                isRequest || deltaOffset, datas,
             );
             isVerticalSnap = verticalInfo.isSnap;
             isVerticalBound = verticalInfo.isBound;

packages/react-moveable/src/types.ts

@@ -3041,6 +3041,34 @@ export interface MoveableInterface {
     isMoveableElement(target: Element): boolean;
     updateRect(type?: "Start" | "" | "End", isTarget?: boolean, isSetState?: boolean): void;
     updateTarget(): void;
+    /**
+     * Request able through a method rather than an event.
+     * At the moment of execution, requestStart is executed,
+     * and then request and requestEnd can be executed through Requester.
+     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request Draggable Requester}
+     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request Resizable Requester}
+     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Scalable.html#request Scalable Requester}
+     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Rotatable.html#request Rotatable Requester}
+     * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.OriginDraggable.html#request OriginDraggable Requester}
+     * @param - ableName
+     * @param - request to be able params.
+     * @param - If isInstant is true, request and requestEnd are executed immediately.
+     * @return - Able Requester. If there is no request in able, nothing will work.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * // Instantly Request (requestStart - request - requestEnd)
+     * moveable.request("draggable", { deltaX: 10, deltaY: 10 }, true);
+     *
+     * // Start move
+     * const requester = moveable.request("draggable");
+     * requester.request({ deltaX: 10, deltaY: 10 });
+     * requester.request({ deltaX: 10, deltaY: 10 });
+     * requester.request({ deltaX: 10, deltaY: 10 });
+     * requester.requestEnd();
+     */
     request<RequestParam extends {} = AbleRequestParam>(
         ableName: string, params?: RequestParam, isInstant?: boolean): Requester<RequestParam>;
     destroy(): void;

packages/react-moveable/stories/7-Request/apps/DraggableApp.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 import Moveable from "@/react-moveable";
 
 export default function App(props: Record<string, any>) {
-    const [translate, setTranslate]  = React.useState([0, 0]);
-    const targetRef = React.useRef<HTMLDivElement>(null);
     const xInputRef = React.useRef<HTMLInputElement>(null);
     const yInputRef = React.useRef<HTMLInputElement>(null);
     const moveableRef = React.useRef<Moveable>(null);
@@ -43,27 +41,19 @@ export default function App(props: Record<string, any>) {
             <div className="container" style={{
                 transform: `scale(${props.containerScale})`,
             }}>
-                <div className="target" ref={targetRef}>Target</div>
+                <div className="target">Target</div>
                 <Moveable
                     ref={moveableRef}
-                    target={targetRef}
+                    target={".target"}
                     draggable={true}
                     throttleDrag={props.throttleDrag}
                     edgeDraggable={props.edgeDraggable}
                     startDragRotate={props.startDragRotate}
                     throttleDragRotate={props.throttleDragRotate}
-                    onDragStart={e => {
-                        e.set(translate);
-                    }}
                     onDrag={e => {
-                        e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`;
+                        e.target.style.transform = e.transform;
                     }}
                     onDragEnd={e => {
-                        const lastEvent = e.lastEvent;
-                        if (lastEvent) {
-                            setTranslate(lastEvent.beforeTranslate);
-                        }
-
                         requestAnimationFrame(() => {
                             const rect = e.moveable.getRect();
 

packages/react-moveable/stories/99-Tests/Deafult.stories.tsx

@@ -104,3 +104,9 @@ group.add("Test snap for scaled target", {
     app: require("./ReactZoomedSnapApp").default,
     path: require.resolve("./ReactZoomedSnapApp"),
 });
+
+
+group.add("Test request with bounds", {
+    app: require("./ReactRequestBoundsApp").default,
+    path: require.resolve("./ReactRequestBoundsApp"),
+});

packages/react-moveable/stories/99-Tests/ReactRequestBoundsApp.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    const moveableRef = React.useRef<Moveable>(null);
+
+    return (
+        <div className="container">
+            <button onClick={() => {
+                moveableRef.current!.request("draggable", {
+                    isInstant: true,
+                    deltaX: 0,
+                    deltaY: 0,
+                });
+            }}>Request</button>
+            <div className="target">Target</div>
+
+            <Moveable
+                ref={moveableRef}
+                target={".target"}
+                draggable={true}
+                rotatable={true}
+                resizable={true}
+                snappable={true}
+                bounds={{
+                    left: 200,
+                    top: 0,
+                }}
+                onRender={e => {
+                    e.target.style.cssText += e.cssText;
+                }}
+            />
+        </div>
+    );
+}