git.lucas.co / cce-designer
graphic design tool
git clone https://git.lucas.co/cce-designer.git

commitd5545c1722ae2681a0077be89b16d355154132b7
parentde3a03cdbe
authorLucas Galante <[email protected]>
date2026-07-31 14:36
feat: playbar tick marks

Frame ticks on the 1-2-5 ladder, grown until minors sit >=6px apart;
every 5th step is a major — taller, brighter, and labeled with its
frame number when the pane has room below the track.

Co-Authored-By: Claude Fable 5 <[email protected]>

 src/playbar.rs | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/playbar.rs b/src/playbar.rs
index c59d5d0..73a63ef 100644
--- a/src/playbar.rs
+++ b/src/playbar.rs
@@ -171,6 +171,42 @@ impl Paint for Playbar {
             ctx.recess(track, (tr, tr, tr, tr), recess_t);
         }
 
+        // Tick marks: frame steps on the 1-2-5 ladder, grown until minors sit
+        // >=6px apart. Every 5th step is a major — taller, brighter, and
+        // labeled with its frame number when the pane has room below the
+        // track and majors aren't crowded.
+        let range = (self.end_frame - self.start_frame).max(1.0);
+        let ppf = track.width / range;
+        let mut step = 1.0f32;
+        let cycle = [2.0f32, 2.5, 2.0];
+        let mut ci = 0;
+        while step * ppf < 6.0 {
+            step *= cycle[ci % 3];
+            ci += 1;
+        }
+        let major = step * 5.0;
+        let minor_col = [0.82, 0.84, 0.90, 0.30];
+        let major_col = [0.87, 0.89, 0.94, 0.55];
+        let below = rect.y + rect.height - (track.y + track.height);
+        let label_room = below >= 14.0 && major * ppf >= 34.0;
+        let mut f = (self.start_frame / step).ceil() * step;
+        while f <= self.end_frame + 0.001 {
+            let x = track.x + ((f - self.start_frame) / range) * track.width;
+            let is_major = (f / major - (f / major).round()).abs() < 1e-3;
+            if is_major {
+                ctx.quad(Rect { x: x - 0.5, y: track.y, width: 1.0, height: track.height + 3.0 }, major_col);
+                if label_room && x + 24.0 <= track.x + track.width {
+                    ctx.text(format!("{}", f.round() as i64), x + 3.0, track.y + track.height + 2.0, 9.0, [0x8a, 0x8a, 0x96]);
+                }
+            } else {
+                ctx.quad(
+                    Rect { x: x - 0.5, y: track.y + track.height * 0.45, width: 1.0, height: track.height * 0.55 },
+                    minor_col,
+                );
+            }
+            f += step;
+        }
+
         // Playhead: a full-height line over the track, in the DE accent.
         let px = track.x + self.t() * track.width;
         ctx.quad(Rect { x: px - 1.0, y: track.y - 3.0, width: 2.0, height: track.height + 6.0 }, accent);