Diagram Container vs Pan(-el?)

[AlmightyLks]

What's what here exactly? I am getting a little confused about their meaning, and I can't seem to find any docs explaining them

[AlmightyLks]

Adding to this: I just noticed, the Pan is a simple Point; Which confuses me even more

[zHaytam]

Hello,

• Container: This is the bounding rectangle of the diagram canvas. It reprensents the size of the canvas and the offset (top/left). It is used to calculate things like the point in a diagram from the clientX etc.
• Pan: This is the offset of the diagram itself. If you grab and move the canvas to the right, the pan will be (SomeNumber, 0), which tells you that everything needs to be moved by that much.

Hope this helps.

[zHaytam]

Me trying to explain with a drawing 😂

[AlmightyLks]

I am not certain how I'd manage to move the Diagram to the position of a certain Node in the centre 😄 Is there a way of achieving that?

[zHaytam]

If your node is the only one selected, you can use Diagram.ZoomToFit. Otherwsise, there is a PR still in progress: https://github.com/Blazor-Diagrams/Blazor.Diagrams/pull/178

[AlmightyLks]

Is there a way to make it select a node programmatically? 😆

[zHaytam]

Yes! Diagram.SelectModel(yourNode, unselectOthers: true)

[AlmightyLks]

That does move the Pan to the node's top left position
The margin parameter of ZoomToFit allows for a margin. However that margin affects the zoom as well, zooming out by a lot in order to kinda get it to center the node Is there no way to position the Container so that the Node is in the center? 😄

[zHaytam]

If you want it in the center, that will require a bit more calculations. The container is not really used like that. Container is only used (mostly) internally to understand how to shif things.

If you want things to be in the middle, you will have to adjust the pan yourself by:

1. Set the node position to 0,0 (or call ZoomToFit with margin 0)
2. Setting Pan.X to HalfContainerWidth - HalfNodeWidth
3. Setting Pan.Y to HalfContainerHeight - HalfNodeHeight

I can provide an example code once I get on my computer.

[AlmightyLks]

            Diagram.SelectModel(_rootNode, unselectOthers: true);
            Diagram.ZoomToFit();
            Diagram.SetPan(
                (Diagram.Container.Width / 2) - (_rootNode.Size.Width / 2),
                (Diagram.Container.Height / 2) - (_rootNode.Size.Height / 2)
                );

Seems fitting to what you described

doesn't position it as good however 😄

[AlmightyLks]

On the side, to not undermine your efforts: I appreciate your patience and help!

[AlmightyLks]

Oh! I found a mistake on my side!

[zHaytam]

There is a mistake on my side too, my idea would only work if your node is at 0,0. I can provide a working example tomorrow if you still don't have a solution

[AlmightyLks]

I am still open to hear about the centering code snippet, as I did not manage to do it myself, admittedly 😅

[zHaytam]

Hello!

Please try the following extension method:

public static void CenterOnNode(this Diagram diagram, NodeModel node, double margin = 0)
{
    diagram.SelectModel(node, unselectOthers: true);
    diagram.ZoomToFit(margin);

    var width = node.Size.Width * diagram.Zoom;
    var scaledMargin = margin * diagram.Zoom;
    var deltaX = (diagram.Container.Width / 2) - (width / 2) - scaledMargin;
    diagram.UpdatePan(deltaX, 0);
}

[AlmightyLks]

Yes! That does the job! Thanks a lot! 😄