Class Scene<T>

Basic element of a task

Type Parameters

T extends MaybeGenericSceneSetup

Hierarchy (View Summary)

EventEmitter<SceneEventMap>
- Scene

Constructors

constructor

new Scene<T extends MaybeGenericSceneSetup>(
setup: T,
defaultOptions: SceneOptions<T>,
): Scene<T>
Type Parameters
- T extends MaybeGenericSceneSetup
Parameters
- setup: T
  The scene setup function
- defaultOptions: SceneOptions<T>
  Default scene options
Returns Scene<T>
Overrides EventEmitter.constructor
- Defined in packages/core/src/scene.ts:221

Properties

`Readonly`listeners

listeners: {
    abort?: Set<(e: UIEvent) => void>;
    animationcancel?: Set<(e: AnimationEvent) => void>;
    animationend?: Set<(e: AnimationEvent) => void>;
    animationiteration?: Set<(e: AnimationEvent) => void>;
    animationstart?: Set<(e: AnimationEvent) => void>;
    auxclick?: Set<(e: PointerEvent) => void>;
    beforeinput?: Set<(e: InputEvent) => void>;
    beforematch?: Set<(e: Event) => void>;
    beforetoggle?: Set<(e: ToggleEvent) => void>;
    blur?: Set<(e: FocusEvent) => void>;
    cancel?: Set<(e: Event) => void>;
    canplay?: Set<(e: Event) => void>;
    canplaythrough?: Set<(e: Event) => void>;
    change?: Set<(e: Event) => void>;
    click?: Set<(e: PointerEvent) => void>;
    close?: Set<(e: Event) => void>;
    compositionend?: Set<(e: CompositionEvent) => void>;
    compositionstart?: Set<(e: CompositionEvent) => void>;
    compositionupdate?: Set<(e: CompositionEvent) => void>;
    contextlost?: Set<(e: Event) => void>;
    contextmenu?: Set<(e: PointerEvent) => void>;
    contextrestored?: Set<(e: Event) => void>;
    copy?: Set<(e: ClipboardEvent) => void>;
    cuechange?: Set<(e: Event) => void>;
    cut?: Set<(e: ClipboardEvent) => void>;
    dblclick?: Set<(e: MouseEvent) => void>;
    dispose?: Set<(e: void) => void>;
    drag?: Set<(e: DragEvent) => void>;
    dragend?: Set<(e: DragEvent) => void>;
    dragenter?: Set<(e: DragEvent) => void>;
    dragleave?: Set<(e: DragEvent) => void>;
    dragover?: Set<(e: DragEvent) => void>;
    dragstart?: Set<(e: DragEvent) => void>;
    drop?: Set<(e: DragEvent) => void>;
    durationchange?: Set<(e: Event) => void>;
    emptied?: Set<(e: Event) => void>;
    ended?: Set<(e: Event) => void>;
    error?: Set<(e: ErrorEvent) => void>;
    focus?: Set<(e: FocusEvent) => void>;
    focusin?: Set<(e: FocusEvent) => void>;
    focusout?: Set<(e: FocusEvent) => void>;
    formdata?: Set<(e: FormDataEvent) => void>;
    fullscreenchange?: Set<(e: Event) => void>;
    fullscreenerror?: Set<(e: Event) => void>;
    gotpointercapture?: Set<(e: PointerEvent) => void>;
    input?: Set<(e: Event) => void>;
    invalid?: Set<(e: Event) => void>;
    keydown?: Set<(e: KeyboardEvent) => void>;
    keypress?: Set<(e: KeyboardEvent) => void>;
    keyup?: Set<(e: KeyboardEvent) => void>;
    load?: Set<(e: Event) => void>;
    loadeddata?: Set<(e: Event) => void>;
    loadedmetadata?: Set<(e: Event) => void>;
    loadstart?: Set<(e: Event) => void>;
    lostpointercapture?: Set<(e: PointerEvent) => void>;
    "mouse:left"?: Set<(e: MouseEvent) => void>;
    "mouse:middle"?: Set<(e: MouseEvent) => void>;
    "mouse:right"?: Set<(e: MouseEvent) => void>;
    "mouse:unknown"?: Set<(e: MouseEvent) => void>;
    mousedown?: Set<(e: MouseEvent) => void>;
    mouseenter?: Set<(e: MouseEvent) => void>;
    mouseleave?: Set<(e: MouseEvent) => void>;
    mousemove?: Set<(e: MouseEvent) => void>;
    mouseout?: Set<(e: MouseEvent) => void>;
    mouseover?: Set<(e: MouseEvent) => void>;
    mouseup?: Set<(e: MouseEvent) => void>;
    paste?: Set<(e: ClipboardEvent) => void>;
    pause?: Set<(e: Event) => void>;
    play?: Set<(e: Event) => void>;
    playing?: Set<(e: Event) => void>;
    pointercancel?: Set<(e: PointerEvent) => void>;
    pointerdown?: Set<(e: PointerEvent) => void>;
    pointerenter?: Set<(e: PointerEvent) => void>;
    pointerleave?: Set<(e: PointerEvent) => void>;
    pointermove?: Set<(e: PointerEvent) => void>;
    pointerout?: Set<(e: PointerEvent) => void>;
    pointerover?: Set<(e: PointerEvent) => void>;
    pointerrawupdate?: Set<(e: Event) => void>;
    pointerup?: Set<(e: PointerEvent) => void>;
    progress?: Set<(e: ProgressEvent<EventTarget>) => void>;
    ratechange?: Set<(e: Event) => void>;
    reset?: Set<(e: Event) => void>;
    resize?: Set<(e: UIEvent) => void>;
    "scene:close"?: Set<(e: void) => void>;
    "scene:frame"?: Set<(e: number) => void>;
    "scene:show"?: Set<(e: LooseObject) => void>;
    scroll?: Set<(e: Event) => void>;
    scrollend?: Set<(e: Event) => void>;
    securitypolicyviolation?: Set<(e: SecurityPolicyViolationEvent) => void>;
    seeked?: Set<(e: Event) => void>;
    seeking?: Set<(e: Event) => void>;
    select?: Set<(e: Event) => void>;
    selectionchange?: Set<(e: Event) => void>;
    selectstart?: Set<(e: Event) => void>;
    slotchange?: Set<(e: Event) => void>;
    stalled?: Set<(e: Event) => void>;
    submit?: Set<(e: SubmitEvent) => void>;
    suspend?: Set<(e: Event) => void>;
    timeupdate?: Set<(e: Event) => void>;
    toggle?: Set<(e: ToggleEvent) => void>;
    touchcancel?: Set<(e: TouchEvent) => void>;
    touchend?: Set<(e: TouchEvent) => void>;
    touchmove?: Set<(e: TouchEvent) => void>;
    touchstart?: Set<(e: TouchEvent) => void>;
    transitioncancel?: Set<(e: TransitionEvent) => void>;
    transitionend?: Set<(e: TransitionEvent) => void>;
    transitionrun?: Set<(e: TransitionEvent) => void>;
    transitionstart?: Set<(e: TransitionEvent) => void>;
    volumechange?: Set<(e: Event) => void>;
    waiting?: Set<(e: Event) => void>;
    webkitanimationend?: Set<(e: Event) => void>;
    webkitanimationiteration?: Set<(e: Event) => void>;
    webkitanimationstart?: Set<(e: Event) => void>;
    webkittransitionend?: Set<(e: Event) => void>;
    wheel?: Set<(e: WheelEvent) => void>;
    readonly [key: `key:${string}`]:
        | Set<(e: KeyboardEvent) => void>
        | undefined;
} = {}

