wip

components/Draggable/Draggable.tsx

@@ -6,8 +6,8 @@ import { useDraggable } from "@dnd-kit/core";
 import { useEffect, useRef, useState } from "react";
 import { nearestMultiple } from "./utils";
 import PreviewStore from "@/stores/previewStore";
-import Logo from "../Logo";
-import Text from "../Text";
+import Logo from "../../widgets/Logo";
+import Text from "../../widgets/Text";
 
 export default function Draggable(props: DraggablePropsType) {
   const targetRef = useRef<HTMLDivElement>(null);
@@ -78,7 +78,7 @@ export default function Draggable(props: DraggablePropsType) {
       ...style,
     }} {...attributes}>
       <button
-        className="btn absolute top-1 right-1 z-50 btn-square btn-soft"
+        className="btn absolute top-1 right-1 z-40 btn-square btn-soft"
         {...listeners}
         onMouseDown={(e) => e.stopPropagation()}
       >

components/Draggable/Preview.tsx

@@ -28,12 +28,12 @@ export default function Preview(props: PreviewPropsType) {
       <span
         className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white top-0 p-0.5"
       >
-        {width * height === 0 || `${width} * ${height}`}
+        {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}`}
+        {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 = 32): number {
+export function nearestMultiple(n: number, x: number = 18): number {
   return Math.floor((n + x/2) / x) * x;
 }