Sindbad~EG File Manager

// Create an off-screen SVG container for measurement
const offScreenSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
offScreenSvg.setAttribute("width", 0);
offScreenSvg.setAttribute("height", 0);
offScreenSvg.style.position = "absolute";
offScreenSvg.style.visibility = "hidden";
document.body.appendChild(offScreenSvg);

// Function to compute text length
function computeTextLength(textContent) {
    const textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
    textElement.textContent = textContent;
    offScreenSvg.appendChild(textElement);

    const length = textElement.getComputedTextLength();

    // Clean up
    offScreenSvg.removeChild(textElement);

    return length;
}

 
 
 function wrapSVGTextWithTspans(svgElement, maxWidth) {
    const svgNS = "http://www.w3.org/2000/svg";
    const textElement = svgElement.querySelector("text");
    const originalText = textElement.innerHTML;
    textElement.innerHTML = '';
    const parser = new DOMParser();
    const parsedText = parser.parseFromString(`<text>${originalText}</text>`, "application/xml").documentElement;
    let lineNumber = 0;
    const lineHeight = 18;
    let line = "";

    function processFragment(fragment) {
        const words = fragment.split(" ");
		  let dy = lineHeight;
        words.forEach(word => {
            const testLine = line + word + " ";
            const testWidth = computeTextLength(testLine);
            if (testWidth > maxWidth && line !== "") {
                const tspan = document.createElementNS(svgNS, "tspan");
				    tspan.setAttribute("x", "10"); // Set your desired x position here
					 dy = lineHeight;
					 if(lineNumber == 0)
						 dy = 0;
				    tspan.setAttribute("dy", dy + "px"); // Set dy relative to the previous line
                tspan.textContent = line.trim()+ " ";
                textElement.appendChild(tspan);
                line = word + " ";
                lineNumber++;
					 // console.log(word, (lineNumber + 1)*lineHeight);
            } else 
				{
                line = testLine;
            }
        });
		  // finished all the words in this fragment
		  const tspan = document.createElementNS(svgNS, "tspan");
		  tspan.setAttribute("x", "10"); // Set your desired x position here
		  dy = lineHeight;
		  if(lineNumber == 0)
			 dy = 0;
	     tspan.setAttribute("dy", dy + "px"); // Set dy relative to the previous line
        tspan.textContent = line.trim() + " ";
        textElement.appendChild(tspan);
        line = "";
        lineNumber++;
    }  // end of processFragment

    parsedText.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
            processFragment(node.textContent);
        } 
		  else 
		  if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "tspan") {
            const tempTspan = document.createElementNS(svgNS, "tspan");
            for (const attr of node.attributes) {
					tempTspan.setAttribute(attr.name, attr.value);
            }
			   tempTspan.textContent = node.textContent; 
				//console.log(node);
				//console.log("tempTspan is", tempTspan);
            textElement.appendChild(tempTspan);
            lineNumber++;
        }
    });

    if (line !== "") {
        const tspan = document.createElementNS(svgNS, "tspan");
        tspan.setAttribute("x", "10");
        tspan.setAttribute("dy", lineHeight);
        tspan.textContent = line.trim();
        textElement.appendChild(tspan);
    }
	 // Set the height property of textElement based on the number of lines and lineHeight
	 const totalHeight = (lineNumber + 1) * 1.35 * lineHeight; 
	 svgElement.setAttribute("height", totalHeight + "px"); // setting height in points, adjust unit if necessary
	//  console.log("setting height:", svgElement.getAttribute("height"));
}