demo: add group padding, fill-box demos

daybrush · Sep 19, 2023 · 4b8dbcb · 4b8dbcb
1 parent b725981
commit 4b8dbcb
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 0 deletions.
diff --git a/packages/react-moveable/stories/4-SVG/0-SVG.stories.tsx b/packages/react-moveable/stories/4-SVG/0-SVG.stories.tsx
@@ -57,3 +57,9 @@ export const SVGOrigin = add("SVGPathElement with center origin", {
     app: require("./ReactOriginApp").default,
     text: require("!!raw-loader!./ReactOriginApp").default,
 });
+
+
+export const SVGFillboxOrigin = add("SVGPathElement with center origin and transform fill-box", {
+    app: require("./ReactOriginFillboxApp").default,
+    text: require("!!raw-loader!./ReactOriginFillboxApp").default,
+});
diff --git a/packages/react-moveable/stories/4-SVG/ReactOriginFillboxApp.tsx b/packages/react-moveable/stories/4-SVG/ReactOriginFillboxApp.tsx
@@ -0,0 +1,59 @@
+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) => {
+                        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>
+    );
+}
diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -239,6 +239,12 @@ export const TestIframe = add("Test Iframe", {
 });
 
 
+export const TestGroupPadding = add("Test Show Group's Padding", {
+    app: require("./ReactGroupPaddingApp").default,
+    path: require.resolve("./ReactGroupPaddingApp"),
+});
+
+
 export const TestTranslate50 = add("Test translate(-50%, -50%)", {
     app: require("./ReactTranslate50App").default,
     path: require.resolve("./ReactTranslate50App"),

diff --git a/packages/react-moveable/stories/99-Tests/ReactGroupPaddingApp.tsx b/packages/react-moveable/stories/99-Tests/ReactGroupPaddingApp.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return (
+        <div className="root">
+            <div className="container">
+                <div className="target target1" style={{
+                    borderRadius: "10px",
+                }}>Target1</div>
+                <div className="target target2">Target2</div>
+                <div className="target target3">Target3</div>
+                <Moveable
+                    target={".target"}
+                    draggable={true}
+                    resizable={true}
+                    rotatable={true}
+                    padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
+                    onRenderGroup={e => {
+                        e.events.forEach(ev => {
+                            ev.target.style.cssText += ev.cssText;
+                        });
+                    }}
+                />
+            </div>
+        </div>
+    );
+}