@tscircuit/schematic-viewer 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -31,7 +31,7 @@
     "@storybook/nextjs": "^7.0.26",
     "@storybook/react": "^7.0.26",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.2.11",
+    "@tscircuit/builder": "^1.2.12",
     "@tscircuit/react-fiber": "^1.0.4",
     "@types/node": "^18.6.0",
     "@types/react": "^18.0.15",
@@ -58,6 +58,6 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.4",
-    "use-mouse-matrix-transform": "^1.1.4"
+    "use-mouse-matrix-transform": "^1.1.5"
   }
 }

package/src/Schematic.tsx

@@ -56,17 +56,16 @@ export const Schematic = ({
       const { center, width, height } = findBoundsAndCenter(elements)
       setElements(elements)
       setProject(createProjectFromElements(elements))
-      console.log(elmBounds.width)
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
           // translate(100, 0),
           scale(100, 100, 0, 0),
-          translate(-center.x, -center.y),
-        ),
+          translate(-center.x, -center.y)
+        )
       )
     },
-    [setElements, setTransform],
+    [setElements, setTransform]
   )
 
   useEffect(() => {

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/SVGPathComponent.tsx

@@ -22,9 +22,9 @@ export const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {
     Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >
     0.01
   if (badRatio) {
-    console.warn(
-      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
-    )
+    // console.warn(
+    //   `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    // )
   }
   pathBounds.height = Math.max(pathBounds.height, 1)
   pathBounds.width = Math.max(pathBounds.width, 1)

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/SchematicBug.tsx

@@ -12,16 +12,21 @@ interface Props {
 }
 
 export const SchematicBug = ({ component: { source, schematic } }: Props) => {
-  const ports_arrangement = {
+  const port_arrangement = {
     top_size: 0,
     bottom_size: 0,
     ...schematic.port_arrangement,
   }
   // const port_labels = schematic.port_labels!
-  const bugw = schematic.size.width // bug width
-  const bugh = schematic.size.height
-  const { total_ports } = getPortArrangementSize(ports_arrangement)
-  // TODO throw if schematic.size doesn't match computed ports_arrangement size
+  let bugw = schematic.size.width // bug width
+  let bugh = schematic.size.height
+  const { total_ports, width, height } =
+    getPortArrangementSize(port_arrangement)
+
+  // TODO remove, this seems to be due to a builder bug
+  if (isNaN(bugw)) bugw = width
+  if (isNaN(bugh)) bugh = height
+  // TODO throw if schematic.size doesn't match computed port_arrangement size
 
   const paths = [
     {
@@ -32,7 +37,7 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
       } ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`,
     },
     ...range(1, total_ports + 1).map((portNum) => {
-      const pos = getPortPosition(ports_arrangement, portNum)
+      const pos = getPortPosition(port_arrangement, portNum)
 
       const x2 =
         pos.side === "left"

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/bug-connections.stories.tsx

@@ -0,0 +1,26 @@
+import { Schematic } from "Schematic"
+
+export const BugConnections = () => {
+  return (
+    <Schematic style={{ height: 600 }}>
+      <bug
+        name="B1"
+        port_arrangement={{
+          left_size: 3,
+          right_size: 2,
+        }}
+        sch_cx={8}
+        sch_cy={3}
+        port_labels={{
+          "1": "D0",
+          "2": "D1",
+        }}
+      />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "BugConnections",
+  component: BugConnections,
+}

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,
+}