Nicer marker drawing

vade · vade · commit b77e981ecd22 · 2025-07-02T09:04:55.000-04:00
diff --git a/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ContentView.swift b/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ContentView.swift
@@ -33,9 +33,7 @@ struct ContentView: View
         self.fileURL = fileURL
         
         guard let fileURL = fileURL else { return }
-        
-        
-       
+               
         self.document.setupPlayerWithBaseDocumentURL(fileURL)
     }
     
diff --git a/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ItemView.swift b/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ItemView.swift
@@ -13,50 +13,42 @@ import SwiftUI
 struct ItemView : View {
     
     let item:OpenTimelineIO.Item
-    @State var backgroundColor:Color
-    @State var selected:Bool
+    let backgroundColor:Color
+    let selected:Bool
+    
+    private var isGap: Bool {
+        item.isKind(of: Gap.self)
+    }
 
     @Binding var secondsToPixels:Double
     
     var body: some View
     {
-            ZStack {
-                
-                if let _ = item as? Gap
-                {
-                    RoundedRectangle(cornerRadius: 3)
-                        .fill(Color("GapTrackBaseColor")) // Fill the RoundedRectangle with color
-                        .overlay(
-                            RoundedRectangle(cornerRadius: 3)
-                                .stroke(self.selected ? .white : .clear, lineWidth: 1) // Add stroke/outline
-                        )
-                        .frame(width: self.getSafeWidth() - 2)
-                }
-                else
-                {
+        ZStack
+        {
+            let fill:AnyShapeStyle = ( isGap ) ? AnyShapeStyle( Color("GapTrackBaseColor") ) : AnyShapeStyle(self.backgroundColor.gradient)
+            let textGapOpacity:Double = ( isGap ) ? 0.0 : 1.0
+            
+            RoundedRectangle(cornerRadius: 3)
+                .fill(fill, style: FillStyle())
+                .overlay(
                     RoundedRectangle(cornerRadius: 3)
-                        .fill(self.backgroundColor.gradient) // Fill the RoundedRectangle with color
-                        .overlay(
-                            RoundedRectangle(cornerRadius: 3)
-                                .stroke(self.selected ? .white : .clear, lineWidth: 1) // Add stroke/outline
-                        )
+                        .strokeBorder(self.selected ? .orange : .clear, lineWidth: 1) // Add stroke/outline
                         .frame(width: self.getSafeWidth() - 2)
-                    
-                    if self.getSafeWidth() > 40
-                    {
-                        Text(item.name)
-                            .lineLimit(1)
-                            .font(.system(size: 10))
-                            .frame(width: self.getSafeWidth())
-                    }
-                }
-            }
-            .frame(width: self.getSafeWidth(), alignment: .leading )
-            .overlay {
-                self.getMarkerView()
-
-            }
-//            .offset(x:self.getSafePositionX() )//, y:geometry.size.height * 0.5 )
+                )
+                .frame(width: self.getSafeWidth() - 2)
+            
+            Text(item.name)
+                .lineLimit(1)
+                .font(.system(size: 10))
+                .frame(width: self.getSafeWidth())
+                .opacity(self.getSafeWidth() > 40 ? textGapOpacity : 0.0)
+        }
+        .frame(width: self.getSafeWidth(), alignment: .leading )
+        .overlay {
+            // TODO: Get item marker coordinate system working
+//            self.getMarkerView()
+        }
     }
 
     func getSafeRange() -> OpenTimelineIO.TimeRange
diff --git a/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TimeRulerView.swift b/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TimeRulerView.swift
@@ -23,7 +23,6 @@ struct TimeRulerView: View
             let startSeconds = safeRange.startTime.toSeconds()
             let endSeconds = safeRange.endTimeInclusive().toSeconds()
 
-            
             // Draw ticks (including frame-level ticks)
             drawTicks(context: context, startSeconds: startSeconds, endSeconds: endSeconds, secondsToPixels: secondsToPixels, size: size)
             
@@ -38,7 +37,7 @@ struct TimeRulerView: View
     
     func drawMarkers(context: GraphicsContext, startSeconds: Double, endSeconds: Double, secondsToPixels: Double, size: CGSize)
     {
-        let y = 15.0
+        let y = 20.0
         if let tracks = self.timeline.tracks
         {
             let markerRange = tracks.markers.startIndex ..< tracks.markers.endIndex
@@ -85,7 +84,7 @@ struct TimeRulerView: View
                     )
                 }
                 
-                let tickHeight = 20.0
+                let tickHeight = 24.0
 
                 // Draw tick line
                 let tickRect = CGRect(x: x, y: size.height - tickHeight, width: 1, height: tickHeight)
@@ -177,7 +176,7 @@ struct TimeRulerView: View
         }
         
         let playheadPositionX = currentTime.toSeconds() * secondsToPixels
