Class: SketchPanel

Defined in: src/ui/interaction/SketchPanel.ts:20

A View that functions as a drawable canvas in 3D space. It uses an HTML canvas as a texture on a plane, allowing users to draw on its surface with their XR controllers. It supports basic drawing, undo, and redo functionality.

Extends

• View

Constructors

Constructor

new SketchPanel(): SketchPanel

Defined in: src/ui/interaction/SketchPanel.ts:34

Returns

SketchPanel

Overrides

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

---

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

---

material

material: MeshBasicMaterial

Defined in: src/ui/interaction/SketchPanel.ts:32

---

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

---

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

---

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

---

dependencies

static dependencies: object

Defined in: src/ui/interaction/SketchPanel.ts:21

user

user: typeof User = User

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): SketchPanel

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

SketchPanel

Inherited from

View.add

---

clearCanvas()

clearCanvas(forceUpdate): void

Defined in: src/ui/interaction/SketchPanel.ts:147

Parameters

forceUpdate

boolean = true

Returns

void

---

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

---

getContext()

getContext(): CanvasRenderingContext2D

Defined in: src/ui/interaction/SketchPanel.ts:70

Returns

CanvasRenderingContext2D

---

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(__namedParameters): void

Defined in: src/ui/interaction/SketchPanel.ts:63

Init the SketchPanel.

Parameters

__namedParameters

user

User

Returns

void

Overrides

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/ui/interaction/SketchPanel.ts:91

Called whenever pinch / mouse click discontinues, globally.

Parameters

event

SelectEvent

Returns

void

Overrides

View.onSelectEnd

---

onSelecting()

onSelecting(event): void

Defined in: src/ui/interaction/SketchPanel.ts:110

Updates the painter's line to the current pivot position during selection.

Parameters

event

SelectEvent

Returns

void

Overrides

View.onSelecting

---

onSelectStart()

onSelectStart(event): void

Defined in: src/ui/interaction/SketchPanel.ts:78

Called whenever pinch / mouse click starts, globally.

Parameters

event

SelectEvent

Returns

void

Overrides

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

---

redo()

redo(): void

Defined in: src/ui/interaction/SketchPanel.ts:181

Returns

void

---

removeAll()

removeAll(): void

Defined in: src/ui/interaction/SketchPanel.ts:157

Returns

void

---

resetLayout()

resetLayout(): void

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

Resets the layout state of this view. Intended for override by subclasses.

Returns

void

Inherited from

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

---

triggerUpdate()

triggerUpdate(): void

Defined in: src/ui/interaction/SketchPanel.ts:74

Returns

void

---

undo()

undo(): void

Defined in: src/ui/interaction/SketchPanel.ts:163

Returns

void

---

update()

update(): void

Defined in: src/ui/interaction/SketchPanel.ts:207

Runs per frame.

Returns

void

Overrides

View.update

---

updateLayout()

updateLayout(): void

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

Calculates and applies the position and scale for this single view based on its layout properties and its parent's dimensions.

Returns

void

Inherited from

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