Refactored app to include all the ink.js typography.
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
/**
|
||||
* LayoutRenderer Module
|
||||
* Translates the abstract layout data into concrete visual elements (DOM nodes).
|
||||
*/
|
||||
export class LayoutRenderer {
|
||||
/**
|
||||
* Create a new LayoutRenderer
|
||||
* @param {Object} animationQueue - The AnimationQueue instance
|
||||
*/
|
||||
constructor(animationQueue) {
|
||||
this.animationQueue = animationQueue;
|
||||
this.fastForwardingAll = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a paragraph based on layout data
|
||||
* @param {Object} paragraphData - The layout data from ParagraphLayout
|
||||
* @param {number} delay - Initial delay for animations
|
||||
* @param {Array<number>} measure - Array of line width measurements
|
||||
* @returns {Array} Array containing the paragraph element and the final delay
|
||||
*/
|
||||
renderParagraph(paragraphData, delay = 0, measure = []) {
|
||||
const stack = [];
|
||||
let left = 0;
|
||||
const p = document.createElement("p");
|
||||
p.style.position = 'relative';
|
||||
p.classList.add("latest-paragraph");
|
||||
p.dataset.numberOfLines = paragraphData.breaks.length - 1;
|
||||
|
||||
const lineHeight = parseFloat(window.getComputedStyle(document.querySelector('#ruler')).lineHeight);
|
||||
const lineWidth = parseFloat(window.getComputedStyle(document.getElementById('story')).width);
|
||||
const pageHeight = parseFloat(window.getComputedStyle(document.getElementById('page_right')).height);
|
||||
|
||||
p.style.height = lineHeight * (paragraphData.breaks.length - 1) + 'px';
|
||||
const paragraphHeight = parseFloat(p.style.height);
|
||||
p.dataset.vpc = paragraphHeight * 100 / pageHeight;
|
||||
p.style.marginBlockEnd = 0;
|
||||
stack.push(p);
|
||||
|
||||
for (let i = 1; i < paragraphData.breaks.length; i++) {
|
||||
left = measure[measure.length - 1] - measure[Math.min(i - 1, measure.length - 1)];
|
||||
let lastChild = null;
|
||||
let syllable = "";
|
||||
|
||||
for (let j = paragraphData.breaks[i-1].position; j <= paragraphData.breaks[i].position; j++) {
|
||||
if (paragraphData.nodes[j].type === 'box' && paragraphData.nodes[j].value !== '' && j < paragraphData.breaks[i].position) {
|
||||
if (j > paragraphData.breaks[i-1].position + 1 && paragraphData.nodes[j-1].type === 'penalty' && lastChild) {
|
||||
syllable += '\u200c' + paragraphData.nodes[j].value;
|
||||
lastChild.innerHTML = syllable;
|
||||
left += paragraphData.nodes[j].width;
|
||||
} else {
|
||||
let word = document.createElement("span");
|
||||
word.style.position = 'absolute';
|
||||
word.classList.add("fade-in");
|
||||
word.style.animationDuration = this.animationQueue.getSpeed() * 10 + 'ms';
|
||||
word.style.top = lineHeight * (i - 1) * 100 / paragraphHeight + '%';
|
||||
word.style.left = left * 100 / lineWidth + '%';
|
||||
syllable = paragraphData.nodes[j].value;
|
||||
word.innerHTML = syllable;
|
||||
lastChild = word;
|
||||
|
||||
if (!this.fastForwardingAll) {
|
||||
this.insertAfter(delay, stack[stack.length-1], word);
|
||||
}
|
||||
|
||||
delay += this.animationQueue.getSpeed();
|
||||
left += paragraphData.nodes[j].width;
|
||||
}
|
||||
} else if (paragraphData.nodes[j].type === 'tag') {
|
||||
if (paragraphData.nodes[j].value.substr(0, 2) == '</') {
|
||||
stack.pop();
|
||||
} else {
|
||||
let tmp = document.createElement('div');
|
||||
tmp.innerHTML = paragraphData.nodes[j].value;
|
||||
const word = tmp.firstChild;
|
||||
word.style.left = left * 100 / lineWidth + '%';
|
||||
stack[stack.length-1].appendChild(word);
|
||||
stack.push(word);
|
||||
}
|
||||
} else if (j > paragraphData.breaks[i-1].position && paragraphData.nodes[j].type === 'glue' && paragraphData.nodes[j].width !== 0 && j <= paragraphData.breaks[i].position) {
|
||||
// Insert space character
|
||||
if (paragraphData.breaks[i].ratio > 0) {
|
||||
left += paragraphData.nodes[j].width + paragraphData.breaks[i].ratio * paragraphData.nodes[j].stretch;
|
||||
} else {
|
||||
left += paragraphData.nodes[j].width + paragraphData.breaks[i].ratio * paragraphData.nodes[j].shrink;
|
||||
}
|
||||
|
||||
let word = document.createElement("span");
|
||||
word.style.position = 'absolute';
|
||||
word.classList.add("fade-in");
|
||||
word.style.top = lineHeight * (i - 1) * 100 / paragraphHeight + '%';
|
||||
word.style.left = left * 100 / lineWidth + '%';
|
||||
word.innerHTML = " ";
|
||||
|
||||
if (!this.fastForwardingAll) {
|
||||
this.insertAfter(delay, stack[stack.length-1], word);
|
||||
}
|
||||
} else if (paragraphData.nodes[j].type === 'penalty' && paragraphData.nodes[j].penalty === 100 && j === paragraphData.breaks[i].position) {
|
||||
// Create a hyphen at the end of the line if breaking at a hyphenation point
|
||||
let hyphen = document.createElement("span");
|
||||
hyphen.style.position = 'absolute';
|
||||
hyphen.classList.add("fade-in");
|
||||
hyphen.classList.add("hyphen-marker"); // Add a class for easier styling if needed
|
||||
hyphen.style.top = lineHeight * (i - 1) * 100 / paragraphHeight + '%';
|
||||
hyphen.style.left = left * 100 / lineWidth + '%';
|
||||
hyphen.innerHTML = "-";
|
||||
|
||||
// Ensure hyphen is visible with stronger styling
|
||||
hyphen.style.fontWeight = "normal";
|
||||
hyphen.style.opacity = "1";
|
||||
|
||||
if (!this.fastForwardingAll) {
|
||||
this.insertAfter(delay, stack[stack.length-1], hyphen);
|
||||
// Log for debugging
|
||||
console.log("Inserted hyphen at line break:", i, "position:", left);
|
||||
}
|
||||
|
||||
delay += this.animationQueue.getSpeed();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [p, delay];
|
||||
}
|
||||
|
||||
/**
|
||||
* Insert an element after a delay
|
||||
* @param {number} delay - The delay in milliseconds
|
||||
* @param {HTMLElement} target - The target element to append to
|
||||
* @param {HTMLElement} el - The element to insert
|
||||
* @param {boolean} fadeIn - Whether to fade in the element
|
||||
*/
|
||||
insertAfter(delay, target, el, fadeIn = true) {
|
||||
if (fadeIn) {
|
||||
el.classList.add("fade-in");
|
||||
this.animationQueue.schedule(function() {
|
||||
target.appendChild(el);
|
||||
}, delay);
|
||||
} else {
|
||||
this.animationQueue.schedule(function() {
|
||||
target.appendChild(el);
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an element after a delay
|
||||
* @param {number} delay - The delay in milliseconds
|
||||
* @param {HTMLElement} el - The element to show
|
||||
*/
|
||||
showAfter(delay, el) {
|
||||
el.classList.add("hide");
|
||||
setTimeout(function() {
|
||||
setTimeout(function() { el.classList.remove("hide") }, delay);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a visual tag
|
||||
* @param {string} tagType - The type of tag (IMAGE, BACKGROUND, etc.)
|
||||
* @param {string} tagValue - The value of the tag
|
||||
* @param {HTMLElement} container - The container to append to
|
||||
* @param {number} delay - The delay in milliseconds
|
||||
* @returns {HTMLElement|null} The created element or null
|
||||
*/
|
||||
renderVisualTag(tagType, tagValue, container, delay = 0) {
|
||||
switch (tagType) {
|
||||
case "IMAGE":
|
||||
const imageElement = document.createElement('img');
|
||||
imageElement.src = tagValue;
|
||||
container.appendChild(imageElement);
|
||||
this.showAfter(delay, imageElement);
|
||||
return imageElement;
|
||||
|
||||
case "BACKGROUND":
|
||||
const outerScrollContainer = document.querySelector('#book');
|
||||
outerScrollContainer.style.backgroundImage = 'url(' + tagValue + ')';
|
||||
return null;
|
||||
|
||||
case "CHAPTER":
|
||||
const h = document.createElement('H2');
|
||||
h.appendChild(document.createTextNode(tagValue));
|
||||
h.classList.add("chapter-heading");
|
||||
h.classList.add("fade-in");
|
||||
container.appendChild(h);
|
||||
return h;
|
||||
|
||||
case "SEPARATOR":
|
||||
const d = document.createElement('double');
|
||||
d.appendChild(document.createTextNode('\u2766'));
|
||||
d.classList.add("fade-in");
|
||||
d.classList.add("separator");
|
||||
container.appendChild(d);
|
||||
return d;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the fast forwarding state
|
||||
* @param {boolean} state - The fast forwarding state
|
||||
*/
|
||||
setFastForwardingAll(state) {
|
||||
this.fastForwardingAll = state;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the fast forwarding state
|
||||
* @returns {boolean} The fast forwarding state
|
||||
*/
|
||||
getFastForwardingAll() {
|
||||
return this.fastForwardingAll;
|
||||
}
|
||||
|
||||
/**
|
||||
* Smooth scroll to an element
|
||||
* @param {HTMLElement} target - The target element to scroll to
|
||||
* @param {number} duration - The duration of the scroll animation
|
||||
*/
|
||||
smoothScroll(target, duration) {
|
||||
const display = document.getElementById('page_right');
|
||||
const targetPosition = target.getBoundingClientRect().top;
|
||||
const startPosition = display.scrollTop;
|
||||
const distance = targetPosition;
|
||||
let startTime = null;
|
||||
|
||||
if (duration < 5) {
|
||||
display.scrollTo(0, targetPosition);
|
||||
return;
|
||||
}
|
||||
|
||||
function animation(currentTime) {
|
||||
if (startTime === null) startTime = currentTime;
|
||||
const timeElapsed = currentTime - startTime;
|
||||
const run = ease(timeElapsed, startPosition, distance, duration);
|
||||
display.scrollTo(0, run);
|
||||
if (timeElapsed < duration) requestAnimationFrame(animation);
|
||||
}
|
||||
|
||||
function ease(t, b, c, d) {
|
||||
t /= d / 2;
|
||||
if (t < 1) return c / 2 * t * t + b;
|
||||
t--;
|
||||
return -c / 2 * (t * (t - 2) - 1) + b;
|
||||
}
|
||||
|
||||
requestAnimationFrame(animation);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user