adam/SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Allow for newlines in wrapped text

Browse Source
This commit is contained in:
Adam Goldsmith 2017-10-06 19:15:22 -04:00
parent dfd6496513
commit 7a6ecc2202
1 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
js/editor.js
View File

@ -54,44 +54,50 @@ function handleUpload(event) {
function wrapSVGText(e, string) { function wrapSVGText(e, string) {
// TODO: bold or italic text // TODO: bold or italic text
e.innerHTML = ""; // clear element e.innerHTML = ""; // clear element
let tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); let lines = string.split("\n");
e.appendChild(tspan); if (e.getAttribute('default-font-size'))
let words = string.split(" "); e.setAttribute('font-size', e.getAttribute('default-font-size'));
let line = []; e.setAttribute('default-font-size', e.getAttribute('font-size'));
while(words.length > 0) { while (lines.length > 0) {
let word = words.shift(); let words = lines.shift().split(" ");
line.push(word); let tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.innerHTML = line.join(" "); tspan.setAttribute('x', e.getAttribute('x'));
// horizontal overflow if (e.innerHTML !== "") tspan.setAttribute('dy', e.getAttribute('font-size'));
// TODO: actually use units (also applies to vertical) e.appendChild(tspan);
if (word === "\n" || let line = [];
(parseFloat(e.getAttribute("width")) && while(words.length > 0) {
tspan.getComputedTextLength() > parseFloat(e.getAttribute("width")))) { let word = words.shift();
// if we have height, we can line wrap if (word === "") word = " ";
if (parseFloat(e.getAttribute("height")) && line.push(word);
e.children.length * parseFloat(e.getAttribute('font-size')) < tspan.innerHTML = line.join(" ");
parseFloat(e.getAttribute('height'))) { // horizontal overflow
words.unshift(line.pop()); // TODO: actually use units (also applies to vertical)
tspan.innerHTML = line.join(" "); if (parseFloat(e.getAttribute("width")) &&
line = []; tspan.getComputedTextLength() > parseFloat(e.getAttribute("width"))) {
// if we have height, we can line wrap
if (parseFloat(e.getAttribute("height")) &&
e.children.length * parseFloat(e.getAttribute('font-size')) <
parseFloat(e.getAttribute('height'))) {
words.unshift(line.pop());
tspan.innerHTML = line.join(" ");
line = [];
tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.setAttribute('x', e.getAttribute('x')); tspan.setAttribute('x', e.getAttribute('x'));
tspan.setAttribute('dy', e.getAttribute('font-size')); tspan.setAttribute('dy', e.getAttribute('font-size'));
e.appendChild(tspan); e.appendChild(tspan);
}
// vertical overflow or horizontal overflow with no height variable
// TODO: better with recursion instead?
else {
e.innerHTML = ""; // remove all tspans
// TODO: maybe binary search font size later if I really care
e.setAttribute('font-size', parseFloat(e.getAttribute('font-size')) * 0.9);
words = [];
lines = string.split('\n');
console.log("resetting, size= " + e.getAttribute('font-size'));
}
} }
// vertical overflow or horizontal overflow with no height variable }
// TODO: better with recursion instead?
else {
line = [];
e.innerHTML = ""; // remove all tspans
tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
e.appendChild(tspan);
// TODO: maybe binary search font size later if I really care
e.setAttribute('font-size', parseFloat(e.getAttribute('font-size')) * 0.9);
words = string.split(" ");
console.log("resetting, size= " + e.getAttribute('font-size'));
}
}
} }
} }