@pairbo/ui-kit 0.3.21 → 0.3.22

package/dist/ui-kit.js

@@ -2599,7 +2599,7 @@
   .type-canvas-container.image-loading pbo-image {
     display: block;
   }
-`;var Wp=Object.defineProperty,Up=Object.getOwnPropertyDescriptor,Ut=(n,t,e,i)=>{for(var s=i>1?void 0:i?Up(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&Wp(t,e,s),s};let Ot=class extends pt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.message="",this.font="Arial",this.color="#000",this.alignment="left",this.scale=1,this.areaPosition={left:0,top:0},this.areaSize={width:0,height:0},this.imgLoading=!1,this.backgroundImage=void 0,this.resizeObserver=void 0}async handleBackgroundImageUrlChange(){this.imgLoading=!0,await this.appendBackgroundImageToCanvas(this.backgroundImageUrl??"",()=>{this.imgLoading=!1}),this.updateTextAreaPosition()}handleBackgroundImageChange(){if(!this.backgroundImage)return;const t=this.canvas.getContext("2d");if(!t)throw new Error("Could not get canvas context");t.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height)}firstUpdated(){this.resizeObserver=new ResizeObserver(()=>{this.updateTextAreaPosition()}),this.resizeObserver.observe(this.canvasContainer)}updated(t){if(t.has("message")||t.has("font")||t.has("color")||t.has("alignment")||t.has("areaPosition")||t.has("areaSize")){if(!this.backgroundImage)return;const e=this.canvas.getContext("2d");if(!e)return;e.clearRect(0,0,this.canvas.width,this.canvas.height),e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.wrapText(e,this.message,this.areaPosition,this.areaSize,12,this.alignment)}}getMaxStringLength(t,e,i){let s=0;for(let r=1;r<=e.length;r++){const o=e.substring(0,r);if(t.measureText(o).width>i)break;s=r}return s}wrapText(t,e,i,s,r,o){if(!t||!e||!i||!s)return;const a=s.height/r,l=a/1.2,c=e.split(`
+`;var Wp=Object.defineProperty,Up=Object.getOwnPropertyDescriptor,Ut=(n,t,e,i)=>{for(var s=i>1?void 0:i?Up(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&Wp(t,e,s),s};let Ot=class extends pt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.message="",this.font="Arial",this.color="#000",this.alignment="left",this.scale=1,this.areaPosition={left:0,top:0},this.areaSize={width:0,height:0},this.imgLoading=!1,this.backgroundImage=void 0,this.resizeObserver=void 0}async handleBackgroundImageUrlChange(){this.imgLoading=!0,await this.appendBackgroundImageToCanvas(this.backgroundImageUrl??"",()=>{this.imgLoading=!1}),this.updateTextAreaPosition()}handleBackgroundImageChange(){if(!this.backgroundImage)return;const t=this.canvas.getContext("2d");if(!t)throw new Error("Could not get canvas context");t.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height)}firstUpdated(){this.resizeObserver=new ResizeObserver(()=>{this.updateTextAreaPosition()}),this.resizeObserver.observe(this.canvasContainer)}updated(t){if(t.has("message")||t.has("font")||t.has("color")||t.has("alignment")||t.has("areaPosition")||t.has("areaSize")){if(!this.backgroundImage||this.areaSize.width===0||this.areaSize.height===0)return;const e=this.canvas.getContext("2d");if(!e)return;e.clearRect(0,0,this.canvas.width,this.canvas.height),e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.wrapText(e,this.message,this.areaPosition,this.areaSize,12,this.alignment)}}getMaxStringLength(t,e,i){let s=0;for(let r=1;r<=e.length;r++){const o=e.substring(0,r);if(t.measureText(o).width>i)break;s=r}return s}wrapText(t,e,i,s,r,o){if(!t||!e||!i||!s)return;const a=s.height/r,l=a/1.2,c=e.split(`
 `);let h=[];t.font=`${l}px ${this.font}`,c.forEach(u=>{const p=u.split(" ");let g="";for(let f=0;f<p.length;f++)if(t.measureText(p[f]).width>s.width){const y=this.getMaxStringLength(t,p[f],s.width),w=p[f];f+1<p.length?(p[f]=w.substring(0,y),p[f+1]=w.substring(y,w.length)+p[f+1]):(p[f]=w.substring(0,y),p.push(w.substring(y,w.length)))}for(let f=0;f<p.length;f++){let b=g+p[f]+" ";t.measureText(b).width>s.width&&f>0?(h.push(g),g=p[f]+" "):g=b}h.push(g)});let d=i.left;o==="center"&&(d+=s.width/2),o==="right"&&(d+=s.width);for(let u=0;u<r&&u<h.length;u++){const p=h[u];t.fillStyle=this.color,t.textAlign=o,t.fillText(p,d,i.top+(u+1)*a)}}updateTextAreaPosition(){if(!this.canvas||!this.backgroundImage)return;const t=this.canvasContainer.clientWidth;this.scale=t/this.backgroundImage.width,this.canvas.width=this.backgroundImage.width*this.scale,this.canvas.height=this.backgroundImage.height*this.scale;const e=this.canvas.getContext("2d");e&&e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.areaPosition={left:.084*this.canvas.width,top:.4874*this.canvas.height},this.areaSize={width:.832*this.canvas.width,height:this.canvas.height-this.areaPosition.top-this.areaPosition.left}}async appendBackgroundImageToCanvas(t,e){return new Promise((i,s)=>{const r=new Image;r.onerror=()=>{s(new Error("Failed to load image"))},r.onload=()=>{this.backgroundImage=r,e&&e(),i()},r.src=t})}render(){return L`
       <div
         class="${pe({"type-canvas-container":!0,"image-loading":this.imgLoading})} 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",