fix(devtools): keep the floating trigger in place on window resize (#529)

* fix(devtools): keep the floating trigger in place on window resize

Store the floating trigger spot as a percent of the free space, not as
pixels. On every resize the trigger is placed again from that percent,
so it stays in its corner and cannot move off-screen. Drag and throw
still work in pixels.

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/floating-trigger-percent.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Keep the floating trigger at the same relative spot when the window size changes. The trigger now stores its spot as a percent of the free space, so it stays in its corner and never moves off-screen.

packages/devtools/src/components/trigger.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@solidjs/testing-library'
 import { createSignal } from 'solid-js'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { DevtoolsProvider } from '../context/devtools-context'
-import { Trigger, clamp, stepAxis } from './trigger'
+import { Trigger, clamp, stepAxis, toPercent, toPixels } from './trigger'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 
 const renderTrigger = (config?: Partial<TanStackDevtoolsConfig>) => {
@@ -99,3 +99,25 @@ describe('throw physics', () => {
     expect(pos).toBeLessThanOrEqual(500)
   })
 })
+
+describe('trigger percent position', () => {
+  it('maps the same percent to the same relative spot at any window size', () => {
+    // Free space 8..936 in a 1000px window: 100% is the far wall.
+    expect(toPixels(100, 8, 936)).toBe(936)
+    expect(toPixels(0, 8, 936)).toBe(8)
+    expect(toPixels(50, 8, 736)).toBe(372)
+  })
+
+  it('round-trips pixels through a percent', () => {
+    expect(toPixels(toPercent(500, 8, 936), 8, 936)).toBeCloseTo(500)
+  })
+
+  it('keeps the trigger inside the walls', () => {
+    expect(toPercent(2000, 8, 936)).toBe(100)
+    expect(toPercent(-50, 8, 936)).toBe(0)
+    expect(toPixels(250, 8, 936)).toBe(936)
+    // A window smaller than the trigger pins it to the start wall.
+    expect(toPercent(10, 8, 4)).toBe(0)
+    expect(toPixels(100, 8, 4)).toBe(8)
+  })
+})

packages/devtools/src/components/trigger.tsx

@@ -45,16 +45,27 @@ export const stepAxis = (
   return { pos: p, vel: v }
 }
 
