Vertical ports or drawing connections from node edges

[Ataraxy]

Really like the library!

It would be nice to have an option for inputs/outputs to be on the top/bottom of nodes instead as it appears the logic for drawing connections is hard coded with the assumption that ports are on the sides.

For example:

Similarly, removing a reliance on port elements entirely and instead being able to just draw connections from any of a nodes edges would be nice, though maybe that's too much an impractical change.

For example:

[jerosoler]

Hello! @Ataraxy

Thanks! 😉

Vertical it's possible only modify the CSS.

Only add the css:

  .drawflow .drawflow-node {
    display: block;
  }

  .drawflow .drawflow-node .inputs, .drawflow .drawflow-node .outputs {
    display: flex;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .drawflow .drawflow-node .input {
    top: -10px;
    left: 0px;
  }

  .drawflow .drawflow-node .output {
    top: 10px;
    right: 0px;
  }

The curvature of the connection vertically is not very good. But maybe add a function to modify the curve. Commented on #12

Maybe everything could be done automatically.

editor.node_style = 'Horitzontal' Or 'Vertical';

The second example is more complicated. I understand that all nodes would only have one input and one output.

Maybe the connection could be made "CTRL + Click".

[Ataraxy]

I suppose the second example could mostly be achieved with CSS as well to a degree. As you pointed out it really comes down to a node technically having only one input and one output so instead of a circle one could just make the port a few pixels along the width (or height) of the edge that the outgoing connection is dragged from.

To do what the example does though would mean that an output or input could come from any side of a node which means it would require a "port container" on each side of it that could act as either port type and the output would merely be determined by whichever node the connection started from. So yeah it might be a bit of an impractica change / option.

As for the curves using something like https://github.com/anseki/leader-line instead to handle drawing connections would offer a lot of flexibility and customization for them but I could also understand not wanting an additional dependency.

[jerosoler]

Right now I was trying a method to overwrite the curve.

This example:

    editor.curvature = 0;
    editor.reroute_curvature_start_end = 0;
    editor.reroute_curvature = 0;

    editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value) {
      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;
    }

[jaspermyrp]

Hello, it will be great to implement an arrow for the lines to indicate the flow direction. Thank you

[jerosoler]

Hello @jaspermyrp

For the arrow.

You can override the function createCurvature and add arrow.

For example:

Code:

editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
      var line_x = start_pos_x;
      var line_y = start_pos_y;
      var x = end_pos_x;
      var y = end_pos_y;
      var curvature = curvature_value;
      //type openclose open close other
      switch (type) {
        case 'open':
          if(start_pos_x >= end_pos_x) {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * (curvature*-1);
          } else {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * curvature;
          }
          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;

          break
        case 'close':
          if(start_pos_x >= end_pos_x) {
            var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
            var hx2 = x - Math.abs(x - line_x) * curvature;
          } else {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * curvature;
          }                                                                                                                  //M0 75H10L5 80L0 75Z

          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';
          break;
        case 'other':
          if(start_pos_x >= end_pos_x) {
            var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
            var hx2 = x - Math.abs(x - line_x) * (curvature*-1);
          } else {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * curvature;
          }
          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
          break;
        default:

          var hx1 = line_x + Math.abs(x - line_x) * curvature;
          var hx2 = x - Math.abs(x - line_x) * curvature;

          //return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';
      }

    }

Only added at function default:

 M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

[Ataraxy]

Heya!

So I was wondering if you had any ideas on how I could do this. I would like to use labels as ports and draw connections from the center of each of them (if horizontal).

For example:

Instead of:

I think my ideal scenario would be that I could define input/output elements within the html of a custom node or maybe a container for where they should be. This way we would probably have the most flexibility to do whatever we like.

Another possible (simpler) solution is being able to pass in labels for inputs/outputs during editor.addNode() which are added to the markup wrappers being used to create the inputs/outputs. Then we could just style the elements with CSS.

