circuit-to-canvas 0.0.1

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": ["Bash(npm ls:*)", "Bash(bun add:*)"],
+    "deny": [],
+    "ask": []
+  }
+}

package/README.md

@@ -0,0 +1,30 @@
+# circuit-to-canvas
+
+Draw [Circuit JSON](https://github.com/tscircuit/circuit-json) into a Canvas- works with any canvas object (Node/Vanilla)
+
+```tsx
+const drawer = new CircuitToCanvasDrawer(canvasOrCanvasRenderingContext2d)
+
+// Sets the internal transformation matrix for all operations
+drawer.setCameraBounds({ minX: 0, maxX: 100, minY: 0, maxY: 100 })
+
+drawer.configure({
+  colorOverrides: {
+    topCopper: "#ff0000"
+  }
+})
+
+// Accepts a circuit json array, by default draws on all layers
+drawer.drawElements([pcbPlatedHole], {
+  layers: ["top_copper"]
+})
+```
+
+## Implementation Notes
+
+There are two "types" of layers:
+
+- Specific drawing layers e.g. "top_copper"
+- Layer groups "top" (includes "top_copper", "top_soldermask")
+
+inner layers go by the name inner1, inner2 etc.

package/biome.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "includes": ["**", "!**/cosmos-export", "!**/dist", "!**/package.json"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "complexity": {
+        "noForEach": "error",
+        "useLiteralKeys": "off"
+      },
+      "a11y": {
+        "noAccessKey": "off",
+        "noAriaHiddenOnFocusable": "off",
+        "noAriaUnsupportedElements": "off",
+        "noAutofocus": "off",
+        "noDistractingElements": "off",
+        "noHeaderScope": "off",
+        "noInteractiveElementToNoninteractiveRole": "off",
+        "noLabelWithoutControl": "off",
+        "noNoninteractiveElementToInteractiveRole": "off",
+        "noNoninteractiveTabindex": "off",
+        "noPositiveTabindex": "off",
+        "noRedundantAlt": "off",
+        "noRedundantRoles": "off",
+        "noStaticElementInteractions": "off",
+        "noSvgWithoutTitle": "off",
+        "useAltText": "off",
+        "useAnchorContent": "off",
+        "useAriaActivedescendantWithTabindex": "off",
+        "useAriaPropsForRole": "off",
+        "useAriaPropsSupportedByRole": "off",
+        "useButtonType": "off",
+        "useFocusableInteractive": "off",
+        "useHeadingContent": "off",
+        "useHtmlLang": "off",
+        "useIframeTitle": "off",
+        "useKeyWithClickEvents": "off",
+        "useKeyWithMouseEvents": "off",
+        "useMediaCaption": "off",
+        "useSemanticElements": "off",
+        "useValidAnchor": "off",
+        "useValidAriaProps": "off",
+        "useValidAriaRole": "off",
+        "useValidAriaValues": "off",
+        "useValidAutocomplete": "off",
+        "useValidLang": "off"
+      },
+      "style": {
+        "useSingleVarDeclarator": "error",
+        "noParameterAssign": "off",
+        "noUselessElse": "off",
+        "noNonNullAssertion": "off",
+        "useNumberNamespace": "off",
+        "noUnusedTemplateLiteral": "off",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": true,
+            "requireAscii": true,
+            "filenameCases": ["kebab-case", "export"]
+          }
+        },
+        "useAsConstAssertion": "error",
+        "useDefaultParameterLast": "error",
+        "useEnumInitializers": "error",
+        "useSelfClosingElements": "error",
+        "noInferrableTypes": "error"
+      }
+    }
+  }
+}

package/bunfig.toml

@@ -0,0 +1,6 @@
+[test]
+preload = ["./tests/fixtures/preload.ts"]
+root = "./tests"
+
+[install.lockfile]
+save = false

package/dist/index.d.ts

