react-unity-webgl - npm Package Compare versions

Comparing version 7.0.5 to 7.0.6

package.json

 {
   "name": "react-unity-webgl",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application, with two-way communication between your React and Unity application with advanced API's.",
@@ -5,0 +5,0 @@ "main": "source/index.js",

source/components/Unity.d.ts

@@ -31,2 +31,7 @@ import * as React from "react";
     /**
+     * The stored binding for the on window
+     * resize listener.
+     */
+    private onWindowResizeBinding;
+    /**
      * Initialized the component.
@@ -46,2 +51,14 @@ * @param {IUnityProps} props
     /**
+     * When the window is resized.
+     */
+    private onWindowResize;
+    /**
+     * Since the Unity canvas itself does not respond to the resizing
+     * of it's container we have to manually do this. A width and height
+     * of 100% does not seem to work, so we have to fetch it's parent's
+     * size to adject the canvas.
+     * @private
+     */
+    private adjustCanvasToContainer;
+    /**
      * Initialzied the Unity player when the component is mounted.
@@ -52,2 +69,8 @@ * @public
     /**
+     * Will remove event listeners and clean up systems when the
+     * component is about to unmount.
+     * @public
+     */
+    componentWillUnmount(): void;
+    /**
      * Renders the unity wrapper and player.
@@ -54,0 +77,0 @@ * @returns {React.ReactNode} element

source/components/Unity.js

@@ -31,2 +31,3 @@ "use strict";
         _this.unityLoaderService = new UnityLoaderService_1["default"]();
+        _this.onWindowResizeBinding = _this.onWindowResize.bind(_this);
         _this.unityContent = _this.props.unityContent;
@@ -50,2 +51,29 @@ _this.unityContent.setComponentInstance(_this);
     /**
+     * When the window is resized.
+     */
+    Unity.prototype.onWindowResize = function () {
+        if (this.unityContent.unityConfig.adjustOnWindowResize === true)
+            this.adjustCanvasToContainer();
+    };
+    /**
+     * Since the Unity canvas itself does not respond to the resizing
+     * of it's container we have to manually do this. A width and height
+     * of 100% does not seem to work, so we have to fetch it's parent's
+     * size to adject the canvas.
+     * @private
+     */
+    Unity.prototype.adjustCanvasToContainer = function () {
+        var _width = this.htmlElement.offsetWidth;
+        var _height = this.htmlElement.offsetHeight;
+        var _canvas = this.htmlElement.getElementsByTagName("canvas")[0];
+        if (_canvas !== null) {
+            if (_canvas.height !== _height) {
+                _canvas.height = _height;
+            }
+            if (_canvas.width !== _width) {
+                _canvas.width = _width;
+            }
+        }
+    };
+    /**
      * Initialzied the Unity player when the component is mounted.
@@ -56,2 +84,3 @@ * @public
         var _this = this;
+        window.addEventListener("resize", this.onWindowResizeBinding);
         // prettier-ignore
@@ -61,3 +90,5 @@ this.unityLoaderService.append(this.props.unityContent.unityLoaderJsPath, function () {
                 onProgress: _this.onProgress.bind(_this),
-                Module: _this.props.unityContent.unityConfig.modules
+                Module: _this.props.unityContent.unityConfig.modules,
+                width: "100%",
+                height: "100%"
             }));
@@ -67,2 +98,10 @@ });
     /**
+     * Will remove event listeners and clean up systems when the
+     * component is about to unmount.
+     * @public
+     */
+    Unity.prototype.componentWillUnmount = function () {
+        window.removeEventListener("resize", this.onWindowResizeBinding);
+    };
+    /**
      * Renders the unity wrapper and player.
@@ -69,0 +108,0 @@ * @returns {React.ReactNode} element

source/components/Unity.ts

@@ -38,2 +38,8 @@ import * as React from "react";
   /**
+   * The stored binding for the on window
+   * resize listener.
+   */
+  private onWindowResizeBinding: () => void;
+
+  /**
    * Initialized the component.
@@ -45,2 +51,3 @@ * @param {IUnityProps} props
     this.unityLoaderService = new UnityLoaderService();
+    this.onWindowResizeBinding = this.onWindowResize.bind(this);
     this.unityContent = this.props.unityContent;
@@ -64,2 +71,31 @@ this.unityContent.setComponentInstance(this);
   /**
+   * When the window is resized.
+   */
+  private onWindowResize(): void {
+    if (this.unityContent.unityConfig.adjustOnWindowResize === true)
+      this.adjustCanvasToContainer();
+  }
+
+  /**
+   * Since the Unity canvas itself does not respond to the resizing
+   * of it's container we have to manually do this. A width and height
+   * of 100% does not seem to work, so we have to fetch it's parent's
+   * size to adject the canvas.
+   * @private
+   */
+  private adjustCanvasToContainer(): void {
+    const _width = this.htmlElement!.offsetWidth;
+    const _height = this.htmlElement!.offsetHeight;
+    const _canvas = this.htmlElement!.getElementsByTagName("canvas")[0];
+    if (_canvas !== null) {
+      if (_canvas.height !== _height) {
+        _canvas.height = _height;
+      }
+      if (_canvas.width !== _width) {
+        _canvas.width = _width;
+      }
+    }
+  }
+
+  /**
    * Initialzied the Unity player when the component is mounted.
@@ -69,2 +105,3 @@ * @public
   public componentDidMount(): void {
+    window.addEventListener("resize", this.onWindowResizeBinding);
     // prettier-ignore
@@ -76,3 +113,5 @@ this.unityLoaderService.append(this.props.unityContent.unityLoaderJsPath, () => {
           onProgress: this.onProgress.bind(this),
-          Module: this.props.unityContent.unityConfig.modules
+          Module: this.props.unityContent.unityConfig.modules,
+          width: "100%",
+          height: "100%"
         }));
@@ -84,2 +123,11 @@ }
   /**
+   * Will remove event listeners and clean up systems when the
+   * component is about to unmount.
+   * @public
+   */
+  public componentWillUnmount(): void {
+    window.removeEventListener("resize", this.onWindowResizeBinding);
+  }
+
+  /**
    * Renders the unity wrapper and player.
@@ -86,0 +134,0 @@ * @returns {React.ReactNode} element

source/interfaces/IUnityConfig.d.ts

@@ -21,3 +21,11 @@ import { UnityVersion } from "../enums/UnityVersion";
     unityVersion?: UnityVersion;
+    /**
+     * Since the Unity canvas itself does not respond to the resizing
+     * of it's container we have to manually do this. A width and height
+     * of 100% does not seem to work, so we have to fetch it's parent's
+     * size to adject the canvas.
+     * @type {boolean}
+     */
+    adjustOnWindowResize?: boolean;
 }
 //# sourceMappingURL=IUnityConfig.d.ts.map

