circuit-to-canvas 0.0.14 → 0.0.15

package/lib/drawer/elements/pcb-plated-hole.ts

@@ -9,12 +9,12 @@ import { drawPill } from "../shapes/pill"
 export interface DrawPcbPlatedHoleParams {
   ctx: CanvasContext
   hole: PcbPlatedHole
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
 export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
-  const { ctx, hole, transform, colorMap } = params
+  const { ctx, hole, realToCanvasMat, colorMap } = params
 
   if (hole.shape === "circle") {
     // Draw outer copper ring
@@ -23,7 +23,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       center: { x: hole.x, y: hole.y },
       radius: hole.outer_diameter / 2,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
     })
 
     // Draw inner drill hole
@@ -32,7 +32,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       center: { x: hole.x, y: hole.y },
       radius: hole.hole_diameter / 2,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
     })
     return
   }
@@ -45,7 +45,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.outer_width,
       height: hole.outer_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
 
@@ -56,7 +56,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
     return
@@ -70,7 +70,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.outer_width,
       height: hole.outer_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
 
@@ -81,7 +81,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
     return
@@ -95,7 +95,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       borderRadius: (hole as any).rect_border_radius ?? 0,
     })
 
@@ -107,7 +107,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       center: { x: holeX, y: holeY },
       radius: hole.hole_diameter / 2,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
     })
     return
   }
@@ -120,7 +120,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       borderRadius: (hole as any).rect_border_radius ?? 0,
     })
 
@@ -133,7 +133,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
     })
     return
   }
@@ -146,7 +146,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       borderRadius: (hole as any).rect_border_radius ?? 0,
       rotation: hole.rect_ccw_rotation,
     })
@@ -160,7 +160,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.hole_ccw_rotation,
     })
     return

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

@@ -16,35 +16,35 @@ import { drawPath } from "../shapes/path"
 export interface DrawPcbSilkscreenTextParams {
   ctx: CanvasContext
   text: PcbSilkscreenText
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
 export interface DrawPcbSilkscreenRectParams {
   ctx: CanvasContext
   rect: PcbSilkscreenRect
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
 export interface DrawPcbSilkscreenCircleParams {
   ctx: CanvasContext
   circle: PcbSilkscreenCircle
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
 export interface DrawPcbSilkscreenLineParams {
   ctx: CanvasContext
   line: PcbSilkscreenLine
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
 export interface DrawPcbSilkscreenPathParams {
   ctx: CanvasContext
   path: PcbSilkscreenPath
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
@@ -66,15 +66,15 @@ function mapAnchorAlignment(
 export function drawPcbSilkscreenText(
   params: DrawPcbSilkscreenTextParams,
 ): void {
-  const { ctx, text, transform, colorMap } = params
+  const { ctx, text, realToCanvasMat, colorMap } = params
 
   const color = layerToSilkscreenColor(text.layer, colorMap)
-  const [x, y] = applyToPoint(transform, [
+  const [x, y] = applyToPoint(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y,
   ])
 
-  const fontSize = (text.font_size ?? 1) * Math.abs(transform.a)
+  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a)
   const rotation = text.ccw_rotation ?? 0
 
   ctx.save()
@@ -95,7 +95,7 @@ export function drawPcbSilkscreenText(
 export function drawPcbSilkscreenRect(
   params: DrawPcbSilkscreenRectParams,
 ): void {
-  const { ctx, rect, transform, colorMap } = params
+  const { ctx, rect, realToCanvasMat, colorMap } = params
 
   const color = layerToSilkscreenColor(rect.layer, colorMap)
 
@@ -105,14 +105,14 @@ export function drawPcbSilkscreenRect(
     width: rect.width,
     height: rect.height,
     fill: color,
-    transform,
+    realToCanvasMat,
   })
 }
 
 export function drawPcbSilkscreenCircle(
   params: DrawPcbSilkscreenCircleParams,
 ): void {
-  const { ctx, circle, transform, colorMap } = params
+  const { ctx, circle, realToCanvasMat, colorMap } = params
 
   const color = layerToSilkscreenColor(circle.layer, colorMap)
 
@@ -121,14 +121,14 @@ export function drawPcbSilkscreenCircle(
     center: circle.center,
     radius: circle.radius,
     fill: color,
-    transform,
+    realToCanvasMat,
   })
 }
 
 export function drawPcbSilkscreenLine(
   params: DrawPcbSilkscreenLineParams,
 ): void {
-  const { ctx, line, transform, colorMap } = params
+  const { ctx, line, realToCanvasMat, colorMap } = params
 
   const color = layerToSilkscreenColor(line.layer, colorMap)
 
@@ -138,14 +138,14 @@ export function drawPcbSilkscreenLine(
     end: { x: line.x2, y: line.y2 },
     strokeWidth: line.stroke_width ?? 0.1,
     stroke: color,
-    transform,
+    realToCanvasMat,
   })
 }
 
 export function drawPcbSilkscreenPath(
   params: DrawPcbSilkscreenPathParams,
 ): void {
-  const { ctx, path, transform, colorMap } = params
+  const { ctx, path, realToCanvasMat, colorMap } = params
 
   const color = layerToSilkscreenColor(path.layer, colorMap)
 
@@ -164,7 +164,7 @@ export function drawPcbSilkscreenPath(
       end: { x: end.x, y: end.y },
       strokeWidth: path.stroke_width ?? 0.1,
       stroke: color,
-      transform,
+      realToCanvasMat,
     })
   }
 }

package/lib/drawer/elements/pcb-smtpad.ts

@@ -9,7 +9,7 @@ import { drawPolygon } from "../shapes/polygon"
 export interface DrawPcbSmtPadParams {
   ctx: CanvasContext
   pad: PcbSmtPad
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
@@ -21,7 +21,7 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
 }
 
 export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
-  const { ctx, pad, transform, colorMap } = params
+  const { ctx, pad, realToCanvasMat, colorMap } = params
 
   const color = layerToColor(pad.layer, colorMap)
 
@@ -32,7 +32,7 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
       borderRadius:
         (pad as { corner_radius?: number }).corner_radius ??
         pad.rect_border_radius ??
@@ -48,7 +48,7 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
       borderRadius:
         (pad as { corner_radius?: number }).corner_radius ??
         pad.rect_border_radius ??
@@ -64,7 +64,7 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       center: { x: pad.x, y: pad.y },
       radius: pad.radius,
       fill: color,
-      transform,
+      realToCanvasMat,
     })
     return
   }