-        let playheadRect = CGRect(x: playheadPositionX, y: 20, width: 1, height: size.height-20)
+        let playheadRect = CGRect(x: playheadPositionX, y: 22, width: 1, height: size.height - 22)
 //        context.fill(Path(playheadRect), with: .color(.orange))
         
         if #available(macOS 14.0, *)
diff --git a/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TimelineView.swift b/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TimelineView.swift
@@ -32,14 +32,17 @@ struct TimelineView : View {
             {
                 self.timelineView()
                     .allowsHitTesting(self.hitTestEnabled)
-                    .drawingGroup(opaque: true)
+//                    .drawingGroup(opaque: true)
 
             }
             .onScrollPhaseChange({ oldPhase, newPhase, context in
                 guard oldPhase != newPhase else { return }
                 
                 self.hitTestEnabled = !newPhase.isScrolling
             })
+            .frame(idealHeight: ( CGFloat((timeline.videoTracks.count + timeline.audioTracks.count)) * TrackView.trackHeight) + 100 )
+    //        .frame(maxHeight: CGFloat((videoTracks.count + audioTracks.count)) * 500)
+
         }
         else
         {
@@ -55,17 +58,12 @@ struct TimelineView : View {
     {
         let videoTracks = timeline.videoTracks
         let audioTracks = timeline.audioTracks
-        
 
         VStack(alignment:.leading, spacing: 3)
         {
-                TimeRulerView(timeline: self.timeline, secondsToPixels: self.$secondsToPixels, currentTime: self.$currentTime )
-                    .frame(height: 40)
+            TimeRulerView(timeline: self.timeline, secondsToPixels: self.$secondsToPixels, currentTime: self.$currentTime )
+                    .frame(height: 50)
                     .offset(x:100)
-//                    .overlay(
-//                            self.getMarkerView( )
-//                    )
-            //
             
             ForEach(0..<videoTracks.count, id: \.self) { index in
                 
@@ -78,8 +76,10 @@ struct TimelineView : View {
                           selectedItem: self.$selectedItem )
             }
             
+            Spacer()
             Divider()
-            
+            Spacer()
+
             ForEach(0..<audioTracks.count, id: \.self) { index in
                 
                 let track = audioTracks[index]
@@ -90,23 +90,6 @@ struct TimelineView : View {
                           selectedItem: self.$selectedItem )
             }
         }
-        .frame(height: CGFloat((videoTracks.count + audioTracks.count)) * 25 + 50 )
-        .frame(maxHeight: CGFloat((videoTracks.count + audioTracks.count)) * 500)
 
     }
-    
-//    @ViewBuilder func getMarkerView() -> some View
-//    {
-//        HStack(alignment: .top, spacing: 0)
-//        {
-//            let markerRange = (self.timeline.tracks?.markers.startIndex ?? 0) ..< (self.timeline.tracks?.markers.endIndex ?? 0)
-//            ForEach(markerRange, id:\.self) { markerIndex in
-//                MarkerView(marker: self.timeline.tracks!.markers[markerIndex],
-//                           secondsToPixels: self.$secondsToPixels)
-//            }
-//        }
-////        .frame(width: self.getSafeWidth(), alignment: .leading )
-//        .frame(alignment: .leading)
-//        .border(Color.purple, width: 2)
-//    }
 }
diff --git a/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TrackView.swift b/OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TrackView.swift
@@ -14,8 +14,10 @@ import SwiftUI
 
 struct TrackView : View
 {
+    static let trackHeight:CGFloat = 35
+    
     let track:OpenTimelineIO.Track
-    @State var backgroundColor:Color
+    let backgroundColor:Color
     @Binding var secondsToPixels:Double
     @Binding var selectedItem:Item?
 
@@ -27,14 +29,13 @@ struct TrackView : View
         {
             Section(header: self.headerView() )
            {
-
                 ForEach(0..<items.count, id: \.self) { index in
                     let item = items[index]
 
                     ItemView(item: item,
                              backgroundColor: self.backgroundColor,
 //                             backgroundColor: [Color.red, Color.blue, Color.green, Color.yellow, Color.purple].randomElement()!,
-                             selected: item.isEquivalent(to: self.selectedItem ?? Item() ),
+                             selected: item == self.selectedItem,
                              secondsToPixels: self.$secondsToPixels)
                     
                     .onTapGesture {
@@ -44,7 +45,7 @@ struct TrackView : View
                 }
             }
         }
-        .frame(width: self.getSafeWidth(), alignment: .leading )
+        .frame(width: self.getSafeWidth(), height:Self.trackHeight, alignment: .leading )
         .overlay {
             self.getMarkerView()
         }
@@ -64,7 +65,7 @@ struct TrackView : View
                 .font(.system(size: 10))
                 .bold()
         }
-        .frame(width: 100)
+        .frame(width: 100, height:Self.trackHeight)
         .onTapGesture {
             self.selectedItem = track
             print("selected Item")

Original file line number	Diff line number	Diff line change
`@@ -33,9 +33,7 @@ struct ContentView: View`
`33`	`33`	`self.fileURL = fileURL`
`34`	`34`
`35`	`35`	`guard let fileURL = fileURL else { return }`
`36`		`-`
`37`		`-`
`38`		`-`
	`36`	`+`
`39`	`37`	`self.document.setupPlayerWithBaseDocumentURL(fileURL)`
`40`	`38`	`}`
`41`	`39`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,6 @@ struct TimeRulerView: View`
`23`	`23`	`let startSeconds = safeRange.startTime.toSeconds()`
`24`	`24`	`let endSeconds = safeRange.endTimeInclusive().toSeconds()`
`25`	`25`
`26`		`-`
`27`	`26`	`// Draw ticks (including frame-level ticks)`
`28`	`27`	`drawTicks(context: context, startSeconds: startSeconds, endSeconds: endSeconds, secondsToPixels: secondsToPixels, size: size)`
`29`	`28`
`@@ -38,7 +37,7 @@ struct TimeRulerView: View`
`38`	`37`
`39`	`38`	`func drawMarkers(context: GraphicsContext, startSeconds: Double, endSeconds: Double, secondsToPixels: Double, size: CGSize)`
`40`	`39`	`{`
`41`		`- let y = 15.0`
	`40`	`+ let y = 20.0`
`42`	`41`	`if let tracks = self.timeline.tracks`
`43`	`42`	`{`
`44`	`43`	`let markerRange = tracks.markers.startIndex ..< tracks.markers.endIndex`
`@@ -85,7 +84,7 @@ struct TimeRulerView: View`
`85`	`84`	`)`
`86`	`85`	`}`
`87`	`86`
`88`		`- let tickHeight = 20.0`
	`87`	`+ let tickHeight = 24.0`
`89`	`88`
`90`	`89`	`// Draw tick line`
`91`	`90`	`let tickRect = CGRect(x: x, y: size.height - tickHeight, width: 1, height: tickHeight)`
`@@ -177,7 +176,7 @@ struct TimeRulerView: View`
`177`	`176`	`}`
`178`	`177`
`179`	`178`	`let playheadPositionX = currentTime.toSeconds() * secondsToPixels`
`180`		`- let playheadRect = CGRect(x: playheadPositionX, y: 20, width: 1, height: size.height-20)`
	`179`	`+ let playheadRect = CGRect(x: playheadPositionX, y: 22, width: 1, height: size.height - 22)`
`181`	`180`	`// context.fill(Path(playheadRect), with: .color(.orange))`
`182`	`181`
`183`	`182`	`if #available(macOS 14.0, *)`
Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,10 @@ import SwiftUI`
`14`	`14`
`15`	`15`	`struct TrackView : View`
`16`	`16`	`{`
	`17`	`+ static let trackHeight:CGFloat = 35`
	`18`	`+`
`17`	`19`	`let track:OpenTimelineIO.Track`
`18`		`- @State var backgroundColor:Color`
	`20`	`+ let backgroundColor:Color`
`19`	`21`	`@Binding var secondsToPixels:Double`
`20`	`22`	`@Binding var selectedItem:Item?`
`21`	`23`
`@@ -27,14 +29,13 @@ struct TrackView : View`
`27`	`29`	`{`
`28`	`30`	`Section(header: self.headerView() )`
`29`	`31`	`{`
`30`		`-`
`31`	`32`	`ForEach(0..<items.count, id: \.self) { index in`
`32`	`33`	`let item = items[index]`
`33`	`34`
`34`	`35`	`ItemView(item: item,`
`35`	`36`	`backgroundColor: self.backgroundColor,`
`36`	`37`	`// backgroundColor: [Color.red, Color.blue, Color.green, Color.yellow, Color.purple].randomElement()!,`
`37`		`- selected: item.isEquivalent(to: self.selectedItem ?? Item() ),`
	`38`	`+ selected: item == self.selectedItem,`
`38`	`39`	`secondsToPixels: self.$secondsToPixels)`
`39`	`40`
`40`	`41`	`.onTapGesture {`
`@@ -44,7 +45,7 @@ struct TrackView : View`
`44`	`45`	`}`
`45`	`46`	`}`
`46`	`47`	`}`
`47`		`- .frame(width: self.getSafeWidth(), alignment: .leading )`
	`48`	`+ .frame(width: self.getSafeWidth(), height:Self.trackHeight, alignment: .leading )`
`48`	`49`	`.overlay {`
`49`	`50`	`self.getMarkerView()`
`50`	`51`	`}`
`@@ -64,7 +65,7 @@ struct TrackView : View`
`64`	`65`	`.font(.system(size: 10))`
`65`	`66`	`.bold()`
`66`	`67`	`}`
`67`		`- .frame(width: 100)`
	`68`	`+ .frame(width: 100, height:Self.trackHeight)`
`68`	`69`	`.onTapGesture {`
`69`	`70`	`self.selectedItem = track`
`70`	`71`	`print("selected Item")`