v5.0.0-beta.28 画布拖动异常 #5276

hi @TsMask, welcome!

Hi @TsMask, Please star this repo if you find it useful! Thanks :star:! 你好 @TsMask。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!

麻烦提供下相关代码

vue代码，用 "@antv/g6": "^5.0.0-beta.28"

<template>
  <div>
    <div ref="g6text" :style="{ height: '500px', width: '100%' }"></div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, onBeforeUnmount, ref } from 'vue';
import { Graph } from '@antv/g6';

const g6text = ref<HTMLElement | undefined>(undefined);

const data = {
  nodes: [
    { id: 'node1', data: { name: 'Circle1' } },
    { id: 'node2', data: { name: 'Circle2' } },
  ],
  edges: [{ id: 'edge1', source: 'node1', target: 'node2', data: {} }],
};

/**初始化渲染图表 */
function initChart() {
  if (!g6text.value) return;
  console.log(g6text.value.clientHeight);
  console.log(g6text.value.clientWidth);
  const graph = new Graph({
    container: g6text.value,
    height: g6text.value.clientHeight,
    width: g6text.value.clientWidth,
    modes: {
      default: ['drag-node', 'drag-canvas', 'zoom-canvas'],
    },

    data,
  });
}

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});

</script>

你好，可以参考此 Vue 例子来排查问题。

也许和此问题相关？

官网 next 示例文档几乎所有例子里的 zoom-canvas 鼠标放大缩小全是相对某个未知位置放缩，而不是相对鼠标位置放缩

而 v4 的文档示例全是相对鼠标位置放缩(符合用户习惯)

此外，放缩时，文字并不会跟随放缩，这和 v4 也不一致

https://g6-next.antv.antgroup.com/zh/examples/net/indented/#filesystem (相对某个未知位置放缩/文字并不会跟随放缩)

https://g6.antv.antgroup.com/zh/examples/tree/indented/#filesystem (正常放缩)

没看懂，到底要怎么配置

也许和此问题相关？

官网 next 示例文档几乎所有例子里的 zoom-canvas 鼠标放大缩小全是相对某个未知位置放缩，而不是相对鼠标位置放缩

而 v4 的文档示例全是相对鼠标位置放缩(符合用户习惯)

此外，放缩时，文字并不会跟随放缩，这和 v4 也不一致

https://g6-next.antv.antgroup.com/zh/examples/net/indented/#filesystem (相对某个未知位置放缩/文字并不会跟随放缩)

https://g6.antv.antgroup.com/zh/examples/tree/indented/#filesystem (正常放缩)

目前 G6 5.0 正式版缩放时会基于当前指针位置进行；此外默认情况下缩放时文本会同步缩放，不过文本字号保持后续会作为 feature 加入

你可参考最新的示例：https://codesandbox.io/p/sandbox/g6-vue-xzf7pg