Run results for: String wrapping

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser: Chrome 131

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
progressively	6722033.0 Ops/sec
split and wrap worsds	1464361.5 Ops/sec

HTML Preparation code:

<!--your preparation HTML code goes here-->

Tests:

progressively
var approxMeasure = (a) => a.length * 0.6 * 26; var getLine = ({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }) => { const line = str.slice(lineStartIndex, lineEndIndex); const lineWidth = measure(line); // in the current code something seems to be adjusting the max width based on the label width, but it is not in scope of the string wrapping // so I floor the delta for now. which is impresice but avoids wrapping the string based on sub-pixel discrepancies const delta = Math.floor(maxWidth - lineWidth); if (lineEndIndex + 1 > str.length && delta >= 0) { // string fits into max width completely return line; } const numberOfCharsDeviating = Math.floor( Math.abs(delta / standardCharWidth) ); if (delta < 0) { // do not exceed the maximum width, even if the dela is less than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex - Math.max(numberOfCharsDeviating, 1), standardCharWidth, maxWidth, measure, }); } else if (numberOfCharsDeviating > 0) { // add chars only if the delta is greater than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex + numberOfCharsDeviating - 1, standardCharWidth, maxWidth, measure, }); } // If there is a space within 3 chars at the end of the line, move the word to a next line const lastSpaceIndex = line.lastIndexOf(' '); if (lastSpaceIndex !== -1 && line.length - lastSpaceIndex <= 3) { return line.slice(0, lastSpaceIndex + 1); } // If there is no space in the whole current line, break it regardless of the next 3 chars // but if there is a space within the current line: // - move the word to a next line if there is a space within the next 3 chars // - move the word to a next line the remaining chars are less than 4 const remainingTextLength = str.length - lineEndIndex - 1; if ( lastSpaceIndex !== -1 && (remainingTextLength < 3 || str.slice(lineEndIndex, lineEndIndex + 4).includes(' ')) ) { return line.slice(0, lastSpaceIndex + 1); } else if (remainingTextLength < 3) { // If ther remaining text is too short for a line and there is no space in the current line, // the the word should be truncated ideally, but I am making up the requirements here. // So for now we will simply break so that there are at least 4 chars on the next line (e.g. "Applica" -> "tion") return line.slice(0, line.length - (3 - remainingTextLength)); } return line; }; function wrapString( str, maxWidth, measure ) { if (str.length < 7) { return [str]; } const standardCharWidth = measure('a'); const numberOfStandardCharsInLine = Math.floor(maxWidth / standardCharWidth); const lines = []; let lineStartIndex = 0; let lineEndIndex = numberOfStandardCharsInLine; while (lineStartIndex < str.length) { const line = getLine({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }); lines.push(line); lineStartIndex = lineStartIndex + line.length; lineEndIndex = lineStartIndex + numberOfStandardCharsInLine; } return lines; }; const ws = new RegExp('[ \\t\\n]+'); // should include all whitespace characters as defined by Ardoq // or possibly change "measure" to work thusly // measure(str, a, b) returns the length of the substring function wrapString_2( str, width, measure ) { const tokens = str.split(ws, 100); const output = []; const wrapWord = (word) => { if (measure(word) > width) { // str contains no line breaks but must be fit to width // this implementation can break anywhere, although in // practice it should not break in all sorts of clever // circumstances such as after a currency symbol let a = 0; while (a < word.length) { let b = word.length; while (measure(word.slice(a, b)) > width) { b = b - 1; } if (b === word.length) { break; } output.push(word.slice(a, b)); a = b; } return word.slice(a); } return word; }; for (let i = 0; i < tokens.length;) { let line = wrapWord(tokens[i++]); while (i < tokens.length && measure(line.concat(' ', tokens[i])) < width) { line = line.concat(' ', tokens[i++]); } output.push(line); } return output; }; var testString = "djf sjdbfsd sdkfjsdfsj dh shd djd d d dkskdfsdjkdj.sfks" const result = wrapString(testString, 500, approxMeasure)
split and wrap worsds
var approxMeasure = (a) => a.length * 0.6 * 26; var getLine = ({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }) => { const line = str.slice(lineStartIndex, lineEndIndex); const lineWidth = measure(line); // in the current code something seems to be adjusting the max width based on the label width, but it is not in scope of the string wrapping // so I floor the delta for now. which is impresice but avoids wrapping the string based on sub-pixel discrepancies const delta = Math.floor(maxWidth - lineWidth); if (lineEndIndex + 1 > str.length && delta >= 0) { // string fits into max width completely return line; } const numberOfCharsDeviating = Math.floor( Math.abs(delta / standardCharWidth) ); if (delta < 0) { // do not exceed the maximum width, even if the dela is less than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex - Math.max(numberOfCharsDeviating, 1), standardCharWidth, maxWidth, measure, }); } else if (numberOfCharsDeviating > 0) { // add chars only if the delta is greater than the standard char width return getLine({ str, lineStartIndex, lineEndIndex: lineEndIndex + numberOfCharsDeviating - 1, standardCharWidth, maxWidth, measure, }); } // If there is a space within 3 chars at the end of the line, move the word to a next line const lastSpaceIndex = line.lastIndexOf(' '); if (lastSpaceIndex !== -1 && line.length - lastSpaceIndex <= 3) { return line.slice(0, lastSpaceIndex + 1); } // If there is no space in the whole current line, break it regardless of the next 3 chars // but if there is a space within the current line: // - move the word to a next line if there is a space within the next 3 chars // - move the word to a next line the remaining chars are less than 4 const remainingTextLength = str.length - lineEndIndex - 1; if ( lastSpaceIndex !== -1 && (remainingTextLength < 3 || str.slice(lineEndIndex, lineEndIndex + 4).includes(' ')) ) { return line.slice(0, lastSpaceIndex + 1); } else if (remainingTextLength < 3) { // If ther remaining text is too short for a line and there is no space in the current line, // the the word should be truncated ideally, but I am making up the requirements here. // So for now we will simply break so that there are at least 4 chars on the next line (e.g. "Applica" -> "tion") return line.slice(0, line.length - (3 - remainingTextLength)); } return line; }; function wrapString( str, maxWidth, measure ) { if (str.length < 7) { return [str]; } const standardCharWidth = measure('a'); const numberOfStandardCharsInLine = Math.floor(maxWidth / standardCharWidth); const lines = []; let lineStartIndex = 0; let lineEndIndex = numberOfStandardCharsInLine; while (lineStartIndex < str.length) { const line = getLine({ str, lineStartIndex, lineEndIndex, standardCharWidth, maxWidth, measure, }); lines.push(line); lineStartIndex = lineStartIndex + line.length; lineEndIndex = lineStartIndex + numberOfStandardCharsInLine; } return lines; }; const ws = new RegExp('[ \\t\\n]+'); // should include all whitespace characters as defined by Ardoq // or possibly change "measure" to work thusly // measure(str, a, b) returns the length of the substring function wrapString_2( str, width, measure ) { const tokens = str.split(ws, 100); const output = []; const wrapWord = (word) => { if (measure(word) > width) { // str contains no line breaks but must be fit to width // this implementation can break anywhere, although in // practice it should not break in all sorts of clever // circumstances such as after a currency symbol let a = 0; while (a < word.length) { let b = word.length; while (measure(word.slice(a, b)) > width) { b = b - 1; } if (b === word.length) { break; } output.push(word.slice(a, b)); a = b; } return word.slice(a); } return word; }; for (let i = 0; i < tokens.length;) { let line = wrapWord(tokens[i++]); while (i < tokens.length && measure(line.concat(' ', tokens[i])) < width) { line = line.concat(' ', tokens[i++]); } output.push(line); } return output; }; var testString = "djf sjdbfsd sdkfjsdfsj dh shd djd d d dkskdfsdjkdj.sfks" const result = wrapString_2(testString, 500, approxMeasure)

Run results for: String wrapping

progressively

split and wrap worsds