GridCanvasRenderer | @simplylinn/tonematrix

Hierarchy

EventEmitter<GridRendererEventMap>
- GridCanvasRenderer

Implements

IGridRenderer

Constructors

constructor

new GridCanvasRenderer(containerEl: HTMLElement, gridWidth: number, gridHeight: number): GridCanvasRenderer

Overrides EventEmitter<GridRendererEventMap>.constructor
- Defined in src/GridCanvasRenderer.ts:41
Parameters
- containerEl: HTMLElement
- gridWidth: number
  
  The width of the grid, in tiles
- gridHeight: number
  
  The height of the grid, in tiles
Returns GridCanvasRenderer

Properties

Private canvas

canvas: HTMLCanvasElement

Private ctx

ctx: CanvasRenderingContext2D

Private dragging

dragging: boolean = false

Private internalListeners

internal

Private lastPlayheadX

lastPlayheadX: number = -1

Private lastView

lastView: null | { canvasHeight: number; canvasWidth: number; gridHeight: number; gridWidth: number } = null

Private mouseX

mouseX: number = NaN

Private mouseY

mouseY: number = NaN

Private particleSystem

particleSystem: ParticleSystem

Private spriteSheet

spriteSheet: null | SpriteSheet = null

Methods

addListener

addListener<T>(event: T, fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void, context?: any): GridCanvasRenderer

Implementation of IGridRenderer.addListener
Inherited from EventEmitter.addListener
- Defined in node_modules/eventemitter3/index.d.ts:45
Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
- fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void
  - - (...args: ArgumentMap<GridRendererEventMap>[T]): void
    - Parameters
      - Rest ...args: ArgumentMap<GridRendererEventMap>[T]
      Returns void
- Optional context: any
Returns GridCanvasRenderer

dispose

dispose(): void

Implementation of IGridRenderer.dispose
- Defined in src/GridCanvasRenderer.ts:395
Returns void

Private draw

draw(grid: IGrid, mouseX: number, mouseY: number): void

- Defined in src/GridCanvasRenderer.ts:184
Draw the current state of the app to the canvas element.

Parameters
- grid: IGrid
  
  The grid to be rendered
- mouseX: number
  
  The x position of the mouse on the canvas
- mouseY: number
  
  The y position of the mouse on the canvas
Returns void

emit

emit<T>(event: T, ...args: ArgumentMap<GridRendererEventMap>[T]): boolean

Implementation of IGridRenderer.emit
Inherited from EventEmitter.emit
- Defined in node_modules/eventemitter3/index.d.ts:32
Calls each of the listeners registered for a given event.

Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
- Rest ...args: ArgumentMap<GridRendererEventMap>[T]
Returns boolean

Private emitTileEvent

emitTileEvent(event: "tiledown" | "tilemove" | "tileup" | "tileclick"): void

- Defined in src/GridCanvasRenderer.ts:105
Parameters
- event: "tiledown" | "tilemove" | "tileup" | "tileclick"
Returns void

eventNames

eventNames(): keyof GridRendererEventMap[]

Implementation of IGridRenderer.eventNames
Inherited from EventEmitter.eventNames
- Defined in node_modules/eventemitter3/index.d.ts:15
Return an array listing the events for which the emitter has registered listeners.

Returns keyof GridRendererEventMap[]

Private getParticleHeatMap

getParticleHeatMap(grid: IGrid): readonly number[]

- Defined in src/GridCanvasRenderer.ts:264
Gets the "heat" of every tile by calculating how many particles are on top of the tile

Parameters
- grid: IGrid
Returns readonly number[]
An array of numbers from 0 to 1, representing the "heat" of each tile

Private getSpriteSheet

getSpriteSheet(grid: IGrid): SpriteSheet

- Defined in src/GridCanvasRenderer.ts:152
Parameters
- grid: IGrid
Returns SpriteSheet

Private listen

listen<P, Args, T>(target: T, event: P, listener: (...args: Args) => void): GridCanvasRenderer

- Defined in src/GridCanvasRenderer.ts:318
Add an event listener to a listenable object and save everything needed for removing it later.

