@downdraft/engine 0.2.0 → 0.3.1

package/dist/modules/devtools/src/material-stats-panel.js

@@ -1,171 +0,0 @@
-// ============================================================================
-// createMaterialStatsPanelExtension — reusable DevTools "Materials" tab for
-// any game using the unified material system.
-//
-// Shows:
-//   - Registered material count, material types breakdown
-//   - Variant cache size, LRU hits/misses
-//   - Shader graph node count, compiled WGSL size
-//   - GPU texture count/bytes (from GPUResourceTracker)
-//
-// Gated by requiredMethods: ["getMaterialStats"]. The framework auto-provides
-// getMaterialStats() from the renderer's MaterialLibrary / variant cache
-// (feature-detected in createDevToolsRendererAdapter or registered via
-// devtools.registerDataFeed).
-// ============================================================================
-export function createMaterialStatsPanelExtension(opts = {}) {
-    const tabLabel = opts.tabLabel ?? "Materials";
-    const tabTooltip = opts.tabTooltip ?? "Material system stats (library, variants, GPU textures)";
-    const order = opts.order ?? 25;
-    const hasExtra = typeof opts.extraRows === "function";
-    const extraRowsSrc = hasExtra ? opts.extraRows.toString() : "null";
-    const html = `
-<div class="panel-header">
-  <h3>Materials</h3>
-  <span id="mat-status-badge" class="perf-status">Waiting for data...</span>
-</div>
-<div id="mat-stats-panel">
-  <div class="debug-section">
-    <h4>Library</h4>
-    <div id="mat-library-grid" class="debug-grid"></div>
-  </div>
-  <div class="debug-section">
-    <h4>Variants</h4>
-    <div id="mat-variants-grid" class="debug-grid"></div>
-  </div>
-  <div class="debug-section">
-    <h4>GPU Textures</h4>
-    <div id="mat-textures-grid" class="debug-grid"></div>
-  </div>
-  <div class="debug-section">
-    <h4>Shader Graph</h4>
-    <div id="mat-graph-grid" class="debug-grid"></div>
-  </div>
-</div>
-`;
-    const css = `
-#mat-stats-panel {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 12px;
-}
-#mat-stats-panel .debug-section {
-  margin-bottom: 12px;
-}
-#mat-stats-panel .debug-section h4 {
-  font-size: 12px;
-  color: #569cd6;
-  margin: 8px 0 4px 0;
-  border-bottom: 1px solid #333;
-  padding-bottom: 2px;
-}
-#mat-status-badge.running { color: #98c379; }
-#mat-status-badge.empty { color: #e5c07b; }
-`;
-    const script = `
-(function(DevToolsPanel) {
-  var callInspector = DevToolsPanel.callInspector;
-  var evalInPage = DevToolsPanel.evalInPage;
-  var escapeHtml = DevToolsPanel.escapeHtml;
-  var fmtVal = DevToolsPanel.fmtVal;
-  var debugGridHtml = DevToolsPanel.debugGridHtml;
-
-  var extraRowsFn = ${extraRowsSrc};
-
-  function refreshMatStats() {
-    var libEl = document.getElementById("mat-library-grid");
-    var varEl = document.getElementById("mat-variants-grid");
-    var texEl = document.getElementById("mat-textures-grid");
-    var graphEl = document.getElementById("mat-graph-grid");
-    var statusEl = document.getElementById("mat-status-badge");
-
-    evalInPage(
-      "window.__sceneInspector ? JSON.stringify(window.__sceneInspector.getMaterialStats()) : null",
-      function (result, err) {
-        if (err || !result) {
-          if (libEl) libEl.innerHTML = '<div class="debug-label">Not available</div>';
-          if (statusEl) { statusEl.textContent = "Not available"; statusEl.className = "perf-status"; }
-          return;
-        }
-        try {
-          var s = JSON.parse(result);
-          if (!s) {
-            if (libEl) libEl.innerHTML = '<div class="debug-label">Not available</div>';
-            return;
-          }
-
-          // Library stats
-          var libRows = [
-            ["Registered", s.library?.count ?? 0],
-            ["Types", s.library?.types?.join(", ") ?? "—"],
-          ];
-          if (libEl) libEl.innerHTML = debugGridHtml(libRows);
-
-          // Variant stats
-          var varRows = [
-            ["Cached Pipelines", s.variants?.cachedPipelines ?? 0],
-            ["Max Pipelines", s.variants?.maxPipelines ?? 0],
-            ["LRU Hits", s.variants?.lruHits ?? 0],
-            ["LRU Misses", s.variants?.lruMisses ?? 0],
-            ["Permutation Count", s.variants?.permutationCount ?? 0],
-          ];
-          if (varEl) varEl.innerHTML = debugGridHtml(varRows);
-
-          // GPU textures
-          var texRows = [
-            ["Texture Count", s.textures?.count ?? 0],
-            ["Texture Memory", fmtVal((s.textures?.bytes ?? 0) / 1048576, 1) + " MB"],
-            ["Bindless Entries", s.textures?.bindlessEntries ?? 0],
-          ];
-          if (texEl) texEl.innerHTML = debugGridHtml(texRows);
-
-          // Shader graph
-          var graphRows = [
-            ["Graph Materials", s.graph?.materialCount ?? 0],
-            ["Total Nodes", s.graph?.totalNodes ?? 0],
-            ["Total Connections", s.graph?.totalConnections ?? 0],
-            ["Compiled WGSL Size", fmtVal((s.graph?.compiledWgslBytes ?? 0) / 1024, 1) + " KB"],
-          ];
-          if (graphEl) graphEl.innerHTML = debugGridHtml(graphRows);
-
-          // Extra rows
-          if (extraRowsFn && s) {
-            try {
-              var extra = extraRowsFn(s);
-              if (extra && extra.length) {
-                var extraHtml = debugGridHtml(extra);
-                if (graphEl) graphEl.innerHTML += extraHtml;
-              }
-            } catch (e) { /* ignore */ }
-          }
-
-          if (statusEl) {
-            var count = s.library?.count ?? 0;
-            statusEl.textContent = count > 0 ? count + " materials" : "No materials";
-            statusEl.className = "perf-status " + (count > 0 ? "running" : "empty");
-          }
-        } catch (e) {
-          if (libEl) libEl.innerHTML = '<div class="debug-label">Error: ' + escapeHtml(String(e)) + '</div>';
-        }
-      }
-    );
-  }
-
-  return {
-    onActivate: function () { refreshMatStats(); },
-    onRefresh: refreshMatStats,
-    onDeactivate: function () {},
-  };
-})
-`;
-    return {
-        id: "material-stats",
-        tabLabel,
-        tabTooltip,
-        order,
-        requiredMethods: ["getMaterialStats"],
-        html,
-        css,
-        script,
-    };
-}

