Plugins implementation (v1) #80

Ni55aN · 2018-04-28T12:28:58Z

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 (wip)
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!

Ni55aN · 2018-06-06T18:34:32Z

Please vote for the plugins that you would like to see

stemsmit · 2018-07-09T21:35:34Z

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

mikecowgill · 2018-07-18T18:06:55Z

+1 For #12 minimap
And #13 arrange nodes

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

christian-alejandre-mllrdev · 2018-07-19T06:19:08Z

#13 arrange nodes
#Fit on screen

Ni55aN · 2018-08-02T21:01:47Z

✓ Minimap #132

mrwhy-orig · 2018-08-19T07:29:51Z

+1 Node/Control Rendering with vue.js

Ni55aN · 2018-09-01T23:19:03Z

✓ Vue.js render #169

JMidd91 · 2018-09-19T12:52:53Z

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

Ni55aN · 2018-09-19T15:13:04Z

@JMidd91 this is exactly what is planned next

Ni55aN · 2018-10-07T16:23:17Z

@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 · 2018-10-17T02:14:17Z

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

stemsmit · 2018-10-17T02:51:23Z

@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 · 2018-10-17T10:23:17Z

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:

rete/src/view/node.js

Line 36 in dc8d58d

bindSocket(el: HTMLElement, type: string, io: IO) {

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

TonyGermaneri · 2018-11-06T00:34:15Z

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

Ni55aN · 2018-11-06T23:58:46Z

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

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

DiegoBM · 2018-11-20T22:45:00Z

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 · 2018-11-23T07:05:03Z

@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 · 2018-11-23T08:52:52Z

@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 · 2018-11-23T11:29:44Z

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

DiegoBM · 2018-11-23T11:38:19Z

@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 · 2018-11-23T14:54:05Z

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

DiegoBM · 2018-11-23T15:54:39Z

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 · 2018-12-09T14:03:23Z

@mikecowgill @christian-alejandre-mllrdev retejs/auto-arrange-plugin#1 (comment)

devspacenine · 2018-12-11T13:55:56Z

+1 React Rendering
+1 History

jeffsenn · 2018-12-19T21:28:47Z

+1 React
+0.5 History

Ni55aN · 2019-01-05T23:11:37Z

@devspacenine @jeffsenn rete-history-plugin is released

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

derbylock · 2019-01-31T16:30:40Z

+1 React

m1sta · 2019-04-18T11:42:45Z

Are there any automatic layout plugins?

Ni55aN · 2019-04-18T13:15:26Z

@m1sta what do you mean?

Ni55aN · 2019-04-21T16:09:20Z

@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 · 2019-04-26T08:12:20Z

Angular renderer plugin ? I'm getting jealous

With the new Ivy renderer , rendering performance are getting better

mikecowgill · 2019-05-14T21:35:38Z

+1 angular renderer

sebbert · 2019-06-10T01:25:25Z

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 · 2019-07-01T15:41:05Z

Angular renderer

HamedFathi · 2019-07-12T14:18:12Z

Can you provide Aurelia renderer?

m1sta · 2019-07-21T22:15:47Z

@m1sta what do you mean?

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

Githamza · 2019-07-21T23:38:40Z

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 · 2019-07-22T08:07:29Z

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

Githamza · 2019-07-22T08:26:11Z

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 · 2019-07-27T06:38:31Z

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 · 2019-08-16T19:24:35Z

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 · 2019-08-25T10:32:17Z

@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 · 2019-08-25T10:37:32Z

@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 · 2019-08-26T09:10:17Z

@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 · 2019-08-26T09:27:16Z

@Githamza #358 (comment)

xVanTuring · 2019-09-01T21:32:23Z

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 · 2020-02-24T16:58:18Z

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

Sunil-Kudupudi-Albanero · 2020-04-04T12:08:38Z

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 · 2020-05-04T10:46:04Z

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

sushibear · 2020-05-07T09:40:02Z

Hey @Ni55aN ...

one thing i've seen a lot in other Node Editors is the ability to select multiple nodes using a rectangle (lasso) on the canvas. I think this would help to speed up the workflow tremendously!

liesislukas · 2021-05-23T07:14:02Z

If each plugin would have a short video showing what is that plugin about, would help dev onboarding. at least an image or something. E.g. https://github.com/retejs/task-plugin task plugin readme is providing 0 clue on what kind of tasks these are

Ni55aN added the poll label Jun 6, 2018

Ni55aN mentioned this issue Jun 6, 2018

Feature: export to code #104

Closed

Ni55aN pinned this issue Jan 25, 2019

Ni55aN mentioned this issue Jul 25, 2019

Add readme for all plugins #351

Closed

Ni55aN mentioned this issue Oct 17, 2020

Fix layer z-index when selecting a node #473

Closed

Ni55aN changed the title ~~Plugins implementation~~ Plugins implementation (v1) Dec 6, 2022

Ni55aN added the v1 label Apr 4, 2023

Ni55aN unpinned this issue Jun 25, 2023

Ni55aN closed this as completed Jul 13, 2023

Plugins implementation (v1) #80

Plugins implementation (v1) #80

Comments

Ni55aN commented Apr 28, 2018 • edited Loading

Ni55aN commented Jun 6, 2018

stemsmit commented Jul 9, 2018 • edited Loading

mikecowgill commented Jul 18, 2018

christian-alejandre-mllrdev commented Jul 19, 2018

Ni55aN commented Aug 2, 2018

mrwhy-orig commented Aug 19, 2018

Ni55aN commented Sep 1, 2018

JMidd91 commented Sep 19, 2018

Ni55aN commented Sep 19, 2018

Ni55aN commented Oct 7, 2018

rszemplinski commented Oct 17, 2018

stemsmit commented Oct 17, 2018 • edited Loading

Ni55aN commented Oct 17, 2018

TonyGermaneri commented Nov 6, 2018

Ni55aN commented Nov 6, 2018

DiegoBM commented Nov 20, 2018

Ni55aN commented Nov 23, 2018

DiegoBM commented Nov 23, 2018 • edited Loading

Ni55aN commented Nov 23, 2018

DiegoBM commented Nov 23, 2018

Ni55aN commented Nov 23, 2018

DiegoBM commented Nov 23, 2018

Ni55aN commented Dec 9, 2018

devspacenine commented Dec 11, 2018

jeffsenn commented Dec 19, 2018

Ni55aN commented Jan 5, 2019

derbylock commented Jan 31, 2019

m1sta commented Apr 18, 2019

Ni55aN commented Apr 18, 2019

Ni55aN commented Apr 21, 2019

Githamza commented Apr 26, 2019 • edited Loading

mikecowgill commented May 14, 2019

sebbert commented Jun 10, 2019

zellb commented Jul 1, 2019

HamedFathi commented Jul 12, 2019

m1sta commented Jul 21, 2019

Githamza commented Jul 21, 2019 • edited Loading

Ni55aN commented Jul 22, 2019

Githamza commented Jul 22, 2019 • edited Loading

anhnhoktvn commented Jul 27, 2019

mikecowgill commented Aug 16, 2019 • edited Loading

Ni55aN commented Aug 25, 2019

Ni55aN commented Aug 25, 2019

Githamza commented Aug 26, 2019

Ni55aN commented Aug 26, 2019

xVanTuring commented Sep 1, 2019

sharyarj commented Feb 24, 2020

Sunil-Kudupudi-Albanero commented Apr 4, 2020

sefgit commented May 4, 2020

sushibear commented May 7, 2020

liesislukas commented May 23, 2021

Ni55aN commented Apr 28, 2018 •

edited

Loading

stemsmit commented Jul 9, 2018 •

edited

Loading

stemsmit commented Oct 17, 2018 •

edited

Loading

DiegoBM commented Nov 23, 2018 •

edited

Loading

Githamza commented Apr 26, 2019 •

edited

Loading

Githamza commented Jul 21, 2019 •

edited

Loading

Githamza commented Jul 22, 2019 •

edited

Loading

mikecowgill commented Aug 16, 2019 •

edited

Loading