Align zone dimensions from layout preview with those from grid editor (#1115)

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

@@ -22,40 +22,40 @@ namespace FancyZonesEditor
 
         public Int32Rect[] GetZoneRects()
         {
-            // TODO: the ideal here is that the ArrangeRects logic is entirely inside the model, so we don't have to walk the UIElement children to get the rect info
-            Panel previewPanel;
             if (_editor != null)
             {
                 if (_editor is GridEditor gridEditor)
                 {
-                    previewPanel = gridEditor.PreviewPanel;
+                    return ZoneRectsFromPanel(gridEditor.PreviewPanel);
                 }
                 else
                 {
                     // CanvasEditor
-                    previewPanel = ((CanvasEditor)_editor).Preview;
+                    return ZoneRectsFromPanel(((CanvasEditor)_editor).Preview);
                 }
             }
             else
             {
-                previewPanel = _layoutPreview.PreviewPanel;
+                // One of the predefined zones (neither grid or canvas editor used).
+                return _layoutPreview.GetZoneRects();
             }
+        }
 
-            var count = previewPanel.Children.Count;
+        private Int32Rect[] ZoneRectsFromPanel(Panel previewPanel)
+        {
+            // TODO: the ideal here is that the ArrangeRects logic is entirely inside the model, so we don't have to walk the UIElement children to get the rect info
+            int count = previewPanel.Children.Count;
             Int32Rect[] zones = new Int32Rect[count];
 
-            int i = 0;
+            for (int i = 0; i < count; i++)
-            foreach (FrameworkElement child in previewPanel.Children)
             {
+                FrameworkElement child = (FrameworkElement)previewPanel.Children[i];
                 Point topLeft = child.TransformToAncestor(previewPanel).Transform(default);
 
-                var right = topLeft.X + child.ActualWidth;
-                var bottom = topLeft.Y + child.ActualHeight;
                 zones[i].X = (int)topLeft.X;
                 zones[i].Y = (int)topLeft.Y;
                 zones[i].Width = (int)child.ActualWidth;
                 zones[i].Height = (int)child.ActualHeight;
-                i++;
             }
 
             return zones;

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

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 using System.Collections.Generic;
+using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Media;
@@ -19,6 +20,7 @@ namespace FancyZonesEditor
         public static readonly DependencyProperty IsActualSizeProperty = DependencyProperty.Register("IsActualSize", typeof(bool), typeof(LayoutPreview), new PropertyMetadata(false));
 
         private LayoutModel _model;
+        private List<Int32Rect> _zones = new List<Int32Rect>();
 
         public LayoutPreview()
         {
@@ -47,16 +49,6 @@ namespace FancyZonesEditor
             }
             else if ((e.PropertyName == "ShowSpacing") || (e.PropertyName == "Spacing"))
             {
-                if (IsActualSize)
-                {
-                    Settings settings = ((App)Application.Current).ZoneSettings;
-                    Body.Margin = new Thickness(settings.ShowSpacing ? settings.Spacing / 2 : 0);
-                }
-                else
-                {
-                    Body.Margin = new Thickness(0);
-                }
-
                 if (_model is GridLayoutModel)
                 {
                     RenderPreview();
@@ -64,9 +56,9 @@ namespace FancyZonesEditor
             }
         }
 
-        public Panel PreviewPanel
+        public Int32Rect[] GetZoneRects()
         {
-            get { return Body; }
+            return _zones.ToArray();
         }
 
         private void OnLoaded(object sender, RoutedEventArgs e)
@@ -84,23 +76,110 @@ namespace FancyZonesEditor
             }
 
             Body.Children.Clear();
+            Body.RowDefinitions.Clear();
+            Body.ColumnDefinitions.Clear();
+
+            _zones.Clear();
 
             if (_model is GridLayoutModel gridModel)
             {
                 RenderGridPreview(gridModel);
             }
-            else
+            else if (_model is CanvasLayoutModel canvasModel)
             {
-                if (_model is CanvasLayoutModel canvasModel)
+                RenderCanvasPreview(canvasModel);
+            }
+        }
+
+        private void RenderActualScalePreview(GridLayoutModel grid)
+        {
+            int rows = grid.Rows;
+            int cols = grid.Columns;
+
+            RowColInfo[] rowInfo = (from percent in grid.RowPercents
+                                    select new RowColInfo(percent)).ToArray();
+
+            RowColInfo[] colInfo = (from percent in grid.ColumnPercents
+                                    select new RowColInfo(percent)).ToArray();
+
+            Settings settings = ((App)Application.Current).ZoneSettings;
+
+            int spacing = settings.ShowSpacing ? settings.Spacing : 0;
+
+            int width = (int)settings.WorkArea.Width;
+            int height = (int)settings.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++)
                 {
-                    RenderCanvasPreview(canvasModel);
+                    int childIndex = grid.CellChildMap[row, col];
+                    if (((row == 0) || (grid.CellChildMap[row - 1, col] != childIndex)) &&
+                        ((col == 0) || (grid.CellChildMap[row, col - 1] != childIndex)))
+                    {
+                        // this is not a continuation of a span
+                        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] == childIndex))
+                        {
+                            maxRow++;
+                        }
+
+                        int maxCol = col;
+                        while (((maxCol + 1) < cols) && (grid.CellChildMap[row, maxCol + 1] == childIndex))
+                        {
+                            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);
+                        _zones.Add(new Int32Rect(
+                            (int)left, (int)top, (int)rect.Width, (int)rect.Height));
+                    }
                 }
             }
         }
 
-        private void RenderGridPreview(GridLayoutModel grid)
+        private void RenderSmallScalePreview(GridLayoutModel grid)
         {
-            Body.RowDefinitions.Clear();
             foreach (int percent in grid.RowPercents)
             {
                 RowDefinition def = new RowDefinition
@@ -110,7 +189,6 @@ namespace FancyZonesEditor
                 Body.RowDefinitions.Add(def);
             }
 
-            Body.ColumnDefinitions.Clear();
             foreach (int percent in grid.ColumnPercents)
             {
                 ColumnDefinition def = new ColumnDefinition
@@ -121,8 +199,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>();
 
@@ -167,20 +244,31 @@ namespace FancyZonesEditor
             }
         }
 
+        private void RenderGridPreview(GridLayoutModel grid)
+        {
+            if (IsActualSize)
+            {
+                RenderActualScalePreview(grid);
+            }
+            else
+            {
+                RenderSmallScalePreview(grid);
+            }
+        }
+
         private void RenderCanvasPreview(CanvasLayoutModel canvas)
         {
-            Body.RowDefinitions.Clear();
-            Body.ColumnDefinitions.Clear();
-
             Viewbox viewbox = new Viewbox
             {
                 Stretch = Stretch.Uniform,
             };
             Body.Children.Add(viewbox);
-            Canvas frame = new Canvas();
+            Canvas frame = new Canvas
+            {
+                Width = canvas.ReferenceWidth,
+                Height = canvas.ReferenceHeight,
+            };
             viewbox.Child = frame;
-            frame.Width = canvas.ReferenceWidth;
-            frame.Height = canvas.ReferenceHeight;
             foreach (Int32Rect zone in canvas.Zones)
             {
                 Rectangle rect = new Rectangle();