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>
   );
 }

components/Draggable/Preview.tsx

@@ -13,17 +13,21 @@ export default function Preview(props: PreviewPropsType) {
 
   useEffect(() => {
     setStyle({
-      top: x,
-      left: y,
+      top: y,
+      left: x,
       width: width,
       height: height,
+      // visibility: width * height === 0 ? 'hidden' : 'none'
     });
-  }, [height, props, width, x, y])
+  }, [props.height, props.width, props.x, props.y])
   return (
     <div
-      className="absolute border-2 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
+      className="absolute border-2 z-50 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
       style={style}
-    ></div>
+    >
+      {width * height === 0 || `${width} * ${height}`}
+      {x * y === 0 || `${x}, ${y}`}
+    </div>
   );
 }
 

components/DraggablePanel.tsx

@@ -2,6 +2,12 @@
 import classnames from "classnames";
 import { DndContext } from "@dnd-kit/core";
 import { Droppable } from "./Droppable";
+import PreviewStore from "@/stores/previewStore";
+import ComponentStore from '@/stores/componentStore';
+import Preview from "./Draggable/Preview";
+import { useObserver } from "mobx-react-lite";
+import { nearestMultiple } from "./Draggable/utils";
+import { ReactElement } from "react";
 
 export default function DraggablePanel(props: DraggablePanelType) {
   const { draggable, wdith = "full", height = "full", children } = props;
@@ -15,13 +21,46 @@ export default function DraggablePanel(props: DraggablePanelType) {
       "base-100": !draggable, // 当 disabled 为 true 时添加
     },
   );
-  return (
-    <DndContext >
+  return useObserver(() => (
+    <DndContext 
+      onDragMove={(event) => {
+        const node = event?.activatorEvent?.target?.parentNode;
+        const rect = node.getBoundingClientRect();
+        const { width, height } = rect;
+        const x = nearestMultiple(node.offsetLeft + event.delta.x);
+        const y = nearestMultiple(node.offsetTop + event.delta.y);
+        PreviewStore.changePreviewX(x);
+        PreviewStore.changePreviewY(y);
+        PreviewStore.changePreviewWidth(nearestMultiple(width));
+        PreviewStore.changePreviewHeight(nearestMultiple(height));
+      }}
+      onDragEnd={(event) => {
+        const node = event?.activatorEvent?.target?.parentNode;
+        const rect = node.getBoundingClientRect();
+        const { width, height } = rect;
+        const x = nearestMultiple(node.offsetLeft + event.delta.x);
+        const y = nearestMultiple(node.offsetTop + event.delta.y);
+        PreviewStore.changePreviewX(0);
+        PreviewStore.changePreviewY(0);
+        PreviewStore.changePreviewWidth(0);
+        PreviewStore.changePreviewHeight(0);
+        ComponentStore.changeComponent({
+          id: event?.active?.data?.current?.id,
+          component: event?.active?.data?.current?.component,
+          x,
+          y,
+          width: nearestMultiple(width),
+          height: nearestMultiple(height),
+        });
+    }}>
       <Droppable>
-        <div className={draggablePanelClass}>{children}</div>
+        <div className={draggablePanelClass}>
+          <Preview x={PreviewStore.x} y={PreviewStore.y} width={PreviewStore.width} height={PreviewStore.height} />
+          {children}
+        </div>
       </Droppable>
     </DndContext>
-  );
+  ));
 }
 
 export type DraggablePanelType = {