package/dist/modules/devtools/src/sim-stats-panel.js

@@ -1,250 +0,0 @@
-// ============================================================================
-// createSimStatsPanelExtension — reusable DevTools "Sim" tab for any game
-// that implements ISimStatsProvider (exposed via __sceneInspector).
-//
-// Renders a stats grid (FPS, tick, frame, paused, speed + game-specific extra
-// rows) and control buttons (Pause/Resume, Step, Clear) + a speed slider.
-// The tab is gated by requiredMethods so it only appears for games that
-// implement the provider.
-// ============================================================================
-export function createSimStatsPanelExtension(opts = {}) {
-    const tabLabel = opts.tabLabel ?? "Sim";
-    const tabTooltip = opts.tabTooltip ?? "Simulation stats & controls";
-    const order = opts.order ?? 50;
-    const hasExtra = typeof opts.extraRows === "function";
-    // The extraRows callback runs in the page context (renderer side), but the
-    // panel script is sandboxed and can't see the TS closure. We serialize the
-    // callback's source so it can be eval'd in-page alongside getSimStats().
-    // If no extraRows is provided, the script skips the extra-rows section.
-    const extraRowsSrc = hasExtra
-        ? opts.extraRows.toString()
-        : "null";
-    const html = `
-<div class="panel-header">
-  <h3>Simulation</h3>
-  <span id="sim-status-badge" class="perf-status">Waiting for data...</span>
-</div>
-<div id="sim-stats-panel">
-  <div class="debug-section">
-    <h4>Stats</h4>
-    <div id="sim-stats-grid" class="debug-grid"></div>
-  </div>
-  <div class="debug-section">
-    <h4>Controls</h4>
-    <div class="world-control-row">
-      <button id="btn-sim-pause" class="import-action-btn">Pause</button>
-      <button id="btn-sim-step" class="import-action-btn" title="Advance one tick while paused">Step</button>
-      <button id="btn-sim-clear" class="import-action-btn" title="Clear/reset the simulation">Clear</button>
-    </div>
-    <div class="world-control-row">
-      <label>Speed <span id="sim-speed-display" style="color:#888;font-weight:normal">1.00x</span></label>
-      <input type="range" id="sim-speed-slider" min="0" max="10" step="0.25" value="1" style="flex:1">
-      <button id="btn-sim-speed-reset" class="import-action-btn">Reset</button>
-    </div>
-  </div>
-</div>
-`;
-    const css = `
-#sim-stats-panel {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 12px;
-}
-#sim-stats-panel .debug-section {
-  margin-bottom: 12px;
-}
-#sim-stats-panel .debug-section h4 {
-  font-size: 12px;
-  color: #569cd6;
-  margin: 8px 0 4px 0;
-  border-bottom: 1px solid #333;
-  padding-bottom: 2px;
-}
-#sim-stats-panel .world-control-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 4px 0;
-}
-#sim-stats-panel .world-control-row label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: #d4d4d4;
-}
-#sim-stats-panel .world-control-row input[type="range"] {
-  accent-color: #0e639c;
-  cursor: pointer;
-}
-#sim-stats-panel .import-action-btn {
-  background: #0e639c;
-  color: #fff;
-  border: 1px solid #0e639c;
-  padding: 3px 10px;
-  font-size: 11px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-#sim-stats-panel .import-action-btn:hover {
-  background: #1177bb;
-}
-#sim-stats-panel #btn-sim-clear {
-  background: #5a1d1d;
-  border-color: #5a1d1d;
-}
-#sim-stats-panel #btn-sim-clear:hover {
-  background: #7a2828;
-}
-#sim-status-badge.paused {
-  color: #e5c07b;
-}
-#sim-status-badge.running {
-  color: #98c379;
-}
-`;
-    // The script is sandbox-evaled with {document, console, panel} and uses
-    // window.DevToolsPanel helpers (callInspector, evalInPage, escapeHtml,
-    // fmtVal, debugGridHtml). It returns {onActivate, onRefresh, onDeactivate}.
-    const script = `
-(function(DevToolsPanel) {
-  var callInspector = DevToolsPanel.callInspector;
-  var evalInPage = DevToolsPanel.evalInPage;
-  var escapeHtml = DevToolsPanel.escapeHtml;
-  var fmtVal = DevToolsPanel.fmtVal;
-  var debugGridHtml = DevToolsPanel.debugGridHtml;
-
-  // extraRowsFn is serialized from the game's SimStatsPanelOptions.extraRows
-  // callback. It runs in the PAGE context (not the sandbox) so it can access
-  // the full ISimStats object returned by __sceneInspector.getSimStats().
-  var extraRowsFn = ${extraRowsSrc};
-
-  function refreshSimStats() {
-    var gridEl = document.getElementById("sim-stats-grid");
-    var statusEl = document.getElementById("sim-status-badge");
-    evalInPage(
-      "window.__sceneInspector ? JSON.stringify(window.__sceneInspector.getSimStats()) : null",
-      function (result, err) {
-        if (err || !result) {
-          if (gridEl) gridEl.innerHTML = '<div class="debug-label">Not available</div>';
-          if (statusEl) { statusEl.textContent = "Not available"; statusEl.className = "perf-status"; }
-          return;
-        }
-        try {
-          var s = JSON.parse(result);
-          if (!s) {
-            if (gridEl) gridEl.innerHTML = '<div class="debug-label">Not available</div>';
-            return;
-          }
-          var rows = [
-            ["FPS", fmtVal(s.fps, 0)],
-            ["Tick", s.tick],
-            ["Frame", s.frame],
-            ["Paused", s.paused ? "Yes" : "No"],
-            ["Speed", fmtVal(s.speed, 2) + "x"],
-          ];
-          if (extraRowsFn && s.extra) {
-            try {
-              var extra = extraRowsFn(s);
-              if (extra && extra.length) {
-                for (var i = 0; i < extra.length; i++) {
-                  rows.push([extra[i][0], String(extra[i][1])]);
-                }
-              }
-            } catch (e) {
-              rows.push(["Extra error", escapeHtml(String(e))]);
-            }
-          }
-          if (gridEl) gridEl.innerHTML = debugGridHtml(rows);
-          if (statusEl) {
-            statusEl.textContent = s.paused ? "Paused" : "Running";
-            statusEl.className = "perf-status " + (s.paused ? "paused" : "running");
-          }
-          // Sync pause button label
-          var pauseBtn = document.getElementById("btn-sim-pause");
-          if (pauseBtn) pauseBtn.textContent = s.paused ? "Resume" : "Pause";
-          // Sync speed slider/display (only if not focused — avoid clobbering user input)
-          var slider = document.getElementById("sim-speed-slider");
-          var display = document.getElementById("sim-speed-display");
-          if (slider && document.activeElement !== slider) slider.value = s.speed;
-          if (display) display.textContent = fmtVal(s.speed, 2) + "x";
-        } catch (e) {
-          if (gridEl) gridEl.innerHTML = '<div class="debug-label">Error: ' + escapeHtml(String(e)) + '</div>';
-        }
-      }
-    );
-  }
-
-  function setupControls() {
-    var pauseBtn = document.getElementById("btn-sim-pause");
-    if (pauseBtn) {
-      pauseBtn.addEventListener("click", function () {
-        // Toggle based on current label to avoid race with refresh
-        var isPaused = pauseBtn.textContent === "Resume";
-        if (isPaused) {
-          callInspector("resumeSim", null);
-        } else {
-          callInspector("pauseSim", null);
-        }
-        setTimeout(refreshSimStats, 50);
-      });
-    }
-    var stepBtn = document.getElementById("btn-sim-step");
-    if (stepBtn) {
-      stepBtn.addEventListener("click", function () {
-        callInspector("stepSim", null);
-        setTimeout(refreshSimStats, 50);
-      });
-    }
-    var clearBtn = document.getElementById("btn-sim-clear");
-    if (clearBtn) {
-      clearBtn.addEventListener("click", function () {
-        callInspector("clearSim", null);
-        setTimeout(refreshSimStats, 50);
-      });
-    }
-    var slider = document.getElementById("sim-speed-slider");
-    var display = document.getElementById("sim-speed-display");
-    if (slider) {
-      slider.addEventListener("input", function () {
-        var speed = parseFloat(slider.value);
-        if (display) display.textContent = speed.toFixed(2) + "x";
-      });
-      slider.addEventListener("change", function () {
-        var speed = parseFloat(slider.value);
-        callInspector("setSimSpeed", [speed]);
-      });
-    }
-    var resetBtn = document.getElementById("btn-sim-speed-reset");
-    if (resetBtn) {
-      resetBtn.addEventListener("click", function () {
-        if (slider) slider.value = 1;
-        if (display) display.textContent = "1.00x";
-        callInspector("setSimSpeed", [1]);
-      });
-    }
-  }
-
-  return {
-    onActivate: function () {
-      setupControls();
-      // Initial refresh — onRefresh timer is started by the panel core
-      refreshSimStats();
-    },
-    onRefresh: refreshSimStats,
-    onDeactivate: function () {},
-  };
-})
-`;
-    return {
-        id: "sim-stats",
-        tabLabel,
-        tabTooltip,
-        order,
-        requiredMethods: ["getSimStats", "pauseSim", "resumeSim"],
-        html,
-        css,
-        script,
-    };
-}

