高级布局切换与性能优化

功能概述

本示例演示了专业级的布局切换，具有平滑过渡、状态保存和性能优化。与基本的 switch-layout 演示不同，此版本包括布局状态缓存、过渡动画和每种布局类型的高级配置选项。

核心特性实现

布局状态缓存

const layoutStatesRef = useRef(new Map());

const saveLayoutState = (layoutName: string) => {
    const nodes = graphInstance.getNodes();
    const state = nodes.map(n => ({ id: n.id, x: n.x, y: n.y }));
    layoutStatesRef.current.set(layoutName, state);
};

const restoreLayoutState = (layoutName: string) => {
    const state = layoutStatesRef.current.get(layoutName);
    if (state) {
        state.forEach(nodeState => {
            graphInstance.updateNode(nodeState.id, {
                x: nodeState.x,
                y: nodeState.y
            });
        });
    }
};

平滑过渡

const switchLayout = async (newLayout: string) => {
    saveLayoutState(currentLayout);
    graphInstance.updateOptions({ layout: { layoutName: newLayout } });
    await graphInstance.doLayout();
    restoreLayoutState(newLayout);
};

布局配置注册表

const layoutConfigs = {
    force: { layoutName: 'force', force_node_repulsion: 500 },
    tree: { layoutName: 'tree', from: 'left', gap: 100 },
    circle: { layoutName: 'circle', radius: 300 },
    center: { layoutName: 'center' }
};

创意使用场景

交互式图编辑器：在编辑模式（力导向）和演示模式（中心）之间切换。

数据分析：切换不同布局以揭示模式。

多视角视图：保存每种布局的用户首选位置。

A/B 测试：比较不同布局如何影响理解。

布局推荐系统：根据图特征建议最佳布局。

“主题 & 布局”切换

高级布局切换 - 带有状态保存的专业布局过渡