@@ -76,7 +76,7 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
     })
     return
   }
@@ -88,7 +88,7 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
       rotation: pad.ccw_rotation ?? 0,
     })
     return
@@ -100,7 +100,7 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
         ctx,
         points: pad.points,
         fill: color,
-        transform,
+        realToCanvasMat,
       })
     }
     return

package/lib/drawer/elements/pcb-trace.ts

@@ -6,7 +6,7 @@ import { drawLine } from "../shapes/line"
 export interface DrawPcbTraceParams {
   ctx: CanvasContext
   trace: PCBTrace
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
@@ -18,7 +18,7 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
 }
 
 export function drawPcbTrace(params: DrawPcbTraceParams): void {
-  const { ctx, trace, transform, colorMap } = params
+  const { ctx, trace, realToCanvasMat, colorMap } = params
 
   if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
     return
@@ -52,7 +52,7 @@ export function drawPcbTrace(params: DrawPcbTraceParams): void {
       end: { x: end.x, y: end.y },
       strokeWidth: traceWidth,
       stroke: color,
-      transform,
+      realToCanvasMat,
       lineCap: "round",
     })
   }

package/lib/drawer/elements/pcb-via.ts

@@ -6,12 +6,12 @@ import { drawCircle } from "../shapes/circle"
 export interface DrawPcbViaParams {
   ctx: CanvasContext
   via: PCBVia
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }
 
 export function drawPcbVia(params: DrawPcbViaParams): void {
-  const { ctx, via, transform, colorMap } = params
+  const { ctx, via, realToCanvasMat, colorMap } = params
 
   // Draw outer copper ring
   drawCircle({
@@ -19,7 +19,7 @@ export function drawPcbVia(params: DrawPcbViaParams): void {
     center: { x: via.x, y: via.y },
     radius: via.outer_diameter / 2,
     fill: colorMap.copper.top,
-    transform,
+    realToCanvasMat,
   })
 
   // Draw inner drill hole
@@ -28,6 +28,6 @@ export function drawPcbVia(params: DrawPcbViaParams): void {
     center: { x: via.x, y: via.y },
     radius: via.hole_diameter / 2,
     fill: colorMap.drill,
-    transform,
+    realToCanvasMat,
   })
 }

package/lib/drawer/shapes/circle.ts

