Edit Node Text with Double Click

Demonstrates inline text editing for nodes when users double-click, with a toggle to enable or disable the editing feature.

Edit Node Text with Double Click

Functional Overview

This example demonstrates how to implement inline text editing for nodes when users double-click on them. A custom editable node component handles the editing state and updates the graph data.

Implementation of Key Features

Custom Editable Node Component

Create MyEditableNode component that switches between display and edit modes:

<RGSlotOnNode>
    {({ node, checked, dragging }: RGNodeSlotProps) => (
        <MyEditableNode
            node={node}
            enableEditingMode={isEditingEnabled}
            onNodeTextChange={onNodeTextChange}
        />
    )}
</RGSlotOnNode>

Toggle Editing Mode

Provide a switch to enable or disable node text editing:

<SimpleUIBoolean
    currentValue={isEditingEnabled}
    onChange={toggleEditingMode}
    label="Enabled Node Text Editing"
/>

Node Text Update Handler

Implement handler to update node text in the graph:

const onNodeTextChange = (node: RGNode, newNodeText: string) => {
    graphInstance.updateNode(node.id, { text: newNodeText });
};

Fixed Layout

Use fixed layout to maintain node positions:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'
    }
};

Initial Node Data

Initialize graph with various node styles and shapes:

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'Border color', borderColor: '#666666' },
        { id: 'a1', text: 'No border', borderWidth: -1, color: '#ff8c00' },
        { id: 'a2', text: 'Plain', borderWidth: 3, borderColor: '#ff8c00' },
        { id: 'd', text: 'Node Size', width: 150, height: 150 },
        { id: 'g', text: 'Css Flash', className: 'my-node-flash-style' }
    ],
    lines: [
        { id: 'l1', from: 'a', to: 'b' },
        { id: 'l2', from: 'a', to: 'a1' }
    ]
};

Edit Mode State Management

Use React state to track whether editing is enabled:

const [isEditingEnabled, setIsEditingEnabled] = useState(true);

const toggleEditingMode = (newValue: boolean) => {
    setIsEditingEnabled(newValue);
};

Creative Use Cases

• Mind Mapping Tools: Let users edit node labels directly in the graph
• Org Chart Editors: Update employee names or titles inline
• Process Diagrams: Modify step names without opening dialogs
• Concept Maps: Quickly revise ideas and connections
• Data Entry Forms: Combine visual layout with text editing