画布缩放自适应的BUG about datav-vue

[ggymm]

懒得提pr了，自己改吧

[pengxiaotian]

这并不是bug，这块的设计逻辑是：用户打开或关闭工具面板后不主动调整当前画布的大小，因为有可能是用户自己手动调整的画布大小。目前只有三种方式触发自动调整：

1. 首次打开
2. 改变画布尺寸
3. 快捷键

[ggymm]

这并不是bug，这块的设计逻辑是：用户打开或关闭工具面板后不主动调整当前画布的大小，因为有可能是用户自己手动调整的画布大小。目前只有三种方式触发自动调整：

1. 首次打开
2. 改变画布尺寸
3. 快捷键

那为什么监听window.onresize？
你说的三种情况本来就不会触发window.onresize。
我说的是触发window.onresize时，因为没有offsetX，offsetY。所以页面就没有auto set scale。
或者你这里监听window.onresize本来就是多余的？

[pengxiaotian]

😓 少写了一种。。如果是在多个不同分辨率显示器之间切换，就会用到了。
不过确实有另一个bug：

// 只被赋值了一次，应该把 if 去掉
if (!window.onresize) {
    window.onresize = resize
}

[ggymm]

@Action
public async autoCanvasScale(payload: { offsetX: number; offsetY: number; }) {
  const resize = debounce(() => {
    const width = document.documentElement.clientWidth - payload.offsetX
    const height = document.documentElement.clientHeight - 42 - payload.offsetY

    const a = (width - 120) / this.pageConfig.width
    const b = (height - 140) / this.pageConfig.height
    const scale = parseFloat((a > b ? b : a).toFixed(6)) * 100

    this.setCanvasScale({ scale, ...payload })
  }, 200)

  if (!window.onresize) {
    window.onresize = resize
  }

  resize()
}

resize方法第二次进入时，没有更新（这里写错了）payload
所以你这两行代码计算就出现错误了

const width = document.documentElement.clientWidth - payload.offsetX
const height = document.documentElement.clientHeight - 42 - payload.offsetY

这种错误很明显吧

[pengxiaotian]

这里会形成闭包

[ggymm]

auto_Trim.mp4

直接看视频吧
拖拽devtools窗口触发的resize和直接触发autoCanvasScale的offsetX值不一致

换句话说，在更改了左侧或者顶部面板显示和隐藏后。任何触发resize的方法输入的payload的值都没有更新。都是错的

[pengxiaotian]

@gongym12138 我前面有解释的：

😓 少写了一种。。如果是在多个不同分辨率显示器之间切换，就会用到了。
不过确实有另一个bug：

// 只被赋值了一次，应该把 if 去掉
if (!window.onresize) {
    window.onresize = resize
}

[pengxiaotian]

@gongym12138
绕糊涂了，前面说的三种情况是触发 autoCanvasScale 并刷新 window.onresize的，
切换显示器 才是 触发 window.onresize

[ggymm]

按照你的设计里，触发window.onresize的效果应该和触发自适应（autoCanvasScale）的效果一致？

[ggymm]

@gongym12138
绕糊涂了，前面说的三种情况是触发 autoCanvasScale 并刷新 window.onresize的，
切换显示器 才是 触发 window.onresize

你不如自己试一下，最简单的。

1. 初始状态，关闭左侧组件列表面板
2. 设置系统分辨率为1920*1080
3. 打开左侧组件列表面板
4. 调整系统分辨率为1366*768（此处符合你说的在多个不同分辨率显示器之间切换）
5. 看是否自动调整，以及自动调整是否正确

[pengxiaotian]

我已经试过了，符合我的预期。

你给的例子只会触发 window.onresize，不会触发 autoCanvasScale 。