From 7a5bc222fd916a7f12c418880899ddac9086b19b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tjark=20M=C3=BCller?= <t.mueller@iwm-tuebingen.de>
Date: Thu, 4 May 2023 13:28:58 +0200
Subject: [PATCH 01/13] documented/ solved svg rotation bug

---
 lib/flippable.html | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/lib/flippable.html b/lib/flippable.html
index add8b31..db361eb 100644
--- a/lib/flippable.html
+++ b/lib/flippable.html
@@ -17,19 +17,27 @@
                 <div class="flipFace back" style="visibility:hidden;"></div>
             </div>
                 <!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
-            <svg class="flipButton backBtn" style="visibility:hidden;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
-                <g stroke-width="8" stroke="white">
-                    <circle  cx="50" cy="50" r="44" fill="gray" />
-                    <line x1="30" y1="30" x2="70" y2="70"  />
-                    <line x1="30" y1="70" x2="70" y2="30"  />
-                </g>
-            </svg>
+                <!-- SVG viewPort interferes with DOMMatrix calculations: see  
+                    https://stackoverflow.com/questions/70696387/how-to-get-transform-matrix-of-a-dom-element-->
+            <div class="flipButton backBtn" style="visibility:hidden;">
+                <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
+                    <g stroke-width="8" stroke="white">
+                        <circle  cx="50" cy="50" r="44" fill="gray" />
+                        <line x1="30" y1="30" x2="70" y2="70"  />
+                        <line x1="30" y1="70" x2="70" y2="30"  />
+                    </g>
+                </svg>
+            </div>
+            
 
-            <svg class="flipButton infoBtn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
-                <circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
-                <circle cx="50" cy="32" r="7" fill="white" />
-                <line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
-            </svg>
+            <div class="flipButton infoBtn">
+                <svg  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"  style="width:inherit; height:inherit;">
+                    <circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
+                    <circle cx="50" cy="32" r="7" fill="white" />
+                    <line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
+                </svg>
+            </div>
+            
         </div>
     </template>
 
@@ -46,6 +54,10 @@ via a HTML template that defines the placeholders for front and back views. The
 style file "css/flipeffect.css" holds reasonable default styles for this kind of
 templates.
 </p>
+<p>
+The SVG buttons have to be wrapped in an HTML DOM element which handles events. Otherwise, 
+the viewbox of the SVG will interfere with the coordinate transformation.
+</p>
 <pre><code>
     &lt;template id="flipTemplate"&gt;
         &lt;div class="flipWrapper"&gt;

From d45b3e68dd40b40dc706f9bfd5cbd9478ea8b529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tjark=20M=C3=BCller?= <t.mueller@iwm-tuebingen.de>
Date: Thu, 4 May 2023 13:32:47 +0200
Subject: [PATCH 02/13] fixed rollup

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a95b291..e7e0d28 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
         "test-eventlistener-hammerjs-destroy": "node ./test/tests/eventlistener/hammerjs-destroy.js",
         "test-eventlistener-interactionmapper": "node ./test/tests/eventlistener/interactionmapper.js",
         "test-eventlistener-interactionmapper-off": "node ./test/tests/eventlistener/interactionmapper-off.js",
-        "build": "rollup --config ./rollup.config.js",
+        "build": "rollup --config --bundleConfigAsCjs ./rollup.config.js",
         "watch": "rollup --watch --config ./rollup.config.js",
         "3rdparty": "gulp",
         "prettier": "gulp prettify",

From 12eb712fcefe94bb93db6e246a06d34d75352c4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tjark=20M=C3=BCller?= <t.mueller@iwm-tuebingen.de>
Date: Fri, 12 May 2023 12:30:17 +0200
Subject: [PATCH 03/13] added fix for viewBox rotation bug

---
 lib/flippable.html | 113 ++++++++++++++++++++++++---------------------
 1 file changed, 61 insertions(+), 52 deletions(-)

diff --git a/lib/flippable.html b/lib/flippable.html
index add8b31..a4ec6a7 100644
--- a/lib/flippable.html
+++ b/lib/flippable.html
@@ -1,35 +1,43 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Flippable Doctest</title>
-	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
-	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../dist/iwmlib.3rdparty.js"></script>
-	<script src="../dist/iwmlib.js"></script>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <title>Flippable Doctest</title>
+        <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
+        <link rel="stylesheet" href="../css/doctest.css" />
+        <script src="./3rdparty/highlight/highlight.pack.js"></script>
+        <script src="../dist/iwmlib.3rdparty.js"></script>
+        <script src="../dist/iwmlib.js"></script>
 
-    <link rel="stylesheet" href="../css/flipeffect.css">
-	<template id="flipTemplate">
-        <div class="flipWrapper">
-            <div class="flipCard">
-                <div class="flipFace front"></div>
-                <div class="flipFace back" style="visibility:hidden;"></div>
-            </div>
+        <link rel="stylesheet" href="../css/flipeffect.css" />
+        <template id="flipTemplate">
+            <div class="flipWrapper">
+                <div class="flipCard">
+                    <div class="flipFace front"></div>
+                    <div class="flipFace back" style="visibility: hidden"></div>
+                </div>
                 <!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
-            <svg class="flipButton backBtn" style="visibility:hidden;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
-                <g stroke-width="8" stroke="white">
-                    <circle  cx="50" cy="50" r="44" fill="gray" />
-                    <line x1="30" y1="30" x2="70" y2="70"  />
-                    <line x1="30" y1="70" x2="70" y2="30"  />
-                </g>
-            </svg>
+                <!-- SVG viewPort interferes with DOMMatrix calculations: see  
+                    https://stackoverflow.com/questions/70696387/how-to-get-transform-matrix-of-a-dom-element-->
+            <div class="flipButton backBtn" style="visibility:hidden;">
+                <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
+                    <g stroke-width="8" stroke="white">
+                        <circle  cx="50" cy="50" r="44" fill="gray" />
+                        <line x1="30" y1="30" x2="70" y2="70"  />
+                        <line x1="30" y1="70" x2="70" y2="30"  />
+                    </g>
+                </svg>
+            </div>
+            
 
-            <svg class="flipButton infoBtn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
-                <circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
-                <circle cx="50" cy="32" r="7" fill="white" />
-                <line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
-            </svg>
+            <div class="flipButton infoBtn">
+                <svg  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"  style="width:inherit; height:inherit;">
+                    <circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
+                    <circle cx="50" cy="32" r="7" fill="white" />
+                    <line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
+                </svg>
+            </div>
+            
         </div>
     </template>
 
