Initial commit 2.0 beta 0

.eslintrc.json

@@ -28,5 +28,8 @@
     "plugins": [
         "prettier"
     ],
-    "extends": ["eslint:recommended", "plugin:prettier/recommended"]
+    "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+    "rules": {
+        "comma-dangle": ["error", "never"]
+    }
 }

.prettierrc

@@ -3,5 +3,6 @@
     "jsxSingleQuote": true,
     "tabWidth": 4,
     "semi": false,
-    "printWidth": 120
+    "printWidth": 120,
+    "trailingComma": "none"
 }

dist/iwmlib.3rdparty.preload.js

@@ -8119,10 +8119,10 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
   css transforms without perspective projection)
 */
 
-(function () {
+;(function () {
     'use strict'
 
-    var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
+    var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
 
     function Point(x, y, z) {
         this.x = x
@@ -8137,8 +8137,8 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
 
     function createMatrix(transform) {
         try {
-            return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
-        } catch(e) {
+            return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
+        } catch (e) {
             console.warn(transform)
             console.warn(e.toString())
             return I
@@ -8163,8 +8163,9 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
         var left = +Infinity
         var top = +Infinity
         while (--i >= 0) {
-            var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
-                        0).transformBy(transformationMatrix)
+            var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
+                transformationMatrix
+            )
             if (p.x < left) {
                 left = p.x
             }
@@ -8173,20 +8174,19 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
             }
         }
         var rect = element.getBoundingClientRect()
-        transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
-                                        window.pageYOffset + rect.top - top, 0)
-                            .multiply(transformationMatrix)
+        transformationMatrix = I.translate(
+            window.pageXOffset + rect.left - left,
+            window.pageYOffset + rect.top - top,
+            0
+        ).multiply(transformationMatrix)
         return transformationMatrix
     }
 
     window.convertPointFromPageToNode = function (element, pageX, pageY) {
-        return new Point(pageX, pageY, 0).transformBy(
-                                    getTransformationMatrix(element).inverse())
+        return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
     }
 
     window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
-        return new Point(offsetX, offsetY, 0).transformBy(
-                                    getTransformationMatrix(element))
+        return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
     }
-
-}());
+})()

gulpfile.js

@@ -11,12 +11,12 @@ function vendors() {
             './node_modules/optimal-select/dist/optimal-select.js',
             './node_modules/hammerjs/hammer.js',
             './node_modules/propagating-hammerjs/propagating.js',
-            './node_modules/pixi.js/dist/pixi.js',
+            './node_modules/pixi.js/dist/browser/pixi.js',
             './node_modules/pixi-compressed-textures/lib/crn_decomp.js',
             './node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
             './node_modules/pixi-filters/dist/pixi-filters.js',
             './node_modules/pixi-particles/dist/pixi-particles.js',
-            './node_modules/pixi-projection/dist/pixi-projection.js',
+            './node_modules/pixi-projection/dist/pixi-projection.umd.js',
             './node_modules/gsap/src/uncompressed/TweenMax.js',
             './node_modules/gsap/src/uncompressed/TimelineMax.js',
             './lib/3rdparty/jquery.js',

lib/3rdparty/convertPointFromPageToNode.js

@@ -10,10 +10,10 @@
   css transforms without perspective projection)
 */
 
-(function () {
+;(function () {
     'use strict'
 
-    var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
+    var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
 
     function Point(x, y, z) {
         this.x = x
@@ -28,8 +28,8 @@
 
     function createMatrix(transform) {
         try {
-            return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
-        } catch(e) {
+            return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
+        } catch (e) {
             console.warn(transform)
             console.warn(e.toString())
             return I
@@ -54,8 +54,9 @@
         var left = +Infinity
         var top = +Infinity
         while (--i >= 0) {
-            var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
-                        0).transformBy(transformationMatrix)
+            var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
+                transformationMatrix
+            )
             if (p.x < left) {
                 left = p.x
             }
@@ -64,20 +65,19 @@
             }
         }
         var rect = element.getBoundingClientRect()
-        transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
-                                        window.pageYOffset + rect.top - top, 0)
-                            .multiply(transformationMatrix)
+        transformationMatrix = I.translate(
+            window.pageXOffset + rect.left - left,
+            window.pageYOffset + rect.top - top,
+            0
+        ).multiply(transformationMatrix)
         return transformationMatrix
     }
 
     window.convertPointFromPageToNode = function (element, pageX, pageY) {
-        return new Point(pageX, pageY, 0).transformBy(
-                                    getTransformationMatrix(element).inverse())
+        return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
     }
 
     window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
-        return new Point(offsetX, offsetY, 0).transformBy(
-                                    getTransformationMatrix(element))
+        return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
     }
-
-}());
+})()

lib/bootstrap.js

@@ -122,17 +122,17 @@ class Bootstrap extends Object {
             baseURL: baseUrl,
             map: {
                 'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
-                'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
+                'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js',
             },
             transpiler: 'plugin-babel',
             meta: {
                 '*.js': {
                     authorization: true,
                     babelOptions: {
-                        es2015: false
-                    }
-                }
-            }
+                        es2015: false,
+                    },
+                },
+            },
         }
     }
 

lib/bundle.js

