Documentation / @ripl/core / Scene

Class: Scene<TContext>

Defined in: packages/core/src/core/scene.ts:40

The top-level group bound to a rendering context, maintaining a hoisted flat buffer for O(n) rendering.

Extends

• Group<SceneEventMap>

Type Parameters

Type Parameter	Default type
TContext extends Context	Context

Constructors

Constructor

new Scene<TContext>(target, options?): Scene<TContext>

Defined in: packages/core/src/core/scene.ts:56

Parameters

Parameter	Type
target	string | Context<Element, Record<string, unknown>> | HTMLElement
options?	SceneOptions

Returns

Scene<TContext>

Overrides

Group.constructor

Properties

Property	Modifier	Type	Default value	Overrides	Inherited from	Defined in
abstract	public	boolean	false	-	Group.abstract	packages/core/src/core/element.ts:289
buffer	public	Element<Partial<BaseState>, ElementEventMap>[]	undefined	-	-	packages/core/src/core/scene.ts:44
classList	readonly	Set<string>	undefined	-	Group.classList	packages/core/src/core/element.ts:287
context	public	TContext	undefined	Group.context	-	packages/core/src/core/scene.ts:42
data	public	unknown	undefined	-	Group.data	packages/core/src/core/element.ts:292
id	public	string	undefined	-	Group.id	packages/core/src/core/element.ts:285
parent?	public	Group<SceneEventMap>	undefined	-	Group.parent	packages/core/src/core/element.ts:291
pointerEvents	public	ElementPointerEvents	'all'	-	Group.pointerEvents	packages/core/src/core/element.ts:290
state	protected	TState	undefined	-	Group.state	packages/core/src/core/element.ts:282
type	readonly	string	undefined	-	Group.type	packages/core/src/core/element.ts:286
defaultKey	readonly	typeof defaultKey	undefined	-	Group.defaultKey	packages/core/src/core/disposer.ts:10

Accessors

children

Get Signature

get children(): Element<Partial<BaseState>, ElementEventMap>[]

Defined in: packages/core/src/core/group.ts:169

Returns a snapshot array of this group's direct child elements.

Returns

Element<Partial<BaseState>, ElementEventMap>[]

Inherited from

Group.children

---

direction

Get Signature

get direction(): TState["direction"]

Defined in: packages/core/src/core/element.ts:296

Returns

TState["direction"]

Set Signature

set direction(value): void

Defined in: packages/core/src/core/element.ts:300

Parameters

Parameter	Type
value	TState["direction"]

Returns

void

Inherited from

Group.direction

---

fill

Get Signature

get fill(): TState["fill"]

Defined in: packages/core/src/core/element.ts:304

Returns

TState["fill"]

Set Signature

set fill(value): void

Defined in: packages/core/src/core/element.ts:308

Parameters

Parameter	Type
value	TState["fill"]

Returns

void

Inherited from

Group.fill

---

filter

Get Signature

get filter(): TState["filter"]

Defined in: packages/core/src/core/element.ts:312

Returns

TState["filter"]

Set Signature

set filter(value): void

Defined in: packages/core/src/core/element.ts:316

Parameters

Parameter	Type
value	TState["filter"]

Returns

void

Inherited from

Group.filter

---

font

Get Signature

get font(): TState["font"]

Defined in: packages/core/src/core/element.ts:320

Returns

TState["font"]

Set Signature

set font(value): void

Defined in: packages/core/src/core/element.ts:324

Parameters

Parameter	Type
value	TState["font"]

Returns

void

Inherited from

Group.font

---

globalCompositeOperation

Get Signature

get globalCompositeOperation(): TState["globalCompositeOperation"]

Defined in: packages/core/src/core/element.ts:336

Returns

TState["globalCompositeOperation"]

Set Signature

set globalCompositeOperation(value): void

Defined in: packages/core/src/core/element.ts:340

Parameters

Parameter	Type
value	TState["globalCompositeOperation"]

Returns

void

Inherited from

Group.globalCompositeOperation

---

height

Get Signature

get height(): number

Defined in: packages/core/src/core/scene.ts:52

The pixel height of the scene's rendering context.

Returns

number

---

lineCap

Get Signature

get lineCap(): TState["lineCap"]

Defined in: packages/core/src/core/element.ts:344

