125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
"use client";
|
|
import { ReactElement, useEffect, useRef, useState } from "react";
|
|
import classnames from "classnames";
|
|
import _ from "lodash";
|
|
import { Draggable } from "./Draggable";
|
|
|
|
export default function DraggableWidget(props: DraggableWidgetType) {
|
|
const { id, draggable, children, x, y, w, h } = props;
|
|
const targetRef = useRef<HTMLDivElement>(null);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const [size, setSize] = useState({ width: 16, height: 16 });
|
|
const [isResize, setIsResize] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const element = targetRef.current;
|
|
if (!element) return;
|
|
|
|
// 创建 ResizeObserver 实例
|
|
let timer: any;
|
|
const observer = new ResizeObserver(
|
|
_.throttle((entries: any) => {
|
|
for (const entry of entries) {
|
|
const { width, height } = entry.contentRect;
|
|
setSize({
|
|
width: nearestMultipleOf16(width),
|
|
height: nearestMultipleOf16(height),
|
|
});
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
setIsResize(true);
|
|
timer = setTimeout(() => {
|
|
entry.target.style.width = nearestMultipleOf16(width) + "px";
|
|
entry.target.style.height = nearestMultipleOf16(height) + "px";
|
|
// syncSize(entry.contentRect, containerRef.current);
|
|
setIsResize(false);
|
|
}, 150);
|
|
}
|
|
}, 30),
|
|
);
|
|
|
|
const syncSize = (contentRect, containerNode) => {
|
|
const { x, y, height, width } = contentRect;
|
|
const area = {
|
|
rowStart: x / 16 + 1,
|
|
columnStart: y / 16 + 1,
|
|
rowEnd: width / 16 + x / 16 + 1,
|
|
columnEnd: height / 16 + y / 16 + 1,
|
|
};
|
|
containerNode.style.gridArea = `${area.rowStart} / ${area.columnStart} / ${area.rowEnd} / ${area.columnEnd}`;
|
|
};
|
|
|
|
// 开始观察元素
|
|
observer.observe(element);
|
|
|
|
// 组件卸载时断开连接
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []); // 空依赖数组确保只运行一次
|
|
|
|
const draggableWidgetClass = classnames(
|
|
"block w-full h-full max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden",
|
|
{
|
|
"hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize":
|
|
draggable,
|
|
},
|
|
);
|
|
|
|
const draggableWidgetIndicatorBoxClass = classnames(
|
|
"absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none",
|
|
{
|
|
invisible: !isResize,
|
|
},
|
|
);
|
|
|
|
return (
|
|
<Draggable id={id}>
|
|
<div
|
|
className="relative w-min"
|
|
ref={containerRef}
|
|
style={{
|
|
width: w,
|
|
height: h,
|
|
top: y,
|
|
left: x
|
|
}}
|
|
>
|
|
<div className={draggableWidgetClass} ref={targetRef}>
|
|
{children}
|
|
</div>
|
|
<div
|
|
className={draggableWidgetIndicatorBoxClass}
|
|
style={{
|
|
width: size.width,
|
|
height: size.height,
|
|
}}
|
|
>{`${size.width}x${size.height}`}</div>
|
|
</div>
|
|
</Draggable>
|
|
);
|
|
}
|
|
|
|
export type DraggableWidgetType = {
|
|
id: string;
|
|
draggable: boolean;
|
|
wdith?: number | string;
|
|
height?: number | string;
|
|
children: ReactElement;
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
};
|
|
|
|
/**
|
|
* 计算最接近的 16 的倍数
|
|
* @param n 输入的数字
|
|
* @returns 最近的 16 的倍数
|
|
*/
|
|
function nearestMultipleOf16(n: number): number {
|
|
return Math.floor((n + 8) / 16) * 16;
|
|
}
|