Removed header from test images.

.gitignore

@@ -77,11 +77,9 @@ typings/
 .fusebox/
 
 # own
-*.code-workspace
 .history/
 .vscode/
 
-
 # ignore generated contents-
 /doc/out/*
 **/thumbnails

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,
-            { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
+            target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
         ) {
             super('scatterTransformed', { target: target });
             this.translate = translate;
@@ -3210,7 +3209,7 @@
             this.velocity = null;
             this.timestamp = null;
             this.onThrowFinished = onThrowFinished;
-            //console.log("onThrowFinished", onThrowFinished)
+                //console.log("onThrowFinished", onThrowFinished)
         }
 
         observeVelocity() {
@@ -3288,7 +3287,7 @@
         animateThrow(time) {
             if (this.velocity != null) {
                 let dt = this._throwDeltaTime();
-                // console.log("animateThrow", dt)
+                    // console.log("animateThrow", dt)
                 let next = this.nextVelocity(this.velocity);
                 let prevLength = Points$1.length(this.velocity);
                 let nextLength = Points$1.length(next);
@@ -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;
             }
         }
@@ -3571,10 +3572,10 @@
 
         keepOnStage(velocity, collision = 0.5) {
             let stagePolygon = this.containerPolygon;
-            // UO: since keepOnStage is called in nextVelocity we need to
-            // ensure a return value
+                // 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;
@@ -3583,7 +3584,7 @@
                 let dx = this.movableX ? velocity.x : 0;
                 let dy = this.movableY ? velocity.y : 0;
                 let factor = this.throwDamping;
-                // if (recentered) {
+                    // if (recentered) {
                 if (x < 0) {
                     dx = -dx;
                     factor = collision;
@@ -3619,10 +3620,10 @@
                         onComplete: this.close.bind(this)
                     });
                 } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
-                    this.zoom(this.minScale + this.scaleCloseThreshold, {
-                        animate: 0.4
-                    });
-                }
+                this.zoom(this.minScale + this.scaleCloseThreshold, {
+                    animate: 0.4
+                });
+            }
         }
 
         rotateDegrees(degrees, anchor) {
@@ -3725,7 +3726,7 @@
             let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom);
             let extra = Points$1.subtract(newOrigin, origin);
             const anchorOffset = Points$1.subtract(anchor, origin);
-            // this._move(offset)
+                // this._move(offset)
             this.scale = newScale;
             this.rotation += rotate;
             let offset = Points$1.negate(anchorOffset);
@@ -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,
@@ -4378,10 +4377,10 @@
             let r = this.bounds;
             let w2 = r.width / 2;
             let h2 = r.height / 2;
-            //   if (this.resizable) {
-            //             w2 *= this.scale
-            //             h2 *= this.scale
-            //         }
+                //   if (this.resizable) {
+                //             w2 *= this.scale
+                //             h2 *= this.scale
+                //         }
             var x = r.left + w2;
             var y = r.top + h2;
             return { x, y }
@@ -4501,7 +4500,7 @@
             }
             this._x = x;
             this._y = y;
-            // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+                // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
             TweenLite.set(this.element, { x, y });
         }
 
@@ -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,
-            { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
+            target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
         ) {
             super('scatterTransformed', { target: target });
             this.translate = translate;
@@ -6760,7 +6772,7 @@
             this.velocity = null;
             this.timestamp = null;
             this.onThrowFinished = onThrowFinished;
-            //console.log("onThrowFinished", onThrowFinished)
+                //console.log("onThrowFinished", onThrowFinished)
         }
 
         observeVelocity() {
@@ -6838,7 +6850,7 @@
         animateThrow(time) {
             if (this.velocity != null) {
                 let dt = this._throwDeltaTime();
-                // console.log("animateThrow", dt)
+                    // console.log("animateThrow", dt)
                 let next = this.nextVelocity(this.velocity);
                 let prevLength = Points.length(this.velocity);
                 let nextLength = Points.length(next);
@@ -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;
             }
         }
@@ -7121,10 +7135,10 @@
 
         keepOnStage(velocity, collision = 0.5) {
             let stagePolygon = this.containerPolygon;
-            // UO: since keepOnStage is called in nextVelocity we need to
-            // ensure a return value
+                // 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;
@@ -7133,7 +7147,7 @@
                 let dx = this.movableX ? velocity.x : 0;
                 let dy = this.movableY ? velocity.y : 0;
                 let factor = this.throwDamping;
-                // if (recentered) {
+                    // if (recentered) {
                 if (x < 0) {
                     dx = -dx;
                     factor = collision;
@@ -7169,10 +7183,10 @@
                         onComplete: this.close.bind(this)
                     });
                 } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
