storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-17 00:13:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

tracks move correctly

Browse Source
This commit is contained in:
Lee-Orr
2024-03-12 13:36:58 -04:00
parent fc3ed85192
commit 23aafc174c
3 changed files with 154 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-frontend/src/app/anim-editor.element.scss
+21 -11
View File
@@ -1,21 +1,27 @@
:host {
display: flex;
display: grid;
border-radius: 8px;
background: #0006;
backdrop-filter: blur(16px);
grid-template-columns: [sidebar-start] min-content [sidebar-end divider-start] 8px [divider-end timeline-start] 1fr [timeline-end];
padding: 8px;
row-gap: 8px;
}
.sidebar, .timeline { padding: 8px; }
.sidebar { padding-inline-end: 0; }
.timeline { padding-inline-start: 0; }
.sidebar {
flex: 0 0 auto;
width: 256px;
display: flex;
flex-direction: column;
gap: 8px;
display: grid;
overflow: hidden;
grid-column: sidebar;
grid-row: 1 / span var(--row-count);
grid-template-rows: subgrid;
}
.timeline {
grid-column: timeline;
grid-row: 1 / span var(--row-count);
grid-template-rows: subgrid;
}
.btn-keyframe {
@@ -58,6 +64,8 @@
}
.divider {
grid-column: divider;
grid-row: 1 / span var(--row-count);
position: relative;
flex: 0 0 8px;
margin: {
@@ -83,6 +91,8 @@
}
}
.timeline {
flex: 1 0 0;
}
.tracklist {
display: grid;
grid-template-columns: subgrid;
grid-row: 2 / span var(--track-count);
}
studio-frontend/src/app/anim-editor.element.ts
+63 -36
View File
@@ -1,7 +1,7 @@
import * as studio from "@storyteller/studio";
import { type CameraKeyframesEvent, type SeekTimeChanged, type UpdateAnimationTargets } from "@storyteller/studio";
import { bind, drag, on } from "@storyteller/framework";
import { LitElement, type PropertyValues, html, unsafeCSS, TemplateResult } from "lit";
import { LitElement, type PropertyValues, html, unsafeCSS, TemplateResult, PropertyValueMap } from "lit";
import { customElement, state } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
@@ -12,6 +12,12 @@ import "./anim-timeline.element";
import styles from "./anim-editor.element.scss?inline";
const TRACK_ICONS : Record<string, string> = {
camera: "video",
transform: "up-down-left-right",
light: "light"
};
@customElement("sts-anim-editor")
export class AnimEditorElement extends LitElement {
static override styles = unsafeCSS(styles);
@@ -19,14 +25,25 @@ export class AnimEditorElement extends LitElement {
@state() sidebarWidth = 256;
@state() timelineStart = 0;
@state() timelineEnd = 5_000;
@state() timelineEnd = 5;
@state() clipStart = 0;
@state() clipEnd = 15_000;
@state() playHead = 0;
@state() playing = false;
@state() keyframes: Record<string, number> = {};
@state() tracks : Record<string, {name?: string, target_type: string }> = {};
@state() track_ordered : string[] = [];
@state() keyframes : Record<string, number[]> = {};
@state() selected_track : string | null = null;
trackCount(): number {
return Object.keys(this.tracks).length;
}
protected override update(changes: PropertyValues<this>): void {
if (changes.has("playHead"))
@@ -42,14 +59,26 @@ export class AnimEditorElement extends LitElement {
this.playing = playing;
}
@on("window:camera-keyframes")
onCameraKeyframeChanges({ detail: keyframes }: CameraKeyframesEvent): void {
this.keyframes = keyframes;
}
@on("window:update-animation-targets")
onUpdateAnimationTargets({detail: { added, removed}}: UpdateAnimationTargets) : void {
let addedKeys = Object.keys(added);
if (addedKeys.length === 0 && removed.length === 0) {
return;
}
console.log("Animation Targets Changed");
let tracks = {...this.tracks};
for (let track_entity of addedKeys) {
let track = added[track_entity];
tracks[track_entity] = track;
}
for (let track_entity of removed) {
delete tracks[track_entity];
}
this.track_ordered = Object.keys(tracks);
this.tracks = tracks;
}
onSidebarResize(event: PointerEvent): void {
@@ -67,26 +96,12 @@ export class AnimEditorElement extends LitElement {
prevKeyframe(): void {
let pos = this.playHead;
const keyframes = Array.from(Object.values(this.keyframes)).sort((a, b) => b - a);
for (let keyframe of keyframes) {
pos = keyframe;
if (keyframe < this.playHead)
break;
}
this.playHead = pos;
}
nextKeyframe(): void {
let pos = this.playHead;
const keyframes = Array.from(Object.values(this.keyframes)).sort((a, b) => a - b);
for (let keyframe of keyframes) {
pos = keyframe;
if (keyframe > this.playHead)
break;
}
this.playHead = pos;
}
@@ -95,6 +110,7 @@ export class AnimEditorElement extends LitElement {
}
togglePlaying(): void {
console.log("toggling play");
if (this.playing) {
studio.pause();
} else {
@@ -102,10 +118,16 @@ export class AnimEditorElement extends LitElement {
}
}
protected override render = (): TemplateResult => html`
protected override render(): TemplateResult {
let track_count = {
'--track-count': `${this.trackCount()}`,
'--row-count': `calc(var(--track-count) + 1)`
};
return html`
<div class="sidebar"
style=${styleMap({
width: `${this.sidebarWidth}px`,
...track_count
})}
>
<sts-toolbar>
@@ -151,26 +173,29 @@ export class AnimEditorElement extends LitElement {
</sts-toolbar-group>
</sts-toolbar>
<div class="tracklist" role="list">
<sts-tree class="track"
role="listitem"
name="Camera"
icon="video"
></sts-tree>
<sts-tree class="track"
role="listitem"
name="Camera Target"
icon="crosshairs"
></sts-tree>
${
this.track_ordered.map((entity) => {
let track = this.tracks[entity];
let name = track.name ?? track.target_type;
let icon = TRACK_ICONS[track.target_type] ?? "minus";
return html!`<sts-tree class="track"
role="listitem"
name=${name}
icon=${icon}
></sts-tree>`;
})
}
</div>
</div>
<div class="divider"
<div class="divider" style=${styleMap(track_count)}
${drag({
move: this.onSidebarResize,
})}
></div>
<sts-anim-timeline class="timeline"
style=${styleMap(track_count)}
.rangeStart=${bind(this, "timelineStart")}
.rangeEnd=${bind(this, "timelineEnd")}
.clipStart=${this.clipStart}
@@ -178,5 +203,7 @@ export class AnimEditorElement extends LitElement {
.playHead=${bind(this, "playHead")}
.keyframes=${bind(this, "keyframes")}
></sts-anim-timeline>
`;
}
`
};
};
studio-frontend/src/app/anim-timeline.element.ts
+70 -71
View File
@@ -59,11 +59,6 @@ export class AnimTimelineElement extends LitElement {
/** The time (in seconds) at the right edge of the timeline view */
@property({ type: Number }) rangeEnd = 5;
/** The time (in seconds) at the beginning of the active clip range */
@property({ type: Number }) clipStart = 0;
/** The time (in seconds) at the end of the active clip range */
@property({ type: Number }) clipEnd = 15;
/** The time (in seconds) of the current play-head position */
@property({ type: Number }) playHead = 0;
/** Keyframe positions (in seconds) */
@@ -86,7 +81,7 @@ export class AnimTimelineElement extends LitElement {
@state() _panning = false;
/** How many seconds are represented by each px of horizontal space. */
pxPerSecond = new Computed(() => (this.rangeEnd - this.rangeStart) / this._renderWidth);
secondsPerPx = new Computed(() => (this.rangeEnd - this.rangeStart) / this._renderWidth);
#resizeObserver: ResizeObserver;
@@ -107,12 +102,13 @@ export class AnimTimelineElement extends LitElement {
}
protected override update(changes: PropertyValues<this>): void {
console.log("Changes: ", changes);
if (
changes.has("rangeStart")
|| changes.has("rangeEnd")
|| changes.has("_renderWidth")
) {
this.pxPerSecond.invalidate();
this.secondsPerPx.invalidate();
}
super.update(changes);
@@ -158,7 +154,7 @@ export class AnimTimelineElement extends LitElement {
// FIXME: When zooming the timeline, the transform origin should be
// centered on the mouse cursor. Currently this does not work as
// intended, always centering on the 00:00 timestamp instead.
const t = ((this._offsetX + origin) * this.pxPerSecond.get()) / currentRange;
const t = ((this._offsetX + origin) * this.secondsPerPx.get()) / currentRange;
console.log(`t: ${t}`);
console.log(`deltaStart: ${-deltaRange * t}`);
console.log(`deltaEnd: ${deltaRange * (1 - t)}`);
@@ -169,22 +165,22 @@ export class AnimTimelineElement extends LitElement {
this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd }));
}
#onDragStart(): void {
onDragStart(): void {
this._panning = true;
}
#onDragEnd(): void {
onDragEnd(): void {
this._panning = false;
}
#onDrag(event: PointerEvent): void {
onDrag(event: PointerEvent): void {
this.#pan(event.movementX);
}
#pan(deltaPx: number): void {
this._offsetX += deltaPx;
const pxPerSecond = this.pxPerSecond.get();
const pxPerSecond = this.secondsPerPx.get();
const rangeStart = this.rangeStart - deltaPx * pxPerSecond;
const rangeEnd = this.rangeEnd - deltaPx * pxPerSecond;
@@ -192,15 +188,18 @@ export class AnimTimelineElement extends LitElement {
this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd }));
}
#onPlayheadDrag(event: PointerEvent): void {
const deltaSeconds = event.movementX * this.pxPerSecond.get();
const updated = this.playHead + deltaSeconds;
onPlayheadDrag(event: PointerEvent): void {
let elementBounds = this.getBoundingClientRect();
let relativeX = event.clientX - elementBounds.left;
let ratioX = Math.max(0, Math.min(relativeX / elementBounds.width, 1));
const seconds = (this.rangeEnd - this.rangeStart) * ratioX + this.rangeStart;
const updated = seconds;
this.dispatchEvent(new CustomEvent("playHead-change", { detail: updated }));
}
#onKeyframeDrag(id: string, event: PointerEvent): void {
const deltaSeconds = event.movementX * this.pxPerSecond.get();
onKeyframeDrag(id: string, event: PointerEvent): void {
const deltaSeconds = event.movementX * this.secondsPerPx.get();
const updated = this.keyframes[id] + deltaSeconds;
studio.updateKeyframe(id, updated);
@@ -223,59 +222,65 @@ export class AnimTimelineElement extends LitElement {
/**
* Format a time value (in seconds) for displaying in the timeline view
*/
#timestamp(seconds: number) {
timestamp(seconds: number) {
const sign = seconds < 0 ? "-" : "";
seconds = Math.abs(seconds);
let s = Math.floor(seconds);
let frac = Math.floor(seconds * 1000 - s * 1000);
if (frac === 1000) {
frac = 0;
s += 1;
}
let m = 0;
if (s >= 60) {
m = Math.floor(s / 60);
s %= 60;
}
let minutes = Math.floor(seconds / 60);
let secondsInMinute = seconds % 60;
let flooredSeconds = Math.floor(secondsInMinute);
let fraction = Math.floor(100 * (secondsInMinute - flooredSeconds));
return html`${
sign
}${
m.toString(10).padStart(2, "0")
minutes.toString(10).padStart(2, "0")
}:${
s.toString(10).padStart(2, "0")
}<!--<span class="frac">.${
frac.toString(10).padEnd(3, "0")
}</span>-->`;
flooredSeconds.toString(10).padStart(2, "0")
}.${
fraction.toString(10).padStart(2, "0")
}`;
}
/**
* Convert a time value (in seconds) to a px offset from the left edge of the view
*/
#secondsToPx(seconds: number): number {
return this._offsetX + seconds * this.pxPerSecond.get();
secondsToPx(seconds: number): number {
return this._offsetX + seconds * this.secondsPerPx.get();
}
protected override render = () => {
const pxPerSecond = this.pxPerSecond.get();
protected override render() {
const {
subdivision: subdivisionScale,
major: majorSubdivisionScale,
} = {
subdivision: 0.5,
major: 1,
};
const scaledStart = this.rangeStart / subdivisionScale;
const scaledEnd = this.rangeEnd / subdivisionScale;
const range = this.rangeEnd - this.rangeStart;
const subdivsCount = Math.floor(this._renderWidth / 64);
const pxPerSubdiv = this._renderWidth / subdivsCount;
const secondsPerSubdiv = pxPerSecond / pxPerSubdiv;
console.log("Scaled Start", scaledStart, "Scaled End", scaledEnd, "Range", range);
let subdivisions : Array<{seconds: number, fraction: number, isMajor: boolean}> = [];
let currentOffset = scaledStart;
let currentOffsetSeconds = this.rangeStart;
console.log("Seconds per Subdiv: ", secondsPerSubdiv);
const subdivs = new Array(subdivsCount + 2).fill(null);
while (currentOffset < scaledEnd) {
const currentSeconds = currentOffsetSeconds;
const isMajor = currentOffsetSeconds % majorSubdivisionScale === 0;
subdivisions.push({ seconds: currentSeconds, fraction: currentSeconds / range, isMajor });
let nextSubdiv = Math.ceil(currentOffset);
if (Math.abs(nextSubdiv - currentOffset) < 0.1) {
nextSubdiv += 1;
}
currentOffset = nextSubdiv;
currentOffsetSeconds = currentOffset * subdivisionScale;
}
const fracPxOffset = this._offsetX % pxPerSubdiv;
let startingIdx = -Math.floor(this._offsetX / pxPerSubdiv);
if (fracPxOffset < 0)
startingIdx -= 2;
else
startingIdx -= 1;
console.log("Subdivisions", subdivisions.length, subdivisions);
return html`
<div
@@ -285,43 +290,37 @@ export class AnimTimelineElement extends LitElement {
})}
${drag({
button: 1,
start: this.#onDragStart,
move: this.#onDrag,
end: this.#onDragEnd,
start: this.onDragStart,
move: this.onDrag,
end: this.onDragEnd,
})}
tabindex="-1"
>
<div class="clip-region"
style=${styleMap({
left: `${this.#secondsToPx(this.clipStart)}px`,
right: `${this._renderWidth - this.#secondsToPx(this.clipEnd)}px`,
})}
></div>
${subdivs.map((_, idx) => {
const pxOffset = (idx - 1) * pxPerSubdiv + fracPxOffset;
const seconds = (startingIdx + idx) * secondsPerSubdiv;
const secondsFrac = Math.abs(Math.round(seconds));
const strong = secondsFrac === 0;
${subdivisions.map(({ seconds, fraction, isMajor}, idx) => {
const secondsPercentage = fraction * 100;
return html`
<div
class=${classMap({
hash: true,
strong,
strong: isMajor,
})}
style=${styleMap({
left: `${pxOffset}px`
left: `${secondsPercentage}%`
})}
></div>
${strong ? html`
${true ? html`
<span class="timestamp"
style=${styleMap({
left: `${pxOffset + 8}px`
left: `calc(${secondsPercentage}% + 8px)`
})}
>
${seconds}
${this.timestamp(seconds)}
</span>
` : nothing}
`;
@@ -329,10 +328,10 @@ export class AnimTimelineElement extends LitElement {
<div class="playhead"
${drag({
move: this.#onPlayheadDrag
move: this.onPlayheadDrag
})}
style=${styleMap({
left: `${this.#secondsToPx(this.playHead)}px`
left: `${100 * (this.playHead - this.rangeStart) / range}%`
})}
tabindex="-1"
>
@@ -350,11 +349,11 @@ export class AnimTimelineElement extends LitElement {
selected: this._selectedKeyframe === id,
})}
style=${styleMap({
left: `${this.#secondsToPx(keyframe)}px`
left: `${this.secondsToPx(keyframe)}px`
})}
tabindex="-1"
${drag({
move: event => this.#onKeyframeDrag(id, event),
move: event => this.onKeyframeDrag(id, event),
})}
@click=${() => this.selectKeyframe(id)}
></div>