circuit-to-canvas 0.0.32 → 0.0.33

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension } from 'circuit-json';
+import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -221,6 +221,33 @@ interface DrawArrowParams {
  */
 declare function drawArrow(params: DrawArrowParams): void;
 
+interface DrawDimensionLineParams {
+    ctx: CanvasContext;
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    realToCanvasMat: Matrix;
+    color: string;
+    fontSize: number;
+    arrowSize?: number;
+    strokeWidth?: number;
+    text?: string;
+    textRotation?: number;
+    offset?: {
+        distance: number;
+        direction: {
+            x: number;
+            y: number;
+        };
+    };
+}
+declare function drawDimensionLine(params: DrawDimensionLineParams): void;
+
 interface StrokeAlphabetTextParams {
     ctx: CanvasContext;
     text: string;
@@ -467,4 +494,12 @@ interface DrawPcbNoteDimensionParams {
 }
 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 DrawPcbSilkscreenOvalParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenPillParams, 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, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };
+interface DrawPcbFabricationNoteDimensionParams {
+    ctx: CanvasContext;
+    pcbFabricationNoteDimension: PcbFabricationNoteDimension;
+    realToCanvasMat: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbFabricationNoteDimension(params: DrawPcbFabricationNoteDimensionParams): 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 DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenPillParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -1618,7 +1618,7 @@ function drawPcbNoteText(params) {
   });
 }
 
-// lib/drawer/elements/pcb-note-dimension.ts
+// lib/drawer/shapes/dimension-line.ts
 import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 
 // lib/drawer/shapes/arrow.ts
@@ -1640,134 +1640,208 @@ function drawArrow(params) {
   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
-    });
+// lib/drawer/shapes/dimension-line.ts
+var TEXT_OFFSET_MULTIPLIER = 1.5;
+var CHARACTER_WIDTH_MULTIPLIER = 0.6;
+var TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3;
+function normalize(v) {
+  const len = Math.hypot(v.x, v.y) || 1;
+  return { x: v.x / len, y: v.y / len };
+}
+function drawDimensionLine(params) {
+  const {
+    ctx,
+    from,
+    to,
+    realToCanvasMat,
+    color,
+    fontSize,
+    arrowSize = 1,
+    strokeWidth: manualStrokeWidth,
+    text,
+    textRotation,
+    offset
+  } = params;
+  const direction = normalize({ x: to.x - from.x, y: to.y - from.y });
+  const perpendicular = { x: -direction.y, y: direction.x };
+  const hasOffsetDirection = offset?.direction && typeof offset.direction.x === "number" && typeof offset.direction.y === "number";
+  const normalizedOffsetDirection = hasOffsetDirection ? normalize(offset.direction) : { x: 0, y: 0 };
+  const offsetMagnitude = offset?.distance ?? 0;
+  const offsetVector = {
+    x: normalizedOffsetDirection.x * offsetMagnitude,
+    y: normalizedOffsetDirection.y * offsetMagnitude
+  };
+  const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y };
+  const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y };
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize
+  };
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize
+  };
+  const scaleValue = Math.abs(realToCanvasMat.a);
+  const strokeWidth = manualStrokeWidth ?? arrowSize / 5;
+  const lineColor = color || "rgba(255,255,255,0.5)";
+  const extensionDirection = hasOffsetDirection && (Math.abs(normalizedOffsetDirection.x) > Number.EPSILON || Math.abs(normalizedOffsetDirection.y) > Number.EPSILON) ? normalizedOffsetDirection : perpendicular;
+  const extensionLength = offsetMagnitude + 0.5;
+  const drawExtension = (anchor) => {
+    const endPoint = {
+      x: anchor.x + extensionDirection.x * extensionLength,
+      y: anchor.y + extensionDirection.y * extensionLength
+    };
     drawLine({
       ctx,
-      start: { x: realToX, y: realToY },
-      end: { x: toX, y: toY },
+      start: anchor,
+      end: endPoint,
       strokeWidth,
-      stroke: color,
+      stroke: lineColor,
       realToCanvasMat
     });
-  }
+  };
+  drawExtension(from);
+  drawExtension(to);
   drawLine({
     ctx,
-    start: { x: fromX, y: fromY },
-    end: { x: toX, y: toY },
+    start: fromBase,
+    end: toBase,
     strokeWidth,
-    stroke: color,
+    stroke: lineColor,
     realToCanvasMat
   });
   const [canvasFromX, canvasFromY] = applyToPoint13(realToCanvasMat, [
-    fromX,
-    fromY
+    fromOffset.x,
+    fromOffset.y
   ]);
