画布交互设置面板

演示可重用的画布设置面板组件，允许用户通过切换开关配置图表交互行为。

画布交互设置面板

功能概述

此示例演示了一个可重用的画布设置面板组件，允许用户通过切换开关配置图表交互行为，包括缩放、拖动和节点移动设置。

核心特性实现

画布设置组件

使用 CanvasSettingsPanel 组件提供控制画布交互的标准化 UI：

<DraggableWindow>
    <CanvasSettingsPanel />
</DraggableWindow>

节点插槽自定义

使用 RGSlotOnNode 在节点内显示自定义内容：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="flex items-center justify-center h-full p-2">
            <Cloud size={30} color="#666666" />
        </div>
    )}
</RGSlotOnNode>

中心布局

使用中心布局进行自动节点定位：

const graphOptions: RGOptions = {
    defaultJunctionPoint: RGJunctionPoint.border,
    layout: {
        layoutName: 'center'
    }
};

画布单击处理

单击空白画布时清除选择：

const onCanvasClick = () => {
    graphInstance.clearChecked();
};

节点初始化

使用一组节点和连线初始化图表：

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '1', text: 'Node-1' },
        { id: '2', text: 'Node-2' },
        // ... 更多节点
    ],
    lines: [
        { id: 'l1', from: '7', to: '71' },
        // ... 更多连线
    ]
};
await graphInstance.setJsonData(myJsonData);

创意使用场景

• 交互式演示：让用户尝试不同的交互模式
• 无障碍设置：允许用户禁用动画或移动
• 信息亭模式：锁定公共显示的交互
• 演示：在实时演示期间快速切换模式
• 用户偏好：记住用户的首选交互设置