@tscircuit/schematic-viewer 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",

package/src/lib/types/core.ts

@@ -48,6 +48,27 @@ export interface SchematicComponent {
   }
 }
 
+export interface SchematicBox {
+  type: "schematic_box"
+  drawing_type: "box"
+  schematic_box_id: string
+  schematic_component_id: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface SchematicLine {
+  type: "schematic_line"
+  drawing_type: "line"
+  schematic_component_id: string
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
 export interface SchematicTrace {
   type: "schematic_trace"
   schematic_trace_id: string

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

@@ -7,11 +7,22 @@ export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
       e.source_component_id === (elm as any).source_component_id
   )
   if (
-    ["schematic_component", "schematic_trace", "schematic_port"].includes(
-      elm.type
-    )
+    [
+      "schematic_component",
+      "schematic_trace",
+      "schematic_port",
+      "schematic_box",
+      "schematic_line",
+    ].includes(elm.type)
   ) {
+    const schematic_children = allElms.filter(
+      (e) =>
+        "schematic_component_id" in e &&
+        e.schematic_component_id === (elm as any).schematic_component_id
+    )
+
     return {
+      schematic_children,
       schematic: elm,
       source: source_component,
     }

package/src/schematic-components/SchematicBox.tsx

@@ -0,0 +1,29 @@
+import * as Type from "lib/types"
+import { directionToVec } from "lib/utils/direction-to-vec"
+import * as Component from "./"
+
+interface Props {
+  box: {
+    schematic: Type.SchematicBox
+  }
+}
+
+export const SchematicBox = ({ box: { schematic } }: Props) => {
+  const { width: w, height: h } = schematic
+  return (
+    <Component.SVGPathComponent
+      rotation={0}
+      center={schematic}
+      size={{ width: schematic.width, height: schematic.height }}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 0.2,
+          d: `M 0 0 l ${w} 0 l 0 ${h} l -${w} 0 z`,
+        },
+      ]}
+    />
+  )
+}
+
+export default SchematicBox

package/src/schematic-components/SchematicComponent.tsx

@@ -5,6 +5,7 @@ interface Props {
   component: {
     source: Type.SourceComponent
     schematic: Type.SchematicComponent
+    schematic_children: any[]
   }
 }
 

package/src/schematic-components/SchematicElement.tsx

@@ -3,7 +3,9 @@ import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicComponent from "./SchematicComponent"
 import SchematicPort from "./SchematicPort"
 import SchematicText from "./SchematicText"
+import SchematicBox from "./SchematicBox"
 import SchematicTrace from "./SchematicTrace"
+import SchematicLine from "./SchematicLine"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -37,6 +39,18 @@ export const SchematicElement = ({
     )
   }
 
+  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_text") {
     return <SchematicText schematic_text={element} />
   }

package/src/schematic-components/SchematicLine.tsx

@@ -0,0 +1,35 @@
+import * as Type from "lib/types"
+import { directionToVec } from "lib/utils/direction-to-vec"
+import * as Component from "."
+
+interface Props {
+  line: {
+    schematic: Type.SchematicLine
+  }
+}
+
+export const SchematicLine = ({ line: { schematic } }: Props) => {
+  const { x1, x2, y1, y2 } = schematic
+  const dx = x2 - x1
+  const dy = y2 - y1
+  const width = Math.abs(dx) + 0.1
+  const height = Math.abs(dy) + 0.1
+  const center = { x: x1 + dx / 2, y: y1 + dy / 2 }
+
+  return (
+    <Component.SVGPathComponent
+      rotation={0}
+      center={center}
+      size={{ width, height }}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 10,
+          d: `M 0 0 l ${dx * 100} ${dy * 100}`,
+        },
+      ]}
+    />
+  )
+}
+
+export default SchematicLine

package/src/schematic-components/SchematicText.tsx

@@ -23,6 +23,7 @@ export const SchematicText = ({ schematic_text }: Props) => {
   } else if (anchor === "right") {
     offset = [-bounds.width, -bounds.height / 2]
   }
+
   return (
     <div
       ref={boundsRef}

package/src/stories/net-alias.stories.tsx

@@ -0,0 +1,92 @@
+import { Schematic } from "../Schematic"
+
+const soup = [
+  {
+    type: "source_component",
+    source_component_id: "net_alias_0",
+    ftype: "net_alias",
+    source: {
+      type: "source_component",
+      source_component_id: "net_alias_0",
+      ftype: "net_alias",
+    },
+  },
+  {
+    type: "schematic_component",
+    schematic_component_id: "schematic_net_alias_component_0",
+    source_component_id: "net_alias_0",
+    center: {
+      x: 2,
+      y: 2,
+    },
+    rotation: 0,
+    size: {
+      width: 0,
+      height: 0,
+    },
+    source: {
+      type: "source_component",
+      source_component_id: "net_alias_0",
+      ftype: "net_alias",
+    },
+  },
+  {
+    type: "source_port",
+    name: "gnd",
+    source_port_id: "source_port_0",
+  },
+  {
+    type: "schematic_port",
+    schematic_port_id: "schematic_port_0",
+    source_port_id: "source_port_0",
+    center: {
+      x: 2,
+      y: 2,
+    },
+    source: {
+      type: "source_port",
+      name: "gnd",
+      source_port_id: "source_port_0",
+    },
+  },
+  {
+    drawing_type: "line",
+    type: "schematic_line",
+    x1: 0,
+    y1: 1,
+    x2: 4,
+    y2: 1,
+    schematic_component_id: "schematic_net_alias_component_0",
+    source: null,
+  },
+  {
+    drawing_type: "line",
+    type: "schematic_line",
+    x1: 2,
+    y1: 1,
+    x2: 2,
+    y2: 2,
+    schematic_component_id: "schematic_net_alias_component_0",
+    source: null,
+  },
+  {
+    anchor: "center",
+    type: "schematic_text",
+    position: {
+      x: 2,
+      y: 0.75,
+    },
+    text: "gnd",
+    schematic_component_id: "schematic_net_alias_component_0",
+    source: null,
+  },
+]
+
+export const NetAliasSoup = () => {
+  return <Schematic style={{ height: 500 }} soup={soup} />
+}
+
+export default {
+  title: "NetAliasSoup",
+  component: NetAliasSoup,
+}