@tscircuit/schematic-viewer 1.2.7 → 1.2.9

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 declare const Schematic: ({ children, elements: initialElements, soup: initialSoup, style, showTable, }: {
     children?: any;
-    /** @deprecated */
+    /** @deprecated use soup */
     elements?: any;
     soup?: any;
     style?: any;

package/dist/index.js

@@ -1288,22 +1288,28 @@ var SVGPathComponent = ({
   const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
   if (badRatio) {
   }
+  const padding = {
+    x: 0,
+    y: 0
+  };
   const absoluteCenter = applyToPoint(ct, center);
-  const actualAbsWidth = size.width * ct.a;
-  const actualAbsHeight = size.height * Math.abs(ct.d);
-  const absoluteSize = {
-    width: Math.max(1, actualAbsWidth),
-    height: Math.max(1, actualAbsHeight)
+  const innerSize = {
+    width: size.width * ct.a,
+    height: size.height * Math.abs(ct.d)
+  };
+  const fullSize = {
+    width: innerSize.width + padding.x * 2,
+    height: innerSize.height + padding.y * 2
   };
   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 svgLeft = absoluteCenter.x - fullSize.width / 2;
+  const svgTop = absoluteCenter.y - fullSize.height / 2;
+  const preferredRatio = pathBounds.width === 0 ? innerSize.height / pathBounds.height : innerSize.width / pathBounds.width;
   const svgToScreen = compose(
     // translate(0, 0)
     scale(
-      actualAbsWidth / pathBounds.width,
-      actualAbsHeight / pathBounds.height
+      pathBounds.width === 0 ? preferredRatio : fullSize.width / pathBounds.width,
+      pathBounds.height === 0 ? preferredRatio : fullSize.height / pathBounds.height
     ),
     translate(-pathBounds.minX, -pathBounds.minY)
     // translate(center.x, center.y)
@@ -1318,8 +1324,8 @@ var SVGPathComponent = ({
             left: svgLeft - 6,
             top: svgTop - 6,
             pointerEvents: "none",
-            width: actualAbsWidth + 12,
-            height: actualAbsHeight + 12,
+            width: fullSize.width + 12,
+            height: fullSize.height + 12,
             border: "1px red solid",
             mixBlendMode: "difference",
             zIndex: 1e3
@@ -1331,7 +1337,7 @@ var SVGPathComponent = ({
         {
           style: {
             position: "absolute",
-            left: svgLeft + actualAbsWidth + 10,
+            left: svgLeft + fullSize.width + 10,
             pointerEvents: "none",
             zIndex: 1e3,
             color: "red",
@@ -1367,8 +1373,8 @@ var SVGPathComponent = ({
           // backgroundColor: "rgba(255, 0, 0, 0.1)",
         },
         overflow: "visible",
-        width: absoluteSize.width,
-        height: absoluteSize.height,
+        width: fullSize.width,
+        height: fullSize.height,
         children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
           {
@@ -1446,7 +1452,7 @@ var directionToVec = (direction) => {
   else if (direction === "right")
     return { x: 1, y: 0 };
   else
-    throw new Error("Invalid direction");
+    throw new Error(`Invalid direction "${direction}"`);
 };
 
 // src/schematic-components/SchematicPort.tsx
@@ -1697,12 +1703,60 @@ var RenderError_default = ({ text }) => {
   );
 };
 
-// src/schematic-components/SchematicTrace.tsx
+// src/schematic-components/SVGPathComponent2.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var SVGPathComponent2 = ({
+  size,
+  center,
+  rotation,
+  paths,
+  zIndex,
+  invertY,
+  shiftToBottom,
+  hoverContent
+}) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
+        pointerEvents: "none",
+        zIndex
+        // overflow: "hidden",
+        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
+        // backgroundColor: "rgba(255, 0, 0, 0.1)",
+      },
+      overflow: "visible",
+      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          transform: toSVG(ct),
+          fill: p.fill ?? "none",
+          strokeLinecap: "round",
+          strokeWidth: 1.5 * (p.strokeWidth || 1),
+          stroke: p.stroke || "red",
+          d: p.d
+        },
+        i
+      ))
+    }
+  );
+};
+var SVGPathComponent2_default = SVGPathComponent2;
+
+// src/schematic-components/SchematicTrace.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SchematicTrace = ({ trace: { source, schematic } }) => {
   const edges = schematic.edges;
   if (edges.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
   }
   const path = (0, import_svg_path_generator.default)();
   for (let i = 0; i < edges.length; i++) {
@@ -1717,8 +1771,8 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    SVGPathComponent_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    SVGPathComponent2_default,
     {
       rotation: 0,
       center,
@@ -1737,7 +1791,7 @@ var SchematicTrace_default = SchematicTrace;
 
 // src/schematic-components/SchematicBug.tsx
 var import_builder2 = require("@tscircuit/builder");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
   const port_arrangement = {
     top_size: 0,
@@ -1774,7 +1828,7 @@ var SchematicBug = ({ component: { source, schematic } }) => {
     x: schematic.center.x + (actualSize.minX + actualSize.maxX) / 2,
     y: schematic.center.y + (actualSize.minY + actualSize.maxY) / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1786,11 +1840,11 @@ var SchematicBug = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimplePowerSource.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SimplePowerSource = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1802,6 +1856,18 @@ var SimplePowerSource = ({
           stroke: "red",
           strokeWidth: 1,
           d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3"
+        },
+        // positive symbol
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          d: "M 8 -9 L 8 -6 M 9.5 -7.5 L 6.5 -7.5"
+        },
+        // negative symbol
+        {
+          stroke: "red",
+          strokeWidth: 0.5,
+          d: "M 9.5 7.5 L 6.5 7.5"
         }
       ]
     }
@@ -1809,9 +1875,9 @@ var SimplePowerSource = ({
 };
 
 // src/schematic-components/SimpleGround.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SimpleGround = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1831,9 +1897,9 @@ var SimpleGround = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimpleInductor.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SimpleInductor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1852,38 +1918,38 @@ var SimpleInductor = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimpleDiode.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 
 // src/schematic-components/SchematicComponent.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SchematicComponent = ({ component }) => {
   const { source, schematic } = component;
   if (!source.ftype)
     return null;
   switch (source.ftype) {
     case "simple_resistor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleResistor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleResistor, { component: { source, schematic } });
     }
     case "simple_capacitor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleCapacitor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleCapacitor, { component: { source, schematic } });
     }
     case "simple_power_source": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimplePowerSource, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimplePowerSource, { component: { source, schematic } });
     }
     case "simple_ground": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleGround, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleGround, { component: { source, schematic } });
     }
     case "simple_inductor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SimpleInductor, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleInductor, { component: { source, schematic } });
     }
     case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SchematicBug, { component: { source, schematic } });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicBug, { component: { source, schematic } });
     }
     case "simple_diode": {
       return null;
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
         "unknown ftype: ",
         component.source.ftype
       ] });
