Diagram auto-panning and delayed scrollbar appearance

Hi Walter,

I’m observing an issue with the scrolling and positioning behavior in my GoXam diagram.
On load, no scrollbars are visible, even though both horizontal and vertical scrollbars are set to Visible. The diagram initially contains only a single node placed at the center. When I drag this node horizontally or vertically, the diagram canvas automatically shifts instead of showing scrollbars.
Only after I move the node far enough beyond the visible bounds, the scrollbars appear, but until then, the diagram keeps auto-panning to keep the node within view.
Additionally, when I delete all nodes, the canvas again repositions itself automatically, which I’d like to avoid.

My goal is to:

*Show scrollbars immediately on load, even with a single node.
*Keep the canvas fixed, disabling any automatic movement or repositioning when nodes are dragged or deleted.
*Current setup is :-
<go:Diagram
HorizontalContentAlignment=“Stretch”
VerticalContentAlignment=“Stretch”
HorizontalScrollBarVisibility=“Visible”
VerticalScrollBarVisibility=“Visible” />
Could you please confirm what triggers this auto-panning or repositioning behavior, and how I can ensure the canvas remains fixed with scrollbars visible at all times?

Yes, that is intentional, just as it is with normal document viewers or editors such as HTML web browser windows. The idea is to prevent the window from appearing empty even though there are Nodes and Links somewhere else, which is a situation that users find confusing or disconcerting.

There are a lot of possibilities here, and many reasonable ones. I suspect that you cannot set it up to behave like you want. You could try increasing the DiagramPanel.Padding property so that there is extra empty space around the area where the Nodes and Links are, and they will be able to scroll there.

The “Content Alignment and Stretch” section of the GoXam Introduction document, starting at page 59, may help explain some of the available properties.

I want to achieve the panning and scrolling effect like we have today with devexpress canvas as attached in video here Goxam issues Currently there is certain restriction to the usable canvas area and cannot go beyond that.

In your video it appears that the user can scroll moderately far, but they cannot scroll forever in any one direction. If that is what you want, you can just increase the value of DiagramPanel.Padding. You can set that on the Diagram due to the TemplateBinding in the default ControlTemplate.

Thanks that worked well for me

but this had led to my ZoomToFit failing. Now zoomToFit is fitting to an empty area of canvas with scroll bars at start positions. This is what I do in the function private void _handleFitToItems(object sender, EventArgs e)
{
_goCanvas.Panel.HorizontalContentAlignment = HorizontalAlignment.Center;
_goCanvas.Panel.VerticalContentAlignment = VerticalAlignment.Center;
_goCanvas.Panel.ZoomToFit();
}

You could temporarily set the DiagramPanel.Padding to a small Thickness, and then set it back afterwards.

I tried setting the padding to a large thickness in initialLayout_Completed event and then the ZoomToFit click event I set it to a small value inside a dispatcher then performed diagran.Panel.ZoomToFit(). Again set it back to a large value. This is not working as expected.

DiagramPanel.ZoomToFit calls DiagramPanel.SetScaleAndPosition with the appropriate scale and position values. Instead of temporarily setting Padding, you can call this method directly so that you can control exactly which area it shows afterward.

Thank you that gives me lot of control on ZoomTiFit , I just have to work on calculating right scale to get perfect view

How can I calculate an appropriate scale for SetScaleAndPosition method?

Assuming “r” is the Rect that you want to show, and that neither Width nor Height are zero, and assuming “v” is the Size of the viewport in pixels:

Math.Min(v.Height / r.Height, v.Width / r.Width)

Thanks that worked well

I notice a behavior today, I had set the diagram.panel.padding to Thickness(800); I switched to working on a 4k monitor today and I see that addition of nodes on canvas leads to movement of the canvas, but this doesnt happen on the 2k screen/fullhd. I am baffled as to this one line of code of setting panel.padding could show differences like this. I do not understand this sort of automatic canvas movement when I add items. What is happening here? attaching a video here Goxam issues

I am guessing that the behavior you are seeing depends on how quickly you drag the node from the palette to the main diagram. The question really is: when can a user drag a node from a palette and cause the diagram’s content to auto-scroll towards the right so that they can drop the new node on the left side of whatever had been originally visible?

Auto-scrolling normally happens during dragging when the pointer is along the inner edge of the viewport. It will scroll faster the closer the pointer is to the edge.

While dragging between diagrams, if the pointer moves slowly, it might spend enough time in that auto-scrolling region, Diagram | GoJS API , that it starts auto-scrolling.

Thanks, I will discuss with my team the preferred behavior, atleast now I understand a way to stop autoscroll. Thanks!

I use Goxam, wpf, I tried setting the _goCanvas.Panel.AutoScrollRegion = new Thickness(0, 0, 0, 0); in InitialLayoutCompleted as I want to disable this behavior, but I see it still happens. On resolution of 150% it doesnt happen on laptop screen but on monitors with 100% scale it happens, we have decided not to have this autoscroll in our app. what am I missing?

Autoscrolling is sometimes very handy – I would not disable it. Besides, it did not help fix your issue, so why change it?

I don’t know what would cause the problem that you showed.

The reason we plan on disabling it is because am noticing inconsistency in the autoscroll, on left edge of viewport when I add an item it scrolls to right but it doesnt scroll to left when I add an item to right edge, that is inconsistent and confusing for the users. Or how can I fix this inconsitency? If this is the aforesaid behavior then I will have to disable it.

It depends on where the mouse pointer is at the time of the drop. Also it depends on the DiagramPanel.DiagramBounds relative to the current DiagramPanel.ViewportBounds, since that might prevent scrolling in some cases.