@tscircuit/schematic-viewer 1.1.13 → 1.1.14

package/dist/index.js

@@ -120,7 +120,7 @@ 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 = React.useState, useEffect4 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+        var useState5 = React.useState, useEffect4 = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
         var didWarnOld18Alpha = false;
         var didWarnUncachedGetSnapshot = false;
         function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
@@ -142,7 +142,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
               }
             }
           }
-          var _useState = useState4({
+          var _useState = useState5({
             inst: {
               value,
               getSnapshot
@@ -938,15 +938,19 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Schematic.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_supergrid = require("react-supergrid");
 var import_builder3 = require("@tscircuit/builder");
 var import_react_fiber = require("@tscircuit/react-fiber");
 
 // src/lib/utils/collect-element-refs.ts
 var collectElementRefs = (elm, allElms) => {
+  const source_port = allElms.find(
+    (e) => e.type === "source_port" && e.source_port_id === elm.source_port_id
+  );
+  const source_component_id = elm.source_component_id ?? source_port?.source_component_id;
   const source_component = allElms.find(
-    (e) => e.type === "source_component" && e.source_component_id === elm.source_component_id
+    (e) => e.type === "source_component" && e.source_component_id === source_component_id
   );
   if ([
     "schematic_component",
@@ -962,7 +966,9 @@ var collectElementRefs = (elm, allElms) => {
     return {
       schematic_children,
       schematic: elm,
-      source: source_component
+      source: source_component,
+      source_component,
+      source_port
     };
   }
   return null;
@@ -1257,8 +1263,16 @@ function getSVGPathBounds(ds) {
 var get_svg_path_bounds_default = getSVGPathBounds;
 
 // src/schematic-components/SVGPathComponent.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var SVGPathComponent = ({ size, center, rotation, paths }) => {
+var SVGPathComponent = ({
+  size,
+  center,
+  rotation,
+  paths,
+  zIndex,
+  hoverContent
+}) => {
   const ct = useCameraTransform();
   const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
   const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
@@ -1267,37 +1281,86 @@ var SVGPathComponent = ({ size, center, rotation, paths }) => {
   pathBounds.height = Math.max(pathBounds.height, 1);
   pathBounds.width = Math.max(pathBounds.width, 1);
   const absoluteCenter = applyToPoint(ct, center);
+  const actualAbsWidth = size.width * ct.a;
+  const actualAbsHeight = size.height * ct.d;
   const absoluteSize = {
-    width: Math.max(1, size.width * ct.a),
-    height: Math.max(1, size.height * ct.d)
+    width: Math.max(1, actualAbsWidth),
+    height: Math.max(1, actualAbsHeight)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    {
-      style: {
-        position: "absolute",
-        transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
-        left: absoluteCenter.x - absoluteSize.width / 2,
-        top: absoluteCenter.y - absoluteSize.height / 2
-        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
-      },
-      overflow: "visible",
-      width: absoluteSize.width,
-      height: absoluteSize.height,
-      viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
-      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
+  const [hovering, setHovering] = (0, import_react2.useState)(false);
+  const svgLeft = absoluteCenter.x - absoluteSize.width / 2;
+  const svgTop = absoluteCenter.y - absoluteSize.height / 2;
+  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)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: svgLeft - 4,
+            top: svgTop - 4,
+            pointerEvents: "none",
+            width: actualAbsWidth + 8,
+            height: actualAbsHeight + 8,
+            border: "1px red solid",
+            zIndex: 1e3
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
         {
-          fill: p.fill ?? "none",
-          strokeLinecap: "round",
-          strokeWidth: 2 * (p.strokeWidth || 1),
-          stroke: p.stroke || "red",
-          d: p.d
+          style: {
+            position: "absolute",
+            left: svgLeft + actualAbsWidth + 10,
+            pointerEvents: "none",
+            zIndex: 1e3,
+            color: "red",
+            top: svgTop,
+            fontFamily: "monospace",
+            fontSize: 14,
+            textShadow: `-1px 1px 0 #fff,
+              1px 1px 0 #fff,
+              1px -1px 0 #fff,
+              -1px -1px 0 #fff`
+          },
+          children: hoverContent
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        onMouseOver: () => setHovering(Boolean(hoverContent)),
+        onMouseOut: () => setHovering(false),
+        style: {
+          position: "absolute",
+          // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
+          cursor: hovering ? "pointer" : void 0,
+          zIndex,
+          transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+          left: svgLeft,
+          top: svgTop
+          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
         },
-        i
-      ))
-    }
-  );
+        overflow: "visible",
+        width: absoluteSize.width,
+        height: absoluteSize.height,
+        viewBox: `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`,
+        children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fill: p.fill ?? "none",
+            strokeLinecap: "round",
+            strokeWidth: 2 * (p.strokeWidth || 1),
+            stroke: p.stroke || "red",
+            d: p.d
+          },
+          i
+        ))
+      }
+    )
+  ] });
 };
 var SVGPathComponent_default = SVGPathComponent;
 
