@tscircuit/schematic-viewer 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -33,7 +33,7 @@
     "@storybook/react": "^7.4.0",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@tscircuit/builder": "^1.5.89",
-    "@tscircuit/react-fiber": "^1.1.6",
+    "@tscircuit/react-fiber": "^1.1.8",
     "@tscircuit/routing": "^1.3.0",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
@@ -58,7 +58,7 @@
     "zustand": "^4.0.0"
   },
   "dependencies": {
-    "@tscircuit/soup": "^0.0.7",
+    "@tscircuit/soup": "^0.0.16",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",

package/src/Schematic.tsx

@@ -43,7 +43,7 @@ export const Schematic = ({
 }: {
   children?: any
 
-  /** @deprecated */
+  /** @deprecated use soup */
   elements?: any
 
   soup?: any
@@ -82,6 +82,7 @@ export const Schematic = ({
         (elmBounds.height ?? 0) / height,
         100
       )
+      // console.log(elements)
       setElements(elements)
       setProject(createProjectFromElements(elements))
       setTransform(

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

@@ -1,6 +1,9 @@
-import { AnyElement, SourcePort } from "@tscircuit/builder"
+import { AnySoupElement, SourcePort } from "@tscircuit/soup"
 
-export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
+export const collectElementRefs = (
+  elm: AnySoupElement,
+  allElms: AnySoupElement[]
+) => {
   const source_port = allElms.find(
     (e) =>
       e.type === "source_port" &&

package/src/lib/utils/direction-to-vec.ts

@@ -3,7 +3,7 @@ export const directionToVec = (direction: "up" | "down" | "left" | "right") => {
   else if (direction === "down") return { x: 0, y: -1 }
   else if (direction === "left") return { x: -1, y: 0 }
   else if (direction === "right") return { x: 1, y: 0 }
-  else throw new Error("Invalid direction")
+  else throw new Error(`Invalid direction "${direction}"`)
 }
 
 export const vecToDirection = ({ x, y }: { x: number; y: number }) => {

package/src/schematic-components/SVGPathComponent.tsx

@@ -50,31 +50,63 @@ export const SVGPathComponent = ({
   }
   // pathBounds.height = Math.max(pathBounds.height, 0.01)
   // pathBounds.width = Math.max(pathBounds.width, 0.01)
+
+  // Three sizes:
+  // pathBound size (the size of the path in "d")
+  // innerSize (the screen-space size of the path)
+  // fullSize (the screen-space size of the svg element, innerSize plus padding)
+
+  const padding = {
+    x: 0,
+    y: 0,
+  }
+
   const absoluteCenter = applyToPoint(ct, center)
-  const actualAbsWidth = size.width * ct.a
-  const actualAbsHeight = size.height * Math.abs(ct.d)
-  const absoluteSize = {
-    width: Math.max(1, actualAbsWidth),
-    height: Math.max(1, actualAbsHeight),
+
+  const innerSize = {
+    width: size.width * ct.a,
+    height: size.height * Math.abs(ct.d),
+  }
+
+  const fullSize = {
+    width: innerSize.width + padding.x * 2,
+    height: innerSize.height + padding.y * 2,
   }
 
   const [hovering, setHovering] = useState(false)
 
-  const svgLeft = absoluteCenter.x - absoluteSize.width / 2
-  const svgTop = absoluteCenter.y - absoluteSize.height / 2
+  const svgLeft = absoluteCenter.x - fullSize.width / 2
+  const svgTop = absoluteCenter.y - fullSize.height / 2
 
-  const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`
+  // const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`
   // const viewBox2 = `${svgLeft} ${svgTctualAbsWidth} ${actualAbsHeight}`
 
+  // console.log(
+  //   pathBounds,
+  //   fullSize,
+  //   fullSize.width / pathBounds.width,
+  //   fullSize.height / pathBounds.height
+  // )
+  const preferredRatio =
+    pathBounds.width === 0
+      ? innerSize.height / pathBounds.height
+      : innerSize.width / pathBounds.width
   const svgToScreen = compose(
     // translate(0, 0)
     scale(
-      actualAbsWidth / pathBounds.width,
-      actualAbsHeight / pathBounds.height
+      pathBounds.width === 0
+        ? preferredRatio
+        : fullSize.width / pathBounds.width,
+      pathBounds.height === 0
+        ? preferredRatio
+        : fullSize.height / pathBounds.height
     ),
     translate(-pathBounds.minX, -pathBounds.minY)
     // translate(center.x, center.y)
   )
+  // console.log(svgToScreen)
+  // console.log(toSVG(svgToScreen))
+  // console.log(paths[0].d)
   // translate(..., ...),
 
   return (
@@ -87,8 +119,8 @@ export const SVGPathComponent = ({
               left: svgLeft - 6,
               top: svgTop - 6,
               pointerEvents: "none",
-              width: actualAbsWidth + 12,
-              height: actualAbsHeight + 12,
+              width: fullSize.width + 12,
+              height: fullSize.height + 12,
               border: "1px red solid",
               mixBlendMode: "difference",
               zIndex: 1000,
@@ -97,7 +129,7 @@ export const SVGPathComponent = ({
           <div
             style={{
               position: "absolute",
-              left: svgLeft + actualAbsWidth + 10,
+              left: svgLeft + fullSize.width + 10,
               pointerEvents: "none",
               zIndex: 1000,
               color: "red",
@@ -131,18 +163,15 @@ export const SVGPathComponent = ({
           // backgroundColor: "rgba(255, 0, 0, 0.1)",
         }}
         overflow="visible"
-        width={absoluteSize.width}
-        height={absoluteSize.height}
+        width={fullSize.width}
+        height={fullSize.height}
       >
         {paths.map((p, i) => (
           <path
             key={i}
-            // transform={toSVG(inverse(ct))}
-            // transform={`scale(${ct.a}, ${ct.a})`}
             transform={toSVG(svgToScreen)}
             fill={p.fill ?? "none"}
             strokeLinecap="round"
-            // strokeWidth={2 * (p.strokeWidth || 1)}
             strokeWidth={1.5 * (p.strokeWidth || 1)}
             stroke={p.stroke || "red"}
             d={p.d}

package/src/schematic-components/SVGPathComponent2.tsx

@@ -0,0 +1,76 @@
+import { useCameraTransform } from "lib/render-context"
+import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
+import { useCallback, useState } from "react"
+
+import {
+  applyToPoint,
+  toSVG,
+  inverse,
+  compose,
+  translate,
+  scale,
+} from "transformation-matrix"
+
+interface Props {
+  rotation: number
+  center: { x: number; y: number }
+  size: { width: number; height: number }
+  invertY?: boolean
+  shiftToBottom?: boolean
+  paths: Array<{
+    strokeWidth: number
+    stroke: string
+    fill?: string
+    d: string
+  }>
+  zIndex?: number
+  hoverContent?: any
+}
+
+export const SVGPathComponent2 = ({
+  size,
+  center,
+  rotation,
+  paths,
+  zIndex,
+  invertY,
+  shiftToBottom,
+  hoverContent,
+}: Props) => {
+  const ct = useCameraTransform()
+  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
+  // Margin in SVG Space
+
+  return (
+    <svg
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
+        pointerEvents: "none",
+        zIndex,
+        // overflow: "hidden",
+        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
+        // backgroundColor: "rgba(255, 0, 0, 0.1)",
+      }}
+      overflow="visible"
+    >
+      {paths.map((p, i) => (
+        <path
+          key={i}
+          transform={toSVG(ct)}
+          fill={p.fill ?? "none"}
+          strokeLinecap="round"
+          strokeWidth={1.5 * (p.strokeWidth || 1)}
+          stroke={p.stroke || "red"}
+          d={p.d}
+        />
+      ))}
+    </svg>
+  )
+}
+
+export default SVGPathComponent2

package/src/schematic-components/SchematicElement.tsx

@@ -1,4 +1,4 @@
-import { AnyElement } from "@tscircuit/builder"
+import { AnySoupElement } from "@tscircuit/soup"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicComponent from "./SchematicComponent"
 import SchematicPort from "./SchematicPort"
@@ -8,6 +8,7 @@ import SchematicTrace from "./SchematicTrace"
 import SchematicLine from "./SchematicLine"
 import RenderError from "./RenderError"
 import SchematicPath from "./SchematicPath"
+import { SchematicNetLabel } from "./SchematicNetLabel"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -16,8 +17,8 @@ export const SchematicElement = ({
   element,
   allElements,
 }: {
-  element: AnyElement
-  allElements: AnyElement[]
+  element: AnySoupElement
+  allElements: AnySoupElement[]
 }) => {
   // A lot of the split logic for element types into a project is here:
   // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13
@@ -63,6 +64,10 @@ export const SchematicElement = ({
     return <SchematicText schematic_text={element} />
   }
 
+  if (element.type === "schematic_net_label") {
+    return <SchematicNetLabel net_label={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} />

package/src/schematic-components/SchematicLine.tsx

@@ -22,8 +22,8 @@ export const SchematicLine = ({ line: { schematic } }: Props) => {
   path.lineTo(x2, y2)
   const d = path.toString()
   const pathBounds = getSVGPathBounds(d)
-  pathBounds.height = Math.max(pathBounds.height, 1)
-  pathBounds.width = Math.max(pathBounds.width, 1)
+  // pathBounds.height = Math.max(pathBounds.height, 1)
+  // pathBounds.width = Math.max(pathBounds.width, 1)
   const center = {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2,

package/src/schematic-components/SchematicNetLabel.tsx

@@ -0,0 +1,47 @@
+import type { SchematicNetLabel as SchematicNetLabelObject } from "@tscircuit/soup"
+import SVGPathComponent from "./SVGPathComponent"
+import SchematicText from "./SchematicText"
+
+export const SchematicNetLabel = ({
+  net_label,
+}: {
+  net_label: SchematicNetLabelObject
+}) => {
+  console.log({ net_label })
+  const text_width = net_label.text.length * 0.15
+  // TODO add text
+  const path_width = 31 + net_label.text.length * 5
+  return (
+    <>
+      <SVGPathComponent
+        rotation={0}
+        center={net_label.center}
+        // fixed size?
+        size={{
+          width: 0.05 + text_width,
+          height: 0.175,
+        }}
+        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`,
+          },
+        ]}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "left",
+          position: {
+            x: net_label.center.x - text_width / 4 + 0.025,
+            y: net_label.center.y,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: net_label.text,
+          type: "schematic_text",
+        }}
+      />
+    </>
+  )
+}

package/src/schematic-components/SchematicTrace.tsx

@@ -3,6 +3,7 @@ import SVGPathComponent from "./SVGPathComponent"
 import Path from "svg-path-generator"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 import RenderError from "./RenderError"
+import SVGPathComponent2 from "./SVGPathComponent2"
 
 interface Props {
   trace: {
@@ -32,7 +33,7 @@ export const SchematicTrace = ({ trace: { source, schematic } }: Props) => {
     y: pathBounds.minY + pathBounds.height / 2,
   }
   return (
-    <SVGPathComponent
+    <SVGPathComponent2
       rotation={0}
       center={center}
       size={pathBounds}

package/src/schematic-components/SimplePowerSource.tsx

@@ -23,6 +23,18 @@ export const SimplePowerSource = ({
           strokeWidth: 1,
           d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3",
         },
+        // positive symbol
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          d: "M 8 -9 L 8 -6 M 9.5 -7.5 L 6.5 -7.5",
+        },
+        // negative symbol
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          d: "M 9.5 7.5 L 6.5 7.5",
+        },
       ]}
     />
   )

package/src/stories/basics/schematic-net-label.stories.tsx

@@ -0,0 +1,171 @@
+import { Schematic } from "../../Schematic"
+
+export const SchematicNetLabel = () => {
+  return (
+    <Schematic
+      style={{ height: 500 }}
+      soup={
+        {
+          elements: [
+            {
+              type: "source_component",
+              source_component_id: "simple_resistor_0",
+              name: "R1",
+              supplier_part_numbers: {},
+              ftype: "simple_resistor",
+              resistance: 100,
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "schematic_component",
+              source_component_id: "simple_resistor_0",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              rotation: 0,
+              size: {
+                width: 1,
+                height: 0.3,
+              },
+              center: {
+                x: 0,
+                y: 0,
+              },
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "source_port",
+              name: "left",
+              source_port_id: "source_port_0",
+              source_component_id: "simple_resistor_0",
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "schematic_port",
+              schematic_port_id: "schematic_port_0",
+              source_port_id: "source_port_0",
+              center: {
+                x: -0.5,
+                y: 0,
+              },
+              facing_direction: "left",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              source: {
+                type: "source_port",
+                name: "left",
+                source_port_id: "source_port_0",
+                source_component_id: "simple_resistor_0",
+              },
+            },
+            {
+              type: "source_port",
+              name: "right",
+              source_port_id: "source_port_1",
+              source_component_id: "simple_resistor_0",
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "schematic_port",
+              schematic_port_id: "schematic_port_1",
+              source_port_id: "source_port_1",
+              center: {
+                x: 0.5,
+                y: 0,
+              },
+              facing_direction: "right",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              source: {
+                type: "source_port",
+                name: "right",
+                source_port_id: "source_port_1",
+                source_component_id: "simple_resistor_0",
+              },
+            },
+            {
+              type: "schematic_text",
+              text: "R1",
+              schematic_text_id: "schematic_text_0",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              anchor: "left",
+              position: {
+                x: -0.2,
+                y: -0.5,
+              },
+              rotation: 0,
+              source: null,
+            },
+            {
+              type: "schematic_text",
+              text: 100,
+              schematic_text_id: "schematic_text_1",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              anchor: "left",
+              position: {
+                x: -0.2,
+                y: -0.3,
+              },
+              rotation: 0,
+              source: null,
+            },
+            {
+              type: "source_net",
+              member_source_group_ids: [],
+              source_net_id: "net_0",
+              name: "GND",
+              source: null,
+            },
+            {
+              type: "source_trace",
+              connected_source_port_ids: ["source_port_1"],
+              connected_source_net_ids: ["net_0"],
+              source_trace_id: "source_trace_0",
+              source: null,
+            },
+            {
+              type: "schematic_net_label",
+              source_net_id: "net_0",
+              text: "GND",
+              anchor_side: "left",
+              center: {
+                x: 1.5,
+                y: 0,
+              },
+              source: null,
+            },
+          ],
+        }.elements
+      }
+    />
+  )
+}
+
+export default {
+  title: "Basics/SchematicNetLabel",
+  component: SchematicNetLabel,
+}

package/src/stories/bugs/bug4-schematic-line.stories.tsx

@@ -0,0 +1,18 @@
+import { useResistor } from "@tscircuit/react-fiber"
+import { Schematic } from "../../Schematic"
+
+export const Bug4SchematicLine = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      {/* <resistor name="R1" resistance="10" schX={2} schY={1} /> */}
+      <component name="K1" schX={0} schY={0}>
+        <schematicline x1={0} y1={0} x2={0} y2={2} />
+      </component>
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Bugs/Bug4SchematicLine",
+  component: Bug4SchematicLine,
+}

package/src/stories/bugs/bug5-diode.stories.tsx

@@ -0,0 +1,15 @@
+import { useResistor } from "@tscircuit/react-fiber"
+import { Schematic } from "../../Schematic"
+
+export const Bug5SchematicLine = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <diode name="D1" />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Bugs/Bug5SchematicLine",
+  component: Bug5SchematicLine,
+}

package/src/stories/bugs/bug6-trace-scaling.stories.tsx

@@ -0,0 +1,54 @@
+import { Schematic } from "../../Schematic"
+
+export const Bug6TraceScaling = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
+      {/* <powersource voltage="5V" schX={1} schY={2} name="main_power" /> */}
+      <resistor resistance="1k" schX={1} schY={2} name="main_power" />
+      {/* <trace path={[".main_power > port.negative", ".R1 > port.left"]} /> */}
+      <trace path={[".main_power > port.right", ".R1 > port.left"]} />
+    </Schematic>
+    // <Schematic
+    //   style={{ height: 500 }}
+    //   soup={[
+    //     {
+    //       type: "source_trace",
+    //       source_trace_id: "source_trace_0",
+    //     },
+    //     {
+    //       type: "schematic_trace",
+    //       source_trace_id: "source_trace_0",
+    //       schematic_trace_id: "schematic_trace_0",
+    //       edges: [
+    //         {
+    //           from: {
+    //             x: 1,
+    //             y: 1.4000000000000001,
+    //           },
+    //           to: {
+    //             x: 1,
+    //             y: 1,
+    //           },
+    //         },
+    //         {
+    //           from: {
+    //             x: 1,
+    //             y: 1,
+    //           },
+    //           to: {
+    //             x: 1.4000000000000001,
+    //             y: 1,
+    //           },
+    //         },
+    //       ],
+    //     },
+    //   ]}
+    // />
+  )
+}
+
+export default {
+  title: "Bugs/Bug6TraceScaling",
+  component: Bug6TraceScaling,
+}