@tscircuit/schematic-viewer 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -15,6 +15,7 @@
   "peerDependencies": {
     "@tscircuit/builder": "*",
     "@tscircuit/react-fiber": "*",
+    "@tscircuit/table-viewer": "*",
     "react": "*"
   },
   "devDependencies": {
@@ -28,11 +29,13 @@
     "@semantic-release/npm": "^10.0.4",
     "@semantic-release/release-notes-generator": "^11.0.4",
     "@storybook/blocks": "^7.0.26",
-    "@storybook/nextjs": "^7.0.26",
-    "@storybook/react": "^7.0.26",
+    "@storybook/nextjs": "^7.4.0",
+    "@storybook/react": "^7.4.0",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.2.17",
-    "@tscircuit/react-fiber": "^1.0.4",
+    "@tscircuit/builder": "^1.3.2",
+    "@tscircuit/react-fiber": "^1.0.6",
+    "@tscircuit/routing": "^1.3.0",
+    "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
     "@types/react": "^18.0.15",
     "ava": "^4.3.1",
@@ -47,7 +50,7 @@
     "react-use-measure": "^2.1.1",
     "rectilinear-router": "^1.0.1",
     "semantic-release": "^21.0.6",
-    "storybook": "^7.0.26",
+    "storybook": "^7.4.0",
     "svg-path-bounds": "^1.0.2",
     "svg-path-generator": "^1.1.0",
     "transformation-matrix": "^2.12.0",

package/src/Schematic.tsx

@@ -15,6 +15,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"
 
 const fallbackRender =
   (elm) =>
@@ -93,39 +94,42 @@ export const Schematic = ({
   }, [children])
 
   return (
-    <div
-      style={{
-        width: "100%",
-        backgroundColor: "rgba(255,255,255,0)",
-        minHeight: 200,
-        overflow: "hidden",
-        position: "relative",
-        cursor: "grab",
-        ...style,
-      }}
-      ref={(el) => {
-        ref.current = el
-        boundsRef(el)
-      }}
-    >
-      <SuperGrid
-        stringifyCoord={(x, y, z) => {
-          if (z === 0) return ""
-          return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`
+    <>
+      <div
+        style={{
+          width: "100%",
+          backgroundColor: "rgba(255,255,255,0)",
+          minHeight: 200,
+          overflow: "hidden",
+          position: "relative",
+          cursor: "grab",
+          ...style,
         }}
-        width={bounds.width}
-        height={bounds.height}
-        transform={cameraTransform}
-      />
-      {elements?.map((elm, i) => (
-        <ErrorBoundary key={i} fallbackRender={fallbackRender(elm)}>
-          <SchematicElement
-            element={elm}
-            allElements={elements}
-            key={JSON.stringify(elm)}
-          />
-        </ErrorBoundary>
-      ))}
-    </div>
+        ref={(el) => {
+          ref.current = el
+          boundsRef(el)
+        }}
+      >
+        <SuperGrid
+          stringifyCoord={(x, y, z) => {
+            if (z === 0) return ""
+            return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`
+          }}
+          width={bounds.width}
+          height={bounds.height}
+          transform={cameraTransform}
+        />
+        {elements?.map((elm, i) => (
+          <ErrorBoundary key={i} fallbackRender={fallbackRender(elm)}>
+            <SchematicElement
+              element={elm}
+              allElements={elements}
+              key={JSON.stringify(elm)}
+            />
+          </ErrorBoundary>
+        ))}
+      </div>
+      {elements && <SoupTableViewer elements={elements} />}
+    </>
   )
 }

package/src/schematic-components/SchematicComponent.tsx

@@ -9,6 +9,10 @@ interface Props {
   }
 }
 
+/**
+ * @deprecated ftype-style rendering is being deprecated in favor of the builder
+ * generating schematic lines directly
+ */
 export const SchematicComponent = ({ component }: Props) => {
   const { source, schematic } = component
   switch (source.ftype) {
@@ -31,7 +35,9 @@ export const SchematicComponent = ({ component }: Props) => {
       return <Component.SchematicBug component={{ source, schematic }} />
     }
     case "simple_diode": {
-      return <Component.SimpleDiode component={{ source, schematic }} />
+      // Replaced by builder
+      return null
+      // return <Component.SimpleDiode component={{ source, schematic }} />
     }
     default: {
       return <div>unknown ftype: {component.source.ftype}</div>

package/src/schematic-components/SchematicElement.tsx

@@ -6,6 +6,7 @@ import SchematicText from "./SchematicText"
 import SchematicBox from "./SchematicBox"
 import SchematicTrace from "./SchematicTrace"
 import SchematicLine from "./SchematicLine"
+import RenderError from "./RenderError"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -55,5 +56,10 @@ export const SchematicElement = ({
     return <SchematicText schematic_text={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} />
+  }
+
   return null
 }

package/src/stories/led-circuit-react.stories.tsx

@@ -39,13 +39,15 @@ export const LEDCircuitReact = () => {
       />
       <trace path={[".B1 > port.PWR", ".R2 > port.left"]} />
       <ground name="GND" center={[11, 3]} />
-      {/* <trace path={[".B1 > port.GND", ".GND"]} /> */}
-      {/* <trace from=".B1 > port.GND" to=".GND" /> */}
+      <trace path={[".B1 > port.GND", ".GND > .gnd"]} />
+      {/* <trace from=".B1 > port.GND" to=".GND > .gnd" /> */}
       <diode name="D1" center={[6, 3.5]} rotation="180deg" />
       <trace path={[".D1 > port.right", ".C1 > .right"]} />
       <trace path={[".D1 > port.left", ".B1 > .RG"]} />
-      {/* <trace from=".D1 > .left" to=".B1 > .RG" />
-      <trace from=".D1 > .right" to=".C1> .right" /> */}
+      {/* <trace from=".D1 > .left" to=".B1 > .RG" /> */}
+      {/* <trace from=".D1 > .right" to=".C1> .right" /> */}
+      <netalias center={["10mm", "1.5mm"]} net="D0BUS" />
+      <trace path={[".B1 > .D0", ".D0BUS"]} />
     </Schematic>
   )
 }