Empty overview on initial toggle view

GoJS
1

I’m using the overview zoom like in example Overview Resizing
difference is I have the overview on a toggle to hide/show.

the first time I toggle to true, the overview comes up but is blank until I zoomed out. any suggestions?

This is how I’m setting up the overview

      myOverview = make(gojs.Overview, 'overviewContainer',
      {
        observed: myDiagram,
        contentAlignment: gojs.Spot.Center,
        'box.resizable': true,
        'resizingTool': new OverviewResizingTool()
      });
2

How do you hide/show the overview?

3

changing a boolean flag to ng-show in html div

4

Then you might need to call Diagram.requestUpdate once the Div has been laid out by the page with its new size.
https://gojs.net/latest/intro/resizing.html

BTW, which version of GoJS are you using?

5

Will give that a try. running 2.1.7

6

If you don’t care about Internet Explorer or older versions of the other popular browsers, then if you use GoJS version 2.1.26 or later, the diagram will automatically detect when the HTMLDivElement has changed size.

7

no luck with call Diagram.requestUpdate .

8

At the time that you called requestUpdate, what were the width and height of the Div? Is that the expected ongoing size?

9

don’t think those are important here. I have the main diagram and the overview on top left. when I toggle to view the overview it shows empty until I zoom out with mouse on the main diagram. is like it needs that initial zoom out in order to get the graph data

10

Well, maybe there is something specific to the Angular environment. What does ng-show really do? I assume it ends up changing the element’s display style. Here’s a complete sample that does that in an HTML button. It seems to work well.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Editor</title>
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->

  <script src="../release/go.js"></script>
  <script src="../extensions/OverviewResizingTool.js"></script>
  <script>
    function init() {
      var $ = go.GraphObject.make;

      // initialize main Diagram
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          { "undoManager.isEnabled": true });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { locationSpot: go.Spot.Center },
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape,
            {
              fill: "white", stroke: "gray", strokeWidth: 2,
              portId: "", fromLinkable: true, toLinkable: true,
              fromLinkableDuplicates: true, toLinkableDuplicates: true,
              fromLinkableSelfNode: true, toLinkableSelfNode: true
            },
            new go.Binding("stroke", "color")),
          $(go.TextBlock,
            {
              margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
              minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        );

      // initialize Palette
      myPalette =
        $(go.Palette, "myPaletteDiv",
          {
            nodeTemplateMap: myDiagram.nodeTemplateMap,
            model: new go.GraphLinksModel([
              { text: "red node", color: "red" },
              { text: "green node", color: "green" },
              { text: "blue node", color: "blue" },
              { text: "orange node", color: "orange" }
            ])
          });

      // initialize Overview
      myOverview =
        $(go.Overview, "myOverviewDiv",
          {
            observed: myDiagram,
            contentAlignment: go.Spot.Center,
            resizingTool: new OverviewResizingTool(),
            "box.resizable": true
          });

      load();
    }

    // save a model to and load a model from Json text, displayed below the Diagram
    function save() {
      var str = myDiagram.model.toJson();
      document.getElementById("mySavedModel").value = str;
    }
    function load() {
      var str = document.getElementById("mySavedModel").value;
      myDiagram.model = go.Model.fromJson(str);
    }
    function test() {
      var state = document.getElementById("myOverviewDiv").style.display;
      document.getElementById("myOverviewDiv").style.display = (state === "none") ? "block" : "none";
    }
    </script>
</head>
<body onload="init()">
  <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: 100px; background-color: floralwhite; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: whitesmoke; border: solid 1px black; display:none"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div id="buttons">
    <button id="loadModel" onclick="load()">Load</button>
    <button id="saveModel" onclick="save()">Save</button>
    <button onclick="test()">Toggle Overview</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"570 450"}
  ],
  "linkDataArray": [
{"from":1, "to":2}
  ]}
  </textarea>
</body>
</html>
11

Try the latest version of GoJS, 2.1.31.