From 2a37fed62be9c3f6251b46a75dcf9d42358bbf99 Mon Sep 17 00:00:00 2001
From: Lee-Orr <lee-orr@users.noreply.github.com>
Date: Wed, 27 Mar 2024 12:11:50 -0400
Subject: [PATCH] PR fixes: - deliniate top of timeline for allowing click to
 set playhead position & scrubbing - remove impossible to access branch of
 zoom logic - fix comment that wasn't changed

---
 studio-frontend/src/app/anim-timeline.element.scss |  8 ++++++++
 studio-frontend/src/app/anim-timeline.element.ts   | 11 +++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/studio-frontend/src/app/anim-timeline.element.scss b/studio-frontend/src/app/anim-timeline.element.scss
index c866c93..b1831c4 100644
--- a/studio-frontend/src/app/anim-timeline.element.scss
+++ b/studio-frontend/src/app/anim-timeline.element.scss
@@ -31,6 +31,14 @@
 		width: 100%;
 		z-index: 1;
 	}
+
+	.timeline-nav-dragger {
+		grid-row: 1 / span 1;
+		grid-column: 1 / span 1;
+		background: #000;
+		opacity: 0.1;
+		height: 1.5em;
+	}
 }
 
 .hash {
diff --git a/studio-frontend/src/app/anim-timeline.element.ts b/studio-frontend/src/app/anim-timeline.element.ts
index 33fbd18..1b0683f 100644
--- a/studio-frontend/src/app/anim-timeline.element.ts
+++ b/studio-frontend/src/app/anim-timeline.element.ts
@@ -64,7 +64,7 @@ export class AnimTimelineElement extends LitElement {
 	@property({ type: Number }) clipStart = 0;
 	/** The time (in seconds) at the end of the clip */
 	@property({ type: Number }) clipEnd = 5;
-	/** The time (in seconds) at the end of the clip */
+	/** The number of frames per second for this animation clip */
 	@property({ type: Number }) clipFps = 24;
 
 	/** The time (in seconds) of the current play-head position */
@@ -130,8 +130,6 @@ export class AnimTimelineElement extends LitElement {
 			this.zoomTimeline(event.clientX, event.deltaY);
 		} else if (event.deltaX) {
 			this.pan(-event.deltaX);
-		} else if (event.shiftKey && event.deltaY) {
-			this.pan(-event.deltaY);
 		}
 	}
 
@@ -354,15 +352,16 @@ export class AnimTimelineElement extends LitElement {
 					move: this.onMidDrag,
 					end: this.onMidDragEnd,
 				})}
+				tabindex="-1"
+			>
+				<div class="timeline-nav-dragger"
 				${drag({
 					button: 0,
 					start: this.onDragStart,
 					move: this.onDrag,
 					end: this.onDragEnd,
 				})}
-				tabindex="-1"
-				@click=${this.onSetPlayhead}
-			>
+				@click=${this.onSetPlayhead}></div>
 
 				${subdivisions.map(({ seconds, fraction, isMajor, isLabelled}, idx) => {
 					const secondsPercentage = fraction * 100;