Plugins implementation (v1)

[Ni55aN]

Extend the capabilities of the editor with external modules

Possible plugins:

1. Tasks ✓
2. Modules ✓
3. Differences Version control
4. Context menu ✓ a. duplicate node ✓
5. Node/Control rendering
   • Vue.js ✓
   • Stage0 ✓, deprecated
   • Alight ✓, deprecated
   • React.js ✓
   • Angular ✓
6. Adding nodes with the help of gestures
7. Voice control (adding nodes)
8. Code generation (wip)
9. Sound accompaniment
10. Profiling ✓
11. Nodes filtering
12. Minimap ✓
13. Arrange nodes #129 #90 ✓
14. Custom blocks (frames, labels) ✓
15. Groups ✓
16. History (undo/redo) ✓
17. Connect intermediate node over exist connection #2
18. Flow highlight
19. Selection ✓

Write your ideas and suggestions!

[Ni55aN]

Please vote for the plugins that you would like to see

[stemsmit]

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

[mikecowgill]

+1 For #12 minimap And #13 arrange nodes

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

[christian-alejandre-mllrdev]

13 arrange nodes

Fit on screen

[Ni55aN]

✓ Minimap #132

[mrwhy-orig]

+1 Node/Control Rendering with vue.js

[Ni55aN]

✓ Vue.js render #169

[JMidd91]

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

[Ni55aN]

@JMidd91 this is exactly what is planned next

[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

[rszemplinski]

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

[stemsmit]

@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.

[Ni55aN]

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

[TonyGermaneri]

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

[Ni55aN]

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

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

[DiegoBM]

• 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.

[Ni55aN]

@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

[DiegoBM]

@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"

[Ni55aN]

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

[DiegoBM]

@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.

[Ni55aN]

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

[DiegoBM]

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

[Ni55aN]

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

[devspacenine]

+1 React Rendering +1 History

[jeffsenn]

+1 React +0.5 History

[Ni55aN]

@devspacenine @jeffsenn rete-history-plugin is released

https://github.com/retejs/history-plugin

[derbylock]

+1 React

[Githamza]

Angular rendering, Disable a node or part of the Flow ( not delete it ) .

[m1sta]

Are there any automatic layout plugins?

[Ni55aN]

@m1sta what do you mean?

[Ni55aN]

@derbylock @jeffsenn @devspacenine React rendering plugin has been implemented about a week ago. Building on the downloads on NPM, and the lack of issues on GitHub, the plugin looks stable :)

[Githamza]

Angular renderer plugin ? I'm getting jealous

With the new Ivy renderer , rendering performance are getting better

[mikecowgill]

+1 angular renderer

[sebbert]

I have created a small plugin which brings a node in front of the others when selected: https://github.com/sebbert/rete-reorder-nodes-plugin If you're interested, I'd be happy to move this over to the official rete oganization.

[zellb]

Angular renderer

[HamedFathi]

Can you provide Aurelia renderer?

[m1sta]

@m1sta what do you mean?

For example: https://gojs.net/latest/samples/ldLayout.html

[Githamza]

I'm so interested to contribute on developing angular-plugin-rendere , but I don't have idea from where to start, so I have created a slack. People who are interested could join the stack and we could be work together to create the plug-in.
https://retejs.slack.com/

Invitation link : https://join.slack.com/t/retejs/shared_invite/enQtNzM5OTEzNzExODc5LTYxODY3NTczZjExNWFiOTZlYTE3NzdjNmFhNDNmZjkwNjEwMjQ5NjQwMGZhYTJkZDBiYmNmNjU4ZWNhNzg1MWU

[Ni55aN]

@m1sta https://github.com/retejs/auto-arrange-plugin https://github.com/retejs/auto-arrange-plugin/issues/1

[Githamza]

Is it possible to complete readme file for plugins ? I see more and more often new plugins but I do not necessarily understand their usefulness juste by reading the plugin's name without documentation.

It would be great if plugins authors could add a description with a screenshot of a demo ( at best a demo link ) .

Thanks

[anhnhoktvn]

Some ideas:

• Node Builder UI: Create new type of node on the UI. Having a list of input/output types, option types, socket types to choose...

• Group/Ungroup nodes: Make it easier to move a group of nodes

• I/O plugin: It'd be nice if we have a way to interact with file system

[mikecowgill]

I'm so interested to contribute on developing angular-plugin-rendere , but I don't have idea from where to start, so I have created a slack. People who are interested could join the stack and we could be work together to create the plug-in. https://retejs.slack.com/

I'm very interested in getting an angular renderer developed. I may be able to help with this. How can I get access to the slack group? Going through the vue renderer code now to see how to approach it.

** After some research it seems the angular monolithic ways if initializing the app won't work too well for the way rete renders the nodes. Vue is more suited to render individual node instances. I'm sure it's possible, but bootstrapping an angular app for each node wouldn't be very efficient. Am I seeing that incorrectly?

[Ni55aN]

@mikecowgill

bootstrapping an angular app for each node wouldn't be very efficient.

I think so, and at the moment I have not found how to render to many HTML elements without losing performance

[Ni55aN]

@Githamza

People who are interested could join the stack and we could be work together to create the plug-in.

How to join this workspase?

[Githamza]

@Githamza

People who are interested could join the stack and we could be work together to create the plug-in.

How to join this workspase?

Sorry here's an invitation link : https://join.slack.com/t/retejs/shared_invite/enQtNzM5OTEzNzExODc5LTYxODY3NTczZjExNWFiOTZlYTE3NzdjNmFhNDNmZjkwNjEwMjQ5NjQwMGZhYTJkZDBiYmNmNjU4ZWNhNzg1MWU

[Ni55aN]

@Githamza https://github.com/retejs/rete/issues/358#issuecomment-524790144

[xVanTuring]

It's will be so good to support drag selection for node, with a space key holding as pan mode. (And also I can't can't find a way api to de-select node, am I miss something?)

[sharyarj]

Hi , any plans for Flow highlight? need it badly.

[Sunil-Kudupudi-Albanero]

Hii @Ni55aN I have started using rete.js but got stuck thinking which framework is the best to start with and I'm facing issues while using react. Can u please help?

[sefgit]

• (Un-)Pin a node
• Node with live chart preview