This is a migrated thread and some comments may be shown as answers.

Snap to grid while resizing issue

5 Answers 209 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Bruno
Top achievements
Rank 1
Bruno asked on 07 Jun 2017, 07:17 PM

Hello,

 

I have an issue with snap to grid and resizing. Consider SnapX and Snap Y  is set to 20 and Grid Cell Size is set to 20 as well. Then add a rectangle Shape and set its position to 23 and 23 while snap to grid is enabled try to enlarge the shape from bottom right corner. The shape width and height will increment by 20 so the width and height become 43 and 43 instead of 40 and 40 which are the grid lines position.

Am I missing something here ?

Thanks,

5 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 12 Jun 2017, 07:21 AM
Hello Bruno,

Yes, the resizing service uses the IsSnapToGridEnabled value only to calculate the normal step for resizing so it assumes the shapes are initially snapped. Is this an option for you - to snap all shapes on load to avoid such positions like 43;43 and to use an expected snapping resize ? If yes, you can use the following Loaded event handler:

private void diagram_Loaded(object sender, RoutedEventArgs e)
       {
           ISnappingService snapService = this.diagram.ServiceLocator.GetService<ISnappingService>();
           foreach (IShape shape in this.diagram.Shapes)
           {
               shape.Position = snapService.SnapPoint(shape.Position);
           }
       }


Regards,
Petar Mladenov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Bruno
Top achievements
Rank 1
answered on 16 Jun 2017, 07:26 PM

Hi Petar,

 

Thanks for the reply.

Unfortunately this doesn't work for me as I have exposed the GridCellSize property to the end user, So he/she can modify it at anytime and I don't want to re-snap items when GridCellSize changes as position of each is important as they are.

Therefore when I start to resize from each corners I would like to snap that specific corner segments to the grid lines. Is there a way to achieve this ?

 

Thanks

0
Accepted
Petar Mladenov
Telerik team
answered on 21 Jun 2017, 07:28 AM
Hi Bruno,

For that purpose you need to implement custom Resizing service and override the following functions:

/// <summary>
       /// Resizes to the new point.
       /// </summary>
       /// <param name="newPoint">The new point.</param>
       public virtual void Resize(Point newPoint)
       {
           Point newDelta = this.CalculateNewDelta(newPoint);
 
           if (this.oldDelta.X != newDelta.X || this.oldDelta.Y != newDelta.Y)
           {
               Rect newAdornerBounds = this.InternalResize(newDelta);
               this.oldDelta = newDelta;
 
               this.OnResizing(newAdornerBounds, newPoint);
           }
       }

/// <summary>
        /// Calculates the new resize delta.
        /// </summary>
        /// <param name="newPoint">The new point.</param>
        /// <returns></returns>
        protected virtual Point CalculateNewDelta(Point newPoint)
        {
            Point reversedCurrentPoint = Reverse(this.transformPivot, newPoint, this.adornerAngle);
            Point newDelta = new Point(reversedCurrentPoint.X - this.reversedStartPoint.X, reversedCurrentPoint.Y - this.reversedStartPoint.Y);
            newDelta = this.Graph.IsSnapToGridEnabled ? newDelta.Snap(this.Graph.SnapX, this.Graph.SnapY) : newDelta;
 
            //// Change the sign depending on the resize direction.
            switch (this.resizeDirection)
            {
                case ResizeDirection.SouthEastNorthWest:
                    break;
                case ResizeDirection.NorthWestSouthEast:
                    newDelta = new Point(-newDelta.X, -newDelta.Y);
                    break;
                case ResizeDirection.SouthWestNorthEast:
                    newDelta = new Point(-newDelta.X, newDelta.Y);
                    break;
                case ResizeDirection.NorthEastSouthWest:
                    newDelta = new Point(newDelta.X, -newDelta.Y);
                    break;
                default:
                    break;
            }
 
            return newDelta;
        }

CalculateNewDelata currently returns X Y which are divisible by SnapX/SnapY.

For implementing custom service you can refer to the following resources:

Diagram Services
Diagram Custom Services SDK (has custom resizing implementation)

Regards,
Petar Mladenov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Bruno
Top achievements
Rank 1
answered on 03 Jul 2017, 02:16 PM
Thanks Petar. It worked. :)
0
Bruno
Top achievements
Rank 1
answered on 03 Jul 2017, 02:20 PM
Thanks Petar. It worked. :)
Tags
Diagram
Asked by
Bruno
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Bruno
Top achievements
Rank 1
Share this question
or