@tscircuit/schematic-viewer 1.4.1 → 1.4.2

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;
@@ -1538,7 +1538,7 @@ var SVGPathComponent = ({
 }) => {
   const ct = useGlobalStore((s) => s.camera_transform);
   const pathBounds = get_svg_path_bounds_default(
-    paths.filter((p) => p.type !== "circle").map((p) => p.d)
+    paths.filter((p) => p.type !== "circle" && p.type !== "text").map((p) => p.d)
   );
   const padding = { x: 0, y: 0 };
   const absoluteCenter = applyToPoint(ct, center);
@@ -1561,59 +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",
-          {
-            transform: toSVG(
-              compose(
-                scale(1, 1),
-                // Add a smaller scale factor for circles
-                svgToScreen
-              )
-            ),
-            cx: p.cx,
-            cy: p.cy,
-            r: p.r,
-            fill: "none",
-            strokeWidth: 2.25 * (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;
@@ -1823,18 +1849,21 @@ var SchematicChip = ({
   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") {
-      return;
+      continue;
     }
     switch (side) {
       case "left":
@@ -1842,17 +1871,17 @@ var SchematicChip = ({
         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":
@@ -1860,8 +1889,8 @@ var SchematicChip = ({
         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":
@@ -1869,8 +1898,8 @@ var SchematicChip = ({
         y = chipHeight / 2;
         endX = x;
         endY = y + portLength;
-        labelX = x;
-        labelY = endY + labelOffset;
+        pinX = x - labelOffset;
+        pinY = y + portLength / 2;
         rotation2 = -90;
         break;
     }
@@ -1885,20 +1914,23 @@ var SchematicChip = ({
       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,
-        rotation: rotation2
+        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,
@@ -1909,25 +1941,6 @@ var SchematicChip = ({
         paths
       }
     ),
-    pinLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      SchematicText_default,
-      {
-        schematic_text: {
-          anchor: label.anchor,
-          rotation: 0,
-          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",
-          color: colorMap.schematic.pin_number
-        }
-      },
-      index
-    )),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SchematicText_default,
       {
@@ -2318,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 };
@@ -2346,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;
@@ -2425,7 +2438,7 @@ var SchematicWithoutContext = ({
               allElements: elements
             },
             JSON.stringify(elm)
-          ) }, i))
+          ) }, `${elm}`))
         ]
       }
     ),