@tscircuit/schematic-viewer 1.2.14 → 1.4.0

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

@@ -1,79 +1,99 @@
+import { Circuit } from "@tscircuit/core"
 import { Schematic } from "Schematic"
 
-const FTDIBasic3v3 = () => (
-  <group>
-    <bug
-      name="U1"
-      port_arrangement={{
-        left_side: {
-          pins: [16, 15, 20, 17, 4, 27, 28, 19, 26, 25, 7, 18, 21],
-          direction: "top-to-bottom",
-        },
-        right_side: {
-          pins: [1, 5, 11, 3, 2, 9, 10, 6, 23, 22, 14, 13, 12],
-          direction: "top-to-bottom",
-        },
-      }}
-      footprint="ssop28Db"
-      port_labels={{
-        "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"
-      center={[3, 0]}
-      rotation="90deg"
-    />
-    <resistor
-      resistance="1kohm"
-      name="R2"
-      footprint="0805"
-      center={[4.5, 0]}
-      rotation="90deg"
-    />
-    <diode name="LED1" footprint="0805" rotation="90deg" center={[3, 2]} />
-    <diode name="LED2" footprint="0805" rotation="90deg" center={[4.5, 2]} />
-    <netalias net="5V" center={[3, -2]} />
-    <netalias net="5V" center={[4.5, -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" center={[-3, 4]} rotation="180deg" />
-    <netalias net="GND" center={[-5, 3]} rotation="180deg" />
-    <netalias net="GND" center={[-6, 3]} rotation="180deg" />
-    <netalias net="GND" center={[-7, 3]} rotation="180deg" />
-    <netalias net="GND" center={[-8, 2]} rotation="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]}
@@ -83,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/bug-pin-spacing.stories.tsx

@@ -3,6 +3,7 @@ import { Schematic } from "Schematic"
 const BugPinSpacingExample = () => (
   <bug
     name="U2"
+    manufacturerPartNumber="part-number"
     schPortArrangement={{
       leftSize: 2,
       rightSize: 2,

package/src/stories/bugs/bug1-y-flip.stories.tsx

@@ -4,8 +4,9 @@ export const Bug1YFlip = () => {
   return (
     <Schematic style={{ height: 600 }}>
       <bug
-        port_arrangement={{ top_size: 2 }}
-        port_labels={{ 1: "foo", 2: "baz" }}
+        name="U1"
+        schPortArrangement={{ topSize: 2 }}
+        pinLabels={{ 1: "foo", 2: "baz" }}
       />
     </Schematic>
   )

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,45 +1,36 @@
-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 }}>
         <board
           layout={layout().autoLayoutSchematic()}
-          pcbCenterX={0}
-          pcbCenterY={0}
+          pcbX={0}
+          pcbY={0}
           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/component-drawing-example.stories.tsx

@@ -3,8 +3,8 @@ import { Schematic } from "Schematic"
 export const ComponentDrawingExample = () => {
   return (
     <Schematic style={{ height: 600 }}>
-      <component>
-        <schematicbox x={0} y={0} width="6mm" height="6mm" />
+      <component name={"C1"}>
+        <schematicbox schX={0} schY={0} width="6mm" height="6mm" />
         <schematicline x1={0} y1={0} x2={1} y2={1} />
       </component>
     </Schematic>

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

@@ -3,51 +3,46 @@ import { Schematic } from "../Schematic"
 export const LEDCircuitReact = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor name="R1" resistance="10 ohm" center={[2, 1]} />
-      <capacitor
-        name="C1"
-        capacitance="10 uF"
-        center={[4, 2]}
-        rotation="90deg"
-      />
-      <resistor
-        name="R2"
-        resistance="10 ohm"
-        center={[6, 1]}
-        rotation="90deg"
-      />
-      <trace
-        path={[".R1 > port.right", ".C1 > port.left", ".R2 > port.left"]}
-      />
-      <powersource voltage="5V" center={[1, 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"
-        port_arrangement={{ left_size: 3, right_size: 3 }}
-        center={[8, 3]}
-        port_labels={{
-          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" center={[6, 3.5]} rotation="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 center={["10mm", "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/stories/net-alias.stories.tsx

@@ -83,7 +83,7 @@ const soup = [
 ]
 
 export const NetAliasSoup = () => {
-  return <Schematic style={{ height: 500 }} soup={soup} />
+  return <Schematic style={{ height: 500 }} soup={soup as any} />
 }
 
 export default {

package/src/stories/off-center-render.stories.tsx

@@ -7,13 +7,13 @@ export const OffCenterRendering = () => {
       <Schematic style={{ height: 600 }}>
         <bug
           name="B1"
-          port_arrangement={{
-            left_size: 3,
-            right_size: 2,
+          schPortArrangement={{
+            leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" },
+            rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" },
           }}
-          sch_cx={8}
-          sch_cy={3}
-          port_labels={{
+          schX={8}
+          schY={3}
+          pinLabels={{
             "1": "D0",
             "2": "D1",
           }}

package/src/stories/rotated-resistor.stories.tsx

@@ -9,7 +9,7 @@ export const RotatedResistor = () => {
         schX={2}
         schY={1}
         schRotation="90deg"
-        rotation="90deg"
+        pcbRotation="90deg"
       />
     </Schematic>
   )

package/src/stories/schematic-path.stories.tsx

@@ -31,7 +31,7 @@ const soup: AnyElement[] = [
 ]
 
 export const SchematicPathSoup = () => {
-  return <Schematic style={{ height: 500 }} soup={soup} />
+  return <Schematic style={{ height: 500 }} soup={soup as any} />
 }
 
 export default {

package/src/stories/three-sided-bug.stories.tsx

@@ -5,15 +5,15 @@ export const ThreeSidedBug = () => {
     <Schematic style={{ height: 600 }}>
       <bug
         name="B1"
-        port_arrangement={{
-          left_size: 3,
-          right_size: 3,
-          top_size: 0,
-          bottom_size: 5,
+        schPortArrangement={{
+          leftSize: 3,
+          rightSize: 3,
+          topSize: 0,
+          bottomSize: 5,
         }}
-        sch_cx={8}
-        sch_cy={3}
-        port_labels={{
+        schX={8}
+        schY={3}
+        pinLabels={{
           "1": "D0",
           "2": "D1",
         }}

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>
-    </>
-  )
-}