wip

components/DraggableWidget.tsx

@@ -1,14 +1,14 @@
 "use client";
-import { CSSProperties, ReactElement, useEffect, useRef, useState } from "react";
-import classnames from 'classnames';
-import _ from 'lodash';
-
+import { ReactElement, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import _ from "lodash";
+import { Draggable } from "./Draggable";
 
 export default function DraggableWidget(props: DraggableWidgetType) {
-  const { children, x, y, w, h } = props;
+  const { id, draggable, children, x, y, w, h } = props;
   const targetRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  
+
   const [size, setSize] = useState({ width: 16, height: 16 });
   const [isResize, setIsResize] = useState(false);
 
@@ -17,38 +17,39 @@ export default function DraggableWidget(props: DraggableWidgetType) {
     if (!element) return;
 
     // 创建 ResizeObserver 实例
-    let timer:any;
-    const observer = new ResizeObserver(_.throttle((entries: any) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        setSize({
-          width: nearestMultipleOf16(width),
-          height: nearestMultipleOf16(height)
-        });
-        if (timer) {
-          clearTimeout(timer);
+    let timer: any;
+    const observer = new ResizeObserver(
+      _.throttle((entries: any) => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          setSize({
+            width: nearestMultipleOf16(width),
+            height: nearestMultipleOf16(height),
+          });
+          if (timer) {
+            clearTimeout(timer);
+          }
+          setIsResize(true);
+          timer = setTimeout(() => {
+            entry.target.style.width = nearestMultipleOf16(width) + "px";
+            entry.target.style.height = nearestMultipleOf16(height) + "px";
+            // syncSize(entry.contentRect, containerRef.current);
+            setIsResize(false);
+          }, 150);
         }
-        setIsResize(true);
-        timer = setTimeout(() => {
-          entry.target.style.width = nearestMultipleOf16(width) + 'px';
-          entry.target.style.height = nearestMultipleOf16(height) + 'px';
-          // syncSize(entry.contentRect, containerRef.current);
-          setIsResize(false);
-        }, 150)
-      }
-    }, 30));
-
+      }, 30),
+    );
 
     const syncSize = (contentRect, containerNode) => {
       const { x, y, height, width } = contentRect;
       const area = {
-        rowStart: x/16 + 1,
-        columnStart: y/16 + 1,
-        rowEnd: width/16+x/16 + 1,
-        columnEnd: height/16+y/16 + 1
-      }
+        rowStart: x / 16 + 1,
+        columnStart: y / 16 + 1,
+        rowEnd: width / 16 + x / 16 + 1,
+        columnEnd: height / 16 + y / 16 + 1,
+      };
       containerNode.style.gridArea = `${area.rowStart} / ${area.columnStart} / ${area.rowEnd} / ${area.columnEnd}`;
-    }
+    };
 
     // 开始观察元素
     observer.observe(element);
@@ -59,36 +60,50 @@ export default function DraggableWidget(props: DraggableWidgetType) {
     };
   }, []); // 空依赖数组确保只运行一次
 
-
   const draggableWidgetClass = classnames(
-    'hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize block rounded-lg w-64 h-64 max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden ', {
-  }
+    "block w-full h-full max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden",
+    {
+      "hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize":
+        draggable,
+    },
   );
 
   const draggableWidgetIndicatorBoxClass = classnames(
-    'absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none',
+    "absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none",
     {
-      'invisible': !isResize
-    }
+      invisible: !isResize,
+    },
   );
 
   return (
-    <div className="relative" ref={containerRef} style={{ gridArea: `${x} \ ${w+x} \ ${y} \ ${h+y}`}}>
-      <div className={draggableWidgetClass} ref={targetRef}>
-        {
-          children
-        }
+    <Draggable id={id}>
+      <div
+        className="relative w-min"
+        ref={containerRef}
+        style={{ 
+          width: w,
+          height: h,
+          top: y,
+          left: x
+         }}
+      >
+        <div className={draggableWidgetClass} ref={targetRef}>
+          {children}
+        </div>
+        <div
+          className={draggableWidgetIndicatorBoxClass}
+          style={{
+            width: size.width,
+            height: size.height,
+          }}
+        >{`${size.width}x${size.height}`}</div>
       </div>
-      <div className={draggableWidgetIndicatorBoxClass} style={{
-        width: size.width,
-        height: size.height,
-      }
-      }>{`${size.width}x${size.height}`}</div>
-    </div>
+    </Draggable>
   );
 }
 
 export type DraggableWidgetType = {
+  id: string;
   draggable: boolean;
   wdith?: number | string;
   height?: number | string;
@@ -97,7 +112,7 @@ export type DraggableWidgetType = {
   y: number;
   w: number;
   h: number;
-}
+};
 
 /**
  * 计算最接近的 16 的倍数
@@ -106,4 +121,4 @@ export type DraggableWidgetType = {
  */
 function nearestMultipleOf16(n: number): number {
   return Math.floor((n + 8) / 16) * 16;
-}
+}