@@ -46,6 +54,10 @@ via a HTML template that defines the placeholders for front and back views. The
 style file "css/flipeffect.css" holds reasonable default styles for this kind of
 templates.
 </p>
+<p>
+The SVG buttons have to be wrapped in an HTML DOM element which handles events. Otherwise, 
+the viewbox of the SVG will interfere with the coordinate transformation.
+</p>
 <pre><code>
     &lt;template id="flipTemplate"&gt;
         &lt;div class="flipWrapper"&gt;
@@ -59,27 +71,24 @@ templates.
     &lt;/template&gt;
 </code>
 </pre>
-<h3>
-	Example
-</h3>
-<main id="main" style="border: 1px solid gray; position: relative; height: 256px;" >
-
-</main>
-<script class="doctest">
-let scatterContainer = new DOMScatterContainer(main, {stopEvents: false})
-if (Capabilities.supportsTemplate()) {
-
-    let flip = new DOMFlip(scatterContainer,
-                            flipTemplate,
-                            new ImageLoader('./examples/king.jpeg'),
-                            new ImageLoader('./examples/women.jpeg'),
-                            { tapDelegateFactory: CardWrapper, preloadBack: true})
-    flip.load().then((flip) => {
-        flip.centerAt({ x: 150, y: 120})
-    })
-}
-else {
-    alert("Templates not supported, use Edge, Chrome, Safari or Firefox.")
-}
-</script>
-</body>
+        <h3>Example</h3>
+        <main id="main" style="border: 1px solid gray; position: relative; height: 256px"></main>
+        <script class="doctest">
+            let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
+            if (Capabilities.supportsTemplate()) {
+                let flip = new DOMFlip(
+                    scatterContainer,
+                    flipTemplate,
+                    new ImageLoader('./examples/king.jpeg'),
+                    new ImageLoader('./examples/women.jpeg'),
+                    { tapDelegateFactory: CardWrapper, preloadBack: true }
+                )
+                flip.load().then((flip) => {
+                    flip.centerAt({ x: 150, y: 120 })
+                })
+            } else {
+                alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
+            }
+        </script>
+    </body>
+</html>

From a748d05c38eb67ba332bb2f09a9c853e2787509c Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Thu, 1 Jun 2023 18:19:30 +0200
Subject: [PATCH 04/13] Fixed problem with scrolling text in card drawers.

---
 dist/iwmlib.js      | 122 +++++++++++++++++++++++---------------------
 dist/iwmlib.pixi.js | 112 ++++++++++++++++++++--------------------
 lib/scatter.js      | 120 ++++++++++++++++++++++---------------------
 3 files changed, 183 insertions(+), 171 deletions(-)

diff --git a/dist/iwmlib.js b/dist/iwmlib.js
index 1482c31..ba986b3 100644
--- a/dist/iwmlib.js
+++ b/dist/iwmlib.js
@@ -3215,7 +3215,7 @@
             throwVisibility = 44,
             throwDamping = 0.95,
             autoThrow = true,
-            onThrowFinished = null,
+            onThrowFinished = null
         } = {}) {
             this.movableX = movableX;
             this.movableY = movableY;
@@ -3248,7 +3248,7 @@
                     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) {
@@ -3310,7 +3310,7 @@
                 if (nextLength > prevLength) {
                     let factor = nextLength / prevLength;
                     next = Points$1.multiplyScalar(next, 1 / factor);
-                    console.log('Prevent acceleration', factor, this.velocity, next);
+                    // console.log('Prevent acceleration', factor, this.velocity, next)
                 }
                 this.velocity = next;
                 let d = Points$1.multiplyScalar(this.velocity, dt);
@@ -3346,7 +3346,7 @@
             let next = Points$1.multiplyScalar(velocity, this.throwDamping);
             return {
                 x: this.movableX ? next.x : 0,
-                y: this.movableY ? next.y : 0,
+                y: this.movableY ? next.y : 0
             }
         }
 
@@ -3391,7 +3391,7 @@
             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')
@@ -3406,7 +3406,7 @@
                 throwVisibility,
                 throwDamping,
                 autoThrow,
-                onThrowFinished,
+                onThrowFinished
             });
 
             /**
@@ -3481,7 +3481,7 @@
 
         _callCloseCallbacks() {
             if (this.onClose) {
-                this.onClose.forEach((callback) => callback(this));
+                this.onClose.forEach(callback => callback(this));
             }
         }
 
@@ -3501,6 +3501,9 @@
             let delta = interaction.delta();
 
             if (delta != null) {
+                /* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
+                has to be tested */
+                this.addVelocity(delta);
                 let rotate = delta.rotate;
                 let zoom = delta.zoom;
                 if (this.maxRotation != null) {
@@ -3519,9 +3522,10 @@
                     zoomDelta *= ratio;
                     zoom = 1 + zoomDelta;
                 }
-
                 this.transform(delta, zoom, rotate, delta.about);
-                this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+                /* uo: This is too late an dangerous. transform sometimes modifies delta
+                this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+                */
 
                 if (zoom != 1) this.interactionAnchor = delta.about;
             }
@@ -3632,11 +3636,11 @@
                 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,
+                        animate: 0.4
                     });
                 }
         }
@@ -3658,12 +3662,12 @@
                         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);
@@ -3692,7 +3696,7 @@
                         scale: scale,
                         delay: delay,
                         onComplete: onComplete,
-                        onUpdate: this.onZoomed.bind(this),
+                        onUpdate: this.onZoomed.bind(this)
                     });
                 } else {
                     this.scale = scale;
@@ -3710,7 +3714,7 @@
         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 };
@@ -3725,9 +3729,9 @@
                         rotate: 0,
                         about: anchor,
                         fast: false,
-                        type: UPDATE,
+                        type: UPDATE
                     });
