Fixed resize fullscreen bug.

2022-04-29 10:28:59 +02:00
parent eff934e8b5
commit 7f068c5d94
5 changed files with 11524 additions and 98 deletions
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <title>PIXI Fullscreen Application Doctest</title>
+
+        <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
+        <link rel="stylesheet" href="../../css/doctest.css" />
+
+        <script src=".././3rdparty/highlight/highlight.pack.js"></script>
+        <script src="../../dist/iwmlib.3rdparty.js"></script>
+
+        <script src="../../dist/iwmlib.js"></script>
+        <script src="../../dist/iwmlib.pixi.js"></script>
+    </head>
+    <body style="margin: 0; padding: 0;">
+        <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
+        <script class="doctest">
+            const app = new PIXIApp({
+                view: canvas,
+                fpsLogging: true,
+                transparent: false
+            })
+
+            app.setup()
+            app.run()
+
+            let highlightBtn = new PIXI.Graphics()
+            highlightBtn.lineStyle(4, 0xff6900)
+            highlightBtn.drawRoundedRect(150, 40, 30, 30, 4)
+            highlightBtn.endFill()
+            app.stage.addChild(highlightBtn)
+        </script>
+    </body>
+</html>
@@ -137,7 +137,7 @@ export default class PIXIApp extends PIXI.Application {
        this.graphql = graphql
        if (fullScreen || autoResize) {
            console.log('App is in fullScreen mode or autoResize mode')
-            const resizeDebounced = debounce(event => this.resize(event), 50)
+            const resizeDebounced = debounce(event => this.resizeApp(event), 50)
            window.addEventListener('resize', resizeDebounced)
            document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
        }
@@ -312,6 +312,19 @@ export default class PIXIApp extends PIXI.Application {
     * @return {PIXIApp} - Returns the PIXIApp for chaining.
     */
    resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
+        return this.resizeApp(event, { width, height })
+    }
+
+    /**
+     * Resizes the renderer to fit into the window or given width and height.
+     *
+     * @param {object} [event] - The event.
+     * @param {object=} [opts={}] - The event.
+     * @param {number} [opts.width=window.innerWidth] - The width of the app to resize to.
+     * @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
+     * @return {PIXIApp} - Returns the PIXIApp for chaining.
+     */
+    resizeApp(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
        this.width = width
        this.height = height
        this.expandRenderer()