Diagram zooming behavior

2 Answers 63 Views
Diagram, DiagramRibbonBar, DiagramToolBox
Marian
Top achievements
Rank 2
Iron
Iron
Iron
Marian asked on 17 Dec 2022, 10:51 PM | edited on 17 Dec 2022, 10:55 PM

Hello,

I have question about diagram zooming behavior. I would expect standard behavior, when zooming by mouse wheel, diagram should zoom with keeping point behind mouse cursor on the same position, zooming by toolbar buttons (programatically by ZoomIn / ZoomOut methods) should do the same, but keeping center point on the same position. It's almost working like this, but the first zoom (either by mouse or by buttons) do some strange first "move", and then it works like expected.

I set zoom/position on startup to fit main shape to all control space, also I added button "Zoom Fit" that makes the same. And I think that control "remembers" some other zoom center and it does the first zoom by this point. Next zooms work like expected. I have attached my test project. I have also attached animations of behavior as attachments (I tried to add it to question as images, but I couldn't submit question with them, it have always ended with error).

2 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Dec 2022, 12:00 PM

Hello, Marian,   

Thank you for the provided sample project and video. After investigating the code inside the SetDiagramZoom method that you have in the project, it seems that setting the DiagramElement.MainPanel.PositionOffset property leads to this first undesired offset for the zoom operation either with the MouseWheel or with setting the Zoom factor. Once it is commented, the zooming works as expected from the first iteration: 

		private void SetDiagramZoom(RadDiagramShape shape = null)
		{
			if (radDiagram1.Shapes.Count == 0)
				return;

			if (shape == null)
			{
				shape = radDiagram1.Shapes[0] as RadDiagramShape;
				if (shape == null)
					return;
			}

			double widthRatio = radDiagram1.Width / shape.Width;
			double heighRatio = radDiagram1.Height / (shape.Height + 1);
			radDiagram1.Zoom = (widthRatio < heighRatio ? widthRatio : heighRatio);
			float wp = (float)((radDiagram1.Width - shape.ActualWidth) / 2);
			float hp = (float)((radDiagram1.Height - shape.ActualHeight) / 2);
			//radDiagram1.DiagramElement.MainPanel.PositionOffset = new SizeF(wp, hp);
		}

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Marian
Top achievements
Rank 2
Iron
Iron
Iron
commented on 18 Sep 2023, 09:55 PM

Hello,

I only got back to this now. Sorry, but it's not nicely fitted to diagram control when you do this, you can see it also in your animation, that when you click "Zoom fit", it's not centered and you can see scrollbars. Desired output should be this:

I have played with this for about two hours now, but unfortunately I haven't found out anything better. I have found DiagramElement.BringIntoView method,  also DiagramElement.PanToPosition, but I cannot get what I exactly want. I think this should be something easy and standard. Original solution works the best, but has that only one problem with that first zoom. I have also looked to source code, but haven't found out anything. And yes, it's true that setting PositionOffset leads to this problem, but it's not centered without it. I am little bit frustrated now.

Can you help me, please? Maybe you can ask developers for the right solution. It's not so big problem, but I have it in todo list for this project and I would like to have it solved. Thanks.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Sep 2023, 03:09 PM

Hi, Marian,

The calculated Zoom factor should be set to such a value that can fit the resized image without the necessity of showing vertical or horizontal scrollbars. I agree it is a bit tricky to calculate the pixel perfect zoom factor depending on the control's size and the size of the form.

I would recommend you to consider making the diagram control with identical size as the image itself (720x720): 

		public MainForm()
		{
			InitializeComponent();
			this.radDiagram1.Dock = System.Windows.Forms.DockStyle.None;
                        this.radDiagram1.Size= new System.Drawing.Size(720,720);
		}

Thus, the calculations with the zoom factor will be easier and fixed without any rounding and initially you can start with zoom factor set to 1 without any scrollbars to be displayed. Please give it a try and see how it works on your end. Would this approach be applicable for you?

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Marian
Top achievements
Rank 2
Iron
Iron
Iron
commented on 21 Sep 2023, 03:44 PM

Hello, thanks, but I don't have problem with calculation, it works ok. I have problem with that first zoom. Setting of MainPanel.PositionOffset changes some inner status probably and next zooming is not applied with center behind mouse cursor, but somewhere else. Next zooming is ok then.

Dess | Tech Support Engineer, Principal
Telerik team
commented on 26 Sep 2023, 10:37 AM

Hi, Marian, I have performed further testing with the sample project and it seems that if the RadDiagram control is not docked to fill the available space, the very first zoom operation works as expected:

		public MainForm()
		{
			InitializeComponent();
            this.radDiagram1.Dock = System.Windows.Forms.DockStyle.None;
            this.radDiagram1.Size = new System.Drawing.Size(720, 720);
        }

The attached gif file illustrates the achieved result after the above code modification in the provided sample project.

I believe that the is the requirement you are trying to achieve as a final behavior.

Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Marian
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or