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
This commit is contained in:
Lee-Orr
2024-03-27 12:11:50 -04:00
parent 2f8c8f930f
commit 2a37fed62b
2 changed files with 13 additions and 6 deletions
@@ -31,6 +31,14 @@
width: 100%; width: 100%;
z-index: 1; 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 { .hash {
@@ -64,7 +64,7 @@ export class AnimTimelineElement extends LitElement {
@property({ type: Number }) clipStart = 0; @property({ type: Number }) clipStart = 0;
/** The time (in seconds) at the end of the clip */ /** The time (in seconds) at the end of the clip */
@property({ type: Number }) clipEnd = 5; @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; @property({ type: Number }) clipFps = 24;
/** The time (in seconds) of the current play-head position */ /** 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); this.zoomTimeline(event.clientX, event.deltaY);
} else if (event.deltaX) { } else if (event.deltaX) {
this.pan(-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, move: this.onMidDrag,
end: this.onMidDragEnd, end: this.onMidDragEnd,
})} })}
tabindex="-1"
>
<div class="timeline-nav-dragger"
${drag({ ${drag({
button: 0, button: 0,
start: this.onDragStart, start: this.onDragStart,
move: this.onDrag, move: this.onDrag,
end: this.onDragEnd, end: this.onDragEnd,
})} })}
tabindex="-1" @click=${this.onSetPlayhead}></div>
@click=${this.onSetPlayhead}
>
${subdivisions.map(({ seconds, fraction, isMajor, isLabelled}, idx) => { ${subdivisions.map(({ seconds, fraction, isMajor, isLabelled}, idx) => {
const secondsPercentage = fraction * 100; const secondsPercentage = fraction * 100;