@tscircuit/schematic-viewer 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "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.6",
     "@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/pages/led-circuit-react.tsx

@@ -4,32 +4,35 @@ import { Schematic } from "Schematic"
 export const ExampleCircuit = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor name="R1" resistance="10 ohm" center={[2, 1]} />
+      <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
       <capacitor
         name="C1"
         capacitance="10 uF"
-        center={[4, 2]}
-        rotation="90deg"
+        schX={4}
+        schY={2}
+        schRotation="90deg"
       />
       <resistor
         name="R2"
         resistance="10 ohm"
-        center={[6, 1]}
-        rotation="90deg"
+        schX={6}
+        schY={1}
+        schRotation="90deg"
       />
       <trace
         path={[".R1 > port.right", ".C1 > port.left", ".R2 > port.left"]}
       />
-      <powersource voltage="5V" center={[1, 2]} name="main_power" />
+      <powersource voltage="5V" schX={1} schY={2} name="main_power" />
       <trace path={[".main_power > port.positive", ".R1 > port.left"]} />
       <trace
         path={["power > port.negative", ".C1 > port.right", ".R2 > port.right"]}
       />
       <bug
         name="B1"
-        port_arrangement={{ left_size: 3, right_size: 3 }}
-        center={[8, 3]}
-        port_labels={{
+        schPortArrangement={{ leftSize: 3, rightSize: 3 }}
+        schX={8}
+        schY={3}
+        pinLabels={{
           1: "PWR",
           2: "NC",
           3: "RG",
@@ -39,9 +42,9 @@ export const ExampleCircuit = () => {
         }}
       />
       <trace path={[".B1 > port.PWR", ".R2 > port.left"]} />
-      <ground name="GND" center={[11, 3]} />
+      {/* <ground name="GND" schX={11} schY={3} /> */}
       <trace from=".B1 > port.GND" to=".GND" />
-      <diode name="D1" center={[6, 3.5]} rotation="180deg" />
+      <diode name="D1" schX={6} schY={3.5} schRotation="180deg" />
       <trace from=".D1 > .left" to=".B1 > .RG" />
       <trace from=".D1 > .right" to=".C1> .right" />
     </Schematic>

package/src/schematic-components/ProjectComponent.tsx

@@ -23,23 +23,27 @@ export const ProjectComponent = ({ project: $project }: Props) => {
       {project.schematic_components.map((schematic_component) => (
         <Components.SchematicComponent
           key={schematic_component.schematic_component_id}
-          component={{
-            source: projectClass.getSourceComponent(
-              schematic_component.source_component_id
-            ),
-            schematic: schematic_component,
-          }}
+          component={
+            {
+              source: projectClass.getSourceComponent(
+                schematic_component.source_component_id
+              ),
+              schematic: schematic_component,
+            } as any
+          }
         />
       ))}
       {project.schematic_ports.map((schematic_port) => (
         <Components.SchematicPort
           key={schematic_port.schematic_port_id}
-          port={{
-            source: projectClass.getSourcePort(
-              schematic_port.schematic_port_id
-            ),
-            schematic: schematic_port,
-          }}
+          port={
+            {
+              source: projectClass.getSourcePort(
+                schematic_port.schematic_port_id
+              ),
+              schematic: schematic_port,
+            } as any
+          }
         />
       ))}
       {project.schematic_traces.map((schematic_trace) => (

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,8 +48,8 @@ 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)
   const absoluteCenter = applyToPoint(ct, center)
   const actualAbsWidth = size.width * ct.a
   const actualAbsHeight = size.height * Math.abs(ct.d)
@@ -50,7 +57,6 @@ export const SVGPathComponent = ({
     width: Math.max(1, actualAbsWidth),
     height: Math.max(1, actualAbsHeight),
   }
-  console.log(absoluteSize, pathBounds)
 
   const [hovering, setHovering] = useState(false)
 
@@ -58,6 +64,18 @@ export const SVGPathComponent = ({
   const svgTop = absoluteCenter.y - absoluteSize.height / 2
 
   const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`
+  // const viewBox2 = `${svgLeft} ${svgTctualAbsWidth} ${actualAbsHeight}`
+
+  const svgToScreen = compose(
+    // translate(0, 0)
+    scale(
+      actualAbsWidth / pathBounds.width,
+      actualAbsHeight / pathBounds.height
+    ),
+    translate(-pathBounds.minX, -pathBounds.minY)
+    // translate(center.x, center.y)
+  )
+  // translate(..., ...),
 
   return (
     <>
@@ -66,11 +84,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: actualAbsWidth + 12,
+              height: actualAbsHeight + 12,
               border: "1px red solid",
               mixBlendMode: "difference",
               zIndex: 1000,
@@ -108,19 +126,24 @@ 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}
       >
         {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={2 * (p.strokeWidth || 1)}
+            strokeWidth={1.5 * (p.strokeWidth || 1)}
             stroke={p.stroke || "red"}
             d={p.d}
           />

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