Fix misaligned display of zones in layout priview and grid editor (#1010)

Fix misaligned display of zones in layout preview and grid editor

src/modules/fancyzones/editor/FancyZonesEditor/GridEditor.xaml.cs

@@ -558,23 +558,22 @@ namespace FancyZonesEditor
 
             Settings settings = ((App)Application.Current).ZoneSettings;
 
-            int spacing, gutter;
+            int spacing = settings.ShowSpacing ? settings.Spacing : 0;
-            spacing = gutter = settings.ShowSpacing ? settings.Spacing : 0;
 
             int cols = model.Columns;
             int rows = model.Rows;
 
-            double totalWidth = arrangeSize.Width - (gutter * 2) - (spacing * (cols - 1));
+            double totalWidth = arrangeSize.Width - (spacing * (cols + 1));
-            double totalHeight = arrangeSize.Height - (gutter * 2) - (spacing * (rows - 1));
+            double totalHeight = arrangeSize.Height - (spacing * (rows + 1));
 
-            double top = gutter;
+            double top = spacing;
             for (int row = 0; row < rows; row++)
             {
                 double cellHeight = _rowInfo[row].Recalculate(top, totalHeight);
                 top += cellHeight + spacing;
             }
 
-            double left = gutter;
+            double left = spacing;
             for (int col = 0; col < cols; col++)
             {
                 double cellWidth = _colInfo[col].Recalculate(left, totalWidth);

src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml

@@ -7,7 +7,7 @@
              mc:Ignorable="d" 
             Background="LightGray"
             BorderThickness="1"
-            BorderBrush="SlateGray"
+            BorderBrush="DarkGray"
               Opacity="0.5"
              d:DesignHeight="450" d:DesignWidth="800">
     <Grid x:Name="Frame" Visibility="Collapsed">

src/modules/fancyzones/editor/FancyZonesEditor/LayoutPreview.xaml.cs

@@ -98,9 +98,98 @@ namespace FancyZonesEditor
             }
         }
 
