Custom Node Quick Actions

Functional Overview

This example demonstrates how to create customizable quick action buttons positioned around nodes in all eight directions (top, bottom, left, right, and four corners). The actions are displayed using the RGEditingNodeController component within the view slot, enabling multi-select batch operations with shift/ctrl/cmd key combinations.

Implementation of Key Features

Multi-Directional Action Buttons

The example uses RGEditingNodeController with absolute positioning to place action buttons around nodes:

Top/Bottom: Use translate-y with positive/negative values to position above or below nodes
Left/Right: Use translate-x to position beside nodes
Corners: Combine both translate-x and translate-y for diagonal positioning

Each direction contains its own button group with flex layout for horizontal or vertical arrangements.

<RGEditingNodeController>
  {/* Top buttons */}
  <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>
  {/* Similar structure for bottom, left, right, and corners */}
</RGEditingNodeController>

Multi-Select with Keyboard Modifiers

Node selection supports three modes through the onNodeClick handler:

Single click: Select only the clicked node
Shift/Ctrl/Cmd + Click: Toggle node selection (add/remove from selection)

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);
};

Canvas Selection Box

The onCanvasSelectionEnd handler enables box selection by retrieving nodes within the selection rectangle:

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

Canvas Click to Deselect

Clicking on empty canvas area clears all selections:

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

Creative Use Cases

Context-Aware Toolbars: Show different action buttons based on node type or selected state
Workflow Editors: Provide quick access to node-specific operations like duplicate, delete, or configure
Dashboard Widgets: Display control panels or metrics for selected nodes with positioned indicators
Interactive Tutorials: Guide users by highlighting available actions with directional prompts
Collaborative Tools: Enable batch operations on multiple nodes with visual feedback