Merge branch 'hyphens' into 'master'

Update Chunker layout to break inside words See merge request tools/pagedjs!20

Merge branch 'hyphens' into 'master'
Update Chunker layout to break inside words See merge request tools/pagedjs!20
32455eb9 · Fred Chasen · a709da7d · 44a42806 · 32455eb9 · 32455eb9
Commit 32455eb9 authored Sep 11, 2018 by Fred Chasen
5 changed files
--- a/specs/hyphens/awesome/__image_snapshots__/awesome-spec-js-css-is-awesome-should-create-a-pdf-1-snap.png
+++ b/specs/hyphens/awesome/__image_snapshots__/awesome-spec-js-css-is-awesome-should-create-a-pdf-1-snap.png
--- a/specs/hyphens/awesome/__image_snapshots__/awesome-spec-js-css-is-awesome-should-create-a-pdf-2-snap.png
+++ b/specs/hyphens/awesome/__image_snapshots__/awesome-spec-js-css-is-awesome-should-create-a-pdf-2-snap.png
--- a/specs/hyphens/awesome/awesome.html
+++ b/specs/hyphens/awesome/awesome.html
+<!DOCTYPE html PUBLIC>
+<html lang="en" lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta http-equiv="Content-Style-Type" content="text/css" />
+    <title>
+      CSS IS AWESOME!
+    </title>
+
+    <script src="../../../dist/paged.polyfill.js"></script>
+
+    <style>
+      /* interface */
+
+      @media screen {
+
+        body {
+          background: whitesmoke;
+        }
+
+        .pagedjs_page {
+          background: white;
+          margin-bottom: 10px;
+          box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
+        }
+
+        .pagedjs_pages {
+          width: calc(var(--width) * 2);
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+          margin: 0 auto;
+        }
+
+        /* .pagedjs_first_page {
+          margin-left: 50%;
+        } */
+      }
+    </style>
+
+    <style>
+    @page {
+      size: 10cm 10cm;
+      margin: 0 0.3cm;
+      /* box-shadow: 0 0 0 20px black; */
+    }
+
+    p {
+      font-size: 80pt;
+      margin:0;
+      font-family: arial, sans-serif;
+      padding-left: 0;
+      padding-right: 0;
+      hyphens: auto;
+      /* 	text-transform: lowercase; */
+    }
+    </style>
+
+
+
+
+
+  </head>
+  <body>
+
+
+  <p>CSS IS AWESOME!</p>
+
+  <p>
+    The quick brown fox jumps over the lazy dog.
+  </p>
+
+</body>
--- a/specs/hyphens/awesome/awesome.spec.js
+++ b/specs/hyphens/awesome/awesome.spec.js
+const TIMEOUT = 10000;
+
+describe('css is awesome', async () => {
+		let page;
+		let rendered;
+		beforeAll(async () => {
+			page = await loadPage('hyphens/awesome/awesome.html')
+			return page.rendered;
+		}, TIMEOUT)
+
+		afterAll(async () => {
+			if (!DEBUG) {
+				await page.close();
+			}
+		})
+
+		xit('should render 7 pages', async () => {
+			let pages = await page.$$eval(".pagedjs_page", (r) => {
+				return r.length;
+			});
+
+			expect(pages).toEqual(7);
+		})
+
+		xit('page 1 should have a hyphen', async () => {
+			let text = await page.$eval("[data-page-number='1']", (r) => r.textContent);
+
+			expect(text).toContain('\u2010');
+		})
+
+
+		if (!DEBUG) {
+			xit('should create a pdf', async () => {
+				let pdf = await page.pdf(PDF_SETTINGS);
+
+				expect(pdf).toMatchPDFSnapshot(1);
+				expect(pdf).toMatchPDFSnapshot(2);
+			})
+		}
+	}
+)
--- a/src/chunker/layout.js
+++ b/src/chunker/layout.js
@@ -299,7 +299,7 @@ class Layout {

  findBreakToken(overflow, content) {
    let offset = overflow.startOffset;
-    let node, renderedNode, ref, parent, index, temp;
+    let node, renderedNode, ref, parent, index, temp, startOffset;

    if (overflow.startContainer.nodeType === 1) {
      // node = children.querySelector("[data-ref='" + overflow.startContainer.childNodes[offset].getAttribute("data-ref") + "']");
@@ -326,6 +326,8 @@ class Layout {
      renderedNode = this.wrapper.querySelector("[data-ref='" + ref + "']");
      parent = content.querySelector("[data-ref='"+ renderedNode.getAttribute("data-ref") +"']");
      node = parent.childNodes[index];
+      startOffset = overflow.startContainer.textContent.slice(offset);
+      offset = parent.textContent.indexOf(startOffset);
    }

    if (!node) {
@@ -341,9 +343,21 @@ class Layout {

  removeOverflow(overflow) {

-    return overflow.extractContents();
+    if (overflow.startContainer.nodeType === 3 && overflow.startOffset > 0) {
+      let startText = overflow.startContainer.textContent;
+      let startOffset = overflow.startOffset;
+      let prevLetter = startText[startOffset-1];
+
+      // Add a hyphen if previous character is a letter
+      if (/^\w$/.test(prevLetter)) {
+        overflow.startContainer.textContent = startText.slice(0, startOffset) + "\u2010";
+        overflow.setStart(overflow.startContainer, startOffset + 1);
+      }
+    }
+

    // _requestIdleCallback(() => this.removeEmpty());
+    return overflow.extractContents();
  }

  removeEmpty() {
@@ -475,9 +489,10 @@ class Layout {
          range = document.createRange();
          offset = this.textBreak(node, start, end);
          if (!offset) {
-            offset = 0;
+            range = undefined;
+          } else {
+            range.setStart(node, offset);
          }
-          range.setStart(node, offset);
          break;
        }

@@ -506,7 +521,9 @@ class Layout {
  textBreak(node, start, end) {
    let wordwalker = this.words(node);
    let left = 0;
+    let right = 0;
    let word, next, done, pos;
+    let offset;
    while (!done) {
      next = wordwalker.next();
      word = next.value;
@@ -519,11 +536,41 @@ class Layout {
      pos = getBoundingClientRect(word);

      left = Math.floor(pos.left);
+      right = Math.floor(pos.right);
+
      if (left >= end) {
+        offset = word.startOffset;
        break;
      }
+
+      if (right > end) {
+        let letterwalker = this.letters(word);
+        let letter, nextLetter, doneLetter, posLetter;
+
+        while (!doneLetter) {
+          nextLetter = letterwalker.next();
+          letter = nextLetter.value;
+          doneLetter = nextLetter.done;
+
+          if (!letter) {
+            break;
+          }
+
+          pos = getBoundingClientRect(letter);
+          left = Math.floor(pos.left);
+
+          if (left >= end) {
+            offset = letter.startOffset;
+            done = true;
+
+            break;
+          }
+        }
+      }
+
    }
-    return word && word.startOffset;
+
+    return offset;
  }

  *words(node) {
@@ -536,8 +583,7 @@ class Layout {

    while(currentOffset < max) {
        currentLetter = currentText[currentOffset];
-
-       if (/^\w$/.test(currentLetter)) {
+       if (/^\S$/.test(currentLetter)) {
         if (!range) {
           range = document.createRange();
           range.setStart(node, currentOffset);
@@ -552,10 +598,38 @@ class Layout {

       currentOffset += 1;
    }
+
+    if (range) {
+      range.setEnd(node, currentOffset);
+      yield range;
+      range = undefined;
+    }
+  }
+
+  *letters(wordRange) {
+    let currentText = wordRange.startContainer;
+    let max = currentText.length;
+    let currentOffset = wordRange.startOffset;
+    let currentLetter;
+
+    let range;
+
+    while(currentOffset < max) {
+       currentLetter = currentText[currentOffset];
+       range = document.createRange();
+       range.setStart(currentText, currentOffset);
+       range.setEnd(currentText, currentOffset+1);
+
+       yield range;
+
+       currentOffset += 1;
+    }
  }

  prepend(fragment, rebuild=true) {
-    // this.element.insertBefore(fragment, this.element.firstChild);
+    if (!fragment) {
+      return;
+    }
    let walker = walk(fragment.firstChild, this.wrapper);
    let next, node, done;
    let parent;