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

22
js/editor.js
View File

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