-                    this.zoom(this.minScale + this.scaleCloseThreshold, {
-                        animate: 0.4
-                    });
-                }
+                this.zoom(this.minScale + this.scaleCloseThreshold, {
+                    animate: 0.4
+                });
+            }
         }
 
         rotateDegrees(degrees, anchor) {
@@ -7275,7 +7289,7 @@
             let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom);
             let extra = Points.subtract(newOrigin, origin);
             const anchorOffset = Points.subtract(anchor, origin);
-            // this._move(offset)
+                // this._move(offset)
             this.scale = newScale;
             this.rotation += rotate;
             let offset = Points.negate(anchorOffset);
@@ -7550,8 +7564,7 @@
     class DOMScatter extends AbstractScatter {
         constructor(
             element,
-            container,
-            {
+            container, {
                 startScale = 1.0,
                 minScale = 0.1,
                 maxScale = 1.0,
@@ -7748,10 +7761,10 @@
             let r = this.bounds;
             let w2 = r.width / 2;
             let h2 = r.height / 2;
-            //   if (this.resizable) {
-            //             w2 *= this.scale
-            //             h2 *= this.scale
-            //         }
+                //   if (this.resizable) {
+                //             w2 *= this.scale
+                //             h2 *= this.scale
+                //         }
             var x = r.left + w2;
             var y = r.top + h2;
             return { x, y }
@@ -7871,7 +7884,7 @@
             }
             this._x = x;
             this._y = y;
-            // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+                // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
             TweenLite.set(this.element, { x, y });
         }
 
@@ -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 = {};
-            options.left = 0;
-            options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
-            options.top = 0;
-            options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
+            this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
+            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;
-                    const distance = Points.distance(center, event.data.global) / submap.scatter.scale;
+                    submap.container.width / 2;
+                    Points.distance(center, event.data.global) / submap.scatter.scale;
                 }
             }
         }
@@ -22317,4 +22324,4 @@
     window.GeoJson = GeoJson;
     window.GeoUtils = GeoUtils;
 
-}());
+})();

iwmlib.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+    ],
+    "settings": {}
+}

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

lib/pixi/deepzoom/loader.js

