Vue2 addNode doesn't render correctly

[francescovallone]

Hi, I'm sorry if this is a duplicate. I'm currently using Butterfly to create a mindmap and so far it has been really good. If I use the Canvas class I have no problem because I can push or slice the list to add or remove a Node but in the TreeCanvas I'm having a really annoying issue.

The current behavior

Right now whenever I add a Node using the method canvas.addNode() it doesn't take the render property and renders without the proper visualization. Here is the coding I'm using right now:

const inputNode = this.canvasData.nodes;
this.canvasRef.removeNode(inputNode.id);
this.canvasRef.addNode({
    id: 'main-topic',
    top: inputNode!.top,
    left: inputNode!.left,
    isRoot: true,
    text: value,
    render: TextNode,
    endpoints: this.generateEndpoints('main-topic'),
});

Result:

The expected behavior

It should create a node rendered using the TextNode component of Vue like in the pic below.

Your environment(such as: Butterfly version、Browser version、OS and so on)

Vue version: ^2.6.11

Butterfly version: butterfly-vue - 1.0.8 | butterfly-dag - ^4.1.13

Browser version: Chrome/89.0.4389.128

OS: Windows

Steps To Reproduce, Maybe you can provide a simple demo.

[francescovallone]

Update

When your first draw the canvas the first node will be an Instance of DefaultNode, when you do this.canvasRef.addNode, the node will be an instance of TreeNode

[Zt448143356]

Thank you for your feedback. I'm very sorry to answer the question so late. I'm still very busy recently. I will check this problem in my spare time.

[Zt448143356]

I'm very sorry to reply to your question so late. I found it was a mistake in use. You can use the this TreeCanvas way. TreeDemo: https://github.com/alibaba/butterfly/tree/master/vue/example/src/page/treeDemo Do not use addnode and other methods to add things. Manipulate the rendering of the canvas(TreeCanvas) by modifying the data.

[wwc89502]

I'm very sorry to reply to your question so late. I found it was a mistake in use. You can use the this TreeCanvas way. TreeDemo: https://github.com/alibaba/butterfly/tree/master/vue/example/src/page/treeDemo Do not use addnode and other methods to add things. Manipulate the rendering of the canvas(TreeCanvas) by modifying the data.

我通过改变数组的方式，无法使用canvas.redo ()和canvas.undo ()等方法，希望能有解决方案

[Zt448143356]

是的，vue中存在这个问题。redo和undo都无法使用了。 暂时还没有时间去修复这个问题。 暂提供解决方案如下： 你可以使用一个数组记录下操作信息，然后根据自己记录下的信息去操作数组来实现redo和undo 我后续修复也是采用这样的方案。因为一些特殊的实现方式，所以导致了原生的redo和undo失效。估计后续就vue中重新记录然后实现这个方法。