1681-engine / ui / DomOverlay
Class: DomOverlay ​
Defined in: src/ui/dom/DomOverlay.ts:22
The element a DOM (or React) UI is mounted in, laid exactly over the canvas and resized with it. It sits beside the canvas in the same parent, so it shares the canvas's positioned ancestor and needs no change to the page's CSS.
The root lets presses through (pointer-events: none) so the world stays playable between panels; give what the player presses pointer-events: auto (DomOverlay.interactive). content is drawn at scale (a whole multiple for pixel-art UI): laid out on a box 1 / scale the overlay and scaled back up, so a window sized for 320 × 180 fills the screen at ×4 with sharp edges.
Constructors ​
Constructor ​
new DomOverlay(canvas, options?): DomOverlay;Defined in: src/ui/dom/DomOverlay.ts:33
Parameters ​
| Parameter | Type |
|---|---|
canvas | HTMLCanvasElement |
options | DomOverlayOptions |
Returns ​
DomOverlay
Properties ​
canvas ​
readonly canvas: HTMLCanvasElement;Defined in: src/ui/dom/DomOverlay.ts:34
content ​
readonly content: HTMLDivElement;Defined in: src/ui/dom/DomOverlay.ts:25
Where the UI goes: scaled by scale.
root ​
readonly root: HTMLDivElement;Defined in: src/ui/dom/DomOverlay.ts:23
Accessors ​
cssScale ​
Get Signature ​
get cssScale(): number;Defined in: src/ui/dom/DomOverlay.ts:68
CSS pixels per screen pixel of the canvas: 1 unless CSS stretches it.
Returns ​
number
height ​
Get Signature ​
get height(): number;Defined in: src/ui/dom/DomOverlay.ts:63
Returns ​
number
scale ​
Get Signature ​
get scale(): number;Defined in: src/ui/dom/DomOverlay.ts:72
Returns ​
number
width ​
Get Signature ​
get width(): number;Defined in: src/ui/dom/DomOverlay.ts:59
The overlay's size in CSS pixels (the canvas's box).
Returns ​
number
Methods ​
destroy() ​
destroy(): void;Defined in: src/ui/dom/DomOverlay.ts:101
Returns ​
void
setScale() ​
setScale(scale): void;Defined in: src/ui/dom/DomOverlay.ts:77
Draws content at scale (also published as the CSS variable --ui-scale).
Parameters ​
| Parameter | Type |
|---|---|
scale | number |
Returns ​
void
sync() ​
sync(): void;Defined in: src/ui/dom/DomOverlay.ts:84
Lines the overlay up with the canvas again; resizes do it by themselves.
Returns ​
void
interactive() ​
static interactive(el): HTMLElement;Defined in: src/ui/dom/DomOverlay.ts:53
Lets presses on el reach it (the overlay's root and content let them through to the canvas).
Parameters ​
| Parameter | Type |
|---|---|
el | HTMLElement |
Returns ​
HTMLElement