lowcode-engine
lowcode-engine copied to clipboard
fix(designer): 修复VC组件canResizing发生变化时无法拖拽
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>
);
}