source/interfaces/IUnityConfig.ts

@@ -24,2 +24,11 @@ import { UnityVersion } from "../enums/UnityVersion";
   unityVersion?: UnityVersion;
+
+  /**
+   * Since the Unity canvas itself does not respond to the resizing
+   * of it's container we have to manually do this. A width and height
+   * of 100% does not seem to work, so we have to fetch it's parent's
+   * size to adject the canvas.
+   * @type {boolean}
+   */
+  adjustOnWindowResize?: boolean;
 }

source/UnityContent.js

@@ -21,2 +21,3 @@ "use strict";
             unityVersion: _unityConfig.unityVersion || UnityVersion_1.UnityVersion.UNITY_2018,
+            adjustOnWindowResize: _unityConfig.adjustOnWindowResize,
             id: _unityConfig.id || "nill"
@@ -23,0 +24,0 @@ };

source/UnityContent.ts

@@ -87,2 +87,3 @@ import IUnityConfig from "./interfaces/IUnityConfig";
       unityVersion: _unityConfig.unityVersion || UnityVersion.UNITY_2018,
+      adjustOnWindowResize: _unityConfig.adjustOnWindowResize,
       id: _unityConfig.id || "nill"
@@ -89,0 +90,0 @@ } as IUnityConfig;

No alert changes

Improved metrics

Total package byte prevSize

55290

increased by22.1%

Number of package files

35

increased by6.06%

Lines of code

1221

increased by29.21%

No dependency changes