Spacing between nodes

GoJS
1

Hi Team,

I am not using any layout for my UML diagram.
I am using {routing: go.Link.AvoidsNodes}, for the links to avoid the links and nodes overlap.

I read in the gojs docs - GoJS Links -- Northwoods Software

If a node is very close to or overlaps with either the link’s Link.fromNode or Link.toNode and would block the link’s route, it ignores that node, treating it as if it were just an extension of the connected node.

I don’t want AvoidsNodes to ignore the node. One solution to this problem is add spacing between the nodes so that the links will not treat them as a group.

I know there is a spacing property if we use the grid layout, but grid layout is not giving us the desired results.

Please help.

Thanks,
Aishwarya

2

If you are not using an automatic layout, how are nodes getting their locations? Do you have code that programmatically locates them? Or do users manually drag them where they want them to be?

I don’t understand how you want some spacing between the nodes to be provided.

3

I am guessing there must a dafault layout. This is how I am creating a diagram:

const myDiagram = $(go.Diagram, {
‘undoManager.isEnabled’: true,
padding: new go.Margin(10, 10, 10, 150),
model: $(go.GraphLinksModel, {
linkKeyProperty: ‘key’,
}),
});

I do not pass any location in the nodes.
We do want user to be able to drag them as per their liking.

4

Did you want to prevent users from moving nodes too close to each other?
If so, have you seen this sample? Drag Unoccupied
You would want to customize the behavior so that it pretended each node was bigger than it actually is, to preserve some amount of space between nodes.

6

I want to customize the behavior so that it pretended each node was bigger than it actually is, to preserve some amount of space between nodes.

7

OK, adapt the code from that Drag Unoccupied sample, and change:

        // maybe inflate R if you want some space between the node and any other nodes
        r.inflate(-0.5, -0.5);  // by default, deflate to avoid edge overlaps with "exact" fits

to:

        const M = 20;  // choose the minimum spacing that dragging allows
        // inflate R if you want some space between the node and any other nodes
        r.inflate(M, M);

and then afterwards, replace the call:

          r.inflate(0.5, 0.5);  // restore to actual size

with:

          r.inflate(-M, -M);  // restore to actual size
8

Sorry for the confusion. My concern is not for the user drag.

By default my nodes are very close to each other. I just want more spacing between nodes.

As you can se links still overlaps the node even with {routing: go.Link.AvoidsNodes}.
I even tried avoidableMargin: new go.Margin(10, 10, 10, 10) in node template but was of no help.
This is my diagram looks like:

image
image802×511 24.4 KB

9

Ah, so you do want an automatic layout, at least initially.
GoJS Layouts -- Northwoods Software
Have you tried setting properties on a GridLayout?
Grid Layout

Can you describe what you want? Several small screenshots would help.

By the way, if you temporarily set the TextBlock.background to the same color as the TextBlock.stroke, which defaults to “black”, you won’t need to manually redact your GoJS screenshots.