Mask Collapsed Folds, Simplify Reasoning in Draw

Author: thecoolwinter

Sources/CodeEditSourceEditor/Extensions/NSColor+LightDark.swift

@@ -0,0 +1,23 @@
+//
+//  NSColor+LightDark.swift
+//  CodeEditSourceEditor
+//
+//  Created by Khan Winter on 6/4/25.
+//
+
+import AppKit
+
+extension NSColor {
+    convenience init(light: NSColor, dark: NSColor) {
+        self.init(name: nil) { appearance in
+            return switch appearance.name {
+            case .aqua:
+                light
+            case .darkAqua:
+                dark
+            default:
+                NSColor()
+            }
+        }
+    }
+}

Sources/CodeEditSourceEditor/Extensions/NSRect+Transform.swift

@@ -0,0 +1,19 @@
+//
+//  NSRect+Transform.swift
+//  CodeEditSourceEditor
+//
+//  Created by Khan Winter on 6/4/25.
+//
+
+import AppKit
+
+extension NSRect {
+    func transform(x: CGFloat = 0, y: CGFloat = 0, width: CGFloat = 0, height: CGFloat = 0) -> NSRect {
+        NSRect(
+            x: self.origin.x + x,
+            y: self.origin.y + y,
+            width: self.width + width,
+            height: self.height + height
+        )
+    }
+}

Sources/CodeEditSourceEditor/LineFolding/View/FoldingRibbonView+Draw.swift

