禁用缩放、拖动和节点移动

演示如何使用动态切换开关禁用缩放、画布拖动和节点拖动交互以实现实时控制。

禁用缩放、拖动和节点移动

功能概述

此示例演示如何禁用图表中的各种交互效果，包括缩放、画布拖动和节点拖动。三个切换开关允许动态控制这些交互模式。

核心特性实现

禁用缩放

使用 wheelEventAction 选项控制缩放行为：

• 'none'：禁用鼠标滚轮缩放
• 'zoom'：启用鼠标滚轮缩放（默认）

<SimpleUISwitch
    currentValue={options.wheelEventAction === 'none'}
    onChange={(disabled) => {
        handleUpdateOptions({ wheelEventAction: disabled ? 'none' : 'zoom' });
    }}
/>

禁用画布拖动

使用 dragEventAction 选项控制画布平移：

• 'none'：禁用画布拖动
• 'move'：启用画布拖动（默认）

<SimpleUISwitch
    currentValue={options.dragEventAction === 'none'}
    onChange={(disabled) => {
        handleUpdateOptions({ dragEventAction: disabled ? 'none' : 'move' });
    }}
/>

禁用节点拖动

使用 disableDragNode 选项控制节点拖动：

• true：节点不能被拖动
• false：节点可以被拖动（默认）

<SimpleUISwitch
    currentValue={options.disableDragNode!}
    onChange={(newValue) => {
        handleUpdateOptions({ disableDragNode: newValue });
    }}
/>

动态选项更新

实现处理程序以更新选项并与状态同步：

const handleUpdateOptions = (newOptions: Partial<RGOptions>) => {
    setOptions(prev => ({ ...prev, ...newOptions }));
    graphInstance.updateOptions(newOptions);
};

初始配置

在选项中默认将所有交互设置为禁用：

const [options, setOptions] = useState<RGOptions>({
    wheelEventAction: 'none',
    dragEventAction: 'none',
    disableDragNode: true,
    layout: {
        layoutName: 'center'
    }
});

创意使用场景

• 演示：在演示期间防止意外修改
• 只读视图：显示不允许编辑的复杂图表
• 信息亭显示：在公共空间显示静态信息图表
• 模板：显示用户不应修改的布局示例
• 分步教程：在引导游览期间控制用户交互