How to restrict RadDiagramThumbnail's ViewportRect position

[Jaeho]

Hi,

I am trying specify RadDiagram Canvas size and I have two questions below.

Question 1)

When I set Width and Height of RadDiagram to large numbers,

ViewportRect.location of RadDiagramThumbnail is different.

Is this correct behavior and why is this happening?

 

Question 2)

With With and Height set, I am able to restrict the movement(or scroll?) of canvas to (0,0) and (width,height).

Below is the code I wrote to restrict the pan movement.

Now, I want to the same thing when I click and move mouse on RadDiagramThumbnail's ViewportRect.

How can I do this?

Thanks in advance.

Jaeho

 

 

MainWindow.xaml

   <Grid x:Name="LyoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <telerik:RadDiagram x:Name="xDiagram" 
            Width="5760"
            Height="3240"
            MouseMove="diagram_MouseMove"
            PreviewMouseDown="diagram_MouseDown"
            PreviewMouseUp="diagram_MouseUp"
            PreviewPan="Diagram_OnPreviewPan"
                            >
            <telerik:RadDiagramShape x:Name="Shape1" 
                                 Content="Shape1" 
                                 Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}" 
                                 Position="100,80" />
            <telerik:RadDiagramShape x:Name="Shape2" 
                                 Content="Shape2" 
                                 Position="200,180" />
            <telerik:RadDiagramConnection Source="{Binding ElementName=Shape1}" Target="{Binding ElementName=Shape2}" />
        </telerik:RadDiagram>
        <telerik:RadDiagramThumbnail x:Name="xThumbnail" 
                             Grid.Row="1" 
                             Diagram="{Binding ElementName=xDiagram}">
            <telerik:RadDiagramThumbnail.ViewportStyle>
                <Style TargetType="Rectangle">
                    <Setter Property="Stroke" Value="Blue" />
                </Style>
            </telerik:RadDiagramThumbnail.ViewportStyle>
        </telerik:RadDiagramThumbnail>
    </Grid>''

 

 

MainWindow.xaml.cs

        private bool isPanning = false;
        private Point oldPosition;

        private void Diagram_OnPreviewPan(object sender, PositionChangedRoutedEventArgs e)
        {
            e.Handled = true;
            this.isPanning = true;

        }

        private void diagram_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.oldPosition = e.GetPosition(this);
        }

        private void diagram_MouseUp(object sender, MouseEventArgs e)
        {
            this.isPanning = false;
        }

        private void diagram_MouseMove(object sender, MouseEventArgs e)
        {
            if ((e.LeftButton == MouseButtonState.Pressed) || (e.RightButton == MouseButtonState.Pressed))
            {
                var position = e.GetPosition(this);

                if (this.isPanning && (e.RightButton == MouseButtonState.Pressed || Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl)))
                {
                    RadDiagram diagram = sender as RadDiagram;
                    double xOffset = position.X - oldPosition.X;
                    double yOffset = position.Y - oldPosition.Y;
                    if (yOffset < 0)
                    {
                        int visibleHeight = (int)(diagram.DesiredSize.Height / diagram.Zoom);
                        double pos = diagram.Viewport.Top + visibleHeight;
                        if (pos - yOffset > diagram.ActualHeight)
                        {
                            yOffset += (int)((pos - yOffset) - diagram.ActualHeight);
                        }
                    }
                    else if (yOffset > 0)
                    {
                        if (diagram.Viewport.Top - yOffset < 0)
                        {
                            //e.Handled = true;
                            yOffset += (int)diagram.Viewport.Top - yOffset;
                        }
                    }

                    if (xOffset < 0)
                    {
                        int visibleWidth = (int)(diagram.DesiredSize.Width / diagram.Zoom);
                        double pos = diagram.Viewport.Left + visibleWidth;
                        if (pos - xOffset > diagram.ActualWidth)
                        {
                            //e.Handled = true;
                            xOffset += (int)((pos - xOffset) - diagram.ActualWidth);
                        }
                    }
                    else if (xOffset > 0)
                    {

                        if (diagram.Viewport.Left - xOffset < 0)
                        {
                            //e.Handled = true;
                            xOffset += (int)diagram.Viewport.Left - xOffset;
                        }
                    }

                    if (Math.Abs(xOffset) != 0 || Math.Abs(yOffset) != 0)
                    {
                        diagram.Position = new Point(diagram.Position.X + xOffset, diagram.Position.Y + yOffset);
                    }

                    oldPosition = new Point(oldPosition.X + xOffset, oldPosition.Y + yOffset);
                }
            }
        }

 

[Vladimir Stoyanov]

Hello Jaehoo,

