fix: fix nested svg #1011

daybrush · Oct 3, 2023 · 33366b5 · 33366b5
1 parent 8dd5c36
commit 33366b5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 10 deletions.
diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -240,21 +240,26 @@ export function getOffsetPosInfo(
     let origin: number[];
     let targetOrigin: number[];
     // inner svg element
-    if (!hasOffset && tagName !== "svg") {
+    if (!hasOffset && (tagName !== "svg" || (target as SVGElement).ownerSVGElement)) {
         origin = IS_WEBKIT605
             ? getBeforeTransformOrigin(el as SVGElement)
             : getTransformOriginArray(getStyle("transformOrigin")).map(pos => parseFloat(pos));
 
         targetOrigin = origin.slice();
         hasOffset = true;
 
-        [
-            offsetLeft, offsetTop, origin[0], origin[1],
-        ] = getSVGGraphicsOffset(
-            el as SVGGraphicsElement,
-            origin,
-            el === target && target.tagName.toLowerCase() === "g",
-        );
+        if (tagName === "svg") {
+            offsetLeft = 0;
+            offsetTop = 0;
+        } else {
+            [
+                offsetLeft, offsetTop, origin[0], origin[1],
+            ] = getSVGGraphicsOffset(
+                el as SVGGraphicsElement,
+                origin,
+                el === target && target.tagName.toLowerCase() === "g",
+            );
+        }
     } else {
         origin = getTransformOriginArray(getStyle("transformOrigin")).map(pos => parseFloat(pos));
         targetOrigin = origin.slice();
@@ -609,7 +614,7 @@ export function getSize(
     let svg = false;
 
     if (target) {
-        if (!hasOffset && target!.tagName.toLowerCase() !== "svg") {
+        if (!hasOffset && (target as SVGElement).ownerSVGElement) {
             // check svg elements
             const bbox = (target as SVGGraphicsElement).getBBox();
 

diff --git a/packages/react-moveable/src/utils/getMatrixStackInfo.ts b/packages/react-moveable/src/utils/getMatrixStackInfo.ts
@@ -132,7 +132,7 @@ export function getMatrixStackInfo(
             offsetTop,
         ] = offsetPos;
 
-        if (tagName === "svg" && targetMatrix) {
+        if (tagName === "svg" && !(target as SVGSVGElement).ownerSVGElement && targetMatrix) {
             // scale matrix for svg's SVGElements.
             matrixes.push({
                 type: "target",

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -265,3 +265,9 @@ export const TestTranslate50 = add("Test translate(-50%, -50%)", {
         expect(controlBox.style.transform).toBe("translate3d(150px, 100px, 0px)");
     },
 });
+
+
+export const TestNestedSVG = add("Test Nested SVG", {
+    app: require("./ReactNestedSVGApp").default,
+    path: require.resolve("./ReactNestedSVGApp"),
+});
diff --git a/packages/react-moveable/stories/99-Tests/ReactNestedSVGApp.tsx b/packages/react-moveable/stories/99-Tests/ReactNestedSVGApp.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return <div className="container">
+        <svg viewBox="0 0 200 200" style={{
+            border: "1px solid black",
+            width: "200px",
+            height: "200px",
+        }}>
+            <svg viewBox="0 0 200 200" style={{
+                border: "1px solid black",
+                width: "200px",
+                height: "200px",
+            }}>
+                <path d="M 0 0 L 200 0 L 200 200 z"
+                    className="svg"
+                    style={{
+                        fill: "white",
+                        stroke: "red",
+                        strokeWidth: 2,
+                    }} />
+            </svg>
+        </svg>
+        <Moveable
+            target={".svg"}
+            draggable={true}
+            preventClickDefault={true}
+            onDrag={e => {
+                e.target.style.transform = e.transform;
+            }}
+        />
+    </div>;
+}