fix: override footprint ports when port arrangement is present

lib/components/base-components/NormalComponent.ts

@@ -12,10 +12,16 @@ import {
   type ReactSubtree,
   createInstanceFromReactElement,
 } from "lib/fiber/create-instance-from-react-element"
+import { underscorifyPinStyles } from "lib/soup/underscorifyPinStyles"
+import { underscorifyPortArrangement } from "lib/soup/underscorifyPortArrangement"
 import { createNetsFromProps } from "lib/utils/components/createNetsFromProps"
 import { createComponentsFromSoup } from "lib/utils/createComponentsFromSoup"
 import { getBoundsOfPcbComponents } from "lib/utils/get-bounds-of-pcb-components"
 import { getPortFromHints } from "lib/utils/getPortFromHints"
+import {
+  type SchematicBoxDimensions,
+  getAllDimensionsForSchematicBox,
+} from "lib/utils/schematic/getAllDimensionsForSchematicBox"
 import {
   type ReactElement,
   isValidElement as isReactElement,
@@ -26,12 +32,6 @@ import { ZodType, z } from "zod"
 import { Footprint } from "../primitive-components/Footprint"
 import { Port } from "../primitive-components/Port"
 import { PrimitiveComponent } from "./PrimitiveComponent"
-import {
-  getAllDimensionsForSchematicBox,
-  type SchematicBoxDimensions,
-} from "lib/utils/schematic/getAllDimensionsForSchematicBox"
-import { underscorifyPortArrangement } from "lib/soup/underscorifyPortArrangement"
-import { underscorifyPinStyles } from "lib/soup/underscorifyPinStyles"
 
 const debug = Debug("tscircuit:core")
 
@@ -186,12 +186,16 @@ export class NormalComponent<
       return
     }
 
