@cadview/core 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -2697,7 +2697,7 @@ function drawMText(ctx, entity, pixelSize) {
 
 // src/renderer/entities/draw-insert.ts
 var MAX_INSERT_DEPTH = 100;
-function drawInsert(ctx, entity, doc, vt, theme, pixelSize, depth = 0) {
+function drawInsert(ctx, entity, doc, vt, theme, pixelSize, depth = 0, stats) {
   if (depth > MAX_INSERT_DEPTH) return;
   const block = doc.blocks.get(entity.blockName);
   if (!block) return;
@@ -2722,9 +2722,9 @@ function drawInsert(ctx, entity, doc, vt, theme, pixelSize, depth = 0) {
         ctx.fillStyle = color;
         ctx.lineWidth = adjustedPixelSize;
         if (blockEntity.type === "INSERT") {
-          drawInsert(ctx, blockEntity, doc, vt, theme, adjustedPixelSize, depth + 1);
+          drawInsert(ctx, blockEntity, doc, vt, theme, adjustedPixelSize, depth + 1, stats);
         } else {
-          drawEntity(ctx, blockEntity, doc, vt, theme, adjustedPixelSize);
+          drawEntity(ctx, blockEntity, doc, vt, theme, adjustedPixelSize, stats);
         }
       }
       ctx.restore();
@@ -2733,7 +2733,7 @@ function drawInsert(ctx, entity, doc, vt, theme, pixelSize, depth = 0) {
 }
 
 // src/renderer/entities/draw-dimension.ts
-function drawDimension(ctx, entity, doc, vt, theme, pixelSize) {
+function drawDimension(ctx, entity, doc, vt, theme, pixelSize, stats) {
   if (entity.blockName) {
     const block = doc.blocks.get(entity.blockName);
     if (block) {
@@ -2742,7 +2742,7 @@ function drawDimension(ctx, entity, doc, vt, theme, pixelSize) {
         ctx.strokeStyle = color;
         ctx.fillStyle = color;
         ctx.lineWidth = pixelSize;
-        drawEntity(ctx, blockEntity, doc, vt, theme, pixelSize);
+        drawEntity(ctx, blockEntity, doc, vt, theme, pixelSize, stats);
       }
       return;
     }
@@ -2819,7 +2819,11 @@ function drawPoint(ctx, entity, pixelSize) {
 }
 
 // src/renderer/entities/draw-entity.ts
-function drawEntity(ctx, entity, doc, vt, theme, pixelSize) {
+function drawEntity(ctx, entity, doc, vt, theme, pixelSize, stats) {
+  if (stats) {
+    stats.drawCalls++;
+    stats.byType[entity.type] = (stats.byType[entity.type] ?? 0) + 1;
+  }
   switch (entity.type) {
     case "LINE":
       drawLine(ctx, entity);
@@ -2849,10 +2853,10 @@ function drawEntity(ctx, entity, doc, vt, theme, pixelSize) {
       drawMText(ctx, entity, pixelSize);
       break;
     case "INSERT":
-      drawInsert(ctx, entity, doc, vt, theme, pixelSize);
+      drawInsert(ctx, entity, doc, vt, theme, pixelSize, 0, stats);
       break;
     case "DIMENSION":
-      drawDimension(ctx, entity, doc, vt, theme, pixelSize);
+      drawDimension(ctx, entity, doc, vt, theme, pixelSize, stats);
       break;
     case "HATCH":
       drawHatch(ctx, entity);
@@ -2899,6 +2903,12 @@ var CanvasRenderer = class {
   render(doc, vt, theme, visibleLayers, selectedEntityIndex) {
     const ctx = this.ctx;
     const dpr = window.devicePixelRatio || 1;
+    const stats = {
+      entitiesDrawn: 0,
+      entitiesSkipped: 0,
+      drawCalls: 0,
+      byType: {}
+    };
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = THEMES[theme].backgroundColor;
     ctx.fillRect(0, 0, this.width, this.height);
@@ -2908,13 +2918,20 @@ var CanvasRenderer = class {
     ctx.lineJoin = "round";
     for (let i = 0; i < doc.entities.length; i++) {
       const entity = doc.entities[i];
-      if (!entity.visible) continue;
-      if (!visibleLayers.has(entity.layer)) continue;
+      if (!entity.visible) {
+        stats.entitiesSkipped++;
+        continue;
+      }
+      if (!visibleLayers.has(entity.layer)) {
+        stats.entitiesSkipped++;
+        continue;
+      }
       const color = resolveEntityColor(entity, doc.layers, theme);
       ctx.strokeStyle = color;
       ctx.fillStyle = color;
       ctx.lineWidth = pixelSize;
-      drawEntity(ctx, entity, doc, vt, theme, pixelSize);
+      stats.entitiesDrawn++;
+      drawEntity(ctx, entity, doc, vt, theme, pixelSize, stats);
     }
     if (selectedEntityIndex >= 0 && selectedEntityIndex < doc.entities.length) {
       const selEntity = doc.entities[selectedEntityIndex];
@@ -2924,6 +2941,7 @@ var CanvasRenderer = class {
       ctx.lineWidth = pixelSize * 3;
       drawEntity(ctx, selEntity, doc, vt, theme, pixelSize);
     }
+    return stats;
   }
   renderEmpty(theme) {
     const ctx = this.ctx;
@@ -2936,6 +2954,136 @@ var CanvasRenderer = class {
   }
 };
 
+// src/renderer/debug-overlay.ts
+var DEFAULT_DEBUG_OPTIONS = {
+  showFps: true,
+  showRenderStats: true,
+  showDocumentInfo: true,
+  showTimings: true,
+  showCamera: true,
+  position: "top-left"
+};
+function resolveDebugOptions(input) {
+  return { ...DEFAULT_DEBUG_OPTIONS, ...input };
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function formatZoom(scale) {
+  if (scale >= 1) return `${scale.toFixed(2)}x`;
+  return `1:${(1 / scale).toFixed(1)}`;
+}
+var FONT = "11px monospace";
+var LINE_HEIGHT = 15;
+var SEPARATOR_HEIGHT = 8;
+var PADDING = 8;
+var MARGIN = 10;
+function renderDebugOverlay(ctx, stats, theme, options, canvasWidth, canvasHeight) {
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  const sections = [];
+  if (options.showFps) {
+    sections.push([
+      `FPS: ${stats.fps}  Frame: ${stats.frameTime.toFixed(1)}ms`
+    ]);
+  }
+  if (options.showRenderStats) {
+    const total = stats.renderStats.entitiesDrawn + stats.renderStats.entitiesSkipped;
+    const lines = [
+      `Drawn: ${stats.renderStats.entitiesDrawn} / ${total}  Calls: ${stats.renderStats.drawCalls}`
+    ];
+    const types = Object.entries(stats.renderStats.byType).sort(([, a], [, b]) => b - a).slice(0, 6).map(([type, count]) => `${type}: ${count}`).join("  ");
+    if (types) lines.push(types);
+    sections.push(lines);
+  }
+  if (options.showDocumentInfo) {
+    const lines = [
+      `Layers: ${stats.visibleLayerCount} / ${stats.layerCount}  Blocks: ${stats.blockCount}`
+    ];
+    if (stats.dxfVersion) lines.push(`DXF: ${stats.dxfVersion}`);
+    if (stats.fileName) lines.push(`File: ${stats.fileName}`);
+    if (stats.fileSize > 0) lines.push(`Size: ${formatBytes(stats.fileSize)}`);
+    sections.push(lines);
+  }
+  if (options.showTimings) {
+    const parts = [];
+    if (stats.parseTime > 0) parts.push(`Parse: ${stats.parseTime.toFixed(0)}ms`);
+    if (stats.spatialIndexBuildTime > 0) parts.push(`Index: ${stats.spatialIndexBuildTime.toFixed(0)}ms`);
+    if (stats.totalLoadTime > 0) parts.push(`Load: ${stats.totalLoadTime.toFixed(0)}ms`);
+    if (parts.length > 0) {
+      sections.push([parts.join("  ")]);
+    }
+  }
+  if (options.showCamera) {
+    const b = stats.viewportBounds;
+    sections.push([
+      `Zoom: ${formatZoom(stats.zoom)}  Pixel: ${stats.pixelSize.toFixed(2)}`,
+      `View: [${b.minX.toFixed(0)}, ${b.minY.toFixed(0)}] \u2192 [${b.maxX.toFixed(0)}, ${b.maxY.toFixed(0)}]`
+    ]);
+  }
+  if (sections.length === 0) return;
+  ctx.font = FONT;
+  const rows = [];
+  for (let s = 0; s < sections.length; s++) {
+    if (s > 0) rows.push({ text: "", isSeparator: true });
+    for (const line of sections[s]) {
+      rows.push({ text: line, isSeparator: false });
+    }
+  }
+  let maxWidth = 0;
+  for (const row of rows) {
+    if (!row.isSeparator) {
+      const w = ctx.measureText(row.text).width;
+      if (w > maxWidth) maxWidth = w;
+    }
+  }
+  const panelWidth = maxWidth + PADDING * 2;
+  let panelHeight = PADDING * 2;
+  for (const row of rows) {
+    panelHeight += row.isSeparator ? SEPARATOR_HEIGHT : LINE_HEIGHT;
+  }
+  let x;
+  let y;
+  switch (options.position) {
+    case "top-left":
+      x = MARGIN;
+      y = MARGIN;
+      break;
+    case "top-right":
+      x = canvasWidth - panelWidth - MARGIN;
+      y = MARGIN;
+      break;
+    case "bottom-left":
+      x = MARGIN;
+      y = canvasHeight - panelHeight - MARGIN;
+      break;
+    case "bottom-right":
+      x = canvasWidth - panelWidth - MARGIN;
+      y = canvasHeight - panelHeight - MARGIN;
+      break;
+  }
+  const config = THEMES[theme];
+  ctx.fillStyle = theme === "dark" ? "rgba(0, 0, 0, 0.75)" : "rgba(255, 255, 255, 0.85)";
+  ctx.fillRect(x, y, panelWidth, panelHeight);
+  ctx.strokeStyle = theme === "dark" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)";
+  ctx.lineWidth = 1;
+  ctx.strokeRect(x + 0.5, y + 0.5, panelWidth - 1, panelHeight - 1);
+  ctx.fillStyle = theme === "dark" ? config.defaultEntityColor : "rgba(0, 0, 0, 0.85)";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "top";
+  let cursorY = y + PADDING;
+  for (const row of rows) {
+    if (row.isSeparator) {
+      cursorY += SEPARATOR_HEIGHT;
+    } else {
+      ctx.fillText(row.text, x + PADDING, cursorY);
+      cursorY += LINE_HEIGHT;
+    }
+  }
+}
+
 // src/viewer/layers.ts
 var LayerManager = class {
   layers = /* @__PURE__ */ new Map();
@@ -3726,6 +3874,19 @@ var CadViewer = class {
   loadGeneration = 0;
   mouseScreenX = 0;
   mouseScreenY = 0;
+  // Debug mode state
+  debugEnabled = false;
+  debugOptions;
+  lastRenderStats = null;
+  lastDebugStats = null;
+  frameTimestamps = [];
+  lastDoRenderTime = 0;
+  lastFrameTime = 0;
+  parseTime = 0;
+  spatialIndexBuildTime = 0;
+  loadedFileName = null;
+  loadedFileSize = 0;
+  debugRafId = 0;
   constructor(canvas, options) {
     this.canvas = canvas;
     this.options = {
@@ -3738,6 +3899,14 @@ var CadViewer = class {
       initialTool: options?.initialTool ?? "pan"
     };
     this.formatConverters = options?.formatConverters ?? [];
+    if (options?.debug) {
+      this.debugEnabled = true;
+      this.debugOptions = resolveDebugOptions(
+        typeof options.debug === "boolean" ? void 0 : options.debug
+      );
+    } else {
+      this.debugOptions = resolveDebugOptions();
+    }
     this.renderer = new CanvasRenderer(canvas);
     this.camera = new Camera(this.options);
     this.layerManager = new LayerManager();
@@ -3750,6 +3919,9 @@ var CadViewer = class {
     this.resizeObserver.observe(canvas);
     canvas.style.cursor = this.getCursorForTool(this.currentTool);
     this.requestRender();
+    if (this.debugEnabled) {
+      this.startDebugLoop();
+    }
   }
   // === Loading ===
   /**
@@ -3788,11 +3960,15 @@ var CadViewer = class {
   async loadFile(file) {
     this.guardDestroyed();
     const generation = ++this.loadGeneration;
+    this.loadedFileName = file.name;
+    this.loadedFileSize = file.size;
     const buffer = await file.arrayBuffer();
     if (this.destroyed || generation !== this.loadGeneration) return;
     const dxfString = await this.runConverters(buffer);
     if (this.destroyed || generation !== this.loadGeneration) return;
+    const t0 = performance.now();
     this.doc = dxfString != null ? parseDxf(dxfString) : parseDxf(buffer);
+    this.parseTime = performance.now() - t0;
     this.onDocumentLoaded();
   }
   /**
@@ -3803,9 +3979,13 @@ var CadViewer = class {
   async loadBuffer(buffer) {
     this.guardDestroyed();
     const generation = ++this.loadGeneration;
+    this.loadedFileName = null;
+    this.loadedFileSize = buffer.byteLength;
     const dxfString = await this.runConverters(buffer);
     if (this.destroyed || generation !== this.loadGeneration) return;
+    const t0 = performance.now();
     this.doc = dxfString != null ? parseDxf(dxfString) : parseDxf(buffer);
+    this.parseTime = performance.now() - t0;
     this.onDocumentLoaded();
   }
   /**
@@ -3815,6 +3995,9 @@ var CadViewer = class {
   loadDocument(doc) {
     this.guardDestroyed();
     ++this.loadGeneration;
+    this.loadedFileName = null;
+    this.loadedFileSize = 0;
+    this.parseTime = 0;
     if (!doc || !Array.isArray(doc.entities) || !(doc.layers instanceof Map)) {
       throw new Error("CadViewer: invalid DxfDocument \u2014 expected entities array and layers Map.");
     }
@@ -3827,7 +4010,11 @@ var CadViewer = class {
   loadString(dxf) {
     this.guardDestroyed();
     ++this.loadGeneration;
+    this.loadedFileName = null;
+    this.loadedFileSize = dxf.length;
+    const t0 = performance.now();
     this.doc = parseDxf(dxf);
+    this.parseTime = performance.now() - t0;
     this.onDocumentLoaded();
   }
   /**
@@ -3837,7 +4024,11 @@ var CadViewer = class {
   loadArrayBuffer(buffer) {
     this.guardDestroyed();
     ++this.loadGeneration;
+    this.loadedFileName = null;
+    this.loadedFileSize = buffer.byteLength;
+    const t0 = performance.now();
     this.doc = parseDxf(buffer);
+    this.parseTime = performance.now() - t0;
     this.onDocumentLoaded();
   }
   /**
@@ -3856,7 +4047,9 @@ var CadViewer = class {
   onDocumentLoaded() {
     if (!this.doc) return;
     this.layerManager.setLayers(this.doc.layers);
+    const t0 = performance.now();
     this.spatialIndex.build(this.doc.entities);
+    this.spatialIndexBuildTime = performance.now() - t0;
     this.selectedEntityIndex = -1;
     this.measureTool.deactivate();
     if (this.currentTool === "measure") {
@@ -3984,6 +4177,7 @@ var CadViewer = class {
   }
   destroy() {
     this.destroyed = true;
+    this.stopDebugLoop();
     this.inputHandler.destroy();
     this.resizeObserver.disconnect();
     this.renderer.destroy();
@@ -3995,7 +4189,12 @@ var CadViewer = class {
   // === Internal (called by InputHandler) ===
   /** @internal */
   requestRender() {
-    if (this.renderPending || this.destroyed) return;
+    if (this.destroyed) return;
+    if (this.debugRafId) {
+      this.doRender();
+      return;
+    }
+    if (this.renderPending) return;
     this.renderPending = true;
     requestAnimationFrame(() => {
       this.renderPending = false;
@@ -4008,13 +4207,24 @@ var CadViewer = class {
       this.renderer.renderEmpty(this.options.theme);
       return;
     }
-    this.renderer.render(
+    const renderStart = performance.now();
+    const stats = this.renderer.render(
       this.doc,
       this.camera.getTransform(),
       this.options.theme,
       this.layerManager.getVisibleLayerNames(),
       this.selectedEntityIndex
     );
+    this.lastFrameTime = performance.now() - renderStart;
+    this.lastRenderStats = stats;
+    const now = performance.now();
+    if (now - this.lastDoRenderTime >= 3) {
+      this.frameTimestamps.push(now);
+    }
+    this.lastDoRenderTime = now;
+    while (this.frameTimestamps.length > 0 && this.frameTimestamps[0] < now - 1e3) {
+      this.frameTimestamps.shift();
+    }
     if (this.currentTool === "measure" && this.measureTool.state.phase !== "idle") {
       const ctx = this.renderer.getContext();
       renderMeasureOverlay(
@@ -4026,7 +4236,104 @@ var CadViewer = class {
         this.options.theme
       );
     }
+    if (this.debugEnabled) {
+      const ctx = this.renderer.getContext();
+      const debugStats = this.buildDebugStats();
+      this.lastDebugStats = debugStats;
+      renderDebugOverlay(
+        ctx,
+        debugStats,
+        this.options.theme,
+        this.debugOptions,
+        this.renderer.getWidth(),
+        this.renderer.getHeight()
+      );
+    }
+  }
+  // === Debug Mode ===
+  /**
+   * Enable or disable the debug overlay.
+   * Pass `true` for defaults, `false` to disable, or an object for granular control.
+   */
+  setDebug(debug) {
+    this.guardDestroyed();
+    if (typeof debug === "boolean") {
+      this.debugEnabled = debug;
+    } else {
+      this.debugEnabled = true;
+      this.debugOptions = resolveDebugOptions(debug);
+    }
+    if (this.debugEnabled) {
+      this.startDebugLoop();
+    } else {
+      this.stopDebugLoop();
+      this.requestRender();
+    }
+  }
+  startDebugLoop() {
+    if (this.debugRafId) return;
+    const loop = () => {
+      if (!this.debugEnabled || this.destroyed) {
+        this.debugRafId = 0;
+        return;
+      }
+      this.doRender();
+      this.debugRafId = requestAnimationFrame(loop);
+    };
+    this.debugRafId = requestAnimationFrame(loop);
+  }
+  stopDebugLoop() {
+    if (this.debugRafId) {
+      cancelAnimationFrame(this.debugRafId);
+      this.debugRafId = 0;
+    }
+  }
+  /**
+   * Get the latest debug stats snapshot, or null if debug mode is off.
+   */
+  getDebugStats() {
+    return this.debugEnabled ? this.lastDebugStats : null;
+  }
+  buildDebugStats() {
+    const vt = this.camera.getTransform();
+    const w = this.renderer.getWidth();
+    const h = this.renderer.getHeight();
+    const bounds = this.computeViewportBounds(vt, w, h);
+    return {
+      fps: this.frameTimestamps.length,
+      frameTime: this.lastFrameTime,
+      renderStats: this.lastRenderStats ?? {
+        entitiesDrawn: 0,
+        entitiesSkipped: 0,
+        drawCalls: 0,
+        byType: {}
+      },
+      entityCount: this.doc?.entities.length ?? 0,
+      layerCount: this.doc?.layers.size ?? 0,
+      visibleLayerCount: this.layerManager.getVisibleLayerNames().size,
+      blockCount: this.doc?.blocks.size ?? 0,
+      parseTime: this.parseTime,
+      spatialIndexBuildTime: this.spatialIndexBuildTime,
+      totalLoadTime: this.parseTime + this.spatialIndexBuildTime,
+      zoom: vt.scale,
+      pixelSize: vt.scale > 0 ? 1 / vt.scale : 0,
+      viewportBounds: bounds,
+      fileName: this.loadedFileName,
+      fileSize: this.loadedFileSize,
+      dxfVersion: this.doc?.header.acadVersion ?? null
+    };
+  }
+  computeViewportBounds(vt, w, h) {
+    const [x1, y1] = screenToWorld(vt, 0, h);
+    const [x2, y2] = screenToWorld(vt, w, 0);
+    return {
+      minX: Math.min(x1, x2),
+      minY: Math.min(y1, y2),
+      maxX: Math.max(x1, x2),
+      maxY: Math.max(y1, y2)
+    };
   }
+  // === Internal (called by InputHandler) ===
   /** @internal */
   handlePan(dx, dy) {
     this.camera.pan(dx, dy);
@@ -4129,6 +4436,7 @@ exports.findSnaps = findSnaps;
 exports.fitToView = fitToView;
 exports.hitTest = hitTest;
 exports.parseDxf = parseDxf;
+exports.renderDebugOverlay = renderDebugOverlay;
 exports.renderMeasureOverlay = renderMeasureOverlay;
 exports.resolveEntityColor = resolveEntityColor;
 exports.screenToWorld = screenToWorld;