lowcode-engine icon indicating copy to clipboard operation
lowcode-engine copied to clipboard

fix(designer): 修复VC组件canResizing发生变化时无法拖拽

Open ibreathebsb opened this issue 1 year ago • 1 comments

VC组件通过prototype中的canResizing函数来配置组件某一边是否可拖拽,并在componentDidMount绑定resize事件,但由于单边的div元素采用了动态渲染,当canResizing发生变化时div会销毁然后重新挂载,但是挂载后并没有重新绑定拖拽事件,导致无法重新拖拽

两种修复方法:

  • 将动态渲染修改为通过style控制显示隐藏即可
  • 或者componentDidUpdate里重新绑定一次,但组件每次更新都会重新绑定,对于拖拽调整组件宽度长度等场景会频发触发解绑和绑定

目前的commit是通过第一种方式修复的

  componentDidMount() {
    this.willBind();
  }
  render() {
     if (!observed.hasOffset) {
      return null; //   ⬅️动态渲染
    }

    return (
      <div>
        {/* ⬇️ 动态渲染 ⬇️ */}
        {triggerVisible.includes("N") && (
          <div
            ref={(ref) => {
              this.outlineN = ref;
            }}
            className={classNames(baseSideClass, "n")}
            style={{
              height: 20,
              transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
              width: offsetWidth,
            }}
          />
        )}
      </div>
    );
  }

ibreathebsb avatar Mar 01 '23 02:03 ibreathebsb

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Mar 01 '23 02:03 CLAassistant