package/modules/devtools/src/debug-overlay.ts

@@ -1,238 +0,0 @@
-// ============================================================================
-// DebugOverlay — 2D canvas overlay for chunk grid + velocity arrows
-// Generic rendering logic; game provides data via IDebugOverlayData interface.
-// ============================================================================
-
-import { calculateViewProj, CanvasResizeWatcher, type RenderSurface } from "@downdraft/engine";
-import type { IDebugOverlayData } from "./types";
-
-export class DebugOverlay {
-  private canvas: HTMLCanvasElement;
-  private overlay: HTMLCanvasElement;
-  private ctx: CanvasRenderingContext2D;
-  private showChunkGrid = false;
-  private showVelocityArrows = false;
-  private resizeWatcher: CanvasResizeWatcher;
-
-  constructor(surface: RenderSurface) {
-    // DOM-overlay widget — the canvas/element members it touches
-    // (parentElement, 2d overlay canvas) are DOM-host concepts; on native
-    // they degrade to the compat stubs (display:none anyway).
-    const canvas = surface as unknown as HTMLCanvasElement;
-    this.canvas = canvas;
-    this.overlay = document.createElement("canvas");
-    this.overlay.className = "debug-overlay";
-    this.overlay.style.cssText = `
-      position: absolute;
-      top: 0; left: 0;
-      width: 100%; height: 100%;
-      pointer-events: none;
-      z-index: 0;
-      display: none;
-    `;
-    const parent = canvas.parentElement;
-    if (parent) {
-      parent.style.position = parent.style.position || "relative";
-      parent.appendChild(this.overlay);
-    } else {
-      document.body.appendChild(this.overlay);
-    }
-    this.ctx = this.overlay.getContext("2d")!;
-    this.resizeWatcher = new CanvasResizeWatcher(canvas, {
-      onResize: (w, h) => {
-        if (this.overlay.width !== w || this.overlay.height !== h) {
-          this.overlay.width = w;
-          this.overlay.height = h;
-        }
-      },
-    });
-  }
-
-  setShowChunkGrid(show: boolean): void {
-    this.showChunkGrid = show;
-    this.updateDisplay();
-  }
-
-  setShowVelocityArrows(show: boolean): void {
-    this.showVelocityArrows = show;
-    this.updateDisplay();
-  }
-
-  isChunkGridVisible(): boolean {
-    return this.showChunkGrid;
-  }
-
-  isVelocityArrowsVisible(): boolean {
-    return this.showVelocityArrows;
-  }
-
-  private updateDisplay(): void {
-    const active = this.showChunkGrid || this.showVelocityArrows;
-    this.overlay.style.display = active ? "block" : "none";
-    if (!active) {
-      this.ctx.clearRect(0, 0, this.overlay.width, this.overlay.height);
-    }
-  }
-
-  private projectToScreen(
-    worldX: number, worldY: number, worldZ: number,
-    viewProj: Float32Array,
-    canvasW: number, canvasH: number,
-  ): { x: number; y: number; behind: boolean } | null {
-    const x = viewProj[0] * worldX + viewProj[4] * worldY + viewProj[8] * worldZ + viewProj[12];
-    const y = viewProj[1] * worldX + viewProj[5] * worldY + viewProj[9] * worldZ + viewProj[13];
-    const w = viewProj[3] * worldX + viewProj[7] * worldY + viewProj[11] * worldZ + viewProj[15];
-
-    if (w <= 0) return { x: 0, y: 0, behind: true };
-
-    const ndcX = x / w;
-    const ndcY = y / w;
-
-    const screenX = (ndcX + 1) * 0.5 * canvasW;
-    const screenY = (1 - ndcY) * 0.5 * canvasH;
-
-    return { x: screenX, y: screenY, behind: false };
-  }
-
-  update(
-    camera: Parameters<typeof calculateViewProj>[0],
-    data: IDebugOverlayData,
-  ): void {
-    if (!this.showChunkGrid && !this.showVelocityArrows) return;
-
-    const ctx = this.ctx;
-    const canvasW = this.overlay.width;
-    const canvasH = this.overlay.height;
-    ctx.clearRect(0, 0, canvasW, canvasH);
-
-    const viewProj = calculateViewProj(camera);
-
-    if (this.showChunkGrid) {
-      this.renderChunkGrid(ctx, camera, viewProj, canvasW, canvasH, data);
-    }
-
-    if (this.showVelocityArrows) {
-      this.renderVelocityArrows(ctx, viewProj, canvasW, canvasH, data);
-    }
-  }
-
-  private renderChunkGrid(
-    ctx: CanvasRenderingContext2D,
-    camera: { position: [number, number, number] },
-    viewProj: Float32Array,
-    canvasW: number, canvasH: number,
-    data: IDebugOverlayData,
-  ): void {
-    const playerPos = data.getPlayerPosition();
-    if (!playerPos) return;
-    const { chunkSize, chunksVisible } = data.getChunkGridConfig();
-
-    const playerChunkX = Math.floor(playerPos.x / chunkSize);
-    const playerChunkZ = Math.floor(playerPos.z / chunkSize);
-    const half = Math.ceil(chunksVisible / 2);
-
-    ctx.strokeStyle = "rgba(100, 200, 255, 0.35)";
-    ctx.lineWidth = 1;
-    ctx.font = "10px monospace";
-    ctx.fillStyle = "rgba(100, 200, 255, 0.6)";
-
-    for (let cx = playerChunkX - half; cx <= playerChunkX + half; cx++) {
-      for (let cz = playerChunkZ - half; cz <= playerChunkZ + half; cz++) {
-        const worldX = cx * chunkSize;
-        const worldZ = cz * chunkSize;
-
-        const corners = [
-          this.projectToScreen(worldX, 0, worldZ, viewProj, canvasW, canvasH),
-          this.projectToScreen(worldX + chunkSize, 0, worldZ, viewProj, canvasW, canvasH),
-          this.projectToScreen(worldX + chunkSize, 0, worldZ + chunkSize, viewProj, canvasW, canvasH),
-          this.projectToScreen(worldX, 0, worldZ + chunkSize, viewProj, canvasW, canvasH),
-        ];
-
-        if (corners.some(c => c === null || c.behind)) continue;
-
-        ctx.beginPath();
-        ctx.moveTo(corners[0]!.x, corners[0]!.y);
-        ctx.lineTo(corners[1]!.x, corners[1]!.y);
-        ctx.lineTo(corners[2]!.x, corners[2]!.y);
-        ctx.lineTo(corners[3]!.x, corners[3]!.y);
-        ctx.closePath();
-        ctx.stroke();
-
-        const centerProj = this.projectToScreen(
-          worldX + chunkSize / 2, 0, worldZ + chunkSize / 2,
-          viewProj, canvasW, canvasH,
-        );
-        if (centerProj && !centerProj.behind) {
-          const dx = (worldX + chunkSize / 2) - camera.position[0];
-          const dz = (worldZ + chunkSize / 2) - camera.position[2];
-          const dist = Math.sqrt(dx * dx + dz * dz);
-          if (dist < chunkSize * half) {
-            ctx.fillText(`${cx},${cz}`, centerProj.x - 15, centerProj.y);
-          }
-        }
-      }
-    }
-  }
-
-  private renderVelocityArrows(
-    ctx: CanvasRenderingContext2D,
-    viewProj: Float32Array,
-    canvasW: number, canvasH: number,
-    data: IDebugOverlayData,
-  ): void {
-    const entityCount = data.getEntityCount();
-
-    ctx.strokeStyle = "rgba(255, 200, 50, 0.8)";
-    ctx.fillStyle = "rgba(255, 200, 50, 0.8)";
-    ctx.lineWidth = 2;
-
-    for (let i = 0; i < entityCount; i++) {
-      const pos = data.getEntityPosition(i);
-      const vel = data.getEntityVelocity(i);
-      if (!pos || !vel) continue;
-
-      const speed = Math.sqrt(vel.x * vel.x + vel.y * vel.y + vel.z * vel.z);
-      if (speed < 0.1) continue;
-
-      const scale = 2.0;
-      const endX = pos.x + vel.x * scale;
-      const endY = pos.y + vel.y * scale;
-      const endZ = pos.z + vel.z * scale;
-
-      const startProj = this.projectToScreen(pos.x, pos.y, pos.z, viewProj, canvasW, canvasH);
-      const endProj = this.projectToScreen(endX, endY, endZ, viewProj, canvasW, canvasH);
-
-      if (!startProj || startProj.behind || !endProj || endProj.behind) continue;
-
-      ctx.beginPath();
-      ctx.moveTo(startProj.x, startProj.y);
-      ctx.lineTo(endProj.x, endProj.y);
-      ctx.stroke();
-
-      const dx = endProj.x - startProj.x;
-      const dy = endProj.y - startProj.y;
-      const angle = Math.atan2(dy, dx);
-      const headLen = 6;
-      ctx.beginPath();
-      ctx.moveTo(endProj.x, endProj.y);
-      ctx.lineTo(
-        endProj.x - headLen * Math.cos(angle - Math.PI / 6),
-        endProj.y - headLen * Math.sin(angle - Math.PI / 6),
-      );
-      ctx.lineTo(
-        endProj.x - headLen * Math.cos(angle + Math.PI / 6),
-        endProj.y - headLen * Math.sin(angle + Math.PI / 6),
-      );
-      ctx.closePath();
-      ctx.fill();
-
-      ctx.font = "10px monospace";
-      ctx.fillText(`${speed.toFixed(1)} m/s`, endProj.x + 4, endProj.y - 4);
-    }
-  }
-
-  destroy(): void {
-    this.resizeWatcher.destroy();
-    this.overlay.remove();
-  }
-}