-                    this.onTransform.forEach(function (f) {
+                    this.onTransform.forEach(function(f) {
                         f(event);
                     });
                 }
@@ -3756,9 +3760,9 @@
                     translate: delta,
                     scale: newScale,
                     rotate: rotate,
-                    about: anchor,
+                    about: anchor
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -3824,7 +3828,7 @@
                 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
@@ -3881,9 +3885,9 @@
                     rotate: 0,
                     about: null,
                     fast: false,
-                    type: START,
+                    type: START
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -3899,13 +3903,13 @@
         }
 
         onEnd(event, interaction) {
-            console.log('Scatter.onEnd', this.dragging);
+            //console.log('Scatter.onEnd', this.dragging)
             if (interaction.isFinished()) {
                 this.endGesture(interaction);
                 this.dragging = false;
                 for (let key of interaction.ended.keys()) {
                     if (interaction.isTap(key)) {
-                        console.log('Scatter.isTap');
+                        //console.log('Scatter.isTap')
                         let point = interaction.ended.get(key);
                         this.onTap(event, interaction, point);
                     }
@@ -3917,9 +3921,9 @@
                         rotate: 0,
                         about: null,
                         fast: false,
-                        type: END,
+                        type: END
                     });
-                    this.onTransform.forEach(function (f) {
+                    this.onTransform.forEach(function(f) {
                         f(event);
                     });
                 }
@@ -3933,7 +3937,7 @@
         //onTap(event, interaction, point) {}
 
         onTap(event, interaction, point) {
-            console.log('AbstractScatter.onTap', this.tapDelegate, interaction);
+            //console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
             if (this.tapDelegate) {
                 Events.stop(event);
                 this.tapDelegate.tap(event, 'scatter');
@@ -3947,9 +3951,9 @@
                     translate: delta,
                     scale: this.scale,
                     about: this.currentAbout,
-                    type: null,
+                    type: null
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -3961,9 +3965,9 @@
                     scale: this.scale,
                     about: this.currentAbout,
                     fast: false,
-                    type: null,
+                    type: null
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -3975,9 +3979,9 @@
                     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);
                 });
             }
@@ -3988,9 +3992,9 @@
                 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);
                 });
             }
@@ -4004,9 +4008,9 @@
                     scale: this.scale,
                     about: about,
                     fast: false,
-                    type: null,
+                    type: null
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -4038,7 +4042,7 @@
                 useCapture = true,
                 capturePointerEvents = true,
                 touchAction = 'none',
-                debugCanvas = null,
+                debugCanvas = null
             } = {}
         ) {
             this.onCapture = null;
@@ -4050,7 +4054,7 @@
                 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;
@@ -4065,11 +4069,11 @@
             this.delegate = new InteractionMapper$1(element, this, {
                 useCapture,
                 capturePointerEvents,
-                mouseWheelElement: window,
+                mouseWheelElement: window
             });
 
             if (debugCanvas !== null) {
-                requestAnimationFrame((dt) => {
+                requestAnimationFrame(dt => {
                     this.showTouches(dt, debugCanvas);
                 });
             }
@@ -4091,7 +4095,7 @@
                 context.fill();
                 context.stroke();
             }
-            requestAnimationFrame((dt) => {
+            requestAnimationFrame(dt => {
                 this.showTouches(dt, canvas);
             });
         }
@@ -4233,7 +4237,7 @@
                 scaleCloseBuffer = 0.05,
                 useLowPassFilter = false,
                 maxRotation = Angle.degree2radian(15),
-                minInteractionDistance = 200,
+                minInteractionDistance = 200
             } = {}
         ) {
             super({
@@ -4260,7 +4264,7 @@
                 onClose,
                 useLowPassFilter,
                 maxRotation,
-                minInteractionDistance,
+                minInteractionDistance
             });
             if (container == null || width == null || height == null) {
                 throw new Error('Invalid value: null')
@@ -4288,7 +4292,7 @@
                 height: height,
                 scale: startScale,
                 rotation: this.startRotationDegrees,
-                transformOrigin: transformOrigin,
+                transformOrigin: transformOrigin
             };
             this.tapNodes = new Map();
 
@@ -4310,15 +4314,15 @@
                 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;
@@ -4335,7 +4339,7 @@
                 scale: this.scale,
                 x: this.x,
                 y: this.y,
-                rotation: this.rotation,
+                rotation: this.rotation
             }
         }
 
@@ -4386,7 +4390,7 @@
                 top: rect.top - stage.top,
                 left: rect.left - stage.left,
                 width: rect.width,
-                height: rect.height,
+                height: rect.height
             }
         }
 
@@ -4427,7 +4431,7 @@
         set scale(scale) {
             TweenLite.set(this.element, {
                 scale: scale,
-                transformOrigin: this.transformOrigin,
+                transformOrigin: this.transformOrigin
             });
             this._scale = scale;
         }
@@ -4459,9 +4463,9 @@
         hide() {
             TweenLite.to(this.element, 0.1, {
                 display: 'none',
-                onComplete: (e) => {
+                onComplete: e => {
                     this.element.parentNode.removeChild(this.element);
-                },
+                }
             });
         }
 
@@ -4475,7 +4479,7 @@
                 x: p.x,
                 y: p.y,
                 rotation: rotationDegrees,
-                transformOrigin: this.transformOrigin,
+                transformOrigin: this.transformOrigin
             });
         }
 
@@ -4536,7 +4540,7 @@
 
             let oldPostition = {
                 x: this.element.getBoundingClientRect().left,
-                y: this.element.getBoundingClientRect().top,
+                y: this.element.getBoundingClientRect().top
             };
             this.bringToFront();
 
@@ -4544,7 +4548,7 @@
 
             let newPostition = {
                 x: this.element.getBoundingClientRect().left,
-                y: this.element.getBoundingClientRect().top,
+                y: this.element.getBoundingClientRect().top
             };
 
             let offset = Points$1.subtract(oldPostition, newPostition);
@@ -4589,7 +4593,7 @@
                 )
                     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;
@@ -4606,12 +4610,12 @@
             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$1.subtract(oldPostition, newPostition);
 
diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js
index 7cdf1fa..4e1ab39 100644
--- a/dist/iwmlib.pixi.js
+++ b/dist/iwmlib.pixi.js
@@ -6778,7 +6778,7 @@
             throwVisibility = 44,
             throwDamping = 0.95,
             autoThrow = true,
-            onThrowFinished = null,
+            onThrowFinished = null
         } = {}) {
             this.movableX = movableX;
             this.movableY = movableY;
@@ -6811,7 +6811,7 @@
                     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) {
@@ -6873,7 +6873,7 @@
                 if (nextLength > prevLength) {
                     let factor = nextLength / prevLength;
                     next = Points.multiplyScalar(next, 1 / factor);
-                    console.log('Prevent acceleration', factor, this.velocity, next);
+                    // console.log('Prevent acceleration', factor, this.velocity, next)
                 }
                 this.velocity = next;
                 let d = Points.multiplyScalar(this.velocity, dt);
@@ -6909,7 +6909,7 @@
             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
             }
         }
 
