feat: support the canvas zoom event on mobile devices

[zhongyunWan]

Support the canvas zoom event on mobile devices. Users can control the canvas zoom behavior with two fingers, which is implemented based on PointerEvent.

Demo：https://github.com/user-attachments/assets/9b219852-e1a9-49ac-ba32-30ff5c170488

[petercat-assistant]

Walkthrough

This pull request introduces support for canvas zoom events on mobile devices, allowing users to control zoom behavior using two fingers. This functionality is implemented using PointerEvent to detect and handle touch inputs.

Changes

Files	Summary
packages/g6/__tests__/snapshots/behaviors/zoom-canvas/final.svg, packages/g6/__tests__/snapshots/behaviors/zoom-canvas/initial.svg	Added snapshots for testing mobile zoom functionality.
packages/g6/__tests__/unit/behaviors/zoom-canvas.spec.ts	Added unit tests for mobile zoom functionality using PointerEvent.
packages/g6/src/behaviors/zoom-canvas.ts	Implemented mobile zoom functionality by handling PointerEvent for touch inputs.
packages/g6/src/utils/mobile.ts	Added utility function to detect mobile devices.

🪧 Tips

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

[hustcc]

这个做法，还是在交互中去实现 pc、mobile 两套，感觉不是很好，理论上 pointer 事件就是可以在两端都触发的，看看是否可以一套代码和逻辑，在两端都能良好工作。

[zhongyunWan]

对，这个两端都能触发，直接像wheel一样作为zoomcanvas的默认事件也完全可以运行，移动端的话主要是两指（计算两个点的位移）来计算缩放，pc端主要是支持了 wheel 和 快捷键。
并且现在的 pointer 的方案我理解带触屏的 pc 也是能用的，这样的话我把移动端限制放开，然后在命名上做一些调整应该就可以

[zhongyunWan]

改了一版，测了 pc 和移动端没问题

[Aarebecca]

目前交互的触发是通过 trigger 进行配置的，默认情况下走的下面的逻辑：

this.shortcut.bind([...trigger, CommonEvent.WHEEL], (event) => {
    const { deltaX, deltaY } = event;
    this.zoom(-(deltaY ?? deltaX), event, false);
});

一个更合理的方式是将触控事件抽出到 Shortcut 中，比如这里抽成 pinch 事件，到时候移动端环境时可以配置为：

behaviors: [{
  type: 'zoom-canvas',
  trigger: ['pinch']
}]

通过这种方式会更有利于能力复用。

[hustcc]

@Aarebecca pinch 也是让用户针对移动端单独加触发事件吗？用户肯定最好还是一套代码，两端都能交互，不然相当于用户要自己判断用户环境，做不同的配置。

[Aarebecca]

@Aarebecca pinch 也是让用户针对移动端单独加触发事件吗？用户肯定最好还是一套代码，两端都能交互，不然相当于用户要自己判断用户环境，做不同的配置。

要多端适配就把两个都加上就好了：

behaviors: [
{
  type: 'zoom-canvas',
  trigger: ['wheel']
},
{
  type: 'zoom-canvas',
  trigger: ['pinch']
}]

[hustcc]

我觉得移动端手势交互事件，可以单独引入一套手势系统（这个 S2 和 F2 都做过，可以参考），但是前提是没有引入手势，也能保证 G6 默认的的交互是基本可用的。

[zhongyunWan]

定义了 pinch 事件和 PinchHandler 类，用户可以使用下面的方式来组合 zoom-canvas 的交互行为：
behaviors: [{ type: 'zoom-canvas' }, { type: 'zoom-canvas', trigger: ['pinch'] }],

[Aarebecca]

我觉得移动端手势交互事件，可以单独引入一套手势系统（这个 S2 和 F2 都做过，可以参考），但是前提是没有引入手势，也能保证 G6 默认的的交互是基本可用的。

@hustcc 直接使用手势库的话确实会简化不少