如何实现点击实例空白处拖拽所有节点与连线，单独拖拽节点不联动

实现方案 #

核心逻辑是通过实例的鼠标事件判断拖拽触发源是否为空白区域，仅空白区域触发的拖拽才将所有节点加入拖拽选区，单独拖拽节点时不执行批量选区添加操作即可满足需求。

步骤1：调整实例初始化配置 #

this.instance = newInstance({
      dragOptions: {
        cursor: 'pointer',
        zIndex: 2000,
        containment: ContainmentType.notNegative,
        // 开启画布空白区域拖拽能力，若你的库默认开启可省略该配置
        enableCanvasDrag: true
      },
      container: this.wrapper.nativeElement,
});

步骤2：绑定事件做触发源判断 #

// 监听画布点击事件，区分点击位置
this.instance.on('mousedown', (e) => {
  // 判断当前点击目标是否为节点/连线
  const isClickOnElement = e.target && ['node', 'edge'].includes(e.target.type)
  // 仅点击空白区域时，将所有节点加入拖拽选区
  if (!isClickOnElement) {
    const allNodes = this.instance.getNodes()
    allNodes.forEach(node => {
      this.instance.addToDragSelection(node)
    })
  }
})

// 拖拽结束后清空批量选区，避免后续拖拽单个节点时触发联动
this.instance.on('dragEnd', () => {
  this.instance.clearDragSelection()
})

注意事项 #

• 若你使用的库的事件名、节点属性、API命名和上述示例有差异，对应替换为对应库的官方API即可，核心判断逻辑通用
• 若你需要保留手动选中的节点状态，可以调整dragEnd回调的清空逻辑，只清空自动添加的全选状态即可

内容的提问来源于stack exchange，提问作者Kamya Kashyap