@tscircuit/schematic-viewer 1.4.0 → 1.4.1

package/biome.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "ignore": ["cosmos-export", "dist", "package.json"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "useNumberNamespace": "off",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": true,
+            "requireAscii": true,
+            "filenameCases": ["kebab-case", "export"]
+          }
+        }
+      }
+    }
+  }
+}

package/dist/index.js

@@ -1537,7 +1537,9 @@ var SVGPathComponent = ({
   hoverContent
 }) => {
   const ct = useGlobalStore((s) => s.camera_transform);
-  const pathBounds = get_svg_path_bounds_default(paths.filter((p) => p.type !== "circle").map((p) => p.d));
+  const pathBounds = get_svg_path_bounds_default(
+    paths.filter((p) => p.type !== "circle").map((p) => p.d)
+  );
   const padding = { x: 0, y: 0 };
   const absoluteCenter = applyToPoint(ct, center);
   const innerSize = {
@@ -1583,11 +1585,18 @@ var SVGPathComponent = ({
         (p, i) => p.type === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "circle",
           {
+            transform: toSVG(
+              compose(
+                scale(1, 1),
+                // Add a smaller scale factor for circles
+                svgToScreen
+              )
+            ),
             cx: p.cx,
             cy: p.cy,
             r: p.r,
-            fill: p.fill ?? "none",
-            strokeWidth: 1.5 * (p.strokeWidth || 1),
+            fill: "none",
+            strokeWidth: 2.25 * (p.strokeWidth || 1),
             stroke: p.stroke || "red"
           },
           i
@@ -1785,7 +1794,8 @@ var SchematicText = ({ schematic_text }) => {
         position: "absolute",
         fontSize: projectedTextSize,
         left: tPos.x + offset[0],
-        top: tPos.y + offset[1]
+        top: tPos.y + offset[1],
+        color: schematic_text.color
       },
       children: text
     }
@@ -1795,7 +1805,9 @@ var SchematicText_default = SchematicText;
 
 // src/schematic-components/SchematicChip.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var SchematicChip = ({ component: { source, schematic, allElements } }) => {
+var SchematicChip = ({
+  component: { source, schematic, allElements }
+}) => {
   const { center, size, rotation, schematic_component_id } = schematic;
   const { manufacturerPartNumber, name } = source;
   const chipWidth = size.width;
@@ -1820,6 +1832,10 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
     let x = 0, y = 0, endX = 0, endY = 0;
     let labelX = 0, labelY = 0;
     let textAnchor = "middle";
+    let rotation2 = 0;
+    if (side === "center") {
+      return;
+    }
     switch (side) {
       case "left":
         x = -chipWidth / 2;
@@ -1846,6 +1862,7 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
         endY = y - portLength;
         labelX = x;
         labelY = endY + labelOffset;
+        rotation2 = -90;
         break;
       case "top":
         x = chipWidth / 2 - distanceFromEdge;
@@ -1854,11 +1871,12 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
         endY = y + portLength;
         labelX = x;
         labelY = endY + labelOffset;
+        rotation2 = -90;
         break;
     }
     paths.push({
       type: "path",
-      strokeWidth: 0.02,
+      strokeWidth: 0.015,
       stroke: colorMap.schematic.component_outline,
       d: `M ${x},${y} L ${endX},${endY}`
     });
@@ -1876,7 +1894,8 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
         x: labelX,
         y: labelY,
         text: `${pinNumber}`,
-        anchor: textAnchor
+        anchor: textAnchor,
+        rotation: rotation2
       });
     }
   });
@@ -1895,6 +1914,7 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
       {
         schematic_text: {
           anchor: label.anchor,
+          rotation: 0,
           position: {
             x: center.x + label.x,
             y: center.y + label.y
@@ -1902,7 +1922,8 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
           schematic_component_id: "SYNTHETIC",
           schematic_text_id: `PIN_LABEL_${index}`,
           text: label.text,
-          type: "schematic_text"
+          type: "schematic_text",
+          color: colorMap.schematic.pin_number
         }
       },
       index
@@ -1911,7 +1932,8 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
       SchematicText_default,
       {
         schematic_text: {
-          anchor: "center",
+          anchor: "right",
+          rotation: 0,
           position: {
             x: center.x,
             y: center.y - chipHeight / 2 - 0.2
@@ -1919,7 +1941,8 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
           schematic_component_id: "SYNTHETIC",
           schematic_text_id: "SYNTHETIC_MPN",
           text: manufacturerPartNumber,
-          type: "schematic_text"
+          type: "schematic_text",
+          color: colorMap.schematic.reference
         }
       }
     ),
@@ -1927,7 +1950,8 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
       SchematicText_default,
       {
         schematic_text: {
-          anchor: "center",
+          anchor: "right",
+          rotation: 0,
           position: {
             x: center.x,
             y: center.y + chipHeight / 2 + 0.2
@@ -1935,7 +1959,8 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
           schematic_component_id: "SYNTHETIC",
           schematic_text_id: "SYNTHETIC_NAME",
           text: name,
-          type: "schematic_text"
+          type: "schematic_text",
+          color: colorMap.schematic.reference
         }
       }
     )
@@ -1955,11 +1980,21 @@ var SchematicComponent = ({ component }) => {
     case "simple_ground":
     case "simple_inductor":
     case "simple_diode": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SchematicComponentFromSymbol, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SchematicComponentFromSymbol,
+        {
+          component: { source, schematic }
+        }
+      );
     }
     case "simple_chip":
     case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SchematicChip, { component: { source, schematic, allElements } });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SchematicChip,
+        {
+          component: { source, schematic, allElements }
+        }
+      );
     }
     default: {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
@@ -1974,7 +2009,9 @@ var SchematicComponent_default = SchematicComponent;
 // src/schematic-components/SchematicComponentFromSymbol.tsx
 var import_schematic_symbols = require("schematic-symbols");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var SchematicComponentFromSymbol = ({ component: { source, schematic } }) => {
+var SchematicComponentFromSymbol = ({
+  component: { source, schematic }
+}) => {
   const { center, rotation } = schematic;
   const symbol = import_schematic_symbols.symbols[schematic.symbol_name];
   const paths = symbol.primitives.filter((p) => p.type === "path").map((p) => ({
@@ -2151,6 +2188,7 @@ var SchematicNetLabel = ({
       SchematicText_default,
       {
         schematic_text: {
+          rotation: is_vertical ? 0 : getRotationFromAnchorSide(anchor_side),
           anchor: is_vertical ? "center" : anchor_side,
           position: {
             x: net_label.center.x + anchor_vec.x,
@@ -2159,7 +2197,8 @@ var SchematicNetLabel = ({
           schematic_component_id: "SYNTHETIC",
           schematic_text_id: "SYNTHETIC",
           text: net_label.text,
-          type: "schematic_text"
+          type: "schematic_text",
+          color: colorMap.schematic.net_name
         }
       }
     )