@@ -6954,7 +6954,7 @@
             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')
@@ -6969,7 +6969,7 @@
                 throwVisibility,
                 throwDamping,
                 autoThrow,
-                onThrowFinished,
+                onThrowFinished
             });
 
             /**
@@ -7044,7 +7044,7 @@
 
         _callCloseCallbacks() {
             if (this.onClose) {
-                this.onClose.forEach((callback) => callback(this));
+                this.onClose.forEach(callback => callback(this));
             }
         }
 
@@ -7064,6 +7064,9 @@
             let delta = interaction.delta();
 
             if (delta != null) {
+                /* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
+                has to be tested */
+                this.addVelocity(delta);
                 let rotate = delta.rotate;
                 let zoom = delta.zoom;
                 if (this.maxRotation != null) {
@@ -7082,9 +7085,10 @@
                     zoomDelta *= ratio;
                     zoom = 1 + zoomDelta;
                 }
-
                 this.transform(delta, zoom, rotate, delta.about);
-                this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+                /* uo: This is too late an dangerous. transform sometimes modifies delta
+                this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+                */
 
                 if (zoom != 1) this.interactionAnchor = delta.about;
             }
@@ -7195,11 +7199,11 @@
                 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,
+                        animate: 0.4
                     });
                 }
         }
@@ -7221,12 +7225,12 @@
                         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);
@@ -7255,7 +7259,7 @@
                         scale: scale,
                         delay: delay,
                         onComplete: onComplete,
-                        onUpdate: this.onZoomed.bind(this),
+                        onUpdate: this.onZoomed.bind(this)
                     });
                 } else {
                     this.scale = scale;
@@ -7273,7 +7277,7 @@
         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 };
@@ -7288,9 +7292,9 @@
                         rotate: 0,
                         about: anchor,
                         fast: false,
-                        type: UPDATE,
+                        type: UPDATE
                     });
-                    this.onTransform.forEach(function (f) {
+                    this.onTransform.forEach(function(f) {
                         f(event);
                     });
                 }
@@ -7319,9 +7323,9 @@
                     translate: delta,
                     scale: newScale,
                     rotate: rotate,
-                    about: anchor,
+                    about: anchor
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -7387,7 +7391,7 @@
                 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
@@ -7444,9 +7448,9 @@
                     rotate: 0,
                     about: null,
                     fast: false,
-                    type: START,
+                    type: START
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -7462,13 +7466,13 @@
         }
 
         onEnd(event, interaction) {
-            console.log('Scatter.onEnd', this.dragging);
+            //console.log('Scatter.onEnd', this.dragging)
             if (interaction.isFinished()) {
                 this.endGesture(interaction);
                 this.dragging = false;
                 for (let key of interaction.ended.keys()) {
                     if (interaction.isTap(key)) {
-                        console.log('Scatter.isTap');
+                        //console.log('Scatter.isTap')
                         let point = interaction.ended.get(key);
                         this.onTap(event, interaction, point);
                     }
@@ -7480,9 +7484,9 @@
                         rotate: 0,
                         about: null,
                         fast: false,
-                        type: END,
+                        type: END
                     });
-                    this.onTransform.forEach(function (f) {
+                    this.onTransform.forEach(function(f) {
                         f(event);
                     });
                 }
@@ -7496,7 +7500,7 @@
         //onTap(event, interaction, point) {}
 
         onTap(event, interaction, point) {
-            console.log('AbstractScatter.onTap', this.tapDelegate, interaction);
+            //console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
             if (this.tapDelegate) {
                 Events$1.stop(event);
                 this.tapDelegate.tap(event, 'scatter');
@@ -7510,9 +7514,9 @@
                     translate: delta,
                     scale: this.scale,
                     about: this.currentAbout,
-                    type: null,
+                    type: null
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -7524,9 +7528,9 @@
                     scale: this.scale,
                     about: this.currentAbout,
                     fast: false,
-                    type: null,
+                    type: null
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -7538,9 +7542,9 @@
                     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);
                 });
             }
@@ -7551,9 +7555,9 @@
                 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);
                 });
             }
@@ -7567,9 +7571,9 @@
                     scale: this.scale,
                     about: about,
                     fast: false,
-                    type: null,
+                    type: null
                 });
-                this.onTransform.forEach(function (f) {
+                this.onTransform.forEach(function(f) {
                     f(event);
                 });
             }
@@ -7616,7 +7620,7 @@
                 scaleCloseBuffer = 0.05,
                 useLowPassFilter = false,
                 maxRotation = Angle.degree2radian(15),
-                minInteractionDistance = 200,
+                minInteractionDistance = 200
             } = {}
         ) {
             super({
@@ -7643,7 +7647,7 @@
                 onClose,
                 useLowPassFilter,
                 maxRotation,
-                minInteractionDistance,
+                minInteractionDistance
             });
             if (container == null || width == null || height == null) {
                 throw new Error('Invalid value: null')
@@ -7671,7 +7675,7 @@
                 height: height,
                 scale: startScale,
                 rotation: this.startRotationDegrees,
-                transformOrigin: transformOrigin,
+                transformOrigin: transformOrigin
             };
             this.tapNodes = new Map();
 
@@ -7693,15 +7697,15 @@
                 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;
@@ -7718,7 +7722,7 @@
                 scale: this.scale,
                 x: this.x,
                 y: this.y,
-                rotation: this.rotation,
+                rotation: this.rotation
             }
         }
 
@@ -7769,7 +7773,7 @@
                 top: rect.top - stage.top,
                 left: rect.left - stage.left,
                 width: rect.width,
-                height: rect.height,
+                height: rect.height
             }
         }
 
@@ -7810,7 +7814,7 @@
         set scale(scale) {
             TweenLite.set(this.element, {
                 scale: scale,
-                transformOrigin: this.transformOrigin,
+                transformOrigin: this.transformOrigin
             });
             this._scale = scale;
         }
@@ -7842,9 +7846,9 @@
         hide() {
             TweenLite.to(this.element, 0.1, {
                 display: 'none',
-                onComplete: (e) => {
+                onComplete: e => {
                     this.element.parentNode.removeChild(this.element);
-                },
+                }
             });
         }
 
@@ -7858,7 +7862,7 @@
                 x: p.x,
                 y: p.y,
                 rotation: rotationDegrees,
