连线与数据流

画布上的**连线（Edge）**不是装饰，它承载三类语义：

1. 数据引用：Table → Chart，图表从表格读取数据源
2. 逻辑顺序：Storyboard 场景里 Slide 之间的 narrative 链
3. 视觉分组：人肉标注"这几个 widget 属于同一组"

底层由 React Flow 的 Edge 对象表示，与节点共同序列化到后端的 Dashboard YAML 或 Storyboard snapshot。

连接模式：Loose

画布使用 ConnectionMode.Loose（见 StoryboardFlowPanel.tsx）：

import { ConnectionMode } from '@xyflow/react';

<ReactFlow
  connectionMode={ConnectionMode.Loose}
  // 任意 handle 都可作为 source 或 target，无需区分方向
/>

这意味着用户不需要先知道"哪个 handle 是输入、哪个是输出"——拖拽任意 handle 到任意 handle 都能建立连接，降低上手门槛。

典型数据流：Table → Chart

1. 在画布上放一个 rich-text 或 Widget 表格，整理 CSV 数据
2. 放一个 bar-chart widget
3. 在对话里说"把上面的表格连到这张柱状图"，Agent 会：
   • 在两个 widget 之间创建 edge
   • 在 chart 的 snapshot.content 里填充来自 table 的行列数据
   • 调整 snapshot.config 里的轴映射

哪些 widget 支持引用

widget 类型	可作为数据源	可作为数据目标
rich-text（含表格）	是	否
bar-chart / line-chart / pie-chart	否	是
widget	依 widget 实现而定	依 widget 实现而定
pdf-viewer / web-viewer	否（内容在 iframe 里）	否

Dashboard 模式下的连接

在 Dashboard（自由画布）中，nodesConnectable={false} 是默认值——连接由 Agent 通过工具调用创建，而不是用户手动拖拽，避免误连。如需手动连接，打开 widget handle 即可。

Next step

• Widget 类型总览 — widget 能接收什么数据
• 画布 ↔ 文档双模式 — 在两种视图里看同一套 edge