circuit-to-canvas 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/index.d.ts +29 -29
  2. package/dist/index.js +187 -133
  3. package/lib/drawer/CircuitToCanvasDrawer.ts +31 -20
  4. package/lib/drawer/elements/pcb-board.ts +5 -5
  5. package/lib/drawer/elements/pcb-copper-pour.ts +13 -10
  6. package/lib/drawer/elements/pcb-copper-text.ts +4 -4
  7. package/lib/drawer/elements/pcb-cutout.ts +5 -5
  8. package/lib/drawer/elements/pcb-fabrication-note-path.ts +3 -3
  9. package/lib/drawer/elements/pcb-fabrication-note-rect.ts +3 -3
  10. package/lib/drawer/elements/pcb-fabrication-note-text.ts +4 -4
  11. package/lib/drawer/elements/pcb-hole.ts +8 -8
  12. package/lib/drawer/elements/pcb-note-line.ts +46 -0
  13. package/lib/drawer/elements/pcb-note-path.ts +3 -3
  14. package/lib/drawer/elements/pcb-note-rect.ts +3 -3
  15. package/lib/drawer/elements/pcb-note-text.ts +4 -4
  16. package/lib/drawer/elements/pcb-plated-hole.ts +14 -14
  17. package/lib/drawer/elements/pcb-silkscreen.ts +16 -16
  18. package/lib/drawer/elements/pcb-smtpad.ts +8 -8
  19. package/lib/drawer/elements/pcb-trace.ts +3 -3
  20. package/lib/drawer/elements/pcb-via.ts +4 -4
  21. package/lib/drawer/shapes/circle.ts +4 -4
  22. package/lib/drawer/shapes/line.ts +5 -5
  23. package/lib/drawer/shapes/oval.ts +13 -5
  24. package/lib/drawer/shapes/path.ts +8 -8
  25. package/lib/drawer/shapes/pill.ts +13 -5
  26. package/lib/drawer/shapes/polygon.ts +7 -7
  27. package/lib/drawer/shapes/rect.ts +7 -7
  28. package/lib/drawer/shapes/text.ts +5 -5
  29. package/lib/drawer/types.ts +1 -1
  30. package/package.json +1 -1
  31. package/tests/elements/__snapshots__/pcb-note-line-all-features.snap.png +0 -0
  32. package/tests/elements/__snapshots__/pcb-note-line-custom-color.snap.png +0 -0
  33. package/tests/elements/__snapshots__/pcb-note-line-dashed.snap.png +0 -0
  34. package/tests/elements/pcb-note-line-all-features.test.ts +36 -0
  35. package/tests/elements/pcb-note-line-custom-color.test.ts +30 -0
  36. package/tests/elements/pcb-note-line-dashed.test.ts +30 -0
  37. package/tests/shapes/circle.test.ts +1 -1
  38. package/tests/shapes/oval.test.ts +1 -1
  39. package/tests/shapes/pill.test.ts +2 -2
  40. package/tests/shapes/rect.test.ts +2 -2
@@ -20,6 +20,7 @@ import type {
20
20
  PcbFabricationNotePath,
21
21
  PcbNotePath,
22
22
  PcbNoteText,
23
+ PcbNoteLine,
23
24
  } from "circuit-json"
24
25
  import { identity, compose, translate, scale } from "transformation-matrix"
25
26
  import type { Matrix } from "transformation-matrix"
@@ -52,6 +53,7 @@ import { drawPcbNoteRect } from "./elements/pcb-note-rect"
52
53
  import { drawPcbFabricationNotePath } from "./elements/pcb-fabrication-note-path"
53
54
  import { drawPcbNotePath } from "./elements/pcb-note-path"
54
55
  import { drawPcbNoteText } from "./elements/pcb-note-text"
56
+ import { drawPcbNoteLine } from "./elements/pcb-note-line"
55
57
 
