Skip to main content

Class: Grid

Defined in: src/ui/layouts/Grid.ts:28

A fundamental UI component for creating interactive user interfaces. It serves as a base class for other UI elements like Panels, Rows, and Columns, providing core layout logic, visibility control, and interaction hooks.

Each View is a THREE.Object3D and inherits lifecycle methods from Script.

Extends​

Extended by​

Constructors​

Constructor​

new Grid(options, geometry?, material?): Grid

Defined in: src/ui/core/View.ts:98

Creates an instance of View.

Parameters​

options​

ViewOptions = {}

Configuration options to apply to the view.

geometry?​

BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>

The geometry for the view's mesh.

material?​

Material

The material for the view's mesh.

Returns​

Grid

Inherited from​

View.constructor

Properties​

aspectRatio​

aspectRatio: number = 1.0

Defined in: src/ui/core/View.ts:72

The calculated aspect ratio (width / height) of this view.

Inherited from​

View.aspectRatio

cols​

cols: number = 0

Defined in: src/ui/layouts/Grid.ts:54

colWeight​

colWeight: number = 0

Defined in: src/ui/layouts/Grid.ts:42

The weight of the current columns in the grid.

height​

height: number = 1

Defined in: src/ui/core/View.ts:42

The height of the view, as a 0-1 ratio of its parent's available space.

Inherited from​

View.height

isQuad​

isQuad: boolean = true

Defined in: src/ui/core/View.ts:27

Flag indicating View behaves as a 2D quad in layout calculations.

Inherited from​

View.isQuad

isRoot​

isRoot: boolean = false

Defined in: src/ui/core/View.ts:29

Flag indicating if this is the root view of a layout.

Inherited from​

View.isRoot

isView​

isView: boolean = true

Defined in: src/ui/core/View.ts:31

Type identifier for easy checking with instanceof.

Inherited from​

View.isView

isXRScript​

isXRScript: boolean = true

Defined in: src/core/Script.ts:53

Inherited from​

View.isXRScript

leftWeight​

leftWeight: number = 0

Defined in: src/ui/layouts/Grid.ts:47

The summed weight to the left of the grid.

mesh?​

optional mesh: Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material | Material[], Object3DEventMap>

Defined in: src/ui/core/View.ts:70

The underlying THREE.Mesh if the view has a visible geometry.

Inherited from​

View.mesh

name​

name: string = 'View'

Defined in: src/ui/core/View.ts:25

Text description of the view

Inherited from​

View.name

opacity​

opacity: number = 1.0

Defined in: src/ui/core/View.ts:68

The overall opacity of the view and its children.

Inherited from​

View.opacity

paddingX​

paddingX: number = 0

Defined in: src/ui/core/View.ts:59

Horizontal padding, as a 0-1 ratio of the parent's width.

Inherited from​

View.paddingX

paddingY​

paddingY: number = 0

Defined in: src/ui/core/View.ts:61

Vertical padding, as a 0-1 ratio of the parent's height.

Inherited from​

View.paddingY

paddingZ​

paddingZ: number = 0

Defined in: src/ui/core/View.ts:63

Depth padding, for z-axis adjustment to prevent z-fighting.

Inherited from​

View.paddingZ

rows​

rows: number = 0

Defined in: src/ui/layouts/Grid.ts:55

rowWeight​

rowWeight: number = 0

Defined in: src/ui/layouts/Grid.ts:37

The weight of the current rows in the grid.

selectable​

selectable: boolean = true

Defined in: src/ui/core/View.ts:33

Determines if this view can be targeted by user input.

Inherited from​

View.selectable

topWeight​

topWeight: number = 0

Defined in: src/ui/layouts/Grid.ts:52

The summed weight to the top of the grid.

ux​

ux: UX

Defined in: src/core/Script.ts:52

Inherited from​

View.ux

weight​

weight: number = 0.5

Defined in: src/ui/core/View.ts:38

Proportional size used in layouts like Row or Col.

Inherited from​

View.weight

width​

width: number = 1

Defined in: src/ui/core/View.ts:40

The width of the view, as a 0-1 ratio of its parent's available space.

Inherited from​

View.width

x​

x: number = 0

Defined in: src/ui/core/View.ts:47

The local x-coordinate within the parent's layout, from -0.5 to 0.5. For root view (Panel), this will be addition to the global positioning.

Inherited from​

View.x

y​

y: number = 0

Defined in: src/ui/core/View.ts:52

The local y-coordinate within the parent's layout, from -0.5 to 0.5. For root view (Panel), this will be addition to the global positioning.

Inherited from​

View.y

z​

z: number = 0

