diff --git a/js/artInfrastructure.js b/js/artInfrastructure.js index 5d0feeecfaaa99fbd825869c8d66f88446954cf7..006903856db056408c8fae5948dee7b79018c27f 100644 --- a/js/artInfrastructure.js +++ b/js/artInfrastructure.js @@ -49,6 +49,8 @@ App.Art.SvgQueue = class { this._container = []; this._cache = cache; this._displayClass = displayClass; + this._defIDs = []; + this._rndID = 0; } /** transform a node via the transform rules @@ -82,6 +84,33 @@ App.Art.SvgQueue = class { } } } + + /** Append IDs + * @param {Element} node + */ + _replaceIDs(node) { + if (node.hasAttribute('clip-path')) { + let cp = node.getAttribute('clip-path').split(")", 1); + let cpID = cp[0].split("_rndID_", 1); + node.setAttribute('clip-path', `${cpID}_rndID_${this._rndID})`); + } + if (node.hasAttribute('style')) { + let st = node.getAttribute('style'); + if (st.search("filter") > -1) { + for (const defID of this._defIDs) { + // Loop through all filter IDs and append the randum number to it + // Remove if another number is already in the ID + let origID = defID.split("_rndID_", 1); + st = st.replaceAll(defID, `${origID}_rndID_${this._rndID}`); + } + node.setAttribute('style', st); + } + } + for (const nodeChild of node.children) { + this._replaceIDs(nodeChild); + } + + } /** add an SVG from the cache to the render queue * @param {string} id @@ -116,33 +145,34 @@ App.Art.SvgQueue = class { */ addRevamped(id,rndID) { const res = this._cache.get(id); - let defIDs = []; + this._defIDs = []; + this._rndID = rndID; let clones = []; if (!res) { console.error(`Missing art resource: ${id}`); return; } for (const srcNode of res.children) { - // Extract all clip-path and filter IDs + // Extract all filter IDs const node = /** @type {Element} */ (srcNode.cloneNode(true)); if (node.nodeName == "defs") { for (const defChild of node.children) { - if (defChild.nodeName == "clipPath" || defChild.nodeName == "filter") { - defIDs.push(defChild.id); + + if (defChild.nodeName == "filter") { + this._defIDs.push(defChild.id); } } } } - for (const defID of defIDs) { - // Loop through all clip-path IDs and append the randum number to it - // Remove if another number is already in the ID - var n = defID.search("_rndID_"); - if (n == -1) { - res.innerHTML = res.innerHTML.replaceAll(defID, `${defID}_rndID_${rndID}`); + for (const srcNode of res.children) { + if (srcNode.nodeName == "defs") { + for (const defNode of srcNode.children) { + defNode.setAttribute("id", `${defNode.id.split("_rndID_", 1)}_rndID_${this._rndID}`); + } } else { - let origID = defID.split("_rndID_", 1); - res.innerHTML = res.innerHTML.replaceAll(defID, `${origID}_rndID_${rndID}`); + this._replaceIDs(srcNode); } + let n = srcNode.innerHTML.search("clipPath"); } for (const srcNode of res.children) { const node = /** @type {Element} */ (srcNode.cloneNode(true));