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
5条答案
按热度按时间fdx2calv1#
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
yquaqz182#
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.
7tofc5zh3#
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.
cwxwcias4#
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 ()等方法，希望能有解决方案
zaqlnxep5#
是的，vue中存在这个问题。redo和undo都无法使用了。
暂时还没有时间去修复这个问题。
暂提供解决方案如下：
你可以使用一个数组记录下操作信息，然后根据自己记录下的信息去操作数组来实现redo和undo
我后续修复也是采用这样的方案。因为一些特殊的实现方式，所以导致了原生的redo和undo失效。估计后续就vue中重新记录然后实现这个方法。