Fix mapping for RTL

src/managers/continuous/index.js

@@ -163,6 +163,7 @@ class ContinuousViewManager extends DefaultViewManager {
 		if(this.settings.axis === "vertical") {
 			this.scrollBy(0, bounds.heightDelta, true);
 		} else {
+			console.log("counter", bounds.widthDelta)
 			this.scrollBy(bounds.widthDelta, 0, true);
 		}
 
@@ -369,9 +370,11 @@ class ContinuousViewManager extends DefaultViewManager {
 			} else {
 				if(this.settings.direction === 'rtl') {
 					if (this.settings.rtlScrollType === "default") {
+						console.log("erase 1", window.scrollX, prevLeft, bounds.width);
 						this.scrollTo(prevLeft, 0, true);
 					}
 					else {
+						console.log("erase 2", prevLeft + Math.floor(bounds.width));
 						this.scrollTo(prevLeft + Math.floor(bounds.width), 0, true);
 					}
 				} else {

src/managers/default/index.js

@@ -660,11 +660,6 @@ class DefaultViewManager {
 				endPos = startPos + pageHeight - used;
 				totalPages = this.layout.count(height, pageHeight).pages;
 				stopPos = pageHeight;
-				// TODO: what was this doing? Seem to break things.
-				// if (endPos > stopPos) {
-				// 	endPos = stopPos;
-				// 	used = (endPos - startPos);
-				// }
 			} else {
 				startPos = offset + container.left - position.left + used;
 				endPos = startPos + pageWidth - used;
@@ -716,21 +711,28 @@ class DefaultViewManager {
 
 		let sections = visible.map((view) => {
 			let {index, href} = view.section;
-			let offset = view.offset().left;
-			let position = view.position().left;
+			let offset;
+			let position = view.position();
 			let width = view.width();
 
 			// Find mapping
-			let start = left + container.left - position + offset + used;
-			let end = start + this.layout.width - used;
+			let start;
+			let end;
+			let pageWidth;
+
 			if (this.settings.direction === "rtl") {
-				start = width - left - container.width + container.left - position + offset + used;
-				end = start + this.layout.width - used;
+				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 {
-				start = left + container.left - position + offset + used;
-				end = start + this.layout.width - used;
+				offset = container.left + left;
+				pageWidth = Math.min(position.right - offset, this.layout.width) - used;
+				start = offset - position.left + used;
+				end = start + pageWidth;
 			}
 
+			used += pageWidth;
 
 			let mapping = this.mapping.page(view.contents, view.section.cfiBase, start, end);
 

src/mapping.js

@@ -10,7 +10,7 @@ import { nodeBounds } from "./utils/core";
  * @param {boolean} [dev] toggle developer highlighting
  */
 class Mapping {
-	constructor(layout, direction, axis, dev) {
+	constructor(layout, direction, axis, dev=false) {
 		this.layout = layout;
 		this.horizontal = (axis === "horizontal") ? true : false;
 		this.direction = direction || "ltr";