使用g6问题记录

957 阅读2分钟

问题一:

使用alt+tab切换到微信或企业微信,进行键盘输入,回到页面后,无法拖动画布。

类似场景:拖动节点有Bug,使用微信截图(CTRL+A)后无法拖动;

对应问题issue

官方给的解释是:

windows alt+tab 切换到浏览器其他标签,回来以后就不能拖动画布了,这是因为交互里面有检测键盘 keydown 来判断事件是否开始,如果切换到别的页面可能会导致没有正常的 keyup。在3.4.8版本修复。

问题修复commit

查看对应源码

	onKeyDown(e: KeyboardEvent) {
      const self = this as any;
      const code = e.key;
      if (!code) {
        return;
      }
      if (ALLOW_EVENTS.indexOf(code.toLowerCase()) > -1) {
        self.keydown = true;
      } else {
        self.keydown = false;
      }
    },
  onKeyUp() {
    (this as any).keydown = false;
    this.origin = null;
    this.dragging = false;
    this.dragbegin = false;
  }

当触发keyUp事件时,将会把keydown置为false.而拖动画布的behavior中的onMouseDown,onMouseMove,onMouseUp事件中均有keydown字段检测,当keyup事件未触发时,将导致对应事件停止响应

if (this.keydown || e.shape) {
      return;
}

问题二:

放缩移动导致图形消失

类似问题1

类似场景:节点连线超出视窗时,做对应的画布移动,当画布移动过远时,只能通过minimap回到原有位置,但是此时minimap无法操作。需要用户手动移动画布,使得内容重新出现

虽然官方表示已修复,但在有些场景下,还是会出现。

替代的解决方案:使用graph实例的fitView或者fitCenter方法,使内容出现在当前视口。

问题三:

当选择组件新连线,未连接到目标节点时,此时的target为包含坐标信息的对象,并没有节点示例,和在连线后,有删除错误规则连线的场景,频繁操作场景下,会出现g6代码报错,

该场景下有时出现画布内容一直随鼠标运动,无法正常操作的情况。

src/item/item.ts文件中,当this._cfg为null时将报错。
  /**
   * 获取属性
   * @internal 仅内部类使用
   * @param  {String} key 属性名
   * @return {object | string | number} 属性值
   */
  public get<T = any>(key: string): T {
    return this._cfg[key] as T;
  }