Returns

TState["lineCap"]

Set Signature

set lineCap(value): void

Defined in: packages/core/src/core/element.ts:348

Parameters

Parameter	Type
value	TState["lineCap"]

Returns

void

Inherited from

Group.lineCap

---

lineDash

Get Signature

get lineDash(): TState["lineDash"]

Defined in: packages/core/src/core/element.ts:352

Returns

TState["lineDash"]

Set Signature

set lineDash(value): void

Defined in: packages/core/src/core/element.ts:356

Parameters

Parameter	Type
value	TState["lineDash"]

Returns

void

Inherited from

Group.lineDash

---

lineDashOffset

Get Signature

get lineDashOffset(): TState["lineDashOffset"]

Defined in: packages/core/src/core/element.ts:360

Returns

TState["lineDashOffset"]

Set Signature

set lineDashOffset(value): void

Defined in: packages/core/src/core/element.ts:364

Parameters

Parameter	Type
value	TState["lineDashOffset"]

Returns

void

Inherited from

Group.lineDashOffset

---

lineJoin

Get Signature

get lineJoin(): TState["lineJoin"]

Defined in: packages/core/src/core/element.ts:368

Returns

TState["lineJoin"]

Set Signature

set lineJoin(value): void

Defined in: packages/core/src/core/element.ts:372

Parameters

Parameter	Type
value	TState["lineJoin"]

Returns

void

Inherited from

Group.lineJoin

---

lineWidth

Get Signature

get lineWidth(): TState["lineWidth"]

Defined in: packages/core/src/core/element.ts:376

Returns

TState["lineWidth"]

Set Signature

set lineWidth(value): void

Defined in: packages/core/src/core/element.ts:380

Parameters

Parameter	Type
value	TState["lineWidth"]

Returns

void

Inherited from

Group.lineWidth

---

miterLimit

Get Signature

get miterLimit(): TState["miterLimit"]

Defined in: packages/core/src/core/element.ts:384

Returns

TState["miterLimit"]

Set Signature

set miterLimit(value): void

Defined in: packages/core/src/core/element.ts:388

Parameters

Parameter	Type
value	TState["miterLimit"]

Returns

void

Inherited from

Group.miterLimit

---

opacity

Get Signature

get opacity(): TState["opacity"]

Defined in: packages/core/src/core/element.ts:328

Returns

TState["opacity"]

Set Signature

set opacity(value): void

Defined in: packages/core/src/core/element.ts:332

Parameters

Parameter	Type
value	TState["opacity"]

Returns

void

Inherited from

Group.opacity

---

rotation

Get Signature

get rotation(): TState["rotation"]

Defined in: packages/core/src/core/element.ts:488

Returns

TState["rotation"]

Set Signature

set rotation(value): void

Defined in: packages/core/src/core/element.ts:492

Parameters

Parameter	Type
value	TState["rotation"]

Returns

void

Inherited from

Group.rotation

---

shadowBlur

Get Signature

get shadowBlur(): TState["shadowBlur"]

Defined in: packages/core/src/core/element.ts:392

Returns

TState["shadowBlur"]

Set Signature

set shadowBlur(value): void

Defined in: packages/core/src/core/element.ts:396

Parameters

Parameter	Type
value	TState["shadowBlur"]

Returns

void

Inherited from

Group.shadowBlur

---

shadowColor

Get Signature

get shadowColor(): TState["shadowColor"]

Defined in: packages/core/src/core/element.ts:400

Returns

TState["shadowColor"]

Set Signature

set shadowColor(value): void

Defined in: packages/core/src/core/element.ts:404

Parameters

Parameter	Type
value	TState["shadowColor"]

Returns

void

Inherited from

Group.shadowColor

---

shadowOffsetX

Get Signature

get shadowOffsetX(): TState["shadowOffsetX"]

Defined in: packages/core/src/core/element.ts:408

Returns

TState["shadowOffsetX"]

Set Signature

set shadowOffsetX(value): void

Defined in: packages/core/src/core/element.ts:412

Parameters

Parameter	Type
value	TState["shadowOffsetX"]

Returns

void

Inherited from

Group.shadowOffsetX

---

shadowOffsetY

Get Signature

get shadowOffsetY(): TState["shadowOffsetY"]

