291 lines
11 KiB
TypeScript
291 lines
11 KiB
TypeScript
|
import { useCallback, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type TouchEvent as ReactTouchEvent } from "react";
|
|||
|
|
|
|||
|
|
type DialogStyle = "style1" | "style2" | "style3" | "style4";
|
|||
|
|
|
|||
|
|
interface DialogItem {
|
|||
|
|
id: number;
|
|||
|
|
style: DialogStyle;
|
|||
|
|
x: number;
|
|||
|
|
y: number;
|
|||
|
|
text: string;
|
|||
|
|
color: string;
|
|||
|
|
confirmed: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface DragState {
|
|||
|
|
id: number;
|
|||
|
|
offsetX: number;
|
|||
|
|
offsetY: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dialogStyles: Array<{
|
|||
|
|
key: DialogStyle;
|
|||
|
|
label: string;
|
|||
|
|
description: string;
|
|||
|
|
swatchClass: string;
|
|||
|
|
}> = [
|
|||
|
|
{ key: "style1", label: "白色圆角对话框", description: "适合浅色说明与标注", swatchClass: "is-white" },
|
|||
|
|
{ key: "style2", label: "蓝色气泡对话框", description: "适合角色台词与重点提示", swatchClass: "is-blue" },
|
|||
|
|
{ key: "style3", label: "黄色提示对话框", description: "适合醒目提醒与强调", swatchClass: "is-amber" },
|
|||
|
|
{ key: "style4", label: "灰色简约对话框", description: "适合信息备注与辅助说明", swatchClass: "is-gray" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const textColorOptions = [
|
|||
|
|
{ value: "#ffffff", label: "白色" },
|
|||
|
|
{ value: "#111827", label: "黑色" },
|
|||
|
|
{ value: "#ef4444", label: "红色" },
|
|||
|
|
{ value: "#f59e0b", label: "黄色" },
|
|||
|
|
{ value: "#165dff", label: "蓝色" },
|
|||
|
|
{ value: "#00ff88", label: "绿色" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
function DialogGeneratorPage() {
|
|||
|
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
|||
|
|
const previewRef = useRef<HTMLDivElement | null>(null);
|
|||
|
|
const dragRef = useRef<DragState | null>(null);
|
|||
|
|
const nextIdRef = useRef(0);
|
|||
|
|
const [backgroundUrl, setBackgroundUrl] = useState("");
|
|||
|
|
const [dialogs, setDialogs] = useState<DialogItem[]>([]);
|
|||
|
|
const [selectedTextColor, setSelectedTextColor] = useState(textColorOptions[0].value);
|
|||
|
|
const [activeDragId, setActiveDragId] = useState<number | null>(null);
|
|||
|
|
|
|||
|
|
const handleFile = useCallback((file?: File | null) => {
|
|||
|
|
if (!file || !file.type.startsWith("image/")) return;
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = () => {
|
|||
|
|
if (typeof reader.result === "string") {
|
|||
|
|
setBackgroundUrl(reader.result);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const addDialog = useCallback((style: DialogStyle) => {
|
|||
|
|
nextIdRef.current += 1;
|
|||
|
|
const id = nextIdRef.current;
|
|||
|
|
setDialogs((current) => [
|
|||
|
|
...current,
|
|||
|
|
{
|
|||
|
|
id,
|
|||
|
|
style,
|
|||
|
|
x: 30 + (id * 25) % 200,
|
|||
|
|
y: 30 + (id * 20) % 150,
|
|||
|
|
text: "",
|
|||
|
|
color: selectedTextColor,
|
|||
|
|
confirmed: false,
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
}, [selectedTextColor]);
|
|||
|
|
|
|||
|
|
const updateDialog = useCallback((id: number, patch: Partial<DialogItem>) => {
|
|||
|
|
setDialogs((current) => current.map((item) => (item.id === id ? { ...item, ...patch } : item)));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const deleteDialog = useCallback((id: number) => {
|
|||
|
|
setDialogs((current) => current.filter((item) => item.id !== id));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const startDrag = useCallback((id: number, clientX: number, clientY: number) => {
|
|||
|
|
const dialogEl = document.querySelector<HTMLElement>(`[data-dialog-id="${id}"]`);
|
|||
|
|
if (!dialogEl) return;
|
|||
|
|
const rect = dialogEl.getBoundingClientRect();
|
|||
|
|
dragRef.current = {
|
|||
|
|
id,
|
|||
|
|
offsetX: clientX - rect.left,
|
|||
|
|
offsetY: clientY - rect.top,
|
|||
|
|
};
|
|||
|
|
setActiveDragId(id);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const moveDrag = useCallback((clientX: number, clientY: number) => {
|
|||
|
|
const drag = dragRef.current;
|
|||
|
|
const preview = previewRef.current;
|
|||
|
|
if (!drag || !preview) return;
|
|||
|
|
const dialogEl = document.querySelector<HTMLElement>(`[data-dialog-id="${drag.id}"]`);
|
|||
|
|
if (!dialogEl) return;
|
|||
|
|
|
|||
|
|
const bounds = preview.getBoundingClientRect();
|
|||
|
|
const nextX = Math.max(0, Math.min(clientX - drag.offsetX - bounds.left, bounds.width - dialogEl.offsetWidth));
|
|||
|
|
const nextY = Math.max(0, Math.min(clientY - drag.offsetY - bounds.top, bounds.height - dialogEl.offsetHeight));
|
|||
|
|
updateDialog(drag.id, { x: nextX, y: nextY });
|
|||
|
|
}, [updateDialog]);
|
|||
|
|
|
|||
|
|
const endDrag = useCallback(() => {
|
|||
|
|
dragRef.current = null;
|
|||
|
|
setActiveDragId(null);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleCanvasMouseMove = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
|
|||
|
|
moveDrag(event.clientX, event.clientY);
|
|||
|
|
}, [moveDrag]);
|
|||
|
|
|
|||
|
|
const handleCanvasTouchMove = useCallback((event: ReactTouchEvent<HTMLDivElement>) => {
|
|||
|
|
const touch = event.touches[0];
|
|||
|
|
if (!touch) return;
|
|||
|
|
moveDrag(touch.clientX, touch.clientY);
|
|||
|
|
}, [moveDrag]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section className="dialog-generator-page page-motion">
|
|||
|
|
<div className="dialog-generator-shell">
|
|||
|
|
<aside className="dialog-generator-panel">
|
|||
|
|
<div className="dialog-generator-heading">
|
|||
|
|
<span className="dialog-generator-kicker">Interactive Dialog</span>
|
|||
|
|
<h1>交互式对话框生成器</h1>
|
|||
|
|
<p>上传背景图，在画面上添加可拖拽、可编辑的文字图层，用于图片标注、剧情分镜和互动内容设计。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="dialog-generator-section">
|
|||
|
|
<h2>上传背景图片</h2>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="dialog-generator-drop"
|
|||
|
|
onClick={() => fileInputRef.current?.click()}
|
|||
|
|
onDragOver={(event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
}}
|
|||
|
|
onDrop={(event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
handleFile(event.dataTransfer.files[0]);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span className="dialog-generator-drop-icon">🖼</span>
|
|||
|
|
<strong>点击或拖拽图片到此处</strong>
|
|||
|
|
<small>支持 JPG、PNG、WEBP 格式</small>
|
|||
|
|
</button>
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
hidden
|
|||
|
|
onChange={(event) => handleFile(event.target.files?.[0])}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="dialog-generator-section">
|
|||
|
|
<h2>点击添加文字</h2>
|
|||
|
|
<p className="dialog-generator-hint">每点一次即在预览区新增一个可编辑文字图层。</p>
|
|||
|
|
<div className="dialog-generator-color-picker" role="radiogroup" aria-label="文字颜色">
|
|||
|
|
{textColorOptions.map((item) => (
|
|||
|
|
<button
|
|||
|
|
key={item.value}
|
|||
|
|
type="button"
|
|||
|
|
className={`dialog-generator-color${selectedTextColor === item.value ? " is-active" : ""}`}
|
|||
|
|
style={{ "--text-color": item.value } as CSSProperties}
|
|||
|
|
aria-checked={selectedTextColor === item.value}
|
|||
|
|
role="radio"
|
|||
|
|
onClick={() => setSelectedTextColor(item.value)}
|
|||
|
|
>
|
|||
|
|
<span />
|
|||
|
|
<strong>{item.label}</strong>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="dialog-generator-style-list">
|
|||
|
|
{dialogStyles.map((item) => (
|
|||
|
|
<button key={item.key} type="button" className="dialog-generator-style" onClick={() => addDialog(item.key)}>
|
|||
|
|
<span className={`dialog-generator-swatch ${item.swatchClass}`} />
|
|||
|
|
<span>
|
|||
|
|
<strong>{item.label}</strong>
|
|||
|
|
<small>{item.description}</small>
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button type="button" className="dialog-generator-clear" onClick={() => setDialogs([])}>
|
|||
|
|
清空全部文字
|
|||
|
|
</button>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<main className="dialog-generator-preview-card">
|
|||
|
|
<div className="dialog-generator-preview-head">
|
|||
|
|
<div>
|
|||
|
|
<span>Preview</span>
|
|||
|
|
<h2>预览区域</h2>
|
|||
|
|
</div>
|
|||
|
|
<p>拖动文字定位，输入文字后点击确认，确认后只保留文字图层，双击可重新编辑。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
ref={previewRef}
|
|||
|
|
className="dialog-generator-preview"
|
|||
|
|
onMouseMove={handleCanvasMouseMove}
|
|||
|
|
onMouseUp={endDrag}
|
|||
|
|
onMouseLeave={endDrag}
|
|||
|
|
onTouchMove={handleCanvasTouchMove}
|
|||
|
|
onTouchEnd={endDrag}
|
|||
|
|
>
|
|||
|
|
{backgroundUrl ? <div className="dialog-generator-image" style={{ backgroundImage: `url(${backgroundUrl})` }} /> : null}
|
|||
|
|
{!backgroundUrl ? (
|
|||
|
|
<div className="dialog-generator-empty">
|
|||
|
|
<span>🖼</span>
|
|||
|
|
<p>上传图片后开始编辑</p>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{dialogs.map((dialog) => (
|
|||
|
|
<div
|
|||
|
|
key={dialog.id}
|
|||
|
|
data-dialog-id={dialog.id}
|
|||
|
|
className={`dialog-generator-bubble ${dialog.style}${dialog.confirmed ? " is-confirmed" : ""}${activeDragId === dialog.id ? " is-dragging" : ""}`}
|
|||
|
|
style={{ left: dialog.x, top: dialog.y, "--dialog-text-color": dialog.color } as CSSProperties}
|
|||
|
|
onMouseDown={(event) => {
|
|||
|
|
const target = event.target as HTMLElement;
|
|||
|
|
if (target.closest("textarea,button")) return;
|
|||
|
|
startDrag(dialog.id, event.clientX, event.clientY);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}}
|
|||
|
|
onTouchStart={(event) => {
|
|||
|
|
const target = event.target as HTMLElement;
|
|||
|
|
if (target.closest("textarea,button")) return;
|
|||
|
|
const touch = event.touches[0];
|
|||
|
|
if (touch) startDrag(dialog.id, touch.clientX, touch.clientY);
|
|||
|
|
}}
|
|||
|
|
onDoubleClick={() => {
|
|||
|
|
if (dialog.confirmed) updateDialog(dialog.id, { confirmed: false });
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{!dialog.confirmed ? (
|
|||
|
|
<button type="button" className="dialog-generator-delete" onClick={() => deleteDialog(dialog.id)} aria-label="删除文字">
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
) : null}
|
|||
|
|
{dialog.confirmed ? (
|
|||
|
|
<div className="dialog-generator-text-display">{dialog.text}</div>
|
|||
|
|
) : (
|
|||
|
|
<textarea
|
|||
|
|
className="dialog-generator-text"
|
|||
|
|
rows={2}
|
|||
|
|
placeholder="输入文本..."
|
|||
|
|
value={dialog.text}
|
|||
|
|
onChange={(event) => updateDialog(dialog.id, { text: event.target.value })}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{!dialog.confirmed ? (
|
|||
|
|
<div className="dialog-generator-bubble-bottom">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="dialog-generator-confirm"
|
|||
|
|
onClick={() => {
|
|||
|
|
if (dialog.text.trim()) {
|
|||
|
|
updateDialog(dialog.id, { text: dialog.text.trim(), confirmed: true });
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
✓ 确认
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default DialogGeneratorPage;
|