56
58
  export interface DrawElementsOptions {
57
59
  layers?: string[]
@@ -154,7 +156,7 @@ export class CircuitToCanvasDrawer {
154
156
  drawPcbPlatedHole({
155
157
  ctx: this.ctx,
156
158
  hole: element as PcbPlatedHole,
157
- transform: this.realToCanvasMat,
159
+ realToCanvasMat: this.realToCanvasMat,
158
160
  colorMap: this.colorMap,
159
161
  })
160
162
  }
@@ -163,7 +165,7 @@ export class CircuitToCanvasDrawer {
163
165
  drawPcbVia({
164
166
  ctx: this.ctx,
165
167
  via: element as PCBVia,
166
- transform: this.realToCanvasMat,
168
+ realToCanvasMat: this.realToCanvasMat,
167
169
  colorMap: this.colorMap,
168
170
  })
169
171
  }
@@ -172,7 +174,7 @@ export class CircuitToCanvasDrawer {
172
174
  drawPcbHole({
173
175
  ctx: this.ctx,
174
176
  hole: element as PCBHole,
175
- transform: this.realToCanvasMat,
177
+ realToCanvasMat: this.realToCanvasMat,
176
178
  colorMap: this.colorMap,
177
179
  })
178
180
  }
@@ -181,7 +183,7 @@ export class CircuitToCanvasDrawer {
181
183
  drawPcbSmtPad({
182
184
  ctx: this.ctx,
183
185
  pad: element as PcbSmtPad,
184
- transform: this.realToCanvasMat,
186
+ realToCanvasMat: this.realToCanvasMat,
185
187
  colorMap: this.colorMap,
186
188
  })
187
189
  }
@@ -190,7 +192,7 @@ export class CircuitToCanvasDrawer {
190
192
  drawPcbTrace({
191
193
  ctx: this.ctx,
192
194
  trace: element as PCBTrace,
193
- transform: this.realToCanvasMat,
195
+ realToCanvasMat: this.realToCanvasMat,
194
196
  colorMap: this.colorMap,
195
197
  })
196
198
  }
@@ -199,7 +201,7 @@ export class CircuitToCanvasDrawer {
199
201
  drawPcbBoard({
200
202
  ctx: this.ctx,
201
203
  board: element as PcbBoard,
202
- transform: this.realToCanvasMat,
204
+ realToCanvasMat: this.realToCanvasMat,
203
205
  colorMap: this.colorMap,
204
206
  })
205
207
  }
@@ -208,7 +210,7 @@ export class CircuitToCanvasDrawer {
208
210
  drawPcbSilkscreenText({
209
211
  ctx: this.ctx,
210
212
  text: element as PcbSilkscreenText,
211
- transform: this.realToCanvasMat,
213
+ realToCanvasMat: this.realToCanvasMat,
212
214
  colorMap: this.colorMap,
213
215
  })
214
216
  }
@@ -217,7 +219,7 @@ export class CircuitToCanvasDrawer {
217
219
  drawPcbSilkscreenRect({
218
220
  ctx: this.ctx,
219
221
  rect: element as PcbSilkscreenRect,
220
- transform: this.realToCanvasMat,
222
+ realToCanvasMat: this.realToCanvasMat,
221
223
  colorMap: this.colorMap,
222
224
  })
223
225
  }
@@ -226,7 +228,7 @@ export class CircuitToCanvasDrawer {
226
228
  drawPcbSilkscreenCircle({
227
229
  ctx: this.ctx,
228
230
  circle: element as PcbSilkscreenCircle,
229
- transform: this.realToCanvasMat,
231
+ realToCanvasMat: this.realToCanvasMat,
230
232
  colorMap: this.colorMap,
231
233
  })
232
234
  }
@@ -235,7 +237,7 @@ export class CircuitToCanvasDrawer {
235
237
  drawPcbSilkscreenLine({
236
238
  ctx: this.ctx,
237
239
  line: element as PcbSilkscreenLine,
238
- transform: this.realToCanvasMat,
240
+ realToCanvasMat: this.realToCanvasMat,
239
241
  colorMap: this.colorMap,
240
242
  })
241
243
  }
@@ -244,7 +246,7 @@ export class CircuitToCanvasDrawer {
244
246
  drawPcbSilkscreenPath({
245
247
  ctx: this.ctx,
246
248
  path: element as PcbSilkscreenPath,
247
- transform: this.realToCanvasMat,
249
+ realToCanvasMat: this.realToCanvasMat,
248
250
  colorMap: this.colorMap,
249
251
  })
250
252
  }
@@ -253,7 +255,7 @@ export class CircuitToCanvasDrawer {
253
255
  drawPcbCutout({
254
256
  ctx: this.ctx,
255
257
  cutout: element as PcbCutout,
256
- transform: this.realToCanvasMat,
258
+ realToCanvasMat: this.realToCanvasMat,
257
259
  colorMap: this.colorMap,
258
260
  })
259
261
  }
@@ -262,7 +264,7 @@ export class CircuitToCanvasDrawer {
262
264
  drawPcbCopperPour({
263
265
  ctx: this.ctx,
264
266
  pour: element as PcbCopperPour,
265
- transform: this.realToCanvasMat,
267
+ realToCanvasMat: this.realToCanvasMat,
266
268
  colorMap: this.colorMap,
267
269
  })
268
270
  }
@@ -271,7 +273,7 @@ export class CircuitToCanvasDrawer {
271
273
  drawPcbCopperText({
272
274
  ctx: this.ctx,
273
275
  text: element as PcbCopperText,
274
- transform: this.realToCanvasMat,
276
+ realToCanvasMat: this.realToCanvasMat,
275
277
  colorMap: this.colorMap,
276
278
  })
277
279
  }
@@ -280,7 +282,7 @@ export class CircuitToCanvasDrawer {
280
282
  drawPcbFabricationNoteText({
281
283
  ctx: this.ctx,
282
284
  text: element as PcbFabricationNoteText,
283
- transform: this.realToCanvasMat,
285
+ realToCanvasMat: this.realToCanvasMat,
284
286
  colorMap: this.colorMap,
285
287
  })
286
288
  }
@@ -289,14 +291,14 @@ export class CircuitToCanvasDrawer {
289
291
  drawPcbFabricationNoteRect({
290
292
  ctx: this.ctx,
291
293
  rect: element as PcbFabricationNoteRect,
292
- transform: this.realToCanvasMat,
294
+ realToCanvasMat: this.realToCanvasMat,
293
295
  colorMap: this.colorMap,
294
296
  })
295
297
  }
296
298
 
297
299
  if (element.type === "pcb_note_rect") {
298
300
  drawPcbNoteRect({
299
- transform: this.realToCanvasMat,
301
+ realToCanvasMat: this.realToCanvasMat,
300
302
  colorMap: this.colorMap,
301
303
  ctx: this.ctx,
302
304
  rect: element as PcbNoteRect,
@@ -307,7 +309,7 @@ export class CircuitToCanvasDrawer {
307
309
  drawPcbFabricationNotePath({
308
310
  ctx: this.ctx,
309
311
  path: element as PcbFabricationNotePath,
310
- transform: this.realToCanvasMat,
312
+ realToCanvasMat: this.realToCanvasMat,
311
313
  colorMap: this.colorMap,
312
314
  })
313
315
  }
@@ -316,7 +318,7 @@ export class CircuitToCanvasDrawer {
316
318
  drawPcbNotePath({
317
319
  ctx: this.ctx,
318
320
  path: element as PcbNotePath,
319
- transform: this.realToCanvasMat,
321
+ realToCanvasMat: this.realToCanvasMat,
320
322
  colorMap: this.colorMap,
321
323
  })
322
324
  }
@@ -325,7 +327,16 @@ export class CircuitToCanvasDrawer {
325
327
  drawPcbNoteText({
326
328
  ctx: this.ctx,
327
329
  text: element as PcbNoteText,
328
- transform: this.realToCanvasMat,
330
+ realToCanvasMat: this.realToCanvasMat,
331
+ colorMap: this.colorMap,
332
+ })
333
+ }
334
+
335
+ if (element.type === "pcb_note_line") {
336
+ drawPcbNoteLine({
337
+ ctx: this.ctx,
338
+ line: element as PcbNoteLine,
339
+ realToCanvasMat: this.realToCanvasMat,
329
340
  colorMap: this.colorMap,
330
341
  })
331
342
  }
@@ -7,12 +7,12 @@ import { drawRect } from "../shapes/rect"
7
7
  export interface DrawPcbBoardParams {
8
8
  ctx: CanvasContext
9
9
  board: PcbBoard
10
- transform: Matrix
10
+ realToCanvasMat: Matrix
11
11
  colorMap: PcbColorMap
12
12
  }
13
13
 
14
14
  export function drawPcbBoard(params: DrawPcbBoardParams): void {
15
- const { ctx, board, transform, colorMap } = params
15
+ const { ctx, board, realToCanvasMat, colorMap } = params
16
16
  const { width, height, center, outline } = board
17
17
 
18
18
  // If the board has a custom outline, draw it as a path
@@ -22,7 +22,7 @@ export function drawPcbBoard(params: DrawPcbBoardParams): void {
22
22
  points: outline.map((p) => ({ x: p.x, y: p.y })),
23
23
  stroke: colorMap.boardOutline,
24
24
  strokeWidth: 0.1,
25
- transform,
25
+ realToCanvasMat,
26
26
  closePath: true,
27
27
  })
28
28
  return
@@ -37,7 +37,7 @@ export function drawPcbBoard(params: DrawPcbBoardParams): void {
37
37
  width,
38
38
  height,
39
39
  fill: "transparent",
40
- transform,
40
+ realToCanvasMat,
41
41
  })
42
42
 
43
43
  // Draw the outline stroke separately using path
@@ -55,7 +55,7 @@ export function drawPcbBoard(params: DrawPcbBoardParams): void {
55
55
  points: corners,
56
56
  stroke: colorMap.boardOutline,
57
57
  strokeWidth: 0.1,
58
- transform,
58
+ realToCanvasMat,
59
59
  closePath: true,
60
60
  })
61
61
  }
@@ -8,7 +8,7 @@ import { drawPolygon } from "../shapes/polygon"
8
8
  export interface DrawPcbCopperPourParams {
9
9
  ctx: CanvasContext
10
10
  pour: PcbCopperPour
11
- transform: Matrix
11
+ realToCanvasMat: Matrix
12
12
  colorMap: PcbColorMap
13
13
  }
14
14
 
@@ -20,7 +20,7 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
20
20
  }
