reorder poses in step and save the step

bouncy_frontend/src/lib/components/AnimatedStep.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { StepWrapper } from '$lib/instructor/bouncy_instructor';
+  import { timeBetweenMoves } from '$lib/stores/Beat';
+  import { counter } from '$lib/timer';
+  import Step from '../../routes/collection/Step.svelte';
+
+  /** @type {StepWrapper} */
+  export let step;
+  export let size = 100;
+
+  const beat = counter(-1, 1, $timeBetweenMoves);
+</script>
+
+<Step {size} {step} poseIndex={$beat} animationTime={$timeBetweenMoves * 0.7} />

bouncy_frontend/src/lib/components/editor/StepEditForm.svelte

@@ -9,6 +9,8 @@
   import DraggableList from '../ui/DraggableList.svelte';
   import UiBox from '../ui/UiBox.svelte';
   import Pose from '../Pose.svelte';
+  import StepPositionDetails from './StepPositionDetails.svelte';
+  import AnimatedStep from '../AnimatedStep.svelte';
 
   const localCollectionCtx = getContext('localCollection');
   const availablePoses = localCollectionCtx.poses;
@@ -19,12 +21,17 @@
     stepName = step.name;
   }
 
+  export function save() {
+    localCollectionCtx.addStep(step);
+  }
+
   /** @type {StepWrapper} */
   let step = newStep();
   let stepName = $t('editor.name-input-placeholder');
   $: stepPositionBuilders = step.positions();
 
   let showAddNewItem = false;
+  let selectedIndex = -1;
 
   function newStep() {
     const idNum = Math.random().toFixed(6).substring(2);
@@ -40,11 +47,47 @@
     step.addPosition(new StepPositionBuilder(pose));
     step = step;
   }
+
+  /** @type {(item: any, index: number) => void} */
+  function onRemove(_item, index) {
+    step.removePosition(index);
+    step = step;
+  }
+
+  /**
+   * @type {(
+   *    draggedItem: StepPositionBuilder,
+   *    draggedIndex: number,
+   *    swappedItem: StepPositionBuilder,
+   *    swappedIndex: number
+   * )
+   * => number
+   * } */
+  function onDragMove(draggedItem, draggedIndex, swappedItem, swappedIndex) {
+    if (draggedIndex < swappedIndex) {
+      step.removePosition(swappedIndex);
+      step.insertPosition(draggedIndex, swappedItem);
+    } else if (draggedIndex > swappedIndex) {
+      step.removePosition(draggedIndex);
+      step.insertPosition(swappedIndex, draggedItem);
+    }
+    step = step;
+    console.log(step.poses().map((pose) => pose.name("en")));
+    return swappedIndex;
+  }
 </script>
 
 <input id="name" name="name" bind:value={stepName} />
 
-<DraggableList items={stepPositionBuilders} bind:showAddNewItem>
+<AnimatedStep {step} size={200}></AnimatedStep>
+
+<DraggableList
+  items={stepPositionBuilders}
+  bind:selectedIndex
+  bind:showAddNewItem
+  {onDragMove}
+  {onRemove}
+>
   <slot slot="main" let:item={position}>
     <div class="pose">
       <Pose pose={position.pose()}></Pose>
@@ -53,6 +96,10 @@
   <slot slot="name" let:item={position}>{position.pose().name('en')}</slot>
 </DraggableList>
 