Defined in: src/ui/core/View.ts:57

The local z-coordinate within the parent's layout. For root view (Panel), this will be addition to the global positioning.

Inherited from​

View.z

ColClass​

static ColClass: typeof Col

Defined in: src/ui/layouts/Grid.ts:30

OrbiterClass​

static OrbiterClass: typeof Orbiter

Defined in: src/ui/layouts/Grid.ts:32

PanelClass​

static PanelClass: typeof Panel

Defined in: src/ui/layouts/Grid.ts:31

RowClass​

static RowClass: typeof Row

Defined in: src/ui/layouts/Grid.ts:29

Accessors​

rangeX​

Get Signature​

get rangeX(): number

Defined in: src/ui/core/View.ts:79

Gets the effective horizontal range for child elements, normalized to 1.0 for the smaller dimension.

Returns​

number

The horizontal layout range.

Inherited from​

View.rangeX

rangeY​

Get Signature​

get rangeY(): number

Defined in: src/ui/core/View.ts:88

Gets the effective vertical range for child elements, normalized to 1.0 for the smaller dimension.

Returns​

number

The vertical layout range.

Inherited from​

View.rangeY

Methods​

add()​

add(...children): Grid

Defined in: src/ui/core/View.ts:215

Overrides THREE.Object3D.add to automatically trigger a layout update when a new View is added as a child.

Parameters​

children​

...Object3D<Object3DEventMap>[]

Returns​

Grid

Inherited from​

View.add

addCol()​

addCol(options): Col

Defined in: src/ui/layouts/Grid.ts:166

Adds a column to the grid.

Parameters​

options​

ColOptions = {}

The options for the column.

Returns​

Col

The added column.

addExitButton()​

addExitButton(options): ExitButton

Defined in: src/ui/layouts/Grid.ts:127

Parameters​

options​

IconButtonOptions = {}

Returns​

ExitButton

addIcon()​

addIcon(options): IconView

Defined in: src/ui/layouts/Grid.ts:103

Parameters​

options​

IconButtonOptions = {}

Returns​

IconView

addIconButton()​

addIconButton(options): IconButton

Defined in: src/ui/layouts/Grid.ts:91

Parameters​

options​

IconButtonOptions = {}

Returns​

IconButton

addImage()​

addImage(options): ImageView

Defined in: src/ui/layouts/Grid.ts:79

Adds an image to the grid.

Parameters​

options​

ImageViewOptions

The options for the image.

Returns​

ImageView

The added image view.

addLabel()​

addLabel(options): LabelView

Defined in: src/ui/layouts/Grid.ts:115

Parameters​

options​

object

Returns​

LabelView

addOrbiter()​

addOrbiter(options): Orbiter

Defined in: src/ui/layouts/Grid.ts:121

Parameters​

options​

GridOptions = {}

Returns​

Orbiter

addPanel()​

addPanel(options): Panel

Defined in: src/ui/layouts/Grid.ts:138

Adds a panel to the grid.

Parameters​

options​

PanelOptions = {}

The options for the panel.

Returns​

Panel

The added panel.

addRow()​

addRow(options): Row

Defined in: src/ui/layouts/Grid.ts:150

Adds a row to the grid.

Parameters​

options​

RowOptions = {}

The options for the row.

Returns​

Row

The added row.

addText()​

addText(options): TextView

Defined in: src/ui/layouts/Grid.ts:109

Parameters​

options​

TextViewOptions = {}

Returns​

TextView

addTextButton()​

addTextButton(options): TextButton

Defined in: src/ui/layouts/Grid.ts:97

Parameters​

options​

TextButtonOptions = {}

Returns​

TextButton

addVideo()​

addVideo(options): VideoView

Defined in: src/ui/layouts/Grid.ts:85

Parameters​

options​

VideoViewOptions

Returns​

VideoView

dispose()​

dispose(): void

Defined in: src/core/Script.ts:196

Called when the script is removed from the scene. Opposite of init.

Returns​

void

Inherited from​

View.dispose

dpToLocalUnits()​

dpToLocalUnits(dp): number

Defined in: src/ui/core/View.ts:123

Converts a value from Density-Independent Pixels (DP) to local units.

Parameters​

dp​

number

The value in density-independent pixels.

Returns​

number

The equivalent value in local units.

Inherited from​

View.dpToLocalUnits

hide()​

hide(): void

Defined in: src/ui/core/View.ts:137

Makes the view and all its descendants invisible.

Returns​

void

Inherited from​

View.hide

init()​

init(_?): void | Promise<void>

Defined in: src/core/Script.ts:62

