From b7bb95d97ab05f8269b9e74dd997a519ad0138d9 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sat, 5 Sep 2020 21:37:23 +0800 Subject: [PATCH 01/21] * Fix moveTo for vertical writing mode. --- src/managers/default/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 1944889ad..dc80f7f15 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -343,6 +343,12 @@ class DefaultViewManager { if (distX + this.layout.delta > this.container.scrollWidth) { distX = this.container.scrollWidth - this.layout.delta; } + + distY = Math.floor(offset.top / this.layout.delta) * this.layout.delta; + + if (distY + this.layout.delta > this.container.scrollHeight) { + distY = this.container.scrollHeight - this.layout.delta; + } } this.scrollTo(distX, distY, true); } From c59226133c6c8b87ac755dba9c58e609c6168f9d Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sun, 6 Sep 2020 21:31:09 +0800 Subject: [PATCH 02/21] * Fix a layout update bug after crossing a section boundary. --- src/managers/default/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/managers/default/index.js b/src/managers/default/index.js index dc80f7f15..a1ee60d94 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -492,6 +492,8 @@ class DefaultViewManager { if(next) { this.clear(); + // The new section may have a different writing-mode from the old section. Thus, we need to update layout. + this.updateLayout(); let forceRight = false; if (this.layout.name === "pre-paginated" && this.layout.divisor === 2 && next.properties.includes("page-spread-right")) { @@ -583,6 +585,8 @@ class DefaultViewManager { if(prev) { this.clear(); + // The new section may have a different writing-mode from the old section. Thus, we need to update layout. + this.updateLayout(); let forceRight = false; if (this.layout.name === "pre-paginated" && this.layout.divisor === 2 && typeof prev.prev() !== "object") { From 86f7370cab411baa60b5c1d8e951f08b7ee8faa2 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sun, 6 Sep 2020 21:33:48 +0800 Subject: [PATCH 03/21] * Update version. --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 76b2d8c56..960afd402 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "epubjs", - "version": "0.3.88", + "name": "epubjs-myh", + "version": "0.3.89", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", @@ -24,7 +24,7 @@ "watch": "babel --watch -d lib/ src/", "prepare": "npm run compile && npm run build && npm run minify && npm run legacy && npm run productionLegacy" }, - "author": "fchasen@gmail.com", + "author": "myh@live.com", "license": "BSD-2-Clause", "devDependencies": { "@babel/cli": "^7.10.1", From c48d34c339469aaec681562a38b7338ea8b501a2 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Wed, 16 Sep 2020 15:40:23 +0800 Subject: [PATCH 04/21] * Update version. --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 960afd402..1ba103cab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.89", + "version": "0.3.90", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", @@ -16,10 +16,10 @@ "docs:md": "documentation build src/epub.js -f md -o documentation/md/API.md", "lint": "eslint -c .eslintrc.js src; exit 0", "start": "webpack-dev-server --inline --d", - "build": "NODE_ENV=production webpack --progress", - "minify": "NODE_ENV=production MINIMIZE=true webpack --progress", - "legacy": "NODE_ENV=production LEGACY=true webpack --progress", - "productionLegacy": "NODE_ENV=production MINIMIZE=true LEGACY=true webpack --progress", + "build": "set NODE_ENV=production && webpack --progress", + "minify": "set NODE_ENV=production && set MINIMIZE=true && webpack --progress", + "legacy": "set NODE_ENV=production && set LEGACY=true && webpack --progress", + "productionLegacy": "set NODE_ENV=production && set MINIMIZE=true && set LEGACY=true && webpack --progress", "compile": "babel -d lib/ src/", "watch": "babel --watch -d lib/ src/", "prepare": "npm run compile && npm run build && npm run minify && npm run legacy && npm run productionLegacy" From 84c020adf13e73fbe6293227379170eaf8d425e9 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Wed, 16 Sep 2020 16:40:43 +0800 Subject: [PATCH 05/21] * Fix top and bottom gap calculations for vertical writing mode. --- src/layout.js | 4 ++-- src/managers/default/index.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/layout.js b/src/layout.js index 4f16a0f1d..24ad20b86 100644 --- a/src/layout.js +++ b/src/layout.js @@ -100,7 +100,7 @@ class Layout { * @param {number} _height height of the rendering * @param {number} _gap width of the gap between columns */ - calculate(_width, _height, _gap){ + calculate(_width, _height, _gap, axis){ var divisor = 1; var gap = _gap || 0; @@ -110,7 +110,7 @@ class Layout { var width = _width; var height = _height; - var section = Math.floor(width / 12); + var section = Math.floor((axis === 'vertical' ? height : width) / 12); var columnWidth; var spreadWidth; diff --git a/src/managers/default/index.js b/src/managers/default/index.js index a1ee60d94..26f5795cf 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -930,12 +930,13 @@ class DefaultViewManager { this._stageSize = this.stage.size(); if(!this.isPaginated) { - this.layout.calculate(this._stageSize.width, this._stageSize.height); + this.layout.calculate(this._stageSize.width, this._stageSize.height, undefined, this.settings.axis); } else { this.layout.calculate( this._stageSize.width, this._stageSize.height, - this.settings.gap + this.settings.gap, + this.settings.axis ); // Set the look ahead offset for what is visible From 92d93c460381f8d2b8d6e00a925e8ce3bf5d7f13 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Wed, 16 Sep 2020 16:44:12 +0800 Subject: [PATCH 06/21] * Update version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1ba103cab..0a68303b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.90", + "version": "0.3.92", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", From 8fbbd7ee5766525560146553122514dd0d7df6ea Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Thu, 17 Sep 2020 22:15:23 +0800 Subject: [PATCH 07/21] * Fix a gap update bug after scrolling from one section to another section with different writing modes. --- src/managers/default/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 26f5795cf..e9cecf12b 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -457,7 +457,7 @@ class DefaultViewManager { this.scrollLeft = this.container.scrollLeft; if (this.settings.rtlScrollType === "default"){ - left = this.container.scrollLeft; + left = Math.floor(this.container.scrollLeft); if (left > 0) { this.scrollBy(this.layout.delta, 0, true); @@ -492,8 +492,6 @@ class DefaultViewManager { if(next) { this.clear(); - // The new section may have a different writing-mode from the old section. Thus, we need to update layout. - this.updateLayout(); let forceRight = false; if (this.layout.name === "pre-paginated" && this.layout.divisor === 2 && next.properties.includes("page-spread-right")) { @@ -585,8 +583,6 @@ class DefaultViewManager { if(prev) { this.clear(); - // The new section may have a different writing-mode from the old section. Thus, we need to update layout. - this.updateLayout(); let forceRight = false; if (this.layout.name === "pre-paginated" && this.layout.divisor === 2 && typeof prev.prev() !== "object") { @@ -998,6 +994,7 @@ class DefaultViewManager { this.layout.spread(this.layout.settings.spread); } } + this.updateLayout(); } updateFlow(flow, defaultScrolledOverflow="auto"){ From 7e4f7b7ffce3eba55e974766302829a2d0eac817 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Thu, 17 Sep 2020 22:25:49 +0800 Subject: [PATCH 08/21] * Update version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0a68303b1..bffc8e138 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.92", + "version": "0.3.93", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", From 9baec61247cffc6fc4a71b1ccac00417e4535529 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Fri, 18 Sep 2020 10:56:31 +0800 Subject: [PATCH 09/21] * Fix page navigations for some layout modes. --- src/managers/default/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/managers/default/index.js b/src/managers/default/index.js index e9cecf12b..a11aa67b5 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -457,6 +457,8 @@ class DefaultViewManager { this.scrollLeft = this.container.scrollLeft; if (this.settings.rtlScrollType === "default"){ + this.scrollLeft = Math.floor(this.container.scrollLeft); + // this.container.scrollLeft could has fractional part. left = Math.floor(this.container.scrollLeft); if (left > 0) { @@ -492,6 +494,7 @@ class DefaultViewManager { if(next) { this.clear(); + this.updateLayout(); let forceRight = false; if (this.layout.name === "pre-paginated" && this.layout.divisor === 2 && next.properties.includes("page-spread-right")) { @@ -565,9 +568,10 @@ class DefaultViewManager { } else if (this.isPaginated && this.settings.axis === "vertical") { - this.scrollTop = this.container.scrollTop; + this.scrollTop = Math.floor(this.container.scrollTop); - let top = this.container.scrollTop; + // this.container.scrollTop could has fractional part. + let top = Math.floor(this.container.scrollTop); if(top > 0) { this.scrollBy(0, -(this.layout.height), true); @@ -583,6 +587,7 @@ class DefaultViewManager { if(prev) { this.clear(); + this.updateLayout(); let forceRight = false; if (this.layout.name === "pre-paginated" && this.layout.divisor === 2 && typeof prev.prev() !== "object") { @@ -994,7 +999,6 @@ class DefaultViewManager { this.layout.spread(this.layout.settings.spread); } } - this.updateLayout(); } updateFlow(flow, defaultScrolledOverflow="auto"){ From 90305cc5ab2624fbcce023a0a6872e68b6aad962 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Fri, 18 Sep 2020 10:58:22 +0800 Subject: [PATCH 10/21] * Use fixed gaps to workaround complex layout updating across sections. --- package.json | 2 +- src/layout.js | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index bffc8e138..cb0de1b98 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.93", + "version": "0.3.97", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/layout.js b/src/layout.js index 24ad20b86..41facf0da 100644 --- a/src/layout.js +++ b/src/layout.js @@ -100,17 +100,17 @@ class Layout { * @param {number} _height height of the rendering * @param {number} _gap width of the gap between columns */ - calculate(_width, _height, _gap, axis){ + calculate(_width, _height, _gap){ var divisor = 1; - var gap = _gap || 0; + var gap = _gap || 20; //-- Check the width and create even width columns // var fullWidth = Math.floor(_width); var width = _width; var height = _height; - var section = Math.floor((axis === 'vertical' ? height : width) / 12); + //var section = Math.floor(width / 12); var columnWidth; var spreadWidth; @@ -123,9 +123,11 @@ class Layout { divisor = 1; } + /* if (this.name === "reflowable" && this._flow === "paginated" && !(_gap >= 0)) { gap = ((section % 2 === 0) ? section : section - 1); } + */ if (this.name === "pre-paginated" ) { gap = 0; From 8ff03f08148bdec438fd0dcc00aa30d0c64b77e0 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Fri, 18 Sep 2020 13:39:02 +0800 Subject: [PATCH 11/21] * Fix locationOf in case of range is an empty string. --- package.json | 2 +- src/contents.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cb0de1b98..cf73602ee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.97", + "version": "0.3.98", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/contents.js b/src/contents.js index 3effe7252..715f4d6d5 100644 --- a/src/contents.js +++ b/src/contents.js @@ -655,7 +655,9 @@ class Contents { console.error(e, e.stack); } } else { - position = range.getBoundingClientRect(); + // range.toString() might be an empty string and range.getBoundingClientRect() returns a all-zeros position. + // Thus, we use the parent element containing the range to get a valid bounding rect. + position = range.startContainer.parentElement.getBoundingClientRect(); } } } From 87140706eb1fbb49009d9798b97ae9e557d9c0f1 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Fri, 18 Sep 2020 15:24:02 +0800 Subject: [PATCH 12/21] * Workaround a navigation problem between sections with invalid highlights. --- package.json | 2 +- src/managers/views/iframe.js | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cf73602ee..012fc9502 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.98", + "version": "0.3.99", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/views/iframe.js b/src/managers/views/iframe.js index 76b2c1d3e..4a0d066f9 100644 --- a/src/managers/views/iframe.js +++ b/src/managers/views/iframe.js @@ -610,7 +610,15 @@ class IframeView { } let m = new Highlight(range, className, data, attributes); - let h = this.pane.addMark(m); + let h; + try { + h = this.pane.addMark(m); + } catch (err) { + // Print error only for invalid highlights. + // Throwing an error here will cause ePub display stops after navigate out and then in a section with an invalid highlight. + console.error(err); + return; + } this.highlights[cfiRange] = { "mark": h, "element": h.element, "listeners": [emitter, cb] }; From 1b4b0c287b4dcfdf3936285b1b881260ffb36a41 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sun, 20 Sep 2020 19:56:35 +0800 Subject: [PATCH 13/21] * Add an option scrollbarWidth to control reserved space between epub-container and iframe for scrollbar. --- package.json | 2 +- src/managers/default/index.js | 24 ++++++++++++++++++++---- types/rendition.d.ts | 1 + 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 012fc9502..d490ec6c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.99", + "version": "0.3.100", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/default/index.js b/src/managers/default/index.js index a11aa67b5..142dd61e2 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -87,9 +87,9 @@ class DefaultViewManager { this._bounds = this.bounds(); this._stageSize = this.stage.size(); + // Set the dimensions for views - this.viewSettings.width = this._stageSize.width; - this.viewSettings.height = this._stageSize.height; + this.updateSize(this._stageSize.width, this._stageSize.height); // Function to handle a resize event. // Will only attach if width and height are both fixed. @@ -220,9 +220,11 @@ class DefaultViewManager { // Clear current views this.clear(); + /* Redundant codes? this.updateLayout() will update them!? // Update for new views this.viewSettings.width = this._stageSize.width; this.viewSettings.height = this._stageSize.height; + */ this.updateLayout(); @@ -948,12 +950,26 @@ class DefaultViewManager { } // Set the dimensions for views - this.viewSettings.width = this.layout.width; - this.viewSettings.height = this.layout.height; + this.updateSize(this.layout.width, this.layout.height); this.setLayout(this.layout); } + updateSize(width, height) { + if (this.layout._flow === "scrolled") { + if (this.settings.axis === "vertical") { + this.viewSettings.width = width - this.settings.scrollbarWidth; + this.viewSettings.height = height; + } else { + this.viewSettings.width = width; + this.viewSettings.height = height - this.settings.scrollbarWidth; + } + } else { + this.viewSettings.width = width; + this.viewSettings.height = height; + } + } + setLayout(layout){ this.viewSettings.layout = layout; diff --git a/types/rendition.d.ts b/types/rendition.d.ts index 434286c42..74b24a198 100644 --- a/types/rendition.d.ts +++ b/types/rendition.d.ts @@ -15,6 +15,7 @@ export interface RenditionOptions { manager?: string | Function | object, view?: string | Function | object, flow?: string, + scrollbarWidth?: number, layout?: string, spread?: string, minSpreadWidth?: number, From 1e9258062a832264ad552ae9b53044d725c448d4 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Tue, 22 Sep 2020 10:32:03 +0800 Subject: [PATCH 14/21] * Use default value if scrollbarWidth is undefined. --- package.json | 2 +- src/managers/default/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d490ec6c2..6e4c45511 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.100", + "version": "0.3.101", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 142dd61e2..1a32f2155 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -958,11 +958,11 @@ class DefaultViewManager { updateSize(width, height) { if (this.layout._flow === "scrolled") { if (this.settings.axis === "vertical") { - this.viewSettings.width = width - this.settings.scrollbarWidth; + this.viewSettings.width = width - (this.settings.scrollbarWidth || 0); this.viewSettings.height = height; } else { this.viewSettings.width = width; - this.viewSettings.height = height - this.settings.scrollbarWidth; + this.viewSettings.height = height - (this.settings.scrollbarWidth || 0); } } else { this.viewSettings.width = width; From af88da4bdcee8b90246502af65545c6433df533a Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Fri, 2 Oct 2020 16:20:52 +0800 Subject: [PATCH 15/21] * Export EVENTS. --- package.json | 2 +- src/index.js | 4 +++- types/index.d.ts | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6e4c45511..723111516 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.101", + "version": "0.3.102", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/index.js b/src/index.js index 16ef8b6a3..2884523da 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import Rendition from "./rendition"; import Contents from "./contents"; import Layout from "./layout"; import ePub from "./epub"; +import { EVENTS } from "./utils/constants"; export default ePub; export { @@ -11,5 +12,6 @@ export { EpubCFI, Rendition, Contents, - Layout + Layout, + EVENTS, }; diff --git a/types/index.d.ts b/types/index.d.ts index 6a8ec9b9e..8277af2d4 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -14,6 +14,7 @@ export { default as Rendition, Location } from './rendition'; export { default as Contents } from './contents'; export { default as Layout } from './layout'; export { NavItem } from './navigation'; +export { EVENTS } from './utils/constants'; declare namespace ePub { From 838c5b9c93d0aca7233caed6dbfe74212a303083 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sat, 3 Oct 2020 12:03:25 +0800 Subject: [PATCH 16/21] * Add vertical writing mode support for paginatedLocation. --- package.json | 2 +- src/managers/default/index.js | 255 ++++++++++++++++++---------------- 2 files changed, 138 insertions(+), 119 deletions(-) diff --git a/package.json b/package.json index 723111516..291cac79f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.102", + "version": "0.3.103", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 1a32f2155..4e686a64e 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -1,5 +1,5 @@ import EventEmitter from "event-emitter"; -import {extend, defer, windowBounds, isNumber} from "../../utils/core"; +import { extend, defer, windowBounds, isNumber } from "../../utils/core"; import scrollType from "../../utils/scrolltype"; import Mapping from "../../mapping"; import Queue from "../../utils/queue"; @@ -46,13 +46,13 @@ class DefaultViewManager { } - render(element, size){ + render(element, size) { let tag = element.tagName; if (typeof this.settings.fullsize === "undefined" && - tag && (tag.toLowerCase() == "body" || + tag && (tag.toLowerCase() == "body" || tag.toLowerCase() == "html")) { - this.settings.fullsize = true; + this.settings.fullsize = true; } if (this.settings.fullsize) { @@ -110,14 +110,14 @@ class DefaultViewManager { } - addEventListeners(){ + addEventListeners() { var scroller; - window.addEventListener("unload", function(e){ + window.addEventListener("unload", function (e) { this.destroy(); }.bind(this)); - if(!this.settings.fullsize) { + if (!this.settings.fullsize) { scroller = this.container; } else { scroller = window; @@ -127,10 +127,10 @@ class DefaultViewManager { scroller.addEventListener("scroll", this._onScroll); } - removeEventListeners(){ + removeEventListeners() { var scroller; - if(!this.settings.fullsize) { + if (!this.settings.fullsize) { scroller = this.container; } else { scroller = window; @@ -140,7 +140,7 @@ class DefaultViewManager { this._onScroll = undefined; } - destroy(){ + destroy() { clearTimeout(this.orientationTimeout); clearTimeout(this.resizeTimeout); clearTimeout(this.afterScrolled); @@ -165,9 +165,9 @@ class DefaultViewManager { } onOrientationChange(e) { - let {orientation} = window; + let { orientation } = window; - if(this.optsSettings.resizeOnOrientationChange) { + if (this.optsSettings.resizeOnOrientationChange) { this.resize(); } @@ -177,10 +177,10 @@ class DefaultViewManager { // happens in window.resize event. Adding a timeout for correct // measurement. See https://github.com/ampproject/amphtml/issues/8479 clearTimeout(this.orientationTimeout); - this.orientationTimeout = setTimeout(function(){ + this.orientationTimeout = setTimeout(function () { this.orientationTimeout = undefined; - if(this.optsSettings.resizeOnOrientationChange) { + if (this.optsSettings.resizeOnOrientationChange) { this.resize(); } @@ -193,22 +193,22 @@ class DefaultViewManager { this.resize(); } - resize(width, height, epubcfi){ + resize(width, height, epubcfi) { let stageSize = this.stage.size(width, height); // For Safari, wait for orientation to catch up // if the window is a square this.winBounds = windowBounds(); if (this.orientationTimeout && - this.winBounds.width === this.winBounds.height) { + this.winBounds.width === this.winBounds.height) { // reset the stage size for next resize this._stageSize = undefined; return; } if (this._stageSize && - this._stageSize.width === stageSize.width && - this._stageSize.height === stageSize.height ) { + this._stageSize.width === stageSize.width && + this._stageSize.height === stageSize.height) { // Size is the same, no need to resize return; } @@ -235,7 +235,7 @@ class DefaultViewManager { } createView(section, forceRight) { - return new this.View(section, extend(this.viewSettings, { forceRight }) ); + return new this.View(section, extend(this.viewSettings, { forceRight })); } handleNextPrePaginated(forceRight, section, action) { @@ -253,7 +253,7 @@ class DefaultViewManager { } } - display(section, target){ + display(section, target) { var displaying = new defer(); var displayed = displaying.promise; @@ -267,7 +267,7 @@ class DefaultViewManager { var visible = this.views.find(section); // View is already shown, just move to correct location in view - if(visible && section && this.layout.name !== "pre-paginated") { + if (visible && section && this.layout.name !== "pre-paginated") { let offset = visible.offset(); if (this.settings.direction === "ltr") { @@ -277,7 +277,7 @@ class DefaultViewManager { this.scrollTo(offset.left + width, offset.top, true); } - if(target) { + if (target) { let offset = visible.locationOf(target); this.moveTo(offset); } @@ -295,10 +295,10 @@ class DefaultViewManager { } this.add(section, forceRight) - .then(function(view){ + .then(function (view) { // Move to correct place within the section, if needed - if(target) { + if (target) { let offset = view.locationOf(target); this.moveTo(offset); } @@ -306,10 +306,10 @@ class DefaultViewManager { }.bind(this), (err) => { displaying.reject(err); }) - .then(function(){ + .then(function () { return this.handleNextPrePaginated(forceRight, section, this.add); }.bind(this)) - .then(function(){ + .then(function () { this.views.show(); @@ -325,19 +325,19 @@ class DefaultViewManager { return displayed; } - afterDisplayed(view){ + afterDisplayed(view) { this.emit(EVENTS.MANAGERS.ADDED, view); } - afterResized(view){ + afterResized(view) { this.emit(EVENTS.MANAGERS.RESIZE, view.section); } - moveTo(offset){ + moveTo(offset) { var distX = 0, - distY = 0; + distY = 0; - if(!this.isPaginated) { + if (!this.isPaginated) { distY = offset.top; } else { distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta; @@ -355,7 +355,7 @@ class DefaultViewManager { this.scrollTo(distX, distY, true); } - add(section, forceRight){ + add(section, forceRight) { var view = this.createView(section, forceRight); this.views.append(view); @@ -375,7 +375,7 @@ class DefaultViewManager { return view.display(this.request); } - append(section, forceRight){ + append(section, forceRight) { var view = this.createView(section, forceRight); this.views.append(view); @@ -393,7 +393,7 @@ class DefaultViewManager { return view.display(this.request); } - prepend(section, forceRight){ + prepend(section, forceRight) { var view = this.createView(section, forceRight); view.on(EVENTS.VIEWS.RESIZED, (bounds) => { @@ -416,8 +416,8 @@ class DefaultViewManager { return view.display(this.request); } - counter(bounds){ - if(this.settings.axis === "vertical") { + counter(bounds) { + if (this.settings.axis === "vertical") { this.scrollBy(0, bounds.heightDelta, true); } else { this.scrollBy(bounds.widthDelta, 0, true); @@ -435,21 +435,21 @@ class DefaultViewManager { // // }; - next(){ + next() { var next; var left; let dir = this.settings.direction; - if(!this.views.length) return; + if (!this.views.length) return; - if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { + if (this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { this.scrollLeft = this.container.scrollLeft; left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta; - if(left <= this.container.scrollWidth) { + if (left <= this.container.scrollWidth) { this.scrollBy(this.layout.delta, 0, true); } else { next = this.views.last().section.next(); @@ -458,7 +458,7 @@ class DefaultViewManager { this.scrollLeft = this.container.scrollLeft; - if (this.settings.rtlScrollType === "default"){ + if (this.settings.rtlScrollType === "default") { this.scrollLeft = Math.floor(this.container.scrollLeft); // this.container.scrollLeft could has fractional part. left = Math.floor(this.container.scrollLeft); @@ -469,9 +469,9 @@ class DefaultViewManager { next = this.views.last().section.next(); } } else { - left = this.container.scrollLeft + ( this.layout.delta * -1 ); + left = this.container.scrollLeft + (this.layout.delta * -1); - if (left > this.container.scrollWidth * -1){ + if (left > this.container.scrollWidth * -1) { this.scrollBy(this.layout.delta, 0, true); } else { next = this.views.last().section.next(); @@ -482,9 +482,9 @@ class DefaultViewManager { this.scrollTop = this.container.scrollTop; - let top = this.container.scrollTop + this.container.offsetHeight; + let top = this.container.scrollTop + this.container.offsetHeight; - if(top < this.container.scrollHeight) { + if (top < this.container.scrollHeight) { this.scrollBy(0, this.layout.height, true); } else { next = this.views.last().section.next(); @@ -494,7 +494,7 @@ class DefaultViewManager { next = this.views.last().section.next(); } - if(next) { + if (next) { this.clear(); this.updateLayout(); @@ -504,19 +504,19 @@ class DefaultViewManager { } return this.append(next, forceRight) - .then(function(){ + .then(function () { return this.handleNextPrePaginated(forceRight, next, this.append); }.bind(this), (err) => { return err; }) - .then(function(){ + .then(function () { // Reset position to start for scrolled-doc vertical-rl in default mode if (!this.isPaginated && this.settings.axis === "horizontal" && this.settings.direction === "rtl" && this.settings.rtlScrollType === "default") { - + this.scrollTo(this.container.scrollWidth, 0, true); } this.views.show(); @@ -526,20 +526,20 @@ class DefaultViewManager { } - prev(){ + prev() { var prev; var left; let dir = this.settings.direction; - if(!this.views.length) return; + if (!this.views.length) return; - if(this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { + if (this.isPaginated && this.settings.axis === "horizontal" && (!dir || dir === "ltr")) { this.scrollLeft = this.container.scrollLeft; left = this.container.scrollLeft; - if(left > 0) { + if (left > 0) { this.scrollBy(-this.layout.delta, 0, true); } else { prev = this.views.first().section.prev(); @@ -549,7 +549,7 @@ class DefaultViewManager { this.scrollLeft = this.container.scrollLeft; - if (this.settings.rtlScrollType === "default"){ + if (this.settings.rtlScrollType === "default") { left = this.container.scrollLeft + this.container.offsetWidth; if (left < this.container.scrollWidth) { @@ -558,7 +558,7 @@ class DefaultViewManager { prev = this.views.first().section.prev(); } } - else{ + else { left = this.container.scrollLeft; if (left < 0) { @@ -575,7 +575,7 @@ class DefaultViewManager { // this.container.scrollTop could has fractional part. let top = Math.floor(this.container.scrollTop); - if(top > 0) { + if (top > 0) { this.scrollBy(0, -(this.layout.height), true); } else { prev = this.views.first().section.prev(); @@ -587,7 +587,7 @@ class DefaultViewManager { } - if(prev) { + if (prev) { this.clear(); this.updateLayout(); @@ -597,7 +597,7 @@ class DefaultViewManager { } return this.prepend(prev, forceRight) - .then(function(){ + .then(function () { var left; if (this.layout.name === "pre-paginated" && this.layout.divisor > 1) { left = prev.prev(); @@ -608,13 +608,13 @@ class DefaultViewManager { }.bind(this), (err) => { return err; }) - .then(function(){ - if(this.isPaginated && this.settings.axis === "horizontal") { + .then(function () { + if (this.isPaginated && this.settings.axis === "horizontal") { if (this.settings.direction === "rtl") { - if (this.settings.rtlScrollType === "default"){ + if (this.settings.rtlScrollType === "default") { this.scrollTo(0, 0, true); } - else{ + else { this.scrollTo((this.container.scrollWidth * -1) + this.layout.delta, 0, true); } } else { @@ -626,28 +626,28 @@ class DefaultViewManager { } } - current(){ + current() { var visible = this.visible(); - if(visible.length){ + if (visible.length) { // Current is the last visible view - return visible[visible.length-1]; + return visible[visible.length - 1]; } return null; } - clear () { + clear() { // this.q.clear(); if (this.views) { this.views.hide(); - this.scrollTo(0,0, true); + this.scrollTo(0, 0, true); this.views.clear(); } } - currentLocation(){ - if (this.isPaginated && this.settings.axis === "horizontal") { + currentLocation() { + if (this.isPaginated) { this.location = this.paginatedLocation(); } else { this.location = this.scrolledLocation(); @@ -661,17 +661,17 @@ class DefaultViewManager { let pageHeight = (container.height < window.innerHeight) ? container.height : window.innerHeight; let pageWidth = (container.width < window.innerWidth) ? container.width : window.innerWidth; let vertical = (this.settings.axis === "vertical"); - let rtl = (this.settings.direction === "rtl"); - + let rtl = (this.settings.direction === "rtl"); + let offset = 0; let used = 0; - if(this.settings.fullsize) { + if (this.settings.fullsize) { offset = vertical ? window.scrollY : window.scrollX; } let sections = visible.map((view) => { - let {index, href} = view.section; + let { index, href } = view.section; let position = view.position(); let width = view.width(); let height = view.height(); @@ -724,49 +724,68 @@ class DefaultViewManager { return sections; } - paginatedLocation(){ + paginatedLocation() { let visible = this.visible(); let container = this.container.getBoundingClientRect(); + let vertical = (this.settings.axis === "vertical"); let left = 0; + let top = 0; let used = 0; - if(this.settings.fullsize) { + if (this.settings.fullsize) { left = window.scrollX; + top = window.scrollY; } let sections = visible.map((view) => { - let {index, href} = view.section; + let { index, href } = view.section; let offset; let position = view.position(); let width = view.width(); + let height = view.height(); // Find mapping let start; let end; let pageWidth; + let pageHeight; if (this.settings.direction === "rtl") { - offset = container.right - left; - pageWidth = Math.min(Math.abs(offset - position.left), this.layout.width) - used; - end = position.width - (position.right - offset) - used; - start = end - pageWidth; + if (vertical) { + offset = container.bottom - top; + pageHeight = Math.min(Math.abs(offset - position.top), this.layout.height) - used; + end = position.height - (position.bottom - offset) - used; + start = end - pageHeight; + } else { + offset = container.right - left; + pageWidth = Math.min(Math.abs(offset - position.left), this.layout.width) - used; + end = position.width - (position.right - offset) - used; + start = end - pageWidth; + } } else { - offset = container.left + left; - pageWidth = Math.min(position.right - offset, this.layout.width) - used; - start = offset - position.left + used; - end = start + pageWidth; + if (vertical) { + offset = container.top + top; + pageHeight = Math.min(position.bottom - offset, this.layout.height) - used; + start = offset - position.top + used; + end = start + pageHeight; + } else { + offset = container.left + left; + pageWidth = Math.min(position.right - offset, this.layout.width) - used; + start = offset - position.left + used; + end = start + pageWidth; + } } - used += pageWidth; + used += vertical ? pageHeight : pageWidth; let mapping = this.mapping.page(view.contents, view.section.cfiBase, start, end); - let totalPages = this.layout.count(width).pages; - let startPage = Math.floor(start / this.layout.pageWidth); + let totalPages = this.layout.count(vertical ? height : width).pages; + let startPage = Math.floor(start / (vertical ? this.layout.pageHeight : this.layout.pageWidth)); let pages = []; - let endPage = Math.floor(end / this.layout.pageWidth); - + let endPage = Math.floor(end / (vertical ? this.layout.pageHeight : this.layout.pageWidth)); + // start page should not be negative if (startPage < 0) { startPage = 0; @@ -798,17 +817,17 @@ class DefaultViewManager { return sections; } - isVisible(view, offsetPrev, offsetNext, _container){ + isVisible(view, offsetPrev, offsetNext, _container) { var position = view.position(); var container = _container || this.bounds(); - if(this.settings.axis === "horizontal" && + if (this.settings.axis === "horizontal" && position.right > container.left - offsetPrev && position.left < container.right + offsetNext) { return true; - } else if(this.settings.axis === "vertical" && + } else if (this.settings.axis === "vertical" && position.bottom > container.top - offsetPrev && position.top < container.bottom + offsetNext) { @@ -819,7 +838,7 @@ class DefaultViewManager { } - visible(){ + visible() { var container = this.bounds(); var views = this.views.displayed(); var viewsLength = views.length; @@ -831,7 +850,7 @@ class DefaultViewManager { view = views[i]; isVisible = this.isVisible(view, 0, 0, container); - if(isVisible === true) { + if (isVisible === true) { visible.push(view); } @@ -839,41 +858,41 @@ class DefaultViewManager { return visible; } - scrollBy(x, y, silent){ + scrollBy(x, y, silent) { let dir = this.settings.direction === "rtl" ? -1 : 1; - if(silent) { + if (silent) { this.ignore = true; } - if(!this.settings.fullsize) { - if(x) this.container.scrollLeft += x * dir; - if(y) this.container.scrollTop += y; + if (!this.settings.fullsize) { + if (x) this.container.scrollLeft += x * dir; + if (y) this.container.scrollTop += y; } else { window.scrollBy(x * dir, y * dir); } this.scrolled = true; } - scrollTo(x, y, silent){ - if(silent) { + scrollTo(x, y, silent) { + if (silent) { this.ignore = true; } - if(!this.settings.fullsize) { + if (!this.settings.fullsize) { this.container.scrollLeft = x; this.container.scrollTop = y; } else { - window.scrollTo(x,y); + window.scrollTo(x, y); } this.scrolled = true; } - onScroll(){ + onScroll() { let scrollTop; let scrollLeft; - if(!this.settings.fullsize) { + if (!this.settings.fullsize) { scrollTop = this.container.scrollTop; scrollLeft = this.container.scrollLeft; } else { @@ -884,7 +903,7 @@ class DefaultViewManager { this.scrollTop = scrollTop; this.scrollLeft = scrollLeft; - if(!this.ignore) { + if (!this.ignore) { this.emit(EVENTS.MANAGERS.SCROLL, { top: scrollTop, left: scrollLeft @@ -921,7 +940,7 @@ class DefaultViewManager { if (this.views && this.views.length > 0 && this.layout.name === "pre-paginated") { this.display(this.views.first().section); } - // this.manager.layout(this.layout.format); + // this.manager.layout(this.layout.format); } updateLayout() { @@ -932,7 +951,7 @@ class DefaultViewManager { this._stageSize = this.stage.size(); - if(!this.isPaginated) { + if (!this.isPaginated) { this.layout.calculate(this._stageSize.width, this._stageSize.height, undefined, this.settings.axis); } else { this.layout.calculate( @@ -970,15 +989,15 @@ class DefaultViewManager { } } - setLayout(layout){ + setLayout(layout) { this.viewSettings.layout = layout; this.mapping = new Mapping(layout.props, this.settings.direction, this.settings.axis); - if(this.views) { + if (this.views) { - this.views.forEach(function(view){ + this.views.forEach(function (view) { if (view) { view.setLayout(layout); } @@ -992,7 +1011,7 @@ class DefaultViewManager { this.writingMode = mode; } - updateAxis(axis, forceUpdate){ + updateAxis(axis, forceUpdate) { if (!forceUpdate && axis === this.settings.axis) { return; @@ -1017,14 +1036,14 @@ class DefaultViewManager { } } - updateFlow(flow, defaultScrolledOverflow="auto"){ + updateFlow(flow, defaultScrolledOverflow = "auto") { let isPaginated = (flow === "paginated" || flow === "auto"); this.isPaginated = isPaginated; if (flow === "scrolled-doc" || - flow === "scrolled-continuous" || - flow === "scrolled") { + flow === "scrolled-continuous" || + flow === "scrolled") { this.updateAxis("vertical"); } else { this.updateAxis("horizontal"); @@ -1044,12 +1063,12 @@ class DefaultViewManager { } - getContents(){ + getContents() { var contents = []; if (!this.views) { return contents; } - this.views.forEach(function(view){ + this.views.forEach(function (view) { const viewContents = view && view.contents; if (viewContents) { contents.push(viewContents); @@ -1058,7 +1077,7 @@ class DefaultViewManager { return contents; } - direction(dir="ltr") { + direction(dir = "ltr") { this.settings.direction = dir; this.stage && this.stage.direction(dir); From 503402490debb85cedc6919719369aae02a0ab45 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sun, 4 Oct 2020 20:20:01 +0800 Subject: [PATCH 17/21] * Fix bugs for paginatedLocation for vertical writing modes. --- package.json | 2 +- src/layout.js | 15 +++++++++++++++ src/managers/default/index.js | 25 ++++++++++--------------- 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 291cac79f..9ca9ec2a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.103", + "version": "0.3.104", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/layout.js b/src/layout.js index 41facf0da..7f91c14e1 100644 --- a/src/layout.js +++ b/src/layout.js @@ -113,8 +113,11 @@ class Layout { //var section = Math.floor(width / 12); var columnWidth; + var columnHeight; var spreadWidth; + var spreadHeight; var pageWidth; + var pageHeight; var delta; if (this._spread && width >= this._minSpreadWidth) { @@ -140,16 +143,22 @@ class Layout { // gap = gap / divisor; columnWidth = (width / divisor) - gap; pageWidth = columnWidth + gap; + columnHeight = (height / divisor) - gap; + pageHeight = columnHeight + gap; } else { columnWidth = width; pageWidth = width; + columnWidth = height; + pageHeight = height; } if (this.name === "pre-paginated" && divisor > 1) { width = columnWidth; + height = columnHeight; } spreadWidth = (columnWidth * divisor) + gap; + spreadHeight = (columnHeight * divisor) + gap; delta = width; @@ -157,9 +166,12 @@ class Layout { this.height = height; this.spreadWidth = spreadWidth; this.pageWidth = pageWidth; + this.spreadHeight = spreadHeight; + this.pageHeight = pageHeight; this.delta = delta; this.columnWidth = columnWidth; + this.columnHeight = columnHeight; this.gap = gap; this.divisor = divisor; @@ -177,9 +189,12 @@ class Layout { width, height, spreadWidth, + spreadHeight, pageWidth, + pageHeight, delta, columnWidth, + columnHeight, gap, divisor }); diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 4e686a64e..010ee27b2 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -751,18 +751,11 @@ class DefaultViewManager { let pageWidth; let pageHeight; - if (this.settings.direction === "rtl") { - if (vertical) { - offset = container.bottom - top; - pageHeight = Math.min(Math.abs(offset - position.top), this.layout.height) - used; - end = position.height - (position.bottom - offset) - used; - start = end - pageHeight; - } else { - offset = container.right - left; - pageWidth = Math.min(Math.abs(offset - position.left), this.layout.width) - used; - end = position.width - (position.right - offset) - used; - start = end - pageWidth; - } + if (!vertical && this.settings.direction === "rtl") { + offset = container.right - left; + pageWidth = Math.min(Math.abs(offset - position.left), this.layout.width) - used; + end = position.width - (position.right - offset) - used; + start = end - pageWidth; } else { if (vertical) { offset = container.top + top; @@ -776,15 +769,17 @@ class DefaultViewManager { end = start + pageWidth; } } + start = Math.ceil(start); + end = Math.ceil(end); used += vertical ? pageHeight : pageWidth; let mapping = this.mapping.page(view.contents, view.section.cfiBase, start, end); let totalPages = this.layout.count(vertical ? height : width).pages; - let startPage = Math.floor(start / (vertical ? this.layout.pageHeight : this.layout.pageWidth)); + let startPage = Math.floor(start / (vertical ? this.layout.pageHeight : this.layout.pageWidth)); let pages = []; - let endPage = Math.floor(end / (vertical ? this.layout.pageHeight : this.layout.pageWidth)); + let endPage = Math.floor(end / (vertical ? this.layout.pageHeight : this.layout.pageWidth)); // start page should not be negative if (startPage < 0) { @@ -793,7 +788,7 @@ class DefaultViewManager { } // Reverse page counts for rtl - if (this.settings.direction === "rtl") { + if (!vertical && this.settings.direction === "rtl") { let tempStartPage = startPage; startPage = totalPages - endPage; endPage = totalPages - tempStartPage; From c583262416104ee3a752c2f3f8cd7060e1dc958b Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Sun, 4 Oct 2020 20:46:09 +0800 Subject: [PATCH 18/21] * Add comments. --- src/managers/default/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 010ee27b2..b64be9b0d 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -769,6 +769,8 @@ class DefaultViewManager { end = start + pageWidth; } } + // Because scrollBy() is not precise (see its comment), + // applying ceiling to workaround the page calculation problem! start = Math.ceil(start); end = Math.ceil(end); @@ -861,6 +863,10 @@ class DefaultViewManager { } if (!this.settings.fullsize) { + // Notice! These operations are no percise! + // E.g., this.container.scrollTop is 0 and y is 100, + // after this.container.scrollTop += y + // this.container.scrollTop might become 99.xxx! if (x) this.container.scrollLeft += x * dir; if (y) this.container.scrollTop += y; } else { From 4b6eb078451b068cb110b630c565683960390b24 Mon Sep 17 00:00:00 2001 From: Meng-Yuan Huang Date: Tue, 13 Oct 2020 08:51:22 +0800 Subject: [PATCH 19/21] * Fix scrollbarWidth bugs for layout size. --- package.json | 2 +- src/managers/default/index.js | 31 +++++++++++++------------------ 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 9ca9ec2a2..1a0e5c38e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.104", + "version": "0.3.105", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/default/index.js b/src/managers/default/index.js index b64be9b0d..033c04cda 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -89,7 +89,7 @@ class DefaultViewManager { // Set the dimensions for views - this.updateSize(this._stageSize.width, this._stageSize.height); + this.updateLayout(); // Function to handle a resize event. // Will only attach if width and height are both fixed. @@ -953,7 +953,16 @@ class DefaultViewManager { this._stageSize = this.stage.size(); if (!this.isPaginated) { - this.layout.calculate(this._stageSize.width, this._stageSize.height, undefined, this.settings.axis); + let width; + let height; + if (this.settings.axis === "vertical") { + width = this._stageSize.width - (this.settings.scrollbarWidth | 0); + height = this._stageSize.height; + } else { + width = this._stageSize.width; + height = this._stageSize.height - (this.settings.scrollbarWidth | 0); + } + this.layout.calculate(width, height, undefined, this.settings.axis); } else { this.layout.calculate( this._stageSize.width, @@ -970,26 +979,12 @@ class DefaultViewManager { } // Set the dimensions for views - this.updateSize(this.layout.width, this.layout.height); + this.viewSettings.width = this.layout.width; + this.viewSettings.height = this.layout.height; this.setLayout(this.layout); } - updateSize(width, height) { - if (this.layout._flow === "scrolled") { - if (this.settings.axis === "vertical") { - this.viewSettings.width = width - (this.settings.scrollbarWidth || 0); - this.viewSettings.height = height; - } else { - this.viewSettings.width = width; - this.viewSettings.height = height - (this.settings.scrollbarWidth || 0); - } - } else { - this.viewSettings.width = width; - this.viewSettings.height = height; - } - } - setLayout(layout) { this.viewSettings.layout = layout; From 41b1bf229dbb9813efd50ad122272138164ffa59 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Fri, 23 Oct 2020 12:32:46 +0800 Subject: [PATCH 20/21] * Fix increasing scrolling error of scrollBy by compensation. --- package.json | 2 +- src/managers/default/index.js | 27 +++++++++++++++++++++++---- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1a0e5c38e..a4ccbe50b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.105", + "version": "0.3.106", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 033c04cda..292c09cfb 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -854,7 +854,7 @@ class DefaultViewManager { } return visible; } - + scrollBy(x, y, silent) { let dir = this.settings.direction === "rtl" ? -1 : 1; @@ -863,12 +863,31 @@ class DefaultViewManager { } if (!this.settings.fullsize) { - // Notice! These operations are no percise! + // Notice! Operations on scrollLeft and scrollTop are not precise! // E.g., this.container.scrollTop is 0 and y is 100, // after this.container.scrollTop += y // this.container.scrollTop might become 99.xxx! - if (x) this.container.scrollLeft += x * dir; - if (y) this.container.scrollTop += y; + // Without compensation, this error increases after each scroll operation! + if (x) { + this.container.scrollLeft += x * dir; + const remainder = this.container.scrollLeft % x; + if (Math.abs(x - remainder) >= 1) { + // Determine if the current scroll position is closer to the next page or current page. + const compensationDir = Math.round(remainder / x) === 1 ? 1 : -1; + // Compensate it by 1 pixel. + this.container.scrollLeft += compensationDir; + } + } + if (y) { + this.container.scrollTop += y; + const remainder = this.container.scrollTop % y; + if (Math.abs(y - remainder) >= 1) { + // Determine if the current scroll position is closer to the next page or current page. + const compensationDir = Math.round(remainder / y) === 1 ? 1 : -1; + // Compensate it by 1 pixel. + this.container.scrollTop += compensationDir; + } + } } else { window.scrollBy(x * dir, y * dir); } From 7b3ad0d839060ecb545396bbcb822275dc84e259 Mon Sep 17 00:00:00 2001 From: Roger Huang Date: Fri, 23 Oct 2020 13:10:09 +0800 Subject: [PATCH 21/21] * Fix bugs. --- package.json | 2 +- src/managers/default/index.js | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index a4ccbe50b..1eee26bcb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epubjs-myh", - "version": "0.3.106", + "version": "0.3.107", "description": "Parse and Render Epubs", "main": "lib/index.js", "module": "src/index.js", diff --git a/src/managers/default/index.js b/src/managers/default/index.js index 292c09cfb..2add102be 100644 --- a/src/managers/default/index.js +++ b/src/managers/default/index.js @@ -854,7 +854,7 @@ class DefaultViewManager { } return visible; } - + scrollBy(x, y, silent) { let dir = this.settings.direction === "rtl" ? -1 : 1; @@ -869,21 +869,23 @@ class DefaultViewManager { // this.container.scrollTop might become 99.xxx! // Without compensation, this error increases after each scroll operation! if (x) { - this.container.scrollLeft += x * dir; - const remainder = this.container.scrollLeft % x; - if (Math.abs(x - remainder) >= 1) { + this.container.scrollLeft += x * dir; + const absX = Math.abs(x); + const remainder = this.container.scrollLeft % absX; + if (Math.abs(absX - remainder) >= 1) { // Determine if the current scroll position is closer to the next page or current page. - const compensationDir = Math.round(remainder / x) === 1 ? 1 : -1; + const compensationDir = Math.round(remainder / absX) === 1 ? 1 : -1; // Compensate it by 1 pixel. this.container.scrollLeft += compensationDir; } } if (y) { this.container.scrollTop += y; - const remainder = this.container.scrollTop % y; - if (Math.abs(y - remainder) >= 1) { + const absY = Math.abs(y); + const remainder = this.container.scrollTop % absY; + if (Math.abs(absY - remainder) >= 1) { // Determine if the current scroll position is closer to the next page or current page. - const compensationDir = Math.round(remainder / y) === 1 ? 1 : -1; + const compensationDir = Math.round(remainder / absY) === 1 ? 1 : -1; // Compensate it by 1 pixel. this.container.scrollTop += compensationDir; }