panels/anchor
Where a floating element sits, kept as a fraction of the room the window leaves it rather than as pixels: a resize then places it in proportion, so a centered bar stays centered, a handle at the bottom edge stays there, and nothing is left off the canvas by a window that shrank or a bar that grew.
Interfaces
Fraction
Defined in: panels/anchor.ts:17
A place in the room the window leaves an element, each axis 0 to 1.
Properties
x
x: number;Defined in: panels/anchor.ts:17
y
y: number;Defined in: panels/anchor.ts:17
Size
Defined in: panels/anchor.ts:18
Properties
width
width: number;Defined in: panels/anchor.ts:18
height
height: number;Defined in: panels/anchor.ts:18
Point
Defined in: panels/anchor.ts:19
Properties
x
x: number;Defined in: panels/anchor.ts:19
y
y: number;Defined in: panels/anchor.ts:19
Functions
useViewport()
function useViewport(): Size;Defined in: panels/anchor.ts:24
The window's inner size, read again on every resize.
Returns
useElementSize()
function useElementSize(ref, fallback): Size;Defined in: panels/anchor.ts:41
The element's rendered size, fallback until it is measured, and again
whenever its content changes it.
Parameters
| Parameter | Type | Description |
|---|---|---|
ref | RefObject<HTMLElement> | The element to measure. |
fallback | Size | The size assumed before the first measurement. |
Returns
place()
function place(
fraction,
viewport,
size,
margin?
): Point;Defined in: panels/anchor.ts:59
The pixel offset of fraction in the room viewport leaves an element of
size, margin pixels in from each edge where the room allows it.
Parameters
| Parameter | Type | Default value |
|---|---|---|
fraction | Fraction | undefined |
viewport | Size | undefined |
size | Size | undefined |
margin? | number | 0 |
Returns
fractionOf()
function fractionOf(
point,
viewport,
size,
margin?
): Fraction;Defined in: panels/anchor.ts:69
The fraction a pixel offset is of that room, clamped into it.
Parameters
Returns
isFraction()
function isFraction(value): value is Fraction;Defined in: panels/anchor.ts:79
Whether value is a stored fraction, both axes within 0 to 1.
Parameters
| Parameter | Type |
|---|---|
value | unknown |
Returns
value is Fraction
useAnchorDrag()
function useAnchorDrag(
setAnchor,
viewport,
size,
margin?,
onEnd?
): object;Defined in: panels/anchor.ts:96
Drags an element placed by a fraction. begin, from a pointer down,
captures the pointer (one that outruns the element lands on the stream,
where the core adopts the held button) and keeps its offset from
position; every move then places the element at the pointer less that
offset, and the release ends the drag, handing onEnd the last place.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
setAnchor | (fraction) => void | undefined | Takes each new place. |
viewport | Size | undefined | The window's size. |
size | Size | undefined | The element's size. |
margin? | number | 0 | Pixels kept in from each edge. |
onEnd? | (last) => void | undefined | Called on release with the place the drag left, or null where it never moved. |
Returns
object
dragging
dragging: boolean;begin
begin: (event, position) => void;Parameters
| Parameter | Type |
|---|---|
event | PointerEvent |
position | Point |
Returns
void