internal
Type parameters
- P: keyof HTMLElementEventMap
- Args: [ev: Event] | [ev: ClipboardEvent] | [ev: UIEvent] | [ev: AnimationEvent] | [ev: MouseEvent] | [ev: InputEvent] | [ev: FocusEvent] | [ev: CompositionEvent] | [ev: DragEvent] | [ev: ErrorEvent] | [ev: FormDataEvent] | [ev: PointerEvent] | [ev: KeyboardEvent] | [ev: ProgressEvent<EventTarget>] | [ev: SecurityPolicyViolationEvent] | [ev: TouchEvent] | [ev: TransitionEvent] | [ev: WheelEvent] = ParseEventMap<HTMLElementEventMap>[P]
- T: AnyEventTarget<ParseEventMap<HTMLElementEventMap>, P, Args> = AnyEventTarget<ParseEventMap<HTMLElementEventMap>, P, Args>
Parameters
- target: T
- event: P
- listener: (...args: Args) => void
  - - (...args: Args): void
    - Parameters
      - Rest ...args: Args
      Returns void
Returns GridCanvasRenderer

listenerCount

listenerCount(event: keyof GridRendererEventMap): number

Implementation of IGridRenderer.listenerCount
Inherited from EventEmitter.listenerCount
- Defined in node_modules/eventemitter3/index.d.ts:27
Return the number of listeners listening to a given event.

Parameters
- event: keyof GridRendererEventMap
Returns number

listeners

listeners<T>(event: T): ((...args: ArgumentMap<GridRendererEventMap>[T]) => void)[]

Implementation of IGridRenderer.listeners
Inherited from EventEmitter.listeners
- Defined in node_modules/eventemitter3/index.d.ts:20
Return the listeners registered for a given event.

Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
Returns ((...args: ArgumentMap<GridRendererEventMap>[T]) => void)[]

off

off<T>(event: T, fn?: (...args: ArgumentMap<GridRendererEventMap>[T]) => void, context?: any, once?: boolean): GridCanvasRenderer

Implementation of IGridRenderer.off
Inherited from EventEmitter.off
- Defined in node_modules/eventemitter3/index.d.ts:69
Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
- Optional fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void
  - - (...args: ArgumentMap<GridRendererEventMap>[T]): void
    - Parameters
      - Rest ...args: ArgumentMap<GridRendererEventMap>[T]
      Returns void
- Optional context: any
- Optional once: boolean
Returns GridCanvasRenderer

on

on<T>(event: T, fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void, context?: any): GridCanvasRenderer

Implementation of IGridRenderer.on
Inherited from EventEmitter.on
- Defined in node_modules/eventemitter3/index.d.ts:40
Add a listener for a given event.

Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
- fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void
  - - (...args: ArgumentMap<GridRendererEventMap>[T]): void
    - Parameters
      - Rest ...args: ArgumentMap<GridRendererEventMap>[T]
      Returns void
- Optional context: any
Returns GridCanvasRenderer

once

once<T>(event: T, fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void, context?: any): GridCanvasRenderer

Implementation of IGridRenderer.once
Inherited from EventEmitter.once
- Defined in node_modules/eventemitter3/index.d.ts:54
Add a one-time listener for a given event.

Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
- fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void
  - - (...args: ArgumentMap<GridRendererEventMap>[T]): void
    - Parameters
      - Rest ...args: ArgumentMap<GridRendererEventMap>[T]
      Returns void
- Optional context: any
Returns GridCanvasRenderer

pixelCoordsToTileCoords

pixelCoordsToTileCoords(x: number, y: number, gridWidth: number, gridHeight: number): false | [x: number, y: number]

Implementation of IGridRenderer.pixelCoordsToTileCoords
- Defined in src/GridCanvasRenderer.ts:290
Converts coordinates in "pixel space" to coordinates in "tile space". In essence, if you pass in an (x, y) position on the canvas, this returns the corresponding (x, y) position on the grid.

Parameters
- x: number
  
  The x position, in pixels, to get the corresponding grid position for
- y: number
  
  The y position, in pixels, to get the corresponding grid position for
- gridWidth: number
  
  The width of the grid, in grid tiles
- gridHeight: number
  
  The height of the grid, in grid tiles
Returns false | [x: number, y: number]

removeAllListeners

removeAllListeners(event?: keyof GridRendererEventMap): GridCanvasRenderer

Implementation of IGridRenderer.removeAllListeners
Inherited from EventEmitter.removeAllListeners
- Defined in node_modules/eventemitter3/index.d.ts:79
Remove all listeners, or those of the specified event.

Parameters
- Optional event: keyof GridRendererEventMap
Returns GridCanvasRenderer

removeListener

removeListener<T>(event: T, fn?: (...args: ArgumentMap<GridRendererEventMap>[T]) => void, context?: any, once?: boolean): GridCanvasRenderer

Implementation of IGridRenderer.removeListener
Inherited from EventEmitter.removeListener
- Defined in node_modules/eventemitter3/index.d.ts:63
Remove the listeners of a given event.

