Mixed Layout Editor with Canvas Integration

Advanced mixed layout management with canvas-based industry dashboard and position-based group insertion.

Mixed Layout Editor with Canvas Integration

Functional Overview

This advanced demo combines mixed layout management with a canvas-based industry dashboard. It allows users to add new node groups at specific positions in the canvas, edit group styles, and manage the overall layout dynamically.

Implementation of Key Features

1. Canvas-Based Position Selection

Select positions from canvas elements:

const onAddItem = (ownerColId: string, aboveItemId: string, belowItemId: string) => {
    setNewGroup({
        ownerColId: ownerColId,
        beforeOf: aboveItemId,
        afterOf: belowItemId
    });
    setEditingGroupStyles({
        ...editingGroupStyles,
        myGroupId: ''
    });
};

2. Dynamic Data Updates

Update canvas and graph data simultaneously:

const updateMyAllColumns = async (newCols: MyColumnData[]) => {
    setAllCols([]);
    await graphInstance.sleep(50);
    setAllCols(newCols);
    await applyAllColsData(newCols);
};

const applyAllColsData = async (newCols: MyColumnData[]) => {
    await myLayout.current.loadData(newCols);
    await graphInstance.sleep(300);
    myLayout.current.connectElementToNode();
    myLayout.current.applyAllGroupLayout();
    graphInstance.zoomToFit();
};

3. Insert at Specific Position

Insert new groups between existing items:

ownerCol.items.splice(
    newGroup.beforeOf
        ? ownerCol.items.findIndex(item => item.id === newGroup.beforeOf)
        : newGroup.afterOf
            ? ownerCol.items.findIndex(item => item.id === newGroup.afterOf) + 1
            : ownerCol.items.length,
    0,
    treeRootNode
);

4. Style Editor Integration

Edit styles for selected groups:

const applyStylesToGroup = async () => {
    const myGroup = myLayout.current.getGroupById(editingGroupStyles.myGroupId)!;
    myGroup.groupStyles.lineStyles = editingGroupStyles.lineStyles;
    myGroup.groupStyles.nodeStyles = editingGroupStyles.nodeStyles;
    myGroup.groupStyles.layoutOptions = editingGroupStyles.layoutOptions;

    myLayout.current.applyGroupStyles(myGroup);
    myLayout.current.applyAllGroupLayout();
};

5. Mini Map and Editing Controls

Navigation and editing tools:

<RGSlotOnView>
    <RGMiniView />
    <RGEditingNodeController>
        <button onClick={() => { deleteGroup(); }}>
            <DeleteIcon size={14} />
            Delete
        </button>
    </RGEditingNodeController>
    <RGEditingReferenceLine adsorption={true} />
</RGSlotOnView>

Creative Use Cases

• Supply Chain Management: Visualize and manage complex supply networks
• Project Planning: Create interactive project roadmaps
• Resource Allocation: Manage resources across multiple stages
• Workflow Design: Design and optimize business processes
• Portfolio Management: Visualize investment portfolios
• Manufacturing Planning: Plan production workflows