@ue-too/board / CanvasProxy

Class: CanvasProxy

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:179

A proxy for the canvas element to prevent constant invoking of the getBoundingClientRect method.

Remarks

This is mainly used as a proxy to the canvas to prevent invoking the getBoundingClientRect method on the canvas every time a pointer event is triggered or a coordinate conversion is needed. Also to autoscale the canvas buffer depending on the device pixel ratio. It's important to note that in normal circumstances, you would not need to set the size of the canvas manually; you should use the css style width and height to set the size of the canvas.

See

• Canvas for the interface that this class implements
• Observable for the observable that this class emits
• Observer for the observer that can subscribe to the observable
• SubscriptionOptions for the options that can be passed to the subscribe method
• SynchronousObservable for the synchronous observable that this class emits
• CanvasPositionDimensionPublisher for the publisher that is used to publish the canvas dimensions

Implements

• Canvas
• Observable<[CanvasDimensions]>

Constructors

Constructor

new CanvasProxy(canvas?): CanvasProxy

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:187

Parameters

canvas?

HTMLCanvasElement

Returns

CanvasProxy

Accessors

detached

Get Signature

get detached(): boolean

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:238

Whether the canvas is currently detached from the DOM

Returns

boolean

Whether the canvas is currently detached from the DOM

Implementation of

Canvas.detached

---

dimensions

Get Signature

get dimensions(): object

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:242

Combined dimensions and position information

Returns

object

height

height: number

position

position: Point

width

width: number

Combined dimensions and position information

Implementation of

Canvas.dimensions

---

height

Get Signature

get height(): number

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:308

The canvas height in CSS pixels

Returns

number

The canvas height in CSS pixels

Implementation of

Canvas.height

---

position

Get Signature

get position(): Point

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:312

The top-left position of the canvas in window coordinates

Returns

Point

The top-left position of the canvas in window coordinates

Implementation of

Canvas.position

---

width

Get Signature

get width(): number

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:250

The canvas width in CSS pixels

Returns

number

The canvas width in CSS pixels

Implementation of

Canvas.width

Methods

attach()

attach(canvas): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:330

Parameters

canvas

HTMLCanvasElement

Returns

void

---

logCanvasTrueSize()

logCanvasTrueSize(): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:335

Returns

void

---

notify()

notify(...data): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:234

Parameters

data

...[CanvasDimensions]

Returns

void

Implementation of

Observable.notify

---

setCanvasHeight()

setCanvasHeight(height): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:292

Parameters

height

number

Returns

void

---

setCanvasWidth()

setCanvasWidth(width): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:265

Parameters

width

number

Returns

void

---

setCursor()

setCursor(style): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:316

Sets the CSS cursor style for visual feedback

Parameters

style

"grab" | "default" | "grabbing"

Returns

void

Implementation of

Canvas.setCursor

---

setHeight()

setHeight(height): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:285

set the height of the canvas the height is synonymous with the canvas style height not the canvas height

Parameters

height

number

Returns

void

---

setWidth()

setWidth(width): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:258

set the width of the canvas the width is synonymous with the canvas style width not the canvas width

Parameters

width

number

Returns

void

---

subscribe()

subscribe(observer, options?): () => void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:227

Parameters

observer

Observer<[CanvasDimensions]>

options?

SubscriptionOptions

Returns

(): void

Returns

void

Implementation of

Observable.subscribe

---

tearDown()

tearDown(): void

Defined in: packages/board/src/input-interpretation/input-state-machine/kmt-input-context.ts:322

Cleanup method to dispose of resources and event listeners

Returns

void

Implementation of

Canvas.tearDown