@tscircuit/schematic-viewer 1.3.0 → 1.4.0

package/src/stories/basics/schematic-net-labels-2.stories.tsx

@@ -3,26 +3,28 @@ import { Schematic } from "../../Schematic"
 export const SchematicNetLabel2 = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor resistance="1k" name="R1" schX={-2} schY={0} />
-      <resistor resistance="1k" name="R2" schX={2} schY={0} />
-      <resistor
-        schRotation="90deg"
-        resistance="1k"
-        name="R3"
-        schX={0}
-        schY={2}
-      />
-      <resistor
-        schRotation="90deg"
-        resistance="1k"
-        name="R4"
-        schX={0}
-        schY={-2}
-      />
-      <trace from=".R1 > .right" to="net.N1" />
-      <trace from=".R2 > .left" to="net.N2" />
-      <trace from=".R3 > .left" to="net.N3" />
-      <trace from=".R4 > .right" to="net.GND2" />
+      <board width={10} height={10}>
+        <resistor resistance="1k" name="R1" schX={-2} schY={0} />
+        <resistor resistance="1k" name="R2" schX={2} schY={0} />
+        <resistor
+          schRotation="90deg"
+          resistance="1k"
+          name="R3"
+          schX={0}
+          schY={2}
+        />
+        <resistor
+          schRotation="90deg"
+          resistance="1k"
+          name="R4"
+          schX={0}
+          schY={-2}
+        />
+        <trace from=".R1 > .right" to="net.N1" />
+        <trace from=".R2 > .left" to="net.N2" />
+        <trace from=".R3 > .left" to="net.N3" />
+        <trace from=".R4 > .right" to="net.GND2" />
+      </board>
     </Schematic>
   )
 }

package/src/stories/bug-connections.stories.tsx

@@ -9,6 +9,9 @@ export const BugConnections = () => {
           leftSize: 3,
           rightSize: 2,
         }}
