@internetarchive/bookreader 5.0.0-61 → 5.0.0-62

package/tests/jest/BookReader/BookModel.test.js

@@ -60,6 +60,21 @@ describe('getMedianPageSizeInches', () => {
     expect(bm.getMedianPageSizeInches()).toEqual({ width: 300, height: 2300 });
   });
 
+  test('does not lexicographic sort for median', () => {
+    const sizes = [
+      {width: 100, height: 100},
+      {width: 20, height: 20},
+      {width: 30, height: 30},
+    ];
+    const data = deepCopy(SAMPLE_DATA);
+    delete data[2];
+    Object.assign(data[0][0], sizes[0]);
+    Object.assign(data[1][0], sizes[1]);
+    Object.assign(data[1][1], sizes[2]);
+    const bm = new BookModel({ data, options: {ppi: 1} });
+    expect(bm.getMedianPageSizeInches()).toEqual({ width: 30, height: 30 });
+  });
+
   test('caches result', () => {
     const bm = new BookModel({ data: SAMPLE_DATA });
     const firstResult = bm.getMedianPageSizeInches();

package/tests/jest/BookReader/utils/SelectionObserver.test.js

@@ -0,0 +1,43 @@
+// @ts-check
+import sinon from "sinon";
+import { SelectionObserver } from "@/src/BookReader/utils/SelectionObserver";
+
+afterEach(() => {
+  sinon.restore();
+});
+
+describe("SelectionObserver", () => {
+  test("_onSelectionChange", () => {
+    const handler = sinon.spy();
+    const observer = new SelectionObserver(".text-layer", handler);
+    const target = document.createElement("div");
+    target.classList.add("text-layer");
+
+    // stub window.getSelection
+    const getSelectionStub = sinon.stub(window, "getSelection");
+    getSelectionStub.returns({ toString: () => "test", anchorNode: target });
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(1);
+    expect(handler.calledWith("started", target)).toBe(true);
+    expect(observer.selecting).toBe(true);
+
+    // Calling it again does not call the handler again
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(1);
+
+    // Until the selection is cleared
+    getSelectionStub.returns({ toString: () => "", anchorNode: null });
+    expect(observer.selecting).toBe(true);
+    expect(handler.callCount).toBe(1);
+
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(2);
+    expect(handler.calledWith("cleared", target)).toBe(true);
+
+    // Calling it again does not call the handler again
+    sinon.restore();
+    sinon.stub(window, "getSelection").returns({ toString: () => "" });
+    observer._onSelectionChange();
+    expect(handler.callCount).toBe(2);
+  });
+});

package/tests/jest/plugins/plugin.text_selection.test.js

@@ -1,21 +1,88 @@
 import sinon from 'sinon';
 
 import '@/src/BookReader.js';
-import { BookreaderWithTextSelection, TextSelectionPlugin, Cache } from '@/src/plugins/plugin.text_selection.js';
+import {
+  BookreaderWithTextSelection,
+  Cache,
+  genMap,
+  lookAroundWindow,
+  zip,
+} from '@/src/plugins/plugin.text_selection.js';
 
 
 /** @type {BookReader} */
 
 // djvu.xml book infos copied from https://ia803103.us.archive.org/14/items/goodytwoshoes00newyiala/goodytwoshoes00newyiala_djvu.xml
-const FAKE_XML_1WORD = `<OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
-<PARAGRAPH><LINE><WORD coords="1216,2768,1256,2640">test</WORD></LINE></PARAGRAPH>
-</OBJECT>`;
-const FAKE_XML_MULT_WORDS = `<OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
-<PARAGRAPH><LINE><WORD coords="1216,2768,1256,2640">test1</WORD>
-<WORD coords="1400,2768,1500,2640">test2</WORD>
-<WORD coords="1600,2768,1700,2640">test3</WORD></LINE></PARAGRAPH></OBJECT>`;
-const FAKE_XML_5COORDS = `<OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
-<PARAGRAPH><LINE><WORD coords="1216,2768,1256,2640,2690">test</WORD></LINE></PARAGRAPH></OBJECT>`;
+const FAKE_XML_1WORD = `
+  <OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
+    <PARAGRAPH>
+      <LINE>
+        <WORD coords="1216,2768,1256,2640">test</WORD>
+      </LINE>
+    </PARAGRAPH>
+  </OBJECT>`;
+const FAKE_XML_MULT_WORDS = `
+  <OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
+    <PARAGRAPH>
+      <LINE>
+        <WORD coords="1216,2768,1256,2640">test1</WORD>
+        <WORD coords="1400,2768,1500,2640">test2</WORD>
+        <WORD coords="1600,2768,1700,2640">test3</WORD>
+      </LINE>
+    </PARAGRAPH>
+  </OBJECT>`;
+const FAKE_XML_MULT_LINES = `
+  <OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
+    <PARAGRAPH>
+      <LINE>
+        <WORD coords="119,2050,230,2014" x-confidence="29">way </WORD>
+        <WORD coords="230,2038,320,2002" x-confidence="30">can </WORD>
+        <WORD coords="320,2039,433,2002" x-confidence="28">false </WORD>
+        <WORD coords="433,2051,658,2003" x-confidence="29">judgment </WORD>
+        <WORD coords="658,2039,728,2002" x-confidence="30">be </WORD>
+        <WORD coords="658,2039,728,2002" x-confidence="30">-</WORD>
+        <WORD coords="728,2039,939,2001" x-confidence="29">formed. </WORD>
+        <WORD coords="939,2039,1087,2001" x-confidence="29">There </WORD>
+        <WORD coords="1087,2039,1187,2002" x-confidence="29">still </WORD>
+        <WORD coords="1187,2038,1370,2003" x-confidence="29">remains </WORD>
+        <WORD coords="1370,2037,1433,2014" x-confidence="28">an-</WORD>
+      </LINE>
+      <LINE>
+        <WORD coords="244,2099,370,2063" x-confidence="29">other mode </WORD>
+        <WORD coords="370,2100,427,2064" x-confidence="29">in </WORD>
+        <WORD coords="427,2100,566,2063" x-confidence="29">which </WORD>
+        <WORD coords="566,2100,670,2063" x-confidence="29">false </WORD>
+        <WORD coords="670,2112,907,2063" x-confidence="29">judgments </WORD>
+        <WORD coords="907,2112,1006,2064" x-confidence="29">may </WORD>
+        <WORD coords="1006,2100,1071,2063" x-confidence="29">be </WORD>
+        <WORD coords="1071,2100,1266,2062" x-confidence="29">formed. </WORD>
+        <WORD coords="1266,2110,1435,2062" x-confidence="29">Suppose</WORD>
+      </LINE>
+      <LINE>
+        <WORD coords="118,2160,217,2123" x-confidence="29">that </WORD>
+        <WORD coords="217,2160,289,2124" x-confidence="29">we </WORD>
+        <WORD coords="289,2160,400,2124" x-confidence="29">have </WORD>
+        <WORD coords="400,2160,456,2124" x-confidence="30">in </WORD>
+        <WORD coords="456,2161,542,2136" x-confidence="29">our </WORD>
+        <WORD coords="542,2161,660,2124" x-confidence="29">souls </WORD>
+        <WORD coords="660,2160,700,2136" x-confidence="29">a </WORD>
+        <WORD coords="700,2160,847,2129" x-confidence="28">waxen </WORD>
+        <WORD coords="847,2160,983,2123" x-confidence="29">tablet </WORD>
+        <WORD coords="983,2160,1045,2124" x-confidence="29">of </WORD>
+        <WORD coords="1045,2160,1211,2124" x-confidence="29">various </WORD>
+        <WORD coords="1211,2171,1398,2122" x-confidence="29">qualities </WORD>
+        <WORD coords="1398,2157,1434,2122" x-confidence="29">lastWord</WORD>
+      </LINE>
+    </PARAGRAPH>
+  </OBJECT>`;
+const FAKE_XML_5COORDS = `
+  <OBJECT data="file://localhost//tmp/derive/goodytwoshoes00newyiala//goodytwoshoes00newyiala.djvu" height="3192" type="image/x.djvu" usemap="goodytwoshoes00newyiala_0001.djvu" width="2454">
+    <PARAGRAPH>
+      <LINE>
+        <WORD coords="1216,2768,1256,2640,2690">test</WORD>
+      </LINE>
+    </PARAGRAPH>
+  </OBJECT>`;
 const FAKE_XML_EMPTY = '';
 
 describe("Generic tests", () => {
@@ -44,7 +111,7 @@ describe("Generic tests", () => {
 
   afterEach(() => {
     sinon.restore();
-    $('.textSelectionSVG').remove();
+    $('.BRtextLayer').remove();
   });
 
   test("_createPageContainer overridden function still creates a BRpagecontainer element", () => {
@@ -76,8 +143,8 @@ describe("Generic tests", () => {
       .returns($(new DOMParser().parseFromString(FAKE_XML_1WORD, "text/xml")));
     const pageIndex = br.data.length - 1;
     await br.textSelectionPlugin.createTextLayer({ $container, page: { index: pageIndex, width: 100, height: 100 }});
-    expect($container.find(".textSelectionSVG").length).toBe(1);
-    expect($container.find(".BRparagElement").length).toBe(1);
+    expect($container.find(".BRtextLayer").length).toBe(1);
+    expect($container.find("p").length).toBe(1);
   });
 
   test("createTextLayer will not create text layer if there are too many words", async () => {
@@ -86,50 +153,76 @@ describe("Generic tests", () => {
     sinon.stub(br.textSelectionPlugin, "getPageText")
       .returns($(new DOMParser().parseFromString(xml, "text/xml")));
     await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 0, width: 100, height: 100 }});
-    expect($container.find(".textSelectionSVG").length).toBe(0);
-    expect($container.find(".BRparagElement").length).toBe(0);
+    expect($container.find(".BRtextLayer").length).toBe(0);
+    expect($container.find("p").length).toBe(0);
     expect($container.find(".BRwordElement").length).toBe(0);
   });
 
-  test("createTextLayer creates an svg layer with paragraph with 1 word element", async () => {
+  test("createTextLayer creates text layer with paragraph with 1 word element", async () => {
     const $container = br.refs.$brContainer;
     sinon.stub(br.textSelectionPlugin, "getPageText")
       .returns($(new DOMParser().parseFromString(FAKE_XML_1WORD, "text/xml")));
     await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 1, width: 100, height: 100 }});
-    expect($container.find(".textSelectionSVG").length).toBe(1);
-    expect($container.find(".BRparagElement").length).toBe(1);
+    expect($container.find(".BRtextLayer").length).toBe(1);
+    expect($container.find("p").length).toBe(1);
     expect($container.find(".BRwordElement").length).toBe(1);
     expect($container.find(".BRwordElement").text()).toBe("test");
   });
 
-  test("createTextLayer creates an svg layer with paragraph with multiple word elements", async () => {
+  test("createTextLayer creates text layer with paragraph with multiple word elements", async () => {
     const $container = br.refs.$brContainer;
     sinon.stub(br.textSelectionPlugin, "getPageText")
       .returns($(new DOMParser().parseFromString(FAKE_XML_MULT_WORDS, "text/xml")));
     await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 2, width: 100, height: 100 }});
-    expect($container.find(".textSelectionSVG").length).toBe(1);
-    expect($container.find(".BRparagElement").length).toBe(1);
-    expect($container.find(".BRwordElement").length).toBe(5);
-    expect($container.find(".BRwordElement").last()).not.toBe(" ");
+    expect($container.find(".BRtextLayer").length).toBe(1);
+    expect($container.find("p").length).toBe(1);
+    expect($container.find(".BRwordElement").length).toBe(3);
+    expect($container.find(".BRspace").length).toBe(2);
   });
 
-  test("createTextLayer creates an svg layer with paragraph with word with 5 params coordinates", async () => {
+  test("createTextLayer creates text layer with paragraph with word with 5 params coordinates", async () => {
     const $container = br.refs.$brContainer;
     sinon.stub(br.textSelectionPlugin, "getPageText")
       .returns($(new DOMParser().parseFromString(FAKE_XML_5COORDS, "text/xml")));
     await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 3, width: 100, height: 100 }});
-    expect($container.find(".textSelectionSVG").length).toBe(1);
-    expect($container.find(".BRparagElement").length).toBe(1);
+    expect($container.find(".BRtextLayer").length).toBe(1);
+    expect($container.find("p").length).toBe(1);
     expect($container.find(".BRwordElement").length).toBe(1);
   });
 
+  test("createTextLayer handles multiple lines", async () => {
+    const $container = br.refs.$brContainer;
+    sinon.stub(br.textSelectionPlugin, "getPageText")
+      .returns($(new DOMParser().parseFromString(FAKE_XML_MULT_LINES, "text/xml")));
+    await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 3, width: 100, height: 100 }});
+    expect($container.find(".BRtextLayer").length).toBe(1);
+    expect($container.find("p").length).toBe(1);
+    expect($container.find(".BRlineElement").length).toBe(3);
+    // Adds space at end of line; except last line/hyphens
+    expect($container.find("p").text()).toMatch(/another/);
+    expect($container.find("p").text()).toMatch(/Suppose /);
+    expect($container.find("p").text()).toMatch(/lastWord$/);
+    expect($container.find("p > br").length).toBe(1);
+  });
+
+  test("createTextLayer repairs trailing hyphens", async () => {
+    const $container = br.refs.$brContainer;
+    sinon.stub(br.textSelectionPlugin, "getPageText")
+      .returns($(new DOMParser().parseFromString(FAKE_XML_MULT_LINES, "text/xml")));
+    await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 3, width: 100, height: 100 }});
+
+    expect($container.find(".BRwordElement--hyphen").length).toBe(1);
+    expect($container.find(".BRwordElement--hyphen").closest(".BRlineElement").text().endsWith(' ')).toBe(false);
+    expect($container.find(".BRwordElement--hyphen").closest(".BRlineElement").text().endsWith('-')).toBe(false);
+  });
+
   test("createTextLayer can handle empty xml", async () => {
     const $container = br.refs.$brContainer;
     sinon.stub(br.textSelectionPlugin, "getPageText")
       .returns($(new DOMParser().parseFromString(FAKE_XML_EMPTY, "text/xml")));
     await br.textSelectionPlugin.createTextLayer({ $container, page: { index: 4, width: 100, height: 100 }});
-    expect($container.find(".textSelectionSVG").length).toBe(1);
-    expect($container.find(".BRparagElement").length).toBe(0);
+    expect($container.find(".BRtextLayer").length).toBe(1);
+    expect($container.find("p").length).toBe(0);
     expect($container.find(".BRwordElement").length).toBe(0);
   });
 
