@tscircuit/schematic-viewer 1.4.0 → 1.4.2

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.css

@@ -0,0 +1,7 @@
+@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap";
+
+/* src/pages/style.css */
+.schematic-text {
+  font-family: "IBM Plex Mono", monospace;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/style.css"],"sourcesContent":["@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap\");\n\n.schematic-text {\n  font-family: \"IBM Plex Mono\", monospace;\n}\n"],"mappings":";;;AAEA;AACE;AAAA;","names":[]}

package/dist/index.js

@@ -89,8 +89,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React2 = require("react");
-        var ReactSharedInternals = React2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var React = require("react");
+        var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function error(format) {
           {
             {
@@ -120,13 +120,13 @@ var require_use_sync_external_store_shim_development = __commonJS({
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
-        var useState4 = React2.useState, useEffect3 = React2.useEffect, useLayoutEffect = React2.useLayoutEffect, useDebugValue2 = React2.useDebugValue;
+        var useState4 = React.useState, useEffect3 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
         var didWarnOld18Alpha = false;
         var didWarnUncachedGetSnapshot = false;
         function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
           {
             if (!didWarnOld18Alpha) {
-              if (React2.startTransition !== void 0) {
+              if (React.startTransition !== void 0) {
                 didWarnOld18Alpha = true;
                 error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.");
               }
@@ -191,7 +191,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
         var isServerEnvironment = !canUseDOM;
         var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-        var useSyncExternalStore$2 = React2.useSyncExternalStore !== void 0 ? React2.useSyncExternalStore : shim;
+        var useSyncExternalStore$2 = React.useSyncExternalStore !== void 0 ? React.useSyncExternalStore : shim;
         exports.useSyncExternalStore = useSyncExternalStore$2;
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
@@ -285,14 +285,14 @@ var require_with_selector_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React2 = require("react");
+        var React = require("react");
         var shim = require_shim();
         function is(x, y) {
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
         var useSyncExternalStore = shim.useSyncExternalStore;
-        var useRef3 = React2.useRef, useEffect3 = React2.useEffect, useMemo3 = React2.useMemo, useDebugValue2 = React2.useDebugValue;
+        var useRef3 = React.useRef, useEffect3 = React.useEffect, useMemo3 = React.useMemo, useDebugValue2 = React.useDebugValue;
         function useSyncExternalStoreWithSelector2(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
           var instRef = useRef3(null);
           var inst;
@@ -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" && p.type !== "text").map((p) => p.d)
+  );
   const padding = { x: 0, y: 0 };
   const absoluteCenter = applyToPoint(ct, center);
   const innerSize = {
@@ -1559,52 +1561,85 @@ var SVGPathComponent = ({
     ),
     translate(-pathBounds.minX, -pathBounds.minY)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "svg",
-    {
-      onMouseOver: () => setHovering(Boolean(hoverContent)),
-      onMouseOut: () => setHovering(false),
-      style: {
-        position: "absolute",
-        cursor: hovering ? "pointer" : void 0,
-        zIndex,
-        transform: [
-          invertY ? "scale(1, 1)" : "scale(1, -1)",
-          shiftToBottom ? "translate(0, 100%)" : "",
-          rotation === 0 ? "" : `rotate(${rotation}deg)`
-        ].join(" "),
-        left: svgLeft,
-        top: svgTop
-      },
-      overflow: "visible",
-      width: fullSize.width,
-      height: fullSize.height,
-      children: paths.map(
-        (p, i) => p.type === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "circle",
-          {
-            cx: p.cx,
-            cy: p.cy,
-            r: p.r,
-            fill: p.fill ?? "none",
-            strokeWidth: 1.5 * (p.strokeWidth || 1),
-            stroke: p.stroke || "red"
-          },
-          i
-        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "path",
-          {
-            transform: toSVG(svgToScreen),
-            fill: p.fill ?? "none",
-            strokeLinecap: "round",
-            strokeWidth: 1.5 * (p.strokeWidth || 1),
-            stroke: p.stroke || "red",
-            d: p.d || ""
-          },
-          i
-        )
-      )
-    }
+  const baseFontSize = 0.15;
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        onMouseOver: () => setHovering(Boolean(hoverContent)),
+        onFocus: () => setHovering(Boolean(hoverContent)),
+        onMouseOut: () => setHovering(false),
+        onBlur: () => setHovering(false),
+        style: {
+          position: "absolute",
+          cursor: hovering ? "pointer" : void 0,
+          zIndex,
+          transform: [
+            invertY ? "scale(1, 1)" : "scale(1, -1)",
+            shiftToBottom ? "translate(0, 100%)" : "",
+            rotation === 0 ? "" : `rotate(${rotation}deg)`
+          ].join(" "),
+          left: svgLeft,
+          top: svgTop
+        },
+        overflow: "visible",
+        width: fullSize.width,
+        height: fullSize.height,
+        children: paths.map((p, i) => {
+          if (p.type === "circle") {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "circle",
+              {
+                transform: toSVG(compose(scale(1, 1), svgToScreen)),
+                cx: p.cx,
+                cy: p.cy,
+                r: p.r,
+                fill: "none",
+                strokeWidth: 2.25 * (p.strokeWidth || 1),
+                stroke: p.stroke || "red"
+              },
+              `${p.type}-${i}`
+            );
+          }
+          if (p.type === "text") {
+            const transformedPos = applyToPoint(svgToScreen, { x: p.cx, y: p.cy });
+            const scaleFactor = fullSize.width / pathBounds.width || 1;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "text",
+              {
+                className: "schematic-text",
+                x: transformedPos.x,
+                y: transformedPos.y,
+                fill: p.fill,
+                fontSize: baseFontSize * scaleFactor,
+                textAnchor: p.anchor || "middle",
+                dominantBaseline: "middle",
+                transform: `scale(1,-1) rotate(${p.rotation || 0})`,
+                style: {
+                  transformBox: "fill-box",
+                  transformOrigin: "center"
+                },
+                stroke: p.stroke,
+                children: p.text
+              }
+            ) }, `${p.type}-${i}`);
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              transform: toSVG(svgToScreen),
+              fill: p.fill ?? "none",
+              strokeLinecap: "round",
+              strokeWidth: 1.5 * (p.strokeWidth || 1),
+              stroke: p.stroke || "red",
+              d: p.d || ""
+            },
+            `${p.type}-${i}`
+          );
+        })
+      }
+    )
   );
 };
 var SVGPathComponent_default = SVGPathComponent;
@@ -1785,7 +1820,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 +1831,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;
@@ -1811,32 +1849,39 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
   const schematicPorts = allElements.filter(
     (item) => item.type === "schematic_port" && item.schematic_component_id === schematic_component_id
   );
-  const portLength = 0.2;
-  const circleRadius = 0.05;
+  const portLength = 0.5;
+  const circleRadius = 0.04;
   const labelOffset = 0.1;
-  const pinLabels = [];
-  schematicPorts.forEach((port) => {
+  for (const port of schematicPorts) {
     const { side, pinNumber, distanceFromEdge } = port.center;
-    let x = 0, y = 0, endX = 0, endY = 0;
-    let labelX = 0, labelY = 0;
+    let x = 0;
+    let y = 0;
+    let endX = 0;
+    let endY = 0;
+    let pinX = 0;
+    let pinY = 0;
     let textAnchor = "middle";
+    let rotation2 = 0;
+    if (side === "center") {
+      continue;
+    }
     switch (side) {
       case "left":
         x = -chipWidth / 2;
         y = -chipHeight / 2 + distanceFromEdge;
         endX = x - portLength;
         endY = y;
-        labelX = endX;
-        labelY = y + labelOffset;
-        textAnchor = "end";
+        pinX = x - portLength / 2;
+        pinY = y + labelOffset;
+        textAnchor = "middle";
         break;
       case "right":
         x = chipWidth / 2;
         y = chipHeight / 2 - distanceFromEdge;
         endX = x + portLength;
         endY = y;
-        labelX = endX - labelOffset;
-        labelY = y + labelOffset;
+        pinX = x + portLength / 2 - labelOffset;
+        pinY = y + labelOffset;
         textAnchor = "start";
         break;
       case "bottom":
@@ -1844,21 +1889,23 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
         y = -chipHeight / 2;
         endX = x;
         endY = y - portLength;
-        labelX = x;
-        labelY = endY + labelOffset;
+        pinX = x - labelOffset;
+        pinY = y - portLength / 2;
+        rotation2 = -90;
         break;
       case "top":
         x = chipWidth / 2 - distanceFromEdge;
         y = chipHeight / 2;
         endX = x;
         endY = y + portLength;
-        labelX = x;
-        labelY = endY + labelOffset;
+        pinX = x - labelOffset;
+        pinY = y + portLength / 2;
+        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}`
     });
@@ -1867,19 +1914,23 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
       cx: endX,
       cy: endY,
       r: circleRadius,
-      strokeWidth: 0.01,
+      strokeWidth: 5e-3,
       stroke: colorMap.schematic.component_outline,
       fill: colorMap.schematic.component_outline
     });
     if (pinNumber !== void 0) {
-      pinLabels.push({
-        x: labelX,
-        y: labelY,
+      paths.push({
+        type: "text",
+        cx: pinX,
+        cy: pinY,
         text: `${pinNumber}`,
-        anchor: textAnchor
+        anchor: textAnchor,
+        rotation: rotation2,
+        strokeWidth: 5e-3,
+        stroke: colorMap.schematic.pin_number
       });
     }
-  });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SVGPathComponent_default,
@@ -1890,28 +1941,12 @@ var SchematicChip = ({ component: { source, schematic, allElements } }) => {
         paths
       }
     ),
-    pinLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      SchematicText_default,
-      {
-        schematic_text: {
-          anchor: label.anchor,
-          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"
-        }
-      },
-      index
-    )),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SchematicText_default,
       {
         schematic_text: {
-          anchor: "center",
+          anchor: "right",
+          rotation: 0,
           position: {
             x: center.x,
             y: center.y - chipHeight / 2 - 0.2
@@ -1919,7 +1954,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 +1963,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 +1972,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 +1993,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 +2022,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 +2201,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 +2210,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
         }
       }
     )
@@ -2279,7 +2331,7 @@ var SchematicWithoutContext = ({
       );
       updateTransform(newTransform);
     }
-  }, [elements, bounds.width, bounds.height, updateTransform]);
+  }, [elements, updateTransform]);
   const handleMouseDown = (0, import_react8.useCallback)((e) => {
     isDraggingRef.current = true;
     lastMousePosRef.current = { x: e.clientX, y: e.clientY };
@@ -2307,7 +2359,7 @@ var SchematicWithoutContext = ({
   const handleWheel = (0, import_react8.useCallback)(
     (e) => {
       e.preventDefault();
-      const scaleMultiplier = Math.pow(0.999, e.deltaY);
+      const scaleMultiplier = 0.999 ** e.deltaY;
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -2386,7 +2438,7 @@ var SchematicWithoutContext = ({
               allElements: elements
             },
             JSON.stringify(elm)
-          ) }, i))
+          ) }, `${elm}`))
         ]
       }
     ),