fix: fix width scale for keepRatio #1020

daybrush · Oct 1, 2023 · 8dd5c36 · 8dd5c36
1 parent 90e3f7f
commit 8dd5c36
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/packages/react-moveable/src/ables/Scalable.ts b/packages/react-moveable/src/ables/Scalable.ts
@@ -1,7 +1,8 @@
 import {
     triggerEvent, multiply2,
     fillParams, fillEndParams, getAbsolutePosesByState,
-    catchEvent, getOffsetSizeDist, getDirectionCondition, getDirectionViewClassName, getTotalDirection, sign, countEach,
+    catchEvent, getOffsetSizeDist, getDirectionCondition,
+    getDirectionViewClassName, getTotalDirection, sign, countEach, abs,
 } from "../utils";
 import { MIN_SCALE } from "../consts";
 import {
@@ -286,6 +287,7 @@ export default {
         let fixedPosition = dragClient;
         let snapDist = [0, 0];
 
+        const distSign = sign(dist[0] * dist[1]);
         const isSelfPinch = !dragClient && !parentFlag && isPinch;
 
         if (isSelfPinch || resolveMatrix) {
@@ -337,7 +339,7 @@ export default {
                 dist[0] += snapDist[0];
                 const snapHeight = startOffsetWidth * dist[0] * tempScaleValue[0] / ratio;
 
-                dist[1] = snapHeight / startOffsetHeight / tempScaleValue[1];
+                dist[1] = sign(distSign * dist[0]) * abs(snapHeight / startOffsetHeight / tempScaleValue[1]);
             } else if (
                 (!sizeDirection[0] && sizeDirection[1])
                 || (!snapDist[0] && snapDist[1])
@@ -346,11 +348,12 @@ export default {
                 dist[1] += snapDist[1];
                 const snapWidth = startOffsetHeight * dist[1] * tempScaleValue[1] * ratio;
 
-                dist[0] = snapWidth / startOffsetWidth / tempScaleValue[0];
+                dist[0] = sign(distSign * dist[1]) * abs(snapWidth / startOffsetWidth / tempScaleValue[0]);
             }
         } else {
             dist[0] += snapDist[0];
             dist[1] += snapDist[1];
+
             if (!snapDist[0]) {
                 dist[0] = throttle(dist[0] * tempScaleValue[0], throttleScale!) / tempScaleValue[0];
             }

diff --git a/packages/react-moveable/stories/3-Group/0-Group.stories.tsx b/packages/react-moveable/stories/3-Group/0-Group.stories.tsx
@@ -14,6 +14,7 @@ import { expect } from "@storybook/jest";
 import { userEvent } from "@storybook/testing-library";
 import { pan, rotate, wait } from "../utils/testing";
 import { throttle } from "@daybrush/utils";
+import { parse } from "css-to-mat";
 
 export default {
     title: "Group",
@@ -90,6 +91,34 @@ export const GroupDraggableScalableRotatable = add("Draggable & Scalable & Rotat
         ...DEFAULT_ROTATABLE_CONTROLS,
         ...DEFAULT_DRAGGABLE_CONTROLS,
     },
+    play: async ({ canvasElement }) => {
+        await wait();
+
+        const targets = canvasElement.querySelectorAll<HTMLElement>(".target")!;
+        const resizeControl = canvasElement.querySelector<HTMLElement>(`.moveable-control-box [data-direction="e"]`)!;
+
+        await pan({
+            target: resizeControl,
+            start: [0, 0],
+            end: [140, 100],
+            duration: 100,
+            interval: 10,
+        });
+
+        targets.forEach((target, i) => {
+            const transform = target.style.transform;
+            const functionValue = parse(transform)[1].functionValue;
+
+            expect(throttle(functionValue[0], 0.1)).toBe(1.5);
+
+            if (i === 2) {
+                expect(throttle(functionValue[1], 0.1)).toBe(-1.5);
+            } else {
+                expect(throttle(functionValue[1], 0.1)).toBe(1.5);
+            }
+        });
+
+    },
 });
 
 

diff --git a/packages/react-moveable/stories/3-Group/ReactDraggableScalableRotatableApp.tsx b/packages/react-moveable/stories/3-Group/ReactDraggableScalableRotatableApp.tsx
@@ -5,7 +5,9 @@ export default function App(props: Record<string, any>) {
     return <div className="container">
         <div className="target target1">Target1</div>
         <div className="target target2">Target2</div>
-        <div className="target target3">Target3</div>
+        <div className="target target3" style={{
+            transform: "scale(1, -1)",
+        }}>Target3</div>
         <Moveable
             target={".target"}
             hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}
@@ -26,7 +28,7 @@ export default function App(props: Record<string, any>) {
                     ev.target.style.transform = ev.transform;
                 });
             }}
-            onScaleGroup={({ scale, dist, events }) => {
+            onScaleGroup={({ events }) => {
                 events.forEach(ev => {
                     ev.target.style.transform = ev.drag.transform;
                 });