redraw causes error

[manishpatelUK]

Not sure if this is a bug or I've just done something wrong. I need to re-render the nodes of the graph when the user fills in some information.

Using Vue integration:

data () {
  return {
    graphData: {
      groups: [],
      nodes: [],
      edges: [],
    },

And then populate the graph:

this.graphData.nodes.push(this.createNode(element))
// also add edges

All this works fine. createNode simply adds:

 createNode: function (element) {
   return {
     id: element.graphId,
     endpoints: endpoints,
     render: this.createRenderString(element),
   }
 },

Where createRenderString just creates div elements with appropriate class tags. When some data changes, the styling changes for the nodes. So I do:

this.$options.currentCanvas.redraw()

But this causes:

TypeError: Cannot read property 'groups' of undefined
   at b.value (index.js?995b:2)
   at b.value (index.js?995b:2)

I don't define groups anywhere (always empty list in my data). Is this the correct way to force the graph to redraw? Is there a better way to make just one of the nodes redraw?

Thanks in advance.

[cctv1005s]

Could you replay this bug with codesandbox？ It will help me to resolve this problem faster.

@manishpatelUK

[manishpatelUK]

@cctv1005s thanks, I updated butterfly-dag to 3.3.1 and that error now disappears (it wasn't clear that the original error was actually from auto layout).

But now shows a different error - Cannot read property 'sourceEndpoint' of undefined

I've put it here for you: https://codesandbox.io/s/tender-mendeleev-hy7t8

If you click the button, it will remove 1 node and replace it with another with a different colour (but the same node id). The colour change works ok now, but the edge has disappeared.

Thanks

[manishpatelUK]

I have a horrible workaround for this, which forces a redraw of the whole graph:

<butterfly-vue ref="butterfly"
               :canvasData="graphData"
               :canvasConf="canvasConfig"
               :key="redrawKey"
               @onLoaded="onLoaded"
               @onCreateEdge="onEdgeCreated"
               @onOtherEvent="onGraphEvent">

</butterfly-vue>

(Note :key)

Then every time I need a refresh, I just increment redrawKey . Obviously this isn't ideal!

[noonnightstorm]

@Zt448143356

[Zt448143356]

switchColor: function () {
  this.colorSwitch = !this.colorSwitch;
  // just redraw the last one
  this.graphData.edges.pop();
  this.graphData.nodes.pop();
  let node = this.createNode("3");
  this.graphData.nodes.push(node);
  this.graphData.edges.push({
    id: "1-3",
    sourceNode: "1",
    targetNode: "3",
    source: "right",
    target: "left",
  });
},

Is this the effect you want? redraw function

[manishpatelUK]

Ah ok this was the critical bits of info I was missing:

redraw function of Vue version is not supported

and

Because diff is based on id,When mockData has the same id as mockData1, Canvas will not redraw the graph(node,edge,group) of this ID.We need to wait for this.mockData = {} to add data after completion. To avoid this problem.

In my actual application I was removing nodes and edges and adding them back in again but didn't observe the redraw because the id's were the same. Thanks! If it's ok I'll update the documentation in a pull request later to clarify these points.

[Zt448143356]

Thank you for your support for this component. Yes, you can update the documentation.I look forward to you and me working together to improve this component. I will rewrite doc and demo when I release a new Vue version later(Maybe in May or June).

[Zt448143356]

redraw method is complete