@@ -85,8 +85,8 @@ export class PIXITileLoader extends TileLoader {
         super(tiles)
         this.destroyed = false
         this.loader = new PIXI.Loader()
-        this.loader.on('load', this._onLoaded.bind(this))
-        this.loader.on('error', this._onError.bind(this))
+        this.loader.onLoad.add(this._onLoaded.bind(this))
+        this.loader.onError.add(this._onError.bind(this))
         if (compression) {
             this.loader.use(PIXI.compressedTextures.ImageParser.use)
         }

lib/pixi/resolution.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <title>PIXI Resolution Doctest</title>
+
+        <script src="../../dist/iwmlib.3rdparty.js"></script>
+        <script src="../../dist/iwmlib.js"></script>
+        <script src="../../dist/iwmlib.pixi.js"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>
+
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="canvas"></canvas>
+
+        <script class="doctest">
+            const app = new PIXIApp({
+                view: canvas,
+                fpsLogging: true,
+                transparent: false
+            })
+
+            app.setup()
+            app.run()
+
+            const textProps = {fontSize: 72, fill: 0xffffff}
+
+            Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {
+
+                app.stage.removeChildren()
+
+                let sprite = null
+                let label = null
+
+                if (key === '1') {
+                    sprite = PIXI.Sprite.from('resolution/image-4k.jpg')
+                    label = `4096 * 2732 ~ 4K`
+                } else if (key === '2') {
+                    sprite = PIXI.Sprite.from('resolution/image-8k.jpg')
+                    label = `7952 * 5304 ~ 8K`
+                } else if (key === '3') {
+                    const texture = PIXI.Texture.from('resolution/video-1k.mp4')
+                    texture.baseTexture.resource.source.loop = true
+                    sprite = new PIXI.Sprite(texture)
+                    label = `1920 * 1080 = 1K`
+                } else if (key === '4') {
+                    const texture = PIXI.Texture.from('resolution/video-4k.mp4')
+                    texture.baseTexture.resource.source.loop = true
+                    sprite = new PIXI.Sprite(texture)
+                    label = `3840 * 2160 = 4K`
+                } else if (key === '5') {
+                    const texture = PIXI.Texture.from('resolution/video-8k.mp4')
+                    texture.baseTexture.resource.source.loop = true
+                    sprite = new PIXI.Sprite(texture)
+                    label = `7680 * 4320 ~ 8K`
+                }
+
+                app.stage.addChild(sprite)
+
+                // texts
+                //--------------------
+                const shortcuts = new PIXI.Text(`Press 1 - 5 to change Sprites`, textProps)
+                shortcuts.x = 100
+                shortcuts.y = 100
+
+                const width = new PIXI.Text(`Width: ${app.renderer.width}`, textProps)
+                width.x = 100
+                width.y = shortcuts.y + shortcuts.height * 2
+
+                const height = new PIXI.Text(`Height: ${app.renderer.height}`, textProps)
+                height.x = 100
+                height.y = width.y + width.height + 10
+
+                const resolution = new PIXI.Text(`Resolution: ${app.renderer.resolution}`, textProps)
+                resolution.x = 100
+                resolution.y = height.y + height.height + 10
+
+                const devicePixelRatio = new PIXI.Text(`devicePixelRatio: ${window.devicePixelRatio}`, textProps)
+                devicePixelRatio.x = 100
+                devicePixelRatio.y = resolution.y + resolution.height + 10
+
+                const text = new PIXI.Text(label, textProps)
+                text.x = 100
+                text.y = devicePixelRatio.y + devicePixelRatio.height * 2
+
+                app.stage.addChild(shortcuts, width, height, resolution, devicePixelRatio, text)
+            })
+
+            Mousetrap.trigger('1')
+        </script>
+    </body>
+</html>