-  const [canvasToX, canvasToY] = applyToPoint13(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;
+  const [canvasToX, canvasToY] = applyToPoint13(realToCanvasMat, [
+    toOffset.x,
+    toOffset.y
+  ]);
+  const [canvasToDirX, canvasToDirY] = applyToPoint13(realToCanvasMat, [
+    toOffset.x + direction.x,
+    toOffset.y + direction.y
+  ]);
+  const canvasLineAngle = Math.atan2(
+    canvasToDirY - canvasToY,
+    canvasToDirX - canvasToX
+  );
   drawArrow({
     ctx,
     x: canvasFromX,
     y: canvasFromY,
-    angle: lineAngle + Math.PI,
-    arrowSize: scaledArrowSize,
-    color,
-    strokeWidth: scaledStrokeWidth
+    angle: canvasLineAngle + Math.PI,
+    arrowSize: arrowSize * scaleValue,
+    color: lineColor,
+    strokeWidth: strokeWidth * scaleValue
   });
   drawArrow({
     ctx,
     x: canvasToX,
     y: canvasToY,
-    angle: lineAngle,
-    arrowSize: scaledArrowSize,
-    color,
-    strokeWidth: scaledStrokeWidth
+    angle: canvasLineAngle,
+    arrowSize: arrowSize * scaleValue,
+    color: lineColor,
+    strokeWidth: strokeWidth * scaleValue
   });
-  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;
+  if (text) {
+    const midPoint = {
+      x: (from.x + to.x) / 2 + offsetVector.x,
+      y: (from.y + to.y) / 2 + offsetVector.y
+    };
+    const [screenFromX, screenFromY] = applyToPoint13(realToCanvasMat, [
+      fromOffset.x,
+      fromOffset.y
+    ]);
+    const [screenToX, screenToY] = applyToPoint13(realToCanvasMat, [
+      toOffset.x,
+      toOffset.y
+    ]);
+    const screenDirection = normalize({
+      x: screenToX - screenFromX,
+      y: screenToY - screenFromY
+    });
+    let textAngle = Math.atan2(screenDirection.y, screenDirection.x) * 180 / Math.PI;
+    if (textAngle > 90 || textAngle < -90) {
+      textAngle += 180;
     }
-    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;
-    })();
+    const finalTextAngle = typeof textRotation === "number" && Number.isFinite(textRotation) ? textAngle - textRotation : textAngle;
+    let additionalOffset = 0;
+    if (text && typeof textRotation === "number" && Number.isFinite(textRotation)) {
+      const textWidth = text.length * fontSize * CHARACTER_WIDTH_MULTIPLIER;
+      const textHeight = fontSize;
+      const rotationRad = textRotation * Math.PI / 180;
+      const sinRot = Math.abs(Math.sin(rotationRad));
+      const cosRot = Math.abs(Math.cos(rotationRad));
+      const halfWidth = textWidth / 2;
+      const halfHeight = textHeight / 2;
+      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
+      additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
+    }
+    const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;
+    const textPoint = {
+      x: midPoint.x + perpendicular.x * textOffset,
+      y: midPoint.y + perpendicular.y * textOffset
+    };
     drawText({
       ctx,
-      text: pcbNoteDimension.text,
-      x: textX,
-      y: textY,
-      fontSize: pcbNoteDimension.font_size,
-      color,
+      text,
+      x: textPoint.x,
+      y: textPoint.y,
+      fontSize,
+      color: lineColor,
       realToCanvasMat,
       anchorAlignment: "center",
-      rotation: textRotation
+      rotation: -finalTextAngle
+      // drawText expects CCW rotation in degrees
     });
   }
 }
 
