Node Alignment Guides with Snapping for Precise Positioning

Functional Overview

This example demonstrates the alignment guides feature that helps users position nodes precisely relative to each other. When dragging nodes, the system automatically detects potential alignment positions with other nodes and displays visual guide lines. Users can optionally enable “adsorption” (snapping) which automatically moves nodes into precise alignment when they’re close to an alignment position.

Implementation of Key Features

Alignment Reference Line Component

The RGEditingReferenceLine component provides the alignment functionality:

<RGSlotOnView>
    <RGEditingReferenceLine adsorption={adsorption} />
</RGSlotOnView>

When adsorption is true, nodes automatically snap to alignment positions. When false, the guides are shown but nodes don’t snap.

Toggle Control for Snapping

A simple boolean toggle controls the snapping behavior:

<SimpleUIBoolean
    currentValue={adsorption}
    onChange={setAdsorption}
    label="Enable Adsorption Effect"
/>

This allows users to choose whether they want automatic snapping or just visual guides.

Node Selection with Keyboard Modifiers

The demo implements standard selection patterns with keyboard modifiers:

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

Shift/Ctrl/Cmd+Click adds to selection, regular click replaces selection.

Box Selection Support

The canvas selection end handler processes box selections:

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

Users can drag on empty canvas to select multiple nodes within a rectangular area.

Creative Use Cases

Precision Diagram Layout Tools

Use for creating technical diagrams where precise alignment is critical, such as floor plans, circuit schematics, or UI mockups. The alignment guides ensure professional-looking layouts without manual measurement.

Form and UI Designers

Build form designers or UI layout tools where controls need to be aligned precisely. The snapping helps create clean, organized interfaces with consistent spacing and alignment.

Organizational Chart Layout

Create org chart tools where alignment of positions at the same level is important for visual clarity. The guides help maintain hierarchy and organization.

Database Schema Editors

Implement database design tools where table entities need to be aligned for readability. Alignment guides help keep related tables organized and make relationships easier to follow.

Network Topology Diagramming

Use for network diagramming where devices in the same layer or category should be aligned. This creates clearer visual grouping and makes diagrams easier to understand.

Presentation and Infographic Creators

Build tools for creating presentations or infographics where visual alignment affects professional appearance. The guides help users create polished layouts without design expertise.

Educational Diagramming Tools

Create educational software where students learn about spatial relationships and structure. The alignment feedback helps teach concepts like parallelism, symmetry, and organization.