wip

components/Draggable/Draggable.tsx

@@ -1,38 +1,35 @@
 "use client";
 import "@/app/globals.css";
+import _ from "lodash";
+
 import { useDraggable } from "@dnd-kit/core";
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { nearestMultiple } from "./utils";
+import PreviewStore from "@/stores/previewStore";
 
 export default function Draggable(props: DraggablePropsType) {
   const targetRef = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<NodeJS.Timeout>(null);
   const [size, setSize] = useState({ width: 16, height: 16 });
-  const { id, component, data, x, y, width, height } = props;
+  const { id, component, data, x, y, width:_width, height:_height  } = props;
+  const [width, setWidth] = useState(_width);
+  const [height, setHeight] = useState(_height);
+
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id,
+    data: props
   });
 
   const style = transform
     ? {
-        top: y,
-        left: x,
-        width: width,
-        height: height,
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        opacity: 0.6,
-      }
-    : {
-        top: y,
-        left: x,
-        width: width,
-        height: height,
-      };
+      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      opacity: 0.3,
+    }
+    : {};
   useEffect(() => {
     const element = targetRef.current;
     if (!element) return;
 
-    // 创建 ResizeObserver 实例
-    let timer: any;
     const observer = new ResizeObserver(
       _.throttle((entries: any) => {
         for (const entry of entries) {
@@ -41,33 +38,43 @@ export default function Draggable(props: DraggablePropsType) {
             width: nearestMultiple(width),
             height: nearestMultiple(height),
           });
-          if (timer) {
-            clearTimeout(timer);
+          const x = nearestMultiple(element.offsetLeft);
+          const y = nearestMultiple(element.offsetTop);
+          PreviewStore.changePreviewX(x);
+          PreviewStore.changePreviewY(y);
+          PreviewStore.changePreviewWidth(nearestMultiple(width));
+          PreviewStore.changePreviewHeight(nearestMultiple(height));
+          if (timerRef.current) {
+            clearTimeout(timerRef.current);
           }
-          // setIsResize(true);
-          timer = setTimeout(() => {
-            entry.target.style.width = nearestMultiple(width) + "px";
-            entry.target.style.height = nearestMultiple(height) + "px";
-            // syncSize(entry.contentRect, containerRef.current);
-            // setIsResize(false);
-          }, 150);
+          timerRef.current = setTimeout(() => {
+            console.log(PreviewStore.width, PreviewStore.height);
+            setWidth(PreviewStore.width);
+            setHeight(PreviewStore.height);
+          }, 2000);
         }
       }, 30),
     );
 
-    // 开始观察元素
     observer.observe(element);
-
-    // 组件卸载时断开连接
     return () => {
       observer.disconnect();
     };
-  }, []); // 空依赖数组确保只运行一次
+  }, []);
 
   const className = transform ? "shadow-xl absolute w-min min-w-[128px] min-h-[128px]" : "absolute w-min resize overflow-hidden min-w-[128px] min-h-[128px]";
 
   return (
-    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+    <div className={className} ref={(el) => {
+      setNodeRef(el);  // DnD 的 ref
+      (targetRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    }} style={{
+      top: y,
+      left: x,
+      width: width,
+      height: height,
+      ...style,
+    }} {...attributes} title={`${width}x${height}`}>
       <button
         className="btn absolute top-1 right-1 z-50 btn-square btn-soft"
         {...listeners}
@@ -79,7 +86,7 @@ export default function Draggable(props: DraggablePropsType) {
           viewBox="0 0 24 24"
           strokeWidth={1.5}
           stroke="currentColor"
-          className="size-6"
+          className="size-6 pointer-events-none"
         >
           <path
             strokeLinecap="round"
@@ -88,7 +95,7 @@ export default function Draggable(props: DraggablePropsType) {
           />
         </svg>
       </button>
-      {component && component(data??{})}
+      {component && component(data ?? {})}
     </div>
   );
 }