自定义展开/收起按钮

为根节点提供自定义展开/收起按钮，为左侧和右侧子节点提供单独的控制。

自定义展开/收起按钮

功能概述

此示例展示了如何为根节点创建自定义展开/收起按钮，为左侧和右侧子节点提供单独的控制。它演示了具有交互元素的高级节点槽定制。

核心特性实现

1. 带按钮的自定义节点槽

在节点槽中添加展开/收起按钮：

<RGSlotOnNode>
    {({ node }) => {
        return node.lot.level === 0 ? (
            <div className="relative">
                <div className="node-content">{node.text}</div>

                {/* 左侧展开按钮 */}
                <div
                    className="absolute -left-4"
                    onClick={toggleRootNodeLeft}
                >
                    {node.data.leftExpanded ? <MinusIcon /> : <PlusIcon />}
                </div>

                {/* 右侧展开按钮 */}
                <div
                    className="absolute -right-4"
                    onClick={toggleRootNodeRight}
                >
                    {node.data.rightExpanded ? <MinusIcon /> : <PlusIcon />}
                </div>
            </div>
        ) : (
            <div>{node.text}</div>
        );
    }}
</RGSlotOnNode>

2. 切换左侧子节点

控制左侧节点的可见性：

const toggleRootNodeLeft = async () => {
    const rootNode = graphInstance.getRootNode();
    if (rootNode) {
        graphInstance.updateNodeData(rootNode, {
            leftExpanded: !rootNode.data.leftExpanded
        });

        const relatedNodes = graphInstance.getNodeRelatedNodes(rootNode);
        const leftNodes = relatedNodes.filter(n => n.lot.level < 0);

        leftNodes.forEach(node => {
            graphInstance.updateNode(node, {
                hidden: !rootNode.data.leftExpanded
            });
        });
    }
};

3. 切换右侧子节点

控制右侧节点的可见性：

const toggleRootNodeRight = async () => {
    const rootNode = graphInstance.getRootNode();
    if (rootNode) {
        graphInstance.updateNodeData(rootNode, {
            rightExpanded: !rootNode.data.rightExpanded
        });

        const relatedNodes = graphInstance.getNodeRelatedNodes(rootNode);
        const rightNodes = relatedNodes.filter(n => n.lot.level > 0);

        rightNodes.forEach(node => {
            graphInstance.updateNode(node, {
                hidden: !rootNode.data.rightExpanded
            });
        });
    }
};

4. 使用展开状态初始化

设置初始展开状态：

const initializeGraph = async () => {
    graphInstance.addNodes(treeJsonData.nodes);
    graphInstance.addLines(treeJsonData.lines);
    await graphInstance.doLayout();

    const rootNode = graphInstance.getRootNode();
    graphInstance.updateNodeData(rootNode, {
        leftExpanded: true,
        rightExpanded: true
    });
};

5. 基于级别的过滤

使用 node.lot.level 区分两侧：

const leftNodes = relatedNodes.filter(n => n.lot.level < 0);
const rightNodes = relatedNodes.filter(n => n.lot.level > 0);

创意使用场景

• 双向树：独立管理左右子树
• 思维导图：单独控制不同的思想分支
• 组织架构图：展开/折叠不同部门
• 决策树：显示/隐藏决策分支
• 网络拓扑：控制不同的网络段
• 交互式教程：引导用户完成复杂的图