Continue to integrate signal framework

src-svelte/src/lib/components/field/Field.svelte

@@ -1,10 +1,10 @@
 
-<script>
+<script lang="ts">
 
 import styles from "./Field.module.css";
 import FieldOverlayRoot from "./svg/FieldOverlayRoot.svelte";
-import {generate} from "$lib/path.svelte.ts"
-let {pathId} = $props();
+import {generate, Path} from "$lib/path.svelte.ts"
+let {path}: {path:Path} = $props();
 // import IconButton from "@mui/material/IconButton";
 // import ShapeLineIcon from "@mui/icons-material/ShapeLine";
 // import { CircularProgress, Tooltip } from "@mui/material";
@@ -22,8 +22,8 @@ let {pathId} = $props();
 // import { IEventMarkerStore } from "../../document/EventMarkerStore";
 </script>
       <div class={styles.Container}>
-        <FieldOverlayRoot pathId={pathId}></FieldOverlayRoot>
-        <button class="btn btn-circle z-10 absolute" onclick={()=>generate(pathId)}>Gen</button>
+        <FieldOverlayRoot path={path}></FieldOverlayRoot>
+        <button class="btn btn-circle z-10 absolute" onclick={()=>generate(path)}>Gen</button>
         <!-- {selectedSidebar !== undefined &&
           "heading" in selectedSidebar &&
           activePath.waypoints.find(

src-svelte/src/lib/components/field/svg/FieldGeneratedLines.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
   import {type TrajectorySample} from "$lib/trajectory.svelte.js";
-  import {PathGradients} from "$lib/PathGradient"
+  import {PathGradients} from "./PathGradient.js"
   type Props  = {
     trajectory: TrajectorySample[];
     noneColor: string;
   }
-  let {trajectory = [], noneColor = "var(--select-yellow)"} = $props();
+  let {trajectory = [], noneColor = "var(--select-yellow)"}:Props = $props();
 
   let generatedPathString = $derived(updateString(trajectory));
 
   function updateString(trajectory: TrajectorySample[]) {
-    console.log(trajectory);
     let gen = "";
     trajectory.forEach((point) => {
       gen += `${point.x},${point.y} `;
     });
     return gen;
   }
-  const key = "none";
+  const key: keyof PathGradients = "Velocity";
   const pathGradient = PathGradients[key];
 </script>
 
@@ -41,7 +40,7 @@
             x2={point2.x}
             y2={point2.y}
             stroke-width={0.05}
-            stroke={pathGradient.function(point, i, arr)}
+            stroke={pathGradient.function(point, i, trajectory)}
           ></line>
         {/if}
       {/each}

src-svelte/src/lib/components/field/svg/FieldOverlayRoot.svelte

@@ -5,10 +5,10 @@
 
 import * as d3 from "d3";
 import { onMount } from 'svelte';
-import {Paths, add_path_waypoint} from '$lib/path.svelte.js';
+import {Path} from '$lib/path.svelte.js';
 
 
-import {Trajectory} from '$lib/trajectory.svelte.js';
+import {Trajectory, type TrajectorySample} from '$lib/trajectory.svelte.js';
 import { uistate } from "$lib/uistate.svelte.ts";
 import FieldGeneratedLines from "./FieldGeneratedLines.svelte";
 // import FieldGrid from "./FieldGrid";
@@ -28,9 +28,9 @@ import FieldImage24 from "./fields/FieldImage24.svelte";
 // import FieldSamples from "./FieldSamples";
 // import FieldGeneratedWaypoints from "./FieldGeneratedWaypoints";
 // import FieldEventMarkerAddLayer from "./FieldEventMarkerAddLayer";
-let {pathId}: {pathId:number} = $props();
-let waypoints = $derived(Paths[pathId]);
-let trajectory = $derived(Trajectory(pathId).samples);
+let {path}: {path: Path} = $props();
+let waypoints : number[] = $derived(path.order());
+let trajectory : TrajectorySample[] = $derived(Trajectory(path.id).samples);
 let xPan = $state(0);
 let yPan = $state(0);
 let zoom = $state(1);
@@ -145,7 +145,7 @@ let zoomed = (e: any) => {
         x: e.clientX,
         y: e.clientY
       });
-      add_path_waypoint(pathId, {x: coords.x, y: coords.y, translationConstrained: true, headingConstrained: true});
+      path.addWaypoint({x: coords.x, y: coords.y, translationConstrained: true, headingConstrained: true})
       
     //   this.context.history.startGroup(() => {
     //     const newPoint =
@@ -230,11 +230,9 @@ let zoomed = (e: any) => {
                 onclick={(e) => createWaypoint(e)}
               ></circle>
         {/if}
-        {#key waypoints}
-        {#each waypoints as pt, idx}
+        {#each path.waypoints as pt, idx}
 
-        <OverlayWaypoint index={idx} point={pt}></OverlayWaypoint>
+        <OverlayWaypoint index={idx} wpt={pt} history={path.history}></OverlayWaypoint>
         {/each}
-        {/key}
         </g>
       </svg>

src-svelte/src/lib/components/field/svg/OverlayWaypoint.svelte

@@ -5,11 +5,11 @@ import * as d3 from "d3";
     import { onMount } from "svelte";
     import BumperBox from "./BumperBox.svelte";
     import { readable, type Readable } from "svelte/store";
+    import {type UndoManager} from "$lib/util/state.svelte.js";
 
 
-let {point, index}: {point:number, index:number} = $props();
+let {wpt, index, history}: {wpt:Waypoint, index:number, history: UndoManager} = $props();
 
-let wpt = $derived(WaypointSubscribers[point]!);
 type Coordinates = {
   x: number;
   y: number;
@@ -31,8 +31,8 @@ let bumperWidth: Readable<number> = readable(0.9);
 
   let coordsFromWaypoint = (): Coordinates => {
     return {
-      x: wpt.x,
-      y: wpt.y
+      x: wpt.x(),
+      y: wpt.y()
     };
   }
   let dragPointRotate = (event: any) => {
@@ -47,7 +47,7 @@ let bumperWidth: Readable<number> = readable(0.9);
     // converts the values to stay inside the 360 positive
 
     // creates the new rotate position array
-    wpt.heading=angleFinal;
+    wpt.heading.set(angleFinal);
     //d3.select(`#group`).attr('transform', `rotate(${ this.r.angle })`)
   }
 
@@ -68,9 +68,8 @@ let bumperWidth: Readable<number> = readable(0.9);
   // }
 
   let dragPointTranslate = (event: any) => {
-    const pointerPos: Coordinates = { x: 0, y: 0 };
-    wpt.x = (event.x);
-    wpt.y = (event.y);
+    wpt.x.set(event.x);
+    wpt.y.set(event.y);
 
     // gets the difference of the angles to get to the final angle
     // converts the values to stay inside the 360 positive
@@ -89,12 +88,12 @@ let bumperWidth: Readable<number> = readable(0.9);
       const rotateHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => dragPointRotate(event))
-        // .on("start", () => {
-        //   this.selectWaypoint();
-        //   this.context.history.startGroup(() => {});
-        // })
+        .on("start", () => {
+          //this.selectWaypoint();
+          history.startGroup();
+        })
         .on("end", (event) => {
-;
+          history.stopGroup();
         })
         .container(rootRef);
       d3.select<SVGCircleElement, undefined>(
@@ -117,10 +116,13 @@ let bumperWidth: Readable<number> = readable(0.9);
       const dragHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => dragPointTranslate(event))
-        // .on("start", () => {
-        //   this.selectWaypoint();
-        //   this.context.history.startGroup(() => {});
-        // })
+        .on("start", () => {
+          //this.selectWaypoint();
+          history.startGroup();
+        })
+        .on("end", (event) => {
+          history.stopGroup();
+        })
         .container(rootRef);
       d3.select<SVGCircleElement, undefined>(
         `#dragTarget${index}`
@@ -159,13 +161,13 @@ let bumperWidth: Readable<number> = readable(0.9);
 
     let boxColorStr = getBoxColor();
 
-    let type = wpt.waypoint_type;
+    let type = $derived(wpt.waypoint_type);
     //const robotConfig = this.context.model.document.robotConfig;
     </script>
       <g bind:this={rootRef}>
         <g
-          transform={`translate(${wpt.x}, ${wpt.y}) rotate(${
-            (wpt.heading * 180) / Math.PI
+          transform={`translate(${wpt.x()}, ${wpt.y()}) rotate(${
+            (wpt.heading() * 180) / Math.PI
           })`}
           id={appendIndexID("waypointGroup")}
         >

src-svelte/src/lib/PathGradient.ts → src-svelte/src/lib/components/field/svg/PathGradient.ts

@@ -72,7 +72,7 @@ class PathGradientFunctions {
     // calculates the maginitude of the velocity vector, then divides it by the theoretical floor speed
     // then it scales the ratio [0, 1]: red to green[0, 100]
     const floorSpeed = 5.0;
-    const t = Math.hypot(point.velocityX, point.velocityY) / floorSpeed;
+    const t = Math.hypot(point.velocity_x, point.velocity_y) / floorSpeed;
     return `hsl(${100 * t}, 100%, 50%)`;
   }
 
@@ -121,7 +121,7 @@ class PathGradientFunctions {
       // then, it is scaled/normalized for the HSL color value.
       const A = arr[i];
       const B = arr[i + 1];
-      t = Math.hypot(B.velocityX - A.velocityX, B.velocityY - A.velocityY);
+      t = Math.hypot(B.velocity_x - A.velocity_x, B.velocity_y - A.velocity_y);
       const dt = B.timestamp - A.timestamp;
       t /= dt * 10;
     }
@@ -173,7 +173,7 @@ class PathGradientFunctions {
   ) {
     // the color value is normalized from red (0) to green (100)
     // based on an artificial angular velocity max of 2 r/s
-    return `hsl(${Math.abs(point.angularVelocity * 100) / 2}, 100%, 50%)`;
+    return `hsl(${Math.abs(point.angular_velocity * 100) / 2}, 100%, 50%)`;
   }
 
   /**

src-svelte/src/lib/components/sidebar/Sidebar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import WaypointList from "./WaypointList.svelte"
   import PathSelector from "./PathSelector.svelte"
-  import {Paths} from "$lib/path.svelte.js";
-  let {pathId}: {pathId:number} = $props();
-  let waypoints = $derived(Paths[pathId]);
+  import {Path} from "$lib/path.svelte.js";
+  let {path}: {path:Path} = $props();
+  let waypointSig = path.order;
   let constraints:any[] = [];
   let obstacles:any[] = [];
   let markers:any[] = [];
@@ -152,18 +152,18 @@
       </span>
       <span class="inline">
         <div class="tooltip tooltip-bottom" data-tip="Undo">
-          <button class="btn btn-ghost btn-square btn-md">
-            U
+          <button class="btn btn-ghost btn-square btn-md" class:btn-disabled={!path.history.canUndo} onclick={()=>path.history.undo()}>
+            &lt;-
         <!-- <ArrowLeftOutline></ArrowLeftOutline> -->
       </button>
     </div>
 
     <div class="tooltip tooltip-bottom" data-tip="Redo">
-      <button class="btn btn-ghost btn-square btn-md">
-        R
+      <button class="btn btn-ghost btn-square btn-md" class:btn-disabled={!path.history.canRedo} onclick={()=>path.history.redo()}>
+        -&gt;
         <!-- <ArrowRightOutline></ArrowRightOutline> -->
       </button>
-                </div>
+    </div>
       </span>
     </div>
 
@@ -225,24 +225,15 @@
     <div
       class="Sidebar max-h-300 min-h-50"
     >
-      <PathSelector pathId={pathId}></PathSelector>
+      <PathSelector pathId={path.id}></PathSelector>
     </div>
     <div class="divider SidebarHr"></div>
     <div class="SidebarHeading">FEATURES</div>
     <div class="divider  SidebarHr"/>
     <div class="Sidebar">
       <div class="divider divider-start SidebarHr">WAYPOINTS</div>
 
-      <WaypointList {waypoints} pathId={pathId}></WaypointList>
-      {#if waypoints.length == 0}
-
-      <div class={"SidebarItem Noninteractible"}>
-        <span></span>
-        <span style="color: gray; font-style: italic">
-          No Waypoints
-        </span>
-      </div>
-    {/if}
+      <WaypointList {path}></WaypointList>
       <div class="divider divider-start SidebarHr">CONSTRAINTS</div>
       <div class="WaypointList">
         {#each constraints as constraint}