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

studio/src/anim/camera.rs

@@ -0,0 +1,208 @@
+use bevy::prelude::*;
+use itertools::Itertools;
+use space_editor::space_prefab::editor_registry::EditorRegistryExt;
+
+use crate::math::{InvLerp, Lerp};
+
+use super::GlobalSeekTime;
+
+pub struct CameraAnimPlugin;
+impl Plugin for CameraAnimPlugin {
+    fn build(&self, app: &mut App) {
+        app.register_type::<CameraKeyframe>()
+            .editor_registry::<CameraKeyframe>()
+            .register_type::<CameraTargetKeyframe>()
+            .editor_registry::<CameraTargetKeyframe>();
+
+        app.add_systems(Update, draw_camera_keyframes);
+
+        #[cfg(feature = "wasm")]
+        app.add_systems(
+            Update,
+            (
+                wasm::spawn_camera_keyframes,
+                wasm::notify_keyframe_changes.map(bevy::utils::error),
+                wasm::process_update_keyframe,
+            ),
+        );
+    }
+}
+
+#[derive(Component, Clone, Copy, Debug, Default, Deref, DerefMut, Reflect)]
+#[reflect(Component)]
+pub struct CameraKeyframe(pub f32);
+
+#[derive(Component, Clone, Copy, Debug, Default, Deref, DerefMut, Reflect)]
+#[reflect(Component)]
+pub struct CameraTargetKeyframe(pub f32);
+
+fn draw_camera_keyframes(
+    mut gizmos: Gizmos,
+    r_seek_time: Res<GlobalSeekTime>,
+    q_cam_keyframe_xforms: Query<&GlobalTransform, With<CameraKeyframe>>,
+    q_cam_target_keyframe_xforms: Query<&GlobalTransform, With<CameraTargetKeyframe>>,
+    q_cam_keyframes: Query<(&CameraKeyframe, &GlobalTransform)>,
+) {
+    if q_cam_keyframes.is_empty() {
+        return;
+    }
+
+    for world_xform in q_cam_keyframe_xforms
+        .iter()
+        .chain(q_cam_target_keyframe_xforms.iter())
+    {
+        let origin = world_xform.translation();
+        let x_axis = world_xform.right() * 0.25;
+        let y_axis = world_xform.up() * 0.25;
+        let z_axis = world_xform.back() * 0.25;
+
+        gizmos.line(origin, origin + x_axis, Color::RED);
+        gizmos.line(origin, origin + y_axis, Color::GREEN);
+        gizmos.line(origin, origin + z_axis, Color::BLUE);
+    }
+
+    let seek_time = **r_seek_time;
+    let keyframes_sorted = q_cam_keyframes
+        .iter()
+        .sorted_by(|(a, _), (b, _)| a.partial_cmp(&b.0).unwrap())
+        .collect_vec();
+
+    let (timestamp_first, xform_first) = keyframes_sorted.first().unwrap();
+    let (timestamp_last, xform_last) = keyframes_sorted.last().unwrap();
+
+    if seek_time <= timestamp_first.0 {
+        let (_, rot, pos) = xform_first.to_scale_rotation_translation();
+        gizmos.sphere(pos, rot, 0.25, Color::WHITE);
+    } else if seek_time >= timestamp_last.0 {
+        let (_, rot, pos) = xform_last.to_scale_rotation_translation();
+        gizmos.sphere(pos, rot, 0.25, Color::WHITE);
+    } else if let Some(((timestamp_a, xform_a), (timestamp_b, xform_b))) = keyframes_sorted
+        .iter()
+        .tuple_windows()
+        .find(|((a, _), (b, _))| a.0 <= seek_time && b.0 >= seek_time)
+    {
+        let t = seek_time.inv_lerp(timestamp_a.0, timestamp_b.0);
+        let (_, rot_a, pos_a) = xform_a.to_scale_rotation_translation();
+        let (_, rot_b, pos_b) = xform_b.to_scale_rotation_translation();
+        let pos = t.lerp(pos_a, pos_b);
+        let rot = Quat::slerp(rot_a, rot_b, t);
+
+        gizmos.sphere(pos, rot, 0.25, Color::WHITE);
+    }
+}
+
+#[cfg(feature = "wasm")]
+mod wasm {
+    use std::sync::Arc;
+
+    use bevy::{prelude::*, window::PrimaryWindow};
+    use space_editor::prelude::space_undo::{self, AddedEntity};
+    use wasm_bindgen::prelude::*;
+
+    use crate::{
+        camera_controller::CameraController,
+        wasm::{self, FromStr, StaticBuffer, WasmMessageBuffer},
+    };
+
+    use super::{CameraKeyframe, CameraTargetKeyframe};
+
+    static ADD_KEYFRAME: WasmMessageBuffer<f32> = WasmMessageBuffer::new();
+    static UPDATE_KEYFRAME: WasmMessageBuffer<(Entity, f32)> = WasmMessageBuffer::new();
+
+    #[wasm_bindgen(js_name = addCameraKeyframe)]
+    pub fn add_camera_keyframe(timestamp: f32) {
+        ADD_KEYFRAME.write_message(timestamp);
+    }
+
+    pub(super) fn spawn_camera_keyframes(
+        mut cmd: Commands,
+        mut ew_changes: EventWriter<space_undo::NewChange>,
+        q_camera: Query<(&CameraController, &GlobalTransform)>,
+    ) {
+        if let Some(timestamp) = ADD_KEYFRAME.take_message() {
+            let Ok((cam_controller, world_xform)) = q_camera.get_single() else {
+                return;
+            };
+
+            let entity = cmd
+                .spawn((
+                    Name::new("Camera Target Keyframe"),
+                    TransformBundle::from_transform(Transform::from_translation(
+                        cam_controller.focus,
+                    )),
+                    CameraTargetKeyframe(timestamp),
+                ))
+                .id();
+            ew_changes.send(space_undo::NewChange {
+                change: Arc::new(AddedEntity { entity }),
+            });
+
+            let entity = cmd
+                .spawn((
+                    Name::new("Camera Keyframe"),
+                    TransformBundle::from_transform(Transform::from(*world_xform)),
+                    CameraKeyframe(timestamp),
+                ))
+                .id();
+            ew_changes.send(space_undo::NewChange {
+                change: Arc::new(AddedEntity { entity }),
+            });
+        }
+    }
+
+    #[wasm_bindgen(js_name = updateKeyframe)]
+    pub fn update_keyframe(entity: &str, timestamp: f32) {
+        let entity = Entity::from_str(entity).unwrap();
+        UPDATE_KEYFRAME.write_message((entity, timestamp));
+    }
+
+    pub(super) fn process_update_keyframe(
+        mut q_camera_keyframes: Query<&mut CameraKeyframe>,
+        mut q_camera_target_keyframes: Query<&mut CameraTargetKeyframe>,
+    ) {
+        if let Some((ent, timestamp)) = UPDATE_KEYFRAME.take_message() {
+            if let Ok(mut keyframe) = q_camera_keyframes.get_mut(ent) {
+                **keyframe = timestamp;
+            } else if let Ok(mut keyframe) = q_camera_target_keyframes.get_mut(ent) {
+                **keyframe = timestamp;
+            } else {
+                warn!("No matching keyframe found for entity: {ent:?}");
+            }
+        }
+    }
+
+    #[wasm_bindgen(typescript_custom_section)]
+    const CAMERA_KEYFRAMES_EVENT: &str = r#"
+export interface CameraKeyframesEvent extends CustomEvent {
+    type: "camera-keyframes";
+    detail: Record<string, number>;
+}
+
+declare global {
+    export interface GlobalEventHandlersEventMap {
+        "camera-keyframes": CameraKeyframesEvent;
+    }
+}
+    "#;
+
+    pub(super) fn notify_keyframe_changes(
+        mut l_notified: Local<serde_json::Map<String, serde_json::Value>>,
+        q_keyframes: Query<(Entity, &CameraKeyframe)>,
+        q_window: Query<&Window, With<PrimaryWindow>>,
+    ) -> Result<(), String> {
+        if l_notified.len() == q_keyframes.iter().count() {
+            return Ok(());
+        }
+
+        let Ok(window) = q_window.get_single() else {
+            return Ok(());
+        };
+
+        l_notified.clear();
+        for (ent, timestamp) in q_keyframes.iter() {
+            l_notified.insert(format!("{ent:?}"), timestamp.0.into());
+        }
+
+        wasm::dispatch_to_js(window, "camera-keyframes", &*l_notified)
+    }
+}

