@tscircuit/schematic-viewer 1.2.14 → 1.4.0

package/src/schematic-components/SchematicComponent.tsx

@@ -1,11 +1,12 @@
-import * as Type from "lib/types"
+import { AnyCircuitElement, SchematicComponent as SchematicComponentType } from "circuit-json"
 import * as Component from "./"
 
 interface Props {
   component: {
-    source: Type.SourceComponent
-    schematic: Type.SchematicComponent
+    source: any
+    schematic: SchematicComponentType
     schematic_children: any[]
+    allElements: AnyCircuitElement[]
   }
 }
 
@@ -14,30 +15,23 @@ interface Props {
  * generating schematic lines directly
  */
 export const SchematicComponent = ({ component }: Props) => {
-  const { source, schematic } = component
+  const { source, schematic, allElements } = component
   if (!source.ftype) return null
 
   switch (source.ftype) {
-    case "simple_resistor": {
-      return <Component.SimpleResistor component={{ source, schematic }} />
-    }
-    case "simple_capacitor": {
-      return <Component.SimpleCapacitor component={{ source, schematic }} />
-    }
-    case "simple_power_source": {
-      return <Component.SimplePowerSource component={{ source, schematic }} />
-    }
-    case "simple_ground": {
-      return <Component.SimpleGround component={{ source, schematic }} />
-    }
-    case "simple_inductor": {
-      return <Component.SimpleInductor component={{ source, schematic }} />
-    }
-    case "simple_bug": {
-      return <Component.SchematicBug component={{ source, schematic }} />
-    }
-    case "simple_diode": {
-      return <Component.SimpleDiode component={{ source, schematic }} />
+    case "simple_resistor": 
+    case "simple_capacitor":
+    case "simple_power_source":
+    case "simple_ground":
+    case "simple_inductor":
+    case "simple_diode":
+    {
+      return <Component.SchematicComponentFromSymbol component={{ source, schematic }} />
+    }
+    case "simple_chip":
+    case "simple_bug":
+    {
+      return <Component.SchematicChip component={{ source, schematic, allElements }} />
     }
     default: {
       return <div>unknown ftype: {component.source.ftype}</div>

package/src/schematic-components/SchematicComponentFromSymbol.tsx

@@ -0,0 +1,44 @@
+import { SchematicComponent, SourceSimpleResistor } from "circuit-json"
+import { colorMap } from "lib/utils/colors"
+import { symbols } from "schematic-symbols"
+import SVGPathComponent from "./SVGPathComponent"
+
+interface Props {
+  component: {
+    source: SourceSimpleResistor
+    schematic: SchematicComponent
+  }
+}
+
+export const SchematicComponentFromSymbol = ({ component: { source, schematic } }: Props) => {
+  const { center, rotation } = schematic
+  // Get the resistor symbol paths
+  const symbol = symbols[schematic.symbol_name]
+  const paths = symbol.primitives
+    .filter((p: any) => p.type === "path")
+    .map((p: any) => ({
+      stroke: colorMap.schematic.component_outline,
+      strokeWidth: 0.02,
+      d: p.points.reduce(
+        (acc: string, point: { x: number; y: number }, index: number) => {
+          const command = index === 0 ? "M" : "L"
+          return `${acc} ${command} ${point.x} ${point.y}`
+        },
+        "",
+      ),
+    }))
+
+  return (
+    <SVGPathComponent
+      rotation={rotation}
+      center={center}
+      size={{
+        width: symbol?.size.width,
+        height: symbol?.size.height,
+      }}
+      paths={paths}
+    />
+  )
+}
+
+export default SchematicComponentFromSymbol

package/src/schematic-components/SchematicElement.tsx

@@ -1,14 +1,9 @@
-import { AnySoupElement } from "@tscircuit/soup"
+import { AnyCircuitElement } from "circuit-json"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicComponent from "./SchematicComponent"
-import SchematicPort from "./SchematicPort"
+import { SchematicNetLabel } from "./SchematicNetLabel"
 import SchematicText from "./SchematicText"
-import SchematicBox from "./SchematicBox"
 import SchematicTrace from "./SchematicTrace"
-import SchematicLine from "./SchematicLine"
-import RenderError from "./RenderError"
-import SchematicPath from "./SchematicPath"
-import { SchematicNetLabel } from "./SchematicNetLabel"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -17,8 +12,8 @@ export const SchematicElement = ({
   element,
   allElements,
 }: {
-  element: AnySoupElement
-  allElements: AnySoupElement[]
+  element: AnyCircuitElement
+  allElements: AnyCircuitElement[]
 }) => {
   // A lot of the split logic for element types into a project is here:
   // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13
@@ -36,30 +31,6 @@ export const SchematicElement = ({
     )
   }
 
-  if (element.type === "schematic_port") {
-    return (
-      <SchematicPort port={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_box") {
-    return (
-      <SchematicBox box={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_line") {
-    return (
-      <SchematicLine line={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_path") {
-    return (
-      <SchematicPath path={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
   if (element.type === "schematic_text") {
     return <SchematicText schematic_text={element} />
   }
@@ -68,10 +39,5 @@ export const SchematicElement = ({
     return <SchematicNetLabel net_label={element} />
   }
 
-  if (element.type === "source_error") {
-    // TODO use the ids on the source error to put this in the right place
-    return <RenderError text={element.message} />
-  }
-
   return null
 }

package/src/schematic-components/SchematicTrace.tsx

@@ -4,6 +4,7 @@ import Path from "svg-path-generator"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 import RenderError from "./RenderError"
 import SVGPathComponent2 from "./SVGPathComponent2"
+import { colorMap } from "lib/utils/colors"
 
 interface Props {
   trace: {
@@ -33,14 +34,14 @@ export const SchematicTrace = ({ trace: { source, schematic } }: Props) => {
     y: pathBounds.minY + pathBounds.height / 2,
   }
   return (
-    <SVGPathComponent2
+    <SVGPathComponent
       rotation={0}
       center={center}
       size={pathBounds}
       paths={[
         {
-          stroke: "green",
-          strokeWidth: 0.02,
+          stroke:colorMap.schematic.wire,
+          strokeWidth: 0.01,
           d,
         },
       ]}

package/src/schematic-components/index.tsx

@@ -1,17 +1,10 @@
-export * from "./SchematicGroup"
-export * from "./SimpleResistor"
-export * from "./SimpleCapacitor"
-export * from "./SVGPathComponent"
-export * from "./ProjectComponent"
+export * from "./ContextProviders"
+export * from "./RenderError"
+export * from "./SchematicChip"
 export * from "./SchematicComponent"
-export * from "./SchematicPort"
+export * from "./SchematicComponentFromSymbol"
+export * from "./SchematicGroup"
 export * from "./SchematicText"
-export * from "./ProjectComponent"
 export * from "./SchematicTrace"
-export * from "./SchematicBug"
-export * from "./SimplePowerSource"
-export * from "./SimpleGround"
-export * from "./SimpleInductor"
-export * from "./RenderError"
-export * from "./SimpleDiode"
-export * from "./ContextProviders"
+export * from "./SVGPathComponent"
+

package/src/stories/basics/schematic-net-label.stories.tsx

@@ -4,182 +4,128 @@ export const SchematicNetLabel = () => {
   return (
     <Schematic
       style={{ height: 500 }}
-      soup={
+      soup={[
         {
-          elements: [
-            {
-              type: "source_component",
-              source_component_id: "simple_resistor_0",
-              name: "R1",
-              supplier_part_numbers: {},
-              ftype: "simple_resistor",
-              resistance: 100,
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "schematic_component",
-              source_component_id: "simple_resistor_0",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              rotation: 0,
-              size: {
-                width: 1,
-                height: 0.3,
-              },
-              center: {
-                x: 0,
-                y: 0,
-              },
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "source_port",
-              name: "left",
-              source_port_id: "source_port_0",
-              source_component_id: "simple_resistor_0",
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "schematic_port",
-              schematic_port_id: "schematic_port_0",
-              source_port_id: "source_port_0",
-              center: {
-                x: -0.5,
-                y: 0,
-              },
-              facing_direction: "left",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              source: {
-                type: "source_port",
-                name: "left",
-                source_port_id: "source_port_0",
-                source_component_id: "simple_resistor_0",
-              },
-            },
-            {
-              type: "source_port",
-              name: "right",
-              source_port_id: "source_port_1",
-              source_component_id: "simple_resistor_0",
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
+          type: "source_component",
+          source_component_id: "simple_resistor_0",
+          name: "R1",
+          supplier_part_numbers: {},
+          ftype: "simple_resistor",
+          resistance: 100,
+        },
+        {
+          type: "schematic_component",
+          source_component_id: "simple_resistor_0",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          rotation: 0,
+          size: {
+            width: 1,
+            height: 0.3,
+          },
+          center: {
+            x: 0,
+            y: 0,
+          },
+        },
+        {
+          type: "source_port",
+          name: "left",
+          source_port_id: "source_port_0",
+          source_component_id: "simple_resistor_0",
+        },
+        {
+          type: "schematic_port",
+          schematic_port_id: "schematic_port_0",
+          source_port_id: "source_port_0",
+          center: {
+            x: -0.5,
+            y: 0,
+          },
+          facing_direction: "left",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+        },
+        {
+          type: "source_port",
+          name: "right",
+          source_port_id: "source_port_1",
+          source_component_id: "simple_resistor_0",
+        },
+        {
+          type: "schematic_port",
+          schematic_port_id: "schematic_port_1",
+          source_port_id: "source_port_1",
+          center: {
+            x: 0.5,
+            y: 0,
+          },
+          facing_direction: "right",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+        },
+        {
+          type: "schematic_text",
+          text: "R1",
+          schematic_text_id: "schematic_text_0",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          anchor: "left",
+          position: {
+            x: -0.2,
+            y: -0.5,
+          },
+          rotation: 0,
+        },
+        {
+          type: "schematic_text",
+          text: "100",
+          schematic_text_id: "schematic_text_1",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          anchor: "left",
+          position: {
+            x: -0.2,
+            y: -0.3,
+          },
+          rotation: 0,
+        },
+        {
+          type: "source_net",
+          member_source_group_ids: [],
+          source_net_id: "net_0",
+          name: "N1",
+        },
+        {
+          type: "source_trace",
+          connected_source_port_ids: ["source_port_1"],
+          connected_source_net_ids: ["net_0"],
+          source_trace_id: "source_trace_0",
+        },
+        {
+          type: "schematic_net_label",
+          source_net_id: "net_0",
+          text: "N1",
+          anchor_side: "left",
+          center: {
+            x: 1.5,
+            y: 0,
+          },
+        },
+        {
+          type: "schematic_trace",
+          schematic_trace_id: "schematic_trace_0",
+          source_trace_id: "source_trace_0",
+          edges: [
             {
-              type: "schematic_port",
-              schematic_port_id: "schematic_port_1",
-              source_port_id: "source_port_1",
-              center: {
+              from: {
                 x: 0.5,
                 y: 0,
               },
-              facing_direction: "right",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              source: {
-                type: "source_port",
-                name: "right",
-                source_port_id: "source_port_1",
-                source_component_id: "simple_resistor_0",
-              },
-            },
-            {
-              type: "schematic_text",
-              text: "R1",
-              schematic_text_id: "schematic_text_0",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              anchor: "left",
-              position: {
-                x: -0.2,
-                y: -0.5,
-              },
-              rotation: 0,
-              source: null,
-            },
-            {
-              type: "schematic_text",
-              text: 100,
-              schematic_text_id: "schematic_text_1",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              anchor: "left",
-              position: {
-                x: -0.2,
-                y: -0.3,
-              },
-              rotation: 0,
-              source: null,
-            },
-            {
-              type: "source_net",
-              member_source_group_ids: [],
-              source_net_id: "net_0",
-              name: "N1",
-              source: null,
-            },
-            {
-              type: "source_trace",
-              connected_source_port_ids: ["source_port_1"],
-              connected_source_net_ids: ["net_0"],
-              source_trace_id: "source_trace_0",
-              source: null,
-            },
-            {
-              type: "schematic_net_label",
-              source_net_id: "net_0",
-              text: "N1",
-              anchor_side: "left",
-              center: {
+              to: {
                 x: 1.5,
                 y: 0,
               },
-              source: null,
-            },
-            {
-              type: "schematic_trace",
-              schematic_trace_id: "schematic_trace_0",
-              source_trace_id: "source_trace_0",
-              edges: [
-                {
-                  from: {
-                    x: 0.5,
-                    y: 0,
-                  },
-                  to: {
-                    x: 1.5,
-                    y: 0,
-                  },
-                  from_schematic_port_id: "schematic_port_1",
-                },
-              ],
-              source: null,
+              from_schematic_port_id: "schematic_port_1",
             },
           ],
-        }.elements
-      }
+        },
+      ]}
     />
   )
 }

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

@@ -5,13 +5,16 @@ export const BugConnections = () => {
     <Schematic style={{ height: 600 }}>
       <bug
         name="B1"
-        port_arrangement={{
-          left_size: 3,
-          right_size: 2,
+        schPortArrangement={{
+          leftSize: 3,
+          rightSize: 2,
         }}
-        sch_cx={8}
-        sch_cy={3}
-        port_labels={{
+        schHeight={5}
+        schWidth={3}
+        schPinSpacing={2}
+        schX={8}
+        schY={3}
+        pinLabels={{
           "1": "D0",
           "2": "D1",
         }}