Defined in: packages/core/src/core/element.ts:416

Returns

TState["shadowOffsetY"]

Set Signature

set shadowOffsetY(value): void

Defined in: packages/core/src/core/element.ts:420

Parameters

Parameter	Type
value	TState["shadowOffsetY"]

Returns

void

Inherited from

Group.shadowOffsetY

---

stroke

Get Signature

get stroke(): TState["stroke"]

Defined in: packages/core/src/core/element.ts:424

Returns

TState["stroke"]

Set Signature

set stroke(value): void

Defined in: packages/core/src/core/element.ts:428

Parameters

Parameter	Type
value	TState["stroke"]

Returns

void

Inherited from

Group.stroke

---

textAlign

Get Signature

get textAlign(): TState["textAlign"]

Defined in: packages/core/src/core/element.ts:432

Returns

TState["textAlign"]

Set Signature

set textAlign(value): void

Defined in: packages/core/src/core/element.ts:436

Parameters

Parameter	Type
value	TState["textAlign"]

Returns

void

Inherited from

Group.textAlign

---

textBaseline

Get Signature

get textBaseline(): TState["textBaseline"]

Defined in: packages/core/src/core/element.ts:440

Returns

TState["textBaseline"]

Set Signature

set textBaseline(value): void

Defined in: packages/core/src/core/element.ts:444

Parameters

Parameter	Type
value	TState["textBaseline"]

Returns

void

Inherited from

Group.textBaseline

---

transformOriginX

Get Signature

get transformOriginX(): TState["transformOriginX"]

Defined in: packages/core/src/core/element.ts:496

Returns

TState["transformOriginX"]

Set Signature

set transformOriginX(value): void

Defined in: packages/core/src/core/element.ts:500

Parameters

Parameter	Type
value	TState["transformOriginX"]

Returns

void

Inherited from

Group.transformOriginX

---

transformOriginY

Get Signature

get transformOriginY(): TState["transformOriginY"]

Defined in: packages/core/src/core/element.ts:504

Returns

TState["transformOriginY"]

Set Signature

set transformOriginY(value): void

Defined in: packages/core/src/core/element.ts:508

Parameters

Parameter	Type
value	TState["transformOriginY"]

Returns

void

Inherited from

Group.transformOriginY

---

transformScaleX

Get Signature

get transformScaleX(): TState["transformScaleX"]

Defined in: packages/core/src/core/element.ts:472

Returns

TState["transformScaleX"]

Set Signature

set transformScaleX(value): void

Defined in: packages/core/src/core/element.ts:476

Parameters

Parameter	Type
value	TState["transformScaleX"]

Returns

void

Inherited from

Group.transformScaleX

---

transformScaleY

Get Signature

get transformScaleY(): TState["transformScaleY"]

Defined in: packages/core/src/core/element.ts:480

Returns

TState["transformScaleY"]

Set Signature

set transformScaleY(value): void

Defined in: packages/core/src/core/element.ts:484

Parameters

Parameter	Type
value	TState["transformScaleY"]

Returns

void

Inherited from

Group.transformScaleY

---

translateX

Get Signature

get translateX(): TState["translateX"]

Defined in: packages/core/src/core/element.ts:456

Returns

TState["translateX"]

Set Signature

set translateX(value): void

Defined in: packages/core/src/core/element.ts:460

Parameters

Parameter	Type
value	TState["translateX"]

Returns

void

Inherited from

Group.translateX

---

translateY

Get Signature

get translateY(): TState["translateY"]

Defined in: packages/core/src/core/element.ts:464

Returns

TState["translateY"]

Set Signature

set translateY(value): void

Defined in: packages/core/src/core/element.ts:468

Parameters

Parameter	Type
value	TState["translateY"]

Returns

void

Inherited from

Group.translateY

---

width

Get Signature

get width(): number

Defined in: packages/core/src/core/scene.ts:47

The pixel width of the scene's rendering context.

Returns

number

---

zIndex

Get Signature

get zIndex(): number

Defined in: packages/core/src/core/element.ts:448

Returns

number

Set Signature

set zIndex(value): void

Defined in: packages/core/src/core/element.ts:452

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Text.zIndex

Methods

add()

add(element): void

Defined in: packages/core/src/core/group.ts:195

Adds one or more elements as children, re-parenting them if necessary.

