Options
All
  • Public
  • Public/Protected
  • All
Menu

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

Index

Constructors

Properties

doors: Container

A container of DoorControl instances

hud: Container

A container of HUD interface elements

cursors: Container

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

rulers: Container

Ruler tools, one per connected user

debug: any

A graphics instance used for drawing debugging visualization

select: any

The Canvas selection rectangle

_cursors: Object = {}

A mapping of user IDs to Cursor instances for quick access

hitArea: any
zIndex: number
interactiveChildren: boolean
visible: boolean
interactive: boolean
options: { name: string } = ...

Options for this layer instance.

Type declaration

  • name: string
renderable: boolean
_rulers: Object = {}

A mapping of user IDs to Ruler instances for quick access

_offscreenPings: Object = {}

The positions of any offscreen pings we are tracking.

Accessors

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

    Returns Ruler

  • get active(): boolean
  • Is this layer currently active

    Returns boolean

  • get name(): string
  • The canonical name of the CanvasLayer

    Returns string

  • get layerOptions(): any
  • override

    Returns any

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

    Returns CanvasLayer

Methods

  • getRulerForUser(userId: string): Ruler
  • Get the Ruler display for a specific User ID

    Parameters

    • userId: string

    Returns Ruler

  • _draw(options: any): Promise<void>
  • _tearDown(options: any): Promise<void>
  • drawCursors(): void
  • Draw the cursors container

    Returns void

  • drawRulers(): void
  • Create and add Ruler graphics instances for every game User.

    Returns void

  • drawDoors(): void
  • Draw door control icons to the doors container.

    Returns void

  • drawSelect(coords: any): 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(): void
  • _onMouseMove(event: InteractionEvent): void
  • Handle mousemove events on the game canvas to broadcast activity of the user's cursor position

    Parameters

    • event: InteractionEvent

    Returns void

  • drawCursor(user: 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(user: User, position: Point): 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(user: User, rulerData: any): 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: any

      Data which describes the new ruler measurement to display

    Returns void

  • handlePing(user: User, position: Point, [data]?: PingData): Promise<boolean>
  • Handle a broadcast ping.

    Parameters

    • user: User

      The user who pinged.

    • position: Point

      The position on the canvas that was pinged.

    • [data]: PingData = {}

      The broadcast ping data.

    Returns Promise<boolean>

    {@see Ping#animate}

  • drawOffscreenPing(position: Point, [options]?: PingOptions): Promise<boolean>
  • Draw a ping at the edge of the viewport, pointing to the location of an off-screen ping.

    Parameters

    • position: Point

      The co-ordinates of the off-screen ping.

    • [options]: PingOptions = {}

      Additional options to configure how the ping is drawn.

    Returns Promise<boolean>

    {@see Ping#animate}

  • drawPing(position: Point, [options]?: PingOptions): Promise<boolean>
  • Draw a ping on the canvas.

    Parameters

    • position: Point

      The position on the canvas that was pinged.

    • [options]: PingOptions = {}

      Additional options to configure how the ping is drawn.

    Returns Promise<boolean>

    {@see Ping#animate}

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

    Parameters

    • [options]: { tool: string } = {}

      Options which configure layer activation

      • tool: string

    Returns InteractionLayer

    The layer instance, now activated

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

    Returns number

  • 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

    • options: any = {}

    Returns Promise<CanvasLayer>

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

    Parameters

    • options: any = {}

    Returns Promise<CanvasLayer>

  • _onLongPress(event: InteractionEvent, origin: Point): any
  • Handle pinging the canvas.

    Parameters

    • event: InteractionEvent

      The triggering canvas interaction event.

    • origin: Point

      The local canvas coordinates of the mousepress.

    Returns any

  • _onCanvasPan(): void
  • Handle the canvas panning to a new view.

    Returns void

  • _activate(): void
  • The inner _activate method which may be defined by each InteractionLayer subclass.

    Returns void

  • _onClickLeft(event: InteractionEvent): void
  • Handle left mouse-click events which originate from the Canvas stage.

    see

    Canvas._onClickLeft

    Parameters

    • event: InteractionEvent

      The PIXI InteractionEvent which wraps a PointerEvent

    Returns void

  • _onClickLeft2(event: InteractionEvent): void
  • _onDragLeftStart(event: InteractionEvent): Promise<void>
  • _onDragLeftMove(event: InteractionEvent): void
  • _onDragLeftDrop(event: InteractionEvent): Promise<void>
  • _onDragLeftCancel(event: PointerEvent): void
  • _onClickRight(event: InteractionEvent): void
  • _onMouseWheel(event: WheelEvent): void
  • _onDeleteKey(event: KeyboardEvent): Promise<void>
  • _findViewportIntersection(position: Point): { ray: Ray; intersection: any }
  • Given an off-screen co-ordinate, determine the closest point at the edge of the viewport to that co-ordinate.

    Parameters

    • position: Point

      The off-screen co-ordinate.

    Returns { ray: Ray; intersection: any }

    The closest point at the edge of the viewport to that co-ordinate and a ray cast from the centre of the screen towards it.

    • ray: Ray
    • intersection: any