From 15d3c1de0f9c9a905cb3d7e01059393329e4ad33 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 24 Jan 2019 02:57:39 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=8B=D1=82=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D1=80=D0=B5=D1=88=D0=B8=D1=82=D1=8C=20=D0=BF=D1=80=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BC=D1=83=20=D1=81=20=D0=BF=D1=80=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5=D0=BC=20=D0=BA=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=81=D0=B0=20=D0=BF=D1=80=D0=B8=20=D0=BB=D0=B8?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BD=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Reader/TextPage/TextPage.vue   | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index 5ee99fc9..668d68ee 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/client/components/Reader/TextPage/TextPage.vue
@@ -59,6 +59,10 @@ class TextPage extends Vue {
             this.startClickRepeat(x, y);
         }, 800);
 
+        this.debouncedPrepareNextPage = _.debounce(() => {
+            this.prepareNextPage();
+        }, 100);
+
         this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
         this.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
     }
@@ -258,10 +262,12 @@ class TextPage extends Vue {
             if (this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) {
                 this.linesDown = this.linesDownNext;
                 this.linesUp = this.linesUpNext;
-                this.prepareNextPage();
+                this.pagePrepared = false;
+                this.debouncedPrepareNextPage();
             } else {
                 this.drawPage(context, this.bookPos);
-                this.prepareNextPage();
+                this.pagePrepared = false;
+                this.debouncedPrepareNextPage();
             }
 
             if (this.currentTransition) {
@@ -405,12 +411,9 @@ class TextPage extends Vue {
         if (!this.book || !this.parsed.textLength)
             return;
         
-        this.pagePrepared = false;
-        this.cancelPrepare = false;
         if (!this.preparing) {
             this.preparing = true;
 
-            this.pagePrepared = false;            
             (async() => {
                 await sleep(100);
                 if (this.cancelPrepare) {
@@ -432,8 +435,6 @@ class TextPage extends Vue {
 
                 this.preparing = false;
             })();
-        } else {
-            this.cancelPrepare = true;
         }
     }
 
@@ -553,8 +554,9 @@ class TextPage extends Vue {
         this.endClickRepeat();
         if (event.touches.length == 1) {
             const touch = event.touches[0];
-            const x = touch.pageX - this.canvas.offsetLeft;
-            const y = touch.pageY - this.canvas.offsetTop;
+            const rect = event.target.getBoundingClientRect();
+            const x = touch.pageX - rect.left;
+            const y = touch.pageY - rect.top;
             if (this.handleClick(x, y)) {
                 this.repDoing = true;
                 this.debouncedStartClickRepeat(x, y);
@@ -579,11 +581,9 @@ class TextPage extends Vue {
             return;
         this.endClickRepeat();
         if (event.button == 0) {
-            const x = event.pageX - this.canvas.offsetLeft;
-            const y = event.pageY - this.canvas.offsetTop;
-            if (this.handleClick(x, y)) {
+            if (this.handleClick(event.offsetX, event.offsetY)) {
                 this.repDoing = true;
-                this.debouncedStartClickRepeat(x, y);
+                this.debouncedStartClickRepeat(event.offsetX, event.offsetY);
             }
         } else if (event.button == 2) {
             this.doToolBarToggle();
@@ -692,10 +692,12 @@ class TextPage extends Vue {
     margin: 0;
     padding: 0;
     overflow: hidden;
+    position: relative;
 }
 
 .canvas {
     margin: 0;
     padding: 0;
+    position: absolute;
 }
 </style>