studio/src/anim/mod.rs

@@ -9,6 +9,7 @@ use space_editor::space_prefab::editor_registry::EditorRegistryExt;
 use crate::hierarchy;
 pub use retargeting::*;
 
+mod camera;
 mod retargeting;
 
 pub struct AnimPlugin;
@@ -28,11 +29,19 @@ impl Plugin for AnimPlugin {
             .editor_registry::<InvBindPose>();
 
         app.add_systems(Update, process_skinned_meshes);
+        app.insert_resource(GlobalSeekTime(0.));
 
-        app.add_plugins(retargeting::RetargetingPlugin);
+        app.add_plugins((retargeting::RetargetingPlugin, camera::CameraAnimPlugin));
+
+        #[cfg(feature = "wasm")]
+        app.add_systems(Update, wasm::update_global_seek_time);
     }
 }
 
+#[derive(Resource, Clone, Copy, Debug, Default, Deref, DerefMut, Reflect)]
+#[reflect(Resource)]
+pub struct GlobalSeekTime(pub f32);
+
 #[derive(Component, Clone, Copy, Debug, Default, Reflect)]
 #[reflect(Component)]
 pub struct Skeleton;
@@ -139,3 +148,26 @@ fn process_skinned_meshes(
         }
     }
 }
+
+#[cfg(feature = "wasm")]
+mod wasm {
+    use bevy::prelude::*;
+    use wasm_bindgen::prelude::*;
+
+    use crate::wasm::{StaticBuffer, WasmMessageBuffer};
+
+    use super::GlobalSeekTime;
+
+    static SEEK_TIME: WasmMessageBuffer<f32> = WasmMessageBuffer::new();
+
+    #[wasm_bindgen(js_name = seekTime)]
+    pub fn seek_time(timestamp: f32) {
+        SEEK_TIME.write_message(timestamp);
+    }
+
+    pub(super) fn update_global_seek_time(mut r_seek_time: ResMut<GlobalSeekTime>) {
+        if let Some(timestamp) = SEEK_TIME.take_message() {
+            **r_seek_time = timestamp;
+        }
+    }
+}

