Page Index Toggle Pages: 1 [2] 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram (Read 22038 times)
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #15 - Apr 2nd, 2020 at 7:48am
Print Post  
Hi,

If you want to limit zooming in and out to the imageNode bounds, call diagram.ZoomToRect(imageNode.Bounds, true) and disable following zoom operations.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #16 - Apr 2nd, 2020 at 7:57am
Print Post  
Thanks a lot, Lyubo. Smiley

If I only limit the minimal extent of the shrink to the border of the imageNode. How do I use diagram.ZoomToRect (imageNode.Bounds, true) for this code?
private void diagram_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
var zoomRect = diagram.Viewport;
if (e.Delta < 0)
zoomRect.Inflate(100, 100);
else
zoomRect.Inflate(-100, -100);
if (diagram.Bounds.Width >= zoomRect.Width && diagram.Bounds.Height >= zoomRect.Height)
diagram.ZoomToRect(zoomRect, true);

// stop the scrollviewer from scrolling
e.Handled = true;
}

My purpose is to get a judgment condition: when the minimum range of reduction is the size of the picture. The effect of this condition is exactly the opposite of this code: zoomRect.Contains (imageNode.Bounds). The final effect is that when the picture is reduced to the size of the picture, it cannot be further reduced. How to achieve it? Is there any sample code?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #17 - Apr 2nd, 2020 at 12:52pm
Print Post  
Hi,

I am not sure I understand again what you mean, but I'll do my best. Below I'll explain what your current zoom handler does:
Code
Select All
private void diagram_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    // this is your current viewport - the bounding rectangle of what you can see on the screen
    var zoomRect = diagram.Viewport;

    // if that value is negative, it indicates a Zoom Out, thus increasing the current viewport bounds, will effectively zoom the document out; Else, it is a Zoom In operation, so the opposite is true.
    if (e.Delta < 0)
        zoomRect.Inflate(100, 100);
    else
        zoomRect.Inflate(-100, -100);

    // This condition checks if the new resulting bounding rectangle will exceed the bounds of the whole document, and if not - it zooms the view to it, with pivot at the center
    if (diagram.Bounds.Width >= zoomRect.Width && diagram.Bounds.Height >= zoomRect.Height)
        diagram.ZoomToRect(zoomRect, true);

    // stop the scrollviewer from scrolling
    e.Handled = true;
} 



If you need to check either if zoom in or out operation will exceed a certain limit you have - i.e. the size of the imageNode, you need to compare the resulting zoomRect instance to that limit - and if that limit is exceeded - not zoom the view. For example, checking if !zoomRect.Contains(imageNode.Bounds) is true, will not let you to zoom out beyond the size of the imageNode, etc.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #18 - Apr 2nd, 2020 at 12:59pm
Print Post  
Hey, Lyubo. Smiley
In addition to the above: the minimum(zooming out) range to restrict the reduction is the size of the picture. There is also a need to limit the zooming-in effect: the effect of maximizing the image to my screenshot 2. How do these two questions modify this code?
private void diagram_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
var zoomRect = diagram.Viewport;
if (e.Delta < 0)
zoomRect.Inflate(100, 100);
else
zoomRect.Inflate(-100, -100);
if (diagram.Bounds.Width >= zoomRect.Width && diagram.Bounds.Height >= zoomRect.Height)
diagram.ZoomToRect(zoomRect, true);

// stop the scrollviewer from scrolling
e.Handled = true;
}
  

4_2_5.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #19 - Apr 2nd, 2020 at 1:02pm
Print Post  
Smiley Added:
the Screenshot 2
  

4_2_6.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #20 - Apr 3rd, 2020 at 3:13am
Print Post  
Sorry, Lyubo. Smiley
I must be wrong in my description. I re-sorted my needs: my imageNode passed this imageNode = diagram.Factory.CreateShapeNode (0, 0, imageWidth, imageHeight); set its size to the image size. At this time, you cannot zoom out. You can only zoom in and you can zoom out after zooming in, but the minimum value after zooming out is also the size of the imageNode at the beginning. For the magnification aspect, it is the effect of screenshot 2 above. So how do I modify it to achieve these two effects.
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #21 - Apr 3rd, 2020 at 3:24am
Print Post  
private void diagram_PreviewMouseWheel (object sender, MouseWheelEventArgs e)
{
var zoomRect = diagram.Viewport;
if (e.Delta <0 && !zoomRect.Contains (imageNode.Bounds))
zoomRect.Inflate (100, 100);
else
zoomRect.Inflate (-100, -100);
if (diagram.Bounds.Width> = zoomRect.Width && diagram.Bounds.Height> = zoomRect.Height)
diagram.ZoomToRect (zoomRect, true);

// stop the scrollviewer from scrolling
e.Handled = true;
}
I tried this method, but it didn't achieve the effect I mentioned above, because zooming out will shake, and zooming in will only zoom in to the size of the picture, and the magnification cannot reach the effect of screenshot 2. This effect is not what I want. What I want is the effect mentioned above. I urgently need to resolve this issue to continue working. Please guide me how to modify it.
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #22 - Apr 3rd, 2020 at 3:59am
Print Post  
Smiley Added:
  

4_3_1.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #23 - Apr 3rd, 2020 at 4:00am
Print Post  
Smiley Added:
  

4_3_2.png (Attachment deleted)
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #24 - Apr 3rd, 2020 at 4:09am
Print Post  
Smiley Added:
  

e__d__e__z___20200403120540.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #25 - Apr 3rd, 2020 at 6:15am
Print Post  
Hi,

