basic state switching from loading to running to editing

track/system.ts

@@ -13,9 +13,13 @@ export class TrackSystem {
     }
   }
 
-  draw() {
+  get firstSegment() {
+    return this.segments.values().next().value;
+  }
+
+  draw(showControls = false) {
     for (const segment of this.segments.values()) {
-      segment.draw();
+      segment.draw(showControls);
     }
 
     try {
@@ -65,15 +69,39 @@ export class TrackSystem {
     return this.segments.values().map((s) => s.serialize()).toArray();
   }
 
-  static deserialize(data: any) {
+  copy() {
     const track = new TrackSystem([]);
+    for (const segment of this.segments.values()) {
+      track.segments.set(segment.id, segment.copy());
+    }
+    return track;
+  }
+
+  static deserialize(data: any) {
+    if (data.length === 0) return undefined;
+    const track = new TrackSystem([]);
+    const neighborMap = new Map<string, [string[], string[]]>();
     for (const segment of data) {
       track.segments.set(segment.id, TrackSegment.deserialize(segment));
     }
+    for (const segment of track.segments.values()) {
+      segment.setTrack(track);
+      const neighbors = neighborMap.get(segment.id);
+      if (neighbors) {
+        segment.backNeighbours = neighbors[1].map((id) =>
+          track.segments.get(id)
+        ).filter((s) => s) as TrackSegment[];
+        segment.frontNeighbours = neighbors[0].map((id) =>
+          track.segments.get(id)
+        ).filter((s) => s) as TrackSegment[];
+      }
+    }
     return track;
   }
 }
 
+type VectorSet = [Vector, Vector, Vector, Vector];
+
 export class TrackSegment extends PathSegment {
   frontNeighbours: TrackSegment[] = [];
   backNeighbours: TrackSegment[] = [];
@@ -84,7 +112,7 @@ export class TrackSegment extends PathSegment {
 
   id: string;
 
-  constructor(p: [Vector, Vector, Vector, Vector], id?: string) {
+  constructor(p: VectorSet, id?: string) {
     super(p);
     this.doodler = getContextItem<Doodler>("doodler");
     this.id = id ?? crypto.randomUUID();
@@ -94,7 +122,7 @@ export class TrackSegment extends PathSegment {
     this.track = t;
   }
 
-  draw() {
+  draw(showControls = false) {
     this.doodler.drawBezier(
       this.points[0],
       this.points[1],
@@ -104,6 +132,24 @@ export class TrackSegment extends PathSegment {
         strokeColor: "#ffffff50",
       },
     );
+    if (showControls) {
+      // this.doodler.drawCircle(this.points[0], 4, {
+      //   color: "red",
+      //   weight: 3,
+      // });
+      this.doodler.drawCircle(this.points[1], 4, {
+        color: "red",
+        weight: 3,
+      });
+      this.doodler.drawCircle(this.points[2], 4, {
+        color: "red",
+        weight: 3,
+      });
+      // this.doodler.drawCircle(this.points[3], 4, {
+      //   color: "red",
+      //   weight: 3,
+      // });
+    }
   }
 
   serialize() {
@@ -115,6 +161,13 @@ export class TrackSegment extends PathSegment {
     };
   }
 
+  copy() {
+    return new TrackSegment(
+      this.points.map((p) => p.copy()) as VectorSet,
+      this.id,
+    );
+  }
+
   static deserialize(data: any) {
     return new TrackSegment(
       data.p.map((p: [number, number, number]) => new Vector(p[0], p[1], p[2])),