Hi,
When a new node is added, I noticed that the default animation flies in the newly added node from the left-hand side of the diagram. How can I disable the fly-in animation and let the new node fade in at its final location automatically calculated by the layout.
The following code snippet enables the opacity animation but does not disable the position animation.
var animation = new go.Animation();
const newNode = myDiagram.findPartForKey("Box3");
animation.add(newNode, "opacity", 0, newNode.opacity);
let newLink = myDiagram.findPartForKey("Link1");
animation.add(newLink, "opacity", 0, newLink.opacity);
newLink = myDiagram.findPartForKey("Link2");
animation.add(newLink, "opacity", 0, newLink.opacity);
animation.start();
I looked at the custom animation page and its source code. Seems to me the fadeIn animation is as simple as setting the opacity. However, it does not work for me :( Where is the source code that disables the position animation when a node is added by double clicking the diagram?
If I set animation.duration = 10000;
it demonstrates the behavior that I want. But of course I hacked it. The position animation happened before the nodes and links became visible. And moreover 10-second animation is too long.
Note that I just want to disable the position animation of Box3. The position animation of Box1 and Box2 is desirable.
Please let me know if my requirement is not 100% clear to you.
I am attaching my HTML + JS code below. Looking forward to your recommendation! Thanks for your time.
<!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>
<div class="toolbar">
<button id="addNode">Add Node</button>
</div>
<script src="../../release/go-debug.js"></script>
<script>
let myDiagram;
function init() {
const $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.LayeredDigraphLayout, {
layerSpacing: 80,
}),
});
myDiagram.nodeTemplate = $(
go.Node,
"Spot",
$(go.Shape, "RoundedRectangle", {
fill: "white",
width: 100,
height: 50,
portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer",
}),
$(
go.TextBlock, // the text label
new go.Binding("text", "key"),
{
verticalAlignment: go.Spot.Center,
textAlign: "center",
},
),
);
myDiagram.linkTemplate = $(
go.Link,
{
curve: go.Link.Bezier,
toShortLength: 8,
fromEndSegmentLength: 50,
toEndSegmentLength: 50,
},
$(go.Shape, { isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, { toArrow: "Standard", stroke: null }),
);
const nodeDataArray = [
{
key: "Box1",
},
{
key: "Box2",
},
];
const linkDataArray = [
{
from: "Box1",
to: "Box2",
},
];
const model = new go.GraphLinksModel();
model.linkKeyProperty = "key";
model.nodeDataArray = nodeDataArray;
model.linkDataArray = linkDataArray;
myDiagram.model = model;
}
window.addEventListener("DOMContentLoaded", init);
document.getElementById("addNode").addEventListener("click", e => {
myDiagram.startTransaction("Add Node");
myDiagram.model.addNodeData({
key: "Box3",
});
myDiagram.model.addLinkData({
key: "Link1",
from: "Box1",
to: "Box3",
});
myDiagram.model.addLinkData({
key: "Link2",
from: "Box3",
to: "Box2",
});
var animation = new go.Animation();
// animation.duration = 10000;
const newNode = myDiagram.findPartForKey("Box3");
animation.add(newNode, "opacity", 0, newNode.opacity);
let newLink = myDiagram.findPartForKey("Link1");
animation.add(newLink, "opacity", 0, newLink.opacity);
newLink = myDiagram.findPartForKey("Link2");
animation.add(newLink, "opacity", 0, newLink.opacity);
animation.start();
myDiagram.commitTransaction("Add Node");
});
</script>
</body>
</html>