feat(canvas): add inherited elements, resizing and rotation

src/components/canvas/transformable-node.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { createContext, useContext, useEffect, useRef, type PointerEvent, type ReactNode } from "react";
+import { useReactFlow, useUpdateNodeInternals, type NodeProps, type XYPosition } from "@xyflow/react";
+import { RotateCw } from "lucide-react";
+import { elementCapabilities } from "@/lib/canvas-elements";
+import type { CanvasNode, NodeDirection } from "@/lib/canvas";
+import { normalizeRotation, resizeFromPointer, rotationFromPointer, type NodeTransform, type ResizeDirection } from "@/lib/canvas-geometry";
+import styles from "./canvas.module.css";
+
+export const NodeEditing = createContext({
+  begin: () => {}, edit: (_id: string, _text: string) => {},
+  branch: (_id: string, _direction: NodeDirection) => {},
+  transform: (_id: string, _transform: NodeTransform) => {},
+});
+const resizeDirections: ResizeDirection[] = ["top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left"];
+const resizeLabels = { top: "上边", right: "右边", bottom: "下边", left: "左边", "top-right": "右上角", "bottom-right": "右下角", "bottom-left": "左下角", "top-left": "左上角" };
+type Gesture = { node: CanvasNode; start: XYPosition; direction: ResizeDirection | "rotate" };
+
+export function TransformableNode({ id, data, selected, width, height, children, className = "" }: NodeProps<CanvasNode> & { children: ReactNode; className?: string }) {
+  const editing = useContext(NodeEditing);
+  const flow = useReactFlow<CanvasNode>();
+  const update = useUpdateNodeInternals();
+  const gesture = useRef<Gesture | null>(null);
+  const rotation = data.rotation || 0;
+  const plain = data.kind === "plain-text";
+  const capabilities = elementCapabilities(data.kind);
+  useEffect(() => { update(id); }, [id, rotation, width, height, update]);
+
+  function start(event: PointerEvent<HTMLButtonElement>, direction: Gesture["direction"]) {
+    if (event.button !== 0) return;
+    event.preventDefault(); event.stopPropagation();
+    const node = flow.getNode(id);
+    if (!node) return;
+    editing.begin();
+    gesture.current = { node, direction, start: flow.screenToFlowPosition({ x: event.clientX, y: event.clientY }) };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+  function move(event: PointerEvent<HTMLButtonElement>) {
+    if (!gesture.current) return;
+    event.stopPropagation();
+    const current = flow.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+    const { node, start, direction } = gesture.current;
+    editing.transform(id, direction === "rotate"
+      ? { rotation: rotationFromPointer(node, start, current, event.shiftKey) }
+      : resizeFromPointer(node, direction, { x: current.x - start.x, y: current.y - start.y }));
+  }
+  function finish(event: PointerEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    gesture.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+  }
+  function rotateBy(step: number) {
+    editing.begin();
+    editing.transform(id, { rotation: normalizeRotation(rotation + step) });
+  }
+  return (
+    <div className={`${styles.transformFrame} ${selected ? styles.selectedFrame : ""} ${plain ? styles.plainFrame : ""} ${className}`}
+      style={{ width: width || (plain ? 240 : 260), height: height || (plain ? 72 : 200), transform: `rotate(${rotation}deg)` }}>
+      {children}
+      {selected && <>
+        {capabilities.resizable && resizeDirections.map((direction) => <button key={direction} type="button"
+          className={`${styles.resizeHandle} ${styles["resize_" + direction]} nodrag nopan`}
+          aria-label={`缩放${resizeLabels[direction]}`} title={`拖动${resizeLabels[direction]}调整大小`}
+          onPointerDown={(event) => start(event, direction)} onPointerMove={move} onPointerUp={finish} onPointerCancel={finish} onLostPointerCapture={() => { gesture.current = null; }} />)}
+        {capabilities.rotatable && <>
+        <span className={styles.rotationStem} />
+        <button type="button" className={`${styles.rotationHandle} nodrag nopan`} aria-label="旋转节点" title="拖动旋转；Shift 吸附 15°；双击复位"
+          onPointerDown={(event) => start(event, "rotate")} onPointerMove={move} onPointerUp={finish} onPointerCancel={finish} onLostPointerCapture={() => { gesture.current = null; }}
+          onDoubleClick={(event) => { event.stopPropagation(); editing.begin(); editing.transform(id, { rotation: 0 }); }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); event.stopPropagation(); rotateBy((event.key === "ArrowLeft" ? -1 : 1) * (event.shiftKey ? 15 : 1)); }
+            if (event.key === "Home") { event.preventDefault(); event.stopPropagation(); editing.begin(); editing.transform(id, { rotation: 0 }); }
+          }}>
+          <RotateCw size={14} strokeWidth={1.6} />
+        </button>
+        <span className={styles.rotationValue}>{Math.round(rotation)}°</span>
+        </>}
+      </>}
+    </div>
+  );
+}