@@ -150,22 +243,6 @@ describe("Generic tests", () => {
   });
 });
 
-describe("textSelectionPlugin constructor", () => {
-  test("textSelectionPlugin constructor with firefox browser", () => {
-    const tsp = new TextSelectionPlugin({}, {}, true);
-    expect(tsp.djvuPagesPromise).toBe(null);
-    expect(tsp.svgParagraphElement).toBe("g");
-    expect(tsp.svgWordElement).toBe("text");
-  });
-
-  test("textSelectionPlugin constructor not on firefox browser", () => {
-    const tsp = new TextSelectionPlugin({}, {}, false);
-    expect(tsp.djvuPagesPromise).toBe(null);
-    expect(tsp.svgParagraphElement).toBe("text");
-    expect(tsp.svgWordElement).toBe("tspan");
-  });
-});
-
 describe("Cache", () => {
   test('Adding works', () => {
     const c = new Cache(10);
@@ -193,3 +270,48 @@ describe("Cache", () => {
     expect(c.entries).toEqual([12, 10]);
   });
 });
+
+describe('genMap', () => {
+  test('handles empty', () => {
+    expect(Array.from(genMap([], x => x ** 2))).toEqual([]);
+  });
+
+  test('handles non-empty', () => {
+    expect(Array.from(genMap([1,2,3], x => x ** 2))).toEqual([1,4,9]);
+  });
+});
+
+describe('lookAroundWindow', () => {
+  test('handles empty', () => {
+    expect(Array.from(lookAroundWindow([]))).toEqual([]);
+  });
+
+  test('handles smaller than window', () => {
+    expect(Array.from(lookAroundWindow([1]))).toEqual([[undefined, 1, undefined]]);
+    expect(Array.from(lookAroundWindow([1, 2]))).toEqual([[undefined, 1, 2], [1, 2, undefined]]);
+    expect(Array.from(lookAroundWindow([1, 2, 3]))).toEqual([[undefined, 1, 2], [1, 2, 3], [2, 3, undefined]]);
+  });
+
+  test('handles larger than window', () => {
+    expect(Array.from(lookAroundWindow([1, 2, 3, 4]))).toEqual([
+      [undefined, 1, 2],
+      [1, 2, 3],
+      [2, 3, 4],
+      [3, 4, undefined],
+    ]);
+  });
+});
+
+describe('zip', () => {
+  test('handles empty', () => {
+    expect(Array.from(zip([], []))).toEqual([]);
+  });
+
+  test('uneven throws error', () => {
+    expect(() => Array.from(zip([1], [2, 3]))).toThrow();
+  });
+
+  test('handles even', () => {
+    expect(Array.from(zip([1, 2], [3, 4]))).toEqual([[1, 3], [2, 4]]);
+  });
+});

package/src/BookReader/utils/SelectionStartedObserver.js

@@ -1,46 +0,0 @@
-// @ts-check
-export class SelectionStartedObserver {
-  loggedForSelection = false;
-  startedInSelector = false;
-
-  /**
-   * @param {string} selector
-   * @param {function(): any} handler
-   */
-  constructor(selector, handler) {
-    this.selector = selector;
-    this.handler = handler;
-  }
-
-  attach() {
-    // We can't just use select start, because Chrome fires that willy
-    // nilly even when a user slightly long presses.
-    document.addEventListener("selectstart", this._onSelectStart);
-    // This has to be on document :/
-    document.addEventListener("selectionchange", this._onSelectionChange);
-  }
-
-  detach() {
-    document.removeEventListener("selectstart", this._onSelectStart);
-    document.removeEventListener("selectionchange", this._onSelectionChange);
-  }
-
-  /**
-   * @param {Event} ev
-   */
-  _onSelectStart = (ev) => {
-    this.loggedForSelection = false;
-    // Use jQuery because ev.target could be a Node (eg TextNode), which
-    // doesn't have .closest on it.
-    this.startedInSelector = $(ev.target).closest(this.selector).length > 0;
-  };
-
-  _onSelectionChange = () => {
-    if (this.loggedForSelection || !this.startedInSelector) return;
-    const sel = window.getSelection();
-    if (sel.toString()) {
-      this.loggedForSelection = true;
-      this.handler();
-    }
-  };
-}

package/tests/jest/BookReader/utils/SelectionStartedObserver.test.js

@@ -1,73 +0,0 @@
-// @ts-check
-import sinon from "sinon";
-import { SelectionStartedObserver } from "@/src/BookReader/utils/SelectionStartedObserver";
-
-afterEach(() => {
-  sinon.restore();
-});
-
-describe("SelectionStartedObserver", () => {
-  describe("_onSelectStart", () => {
-    test("sets matches selector correctly", () => {
-      const observer = new SelectionStartedObserver(".text-layer", () => {});
-      const ev = new Event("selectstart", {});
-      const target = document.createElement("div");
-      Object.defineProperty(ev, "target", { get: () => target });
-      observer._onSelectStart(ev);
-      expect(observer.startedInSelector).toBe(false);
-      target.classList.add("text-layer");
-      observer._onSelectStart(ev);
-      expect(observer.startedInSelector).toBe(true);
-      expect(observer.loggedForSelection).toBe(false);
-    });
-
-    test("resets loggedForSelction", () => {
-      const observer = new SelectionStartedObserver(".text-layer", () => {});
-      const ev = new Event("selectstart", {});
-      const target = document.createElement("div");
-      Object.defineProperty(ev, "target", { get: () => target });
-      target.classList.add("text-layer");
-      observer._onSelectStart(ev);
-      expect(observer.loggedForSelection).toBe(false);
-      observer.loggedForSelection = true;
-      observer._onSelectStart(ev);
-      expect(observer.loggedForSelection).toBe(false);
-    });
-  });
-
-  test("_onSelectionChange", () => {
-    const handler = sinon.spy();
-    const observer = new SelectionStartedObserver(".text-layer", handler);
-    const ev = new Event("selectstart", {});
-    const target = document.createElement("div");
-    target.classList.add("text-layer");
-    Object.defineProperty(ev, "target", { get: () => target });
-    observer._onSelectStart(ev);
-
-    // stub window.getSelection
-    sinon.stub(window, "getSelection").returns({ toString: () => "test" });
-    observer._onSelectionChange();
-    expect(handler.callCount).toBe(1);
-    expect(observer.loggedForSelection).toBe(true);
-
-    // Calling it again does not call the handler again
-    observer._onSelectionChange();
-    expect(handler.callCount).toBe(1);
-
-    // Until the selection is cleared
-    observer._onSelectStart(ev);
-    expect(observer.loggedForSelection).toBe(false);
-    expect(handler.callCount).toBe(1);
-
-    observer._onSelectionChange();
-    expect(handler.callCount).toBe(2);
-
-    observer._onSelectStart(ev);
-
-    // Calling it again does not call the handler again
-    sinon.restore();
-    sinon.stub(window, "getSelection").returns({ toString: () => "" });
-    observer._onSelectionChange();
-    expect(handler.callCount).toBe(2);
-  });
-});