Cull offscreen canvas nodes while preserving active editing

src/components/canvas/frame-node.tsx

@@ -8,10 +8,12 @@ import type { CanvasNode } from "@/lib/canvas";
 import { NodeEditing, TransformableNode, ResizeToggle } from "./transformable-node";
 import { FrameFeedback } from "./frame-feedback";
 import { FrameLabelMenu } from "./frame-label-menu";
+import { ContentHandles } from "./content-handles";
 import styles from "./canvas.module.css";
 
-export function FrameNode(props: NodeProps<CanvasNode>) {
-  const { id, data, selected } = props;
+export function FrameNode(props: NodeProps<CanvasNode> & { directAnchors?: boolean }) {
+  const { directAnchors = false, ...nodeProps } = props;
+  const { id, data, selected } = nodeProps;
   const editing = useContext(NodeEditing);
   const feedback = useContext(FrameFeedback);
   const incoming = feedback.drops.filter((drop) => drop.to === id && drop.from !== id).length;
@@ -47,11 +49,12 @@ export function FrameNode(props: NodeProps<CanvasNode>) {
 
       </motion.div>}</AnimatePresence>
     </NodeToolbar>
-    <TransformableNode {...props} hideStyleToolbar className={`${styles.frameNode} ${incoming ? styles.frameDropTarget : ""} ${outgoing ? styles.frameDropExit : ""}`}>
+    <TransformableNode {...nodeProps} hideStyleToolbar className={`${styles.frameNode} ${incoming ? styles.frameDropTarget : ""} ${outgoing ? styles.frameDropExit : ""}`}>
       {data.subgraph && data.presentation?.collapsed && <a className={styles.collapsedSubgraph} href={`/dashboard/${encodeURIComponent(editing.workspace)}/${data.subgraph.boardId}`} onPointerDown={(event) => event.stopPropagation()}><FoldVertical size={22} /><span>{data.title}</span><small>打开子画布</small></a>}
       {mode !== "hidden" && <div className={styles.frameLabel} style={{ scale: mode === "fixed" ? 1 / (zoom * (data.viewScale || 1)) : 1 }} title={data.title}>{data.title}</div>}
       {(incoming > 0 || outgoing > 0) && <div className={styles.frameDropHint} style={{ scale: 1 / (zoom * (data.viewScale || 1)) }}>{incoming > 0 ? `松开加入 · ${incoming} 项` : `松开移出 · ${outgoing} 项`}</div>}
       {(["top", "right", "bottom", "left"] as const).map((side) => <div key={side} className={`${styles.frameBorderHit} ${styles["frameBorder_" + side]}`} title="拖动分区，已有成员一起移动" />)}
+      {directAnchors && <ContentHandles selected={!!selected} />}
       {data.ports?.map((port) => {
         const peers = data.ports!.filter((item) => item.direction === port.direction);
         return <Handle key={port.id} id={`port:${port.id}`} type="source" position={port.direction === "input" ? Position.Left : Position.Right} className={styles.framePort} style={{ top: `${(peers.indexOf(port) + 1) / (peers.length + 1) * 100}%` }} isConnectableStart={selected && port.direction === "output"} isConnectableEnd={port.direction === "input"} title={port.direction === "input" ? "子画布输入" : "子画布输出"} />;