Commit a2f6c64c authored by Fred Chasen's avatar Fred Chasen

Dom walk utils, remove node clones

parent 1ac34dbb
...@@ -50,13 +50,9 @@ class Chunker { ...@@ -50,13 +50,9 @@ class Chunker {
// frag.appendChild(section); // frag.appendChild(section);
for (let sectionContent of sections) { for (let sectionContent of sections) {
// Turn section into a fragment
let fragment = document.createDocumentFragment();
let section = sectionContent.cloneNode(true);
fragment.appendChild(section);
// Wait for section to finish rendering before adding the next section // Wait for section to finish rendering before adding the next section
let rendered = await this.section(fragment).then((section) => { let rendered = await this.section(sectionContent).then((section) => {
this.total += section.total; this.total += section.total;
this.sectionsTotal += 1; this.sectionsTotal += 1;
}); });
......
// import Mapping from "./utils/mapping"; import { getBoundingClientRect } from "../utils/utils";
import { walk, after, stackChildren } from "../utils/dom";
import Parser from "./parser"; import Parser from "./parser";
/** /**
...@@ -40,7 +41,7 @@ class Layout { ...@@ -40,7 +41,7 @@ class Layout {
start = this.getStart(content, breakToken); start = this.getStart(content, breakToken);
} }
let walker = this.walk(start); let walker = walk(start, content);
let node; let node;
let done; let done;
...@@ -71,8 +72,8 @@ class Layout { ...@@ -71,8 +72,8 @@ class Layout {
rendered = this.render(node, this.wrapper, breakToken, shallow); rendered = this.render(node, this.wrapper, breakToken, shallow);
if (!shallow) { if (!shallow) {
next = this.after(node); next = after(node, content);
walker = this.walk(next); walker = walk(next, content);
} }
} else { } else {
...@@ -116,7 +117,7 @@ class Layout { ...@@ -116,7 +117,7 @@ class Layout {
render(node, dest, breakToken, shallow=true, rebuild=true) { render(node, dest, breakToken, shallow=true, rebuild=true) {
let clone = this.createDOMNode(node); let clone = this.createDOMNode(node, !shallow);
if (node.parentNode && node.parentNode.nodeType === 1) { if (node.parentNode && node.parentNode.nodeType === 1) {
let parent = dest.querySelector("[ref='" + node.parentNode.getAttribute("ref") + "']"); let parent = dest.querySelector("[ref='" + node.parentNode.getAttribute("ref") + "']");
...@@ -144,21 +145,17 @@ class Layout { ...@@ -144,21 +145,17 @@ class Layout {
dest.appendChild(clone); dest.appendChild(clone);
} }
if (!shallow && node.childNodes) { // if (!shallow && node.childNodes) {
for (let child of node.childNodes) { // for (let child of node.childNodes) {
this.render(child, dest, breakToken, shallow, rebuild); // this.render(child, dest, breakToken, shallow, rebuild);
} // }
} // }
return clone; return clone;
} }
createDOMNode(n) { createDOMNode(n, deep=false) {
// let node = serialize(n, { shallow: true }); let node = n.cloneNode(deep);
// let frag = document.createRange().createContextualFragment(node);
// return frag;
let node = n.cloneNode(false);
return node; return node;
} }
...@@ -242,16 +239,7 @@ class Layout { ...@@ -242,16 +239,7 @@ class Layout {
removeEmpty() { removeEmpty() {
// Clean Empty Nodes // Clean Empty Nodes
let stack = []; let stack = stackChildren(this.wrapper);
(function recurse(currentNode) {
stack.unshift(currentNode);
let children = currentNode.children;
for (var i = 0, length = children.length; i < length; i++) {
recurse(children[i]);
}
})(this.wrapper);
stack.forEach((currentNode) => { stack.forEach((currentNode) => {
...@@ -279,14 +267,14 @@ class Layout { ...@@ -279,14 +267,14 @@ class Layout {
} }
floats(area) { floats(area) {
let bounds = this.getBoundingClientRect(this.element); let bounds = getBoundingClientRect(this.element);
let start = Math.round(bounds.left); let start = Math.round(bounds.left);
let end = Math.round(bounds.right); let end = Math.round(bounds.right);
let range; let range;
let walker = this.walk(this.wrapper.firstChild, this.wrapper); let walker = walk(this.wrapper.firstChild, this.wrapper);
// Find Start // Find Start
let startContainer, startOffset; let startContainer, startOffset;
...@@ -297,7 +285,7 @@ class Layout { ...@@ -297,7 +285,7 @@ class Layout {
node = next.value; node = next.value;
if (node) { if (node) {
let pos = this.getBoundingClientRect(node); let pos = getBoundingClientRect(node);
let left = Math.floor(pos.left); let left = Math.floor(pos.left);
let right = Math.floor(pos.right); let right = Math.floor(pos.right);
...@@ -321,32 +309,15 @@ class Layout { ...@@ -321,32 +309,15 @@ class Layout {
this._onUnderflow = func; this._onUnderflow = func;
} }
/**
* Generates a UUID
* based on: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
* @returns {string} uuid
*/
uuid() {
var d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
d += performance.now(); //use high-precision timer if available
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
overflow(area) { overflow(area) {
let bounds = this.getBoundingClientRect(this.element); let bounds = getBoundingClientRect(this.element);
let start = Math.round(bounds.left); let start = Math.round(bounds.left);
let end = Math.round(bounds.right); let end = Math.round(bounds.right);
let range; let range;
let walker = this.walk(this.wrapper.firstChild, this.wrapper); let walker = walk(this.wrapper.firstChild, this.wrapper);
// Find Start // Find Start
let startContainer, startOffset; let startContainer, startOffset;
...@@ -357,7 +328,7 @@ class Layout { ...@@ -357,7 +328,7 @@ class Layout {
node = next.value; node = next.value;
if (node) { if (node) {
let pos = this.getBoundingClientRect(node); let pos = getBoundingClientRect(node);
let left = Math.floor(pos.left); let left = Math.floor(pos.left);
let right = Math.floor(pos.right); let right = Math.floor(pos.right);
...@@ -396,9 +367,9 @@ class Layout { ...@@ -396,9 +367,9 @@ class Layout {
// Skip children // Skip children
if (right < end) { if (right < end) {
next = this.after(node, this.wrapper); next = after(node, this.wrapper);
if (next) { if (next) {
walker = this.walk(next, this.wrapper); walker = walk(next, this.wrapper);
} }
} }
...@@ -425,7 +396,7 @@ class Layout { ...@@ -425,7 +396,7 @@ class Layout {
break; break;
} }
pos = this.getBoundingClientRect(word); pos = getBoundingClientRect(word);
left = Math.floor(pos.left); left = Math.floor(pos.left);
if (left >= end) { if (left >= end) {
...@@ -463,67 +434,9 @@ class Layout { ...@@ -463,67 +434,9 @@ class Layout {
} }
} }
*walk(start, limiter) {
let node = start;
while (node) {
yield node;
if (node.childNodes.length) {
node = node.firstChild;
} else if (node.nextSibling) {
node = node.nextSibling;
} else {
while (node) {
node = node.parentNode;
if (limiter && node === limiter) {
node = undefined;
break;
}
if (node && node.nextSibling) {
node = node.nextSibling;
break;
}
}
}
}
}
skip(walker) {
let next = walker.next();
let node = next.value;
for (let child of node.childNodes) {
this.skip(walker);
}
}
after(node, limiter) {
let after = node;
if (after.nextSibling) {
after = after.nextSibling;
} else {
while (after) {
after = after.parentNode;
if (limiter && after === limiter) {
after = undefined;
break;
}
if (after && after.nextSibling) {
after = after.nextSibling;
break;
}
}
}
return after;
}
prepend(fragment, rebuild=true) { prepend(fragment, rebuild=true) {
// this.element.insertBefore(fragment, this.element.firstChild); // this.element.insertBefore(fragment, this.element.firstChild);
let walker = this.walk(fragment.firstChild, this.wrapper); let walker = walk(fragment.firstChild, this.wrapper);
let next, node, done; let next, node, done;
let parent; let parent;
while (!done) { while (!done) {
...@@ -570,21 +483,6 @@ class Layout { ...@@ -570,21 +483,6 @@ class Layout {
} }
} }
getBoundingClientRect(element) {
if (!element) {
return;
}
let rect;
if (element.getBoundingClientRect) {
rect = element.getBoundingClientRect();
} else {
let range = document.createRange();
range.selectNode(element);
rect = range.getBoundingClientRect();
}
return rect;
}
listeners() { listeners() {
let wrapper = this.wrapper; let wrapper = this.wrapper;
let prevHeight = wrapper.getBoundingClientRect().height; let prevHeight = wrapper.getBoundingClientRect().height;
......
// import Mapping from "./utils/mapping";
import Layout from "./layout"; import Layout from "./layout";
import Renderer from "./renderer"; import Renderer from "./renderer";
......
import { UUID } from "../utils/utils";
/** /**
* Render a flow of text offscreen * Render a flow of text offscreen
* @class * @class
...@@ -27,17 +29,17 @@ class Parser { ...@@ -27,17 +29,17 @@ class Parser {
} }
add(contents) { add(contents) {
let fragment = document.createDocumentFragment(); // let fragment = document.createDocumentFragment();
//
let children = [...contents.childNodes]; // let children = [...contents.childNodes];
for (let child of children) { // for (let child of children) {
let clone = child.cloneNode(true); // let clone = child.cloneNode(true);
fragment.appendChild(clone); // fragment.appendChild(clone);
} // }
this.addRefs(fragment); this.addRefs(contents);
return fragment; return contents;
} }
addRefs(content) { addRefs(content) {
...@@ -50,7 +52,7 @@ class Parser { ...@@ -50,7 +52,7 @@ class Parser {
let node; let node;
while(node = treeWalker.nextNode()) { while(node = treeWalker.nextNode()) {
let uuid = this.uuid(); let uuid = UUID();
node.setAttribute("ref", uuid); node.setAttribute("ref", uuid);
node.setAttribute("children", node.childNodes.length); node.setAttribute("children", node.childNodes.length);
...@@ -63,28 +65,6 @@ class Parser { ...@@ -63,28 +65,6 @@ class Parser {
return this.refs[ref]; return this.refs[ref];
} }
*walk(start) {
let node = start || this.dom[0];
while (node) {
yield node;
if (node.childNodes && node.childNodes.length) {
node = node.childNodes[0];
} else if (node.nextSibling) {
node = node.nextSibling;
} else {
while (node) {
node = node.parentNode;
if (node && node.nextSibling) {
node = node.nextSibling;
break;
}
}
}
}
}
// isWrapper(element) { // isWrapper(element) {
// return wrappersRegex.test(element.nodeName); // return wrappersRegex.test(element.nodeName);
// } // }
...@@ -101,39 +81,6 @@ class Parser { ...@@ -101,39 +81,6 @@ class Parser {
return node.childNodes && node.childNodes.length; return node.childNodes && node.childNodes.length;
} }
after(node) {
let after = node;
if (after.nextSibling) {
after = after.nextSibling;
} else {
while (after) {
after = after.parentNode;
if (after && after.nextSibling) {
after = after.nextSibling;
break;
}
}
}
return after;
}
/**
* Generates a UUID
* based on: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
* @returns {string} uuid
*/
uuid() {
var d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
d += performance.now(); //use high-precision timer if available
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
destroy() { destroy() {
this.refs = undefined; this.refs = undefined;
......
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