@@ -19,21 +19,22 @@ extension FoldingRibbonView {
 
     override func draw(_ dirtyRect: NSRect) {
         guard let context = NSGraphicsContext.current?.cgContext,
-              let layoutManager = model?.controller?.textView.layoutManager else {
+              let layoutManager = model?.controller?.textView.layoutManager,
+              // Find the visible lines in the rect AppKit is asking us to draw.
+              let rangeStart = layoutManager.textLineForPosition(dirtyRect.minY),
+              let rangeEnd = layoutManager.textLineForPosition(dirtyRect.maxY) else {
             return
         }
 
         context.saveGState()
         context.clip(to: dirtyRect)
 
-        // Find the visible lines in the rect AppKit is asking us to draw.
-        guard let rangeStart = layoutManager.textLineForPosition(dirtyRect.minY),
-              let rangeEnd = layoutManager.textLineForPosition(dirtyRect.maxY) else {
-            return
-        }
-        let textRange = rangeStart.range.location..<rangeEnd.range.upperBound
-        let folds = getDrawingFolds(forTextRange: textRange, layoutManager: layoutManager)
+        let folds = getDrawingFolds(
+            forTextRange: rangeStart.range.location..<rangeEnd.range.upperBound,
+            layoutManager: layoutManager
+        )
         let foldCaps = FoldCapInfo(folds)
+
         for fold in folds.filter({ !$0.fold.isCollapsed }) {
             drawFoldMarker(
                 fold,
@@ -101,14 +102,15 @@ extension FoldingRibbonView {
         }
     }
 
+    // MARK: - Draw Fold Marker
+
     /// Draw a single fold marker for a fold.
     ///
     /// Ensure the correct fill color is set on the drawing context before calling.
     ///
     /// - Parameters:
     ///   - foldInfo: The fold to draw.
-    ///   - markerContext: The context in which the fold is being drawn, including the depth and if a line is
-    ///                    being hovered.
+    ///   - foldCaps:
     ///   - context: The drawing context to use.
     ///   - layoutManager: A layout manager used to retrieve position information for lines.
     private func drawFoldMarker(
@@ -119,21 +121,27 @@ extension FoldingRibbonView {
     ) {
         let minYPosition = foldInfo.startLine.yPos
         let maxYPosition = foldInfo.endLine.yPos + foldInfo.endLine.height
+        let foldRect = NSRect(x: 0, y: minYPosition + 1, width: 7, height: maxYPosition - minYPosition - 2)
 
         if foldInfo.fold.isCollapsed {
-            drawCollapsedFold(minYPosition: minYPosition, maxYPosition: maxYPosition, in: context)
-        } else if let hoveringFold, hoveringFold.isHoveringEqual(foldInfo.fold) {
-            drawHoveredFold(
+            drawCollapsedFold(
+                foldInfo: foldInfo,
                 minYPosition: minYPosition,
                 maxYPosition: maxYPosition,
                 in: context
             )
+        } else if hoveringFold?.isHoveringEqual(foldInfo.fold) == true {
+            drawHoveredFold(
+                foldInfo: foldInfo,
+                foldCaps: foldCaps,
+                foldRect: foldRect,
+                in: context
+            )
         } else {
             drawNestedFold(
                 foldInfo: foldInfo,
                 foldCaps: foldCaps,
-                minYPosition: minYPosition,
-                maxYPosition: maxYPosition,
+                foldRect: foldCaps.adjustFoldRect(using: foldInfo, rect: foldRect),
                 in: context
             )
         }
@@ -142,13 +150,14 @@ extension FoldingRibbonView {
     // MARK: - Collapsed Fold
 
     private func drawCollapsedFold(
+        foldInfo: DrawingFoldInfo,
         minYPosition: CGFloat,
         maxYPosition: CGFloat,
         in context: CGContext
     ) {
         context.saveGState()
 
-        let fillRect = CGRect(x: 0, y: minYPosition, width: Self.width, height: maxYPosition - minYPosition)
+        let fillRect = CGRect(x: 0, y: minYPosition + 1.0, width: Self.width, height: maxYPosition - minYPosition - 2.0)
 
         let height = 5.0
         let minX = 2.0
@@ -162,6 +171,11 @@ extension FoldingRibbonView {
         chevron.addLine(to: CGPoint(x: maxX, y: centerY))
         chevron.addLine(to: CGPoint(x: minX, y: maxY))
 
+        if let hoveringFoldMask, hoveringFoldMask.intersects(CGPath(rect: fillRect, transform: .none)) {
+            context.addPath(hoveringFoldMask)
+            context.clip()
+        }
+
         context.setStrokeColor(foldedIndicatorChevronColor)
         context.setLineCap(.round)
         context.setLineJoin(.round)
@@ -178,22 +192,35 @@ extension FoldingRibbonView {
     // MARK: - Hovered Fold
 
     private func drawHoveredFold(
-        minYPosition: CGFloat,
-        maxYPosition: CGFloat,
+        foldInfo: DrawingFoldInfo,
+        foldCaps: FoldCapInfo,
+        foldRect: NSRect,
         in context: CGContext
     ) {
         context.saveGState()
-        let plainRect = NSRect(x: -2, y: minYPosition, width: 11.0, height: maxYPosition - minYPosition)
-        let roundedRect = NSBezierPath(roundedRect: plainRect, xRadius: 11.0 / 2, yRadius: 11.0 / 2)
+        let plainRect = foldRect.transform(x: -2.0, y: -1.0, width: 4.0, height: 2.0)
+        let roundedRect = NSBezierPath(
+            roundedRect: plainRect,
+            xRadius: plainRect.width / 2,
+            yRadius: plainRect.width / 2
+        )
 
         context.setFillColor(hoverFillColor.copy(alpha: hoverAnimationProgress) ?? hoverFillColor)
         context.setStrokeColor(hoverBorderColor.copy(alpha: hoverAnimationProgress) ?? hoverBorderColor)
         context.addPath(roundedRect.cgPathFallback)
         context.drawPath(using: .fillStroke)
 
-        // Add the little arrows
-        drawChevron(in: context, yPosition: minYPosition + 8, pointingUp: false)
-        drawChevron(in: context, yPosition: maxYPosition - 8, pointingUp: true)
+        // Add the little arrows if we're not hovering right on a collapsed guy
+        if foldCaps.hoveredFoldShouldDrawTopChevron(foldInfo) {
+            drawChevron(in: context, yPosition: plainRect.minY + 8, pointingUp: false)
+        }
+        if foldCaps.hoveredFoldShouldDrawBottomChevron(foldInfo) {
+            drawChevron(in: context, yPosition: plainRect.maxY - 8, pointingUp: true)
+        }
+
+        let plainMaskRect = foldRect.transform(y: 1.0, height: -2.0)
+        let roundedMaskRect = NSBezierPath(roundedRect: plainMaskRect, xRadius: Self.width / 2, yRadius: Self.width / 2)
+        hoveringFoldMask = roundedMaskRect.cgPathFallback
 
         context.restoreGState()
     }
@@ -207,7 +234,11 @@ extension FoldingRibbonView {
         let minX = center - (chevronSize.width / 2)
         let maxX = center + (chevronSize.width / 2)
 
-        let startY = pointingUp ? yPosition + chevronSize.height : yPosition - chevronSize.height
+        let startY = if pointingUp {
+            yPosition + chevronSize.height
+        } else {
+            yPosition - chevronSize.height
+        }
 
         context.setStrokeColor(NSColor.secondaryLabelColor.withAlphaComponent(hoverAnimationProgress).cgColor)
         context.setLineCap(.round)
@@ -228,21 +259,15 @@ extension FoldingRibbonView {
     private func drawNestedFold(
         foldInfo: DrawingFoldInfo,
         foldCaps: FoldCapInfo,
-        minYPosition: CGFloat,
-        maxYPosition: CGFloat,
+        foldRect: NSRect,
         in context: CGContext
     ) {
         context.saveGState()
-        let plainRect = foldCaps.adjustFoldRect(
-            using: foldInfo,
-            rect: NSRect(x: 0, y: minYPosition + 1, width: 7, height: maxYPosition - minYPosition - 2)
-        )
-        let radius = plainRect.width / 2.0
         let roundedRect = NSBezierPath(
-            roundingRect: plainRect,
+            roundingRect: foldRect,
             capTop: foldCaps.foldNeedsTopCap(foldInfo),
             capBottom: foldCaps.foldNeedsBottomCap(foldInfo),
-            cornerRadius: radius
+            cornerRadius: foldRect.width / 2.0
         )
 
         context.setFillColor(markerColor)
@@ -254,8 +279,8 @@ extension FoldingRibbonView {
             drawOutline(
                 foldInfo: foldInfo,
                 foldCaps: foldCaps,
+                foldRect: foldRect,
                 originalPath: roundedRect.cgPathFallback,
-                yPosition: minYPosition...maxYPosition,
                 in: context
             )
         }
@@ -277,42 +302,26 @@ extension FoldingRibbonView {
     private func drawOutline(
         foldInfo: DrawingFoldInfo,
         foldCaps: FoldCapInfo,
+        foldRect: NSRect,
         originalPath: CGPath,
-        yPosition: ClosedRange<CGFloat>,
         in context: CGContext
     ) {
         context.saveGState()
 
-        let plainRect = foldCaps.adjustFoldRect(
-            using: foldInfo,
-            rect: NSRect(
-                x: -0.5,
-                y: yPosition.lowerBound,
-                width: frame.width + 1.0,
-                height: yPosition.upperBound - yPosition.lowerBound
-            )
-        )
-        let radius = plainRect.width / 2.0
+        let plainRect = foldRect.transform(x: -1.0, y: -1.0, width: 2.0, height: 2.0)
         let roundedRect = NSBezierPath(
             roundingRect: plainRect,
             capTop: foldCaps.foldNeedsTopCap(foldInfo),
             capBottom: foldCaps.foldNeedsBottomCap(foldInfo),
-            cornerRadius: radius
+            cornerRadius: plainRect.width / 2.0
         )
-        roundedRect.transform(using: .init(translationByX: -0.5, byY: 0.0))
+        roundedRect.transform(using: .init(translationByX: -1.0, byY: 0.0))
 
         let combined = CGMutablePath()
         combined.addPath(roundedRect.cgPathFallback)
         combined.addPath(originalPath)
 
-        context.clip(
-            to: CGRect(
-                x: 0,
-                y: yPosition.lowerBound,
-                width: 7,
-                height: yPosition.upperBound - yPosition.lowerBound
-            )
-        )
+        context.clip(to: foldRect.transform(y: -1.0, height: 2.0))
         context.addPath(combined)
         context.setFillColor(markerBorderColor)
         context.drawPath(using: .eoFill)

Sources/CodeEditSourceEditor/LineFolding/View/FoldingRibbonView+FoldCapInfo.swift

@@ -9,22 +9,50 @@ import AppKit
 
 extension FoldingRibbonView {
     /// A helper type that determines if a fold should be drawn with a cap on the top or bottom if
-    /// there's an adjacent fold on the same text line. It also provides a helper method
+    /// there's an adjacent fold on the same text line. It also provides a helper method to adjust fold rects using
+    /// the cap information.
     struct FoldCapInfo {
-        let startIndices: Set<Int>
-        let endIndices: Set<Int>
+        private let startIndices: Set<Int>
+        private let endIndices: Set<Int>
+        private let collapsedStartIndices: Set<Int>
+        private let collapsedEndIndices: Set<Int>
 
         init(_ folds: [DrawingFoldInfo]) {
-            self.startIndices = folds.reduce(into: Set<Int>(), { $0.insert($1.startLine.index) })
-            self.endIndices = folds.reduce(into: Set<Int>(), { $0.insert($1.endLine.index) })
+            var startIndices = Set<Int>()
+            var endIndices = Set<Int>()
+            var collapsedStartIndices = Set<Int>()
+            var collapsedEndIndices = Set<Int>()
+
+            for fold in folds {
+                if fold.fold.isCollapsed {
+                    collapsedStartIndices.insert(fold.startLine.index)
+                    collapsedEndIndices.insert(fold.endLine.index)
+                } else {
+                    startIndices.insert(fold.startLine.index)
+                    endIndices.insert(fold.endLine.index)
+                }
+            }
+
+            self.startIndices = startIndices
+            self.endIndices = endIndices
+            self.collapsedStartIndices = collapsedStartIndices
+            self.collapsedEndIndices = collapsedEndIndices
         }
 
         func foldNeedsTopCap(_ fold: DrawingFoldInfo) -> Bool {
-            endIndices.contains(fold.startLine.index)
+            endIndices.contains(fold.startLine.index) || collapsedEndIndices.contains(fold.startLine.index)
         }
 
         func foldNeedsBottomCap(_ fold: DrawingFoldInfo) -> Bool {
-            startIndices.contains(fold.endLine.index)
+            startIndices.contains(fold.endLine.index) || collapsedStartIndices.contains(fold.endLine.index)
+        }
+
+        func hoveredFoldShouldDrawTopChevron(_ fold: DrawingFoldInfo) -> Bool {
+            !collapsedEndIndices.contains(fold.startLine.index)
+        }
+
+        func hoveredFoldShouldDrawBottomChevron(_ fold: DrawingFoldInfo) -> Bool {
+            !collapsedStartIndices.contains(fold.endLine.index)
         }
 
         func adjustFoldRect(
@@ -33,13 +61,17 @@ extension FoldingRibbonView {
         ) -> NSRect {
             let capTop = foldNeedsTopCap(fold)
             let capBottom = foldNeedsBottomCap(fold)
-            let yDelta = capTop ? fold.startLine.height / 2.0 : 0.0
+            let yDelta: CGFloat = if capTop && !collapsedEndIndices.contains(fold.startLine.index) {
+                fold.startLine.height / 2.0
+            } else {
+                0.0
+            }
 
             var heightDelta: CGFloat = 0.0
-            if capTop {
+            if capTop && !collapsedEndIndices.contains(fold.startLine.index) {
                 heightDelta -= fold.startLine.height / 2.0
             }
-            if capBottom {
+            if capBottom && !collapsedStartIndices.contains(fold.endLine.index) {
                 heightDelta -= fold.endLine.height / 2.0
             }