handler-playable-sdk 1.0.85 → 1.0.89

package/dist/AssetCropModal-5GIDIW5V.js

@@ -0,0 +1 @@
+import{a}from"./chunk-JYGZ4R4K.js";import"./chunk-JXBG6UFL.js";export{a as AssetCropModal};

package/dist/chunk-JYGZ4R4K.js

@@ -0,0 +1,52 @@
+var r=class{constructor(){this.modal=null;this.canvas=null;this.ctx=null;this.image=null;this.options=null;this.cropX=0;this.cropY=0;this.cropWidth=100;this.cropHeight=100;this.scale=1;this.panX=0;this.panY=0;this.isDragging=!1;this.dragStartX=0;this.dragStartY=0;this.lastPanX=0;this.lastPanY=0}open(t){this.options=t,this.createModal(),this.loadImage(),document.body.appendChild(this.modal)}createModal(){let t=document.createElement("div");t.className="asset-crop-modal",t.innerHTML=`
+      <div class="asset-crop-card">
+        <div class="asset-crop-header">
+          <div>
+            <div class="asset-crop-title">Crop Image</div>
+            <div class="asset-crop-subtitle">Drag to reposition, scroll to zoom</div>
+          </div>
+          <button class="asset-crop-close" data-action="close">\xD7</button>
+        </div>
+
+        <div class="asset-crop-body">
+          <div class="asset-crop-column">
+            <div class="asset-crop-canvas-container">
+              <canvas class="asset-crop-canvas"></canvas>
+            </div>
+
+            <div class="asset-crop-controls">
+              <div class="asset-crop-zoom">
+                <label class="asset-crop-label">Zoom</label>
+                <input type="range" min="0.1" max="3" step="0.1" value="1" class="asset-crop-zoom-slider" />
+                <span class="asset-crop-zoom-value">1.0x</span>
+              </div>
+
+              <div class="asset-crop-aspect">
+                <label class="asset-crop-label">Aspect Ratio</label>
+                <select class="asset-crop-aspect-select">
+                  <option value="free">Free</option>
+                  <option value="1:1">Square (1:1)</option>
+                  <option value="4:3">Standard (4:3)</option>
+                  <option value="16:9">Widescreen (16:9)</option>
+                  <option value="3:2">Photo (3:2)</option>
+                </select>
+              </div>
+
+              <button class="asset-crop-reset" data-action="reset">Reset</button>
+            </div>
+          </div>
+
+          <div class="asset-crop-column">
+            <div class="asset-crop-preview">
+              <div class="asset-crop-preview-label">Preview</div>
+              <canvas class="asset-crop-preview-canvas"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="asset-crop-actions">
+          <button class="asset-crop-apply" data-action="cancel">Cancel</button>
+          <button class="asset-crop-apply primary" data-action="apply">Apply Crop</button>
+        </div>
+      </div>
+    `,this.modal=t,this.attachEventListeners(),this.initializeCanvas()}initializeCanvas(){this.modal&&(this.canvas=this.modal.querySelector(".asset-crop-canvas"),this.canvas&&(this.ctx=this.canvas.getContext("2d"),this.canvas.width=400,this.canvas.height=300))}loadImage(){this.options&&(this.image=new Image,this.image.crossOrigin="anonymous",this.image.onload=()=>{this.initializeCrop(),this.render()},this.image.src=this.options.imageSrc)}initializeCrop(){var s;if(!this.image||!this.canvas)return;let t=this.image.width/this.image.height,i=this.canvas.width/this.canvas.height;t>i?(this.cropHeight=this.image.height,this.cropWidth=this.cropHeight*i,this.cropX=(this.image.width-this.cropWidth)/2,this.cropY=0):(this.cropWidth=this.image.width,this.cropHeight=this.cropWidth/i,this.cropX=0,this.cropY=(this.image.height-this.cropHeight)/2),(s=this.options)!=null&&s.aspectRatio&&this.applyAspectRatio(this.options.aspectRatio),this.fitToCanvas()}applyAspectRatio(t){if(!this.image)return;let i=this.image.width/this.image.height,s=this.cropX+this.cropWidth/2,e=this.cropY+this.cropHeight/2;t>i?(this.cropWidth=Math.min(this.image.width,this.cropHeight*t),this.cropHeight=this.cropWidth/t):(this.cropHeight=Math.min(this.image.height,this.cropWidth/t),this.cropWidth=this.cropHeight*t),this.cropX=Math.max(0,Math.min(this.image.width-this.cropWidth,s-this.cropWidth/2)),this.cropY=Math.max(0,Math.min(this.image.height-this.cropHeight,e-this.cropHeight/2))}fitToCanvas(){if(!this.image||!this.canvas)return;let t=this.canvas.width/this.cropWidth,i=this.canvas.height/this.cropHeight;this.scale=Math.min(t,i)*.9,this.panX=(this.canvas.width-this.cropWidth*this.scale)/2,this.panY=(this.canvas.height-this.cropHeight*this.scale)/2}render(){!this.ctx||!this.image||!this.canvas||(this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.save(),this.ctx.translate(this.panX,this.panY),this.ctx.scale(this.scale,this.scale),this.ctx.drawImage(this.image,-this.cropX,-this.cropY,this.image.width,this.image.height),this.ctx.restore(),this.drawCropOverlay(),this.updatePreview())}drawCropOverlay(){if(!this.ctx||!this.canvas)return;let t=this.panX,i=this.panY,s=this.cropWidth*this.scale,e=this.cropHeight*this.scale;this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.ctx.clearRect(t,i,s,e),this.ctx.strokeStyle="#ffffff",this.ctx.lineWidth=2,this.ctx.strokeRect(t,i,s,e),this.ctx.fillStyle="#ffffff";let a=8;[[t,i],[t+s-a,i],[t,i+e-a],[t+s-a,i+e-a]].forEach(([h,o])=>{var n;(n=this.ctx)==null||n.fillRect(h,o,a,a)})}updatePreview(){if(!this.modal||!this.image)return;let t=this.modal.querySelector(".asset-crop-preview-canvas");if(!t)return;let i=t.getContext("2d");if(!i)return;let s=150;t.width=s,t.height=s;let e=s/this.cropWidth,a=s/this.cropHeight,c=Math.min(e,a),h=this.cropWidth*c,o=this.cropHeight*c,n=(s-h)/2,p=(s-o)/2;i.drawImage(this.image,this.cropX,this.cropY,this.cropWidth,this.cropHeight,n,p,h,o)}attachEventListeners(){if(!this.modal||!this.canvas)return;this.canvas.addEventListener("mousedown",this.handleMouseDown.bind(this)),this.canvas.addEventListener("mousemove",this.handleMouseMove.bind(this)),this.canvas.addEventListener("mouseup",this.handleMouseUp.bind(this)),this.canvas.addEventListener("wheel",this.handleWheel.bind(this)),this.canvas.addEventListener("touchstart",this.handleTouchStart.bind(this)),this.canvas.addEventListener("touchmove",this.handleTouchMove.bind(this)),this.canvas.addEventListener("touchend",this.handleTouchEnd.bind(this));let t=this.modal.querySelector(".asset-crop-zoom-slider");t==null||t.addEventListener("input",s=>{let e=parseFloat(s.target.value);this.setZoom(e)});let i=this.modal.querySelector(".asset-crop-aspect-select");i==null||i.addEventListener("change",s=>{let e=s.target.value;this.setAspectRatio(e)}),this.modal.addEventListener("click",s=>{switch(s.target.dataset.action){case"reset":this.reset();break;case"apply":this.applyCrop();break;case"cancel":case"close":this.close();break}}),this.modal.addEventListener("click",s=>{s.target===this.modal&&this.close()})}handleMouseDown(t){this.isDragging=!0,this.dragStartX=t.clientX,this.dragStartY=t.clientY,this.lastPanX=this.panX,this.lastPanY=this.panY,this.canvas.style.cursor="grabbing"}handleMouseMove(t){if(!this.isDragging)return;let i=t.clientX-this.dragStartX,s=t.clientY-this.dragStartY;this.panX=this.lastPanX+i,this.panY=this.lastPanY+s,this.constrainPan(),this.render()}handleMouseUp(){this.isDragging=!1,this.canvas.style.cursor="grab"}handleWheel(t){t.preventDefault();let i=t.deltaY>0?.9:1.1;this.setZoom(this.scale*i)}handleTouchStart(t){t.touches.length===1&&(this.isDragging=!0,this.dragStartX=t.touches[0].clientX,this.dragStartY=t.touches[0].clientY,this.lastPanX=this.panX,this.lastPanY=this.panY)}handleTouchMove(t){if(!this.isDragging||t.touches.length!==1)return;t.preventDefault();let i=t.touches[0].clientX-this.dragStartX,s=t.touches[0].clientY-this.dragStartY;this.panX=this.lastPanX+i,this.panY=this.lastPanY+s,this.constrainPan(),this.render()}handleTouchEnd(){this.isDragging=!1}setZoom(t){this.scale=Math.max(.1,Math.min(3,t)),this.updateZoomUI(),this.constrainPan(),this.render()}setAspectRatio(t){let i;switch(t){case"1:1":i=1;break;case"4:3":i=4/3;break;case"16:9":i=16/9;break;case"3:2":i=3/2;break;default:i=void 0}i&&this.applyAspectRatio(i),this.fitToCanvas(),this.render()}updateZoomUI(){if(!this.modal)return;let t=this.modal.querySelector(".asset-crop-zoom-value"),i=this.modal.querySelector(".asset-crop-zoom-slider");t&&(t.textContent=`${this.scale.toFixed(1)}x`),i&&(i.value=this.scale.toString())}constrainPan(){if(!this.canvas)return;let t=this.cropWidth*this.scale,i=this.cropHeight*this.scale;this.panX=Math.max(this.canvas.width-t,Math.min(0,this.panX)),this.panY=Math.max(this.canvas.height-i,Math.min(0,this.panY))}reset(){this.initializeCrop(),this.render()}applyCrop(){var e;if(!this.image||!((e=this.options)!=null&&e.onCrop))return;let t=document.createElement("canvas"),i=t.getContext("2d");if(!i)return;t.width=this.cropWidth,t.height=this.cropHeight,i.drawImage(this.image,this.cropX,this.cropY,this.cropWidth,this.cropHeight,0,0,this.cropWidth,this.cropHeight);let s=t.toDataURL("image/png");this.options.onCrop(s),this.close()}close(){this.modal&&this.modal.parentNode&&this.modal.parentNode.removeChild(this.modal);let t=this.options;this.modal=null,this.canvas=null,this.ctx=null,this.image=null,this.options=null,t!=null&&t.onCancel&&t.onCancel()}};window.openAssetCrop=function(l){new r().open(l)};export{r as a};