@tscircuit/schematic-viewer 1.4.0 → 1.4.2

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,37 +1,55 @@
-import { useGlobalStore } from "lib/render-context";
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds";
-import { useState } from "react";
-import { applyToPoint, compose, scale, toSVG, translate } from "transformation-matrix";
-
+import { useGlobalStore } from "lib/render-context"
+import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
+import { useState } from "react"
+import {
+  applyToPoint,
+  compose,
+  scale,
+  toSVG,
+  translate,
+} from "transformation-matrix"
+import "../pages/style.css"
 interface PathProps {
-  type?: 'path';
-  strokeWidth: number;
-  stroke: string;
-  fill?: string;
-  d: string;
+  type?: "path"
+  strokeWidth: number
+  stroke: string
+  fill?: string
+  d: string
 }
 
 interface CircleProps {
-  type: 'circle';
-  cx: number;
-  cy: number;
-  r: number;
-  strokeWidth: number;
-  stroke: string;
-  fill?: string;
+  type: "circle"
+  cx: number
+  cy: number
+  r: number
+  strokeWidth: number
+  stroke: string
+  fill?: string
+}
+
+interface TextProps {
+  type: "text"
+  cx: number
+  cy: number
+  text: string
+  fontSize?: number
+  fill: string
+  anchor?: "start" | "middle" | "end"
+  rotation?: number
+  stroke?: string
 }
 
