Add click-to-set-time to path animation slider

SleipnirGroup · May 17, 2024 · f6c09fa · f6c09fa
1 parent 4be0ee5
commit f6c09fa
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src-svelte/src/lib/components/field/PathAnimationSlider.svelte b/src-svelte/src/lib/components/field/PathAnimationSlider.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
     export let timeStore: Writable<number>;
-    export let trajectory;
-    export let totalTime;
+    export let trajectory: TrajectorySample[];
+    export let totalTime : number;
     import * as d3 from "d3";
     import {onMount} from "svelte";
     import {GRAPH_PANEL_MIN_HEIGHT} from "$lib/uistate"
     import GraphPanel from "./GraphPanel.svelte"
+    import type { TrajectorySample } from "$lib/trajectory.js";
+    import type { Writable } from "svelte/store";
     let root: SVGSVGElement;
     let widthPx: number;
     let heightPx: number;
     let barLength = 0;
     $: maxBarLength=widthPx-leftMargin-rightMargin;
-    function updateBarLength(time, totalTime, widthPx){
+    function updateBarLength(time: number, totalTime: number, widthPx: number){
         if (totalTime > 0 && widthPx != undefined) {
             barLength = maxBarLength * time/totalTime;
         } else {
@@ -21,13 +23,16 @@
     $: updateBarLength($timeStore, totalTime, widthPx)
     const barHeight = 8;
     $: pxToSec = totalTime/maxBarLength
+    function setTimeFromCoord(svgX: number) {
+        timeStore.set(
+                Math.min(Math.max(
+                    (svgX-leftMargin) * pxToSec, 0), totalTime))
+    }
     onMount(()=>{
         const dragHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => {
-            timeStore.set(
-                Math.min(Math.max(
-                    (event.x-leftMargin) * pxToSec, 0), totalTime))
+            setTimeFromCoord(event.x);
         })
         // .on("start", () => {
         //   this.selectWaypoint();
@@ -61,13 +66,17 @@
 <div class="Timeline" bind:clientWidth = {widthPx} bind:clientHeight={heightPx}>
     <svg class="Root" bind:this={root}>
         <!-- background -->
-        <rect x={leftMargin} y={topMargin} width={maxBarLength} height={barHeight} fill="var(--background-light-gray)"/>
+        <rect x={leftMargin} y={topMargin} width={maxBarLength} height={barHeight} fill="var(--background-light-gray)"
+            on:click={(e)=>{
+
+                setTimeFromCoord(e.offsetX);
+            }}/>
         <rect x={0} y={minTimelineHeight-1} width={widthPx} height={1} fill="var(--divider-gray)"/>
         <GraphPanel xOrigin={leftMargin} yOrigin={minTimelineHeight + 12} width={maxBarLength} height={250} trajectory={trajectory}></GraphPanel> 
         <!-- Playhead vertical line -->
         <rect x={leftMargin+barLength-1} y={topMargin} width={2} height={heightPx-topMargin} fill="var(--divider-gray)"/>
         <!-- Top bar of so-far -->
-        <rect x={leftMargin} y={topMargin} width={barLength} height={8} fill="var(--accent-purple)"/>
+        <rect x={leftMargin} y={topMargin} width={barLength} height={8} pointer-events="none" fill="var(--accent-purple)"/>
         <!-- Current time drag handle -->
         <circle class="handle"
             cx={leftMargin + barLength}

diff --git a/src-tauri/src/state/trajectory.rs b/src-tauri/src/state/trajectory.rs
@@ -129,6 +129,7 @@ pub async fn get_trajectory(pool: &Pool<Sqlite>, path_id: &i64) -> Result<Vec<Ho
     res.iter().map(|row|sample_from_row(row)).collect()
 }
 
+/// Convert a row of the `samples` table into a HolonomicTrajectorySample.
 fn sample_from_row(row: &SqliteRow) -> Result<HolonomicTrajectorySample, Error> {
     let timestamp = row.try_get("timestamp")?;
     let x = row.try_get("x")?;