I’m wondering if that might cause some layers with dummy nodes, or adjacent to such layers, to be wider than they should be.
Hi Walter, are you going to investigate it or will you show me how to investigate and fix it?
Sorry, but I do not have time now.
Hi Walter, are you saying that we have to live with it?
I can investigate this issue from my side but I need some hints how to do it. For example, in order to confirm that some dummy nodes are wider than they should be, how to make them visible in the diagram?
Thanks!
We’ll look into the problem. I was just saying that it’s rather busy right now, and I didn’t know when I will have time.
Actually, in reviewing your screenshots, could you make use of the MergingTreeLayout given in Tree layout vertical nodes alignment - #3 by walter ?
Hi Walter, my misunderstanding. Sorry :( Please take your time since it is the holiday season. No rush!
We want to stick with the LayerDigraphLayout because our diagram can be very complicated. We have investigated the ParallelLayout with Split and Merge nodes. But it does not satisfy our use cases. I did not check MergingTreeLayout in details but I got the feeling that it is similar to ParallelLayout as a subclass of TreeLayout as well.
Happy holidays!
As it so happens, we’re working on a new property for version 2.3: LayeredDigraphLayout.alignOption. By setting alignOption: go.LayeredDigraphLayout.AlignAll one gets the following result for the graph that you showed:
No override of the undocumented nodeMinColumnSpace method is needed.
That functionality hasn’t gotten into the 2.3 alpha that is now available – I’d expect it to be present in a release early next year.
Sweet. Looking forward to using this new property :) Thanks so much Walter
Please try 2.3 beta at: GoJS - Build Interactive Diagrams for the Web
It would be nice to receive feedback before we release it as latest.
Hi Walter, I tried the 2.3 beta. One issue I noticed is that when the diagram is too wide to fit into the browser or zoomed in, it can only be scrolled to the left. Is it a known issue? Thanks.
That’s odd. What OS are you using? Are you using a mouse or touches? And is there a specific sample you saw this behavior on, or any sample?
Also, are you sure that the diagram’s whole HTMLDivElement is visible in the browser?
Hi Simon and Walter, I am using macOS Big Sur. I am pasting my HTML + JS code below. If there is any cdn link for 2.3 beta, I could create a JSFiddle or CodePen project to illustrate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
id="myDiagramDiv"
style="border: solid 1px black; width: 100%; height: 700px"
></div>
<script src="../../node_modules/gojs/release/go-debug.js"></script>
<script>
const nodeDataArray = [
{
key: "START",
},
{
key: "Box1",
},
{
key: "Box2",
},
{
key: "Box3",
},
{
key: "Box4",
},
{
key: "Box5",
},
{
key: "Box6",
},
{
key: "Box7",
},
{
key: "Box8",
},
{
key: "Box9",
},
{
key: "Box10",
},
{
key: "Box11",
},
{
key: "END",
},
];
const linkDataArray = [
{
from: "START",
to: "Box7",
},
{
from: "Box7",
to: "Box8",
},
{
from: "Box8",
to: "Box9",
},
{
from: "Box9",
to: "Box1",
},
{
from: "Box9",
to: "Box2",
},
{
from: "Box1",
to: "Box3",
},
{
from: "Box1",
to: "Box4",
},
{
from: "Box2",
to: "Box4",
},
{
from: "Box2",
to: "Box3",
},
{
from: "Box4",
to: "Box5",
},
{
from: "Box3",
to: "Box6",
},
{
from: "Box5",
to: "Box6",
},
{
from: "Box6",
to: "Box10",
},
{
from: "Box6",
to: "Box11",
},
{
from: "Box10",
to: "END",
},
{
from: "Box11",
to: "END",
},
];
const $ = go.GraphObject.make;
const init = () => {
const myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.LayeredDigraphLayout, {
layerSpacing: 100,
linkSpacing: 20,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
alignOption: go.LayeredDigraphLayout.AlignAll,
}),
});
myDiagram.nodeTemplateMap.add(
"",
$(
go.Node,
"Spot",
$(go.Shape, "RoundedRectangle", {
fill: "white",
width: 100,
height: 100,
portId: "",
}),
$(
go.TextBlock, // the text label
new go.Binding("text", "key"),
{
verticalAlignment: go.Spot.Center,
textAlign: "center",
},
),
),
);
myDiagram.linkTemplate = $(
go.Link, // the whole link panel
{ routing: go.Link.Orthogonal, corner: 16, reshapable: true },
$(
go.Shape, // the link shape
{ strokeWidth: 1.5 },
),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null },
),
);
const model = new go.GraphLinksModel();
model.nodeDataArray = nodeDataArray;
model.linkDataArray = linkDataArray;
myDiagram.model = model;
};
window.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>
The scrolling issue is with the touchpad. If I use mouse to drag the thumb of the scrollbar, it works.
I take it back. The mouse dragging is also weird. I need to find certain “sweet spot” to drag…
Thanks for the sample.
Do you have the same issues when using Firefox or Chrome?
And which 2.2.* version were you using before, that (presumably) does not have this problem?
Oh, I forgot to ask – are the layouts more like what you want?
Hi Walter, the issue persists in both Chrome and Firefox. The old version that I was using is 2.1.46, which does not have the issue.
The layout works well so far :) Thanks!
We’ll investigate and get back to you on the scrolling issue.
@min.wu, can you try your code again using the new 2.3 beta2 that I just published? You can access it easily by substituting this in your file:
<script src="https://gojs.net/2.3.0b2/release/go-debug.js"></script>
Let me know if it fixes the scrolling issue. I believe it should.
This release is also available on npm under the gojs@beta tag.
Hi Simon, yes. The new version works well :) Thank you so much!