Hi Team,
I wanted goJS to apply zoomtofit(), to the white canvas area. The challenge here is, Yellow rectangle is my canvas, and white is the actual part that gets displayed. The canvas spans after my containerdiv.
Calling zoomtofit, the viewport is considered as the yellow area, and some parts are lost, Is there any way gojs can detect the white area as viewport?
Please let know for more questions.
Why is your HTMLDivElement larger than the area visible to the user? It seems to me that you will have problems other than just not showing all of the parts after zoomToFit. Unless your diagram is disabled and unchanging?
The answer to your question is to compute and set the Diagram.scale and Diagram.position yourself.
Yes my diagram is disabled. And zoomtofit is the only action perform wrt to viewport. COuld you give me an example how to compute and set the Diagram.scale and Diagram.position?
What are the bounds (x, y, width, height) of the white rectangle? In which coordinate system?
The Diagram.documentBounds Diagram | GoJS API tells you the area in which there are Parts – think of it as the union of the Part.actualBounds for all of the visible Parts, plus any Diagram.padding. To determine the desired Diagram.scale, you’ll want to use the lesser of the ratio of the documentBounds.width and the white rectangle’s width and the ratio of the documentBounds.height and the white rectangle’s height.
Caution: if the documentBounds is small, for example because there are no Nodes or Links at all, you will want to establish a maximum value for the scale.
Assuming that the top-left corner of that white rectangle is in the coordinate system of the yellow rectangle (i.e., the HTMLDivElement that is hosting the Diagram), then that is in viewport coordinates. You can convert that point into document coordinates by calling Diagram.transformViewToDoc Diagram | GoJS API. That will be the desired value for Diagram.position.
Also, I suggest setting Diagram.scale before setting Diagram.position, because the values of Diagram.minScale and Diagram.maxScale will limit what value you can successfully set.
The white rectangle does not know the goJS coordinates, What I can get is whiteRect.getBoundingClientRect().
The width and the height of the getBoundingClientRect of the Diagram.div are what you divide by the Diagram.documentBounds width and height, respectively. The smaller ratio you can use as the new Diagram.scale.
If you get the getBoundingClientRect, then the difference in the top-left corner points will be what you pass to Diagram.transformViewToDoc to set as the new Diagram.position.