+{#if selectedIndex !== -1}
+  <StepPositionDetails position={stepPositionBuilders[selectedIndex]} />
+{/if}
+
 {#if showAddNewItem}
   <UiBox title="editor.pick-pose-prompt">
     <div>

bouncy_frontend/src/lib/components/editor/StepPositionDetails.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { StepPositionBuilder } from '$lib/instructor/bouncy_instructor';
+
+  /** @type {StepPositionBuilder} */
+  export let position;
+
+  $: pose = position.pose();
+</script>
+
+<h2>{pose.name('en')}</h2>
+{position.jumpHeight}
+

bouncy_frontend/src/lib/instructor/bouncy_instructor.d.ts

@@ -82,39 +82,17 @@ export function addLocalPoses(poses: (PoseWrapper)[]): void;
 */
 export function loadLocalSteps(steps: (StepWrapper)[]): void;
 /**
+* Define in which direction a pose should be oriented.
 */
-export enum SkeletonField {
-  LeftThigh = 0,
-  LeftShin = 1,
-  LeftArm = 2,
-  LeftForearm = 3,
-  LeftFoot = 4,
-  RightThigh = 5,
-  RightShin = 6,
-  RightArm = 7,
-  RightForearm = 8,
-  RightFoot = 9,
-}
-/**
-*/
-export enum PoseDirection {
-/**
-* Dancer faces the camera.
-*/
-  Front = 0,
-/**
-* Dancer faces to their right. (Left in non-mirrored video.)
-*/
+export enum Orientation {
+  ToCamera = 0,
   Right = 1,
-}
+  Away = 2,
+  Left = 3,
 /**
-* Best guess for what the dancer needs to change to fit the pose.
+* It doesn't matter in which direction the pose is done.
 */
-export enum PoseHint {
-  DontKnow = 0,
-  LeftRight = 1,
-  ZOrder = 2,
-  WrongDirection = 3,
+  Any = 4,
 }
 /**
 */
@@ -169,6 +147,41 @@ export enum DetectionFailureReason {
 */
   NoNewData = 6,
 }
+/**
+* Best guess for what the dancer needs to change to fit the pose.
+*/
+export enum PoseHint {
+  DontKnow = 0,
+  LeftRight = 1,
+  ZOrder = 2,
+  WrongDirection = 3,
+}
+/**
+*/
+export enum PoseDirection {
+/**
+* Dancer faces the camera.
+*/
+  Front = 0,
+/**
+* Dancer faces to their right. (Left in non-mirrored video.)
+*/
+  Right = 1,
+}
+/**
+*/
+export enum SkeletonField {
+  LeftThigh = 0,
+  LeftShin = 1,
+  LeftArm = 2,
+  LeftForearm = 3,
+  LeftFoot = 4,
+  RightThigh = 5,
+  RightShin = 6,
+  RightArm = 7,
+  RightForearm = 8,
+  RightFoot = 9,
+}
 
 import type { Readable } from "svelte/store";
 
@@ -784,17 +797,6 @@ export class Segment {
 export class Skeleton {
   free(): void;
 /**
-* Compute 2d coordinates for the skeleton for rendering.
-*
-* The skeleton will be rendered assuming hard-coded values for body part
-* proportional lengths, multiplied with the size parameter. The hip
-* segment will have its center at the given position.
-* @param {Cartesian2d} hip_center
-* @param {number} size
-* @returns {SkeletonV2}
-*/
-  render(hip_center: Cartesian2d, size: number): SkeletonV2;
-/**
 * @param {boolean} sideway
 * @returns {Skeleton}
 */
@@ -808,6 +810,17 @@ export class Skeleton {
 */
   debugString(): string;
 /**
+* Compute 2d coordinates for the skeleton for rendering.
+*
+* The skeleton will be rendered assuming hard-coded values for body part
+* proportional lengths, multiplied with the size parameter. The hip
+* segment will have its center at the given position.
+* @param {Cartesian2d} hip_center
+* @param {number} size
+* @returns {SkeletonV2}
+*/
+  render(hip_center: Cartesian2d, size: number): SkeletonV2;
+/**
 * Does the dancer face away more than they face the camera?
 */
   backwards: boolean;
@@ -941,10 +954,6 @@ export class StepFileWrapper {
 */
   constructor();
 /**
-* FIXME: This adds steps as lab steps and then calls a warm up. This is to
-* avoid the problem where a step wrapper can only be created for steps
-* that are already registered in global state. A proper refactoring should
-* solve this.
 * @param {string} text
 * @returns {StepFileWrapper}
 */
@@ -988,15 +997,15 @@ export class StepPositionBuilder {
 */
   setJumpHeight(height: number): void;
 /**
-* @param {string} orientation
+* @param {Orientation} orientation
 */
-  setOrientation(orientation: string): void;
+  setOrientation(orientation: Orientation): void;
 /**
 */
   readonly jumpHeight: number | undefined;
 /**
 */
-  readonly orientation: string;
+  readonly orientation: Orientation;
 }
 /**
 */

bouncy_frontend/src/lib/instructor/bouncy_instructor_bg.wasm.d.ts

@@ -120,10 +120,10 @@ export function stepfilewrapper_removeStep(a: number, b: number, c: number, d: n
 export function stepfilewrapper_steps(a: number, b: number): void;
 export function steppositionbuilder_jumpHeight(a: number, b: number): void;
 export function steppositionbuilder_new(a: number): number;
-export function steppositionbuilder_orientation(a: number, b: number): void;
+export function steppositionbuilder_orientation(a: number): number;
 export function steppositionbuilder_pose(a: number): number;
 export function steppositionbuilder_setJumpHeight(a: number, b: number): void;
-export function steppositionbuilder_setOrientation(a: number, b: number, c: number): void;
+export function steppositionbuilder_setOrientation(a: number, b: number): void;
 export function steps(a: number): void;
 export function stepsByName(a: number, b: number, c: number): void;
 export function stepsBySource(a: number, b: number, c: number): void;

bouncy_frontend/src/routes/editor/step/new/+page.svelte

@@ -2,8 +2,11 @@
   import StepEditForm from '$lib/components/editor/StepEditForm.svelte';
   import Header from '$lib/components/ui/Header.svelte';
   import { t } from '$lib/i18n';
+
+  /** @type {() => void} */
+  let save;
 </script>
 
-<Header title={$t('editor.step.new')}></Header>
+<Header title={$t('editor.step.new')} button="save" on:click={save}></Header>
 
-<StepEditForm></StepEditForm>
+<StepEditForm bind:save></StepEditForm>

bouncy_instructor/src/public/editor/step_position_builder.rs

@@ -40,15 +40,28 @@ impl StepPositionBuilder {
     }
 
     // TODO
-    // #[wasm_bindgen(js_name="setOrientation")]
-    // pub fn set_orientation(&mut self, ){}
     // #[wasm_bindgen(js_name="setPivot")]
     // pub fn set_pivot(&mut self, ){}
 
+    #[wasm_bindgen(getter, js_name = "jumpHeight")]
+    pub fn jump_height(&self) -> Option<f32> {
+        self.jump_height
+    }
+
     #[wasm_bindgen(js_name = "setJumpHeight")]
     pub fn set_jump_height(&mut self, height: f32) {
         self.jump_height = Some(height);
     }
+
+    #[wasm_bindgen(getter)]
+    pub fn orientation(&self) -> Orientation {
+        self.orientation
+    }
+
+    #[wasm_bindgen(js_name = "setOrientation")]
+    pub fn set_orientation(&mut self, orientation: Orientation) {
+        self.orientation = orientation
+    }
 }
 
 impl From<&StepPositionBuilder> for StepPosition {

bouncy_instructor/src/public/parsing/step_file.rs

@@ -4,6 +4,7 @@
 use crate::parsing::ParseFileError;
 use crate::pose_file::BodyPoint;
 use serde::{Deserialize, Serialize};
+use wasm_bindgen::prelude::wasm_bindgen;
 
 const CURRENT_VERSION: u16 = 0;
 
@@ -63,7 +64,8 @@ pub(crate) struct StepPosition {
 
 /// Define in which direction a pose should be oriented.
 #[derive(Serialize, Deserialize, Debug, PartialEq, Clone, Copy)]
-pub(crate) enum Orientation {
+#[wasm_bindgen]
+pub enum Orientation {
     ToCamera,
     Right,
     Away,