@tscircuit/schematic-viewer 1.2.12 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -28,37 +28,42 @@
     "@semantic-release/github": "^9.0.3",
     "@semantic-release/npm": "^10.0.4",
     "@semantic-release/release-notes-generator": "^11.0.4",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/nextjs": "^7.4.0",
-    "@storybook/react": "^7.4.0",
+    "@storybook/nextjs": "^8.1.3",
+    "@storybook/react": "^8.1.3",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.5.100",
-    "@tscircuit/react-fiber": "^1.1.8",
+    "@tscircuit/builder": "^1.5.126",
+    "@tscircuit/react-fiber": "^1.1.29",
     "@tscircuit/routing": "^1.3.0",
+    "@tscircuit/soup": "^0.0.34",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
     "@types/react": "^18.0.15",
+    "@vitejs/plugin-react": "^4.3.0",
     "ava": "^4.3.1",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
-    "next": "^12.2.3",
+    "next": "^14.2.3",
     "parse-svg-path": "^0.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use-measure": "^2.1.1",
-    "rectilinear-router": "^1.0.1",
     "semantic-release": "^21.0.6",
-    "storybook": "^7.4.0",
+    "storybook": "^8.1.3",
     "svg-path-bounds": "^1.0.2",
     "svg-path-generator": "^1.1.0",
     "transformation-matrix": "^2.12.0",
     "tsup": "^6.7.0",
     "type-fest": "^2.17.0",
     "typescript": "^5.4.3",
