[Question] How to decrease space in between in Vertical Layout

[vitorreis]

In the example provided in the project bwdl the digraph uses VerticalTree to layout, however the nodes has way too much space in between each other.

I tried to decrease it by having smaller shapes for nodes and edges but it doens't seem to work.

Is there a way of having fewer space in between nodes with the VerticalTree layout? or perhaps a way of passing parameters to the layout strategy? or a way of passing a new function to calculate it?

thanks for the project, seems to work like a charm.

[ajbogh]

You can change the nodeSize property, however the vertical-tree code assumes that nodes are square (g.setNode(nodeKeyId, { width: size, height: size });). Technically, I believe you can set the nodeSize property to 1 and draw the node SVGs in any size, but then they would overlap.

If you're willing to improve the code, I would recommend adding a couple props - nodeWidth and nodeHeight - which can override nodeSize. I don't recommend deleting nodeSize as that can still be useful.

The code would be something like:

const { nodeSize, nodeHeight, nodeWidth, nodeSpacingMultiplier } = this.graphViewProps;

// 1.5 represents spacing
const spacing = nodeSpacingMultiplier || 1.5
let size = (nodeSize || 1) * spacing; 
let height;
let width;

if (nodeHeight){
  height = nodeHeight * spacing;
}

if (nodeWidth){
  height = nodeWidth * spacing;
}

...

g.setNode(nodeKeyId, { width: nodeWidth || size, height: nodeHeight || size });