[Bug]: Event trigger issues for zoom-canvas

[Rey-Wang]

Describe the bug / 问题描述

not sure if it only involve zoom-canvas behavior, when the left mouse button is pressed and dragged across the canvas , then zoom-canvas not worked any more

用下面的配置，用鼠标左键在canvas 上画一下，然后zoom-canvas就不能被触发了

  behaviors: [
      {
        type: 'scroll-canvas',
        enable: (event) => { 
          console.log('scroll', !event.ctrlKey&&!event.metaKey); 
          return !event.ctrlKey && !event.metaKey; 
        },
        preventDefault: true,
      },
      {
        type: 'drag-canvas',
        enable: (event) => event.buttons === 4,
      },
      {
        type: 'zoom-canvas',
        enable: (event) => { 
          console.log('zoom',event.ctrlKey || event.metaKey); 
          return event.ctrlKey || event.metaKey; 
        },
        preventDefault: true,
      },
  ],

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

zoom-canvas-bug.mp4

https://www.loom.com/share/aef43b948f0f4ed9855be2332257095e?sid=c03dcc64-c16f-47b0-8050-248671101d65

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[petercat-assistant]

It seems you are experiencing an issue with the zoom-canvas behavior in antvis/G6 where it stops working after dragging with the left mouse button. Let's try to address this problem.

The configuration you provided shows that the zoom-canvas behavior is enabled only when the ctrlKey or metaKey is pressed. This means that zooming will not work unless one of these keys is held down. If you want the zoom-canvas to work without needing to press these keys, you can modify the enable function for zoom-canvas to always return true.

Here's a suggested modification:

behaviors: [
  {
    type: 'scroll-canvas',
    enable: (event) => { 
      console.log('scroll', !event.ctrlKey && !event.metaKey); 
      return !event.ctrlKey && !event.metaKey; 
    },
    preventDefault: true,
  },
  {
    type: 'drag-canvas',
    enable: (event) => event.buttons === 4,
  },
  {
    type: 'zoom-canvas',
    enable: (event) => { 
      console.log('zoom', true); 
      return true; 
    },
    preventDefault: true,
  },
],

This change will ensure that the zoom-canvas behavior is always enabled, regardless of whether any modifier keys are pressed.

If this doesn't resolve the issue, it might be helpful to check if there are any other interactions or configurations that might be interfering with the zoom-canvas behavior. Additionally, ensure that your G6 version is up to date, as updates may contain bug fixes related to this behavior.

If you continue to face issues, please let me know, and we can explore further solutions.

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.