Add signal wrapper

SleipnirGroup · Jul 4, 2024 · fd5831f · fd5831f
1 parent f6c09fa
commit fd5831f
Show file tree

Hide file tree

Showing 46 changed files with 2,072 additions and 1,678 deletions.
diff --git a/src-svelte/package-lock.json b/src-svelte/package-lock.json
diff --git a/src-svelte/package.json b/src-svelte/package.json
@@ -12,18 +12,18 @@
   "dependencies": {
     "@iconify/tools": "^4.0.4",
     "@tauri-apps/api": "^1.5.3",
-    "flowbite-svelte-icons": "^1.5.0"
+    "runed": "^0.14.0"
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.66",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "next",
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.10.2",
     "postcss": "^8.4.32",
     "postcss-load-config": "^5.0.2",
-    "svelte": "^4.2.7",
+    "svelte": "^5.0.0-next.164",
     "svelte-check": "^3.6.0",
     "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",

diff --git a/src-svelte/src/lib/PathGradient.ts b/src-svelte/src/lib/PathGradient.ts
@@ -1,5 +1,5 @@
 
-import { type TrajectorySample } from "$lib/trajectory.js";
+import { type TrajectorySample } from "$lib/trajectory.svelte.js";
 
 /**
  * Represents a path gradient.

diff --git a/src-svelte/src/lib/commands.ts b/src-svelte/src/lib/commands.ts
@@ -1,22 +1,30 @@
 import { invoke } from "@tauri-apps/api"
-import type { TrajectorySample } from "./trajectory.js"
-import type { Waypoint, WaypointNoID } from "./waypoint.js"
+import type { TrajectorySample } from "./trajectory.svelte.js"
+import type {IWaypoint} from "./waypoint.svelte.js"
 
+const config = {
+    mass: 74.088,
+    rotationalInertia: 6.0,
+    bumperWidth: 0.876,
+    bumperLength: 0.876,
+    wheelbase: 0.578,
+    trackWidth: 0.578,
+    motorMaxTorque: 1.162,
+    motorMaxVelocity: 4800.0,
+    gearing: 6.75,
+    wheelRadius: 0.050799972568014815,
+    wheelMaxTorque: 1.162*6.75,
+    wheelMaxVelocity: (4800 * (Math.PI * 2)) / 60 / 6.75
+}
 export default {
-    CMD_GENERATE_TRAJ: (path: number)=>
-        invoke("cmd_generate_trajectory", {id: path}) as Promise<TrajectorySample[]>,
-    CMD_GET_PATH_WAYPOINTS: (path: number)=>
-        invoke("cmd_get_path_waypoints", {id: path}) as Promise<Waypoint[]>,
-    CMD_GET_TRAJECTORY: (path: number)=>
-        invoke("cmd_get_trajectory", {pathId:path}) as Promise<TrajectorySample[]>,
-    CMD_DELETE_PATH_WAYPOINT: (path: number, wpt: number)=>
-        invoke("cmd_delete_path_waypoint", {pathId: path, wptId: wpt}) as Promise<void>,
-    CMD_ADD_PATH_WAYPOINT: (path: number, update: Partial<WaypointNoID>)=>
-        invoke("cmd_add_path_waypoint", { id: path, update }) as Promise<Waypoint>,
-    CMD_GET_WAYPOINT: (wpt: number)=>
-        invoke("cmd_get_waypoint", {id:wpt}) as Promise<Waypoint>,
-    CMD_UPDATE_WAYPOINT: (wpt: number, update: Partial<WaypointNoID>)=>
-        invoke("cmd_update_waypoint", {id: wpt, update}) as Promise<void>,
+    CMD_GENERATE_TRAJ: (path_id: number, waypoints: IWaypoint[],)=>{
+        if (waypoints.length >= 2) {
+            return invoke("generate_trajectory", {handle: path_id, path: waypoints, config, constraints: [], circleObstacles: [], polygonObstacles: []}) as Promise<{samples: TrajectorySample[]}>
+        } else {
+            throw "Generated with <2 waypoints";
+        } 
+    }
+
 
 
 

diff --git a/src-svelte/src/lib/components/field/Field.svelte b/src-svelte/src/lib/components/field/Field.svelte
@@ -3,8 +3,8 @@
 
 import styles from "./Field.module.css";
 import FieldOverlayRoot from "./svg/FieldOverlayRoot.svelte";
-import {generate} from "$lib/path"
-export let pathId;
+import {generate} from "$lib/path.svelte.ts"
+let {pathId} = $props();
 // import IconButton from "@mui/material/IconButton";
 // import ShapeLineIcon from "@mui/icons-material/ShapeLine";
 // import { CircularProgress, Tooltip } from "@mui/material";
@@ -23,7 +23,7 @@ export let pathId;
 </script>
       <div class={styles.Container}>
         <FieldOverlayRoot pathId={pathId}></FieldOverlayRoot>
-        <button class="btn btn-circle z-10 absolute" on:click={()=>generate(pathId)}>Gen</button>
+        <button class="btn btn-circle z-10 absolute" onclick={()=>generate(pathId)}>Gen</button>
         <!-- {selectedSidebar !== undefined &&
           "heading" in selectedSidebar &&
           activePath.waypoints.find(
@@ -152,5 +152,4 @@ export let pathId;
               right: 16
             }}
           /> -->
-        )}
       </div>
diff --git a/src-svelte/src/lib/components/field/GraphAxis.svelte b/src-svelte/src/lib/components/field/GraphAxis.svelte
@@ -1,5 +1,4 @@
 <script>
-    export let id;
-    export let transform = "";
+    let {id, transform} = $props();
 </script>
 <g id={id} transform={transform}></g>
diff --git a/src-svelte/src/lib/components/field/GraphLegend.svelte b/src-svelte/src/lib/components/field/GraphLegend.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-    export let trajectory: TrajectorySample[];
-    export let time: number;
+    type Props = {trajectory: TrajectorySample[], time: number};
+    let {trajectory, time} : Props = $props();
     import {sampleD3} from "$lib/util/MathUtil.ts"
-    import {graphViews, graphColors, type GraphLine, data as graphData} from "$lib/uistate.ts"
+    import {graphViews, graphColors, type GraphLine, uistate} from "$lib/uistate.svelte.ts"
     import GraphLegendCheckbox from "./GraphLegendCheckbox.svelte"
+    import type { TrajectorySample } from "$lib/trajectory.svelte.js";
+    let graphData = $derived(uistate.graphData);
     </script>
 <div class="grid px-2 pt-2"
 style=" grid-template-columns: min-content max-content 5ch max-content; column-gap:8px">
 {#each Object.entries(graphColors) as [name, data]}
 {@const value = sampleD3(time, graphData[name])?.toFixed(2) ?? ""}
-<GraphLegendCheckbox key={name} store={graphViews[name]} color={data}></GraphLegendCheckbox>
+<GraphLegendCheckbox key={name} bind:store={graphViews[name]} color={data}></GraphLegendCheckbox>
 <span>{data.name}</span>
 <span style="text-align:right">{value}</span>
 <span>{data.units}</span>

diff --git a/src-svelte/src/lib/components/field/GraphLegendCheckbox.svelte b/src-svelte/src/lib/components/field/GraphLegendCheckbox.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-    export let key: GraphLine;
-    export let color: GraphAxis;
-    export let store: Writable<boolean>
-    import {graphViews, graphColors, type GraphLine } from "$lib/uistate.ts"
-    $: console.log(key, $store);
+    let {key, color, store=$bindable()}: {key: GraphLine, color: GraphAxis, store: boolean} = $props();
+    import {graphViews, graphColors, type GraphLine, type GraphAxis } from "$lib/uistate.svelte.ts"
+    console.log(key, store);
 </script>
 
 <span>
-    <input type="checkbox" class="checkbox  checkbox-" bind:checked={$store} style={`--chkbg: ${color.color}; border-radius:0`}/>
+    <input type="checkbox" class="checkbox  checkbox-" bind:checked={store} style={`--chkbg: ${color.color}; border-radius:0`}/>
     </span>
diff --git a/src-svelte/src/lib/components/field/GraphPanel.svelte b/src-svelte/src/lib/components/field/GraphPanel.svelte
@@ -1,72 +1,57 @@
 <script lang="ts">
-    export let xOrigin : number;
-    export let yOrigin: number;
-    export let height: number;
-    export let width: number;
-    export let trajectory : TrajectorySample[];
+    type Props = {
+    xOrigin : number;
+    yOrigin: number;
+    height: number;
+    width: number;
+    output : Output;
+    }
+    let {xOrigin, yOrigin, height, width, output} : Props = $props()
+    let trajectory = $derived(output.samples);
     import * as d3 from 'd3'
     import {onMount} from 'svelte'
-    import {data, graphViewsDerived, graphColors, type GraphLine } from "$lib/uistate.ts"
+    import {graphColors, type GraphLine, graphViews, emptyGraphData, uistate } from "$lib/uistate.svelte.ts"
+    console.log("graphviews", graphViews)
+    import type { TrajectorySample } from '$lib/trajectory.svelte.js';
     
 
     const margin = { top: yOrigin, right: xOrigin, bottom: 0, left: 0 };
-    let x = d3.scaleLinear()
-        .domain([0, 10])
-        .range([0, width]);
-    let leftY = d3.scaleLinear()
+    let x = $derived.by(()=>{console.log("traj", trajectory);
+        return d3.scaleLinear()
+        .domain([0,
+        (trajectory.length < 2) ? 5 : trajectory[trajectory.length - 1].timestamp
+        ])
+        .range([0, width])}
+        );
+    let leftY = $derived(d3.scaleLinear()
         .domain([-5, 5])
-        .range([height, 0]);
-    let rightY = d3.scaleLinear()
+        .range([height, 0]));
+    let rightY = $derived(d3.scaleLinear()
         .domain([-20, 20])
-        .range([height, 0]);
-    let leftLine = d3.line()
+        .range([height, 0]));
+    let leftLine = $derived(d3.line()
         .x((d) => { return x(d[0]); })
-        .y((d) => { return leftY(d[1]); });
-    let rightLine = d3.line()
+        .y((d) => { return leftY(d[1]); }));
+    let rightLine = $derived(d3.line()
         .x((d) => { return x(d[0]); })
-        .y((d) => { return rightY(d[1]); });
-    $: handleUpdate(trajectory);
-    $: redrawAxes(trajectory, width, height)
-    handleUpdate(trajectory);
-    onMount(()=>{
-        redrawAxes(trajectory, width, height);
-    })
-    function handleUpdate(generated: TrajectorySample[]) {
-        Object.keys(data).forEach(key => {
-            data[key] = generated.map((samp,i,arr) => {
+        .y((d) => { return rightY(d[1]); }));
+    $effect(()=>{handleUpdate(trajectory)});
+    $effect(()=>redrawAxes(trajectory, width, height));
+    function handleUpdate(trajectory: TrajectorySample[]) {
+        console.log("handleUpdate", trajectory)
+        let newData = emptyGraphData();
+        Object.keys(newData).forEach(key => {
+            newData[key] = trajectory.map((samp,i,arr) => {
                 return [samp.timestamp, graphColors[key].getter(arr,i)]
             });
         })
 
 
 
         // color palette
-
-
-        console.log(data);
+        uistate.graphData = newData;
     }
-    function redrawAxes(generated, width, height) {
-        x = d3.scaleLinear()
-        .domain([0, 10])
-        .range([0, width]);
-        leftY = d3.scaleLinear()
-            .domain([-5, 5])
-            .range([height, 0]);
-        rightY = d3.scaleLinear()
-            .domain([-20, 20])
-            .range([height, 0]);
-        leftLine = d3.line()
-            .x((d) => { return x(d[0]); })
-            .y((d) => { return leftY(d[1]); });
-        rightLine = d3.line()
-            .x((d) => { return x(d[0]); })
-            .y((d) => { return rightY(d[1]); });
-        console.log("update graph");
-        if (generated.length < 2) {
-            x.domain([0,5]);
-        } else {
-            x.domain([0, generated[generated.length - 1].timestamp])
-        }
+    function redrawAxes(trajectory, width, height) {
         
         // set the dimensions and margins of the graph
 
@@ -92,10 +77,10 @@
         rightYAxis.selectAll("text").attr("fill", "white")
         rightYAxis.selectAll(":is(line, path)").attr("stroke", "white")
 
-        // var xGrid = svg.select<SVGGElement>("#xGrid")
-        // xGrid.selectChildren().remove();
-        // xGrid.call(d3.axisBottom(x).ticks(10).tickFormat(d => '').tickSize(-height));
-        // xGrid.selectAll(":is(line, path)").attr("stroke", "#111111")
+        var xGrid = svg.select<SVGGElement>("#xGrid")
+        xGrid.selectChildren().remove();
+        xGrid.call(d3.axisBottom(x).ticks(10).tickFormat(d => '').tickSize(-height));
+        xGrid.selectAll(":is(line, path)").attr("stroke", "#111111")
 
         var yGrid = svg.select<SVGGElement>("#yGrid")
         yGrid.selectChildren().remove();
@@ -143,21 +128,23 @@
 
 
 
-                    <g transform={"translate(" + margin.right + "," + margin.top + ")"}
-                        id="rootGroup">
-                        <g id="xGrid" use:xGridAction={x} transform={"translate(0," + height + ")"}></g>
-                        <g id="yGrid"></g>
-                        <g id="xAxis" use:xAxisAction={x} transform={"translate(0," + height + ")"}></g>
-                        <line x1={0} y1={leftY(0)} x2={width-margin.right-margin.left} y2={leftY(0)}
-                            stroke="var(--divider-gray)" stroke-width={2}/>
-                        <g id="yAxis" use:yAxisAction={leftY}></g>
-                        <g id="rightYAxis" transform={`translate(${width},0)`}></g>
-                        {#each Object.entries(graphColors) as [k,val]}
-                        {#if $graphViewsDerived[k]}
-                        {@const d = val.leftAxis ? leftLine(data[k]) : rightLine(data[k])}
-                        <path id={`${k}Line`} fill="none" stroke={val.color} strokeWidth={2}
-                                        d={d ?? undefined}></path>
-                        {/if}
-                        {/each}
-
-                    </g>
+<g transform={"translate(" + margin.right + "," + margin.top + ")"}
+    id="rootGroup">
+    <g id="xGrid" use:xGridAction={x} transform={"translate(0," + height + ")"}></g>
+    <g id="yGrid"></g>
+    <g id="xAxis" use:xAxisAction={x} transform={"translate(0," + height + ")"}></g>
+    <line x1={0} y1={leftY(0)} x2={width-margin.right-margin.left} y2={leftY(0)}
+        stroke="var(--divider-gray)" stroke-width={2}/>
+    <g id="yAxis" use:yAxisAction={leftY}></g>
+    <g id="rightYAxis" transform={`translate(${width},0)`}></g>
+    {#key uistate.graphData}
+    {#each Object.entries(graphColors) as [k,val]}
+        {#if graphViews[k]}
+        {@const d = val.leftAxis ? leftLine(uistate.graphData[k]) : rightLine(uistate.graphData[k])}
+        <path id={`${k}Line`} fill="none" stroke={val.color} strokeWidth={2}
+                        d={d ?? undefined}></path>
+        {/if}
+    {/each}
+    {/key}
+
+</g>