Rendering inconsistencies

[herecydev]

I'm experiencing a few rendering issues when using an extended "flowchart" example you have here. I am using version 1.6.16.

Image 1:

Image 2:

Issue #1: Diamond

The Diamond symbol has several ports connected, and the links pictured (in image 1) are going from different ports to different nodes. So it correctly differentiates them and draws individual links. However occasionally the links are rendered on the same line which makes differentiation difficult. The nodes are anchored (and cannot be moved) but if you try to move the node you can recreate this issue.

I'll try to add all the relevant details but I'm still learning, as I'm evaluating this for commericial use:

this.diagram = go.GraphObject.make(go.Diagram, this.foo.fooCanvas,
            {
                allowMove: false,
                initialAutoScale: go.Diagram.Uniform,
                initialContentAlignment: go.Spot.Center,
                layout: go.GraphObject.make(go.TreeLayout,
                    {
                        angle: 90,
                        arrangement: go.TreeLayout.ArrangementHorizontal,
                        sorting: go.TreeLayout.SortingForwards
                    }),
                "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
            });

this.diagram.linkTemplate = go.GraphObject.make(go.Link,
            {
                corner: 5,
                curve: go.Link.JumpOver,
                routing: go.Link.AvoidsNodes,
                toShortLength: 4
            },
            go.GraphObject.make(go.Shape,
                {
                    stroke: "gray",
                    strokeWidth: 2
                }),
            go.GraphObject.make(go.Shape,
                {
                    fill: "gray",
                    stroke: null,
                    toArrow: "Standard"
                })
        );

Issue #2: Not avoiding nodes

I've used the routing: go.Link.AvoidsNodes so as not to draw over nodes. This works absolutely fine, apart from in the top right (image 1) this goes straight through the next node. However, once again if you try and move the top node around. It realigns itself correctly, as shown in image 2.

Afterthoughts

I'm fairly sure these are rendering issues as opposed to something I've missed out in setup/config of the graphs. Trying to realign nodes and links almost "flushes" through some of the above issues. Any thoughts?

[WalterNorthwoods]

"AvoidsNodes" routing puts all orthogonal link segments on an internal grid, except at the ends where it connects with a port whose link connection point is not also on the same internal grid.

I'm guessing that the avoids-nodes routing hadn't taken place, perhaps because a transaction had not been performed after diagram initialization? That would explain both behaviors.

[herecydev]

I can have a look at the transaction, but I didn't believe that was necessary? I can't see where you're performing a transaction in the flowchart example. I would like to keep the "AvoidsNodes" as it's exceptionally useful, but are you sure that 2 links that share no ports, but the same fromNode are supposed to be on the same grid? Looking at the first image, the rendering seems much clearer (and intentional). If they really are supposed to be joined, how can I get it into a state similar to the first image (separate lines if the links share no ports with another link)

[WalterNorthwoods]

First, I should clarify that what you are talking about deals with routing, not rendering. Rendering is just a "painting" or "drawing" action; routing is what determines the exact points that a Link takes (i.e. the Link.points list).

The AvoidsNodes routing of Links is implemented as the same as the default Orthogonal routing, except that it afterwards checks to see if the route crosses over any Nodes that are Node.avoidable. If it does, then it calculates and keeps a shortest route on a grid.

So for your Issue #1 I do not understand why it decided to discard the default routing which you see in Image #1. There do not seem to be any nodes in the way.

And as I said, I cannot explain why Issue #2 is happening, unless you have made changes after setting the Diagram.model without using a transaction. (You can make all the changes you want to a model without a transaction until after you assign the model to a Diagram.)

So can you provide us a way to reproduce your problems? Also, I would prefer it if you either used our forum (https://forum.nwoods.com/c/gojs) or e-mail (GoJS at our nwoods domain), since I do not check for GitHub issues very often.

[WalterNorthwoods]

Are these still issues for you?

[herecydev]

After some tweaking, this turned out to require setsPortSpot to false.