21
21
 
22
22
  export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
23
- const { ctx, pour, transform, colorMap } = params
23
+ const { ctx, pour, realToCanvasMat, colorMap } = params
24
24
 
25
25
  const color = layerToColor(pour.layer, colorMap)
26
26
 
@@ -29,9 +29,12 @@ export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
29
29
 
30
30
  if (pour.shape === "rect") {
31
31
  // Draw the copper pour rectangle with 50% opacity
32
- const [cx, cy] = applyToPoint(transform, [pour.center.x, pour.center.y])
33
- const scaledWidth = pour.width * Math.abs(transform.a)
34
- const scaledHeight = pour.height * Math.abs(transform.a)
32
+ const [cx, cy] = applyToPoint(realToCanvasMat, [
33
+ pour.center.x,
34
+ pour.center.y,
35
+ ])
36
+ const scaledWidth = pour.width * Math.abs(realToCanvasMat.a)
37
+ const scaledHeight = pour.height * Math.abs(realToCanvasMat.a)
35
38
 
36
39
  ctx.translate(cx, cy)
37
40
 
@@ -50,11 +53,11 @@ export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
50
53
 
51
54
  if (pour.shape === "polygon") {
52
55
  if (pour.points && pour.points.length >= 3) {
53
- const transformedPoints = pour.points.map((p: { x: number; y: number }) =>
54
- applyToPoint(transform, [p.x, p.y]),
56
+ const canvasPoints = pour.points.map((p: { x: number; y: number }) =>
57
+ applyToPoint(realToCanvasMat, [p.x, p.y]),
55
58
  )
56
59
 
57
- const firstPoint = transformedPoints[0]
60
+ const firstPoint = canvasPoints[0]
58
61
  if (!firstPoint) {
59
62
  ctx.restore()
60
63
  return
@@ -64,8 +67,8 @@ export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
64
67
  const [firstX, firstY] = firstPoint
65
68
  ctx.moveTo(firstX, firstY)
66
69
 
67
- for (let i = 1; i < transformedPoints.length; i++) {
68
- const point = transformedPoints[i]
70
+ for (let i = 1; i < canvasPoints.length; i++) {
71
+ const point = canvasPoints[i]
69
72
  if (!point) continue
70
73
  const [x, y] = point
71
74
  ctx.lineTo(x, y)
@@ -12,7 +12,7 @@ import {
12
12
  export interface DrawPcbCopperTextParams {
13
13
  ctx: CanvasContext
14
14
  text: PcbCopperText
15
- transform: Matrix
15
+ realToCanvasMat: Matrix
16
16
  colorMap: PcbColorMap
17
17
  }
18
18
 
@@ -33,16 +33,16 @@ function mapAnchorAlignment(alignment?: string): AnchorAlignment {
33
33
  }
34
34
 
35
35
  export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
36
- const { ctx, text, transform, colorMap } = params
36
+ const { ctx, text, realToCanvasMat, colorMap } = params
37
37
 
38
38
  const content = text.text ?? ""
39
39
  if (!content) return
40
40
 
41
- const [x, y] = applyToPoint(transform, [
41
+ const [x, y] = applyToPoint(realToCanvasMat, [
42
42
  text.anchor_position.x,
43
43
  text.anchor_position.y,
44
44
  ])
45
- const scale = Math.abs(transform.a)
45
+ const scale = Math.abs(realToCanvasMat.a)
46
46
  const fontSize = (text.font_size ?? 1) * scale
47
47
  const rotation = text.ccw_rotation ?? 0
48
48
  const padding = {
@@ -8,12 +8,12 @@ import { drawPolygon } from "../shapes/polygon"
8
8
  export interface DrawPcbCutoutParams {
9
9
  ctx: CanvasContext
10
10
  cutout: PcbCutout
11
- transform: Matrix
11
+ realToCanvasMat: Matrix
12
12
  colorMap: PcbColorMap
13
13
  }
14
14
 
15
15
  export function drawPcbCutout(params: DrawPcbCutoutParams): void {
16
- const { ctx, cutout, transform, colorMap } = params
16
+ const { ctx, cutout, realToCanvasMat, colorMap } = params
17
17
 
18
18
  if (cutout.shape === "rect") {
19
19
  drawRect({
@@ -22,7 +22,7 @@ export function drawPcbCutout(params: DrawPcbCutoutParams): void {
22
22
  width: cutout.width,
23
23
  height: cutout.height,
24
24
  fill: colorMap.drill,
25
- transform,
25
+ realToCanvasMat,
26
26
  rotation: cutout.rotation ?? 0,
27
27
  })
28
28
  return
@@ -34,7 +34,7 @@ export function drawPcbCutout(params: DrawPcbCutoutParams): void {
34
34
  center: cutout.center,
35
35
  radius: cutout.radius,
36
36
  fill: colorMap.drill,
37
- transform,
37
+ realToCanvasMat,
38
38
  })
39
39
  return
40
40
  }
@@ -45,7 +45,7 @@ export function drawPcbCutout(params: DrawPcbCutoutParams): void {
45
45
  ctx,
46
46
  points: cutout.points,
47
47
  fill: colorMap.drill,
48
- transform,
48
+ realToCanvasMat,
49
49
  })
50
50
  }
51
51
  return
@@ -6,14 +6,14 @@ import { drawLine } from "../shapes/line"
6
6
  export interface DrawPcbFabricationNotePathParams {
7
7
  ctx: CanvasContext
8
8
  path: PcbFabricationNotePath
9
- transform: Matrix
9
+ realToCanvasMat: Matrix
10
10
  colorMap: PcbColorMap
11
11
  }
12
12
 
13
13
  export function drawPcbFabricationNotePath(
14
14
  params: DrawPcbFabricationNotePathParams,
15
15
  ): void {
16
- const { ctx, path, transform, colorMap } = params
16
+ const { ctx, path, realToCanvasMat, colorMap } = params
17
17
 
18
18
  // Use the color from the path if provided, otherwise use a default color
19
19
  // Fabrication notes are typically shown in a distinct color
@@ -35,7 +35,7 @@ export function drawPcbFabricationNotePath(
35
35
  end: { x: end.x, y: end.y },
36
36
  strokeWidth: path.stroke_width ?? 0.1,
37
37
  stroke: color,
38
- transform,
38
+ realToCanvasMat,
39
39
  })
40
40
  }
41
41
  }
@@ -6,14 +6,14 @@ import { drawRect } from "../shapes/rect"
6
6
  export interface DrawPcbFabricationNoteRectParams {
7
7
  ctx: CanvasContext
8
8
  rect: PcbFabricationNoteRect
9
- transform: Matrix
9
+ realToCanvasMat: Matrix
10
10
  colorMap: PcbColorMap
11
11
  }
12
12
 
13
13
  export function drawPcbFabricationNoteRect(
14
14
  params: DrawPcbFabricationNoteRectParams,
15
15
  ): void {
16
- const { ctx, rect, transform, colorMap } = params
16
+ const { ctx, rect, realToCanvasMat, colorMap } = params
17
17
 
18
18
  // Use the color from the rect if provided, otherwise use a default color
19
19
  // Fabrication notes are typically shown in a distinct color
@@ -33,7 +33,7 @@ export function drawPcbFabricationNoteRect(
33
33
  stroke: hasStroke ? color : undefined,
34
34
  strokeWidth: hasStroke ? rect.stroke_width : undefined,
35
35
  borderRadius: rect.corner_radius,
36
- transform,
36
+ realToCanvasMat,
37
37
  isStrokeDashed,
38
38
  })
39
39
  }
@@ -6,7 +6,7 @@ import { drawText } from "../shapes/text"
6
6
  export interface DrawPcbFabricationNoteTextParams {
7
7
  ctx: CanvasContext
8
8
  text: PcbFabricationNoteText
9
- transform: Matrix
9
+ realToCanvasMat: Matrix
10
10
  colorMap: PcbColorMap
11
11
  }
12
12
 
@@ -21,14 +21,14 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
21
21
  export function drawPcbFabricationNoteText(
22
22
  params: DrawPcbFabricationNoteTextParams,
23
23
  ): void {
24
- const { ctx, text, transform, colorMap } = params
24
+ const { ctx, text, realToCanvasMat, colorMap } = params
25
25
 
26
26
  const defaultColor = layerToColor(text.layer, colorMap)
27
27
  const color = text.color ?? defaultColor
28
28
  const fontSize = text.font_size
29
29
 
30
30
  // Use @tscircuit/alphabet to draw text
31
- // Pass real-world coordinates and let drawText apply the transform
31
+ // Pass real-world coordinates and let drawText apply the realToCanvasMat
32
32
  drawText({
33
33
  ctx,
34
34
  text: text.text,
@@ -36,7 +36,7 @@ export function drawPcbFabricationNoteText(
36
36
  y: text.anchor_position.y,
37
37
  fontSize,
38
38
  color,
39
- transform,
39
+ realToCanvasMat,
40
40
  anchorAlignment: text.anchor_alignment,
41
41
  })
42
42
  }
@@ -9,12 +9,12 @@ import { drawPill } from "../shapes/pill"
9
9
  export interface DrawPcbHoleParams {
10
10
  ctx: CanvasContext
11
11
  hole: PCBHole
12
- transform: Matrix
12
+ realToCanvasMat: Matrix
13
13
  colorMap: PcbColorMap
14
14
  }
15
15
 
16
16
  export function drawPcbHole(params: DrawPcbHoleParams): void {
17
- const { ctx, hole, transform, colorMap } = params
17
+ const { ctx, hole, realToCanvasMat, colorMap } = params
18
18
 
19
19
  if (hole.hole_shape === "circle") {
20
20
  drawCircle({
@@ -22,7 +22,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
22
22
  center: { x: hole.x, y: hole.y },
23
23
  radius: hole.hole_diameter / 2,
24
24
  fill: colorMap.drill,
25
- transform,
25
+ realToCanvasMat,
26
26
  })
27
27
  return
28
28
  }
@@ -34,7 +34,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
34
34
  width: hole.hole_diameter,
35
35
  height: hole.hole_diameter,
36
36
  fill: colorMap.drill,
37
- transform,
37
+ realToCanvasMat,
38
38
  })
39
39
  return
40
40
  }
@@ -46,7 +46,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
46
46
  width: hole.hole_width,
47
47
  height: hole.hole_height,
48
48
  fill: colorMap.drill,
49
- transform,
49
+ realToCanvasMat,
50
50
  })
51
51
  return
52
52
  }
@@ -58,7 +58,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
58
58
  width: hole.hole_width,
59
59
  height: hole.hole_height,
60
60
  fill: colorMap.drill,
61
- transform,
61
+ realToCanvasMat,
62
62
  })
63
63
  return
64
64
  }
