Merge pull request #75 from tscircuit/hole

Add support for rendering pcb_hole

docs/CIRCUIT_JSON_PCB_OVERVIEW.md

@@ -0,0 +1,293 @@
+# Circuit JSON Specification: PCB Component Overview
+
+> Created at 2024-09-20T18:37:19.158Z
+> Latest Version: https://github.com/tscircuit/circuit-json/blob/main/docs/PCB_COMPONENT_OVERVIEW.md
+
+Any type below can be imported from `circuit-json`. Every type has a corresponding
+snake_case version which is a zod type that can be used to parse unknown json,
+for example `PcbComponent` has a `pcb_component.parse` function that you
+can also import.
+
+```ts
+export interface PcbFabricationNotePath {
+  type: "pcb_fabrication_note_path"
+  pcb_fabrication_note_path_id: string
+  pcb_component_id: string
+  layer: LayerRef
+  route: Point[]
+  stroke_width: Length
+  color?: string
+}
+
+export interface PcbComponent {
+  type: "pcb_component"
+  pcb_component_id: string
+  source_component_id: string
+  center: Point
+  layer: LayerRef
+  rotation: Rotation
+  width: Length
+  height: Length
+}
+
+export interface PcbPortNotMatchedError {
+  type: "pcb_port_not_matched_error"
+  pcb_error_id: string
+  message: string
+  pcb_component_ids: string[]
+}
+
+export interface PcbSilkscreenText {
+  type: "pcb_silkscreen_text"
+  pcb_silkscreen_text_id: string
+  font: "tscircuit2024"
+  font_size: Length
+  pcb_component_id: string
+  text: string
+  layer: LayerRef
+  anchor_position: Point
+  anchor_alignment:
+    | "center"
+    | "top_left"
+    | "top_right"
+    | "bottom_left"
+    | "bottom_right"
+}
+
+export interface PcbSilkscreenPill {
+  type: "pcb_silkscreen_pill"
+  pcb_silkscreen_pill_id: string
+  pcb_component_id: string
+  center: Point
+  width: Length
+  height: Length
+  layer: LayerRef
+}
+
+export interface PcbPlatedHoleCircle {
+  type: "pcb_plated_hole"
+  shape: "circle"
+  outer_diameter: number
+  hole_diameter: number
+  x: Distance
+  y: Distance
+  layers: LayerRef[]
+  port_hints?: string[]
+  pcb_component_id?: string
+  pcb_port_id?: string
+  pcb_plated_hole_id: string
+}
+
+export interface PcbPlatedHoleOval {
+  type: "pcb_plated_hole"
+  shape: "oval" | "pill"
+  outer_width: number
+  outer_height: number
+  hole_width: number
+  hole_height: number
+  x: Distance
+  y: Distance
+  layers: LayerRef[]
+  port_hints?: string[]
+  pcb_component_id?: string
+  pcb_port_id?: string
+  pcb_plated_hole_id: string
+}
+
+export type PcbPlatedHole = PcbPlatedHoleCircle | PcbPlatedHoleOval
+
+export interface PcbFabricationNoteText {
+  type: "pcb_fabrication_note_text"
+  pcb_fabrication_note_text_id: string
+  font: "tscircuit2024"
+  font_size: Length
+  pcb_component_id: string
+  text: string
+  layer: VisibleLayer
+  anchor_position: Point
+  anchor_alignment:
+    | "center"
+    | "top_left"
+    | "top_right"
+    | "bottom_left"
+    | "bottom_right"
+  color?: string
+}
+
+export interface PcbSilkscreenCircle {
+  type: "pcb_silkscreen_circle"
+  pcb_silkscreen_circle_id: string
+  pcb_component_id: string
+  center: Point
+  radius: Length
+  layer: VisibleLayer
+}
+
+export interface PcbSilkscreenPath {
+  type: "pcb_silkscreen_path"
+  pcb_silkscreen_path_id: string
+  pcb_component_id: string
+  layer: VisibleLayerRef
+  route: Point[]
+  stroke_width: Length
+}
+
+export interface PcbText {
+  type: "pcb_text"
+  pcb_text_id: string
+  text: string
+  center: Point
+  layer: LayerRef
+  width: Length
+  height: Length
+  lines: number
+  align: "bottom-left"
+}
+
+export type PCBKeepout = z.infer<typeof pcb_keepout>
+
+export interface PcbVia {
+  type: "pcb_via"
+  pcb_via_id: string
+  x: Distance
+  y: Distance
+  outer_diameter: Distance
+  hole_diameter: Distance
+  layers: LayerRef[]
+}
+
+export interface PcbSilkscreenOval {
+  type: "pcb_silkscreen_oval"
+  pcb_silkscreen_oval_id: string
+  pcb_component_id: string
+  center: Point
+  radius_x: Distance
+  radius_y: Distance
+  layer: VisibleLayer
+}
+
+export interface PcbPlacementError {
+  type: "pcb_placement_error"
+  pcb_placement_error_id: string
+  message: string
+}
+
+export interface PcbPort {
+  type: "pcb_port"
+  pcb_port_id: string
+  source_port_id: string
+  pcb_component_id: string
+  x: Distance
+  y: Distance
+  layers: LayerRef[]
+}
+
+export interface PcbTraceHint {
+  type: "pcb_trace_hint"
+  pcb_trace_hint_id: string
+  pcb_port_id: string
+  pcb_component_id: string
+  route: RouteHintPoint[]
+}
+
+export interface PcbSmtPadCircle {
+  type: "pcb_smtpad"
+  shape: "circle"
+  pcb_smtpad_id: string
+  x: Distance
+  y: Distance
+  radius: number
+  layer: LayerRef
+  port_hints?: string[]
+  pcb_component_id?: string
+  pcb_port_id?: string
+}
+
+export interface PcbSmtPadRect {
+  type: "pcb_smtpad"
+  shape: "rect"
+  pcb_smtpad_id: string
+  x: Distance
+  y: Distance
+  width: number
+  height: number
+  layer: LayerRef
+  port_hints?: string[]
+  pcb_component_id?: string
+  pcb_port_id?: string
+}
+
+export type PcbSmtPad = PcbSmtPadCircle | PcbSmtPadRect
+
+export interface PcbSilkscreenLine {
+  type: "pcb_silkscreen_line"
+  pcb_silkscreen_line_id: string
+  pcb_component_id: string
+  stroke_width: Distance
+  x1: Distance
+  y1: Distance
+  x2: Distance
+  y2: Distance
+  layer: VisibleLayer
+}
+
+export interface PcbHoleCircleOrSquare {
+  type: "pcb_hole"
+  pcb_hole_id: string
+  hole_shape: "circle" | "square"
+  hole_diameter: number
+  x: Distance
+  y: Distance
+}
+
+export interface PcbHoleOval {
+  type: "pcb_hole"
+  pcb_hole_id: string
+  hole_shape: "oval"
+  hole_width: number
+  hole_height: number
+  x: Distance
+  y: Distance
+}
+
+export type PcbHole = PcbHoleCircleOrSquare | PcbHoleOval
+
+export interface PcbTraceRoutePointWire {
+  route_type: "wire"
+  x: Distance
+  y: Distance
+  width: Distance
+  start_pcb_port_id?: string
+  end_pcb_port_id?: string
+  layer: LayerRef
+}
+
+export interface PcbTraceRoutePointVia {
+  route_type: "via"
+  x: Distance
+  y: Distance
+  from_layer: string
+  to_layer: string
+}
+
+export type PcbTraceRoutePoint = PcbTraceRoutePointWire | PcbTraceRoutePointVia
+
+export interface PcbTrace {
+  type: "pcb_trace"
+  source_trace_id?: string
+  pcb_component_id?: string
+  pcb_trace_id: string
+  route_thickness_mode?: "constant" | "interpolated"
+  should_round_corners?: boolean
+  route: Array<PcbTraceRoutePoint>
+}
+
+export interface PcbBoard {
+  type: "pcb_board"
+  pcb_board_id: string
+  width: Length
+  height: Length
+  center: Point
+  outline?: Point[]
+}
+```

