@marsaude/devtools-shell 0.1.6 → 0.1.7

package/fesm2022/marsaude-devtools-shell.mjs

@@ -220,7 +220,8 @@ class DevtoolsShellComponent {
                 cursor: this.dragging() ? 'grabbing' : 'grab',
             };
         }, ...(ngDevMode ? [{ debugName: "fabStyle" }] : []));
-        /** Radial speed-dial geometry — ported verbatim (R=268, 5°→87°). */
+        /** Radial speed-dial geometry — items fan along a 5°→87° arc; the radius
+         *  scales with the item count (clamped to the viewport) so they never pile up. */
         this.dialItems = computed(() => {
             const S = FAB_SIZE;
             const W = this.winW();
@@ -233,12 +234,26 @@ class DevtoolsShellComponent {
             const vy = cy < H * 0.42 ? 1 : -1;
             const acts = this.actions();
             const N = acts.length;
-            const R = 268;
             const a0 = (5 * Math.PI) / 180;
             const a1 = (87 * Math.PI) / 180;
+            const span = a1 - a0;
+            // Tile box + the center-to-center spacing we want between adjacent items.
+            // Smaller SPACING pulls the whole fan in closer to the FAB (since every
+            // item sits at the same radius R), while staying just above the tile size
+            // so they don't overlap.
+            const TILE_W = 50;
+            const TILE_H = 44;
+            const SPACING = 52;
+            // Radius that yields that spacing across N items, clamped so the farthest
+            // tile still fits the viewport in the fan direction. Scaling R with N is
+            // what keeps the items from piling on top of each other as more are added.
+            const desiredR = N > 1 ? (SPACING * (N - 1)) / span : 200;
+            const availH = (hx > 0 ? W - cx : cx) - TILE_W / 2 - 12;
+            const availV = (vy > 0 ? H - cy : cy) - TILE_H / 2 - 12;
+            const R = Math.max(160, Math.min(desiredR, availH, availV));
             return acts.map((action, i) => {
                 const t = N === 1 ? 0.5 : i / (N - 1);
-                const ang = a0 + (a1 - a0) * t;
+                const ang = a0 + span * t;
                 const dx = hx * Math.cos(ang) * R;
                 const dy = vy * Math.sin(ang) * R;
                 return {
@@ -246,10 +261,10 @@ class DevtoolsShellComponent {
                     style: {
                         position: 'fixed',
                         zIndex: '41',
-                        width: '58px',
-                        height: '50px',
-                        left: cx - 29 + 'px',
-                        top: cy - 25 + 'px',
+                        width: TILE_W + 'px',
+                        height: TILE_H + 'px',
+                        left: cx - TILE_W / 2 + 'px',
+                        top: cy - TILE_H / 2 + 'px',
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
@@ -1701,6 +1716,22 @@ class DevtoolsTelemetryService {
             return {};
         }
     }
+    /** Decode an arraybuffer response to text/JSON; fall back to a size label if binary. */
+    decodeArrayBuffer(buf) {
+        if (!buf)
+            return null;
+        try {
+            const text = new TextDecoder().decode(buf);
+            const parsed = this.tryParse(text);
+            if (typeof parsed !== 'string')
+                return parsed; // parsed JSON object/array/number
+            // Raw string: keep only if it looks like text, otherwise it's binary.
+            return /[\u0000-\u0008\u000e-\u001f]/.test(parsed) ? `[arraybuffer ${buf.byteLength}b]` : parsed;
+        }
+        catch {
+            return `[arraybuffer ${buf.byteLength ?? '?'}b]`;
+        }
+    }
     tryParse(text) {
         if (text == null || text === '')
             return null;
@@ -1811,6 +1842,10 @@ class DevtoolsTelemetryService {
                             responseBody = self.tryParse(this.responseText);
                         else if (type === 'json')
                             responseBody = this.response;
+                        else if (type === 'arraybuffer')
+                            responseBody = self.decodeArrayBuffer(this.response);
+                        else if (type === 'blob')
+                            responseBody = `[blob ${this.response?.size ?? '?'}b]`;
                         else
                             responseBody = `[${type}]`;
                     }