jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.78k stars 741 forks source link

Edit node? #52

Closed samdoeswork closed 4 years ago

samdoeswork commented 4 years ago

Hi, First off Drawflow is brilliant, thank you!

I couldn't see any method to actually update the content of an existing node, e.g. to change the layout in the template. Failing this, perhaps a redraw method which doesn't clear the IDs?

The use-case is to have my application change content, e.g. the title or icon or other HTML content, then display this change to the user.

Thanks! Sam

jerosoler commented 4 years ago

Hello

Thanks!

There is currently no method. Maybe in the future. Since when updating the html content, the data values would also have to be updated.

You can also update the html as mentioned in: https://github.com/jerosoler/Drawflow/issues/40

You will probably also need: https://github.com/jerosoler/Drawflow/issues/43

samdoeswork commented 4 years ago

Thank you for coming back.

I was able to work around this by removing and re-adding the nodes, then rebuilding the connections. It does require a lot of code to keep it in sync (I’m using Angular not Vue).

This library is one of my absolute favorites thank you for making it. (You should consider a pro version with support, it really is good).

Regards Sam

From: Jero Soler notifications@github.com Sent: 24 October 2020 16:09 To: jerosoler/Drawflow Drawflow@noreply.github.com Cc: Sam Smith sam@justaddfeatures.com; Author author@noreply.github.com Subject: Re: [jerosoler/Drawflow] Edit node? (#52)

Hello

Thanks!

There is currently no method. Maybe in the future. Since when updating the html content, the data values would also have to be updated.

You can also update the html as mentioned in: #40https://github.com/jerosoler/Drawflow/issues/40

You will probably also need: #43https://github.com/jerosoler/Drawflow/issues/43

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/jerosoler/Drawflow/issues/52#issuecomment-715928107, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANIFG4BBU7N4R7FKRNBLMHTSMLUZHANCNFSM4S4ZEJAA.

kokmok commented 1 year ago

It's been a long time this issue is closed but facing the same issue I managed a workaround that looks a lot simpler to me. You can do this with pure JS since the node is simply a div.

What I made from an angular app is something like this (simplified):

@ViewChild('editor')
editorElementRef: ElementRef;

updateNodeHtml(nodeId: number, content: string): void {
        const nodeContainer = this.editorElementRef.nativeElement.querySelector('#node-' + nodeId + ' .drawflow_content_node');
        nodeContainer.innerHTML = content;
}

// ....
this.updateNodeHtml(1, '<h1>MyNewNodeContent</h1>');