wip

components/Draggable/Draggable.tsx

@@ -3,15 +3,17 @@ import "@/app/globals.css";
 import _ from "lodash";
 
 import { useDraggable } from "@dnd-kit/core";
-import { ReactElement, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { nearestMultiple } from "./utils";
 import PreviewStore from "@/stores/previewStore";
+import Logo from "../Logo";
+import Text from "../Text";
 
 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:_width, height:_height  } = props;
+  const { id, componentsId, data, x, y, width:_width, height:_height  } = props;
   const [width, setWidth] = useState(_width);
   const [height, setHeight] = useState(_height);
 
@@ -23,7 +25,7 @@ export default function Draggable(props: DraggablePropsType) {
   const style = transform
     ? {
       transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-      opacity: 0.3,
+      opacity: 0.6,
     }
     : {};
   useEffect(() => {
@@ -48,12 +50,12 @@ export default function Draggable(props: DraggablePropsType) {
             clearTimeout(timerRef.current);
           }
           timerRef.current = setTimeout(() => {
-            console.log(PreviewStore.width, PreviewStore.height);
-            setWidth(PreviewStore.width);
-            setHeight(PreviewStore.height);
-          }, 2000);
+            setWidth(nearestMultiple(width));
+            setHeight(nearestMultiple(height));
+            PreviewStore.clearPreview();
+          }, 500);
         }
-      }, 30),
+      }, 300),
     );
 
     observer.observe(element);
@@ -74,7 +76,7 @@ export default function Draggable(props: DraggablePropsType) {
       width: width,
       height: height,
       ...style,
-    }} {...attributes} title={`${width}x${height}`}>
+    }} {...attributes}>
       <button
         className="btn absolute top-1 right-1 z-50 btn-square btn-soft"
         {...listeners}
@@ -95,17 +97,22 @@ export default function Draggable(props: DraggablePropsType) {
           />
         </svg>
       </button>
-      {component && component(data ?? {})}
+      {componentsLibrary[componentsId] && componentsLibrary[componentsId](data ?? {})}
     </div>
   );
 }
 
 export type DraggablePropsType = {
   id: string;
-  component: (data: Record<string, unknown>) => ReactElement;
+  componentsId: string;
   data?: Record<string, unknown>;
   x: number;
   y: number;
   width: number;
   height: number;
 };
+
+export const componentsLibrary = {
+  'logo': () => <Logo />,
+  'text': (data: DraggablePropsType["data"]) => <Text data={{ content: 'default',...data }} />,
+}

components/Draggable/Preview.tsx

@@ -17,7 +17,7 @@ export default function Preview(props: PreviewPropsType) {
       left: x,
       width: width,
       height: height,
-      // visibility: width * height === 0 ? 'hidden' : 'none'
+      display: width + height + x + y === 0 ? 'none' : 'block'
     });
   }, [props.height, props.width, props.x, props.y])
   return (
@@ -25,8 +25,16 @@ export default function Preview(props: PreviewPropsType) {
       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}
     >
-      {width * height === 0 || `${width} * ${height}`}
-      {x * y === 0 || `${x}, ${y}`}
+      <span
+        className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white top-0 p-0.5"
+      >
+        {width * height === 0 || `${width} * ${height}`}
+      </span>
+      <span
+        className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white bottom-0 p-0.5"
+      >
+        {x * y === 0 || `${x}, ${y}`}
+      </span>
     </div>
   );
 }

components/Draggable/utils/index.ts

@@ -4,6 +4,6 @@
  * @param [x=16] 推荐使用偶数
  * @returns 最近的 x 的倍数
  */
-export function nearestMultiple(n: number, x: number = 16): number {
+export function nearestMultiple(n: number, x: number = 32): number {
   return Math.floor((n + x/2) / x) * x;
 }