package.json

@@ -26,11 +26,12 @@
     "@storybook/react": "^8.2.5",
     "@storybook/react-vite": "^8.2.5",
     "@storybook/test": "^8.2.5",
-    "@tscircuit/core": "^0.0.62",
+    "@tscircuit/core": "^0.0.71",
     "@tscircuit/plop": "^0.0.10",
     "@types/bun": "^1.1.9",
     "bun-match-svg": "^0.0.6",
     "esbuild": "^0.20.2",
+    "performance-now": "^2.1.0",
     "react": "^18.3.1",
     "storybook": "^8.2.5",
     "tsup": "^8.0.2",

src/lib/colors.ts

@@ -0,0 +1 @@
+export const HOLE_COLOR = "#FF26E2"

src/lib/circuit-to-pcb-svg.ts → src/lib/convert-circuit-json-to-pcb-svg.ts

@@ -9,13 +9,14 @@ import {
 } from "transformation-matrix"
 import { createSvgObjectsFromPcbFabricationNotePath } from "./svg-object-fns/create-svg-objects-from-pcb-fabrication-note-path"
 import { createSvgObjectsFromPcbFabricationNoteText } from "./svg-object-fns/create-svg-objects-from-pcb-fabrication-note-text"
-import { createSvgObjectsFromPcbHole } from "./svg-object-fns/create-svg-objects-from-pcb-plated-hole"
+import { createSvgObjectsFromPcbPlatedHole } from "./svg-object-fns/create-svg-objects-from-pcb-plated-hole"
 import { createSvgObjectsFromPcbSilkscreenPath } from "./svg-object-fns/create-svg-objects-from-pcb-silkscreen-path"
 import { createSvgObjectsFromPcbSilkscreenText } from "./svg-object-fns/create-svg-objects-from-pcb-silkscreen-text"
 import { createSvgObjectsFromPcbTrace } from "./svg-object-fns/create-svg-objects-from-pcb-trace"
 import { createSvgObjectsFromSmtPad } from "./svg-object-fns/create-svg-objects-from-smt-pads"
 import { createSvgObjectsFromPcbBoard } from "./svg-object-fns/create-svg-objects-from-pcb-board"
 import { createSvgObjectsFromPcbVia } from "./svg-object-fns/create-svg-objects-from-pcb-via"
