Complete Graph Application with Editing

Full-featured graph editor with local storage, context menus, toolbar, and interactive node/line creation.

Complete Graph Application with Editing

Functional Overview

This is a complete graph editing application with local storage persistence, right-click context menus, toolbar controls, and the ability to add/delete nodes and lines interactively.

Implementation of Key Features

1. Local Storage Persistence

Save and load graph data:

const myLocalDataItemKey = 'rg-my-graph-app';

const initializeGraph = async () => {
    const mySavedDataString = localStorage.getItem(myLocalDataItemKey);
    const mySavedData = mySavedDataString ? JSON.parse(mySavedDataString) : null;

    if (mySavedData) {
        graphInstance.updateOptions({
            layout: { layoutName: 'fixed' }  // Use fixed to restore positions
        });
        await graphInstance.setJsonData(mySavedData);
    } else {
        await graphInstance.setJsonData(myJsonData);
    }
};

const onSave = () => {
    const jsonData = graphInstance.getGraphJsonData();
    localStorage.setItem(myLocalDataItemKey, JSON.stringify(jsonData));
};

2. Right-Click Context Menu

Show context menu on right-click:

const onContextmenu = (e: RGUserEvent, objectType: string, object: any) => {
    const xyOnGraphView = graphInstance.getViewXyByEvent(e);
    setMenuPos(xyOnGraphView);
    setCurrentObj({ type: objectType, data: object });
    setShowNodeTipsPanel(true);
};

3. Add Nodes by Dragging

Interactive node creation:

const startAddNode = (e: React.MouseEvent | React.TouchEvent) => {
    const newNodeSize = { width: 140, height: 30 };
    graphInstance.startCreatingNodePlot(e.nativeEvent, {
        templateNode: { text: 'New Node', color: '#ffffff', ...newNodeSize },
        onCreateNode: (x, y) => {
            addNodeOnCanvas({
                x: x - newNodeSize.width / 2,
                y: y - newNodeSize.height / 2
            }, newNodeSize);
        }
    });
};

4. Add Lines by Dragging

Interactive line creation:

const startAddLine = (e: React.MouseEvent | React.TouchEvent) => {
    const newLineTemplate: JsonLineLike = {
        lineWidth: 2,
        color: '#cebf88ff',
        fontColor: '#cebf88ff',
        text: 'New Line'
    };

    graphInstance.startCreatingLinePlot(e.nativeEvent, {
        template: newLineTemplate,
        onCreateLine: (from, to) => {
            if (to && 'id' in to) {
                const lineId = graphInstance.generateNewUUID(5);
                graphInstance.addLines([{
                    id: lineId,
                    ...newLineTemplate,
                    from: from.id,
                    to: to.id,
                    text: `New Line-${lineId}`
                }]);
            }
        }
    });
};

5. Delete Nodes and Lines

Remove elements via context menu:

const handleDelete = () => {
    if (currentObj.type === 'node') {
        graphInstance.removeNodeById(currentObj.data.id);
    } else if (currentObj.type === 'line') {
        graphInstance.removeLineById(currentObj.data.id);
    }
};

Creative Use Cases

• Graph Editors: Build custom graph editing applications
• Diagramming Tools: Create flowchart or diagram editors
• Planning Tools: Interactive planning and brainstorming
• Educational Software: Teach graph concepts interactively
• Whiteboard Applications: Online collaborative whiteboards
• Documentation Tools: Visual documentation editors