fix: support transform-box: fill-box (#1012)

Co-authored-by: Malo Guertin <malo@gokickflip.com>

packages/react-moveable/src/utils.tsx

@@ -407,17 +407,17 @@ export function getSVGGraphicsOffset(
     if (!el.getBBox || !isGTarget && el.tagName.toLowerCase() === "g") {
         return [0, 0, 0, 0];
     }
+    const getStyle = getCachedStyle(el);
+    const isFillBox = getStyle("transform-box") === "fill-box";
+
     const bbox = el.getBBox();
     const viewBox = getSVGViewBox(el.ownerSVGElement!);
     const left = bbox.x - viewBox.x;
     const top = bbox.y - viewBox.y;
+    const originX = isFillBox ? origin[0] : origin[0] - left;
+    const originY = isFillBox ? origin[1] : origin[1] - top;
 
-    return [
-        left,
-        top,
-        origin[0] - left,
-        origin[1] - top,
-    ];
+    return [left, top, originX, originY];
 }
 export function calculatePosition(matrix: number[], pos: number[], n: number) {
     return calculate(matrix, convertPositionMatrix(pos, n), n);

storybook/stories/4-SVG/react-SVG.stories.tsx

@@ -37,7 +37,6 @@ export const SVGTargetG = add("SVGElement with target G tag", {
     app: require("./react/ReactSVGTargetGApp").default,
 });
 
-
 export const SVGGroup = add("SVG Group", {
     appName: "ReactSVGGroupApp",
     app: require("./react/ReactSVGGroupApp").default,
@@ -52,8 +51,12 @@ export const SVGGroup = add("SVG Group", {
     },
 });
 
-
 export const SVGOrigin = add("SVGPathElement with center origin", {
     appName: "ReactOriginApp",
     app: require("./react/ReactOriginApp").default,
 });
+
+export const SVGFillboxOrigin = add("SVGPathElement with center origin and transform fill-box", {
+    appName: "ReactOriginFillboxApp",
+    app: require("./react/ReactOriginFillBoxApp").default,
+});

storybook/stories/4-SVG/react/ReactOriginFillboxApp.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    return (
+        <div className="root">
+            <div
+                className="container"
+                style={{
+                    transformOrigin: "0 0",
+                    transform: `scale(${props.containerScale})`,
+                }}
+            >
+                <svg
+                    viewBox="0 0 500 500"
+                    style={{
+                        border: "1px solid black",
+                        width: "500px",
+                        height: "500px",
+                    }}
+                >
+                    <rect
+                        id="rect-1"
+                        x="100"
+                        y="100"
+                        width="50"
+                        height="50"
+                        style={{
+                            fill: "red",
+                            transformBox: "fill-box",
+                        }}
+                        transform="rotate(45)"
+                        {...{ "transform-origin": "50% 50%" }}
+                    />
+                </svg>
+                <Moveable
+                    target={"#rect-1"}
+                    draggable={true}
+                    rotatable={true}
+                    scalable={true}
+                    svgOrigin="50% 50%"
+                    onRender={(e) => {
+                        console.log(e);
+                        e.target.style.cssText += e.cssText;
+                    }}
+                />
+                <Moveable
+                    target={"#rect-2"}
+                    draggable={true}
+                    rotatable={true}
+                    scalable={true}
+                    svgOrigin="50% 50%"
+                    onRender={(e) => {
+                        e.target.style.cssText += e.cssText;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}