Added the draggable property to modals

.changeset/orange-walls-join.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-framework": patch
+"@ensembleui/react-kitchen-sink": patch
+---
+
+Added the draggable property to modals

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -34,6 +34,7 @@ View:
                 name: widgets
                 height: 200px
                 width: 900px
+                draggable: true
         - Button:
             label: show dialog
             onTap:

packages/runtime/package.json

@@ -56,5 +56,8 @@
     "runes2": "^1.1.4",
     "tsconfig": "workspace:*",
     "tsup": "^7.2.0"
+  },
+  "dependencies": {
+    "react-draggable": "^4.4.6"
   }
 }

packages/runtime/src/runtime/modal/index.tsx

@@ -1,5 +1,5 @@
 import { Modal } from "antd";
-import type { PropsWithChildren } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 import {
   createContext,
   useCallback,
@@ -17,11 +17,16 @@ import { CloseOutlined } from "@ant-design/icons";
 import { generateRandomString, useEvaluate } from "@ensembleui/react-framework";
 import { isString, omit, pick } from "lodash-es";
 import { useNavigate } from "react-router-dom";
+import Draggable, {
+  type DraggableData,
+  type DraggableEvent,
+} from "react-draggable";
 import { getComponentStyles } from "../../shared/styles";
 import { getCustomStyles, getFullScreenStyles } from "./utils";
 
 export interface ModalProps {
   title?: string | React.ReactNode;
+  draggable?: boolean;
   maskClosable?: boolean;
   mask?: boolean;
   hideCloseIcon?: boolean;
@@ -284,6 +289,14 @@ export const ModalWrapper: React.FC<PropsWithChildren> = ({ children }) => {
       </div>
     );
 
+  const draggleRef = useRef<HTMLDivElement>(null);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+
   return (
     <ModalContext.Provider value={modalContext}>
       {children}
@@ -292,6 +305,33 @@ export const ModalWrapper: React.FC<PropsWithChildren> = ({ children }) => {
         if (!modal.visible) {
           return null;
         }
+        const modalRender = (modalBody: ReactNode) => {
+          return modal.options.draggable ? (
+            <Draggable
+              bounds={bounds}
+              disabled={false}
+              nodeRef={draggleRef}
+              onStart={(_event: DraggableEvent, uiData: DraggableData) => {
+                const { clientWidth, clientHeight } =
+                  window.document.documentElement;
+                const targetRect = draggleRef.current?.getBoundingClientRect();
+                if (!targetRect) {
+                  return;
+                }
+                setBounds({
+                  left: -targetRect.left + uiData.x,
+                  right: clientWidth - (targetRect.right - uiData.x),
+                  top: -targetRect.top + uiData.y,
+                  bottom: clientHeight - (targetRect.bottom - uiData.y),
+                });
+              }}
+            >
+              <div ref={draggleRef}>{modalBody}</div>
+            </Draggable>
+          ) : (
+            <div ref={draggleRef}>{modalBody}</div>
+          );
+        };
         const { options, key } = modal;
         const modalContent = (
           <>
@@ -307,6 +347,7 @@ export const ModalWrapper: React.FC<PropsWithChildren> = ({ children }) => {
               key={modal.key}
               mask={options.mask}
               maskClosable={options.maskClosable}
+              modalRender={modalRender}
               onCancel={(): void => closeModal(index)}
               open={modal.visible}
               style={{