Vertical ports or drawing connections from node edges #20

Ataraxy · 2020-08-01T23:32:08Z

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 · 2020-08-02T08:15:22Z

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 · 2020-08-02T10:38:35Z

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 · 2020-08-02T11:10:55Z

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 · 2020-08-06T01:33:02Z

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

jerosoler · 2020-08-06T07:17:42Z

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 · 2020-08-10T01:10:10Z

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 · 2020-08-10T03:06:49Z

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 · 2020-08-10T07:02:43Z

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 · 2020-08-10T07:06:12Z

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 · 2020-08-10T07:27:32Z

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 · 2020-08-10T08:43:38Z

@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 · 2020-08-10T08:55:09Z

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 · 2020-08-17T09:34:07Z

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 · 2020-08-25T11:49:16Z

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 · 2020-08-28T06:51:50Z

@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 · 2020-09-02T07:09:30Z

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

MehbubRashid · 2020-09-02T07:30:19Z

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 · 2020-09-02T07:47:57Z

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: #20 (comment)

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

MehbubRashid · 2020-09-02T12:56:11Z

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

MehbubRashid · 2020-09-02T13:18:14Z

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 · 2020-12-16T07:54:51Z

@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 · 2020-12-16T08:14:49Z

Hello @NishargShah

It can not.

But a fix could be made.

Try modifying the addConnection function

NishargShah · 2020-12-16T08:17:18Z

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

jerosoler · 2020-12-16T08:33:03Z

@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?

ramnight · 2022-09-09T03:59:26Z

@Richard0323

editor.createCurvature = function (start_x, start_y, end_x, end_y, curvature_value, type) {
      var center_y = ((end_y - start_y) / 2) + start_y;
      var default_round_radius = 10;
      var round_radius = Math.min(default_round_radius, Math.abs(start_x - end_x), Math.abs(start_y - end_y));
      
      var isRight = end_x > start_x;
      var isDown = end_y > start_y;
      return `M ${start_x} ${start_y} 
            L ${start_x} ${isDown ? center_y - round_radius : center_y + round_radius} 
            A ${round_radius} ${round_radius} 0 0 ${isRight ^ !isDown ? 0 : 1} ${isRight ? start_x + round_radius : start_x - round_radius} ${center_y}
            L ${isRight ? end_x - round_radius : end_x + round_radius} ${center_y}
            A ${round_radius} ${round_radius} 0 0 ${isRight ^ !isDown ? 1 : 0} ${end_x} ${isDown ? center_y + round_radius : center_y - round_radius}
            L ${end_x} ${end_y}`;
    }

ArG97 · 2022-11-08T02:29:43Z

Hi Jero, i saw some similar problem but its not working for me, could you help me to find the problem.

i want like this and tried this code also
var center_y = ((end_pos_y - start_pos_y)/2)+start_pos_y;
return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ start_pos_x +' ' + center_y + ' L ' + end_pos_x + ' ' + center_y + ' L ' + end_pos_x + ' ' + end_pos_y;

jerosoler · 2022-11-08T07:27:18Z

Hello,
You should have two lines.
A when the start_pos_y > end_pos_y i the opposite.

ArG97 · 2022-11-08T08:17:08Z

can you show me the example as in a code? @jerosoler
i have tried like this:

but the lines are disappeared

jerosoler · 2022-11-09T07:46:45Z

@ArG97

 editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value) {
      if(end_pos_y > start_pos_y) {

        var center_y = ((end_pos_y - start_pos_y)/2)+start_pos_y;
        return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ start_pos_x +' ' +  center_y  + ' L ' + end_pos_x + ' ' +  center_y  + ' L ' + end_pos_x + ' ' + end_pos_y;

      } else {
         
        // New curvature 
        return ' M ...';
      }
    }

huynhfxvn · 2022-11-09T08:15:27Z

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) { default: var hx1 = line_x + Math.abs(x - line_x) * curvature; var hx2 = x - Math.abs(x - line_x) * curvature; let xx = ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ (hx2) +' ' + y +' ' + (x-20) +' ' + y +' M '+ (x-11) + ' ' + y + ' L'+(x-20)+' '+ (y-5)+' L'+(x-20)+' '+ (y+5)+'Z'; return xx; } }

Better arrow

tamarahera · 2022-11-20T18:19:28Z

Hi there! Thanks for the library! @jerosoler
I used all hints above, but have one question.
I have a node with an input at the top and an output at the bottom. Also some outputs at the right side.
Can you tell me please, is there some condition to make another appearance of the outputs at the right side, because for now they have lines as for the output at the bottom?

Thanks!

jerosoler · 2022-11-24T16:36:34Z

@crinoidea
We will need a value in the create Curvature function to be able to do it. An "direction" value of the ouput.

mushzak · 2023-01-25T10:11:05Z

Crinoidea can you share your code, please?

ArturCiesla · 2023-06-27T06:45:02Z

Hi, I have tried use your code above to set input/output code at the top/bottom edges. Once I have only output is ok but when I have input/output had issue as on the picture below

ArturCiesla · 2023-06-27T06:45:41Z

here's my code:
.drawflow .drawflow-node .inputs, .drawflow .drawflow-node .outputs {
display: flex;
width: auto;
justify-content: center;
align-items: center;

}

.drawflow .drawflow-node .output {
width: 10px;
height: 10px;
background: rgb(255, 255, 255);
border-radius: 50%;
color: #8E8E91;
border: 2px solid #8E8E91;
cursor: crosshair;
z-index: 1;
top: 10px;
right: 0px;
}