`Readonly`root

root: HTMLDivElement

Root element

`Function`show

show: T extends SceneSetup<P, D> ? SceneShow<P, D> : T = ...

Show the scene and change props one-time

Example

Basic usage

using scene = new Scene(
  (props: { text: string }, ctx) => {
    const node = document.createElement('div');
    ctx.on('scene:show', (newProps) => {
      node.textContent = newProps.text;
    });
    return node;
  },
  {
    //...
    defaultProps: { text: 'default' },
  },
);
await scene.show({ text: 'new' }); // show `new`
await scene.show(); // show `default`

Methods

[dispose]

"[dispose]"(): void
Returns void
Inherited from EventEmitter.[dispose]
- Defined in packages/core/src/event-emitter.ts:14

close

close(): Promise<void>
Add a microtask to close the scene. It is useful when close in 'scene:show'

Returns Promise<void>
- Defined in packages/core/src/scene.ts:273

config

config(
    patchOptions: {
        [K in
            | "defaultProps"
            | "duration"
            | "close_on"
            | "record_frame_times"
            | "timer"]?: SceneOptions<T>[K]
    },
): Scene<T>
Override default options one-time
Parameters
- patchOptions: {
      [K in
          | "defaultProps"
          | "duration"
          | "close_on"
          | "record_frame_times"
          | "timer"]?: SceneOptions<T>[K]
  }
