mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-23 08:16:05 +00:00
Animation Editor UI (#20)
This PR adds a WIP timeline UI for animating elements in the scene. ### Implemented Features * The timeline can be panned with MMB and zoomed with Ctrl + Mouse Wheel * The timeline can be "scrubbed" by dragging the red "play-head" with LMB * The timeline sidebar (displaying the list of tracks) can be resized by dragging on the edge of the sidebar * Keyframes can be added by pressing the "Add Keyframe" CTA in the UI * Keyframes can be selected for editing by clicking the diamond-shaped markers in the timeline * Selected entities (including but not limited to keyframes) can be deleted by pressing the "Delete" key * Keyframes can be moved temporally by dragging the diamond-shaped markers in the timeline ### Known issues * Zooming the timeline in too far results in a soft-lock * When zooming the timeline, the "transform origin" is currently centered on the `00:00` timestamp. For ease of use, it should center on the mouse cursor position instead. * The timeline track-list is currently hard-coded to list the Camera and Camera Target. Clicking on these entries currently serves no useful purpose and may result in a crash. * Keyframe markers in the timeline are not currently associated with entries in the track-list and simply appear vertically centered in the timeline view. * Added keyframes currently record the position and orientation of the scene camera when added, and are rendered in the world with debug visualizations, but serve no useful purpose. Some design work is needed (both user-experience and architectural) to decide on a workflow for actually animating scene elements. * Entity deletion cannot currently be undone/redone
This commit is contained in:
Danny McGee
@@ -0,0 +1,88 @@
|
||||
:host {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
background: #0006;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-keyframe {
|
||||
width: 40px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
|
||||
background: #7A2C34E3;
|
||||
color: #FFF;
|
||||
|
||||
&:hover {
|
||||
background: #90363F;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-nav {
|
||||
gap: 0;
|
||||
margin-top: 2px;
|
||||
|
||||
sts-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
background: transparent !important;
|
||||
backdrop-filter: initial;
|
||||
color: #FFFC;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: #FFFF;
|
||||
}
|
||||
|
||||
&.play {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
position: relative;
|
||||
flex: 0 0 8px;
|
||||
margin: {
|
||||
right: -3px;
|
||||
left: -3px;
|
||||
}
|
||||
cursor: ew-resize;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3px;
|
||||
bottom: 0;
|
||||
left: 3px;
|
||||
background: #FFF2;
|
||||
opacity: 0;
|
||||
transition: opacity 66.666ms linear;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
import * as studio from "@storyteller/studio";
|
||||
import { type CameraKeyframesEvent } from "@storyteller/studio";
|
||||
import { drag, on } from "@storyteller/framework";
|
||||
import { LitElement, type PropertyValues, html, unsafeCSS } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { styleMap } from "lit/directives/style-map.js";
|
||||
|
||||
import "./anim-timeline.element";
|
||||
import "./button.element";
|
||||
import "./toolbar.element";
|
||||
import "./tree.element";
|
||||
|
||||
import styles from "./anim-editor.element.scss?inline";
|
||||
|
||||
@customElement("sts-anim-editor")
|
||||
export class AnimEditorElement extends LitElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
@state() sidebarWidth = 256;
|
||||
|
||||
@state() timelineStart = 0;
|
||||
@state() timelineEnd = 5_000;
|
||||
|
||||
@state() clipStart = 0;
|
||||
@state() clipEnd = 15_000;
|
||||
|
||||
@state() playHead = 0;
|
||||
@state() keyframes: Record<string, number> = {};
|
||||
|
||||
protected override update(changes: PropertyValues<this>): void {
|
||||
if (changes.has("playHead"))
|
||||
studio.seekTime(this.playHead);
|
||||
|
||||
super.update(changes);
|
||||
}
|
||||
|
||||
@on("window:camera-keyframes")
|
||||
onCameraKeyframeChanges({ detail: keyframes }: CameraKeyframesEvent): void {
|
||||
this.keyframes = keyframes;
|
||||
}
|
||||
|
||||
onSidebarResize(event: PointerEvent): void {
|
||||
this.sidebarWidth = Math.max(Math.min(this.sidebarWidth + event.movementX, 512), 128);
|
||||
}
|
||||
|
||||
addKeyframe(): void {
|
||||
studio.addCameraKeyframe(this.playHead);
|
||||
}
|
||||
|
||||
jumpToStart(): void {
|
||||
this.playHead = this.clipStart;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
jumpToEnd(): void {
|
||||
this.playHead = this.clipEnd;
|
||||
}
|
||||
|
||||
#onTimelineStartChange(event: CustomEvent<number>): void {
|
||||
this.timelineStart = event.detail;
|
||||
}
|
||||
|
||||
#onTimelineEndChange(event: CustomEvent<number>): void {
|
||||
this.timelineEnd = event.detail;
|
||||
}
|
||||
|
||||
#onPlayHeadChange(event: CustomEvent<number>): void {
|
||||
this.playHead = event.detail;
|
||||
}
|
||||
|
||||
#onKeyframesChange(event: CustomEvent<Record<string, number>>): void {
|
||||
this.keyframes = event.detail;
|
||||
}
|
||||
|
||||
protected override render = () => html`
|
||||
<div class="sidebar"
|
||||
style=${styleMap({
|
||||
width: `${this.sidebarWidth}px`,
|
||||
})}
|
||||
>
|
||||
<sts-toolbar>
|
||||
<sts-toolbar-group>
|
||||
<sts-button class="btn-keyframe"
|
||||
icon="key"
|
||||
aria-label="Add Keyframe"
|
||||
title="Add Keyframe"
|
||||
@click=${this.addKeyframe}
|
||||
></sts-button>
|
||||
</sts-toolbar-group>
|
||||
<sts-toolbar-group class="timeline-nav">
|
||||
<sts-button
|
||||
icon="bwd-fast"
|
||||
aria-label="Jump to Start"
|
||||
title="Jump to Start"
|
||||
@click=${this.jumpToStart}
|
||||
></sts-button>
|
||||
<sts-button
|
||||
icon="bwd-step"
|
||||
aria-label="Previous Keyframe"
|
||||
title="Previous Keyframe"
|
||||
@click=${this.prevKeyframe}
|
||||
></sts-button>
|
||||
<sts-button class="play"
|
||||
icon="play"
|
||||
aria-label="Play"
|
||||
title="Play"
|
||||
></sts-button>
|
||||
<sts-button
|
||||
icon="fwd-step"
|
||||
aria-label="Next Keyframe"
|
||||
title="Next Keyframe"
|
||||
@click=${this.nextKeyframe}
|
||||
></sts-button>
|
||||
<sts-button
|
||||
icon="fwd-fast"
|
||||
aria-label="Jump to End"
|
||||
title="Jump to End"
|
||||
@click=${this.jumpToEnd}
|
||||
></sts-button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"
|
||||
${drag({
|
||||
move: this.onSidebarResize,
|
||||
})}
|
||||
></div>
|
||||
|
||||
<sts-anim-timeline class="timeline"
|
||||
.rangeStart=${this.timelineStart}
|
||||
@rangeStartChange=${this.#onTimelineStartChange}
|
||||
.rangeEnd=${this.timelineEnd}
|
||||
@rangeEndChange=${this.#onTimelineEndChange}
|
||||
|
||||
.clipStart=${this.clipStart}
|
||||
.clipEnd=${this.clipEnd}
|
||||
|
||||
.playHead=${this.playHead}
|
||||
@playHeadChange=${this.#onPlayHeadChange}
|
||||
|
||||
.keyframes=${this.keyframes}
|
||||
@keyframesChange=${this.#onKeyframesChange}
|
||||
></sts-anim-timeline>
|
||||
`;
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
:host {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
&.panning {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.clip-region {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #0004;
|
||||
}
|
||||
|
||||
.hash {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: #FFF1;
|
||||
|
||||
&.strong {
|
||||
background: #FFF3;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
color: #FFF6;
|
||||
font: {
|
||||
family: "Fira Sans", sans-serif;
|
||||
size: 14px;
|
||||
}
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
|
||||
.frac {
|
||||
color: #FFF3;
|
||||
}
|
||||
}
|
||||
|
||||
.playhead {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
transform: translateX(-3px);
|
||||
cursor: ew-resize;
|
||||
color: #7A2C34E3;
|
||||
transition: color 66.667ms linear;
|
||||
|
||||
&:hover {
|
||||
color: #90363F;
|
||||
}
|
||||
|
||||
.head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 32px;
|
||||
background: currentColor;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
border: 4px solid transparent {
|
||||
top: 8px solid currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
bottom: 0;
|
||||
left: 3px;
|
||||
right: 3px;
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.keyframe {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-4.5px) translateY(-4.5px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: #AAA;
|
||||
transform: rotate(45deg) {
|
||||
origin: center center;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected::before {
|
||||
background: #0FF; // TODO
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,372 @@
|
||||
import * as studio from "@storyteller/studio";
|
||||
import { type EntitySelectEvent } from "@storyteller/studio";
|
||||
import { drag, on } from "@storyteller/framework";
|
||||
import { LitElement, PropertyValues, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
import { repeat } from "lit/directives/repeat.js";
|
||||
import { styleMap } from "lit/directives/style-map.js";
|
||||
|
||||
import styles from "./anim-timeline.element.scss?inline";
|
||||
|
||||
// TODO: This is basically a [signal](https://www.solidjs.com/tutorial/introduction_signals)
|
||||
// that requires manual dependency tracking. Given that requirement, it's
|
||||
// questionable whether this is even a valuable abstraction to have.
|
||||
//
|
||||
// We should either make it more obviously valuable (e.g. by coming up
|
||||
// with a way to automatically handle dependencies) and move it to
|
||||
// `@storyteller/framework`, or just get rid of it.
|
||||
//
|
||||
// We could maybe add a decorator that could automatically override the
|
||||
// `update` method to invalidate the cache when dependencies are changed,
|
||||
// which would look something like:
|
||||
// ```
|
||||
// @memo(["rangeStart", "rangeEnd", "_renderWidth"])
|
||||
// msPerPx = new Computed(() => (this.rangeEnd - this.rangeStart) / this._renderWidth);
|
||||
// ```
|
||||
// But that feels a little obtuse and overengineered. In this particular
|
||||
// case we're probably only saving on the order of nanoseconds, so I'm
|
||||
// leaning toward just nuking the idea.
|
||||
class Computed extends Number {
|
||||
#value?: number;
|
||||
#compute: () => number;
|
||||
|
||||
constructor (compute: () => number) {
|
||||
const value = compute();
|
||||
super(value);
|
||||
this.#compute = compute;
|
||||
}
|
||||
|
||||
override valueOf(): number {
|
||||
return this.#value ??= this.#compute();
|
||||
}
|
||||
|
||||
get(): number {
|
||||
return this.valueOf();
|
||||
}
|
||||
|
||||
invalidate(): void {
|
||||
this.#value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement("sts-anim-timeline")
|
||||
export class AnimTimelineElement extends LitElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
/** The time (in ms) at the left edge of the timeline view */
|
||||
@property({ type: Number }) rangeStart = 0;
|
||||
/** The time (in ms) at the right edge of the timeline view */
|
||||
@property({ type: Number }) rangeEnd = 5_000;
|
||||
|
||||
/** The time (in ms) at the beginning of the active clip range */
|
||||
@property({ type: Number }) clipStart = 0;
|
||||
/** The time (in ms) at the end of the active clip range */
|
||||
@property({ type: Number }) clipEnd = 15_000;
|
||||
|
||||
/** The time (in ms) of the current play-head position */
|
||||
@property({ type: Number }) playHead = 0;
|
||||
/** Keyframe positions (in ms) */
|
||||
@property({ attribute: false }) keyframes: Record<string, number> = {};
|
||||
|
||||
@state() _selectedKeyframe: string | null = null;
|
||||
|
||||
/** The width (in px) of the timeline view */
|
||||
@state() _renderWidth!: number;
|
||||
|
||||
/** The offset from 0ms of the left edge of the timeline view, in px */
|
||||
@state() _offsetX = 0;
|
||||
/** The vertical scroll offset (in px) */
|
||||
@state() _offsetY = 0;
|
||||
|
||||
/**
|
||||
* `true` when the timeline is being mouse-panned. Primarily useful for
|
||||
* setting the cursor style to the grabby hand.
|
||||
*/
|
||||
@state() _panning = false;
|
||||
|
||||
/** How many ms are represented by each px of horizontal space. */
|
||||
msPerPx = new Computed(() => (this.rangeEnd - this.rangeStart) / this._renderWidth);
|
||||
|
||||
#resizeObserver: ResizeObserver;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
this.#resizeObserver = new ResizeObserver(() => this.#updateRenderWidth());
|
||||
this.#resizeObserver.observe(this);
|
||||
}
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.#updateRenderWidth();
|
||||
}
|
||||
|
||||
override disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this.#resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
protected override update(changes: PropertyValues<this>): void {
|
||||
if (
|
||||
changes.has("rangeStart")
|
||||
|| changes.has("rangeEnd")
|
||||
|| changes.has("_renderWidth")
|
||||
) {
|
||||
this.msPerPx.invalidate();
|
||||
}
|
||||
|
||||
super.update(changes);
|
||||
}
|
||||
|
||||
@on("wheel")
|
||||
onWheel(event: WheelEvent): void {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
if (event.ctrlKey) {
|
||||
this.#zoomTimeline(event.offsetX, event.deltaY);
|
||||
} else if (event.deltaX) {
|
||||
this.#pan(-event.deltaX);
|
||||
} else if (event.shiftKey && event.deltaY) {
|
||||
this.#pan(-event.deltaY);
|
||||
}
|
||||
}
|
||||
|
||||
@on("window:entity-select")
|
||||
onEntitySelected({ detail: id }: EntitySelectEvent): void {
|
||||
if (!id) {
|
||||
this._selectedKeyframe = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.from(Object.keys(this.keyframes)).includes(id)) {
|
||||
this._selectedKeyframe = id;
|
||||
this.dispatchEvent(new CustomEvent("playHeadChange", { detail: this.keyframes[id]! }));
|
||||
} else {
|
||||
this._selectedKeyframe = null;
|
||||
}
|
||||
}
|
||||
|
||||
selectKeyframe(id: string): void {
|
||||
studio.select(id);
|
||||
}
|
||||
|
||||
#zoomTimeline(origin: number, delta: number): void {
|
||||
const currentRange = this.rangeEnd - this.rangeStart;
|
||||
const deltaRange = delta * 4;
|
||||
|
||||
// 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.msPerPx.get()) / currentRange;
|
||||
console.log(`t: ${t}`);
|
||||
console.log(`deltaStart: ${-deltaRange * t}`);
|
||||
console.log(`deltaEnd: ${deltaRange * (1 - t)}`);
|
||||
const rangeStart = this.rangeStart - deltaRange * t;
|
||||
const rangeEnd = this.rangeEnd + deltaRange * (1 - t);
|
||||
|
||||
this.dispatchEvent(new CustomEvent("rangeStartChange", { detail: rangeStart }));
|
||||
this.dispatchEvent(new CustomEvent("rangeEndChange", { detail: rangeEnd }));
|
||||
}
|
||||
|
||||
#onDragStart(): void {
|
||||
this._panning = true;
|
||||
}
|
||||
|
||||
#onDragEnd(): void {
|
||||
this._panning = false;
|
||||
}
|
||||
|
||||
#onDrag(event: PointerEvent): void {
|
||||
this.#pan(event.movementX);
|
||||
}
|
||||
|
||||
#pan(deltaPx: number): void {
|
||||
this._offsetX += deltaPx;
|
||||
|
||||
const msPerPx = this.msPerPx.get();
|
||||
const rangeStart = this.rangeStart - deltaPx * msPerPx;
|
||||
const rangeEnd = this.rangeEnd - deltaPx * msPerPx;
|
||||
|
||||
this.dispatchEvent(new CustomEvent("rangeStartChange", { detail: rangeStart }));
|
||||
this.dispatchEvent(new CustomEvent("rangeEndChange", { detail: rangeEnd }));
|
||||
}
|
||||
|
||||
#onPlayheadDrag(event: PointerEvent): void {
|
||||
const deltaMs = event.movementX * this.msPerPx.get();
|
||||
const updated = this.playHead + deltaMs;
|
||||
|
||||
this.dispatchEvent(new CustomEvent("playHeadChange", { detail: updated }));
|
||||
}
|
||||
|
||||
#onKeyframeDrag(id: string, event: PointerEvent): void {
|
||||
const deltaMs = event.movementX * this.msPerPx.get();
|
||||
const updated = this.keyframes[id] + deltaMs;
|
||||
|
||||
studio.updateKeyframe(id, updated);
|
||||
|
||||
const updatedKeyframes = Object.fromEntries(
|
||||
Object
|
||||
.entries(this.keyframes)
|
||||
.map(entry => entry[0] === id
|
||||
? [id, updated]
|
||||
: entry
|
||||
)
|
||||
);
|
||||
this.dispatchEvent(new CustomEvent("keyframesChange", { detail: updatedKeyframes }));
|
||||
}
|
||||
|
||||
#updateRenderWidth(): void {
|
||||
this._renderWidth = this.getBoundingClientRect().width;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a time value (in ms) for displaying in the timeline view
|
||||
*/
|
||||
#timestamp(ms: number) {
|
||||
const sign = ms < 0 ? "-" : "";
|
||||
ms = Math.abs(ms);
|
||||
|
||||
let s = Math.floor(ms / 1000);
|
||||
let frac = Math.round(ms % 1000);
|
||||
if (frac === 1000) {
|
||||
frac = 0;
|
||||
s += 1;
|
||||
}
|
||||
|
||||
let m = 0;
|
||||
if (s >= 60) {
|
||||
m = Math.floor(s / 60);
|
||||
s %= 60;
|
||||
}
|
||||
|
||||
return html`${
|
||||
sign
|
||||
}${
|
||||
m.toString(10).padStart(2, "0")
|
||||
}:${
|
||||
s.toString(10).padStart(2, "0")
|
||||
}<!--<span class="frac">.${
|
||||
frac.toString(10).padEnd(3, "0")
|
||||
}</span>-->`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a time value (in ms) to a px offset from the left edge of the view
|
||||
*/
|
||||
#msToPx(ms: number): number {
|
||||
return this._offsetX + ms / this.msPerPx.get();
|
||||
}
|
||||
|
||||
protected override render = () => {
|
||||
const msPerPx = this.msPerPx.get();
|
||||
const range = this.rangeEnd - this.rangeStart;
|
||||
|
||||
let subdivsPerSec = 32;
|
||||
let subdivsCount = (range / 1000) * subdivsPerSec;
|
||||
let pxPerSubdiv = this._renderWidth / subdivsCount;
|
||||
|
||||
while (pxPerSubdiv < 64) {
|
||||
subdivsPerSec /= 2;
|
||||
subdivsCount = (range / 1000) * subdivsPerSec;
|
||||
pxPerSubdiv = this._renderWidth / subdivsCount;
|
||||
}
|
||||
|
||||
const msPerSubdiv = msPerPx * pxPerSubdiv;
|
||||
const subdivs = new Array(Math.ceil(subdivsCount) + 2).fill(null);
|
||||
|
||||
const fracPxOffset = this._offsetX % pxPerSubdiv;
|
||||
|
||||
let startingIdx = -Math.floor(this._offsetX / pxPerSubdiv);
|
||||
if (fracPxOffset < 0)
|
||||
startingIdx -= 2;
|
||||
else
|
||||
startingIdx -= 1;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class=${classMap({
|
||||
wrapper: true,
|
||||
panning: this._panning,
|
||||
})}
|
||||
${drag({
|
||||
button: 1,
|
||||
start: this.#onDragStart,
|
||||
move: this.#onDrag,
|
||||
end: this.#onDragEnd,
|
||||
})}
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="clip-region"
|
||||
style=${styleMap({
|
||||
left: `${this.#msToPx(this.clipStart)}px`,
|
||||
right: `${this._renderWidth - this.#msToPx(this.clipEnd)}px`,
|
||||
})}
|
||||
></div>
|
||||
|
||||
${subdivs.map((_, idx) => {
|
||||
const pxOffset = (idx - 1) * pxPerSubdiv + fracPxOffset;
|
||||
const ms = (startingIdx + idx) * msPerSubdiv;
|
||||
|
||||
const msFrac = Math.abs(Math.round(ms) % 1000);
|
||||
const strong = msFrac === 0;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class=${classMap({
|
||||
hash: true,
|
||||
strong,
|
||||
})}
|
||||
style=${styleMap({
|
||||
left: `${pxOffset}px`
|
||||
})}
|
||||
></div>
|
||||
${strong ? html`
|
||||
<span class="timestamp"
|
||||
style=${styleMap({
|
||||
left: `${pxOffset + 8}px`
|
||||
})}
|
||||
>
|
||||
${this.#timestamp(ms)}
|
||||
</span>
|
||||
` : nothing}
|
||||
`;
|
||||
})}
|
||||
|
||||
<div class="playhead"
|
||||
${drag({
|
||||
move: this.#onPlayheadDrag
|
||||
})}
|
||||
style=${styleMap({
|
||||
left: `${this.#msToPx(this.playHead)}px`
|
||||
})}
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="head"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
|
||||
${repeat(
|
||||
Object.entries(this.keyframes),
|
||||
([id]) => id,
|
||||
([id, keyframe]) => html`
|
||||
<div id=${id}
|
||||
class=${classMap({
|
||||
keyframe: true,
|
||||
selected: this._selectedKeyframe === id,
|
||||
})}
|
||||
style=${styleMap({
|
||||
left: `${this.#msToPx(keyframe)}px`
|
||||
})}
|
||||
tabindex="-1"
|
||||
${drag({
|
||||
move: event => this.#onKeyframeDrag(id, event),
|
||||
})}
|
||||
@click=${() => this.selectKeyframe(id)}
|
||||
></div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
$hierarchy-width: 290px;
|
||||
|
||||
.app-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -8,12 +10,19 @@
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
.v-end {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
}
|
||||
.v-after-toolbar {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
}
|
||||
.h-start { left: 16px }
|
||||
.h-end { right: 16px }
|
||||
.h-before-hierarchy {
|
||||
right: $hierarchy-width + 32px;
|
||||
}
|
||||
.h-center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -29,7 +38,7 @@ sts-button.active {
|
||||
overflow: auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 290px;
|
||||
width: $hierarchy-width;
|
||||
max-height: calc(100vh - 32px);
|
||||
padding: 10px 15px;
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ import "@storyteller/studio-web/canvas-provider";
|
||||
import "@storyteller/studio-web/viewer";
|
||||
import "@storyteller/studio-web/bvh-viewer";
|
||||
import "@storyteller/studio-web/mixamo-viewer";
|
||||
import "./anim-editor.element";
|
||||
import "./button.element";
|
||||
import "./help.element";
|
||||
import "./icon.element";
|
||||
@@ -77,6 +78,8 @@ export class AppElement extends LitElement {
|
||||
"viewer": () => StudioMode.Viewer,
|
||||
_: () => StudioMode.Viewer,
|
||||
});
|
||||
|
||||
this.#redirectBodyFocus();
|
||||
}
|
||||
|
||||
protected override createRenderRoot(): Element | ShadowRoot {
|
||||
@@ -189,6 +192,20 @@ export class AppElement extends LitElement {
|
||||
console.log("Hierarchy:", this.sceneObjects);
|
||||
}
|
||||
|
||||
#redirectBodyFocus(): void {
|
||||
// If user focus lands on the `document.body`, neither the frontend app
|
||||
// nor the Bevy app will properly handle keyboard events. Thie function
|
||||
// runs every tick to ensure that user focus never becomes "stranded" in
|
||||
// this way.
|
||||
if (document.activeElement === document.body) {
|
||||
const canvasId = this.#canvasProvider.value?.canvasId;
|
||||
if (canvasId)
|
||||
document.getElementById(canvasId)?.focus();
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => this.#redirectBodyFocus());
|
||||
}
|
||||
|
||||
protected override render = () => html`
|
||||
<sts-canvas-provider
|
||||
class="app-root"
|
||||
@@ -247,6 +264,10 @@ export class AppElement extends LitElement {
|
||||
</div>
|
||||
` : nothing}
|
||||
|
||||
${this.mode === StudioMode.Editor ? html`
|
||||
<sts-anim-editor class="timeline v-end h-start h-before-hierarchy"></sts-anim-editor>
|
||||
` : nothing}
|
||||
|
||||
${this.showHelp ? html`
|
||||
<sts-help class="help v-after-toolbar h-start"></sts-help>
|
||||
` : nothing}
|
||||
|
||||
@@ -19,7 +19,11 @@
|
||||
background: #0006;
|
||||
color: #FFF;
|
||||
backdrop-filter: blur(16px);
|
||||
transition: background 0.1s linear;
|
||||
transition: {
|
||||
property: background, color;
|
||||
duration: 0.1s;
|
||||
timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
:host(:hover) {
|
||||
|
||||
@@ -13,7 +13,7 @@ export class HelpElement extends LitElement {
|
||||
${section("Navigation", [
|
||||
{ name: "Pan View", controls: "MMB" },
|
||||
{ name: "Orbit around point", controls: "Alt + LMB" },
|
||||
{ name: "Zoom", controls: ["Alt + RMB", "Mouse Wheel"]},
|
||||
{ name: "Zoom", controls: ["Alt + RMB", "Scroll"]},
|
||||
{ name: "Free fly", controls: "W, A, S, D, E, Q" },
|
||||
{ name: "Free look", controls: ["RMB", "Shift"] },
|
||||
])}
|
||||
@@ -21,6 +21,11 @@ export class HelpElement extends LitElement {
|
||||
{ name: "Select", controls: "LMB" },
|
||||
{ name: "Clear selection", controls: "Esc" },
|
||||
{ name: "Focus selection", controls: "F" },
|
||||
{ name: "Delete selection", controls: "Delete" },
|
||||
])}
|
||||
${section("Animation Timeline", [
|
||||
{ name: "Pan", controls: ["MMB", "Scroll"] },
|
||||
{ name: "Zoom", controls: "Ctrl + Scroll" },
|
||||
])}
|
||||
${isDevEnvironment()
|
||||
? section("Developer", [
|
||||
|
||||
@@ -4,10 +4,18 @@ import { LitElement, TemplateResult, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
|
||||
|
||||
import farCrosshairs from "@fortawesome/fontawesome-pro/svgs/regular/crosshairs.svg?raw";
|
||||
import farVideo from "@fortawesome/fontawesome-pro/svgs/regular/video.svg?raw";
|
||||
import fasCircleInfo from "@fortawesome/fontawesome-pro/svgs/regular/circle-info.svg?raw";
|
||||
import fasKey from "@fortawesome/fontawesome-pro/svgs/solid/key.svg?raw";
|
||||
import fasCube from "@fortawesome/fontawesome-pro/svgs/regular/cube.svg?raw";
|
||||
import fasGlobe from "@fortawesome/fontawesome-pro/svgs/regular/globe.svg?raw";
|
||||
import fasUpDownLeftRight from "@fortawesome/fontawesome-pro/svgs/regular/arrows-up-down-left-right.svg?raw";
|
||||
import fasPlay from "@fortawesome/fontawesome-pro/svgs/solid/play.svg?raw";
|
||||
import fasFwdStep from "@fortawesome/fontawesome-pro/svgs/solid/forward-step.svg?raw";
|
||||
import fasFwdFast from "@fortawesome/fontawesome-pro/svgs/solid/forward-fast.svg?raw";
|
||||
import fasBwdStep from "@fortawesome/fontawesome-pro/svgs/solid/backward-step.svg?raw";
|
||||
import fasBwdFast from "@fortawesome/fontawesome-pro/svgs/solid/backward-fast.svg?raw";
|
||||
import fasRotate from "@fortawesome/fontawesome-pro/svgs/regular/arrows-rotate.svg?raw";
|
||||
import fasScale from "@fortawesome/fontawesome-pro/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg?raw";
|
||||
import fasCaretRight from "@fortawesome/fontawesome-pro/svgs/solid/caret-right.svg?raw";
|
||||
@@ -37,13 +45,21 @@ function renderSvg(iconId: string) {
|
||||
return RENDER_RESULTS.get(iconId)!;
|
||||
|
||||
const svgSrc = match (iconId, {
|
||||
"bwd-fast": () => fasBwdFast,
|
||||
"bwd-step": () => fasBwdStep,
|
||||
"circle-info": () => fasCircleInfo,
|
||||
"caret-right": () => fasCaretRight,
|
||||
"crosshairs": () => farCrosshairs,
|
||||
"cube": () => fasCube,
|
||||
"fwd-fast": () => fasFwdFast,
|
||||
"fwd-step": () => fasFwdStep,
|
||||
"key": () => fasKey,
|
||||
"globe": () => fasGlobe,
|
||||
"up-down-left-right": () => fasUpDownLeftRight,
|
||||
"play": () => fasPlay,
|
||||
"rotate": () => fasRotate,
|
||||
"scale": () => fasScale,
|
||||
"up-down-left-right": () => fasUpDownLeftRight,
|
||||
"video": () => farVideo,
|
||||
_: () => null,
|
||||
});
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
$item-height: 24px;
|
||||
|
||||
:host, .children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -31,7 +33,7 @@ header {
|
||||
timing-function: linear;
|
||||
}
|
||||
|
||||
&:hover:not(:has(.toggle-expanded:hover)) {
|
||||
&.selectable:hover:not(:has(.toggle-expanded:hover)) {
|
||||
background: #0000001F;
|
||||
}
|
||||
|
||||
@@ -52,7 +54,7 @@ header {
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
height: $item-height;
|
||||
margin-block: -5px;
|
||||
padding-inline-start: 4px;
|
||||
|
||||
@@ -72,12 +74,13 @@ header {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.name {
|
||||
.label {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
padding: {
|
||||
block: 5px;
|
||||
inline: 5px 10px;
|
||||
}
|
||||
height: $item-height;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-inline-start: 5px;
|
||||
}
|
||||
|
||||
.children {
|
||||
|
||||
@@ -4,6 +4,7 @@ import { type EntitySelectEvent } from "@storyteller/studio";
|
||||
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
import "./icon.element";
|
||||
|
||||
@@ -20,8 +21,9 @@ export class TreeElement extends LitElement {
|
||||
static override styles = unsafeCSS(styles);
|
||||
|
||||
@property() name = "";
|
||||
@property() treeChildren?: Tree[];
|
||||
@property() expanded = false;
|
||||
@property() icon?: string;
|
||||
@property({ attribute: false }) treeChildren?: Tree[];
|
||||
@property({ type: Boolean }) expanded = false;
|
||||
|
||||
@state() selected = false;
|
||||
|
||||
@@ -35,12 +37,18 @@ export class TreeElement extends LitElement {
|
||||
}
|
||||
|
||||
selectEntity(): void {
|
||||
studio.select(this.id);
|
||||
if (this.id)
|
||||
studio.select(this.id);
|
||||
}
|
||||
|
||||
// TODO: A11y
|
||||
protected override render = () => html`
|
||||
<header class=${classMap({ selected: this.selected })}>
|
||||
<header
|
||||
class=${classMap({
|
||||
selected: this.selected,
|
||||
selectable: !!this.id,
|
||||
})}
|
||||
>
|
||||
${this.treeChildren?.length ? html`
|
||||
<button class="toggle-expanded"
|
||||
@click=${this.toggleExpanded}
|
||||
@@ -55,9 +63,12 @@ export class TreeElement extends LitElement {
|
||||
></sts-icon>
|
||||
</button>
|
||||
` : nothing}
|
||||
<span class="name"
|
||||
<span class="label"
|
||||
@click=${this.selectEntity}
|
||||
>
|
||||
${this.icon ? html`
|
||||
<sts-icon icon=${this.icon}></sts-icon>
|
||||
` : nothing}
|
||||
${this.name}
|
||||
</span>
|
||||
</header>
|
||||
@@ -66,7 +77,7 @@ export class TreeElement extends LitElement {
|
||||
<div class="children">
|
||||
${this.treeChildren?.map(tree => html`
|
||||
<sts-tree
|
||||
id=${tree.id}
|
||||
id=${ifDefined(tree.id)}
|
||||
.name=${tree.name}
|
||||
.treeChildren=${tree.children}
|
||||
></sts-tree>
|
||||
|
||||
Reference in New Issue
Block a user