@tscircuit/pcb-viewer 1.0.0

package/src/pages/eagle.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from "react"
+import attinyEagle from "../assets/attiny-eagle"
+import { drawEagle } from "../lib/draw-eagle"
+import { Drawer } from "../lib/Drawer"
+
+export default () => {
+  const ref = useRef()
+  let [width, height] = [500, 500]
+  useEffect(() => {
+    const drawer = new Drawer(ref.current)
+    drawer.clear()
+    drawEagle(drawer, attinyEagle as any)
+  }, [])
+
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <canvas ref={ref} width={width} height={height}></canvas>
+    </div>
+  )
+}

package/src/pages/index.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from "react"
+import { Drawer } from "../lib/Drawer"
+
+export default () => {
+  const ref = useRef()
+  let [width, height] = [500, 500]
+  useEffect(() => {
+    const drawer = new Drawer(ref.current)
+    drawer.clear()
+    drawer.equip({ size: 30, shape: "square", mode: "add" })
+    drawer.moveTo(50, 50)
+    drawer.lineTo(300, 50)
+    drawer.equip({ size: 30, shape: "square", mode: "subtract" })
+    drawer.moveTo(250, 0)
+    drawer.lineTo(250, 300)
+  }, [])
+
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <canvas ref={ref} width={width} height={height}></canvas>
+    </div>
+  )
+}

package/src/pages/primitives.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from "react"
+import attinyEagle from "../assets/attiny-eagle"
+import { drawEagle } from "../lib/draw-eagle"
+import { drawPrimitives } from "../lib/draw-primitives"
+import { Drawer } from "../lib/Drawer"
+
+export default () => {
+  const ref = useRef()
+  let [width, height] = [500, 500]
+  useEffect(() => {
+    const drawer = new Drawer(ref.current)
+    drawer.clear()
+    drawPrimitives(drawer, [
+      {
+        pcb_drawing_type: "circle",
+        x: 100,
+        y: 100,
+        r: 50,
+        layer: { name: "top" },
+      },
+      {
+        pcb_drawing_type: "rect",
+        x: 100,
+        y: 270,
+        w: 100,
+        h: 100,
+        layer: { name: "top" },
+      },
+      {
+        pcb_drawing_type: "text",
+        x: 50,
+        y: 210,
+        size: 45,
+        text: "Hello World1",
+        layer: { name: "top" },
+      },
+      {
+        pcb_drawing_type: "line",
+        x1: 0,
+        y1: 500,
+        x2: 100,
+        y2: 400,
+        width: 10,
+        layer: { name: "top" },
+      },
+      {
+        pcb_drawing_type: "line",
+        x1: 0,
+        y1: 400,
+        x2: 100,
+        y2: 450,
+        width: 10,
+        squareCap: true,
+        layer: { name: "top" },
+      },
+    ])
+  }, [])
+
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <canvas ref={ref} width={width} height={height}></canvas>
+    </div>
+  )
+}

package/src/pages/viewer.tsx

@@ -0,0 +1,43 @@
+import { GroupBuilder } from "@tscircuit/builder"
+import React, { useEffect, useRef } from "react"
+import { PCBViewer } from "../PCBViewer"
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      custom: {
+        onRender: (gb: GroupBuilder) => any
+      }
+    }
+  }
+}
+
+export default () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer>
+        <custom
+          onRender={(gb) => {
+            // gb.addResistor((rb) => {})
+            gb.addComponent((cb) => {
+              cb.footprint.addPad((pb) =>
+                pb
+                  .setShape("rect")
+                  .setLayer("top")
+                  .setPosition(100, 100)
+                  .setSize(20, 20)
+              )
+              cb.footprint.addPad((pb) =>
+                pb
+                  .setShape("rect")
+                  .setLayer("top")
+                  .setPosition(140, 100)
+                  .setSize(20, 20)
+              )
+            })
+          }}
+        />
+      </PCBViewer>
+    </div>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": "./src",
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}