+// 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;
+  drawDimensionLine({
+    ctx,
+    from: pcbNoteDimension.from,
+    to: pcbNoteDimension.to,
+    realToCanvasMat,
+    color,
+    fontSize: pcbNoteDimension.font_size,
+    arrowSize: pcbNoteDimension.arrow_size,
+    text: pcbNoteDimension.text,
+    textRotation: pcbNoteDimension.text_ccw_rotation,
+    offset: pcbNoteDimension.offset_distance && pcbNoteDimension.offset_direction ? {
+      distance: pcbNoteDimension.offset_distance,
+      direction: pcbNoteDimension.offset_direction
+    } : void 0
+  });
+}
+
+// lib/drawer/elements/pcb-fabrication-note-dimension.ts
+var DEFAULT_FABRICATION_NOTE_COLOR2 = "rgba(255,255,255,0.5)";
+function drawPcbFabricationNoteDimension(params) {
+  const { ctx, pcbFabricationNoteDimension, realToCanvasMat } = params;
+  const color = pcbFabricationNoteDimension.color ?? DEFAULT_FABRICATION_NOTE_COLOR2;
+  drawDimensionLine({
+    ctx,
+    from: pcbFabricationNoteDimension.from,
+    to: pcbFabricationNoteDimension.to,
+    realToCanvasMat,
+    color,
+    fontSize: pcbFabricationNoteDimension.font_size ?? 1,
+    arrowSize: pcbFabricationNoteDimension.arrow_size ?? 1,
+    text: pcbFabricationNoteDimension.text,
+    textRotation: pcbFabricationNoteDimension.text_ccw_rotation,
+    offset: pcbFabricationNoteDimension.offset_distance && pcbFabricationNoteDimension.offset_direction ? {
+      distance: pcbFabricationNoteDimension.offset_distance,
+      direction: pcbFabricationNoteDimension.offset_direction
+    } : void 0
+  });
+}
+
 // lib/drawer/elements/pcb-note-line.ts
 import { applyToPoint as applyToPoint14 } from "transformation-matrix";
 function drawPcbNoteLine(params) {
@@ -2127,6 +2201,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_fabrication_note_dimension") {
+      drawPcbFabricationNoteDimension({
+        ctx: this.ctx,
+        pcbFabricationNoteDimension: element,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
   }
 };
 export {
@@ -2134,6 +2216,7 @@ export {
   DEFAULT_PCB_COLOR_MAP,
   drawArrow,
   drawCircle,
+  drawDimensionLine,
   drawLine,
   drawOval,
   drawPath,
@@ -2141,6 +2224,7 @@ export {
   drawPcbCopperPour,
   drawPcbCopperText,
   drawPcbCutout,
+  drawPcbFabricationNoteDimension,
   drawPcbFabricationNotePath,
   drawPcbFabricationNoteRect,
   drawPcbFabricationNoteText,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -23,6 +23,7 @@ import type {
   PcbNotePath,
   PcbNoteText,
   PcbNoteDimension,
+  PcbFabricationNoteDimension,
   PcbNoteLine,
   PcbRenderLayer,
 } from "circuit-json"
@@ -67,6 +68,7 @@ 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 { drawPcbFabricationNoteDimension } from "./elements/pcb-fabrication-note-dimension"
 import { drawPcbNoteLine } from "./elements/pcb-note-line"
 
 export interface DrawElementsOptions {
@@ -482,5 +484,14 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_fabrication_note_dimension") {
+      drawPcbFabricationNoteDimension({
+        ctx: this.ctx,
+        pcbFabricationNoteDimension: element as PcbFabricationNoteDimension,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
   }
 }

package/lib/drawer/elements/index.ts

@@ -99,3 +99,8 @@ export {
   drawPcbNoteDimension,
   type DrawPcbNoteDimensionParams,
 } from "./pcb-note-dimension"
+
+export {
+  drawPcbFabricationNoteDimension,
+  type DrawPcbFabricationNoteDimensionParams,
+} from "./pcb-fabrication-note-dimension"

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

@@ -0,0 +1,42 @@
+import type { PcbFabricationNoteDimension } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawDimensionLine } from "../shapes/dimension-line"
+
+export interface DrawPcbFabricationNoteDimensionParams {
+  ctx: CanvasContext
+  pcbFabricationNoteDimension: PcbFabricationNoteDimension
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+const DEFAULT_FABRICATION_NOTE_COLOR = "rgba(255,255,255,0.5)"
+
+export function drawPcbFabricationNoteDimension(
+  params: DrawPcbFabricationNoteDimensionParams,
+): void {
+  const { ctx, pcbFabricationNoteDimension, realToCanvasMat } = params
+
+  const color =
+    pcbFabricationNoteDimension.color ?? DEFAULT_FABRICATION_NOTE_COLOR
+
+  drawDimensionLine({
+    ctx,
+    from: pcbFabricationNoteDimension.from,
+    to: pcbFabricationNoteDimension.to,
+    realToCanvasMat,
+    color,
+    fontSize: pcbFabricationNoteDimension.font_size ?? 1,
+    arrowSize: pcbFabricationNoteDimension.arrow_size ?? 1,
+    text: pcbFabricationNoteDimension.text,
+    textRotation: pcbFabricationNoteDimension.text_ccw_rotation,
+    offset:
+      pcbFabricationNoteDimension.offset_distance &&
+      pcbFabricationNoteDimension.offset_direction
+        ? {
+            distance: pcbFabricationNoteDimension.offset_distance,
+            direction: pcbFabricationNoteDimension.offset_direction,
+          }
+        : undefined,
+  })
+}

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

@@ -1,10 +1,7 @@
 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"
+import { drawDimensionLine } from "../shapes/dimension-line"
 
 export interface DrawPcbNoteDimensionParams {
   ctx: CanvasContext
@@ -19,183 +16,23 @@ 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({
+  drawDimensionLine({
     ctx,
-    x: canvasFromX,
-    y: canvasFromY,
-    angle: lineAngle + Math.PI,
-    arrowSize: scaledArrowSize,
+    from: pcbNoteDimension.from,
+    to: pcbNoteDimension.to,
+    realToCanvasMat,
     color,
-    strokeWidth: scaledStrokeWidth,
+    fontSize: pcbNoteDimension.font_size,
+    arrowSize: pcbNoteDimension.arrow_size,
+    text: pcbNoteDimension.text,
+    textRotation: pcbNoteDimension.text_ccw_rotation,
+    offset:
+      pcbNoteDimension.offset_distance && pcbNoteDimension.offset_direction
+        ? {
+            distance: pcbNoteDimension.offset_distance,
+            direction: pcbNoteDimension.offset_direction,
+          }
+        : undefined,
   })
-
-  // 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/dimension-line.ts

@@ -0,0 +1,228 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+import { drawLine } from "./line"
+import { drawText } from "./text"
+import { drawArrow } from "./arrow"
+
+export interface DrawDimensionLineParams {
+  ctx: CanvasContext
+  from: { x: number; y: number }
+  to: { x: number; y: number }
+  realToCanvasMat: Matrix
+  color: string
+  fontSize: number
+  arrowSize?: number
+  strokeWidth?: number
+  text?: string
+  textRotation?: number // CCW rotation in degrees
+  offset?: {
+    distance: number
+    direction: { x: number; y: number }
+  }
+}
+
+const TEXT_OFFSET_MULTIPLIER = 1.5
+const CHARACTER_WIDTH_MULTIPLIER = 0.6
+const TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3
+
+function normalize(v: { x: number; y: number }) {
+  const len = Math.hypot(v.x, v.y) || 1
+  return { x: v.x / len, y: v.y / len }
+}
+
+export function drawDimensionLine(params: DrawDimensionLineParams): void {
+  const {
+    ctx,
+    from,
+    to,
+    realToCanvasMat,
+    color,
+    fontSize,
+    arrowSize = 1,
+    strokeWidth: manualStrokeWidth,
+    text,
+    textRotation,
+    offset,
+  } = params
+
+  const direction = normalize({ x: to.x - from.x, y: to.y - from.y })
+  const perpendicular = { x: -direction.y, y: direction.x }
+
+  const hasOffsetDirection =
+    offset?.direction &&
+    typeof offset.direction.x === "number" &&
+    typeof offset.direction.y === "number"
+
+  const normalizedOffsetDirection = hasOffsetDirection
+    ? normalize(offset!.direction)
+    : { x: 0, y: 0 }
+
+  const offsetMagnitude = offset?.distance ?? 0
+  const offsetVector = {
+    x: normalizedOffsetDirection.x * offsetMagnitude,
+    y: normalizedOffsetDirection.y * offsetMagnitude,
+  }
+
+  const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y }
+  const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y }
+
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize,
+  }
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize,
+  }
+
+  const scaleValue = Math.abs(realToCanvasMat.a)
+  const strokeWidth = manualStrokeWidth ?? arrowSize / 5
+  const lineColor = color || "rgba(255,255,255,0.5)"
+
+  // Extension lines (ticks)
+  const extensionDirection =
+    hasOffsetDirection &&
+    (Math.abs(normalizedOffsetDirection.x) > Number.EPSILON ||
+      Math.abs(normalizedOffsetDirection.y) > Number.EPSILON)
+      ? normalizedOffsetDirection
+      : perpendicular
+
+  const extensionLength = offsetMagnitude + 0.5
+
+  const drawExtension = (anchor: { x: number; y: number }) => {
+    const endPoint = {
+      x: anchor.x + extensionDirection.x * extensionLength,
+      y: anchor.y + extensionDirection.y * extensionLength,
+    }
+    drawLine({
+      ctx,
+      start: anchor,
+      end: endPoint,
+      strokeWidth,
+      stroke: lineColor,
+      realToCanvasMat,
+    })
+  }
+
+  drawExtension(from)
+  drawExtension(to)
+
+  // Main dimension line
+  drawLine({
+    ctx,
+    start: fromBase,
+    end: toBase,
+    strokeWidth,
+    stroke: lineColor,
+    realToCanvasMat,
+  })
+
+  // Arrows (Keep V-shaped but matching size)
+  const [canvasFromX, canvasFromY] = applyToPoint(realToCanvasMat, [
+    fromOffset.x,
+    fromOffset.y,
+  ])
+  const [canvasToX, canvasToY] = applyToPoint(realToCanvasMat, [
+    toOffset.x,
+    toOffset.y,
+  ])
+  const [canvasToDirX, canvasToDirY] = applyToPoint(realToCanvasMat, [
+    toOffset.x + direction.x,
+    toOffset.y + direction.y,
+  ])
+
+  const canvasLineAngle = Math.atan2(
+    canvasToDirY - canvasToY,
+    canvasToDirX - canvasToX,
+  )
+
+  drawArrow({
+    ctx,
+    x: canvasFromX,
+    y: canvasFromY,
+    angle: canvasLineAngle + Math.PI,
+    arrowSize: arrowSize * scaleValue,
+    color: lineColor,
+    strokeWidth: strokeWidth * scaleValue,
+  })
+
+  drawArrow({
+    ctx,
+    x: canvasToX,
+    y: canvasToY,
+    angle: canvasLineAngle,
+    arrowSize: arrowSize * scaleValue,
+    color: lineColor,
+    strokeWidth: strokeWidth * scaleValue,
+  })
+
+  // Text
+  if (text) {
+    const midPoint = {
+      x: (from.x + to.x) / 2 + offsetVector.x,
+      y: (from.y + to.y) / 2 + offsetVector.y,
+    }
+
+    const [screenFromX, screenFromY] = applyToPoint(realToCanvasMat, [
+      fromOffset.x,
+      fromOffset.y,
+    ])
+    const [screenToX, screenToY] = applyToPoint(realToCanvasMat, [
+      toOffset.x,
+      toOffset.y,
+    ])
+
+    const screenDirection = normalize({
+      x: screenToX - screenFromX,
+      y: screenToY - screenFromY,
+    })
+
+    let textAngle =
+      (Math.atan2(screenDirection.y, screenDirection.x) * 180) / Math.PI
+    if (textAngle > 90 || textAngle < -90) {
+      textAngle += 180
+    }
+
+    const finalTextAngle =
+      typeof textRotation === "number" && Number.isFinite(textRotation)
+        ? textAngle - textRotation
+        : textAngle
+
+    let additionalOffset = 0
+    if (
+      text &&
+      typeof textRotation === "number" &&
+      Number.isFinite(textRotation)
+    ) {
+      const textWidth = text.length * fontSize * CHARACTER_WIDTH_MULTIPLIER
+      const textHeight = fontSize
+      const rotationRad = (textRotation * Math.PI) / 180
+      const sinRot = Math.abs(Math.sin(rotationRad))
+      const cosRot = Math.abs(Math.cos(rotationRad))
+      const halfWidth = textWidth / 2
+      const halfHeight = textHeight / 2
+      const maxExtension = halfWidth * sinRot + halfHeight * cosRot
+      additionalOffset =
+        maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER
+    }
+
+    const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset
+    const textPoint = {
+      x: midPoint.x + perpendicular.x * textOffset,
+      y: midPoint.y + perpendicular.y * textOffset,
+    }
+
+    drawText({
+      ctx,
+      text,
+      x: textPoint.x,
+      y: textPoint.y,
+      fontSize,
+      color: lineColor,
+      realToCanvasMat,
+      anchorAlignment: "center",
+      rotation: -finalTextAngle, // drawText expects CCW rotation in degrees
+    })
+  }
+}

package/lib/drawer/shapes/index.ts

@@ -6,6 +6,10 @@ 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 {
+  drawDimensionLine,
+  type DrawDimensionLineParams,
+} from "./dimension-line"
 export {
   drawText,
   type DrawTextParams,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

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

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test"
+import type {
+  AnyCircuitElement,
+  PcbFabricationNoteDimension,
+} from "circuit-json"
+import { getStackedPngSvgComparison } from "../fixtures/getStackedPngSvgComparison"
+
+test("draw pcb fabrication note dimension - basic", async () => {
+  const circuitJson: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board1",
+      center: { x: 10, y: 5 },
+      width: 25,
+      height: 15,
+      thickness: 1.6,
+      num_layers: 2,
+      material: "fr4",
+    },
+    {
+      type: "pcb_fabrication_note_dimension",
+      pcb_fabrication_note_dimension_id: "fab_dim_1",
+      from: { x: 2, y: 5 },
+      to: { x: 18, y: 5 },
+      arrow_size: 0.4,
+      font_size: 0.6,
+      text: "16mm",
+      layer: "top",
+      pcb_component_id: "comp_1",
+      font: "tscircuit2024",
+    },
+  ]
+
+  const stackedPng = await getStackedPngSvgComparison(circuitJson, {
+    width: 400,
+    height: 800,
+  })
+
+  await expect(stackedPng).toMatchPngSnapshot(import.meta.path)
+})

package/tests/shapes/dimension-line.test.ts

@@ -0,0 +1,46 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { identity } from "transformation-matrix"
+import { drawDimensionLine } from "../../lib/drawer/shapes/dimension-line"
+
+test("drawDimensionLine shape", async () => {
+  const width = 400
+  const height = 200
+  const canvas = createCanvas(width, height)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  // Basic horizontal dimension
+  drawDimensionLine({
+    ctx,
+    from: { x: 50, y: 50 },
+    to: { x: 350, y: 50 },
+    realToCanvasMat: identity(),
+    color: "white",
+    fontSize: 12,
+    arrowSize: 8,
+    text: "300mm",
+  })
+
+  // Vertical dimension with offset and extension lines
+  drawDimensionLine({
+    ctx,
+    from: { x: 50, y: 80 },
+    to: { x: 50, y: 180 },
+    realToCanvasMat: identity(),
+    color: "cyan",
+    fontSize: 10,
+    arrowSize: 6,
+    text: "100mm",
+    offset: {
+      distance: 30,
+      direction: { x: 1, y: 0 },
+    },
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})