Merge branch 'clippathImprovement' into 'pregmod-master'

Clippath unique ID performance improvement

See merge request pregmodfan/fc-pregmod!8703

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));