lib/pixi/scatter-resolution-2.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <title>PIXI Scatter Resolution Doctest</title>
+
+        <script src="../../dist/iwmlib.3rdparty.js"></script>
+        <script src="../../dist/iwmlib.js"></script>
+        <script src="../../dist/iwmlib.pixi.js"></script>
+    </head>
+
+    <body>
+        <canvas id="canvas" />
+        <script>
+            const app = new PIXIApp({
+                view: canvas,
+                roundPixels: true,
+                resolution: 2
+            })
+                .setup()
+                .run()
+
+            app.loadSprites(
+                [
+                    '../examples/front__1_dpi75.png',
+                    '../examples/front__1_dpi150.png',
+                    '../examples/front__1_dpi300.png',
+                    '../examples/front__1_dpi600.png',
+                    '../examples/front__1_dpi1200.png'
+                ],
+                sprites => {
+                    app.scatterContainerFront = new ScatterContainer(app.renderer, { app })
+                    app.scatterContainerBack = new ScatterContainer(app.renderer, { app })
+
+                    app.scene.addChild(app.scatterContainerBack)
+                    app.scene.addChild(app.scatterContainerFront)
+
+                    let startScale = 0.5
+
+                    // sprite1
+                    //--------------------
+                    let sprite1 = sprites.get('../examples/front__1_dpi75.png')
+                    sprite1.interactive = true
+                    let scatter1 = new DisplayObjectScatter(sprite1, app.renderer, {
+                        x: 20,
+                        y: 20,
+                        startScale,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    app.scatterContainerBack.addChild(sprite1)
+
+                    // sprite2
+                    //--------------------
+                    let sprite2 = sprites.get('../examples/front__1_dpi150.png')
+                    sprite2.interactive = true
+                    let scatter2 = new DisplayObjectScatter(sprite2, app.renderer, {
+                        x: 320,
+                        y: 20,
+                        startScale: 0.5 * startScale,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    app.scatterContainerFront.addChild(sprite2)
+
+                    // sprite3
+                    //--------------------
+                    let sprite3 = sprites.get('../examples/front__1_dpi300.png')
+                    sprite3.interactive = true
+                    let scatter3 = new DisplayObjectScatter(sprite3, app.renderer, {
+                        x: 620,
+                        y: 20,
+                        startScale: 0.25 * startScale,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    app.scatterContainerBack.addChild(sprite3)
+
+                    // sprite4
+                    //--------------------
+                    let sprite4 = sprites.get('../examples/front__1_dpi600.png')
+                    sprite4.interactive = true
+                    let scatter4 = new DisplayObjectScatter(sprite4, app.renderer, {
+                        x: 920,
+                        y: 20,
+                        startScale: 0.125 * startScale,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    app.scatterContainerFront.addChild(sprite4)
+
+                    // sprite5
+                    //--------------------
+                    let sprite5 = sprites.get('../examples/front__1_dpi1200.png')
+                    sprite5.interactive = true
+                    let scatter5 = new DisplayObjectScatter(sprite5, app.renderer, {
+                        x: 1220,
+                        y: 20,
+                        startScale: 0.0625 * startScale,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    app.scatterContainerFront.addChild(sprite5)
+
+                    // renderTexture
+                    //--------------------
+                    sprites.forEach(value => {
+                        
+                        const matrix = new PIXI.Matrix()
+                        matrix.translate(-value.x, -value.y)
+
+                        const texture = PIXI.RenderTexture.create({ width: value.width, height: value.height, resolution: 2 })
+                        app.renderer.render(value, texture, true, matrix)
+
+                        const sprite = new PIXI.Sprite(texture)
+                        sprite.interactive = true
+
+                        new DisplayObjectScatter(sprite, app.renderer, {
+                            x: value.x,
+                            y: 400,
+                            minScale: 0.01,
+                            maxScale: 5.0
+                        })
+
+                        app.scatterContainerFront.addChild(sprite)
+                    })
+                },
+                { resolutionDependent: false }
+            )
+        </script>
+    </body>
+</html>

lib/pixi/scatter-resolution.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <title>PIXI Scatter Resolution Doctest</title>
+
+        <script src="../../dist/iwmlib.3rdparty.js"></script>
+        <script src="../../dist/iwmlib.js"></script>
+        <script src="../../dist/iwmlib.pixi.js"></script>
+    </head>
+
+    <body>
+        <canvas id="canvas2" class="interactive">Canvas not supported</canvas>
+        <script>
+            class ScatterApp extends PIXIApp {
+                setup() {
+                    super.setup()
+                    // Obey order in which ScatterContainer are created because the
+                    // InteractionMapper register event handlers in a first come first serve
+                    // order
+                    this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this })
+                    this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this })
+
+                    // Note that the addChild order is different because later children
+                    // are placed in front of earlier children.
+                    this.scene.addChild(this.scatterContainerBack)
+                    this.scene.addChild(this.scatterContainerFront)
+
+                    // Add the queen to ScatterContainer one
+                    let sprite1 = PIXI.Sprite.from('../examples/test-1280-720.png')
+                    sprite1.interactive = true
+                    let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
+                        x: 20,
+                        y: 40,
+                        startScale: 0.5,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    this.scatterContainerBack.addChild(sprite1)
+
+                    // Add the king to ScatterContainer two
+                    let sprite2 = PIXI.Sprite.from('../examples/test-1280-720.png')
+                    sprite2.interactive = true
+                    let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
+                        x: 280,
+                        y: 40,
+                        startScale: 1,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    this.scatterContainerFront.addChild(sprite2)
+
+                    // Add the queen to ScatterContainer one
+                    let sprite3 = PIXI.Sprite.from('../examples/test-800-450.png')
+                    sprite3.interactive = true
+                    let scatter3 = new DisplayObjectScatter(sprite3, this.renderer, {
+                        x: 140,
+                        y: 400,
+                        startScale: 0.5,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    this.scatterContainerBack.addChild(sprite3)
+
+                    // Add the king to ScatterContainer two
+                    let sprite4 = PIXI.Sprite.from('../examples/test-800-450.png')
+                    sprite4.interactive = true
+                    let scatter4 = new DisplayObjectScatter(sprite4, this.renderer, {
+                        x: 280,
+                        y: 400,
+                        startScale: 1,
+                        minScale: 0.01,
+                        maxScale: 5.0
+                    })
+                    this.scatterContainerFront.addChild(sprite4)
+                    return this
+                }
+            }
+
+            const scatterApp = new ScatterApp({
+                view: canvas2,
+                roundPixels: true,
+                antialias: true
+            })
+                .setup()
+                .run()
+        </script>
+    </body>
+</html>

lib/scatter.js

@@ -44,8 +44,7 @@ const END = 'onEnd'
  */
 export class ScatterEvent extends BaseEvent {
     constructor(
-        target,
-        { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
+        target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
     ) {
         super('scatterTransformed', { target: target })
         this.translate = translate
@@ -106,7 +105,7 @@ class Throwable {
         this.velocity = null
         this.timestamp = null
         this.onThrowFinished = onThrowFinished
-        //console.log("onThrowFinished", onThrowFinished)
+            //console.log("onThrowFinished", onThrowFinished)
     }
 
     observeVelocity() {
@@ -184,7 +183,7 @@ class Throwable {
     animateThrow(time) {
         if (this.velocity != null) {
             let dt = this._throwDeltaTime()
-            // console.log("animateThrow", dt)
+                // console.log("animateThrow", dt)
             let next = this.nextVelocity(this.velocity)
             let prevLength = Points.length(this.velocity)
             let nextLength = Points.length(next)
@@ -382,7 +381,7 @@ export class AbstractScatter extends Throwable {
         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) {
@@ -403,6 +402,8 @@ export class AbstractScatter extends Throwable {
             }
 
             this.transform(delta, zoom, rotate, delta.about)
+            this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+
             if (zoom != 1) this.interactionAnchor = delta.about
         }
     }
@@ -467,8 +468,8 @@ export class AbstractScatter extends Throwable {
 
     keepOnStage(velocity, collision = 0.5) {
         let stagePolygon = this.containerPolygon
-        // UO: since keepOnStage is called in nextVelocity we need to
-        // ensure a return value
+            // 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
         let bounced = this.bouncing()
@@ -479,7 +480,7 @@ export class AbstractScatter extends Throwable {
             let dx = this.movableX ? velocity.x : 0
             let dy = this.movableY ? velocity.y : 0
             let factor = this.throwDamping
-            // if (recentered) {
+                // if (recentered) {
             if (x < 0) {
                 dx = -dx
                 factor = collision
@@ -515,10 +516,10 @@ export class AbstractScatter extends Throwable {
                     onComplete: this.close.bind(this)
                 })
             } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
-                this.zoom(this.minScale + this.scaleCloseThreshold, {
-                    animate: 0.4
-                })
-            }
+            this.zoom(this.minScale + this.scaleCloseThreshold, {
+                animate: 0.4
+            })
+        }
     }
 
     rotateDegrees(degrees, anchor) {
@@ -621,7 +622,7 @@ export class AbstractScatter extends Throwable {
         let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
         let extra = Points.subtract(newOrigin, origin)
         const anchorOffset = Points.subtract(anchor, origin)
-        // this._move(offset)
+            // this._move(offset)
         this.scale = newScale
         this.rotation += rotate
         let offset = Points.negate(anchorOffset)
@@ -911,8 +912,7 @@ export class DOMScatterContainer {
      * @param {DOM node} debugCanvas - Shows debug infos about touches if not null
      */
     constructor(
-        element,
-        {
+        element, {
             stopEvents = 'auto',
             claimEvents = true,
             useCapture = true,
@@ -1076,8 +1076,7 @@ export class DOMScatterContainer {
 export class DOMScatter extends AbstractScatter {
     constructor(
         element,
-        container,
-        {
+        container, {
             startScale = 1.0,
             minScale = 0.1,
             maxScale = 1.0,
@@ -1274,10 +1273,10 @@ export class DOMScatter extends AbstractScatter {
         let r = this.bounds
         let w2 = r.width / 2
         let h2 = r.height / 2
-        //   if (this.resizable) {
-        //             w2 *= this.scale
-        //             h2 *= this.scale
-        //         }
+            //   if (this.resizable) {
+            //             w2 *= this.scale
+            //             h2 *= this.scale
+            //         }
         var x = r.left + w2
         var y = r.top + h2
         return { x, y }
@@ -1397,7 +1396,7 @@ export class DOMScatter extends AbstractScatter {
         }
         this._x = x
         this._y = y
-        // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+            // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
         TweenLite.set(this.element, { x, y })
     }
 
@@ -1504,4 +1503,4 @@ export class DOMScatter extends AbstractScatter {
     }
 }
 
-DOMScatter.zIndex = 1000
+DOMScatter.zIndex = 1000

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iwmlib",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "An Open Source library for multi-touch, WebGL powered applications.",
     "main": "index.js",
     "directories": {