[mrsherlock88]

Hi @jerosoler ,

I tried to make vertical along with arrow at the end. First I used custom CSS for each node to take endpoint to top/bottom of node. Then I realize the line is calculate to center of node instead of direct to the endpoint, because I make an arrow and see it's disappeared.

.drawflow .parent-node .glue-etl .outputs {
  position: absolute;
  bottom: -10px;
  padding-left: 50%;
}
.drawflow .parent-node .s3-raw .inputs {
  position: absolute;
  top: -10px;
  padding-left: 50%;
}

I was able to put the endpoint to top/bottom of the nodes using custom CSS above, but the arrow is not appear because the line is draw under the node (as I draw 2 ugly red lines). How can I make a custom code or css without modify your base drawflow.js and drawflow.css file?

[jerosoler]

Hello @Ataraxy

Are you looking for this? #18

What comments to do something like this:

editor.addNode ('github', 0, 3, 150, 300, 'github', data, html);

For:

editor.addNode ('github', 0, ['Yes', 'No', 'Other'], 150, 300, 'github', data, html);

If it's about connections use # 18

[jerosoler]

Hi! @mrsherlock88

Add css for view connection end:

.drawflow svg {
    z-index: 3;
}

With the code:

  .drawflow .drawflow-node {
    display: block;
  }

  .drawflow .drawflow-node .inputs, .drawflow .drawflow-node .outputs {
    display: flex;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .drawflow .drawflow-node .input {
    top: -10px;
    left: 0px;
  }

  .drawflow .drawflow-node .output {
    top: 10px;
    right: 0px;
  }

The arrow example code is only for horitzontal method.

[mrsherlock88]

Hi @jerosoler ,

I've tried the CSS before but maybe it conflict with my current CSS so I use my own custom CSS, also I want to explicit top/bottom endpoint for particular node, not for all.

Also, I upload my image when use you css and the real line. Note that the line comes from Glue ETL to S3 Raw.

[jerosoler]

@mrsherlock88

I will modify so that it goes to find the exact point and not the parent element.

This will make it easier to modify the positions points.

[Ataraxy]

Hi, I wasn't referring to a label on the connection itself, but rather instead of a circular output or input, to instead use a label or text as the point of origin for the connection.

I've sorta got it working this way from a little CSS where each input and output is just a 5px high element that spans across the node like this:

The problem is that the labels in this case are within the node which means the point of origin for the connection is offset. (since it is always at the center of whatever the port element is). That's why I was wondering if instead there was approach to adding a label to use within the "port" instead.

I will keep messing around with it.

[jaspermyrp]

Hello @jaspermyrp

For the arrow.

You can override the function createCurvature and add arrow.

For example:

Code:

editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
      var line_x = start_pos_x;
      var line_y = start_pos_y;
      var x = end_pos_x;
      var y = end_pos_y;
      var curvature = curvature_value;
      //type openclose open close other
      switch (type) {
        case 'open':
          if(start_pos_x >= end_pos_x) {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * (curvature*-1);
          } else {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * curvature;
          }
          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;

          break
        case 'close':
          if(start_pos_x >= end_pos_x) {
            var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
            var hx2 = x - Math.abs(x - line_x) * curvature;
          } else {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * curvature;
          }                                                                                                                  //M0 75H10L5 80L0 75Z

          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';
          break;
        case 'other':
          if(start_pos_x >= end_pos_x) {
            var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
            var hx2 = x - Math.abs(x - line_x) * (curvature*-1);
          } else {
            var hx1 = line_x + Math.abs(x - line_x) * curvature;
            var hx2 = x - Math.abs(x - line_x) * curvature;
          }
          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
          break;
        default:

          var hx1 = line_x + Math.abs(x - line_x) * curvature;
          var hx2 = x - Math.abs(x - line_x) * curvature;

          //return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
          return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';
      }

    }

Only added at function default:

 M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+'Z';

Thank you!

[jerosoler]

