112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
"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:_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
|
|
? {
|
|
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
|
opacity: 0.3,
|
|
}
|
|
: {};
|
|
useEffect(() => {
|
|
const element = targetRef.current;
|
|
if (!element) return;
|
|
|
|
const observer = new ResizeObserver(
|
|
_.throttle((entries: any) => {
|
|
for (const entry of entries) {
|
|
const { width, height } = entry.contentRect;
|
|
setSize({
|
|
width: nearestMultiple(width),
|
|
height: nearestMultiple(height),
|
|
});
|
|
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);
|
|
}
|
|
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={(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}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className="size-6 pointer-events-none"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M3.75 9h16.5m-16.5 6.75h16.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
{component && component(data ?? {})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type DraggablePropsType = {
|
|
id: string;
|
|
component: (data: Record<string, unknown>) => ReactElement;
|
|
data?: Record<string, unknown>;
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
};
|