-export type SVGElement = PathProps | CircleProps;
+export type SVGElement = PathProps | CircleProps | TextProps
 
 interface Props {
-  rotation: number;
-  center: { x: number; y: number };
-  size: { width: number; height: number };
-  invertY?: boolean;
-  shiftToBottom?: boolean;
-  paths: SVGElement[];
-  zIndex?: number;
-  hoverContent?: any;
+  rotation: number
+  center: { x: number; y: number }
+  size: { width: number; height: number }
+  invertY?: boolean
+  shiftToBottom?: boolean
+  paths: SVGElement[]
+  zIndex?: number
+  hoverContent?: any
 }
 
 export const SVGPathComponent = ({
@@ -44,41 +62,50 @@ export const SVGPathComponent = ({
   shiftToBottom,
   hoverContent,
 }: Props) => {
-  const ct = useGlobalStore((s) => s.camera_transform);
-  const pathBounds = getSVGPathBounds(paths.filter((p): p is PathProps => p.type !== 'circle').map(p => p.d));
-
-  const padding = { x: 0, y: 0 };
-  const absoluteCenter = applyToPoint(ct, center);
+  const ct = useGlobalStore((s) => s.camera_transform)
+  const pathBounds = getSVGPathBounds(
+    paths
+      .filter((p): p is PathProps => p.type !== "circle" && p.type !== "text")
+      .map((p) => p.d),
+  )
+  const padding = { x: 0, y: 0 }
+  const absoluteCenter = applyToPoint(ct, center)
   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 - fullSize.width / 2;
-  const svgTop = absoluteCenter.y - fullSize.height / 2;
-
-  const preferredRatio = pathBounds.width === 0
-    ? innerSize.height / pathBounds.height
-    : innerSize.width / pathBounds.width;
-
+  }
+  const [hovering, setHovering] = useState(false)
+  const svgLeft = absoluteCenter.x - fullSize.width / 2
+  const svgTop = absoluteCenter.y - fullSize.height / 2
+  const preferredRatio =
+    pathBounds.width === 0
+      ? innerSize.height / pathBounds.height
+      : innerSize.width / pathBounds.width
   const svgToScreen = compose(
     scale(
-      pathBounds.width === 0 ? preferredRatio : fullSize.width / pathBounds.width,
-      pathBounds.height === 0 ? preferredRatio : fullSize.height / pathBounds.height,
+      pathBounds.width === 0
+        ? preferredRatio
+        : fullSize.width / pathBounds.width,
+      pathBounds.height === 0
+        ? preferredRatio
+        : fullSize.height / pathBounds.height,
     ),
     translate(-pathBounds.minX, -pathBounds.minY),
-  );
+  )
+
+  const baseFontSize = 0.15 // Fixed base font size in schematic units
 
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
     <svg
       onMouseOver={() => setHovering(Boolean(hoverContent))}
+      onFocus={() => setHovering(Boolean(hoverContent))}
       onMouseOut={() => setHovering(false)}
+      onBlur={() => setHovering(false)}
       style={{
         position: "absolute",
         cursor: hovering ? "pointer" : undefined,
@@ -95,20 +122,51 @@ export const SVGPathComponent = ({
       width={fullSize.width}
       height={fullSize.height}
     >
-      {paths.map((p, i) => 
-        p.type === 'circle' ? (
-          <circle
-            key={i}
-            cx={p.cx}
-            cy={p.cy}
-            r={p.r}
-            fill={p.fill ?? "none"}
-            strokeWidth={1.5 * (p.strokeWidth || 1)}
-            stroke={p.stroke || "red"}
-          />
-        ) : (
+      {paths.map((p, i) => {
+        if (p.type === "circle") {
+          return (
+            <circle
+              key={`${p.type}-${i}`}
+              transform={toSVG(compose(scale(1, 1), svgToScreen))}
+              cx={p.cx}
+              cy={p.cy}
+              r={p.r}
+              fill={"none"}
+              strokeWidth={2.25 * (p.strokeWidth || 1)}
+              stroke={p.stroke || "red"}
+            />
+          )
+        }
+        if (p.type === "text") {
+          const transformedPos = applyToPoint(svgToScreen, { x: p.cx, y: p.cy })
+          const scaleFactor = fullSize.width / pathBounds.width || 1
+
+          return (
+            <g key={`${p.type}-${i}`}>
+              <text
+                className="schematic-text"
+                x={transformedPos.x}
+                y={transformedPos.y}
+                fill={p.fill}
+                fontSize={baseFontSize * scaleFactor}
+                textAnchor={p.anchor || "middle"}
+                dominantBaseline="middle"
+                transform={`scale(1,-1) rotate(${p.rotation || 0})`}
+                style={{
+                  transformBox: "fill-box",
+                  transformOrigin: "center",
+                }}
+                stroke={p.stroke}
+              >
+                {p.text}
+              </text>
+            </g>
+          )
+        }
+        // Handle the "path" type directly
+        return (
           <path
-            key={i}
+            key={`${p.type}-${i}`}
             transform={toSVG(svgToScreen)}
             fill={p.fill ?? "none"}
             strokeLinecap="round"
@@ -117,9 +175,9 @@ export const SVGPathComponent = ({
             d={p.d || ""}
           />
         )
-      )}
+      })}
     </svg>
-  );
-};
+  )
+}
 
-export default SVGPathComponent;
+export default SVGPathComponent

package/src/schematic-components/SchematicChip.tsx

@@ -1,130 +1,161 @@
-import { AnyCircuitElement, SchematicPort as OriginalSchematicPort, SchematicComponent } from "circuit-json";
-import * as Type from "lib/types";
-import { colorMap } from "lib/utils/colors";
-import React from 'react';
-import SVGPathComponent from "./SVGPathComponent";
-import SchematicText from "./SchematicText";
+import type {
+  AnyCircuitElement,
+  SchematicPort as OriginalSchematicPort,
+  SchematicComponent,
+} from "circuit-json"
+import type * as Type from "lib/types"
+import { colorMap } from "lib/utils/colors"
+import type React from "react"
+import SVGPathComponent from "./SVGPathComponent"
+import SchematicText from "./SchematicText"
 
 interface Props {
   component: {
-    source: Type.SimpleBug;
-    schematic: SchematicComponent;
-    allElements: AnyCircuitElement[];
+    source: Type.SimpleBug
+    schematic: SchematicComponent
+    allElements: AnyCircuitElement[]
   }
 }
 
-type ExtendedCenter = OriginalSchematicPort['center'] & {
-  side: "left" | "right" | "top" | "bottom";
-  pinNumber: number;
-  distanceFromEdge: number;
-  trueIndex: number;
-};
-
-type SchematicPort = Omit<OriginalSchematicPort, 'center'> & {
-  center: ExtendedCenter;
-};
+type ExtendedCenter = OriginalSchematicPort["center"] & {
+  side: "left" | "right" | "top" | "bottom" | "center"
+  pinNumber: number
+  distanceFromEdge: number
+  trueIndex: number
+}
 
-export const SchematicChip: React.FC<Props> = ({ component: { source, schematic, allElements } }) => {
-  const { center, size, rotation, schematic_component_id } = schematic;
-  const { manufacturerPartNumber, name } = source;
-  const chipWidth = size.width;
-  const chipHeight = size.height;
+type SchematicPort = Omit<OriginalSchematicPort, "center"> & {
+  center: ExtendedCenter
+}
 
-  const paths: Array<{type?: 'path' | 'circle', strokeWidth: number, stroke: string, fill?: string, d?: string, cx?: number, cy?: number, r?: number}> = [];
+export const SchematicChip: React.FC<Props> = ({
+  component: { source, schematic, allElements },
+}) => {
+  const { center, size, rotation, schematic_component_id } = schematic
+  const { manufacturerPartNumber, name } = source
+  const chipWidth = size.width
+  const chipHeight = size.height
+
+  const paths: Array<{
+    type: "path" | "circle" | "text"
+    strokeWidth: number
+    stroke: string
+    fill?: string
+    d?: string
+    cx?: number
+    cy?: number
+    r?: number
+    text?: string
+    anchor?: string
+    rotation?: number
+  }> = []
 
   // Main chip rectangle
   paths.push({
-    type: 'path',
+    type: "path",
     strokeWidth: 0.02,
     stroke: colorMap.schematic.component_outline,
     fill: colorMap.schematic.component_body,
     d: `M ${-chipWidth / 2},${-chipHeight / 2} h ${chipWidth} v ${chipHeight} h ${-chipWidth} Z`,
-  });
+  })
 
   const schematicPorts = allElements.filter(
-    (item): item is SchematicPort => 
-      item.type === "schematic_port" && 
-      item.schematic_component_id === schematic_component_id
-  );
-
-  const portLength = 0.2;
-  const circleRadius = 0.05;
-  const labelOffset = 0.1;
-
-  const pinLabels: Array<{x: number, y: number, text: string, anchor: string}> = [];
-
-  schematicPorts.forEach((port) => {
-    const { side, pinNumber, distanceFromEdge } = port.center;
-    let x = 0, y = 0, endX = 0, endY = 0;
-    let labelX = 0, labelY = 0;
-    let textAnchor = "middle";
+    (item): item is SchematicPort =>
+      item.type === "schematic_port" &&
+      item.schematic_component_id === schematic_component_id,
+  )
+
+  const portLength = 0.5
+  const circleRadius = 0.04
+  const labelOffset = 0.1
+
+  for (const port of schematicPorts) {
+    const { side, pinNumber, distanceFromEdge } = port.center
+    let x = 0
+    let y = 0
+    let endX = 0
+    let endY = 0
+    let pinX = 0
+    let pinY = 0
+    let textAnchor = "middle"
+    let rotation = 0
+
+    if (side === "center") {
+      continue
+    }
 
     switch (side) {
       case "left":
-        x = -chipWidth / 2;
-        y = -chipHeight / 2 + distanceFromEdge;
-        endX = x - portLength;
-        endY = y;
-        labelX = endX;
-        labelY = y + labelOffset;
-        textAnchor = "end";
-        break;
+        x = -chipWidth / 2
+        y = -chipHeight / 2 + distanceFromEdge
+        endX = x - portLength
+        endY = y
+        pinX = x - portLength / 2
+        pinY = y + labelOffset
+        textAnchor = "middle"
+        break
       case "right":
-        x = chipWidth / 2;
-        y = chipHeight / 2 - distanceFromEdge;
-        endX = x + portLength;
-        endY = y;
-        labelX = endX - labelOffset;
-        labelY = y + labelOffset;
-        textAnchor = "start";
-        break;
+        x = chipWidth / 2
+        y = chipHeight / 2 - distanceFromEdge
+        endX = x + portLength
+        endY = y
+        pinX = x + portLength / 2 - labelOffset
+        pinY = y + labelOffset
+        textAnchor = "start"
+        break
       case "bottom":
-        x = -chipWidth / 2 + distanceFromEdge;
-        y = -chipHeight / 2;
-        endX = x;
-        endY = y - portLength;
-        labelX = x;
-        labelY = endY + labelOffset;
-        break;
+        x = -chipWidth / 2 + distanceFromEdge
+        y = -chipHeight / 2
+        endX = x
+        endY = y - portLength
+        pinX = x - labelOffset
+        pinY = y - portLength / 2
+        rotation = -90
+        break
       case "top":
-        x = chipWidth / 2 - distanceFromEdge;
-        y = chipHeight / 2;
-        endX = x;
-        endY = y + portLength;
-        labelX = x;
-        labelY = endY + labelOffset;
-        break;
+        x = chipWidth / 2 - distanceFromEdge
+        y = chipHeight / 2
+        endX = x
+        endY = y + portLength
+        pinX = x - labelOffset
+        pinY = y + portLength / 2
+        rotation = -90
+        break
     }
 
     // Port line
     paths.push({
-      type: 'path',
-      strokeWidth: 0.02,
+      type: "path",
+      strokeWidth: 0.015,
       stroke: colorMap.schematic.component_outline,
       d: `M ${x},${y} L ${endX},${endY}`,
-    });
+    })
 
     // Port circle at the end of the line
     paths.push({
-      type: 'circle',
+      type: "circle",
       cx: endX,
       cy: endY,
       r: circleRadius,
-      strokeWidth: 0.01,
+      strokeWidth: 0.005,
       stroke: colorMap.schematic.component_outline,
       fill: colorMap.schematic.component_outline,
-    });
-
-    // Add pin label
-    if(pinNumber !== undefined) {
-      pinLabels.push({
-        x: labelX,
-        y: labelY,
+    })
+
+    // Add pin number
+    if (pinNumber !== undefined) {
+      paths.push({
+        type: "text",
+        cx: pinX,
+        cy: pinY,
         text: `${pinNumber}`,
-        anchor: textAnchor
-      });
+        anchor: textAnchor,
+        rotation: rotation,
+        strokeWidth: 0.005,
+        stroke: colorMap.schematic.pin_number,
+      })
     }
-  });
+  }
 
   return (
     <>
@@ -134,25 +165,10 @@ export const SchematicChip: React.FC<Props> = ({ component: { source, schematic,
         size={size}
         paths={paths as any}
       />
-      {pinLabels.map((label, index) => (
-        <SchematicText
-          key={index}
-          schematic_text={{
-            anchor: label.anchor as any,
-            position: {
-              x: center.x + label.x,
-              y: center.y + label.y,
-            },
-            schematic_component_id: "SYNTHETIC",
-            schematic_text_id: `PIN_LABEL_${index}`,
-            text: label.text,
-            type: "schematic_text",
-          }}
-        />
-      ))}
       <SchematicText
         schematic_text={{
-          anchor: "center",
+          anchor: "right",
+          rotation: 0,
           position: {
             x: center.x,
             y: center.y - chipHeight / 2 - 0.2,
@@ -161,11 +177,13 @@ export const SchematicChip: React.FC<Props> = ({ component: { source, schematic,
           schematic_text_id: "SYNTHETIC_MPN",
           text: manufacturerPartNumber,
           type: "schematic_text",
+          color: colorMap.schematic.reference,
         }}
       />
       <SchematicText
         schematic_text={{
-          anchor: "center",
+          anchor: "right",
+          rotation: 0,
           position: {
             x: center.x,
             y: center.y + chipHeight / 2 + 0.2,
@@ -174,10 +192,11 @@ export const SchematicChip: React.FC<Props> = ({ component: { source, schematic,
           schematic_text_id: "SYNTHETIC_NAME",
           text: name,
           type: "schematic_text",
+          color: colorMap.schematic.reference,
         }}
       />
     </>
-  );
-};
+  )
+}
 
-export default SchematicChip;
+export default SchematicChip

package/src/schematic-components/SchematicComponent.tsx

@@ -1,4 +1,7 @@
-import { AnyCircuitElement, SchematicComponent as SchematicComponentType } from "circuit-json"
+import type {
+  AnyCircuitElement,
+  SchematicComponent as SchematicComponentType,
+} from "circuit-json"
 import * as Component from "./"
 
 interface Props {
@@ -19,19 +22,25 @@ export const SchematicComponent = ({ component }: Props) => {
   if (!source.ftype) return null
 
   switch (source.ftype) {
-    case "simple_resistor": 
+    case "simple_resistor":
     case "simple_capacitor":
     case "simple_power_source":
     case "simple_ground":
     case "simple_inductor":
-    case "simple_diode":
-    {
-      return <Component.SchematicComponentFromSymbol component={{ source, schematic }} />
+    case "simple_diode": {
+      return (
+        <Component.SchematicComponentFromSymbol
+          component={{ source, schematic }}
+        />
+      )
     }
     case "simple_chip":
-    case "simple_bug":
-    {
-      return <Component.SchematicChip component={{ source, schematic, allElements }} />
+    case "simple_bug": {
+      return (
+        <Component.SchematicChip
+          component={{ source, schematic, allElements }}
+        />
+      )
     }
     default: {
       return <div>unknown ftype: {component.source.ftype}</div>

package/src/schematic-components/SchematicComponentFromSymbol.tsx

@@ -10,7 +10,9 @@ interface Props {
   }
 }
 
-export const SchematicComponentFromSymbol = ({ component: { source, schematic } }: Props) => {
+export const SchematicComponentFromSymbol = ({
+  component: { source, schematic },
+}: Props) => {
   const { center, rotation } = schematic
   // Get the resistor symbol paths
   const symbol = symbols[schematic.symbol_name]

package/src/schematic-components/SchematicNetLabel.tsx

@@ -3,6 +3,7 @@ import SVGPathComponent from "./SVGPathComponent"
 import SchematicText from "./SchematicText"
 import { getRotationFromAnchorSide } from "lib/utils/get-rotation-from-anchor-side"
 import { getVecFromAnchorSide } from "lib/utils/get-vec-from-anchor-side"
+import { colorMap } from "lib/utils/colors"
 
 export const SchematicNetLabel = ({
   net_label,
@@ -44,6 +45,7 @@ export const SchematicNetLabel = ({
       />
       <SchematicText
         schematic_text={{
+          rotation: is_vertical ? 0 : getRotationFromAnchorSide(anchor_side),
           anchor: is_vertical ? "center" : anchor_side,
           position: {
             x: net_label.center.x + anchor_vec.x,
@@ -53,6 +55,7 @@ export const SchematicNetLabel = ({
           schematic_text_id: "SYNTHETIC",
           text: net_label.text,
           type: "schematic_text",
+          color: colorMap.schematic.net_name,
         }}
       />
     </>

package/src/schematic-components/SchematicText.tsx

@@ -1,13 +1,10 @@
-import * as Type from "lib/types"
-import SVGPathComponent from "./SVGPathComponent"
-import Path from "svg-path-generator"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
+import type { SchematicText as SchematicTextType } from "circuit-json"
 import { useGlobalStore } from "lib/render-context"
-import { applyToPoint } from "transformation-matrix"
 import useMeasure from "react-use-measure"
+import { applyToPoint } from "transformation-matrix"
 
 interface Props {
-  schematic_text: Type.SchematicText
+  schematic_text: SchematicTextType
 }
 
 export const SchematicText = ({ schematic_text }: Props) => {
@@ -36,6 +33,7 @@ export const SchematicText = ({ schematic_text }: Props) => {
         fontSize: projectedTextSize,
         left: tPos.x + offset[0],
         top: tPos.y + offset[1],
+        color: schematic_text.color,
       }}
     >
       {text}

package/src/schematic-components/SchematicTrace.tsx

@@ -1,10 +1,9 @@
-import * as Type from "lib/types"
-import SVGPathComponent from "./SVGPathComponent"
-import Path from "svg-path-generator"
+import type * as Type from "lib/types"
+import { colorMap } from "lib/utils/colors"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
+import Path from "svg-path-generator"
 import RenderError from "./RenderError"
-import SVGPathComponent2 from "./SVGPathComponent2"
-import { colorMap } from "lib/utils/colors"
+import SVGPathComponent from "./SVGPathComponent"
 
 interface Props {
   trace: {
@@ -40,7 +39,7 @@ export const SchematicTrace = ({ trace: { source, schematic } }: Props) => {
       size={pathBounds}
       paths={[
         {
-          stroke:colorMap.schematic.wire,
+          stroke: colorMap.schematic.wire,
           strokeWidth: 0.01,
           d,
         },

package/src/schematic-components/TableViewer.tsx

@@ -3,7 +3,7 @@ import { lazy, Suspense } from "react"
 const LazyTableViewer = lazy(() =>
   import("@tscircuit/table-viewer").then((m) => ({
     default: m.SoupTableViewer,
-  }))
+  })),
 )
 
 export const TableViewer = (params: Parameters<typeof LazyTableViewer>[0]) => (