美文网首页
流程图组件g6自定义图项更新时的小坑

流程图组件g6自定义图项更新时的小坑

作者: lain_one | 来源:发表于2020-11-03 08:06 被阅读0次

    g6算是个蛮知名的流程图引擎吧,比echarts难一点,不过多试几次也能上手。最近在使用它做二次开发做自定义流程图,用到它自定义图项的功能,结合vue一起来使用,踩到了“vue 双向数据绑定对Object(map)、list数据变更不敏感”的坑。
    g6自定义节点的方式如下教程所示:https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/custom-node
    在实际使用中,我用this.$refs.vueFlowchartEditor.propsAPI.update来更新图项数据和状态,此时会触发自定义图项里的draw()方法。在第一次将自定义图项从菜单里拖出来的时候,图项能根据预设的数据(主要使用了一个Object来表示关键数据)自行更新。但是在编辑了数据之后,图项不能根据已经变更后的Object来自行更新。
    初次更新的调用栈:

    draw (stop-flow-update.vue?b56e:330)
    e._drawInner (vue-flowchart-editor.common.js?bc4c:347)
    e.draw (vue-flowchart-editor.common.js?bc4c:347)
    e.update (vue-flowchart-editor.common.js?bc4c:347)
    (anonymous) (vue-flowchart-editor.common.js?bc4c:347)
    e._updateItems (vue-flowchart-editor.common.js?bc4c:347)
    e.update (vue-flowchart-editor.common.js?bc4c:347)
    update (vue-flowchart-editor.common.js?bc4c:4374)
    _this.<computed> (vue-flowchart-editor.common.js?bc4c:10795)
    updateCurrentItemModel (stop-flow-update.vue?b56e:748)
    invoker (vue.runtime.esm.js?2b0e:2023)
    Vue.$emit (vue.runtime.esm.js?2b0e:2534)
    handleClickLink (iview.js?e069:8924)
    invoker (vue.runtime.esm.js?2b0e:2023)
    fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)
    

    第二次更新关键数据的Object时的调用栈:

    updateCurrentItemModel (stop-flow-update.vue?b56e:749)
    invoker (vue.runtime.esm.js?2b0e:2023)
    Vue.$emit (vue.runtime.esm.js?2b0e:2534)
    handleClickLink (iview.js?e069:8924)
    invoker (vue.runtime.esm.js?2b0e:2023)
    fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)
    

    发现关键在于
    this.$refs.vueFlowchartEditor.propsAPI.update 没能按期望的触发。
    推测是因为vue的双向数据绑定的坑。所以在目标数据里加了个根据Object来变化的String变量,来让vue的双向绑定机制能正常生效。
    比如原来的数据:

    let data1= {"data":{"key1":"1"}}
    data1 =  {"data":{"key1":"1","key2":"2"}}
    

    当data1出现上述变化的时候,其实vue是没能自动检测到的。所以我改成下面这样

    let data1= {"data":{"key1":"1"},"jsonStr":JSON.stringify(JSONObject)}
    
    

    增加一个json字符串的变量,每次JSON objec有变化时,其对应的json字符串都会有相应变化,而vue的双向绑定,对于字符串的变更是能自动检测到的,此时就能正常触发update- >draw(),重绘自定义图项。

    相关文章

      网友评论

          本文标题:流程图组件g6自定义图项更新时的小坑

          本文链接:https://www.haomeiwen.com/subject/sfxbvktx.html