JavaScript is required

节点局部拖拽手柄

这个示例加载固定布局图,禁用整节点拖拽,仅允许从带 `rg-node-drag-handler` 标记的插槽子区域拖动。它通过节点元数据混合“标题条拖拽”和“移动按钮拖拽”两种手柄样式,并在共享悬浮辅助面板中提供滚轮模式、画布拖拽模式和图片导出。

在 GraphPilot 中编辑

将固定布局节点移动限制在显式拖拽手柄上

这个示例构建了什么

这个示例构建了一个全高的 relation-graph 工作区,并且有意限制了节点移动。用户会看到一个放置在点状画布上的小型固定位置图谱、选中节点内部的琥珀色手柄区域、右侧工具栏,以及图谱上方悬浮的辅助窗口。

用户只能重新定位部分节点,而且只能从每个节点内部渲染出来的特定手柄区域开始拖动。有些节点把整条头部区域作为手柄,有些节点则在左上角提供一个小型移动徽标作为手柄,没有这两种标记的节点则保持不可拖动。这种选择性移动模式是本示例的核心。

页面还包含一些围绕图谱的共享工具行为。辅助窗口可以拖动或最小化,它的设置面板可以切换画布滚轮和拖动画布模式,当前图谱也可以导出为图片。

数据是如何组织的

图数据直接在 initializeGraph() 内以内联方式声明为一个 RGJsonData 对象。它包含 rootIdnodes 数组和 lines 数组。由于本示例使用的是固定布局而不是自动布局引擎,因此每个节点都使用显式的 xy 坐标进行定义。

这里重要的预处理思路是轻