Gojs OrthogonalLinkReshapingTool bug

ahmetgundogdu · November 24, 2020, 9:16am

I use OrthogonalLinkReshapingTool as linkReshapingTool. There is a problem like the image below

My LinkTemplate

GO(go.Link,
                    {
                        name: "LINK",
                        routing: go.Link.AvoidsNodes,
                        corner: 5,
                        curve: go.Link.JumpOver,
                        reshapable: true,
                        resegmentable: true,
                        relinkableFrom: true,
                        relinkableTo: true,
                        adjusting: go.Link.Scale,
                        fromEndSegmentLength: 10,
                        toEndSegmentLength: 15,
                        fromShortLength: fromArrow.shortLength !== undefined ? fromArrow.shortLength : fromArrow.name ? 3 : NaN,
                        toShortLength: toArrow.shortLength !== undefined ? toArrow.shortLength : toArrow.name ? 3 : NaN
                    },
                    new go.Binding("points").makeTwoWay(),
                    GO(go.Shape,
                        {
                            stroke: borderColor,
                            strokeWidth: borderSize,
                            strokeDashArray: borderDashArray,
                            margin: 5
                        },
                        new go.Binding("stroke", "font", function (val, node) {
                            return val && val.borderColor ? val.borderColor : "#000";
                        }),
                        new go.Binding("strokeWidth", "", function (val) {
                            var _width = internalHelper._getBorderWidth(val);
                            if (!_width) {
                                _width = borderSize;
                            }
                            return _width;
                        }),
                        new go.Binding("strokeDashArray", "", function (val) {
                            var _borderDashArray = internalHelper._getBorderDashArray(val);
                            if (!_borderDashArray) {
                                _borderDashArray = borderDashArray;
                            }
                            return _borderDashArray;
                        })
                    ),
                    GO(go.Shape, {
                        fromArrow: fromArrow.name,
                        fill: fromArrow.filled ? borderColor : "white",
                        stroke: borderColor
                    },
                        new go.Binding("stroke", "font", function (val, node) {
                            return val && val.borderColor ? val.borderColor : "#000";
                        }),
                        new go.Binding("fill", "font", function (val, node) {
                            return val && val.borderColor ? val.borderColor : "#000";
                        })
                    ),
                    GO(go.Shape, {
                        toArrow: toArrow.name,
                        fill: toArrow.filled ? borderColor : "white",
                        stroke: borderColor
                    },
                        new go.Binding("stroke", "font", function (val, node) {
                            return val && val.borderColor ? val.borderColor : "#000";
                        }),
                        new go.Binding("fill", "font", function (val, node) {
                            return val && val.borderColor ? val.borderColor : "#000";
                        })
                    ),
                    GO(go.Panel, "Auto",
                        {
                            cursor: "move",
                            minSize: new go.Size(30, 15),
                            _isLinkLabel: true
                        },
                        new go.Binding("background", "text", function (s) {
                            if (s)
                                return EN.isValidColor(canvasBackground) ? canvasBackground : "transparent";
                            else
                                return "transparent";
                        }),
                        GO(go.Shape,  // the label background, which becomes transparent around the edges
                            {
                                name: "LINKSHAPE",
                                fill: "rgba(0,0,0,0.05)",
                                stroke: "rgba(0,0,0,0.33)",
                                strokeDashArray: [3, 3]
                            },
                            new go.Binding("stroke", "", function (node) {
                                var _color = internalHelper._getBorderColor(node.data);

                                if (!_color && args.getFontSettings) {
                                    _color = internalHelper._getBorderColor({ font: args.getFontSettings() });
                                }

                                if (!_color) {
                                    _color = node && node.isSelected ? "rgba(0,0,0,0.33)" : "transparent";
                                }

                                return _color;
                            }).ofObject(),
                            new go.Binding("fill", "", function (node) {
                                var _color = internalHelper._getBackgroundColor(node.data);

                                if (!_color && args.getFontSettings) {
                                    _color = internalHelper._getBackgroundColor({ font: args.getFontSettings() });
                                }

                                if (!_color) {
                                    _color = node.isSelected ? "rgba(0,0,0,0.05)" : "transparent";
                                }

                                return _color;
                            }).ofObject()
                        ),
                        GO(go.TextBlock,
                            {
                                textAlign: "center",
                                font: "10pt helvetica, arial, sans-serif",
                                stroke: "black",
                                margin: 4,
                                editable: true,
                                minSize: new go.Size(30, 10)
                            },
                            internalHelper._getTextBlockFontOptions(args.getFontSettings),
                            new go.Binding("text", "text").makeTwoWay()
                        ),
                        new go.Binding("segmentOffset", "segmentOffset", go.Point.parse).makeTwoWay(go.Point.stringify),
                        new go.Binding("segmentIndex").makeTwoWay(),
                        new go.Binding("segmentFraction").makeTwoWay()
                    )
                )

walter · November 24, 2020, 2:16pm

Yes, that point is really there in the route (look at the Link.points to confirm). You can drag that handle to show that the user can modify that segment of the route. And note that your editable label is where it should be too, in the middle of the link route.

The path is not drawn to and from that point that you are complaining about. However the reshaping handles aren’t that smart, so the handle for that point looks lost.

So what exactly do you think the problem is and what do you think should be done about it?

ahmetgundogdu · November 24, 2020, 2:45pm

An image like this is supposed to be
I think the wrong situation. There is a breakdown when it shapes the connection from the middle area.

walter · November 24, 2020, 3:12pm

Add this line to your copy of extensions/OrthogonalLinkReshapingTool.js, in the reshape method:

      } else if (index === link.lastPickIndex - 1) {
        link.insertPoint(index, link.getPoint(index).copy());
        if (index-1 === link.firstPickIndex+1) this.handle.segmentIndex = index-1;
      }

I hope this covers your situation and all related ones.

ahmetgundogdu · November 24, 2020, 3:22pm

Yes my problem has been fixed. Thank you so much

ahmetgundogdu · November 24, 2020, 3:44pm

sometimes such a problem occurs but

walter · November 24, 2020, 4:09pm

What is your complaint? You set the Link.toEndSegmentLength to 15, but I’m guessing that the horizontal segment there is about 15 document units away from the link point (at the edge of the node). So there isn’t room for a proper corner before the next segment (the final one in this case) starts.