@tscircuit/schematic-viewer 1.2.6 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -32,8 +32,8 @@
     "@storybook/nextjs": "^7.4.0",
     "@storybook/react": "^7.4.0",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.5.88",
-    "@tscircuit/react-fiber": "^1.1.1",
+    "@tscircuit/builder": "^1.5.89",
+    "@tscircuit/react-fiber": "^1.1.8",
     "@tscircuit/routing": "^1.3.0",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
@@ -58,6 +58,8 @@
     "zustand": "^4.0.0"
   },
   "dependencies": {
+    "@tscircuit/soup": "^0.0.7",
+    "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",
     "use-mouse-matrix-transform": "^1.1.12"

package/src/Schematic.tsx

@@ -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/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

@@ -2,7 +2,14 @@ import { useCameraTransform } from "lib/render-context"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 import { useCallback, useState } from "react"
 
-import { applyToPoint } from "transformation-matrix"
+import {
+  applyToPoint,
+  toSVG,
+  inverse,
+  compose,
+  translate,
+  scale,
+} from "transformation-matrix"
 
 interface Props {
   rotation: number
@@ -41,23 +48,66 @@ export const SVGPathComponent = ({
     //   `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
     // )
   }
-  pathBounds.height = Math.max(pathBounds.height, 0.01)
-  pathBounds.width = Math.max(pathBounds.width, 0.01)
+  // 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,
   }
-  console.log(absoluteSize, pathBounds)
 
   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(
+      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 (
     <>
@@ -66,11 +116,11 @@ export const SVGPathComponent = ({
           <div
             style={{
               position: "absolute",
-              left: svgLeft - 4,
-              top: svgTop - 4,
+              left: svgLeft - 6,
+              top: svgTop - 6,
               pointerEvents: "none",
-              width: actualAbsWidth + 8,
-              height: actualAbsHeight + 8,
+              width: fullSize.width + 12,
+              height: fullSize.height + 12,
               border: "1px red solid",
               mixBlendMode: "difference",
               zIndex: 1000,
@@ -79,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",
@@ -108,19 +158,21 @@ export const SVGPathComponent = ({
           ].join(" "),
           left: svgLeft,
           top: svgTop,
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
+          // overflow: "hidden",
+          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
+          // backgroundColor: "rgba(255, 0, 0, 0.1)",
         }}
         overflow="visible"
-        width={absoluteSize.width}
-        height={absoluteSize.height}
-        viewBox={viewBox}
+        width={fullSize.width}
+        height={fullSize.height}
       >
         {paths.map((p, i) => (
           <path
             key={i}
+            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/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/SchematicPort.tsx

@@ -19,6 +19,7 @@ export const SchematicPort = ({
         source_port?.name ?? source_port?.pin_number
       }`
     : `.${source_port?.name ?? source_port?.pin_number}`
+  const vec = directionToVec(schematic.facing_direction)
   return (
     <Component.SVGPathComponent
       rotation={0}
@@ -36,7 +37,10 @@ export const SchematicPort = ({
         </div>
       }
       center={schematic.center}
-      size={{ width: 0.2, height: 0.2 }}
+      size={{
+        width: 0.2 + Math.abs(vec.x) * 0.04,
+        height: 0.2 + Math.abs(vec.y) * 0.04,
+      }}
       zIndex={10}
       paths={[
         {
@@ -48,9 +52,7 @@ export const SchematicPort = ({
           ? {
               stroke: "blue",
               strokeWidth: 0.5,
-              d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${
-                directionToVec(schematic.facing_direction).y * 7
-              }`,
+              d: `M 5 5 l ${vec.x * 7} ${vec.y * 7}`,
             }
           : null,
       ].filter(Boolean)}

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

@@ -18,8 +18,8 @@ export const SimpleCapacitor = ({
       size={schematic.size}
       paths={[
         { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
-        { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
-        { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 12 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 18 0 l 0 30" },
         { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" },
       ]}
     />

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/bugs/bug3-scaling-trace.stories.tsx

@@ -0,0 +1,18 @@
+import { useResistor } from "@tscircuit/react-fiber"
+import { Schematic } from "../../Schematic"
+
+export const Bug3ScalingTrace = () => {
+  const R1 = useResistor("R1", { resistance: "10" })
+  const R2 = useResistor("R2", { resistance: "1k" })
+  return (
+    <Schematic style={{ height: 500 }}>
+      <R1 schX={2} schY={1} />
+      <R2 schRotation="90deg" schX={0} schY={3} left={R1.left} />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Bugs/Bug3ScalingTrace",
+  component: Bug3ScalingTrace,
+}

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

package/src/stories/resistor.stories.tsx

@@ -0,0 +1,14 @@
+import { Schematic } from "../Schematic"
+
+export const Resistor = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Resistor",
+  component: Resistor,
+}

package/src/stories/rotated-resistor.stories.tsx

@@ -0,0 +1,21 @@
+import { Schematic } from "../Schematic"
+
+export const RotatedResistor = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <resistor
+        name="R1"
+        resistance="10 ohm"
+        schX={2}
+        schY={1}
+        schRotation="90deg"
+        rotation="90deg"
+      />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "RotatedResistor",
+  component: RotatedResistor,
+}