Source: scripts/applications/common/svgManipulation.js

function setSvgWidthTo(svgData, width) {
    // Search the string: width="dd.ddddpt"
    let match = svgData.match(/width="(\d*.\d*pt)"/);
    let foundWidth = match[1];   // dd.dddd
    return svgData.replace(foundWidth, width);   // replace dd.ddd with width
}

function showArrows(svgDiv) {
    // Show arrows and symbol labels
    let arrows = svgDiv.querySelectorAll(".arrow");
    for (let arrow of arrows) {
        arrow.style.display = "block";
        if (colors.currentForeground === colors.keyDark) {
            arrow.style.opacity = "1"; // to make them more visible
        }
    }
}

function hideVoltageArrows(svgDiv) {
    let voltageArrows = svgDiv.querySelectorAll(".arrow.voltage-label");
    for (let arrow of voltageArrows) {
        arrow.style.display = "none";
    }
}

function hideItotArrow(svgDiv) {
    let itotArrow = svgDiv.querySelectorAll(`.current-label.arrow.I${languageManager.currentLang.simplifier.totalSuffix}`);
    for (let arrow of itotArrow) {
        arrow.style.display = "none";
    }
}

function showVoltageArrows(svgDiv) {
    let voltageArrows = svgDiv.querySelectorAll(".arrow.voltage-label");
    for (let arrow of voltageArrows) {
        arrow.style.display = "block";
    }
}

function hideCurrentArrows(svgDiv) {
    let currentArrows = svgDiv.querySelectorAll(".arrow.current-label");
    for (let arrow of currentArrows) {
        arrow.style.display = "none";
    }
}

function showCurrentArrows(svgDiv) {
    let currentArrows = svgDiv.querySelectorAll(".arrow.current-label");
    for (let arrow of currentArrows) {
        arrow.style.display = "block";
    }
}

function hideSourceLabel(svgDiv, toHide=["V1"]) {
    for (let label of toHide){
        let sourceLabel = svgDiv.querySelector(`.element-label.${label}`);
        if (sourceLabel !== null) {
            sourceLabel.style.display = "none";
        }
    }
}

function hideElementLabels(svgDiv) {
    let labels = svgDiv.querySelectorAll(".element-label");
    labels.forEach(label => label.style.display = "none");
}

function hideLabels(svgDiv) {
    let labels = svgDiv.querySelectorAll(".element-label");
    labels.forEach(label => label.style.display = "none");
}

function hideSvgArrows(circuitDiv) {
    let arrows = circuitDiv.getElementsByClassName("arrow");
    for (let arrow of arrows) arrow.style.display = "none";
}

class SimplifierSVG {
    /** @type {HTMLDivElement} */
    div
    /** @param svg {string} the svg as a string
     * @param idIdentifier {string} may be empty, id is build like this: svgDiv${idIdentifier}${state.pictureCounter}
     */
    constructor(svg, idIdentifier= "") {
        /** @type {HTMLDivElement} */
        this.div = document.createElement('div');

        this.div.id = `svgDiv${idIdentifier}${state.pictureCounter}`;

        this.div.classList.add("svg-container", "p-2");
        this.div.innerHTML = svg;
        this.setSvgWidthTo(100);
        this.div.style.border = `1px solid ${colors.currentForeground}`;
        this.div.style.borderRadius = "6px";
        this.div.style.width = "350px";
        this.div.style.maxWidth = "350px;";
        this.div.style.position = "relative";
    }

    updateSvg(svgString){
        this.div.innerHTML = svgString;
    }

    /** @returns {HTMLDivElement} returns div element with bootsrap classes set for svg and the inner html of this.svgString */
    get div(){
        return this.div
    }

    /** @param width {int} sets the width in % from 0 to 100 */
    setSvgWidthTo(width) {
        // Search the string: width="dd.ddddpt"
        let svgData = this.div.innerHTML;
        let match = svgData.match(/width="(\d*.\d*pt)"/);
        let foundWidth = match[1];   // dd.dddd
        this.div.innerHTML = svgData.replace(foundWidth, width.toString() + "%"); // replace dd.ddd with width
    }

    updateColor(){
        this.updateSvg(this.div.innerHTML.replaceAll(colors.getOldSvgForegroundColor, colors.currentForeground));
    }

    showArrows() {
        // Show arrows and symbol labels
        let arrows = this.div.querySelectorAll(".arrow");
        for (let arrow of arrows) {
            arrow.style.display = "block";
            if (colors.currentForeground === colors.keyDark) {
                arrow.style.opacity = "1"; // to make them more visible
            }
        }
    }

    hideVoltageArrows() {
        let voltageArrows = this.div.querySelectorAll(".arrow.voltage-label");
        for (let arrow of voltageArrows) {
            arrow.style.display = "none";
        }
    }

    hideItotArrow() {
        let itotArrow = this.div.querySelectorAll(`.current-label.arrow.I${languageManager.currentLang.simplifier.totalSuffix}`);
        for (let arrow of itotArrow) {
            arrow.style.display = "none";
        }
    }

    showVoltageArrows() {
        let voltageArrows = this.div.querySelectorAll(".arrow.voltage-label");
        for (let arrow of voltageArrows) {
            arrow.style.display = "block";
        }
    }

    hideCurrentArrows() {
        let currentArrows = this.div.querySelectorAll(".arrow.current-label");
        for (let arrow of currentArrows) {
            arrow.style.display = "none";
        }
    }

    showCurrentArrows() {
        let currentArrows = this.div.querySelectorAll(".arrow.current-label");
        for (let arrow of currentArrows) {
            arrow.style.display = "block";
        }
    }

    hideSourceLabel(toHide=["V1"]) {
        for (let label of toHide){
            let sourceLabel = this.div.querySelector(`.element-label.${label}`);
            if (sourceLabel !== null) {
                sourceLabel.style.display = "none";
            }
        }
    }

    hideElementLabels() {
        let labels = this.div.querySelectorAll(".element-label");
        labels.forEach(label => label.style.display = "none");
    }

    hideLabels() {
        let labels = this.div.querySelectorAll(".element-label");
        labels.forEach(label => label.style.display = "none");
    }

    hideSvgArrows() {
        let arrows = this.div.getElementsByClassName("arrow");
        for (let arrow of arrows) arrow.style.display = "none";
    }

    fillLabels(){
        fillLabels(this.div);
    }

    increaseLabelFontSize() {
        let labels = this.div.querySelectorAll("text.arrow");
        labels.forEach(label => label.style.fontSize = "20px");
    }

}