Commit e99403ec authored by Fred Chasen's avatar Fred Chasen

Break text by each rect, only break after br

parent cb0fc8c0
import { getBoundingClientRect } from "../utils/utils";
import { getBoundingClientRect, getClientRects } from "../utils/utils";
import {
walk,
nodeAfter,
......@@ -303,7 +303,7 @@ class Layout {
// Find Start
let startContainer, startOffset;
let next, done, node, offset, skip, breakAvoid, prev;
let next, done, node, offset, skip, breakAvoid, prev, br;
while (!done) {
next = walker.next();
done = next.done;
......@@ -311,6 +311,7 @@ class Layout {
skip = false;
breakAvoid = false;
prev = undefined;
br = undefined;
if (node) {
let pos = getBoundingClientRect(node);
......@@ -320,12 +321,14 @@ class Layout {
if (!range && left >= end) {
// Check if it is a float
let isFloat = false;
if (isElement(node)) {
if (isElement(node) ) {
let styles = window.getComputedStyle(node);
isFloat = styles.getPropertyValue("float") !== "none";
skip = styles.getPropertyValue("break-inside") === "avoid";
breakAvoid = node.dataset.breakBefore === "avoid" || node.dataset.previousBreakAfter === "avoid";
prev = breakAvoid && nodeBefore(node, rendered);
br = node.tagName === "BR";
}
if (prev) {
......@@ -334,7 +337,7 @@ class Layout {
break;
}
if (!isFloat && isElement(node)) {
if (!br && !isFloat && isElement(node)) {
range = document.createRange();
range.setStartBefore(node);
break;
......@@ -349,16 +352,29 @@ class Layout {
}
if (!range && isText(node) &&
right > end && node.textContent.trim().length &&
node.textContent.trim().length &&
window.getComputedStyle(node.parentNode)["break-inside"] !== "avoid") {
range = document.createRange();
offset = this.textBreak(node, start, end);
if (!offset) {
range = undefined;
} else {
range.setStart(node, offset);
let rects = getClientRects(node);
let rect;
left = 0;
for (var i = 0; i != rects.length; i++) {
rect = rects[i];
if (!left || rect.left > left) {
left = rect.left;
}
}
if(left >= end) {
range = document.createRange();
offset = this.textBreak(node, start, end);
if (!offset) {
range = undefined;
} else {
range.setStart(node, offset);
}
break;
}
break;
}
// Skip children
......
......@@ -13,6 +13,21 @@ export function getBoundingClientRect(element) {
return rect;
}
export function getClientRects(element) {
if (!element) {
return;
}
let rect;
if (typeof element.getClientRects !== "undefined") {
rect = element.getClientRects();
} else {
let range = document.createRange();
range.selectNode(element);
rect = range.getClientRects();
}
return rect;
}
/**
* Generates a UUID
* based on: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment