Issue with Graph size

GoJS
1

Basically, we are using two tabs, and in both tabs, I am using GoJS graphs. You can see the attached screenshot of my two tabs.

image
image823×472 7.49 KB

I am facing an issue where:

  • If the first tab, ‘Graph’, is selected, the graph size remains as I set it. I used the following properties to make my graph clear and visible

          minScale: 0.3,
      maxScale: 3,
      initialAutoScale: go.Diagram.Uniform,                 
      contentAlignment: go.Spot.Center,
      scale: go.Diagram.documentBounds,

  • However, if I select the second tab, ‘Simple Graph’, and then switch back to the first ‘Graph’ tab, the graph size becomes too small. Please check the attached screenshot. This issue occurs vice versa for the other tab as well.

image
image873×480 1.88 KB

Please tell me how I can make my graph size fixed, so that switching tabs does not affect the graph size."

2

That’s very odd – I’m guessing that when you switch tabs you are reinitializing the diagram, when you clearly don’t want to do that.

For example, if you look at the different “tabs” of Palettes in the Planogram sample, Planogram | GoJS, you can zoom in or out or scroll around in one Palette, switch to another Palette and do stuff, and then switch back again and the old Palette’s view hasn’t changed.

3

When I switch tab i am not reinitializing the diagram.
I am using simple HTML Tab how i can achieve same functionality Planogram | GoJS?

4

How are tabs implemented in your app? When the user switches tabs, is the HTML element in the old tab removed from the DOM? Or is it given zero size? Either one of those might be causing the Diagram to change its state. Certainly when the Diagram’s HTMLDivElement changes size the Diagram will think it needs to change size too, and that might cause it to scroll. It depends on how you have initialized the Diagram, including whatever behavior you may have implemented in some of its DiagramEvent listeners.

5

When the user switches tabs, is the HTML element in the old tab removed from the DOM? Or is it given zero size?

  • No, when the user switches tabs, the HTML element or canvas graph is maintained in the
    DOM. The old tab is not removed from the DOM.
6

Or is the size of the Div changed?

7

No, the size of the div is the same as before. It has not changed.

The div size is the same, but the graph size is too small.

image
image750×436 2.07 KB

8

I suppose you could set a breakpoint in a “ViewportBoundsChanged” DiagramEvent listener so that you’ll know after the viewport has changed. But you probably won’t be able to look up the stack to find the cause of the change.