+/**
+ * Convert one axis between pixels and a percent (0-100) of the free space
+ * between the two walls. The stored spot is a percent, so it maps back into
+ * view at any window size.
+ */
+export const toPercent = (pos: number, min: number, max: number) =>
+  max > min ? clamp(((pos - min) / (max - min)) * 100, 0, 100) : 0
+
+export const toPixels = (percent: number, min: number, max: number) =>
+  min + (Math.max(max, min) - min) * (clamp(percent, 0, 100) / 100)
+
 export const Trigger = (props: {
   isOpen: Accessor<boolean>
   setIsOpen: (isOpen: boolean) => void
 }) => {
   const { settings, setSettings } = createDevtoolsSettings()
   const [containerRef, setContainerRef] = createSignal<HTMLElement>()
   const [buttonRef, setButtonRef] = createSignal<HTMLButtonElement>()
-  const [coords, setCoords] = createSignal<TriggerCoords | null>(
-    settings().triggerCoords ?? null,
-  )
+  // On-screen pixels, used by drag and throw. The stored `triggerCoords` is a
+  // percent of the free space, see `persist` and `placeFromSettings`.
+  const [coords, setCoords] = createSignal<TriggerCoords | null>(null)
   const styles = createStyles()
 
   const isFloating = createMemo(() => settings().triggerMode === 'floating')
@@ -83,12 +94,13 @@ export const Trigger = (props: {
 
   const bounds = (el: HTMLElement) => {
     const pad = edgePadding(el)
-    const rect = el.getBoundingClientRect()
+    // offsetWidth/Height ignore the hover scale, so bounds do not change
+    // while the pointer is over the trigger.
     return {
       minX: pad,
       minY: pad,
-      maxX: window.innerWidth - rect.width - pad,
-      maxY: window.innerHeight - rect.height - pad,
+      maxX: window.innerWidth - el.offsetWidth - pad,
+      maxY: window.innerHeight - el.offsetHeight - pad,
     }
   }
 
@@ -113,7 +125,18 @@ export const Trigger = (props: {
     }
   }
 
-  const persist = () => setSettings({ triggerCoords: coords() ?? undefined })
+  const persist = () => {
+    const el = buttonRef()
+    const current = coords()
+    if (!el || !current) return
+    const b = bounds(el)
+    setSettings({
+      triggerCoords: {
+        x: toPercent(current.x, b.minX, b.maxX),
+        y: toPercent(current.y, b.minY, b.maxY),
+      },
+    })
+  }
 
   const startThrow = () => {
     cancelThrow()
@@ -217,42 +240,41 @@ export const Trigger = (props: {
     props.setIsOpen(!props.isOpen())
   }
 
-  // On going floating: seed coords from the button's current (fixed) position
-  // if there's no stored spot, otherwise clamp the restored spot into view
-  // (a saved position from a larger window must not load off-screen).
-  // Reads/writes coords untracked so this only runs on mode/ref changes.
+  // Place the trigger from its stored percent, or seed the percent from the
+  // button's current (fixed) position when there is no stored spot. Runs on
+  // going floating and on every window resize, so the trigger keeps the same
+  // relative spot and never ends up off-screen.
+  let seededSpot: TriggerCoords | undefined
+  const placeFromSettings = (el: HTMLElement) => {
+    const b = bounds(el)
+    let spot = settings().triggerCoords ?? seededSpot
+    if (!spot) {
+      const rect = el.getBoundingClientRect()
+      spot = seededSpot = {
+        x: toPercent(rect.left, b.minX, b.maxX),
+        y: toPercent(rect.top, b.minY, b.maxY),
+      }
+    }
+    setCoords({
+      x: toPixels(spot.x, b.minX, b.maxX),
+      y: toPixels(spot.y, b.minY, b.maxY),
+    })
+  }
+
+  // Reads settings untracked so this only runs on mode/ref changes.
   createEffect(() => {
     if (!isFloating()) return
     const el = buttonRef()
     if (!el) return
-    untrack(() => {
-      const current = coords()
-      if (!current) {
-        const rect = el.getBoundingClientRect()
-        setCoords({ x: rect.left, y: rect.top })
-        return
-      }
-      const b = bounds(el)
-      setCoords({
-        x: clamp(current.x, b.minX, b.maxX),
-        y: clamp(current.y, b.minY, b.maxY),
-      })
-    })
+    untrack(() => placeFromSettings(el))
   })
 
-  // Keep the trigger on screen when the window is resized.
   createEffect(() => {
     if (!isFloating()) return
     const onResize = () => {
       const el = buttonRef()
-      const current = coords()
-      if (!el || !current) return
-      const b = bounds(el)
-      setCoords({
-        x: clamp(current.x, b.minX, b.maxX),
-        y: clamp(current.y, b.minY, b.maxY),
-      })
-      persist()
+      // A throw in flight owns the position; it persists when it settles.
+      if (el && !dragging && raf === undefined) placeFromSettings(el)
     }
     window.addEventListener('resize', onResize)
     onCleanup(() => window.removeEventListener('resize', onResize))

packages/devtools/src/context/devtools-store.ts

@@ -56,8 +56,9 @@ export type DevtoolsStore = {
      */
     triggerMode: TriggerMode
     /**
-     * The persisted top-left coordinates (in px) of the floating trigger.
-     * Only used when `triggerMode` is "floating".
+     * The persisted spot of the floating trigger, as a percent (0-100) of the
+     * free space from the left and top edges. `{ x: 100, y: 100 }` is the
+     * bottom-right corner. Only used when `triggerMode` is "floating".
      * @default undefined
      */
     triggerCoords?: TriggerCoords