Hello @mrsherlock88

New update version 0.0.22 with fix search position points.

For example:

editor.addNode('github', 1, 3, 100, 50, 'romb', data, "<b>Hey</b>");

  .drawflow .parent-node .romb {
    transform: rotate(45deg);
    width: 50px;
    height: 50px;
  }
  .drawflow .parent-node .romb .drawflow_content_node {
    transform: rotate(-45deg);
  }
  .drawflow .parent-node .romb .input_1 {
    transform: rotate(-45deg);
    position: relative;
    top: 40px;
    right: 25px;
  }

  .drawflow .parent-node .romb .output_1 {
    transform: rotate(-45deg);
    position: relative;
    top: -5px;
    right: 75px;
  }

  .drawflow .parent-node .romb .output_2 {
    transform: rotate(-45deg);
    position: relative;
    top: -35px;
    right: 0px;
  }

  .drawflow .parent-node .romb .output_3 {
    transform: rotate(-45deg);
    position: relative;
    top: 10px;
    right: 0px;
  }

Or points out of node:

I have pending review your PR

[mrsherlock88]

@jerosoler nice to hear that, in my PR, I also fix the direction of line or curve points (in openclose line) base on the position of point with node.

• If the point is on the top, the direction must be up,
• If the point is on bottom, the direction must be down. ....

So when I add arrow in the end of line using marker-end, it should appear normally.

PS: nice to see the change logs between updates.

[MehbubRashid]

hi @jerosoler the arrow is not filled..and does not look good..how can i fill it with solid color?

[MehbubRashid]

also the arrow does not stay with the connector line if i move the node so much up or down...the arrow remains in the same place but the connector line gets moved...so they becomes seperated....

do you have any better solution?

[jerosoler]

Hello @MehbubRashid

The example is only a lines. Adding more lines for example:

M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+' Z' +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-3)+'  L'+(x-20)+' '+ (y+3)+' Z' +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-1)+'  L'+(x-20)+' '+ (y+1)+' Z'

Complete line:

return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-5)+'  L'+(x-20)+' '+ (y+5)+' Z' +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-3)+'  L'+(x-20)+' '+ (y+3)+' Z' +' M '+ (x-11)  + ' ' + y + ' L'+(x-20)+' '+ (y-1)+'  L'+(x-20)+' '+ (y+1)+' Z';

For comment: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-685410323

The values of the numbers "11", "20" and "5" would have to be calculated.

[MehbubRashid]

@jerosoler it works..but i was taking about this...the arrow does not stay with the line...how to fix this?

[MehbubRashid]

hi @jerosoler , instead of overwriting the curvature function, i have overwritten the inputs css and made the round inputs into triangle using css...it works perfectly.. but when there is no connection, the triangle still remains there

so i want a way to remove this...in simple, i want the inputs to be visible only if the input has a connection.otherwise not.it would be great if you would add a class called "connected" to the input class upon creating a connection...when the connection is removed, the class will also get removed..it will help users to style their inputs and outputs more nicely.can you add this?

[NishargShah]

@jerosoler is there any way that dots behave input and output both simultaneously?

we used your library and it's pretty good but now we need that feature that dot can behave as an input and output both.

[jerosoler]

Hello @NishargShah

It can not.

But a fix could be made.

Try modifying the addConnection function

[NishargShah]

@jerosoler Thanks for the really quick answer, can you please tell me how can I achieve it, I don't know really

[jerosoler]

@NishargShah

I see that you have to touch more things. Many... Wouldn't it help to put a bullet output on top of an input via css?

[NishargShah]

@jerosoler Thanks it's a great idea, let me work on it, thanks again...

[NishargShah]

@jerosoler that's a great idea but if I overlap input into output I can't draw a line or if I overlap output into input I can't attach that line in dot, any suggestion?

[jerosoler]

@NishargShah use event click for change z-index (input/output).

