@tscircuit/schematic-viewer 1.3.0 → 1.4.0

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,30 +1,37 @@
-import { useGlobalStore } from "lib/render-context"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import { useCallback, useState } from "react"
+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 {
-  applyToPoint,
-  toSVG,
-  inverse,
-  compose,
-  translate,
-  scale,
-} from "transformation-matrix"
+interface PathProps {
+  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;
+}
+
+export type SVGElement = PathProps | CircleProps;
 
 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
+  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 = ({
@@ -37,136 +44,69 @@ export const SVGPathComponent = ({
   shiftToBottom,
   hoverContent,
 }: Props) => {
-  const ct = useGlobalStore((s) => s.camera_transform)
-  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
-  // Margin in SVG Space
-  const badRatio =
-    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >
-    0.01
-  if (badRatio) {
-    // console.warn(
-    //   `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)
-
-  // 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 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 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 viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`
-  // const viewBox2 = `${svgLeft} ${svgTctualAbsWidth} ${actualAbsHeight}`
+  const preferredRatio = pathBounds.width === 0
+    ? innerSize.height / pathBounds.height
+    : innerSize.width / pathBounds.width;
 
-  // 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
+      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(..., ...),
+    translate(-pathBounds.minX, -pathBounds.minY),
+  );
 
   return (
-    <>
-      {hovering && (
-        <>
-          <div
-            style={{
-              position: "absolute",
-              left: svgLeft - 6,
-              top: svgTop - 6,
-              pointerEvents: "none",
-              width: fullSize.width + 12,
-              height: fullSize.height + 12,
-              border: "1px red solid",
-              mixBlendMode: "difference",
-              zIndex: 1000,
-            }}
+    <svg
+      onMouseOver={() => setHovering(Boolean(hoverContent))}
+      onMouseOut={() => setHovering(false)}
+      style={{
+        position: "absolute",
+        cursor: hovering ? "pointer" : undefined,
+        zIndex,
+        transform: [
+          invertY ? "scale(1, 1)" : "scale(1, -1)",
+          shiftToBottom ? "translate(0, 100%)" : "",
+          rotation === 0 ? "" : `rotate(${rotation}deg)`,
+        ].join(" "),
+        left: svgLeft,
+        top: svgTop,
+      }}
+      overflow="visible"
+      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"}
           />
-          <div
-            style={{
-              position: "absolute",
-              left: svgLeft + fullSize.width + 10,
-              pointerEvents: "none",
-              zIndex: 1000,
-              color: "red",
-              mixBlendMode: "difference",
-              top: svgTop,
-              fontFamily: "monospace",
-              fontSize: 14,
-            }}
-          >
-            {hoverContent}
-          </div>
-        </>
-      )}
-      <svg
-        onMouseOver={() => setHovering(Boolean(hoverContent))}
-        onMouseOut={() => setHovering(false)}
-        style={{
-          position: "absolute",
-          // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
-          cursor: hovering ? "pointer" : undefined,
-          zIndex,
-          transform: [
-            invertY ? "scale(1, 1)" : "scale(1, -1)", // TODO based on ct.d
-            shiftToBottom ? "translate(0, 100%)" : "",
-            rotation === 0 ? "" : `rotate(${rotation}rad)`,
-          ].join(" "),
-          left: svgLeft,
-          top: svgTop,
-          // overflow: "hidden",
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
-          // backgroundColor: "rgba(255, 0, 0, 0.1)",
-        }}
-        overflow="visible"
-        width={fullSize.width}
-        height={fullSize.height}
-      >
-        {paths.map((p, i) => (
+        ) : (
           <path
             key={i}
             transform={toSVG(svgToScreen)}
@@ -174,12 +114,12 @@ export const SVGPathComponent = ({
             strokeLinecap="round"
             strokeWidth={1.5 * (p.strokeWidth || 1)}
             stroke={p.stroke || "red"}
-            d={p.d}
+            d={p.d || ""}
           />
-        ))}
-      </svg>
-    </>
-  )
-}
+        )
+      )}
+    </svg>
+  );
+};
 
