@tscircuit/schematic-viewer 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -32,7 +32,7 @@
     "@storybook/nextjs": "^7.4.0",
     "@storybook/react": "^7.4.0",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.3.2",
+    "@tscircuit/builder": "^1.5.5",
     "@tscircuit/react-fiber": "^1.0.6",
     "@tscircuit/routing": "^1.3.0",
     "@tscircuit/table-viewer": "^0.0.6",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.4",
-    "react-supergrid": "^1.0.7",
+    "react-supergrid": "^1.0.8",
     "use-mouse-matrix-transform": "^1.1.9"
   }
 }

package/src/Schematic.tsx

@@ -16,7 +16,7 @@ import { ErrorBoundary } from "react-error-boundary"
 import { identity, compose, scale, translate } from "transformation-matrix"
 import { useRenderContext } from "lib/render-context"
 import useMeasure from "react-use-measure"
-import { SoupTableViewer } from "@tscircuit/table-viewer"
+import { TableViewer } from "./schematic-components/TableViewer"
 
 const fallbackRender =
   (elm) =>
@@ -146,9 +146,7 @@ export const Schematic = ({
           </ErrorBoundary>
         ))}
       </div>
-      {showTable !== false && elements && (
-        <SoupTableViewer elements={elements} />
-      )}
+      {showTable !== false && elements && <TableViewer elements={elements} />}
     </>
   )
 }

package/src/schematic-components/SchematicBug.tsx

@@ -1,7 +1,11 @@
 import * as Type from "lib/types"
 import SVGPathComponent from "./SVGPathComponent"
 import range from "lodash/range"
-import { getPortPosition, getPortArrangementSize } from "@tscircuit/builder"
+import {
+  getPortPosition,
+  getPortArrangementSize,
+  getPortIndices,
+} from "@tscircuit/builder"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 
 interface Props {
@@ -22,6 +26,7 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
   let bugh = schematic.size.height
   const { total_ports, width, height } =
     getPortArrangementSize(port_arrangement)
+  const port_indices = getPortIndices(port_arrangement)
 
   // TODO remove, this seems to be due to a builder bug
   if (isNaN(bugw)) bugw = width
@@ -36,7 +41,7 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
         bugw / 2
       } ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`,
     },
-    ...range(1, total_ports + 1).map((portNum) => {
+    ...port_indices.map((portNum) => {
       const pos = getPortPosition(port_arrangement, portNum)
 
       const x2 =

package/src/schematic-components/TableViewer.tsx

@@ -0,0 +1,13 @@
+import { lazy, Suspense } from "react"
+
+const LazyTableViewer = lazy(() =>
+  import("@tscircuit/table-viewer").then((m) => ({
+    default: m.SoupTableViewer,
+  }))
+)
+
+export const TableViewer = (params: Parameters<typeof LazyTableViewer>[0]) => (
+  <Suspense fallback={<div>Loading...</div>}>
+    <LazyTableViewer {...params} />
+  </Suspense>
+)

package/src/stories/bug-high-port-numbers.stories.tsx

@@ -0,0 +1,100 @@
+import { Schematic } from "Schematic"
+
+export const FTDIBasic3v3 = () => (
+  <group>
+    <bug
+      name="U1"
+      port_arrangement={{
+        left_side: {
+          pins: [16, 15, 20, 17, 4, 27, 28, 19, 26, 25, 7, 18, 21],
+          direction: "top-to-bottom",
+        },
+        right_side: {
+          pins: [1, 5, 11, 3, 2, 9, 10, 6, 23, 22, 14, 13, 12],
+          direction: "top-to-bottom",
+        },
+      }}
+      footprint="ssop28Db"
+      port_labels={{
+        "1": "TXD",
+        "5": "RXD",
+        "11": "CTS",
+        "3": "RTS",
+        "2": "DTR",
+        "9": "DSR",
+        "10": "DCD",
+        "6": "RI",
+        "23": "TXLED",
+        "22": "RXLED",
+        "14": "PWRUN",
+        "13": "TXDEN",
+        "12": "SLEEP",
+        "16": "USBDM",
+        "15": "USBDP",
+        "20": "VCC",
+        "17": "3V3OUT",
+        "4": "VCCIO",
+        "27": "OSCI",
+        "28": "OSCO",
+        "19": "RESET",
+        "26": "TEST",
+        "25": "AGND",
+        "7": "GND7",
+        "18": "GND18",
+        "21": "GND21",
+      }}
+    />
+    <resistor
+      resistance="1kohm"
+      name="R1"
+      footprint="0805"
+      center={[3, 0]}
+      rotation="90deg"
+    />
+    <resistor
+      resistance="1kohm"
+      name="R2"
+      footprint="0805"
+      center={[4.5, 0]}
+      rotation="90deg"
+    />
+    <diode name="LED1" footprint="0805" rotation="90deg" center={[3, 2]} />
+    <diode name="LED2" footprint="0805" rotation="90deg" center={[4.5, 2]} />
+    <netalias net="5V" center={[3, -2]} />
+    <netalias net="5V" center={[4.5, -2]} />
+    <trace path={[".5V", ".R2 > port.left"]} />
+    <trace path={[".5V", ".R1 > port.left"]} />
+    <trace path={[".R1 > port.right", ".LED1 > port.left"]} />
+    <trace path={[".R2 > port.right", ".LED2 > port.left"]} />
+    <trace path={[".LED1 > port.right", ".U1 > .TXLED"]} />
+    <trace path={[".LED2 > port.right", ".U1 > .RXLED"]} />
+    <netalias net="GND" center={[-3, 4]} rotation="180deg" />
+    <netalias net="GND" center={[-5, 3]} rotation="180deg" />
+    <netalias net="GND" center={[-6, 3]} rotation="180deg" />
+    <netalias net="GND" center={[-7, 3]} rotation="180deg" />
+    <netalias net="GND" center={[-8, 2]} rotation="180deg" />
+    {/* <component>
+      <schematicbox
+        name="USB"
+        center={[-9, 0]}
+        type="schematic_box"
+        drawing_type="box"
+        width={2}
+        height={2}
+      />
+    </component> */}
+  </group>
+)
+
+export const BugHighPortNumbers = () => {
+  return (
+    <Schematic style={{ height: 600 }}>
+      <FTDIBasic3v3 />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "BugHighPortNumbers",
+  component: BugHighPortNumbers,
+}