Skip to content

Documentation / @ripl/dom / DOMNavigator

Class: DOMNavigator ​

Defined in: dom/src/navigator.ts:61

DOM-bound Navigator that translates real wheel/pointer/touch gestures into the base navigator's imperative commands: the pan/zoom/brush analogue of how DOMContext adds real event listeners on top of the abstract Context. The base class in @ripl/core owns the view model and stays context-agnostic; this subclass owns input.

The gesture model is intentionally Figma-like so a navigator can roam a scene freely:

  • click-and-hold drag (left or middle button, with or without ⌘/Ctrl) pans the view;
  • wheel zooms toward the pointer, and a two-finger pinch zooms toward the gesture center;
  • ⇧ shift-drag brushes a rectangular selection when brushing is enabled.

Because the base transform is unbounded, dragging past the viewport edge (the pointer is captured for the duration of the drag) keeps panning, so content outside the current viewport can be reached and then re-framed with the base centerOn/fitBounds helpers.

Extends ​

Constructors ​

Constructor ​

new DOMNavigator(context, options?): DOMNavigator

Defined in: dom/src/navigator.ts:77

Parameters ​

ParameterType
contextContext
options?DOMNavigatorOptions

Returns ​

DOMNavigator

Overrides ​

Navigator.constructor

Properties ​

PropertyModifierTypeDefault valueDescriptionInherited fromDefined in
_brushprotectedNavigatorBrush | nullnull-Navigator._brushcore/src/core/navigator.ts:177
_scaleExtentprotected[number, number]undefined-Navigator._scaleExtentcore/src/core/navigator.ts:178
_transformprotectedNavigatorTransformundefined-Navigator._transformcore/src/core/navigator.ts:180
_viewportprotectedNavigatorViewportundefined-Navigator._viewportcore/src/core/navigator.ts:179
parent?publicEventBus<NavigatorEventMap>undefinedThe parent event bus that emitted events bubble up to, if any.Navigator.parentcore/src/core/event-bus.ts:107
defaultKeyreadonlytypeof defaultKeyundefinedThe key under which resources are retained when no explicit key is provided.Navigator.defaultKeycore/src/core/disposer.ts:11

Accessors ​

$events ​

Get Signature ​

get $events(): keyof NavigatorEventMap[]

Defined in: core/src/core/navigator.ts:187

The event types a navigator can emit. See EventBus.$events.

Returns ​

keyof NavigatorEventMap[]

Inherited from ​

Navigator.$events


brush ​

Get Signature ​

get brush(): NavigatorBrush | null

Defined in: core/src/core/navigator.ts:206

The current brush selection, or null when nothing is selected.

Returns ​

NavigatorBrush | null

Inherited from ​

Navigator.brush


scaleExtent ​

Get Signature ​

get scaleExtent(): [number, number]

Defined in: core/src/core/navigator.ts:213

The minimum/maximum zoom factor the transform is clamped to.

Returns ​

[number, number]

Inherited from ​

Navigator.scaleExtent


transform ​

Get Signature ​

get transform(): NavigatorTransform

Defined in: core/src/core/navigator.ts:199

The current view transform (a copy; mutating it does not affect the navigator).

Returns ​

NavigatorTransform

Inherited from ​

Navigator.transform


viewport ​

Get Signature ​

get viewport(): NavigatorViewport

Defined in: core/src/core/navigator.ts:220

The viewport dimensions used by centerOn/fitBounds.

Returns ​

NavigatorViewport

Set Signature ​

set viewport(viewport): void

Defined in: core/src/core/navigator.ts:226

Parameters ​
ParameterType
viewportNavigatorViewport
Returns ​

void

Inherited from ​

Navigator.viewport

Methods ​

_commit() ​

protected _commit(event): void

Defined in: core/src/core/navigator.ts:242

Parameters ​

ParameterType
event"zoom" | "pan"

Returns ​

void

Inherited from ​

Navigator._commit


applyPoint() ​

applyPoint(point): Point

Defined in: core/src/core/navigator.ts:250

Applies the transform to a point in content space, returning its on-screen position in logical pixels.

Parameters ​

ParameterType
pointPoint

Returns ​

Point

Inherited from ​

Navigator.applyPoint


centerOn() ​

centerOn(point, viewport?): void

Defined in: core/src/core/navigator.ts:321

Centers a content-space point within the viewport, keeping the current zoom. Useful for bringing an off-screen element into view without changing scale.

Parameters ​

ParameterType
pointPoint
viewportNavigatorViewport

Returns ​

void

Inherited from ​

Navigator.centerOn


clearBrush() ​

clearBrush(): void

Defined in: core/src/core/navigator.ts:389

Clears the brush selection and emits a brushend event with null.

Returns ​

void

Inherited from ​

Navigator.clearBrush


destroy() ​

destroy(): void

Defined in: dom/src/navigator.ts:320

Detaches all interaction listeners and disposes the navigator.

Returns ​

void

Overrides ​

Navigator.destroy


dispose() ​

protected dispose(key?): void

Defined in: core/src/core/disposer.ts:25

Disposes all resources under the given key, or all resources if no key is provided.

Parameters ​

ParameterType
key?PropertyKey

Returns ​

void

Inherited from ​

Navigator.dispose


emit() ​

Call Signature ​

emit<TEvent>(event): TEvent

Defined in: core/src/core/event-bus.ts:185

Emits an event, invoking all matching handlers and bubbling to the parent if applicable. Handlers for the event's own type run first, then EVENT_WILDCARD subscriptions.

