jsplumb无法监听页面DOM更新

这个问题困扰了我很久，网上也没找到什么记录方法，这里就记录一下

image.png

需求是这样的，点击可以折叠下面表格字段，连线连到外面的表头上，但是由于jsplumb并不知道dom变化了，所有连接点left center位置还是连在外面，下图这样

image.png

理想中的点应该是在表头中间位置
拖拽锚点以后才恢复正常

image.png

image.png

下面说说解决方法把：先revalidate(el), 再repaint(el)

        await delay(0);    // setTimeout 的封装
        let el = $(`#${tableId}`)[0];  //  dom
        try{
          this.chart.jp.revalidate(el);
        }catch(e){
          this.chart.jp.repaint(el)
        }        

1、 await delay(0); 这行代码必须写，否则不生效，应该是dom变化了el不准确
2、 el是需要更新的dom，此处是如图

image.png

3、this.chart.jp 是封装的chart对象的实例

import { jsPlumb} from 'jsplumb';

export default class {
    constructor(container) {
        this.jp = jsPlumb.getInstance();
        this.setContainer(container)
    }
    setContainer(container) {
        this.jp.setContainer(container);
    }
}

// 组件中
this.chart = new Chart("flow_container");

this.chart.jp.revalidate(el) jsplumb内部会报错，但也找不到原因，所有try catch下，

image.png

然后就完美解决了

image.png