aico-image-editor/output/js/index.js

Combine multiple image into and create single combined image

/*! For license information please see index.js.LICENSE.txt */
!function(t,a){"object"==typeof exports&&"object"==typeof module?module.exports=a():"function"==typeof define&&define.amd?define([],a):"object"==typeof exports?exports.aicoEditor=a():t.aicoEditor=a()}(self,(()=>(()=>{var t,a,e={1950:(t,a,e)=>{"use strict";e.d(a,{A:()=>n});var o=e(7202),r=e(3349),A=e(7049);(0,r.A)("picture-tab",(()=>Promise.resolve().then(e.t.bind(e,2158,17)))),document.addEventListener("alpine:init",(function(){Alpine.data("productPicturesSubTab",A.A)}));const n=()=>({activeSubTab:"productpictures",init(){(0,o.A)(this.$el.shadowRoot)}})},7049:(t,a,e)=>{"use strict";e.d(a,{A:()=>i,e:()=>n});var o=e(7202),r=e(3349),A=(e(8535),e(714));(0,r.A)("product-pictures-sub-tab",(()=>Promise.resolve().then(e.t.bind(e,7145,17))));const n={init(){(0,o.A)(this.$el.shadowRoot),this.$dispatch("set-pictures-length",{pictures:this.mainPictures.length+this.subPictures.length})},isSubPicturesVisible:!1,pictureSearch:"",selectedMainPicture:null,selectedSubPicture:null,mainPictures:A.PC,subPictures:A.ej,selectMainPicture(t,a){this.selectedMainPicture=t,this.$store.canvas.addPictureToCanvas(a,"mainPicture")},selectSubPicture(t,a){this.selectedSubPicture=t,this.$store.canvas.addPictureToCanvas(a,"subPicture")},filterPicture(){this.mainPictures.forEach((t=>{const a=t.label.includes(this.pictureSearch);t.hidden=!a})),this.subPictures.forEach((t=>{const a=t.label.includes(this.pictureSearch);t.hidden=!a}))},addMainPicture(t){t.url&&(this.mainPictures.unshift({id:t.id,url:t.url,name:t.name,label:t.name,type:"mainPicture",isRemovable:!0,cropperData:t.cropperData,originalUrl:t.originalUrl}),this.isUploadBlockVisible=!1)},updateMainPicture(t){const a=this.mainPictures.find((a=>a.id===t.id));a.url=t.url,a.cropperData=t.cropperData},addSubPicture(t){this.subPictures.push(t)},resetMainPictures(){for(let t=this.mainPictures.length-1;t>=-0;t--)this.mainPictures[t].isRemovable&&this.mainPictures.splice(t,1)},pictureTrigger:{"@mainPictures-added-from-api.window"(t){t.detail.mainPictures.forEach((t=>{this.addMainPicture(t),this.$store.cropperStore.populateAspectRatio(t)}))},"@mainPictures-updated-from-api.window"(t){t.detail.mainPictures.forEach((t=>{this.updateMainPicture(t),this.$store.cropperStore.populateAspectRatio(t)}))},"@mainPictures-cleard.window"(t){this.removeTempPictures()},"@canvas-reset.window"(t){this.resetMainPictures()},"@canvas-is-ready.window"(t){this.mainPictures.forEach((t=>{t.isRemovable||this.selectMainPicture(t.id,t.url)}))}},isUploadBlockVisible:!1,hideUploadBlock(){this.isUploadBlockVisible=!1},showUploadBlock(){this.isUploadBlockVisible=!0},tempPictures:[],removeTempPictures(){this.tempPictures=[]},async swapWithAIImage(t){const a=await fetch(this.$store.canvas.aiImageSrc).then((t=>t.blob())),e=new DataTransfer;e.items.add(new File([a],t.name,{type:"image/png",lastModified:Date.now()}));const o={files:e.files,action:`${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/images/${t.id}`,type:"image",cropperData:t.cropperData},r=await this.$store.uploadStore.updateImageInServer(o);r?.data&&this.$dispatch("mainPictures-updated-from-api",{mainPictures:[r?.data]})}},i=()=>n},5673:(t,a,e)=>{"use strict";var o=e(8535),r=e.n(o),A=function t(a,e){return e?t(e,a%e):a};const n=Alpine.store("elements");Alpine.store("cropperStore",{cropImage:null,cropperData:null,originalImageFile:null,editingImageId:null,shouldPushRounded:!1,uploadWithoutConfig:!1,fileType:"",currentEl:null,async getFileFromUrl(t,a,e="image/jpeg"){const o=await fetch(t),r=await o.blob();return new File([r],a,{type:r.type||e})},async editExistingImage(t,a,e){this.editingImageId=t.id;const o={fileName:t.name,url:t.originalUrl||t.cropperData.originalFileDataUrl,cropperData:t.cropperData,fileType:a,el:e};this.prepareCropperImage(o)},async prepareCropperImage(t){window.dispatchEvent(new CustomEvent("cropper-init")),this.destroyCropper();const a=document.createElement("img");a.id="js-cropper",a.src=t.url,a.alt=t.fileName;const e=n.imgCropEL;e.innerHTML="",e.appendChild(a),this.cropImage=a,this.cropperData=t.cropperData,t.originalImageFile&&(this.originalImageFile=t.originalImageFile),this.fileType=t.fileType,this.currentEl=t.el,this.uploadWithoutConfig=t.uploadWithoutConfig,this.initCropper(a)},initCropper(t){let a=this;this.currentEl.value="",window.dispatchEvent(new CustomEvent(`${this.fileType}-cleard`)),new(r())(t,{crop:function(t){a.cropBoxWidth=Math.round(t.detail.width),a.cropBoxHeight=Math.round(t.detail.height)},autoCropArea:1,preview:n.cropperPreviewEL,ready:function(){a.cropperData?(a.cropperData.aspectRatio&&a.setAspectRatio(a.cropperData.aspectRatio),a.cropperData.shouldPushRounded?a.setRadius():a.setSquare(),a.cropperData.zoomMode&&(a.zoomMode=a.cropperData.zoomMode),a.cropperData.dragMode&&a.setDragMode(a.cropperData.dragMode),this.cropper.setData(a.cropperData)):a.resetCropperControls()}})},cropBoxWidth:0,cropBoxHeight:0,resetCropperControls(){this.setAspectRatio("NaN"),this.setSquare(),this.setDragMode("move"),this.zoomMode="zoomIn"},dragMode:"move",setDragMode(t){this.dragMode=t,this.cropImage.cropper.setDragMode(t)},zoomMode:"zoomIn",zoom(t,a){this.zoomMode=a,this.cropImage.cropper.zoom(t)},setRadius(){this.shouldPushRounded=!0,n.cropperPreviewEL.classList.add("rounded"),n.imgCropEL.querySelector(".cropper-view-box")?.classList.add("rounded"),n.imgCropEL.querySelector(".cropper-face")?.classList.add("rounded")},setSquare(){this.shouldPushRounded=!1,n.cropperPreviewEL.classList.remove("rounded"),n.imgCropEL.querySelector(".cropper-view-box")?.classList.remove("rounded"),n.imgCropEL.querySelector(".cropper-face")?.classList.remove("rounded")},aspectRatio:"NaN",setAspectRatio(t){this.aspectRatio=t,t&&this.cropImage.cropper.setAspectRatio(parseFloat(t))},clear(){this.cropImage.cropper.clear()},destroyCropper(){this.cropImage?.cropper?.destroy()},async crop(){return new Promise(((t,a)=>{const e=this.cropImage.cropper;let o=this;const r=e.getCroppedCanvas();let A=r;o.shouldPushRounded&&(A=o.getRoundedCanvas(r)),A.toBlob((e=>{if(e){const a=new DataTransfer;a.items.add(new File([e],o.cropImage.alt,{type:e.type})),t(a.files)}else a("Failed to generate blob")}))}))},async processUpload(t){let a=this;try{const e=await this.crop();if(this.currentEl.files=e,Array.from(e).forEach((t=>{window.dispatchEvent(new CustomEvent(`${this.fileType}-uploaded`,{detail:{name:a.cropImage.alt,label:a.cropImage.alt,url:URL.createObjectURL(t),class:a.shouldPushRounded?"rounded":"",type:t.type}}))})),this.currentEl.files.length){const e=Object.assign({originalFileDataUrl:a.cropImage.src,wasAspectRatioSaved:a.shouldCurrentAspectRatioSaved,aspectRatio:a.aspectRatio,shouldPushRounded:a.shouldPushRounded,zoomMode:a.zoomMode,dragMode:a.dragMode},a.cropImage?.cropper.getData());let o;"backgrounds"===this.fileType?o="BACKGROUND":"shapes"===this.fileType?o="SHAPE":"mainPictures"===this.fileType&&(o="MAIN_IMAGE");const r={files:this.currentEl.files,action:`${t.canvas.apiConfig.apiUrl}/api/v1/product-configurators/${t.canvas.configuratorId||null}/images`,type:`${this.fileType}[]`,imageType:o,originalFile:this.originalImageFile,cropperData:e},A=await t.uploadStore.uploadFilesToServer(r);A?.data?.images?.forEach((t=>{const a={detail:{}};a.detail[this.fileType]=[t],window.dispatchEvent(new CustomEvent(`${this.fileType}-added-from-api`,a))}))}}catch(t){console.log(t)}},async processUploadWithoutConfigurator(t){try{const a={files:await this.crop(),action:`${t.canvas.apiConfig.apiUrl}/api/v1/product-configurators/save-image-on-server-and-return-file-url`},e=await t.uploadStore.uploadImageWithoutConfigurator(a);e?.data?.url&&t.canvas.replaceActiveObjectUrl(e?.data?.url)}catch(t){console.log(t)}},async processUpdate(t){let a=this;const e=await this.crop();this.currentEl.files=e;const o=Object.assign({originalFileDataUrl:a.cropImage.src,wasAspectRatioSaved:a.shouldCurrentAspectRatioSaved,aspectRatio:a.aspectRatio,shouldPushRounded:a.shouldPushRounded,zoomMode:a.zoomMode,dragMode:a.dragMode},a.cropImage?.cropper.getData());if(this.currentEl.files.length){const e={files:this.currentEl.files,action:`${t.canvas.apiConfig.apiUrl}/api/v1/product-configurators/images/${a.editingImageId}`,type:"image",cropperData:o},r=await t.uploadStore.updateImageInServer(e);if(r?.data){const t={detail:{}};t.detail[this.fileType]=[r?.data],window.dispatchEvent(new CustomEvent(`${this.fileType}-updated-from-api`,t))}}},getRoundedCanvas(t,a){var e=document.createElement("canvas"),o=e.getContext("2d"),r=t.width,A=t.height;if(r>0&&A>0){if(r/A>a){var n=A*a,i=(r-n)/2;e.width=n,e.height=A,o.drawImage(t,i,0,n,A,0,0,n,A)}else e.width=r,e.height=A,o.drawImage(t,0,0,r,A,0,0,r,A);o.imageSmoothingEnabled=!0,o.globalCompositeOperation="destination-in";var l=e.width/2,s=e.height/2,m=e.width/2,d=e.height/2;o.beginPath(),o.ellipse(l,s,m,d,0,0,2*Math.PI),o.fill()}return e},shouldCurrentAspectRatioSaved:!1,populateAspectRatio(t){if(t.cropperData&&t.cropperData.wasAspectRatioSaved){const a=t.cropperData.width,e=t.cropperData.height;if(a>0&&e>0){const t=function(t,a){var e=A(t,a);return t/e+":"+a/e}(parseInt(a),parseInt(e)),o=(a/e).toFixed(2);this.savedAspectRatios.find((t=>t.value===o))||this.savedAspectRatios.push({label:t,value:o})}}},savedAspectRatios:[{label:"16:10",value:1.6},{label:"5:4",value:1.25}]})},514:()=>{Alpine.data("dragdrop",(()=>({dropping:!1,filesUploaded:!1,dragOverHandler(t){t.preventDefault(),this.dropping=!0},dragLeaveHandler(){this.dropping=!1},sizeValidated:!0,extensionsValidated:!0,extensions:[],alertFileValidationFail(t,a,e,o){const r=t.every((t=>this.validateFileSize(t))),A=t.every((t=>this.validateFileExtensions(t,e)));this.sizeValidated=r,this.extensionsValidated=A,this.extensions=e;const n=t.filter((t=>this.validateFileSize(t)&&this.validateFileExtensions(t,e)));n.length&&this.dispatchFileEvents(n,a,o)},fileUploaded(t,a,e,o){this.alertFileValidationFail([...t.target.files],a,e,o),this.filesUploaded=!0},bytesToMegaBytes:t=>(t/1048576).toFixed(2),maxAllowedFileSize:15,validateFileSize(t){return!(this.bytesToMegaBytes(t.size)>this.maxAllowedFileSize)},validateFileExtensions(t,a){let e=t.name.split(".").pop();return a.indexOf(e)>=0},getDataUrlFromFile:t=>new Promise(((a,e)=>{const o=new FileReader;o.onload=()=>a(o.result),o.onerror=t=>e(t),o.readAsDataURL(t)})),async dispatchFileEvents(t,a,e){const o=await this.getDataUrlFromFile(t[0]);"shapes"===a||"backgrounds"===a||"mainPictures"===a?this.$store.cropperStore.prepareCropperImage({originalImageFile:t[0],fileName:t[0].name,url:o,cropperData:null,fileType:a,el:e}):window.dispatchEvent(new CustomEvent(a+"-uploaded",{detail:{files:t}}))},dropHandler(t,a,e,o){if(t.dataTransfer.items){const r=[...t.dataTransfer.items].filter((t=>"file"===t.kind)).map((t=>t.getAsFile()));this.alertFileValidationFail(r,a,e,o)}else this.alertFileValidationFail([...t.dataTransfer.files],a,e,o);this.dropping=!1}})))},1346:(t,a,e)=>{Alpine.data("tooltip",(()=>({tooltipInstance:null,init(){let t=this;this.$nextTick((()=>{if(window.bootstrap)t.tooltipInstance=new bootstrap.Tooltip(this.$el,{container:t.$el});else{const a=e(3678);t.tooltipInstance=new a(this.$el,{container:t.$el})}})),window.addEventListener("language-updated",function(a){t.$nextTick((()=>{t.tooltipInstance&&(t.tooltipInstance._config.title=t.$el.title,t.tooltipInstance?.update())}))}.bind(this))}})))},4011:()=>{Alpine.store("elements",{canvasEL:null,canvasResizeEL:null,containerModalEL:null,deleteObjectModalEL:null,textareaEL:null,historyUndo:null,historyRedo:null,imgCropEL:null,cropperPreviewEL:null,fontUploadModalEl:null,shapeUploadEL:null,backgroundUploadEL:null,fontUploadEL:null,pictureUploadEL:null,aiCanvasResizeEL:null})},8170:(t,a,e)=>{"use strict";var o=e(2362),r=e.n(o);function A(t){const a=t.sizes.shift(),e=Math.max(Math.ceil(a[0]),1),o=Math.max(Math.ceil(a[1]),1),r=[e-1,o-1,1,1],n=performance.now(),i="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope;let l,s;i?(l=new OffscreenCanvas(1,1),s=new OffscreenCanvas(e,o)):(l=document.createElement("canvas"),l.width=1,l.height=1,s=document.createElement("canvas"),s.width=e,s.height=o);const m=l.getContext("2d"),d=s.getContext("2d");d&&(d.fillRect.apply(d,r),m.drawImage(s,e-1,o-1,1,1,0,0,1,1));const c=m&&0!==m.getImageData(0,0,1,1).data[3],p=parseInt(performance.now()-n);return[l,s].forEach((t=>{t.height=0,t.width=0})),i?(postMessage({width:e,height:o,testTime:p,isTestPass:c}),!c&&t.sizes.length&&setTimeout((()=>{A(t)}),0)):c?t.onSuccess({width:e,height:o,testTime:p}):(t.onError({width:e,height:o,testTime:p}),t.sizes.length&&setTimeout((()=>{A(t)}),0)),c}const n={area:[16384,14188,11402,11180,10836,8192,4096,1],height:[8388607,65535,32767,16384,8192,4096,1],width:[4194303,65535,32767,16384,8192,4096,1]},i={max:null,min:1,sizes:[],step:1024,useWorker:!1,onError:Function.prototype,onSuccess:Function.prototype},l={};function s(t){const a=t.width===t.height,e=1===t.height,o=1===t.width,r=[];if(t.width&&t.height){const A=t.min||i.min,n=t.step||i.step;let l=Math.max(t.width,t.height);for(;l>=A;){const t=a||e?l:1,A=a||o?l:1;r.push([t,A]),l-=n}}else t.sizes.forEach((t=>{const A=a||e?t:1,n=a||o?t:1;r.push([A,n])}));return r}function m(t){const a="undefined"!=typeof window,e=a&&"Promise"in window,o=a&&"HTMLCanvasElement"in window,r=a&&"OffscreenCanvas"in window,n=URL.createObjectURL(new Blob([])).slice(-36),i=performance.now(),{onError:s,onSuccess:m,...d}=t,c=()=>parseInt(performance.now()-i);let p=null;if(!o)return!1;if(t.useWorker&&r){const t=`\n            var canvasTest = ${A.toString()};\n            onmessage = function(e) {\n                canvasTest(e.data);\n            };\n        `,a=new Blob([t],{type:"application/javascript"}),e=URL.createObjectURL(a);p=new Worker(e),URL.revokeObjectURL(e),p.onmessage=function(t){const{width:a,height:e,testTime:o,isTestPass:r}=t.data,A={width:a,height:e,testTime:o,totalTime:c()};r?(l[n].onSuccess(A),delete l[n]):l[n].onError(A)}}return e?new Promise((a=>{const e={...t,onError(e){let{width:o,height:r,testTime:A}=e;const n={width:o,height:r,testTime:A,totalTime:c()};let i;if(0===t.sizes.length)i=!0;else{const[[a,e]]=t.sizes.slice(-1);i=o===a&&r===e}s(n),i&&a({...n,success:!1})},onSuccess(t){let{width:e,height:o,testTime:r}=t;const A={width:e,height:o,testTime:r,totalTime:c()};m(A),a({...A,success:!0})}};if(p){const{onError:t,onSuccess:a}=e;l[n]={onError:t,onSuccess:a},p.postMessage(d)}else A(e)})):p?(l[n]={onError:s,onSuccess:m},void p.postMessage(d)):A(t)}const d={maxArea(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const a=s({width:t.max,height:t.max,min:t.min,step:t.step,sizes:[...n.area]});return m({...i,...t,sizes:a})},maxHeight(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const a=s({width:1,height:t.max,min:t.min,step:t.step,sizes:[...n.height]});return m({...i,...t,sizes:a})},maxWidth(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const a=s({width:t.max,height:1,min:t.min,step:t.step,sizes:[...n.width]});return m({...i,...t,sizes:a})},test(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const a={...i,...t};return a.sizes=[...a.sizes],a.width&&a.height&&(a.sizes=[[a.width,a.height]]),m(a)}};var c=e(2661);const p=new class{commands=[];index=0;getIndex(){return this.index}back(){return this.index>0&&this.commands[--this.index].undo(),Alpine.store("canvas").disableUndoRedoButtons(),this}forward(){return this.index<this.commands.length&&this.commands[this.index++].execute(),Alpine.store("canvas").disableUndoRedoButtons(),this}add(t){return this.commands.length&&this.commands.splice(this.index,this.commands.length-this.index),5===this.commands.length&&(this.commands.shift(),this.index--),this.commands.push(t),this.index++,Alpine.store("canvas").disableUndoRedoButtons(),this}clear(){return this.commands.length=0,this.index=0,Alpine.store("canvas").disableUndoRedoButtons(),this}};class f{constructor(t,a){this.object=t,this.canvas=a}execute(){this.object.removedViaHistory=!1,this.object.addedViaHistory=!0,this.object.commandName=this.constructor.name,this.canvas.add(this.object)}undo(){this.object.removedViaHistory=!0,this.object.addedViaHistory=!1,this.canvas.remove(this.object)}}class g{constructor(t,a){this.object=t,this.canvas=a}execute(){this.object.removedViaHistory=!0,this.object.addedViaHistory=!1,this.canvas.remove(this.object)}undo(){this.object.addedViaHistory=!0,this.object.removedViaHistory=!1,this.object.commandName=this.constructor.name,this.canvas.add(this.object)}}class C{constructor(t,a,e={}){this.object=t,this.canvas=a,this._initStateProperties(e),this.state={},this.prevState={},this._saveState(e),this._savePrevState(e)}_initStateProperties(t){this.stateProperties=this.object.stateProperties}execute(){this._restoreState(),this.object.setCoords()}undo(){this._restorePrevState(),this.object.setCoords()}_restoreState(){this._restore(this.state)}_restorePrevState(){this._restore(this.prevState)}_restore(t){this.stateProperties.forEach((a=>{"clipPath"!==a&&this.object.set(a,t[a]),"svgPathColor"===a&&this.object._objects?.filter((t=>"path"===t.type)).forEach((function(e){"#fff"===e.fill&&"#ffffff"!==e.fill&&"rgb(255,255,255)"!==e.fill||e.set({fill:t[a]})})),"filters"===a&&this.object.applyFilters()})),this.object.saveState(),this.object.filters&&Alpine.store("canvas").saveStateForFilters(this.object),window.dispatchEvent(new CustomEvent("object-restored-via-undo-redo",{detail:{object:this.object}})),this.canvas.renderAll()}_saveState(t){this.stateProperties.forEach((t=>{"filters"!==t&&(this.state[t]=this.object.get(t)),"filters"===t&&(this.state[t]=this.object.get(t).slice())}))}_savePrevState(t){this.object._stateProperties&&this.stateProperties.forEach((t=>{"filters"!==t&&(this.prevState[t]=this.object._stateProperties[t]),"path"===t&&null!==this.prevState[t]&&Object.setPrototypeOf(this.prevState[t],fabric.Path.prototype),"filters"===t&&(this.prevState[t]=this.object.myOwnStateProps?.filters?.slice()||[])}))}}var b=e(714);let u,h,B;e(1950),void 0===window.Alpine.$persist&&(u=e(8757),Alpine.plugin(u.default)),e(8965),window.canvasHistory=p,Alpine.store("canvas",{products:[{id:2,name:"gr-5",productImageUrl:"images/gr-5/product-gr5.svg",overlapImageUrl:"images/gr-5/product-gr5-overlap.svg",innerImageUrl:"images/gr-5/product-gr5-inner.svg",innerImageStrokeOnlyUrl:"images/gr-5/product-gr5-inner-strokeonly.svg",tagImageUrl:"images/gr-5/gr5-tag.svg",tagCloneImageUrl:"images/gr-5/gr5-tag-cloned.svg",tagImageLeft:4.12,tagImageTop:37.25,tagImageWidth:32.06,tagImageHeight:45.5},{id:0,name:"gr-6",productImageUrl:"images/gr-6/product-gr6.svg",overlapImageUrl:"images/gr-6/product-gr6-overlap.svg",overlapStickerImageUrl:"images/gr-6/product-gr6-overlap-sticker.svg",innerImageUrl:(0,b.Q9)().gr6InnerImage,innerImageStrokeOnlyUrl:"images/gr-6/product-gr6-inner-strokeonly.svg",tagImageUrl:"images/gr-6/gr6-tag.svg",tagCloneImageUrl:"images/gr-6/gr6-tag-cloned.svg",leftUpperTextImage:"images/gr-6/pdf-left-text.png",rightUpperTextImage:"images/gr-6/pdf-right-text.png",bottomTextImageUrl:"images/gr-6/pdf-bottom-text.svg",bottomTextImage:"images/gr-6/pdf-bottom-text.png",plusicon:"images/gr-6/pluspdf.png",tagImageLeft:6.2,tagImageTop:38.96,tagImageWidth:24.48,tagImageHeight:50.37},{id:1,name:"gr-7",productImageUrl:"images/gr-7/product-gr7.svg",overlapImageUrl:"images/gr-7/product-gr7-overlap.svg",overlapStickerImageUrl:"images/gr-7/product-gr7-overlap-sticker.svg",innerImageUrl:"images/gr-7/product-gr7-inner.svg",innerImageStrokeOnlyUrl:"images/gr-7/product-gr7-inner-strokeonly.svg",tagImageUrl:"images/gr-7/gr7-tag.svg",tagCloneImageUrl:"images/gr-7/gr7-tag-cloned.svg",leftUpperTextImage:"images/gr-7/pdf-left-text.png",rightUpperTextImage:"images/gr-7/pdf-right-text.png",bottomTextImageUrl:"images/gr-7/pdf-bottom-text.svg",bottomTextImage:"images/gr-7/pdf-bottom-text.png",plusicon:"images/gr-7/pluspdf.png",tagImageLeft:5.24,tagImageTop:50.32,tagImageWidth:24.27,tagImageHeight:39.61}],apiConfig:{apiUrl:"",apiToken:""},currentLocale:"de",canvasData:Alpine.$persist(""),isConfiguratorIdChanged:!1,productId:Alpine.$persist(null),configuratorId:Alpine.$persist(null),selectedProduct:new URLSearchParams(window.location.search).get("productKey")||"gr-6",init(){r().perfLimitSizeTotal=225e6},isServerLoaderCanvasVisible:!1,isServerLoaderTabVisible:!1,isColorBlockLoaderVisible:!1,isColorPickerBlockDisabled:!0,isObjectFilterControlsDisabled:!0,isCurveBlockDisabled:!0,isObjectDeselected:!0,isCanvasResetBtnDisabled:!0,isFontStyleSaveBtnDisabled:!0,isTextObjectSelected:!1,isTextBackgroundButtonDisabled:!0,isInside3dView:!1,textErrorMessage:!1,fontSuccessMessage:!1,isSaveButtonDisabled:!1,enable3d(t){const a=this,e=window.__canvas,o=this.getSelectedProductObj();this.isInside3dView=!0;e.clipPath.getScaledHeight();e.height,window.__canvas.clone((function(e){e.clipPath=null,window.clonedCanvas=e,e.getObjects().forEach((function(t,a){t.set({clipPath:null}),t.excludeFromExportIn3D&&e.remove(t)})),r().Image.fromURL(o.tagCloneImageUrl,(function(r){r.scaleToHeight(e.height/e.viewportTransform[0]*(o.tagImageHeight/100)),r.set({left:e.width*o.tagImageLeft/100,top:e.height/e.viewportTransform[0]-r.getScaledHeight()-20}),r.set({zIndex:1e3}),e.add(r);const A=e.toDataURL({format:"jpeg",enableRetinaScaling:!0,multiplier:3});a.isInside3dView&&window.dispatchEvent(new CustomEvent("toggle-3d",{detail:{url:A,topBottomTextureUrl:e.backgroundImage?.src,formData:t},bubbles:!0}))}),{crossOrigin:"anonymous"})}),["excludeFromExportIn3D","name","filters","viewportTransform"])},toPDF(t){const a=this,e=(window.__canvas,this.getSelectedProductObj());window.__canvas.clone((function(o){r().Image.fromURL(e.overlapStickerImageUrl,(function(r){a.fitImageInCanvas(r,o),a.setCenter(r),a.preventInteraction(r),r.set({zIndex:1002}),o.add(r),o.renderAll();const A=o.toDataURL({format:"png",enableRetinaScaling:!0,multiplier:3}),{jsPDF:n}=window.jspdf;var i=new n({orientation:"landscape",unit:"px",format:[935,875],compress:!0});i.setFillColor(241,241,242),i.rect(0,0,935,935,"F"),i.addImage(e.plusicon,"PNG",15,15,30,30,"","FAST"),i.addImage(e.plusicon,"PNG",890,15,30,30,"","FAST"),i.addImage(e.plusicon,"PNG",15,830,30,30,"","FAST"),i.addImage(e.plusicon,"PNG",890,830,30,30,"","FAST"),i.addImage(e.rightUpperTextImage,"PNG",740,105,124,67,"","FAST"),i.addImage(e.leftUpperTextImage,"PNG",50,80,138,105,"","FAST"),i.setLineWidth(.1),i.setDrawColor(0,0,0),i.line(0,437.5,29,437.5),i.line(906,437.5,935,437.5),i.line(467,0,467,29),i.line(467,846,467,877),i.addImage(A,"JPEG",23,0,888,888,"","FAST"),i.addImage(e.bottomTextImage,"PNG",0,0,895,895,"","FAST");const l=i.output("blob"),s="productPDF-"+a.configuratorId,m=new File([l],s,{type:"application/pdf"});t.append("pdf",m),a.enable3d(t)}),{crossOrigin:"anonymous"})}),["excludeFromExportIn3D","name","filters","viewportTransform"])},disable3d(){this.isInside3dView=!1},getSelectedProductObj(){return this.products.find((t=>t.name===this.selectedProduct))},fitImageInCanvas(t,a){const e=a.width,o=a.height,r=t.width,A=t.height,n=Math.min(e/r,o/A);t.scaleToWidth(r*n),t.set({left:(e-t.getScaledWidth())/2,top:(o-t.getScaledHeight())/2}),a.renderAll()},setObjectFullSize(){__canvas.getActiveObject()&&this.fitImageInCanvas(__canvas.getActiveObject(),__canvas),this.setVerticalCenter(),this.setHorizontalCenter()},setCenter(t){window.__canvas.viewportCenterObject(t)},preventInteraction(t){t.set({selectable:!1,evented:!1})},setCanvasClipPath(t){const a=this,e=this.getSelectedProductObj();r().Image.fromURL(e.productImageUrl,(function(e){a.fitImageInCanvas(e,t),t.set({clipPath:e}),a.setCenter(e)}),{crossOrigin:"anonymous"}),r().Image.fromURL(e.innerImageStrokeOnlyUrl,(function(e){a.fitImageInCanvas(e,t),a.setCenter(e),a.preventInteraction(e),e.set({name:"initOperationObj",excludeFromExportIn3D:!0,zIndex:1001}),t.add(e)}),{crossOrigin:"anonymous"})},addProductTagImage(t){const a=this,e=this.getSelectedProductObj();r().Image.fromURL(e.tagImageUrl,(function(e){a.fitImageInCanvas(e,t),a.preventInteraction(e),e.set({name:"initOperationObj",excludeFromExportIn3D:!0,zIndex:1e3}),t.add(e)}),{crossOrigin:"anonymous"})},addOverlapImage(t){const a=this,e=this.getSelectedProductObj();r().Image.fromURL(e.overlapImageUrl,(function(e){a.fitImageInCanvas(e,t),a.setCenter(e),a.preventInteraction(e),e.set({name:"initOperationObj",excludeFromExportIn3D:!0,zIndex:1002}),t.add(e)}),{crossOrigin:"anonymous"})},removeObjectControls(t){t.setControlsVisibility({ml:!1,mt:!1,mr:!1,mb:!1})},getObjectsClipPathImg(t){const a=this,e=this.getSelectedProductObj();return new Promise(((o,A)=>{try{r().Image.fromURL(e.innerImageUrl,(function(e,r){r?A("image could not be loaded"):(a.fitImageInCanvas(e,t),e.set({absolutePositioned:!0}),a.setCenter(e),a.preventInteraction(e),o(e))}),{crossOrigin:"anonymous"})}catch{A("image could not be loaded")}}))},layers:[],currentLayerId:0,selectedObjectLayerIndex:0,activeObjectLayerId:null,updateActiveObjectLayerId(t){this.activeObjectLayerId=t},setActiveObjectFromLayerId(t){this.updateActiveObjectLayerId(t);const a=__canvas.getObjects().find((a=>a.id===t));__canvas.setActiveObject(a).renderAll()},objectAddEvents(t){const a=this;t.on("object:added",(function(e){const o=e.target;if("initOperationObj"!==o.name)if(o.addedViaHistory)"motive"!==o.name&&"symbol"!==o.name&&"mainPicture"!==o.name&&"subPicture"!==o.name||a.layers.unshift({id:o.id,idNumeric:o.idNumeric,imageUrl:"symbol"!==o.name?o.getSrc():o.getGroupSVGSrc,type:o.name,visible:o.get("visible")}),"label"===o.name&&a.layers.unshift({id:o.id,idNumeric:o.idNumeric,text:o.text,type:o.name,visible:o.get("visible")}),Alpine.nextTick((()=>{o.lastLayersArrayBeforeRemoval&&"AddCommand"!==o.commandName&&(sortable.sort(o.lastLayersArrayBeforeRemoval),sortableCanvas.sort(o.lastLayersArrayBeforeRemoval),a.sortFromLayers(o.lastLayersArrayBeforeRemoval.slice().reverse()))}));else{if(o.id)"motive"!==o.name&&"symbol"!==o.name&&"mainPicture"!==o.name&&"subPicture"!==o.name||a.layers.unshift({id:o.id,idNumeric:o.idNumeric,imageUrl:"symbol"!==o.name?o.getSrc():o.getGroupSVGSrc,type:o.name,visible:o.get("visible")}),"symbol"!==o.name||o.stateProperties.includes("svgPathColor")||o.stateProperties.push("svgPathColor"),"symbol"===o.name||"label"===o.name||o.stateProperties.includes("filters")||o.stateProperties.push("filters"),"label"===o.name&&(o.stateProperties.includes("backgroundMode")||o.stateProperties.push("backgroundMode"),a.layers.unshift({id:o.id,idNumeric:o.idNumeric,text:o.text,type:o.name,visible:o.get("visible")})),o.stateProperties.includes("selectable")||o.stateProperties.push("selectable");else{if(o.set({id:"layer-"+a.currentLayerId,originX:"right",originY:"top",idNumeric:a.currentLayerId,objid:a.selectedObjectLayerIndex}),a.removeObjectControls(o),"motive"!==o.name&&"symbol"!==o.name||(o.scaleToWidth(t.width/10<=50?50:t.width/10),a.layers.unshift({id:o.id,idNumeric:a.currentLayerId,imageUrl:"symbol"!==o.name?o.getSrc():o.getGroupSVGSrc,type:o.name,objid:a.selectedObjectLayerIndex,visible:o.get("visible")}),a.currentLayerId++),"mainPicture"!==o.name&&"subPicture"!==o.name||(a.fitImageInCanvas(o,t),a.layers.unshift({id:o.id,idNumeric:a.currentLayerId,imageUrl:"symbol"!==o.name?o.getSrc():o.getGroupSVGSrc,type:o.name,objid:a.selectedObjectLayerIndex,visible:o.get("visible")}),a.currentLayerId++),"label"===o.name){if("template"!==o.labelType){const a=Math.max(parseInt(t.width/25),22);o.set("fontSize",a),o.fontFamily="Times New Roman"}o.fill="rgb(0,0,0)",a.layers.unshift({id:o.id,idNumeric:a.currentLayerId,type:o.name,text:o.text,objid:a.selectedObjectLayerIndex,visible:o.get("visible")}),a.currentLayerId++,o.stateProperties.includes("backgroundMode")||o.stateProperties.push("backgroundMode")}a.setCenter(o),o.set({zIndex:a.currentLayerId}),a.sortObjects(t),p.add(new f(o,t)),"symbol"!==o.name&&"label"!==o.name&&(o.stateProperties.includes("filters")||o.stateProperties.push("filters")),o.stateProperties.includes("selectable")||o.stateProperties.push("selectable"),a.selectedObjectLayerIndex=a.layers.length,a.isSaveButtonDisabled=!1}o.setCoords().saveState(),o.filters&&a.saveStateForFilters(o)}}))},objectRemoveEvents(t){const a=this;t.on("object:removed",(function(e){const o=e.target,r=a.layers.findIndex((t=>t.id===o.id));r>=0&&a.layers.splice(r,1),o.removedViaHistory||"initOperationObj"===o.name||(a.isCanvasDataLoading||p.add(new g(o,t)),a.selectedObjectLayerIndex=a.layers.length,a.isSaveButtonDisabled=!1)}))},saveStateForFilters(t){t.myOwnStateProps={},t.myOwnStateProps.filters=[],t.filters.forEach((function(a,e){t.myOwnStateProps.filters.push(a)}))},objectUpdateEvents(t){t.on("object:modified",function(a){this.isSaveButtonDisabled=!1;const e=a.target;"initOperationObj"!==e.name&&(e.stateProperties=e.stateProperties.filter(((t,a,e)=>e.indexOf(t)===a)),p.add(new C(e,t)),e.saveState(),e.filters&&this.saveStateForFilters(e))}.bind(this))},syncLayerToObject(t){this.layers.find((a=>a.id===t.id)).visible=t.visible},objectScaleEvents(t){const a=this;t.on("object:scaling",(function(t){const e=t.target;a.getSizeData(e)}))},clearSelectionHandler(){this.isObjectDeselected=!0,this.isFontStyleSaveBtnDisabled=!0,this.isCurveBlockDisabled=!0,this.isColorPickerBlockDisabled=!0,this.isObjectFilterControlsDisabled=!0,this.isTextBackgroundButtonDisabled=!0,this.updateActiveObjectLayerId(""),this.updateTextarea(""),this.isTextObjectSelected=!1},updateSelectionHandler(t){if(window.dispatchEvent(new CustomEvent("object-added-to-ai-canvas",{detail:{object:t}})),this.updateActiveObjectLayerId(t.id),this.isObjectDeselected="initOperationObj"===t.name,this.isColorPickerBlockDisabled=!("symbol"===t.name||"label"===t.name),this.isObjectFilterControlsDisabled="symbol"===t.name||"label"===t.name,this.isTextObjectSelected="label"===t.name,this.isMarkObjectOptionDisabled=t.id===this.markedObject?.id,this.isFontStyleSaveBtnDisabled="label"!==t.name,this.isCurveBlockDisabled="label"!==t.name||t._textLines?.length>1||t.textBackgroundColor,this.isTextBackgroundButtonDisabled="label"!==t.name||t.path,"label"===t.name&&(this.updateTextarea(t.text),window.dispatchEvent(new CustomEvent("object-selected-on-canvas",{detail:{objectColor:"foreground"!==t.backgroundMode?(0,c.A)(t.fill).hex():(0,c.A)(t.textBackgroundColor).hex(),backgroundMode:t.backgroundMode||"none"}}))),"symbol"===t.name&&window.dispatchEvent(new CustomEvent("object-selected-on-canvas",{detail:{objectColor:(0,c.A)(t.svgPathColor).hex(),backgroundMode:t.backgroundMode||"none"}})),t){const a=sortable.toArray().find((a=>a.includes(t.idNumeric)));this.selectedObjectLayerIndex=sortable.toArray().reverse().indexOf(a)+1,this.getSizeData(t)}!this.isObjectFilterControlsDisabled&&t.filters&&(window.dispatchEvent(new CustomEvent("update-brightness-slider-value",{detail:{brightness:t.filters.find((t=>t.brightness))?.brightness||0}})),window.dispatchEvent(new CustomEvent("update-contrast-slider-value",{detail:{contrast:t.filters.find((t=>t.contrast))?.contrast||0}})),window.dispatchEvent(new CustomEvent("update-grayscale-switch-value",{detail:{grayscale:t.filters.find((t=>"Grayscale"===t.type))}})))},objectSelectionEvents(t){const a=this;t.on("selection:created",(function(t){a.updateSelectionHandler(t.selected[0])})).on("selection:updated",(function(t){a.updateSelectionHandler(t.selected[0])})).on("selection:cleared",(function(t){a.clearSelectionHandler()}))},objectModifyEvents(t,a){const e=r().util.createCanvasElement(),o=e.getContext("2d",{willReadFrequently:!0}),A=new(r().Canvas)(e,{preserveObjectStacking:!0,uniformScaling:!0,enableRetinaScaling:!1,width:t.width,height:t.height});A.clipPath=a,o.fillStyle="red",A.add(a).renderAll(),e.style.zIndex=-1,e.style.display="none",document.getElementById("product-canvas-holder").append(e),t.on("object:modified",(function(t){const a=t.target;Object.values(a.aCoords).every((t=>o.getImageData(t.x,t.y,1,1).data[3]))||"bgimage"===a.name||a.set({top:a._stateProperties.top,left:a._stateProperties.left,angle:a._stateProperties.angle,scaleX:a._stateProperties.scaleX,scaleY:a._stateProperties.scaleY}),a.setCoords(),a.saveState()}))},renderIcon:t=>function(a,e,o,A,n){var i=this.cornerSize;a.save(),a.translate(e,o),a.rotate(r().util.degreesToRadians(n.angle)),a.drawImage(t,-i/2,-i/2),a.restore()},addCustomRotationControl(){let t=this;return new Promise(((a,e)=>{r().Image.fromURL((0,b.dR)().rotationImage,(function(o,A){A&&e(A),o.scaleToWidth(20);const n=o.toDataURL(),i=document.createElement("img");i.src=n;const l=new(r().Control)({x:-.5,y:.5,actionHandler:r().controlsUtils.rotationWithSnapping,cursorStyleHandler:r().controlsUtils.rotationStyleHandler,withConnection:!0,actionName:"rotate",render:t.renderIcon(i),cornerSize:20});r().Object.prototype.controls.mtr=l,a()}),{crossOrigin:"anonymous"})}))},addCustomDeleteControl(){let t=this;return new Promise(((a,e)=>{r().Image.fromURL((0,b.dR)().removeImage,(function(o,A){A&&e(A),o.scaleToWidth(20);const n=o.toDataURL(),i=document.createElement("img");i.src=n,r().Object.prototype.controls.deleteControl=new(r().Control)({x:-.5,y:-.5,cursorStyle:"pointer",mouseUpHandler:t.openDeleteModal,render:t.renderIcon(i),cornerSize:20}),a()}),{crossOrigin:"anonymous"})}))},addCustomSizeUpControls(){let t=this;return new Promise(((a,e)=>{r().Image.fromURL((0,b.dR)().sizeDownImage,(function(o,A){A&&e(A),o.scaleToWidth(20);const n=o.toDataURL(),i=document.createElement("img");i.src=n,r().Object.prototype.controls.sizeDownControl=new(r().Control)({x:.5,y:-.5,offsetY:24,cursorStyle:"pointer",render:t.renderIcon(i),mouseUpHandler:()=>t.decreaseObjectSize(),cornerSize:20}),a()}),{crossOrigin:"anonymous"})}))},addCustomSizeDownControls(){let t=this;return new Promise(((a,e)=>{r().Image.fromURL((0,b.dR)().sizeUpImage,(function(o,A){A&&e(A),o.scaleToWidth(20);const n=o.toDataURL(),i=document.createElement("img");i.src=n,r().Object.prototype.controls.sizeUpControl=new(r().Control)({x:.5,y:-.5,cursorStyle:"pointer",render:t.renderIcon(i),mouseUpHandler:()=>t.increaseObjectSize(),cornerSize:20}),a()}),{crossOrigin:"anonymous"})}))},get isWebglSupported(){return r().enableGLFiltering&&r().isWebglSupported&&r().isWebglSupported(r().textureSize)},manualInitFabricFilterBackend(){this.isWebglSupported&&(r().textureSize=r().maxTextureSize>8192?4096:2048,h=new(r().WebglFilterBackend)({tileSize:r().textureSize})),B=new(r().Canvas2dFilterBackend)},swapFilterBackend(t){r().filterBackend=t&&h?h:B},maxCanvasWidth:4096,maxCanvasHeight:4096,async setMaxCanvasSize(){const{success:t,width:a,height:e}=await d.maxArea();t&&(this.maxCanvasHeight=e,this.maxCanvasWidth=a)},initFabricCanvas(t,a,e){this.manualInitFabricFilterBackend();const o=window.__canvas=new(r().Canvas)(t,{preserveObjectStacking:!0,uniformScaling:!0,uniScaleTransform:!0}),A=Alpine.store("elements").canvasResizeEL,n=A.offsetWidth-2,i=A.offsetWidth-2;this.setCanvasDimensions({width:n,height:i}),a("$store.canvas.configuratorId",((t,a)=>{t!==a&&(this.isConfiguratorIdChanged=!0)})),this.initCanvasObjectsOperations(o),this.setMaxCanvasSize()},disposeCanvas(){window.__canvas.dispose()},async initCanvasObjectsOperations(t){const a=this;a.objectAddEvents(t),a.objectRemoveEvents(t),a.objectUpdateEvents(t),a.objectSelectionEvents(t),await this.addControls(),a.objectScaleEvents(t),a.configuratorId?a.restoreCanvasData(t).then((()=>{this.canvasIsReady()})).catch((t=>{console.error(t),this.canvasIsReady()})):this.resetCanvasData(t)},async addControls(){await this.addCustomRotationControl(),await this.addCustomDeleteControl(),await this.addCustomSizeUpControls(),await this.addCustomSizeDownControls()},async getDataUrlFromURL(t){let a=await fetch(t),e=await a.blob(),o=new FileReader;return await new Promise((t=>{o.onload=()=>t(o.result),o.readAsDataURL(e)}))},showCropSelectionRect:!1,canvasCropWidth:"",canvasCropHeight:"",finalImageWidth:2e3,finalImageHeight:2e3,canvasWidth:"",canvasHeight:"",sizeTemplates:[],sizeTemplatesForWorkspace:[],scalingStretegy:"fit",toggleCropSelectionRect(){const t=__canvas.getObjects().find((t=>"cropRectangle"===t.altName));t&&(t.set({visible:this.showCropSelectionRect}),this.showCropSelectionRect||__canvas.discardActiveObject(),__canvas.set({clipPath:this.showCropSelectionRect?t:null})),__canvas.renderAll()},updateCropSelectionRect(){const t=__canvas.getObjects().find((t=>"cropRectangle"===t.altName));if(t){if(!isNaN(this.canvasCropWidth)&&!isNaN(this.canvasCropHeight)){this.canvasCropWidth=parseInt(this.canvasCropWidth),this.canvasCropHeight=parseInt(this.canvasCropHeight);const a=__canvas.width/__canvas.viewportTransform[0],e=__canvas.height/__canvas.viewportTransform[3];this.canvasCropWidth>a||this.canvasCropHeight>e?this.canvasCropWidth>this.canvasCropHeight?t.set({width:a,height:a*this.canvasCropHeight/this.canvasCropWidth}):this.canvasCropHeight>this.canvasCropWidth?t.set({height:e,width:a*this.canvasCropWidth/this.canvasCropHeight}):t.set({height:a,width:e}):t.set({width:this.canvasCropWidth,height:this.canvasCropHeight})}t.scale(1),this.setCenter(t)}},async setCanvasBackground(t){const a=window.__canvas;if(!t)return a.set({backgroundImage:null}),void a.renderAll();r().Image.fromURL(t,(t=>{t.scaleToWidth(a.width/a.viewportTransform[0]),t.getScaledHeight()<a.height/a.viewportTransform[3]&&t.scaleToHeight(a.height/a.viewportTransform[3]),(a.width-t.getScaledWidth()).toFixed(2),(a.height-t.getScaledHeight()).toFixed(2);let e={x:a.width/a.viewportTransform[0]/2,y:a.height/a.viewportTransform[3]/2};t.set({left:e.x,top:e.y,name:"bgimage",originX:"center",originY:"center"}),a.backgroundImage=t,this.isSaveButtonDisabled=!1,a.requestRenderAll()}),{crossOrigin:"anonymous"})},sortFromLayers(t){t.forEach((function(t,a,e){window.__canvas.getObjects().forEach((function(e){e.id===t&&(e.zIndex=a)}))})),this.sortObjects(window.__canvas);const a=window.__canvas.getActiveObject();if(a){const e=t.find((t=>t.includes(a.id)));this.selectedObjectLayerIndex=t.indexOf(e)+1}},sortObjects(t){t._objects.sort(((t,a)=>t.zIndex>a.zIndex?1:-1)),t.renderAll()},setCanvasDimensions(t){const a=window.__canvas;a.setDimensions(t);const{width:e,height:o}=t;this.canvasCropWidth=Math.round(e/a.viewportTransform[0]*90/100),this.canvasCropHeight=Math.round(o/a.viewportTransform[3]*90/100),this.updateCropSelectionRect(),this.oldContainerWidth=Alpine.store("elements").canvasResizeEL.offsetWidth-2,a.renderAll()},addCropRectangle(t){this.showCropSelectionRect=!1,__canvas.clipPath=null,__canvas.renderAll();const a=__canvas.getObjects().find((t=>"cropRectangle"===t.altName));if(a&&a.set({visible:!1}),!a){const a=this,e=new(r().Rect)({absolutePositioned:!0,name:"initOperationObj",altName:"cropRectangle",fill:"#ff0000",opacity:.01,stroke:"black",visible:!1,strokeWidth:0,width:Math.round(t.width/t.viewportTransform[0]*90/100),height:Math.round(t.height/t.viewportTransform[3]*90/100),strokeUniform:!0,cornerStyle:"circle",transparentCorners:!1,zIndex:1002,excludeFromExport:!0});e.on("modified",(function(t){a.canvasCropWidth=Math.round(e.getScaledWidth()),a.canvasCropHeight=Math.round(e.getScaledHeight())})),e.setControlsVisibility({deleteControl:!1,mtr:!1,sizeUpControl:!1,sizeDownControl:!1}),this.setCenter(e),t.add(e)}},oldContainerWidth:"",resizeCanvas(t,a,e=!0,o){let r=Alpine.store("elements").canvasResizeEL.offsetWidth-2;(0===r||r<0)&&(r=a);let A={width:r,height:r};const n=r/a,i=e?t.viewportTransform[0]:1,l=t.getContext().filter;t.setViewportTransform([n*i,0,0,n*i,0,0]),o&&(A={width:o?.width*n,height:o?.height*n}),this.setCanvasDimensions(A),this.canvasWidth=Math.round(A.width),this.canvasHeight=Math.round(A.height),l&&(t.getContext().filter=l),t.renderAll()},zoomCount:1,zoomInCanvas(){const t=window.__canvas,a=t.getZoom();t.zoomToPoint(new(r().Point)(t.width/2,t.height/2),a+.1),this.zoomCount++},zoomOutCanvas(){const t=window.__canvas,a=t.getZoom();t.zoomToPoint(new(r().Point)(t.width/2,t.height/2),a-.1),this.zoomCount--},resetCurrentZoom(t){for(;1!==this.zoomCount;)this.zoomCount>1?this.zoomOutCanvas():this.zoomInCanvas()},isFullScreen:!1,setFullScreenCanvas(){},enablePanning(t){t.on("mouse:down",(function(t){const a=t.e;!0===a.altKey&&(this.isDragging=!0,this.selection=!1,this.lastPosX=a.clientX,this.lastPosY=a.clientY)})),t.on("mouse:move",(function(t){if(this.isDragging){const e=t.e;var a=this.viewportTransform;a[4]+=e.clientX-this.lastPosX,a[5]+=e.clientY-this.lastPosY,this.requestRenderAll(),this.lastPosX=e.clientX,this.lastPosY=e.clientY}})),t.on("mouse:up",(function(t){this.setViewportTransform(this.viewportTransform),this.isDragging=!1,this.selection=!0}))},async addShapeToCanvas(t,a){const e=window.__canvas;"motive"===a&&r().Image.fromURL(t,(function(t){t.name=a,e.add(t)}),{crossOrigin:"anonymous"}),"symbol"===a&&r().loadSVGFromURL(t,(function(o,A){let n=r().util.groupSVGElements(o,A);n.name=a,n.stateProperties.push("svgPathColor"),n.svgPathColor="#000000",n.id=null,n.getGroupSVGSrc=t,e.add(n)}),(function(){}),{crossOrigin:"anonymous"})},async addPictureToCanvas(t,a){const e=window.__canvas;r().Image.fromURL(t,(function(t){t.name=a,e.add(t)}),{crossOrigin:"anonymous"})},canvasIsReady(){window.dispatchEvent(new CustomEvent("canvas-is-ready")),this.addCropRectangle(__canvas)},addLabelToCanvas(t){const a=window.__canvas,e=new(r().Text)(t);e.name="label",a.add(e)},addTemplateToCanvas(t){const a=window.__canvas,e=new(r().Text)(t.text,{name:"label",labelType:"template",fontFamily:t.fontFamily,fontSize:t.fontSize/__canvas.viewportTransform[0],fontWeight:t.fontWeight});e.name="label",a.add(e)},increaseObjectSize(){const t=window.__canvas,a=t.getActiveObject();if(a){const e=a.scaleX+a.scaleX/10;a.scale(e),t.fire("object:modified",{target:a}),this.getSizeData(a),t.renderAll()}},decreaseObjectSize(){const t=window.__canvas,a=t.getActiveObject();if(a){const e=a.scaleX-a.scaleX/10;a.scale(e),t.fire("object:modified",{target:a}),this.getSizeData(a),t.renderAll()}},_curvatureValue:60,get curvatureValue(){return this._curvatureValue},set curvatureValue(t){this._curvatureValue=Math.min(500,Math.max(0,t))},isCurveTextboxDisabled:!0,curveDirection:null,applyCurvature(){const t=window.__canvas,a=t.getActiveObject();if(a&&"label"===a.name){const e=a.width,o=a.height,A=parseFloat(this.curvatureValue);if(null===A||isNaN(A)||A<=0)a?.set({path:null,selectable:!0});else{const n=t.width/2,i=t.height/2,l=A/80;let s;"upcurve"===this.curveDirection?s=`M ${n-e/2} ${i}\n                                    Q ${n} ${i+o*l}\n                                    ${n+e/2} ${i}`:"downcurve"===this.curveDirection&&(s=`M ${n-e/2} ${i}\n                                    Q ${n} ${i-o*l}\n                                    ${n+e/2} ${i}`);const m=new(r().Path)(s,{strokeWidth:1,visible:!1});a?.set({path:m,pathSide:"center",pathStartOffset:0,selectable:!0})}this.updateSelectionHandler(a),a?.set({width:e,height:o}),t.renderAll(),t.fire("object:modified",{target:a})}},activeObjectWidth:"",activeObjectHeight:"",getSizeData(t){this.activeObjectWidth="Width: "+t.getScaledWidth().toFixed(2)+"px",this.activeObjectHeight="Height: "+t.getScaledHeight().toFixed(2)+"px"},markedObject:null,isMarkObjectOptionDisabled:!1,markObject(){const t=window.__canvas,a=t.getActiveObject();this.markedObject?.set({borderColor:"#b2ccff"}),a.set({borderColor:"green"}),t.renderAll(),this.markedObject=a,this.isMarkObjectOptionDisabled=!0},applySameSizeAsMarkedObject(){const t=window.__canvas,a=t.getActiveObject();if(this.markedObject&&a!==this.markedObject){const e=this.markedObject.width*this.markedObject.scaleX,o=this.markedObject.height*this.markedObject.scaleY;a.scaleToWidth(e),a.scaleToHeight(o),a.setCoords(),t.renderAll()}},async crop(t){let a;a="symbol"!==__canvas.getActiveObject().name?__canvas.getActiveObject().getSrc():__canvas.getActiveObject().getGroupSVGSrc;const e=a.split("/").pop(),o=await fetch(a),r=await(o?.blob()),A=o?.headers?.get("Content-Type"),n=new File([r],e,{type:A,lastModified:Date.now()});t.cropperStore.prepareCropperImage({originalImageFile:n,fileName:n.name,url:a,cropperData:null,uploadWithoutConfig:!0,fileType:"mainPicture"===__canvas.getActiveObject().name?"mainPictures":"shapes",el:"mainPicture"===__canvas.getActiveObject().name?t.elements.pictureUploadEL:t.elements.shapeUploadEL})},replaceActiveObjectUrl(t){__canvas.getActiveObject().setSrc(t,(function(t){__canvas.renderAll()}),{crossOrigin:"anonymous"})},updateTextarea(t){window.__canvas.getActiveObject(),window.dispatchEvent(new CustomEvent("update-text-area",{detail:{text:t}}))},updateObjectText(t){const a=window.__canvas,e=a.getActiveObject();e&&"label"===e.name&&(e?.set({path:null,selectable:!0,text:t}),a.renderAll())},_shadowDistance:0,get shadowDistance(){return this._shadowDistance},set shadowDistance(t){this._shadowDistance=t},_blurDistance:0,get blurDistance(){return this._blurDistance},set blurDistance(t){this._blurDistance=t},shadowEffect(t){const a=window.__canvas,e=a.getActiveObject(),o=parseInt(this.shadowDistance,10),A=parseInt(this.blurDistance,10),n=new(r().Shadow)({color:"rgba(0,0,0,0.6)",blur:A,offsetX:4,offsetY:o});e.set({shadow:"apply"===t?n:null}),a.requestRenderAll()},setHorizontalCenter(){const t=window.__canvas,a=t.getActiveObject();a&&(t.viewportCenterObjectH(a),t.fire("object:modified",{target:a}))},setVerticalCenter(){const t=window.__canvas,a=t.getActiveObject();a&&(t.viewportCenterObjectV(a),t.fire("object:modified",{target:a}))},setAngle(t){const a=window.__canvas,e=a.getActiveObject();e?.rotate(t),a.renderAll()},openDeleteModal(){Alpine.store("modal").openModal(Alpine.store("elements").deleteObjectModalEL)},removeObject(){const t=window.__canvas,a=t.getActiveObjects();t.discardActiveObject(),a.forEach((function(a){a.lastLayersArrayBeforeRemoval=sortable.toArray().filter((t=>"ignore"!==t)),t.remove(a),t.renderAll()}))},toggleObjectById(t,a){const e=__canvas.getObjects().find((a=>a.id===t)),o=e.get("visible");e.set({visible:!o,selectable:!o}),e.get("visible")||a((()=>{__canvas.discardActiveObject().renderAll()})),this.layers.find((a=>a.id===t)).visible=!o,__canvas.fire("object:modified",{target:e}),__canvas.renderAll()},setLabelBackgroundColor(t){const a=window.__canvas,e=a?.getActiveObject();e.set({fill:t.color,textBackgroundColor:t.textBackgroundColor,bgCornerRadius:10,backgroundMode:t.backgroundMode}),this.updateSelectionHandler(e),a.fire("object:modified",{target:e}),a.renderAll()},setLabelColor(t){const a=window.__canvas,e=a?.getActiveObject(),o=e?.name;if("label"===o&&(e.set({fill:t}),a.fire("object:modified",{target:e}),a.renderAll()),"symbol"===o){let o=e._objects;o?.filter((t=>"path"===t.type)).forEach((function(a){"#fff"===a.fill&&"#ffffff"!==a.fill&&"rgb(255,255,255)"!==a.fill||a.set({fill:t})})),e.svgPathColor=t,a.fire("object:modified",{target:e}),a.renderAll()}},setCanvasBackgroundColor(t){__canvas.set({backgroundImage:null,backgroundColor:t}),__canvas.renderAll()},setMotiveOrPictureBackgroundColor(t){const a=__canvas.getActiveObject();!a||"motive"!==a.name&&"mainPicture"!==a.name&&"subPicture"!==a.name||(a.set({backgroundColor:t}),__canvas.renderAll())},setCanvasGradient(t,a){const e=window.__canvas,o=this.calculateGradientCoords(a,e.width,e.height),A=new(r().Gradient)({type:"linear",coords:o,colorStops:t});e.set({backgroundImage:null,backgroundColor:A}),e.renderAll()},calculateGradientCoords(t,a,e){const o=t*Math.PI/180,r=Math.cos(o),A=Math.sin(o),n=Math.sqrt(a*a+e*e),i=a/2,l=e/2;return{x1:i-r*n/2,y1:l-A*n/2,x2:i+r*n/2,y2:l+A*n/2}},setLabelFont(t){const a=window.__canvas,e=a.getActiveObject(),o=e?.type;"text"===o&&(e.set({fontFamily:t}),a.fire("object:modified",{target:e}),a.renderAll())},saveCanvasData(t){const a=window.__canvas,e=a.getContext().filter.match(/brightness\((\d+(\.\d+)?)\)\s*/),o=a.getContext().filter.match(/contrast\((\d+(\.\d+)?)\)\s*/),r=a.getContext().filter.match(/grayscale\s*\((\d+(?:\.\d+)?|\d+%)\)\s*/);this.isServerLoaderCanvasVisible=!0;const A={savedCanvasSize:this.oldContainerWidth,savedCanvasDim:{width:a.getWidth(),height:a.getHeight()},savedViewportTransform:a.viewportTransform,canvasBrightness:e?parseFloat(e[1]):null,canvasContrast:o?parseFloat(o[1]):null,canvasGrayScale:r?parseFloat(r[1]):null,sizeTemplates:this.sizeTemplates},n=a.toJSON(["id","idNumeric","backgroundImage","name","labelType","selectable","evented","zIndex","excludeFromExportIn3D","svgPathColor","getGroupSVGSrc","filters","backgroundMode"]);this.canvasData=Object.assign(A,n);const i=new FormData;i.append("configuratorId",this.configuratorId||null),i.append("product3dImage",t);const l=JSON.stringify(this.canvasData);let s;return i.append("canvasData",l),this.configuratorId?(i.append("_method","PUT"),s=`${this.apiConfig.apiUrl}/api/v1/product-configurators/${i.get("configuratorId")}`):(s=`${this.apiConfig.apiUrl}/api/v1/product-configurators`,i.append("productId",this.productId||null)),fetch(s,{method:"POST",body:i,timeout:0,headers:{Authorization:`Bearer ${this.apiConfig.apiToken}`},redirect:"follow"}).then((t=>t.json())).then((t=>(Alpine.store("canvas").isServerLoaderCanvasVisible=!1,t?.data&&(Alpine.store("canvas").configuratorId=t.data.toString(),this.isSaveButtonDisabled=!0,window.dispatchEvent(new CustomEvent("canvas-data-saved",{detail:{configuratorId:t.data}})),this.isConfiguratorIdChanged=!1),t))).catch((t=>{console.error(t)}))},isCanvasDataLoading:!1,resetCanvasData(t){__canvas.setBackgroundColor("transparent"),this.isCanvasDataLoading=!0;const a=t.getObjects().filter((t=>"initOperationObj"!==t.name));t.remove(...a),t.backgroundImage=null,p.clear(),t.requestRenderAll(),this.isCanvasDataLoading=!1,this.isCanvasResetBtnDisabled=!0,this.isSaveButtonDisabled=!0,this.canvasIsReady()},async restoreCanvasData(t){return this.isServerLoaderCanvasVisible=!0,p.clear(),this.isConfiguratorIdChanged=!1,new Promise(((a,e)=>{fetch(`${this.apiConfig.apiUrl}/api/v1/product-configurators/${this.configuratorId}?isGlobal=true`,{method:"GET",headers:{Authorization:`Bearer ${this.apiConfig.apiToken}`},redirect:"follow"}).then((t=>{if(t.ok)return t.json();