The diagram is present in the overview window, but it is too large horizontally, affecting its visibility. As a result, it is not clear.
Can you provide a solution for this?
How is your Overview instance defined?
That looks normal. How big is your observed Diagram.documentBounds?
What is the overview’s Diagram.scale? It might be that it’s hitting the standard minimum scale: Diagram.minScale, which defaults to 0.0001. Try setting that to a slightly smaller (but still above zero!) value.
The issue mentioned above has been resolved, but I would like to add a scrollbar or other features to scroll and view the entire overview diagram. Currently, the mouse wheel scrolls inside the main diagram window instead…
Diagram.ts
Diagram.html
I don’t know that you can do that. I tried the following, but in my mind it isn’t satisfactory:
new go.Overview("myOverviewDiv", {
observed: myDiagram,
contentAlignment: go.Spot.Center,
minScale: 0.1,
hasHorizontalScrollbar: true,
hasVerticalScrollbar: true,
autoScale: go.AutoScale.None
});
I used a Diagram.minScale of 0.1 just to make it easier to tell what’s going on.
I want to set it so that if scrolling is observed and reaches the boundary, the diagram scrolls automatically without needing to go outside that window.
The scroll bar should not be shown in the overview; scrolling the diagram should be done through observation.
By default, the generated diagram:
Starts scrolling to the observed point
The latest code used for the overview:
Try the Overview in this sample:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
</head>
<body>
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
<div id="myPaletteDiv" style="flex-grow: 1; width: 140px; background-color: floralwhite; border: solid 1px black"></div>
<div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 140px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
</div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
<script id="code">
const myDiagram =
new go.Diagram("myDiagramDiv", {
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
myDiagram.nodeTemplate =
new go.Node("Auto")
.bind("location", "loc", go.Point.parse)
.add(
new go.Shape({ fill: "white" })
.bind("fill", "color"),
new go.TextBlock({ margin: 8, editable: true })
.bind("text")
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue", loc: "0 0" },
{ key: 2, text: "Beta", color: "orange", loc: "6600 0" },
{ key: 3, text: "Gamma", color: "lightgreen", loc: "0 200" },
{ key: 4, text: "Delta", color: "pink", loc: "500 500" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 4, to: 1 }
]);
// initialize Overview
myOverview =
new go.Overview("myOverviewDiv", {
observed: myDiagram,
// just for testing when myOverview.scale cannot be small enough
// to include the whole myDiagram.documentBounds
minScale: 0.1
});
// Don't update the Overview continually when the main Diagram is scrolled or zoomed;
// instead just update a few times per second.
var OverviewQueued = false;
myDiagram.addDiagramListener("ViewportBoundsChanged", e => {
if (!OverviewQueued) {
OverviewQueued = true;
setTimeout(() => {
OverviewQueued = false;
myOverview.scrollToRect(myDiagram.viewportBounds);
}, 200);
}
});
</script>
</body>
</html>