Initializes an instance with XR controllers, grips, hands, raycaster, and default options. We allow all scripts to quickly access its user (e.g., user.isSelecting(), user.hands), world (e.g., physical depth mesh, lighting estimation, and recognized objects), and scene (the root of three.js's scene graph). If this returns a promise, we will wait for it.

Parameters​

_?​

object

Returns​

void | Promise<void>

Inherited from​

View.init

initPhysics()​

initPhysics(_physics): void | Promise<void>

Defined in: src/core/Script.ts:72

Enables depth-aware interactions with physics. See /demos/ballpit

Parameters​

_physics​

Physics

Returns​

void | Promise<void>

Inherited from​

View.initPhysics

onHoverEnter()​

onHoverEnter(_controller): void

Defined in: src/core/Script.ts:157

Called when the controller starts hovering over this object with reticle.

Parameters​

_controller​

Object3D

An XR controller.

Returns​

void

Inherited from​

View.onHoverEnter

onHoverExit()​

onHoverExit(_controller): void

Defined in: src/core/Script.ts:162

Called when the controller hovers over this object with reticle.

Parameters​

_controller​

Object3D

An XR controller.

Returns​

void

Inherited from​

View.onHoverExit

onHovering()​

onHovering(_controller): void

Defined in: src/core/Script.ts:167

Called when the controller hovers over this object with reticle.

Parameters​

_controller​

Object3D

An XR controller.

Returns​

void

Inherited from​

View.onHovering

onKeyDown()​

onKeyDown(_event): void

Defined in: src/core/Script.ts:109

Called on keyboard keypress.

Parameters​

_event​

KeyEvent

Event containing .code to read the keyboard key.

Returns​

void

Inherited from​

View.onKeyDown

onKeyUp()​

onKeyUp(_event): void

Defined in: src/core/Script.ts:110

Parameters​

_event​

KeyEvent

Returns​

void

Inherited from​

View.onKeyUp

onObjectGrabbing()​

onObjectGrabbing(_event): void

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

Called every frame a hand is grabbing this object.

Parameters​

_event​

ObjectGrabEvent

Returns​

void

Inherited from​

View.onObjectGrabbing

onObjectGrabEnd()​

onObjectGrabEnd(_event): void

Defined in: src/core/Script.ts:191

Called when a hand stops grabbing this object.

Parameters​

_event​

ObjectGrabEvent

Returns​

void

Inherited from​

View.onObjectGrabEnd

onObjectGrabStart()​

onObjectGrabStart(_event): void

Defined in: src/core/Script.ts:183

Called when a hand starts grabbing this object (touching + pinching).

Parameters​

_event​

ObjectGrabEvent

Returns​

void

Inherited from​

View.onObjectGrabStart

onObjectSelectEnd()​

onObjectSelectEnd(_event): boolean

Defined in: src/core/Script.ts:150

Called when the controller stops selecting this object the script represents, e.g. View, ModelView.

Parameters​

_event​

SelectEvent

event.target holds its controller.

Returns​

boolean

Whether the event was handled

Inherited from​

View.onObjectSelectEnd

onObjectSelectStart()​

onObjectSelectStart(_event): boolean

Defined in: src/core/Script.ts:141

Called when the controller starts selecting this object the script represents, e.g. View, ModelView.

Parameters​

_event​

SelectEvent

event.target holds its controller.

Returns​

boolean

Whether the event was handled

Inherited from​

View.onObjectSelectStart

onObjectTouchEnd()​

onObjectTouchEnd(_event): void

Defined in: src/core/Script.ts:179

Called when a hand's index finger stops touching this object.

Parameters​

_event​

ObjectTouchEvent

Returns​

void

Inherited from​

View.onObjectTouchEnd

onObjectTouching()​

onObjectTouching(_event): void

Defined in: src/core/Script.ts:175

Called every frame that a hand's index finger is touching this object.

Parameters​

_event​

ObjectTouchEvent

Returns​

void

Inherited from​

View.onObjectTouching

onObjectTouchStart()​

onObjectTouchStart(_event): void

Defined in: src/core/Script.ts:171

Called when a hand's index finger starts touching this object.

Parameters​

_event​

ObjectTouchEvent

Returns​

void

Inherited from​

View.onObjectTouchStart

onSelect()​

onSelect(_event): void

Defined in: src/core/Script.ts:98

Called whenever pinch / mouse click successfully completes, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller.

Returns​

void

Inherited from​

View.onSelect

onSelectEnd()​

onSelectEnd(_event): void

Defined in: src/core/Script.ts:92

Called whenever pinch / mouse click discontinues, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller

Returns​

void

Inherited from​

View.onSelectEnd

onSelecting()​

onSelecting(_event): void

Defined in: src/core/Script.ts:103

Called whenever pinch / mouse click is happening, globally.

Parameters​

_event​

SelectEvent

Returns​

void

Inherited from​

View.onSelecting

onSelectStart()​

onSelectStart(_event): void

Defined in: src/core/Script.ts:86

Called whenever pinch / mouse click starts, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller

Returns​

void

Inherited from​

View.onSelectStart

onSimulatorStarted()​

onSimulatorStarted(): void

Defined in: src/core/Script.ts:78

Returns​

void

Inherited from​

View.onSimulatorStarted

onSqueeze()​

onSqueeze(_event): void

Defined in: src/core/Script.ts:132

Called whenever gamepad trigger successfully completes, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller.

Returns​

void

Inherited from​

View.onSqueeze

onSqueezeEnd()​

onSqueezeEnd(_event): void

Defined in: src/core/Script.ts:121

Called whenever gamepad trigger stops, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller.

Returns​

void

Inherited from​

View.onSqueezeEnd

onSqueezeStart()​

onSqueezeStart(_event): void

Defined in: src/core/Script.ts:116

Called whenever gamepad trigger starts, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller.

Returns​

void

Inherited from​

View.onSqueezeStart

onSqueezing()​

onSqueezing(_event): void

Defined in: src/core/Script.ts:126

Called whenever gamepad is being triggered, globally.

Parameters​

_event​

SelectEvent

Returns​

void

Inherited from​

View.onSqueezing

onTriggered()​

onTriggered(_id): void

Defined in: src/ui/core/View.ts:230

Hook called on a complete select action (e.g., a click) when this view is the target. Intended for override by subclasses.

Parameters​

_id​

number

The ID of the controller that triggered the action.

Returns​

void

Inherited from​

View.onTriggered

onXRSessionEnded()​

onXRSessionEnded(): void

Defined in: src/core/Script.ts:76

Returns​

void

Inherited from​

View.onXRSessionEnded

onXRSessionStarted()​

onXRSessionStarted(_session?): void

Defined in: src/core/Script.ts:75

Parameters​

_session?​

XRSession

Returns​

void

Inherited from​

View.onXRSessionStarted

physicsStep()​

physicsStep(): void

Defined in: src/core/Script.ts:73

Returns​

void

Inherited from​

View.physicsStep

resetLayout()​

resetLayout(): void

Defined in: src/ui/layouts/Grid.ts:189

Initializes the layout of the grid with compose().

Returns​

void

Overrides​

View.resetLayout

resetLayouts()​

resetLayouts(): void

Defined in: src/ui/core/View.ts:198

Resets the layout state for this view and all its descendants.

Returns​

void

Inherited from​

View.resetLayouts

show()​

show(): void

Defined in: src/ui/core/View.ts:129

Makes the view and all its descendants visible.

Returns​

void

Inherited from​

View.show

update()​

update(_time?, _frame?): void

Defined in: src/core/Script.ts:67

Runs per frame.

Parameters​

_time?​

number

_frame?​

XRFrame

Returns​

void

Inherited from​

View.update

updateLayout()​

updateLayout(): void

Defined in: src/ui/layouts/Grid.ts:180

Updates the layout of the grid.

Returns​

void

Overrides​

View.updateLayout

updateLayouts()​

updateLayouts(): void

Defined in: src/ui/core/View.ts:171

Triggers a layout update for this view and all its descendants.

Returns​

void

Inherited from​

View.updateLayouts

updateLayoutsBFS()​

updateLayoutsBFS(): void

Defined in: src/ui/core/View.ts:179

Performs a Breadth-First Search (BFS) traversal to update the layout tree, ensuring parent layouts are calculated before their children.

Returns​

void

Inherited from​

View.updateLayoutsBFS

dpToMeters()​

static dpToMeters(dp): number

Defined in: src/ui/core/View.ts:114

Converts a value from Density-Independent Pixels (DP) to meters.

Parameters​

dp​

number

The value in density-independent pixels.

Returns​

number

The equivalent value in meters.

Inherited from​

View.dpToMeters

init()​

static init(RowClass, ColClass, PanelClass, OrbiterClass): void

Defined in: src/ui/layouts/Grid.ts:65

Initializes the Grid class with the provided Row, Col, and Panel classes.

Parameters​

RowClass​

typeof Row

The class for rows.

ColClass​

typeof Col

The class for columns.

PanelClass​

typeof Panel

The class for panels.

OrbiterClass​

typeof Orbiter

The class for panels.

Returns​

void