展开和折叠所有节点

演示实现同时展开或折叠图中所有节点的功能。

展开和折叠所有节点

功能概述

本示例演示如何实现同时展开或折叠图中所有节点的功能。它使用切换按钮在展开和折叠状态之间切换。

核心特性实现

展开/折叠配置

const graphOptions: RGOptions = {
    defaultExpandHolderPosition: "right",
    reLayoutWhenExpandedOrCollapsed: true,
    defaultNodeShape: RGNodeShape.circle,
    layout: {
        layoutName: 'center'
    }
};

切换功能

该示例实现了展开或折叠所有节点的播放状态切换：

const [playing, setPlaying] = useState(false);

// 切换实现将调用：
graphInstance.expandAll(); // 或 collapseAll()

创意使用场景

大型组织架构图：展开所有以显示整个组织，折叠以仅显示顶级部门。

系统架构图：展开所有以查看完整的系统细节，折叠以查看高级架构。

文件系统浏览器：展开所有目录以查看完整内容，折叠以仅显示顶级文件夹。

决策树：展开所有以查看完整的决策路径，折叠以仅显示主要决策。

物料清单：展开所有以查看所有组件，折叠以仅查看顶级装配。

菜单结构：展开所有以可视化完整的菜单层次结构，折叠以仅显示主要部分。

分类浏览器：展开所有以查看完整的分类树，折叠以仅显示主要类别。

流程图：展开所有以查看详细的流程步骤，折叠以查看高级流程流程。