Type parameters
- T: keyof GridRendererEventMap
Parameters
- event: T
- Optional fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void
  - - (...args: ArgumentMap<GridRendererEventMap>[T]): void
    - Parameters
      - Rest ...args: ArgumentMap<GridRendererEventMap>[T]
      Returns void
- Optional context: any
- Optional once: boolean
Returns GridCanvasRenderer

resetCanvasMousePosition

resetCanvasMousePosition(): void

- Defined in src/GridCanvasRenderer.ts:135
Resets the this.mouseX and this.mouseY variables. Call this when the mouse leaves the canvas or the screen is not being touched.

Returns void

setSize

setSize(newWidth: number, newHeight: number): void

Implementation of IGridRenderer.setSize
- Defined in src/GridCanvasRenderer.ts:384
Update the grid size width and height.

Parameters
- newWidth: number
- newHeight: number
Returns void

Private unlisten

unlisten<P, Args, T>(target: T, event: P, listener: (...args: Args) => void): GridCanvasRenderer

- Defined in src/GridCanvasRenderer.ts:346
Remove a listener from a listenable object.

internal
Type parameters
- P: keyof HTMLElementEventMap
- Args: [ev: Event] | [ev: ClipboardEvent] | [ev: UIEvent] | [ev: AnimationEvent] | [ev: MouseEvent] | [ev: InputEvent] | [ev: FocusEvent] | [ev: CompositionEvent] | [ev: DragEvent] | [ev: ErrorEvent] | [ev: FormDataEvent] | [ev: PointerEvent] | [ev: KeyboardEvent] | [ev: ProgressEvent<EventTarget>] | [ev: SecurityPolicyViolationEvent] | [ev: TouchEvent] | [ev: TransitionEvent] | [ev: WheelEvent] = ParseEventMap<HTMLElementEventMap>[P]
- T: AnyEventTarget<ParseEventMap<HTMLElementEventMap>, P, Args> = AnyEventTarget<ParseEventMap<HTMLElementEventMap>, P, Args>
Parameters
- target: T
- event: P
- listener: (...args: Args) => void
  - - (...args: Args): void
    - Parameters
      - Rest ...args: Args
      Returns void
Returns GridCanvasRenderer

update

update(grid: IGrid): void

Implementation of IGridRenderer.update
- Defined in src/GridCanvasRenderer.ts:147
Update, then draw the current state of the app to the canvas element.

Parameters
- grid: IGrid
  
  The grid to be rendered
Returns void

updateCanvasMousePosition

updateCanvasMousePosition(e: MouseEvent | Touch): void

- Defined in src/GridCanvasRenderer.ts:118
Updates the this.mouseX and this.mouseY variables based on where the mouse is on the canvas

Parameters
- e: MouseEvent | Touch
  
  The touch or click event that contains the new "mouse" position
Returns void

Hierarchy

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

containerEl: HTMLElement

gridWidth: number

gridHeight: number

Returns GridCanvasRenderer

Properties

Private canvas

Private ctx

Private dragging

Private internalListeners

Private lastPlayheadX

Private lastView

Private mouseX

Private mouseY

Private particleSystem

Private spriteSheet

Methods

addListener

Type parameters

T: keyof GridRendererEventMap

Parameters

event: T

fn: (...args: ArgumentMap<GridRendererEventMap>[T]) => void

Parameters

Rest ...args: ArgumentMap<GridRendererEventMap>[T]

Returns void

Optional context: any

Returns GridCanvasRenderer

dispose

Returns void

Private draw

Parameters

grid: IGrid

mouseX: number

mouseY: number

Returns void

emit

Type parameters

T: keyof GridRendererEventMap

Parameters

event: T

Rest ...args: ArgumentMap<GridRendererEventMap>[T]

Returns boolean

Private emitTileEvent

Parameters

event: "tiledown" | "tilemove" | "tileup" | "tileclick"

Returns void

eventNames

Returns keyof GridRendererEventMap[]

Private getParticleHeatMap

Parameters

grid: IGrid

Returns readonly number[]

Private getSpriteSheet

Parameters

grid: IGrid

Returns SpriteSheet

Private listen

Type parameters

P: keyof HTMLElementEventMap

T: AnyEventTarget<ParseEventMap<HTMLElementEventMap>, P, Args> = AnyEventTarget<ParseEventMap<HTMLElementEventMap>, P, Args>

Parameters

target: T

event: P

listener: (...args: Args) => void

Parameters

Rest ...args: Args

Returns void

Returns GridCanvasRenderer

listenerCount

Parameters

event: keyof GridRendererEventMap