feat: support scale css property #891

daybrush · Apr 13, 2023 · 28c4226 · 28c4226
1 parent ee8a78b
commit 28c4226
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 2 deletions.
diff --git a/packages/react-moveable/src/utils/getMatrixStackInfo.ts b/packages/react-moveable/src/utils/getMatrixStackInfo.ts
@@ -1,6 +1,6 @@
 import {
     convertCSStoMatrix, convertDimension,
-    createIdentityMatrix, createOriginMatrix, createScaleMatrix,
+    createIdentityMatrix, createOriginMatrix, createScaleMatrix, multiply,
 } from "@scena/matrix";
 import { getCachedStyle } from "../store/Store";
 import { IS_WEBKIT, IS_SAFARI_ABOVE15, IS_FIREFOX, IS_CHROMIUM109 } from "../consts";
@@ -11,6 +11,7 @@ import {
     convert3DMatrixes, getOffsetPosInfo,
     getSVGMatrix, getBodyOffset, getAbsoluteMatrix,
 } from "../utils";
+import { createMatrix } from "css-to-mat";
 
 
 export function getShadowRoot(parentElement: HTMLElement | SVGElement) {
@@ -58,6 +59,7 @@ export function getMatrixStackInfo(
         isEnd = requestEnd;
         const getStyle = getCachedStyle(el);
         const position = getStyle("position");
+        const scale = getStyle("scale") as string;
         const transform = getElementTransform(el);
         const isFixed = position === "fixed";
         let matrix: number[] = convertCSStoMatrix(getTransformMatrix(transform));
@@ -201,6 +203,25 @@ export function getMatrixStackInfo(
             matrix: getAbsoluteMatrix(matrix, n, origin),
         });
 
+        if (scale && scale !== "1" && scale !== "none") {
+            const [
+                scaleX,
+                scaleY = scaleX,
+            ] = scale.split(" ").map(scale => parseFloat(scale)) as number[];
+            const scaleMatrix = createScaleMatrix([scaleX, scaleY], n);
+
+            matrixes.push({
+                type: "offset",
+                target: el,
+                matrix: createIdentityMatrix(n),
+            });
+
+            matrixes.push({
+                type: "target",
+                target: el,
+                matrix: getAbsoluteMatrix(scaleMatrix, n, origin),
+            });
+        }
         if (hasOffset) {
             const isElementTarget = el === target;
             const scrollLeft = isElementTarget ? 0 : el.scrollLeft;

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -1,5 +1,5 @@
 import { add } from "../utils/story";
-import { findMoveable, wait } from "../utils/testing";
+import { findMoveable, pan, wait } from "../utils/testing";
 import { expect } from "@storybook/jest";
 
 export default {
@@ -111,6 +111,36 @@ export const TestsZoomedTarget = add("Test css zoomed target", {
     app: require("./ReactZoomedTargetApp").default,
     path: require.resolve("./ReactZoomedTargetApp"),
 });
+export const TestsScaleTarget = add("Test css scale target", {
+    app: require("./ReactScaleTargetApp").default,
+    path: require.resolve("./ReactScaleTargetApp"),
+    play: async ({ canvasElement }) => {
+        await wait();
+        const target = canvasElement.querySelector<HTMLElement>(".target")!;
+        const controlBox = canvasElement.querySelector<HTMLElement>(".moveable-control-box")!;
+
+
+        // x1 => x2
+        const line1 = controlBox.querySelector<HTMLElement>(`[data-line-key="render-line-0"]`)!;
+        // y1 => y2
+        const line2 = controlBox.querySelector<HTMLElement>(`[data-line-key="render-line-1"]`)!;
+
+        // 100x 200
+        expect(line1.style.width).toBe("100px");
+        expect(line2.style.width).toBe("200px");
+        expect(controlBox.style.transform).toBe("translate3d(100px, 200px, 0px)");
+
+        await pan({
+            target,
+            start: [0, 0],
+            end: [100, 0],
+            duration: 100,
+            interval: 10,
+        });
+        expect(target.style.transform).toBe("translate(100px, 0px)");
+        expect(controlBox.style.transform).toBe("translate3d(200px, 200px, 0px)");
+    },
+});
 
 export const TestsZoomedSnap = add("Test snap for scaled target", {
     app: require("./ReactZoomedSnapApp").default,

diff --git a/packages/react-moveable/stories/99-Tests/ReactScaleTargetApp.tsx b/packages/react-moveable/stories/99-Tests/ReactScaleTargetApp.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    return (
+        <div className="root" style={{
+            paddingTop: "100px",
+        }}>
+            <div>
+                <div style={{
+                    position: "relative",
+                    transform: "translate3d(0px, 0px, 100px)",
+                }}>
+                    <div className="target" style={{
+                        scale: "1 2",
+                        transform: "translate(0px, 0px)",
+                    }}>Target</div>
+                </div>
+                <Moveable
+                    target={".target"}
+                    draggable={true}
+                    rotatable={true}
+                    resizable={true}
+                    rootContainer={document.body}
+                    onRender={e => {
+                        e.target.style.cssText += e.cssText;
+                    }}
+                ></Moveable>
+            </div>
+        </div>
+    );
+}