Correct Gutter Padding With Transparency, Dark Mode

Author: thecoolwinter

Package.resolved

@@ -57,6 +57,10 @@ public class GutterView: NSView {
     @Invalidating(.display)
     var backgroundEdgeInsets: EdgeInsets = EdgeInsets(leading: 0, trailing: 8)
 
+    /// The leading padding for the folding ribbon from the line numbers.
+    @Invalidating(.display)
+    var foldingRibbonPadding: CGFloat = 4
+
     @Invalidating(.display)
     var backgroundColor: NSColor? = NSColor.controlBackgroundColor
 
@@ -101,7 +105,11 @@ public class GutterView: NSView {
 
     /// Syntax helper for determining the required space for the folding ribbon.
     private var foldingRibbonWidth: CGFloat {
-        if foldingRibbon.isHidden { 0.0 } else { FoldingRibbonView.width }
+        if foldingRibbon.isHidden {
+            0.0
+        } else {
+            FoldingRibbonView.width + foldingRibbonPadding
+        }
     }
 
     /// The gutter's y positions start at the top of the document and increase as it moves down the screen.
@@ -117,7 +125,7 @@ public class GutterView: NSView {
         set {
             super.frame = newValue
             foldingRibbon.frame = NSRect(
-                x: newValue.width - edgeInsets.trailing - foldingRibbonWidth,
+                x: newValue.width - edgeInsets.trailing - foldingRibbonWidth + foldingRibbonPadding,
                 y: 0.0,
                 width: foldingRibbonWidth,
                 height: newValue.height
@@ -138,7 +146,7 @@ public class GutterView: NSView {
         self.textView = textView
         self.delegate = delegate
 
-        foldingRibbon = FoldingRibbonView(textView: textView, levelProvider: nil)
+        foldingRibbon = FoldingRibbonView(textView: textView, foldProvider: nil)
 
         super.init(frame: .zero)
         clipsToBounds = true
@@ -196,7 +204,7 @@ public class GutterView: NSView {
     private func drawBackground(_ context: CGContext, dirtyRect: NSRect) {
         guard let backgroundColor else { return }
         let minX = max(backgroundEdgeInsets.leading, dirtyRect.minX)
-        let maxX = min(frame.width - backgroundEdgeInsets.trailing, dirtyRect.maxX)
+        let maxX = min(frame.width - backgroundEdgeInsets.trailing - foldingRibbonWidth, dirtyRect.maxX)
         let width = maxX - minX
 
         context.saveGState()

Sources/CodeEditSourceEditor/Gutter/GutterView.swift

@@ -9,6 +9,47 @@ import Foundation
 import AppKit
 import CodeEditTextView
 
+final class IndentationLineFoldProvider: LineFoldProvider {
+    func foldLevelAtLine(_ lineNumber: Int, layoutManager: TextLayoutManager, textStorage: NSTextStorage) -> Int? {
+        guard let linePosition = layoutManager.textLineForIndex(lineNumber),
+              let indentLevel = indentLevelForPosition(linePosition, textStorage: textStorage) else {
+            return nil
+        }
+
+        //        if let precedingLinePosition = layoutManager.textLineForIndex(lineNumber - 1),
+        //           let precedingIndentLevel = indentLevelForPosition(precedingLinePosition, textStorage: textStorage) {
+        //            if precedingIndentLevel > indentLevel {
+        //                return precedingIndentLevel
+        //            }
+        //        }
+        //
+        //        if let nextLinePosition = layoutManager.textLineForIndex(lineNumber + 1),
+        //           let nextIndentLevel = indentLevelForPosition(nextLinePosition, textStorage: textStorage) {
+        //            if nextIndentLevel > indentLevel {
+        //                return nextIndentLevel
+        //            }
+        //        }
+
+        return indentLevel
+    }
+
+    private func indentLevelForPosition(
+        _ position: TextLineStorage<TextLine>.TextLinePosition,
+        textStorage: NSTextStorage
+    ) -> Int? {
+        guard let substring = textStorage.substring(from: position.range) else {
+            return nil
+        }
+
+        return substring.utf16 // Keep NSString units
+            .enumerated()
+            .first(where: { UnicodeScalar($0.element)?.properties.isWhitespace != true })?
+            .offset
+    }
+}
+
+let buh = IndentationLineFoldProvider()
+
 /// Displays the code folding ribbon in the ``GutterView``.
 ///
 /// This view draws its contents
@@ -22,16 +63,37 @@ class FoldingRibbonView: NSView {
     var backgroundColor: NSColor = NSColor.controlBackgroundColor
 
     @Invalidating(.display)
-    var markerColor = CGColor(gray: 0.0, alpha: 0.1)
+    var markerColor = NSColor(name: nil) { appearance in
+        return switch appearance.name {
+        case .aqua:
+            NSColor(deviceWhite: 0.0, alpha: 0.1)
+        case .darkAqua:
+            NSColor(deviceWhite: 1.0, alpha: 0.1)
+        default:
+            NSColor()
+        }
+    }.cgColor
+
+    @Invalidating(.display)
+    var markerBorderColor = NSColor(name: nil) { appearance in
+        return switch appearance.name {
+        case .aqua:
+            NSColor(deviceWhite: 1.0, alpha: 0.4)
+        case .darkAqua:
+            NSColor(deviceWhite: 0.0, alpha: 0.4)
+        default:
+            NSColor()
+        }
+    }.cgColor
 
     override public var isFlipped: Bool {
         true
     }
 
-    init(textView: TextView, levelProvider: LineFoldProvider?) {
+    init(textView: TextView, foldProvider: LineFoldProvider?) {
         self.model = LineFoldingModel(
             textView: textView,
-            levelProvider: levelProvider
+            foldProvider: buh
         )
         super.init(frame: .zero)
         layerContentsRedrawPolicy = .onSetNeedsDisplay
@@ -95,7 +157,7 @@ class FoldingRibbonView: NSView {
         let lineRange = rangeStart.index...rangeEnd.index
 
         context.setFillColor(markerColor)
-        let folds = model.folds(in: lineRange)
+        let folds = model.getFolds(in: lineRange)
         for fold in folds {
             drawFoldMarker(
                 fold,
@@ -107,7 +169,7 @@ class FoldingRibbonView: NSView {
 
         context.restoreGState()
     }
-    
+
     /// Draw a single fold marker for a fold.
     ///
     /// Ensure the correct fill color is set on the drawing context before calling.
@@ -158,7 +220,7 @@ class FoldingRibbonView: NSView {
             drawFoldMarker(subFold, markerContext: markerContext.increment(), in: context, using: layoutManager)
         }
     }
-    
+
     /// Draws a rounded outline for a rectangle, creating the small, light, outline around each fold indicator.
     ///
     /// This function does not change fill colors for the given context.
@@ -185,7 +247,7 @@ class FoldingRibbonView: NSView {
 
         context.clip(to: CGRect(x: 0, y: minYPosition, width: 7, height: maxYPosition - minYPosition))
         context.addPath(combined)
-        context.setFillColor(CGColor(gray: 1.0, alpha: 0.4))
+        context.setFillColor(markerBorderColor)
         context.drawPath(using: .eoFill)
 
         context.restoreGState()

Sources/CodeEditSourceEditor/Gutter/LineFolding/FoldingRibbonView.swift

@@ -22,35 +22,40 @@ class LineFoldingModel: NSObject, NSTextStorageDelegate {
     /// and ``FoldRange/subFolds``.
     private var foldCache: [FoldRange] = []
 
-    weak var levelProvider: LineFoldProvider?
+    weak var foldProvider: LineFoldProvider?
     weak var textView: TextView?
 
-    init(textView: TextView, levelProvider: LineFoldProvider?) {
+    init(textView: TextView, foldProvider: LineFoldProvider?) {
         self.textView = textView
-        self.levelProvider = levelProvider
+        self.foldProvider = foldProvider
         super.init()
         textView.addStorageDelegate(self)
         buildFoldsForDocument()
     }
 
-    func folds(in lineRange: ClosedRange<Int>) -> [FoldRange] {
+    func getFolds(in lineRange: ClosedRange<Int>) -> [FoldRange] {
         foldCache.filter({ $0.lineRange.overlaps(lineRange) })
     }
 
+    /// Build out the ``foldCache`` for the entire document.
+    ///
+    /// For each line in the document, find the indentation level using the ``levelProvider``. At each line, if the
+    /// indent increases from the previous line, we start a new fold. If it decreases we end the fold we were in.
     func buildFoldsForDocument() {
-        guard let textView, let levelProvider else { return }
+        guard let textView, let foldProvider else { return }
         foldCache.removeAll(keepingCapacity: true)
 
         var currentFold: FoldRange?
         var currentDepth: Int = 0
         for linePosition in textView.layoutManager.linesInRange(textView.documentRange) {
-            guard let foldDepth = levelProvider.foldLevelAtLine(
+            guard let foldDepth = foldProvider.foldLevelAtLine(
                 linePosition.index,
                 layoutManager: textView.layoutManager,
                 textStorage: textView.textStorage
             ) else {
                 continue
             }
+            print(foldDepth, linePosition.index)
             // Start a new fold
             if foldDepth > currentDepth {
                 let newFold = FoldRange(
@@ -59,7 +64,6 @@ class LineFoldingModel: NSObject, NSTextStorageDelegate {
                     parent: currentFold,
                     subFolds: []
                 )
-
                 if currentDepth == 0 {
                     foldCache.append(newFold)
                 }

Sources/CodeEditSourceEditor/Gutter/LineFolding/LineFoldingModel.swift

@@ -0,0 +1,55 @@
+//
+//  LineFoldingModelTests.swift
+//  CodeEditSourceEditor
+//
+//  Created by Khan Winter on 5/8/25.
+//
+
+import Testing
+import AppKit
+import CodeEditTextView
+@testable import CodeEditSourceEditor
+
+@Suite
+@MainActor
+struct LineFoldingModelTests {
+    /// Makes a fold pattern that increases until halfway through the document then goes back to zero.
+    class HillPatternFoldProvider: LineFoldProvider {
+        func foldLevelAtLine(_ lineNumber: Int, layoutManager: TextLayoutManager, textStorage: NSTextStorage) -> Int? {
+            let halfLineCount = (layoutManager.lineCount / 2) - 1
+
+            return if lineNumber > halfLineCount {
+                layoutManager.lineCount - 2 - lineNumber
+            } else {
+                lineNumber
+            }
+        }
+    }
+
+    let textView: TextView
+    let model: LineFoldingModel
+
+    init() {
+        textView = TextView(string: "A\nB\nC\nD\nE\nF\n")
+        textView.frame = NSRect(x: 0, y: 0, width: 1000, height: 1000)
+        textView.updatedViewport(NSRect(x: 0, y: 0, width: 1000, height: 1000))
+        model = LineFoldingModel(textView: textView, foldProvider: nil)
+    }
+
+    /// A little unintuitive but we only expect two folds with this. Our provider goes 0-1-2-2-1-0, but we don't
+    /// make folds for indent level 0. We also expect folds to start on the lines *before* the indent increases and
+    /// after it decreases, so the fold covers the start/end of the region being folded.
+    @Test
+    func buildFoldsForDocument() throws {
+        let provider = HillPatternFoldProvider()
+        model.foldProvider = provider
+
+        model.buildFoldsForDocument()
+
+        let fold = try #require(model.getFolds(in: 0...5).first)
+        #expect(fold.lineRange == 0...5)
+
+        let innerFold = try #require(fold.subFolds.first)
+        #expect(innerFold.lineRange == 1...4)
+    }
+}

Tests/CodeEditSourceEditorTests/LineFoldingTests/LineFoldingModelTests.swift

@@ -484,12 +484,12 @@ final class TextViewControllerTests: XCTestCase {
         controller.showFoldingRibbon = false
         XCTAssertFalse(controller.gutterView.showFoldingRibbon)
         controller.gutterView.updateWidthIfNeeded() // Would be called on a display pass
-        let noRibbonWidth = controller.gutterView.gutterWidth
+        let noRibbonWidth = controller.gutterView.frame.width
 
         controller.showFoldingRibbon = true
         XCTAssertTrue(controller.gutterView.showFoldingRibbon)
         controller.gutterView.updateWidthIfNeeded() // Would be called on a display pass
-        XCTAssertEqual(controller.gutterView.gutterWidth, noRibbonWidth + 7.0)
+        XCTAssertEqual(controller.gutterView.frame.width, noRibbonWidth + 7.0)
     }
 }