new methods, absolute positions used, function breakdowns

lib/sch/convert-circuit-json-to-schematic-svg.ts

@@ -33,7 +33,6 @@ export function convertCircuitJsonToSchematicSvg(
   const realBounds = getSchematicBoundsFromCircuitJson(circuitJson)
   const realWidth = realBounds.maxX - realBounds.minX
   const realHeight = realBounds.maxY - realBounds.minY
-  console.log({ realWidth, realHeight })
 
   const svgWidth = options?.width ?? 1200
   const svgHeight = options?.height ?? 600
@@ -109,7 +108,6 @@ export function convertCircuitJsonToSchematicSvg(
   const schComponentSvgs: SvgObject[] = []
   const schTraceSvgs: SvgObject[] = []
 
-  // Process all elements using transform
   for (const elm of circuitJson) {
     if (elm.type === "schematic_debug_object") {
       schDebugObjectSvgs.push(
@@ -148,6 +146,9 @@ export function convertCircuitJsonToSchematicSvg(
         children: [
           {
             type: "text",
+
+            // DO NOT USE THESE CLASSES!!!!
+            // PUT STYLES IN THE SVG OBJECTS THEMSELVES
             value: `
               .boundary { fill: ${colorMap.schematic.background}; }
               .schematic-boundary { fill: none; stroke: #fff; stroke-width: 0.3; }
@@ -156,7 +157,7 @@ export function convertCircuitJsonToSchematicSvg(
               .component-pin { fill: none; stroke: ${colorMap.schematic.component_outline}; }
               .trace { stroke: ${colorMap.schematic.wire}; stroke-width: 2px; fill: none; }
               .text { font-family: Arial, sans-serif; font-size: 2px; fill: ${colorMap.schematic.wire}; }
-              .pin-number { font-size: 0.15px; fill: ${colorMap.schematic.pin_number}; }
+              .pin-number { fill: ${colorMap.schematic.pin_number}; }
               .port-label { fill: ${colorMap.schematic.reference}; }
               .component-name { font-size: 0.25px; fill: ${colorMap.schematic.reference}; }
             `,

lib/sch/svg-object-fns/create-svg-objects-for-sch-port-box-line.ts

@@ -0,0 +1,107 @@
+import type {
+  AnyCircuitElement,
+  SchematicComponent,
+  SchematicPort,
+} from "circuit-json"
+import type { SvgObject } from "lib/svg-object"
+import { applyToPoint, type Matrix } from "transformation-matrix"
+import { su } from "@tscircuit/soup-util"
+
+const PIN_CIRCLE_RADIUS_PX = 3
+
+/**
+ * The schematic port box line is the line and circle that goes from the edge
+ * of the component box to the port.
+ */
+export const createSvgObjectsForSchPortBoxLine = ({
+  schPort,
+  schComponent,
+  transform,
+  circuitJson,
+}: {
+  schPort: SchematicPort
+  schComponent: SchematicComponent
+  transform: Matrix
+  circuitJson: AnyCircuitElement[]
+}): SvgObject[] => {
+  const svgObjects: SvgObject[] = []
+
+  const srcPort = su(circuitJson as any).source_port.get(schPort.source_port_id)
+
+  const realEdgePos = {
+    x: schPort.center.x,
+    y: schPort.center.y,
+  }
+
+  // schPort.distance_from_component_edge is currently calculated incorrectly
+  // in core
+  const realPinLineLength = 0.2 // schPort.distance_from_component_edge ?? 0.2
+
+  switch (schPort.side_of_component) {
+    case "left":
+      realEdgePos.x += realPinLineLength
+      break
+    case "right":
+      realEdgePos.x -= realPinLineLength
+      break
+    case "top":
+      realEdgePos.y += realPinLineLength
+      break
+    case "bottom":
+      realEdgePos.y -= realPinLineLength
+      break
+  }
+
+  const screenSchPortPos = applyToPoint(transform, schPort.center)
+  const screenRealEdgePos = applyToPoint(transform, realEdgePos)
+
+  // Subtract the pin circle radius from the pin line length to get the end
+  const screenLineEnd = applyToPoint(transform, schPort.center)
+  switch (schPort.side_of_component) {
+    case "left":
+      screenLineEnd.x += PIN_CIRCLE_RADIUS_PX
+      break
+    case "right":
+      screenLineEnd.x -= PIN_CIRCLE_RADIUS_PX
+      break
+    case "top":
+      screenLineEnd.y -= PIN_CIRCLE_RADIUS_PX
+      break
+    case "bottom":
+      screenLineEnd.y += PIN_CIRCLE_RADIUS_PX
+      break
+  }
+
+  // Add port line
+  svgObjects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      class: "component-pin",
+      x1: screenLineEnd.x.toString(),
+      y1: screenLineEnd.y.toString(),
+      x2: screenRealEdgePos.x.toString(),
+      y2: screenRealEdgePos.y.toString(),
+      "stroke-width": "2px",
+    },
+    value: "",
+    children: [],
+  })
+
+  // Add port circle
+  svgObjects.push({
+    name: "circle",
+    type: "element",
+    attributes: {
+      class: "component-pin",
+      cx: screenSchPortPos.x.toString(),
+      cy: screenSchPortPos.y.toString(),
+      r: PIN_CIRCLE_RADIUS_PX.toString(),
+      "stroke-width": "2px",
+    },
+    value: "",
+    children: [],
+  })
+
+  return svgObjects
+}

lib/sch/svg-object-fns/create-svg-objects-for-sch-port-pin-number-text.ts

@@ -0,0 +1,106 @@
+import type {
+  AnyCircuitElement,
+  SchematicComponent,
+  SchematicPort,
+} from "circuit-json"
+import type { SvgObject } from "lib/svg-object"
+import { colorMap } from "lib/utils/colors"
+import { getUnitVectorFromOutsideToEdge } from "lib/utils/get-unit-vector-from-outside-to-edge"
+import { applyToPoint, type Matrix } from "transformation-matrix"
+
+export const createSvgObjectsForSchPortPinNumberText = (params: {
+  schPort: SchematicPort
+  schComponent: SchematicComponent
+  transform: Matrix
+  circuitJson: AnyCircuitElement[]
+}): SvgObject[] => {
+  const svgObjects: SvgObject[] = []
+  const { schPort, schComponent, transform, circuitJson } = params
+
+  const pinNumberOffset = 0.2
+  let localPinNumberTextX = schPort.center.x
+  let localPinNumberTextY = schPort.center.y
+  let dominantBaseline = "auto"
+  let textAnchor = "middle"
+
+  switch (schPort.side_of_component) {
+    case "top":
+      // For top ports, stay at the same X but offset Y upward
+      localPinNumberTextY = schPort.center.y - pinNumberOffset // Move above the circle
+      localPinNumberTextX = schPort.center.x // Stay aligned with port
+      dominantBaseline = "middle"
+      break
+    case "bottom":
+      // For bottom ports, stay at the same X but offset Y downward
+      localPinNumberTextY = schPort.center.y + pinNumberOffset
+      localPinNumberTextX = schPort.center.x
+      dominantBaseline = "middle"
+      textAnchor = "left"
+      break
+    case "left":
+      // For left ports, stay at the same Y but offset X
+      localPinNumberTextX = schPort.center.x - pinNumberOffset
+      localPinNumberTextY = schPort.center.y + pinNumberOffset / 4
+      dominantBaseline = "auto"
+      break
+    case "right":
+      // For right ports, stay at the same Y but offset X
+      localPinNumberTextX = schPort.center.x + pinNumberOffset
+      localPinNumberTextY = schPort.center.y + pinNumberOffset / 4
+      dominantBaseline = "auto"
+      break
+  }
+
+  const realPinNumberPos = {
+    x: schPort.center.x,
+    y: schPort.center.y,
+  }
+
+  if (!schPort.side_of_component) return []
+  const vecToEdge = getUnitVectorFromOutsideToEdge(schPort.side_of_component)
+  console.log(schPort.pin_number, schPort.side_of_component, vecToEdge)
+
+  const realPinEdgeDistance = 0.2
+
+  // Move the pin number halfway to the edge of the box component so it sits
+  // between the edge and the port, exactly in the middle
+  realPinNumberPos.x += (vecToEdge.x * realPinEdgeDistance) / 2
+  realPinNumberPos.y += (vecToEdge.y * realPinEdgeDistance) / 2
+
+  // Transform the pin position from local to global coordinates
+  const screenPinNumberTextPos = applyToPoint(transform, realPinNumberPos)
+  // Move the pin number text up a bit so it doesn't hit the port line
+  screenPinNumberTextPos.y -= 4 //px
+
+  svgObjects.push({
+    name: "text",
+    type: "element",
+    attributes: {
+      class: "pin-number",
+      x: screenPinNumberTextPos.x.toString(),
+      y: screenPinNumberTextPos.y.toString(),
+      style: "font-family: sans-serif;",
+      fill: colorMap.schematic.pin_number,
+      "text-anchor": "middle",
+      "dominant-baseline": dominantBaseline,
+      "font-size": "11px",
+      transform:
+        schPort.side_of_component === "top" ||
+        schPort.side_of_component === "bottom"
+          ? `rotate(90deg, ${screenPinNumberTextPos.x}, ${screenPinNumberTextPos.y})`
+          : "",
+    },
+    children: [
+      {
+        type: "text",
+        value: schPort.pin_number?.toString() || "",
+        name: "",
+        attributes: {},
+        children: [],
+      },
+    ],
+    value: "",
+  })
+
+  return svgObjects
+}