Skip to content

Class: UIKitDocument ​

Defined in: packages/core/src/ui/document.ts:24

Lightweight DOM-like wrapper around a UIKit root Component that lives in the 3D scene.

Remarks ​

  • Provides query helpers (getElementById, getElementsByClassName, querySelector(All)).
  • Maintains reactive target dimensions via targetWidth/targetHeight and scales the group to fit while preserving aspect ratio.
  • Intended to be attached to an entity's object3D in world space or to the camera for screen‑space UI. Use together with PanelUISystem and ScreenSpaceUISystem.

Extends ​

  • Group

Constructors ​

Constructor ​

new UIKitDocument(rootComponent): UIKitDocument

Defined in: packages/core/src/ui/document.ts:39

Create a document backed by a UIKit root component.

Parameters ​

rootComponent ​

Component<any>

The root Component produced by @pmndrs/uikitml interpret().

Returns ​

UIKitDocument

Overrides ​

Group.constructor

Properties ​

targetHeight ​

readonly targetHeight: Signal<number>

Defined in: packages/core/src/ui/document.ts:33

Reactive target height in meters. Set via setTargetDimensions.


targetWidth ​

readonly targetWidth: Signal<number>

Defined in: packages/core/src/ui/document.ts:31

Reactive target width in meters. Set via setTargetDimensions.

Accessors ​

computedSize ​

Get Signature ​

get computedSize(): object

Defined in: packages/core/src/ui/document.ts:279

Current intrinsic size of the UIKit root component (in UIKit units, centimeters), if available from the underlying component's size signal.

Returns ​

object

height ​

height: number

width ​

width: number


rootElement ​

Get Signature ​

get rootElement(): Component<any>

Defined in: packages/core/src/ui/document.ts:299

The root UIKit component for this document.

Returns ​

Component<any>


targetSize ​

Get Signature ​

get targetSize(): object

Defined in: packages/core/src/ui/document.ts:291

Return the most recently requested target size in meters.

Returns ​

object

height ​

height: number

width ​

width: number

Methods ​

dispose() ​

dispose(): void

Defined in: packages/core/src/ui/document.ts:306

Dispose of internal resources and detach children. Safe to call multiple times.

Returns ​

void


getElementById() ​

getElementById(id): Component<any>

Defined in: packages/core/src/ui/document.ts:53

Return the first element with a matching id (UIKit property).

Parameters ​

id ​

string

The element identifier without the # prefix.

Returns ​

Component<any>


getElementsByClassName() ​

getElementsByClassName(className): Component<any>[]

Defined in: packages/core/src/ui/document.ts:61

Return all elements that include className in their class list.

Parameters ​

className ​

string

The class without the preceding dot.

Returns ​

Component<any>[]


isDescendantOf() ​

isDescendantOf(element, ancestor): boolean

Defined in: packages/core/src/ui/document.ts:183

Check if element is a descendant of ancestor.

Parameters ​

element ​

Component<any>

ancestor ​

Component<any>

Returns ​

boolean

true if ancestor appears in the parent chain of element.


querySelector() ​

querySelector(selector): Component<any>

Defined in: packages/core/src/ui/document.ts:74

Return the first element matching a simple CSS‑like selector.

Parameters ​

selector ​

string

Returns ​

Component<any>

Remarks ​

Supported selectors:

  • #id
  • .class
  • Descendant combinations, e.g. #parent .child

querySelectorAll() ​

querySelectorAll(selector): Component<any>[]

Defined in: packages/core/src/ui/document.ts:82

Return all elements matching a simple CSS‑like selector. See querySelector.

Parameters ​

selector ​

string

Returns ​

Component<any>[]


querySelectorAllWithin() ​

querySelectorAllWithin(parentSelector, childSelector): Component<any>[]

Defined in: packages/core/src/ui/document.ts:195

Convenience for querySelectorAll("${parent} ${child}").

Parameters ​

parentSelector ​

string

childSelector ​

string

Returns ​

Component<any>[]


querySelectorWithin() ​

querySelectorWithin(parentSelector, childSelector): Component<any>

Defined in: packages/core/src/ui/document.ts:202

Convenience for the first match of querySelectorAllWithin.

Parameters ​

parentSelector ​

string

childSelector ​

string

Returns ​

Component<any>


setTargetDimensions() ​

setTargetDimensions(width, height): void

Defined in: packages/core/src/ui/document.ts:270

Set desired dimensions for the UI in meters. The document computes a uniform scale that fits these constraints while preserving aspect ratio.

Parameters ​

width ​

number

Target width in meters.

height ​

number

Target height in meters.

Returns ​

void


toString() ​

toString(): string

Defined in: packages/core/src/ui/document.ts:324

String summary useful for debugging.

Returns ​

string

Privacy | Terms