diff --git a/js/artInfrastructure.js b/js/artInfrastructure.js index 164ba7608f100d6124eb507862238fd27b5cd665..5acfe252ecc13931098790b7bc95dca77103dd0a 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 105bed289f35a83fed9acd511f8106084c67f7bc..360a0e73ff8887afa583ca02ab7da34a093d209e 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})`} ]; } }