@tscircuit/schematic-viewer 1.2.5 → 1.2.7

package/dist/index.js

@@ -1113,6 +1113,14 @@ function scale(sx, sy = void 0, cx = void 0, cy = void 0) {
 // node_modules/transformation-matrix/src/skew.js
 var { tan } = Math;
 
+// node_modules/transformation-matrix/src/toString.js
+function toSVG(matrix) {
+  return toString(matrix);
+}
+function toString(matrix) {
+  return `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},${matrix.e},${matrix.f})`;
+}
+
 // node_modules/transformation-matrix/src/fromTransformAttribute.autogenerated.js
 function peg$subclass(child, parent) {
   function C() {
@@ -1280,8 +1288,6 @@ var SVGPathComponent = ({
   const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
   if (badRatio) {
   }
-  pathBounds.height = Math.max(pathBounds.height, 0.01);
-  pathBounds.width = Math.max(pathBounds.width, 0.01);
   const absoluteCenter = applyToPoint(ct, center);
   const actualAbsWidth = size.width * ct.a;
   const actualAbsHeight = size.height * Math.abs(ct.d);
@@ -1289,11 +1295,19 @@ var SVGPathComponent = ({
     width: Math.max(1, actualAbsWidth),
     height: Math.max(1, actualAbsHeight)
   };
-  console.log(absoluteSize, pathBounds);
   const [hovering, setHovering] = (0, import_react2.useState)(false);
   const svgLeft = absoluteCenter.x - absoluteSize.width / 2;
   const svgTop = absoluteCenter.y - absoluteSize.height / 2;
   const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`;
+  const svgToScreen = compose(
+    // translate(0, 0)
+    scale(
+      actualAbsWidth / pathBounds.width,
+      actualAbsHeight / pathBounds.height
+    ),
+    translate(-pathBounds.minX, -pathBounds.minY)
+    // translate(center.x, center.y)
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     hovering && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1301,11 +1315,11 @@ var SVGPathComponent = ({
         {
           style: {
             position: "absolute",
-            left: svgLeft - 4,
-            top: svgTop - 4,
+            left: svgLeft - 6,
+            top: svgTop - 6,
             pointerEvents: "none",
-            width: actualAbsWidth + 8,
-            height: actualAbsHeight + 8,
+            width: actualAbsWidth + 12,
+            height: actualAbsHeight + 12,
             border: "1px red solid",
             mixBlendMode: "difference",
             zIndex: 1e3
@@ -1348,18 +1362,20 @@ var SVGPathComponent = ({
           ].join(" "),
           left: svgLeft,
           top: svgTop
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
+          // overflow: "hidden",
+          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
+          // backgroundColor: "rgba(255, 0, 0, 0.1)",
         },
         overflow: "visible",
         width: absoluteSize.width,
         height: absoluteSize.height,
-        viewBox,
         children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
           {
+            transform: toSVG(svgToScreen),
             fill: p.fill ?? "none",
             strokeLinecap: "round",
-            strokeWidth: 2 * (p.strokeWidth || 1),
+            strokeWidth: 1.5 * (p.strokeWidth || 1),
             stroke: p.stroke || "red",
             d: p.d
           },
@@ -1404,8 +1420,8 @@ var SimpleCapacitor = ({
       size: schematic.size,
       paths: [
         { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
-        { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
-        { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 12 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 18 0 l 0 30" },
         { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
       ]
     }
@@ -1439,6 +1455,7 @@ var SchematicPort = ({
   port: { source_port, source_component, schematic }
 }) => {
   const hoverName = source_component?.name ? `.${source_component.name} > .${source_port?.name ?? source_port?.pin_number}` : `.${source_port?.name ?? source_port?.pin_number}`;
+  const vec = directionToVec(schematic.facing_direction);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SVGPathComponent,
     {
@@ -1449,7 +1466,10 @@ var SchematicPort = ({
         source_port?.pin_number && `Pin ${source_port.pin_number}`
       ] }),
       center: schematic.center,
-      size: { width: 0.2, height: 0.2 },
+      size: {
+        width: 0.2 + Math.abs(vec.x) * 0.04,
+        height: 0.2 + Math.abs(vec.y) * 0.04
+      },
       zIndex: 10,
       paths: [
         {
@@ -1460,7 +1480,7 @@ var SchematicPort = ({
         schematic.facing_direction ? {
           stroke: "blue",
           strokeWidth: 0.5,
-          d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${directionToVec(schematic.facing_direction).y * 7}`
+          d: `M 5 5 l ${vec.x * 7} ${vec.y * 7}`
         } : null
       ].filter(Boolean)
     }