自定义节点快捷操作

演示如何在节点周围创建可自定义的快捷操作按钮，支持八个方向（上、下、左、右及四个角）的定位，并支持多选批量操作。

自定义节点快捷操作

功能概述

此示例演示如何在节点周围创建可自定义的快捷操作按钮，支持八个方向（上、下、左、右及四个角）的定位。通过视图插槽中的 RGEditingNodeController 组件显示操作按钮，支持使用 Shift/Ctrl/Cmd 键组合进行多选批量操作。

核心特性实现

多方向操作按钮

示例使用 RGEditingNodeController 配合绝对定位在节点周围放置操作按钮：

• 上下方向：使用正负值的 translate-y 在节点上方或下方定位
• 左右方向：使用 translate-x 在节点旁边定位
• 四个角：同时使用 translate-x 和 translate-y 进行对角线定位

每个方向都包含自己的按钮组，使用 flex 布局进行水平或垂直排列。

<RGEditingNodeController>
  {/* 上方按钮 */}
  <div className="transform translate-y-[-40px]">
    <div className="flex gap-1 bg-white border rounded shadow">
      <div className="bg-blue-500 text-white px-1 py-0.5 rounded">top1</div>
      <div className="bg-blue-500 text-white px-1 py-0.5 rounded">top2</div>
    </div>
  </div>
  {/* 其他方向使用类似结构 */}
</RGEditingNodeController>

键盘修饰键多选

节点选择通过 onNodeClick 处理器支持三种模式：

• 单击：仅选中点击的节点
• Shift/Ctrl/Cmd + 点击：切换节点选择状态（添加/移除选中）

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    if ($event.shiftKey || $event.ctrlKey || ($event.metaKey && !$event.altKey)) {
        graphInstance.toggleEditingNode(nodeObject);
    } else {
        graphInstance.setEditingNodes([nodeObject]);
    }
    graphInstance.setEditingLine(null);
};

画布框选

onCanvasSelectionEnd 处理器通过获取选择矩形内的节点实现框选功能：

const onCanvasSelectionEnd = (selectionView: RGSelectionView, _$event: RGUserEvent) => {
    const willSelectedNodes = graphInstance.getNodesInSelectionView(selectionView) || [];
    graphInstance.setEditingNodes(willSelectedNodes);
};

点击画布取消选择

点击空白画布区域清除所有选择：

const onCanvasClick = () => {
    graphInstance.setEditingNodes([]);
    graphInstance.setEditingLine(null);
    graphInstance.clearChecked();
};

创意使用场景

• 上下文感知工具栏：根据节点类型或选中状态显示不同的操作按钮
• 工作流编辑器：提供节点特定操作的快速访问，如复制、删除或配置
• 仪表盘小部件：为选中的节点显示控制面板或指标，并带有定位指示器
• 交互式教程：通过方向性提示引导用户了解可用操作
• 协作工具：支持多节点批量操作并提供视觉反馈