Qucik example

  editor.on("click", function(event) {
    if(event.target.classList[0] == "output") {
      for (const element of document.querySelectorAll(".inputs")) {
        element.style.zIndex = 3
      }
    } else {
      for (const element of document.querySelectorAll(".inputs")) {
        element.style.zIndex = 2;
      }
      for (const element of document.querySelectorAll(".outputs")) {
        element.style.zIndex = 2;
      }
    }
  });

[NishargShah]

@jerosoler yes it's working but it behaves like a toggle thing, not smooth because if I drag a line from the dot after that if I clicked again on that dot it will behave as input because of a z-index, there is any other way?

[NishargShah]

@jerosoler Thanks for the help, I completed with below code

useEffect(() => {
    document.addEventListener('mouseup', event => {
      if(event.target.classList[0] !== "output") {
        for (const element of document.querySelectorAll(".inputs")) {
          element.style.zIndex = 2;
        }
        for (const element of document.querySelectorAll(".outputs")) {
          element.style.zIndex = 2;
        }
      }
    });

    editor.current.on("connectionCreated", () => {
      for (const element of document.querySelectorAll(".inputs")) {
        element.style.zIndex = 2;
      }
      for (const element of document.querySelectorAll(".outputs")) {
        element.style.zIndex = 2;
      }
    })

    editor.current.on("click", event => {
      if(event.target.classList[0] === "output") {
        for (const element of document.querySelectorAll(".inputs")) {
          element.style.zIndex = 3
        }
      }
    });
  }, []);

[jerosoler]

I leave here an arrangement so that the lines are better displayed in vertical format. In case someone can help you.

Fix for vertical lines:

    /* Fix vertical lines */
    editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
        var line_x = start_pos_x;
        var line_y = start_pos_y;
        var x = end_pos_x;
        var y = end_pos_y;
        var curvature = curvature_value;
        //type openclose open close other


        switch (type) {
        case 'open':
            if(start_pos_y >= end_pos_y) {
            var hy1 = line_y + Math.abs(y - line_y) * curvature;
            var hy2 = y - Math.abs(y - line_y) * (curvature*-1);
            } else {
            var hy1 = line_y + Math.abs(y - line_y) * curvature;
            var hy2 = y - Math.abs(y - line_y) * curvature;
            }
            return ' M '+ line_x +' '+ line_y +' C '+ line_x +' '+ hy1 +' '+ x +' ' + hy2 +' ' + x +'  ' + y;

            break
        case 'close':
            if(start_pos_y >= end_pos_y) {
            var hy1 = line_y + Math.abs(y - line_y) * (curvature*-1);
            var hy2 = y - Math.abs(y - line_y) * curvature;
            } else {
            var hy1 = line_y + Math.abs(y - line_y) * curvature;
            var hy2 = y - Math.abs(y - line_y) * curvature;
            }
            return ' M '+ line_x +' '+ line_y +' C '+ line_x +' '+ hy1 +' '+ x +' ' + hy2 +' ' + x +'  ' + y;
            break;
        case 'other':
            if(start_pos_y >= end_pos_y) {
            var hy1 = line_y + Math.abs(y - line_y) * (curvature*-1);
            var hy2 = y - Math.abs(y - line_y) * (curvature*-1);
            } else {
            var hy1 = line_y + Math.abs(y - line_y) * curvature;
            var hy2 = y - Math.abs(y - line_y) * curvature;
            }
            return ' M '+ line_x +' '+ line_y +' C '+ line_x +' '+ hy1 +' '+ x +' ' + hy2 +' ' + x +'  ' + y;
            break;
        default:
            var hy1 = line_y + Math.abs(y - line_y) * curvature;
            var hy2 = y - Math.abs(y - line_y) * curvature;

            return ' M '+ line_x +' '+ line_y +' C '+ line_x +' '+ hy1 +' '+ x +' ' + hy2 +' ' + x +'  ' + y;


        }

    }

    /* End Fix vertical lines */