circuit-to-canvas 0.0.17 → 0.0.19

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, 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;
@@ -211,11 +225,7 @@ type AlphabetLayout = {
     strokeWidth: number;
 };
 declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
-type AnchorAlignment = "center" | "top_left" | "top_right" | "bottom_left" | "bottom_right" | "left" | "right" | "top" | "bottom";
-declare function getTextStartPosition(alignment: AnchorAlignment, layout: AlphabetLayout): {
-    x: number;
-    y: number;
-};
+
 declare function strokeAlphabetText(ctx: CanvasContext, text: string, layout: AlphabetLayout, startX: number, startY: number): void;
 interface DrawTextParams {
     ctx: CanvasContext;
@@ -225,11 +235,17 @@ interface DrawTextParams {
     fontSize: number;
     color: string;
     realToCanvasMat: Matrix;
-    anchorAlignment: AnchorAlignment;
+    anchorAlignment: NinePointAnchor;
     rotation?: number;
 }
 declare function drawText(params: DrawTextParams): void;
 
+type AnchorAlignment = NinePointAnchor;
+declare function getTextStartPosition(alignment: NinePointAnchor, layout: AlphabetLayout): {
+    x: number;
+    y: number;
+};
+
 interface DrawPcbPlatedHoleParams {
     ctx: CanvasContext;
     hole: PcbPlatedHole;
@@ -386,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

@@ -831,9 +831,11 @@ function drawPcbCopperPour(params) {
 // lib/drawer/elements/pcb-copper-text.ts
 import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 
-// lib/drawer/shapes/text.ts
+// 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;
@@ -859,7 +861,8 @@ function getAlphabetLayout(text, fontSize) {
     strokeWidth
   };
 }
-var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+
+// lib/drawer/shapes/text/getTextStartPosition.ts
 function getTextStartPosition(alignment, layout) {
   const totalWidth = layout.width + layout.strokeWidth;
   const totalHeight = layout.height + layout.strokeWidth;
@@ -867,22 +870,25 @@ function getTextStartPosition(alignment, layout) {
   let y = 0;
   if (alignment === "center") {
     x = -totalWidth / 2;
-  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "left") {
+  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
     x = 0;
-  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "right") {
+  } 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") {
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
     y = 0;
-  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom") {
+  } 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;
@@ -947,8 +953,8 @@ function layerToCopperColor(layer, colorMap) {
 }
 function mapAnchorAlignment2(alignment) {
   if (!alignment) return "center";
-  if (alignment.includes("left")) return "left";
-  if (alignment.includes("right")) return "right";
+  if (alignment.includes("left")) return "center_left";
+  if (alignment.includes("right")) return "center_right";
   return "center";
 }
 function drawPcbCopperText(params) {
@@ -1138,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) {
@@ -1224,8 +1380,8 @@ var CircuitToCanvasDrawer = class {
     const offsetY = (canvasHeight - realHeight * uniformScale) / 2;
     this.realToCanvasMat = compose(
       translate(offsetX, offsetY),
-      scale(uniformScale, uniformScale),
-      translate(-bounds.minX, -bounds.minY)
+      scale(uniformScale, -uniformScale),
+      translate(-bounds.minX, -bounds.maxY)
     );
   }
   drawElements(elements, options = {}) {
@@ -1402,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,
@@ -1419,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 {
@@ -132,10 +134,11 @@ export class CircuitToCanvasDrawer {
     const offsetX = (canvasWidth - realWidth * uniformScale) / 2
     const offsetY = (canvasHeight - realHeight * uniformScale) / 2
 
+    // Flip Y axis: PCB uses Y-up, canvas uses Y-down
     this.realToCanvasMat = compose(
       translate(offsetX, offsetY),
-      scale(uniformScale, uniformScale),
-      translate(-bounds.minX, -bounds.minY),
+      scale(uniformScale, -uniformScale),
+      translate(-bounds.minX, -bounds.maxY),
     )
   }
 
@@ -340,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-copper-text.ts

@@ -27,8 +27,8 @@ function layerToCopperColor(layer: string, colorMap: PcbColorMap): string {
 
 function mapAnchorAlignment(alignment?: string): AnchorAlignment {
   if (!alignment) return "center"
-  if (alignment.includes("left")) return "left"
-  if (alignment.includes("right")) return "right"
+  if (alignment.includes("left")) return "center_left"
+  if (alignment.includes("right")) return "center_right"
   return "center"
 }
 

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,