From f5d63d681aec260e792d72f2291fe4302b7af7f3 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 14 Aug 2017 18:07:09 +0200
Subject: [PATCH] wip #1487 @2

---
 js/libs/fluidbook/fluidbook.desktop.js |  2 +-
 js/libs/fluidbook/fluidbook.touch.js   | 17 ++---------
 js/libs/fluidbook/fluidbook.zoom.js    | 40 +++++++++++++++++++++-----
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js
index 5d95e0c8..7778a0e5 100644
--- a/js/libs/fluidbook/fluidbook.desktop.js
+++ b/js/libs/fluidbook/fluidbook.desktop.js
@@ -33,7 +33,7 @@ FluidbookDesktop.prototype = {
         var x = e.pageX / this.fluidbook.resize.ww;
         var y = e.pageY / this.fluidbook.resize.hh;
 
-        this.fluidbook.zoom.setOrigin(x, y, force)
+        this.fluidbook.zoom.setOriginPct(x, y, force)
     },
     clickZoom: function (e, way) {
         if (way == undefined) {
diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index 32ddd580..a8112d89 100644
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -148,18 +148,12 @@ FluidbookTouch.prototype = {
             return;
         }
 
-        var diffx = this.fluidbook.resize.ww * (this.fluidbook.zoom.zoom - 1);
-        var diffy = this.fluidbook.resize.hh * (this.fluidbook.zoom.zoom - 1);
-
-        var currentX = this.fluidbook.zoom.origin[0] * diffx;
-        var currentY = this.fluidbook.zoom.origin[1] * diffy;
+        var currentX = this.fluidbook.zoom.originpx[0];
+        var currentY = this.fluidbook.zoom.originpx[1];
 
         var x = currentX - e.dx;
         var y = currentY - e.dy;
 
-        x /= diffx;
-        y /= diffy;
-
         this.fluidbook.zoom.setOrigin(x, y, true, inertia);
 
         return false;
@@ -242,13 +236,6 @@ FluidbookTouch.prototype = {
         var ox = (cx - zrect.left) / z;
         var oy = (cy - zrect.top) / z;
 
-        ox = ox / this.fluidbook.resize.ww;
-        oy = oy / this.fluidbook.resize.hh;
-
-        // touch pos in % of screen
-        var tx = cx / this.fluidbook.resize.ww;
-        var ty = cy / this.fluidbook.resize.hh;
-
         this.fluidbook.zoom.setOrigin(ox, oy, true);
     },
 };
diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index e5866d33..542d451e 100644
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -1,7 +1,8 @@
 function FluidbookZoom(fluidbook) {
     this.fluidbook = fluidbook;
     this.zoom = 0;
-    this.origin = ['0%', '0%'];
+    this.originpct = ['0%', '0%'];
+    this.originpx = ['0px', '0px'];
     this.max = this.fluidbook.datas.zoomw / 100;
     this.transition = true;
     this.hideInterfaceTimeout;
@@ -91,7 +92,7 @@ FluidbookZoom.prototype = {
         this.setZoom(1, -1);
     },
 
-    setOrigin: function (x, y, force, inertia) {
+    setOriginPct: function (x, y, force, inertia) {
         if (force == undefined) {
             force = false;
         }
@@ -100,7 +101,7 @@ FluidbookZoom.prototype = {
         }
         x = Math.min(1, Math.max(0, x));
         y = Math.min(1, Math.max(0, y));
-        this.origin = [x, y];
+        this.originpct = [x, y];
         if (!force && this.fluidbook.zoom.zoom == 1) {
             return;
         } else {
@@ -110,7 +111,34 @@ FluidbookZoom.prototype = {
                 $("#z").removeClass('transition-inertia');
             }
             $("#z").transform({
-                origin: [this.origin[0] * 100 + '%', this.origin[1] * 100 + '%']
+                origin: [this.originpct[0] * 100 + '%', this.originpct[1] * 100 + '%']
+            }, {
+                preserve: true
+            });
+        }
+    },
+
+    setOrigin: function (x, y, force, inertia) {
+        if (force == undefined) {
+            force = false;
+        }
+        if (inertia == undefined) {
+            inertia = false;
+        }
+        x = Math.max(0, Math.min(x, this.fluidbook.resize.ww));
+        y = Math.max(0, Math.min(y, this.fluidbook.resize.hh));
+
+        this.originpx = [x, y];
+        if (!force && this.fluidbook.zoom.zoom == 1) {
+            return;
+        } else {
+            if (inertia) {
+                $("#z").addClass('transition-inertia');
+            } else {
+                $("#z").removeClass('transition-inertia');
+            }
+            $("#z").transform({
+                origin: [this.originpx[0] + 'px', this.originpx[1] + 'px']
             }, {
                 preserve: true
             });
@@ -130,8 +158,6 @@ FluidbookZoom.prototype = {
 
         if (this.desktopScale == 1) {
             animation.origin = ['50%', '50%'];
-        } else {
-            animation.origin = [this.origin[0] * 100 + '%', this.origin[1] * 100 + '%'];
         }
 
         var hiddenElements = $("header,footer,#interface");
@@ -147,7 +173,7 @@ FluidbookZoom.prototype = {
             clearTimeout(this.hideInterfaceTimeout);
             $(hiddenElements).show().removeClass('hidden');
         }
-        $("#z").transform(animation);
+        $("#z").transform(animation, {preserve: true});
         $this.triggerEvent(((this.zoom == 1) ? 'out' : 'in') + '.start');
 
         if (!this.transition) {
-- 
2.39.5