-                transformOrigin: this.transformOrigin,
+                transformOrigin: this.transformOrigin
             });
         }
 
@@ -7919,7 +7923,7 @@
 
             let oldPostition = {
                 x: this.element.getBoundingClientRect().left,
-                y: this.element.getBoundingClientRect().top,
+                y: this.element.getBoundingClientRect().top
             };
             this.bringToFront();
 
@@ -7927,7 +7931,7 @@
 
             let newPostition = {
                 x: this.element.getBoundingClientRect().left,
-                y: this.element.getBoundingClientRect().top,
+                y: this.element.getBoundingClientRect().top
             };
 
             let offset = Points.subtract(oldPostition, newPostition);
@@ -7972,7 +7976,7 @@
                 )
                     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;
@@ -7989,12 +7993,12 @@
             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);
 
diff --git a/lib/scatter.js b/lib/scatter.js
index c75a3d7..efaada1 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -95,7 +95,7 @@ class Throwable {
         throwVisibility = 44,
         throwDamping = 0.95,
         autoThrow = true,
-        onThrowFinished = null,
+        onThrowFinished = null
     } = {}) {
         this.movableX = movableX
         this.movableY = movableY
@@ -128,7 +128,7 @@ 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) {
@@ -190,7 +190,7 @@ class Throwable {
             if (nextLength > prevLength) {
                 let factor = nextLength / prevLength
                 next = Points.multiplyScalar(next, 1 / factor)
-                console.log('Prevent acceleration', factor, this.velocity, next)
+                // console.log('Prevent acceleration', factor, this.velocity, next)
             }
             this.velocity = next
             let d = Points.multiplyScalar(this.velocity, dt)
@@ -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,6 +381,9 @@ export class AbstractScatter extends Throwable {
         let delta = interaction.delta()
 
         if (delta != null) {
+            /* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
+            has to be tested */
+            this.addVelocity(delta)
             let rotate = delta.rotate
             let zoom = delta.zoom
             if (this.maxRotation != null) {
@@ -399,9 +402,10 @@ export class AbstractScatter extends Throwable {
                 zoomDelta *= ratio
                 zoom = 1 + zoomDelta
             }
-
             this.transform(delta, zoom, rotate, delta.about)
+            /* uo: This is too late an dangerous. transform sometimes modifies delta
             this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
+            */
 
             if (zoom != 1) this.interactionAnchor = delta.about
         }
@@ -512,11 +516,11 @@ 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,
+                    animate: 0.4
                 })
             }
     }
@@ -538,12 +542,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)
@@ -572,7 +576,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
@@ -590,7 +594,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 }
@@ -605,9 +609,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)
                 })
             }
@@ -636,9 +640,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)
             })
         }
@@ -704,7 +708,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
@@ -761,9 +765,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)
             })
         }
@@ -779,13 +783,13 @@ export class AbstractScatter extends Throwable {
     }
 
     onEnd(event, interaction) {
-        console.log('Scatter.onEnd', this.dragging)
+        //console.log('Scatter.onEnd', this.dragging)
         if (interaction.isFinished()) {
             this.endGesture(interaction)
             this.dragging = false
             for (let key of interaction.ended.keys()) {
                 if (interaction.isTap(key)) {
-                    console.log('Scatter.isTap')
+                    //console.log('Scatter.isTap')
                     let point = interaction.ended.get(key)
                     this.onTap(event, interaction, point)
                 }
@@ -797,9 +801,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)
                 })
             }
@@ -813,7 +817,7 @@ export class AbstractScatter extends Throwable {
     //onTap(event, interaction, point) {}
 
     onTap(event, interaction, point) {
-        console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
+        //console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
         if (this.tapDelegate) {
             Events.stop(event)
             this.tapDelegate.tap(event, 'scatter')
@@ -827,9 +831,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)
             })
         }
@@ -841,9 +845,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)
             })
         }
@@ -855,9 +859,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)
             })
         }
@@ -868,9 +872,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)
             })
         }
@@ -884,9 +888,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)
             })
         }
@@ -918,7 +922,7 @@ export class DOMScatterContainer {
             useCapture = true,
             capturePointerEvents = true,
             touchAction = 'none',
-            debugCanvas = null,
+            debugCanvas = null
         } = {}
     ) {
         this.onCapture = null
@@ -930,7 +934,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 +949,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 +975,7 @@ export class DOMScatterContainer {
             context.fill()
             context.stroke()
         }
-        requestAnimationFrame((dt) => {
+        requestAnimationFrame(dt => {
             this.showTouches(dt, canvas)
         })
     }
@@ -1113,7 +1117,7 @@ export class DOMScatter extends AbstractScatter {
             scaleCloseBuffer = 0.05,
             useLowPassFilter = false,
             maxRotation = Angle.degree2radian(15),
-            minInteractionDistance = 200,
+            minInteractionDistance = 200
         } = {}
     ) {
         super({
@@ -1140,7 +1144,7 @@ export class DOMScatter extends AbstractScatter {
             onClose,
             useLowPassFilter,
             maxRotation,
-            minInteractionDistance,
+            minInteractionDistance
         })
         if (container == null || width == null || height == null) {
             throw new Error('Invalid value: null')
@@ -1168,7 +1172,7 @@ export class DOMScatter extends AbstractScatter {
             height: height,
             scale: startScale,
             rotation: this.startRotationDegrees,
-            transformOrigin: transformOrigin,
+            transformOrigin: transformOrigin
         }
         this.tapNodes = new Map()
 
@@ -1190,15 +1194,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
@@ -1215,7 +1219,7 @@ export class DOMScatter extends AbstractScatter {
             scale: this.scale,
             x: this.x,
             y: this.y,
-            rotation: this.rotation,
+            rotation: this.rotation
         }
     }
 
@@ -1266,7 +1270,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
         }
     }
 
@@ -1307,7 +1311,7 @@ export class DOMScatter extends AbstractScatter {
     set scale(scale) {
         TweenLite.set(this.element, {
             scale: scale,
-            transformOrigin: this.transformOrigin,
+            transformOrigin: this.transformOrigin
         })
         this._scale = scale
     }
@@ -1339,9 +1343,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)
-            },
+            }
         })
     }
 
@@ -1355,7 +1359,7 @@ export class DOMScatter extends AbstractScatter {
             x: p.x,
             y: p.y,
             rotation: rotationDegrees,
-            transformOrigin: this.transformOrigin,
+            transformOrigin: this.transformOrigin
         })
     }
 