Try this:
Code
Select All
private void OnDiagramMouseWheel(object sender, MouseWheelEventArgs e)
{
	var imageBounds = imageNode.Bounds;
	var zoomRect = diagram.Viewport;
	var zoomStep = 10;

	if (e.Delta < 0)
	{
		zoomRect = new Rect
		(
			Math.Max(imageBounds.X, zoomRect.X - zoomStep / 2),
			Math.Max(imageBounds.Y, zoomRect.Y - zoomStep / 2),
			Math.Min(imageBounds.Width, zoomRect.Width + zoomStep),
			Math.Min(imageBounds.Height, zoomRect.Height + zoomStep)
		);
	}
	else
	{
		zoomRect = new Rect
		(
			Math.Min(redRect.X, zoomRect.X + zoomStep / 2),
			Math.Min(redRect.Y, zoomRect.Y + zoomStep / 2),
			Math.Max(redRect.Width, zoomRect.Width - zoomStep),
			Math.Max(redRect.Height, zoomRect.Height - zoomStep)
		);
	}

	diagram.ZoomToRect(zoomRect, true);

	// stop the scrollviewer from scrolling
	e.Handled = true;
} 



The redRect variable in this case is the bounding rectangle you want to limit zooming in to (the red square in your pictures).

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #26 - Apr 3rd, 2020 at 6:32am
Print Post  
Thank you so much, Lyubo. Smiley
But redRect is the imageNode I want to limit. If I change redRect to imageBounds. You cannot zoom in or out after the program is running. Is it because I have two nodes: imageNode and overlayNode?

        private void diagram_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            var imageBounds = imageNode.Bounds;
            var zoomRect = diagram.Viewport;
            var zoomStep = 10;

            if (e.Delta < 0)
            {
                zoomRect = new Rect
                (
                    Math.Max(imageBounds.X, zoomRect.X - zoomStep / 2),
                    Math.Max(imageBounds.Y, zoomRect.Y - zoomStep / 2),
                    Math.Min(imageBounds.Width, zoomRect.Width + zoomStep),
                    Math.Min(imageBounds.Height, zoomRect.Height + zoomStep)
                );
            }
            else
            {
                zoomRect = new Rect
                (
                    Math.Min(imageBounds.X, zoomRect.X + zoomStep / 2),
                    Math.Min(imageBounds.Y, zoomRect.Y + zoomStep / 2),
                    Math.Max(imageBounds.Width, zoomRect.Width - zoomStep),
                    Math.Max(imageBounds.Height, zoomRect.Height - zoomStep)
                );
            }

            diagram.ZoomToRect(zoomRect, true);

            // stop the scrollviewer from scrolling
            e.Handled = true;
        }
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #27 - Apr 3rd, 2020 at 6:39am
Print Post  
If I change the rediRect variable to overlayNode.Bounds. The program can be enlarged or reduced after running. But I don't quite understand this code.      
        private void diagram_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            var imageBounds = imageNode.Bounds;
            var zoomRect = diagram.Viewport;
            var zoomStep = 10;

            if (e.Delta < 0)
            {
                zoomRect = new Rect
                (
                    Math.Max(imageBounds.X, zoomRect.X - zoomStep / 2),
                    Math.Max(imageBounds.Y, zoomRect.Y - zoomStep / 2),
                    Math.Min(imageBounds.Width, zoomRect.Width + zoomStep),
                    Math.Min(imageBounds.Height, zoomRect.Height + zoomStep)
                );
            }
            else
            {
                zoomRect = new Rect
                (
                    Math.Min(overlayNode.Bounds.X, zoomRect.X + zoomStep / 2),
                    Math.Min(overlayNode.Bounds.Y, zoomRect.Y + zoomStep / 2),
                    Math.Max(overlayNode.Bounds.Width, zoomRect.Width - zoomStep),
                    Math.Max(overlayNode.Bounds.Height, zoomRect.Height - zoomStep)
                );
            }

            diagram.ZoomToRect(zoomRect, true);

            // stop the scrollviewer from scrolling
            e.Handled = true;
        }
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #28 - Apr 3rd, 2020 at 6:58am
Print Post  
Hi,

The code is extremely basic and self-explanatory. It constrains the zoom out operation to a bigger bounding rectangle - in this case imageNode.Bounds and limits the zoom in operation to a smaller bounding rectangle - be it overlayNode, redRect or any other arbitrary rectangle inside the bigger node. You should be able to replace imageNode and redRect with any other reference to represent the bounds of the outer and inner limits.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
D
Full Member
***
Offline


I Love MindFusion!

Posts: 158
Joined: Mar 16th, 2020
Re: Don't let the scroll bar restrict mouse drag of ShapeNode in Diagram
Reply #29 - Apr 3rd, 2020 at 8:57am
Print Post  
Thanks a lot for your answers, Lyubo Smiley

I currently have 4 questions as follows:
1.I change the redRect to overlayNode.Bounds. After zooming to a certain extent, it cannot be zoomed. At this point, if you use the scroll wheel to zoom in again, the diagram will scroll down. I don't want this to happen. What I want is that at this time, if I use the scroll wheel to zoom in, the diagram cannot be moved. How to achieve this?
2. If I set the default length (50, 50) of the overlayNode to other values, such as (100, 100) or (200, 200), the diagram cannot be zoomed in and out at this time, how can I solve it?
3. Set the area of ​​the overlayNode beyond the imageNode to black. How to achieve it?
4. How to realize that the side of ovelayNode can be pulled after the mouse clicks on the overlayNode, and the corner position can also be pulled? And the length and width values ​​of the overlayNode are displayed in two TextBoxes in real time.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 
Send TopicPrint