@@ -1343,7 +1406,7 @@ var SimpleCapacitor = ({
 };
 
 // src/lib/hooks/use-maybe-promise.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/schematic-components/ProjectComponent.tsx
 var import_builder = require("@tscircuit/builder");
@@ -1365,13 +1428,22 @@ var directionToVec = (direction) => {
 
 // src/schematic-components/SchematicPort.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var SchematicPort = ({ port: { source, schematic } }) => {
+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}`;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
+      hoverContent: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        hoverName,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+        source_port?.pin_number && `Pin ${source_port.pin_number}`
+      ] }),
       center: schematic.center,
       size: { width: 0.2, height: 0.2 },
+      zIndex: 10,
       paths: [
         {
           stroke: "blue",
@@ -1390,7 +1462,7 @@ var SchematicPort = ({ port: { source, schematic } }) => {
 var SchematicPort_default = SchematicPort;
 
 // node_modules/react-use-measure/dist/web.js
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_debounce = __toESM(require_debounce());
 function useMeasure(_temp) {
   let {
@@ -1408,7 +1480,7 @@ function useMeasure(_temp) {
   if (!ResizeObserver) {
     throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
   }
-  const [bounds, set] = (0, import_react3.useState)({
+  const [bounds, set] = (0, import_react4.useState)({
     left: 0,
     top: 0,
     width: 0,
@@ -1418,7 +1490,7 @@ function useMeasure(_temp) {
     x: 0,
     y: 0
   });
-  const state = (0, import_react3.useRef)({
+  const state = (0, import_react4.useRef)({
     element: null,
     scrollContainers: null,
     resizeObserver: null,
@@ -1426,12 +1498,12 @@ function useMeasure(_temp) {
   });
   const scrollDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.scroll : null;
   const resizeDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.resize : null;
-  const mounted = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const mounted = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     mounted.current = true;
     return () => void (mounted.current = false);
   });
-  const [forceRefresh, resizeChange, scrollChange] = (0, import_react3.useMemo)(() => {
+  const [forceRefresh, resizeChange, scrollChange] = (0, import_react4.useMemo)(() => {
     const callback = () => {
       if (!state.current.element)
         return;
@@ -1497,22 +1569,22 @@ function useMeasure(_temp) {
   };
   useOnWindowScroll(scrollChange, Boolean(scroll));
   useOnWindowResize(resizeChange);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     removeListeners();
     addListeners();
   }, [scroll, scrollChange, resizeChange]);
-  (0, import_react3.useEffect)(() => removeListeners, []);
+  (0, import_react4.useEffect)(() => removeListeners, []);
   return [ref, bounds, forceRefresh];
 }
 function useOnWindowResize(onWindowResize) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const cb = onWindowResize;
     window.addEventListener("resize", cb);
     return () => void window.removeEventListener("resize", cb);
   }, [onWindowResize]);
 }
 function useOnWindowScroll(onScroll, enabled) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (enabled) {
       const cb = onScroll;
       window.addEventListener("scroll", cb, {
@@ -1930,14 +2002,14 @@ var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/schematic-components/TableViewer.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var LazyTableViewer = (0, import_react4.lazy)(
+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_react4.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_runtime19.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LazyTableViewer, { ...params }) });
 
 // src/Schematic.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -1958,8 +2030,8 @@ var Schematic = ({
   showTable
 }) => {
   initialSoup = initialSoup ?? initialElements ?? [];
-  const [elements, setElements] = (0, import_react5.useState)(initialSoup ?? []);
-  const [project, setProject] = (0, import_react5.useState)(null);
+  const [elements, setElements] = (0, import_react6.useState)(initialSoup ?? []);
+  const [project, setProject] = (0, import_react6.useState)(null);
   const setCameraTransform = useRenderContext((s) => s.setCameraTransform);
   const cameraTransform = useRenderContext((s) => s.camera_transform);
   const [boundsRef, bounds] = useMeasure();
@@ -1969,7 +2041,7 @@ var Schematic = ({
     }
     // initialTransform: compose(scale(100, 100, 0, 0)),
   });
-  const setElementsAndCamera = (0, import_react5.useCallback)(
+  const setElementsAndCamera = (0, import_react6.useCallback)(
     (elements2) => {
       const elmBounds = ref.current.getBoundingClientRect();
       const { center, width, height } = elements2.some(
@@ -1995,7 +2067,7 @@ var Schematic = ({
     },
     [setElements, setTransform]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (initialSoup.length > 0) {
       setElementsAndCamera(initialSoup);
       return;