Hi,
I have an issue that I just noticed in both v2.3.9 and v3.0.8. I am not sure if a change is required on my end or if there is a bug. Basically, I have a layout where the nodes can change size dynamically based on changes to the underlying node data. When the overall layout height changes due to a node’s height change, then the layout bounces/stutters vertically.
I have a sample below that will help replicate the issue. To test, I have made the text block in the nodes editable and they support multi-line. To see the issue, I recommend editing the first node ‘Alpha’ by going into edit mode, adding a new line with just a single character, and exiting out. You should see the issue then.
Let me know if there is something I can do on my end. Feel free to uncomment the animation duration line to see the stutter more slowly. Thanks
<!DOCTYPE html>
<html>
<head>
<title>Bounce when layout height changes</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="width: 100%; height: 400px; border: solid 1px black"></div>
<!-- <script src="https://unpkg.com/[email protected]/release/go.js"></script> -->
<script src="https://unpkg.com/[email protected]/release/go.js"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram = new go.Diagram('myDiagramDiv', {
contentAlignment: go.Spot.Center,
layout: new go.TreeLayout(),
'undoManager.isEnabled': true,
});
// myDiagram.animationManager.duration = 3000;
myDiagram.nodeTemplate = $(
go.Node,
'Auto',
{
locationSpot: go.Spot.Center,
},
$(go.Shape, { fill: 'white' }, new go.Binding('fill', 'color')),
$(go.TextBlock, { margin: 8, editable: true }, new go.Binding('text'))
);
myDiagram.linkTemplate = $(
go.Link,
{ routing: go.Link.AvoidsNodes, reshapable: true },
// the highlight path Shape
$(
go.Shape,
{ isPanelMain: true, strokeWidth: 7, stroke: 'transparent' },
// when highlighted, show this thick Shape in red
new go.Binding('stroke', 'isHighlighted', (h) => (h ? 'red' : 'transparent')).ofObject()
),
// the normal path Shape
$(go.Shape, { isPanelMain: true, strokeWidth: 1.5 }),
$(go.Shape, { toArrow: 'OpenTriangle' })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: 'Alpha', color: 'lightblue' },
{ key: 3, text: 'Gamma', color: 'lightgreen' },
{ key: 4, text: 'Delta', color: 'pink' },
{ key: 5, text: 'Epsilon', color: 'yellow' },
],
[
{ from: 1, to: 3 },
{ from: 3, to: 4 },
{ from: 4, to: 5 },
]
);
</script>
</body>
</html>