交互式混合布局编辑器

功能齐全的编辑器，用于创建和管理多个布局组，具有添加、编辑和删除功能。

交互式混合布局编辑器

功能概述

此示例提供了一个功能齐全的交互式编辑器，用于在单个图中创建和管理多个布局组。用户可以动态添加新的树结构、编辑样式和布局以及删除组。

核心特性实现

1. 添加新节点组

生成随机树数据并添加到图中：

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. 编辑组样式

修改选定组的样式和布局：

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. 删除组

从图中删除选定的组：

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. 随机位置或手动位置

选择如何定位新组：

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

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

5. 带操作的编辑节点控制器

为选定节点自定义工具栏：

<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>

创意使用场景

• 图编辑器：构建自定义图编辑应用程序
• 可视化规划器：创建交互式规划工具
• 系统设计工具：可视化设计系统架构
• 教育平台：交互式教授图概念
• 原型工具：快速绘制基于图的想法
• 协作白板：多用户图编辑