Here’s a sample that appears to flip a Node by animating a Picture of the node.
But there’s no alternative content to show, so it just shows the original node.
In this sample I decided to answer “no” to all of the questions I posed to you above.
<!DOCTYPE html>
<html>
<head>
<title>Horizontally Flipping Nodes</title>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
<meta name="description" content="Animation to horizontally flip a node when the mouse enters it">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
At this time there is no alternative node to show on the "flip side" of the node.
Instead it just shows the original node again.
<script src="https://unpkg.com/gojs"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
const FlipPart =
$(go.Part,
{ layerName: "Tool", pickable: false },
$(go.Picture, { name: "PIC" }));
var FlipAnimation = null;
var FlipNode = null;
function startFlip(node) {
if (node === FlipNode) return;
if (FlipAnimation) FlipAnimation.stop();
const pic = FlipPart.findObject("PIC");
if (!pic) return;
FlipNode = node;
pic.element = node.diagram.makeImage({
parts: new go.List([node])
});
FlipPart.locationSpot = node.locationSpot;
FlipPart.location = node.location;
FlipAnimation = new go.Animation({
duration: 250,
reversible: true,
finished: an => {
const oldskips = node.diagram.skipsUndoManager;
node.diagram.skipsUndoManager = true;
node.opacity = 1;
node.diagram.skipsUndoManager = oldskips;
}
});
FlipAnimation.add(pic, "width", node.actualBounds.width, 0);
FlipAnimation.addTemporaryPart(FlipPart, node.diagram);
FlipAnimation.start();
node.opacity = 0;
}
function stopFlip() {
if (FlipAnimation) FlipAnimation.stop();
FlipAnimation = null;
FlipNode = null;
if (FlipPart.diagram) FlipPart.diagram.remove(FlipPart);
}
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
locationSpot: go.Spot.Center,
mouseEnter: (e, node) => startFlip(node),
mouseLeave: (e, node) => stopFlip()
},
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 4, to: 1 }
]);
</script>
</body>
</html>