.gitignore

@@ -77,9 +77,11 @@ 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);
-            Reflect.ownKeys(klass.prototype);
+            let classKeys = Reflect.ownKeys(klass.prototype);
             for (let key of interfaceKeys) {
-                this.prototype[key];
+                let interfaceDesc = this.prototype[key];
                 let classDesc = klass.prototype[key];
                 if (typeof classDesc == 'undefined') return 'Missing ' + key
             }
@@ -3148,7 +3148,8 @@
      */
     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;
@@ -3485,7 +3486,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) {
@@ -3506,8 +3507,6 @@
                 }
 
                 this.transform(delta, zoom, rotate, delta.about);
-                this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
-
                 if (zoom != 1) this.interactionAnchor = delta.about;
             }
         }
@@ -3575,7 +3574,7 @@
             // UO: since keepOnStage is called in nextVelocity we need to
             // ensure a return value
             if (!stagePolygon) return { x: 0, y: 0 }
-            this.polygon;
+            let polygon = this.polygon;
             let bounced = this.bouncing();
             if (bounced) {
                 let stage = this.containerBounds;
@@ -4016,7 +4015,8 @@
          * @param {DOM node} debugCanvas - Shows debug infos about touches if not null
          */
         constructor(
-            element, {
+            element,
+            {
                 stopEvents = 'auto',
                 claimEvents = true,
                 useCapture = true,
@@ -4180,7 +4180,8 @@
     class DOMScatter$1 extends AbstractScatter {
         constructor(
             element,
-            container, {
+            container,
+            {
                 startScale = 1.0,
                 minScale = 0.1,
                 maxScale = 1.0,
@@ -6257,7 +6258,7 @@
         /** Configuration object. Return default styles as CSS values.
          */
         defaultStyle() {
-            this.padding;
+            let padding = this.padding;
             let style = {
                 maxWidth: this.maxWidth + 'px',
                 zIndex: this.zIndex,
@@ -6536,7 +6537,7 @@
          * @memberof Popup
          */
         static targetCenter(event) {
-            event.target;
+            let target = event.target;
             let x = event.pageX;
             let y = event.pageY;
             let rect = Popup$1.targetRect(event);
@@ -7582,7 +7583,7 @@
         reorderArguments(params) {
             // first parameter
             //--------------------
-            params[0];
+            const element = params[0];
 
             // other parameter
             //--------------------
@@ -8252,7 +8253,7 @@
             let svg = 'http://www.w3.org/2000/svg';
             let xlink = 'http://www.w3.org/1999/xlink';
 
-            element.parentNode;
+            let svgGroup = element.parentNode;
 
             let src = image.getAttributeNS(xlink, 'href');
 
@@ -9079,7 +9080,7 @@
             let cx = target.getAttribute('cx');
             let cy = target.getAttribute('cy');
             let r = target.getAttribute('r');
-            r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
+            let radius = 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;
@@ -11302,4 +11303,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.resizeApp(event), 50);
+                const resizeDebounced = debounce(event => this.resize(event), 50);
                 window.addEventListener('resize', resizeDebounced);
                 document.body.addEventListener('orientationchange', this.checkOrientation.bind(this));
             }
@@ -4546,19 +4546,6 @@
          * @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();
@@ -4628,7 +4615,7 @@
          */
         expandRenderer(expand = 256) {
             let renderer = this.renderer;
-            this.renderer.resolution;
+            let resolution = this.renderer.resolution;
             let ww = this.width;
             let hh = this.height;
             let sw = this.screen.width;
@@ -5262,9 +5249,9 @@
 
         static implementationError(klass) {
             let interfaceKeys = Reflect.ownKeys(this.prototype);
-            Reflect.ownKeys(klass.prototype);
+            let classKeys = Reflect.ownKeys(klass.prototype);
             for (let key of interfaceKeys) {
-                this.prototype[key];
+                let interfaceDesc = this.prototype[key];
                 let classDesc = klass.prototype[key];
                 if (typeof classDesc == 'undefined') return 'Missing ' + key
             }
@@ -6711,7 +6698,8 @@
      */
     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;
@@ -7048,7 +7036,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) {
@@ -7069,8 +7057,6 @@
                 }
 
                 this.transform(delta, zoom, rotate, delta.about);
-                this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
-
                 if (zoom != 1) this.interactionAnchor = delta.about;
             }
         }
@@ -7138,7 +7124,7 @@
             // UO: since keepOnStage is called in nextVelocity we need to
             // ensure a return value
             if (!stagePolygon) return { x: 0, y: 0 }
-            this.polygon;
+            let polygon = this.polygon;
             let bounced = this.bouncing();
             if (bounced) {
                 let stage = this.containerBounds;
@@ -7564,7 +7550,8 @@
     class DOMScatter extends AbstractScatter {
         constructor(
             element,
-            container, {
+            container,
+            {
                 startScale = 1.0,
                 minScale = 0.1,
                 maxScale = 1.0,
@@ -9928,7 +9915,7 @@
         **/
         setupTiles(center = false) {
             // First load background tile
-            this.ensureAllTiles(this.currentLevel);
+            let tiles = this.ensureAllTiles(this.currentLevel);
             if (center) {
                 this.pivot.set(w / 2, h / 2);
             }
@@ -10165,7 +10152,7 @@
             let maxWidth = worldBounds.width;
             let maxHeight = worldBounds.height;
 
-            new PIXI.Point();
+            let pointInWindow = 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);
@@ -10355,7 +10342,7 @@
         untintTiles(level) {
             let key = level.toString();
             if (key in this.tileLayers) {
-                this.tileLayers[key];
+                let tiles = this.tileLayers[key];
             }
         }
 
@@ -10657,7 +10644,7 @@
         load(domNode) {
             return new Promise((resolve, reject) => {
                 let isImage = domNode instanceof HTMLImageElement;
-                this.scatter.displayObject instanceof PIXI.Sprite;
+                let isSprite = 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();
@@ -11932,7 +11919,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 });
-            this.displayObject.x;
+            let p = this.displayObject.x;
             let c = Points.arc(this.position, this.rotation + angle, dist);
             return c // Points.subtract(c, this.pivot)
         }
@@ -13799,8 +13786,11 @@
                     ? false
                     : this.scrollHeight > this.options.boxHeight;
             this.scrollbar.clear();
-            this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
+            let options = {};
-            this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
+            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);
             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;
@@ -19550,11 +19540,14 @@
         }
 
         _adaptCoordinates(map) {
+            let scale = 1;
 
             if (map instanceof DeepZoomMap) {
-                map.image.scale.x;
+                scale = map.image.scale.x;
             }
 
+            scale = scale / 4;
+
             return map.coordinatesToPoint(this.coordinates)
         }
 
@@ -21125,8 +21118,8 @@
                 if (myevent && myevent.submap) {
                     const submap = myevent.submap;
                     const center = submap.center;
-                    submap.container.width / 2;
+                    const radius = submap.container.width / 2;
-                    Points.distance(center, event.data.global) / submap.scatter.scale;
+                    const distance = Points.distance(center, event.data.global) / submap.scatter.scale;
                 }
             }
         }
@@ -22324,4 +22317,4 @@
     window.GeoJson = GeoJson;
     window.GeoUtils = GeoUtils;
 
-})();
+}());

iwmlib.code-workspace

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

lib/pixi/app-fullscreen.html

@@ -1,36 +0,0 @@
-<!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.resizeApp(event), 50)
+            const resizeDebounced = debounce(event => this.resize(event), 50)
             window.addEventListener('resize', resizeDebounced)
             document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
         }
@@ -312,19 +312,6 @@ 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.onLoad.add(this._onLoaded.bind(this))
+        this.loader.on('load', this._onLoaded.bind(this))
-        this.loader.onError.add(this._onError.bind(this))
+        this.loader.on('error', this._onError.bind(this))
         if (compression) {
             this.loader.use(PIXI.compressedTextures.ImageParser.use)
         }

lib/pixi/resolution.html

@@ -1,102 +0,0 @@
-<!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

@@ -1,133 +0,0 @@
-<!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

@@ -1,90 +0,0 @@
-<!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,7 +44,8 @@ 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
@@ -381,7 +382,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) {
@@ -402,8 +403,6 @@ 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
         }
     }
@@ -912,7 +911,8 @@ 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,7 +1076,8 @@ export class DOMScatterContainer {
 export class DOMScatter extends AbstractScatter {
     constructor(
         element,
-        container, {
+        container,
+        {
             startScale = 1.0,
             minScale = 0.1,
             maxScale = 1.0,

package.json

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