Returns Scene<T>
Example
Change duration temporarily
```
using scene = new Scene(() => '', {
  root: document.appendChild(document.createElement('div')),
  frame_ms: 16.67,
  defaultProps: {},
  duration: 100,
});
await scene.config({ duration: 200 }).show(); // show 200ms
await scene.show(); // show 100ms
```
- Defined in packages/core/src/scene.ts:262

emit

emit<
    K extends
        | "dispose"
        | "mouse:left"
        | "mouse:middle"
        | "mouse:right"
        | "mouse:unknown"
        | `key:${string}`
        | (keyof HTMLElementEventMap)
        | "scene:show"
        | "scene:frame"
        | "scene:close",
>(
    ...__namedParameters: (
        HTMLElementEventMap & {
            "scene:close": void;
            "scene:frame": number;
            "scene:show": LooseObject;
        } & {
            "mouse:left": MouseEvent;
            "mouse:middle": MouseEvent;
            "mouse:right": MouseEvent;
            "mouse:unknown": MouseEvent;
        } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
    )[K] extends void
        ? [type: K, evt?: void]
        : [
            type: K,
            evt: (
                HTMLElementEventMap & {
                    "scene:close": void;
                    "scene:frame": number;
                    "scene:show": LooseObject;
                } & {
                    "mouse:left": MouseEvent;
                    "mouse:middle": MouseEvent;
                    "mouse:right": MouseEvent;
                    "mouse:unknown": MouseEvent;
                } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
            )[K],
        ],
): Scene<T>
Emit event listeners
Type Parameters
- K extends
      | "dispose"
      | "mouse:left"
      | "mouse:middle"
      | "mouse:right"
      | "mouse:unknown"
      | `key:${string}`
      | (keyof HTMLElementEventMap)
      | "scene:show"
      | "scene:frame"
      | "scene:close"
Parameters
- ...__namedParameters: (
      HTMLElementEventMap & {
          "scene:close": void;
          "scene:frame": number;
          "scene:show": LooseObject;
      } & {
          "mouse:left": MouseEvent;
          "mouse:middle": MouseEvent;
          "mouse:right": MouseEvent;
          "mouse:unknown": MouseEvent;
      } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
  )[K] extends void
      ? [type: K, evt?: void]
      : [
          type: K,
          evt: (
              HTMLElementEventMap & {
                  "scene:close": void;
                  "scene:frame": number;
                  "scene:show": LooseObject;
              } & {
                  "mouse:left": MouseEvent;
                  "mouse:middle": MouseEvent;
                  "mouse:right": MouseEvent;
                  "mouse:unknown": MouseEvent;
              } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
          )[K],
      ]
Returns Scene<T>
Inherited from EventEmitter.emit
- Defined in packages/core/src/event-emitter.ts:49

off

off<
    K extends
        | "dispose"
        | "mouse:left"
        | "mouse:middle"
        | "mouse:right"
        | "mouse:unknown"
        | `key:${string}`
        | (keyof HTMLElementEventMap)
        | "scene:show"
        | "scene:frame"
        | "scene:close",
>(
    type: K,
    listener: (
        evt: (
            HTMLElementEventMap & {
                "scene:close": void;
                "scene:frame": number;
                "scene:show": LooseObject;
            } & {
                "mouse:left": MouseEvent;
                "mouse:middle": MouseEvent;
                "mouse:right": MouseEvent;
                "mouse:unknown": MouseEvent;
            } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
        )[K],
    ) => void,
): Scene<T>
Remove event listener
Type Parameters
- K extends
      | "dispose"
      | "mouse:left"
      | "mouse:middle"
      | "mouse:right"
      | "mouse:unknown"
      | `key:${string}`
      | (keyof HTMLElementEventMap)
      | "scene:show"
      | "scene:frame"
      | "scene:close"