@@ -1893,10 +1959,10 @@ var SchematicComponent = ({ component }) => {
 var SchematicComponent_default = SchematicComponent;
 
 // src/schematic-components/SchematicBox.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var SchematicBox = ({ box: { schematic } }) => {
   const { width: w, height: h } = schematic;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1916,7 +1982,7 @@ var SchematicBox_default = SchematicBox;
 
 // src/schematic-components/SchematicLine.tsx
 var import_svg_path_generator2 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SchematicLine = ({ line: { schematic } }) => {
   const { x1, x2, y1, y2 } = schematic;
   const dx = x2 - x1;
@@ -1926,13 +1992,11 @@ var SchematicLine = ({ line: { schematic } }) => {
   path.lineTo(x2, y2);
   const d = path.toString();
   const pathBounds = get_svg_path_bounds_default(d);
-  pathBounds.height = Math.max(pathBounds.height, 1);
-  pathBounds.width = Math.max(pathBounds.width, 1);
   const center = {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1952,7 +2016,7 @@ var SchematicLine_default = SchematicLine;
 
 // src/schematic-components/SchematicPath.tsx
 var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SchematicPath = (props) => {
   const { points, is_filled, is_closed, fill_color } = props.path.schematic;
   if (points.length === 0)
@@ -1973,7 +2037,7 @@ var SchematicPath = (props) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1992,14 +2056,60 @@ var SchematicPath = (props) => {
 };
 var SchematicPath_default = SchematicPath;
 
+// src/schematic-components/SchematicNetLabel.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SchematicNetLabel = ({
+  net_label
+}) => {
+  console.log({ net_label });
+  const text_width = net_label.text.length * 0.15;
+  const path_width = 31 + net_label.text.length * 5;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      SVGPathComponent_default,
+      {
+        rotation: 0,
+        center: net_label.center,
+        size: {
+          width: 0.05 + text_width,
+          height: 0.175
+        },
+        paths: [
+          {
+            stroke: "gray",
+            strokeWidth: 0.75,
+            d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: "left",
+          position: {
+            x: net_label.center.x - text_width / 4 + 0.025,
+            y: net_label.center.y
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: net_label.text,
+          type: "schematic_text"
+        }
+      }
+    )
+  ] });
+};
+
 // src/schematic-components/SchematicElement.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SchematicComponent_default,
       {
         component: collectElementRefs(element, allElements)
@@ -2007,25 +2117,28 @@ var SchematicElement = ({
     );
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_port") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_box") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_line") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_path") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicText_default, { schematic_text: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicText_default, { schematic_text: element });
+  }
+  if (element.type === "schematic_net_label") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SchematicNetLabel, { net_label: element });
   }
   if (element.type === "source_error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RenderError_default, { text: element.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RenderError_default, { text: element.message });
   }
   return null;
 };
@@ -2036,19 +2149,19 @@ var import_react_error_boundary = require("react-error-boundary");
 
 // src/schematic-components/TableViewer.tsx
 var import_react5 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var LazyTableViewer = (0, import_react5.lazy)(
   () => import("@tscircuit/table-viewer").then((m) => ({
     default: m.SoupTableViewer
   }))
 );
-var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LazyTableViewer, { ...params }) });
+var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LazyTableViewer, { ...params }) });
 
 // src/Schematic.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ErrorBoundary = import_react_error_boundary.ErrorBoundary;
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { color: "red" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { color: "red" }, children: [
     "error rendering ",
     elm.type,
     ": ",
@@ -2114,8 +2227,8 @@ var Schematic = ({
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         style: {
@@ -2133,7 +2246,7 @@ var Schematic = ({
           boundsRef(el);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             import_react_supergrid.SuperGrid,
             {
               stringifyCoord: (x, y, z) => {
@@ -2146,7 +2259,7 @@ var Schematic = ({
               transform: cameraTransform
             }
           ),
-          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             SchematicElement,
             {
               element: elm,
@@ -2157,7 +2270,7 @@ var Schematic = ({
         ]
       }
     ),
-    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewer, { elements })
+    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TableViewer, { elements })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node: