@tscircuit/schematic-viewer 1.2.8 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -58,7 +58,7 @@
     "zustand": "^4.0.0"
   },
   "dependencies": {
-    "@tscircuit/soup": "^0.0.7",
+    "@tscircuit/soup": "^0.0.16",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",

package/src/Schematic.tsx

@@ -43,7 +43,7 @@ export const Schematic = ({
 }: {
   children?: any
 
-  /** @deprecated */
+  /** @deprecated use soup */
   elements?: any
 
   soup?: any

package/src/lib/utils/collect-element-refs.ts

@@ -1,6 +1,9 @@
-import { AnyElement, SourcePort } from "@tscircuit/builder"
+import { AnySoupElement, SourcePort } from "@tscircuit/soup"
 
-export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
+export const collectElementRefs = (
+  elm: AnySoupElement,
+  allElms: AnySoupElement[]
+) => {
   const source_port = allElms.find(
     (e) =>
       e.type === "source_port" &&

package/src/schematic-components/SchematicElement.tsx

@@ -1,4 +1,4 @@
-import { AnyElement } from "@tscircuit/builder"
+import { AnySoupElement } from "@tscircuit/soup"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicComponent from "./SchematicComponent"
 import SchematicPort from "./SchematicPort"
@@ -8,6 +8,7 @@ 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.
@@ -16,8 +17,8 @@ export const SchematicElement = ({
   element,
   allElements,
 }: {
-  element: AnyElement
-  allElements: AnyElement[]
+  element: AnySoupElement
+  allElements: AnySoupElement[]
 }) => {
   // 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
@@ -63,6 +64,10 @@ export const SchematicElement = ({
     return <SchematicText schematic_text={element} />
   }
 
+  if (element.type === "schematic_net_label") {
+    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} />

package/src/schematic-components/SchematicNetLabel.tsx

@@ -0,0 +1,47 @@
+import type { SchematicNetLabel as SchematicNetLabelObject } from "@tscircuit/soup"
+import SVGPathComponent from "./SVGPathComponent"
+import SchematicText from "./SchematicText"
+
+export const SchematicNetLabel = ({
+  net_label,
+}: {
+  net_label: SchematicNetLabelObject
+}) => {
+  console.log({ net_label })
+  const text_width = net_label.text.length * 0.15
+  // TODO add text
+  const path_width = 31 + net_label.text.length * 5
+  return (
+    <>
+      <SVGPathComponent
+        rotation={0}
+        center={net_label.center}
+        // fixed size?
+        size={{
+          width: 0.05 + text_width,
+          height: 0.175,
+        }}
+        paths={[
+          {
+            stroke: "gray",
+            strokeWidth: 0.75,
+            d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`,
+          },
+        ]}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "left",
+          position: {
+            x: net_label.center.x - text_width / 4 + 0.025,
+            y: net_label.center.y,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: net_label.text,
+          type: "schematic_text",
+        }}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,171 @@
+import { Schematic } from "../../Schematic"
+
+export const SchematicNetLabel = () => {
+  return (
+    <Schematic
+      style={{ height: 500 }}
+      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: "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",
+              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: "GND",
+              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: "GND",
+              anchor_side: "left",
+              center: {
+                x: 1.5,
+                y: 0,
+              },
+              source: null,
+            },
+          ],
+        }.elements
+      }
+    />
+  )
+}
+
+export default {
+  title: "Basics/SchematicNetLabel",
+  component: SchematicNetLabel,
+}