-export default SVGPathComponent
+export default SVGPathComponent;

package/src/schematic-components/SchematicChip.tsx

@@ -0,0 +1,183 @@
+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[];
+  }
+}
+
+type ExtendedCenter = OriginalSchematicPort['center'] & {
+  side: "left" | "right" | "top" | "bottom";
+  pinNumber: number;
+  distanceFromEdge: number;
+  trueIndex: number;
+};
+
+type SchematicPort = Omit<OriginalSchematicPort, 'center'> & {
+  center: ExtendedCenter;
+};
+
+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',
+    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";
+
+    switch (side) {
+      case "left":
+        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;
+      case "bottom":
+        x = -chipWidth / 2 + distanceFromEdge;
+        y = -chipHeight / 2;
+        endX = x;
+        endY = y - portLength;
+        labelX = x;
+        labelY = endY + labelOffset;
+        break;
+      case "top":
+        x = chipWidth / 2 - distanceFromEdge;
+        y = chipHeight / 2;
+        endX = x;
+        endY = y + portLength;
+        labelX = x;
+        labelY = endY + labelOffset;
+        break;
+    }
+
+    // Port line
+    paths.push({
+      type: 'path',
+      strokeWidth: 0.02,
+      stroke: colorMap.schematic.component_outline,
+      d: `M ${x},${y} L ${endX},${endY}`,
+    });
+
+    // Port circle at the end of the line
+    paths.push({
+      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) {
+      pinLabels.push({
+        x: labelX,
+        y: labelY,
+        text: `${pinNumber}`,
+        anchor: textAnchor
+      });
+    }
+  });
+
+  return (
+    <>
+      <SVGPathComponent
+        rotation={rotation}
+        center={center}
+        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",
+          position: {
+            x: center.x,
+            y: center.y - chipHeight / 2 - 0.2,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC_MPN",
+          text: manufacturerPartNumber,
+          type: "schematic_text",
+        }}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "center",
+          position: {
+            x: center.x,
+            y: center.y + chipHeight / 2 + 0.2,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC_NAME",
+          text: name,
+          type: "schematic_text",
+        }}
+      />
+    </>
+  );
+};
+
+export default SchematicChip;

package/src/schematic-components/SchematicComponent.tsx

@@ -1,11 +1,12 @@
-import * as Type from "lib/types"
+import { AnyCircuitElement, SchematicComponent as SchematicComponentType } from "circuit-json"
 import * as Component from "./"
 
 interface Props {
   component: {
-    source: Type.SourceComponent
-    schematic: Type.SchematicComponent
+    source: any
+    schematic: SchematicComponentType
     schematic_children: any[]
+    allElements: AnyCircuitElement[]
   }
 }
 