@@ -70,7 +70,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
70
70
  width: hole.hole_width,
71
71
  height: hole.hole_height,
72
72
  fill: colorMap.drill,
73
- transform,
73
+ realToCanvasMat,
74
74
  })
75
75
  return
76
76
  }
@@ -82,7 +82,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
82
82
  width: hole.hole_width,
83
83
  height: hole.hole_height,
84
84
  fill: colorMap.drill,
85
- transform,
85
+ realToCanvasMat,
86
86
  rotation: (hole as any).ccw_rotation ?? 0,
87
87
  })
88
88
  return
@@ -0,0 +1,46 @@
1
+ import type { PcbNoteLine } from "circuit-json"
2
+ import type { Matrix } from "transformation-matrix"
3
+ import { applyToPoint } from "transformation-matrix"
4
+ import type { PcbColorMap, CanvasContext } from "../types"
5
+
6
+ export interface DrawPcbNoteLineParams {
7
+ ctx: CanvasContext
8
+ line: PcbNoteLine
9
+ realToCanvasMat: Matrix
10
+ colorMap: PcbColorMap
11
+ }
12
+
13
+ export function drawPcbNoteLine(params: DrawPcbNoteLineParams): void {
14
+ const { ctx, line, realToCanvasMat, colorMap } = params
15
+
16
+ // Use the color from the line if provided, otherwise use a default color
17
+ // Notes are typically shown in a distinct color
18
+ const defaultColor = "rgb(89, 148, 220)" // Blue color for notes
19
+ const color = line.color ?? defaultColor
20
+
21
+ const strokeWidth = line.stroke_width ?? 0.1
22
+ const isDashed = line.is_dashed ?? false
23
+
24
+ const [x1, y1] = applyToPoint(realToCanvasMat, [line.x1, line.y1])
25
+ const [x2, y2] = applyToPoint(realToCanvasMat, [line.x2, line.y2])
26
+ const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a)
27
+
28
+ ctx.save()
29
+
30
+ // Set up dashed line if needed
31
+ if (isDashed) {
32
+ ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2])
33
+ } else {
34
+ ctx.setLineDash([])
35
+ }
36
+
37
+ ctx.beginPath()
38
+ ctx.moveTo(x1, y1)
39
+ ctx.lineTo(x2, y2)
40
+ ctx.lineWidth = scaledStrokeWidth
41
+ ctx.strokeStyle = color
42
+ ctx.lineCap = "round"
43
+ ctx.stroke()
44
+
45
+ ctx.restore()
46
+ }
@@ -6,12 +6,12 @@ import { drawLine } from "../shapes/line"
6
6
  export interface DrawPcbNotePathParams {
7
7
  ctx: CanvasContext
8
8
  path: PcbNotePath
9
- transform: Matrix
9
+ realToCanvasMat: Matrix
10
10
  colorMap: PcbColorMap
11
11
  }
