Add label next to the GridSize slide, and improve efficiency

Author: hellotaotao

GridGuide/GridGuideApp.swift

@@ -41,13 +41,15 @@ struct GridGuideApp: App {
 
 class AppDelegate: NSObject, NSApplicationDelegate {
     private var statusItem: NSStatusItem!
-    @objc dynamic var gridDensity: Double = 50 {
+    private var valueLabel: NSTextField!
+    @objc dynamic var gridSize: Double = 50 {
         didSet {        
             NotificationCenter.default.post(
                 name: NSNotification.Name("gridDensityChanged"), 
                 object: nil,
-                userInfo: ["value": gridDensity]
+                userInfo: ["value": gridSize]
             )
+            valueLabel?.stringValue = "\(Int(gridSize))"
         }
     }
 
@@ -65,16 +67,28 @@ class AppDelegate: NSObject, NSApplicationDelegate {
         }
         let menu = NSMenu()
 
-        // Add slider item
-        let sliderItem = NSMenuItem()
-        let slider = NSSlider(value: gridDensity, 
-                            minValue: 20, 
+        // Add slider item with label
+        let menuItem = NSMenuItem()
+        let containerView = NSView(frame: NSRect(x: 0, y: 0, width: 200, height: 40))
+        
+        let slider = NSSlider(value: gridSize, 
+                            minValue: 40, 
                             maxValue: 100, 
                             target: self, 
                             action: #selector(sliderChanged(_:)))
-        slider.frame = NSRect(x: 20, y: 0, width: 150, height: 20)
-        sliderItem.view = slider
-        menu.addItem(sliderItem)
+        slider.frame = NSRect(x: 20, y: 10, width: 130, height: 20)
+        
+        valueLabel = NSTextField(frame: NSRect(x: 160, y: 10, width: 30, height: 20))
+        valueLabel.isEditable = false
+        valueLabel.isBordered = false
+        valueLabel.backgroundColor = .clear
+        valueLabel.stringValue = "\(Int(gridSize))"
+        
+        containerView.addSubview(slider)
+        containerView.addSubview(valueLabel)
+        
+        menuItem.view = containerView
+        menu.addItem(menuItem)
 
         menu.addItem(NSMenuItem.separator())
         menu.addItem(NSMenuItem(title: "Quit", action: #selector(quit), keyEquivalent: "q"))
@@ -86,6 +100,6 @@ class AppDelegate: NSObject, NSApplicationDelegate {
     }
 
     @objc func sliderChanged(_ sender: NSSlider) {
-        gridDensity = sender.doubleValue
+        gridSize = round(sender.doubleValue)
     }
 }

GridGuide/GridGuideView.swift

@@ -9,10 +9,18 @@ import SwiftUI
 import AppKit
 
 struct GridGuideView: View {
-    @State private var gridSize: CGFloat = 50
+    @State private var gridSize: Int = 50
+    let screenWidth = NSScreen.main?.visibleFrame.width ?? 1440
+    let screenHeight = NSScreen.main?.visibleFrame.height ?? 900
+
     @State private var numColumns: Int = 30
     @State private var numRows: Int = 30
 
+    init() {
+        _numColumns = State(initialValue: Int(screenWidth) / gridSize)
+        _numRows = State(initialValue: Int(screenHeight) / gridSize)
+    }
+
     var body: some View {
         GeometryReader { proxy in
             VStack(spacing: 0) {
@@ -27,10 +35,9 @@ struct GridGuideView: View {
         }
         .onReceive(NotificationCenter.default.publisher(for: .gridDensityChanged)) { notification in
             if let value = notification.userInfo?["value"] as? Double {
-                self.gridSize = CGFloat(value)
-                self.numColumns = Int(ceil(NSScreen.main?.visibleFrame.width ?? 1440) / value)
-                self.numRows = Int(ceil(NSScreen.main?.visibleFrame.height ?? 900) / value)
-                print("Updated gridSize: \(gridSize), numColumns: \(numColumns), numRows: \(numRows)")
+                self.gridSize = Int(value)
+                self.numColumns = Int(screenWidth / value)
+                self.numRows = Int(screenHeight / value)
             }
         }
         .allowsHitTesting(false)