@@ -7,14 +7,14 @@ export interface DrawCircleParams {
   center: { x: number; y: number }
   radius: number
   fill: string
-  transform: Matrix
+  realToCanvasMat: Matrix
 }
 
 export function drawCircle(params: DrawCircleParams): void {
-  const { ctx, center, radius, fill, transform } = params
+  const { ctx, center, radius, fill, realToCanvasMat } = params
 
-  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
-  const scaledRadius = radius * Math.abs(transform.a)
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a)
 
   ctx.beginPath()
   ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2)

package/lib/drawer/shapes/line.ts

@@ -8,7 +8,7 @@ export interface DrawLineParams {
   end: { x: number; y: number }
   strokeWidth: number
   stroke: string
-  transform: Matrix
+  realToCanvasMat: Matrix
   lineCap?: "butt" | "round" | "square"
 }
 
@@ -19,13 +19,13 @@ export function drawLine(params: DrawLineParams): void {
     end,
     strokeWidth,
     stroke,
-    transform,
+    realToCanvasMat,
     lineCap = "round",
   } = params
 
-  const [x1, y1] = applyToPoint(transform, [start.x, start.y])
-  const [x2, y2] = applyToPoint(transform, [end.x, end.y])
-  const scaledStrokeWidth = strokeWidth * Math.abs(transform.a)
+  const [x1, y1] = applyToPoint(realToCanvasMat, [start.x, start.y])
+  const [x2, y2] = applyToPoint(realToCanvasMat, [end.x, end.y])
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a)
 
   ctx.beginPath()
   ctx.moveTo(x1, y1)

package/lib/drawer/shapes/oval.ts

@@ -8,16 +8,24 @@ export interface DrawOvalParams {
   width: number
   height: number
   fill: string
-  transform: Matrix
+  realToCanvasMat: Matrix
   rotation?: number
 }
 
 export function drawOval(params: DrawOvalParams): void {
-  const { ctx, center, width, height, fill, transform, rotation = 0 } = params
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    realToCanvasMat,
+    rotation = 0,
+  } = params
 
-  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
-  const scaledWidth = width * Math.abs(transform.a)
-  const scaledHeight = height * Math.abs(transform.a)
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
 
   ctx.save()
   ctx.translate(cx, cy)

package/lib/drawer/shapes/path.ts

@@ -8,7 +8,7 @@ export interface DrawPathParams {
   fill?: string
   stroke?: string
   strokeWidth?: number
-  transform: Matrix
+  realToCanvasMat: Matrix
   closePath?: boolean
 }
 
@@ -19,7 +19,7 @@ export function drawPath(params: DrawPathParams): void {
     fill,
     stroke,
     strokeWidth = 1,
-    transform,
+    realToCanvasMat,
     closePath = false,
   } = params
 