Parameters
- type: K
- listener: (
      evt: (
          HTMLElementEventMap & {
              "scene:close": void;
              "scene:frame": number;
              "scene:show": LooseObject;
          } & {
              "mouse:left": MouseEvent;
              "mouse:middle": MouseEvent;
              "mouse:right": MouseEvent;
              "mouse:unknown": MouseEvent;
          } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
      )[K],
  ) => void
Returns Scene<T>
Inherited from EventEmitter.off
- Defined in packages/core/src/event-emitter.ts:25

on

on<
    K extends
        | "dispose"
        | "mouse:left"
        | "mouse:middle"
        | "mouse:right"
        | "mouse:unknown"
        | `key:${string}`
        | (keyof HTMLElementEventMap)
        | "scene:show"
        | "scene:frame"
        | "scene:close",
>(
    type: K,
    listener: (
        evt: (
            HTMLElementEventMap & {
                "scene:close": void;
                "scene:frame": number;
                "scene:show": LooseObject;
            } & {
                "mouse:left": MouseEvent;
                "mouse:middle": MouseEvent;
                "mouse:right": MouseEvent;
                "mouse:unknown": MouseEvent;
            } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
        )[K],
    ) => void,
): Scene<T>
Add event listener
Type Parameters
- K extends
      | "dispose"
      | "mouse:left"
      | "mouse:middle"
      | "mouse:right"
      | "mouse:unknown"
      | `key:${string}`
      | (keyof HTMLElementEventMap)
      | "scene:show"
      | "scene:frame"
      | "scene:close"
Parameters
- type: K
- listener: (
      evt: (
          HTMLElementEventMap & {
              "scene:close": void;
              "scene:frame": number;
              "scene:show": LooseObject;
          } & {
              "mouse:left": MouseEvent;
              "mouse:middle": MouseEvent;
              "mouse:right": MouseEvent;
              "mouse:unknown": MouseEvent;
          } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
      )[K],
  ) => void
Returns Scene<T>
Inherited from EventEmitter.on
- Defined in packages/core/src/event-emitter.ts:19

once

once<
    K extends
        | "dispose"
        | "mouse:left"
        | "mouse:middle"
        | "mouse:right"
        | "mouse:unknown"
        | `key:${string}`
        | (keyof HTMLElementEventMap)
        | "scene:show"
        | "scene:frame"
        | "scene:close",
>(
    type: K,
    listener: (
        evt: (
            HTMLElementEventMap & {
                "scene:close": void;
                "scene:frame": number;
                "scene:show": LooseObject;
            } & {
                "mouse:left": MouseEvent;
                "mouse:middle": MouseEvent;
                "mouse:right": MouseEvent;
                "mouse:unknown": MouseEvent;
            } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
        )[K],
    ) => void,
): Scene<T>
Add one-time event listener, can not be removed manually
Type Parameters
- K extends
      | "dispose"
      | "mouse:left"
      | "mouse:middle"
      | "mouse:right"
      | "mouse:unknown"
      | `key:${string}`
      | (keyof HTMLElementEventMap)
      | "scene:show"
      | "scene:frame"
      | "scene:close"
Parameters
- type: K
- listener: (
      evt: (
          HTMLElementEventMap & {
              "scene:close": void;
              "scene:frame": number;
              "scene:show": LooseObject;
          } & {
              "mouse:left": MouseEvent;
              "mouse:middle": MouseEvent;
              "mouse:right": MouseEvent;
              "mouse:unknown": MouseEvent;
          } & { [key: `key:${string}`]: KeyboardEvent } & { dispose: void }
      )[K],
  ) => void
Returns Scene<T>
Inherited from EventEmitter.once
- Defined in packages/core/src/event-emitter.ts:34

Class Scene<T>

Type Parameters

Hierarchy (View Summary)

Constructors

constructor

Type Parameters

Parameters

Returns Scene<T>

Properties

Readonlylisteners

Readonlyroot

Functionshow

Example

Methods

[dispose]

Returns void

close

Returns Promise<void>

config

Parameters

Returns Scene<T>

Example

emit

Type Parameters

Parameters

Returns Scene<T>

off

Type Parameters

Parameters

Returns Scene<T>

on

Type Parameters

Parameters

Returns Scene<T>

once

Type Parameters

Parameters

Returns Scene<T>

`Readonly`listeners

`Readonly`root

`Function`show