@tscircuit/schematic-viewer 1.2.7 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "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",

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

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