studio/src/input.rs

@@ -79,6 +79,8 @@ pub enum Selection {
     Clear,
     /// Focus the camera on the currently selected entity
     Focus,
+    /// Delete the currently selected entity and its descendants
+    Delete,
 }
 impl From<Selection> for Action {
     fn from(value: Selection) -> Self {
@@ -100,6 +102,12 @@ fn translate_selection_events(keyboard: Res<Input<KeyCode>>, mut input: EventWri
     } else if keyboard.just_released(KeyCode::F) {
         input.send(InputAction(Lifecycle::Stop, Selection::Focus.into()));
     }
+
+    if keyboard.just_pressed(KeyCode::Delete) {
+        input.send(InputAction(Lifecycle::Start, Selection::Delete.into()));
+    } else if keyboard.just_released(KeyCode::Delete) {
+        input.send(InputAction(Lifecycle::Stop, Selection::Delete.into()));
+    }
 }
 
 fn translate_debug_toggle(keyboard: Res<Input<KeyCode>>, mut input: EventWriter<InputAction>) {

studio/src/inspector/wasm.rs

@@ -52,7 +52,7 @@ export interface EntityMultiSpawnEvent extends CustomEvent {
 }
 
 declare global {
-    export interface HTMLElementEventMap {
+    export interface GlobalEventHandlersEventMap {
         "entity-spawn": EntitySpawnEvent;
         "entity-despawn": EntityDespawnEvent;
         "entity-multi-spawn": EntityMultiSpawnEvent;

studio/src/interaction/selection.rs

@@ -1,8 +1,11 @@
+use std::sync::Arc;
+
 use bevy::{prelude::*, render::mesh::skinning::SkinnedMesh};
 use bevy_mod_outline::{
     AutoGenerateOutlineNormalsPlugin, OutlineBundle, OutlinePlugin, OutlineVolume,
 };
 use bevy_mod_picking::{prelude::Pointer, selection::Select, PickableBundle};
+use space_editor::prelude::space_undo::{self, NewChange, RemovedEntity};
 
 use crate::{
     input::{self, Action, InputAction, Lifecycle},
@@ -13,7 +16,13 @@ pub struct SelectionPlugin;
 impl Plugin for SelectionPlugin {
     fn build(&self, app: &mut App) {
         app.add_plugins((OutlinePlugin, AutoGenerateOutlineNormalsPlugin))
-            .add_systems(Update, update_selection)
+            .add_systems(
+                Update,
+                (
+                    update_selection,
+                    process_delete_inputs.run_if(resource_exists::<Selection>()),
+                ),
+            )
             .add_systems(
                 PostUpdate,
                 draw_selection_outline.run_if(resource_changed_or_removed::<Selection>()),
@@ -149,6 +158,28 @@ fn update_selection(
     }
 }
 
+fn process_delete_inputs(
+    mut cmd: Commands,
+    mut er_input: EventReader<InputAction>,
+    mut ew_changes: EventWriter<space_undo::NewChange>,
+    r_selection: Res<Selection>,
+) {
+    if er_input.read().any(|action| {
+        matches!(
+            action,
+            InputAction(Lifecycle::Stop, Action::Selection(input::Selection::Delete))
+        )
+    }) {
+        let entity = **r_selection;
+
+        cmd.entity(entity).despawn_recursive();
+        cmd.remove_resource::<Selection>();
+        ew_changes.send(NewChange {
+            change: Arc::new(RemovedEntity { entity }),
+        });
+    }
+}
+
 fn draw_selection_outline(
     mut cmd: Commands,
     q_selected: Query<&Children, With<Selected>>,
@@ -193,7 +224,7 @@ mod wasm {
     use wasm_bindgen::prelude::*;
 
     use super::{Selected, Selection};
-    use crate::wasm::{self, StaticBuffer, WasmMessageBuffer};
+    use crate::wasm::{self, FromStr, StaticBuffer, WasmMessageBuffer};
 
     #[wasm_bindgen(typescript_custom_section)]
     const EVENT_DECLARATION: &str = r#"
@@ -207,7 +238,7 @@ export interface EntitySelectEvent extends CustomEvent {
 }
 
 declare global {
-    export interface HTMLElementEventMap {
+    export interface GlobalEventHandlersEventMap {
         "entity-select": EntitySelectEvent;
     }
 }
@@ -225,12 +256,7 @@ declare global {
 
     #[wasm_bindgen]
     pub fn select(entity: &str) {
-        let mut split = entity.split('v');
-        let index = split.next().unwrap().parse::<u32>().unwrap();
-        let generation = split.next().unwrap().parse::<u32>().unwrap();
-        let bits = (generation as u64) << 32 | index as u64;
-
-        let entity = Entity::from_bits(bits);
+        let entity = Entity::from_str(entity).unwrap();
         SELECTION_REQUEST.write_message(entity);
     }
 

studio/src/scene.rs

@@ -460,7 +460,7 @@ export interface SceneStateEvent extends CustomEvent {
 }
 
 declare global {
-    export interface HTMLElementEventMap {
+    export interface GlobalEventHandlersEventMap {
         "scene-state": SceneStateEvent;
     }
 }

studio/src/wasm/conv.rs

@@ -83,6 +83,12 @@ impl AsJson for GlobalTransform {
     }
 }
 
+impl AsJson for serde_json::Map<String, JsonValue> {
+    fn as_json(&self) -> JsonValue {
+        JsonValue::Object(self.clone())
+    }
+}
+
 impl<T> AsJsValue for T
 where
     T: AsJson,
@@ -138,3 +144,38 @@ impl AsJsValue for u32 {
         Ok(JsValue::from_f64(*self as f64))
     }
 }
+
+/// A crate-local version of `std::str::FromStr` that can be implemented for
+/// foreign types
+pub trait FromStr: Sized {
+    type Err;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err>;
+}
+
+impl FromStr for Entity {
+    type Err = String;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let fmt_err =
+            || format!("Expected a string with format '<integer>v<integer>', found '{s}'");
+
+        let mut split = s.split('v');
+
+        let index = split
+            .next()
+            .unwrap()
+            .parse::<u32>()
+            .map_err(|_| fmt_err())?;
+
+        let generation = split
+            .next()
+            .unwrap()
+            .parse::<u32>()
+            .map_err(|_| fmt_err())?;
+
+        let bits = (generation as u64) << 32 | index as u64;
+
+        Ok(Entity::from_bits(bits))
+    }
+}