Jump experience while drawing - after upgrade to version 3

GoJS
1

Hello,
I have upgraded to version 3.0.8 from 2.3.8.
But now, on the diagram drawing, the diagram gets zoomed in very deep, and until manually zoomed to fit (on InitialLayoutCompleted listener) It’s not drawing nicely. The experience is ‘jump’ and not looking good.
In 2.x.y there was no such problem and also I didn’t need to do a manual zoom to fit.

This is my zoomToFit handler:

const zoomToFitHandler = () => {
	diagramObject.alignDocument(go.Spot.Center, go.Spot.Center);
	diagramObject.commandHandler.zoomToFit();
};

My relevant flags are:
initialContentAlignment: go.Spot.Center,
initialAutoScale: go.Diagram.Uniform,
scrollMode: go.Diagram.InfiniteScroll,

When I replace initialAutoScale with autoScale, the phenomenon does not happen, and even there is no need to do zoom to fit.
But, it’s disabling the option to to zoom in/out.

How to solve the issue?

2

When are you calling your zoomToFitHandler? Is there any problem before you call it? Or if that is never called?

I’m wondering if you are calling it too early.

3

I wrote - in InitialLayoutCompleted.
But this is not the problem, after zoomToFit the diagram looks good. My problem is that in 3.x.y the diagram for some reason gets zoomed in while drawing, the zoom scale is not good, and the flag initialAutoScale doesn’t affect it.
I don’t want to fix it by zoomToFit, because the experience is bad - ‘jump’, I want the scale to be correct from the beginning, but not blocking the option to do zoom in/out after the layout is finished to get drawn.

4

Does not setting Diagram.scrollMode have any effect on this issue?

We need more information in order to be able to reproduce the problem. Is there any chance that you could provide a minimal stand-alone sample that exhibits the problem?

5

No, it’s not.
My diagram setting are:

allowCopy: false,
allowGroup: false,
allowInsert: false,
allowLink: false,
allowTextEdit: false,
initialContentAlignment: go.Spot.Center,
initialAutoScale: go.Diagram.Uniform,
scrollMode: go.Diagram.InfiniteScroll,
'animationManager.isEnabled': false, // turn off automatic animations

	layout: $(AlignedLayeredDigraphLayout, {
	columnSpacing: 15,
	layerSpacing: 100,
	layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
	aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
	initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
	packOption: go.LayeredDigraphLayout.PackStraighten,
	setsPortSpots: false,
	isRealtime: false,
	}),
});

To reproduce you need a lot of data (nodes).

6

Before zooming in which will happen on drawing:

image
image1162×789 23.6 KB

After zooming in (without manual zoom to fit after it for fix it):

image
image1159×801 21 KB

7

What happens if you remove the settings of Diagram.initial… and have an “InitialLayoutCompleted” DiagramEvent listener that does the zoom-to-fit that you want?

8

What do you mean remove the initial?
And I said, the problem is not in the zoom to fit, after zoom to fit the diagram scale is good. The problem is that the scale is bad in the process of drawing and the overall experience is bad - zoom in and them zoom out, like ‘jump’.
Shortly, the flag initialAutoScale is not working…

9

I was asking about:

  1. Not setting Diagram.initialContentAlignment
  2. Not setting Diagram.initialAutoScale
  3. Adding this DiagramEvent listener to call your function:
new go.Diagram(. . ., {
    "InitialLayoutCompleted": e => zoomToFitHandler(),
    . . .
10

Remove of initialAutoScale helped when changing an existing diagram (like removing/adding items) - for some cases (before not matter which change there was scale change (zoom in), but not at the first time of drawing a big diagram.
Not only was this flag useless, it was harmful.

I did also zoomToFit.
In version 2 was no need for manual zoomToFit and the flag initialAutoScale did the job internally.
Anyway, thanks.

11

Still, in version 2 it was better also in the rest cases, internally, and also there was no need to do zoom to fit in the InitialLayoutCompleted.

Please check your code (mainly of initialAutoScale) and see if you can improve this point.

12

Could you more thoroughly describe the situation(s) where it behaved better in v2 than in v3? I’m still interested in trying to reproduce the problem, but there still isn’t enough information for me to do so.

13

In v2, also when the diagram is big, so that to show all of it inside the diagram borders without scrolling there is a need to fit the scale automatically based on the data, the drawing process was smooth - from the beginning the scale was good, and therefor there was no need to do zoom to fit in the end.
The flag that did this is initialAutoScale.
In v3 the scale is not automatically get set, and in the above case, the diagram does not fit the borders, and for to fit you need to do a manual zoom to fit. So eventually the diagram fits, but the experience is ‘jump’ - from the start scale to the new scale after the zoom to fit. The flag is not working anymore, on the contrary, it is harmful - also in cases the scale does not need to change at all, it’s making to zoom in which I need to reset by zoom to fit in the InitialLayoutCompleted.

14

That’s odd. We do not know of any problems with Diagram.initialAutoScale in v3 (or in v2). When I try it with a model/layout that is significantly larger than the viewport, it works well.

How can we reproduce the problem?

Have you checked the console for any warnings or errors? Are you using go-debug.js (or go-debug.mjs) during development?