diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index 2c67c94..d44f9a4 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -33,6 +33,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context @@ -50,6 +52,7 @@ * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.Ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. + * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ constructor(options, arg2, arg3, arg4, arg5) { @@ -74,6 +77,7 @@ sharedTicker: false, forceCanvas: false, sharedLoader: false, + resizeTo: null, }, options); /** @@ -102,6 +106,10 @@ */ this.ticker = options.sharedTicker ? Ticker.shared : new Ticker(); + // Resize + this.resize = this.resize.bind(this); + this.resizeTo = options.resizeTo; + // Start the rendering if (options.autoStart) { @@ -138,6 +146,52 @@ } /** + * The element or window to resize the application to. + * @member {Window|HTMLElement} + */ + set resizeTo(node) + { + window.removeEventListener('resize', this.resize); + this._resizeTo = node; + if (node) + { + window.addEventListener('resize', this.resize); + this.resize(); + } + } + get resizeTo() + { + return this._resizeTo; + } + + /** + * If `resizeTo` is set, calling this function + * will resize to the width and height of that element. + */ + resize() + { + if (this._resizeTo) + { + // Resize to the window + if (this._resizeTo === window) + { + this.renderer.resize( + window.innerWidth, + window.innerHeight + ); + } + // Resize to other HTML entities + else + { + this.renderer.resize( + this._resizeTo.clientWidth, + this._resizeTo.clientHeight + ); + } + } + } + + /** * Render the current stage. */ render() @@ -187,6 +241,8 @@ */ destroy(removeView) { + this.resizeTo = null; + if (this._ticker) { const oldTicker = this._ticker; diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index 2c67c94..d44f9a4 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -33,6 +33,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context @@ -50,6 +52,7 @@ * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.Ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. + * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ constructor(options, arg2, arg3, arg4, arg5) { @@ -74,6 +77,7 @@ sharedTicker: false, forceCanvas: false, sharedLoader: false, + resizeTo: null, }, options); /** @@ -102,6 +106,10 @@ */ this.ticker = options.sharedTicker ? Ticker.shared : new Ticker(); + // Resize + this.resize = this.resize.bind(this); + this.resizeTo = options.resizeTo; + // Start the rendering if (options.autoStart) { @@ -138,6 +146,52 @@ } /** + * The element or window to resize the application to. + * @member {Window|HTMLElement} + */ + set resizeTo(node) + { + window.removeEventListener('resize', this.resize); + this._resizeTo = node; + if (node) + { + window.addEventListener('resize', this.resize); + this.resize(); + } + } + get resizeTo() + { + return this._resizeTo; + } + + /** + * If `resizeTo` is set, calling this function + * will resize to the width and height of that element. + */ + resize() + { + if (this._resizeTo) + { + // Resize to the window + if (this._resizeTo === window) + { + this.renderer.resize( + window.innerWidth, + window.innerHeight + ); + } + // Resize to other HTML entities + else + { + this.renderer.resize( + this._resizeTo.clientWidth, + this._resizeTo.clientHeight + ); + } + } + } + + /** * Render the current stage. */ render() @@ -187,6 +241,8 @@ */ destroy(removeView) { + this.resizeTo = null; + if (this._ticker) { const oldTicker = this._ticker; diff --git a/packages/app/test/index.js b/packages/app/test/index.js index 7bfa205..3fe17a8 100644 --- a/packages/app/test/index.js +++ b/packages/app/test/index.js @@ -1,7 +1,7 @@ const { Application } = require('../'); const { autoDetectRenderer } = require('@pixi/canvas-renderer'); const { Container } = require('@pixi/display'); -const { Ticker } = require('@pixi/ticker'); +const { Ticker, UPDATE_PRIORITY } = require('@pixi/ticker'); const { skipHello } = require('@pixi/utils'); skipHello(); @@ -88,7 +88,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign ticker if no ticker', function () @@ -102,7 +102,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign null ticker', function () @@ -119,4 +119,62 @@ expect(this.app._ticker).to.be.null; }); }); + + describe('resizeTo', function () + { + before(function () + { + const div = document.createElement('div'); + + div.style.width = '100px'; + div.style.height = '200px'; + document.body.appendChild(div); + this.div = div; + }); + + after(function () + { + this.div.parentNode.removeChild(this.div); + this.div = null; + }); + + it('should assign resizeTo', function () + { + const app = new Application({ + resizeTo: this.div, + }); + + expect(app.resizeTo).to.equal(this.div); + expect(app.view.width).to.equal(100); + expect(app.view.height).to.equal(200); + app.destroy(); + }); + + it('should resizeTo with resolution', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + app.destroy(); + }); + + it('should resizeTo with resolution and autoDensity', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + autoDensity: true, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + expect(app.view.style.width).to.equal(this.div.style.width); + expect(app.view.style.height).to.equal(this.div.style.height); + app.destroy(); + }); + }); }); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index 2c67c94..d44f9a4 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -33,6 +33,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context @@ -50,6 +52,7 @@ * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.Ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. + * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ constructor(options, arg2, arg3, arg4, arg5) { @@ -74,6 +77,7 @@ sharedTicker: false, forceCanvas: false, sharedLoader: false, + resizeTo: null, }, options); /** @@ -102,6 +106,10 @@ */ this.ticker = options.sharedTicker ? Ticker.shared : new Ticker(); + // Resize + this.resize = this.resize.bind(this); + this.resizeTo = options.resizeTo; + // Start the rendering if (options.autoStart) { @@ -138,6 +146,52 @@ } /** + * The element or window to resize the application to. + * @member {Window|HTMLElement} + */ + set resizeTo(node) + { + window.removeEventListener('resize', this.resize); + this._resizeTo = node; + if (node) + { + window.addEventListener('resize', this.resize); + this.resize(); + } + } + get resizeTo() + { + return this._resizeTo; + } + + /** + * If `resizeTo` is set, calling this function + * will resize to the width and height of that element. + */ + resize() + { + if (this._resizeTo) + { + // Resize to the window + if (this._resizeTo === window) + { + this.renderer.resize( + window.innerWidth, + window.innerHeight + ); + } + // Resize to other HTML entities + else + { + this.renderer.resize( + this._resizeTo.clientWidth, + this._resizeTo.clientHeight + ); + } + } + } + + /** * Render the current stage. */ render() @@ -187,6 +241,8 @@ */ destroy(removeView) { + this.resizeTo = null; + if (this._ticker) { const oldTicker = this._ticker; diff --git a/packages/app/test/index.js b/packages/app/test/index.js index 7bfa205..3fe17a8 100644 --- a/packages/app/test/index.js +++ b/packages/app/test/index.js @@ -1,7 +1,7 @@ const { Application } = require('../'); const { autoDetectRenderer } = require('@pixi/canvas-renderer'); const { Container } = require('@pixi/display'); -const { Ticker } = require('@pixi/ticker'); +const { Ticker, UPDATE_PRIORITY } = require('@pixi/ticker'); const { skipHello } = require('@pixi/utils'); skipHello(); @@ -88,7 +88,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign ticker if no ticker', function () @@ -102,7 +102,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign null ticker', function () @@ -119,4 +119,62 @@ expect(this.app._ticker).to.be.null; }); }); + + describe('resizeTo', function () + { + before(function () + { + const div = document.createElement('div'); + + div.style.width = '100px'; + div.style.height = '200px'; + document.body.appendChild(div); + this.div = div; + }); + + after(function () + { + this.div.parentNode.removeChild(this.div); + this.div = null; + }); + + it('should assign resizeTo', function () + { + const app = new Application({ + resizeTo: this.div, + }); + + expect(app.resizeTo).to.equal(this.div); + expect(app.view.width).to.equal(100); + expect(app.view.height).to.equal(200); + app.destroy(); + }); + + it('should resizeTo with resolution', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + app.destroy(); + }); + + it('should resizeTo with resolution and autoDensity', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + autoDensity: true, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + expect(app.view.style.width).to.equal(this.div.style.width); + expect(app.view.style.height).to.equal(this.div.style.height); + app.destroy(); + }); + }); }); diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 5672d78..88e9029 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -23,7 +23,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index 2c67c94..d44f9a4 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -33,6 +33,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context @@ -50,6 +52,7 @@ * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.Ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. + * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ constructor(options, arg2, arg3, arg4, arg5) { @@ -74,6 +77,7 @@ sharedTicker: false, forceCanvas: false, sharedLoader: false, + resizeTo: null, }, options); /** @@ -102,6 +106,10 @@ */ this.ticker = options.sharedTicker ? Ticker.shared : new Ticker(); + // Resize + this.resize = this.resize.bind(this); + this.resizeTo = options.resizeTo; + // Start the rendering if (options.autoStart) { @@ -138,6 +146,52 @@ } /** + * The element or window to resize the application to. + * @member {Window|HTMLElement} + */ + set resizeTo(node) + { + window.removeEventListener('resize', this.resize); + this._resizeTo = node; + if (node) + { + window.addEventListener('resize', this.resize); + this.resize(); + } + } + get resizeTo() + { + return this._resizeTo; + } + + /** + * If `resizeTo` is set, calling this function + * will resize to the width and height of that element. + */ + resize() + { + if (this._resizeTo) + { + // Resize to the window + if (this._resizeTo === window) + { + this.renderer.resize( + window.innerWidth, + window.innerHeight + ); + } + // Resize to other HTML entities + else + { + this.renderer.resize( + this._resizeTo.clientWidth, + this._resizeTo.clientHeight + ); + } + } + } + + /** * Render the current stage. */ render() @@ -187,6 +241,8 @@ */ destroy(removeView) { + this.resizeTo = null; + if (this._ticker) { const oldTicker = this._ticker; diff --git a/packages/app/test/index.js b/packages/app/test/index.js index 7bfa205..3fe17a8 100644 --- a/packages/app/test/index.js +++ b/packages/app/test/index.js @@ -1,7 +1,7 @@ const { Application } = require('../'); const { autoDetectRenderer } = require('@pixi/canvas-renderer'); const { Container } = require('@pixi/display'); -const { Ticker } = require('@pixi/ticker'); +const { Ticker, UPDATE_PRIORITY } = require('@pixi/ticker'); const { skipHello } = require('@pixi/utils'); skipHello(); @@ -88,7 +88,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign ticker if no ticker', function () @@ -102,7 +102,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign null ticker', function () @@ -119,4 +119,62 @@ expect(this.app._ticker).to.be.null; }); }); + + describe('resizeTo', function () + { + before(function () + { + const div = document.createElement('div'); + + div.style.width = '100px'; + div.style.height = '200px'; + document.body.appendChild(div); + this.div = div; + }); + + after(function () + { + this.div.parentNode.removeChild(this.div); + this.div = null; + }); + + it('should assign resizeTo', function () + { + const app = new Application({ + resizeTo: this.div, + }); + + expect(app.resizeTo).to.equal(this.div); + expect(app.view.width).to.equal(100); + expect(app.view.height).to.equal(200); + app.destroy(); + }); + + it('should resizeTo with resolution', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + app.destroy(); + }); + + it('should resizeTo with resolution and autoDensity', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + autoDensity: true, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + expect(app.view.style.width).to.equal(this.div.style.width); + expect(app.view.style.height).to.equal(this.div.style.height); + app.destroy(); + }); + }); }); diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 5672d78..88e9029 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -23,7 +23,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 916eba7..4d85bfe 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -15,6 +15,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index 2c67c94..d44f9a4 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -33,6 +33,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context @@ -50,6 +52,7 @@ * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.Ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. + * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ constructor(options, arg2, arg3, arg4, arg5) { @@ -74,6 +77,7 @@ sharedTicker: false, forceCanvas: false, sharedLoader: false, + resizeTo: null, }, options); /** @@ -102,6 +106,10 @@ */ this.ticker = options.sharedTicker ? Ticker.shared : new Ticker(); + // Resize + this.resize = this.resize.bind(this); + this.resizeTo = options.resizeTo; + // Start the rendering if (options.autoStart) { @@ -138,6 +146,52 @@ } /** + * The element or window to resize the application to. + * @member {Window|HTMLElement} + */ + set resizeTo(node) + { + window.removeEventListener('resize', this.resize); + this._resizeTo = node; + if (node) + { + window.addEventListener('resize', this.resize); + this.resize(); + } + } + get resizeTo() + { + return this._resizeTo; + } + + /** + * If `resizeTo` is set, calling this function + * will resize to the width and height of that element. + */ + resize() + { + if (this._resizeTo) + { + // Resize to the window + if (this._resizeTo === window) + { + this.renderer.resize( + window.innerWidth, + window.innerHeight + ); + } + // Resize to other HTML entities + else + { + this.renderer.resize( + this._resizeTo.clientWidth, + this._resizeTo.clientHeight + ); + } + } + } + + /** * Render the current stage. */ render() @@ -187,6 +241,8 @@ */ destroy(removeView) { + this.resizeTo = null; + if (this._ticker) { const oldTicker = this._ticker; diff --git a/packages/app/test/index.js b/packages/app/test/index.js index 7bfa205..3fe17a8 100644 --- a/packages/app/test/index.js +++ b/packages/app/test/index.js @@ -1,7 +1,7 @@ const { Application } = require('../'); const { autoDetectRenderer } = require('@pixi/canvas-renderer'); const { Container } = require('@pixi/display'); -const { Ticker } = require('@pixi/ticker'); +const { Ticker, UPDATE_PRIORITY } = require('@pixi/ticker'); const { skipHello } = require('@pixi/utils'); skipHello(); @@ -88,7 +88,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign ticker if no ticker', function () @@ -102,7 +102,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign null ticker', function () @@ -119,4 +119,62 @@ expect(this.app._ticker).to.be.null; }); }); + + describe('resizeTo', function () + { + before(function () + { + const div = document.createElement('div'); + + div.style.width = '100px'; + div.style.height = '200px'; + document.body.appendChild(div); + this.div = div; + }); + + after(function () + { + this.div.parentNode.removeChild(this.div); + this.div = null; + }); + + it('should assign resizeTo', function () + { + const app = new Application({ + resizeTo: this.div, + }); + + expect(app.resizeTo).to.equal(this.div); + expect(app.view.width).to.equal(100); + expect(app.view.height).to.equal(200); + app.destroy(); + }); + + it('should resizeTo with resolution', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + app.destroy(); + }); + + it('should resizeTo with resolution and autoDensity', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + autoDensity: true, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + expect(app.view.style.width).to.equal(this.div.style.width); + expect(app.view.style.height).to.equal(this.div.style.height); + app.destroy(); + }); + }); }); diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 5672d78..88e9029 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -23,7 +23,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 916eba7..4d85bfe 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -15,6 +15,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index c9e6c1d..09f8f06 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -27,7 +27,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. @@ -109,7 +110,8 @@ * * @member {boolean} */ - this.autoResize = options.autoResize || false; + this.autoDensity = options.autoDensity || options.autoResize || false; + // autoResize is deprecated, provides fallback support /** * Tracks the blend modes useful for this renderer. @@ -249,7 +251,7 @@ this.view.width = screenWidth * this.resolution; this.view.height = screenHeight * this.resolution; - if (this.autoResize) + if (this.autoDensity) { this.view.style.width = `${screenWidth}px`; this.view.style.height = `${screenHeight}px`; @@ -315,7 +317,7 @@ this.transparent = false; - this.autoResize = false; + this.autoDensity = false; this.blendModes = null; diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index 35b245b..147617c 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -932,4 +932,24 @@ * @return {PIXI.Texture} */ Texture.fromFrame = textureFrom.bind(null, 'fromFrame'); + + /** + * @deprecated since 5.0.0 + * @member {boolean} PIXI.AbstractRenderer#autoResize + * @see PIXI.AbstractRenderer#autoDensity + */ + Object.defineProperty(PIXI.AbstractRenderer.prototype, 'autoResize', { + get() + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + return this.autoDensity; + }, + set(value) + { + warn('PIXI.AbstractRenderer autoResize is deprecated, use autoDensity'); + + this.autoDensity = value; + }, + }); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index 2c67c94..d44f9a4 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -33,6 +33,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context @@ -50,6 +52,7 @@ * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.Ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. + * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ constructor(options, arg2, arg3, arg4, arg5) { @@ -74,6 +77,7 @@ sharedTicker: false, forceCanvas: false, sharedLoader: false, + resizeTo: null, }, options); /** @@ -102,6 +106,10 @@ */ this.ticker = options.sharedTicker ? Ticker.shared : new Ticker(); + // Resize + this.resize = this.resize.bind(this); + this.resizeTo = options.resizeTo; + // Start the rendering if (options.autoStart) { @@ -138,6 +146,52 @@ } /** + * The element or window to resize the application to. + * @member {Window|HTMLElement} + */ + set resizeTo(node) + { + window.removeEventListener('resize', this.resize); + this._resizeTo = node; + if (node) + { + window.addEventListener('resize', this.resize); + this.resize(); + } + } + get resizeTo() + { + return this._resizeTo; + } + + /** + * If `resizeTo` is set, calling this function + * will resize to the width and height of that element. + */ + resize() + { + if (this._resizeTo) + { + // Resize to the window + if (this._resizeTo === window) + { + this.renderer.resize( + window.innerWidth, + window.innerHeight + ); + } + // Resize to other HTML entities + else + { + this.renderer.resize( + this._resizeTo.clientWidth, + this._resizeTo.clientHeight + ); + } + } + } + + /** * Render the current stage. */ render() @@ -187,6 +241,8 @@ */ destroy(removeView) { + this.resizeTo = null; + if (this._ticker) { const oldTicker = this._ticker; diff --git a/packages/app/test/index.js b/packages/app/test/index.js index 7bfa205..3fe17a8 100644 --- a/packages/app/test/index.js +++ b/packages/app/test/index.js @@ -1,7 +1,7 @@ const { Application } = require('../'); const { autoDetectRenderer } = require('@pixi/canvas-renderer'); const { Container } = require('@pixi/display'); -const { Ticker } = require('@pixi/ticker'); +const { Ticker, UPDATE_PRIORITY } = require('@pixi/ticker'); const { skipHello } = require('@pixi/utils'); skipHello(); @@ -88,7 +88,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign ticker if no ticker', function () @@ -102,7 +102,7 @@ expect(ticker.add).to.be.calledOnce; expect(ticker.add.args[0][0]).to.be.equal(this.app.render); expect(ticker.add.args[0][1]).to.be.equal(this.app); - expect(ticker.add.args[0][2]).to.be.equal(PIXI.UPDATE_PRIORITY.LOW); + expect(ticker.add.args[0][2]).to.be.equal(UPDATE_PRIORITY.LOW); }); it('should assign null ticker', function () @@ -119,4 +119,62 @@ expect(this.app._ticker).to.be.null; }); }); + + describe('resizeTo', function () + { + before(function () + { + const div = document.createElement('div'); + + div.style.width = '100px'; + div.style.height = '200px'; + document.body.appendChild(div); + this.div = div; + }); + + after(function () + { + this.div.parentNode.removeChild(this.div); + this.div = null; + }); + + it('should assign resizeTo', function () + { + const app = new Application({ + resizeTo: this.div, + }); + + expect(app.resizeTo).to.equal(this.div); + expect(app.view.width).to.equal(100); + expect(app.view.height).to.equal(200); + app.destroy(); + }); + + it('should resizeTo with resolution', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + app.destroy(); + }); + + it('should resizeTo with resolution and autoDensity', function () + { + const app = new Application({ + resolution: 2, + resizeTo: this.div, + autoDensity: true, + }); + + expect(app.view.width).to.equal(200); + expect(app.view.height).to.equal(400); + expect(app.view.style.width).to.equal(this.div.style.width); + expect(app.view.style.height).to.equal(this.div.style.height); + app.destroy(); + }); + }); }); diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index 5672d78..88e9029 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -23,7 +23,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 916eba7..4d85bfe 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -15,6 +15,8 @@ * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you * need to call toDataUrl on the webgl context diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index c9e6c1d..09f8f06 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -27,7 +27,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. @@ -109,7 +110,8 @@ * * @member {boolean} */ - this.autoResize = options.autoResize || false; + this.autoDensity = options.autoDensity || options.autoResize || false; + // autoResize is deprecated, provides fallback support /** * Tracks the blend modes useful for this renderer. @@ -249,7 +251,7 @@ this.view.width = screenWidth * this.resolution; this.view.height = screenHeight * this.resolution; - if (this.autoResize) + if (this.autoDensity) { this.view.style.width = `${screenWidth}px`; this.view.style.height = `${screenHeight}px`; @@ -315,7 +317,7 @@ this.transparent = false; - this.autoResize = false; + this.autoDensity = false; this.blendModes = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index ec07fe4..935d455 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -38,7 +38,8 @@ * @param {number} [options.height=600] - the height of the screen * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false + * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 * @param {boolean} [options.antialias=false] - sets antialias. If not available natively then FXAA * antialiasing is used * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native.