test: test custom element bounds #684

daybrush · Jul 22, 2022 · 230df1e · 230df1e
1 parent 25dced4
commit 230df1e
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 1 deletion.
diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -25,6 +25,10 @@ group.add("Test Custom Element Offset", {
     app: require("./ReactCustomElementApp").default,
     text: require("!!raw-loader!./ReactCustomElementApp").default,
 });
+group.add("Test Custom Element with Bounds", {
+    app: require("./ReactCustomElementBoundsApp").default,
+    text: require("!!raw-loader!./ReactCustomElementBoundsApp").default,
+});
 group.add("Check drag accuracy when using bounds", {
     app: require("./ReactAccuracyApp").default,
     text: require("!!raw-loader!./ReactAccuracyApp").default,

diff --git a/packages/react-moveable/stories/99-Tests/ReactCustomElementApp.tsx b/packages/react-moveable/stories/99-Tests/ReactCustomElementApp.tsx
@@ -65,7 +65,9 @@ declare global {
 }
 
 export default function App() {
-    return <div className="container">
+    return <div className="container" style={{
+        border: "1px solid black",
+    }}>
         <custom-element style={{
             display: "block",
             padding: "10px",
@@ -79,6 +81,8 @@ export default function App() {
         <Moveable
             target={"#draggable"}
             draggable={true}
+            snappable={true}
+            bounds={{ left: 0, top: 0 }}
             onDrag={e => {
                 e.target.style.transform = e.transform;
             }}

diff --git a/packages/react-moveable/stories/99-Tests/ReactCustomElementBoundsApp.tsx b/packages/react-moveable/stories/99-Tests/ReactCustomElementBoundsApp.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import * as React from "react";
+import Moveable from "@/react-moveable";
+import { createPortal } from "react-dom";
+
+const CustomElement = `
+class CustomElement extends HTMLElement {
+    styleText = ${"`"}
+.card {
+width: 100%;
+height: 100%;
+}
+
+.card-header {
+width:100%;
+height: 80px;
+background-color: #3794FF;
+}
+
+.card-content {
+width: 100%;
+height: calc(100% - 80px);
+background-color: #EDF0F3;
+position: relative;
+}
+${"`"};
+
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        const div = document.createElement('div');
+        div.classList.add('card');
+        div.innerHTML = ${"`"}
+<div class="card-header"></div>
+<div class="card-content">
+  <slot name="custom-element"></slot>
+</div>
+${"`"};
+        style.textContent = this.styleText;
+        this.shadow.appendChild(style);
+        this.shadow.appendChild(div);
+    }
+}
+if (!customElements.get("custom-element")) {
+    customElements.define('custom-element', CustomElement);
+}
+`;
+
+if (typeof window !== "undefined") {
+    eval(CustomElement);
+}
+
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "custom-element": HTMLElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            // HTML
+            "custom-element": React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+export default function App() {
+    const [customElement, setCustomElement] = React.useState<HTMLElement>();
+
+    React.useEffect(() => {
+        setCustomElement(document.querySelector("custom-element")!);
+    }, []);
+
+    return <div className="container" style={{
+        border: "1px solid black",
+    }}>
+        <custom-element style={{
+            display: "block",
+            padding: "10px",
+        }}>
+            <div id="draggable" slot="custom-element" style={{
+                width: "150px",
+                height: "150px",
+                backgroundColor: "#e79627",
+            }}></div>
+        </custom-element>
+        {customElement && createPortal(<Moveable
+            target={"#draggable"}
+            draggable={true}
+            snappable={true}
+            bounds={{ left: 0, top: 0 }}
+            onDrag={e => {
+                e.target.style.transform = e.transform;
+            }}
+        />, customElement.shadowRoot!.querySelector('.card-content')!)}
+    </div>;
+}
+