circuit-to-canvas 0.0.18 → 0.0.19

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

@@ -1144,16 +1144,166 @@ function drawPcbNoteText(params) {
   });
 }
 
-// lib/drawer/elements/pcb-note-line.ts
+// lib/drawer/elements/pcb-note-dimension.ts
 import { applyToPoint as applyToPoint12 } 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] = applyToPoint12(realToCanvasMat, [
+    fromX,
+    fromY
+  ]);
+  const [canvasToX, canvasToY] = applyToPoint12(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 applyToPoint13 } from "transformation-matrix";
 function drawPcbNoteLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgb(89, 148, 220)";
   const color = line.color ?? defaultColor;
   const strokeWidth = line.stroke_width ?? 0.1;
   const isDashed = line.is_dashed ?? false;
-  const [x1, y1] = applyToPoint12(realToCanvasMat, [line.x1, line.y1]);
-  const [x2, y2] = applyToPoint12(realToCanvasMat, [line.x2, line.y2]);
+  const [x1, y1] = applyToPoint13(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint13(realToCanvasMat, [line.x2, line.y2]);
   const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.save();
   if (isDashed) {
@@ -1408,11 +1558,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 +1584,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/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.19",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

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,
+  )
+})