feat(workspace): integrate persisted canvas, element editing and session renewal

src/components/canvas/frame-node.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useContext, useEffect, useRef, useState } from "react";
+import { NodeToolbar, Position, useViewport, type NodeProps } from "@xyflow/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import type { CanvasNode } from "@/lib/canvas";
+import type { FrameLabelMode } from "@/lib/canvas-elements";
+import { NodeEditing, TransformableNode } from "./transformable-node";
+import styles from "./canvas.module.css";
+
+export function FrameNode(props: NodeProps<CanvasNode>) {
+  const { id, data, selected } = props;
+  const editing = useContext(NodeEditing);
+  const { zoom } = useViewport();
+  const reduce = useReducedMotion();
+  const [title, setTitle] = useState(data.title);
+  useEffect(() => setTitle(data.title), [data.title]);
+  const cancelBlur = useRef(false);
+  const mode = data.labelMode || "fixed";
+  function saveTitle() {
+    const name = title.trim() || "未命名分区";
+    if (name !== data.title) editing.frame(id, { title: name });
+    setTitle(name);
+  }
+  return <>
+    <NodeToolbar style={{ zIndex: 100, pointerEvents: "auto" }} isVisible={true} position={Position.Top} offset={45}>
+      <AnimatePresence>{selected && <motion.div className={`${styles.styleToolbar} nodrag nopan nowheel`} role="toolbar" aria-label="分区设置"
+        initial={{ opacity: 0, y: reduce ? 0 : 5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reduce ? 0 : 5 }} transition={{ duration: reduce ? 0 : 0.14 }}
+        onPointerDown={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
+        <input className={styles.frameNameInput} aria-label="分区名称" value={title} maxLength={300} onChange={(event) => setTitle(event.target.value)} onBlur={() => { if (cancelBlur.current) cancelBlur.current = false; else saveTitle(); }}
+          onKeyDown={(event) => { if (event.key === "Enter" && !event.nativeEvent.isComposing) { event.currentTarget.blur(); } if (event.key === "Escape") { cancelBlur.current = true; setTitle(data.title); event.currentTarget.blur(); } }} />
+        <select aria-label="分区名称显示模式" value={mode} onChange={(event) => editing.frame(id, { labelMode: event.target.value as FrameLabelMode })}>
+          <option value="hidden">隐藏名称</option><option value="fixed">固定字号</option><option value="scaled">随画布缩放</option>
+        </select>
+      </motion.div>}</AnimatePresence>
+    </NodeToolbar>
+    <TransformableNode {...props} hideStyleToolbar className={styles.frameNode}>
+      {mode !== "hidden" && <div className={styles.frameLabel} style={{ scale: mode === "fixed" ? 1 / zoom : 1 }} title={data.title}>{data.title}</div>}
+      {(["top", "right", "bottom", "left"] as const).map((side) => <div key={side} className={`${styles.frameBorderHit} ${styles["frameBorder_" + side]}`} title="拖动分区，已有成员一起移动" />)}
+    </TransformableNode>
+  </>;
+}