Fixed resize fullscreen bug.

dist/iwmlib.js

@@ -9,9 +9,9 @@
 
         static implementationError(klass) {
             let interfaceKeys = Reflect.ownKeys(this.prototype);
-            let classKeys = Reflect.ownKeys(klass.prototype);
+            Reflect.ownKeys(klass.prototype);
             for (let key of interfaceKeys) {
-                let interfaceDesc = this.prototype[key];
+                this.prototype[key];
                 let classDesc = klass.prototype[key];
                 if (typeof classDesc == 'undefined') return 'Missing ' + key
             }
@@ -3148,8 +3148,7 @@
      */
     class ScatterEvent extends BaseEvent {
         constructor(
-            target,
+            target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
-            { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
         ) {
             super('scatterTransformed', { target: target });
             this.translate = translate;
@@ -3486,7 +3485,7 @@
             let delta = interaction.delta();
 
             if (delta != null) {
-                this.addVelocity(delta);  // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+
                 let rotate = delta.rotate;
                 let zoom = delta.zoom;
                 if (this.maxRotation != null) {
@@ -3507,6 +3506,8 @@
                 }
 
                 this.transform(delta, zoom, rotate, delta.about);
+                this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+
                 if (zoom != 1) this.interactionAnchor = delta.about;
             }
         }
@@ -3574,7 +3575,7 @@
                 // UO: since keepOnStage is called in nextVelocity we need to
                 // ensure a return value
             if (!stagePolygon) return { x: 0, y: 0 }
-            let polygon = this.polygon;
+            this.polygon;
             let bounced = this.bouncing();
             if (bounced) {
                 let stage = this.containerBounds;
@@ -4015,8 +4016,7 @@
          * @param {DOM node} debugCanvas - Shows debug infos about touches if not null
          */
         constructor(
-            element,
+            element, {
-            {
                 stopEvents = 'auto',
                 claimEvents = true,
                 useCapture = true,
@@ -4180,8 +4180,7 @@
     class DOMScatter$1 extends AbstractScatter {
         constructor(
             element,
-            container,
+            container, {
-            {
                 startScale = 1.0,
                 minScale = 0.1,
                 maxScale = 1.0,
@@ -6258,7 +6257,7 @@
         /** Configuration object. Return default styles as CSS values.
          */
         defaultStyle() {
-            let padding = this.padding;
+            this.padding;
             let style = {
                 maxWidth: this.maxWidth + 'px',
                 zIndex: this.zIndex,
@@ -6537,7 +6536,7 @@
          * @memberof Popup
          */
         static targetCenter(event) {
-            let target = event.target;
+            event.target;
             let x = event.pageX;
             let y = event.pageY;
             let rect = Popup$1.targetRect(event);
@@ -7583,7 +7582,7 @@
         reorderArguments(params) {
             // first parameter
             //--------------------
-            const element = params[0];
+            params[0];
 
             // other parameter
             //--------------------
@@ -8253,7 +8252,7 @@
             let svg = 'http://www.w3.org/2000/svg';
             let xlink = 'http://www.w3.org/1999/xlink';
 
-            let svgGroup = element.parentNode;
+            element.parentNode;
 
             let src = image.getAttributeNS(xlink, 'href');
 
@@ -9080,7 +9079,7 @@
             let cx = target.getAttribute('cx');
             let cy = target.getAttribute('cy');
             let r = target.getAttribute('r');
-            let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
+            r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
 
             let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx;
             let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx;
@@ -11303,4 +11302,4 @@
     window.Highlight = Highlight;
     window.Theme = Theme;
 
-}());
+})();

dist/iwmlib.pixi.js

@@ -4371,7 +4371,7 @@
             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));
             }
@@ -4546,6 +4546,19 @@
          * @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();
@@ -4615,7 +4628,7 @@
          */
         expandRenderer(expand = 256) {
             let renderer = this.renderer;
-            let resolution = this.renderer.resolution;
+            this.renderer.resolution;
             let ww = this.width;
             let hh = this.height;
             let sw = this.screen.width;
@@ -5249,9 +5262,9 @@
 
         static implementationError(klass) {
             let interfaceKeys = Reflect.ownKeys(this.prototype);
-            let classKeys = Reflect.ownKeys(klass.prototype);
+            Reflect.ownKeys(klass.prototype);
             for (let key of interfaceKeys) {
-                let interfaceDesc = this.prototype[key];
+                this.prototype[key];
                 let classDesc = klass.prototype[key];
                 if (typeof classDesc == 'undefined') return 'Missing ' + key
             }
@@ -6698,8 +6711,7 @@
      */
     class ScatterEvent extends BaseEvent {
         constructor(
-            target,
+            target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
-            { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
         ) {
             super('scatterTransformed', { target: target });
             this.translate = translate;
@@ -7036,7 +7048,7 @@
             let delta = interaction.delta();
 
             if (delta != null) {
-                this.addVelocity(delta);  // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+
                 let rotate = delta.rotate;
                 let zoom = delta.zoom;
                 if (this.maxRotation != null) {
@@ -7057,6 +7069,8 @@
                 }
 
                 this.transform(delta, zoom, rotate, delta.about);
+                this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+
                 if (zoom != 1) this.interactionAnchor = delta.about;
             }
         }
@@ -7124,7 +7138,7 @@
                 // UO: since keepOnStage is called in nextVelocity we need to
                 // ensure a return value
             if (!stagePolygon) return { x: 0, y: 0 }
-            let polygon = this.polygon;
+            this.polygon;
             let bounced = this.bouncing();
             if (bounced) {
                 let stage = this.containerBounds;
@@ -7550,8 +7564,7 @@
     class DOMScatter extends AbstractScatter {
         constructor(
             element,
-            container,
+            container, {
-            {
                 startScale = 1.0,
                 minScale = 0.1,
                 maxScale = 1.0,
@@ -9915,7 +9928,7 @@
         **/
         setupTiles(center = false) {
             // First load background tile
-            let tiles = this.ensureAllTiles(this.currentLevel);
+            this.ensureAllTiles(this.currentLevel);
             if (center) {
                 this.pivot.set(w / 2, h / 2);
             }
@@ -10152,7 +10165,7 @@
             let maxWidth = worldBounds.width;
             let maxHeight = worldBounds.height;
 
-            let pointInWindow = new PIXI.Point();
+            new PIXI.Point();
             let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y);
             let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight);
             let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2);
@@ -10342,7 +10355,7 @@
         untintTiles(level) {
             let key = level.toString();
             if (key in this.tileLayers) {
-                let tiles = this.tileLayers[key];
+                this.tileLayers[key];
             }
         }
 
@@ -10644,7 +10657,7 @@
         load(domNode) {
             return new Promise((resolve, reject) => {
                 let isImage = domNode instanceof HTMLImageElement;
-                let isSprite = this.scatter.displayObject instanceof PIXI.Sprite;
+                this.scatter.displayObject instanceof PIXI.Sprite;
                 let image = isImage ? domNode : document.createElement('img');
                 let [x, y, w, h, cloneURL] = this.cloneScatterImage();
                 let [ww, hh] = this.unscaledSize();
@@ -11919,7 +11932,7 @@
             let h2 = this.height / 2;
             let dist = Math.sqrt(w2 * w2 + h2 * h2);
             let angle = Points.angle({ x: w2, y: h2 }, { x: 0, y: 0 });
-            let p = this.displayObject.x;
+            this.displayObject.x;
             let c = Points.arc(this.position, this.rotation + angle, dist);
             return c // Points.subtract(c, this.pivot)
         }
@@ -13786,11 +13799,8 @@
                     ? false
                     : this.scrollHeight > this.options.boxHeight;
             this.scrollbar.clear();
-            let options = {};
+            this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
-            options.left = 0;
+            this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
-            options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
-            options.top = 0;
-            options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
             const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
             const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
             this.scrollbarTop = (this.content.top / height) * this.boxHeight;
@@ -19540,14 +19550,11 @@
         }
 
         _adaptCoordinates(map) {
-            let scale = 1;
 
             if (map instanceof DeepZoomMap) {
-                scale = map.image.scale.x;
+                map.image.scale.x;
             }
 
-            scale = scale / 4;
-
             return map.coordinatesToPoint(this.coordinates)
         }
 
@@ -21118,8 +21125,8 @@
                 if (myevent && myevent.submap) {
                     const submap = myevent.submap;
                     const center = submap.center;
-                    const radius = submap.container.width / 2;
+                    submap.container.width / 2;
-                    const distance = Points.distance(center, event.data.global) / submap.scatter.scale;
+                    Points.distance(center, event.data.global) / submap.scatter.scale;
                 }
             }
         }
@@ -22317,4 +22324,4 @@
     window.GeoJson = GeoJson;
     window.GeoUtils = GeoUtils;
 
-}());
+})();

lib/pixi/app-fullscreen.html

@@ -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>

lib/pixi/app.js

@@ -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()