diff --git a/studio-frontend/src/app/anim-editor.element.scss b/studio-frontend/src/app/anim-editor.element.scss index 6a754bf..07a10c2 100644 --- a/studio-frontend/src/app/anim-editor.element.scss +++ b/studio-frontend/src/app/anim-editor.element.scss @@ -46,6 +46,27 @@ } } +.btn-autokey { + width: 40px; + height: 36px; + border-radius: 4px; + padding: 0; + justify-content: center; + + background: #0006; + color: #FFF; + opacity: 0.5; + + &:hover { + background: #90363F; + } + + &.active { + background: #7A2C34E3; + opacity: 1; + } +} + .timeline-nav { gap: 0; margin-top: 2px; diff --git a/studio-frontend/src/app/anim-editor.element.ts b/studio-frontend/src/app/anim-editor.element.ts index 120a38c..22d18f0 100644 --- a/studio-frontend/src/app/anim-editor.element.ts +++ b/studio-frontend/src/app/anim-editor.element.ts @@ -14,7 +14,7 @@ import styles from "./anim-editor.element.scss?inline"; import { SCENE_DATA_PROVIDER, type SceneDataProvider } from "@storyteller/studio-web/scene-data-provider"; import { TREE_SELECTION_PROVIDER, TreeSelectionProvider } from "@storyteller/studio-ui/tree"; -const TRACK_ICONS : Record = { +const TRACK_ICONS: Record = { camera: "video", transform: "up-down-left-right", light: "light" @@ -30,10 +30,10 @@ function isOutsideEntity( @customElement("sts-anim-editor") @provide(TREE_SELECTION_PROVIDER) export class AnimEditorElement extends LitElement -implements TreeSelectionProvider { - @inject(SCENE_DATA_PROVIDER) - sceneData?: SceneDataProvider; - + implements TreeSelectionProvider { + @inject(SCENE_DATA_PROVIDER) + sceneData?: SceneDataProvider; + static override styles = unsafeCSS(styles); @state() sidebarWidth = 256; @@ -47,14 +47,16 @@ implements TreeSelectionProvider { @state() playHead = 0; @state() playing = false; - @state() tracks : Record = {}; - - @state() track_ordered : [string, studio.AnimationTarget][] = []; + @state() tracks: Record = {}; - @state() keyframes : Record = {}; + @state() track_ordered: [string, studio.AnimationTarget][] = []; + + @state() keyframes: Record = {}; @state() selectedTrack?: { track: string } | { outsideEntity: string }; + @state() keyingMode: "manual" | "automatic" = "manual"; + trackCount(): number { return Object.keys(this.tracks).length; } @@ -78,12 +80,12 @@ implements TreeSelectionProvider { super.update(changes); } - setPlayTime(time: number) : void { + setPlayTime(time: number): void { studio.seekTime(time); } @on("window:seek-time-changed") - onSeekTimeChanged({ detail: {time, playing} }: SeekTimeChanged ): void { + onSeekTimeChanged({ detail: { time, playing } }: SeekTimeChanged): void { console.log("Seek Time Changed", time, playing); this.playHead = time; this.playing = playing; @@ -97,29 +99,29 @@ implements TreeSelectionProvider { } @on("window:update-animation-targets") - onUpdateAnimationTargets({detail: { added, removed}}: UpdateAnimationTargets) : void { + 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}; + 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).map(entity => [entity,tracks[entity].animation_target]); + this.track_ordered = Object.keys(tracks).map(entity => [entity, tracks[entity].animation_target]); if (typeof this.selectedTrack === "object") { if (!isOutsideEntity(this.selectedTrack) && !(this.selectedTrack.track in tracks)) { - this.selectedTrack = { outsideEntity: this.selectedTrack.track}; + this.selectedTrack = { outsideEntity: this.selectedTrack.track }; } else if (isOutsideEntity(this.selectedTrack) && this.selectedTrack.outsideEntity in tracks) { - this.selectedTrack = { track: this.selectedTrack.outsideEntity}; + this.selectedTrack = { track: this.selectedTrack.outsideEntity }; } } @@ -127,13 +129,13 @@ implements TreeSelectionProvider { } @on("window:update-keyframes") - onUpdateKeyframes({detail: {added, removed}}: studio.UpdateKeyframes): void { + onUpdateKeyframes({ detail: { added, removed } }: studio.UpdateKeyframes): void { let addedKeyframes = Object.keys(added); if (addedKeyframes.length === 0 && removed.length === 0) { return; } console.log("Keyframes Changed"); - let keyframes = {...this.keyframes}; + let keyframes = { ...this.keyframes }; for (let keyframe of addedKeyframes) { keyframes[keyframe] = added[keyframe]; } @@ -162,14 +164,20 @@ implements TreeSelectionProvider { this.clipEnd = Math.max(max, min); } - + @on("window:keying-mode-changed") + onKeyingModeChanged({ detail: { automatic } }: studio.UpdateKeyingMode): void { + console.log("Keying Mode Changed", automatic); + this.keyingMode = automatic ? "automatic" : "manual"; + } + + @on("window:entity-select") onEntitySelected({ detail: id }: EntitySelectEvent): void { if (id) { if (this.tracks[id]) { this.selectedTrack = { track: id }; } else if (!this.keyframes[id]) { - this.selectedTrack = {outsideEntity: id}; + this.selectedTrack = { outsideEntity: id }; } else { this.selectedTrack = undefined; } @@ -206,7 +214,7 @@ implements TreeSelectionProvider { if (!time || typeof time != "number") { continue; } - if (time < pos && time > closest_keyframe ) { + if (time < pos && time > closest_keyframe) { closest_keyframe = time; } } @@ -229,7 +237,7 @@ implements TreeSelectionProvider { if (!time || typeof time != "number") { continue; } - if (time > pos && time < closest_keyframe ) { + if (time > pos && time < closest_keyframe) { closest_keyframe = time; } } @@ -262,8 +270,8 @@ implements TreeSelectionProvider { protected override render(): TemplateResult { - const track_order_hashed : Record = {}; - const track_animation_target_order_hashed : Record = {}; + const track_order_hashed: Record = {}; + const track_animation_target_order_hashed: Record = {}; for (const [index, [track, target]] of this.track_ordered.entries()) { track_order_hashed[track] = index; @@ -277,7 +285,7 @@ implements TreeSelectionProvider { let clip_start = (this.clipStart - this.timelineStart) / length; let clip_end = (this.clipEnd - this.timelineStart) / length; - + let timeline_css_variables = { '--track-count': `${this.trackCount()}`, '--row-count': `calc(var(--track-count) + ${canAddSelected ? 3 : 2})`, @@ -317,19 +325,34 @@ implements TreeSelectionProvider { return html`
- + ${this.keyingMode === "automatic" ? html` + + ` : html` + + + `} = {}; @property({ attribute: false }) track_ordered: Record = {}; @@ -82,6 +85,7 @@ export class AnimTimelineElement extends LitElement { * setting the cursor style to the grabby hand. */ @state() _panning = false; + @state() _scrubbing = false; /** How many seconds are represented by each px of horizontal space. */ secondsPerPx = new Computed(() => (this.rangeEnd - this.rangeStart) / this._renderWidth); @@ -90,13 +94,13 @@ export class AnimTimelineElement extends LitElement { constructor () { super(); - this.#resizeObserver = new ResizeObserver(() => this.#updateRenderWidth()); + this.#resizeObserver = new ResizeObserver(() => this.updateRenderWidth()); this.#resizeObserver.observe(this); } override connectedCallback(): void { super.connectedCallback(); - this.#updateRenderWidth(); + this.updateRenderWidth(); } override disconnectedCallback(): void { @@ -122,12 +126,10 @@ export class AnimTimelineElement extends LitElement { event.preventDefault(); event.stopImmediatePropagation(); - if (event.ctrlKey) { - this.#zoomTimeline(event.clientX, event.deltaY); + if (event.ctrlKey || Math.abs(event.deltaY ) > 0) { + this.zoomTimeline(event.clientX, event.deltaY); } else if (event.deltaX) { - this.#pan(-event.deltaX); - } else if (event.shiftKey && event.deltaY) { - this.#pan(-event.deltaY); + this.pan(-event.deltaX); } } @@ -151,7 +153,7 @@ export class AnimTimelineElement extends LitElement { studio.select(id); } - #zoomTimeline(origin: number, delta: number): void { + zoomTimeline(origin: number, delta: number): void { const currentRange = this.rangeEnd - this.rangeStart; const elementRect = this.getBoundingClientRect(); const focusPoint = (origin - elementRect.x) / elementRect.width; @@ -165,19 +167,37 @@ export class AnimTimelineElement extends LitElement { this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd })); } - onDragStart(): void { + onMidDragStart(): void { this._panning = true; } - onDragEnd(): void { + onMidDragEnd(): void { this._panning = false; } - onDrag(event: PointerEvent): void { - this.#pan(event.movementX); + onMidDrag(event: PointerEvent): void { + this.pan(event.movementX); } - #pan(deltaPx: number): void { + onDragStart(): void { + this._scrubbing = true; + } + + onDragEnd(): void { + this._scrubbing = false; + } + + onDrag(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 = Math.round(seconds * this.clipFps) / this.clipFps; + + studio.seekTime(updated); + } + + pan(deltaPx: number): void { const deltaChange = deltaPx * 0.001; const scaledChange = (this.rangeEnd - this.rangeStart) * deltaChange; @@ -198,7 +218,17 @@ export class AnimTimelineElement extends LitElement { 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; + const updated = Math.round(seconds * this.clipFps) / this.clipFps; + + studio.seekTime(updated); + } + + onSetPlayhead(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 = Math.round(seconds * this.clipFps) / this.clipFps; studio.seekTime(updated); } @@ -208,102 +238,132 @@ export class AnimTimelineElement extends LitElement { let relativeX = event.clientX - elementBounds.left; let ratioX = Math.max(0, Math.min(relativeX / elementBounds.width, 1)); const time = (this.rangeEnd - this.rangeStart) * ratioX + this.rangeStart; + const final_time = Math.round(time * this.clipFps) / this.clipFps; - studio.moveKeyframeTime(id, time); + studio.moveKeyframeTime(id, final_time); } - #updateRenderWidth(): void { + updateRenderWidth(): void { this._renderWidth = this.getBoundingClientRect().width; } /** * Format a time value (in seconds) for displaying in the timeline view */ - timestamp(seconds: number) { + timestamp(seconds: number, major: boolean) { const sign = seconds < 0 ? "-" : ""; seconds = Math.abs(seconds); let minutes = Math.floor(seconds / 60); let secondsInMinute = seconds % 60; let flooredSeconds = Math.floor(secondsInMinute); - let fraction = Math.floor(100 * (secondsInMinute - flooredSeconds)); + let fraction = Math.round(this.clipFps * (secondsInMinute - flooredSeconds)); return html`${ sign - }${ + }${major || fraction == 0 ? html`${ minutes.toString(10).padStart(2, "0") }:${ flooredSeconds.toString(10).padStart(2, "0") - }.${ - fraction.toString(10).padStart(2, "0") - }`; + }` : ``} ${fraction != 0 ? html`f${ + fraction.toString(10) + }` : `` }`; } protected override render() { const range = this.rangeEnd - this.rangeStart; - let subdivisionScale = 0.5; - let majorSubdivisionScale = 1; + let fps = this.clipFps; + + let frameRange = Math.ceil(range * this.clipFps); + + let spf = 1 / fps; + + let majorSubdivisionSize = this.clipFps; + let minorSubdivisionSize = this.clipFps / 2; + let unlablelledSubdivisionSize = this.clipFps / 4; if (range < 0.5) { - subdivisionScale = 0.05; - majorSubdivisionScale = 0.1; + majorSubdivisionSize = this.clipFps / 2; + minorSubdivisionSize = this.clipFps / 12; + unlablelledSubdivisionSize = 1; } else if (range < 2) { - subdivisionScale = 1 / 4; - majorSubdivisionScale = 0.5; - } else if (range > 120) { - subdivisionScale = 30; - majorSubdivisionScale = 60; - } else if (range > 60) { - subdivisionScale = 10; - majorSubdivisionScale = 30; - } else if (range > 10) { - subdivisionScale = 5; - majorSubdivisionScale = 10; - } else if (range > 5) { - subdivisionScale = 1; - majorSubdivisionScale = 5; + majorSubdivisionSize = this.clipFps / 2; + minorSubdivisionSize = this.clipFps / 4; + unlablelledSubdivisionSize = 2; + } else if (range < 5) { + majorSubdivisionSize = this.clipFps; + minorSubdivisionSize = this.clipFps / 2; + unlablelledSubdivisionSize = this.clipFps / 4; + } else if (range < 10) { + majorSubdivisionSize = this.clipFps * 2; + minorSubdivisionSize = this.clipFps; + unlablelledSubdivisionSize = this.clipFps / 2; + } else if (range < 60) { + majorSubdivisionSize = this.clipFps * 10; + minorSubdivisionSize = this.clipFps * 5; + unlablelledSubdivisionSize = this.clipFps; + } else if (range < 120) { + majorSubdivisionSize = this.clipFps * 20; + minorSubdivisionSize = this.clipFps * 10; + unlablelledSubdivisionSize = this.clipFps * 2; + } else { + majorSubdivisionSize = Math.ceil(frameRange / 10); + minorSubdivisionSize = Math.ceil(frameRange / 20); + unlablelledSubdivisionSize = Math.ceil(frameRange / 40); } - - const scaledStart = this.rangeStart / subdivisionScale; - const scaledEnd = this.rangeEnd / subdivisionScale; - - console.log("Scaled Start", scaledStart, "Scaled End", scaledEnd, "Range Start", this.rangeStart, "Range End", this.rangeEnd, "Range", range, "Playhead", this.playHead); - let subdivisions : Array<{seconds: number, fraction: number, isMajor: boolean}> = []; - let currentOffset = scaledStart; - let currentOffsetSeconds = this.rangeStart; + let subdivisions : Array<{seconds: number, fraction: number, isMajor: boolean, isLabelled: boolean}> = []; - while (currentOffset < scaledEnd) { - const currentSeconds = currentOffsetSeconds; - const isMajor = currentOffsetSeconds % majorSubdivisionScale === 0; - subdivisions.push({ seconds: currentSeconds, fraction: (currentSeconds - this.rangeStart) / range, isMajor }); - let nextSubdiv = Math.ceil(currentOffset); - if (Math.abs(nextSubdiv - currentOffset) < 0.1) { - nextSubdiv += 1; + let initialFrame = Math.ceil(this.rangeStart * this.clipFps); + + for (let i = 0; i < frameRange; i++) { + let frame = i + initialFrame; + let seconds = frame * spf; + let fraction = (seconds - this.rangeStart) / range; + if (frame % majorSubdivisionSize === 0) { + subdivisions.push({ + seconds, + fraction, + isMajor: true, + isLabelled: true + }); + } else if (frame % minorSubdivisionSize === 0) { + subdivisions.push({ + seconds, + fraction, + isMajor: false, + isLabelled: true + }); + } else if (frame % unlablelledSubdivisionSize === 0) { + subdivisions.push({seconds, fraction, isMajor: false, isLabelled: false }); } - currentOffset = nextSubdiv; - currentOffsetSeconds = currentOffset * subdivisionScale; } - - console.log("Subdivisions", subdivisions.length, subdivisions); - + return html`
+
+ @click=${this.onSetPlayhead}>
- ${subdivisions.map(({ seconds, fraction, isMajor}, idx) => { + ${subdivisions.map(({ seconds, fraction, isMajor, isLabelled}, idx) => { const secondsPercentage = fraction * 100; return html` @@ -316,13 +376,13 @@ export class AnimTimelineElement extends LitElement { left: `${secondsPercentage}%` })} >
- ${true ? html` + ${isMajor || isLabelled ? html` - ${this.timestamp(seconds)} + ${this.timestamp(seconds, isMajor)} ` : nothing} `; diff --git a/studio-ui/src/lib/icon.element.ts b/studio-ui/src/lib/icon.element.ts index 50dddaa..72307a2 100644 --- a/studio-ui/src/lib/icon.element.ts +++ b/studio-ui/src/lib/icon.element.ts @@ -43,6 +43,7 @@ import farMountainSun from "@fortawesome/fontawesome-pro/svgs/regular/mountain-s import farArrowRightToBracket from "@fortawesome/fontawesome-pro/svgs/regular/arrow-right-to-bracket.svg?raw"; import farMagnifyingGlass from "@fortawesome/fontawesome-pro/svgs/regular/magnifying-glass.svg?raw"; import fasHouse from "@fortawesome/fontawesome-pro/svgs/solid/house.svg?raw"; +import fasRecord from "@fortawesome/fontawesome-pro/svgs/solid/circle.svg?raw"; import customCylinder from "../assets/icons/cylinder.svg?raw"; import customSphere from "../assets/icons/sphere.svg?raw"; @@ -115,6 +116,7 @@ function renderSvg(iconId: string) { "video": () => farVideo, "volume": () => farVolume, "xmark": () => fasXmark, + "record": () => fasRecord, _: () => null, }); diff --git a/studio/src/anim/timeline_animation.rs b/studio/src/anim/timeline_animation.rs index 71c8a6d..97ae6f9 100644 --- a/studio/src/anim/timeline_animation.rs +++ b/studio/src/anim/timeline_animation.rs @@ -33,7 +33,8 @@ impl Plugin for TimelinePlugin { .register_type::() .register_type::() .add_event::() - .add_event::(); + .add_event::() + .add_state::(); app.insert_resource(GlobalSeekTime { time: 0., @@ -48,6 +49,7 @@ impl Plugin for TimelinePlugin { app.add_systems( Update, ( + process_auto_key.run_if(in_state(KeyingMode::Auto)), process_keyframe_events, timeline_bound_component_animator_system::, ), @@ -70,6 +72,7 @@ impl Plugin for TimelinePlugin { wasm::notify_seek_time_changes.map(bevy::utils::error), wasm::notify_keyframe_changes.map(bevy::utils::error), wasm::notify_updated_animation_targets.map(bevy::utils::error), + wasm::notify_keying_mode_changed.map(bevy::utils::error), ), ); } @@ -84,6 +87,7 @@ pub enum TimelineInteractionEvent { Play, Pause, Seek(f32), + ToggleAutoKey, } #[allow(dead_code)] @@ -102,6 +106,13 @@ pub struct GlobalSeekTime { pub delta: Option, } +#[derive(States, Clone, Copy, Debug, PartialEq, Eq, Hash, Default)] +pub enum KeyingMode { + #[default] + Manual, + Auto, +} + #[derive(Clone, Debug, Copy, Default, Reflect, PartialEq, Serialize, Deserialize)] pub enum EaseType { #[default] @@ -246,6 +257,8 @@ impl FromStr for AnimationTarget { fn process_timeline_events( mut e_timeline_event: EventReader, mut r_global_seek_time: ResMut, + key_mode: Res>, + mut next_keying_mode: ResMut>, ) { for event in e_timeline_event.read() { match event { @@ -256,6 +269,12 @@ fn process_timeline_events( TimelineInteractionEvent::Seek(time) => { r_global_seek_time.time = time.max(0.); } + TimelineInteractionEvent::ToggleAutoKey => { + next_keying_mode.set(match key_mode.get() { + KeyingMode::Manual => KeyingMode::Auto, + KeyingMode::Auto => KeyingMode::Manual, + }); + } } r_global_seek_time.delta = None; @@ -344,6 +363,22 @@ fn process_keyframe_events( } } +fn process_auto_key( + changed: Query, Changed)>, + r_global_seek_time: Res, + mut event: EventWriter, +) { + if r_global_seek_time.playing || r_global_seek_time.is_changed() { + info!("Skipping Auto Key"); + return; + } + + for entity in &changed { + info!("Setting Auto Key"); + event.send(KeyframeInteractionEvent::RecordKeyframe { target: entity }) + } +} + fn generate_transform_animation( mut commands: Commands, keyframes: Query< @@ -578,7 +613,7 @@ mod wasm { }; use super::{ - AnimationTarget, EaseType, GlobalSeekTime, Keyframe, KeyframeInteractionEvent, + AnimationTarget, EaseType, GlobalSeekTime, Keyframe, KeyframeInteractionEvent, KeyingMode, TimedAnimationClipAsset, TimelineInteractionEvent, TransformKeyframe, }; @@ -601,6 +636,11 @@ mod wasm { SEEK_TIME.write_message(TimelineInteractionEvent::Pause); } + #[wasm_bindgen(js_name = toggleAutoKey)] + pub fn toggle_auto_key() { + SEEK_TIME.write_message(TimelineInteractionEvent::ToggleAutoKey); + } + #[wasm_bindgen(js_name = recordKeyframe)] pub fn record_keyframe(entities: Vec) { KEYFRAME_EVENT.write_message( @@ -699,6 +739,13 @@ mod wasm { removed: string[] } } + + export interface UpdateKeyingMode extends CustomEvent { + type: "keying-mode-changed", + detail: { + automatic: boolean + } + } declare global { export interface GlobalEventHandlersEventMap { @@ -722,6 +769,11 @@ mod wasm { removed: Vec, } + #[derive(Serialize, Deserialize)] + struct UpdateKeyingMode { + automatic: bool, + } + #[derive(Serialize, Deserialize)] struct TimedAnimationClipInfo { entity: String, @@ -914,4 +966,28 @@ mod wasm { &serde_json::to_value(r_global_seek_time.as_ref()).map_err(|e| format!("{e}"))?, ) } + + pub(super) fn notify_keying_mode_changed( + r_keying_mode: Res>, + q_window: Query<&Window, With>, + ) -> Result<(), String> { + if !r_keying_mode.is_changed() { + return Ok(()); + } + let Ok(window) = q_window.get_single() else { + return Ok(()); + }; + + crate::wasm::dispatch_to_js( + window, + "keying-mode-changed", + &serde_json::to_value(UpdateKeyingMode { + automatic: match r_keying_mode.get() { + KeyingMode::Manual => false, + KeyingMode::Auto => true, + }, + }) + .map_err(|e| format!("{e}"))?, + ) + } }