@@ -22,7 +22,7 @@ import {
     InteractionDelta,
     InteractionMapper,
     InteractionDelegate,
-    IInteractionMapperTarget
+    IInteractionMapperTarget,
 } from './interaction.js'
 import {
     ITapDelegate,
@@ -31,7 +31,7 @@ import {
     AbstractScatter,
     DOMScatter,
     ScatterEvent,
-    BaseEvent
+    BaseEvent,
 } from './scatter.js'
 import {
     Cycle,
@@ -50,7 +50,7 @@ import {
     debounce,
     randomInt,
     randomFloat,
-    LowPassFilter
+    LowPassFilter,
 } from './utils.js'
 import UITest from './uitest.js'
 

lib/card/card.js

@@ -55,7 +55,7 @@ export default class Card {
         context.classList.add('info-card')
         context.setAttribute('data-id', Card.id++)
 
-        modules.forEach(module => {
+        modules.forEach((module) => {
             if (module.apply(context)) {
                 const moduleName = module.constructor.name
                 context.modules.push(moduleName)
@@ -157,7 +157,7 @@ export default class Card {
      */
     static _replaceAttributes(context, html, attribute, replaceFunc) {
         let attributeCarrier = html.querySelectorAll(`[${attribute}]`)
-        attributeCarrier.forEach(element => {
+        attributeCarrier.forEach((element) => {
             let attributeVal = element.getAttribute(attribute)
             element.removeAttribute(attribute)
             replaceFunc.call(this, context, element, attributeVal)
@@ -176,7 +176,7 @@ export default class Card {
      */
     static _replaceCallback(context, element, attributeVal) {
         if (element.tagName == 'A') {
-            element.addEventListener('pointerdown', event => {
+            element.addEventListener('pointerdown', (event) => {
                 event.preventDefault()
             })
         }
@@ -189,7 +189,7 @@ export default class Card {
         trimmedArgs = trimmedArgs.substring(0, trimmedArgs.length - 1)
 
         let callParts = funcPart.split('.')
-        let argsStrings = trimmedArgs.split(',').filter(entry => {
+        let argsStrings = trimmedArgs.split(',').filter((entry) => {
             return entry.trim() != ''
         })
         /**
@@ -218,12 +218,12 @@ export default class Card {
         // These are 'hardcoded' inside the convert.js.
         if (element.tagName == 'circle') return false
 
-        this.registerEvent(context, interactionType, element, event => {
+        this.registerEvent(context, interactionType, element, (event) => {
             /**
              * Replaces the strings from the listener with the corresponding variables.
              */
             let args = []
-            argsStrings.forEach(arg => {
+            argsStrings.forEach((arg) => {
                 arg = arg.trim()
                 if (arg == 'this') args.push(event.target)
                 else if (arg == 'event') args.push(event)
@@ -269,7 +269,7 @@ export default class Card {
         */
         return html.replace(
             /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
-            function() {
+            function () {
                 let path = that._getRelativePath(arguments[4])
                 const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
                 /* if (that.debug) */ console.log('Adjusted: ', tag)
@@ -298,7 +298,7 @@ export default class Card {
         return new Promise((resolve, reject) => {
             let request = new XMLHttpRequest()
 
-            request.onreadystatechange = function() {
+            request.onreadystatechange = function () {
                 if (this.readyState == 4) {
                     if (this.status == 200 || Card._isLocal()) {
                         try {
@@ -423,7 +423,7 @@ export default class Card {
         }
 
         this._createPopup(context, position, content, options)
-            .then(popup => {
+            .then((popup) => {
                 if (
                     //Test if meanwhile another popup was registered...
                     this._getPopup(context) ||
@@ -441,9 +441,9 @@ export default class Card {
                     // let unnecessaryPopupElement = popup.element.querySelector(".popupContent > .popup")
                     // unnecessaryPopupElement.classList.remove("popup")
 
-                    popupParagraphs.forEach(popupParagraph => {
+                    popupParagraphs.forEach((popupParagraph) => {
                         popupParagraph.setAttribute('draggable', false)
-                        popupParagraph.addEventListener('mousedown', event => {
+                        popupParagraph.addEventListener('mousedown', (event) => {
                             event.preventDefault()
                         })
                     })
@@ -451,7 +451,7 @@ export default class Card {
                     this._setPopup(context, popup, src)
                 }
             })
-            .catch(e => console.error(e))
+            .catch((e) => console.error(e))
     }
 
     /**
@@ -491,14 +491,14 @@ export default class Card {
             Object.assign(
                 {
                     parent: context,
-                    content
+                    content,
                 },
                 Object.assign(
                     {
                         noStyle: true,
                         // TODO:    Remove offset when positioning according to element position
                         //          is working.
-                        posOffset: 10
+                        posOffset: 10,
                     },
                     options
                 )
@@ -510,7 +510,7 @@ export default class Card {
         // We manually prevent this here.
         popup.element.style.display = 'none'
 
-        let promise = new Promise(resolve => {
+        let promise = new Promise((resolve) => {
             if (popup.loaded) resolve(popup)
             else {
                 popup.onload = () => {
@@ -519,7 +519,7 @@ export default class Card {
             }
         })
 
-        promise.then(popup => {
+        promise.then((popup) => {
             popup.element.style.display = 'block'
             popup.element.style.visibility = 'hidden'
             popup.element.style.opacity = 0
@@ -531,12 +531,12 @@ export default class Card {
             })
 
             Object.assign(popup.element.style, {
-                zIndex: this.zIndices.popup
+                zIndex: this.zIndices.popup,
             })
 
             TweenLite.to(popup.element, this.animation.popup, {
                 autoAlpha: 1,
-                ease: Power2.easeIn
+                ease: Power2.easeIn,
             })
         })
 
@@ -560,7 +560,7 @@ export default class Card {
                     popup.remove()
                     //this._cleanup(context)
                     //overlay.parentNode.removeChild(overlay)
-                }
+                },
             })
         }
     }
@@ -618,7 +618,7 @@ export default class Card {
                 let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
 
                 //Fix the relative path of loaded images in the popup.
-                popupPage.querySelectorAll('img').forEach(node => {
+                popupPage.querySelectorAll('img').forEach((node) => {
                     node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
                 })
                 let html = popupPage.body.innerHTML
@@ -648,7 +648,7 @@ export default class Card {
                         if (editable) {
                             let isDirty = mainController.askSaveNode()
                             if (isDirty)
-                                mainController.saveNode(html.innerHTML, url => {
+                                mainController.saveNode(html.innerHTML, (url) => {
                                     if (callback) {
                                         callback()
                                     }
@@ -670,12 +670,12 @@ export default class Card {
                     }
 
                     Card._openPopup(context, src, local, content, {
-                        closeCommand: callback
+                        closeCommand: callback,
                     })
                 }
             }
 
-            overlay.onclick = e => {
+            overlay.onclick = (e) => {
                 if (editable) e.preventDefault()
             }
             //console.log("onreadystatechange", editable)
@@ -712,7 +712,7 @@ export default class Card {
                 for (let highlight of correspondingHighlights) {
                     if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
                         Highlight.openHighlight(highlight, {
-                            animation: Card.highlightAnimation
+                            animation: Card.highlightAnimation,
                         })
                         this._addHighlight(context, highlight)
                     }
@@ -841,19 +841,19 @@ export default class Card {
                     // TODO: Adjust to load while animating (Problem: Unload when cancelled).
                     // console.log('loadHighlightPopup', src, position, local)
                     this._loadPopupContent(context, src)
-                        .then(content => {
+                        .then((content) => {
                             this._openPopup(context, src, local, content, {
                                 highlight: node,
-                                closeCommand: popup => {
+                                closeCommand: (popup) => {
                                     this._overlayCleanup(context, overlay)
                                     popup.remove()
-                                }
+                                },
                             })
                         })
-                        .catch(err => {
+                        .catch((err) => {
                             console.error(err)
                         })
-                }
+                },
             })
         }
     }
@@ -937,7 +937,7 @@ export default class Card {
 
         let globalBottomRight = {
             x: imageWidth,
-            y: imageHeight
+            y: imageHeight,
         }
 
         globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
@@ -1003,7 +1003,7 @@ export default class Card {
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                zIndex: 200
+                zIndex: 200,
             })
 
             wrapper.appendChild(zoomContainer)
@@ -1071,13 +1071,13 @@ export default class Card {
                 y: current.y,
                 width: current.width + borderX,
                 height: current.height + borderY,
-                transformOrigin
+                transformOrigin,
             })
             TweenLite.set(zoomable, { opacity: 0 })
 
             let icon = zoomedFig.querySelector('.icon')
             TweenLite.set(icon, {
-                transformOrigin
+                transformOrigin,
             })
             zoomedFig.style.transformOrigin =
                 'calc(100% - ' +
@@ -1097,8 +1097,8 @@ export default class Card {
                     ease: Power2.easeIn,
                     css: {
                         scaleX: scaleFactor,
-                        scaleY: scaleFactor
-                    }
+                        scaleY: scaleFactor,
+                    },
                 },
                 0
             )
@@ -1107,11 +1107,11 @@ export default class Card {
                         display: 'block',
                         opacity: 0,
                         x: -parseFloat(zoomedFigStyle.borderLeftWidth),
-                        width: current.width + borderX
-                    }
+                        width: current.width + borderX,
+                    },
                 })
                 .to(zoomCaption, this.animation.fade, {
-                    autoAlpha: 1
+                    autoAlpha: 1,
                 })
         } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
     }
@@ -1160,7 +1160,7 @@ export default class Card {
             x: current.x,
             y: current.y,
             width: current.width,
-            height: current.height
+            height: current.height,
         })
         let editor = mainController.topController().ensureEditor(img)
         let savedDisplay = zoomIcon.style.display
@@ -1187,13 +1187,13 @@ export default class Card {
         wrapper.appendChild(iconClone)
         TweenLite.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y })
 
-        zoomable.onmousedown = event => {
+        zoomable.onmousedown = (event) => {
             if (this.debug) console.log('mousedown', event.target)
             event.preventDefault()
             zoomable.dragging = true
             zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
         }
-        zoomable.onmousemove = event => {
+        zoomable.onmousemove = (event) => {
             if (this.debug) console.log('onmousemove', event.target)
             if (zoomable.dragging) {
                 event.preventDefault()
@@ -1201,7 +1201,7 @@ export default class Card {
                 let dy = event.pageY - zoomable.dragStartPos.y
                 TweenLite.set([zoomable, iconClone], {
                     x: '+=' + dx,
-                    y: '+=' + dy
+                    y: '+=' + dy,
                 })
                 zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
                 if (editor) {
@@ -1214,7 +1214,7 @@ export default class Card {
         }
 
         let startZoom = 1
-        zoomable.onmousewheel = event => {
+        zoomable.onmousewheel = (event) => {
             event.preventDefault()
             let direction = event.detail < 0 || event.wheelDelta > 0
             const zoomFactor = 1.1
@@ -1250,24 +1250,24 @@ export default class Card {
             let zoomedCaption = zoomedFig.querySelector('figcaption.zoomcap')
 
             TweenLite.to(zoomedCaption, this.animation.fade, {
-                autoAlpha: 0
+                autoAlpha: 0,
             })
 
             TweenLite.to(zoomedFig, this.animation.zoomable, {
                 css: {
                     scaleX: 1,
-                    scaleY: 1
+                    scaleY: 1,
                 },
                 onComplete: () => {
                     TweenLite.set(zoomable, {
-                        opacity: 1
+                        opacity: 1,
                     })
 
                     let div = zoomedFig.parentNode
                     let videoElement = div.querySelector('video')
                     if (videoElement) videoElement.pause()
                     div.parentNode.removeChild(div)
-                }
+                },
             })
 
             InteractionMapper.off(zoomedFig)
@@ -1341,12 +1341,12 @@ export default class Card {
                 height: globalIndexCardRect.height,
                 maxWidth: '100%',
                 margin: 0,
-                zIndex: this.zIndices.article
-            }
+                zIndex: this.zIndices.article,
+            },
         })
 
         TweenLite.set(articleClone, {
-            autoAlpha: 0
+            autoAlpha: 0,
         })
 
         TweenLite.set(card, { css: { maxWidth: '100%' } })
@@ -1356,7 +1356,7 @@ export default class Card {
             scaleX,
             scaleY,
             transformOrigin: '0% 0%',
-            rotation: angle
+            rotation: angle,
         })
         indexbox.prepend(clone)
         clone.setAttribute('data-source', src)
@@ -1365,7 +1365,7 @@ export default class Card {
         let title = titlebar.querySelector('h2')
         let titlebarStyle = window.getComputedStyle(titlebar)
         let start = {
-            height: parseInt(titlebarStyle.height)
+            height: parseInt(titlebarStyle.height),
         }
 
         if (this.dynamicHeight) {
@@ -1385,10 +1385,7 @@ export default class Card {
 
         //jquery hyphenate below
         if (this._isJQueryPresent()) {
-            $('.column')
-                .not('.overview')
-                .children('p')
-                .hyphenate('de')
+            $('.column').not('.overview').children('p').hyphenate('de')
         }
 
         //logging
@@ -1414,23 +1411,23 @@ export default class Card {
                 card.classList.add('visited')
             },
             onUpdateParams: ['{self}'],
-            onUpdate: self => {
+            onUpdate: (self) => {
                 let transform = self.target._gsTransform
                 TweenLite.set(title, {
-                    scale: 1 / transform.scaleX
+                    scale: 1 / transform.scaleX,
                 })
                 TweenLite.set(titlebar, {
-                    height: (start.height * 1) / transform.scaleY
+                    height: (start.height * 1) / transform.scaleY,
                 })
 
                 // Retain the border at same visual thickness.
                 titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
-            }
+            },
         })
 
         TweenLite.to([articleClone], this.animation.articleTransition / 2, {
             delay: this.animation.articleTransition / 2,
-            autoAlpha: 1
+            autoAlpha: 1,
         })
 
         if (editable) {
@@ -1479,11 +1476,11 @@ export default class Card {
             if (editable) {
                 let isDirty = mainController.askSaveNode()
                 if (isDirty) {
-                    mainController.saveNode(html.innerHTML, url => {
+                    mainController.saveNode(html.innerHTML, (url) => {
                         callback(url)
                         this._closeIndexCard(context, card, clone, articleClone, {
                             eventElements,
-                            src
+                            src,
                         })
                     })
                 } else {
@@ -1522,7 +1519,7 @@ export default class Card {
 
         let scale = {
             x: globalPreviewRect.width / globalIndexCardRect.width,
-            y: globalPreviewRect.height / globalIndexCardRect.height
+            y: globalPreviewRect.height / globalIndexCardRect.height,
         }
 
         let titlebar = clonedSubcard.querySelector('.titlebar')
@@ -1551,16 +1548,16 @@ export default class Card {
         let titlebarStyle = window.getComputedStyle(previewTitlebar)
 
         TweenLite.to(titlebar, this.animation.articleTransition, {
-            height: parseInt(titlebarStyle.height)
+            height: parseInt(titlebarStyle.height),
         })
 
         TweenLite.to(clonedArticle, this.animation.articleTransition / 2, {
-            autoAlpha: 0
+            autoAlpha: 0,
         })
 
         let title = titlebar.querySelector('h2')
         let original = {
-            height: parseInt(titlebarStyle.height)
+            height: parseInt(titlebarStyle.height),
         }
 
         if (this.dynamicHeight) {
@@ -1589,24 +1586,24 @@ export default class Card {
                             mainController.popController()
                         }
                         clonedSubcard.remove()
-                    }
+                    },
                 })
             },
             onUpdateParams: ['{self}'],
-            onUpdate: function(self) {
+            onUpdate: function (self) {
                 let transform = self.target._gsTransform
 
                 TweenLite.set(title, {
-                    scale: 1 / transform.scaleX
+                    scale: 1 / transform.scaleX,
                 })
 
                 TweenLite.set(titlebar, {
-                    height: (original.height * 1) / transform.scaleY
+                    height: (original.height * 1) / transform.scaleY,
                 })
 
                 // Retain the border at same visual thickness.
                 titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
-            }
+            },
         })
     }
 
@@ -1653,7 +1650,7 @@ export default class Card {
          *   Called by the expandIndexCard(...)
          */
         let target = event.target
-        const saveCallback = url => {
+        const saveCallback = (url) => {
             let handler = `Card.openIndexCard(event, '${url}')`
             if (this.debug) console.log('File has changed', target, handler)
 
@@ -1744,9 +1741,9 @@ export default class Card {
         }
 
         let highlights = this._getHighlights(context)
-        highlights.forEach(highlight => {
+        highlights.forEach((highlight) => {
             Highlight.closeHighlight(highlight, {
-                animation: Card.highlightAnimation
+                animation: Card.highlightAnimation,
             })
         })
 
@@ -1768,13 +1765,13 @@ export default class Card {
         let global = this._getGlobalRect(element)
         let localPosition = Points.fromPageToNode(context, {
             x: global.x,
-            y: global.y
+            y: global.y,
         })
         return DOMRectReadOnly.fromRect({
             x: localPosition.x,
             y: localPosition.y,
             width: global.width,
-            height: global.height
+            height: global.height,
         })
     }
 
@@ -1797,7 +1794,7 @@ export default class Card {
             x: globalPosition.x,
             y: globalPosition.y,
             width: cardWidth,
-            height: cardHeight
+            height: cardHeight,
         })
     }
 
@@ -1819,19 +1816,19 @@ export default class Card {
             this._replaceAttributes(context, html, 'onclick', this._replaceCallback)
         }
         let zoomableWrappers = html.querySelectorAll('.svg-wrapper')
-        zoomableWrappers.forEach(wrapper => {
+        zoomableWrappers.forEach((wrapper) => {
             let svg = wrapper.querySelector('svg')
             Object.assign(wrapper.style, {
                 width: svg.getAttribute('width') + 'px',
-                height: svg.getAttribute('height') + 'px'
+                height: svg.getAttribute('height') + 'px',
             })
         })
         let zoomableVideoWrappers = html.querySelectorAll('.video-wrapper')
-        zoomableVideoWrappers.forEach(wrapper => {
+        zoomableVideoWrappers.forEach((wrapper) => {
             let video = wrapper.querySelector('video')
             Object.assign(wrapper.style, {
                 width: video.getAttribute('width') + 'px',
-                height: video.getAttribute('height') + 'px'
+                height: video.getAttribute('height') + 'px',
             })
         })
 
@@ -1870,12 +1867,12 @@ export default class Card {
                 let globalClick = event.center ? event.center : { x: event.x, y: event.y }
                 let localClick = Points.fromPageToNode(indexbox, globalClick)
 
-                let linkRects = links.map(link => {
+                let linkRects = links.map((link) => {
                     let rect = link.getBoundingClientRect()
                     let topLeft = Points.fromPageToNode(indexbox, rect)
                     let center = Points.fromPageToNode(indexbox, {
                         x: rect.x + rect.width / 2,
-                        y: rect.y + rect.height / 2
+                        y: rect.y + rect.height / 2,
                     })
                     return {
                         x: topLeft.x,
@@ -1883,12 +1880,12 @@ export default class Card {
                         width: rect.width,
                         height: rect.height,
                         center,
-                        link
+                        link,
                     }
                 })
 
                 let distances = []
-                linkRects.forEach(rect => {
+                linkRects.forEach((rect) => {
                     let distance = Card.pointRectDist(localClick, rect)
                     if (distance == 0.0) {
                         // Distance == 0.0 indicates an inside relation. Since these
@@ -2095,7 +2092,7 @@ Card.zIndices = {
     article: 10,
     popup: 100,
     zoomable: 101,
-    zoomedFigure: 102
+    zoomedFigure: 102,
 }
 
 Card.animation = {
@@ -2103,5 +2100,5 @@ Card.animation = {
     fade: 0.2,
     popup: 0.1,
     highlight: 0.4,
-    zoomable: 0.5
+    zoomable: 0.5,
 }

lib/card/highlight.js

@@ -94,7 +94,7 @@ export default class Highlight extends Object {
                 obj.classList.add(this.expandedClass)
                 obj.setAttribute('stroke-width', stroke / scale)
                 if (onComplete) onComplete()
-            }
+            },
         })
     }
 
@@ -113,7 +113,7 @@ export default class Highlight extends Object {
                 obj.classList.remove('zooming')
                 obj.classList.remove(this.expandedClass)
                 obj.setAttribute('stroke-width', stroke)
-            }
+            },
         })
     }
 
@@ -163,7 +163,7 @@ export default class Highlight extends Object {
             this.shrink(maskImage, { stroke })
             return
         }
-        let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
+        let circles = Array.from(circleGroup.children).filter((e) => e.tagName == 'circle')
         for (let c of circles) {
             //console.log("shrinking all circles")
             this.shrink(c, { stroke })
@@ -210,18 +210,18 @@ export default class Highlight extends Object {
             // eslint-disable-next-line no-unused-vars
             let [mask, maskImage] = this._getSVGMask(target, {
                 svgRoot,
-                image
+                image,
             })
             let center = this._calculateCenterRelativeTo(target, image)
             console.log('_calculateCenterRelativeTo', center)
             TweenLite.set(maskImage, {
-                transformOrigin: `${center.x} ${center.y}`
+                transformOrigin: `${center.x} ${center.y}`,
             })
             TweenLite.set(target, { transformOrigin: '50% 50%' })
 
             TweenLite.to([target, maskImage], animation, {
                 scale,
-                onComplete: onExpanded
+                onComplete: onExpanded,
             })
 
             target.classList.add(this.expandedClass)
@@ -259,7 +259,7 @@ export default class Highlight extends Object {
             [mask, maskImage] = this._createSVGMask(circle, {
                 svgRoot,
                 image,
-                id
+                id,
             })
 
         return [mask, maskImage]
@@ -353,7 +353,7 @@ export default class Highlight extends Object {
         let [mask, maskImage] = this._getSVGMask(target)
         // console.log('Close Highlight', maskImage)
         TweenLite.to([target, maskImage], animation, {
-            scale: 1
+            scale: 1,
         })
     }
 

lib/card/plugin.js

@@ -63,7 +63,7 @@ export class CardPluginBase {
         let requirements = this._collectAllRequirements()
         let missing = []
 
-        requirements.forEach(module => {
+        requirements.forEach((module) => {
             if (context.modules.indexOf(module.name) == -1) {
                 missing.push(module.name)
             }
@@ -121,12 +121,12 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
                 top: 0,
                 left: 0,
                 width: '100%',
-                height: '100%'
+                height: '100%',
             },
             this.style,
             {
                 display: 'none',
-                position: 'absolute'
+                position: 'absolute',
             }
         )
 
@@ -199,7 +199,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
         wrapper.appendChild(icon)
 
         Object.assign(wrapper.style, {
-            cursor: 'pointer'
+            cursor: 'pointer',
         })
 
         InteractionMapper.on(this.interactionType, wrapper, () => {
@@ -221,13 +221,13 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
 
         Object.assign(imageWrapper.style, {
             maxWidth: 'none',
-            maxHeight: 'none'
+            maxHeight: 'none',
         })
 
         Object.assign(image.style, {
             width: '100%',
             height: '100%',
-            objectFit: 'cover'
+            objectFit: 'cover',
         })
 
         this._replaceIcon(imageWrapper)
@@ -250,7 +250,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
 
             const max = {
                 width: context.offsetWidth * maxFillRatio,
-                height: context.offsetHeight * maxFillRatio
+                height: context.offsetHeight * maxFillRatio,
             }
 
             let majorSide
@@ -284,14 +284,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
 
             let targetDimensions = {
                 width: 0,
-                height: 0
+                height: 0,
             }
 
             let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
 
             let targetOffset = {
                 x: 0,
-                y: 0
+                y: 0,
             }
 
             targetDimensions[majorSide.name] = size
@@ -311,22 +311,22 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
                 y: position.y,
                 position: 'absolute',
                 width: parseInt(sourceStyle.width),
-                height: parseInt(sourceStyle.height)
+                height: parseInt(sourceStyle.height),
             })
 
             TweenMax.set(overlay, {
                 display: 'flex',
-                autoAlpha: 0
+                autoAlpha: 0,
             })
 
             TweenMax.to(imageWrapper, this.zoomAnimationDuration, {
                 x: targetOffset.x,
                 y: targetOffset.y,
                 width: targetDimensions.width,
-                height: targetDimensions.height
+                height: targetDimensions.height,
             })
             TweenMax.to(overlay, this.fadeAnimationTime, {
-                autoAlpha: 1
+                autoAlpha: 1,
             })
         }
 
@@ -358,10 +358,10 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
 
         timeline
             .to(overlay, this.fadeAnimationDuration, {
-                autoAlpha: 0
+                autoAlpha: 0,
             })
             .set(overlay, {
-                display: 'none'
+                display: 'none',
             })
     }
 }
@@ -418,7 +418,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
         this._end = this._end.bind(this)
 
         this._setupUtterance()
-        this.utterance.addEventListener('end', event => {
+        this.utterance.addEventListener('end', (event) => {
             this._end()
         })
     }
@@ -451,7 +451,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
         } else {
             if (subcard) {
                 let clone = subcard.cloneNode(true)
-                clone.querySelectorAll('figure').forEach(figure => {
+                clone.querySelectorAll('figure').forEach((figure) => {
                     figure.parentNode.removeChild(figure)
                 })
 
@@ -554,10 +554,10 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
     }
 
     async _stop() {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (this.activeUtterance) {
                 this.activeUtterance.addEventListener('end', resolve, {
-                    once: true
+                    once: true,
                 })
             }
 

lib/card/scatter.js

@@ -66,12 +66,12 @@ export default class ScatterCard extends Card {
         scatterContainer.element.appendChild(element)
         new DOMScatter(element, scatterContainer, {
             width: 1400,
-            height: 1200
+            height: 1200,
         })
 
         this.setup(element, html, {
             basePath,
-            modules
+            modules,
         })
         return element
     }
@@ -132,15 +132,15 @@ export default class ScatterCard extends Card {
             let url = basePath + '/' + item + '/index.html'
             console.log('Loading', url)
             this.loadHTML(url)
-                .then(html => {
+                .then((html) => {
                     console.log('Received', html)
                     let element = this.createCardScatter(html, scatterContainer, {
                         basePath,
-                        modules
+                        modules,
                     })
                     resolve(element)
                 })
-                .catch(e => reject(e))
+                .catch((e) => reject(e))
         })
     }
 
@@ -157,6 +157,6 @@ ScatterCard.selectedLanguage = 0
 ScatterCard.languages = ['Deutsch', 'English']
 ScatterCard.languageTags = {
     Deutsch: 'de',
-    English: 'en'
+    English: 'en',
 }
 ScatterCard.scatterContainer = null

lib/card/theme.js

@@ -20,7 +20,7 @@ export default class Theme {
             path = path ? path : './config.json'
 
             let xhttp = new XMLHttpRequest()
-            xhttp.onreadystatechange = function() {
+            xhttp.onreadystatechange = function () {
                 if (this.readyState == 4) {
                     if (this.status == 200 || Theme._isLocal()) {
                         try {

lib/card/wrapper.js

@@ -17,7 +17,7 @@ export default class CardWrapper extends Object {
     handleClicks() {
         this.domNode.addEventListener(
             'click',
-            event => {
+            (event) => {
                 if (event.isTrusted) {
                     Events.stop(event)
                     if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
@@ -32,7 +32,7 @@ export default class CardWrapper extends Object {
     handleClicksAsTaps() {
         this.domNode.addEventListener(
             'click',
-            event => {
+            (event) => {
                 if (event.isTrusted) {
                     Events.stop(event)
                 }
@@ -99,20 +99,20 @@ export default class CardWrapper extends Object {
         let globalClick = event.center ? event.center : { x: event.x, y: event.y }
         let localClick = Points.fromPageToNode(element, globalClick)
 
-        let clickRects = activeNodes.map(link => {
+        let clickRects = activeNodes.map((link) => {
             let rect = link.getBoundingClientRect()
             // Since the getBoundingClientRect is untransformed we cannot rely on it's size
             // We need a transformed bottom right to calculate local width and height
             let bottomRight = Points.fromPageToNode(element, {
                 x: rect.x + rect.width,
-                y: rect.y + rect.height
+                y: rect.y + rect.height,
             })
             let topLeft = Points.fromPageToNode(element, rect)
             let width = Math.abs(bottomRight.x - topLeft.x)
             let height = Math.abs(bottomRight.y - topLeft.y)
             let center = Points.fromPageToNode(element, {
                 x: rect.x + width / 2,
-                y: rect.y + height / 2
+                y: rect.y + height / 2,
             })
             return {
                 x: topLeft.x,
@@ -120,12 +120,12 @@ export default class CardWrapper extends Object {
                 width,
                 height,
                 center,
-                link
+                link,
             }
         })
 
         let distances = []
-        clickRects.forEach(rect => {
+        clickRects.forEach((rect) => {
             let distance = Points.distanceToRect(localClick, rect)
             distances.push(parseInt(distance))
         })

lib/doctest.js

@@ -4,10 +4,10 @@
 
 var docTestLogMessages = []
 
-Array.prototype.equals = function(array) {
+Array.prototype.equals = function (array) {
     return (
         this.length == array.length &&
-        this.every(function(this_i, i) {
+        this.every(function (this_i, i) {
             return this_i == array[i]
         })
     )

lib/errors.js

@@ -33,7 +33,7 @@ export default class Errors {
             errors = document.createElement('div')
             errors.setAttribute('id', 'runtime-errors')
             this.setStyle(document.body, {
-                border: '2px solid red'
+                border: '2px solid red',
             })
             this.setStyle(errors, {
                 position: 'absolute',
@@ -41,7 +41,7 @@ export default class Errors {
                 padding: '8px',
                 width: '100%',
                 background: 'red',
-                color: 'white'
+                color: 'white',
             })
             document.body.appendChild(errors)
             let counter = document.createElement('div')
@@ -55,7 +55,7 @@ export default class Errors {
                 fontSize: '18px',
                 textAlign: 'center',
                 lineHeight: '32px',
-                verticalAlign: 'middle'
+                verticalAlign: 'middle',
             })
             counter.innerHTML = '1'
             errors.appendChild(counter)
@@ -66,7 +66,7 @@ export default class Errors {
                 top: '6px',
                 left: '48px',
                 height: '44px',
-                fontSize: '32px'
+                fontSize: '32px',
             })
             header.innerHTML = 'Runtime Errors'
             errors.appendChild(header)
@@ -97,7 +97,7 @@ export default class Errors {
         let errors = document.getElementById('runtime-errors')
         let infos = errors.querySelectorAll('.info')
         if (infos.length > 0) {
-            infos.forEach(info => errors.removeChild(info))
+            infos.forEach((info) => errors.removeChild(info))
         } else {
             this.expandErrors()
         }
@@ -116,7 +116,7 @@ export default class Errors {
         // Register more informative error handler
         window.addEventListener(
             'error',
-            event => {
+            (event) => {
                 if (typeof event.error == 'undefined') {
                     // This sometimes happens in Edge. Since we have no error
                     // position, we cannot do much beside an info log.
@@ -128,7 +128,7 @@ export default class Errors {
             true
         )
 
-        document.addEventListener('DOMContentLoaded', event => {
+        document.addEventListener('DOMContentLoaded', (event) => {
             this.showErrors()
         })
     }

lib/events.js

@@ -2,7 +2,7 @@ export default class Events {
     static stop(event) {
         event.preventDefault()
         // I removed this, as it destroys all the Hammer.js events.
-        // And also the click event. 
+        // And also the click event.
         // It seems to have no (apparent) negative impact. -SO
         // event.stopPropagation()
     }
@@ -65,7 +65,7 @@ export default class Events {
                 clientX: t.clientX,
                 clientY: t.clientY,
                 pageX: t.pageX,
-                pageY: t.pageY
+                pageY: t.pageY,
             })
         }
         return touches
@@ -105,8 +105,8 @@ export default class Events {
                 ctrlKey: event.ctrlKey,
                 altKey: event.altKey,
                 shiftKey: event.shiftKey,
-                metaKey: event.metaKey
-            }
+                metaKey: event.metaKey,
+            },
         }
         if (event.type.startsWith('touch')) {
             // On Safari-WebKit the TouchEvent has layerX, layerY coordinates
@@ -219,7 +219,7 @@ export default class Events {
                 width: '480px',
                 height: '640px',
                 overflow: 'auto',
-                backgroundColor: 'lightgray'
+                backgroundColor: 'lightgray',
             })
             document.body.appendChild(element)
             this.popup = element
@@ -240,7 +240,7 @@ export default class Events {
         }
         Elements.setStyle(this.popup, {
             left: event.clientX + 'px',
-            top: event.clientY + 'px'
+            top: event.clientY + 'px',
         })
     }
 }

lib/flippable.js

@@ -17,7 +17,7 @@ export class CardLoader {
             scale = 1,
             minScale = 0.5,
             maxScale = 1.5,
-            rotation = 0
+            rotation = 0,
         } = {}
     ) {
         this.src = src
@@ -52,8 +52,8 @@ export class PDFLoader extends CardLoader {
 
     load(domNode) {
         return new Promise((resolve, reject) => {
-            PDFJS.getDocument(this.src).then(pdf => {
-                pdf.getPage(1).then(page => {
+            PDFJS.getDocument(this.src).then((pdf) => {
+                pdf.getPage(1).then((page) => {
                     let scale = this.scale * app.renderer.resolution
                     let invScale = 1 / scale
                     let viewport = page.getViewport(scale)
@@ -67,7 +67,7 @@ export class PDFLoader extends CardLoader {
                     // Render PDF page into canvas context.
                     let renderContext = {
                         canvasContext: context,
-                        viewport: viewport
+                        viewport: viewport,
                     }
                     page.render(renderContext)
                     domNode.appendChild(canvas)
@@ -87,7 +87,7 @@ export class ImageLoader extends CardLoader {
         return new Promise((resolve, reject) => {
             let isImage = domNode instanceof HTMLImageElement
             let image = isImage ? domNode : document.createElement('img')
-            image.onload = e => {
+            image.onload = (e) => {
                 if (!isImage) {
                     domNode.appendChild(image)
                     this.addedNode = image
@@ -103,7 +103,7 @@ export class ImageLoader extends CardLoader {
                 image.height = image.naturalHeight
                 resolve(this)
             }
-            image.onerror = e => {
+            image.onerror = (e) => {
                 reject(this)
             }
             image.src = this.src
@@ -125,10 +125,10 @@ export class FrameLoader extends CardLoader {
                 domNode.appendChild(iframe)
                 this.addedNode = iframe
             }
-            iframe.onload = e => {
+            iframe.onload = (e) => {
                 resolve(this)
             }
-            iframe.onerror = e => {
+            iframe.onerror = (e) => {
                 reject(this)
             }
             iframe.src = this.src
@@ -141,7 +141,7 @@ export class HTMLLoader extends CardLoader {
         return new Promise((resolve, reject) => {
             let xhr = new XMLHttpRequest()
             xhr.open('GET', this.src, false)
-            xhr.onreadystatechange = e => {
+            xhr.onreadystatechange = (e) => {
                 if (xhr.readyState == 4) {
                     domNode.innerHTML = this.prepare(xhr.response)
                     this.addedNode = domNode.firstElementChild
@@ -151,7 +151,7 @@ export class HTMLLoader extends CardLoader {
                     resolve(this)
                 }
             }
-            xhr.onerror = e => {
+            xhr.onerror = (e) => {
                 reject(this)
             }
             xhr.send()
@@ -209,7 +209,7 @@ export class DOMFlip {
             onClose = null,
             onUpdate = null,
             onRemoved = null,
-            onLoaded = null
+            onLoaded = null,
         } = {}
     ) {
         this.domScatterContainer = domScatterContainer
@@ -251,8 +251,8 @@ export class DOMFlip {
             // call we can access the new dom element by id
             this.cardWrapper = dom.querySelector('#' + this.id)
             let front = this.cardWrapper.querySelector('.front')
-            this.frontLoader.load(front).then(loader => {
-                this.frontLoaded(loader).then(obj => {
+            this.frontLoader.load(front).then((loader) => {
+                this.frontLoaded(loader).then((obj) => {
                     if (this.onLoaded) this.onLoaded()
                     resolve(this)
                 })
@@ -276,7 +276,7 @@ export class DOMFlip {
                 scalable: this.scalable,
                 rotatable: this.rotatable,
                 overdoScaling: this.overdoScaling,
-                tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null
+                tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null,
             })
 
             if (this.center) {
@@ -284,7 +284,7 @@ export class DOMFlip {
             }
 
             if (this.closeOnMinScale) {
-                const removeOnMinScale = function() {
+                const removeOnMinScale = function () {
                     if (scatter.scale <= scatter.minScale) {
                         this.flippable.close()
 
@@ -306,7 +306,7 @@ export class DOMFlip {
             let back = this.cardWrapper.querySelector('.back')
 
             if (this.preloadBack) {
-                this.backLoader.load(back).then(loader => {
+                this.backLoader.load(back).then((loader) => {
                     this.setupFlippable(flippable, loader)
                 })
             }
@@ -340,7 +340,7 @@ export class DOMFlip {
         } else {
             let back = this.cardWrapper.querySelector('.back')
             let flippable = this.flippable
-            this.backLoader.load(back).then(loader => {
+            this.backLoader.load(back).then((loader) => {
                 this.setupFlippable(flippable, loader)
                 flippable.start({ duration: this.flipDuration, targetCenter })
             })
@@ -352,7 +352,7 @@ export class DOMFlip {
             opacity: 0,
             onComplete: () => {
                 this.cardWrapper.remove()
-            }
+            },
         })
     }
 
@@ -400,7 +400,7 @@ export class DOMFlippable {
         TweenLite.set(this.back, { rotationY: -180 })
         TweenLite.set([this.back, this.front], {
             backfaceVisibility: 'hidden',
-            perspective: 5000
+            perspective: 5000,
         })
         TweenLite.set(this.front, { visibility: 'visible' })
         this.infoBtn = element.querySelector('.infoBtn')
@@ -412,18 +412,18 @@ export class DOMFlippable {
             scatter.tapDelegate = tapDelegate
         }
         if (this.infoBtn) {
-            scatter.tapDelegate.onTap(this.infoBtn, event => {
+            scatter.tapDelegate.onTap(this.infoBtn, (event) => {
                 this.flip.start()
             })
             this.enable(this.infoBtn)
         }
         if (this.backBtn) {
-            scatter.tapDelegate.onTap(this.backBtn, event => {
+            scatter.tapDelegate.onTap(this.backBtn, (event) => {
                 this.start()
             })
         }
         if (this.closeBtn) {
-            scatter.tapDelegate.onTap(this.closeBtn, event => {
+            scatter.tapDelegate.onTap(this.closeBtn, (event) => {
                 this.close()
             })
             this.enable(this.closeBtn)
@@ -447,7 +447,7 @@ export class DOMFlippable {
                     if (this.onRemoved) {
                         this.onRemoved.call(this)
                     }
-                }
+                },
             })
         }
     }
@@ -476,7 +476,7 @@ export class DOMFlippable {
 
     scaleButtons() {
         TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
-            scale: this.buttonScale
+            scale: this.buttonScale,
         })
     }
 
@@ -589,7 +589,7 @@ export class DOMFlippable {
             ease: Power1.easeOut,
             transformOrigin: '50% 50%',
             onUpdate,
-            onComplete: e => {
+            onComplete: (e) => {
                 if (this.flipped) {
                     //this.hide(this.front)
                     this.enable(this.backBtn)
@@ -618,7 +618,7 @@ export class DOMFlippable {
                 this.scatter.translatable = translatable
                 this.scatter.rotatable = rotatable
             },
-            force3D: true
+            force3D: true,
         })
         // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
         TweenLite.to(this.element, this.flipDuration / 2, {
@@ -630,7 +630,7 @@ export class DOMFlippable {
             height: h,
             x: x,
             y: y,
-            onComplete: e => {
+            onComplete: (e) => {
                 if (this.flipped) {
                     this.hide(this.front)
                     // this.hide(this.infoBtn)
@@ -638,7 +638,7 @@ export class DOMFlippable {
                     this.hide(this.back)
                     // this.show(this.infoBtn)
                 }
-            }
+            },
         })
     }
 }

lib/frames.js

@@ -5,7 +5,7 @@ export class FrameContainer {
     constructor(element) {
         this.element = element
         this.delegate = new InteractionMapper(element, this, {
-            mouseWheelElement: window
+            mouseWheelElement: window,
         })
     }
 
@@ -47,7 +47,7 @@ export class FrameTarget {
             bubbles: true,
             cancelable: true,
             clientX: p.x,
-            clientY: p.y
+            clientY: p.y,
         })
         this.target.dispatchEvent(event)
     }
@@ -79,7 +79,7 @@ export class FrameTarget {
             radiusX: 2.5,
             radiusY: 2.5,
             rotationAngle: 10,
-            force: 0.5
+            force: 0.5,
         })
 
         const touchEvent = new TouchEvent(type, {
@@ -88,7 +88,7 @@ export class FrameTarget {
             touches: [touchObj],
             targetTouches: [touchObj],
             changedTouches: [touchObj],
-            shiftKey: false
+            shiftKey: false,
         })
         if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
         this.target.dispatchEvent(touchEvent)
@@ -101,7 +101,7 @@ export class FrameTarget {
             bubbles: true,
             cancelable: true,
             clientX: p.x,
-            clientY: p.y
+            clientY: p.y,
         }
         data[touchEventKey] = this.createTouchList(pointMap)
         let event = new TouchEvent(type, data)

lib/imageloader.js

@@ -14,7 +14,7 @@ function onerror(event) {
 }
 
 function load() {
-    loadQueue.forEach(url => {
+    loadQueue.forEach((url) => {
         let xhr = new XMLHttpRequest()
         xhr.responseType = 'blob'
         xhr.onload = onload
@@ -25,7 +25,7 @@ function load() {
     })
 }
 
-self.onmessage = event => {
+self.onmessage = (event) => {
     let msg = event.data
     switch (msg.command) {
         case 'load':

lib/index.js

@@ -21,7 +21,7 @@ export default class Index {
 
             let icon = wrapper.querySelector('.icon')
 
-            icon.onerror = e => {
+            icon.onerror = (e) => {
                 if (this.notfound) icon.src = this.notfound
             }
             let iconSrc = src.replace('.html', '.png')
@@ -49,7 +49,7 @@ export default class Index {
         let icon = wrapper.querySelector('.icon')
 
         icon.parentNode.replaceChild(iframe, icon)
-        iframe.onload = e => {
+        iframe.onload = (e) => {
             this.frames()
         }
         iframe.src = src + window.location.search

lib/interaction.js

@@ -553,7 +553,7 @@ export class InteractionDelegate {
             useCapture = true,
             capturePointerEvents = true,
             cancelOnWindowOut = true,
-            debug = false
+            debug = false,
         } = {}
     ) {
         this.debug = debug
@@ -589,7 +589,7 @@ export class InteractionDelegate {
             if (this.debug) console.log('Pointer API' + window.PointerEvent)
             element.addEventListener(
                 'pointerdown',
-                e => {
+                (e) => {
                     if (this.debug) console.log('pointerdown', e.pointerId)
                     if (this.capture(e)) {
                         if (this.capturePointerEvents) {
@@ -606,7 +606,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'pointermove',
-                e => {
+                (e) => {
                     if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
 
                     if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
@@ -619,7 +619,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'pointerup',
-                e => {
+                (e) => {
                     if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
                     this.onEnd(e)
                     if (this.capturePointerEvents) {
@@ -634,7 +634,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'pointercancel',
-                e => {
+                (e) => {
                     if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
                     this.onEnd(e)
                     if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
@@ -645,7 +645,7 @@ export class InteractionDelegate {
             if (!this.capturePointerEvents) {
                 element.addEventListener(
                     'pointerleave',
-                    e => {
+                    (e) => {
                         if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
                         if (e.target == element) this.onEnd(e)
                     },
@@ -656,7 +656,7 @@ export class InteractionDelegate {
             if (!this.capturePointerEvents) {
                 element.addEventListener(
                     'pointerout',
-                    e => {
+                    (e) => {
                         if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
                         if (e.target == element) this.onEnd(e)
                     },
@@ -667,7 +667,7 @@ export class InteractionDelegate {
             if (this.cancelOnWindowOut) {
                 window.addEventListener(
                     'pointerout',
-                    e => {
+                    (e) => {
                         if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
                         if (e.target == element) {
                             this.onEnd(e)
@@ -680,7 +680,7 @@ export class InteractionDelegate {
             if (this.debug) console.log('Touch API')
             element.addEventListener(
                 'touchstart',
-                e => {
+                (e) => {
                     if (this.debug) console.log('touchstart', this.touchPoints(e))
                     if (this.capture(e)) {
                         for (let touch of e.changedTouches) {
@@ -692,7 +692,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'touchmove',
-                e => {
+                (e) => {
                     if (this.debug) console.log('touchmove', this.touchPoints(e), e)
                     for (let touch of e.changedTouches) {
                         this.onMove(touch)
@@ -705,7 +705,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'touchend',
-                e => {
+                (e) => {
                     if (this.debug) console.log('touchend', this.touchPoints(e))
                     for (let touch of e.changedTouches) {
                         this.onEnd(touch)
@@ -715,7 +715,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'touchcancel',
-                e => {
+                (e) => {
                     if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
                     for (let touch of e.changedTouches) {
                         this.onEnd(touch)
@@ -728,7 +728,7 @@ export class InteractionDelegate {
 
             element.addEventListener(
                 'mousedown',
-                e => {
+                (e) => {
                     if (this.debug) console.log('mousedown', e)
                     if (this.capture(e)) {
                         this.onStart(e)
@@ -738,7 +738,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'mousemove',
-                e => {
+                (e) => {
                     // Dow we only use move events if the mouse is down?
                     // HOver effects have to be implemented by other means
                     // && Events.isMouseDown(e))
@@ -752,7 +752,7 @@ export class InteractionDelegate {
             )
             element.addEventListener(
                 'mouseup',
-                e => {
+                (e) => {
                     if (this.debug) console.log('mouseup', e)
                     this.onEnd(e)
                 },
@@ -762,7 +762,7 @@ export class InteractionDelegate {
             if (!this.capturePointerEvents) {
                 element.addEventListener(
                     'mouseout',
-                    e => {
+                    (e) => {
                         if (e.target == element) {
                             this.onEnd(e)
                             console.warn("Shouldn't happen: mouseout ends interaction")
@@ -774,7 +774,7 @@ export class InteractionDelegate {
             if (this.cancelOnWindowOut) {
                 window.addEventListener(
                     'mouseout',
-                    e => {
+                    (e) => {
                         if (e.target == element) {
                             this.onEnd(e)
                         }
@@ -968,7 +968,7 @@ export class InteractionMapper extends InteractionDelegate {
             useCapture = true,
             capturePointerEvents = true,
             mouseWheelElement = null,
-            logInteractionsAbove = 12
+            logInteractionsAbove = 12,
         } = {}
     ) {
         super(element, target, {
@@ -976,7 +976,7 @@ export class InteractionMapper extends InteractionDelegate {
             useCapture,
             capturePointerEvents,
             longPressTime,
-            mouseWheelElement
+            mouseWheelElement,
         })
         this.logInteractionsAbove = logInteractionsAbove
     }
@@ -1132,7 +1132,7 @@ export class InteractionMapper extends InteractionDelegate {
                         hammer.get('tap').set(opts)
                     }
 
-                    hammer.on(type, event => {
+                    hammer.on(type, (event) => {
                         cb(event)
                     })
 
@@ -1146,7 +1146,7 @@ export class InteractionMapper extends InteractionDelegate {
                 }
             } else {
                 for (let j = 0; j < elements.length; j++) {
-                    Hammer.on(elements[j], type, event => {
+                    Hammer.on(elements[j], type, (event) => {
                         cb(event)
                     })
                 }
@@ -1177,7 +1177,7 @@ export class InteractionMapper extends InteractionDelegate {
 
             if (Hammer.__hammers.has(element)) {
                 const elementHammers = Hammer.__hammers.get(element)
-                elementHammers.forEach(it => it.destroy())
+                elementHammers.forEach((it) => it.destroy())
                 Hammer.__hammers.delete(element)
             }
         }

lib/logging.js

@@ -6,14 +6,14 @@ let logMessages = new Set()
 let logHandlers = {
     log: console.log,
     warn: console.warn,
-    error: console.error
+    error: console.error,
 }
 
 try {
     ipc = window.ipcRenderer || require('electron').ipcRenderer
-    logHandlers.log = message => ipc.send('log', message)
-    logHandlers.warn = message => ipc.send('warn', message)
-    logHandlers.error = message => ipc.send('error', message)
+    logHandlers.log = (message) => ipc.send('log', message)
+    logHandlers.warn = (message) => ipc.send('warn', message)
+    logHandlers.error = (message) => ipc.send('error', message)
 } catch (e) {
     console.log('Cannot use electron logging.')
 }

lib/pixi/abstractpopup.js

@@ -71,7 +71,7 @@ export default class AbstractPopup extends PIXI.Graphics {
                 radius: theme.radius,
                 onHidden: null,
                 visible: true,
-                orientation: null
+                orientation: null,
             },
             opts
         )
@@ -105,7 +105,7 @@ export default class AbstractPopup extends PIXI.Graphics {
         // interaction
         //-----------------
         this.interactive = true
-        this.on('added', e => {
+        this.on('added', (e) => {
             this.show()
         })
     }
@@ -285,7 +285,7 @@ export default class AbstractPopup extends PIXI.Graphics {
                 if (cb) {
                     cb.call(this)
                 }
-            }
+            },
         })
 
         return this
@@ -305,7 +305,7 @@ export default class AbstractPopup extends PIXI.Graphics {
                 if (cb) {
                     cb.call(this)
                 }
-            }
+            },
         })
 
         if (this.opts.onHidden) {

lib/pixi/app-fullscreen.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="max-width: none;">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

lib/pixi/app-resolution.html

@@ -8,10 +8,8 @@
     <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=".././3rdparty/all.js"></script>
-
-    <script src=".../../dist/iwmlib.pixi.js"></script>
+    <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
     <script src="../../dist/iwmlib.pixi.js"></script>
 
     <style>

lib/pixi/app.html

@@ -50,21 +50,21 @@ const app = new PIXIApp({
 app.setup()
 app.run()
 
- let highlightBtn = new PIXI.Graphics();
-        highlightBtn.lineStyle(2, 0x033792);
-        highlightBtn.drawRoundedRect(15, 40, 30, 30, 10);
-        highlightBtn.endFill();
-        app.stage.addChild(highlightBtn);
+//  let highlightBtn = new PIXI.Graphics();
+//         highlightBtn.lineStyle(2, 0x033792);
+//         highlightBtn.drawRoundedRect(15, 40, 30, 30, 10);
+//         highlightBtn.endFill();
+//         app.stage.addChild(highlightBtn);
 
-// app.loadSprites("assets/app-circle.png", sprites => {
-//     let circle = sprites.get("assets/app-circle.png")
-//     circle.anchor.set(0.5)
-//     circle.x = app.screen.width / 2
-//     circle.y = app.screen.height / 2
-//     circle.width = 80
-//     circle.height = 80
-//     app.scene.addChild(circle)
-//     app.run()
-// })
+app.loadSprites("assets/app-circle.png", sprites => {
+    let circle = sprites.get("assets/app-circle.png")
+    circle.anchor.set(0.5)
+    circle.x = app.screen.width / 2
+    circle.y = app.screen.height / 2
+    circle.width = 80
+    circle.height = 80
+    app.scene.addChild(circle)
+    app.run()
+})
     </script>
 </body>

lib/pixi/app.js

@@ -16,11 +16,11 @@ import { debounce } from '../utils.js'
  *
  * @private
  * @class
- * @extends PIXI.interaction.InteractionManager
+ * @extends PIXI.InteractionManager
  * @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager}
  * @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
  */
-class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
+class FullscreenInteractionManager extends PIXI.InteractionManager {
     mapPositionToPoint(point, x, y) {
         let resolution = this.renderer.resolution
         let extendWidth = 1.0
@@ -98,7 +98,7 @@ export default class PIXIApp extends PIXI.Application {
         roundPixels = true,
         monkeyPatchMapping = true,
         adaptive = true,
-        graphql = false
+        graphql = false,
     }) {
         const fullScreen = !width || !height
 
@@ -111,12 +111,12 @@ export default class PIXIApp extends PIXI.Application {
             view,
             width,
             height,
-            transparent,
+            backgroundAlpha: transparent,
             antialias,
             resolution,
             autoResize,
             backgroundColor,
-            forceCanvas
+            forceCanvas,
         })
 
         this.width = width
@@ -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.resizeApp(event), 50)
             window.addEventListener('resize', resizeDebounced)
             document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
         }
@@ -167,25 +167,25 @@ export default class PIXIApp extends PIXI.Application {
         // GraphQL
         if (this.graphql && typeof apollo !== 'undefined') {
             const networkInterface = apollo.createNetworkInterface({
-                uri: '/graphql'
+                uri: '/graphql',
             })
 
             const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
                 reconnect: true,
-                connectionParams: {}
+                connectionParams: {},
             })
 
             const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
 
             this.apolloClient = new apollo.ApolloClient({
-                networkInterface: networkInterfaceWithSubscriptions
+                networkInterface: networkInterfaceWithSubscriptions,
             })
         }
 
         // progress
         this._progress = new Progress(
             Object.assign({ theme: this.theme }, this.progressOpts, {
-                app: this
+                app: this,
             })
         )
         this._progress.visible = false
@@ -214,7 +214,7 @@ export default class PIXIApp extends PIXI.Application {
         if (value != this.orient) {
             setTimeout(
                 100,
-                function() {
+                function () {
                     this.orientationChanged(true)
                 }.bind(this)
             )
@@ -469,7 +469,7 @@ export default class PIXIApp extends PIXI.Application {
     loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
         this.loadTextures(
             resources,
-            textures => {
+            (textures) => {
                 let sprites = new Map()
 
                 for (let [key, texture] of textures) {
@@ -528,7 +528,7 @@ export default class PIXIApp extends PIXI.Application {
         }
 
         if (progress) {
-            loader.on('progress', e => {
+            loader.on('progress', (e) => {
                 this.progress(e.progress)
             })
         }
@@ -719,7 +719,7 @@ class FpsDisplay extends PIXI.Graphics {
                 fontWeight: 'bold',
                 fill: '#f6f6f6',
                 stroke: '#434f4f',
-                strokeThickness: 3
+                strokeThickness: 3,
             })
         )
         this.text.position.set(6, 6)

lib/pixi/application.html

@@ -11,7 +11,7 @@
     <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body>
-    <h1>PIXI.Application with nothing!</h1>
+    <h1>Vanilla PIXI.Application</h1>
 
     <script>
         const app = new PIXI.Application({

lib/pixi/badge.js

@@ -50,7 +50,7 @@ export default class Badge extends AbstractPopup {
                 minWidth: 0,
                 minHeight: 0,
                 padding: theme.padding / 2,
-                tooltip: null
+                tooltip: null,
             },
             opts
         )
@@ -84,7 +84,7 @@ export default class Badge extends AbstractPopup {
             if (typeof this.opts.tooltip === 'string') {
                 this.tooltip = new Tooltip({
                     object: this,
-                    content: this.opts.tooltip
+                    content: this.opts.tooltip,
                 })
             } else {
                 this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)

lib/pixi/blurfilter.js

@@ -93,7 +93,7 @@ export default class BlurFilter extends PIXI.Filter {
                 x: value.x,
                 y: value.y,
                 width: value.width,
-                height: value.height
+                height: value.height,
             }
         } else {
             const bounds = value.getBounds()
@@ -102,7 +102,7 @@ export default class BlurFilter extends PIXI.Filter {
                 x: bounds.x,
                 y: bounds.y,
                 width: bounds.width,
-                height: bounds.height
+                height: bounds.height,
             }
         }
 

lib/pixi/bundle.js

@@ -76,7 +76,7 @@ import Mercator from './maps/projections/mercator.js'
 import Robinson from './maps/projections/robinson.js'
 window.Projection = {
     Mercator,
-    Robinson
+    Robinson,
 }
 
 import MapViewport from './maps/mapviewport.js'
@@ -91,7 +91,7 @@ import {
     RigidContainer,
     CompactScatter,
     CoverScatter,
-    MapObjectScatter
+    MapObjectScatter,
 } from './maps/scatter.js'
 
 window.AdvancedScatterContainer = AdvancedScatterContainer

lib/pixi/button.js

@@ -156,7 +156,7 @@ export default class Button extends PIXI.Container {
                 verticalAlign: 'middle',
                 tooltip: null,
                 badge: null,
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -177,7 +177,7 @@ export default class Button extends PIXI.Container {
                 strokeAlpha: this.HIDDEN_ALPHA,
                 strokeActiveAlpha: this.HIDDEN_ALPHA,
                 fillAlpha: this.HIDDEN_ALPHA,
-                fillActiveAlpha: this.HIDDEN_ALPHA
+                fillActiveAlpha: this.HIDDEN_ALPHA,
             })
         }
 
@@ -249,15 +249,15 @@ export default class Button extends PIXI.Container {
 
         // interaction
         //-----------------
-        this.button.on('pointerover', e => {
+        this.button.on('pointerover', (e) => {
             this.capture(e)
             TweenLite.to([this.button, this.content], this.theme.fast, {
                 alpha: 0.83,
-                overwrite: 'none'
+                overwrite: 'none',
             })
         })
 
-        this.button.on('pointermove', e => {
+        this.button.on('pointermove', (e) => {
             this.capture(e)
         })
 
@@ -268,17 +268,17 @@ export default class Button extends PIXI.Container {
         this.button.on('scroll', this.onEnd.bind(this))
 
         // eslint-disable-next-line no-unused-vars
-        this.button.on('pointerdown', e => {
+        this.button.on('pointerdown', (e) => {
             //this.capture(e)
             this.__start.x = e.data.global.x
             this.__start.y = e.data.global.y
             TweenLite.to([this.button, this.content], this.theme.fast, {
                 alpha: 0.7,
-                overwrite: 'none'
+                overwrite: 'none',
             })
         })
 
-        this.button.on('pointerup', e => {
+        this.button.on('pointerup', (e) => {
             this.capture(e)
 
             const distance = Points.distance(e.data.global, this.__start)
@@ -290,7 +290,7 @@ export default class Button extends PIXI.Container {
 
                 TweenLite.to([this.button, this.content], this.theme.fast, {
                     alpha: 0.83,
-                    overwrite: 'none'
+                    overwrite: 'none',
                 })
 
                 if (this.opts.type === 'checkbox') {
@@ -321,7 +321,7 @@ export default class Button extends PIXI.Container {
             if (typeof this.opts.tooltip === 'string') {
                 this.tooltip = new Tooltip({
                     object: this,
-                    content: this.opts.tooltip
+                    content: this.opts.tooltip,
                 })
             } else {
                 this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
@@ -338,7 +338,7 @@ export default class Button extends PIXI.Container {
                     align: 'right',
                     verticalAlign: 'top',
                     offsetLeft: 0,
-                    offsetTop: 0
+                    offsetTop: 0,
                 }
             )
             if (typeof this.opts.badge === 'string') {
@@ -716,7 +716,7 @@ export default class Button extends PIXI.Container {
         this.capture(event)
         TweenLite.to([this.button, this.content], this.theme.fast, {
             alpha: 1,
-            overwrite: 'none'
+            overwrite: 'none',
         })
     }
 }

lib/pixi/buttongroup.js

@@ -126,7 +126,7 @@ export default class ButtonGroup extends PIXI.Container {
                 orientation: 'horizontal',
                 align: 'center', // left, center, right
                 verticalAlign: 'middle', // top, middle, bottom
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -216,7 +216,7 @@ export default class ButtonGroup extends PIXI.Container {
             it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
             it.afterAction = (event, button) => {
                 if (this.opts.type === 'radio' && button.opts.type === 'default') {
-                    this.buttons.forEach(it => {
+                    this.buttons.forEach((it) => {
                         if (it.opts.type === 'default') {
                             it.active = false
                         }
@@ -243,7 +243,7 @@ export default class ButtonGroup extends PIXI.Container {
 
             button.__originalPosition = {
                 x: button.x,
-                y: button.y
+                y: button.y,
             }
 
             position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
@@ -255,7 +255,7 @@ export default class ButtonGroup extends PIXI.Container {
         if (this.opts.orientation === 'vertical') {
             const maxWidth = this.getMaxButtonWidth()
 
-            this.buttons.forEach(it => {
+            this.buttons.forEach((it) => {
                 it.opts.minWidth = maxWidth
                 it.layout()
             })
@@ -283,7 +283,7 @@ export default class ButtonGroup extends PIXI.Container {
             //--------------------
             if (this.opts.app) {
                 const app = this.opts.app
-                app.view.addEventListener('mousewheel', event => {
+                app.view.addEventListener('mousewheel', (event) => {
                     const bounds = this.getBounds()
                     const x = event.clientX - app.view.getBoundingClientRect().left
                     const y = event.clientY - app.view.getBoundingClientRect().top
@@ -338,7 +338,7 @@ export default class ButtonGroup extends PIXI.Container {
      */
     draw() {
         if (this.opts.margin === 0) {
-            this.buttons.forEach(it => it.hide())
+            this.buttons.forEach((it) => it.hide())
 
             this.container.clear()
             this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
@@ -378,7 +378,7 @@ export default class ButtonGroup extends PIXI.Container {
     set disabled(value) {
         this._disabled = value
 
-        this.buttons.forEach(it => (it.disabled = value))
+        this.buttons.forEach((it) => (it.disabled = value))
     }
 
     /**
@@ -416,7 +416,7 @@ export default class ButtonGroup extends PIXI.Container {
      * @return {number} The maximum with of a button of the button group.
      */
     getMaxButtonWidth() {
-        let widths = this.buttons.map(it => it.width)
+        let widths = this.buttons.map((it) => it.width)
 
         return Math.max(...widths)
     }
@@ -459,7 +459,7 @@ export default class ButtonGroup extends PIXI.Container {
 
             this.__delta = {
                 x: this.container.position.x - event.data.global.x,
-                y: this.container.position.y - event.data.global.y
+                y: this.container.position.y - event.data.global.y,
             }
 
             TweenLite.killTweensOf(this.container.position, { x: true, y: true })
@@ -539,7 +539,7 @@ export default class ButtonGroup extends PIXI.Container {
                         throwProps,
                         ease: Strong.easeOut,
                         onUpdate: () => this.stack(),
-                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
                     },
                     0.8,
                     0.4
@@ -635,8 +635,8 @@ export default class ButtonGroup extends PIXI.Container {
             sorted.push(it)
         })
 
-        const min = Math.min(...sorted.map(it => it.x))
-        const max = Math.max(...sorted.map(it => it.x + it.button.width))
+        const min = Math.min(...sorted.map((it) => it.x))
+        const max = Math.max(...sorted.map((it) => it.x + it.button.width))
         const center = (min + max) / 2
 
         // z-index
@@ -661,7 +661,7 @@ export default class ButtonGroup extends PIXI.Container {
 
                 return 0
             })
-            .forEach(it => it.parent.addChild(it))
+            .forEach((it) => it.parent.addChild(it))
     }
 
     /**
@@ -692,8 +692,8 @@ export default class ButtonGroup extends PIXI.Container {
             sorted.push(it)
         })
 
-        const min = Math.min(...sorted.map(it => it.y))
-        const max = Math.max(...sorted.map(it => it.y + it.button.height))
+        const min = Math.min(...sorted.map((it) => it.y))
+        const max = Math.max(...sorted.map((it) => it.y + it.button.height))
         const center = (min + max) / 2
 
         // z-index
@@ -718,6 +718,6 @@ export default class ButtonGroup extends PIXI.Container {
 
                 return 0
             })
-            .forEach(it => it.parent.addChild(it))
+            .forEach((it) => it.parent.addChild(it))
     }
 }

lib/pixi/deepzoom/image.js

@@ -155,7 +155,7 @@ export class DeepZoomInfo {
             this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false)
 
             if (loadBaseImage) {
-                this.imageForURL(this.baseURL, e => {
+                this.imageForURL(this.baseURL, (e) => {
                     this.size = [e.target.naturalWidth, e.target.naturalHeight]
                     this.baseImage = e.target
                 })
@@ -332,7 +332,7 @@ export class DeepZoomImage extends PIXI.Container {
             useWorker = '',
             minimumLevel = 0,
             alpha = 1,
-            app = window.app
+            app = window.app,
         } = {}
     ) {
         super()
@@ -708,7 +708,7 @@ export class DeepZoomImage extends PIXI.Container {
         let changed = { added: [], removed: [] }
         let newNeeded = new Map()
         let { centerCol, centerRow, needed } = this.neededTiles(tiles, level)
-        needed.forEach(d => {
+        needed.forEach((d) => {
             let [url, col, row] = d
             newNeeded.set(url, [col, row])
             if (!tiles.requested.has(url)) {
@@ -856,7 +856,7 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     hideTilesAboveLevel(level) {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             if (tiles.level > level) {
                 tiles.visible = false
@@ -869,7 +869,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @param {number} level - The zoom level of the grid
      */
     destroyTilesAboveLevel(level) {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             if (tiles.level > level && !tiles.keep) {
                 for (let url of tiles.available.keys()) {
@@ -882,7 +882,7 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     destroyAllTiles() {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             this.destroyTiles(key)
         })
     }
@@ -893,7 +893,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @memberof DeepZoomImage
      */
     tintObsoleteTiles() {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             tiles.untintTiles()
             if (!tiles.keep) {
@@ -908,7 +908,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @memberof DeepZoomImage
      */
     destroyUnneededTiles() {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             if (!tiles.keep) {
                 tiles.destroyUnneededTiles()
@@ -922,7 +922,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @memberof DeepZoomImage
      */
     destroyObsoleteTiles() {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             if (!tiles.keep) {
                 tiles.destroyObsoleteTiles()
@@ -937,7 +937,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @memberof DeepZoomImage
      */
     destroyTiles() {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             if (!tiles.keep) {
                 tiles.destroyTiles(this.quadTrees)
@@ -949,7 +949,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @param {number} level - The zoom level of the grid
      */
     tintTilesBelowLevel(level) {
-        Object.keys(this.tileLayers).forEach(key => {
+        Object.keys(this.tileLayers).forEach((key) => {
             let tiles = this.tileLayers[key]
             if (tiles.level < level) {
                 tiles.tintTiles(this.quadTrees)
@@ -989,7 +989,7 @@ export class DeepZoomImage extends PIXI.Container {
             this.fastLoads += 1
             this.populateTiles(currentTiles, this.currentLevel, {
                 onlyone: false,
-                about: event.about
+                about: event.about,
             })
             if (this.fastLoads == 3) {
                 this.fastLoads = 0

lib/pixi/deepzoom/loader.js

@@ -40,7 +40,7 @@ export class TileLoader {
         if (this.loaded.has(url)) this.loaded.delete(url)
         if (this.loading.has(url)) this.loading.delete(url)
         //Tile.unschedule(url)
-        this.loadQueue = this.loadQueue.filter(item => item != url)
+        this.loadQueue = this.loadQueue.filter((item) => item != url)
     }
 
     /** Cancels loading by clearing the load queue **/
@@ -246,7 +246,7 @@ export class RequestTileLoader extends TileLoader {
             let xhr = new XMLHttpRequest()
             xhr.open('GET', url, false)
             xhr.responseType = 'arraybuffer'
-            xhr.onload = e => {
+            xhr.onload = (e) => {
                 let CompressedImage = PIXI.compressedTextures.CompressedImage
                 let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
                 let base = new PIXI.BaseTexture(compressed)
@@ -320,7 +320,7 @@ export class WorkerTileLoader extends TileLoader {
 
         let worker = (this.worker = new Worker(workerPath))
 
-        worker.onmessage = event => {
+        worker.onmessage = (event) => {
             if (event.data.success) {
                 let { url, col, row, buffer } = event.data
                 //console.log("WorkerTileLoader.loaded", url, buffer)

lib/pixi/deepzoom/tileloader.js

@@ -9,12 +9,12 @@ function load() {
         let [col, row, url] = tile
         let xhr = new XMLHttpRequest()
         xhr.responseType = 'arraybuffer'
-        xhr.onload = event => {
+        xhr.onload = (event) => {
             pendingRequests.delete(url)
             let buffer = xhr.response
             postMessage({ success: true, url, col, row, buffer }, [buffer])
         }
-        xhr.onerror = event => {
+        xhr.onerror = (event) => {
             pendingRequests.delete(url)
             let buffer = null
             postMessage({ success: false, url, col, row, buffer })
@@ -29,7 +29,7 @@ function load() {
     }
 }
 
-self.onmessage = event => {
+self.onmessage = (event) => {
     let msg = event.data
     switch (msg.command) {
         case 'load':

lib/pixi/deepzoom/tiles.js

@@ -51,7 +51,7 @@ export class Tiles extends PIXI.Container {
 
         this.infoColor = Colors.random()
         this.pprint()
-        this.destroyed = false
+        //this.destroyed = false
     }
 
     /** Tests whether all tiles are loaded. **/
@@ -169,7 +169,7 @@ export class Tiles extends PIXI.Container {
         if (this.showGrid) {
             this.highlightTile(refCol, refRow)
         }
-        urlpos.forEach(d => {
+        urlpos.forEach((d) => {
             let [url, col, row] = d
             if (this.loader.schedule(url, col, row)) {
                 if (onlyone) {
@@ -229,7 +229,7 @@ export class Tiles extends PIXI.Container {
      * cancelled.
      **/
     destroy() {
-        this.destroyed = true
+        //this.destroyed = true
         this.loader.destroy()
         super.destroy({ children: true }) // Calls destroyChildren
         this.available.clear()

lib/pixi/flipeffect.js

@@ -47,7 +47,7 @@ export class ScatterLoader extends CardLoader {
             width: w,
             height: h,
             view: canvas,
-            resolution: resolution
+            resolution: resolution,
         })
 
         let displayObject = this.scatter.displayObject
@@ -88,7 +88,7 @@ export class ScatterLoader extends CardLoader {
             let image = isImage ? domNode : document.createElement('img')
             let [x, y, w, h, cloneURL] = this.cloneScatterImage()
             let [ww, hh] = this.unscaledSize()
-            image.onload = e => {
+            image.onload = (e) => {
                 if (!isImage) domNode.appendChild(image)
                 this.x = x
                 this.y = y
@@ -98,7 +98,7 @@ export class ScatterLoader extends CardLoader {
                 this.rotation = this.scatter.rotation
                 resolve(this)
             }
-            image.onerror = e => {
+            image.onerror = (e) => {
                 reject(this)
             }
             image.src = cloneURL
@@ -113,7 +113,7 @@ export default class FlipEffect {
         this.backLoader = backLoader
         this.scatterLoader = new ScatterLoader(scatter)
         this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
-            onBack: this.backCardClosed.bind(this)
+            onBack: this.backCardClosed.bind(this),
         })
         this.setupInfoButton()
     }
@@ -121,7 +121,7 @@ export default class FlipEffect {
     startFlip() {
         let center = this.flipCenter()
         let loader = this.backLoader
-        this.domFlip.load().then(domFlip => {
+        this.domFlip.load().then((domFlip) => {
             this.scatter.displayObject.visible = false
             domFlip.centerAt(center)
             domFlip.zoom(this.scatter.scale)
@@ -176,10 +176,10 @@ export default class FlipEffect {
         this.infoBtn.lineTo(0, 14)
         this.infoBtn.endFill()
 
-        this.infoBtn.on('click', e => {
+        this.infoBtn.on('click', (e) => {
             this.infoSelected()
         })
-        this.infoBtn.on('tap', e => {
+        this.infoBtn.on('tap', (e) => {
             this.infoSelected()
         })
 
@@ -200,7 +200,7 @@ export default class FlipEffect {
             displayObject.addChild(this.infoBtn)
         }
 
-        this.scatter.addTransformEventCallback(e => {
+        this.scatter.addTransformEventCallback((e) => {
             let displayObject = this.scatter.displayObject
             if (displayObject.foreground) {
                 if (e.scale) {
@@ -217,7 +217,7 @@ export default class FlipEffect {
         let canvas = document.createElement('canvas')
         canvas.width = 88 * 4
         canvas.height = 44 * 4
-        svgImage.onload = e => {
+        svgImage.onload = (e) => {
             let displayObject = this.scatter.displayObject
             canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height)
             let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
@@ -234,10 +234,10 @@ export default class FlipEffect {
             this.infoBtn.position = new PIXI.Point(w, h)
             this.infoBtn.interactive = true
             this.infoBtn.updateTransform()
-            this.infoBtn.on('click', e => {
+            this.infoBtn.on('click', (e) => {
                 this.infoSelected()
             })
-            this.infoBtn.on('tap', e => {
+            this.infoBtn.on('tap', (e) => {
                 this.infoSelected()
             })
         }

lib/pixi/flippable.js

@@ -86,7 +86,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
                 focus: 800,
                 near: 10,
                 far: 10000,
-                orthographic: false
+                orthographic: false,
             },
             opts
         )
@@ -228,7 +228,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
             height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
             rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
             skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
-            skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
+            skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y,
         }
 
         // set toObject end values
@@ -265,7 +265,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
                 if (this.opts.onComplete) {
                     this.opts.onComplete(this, this)
                 }
-            }
+            },
         })
 
         // x & y
@@ -273,7 +273,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
         TweenLite.to(this, this.opts.duration, {
             x: to.x,
             y: to.y,
-            ease: this.opts.transformEase
+            ease: this.opts.transformEase,
         })
 
         // width & height
@@ -281,7 +281,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
         TweenLite.to([front, back], this.opts.duration, {
             width: to.width,
             height: to.height,
-            ease: this.opts.transformEase
+            ease: this.opts.transformEase,
         })
 
         // rotation
@@ -289,9 +289,9 @@ export default class Flippable extends PIXI.projection.Camera3d {
         TweenLite.to(this, this.opts.duration, {
             directionalRotation: {
                 rotation: `${to.rotation}_short`,
-                useRadians: true
+                useRadians: true,
             },
-            ease: this.opts.transformEase
+            ease: this.opts.transformEase,
         })
 
         // skewX & skewY
@@ -299,7 +299,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
         TweenLite.to(this.skew, this.opts.duration, {
             x: to.skewX,
             y: to.skewY,
-            ease: this.opts.transformEase
+            ease: this.opts.transformEase,
         })
 
         // camera
@@ -308,7 +308,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
             .to(this.euler, half, {
                 x: this.opts.eulerX,
                 y: this.opts.eulerY,
-                ease
+                ease,
             })
             .to(this.euler, half, { x: 0, y: 0, ease })
 
@@ -385,7 +385,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
         const bounds = displayObject.getBounds()
         return {
             x: bounds.x + bounds.width / 2,
-            y: bounds.y + bounds.height / 2
+            y: bounds.y + bounds.height / 2,
         }
     }
 
@@ -411,7 +411,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
             displayObject.skew.x,
             displayObject.skew.y,
             displayObject.pivot.x,
-            displayObject.pivot.y
+            displayObject.pivot.y,
         ]
 
         displayObject.position.set(0, 0)

lib/pixi/labeledgraphics.js

@@ -30,7 +30,7 @@ export class Hypenate {
             result.push(p + '-')
         }
         result.push(last)
-        return result.filter(p => p.length > 0)
+        return result.filter((p) => p.length > 0)
     }
 
     static splitWord(word) {
@@ -288,7 +288,7 @@ export class LabeledGraphics extends PIXI.Graphics {
                     }
                     return {
                         text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
-                        length: data.length + wordLength + spaceLength
+                        length: data.length + wordLength + spaceLength,
                     }
                 },
                 { text: '', length: dotsLength }

lib/pixi/list.js

@@ -54,7 +54,7 @@ export default class List extends PIXI.Container {
                 verticalAlign: 'middle',
                 width: null,
                 height: null,
-                app: null
+                app: null,
             },
             opts
         )
@@ -107,7 +107,7 @@ export default class List extends PIXI.Container {
         //--------------------
         if (this.opts.app) {
             const app = this.opts.app
-            app.view.addEventListener('mousewheel', event => {
+            app.view.addEventListener('mousewheel', (event) => {
                 const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
                 const x = event.clientX - app.view.getBoundingClientRect().left
                 const y = event.clientY - app.view.getBoundingClientRect().top
@@ -165,13 +165,13 @@ export default class List extends PIXI.Container {
         if (this.opts.orientation === 'vertical') {
             switch (this.opts.align) {
                 case 'center':
-                    this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
+                    this.__items.forEach((it) => (it.x = margin + this.width / 2 - it.width / 2))
                     break
                 case 'right':
-                    this.__items.forEach(it => (it.x = margin + this.width - it.width))
+                    this.__items.forEach((it) => (it.x = margin + this.width - it.width))
                     break
                 default:
-                    this.__items.forEach(it => (it.x = margin))
+                    this.__items.forEach((it) => (it.x = margin))
                     break
             }
 
@@ -191,13 +191,13 @@ export default class List extends PIXI.Container {
         if (this.opts.orientation === 'horizontal') {
             switch (this.opts.verticalAlign) {
                 case 'top':
-                    this.__items.forEach(it => (it.y = margin))
+                    this.__items.forEach((it) => (it.y = margin))
                     break
                 case 'bottom':
-                    this.__items.forEach(it => (it.y = margin + this.height - it.height))
+                    this.__items.forEach((it) => (it.y = margin + this.height - it.height))
                     break
                 default:
-                    this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2))
+                    this.__items.forEach((it) => (it.y = margin + this.height / 2 - it.height / 2))
                     break
             }
 
@@ -221,7 +221,7 @@ export default class List extends PIXI.Container {
     get innerWidth() {
         let size = 0
 
-        this.__items.forEach(it => (size += it.width))
+        this.__items.forEach((it) => (size += it.width))
         size += this.opts.padding * (this.__items.length - 1)
         size += 2 * this.opts.margin
 
@@ -234,7 +234,7 @@ export default class List extends PIXI.Container {
     get innerHeight() {
         let size = 0
 
-        this.__items.forEach(it => (size += it.height))
+        this.__items.forEach((it) => (size += it.height))
         size += this.opts.padding * (this.__items.length - 1)
         size += 2 * this.opts.margin
 
@@ -268,7 +268,7 @@ export default class List extends PIXI.Container {
 
         this.__delta = {
             x: this.container.position.x - event.data.global.x,
-            y: this.container.position.y - event.data.global.y
+            y: this.container.position.y - event.data.global.y,
         }
 
         TweenLite.killTweensOf(this.container.position, { x: true, y: true })
@@ -313,7 +313,7 @@ export default class List extends PIXI.Container {
                 throwProps.x = {
                     velocity: 'auto',
                     min,
-                    max: 0
+                    max: 0,
                 }
             } else {
                 let min = this.opts.height - this.innerHeight
@@ -321,7 +321,7 @@ export default class List extends PIXI.Container {
                 throwProps.y = {
                     velocity: 'auto',
                     min,
-                    max: 0
+                    max: 0,
                 }
             }
 
@@ -331,7 +331,7 @@ export default class List extends PIXI.Container {
                     {
                         throwProps,
                         ease: Strong.easeOut,
-                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
                     },
                     0.8,
                     0.4

lib/pixi/message.js

@@ -66,7 +66,7 @@ export default class Message extends InteractivePopup {
                 verticalAlign: 'top', // top, middle, bottom
                 duration: 5,
                 autoClose: true,
-                closeDuration: theme.fast
+                closeDuration: theme.fast,
             },
             opts
         )

lib/pixi/modal.js

@@ -55,7 +55,7 @@ export default class Modal extends PIXI.Container {
                 backgroundFill: theme.background,
                 backgroundFillAlpha: 0.6,
                 closeOnBackground: true,
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -87,7 +87,7 @@ export default class Modal extends PIXI.Container {
         // interaction
         //-----------------
         this.interactive = true
-        this.on('added', e => {
+        this.on('added', (e) => {
             if (this.visible) {
                 this.show()
             }
@@ -101,7 +101,7 @@ export default class Modal extends PIXI.Container {
 
         if (this.opts.closeOnBackground) {
             background.interactive = true
-            background.on('pointerup', e => {
+            background.on('pointerup', (e) => {
                 this.hide()
             })
         }
@@ -112,7 +112,7 @@ export default class Modal extends PIXI.Container {
             visible: true,
             onHidden: () => {
                 this.hide()
-            }
+            },
         })
         let popup = new InteractivePopup(popupOpts)
         this.popup = popup
@@ -153,7 +153,7 @@ export default class Modal extends PIXI.Container {
     show() {
         TweenLite.to(this, this.theme.fast, {
             alpha: 1,
-            onStart: () => (this.visible = true)
+            onStart: () => (this.visible = true),
         })
 
         return this
@@ -167,7 +167,7 @@ export default class Modal extends PIXI.Container {
     hide() {
         TweenLite.to(this, this.theme.fast, {
             alpha: 0,
-            onComplete: () => (this.visible = false)
+            onComplete: () => (this.visible = false),
         })
 
         return this

lib/pixi/popover.js

@@ -10,7 +10,7 @@ export default class Popover extends PIXI.Graphics {
         placement = 'top',
         width = 250,
         titleStyle = {},
-        textStyle = { fontSize: '1.6em' }
+        textStyle = { fontSize: '1.6em' },
     } = {}) {
         super()
 
@@ -22,7 +22,7 @@ export default class Popover extends PIXI.Graphics {
             placement,
             width,
             titleStyle,
-            textStyle
+            textStyle,
         }
 
         this.padding = 12
@@ -33,7 +33,7 @@ export default class Popover extends PIXI.Graphics {
             stroke: '#f6f6f6',
             strokeThickness: 3,
             wordWrap: true,
-            wordWrapWidth: width - this.padding * 2
+            wordWrapWidth: width - this.padding * 2,
         }
 
         this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))

lib/pixi/popup.js

@@ -29,7 +29,7 @@ export class InteractivePopup extends AbstractPopup {
                 closeOnPopup: false,
                 closeButton: true,
                 button: null,
-                buttonGroup: null
+                buttonGroup: null,
             },
             opts
         )
@@ -62,7 +62,7 @@ export class InteractivePopup extends AbstractPopup {
 
         // interaction
         //-----------------
-        this.on('pointerup', e => {
+        this.on('pointerup', (e) => {
             if (this.opts.closeOnPopup) {
                 this.hide()
             } else {
@@ -95,7 +95,7 @@ export class InteractivePopup extends AbstractPopup {
 
             closeButton.interactive = true
             closeButton.buttonMode = true
-            closeButton.on('pointerdown', e => {
+            closeButton.on('pointerdown', (e) => {
                 this.hide()
             })
 
@@ -228,7 +228,7 @@ export default class Popup extends InteractivePopup {
             {
                 closeButton: false,
                 minWidth: 0,
-                minHeight: 0
+                minHeight: 0,
             },
             opts
         )

lib/pixi/popupmenu.js

@@ -50,7 +50,7 @@ export default class PopupMenu extends Popup {
                 items: [],
                 margin: theme.margin / 2,
                 textStyle: theme.textStyle,
-                closeOnPopup: true
+                closeOnPopup: true,
             },
             opts
         )
@@ -88,19 +88,19 @@ export default class PopupMenu extends Popup {
                     object.interactive = true
                     object.buttonMode = true
                 }
-                object.on('pointerover', e => {
+                object.on('pointerover', (e) => {
                     TweenLite.to(object, this.theme.fast, {
                         alpha: 0.83,
-                        overwrite: 'none'
+                        overwrite: 'none',
                     })
                 })
-                object.on('pointerout', e => {
+                object.on('pointerout', (e) => {
                     TweenLite.to(object, this.theme.fast, {
                         alpha: 1,
-                        overwrite: 'none'
+                        overwrite: 'none',
                     })
                 })
-                object.on('pointerup', e => {
+                object.on('pointerup', (e) => {
                     item.action.call(object, e, object)
                     if (this.opts.closeOnAction) {
                         this.hide()

lib/pixi/progress.js

@@ -81,7 +81,7 @@ export default class Progress extends PIXI.Container {
                 backgroundFillAlpha: 1,
                 radius: theme.radius,
                 destroyOnComplete: true,
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -116,7 +116,7 @@ export default class Progress extends PIXI.Container {
     setup() {
         // interaction
         //-----------------
-        this.on('added', e => {
+        this.on('added', (e) => {
             this.show()
         })
 
@@ -261,7 +261,7 @@ export default class Progress extends PIXI.Container {
     hide() {
         TweenLite.to(this, this.theme.fast, {
             alpha: 0,
-            onComplete: () => (this.visible = false)
+            onComplete: () => (this.visible = false),
         })
 
         return this
@@ -293,10 +293,10 @@ export default class Progress extends PIXI.Container {
                 if (value === 100 && this.opts.destroyOnComplete) {
                     TweenLite.to(this, this.theme.fast, {
                         alpha: 0,
-                        onComplete: () => this.destroy({ children: true })
+                        onComplete: () => this.destroy({ children: true }),
                     })
                 }
-            }
+            },
         })
     }
 }

lib/pixi/scatter.js

@@ -33,7 +33,7 @@ export class ScatterContainer extends PIXI.Graphics {
             showPolygon = false,
             showTouches = false,
             backgroundColor = null,
-            app = window.app
+            app = window.app,
         } = {}
     ) {
         super()
@@ -41,7 +41,7 @@ export class ScatterContainer extends PIXI.Graphics {
         if (this.container)
             this.containerDimensions = {
                 x: this.container.width,
-                y: this.container.height
+                y: this.container.height,
             }
         this.backgroundWidth = null
         this.backgroundHeight = null
@@ -56,7 +56,7 @@ export class ScatterContainer extends PIXI.Graphics {
         this.backgroundColor = backgroundColor
         if (showBounds || showTouches || showPolygon) {
             //console.log("Show TOUCHES!!!")
-            this.app.ticker.add(delta => this.update(delta), this)
+            this.app.ticker.add((delta) => this.update(delta), this)
         }
         if (backgroundColor) {
             this.updateBackground()
@@ -277,7 +277,7 @@ export class DisplayObjectScatter extends AbstractScatter {
             overdoScaling = 1.5,
             onTransform = null,
             onResize,
-            onThrowFinished = null
+            onThrowFinished = null,
         } = {}
     ) {
         // For the simulation of named parameters,
@@ -300,7 +300,7 @@ export class DisplayObjectScatter extends AbstractScatter {
             onThrowFinished,
             rotationDegrees,
             rotation,
-            onTransform
+            onTransform,
         })
         this.onResize = onResize
         this.displayObject = displayObject
@@ -325,7 +325,7 @@ export class DisplayObjectScatter extends AbstractScatter {
             scale: this.scale,
             x: this.x,
             y: this.y,
-            rotation: this.rotation
+            rotation: this.rotation,
         }
     }
 

lib/pixi/scrollbox.js

@@ -43,13 +43,13 @@ export default class Scrollbox extends PIXI.Container {
                 underflow: 'top-left',
                 fadeScrollbar: false,
                 fadeWait: 3000,
-                fadeEase: 'easeInOutSine'
+                fadeEase: 'easeInOutSine',
             },
             options
         )
         this.ease = new PIXI.extras.Ease.list()
 
-        this.on('added', event => {
+        this.on('added', (event) => {
             this.update()
         })
 
@@ -63,7 +63,7 @@ export default class Scrollbox extends PIXI.Container {
                 passiveWheel: this.options.stopPropagation,
                 stopPropagation: this.options.stopPropagation,
                 screenWidth: this.options.boxWidth,
-                screenHeight: this.options.boxHeight
+                screenHeight: this.options.boxHeight,
             })
         )
         this.content.decelerate().on('moved', () => this._drawScrollbars())
@@ -396,10 +396,7 @@ export default class Scrollbox extends PIXI.Container {
      * @private
      */
     _drawMask() {
-        this._maskContent
-            .beginFill(0)
-            .drawRect(0, 0, this.boxWidth, this.boxHeight)
-            .endFill()
+        this._maskContent.beginFill(0).drawRect(0, 0, this.boxWidth, this.boxHeight).endFill()
         this.content.mask = this._maskContent
     }
 
@@ -440,7 +437,7 @@ export default class Scrollbox extends PIXI.Container {
             const time = this.options.fade === true ? 1000 : this.options.fade
             this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
                 wait: this.options.fadeWait,
-                ease: this.options.fadeEase
+                ease: this.options.fadeEase,
             })
             this.fade.on('each', () => (this.content.dirty = true))
         }

lib/pixi/slider.js

@@ -119,7 +119,7 @@ export default class Slider extends PIXI.Container {
                 onUpdate: null,
                 onComplete: null,
                 tooltip: null,
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -174,7 +174,7 @@ export default class Slider extends PIXI.Container {
         //-----------------
         const container = this.opts.container
 
-        this.on('pointermove', e => {
+        this.on('pointermove', (e) => {
             if (this.control.dragging) {
                 const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
                 this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
@@ -188,20 +188,20 @@ export default class Slider extends PIXI.Container {
         })
 
         if (container instanceof Element) {
-            container.addEventListener('pointerup', e => this.onEnd(e), false)
-            container.addEventListener('pointercancel', e => this.onEnd(e), false)
-            container.addEventListener('pointerleave', e => this.onEnd(e), false)
-            container.addEventListener('pointerout', e => this.onEnd(e), false)
-            container.addEventListener('mouseup', e => this.onEnd(e), false)
-            container.addEventListener('mousecancel', e => this.onEnd(e), false)
-            container.addEventListener('mouseleave', e => this.onEnd(e), false)
-            container.addEventListener('mouseout', e => this.onEnd(e), false)
+            container.addEventListener('pointerup', (e) => this.onEnd(e), false)
+            container.addEventListener('pointercancel', (e) => this.onEnd(e), false)
+            container.addEventListener('pointerleave', (e) => this.onEnd(e), false)
+            container.addEventListener('pointerout', (e) => this.onEnd(e), false)
+            container.addEventListener('mouseup', (e) => this.onEnd(e), false)
+            container.addEventListener('mousecancel', (e) => this.onEnd(e), false)
+            container.addEventListener('mouseleave', (e) => this.onEnd(e), false)
+            container.addEventListener('mouseout', (e) => this.onEnd(e), false)
         } else {
             container.interactive = true
-            container.on('pointerup', e => this.onEnd(e))
-            container.on('pointercancel', e => this.onEnd(e))
-            container.on('pointerleave', e => this.onEnd(e))
-            container.on('pointerout', e => this.onEnd(e))
+            container.on('pointerup', (e) => this.onEnd(e))
+            container.on('pointercancel', (e) => this.onEnd(e))
+            container.on('pointerleave', (e) => this.onEnd(e))
+            container.on('pointerout', (e) => this.onEnd(e))
         }
 
         // Slider
@@ -217,7 +217,7 @@ export default class Slider extends PIXI.Container {
         control.y = this.opts.controlRadius
 
         // pointerdown on the control for dragndrop
-        control.on('pointerdown', e => {
+        control.on('pointerdown', (e) => {
             control.event = e
             control.delta = e.data.getLocalPosition(this.control).x
             control.dragging = true
@@ -233,21 +233,21 @@ export default class Slider extends PIXI.Container {
 
         // interaction
         //-----------------
-        this.sliderObj.on('pointerover', e => {
+        this.sliderObj.on('pointerover', (e) => {
             TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
         })
 
-        this.sliderObj.on('pointerout', e => {
+        this.sliderObj.on('pointerout', (e) => {
             TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
         })
 
-        this.sliderObj.on('pointerdown', e => {
+        this.sliderObj.on('pointerdown', (e) => {
             this.sliderObj.pointerdowned = true
             TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
         })
 
         // Click on the slider bar
-        this.sliderObj.on('pointerup', e => {
+        this.sliderObj.on('pointerup', (e) => {
             if (this.sliderObj.pointerdowned) {
                 this.sliderObj.pointerdowned = false
                 const position = e.data.getLocalPosition(this.control.parent)
@@ -266,7 +266,7 @@ export default class Slider extends PIXI.Container {
             if (typeof this.opts.tooltip === 'string') {
                 this.tooltip = new Tooltip({
                     object: this,
-                    content: this.opts.tooltip
+                    content: this.opts.tooltip,
                 })
             } else {
                 this.opts.tooltip.object = this

lib/pixi/stylus.js

@@ -82,7 +82,7 @@ export default class Stylus extends PIXI.Graphics {
         captureEvents = true,
         acceptMouseEvents = true,
         lineWidth = 16,
-        minStrokeLength = 4
+        minStrokeLength = 4,
     } = {}) {
         super()
         this.activePointers = 0
@@ -164,7 +164,7 @@ export default class Stylus extends PIXI.Graphics {
     }
 
     registerEventHandler() {
-        window.addEventListener('keydown', e => {
+        window.addEventListener('keydown', (e) => {
             switch (e.keyCode) {
                 case 38: // up arrow
                     this.tiltX += 5
@@ -182,7 +182,7 @@ export default class Stylus extends PIXI.Graphics {
             if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
         })
 
-        this.on('pointerdown', e => {
+        this.on('pointerdown', (e) => {
             if (this.debug) console.log('pointerdown', e)
             if (this.eventInside(e)) {
                 this.activePointers += 1
@@ -192,13 +192,13 @@ export default class Stylus extends PIXI.Graphics {
             }
         })
 
-        this.on('pointermove', e => {
+        this.on('pointermove', (e) => {
             if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
                 if (this.debug) console.log('pointermove', e, this.eventInside(e))
                 if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e))
             }
         })
-        this.on('pointerup', e => {
+        this.on('pointerup', (e) => {
             if (this.eventInside(e)) {
                 if (this.activePointers > 0) {
                     this.activePointers -= 1
@@ -207,13 +207,13 @@ export default class Stylus extends PIXI.Graphics {
             }
             if (this.debug) console.log('pointerup', this.activePointers)
         })
-        this.on('pointerleave', e => {
+        this.on('pointerleave', (e) => {
             if (this.activePointers > 0) {
                 this.activePointers -= 1
             }
             this.endStroke(this.toStroke(e))
         })
-        this.on('pointercancel', e => {
+        this.on('pointercancel', (e) => {
             if (this.activePointers > 0) {
                 this.activePointers -= 1
             }
@@ -277,7 +277,7 @@ export default class Stylus extends PIXI.Graphics {
             tiltX: this.tiltX,
             tiltY: this.tiltY,
             color: this.color,
-            lineWidth: this.tiltToLineWidth(this.tiltY)
+            lineWidth: this.tiltToLineWidth(this.tiltY),
         }
         return desc
     }

lib/pixi/switch.js

@@ -147,7 +147,7 @@ export default class Switch extends PIXI.Container {
                 beforeAction: null,
                 afterAction: null,
                 tooltip: null,
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -188,7 +188,7 @@ export default class Switch extends PIXI.Container {
             controlStroke: this.opts.controlStroke,
             controlStrokeWidth: this.opts.controlStrokeWidth,
             controlStrokeAlpha: this.opts.controlStrokeAlpha,
-            controlRadius: this.opts.controlRadius
+            controlRadius: this.opts.controlRadius,
         }
 
         // setup
@@ -228,19 +228,19 @@ export default class Switch extends PIXI.Container {
 
         // interaction
         //-----------------
-        this.switchObj.on('pointerover', e => {
+        this.switchObj.on('pointerover', (e) => {
             TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
         })
 
-        this.switchObj.on('pointerout', e => {
+        this.switchObj.on('pointerout', (e) => {
             TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
         })
 
-        this.switchObj.on('pointerdown', e => {
+        this.switchObj.on('pointerdown', (e) => {
             TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
         })
 
-        this.switchObj.on('pointerup', e => {
+        this.switchObj.on('pointerup', (e) => {
             if (this.opts.beforeAction) {
                 this.opts.beforeAction.call(this, e, this)
             }
@@ -278,7 +278,7 @@ export default class Switch extends PIXI.Container {
             if (typeof this.opts.tooltip === 'string') {
                 this.tooltip = new Tooltip({
                     object: this,
-                    content: this.opts.tooltip
+                    content: this.opts.tooltip,
                 })
             } else {
                 this.opts.tooltip.object = this
@@ -416,7 +416,7 @@ export default class Switch extends PIXI.Container {
                     stroke: this.opts.strokeActive,
                     controlFill: this.opts.controlFillActive,
                     controlStroke: this.opts.controlStrokeActive,
-                    format: 'number'
+                    format: 'number',
                 },
                 fillAlpha: this.opts.fillActiveAlpha,
                 strokeWidth: this.opts.strokeActiveWidth,
@@ -426,11 +426,11 @@ export default class Switch extends PIXI.Container {
                 controlStrokeAlpha: this.opts.controlStrokeActiveAlpha,
                 controlRadius: this.opts.controlRadiusActive,
                 onUpdate: () => this.drawAnimated(),
-                onComplete: () => this.draw()
+                onComplete: () => this.draw(),
             })
         } else {
             TweenLite.to(this.control, this.opts.durationActive, {
-                x: this.xInactive
+                x: this.xInactive,
             })
             TweenLite.to(this.tempAnimated, this.opts.durationActive, {
                 colorProps: {
@@ -438,7 +438,7 @@ export default class Switch extends PIXI.Container {
                     stroke: this.opts.stroke,
                     controlFill: this.opts.controlFill,
                     controlStroke: this.opts.controlStroke,
-                    format: 'number'
+                    format: 'number',
                 },
                 fillAlpha: this.opts.fillAlpha,
                 strokeWidth: this.opts.strokeWidth,
@@ -448,7 +448,7 @@ export default class Switch extends PIXI.Container {
                 controlStrokeAlpha: this.opts.controlStrokeAlpha,
                 controlRadius: this.opts.controlRadius,
                 onUpdate: () => this.drawAnimated(),
-                onComplete: () => this.draw()
+                onComplete: () => this.draw(),
             })
         }
     }

lib/pixi/test.js

@@ -121,7 +121,7 @@ export class RecorderTools extends PIXI.Container {
         // Since this delegate might shadow another delegate, we mus avoid
         // capturing PointerEvents.
         this.delegate = new InteractionMapper(container, this, {
-            capturePointerEvents: false
+            capturePointerEvents: false,
         })
     }
 

lib/pixi/text.js

@@ -150,7 +150,7 @@ export default class Text extends PIXI.Container {
                 verticalAlign: 'middle',
                 tooltip: null,
                 badge: null,
-                visible: true
+                visible: true,
             },
             opts
         )
@@ -171,7 +171,7 @@ export default class Text extends PIXI.Container {
                 strokeAlpha: 0,
                 strokeActiveAlpha: 0,
                 fillAlpha: 0,
-                fillActiveAlpha: 0
+                fillActiveAlpha: 0,
             })
         }
 
@@ -243,15 +243,15 @@ export default class Text extends PIXI.Container {
 
         // interaction
         //-----------------
-        this.button.on('pointerover', e => {
+        this.button.on('pointerover', (e) => {
             this.capture(e)
             TweenLite.to([this.button, this.content], this.theme.fast, {
                 alpha: 0.83,
-                overwrite: 'none'
+                overwrite: 'none',
             })
         })
 
-        this.button.on('pointermove', e => {
+        this.button.on('pointermove', (e) => {
             this.capture(e)
         })
 
@@ -262,17 +262,17 @@ export default class Text extends PIXI.Container {
         this.button.on('scroll', this.onEnd.bind(this))
 
         // eslint-disable-next-line no-unused-vars
-        this.button.on('pointerdown', e => {
+        this.button.on('pointerdown', (e) => {
             //this.capture(e)
             this.__start.x = e.data.global.x
             this.__start.y = e.data.global.y
             TweenLite.to([this.button, this.content], this.theme.fast, {
                 alpha: 0.7,
-                overwrite: 'none'
+                overwrite: 'none',
             })
         })
 
-        this.button.on('pointerup', e => {
+        this.button.on('pointerup', (e) => {
             this.capture(e)
 
             const distance = Points.distance(e.data.global, this.__start)
@@ -288,7 +288,7 @@ export default class Text extends PIXI.Container {
 
                 TweenLite.to([this.button, this.content], this.theme.fast, {
                     alpha: 0.83,
-                    overwrite: 'none'
+                    overwrite: 'none',
                 })
 
                 if (this.opts.type === 'checkbox') {
@@ -315,7 +315,7 @@ export default class Text extends PIXI.Container {
             if (typeof this.opts.tooltip === 'string') {
                 this.tooltip = new Tooltip({
                     object: this,
-                    content: this.opts.tooltip
+                    content: this.opts.tooltip,
                 })
             } else {
                 this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
@@ -332,7 +332,7 @@ export default class Text extends PIXI.Container {
                     align: 'right',
                     verticalAlign: 'top',
                     offsetLeft: 0,
-                    offsetTop: 0
+                    offsetTop: 0,
                 }
             )
             if (typeof this.opts.badge === 'string') {
@@ -708,7 +708,7 @@ export default class Text extends PIXI.Container {
         this.capture(event)
         TweenLite.to([this.button, this.content], this.theme.fast, {
             alpha: 1,
-            overwrite: 'none'
+            overwrite: 'none',
         })
     }
 }

lib/pixi/theme.js

@@ -112,7 +112,7 @@ export default class Theme {
                 textActiveAlpha: 1,
                 iconColor: color2,
                 iconColorActive: colorPrimary,
-                background: color1
+                background: color1,
             },
             opts
         )
@@ -129,7 +129,7 @@ export default class Theme {
                 stroke: color1,
                 strokeThickness: 0,
                 miterLimit: 1,
-                lineJoin: 'round'
+                lineJoin: 'round',
             },
             this.opts.textStyle
         )

lib/pixi/timeline.js

@@ -75,7 +75,7 @@ export class Ticks {
             end: last,
             visibleStart: visibleFirst,
             visibleEnd: visibleLast,
-            units: units
+            units: units,
         }
     }
 
@@ -717,7 +717,7 @@ export default class Timeline extends BitmapLabeledGraphics {
                     {
                         x: x,
                         y: y,
-                        align
+                        align,
                     },
                     FontInfo.small
                 )
@@ -732,21 +732,21 @@ export default class Timeline extends BitmapLabeledGraphics {
             let start = this.start.toLocaleDateString('de', {
                 year: 'numeric',
                 month: 'numeric',
-                day: 'numeric'
+                day: 'numeric',
             })
             let end = this.end.toLocaleDateString('de', {
                 year: 'numeric',
                 month: 'numeric',
-                day: 'numeric'
+                day: 'numeric',
             })
             this.ensureLabel(this.labelPrefix + 'start', start, {
                 x: this.toX(this.start),
-                y: h2
+                y: h2,
             })
             this.ensureLabel(this.labelPrefix + 'end', end, {
                 x: this.toX(this.end),
                 y: h2,
-                align: 'right'
+                align: 'right',
             })
         }
     }

lib/pixi/tooltip.js

@@ -56,7 +56,7 @@ export default class Tooltip extends AbstractPopup {
                 container: null,
                 offsetLeft: 8,
                 offsetTop: -8,
-                delay: 0
+                delay: 0,
             },
             opts
         )
@@ -89,11 +89,11 @@ export default class Tooltip extends AbstractPopup {
 
         let mouseoverTooltip = false
 
-        this.on('mouseover', e => {
+        this.on('mouseover', (e) => {
             mouseoverTooltip = true
         })
 
-        this.on('mouseout', e => {
+        this.on('mouseout', (e) => {
             mouseoverTooltip = false
             if (!mouseoverObject) {
                 this.hide(() => {
@@ -109,7 +109,7 @@ export default class Tooltip extends AbstractPopup {
 
         let mouseoverObject = false
 
-        object.on('mouseover', e => {
+        object.on('mouseover', (e) => {
             this.timeout = window.setTimeout(() => {
                 mouseoverObject = true
                 this.visible = true
@@ -118,13 +118,13 @@ export default class Tooltip extends AbstractPopup {
             }, this.opts.delay * 1000)
         })
 
-        object.on('mousemove', e => {
+        object.on('mousemove', (e) => {
             if (mouseoverObject) {
                 this.setPosition(e)
             }
         })
 
-        object.on('mouseout', e => {
+        object.on('mouseout', (e) => {
             mouseoverObject = false
             window.clearTimeout(this.timeout)
             if (!mouseoverTooltip) {

lib/pixi/volatile.js

@@ -59,7 +59,7 @@ export default class Volatile {
                 distance: 160,
                 duration: 1.5,
                 ease: Quad.easeOut,
-                destroyOnComplete: true
+                destroyOnComplete: true,
             },
             opts
         )
@@ -149,7 +149,7 @@ export default class Volatile {
                     if (this.opts.destroyOnComplete) {
                         object.destroy({ children: true })
                     }
-                }
+                },
             })
         }
 

lib/popup.js

@@ -63,7 +63,7 @@ export default class Popup extends Poppable {
         onResize = null,
         onMove = null,
         noStyle = false,
-        hideOnUp = true
+        hideOnUp = true,
     } = {}) {
         super()
         this.context = context
@@ -129,7 +129,7 @@ export default class Popup extends Poppable {
             img.style.top = '0px'
             img.style.width = '16px'
             img.style.height = '16px'
-            img.onclick = e => {
+            img.onclick = (e) => {
                 this.close()
             }
             this.element.appendChild(img)
@@ -143,17 +143,17 @@ export default class Popup extends Poppable {
             img.style.height = '16px'
             img.src = this.resizeIcon
             img.setAttribute('draggable', true)
-            img.ondragstart = e => {
+            img.ondragstart = (e) => {
                 this.currentPos = { x: e.clientX, y: e.clientY }
                 return true
             }
-            img.ondrag = e => {
+            img.ondrag = (e) => {
                 e.preventDefault()
 
                 let target = this.element.querySelector('iframe') || this.element
                 let delta = {
                     x: e.clientX - this.currentPos.x,
-                    y: e.clientY - this.currentPos.y
+                    y: e.clientY - this.currentPos.y,
                 }
 
                 this.currentPos = { x: e.clientX, y: e.clientY }
@@ -179,7 +179,7 @@ export default class Popup extends Poppable {
                     this.onResize({ target, delta, width, height })
                 }
             }
-            img.ondragend = e => {}
+            img.ondragend = (e) => {}
             this.element.appendChild(img)
         }
 
@@ -205,7 +205,7 @@ export default class Popup extends Poppable {
                     let iframe = document.createElement('iframe')
                     iframe.setAttribute('frameBorder', 0)
                     iframe.src = content[key]
-                    iframe.onload = e => {
+                    iframe.onload = (e) => {
                         let body = iframe.contentWindow.document.body
                         let observer = new MutationObserver(() => {
                             this.iframeChanged(iframe)
@@ -214,7 +214,7 @@ export default class Popup extends Poppable {
                             attributes: true,
                             subtree: true,
                             childList: true,
-                            characterData: true
+                            characterData: true,
                         })
                         let w = Math.max(body.scrollWidth, body.offsetWidth)
                         let h = Math.max(body.scrollHeight, body.offsetHeight)
@@ -256,7 +256,7 @@ export default class Popup extends Poppable {
                             if (!image.complete && !image.src.startsWith('data:')) {
                                 total += 1
                                 console.log('image not complete', image.src)
-                                image.onload = e => {
+                                image.onload = (e) => {
                                     count += 1
                                     if (count == total) {
                                         this.loaded = true
@@ -305,33 +305,33 @@ export default class Popup extends Poppable {
             if (window.PointerEvent)
                 this.parent.addEventListener('pointerup', close.bind(this), {
                     capture: true,
-                    once: true
+                    once: true,
                 })
             else if (window.TouchEvent)
                 this.parent.addEventListener('touchend', close.bind(this), {
                     capture: true,
-                    once: true
+                    once: true,
                 })
             else
                 this.parent.addEventListener('mouseup', close.bind(this), {
                     capture: true,
-                    once: true
+                    once: true,
                 })
         } else {
             if (window.PointerEvent)
                 this.parent.addEventListener('pointerdown', close.bind(this), {
                     capture: true,
-                    once: true
+                    once: true,
                 })
             else if (window.TouchEvent)
                 this.parent.addEventListener('touchstart', close.bind(this), {
                     capture: true,
-                    once: true
+                    once: true,
                 })
             else
                 this.parent.addEventListener('mousedown', close.bind(this), {
                     capture: true,
-                    once: true
+                    once: true,
                 })
         }
     }
@@ -362,17 +362,17 @@ export default class Popup extends Poppable {
         if (this.draggable) {
             let target = this.element
             target.setAttribute('draggable', true)
-            target.ondragstart = e => {
+            target.ondragstart = (e) => {
                 this.currentPos = { x: e.clientX, y: e.clientY }
                 var img = document.createElement('img')
                 img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
                 e.dataTransfer.setDragImage(img, 0, 0)
             }
-            target.ondrag = e => {
+            target.ondrag = (e) => {
                 e.preventDefault()
                 let delta = {
                     x: e.clientX - this.currentPos.x,
-                    y: e.clientY - this.currentPos.y
+                    y: e.clientY - this.currentPos.y,
                 }
                 this.currentPos = { x: e.clientX, y: e.clientY }
                 let left = parseFloat(target.style.left)
@@ -388,7 +388,7 @@ export default class Popup extends Poppable {
 
                 this.lastDrag = { left, top }
             }
-            target.ondragend = e => {
+            target.ondragend = (e) => {
                 target.style.left = this.lastDrag.left + 'px'
                 target.style.top = this.lastDrag.top + 'px'
                 this.currentPos = null
@@ -514,14 +514,14 @@ export default class Popup extends Poppable {
     withinDimensions() {
         return {
             width: this.keepWithin.offsetWidth,
-            height: this.keepWithin.offsetHeight
+            height: this.keepWithin.offsetHeight,
         }
     }
 
     localDimensions() {
         return {
             width: this.element.offsetWidth,
-            height: this.element.offsetHeight
+            height: this.element.offsetHeight,
         }
     }
 
@@ -676,7 +676,7 @@ export default class Popup extends Poppable {
         let style = {
             maxWidth: this.maxWidth + 'px',
             zIndex: this.zIndex,
-            position: 'absolute'
+            position: 'absolute',
         }
         if (this.minWidth) {
             style.minWidth = this.minWidth + 'px'
@@ -690,7 +690,7 @@ export default class Popup extends Poppable {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
                 stroke: 'black',
-                fill: 'white'
+                fill: 'white',
             })
         }
 
@@ -729,7 +729,7 @@ export default class Popup extends Poppable {
                     borderTopWidth: this.notchSize + 'px',
                     borderRight: this.notchSize + 'px solid transparent',
                     borderLeft: this.notchSize + 'px solid transparent',
-                    borderBottom: 0
+                    borderBottom: 0,
                 }
             } else {
                 return {
@@ -742,7 +742,7 @@ export default class Popup extends Poppable {
                     borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
                     borderRight: this.notchSize + 'px solid transparent',
                     borderLeft: this.notchSize + 'px solid transparent',
-                    borderBottom: 0
+                    borderBottom: 0,
                 }
             }
         }
@@ -758,7 +758,7 @@ export default class Popup extends Poppable {
                     borderBottomWidth: this.notchSize + 'px',
                     borderRight: this.notchSize + 'px solid transparent',
                     borderLeft: this.notchSize + 'px solid transparent',
-                    borderTop: 0
+                    borderTop: 0,
                 }
             } else {
                 return {
@@ -770,7 +770,7 @@ export default class Popup extends Poppable {
                     borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
                     borderRight: this.notchSize + 'px solid transparent',
                     borderLeft: this.notchSize + 'px solid transparent',
-                    borderTop: 0
+                    borderTop: 0,
                 }
             }
         }
@@ -796,7 +796,7 @@ export default class Popup extends Poppable {
                 borderLeftWidth: this.notchSize,
                 position: 'absolute',
                 borderTop: this.notchSize + 'px solid transparent',
-                borderBottom: this.notchSize + 'px solid transparent'
+                borderBottom: this.notchSize + 'px solid transparent',
             }
         } else {
             let borderRight = this.notchSize + 'px solid transparent'
@@ -825,7 +825,7 @@ export default class Popup extends Poppable {
                 //  boxShadow,
                 position: 'absolute',
                 borderTop: this.notchSize + 'px solid transparent',
-                borderBottom: this.notchSize + 'px solid transparent'
+                borderBottom: this.notchSize + 'px solid transparent',
             }
         }
     }
@@ -864,7 +864,7 @@ export default class Popup extends Poppable {
             useEventPosWithBoundingBox = false,
             interactive = false,
             onResize = null,
-            onMove = null
+            onMove = null,
         } = {}
     ) {
         let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
@@ -893,7 +893,7 @@ export default class Popup extends Poppable {
             useEventPosWithBoundingBox,
             interactive,
             onResize,
-            onMove
+            onMove,
         })
         popup.register(context)
         popup.showAt(content, point)

lib/popupmenu.js

@@ -36,7 +36,7 @@ export default class PopupMenu extends Popup {
         highlightColor = 'black',
         notchPosition = 'bottomLeft',
         keepWithin = null,
-        autoClose = true
+        autoClose = true,
     } = {}) {
         super({
             parent,
@@ -48,7 +48,7 @@ export default class PopupMenu extends Popup {
             backgroundColor,
             keepWithin,
             normalColor,
-            autoClose
+            autoClose,
         })
         this.commands = commands
         this.zIndex = zIndex
@@ -77,21 +77,21 @@ export default class PopupMenu extends Popup {
             item.style.paddingBottom = item.style.paddingTop = this.spacing
             Elements.setStyle(item, {
                 color: this.normalColor,
-                cursor: 'default'
+                cursor: 'default',
             })
             Elements.addClass(item, 'unselectable')
             Elements.addClass(item, 'popupMenuItem')
             this.items[key] = item
-            item.onclick = event => {
+            item.onclick = (event) => {
                 this.perform(event, key)
             }
-            item.ontap = event => {
+            item.ontap = (event) => {
                 this.perform(event, key)
             }
-            item.onmouseover = event => {
+            item.onmouseover = (event) => {
                 this.over(event, key)
             }
-            item.onmouseout = event => {
+            item.onmouseout = (event) => {
                 this.out(event, key)
             }
         }
@@ -192,7 +192,7 @@ export default class PopupMenu extends Popup {
             keepWithin = null,
             backgroundColor = '#EEE',
             normalColor = '#444',
-            autoClose = true
+            autoClose = true,
         } = {}
     ) {
         let registered = Poppable.get(context)
@@ -216,11 +216,11 @@ export default class PopupMenu extends Popup {
             normalColor,
             notchPosition,
             keepWithin,
-            autoClose
+            autoClose,
         })
         popup.showAt(commands, point)
         popup.register(context)
-        popup.closeEventListener = e => {
+        popup.closeEventListener = (e) => {
             if (this.eventOutside(e)) this.closePopup(context)
         }
         if (autoClose) {

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
@@ -94,7 +95,7 @@ class Throwable {
         throwVisibility = 44,
         throwDamping = 0.95,
         autoThrow = true,
-        onThrowFinished = null
+        onThrowFinished = null,
     } = {}) {
         this.movableX = movableX
         this.movableY = movableY
@@ -105,7 +106,7 @@ class Throwable {
         this.velocity = null
         this.timestamp = null
         this.onThrowFinished = onThrowFinished
-            //console.log("onThrowFinished", onThrowFinished)
+        //console.log("onThrowFinished", onThrowFinished)
     }
 
     observeVelocity() {
@@ -127,13 +128,12 @@ class Throwable {
                 t: t,
                 dt: dt,
                 dx: delta.x / number,
-                dy: delta.y / number
+                dy: delta.y / number,
             }
             this.velocities.push(velocity)
             while (this.velocities.length > buffer) {
                 this.velocities.shift()
             }
-
         }
     }
 
@@ -183,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)
@@ -226,7 +226,7 @@ class Throwable {
         let next = Points.multiplyScalar(velocity, this.throwDamping)
         return {
             x: this.movableX ? next.x : 0,
-            y: this.movableY ? next.y : 0
+            y: this.movableY ? next.y : 0,
         }
     }
 
@@ -271,7 +271,7 @@ export class AbstractScatter extends Throwable {
         scaleCloseBuffer = 0.05,
         maxRotation = Angle.degree2radian(5),
         minInteractionDistance = 0,
-        useLowPassFilter = false
+        useLowPassFilter = false,
     } = {}) {
         if (rotationDegrees != null && rotation != null) {
             throw new Error('Use rotationDegrees or rotation but not both')
@@ -286,7 +286,7 @@ export class AbstractScatter extends Throwable {
             throwVisibility,
             throwDamping,
             autoThrow,
-            onThrowFinished
+            onThrowFinished,
         })
 
         /**
@@ -361,7 +361,7 @@ export class AbstractScatter extends Throwable {
 
     _callCloseCallbacks() {
         if (this.onClose) {
-            this.onClose.forEach(callback => callback(this))
+            this.onClose.forEach((callback) => callback(this))
         }
     }
 
@@ -381,7 +381,6 @@ export class AbstractScatter extends Throwable {
         let delta = interaction.delta()
 
         if (delta != null) {
-
             let rotate = delta.rotate
             let zoom = delta.zoom
             if (this.maxRotation != null) {
@@ -468,8 +467,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()
@@ -480,7 +479,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
@@ -513,13 +512,13 @@ export class AbstractScatter extends Throwable {
             if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
                 this.zoom(this.minScale, {
                     animate: 0.2,
-                    onComplete: this.close.bind(this)
+                    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) {
@@ -539,12 +538,12 @@ export class AbstractScatter extends Throwable {
                     x: '+=' + d.x,
                     y: '+=' + d.y,
                     /* scale: scale, uo: not defined, why was this here? */
-                    onUpdate: e => {
+                    onUpdate: (e) => {
                         let p = this.position
                         let dx = p.x - startPos.x
                         let dy = p.x - startPos.y
                         this.onMoved(dx, dy)
-                    }
+                    },
                 })
             } else {
                 this._move(d)
@@ -573,7 +572,7 @@ export class AbstractScatter extends Throwable {
                     scale: scale,
                     delay: delay,
                     onComplete: onComplete,
-                    onUpdate: this.onZoomed.bind(this)
+                    onUpdate: this.onZoomed.bind(this),
                 })
             } else {
                 this.scale = scale
@@ -583,7 +582,7 @@ export class AbstractScatter extends Throwable {
     }
 
     _move(delta) {
-        // this.addVelocity(delta) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855 
+        // this.addVelocity(delta) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
         this.x += this.movableX ? delta.x : 0
         this.y += this.movableX ? delta.y : 0
     }
@@ -591,7 +590,7 @@ export class AbstractScatter extends Throwable {
     transform(translate, zoom, rotate, anchor) {
         let delta = {
             x: this.movableX ? translate.x : 0,
-            y: this.movableY ? translate.y : 0
+            y: this.movableY ? translate.y : 0,
         }
         if (this.resizable) var vzoom = zoom
         if (!this.translatable) delta = { x: 0, y: 0 }
@@ -606,9 +605,9 @@ export class AbstractScatter extends Throwable {
                     rotate: 0,
                     about: anchor,
                     fast: false,
-                    type: UPDATE
+                    type: UPDATE,
                 })
-                this.onTransform.forEach(function(f) {
+                this.onTransform.forEach(function (f) {
                     f(event)
                 })
             }
@@ -622,7 +621,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)
@@ -637,9 +636,9 @@ export class AbstractScatter extends Throwable {
                 translate: delta,
                 scale: newScale,
                 rotate: rotate,
-                about: anchor
+                about: anchor,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -705,7 +704,7 @@ export class AbstractScatter extends Throwable {
             if (this.scale > this.maxScale) zoom = 1 - amount
             if (zoom != 1) {
                 this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor)
-                requestAnimationFrame(dt => {
+                requestAnimationFrame((dt) => {
                     this.animateZoomBounce(dt)
                 })
                 return
@@ -762,9 +761,9 @@ export class AbstractScatter extends Throwable {
                 rotate: 0,
                 about: null,
                 fast: false,
-                type: START
+                type: START,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -798,9 +797,9 @@ export class AbstractScatter extends Throwable {
                     rotate: 0,
                     about: null,
                     fast: false,
-                    type: END
+                    type: END,
                 })
-                this.onTransform.forEach(function(f) {
+                this.onTransform.forEach(function (f) {
                     f(event)
                 })
             }
@@ -828,9 +827,9 @@ export class AbstractScatter extends Throwable {
                 translate: delta,
                 scale: this.scale,
                 about: this.currentAbout,
-                type: null
+                type: null,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -842,9 +841,9 @@ export class AbstractScatter extends Throwable {
                 scale: this.scale,
                 about: this.currentAbout,
                 fast: false,
-                type: null
+                type: null,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -856,9 +855,9 @@ export class AbstractScatter extends Throwable {
                 translate: { x: dx, y: dy },
                 about: about,
                 fast: true,
-                type: null
+                type: null,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -869,9 +868,9 @@ export class AbstractScatter extends Throwable {
             let event = new ScatterEvent(this, {
                 scale: this.scale,
                 fast: false,
-                type: null
+                type: null,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -885,9 +884,9 @@ export class AbstractScatter extends Throwable {
                 scale: this.scale,
                 about: about,
                 fast: false,
-                type: null
+                type: null,
             })
-            this.onTransform.forEach(function(f) {
+            this.onTransform.forEach(function (f) {
                 f(event)
             })
         }
@@ -912,13 +911,14 @@ export class DOMScatterContainer {
      * @param {DOM node} debugCanvas - Shows debug infos about touches if not null
      */
     constructor(
-        element, {
+        element,
+        {
             stopEvents = 'auto',
             claimEvents = true,
             useCapture = true,
             capturePointerEvents = true,
             touchAction = 'none',
-            debugCanvas = null
+            debugCanvas = null,
         } = {}
     ) {
         this.onCapture = null
@@ -930,7 +930,7 @@ export class DOMScatterContainer {
             movement of scatter objects, the touchmove event has to be bound again.
             */
             if (Capabilities.isSafari) {
-                document.addEventListener('touchmove', event => this.preventPinch(event), false)
+                document.addEventListener('touchmove', (event) => this.preventPinch(event), false)
                 stopEvents = false
             } else {
                 stopEvents = true
@@ -945,11 +945,11 @@ export class DOMScatterContainer {
         this.delegate = new InteractionMapper(element, this, {
             useCapture,
             capturePointerEvents,
-            mouseWheelElement: window
+            mouseWheelElement: window,
         })
 
         if (debugCanvas !== null) {
-            requestAnimationFrame(dt => {
+            requestAnimationFrame((dt) => {
                 this.showTouches(dt, debugCanvas)
             })
         }
@@ -971,7 +971,7 @@ export class DOMScatterContainer {
             context.fill()
             context.stroke()
         }
-        requestAnimationFrame(dt => {
+        requestAnimationFrame((dt) => {
             this.showTouches(dt, canvas)
         })
     }
@@ -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,
@@ -1112,7 +1113,7 @@ export class DOMScatter extends AbstractScatter {
             scaleCloseBuffer = 0.05,
             useLowPassFilter = false,
             maxRotation = Angle.degree2radian(15),
-            minInteractionDistance = 200
+            minInteractionDistance = 200,
         } = {}
     ) {
         super({
@@ -1139,7 +1140,7 @@ export class DOMScatter extends AbstractScatter {
             onClose,
             useLowPassFilter,
             maxRotation,
-            minInteractionDistance
+            minInteractionDistance,
         })
         if (container == null || width == null || height == null) {
             throw new Error('Invalid value: null')
@@ -1167,7 +1168,7 @@ export class DOMScatter extends AbstractScatter {
             height: height,
             scale: startScale,
             rotation: this.startRotationDegrees,
-            transformOrigin: transformOrigin
+            transformOrigin: transformOrigin,
         }
         this.tapNodes = new Map()
 
@@ -1189,15 +1190,15 @@ export class DOMScatter extends AbstractScatter {
             button.className = 'interactiveElement'
             this.element.appendChild(button)
 
-            button.addEventListener('pointerdown', e => {
+            button.addEventListener('pointerdown', (e) => {
                 this.startResize(e)
             })
 
-            button.addEventListener('pointermove', e => {
+            button.addEventListener('pointermove', (e) => {
                 this.resize(e)
             })
 
-            button.addEventListener('pointerup', e => {
+            button.addEventListener('pointerup', (e) => {
                 this.stopResize(e)
             })
             this.resizeButton = button
@@ -1214,7 +1215,7 @@ export class DOMScatter extends AbstractScatter {
             scale: this.scale,
             x: this.x,
             y: this.y,
-            rotation: this.rotation
+            rotation: this.rotation,
         }
     }
 
@@ -1265,7 +1266,7 @@ export class DOMScatter extends AbstractScatter {
             top: rect.top - stage.top,
             left: rect.left - stage.left,
             width: rect.width,
-            height: rect.height
+            height: rect.height,
         }
     }
 
@@ -1273,10 +1274,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 }
@@ -1306,7 +1307,7 @@ export class DOMScatter extends AbstractScatter {
     set scale(scale) {
         TweenLite.set(this.element, {
             scale: scale,
-            transformOrigin: this.transformOrigin
+            transformOrigin: this.transformOrigin,
         })
         this._scale = scale
     }
@@ -1338,9 +1339,9 @@ export class DOMScatter extends AbstractScatter {
     hide() {
         TweenLite.to(this.element, 0.1, {
             display: 'none',
-            onComplete: e => {
+            onComplete: (e) => {
                 this.element.parentNode.removeChild(this.element)
-            }
+            },
         })
     }
 
@@ -1354,7 +1355,7 @@ export class DOMScatter extends AbstractScatter {
             x: p.x,
             y: p.y,
             rotation: rotationDegrees,
-            transformOrigin: this.transformOrigin
+            transformOrigin: this.transformOrigin,
         })
     }
 
@@ -1396,7 +1397,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 })
     }
 
@@ -1415,7 +1416,7 @@ export class DOMScatter extends AbstractScatter {
 
         let oldPostition = {
             x: this.element.getBoundingClientRect().left,
-            y: this.element.getBoundingClientRect().top
+            y: this.element.getBoundingClientRect().top,
         }
         this.bringToFront()
 
@@ -1423,7 +1424,7 @@ export class DOMScatter extends AbstractScatter {
 
         let newPostition = {
             x: this.element.getBoundingClientRect().left,
-            y: this.element.getBoundingClientRect().top
+            y: this.element.getBoundingClientRect().top,
         }
 
         let offset = Points.subtract(oldPostition, newPostition)
@@ -1468,7 +1469,7 @@ export class DOMScatter extends AbstractScatter {
             )
                 TweenLite.to(this.element, 0, {
                     width: this.element.offsetWidth + resizeW / this.scale,
-                    height: this.element.offsetHeight + resizeH / this.scale
+                    height: this.element.offsetHeight + resizeH / this.scale,
                 })
 
             this.oldX = e.clientX
@@ -1485,12 +1486,12 @@ export class DOMScatter extends AbstractScatter {
         let event = new CustomEvent('resizeEnded')
         let oldPostition = {
             x: this.element.getBoundingClientRect().left,
-            y: this.element.getBoundingClientRect().top
+            y: this.element.getBoundingClientRect().top,
         }
         this.element.style.transformOrigin = '50% 50%'
         let newPostition = {
             x: this.element.getBoundingClientRect().left,
-            y: this.element.getBoundingClientRect().top
+            y: this.element.getBoundingClientRect().top,
         }
         let offset = Points.subtract(oldPostition, newPostition)
 
@@ -1503,4 +1504,4 @@ export class DOMScatter extends AbstractScatter {
     }
 }
 
-DOMScatter.zIndex = 1000
+DOMScatter.zIndex = 1000

lib/uitest.js

@@ -43,7 +43,7 @@ export default class UITest {
                 timeScale: 1,
                 eventType: 'auto',
                 debug: false,
-                defaultInterval: null
+                defaultInterval: null,
             },
             opts
         )
@@ -54,7 +54,7 @@ export default class UITest {
             Object.assign(
                 {},
                 {
-                    paused: true
+                    paused: true,
                 },
                 this.opts
             )
@@ -172,7 +172,7 @@ export default class UITest {
                 element,
                 position,
                 timelinePosition,
-                opts
+                opts,
             })
 
         // opts
@@ -186,7 +186,7 @@ export default class UITest {
                 eventType: null,
                 context: window,
                 bubbles: true,
-                cancelable: true
+                cancelable: true,
             },
             opts
         )
@@ -199,7 +199,7 @@ export default class UITest {
         // timeline
         //--------------------
         this._timeline.addCallback(
-            position => {
+            (position) => {
                 // element
                 //--------------------
                 const elem = Util.extractElement(opts.context, element)
@@ -226,7 +226,7 @@ export default class UITest {
                 //--------------------
                 const eventOpts = {
                     bubbles: opts.bubbles,
-                    cancelable: opts.cancelable
+                    cancelable: opts.cancelable,
                 }
 
                 if (opts.eventTypes[0]) {
@@ -295,7 +295,7 @@ export default class UITest {
                 element,
                 position,
                 timelinePosition,
-                opts
+                opts,
             })
 
         // opts
@@ -312,7 +312,7 @@ export default class UITest {
                 eventTypes: this.resolveEvents(['down', 'move', 'up']),
                 context: window,
                 bubbles: true,
-                cancelable: true
+                cancelable: true,
             },
             opts
         )
@@ -320,7 +320,7 @@ export default class UITest {
         // timeline
         //--------------------
         this._timeline.addCallback(
-            position => {
+            (position) => {
                 // element
                 //--------------------
                 const elem = Util.extractElement(opts.context, element)
@@ -333,7 +333,7 @@ export default class UITest {
                 //--------------------
                 const eventOpts = {
                     bubbles: opts.bubbles,
-                    cancelable: opts.cancelable
+                    cancelable: opts.cancelable,
                 }
 
                 const gsOpts = {
@@ -376,7 +376,7 @@ export default class UITest {
                         if (opts.onComplete) {
                             opts.onComplete.call(this, event)
                         }
-                    }
+                    },
                 }
 
                 // to
@@ -431,7 +431,7 @@ export default class UITest {
                 element,
                 position,
                 timelinePosition,
-                opts
+                opts,
             })
 
         // opts
@@ -451,7 +451,7 @@ export default class UITest {
                 eventTypes: this.resolveEvents(['down', 'move', 'up']),
                 context: window,
                 bubbles: true,
-                cancelable: true
+                cancelable: true,
             },
             opts
         )
@@ -459,7 +459,7 @@ export default class UITest {
         // timeline
         //--------------------
         this._timeline.addCallback(
-            position => {
+            (position) => {
                 // element
                 //--------------------
                 const elem = Util.extractElement(opts.context, element)
@@ -511,7 +511,7 @@ export default class UITest {
                         bubbles: opts.bubbles,
                         cancelable: opts.cancelable,
                         pointerId: key,
-                        isPrimary: key === 0
+                        isPrimary: key === 0,
                     }
 
                     const gsOpts = {
@@ -554,7 +554,7 @@ export default class UITest {
                             if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
                                 opts.onComplete.call(this, event)
                             }
-                        }
+                        },
                     }
 
                     // to
@@ -689,7 +689,7 @@ export default class UITest {
         const data = []
 
         if (this.opts.eventType === 'pointer') {
-            events.forEach(it => {
+            events.forEach((it) => {
                 if (it === 'down') {
                     data.push('pointerdown')
                 } else if (it === 'move') {
@@ -699,7 +699,7 @@ export default class UITest {
                 }
             })
         } else if (this.opts.eventType === 'touch') {
-            events.forEach(it => {
+            events.forEach((it) => {
                 if (it === 'down') {
                     data.push('touchstart')
                 } else if (it === 'move') {
@@ -709,7 +709,7 @@ export default class UITest {
                 }
             })
         } else {
-            events.forEach(it => {
+            events.forEach((it) => {
                 if (it === 'down') {
                     data.push('mousedown')
                 } else if (it === 'move') {
@@ -797,11 +797,11 @@ class Util {
 
             if (Array.isArray(opts.bezier)) {
                 bezier = {
-                    values: opts.bezier.map(it => Util.extractPosition(it)),
-                    type: 'thru'
+                    values: opts.bezier.map((it) => Util.extractPosition(it)),
+                    type: 'thru',
                 }
             } else {
-                opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
+                opts.bezier.values = opts.bezier.values.map((it) => Util.extractPosition(it))
                 bezier = opts.bezier
             }
 
@@ -826,29 +826,29 @@ class Util {
         const objects = []
 
         if (opts.bezier) {
-            opts.bezier.forEach(it => {
+            opts.bezier.forEach((it) => {
                 let bezier = null
 
                 if (Array.isArray(it)) {
                     bezier = {
-                        values: it.map(it => Util.extractPosition(it)),
-                        type: 'thru'
+                        values: it.map((it) => Util.extractPosition(it)),
+                        type: 'thru',
                     }
                 } else {
-                    it.values = it.values.map(it => Util.extractPosition(it))
+                    it.values = it.values.map((it) => Util.extractPosition(it))
                     bezier = it
                 }
 
                 objects.push({
-                    bezier
+                    bezier,
                 })
             })
         } else {
-            opts.to.forEach(it => {
+            opts.to.forEach((it) => {
                 const to = Util.extractPosition(it)
                 objects.push({
                     x: to.x,
-                    y: to.y
+                    y: to.y,
                 })
             })
         }
@@ -945,13 +945,13 @@ class Event {
         const eventOpts = {
             bubbles: true,
             cancelable: true,
-            composed: false
+            composed: false,
         }
 
         // UIEventInit
         const uiEventOpts = {
             detail: 0,
-            view: window
+            view: window,
         }
 
         // MouseEvent
@@ -967,7 +967,7 @@ class Event {
             button: 0,
             buttons: 1,
             relatedTarget: null,
-            region: null
+            region: null,
         }
 
         // TouchEvent
@@ -978,7 +978,7 @@ class Event {
             ctrlKey: false,
             shiftKey: false,
             altKey: false,
-            metaKey: false
+            metaKey: false,
         }
 
         // PointerEvent
@@ -992,7 +992,7 @@ class Event {
             tiltY: 0,
             twist: 0,
             pointerType: 'touch',
-            isPrimary: true
+            isPrimary: true,
         }
 
         if (type.startsWith('pointer')) {

lib/utils.js

@@ -18,7 +18,7 @@ export function isEmpty(obj) {
  * See https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/21963136#21963136
  */
 export function uuid() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         let r = (Math.random() * 16) | 0,
             v = c == 'x' ? r : (r & 0x3) | 0x8
         return v.toString(16)
@@ -100,10 +100,10 @@ export function sample(population, k) {
 // Taken from: https://davidwalsh.name/essential-javascript-functions
 export function debounce(func, wait, immediate) {
     let timeout
-    return function() {
+    return function () {
         let context = this,
             args = arguments
-        let later = function() {
+        let later = function () {
             timeout = null
             if (!immediate) func.apply(context, args)
         }
@@ -247,14 +247,14 @@ export class Colors {
         // long version
         let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
         if (r) {
-            return r.slice(1, 4).map(x => {
+            return r.slice(1, 4).map((x) => {
                 return parseInt(x, 16)
             })
         }
         // short version
         r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
         if (r) {
-            return r.slice(1, 4).map(x => {
+            return r.slice(1, 4).map((x) => {
                 return 0x11 * parseInt(x, 16)
             })
         }
@@ -273,7 +273,7 @@ export class Colors {
         return {
             r: Math.round(lerp(rgb1.r, rgb2.r, amount)),
             g: Math.round(lerp(rgb1.g, rgb2.g, amount)),
-            b: Math.round(lerp(rgb1.b, rgb2.b, amount))
+            b: Math.round(lerp(rgb1.b, rgb2.b, amount)),
         }
     }
 
@@ -384,7 +384,7 @@ export class Points {
     static arc(p, alpha, radius) {
         return {
             x: p.x + radius * Math.cos(alpha),
-            y: p.y + radius * Math.sin(alpha)
+            y: p.y + radius * Math.sin(alpha),
         }
     }
 
@@ -411,19 +411,17 @@ export class Points {
     }
 
     static fromPageToNode(element, p) {
-        //    if (window.webkitConvertPointFromPageToNode) {
-        //             return window.webkitConvertPointFromPageToNode(element,
-        //                                                     new WebKitPoint(p.x, p.y))
-        //         }
-        return window.convertPointFromPageToNode(element, p.x, p.y)
+        if (window.webkitConvertPointFromPageToNode) {
+            return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y))
+        }
+        //return window.convertPointFromPageToNode(element, p.x, p.y)
     }
 
     static fromNodeToPage(element, p) {
-        //  if (window.webkitConvertPointFromNodeToPage) {
-        //             return window.webkitConvertPointFromNodeToPage(element,
-        //                                                     new WebKitPoint(p.x, p.y))
-        //         }
-        return window.convertPointFromNodeToPage(element, p.x, p.y)
+        if (window.webkitConvertPointFromNodeToPage) {
+            return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y))
+        }
+        //return window.convertPointFromNodeToPage(element, p.x, p.y)
     }
 }
 
@@ -447,7 +445,7 @@ export class Sets {
         const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
         const [smallest] = sets.splice(i, 1)
         const res = new Set()
-        for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val)
+        for (let val of smallest) if (sets.every((s) => s.has(val))) res.add(val)
         return res
     }
 
@@ -930,14 +928,14 @@ export class Strings {
     static toUpperCaseEachWord(str, delim = ' ') {
         return str
             .split(delim)
-            .map(v => v.toUpperCaseFirstChar())
+            .map((v) => v.toUpperCaseFirstChar())
             .join(delim)
     }
 
     static toLowerCaseEachWord(str, delim = ' ') {
         return str
             .split(delim)
-            .map(v => v.toLowerCaseFirstChar())
+            .map((v) => v.toLowerCaseFirstChar())
             .join(delim)
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iwmlib",
-    "version": "1.1.2",
+    "version": "2.0.0-beta.0",
     "description": "An Open Source library for multi-touch, WebGL powered applications.",
     "main": "index.js",
     "directories": {
@@ -28,33 +28,33 @@
     "license": "LGPL-3.0-or-later",
     "devDependencies": {
         "@pixi/jsdoc-template": "^2.5.1",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.9.0",
-        "eslint-plugin-prettier": "^3.1.2",
-        "fs-extra": "^8.0.1",
+        "eslint": "^8.23.1",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "fs-extra": "^10.1.0",
         "gulp": "^4.0.2",
         "gulp-concat": "^2.6.1",
-        "gulp-prettier": "^2.3.0",
-        "gulp-rename": "^1.4.0",
+        "gulp-prettier": "^4.0.0",
+        "gulp-rename": "^2.0.0",
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.2",
-        "htmlhint": "^0.11.0",
-        "prettier": "^1.19.1",
-        "puppeteer": "^1.20.0",
-        "stylelint": "^11.1.1",
-        "stylelint-config-standard": "^19.0.0"
+        "htmlhint": "^1.1.4",
+        "prettier": "^2.7.1",
+        "puppeteer": "^17.1.3",
+        "stylelint": "^14.12.0",
+        "stylelint-config-standard": "^28.0.0"
     },
     "dependencies": {
         "gsap": "^2.1.3",
         "hammerjs": "^2.0.8",
         "optimal-select": "^4.0.1",
         "pixi-compressed-textures": "^2.0.5",
-        "pixi-ease": "^2.4.2",
-        "pixi-filters": "^3.0.3",
+        "pixi-ease": "^3.0.7",
+        "pixi-filters": "^4.2.0",
         "pixi-particles": "^4.2.0",
-        "pixi-projection": "^0.3.7",
+        "pixi-projection": "^0.4.4",
         "pixi-viewport": "^4.8.0",
-        "pixi.js": "^5.2.1",
+        "pixi.js": "^6.5.3",
         "propagating-hammerjs": "^1.4.7"
     }
 }