Class ControlsLayer

A CanvasLayer for displaying UI controls which are overlayed on top of other layers.

We track three types of events:

  1. Cursor movement
  2. Ruler measurement
  3. Map pings

Hierarchy (view full)

Properties

doors cursors rulers debug select _cursors eventMode options _rulers _offscreenPings #drawing #drawn

Accessors

ruler active name hookName layerOptions instance

Methods

getRulerForUser _draw _tearDown drawCursors drawRulers drawDoors drawSelect _deactivate _onMouseMove drawCursor updateCursor updateRuler handlePing drawOffscreenPing drawPing activate deactivate getZIndex draw tearDown _onLongPress _onCanvasPan _activate _onClickLeft _onClickLeft2 _canDragLeftStart _onDragLeftStart _onDragLeftMove _onDragLeftDrop _onDragLeftCancel _onClickRight _onMouseWheel _onDeleteKey _findViewportIntersection

Properties

doors

doors: Container

A container of DoorControl instances

cursors

cursors: Container

A container of cursor interaction elements. Contains cursors, rulers, interaction rectangles, and pings

rulers

rulers: Container

Ruler tools, one per connected user

debug

debug: Graphics

A graphics instance used for drawing debugging visualization

select

select: Graphics

The Canvas selection rectangle

_cursors

_cursors: Record<string, Cursor> = {}

A mapping of user IDs to Cursor instances for quick access

eventMode

eventMode: string = "passive"

options

options: {
    name: string;
} = ...

Options for this layer instance.

Type declaration

  • name: string

Private _rulers

_rulers: Record<string, Ruler> = {}

A mapping of user IDs to Ruler instances for quick access

Private _offscreenPings

_offscreenPings: Record<string, Point> = {}

The positions of any offscreen pings we are tracking.

Private #drawing

#drawing: Promise<CanvasLayer> = ...

An internal reference to a Promise in-progress to draw the CanvasLayer.

Private #drawn

#drawn: boolean = false

Is the layer drawn?

Accessors

ruler

  • get ruler(): Ruler

  • A convenience accessor to the Ruler for the active game user

    Returns Ruler

active

  • get active(): boolean

  • Is this layer currently active

    Returns boolean

name

  • get name(): string

  • The canonical name of the CanvasLayer is the name of the constructor that is the immediate child of the defined baseClass for the layer type.

    Returns string

    Example

    canvas.lighting.name -> "LightingLayer"

hookName

  • get hookName(): string

  • The name used by hooks to construct their hook string. Note: You should override this getter if hookName should not return the class constructor name.

    Returns string

Static layerOptions

  • get layerOptions(): any

  • Returns any

Static instance

  • get instance(): CanvasLayer

  • Return a reference to the active instance of this canvas layer

    Returns CanvasLayer

Methods

getRulerForUser

  • getRulerForUser(userId): Ruler

  • Get the Ruler display for a specific User ID

    Parameters

    • userId: string

    Returns Ruler

_draw

_tearDown

drawCursors

  • drawCursors(): void

  • Draw the cursors container

    Returns void

drawRulers

  • drawRulers(): void

  • Create and add Ruler graphics instances for every game User.

    Returns void

drawDoors

  • drawDoors(): void

  • Draw door control icons to the doors container.

    Returns void

drawSelect

  • drawSelect(coords): void

  • Draw the select rectangle given an event originated within the base canvas layer

    Parameters

    • coords: any

      The rectangle coordinates of the form {x, y, width, height}

    Returns void

_deactivate

_onMouseMove

  • _onMouseMove(): void

  • Handle mousemove events on the game canvas to broadcast activity of the user's cursor position

    Returns void

drawCursor

  • drawCursor(user): any

  • Create and draw the Cursor object for a given User

    Parameters

    • user: User

      The User document for whom to draw the cursor Container

    Returns any

updateCursor

  • updateCursor(user, position): void

  • Update the cursor when the user moves to a new position

    Parameters

    • user: User

      The User for whom to update the cursor

    • position: Point

      The new cursor position

    Returns void

updateRuler

  • updateRuler(user, rulerData): void

  • Update display of an active Ruler object for a user given provided data

    Parameters

    • user: User

      The User for whom to update the ruler

    • rulerData: RulerMeasurementData

      Data which describes the new ruler measurement to display

    Returns void

handlePing

  • handlePing(user, position, data?): Promise<boolean>

  • Handle a broadcast ping.

    Parameters

    • user: User

      The user who pinged.

    • position: Point

      The position on the canvas that was pinged.

    • Optional data: PingData = {}

      The broadcast ping data.

    Returns Promise<boolean>

    A promise which resolves once the Ping has been drawn and animated

    See

    Ping#drawPing

drawOffscreenPing

  • drawOffscreenPing(position, options?): Promise<boolean>

  • Draw a ping at the edge of the viewport, pointing to the location of an off-screen ping.

    Parameters

    • position: Point

      The coordinates of the off-screen ping.

    • Optional options: PingOptions = {}

      Additional options to configure how the ping is drawn.

    Returns Promise<boolean>

    A promise which resolves once the Ping has been drawn and animated

    See

    Ping#drawPing

