(props: {
isOpen: Accessor<boolean>
setIsOpen: (isOpen: boolean) => void
})
| 6 | onCleanup, |
| 7 | untrack, |
| 8 | } from 'solid-js' |
| 9 | import clsx from 'clsx' |
| 10 | import { createDevtoolsSettings } from '../context/use-devtools-context' |
| 11 | import { createStyles } from '../styles/use-styles' |
| 12 | import { TanStackTriggerMark } from './tanstack-trigger-mark' |
| 13 | import type { TriggerCoords } from '../context/devtools-store' |
| 14 | import type { Accessor } from 'solid-js' |
| 15 | |
| 16 | // --- Throw physics (pure, unit-tested in trigger.test.tsx) --- |
| 17 | const FRICTION = 0.95 // velocity retained each frame |
| 18 | const RESTITUTION = 0.5 // velocity retained after a wall bounce |
| 19 | const MIN_SPEED = 0.1 // px/frame below which the throw stops |
| 20 | const DRAG_THRESHOLD = 4 // px of movement before a press counts as a drag |
| 21 | const PADDING_RATIO = 0.5 // matches size[2] = --tsrd-font-size * 0.5 |
| 22 | |
| 23 | export const clamp = (value: number, min: number, max: number) => |
| 24 | Math.max(min, Math.min(max, value)) |
| 25 | |
| 26 | /** |
| 27 | * Advance one axis by its velocity for a single frame, bouncing off the |
| 28 | * [min, max] walls with damping. Returns the new position and velocity. |
| 29 | */ |
| 30 | export const stepAxis = ( |
| 31 | pos: number, |
| 32 | vel: number, |
| 33 | min: number, |
| 34 | max: number, |
| 35 | ): { pos: number; vel: number } => { |
| 36 | let p = pos + vel |
| 37 | let v = vel * FRICTION |
| 38 | if (p <= min) { |
| 39 | p = min |
| 40 | v = -v * RESTITUTION |
| 41 | } else if (p >= max) { |
| 42 | p = max |
| 43 | v = -v * RESTITUTION |
| 44 | } |
| 45 | return { pos: p, vel: v } |
| 46 | } |
| 47 | |
| 48 | export const Trigger = (props: { |
| 49 | isOpen: Accessor<boolean> |
| 50 | setIsOpen: (isOpen: boolean) => void |
| 51 | }) => { |
| 52 | const { settings, setSettings } = createDevtoolsSettings() |
| 53 | const [containerRef, setContainerRef] = createSignal<HTMLElement>() |
no test coverage detected