带画布集成的混合布局编辑器

高级混合布局管理，具有基于画布的行业仪表板和基于位置的组插入。

带画布集成的混合布局编辑器

功能概述

这个高级示例将混合布局管理与基于画布的行业仪表板相结合。它允许用户在画布中的特定位置添加新节点组、编辑组样式并动态管理整体布局。

核心特性实现

1. 基于画布的位置选择

从画布元素中选择位置：

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

2. 动态数据更新

同时更新画布和图数据：

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. 在特定位置插入

在现有项之间插入新组：

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. 样式编辑器集成

编辑选定组的样式：

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. 小地图和编辑控件

导航和编辑工具：

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

创意使用场景

• 供应链管理：可视化管理复杂的供应网络
• 项目规划：创建交互式项目路线图
• 资源分配：跨多个阶段管理资源
• 工作流设计：设计和优化业务流程
• 投资组合管理：可视化投资组合
• 制造规划：计划生产工作流