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

[TsMask]

G6 版本

5.x

问题描述

根据v5文档的dome 在vue3 + vite下使用

https://g6-next.antv.antgroup.com/manual/tutorial/quick-start

重现链接

https://g6-next.antv.antgroup.com/manual/tutorial/quick-start

重现步骤

https://g6-next.antv.antgroup.com/manual/tutorial/quick-start

复制react的代码示例，修改ref的引用

成功显示两个球，但无法缩放，点击节点文字会下移

预期行为

希望看看最新的版本是否正常

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [5.0.0-beta.28]

屏幕截图或视频（可选）

补充说明（可选）

No response

[github-actions[bot]]

hi @TsMask, welcome!

[github-actions[bot]]

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

[Aarebecca]

麻烦提供下相关代码

[TsMask]

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>
 

[Aarebecca]

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

[lisonge]

也许和此问题相关？

官网 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 (正常放缩)

[Hisioni]

没看懂，到底要怎么配置

[Aarebecca]

也许和此问题相关？

官网 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 加入

[Aarebecca]

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