Drag to Create Nodes with Preset Styles

Demonstrates a drag-and-drop interface for creating new nodes with predefined styles and shapes from a toolbar.

Drag to Create Nodes with Preset Styles

Functional Overview

This example demonstrates how to create a drag-and-drop interface where users can drag node templates from a toolbar and drop them onto the canvas to create new nodes with predefined styles and shapes.

Implementation of Key Features

Drag-to-Create Toolbar Component

Implement DragToCreateToolbar with draggable node templates:

<RGSlotOnView>
    <DragToCreateToolbar />
</RGSlotOnView>

Node Templates with Different Shapes

Provide templates for different node shapes and types:

const addNode = async (shape: RGNodeShape, type?: string) => {
    const newNode: JsonNode = {
        id: `new-node-${Math.random()}`,
        text: type === 'slot' ? 'Slot Node' : (shape === RGNodeShape.rect ? 'New Rect' : 'New Circle'),
        nodeShape: shape,
        type: type || 'default',
        x: Math.random() * 200,
        y: Math.random() * 200,
        color: '#43a2f1'
    };
    graphInstance.addNodes([newNode]);
};

Custom Node Content by Type

Render different node content based on the type property:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        if (node.type === 'myCard') {
            return (
                <div>
                    <MyCardNodeContent name={node.text} />
                </div>
            );
        }
        return (
            <div className="rg-node-text">{node.text}</div>
        );
    }}
</RGSlotOnNode>

Fixed Layout Configuration

Use fixed layout to maintain node positions:

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

Initial Node Setup

Initialize graph with sample nodes having different shapes:

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'Border color', borderColor: '#43a2f1' },
        { id: 'a1', text: 'No border', borderWidth: -1, color: '#ff8c00' },
        { id: 'a2', text: 'Plain', borderWidth: 3, borderColor: '#ff8c00' }
    ],
    lines: [
        { from: 'a', to: 'a1' },
        { from: 'a', to: 'a2' }
    ]
};

Creative Use Cases

• Diagram Builders: Let users quickly add pre-styled elements to diagrams
• Flow Chart Tools: Provide drag-and-drop shape palettes for process flows
• UI Mockups: Create interface wireframes with pre-built component templates
• Network Designers: Drop network devices with appropriate icons and settings
• Mind Mapping: Add different node types for ideas, tasks, and notes