@pixi/app - npm Package Compare versions

Comparing version 5.0.0-alpha.2 to 5.0.0-alpha.3

lib/app.es.js

 /*!
- * @pixi/app - v5.0.0-alpha.2
- * Compiled Sat, 17 Mar 2018 17:48:48 UTC
+ * @pixi/app - v5.0.0-alpha.3
+ * Compiled Tue, 03 Jul 2018 04:08:21 UTC
  *
@@ -11,3 +11,2 @@ * @pixi/app is licensed under the MIT License.
 import { Renderer } from '@pixi/core';
-import { Ticker, UPDATE_PRIORITY } from '@pixi/ticker';
 
@@ -27,3 +26,3 @@ /**
  * // ex, add display objects
- * app.stage.addChild(PIXI.Sprite.fromImage('something.png'));
+ * app.stage.addChild(PIXI.Sprite.from('something.png'));
  *
@@ -35,2 +34,4 @@ * @class
 {
+    var this$1 = this;
+
     // Support for constructor(width, height, options, noWebGL, useSharedTicker)
@@ -47,16 +48,9 @@ if (typeof options === 'number')
 
-    /**
-     * The default options, so we mixin functionality later.
-     * @member {object}
-     * @protected
-     */
-    this._options = options = Object.assign({
-        autoStart: true,
-        sharedTicker: false,
+    // The default options
+    options = Object.assign({
         forceCanvas: false,
-        sharedLoader: false,
     }, options);
 
     /**
-     * WebGL renderer if available, otherwise CanvasRenderer
+     * WebGL renderer if available, otherwise CanvasRenderer.
      * @member {PIXI.Renderer|PIXI.CanvasRenderer}
@@ -72,25 +66,20 @@ */
 
-    /**
-     * Internal reference to the ticker
-     * @member {PIXI.Ticker}
-     * @private
-     */
-    this._ticker = null;
+    // install plugins here
+    Application._plugins.forEach(function (plugin) {
+        plugin.init.call(this$1, options);
+    });
+};
 
-    /**
-     * Ticker for doing render updates.
-     * @member {PIXI.Ticker}
-     * @default PIXI.Ticker.shared
-     */
-    this.ticker = options.sharedTicker ? Ticker.shared : new Ticker();
+var prototypeAccessors = { view: { configurable: true },screen: { configurable: true } };
 
-    // Start the rendering
-    if (options.autoStart)
-    {
-        this.start();
-    }
+/**
+ * Register a middleware plugin for the application
+ * @static
+ * @param {PIXI.Application~Plugin} plugin - Plugin being installed
+ */
+Application.registerPlugin = function registerPlugin (plugin)
+{
+    Application._plugins.push(plugin);
 };
 
-var prototypeAccessors = { ticker: { configurable: true },view: { configurable: true },screen: { configurable: true } };
-
 /**
@@ -107,19 +96,2 @@ * Create the new renderer, this is here to overridden to support Canvas.
 
-prototypeAccessors.ticker.set = function (ticker$$1) // eslint-disable-line require-jsdoc
-{
-    if (this._ticker)
-    {
-        this._ticker.remove(this.render, this);
-    }
-    this._ticker = ticker$$1;
-    if (ticker$$1)
-    {
-        ticker$$1.add(this.render, this, UPDATE_PRIORITY.LOW);
-    }
-};
-prototypeAccessors.ticker.get = function () // eslint-disable-line require-jsdoc
-{
-    return this._ticker;
-};
-
 /**
@@ -134,18 +106,2 @@ * Render the current stage.
 /**
- * Convenience method for stopping the render.
- */
-Application.prototype.stop = function stop ()
-{
-    this._ticker.stop();
-};
-
-/**
- * Convenience method for starting the render.
- */
-Application.prototype.start = function start ()
-{
-    this._ticker.start();
-};
-
-/**
  * Reference to the renderer's canvas element.
@@ -161,3 +117,3 @@ * @member {HTMLCanvasElement}
 /**
- * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen
+ * Reference to the renderer's screen rectangle. Its safe to use as `filterArea` or `hitArea` for the whole screen.
  * @member {PIXI.Rectangle}
@@ -174,13 +130,24 @@ * @readonly
  * @param {Boolean} [removeView=false] Automatically remove canvas from DOM.
+ * @param {object|boolean} [stageOptions] - Options parameter. A boolean will act as if all options
+ *  have been set to that value
+ * @param {boolean} [stageOptions.children=false] - if set to true, all the children will have their destroy
+ *  method called as well. 'stageOptions' will be passed on to those calls.
+ * @param {boolean} [stageOptions.texture=false] - Only used for child Sprites if stageOptions.children is set
+ *  to true. Should it destroy the texture of the child sprite
+ * @param {boolean} [stageOptions.baseTexture=false] - Only used for child Sprites if stageOptions.children is set
+ *  to true. Should it destroy the base texture of the child sprite
  */
 Application.prototype.destroy = function destroy (removeView)
 {
-    if (this._ticker)
-    {
-        var oldTicker = this._ticker;
+        var this$1 = this;
 
-        this.ticker = null;
-        oldTicker.destroy();
-    }
+    // Destroy plugins in the opposite order
+    // which they were constructed
+    var plugins = Application._plugins.slice(0);
 
+    plugins.reverse();
+    plugins.forEach(function (plugin) {
+        plugin.destroy.call(this$1);
+    });
+
     this.stage.destroy();
@@ -197,3 +164,98 @@ this.stage = null;
 
+/**
+ * @typedef {object} PIXI.Application~Plugin
+ * @property {function} init - Called when Application is constructed, scoped to Application instance.
+ *  Passes in `options` as the only argument, which are Application constructor options.
+ * @property {function} destroy - Called when destroying Application, scoped to Application instance
+ */
+
+/**
+ * Collection of installed plugins.
+ * @static
+ * @private
+ * @type {PIXI.Application~Plugin[]}
+ */
+Application._plugins = [];
+
+/**
+ * Middleware for for Application's resize functionality
+ * @private
+ * @class
+ */
+var ResizePlugin = function ResizePlugin () {};
+
+ResizePlugin.init = function init (options)
+{
+        var this$1 = this;
+
+    /**
+     * The element or window to resize the application to.
+     * @type {Window|HTMLElement}
+     * @name resizeTo
+     * @memberof PIXI.Application#
+     */
+    Object.defineProperty(this, 'resizeTo',
+        {
+            set: function set(dom)
+            {
+                window.removeEventListener('resize', this.resize);
+                this._resizeTo = dom;
+                if (dom)
+                {
+                    window.addEventListener('resize', this.resize);
+                    this.resize();
+                }
+            },
+            get: function get()
+            {
+                return this._resizeTo;
+            },
+        });
+
+    /**
+     * If `resizeTo` is set, calling this function
+     * will resize to the width and height of that element.
+     * @method PIXI.Application#resize
+     */
+    this.resize = function () {
+        if (this$1._resizeTo)
+        {
+            // Resize to the window
+            if (this$1._resizeTo === window)
+            {
+                this$1.renderer.resize(
+                    window.innerWidth,
+                    window.innerHeight
+                );
+            }
+            // Resize to other HTML entities
+            else
+            {
+                this$1.renderer.resize(
+                    this$1._resizeTo.clientWidth,
+                    this$1._resizeTo.clientHeight
+                );
+            }
+        }
+    };
+
+    // On resize
+    this._resizeTo = null;
+    this.resizeTo = options.resizeTo || null;
+};
+
+/**
+ * Clean up the ticker, scoped to application
+ * @static
+ * @private
+ */
+ResizePlugin.destroy = function destroy ()
+{
+    this.resizeTo = null;
+    this.resize = null;
+};
+
+Application.registerPlugin(ResizePlugin);
+
 export { Application };
 //# sourceMappingURL=app.es.js.map

lib/app.js

 /*!
- * @pixi/app - v5.0.0-alpha.2
- * Compiled Sat, 17 Mar 2018 17:48:48 UTC
+ * @pixi/app - v5.0.0-alpha.3
+ * Compiled Tue, 03 Jul 2018 04:08:21 UTC
  *
@@ -15,3 +15,2 @@ * @pixi/app is licensed under the MIT License.
 var core = require('@pixi/core');
-var ticker = require('@pixi/ticker');
 
@@ -31,3 +30,3 @@ /**
  * // ex, add display objects
- * app.stage.addChild(PIXI.Sprite.fromImage('something.png'));
+ * app.stage.addChild(PIXI.Sprite.from('something.png'));
  *
@@ -39,2 +38,4 @@ * @class
 {
+    var this$1 = this;
+
     // Support for constructor(width, height, options, noWebGL, useSharedTicker)
@@ -51,16 +52,9 @@ if (typeof options === 'number')
 
-    /**
-     * The default options, so we mixin functionality later.
-     * @member {object}
-     * @protected
-     */
-    this._options = options = Object.assign({
-        autoStart: true,
-        sharedTicker: false,
+    // The default options
+    options = Object.assign({
         forceCanvas: false,
-        sharedLoader: false,
     }, options);
 
     /**
-     * WebGL renderer if available, otherwise CanvasRenderer
+     * WebGL renderer if available, otherwise CanvasRenderer.
      * @member {PIXI.Renderer|PIXI.CanvasRenderer}
@@ -76,25 +70,20 @@ */
 
-    /**
-     * Internal reference to the ticker
-     * @member {PIXI.Ticker}
-     * @private
-     */
-    this._ticker = null;
+    // install plugins here
+    Application._plugins.forEach(function (plugin) {
+        plugin.init.call(this$1, options);
+    });
+};
 
-    /**
-     * Ticker for doing render updates.
-     * @member {PIXI.Ticker}
-     * @default PIXI.Ticker.shared
-     */
-    this.ticker = options.sharedTicker ? ticker.Ticker.shared : new ticker.Ticker();
+var prototypeAccessors = { view: { configurable: true },screen: { configurable: true } };
 
-    // Start the rendering
-    if (options.autoStart)
-    {
-        this.start();
-    }
+/**
+ * Register a middleware plugin for the application
+ * @static
+ * @param {PIXI.Application~Plugin} plugin - Plugin being installed
+ */
+Application.registerPlugin = function registerPlugin (plugin)
+{
+    Application._plugins.push(plugin);
 };
 
-var prototypeAccessors = { ticker: { configurable: true },view: { configurable: true },screen: { configurable: true } };
-
 /**
@@ -111,19 +100,2 @@ * Create the new renderer, this is here to overridden to support Canvas.
 
-prototypeAccessors.ticker.set = function (ticker$$1) // eslint-disable-line require-jsdoc
-{
-    if (this._ticker)
-    {
-        this._ticker.remove(this.render, this);
-    }
-    this._ticker = ticker$$1;
-    if (ticker$$1)
-    {
-        ticker$$1.add(this.render, this, ticker.UPDATE_PRIORITY.LOW);
-    }
-};
-prototypeAccessors.ticker.get = function () // eslint-disable-line require-jsdoc
-{
-    return this._ticker;
-};
-
 /**
@@ -138,18 +110,2 @@ * Render the current stage.
 /**
- * Convenience method for stopping the render.
- */
-Application.prototype.stop = function stop ()
-{
-    this._ticker.stop();
-};
-
-/**
- * Convenience method for starting the render.
- */
-Application.prototype.start = function start ()
-{
-    this._ticker.start();
-};
-
-/**
  * Reference to the renderer's canvas element.
@@ -165,3 +121,3 @@ * @member {HTMLCanvasElement}
 /**
- * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen
+ * Reference to the renderer's screen rectangle. Its safe to use as `filterArea` or `hitArea` for the whole screen.
  * @member {PIXI.Rectangle}
@@ -178,13 +134,24 @@ * @readonly
  * @param {Boolean} [removeView=false] Automatically remove canvas from DOM.
+ * @param {object|boolean} [stageOptions] - Options parameter. A boolean will act as if all options
+ *  have been set to that value
+ * @param {boolean} [stageOptions.children=false] - if set to true, all the children will have their destroy
+ *  method called as well. 'stageOptions' will be passed on to those calls.
+ * @param {boolean} [stageOptions.texture=false] - Only used for child Sprites if stageOptions.children is set
+ *  to true. Should it destroy the texture of the child sprite
+ * @param {boolean} [stageOptions.baseTexture=false] - Only used for child Sprites if stageOptions.children is set
+ *  to true. Should it destroy the base texture of the child sprite
  */
 Application.prototype.destroy = function destroy (removeView)
 {
-    if (this._ticker)
-    {
-        var oldTicker = this._ticker;
+        var this$1 = this;
 
-        this.ticker = null;
-        oldTicker.destroy();
-    }
+    // Destroy plugins in the opposite order
+    // which they were constructed
+    var plugins = Application._plugins.slice(0);
 
+    plugins.reverse();
+    plugins.forEach(function (plugin) {
+        plugin.destroy.call(this$1);
+    });
+
     this.stage.destroy();
@@ -201,3 +168,98 @@ this.stage = null;
 
+/**
+ * @typedef {object} PIXI.Application~Plugin
+ * @property {function} init - Called when Application is constructed, scoped to Application instance.
+ *  Passes in `options` as the only argument, which are Application constructor options.
+ * @property {function} destroy - Called when destroying Application, scoped to Application instance
+ */
+
+/**
+ * Collection of installed plugins.
+ * @static
+ * @private
+ * @type {PIXI.Application~Plugin[]}
+ */
+Application._plugins = [];
+
+/**
+ * Middleware for for Application's resize functionality
+ * @private
+ * @class
+ */
+var ResizePlugin = function ResizePlugin () {};
+
+ResizePlugin.init = function init (options)
+{
+        var this$1 = this;
+
+    /**
+     * The element or window to resize the application to.
+     * @type {Window|HTMLElement}
+     * @name resizeTo
+     * @memberof PIXI.Application#
+     */
+    Object.defineProperty(this, 'resizeTo',
+        {
+            set: function set(dom)
+            {
+                window.removeEventListener('resize', this.resize);
+                this._resizeTo = dom;
+                if (dom)
+                {
+                    window.addEventListener('resize', this.resize);
+                    this.resize();
+                }
+            },
+            get: function get()
+            {
+                return this._resizeTo;
+            },
+        });
+
+    /**
+     * If `resizeTo` is set, calling this function
+     * will resize to the width and height of that element.
+     * @method PIXI.Application#resize
+     */
+    this.resize = function () {
+        if (this$1._resizeTo)
+        {
+            // Resize to the window
+            if (this$1._resizeTo === window)
+            {
+                this$1.renderer.resize(
+                    window.innerWidth,
+                    window.innerHeight
+                );
+            }
+            // Resize to other HTML entities
+            else
+            {
+                this$1.renderer.resize(
+                    this$1._resizeTo.clientWidth,
+                    this$1._resizeTo.clientHeight
+                );
+            }
+        }
+    };
+
+    // On resize
+    this._resizeTo = null;
+    this.resizeTo = options.resizeTo || null;
+};
+
+/**
+ * Clean up the ticker, scoped to application
+ * @static
+ * @private
+ */
+ResizePlugin.destroy = function destroy ()
+{
+    this.resizeTo = null;
+    this.resize = null;
+};
+
+Application.registerPlugin(ResizePlugin);
+
 exports.Application = Application;
 //# sourceMappingURL=app.js.map

package.json

 {
   "name": "@pixi/app",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.3",
   "main": "lib/app.js",
@@ -28,12 +28,11 @@ "module": "lib/app.es.js",
   "dependencies": {
-    "@pixi/core": "^5.0.0-alpha.2",
-    "@pixi/display": "^5.0.0-alpha.2",
-    "@pixi/settings": "^5.0.0-alpha.2",
-    "@pixi/ticker": "^5.0.0-alpha.2"
+    "@pixi/core": "^5.0.0-alpha.3",
+    "@pixi/display": "^5.0.0-alpha.3",
+    "@pixi/settings": "^5.0.0-alpha.3"
   },
   "devDependencies": {
-    "@pixi/canvas-renderer": "^5.0.0-alpha.2",
-    "@pixi/utils": "^5.0.0-alpha.2",
+    "@pixi/canvas-renderer": "^5.0.0-alpha.3",
+    "@pixi/utils": "^5.0.0-alpha.3",
     "floss": "^2.1.3"
   }
 }

README.md

@@ -12,3 +12,13 @@ # @pixi/app
 ```js
-import * as app from '@pixi/app';
-```
+import { Application } from '@pixi/app';
+
+const app = new Application();
+document.body.appendChild(app.view);
+```
+
+### Plugins
+
+PixiJS provides a few plugins to add features to the Application. These can be installed from the following packages. Use `Application.registerPlugin` to use these plugins. _Note: if you are using pixi.js or pixi.js-legacy bundles, this is unnecessary since plugins are installed automatically by default._
+
+* **LoaderPlugin** from `@pixi/loaders`
+* **TickerPlugin** from `@pixi/ticker`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41040

increased by41.89%

Dependency count

3

decreased by-25%

Lines of code

446

increased by32.74%

Number of lines in readme file

23

increased by76.92%

Dependency changes

• - Removed@pixi/ticker@^5.0.0-alpha.2

• Updated@pixi/core@^5.0.0-alpha.3

• Updated@pixi/display@^5.0.0-alpha.3

• Updated@pixi/settings@^5.0.0-alpha.3