@@ -1416,7 +1420,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()
 
@@ -1424,7 +1428,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)
@@ -1469,7 +1473,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
@@ -1486,12 +1490,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)
 

From 1e6bee007ee487ad0d0fabfad65baea8bc8dce5e Mon Sep 17 00:00:00 2001
From: Sebastian Kupke <s.kupke@iwm-tuebingen.de>
Date: Tue, 6 Jun 2023 14:24:58 +0200
Subject: [PATCH 05/13] Fixed html double code

---
 lib/flippable.html | 36 ------------------------------------
 1 file changed, 36 deletions(-)

diff --git a/lib/flippable.html b/lib/flippable.html
index bd45f11..a4ec6a7 100644
--- a/lib/flippable.html
+++ b/lib/flippable.html
@@ -1,13 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <title>Flippable Doctest</title>
-        <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
-        <link rel="stylesheet" href="../css/doctest.css" />
-        <script src="./3rdparty/highlight/highlight.pack.js"></script>
-        <script src="../dist/iwmlib.3rdparty.js"></script>
-        <script src="../dist/iwmlib.js"></script>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Flippable Doctest</title>
@@ -17,13 +9,6 @@
         <script src="../dist/iwmlib.3rdparty.js"></script>
         <script src="../dist/iwmlib.js"></script>
 
-        <link rel="stylesheet" href="../css/flipeffect.css" />
-        <template id="flipTemplate">
-            <div class="flipWrapper">
-                <div class="flipCard">
-                    <div class="flipFace front"></div>
-                    <div class="flipFace back" style="visibility: hidden"></div>
-                </div>
         <link rel="stylesheet" href="../css/flipeffect.css" />
         <template id="flipTemplate">
             <div class="flipWrapper">
@@ -106,25 +91,4 @@ the viewbox of the SVG will interfere with the coordinate transformation.
             }
         </script>
     </body>
-</html>
-        <h3>Example</h3>
-        <main id="main" style="border: 1px solid gray; position: relative; height: 256px"></main>
-        <script class="doctest">
-            let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
-            if (Capabilities.supportsTemplate()) {
-                let flip = new DOMFlip(
-                    scatterContainer,
-                    flipTemplate,
-                    new ImageLoader('./examples/king.jpeg'),
-                    new ImageLoader('./examples/women.jpeg'),
-                    { tapDelegateFactory: CardWrapper, preloadBack: true }
-                )
-                flip.load().then((flip) => {
-                    flip.centerAt({ x: 150, y: 120 })
-                })
-            } else {
-                alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
-            }
-        </script>
-    </body>
 </html>

From 1a0b9d55c12d7c04f6c51c00fffefbd7276aa527 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tjark=20M=C3=BCller?= <t.mueller@iwm-tuebingen.de>
Date: Tue, 6 Jun 2023 17:31:58 +0200
Subject: [PATCH 06/13] update code block to reflect current state

---
 lib/flippable.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/flippable.html b/lib/flippable.html
index a4ec6a7..4d26fff 100644
--- a/lib/flippable.html
+++ b/lib/flippable.html
@@ -65,8 +65,12 @@ the viewbox of the SVG will interfere with the coordinate transformation.
                 &lt;div class="flipFace front"&gt;&lt;/div&gt;
                 &lt;div class="flipFace back" style="visibility:hidden;"&gt;&lt;/div&gt;
             &lt;/div>
-            &lt;svg class="flipButton backBtn" .../&gt;
-            &lt;svg class="flipButton infoBtn" .../&gt;
+            &lt;div class="flipButton backBtn" .../&gt;
+                &lt;svg .../&gt;
+            &lt;/div>
+            &lt;div class="flipButton infoBtn" .../&gt;
+                &lt;svg .../&gt;
+            &lt;/div>
         &lt;/div&gt;
     &lt;/template&gt;
 </code>

From 52ccb49fa8de8e2e95847d8547028bab8f07aef5 Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Thu, 20 Jul 2023 11:44:13 +0200
Subject: [PATCH 07/13] Added cancelAnimationFrame

---
 lib/scatter.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/lib/scatter.js b/lib/scatter.js
index efaada1..61a6d3a 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -106,6 +106,7 @@ class Throwable {
         this.velocity = null
         this.timestamp = null
         this.onThrowFinished = onThrowFinished
+        this._requestAnimation = 0
         //console.log("onThrowFinished", onThrowFinished)
     }
 
