rete Plugins implementation

Extend the capabilities of the editor with external modules

Possible plugins:

Tasks ✓
Modules ✓
~~Differences~~ Version control
Context menu ✓ a. duplicate node ✓
Node/Control rendering
Adding nodes with the help of gestures
Voice control (adding nodes)
Code generation ✓
Sound accompaniment
Profiling ✓
Nodes filtering
Minimap ✓
Arrange nodes #129 #90 ✓
Custom blocks (frames, labels) ✓
Groups ✓
History (undo/redo) ✓
Connect intermediate node over exist connection #2
Flow highlight
Selection ✓

Write your ideas and suggestions!

Apr 28 '18 12:04 Ni55aN

Please vote for the plugins that you would like to see

Jun 06 '18 18:06 Ni55aN

+1 for ability to render controls with React(5) +1 for code generation(8)

Jul 09 '18 21:07 stemsmit

+1 For #12 minimap And #13 arrange nodes

Both would be great for better managing the ui with larger graphs.

Jul 18 '18 18:07 mikecowgill

#13 arrange nodes #Fit on screen

Jul 19 '18 06:07 christian-alejandre-mllrdev

✓ Minimap #132

Aug 02 '18 21:08 Ni55aN

+1 Node/Control Rendering with vue.js

Aug 19 '18 07:08 mrwhy-orig

✓ Vue.js render #169

Sep 01 '18 23:09 Ni55aN

Code generation is a big one for me, would love to see this 👍

Sep 19 '18 12:09 JMidd91

@JMidd91 this is exactly what is planned next

Sep 19 '18 15:09 Ni55aN

@JMidd91 @stemsmit there is a basic version of Code generation.

It working with simple data-flow (no modules and tasks). I still have to figure out how to do this multi lang and how to generate code more correctly

Oct 07 '18 16:10 Ni55aN

Has anyone created a reactjs plugin. I don't know what in the hell I'm doing when trying to create one.

Oct 17 '18 02:10 rszemplinski

@Ni55aN would it be possible to get some documentation in rete/vue-render-plugin such that we can get an idea of how you're making the render plugins?

Also is there a standalone Vue example? I saw you reference this in #187 but it seems like it would require building the entire rete.js.org website in order to play around with it.

Oct 17 '18 02:10 stemsmit

you can refer to this implementation: https://github.com/retejs/vue-render-plugin/blob/master/src/index.js

What are required to render nodes and controls:

listen to rendernode and rendercontrol
put a HTML elements to el parameter
call a bindSocket and bindControl for rendered containers for sockets and controls

For example:

editor.on('rendernode', ({ el, node, component, bindSocket, bindControl }) => {
        if (component.render && component.render !== 'react') return;
        ReactDOM.render(<div>{Array.from(this.node.inputs.values()).map(inp => (
         <Socket bindSocket={bindSocket}/>
      ))}</div>, el);
    });

    editor.on('rendercontrol', ({ el, control }) => {
        if (control.render && control.render !== 'react') return;
        control._vue = createControl(editor, { el, control });
        control.update = () => update(control)
    });

The Socket components should to call a bindSocket in componentDidMount or something else: https://github.com/retejs/rete/blob/dc8d58dd886ab684a354a292862aadd8e9940c9f/src/view/node.js#L36

Alight-render plugin looks much easier: https://github.com/retejs/alight-render-plugin/blob/master/src/index.js

Oct 17 '18 10:10 Ni55aN

duplicate node
undo/redo
selection box to select multiple nodes and reposition and/or duplicate

Nov 06 '18 00:11 TonyGermaneri

selection box to select multiple nodes and reposition and/or duplicate

Ctrl + click on the node allows selecting multiple nodes and translate them

Nov 06 '18 23:11 Ni55aN

Double-clicking on a node to display a panel that allows editing node's internals (node's published internal attributes).
Put a node in between a connection of existing nodes by dragging the new node on top of the line that links given nodes
Documentation on how to render nodes and controls
Improve link disconnection (at least in Chrome more often than not, I cannot disconnect a link.

Nov 20 '18 22:11 DiegoBM

@DiegoBM

Improve link disconnection

How exactly it looks like?

Double-clicking on a node to display a panel that allows editing node's internals (node's published internal attributes).

Perhaps this depends on your Node's implementation

Nov 23 '18 07:11 Ni55aN

@Ni55aN

How exactly it looks like?

At the moment, when I try to un-link a connection by dragging-out from the end and clicking to release, the link continues being attached to the mouse. It doesn't happen all the time, but to me at least it happens around 90% or more of the time with the website demos. (Maybe I don't know how to un-link with the library and I need to press an extra key like "r" or something, but if that's the case the demos don't mention it and it's not intuitive enough to know without mention)

Perhaps this depends on your Node's implementation

Maybe, still would be nice to have a way to edit internal properties that are not "connectable"

Nov 23 '18 08:11 DiegoBM

@DiegoBM do you use a latest versions? When I click anywhere with the selected connection, it disappears.

Nov 23 '18 11:11 Ni55aN

@Ni55aN I was just playing around with the demos in your website to see if I could make use of it. Didn't try the latest version no.

Nov 23 '18 11:11 DiegoBM

@DiegoBM rete.js.org hasn't latest version of Rete. I'll update it

Nov 23 '18 14:11 Ni55aN

Thank you @Ni55aN I guess that makes valid only two of my suggestions:

Put a node in between a connection of existing nodes by dragging the new node on top of the line that links given nodes
Documentation on how to render nodes and controls

Nov 23 '18 15:11 DiegoBM

@mikecowgill @christian-alejandre-mllrdev https://github.com/retejs/auto-arrange-plugin/issues/1#issuecomment-445540667

Dec 09 '18 14:12 Ni55aN

+1 React Rendering +1 History