Parameters

Parameter	Type
element	OneOrMore<Element<Partial<BaseState>, ElementEventMap>>

Returns

void

Inherited from

Group.add

---

clear()

clear(): void

Defined in: packages/core/src/core/group.ts:231

Removes all children from this group.

Returns

void

Inherited from

Group.clear

---

clone()

clone(): Element<Partial<BaseState>, ElementEventMap>

Defined in: packages/core/src/core/element.ts:565

Creates a shallow clone of this element with the same id, classes, and state.

Returns

Element<Partial<BaseState>, ElementEventMap>

Inherited from

Group.clone

---

destroy()

destroy(includeContext?): void

Defined in: packages/core/src/core/scene.ts:116

Destroys the scene (and optionally the context), removing all children and cleaning up event subscriptions.

Parameters

Parameter	Type	Default value
includeContext	boolean	false

Returns

void

Overrides

Group.destroy

---

dispose()

protected dispose(key?): void

Defined in: packages/core/src/core/disposer.ts:24

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

Parameters

Parameter	Type
key?	PropertyKey

Returns

void

Inherited from

Group.dispose

---

emit()

Call Signature

emit<TEvent>(event): TEvent

Defined in: packages/core/src/core/event-bus.ts:127

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter	Default type
TEvent extends Event<undefined>	Event<undefined>

Parameters

Parameter	Type
event	TEvent

Returns

TEvent

Inherited from

Group.emit

Call Signature

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

Defined in: packages/core/src/core/event-bus.ts:128

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter
TEvent extends keyof SceneEventMap

Parameters

Parameter	Type
type	TEvent
data	SceneEventMap[TEvent]

Returns

Event<SceneEventMap[TEvent]>

Inherited from

Group.emit

---

getBoundingBox()

getBoundingBox(): Box

Defined in: packages/core/src/core/group.ts:277

Returns the composite bounding box enclosing all children.

Returns

Box

Inherited from

Group.getBoundingBox

---

getElementByID()

getElementByID<TElement>(id): TElement

Defined in: packages/core/src/core/group.ts:260

Finds a descendant element by its unique id.

Type Parameters

Type Parameter	Default type
TElement extends Element<Partial<BaseState>, ElementEventMap>	Element<Partial<BaseState>, ElementEventMap>

Parameters

Parameter	Type
id	string

Returns

TElement

Inherited from

Group.getElementByID

---

getElementsByClass()

getElementsByClass<TElement>(classes): TElement[]

Defined in: packages/core/src/core/group.ts:271

Returns all descendant elements that have all of the given CSS class names.

Type Parameters

Type Parameter	Default type
TElement extends Element<Partial<BaseState>, ElementEventMap>	Element<Partial<BaseState>, ElementEventMap>

Parameters

Parameter	Type
classes	OneOrMore<string>

Returns

TElement[]

Inherited from

Group.getElementsByClass

---

getElementsByType()

getElementsByType<TElement>(types): TElement[]

Defined in: packages/core/src/core/group.ts:265

Returns all descendant elements whose type matches one of the given type names.

Type Parameters

Type Parameter	Default type
TElement extends Element<Partial<BaseState>, ElementEventMap>	Element<Partial<BaseState>, ElementEventMap>

Parameters

Parameter	Type
types	OneOrMore<string>

Returns

TElement[]

Inherited from

Group.getElementsByType

---

getStateValue()

protected getStateValue<TKey>(key): Partial<BaseState>[TKey]

Defined in: packages/core/src/core/element.ts:534

Reads a state value, falling back to the parent’s value if the local value is nil (property inheritance).

Type Parameters

Type Parameter
TKey extends keyof BaseState

Parameters

Parameter	Type
key	TKey

Returns

Partial<BaseState>[TKey]

Inherited from

Group.getStateValue

---

graph()

graph(includeGroups?): Element<Partial<BaseState>, ElementEventMap>[]

Defined in: packages/core/src/core/group.ts:236

Returns a flattened array of all descendant elements, optionally including intermediate groups.

Parameters

Parameter	Type
includeGroups?	boolean

Returns

Element<Partial<BaseState>, ElementEventMap>[]

Inherited from

Group.graph

---

has()

has(type): boolean

Defined in: packages/core/src/core/event-bus.ts:84

