https://www.tcgroup.ai/components/ai-img2img-editor/build/js/editors/p5canvas-3d.min.js

1/*
2 * This file is generated. Do not edit directly.
3 */
4
5class AspectRatioManager{constructor(e){this.container=e,this.modelLoaded=!1,this.currentTexture=null,this.waitingForModel=!1,this.container.addEventListener("load",()=>{this.modelLoaded=!0,debugUrl&&console.log("Model loaded successfully.")},{once:!0})}async createAndApplyTexture(e,t,a){if(a&&a[e])try{this.safeDisposeTexture(),this.currentTexture=await this.container.createTexture(t,{highResolution:!0}),a[e].setTexture(this.currentTexture),debugUrl&&console.log("High-resolution texture created and applied successfully.")}catch(e){console.error("Error setting texture:",e),this.safeDisposeTexture()}else debugUrl&&console.error("Material or channel not found.")}applyTextureToModel(e){var t;this.modelLoaded?(t=this.container.model)&&t.materials&&0!==t.materials.length?(t=t.materials[0]?.pbrMetallicRoughness||t.materials[1]?.pbrMetallicRoughness)?(this.createAndApplyTexture("baseColorTexture",e,t).then(()=>{debugUrl&&console.log("Texture updated successfully."),this.container.style.visibility="visible"}).catch(e=>{console.error("Error updating texture: ",e),this.safeDisposeTexture()}),this.clearTemporaryData()):console.error("Target material for texture application not found."):console.error("Model or materials not found."):(this.waitingForModel||(debugUrl&&console.log("Model not loaded yet. Waiting..."),this.waitingForModel=!0),requestAnimationFrame(()=>this.applyTextureToModel(e)))}safeDisposeTexture(){this.currentTexture&&"function"==typeof this.currentTexture.dispose?this.currentTexture.dispose():this.currentTexture&&debugUrl&&console.log("Current texture does not support dispose, skipping cleanup."),this.currentTexture=null}clearTemporaryData(){this.safeDisposeTexture()}}let modelViewer=document.getElementById("modelViewer"),aspectRatioManager=new AspectRatioManager(modelViewer),imageId,afile,fontSize=48,cachedGenerations={},currentStep=1,maxReachedStep=1;function updateStepIndicator(a){a<1||3<a||((currentStep=a)>maxReachedStep&&(maxReachedStep=a),document.querySelectorAll(".step-indicator .step-item").forEach((e,t)=>{t+=1;e.classList.remove("-active","-completed"),t<a?e.classList.add("-completed"):t===a&&e.classList.add("-active")}),debugUrl&&console.log("Step indicator updated to step:",a))}function updateStepVisibility(e){var t,a,n,o,r,i,d,l,s,c;isPhone||(t=document.getElementById("firstCollapseBlock"),a=document.getElementById("ai-editor-form"),n=document.getElementById("previous-generations"),o=document.getElementById("secondCollapseBlock"),r=document.getElementById("imageEditor"),i=document.getElementById("thirdCollapseBlock"),d=document.getElementById("orderBlock"),l=document.getElementById("stepNavigation"),s=document.getElementById("stepPrevBtn"),c=document.getElementById("stepNextBtn"),t&&t.classList.add("hidden"),a&&a.classList.add("hidden"),n&&n.classList.add("hidden"),o&&o.classList.add("hidden"),r&&r.classList.add("hidden"),i&&i.classList.add("hidden"),d&&d.classList.add("hidden"),1===e?(t&&t.classList.remove("hidden"),a&&a.classList.remove("hidden"),n&&0<document.getElementById("listOfImages")?.children.length&&n.classList.remove("hidden")):2===e?(o&&o.classList.remove("hidden"),r&&(r.classList.remove("hidden"),r.classList.remove("-disabledBlock"))):3===e&&(i&&i.classList.remove("hidden"),d)&&d.classList.remove("hidden"),l&&(2<=maxReachedStep&&l.classList.remove("hidden"),s&&(s.style.display=1<e?"":"none"),c)&&(c.style.display=e<3&&e<maxReachedStep?"":"none"))}function goToStep(e){isPhone||e<1||3<e||e>maxReachedStep||(updateStepIndicator(e),updateStepVisibility(e),(e=document.getElementById("ai-editor-photo-configurator"))&&e.scrollIntoView({behavior:"smooth",block:"start"}))}function getCurrentStep(){return currentStep}function onImageDisplayedOnCanvas(){isPhone||(maxReachedStep=3,goToStep(2))}function onUserStartedCustomizing(){}function onReadyForCheckout(){isPhone||(maxReachedStep<3&&(maxReachedStep=3),goToStep(3))}function initStepIndicator(){updateStepIndicator(1),isPhone||(updateStepVisibility(1),document.querySelectorAll(".step-indicator .step-item").forEach(e

5=>{e.style.cursor="pointer",e.addEventListener("click",function(){var e=parseInt(this.getAttribute("data-step"));e&&e<=maxReachedStep&&goToStep(e)})})),debugUrl&&console.log("Step indicator initialized at step 1")}function preloadImage(n,o=3){return new Promise((t,a)=>{var e;if(2<=(n.match(/https:\/\//g)||[]).length&&(e=n.lastIndexOf("https://"),n=n.substring(e)),cachedGenerations[n])t(cachedGenerations[n]),debugUrl&&console.log("cachedGenerations",cachedGenerations[n]);else{let e=new Image;e.crossOrigin="Anonymous",e.onload=()=>{cachedGenerations[n]=e,t(e),debugUrl&&console.log("Image loaded successfully: "+n)},e.onerror=e=>{0<o?(console.warn(`Retrying image load (${o} attempts left): `+n),setTimeout(()=>preloadImage(n,o-1).then(t).catch(a),1e3)):(console.error("Failed to load image: "+n,e),a(e))},e.src=n}})}function setBackgroundImage(e,a,n){if(e&&a){let t=document.getElementById(e);t?(t.style.backgroundImage="",t.setAttribute("data-bg",""),preloadImage(a).then(e=>{e?(t.style.backgroundImage=`url(${(n||a).replace(".png",".webp")})`,t.setAttribute("data-bg",a)):console.error("Image could not be preloaded: "+a)}).catch(e=>{console.error("Failed to load image: "+a,e)})):console.error(`Element with ID ${e} not found.`)}else console.error("Invalid parameters: elementId and imageUrl are required.")}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",initStepIndicator):initStepIndicator();let fullCanvasWidth=2080,smallCanvasWidth=.6*(fullCanvasWidth="1x1"===canvasRatio?1024:fullCanvasWidth),currentGenerationID=null,toggleViewButton=document.getElementById("toggleViewButton"),TwoDImage=document.getElementById("TwoDImage"),is3DView=!0,generations=(TwoDImage.addEventListener("contextmenu",e=>e.preventDefault()),TwoDImage.addEventListener("click",e=>e.preventDefault()),TwoDImage.addEventListener("touchstart",e=>e.preventDefault()),modelViewer.addEventListener("contextmenu",e=>e.preventDefault()),toggleViewButton.addEventListener("click",()=>{is3DView?(modelViewer.style.display="none",TwoDImage.classList.remove("hidden")):(modelViewer.style.display="block",TwoDImage.classList.add("hidden")),is3DView=!is3DView,toggleViewButton.textContent=is3DView?"2D":"3D"}),{}),thumbnail={};function initializeCanvas(t,a,n=smallCanvasWidth){onImageDisplayedOnCanvas();let o=`https://ai-router.picanova.com/get-image?file=${a}/`+t;"undefined"!=typeof jsoneTableData&&jsoneTableData.workflow.includes("costume_group")?(generations={generation_1:o},thumbnail={generation_1:null},setupP5Instance(t,a,n)):(generations={generation_1:o,generation_2:o.replace(".png","_2.png"),generation_3:o.replace(".png","_3.png")},window.indexedDB?indexedDB.open("AI_TCG",1).onsuccess=e=>{e.target.result.transaction("images","readonly").objectStore("images").getAll().onsuccess=function(){var e=this.result,e=(generations={generation_1:e.find(e=>"bg-generation_1"===e.id)?.data||o,generation_2:e.find(e=>"bg-generation_2"===e.id)?.data||o.replace(".png","_2.png"),generation_3:e.find(e=>"bg-generation_3"===e.id)?.data||o.replace(".png","_3.png")},thumbnail={generation_1:e.find(e=>"bg-generation_1"===e.id)?.thumb,generation_2:e.find(e=>"bg-generation_2"===e.id)?.thumb,generation_3:e.find(e=>"bg-generation_3"===e.id)?.thumb},Object.values(generations).map(n=>new Promise((e,t)=>{var a=new Image;a.onload=e,a.onerror=t,a.src=n})));Promise.all(e).then(()=>{setupP5Instance(t,a,n)}).catch(e=>{console.error("Failed to load one or more images:",e)})}}:setupP5Instance(t,a,n))}function setupP5Instance(e,t,a=smallCanvasWidth){"undefined"!=typeof textInput&&checkMugText();let n=TwoDImage.getContext("2d"),o=new Image;if(e.includes("blob"))o.src=e;else{let e="generation_1";window.collectionHCImages&&0<window.collectionHCImages.length?(r=window.currentCollectionIndex||0,e="generation_"+(r+1)):(r=document.querySelector(".imageButton.-active"))&&(r=Array.from(document.querySelectorAll(".imageButton")).indexOf(r)+1,e="generation_"+r),o.src=generations[e]||generations.generation_1}if(o.onload=function(){if(TwoDImage.width=o.width,TwoDImage.height=o.height,n.clearRect(0,0,TwoDImage.width,TwoDImage.height),"undefined"!=typeof backgroundStyleImage){let e;var t=document.querySelector(".bgBtn.-active")?.getAttribute("data-bg");t?e&&e.src===t?(n.drawImage(e,0,0,TwoDImage.width,TwoDImage.height),n.drawImage(o,0,0,TwoDImage.width,TwoDImage.height)):((e=new Image).src=t,e.onload=function(){n.drawImage(e,0,0,TwoDImage.width,TwoDImage.height),n.drawImage(o,0,0,TwoDImage.width,TwoDImage.height)},e.onerror=function(){console.error("Failed to load the background image.")}):console.error("No active background button or URL found.")}else n.drawImage(o,0,0,TwoDImage.width,TwoDImage.height)},o.onerror=function(){console.error("Failed to load the image for the 2D canvas.")},thumbnailsSet){var r=Object.keys(cachedGenerations).some(e=>e.includes("blob")),i=Object.keys(cachedGenerations).some(e=>e.includes(".png"));if(r&&i){for(var d in debugUrl&&console.log("Both blob and png exist in cachedGenerations. Cleaning up and resetting backgrounds."),cachedGenerations)(d.includes("blob")||d.includes(".png"))&&delete cachedGenerations[d];

5setBackgroundImage("imageOutput_1",generations.generation_1,thumbnail.generation_1),setBackgroundImage("imageOutput_2",generations.generation_2,thumbnail.generation_2),setBackgroundImage("imageOutput_3",generations.generation_3,thumbnail.generation_3)}else debugUrl&&console.log("Thumbnails are already set. No action needed.")}else{debugUrl&&console.log("Thumbnails are not set. Setting background images now."),document.querySelectorAll(".imageButton.-active").forEach(e=>{e.classList.remove("-active")});r=document.querySelector(".imageButton");r&&r.classList.add("-active"),"undefined"!=typeof textInput&&(checkMugText(),textInput.value=promptTextOnProduct),setBackgroundImage("imageOutput_1",generations.generation_1,thumbnail.generation_1),setBackgroundImage("imageOutput_2",generations.generation_2,thumbnail.generation_2),setBackgroundImage("imageOutput_3",generations.generation_3,thumbnail.generation_3),thumbnailsSet=!0}let l=canvasRatio?parseFloat(canvasRatio.split("x")[0])/parseFloat(canvasRatio.split("x")[1]):.75;i=1<l?"landscape":"portrait";debugUrl&&(console.log("generatedImageID:",e),console.log("Orientation: "+i));let g,m=("undefined"!=typeof textInput&&(""===textInput.value&&(textInput.value=promptTextOnProduct),g=textInput.value,a===fullCanvasWidth)&&(fontSize*=1.5),document.querySelector(".fontBtn.-active")?.dataset?.font||""),h=(preloadImage(e.includes("blob")?e:serverUrl+`/get-image?file=${t}/`+e).then(t=>{debugUrl&&console.log("Image preloaded successfully."),new p5(e=>{e.setup=function(){if("human_costume_aio_male_v2"===jsoneTableData.workflow||"human_costume_aio_female_v2"===jsoneTableData.workflow||"26Q1_hc_royal_male"===jsoneTableData.workflow||"26Q1_hc_royal_female"===jsoneTableData.workflow?(imagesPreloaded=e.createImage(1.1*t.width,1.1*t.height)).drawingContext.drawImage(t,100,100):(imagesPreloaded=e.createImage(t.width,t.height)).drawingContext.drawImage(t,0,0),e.remove(),a===fullCanvasWidth){let u=null;new p5(s=>{let c;s.setup=function(){s.noCanvas();let o=window.devicePixelRatio||1,r=a/o,i=h/o;if(c=s.createGraphics(r,i),imagesPreloaded){var e=r/2,d=i,l=imagesPreloaded.width/imagesPreloaded.height;let t,a,n=(e/d<l?(t=e,a=e/l):(a=d,t=d*l),()=>{var e;1024===fullCanvasWidth?c.image(imagesPreloaded,0,0,r,i):c.image(imagesPreloaded,0,(i-a)/2,t,a),"undefined"!=typeof textInput&&(c.textFont(m),c.textSize(fontSize/o),c.fill(0),c.textAlign(s.CENTER,s.CENTER),c.text(g,r/2,i/2,r/2)),u=c.canvas.toDataURL("image/png").split(",")[1],(e=u)&&0<e.length?(console.log("Offscreen image is ready for further processing."),processBase64String(e)):(console.error("Error: base64String is empty or undefined after export."),alert("Failed to generate the full canvas image. Please try again."))});"undefined"!=typeof backgroundStyleImage&&(e=document.querySelector(".bgBtn.-active")?.getAttribute("data-bg"))?s.loadImage(e,e=>{c.image(e,0,0,r,i),n()}):n()}else console.log("Image not preloaded, skipping offscreen draw.")}})}else new p5(r=>{var e;"undefined"!=typeof textInput&&"Design"===m&&r.loadFont("components/ai-img2img-editor/fonts/Design.ttf"),r.setup=function(){r.createCanvas(a,h),r.noLoop(),r.redraw()},"undefined"!=typeof backgroundStyleImage&&((e=document.querySelector(".bgBtn.-active")?.getAttribute("data-bg"))?r.loadImage(e,e=>{r.image(e,0,0,r.width,r.height),r.redraw()}):console.error("No active background button or URL found.")),r.draw=function(){debugUrl&&console.log("Starting the drawing process..."),"undefined"==typeof backgroundStyleImage&&(debugUrl&&console.log("White Background..."),r.background(255));var e=r.width/2,t=r.height,a=imagesPreloaded.width/imagesPreloaded.height;let n,o;if(e/t<a?(n=e,o=e/a):(o=t,n=t*a),imagesPreloaded)try{1==l?r.image(imagesPreloaded,0,0,r.width,r.height):r.image(imagesPreloaded,0,(r.height-o)/2,n,o)}catch(e){debugUrl&&console.error("Error drawing image:",e)}else debugUrl&&console.warn("imagesPreloaded is not ready yet.");"undefined"!=typeof textInput&&(r.textFont(m),r.textSize(fontSize),r.fill(0),r.textAlign(r.CENTER,r.CENTER),r.text(g,r.width/2,r.height/2,r.width/2)),debugUrl&&console.log(`Canvas size: Width = ${r.width}, Height = `+r.height),[...document.getElementsByTagName("canvas")].forEac

5h(e=>{e!==TwoDImage&&e.remove()}),aspectRatioManager.applyTextureToModel(r.canvas.toDataURL("image/png")),document.getElementById("imageOutput").style.height="auto"}})}})}).catch(e=>{console.error("Error preloading image:",e)}),a/l);"undefined"!=typeof textInput&&document.querySelectorAll(".fontBtn").forEach(e=>{e.removeEventListener("click",onFontButtonClick),e.addEventListener("click",onFontButtonClick)}),"undefined"!=typeof backgroundStyleImage&&document.querySelectorAll(".bgBtn").forEach(e=>{e.removeEventListener("click",onBGButtonClick),e.addEventListener("click",onBGButtonClick)}),document.querySelectorAll(".imageButton").forEach(e=>{e.removeEventListener("click",onImageButtonClick),e.addEventListener("click",onImageButtonClick)}),document.querySelector(".totalPrice").classList.contains("hidden")&&document.querySelector(".totalPrice").classList.remove("hidden")}function processBase64String(t){var a=[];for(let e=0;e<t.length;e++)a.push(t.charCodeAt(e));var e=new Blob([new Uint8Array(a)],{type:"image/png"});if(0===e.size)console.error("Error: Generated Blob is empty."),hideloaderFullScreen(),alert("Failed to generate image Blob. Please try again.");else{var o="ai-"+generatedImageID.replace("generation","upscale"),r=new FormData;r.append("imageData",e,o);let n=-1<window.location.href.indexOf("debug=true")||-1<window.location.href.indexOf("testing");e="undefined"!=typeof designCategory?"&designCategory="+designCategory:"";n&&console.log("DESIGN CATEGORY : "+e),$.ajax({url:"/externalAPI?action=uploadImage&product="+defaultProductID+"&jsonExtended=true&base64=true&fileName="+o+e,type:"POST",data:r,processData:!1,contentType:!1,success:function(e){try{var t=JSON.parse(e),a=(imageId=t.imageId,document.querySelector(".orderBlockText")&&document.querySelector(".orderBlockText").classList.add("hidden"),document.querySelector(".totalPrice")&&document.querySelector(".totalPrice").classList.add("hidden"),document.querySelector(".-addToCart")&&document.querySelector(".-addToCart").classList.add("hidden"),document.querySelector(".-addedToCart")&&document.querySelector(".-addedToCart").classList.remove("hidden"),"/externalAPI?action=addConfig&product="+defaultProductID+"&image="+imageId+"&formatWidth="+formatWidth+"&formatHeight="+formatHeight+"&designKey=human_costume_mug");addToCartOnly(a),n&&console.log("constructedURL:",a)}catch(e){console.error("Error parsing server response:",e),alert("Failed to upload image. Please try again."),$(".-addToCart").removeClass("disabled"),hideloaderFullScreen()}},error:function(e,t,a){console.log("Image upload failed:",t,a),hideloaderFullScreen(),alert("Image upload failed. Please try again.")}})}}function addToCartDirectly(){onReadyForCheckout(),showloaderFullScreen(),$(".-addToCart").addClass("disabled"),$(".-addedToCart button.-right").addClass("disabled"),$("#imageEditor").slideUp(),$(".collapseBlock, .mobileSteps").addClass("disabled"),debugUrl&&console.log("fullCanvasWidth",fullCanvasWidth),setupP5Instance(generatedImageID,savePath,fullCanvasWidth)}let retryCountAddToCart=0,maxRetriesAddToCart=3;async function fetchWithRetry(e,a,n=3){for(let t=0;t<n;t++)try{var o=await fetch(e,a);if(o.ok)return o;console.warn(`Attempt ${t+1} failed: `+o.statusText)}catch(e){if(console.error(`Attempt ${t+1} encountered an error:`,e),t===n-1)throw e}throw new Error("All fetch attempts failed")}async function addToCartOnly(t){try{if(!(await fetchWithRetry(t,{method:"POST",credentials:"include"},maxRetriesAddToCart)).ok)throw new Error("Network response was not ok");hideloaderFullScreen(),$(".-addedToCart button.-right").removeClass("disabled")}catch(e){var a;retryCountAddToCart<maxRetriesAddToCart?(retryCountAddToCart++,a=1e3*Math.pow(2,retryCountAddToCart),console.warn("Retrying to add to cart in "+a/1e3+" seconds..."),setTimeout(()=>addToCartOnly(t),a)):(alert("Failed to add to cart. Please try a different image or contact support."),console.error("Max retry limit reached for addToCartOnly:",e),hideloaderFullScreen())}}function onFontButtonClick(){onUserStartedCustomizing(),document.querySelectorAll(".fontBtn").forEach(e

5=>e.classList.remove("-active")),this.classList.add("-active"),setupP5Instance(generatedImageID,savePath)}function onBGButtonClick(){onUserStartedCustomizing(),document.querySelectorAll(".bgBtn").forEach(e=>e.classList.remove("-active")),this.classList.add("-active"),setupP5Instance(generatedImageID,savePath)}function onImageButtonClick(){document.querySelectorAll(".imageButton").forEach(e=>e.classList.remove("-active")),this.classList.add("-active");var e=this.getAttribute("data-bg"),t=Array.from(document.querySelectorAll(".imageButton")).indexOf(this)+1;generatedImageID=1===t?projectID+"_generation.png":projectID+`_generation_${t}.png`,"undefined"!=typeof textInput&&(checkMugText(),textInput.value=promptTextOnProduct),setupP5Instance(e,savePath)}if("undefined"!=typeof textInput){textInput.addEventListener("focusout",()=>{setupP5Instance(generatedImageID,savePath)});let e,t=1e3;textInput.addEventListener("input",function(){clearTimeout(e),e=setTimeout(()=>{0<textInput.value.trim().length&&onUserStartedCustomizing(),setupP5Instance(generatedImageID,savePath)},t)})}let fontSizeSlider=document.getElementById("fontSizeSlider");if(fontSizeSlider){let e,t=500;fontSizeSlider.addEventListener("input",function(){clearTimeout(e),e=setTimeout(()=>{onUserStartedCustomizing(),fontSize=parseInt(this.value,10),setupP5Instance(generatedImageID,savePath)},t)})}