drawPing

  • drawPing(position, options?): Promise<boolean>

  • Draw a ping on the canvas.

    Parameters

    • position: Point

      The position on the canvas that was pinged.

    • Optional options: PingOptions = {}

      Additional options to configure how the ping is drawn.

    Returns Promise<boolean>

    A promise which resolves once the Ping has been drawn and animated

    See

    Ping#animate

activate

  • activate(options?): InteractionLayer

  • Activate the InteractionLayer, deactivating other layers and marking this layer's children as interactive.

    Parameters

    • Optional options: {
          tool: string;
      } = {}

      Options which configure layer activation

      • tool: string

        A specific tool in the control palette to set as active

    Returns InteractionLayer

    The layer instance, now activated

deactivate

getZIndex

  • getZIndex(): number

  • Get the zIndex that should be used for ordering this layer vertically relative to others in the same Container.

    Returns number

draw

  • draw(options?): Promise<CanvasLayer>

  • Draw the canvas layer, rendering its internal components and returning a Promise. The Promise resolves to the drawn layer once its contents are successfully rendered.

    Parameters

    • Optional options: any = {}

      Options which configure how the layer is drawn

    Returns Promise<CanvasLayer>

tearDown

  • tearDown(options?): Promise<CanvasLayer>

  • Deconstruct data used in the current layer in preparation to re-draw the canvas

    Parameters

    • Optional options: any = {}

      Options which configure how the layer is deconstructed

    Returns Promise<CanvasLayer>

Protected _onLongPress

  • _onLongPress(event, origin): any
  • Protected

    Handle pinging the canvas.

    Parameters

    • event: FederatedEvent

      The triggering canvas interaction event.

    • origin: Point

      The local canvas coordinates of the mousepress.

    Returns any

Protected _onCanvasPan

  • _onCanvasPan(): void
  • Protected

    Handle the canvas panning to a new view.

    Returns void

Protected _activate

  • _activate(): void
  • Protected

    The inner _activate method which may be defined by each InteractionLayer subclass.

    Returns void

Protected _onClickLeft

  • _onClickLeft(event): void
  • Protected

    Handle left mouse-click events which originate from the Canvas stage.

    Parameters

    • event: FederatedEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

    See

    Canvas._onClickLeft

Protected _onClickLeft2

  • _onClickLeft2(event): void
  • Protected

    Handle double left-click events which originate from the Canvas stage.

    Parameters

    • event: FederatedEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

    See

    Canvas.#onClickLeft2

Protected _canDragLeftStart

  • _canDragLeftStart(user, event): boolean
  • Protected

    Does the User have permission to left-click drag on the Canvas?

    Parameters

    • user: User

      The User performing the action.

    • event: FederatedEvent

      The event object.

    Returns boolean

Protected _onDragLeftStart

  • _onDragLeftStart(event): void
  • Protected

    Start a left-click drag workflow originating from the Canvas stage.

    Parameters

    • event: FederatedEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

    See

    Canvas.#onDragLeftStart

Protected _onDragLeftMove

  • _onDragLeftMove(event): void
  • Protected

    Continue a left-click drag workflow originating from the Canvas stage.

    Parameters

    • event: FederatedEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

    See

    Canvas.#onDragLeftMove

Protected _onDragLeftDrop

  • _onDragLeftDrop(event): void
  • Protected

    Conclude a left-click drag workflow originating from the Canvas stage.

    Parameters

    • event: FederatedEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

    See

    Canvas.#onDragLeftDrop

Protected _onDragLeftCancel

  • _onDragLeftCancel(event): void
  • Protected

    Cancel a left-click drag workflow originating from the Canvas stage.

    Parameters

    • event: PointerEvent

      A right-click pointer event on the document.

    Returns void

    See

    Canvas.#onDragLeftDrop

Protected _onClickRight

  • _onClickRight(event): void
  • Protected

    Handle right mouse-click events which originate from the Canvas stage.

    Parameters

    • event: FederatedEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

    See

    Canvas._onClickRight

Protected _onMouseWheel

Protected _onDeleteKey

Private _findViewportIntersection

  • _findViewportIntersection(position): {
        ray: Ray;
        intersection: any;
    }
  • Private

    Given off-screen coordinates, determine the closest point at the edge of the viewport to these coordinates.

    Parameters

    • position: Point

      The off-screen coordinates.

    Returns {
        ray: Ray;
        intersection: any;
    }

    The closest point at the edge of the viewport to these coordinates and a ray cast from the centre of the screen towards it.

    • ray: Ray
    • intersection: any

Settings

Member Visibility

Theme

On This Page

doorscursorsrulersdebugselect_cursorseventModeoptions_rulers_offscreenPings#drawing#drawnruleractivenamehookNamelayerOptionsinstancegetRulerForUser_draw_tearDowndrawCursorsdrawRulersdrawDoorsdrawSelect_deactivate_onMouseMovedrawCursorupdateCursorupdateRulerhandlePingdrawOffscreenPingdrawPingactivatedeactivategetZIndexdrawtearDown_onLongPress_onCanvasPan_activate_onClickLeft_onClickLeft2_canDragLeftStart_onDragLeftStart_onDragLeftMove_onDragLeftDrop_onDragLeftCancel_onClickRight_onMouseWheel_onDeleteKey_findViewportIntersection