fix: fix rotate dist #778

daybrush · Nov 2, 2022 · 7ac47ca · 7ac47ca
1 parent 1bf05b3
commit 7ac47ca
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 35 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/Rotatable.tsx b/packages/react-moveable/src/react-moveable/ables/Rotatable.tsx
@@ -588,7 +588,7 @@ export default {
         moveable: MoveableManagerInterface<RotatableProps & DraggableProps>,
         e: any,
     ) {
-        const { datas, distX, distY, parentRotate, parentFlag, isPinch, groupDelta } = e;
+        const { datas, clientDistX, clientDistY, parentRotate, parentFlag, isPinch, groupDelta } = e;
         const {
             beforeDirection,
             beforeInfo,
@@ -629,8 +629,8 @@ export default {
         const startRotation = 180 / Math.PI * startValue;
         const absoluteStartRotation = absoluteInfo.startValue;
         let isSnap = false;
-        const nextClientX = startClientX + distX;
-        const nextClientY = startClientY + distY;
+        const nextClientX = startClientX + clientDistX;
+        const nextClientY = startClientY + clientDistY;
 
         if (!parentFlag && "parentDist" in e) {
             const parentDist = e.parentDist;

diff --git a/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts b/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
@@ -38,7 +38,10 @@ export function triggerAble(
     if (isFirstStart) {
         moveable.updateRect(eventType, true, false);
     }
+    e.clientDistX = e.distX;
+    e.clientDistY = e.distY;
     if (eventType === "" && !isRequest) {
+        // Convert distX, distY
         convertDragDist(moveable.state, e);
     }
     // const isGroup = eventAffix.indexOf("Group") > -1;

diff --git a/packages/react-moveable/stories/9Z-etc/apps/ReactZoomInZoomOutApp.tsx b/packages/react-moveable/stories/9Z-etc/apps/ReactZoomInZoomOutApp.tsx
@@ -2,47 +2,30 @@ 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 moveableRef = React.useRef<Moveable>(null);
 
     return (
-        <div className="root">
-            <div className="container" style={{
-                transformOrigin: "0 0",
-                transform: `scale(${props.containerScale})`,
-            }}>
+        <div className="root" style={{
+            transformOrigin: "0 0",
+            transform: `scale(2)`,
+        }}>
+            <div className="container">
                 <div style={{
                     position: "relative",
                     transform: "translate3d(0px, 0px, 100px)",
                 }}>
-                    <div className="target" ref={targetRef} style={{
+                    <div className="target" style={{
                         transform: "translate(0px, 0px)",
                     }}>Target</div>
+                    <Moveable
+                        target={".target"}
+                        draggable={true}
+                        rotatable={true}
+                        rootContainer={document.body}
+                        onRender={e => {
+                            e.target.style.cssText += e.cssText;
+                        }}
+                    ></Moveable>
                 </div>
-                <Moveable
-                    ref={moveableRef}
-                    target={targetRef}
-                    draggable={props.draggable}
-                    throttleDrag={props.throttleDrag}
-                    edgeDraggable={props.edgeDraggable}
-                    startDragRotate={props.startDragRotate}
-                    throttleDragRotate={props.throttleDragRotate}
-                    rootContainer={document.body}
-                    onDragStart={e => {
-                        e.set(translate);
-                    }}
-                    onDrag={e => {
-                        e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`;
-                    }}
-                    onDragEnd={e => {
-                        const lastEvent = e.lastEvent;
-
-                        if (lastEvent) {
-                            setTranslate(lastEvent.beforeTranslate);
-                        }
-                    }}
-                ></Moveable>
             </div>
         </div>
     );