Returns whether there are any listeners registered for the given event type.

Parameters

Parameter	Type
type	keyof SceneEventMap

Returns

boolean

Inherited from

Group.has

---

interpolate()

interpolate(newState, interpolators?): Interpolator<void>

Defined in: packages/core/src/core/element.ts:585

Creates an interpolator that transitions from the current state towards the target state, supporting keyframes and custom interpolator overrides.

Parameters

Parameter	Type
newState	Partial<ElementInterpolationState<TState>>
interpolators	Partial<ElementInterpolators<TState>>

Returns

Interpolator<void>

Inherited from

Group.interpolate

---

intersectsWith()

intersectsWith(x, y, options?): boolean

Defined in: packages/core/src/core/element.ts:580

Tests whether a point intersects this element’s bounding box. Override for custom hit testing.

Parameters

Parameter	Type
x	number
y	number
options?	Partial<ElementIntersectionOptions>

Returns

boolean

Inherited from

Group.intersectsWith

---

off()

off<TEvent>(type, handler): void

Defined in: packages/core/src/core/event-bus.ts:102

Removes a previously registered handler for the given event type.

Type Parameters

Type Parameter
TEvent extends keyof SceneEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<SceneEventMap[TEvent]>

Returns

void

Inherited from

Group.off

---

on()

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

Defined in: packages/core/src/core/element.ts:547

Subscribes a handler to the given event type and returns a disposable for cleanup.

Type Parameters

Type Parameter
TEvent extends keyof SceneEventMap

Parameters

Parameter	Type
event	TEvent
handler	EventHandler<SceneEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Group.on

---

once()

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

Defined in: packages/core/src/core/event-bus.ts:117

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

Type Parameters

Type Parameter
TEvent extends keyof SceneEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<SceneEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Group.once

---

query()

query<TElement>(selector): TElement | undefined

Defined in: packages/core/src/core/group.ts:250

Returns the first descendant matching the CSS-like selector, or undefined.

Type Parameters

Type Parameter	Default type
TElement extends Element<Partial<BaseState>, ElementEventMap>	Element<Partial<BaseState>, ElementEventMap>

Parameters

Parameter	Type
selector	string

Returns

TElement | undefined

Inherited from

Group.query

---

queryAll()

queryAll<TElement>(selector): TElement[]

Defined in: packages/core/src/core/group.ts:255

Returns all descendants matching the CSS-like selector.

Type Parameters

Type Parameter	Default type
TElement extends Element<Partial<BaseState>, ElementEventMap>	Element<Partial<BaseState>, ElementEventMap>

Parameters

Parameter	Type
selector	string

Returns

TElement[]

Inherited from

Group.queryAll

---

remove()

remove(element): void

Defined in: packages/core/src/core/group.ts:215

Removes one or more child elements from this group.

Parameters

Parameter	Type
element	OneOrMore<Element<Partial<BaseState>, ElementEventMap>>

Returns

void

Inherited from

Group.remove

---

render()

render(): void

Defined in: packages/core/src/core/scene.ts:127

Clears the context and renders the entire element buffer in z-index order.

Returns

void

Overrides

Group.render

---

retain()

protected retain(value, key?): void

Defined in: packages/core/src/core/disposer.ts:13

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

Parameters

Parameter	Type	Default value
value	Disposable	undefined
key	PropertyKey	Disposer.defaultKey

Returns

void

Inherited from

Group.retain

---

set()

set(elements): void

Defined in: packages/core/src/core/group.ts:189

Replaces all children with the given elements.

Parameters

Parameter	Type
elements	Element<Partial<BaseState>, ElementEventMap>[]

Returns

void

Inherited from

Group.set

---

setStateValue()

protected setStateValue<TKey>(key, value): void

Defined in: packages/core/src/core/element.ts:539

Sets a state value and emits an updated event.

Type Parameters

Type Parameter
TKey extends keyof BaseState

Parameters

Parameter	Type
key	TKey
value	Partial<BaseState>[TKey]

Returns

void

Inherited from

Group.setStateValue

---

updateSceneGraph()

updateSceneGraph(): void

Defined in: packages/core/src/core/group.ts:184

Emits a graph event to notify the scene that the element tree has changed.

Returns

void

Inherited from

Group.updateSceneGraph