@@ -0,0 +1,151 @@
+import { AnyCircuitElement, PcbPlatedHole } from 'circuit-json';
+import { Matrix } from 'transformation-matrix';
+
+/**
+ * Canvas context type that works with both browser and node-canvas.
+ * Uses a subset of CanvasRenderingContext2D methods that are common to both.
+ */
+interface CanvasContext {
+    beginPath(): void;
+    closePath(): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number): void;
+    fill(): void;
+    rect(x: number, y: number, w: number, h: number): void;
+    lineTo(x: number, y: number): void;
+    moveTo(x: number, y: number): void;
+    save(): void;
+    restore(): void;
+    translate(x: number, y: number): void;
+    rotate(angle: number): void;
+    fillStyle: string | CanvasGradient | CanvasPattern;
+    canvas: {
+        width: number;
+        height: number;
+    };
+}
+type CopperLayerName = "top" | "bottom" | "inner1" | "inner2" | "inner3" | "inner4" | "inner5" | "inner6";
+type CopperColorMap = Record<CopperLayerName, string> & {
+    [layer: string]: string;
+};
+interface PcbColorMap {
+    copper: CopperColorMap;
+    drill: string;
+    silkscreen: {
+        top: string;
+        bottom: string;
+    };
+    boardOutline: string;
+    soldermask: {
+        top: string;
+        bottom: string;
+    };
+    soldermaskWithCopperUnderneath: {
+        top: string;
+        bottom: string;
+    };
+    soldermaskOverCopper: {
+        top: string;
+        bottom: string;
+    };
+    substrate: string;
+    courtyard: string;
+}
+declare const DEFAULT_PCB_COLOR_MAP: PcbColorMap;
+interface DrawerConfig {
+    colorOverrides?: Partial<PcbColorMap>;
+}
+interface CameraBounds {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}
+interface DrawContext {
+    ctx: CanvasRenderingContext2D;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+
+interface DrawElementsOptions {
+    layers?: string[];
+}
+interface CanvasLike {
+    getContext(contextId: "2d"): CanvasContext | null;
+}
+declare class CircuitToCanvasDrawer {
+    private ctx;
+    private colorMap;
+    realToCanvasMat: Matrix;
+    constructor(canvasOrContext: CanvasLike | CanvasContext);
+    configure(config: DrawerConfig): void;
+    setCameraBounds(bounds: CameraBounds): void;
+    drawElements(elements: AnyCircuitElement[], options?: DrawElementsOptions): void;
+    private drawElement;
+}
+
+interface DrawCircleParams {
+    ctx: CanvasContext;
+    center: {
+        x: number;
+        y: number;
+    };
+    radius: number;
+    fill: string;
+    transform: Matrix;
+}
+declare function drawCircle(params: DrawCircleParams): void;
+
+interface DrawRectParams {
+    ctx: CanvasContext;
+    center: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    height: number;
+    fill: string;
+    transform: Matrix;
+    borderRadius?: number;
+    rotation?: number;
+}
+declare function drawRect(params: DrawRectParams): void;
+
+interface DrawOvalParams {
+    ctx: CanvasContext;
+    center: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    height: number;
+    fill: string;
+    transform: Matrix;
+    rotation?: number;
+}
+declare function drawOval(params: DrawOvalParams): void;
+
+interface DrawPillParams {
+    ctx: CanvasContext;
+    center: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    height: number;
+    fill: string;
+    transform: Matrix;
+    rotation?: number;
+}
+declare function drawPill(params: DrawPillParams): void;
+
+interface DrawPcbPlatedHoleParams {
+    ctx: CanvasContext;
+    hole: PcbPlatedHole;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void;
+
+export { type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawCircleParams, type DrawContext, type DrawElementsOptions, type DrawOvalParams, type DrawPcbPlatedHoleParams, type DrawPillParams, type DrawRectParams, type DrawerConfig, type PcbColorMap, drawCircle, drawOval, drawPcbPlatedHole, drawPill, drawRect };

package/dist/index.js

@@ -0,0 +1,375 @@
+// lib/drawer/CircuitToCanvasDrawer.ts
+import { identity, compose, translate, scale } from "transformation-matrix";
+
+// lib/drawer/types.ts
+var DEFAULT_PCB_COLOR_MAP = {
+  copper: {
+    top: "rgb(200, 52, 52)",
+    inner1: "rgb(255, 140, 0)",
+    inner2: "rgb(255, 215, 0)",
+    inner3: "rgb(50, 205, 50)",
+    inner4: "rgb(64, 224, 208)",
+    inner5: "rgb(138, 43, 226)",
+    inner6: "rgb(255, 105, 180)",
+    bottom: "rgb(77, 127, 196)"
+  },
+  soldermaskWithCopperUnderneath: {
+    top: "rgb(18, 82, 50)",
+    bottom: "rgb(77, 127, 196)"
+  },
+  soldermask: {
+    top: "rgb(12, 55, 33)",
+    bottom: "rgb(12, 55, 33)"
+  },
+  soldermaskOverCopper: {
+    top: "rgb(52, 135, 73)",
+    bottom: "rgb(52, 135, 73)"
+  },
+  substrate: "rgb(201, 162, 110)",
+  drill: "#FF26E2",
+  silkscreen: {
+    top: "#f2eda1",
+    bottom: "#5da9e9"
+  },
+  boardOutline: "rgba(255, 255, 255, 0.5)",
+  courtyard: "#FF00FF"
+};
+
+// lib/drawer/shapes/circle.ts
+import { applyToPoint } from "transformation-matrix";
+function drawCircle(params) {
+  const { ctx, center, radius, fill, transform } = params;
+  const [cx, cy] = applyToPoint(transform, [center.x, center.y]);
+  const scaledRadius = radius * Math.abs(transform.a);
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.fillStyle = fill;
+  ctx.fill();
+}
+
+// lib/drawer/shapes/rect.ts
+import { applyToPoint as applyToPoint2 } from "transformation-matrix";
+function drawRect(params) {
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    transform,
+    borderRadius = 0,
+    rotation = 0
+  } = params;
+  const [cx, cy] = applyToPoint2(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);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  ctx.beginPath();
+  if (scaledRadius > 0) {
+    const x = -scaledWidth / 2;
+    const y = -scaledHeight / 2;
+    const r = Math.min(scaledRadius, scaledWidth / 2, scaledHeight / 2);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + scaledWidth - r, y);
+    ctx.arcTo(x + scaledWidth, y, x + scaledWidth, y + r, r);
+    ctx.lineTo(x + scaledWidth, y + scaledHeight - r);
+    ctx.arcTo(
+      x + scaledWidth,
+      y + scaledHeight,
+      x + scaledWidth - r,
+      y + scaledHeight,
+      r
+    );
+    ctx.lineTo(x + r, y + scaledHeight);
+    ctx.arcTo(x, y + scaledHeight, x, y + scaledHeight - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+  } else {
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+  }
+  ctx.fillStyle = fill;
+  ctx.fill();
+  ctx.restore();
+}
+
+// lib/drawer/shapes/oval.ts
+import { applyToPoint as applyToPoint3 } from "transformation-matrix";
+function drawOval(params) {
+  const { ctx, center, width, height, fill, transform, rotation = 0 } = params;
+  const [cx, cy] = applyToPoint3(transform, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(transform.a);
+  const scaledHeight = height * Math.abs(transform.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.restore();
+}
+
+// lib/drawer/shapes/pill.ts
+import { applyToPoint as applyToPoint4 } from "transformation-matrix";
+function drawPill(params) {
+  const { ctx, center, width, height, fill, transform, rotation = 0 } = params;
+  const [cx, cy] = applyToPoint4(transform, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(transform.a);
+  const scaledHeight = height * Math.abs(transform.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  ctx.beginPath();
+  if (scaledWidth > scaledHeight) {
+    const radius = scaledHeight / 2;
+    const straightLength = scaledWidth - scaledHeight;
+    ctx.moveTo(-straightLength / 2, -radius);
+    ctx.lineTo(straightLength / 2, -radius);
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(-straightLength / 2, radius);
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+  } else if (scaledHeight > scaledWidth) {
+    const radius = scaledWidth / 2;
+    const straightLength = scaledHeight - scaledWidth;
+    ctx.moveTo(radius, -straightLength / 2);
+    ctx.lineTo(radius, straightLength / 2);
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+    ctx.lineTo(-radius, -straightLength / 2);
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+  } else {
+    ctx.arc(0, 0, scaledWidth / 2, 0, Math.PI * 2);
+  }
+  ctx.closePath();
+  ctx.fillStyle = fill;
+  ctx.fill();
+  ctx.restore();
+}
+
+// lib/drawer/elements/pcb-plated-hole.ts
+function drawPcbPlatedHole(params) {
+  const { ctx, hole, transform, colorMap } = params;
+  if (hole.shape === "circle") {
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.outer_diameter / 2,
+      fill: colorMap.copper.top,
+      transform
+    });
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      transform
+    });
+    return;
+  }
+  if (hole.shape === "oval") {
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.outer_width,
+      height: hole.outer_height,
+      fill: colorMap.copper.top,
+      transform,
+      rotation: hole.ccw_rotation
+    });
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: hole.ccw_rotation
+    });
+    return;
+  }
+  if (hole.shape === "pill") {
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.outer_width,
+      height: hole.outer_height,
+      fill: colorMap.copper.top,
+      transform,
+      rotation: hole.ccw_rotation
+    });
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: hole.ccw_rotation
+    });
+    return;
+  }
+  if (hole.shape === "circular_hole_with_rect_pad") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width,
+      height: hole.rect_pad_height,
+      fill: colorMap.copper.top,
+      transform,
+      borderRadius: hole.rect_border_radius ?? 0
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawCircle({
+      ctx,
+      center: { x: holeX, y: holeY },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      transform
+    });
+    return;
+  }
+  if (hole.shape === "pill_hole_with_rect_pad") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width,
+      height: hole.rect_pad_height,
+      fill: colorMap.copper.top,
+      transform,
+      borderRadius: hole.rect_border_radius ?? 0
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform
+    });
+    return;
+  }
+  if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width,
+      height: hole.rect_pad_height,
+      fill: colorMap.copper.top,
+      transform,
+      borderRadius: hole.rect_border_radius ?? 0,
+      rotation: hole.rect_ccw_rotation
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: hole.hole_ccw_rotation
+    });
+    return;
+  }
+}
+
+// lib/drawer/CircuitToCanvasDrawer.ts
+var CircuitToCanvasDrawer = class {
+  ctx;
+  colorMap;
+  realToCanvasMat;
+  constructor(canvasOrContext) {
+    if ("getContext" in canvasOrContext && typeof canvasOrContext.getContext === "function") {
+      const ctx = canvasOrContext.getContext("2d");
+      if (!ctx) {
+        throw new Error("Failed to get 2D rendering context from canvas");
+      }
+      this.ctx = ctx;
+    } else {
+      this.ctx = canvasOrContext;
+    }
+    this.colorMap = { ...DEFAULT_PCB_COLOR_MAP };
+    this.realToCanvasMat = identity();
+  }
+  configure(config) {
+    if (config.colorOverrides) {
+      this.colorMap = {
+        ...this.colorMap,
+        ...config.colorOverrides,
+        copper: {
+          ...this.colorMap.copper,
+          ...config.colorOverrides.copper
+        },
+        silkscreen: {
+          ...this.colorMap.silkscreen,
+          ...config.colorOverrides.silkscreen
+        },
+        soldermask: {
+          ...this.colorMap.soldermask,
+          ...config.colorOverrides.soldermask
+        },
+        soldermaskWithCopperUnderneath: {
+          ...this.colorMap.soldermaskWithCopperUnderneath,
+          ...config.colorOverrides.soldermaskWithCopperUnderneath
+        },
+        soldermaskOverCopper: {
+          ...this.colorMap.soldermaskOverCopper,
+          ...config.colorOverrides.soldermaskOverCopper
+        }
+      };
+    }
+  }
+  setCameraBounds(bounds) {
+    const canvas = this.ctx.canvas;
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+    const realWidth = bounds.maxX - bounds.minX;
+    const realHeight = bounds.maxY - bounds.minY;
+    const scaleX = canvasWidth / realWidth;
+    const scaleY = canvasHeight / realHeight;
+    const uniformScale = Math.min(scaleX, scaleY);
+    const offsetX = (canvasWidth - realWidth * uniformScale) / 2;
+    const offsetY = (canvasHeight - realHeight * uniformScale) / 2;
+    this.realToCanvasMat = compose(
+      translate(offsetX, offsetY),
+      scale(uniformScale, uniformScale),
+      translate(-bounds.minX, -bounds.minY)
+    );
+  }
+  drawElements(elements, options = {}) {
+    for (const element of elements) {
+      this.drawElement(element, options);
+    }
+  }
+  drawElement(element, options) {
+    if (element.type === "pcb_plated_hole") {
+      drawPcbPlatedHole({
+        ctx: this.ctx,
+        hole: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
+  }
+};
+export {
+  CircuitToCanvasDrawer,
+  DEFAULT_PCB_COLOR_MAP,
+  drawCircle,
+  drawOval,
+  drawPcbPlatedHole,
+  drawPill,
+  drawRect
+};