Interactive Example

NodeBraid 的私有 Examples Application 使用 React、TanStack Router、shadcn 与 Base UI 展示 Basic Canvas Composition 的真实公共 interface。它不是产品级编辑器，也不会作为 npm package 发布。

本地启动

bun install
bun run example:dev

打开终端输出的 /basic-svg 地址，即可体验 Selection、Box Selection、真实 Clipboard Ctrl/Cmd+C / Ctrl/Cmd+V、Ctrl/Cmd+D Duplicate、Node Drag、Pan、Zoom、Port-aware Edge Connection、手动自动布局、Undo、Redo、Fit View 与完整 Runtime Reset。

示例只依赖 @nodebraid/adapter-react、@nodebraid/core 和显式选择的 @nodebraid/renderer-svg、@nodebraid/layout-dagre 公共入口。React Adapter 拥有 Runtime mount/remount 与稳定 Snapshot projection；应用继续拥有 Runtime Factory、Toolbar 和 Clipboard 状态。当前示例暂不独立部署；本页始终提供有效的能力说明和本地启动入口。

手动自动布局

工具栏提供一个“自动布局”（Auto layout）按钮。应用显式选择 Dagre，以 full 模式、LR 方向和空 Fixed Node 集合排列整张 Canvas，其余参数使用 Provider 的公开默认值。框架同时支持 Dagre 与 ELK 的带 Port 图节点拓扑布局；此示例只选择 Dagre，没有算法或方向选择器。

可以先选择 Node，并通过 Pan、Zoom 调整视野，再点击按钮。布局只改变 Node position，保留 Selection、Viewport、原 Edge 与 Endpoint portId；Port 跟随 Node 移动，连线仍连接原 Port，移动后的 Port 仍可用于新建连线。布局不会自动 Fit View，需要时可单独点击 Fit View。

截图在手动布局后额外点击了独立的 Fit View 按钮，以展示完整图形；布局本身保持 Viewport。图中展示 Node 排列及仍连接原 Port 的 Edge。算法只处理 Node 拓扑；Port Geometry 继续由 SVG Renderer 投影，不提供 Port 方位、顺序或几何参与算法的 Port-aware Layout。

一次有净变化的布局对应一次 History Entry：先用一次 Undo 恢复布局前位置，再用一次 Redo 恢复布局后位置。再次执行相同确定性布局时，无净变化不会增加 revision 或历史；后续新建连线会产生自己的 History Entry。

页面初始化和拖动、连线、复制粘贴等普通编辑都不会自动重排。按钮沿用已有 Command 执行和错误卡片；失败会明确显示，不自动排队或重试，由使用者决定是否重新触发。

保存与恢复文件

点击“导出文档”（Export document）下载完整图 JSON；重新打开页面后，点击“导入文档”（Import document）选择该文件。 导入成功替换整图并清空旧 Undo/Redo，之后的编辑从新的历史起点记录。导入失败显示原始错误，旧图与历史保持。 Viewport 保持当前值；Selection 继续按已有 ID 协调，不从文件恢复。

Example 的应用 Data Codec 仅接受 null 或 { label: string, tags: string[] }，Clipboard 使用同一业务约束。 框架的 Document 契约允许应用提供其他 codec。文件不包含 Runtime revision 或 Session/History， 页面不会自动保存；取消文件选择不会改变画布，同一文件可以再次导入。

创建与编辑通用节点

选择节点类型后在空白 Canvas 点击一次，完成放置并选中新节点；Esc 可取消。属性面板保留应用草稿：应用一次提交 data 并形成一次可撤销变化，取消不改 Document。切换编辑对象前提示应用或放弃未提交草稿。

草稿绑定精确源 Node。拖动同一个节点也会使草稿过期，面板保留输入并提供显式重新载入；其他节点的变化不影响提交。节点类型、数据 schema 与表单属于示例应用，不属于 Kernel。已有文件导出/导入保留新节点及应用数据。