-        private void RenderGridPreview(GridLayoutModel grid)
+        private void RenderActualScalePriview(GridLayoutModel grid)
+        {
+            int rows = grid.Rows;
+            int cols = grid.Columns;
+
+            RowColInfo[] rowInfo = new RowColInfo[rows];
+            for (int row = 0; row < rows; row++)
+            {
+                rowInfo[row] = new RowColInfo(grid.RowPercents[row]);
+            }
+
+            RowColInfo[] colInfo = new RowColInfo[cols];
+            for (int col = 0; col < cols; col++)
+            {
+                colInfo[col] = new RowColInfo(grid.ColumnPercents[col]);
+            }
+
+            Settings settings = ((App)Application.Current).ZoneSettings;
+
+            int spacing = settings.ShowSpacing ? settings.Spacing : 0;
+
+            int width = (int)SystemParameters.WorkArea.Width;
+            int height = (int)SystemParameters.WorkArea.Height;
+
+            double totalWidth = width - (spacing * (cols + 1));
+            double totalHeight = height - (spacing * (rows + 1));
+
+            double top = spacing;
+            for (int row = 0; row < rows; row++)
+            {
+                double cellHeight = rowInfo[row].Recalculate(top, totalHeight);
+                top += cellHeight + spacing;
+            }
+
+            double left = spacing;
+            for (int col = 0; col < cols; col++)
+            {
+                double cellWidth = colInfo[col].Recalculate(left, totalWidth);
+                left += cellWidth + spacing;
+            }
+
+            Viewbox viewbox = new Viewbox
+            {
+                Stretch = Stretch.Uniform,
+            };
+            Body.Children.Add(viewbox);
+            Canvas frame = new Canvas
+            {
+                Width = width,
+                Height = height,
+            };
+            viewbox.Child = frame;
+
+            for (int row = 0; row < rows; row++)
+            {
+                for (int col = 0; col < cols; col++)
+                {
+                    int i = grid.CellChildMap[row, col];
+                    if (((row == 0) || (grid.CellChildMap[row - 1, col] != i)) &&
+                        ((col == 0) || (grid.CellChildMap[row, col - 1] != i)))
+                    {
+                        Rectangle rect = new Rectangle();
+                        left = colInfo[col].Start;
+                        top = rowInfo[row].Start;
+                        Canvas.SetTop(rect, top);
+                        Canvas.SetLeft(rect, left);
+
+                        int maxRow = row;
+                        while (((maxRow + 1) < rows) && (grid.CellChildMap[maxRow + 1, col] == i))
+                        {
+                            maxRow++;
+                        }
+
+                        int maxCol = col;
+                        while (((maxCol + 1) < cols) && (grid.CellChildMap[row, maxCol + 1] == i))
+                        {
+                            maxCol++;
+                        }
+
+                        rect.Width = colInfo[maxCol].End - left;
+                        rect.Height = rowInfo[maxRow].End - top;
+                        rect.StrokeThickness = 1;
+                        rect.Stroke = Brushes.DarkGray;
+                        rect.Fill = Brushes.LightGray;
+                        frame.Children.Add(rect);
+                    }
+                }
+            }
+        }
+
+        private void RenderSmallScalePriview(GridLayoutModel grid)
         {
-            Body.RowDefinitions.Clear();
             foreach (int percent in grid.RowPercents)
             {
                 RowDefinition def = new RowDefinition
@@ -110,7 +199,6 @@ namespace FancyZonesEditor
                 Body.RowDefinitions.Add(def);
             }
 
-            Body.ColumnDefinitions.Clear();
             foreach (int percent in grid.ColumnPercents)
             {
                 ColumnDefinition def = new ColumnDefinition
@@ -121,8 +209,7 @@ namespace FancyZonesEditor
             }
 
             Settings settings = ((App)Application.Current).ZoneSettings;
-            int divisor = IsActualSize ? 2 : 20;
+            Thickness margin = new Thickness(settings.ShowSpacing ? settings.Spacing / 20 : 0);
-            Thickness margin = new Thickness(settings.ShowSpacing ? settings.Spacing / divisor : 0);
 
             List<int> visited = new List<int>();
 
@@ -137,25 +224,25 @@ namespace FancyZonesEditor
                         Rectangle rect = new Rectangle();
                         Grid.SetRow(rect, row);
                         Grid.SetColumn(rect, col);
-                        int span = 1;
+                        int rowSpan = 1;
                         int walk = row + 1;
                         while ((walk < grid.Rows) && grid.CellChildMap[walk, col] == childIndex)
                         {
-                            span++;
+                            rowSpan++;
                             walk++;
                         }
 
-                        Grid.SetRowSpan(rect, span);
+                        Grid.SetRowSpan(rect, rowSpan);
 
-                        span = 1;
+                        int columnSpan = 1;
                         walk = col + 1;
                         while ((walk < grid.Columns) && grid.CellChildMap[row, walk] == childIndex)
                         {
-                            span++;
+                            columnSpan++;
                             walk++;
                         }
 
-                        Grid.SetColumnSpan(rect, span);
+                        Grid.SetColumnSpan(rect, columnSpan);
 
                         rect.Margin = margin;
                         rect.StrokeThickness = 1;
@@ -167,6 +254,20 @@ namespace FancyZonesEditor
             }
         }
 
+        private void RenderGridPreview(GridLayoutModel grid)
+        {
+            Body.RowDefinitions.Clear();
+            Body.ColumnDefinitions.Clear();
+            if (IsActualSize)
+            {
+                RenderActualScalePriview(grid);
+            }
+            else
+            {
+                RenderSmallScalePriview(grid);
+            }
+        }
+
         private void RenderCanvasPreview(CanvasLayoutModel canvas)
         {
             Body.RowDefinitions.Clear();