@downdraft/engine 0.1.0 → 0.1.2-alpha.5

package/dist/modules/devtools/src/height-ruler-renderer.js

@@ -0,0 +1,189 @@
+import { calculateViewProj, createValidatedShaderModule, DEPTH_FORMAT, MSAA_SAMPLE_COUNT } from "@downdraft/engine";
+const RULER_WGSL = /* wgsl */ `
+struct Uniforms {
+  viewProj: mat4x4<f32>,
+  _pad0: vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+struct VertexOutput {
+  @builtin(position) clipPos: vec4<f32>,
+  @location(0) worldPos: vec3<f32>,
+  @location(1) tickFlag: f32,
+};
+
+@vertex
+fn vs_main(@location(0) position: vec3<f32>, @location(1) tickFlag: f32) -> VertexOutput {
+  var output: VertexOutput;
+  output.clipPos = uniforms.viewProj * vec4<f32>(position, 1.0);
+  output.worldPos = position;
+  output.tickFlag = tickFlag;
+  return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+  // Major ticks (every meter) are bright; the main line is dimmer.
+  let isTick = input.tickFlag > 0.5;
+  let color = select(
+    vec3<f32>(0.3, 0.6, 1.0),   // main line — soft blue
+    vec3<f32>(0.5, 0.8, 1.0),   // tick marks — brighter blue
+    isTick,
+  );
+  let alpha = select(0.5, 0.9, isTick);
+  return vec4<f32>(color, alpha);
+}
+`;
+/**
+ * Renders a vertical measuring ruler at world origin (x=0, z=0) from y=0
+ * up to `maxHeight` meters, with tick marks at every meter.
+ *
+ * The DOM overlay labels are handled by the caller via `projectHeightMarkers()`,
+ * which projects the 3D tick positions to 2D screen coordinates using the
+ * current camera view-projection matrix.
+ */
+export class HeightRulerRenderer {
+    device;
+    format;
+    pipeline = null;
+    uniformBuffer = null;
+    bindGroup = null;
+    vertexBuffer = null;
+    vertexCount = 0;
+    maxHeight = 3; // meters
+    constructor(device, format) {
+        this.device = device;
+        this.format = format;
+    }
+    init() {
+        this.rebuildVertices(this.maxHeight);
+        this.uniformBuffer = this.device.createBuffer({
+            size: 256,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        const shaderModule = createValidatedShaderModule(this.device, { code: RULER_WGSL, label: "HeightRulerRenderer" });
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            entries: [{
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    buffer: { type: "uniform" },
+                }],
+        });
+        this.bindGroup = this.device.createBindGroup({
+            layout: bindGroupLayout,
+            entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }],
+        });
+        this.pipeline = this.device.createRenderPipeline({
+            layout: this.device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+            vertex: {
+                module: shaderModule,
+                entryPoint: "vs_main",
+                buffers: [{
+                        arrayStride: 16, // pos(3 floats) + tickFlag(1 float)
+                        attributes: [
+                            { shaderLocation: 0, offset: 0, format: "float32x3" },
+                            { shaderLocation: 1, offset: 12, format: "float32" },
+                        ],
+                    }],
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "fs_main",
+                targets: [{
+                        format: this.format,
+                        blend: {
+                            color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+                            alpha: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+                        },
+                    }],
+            },
+            primitive: { topology: "line-list" },
+            multisample: { count: MSAA_SAMPLE_COUNT },
+            depthStencil: {
+                format: DEPTH_FORMAT,
+                depthWriteEnabled: false,
+                depthCompare: "less",
+            },
+        });
+    }
+    rebuildVertices(maxHeight) {
+        // Vertical line at (0, 0, 0) from y=0 to y=maxHeight, plus tick marks
+        // at every meter. Each tick is a short horizontal line on the X axis.
+        const verts = [];
+        const tickSize = 0.15; // 15cm tick marks
+        // Main vertical line (tickFlag = 0)
+        verts.push(0, 0, 0, 0, 0, maxHeight, 0, 0);
+        // Tick marks at every meter (tickFlag = 1)
+        for (let h = 0; h <= maxHeight; h++) {
+            verts.push(-tickSize, h, 0, 1, tickSize, h, 0, 1);
+        }
+        this.vertexCount = verts.length / 4;
+        if (this.vertexBuffer)
+            this.vertexBuffer.destroy();
+        this.vertexBuffer = this.device.createBuffer({
+            size: verts.length * 4,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(this.vertexBuffer, 0, new Float32Array(verts));
+    }
+    /** Update the ruler height (e.g. to match the loaded model's height). */
+    setMaxHeight(meters) {
+        const rounded = Math.max(1, Math.ceil(meters));
+        if (rounded !== this.maxHeight) {
+            this.maxHeight = rounded;
+            if (this.pipeline)
+                this.rebuildVertices(rounded);
+        }
+    }
+    render(passEncoder, camera) {
+        if (!this.pipeline || !this.bindGroup || !this.uniformBuffer || !this.vertexBuffer)
+            return;
+        const viewProj = calculateViewProj(camera);
+        const uniforms = new Float32Array(20);
+        for (let i = 0; i < 16; i++)
+            uniforms[i] = viewProj[i];
+        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
+        passEncoder.setPipeline(this.pipeline);
+        passEncoder.setBindGroup(0, this.bindGroup);
+        passEncoder.setVertexBuffer(0, this.vertexBuffer);
+        passEncoder.draw(this.vertexCount);
+    }
+    /**
+     * Project the height marker positions (every meter on the ruler) to 2D
+     * screen coordinates. Returns an array of { height, x, y, visible } for
+     * each meter tick, where x/y are in CSS pixels relative to the canvas.
+     */
+    projectHeightMarkers(camera, canvasWidth, canvasHeight) {
+        const viewProj = calculateViewProj(camera);
+        const results = [];
+        for (let h = 0; h <= this.maxHeight; h++) {
+            // World position of the tick mark tip (right side, x=+tickSize)
+            const wx = 0.15;
+            const wy = h;
+            const wz = 0;
+            // Multiply by view-projection matrix (column-major)
+            const clipX = viewProj[0] * wx + viewProj[4] * wy + viewProj[8] * wz + viewProj[12];
+            const clipY = viewProj[1] * wx + viewProj[5] * wy + viewProj[9] * wz + viewProj[13];
+            const clipZ = viewProj[2] * wx + viewProj[6] * wy + viewProj[10] * wz + viewProj[14];
+            const clipW = viewProj[3] * wx + viewProj[7] * wy + viewProj[11] * wz + viewProj[15];
+            if (clipW <= 0) {
+                results.push({ height: h, x: 0, y: 0, visible: false });
+                continue;
+            }
+            const ndcX = clipX / clipW;
+            const ndcY = clipY / clipW;
+            const ndcZ = clipZ / clipW;
+            // NDC to screen pixels (Y is flipped: NDC -1 = bottom, +1 = top)
+            const screenX = (ndcX + 1) / 2 * canvasWidth;
+            const screenY = (1 - ndcY) / 2 * canvasHeight;
+            const visible = ndcZ >= -1 && ndcZ <= 1;
+            results.push({ height: h, x: screenX, y: screenY, visible });
+        }
+        return results;
+    }
+    destroy() {
+        this.vertexBuffer?.destroy();
+        this.uniformBuffer?.destroy();
+    }
+}

package/dist/modules/devtools/src/index.js

@@ -0,0 +1,46 @@
+export { createTransformGizmoModule } from "./gizmo-module.js";
+export { TransformGizmo } from "./transform-gizmo.js";
+// Debug renderers (promoted from model-viewer)
+export { GridRenderer } from "./grid-renderer.js";
+export { HeightRulerRenderer } from "./height-ruler-renderer.js";
+export { SkeletonRenderer } from "./skeleton-renderer.js";
+// Scene & debug stores
+export { useDebugStore } from "./debug-store.js";
+export { useSceneStore } from "./scene-store.js";
+// Debug overlays (generic rendering, game provides data via interfaces)
+export { DebugOverlay } from "./debug-overlay.js";
+export { DebugRaycast } from "./debug-raycast.js";
+export { LabelOverlay } from "./label-overlay.js";
+export { SceneSync } from "./scene-sync.js";
+// Asset utilities
+export { asyncFetchArrayBuffer, bufferCache, evictThumbnailCache, findBinForGLTF, findMTLForOBJ, syncFetchArrayBuffer, thumbnailCache } from "./asset-utils.js";
+// Data bridge (non-abstract, data-feeds only) & base inspector & interfaces
+export { DevToolsDataBridge } from "./data-bridge.js";
+export { createDoctorPanelExtension } from "./doctor-panel.js";
+export { BaseSceneInspector } from "./scene-inspector.js";
+export { createSimStatsPanelExtension } from "./sim-stats-panel.js";
+// Unified DevTools API — single registration surface for plugins, games, and
+// engine systems. Auto-detects realm (main vs worker) and chooses transport.
+export { allocateDevToolsSAB, computeDevToolsSABLayout, devtools, DEVTOOLS_REALM, DEVTOOLS_SAB_MAX_FEEDS } from "./api.js";
+// Worker-side helpers for exposing devtools RPC methods
+export { attachDevToolsSAB, exposeDevToolsApi } from "./worker-expose.js";
+// Renderer-side worker manifest sync
+export { syncWorkerManifests } from "./worker-sync.js";
+// Renderer adapter — auto-discovers renderer capabilities
+export { createDevToolsRendererAdapter } from "./renderer-adapter.js";
+// Sim stats provider factory — eliminates duplicated polling/control boilerplate
+export { createSimStatsProvider } from "./sim-stats-provider.js";
+// initDevTools helper — one-line wiring per game
+export { initDevTools } from "./init.js";
+// Profiling bridge — wires the ProfilingSAB + renderer-side warning engine +
+// event-loop monitor + trace event writer + auto-trace + built-in view descriptors
+export { bindDebugStore } from "./bind-debug-store.js";
+export { ProfilingBridge } from "./profiling-bridge.js";
+export { wireProfilingBridge } from "./profiling-hooks.js";
+// Debug view descriptors — declarative registration of profiler overlay views
+export { BUILTIN_VIEW_DESCRIPTORS } from "./debug-view-descriptors.js";
+// Material stats panel — reusable DevTools tab for the material system
+export { createMaterialStatsPanelExtension } from "./material-stats-panel.js";
+// Blitz devtools — docked in-window DevTools UI (F12)
+export { BlitzDevtoolsHost, createSelfHostedDevtoolsUi } from "./blitz/host.js";
+export { BlitzDevtoolsTok, createDevtoolsUiModule } from "./blitz/module.js";

package/dist/modules/devtools/src/init.js

@@ -0,0 +1,204 @@
+// ============================================================================
+// initDevTools — one-line DevTools wiring for games.
+//
+// Replaces the per-game boilerplate of:
+//   1. Creating an IDevToolsDataRenderer adapter
+//   2. Instantiating DevToolsDataBridge (or BaseSceneInspector)
+//   3. Calling init()
+//   4. Wiring sim stats provider, panel extensions, overlay toggles, etc.
+//
+// Also merges globally-registered panels/feeds/commands from the `devtools`
+// singleton (registered by plugins via ctx.devtools.registerPanel() etc.)
+// and from worker manifests (via syncWorkerManifests).
+//
+// Returns the bridge instance for games that need post-init calls
+// (e.g. to-the-ocean's sceneInspector.setSimBridge()).
+// ============================================================================
+import { _devtoolsImpl, devtools, DevToolsAPITok } from "./api.js";
+import { DevToolsDataBridge } from "./data-bridge.js";
+import { ProfilingBridge } from "./profiling-bridge.js";
+import { createDevToolsRendererAdapter } from "./renderer-adapter.js";
+import { BaseSceneInspector } from "./scene-inspector.js";
+import { syncWorkerManifests } from "./worker-sync.js";
+/**
+ * Initialize DevTools with one call. Creates the bridge, wires all providers,
+  merges globally-registered panels/feeds/commands, syncs worker manifests,
+ * and exposes the API on window.__sceneInspector.
+ *
+ * Returns the bridge instance.
+ */
+export async function initDevTools(renderer, options = {}) {
+    // 1. Build the renderer adapter (auto-discovers framework capabilities)
+    const adapter = createDevToolsRendererAdapter(renderer);
+    // 2. Determine bridge type
+    const useSceneInspector = options.sceneInspector
+        || !!options.bridgeClass
+        || isSceneRenderer(renderer);
+    // 3. Register game-declared panels/toggles into the global registry
+    //    (these merge with plugin-registered ones)
+    if (options.panels) {
+        options.panels.forEach((panel) => {
+            devtools.registerPanel(panel);
+        });
+    }
+    if (options.overlayToggles) {
+        options.overlayToggles.forEach((toggle) => {
+            devtools.registerOverlayToggle(toggle);
+        });
+    }
+    // 4. Sync worker manifests (fetches panels/feeds/commands from sim workers)
+    if (options.workerHosts && options.workerHosts.length > 0) {
+        await syncWorkerManifests(options.workerHosts);
+    }
+    // 4b. Inject devtools into the renderer's plugin host so renderer plugins
+    //     can self-register via ctx.devtools.register*(...).
+    const rendererModuleHost = renderer?.getRendererModuleHost?.();
+    if (rendererModuleHost && typeof rendererModuleHost.setDevToolsAPI === "function") {
+        rendererModuleHost.setDevToolsAPI(devtools);
+    }
+    // Also provide the API as a DI token so engine libraries can inject it
+    // (ctx.injectOptional(DevToolsAPITok)) instead of importing the singleton.
+    if (rendererModuleHost && typeof rendererModuleHost.provideExternal === "function") {
+        rendererModuleHost.provideExternal("devtools", DevToolsAPITok, devtools);
+    }
+    // 5. Create the bridge
+    let bridge;
+    if (useSceneInspector) {
+        const BridgeClass = (options.bridgeClass ?? BaseSceneInspector);
+        bridge = new BridgeClass();
+        bridge.init(renderer);
+    }
+    else {
+        bridge = new DevToolsDataBridge();
+        bridge.init(adapter);
+    }
+    // 6. Wire providers
+    if (options.simStatsProvider) {
+        wireSimStatsProvider(bridge, options.simStatsProvider);
+    }
+    if (options.debugOverlayProvider) {
+        wireDebugOverlayProvider(bridge, options.debugOverlayProvider);
+    }
+    if (options.debugModeProvider) {
+        wireDebugModeProvider(bridge, options.debugModeProvider);
+    }
+    if (options.performanceMetricsProvider) {
+        wirePerformanceMetricsProvider(bridge, options.performanceMetricsProvider);
+    }
+    // 7. Merge globally-registered panels/toggles/feeds/commands into the bridge
+    //    The bridge's getPanelExtensions()/getOverlayToggles() already returns
+    //    game-declared ones; we augment the __sceneInspector API with
+    //    plugin-registered data feeds and commands.
+    mergeGlobalRegistrations(bridge);
+    // 8. Initialize the profiling system (if enabled)
+    if (options.profiling) {
+        const profilingOpts = typeof options.profiling === "object" ? options.profiling : {};
+        const profilingBridge = new ProfilingBridge(profilingOpts);
+        bridge._profilingBridge = profilingBridge;
+        // Expose the ProfilingSAB + views on __sceneInspector for the profiler overlay
+        const api = window.__sceneInspector;
+        if (api) {
+            api.__getProfilingSAB = () => profilingBridge.getProfilingSAB();
+            api.__getProfilingBridge = () => profilingBridge;
+            api.__getViews = () => devtools.getViews();
+        }
+    }
+    return bridge;
+}
+// --- Helpers ---
+function isSceneRenderer(renderer) {
+    if (!renderer)
+        return false;
+    // Feature-detect: IDevToolsRenderer requires these methods
+    return typeof renderer.setGizmoPosition === "function"
+        && typeof renderer.uploadModel === "function";
+}
+function wireSimStatsProvider(bridge, provider) {
+    // The bridge's getSimStatsProvider() is overridden via a closure hack:
+    // We store the provider on the bridge instance and override the protected method.
+    bridge._simStatsProvider = provider;
+    bridge.getSimStatsProvider = () => provider;
+    // Start polling if the provider has a start() method (from createSimStatsProvider)
+    provider.start?.();
+}
+function wireDebugOverlayProvider(bridge, provider) {
+    bridge._debugOverlayProvider = provider;
+    bridge.getDebugOverlayProvider = () => provider;
+}
+function wireDebugModeProvider(bridge, provider) {
+    bridge._debugModeProvider = provider;
+    bridge.getDebugModeProvider = () => provider;
+}
+function wirePerformanceMetricsProvider(bridge, provider) {
+    bridge._performanceMetricsProvider = provider;
+    bridge.getPerformanceMetricsProvider = () => provider;
+}
+/**
+ * Merge globally-registered panels, data feeds, and commands from the `devtools`
+ * singleton into the bridge's __sceneInspector API.
+ *
+ * - Panels: merged into getPanelExtensions() (game panels + plugin panels)
+ * - Data feeds: added as methods on __sceneInspector (called synchronously)
+ * - Commands: added as methods on __sceneInspector (forwarded to worker or called directly)
+ * - SAB stats: added as methods on __sceneInspector (read from SAB)
+ */
+function mergeGlobalRegistrations(bridge) {
+    const manifest = devtools.getManifest();
+    // Augment getPanelExtensions to merge global registry panels
+    const originalGetPanels = bridge.getPanelExtensions?.bind(bridge);
+    bridge.getPanelExtensions = () => {
+        const gamePanels = originalGetPanels?.() ?? [];
+        // Merge: game panels take precedence on id collisions
+        const merged = new Map();
+        manifest.panels.forEach((p) => { merged.set(p.id, p); ; });
+        gamePanels.forEach((p) => { merged.set(p.id, p); ; });
+        return Array.from(merged.values()).sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    };
+    // Augment getOverlayToggles to merge global registry toggles
+    const originalGetToggles = bridge.getOverlayToggles?.bind(bridge);
+    bridge.getOverlayToggles = () => {
+        const gameToggles = originalGetToggles?.() ?? [];
+        const merged = new Map();
+        manifest.toggles.forEach((t) => { merged.set(t.id, t); ; });
+        gameToggles.forEach((t) => { merged.set(t.id, t); ; });
+        return Array.from(merged.values());
+    };
+    // Add data feed methods to the __sceneInspector API
+    // These are called synchronously by the panel via callInspector()
+    const api = window.__sceneInspector;
+    if (api) {
+        for (let _i = 0, _it = manifest.dataFeeds, _n = _it.length; _i < _n; _i++) {
+            const feed = _it[_i];
+            if (typeof api[feed.name] === "function")
+                continue; // don't override game-provided
+            const feedName = feed.name;
+            api[feedName] = () => {
+                // Main realm: call the registered fn directly
+                const fn = _devtoolsImpl.getDataFeedFn(feedName);
+                if (fn)
+                    return fn();
+                // Worker realm: read from SAB
+                return _devtoolsImpl.readDataFeed(feed.feedIndex);
+            };
+        }
+        // Add command methods
+        for (let _i = 0, _it = manifest.commands, _n = _it.length; _i < _n; _i++) {
+            const cmdName = _it[_i];
+            if (typeof api[cmdName] === "function")
+                continue;
+            api[cmdName] = (...args) => {
+                return _devtoolsImpl.callCommand(cmdName, args);
+            };
+        }
+        // Add SAB stat methods (get{Name} → number)
+        for (let _i = 0, _it = manifest.sabStats, _n = _it.length; _i < _n; _i++) {
+            const stat = _it[_i];
+            const methodName = `get${stat.name.charAt(0).toUpperCase()}${stat.name.slice(1)}`;
+            if (typeof api[methodName] === "function")
+                continue;
+            api[methodName] = () => {
+                return _devtoolsImpl.readSABStat(stat.name);
+            };
+        }
+    }
+}

package/dist/modules/devtools/src/label-overlay.js

@@ -0,0 +1,129 @@
+// ============================================================================
+// LabelOverlay — HTML-based billboard labels for dev mode
+// Generic DOM management + projection; game provides labels via ILabelProvider.
+// ============================================================================
+import { calculateViewProj } from "@downdraft/engine";
+const MAX_LABELS = 512;
+export class LabelOverlay {
+    container;
+    labels = new Map();
+    active = false;
+    canvas;
+    provider = null;
+    constructor(surface) {
+        // 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;
+        this.canvas = canvas;
+        this.container = document.createElement("div");
+        this.container.className = "label-overlay";
+        this.container.style.cssText = `
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      pointer-events: none;
+      overflow: hidden;
+      z-index: 0;
+      display: none;
+    `;
+        const parent = canvas.parentElement;
+        if (parent) {
+            parent.style.position = parent.style.position || "relative";
+            parent.appendChild(this.container);
+        }
+        else {
+            document.body.appendChild(this.container);
+        }
+    }
+    setProvider(provider) {
+        this.provider = provider;
+    }
+    setActive(active) {
+        this.active = active;
+        this.container.style.display = active ? "block" : "none";
+        if (!active) {
+            this.clearLabels();
+        }
+    }
+    isActive() {
+        return this.active;
+    }
+    clearLabels() {
+        for (const entry of this.labels.values()) {
+            entry.el.remove();
+        }
+        this.labels.clear();
+    }
+    getOrCreateLabel(key) {
+        let entry = this.labels.get(key);
+        if (entry)
+            return entry.el;
+        if (this.labels.size >= MAX_LABELS)
+            return null;
+        const el = document.createElement("div");
+        el.className = "dev-label";
+        el.style.cssText = `
+      position: absolute;
+      font-family: monospace;
+      font-size: 11px;
+      color: #fff;
+      background: rgba(0, 0, 0, 0.65);
+      border-radius: 3px;
+      padding: 1px 5px;
+      white-space: nowrap;
+      pointer-events: none;
+      transform: translate(-50%, -100%);
+      will-change: transform, left, top;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+    `;
+        this.container.appendChild(el);
+        this.labels.set(key, { el });
+        return el;
+    }
+    projectToScreen(worldX, worldY, worldZ, viewProj, canvasW, canvasH) {
+        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) {
+        if (!this.active || !this.provider)
+            return;
+        const viewProj = calculateViewProj(camera);
+        const canvasW = this.canvas.clientWidth;
+        const canvasH = this.canvas.clientHeight;
+        const labels = this.provider.getLabels();
+        const usedKeys = new Set();
+        for (let _i = 0, _it = labels, _n = _it.length; _i < _n; _i++) {
+            const label = _it[_i];
+            usedKeys.add(label.key);
+            const proj = this.projectToScreen(label.x, label.y, label.z, viewProj, canvasW, canvasH);
+            if (!proj || proj.behind)
+                continue;
+            const el = this.getOrCreateLabel(label.key);
+            if (!el)
+                continue;
+            el.textContent = label.text;
+            el.style.left = `${proj.x}px`;
+            el.style.top = `${proj.y}px`;
+            el.style.color = label.color;
+            el.style.display = "block";
+        }
+        for (const [key, entry] of this.labels.entries()) {
+            if (!usedKeys.has(key)) {
+                entry.el.style.display = "none";
+            }
+        }
+    }
+    destroy() {
+        this.clearLabels();
+        this.container.remove();
+    }
+}