Re-Route Nodes

[ghost]

Hey @jerosoler, me again....

I was wondering how hard it would be to add reroute nodes like how Unreal does it so I can make my flowcharts neater especially when routing back to the beginning.

Thanks, Joe

[jerosoler]

I study it!

It doesn't seem simple but I think it can be done.

have not worked with unreal, but it only allows a one reconnection?

I think I have an idea.

1. Double click in connection for create point.
2. Move point.
3. Store point in ouput connection.

"outputs": {
                         "output_1": {
                             "connections": [
                                 {
                                     "node": "17",
                                     "output": "input_1"
                                     "point": {
                                         pos_x: 100,
                                         pos_y: 50,
                                      }
                                 }
                             ]
                         }
                     },

How about?

[ghost]

Hey!

I like the idea of double clicking! The point you have shown would work well too!

In unreal you can have multiple points depending on the type of thing you are doing. Unreal has two types of routes, one for variables and one for that actual flow. The flow routes can only have one connection, however variable routes can have multiple connections.

See:

White connections are the flow and coloured connections are variables

However I feel for this implementation a single connection would be sufficient.

Thanks! Joe

[jerosoler]

Okey.

I look with calm.

[ghost]

Hey @jerosoler

Any updates on this?

Thanks, Joe

[jerosoler]

Hello

Not yet. I have not had time. And it is an advanced function.

Jero

[ghost]

Thanks for your time @jerosoler !

[jerosoler]

Working...

[ghost]

Hey @jerosoler!

This is perfect! Just what I was looking for. Thank you so much!!

Thanks, Joe

[jerosoler]

I just uploaded a new version with the reroutes. https://github.com/jerosoler/Drawflow/commit/bbe7ae033f7c0c9d0b33505478383188623c1dc8

Active reroute connections. Use before start or import.

editor.reroute = true;

New events: Event	Return	Description
addReroute	id	id of Node output
removeReroute	id	id of Node output

How to use

Create point with doble click on line connection. Doble click on point for remove.

The first and the last connection of reroute is curved. Others linear. Is possible change curvature others with: editor.reroute_curvature = 0 // 0 default | normal curve 0.5.

And change the with of rerouter point editor.reroute_width = 6 // default 6

Please try! ;)

I just found a bug but I don't think it will affect you as it affects: removeNodeInput removeNodeOutput

Jero

[jerosoler]

Fix bug for removeNodeOutput and removeNodeInput on version 0.0.17 😉

[ghost]

Hey @jerosoler !

I have merged this into my own fork (with the weird addNode function) and when I double click to add reroute node it places it right in the bottom right corner of the grid.

Please see this video: https://i.gyazo.com/e32d8c5358fabd8b435a9628c3e8a922.mp4

Do you know what would be causing this?

Thanks, Joe

[jerosoler]

The problem is the css.

Have you copied the css file?

The new css:

.drawflow .connection .point {
  cursor: move;
  stroke: black;
  stroke-width: 2;
  fill: white;
  transform: translate(-9999px, -9999px);
}

.drawflow .connection .point.selected, .drawflow .connection .point:hover {
  fill: #1266ab;
}

[Ataraxy]

This is very cool! Though I think being able to reroute also means that you can direct a connection to a reroute point instead of the port that line is being connected to. You can see what I mean by this in one of the above images where it's labeled "merge execution".

This doesn't seem to be the case in the demo.

[ghost]

Hey @jerosoler !

I made the CSS change and that fixed the weird issue! So thanks for that. 😄

This is a step in the right direction and i'm really happy with how the reroute nodes are looking!

The reroute nodes don't seem to work very well when the connection is coming from in front of the current node, for example: However I can imagine this being very hard to fix!

Also what @Ataraxy is saying is very valid. Being able to connect multiple connections into the reroute node would be very useful! I think for the first release of reroutes this was not planned (see comments above)

Thanks, Joe

[jerosoler]

Hi @icabbi-joegarlick

If I realized that. So the central connections are linear.

