fix: fix svg group's offset pos #722

daybrush · Aug 18, 2022 · 167d277 · 167d277
1 parent 6e05812
commit 167d277
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 138 deletions.
diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -203,6 +203,7 @@ export function getOffsetInfo(
 }
 export function getOffsetPosInfo(
     el: HTMLElement | SVGElement,
+    target: HTMLElement | SVGElement,
     style: CSSStyleDeclaration,
 ) {
     const tagName = el.tagName.toLowerCase();
@@ -225,7 +226,11 @@ export function getOffsetPosInfo(
 
         [
             offsetLeft, offsetTop, origin[0], origin[1],
-        ] = getSVGGraphicsOffset(el as SVGGraphicsElement, origin);
+        ] = getSVGGraphicsOffset(
+            el as SVGGraphicsElement,
+            origin,
+            el === target && target.tagName.toLowerCase() === "g",
+        );
     } else {
         origin = getTransformOrigin(style).map(pos => parseFloat(pos));
         targetOrigin = origin.slice();
@@ -379,8 +384,9 @@ export function getSVGMatrix(
 export function getSVGGraphicsOffset(
     el: SVGGraphicsElement,
     origin: number[],
+    isGTarget?: boolean,
 ) {
-    if (!el.getBBox || el.tagName.toLowerCase() === "g") {
+    if (!el.getBBox || !isGTarget && el.tagName.toLowerCase() === "g") {
         return [0, 0, 0, 0];
     }
     const bbox = el.getBBox();

diff --git a/packages/react-moveable/src/react-moveable/utils/getMatrixStackInfo.ts b/packages/react-moveable/src/react-moveable/utils/getMatrixStackInfo.ts
@@ -84,7 +84,7 @@ export function getMatrixStackInfo(
             origin,
             targetOrigin,
             offset: offsetPos,
-        } = getOffsetPosInfo(el, style);
+        } = getOffsetPosInfo(el, target, style);
         let [
             offsetLeft,
             offsetTop,
@@ -101,9 +101,6 @@ export function getMatrixStackInfo(
                 target: el,
                 matrix: createIdentityMatrix(n),
             });
-        } else if (tagName === "g" && target !== el) {
-            offsetLeft = 0;
-            offsetTop = 0;
         }
 
         let offsetParent: HTMLElement;

diff --git a/packages/react-moveable/stories/4-SVG/0-SVG.stories.tsx b/packages/react-moveable/stories/4-SVG/0-SVG.stories.tsx
@@ -1,8 +1,39 @@
+import { makeStoryGroup } from "../utils/story";
+import "../common.css";
+import "../templates/default.css";
+import { SCALE_CONTROLS, DEFAULT_DRAGGABLE_CONTROLS } from "../controls/default";
 
-export default {
-    title: "SVG",
-};
-export * from "./1-PathDraggable.stories";
-export * from "./2-SVGDraggable.stories";
-export * from "./3-SVGDraggableRotatable.stories";
-export * from "./4-SVGGApp.stories";
+const group = makeStoryGroup("SVG", module);
+
+
+group.add("Draggable(SVGPathElement)", {
+    app: require("./apps/ReactPathDraggableApp").default,
+    text: require("!!raw-loader!./apps/ReactPathDraggableApp").default,
+    argsTypes: {
+        ...SCALE_CONTROLS,
+        ...DEFAULT_DRAGGABLE_CONTROLS,
+    },
+});
+group.add("Draggable(SVGSVGElement)", {
+    app: require("./apps/ReactSVGDraggableApp").default,
+    text: require("!!raw-loader!./apps/ReactSVGDraggableApp").default,
+    argsTypes: {
+        ...SCALE_CONTROLS,
+        ...DEFAULT_DRAGGABLE_CONTROLS,
+    },
+});
+
+group.add("Draggable & Rotatable(Circle)", {
+    app: require("./apps/ReactSVGDraggableRotatableApp").default,
+    text: require("!!raw-loader!./apps/ReactSVGDraggableRotatableApp").default,
+});
+
+group.add("SVGElement with G tag", {
+    app: require("./apps/ReactSVGGApp").default,
+    text: require("!!raw-loader!./apps/ReactSVGGApp").default,
+});
+
+group.add("SVGElement with target G tag", {
+    app: require("./apps/ReactSVGTargetGApp").default,
+    text: require("!!raw-loader!./apps/ReactSVGTargetGApp").default,
+});
diff --git a/packages/react-moveable/stories/4-SVG/1-PathDraggable.stories.tsx b/packages/react-moveable/stories/4-SVG/1-PathDraggable.stories.tsx
diff --git a/packages/react-moveable/stories/4-SVG/2-SVGDraggable.stories.tsx b/packages/react-moveable/stories/4-SVG/2-SVGDraggable.stories.tsx
diff --git a/packages/react-moveable/stories/4-SVG/3-SVGDraggableRotatable.stories.tsx b/packages/react-moveable/stories/4-SVG/3-SVGDraggableRotatable.stories.tsx
diff --git a/packages/react-moveable/stories/4-SVG/4-SVGGApp.stories.tsx b/packages/react-moveable/stories/4-SVG/4-SVGGApp.stories.tsx
diff --git a/packages/react-moveable/stories/4-SVG/apps/ReactSVGDraggableRotatableApp.tsx b/packages/react-moveable/stories/4-SVG/apps/ReactSVGDraggableRotatableApp.tsx
@@ -19,7 +19,7 @@ export default function App(props: Record<string, any>) {
                     width: "200px",
                     height: "200px",
                 }}>
-                    <circle cx="50" cy="50" r="50"  ref={targetRef}/>
+                    <circle cx="100" cy="100" r="50"  ref={targetRef}/>
                 </svg>
                 <Moveable
                     ref={moveableRef}

diff --git a/packages/react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx b/packages/react-moveable/stories/4-SVG/apps/ReactSVGGApp.tsx
@@ -21,11 +21,14 @@ export default function App(props: Record<string, any>) {
                 }}>
                     <g
                         transform="translate(10, 10) rotate(0)"