@@ -198,6 +199,56 @@ class Throwable {
 
             this.onDragUpdate(d)
             if (dt == 0 || this.needsAnimation()) {
+                if (this._requestAnimation != 0) {
+                    console.log("cancelAnimationFrame")
+                    cancelAnimationFrame(this._requestAnimation)
+                }
+                this._requestAnimation = requestAnimationFrame(this.animateThrow.bind(this))
+                return
+            } else {
+                if (this.isOutside()) {
+                    if (this._requestAnimation != 0) {
+                        console.log("cancelAnimationFrame")
+                        cancelAnimationFrame(this._requestAnimation)
+                    }
+                    this._requestAnimation = requestAnimationFrame(this.animateThrow.bind(this))
+                    return
+                }
+            }
+        }
+        this.onDragComplete()
+        if (this.onThrowFinished != null) {
+            this.onThrowFinished()
+        }
+    }
+
+    animateThrowTween(time) {
+        if (this.velocity != null) {
+            let dt = this._throwDeltaTime()
+            // console.log("animateThrow", dt)
+            let next = this.nextVelocity(this.velocity)
+            let prevLength = Points.length(this.velocity)
+            let nextLength = Points.length(next)
+            if (nextLength > prevLength) {
+                let factor = nextLength / prevLength
+                next = Points.multiplyScalar(next, 1 / factor)
+                // console.log('Prevent acceleration', factor, this.velocity, next)
+            }
+            this.velocity = next
+            let d = Points.multiplyScalar(this.velocity, dt)
+            this._move(d)
+            this.onDragUpdate(d)
+            TweenMax.to(this, 0.5, { _dummy: 1,
+                                    ease: Linear.easeNone,
+                                    onComplete: () => {
+                                        if (dt == 0 || this.needsAnimation() || this.isOutside()) {
+                                            this.animateThrow()
+                                        }}})
+
+            
+          /*  if (dt == 0 || this.needsAnimation()) {
+                
+
                 requestAnimationFrame(this.animateThrow.bind(this))
                 return
             } else {
@@ -205,7 +256,7 @@ class Throwable {
                     requestAnimationFrame(this.animateThrow.bind(this))
                     return
                 }
-            }
+            } */
         }
         this.onDragComplete()
         if (this.onThrowFinished != null) {

From 97fb30d7418231d4a76a6b0d01a321a2ac957e92 Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Thu, 20 Jul 2023 14:38:23 +0200
Subject: [PATCH 08/13] Moved throws to a single loop.

---
 lib/scatter.js | 79 +++++++++++++++++---------------------------------
 1 file changed, 27 insertions(+), 52 deletions(-)

diff --git a/lib/scatter.js b/lib/scatter.js
index 61a6d3a..23a0242 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -88,6 +88,24 @@ export class ResizeEvent extends BaseEvent {
  *
  * @constructor
  */
+
+let ThrowableObjects = []
+let ThrowableRequests = null
+
+function stepThrowAnimation() {
+    let clones = [...ThrowableObjects]
+    ThrowableObjects = []
+    for(let obj of clones) {
+        obj.animateThrow()
+    }
+    requestAnimationFrame(stepThrowAnimation)
+}
+
+function startThrowableLoop() {
+    requestAnimationFrame(stepThrowAnimation)
+    return true
+}
+
 class Throwable {
     constructor({
         movableX = true,
@@ -181,6 +199,13 @@ class Throwable {
         return dt
     }
 
+    recurseAnimateThrow() {
+        ThrowableObjects.push(this)
+        if (ThrowableRequests == null) {
+            ThrowableRequests = startThrowableLoop()
+        }
+    }
+
     animateThrow(time) {
         if (this.velocity != null) {
             let dt = this._throwDeltaTime()
@@ -199,19 +224,11 @@ class Throwable {
 
             this.onDragUpdate(d)
             if (dt == 0 || this.needsAnimation()) {
-                if (this._requestAnimation != 0) {
-                    console.log("cancelAnimationFrame")
-                    cancelAnimationFrame(this._requestAnimation)
-                }
-                this._requestAnimation = requestAnimationFrame(this.animateThrow.bind(this))
+                this.recurseAnimateThrow()
                 return
             } else {
                 if (this.isOutside()) {
-                    if (this._requestAnimation != 0) {
-                        console.log("cancelAnimationFrame")
-                        cancelAnimationFrame(this._requestAnimation)
-                    }
-                    this._requestAnimation = requestAnimationFrame(this.animateThrow.bind(this))
+                    this.recurseAnimateThrow()
                     return
                 }
             }
@@ -222,48 +239,6 @@ class Throwable {
         }
     }
 
-    animateThrowTween(time) {
-        if (this.velocity != null) {
-            let dt = this._throwDeltaTime()
-            // console.log("animateThrow", dt)
-            let next = this.nextVelocity(this.velocity)
-            let prevLength = Points.length(this.velocity)
-            let nextLength = Points.length(next)
-            if (nextLength > prevLength) {
-                let factor = nextLength / prevLength
-                next = Points.multiplyScalar(next, 1 / factor)
-                // console.log('Prevent acceleration', factor, this.velocity, next)
-            }
-            this.velocity = next
-            let d = Points.multiplyScalar(this.velocity, dt)
-            this._move(d)
-            this.onDragUpdate(d)
-            TweenMax.to(this, 0.5, { _dummy: 1,
-                                    ease: Linear.easeNone,
-                                    onComplete: () => {
-                                        if (dt == 0 || this.needsAnimation() || this.isOutside()) {
-                                            this.animateThrow()
-                                        }}})
-
-            
-          /*  if (dt == 0 || this.needsAnimation()) {
-                
-
-                requestAnimationFrame(this.animateThrow.bind(this))
-                return
-            } else {
-                if (this.isOutside()) {
-                    requestAnimationFrame(this.animateThrow.bind(this))
-                    return
-                }
-            } */
-        }
-        this.onDragComplete()
-        if (this.onThrowFinished != null) {
-            this.onThrowFinished()
-        }
-    }
-
     needsAnimation() {
         if (this.velocity == null) {
             return false

From 47992755e284fc9c124ea34a7270f3317fc1c0b5 Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Thu, 20 Jul 2023 14:50:48 +0200
Subject: [PATCH 09/13] Replaced requestAnimationFrame with setInterval

---
 lib/scatter.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/lib/scatter.js b/lib/scatter.js
index 23a0242..91cc2b3 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -89,20 +89,19 @@ export class ResizeEvent extends BaseEvent {
  * @constructor
  */
 
-let ThrowableObjects = []
+let ThrowableObjects = new Set()
 let ThrowableRequests = null
 
 function stepThrowAnimation() {
     let clones = [...ThrowableObjects]
-    ThrowableObjects = []
+    ThrowableObjects.clear()
     for(let obj of clones) {
         obj.animateThrow()
     }
-    requestAnimationFrame(stepThrowAnimation)
 }
 
 function startThrowableLoop() {
-    requestAnimationFrame(stepThrowAnimation)
+    setInterval(stepThrowAnimation, 33)
     return true
 }
 
@@ -200,7 +199,7 @@ class Throwable {
     }
 
     recurseAnimateThrow() {
-        ThrowableObjects.push(this)
+        ThrowableObjects.add(this)
         if (ThrowableRequests == null) {
             ThrowableRequests = startThrowableLoop()
         }

From 8b33bc0536039191bd0dad84c9c774cd96d3d95c Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Fri, 21 Jul 2023 08:36:14 +0200
Subject: [PATCH 10/13] Added pluggable throw behavior.

---
 lib/scatter.js | 69 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 53 insertions(+), 16 deletions(-)

diff --git a/lib/scatter.js b/lib/scatter.js
index 91cc2b3..599b64d 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -89,22 +89,39 @@ export class ResizeEvent extends BaseEvent {
  * @constructor
  */
 
-let ThrowableObjects = new Set()
-let ThrowableRequests = null
 
-function stepThrowAnimation() {
-    let clones = [...ThrowableObjects]
-    ThrowableObjects.clear()
-    for(let obj of clones) {
-        obj.animateThrow()
+class RequestFrameThrower {
+    /** Implemenents the standard throw behavior. */
+    animateThrow(throwable) {
+        /*** Calls the animateThrow method in sync with the display link. */
+        requestAnimationFrame(throwable.animateThrow.bind(throwable))
     }
 }
 
-function startThrowableLoop() {
-    setInterval(stepThrowAnimation, 33)
-    return true
+class TimeoutThrower {
+
+    constructor(delay=20) {
+        this.throwables = new Set()
+        this.delay = delay
+        setTimeout(this.animateStep.bind(this), this.delay)
+    }
+
+    animateThrow(throwable) {
+        this.throwables.add(throwable)
+    }
+
+    animateStep() {
+        let active = [...this.throwables]
+        this.throwables.clear()
+        for(let throwable of active) {
+            throwable.animateThrow()
+        }
+        setTimeout(this.animateStep.bind(this), this.delay)
+    }
 }
 
+let thrower = new RequestFrameThrower()
+
 class Throwable {
     constructor({
         movableX = true,
@@ -127,6 +144,14 @@ class Throwable {
         //console.log("onThrowFinished", onThrowFinished)
     }
 
+    static defaultThrow() {
+        thrower = new RequestFrameThrower()
+    }
+
+    static timeoutThrow() {
+        thrower = new TimeoutThrower()
+    }
+
     observeVelocity() {
         this.lastframe = performance.now()
     }
@@ -155,8 +180,22 @@ class Throwable {
         }
     }
 
+    addTestVelocity(delta, dt=20, buffer = 5) {
+        let t = performance.now()
+        let velocity = {
+            t: t,
+            dt: dt,
+            dx: delta.x ,
+            dy: delta.y 
+        }
+        for(let i=0; i<buffer; i++) {
+            velocity.t += dt
+            this.velocities.push(velocity)
+        }
+    }
+
     meanVelocity(milliseconds = 30) {
-        this.addVelocity({ x: 0, y: 0, number: 1 })
+     //   this.addVelocity({ x: 0, y: 0, number: 1 })
         let sum = { x: 0, y: 0 }
         let count = 0
         let t = 0
@@ -181,6 +220,7 @@ class Throwable {
 
     startThrow() {
         this.velocity = this.meanVelocity()
+        console.log("startThrow", this.velocity)
         if (this.velocity != null) {
             // Call next velocity to ansure that specializations
             // that use keepOnStage are called
@@ -200,9 +240,6 @@ class Throwable {
 
     recurseAnimateThrow() {
         ThrowableObjects.add(this)
-        if (ThrowableRequests == null) {
-            ThrowableRequests = startThrowableLoop()
-        }
     }
 
     animateThrow(time) {
@@ -223,11 +260,11 @@ class Throwable {
 
             this.onDragUpdate(d)
             if (dt == 0 || this.needsAnimation()) {
-                this.recurseAnimateThrow()
+                thrower.animateThrow(this)
                 return
             } else {
                 if (this.isOutside()) {
-                    this.recurseAnimateThrow()
+                    thrower.animateThrow(this)
                     return
                 }
             }

From 07f50974f93b617970896659bb1a7fb6c0c2351a Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Fri, 21 Jul 2023 09:48:00 +0200
Subject: [PATCH 11/13] Updated iwmlib and removed log statement.

---
 lib/scatter.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/scatter.js b/lib/scatter.js
index 599b64d..ce51279 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -220,7 +220,6 @@ class Throwable {
 
     startThrow() {
         this.velocity = this.meanVelocity()
-        console.log("startThrow", this.velocity)
         if (this.velocity != null) {
             // Call next velocity to ansure that specializations
             // that use keepOnStage are called

From 45d081c225e6c48918452de4e6e9e9feb6a07f95 Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Fri, 21 Jul 2023 12:44:03 +0200
Subject: [PATCH 12/13] Fixed timestamp name mismatch.

---
 lib/scatter.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/scatter.js b/lib/scatter.js
index ce51279..7066dcb 100644
--- a/lib/scatter.js
+++ b/lib/scatter.js
@@ -138,10 +138,8 @@ class Throwable {
         this.autoThrow = autoThrow
         this.velocities = []
         this.velocity = null
-        this.timestamp = null
+        this.lastframe = null
         this.onThrowFinished = onThrowFinished
-        this._requestAnimation = 0
-        //console.log("onThrowFinished", onThrowFinished)
     }
 
     static defaultThrow() {
@@ -182,6 +180,7 @@ class Throwable {
 
     addTestVelocity(delta, dt=20, buffer = 5) {
         let t = performance.now()
+        this.lastframe = t
         let velocity = {
             t: t,
             dt: dt,
@@ -216,6 +215,7 @@ class Throwable {
     killAnimation() {
         this.velocity = null
         this.velocities = []
+        this.lastframe = null
     }
 
     startThrow() {

From 80355ea6365e4849990ec9b86449fb3753443339 Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Fri, 28 Jul 2023 14:03:39 +0200
Subject: [PATCH 13/13] Removed console.logs

---
 lib/card/card.js      | 1 -
 lib/card/highlight.js | 1 -
 lib/card/wrapper.js   | 1 -
 3 files changed, 3 deletions(-)

diff --git a/lib/card/card.js b/lib/card/card.js
index f1d6504..01f48eb 100644
--- a/lib/card/card.js
+++ b/lib/card/card.js
@@ -766,7 +766,6 @@ export default class Card {
     }
 
     static _calculateCenterRelativeTo(target, image) {
-        // console.log('_calculateCenterRelativeTo', target, image)
         let bbox = image.getBBox()
         let width = bbox.width
         let height = bbox.height
diff --git a/lib/card/highlight.js b/lib/card/highlight.js
index 49cb59d..381f941 100644
--- a/lib/card/highlight.js
+++ b/lib/card/highlight.js
@@ -213,7 +213,6 @@ export default class Highlight extends Object {
                 image,
             })
             let center = this._calculateCenterRelativeTo(target, image)
-            console.log('_calculateCenterRelativeTo', center)
             TweenLite.set(maskImage, {
                 transformOrigin: `${center.x} ${center.y}`,
             })
diff --git a/lib/card/wrapper.js b/lib/card/wrapper.js
index 83d4ad9..ceabbac 100644
--- a/lib/card/wrapper.js
+++ b/lib/card/wrapper.js
@@ -158,7 +158,6 @@ export default class CardWrapper extends Object {
     tap(event, calledBy = 'unknown') {
         if (event.isTrusted) {
             let node = this.nearestActive(event)
-            console.log('tap', node)
             this.nodeTapped(node, event)
 
             /*  let node = document.elementFromPoint(event.clientX, event.clientY)