From 13ea23186fe737ae4be83eecb378526a10087608 Mon Sep 17 00:00:00 2001
From: Uwe Oestermeier <u.oestermeier@iwm-tuebingen.de>
Date: Mon, 12 Feb 2024 15:05:12 +0100
Subject: [PATCH] Fixed flippable scaling problem.

---
 css/flipeffect.css                    |  3 ---
 dist/iwmlib.js                        | 24 ++++++++++++++++--------
 dist/iwmlib.pixi.js                   | 24 ++++++++++++++++--------
 lib/flippable.js                      | 24 ++++++++++++++++--------
 rollup.config.mjs => rollup.config.js |  0
 5 files changed, 48 insertions(+), 27 deletions(-)
 rename rollup.config.mjs => rollup.config.js (100%)

diff --git a/css/flipeffect.css b/css/flipeffect.css
index 2a07446..bab60a3 100644
--- a/css/flipeffect.css
+++ b/css/flipeffect.css
@@ -47,7 +47,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    border: 1px solid red;
     right: 0;
     top: 0;
 }
@@ -58,7 +57,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    border: 1px solid red;
     right: 0;
     bottom: 0;
 }
@@ -69,7 +67,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    border: 1px solid red;
     right: 0;
     bottom: 0;
 }
diff --git a/dist/iwmlib.js b/dist/iwmlib.js
index 19afd00..e38f8ac 100644
--- a/dist/iwmlib.js
+++ b/dist/iwmlib.js
@@ -5504,6 +5504,7 @@
                 x: x,
                 y: y,
                 onComplete: (e) => {
+                    console.log('onComplete', e);
                     if (this.flipped) {
                         this.hide(this.front);
                         // this.hide(this.infoBtn)
@@ -5517,17 +5518,24 @@
             //uo: check for special case that the front image must be adapted to the back size
             let frontImage = this.front.querySelector('img');
             if (frontImage) {
-                let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w;
-                let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h;
-                let ratio = this.scatterStartWidth / this.scatterStartHeight;
+                // Assumes that startWidth and startHeight are encoded in px
+                let sh = parseInt(this.startHeight);
+                let sw = parseInt(this.startWidth);
                 if (this.flipped) {
+                    let scaleY = h / sh;
+                    let scaleX = w / sw;
                     TweenLite.to(frontImage, duration, {
                         ease: Power1.easeOut,
-                        scaleY: scaleY * targetScale * ratio,
-                        scaleX: scaleX * targetScale,
-                        onComplete: (e) => {
-                            TweenLite.set(frontImage, { scale: 1.0 });
-                        }
+                        transformOrigin: '0% 0%',
+                        scaleY,
+                        scaleX
+                    });
+                } else {
+                    TweenLite.to(frontImage, duration, {
+                        ease: Power1.easeOut,
+                        transformOrigin: '0% 0%',
+                        scaleY: 1.0,
+                        scaleX: 1.0
                     });
                 }
             }
diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js
index ca5c18d..91cee67 100644
--- a/dist/iwmlib.pixi.js
+++ b/dist/iwmlib.pixi.js
@@ -8745,6 +8745,7 @@
                 x: x,
                 y: y,
                 onComplete: (e) => {
+                    console.log('onComplete', e);
                     if (this.flipped) {
                         this.hide(this.front);
                         // this.hide(this.infoBtn)
@@ -8758,17 +8759,24 @@
             //uo: check for special case that the front image must be adapted to the back size
             let frontImage = this.front.querySelector('img');
             if (frontImage) {
-                let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w;
-                let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h;
-                let ratio = this.scatterStartWidth / this.scatterStartHeight;
+                // Assumes that startWidth and startHeight are encoded in px
+                let sh = parseInt(this.startHeight);
+                let sw = parseInt(this.startWidth);
                 if (this.flipped) {
+                    let scaleY = h / sh;
+                    let scaleX = w / sw;
                     TweenLite.to(frontImage, duration, {
                         ease: Power1.easeOut,
-                        scaleY: scaleY * targetScale * ratio,
-                        scaleX: scaleX * targetScale,
-                        onComplete: (e) => {
-                            TweenLite.set(frontImage, { scale: 1.0 });
-                        }
+                        transformOrigin: '0% 0%',
+                        scaleY,
+                        scaleX
+                    });
+                } else {
+                    TweenLite.to(frontImage, duration, {
+                        ease: Power1.easeOut,
+                        transformOrigin: '0% 0%',
+                        scaleY: 1.0,
+                        scaleX: 1.0
                     });
                 }
             }
diff --git a/lib/flippable.js b/lib/flippable.js
index 05bd617..bc8b463 100644
--- a/lib/flippable.js
+++ b/lib/flippable.js
@@ -632,6 +632,7 @@ export class DOMFlippable {
             x: x,
             y: y,
             onComplete: (e) => {
+                console.log('onComplete', e)
                 if (this.flipped) {
                     this.hide(this.front)
                     // this.hide(this.infoBtn)
@@ -645,17 +646,24 @@ export class DOMFlippable {
         //uo: check for special case that the front image must be adapted to the back size
         let frontImage = this.front.querySelector('img')
         if (frontImage) {
-            let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w
-            let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h
-            let ratio = this.scatterStartWidth / this.scatterStartHeight
+            // Assumes that startWidth and startHeight are encoded in px
+            let sh = parseInt(this.startHeight)
+            let sw = parseInt(this.startWidth)
             if (this.flipped) {
+                let scaleY = h / sh
+                let scaleX = w / sw
                 TweenLite.to(frontImage, duration, {
                     ease: Power1.easeOut,
-                    scaleY: scaleY * targetScale * ratio,
-                    scaleX: scaleX * targetScale,
-                    onComplete: (e) => {
-                        TweenLite.set(frontImage, { scale: 1.0 })
-                    }
+                    transformOrigin: '0% 0%',
+                    scaleY,
+                    scaleX
+                })
+            } else {
+                TweenLite.to(frontImage, duration, {
+                    ease: Power1.easeOut,
+                    transformOrigin: '0% 0%',
+                    scaleY: 1.0,
+                    scaleX: 1.0
                 })
             }
         }
diff --git a/rollup.config.mjs b/rollup.config.js
similarity index 100%
rename from rollup.config.mjs
rename to rollup.config.js