rete_guide.txt

1. You need to go through all of retejs docs: https://retejs.org/docs
2. Check out some of their examples, just what seems interesting and what it's referenced in the guides and see how they work: https://retejs.org/examples
How rete is rendered?Rete works based on nodes and connections.Each node has sockets (input sockets and output sockets, default placement for input sockets are at the left-bottom of the node and for output sockets at the right-top of the node, that can be customized). A node also has controls, which are the things were you may input data, like the body of the node. Everything on the node CAN BE CUSTOMIZED. Everything on the node gets translated to HTML so you can inspect anything on the node. It's not on some JS canvas or something like that, everything is normal HTML.This means that the node is a React Component, controls are, sockets are, it's all using React to render HTML.Also you'll use connections, a connection is just an arrow pointing from a socket to another. ATTENTION: You can connect any output socket to any input socket, this will create an arrow between them, you can only restrict sockets connections using middleware which I will talk later.

What is my implementation?
In rete you first need to create and display what is called an editor, which means the whole area that stuff is rendered inside. If you go to the ActionViewer file you will see this:a create function that creates the editor, then that create function is passed into the useRete hook, the useRete hook will give out the editor and a ref. You put the ref in the div you want to be the editor in, and you use the editor to interact with the editor.

The Editor.tsx is the most important file. Here I define the createEditor function. That function takes in everything you may need for the editor, but what's more important, is what it returns. Before I get into rendering of nodes and how to customize and add everything, you need to know that the editor does not have access directly to Redux, then how does it get the data? (as of now I know that you can make it have access to Redux by passing in the selectors, but I have never tested that). Well to get data into the editor the createEditor function will return a lot of internal functions. It will return functions like loadJson, loadGHLCalendars.. so when you want to load stages let's say into the editor you'd call editor.loadStages(stages), and that function would run inside the editor instance you call that upon (you can see those being used inside the ActionViewer). Also, there are other functions returned like starShouldSave (which you'd use to indicate the editor that it should save whatever is in now), arrange (used to arrange the nodes, you may want to have an external button not inside the editor that does that), exportJSON (to get the current editor state in JSON Format).
Now that you know how data gets into and what those function do, let's see how the editor actually works.First you are going to define the editor object( const editor = new NodeEditor<Schemes>(); ) then you are going to add plugins. It's important to know that the whole rete system runs on plugins and customizing those plugins.You will add plugins to the editor by using editor.use(plugin) and plugins to plugins the same way. Not really important to get how this work, just note that if stuff does not get rendered right it might be because of the order you added those plugins in (happened to me when I first tried to optimzie controls and nodes).

Note about everything:By default you will be working with ClassicPreset.Node, .Socket, .Control. That does not mean you are forced to only use ClassicPreset, you can extend stuff in that to create your own custom nodes and connections and sockets. That means you will take what ClassicPreset gives you and extend it.

Customization: 
You use on the render plugin the .addPreset function. It's the same for everything but let's think about control customization cause that's the hardest (cause there are lots of controls). For each type of special control you may need you will extend the ClassicPreset.Control, then inside the .AddPreset, inside the control function you will check if you have an instanceof the control you want to customize and return the React component that you want to show for that specific control (You got examples in the Costumization.ts file.
That's basically it for how all of this work and you may work with that. There are also plugins for readOnly, arranging nodes, minimap, but I did not went deep into them so I use them the way they show in their docs.

Middlewares:
That's the hard part. For making full use of rete you need to overwrite rete events and do the stuff you want.I will give you a short example:Let's say you want on node click to open up a drawer with settings.
1. You will use an area.addPipe (that will give you a context with data and that's where you add the middleware).
2. You will check for context.type to be the event you want to overwrite, in our instane, we want to overwrite nodepicked, pointerdown, pointerup, nodetranslate.
3. On nodepicked you pick the node for potentially showing the drawer, if a nodetranslate or pointerdown happens later you will mark that you do not want to show the drawer, cause the user is just moving the node not clicking, if a pointerup happens without those happening before you show the drawer.That's how you do it even for harder stuff, but it requires lots of testing and work.

Note for customization: if you want to customize connections, a connection arrow is rendered based on an array of points, those points are generated using a library for curves, you need to check that out and overwrite it.