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 }} />,
+}