circuit-to-canvas 0.0.31 → 0.0.32

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, 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 } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -139,9 +139,11 @@ interface DrawOvalParams {
         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;
 }
@@ -377,6 +379,14 @@ interface DrawPcbSilkscreenPillParams {
 }
 declare function drawPcbSilkscreenPill(params: DrawPcbSilkscreenPillParams): void;
 
+interface DrawPcbSilkscreenOvalParams {
+    ctx: CanvasContext;
+    oval: PcbSilkscreenOval;
+    realToCanvasMat: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbSilkscreenOval(params: DrawPcbSilkscreenOvalParams): void;
+
 interface DrawPcbCutoutParams {
     ctx: CanvasContext;
     cutout: PcbCutout;
@@ -457,4 +467,4 @@ 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 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, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };
+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 };

package/dist/index.js

@@ -138,24 +138,34 @@ function drawOval(params) {
   const {
     ctx,
     center,
-    width,
-    height,
+    radius_x,
+    radius_y,
     fill,
+    stroke,
+    strokeWidth = 0.1,
     realToCanvasMat,
     rotation = 0
   } = params;
   const [cx, cy] = applyToPoint3(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);
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180));
   }
   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();
 }
 
@@ -263,8 +273,8 @@ function drawPcbPlatedHole(params) {
     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
@@ -272,8 +282,8 @@ function drawPcbPlatedHole(params) {
     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
@@ -397,8 +407,8 @@ function drawPcbPlatedHole(params) {
       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
       });
@@ -472,8 +482,8 @@ function drawPcbHole(params) {
     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
     });
@@ -1275,13 +1285,32 @@ function drawPcbSilkscreenPath(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen-pill.ts
+// lib/drawer/elements/pcb-silkscreen-oval.ts
 function layerToSilkscreenColor6(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
+function drawPcbSilkscreenOval(params) {
+  const { ctx, oval, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor6(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
+  });
+}
+
+// lib/drawer/elements/pcb-silkscreen-pill.ts
+function layerToSilkscreenColor7(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenPill(params) {
   const { ctx, pill, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor6(pill.layer, colorMap);
+  const color = layerToSilkscreenColor7(pill.layer, colorMap);
   const strokeWidth = 0.2;
   drawPill({
     ctx,
@@ -2002,6 +2031,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_silkscreen_oval") {
+      drawPcbSilkscreenOval({
+        ctx: this.ctx,
+        oval: element,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
     if (element.type === "pcb_cutout") {
       drawPcbCutout({
         ctx: this.ctx,
@@ -2115,6 +2152,7 @@ export {
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,
+  drawPcbSilkscreenOval,
   drawPcbSilkscreenPath,
   drawPcbSilkscreenPill,
   drawPcbSilkscreenRect,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -10,6 +10,7 @@ import type {
   PcbSilkscreenRect,
   PcbSilkscreenCircle,
   PcbSilkscreenLine,
+  PcbSilkscreenOval,
   PcbSilkscreenPath,
   PcbSilkscreenPill,
   PcbCutout,
@@ -54,6 +55,7 @@ import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
 import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
 import { drawPcbSilkscreenLine } from "./elements/pcb-silkscreen-line"
 import { drawPcbSilkscreenPath } from "./elements/pcb-silkscreen-path"
+import { drawPcbSilkscreenOval } from "./elements/pcb-silkscreen-oval"
 import { drawPcbSilkscreenPill } from "./elements/pcb-silkscreen-pill"
 import { drawPcbCutout } from "./elements/pcb-cutout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
@@ -373,6 +375,15 @@ export class CircuitToCanvasDrawer {
       })
     }
 
+    if (element.type === "pcb_silkscreen_oval") {
+      drawPcbSilkscreenOval({
+        ctx: this.ctx,
+        oval: element as PcbSilkscreenOval,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
     if (element.type === "pcb_cutout") {
       drawPcbCutout({
         ctx: this.ctx,

package/lib/drawer/elements/index.ts

@@ -48,6 +48,11 @@ export {
   type DrawPcbSilkscreenPillParams,
 } from "./pcb-silkscreen-pill"
 
+export {
+  drawPcbSilkscreenOval,
+  type DrawPcbSilkscreenOvalParams,
+} from "./pcb-silkscreen-oval"
+
 export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
 
 export {

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-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/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.32",
   "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"

package/tests/elements/pcb-silkscreen-oval.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import type { AnyCircuitElement, PcbSilkscreenOval } from "circuit-json"
+import { getStackedPngSvgComparison } from "../fixtures/getStackedPngSvgComparison"
+
+test("draw silkscreen oval", async () => {
+  const oval: PcbSilkscreenOval = {
+    type: "pcb_silkscreen_oval",
+    layer: "top" as const,
+    pcb_component_id: "pcb_component_1",
+    pcb_silkscreen_oval_id: "oval_1",
+    center: { x: 0, y: 0 },
+    radius_x: 2,
+    radius_y: 1,
+    ccw_rotation: 45,
+  }
+
+  const circuitJson: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board1",
+      center: { x: 0, y: 0 },
+      width: 10,
+      height: 10,
+      thickness: 1.6,
+      num_layers: 2,
+      material: "fr4",
+    },
+    oval,
+  ]
+
+  const stackedPng = await getStackedPngSvgComparison(circuitJson, {
+    width: 400,
+    height: 800,
+  })
+
+  await expect(stackedPng).toMatchPngSnapshot(import.meta.path)
+})

package/tests/shapes/oval.test.ts

@@ -13,10 +13,11 @@ test("draw oval", async () => {
   drawOval({
     ctx,
     center: { x: 50, y: 50 },
-    width: 70,
-    height: 40,
+    radius_x: 50,
+    radius_y: 25,
     fill: "#0000ff",
     realToCanvasMat: identity(),
+    rotation: 45,
   })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(