.drawflow .drawflow-node .input {
width: 10px;
height: 10px;
background: #8E8E91;
border-radius: 50%;
color: #8E8E91;
border: 2px solid #8E8E91;
cursor: crosshair;
z-index: 1;
top: -10px;
left: 0px;
}

.drawflow .drawflow-node {
background-color: rgb(255, 255, 255);
border-color: #8E8E91;
border-radius: 10px;
border-style: solid;
border-width: 2px;
height: 54px;
width: 280px;
display: block;

}

jerosoler self-assigned this Aug 2, 2020

jerosoler added the question Further information is requested label Aug 2, 2020

jerosoler mentioned this issue Aug 6, 2020

Option to add default input and direction arrows #22

Closed

mrsherlock88 mentioned this issue Aug 17, 2020

Update Start of line and End of line #32

Open

jerosoler mentioned this issue Sep 21, 2020

Dynamic Input-Output #42

Closed

jerosoler mentioned this issue Oct 26, 2020

Arrows? #57

Open

jerosoler mentioned this issue Jul 11, 2022

Connection customization #479

Open

This was referenced Aug 28, 2022

Vertical port #507

Open

Arrows for both horizontal and vertical connection lines #517

Closed

jerosoler mentioned this issue Oct 5, 2022

Design problem: connection line is not positioned in an intelligent way. #539

Open

Soumi95 mentioned this issue Nov 24, 2022

Vertical Connection from nodes (like a Flow Chart) #568

Closed

jerosoler mentioned this issue Dec 4, 2022

4 directions #587

Closed

jerosoler mentioned this issue Jan 11, 2023

Curvature design #632

Closed

jerosoler mentioned this issue Mar 5, 2023

How to create Input that is on right side of a node and output that is on left side of the node #664

Open

jerosoler mentioned this issue Jun 30, 2023

Connection Orientations #725

Closed

jerosoler mentioned this issue Sep 26, 2023

Two-way communication between nodes #769

Open

jerosoler mentioned this issue Oct 3, 2023

I'm using labels, but have problem when label position is in left side, is there any way to fix this issue? #767

Open

DannyV14 mentioned this issue Oct 10, 2023

createCurvature calculation options based on node input/output #773

Closed

jerosoler mentioned this issue Oct 16, 2023

How to join to nodes using single connection ? #774

Open

jerosoler mentioned this issue Jan 3, 2024

Verticle Connected Lines are not showing it will convert in horizontally after saving #806

Open

jerosoler mentioned this issue Feb 2, 2024

Arrow on links #819

Open

nebc-jasonfung mentioned this issue Feb 7, 2024

Possible to reposition the connecting nodes #822

Closed

jerosoler mentioned this issue Apr 3, 2024

Is it possible to create a drawflow connection with a different curvature than the others? #849

Open

jerosoler mentioned this issue Apr 26, 2024

How to place Inputs/Outputs at top & bottom instead of left and right #859

Closed

jerosoler mentioned this issue May 5, 2024

Any way to designate True/False outputs for custom nodes? #861

Open

Vertical ports or drawing connections from node edges #20

Vertical ports or drawing connections from node edges #20

Comments

Ataraxy commented Aug 1, 2020 • edited Loading

jerosoler commented Aug 2, 2020

Ataraxy commented Aug 2, 2020 • edited Loading

jerosoler commented Aug 2, 2020

jaspermyrp commented Aug 6, 2020

jerosoler commented Aug 6, 2020

Ataraxy commented Aug 10, 2020

mrsherlock88 commented Aug 10, 2020

jerosoler commented Aug 10, 2020

jerosoler commented Aug 10, 2020

mrsherlock88 commented Aug 10, 2020

jerosoler commented Aug 10, 2020

Ataraxy commented Aug 10, 2020

jaspermyrp commented Aug 17, 2020

jerosoler commented Aug 25, 2020

mrsherlock88 commented Aug 28, 2020 • edited Loading

MehbubRashid commented Sep 2, 2020

MehbubRashid commented Sep 2, 2020 • edited Loading

jerosoler commented Sep 2, 2020

MehbubRashid commented Sep 2, 2020

MehbubRashid commented Sep 2, 2020

NishargShah commented Dec 16, 2020

jerosoler commented Dec 16, 2020

NishargShah commented Dec 16, 2020

jerosoler commented Dec 16, 2020

ramnight commented Sep 9, 2022 • edited Loading

ArG97 commented Nov 8, 2022 • edited Loading

jerosoler commented Nov 8, 2022

ArG97 commented Nov 8, 2022 • edited Loading

jerosoler commented Nov 9, 2022

huynhfxvn commented Nov 9, 2022 • edited Loading

tamarahera commented Nov 20, 2022 • edited Loading

jerosoler commented Nov 24, 2022

mushzak commented Jan 25, 2023

ArturCiesla commented Jun 27, 2023

ArturCiesla commented Jun 27, 2023

Ataraxy commented Aug 1, 2020 •

edited

Loading

Ataraxy commented Aug 2, 2020 •

edited

Loading

mrsherlock88 commented Aug 28, 2020 •

edited

Loading

MehbubRashid commented Sep 2, 2020 •

edited

Loading

ramnight commented Sep 9, 2022 •

edited

Loading

ArG97 commented Nov 8, 2022 •

edited

Loading

ArG97 commented Nov 8, 2022 •

edited

Loading

huynhfxvn commented Nov 9, 2022 •

edited

Loading

tamarahera commented Nov 20, 2022 •

edited

Loading