@abbox/inspector 0.4.13 → 0.4.14

package/dist/runtime/inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../src/runtime/inspector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAyCxE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CAkTlB"}
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../src/runtime/inspector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAyCxE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAC/B,gBAAgB,CA2UlB"}

package/dist/runtime/inspector.js

@@ -125,11 +125,29 @@ export function createInspectorRuntime(options) {
         positionHighlight(overlay.highlight, rectForElement(el));
         options.onHover?.(payloadFor(el));
     }
+    let reportedSize = "";
+    const sizeKey = (el) => {
+        const rect = el.getBoundingClientRect();
+        return `${Math.round(rect.width)}x${Math.round(rect.height)}`;
+    };
+    /** Re-sends the selection when its size changes (viewport resize, reflow). */
+    const sizeObserver = typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(() => {
+            if (!selected?.isConnected || sizeKey(selected) === reportedSize)
+                return;
+            reportedSize = sizeKey(selected);
+            positionSelectedHighlight(overlay.selectedHighlight, rectForElement(selected));
+            options.onSelect?.(payloadFor(selected));
+        });
     function select(el) {
         selected = el;
         hovered = el;
         positionSelectedHighlight(overlay.selectedHighlight, rectForElement(el));
         positionHighlight(overlay.highlight, rectForElement(el));
+        sizeObserver?.disconnect();
+        reportedSize = sizeKey(el);
+        sizeObserver?.observe(el);
         options.onSelect?.(payloadFor(el));
     }
     const onCurrentRoute = (marker) => !marker.route ||
@@ -243,6 +261,7 @@ export function createInspectorRuntime(options) {
     function clearSelection() {
         hovered = null;
         selected = null;
+        sizeObserver?.disconnect();
         hideHighlight(overlay.highlight);
         hideSelectedHighlight(overlay.selectedHighlight);
         options.onClear?.();
@@ -288,6 +307,7 @@ export function createInspectorRuntime(options) {
             win.removeEventListener("resize", onScrollOrResize);
             win.removeEventListener("popstate", scheduleRefresh);
             observer?.disconnect();
+            sizeObserver?.disconnect();
             if (refreshFrame)
                 win.cancelAnimationFrame(refreshFrame);
             hovered = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abbox/inspector",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "publishConfig": {
     "access": "public"
   },