预设工具栏创建节点与连线
这个示例展示固定布局 relation-graph 编辑器:通过视图内挂载的预设面板拖拽创建样式节点、点击创建样式连线。它还演示了基于自定义卡片插槽的混合节点渲染、创建状态反馈、共享悬浮设置面板和图片导出辅助。
固定图形画布上的预设工具栏节点与连线创建
这个示例构建了什么
这个示例构建的是一个轻量级的图谱编辑画布,而不是只读图谱查看器。界面展示了一个位于固定位置的起始图谱、一个点状背景、一个挂载在图谱视图内部的橙色预设面板、一个共享的浮动帮助窗口,以及对纯文本节点和更丰富的卡片式节点的支持。
主要用户操作是结构性编辑。用户从左侧面板拖动节点预设到画布上以创建新节点,点击连线预设进入引导式连线模式,并通过选择现有节点来完成连线。其中一个预设会创建 myCard 节点,它通过自定义插槽渲染,而不是使用默认的文本节点主体。
最重要的设计思路是,节点创建和连线创建共享同一套视图内预设工作流。因此,这个示例是一个紧凑的参考案例,展示了如何用模板驱动的方式构建具有混合节点样式的图谱。
数据是如何组织的
初始图谱数据在 initializeGraph() 中以内联方式声明为一个 RGJsonData 对象,其中包含 rootId、扁平的 nodes 数组和扁平的 lines 数组。由于图谱使用固定布局,种子节点已经带有显式的 x 和 y 坐标;各个