@@ -27,17 +27,17 @@ export function drawPath(params: DrawPathParams): void {
 
   ctx.beginPath()
 
-  const transformedPoints = points.map((p) =>
-    applyToPoint(transform, [p.x, p.y]),
+  const canvasPoints = points.map((p) =>
+    applyToPoint(realToCanvasMat, [p.x, p.y]),
   )
 
-  const firstPoint = transformedPoints[0]
+  const firstPoint = canvasPoints[0]
   if (!firstPoint) return
   const [firstX, firstY] = firstPoint
   ctx.moveTo(firstX, firstY)
 
-  for (let i = 1; i < transformedPoints.length; i++) {
-    const point = transformedPoints[i]
+  for (let i = 1; i < canvasPoints.length; i++) {
+    const point = canvasPoints[i]
     if (!point) continue
     const [x, y] = point
     ctx.lineTo(x, y)
@@ -53,7 +53,7 @@ export function drawPath(params: DrawPathParams): void {
   }
 
   if (stroke) {
-    const scaledStrokeWidth = strokeWidth * Math.abs(transform.a)
+    const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a)
     ctx.strokeStyle = stroke
     ctx.lineWidth = scaledStrokeWidth
     ctx.stroke()

package/lib/drawer/shapes/pill.ts

@@ -8,16 +8,24 @@ export interface DrawPillParams {
   width: number
   height: number
   fill: string
-  transform: Matrix
+  realToCanvasMat: Matrix
   rotation?: number
 }
 
 export function drawPill(params: DrawPillParams): void {
-  const { ctx, center, width, height, fill, transform, rotation = 0 } = params
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    realToCanvasMat,
+    rotation = 0,
+  } = params
 
-  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
-  const scaledWidth = width * Math.abs(transform.a)
-  const scaledHeight = height * Math.abs(transform.a)
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
 
   ctx.save()
   ctx.translate(cx, cy)

package/lib/drawer/shapes/polygon.ts

@@ -6,27 +6,27 @@ export interface DrawPolygonParams {
   ctx: CanvasContext
   points: Array<{ x: number; y: number }>
   fill: string
-  transform: Matrix
+  realToCanvasMat: Matrix
 }
 
 export function drawPolygon(params: DrawPolygonParams): void {
-  const { ctx, points, fill, transform } = params
+  const { ctx, points, fill, realToCanvasMat } = params
 
   if (points.length < 3) return
 
   ctx.beginPath()
 
-  const transformedPoints = points.map((p) =>
-    applyToPoint(transform, [p.x, p.y]),
+  const canvasPoints = points.map((p) =>
+    applyToPoint(realToCanvasMat, [p.x, p.y]),
   )
 
-  const firstPoint = transformedPoints[0]
+  const firstPoint = canvasPoints[0]
   if (!firstPoint) return
   const [firstX, firstY] = firstPoint
   ctx.moveTo(firstX, firstY)
 
-  for (let i = 1; i < transformedPoints.length; i++) {
-    const point = transformedPoints[i]
+  for (let i = 1; i < canvasPoints.length; i++) {
+    const point = canvasPoints[i]
     if (!point) continue
     const [x, y] = point
     ctx.lineTo(x, y)

package/lib/drawer/shapes/rect.ts

@@ -8,7 +8,7 @@ export interface DrawRectParams {
   width: number
   height: number
   fill?: string
-  transform: Matrix
+  realToCanvasMat: Matrix
   borderRadius?: number
   rotation?: number
   stroke?: string
@@ -23,7 +23,7 @@ export function drawRect(params: DrawRectParams): void {
     width,
     height,
     fill,
-    transform,
+    realToCanvasMat,
     borderRadius = 0,
     rotation = 0,
     stroke,
@@ -31,12 +31,12 @@ export function drawRect(params: DrawRectParams): void {
     isStrokeDashed = false,
   } = params
 
-  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
-  const scaledWidth = width * Math.abs(transform.a)
-  const scaledHeight = height * Math.abs(transform.a)
-  const scaledRadius = borderRadius * Math.abs(transform.a)
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a)
   const scaledStrokeWidth = strokeWidth
-    ? strokeWidth * Math.abs(transform.a)
+    ? strokeWidth * Math.abs(realToCanvasMat.a)
     : undefined
 
   ctx.save()

package/lib/drawer/shapes/text.ts

@@ -153,7 +153,7 @@ export interface DrawTextParams {
   y: number
   fontSize: number
   color: string
-  transform: Matrix
+  realToCanvasMat: Matrix
   anchorAlignment: AnchorAlignment
   rotation?: number
 }
@@ -166,21 +166,21 @@ export function drawText(params: DrawTextParams): void {
     y,
     fontSize,
     color,
-    transform,
+    realToCanvasMat,
     anchorAlignment,
     rotation = 0,
   } = params
 
   if (!text) return
 
-  const [transformedX, transformedY] = applyToPoint(transform, [x, y])
-  const scale = Math.abs(transform.a)
+  const [canvasX, canvasY] = applyToPoint(realToCanvasMat, [x, y])
+  const scale = Math.abs(realToCanvasMat.a)
   const scaledFontSize = fontSize * scale
   const layout = getAlphabetLayout(text, scaledFontSize)
   const startPos = getTextStartPosition(anchorAlignment, layout)
 
   ctx.save()
-  ctx.translate(transformedX, transformedY)
+  ctx.translate(canvasX, canvasY)
 
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180))

package/lib/drawer/types.ts

@@ -137,6 +137,6 @@ export interface CameraBounds {
 
 export interface DrawContext {
   ctx: CanvasRenderingContext2D
-  transform: Matrix
+  realToCanvasMat: Matrix
   colorMap: PcbColorMap
 }

package/package.json

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

package/tests/shapes/circle.test.ts

@@ -15,7 +15,7 @@ test("draw circle", async () => {
     center: { x: 50, y: 50 },
     radius: 30,
     fill: "#ff0000",
-    transform: identity(),
+    realToCanvasMat: identity(),
   })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(

package/tests/shapes/oval.test.ts

@@ -16,7 +16,7 @@ test("draw oval", async () => {
     width: 70,
     height: 40,
     fill: "#0000ff",
-    transform: identity(),
+    realToCanvasMat: identity(),
   })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(