+    "vite": "^5.2.11",
+    "vite-tsconfig-paths": "^4.3.2",
+    "zod": "^3.23.8",
     "zustand": "^4.0.0"
   },
   "dependencies": {
-    "@tscircuit/soup": "^0.0.16",
+    "@storybook/react-vite": "^8.1.3",
+    "@tscircuit/layout": "^0.0.17",
+    "@tscircuit/props": "^0.0.15",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

package/src/Schematic.tsx

@@ -18,6 +18,7 @@ import { identity, compose, scale, translate } from "transformation-matrix"
 import { useGlobalStore } from "lib/render-context"
 import useMeasure from "react-use-measure"
 import { TableViewer } from "./schematic-components/TableViewer"
+import { AnySoupElement } from "@tscircuit/soup"
 
 const ErrorBoundary = TypedErrorBoundary as any
 
@@ -40,11 +41,13 @@ export interface SchematicProps {
   /** @deprecated use soup */
   elements?: any
 
-  soup?: any
+  soup?: AnySoupElement[]
 
   style?: any
 
   showTable?: boolean
+
+  _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[]
 }
 
 export const Schematic = (props: SchematicProps) => {
@@ -61,6 +64,7 @@ export const SchematicWithoutContext = ({
   soup: initialSoup,
   style,
   showTable = false,
+  _soupPostProcessor,
 }: SchematicProps) => {
   initialSoup = initialSoup ?? initialElements ?? []
 
@@ -107,13 +111,16 @@ export const SchematicWithoutContext = ({
 
   useEffect(() => {
     if (initialSoup.length > 0) {
-      setElementsAndCamera(initialSoup)
+      setElementsAndCamera(initialSoup as any)
       return
     }
     const projectBuilder = createProjectBuilder()
     ;((createRoot ?? TscReactFiber.createRoot) as any)()
       .render(children, projectBuilder as any)
       .then(async (elements) => {
+        if (_soupPostProcessor) {
+          elements = _soupPostProcessor(elements)
+        }
         setElementsAndCamera(elements)
       })
       .catch((e) => {

package/src/lib/utils/get-rotation-from-anchor-side.ts

@@ -0,0 +1,11 @@
+import type { SchematicNetLabel } from "@tscircuit/soup"
+
+type AnchorSide = SchematicNetLabel["anchor_side"]
+
+export const getRotationFromAnchorSide = (anchor_side: AnchorSide) => {
+  if (anchor_side === "left") return 0
+  if (anchor_side === "top") return (Math.PI * 3) / 2
+  if (anchor_side === "right") return Math.PI
+  if (anchor_side === "bottom") return Math.PI / 2
+  return 0
+}

package/src/lib/utils/get-vec-from-anchor-side.ts

@@ -0,0 +1,11 @@
+import type { SchematicNetLabel } from "@tscircuit/soup"
+
+type AnchorSide = SchematicNetLabel["anchor_side"]
+
+export const getVecFromAnchorSide = (anchor_side: AnchorSide) => {
+  if (anchor_side === "left") return { x: -1, y: 0 }
+  if (anchor_side === "top") return { x: 0, y: -1 }
+  if (anchor_side === "right") return { x: 1, y: 0 }
+  if (anchor_side === "bottom") return { x: 0, y: 1 }
+  throw new Error(`invalid anchor side "${anchor_side}"`)
+}

package/src/schematic-components/DebugPoint.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { SVGPathComponent } from "./SVGPathComponent"
+
+export const DebugPoint = ({
+  center,
+}: {
+  center: { x: number; y: number }
+}) => {
+  return (
+    <SVGPathComponent
+      rotation={0}
+      center={center}
+      size={{ width: 0.02, height: 0.02 }}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          // d: "M -1 -1 l 1 1 M -1 1 l 1 -1",
+          //square
+          d: "M -1 -1 l 2 0 l 0 2 l -2 0 l 0 -2",
+        },
+      ]}
+    />
+  )
+}

package/src/schematic-components/SchematicBug.tsx

@@ -6,12 +6,13 @@ import {
   getPortArrangementSize,
   getPortIndices,
 } from "@tscircuit/builder"
+import type { SchematicComponent } from "@tscircuit/soup"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 
 interface Props {
   component: {
     source: Type.SimpleBug
-    schematic: Type.SchematicComponent
+    schematic: SchematicComponent
   }
 }
 
@@ -24,6 +25,7 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
   // const port_labels = schematic.port_labels!
   let bugw = schematic.size.width // bug width
   let bugh = schematic.size.height
+
   const { total_ports, width, height } =
     getPortArrangementSize(port_arrangement)
   const port_indices = getPortIndices(port_arrangement)
@@ -42,20 +44,24 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
       } ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`,
     },
     ...port_indices.map((portNum) => {
-      const pos = getPortPosition(port_arrangement, portNum)
+      // TODO get the ports passed to the components and use those positions
+      const pos = getPortPosition(
+        { ...port_arrangement, pin_spacing: schematic.pin_spacing },
+        portNum,
+      )
 
       const x2 =
         pos.side === "left"
           ? -bugw / 2
           : pos.side === "right"
-          ? bugw / 2
-          : pos.x
+            ? bugw / 2
+            : pos.x
       const y2 =
         pos.side === "top"
           ? bugh / 2
           : pos.side === "bottom"
-          ? -bugh / 2
-          : pos.y
+            ? -bugh / 2
+            : pos.y
 
       return {
         stroke: "red",

package/src/schematic-components/SchematicNetLabel.tsx

@@ -1,40 +1,53 @@
 import type { SchematicNetLabel as SchematicNetLabelObject } from "@tscircuit/soup"
 import SVGPathComponent from "./SVGPathComponent"
 import SchematicText from "./SchematicText"
+import { getRotationFromAnchorSide } from "lib/utils/get-rotation-from-anchor-side"
+import { getVecFromAnchorSide } from "lib/utils/get-vec-from-anchor-side"
 
 export const SchematicNetLabel = ({
   net_label,
 }: {
   net_label: SchematicNetLabelObject
 }) => {
-  console.log({ net_label })
-  const text_width = net_label.text.length * 0.15
+  const anchor_side = net_label.anchor_side
+  const is_vertical = anchor_side === "top" || anchor_side === "bottom"
+  const text_width = is_vertical ? 0.3 : net_label.text.length * 0.15
   // TODO add text
   const path_width = 31 + net_label.text.length * 5
+
+  const anchor_vec = getVecFromAnchorSide(anchor_side)
+  // const anchor_dist = 0 // text_width / 4 - 0.025
+  const anchor_dist = is_vertical ? 0.04 : text_width / 4 // - 0.025
+  anchor_vec.x *= anchor_dist
+  anchor_vec.y *= anchor_dist
+
   return (
     <>
       <SVGPathComponent
-        rotation={0}
+        rotation={getRotationFromAnchorSide(anchor_side)}
         center={net_label.center}
         // fixed size?
         size={{
           width: 0.05 + text_width,
-          height: 0.175,
+          height:
+            0.2 +
+            (is_vertical ? 0.1 * Math.max(1, net_label.text.length - 2) : 0),
         }}
         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`,
+            // d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`,
+            d: `M 0 15 L 5 15 L 11 5 L ${path_width} 5 L ${path_width} 26 L 11 26 L 5 15`,
           },
         ]}
       />
       <SchematicText
         schematic_text={{
-          anchor: "left",
+          anchor: is_vertical ? "center" : anchor_side,
           position: {
-            x: net_label.center.x - text_width / 4 + 0.025,
-            y: net_label.center.y,
+            x: net_label.center.x + anchor_vec.x,
+            y: net_label.center.y + anchor_vec.y,
           },
           schematic_component_id: "SYNTHETIC",
           schematic_text_id: "SYNTHETIC",

package/src/stories/basics/schematic-net-labels-2.stories.tsx

@@ -0,0 +1,33 @@
+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" />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Basics/SchematicNetLabel2",
+  component: SchematicNetLabel2,
+}

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

@@ -3,12 +3,13 @@ import { Schematic } from "Schematic"
 const OneSidedBugExample = () => (
   <bug
     name="U2"
-    port_arrangement={{
-      left_size: 0,
-      right_size: 4,
+    schPortArrangement={{
+      leftSize: 0,
+      rightSize: 4,
     }}
-    center={[-10, 0]}
-    port_labels={{
+    schX={-10}
+    schY={0}
+    pinLabels={{
       "1": "GND",
       "2": "VBUS",
       "3": "D-",

package/src/stories/bug-pin-spacing.stories.tsx

@@ -0,0 +1,49 @@
+import { Schematic } from "Schematic"
+
+const BugPinSpacingExample = () => (
+  <bug
+    name="U2"
+    schPortArrangement={{
+      leftSize: 2,
+      rightSize: 2,
+    }}
+    schX={-10}
+    schY={0}
+    schPinSpacing="1.5mm"
+    pinLabels={{
+      "1": "GND",
+      "2": "VBUS",
+      "3": "D-",
+      "4": "D+",
+    }}
+  />
+)
+
+export const BugPinSpacing = () => {
+  return (
+    <Schematic
+      style={{ height: 600 }}
+      _soupPostProcessor={(soup) => {
+        return soup.map((elm) => {
+          if (elm.type === "schematic_component") {
+            // return {
+            //   ...elm,
+            //   size: { width: 3, height: 3 },
+            //   pin_spacing: 1.5,
+            // }
+            console.log(elm)
+            return elm
+          }
+          return elm
+        })
+      }}
+    >
+      <BugPinSpacingExample />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "BugPinSpacing",
+  component: BugPinSpacing,
+}

package/src/stories/bugs/bug8-autolayout.stories.tsx

@@ -0,0 +1,52 @@
+import { Schematic } from "../../Schematic"
+import { layout } from "@tscircuit/layout"
+import { useBug, useResistor, useCapacitor } from "@tscircuit/react-fiber"
+
+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}
+          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} />
+        </board>
+      </Schematic>
+    </div>
+  )
+}
+
+export default {
+  title: "Bugs/Bug8Autolayout",
+  component: Bug8Autolayout,
+}

package/src/stories/circuit-components/netalias.stories.tsx

@@ -0,0 +1,14 @@
+import { Schematic } from "../../Schematic"
+
+export const NetAlias = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <netalias net="GND" />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Circuit Components/NetAlias",
+  component: NetAlias,
+}

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default {
+  plugins: [react(), tsconfigPaths()]
+}