Thank you for the provided code snippets. 

Based on the provided information I am uncertain whether the current approach is the best one. May I ask you to elaborate a bit on what you are trying to achieve ultimately? This will hopefully allow me to better understand the scenario and further assist you.

On a side note, you can check out the following thread: Custom Diagram Size (Not viewport), where a similar scenario was discussed. 

I am looking forward to your reply.

Regards,
Vladimir Stoyanov
Progress Telerik

[Jaeho]

Dear Vladimir,

Thanks for your feedback.

With more time spent on studying diagram's viewport and RadDiagramThumbnail's viewportrect,

I agree with you that my previous approach was not a good one.

What I want to do is to be able to limit the scrolling of diagram to the rectangle which includes all shapes.

And the scrolling area should be decided dynamically as shapes are added, deleted or moved to other locations.

Currently, diagram allows infinite scrolling of diagram.

I see that RadDiagramThumbnail is limiting the drag of viewportrect.

And this is what I want to do on diagram canvas.

 

Hope this gives you better understanding.

 

Thanks.

[Vladimir Stoyanov]

Hello Jaeho,

Thank you for the additional information. 

I am attaching a sample project demonstrating a possible approach for limiting the panning within the bounds of the existing shapes. It involves adding a handler for the ViewportChanged event, which will also be fired when the viewport is changed through the RadDiagramThumbnail. 

Note, that I have not tested the suggested approach extensively, however I do hope that it will serve as a good starting point for achieving the desired behavior. Of course, feel free to modify it or extend it in order to suit your exact scenario. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Jaeho]

Hello Vladimir,

Thanks for your feedback and the sample project.

Unfortunately, I wasn't able to solve my problem.

Let me rephrase question.

I see that RadDiagramThumbnail has a rectangle where I can drag around the diagram's viewport.

And there seems to be a limited draggable area where I cannot drag beyond.

Is it possible to get the draggable area of RadDiagramThumbnail so I can apply same draggable area to diagram?

Thanks and regards,

Jaeho

[Vladimir Stoyanov]

Hello Jaeho,

There isn't a straightforward approach to applying the same restrictions in the RadDiagram. Here is the essential logic of the RadDiagramThumbnail, which is executed on mouse move when the rectangle is dragged:

protected override void OnMouseMove(System.Windows.Input.MouseEventArgs e)
        {
            base.OnMouseMove(e);
            if (this.isLeftButtonDown)
            {
                var currentMousePosition = e.GetPosition(this);
                double offsetX = currentMousePosition.X - this.dragStartPoint.X;
                double offsetY = currentMousePosition.Y - this.dragStartPoint.Y;
                if (this.isDragging)
                {
                    var viewportSize = this.ViewportRect.ToSize();
                    var halfViewportWidth = viewportSize.Width / 2;
                    var halfViewportHeight = viewportSize.Height / 2;
                    Point possiblePosition = new Point(this.positionOnDragStart.X + offsetX, this.positionOnDragStart.Y + offsetY);
                    double positionX = Math.Max(-halfViewportWidth, Math.Min(possiblePosition.X, this.mainCanvas.ActualWidth - halfViewportWidth));
                    double positionY = Math.Max(-halfViewportHeight, Math.Min(possiblePosition.Y, this.mainCanvas.ActualHeight - halfViewportHeight));
                    this.ViewportRect = new Rect(new Point(positionX, positionY), viewportSize);

                    this.SetDiagramPosition();
                }
                else if (Math.Abs(offsetX) > 2 || Math.Abs(offsetY) > 2)
                {
                    this.isDragging = true;
                    this.CaptureMouse();
                }
            }
        }

private void SetDiagramPosition()
        {
            Point newPosition = this.CalculateDiagramPoint(this.ViewportRect.TopLeft());
            if (this.Diagram != null)
            {
                this.Diagram.BringIntoView(newPosition, this.Zoom, DiagramAnimations.GetIsPanAnimationEnabled(this.Diagram));
            }
        }

        private Point CalculateDiagramPoint(Point thumbnailPoint)
        {
            if (this.mainCanvas == null || this.Diagram == null)
                return new Point();

            double offsetX = (thumbnailPoint.X * (this.imageRectangle.Width / this.mainCanvas.ActualWidth)) + this.imageRectangle.X;
            double offsetY = (thumbnailPoint.Y * (this.imageRectangle.Height / this.mainCanvas.ActualHeight)) + this.imageRectangle.Y;

            return new Point(offsetX, offsetY);
        }

You can observe that the X and Y positions are limited in the OnMouseMove event and later the BringIntoView method of the RadDiagram is used.

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik