@tscircuit/schematic-viewer 1.4.0 → 1.4.1

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,37 +1,43 @@
-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"
 
 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
 }
 
-export type SVGElement = PathProps | CircleProps;
+export type SVGElement = PathProps | CircleProps
 
 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,36 +50,43 @@ 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 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 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 [hovering, setHovering] = useState(false)
 
-  const svgLeft = absoluteCenter.x - fullSize.width / 2;
-  const svgTop = absoluteCenter.y - fullSize.height / 2;
+  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 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),
-  );
+  )
 
   return (
     <svg
@@ -95,15 +108,21 @@ export const SVGPathComponent = ({
       width={fullSize.width}
       height={fullSize.height}
     >
-      {paths.map((p, i) => 
-        p.type === 'circle' ? (
+      {paths.map((p, i) =>
+        p.type === "circle" ? (
           <circle
             key={i}
+            transform={toSVG(
+              compose(
+                scale(1, 1), // Add a smaller scale factor for circles
+                svgToScreen,
+              ),
+            )}
             cx={p.cx}
             cy={p.cy}
             r={p.r}
-            fill={p.fill ?? "none"}
-            strokeWidth={1.5 * (p.strokeWidth || 1)}
+            fill={"none"}
+            strokeWidth={2.25 * (p.strokeWidth || 1)}
             stroke={p.stroke || "red"}
           />
         ) : (
@@ -116,10 +135,10 @@ export const SVGPathComponent = ({
             stroke={p.stroke || "red"}
             d={p.d || ""}
           />
-        )
+        ),
       )}
     </svg>
-  );
-};
+  )
+}
 
-export default SVGPathComponent;
+export default SVGPathComponent

package/src/schematic-components/SchematicChip.tsx

@@ -1,130 +1,163 @@
-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 {
+  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"
 
 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"
+    strokeWidth: number
+    stroke: string
+    fill?: string
+    d?: string
+    cx?: number
+    cy?: number
+    r?: 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}> = [];
+    (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
+    rotation: number
+  }> = []
 
   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";
+    const { side, pinNumber, distanceFromEdge } = port.center
+    let x = 0,
+      y = 0,
+      endX = 0,
+      endY = 0
+    let labelX = 0,
+      labelY = 0
+    let textAnchor = "middle"
+    let rotation = 0
+
+    if (side === "center") {
+      return
+    }
 
     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
+        labelX = endX
+        labelY = y + labelOffset
+        textAnchor = "end"
+        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
+        labelX = endX - labelOffset
+        labelY = 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
+        labelX = x
+        labelY = endY + labelOffset
+        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
+        labelX = x
+        labelY = endY + labelOffset
+        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,
       stroke: colorMap.schematic.component_outline,
       fill: colorMap.schematic.component_outline,
-    });
+    })
 
     // Add pin label
-    if(pinNumber !== undefined) {
+    if (pinNumber !== undefined) {
       pinLabels.push({
         x: labelX,
         y: labelY,
         text: `${pinNumber}`,
-        anchor: textAnchor
-      });
+        anchor: textAnchor,
+        rotation: rotation,
+      })
     }
-  });
+  })
 
   return (
     <>
@@ -139,6 +172,7 @@ export const SchematicChip: React.FC<Props> = ({ component: { source, schematic,
           key={index}
           schematic_text={{
             anchor: label.anchor as any,
+            rotation: 0,
             position: {
               x: center.x + label.x,
               y: center.y + label.y,
@@ -147,12 +181,14 @@ export const SchematicChip: React.FC<Props> = ({ component: { source, schematic,
             schematic_text_id: `PIN_LABEL_${index}`,
             text: label.text,
             type: "schematic_text",
+            color: colorMap.schematic.pin_number,
           }}
         />
       ))}
       <SchematicText
         schematic_text={{
-          anchor: "center",
+          anchor: "right",
+          rotation: 0,
           position: {
             x: center.x,
             y: center.y - chipHeight / 2 - 0.2,
@@ -161,11 +197,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 +212,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 {
+  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 { 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

@@ -40,7 +40,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]) => (

package/src/schematic-components/index.tsx

@@ -7,4 +7,3 @@ export * from "./SchematicGroup"
 export * from "./SchematicText"
 export * from "./SchematicTrace"
 export * from "./SVGPathComponent"
-

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

@@ -72,6 +72,7 @@ export const SchematicNetLabel = () => {
             y: -0.5,
           },
           rotation: 0,
+          color: "black",
         },
         {
           type: "schematic_text",
@@ -84,6 +85,7 @@ export const SchematicNetLabel = () => {
             y: -0.3,
           },
           rotation: 0,
+          color: "black",
         },
         {
           type: "source_net",

package/src/stories/bug-connections.stories.tsx

@@ -3,22 +3,24 @@ import { Schematic } from "Schematic"
 export const BugConnections = () => {
   return (
     <Schematic style={{ height: 600 }}>
-      <bug
-        name="B1"
-        schPortArrangement={{
-          leftSize: 3,
-          rightSize: 2,
-        }}
-        schHeight={5}
-        schWidth={3}
-        schPinSpacing={2}
-        schX={8}
-        schY={3}
-        pinLabels={{
-          "1": "D0",
-          "2": "D1",
-        }}
-      />
+      <board width={10} height={10}>
+        <bug
+          name="B1"
+          schPortArrangement={{
+            leftSize: 3,
+            rightSize: 2,
+          }}
+          schHeight={5}
+          schWidth={3}
+          schPinSpacing={2}
+          schX={8}
+          schY={3}
+          pinLabels={{
+            "1": "D0",
+            "2": "D1",
+          }}
+        />
+      </board>
     </Schematic>
   )
 }