Add height slider, UI improvements

Author: ole

LayoutInspector/ContentView.swift

@@ -2,37 +2,45 @@ import SwiftUI
 
 struct ContentView: View {
     @State private var width: CGFloat = 300
+    @State private var height: CGFloat = 100
     @State private var selectedView: String? = nil
     @State private var generation: Int = 0
 
     var subject: some View {
-        HStack {
-            Rectangle().fill(.green)
-                .debugLayout("green")
-            Text("Hello world")
-                .debugLayout("Text")
-            Rectangle().fill(.yellow)
-                .debugLayout("yellow")
-        }
-        .debugLayout("HStack")
+        Text("Hello")
+            .debugLayout("Text")
+            .aspectRatio(1, contentMode: .fit)
+            .debugLayout("aspectRatio")
     }
 
     var body: some View {
         VStack {
-            VStack(spacing: 24) {
+            VStack {
                 subject
                     .clearConsole()
                     .environment(\.debugLayoutSelection, selectedView)
-                    .frame(width: width, height: 80)
+                    .frame(width: width, height: height)
+                    .overlay {
+                        Rectangle()
+                            .strokeBorder(style: StrokeStyle(dash: [5]))
+                    }
                     .id(generation)
+                    .padding(.bottom, 16)
 
                 LabeledContent {
-                    Slider(value: $width, in: 100...500, step: 1)
+                    Slider(value: $width, in: 50...500, step: 1)
                 } label: {
                     Text("Width: \(width, format: .number.precision(.fractionLength(0)))")
                         .monospacedDigit()
                 }
 
+                LabeledContent {
+                    Slider(value: $height, in: 50...500, step: 1)
+                } label: {
+                    Text("Height: \(height, format: .number.precision(.fractionLength(0)))")
+                        .monospacedDigit()
+                }
+
                 Button("Reset layout cache") {
                     generation += 1
                 }

LayoutInspector/DebugLayout.swift

@@ -17,9 +17,15 @@ struct DebugLayoutWrapper: ViewModifier {
     @Environment(\.debugLayoutSelection) private var selection: String?
 
     func body(content: Content) -> some View {
-        let isSelected = label == selection
         content
-            .border(isSelected ? Color.pink : .clear, width: 2)
+            .overlay {
+                let isSelected = label == selection
+                if isSelected {
+                    Rectangle()
+                        .strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [5]))
+                        .foregroundColor(.pink)
+                }
+            }
     }
 }
 
@@ -156,61 +162,55 @@ struct Selection<Value: Equatable>: PreferenceKey {
 
 struct ConsoleView: View {
     @ObservedObject var console = Console.shared
-    @State private var selection: String? = "Text"
+    @State private var selection: String? = nil
 
     var body: some View {
         ScrollView(.vertical) {
-            VStack(alignment: .leading, spacing: 16) {
-                Text("Layout Log")
-                    .font(.headline)
-                    .padding(.top, 16)
+            Grid(alignment: .leadingFirstTextBaseline, horizontalSpacing: 0, verticalSpacing: 0) {
+                GridRow {
+                    Text("View")
+                    Text("Proposal")
+                    Text("Response")
+                }
+                .font(.headline)
+                .padding(.vertical, 4)
+                .padding(.horizontal, 8)
+
+                Rectangle().fill(.secondary)
+                    .frame(height: 1)
+                    .gridCellUnsizedAxes(.horizontal)
+                    .padding(.vertical, 4)
                     .padding(.horizontal, 8)
 
-                Grid(alignment: .leadingFirstTextBaseline, horizontalSpacing: 0, verticalSpacing: 0) {
+                ForEach(console.log) { item in
+                    let isSelected = selection == item.label
                     GridRow {
-                        Text("View")
-                        Text("Proposal")
-                        Text("Response")
+                        Text(item.label)
+                            .font(.body)
+                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
+
+                        Text(item.proposal?.pretty ?? "…")
+                            .monospacedDigit()
+                            .fixedSize()
+                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
+
+                        Text(item.response?.pretty ?? "…")
+                            .monospacedDigit()
+                            .fixedSize()
+                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                     }
-                    .font(.headline)
+                    .font(.callout)
                     .padding(.vertical, 4)
                     .padding(.horizontal, 8)
-
-                    Rectangle().fill(.secondary)
-                        .frame(height: 1)
-                        .gridCellUnsizedAxes(.horizontal)
-                        .padding(.vertical, 4)
-                        .padding(.horizontal, 8)
-
-                    ForEach(console.log) { item in
-                        let isSelected = selection == item.label
-                        GridRow {
-                            Text(item.label)
-                                .font(.body)
-                                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
-
-                            Text(item.proposal?.pretty ?? "…")
-                                .monospacedDigit()
-                                .fixedSize()
-                                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
-
-                            Text(item.response?.pretty ?? "…")
-                                .monospacedDigit()
-                                .fixedSize()
-                                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
-                        }
-                        .font(.callout)
-                        .padding(.vertical, 4)
-                        .padding(.horizontal, 8)
-                        .foregroundColor(isSelected ? .white : nil)
-                        .background(isSelected ? Color.accentColor : .clear)
-                        .contentShape(Rectangle())
-                        .onTapGesture {
-                            selection = isSelected ? nil : item.label
-                        }
+                    .foregroundColor(isSelected ? .white : nil)
+                    .background(isSelected ? Color.accentColor : .clear)
+                    .contentShape(Rectangle())
+                    .onTapGesture {
+                        selection = isSelected ? nil : item.label
                     }
                 }
             }
+            .padding(.vertical, 8)
         }
         .background(Color(uiColor: .secondarySystemBackground))
         .preference(key: Selection.self, value: selection)