From 85cf370fc1525523ed5090d9c6142c20b1becbe4 Mon Sep 17 00:00:00 2001
From: Keaeag3s <Keaeag3s@gmail.com>
Date: Tue, 12 Jan 2021 08:26:58 +0100
Subject: [PATCH] Fix of clip-paths not being used
Fix of the problem being discussed, but not related to, Issue #2705.
The problem is solved by making all IDs unique every time a revamped art svg is generated by appending a random number to the end of the IDs.
This prevents display:none skipping the defs.
---
js/artInfrastructure.js | 51 +++++++++++++++++++
.../vector_revamp/vectorRevampedArtControl.js | 18 +++----
2 files changed, 60 insertions(+), 9 deletions(-)
diff --git a/js/artInfrastructure.js b/js/artInfrastructure.js
index 164ba7608f1..5acfe252ecc 100644
--- a/js/artInfrastructure.js
+++ b/js/artInfrastructure.js
@@ -109,6 +109,57 @@ App.Art.SvgQueue = class {
}
this._container.push({attrs: res.attributes, nodes: clones});
}
+
+ /** add an revamped SVG from the cache to the render queue
+ * @param {string} id
+ * @param {int} rndID
+ */
+ addRevamped(id,rndID) {
+ const res = this._cache.get(id);
+ let defIDs = [];
+ let clones = [];
+ if (!res) {
+ console.error(`Missing art resource: ${id}`);
+ return;
+ }
+ for (const srcNode of res.children) {
+ // Extract all clip-path and 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);
+ }
+ }
+ }
+ }
+ 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}`);
+ } else {
+ let origID = defID.split("_rndID_", 1);
+ res.innerHTML = res.innerHTML.replaceAll(defID, `${origID}_rndID_${rndID}`);
+ }
+ }
+ for (const srcNode of res.children) {
+ const node = /** @type {Element} */ (srcNode.cloneNode(true));
+ this._transform(node);
+ this._setclip(node);
+ let transformNodes = node.querySelectorAll('g[data-transform]');
+ for (const child of transformNodes) {
+ this._transform(child);
+ }
+ let clipNodes = node.querySelectorAll('g[select_clip]');
+ for (const child of clipNodes) {
+ this._setclip(child);
+ }
+ clones.push(node);
+ }
+ this._container.push({attrs: res.attributes, nodes: clones});
+ }
/** concatenate the contents of a second queue into this one.
* displayClass must match. cache and transformFunc may differ (they are used only by add).
diff --git a/src/art/vector_revamp/vectorRevampedArtControl.js b/src/art/vector_revamp/vectorRevampedArtControl.js
index 105bed289f3..360a0e73ff8 100644
--- a/src/art/vector_revamp/vectorRevampedArtControl.js
+++ b/src/art/vector_revamp/vectorRevampedArtControl.js
@@ -25,7 +25,6 @@ App.Art.revampedVectorArtStyles = function(slave) {
// Create highlight and shade (must be done after base colors are set)
styleControl.applyLightAndShade();
styleControl.applyBellyMask(clothingControl.bellyLevel, clothingControl.torsoSize, clothingControl.bellyMaskOpa);
-
return {styleClass: displayClass, styleCSS: styleControl.StylesCss};
};
@@ -43,11 +42,11 @@ App.Art.revampedVectorArtElement = function(slave, displayClass) {
style.innerHTML = styleCSS;
res.appendChild(style);
}
-
- const revampedVectorArtControl = new RevampedArtControl(displayClass, slave, V.seeVectorArtHighlights, V.showBodyMods);
+ const randomID = Math.floor(Math.random() * 9007199254740991);
+ const revampedVectorArtControl = new RevampedArtControl(displayClass, slave, V.seeVectorArtHighlights, V.showBodyMods, randomID);
const layers = revampedVectorArtControl.Layers; // side effects are important, must fetch layers before getting transformRules (FIXME?)
const svgQueue = new App.Art.SvgQueue(revampedVectorArtControl.transformRules, App.Data.Art.VectorRevamp, displayClass);
- layers.forEach((l) => svgQueue.add(l));
+ layers.forEach((l) => svgQueue.addRevamped(l,randomID));
res.appendChild(svgQueue.output());
return res;
@@ -2268,9 +2267,10 @@ class ClothingControl {
}
class RevampedArtControl {
- constructor(artDisplayClass, artSlave, globalShowHighlights, globalShowBodyMods) {
+ constructor(artDisplayClass, artSlave, globalShowHighlights, globalShowBodyMods, randomID) {
this.artDisplayClass = artDisplayClass;
this.artSlave = artSlave;
+ this.randomID = randomID;
this.boobRightArtTransform = "";
this.boobLeftArtTransform = "";
this.boobOutfitArtTransform = "";
@@ -4042,9 +4042,9 @@ class RevampedArtControl {
get transformRules() {
let cpBelly = ``;
if (this.bellyLevel === 0) {
- cpBelly = `url(#clipPathTorso${this.torsoSize})`;
+ cpBelly = `url(#clipPathTorso${this.torsoSize}_rndID_${this.randomID})`;
} else {
- cpBelly = `url(#clipPathBelly_${this.bellyLevel}_${this.torsoSize})`;
+ cpBelly = `url(#clipPathBelly_${this.bellyLevel}_${this.torsoSize}_rndID_${this.randomID})`;
}
return [
{trigger: "boob_left", action: "transform", value: this.boobLeftArtTransform},
@@ -4053,9 +4053,9 @@ class RevampedArtControl {
{trigger: "bra_trans_a", action: "transform", value: this.braA_ArtTransform},
{trigger: "bra_trans_b", action: "transform", value: this.braB_ArtTransform},
{trigger: "pussy_tattoo_text", action: "text-content", value: this.pubicTattooText},
- {trigger: "torso", action: "clip-path", value: `url(#clipPathTorso${this.torsoSize})`},
+ {trigger: "torso", action: "clip-path", value: `url(#clipPathTorso${this.torsoSize}_rndID_${this.randomID})`},
{trigger: "torso_outfit_belly", action: "clip-path", value: cpBelly},
- {trigger: "leg_size", action: "clip-path", value: `url(#clipPathLeg_${this.legSize})`}
+ {trigger: "leg_size", action: "clip-path", value: `url(#clipPathLeg_${this.legSize}_rndID_${this.randomID})`}
];
}
}
--
GitLab