Add for input/output type and single connection for typed inputs

[raph74]

Hey,

For my project I had to add possibilities to have typed inputs/ouputs so I added the boolean "checkInOutType". Doing so allow me to have a better control of what data is transfered. It also allows me to add custom css style for each type of input/output for different color. If the output type isn't the same as the input type, then no connection is created.

I also added a new boolean "singleConnectionForTypedInput". If this one is set to true, then a typed input can only be linked to one connection. I am using this so by default inputs/outputs define the "flow" of executions, and the typed inputs/outputs are the data transfered. This is similar to what you'll see in UE4 editor with blueprints.
The new function "checkConnectionTypes" can be overriden to defined if the input/output can form a connection. By default it just checks if the 2 have the same type. But we can imagine any logic here to determine if the 2 can form a connection.

Think it could be a great addition to the plugin. You're free to change/refactor the way I did it before including this.
For example I did not change the addNode function to type the inputs/outputs from here. I just added 2 new functions: "changeNodeInputType" and "changeNodeOutputType".
Edit: added 2 new functions "addNodeInput(id, type)" and "addNodeOutput(id, type)"

Here is a simple screenshot with different types for input/output.

[raph74]

Just pushed an update that add possibility to customize connection style based on the output's type. Also I switched the style from being class, to attribute.

This is simply achieved using following css:

// Customisation depending on types
.drawflow .drawflow-node .output[type=number], .drawflow .drawflow-node .input[type=number] {
    border: 2px solid darkcyan;
}
 
.drawflow .drawflow-node .output[type=boolean], .drawflow .drawflow-node .input[type=boolean] {
    border: 2px solid darkred;
}
.drawflow .connection[type=number] .main-path, .drawflow .connection[type=number] .point {
    stroke: darkcyan;
}

.drawflow .connection[type=boolean] .main-path, .drawflow .connection[type=boolean] .point {
    stroke: darkred;
}

[jerosoler]

Hello @raph74

👏👏👏👏

Good work!

This is one of the things the library was missing.

I will check your code. I see that there are many lines.

I keep you informed.

Thanks and regards Jero

Jero

[raph74]

Hello @jerosoler

Thanks! Sorry about so much changes but I had to rollback at some point because I did change all the indent.
Should be good right now.

I just pushed another small update which allow to have custom style for outputs/inputs that have a connection.
It just push a css class called "linked" when a connection is initiated or created, and removed when removing a connection and no other connection use the output/input.

Here is a screenshot of what can be achieved:

Css example:

.drawflow .drawflow-node .output[type=number].linked, .drawflow .drawflow-node .input[type=number].linked {
    background-color: darkcyan;
}
.drawflow .drawflow-node .output[type=boolean].linked, .drawflow .drawflow-node .input[type=boolean].linked {
    background-color: darkred;
}

[jerosoler]

Wow!!!

Take a look at this and tell me what you think.
It is what I thought of his day.

#45 (comment)

You could detect if it is an array or a number in addNode ...

Jero

[raph74]

Hey, it really is what I would like to have implemented for my project!
I could give it a try and push it in here if you want.
I have some pretty interesting cases that I have to handle (for example for enums, I would like to have a dropdown selection placed next to the label) so I have to find the proper way to handle it. I was thinking about putting html code inside the label but any idea/comments on this are welcomed

[raph74]

Hey,

I put the PR as draft for now because I kept adding stuff...
Sadly I won't have more time to spend on this project...
I hope that you, or anyone else, will be able to take over and bring the whole thing to life with what's up in this Fork.
I am unable to test the library with default javascript inside index.html because I don't know how you "gulped" the .js file for it to work at the link: https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js

With this update I have added possibility to add labels next to inputs/ouputs.
The label can contains html as well (same as html node body). I did change a lot the layout of the nodes so some changes might be needed when switching to this version...
There is a new html that showcase how it now works inside docs/node-layout.html.
It now use flex for dynamic size depending on contents on each part of the node (header/content/footer). There are example to collapse header over the body for smaller nodes. As for the inputs/outputs and their labels, this is now using a css GRID with 2 columns: 1 for the hook of the ouput, and the other for the detail we want to show next to it.

Example of json for inputs:

[
      {
         'label': '<label>Test input</label>', 
         'type': 'number'
       }, 
      {...}
]

Here is the result I have still with the demo page:

Now instead of having only the field "html" for node content at the center, we also have a header and a footer and the json should look like this:

"headerContent": "<div class=\"title-box\"><i class=\"fab fa-slack\"></i> Slack chat message</div>",
"html": "\n          <div>\n            \n          </div>\n          ",
"footerContent": "<div>This is the footer</div>",

You can still contact me if you need help I will try to help as much as I can.

Thanks again for bringing this awesome library to life. I hope my contribution will be of use for others even if it doesn't end in the main "master". I will keep the fork up.

Raphael

[jerosoler]

Hello 👋

👏👏👏👏

Thanks for all the input and PR. And above all your time.
I am glad that the library has served you.

There are very interesting things in your PR.
I will try to add them even if they are by hand.

What happens to me like you, I don't have much time. Who can take a look at everything.

Again, thank you very much.

If I have any questions I will comment.

Regards, Jero

[magnusjjj]

Heya. What was the status of this? Tried out raph's branch, but the minified javascript files throws errors about exports :).
Think you might have forgotten to move it from es6?

[magnusjjj]

Hi, @raph74 . I managed to set up the gulp file to allow for use of your changes. I also tested through trial and error setting up so the test page ran.

It still has some visual bugs and things out of place though, and the demo page on your branch is kindof broken and does not include samples for your functionality. I tried poking you on a couple of messaging services, but guessing it looked like spam or scary. If you want to talk about your changes and team up to make it a bit more accessible, hit me up. Your changes satisfy everything I am after, so was psyched to see your screenshots :)

[mcesaro]

Hi there, I'd like to join @magnusjjj request to work on the features added by @raph74. Are there any plans for a Drawflow release with input/output types and lables? Thank you for the good work!

[DeeFuse]

I'm also working on / with raph74's additions.
I fixed some jshint warnings but there are still some functions that need fixes to work correctly with labels.
Are there some recommendations on codesyle or how functions should be written?