Improve README, Support for 3d Components generated by footprint (#23)

* deploy to vercel, add links to README

* trick out readme

* 3d models from cad components now work

* fix type errors

package.json

@@ -20,13 +20,14 @@
     "@jscad/stl-serializer": "^2.1.17",
     "@react-three/drei": "^9.107.2",
     "@react-three/fiber": "^8.16.8",
-    "@tscircuit/core": "^0.0.84",
+    "@tscircuit/core": "^0.0.97",
     "@tscircuit/react-fiber": "^1.1.29",
     "@tscircuit/soup": "^0.0.69",
     "@tscircuit/soup-util": "^0.0.26",
     "@types/three": "^0.165.0",
-    "jscad-fiber": "^0.0.38",
-    "jscad-planner": "^0.0.2",
+    "jscad-electronics": "^0.0.1",
+    "jscad-fiber": "^0.0.63",
+    "jscad-planner": "^0.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-use-gesture": "^9.1.3",

src/CadViewer.tsx

@@ -9,6 +9,8 @@ import { CadViewerContainer } from "./CadViewerContainer"
 import { MixedStlModel } from "./three-components/MixedStlModel"
 import { Euler } from "three"
 import { JscadModel } from "./three-components/JscadModel"
+import { Footprinter3d } from "jscad-electronics"
+import { FootprinterModel } from "./three-components/FootprinterModel"
 
 interface Props {
   soup?: AnySoupElement[]
@@ -77,6 +79,23 @@ export const CadViewer = ({ soup, children }: Props) => {
             />
           )
         }
+
+        if (cad_component.footprinter_string) {
+          return (
+            <FootprinterModel
+              positionOffset={
+                cad_component.position
+                  ? [
+                      cad_component.position.x,
+                      cad_component.position.y,
+                      cad_component.position.z,
+                    ]
+                  : undefined
+              }
+              footprint={cad_component.footprinter_string}
+            />
+          )
+        }
       })}
     </CadViewerContainer>
   )

src/main.tsx

@@ -1,9 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
-import App from "./App.tsx"
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <React.StrictMode>{/* <App /> */}</React.StrictMode>,
 )

src/three-components/FootprinterModel.tsx

@@ -0,0 +1,37 @@
+import { Footprinter3d } from "jscad-electronics"
+import { createJSCADRenderer } from "jscad-fiber"
+import { jscadPlanner } from "jscad-planner"
+import { useMemo } from "react"
+import { JscadModel } from "./JscadModel"
+
+const { createJSCADRoot } = createJSCADRenderer(jscadPlanner as any)
+
+export const FootprinterModel = ({
+  positionOffset,
+  footprint,
+}: { positionOffset: any; footprint: string }) => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  const jscadPlan = useMemo(() => {
+    if (!footprint) return null
+    const jscadPlan: any[] = []
+    const root = createJSCADRoot(jscadPlan)
+    root.render(<Footprinter3d footprint={footprint} />)
+    return jscadPlan
+  }, [footprint])
+
+  if (!jscadPlan) return null
+
+  return (
+    <>
+      {jscadPlan.map((plan, index) => (
+        <JscadModel
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+          key={index}
+          positionOffset={positionOffset}
+          rotationOffset={[Math.PI / 2, 0, 0]}
+          jscadPlan={plan}
+        />
+      ))}
+    </>
+  )
+}

src/three-components/JscadModel.tsx

@@ -5,7 +5,15 @@ import { convertCSGToThreeGeom } from "jscad-fiber"
 import * as THREE from "three"
 import { useMemo } from "react"
 
-export const JscadModel = ({ jscadPlan }: { jscadPlan: JscadOperation }) => {
+export const JscadModel = ({
+  jscadPlan,
+  positionOffset,
+  rotationOffset,
+}: {
+  jscadPlan: JscadOperation
+  positionOffset?: [number, number, number]
+  rotationOffset?: [number, number, number]
+}) => {
   const { threeGeom, material } = useMemo(() => {
     const jscadObject = executeJscadOperations(jscad as any, jscadPlan)
 
@@ -20,5 +28,12 @@ export const JscadModel = ({ jscadPlan }: { jscadPlan: JscadOperation }) => {
 
   if (!threeGeom) return null
 
-  return <mesh geometry={threeGeom} material={material} />
+  return (
+    <mesh
+      geometry={threeGeom}
+      material={material}
+      position={positionOffset}
+      rotation={rotationOffset}
+    />
+  )
 }

stories/Bugs/RotationOffsets.stories.tsx

@@ -91,7 +91,7 @@ const soup: AnySoupElement[] = [
   },
   {
     type: "schematic_text",
-    text: 100,
+    text: "100",
     schematic_text_id: "schematic_text_1",
     schematic_component_id: "schematic_component_simple_resistor_0",
     anchor: "left",
@@ -166,7 +166,7 @@ const soup: AnySoupElement[] = [
     supplier_part_numbers: {},
     ftype: "simple_resistor",
     resistance: 1000,
-    pcbRotation: "90deg",
+    // rotation: 90, // Removed as it's not a valid property for source_component
   },
   {
     type: "schematic_component",
@@ -248,7 +248,7 @@ const soup: AnySoupElement[] = [
   },
   {
     type: "schematic_text",
-    text: 1000,
+    text: "1000",
     schematic_text_id: "schematic_text_3",
     schematic_component_id: "schematic_component_simple_resistor_1",
     anchor: "left",
@@ -320,6 +320,7 @@ const soup: AnySoupElement[] = [
     type: "source_trace",
     source_trace_id: "source_trace_0",
     connected_source_port_ids: ["source_port_2", "source_port_1"],
+    connected_source_net_ids: [],
   },
   {
     type: "schematic_trace",
@@ -360,7 +361,7 @@ const soup: AnySoupElement[] = [
         from: {
           x: -0.5,
           y: 0,
-          ti: 0,
+          // ti: 0,
         },
         to: {
           x: -0.6000000000000001,
@@ -371,7 +372,7 @@ const soup: AnySoupElement[] = [
         from: {
           x: 3.061616997868383e-17,
           y: 2.5,
-          ti: 1,
+          // ti: 1,
         },
         to: {
           x: 0,

stories/Simple2.stories.tsx

@@ -4,7 +4,7 @@ import { CadViewer } from "src/CadViewer"
 export const Default = () => (
   <CadViewer>
     <board width="10mm" height="40mm">
-      <chip name="U1" footprint="dip16" />
+      <chip name="U1" footprint="tssop16" />
     </board>
   </CadViewer>
 )

stories/SmtPadLayers.stories.tsx

@@ -38,7 +38,7 @@ const createCircuit = () => {
 
 export const SmtPadLayersDemo = () => {
   const circuitJson = createCircuit()
-  return <CadViewer soup={circuitJson} />
+  return <CadViewer soup={circuitJson as any} />
 }
 
 export default {