feat: add support for ViaGridBoard

index.tsx

@@ -5,4 +5,5 @@ export * from "./lib/XiaoBoard/XiaoBoard.circuit"
 export * from "./lib/XiaoBoard/XiaoReceiver.circuit"
 export * from "./lib/ProMicroBoard/ProMicroBoard.circuit"
 // export * from "./Common Boards/RaspberryPiHatBoard/RaspberryPiHatBoard.circuit"
+export * from "./lib/ViaGridBoard/ViaGridBoard"
 export * from "./lib/ViaGridBoard/ViaGridBoard.circuit"

lib/ViaGridBoard/ViaGridBoard.circuit.tsx

@@ -1,141 +1,33 @@
-import type { BoardProps, ChipProps } from "@tscircuit/props"
-import { grid } from "@tscircuit/math-utils"
-import {
-  ViaGridVia,
-  ViaGridPlus,
-  pacmanPolygonOutline,
-} from "./viaGridElements"
+import { ViaGridBoard } from "./ViaGridBoard"
 
-type ViaGridBoardProps = {
-  boardProps?: BoardProps
-  chipProps?: Partial<ChipProps>
-  children?: any
+export const ViaGridBoardSmallExample = () => {
+  return (
+    <ViaGridBoard size="small">
+      <chip name="U1" pcbX={0} pcbY={0} />
+    </ViaGridBoard>
+  )
 }
 
-export const ViaGridBoard = ({
-  boardProps = {},
-  children,
-}: ViaGridBoardProps) => {
+export const ViaGridBoardMediumExample = () => {
   return (
-    <board {...boardProps} width="100mm" height="65mm">
-      <pcbnoterect //User.1 kicad rect shows outer bounds of usable area
-        pcbX={0}
-        pcbY={0}
-        width={90}
-        height={55}
-        strokeWidth={0.3}
-        color="blue"
-      />
-
-      {["BL", "TL", "TR", "BR"].map((cornerPositionName, index) => {
-        const x = (cornerPositionName.includes("R") ? 90 : 0) + 5 - 50
-        const y = (cornerPositionName.includes("T") ? 55 : 0) + 5 - 32.5
-        const rotation = index * 90
-        return (
-          <chip
-            key={"pacman_" + cornerPositionName}
-            name={cornerPositionName}
-            pcbX={x}
-            pcbY={y}
-            noSchematicRepresentation={true}
-            pcbRotation={-rotation} //{(cell.index-1)*90}
-            footprint={
-              <footprint>
-                <smtpad
-                  pcbX="0mm"
-                  pcbY="0mm"
-                  layer="top"
-                  shape="polygon"
-                  portHints={["pin1"]}
-                  points={pacmanPolygonOutline}
-                />
-              </footprint>
-            }
-          />
-        )
-      })}
-
-      <ViaGridPlus pcbX={-20} pcbY={-7.5} startIndex={0} />
-      <ViaGridPlus pcbX={20} pcbY={-7.5} startIndex={5} />
-      <ViaGridPlus pcbX={-20} pcbY={7.5} startIndex={10} />
-      <ViaGridPlus pcbX={20} pcbY={7.5} startIndex={15} />
-
-      {horizontalEdgeViaGridCells.map((cell) => (
-        <ViaGridVia
-          pcbX={cell.center.x - 50}
-          pcbY={cell.center.y - 32.5}
-          key={cell.index}
-          viaIndex={cell.index + 20}
-        />
-      ))}
-
-      {verticalEdgeViaGridCells.map((cell) => (
-        <ViaGridVia
-          pcbX={cell.center.x - 50}
-          pcbY={cell.center.y - 32.5}
-          key={cell.index}
-          viaIndex={cell.index + 54}
-        />
-      ))}
-
-      <chip
-        name="TOP_RECT"
-        pcbX={0}
-        pcbY={30}
-        noSchematicRepresentation={true}
-        footprint={
-          <footprint>
-            <smtpad
-              layer="top"
-              shape="rect"
-              width="40mm"
-              height="3mm"
-              portHints={["pin1"]}
-              cornerRadius={0.5}
-            />
-          </footprint>
-        }
-      />
-
-      <silkscreentext text="VIAGRID TOP" fontSize="1.5mm" pcbX={0} pcbY={-30} />
-      <net name="GND" />
-      {/* <copperpour
-        connectsTo="net.GND"
-        layer="top"
-        // outline=[
-        //   { x: 5, y: 5 },
-        //   { x: 5, y: 60 },
-        //   { x: 95, y: 60 },
-        //   { x: 95, y: 5 }
-        // ]
-      /> */}
-      {children}
-    </board>
+    <ViaGridBoard size="medium">
+      <chip name="U1" pcbX={0} pcbY={0} />
+    </ViaGridBoard>
   )
 }
 
-const horizontalEdgeViaGridCells = grid({
-  rows: 2,
-  cols: 17,
-  // width: 80,
-  // height: 45,
-  xSpacing: 5, // if you want to provide the spacing instead of width
-  ySpacing: 45, // if you want to provide the spacing instead of height
-  offsetX: 50, // optional
-  offsetY: 32.5, // optional
-  yDirection: "up-is-negative", // optional, default: "cartesian"
-  // centered: true  // optional, default: true
-})
+export const ViaGridBoardLargeExample = () => {
+  return (
+    <ViaGridBoard size="large">
+      <chip name="U1" pcbX={0} pcbY={0} />
+    </ViaGridBoard>
+  )
+}
 
-const verticalEdgeViaGridCells = grid({
-  rows: 8,
-  cols: 2,
-  // width: 80,
-  // height: 45,
-  xSpacing: 80, // if you want to provide the spacing instead of width
-  ySpacing: 5, // if you want to provide the spacing instead of height
-  offsetX: 50, // optional
-  offsetY: 32.5, // optional
-  yDirection: "up-is-negative", // optional, default: "cartesian"
-  // centered: true  // optional, default: true
-})
+export const ViaGridBoardCustomExample = () => {
+  return (
+    <ViaGridBoard size={{ rows: 5, cols: 5 }}>
+      <chip name="U1" pcbX={0} pcbY={0} />
+    </ViaGridBoard>
+  )
+}

lib/ViaGridBoard/ViaGridBoard.tsx

@@ -0,0 +1,82 @@
+import type { BoardProps, ChipProps } from "@tscircuit/props"
+import { grid } from "@tscircuit/math-utils"
+import { ViaGridVia, ViaGridLabel } from "./viaGridElements"
+
+interface ViaGridBoardProps {
+  boardProps?: BoardProps
+  size?: "small" | "medium" | "large" | { rows: number; cols: number }
+  children?: any
+}
+
+const SIZES = {
+  small: { rows: 8, cols: 12 },
+  medium: { rows: 12, cols: 18 },
+  large: { rows: 16, cols: 24 },
+}
+
+/**
+ * ViaGridBoard component implementing the ViaGrid specification.
+ * Pitch: 2.54mm, Drill: 0.6mm, Pad: 1.2mm, Margin: 3mm
+ */
+export const ViaGridBoard = ({
+  boardProps = {},
+  size = "small",
+  children,
+}: ViaGridBoardProps) => {
+  const { rows, cols } = typeof size === "string" ? SIZES[size] : size
+
+  const pitch = 2.54
+  const margin = 3
+  const width = (cols - 1) * pitch + margin * 2
+  const height = (rows - 1) * pitch + margin * 2
+
+  const cells = grid({
+    rows,
+    cols,
+    xSpacing: pitch,
+    ySpacing: pitch,
+    centered: true,
+  })
+
+  const x_min = -((cols - 1) * pitch) / 2
+  const y_min = -((rows - 1) * pitch) / 2
+
+  return (
+    <board {...boardProps} width={`${width}mm`} height={`${height}mm`}>
+      {cells.map((cell) => {
+        const rowLabel = String.fromCharCode(65 + cell.row) // A, B, C...
+        const colLabel = (cell.col + 1).toString() // 1, 2, 3...
+        return (
+          <ViaGridVia
+            key={`${rowLabel}${colLabel}`}
+            name={`${rowLabel}${colLabel}`}
+            pcbX={cell.center.x}
+            pcbY={cell.center.y}
+            viaIndex={cell.index}
+          />
+        )
+      })}
+      {/* Column Labels (1, 2, 3...) at the top */}
+      {Array.from({ length: cols }).map((_, i) => (
+        <ViaGridLabel
+          key={`col-label-${i}`}
+          text={(i + 1).toString()}
+          pcbX={x_min + i * pitch}
+          pcbY={y_min - 1.8}
+          fontSize={0.6}
+        />
+      ))}
+      {/* Row Labels (A, B, C...) at the left */}
+      {Array.from({ length: rows }).map((_, i) => (
+        <ViaGridLabel
+          key={`row-label-${i}`}
+          text={String.fromCharCode(65 + i)}
+          pcbX={x_min - 1.8}
+          pcbY={y_min + i * pitch}
+          fontSize={0.6}
+        />
+      ))}
+      {children}
+    </board>
+  )
+}

lib/ViaGridBoard/viaGridElements.tsx

@@ -1,41 +1,47 @@
 import type { CommonLayoutProps, GroupProps } from "@tscircuit/props"
 import { OutlineBuilder } from "../../util/outlineBuilder"
 
-export const ViaGridVia = (props: CommonLayoutProps & { viaIndex: number }) => {
-  const { viaIndex, ...restProps } = props
+export const ViaGridVia = (
+  props: CommonLayoutProps & { viaIndex?: number; name?: string },
+) => {
+  const { viaIndex, name, ...restProps } = props
   return (
     <via
-      name={`via_${viaIndex}`}
+      name={name ?? `via_${viaIndex}`}
       fromLayer="top"
       toLayer="bottom"
-      outerDiameter="1.5mm"
-      holeDiameter="0.3mm"
-      // pcbX={0}
-      // pcbY={0}
+      outerDiameter="1.2mm"
+      holeDiameter="0.6mm"
       {...restProps}
     />
   )
 }
 
+export const ViaGridLabel = (
+  props: { text: string; fontSize: number } & CommonLayoutProps,
+) => {
+  return <silkscreentext {...props} />
+}
+
 export const ViaGridPlus = (props: GroupProps & { startIndex: number }) => {
   const { startIndex, ...restProps } = props
   return (
     <group {...restProps}>
       <ViaGridVia pcbX={0} pcbY={0} viaIndex={startIndex} />
-      <ViaGridVia pcbX={2.5} pcbY={0} viaIndex={startIndex + 1} />
-      <ViaGridVia pcbX={0} pcbY={2.5} viaIndex={startIndex + 2} />
-      <ViaGridVia pcbX={-2.5} pcbY={0} viaIndex={startIndex + 3} />
-      <ViaGridVia pcbX={0} pcbY={-2.5} viaIndex={startIndex + 4} />
+      <ViaGridVia pcbX={2.54} pcbY={0} viaIndex={startIndex + 1} />
+      <ViaGridVia pcbX={0} pcbY={2.54} viaIndex={startIndex + 2} />
+      <ViaGridVia pcbX={-2.54} pcbY={0} viaIndex={startIndex + 3} />
+      <ViaGridVia pcbX={0} pcbY={-2.54} viaIndex={startIndex + 4} />
     </group>
   )
 }
 
 export default ViaGridPlus
 
 export const pacmanPolygonOutline = new OutlineBuilder(-0.2, -0.2)
-  .lineTo(-0.2, 2.5)
-  .arcTo(-2.5, 0, { radius: 2.5, sweep: true })
-  .arcTo(0, -2.5, { radius: 2.5, sweep: true })
-  .arcTo(2.5, -0.2, { radius: 2.5, sweep: true })
+  .lineTo(-0.2, 2.54)
+  .arcTo(-2.54, 0, { radius: 2.54, sweep: true })
+  .arcTo(0, -2.54, { radius: 2.54, sweep: true })
+  .arcTo(2.54, -0.2, { radius: 2.54, sweep: true })
   .lineTo(-0.2, -0.2)
   .toArray()