Options to make links not overlap as much as possible

[paulie13]

Hi,

I have a question in regards to handling link overlapping. In particular, I have this one case where link overlapping happens most often but I’m also curious about a potential canvas wide solution that works for most other, if not all other cases.

Below is a screenshot of my split node which has multiple outgoing ports. When there are enough outgoing ports, the links start to overlap vertically. Is there a clean way to enforce that the first and last link turn vertical lets say 50 units in, then the second and second to last turn vertical 60 units in, etc.? I know of the fromEndSegmentLength property but this seems to only ensure a minimum distance. I think you could probably combine this with toEndSegmentLength to guarantee a turn vertically at a certain point but this doesn’t feel optimal and robust enough.

On a side note, I saw 3.0 beta has been released and has support for custom routing. Is this problem more easily tackled with that feature? Would AvoidLinksRouter be all I need? If so, do you know what the plans are for how long 3.0 will be on beta? Would likely not upgrade until it is off beta. Lastly, if the AvoidLinksRouter extension would be the best path, is there anyway to limit the number of links intersections as much as possible, or is the main focus to solve overlapping and it isn’t performant to minimize intersections as well? I mention this after having played around with the sample.

Thanks for the help!

[walter]

@paulie13

AvoidLinksRouter

Try it and tell us what could be improved.

[paulie13]

Ok, I’ll give it a try soon and see how it handles the above case. The layout for the canvas I am currently working on is a tree layout so I think the extension will naturally do better.

In a few months, I also have a layered digraph diagram that I will be implementing and I feel like the links are naturally much messier for that case and harder to read. When the time comes, I’ll use it there as well.

I’ll write any feedback as a reply to this post, thanks as always!

[paulie13]

I am using typescript and am getting the following error when trying to use the AvoidLinksRouter extension as a ts file.

export 'Router' (imported as 'go') was not found in 'gojs' (possible exports: ActionTool, Adornment, Animation, AnimationManager, AnimationStyle, AnimationTrigger, AutoScale, Binding, BindingMode, Brush, BrushType, ChangeType, ChangedEvent, CircularArrangement, CircularDirection, CircularEdge, CircularLayout, CircularNetwork, CircularNodeDiameterFormula, CircularSorting, CircularVertex, ClickCreatingTool, ClickSelectingTool, ColorSpace, CommandHandler, ContextMenuTool, Curve, CycleMode, Diagram, DiagramEvent, DragSelectingTool, DraggingInfo, DraggingTool, Flip, ForceDirectedEdge, ForceDirectedLayout, ForceDirectedNetwork, ForceDirectedVertex, Geometry, GeometryStretch, GeometryType, GestureMode, GraphLinksModel, GraphObject, GridAlignment, GridArrangement, GridLayout, GridSorting, Group, HTMLInfo, ImageStretch, InputEvent, Layer, LayeredDigraphAggressive, LayeredDigraphAlign, LayeredDigraphCycleRemove, LayeredDigraphEdge, LayeredDigraphInit, LayeredDigraphLayering, LayeredDigraphLayout, LayeredDigraphNetwork, LayeredDigraphPack, LayeredDigraphVertex, Layout, LayoutConditions, LayoutEdge, LayoutNetwork, LayoutVertex, Link, LinkAdjusting, LinkReshapingTool, LinkingBaseTool, LinkingDirection, LinkingTool, List, Map, Margin, Model, Node, Orientation, Overview, Palette, Panel, PanelLayout, PanelType, PanningTool, Part, PathFigure, PathSegment, Picture, Placeholder, Point, PortSpreading, Rect, RelinkingTool, ReshapingBehavior, ResizingTool, RotatingTool, Routing, RowColumnDefinition, ScrollMode, SegmentType, Set, Shape, Size, Sizing, Spot, Stretch, TextBlock, TextBlockMetrics, TextEditingAccept, TextEditingStarting, TextEditingState, TextEditingTool, TextFormat, TextOverflow, ThemeBinding, ThemeManager, Themes, Tool, ToolManager, Transaction, TreeAlignment, TreeArrangement, TreeCompaction, TreeEdge, TreeLayerStyle, TreeLayout, TreeModel, TreeNetwork, TreePath, TreeSorting, TreeStyle, TreeVertex, TriggerStart, UndoManager, ViewboxStretch, WheelMode, Wrap, default, go, version)

[walter]

What was the import statement?

[paulie13]

import * as go from 'gojs';

This is how I use go everywhere. I’m able to typically do go.Shape, go.Panel, etc. but go.Router seems to be an issue.

[walter]

Did you copy the AvoidsLinksRouter.ts file into your project and make sure it imports gojs from the same place that the rest of your code does?

[paulie13]

Yeah, I am doing the exact same thing for both the NonRealtimeDraggingTool and DrawCommandHandler extensions.

It’s a bit weird since I have the autocompletion after I type go. and I also see all of the documentation and comments related to the class through my code editor.

I also just tried this separately to see what I got

import { Router } from 'gojs';

and that lead to a very similar error message as the original in my code editor.

In the the console, I got this exact error message.

Uncaught TypeError: Class extends value undefined is not a constructor or null

[walter]

My guess is that you are not using the 3.0.0-b1 version of the GoJS library.

[paulie13]

Running go.Diagram.version at app load up returns 3.0.0-b1

I have access to a bunch of the other changes like new enumerations, themes, etc.

When I comment out use of AvoidLinksRouter, the diagram loads up with the 3.0 version watermark.

[walter]

Yes, but does your use of AvoidsLinksRouter.ts import the 3.0.0-b1 library?

[paulie13]

Yes, I am. Here’s a screenshot of me console logging the version at the top of the ts file.

Do I need to update the gojs-react version as well or that isn’t necessary?

I am on the latest gojs-react version 1.1.2.

[walter]

Ah, so maybe the gojs-react components are loading the 2.3 version of the gojs library.

[paulie13]

Hey Walter, thought I’d revisit this. After taking another look, I did notice something interesting. Using the following import at the top of my extension,

import * as go from 'gojs';

I then did in the line after…

console.log(go);

In the window, I inspected the module and it seems to explain the issue a bit better. If I expand the module, I get the following exports

You can see at the top level of the module, new features like ThemeManager are accessible, but for some reason, the Router class isn’t exposed as an export. You can see in the log that the version is in fact 3.0.0-b2 so I don’t think anything is interfering.

I noticed however that when I expanded the go Object right above the version field but within the module, I got an almost identical list with what appears to be just two extra items, Router and AvoidsNodesRouter.

Not sure if this narrows down the issue on your end or if it is not helpful at all but figured I’d share my findings. Typescript oddly enough in vscode has no issue showing info on routing by calling go.Router. No type error is shown either so something is definitely up.

It appears that Router and AvoidsNodesRouter should be at the top level of the module as well and that would fix the issue.

[paulie13]

Also worth noting I am able to replicate the issue with the gojs-react-basic project. All I did was update the gojs library to the latest beta version, 3.0.0-b2 and then console logged the module at the top of App.tsx after the import.

console logging go.Router results in “undefined” while go.ActionTool results in the class object being printed. The same goes for all of the other classes aside from Router and AvoidsNodesRouter.

[walter]

That does look like a bug. Thanks for reporting the inconsistency.

[paulie13]

Sounds good, I’ll revisit testing out the extension once a version of the beta exists with the fix.

[walter]

That will be the next release, probably at the end of this week.

[walter]

We have published [email protected].

[paulie13]

I upgraded to the latest beta version and tested the AvoidsLinksRouter extension and it works like a charm for the few test cases I had in mind. Thank you very much, I’ll likely upgrade to version 3 in production once it is off of beta