+                        x="50"
+                        y="50"
                         style={{
                             // transform: "translate(10px, 10px) rotate(20deg)",
                         }}
                     >
-                        <path d="M 0 0 L 200 0 L 200 200 z" ref={targetRef} style={{
+                        <path d="M 50 50 L 250 50 L 250 250 z" ref={targetRef} style={{
+                            transform: "translate(30px, 30px) rotate(20deg)",
                             fill: "white",
                             stroke: "red",
                             strokeWidth: 2,

diff --git a/packages/react-moveable/stories/4-SVG/apps/ReactSVGTargetGApp.tsx b/packages/react-moveable/stories/4-SVG/apps/ReactSVGTargetGApp.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    const moveableRef = React.useRef<Moveable>(null);
+
+    return (
+        <div className="root">
+            <div className="container" style={{
+                transformOrigin: "0 0",
+                transform: `scale(${props.containerScale})`,
+            }}>
+                <svg viewBox="0 0 200 200" style={{
+                    position: "relative",
+                    border: "1px solid black",
+                    width: "200px",
+                    height: "200px",
+                    top: "100px",
+                    left: "100px",
+                }}>
+                    <g className="g">
+                        <path d="M 0 0 L 200 0 L 200 200 z" style={{
+                            fill: "white",
+                            stroke: "red",
+                            strokeWidth: 2,
+                            transform: "translate(50px, 50px)",
+                        }} />
+                    </g>
+                </svg>
+                <Moveable
+                    ref={moveableRef}
+                    target={".g"}
+                    draggable={true}
+                    onDrag={e => {
+                        e.target.style.transform = e.transform;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/packages/react-moveable/stories/utils/story.tsx b/packages/react-moveable/stories/utils/story.tsx
@@ -3,30 +3,30 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { DEFAULT_REACT_CODESANDBOX } from "storybook-addon-preview";
-import { convertReactTemplate, convertPath } from "../utils";
+import { convertReactTemplate, convertPath, makeArgs } from "../utils";
 // import { DEFAULT_DRAGGABLE_CONTROLS, DEFAULT_CLIPPABLE_CONTROLS } from "../controls/default";
 
 
 export interface StoryParameter {
     app: any;
     text: string;
+    argsTypes?: Record<string, any>;
 }
 export function makeStoryGroup(title: string, module: NodeModule) {
     const stories = storiesOf(title, module);
 
     function add(storyTitle: string, {
         app,
         text,
+        argsTypes,
     }: StoryParameter) {
         stories.add(storyTitle, (props: any) => {
             const Component = app;
 
             return <Component {...props}/>;
         }, {
-            // argTypes: {
-            //     ...DEFAULT_DRAGGABLE_CONTROLS,
-            //     ...DEFAULT_CLIPPABLE_CONTROLS,
-            // },
+            argTypes: argsTypes || {},
+            args: makeArgs(argsTypes || {}),
             preview: {
                 tab: "React",
                 template: convertReactTemplate(convertPath(text)),