feat: add legend to EM path overview

ClumsyPilot/TrajectoryPlanningVisualization/Web/app.js

@@ -8,6 +8,7 @@
   const liveState = document.getElementById("live-state");
   const occupancyCanvas = document.getElementById("occupancy-grid");
   const overlay = document.getElementById("world-overlay");
+  const worldLegend = document.getElementById("world-legend");
 
   function authorized(path) { return path + "?token=" + encodeURIComponent(token); }
   function finite(value) { return typeof value === "number" && Number.isFinite(value); }
@@ -141,6 +142,50 @@
     overlay.append(labelGroup);
   }
 
+  function renderWorldLegend(snapshot, frame) {
+    if (!worldLegend) return;
+    worldLegend.replaceChildren();
+    const staticLines = safeArray(snapshot.staticPolylines);
+    const directionSegments = safeArray(snapshot.directionSegments);
+    const dynamicLines = safeArray(frame.dynamicPolylines);
+    const markers = safeArray(snapshot.staticMarkers).concat(safeArray(frame.dynamicMarkers));
+    const entries = [];
+    const seen = new Set();
+    const add = (key, label, swatchClass) => {
+      if (seen.has(key)) return;
+      seen.add(key);
+      entries.push({ label, swatchClass });
+    };
+    const coarse = staticLines.find(line => lineKind(line) === "global" || lineKind(line) === "coarse");
+    const smooth = staticLines.find(line => lineKind(line).includes("local-g2") || lineKind(line).includes("g2"));
+    const active = dynamicLines.find(line => lineKind(line) === "active-segment");
+    const previous = dynamicLines.find(line => lineKind(line) === "previous" || line.lineStyle === 1);
+    const current = dynamicLines.find(line => lineKind(line) !== "active-segment" && lineKind(line) !== "previous" && line.lineStyle !== 1);
+    if (coarse) add("coarse", coarse.legendChinese || "粗路径", "legend-line legend-coarse");
+    if (smooth) add("smooth", smooth.legendChinese || "完整 Local G2 路径", "legend-line legend-smooth");
+    if (active || directionSegments.length)
+      add("segment", active && active.legendChinese || "当前方向段", "legend-line legend-segment");
+    if (previous) add("previous", previous.legendChinese || "上一条 EM 轨迹", "legend-line legend-previous");
+    if (current) add("current", current.legendChinese || "当前 EM 轨迹", "legend-line legend-current");
+    if (markers.some(marker => lineKind(marker) === "smooth-start"))
+      add("smooth-start", "平滑路径起点", "legend-marker legend-smooth-start");
+    if (markers.some(marker => lineKind(marker) === "plan-start"))
+      add("plan-start", "EM 规划起点", "legend-marker legend-plan-start");
+    if (markers.some(marker => lineKind(marker) === "vehicle"))
+      add("vehicle", "当前车辆", "legend-marker legend-vehicle");
+    if (markers.some(marker => lineKind(marker) === "gear-switch" || lineKind(marker) === "gear-switch-end"))
+      add("gear", "换向点 / s_end", "legend-marker legend-gear");
+    if (markers.some(marker => lineKind(marker) === "final-goal"))
+      add("goal", "平滑路径终点", "legend-marker legend-goal");
+    entries.forEach(entry => {
+      const item = element("div", "world-legend-item");
+      item.append(element("span", "world-legend-swatch " + entry.swatchClass),
+        element("span", "world-legend-label", entry.label));
+      worldLegend.append(item);
+    });
+    worldLegend.hidden = entries.length === 0;
+  }
+
   function renderWorld() {
     const bounds = getBounds();
     const metrics = worldMetrics(bounds);
@@ -176,6 +221,7 @@
       .some(point => point && finite(point.x) && finite(point.y)));
     safeArray(snapshot.staticMarkers).concat(safeArray(frame.dynamicMarkers))
       .forEach(marker => appendWorldMarker(marker, frame, metrics));
+    renderWorldLegend(snapshot, frame);
     if (!hasPath) {
       const emptyGroup = svg("g", { transform: `translate(${(bounds.xMin + bounds.xMax) / 2} ${-((bounds.yMin + bounds.yMax) / 2)}) scale(${metrics.unitsPerPixel})` });
       const empty = svg("text", { x: 0, y: 0, class: "world-empty-state", "text-anchor": "middle" });