- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
import type { ExtensionMetadata, Renderer } from '@pixi/core';
import { ExtensionType } from '@pixi/core';
import type { IApplicationOptions } from './Application';
type ResizeableRenderer = Pick<Renderer, 'resize'>;
/**
* Middleware for for Application's resize functionality
* @private
* @class
*/
export class ResizePlugin
{
/** @ignore */
static extension: ExtensionMetadata = ExtensionType.Application;
public static resizeTo: Window | HTMLElement;
public static resize: () => void;
public static renderer: ResizeableRenderer;
public static queueResize: () => void;
private static _resizeId: number;
private static _resizeTo: Window | HTMLElement;
private static cancelResize: () => void;
/**
* Initialize the plugin with scope of application instance
* @static
* @private
* @param {object} [options] - See application options
*/
static init(options?: IApplicationOptions): void
{
Object.defineProperty(this, 'resizeTo',
/**
* The HTML element or window to automatically resize the
* renderer's view element to match width and height.
* @member {Window|HTMLElement}
* @name resizeTo
* @memberof PIXI.Application#
*/
{
set(dom: Window | HTMLElement)
{
globalThis.removeEventListener('resize', this.queueResize);
this._resizeTo = dom;
if (dom)
{
globalThis.addEventListener('resize', this.queueResize);
this.resize();
}
},
get()
{
return this._resizeTo;
},
});
/**
* Resize is throttled, so it's safe to call this multiple times per frame and it'll
* only be called once.
* @memberof PIXI.Application#
* @method queueResize
* @private
*/
this.queueResize = (): void =>
{
if (!this._resizeTo)
{
return;
}
this.cancelResize();
// // Throttle resize events per raf
this._resizeId = requestAnimationFrame(() => this.resize());
};
/**
* Cancel the resize queue.
* @memberof PIXI.Application#
* @method cancelResize
* @private
*/
this.cancelResize = (): void =>
{
if (this._resizeId)
{
cancelAnimationFrame(this._resizeId);
this._resizeId = null;
}
};
/**
* Execute an immediate resize on the renderer, this is not
* throttled and can be expensive to call many times in a row.
* Will resize only if `resizeTo` property is set.
* @memberof PIXI.Application#
* @method resize
*/
this.resize = (): void =>
{
if (!this._resizeTo)
{
return;
}
// clear queue resize
this.cancelResize();
let width: number;
let height: number;
// Resize to the window
if (this._resizeTo === globalThis.window)
{
width = globalThis.innerWidth;
height = globalThis.innerHeight;
}
// Resize to other HTML entities
else
{
const { clientWidth, clientHeight } = this._resizeTo as HTMLElement;
width = clientWidth;
height = clientHeight;
}
this.renderer.resize(width, height);
};
// On resize
this._resizeId = null;
this._resizeTo = null;
this.resizeTo = options.resizeTo || null;
}
/**
* Clean up the ticker, scoped to application
* @static
* @private
*/
static destroy(): void
{
globalThis.removeEventListener('resize', this.queueResize);
this.cancelResize();
this.cancelResize = null;
this.queueResize = null;
this.resizeTo = null;
this.resize = null;
}
}