Type Parameters ​
Type ParameterDefault type
TEvent extends Event<undefined>Event<undefined>
Parameters ​
ParameterType
eventTEvent
Returns ​

TEvent

Inherited from ​

Navigator.emit

Call Signature ​

emit<TEvent>(type, data): Event<NavigatorEventMap[TEvent]>

Defined in: core/src/core/event-bus.ts:186

Emits an event, invoking all matching handlers and bubbling to the parent if applicable. Handlers for the event's own type run first, then EVENT_WILDCARD subscriptions.

Type Parameters ​
Type Parameter
TEvent extends keyof NavigatorEventMap
Parameters ​
ParameterType
typeTEvent
dataNavigatorEventMap[TEvent]
Returns ​

Event<NavigatorEventMap[TEvent]>

Inherited from ​

Navigator.emit


fitBounds() ​

fitBounds(bounds, options?): void

Defined in: core/src/core/navigator.ts:338

Zooms and pans so a content-space box fills the viewport (respecting the scale extent and an optional padding). This is the primary way to jump the view to content, including content that currently lies entirely outside the viewport.

Parameters ​

ParameterType
boundsNavigatorBrush
options?NavigatorFitOptions

Returns ​

void

Inherited from ​

Navigator.fitBounds


has() ​

has(type): boolean

Defined in: core/src/core/event-bus.ts:123

Returns whether there are any listeners registered for the given event type. Wildcard subscriptions (EVENT_WILDCARD) are not listeners for any concrete type, so a bus observed only through the wildcard still reports false here.

Parameters ​

ParameterType
typekeyof NavigatorEventMap

Returns ​

boolean

Inherited from ​

Navigator.has


invertPoint() ​

invertPoint(point): Point

Defined in: core/src/core/navigator.ts:258

Inverts an on-screen point, in logical pixels, back to content space.

Parameters ​

ParameterType
pointPoint

Returns ​

Point

Inherited from ​

Navigator.invertPoint


off() ​

off<TEvent>(type, handler): void

Defined in: core/src/core/event-bus.ts:144

Removes a previously registered handler for the given event type.

Type Parameters ​

Type Parameter
TEvent extends keyof NavigatorEventMap

Parameters ​

ParameterType
typeTEvent
handlerEventHandler<NavigatorEventMap[TEvent]>

Returns ​

void

Inherited from ​

Navigator.off


on() ​

on<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:131

Subscribes a handler to the given event type and returns a disposable for cleanup. Pass EVENT_WILDCARD to receive every event emitted on the bus regardless of type.

Type Parameters ​

Type Parameter
TEvent extends keyof NavigatorEventMap

Parameters ​

ParameterType
typeTEvent
handlerEventHandler<NavigatorEventMap[TEvent]>
options?EventSubscriptionOptions

Returns ​

Disposable

Inherited from ​

Navigator.on


once() ​

once<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:159

Subscribes a handler that is automatically removed after it fires once.

Type Parameters ​

Type Parameter
TEvent extends keyof NavigatorEventMap

Parameters ​

ParameterType
typeTEvent
handlerEventHandler<NavigatorEventMap[TEvent]>
options?EventSubscriptionOptions

Returns ​

Disposable

Inherited from ​

Navigator.once


panBy() ​

panBy(dx, dy): void

Defined in: core/src/core/navigator.ts:277

Pans the view by a pixel delta.

Parameters ​

ParameterType
dxnumber
dynumber

Returns ​

void

Inherited from ​

Navigator.panBy


panTo() ​

panTo(x, y): void

Defined in: core/src/core/navigator.ts:288

Pans the view to an absolute translation.

Parameters ​

ParameterType
xnumber
ynumber

Returns ​

void

Inherited from ​

Navigator.panTo


reset() ​

reset(): void

Defined in: core/src/core/navigator.ts:366

Resets the transform to the identity (no zoom, no pan).

Returns ​

void

Inherited from ​

Navigator.reset


retain() ​

protected retain(value, key?): void

Defined in: core/src/core/disposer.ts:14

Registers a disposable resource under an optional key for later cleanup.

Parameters ​

ParameterTypeDefault value
valueDisposableundefined
keyPropertyKeyDisposer.defaultKey

Returns ​

void

Inherited from ​

Navigator.retain


setBrush() ​

setBrush(brush): void

Defined in: core/src/core/navigator.ts:377

Sets the brush selection, normalizing the extent, and emits a brush event.

Parameters ​

ParameterType
brushNavigatorBrush

Returns ​

void

Inherited from ​

Navigator.setBrush


setTransform() ​

setTransform(transform): void

Defined in: core/src/core/navigator.ts:266

Replaces the view transform outright (clamping k to the scale extent).

Parameters ​

ParameterType
transformNavigatorTransform

Returns ​

void

Inherited from ​

Navigator.setTransform


zoomBy() ​

zoomBy(factor, center?): void

Defined in: core/src/core/navigator.ts:299

Multiplies the zoom by factor, keeping center (logical pixels, defaults to the origin) fixed.

Parameters ​

ParameterType
factornumber
centerPoint

Returns ​

void

Inherited from ​

Navigator.zoomBy


zoomTo() ​

zoomTo(k, center?): void

Defined in: core/src/core/navigator.ts:313

Sets the absolute zoom factor, keeping center fixed.

Parameters ​

ParameterType
knumber
centerPoint

Returns ​

void

Inherited from ​

Navigator.zoomTo