+import { createSvgObjectsFromPcbHole } from "./svg-object-fns/create-svg-objects-from-pcb-hole"
 
 const OBJECT_ORDER: AnyCircuitElement["type"][] = [
   "pcb_plated_hole",
@@ -40,7 +41,7 @@ interface Options {
   height?: number
 }
 
-function circuitJsonToPcbSvg(
+export function convertCircuitJsonToPcbSvg(
   soup: AnyCircuitElement[],
   options?: Options,
 ): string {
@@ -207,7 +208,9 @@ function createSvgObjects(
     case "pcb_trace":
       return createSvgObjectsFromPcbTrace(elm, transform)
     case "pcb_plated_hole":
-      return [createSvgObjectsFromPcbHole(elm, transform)].filter(Boolean)
+      return createSvgObjectsFromPcbPlatedHole(elm, transform).filter(Boolean)
+    case "pcb_hole":
+      return createSvgObjectsFromPcbHole(elm, transform)
     case "pcb_smtpad":
       return createSvgObjectsFromSmtPad(elm, transform)
     case "pcb_silkscreen_text":
@@ -293,4 +296,7 @@ function createSvgObjectFromPcbBoundary(
   }
 }
 
-export { circuitJsonToPcbSvg }
+/**
+ * @deprecated use `convertCircuitJsonToPcbSvg` instead
+ */
+export const circuitJsonToPcbSvg = convertCircuitJsonToPcbSvg

src/lib/index.ts

@@ -1,3 +1,2 @@
-export * from "./circuit-to-pcb-svg"
+export * from "./convert-circuit-json-to-pcb-svg"
 export * from "./circuit-to-schematic-svg"
-