12
12
 
13
13
  export function drawPcbNotePath(params: DrawPcbNotePathParams): void {
14
- const { ctx, path, transform, colorMap } = params
14
+ const { ctx, path, realToCanvasMat, colorMap } = params
15
15
 
16
16
  // Use the color from the path if provided, otherwise use a default color
17
17
  // Notes are typically shown in a distinct color
@@ -33,7 +33,7 @@ export function drawPcbNotePath(params: DrawPcbNotePathParams): void {
33
33
  end: { x: end.x, y: end.y },
34
34
  strokeWidth: path.stroke_width ?? 0.1,
35
35
  stroke: color,
36
- transform,
36
+ realToCanvasMat,
37
37
  })
38
38
  }
39
39
  }
@@ -6,12 +6,12 @@ import { drawRect } from "../shapes/rect"
6
6
  export interface DrawPcbNoteRectParams {
7
7
  ctx: CanvasContext
8
8
  rect: PcbNoteRect
9
- transform: Matrix
9
+ realToCanvasMat: Matrix
10
10
  colorMap: PcbColorMap
11
11
  }
12
12
 
13
13
  export function drawPcbNoteRect(params: DrawPcbNoteRectParams): void {
14
- const { ctx, rect, transform, colorMap } = params
14
+ const { ctx, rect, realToCanvasMat, colorMap } = params
15
15
 
16
16
  // Use the color from the rect if provided, otherwise use a default color
17
17
  // Notes are typically shown in a distinct color
@@ -31,7 +31,7 @@ export function drawPcbNoteRect(params: DrawPcbNoteRectParams): void {
31
31
  stroke: hasStroke ? color : undefined,
32
32
  strokeWidth: hasStroke ? rect.stroke_width : undefined,
33
33
  borderRadius: rect.corner_radius,
34
- transform,
34
+ realToCanvasMat,
35
35
  isStrokeDashed,
36
36
  })
