@tscircuit/schematic-viewer 1.3.0 → 1.4.1

package/src/schematic-components/SchematicChip.tsx

@@ -0,0 +1,222 @@
+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" | "center"
+  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
+    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"
+    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
+      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
+        rotation = -90
+        break
+      case "top":
+        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.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",
+      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,
+        rotation: rotation,
+      })
+    }
+  })
+
+  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,
+            rotation: 0,
+            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",
+            color: colorMap.schematic.pin_number,
+          }}
+        />
+      ))}
+      <SchematicText
+        schematic_text={{
+          anchor: "right",
+          rotation: 0,
+          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",
+          color: colorMap.schematic.reference,
+        }}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "right",
+          rotation: 0,
+          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",
+          color: colorMap.schematic.reference,
+        }}
+      />
+    </>
+  )
+}
+
+export default SchematicChip

package/src/schematic-components/SchematicComponent.tsx

@@ -1,11 +1,15 @@
-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 +18,29 @@ 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_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.SchematicBug component={{ source, schematic }} />
-    }
-    case "simple_diode": {
-      return <Component.SimpleDiode component={{ source, schematic }} />
+      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,46 @@
+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/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

@@ -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/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

@@ -1,17 +1,9 @@
-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"

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/basics/schematic-net-labels-2.stories.tsx

@@ -3,26 +3,28 @@ import { Schematic } from "../../Schematic"
 export const SchematicNetLabel2 = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor resistance="1k" name="R1" schX={-2} schY={0} />
-      <resistor resistance="1k" name="R2" schX={2} schY={0} />
-      <resistor
-        schRotation="90deg"
-        resistance="1k"
-        name="R3"
-        schX={0}
-        schY={2}
-      />
-      <resistor
-        schRotation="90deg"
-        resistance="1k"
-        name="R4"
-        schX={0}
-        schY={-2}
-      />
-      <trace from=".R1 > .right" to="net.N1" />
-      <trace from=".R2 > .left" to="net.N2" />
-      <trace from=".R3 > .left" to="net.N3" />
-      <trace from=".R4 > .right" to="net.GND2" />
+      <board width={10} height={10}>
+        <resistor resistance="1k" name="R1" schX={-2} schY={0} />
+        <resistor resistance="1k" name="R2" schX={2} schY={0} />
+        <resistor
+          schRotation="90deg"
+          resistance="1k"
+          name="R3"
+          schX={0}
+          schY={2}
+        />
+        <resistor
+          schRotation="90deg"
+          resistance="1k"
+          name="R4"
+          schX={0}
+          schY={-2}
+        />
+        <trace from=".R1 > .right" to="net.N1" />
+        <trace from=".R2 > .left" to="net.N2" />
+        <trace from=".R3 > .left" to="net.N3" />
+        <trace from=".R4 > .right" to="net.GND2" />
+      </board>
     </Schematic>
   )
 }

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

@@ -3,19 +3,24 @@ import { Schematic } from "Schematic"
 export const BugConnections = () => {
   return (
     <Schematic style={{ height: 600 }}>
-      <bug
-        name="B1"
-        schPortArrangement={{
-          leftSize: 3,
-          rightSize: 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>
   )
 }