Connection path for nodes connected to "upstream" nodes

[xraybrian]

We have very large nodegraphs with multiple connections from outputs to inputs that are "upstream". For angled pipes, this results in pipes that run diagonal rather than right angles and makes viewing the graph confusing.

Would it be possible to update the pipe pathing (specifically for angled pipes) so that the pipes only make 90 degree bends? I believe this requires the addition of two more vertices for the pipes.

[jchanvfx]

Hi @xraybrian

Do you have like an example screenshot of what you're after? I probably won't be able to add this feature anytime soon but it'll be good to have it here for future reference.

If you want to have a go at making some tweaks here's some starting points for where the pipes are drawn 😃
https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L334
https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L247
https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L247

[xraybrian]

Thank you for reaching out! We are using nodegraphqt in our project here and it is working out well. I did find that the piping from the “PyFlow” project, the “circuit” type is what we are after. ***@***.*** For our use case, we have extended the base node and nodegraph to allow the calculation of partial derivatives through the nodegraph, allowing an optimization chain. Basically autodiff. So, we have optimizers that connect backwards to the input of parameter models, creating cyclic graphs. Anyhow, thank you for the links. I was going to try to modify the nodegraphqt code using the logic from PyFlow to see if I can recreate their pathing. If so, perhaps it would be useful to you? I am also planning on creating an open-source github repo for our project. Take care, -Brian From: Johnny Chan ***@***.***> Sent: Wednesday, February 14, 2024 2:02 AM To: jchanvfx/NodeGraphQt ***@***.***> Cc: Maddox, Brian R. ***@***.***>; Mention ***@***.***> Subject: Re: [jchanvfx/NodeGraphQt] Connection path for nodes connected to "upstream" nodes (Issue #394) Hi @xraybrian<https://urldefense.us/v3/__https:/github.com/xraybrian__;!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSDKmjVVTg$> Do you have like an example screenshot of what you're after? I probably won't be able to add this feature anytime soon but it'll be good to have it here for future reference. If you want to have a go at making some tweaks here's some starting points for where the pipes are drawn 😃 https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L334<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py*L334__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSBPx68Zug$> https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L247<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py*L247__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSAooUNrUA$> https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L247<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py*L247__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSAooUNrUA$> — Reply to this email directly, view it on GitHub<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/issues/394*issuecomment-1943431859__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSBIiKgZGg$>, or unsubscribe<https://urldefense.us/v3/__https:/github.com/notifications/unsubscribe-auth/BDQ6FQP6RG2LKXLW25XB4WTYTSDSNAVCNFSM6AAAAAA6QD7YYSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBTGQZTCOBVHE__;!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSBi3Zi5DA$>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[xraybrian]

FYI, this is a rather simple nodegraph using our tool. You can see from the highlighted pipe that cutting through the nodgraph at an angle is confusing! Also, we have had repeated requests for being able to change the pipe colors. However, it looks like pipes are not serialized and individually tracked, so this would also require a modification to nodegraphqt to accomplish. ***@***.*** Take care, -Brian From: Johnny Chan ***@***.***> Sent: Wednesday, February 14, 2024 2:02 AM To: jchanvfx/NodeGraphQt ***@***.***> Cc: Maddox, Brian R. ***@***.***>; Mention ***@***.***> Subject: Re: [jchanvfx/NodeGraphQt] Connection path for nodes connected to "upstream" nodes (Issue #394) Hi @xraybrian<https://urldefense.us/v3/__https:/github.com/xraybrian__;!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSDKmjVVTg$> Do you have like an example screenshot of what you're after? I probably won't be able to add this feature anytime soon but it'll be good to have it here for future reference. If you want to have a go at making some tweaks here's some starting points for where the pipes are drawn 😃 https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L334<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py*L334__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSBPx68Zug$> https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L247<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py*L247__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSAooUNrUA$> https://github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py#L247<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/blob/main/NodeGraphQt/qgraphics/pipe.py*L247__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSAooUNrUA$> — Reply to this email directly, view it on GitHub<https://urldefense.us/v3/__https:/github.com/jchanvfx/NodeGraphQt/issues/394*issuecomment-1943431859__;Iw!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSBIiKgZGg$>, or unsubscribe<https://urldefense.us/v3/__https:/github.com/notifications/unsubscribe-auth/BDQ6FQP6RG2LKXLW25XB4WTYTSDSNAVCNFSM6AAAAAA6QD7YYSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBTGQZTCOBVHE__;!!G2kpM7uM-TzIFchu!yUwzyLbFPvWDYASf_zA_FprYeNHsmiVsnx7UlM4nd1i26b5_0pHpJhGIN9pCEllSsx-uxgKoOz-x2I5gxSBi3Zi5DA$>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[xraybrian]

Here is my suggested code for _draw_path_horizontal and _draw_path_vertical:

def _draw_path_vertical(self, start_port, pos1, pos2, path,
offset = 30):
"""
Draws the vertical path between ports.

    Args:
        start_port (PortItem): port used to draw the starting point.
        pos1 (QPointF): start port position.
        pos2 (QPointF): end port position.
        path (QPainterPath): path to draw.
        
        offset (float): the offset to apply for the more complex circuit

    """
    if self.viewer_pipe_layout() == PipeLayoutEnum.CURVED.value:
        ctr_offset_y1, ctr_offset_y2 = pos1.y(), pos2.y()
        tangent = abs(ctr_offset_y1 - ctr_offset_y2)

        max_height = start_port.node.boundingRect().height()
        tangent = min(tangent, max_height)
        if start_port.port_type == PortTypeEnum.IN.value:
            ctr_offset_y1 -= tangent
            ctr_offset_y2 += tangent
        else:
            ctr_offset_y1 += tangent
            ctr_offset_y2 -= tangent

        ctr_point1 = QtCore.QPointF(pos1.x(), ctr_offset_y1)
        ctr_point2 = QtCore.QPointF(pos2.x(), ctr_offset_y2)
        path.cubicTo(ctr_point1, ctr_point2, pos2)
        self.setPath(path)
    elif self.viewer_pipe_layout() == PipeLayoutEnum.ANGLE.value:          

        # start at p1
        path.lineTo(pos1)

        # there are two cases, one where an output is connected
        # to an input, but the input is "behind" the output, i.e.
        # the x-value of the input is smaller than the output port
        
        # the other case is simpler, where the output port x value is 
        # smaller than the input port
        
        # first calculate the simple x-distance
        simple_distance_y = pos2.y() - pos1.y()
        mid_point_x = (pos1.x() + pos2.x()) / 2
        mid_point_y = (pos1.y() + pos2.y()) / 2

        
        if ((simple_distance_y > 0 and start_port.port_type == PortTypeEnum.OUT.value) or
            (simple_distance_y < 0 and start_port.port_type == PortTypeEnum.IN.value)):
                
            # this is the simplest case
            path.lineTo(QtCore.QPointF(pos1.x(), mid_point_y))
            path.lineTo(QtCore.QPointF(pos2.x(), mid_point_y))
            path.lineTo(QtCore.QPointF(pos2))
                
        else:
            
            # we need a slightly more complex circuit but not too bad
            path.lineTo(QtCore.QPointF(pos1.x(), pos1.y() - offset))
            path.lineTo(QtCore.QPointF(mid_point_x, pos1.y() - offset))
            path.lineTo(QtCore.QPointF(mid_point_x, pos2.y() + offset))
            path.lineTo(QtCore.QPointF(pos2.x(), pos2.y() + offset, ))
                

        # end at p2
        path.lineTo(QtCore.QPointF(pos2))

        self.setPath(path)

def _draw_path_horizontal(self, start_port, pos1, pos2, path,
                          offset = 30):
    """
    Draws the horizontal path between ports.

    Args:
        start_port (PortItem): port used to draw the starting point.
        pos1 (QPointF): start port position.
        pos2 (QPointF): end port position.
        path (QPainterPath): path to draw.
        
        offset (float): the offset to apply for the more complex circuit
    """
    if self.viewer_pipe_layout() == PipeLayoutEnum.CURVED.value:
        ctr_offset_x1, ctr_offset_x2 = pos1.x(), pos2.x()
        tangent = abs(ctr_offset_x1 - ctr_offset_x2)

        max_width = start_port.node.boundingRect().width()
        tangent = min(tangent, max_width)
        if start_port.port_type == PortTypeEnum.IN.value:
            ctr_offset_x1 -= tangent
            ctr_offset_x2 += tangent
        else:
            ctr_offset_x1 += tangent
            ctr_offset_x2 -= tangent

        ctr_point1 = QtCore.QPointF(ctr_offset_x1, pos1.y())
        ctr_point2 = QtCore.QPointF(ctr_offset_x2, pos2.y())
        path.cubicTo(ctr_point1, ctr_point2, pos2)
        self.setPath(path)
    elif self.viewer_pipe_layout() == PipeLayoutEnum.ANGLE.value:

        # start at p1
        path.lineTo(pos1)

        # there are two cases, one where an output is connected
        # to an input, but the input is "behind" the output, i.e.
        # the x-value of the input is smaller than the output port
        
        # the other case is simpler, where the output port x value is 
        # smaller than the input port
        
        # first calculate the simple x-distance
        simple_distance_x = pos2.x() - pos1.x()
        mid_point_x = (pos1.x() + pos2.x()) / 2
        mid_point_y = (pos1.y() + pos2.y()) / 2

        
        if ((simple_distance_x > 0 and start_port.port_type == PortTypeEnum.OUT.value) or
            (simple_distance_x < 0 and start_port.port_type == PortTypeEnum.IN.value)):
                
            # this is the simplest case
            path.lineTo(QtCore.QPointF(mid_point_x , pos1.y()))
            path.lineTo(QtCore.QPointF(mid_point_x , pos2.y()))
            path.lineTo(QtCore.QPointF(pos2))
                
        else:
            
            # we need a slightly more complex circuit but not too bad
            path.lineTo(QtCore.QPointF(pos1.x() - offset, pos1.y()))
            path.lineTo(QtCore.QPointF(pos1.x() - offset, mid_point_y))
            path.lineTo(QtCore.QPointF(pos2.x() + offset, mid_point_y))
            path.lineTo(QtCore.QPointF(pos2.x() + offset, pos2.y()))
                

        # end at p2
        path.lineTo(QtCore.QPointF(pos2))

        self.setPath(path)