@tscircuit/core 0.0.30 → 0.0.32

package/dist/index.js

@@ -10,8 +10,10 @@ __export(components_exports, {
   Board: () => Board,
   Capacitor: () => Capacitor,
   Chip: () => Chip,
+  Constraint: () => Constraint2,
   Footprint: () => Footprint,
   Group: () => Group,
+  Hole: () => Hole,
   Jumper: () => Jumper,
   Led: () => Led,
   Net: () => Net,
@@ -36,14 +38,12 @@ import "react";
 import "react";
 var orderedRenderPhases = [
   "ReactSubtreesRender",
-  // probably going to be removed b/c subtrees should render instantly
   "InitializePortsFromChildren",
   "CreateNetsFromProps",
   "CreateTracesFromProps",
   "SourceRender",
   "SourceParentAttachment",
   "PortDiscovery",
-  // probably going to be removed b/c port discovery can always be done on prop change
   "PortMatching",
   "SourceTraceRender",
   "SchematicComponentRender",
@@ -51,8 +51,9 @@ var orderedRenderPhases = [
   "SchematicPortRender",
   "SchematicTraceRender",
   "PcbComponentRender",
-  "PcbPortRender",
   "PcbPrimitiveRender",
+  "PcbFootprintLayout",
+  "PcbPortRender",
   "PcbParentAttachment",
   "PcbLayout",
   "PcbTraceRender",
@@ -185,6 +186,17 @@ var PrimitiveComponent = class extends Renderable {
     return Boolean(this.props.subcircuit) || // Implied opaque group for top-level group
     this.lowercaseComponentName === "group" && this?.parent?.isRoot;
   }
+  /**
+   * A primitive container is a component that contains one or more ports and
+   * primitive components that are designed to interact.
+   *
+   * For example a resistor contains ports and smtpads that interact, so the
+   * resistor is a primitive container. Inside a primitive container, the ports
+   * and pads are likely to reference each other and look for eachother during
+   * the port matching phase.
+   *
+   */
+  isPrimitiveContainer = false;
   source_group_id = null;
   source_component_id = null;
   schematic_component_id = null;
@@ -236,14 +248,14 @@ var PrimitiveComponent = class extends Renderable {
    * components, including this component's translation and rotation.
    *
    * This is used to compute this component's position as well as all children
-   * components positions
+   * components positions before layout is applied
    */
-  computePcbGlobalTransform() {
+  _computePcbGlobalTransformBeforeLayout() {
     const { _parsedProps: props } = this;
     const manualPlacement = this.getSubcircuit()._getManualPlacementForComponent(this);
     if (manualPlacement && this.props.pcbX === void 0 && this.props.pcbY === void 0) {
       return compose(
-        this.parent?.computePcbGlobalTransform() ?? identity(),
+        this.parent?._computePcbGlobalTransformBeforeLayout() ?? identity(),
         compose(
           translate(manualPlacement.x, manualPlacement.y),
           rotate((props.pcbRotation ?? 0) * Math.PI / 180)
@@ -251,10 +263,37 @@ var PrimitiveComponent = class extends Renderable {
       );
     }
     return compose(
-      this.parent?.computePcbGlobalTransform() ?? identity(),
+      this.parent?._computePcbGlobalTransformBeforeLayout() ?? identity(),
       this.computePcbPropsTransform()
     );
   }
+  getPrimitiveContainer() {
+    if (this.isPrimitiveContainer) return this;
+    return this.parent?.getPrimitiveContainer?.() ?? null;
+  }
+  /**
+   * Compute the bounds of this component the circuit json elements associated
+   * with it.
+   */
+  _getCircuitJsonBounds() {
+    return {
+      center: { x: 0, y: 0 },
+      bounds: { left: 0, top: 0, right: 0, bottom: 0 },
+      width: 0,
+      height: 0
+    };
+  }
+  /**
+   * Set the position of this component from the layout solver. This method
+   * should operate using CircuitJson associated with this component, like
+   * _getCircuitJsonBounds it can be called multiple times as different
+   * parents apply layout to their children.
+   */
+  _setPositionFromLayout(newCenter) {
+    throw new Error(
+      `_setPositionFromLayout not implemented for ${this.componentName}`
+    );
+  }
   /**
    * Computes a transformation matrix from the props of this component for
    * schematic components
@@ -295,7 +334,7 @@ var PrimitiveComponent = class extends Renderable {
     for (const position of placementConfig.positions) {
       if (isMatchingSelector(component, position.selector)) {
         const center = applyToPoint(
-          this.computePcbGlobalTransform(),
+          this._computePcbGlobalTransformBeforeLayout(),
           position.center
         );
         return center;
@@ -303,10 +342,13 @@ var PrimitiveComponent = class extends Renderable {
     }
     return null;
   }
-  getGlobalPcbPosition() {
-    return applyToPoint(this.computePcbGlobalTransform(), { x: 0, y: 0 });
+  _getGlobalPcbPositionBeforeLayout() {
+    return applyToPoint(this._computePcbGlobalTransformBeforeLayout(), {
+      x: 0,
+      y: 0
+    });
   }
-  getGlobalSchematicPosition() {
+  _getGlobalSchematicPositionBeforeLayout() {
     return applyToPoint(this.computeSchematicGlobalTransform(), { x: 0, y: 0 });
   }
   get root() {
@@ -465,7 +507,125 @@ var PrimitiveComponent = class extends Renderable {
 };
 
 // lib/components/primitive-components/Footprint.ts
+import * as kiwi from "@lume/kiwi";
+import Debug from "debug";
+var debug = Debug("tscircuit:core:footprint");
 var Footprint = class extends PrimitiveComponent {
+  /**
+   * A footprint is a constrainedlayout, the db elements are adjusted according
+   * to any constraints that are defined.
+   */
+  doInitialPcbFootprintLayout() {
+    const constraints = this.children.filter(
+      (child) => child.componentName === "Constraint"
+    );
+    if (constraints.length === 0) return;
+    const involvedComponents = constraints.flatMap(
+      (constraint) => constraint._getAllReferencedComponents().componentsWithSelectors
+    ).map(({ component, selector }) => ({
+      component,
+      selector,
+      bounds: component._getCircuitJsonBounds()
+    }));
+    function getComponentDetails(selector) {
+      return involvedComponents.find(({ selector: s }) => s === selector);
+    }
+    const solver = new kiwi.Solver();
+    const kVars = {};
+    function getKVar(name) {
+      if (!(name in kVars)) {
+        kVars[name] = new kiwi.Variable(name);
+      }
+      return kVars[name];
+    }
+    for (const { selector, bounds } of involvedComponents) {
+      const kvx = getKVar(`${selector}_x`);
+      const kvy = getKVar(`${selector}_y`);
+      solver.addEditVariable(kvx, kiwi.Strength.weak);
+      solver.addEditVariable(kvy, kiwi.Strength.weak);
+      solver.suggestValue(kvx, bounds.center.x);
+      solver.suggestValue(kvy, bounds.center.y);
+    }
+    for (const constraint of constraints) {
+      const props = constraint._parsedProps;
+      if ("xdist" in props) {
+        const { xdist, left, right, edgeToEdge, centerToCenter } = props;
+        const leftVar = getKVar(`${left}_x`);
+        const rightVar = getKVar(`${right}_x`);
+        const leftBounds = getComponentDetails(left)?.bounds;
+        const rightBounds = getComponentDetails(right)?.bounds;
+        if (centerToCenter) {
+          const expr = new kiwi.Expression(rightVar, [-1, leftVar]);
+          solver.addConstraint(
+            new kiwi.Constraint(
+              expr,
+              kiwi.Operator.Eq,
+              props.xdist,
+              kiwi.Strength.required
+            )
+          );
+        } else if (edgeToEdge) {
+          const expr = new kiwi.Expression(
+            rightVar,
+            rightBounds.width / 2,
+            [-1, leftVar],
+            -leftBounds.width / 2
+          );
+          solver.addConstraint(
+            new kiwi.Constraint(
+              expr,
+              kiwi.Operator.Eq,
+              props.xdist,
+              kiwi.Strength.required
+            )
+          );
+        }
+      }
+      solver.updateVariables();
+      if (debug.enabled) {
+        console.log("Solution to layout constraints:");
+        console.table(
+          Object.entries(kVars).map(([key, kvar]) => ({
+            var: key,
+            val: kvar.value()
+          }))
+        );
+      }
+      const bounds = {
+        left: Infinity,
+        right: -Infinity,
+        top: -Infinity,
+        bottom: Infinity
+      };
+      for (const {
+        selector,
+        bounds: { width, height }
+      } of involvedComponents) {
+        const kvx = getKVar(`${selector}_x`);
+        const kvy = getKVar(`${selector}_y`);
+        const newLeft = kvx.value() - width / 2;
+        const newRight = kvx.value() + width / 2;
+        const newTop = kvy.value() + height / 2;
+        const newBottom = kvy.value() - height / 2;
+        bounds.left = Math.min(bounds.left, newLeft);
+        bounds.right = Math.max(bounds.right, newRight);
+        bounds.top = Math.max(bounds.top, newTop);
+        bounds.bottom = Math.min(bounds.bottom, newBottom);
+      }
+      const globalOffset = {
+        x: -(bounds.right + bounds.left) / 2,
+        y: -(bounds.top + bounds.bottom) / 2
+      };
+      for (const { component, selector } of involvedComponents) {
+        const kvx = getKVar(`${selector}_x`);
+        const kvy = getKVar(`${selector}_y`);
+        component._setPositionFromLayout({
+          x: kvx.value() + globalOffset.x,
+          y: kvy.value() + globalOffset.y
+        });
+      }
+    }
+  }
 };
 
 // lib/components/base-components/NormalComponent.ts
@@ -507,16 +667,16 @@ var Port = class extends PrimitiveComponent {
     super(props);
     this.matchedComponents = [];
   }
-  getGlobalPcbPosition() {
+  _getGlobalPcbPositionBeforeLayout() {
     const matchedPcbElm = this.matchedComponents.find((c) => c.isPcbPrimitive);
     if (!matchedPcbElm) {
       throw new Error(
         `Port ${this} has no matched pcb component, can't get global schematic position`
       );
     }
-    return matchedPcbElm?.getGlobalPcbPosition() ?? { x: 0, y: 0 };
+    return matchedPcbElm?._getGlobalPcbPositionBeforeLayout() ?? { x: 0, y: 0 };
   }
-  getGlobalSchematicPosition() {
+  _getGlobalSchematicPositionBeforeLayout() {
     if (!this.schematicSymbolPortDef) {
       return applyToPoint2(this.parent.computeSchematicGlobalTransform(), {
         x: 0,
@@ -600,11 +760,6 @@ var Port = class extends PrimitiveComponent {
     });
     this.source_component_id = this.parent?.source_component_id;
   }
-  /**
-   * For PcbPorts, we use the parent attachment phase to determine where to place
-   * the pcb_port (prior to this phase, the smtpad/platedhole isn't guaranteed
-   * to exist)
-   */
   doInitialPcbPortRender() {
     const { db } = this.root;
     const { matchedComponents } = this;
@@ -621,17 +776,17 @@ var Port = class extends PrimitiveComponent {
       );
     }
     const pcbMatch = pcbMatches[0];
-    if ("getGlobalPcbPosition" in pcbMatch) {
+    if ("_getCircuitJsonBounds" in pcbMatch) {
       const pcb_port = db.pcb_port.insert({
         pcb_component_id: this.parent?.pcb_component_id,
         layers: ["top"],
-        ...pcbMatch.getGlobalPcbPosition(),
+        ...pcbMatch._getCircuitJsonBounds().center,
         source_port_id: this.source_port_id
       });
       this.pcb_port_id = pcb_port.pcb_port_id;
     } else {
       throw new Error(
-        `${pcbMatch.getString()} does not have a getGlobalPcbPosition method (needed for pcb_port placement)`
+        `${pcbMatch.getString()} does not have a _getGlobalPcbPositionBeforeLayout method (needed for pcb_port placement)`
       );
     }
   }
@@ -639,8 +794,8 @@ var Port = class extends PrimitiveComponent {
     const { db } = this.root;
     const { _parsedProps: props } = this;
     if (!this.parent) return;
-    const center = this.getGlobalSchematicPosition();
-    const parentCenter = this.parent?.getGlobalSchematicPosition();
+    const center = this._getGlobalSchematicPositionBeforeLayout();
+    const parentCenter = this.parent?._getGlobalSchematicPositionBeforeLayout();
     this.facingDirection = getRelativeDirection(parentCenter, center);
     const schematic_port = db.schematic_port.insert({
       schematic_component_id: this.parent?.schematic_component_id,
@@ -852,8 +1007,8 @@ var SmtPad = class extends PrimitiveComponent {
     );
   }
   doInitialPortMatching() {
-    const parentPorts = (this.parent?.children ?? []).filter(
-      (c) => c.componentName === "Port"
+    const parentPorts = this.getPrimitiveContainer()?.selectAll(
+      "port"
     );
     if (!this.props.portHints) {
       return;
@@ -870,8 +1025,10 @@ var SmtPad = class extends PrimitiveComponent {
     const { db } = this.root;
     const { _parsedProps: props } = this;
     if (!props.portHints) return;
-    const position = this.getGlobalPcbPosition();
-    const decomposedMat = decomposeTSR(this.computePcbGlobalTransform());
+    const position = this._getGlobalPcbPositionBeforeLayout();
+    const decomposedMat = decomposeTSR(
+      this._computePcbGlobalTransformBeforeLayout()
+    );
     const isRotated90 = Math.abs(decomposedMat.rotation.angle * (180 / Math.PI) - 90) < 0.01;
     let pcb_smtpad = null;
     if (props.shape === "circle") {
@@ -902,6 +1059,46 @@ var SmtPad = class extends PrimitiveComponent {
       this.pcb_smtpad_id = pcb_smtpad.pcb_smtpad_id;
     }
   }
+  _getCircuitJsonBounds() {
+    const { db } = this.root;
+    const smtpad = db.pcb_smtpad.get(this.pcb_smtpad_id);
+    if (smtpad.shape === "rect") {
+      return {
+        center: { x: smtpad.x, y: smtpad.y },
+        bounds: {
+          left: smtpad.x - smtpad.width / 2,
+          top: smtpad.y - smtpad.height / 2,
+          right: smtpad.x + smtpad.width / 2,
+          bottom: smtpad.y + smtpad.height / 2
+        },
+        width: smtpad.width,
+        height: smtpad.height
+      };
+    }
+    if (smtpad.shape === "circle") {
+      return {
+        center: { x: smtpad.x, y: smtpad.y },
+        bounds: {
+          left: smtpad.x - smtpad.radius,
+          top: smtpad.y - smtpad.radius,
+          right: smtpad.x + smtpad.radius,
+          bottom: smtpad.y + smtpad.radius
+        },
+        width: smtpad.radius * 2,
+        height: smtpad.radius * 2
+      };
+    }
+    throw new Error(
+      `circuitJson bounds calculation not implemented for shape "${smtpad.shape}"`
+    );
+  }
+  _setPositionFromLayout(newCenter) {
+    const { db } = this.root;
+    db.pcb_smtpad.update(this.pcb_smtpad_id, {
+      x: newCenter.x,
+      y: newCenter.y
+    });
+  }
 };
 
 // lib/components/primitive-components/SilkscreenPath.ts
@@ -923,7 +1120,7 @@ var SilkscreenPath = class extends PrimitiveComponent {
         `Invalid layer "${layer}" for SilkscreenPath. Must be "top" or "bottom".`
       );
     }
-    const transform = this.computePcbGlobalTransform();
+    const transform = this._computePcbGlobalTransformBeforeLayout();
     const pcb_silkscreen_path = db.pcb_silkscreen_path.insert({
       pcb_component_id: this.parent?.pcb_component_id,
       layer,
@@ -986,7 +1183,7 @@ var PlatedHole = class extends PrimitiveComponent {
     const { db } = this.root;
     const { _parsedProps: props } = this;
     if (!props.portHints) return;
-    const position = this.getGlobalPcbPosition();
+    const position = this._getGlobalPcbPositionBeforeLayout();
     if (props.shape === "circle") {
       const plated_hole_input = {
         pcb_component_id: this.parent?.pcb_component_id,
@@ -1154,10 +1351,10 @@ var Net = class extends PrimitiveComponent {
     const islandPairs = pairs(islands);
     for (const [A, B] of islandPairs) {
       const Apositions = A.ports.map(
-        (port) => port.getGlobalPcbPosition()
+        (port) => port._getGlobalPcbPositionBeforeLayout()
       );
       const Bpositions = B.ports.map(
-        (port) => port.getGlobalPcbPosition()
+        (port) => port._getGlobalPcbPositionBeforeLayout()
       );
       let closestDist = Infinity;
       let closestPair = [-1, -1];
@@ -1215,6 +1412,7 @@ var createNetsFromProps = (component, props) => {
 // lib/components/base-components/NormalComponent.ts
 var NormalComponent = class extends PrimitiveComponent {
   reactSubtrees = [];
+  isPrimitiveContainer = true;
   constructor(props) {
     super(props);
     this._addChildrenFromStringFootprint();
@@ -1345,7 +1543,7 @@ var NormalComponent = class extends PrimitiveComponent {
     const { db } = this.root;
     const { _parsedProps: props } = this;
     const pcb_component = db.pcb_component.insert({
-      center: this.getGlobalPcbPosition(),
+      center: this._getGlobalPcbPositionBeforeLayout(),
       // width/height are computed in the PcbComponentSizeCalculation phase
       width: 0,
       height: 0,
@@ -1369,7 +1567,7 @@ var NormalComponent = class extends PrimitiveComponent {
     let maxY = -Infinity;
     for (const child of this.children) {
       if (child.isPcbPrimitive) {
-        const { x, y } = child.getGlobalPcbPosition();
+        const { x, y } = child._getGlobalPcbPositionBeforeLayout();
         const { width: width2, height: height2 } = child.getPcbSize();
         minX = Math.min(minX, x - width2 / 2);
         minY = Math.min(minY, y - height2 / 2);
@@ -1577,7 +1775,7 @@ var Board = class extends Group {
     db.pcb_board.delete(this.pcb_board_id);
     this.pcb_board_id = null;
   }
-  computePcbGlobalTransform() {
+  _computePcbGlobalTransformBeforeLayout() {
     return identity4();
   }
 };
@@ -1718,8 +1916,8 @@ var mergeRoutes = (routes) => {
 
 // lib/utils/getClosest.ts
 var getDistance = (a, b) => {
-  const aPos = "getGlobalPcbPosition" in a ? a.getGlobalPcbPosition() : a;
-  const bPos = "getGlobalPcbPosition" in b ? b.getGlobalPcbPosition() : b;
+  const aPos = "_getGlobalPcbPositionBeforeLayout" in a ? a._getGlobalPcbPositionBeforeLayout() : a;
+  const bPos = "_getGlobalPcbPositionBeforeLayout" in b ? b._getGlobalPcbPositionBeforeLayout() : b;
   return Math.sqrt((aPos.x - bPos.x) ** 2 + (aPos.y - bPos.y) ** 2);
 };
 function getClosest(point, candidates) {
@@ -1740,7 +1938,7 @@ function getClosest(point, candidates) {
 // lib/components/primitive-components/Trace.ts
 import "zod";
 var portToObjective = (port) => {
-  const portPosition = port.getGlobalPcbPosition();
+  const portPosition = port._getGlobalPcbPositionBeforeLayout();
   return {
     ...portPosition,
     layers: port.getAvailablePcbLayers()
@@ -2056,7 +2254,7 @@ searched component ${targetComponent.getString()}, which has ports: ${targetComp
     for (const { port } of ports) {
       connection.pointsToConnect.push(
         projectPointInDirection(
-          port.getGlobalSchematicPosition(),
+          port._getGlobalSchematicPositionBeforeLayout(),
           port.facingDirection,
           0.1501
         )
@@ -2251,7 +2449,7 @@ var TraceHint = class extends PrimitiveComponent {
     const { _parsedProps: props } = this;
     const offsets = props.offset ? [props.offset] : props.offsets;
     if (!offsets) return [];
-    const globalTransform = this.computePcbGlobalTransform();
+    const globalTransform = this._computePcbGlobalTransformBeforeLayout();
     return offsets.map(
       (offset) => ({
         ...applyToPoint4(globalTransform, offset),
@@ -2687,6 +2885,72 @@ var Jumper = class extends NormalComponent {
   }
 };
 
+// lib/components/primitive-components/Constraint.ts
+import { constraintProps } from "@tscircuit/props";
+import "zod";
+var Constraint2 = class extends PrimitiveComponent {
+  get config() {
+    return {
+      zodProps: constraintProps
+    };
+  }
+  constructor(props) {
+    super(props);
+    if ("xdist" in props || "ydist" in props) {
+      if (!("edgeToEdge" in props) && !("centerToCenter" in props)) {
+        throw new Error(
+          "edgeToEdge, centerToCenter (or from*/to* props) must be set for xdist or ydist for <constraint />"
+        );
+      }
+    }
+  }
+  _getAllReferencedComponents() {
+    const componentsWithSelectors = [];
+    for (const key of ["left", "right", "top", "bottom"]) {
+      if (key in this._parsedProps) {
+        const selector = this._parsedProps[key];
+        const component = this.getSubcircuit().selectOne(selector);
+        if (component) {
+          componentsWithSelectors.push({
+            selector,
+            component
+          });
+        }
+      }
+    }
+    return { componentsWithSelectors };
+  }
+};
+
+// lib/components/primitive-components/Hole.ts
+import { holeProps } from "@tscircuit/props";
+var Hole = class extends PrimitiveComponent {
+  pcb_hole_id = null;
+  isPcbPrimitive = true;
+  get config() {
+    return {
+      zodProps: holeProps
+    };
+  }
+  getPcbSize() {
+    const { _parsedProps: props } = this;
+    return { width: props.holeDiameter, height: props.holeDiameter };
+  }
+  doInitialPcbPrimitiveRender() {
+    const { db } = this.root;
+    const { _parsedProps: props } = this;
+    const position = this._getGlobalPcbPositionBeforeLayout();
+    const pcb_hole = {
+      type: "pcb_hole",
+      hole_shape: "round",
+      hole_diameter: props.holeDiameter,
+      x: position.x,
+      y: position.y
+    };
+    const inserted_hole = db.pcb_hole.insert(pcb_hole);
+  }
+};
+
 // lib/Project.ts
 import { su } from "@tscircuit/soup-util";
 import { isValidElement as isValidElement2 } from "react";
@@ -2768,7 +3032,7 @@ var Circuit = class {
   computeSchematicGlobalTransform() {
     return identity5();
   }
-  computePcbGlobalTransform() {
+  _computePcbGlobalTransformBeforeLayout() {
     return identity5();
   }
   selectAll(selector) {
@@ -2790,8 +3054,10 @@ export {
   Capacitor,
   Chip,
   Circuit,
+  Constraint2 as Constraint,
   Footprint,
   Group,
+  Hole,
   Jumper,
   Led,
   Net,

package/lib/Project.ts

@@ -108,7 +108,7 @@ export class Circuit {
     return identity()
   }
 
-  computePcbGlobalTransform(): Matrix {
+  _computePcbGlobalTransformBeforeLayout(): Matrix {
     return identity()
   }
 
@@ -124,4 +124,7 @@ export class Circuit {
   }
 }
 
+/**
+ * @deprecated
+ */
 export const Project = Circuit

package/lib/components/base-components/NormalComponent.ts

@@ -46,6 +46,8 @@ export class NormalComponent<
 > extends PrimitiveComponent<ZodProps> {
   reactSubtrees: Array<ReactSubtree> = []
 
+  isPrimitiveContainer = true
+
   constructor(props: z.input<ZodProps>) {
     super(props)
     this._addChildrenFromStringFootprint()
@@ -199,7 +201,7 @@ export class NormalComponent<
     const { db } = this.root!
     const { _parsedProps: props } = this
     const pcb_component = db.pcb_component.insert({
-      center: this.getGlobalPcbPosition(),
+      center: this._getGlobalPcbPositionBeforeLayout(),
       // width/height are computed in the PcbComponentSizeCalculation phase
       width: 0,
       height: 0,
@@ -226,7 +228,7 @@ export class NormalComponent<
 
     for (const child of this.children) {
       if (child.isPcbPrimitive) {
-        const { x, y } = child.getGlobalPcbPosition()
+        const { x, y } = child._getGlobalPcbPositionBeforeLayout()
         const { width, height } = child.getPcbSize()
         minX = Math.min(minX, x - width / 2)
         minY = Math.min(minY, y - height / 2)