多种节点插槽模板

演示使用多个节点插槽模板，根据节点类型动态切换，允许同一图数据呈现不同的视觉效果。

多种节点插槽模板

功能概述

本示例演示如何使用多种不同的节点插槽模板并在它们之间动态切换。每个节点可以具有不同的类型，并根据该类型渲染相应的模板。

核心特性实现

基于类型的插槽选择

<RGSlotOnNode>
    {({ node, checked }: RGNodeSlotProps) => {
        switch (node.type) {
        case 'slot2': return <NodeSlot2 node={node} />;
        case 'slot3': return <NodeSlot3 node={node} checked={checked} />;
        case 'slot4': return <NodeSlot4 node={node} />;
        case 'slot5': return <NodeSlot5 node={node} />;
        default: return <NodeSlot1 node={node} />;
        }
    }}
</RGSlotOnNode>

动态模板切换

const changeNodeSlot = async(newSlotId: string, _newSlotName?: string) => {
    console.log('Switching Node Template to:', newSlotId);
    setSlotTeamplateId(newSlotId);
    const allNodes: RGNode[] = graphInstance.getNodes();
    for (const node of allNodes) {
        const randomSlot = allSlotIds[Math.floor(Math.random() * allSlotIds.length)];
        graphInstance.updateNode(node, {
            type: newSlotId === 'random' ? randomSlot.value : newSlotId
        });
    }
    graphInstance.enableCanvasAnimation();
    await graphInstance.sleep(50);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
    await graphInstance.sleep(300);
    graphInstance.disableCanvasAnimation();
};

模板选项卡切换器

const allSlotIds = [
    { value: 'slot2', text: 'Slot2' },
    { value: 'slot3', text: 'Slot3' },
    { value: 'slot4', text: 'Slot4' },
    { value: 'slot5', text: 'Slot5' },
    { value: 'random', text: 'Random' }
];

<SimpleUIVTabs data={allSlotIds} onChange={changeNodeSlot} currentValue={slotTeamplateId} />

创意使用场景

用户资料卡：在不同的资料卡布局之间切换 - 紧凑型、详细型、带头像型或带统计型。每个模板强调不同的信息。

任务管理：将任务显示为简单卡片、带子任务的详细卡片、看板风格卡片或时间线视图卡片。模板可以根据项目阶段或用户偏好进行切换。

组织架构图：将员工显示为简单姓名卡、带联系信息的详细卡、带头像的卡或带绩效指标的卡。

产品目录：以不同格式显示产品 - 网格视图、列表视图、带图像的卡片视图或最小视图。每个模板突出不同的产品属性。

网络设备：将网络设备显示为状态指示器、详细配置卡、性能图或连接拓扑视图。

社交网络：将用户节点显示为简单头像、资料卡、连接图或活动摘要。不同模板适合不同的分析需求。

项目里程碑：将里程碑渲染为简单标记、带日期的详细卡、进度指示器或依赖关系视图。模板适应不同的项目视图。

知识图谱概念：将概念显示为最小节点、带定义的详细卡、带图像的富媒体卡或引用网络。模板支持不同的知识探索模式。