From 33366b53c4871b1b7676c234168d1ef0cb0ba3c3 Mon Sep 17 00:00:00 2001
From: Daybrush <younkue.choi@navercorp.com>
Date: Tue, 3 Oct 2023 23:43:29 +0900
Subject: [PATCH] fix: fix nested svg #1011

---
 packages/react-moveable/src/utils.tsx         | 23 ++++++++-----
 .../src/utils/getMatrixStackInfo.ts           |  2 +-
 .../stories/99-Tests/Deafult.stories.tsx      |  6 ++++
 .../stories/99-Tests/ReactNestedSVGApp.tsx    | 34 +++++++++++++++++++
 4 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-moveable/stories/99-Tests/ReactNestedSVGApp.tsx

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
index 94e89669f..d70a33f1a 100644
--- a/packages/react-moveable/src/utils.tsx
+++ b/packages/react-moveable/src/utils.tsx
@@ -240,7 +240,7 @@ 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));
@@ -248,13 +248,18 @@ export function getOffsetPosInfo(
         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
index cb718580b..6b75bc5fb 100644
--- 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
index 9248781cf..320578fae 100644
--- 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
new file mode 100644
index 000000000..b406c5a9e
--- /dev/null
+++ 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>;
+}