@@ -14,30 +15,23 @@ interface Props {
  * generating schematic lines directly
  */
 export const SchematicComponent = ({ component }: Props) => {
-  const { source, schematic } = component
+  const { source, schematic, allElements } = component
   if (!source.ftype) return null
 
   switch (source.ftype) {
-    case "simple_resistor": {
-      return <Component.SimpleResistor component={{ source, schematic }} />
-    }
-    case "simple_capacitor": {
-      return <Component.SimpleCapacitor component={{ source, schematic }} />
-    }
-    case "simple_power_source": {
-      return <Component.SimplePowerSource component={{ source, schematic }} />
-    }
-    case "simple_ground": {
-      return <Component.SimpleGround component={{ source, schematic }} />
-    }
-    case "simple_inductor": {
-      return <Component.SimpleInductor component={{ source, schematic }} />
-    }
-    case "simple_bug": {
-      return <Component.SchematicBug component={{ source, schematic }} />
-    }
-    case "simple_diode": {
-      return <Component.SimpleDiode component={{ source, schematic }} />
+    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_chip":
+    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

@@ -0,0 +1,44 @@
+import { SchematicComponent, SourceSimpleResistor } from "circuit-json"
+import { colorMap } from "lib/utils/colors"
+import { symbols } from "schematic-symbols"
+import SVGPathComponent from "./SVGPathComponent"
+
+interface Props {
+  component: {
+    source: SourceSimpleResistor
+    schematic: SchematicComponent
+  }
+}
+
+export const SchematicComponentFromSymbol = ({ component: { source, schematic } }: Props) => {
+  const { center, rotation } = schematic
+  // Get the resistor symbol paths
+  const symbol = symbols[schematic.symbol_name]
+  const paths = symbol.primitives
+    .filter((p: any) => p.type === "path")
+    .map((p: any) => ({
+      stroke: colorMap.schematic.component_outline,
+      strokeWidth: 0.02,
+      d: p.points.reduce(
+        (acc: string, point: { x: number; y: number }, index: number) => {
+          const command = index === 0 ? "M" : "L"
+          return `${acc} ${command} ${point.x} ${point.y}`
+        },
+        "",
+      ),
+    }))
+
+  return (
+    <SVGPathComponent
+      rotation={rotation}
+      center={center}
+      size={{
+        width: symbol?.size.width,
+        height: symbol?.size.height,
+      }}
+      paths={paths}
+    />
+  )
+}
+
+export default SchematicComponentFromSymbol

package/src/schematic-components/SchematicElement.tsx

@@ -1,11 +1,7 @@
 import { AnyCircuitElement } from "circuit-json"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
-import SchematicBox from "./SchematicBox"
 import SchematicComponent from "./SchematicComponent"
-import SchematicLine from "./SchematicLine"
 import { SchematicNetLabel } from "./SchematicNetLabel"
-import SchematicPath from "./SchematicPath"
-import SchematicPort from "./SchematicPort"
 import SchematicText from "./SchematicText"
 import SchematicTrace from "./SchematicTrace"
 
@@ -35,30 +31,6 @@ export const SchematicElement = ({
     )
   }
 
-  if (element.type === "schematic_port") {
-    return (
-      <SchematicPort port={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_box") {
-    return (
-      <SchematicBox box={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_line") {
-    return (
-      <SchematicLine line={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_path") {
-    return (
-      <SchematicPath path={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
   if (element.type === "schematic_text") {
     return <SchematicText schematic_text={element} />
   }

package/src/schematic-components/SchematicTrace.tsx

@@ -4,6 +4,7 @@ import Path from "svg-path-generator"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 import RenderError from "./RenderError"
 import SVGPathComponent2 from "./SVGPathComponent2"
+import { colorMap } from "lib/utils/colors"
 
 interface Props {
   trace: {
@@ -33,14 +34,14 @@ export const SchematicTrace = ({ trace: { source, schematic } }: Props) => {
     y: pathBounds.minY + pathBounds.height / 2,
   }
   return (
-    <SVGPathComponent2
+    <SVGPathComponent
       rotation={0}
       center={center}
       size={pathBounds}
       paths={[
         {
-          stroke: "green",
-          strokeWidth: 0.02,
+          stroke:colorMap.schematic.wire,
+          strokeWidth: 0.01,
           d,
         },
       ]}

package/src/schematic-components/index.tsx

@@ -1,17 +1,10 @@
-export * from "./SchematicGroup"
-export * from "./SimpleResistor"
-export * from "./SimpleCapacitor"
-export * from "./SVGPathComponent"
-export * from "./ProjectComponent"
+export * from "./ContextProviders"
+export * from "./RenderError"
+export * from "./SchematicChip"
 export * from "./SchematicComponent"
-export * from "./SchematicPort"
+export * from "./SchematicComponentFromSymbol"
+export * from "./SchematicGroup"
 export * from "./SchematicText"
-export * from "./ProjectComponent"
 export * from "./SchematicTrace"
-export * from "./SchematicBug"
-export * from "./SimplePowerSource"
-export * from "./SimpleGround"
-export * from "./SimpleInductor"
-export * from "./RenderError"
-export * from "./SimpleDiode"
-export * from "./ContextProviders"
+export * from "./SVGPathComponent"
+