+        schHeight={5}
+        schWidth={3}
+        schPinSpacing={2}
         schX={8}
         schY={3}
         pinLabels={{

package/src/stories/bug-high-port-numbers.stories.tsx

@@ -1,82 +1,99 @@
+import { Circuit } from "@tscircuit/core"
 import { Schematic } from "Schematic"
 
-const FTDIBasic3v3 = () => (
-  <group>
-    <bug
-      name="U1"
-      manufacturerPartNumber="part-number"
-      schPortArrangement={{
-        leftSide: {
-          pins: [16, 15, 20, 17, 4, 27, 28, 19, 26, 25, 7, 18, 21],
-          direction: "top-to-bottom",
-        },
-        rightSide: {
-          pins: [1, 5, 11, 3, 2, 9, 10, 6, 23, 22, 14, 13, 12],
-          direction: "top-to-bottom",
-        },
-      }}
-      footprint="ssop28Db"
-      pinLabels={{
-        "1": "TXD",
-        "5": "RXD",
-        "11": "CTS",
-        "3": "RTS",
-        "2": "DTR",
-        "9": "DSR",
-        "10": "DCD",
-        "6": "RI",
-        "23": "TXLED",
-        "22": "RXLED",
-        "14": "PWRUN",
-        "13": "TXDEN",
-        "12": "SLEEP",
-        "16": "USBDM",
-        "15": "USBDP",
-        "20": "VCC",
-        "17": "3V3OUT",
-        "4": "VCCIO",
-        "27": "OSCI",
-        "28": "OSCO",
-        "19": "RESET",
-        "26": "TEST",
-        "25": "AGND",
-        "7": "GND7",
-        "18": "GND18",
-        "21": "GND21",
-      }}
-    />
-    <resistor
-      resistance="1kohm"
-      name="R1"
-      footprint="0805"
-      schX={3}
-      schY={0}
-      schRotation="90deg"
-    />
-    <resistor
-      resistance="1kohm"
-      name="R2"
-      footprint="0805"
-      schX={4.5}
-      schY={0}
-      schRotation="90deg"
-    />
-    <diode name="LED1" footprint="0805" schRotation={"90deg"} schX={3} schY={2} />
-    <diode name="LED2" footprint="0805" schRotation={"90deg"} schX={4.5} schY={2} />
-    <netalias net="5V" schX={3} schY={-2} />
-    <netalias net="5V" schX={4.5} schY={-2} />
-    <trace path={[".5V", ".R2 > port.left"]} />
-    <trace path={[".5V", ".R1 > port.left"]} />
-    <trace path={[".R1 > port.right", ".LED1 > port.left"]} />
-    <trace path={[".R2 > port.right", ".LED2 > port.left"]} />
-    <trace path={[".LED1 > port.right", ".U1 > .TXLED"]} />
-    <trace path={[".LED2 > port.right", ".U1 > .RXLED"]} />
-    <netalias net="GND" schX={-3} schY={4} schRotation="180deg" />
-    <netalias net="GND" schX={-5} schY={3} schRotation="180deg" />
-    <netalias net="GND" schX={-6} schY={3} schRotation="180deg" />
-    <netalias net="GND" schX={-7} schY={3} schRotation="180deg" />
-    <netalias net="GND" schX={-8} schY={2} schRotation="180deg" />  
-    {/* <component>
+export const BugHighPortNumbers = () => {
+  const circuit = new Circuit()
+
+  circuit.add(
+    <group>
+      <chip
+        name="U1"
+        manufacturerPartNumber="part-number"
+        schPortArrangement={{
+          leftSide: {
+            pins: [16, 15, 20, 17, 4, 27, 28, 19, 26, 25, 7, 18, 21],
+            direction: "top-to-bottom",
+          },
+          rightSide: {
+            pins: [1, 5, 11, 3, 2, 9, 10, 6, 23, 22, 14, 13, 12],
+            direction: "top-to-bottom",
+          },
+        }}
+        schWidth={1}
+        footprint="ssop28Db"
+        pinLabels={{
+          "1": "TXD",
+          "5": "RXD",
+          "11": "CTS",
+          "3": "RTS",
+          "2": "DTR",
+          "9": "DSR",
+          "10": "DCD",
+          "6": "RI",
+          "23": "TXLED",
+          "22": "RXLED",
+          "14": "PWRUN",
+          "13": "TXDEN",
+          "12": "SLEEP",
+          "16": "USBDM",
+          "15": "USBDP",
+          "20": "VCC",
+          "17": "3V3OUT",
+          "4": "VCCIO",
+          "27": "OSCI",
+          "28": "OSCO",
+          "19": "RESET",
+          "26": "TEST",
+          "25": "AGND",
+          "7": "GND7",
+          "18": "GND18",
+          "21": "GND21",
+        }}
+      />
+      <resistor
+        resistance="1kohm"
+        name="R1"
+        footprint="0805"
+        schX={3}
+        schY={0}
+        symbolName="boxresistor_vert"
+      />
+      <resistor
+        resistance="1kohm"
+        name="R2"
+        footprint="0805"
+        schX={4.5}
+        schY={0}
+        symbolName="boxresistor_vert"
+      />
+      <diode
+        name="LED1"
+        footprint="0805"
+        symbolName="diode_vert"
+        schX={3}
+        schY={3}
+      />
+      <diode
+        name="LED2"
+        footprint="0805"
+        symbolName="diode_vert"
+        schX={4.5}
+        schY={3}
+      />
+      <netalias net="5V" schX={3} schY={-2} />
+      <netalias net="5V" schX={4.5} schY={-2} />
+      {/* <trace path={[".5V", ".R2 > port.left"]} />
+      <trace path={[".5V", ".R1 > port.left"]} /> */}
+      <trace path={[".R1 > port.right", ".LED1 > port.left"]} />
+      <trace path={[".R2 > port.right", ".LED2 > port.left"]} />
+      <trace path={[".LED1 > port.right", ".U1 > .pin1"]} />
+      <trace path={[".LED2 > port.right", ".U1 > .RXLED"]} />
+      <netalias net="GND" schX={-3} schY={4} schRotation="180deg" />
+      <netalias net="GND" schX={-5} schY={3} schRotation="180deg" />
+      <netalias net="GND" schX={-6} schY={3} schRotation="180deg" />
+      <netalias net="GND" schX={-7} schY={3} schRotation="180deg" />
+      <netalias net="GND" schX={-8} schY={2} schRotation="180deg" />
+      {/* <component>
       <schematicbox
         name="USB"
         center={[-9, 0]}
@@ -86,15 +103,12 @@ const FTDIBasic3v3 = () => (
         height={2}
       />
     </component> */}
-  </group>
-)
-
-export const BugHighPortNumbers = () => {
-  return (
-    <Schematic style={{ height: 600 }}>
-      <FTDIBasic3v3 />
-    </Schematic>
+    </group>,
   )
+
+  const circuitJson = circuit.getCircuitJson()
+
+  return <Schematic soup={circuitJson as any} style={{ height: 600 }} />
 }
 
 export default {

package/src/stories/bugs/bug3-scaling-trace.stories.tsx

@@ -1,13 +1,19 @@
-import { useResistor } from "@tscircuit/react-fiber"
 import { Schematic } from "../../Schematic"
 
 export const Bug3ScalingTrace = () => {
-  const R1 = useResistor("R1", { resistance: "10" })
-  const R2 = useResistor("R2", { resistance: "1k" })
   return (
     <Schematic style={{ height: 500 }}>
-      <R1 schX={2} schY={1} />
-      <R2 schRotation="90deg" schX={0} schY={3} left={R1.left} />
+      <board width={"10mm"} height={"10mm"} pcbX={0} pcbY={0}>
+        <resistor name="R1" resistance="10" schX={2} schY={1} />
+        <resistor
+          name="R2"
+          resistance="1k"
+          schX={0}
+          schY={3}
+          symbolName="boxresistor_vert"
+        />
+        <trace path={[".R1 > port.right", ".R2 > port.left"]} />
+      </board>
     </Schematic>
   )
 }

package/src/stories/bugs/bug4-schematic-line.stories.tsx

@@ -1,4 +1,3 @@
-import { useResistor } from "@tscircuit/react-fiber"
 import { Schematic } from "../../Schematic"
 
 export const Bug4SchematicLine = () => {

package/src/stories/bugs/bug5-diode.stories.tsx

@@ -1,4 +1,3 @@
-import { useResistor } from "@tscircuit/react-fiber"
 import { Schematic } from "../../Schematic"
 
 export const Bug5SchematicLine = () => {

package/src/stories/bugs/bug8-autolayout.stories.tsx

@@ -1,30 +1,7 @@
-import { Schematic } from "../../Schematic"
 import { layout } from "@tscircuit/layout"
-import { useBug, useResistor, useCapacitor } from "@tscircuit/react-fiber"
+import { Schematic } from "../../Schematic"
 
 export const Bug8Autolayout = () => {
-  const U1 = useBug("U1", {
-    pinLabels: {
-      1: "VCC",
-      2: "D0",
-      3: "D1",
-      4: "GND",
-      5: "INP",
-      6: "THR",
-    },
-    schPortArrangement: {
-      leftSize: 3,
-      topSize: 0,
-      bottomSize: 0,
-      rightSize: 3,
-    },
-  })
-
-  const R1 = useResistor("R1", { resistance: "10k" })
-  const R2 = useResistor("R2", { resistance: "1k" })
-  const R3 = useResistor("R3", { resistance: "5k" })
-  const C1 = useCapacitor("C1", { capacitance: "1uF" })
-
   return (
     <div>
       <Schematic style={{ height: 500 }}>
@@ -35,11 +12,25 @@ export const Bug8Autolayout = () => {
           width={"10mm"}
           height={"10mm"}
         >
-          <U1 />
-          <R1 left={U1.D1} right={U1.VCC} />
-          <R2 left={U1.D0} right={U1.GND} />
-          <R3 left={U1.INP} right={U1.THR} />
-          <C1 left={U1.INP} right={U1.THR} />
+          <bug
+            name="U1"
+            schX={0}
+            schY={0}
+            schPortArrangement={{
+              leftSize: 3,
+              topSize: 0,
+              bottomSize: 0,
+              rightSize: 3,
+            }}
+          />
+          <resistor name="R1" resistance="10k" schX={0} schY={1} />
+          <resistor name="R2" resistance="1k" schX={0} schY={3} />
+          <resistor name="R3" resistance="5k" schX={2} schY={1} />
+          <capacitor name="C1" capacitance="1uF" schX={2} schY={3} />
+          <trace path={[".R1 > port.right", ".R2 > port.left"]} />
+          <trace path={[".R2 > port.right", ".R3 > port.left"]} />
+          <trace path={[".R3 > port.right", ".C1 > port.left"]} />
+          <trace path={[".C1 > port.right", ".R1 > port.left"]} />
         </board>
       </Schematic>
     </div>

package/src/stories/circuit-components/diode.stories.tsx

@@ -3,7 +3,9 @@ import { Schematic } from "../../Schematic"
 export const Diode = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <diode name="D1" schX={3} schY={1} />
+      <board width={10} height={10}>
+        <diode name="D1" schX={2} schY={1} />
+      </board>
     </Schematic>
   )
 }

package/src/stories/circuit-components/resistor.stories.tsx

@@ -3,7 +3,9 @@ import { Schematic } from "../../Schematic"
 export const Resistor = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
+      <board width={10} height={10}>
+        <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
+      </board>
     </Schematic>
   )
 }

package/src/stories/led-circuit-react.stories.tsx

@@ -3,54 +3,46 @@ import { Schematic } from "../Schematic"
 export const LEDCircuitReact = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
-      <capacitor
-        name="C1"
-        capacitance="10 uF"
-        schX={4}
-        schY={2}
-        schRotation="90deg"
-      />
-      <resistor
-        name="R2"
-        resistance="10 ohm"
-        schX={6}
-        schY={1}
-        schRotation="90deg"
-      />
-      <trace
-        path={[".R1 > port.right", ".C1 > port.left", ".R2 > port.left"]}
-      />
-      <powersource voltage="5V" schX={1} schY={2} name="main_power" />
-      <trace path={[".main_power > port.positive", ".R1 > port.left"]} />
-      <trace
-        path={["power > port.negative", ".C1 > port.right", ".R2 > port.right"]}
-      />
-      <bug
-        name="B1"
-        schPortArrangement={{ leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" }, rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" } }}
-        schX={8}
-        schY={3}
-        pinLabels={{
-          1: "PWR",
-          2: "NC",
-          3: "RG",
-          4: "D0",
-          5: "D1",
-          6: "GND",
-        }}
-      />
-      <trace path={[".B1 > port.PWR", ".R2 > port.left"]} />
-      <ground name="GND" center={[11, 3]} />
-      <trace path={[".B1 > port.GND", ".GND > .gnd"]} />
-      {/* <trace from=".B1 > port.GND" to=".GND > .gnd" /> */}
-      <diode name="D1" schX={6} schY={3.5} schRotation="180deg" />
-      <trace path={[".D1 > port.right", ".C1 > .right"]} />
-      <trace path={[".D1 > port.left", ".B1 > .RG"]} />
-      {/* <trace from=".D1 > .left" to=".B1 > .RG" /> */}
-      {/* <trace from=".D1 > .right" to=".C1> .right" /> */}
-      <netalias schX={"10mm"} schY={"1.5mm"} net="D0BUS" />
-      <trace path={[".B1 > .D0", ".D0BUS"]} />
+      <group>
+        <resistor name="R1" resistance="10 ohm" schX={2} schY={1}/>
+        <capacitor
+          name="C1"
+          capacitance="10 uF"
+          schX={4}
+          schY={2}
+        symbolName="capacitor_vert"
+        />
+        <resistor
+          name="R2"
+          resistance="10 ohm"
+          schX={6}
+          schY={1}
+        />
+        <trace path={[".R1 > port.right", ".C1 > port.left"]} />
+        <trace path={[".C1 > port.right", ".R2 > port.left"]} />
+        <powersource voltage={5} schX={1} schY={2} name="main_power" />
+        <trace path={[".main_power > port.positive", ".R1 > port.left"]} />
+        <trace path={[".main_power > port.negative", ".C1 > port.right"]} />
+        <trace path={[".C1 > port.right", ".R2 > port.right"]} />
+        <bug
+          name="B1"
+          schPortArrangement={{
+            leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" },
+            rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" },
+          }}
+          // schWidth={4}
+          schX={8}
+          schY={3}
+          pinLabels={{
+            1: "PWR",
+            2: "NC",
+            3: "RG",
+            4: "D0",
+            5: "D1",
+            6: "GND",
+          }}
+        />
+      </group>
     </Schematic>
   )
 }

package/src/pages/led-circuit.tsx

@@ -1,96 +0,0 @@
-import { createProjectBuilder } from "@tscircuit/builder"
-import { useMaybePromise } from "lib/hooks"
-import { Schematic } from "../Schematic"
-
-const pb = createProjectBuilder()
-const $elements = pb
-  .addGroup((gb) =>
-    gb
-      .addResistor((rb) =>
-        rb
-          .setSourceProperties({
-            resistance: "10 ohm",
-            name: "R1",
-          })
-          .setSchematicCenter(2, 1)
-      )
-      .addCapacitor((cb) =>
-        cb
-          .setSourceProperties({
-            name: "C1",
-            capacitance: "10 uF",
-          })
-          .setSchematicCenter(4, 2)
-          .setSchematicRotation("90deg")
-      )
-      .addResistor((cb) =>
-        cb
-          .setSourceProperties({
-            resistance: "10 ohm",
-            name: "R2",
-          })
-          .setSchematicCenter(6, 1)
-          .setSchematicRotation("90deg")
-      )
-      .addTrace([".R1 > port.right", ".C1 > port.left", ".R2 > port.left"])
-      .addPowerSource((cb) =>
-        cb
-          .setSourceProperties({
-            voltage: "5V",
-            name: "main_power",
-          })
-          .setSchematicCenter(1, 2)
-      )
-      .addTrace(["power > port.positive", ".R1 > port.left"])
-      .addTrace([
-        "power > port.negative",
-        ".C1 > port.right",
-        ".R2 > port.right",
-      ])
-      .addBug((cb) =>
-        cb
-          .setSourceProperties({ name: "B1" })
-          .setSchematicProperties({
-            port_arrangement: {
-              left_size: 3,
-              right_size: 3,
-            },
-          })
-          .labelPort(1, "PWR")
-          .labelPort(2, "NC")
-          .labelPort(3, "RG")
-          .labelPort(4, "D0")
-          .labelPort(5, "D1")
-          .labelPort(6, "GND")
-          .setSchematicCenter(8, 3)
-      )
-      .addTrace([".B1 > port.PWR", ".R2 > port.left"])
-      .addGround((cb) =>
-        cb
-          .setSourceProperties({
-            name: "GND",
-          })
-          .setSchematicCenter(11, 3)
-      )
-      .addTrace([".B1 > port.GND", ".gnd"])
-      .addDiode((db) =>
-        db
-          .setSourceProperties({ name: "D1" })
-          .setSchematicCenter(6, 3.5)
-          .setSchematicRotation("180deg")
-      )
-      .addTrace([".D1 > .left", ".B1 > .RG"])
-      .addTrace([".D1 > .right", ".C1 > .right"])
-  )
-  .build(pb.createBuildContext())
-
-export default () => {
-  const elements = useMaybePromise($elements)
-  if (!elements) return null
-  return (
-    <>
-      <Schematic style={{ height: 400 }} elements={elements} />
-      <pre>{JSON.stringify(elements, null, "  ")}</pre>
-    </>
-  )
-}

package/src/schematic-components/ProjectComponent.tsx

@@ -1,70 +0,0 @@
-import { useMaybePromise } from "lib/hooks"
-import { ProjectClass } from "@tscircuit/builder"
-import * as Types from "lib/types"
-import * as Components from "./"
-
-interface Props {
-  project: Types.Project | Promise<Types.Project>
-}
-
-/**
- * @deprecated use SchematicElement instead because we're most likely
- * deprecating projects
- */
-export const ProjectComponent = ({ project: $project }: Props) => {
-  const project = useMaybePromise($project)
-
-  if (!project) return <span>loading</span>
-
-  const projectClass = new ProjectClass(project as any)
-
-  return (
-    <>
-      {project.schematic_components.map((schematic_component) => (
-        <Components.SchematicComponent
-          key={schematic_component.schematic_component_id}
-          component={
-            {
-              source: projectClass.getSourceComponent(
-                schematic_component.source_component_id
-              ),
-              schematic: schematic_component,
-            } as any
-          }
-        />
-      ))}
-      {project.schematic_ports.map((schematic_port) => (
-        <Components.SchematicPort
-          key={schematic_port.schematic_port_id}
-          port={
-            {
-              source: projectClass.getSourcePort(
-                schematic_port.schematic_port_id
-              ),
-              schematic: schematic_port,
-            } as any
-          }
-        />
-      ))}
-      {project.schematic_traces.map((schematic_trace) => (
-        <Components.SchematicTrace
-          key={schematic_trace.schematic_trace_id}
-          trace={{
-            source: projectClass.getSourceTrace(
-              schematic_trace.source_trace_id
-            ),
-            schematic: schematic_trace,
-          }}
-        />
-      ))}
-      {project.schematic_texts.map((schematic_text) => (
-        <Components.SchematicText
-          key={schematic_text.schematic_text_id}
-          schematic_text={schematic_text}
-        />
-      ))}
-    </>
-  )
-}
-
-export default ProjectComponent