-    const portsFromFootprint = this.getPortsFromFootprint()
-    for (const port of portsFromFootprint) {
-      if (
-        !portsToCreate.some((p) => p.isMatchingAnyOf(port.getNameAndAliases()))
-      ) {
-        portsToCreate.push(port)
+    if (!this._parsedProps.schPortArrangement) {
+      const portsFromFootprint = this.getPortsFromFootprint()
+      for (const port of portsFromFootprint) {
+        if (
+          !portsToCreate.some((p) =>
+            p.isMatchingAnyOf(port.getNameAndAliases()),
+          )
+        ) {
+          portsToCreate.push(port)
+        }
       }
     }
 
@@ -546,15 +550,21 @@ export class NormalComponent<
    *
    */
   doInitialPortDiscovery(): void {
-    const newPorts = [
-      ...this.getPortsFromFootprint(),
-      ...this.getPortsFromSchematicSymbol(),
-    ]
-
+    const { _parsedProps: props } = this
+
+    // Only get ports from footprint and schematic if no schPortArrangement
+    let newPorts: Port[] = []
+    if (!props.schPortArrangement) {
+      newPorts = [
+        ...this.getPortsFromFootprint(),
+        ...this.getPortsFromSchematicSymbol(),
+      ]
+    }
+
     const existingPorts = this.children.filter(
       (c) => c.componentName === "Port",
     ) as Port[]
-
+  
     for (const newPort of newPorts) {
       const existingPort = existingPorts.find((p) =>
         p.isMatchingAnyOf(newPort.getNameAndAliases()),
@@ -599,14 +609,19 @@ export class NormalComponent<
 
   _getPinCount(): number {
     const schPortArrangement = this._getSchematicPortArrangement()
-    const pinCountFromSchArrangement =
-      (schPortArrangement?.leftSize ?? 0) +
-      (schPortArrangement?.rightSize ?? 0) +
-      (schPortArrangement?.topSize ?? 0) +
-      (schPortArrangement?.bottomSize ?? 0)
-    const pinCount =
-      pinCountFromSchArrangement || this.getPortsFromFootprint().length
-    return pinCount
+
+    // If schPortArrangement exists, use only that for pin count
+    if (schPortArrangement) {
+      return (
+        (schPortArrangement.leftSize ?? 0) +
+        (schPortArrangement.rightSize ?? 0) +
+        (schPortArrangement.topSize ?? 0) +
+        (schPortArrangement.bottomSize ?? 0)
+      )
+    }
+
+    // If no schPortArrangement, fall back to footprint ports
+    return this.getPortsFromFootprint().length
   }
 
   /**

package.json

@@ -45,7 +45,7 @@
     "@tscircuit/soup-util": "^0.0.33",
     "circuit-json": "^0.0.93",
     "circuit-json-to-connectivity-map": "^0.0.17",
-    "circuit-to-svg": "^0.0.58",
+    "circuit-to-svg": "^0.0.59",
     "nanoid": "^5.0.7",
     "performance-now": "^2.1.0",
     "react": "^18.3.1",

tests/components/normal-components/chip-override-footprint-ports-when-schPortArrangement.test.tsx

@@ -0,0 +1,140 @@
+import { expect, test } from "bun:test"
+import { getTestFixture } from "tests/fixtures/get-test-fixture"
+
+const pinLabels = {
+  "1": "pos",
+  "2": "neg",
+} as const
+
+test("Chip override footprint ports when schPortArrangement is defined", async () => {
+  const { circuit } = getTestFixture()
+  circuit.add(
+    <board width="20mm" height="20mm">
+      <chip
+        name="ESP32"
+        // {...props}
+        cadModel={{
+          objUrl:
+            "https://modelcdn.tscircuit.com/easyeda_models/download?uuid=d0740cb8891c49a88b6949cb978926f3&pn=C965799",
+          rotationOffset: { x: 0, y: 0, z: 0 },
+          positionOffset: { x: 0, y: 0, z: 0 },
+        }}
+        pinLabels={pinLabels}
+        schPinSpacing={0.75}
+        schPortArrangement={{
+          leftSide: {
+            direction: "top-to-bottom",
+            pins: [1],
+          },
+          rightSide: {
+            direction: "bottom-to-top",
+            pins: [2],
+          },
+        }}
+        supplierPartNumbers={{
+          jlcpcb: ["C965799"],
+        }}
+        footprint={
+          <footprint>
+            <smtpad
+              portHints={["2"]}
+              pcbX="-0.7995919999999614mm"
+              pcbY="-0.003428999999982807mm"
+              width="0.7999983999999999mm"
+              height="0.7999983999999999mm"
+              shape="rect"
+            />
+            <smtpad
+              portHints={["1"]}
+              pcbX="0.7995919999999614mm"
+              pcbY="0.003428999999982807mm"
+              width="0.7999983999999999mm"
+              height="0.7999983999999999mm"
+              shape="rect"
+            />
+            <silkscreenpath
+              route={[
+                { x: 0.22047200000019984, y: -0.3235452000000123 },
+                { x: 0.2105660000000853, y: -0.3235452000000123 },
+                { x: -0.11953239999991183, y: 0.006477000000018052 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: 0.22047200000019984, y: 0.3564890000001242 },
+                { x: 0.22047200000019984, y: 0.3464814000001297 },
+                { x: -0.11953239999991183, y: 0.006477000000018052 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: 0.22047200000019984, y: 0.3564890000001242 },
+                { x: 0.22047200000019984, y: -0.3235452000000123 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: 0.24051260000010188, y: 0.7565136000000621 },
+                { x: 1.3905738000000838, y: 0.7565136000000621 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: 0.24051260000010188, y: -0.7436103999999659 },
+                { x: 1.3905738000000838, y: -0.7436103999999659 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: 1.3905738000000838, y: 0.7564628000000084 },
+                { x: 1.3905738000000838, y: -0.7235189999998966 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: -0.1394967999997334, y: -0.7458963999999924 },
+                { x: -1.1896089999999049, y: -0.7458963999999924 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: -1.4895575999997845, y: -0.345795599999974 },
+                { x: -1.4895575999997845, y: -0.4458207999998649 },
+                { x: -1.1896089999999049, y: -0.7458963999999924 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: -1.4895575999997845, y: 0.3541268000000173 },
+                { x: -1.4895575999997845, y: -0.345795599999974 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: -1.4895575999997845, y: 0.3541268000000173 },
+                { x: -1.4895575999997845, y: 0.4542790000000423 },
+                { x: -1.1896089999999049, y: 0.7542276000000356 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: -0.1394967999997334, y: 0.7542276000000356 },
+                { x: -1.1896089999999049, y: 0.7542276000000356 },
+              ]}
+            />
+            <silkscreenpath
+              route={[
+                { x: 0.22047200000019984, y: 0.006477000000018052 },
+                { x: -0.11953239999991183, y: 0.006477000000018052 },
+              ]}
+            />
+          </footprint>
+        }
+      />
+    </board>,
+  )
+
+  circuit.render()
+
+  expect(circuit.getCircuitJson()).toMatchSchematicSnapshot(import.meta.path)
+})