Example:

The solution is to add more points. (It is not the best solution)

I will look to add a function to be able to create your own custom curvature.

I'll take a look at the topic of @Ataraxy

[jerosoler]

New system of connections for reroute. Examples: Before

After

Before

After

Method curved default

New function for suscribe the curvature:

editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
      var center_x = ((end_pos_x - start_pos_x)/2)+start_pos_x;
      return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ center_x +' ' +  start_pos_y  + ' L ' + center_x + ' ' +  end_pos_y  + ' L ' + end_pos_x + ' ' + end_pos_y;
    }

Is possible change the curve with three parameters:

    editor.curvature = 0.5; // Default no reroute
    editor.reroute_curvature_start_end = 0.5; (First and end reroute connection)
    editor.reroute_curvature = 0.5; // (Other reroutes) 

Commit: https://github.com/jerosoler/Drawflow/commit/094b182f14486e0823e4977635dab24a604e53d9

Update in version 0.0.18

[ghost]

Hey!

This is now working a lot better and is a lot easier to make look right however I am having a weird issue when I add a reroute node after a few have already been added. See video:

https://i.gyazo.com/b343b7f03f493dcddc294d22405be5c6.mp4

Thanks, Joe

[jerosoler]

Hello

Do you follow an order when adding the points?

This happens to you when a point is added before a previous point?

The points follow an order.

Jero

[ghost]

Hey,

Ah this will be the issue then, No I did not follow an order. However, I think adding reroute nodes shouldn't have to be in order as this could easily cause issues and confuse the end user.

Thanks, Joe

[jerosoler]

Hey!!

I just updated: https://github.com/jerosoler/Drawflow/commit/75fbb340b52644ed27f4a5bcdef9832321f6baf1

Try adding:

editor.reroute_fix_curvature = true;

Jero

[ghost]

Hey @jerosoler!

This is working much better now, thank you do much for all the hard work!

The only other slight issue I can see is making backward nodes curve, for example this: If this can connection can be made curved then We can close this issue off!

Again I really appreciate all the time you spend on this!

Thanks, Joe

[jerosoler]

Hello @icabbi-joegarlick

Could you draw the curve you are commenting on above the image?

Have you tried playing with the following values?

 editor.curvature = 0.5; // Default no reroute
    editor.reroute_curvature_start_end = 0.5; (First and end reroute connection)
    editor.reroute_curvature = 0.5; // (Other reroutes) 

Or have you thought about overwriting the drawing function of the connections?

editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
...
}

Jero

[ghost]

Hey @jerosoler

I have added the two settings you suggested but the issue is still happening. See: https://i.gyazo.com/5caef04fcf5e667e8db5e3df2f04a86a.mp4

I would like the curve like the following: Before: After:

Thanks, Joe

[jerosoler]

Hello

The default curve includes two curves.

What you comment only includes a curve.

For that type of curve the function would have to be overwritten.

editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
...
}

With a curve similar to this:

return ' M '+ line_x +' '+ line_y + ' q ' + (x-line_x)/2 + ' ' + (y-line_y) + ' '   + (x-line_x) +' ' + (y-line_y);

We currently use Curveto, I suppose with a Quadratic Bézier curve. It could be done.

https://www.w3schools.com/graphics/svg_path.asp

I look at it calmly.

Jero

[ghost]

Hey @jerosoler!

Would it be possible to add a function to programmatically add reroute nodes?

Thanks, Joe

[jerosoler]

Hello @icabbi-joegarlick

View: https://github.com/jerosoler/Drawflow/issues/46

Jero

[ghost]

Thanks @jerosoler,

I will take a look and see if I can get that working.

Thanks, Joe

[ghost]

Would it be possible to make the "addReroute" event return more data that could be used to re-create it. Like what the mentioned function accepts.

I plan to save reroutes to a database once created then be able to load them back in once the page is reloaded

Thanks, Joe

[jerosoler]

The information is saved in node.

You can get the information with the method getNodeFromId(id)