circuit-to-canvas 0.0.18 → 0.0.20

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText } from 'circuit-json';
+import { AnyCircuitElement, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -202,6 +202,20 @@ interface DrawPathParams {
 }
 declare function drawPath(params: DrawPathParams): void;
 
+interface DrawArrowParams {
+    ctx: CanvasContext;
+    x: number;
+    y: number;
+    angle: number;
+    arrowSize: number;
+    color: string;
+    strokeWidth: number;
+}
+/**
+ * Draw an arrow at a point along a line
+ */
+declare function drawArrow(params: DrawArrowParams): void;
+
 type AlphabetLayout = {
     width: number;
     height: number;
@@ -388,4 +402,12 @@ interface DrawPcbNoteTextParams {
 }
 declare function drawPcbNoteText(params: DrawPcbNoteTextParams): void;
 
-export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawCircleParams, type DrawContext, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };
+interface DrawPcbNoteDimensionParams {
+    ctx: CanvasContext;
+    pcbNoteDimension: PcbNoteDimension;
+    realToCanvasMat: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbNoteDimension(params: DrawPcbNoteDimensionParams): void;
+
+export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawArrowParams, type DrawCircleParams, type DrawContext, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -647,37 +647,142 @@ function drawPcbBoard(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen.ts
+// lib/drawer/shapes/text/text.ts
+import { lineAlphabet } from "@tscircuit/alphabet";
 import { applyToPoint as applyToPoint8 } from "transformation-matrix";
-function layerToSilkscreenColor(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+
+// lib/drawer/shapes/text/getAlphabetLayout.ts
+var GLYPH_WIDTH_RATIO = 0.62;
+var LETTER_SPACING_RATIO = 0.3;
+var SPACE_WIDTH_RATIO = 1;
+var STROKE_WIDTH_RATIO = 0.13;
+function getAlphabetLayout(text, fontSize) {
+  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
+  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
+  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
+  const characters = Array.from(text);
+  let width = 0;
+  characters.forEach((char, index) => {
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    width += advance;
+    if (index < characters.length - 1) width += letterSpacing;
+  });
+  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
+  return {
+    width,
+    height: fontSize,
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    strokeWidth
+  };
 }
-function mapAnchorAlignment(alignment) {
-  if (!alignment) return "center";
-  if (alignment.includes("left")) return "left";
-  if (alignment.includes("right")) return "right";
-  return "center";
+
+// lib/drawer/shapes/text/getTextStartPosition.ts
+function getTextStartPosition(alignment, layout) {
+  const totalWidth = layout.width + layout.strokeWidth;
+  const totalHeight = layout.height + layout.strokeWidth;
+  let x = 0;
+  let y = 0;
+  if (alignment === "center") {
+    x = -totalWidth / 2;
+  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
+    x = 0;
+  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
+    x = -totalWidth;
+  }
+  if (alignment === "center") {
+    y = -totalHeight / 2;
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
+    y = 0;
+  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
+    y = -totalHeight;
+  } else {
+    y = 0;
+  }
+  return { x, y };
 }
-function drawPcbSilkscreenText(params) {
-  const { ctx, text, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(text.layer, colorMap);
-  const [x, y] = applyToPoint8(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y
-  ]);
-  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a);
-  const rotation = text.ccw_rotation ?? 0;
+
+// lib/drawer/shapes/text/text.ts
+var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+function strokeAlphabetText(ctx, text, layout, startX, startY) {
+  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
+  const topY = startY;
+  const characters = Array.from(text);
+  let cursor = startX + strokeWidth / 2;
+  characters.forEach((char, index) => {
+    const lines = getGlyphLines(char);
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    if (lines?.length) {
+      ctx.beginPath();
+      for (const line of lines) {
+        const x1 = cursor + line.x1 * glyphWidth;
+        const y1 = topY + (1 - line.y1) * height;
+        const x2 = cursor + line.x2 * glyphWidth;
+        const y2 = topY + (1 - line.y2) * height;
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+      }
+      ctx.stroke();
+    }
+    cursor += advance;
+    if (index < characters.length - 1) {
+      cursor += letterSpacing;
+    }
+  });
+}
+function drawText(params) {
+  const {
+    ctx,
+    text,
+    x,
+    y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment,
+    rotation = 0
+  } = params;
+  if (!text) return;
+  const [canvasX, canvasY] = applyToPoint8(realToCanvasMat, [x, y]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const scaledFontSize = fontSize * scale2;
+  const layout = getAlphabetLayout(text, scaledFontSize);
+  const startPos = getTextStartPosition(anchorAlignment, layout);
   ctx.save();
-  ctx.translate(x, y);
+  ctx.translate(canvasX, canvasY);
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180));
   }
-  ctx.font = `${fontSize}px sans-serif`;
-  ctx.fillStyle = color;
-  ctx.textAlign = mapAnchorAlignment(text.anchor_alignment);
-  ctx.fillText(text.text, 0, 0);
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = color;
+  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
   ctx.restore();
 }
+
+// lib/drawer/elements/pcb-silkscreen.ts
+function layerToSilkscreenColor(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
+function drawPcbSilkscreenText(params) {
+  const { ctx, text, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor(text.layer, colorMap);
+  const fontSize = text.font_size ?? 1;
+  const rotation = text.ccw_rotation ?? 0;
+  drawText({
+    ctx,
+    text: text.text,
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment: text.anchor_alignment ?? "center",
+    rotation
+  });
+}
 function drawPcbSilkscreenRect(params) {
   const { ctx, rect, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(rect.layer, colorMap);
@@ -829,129 +934,12 @@ function drawPcbCopperPour(params) {
 }
 
 // lib/drawer/elements/pcb-copper-text.ts
-import { applyToPoint as applyToPoint11 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/text.ts
-import { lineAlphabet } from "@tscircuit/alphabet";
 import { applyToPoint as applyToPoint10 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/getAlphabetLayout.ts
-var GLYPH_WIDTH_RATIO = 0.62;
-var LETTER_SPACING_RATIO = 0.3;
-var SPACE_WIDTH_RATIO = 1;
-var STROKE_WIDTH_RATIO = 0.13;
-function getAlphabetLayout(text, fontSize) {
-  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
-  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
-  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
-  const characters = Array.from(text);
-  let width = 0;
-  characters.forEach((char, index) => {
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    width += advance;
-    if (index < characters.length - 1) width += letterSpacing;
-  });
-  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
-  return {
-    width,
-    height: fontSize,
-    glyphWidth,
-    letterSpacing,
-    spaceWidth,
-    strokeWidth
-  };
-}
-
-// lib/drawer/shapes/text/getTextStartPosition.ts
-function getTextStartPosition(alignment, layout) {
-  const totalWidth = layout.width + layout.strokeWidth;
-  const totalHeight = layout.height + layout.strokeWidth;
-  let x = 0;
-  let y = 0;
-  if (alignment === "center") {
-    x = -totalWidth / 2;
-  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
-    x = 0;
-  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
-    x = -totalWidth;
-  }
-  if (alignment === "center") {
-    y = -totalHeight / 2;
-  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
-    y = 0;
-  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
-    y = -totalHeight;
-  } else {
-    y = 0;
-  }
-  return { x, y };
-}
-
-// lib/drawer/shapes/text/text.ts
-var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
-function strokeAlphabetText(ctx, text, layout, startX, startY) {
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
-  const topY = startY;
-  const characters = Array.from(text);
-  let cursor = startX + strokeWidth / 2;
-  characters.forEach((char, index) => {
-    const lines = getGlyphLines(char);
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    if (lines?.length) {
-      ctx.beginPath();
-      for (const line of lines) {
-        const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = topY + (1 - line.y1) * height;
-        const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = topY + (1 - line.y2) * height;
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-      }
-      ctx.stroke();
-    }
-    cursor += advance;
-    if (index < characters.length - 1) {
-      cursor += letterSpacing;
-    }
-  });
-}
-function drawText(params) {
-  const {
-    ctx,
-    text,
-    x,
-    y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment,
-    rotation = 0
-  } = params;
-  if (!text) return;
-  const [canvasX, canvasY] = applyToPoint10(realToCanvasMat, [x, y]);
-  const scale2 = Math.abs(realToCanvasMat.a);
-  const scaledFontSize = fontSize * scale2;
-  const layout = getAlphabetLayout(text, scaledFontSize);
-  const startPos = getTextStartPosition(anchorAlignment, layout);
-  ctx.save();
-  ctx.translate(canvasX, canvasY);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  ctx.lineWidth = layout.strokeWidth;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.strokeStyle = color;
-  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
-  ctx.restore();
-}
-
-// lib/drawer/elements/pcb-copper-text.ts
 var DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
 function layerToCopperColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
-function mapAnchorAlignment2(alignment) {
+function mapAnchorAlignment(alignment) {
   if (!alignment) return "center";
   if (alignment.includes("left")) return "center_left";
   if (alignment.includes("right")) return "center_right";
@@ -961,7 +949,7 @@ function drawPcbCopperText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
   const content = text.text ?? "";
   if (!content) return;
-  const [x, y] = applyToPoint11(realToCanvasMat, [
+  const [x, y] = applyToPoint10(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
@@ -975,7 +963,7 @@ function drawPcbCopperText(params) {
   const textColor = layerToCopperColor(text.layer, colorMap);
   const layout = getAlphabetLayout(content, fontSize);
   const totalWidth = layout.width + layout.strokeWidth;
-  const alignment = mapAnchorAlignment2(text.anchor_alignment);
+  const alignment = mapAnchorAlignment(text.anchor_alignment);
   const startPos = getTextStartPosition(alignment, layout);
   const startX = startPos.x;
   const startY = startPos.y;
@@ -1144,6 +1132,156 @@ function drawPcbNoteText(params) {
   });
 }
 
+// lib/drawer/elements/pcb-note-dimension.ts
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+
+// lib/drawer/shapes/arrow.ts
+function drawArrow(params) {
+  const { ctx, x, y, angle, arrowSize, color, strokeWidth } = params;
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(angle);
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(-arrowSize, -arrowSize / 2);
+  ctx.moveTo(0, 0);
+  ctx.lineTo(-arrowSize, arrowSize / 2);
+  ctx.lineWidth = strokeWidth;
+  ctx.strokeStyle = color;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.stroke();
+  ctx.restore();
+}
+
+// lib/drawer/elements/pcb-note-dimension.ts
+var DEFAULT_NOTE_COLOR = "rgba(255,255,255,0.5)";
+function drawPcbNoteDimension(params) {
+  const { ctx, pcbNoteDimension, realToCanvasMat } = params;
+  const color = pcbNoteDimension.color ?? DEFAULT_NOTE_COLOR;
+  const arrowSize = pcbNoteDimension.arrow_size;
+  const realFromX = pcbNoteDimension.from.x;
+  const realFromY = pcbNoteDimension.from.y;
+  const realToX = pcbNoteDimension.to.x;
+  const realToY = pcbNoteDimension.to.y;
+  let fromX = realFromX;
+  let fromY = realFromY;
+  let toX = realToX;
+  let toY = realToY;
+  let hasOffset = false;
+  let offsetX = 0;
+  let offsetY = 0;
+  if (pcbNoteDimension.offset_distance && pcbNoteDimension.offset_direction) {
+    const dirX = pcbNoteDimension.offset_direction.x;
+    const dirY = pcbNoteDimension.offset_direction.y;
+    const length = Math.hypot(dirX, dirY);
+    if (length > 0) {
+      const normX = dirX / length;
+      const normY = dirY / length;
+      hasOffset = true;
+      offsetX = pcbNoteDimension.offset_distance * normX;
+      offsetY = pcbNoteDimension.offset_distance * normY;
+      fromX += offsetX;
+      fromY += offsetY;
+      toX += offsetX;
+      toY += offsetY;
+    }
+  }
+  const STROKE_WIDTH_RATIO2 = 0.13;
+  const strokeWidth = Math.max(
+    pcbNoteDimension.font_size * STROKE_WIDTH_RATIO2,
+    0.35
+  );
+  if (hasOffset) {
+    drawLine({
+      ctx,
+      start: { x: realFromX, y: realFromY },
+      end: { x: fromX, y: fromY },
+      strokeWidth,
+      stroke: color,
+      realToCanvasMat
+    });
+    drawLine({
+      ctx,
+      start: { x: realToX, y: realToY },
+      end: { x: toX, y: toY },
+      strokeWidth,
+      stroke: color,
+      realToCanvasMat
+    });
+  }
+  drawLine({
+    ctx,
+    start: { x: fromX, y: fromY },
+    end: { x: toX, y: toY },
+    strokeWidth,
+    stroke: color,
+    realToCanvasMat
+  });
+  const [canvasFromX, canvasFromY] = applyToPoint11(realToCanvasMat, [
+    fromX,
+    fromY
+  ]);
+  const [canvasToX, canvasToY] = applyToPoint11(realToCanvasMat, [toX, toY]);
+  const canvasDx = canvasToX - canvasFromX;
+  const canvasDy = canvasToY - canvasFromY;
+  const lineAngle = Math.atan2(canvasDy, canvasDx);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const scaledArrowSize = arrowSize * scale2;
+  const scaledStrokeWidth = strokeWidth * scale2;
+  drawArrow({
+    ctx,
+    x: canvasFromX,
+    y: canvasFromY,
+    angle: lineAngle + Math.PI,
+    arrowSize: scaledArrowSize,
+    color,
+    strokeWidth: scaledStrokeWidth
+  });
+  drawArrow({
+    ctx,
+    x: canvasToX,
+    y: canvasToY,
+    angle: lineAngle,
+    arrowSize: scaledArrowSize,
+    color,
+    strokeWidth: scaledStrokeWidth
+  });
+  if (pcbNoteDimension.text) {
+    let textX = (fromX + toX) / 2;
+    let textY = (fromY + toY) / 2;
+    const perpX = toY - fromY;
+    const perpY = -(toX - fromX);
+    const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
+    if (perpLength > 0) {
+      const offsetDistance = pcbNoteDimension.font_size * 1.5;
+      const normalizedPerpX = perpX / perpLength;
+      const normalizedPerpY = perpY / perpLength;
+      textX += normalizedPerpX * offsetDistance;
+      textY += normalizedPerpY * offsetDistance;
+    }
+    const textRotation = -(() => {
+      const raw = pcbNoteDimension.text_ccw_rotation ?? lineAngle * 180 / Math.PI;
+      if (pcbNoteDimension.text_ccw_rotation !== void 0) return raw;
+      let deg = (raw + 180) % 360 - 180;
+      if (deg > 90) deg -= 180;
+      if (deg < -90) deg += 180;
+      return deg;
+    })();
+    drawText({
+      ctx,
+      text: pcbNoteDimension.text,
+      x: textX,
+      y: textY,
+      fontSize: pcbNoteDimension.font_size,
+      color,
+      realToCanvasMat,
+      anchorAlignment: "center",
+      rotation: textRotation
+    });
+  }
+}
+
 // lib/drawer/elements/pcb-note-line.ts
 import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 function drawPcbNoteLine(params) {
@@ -1408,11 +1546,20 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_note_dimension") {
+      drawPcbNoteDimension({
+        ctx: this.ctx,
+        pcbNoteDimension: element,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
   }
 };
 export {
   CircuitToCanvasDrawer,
   DEFAULT_PCB_COLOR_MAP,
+  drawArrow,
   drawCircle,
   drawLine,
   drawOval,
@@ -1425,6 +1572,7 @@ export {
   drawPcbFabricationNoteRect,
   drawPcbFabricationNoteText,
   drawPcbHole,
+  drawPcbNoteDimension,
   drawPcbNotePath,
   drawPcbNoteRect,
   drawPcbNoteText,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -20,6 +20,7 @@ import type {
   PcbFabricationNotePath,
   PcbNotePath,
   PcbNoteText,
+  PcbNoteDimension,
   PcbNoteLine,
 } from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
@@ -53,6 +54,7 @@ import { drawPcbNoteRect } from "./elements/pcb-note-rect"
 import { drawPcbFabricationNotePath } from "./elements/pcb-fabrication-note-path"
 import { drawPcbNotePath } from "./elements/pcb-note-path"
 import { drawPcbNoteText } from "./elements/pcb-note-text"
+import { drawPcbNoteDimension } from "./elements/pcb-note-dimension"
 import { drawPcbNoteLine } from "./elements/pcb-note-line"
 
 export interface DrawElementsOptions {
@@ -341,5 +343,14 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_note_dimension") {
+      drawPcbNoteDimension({
+        ctx: this.ctx,
+        pcbNoteDimension: element as PcbNoteDimension,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
   }
 }

package/lib/drawer/elements/index.ts

@@ -67,3 +67,8 @@ export {
   drawPcbNoteText,
   type DrawPcbNoteTextParams,
 } from "./pcb-note-text"
+
+export {
+  drawPcbNoteDimension,
+  type DrawPcbNoteDimensionParams,
+} from "./pcb-note-dimension"

package/lib/drawer/elements/pcb-note-dimension.ts

@@ -0,0 +1,201 @@
+import type { PcbNoteDimension } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+import { drawText } from "../shapes/text"
+import { drawArrow } from "../shapes/arrow"
+
+export interface DrawPcbNoteDimensionParams {
+  ctx: CanvasContext
+  pcbNoteDimension: PcbNoteDimension
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+const DEFAULT_NOTE_COLOR = "rgba(255,255,255,0.5)"
+
+export function drawPcbNoteDimension(params: DrawPcbNoteDimensionParams): void {
+  const { ctx, pcbNoteDimension, realToCanvasMat } = params
+
+  const color = pcbNoteDimension.color ?? DEFAULT_NOTE_COLOR
+  const arrowSize = pcbNoteDimension.arrow_size
+
+  // Store real (model) endpoints for extension lines
+  const realFromX = pcbNoteDimension.from.x
+  const realFromY = pcbNoteDimension.from.y
+  const realToX = pcbNoteDimension.to.x
+  const realToY = pcbNoteDimension.to.y
+
+  // Calculate the dimension line endpoints (real/model coords)
+  let fromX = realFromX
+  let fromY = realFromY
+  let toX = realToX
+  let toY = realToY
+
+  // Track if we have an offset (for drawing extension lines)
+  let hasOffset = false
+  let offsetX = 0
+  let offsetY = 0
+
+  // Apply offset if provided
+  if (pcbNoteDimension.offset_distance && pcbNoteDimension.offset_direction) {
+    const dirX = pcbNoteDimension.offset_direction.x
+    const dirY = pcbNoteDimension.offset_direction.y
+    const length = Math.hypot(dirX, dirY)
+    if (length > 0) {
+      const normX = dirX / length
+      const normY = dirY / length
+      hasOffset = true
+      offsetX = pcbNoteDimension.offset_distance * normX
+      offsetY = pcbNoteDimension.offset_distance * normY
+      fromX += offsetX
+      fromY += offsetY
+      toX += offsetX
+      toY += offsetY
+    }
+  }
+
+  // Calculate stroke width to match text stroke width
+  // Text uses fontSize * STROKE_WIDTH_RATIO (0.13) with minimum 0.35
+  const STROKE_WIDTH_RATIO = 0.13
+
+  const strokeWidth = Math.max(
+    pcbNoteDimension.font_size * STROKE_WIDTH_RATIO,
+    0.35,
+  )
+
+  // Draw extension lines if offset is provided
+  if (hasOffset) {
+    // Extension line from original 'from' point to offset 'from' point
+    drawLine({
+      ctx,
+      start: { x: realFromX, y: realFromY },
+      end: { x: fromX, y: fromY },
+      strokeWidth,
+      stroke: color,
+      realToCanvasMat: realToCanvasMat,
+    })
+
+    // Extension line from original 'to' point to offset 'to' point
+    drawLine({
+      ctx,
+      start: { x: realToX, y: realToY },
+      end: { x: toX, y: toY },
+      strokeWidth,
+      stroke: color,
+      realToCanvasMat: realToCanvasMat,
+    })
+  }
+
+  // Draw the dimension line
+  drawLine({
+    ctx,
+    start: { x: fromX, y: fromY },
+    end: { x: toX, y: toY },
+    strokeWidth,
+    stroke: color,
+    realToCanvasMat: realToCanvasMat,
+  })
+
+  // Draw arrows at both ends
+  const [canvasFromX, canvasFromY] = applyToPoint(realToCanvasMat, [
+    fromX,
+    fromY,
+  ])
+  const [canvasToX, canvasToY] = applyToPoint(realToCanvasMat, [toX, toY])
+  // Calculate angle for arrows in canvas coordinates
+  const canvasDx = canvasToX - canvasFromX
+  const canvasDy = canvasToY - canvasFromY
+  const lineAngle = Math.atan2(canvasDy, canvasDx)
+  const scale = Math.abs(realToCanvasMat.a)
+  const scaledArrowSize = arrowSize * scale
+  const scaledStrokeWidth = strokeWidth * scale
+
+  // Arrow at 'from' point (pointing outward, away from the line center)
+  // This means pointing in the direction opposite to 'to'
+  drawArrow({
+    ctx,
+    x: canvasFromX,
+    y: canvasFromY,
+    angle: lineAngle + Math.PI,
+    arrowSize: scaledArrowSize,
+    color,
+    strokeWidth: scaledStrokeWidth,
+  })
+
+  // Arrow at 'to' point (pointing outward, away from the line center)
+  // This means pointing in the direction toward 'to' (away from 'from')
+  drawArrow({
+    ctx,
+    x: canvasToX,
+    y: canvasToY,
+    angle: lineAngle,
+    arrowSize: scaledArrowSize,
+    color,
+    strokeWidth: scaledStrokeWidth,
+  })
+
+  // Draw text if provided
+  if (pcbNoteDimension.text) {
+    // Calculate text position (midpoint of the dimension line)
+    // The line endpoints are already offset if offset was provided
+    let textX = (fromX + toX) / 2
+    let textY = (fromY + toY) / 2
+
+    // Offset text perpendicular to the dimension line so it appears above/outside
+    // Calculate perpendicular vector (rotate line direction by 90 degrees CW)
+    // For a line from (fromX, fromY) to (toX, toY), perpendicular is (dy, -dx)
+    // This ensures text appears above horizontal lines and to the right of vertical lines
+    const perpX = toY - fromY
+    const perpY = -(toX - fromX)
+    const perpLength = Math.sqrt(perpX * perpX + perpY * perpY)
+
+    // Normalize and offset by font size (plus a small gap)
+    if (perpLength > 0) {
+      const offsetDistance = pcbNoteDimension.font_size * 1.5 // Offset by 1.5x font size
+      const normalizedPerpX = perpX / perpLength
+      const normalizedPerpY = perpY / perpLength
+      textX += normalizedPerpX * offsetDistance
+      textY += normalizedPerpY * offsetDistance
+    }
+
+    // Calculate rotation (displayed CCW degrees). If the caller provided
+    // `text_ccw_rotation` use that directly; otherwise align with the line
+    // angle and keep the text upright by folding into [-90, 90]. `drawText`
+    // expects a rotation value that it will negate internally, so we pass
+    // `-deg` below.
+    // Compute the displayed CCW degrees. Use the explicit `text_ccw_rotation`
+    // when provided; otherwise derive from the line angle and fold into
+    // [-90, 90] so text stays upright. Finally, `drawText` negates the
+    // provided rotation when applying it to the canvas, so pass the
+    // negative of the displayed CCW degrees.
+    const textRotation = -(() => {
+      const raw =
+        pcbNoteDimension.text_ccw_rotation ?? (lineAngle * 180) / Math.PI
+
+      if (pcbNoteDimension.text_ccw_rotation !== undefined) return raw
+
+      // Normalize to [-180, 180]
+      let deg = ((raw + 180) % 360) - 180
+
+      // Fold into [-90, 90]
+      if (deg > 90) deg -= 180
+      if (deg < -90) deg += 180
+
+      return deg
+    })()
+
+    drawText({
+      ctx,
+      text: pcbNoteDimension.text,
+      x: textX,
+      y: textY,
+      fontSize: pcbNoteDimension.font_size,
+      color,
+      realToCanvasMat: realToCanvasMat,
+      anchorAlignment: "center",
+      rotation: textRotation,
+    })
+  }
+}

package/lib/drawer/elements/pcb-silkscreen.ts

@@ -6,12 +6,12 @@ import type {
   PcbSilkscreenPath,
 } from "circuit-json"
 import type { Matrix } from "transformation-matrix"
-import { applyToPoint } from "transformation-matrix"
 import type { PcbColorMap, CanvasContext } from "../types"
 import { drawRect } from "../shapes/rect"
 import { drawCircle } from "../shapes/circle"
 import { drawLine } from "../shapes/line"
 import { drawPath } from "../shapes/path"
+import { drawText } from "../shapes/text"
 
 export interface DrawPcbSilkscreenTextParams {
   ctx: CanvasContext
@@ -54,42 +54,27 @@ function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
     : colorMap.silkscreen.top
 }
 
-function mapAnchorAlignment(
-  alignment?: string,
-): "start" | "end" | "left" | "right" | "center" {
-  if (!alignment) return "center"
-  if (alignment.includes("left")) return "left"
-  if (alignment.includes("right")) return "right"
-  return "center"
-}
-
 export function drawPcbSilkscreenText(
   params: DrawPcbSilkscreenTextParams,
 ): void {
   const { ctx, text, realToCanvasMat, colorMap } = params
 
   const color = layerToSilkscreenColor(text.layer, colorMap)
-  const [x, y] = applyToPoint(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y,
-  ])
-
-  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a)
+  const fontSize = text.font_size ?? 1
   const rotation = text.ccw_rotation ?? 0
 
-  ctx.save()
-  ctx.translate(x, y)
-
-  // Apply rotation (CCW rotation in degrees)
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180))
-  }
-
-  ctx.font = `${fontSize}px sans-serif`
-  ctx.fillStyle = color
-  ctx.textAlign = mapAnchorAlignment(text.anchor_alignment)
-  ctx.fillText(text.text, 0, 0)
-  ctx.restore()
+  // Use @tscircuit/alphabet to draw text (font-independent, stroke-based rendering)
+  drawText({
+    ctx,
+    text: text.text,
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment: text.anchor_alignment ?? "center",
+    rotation,
+  })
 }
 
 export function drawPcbSilkscreenRect(

package/lib/drawer/shapes/arrow.ts

@@ -0,0 +1,36 @@
+import type { CanvasContext } from "../types"
+
+export interface DrawArrowParams {
+  ctx: CanvasContext
+  x: number
+  y: number
+  angle: number
+  arrowSize: number
+  color: string
+  strokeWidth: number
+}
+
+/**
+ * Draw an arrow at a point along a line
+ */
+export function drawArrow(params: DrawArrowParams): void {
+  const { ctx, x, y, angle, arrowSize, color, strokeWidth } = params
+
+  ctx.save()
+  ctx.translate(x, y)
+  ctx.rotate(angle)
+
+  ctx.beginPath()
+  ctx.moveTo(0, 0)
+  ctx.lineTo(-arrowSize, -arrowSize / 2)
+  ctx.moveTo(0, 0)
+  ctx.lineTo(-arrowSize, arrowSize / 2)
+
+  ctx.lineWidth = strokeWidth
+  ctx.strokeStyle = color
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  ctx.stroke()
+
+  ctx.restore()
+}

package/lib/drawer/shapes/index.ts

@@ -5,6 +5,7 @@ export { drawPill, type DrawPillParams } from "./pill"
 export { drawPolygon, type DrawPolygonParams } from "./polygon"
 export { drawLine, type DrawLineParams } from "./line"
 export { drawPath, type DrawPathParams } from "./path"
+export { drawArrow, type DrawArrowParams } from "./arrow"
 export {
   drawText,
   type DrawTextParams,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -12,7 +12,7 @@
     "@biomejs/biome": "^2.3.8",
     "@napi-rs/canvas": "^0.1.84",
     "@resvg/resvg-js": "^2.6.2",
-    "@tscircuit/alphabet": "^0.0.9",
+    "@tscircuit/alphabet": "^0.0.17",
     "@tscircuit/circuit-json-util": "^0.0.73",
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",

package/tests/board-snapshot/usb-c-flashlight-board.test.ts

@@ -5,7 +5,7 @@ import usbcFlashlightCircuit from "./usb-c-flashlight.json"
 
 const circuitElements = usbcFlashlightCircuit as AnyCircuitElement[]
 
-test.skip("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-to-svg)", async () => {
+test("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-to-svg)", async () => {
   const stackedPng = await getStackedPngSvgComparison(circuitElements, {
     width: 400,
     height: 800,

package/tests/elements/pcb-note-dimension-angled-and-vertical.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - angled", async () => {
+  const width = 240
+  const height = 160
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  const angledDim: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_angled_1",
+    from: { x: 40, y: 120 },
+    to: { x: 200, y: 40 }, // angled up-right
+    arrow_size: 6,
+    font_size: 8,
+    text: "sqrt( (160)^2 + (80)^2 )",
+    font: "tscircuit2024",
+    // slight offset so extension lines are visible and text sits off the line
+    offset_distance: 12,
+  }
+
+  drawer.drawElements([angledDim])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-dimension-basic.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - basic", async () => {
+  const width = 200
+  const height = 100
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  // Use logical dimensions when filling background (canvas is scaled)
+  ctx.fillRect(0, 0, width, height)
+
+  const dim: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_basic_1",
+    from: { x: 20, y: 50 },
+    to: { x: 180, y: 50 },
+    arrow_size: 4,
+    font_size: 6,
+    font: "tscircuit2024",
+    text: "160",
+  }
+
+  drawer.drawElements([dim])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-dimension-vertical.test.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - vertical with rotation", async () => {
+  const width = 160
+  const height = 240
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  const verticalDim: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_vertical_1",
+    from: { x: 80, y: 40 },
+    to: { x: 80, y: 200 }, // vertical line downwards
+    arrow_size: 6,
+    font_size: 9,
+    text: "160",
+    font: "tscircuit2024",
+    // Provide explicit text rotation (counter-clockwise degrees),
+    // which should align text along the vertical dimension.
+    text_ccw_rotation: 90,
+    // Offset horizontally so the dimension line sits right of the points,
+    // and extension lines from the points are drawn to the dimension line.
+    offset_distance: 14,
+    offset_direction: { x: 1, y: 0 },
+  }
+
+  drawer.drawElements([verticalDim])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-dimension-with-offset.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - with offset", async () => {
+  const width = 200
+  const height = 120
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  const dimWithOffset: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_offset_1",
+    from: { x: 40, y: 70 },
+    to: { x: 160, y: 70 },
+    arrow_size: 5,
+    font_size: 7,
+    text: "120",
+    font: "tscircuit2024",
+    // Offset the dimension line along a custom direction, ensuring extension lines are drawn
+    offset_distance: 10,
+    offset_direction: { x: 0, y: -1 }, // offset upward by 10 units
+  }
+
+  drawer.drawElements([dimWithOffset])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/fixtures/stackPngsVertically.ts

@@ -1,7 +1,9 @@
 import { createCanvas, loadImage } from "@napi-rs/canvas"
-import { Resvg } from "@resvg/resvg-js"
+import { Resvg, type ResvgRenderOptions } from "@resvg/resvg-js"
 import * as fs from "node:fs"
+import * as os from "node:os"
 import * as path from "node:path"
+import tscircuitFont from "@tscircuit/alphabet/base64font"
 
 // Pre-generated label PNGs for common labels
 const labelPngCache: Map<string, Buffer> = new Map()
@@ -76,7 +78,44 @@ export const stackPngsVertically = async (
   return canvas.toBuffer("image/png")
 }
 
-export const svgToPng = (svg: string): Buffer => {
-  const resvg = new Resvg(svg)
-  return resvg.render().asPng()
+export const svgToPng = (svgString: string): Buffer => {
+  const fontBuffer = Buffer.from(tscircuitFont, "base64")
+
+  let tempFontPath: string | undefined
+  let cleanupFn: (() => void) | undefined
+
+  try {
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "resvg-font-"))
+    tempFontPath = path.join(tempDir, "tscircuit-font.ttf")
+    fs.writeFileSync(tempFontPath, fontBuffer)
+
+    cleanupFn = () => {
+      try {
+        fs.unlinkSync(tempFontPath!)
+      } catch {
+        // Ignore errors during cleanup
+      }
+    }
+
+    const opts: ResvgRenderOptions = {
+      font: {
+        fontFiles: [tempFontPath],
+        loadSystemFonts: false,
+        defaultFontFamily: "TscircuitAlphabet",
+        monospaceFamily: "TscircuitAlphabet",
+        sansSerifFamily: "TscircuitAlphabet",
+      },
+    }
+
+    const resvg = new Resvg(svgString, opts)
+    const pngData = resvg.render()
+    const pngBuffer = pngData.asPng()
+
+    return Buffer.from(pngBuffer)
+  } finally {
+    // Clean up temporary font file
+    if (cleanupFn) {
+      cleanupFn()
+    }
+  }
 }