Add scrollbar support for scroll flow

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "epubjs",
-  "version": "0.3.88",
+  "name": "epubjs-myh",
+  "version": "0.3.101",
   "description": "Parse and Render Epubs",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -16,15 +16,15 @@
     "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"
   },
-  "author": "fchasen@gmail.com",
+  "author": "myh@live.com",
   "license": "BSD-2-Clause",
   "devDependencies": {
     "@babel/cli": "^7.10.1",

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();
 					}
 				}
 			}

src/layout.js

@@ -103,14 +103,14 @@ class Layout {
 	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(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;

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.updateLayout();
 
 		// 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();
 
@@ -343,6 +345,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);
 	}
@@ -451,7 +459,9 @@ class DefaultViewManager {
 			this.scrollLeft = this.container.scrollLeft;
 
 			if (this.settings.rtlScrollType === "default"){
-				left = this.container.scrollLeft;
+				this.scrollLeft = Math.floor(this.container.scrollLeft);
+				// this.container.scrollLeft could has fractional part.
+				left = Math.floor(this.container.scrollLeft);
 
 				if (left > 0) {
 					this.scrollBy(this.layout.delta, 0, true);
@@ -486,6 +496,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")) {
@@ -559,9 +570,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);
@@ -577,6 +589,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") {
@@ -919,13 +932,23 @@ class DefaultViewManager {
 
 		this._stageSize = this.stage.size();
 
-		if(!this.isPaginated) {
-			this.layout.calculate(this._stageSize.width, this._stageSize.height);
+		if (!this.isPaginated) {
+			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,
 				this._stageSize.height,
-				this.settings.gap
+				this.settings.gap,
+				this.settings.axis
 			);
 
 			// Set the look ahead offset for what is visible
@@ -942,7 +965,7 @@ class DefaultViewManager {
 		this.setLayout(this.layout);
 	}
 
-	setLayout(layout){
+	setLayout(layout) {
 
 		this.viewSettings.layout = layout;
 

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] };
 

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,