37
37
  }
@@ -6,21 +6,21 @@ import { drawText } from "../shapes/text"
6
6
  export interface DrawPcbNoteTextParams {
7
7
  ctx: CanvasContext
8
8
  text: PcbNoteText
9
- transform: Matrix
9
+ realToCanvasMat: Matrix
10
10
  colorMap: PcbColorMap
11
11
  }
12
12
 
13
13
  const DEFAULT_NOTE_TEXT_COLOR = "rgb(89, 148, 220)" // Same color as note rect
14
14
 
15
15
  export function drawPcbNoteText(params: DrawPcbNoteTextParams): void {
16
- const { ctx, text, transform, colorMap } = params
16
+ const { ctx, text, realToCanvasMat, colorMap } = params
17
17
 
18
18
  const defaultColor = DEFAULT_NOTE_TEXT_COLOR
19
19
  const color = text.color ?? defaultColor
20
20
  const fontSize = text.font_size ?? 1 // Default to 1mm if not provided
21
21
 
22
22
  // Use @tscircuit/alphabet to draw text
23
- // Pass real-world coordinates and let drawText apply the transform
23
+ // Pass real-world coordinates and let drawText apply the realToCanvasMat
24
24
  drawText({
25
25
  ctx,
26
26
  text: text.text ?? "",
@@ -28,7 +28,7 @@ export function drawPcbNoteText(params: DrawPcbNoteTextParams): void {
28
28
  y: text.anchor_position.y,
29
29
  fontSize,
30
30
  color,
31
- transform,
31
+ realToCanvasMat,
32
32
  anchorAlignment: text.anchor_alignment ?? "center",
33
33
  })
34
34
  }