Interactive Line Creation with Vertex Selection

Interactive line creation interface with node selection toolbar for precise connection point control.

Interactive Line Creation with Vertex Selection

Functional Overview

This demo demonstrates an interactive line creation interface where users can select nodes and choose specific connection points (vertices) to create new relationships. It includes a custom node toolbar for precise connection control.

Implementation of Key Features

1. Editing Node Controller

Use the editing node controller to display custom toolbars:

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        <RGEditingNodeController>
            <MyNodeToolbar onStartCreateLine={onStartCreateLine} />
        </RGEditingNodeController>
        <RGEditingConnectController />
    </RGSlotOnView>
</RelationGraph>

2. Custom Node Toolbar

Create buttons around selected nodes for connection creation:

// MyNodeToolbar.tsx
<div className="my-near-nodes">
    <button onClick={() => createLine('top')}>↑</button>
    <button onClick={() => createLine('left')}>←</button>
    <button onClick={() => createLine('right')}>→</button>
    <button onClick={() => createLine('bottom')}>↓</button>
</div>

3. Line Creation Handler

Implement the line creation logic:

const onStartCreateLine = (fromNode: RGNode, lineTemplate: JsonLineLike, e: React.MouseEvent) => {
    graphInstance.startCreatingLinePlot(e.nativeEvent, {
        template: lineTemplate,
        fromNode: fromNode,
        onCreateLine: (fromNode, toNode, newLineJson?: JsonLine) => {
            if (toNode.id) {
                const newLineId = graphInstance.generateNewUUID(8);
                const newLineJsonData = Object.assign({}, newLineJson, {
                    from: fromNode.id,
                    to: toNode.id,
                    text: 'New Line ' + newLineId
                });
                graphInstance.addLines([newLineJsonData]);
            }
        }
    });
};

4. Canvas Selection End Handler

Handle box selection for multiple nodes:

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

5. Click Interaction Modes

Support different interaction modes:

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

Creative Use Cases

• Interactive Diagram Builders: Create diagram editing tools
• Workflow Designers: Build workflow authoring interfaces
• Network Planning Tools: Design network topologies interactively
• Educational Games: Create connection-based learning games
• Schema Designers: Visual database schema design tools
• Mind Mapping Apps: Interactive mind map creators