@pairbo/ui-kit 0.4.10 → 0.4.11

package/dist/page-manager.js

@@ -2813,7 +2813,7 @@ void main() {
     color.b += max != color.b ? (max - color.b) * amt : 0.00;
     gl_FragColor = color;
   }
-`}applyTo2d(t){let{imageData:{data:e}}=t;const i=-this.vibrance;for(let s=0;s<e.length;s+=4){const n=e[s],o=e[s+1],a=e[s+2],l=Math.max(n,o,a),c=(n+o+a)/3,h=2*Math.abs(l-c)/255*i;e[s]+=l!==n?(l-n)*h:0,e[s+1]+=l!==o?(l-o)*h:0,e[s+2]+=l!==a?(l-a)*h:0}}sendUniformData(t,e){t.uniform1f(e.uVibrance,-this.vibrance)}isNeutralState(){return this.vibrance===0}}v(kr,"type","Vibrance"),v(kr,"defaults",{vibrance:0}),v(kr,"uniformLocations",["uVibrance"]),A.setClass(kr);var Pm=Object.defineProperty,Am=Object.getOwnPropertyDescriptor,Pt=(r,t,e,i)=>{for(var s=i>1?void 0:i?Am(t,e):t,n=r.length-1,o;n>=0;n--)(o=r[n])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&Pm(t,e,s),s};let dt=class extends kt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.handwrittenImageUrl=void 0,this.imageHeight=null,this.imageWidth=null,this.imageLeft=null,this.imageTop=null,this.displayType="default",this.backgroundFabImg=void 0,this.rect=void 0,this.areaPosition={left:0,top:0},this.uploadingText=void 0,this.handwrittenImage=void 0,this.clipMaskOverlay=void 0,this.areaSize={width:0,height:0},this._dimensionsUpdateTimeout=void 0,this.DEFAULT_BACKGROUND_URL="https://cdn.shopify.com/s/files/1/1956/2323/files/insert_86e8bcd5-3e82-4910-b350-485fa6958502.png?v=1726598821",this.AREA_PERCENTAGES={default:{left:.084,top:.4899,width:.832,height:.45},fullSize:{left:.084,top:.06,width:.832,height:.879}},this.HANDWRITTEN_IMAGE_STYLES={transparentCorners:!1,cornerColor:"#4287f5",cornerStyle:"circle",cornerStrokeWidth:2,cornerStrokeColor:"#2563eb",scalingLimitations:"preserveAspectRatio",bringToFrontOnSelect:!1,borderColor:"#4287f5",borderScaleFactor:10},this.CONTROL_VISIBILITY={tl:!0,tr:!0,bl:!0,br:!0,mt:!1,mb:!1,ml:!1,mr:!1,mtr:!1}}async handleBackgroundImageUrlChange(){this.canvas&&(this.removeBackgroundImage(),await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.canvas.renderAll())}async handleHandwrittenImageUrlChange(){this.canvas&&(this.removeHandwrittenImage(),this.handwrittenImageUrl&&await this.loadHandwrittenImage(),this.updateProcessedImgAreaPosition(),this.resetHandwrittenImagePosition(),this.updateClipMaskOverlay(),this.canvas.renderAll())}handleHandwrittenImageDimensionsChange(){this.debounceUpdateDimensions()}firstUpdated(){this.initializeCanvas(),this.setupEventListeners(),this.loadInitialContent()}render(){return j`<canvas class="base-canvas"></canvas>`}initializeCanvas(){this.canvas=new fo(this.baseCanvas,{width:500,height:500,containerClass:"fabric-container",preserveObjectStacking:!0})}setupEventListeners(){document.addEventListener("pbo-image-processing",this.handleImageProcessing.bind(this))}async loadInitialContent(){this.backgroundImageUrl?(await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.createUploadingText()):this.updateProcessedImgAreaPosition(),this.canvas.renderAll()}removeBackgroundImage(){this.backgroundFabImg&&(this.canvas.remove(this.backgroundFabImg),this.backgroundFabImg=void 0)}async loadBackgroundImage(){const r=this.backgroundImageUrl||this.DEFAULT_BACKGROUND_URL;await this.appendBackgroundImageToCanvas(r)}async appendBackgroundImageToCanvas(r,t){const e=await te.fromURL(r);e.selectable=!1,this.backgroundFabImg=e,this.canvas.setDimensions({width:e.width,height:e.height}),this.canvas.add(e),this.canvas.sendObjectToBack(e),this.canvas.renderAll(),t&&t()}removeHandwrittenImage(){this.handwrittenImage&&(this.canvas.remove(this.handwrittenImage),this.handwrittenImage=void 0)}async loadHandwrittenImage(){this.handwrittenImage=await te.fromURL(this.handwrittenImageUrl),this.configureHandwrittenImage(),this.setupHandwrittenImageEvents(),this.canvas.add(this.handwrittenImage)}configureHandwrittenImage(){if(!this.handwrittenImage)return;const r=this.calculateImageScale(),t=this.createClipRect();this.handwrittenImage.set({...this.HANDWRITTEN_IMAGE_STYLES,selectable:!0,lockRotation:!0,lockScalingFlip:!0,noScaleCache:!1,cornerSize:this.calculateCornerSize(),touchCornerSize:this.calculateTouchCornerSize(),left:this.areaPosition.left,top:this.areaPosition.top,scaleX:r,scaleY:r,clipPath:t}),this.handwrittenImage.setControlsVisibility(this.CONTROL_VISIBILITY),this.updateHandwrittenImageDimensions(r)}calculateImageScale(){if(!this.handwrittenImage)return 1;const r=this.areaSize.width/this.handwrittenImage.width,t=this.areaSize.height/this.handwrittenImage.height;return Math.min(r,t)}calculateCornerSize(){return this.areaSize.width*(ui()?.06:.03)}calculateTouchCornerSize(){return this.areaSize.width*(ui()?.2:.06)}createClipRect(){return new ee({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0})}updateHandwrittenImageDimensions(r){this.handwrittenImage&&this.setHandwrittenImageDimensions({top:this.areaPosition.top,left:this.areaPosition.left,height:this.handwrittenImage.height*r,width:this.handwrittenImage.width*r})}setupHandwrittenImageEvents(){this.handwrittenImage&&(this.handwrittenImage.on("scaling",this.handleImageScaling.bind(this)),this.handwrittenImage.on("moving",this.handleImageMoving.bind(this)),this.handwrittenImage.on("selected",this.handleImageSelected.bind(this)),this.handwrittenImage.on("deselected",this.handleImageDeselected.bind(this)))}handleImageScaling(r){const{top:t,left:e,height:i,width:s,scaleX:n,scaleY:o}=r.transform.target;this.setHandwrittenImageDimensions({top:t,left:e,height:i*o,width:s*n})}handleImageMoving(r){const{top:t,left:e}=r.transform.target;this.setHandwrittenImageDimensions({top:t,left:e})}handleImageSelected(){this.showSelectionUI()}handleImageDeselected(){this.hideSelectionUI()}showSelectionUI(){var r,t;(r=this.rect)==null||r.set("visible",!0),(t=this.handwrittenImage)==null||t.set("clipPath",null),this.clipMaskOverlay?this.clipMaskOverlay.set("visible",!0):(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay)),this.canvas.bringObjectToFront(this.clipMaskOverlay),this.canvas.renderAll()}hideSelectionUI(){var r,t,e;(r=this.rect)==null||r.set("visible",!1),(t=this.handwrittenImage)==null||t.set({clipPath:this.createClipRect()}),(e=this.clipMaskOverlay)==null||e.set("visible",!1)}createClipMaskOverlay(){const r=this.canvas.getWidth(),t=this.canvas.getHeight(),{left:e,top:i}=this.areaPosition,{width:s,height:n}=this.areaSize,o="rgba(0,0,0,0.1)",a=[this.createMaskRect(0,0,r,i,o),this.createMaskRect(0,i+n,r,t-(i+n),o),this.createMaskRect(0,i,e,n,o),this.createMaskRect(e+s,i,r-(e+s),n,o)];return new fi(a,{selectable:!1,evented:!1})}createMaskRect(r,t,e,i,s){return new ee({left:r,top:t,width:e,height:i,fill:s,selectable:!1,evented:!1})}updateClipMaskOverlay(){this.clipMaskOverlay&&(this.canvas.remove(this.clipMaskOverlay),this.clipMaskOverlay=void 0),this.handwrittenImage&&this.canvas.getActiveObject()===this.handwrittenImage&&(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay),this.canvas.bringObjectToFront(this.clipMaskOverlay))}resetHandwrittenImagePosition(){if(!this.handwrittenImage)return;const r=this.areaSize.width/this.handwrittenImage.width,t=this.areaSize.height/this.handwrittenImage.height,e=Math.min(r,t);this.handwrittenImage.set({left:this.areaPosition.left,top:this.areaPosition.top,scaleX:e,scaleY:e});const i=new ee({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0});this.handwrittenImage.set({clipPath:i}),this.setHandwrittenImageDimensions({top:this.areaPosition.top,left:this.areaPosition.left,height:this.handwrittenImage.height*e,width:this.handwrittenImage.width*e}),this.emitDimensionsChangedEvent()}updateProcessedImgAreaPosition(){const r=this.getAreaPercentages();this.areaPosition={left:r.left*this.canvas.getWidth(),top:r.top*this.canvas.getHeight()},this.areaSize={width:r.width*this.canvas.getWidth(),height:r.height*this.canvas.getHeight()},this.updateAreaRect()}getAreaPercentages(){return this.displayType==="default"?this.AREA_PERCENTAGES.default:this.AREA_PERCENTAGES.fullSize}updateAreaRect(){this.rect?this.rect.set({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height}):this.createAreaRect()}createAreaRect(){this.rect=new ee({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height,selectable:!1,fill:"rgba(255, 255, 255, 0.5)",visible:!1,evented:!1}),this.canvas.add(this.rect)}debounceUpdateDimensions(){this._dimensionsUpdateTimeout&&clearTimeout(this._dimensionsUpdateTimeout),this._dimensionsUpdateTimeout=setTimeout(()=>{var r;this.applyHandwrittenImageDimensions(),(r=this.canvas)==null||r.renderAll(),this.emitDimensionsChangedEvent()},300)}applyHandwrittenImageDimensions(){this.isValidForDimensionUpdate()&&(this.handwrittenImage.set({left:this.imageLeft,top:this.imageTop}),this.handwrittenImage.scaleToHeight(this.imageHeight),this.handwrittenImage.scaleToWidth(this.imageWidth))}isValidForDimensionUpdate(){return ys(this.handwrittenImage)&&ys(this.imageLeft)&&ys(this.imageTop)&&ys(this.imageWidth)&&ys(this.imageHeight)}setHandwrittenImageDimensions(r){const{top:t,left:e,height:i,width:s}=r;if(!this.hasValidDimensions(r)){console.warn("Invalid dimensions provided for handwritten image");return}this.updateDimensionIfChanged("imageLeft",e),this.updateDimensionIfChanged("imageTop",t),this.updateDimensionIfChanged("imageHeight",i),this.updateDimensionIfChanged("imageWidth",s)}hasValidDimensions(r){const{top:t,left:e,height:i,width:s}=r;return!!(t||e||i||s)}updateDimensionIfChanged(r,t){t&&this[r]!==t&&(this[r]=t)}emitDimensionsChangedEvent(){var r,t;this.emit("handwritten-image-dimensions-changed",{detail:{left:this.imageLeft??0,top:this.imageTop??0,width:this.imageWidth??0,height:this.imageHeight??0,cardHeight:((r=this.backgroundFabImg)==null?void 0:r.height)??0,cardWidth:((t=this.backgroundFabImg)==null?void 0:t.width)??0}})}createUploadingText(){this.uploadingText=new pi("Uploading",{left:this.areaPosition.left,top:this.areaPosition.top+this.areaSize.height/2-this.areaSize.height/13/1.1,width:this.areaSize.width,textAlign:"center",fontSize:this.areaSize.height/13/1.1,fontFamily:"Arial",selectable:!1,evented:!1})}handleImageProcessing(r){const t=r.detail.isLoading;this.uploadingText&&(t?this.canvas.add(this.uploadingText):this.canvas.remove(this.uploadingText),this.canvas.renderAll())}};dt.styles=[Ot,Bp];Pt([C({attribute:"background-url"})],dt.prototype,"backgroundImageUrl",2);Pt([C({attribute:"handwritten-url"})],dt.prototype,"handwrittenImageUrl",2);Pt([C({type:Number,reflect:!0,attribute:"height"})],dt.prototype,"imageHeight",2);Pt([C({type:Number,reflect:!0,attribute:"width"})],dt.prototype,"imageWidth",2);Pt([C({type:Number,reflect:!0,attribute:"left"})],dt.prototype,"imageLeft",2);Pt([C({type:Number,reflect:!0,attribute:"top"})],dt.prototype,"imageTop",2);Pt([C({attribute:"display-type"})],dt.prototype,"displayType",2);Pt([z(".base-canvas")],dt.prototype,"baseCanvas",2);Pt([I()],dt.prototype,"canvas",2);Pt([I()],dt.prototype,"backgroundFabImg",2);Pt([I()],dt.prototype,"rect",2);Pt([I()],dt.prototype,"areaPosition",2);Pt([I()],dt.prototype,"uploadingText",2);Pt([I()],dt.prototype,"handwrittenImage",2);Pt([I()],dt.prototype,"clipMaskOverlay",2);Pt([I()],dt.prototype,"areaSize",2);Pt([Z("backgroundImageUrl")],dt.prototype,"handleBackgroundImageUrlChange",1);Pt([Z(["handwrittenImageUrl","displayType"])],dt.prototype,"handleHandwrittenImageUrlChange",1);Pt([Z(["imageLeft","imageTop","imageWidth","imageHeight"])],dt.prototype,"handleHandwrittenImageDimensionsChange",1);dt=Pt([Et("pbo-handwritten-canvas")],dt);const Dm=ft`
+`}applyTo2d(t){let{imageData:{data:e}}=t;const i=-this.vibrance;for(let s=0;s<e.length;s+=4){const n=e[s],o=e[s+1],a=e[s+2],l=Math.max(n,o,a),c=(n+o+a)/3,h=2*Math.abs(l-c)/255*i;e[s]+=l!==n?(l-n)*h:0,e[s+1]+=l!==o?(l-o)*h:0,e[s+2]+=l!==a?(l-a)*h:0}}sendUniformData(t,e){t.uniform1f(e.uVibrance,-this.vibrance)}isNeutralState(){return this.vibrance===0}}v(kr,"type","Vibrance"),v(kr,"defaults",{vibrance:0}),v(kr,"uniformLocations",["uVibrance"]),A.setClass(kr);var Pm=Object.defineProperty,Am=Object.getOwnPropertyDescriptor,Pt=(r,t,e,i)=>{for(var s=i>1?void 0:i?Am(t,e):t,n=r.length-1,o;n>=0;n--)(o=r[n])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&Pm(t,e,s),s};let dt=class extends kt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.handwrittenImageUrl=void 0,this.imageHeight=null,this.imageWidth=null,this.imageLeft=null,this.imageTop=null,this.displayType="default",this.backgroundFabImg=void 0,this.rect=void 0,this.areaPosition={left:0,top:0},this.uploadingText=void 0,this.handwrittenImage=void 0,this.clipMaskOverlay=void 0,this.areaSize={width:0,height:0},this._dimensionsUpdateTimeout=void 0,this.DEFAULT_BACKGROUND_URL="https://cdn.shopify.com/s/files/1/1956/2323/files/insert_86e8bcd5-3e82-4910-b350-485fa6958502.png?v=1726598821",this.AREA_PERCENTAGES={default:{left:.084,top:.4899,width:.832,height:.45},fullSize:{left:.084,top:.06,width:.832,height:.879}},this.HANDWRITTEN_IMAGE_STYLES={transparentCorners:!1,cornerColor:"#4287f5",cornerStyle:"circle",cornerStrokeWidth:2,cornerStrokeColor:"#2563eb",scalingLimitations:"preserveAspectRatio",bringToFrontOnSelect:!1,borderColor:"#4287f5",borderScaleFactor:10},this.CONTROL_VISIBILITY={tl:!0,tr:!0,bl:!0,br:!0,mt:!1,mb:!1,ml:!1,mr:!1,mtr:!1}}async handleBackgroundImageUrlChange(){this.canvas&&(this.removeBackgroundImage(),await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.canvas.renderAll())}async handleHandwrittenImageUrlChange(){this.canvas&&(this.removeHandwrittenImage(),this.handwrittenImageUrl&&await this.loadHandwrittenImage(),this.updateProcessedImgAreaPosition(),this.resetHandwrittenImagePosition(),this.updateClipMaskOverlay(),this.canvas.renderAll())}handleHandwrittenImageDimensionsChange(){this.debounceUpdateDimensions()}firstUpdated(){this.initializeCanvas(),this.setupEventListeners(),this.loadInitialContent()}render(){return j`<canvas class="base-canvas"></canvas>`}initializeCanvas(){this.canvas=new fo(this.baseCanvas,{width:500,height:500,containerClass:"fabric-container",preserveObjectStacking:!0})}setupEventListeners(){document.addEventListener("pbo-image-processing",this.handleImageProcessing.bind(this))}async loadInitialContent(){this.backgroundImageUrl?(await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.createUploadingText()):this.updateProcessedImgAreaPosition(),this.canvas.renderAll()}removeBackgroundImage(){this.backgroundFabImg&&(this.canvas.remove(this.backgroundFabImg),this.backgroundFabImg=void 0)}async loadBackgroundImage(){const r=this.backgroundImageUrl||this.DEFAULT_BACKGROUND_URL;await this.appendBackgroundImageToCanvas(r)}async appendBackgroundImageToCanvas(r,t){const e=await te.fromURL(r);e.selectable=!1,this.backgroundFabImg=e,this.canvas.setDimensions({width:e.width,height:e.height}),this.canvas.add(e),this.canvas.sendObjectToBack(e),this.canvas.renderAll(),t&&t()}removeHandwrittenImage(){this.handwrittenImage&&(this.canvas.remove(this.handwrittenImage),this.handwrittenImage=void 0)}async loadHandwrittenImage(){this.handwrittenImage=await te.fromURL(this.handwrittenImageUrl),this.configureHandwrittenImage(),this.setupHandwrittenImageEvents(),this.canvas.add(this.handwrittenImage)}configureHandwrittenImage(){if(!this.handwrittenImage)return;const r=this.calculateImageScale(),t=this.createClipRect(),e=this.handwrittenImage.width*r,i=this.handwrittenImage.height*r,s=this.areaPosition.left+(this.areaSize.width-e)/2,n=this.areaPosition.top+(this.areaSize.height-i)/2;this.handwrittenImage.set({...this.HANDWRITTEN_IMAGE_STYLES,selectable:!0,lockRotation:!0,lockScalingFlip:!0,noScaleCache:!1,cornerSize:this.calculateCornerSize(),touchCornerSize:this.calculateTouchCornerSize(),left:s,top:n,scaleX:r,scaleY:r,clipPath:t}),this.handwrittenImage.setControlsVisibility(this.CONTROL_VISIBILITY),this.updateHandwrittenImageDimensions(r)}calculateImageScale(){if(!this.handwrittenImage)return 1;const r=this.areaSize.width/this.handwrittenImage.width,t=this.areaSize.height/this.handwrittenImage.height;return Math.min(r,t)}calculateCornerSize(){return this.areaSize.width*(ui()?.06:.03)}calculateTouchCornerSize(){return this.areaSize.width*(ui()?.2:.06)}createClipRect(){return new ee({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0})}updateHandwrittenImageDimensions(r){if(!this.handwrittenImage)return;const t=this.handwrittenImage.width*r,e=this.handwrittenImage.height*r;this.setHandwrittenImageDimensions({left:this.areaPosition.left+(this.areaSize.width-t)/2,top:this.areaPosition.top+(this.areaSize.height-e)/2,width:t,height:e})}setupHandwrittenImageEvents(){this.handwrittenImage&&(this.handwrittenImage.on("scaling",this.handleImageScaling.bind(this)),this.handwrittenImage.on("moving",this.handleImageMoving.bind(this)),this.handwrittenImage.on("selected",this.handleImageSelected.bind(this)),this.handwrittenImage.on("deselected",this.handleImageDeselected.bind(this)))}handleImageScaling(r){const{top:t,left:e,height:i,width:s,scaleX:n,scaleY:o}=r.transform.target;this.setHandwrittenImageDimensions({top:t,left:e,height:i*o,width:s*n})}handleImageMoving(r){const{top:t,left:e}=r.transform.target;this.setHandwrittenImageDimensions({top:t,left:e})}handleImageSelected(){this.showSelectionUI()}handleImageDeselected(){this.hideSelectionUI()}showSelectionUI(){var r,t;(r=this.rect)==null||r.set("visible",!0),(t=this.handwrittenImage)==null||t.set("clipPath",null),this.clipMaskOverlay?this.clipMaskOverlay.set("visible",!0):(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay)),this.canvas.bringObjectToFront(this.clipMaskOverlay),this.canvas.renderAll()}hideSelectionUI(){var r,t,e;(r=this.rect)==null||r.set("visible",!1),(t=this.handwrittenImage)==null||t.set({clipPath:this.createClipRect()}),(e=this.clipMaskOverlay)==null||e.set("visible",!1)}createClipMaskOverlay(){const r=this.canvas.getWidth(),t=this.canvas.getHeight(),{left:e,top:i}=this.areaPosition,{width:s,height:n}=this.areaSize,o="rgba(0,0,0,0.1)",a=[this.createMaskRect(0,0,r,i,o),this.createMaskRect(0,i+n,r,t-(i+n),o),this.createMaskRect(0,i,e,n,o),this.createMaskRect(e+s,i,r-(e+s),n,o)];return new fi(a,{selectable:!1,evented:!1})}createMaskRect(r,t,e,i,s){return new ee({left:r,top:t,width:e,height:i,fill:s,selectable:!1,evented:!1})}updateClipMaskOverlay(){this.clipMaskOverlay&&(this.canvas.remove(this.clipMaskOverlay),this.clipMaskOverlay=void 0),this.handwrittenImage&&this.canvas.getActiveObject()===this.handwrittenImage&&(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay),this.canvas.bringObjectToFront(this.clipMaskOverlay))}resetHandwrittenImagePosition(){if(!this.handwrittenImage)return;const r=this.areaSize.width/this.handwrittenImage.width,t=this.areaSize.height/this.handwrittenImage.height,e=Math.min(r,t),i=this.handwrittenImage.width*e,s=this.handwrittenImage.height*e,n=this.areaPosition.left+(this.areaSize.width-i)/2,o=this.areaPosition.top+(this.areaSize.height-s)/2;this.handwrittenImage.set({left:n,top:o,scaleX:e,scaleY:e});const a=new ee({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0});this.handwrittenImage.set({clipPath:a}),this.setHandwrittenImageDimensions({top:o,left:n,height:this.handwrittenImage.height*e,width:this.handwrittenImage.width*e}),this.emitDimensionsChangedEvent()}updateProcessedImgAreaPosition(){const r=this.getAreaPercentages();this.areaPosition={left:r.left*this.canvas.getWidth(),top:r.top*this.canvas.getHeight()},this.areaSize={width:r.width*this.canvas.getWidth(),height:r.height*this.canvas.getHeight()},this.updateAreaRect()}getAreaPercentages(){return this.displayType==="default"?this.AREA_PERCENTAGES.default:this.AREA_PERCENTAGES.fullSize}updateAreaRect(){this.rect?this.rect.set({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height}):this.createAreaRect()}createAreaRect(){this.rect=new ee({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height,selectable:!1,fill:"rgba(255, 255, 255, 0.5)",visible:!1,evented:!1}),this.canvas.add(this.rect)}debounceUpdateDimensions(){this._dimensionsUpdateTimeout&&clearTimeout(this._dimensionsUpdateTimeout),this._dimensionsUpdateTimeout=setTimeout(()=>{var r;this.applyHandwrittenImageDimensions(),(r=this.canvas)==null||r.renderAll(),this.emitDimensionsChangedEvent()},300)}applyHandwrittenImageDimensions(){this.isValidForDimensionUpdate()&&(this.handwrittenImage.set({left:this.imageLeft,top:this.imageTop}),this.handwrittenImage.scaleToHeight(this.imageHeight),this.handwrittenImage.scaleToWidth(this.imageWidth))}isValidForDimensionUpdate(){return ys(this.handwrittenImage)&&ys(this.imageLeft)&&ys(this.imageTop)&&ys(this.imageWidth)&&ys(this.imageHeight)}setHandwrittenImageDimensions(r){const{top:t,left:e,height:i,width:s}=r;if(!this.hasValidDimensions(r)){console.warn("Invalid dimensions provided for handwritten image");return}this.updateDimensionIfChanged("imageLeft",e),this.updateDimensionIfChanged("imageTop",t),this.updateDimensionIfChanged("imageHeight",i),this.updateDimensionIfChanged("imageWidth",s)}hasValidDimensions(r){const{top:t,left:e,height:i,width:s}=r;return!!(t||e||i||s)}updateDimensionIfChanged(r,t){t&&this[r]!==t&&(this[r]=t)}emitDimensionsChangedEvent(){var r,t;this.emit("handwritten-image-dimensions-changed",{detail:{left:this.imageLeft??0,top:this.imageTop??0,width:this.imageWidth??0,height:this.imageHeight??0,cardHeight:((r=this.backgroundFabImg)==null?void 0:r.height)??0,cardWidth:((t=this.backgroundFabImg)==null?void 0:t.width)??0}})}createUploadingText(){this.uploadingText=new pi("Uploading",{left:this.areaPosition.left,top:this.areaPosition.top+this.areaSize.height/2-this.areaSize.height/13/1.1,width:this.areaSize.width,textAlign:"center",fontSize:this.areaSize.height/13/1.1,fontFamily:"Arial",selectable:!1,evented:!1})}handleImageProcessing(r){const t=r.detail.isLoading;this.uploadingText&&(t?this.canvas.add(this.uploadingText):this.canvas.remove(this.uploadingText),this.canvas.renderAll())}};dt.styles=[Ot,Bp];Pt([C({attribute:"background-url"})],dt.prototype,"backgroundImageUrl",2);Pt([C({attribute:"handwritten-url"})],dt.prototype,"handwrittenImageUrl",2);Pt([C({type:Number,reflect:!0,attribute:"height"})],dt.prototype,"imageHeight",2);Pt([C({type:Number,reflect:!0,attribute:"width"})],dt.prototype,"imageWidth",2);Pt([C({type:Number,reflect:!0,attribute:"left"})],dt.prototype,"imageLeft",2);Pt([C({type:Number,reflect:!0,attribute:"top"})],dt.prototype,"imageTop",2);Pt([C({attribute:"display-type"})],dt.prototype,"displayType",2);Pt([z(".base-canvas")],dt.prototype,"baseCanvas",2);Pt([I()],dt.prototype,"canvas",2);Pt([I()],dt.prototype,"backgroundFabImg",2);Pt([I()],dt.prototype,"rect",2);Pt([I()],dt.prototype,"areaPosition",2);Pt([I()],dt.prototype,"uploadingText",2);Pt([I()],dt.prototype,"handwrittenImage",2);Pt([I()],dt.prototype,"clipMaskOverlay",2);Pt([I()],dt.prototype,"areaSize",2);Pt([Z("backgroundImageUrl")],dt.prototype,"handleBackgroundImageUrlChange",1);Pt([Z(["handwrittenImageUrl","displayType"])],dt.prototype,"handleHandwrittenImageUrlChange",1);Pt([Z(["imageLeft","imageTop","imageWidth","imageHeight"])],dt.prototype,"handleHandwrittenImageDimensionsChange",1);dt=Pt([Et("pbo-handwritten-canvas")],dt);const Dm=ft`
   :host {
     display: block;
     width: 100%;

package/dist/ui-kit.js

@@ -2444,7 +2444,7 @@ void main() {
     color.b += max != color.b ? (max - color.b) * amt : 0.00;
     gl_FragColor = color;
   }
-`}applyTo2d(t){let{imageData:{data:e}}=t;const i=-this.vibrance;for(let s=0;s<e.length;s+=4){const r=e[s],o=e[s+1],a=e[s+2],l=Math.max(r,o,a),c=(r+o+a)/3,h=2*Math.abs(l-c)/255*i;e[s]+=l!==r?(l-r)*h:0,e[s+1]+=l!==o?(l-o)*h:0,e[s+2]+=l!==a?(l-a)*h:0}}sendUniformData(t,e){t.uniform1f(e.uVibrance,-this.vibrance)}isNeutralState(){return this.vibrance===0}}v(Mr,"type","Vibrance"),v(Mr,"defaults",{vibrance:0}),v(Mr,"uniformLocations",["uVibrance"]),D.setClass(Mr);var Qf=Object.defineProperty,tm=Object.getOwnPropertyDescriptor,Dt=(n,t,e,i)=>{for(var s=i>1?void 0:i?tm(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&&Qf(t,e,s),s};let ct=class extends vt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.handwrittenImageUrl=void 0,this.imageHeight=null,this.imageWidth=null,this.imageLeft=null,this.imageTop=null,this.displayType="default",this.backgroundFabImg=void 0,this.rect=void 0,this.areaPosition={left:0,top:0},this.uploadingText=void 0,this.handwrittenImage=void 0,this.clipMaskOverlay=void 0,this.areaSize={width:0,height:0},this._dimensionsUpdateTimeout=void 0,this.DEFAULT_BACKGROUND_URL="https://cdn.shopify.com/s/files/1/1956/2323/files/insert_86e8bcd5-3e82-4910-b350-485fa6958502.png?v=1726598821",this.AREA_PERCENTAGES={default:{left:.084,top:.4899,width:.832,height:.45},fullSize:{left:.084,top:.06,width:.832,height:.879}},this.HANDWRITTEN_IMAGE_STYLES={transparentCorners:!1,cornerColor:"#4287f5",cornerStyle:"circle",cornerStrokeWidth:2,cornerStrokeColor:"#2563eb",scalingLimitations:"preserveAspectRatio",bringToFrontOnSelect:!1,borderColor:"#4287f5",borderScaleFactor:10},this.CONTROL_VISIBILITY={tl:!0,tr:!0,bl:!0,br:!0,mt:!1,mb:!1,ml:!1,mr:!1,mtr:!1}}async handleBackgroundImageUrlChange(){this.canvas&&(this.removeBackgroundImage(),await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.canvas.renderAll())}async handleHandwrittenImageUrlChange(){this.canvas&&(this.removeHandwrittenImage(),this.handwrittenImageUrl&&await this.loadHandwrittenImage(),this.updateProcessedImgAreaPosition(),this.resetHandwrittenImagePosition(),this.updateClipMaskOverlay(),this.canvas.renderAll())}handleHandwrittenImageDimensionsChange(){this.debounceUpdateDimensions()}firstUpdated(){this.initializeCanvas(),this.setupEventListeners(),this.loadInitialContent()}render(){return F`<canvas class="base-canvas"></canvas>`}initializeCanvas(){this.canvas=new vo(this.baseCanvas,{width:500,height:500,containerClass:"fabric-container",preserveObjectStacking:!0})}setupEventListeners(){document.addEventListener("pbo-image-processing",this.handleImageProcessing.bind(this))}async loadInitialContent(){this.backgroundImageUrl?(await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.createUploadingText()):this.updateProcessedImgAreaPosition(),this.canvas.renderAll()}removeBackgroundImage(){this.backgroundFabImg&&(this.canvas.remove(this.backgroundFabImg),this.backgroundFabImg=void 0)}async loadBackgroundImage(){const t=this.backgroundImageUrl||this.DEFAULT_BACKGROUND_URL;await this.appendBackgroundImageToCanvas(t)}async appendBackgroundImageToCanvas(t,e){const i=await se.fromURL(t);i.selectable=!1,this.backgroundFabImg=i,this.canvas.setDimensions({width:i.width,height:i.height}),this.canvas.add(i),this.canvas.sendObjectToBack(i),this.canvas.renderAll(),e&&e()}removeHandwrittenImage(){this.handwrittenImage&&(this.canvas.remove(this.handwrittenImage),this.handwrittenImage=void 0)}async loadHandwrittenImage(){this.handwrittenImage=await se.fromURL(this.handwrittenImageUrl),this.configureHandwrittenImage(),this.setupHandwrittenImageEvents(),this.canvas.add(this.handwrittenImage)}configureHandwrittenImage(){if(!this.handwrittenImage)return;const t=this.calculateImageScale(),e=this.createClipRect();this.handwrittenImage.set({...this.HANDWRITTEN_IMAGE_STYLES,selectable:!0,lockRotation:!0,lockScalingFlip:!0,noScaleCache:!1,cornerSize:this.calculateCornerSize(),touchCornerSize:this.calculateTouchCornerSize(),left:this.areaPosition.left,top:this.areaPosition.top,scaleX:t,scaleY:t,clipPath:e}),this.handwrittenImage.setControlsVisibility(this.CONTROL_VISIBILITY),this.updateHandwrittenImageDimensions(t)}calculateImageScale(){if(!this.handwrittenImage)return 1;const t=this.areaSize.width/this.handwrittenImage.width,e=this.areaSize.height/this.handwrittenImage.height;return Math.min(t,e)}calculateCornerSize(){return this.areaSize.width*(bi()?.06:.03)}calculateTouchCornerSize(){return this.areaSize.width*(bi()?.2:.06)}createClipRect(){return new re({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0})}updateHandwrittenImageDimensions(t){this.handwrittenImage&&this.setHandwrittenImageDimensions({top:this.areaPosition.top,left:this.areaPosition.left,height:this.handwrittenImage.height*t,width:this.handwrittenImage.width*t})}setupHandwrittenImageEvents(){this.handwrittenImage&&(this.handwrittenImage.on("scaling",this.handleImageScaling.bind(this)),this.handwrittenImage.on("moving",this.handleImageMoving.bind(this)),this.handwrittenImage.on("selected",this.handleImageSelected.bind(this)),this.handwrittenImage.on("deselected",this.handleImageDeselected.bind(this)))}handleImageScaling(t){const{top:e,left:i,height:s,width:r,scaleX:o,scaleY:a}=t.transform.target;this.setHandwrittenImageDimensions({top:e,left:i,height:s*a,width:r*o})}handleImageMoving(t){const{top:e,left:i}=t.transform.target;this.setHandwrittenImageDimensions({top:e,left:i})}handleImageSelected(){this.showSelectionUI()}handleImageDeselected(){this.hideSelectionUI()}showSelectionUI(){var t,e;(t=this.rect)==null||t.set("visible",!0),(e=this.handwrittenImage)==null||e.set("clipPath",null),this.clipMaskOverlay?this.clipMaskOverlay.set("visible",!0):(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay)),this.canvas.bringObjectToFront(this.clipMaskOverlay),this.canvas.renderAll()}hideSelectionUI(){var t,e,i;(t=this.rect)==null||t.set("visible",!1),(e=this.handwrittenImage)==null||e.set({clipPath:this.createClipRect()}),(i=this.clipMaskOverlay)==null||i.set("visible",!1)}createClipMaskOverlay(){const t=this.canvas.getWidth(),e=this.canvas.getHeight(),{left:i,top:s}=this.areaPosition,{width:r,height:o}=this.areaSize,a="rgba(0,0,0,0.1)",l=[this.createMaskRect(0,0,t,s,a),this.createMaskRect(0,s+o,t,e-(s+o),a),this.createMaskRect(0,s,i,o,a),this.createMaskRect(i+r,s,t-(i+r),o,a)];return new _i(l,{selectable:!1,evented:!1})}createMaskRect(t,e,i,s,r){return new re({left:t,top:e,width:i,height:s,fill:r,selectable:!1,evented:!1})}updateClipMaskOverlay(){this.clipMaskOverlay&&(this.canvas.remove(this.clipMaskOverlay),this.clipMaskOverlay=void 0),this.handwrittenImage&&this.canvas.getActiveObject()===this.handwrittenImage&&(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay),this.canvas.bringObjectToFront(this.clipMaskOverlay))}resetHandwrittenImagePosition(){if(!this.handwrittenImage)return;const t=this.areaSize.width/this.handwrittenImage.width,e=this.areaSize.height/this.handwrittenImage.height,i=Math.min(t,e);this.handwrittenImage.set({left:this.areaPosition.left,top:this.areaPosition.top,scaleX:i,scaleY:i});const s=new re({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0});this.handwrittenImage.set({clipPath:s}),this.setHandwrittenImageDimensions({top:this.areaPosition.top,left:this.areaPosition.left,height:this.handwrittenImage.height*i,width:this.handwrittenImage.width*i}),this.emitDimensionsChangedEvent()}updateProcessedImgAreaPosition(){const t=this.getAreaPercentages();this.areaPosition={left:t.left*this.canvas.getWidth(),top:t.top*this.canvas.getHeight()},this.areaSize={width:t.width*this.canvas.getWidth(),height:t.height*this.canvas.getHeight()},this.updateAreaRect()}getAreaPercentages(){return this.displayType==="default"?this.AREA_PERCENTAGES.default:this.AREA_PERCENTAGES.fullSize}updateAreaRect(){this.rect?this.rect.set({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height}):this.createAreaRect()}createAreaRect(){this.rect=new re({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height,selectable:!1,fill:"rgba(255, 255, 255, 0.5)",visible:!1,evented:!1}),this.canvas.add(this.rect)}debounceUpdateDimensions(){this._dimensionsUpdateTimeout&&clearTimeout(this._dimensionsUpdateTimeout),this._dimensionsUpdateTimeout=setTimeout(()=>{var t;this.applyHandwrittenImageDimensions(),(t=this.canvas)==null||t.renderAll(),this.emitDimensionsChangedEvent()},300)}applyHandwrittenImageDimensions(){this.isValidForDimensionUpdate()&&(this.handwrittenImage.set({left:this.imageLeft,top:this.imageTop}),this.handwrittenImage.scaleToHeight(this.imageHeight),this.handwrittenImage.scaleToWidth(this.imageWidth))}isValidForDimensionUpdate(){return Es(this.handwrittenImage)&&Es(this.imageLeft)&&Es(this.imageTop)&&Es(this.imageWidth)&&Es(this.imageHeight)}setHandwrittenImageDimensions(t){const{top:e,left:i,height:s,width:r}=t;if(!this.hasValidDimensions(t)){console.warn("Invalid dimensions provided for handwritten image");return}this.updateDimensionIfChanged("imageLeft",i),this.updateDimensionIfChanged("imageTop",e),this.updateDimensionIfChanged("imageHeight",s),this.updateDimensionIfChanged("imageWidth",r)}hasValidDimensions(t){const{top:e,left:i,height:s,width:r}=t;return!!(e||i||s||r)}updateDimensionIfChanged(t,e){e&&this[t]!==e&&(this[t]=e)}emitDimensionsChangedEvent(){var t,e;this.emit("handwritten-image-dimensions-changed",{detail:{left:this.imageLeft??0,top:this.imageTop??0,width:this.imageWidth??0,height:this.imageHeight??0,cardHeight:((t=this.backgroundFabImg)==null?void 0:t.height)??0,cardWidth:((e=this.backgroundFabImg)==null?void 0:e.width)??0}})}createUploadingText(){this.uploadingText=new vi("Uploading",{left:this.areaPosition.left,top:this.areaPosition.top+this.areaSize.height/2-this.areaSize.height/13/1.1,width:this.areaSize.width,textAlign:"center",fontSize:this.areaSize.height/13/1.1,fontFamily:"Arial",selectable:!1,evented:!1})}handleImageProcessing(t){const e=t.detail.isLoading;this.uploadingText&&(e?this.canvas.add(this.uploadingText):this.canvas.remove(this.uploadingText),this.canvas.renderAll())}};ct.styles=[bt,cp];Dt([C({attribute:"background-url"})],ct.prototype,"backgroundImageUrl",2);Dt([C({attribute:"handwritten-url"})],ct.prototype,"handwrittenImageUrl",2);Dt([C({type:Number,reflect:!0,attribute:"height"})],ct.prototype,"imageHeight",2);Dt([C({type:Number,reflect:!0,attribute:"width"})],ct.prototype,"imageWidth",2);Dt([C({type:Number,reflect:!0,attribute:"left"})],ct.prototype,"imageLeft",2);Dt([C({type:Number,reflect:!0,attribute:"top"})],ct.prototype,"imageTop",2);Dt([C({attribute:"display-type"})],ct.prototype,"displayType",2);Dt([B(".base-canvas")],ct.prototype,"baseCanvas",2);Dt([I()],ct.prototype,"canvas",2);Dt([I()],ct.prototype,"backgroundFabImg",2);Dt([I()],ct.prototype,"rect",2);Dt([I()],ct.prototype,"areaPosition",2);Dt([I()],ct.prototype,"uploadingText",2);Dt([I()],ct.prototype,"handwrittenImage",2);Dt([I()],ct.prototype,"clipMaskOverlay",2);Dt([I()],ct.prototype,"areaSize",2);Dt([G("backgroundImageUrl")],ct.prototype,"handleBackgroundImageUrlChange",1);Dt([G(["handwrittenImageUrl","displayType"])],ct.prototype,"handleHandwrittenImageUrlChange",1);Dt([G(["imageLeft","imageTop","imageWidth","imageHeight"])],ct.prototype,"handleHandwrittenImageDimensionsChange",1);ct=Dt([mt("pbo-handwritten-canvas")],ct);const em=st`
+`}applyTo2d(t){let{imageData:{data:e}}=t;const i=-this.vibrance;for(let s=0;s<e.length;s+=4){const r=e[s],o=e[s+1],a=e[s+2],l=Math.max(r,o,a),c=(r+o+a)/3,h=2*Math.abs(l-c)/255*i;e[s]+=l!==r?(l-r)*h:0,e[s+1]+=l!==o?(l-o)*h:0,e[s+2]+=l!==a?(l-a)*h:0}}sendUniformData(t,e){t.uniform1f(e.uVibrance,-this.vibrance)}isNeutralState(){return this.vibrance===0}}v(Mr,"type","Vibrance"),v(Mr,"defaults",{vibrance:0}),v(Mr,"uniformLocations",["uVibrance"]),D.setClass(Mr);var Qf=Object.defineProperty,tm=Object.getOwnPropertyDescriptor,Dt=(n,t,e,i)=>{for(var s=i>1?void 0:i?tm(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&&Qf(t,e,s),s};let ct=class extends vt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.handwrittenImageUrl=void 0,this.imageHeight=null,this.imageWidth=null,this.imageLeft=null,this.imageTop=null,this.displayType="default",this.backgroundFabImg=void 0,this.rect=void 0,this.areaPosition={left:0,top:0},this.uploadingText=void 0,this.handwrittenImage=void 0,this.clipMaskOverlay=void 0,this.areaSize={width:0,height:0},this._dimensionsUpdateTimeout=void 0,this.DEFAULT_BACKGROUND_URL="https://cdn.shopify.com/s/files/1/1956/2323/files/insert_86e8bcd5-3e82-4910-b350-485fa6958502.png?v=1726598821",this.AREA_PERCENTAGES={default:{left:.084,top:.4899,width:.832,height:.45},fullSize:{left:.084,top:.06,width:.832,height:.879}},this.HANDWRITTEN_IMAGE_STYLES={transparentCorners:!1,cornerColor:"#4287f5",cornerStyle:"circle",cornerStrokeWidth:2,cornerStrokeColor:"#2563eb",scalingLimitations:"preserveAspectRatio",bringToFrontOnSelect:!1,borderColor:"#4287f5",borderScaleFactor:10},this.CONTROL_VISIBILITY={tl:!0,tr:!0,bl:!0,br:!0,mt:!1,mb:!1,ml:!1,mr:!1,mtr:!1}}async handleBackgroundImageUrlChange(){this.canvas&&(this.removeBackgroundImage(),await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.canvas.renderAll())}async handleHandwrittenImageUrlChange(){this.canvas&&(this.removeHandwrittenImage(),this.handwrittenImageUrl&&await this.loadHandwrittenImage(),this.updateProcessedImgAreaPosition(),this.resetHandwrittenImagePosition(),this.updateClipMaskOverlay(),this.canvas.renderAll())}handleHandwrittenImageDimensionsChange(){this.debounceUpdateDimensions()}firstUpdated(){this.initializeCanvas(),this.setupEventListeners(),this.loadInitialContent()}render(){return F`<canvas class="base-canvas"></canvas>`}initializeCanvas(){this.canvas=new vo(this.baseCanvas,{width:500,height:500,containerClass:"fabric-container",preserveObjectStacking:!0})}setupEventListeners(){document.addEventListener("pbo-image-processing",this.handleImageProcessing.bind(this))}async loadInitialContent(){this.backgroundImageUrl?(await this.loadBackgroundImage(),this.updateProcessedImgAreaPosition(),this.createUploadingText()):this.updateProcessedImgAreaPosition(),this.canvas.renderAll()}removeBackgroundImage(){this.backgroundFabImg&&(this.canvas.remove(this.backgroundFabImg),this.backgroundFabImg=void 0)}async loadBackgroundImage(){const t=this.backgroundImageUrl||this.DEFAULT_BACKGROUND_URL;await this.appendBackgroundImageToCanvas(t)}async appendBackgroundImageToCanvas(t,e){const i=await se.fromURL(t);i.selectable=!1,this.backgroundFabImg=i,this.canvas.setDimensions({width:i.width,height:i.height}),this.canvas.add(i),this.canvas.sendObjectToBack(i),this.canvas.renderAll(),e&&e()}removeHandwrittenImage(){this.handwrittenImage&&(this.canvas.remove(this.handwrittenImage),this.handwrittenImage=void 0)}async loadHandwrittenImage(){this.handwrittenImage=await se.fromURL(this.handwrittenImageUrl),this.configureHandwrittenImage(),this.setupHandwrittenImageEvents(),this.canvas.add(this.handwrittenImage)}configureHandwrittenImage(){if(!this.handwrittenImage)return;const t=this.calculateImageScale(),e=this.createClipRect(),i=this.handwrittenImage.width*t,s=this.handwrittenImage.height*t,r=this.areaPosition.left+(this.areaSize.width-i)/2,o=this.areaPosition.top+(this.areaSize.height-s)/2;this.handwrittenImage.set({...this.HANDWRITTEN_IMAGE_STYLES,selectable:!0,lockRotation:!0,lockScalingFlip:!0,noScaleCache:!1,cornerSize:this.calculateCornerSize(),touchCornerSize:this.calculateTouchCornerSize(),left:r,top:o,scaleX:t,scaleY:t,clipPath:e}),this.handwrittenImage.setControlsVisibility(this.CONTROL_VISIBILITY),this.updateHandwrittenImageDimensions(t)}calculateImageScale(){if(!this.handwrittenImage)return 1;const t=this.areaSize.width/this.handwrittenImage.width,e=this.areaSize.height/this.handwrittenImage.height;return Math.min(t,e)}calculateCornerSize(){return this.areaSize.width*(bi()?.06:.03)}calculateTouchCornerSize(){return this.areaSize.width*(bi()?.2:.06)}createClipRect(){return new re({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0})}updateHandwrittenImageDimensions(t){if(!this.handwrittenImage)return;const e=this.handwrittenImage.width*t,i=this.handwrittenImage.height*t;this.setHandwrittenImageDimensions({left:this.areaPosition.left+(this.areaSize.width-e)/2,top:this.areaPosition.top+(this.areaSize.height-i)/2,width:e,height:i})}setupHandwrittenImageEvents(){this.handwrittenImage&&(this.handwrittenImage.on("scaling",this.handleImageScaling.bind(this)),this.handwrittenImage.on("moving",this.handleImageMoving.bind(this)),this.handwrittenImage.on("selected",this.handleImageSelected.bind(this)),this.handwrittenImage.on("deselected",this.handleImageDeselected.bind(this)))}handleImageScaling(t){const{top:e,left:i,height:s,width:r,scaleX:o,scaleY:a}=t.transform.target;this.setHandwrittenImageDimensions({top:e,left:i,height:s*a,width:r*o})}handleImageMoving(t){const{top:e,left:i}=t.transform.target;this.setHandwrittenImageDimensions({top:e,left:i})}handleImageSelected(){this.showSelectionUI()}handleImageDeselected(){this.hideSelectionUI()}showSelectionUI(){var t,e;(t=this.rect)==null||t.set("visible",!0),(e=this.handwrittenImage)==null||e.set("clipPath",null),this.clipMaskOverlay?this.clipMaskOverlay.set("visible",!0):(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay)),this.canvas.bringObjectToFront(this.clipMaskOverlay),this.canvas.renderAll()}hideSelectionUI(){var t,e,i;(t=this.rect)==null||t.set("visible",!1),(e=this.handwrittenImage)==null||e.set({clipPath:this.createClipRect()}),(i=this.clipMaskOverlay)==null||i.set("visible",!1)}createClipMaskOverlay(){const t=this.canvas.getWidth(),e=this.canvas.getHeight(),{left:i,top:s}=this.areaPosition,{width:r,height:o}=this.areaSize,a="rgba(0,0,0,0.1)",l=[this.createMaskRect(0,0,t,s,a),this.createMaskRect(0,s+o,t,e-(s+o),a),this.createMaskRect(0,s,i,o,a),this.createMaskRect(i+r,s,t-(i+r),o,a)];return new _i(l,{selectable:!1,evented:!1})}createMaskRect(t,e,i,s,r){return new re({left:t,top:e,width:i,height:s,fill:r,selectable:!1,evented:!1})}updateClipMaskOverlay(){this.clipMaskOverlay&&(this.canvas.remove(this.clipMaskOverlay),this.clipMaskOverlay=void 0),this.handwrittenImage&&this.canvas.getActiveObject()===this.handwrittenImage&&(this.clipMaskOverlay=this.createClipMaskOverlay(),this.canvas.add(this.clipMaskOverlay),this.canvas.bringObjectToFront(this.clipMaskOverlay))}resetHandwrittenImagePosition(){if(!this.handwrittenImage)return;const t=this.areaSize.width/this.handwrittenImage.width,e=this.areaSize.height/this.handwrittenImage.height,i=Math.min(t,e),s=this.handwrittenImage.width*i,r=this.handwrittenImage.height*i,o=this.areaPosition.left+(this.areaSize.width-s)/2,a=this.areaPosition.top+(this.areaSize.height-r)/2;this.handwrittenImage.set({left:o,top:a,scaleX:i,scaleY:i});const l=new re({width:this.areaSize.width,height:this.areaSize.height,left:this.areaPosition.left,top:this.areaPosition.top,absolutePositioned:!0});this.handwrittenImage.set({clipPath:l}),this.setHandwrittenImageDimensions({top:a,left:o,height:this.handwrittenImage.height*i,width:this.handwrittenImage.width*i}),this.emitDimensionsChangedEvent()}updateProcessedImgAreaPosition(){const t=this.getAreaPercentages();this.areaPosition={left:t.left*this.canvas.getWidth(),top:t.top*this.canvas.getHeight()},this.areaSize={width:t.width*this.canvas.getWidth(),height:t.height*this.canvas.getHeight()},this.updateAreaRect()}getAreaPercentages(){return this.displayType==="default"?this.AREA_PERCENTAGES.default:this.AREA_PERCENTAGES.fullSize}updateAreaRect(){this.rect?this.rect.set({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height}):this.createAreaRect()}createAreaRect(){this.rect=new re({left:this.areaPosition.left,top:this.areaPosition.top,width:this.areaSize.width,height:this.areaSize.height,selectable:!1,fill:"rgba(255, 255, 255, 0.5)",visible:!1,evented:!1}),this.canvas.add(this.rect)}debounceUpdateDimensions(){this._dimensionsUpdateTimeout&&clearTimeout(this._dimensionsUpdateTimeout),this._dimensionsUpdateTimeout=setTimeout(()=>{var t;this.applyHandwrittenImageDimensions(),(t=this.canvas)==null||t.renderAll(),this.emitDimensionsChangedEvent()},300)}applyHandwrittenImageDimensions(){this.isValidForDimensionUpdate()&&(this.handwrittenImage.set({left:this.imageLeft,top:this.imageTop}),this.handwrittenImage.scaleToHeight(this.imageHeight),this.handwrittenImage.scaleToWidth(this.imageWidth))}isValidForDimensionUpdate(){return Es(this.handwrittenImage)&&Es(this.imageLeft)&&Es(this.imageTop)&&Es(this.imageWidth)&&Es(this.imageHeight)}setHandwrittenImageDimensions(t){const{top:e,left:i,height:s,width:r}=t;if(!this.hasValidDimensions(t)){console.warn("Invalid dimensions provided for handwritten image");return}this.updateDimensionIfChanged("imageLeft",i),this.updateDimensionIfChanged("imageTop",e),this.updateDimensionIfChanged("imageHeight",s),this.updateDimensionIfChanged("imageWidth",r)}hasValidDimensions(t){const{top:e,left:i,height:s,width:r}=t;return!!(e||i||s||r)}updateDimensionIfChanged(t,e){e&&this[t]!==e&&(this[t]=e)}emitDimensionsChangedEvent(){var t,e;this.emit("handwritten-image-dimensions-changed",{detail:{left:this.imageLeft??0,top:this.imageTop??0,width:this.imageWidth??0,height:this.imageHeight??0,cardHeight:((t=this.backgroundFabImg)==null?void 0:t.height)??0,cardWidth:((e=this.backgroundFabImg)==null?void 0:e.width)??0}})}createUploadingText(){this.uploadingText=new vi("Uploading",{left:this.areaPosition.left,top:this.areaPosition.top+this.areaSize.height/2-this.areaSize.height/13/1.1,width:this.areaSize.width,textAlign:"center",fontSize:this.areaSize.height/13/1.1,fontFamily:"Arial",selectable:!1,evented:!1})}handleImageProcessing(t){const e=t.detail.isLoading;this.uploadingText&&(e?this.canvas.add(this.uploadingText):this.canvas.remove(this.uploadingText),this.canvas.renderAll())}};ct.styles=[bt,cp];Dt([C({attribute:"background-url"})],ct.prototype,"backgroundImageUrl",2);Dt([C({attribute:"handwritten-url"})],ct.prototype,"handwrittenImageUrl",2);Dt([C({type:Number,reflect:!0,attribute:"height"})],ct.prototype,"imageHeight",2);Dt([C({type:Number,reflect:!0,attribute:"width"})],ct.prototype,"imageWidth",2);Dt([C({type:Number,reflect:!0,attribute:"left"})],ct.prototype,"imageLeft",2);Dt([C({type:Number,reflect:!0,attribute:"top"})],ct.prototype,"imageTop",2);Dt([C({attribute:"display-type"})],ct.prototype,"displayType",2);Dt([B(".base-canvas")],ct.prototype,"baseCanvas",2);Dt([I()],ct.prototype,"canvas",2);Dt([I()],ct.prototype,"backgroundFabImg",2);Dt([I()],ct.prototype,"rect",2);Dt([I()],ct.prototype,"areaPosition",2);Dt([I()],ct.prototype,"uploadingText",2);Dt([I()],ct.prototype,"handwrittenImage",2);Dt([I()],ct.prototype,"clipMaskOverlay",2);Dt([I()],ct.prototype,"areaSize",2);Dt([G("backgroundImageUrl")],ct.prototype,"handleBackgroundImageUrlChange",1);Dt([G(["handwrittenImageUrl","displayType"])],ct.prototype,"handleHandwrittenImageUrlChange",1);Dt([G(["imageLeft","imageTop","imageWidth","imageHeight"])],ct.prototype,"handleHandwrittenImageDimensionsChange",1);ct=Dt([mt("pbo-handwritten-canvas")],ct);const em=st`
   :host {
     display: block;
     width: 100%;

package/package.json

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