Interactive Mixed Layout Editor

Full-featured editor for creating and managing multiple layout groups with add, edit, and delete capabilities.

Interactive Mixed Layout Editor

Functional Overview

This demo provides a full-featured interactive editor for creating and managing multiple layout groups in a single graph. Users can add new tree structures, edit styles and layouts, and delete groups dynamically.

Implementation of Key Features

1. Add New Node Groups

Generate random tree data and add to graph:

const addNewNodesGroup = async () => {
    const newGroupId = graphInstance.generateNewUUID(8);
    const treeRootNode: JsonNode = generateRandomTreeData(
        generateRandomTreeDataConfig,
        newGroupId
    );

    const leftGroupInfo = myLayout.current.appendTreeNodeData(
        treeRootNode,
        {
            myGroupId: newGroupId,
            junctionPoint: RGJunctionPoint.lr
        }
    );

    await myLayout.current.layoutGroupNodes({
        myGroupId: leftGroupInfo.myGroupId,
        groupRootNodeId: leftGroupInfo.groupRootNodeId,
        rootNodeXy: { x: rootNodeXy[0], y: rootNodeXy[1] },
        lineStyle: newGroupStyles.lineStyles,
        nodeStyle: newGroupStyles.nodeStyles,
        layoutOptions: newGroupStyles.layoutOptions
    });
};

2. Edit Group Styles

Modify styles and layout for selected groups:

const applyStylesToGroup = async () => {
    const groupLayoutInfo = myGroupsLayoutOptionsMap.current.get(editingGroupStyles.myGroupId)!;
    const groupRootNode = graphInstance.getNodeById(groupLayoutInfo.groupRootNodeId)!;

    await myLayout.current.layoutGroupNodes({
        myGroupId: editingGroupStyles.myGroupId,
        groupRootNodeId: groupLayoutInfo.groupRootNodeId,
        rootNodeXy: { x: groupRootNode.x, y: groupRootNode.y },
        lineStyle: editingGroupStyles.lineStyles,
        nodeStyle: editingGroupStyles.nodeStyles,
        layoutOptions: editingGroupStyles.layoutOptions
    });
};

3. Delete Groups

Remove selected groups from graph:

const deleteGroup = async () => {
    const editingNodes = graphInstance.getEditingNodes();
    const editingLines = graphInstance.getLinesBetweenNodes(editingNodes);

    graphInstance.clearChecked();
    graphInstance.setEditingNodes([]);
    graphInstance.removeLines(editingLines);
    graphInstance.removeNodes(editingNodes);

    myGroupsLayoutOptionsMap.current.delete(editingGroupStyles.myGroupId);
    myLayout.current.onGroupDeleted(editingGroupStyles.myGroupId);
};

4. Random Position or Manual Position

Choose how to position new groups:

<SimpleUIBoolean
    label="Random Root Node Position"
    currentValue={useRandomRootNodePosition}
    onChange={setUseRandomRootNodePosition}
/>

{!useRandomRootNodePosition && (
    <SimpleUINumberRange
        min={-1000}
        max={1000}
        currentValue={rootNodeXy}
        onChange={setRootNodeXy}
    />
)}

5. Editing Node Controller with Actions

Custom toolbar for selected nodes:

<RGEditingNodeController>
    <div className="absolute transform -translate-y-[30px]">
        <button onClick={() => { openEditGroupStylesPanel(); }}>
            <EditIcon size={14} />
            Edit Styles & Layout
        </button>
        <button onClick={() => { deleteGroup(); }}>
            <DeleteIcon size={14} />
            Delete
        </button>
    </div>
</RGEditingNodeController>

Creative Use Cases

• Graph Editors: Build custom graph editing applications
• Visual Planners: Create interactive planning tools
• System Design Tools: Design system architectures visually
• Educational Platforms: Teach graph concepts interactively
• Prototyping Tools: Quickly sketch graph-based ideas
• Collaborative Whiteboards: Multi-user graph editing