circuit-to-canvas 0.0.31 → 0.0.33

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-hole.ts

@@ -43,8 +43,8 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.hole_width,
-      height: hole.hole_height,
+      radius_x: hole.hole_width / 2,
+      radius_y: hole.hole_height / 2,
       fill: colorMap.drill,
       realToCanvasMat,
     })

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/elements/pcb-plated-hole.ts

@@ -43,8 +43,8 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.outer_width,
-      height: hole.outer_height,
+      radius_x: hole.outer_width / 2,
+      radius_y: hole.outer_height / 2,
       fill: colorMap.copper.top,
       realToCanvasMat,
       rotation: hole.ccw_rotation,
@@ -54,8 +54,8 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.hole_width,
-      height: hole.hole_height,
+      radius_x: hole.hole_width / 2,
+      radius_y: hole.hole_height / 2,
       fill: colorMap.drill,
       realToCanvasMat,
       rotation: hole.ccw_rotation,
@@ -201,8 +201,8 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       drawOval({
         ctx,
         center: { x: holeX, y: holeY },
-        width: hole.hole_width ?? 0,
-        height: hole.hole_height ?? 0,
+        radius_x: (hole.hole_width ?? 0) / 2,
+        radius_y: (hole.hole_height ?? 0) / 2,
         fill: colorMap.drill,
         realToCanvasMat,
       })

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

@@ -0,0 +1,35 @@
+import type { PcbSilkscreenOval } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawOval } from "../shapes/oval"
+
+export interface DrawPcbSilkscreenOvalParams {
+  ctx: CanvasContext
+  oval: PcbSilkscreenOval
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenOval(
+  params: DrawPcbSilkscreenOvalParams,
+): void {
+  const { ctx, oval, realToCanvasMat, colorMap } = params
+  const color = layerToSilkscreenColor(oval.layer, colorMap)
+
+  drawOval({
+    ctx,
+    center: oval.center,
+    radius_x: oval.radius_x,
+    radius_y: oval.radius_y,
+    stroke: color,
+    strokeWidth: 0.1,
+    realToCanvasMat,
+    rotation: oval.ccw_rotation ?? 0,
+  })
+}

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/lib/drawer/shapes/oval.ts

@@ -5,9 +5,11 @@ import type { CanvasContext } from "../types"
 export interface DrawOvalParams {
   ctx: CanvasContext
   center: { x: number; y: number }
-  width: number
-  height: number
-  fill: string
+  radius_x: number
+  radius_y: number
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
   realToCanvasMat: Matrix
   rotation?: number
 }
@@ -16,16 +18,19 @@ export function drawOval(params: DrawOvalParams): void {
   const {
     ctx,
     center,
-    width,
-    height,
+    radius_x,
+    radius_y,
     fill,
+    stroke,
+    strokeWidth = 0.1,
     realToCanvasMat,
     rotation = 0,
   } = params
 
   const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
-  const scaledWidth = width * Math.abs(realToCanvasMat.a)
-  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a)
+  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a)
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a)
 
   ctx.save()
   ctx.translate(cx, cy)
@@ -35,8 +40,18 @@ export function drawOval(params: DrawOvalParams): void {
   }
 
   ctx.beginPath()
-  ctx.ellipse(0, 0, scaledWidth / 2, scaledHeight / 2, 0, 0, Math.PI * 2)
-  ctx.fillStyle = fill
-  ctx.fill()
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2)
+
+  if (fill) {
+    ctx.fillStyle = fill
+    ctx.fill()
+  }
+
+  if (stroke) {
+    ctx.strokeStyle = stroke
+    ctx.lineWidth = scaledStrokeWidth
+    ctx.stroke()
+  }
+
   ctx.restore()
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -17,9 +17,9 @@
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
-    "circuit-json": "^0.0.346",
+    "circuit-json": "^0.0.348",
     "circuit-json-to-connectivity-map": "^0.0.23",
-    "circuit-to-svg": "^0.0.297",
+    "circuit-to-svg": "^0.0.303",
     "looks-same": "^10.0.1",
     "schematic-symbols": "^0.0.202",
     "tsup": "^8.5.1"