@bensitu/image-editor 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
- var ImageEditor=(()=>{var B=(b,f)=>()=>(f||b((f={exports:{}}).exports,f),f.exports);var S=B((w,y)=>{/**
1
+ var ImageEditor=(()=>{var Z=(u,l)=>()=>(l||u((l={exports:{}}).exports,l),l.exports);var ae=Z((K,N)=>{function P(){/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */var u,l,I=typeof Symbol=="function"?Symbol:{},b=I.iterator||"@@iterator",E=I.toStringTag||"@@toStringTag";function o(s,f,v,_){var m=f&&f.prototype instanceof a?f:a,S=Object.create(m.prototype);return T(S,"_invoke",function(M,L,j){var A,y,h,g=0,p=j||[],d=!1,k={p:0,n:0,v:u,a:w,f:w.bind(u,4),d:function(B,C){return A=B,y=0,h=u,k.n=C,t}};function w(O,B){for(y=O,h=B,l=0;!d&&g&&!C&&l<p.length;l++){var C,x=p[l],W=k.p,R=x[2];O>3?(C=R===B)&&(h=x[(y=x[4])?5:(y=3,3)],x[4]=x[5]=u):x[0]<=W&&((C=O<2&&W<x[1])?(y=0,k.v=B,k.n=x[1]):W<R&&(C=O<3||x[0]>B||B>R)&&(x[4]=O,x[5]=B,k.n=R,y=0))}if(C||O>1)return t;throw d=!0,B}return function(O,B,C){if(g>1)throw TypeError("Generator is already running");for(d&&B===1&&w(B,C),y=B,h=C;(l=y<2?u:h)||!d;){A||(y?y<3?(y>1&&(k.n=-1),w(y,h)):k.n=h:k.v=h);try{if(g=2,A){if(y||(O="next"),l=A[O]){if(!(l=l.call(A,h)))throw TypeError("iterator result is not an object");if(!l.done)return l;h=l.value,y<2&&(y=0)}else y===1&&(l=A.return)&&l.call(A),y<2&&(h=TypeError("The iterator does not provide a '"+O+"' method"),y=1);A=u}else if((l=(d=k.n<0)?h:M.call(L,k))!==t)break}catch(x){A=u,y=1,h=x}finally{g=1}}return{value:l,done:d}}}(s,v,_),!0),S}var t={};function a(){}function n(){}function e(){}l=Object.getPrototypeOf;var i=[][b]?l(l([][b]())):(T(l={},b,function(){return this}),l),r=e.prototype=a.prototype=Object.create(i);function c(s){return Object.setPrototypeOf?Object.setPrototypeOf(s,e):(s.__proto__=e,T(s,E,"GeneratorFunction")),s.prototype=Object.create(r),s}return n.prototype=e,T(r,"constructor",e),T(e,"constructor",n),n.displayName="GeneratorFunction",T(e,E,"GeneratorFunction"),T(r),T(r,E,"Generator"),T(r,b,function(){return this}),T(r,"toString",function(){return"[object Generator]"}),(P=function(){return{w:o,m:c}})()}function T(u,l,I,b){var E=Object.defineProperty;try{E({},"",{})}catch{E=0}T=function(t,a,n,e){function i(r,c){T(t,r,function(s){return this._invoke(r,c,s)})}a?E?E(t,a,{value:n,enumerable:!e,configurable:!e,writable:!e}):t[a]=n:(i("next",0),i("throw",1),i("return",2))},T(u,l,I,b)}function $(u,l,I,b,E,o,t){try{var a=u[o](t),n=a.value}catch(e){return void I(e)}a.done?l(n):Promise.resolve(n).then(b,E)}function D(u){return function(){var l=this,I=arguments;return new Promise(function(b,E){var o=u.apply(l,I);function t(n){$(o,b,E,t,a,"next",n)}function a(n){$(o,b,E,t,a,"throw",n)}t(void 0)})}}function J(u,l){var I=Object.keys(u);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(u);l&&(b=b.filter(function(E){return Object.getOwnPropertyDescriptor(u,E).enumerable})),I.push.apply(I,b)}return I}function H(u){for(var l=1;l<arguments.length;l++){var I=arguments[l]!=null?arguments[l]:{};l%2?J(Object(I),!0).forEach(function(b){ee(u,b,I[b])}):Object.getOwnPropertyDescriptors?Object.defineProperties(u,Object.getOwnPropertyDescriptors(I)):J(Object(I)).forEach(function(b){Object.defineProperty(u,b,Object.getOwnPropertyDescriptor(I,b))})}return u}function ee(u,l,I){return(l=Y(l))in u?Object.defineProperty(u,l,{value:I,enumerable:!0,configurable:!0,writable:!0}):u[l]=I,u}function z(u,l){if(!(u instanceof l))throw new TypeError("Cannot call a class as a function")}function X(u,l){for(var I=0;I<l.length;I++){var b=l[I];b.enumerable=b.enumerable||!1,b.configurable=!0,"value"in b&&(b.writable=!0),Object.defineProperty(u,Y(b.key),b)}}function Q(u,l,I){return l&&X(u.prototype,l),I&&X(u,I),Object.defineProperty(u,"prototype",{writable:!1}),u}function Y(u){var l=te(u,"string");return F(l)=="symbol"?l:l+""}function te(u,l){if(F(u)!="object"||!u)return u;var I=u[Symbol.toPrimitive];if(I!==void 0){var b=I.call(u,l||"default");if(F(b)!="object")return b;throw new TypeError("@@toPrimitive must return a primitive value.")}return(l==="string"?String:Number)(u)}function F(u){"@babel/helpers - typeof";return F=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(l){return typeof l}:function(l){return l&&typeof Symbol=="function"&&l.constructor===Symbol&&l!==Symbol.prototype?"symbol":typeof l},F(u)}/**
2
2
  * @file image-editor.js
3
3
  * @module image-editor
4
- * @version 1.0.1
4
+ * @version 1.1.1
5
5
  * @author Ben Situ
6
6
  * @license MIT
7
7
  * @description Lightweight canvas-based image editor with masking/transform/export support.
@@ -10,5 +10,5 @@ var ImageEditor=(()=>{var B=(b,f)=>()=>(f||b((f={exports:{}}).exports,f),f.expor
10
10
  * It is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
11
11
  * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
12
12
  * See the license files for details.
13
- */(function(b,f){typeof define=="function"&&define.amd?define([],f):typeof y=="object"&&y.exports?y.exports=f():b.ImageEditor=f()})(typeof self<"u"?self:w,function(){"use strict";class b{constructor(t={}){this._fabricLoaded=typeof fabric<"u",this._fabricLoaded||console.error("fabric.js is not loaded. Please include fabric.js first. Initialization will be aborted."),this.options={canvasWidth:800,canvasHeight:600,backgroundColor:"#ffffff",animationDuration:300,minScale:.1,maxScale:5,scaleStep:.05,rotationStep:90,expandCanvasToImage:!0,fitImageToCanvas:!1,downsampleOnLoad:!0,downsampleMaxWidth:4e3,downsampleMaxHeight:3e3,downsampleQuality:.92,exportMultiplier:1,exportImageAreaByDefault:!0,defaultMaskWidth:50,defaultMaskHeight:80,maskRotatable:!1,maskLabelOnSelect:!0,maskLabelOffset:3,maskName:"mask",groupSelection:!1,showPlaceholder:!0,initialImageBase64:null,defaultDownloadFileName:"edited_image.jpg",...t},this.options.label={getText:(i,e)=>i.maskName,textOptions:{fontSize:12,fill:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:2,fontFamily:"monospace",fontWeight:"bold",selectable:!1,evented:!1,originX:"left",originY:"top"}},this.canvas=null,this.canvasEl=null,this.containerEl=null,this.placeholderEl=null,this.originalImage=null,this.baseImageScale=1,this.currentScale=1,this.currentRotation=0,this.maskCounter=0,this.isAnimating=!1,this.elements={},this.isImageLoadedToCanvas=!1,this.maxHistorySize=50,this._boundHandlers={},this._lastMaskInitialLeft=null,this._lastMaskInitialTop=null,this._lastMaskInitialWidth=null,this.onImageLoaded=typeof t.onImageLoaded=="function"?t.onImageLoaded:null,this.animQueue=new f,this.historyManager=new L(this.maxHistorySize)}init(t={}){if(!this._fabricLoaded)return;let i={canvas:"fabricCanvas",canvasContainer:null,imgPlaceholder:"imgPlaceholder",scaleRate:"scaleRate",rotationLeftInput:"rotationLeftInput",rotationRightInput:"rotationRightInput",rotateLeftBtn:"rotateLeftBtn",rotateRightBtn:"rotateRightBtn",addMaskBtn:"addMaskBtn",removeMaskBtn:"removeMaskBtn",removeAllMasksBtn:"removeAllMasksBtn",mergeBtn:"mergeBtn",downloadBtn:"downloadBtn",maskList:"maskList",zoomInBtn:"zoomInBtn",zoomOutBtn:"zoomOutBtn",resetBtn:"resetBtn",undoBtn:"undoBtn",redoBtn:"redoBtn",imageInput:"imageInput"};this.elements={...i,...t},this._initCanvas(),this._bindEvents(),this._updateInputs(),this._updateMaskList(),this._updateUI(),this.options.initialImageBase64?this.loadImage(this.options.initialImageBase64):this._updatePlaceholderStatus()}_initCanvas(){let t=document.getElementById(this.elements.canvas);if(!t)throw new Error("Canvas is not found: "+this.elements.canvas);if(this.canvasEl=t,this.elements.canvasContainer){let s=document.getElementById(this.elements.canvasContainer);this.containerEl=s||t.parentElement}else this.containerEl=t.parentElement;this.placeholderEl=document.getElementById(this.elements.imgPlaceholder)||null;let i=this.options.canvasWidth,e=this.options.canvasHeight;if(this.containerEl){let s=Math.floor(this.containerEl.clientWidth),a=Math.floor(this.containerEl.clientHeight);s>0&&a>0&&(i=s,e=a)}this.canvas=new fabric.Canvas(t,{width:i,height:e,backgroundColor:this.options.backgroundColor,selection:this.options.groupSelection,preserveObjectStacking:!0}),this.canvas.on("selection:created",s=>this._onSelectionChanged(s.selected)),this.canvas.on("selection:updated",s=>this._onSelectionChanged(s.selected)),this.canvas.on("selection:cleared",()=>this._onSelectionChanged([])),this.canvas.on("object:moving",s=>{s.target&&s.target.maskId&&this._syncMaskLabel(s.target)}),this.canvas.on("object:scaling",s=>{s.target&&s.target.maskId&&this._syncMaskLabel(s.target)}),this.canvas.on("object:rotating",s=>{s.target&&s.target.maskId&&this._syncMaskLabel(s.target)}),this.canvas.on("object:modified",s=>{s.target&&s.target.maskId&&this._syncMaskLabel(s.target)}),this.canvasEl.style.display="block"}_bindEvents(){this._bindIfExists("uploadArea","click",()=>document.getElementById(this.elements.imageInput)?.click());let t=document.getElementById(this.elements.imageInput);t&&t.addEventListener("change",s=>{let a=s.target.files&&s.target.files[0];a&&this._loadImageFile(a)}),this._bindIfExists("zoomInBtn","click",()=>this.scaleImage(this.currentScale+this.options.scaleStep)),this._bindIfExists("zoomOutBtn","click",()=>this.scaleImage(this.currentScale-this.options.scaleStep)),this._bindIfExists("resetBtn","click",()=>{this.reset()}),this._bindIfExists("addMaskBtn","click",()=>this.addMask()),this._bindIfExists("removeMaskBtn","click",()=>this.removeSelectedMask()),this._bindIfExists("removeAllMasksBtn","click",()=>this.removeAllMasks()),this._bindIfExists("mergeBtn","click",()=>this.merge()),this._bindIfExists("downloadBtn","click",()=>this.downloadImage()),this._bindIfExists("undoBtn","click",()=>this.undo()),this._bindIfExists("redoBtn","click",()=>this.redo());let i=document.getElementById(this.elements.rotateLeftBtn),e=document.getElementById(this.elements.rotateRightBtn);i&&i.addEventListener("click",()=>{let s=document.getElementById(this.elements.rotationLeftInput),a=this.options.rotationStep;if(s){let o=parseFloat(s.value);isNaN(o)||(a=o)}this.rotateImage(this.currentRotation-a)}),e&&e.addEventListener("click",()=>{let s=document.getElementById(this.elements.rotationRightInput),a=this.options.rotationStep;if(s){let o=parseFloat(s.value);isNaN(o)||(a=o)}this.rotateImage(this.currentRotation+a)})}_bindIfExists(t,i,e){let s=document.getElementById(this.elements[t]);s&&(s.addEventListener(i,e),this._boundHandlers=this._boundHandlers||{},this._boundHandlers[t]||(this._boundHandlers[t]=[]),this._boundHandlers[t].push({event:i,handler:e}))}_loadImageFile(t){if(!t||!t.type.startsWith("image/"))return;let i=new FileReader;i.onload=e=>this.loadImage(e.target.result),i.onerror=e=>{console.error("[ImageEditor: fileReadError]",e)},i.readAsDataURL(t)}async loadImage(t){if(!this._fabricLoaded||!t||typeof t!="string"||!t.startsWith("data:image/"))return;this._setPlaceholderVisible(!1);let i=await this._createImageElement(t),e=t;if(this.options.downsampleOnLoad&&(i.naturalWidth>this.options.downsampleMaxWidth||i.naturalHeight>this.options.downsampleMaxHeight)){let a=Math.min(this.options.downsampleMaxWidth/i.naturalWidth,this.options.downsampleMaxHeight/i.naturalHeight),o=Math.round(i.naturalWidth*a),h=Math.round(i.naturalHeight*a);e=this._resampleImageToDataURL(i,o,h,this.options.downsampleQuality)}fabric.Image.fromURL(e,s=>{this.canvas.discardActiveObject(),this._hideAllMaskLabels(),this.canvas.clear(),this.canvas.setBackgroundColor(this.options.backgroundColor,this.canvas.renderAll.bind(this.canvas)),s.set({originX:"left",originY:"top",selectable:!1,evented:!1});let a=s.width,o=s.height,h=this.containerEl?Math.floor(this.containerEl.clientWidth||this.options.canvasWidth):this.options.canvasWidth,n=this.containerEl?Math.floor(this.containerEl.clientHeight||this.options.canvasHeight):this.options.canvasHeight;if(this.options.fitImageToCanvas){let c=Math.max(this.options.canvasWidth,h),d=Math.max(this.options.canvasHeight,n);this._setCanvasSizeInt(c,d);let r=Math.min(c/a,d/o,1);s.set({left:(c-a*r)/2,top:(d-o*r)/2}),s.scale(r),this.baseImageScale=s.scaleX||1}else if(this.options.expandCanvasToImage){let c=Math.max(h,Math.floor(a)),d=Math.max(n,Math.floor(o));this._setCanvasSizeInt(c,d),s.set({left:0,top:0}),s.scale(1),this.baseImageScale=1}else{let c=Math.max(this.options.canvasWidth,h),d=Math.max(this.options.canvasHeight,n);this._setCanvasSizeInt(c,d);let r=Math.min(c/a,d/o,1);s.set({left:(c-a*r)/2,top:(d-o*r)/2}),s.scale(r),this.baseImageScale=s.scaleX||1}this.originalImage=s,this.canvas.add(s),this.canvas.sendToBack(s),this._lastMaskInitialLeft=null,this._lastMaskInitialTop=null,this._lastMaskInitialWidth=null,this.maskCounter=0,this.currentScale=1,this.currentRotation=0,this._updateInputs(),this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.isImageLoadedToCanvas=!0,typeof this.onImageLoaded=="function"&&this.onImageLoaded()},{crossOrigin:"anonymous"})}isImageLoaded(){return!!(this.originalImage&&this.originalImage instanceof fabric.Image&&this.originalImage.width>0&&this.originalImage.height>0)}_createImageElement(t){return new Promise((i,e)=>{let s=new Image;s.onload=()=>{s.onload=null,s.onerror=null,i(s)},s.onerror=a=>{s.onload=null,s.onerror=null,e(a)},s.src=t})}_resampleImageToDataURL(t,i,e,s=.92){let a=document.createElement("canvas");return a.width=i,a.height=e,a.getContext("2d").drawImage(t,0,0,t.naturalWidth,t.naturalHeight,0,0,i,e),a.toDataURL("image/jpeg",s)}_setCanvasSizeInt(t,i){let e=Math.max(1,Math.round(Number(t)||1)),s=Math.max(1,Math.round(Number(i)||1));this.canvas.setWidth(e),this.canvas.setHeight(s),typeof this.canvas.calcOffset=="function"&&this.canvas.calcOffset(),this.canvasEl&&(this.canvasEl.style.width=e+"px",this.canvasEl.style.height=s+"px",this.canvasEl.style.maxWidth="none")}_getObjectTopLeftPoint(t){if(!t)return{x:0,y:0};t.setCoords();let i=typeof t.getCoords=="function"?t.getCoords():null;if(i&&i.length)return i[0];let e=t.getBoundingRect(!0,!0);return{x:e.left,y:e.top}}_setObjectOriginKeepingPosition(t,i,e,s){!t||!s||!t.setPositionByOrigin||(t.set({originX:i,originY:e}),t.setPositionByOrigin(s,i,e),t.setCoords())}_alignObjectBoundingBoxToCanvasTopLeft(t){if(!t)return;t.setCoords();let i=t.getBoundingRect(!0,!0),e=i.left,s=i.top;t.set({left:(t.left||0)-e,top:(t.top||0)-s}),t.setCoords(),this.canvas.renderAll()}_updateCanvasSizeToImageBounds(){if(!this.originalImage)return;this.originalImage.setCoords();let t=this.originalImage.getBoundingRect(!0,!0),i=this.containerEl?Math.ceil(this.containerEl.clientWidth||0):0,e=this.containerEl?Math.ceil(this.containerEl.clientHeight||0):0;if(i>0&&e>0&&t.width<=i&&t.height<=e){this._setCanvasSizeInt(i,e);return}let s=Math.max(i||0,Math.floor(t.width)),a=Math.max(e||0,Math.floor(t.height));this._setCanvasSizeInt(s,a)}scaleImage(t){return this.animQueue.add(()=>this._scaleImageImpl(t))}_scaleImageImpl(t){if(!this.originalImage||this.isAnimating)return Promise.resolve();t=Math.max(this.options.minScale,Math.min(this.options.maxScale,t)),this.currentScale=t,this.isAnimating=!0,this._updateUI();let i=this.baseImageScale*t,e=this._getObjectTopLeftPoint(this.originalImage);this._setObjectOriginKeepingPosition(this.originalImage,"left","top",e);let s=new Promise(o=>{this.originalImage.animate("scaleX",i,{duration:this.options.animationDuration,onChange:this.canvas.renderAll.bind(this.canvas),onComplete:o})}),a=new Promise(o=>{this.originalImage.animate("scaleY",i,{duration:this.options.animationDuration,onChange:this.canvas.renderAll.bind(this.canvas),onComplete:o})});return Promise.all([s,a]).then(()=>{this.originalImage.set({scaleX:i,scaleY:i}),this.originalImage.setCoords(),this.options.expandCanvasToImage&&this._updateCanvasSizeToImageBounds(),this._alignObjectBoundingBoxToCanvasTopLeft(this.originalImage),this.canvas.getObjects().forEach(o=>{o.maskId&&this._syncMaskLabel(o)}),this.isAnimating=!1,this._updateInputs(),this._updateUI(),this.saveState()}).catch(()=>{this.isAnimating=!1,this._updateUI()})}rotateImage(t){return this.animQueue.add(()=>this._rotateImageImpl(t))}_rotateImageImpl(t){if(!this.originalImage||this.isAnimating||isNaN(t))return Promise.resolve();this.currentRotation=t,this.isAnimating=!0,this._updateUI();let i=this.originalImage.getCenterPoint();return this._setObjectOriginKeepingPosition(this.originalImage,"center","center",i),new Promise(s=>{this.originalImage.animate("angle",t,{duration:this.options.animationDuration,onChange:this.canvas.renderAll.bind(this.canvas),onComplete:s})}).then(()=>{this.originalImage.set("angle",t),this.originalImage.setCoords(),this.options.expandCanvasToImage&&this._updateCanvasSizeToImageBounds(),this._alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);let s=this._getObjectTopLeftPoint(this.originalImage);this._setObjectOriginKeepingPosition(this.originalImage,"left","top",s),this.canvas.getObjects().forEach(a=>{a.maskId&&this._syncMaskLabel(a)}),this.isAnimating=!1,this._updateInputs(),this._updateUI(),this.saveState()}).catch(()=>{this.isAnimating=!1,this._updateUI()})}reset(){return this.originalImage?this.scaleImage(1).then(()=>this.rotateImage(0)).then(()=>{this.saveState()}).catch(t=>{console.error("reset() failed",t)}):Promise.resolve()}loadFromState(t){if(!(!t||!this.canvas))try{let i=typeof t=="string"?JSON.parse(t):t;this.canvas.loadFromJSON(i,()=>{this._hideAllMaskLabels();let e=this.canvas.getObjects();this.originalImage=e.find(a=>a.type==="image"&&!a.maskId)||null,this.originalImage.set({originX:"left",originY:"top",selectable:!1,evented:!1,hasControls:!1,hoverCursor:"default"}),this.canvas.sendToBack(this.originalImage);let s=e.filter(a=>a.maskId);this.maskCounter=s.reduce((a,o)=>Math.max(a,o.maskId),0),this.canvas.renderAll(),this._updateMaskList(),this._updateUI()})}catch(i){console.error("loadFromState() failed",i)}}saveState(){if(!this.canvas)return;let t=this.canvas.getActiveObject();this._hideAllMaskLabels();let i=JSON.stringify(this.canvas.toJSON(["maskId","maskName"])),e=this._lastSnapshot||i,s=!1,a=new E(()=>{s&&this.loadFromState(i),s=!0},()=>{this.loadFromState(e)});this.historyManager.execute(a),this._lastSnapshot=i,t&&t.maskId&&this._showLabelForMask(t),this._updateUI()}undo(){this.historyManager.undo()}redo(){this.historyManager.redo()}addMask(t={}){if(!this.canvas)return null;let i=t.shape||"rect",e={shape:i,width:this.options.defaultMaskWidth,height:this.options.defaultMaskHeight,color:"rgba(0,0,0,0.5)",alpha:.5,gap:5,left:void 0,top:void 0,angle:0,selectable:!0,...t},s=10,a=s,o=s,h=(r,l)=>{if(typeof r=="function")return r(this.canvas,this.options);if(typeof r=="string"&&r.endsWith("%")){let g=parseFloat(r)/100;return Math.floor((this.canvas?this.canvas.getWidth():0)*g)}return r??l};if(e.left===void 0&&this._lastMask){let r=this._lastMask,l=r.left;r.getScaledWidth?l+=r.getScaledWidth():r.width&&(l+=r.width*(r.scaleX??1)),a=Math.round(l+e.gap),o=r.top??s}else a=h(e.left,s),o=h(e.top,s);if(e.width=h(e.width,this.options.defaultMaskWidth),e.height=h(e.height,this.options.defaultMaskHeight),this.options.expandCanvasToImage&&i==="rect"){let r=Math.ceil(a+e.width+10),l=Math.ceil(o+e.height+10),g=this.containerEl?Math.floor(this.containerEl.clientWidth||0):0,u=this.containerEl?Math.floor(this.containerEl.clientHeight||0):0,m=Math.max(this.canvas.getWidth(),g,r),v=Math.max(this.canvas.getHeight(),u,l);this._setCanvasSizeInt(m,v)}let n;if(typeof e.fabricGenerator=="function")n=e.fabricGenerator(e,this.canvas,this.options);else switch(i){case"circle":n=new fabric.Circle({left:a,top:o,radius:h(e.radius,Math.min(e.width,e.height)/2),fill:e.color,opacity:e.alpha,angle:e.angle,...e.styles});break;case"ellipse":n=new fabric.Ellipse({left:a,top:o,rx:h(e.rx,e.width/2),ry:h(e.ry,e.height/2),fill:e.color,opacity:e.alpha,angle:e.angle,...e.styles});break;case"polygon":let r=e.points||[];Array.isArray(r)&&r.length&&typeof r[0]=="object"&&(r=r.map(l=>({x:Number(l.x),y:Number(l.y)}))),n=new fabric.Polygon(r,{left:a,top:o,fill:e.color,opacity:e.alpha,angle:e.angle,...e.styles});break;case"rect":default:n=new fabric.Rect({left:a,top:o,width:h(e.width,this.options.defaultMaskWidth),height:h(e.height,this.options.defaultMaskHeight),fill:e.color,opacity:e.alpha,angle:e.angle,rx:e.rx,ry:e.ry,...e.styles})}n.selectable=e.selectable!==!1,n.hasControls="hasControls"in e?e.hasControls:!0,n.lockRotation=!this.options.maskRotatable,n.borderColor=e.borderColor||"red",n.cornerColor=e.cornerColor||"black",n.cornerSize=e.cornerSize||8,n.transparentCorners="transparentCorners"in e?e.transparentCorners:!1,n.stroke=e.styles&&e.styles.stroke||"#ccc",n.strokeWidth=e.styles&&e.styles.strokeWidth||1,n.strokeUniform="strokeUniform"in e?e.strokeUniform:!0,e.styles&&e.styles.strokeDashArray&&(n.strokeDashArray=e.styles.strokeDashArray),n.originalAlpha=e.alpha;let c={stroke:n.stroke,strokeWidth:n.strokeWidth,opacity:n.originalAlpha},d={stroke:"#ff5500",strokeWidth:2,opacity:Math.min(n.originalAlpha+.2,1)};return n.on("mouseover",()=>{n.set(d),n.canvas.requestRenderAll()}),n.on("mouseout",()=>{n.set(c),n.canvas.requestRenderAll()}),this._lastMaskInitialLeft=a,this._lastMaskInitialTop=o,this._lastMaskInitialWidth=h(e.width,this.options.defaultMaskWidth),n.maskId=++this.maskCounter,n.maskName=`${this.options.maskName}${n.maskId}`,this._lastMask=n,this.canvas.add(n),this.canvas.bringToFront(n),e.selectable&&this.canvas.setActiveObject(n),this._onSelectionChanged([n]),this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.saveState(),typeof e.onCreate=="function"&&e.onCreate(n,this.canvas),n}removeSelectedMask(){let t=this.canvas.getActiveObject();!t||!t.maskId||(this._removeLabelForMask(t),this.canvas.remove(t),this.canvas.discardActiveObject(),this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.saveState())}removeAllMasks(){let t=this.canvas.getObjects().filter(i=>i.maskId);t.forEach(i=>this._removeLabelForMask(i)),t.forEach(i=>this.canvas.remove(i)),this.canvas.discardActiveObject(),this._lastMaskInitialLeft=null,this._lastMaskInitialTop=null,this._lastMaskInitialWidth=null,this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.saveState()}_removeLabelForMask(t){if(!(!t||!this.canvas)&&t.__label){try{this.canvas.getObjects().includes(t.__label)&&this.canvas.remove(t.__label)}catch{}try{delete t.__label}catch{}}}_createLabelForMask(t){if(!t||!this.options.maskLabelOnSelect)return;this._removeLabelForMask(t);let i=null;if(this.options.label&&typeof this.options.label.create=="function"&&(i=this.options.label.create(t,fabric)),!i){let e=t.maskName,s={left:0,top:0,fontSize:12,fill:"#fff",backgroundColor:"rgba(0,0,0,0.7)",selectable:!1,evented:!1,padding:2,originX:"left",originY:"top"};this.options.label&&(typeof this.options.label.getText=="function"&&(e=this.options.label.getText(t,this.maskCounter)),this.options.label.textOptions&&Object.assign(s,this.options.label.textOptions)),i=new fabric.Text(e,s)}i.maskLabel=!0,t.__label=i,this.canvas.add(i),this.canvas.bringToFront(i),this._syncMaskLabel(t)}_hideAllMaskLabels(){if(!this.canvas)return;let t=this.canvas.getObjects();t.filter(e=>e.maskLabel).forEach(e=>{try{t.includes(e)&&this.canvas.remove(e)}catch{}}),t.forEach(e=>{if(e.maskId&&e.__label)try{delete e.__label}catch{}})}_syncMaskLabel(t){if(!t||!this.options.maskLabelOnSelect||!t.__label)return;let i=t.getCoords?t.getCoords():null;if(!i||i.length<4)return;let e=i[0],s=t.getCenterPoint(),a=s.x-e.x,o=s.y-e.y,h=Math.sqrt(a*a+o*o)||1,n=a/h,c=o/h,d=Math.max(0,this.options.maskLabelOffset??3),r=e.x+n*d,l=e.y+c*d;t.__label.set({left:Math.round(r),top:Math.round(l),angle:t.angle||0,originX:"left",originY:"top",visible:!0}),t.__label.setCoords(),this.canvas.renderAll()}_showLabelForMask(t){t&&this.options.maskLabelOnSelect&&(t.__label||this._createLabelForMask(t),t.__label.visible=!0,this._syncMaskLabel(t))}_onSelectionChanged(t){let i=(t||[]).find(s=>s.maskId);this.canvas.getObjects().filter(s=>s.maskId).forEach(s=>{if(s!==i){if(s.__label){try{this.canvas.remove(s.__label)}catch{}delete s.__label}s.set({stroke:"#ccc",strokeWidth:1})}else s.set({stroke:"#ff0000",strokeWidth:1})}),i&&this._showLabelForMask(i),this._updateMaskListSelection(i),this.canvas.renderAll(),this._updateUI()}_updateMaskList(){let t=document.getElementById(this.elements.maskList);if(!t)return;t.innerHTML="",this.canvas.getObjects().filter(e=>e.maskId).forEach(e=>{let s=document.createElement("li");s.className="list-group-item mask-item",s.textContent=e.maskName,s.onclick=()=>{this.canvas.setActiveObject(e),this._onSelectionChanged([e])},t.appendChild(s)})}_updateMaskListSelection(t){let i=document.getElementById(this.elements.maskList);if(!i)return;i.querySelectorAll(".mask-item").forEach(s=>{let a=!!t&&s.textContent===t.maskName;s.classList.toggle("active",a)})}async merge(){if(!(!this.originalImage||!this.canvas.getObjects().filter(i=>i.maskId).length)){this.canvas.discardActiveObject(),this.canvas.renderAll();try{let i=await this.getImageBase64({exportImageArea:!0,multiplier:this.options.exportMultiplier});this.removeAllMasks(),await this.loadImage(i),this.saveState()}catch(i){console.error("merge error",i),this.canvasEl&&(this.canvasEl.style.visibility="")}}}downloadImage(t=this.options.defaultDownloadFileName){if(!this.originalImage)return;let i=this.options.exportImageAreaByDefault;this.getImageBase64({exportImageArea:i,multiplier:this.options.exportMultiplier}).then(e=>{let s=document.createElement("a");s.download=t,s.href=e,document.body.appendChild(s),s.click(),document.body.removeChild(s)}).catch(e=>console.error("download error",e))}async getImageBase64(t={}){if(!this.originalImage)throw new Error("No image loaded");let i=typeof t.exportImageArea=="boolean"?t.exportImageArea:this.options.exportImageAreaByDefault,e=t.multiplier||this.options.exportMultiplier||1;if(!i){let l=this.originalImage.getElement?this.originalImage.getElement():this.originalImage._element||null;if(!l)return this.canvas.toDataURL({format:"jpeg",quality:this.options.downsampleQuality,multiplier:e});let g=this.originalImage.width,u=this.originalImage.height,m=document.createElement("canvas");return m.width=g,m.height=u,m.getContext("2d").drawImage(l,0,0,g,u),m.toDataURL("image/jpeg",this.options.downsampleQuality)}let s=this.canvas.getObjects().filter(l=>l.maskId),a=s.map(l=>({obj:l,opacity:l.opacity,fill:l.fill,strokeWidth:l.strokeWidth,stroke:l.stroke,selectable:l.selectable,lockRotation:l.lockRotation}));s.forEach(l=>this._removeLabelForMask(l)),this.canvas.discardActiveObject(),this.canvas.renderAll(),s.forEach(l=>{l.set({opacity:1,fill:"#000000",strokeWidth:0,stroke:null,selectable:!1}),l.setCoords()}),this.canvas.renderAll(),this.originalImage.setCoords();let o=this.originalImage.getBoundingRect(!0,!0),h=Math.max(0,Math.round(o.left)),n=Math.max(0,Math.round(o.top)),c=Math.max(1,Math.round(o.width)),d=Math.max(1,Math.round(o.height)),r=await new Promise((l,g)=>{try{let u=this.canvas.toDataURL({format:"jpeg",quality:this.options.downsampleQuality,multiplier:e}),m=new Image;m.onload=()=>{try{let v=Math.round(h*e),_=Math.round(n*e),p=Math.round(c*e),I=Math.round(d*e),k=document.createElement("canvas");k.width=p,k.height=I,k.getContext("2d").drawImage(m,v,_,p,I,0,0,p,I);let C=k.toDataURL("image/jpeg",this.options.downsampleQuality);l(C)}catch(v){g(v)}},m.onerror=g,m.src=u}catch(u){g(u)}});return a.forEach(l=>{try{l.obj.set({opacity:l.opacity,fill:l.fill,strokeWidth:l.strokeWidth,stroke:l.stroke,selectable:l.selectable,lockRotation:l.lockRotation}),l.obj.setCoords()}catch{}}),this.canvas.renderAll(),r}async exportImageFile(t={}){if(!this.originalImage)throw new Error("No image loaded");let{mergeMask:i=!0,fileType:e="jpeg",quality:s=this.options.downsampleQuality??.92,multiplier:a=this.options.exportMultiplier??1,fileName:o=this.options.defaultDownloadFileName??"exported_image.jpg"}=t,n={jpeg:"jpeg",jpg:"jpeg","image/jpeg":"jpeg",png:"png","image/png":"png",webp:"webp","image/webp":"webp"}[String(e).toLowerCase()]||"jpeg",c;i?c=await this.getImageBase64({exportImageArea:!0,multiplier:a}):c=await this.getImageBase64({exportImageArea:!1,multiplier:a});let d=c;d.startsWith(`data:image/${n}`)||(d=await new Promise((v,_)=>{let p=new window.Image;p.crossOrigin="Anonymous",p.onload=()=>{try{let I=document.createElement("canvas");I.width=p.width,I.height=p.height,I.getContext("2d").drawImage(p,0,0);let x=I.toDataURL(`image/${n}`,s);v(x)}catch(I){_(I)}},p.onerror=_,p.src=c}));let r=atob(d.split(",")[1]),l=`image/${n}`,g=r.length,u=new Uint8Array(g);for(;g--;)u[g]=r.charCodeAt(g);return new File([u],o,{type:l})}_updateInputs(){let t=document.getElementById(this.elements.scaleRate);t&&(t.value=Math.round(this.currentScale*100))}_updateUI(){let t=!!this.originalImage,e=(t?this.canvas.getObjects().filter(c=>c.maskId):[]).length>0,s=this.canvas.getActiveObject(),a=s&&s.maskId,o=this.currentScale===1&&this.currentRotation===0,h=this.historyManager?.canUndo(),n=this.historyManager?.canRedo();this._setDisabled("zoomInBtn",!t||this.isAnimating||this.currentScale>=this.options.maxScale),this._setDisabled("zoomOutBtn",!t||this.isAnimating||this.currentScale<=this.options.minScale),this._setDisabled("addMaskBtn",!t||this.isAnimating),this._setDisabled("removeMaskBtn",!a||this.isAnimating),this._setDisabled("removeAllMasksBtn",!e||this.isAnimating),this._setDisabled("mergeBtn",!t||!e||this.isAnimating),this._setDisabled("downloadBtn",!t||this.isAnimating),this._setDisabled("resetBtn",!t||o||this.isAnimating),this._setDisabled("undoBtn",!t||this.isAnimating||!h),this._setDisabled("redoBtn",!t||this.isAnimating||!n)}_setDisabled(t,i){let e=document.getElementById(this.elements[t]);e&&(e.disabled=!!i)}_updatePlaceholderStatus(){this.options.showPlaceholder&&this._setPlaceholderVisible(!this.originalImage)}_setPlaceholderVisible(t){this.placeholderEl&&(t?(this.placeholderEl.classList.remove("d-none"),this.placeholderEl.classList.add("d-flex"),this.containerEl.classList.add("d-none")):(this.placeholderEl.classList.remove("d-flex"),this.placeholderEl.classList.add("d-none"),this.containerEl.classList.remove("d-none")))}dispose(){try{for(let t in this._boundHandlers||{}){let i=this._boundHandlers[t]||[],e=document.getElementById(this.elements[t]);e&&i.forEach(s=>{try{e.removeEventListener(s.event,s.handler)}catch{}})}}catch{}if(this.canvas){try{this.canvas.dispose()}catch{}this.canvas=null,this.canvasEl=null,this.isImageLoadedToCanvas=!1}this._boundHandlers={}}}class f{constructor(){this.queue=[],this.running=!1}async add(t){return new Promise((i,e)=>{this.queue.push({fn:t,resolve:i,reject:e}),this.running||this.processQueue()})}async processQueue(){if(this.queue.length===0){this.running=!1;return}this.running=!0;let{fn:t,resolve:i,reject:e}=this.queue.shift();try{let s=await t();i(s)}catch(s){e(s)}this.processQueue()}}class E{constructor(t,i){this.execute=t,this.undo=i}}class L{constructor(t=50){this.history=[],this.currentIndex=-1,this.maxSize=t}execute(t){t.execute(),this.currentIndex<this.history.length-1&&(this.history=this.history.slice(0,this.currentIndex+1)),this.history.push(t),this.history.length>this.maxSize?this.history.shift():this.currentIndex++}canUndo(){return this.currentIndex>=0}canRedo(){return this.currentIndex<this.history.length-1}undo(){this.currentIndex>=0&&(this.history[this.currentIndex].undo(),this.currentIndex--)}redo(){this.currentIndex<this.history.length-1&&(this.currentIndex++,this.history[this.currentIndex].execute())}}return b})});return S();})();
13
+ */(function(u,l){typeof define=="function"&&define.amd?define([],l):(typeof N>"u"?"undefined":F(N))==="object"&&N.exports?N.exports=l():u.ImageEditor=l()})(typeof self<"u"?self:K,function(){"use strict";var u=function(){function E(){var o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};z(this,E),this._fabricLoaded=typeof fabric<"u",this._fabricLoaded||console.error("fabric.js is not loaded. Please include fabric.js first. Initialization will be aborted."),this.options=H({canvasWidth:800,canvasHeight:600,backgroundColor:"#ffffff",animationDuration:300,minScale:.1,maxScale:5,scaleStep:.05,rotationStep:90,expandCanvasToImage:!0,fitImageToCanvas:!1,downsampleOnLoad:!0,downsampleMaxWidth:4e3,downsampleMaxHeight:3e3,downsampleQuality:.92,exportMultiplier:1,exportImageAreaByDefault:!0,defaultMaskWidth:50,defaultMaskHeight:80,maskRotatable:!1,maskLabelOnSelect:!0,maskLabelOffset:3,maskName:"mask",groupSelection:!1,showPlaceholder:!0,initialImageBase64:null,defaultDownloadFileName:"edited_image.jpg"},o),this.options.label={getText:function(a,n){return a.maskName},textOptions:{fontSize:12,fill:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:2,fontFamily:"monospace",fontWeight:"bold",selectable:!1,evented:!1,originX:"left",originY:"top"}},this.options.crop={minWidth:100,minHeight:100,padding:10,hideMasksDuringCrop:!0,preserveMasksAfterCrop:!0,allowRotationOfCropRect:!1},this.canvas=null,this.canvasEl=null,this.containerEl=null,this.placeholderEl=null,this.originalImage=null,this.baseImageScale=1,this.currentScale=1,this.currentRotation=0,this.maskCounter=0,this.isAnimating=!1,this.elements={},this.isImageLoadedToCanvas=!1,this.maxHistorySize=50,this._boundHandlers={},this._lastMaskInitialLeft=null,this._lastMaskInitialTop=null,this._lastMaskInitialWidth=null,this._cropMode=!1,this._cropRect=null,this._cropHandlers=[],this.onImageLoaded=typeof o.onImageLoaded=="function"?o.onImageLoaded:null,this.animQueue=new l,this.historyManager=new b(this.maxHistorySize)}return Q(E,[{key:"init",value:function(){var t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(this._fabricLoaded){var a={canvas:"fabricCanvas",canvasContainer:null,imgPlaceholder:"imgPlaceholder",scaleRate:"scaleRate",rotationLeftInput:"rotationLeftInput",rotationRightInput:"rotationRightInput",rotateLeftBtn:"rotateLeftBtn",rotateRightBtn:"rotateRightBtn",addMaskBtn:"addMaskBtn",removeMaskBtn:"removeMaskBtn",removeAllMasksBtn:"removeAllMasksBtn",mergeBtn:"mergeBtn",downloadBtn:"downloadBtn",maskList:"maskList",zoomInBtn:"zoomInBtn",zoomOutBtn:"zoomOutBtn",resetBtn:"resetBtn",undoBtn:"undoBtn",redoBtn:"redoBtn",imageInput:"imageInput",cropBtn:"cropBtn",applyCropBtn:"applyCropBtn",cancelCropBtn:"cancelCropBtn"};this.elements=H(H({},a),t),this._initCanvas(),this._bindEvents(),this._updateInputs(),this._updateMaskList(),this._updateUI(),this.options.initialImageBase64?this.loadImage(this.options.initialImageBase64):this._updatePlaceholderStatus()}}},{key:"_initCanvas",value:function(){var t=this,a=document.getElementById(this.elements.canvas);if(!a)throw new Error("Canvas is not found: "+this.elements.canvas);if(this.canvasEl=a,this.elements.canvasContainer){var n=document.getElementById(this.elements.canvasContainer);this.containerEl=n||a.parentElement}else this.containerEl=a.parentElement;this.placeholderEl=document.getElementById(this.elements.imgPlaceholder)||null;var e=this.options.canvasWidth,i=this.options.canvasHeight;if(this.containerEl){var r=Math.floor(this.containerEl.clientWidth),c=Math.floor(this.containerEl.clientHeight);r>0&&c>0&&(e=r,i=c)}this.canvas=new fabric.Canvas(a,{width:e,height:i,backgroundColor:this.options.backgroundColor,selection:this.options.groupSelection,preserveObjectStacking:!0}),this.canvas.on("selection:created",function(s){return t._onSelectionChanged(s.selected)}),this.canvas.on("selection:updated",function(s){return t._onSelectionChanged(s.selected)}),this.canvas.on("selection:cleared",function(){return t._onSelectionChanged([])}),this.canvas.on("object:moving",function(s){s.target&&s.target.maskId&&t._syncMaskLabel(s.target)}),this.canvas.on("object:scaling",function(s){s.target&&s.target.maskId&&t._syncMaskLabel(s.target)}),this.canvas.on("object:rotating",function(s){s.target&&s.target.maskId&&t._syncMaskLabel(s.target)}),this.canvas.on("object:modified",function(s){s.target&&s.target.maskId&&t._syncMaskLabel(s.target)}),this.canvasEl.style.display="block"}},{key:"_bindEvents",value:function(){var t=this;this._bindIfExists("uploadArea","click",function(){var i;return(i=document.getElementById(t.elements.imageInput))===null||i===void 0?void 0:i.click()});var a=document.getElementById(this.elements.imageInput);a&&a.addEventListener("change",function(i){var r=i.target.files&&i.target.files[0];r&&t._loadImageFile(r)}),this._bindIfExists("zoomInBtn","click",function(){return t.scaleImage(t.currentScale+t.options.scaleStep)}),this._bindIfExists("zoomOutBtn","click",function(){return t.scaleImage(t.currentScale-t.options.scaleStep)}),this._bindIfExists("resetBtn","click",function(){t.reset()}),this._bindIfExists("addMaskBtn","click",function(){return t.addMask()}),this._bindIfExists("removeMaskBtn","click",function(){return t.removeSelectedMask()}),this._bindIfExists("removeAllMasksBtn","click",function(){return t.removeAllMasks()}),this._bindIfExists("mergeBtn","click",function(){return t.merge()}),this._bindIfExists("downloadBtn","click",function(){return t.downloadImage()}),this._bindIfExists("undoBtn","click",function(){return t.undo()}),this._bindIfExists("redoBtn","click",function(){return t.redo()});var n=document.getElementById(this.elements.rotateLeftBtn),e=document.getElementById(this.elements.rotateRightBtn);n&&n.addEventListener("click",function(){var i=document.getElementById(t.elements.rotationLeftInput),r=t.options.rotationStep;if(i){var c=parseFloat(i.value);isNaN(c)||(r=c)}t.rotateImage(t.currentRotation-r)}),e&&e.addEventListener("click",function(){var i=document.getElementById(t.elements.rotationRightInput),r=t.options.rotationStep;if(i){var c=parseFloat(i.value);isNaN(c)||(r=c)}t.rotateImage(t.currentRotation+r)}),this._bindIfExists("cropBtn","click",function(){return t.enterCropMode()}),this._bindIfExists("applyCropBtn","click",function(){t.applyCrop().catch(function(i){return console.error("applyCrop failed",i)})}),this._bindIfExists("cancelCropBtn","click",function(){return t.cancelCrop()})}},{key:"_bindIfExists",value:function(t,a,n){var e=document.getElementById(this.elements[t]);e&&(e.addEventListener(a,n),this._boundHandlers=this._boundHandlers||{},this._boundHandlers[t]||(this._boundHandlers[t]=[]),this._boundHandlers[t].push({event:a,handler:n}))}},{key:"_loadImageFile",value:function(t){var a=this;if(!(!t||!t.type.startsWith("image/"))){var n=new FileReader;n.onload=function(e){return a.loadImage(e.target.result)},n.onerror=function(e){console.error("[ImageEditor: fileReadError]",e)},n.readAsDataURL(t)}}},{key:"loadImage",value:function(){var o=D(P().m(function a(n){var e=this,i,r,c,s,f,v;return P().w(function(_){for(;;)switch(_.n){case 0:if(this._fabricLoaded){_.n=1;break}return _.a(2);case 1:if(!(!n||typeof n!="string"||!n.startsWith("data:image/"))){_.n=2;break}return _.a(2);case 2:return this._setPlaceholderVisible(!1),_.n=3,this._createImageElement(n);case 3:i=_.v,r=n,this.options.downsampleOnLoad&&(c=i.naturalWidth>this.options.downsampleMaxWidth||i.naturalHeight>this.options.downsampleMaxHeight,c&&(s=Math.min(this.options.downsampleMaxWidth/i.naturalWidth,this.options.downsampleMaxHeight/i.naturalHeight),f=Math.round(i.naturalWidth*s),v=Math.round(i.naturalHeight*s),r=this._resampleImageToDataURL(i,f,v,this.options.downsampleQuality))),fabric.Image.fromURL(r,function(m){e.canvas.discardActiveObject(),e._hideAllMaskLabels(),e.canvas.clear(),e.canvas.setBackgroundColor(e.options.backgroundColor,e.canvas.renderAll.bind(e.canvas)),m.set({originX:"left",originY:"top",selectable:!1,evented:!1});var S=m.width,M=m.height,L=e.containerEl?Math.floor(e.containerEl.clientWidth||e.options.canvasWidth):e.options.canvasWidth,j=e.containerEl?Math.floor(e.containerEl.clientHeight||e.options.canvasHeight):e.options.canvasHeight;if(e.options.fitImageToCanvas){var A=Math.max(e.options.canvasWidth,L),y=Math.max(e.options.canvasHeight,j);e._setCanvasSizeInt(A,y);var h=Math.min(A/S,y/M,1);m.set({left:(A-S*h)/2,top:(y-M*h)/2}),m.scale(h),e.baseImageScale=m.scaleX||1}else if(e.options.expandCanvasToImage){var g=Math.max(L,Math.floor(S)),p=Math.max(j,Math.floor(M));e._setCanvasSizeInt(g,p),m.set({left:0,top:0}),m.scale(1),e.baseImageScale=1}else{var d=Math.max(e.options.canvasWidth,L),k=Math.max(e.options.canvasHeight,j);e._setCanvasSizeInt(d,k);var w=Math.min(d/S,k/M,1);m.set({left:(d-S*w)/2,top:(k-M*w)/2}),m.scale(w),e.baseImageScale=m.scaleX||1}e.originalImage=m,e.canvas.add(m),e.canvas.sendToBack(m),e._lastMaskInitialLeft=null,e._lastMaskInitialTop=null,e._lastMaskInitialWidth=null,e.maskCounter=0,e.currentScale=1,e.currentRotation=0,e._updateInputs(),e._updateMaskList(),e._updateUI(),e.canvas.renderAll(),e.isImageLoadedToCanvas=!0,typeof e.onImageLoaded=="function"&&e.onImageLoaded()},{crossOrigin:"anonymous"});case 4:return _.a(2)}},a,this)}));function t(a){return o.apply(this,arguments)}return t}()},{key:"isImageLoaded",value:function(){return!!(this.originalImage&&this.originalImage instanceof fabric.Image&&this.originalImage.width>0&&this.originalImage.height>0)}},{key:"_createImageElement",value:function(t){return new Promise(function(a,n){var e=new Image;e.onload=function(){e.onload=null,e.onerror=null,a(e)},e.onerror=function(i){e.onload=null,e.onerror=null,n(i)},e.src=t})}},{key:"_resampleImageToDataURL",value:function(t,a,n){var e=arguments.length>3&&arguments[3]!==void 0?arguments[3]:.92,i=document.createElement("canvas");i.width=a,i.height=n;var r=i.getContext("2d");return r.drawImage(t,0,0,t.naturalWidth,t.naturalHeight,0,0,a,n),i.toDataURL("image/jpeg",e)}},{key:"_setCanvasSizeInt",value:function(t,a){var n=Math.max(1,Math.round(Number(t)||1)),e=Math.max(1,Math.round(Number(a)||1));this.canvas.setWidth(n),this.canvas.setHeight(e),typeof this.canvas.calcOffset=="function"&&this.canvas.calcOffset(),this.canvasEl&&(this.canvasEl.style.width=n+"px",this.canvasEl.style.height=e+"px",this.canvasEl.style.maxWidth="none")}},{key:"_getObjectTopLeftPoint",value:function(t){if(!t)return{x:0,y:0};t.setCoords();var a=typeof t.getCoords=="function"?t.getCoords():null;if(a&&a.length)return a[0];var n=t.getBoundingRect(!0,!0);return{x:n.left,y:n.top}}},{key:"_setObjectOriginKeepingPosition",value:function(t,a,n,e){!t||!e||!t.setPositionByOrigin||(t.set({originX:a,originY:n}),t.setPositionByOrigin(e,a,n),t.setCoords())}},{key:"_alignObjectBoundingBoxToCanvasTopLeft",value:function(t){if(t){t.setCoords();var a=t.getBoundingRect(!0,!0),n=a.left,e=a.top;t.set({left:(t.left||0)-n,top:(t.top||0)-e}),t.setCoords(),this.canvas.renderAll()}}},{key:"_updateCanvasSizeToImageBounds",value:function(){if(this.originalImage){this.originalImage.setCoords();var t=this.originalImage.getBoundingRect(!0,!0),a=this.containerEl?Math.ceil(this.containerEl.clientWidth||0):0,n=this.containerEl?Math.ceil(this.containerEl.clientHeight||0):0;if(a>0&&n>0&&t.width<=a&&t.height<=n){this._setCanvasSizeInt(a,n);return}var e=Math.max(a||0,Math.floor(t.width)),i=Math.max(n||0,Math.floor(t.height));this._setCanvasSizeInt(e,i)}}},{key:"scaleImage",value:function(t){var a=this;return this.animQueue.add(function(){return a._scaleImageImpl(t)})}},{key:"_scaleImageImpl",value:function(t){var a=this;if(!this.originalImage||this.isAnimating)return Promise.resolve();t=Math.max(this.options.minScale,Math.min(this.options.maxScale,t)),this.currentScale=t,this.isAnimating=!0,this._updateUI();var n=this.baseImageScale*t,e=this._getObjectTopLeftPoint(this.originalImage);this._setObjectOriginKeepingPosition(this.originalImage,"left","top",e);var i=new Promise(function(c){a.originalImage.animate("scaleX",n,{duration:a.options.animationDuration,onChange:a.canvas.renderAll.bind(a.canvas),onComplete:c})}),r=new Promise(function(c){a.originalImage.animate("scaleY",n,{duration:a.options.animationDuration,onChange:a.canvas.renderAll.bind(a.canvas),onComplete:c})});return Promise.all([i,r]).then(function(){a.originalImage.set({scaleX:n,scaleY:n}),a.originalImage.setCoords(),a.options.expandCanvasToImage&&a._updateCanvasSizeToImageBounds(),a._alignObjectBoundingBoxToCanvasTopLeft(a.originalImage),a.canvas.getObjects().forEach(function(c){c.maskId&&a._syncMaskLabel(c)}),a.isAnimating=!1,a._updateInputs(),a._updateUI(),a.saveState()}).catch(function(){a.isAnimating=!1,a._updateUI()})}},{key:"rotateImage",value:function(t){var a=this;return this.animQueue.add(function(){return a._rotateImageImpl(t)})}},{key:"_rotateImageImpl",value:function(t){var a=this;if(!this.originalImage||this.isAnimating||isNaN(t))return Promise.resolve();this.currentRotation=t,this.isAnimating=!0,this._updateUI();var n=this.originalImage.getCenterPoint();this._setObjectOriginKeepingPosition(this.originalImage,"center","center",n);var e=new Promise(function(i){a.originalImage.animate("angle",t,{duration:a.options.animationDuration,onChange:a.canvas.renderAll.bind(a.canvas),onComplete:i})});return e.then(function(){a.originalImage.set("angle",t),a.originalImage.setCoords(),a.options.expandCanvasToImage&&a._updateCanvasSizeToImageBounds(),a._alignObjectBoundingBoxToCanvasTopLeft(a.originalImage);var i=a._getObjectTopLeftPoint(a.originalImage);a._setObjectOriginKeepingPosition(a.originalImage,"left","top",i),a.canvas.getObjects().forEach(function(r){r.maskId&&a._syncMaskLabel(r)}),a.isAnimating=!1,a._updateInputs(),a._updateUI(),a.saveState()}).catch(function(){a.isAnimating=!1,a._updateUI()})}},{key:"reset",value:function(){var t=this;return this.originalImage?this.scaleImage(1).then(function(){return t.rotateImage(0)}).then(function(){t.saveState()}).catch(function(a){console.error("reset() failed",a)}):Promise.resolve()}},{key:"loadFromState",value:function(t){var a=this;if(!(!t||!this.canvas))try{var n=typeof t=="string"?JSON.parse(t):t;this.canvas.loadFromJSON(n,function(){a._hideAllMaskLabels();var e=a.canvas.getObjects();a.originalImage=e.find(function(r){return r.type==="image"&&!r.maskId})||null,a.originalImage.set({originX:"left",originY:"top",selectable:!1,evented:!1,hasControls:!1,hoverCursor:"default"}),a.canvas.sendToBack(a.originalImage);var i=e.filter(function(r){return r.maskId});a.maskCounter=i.reduce(function(r,c){return Math.max(r,c.maskId)},0),a.canvas.renderAll(),a._updateMaskList(),a._updateUI()})}catch(e){console.error("loadFromState() failed",e)}}},{key:"saveState",value:function(){var t=this;if(this.canvas){var a=this.canvas.getActiveObject();this._hideAllMaskLabels();try{var n=this.canvas.toJSON(["maskId","maskName","isCropRect"]);Array.isArray(n.objects)&&(n.objects=n.objects.filter(function(s){return!s.isCropRect}));var e=JSON.stringify(n),i=this._lastSnapshot||e,r=!1,c=new I(function(){r&&t.loadFromState(e),r=!0},function(){t.loadFromState(i)});this.historyManager.execute(c),this._lastSnapshot=e,a&&a.maskId&&this._showLabelForMask(a),this._updateUI()}catch(s){console.warn("saveState: failed to save canvas snapshot",s)}}}},{key:"undo",value:function(){this.historyManager.undo()}},{key:"redo",value:function(){this.historyManager.redo()}},{key:"addMask",value:function(){var t=this,a=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(!this.canvas)return null;var n=a.shape||"rect",e=H({shape:n,width:this.options.defaultMaskWidth,height:this.options.defaultMaskHeight,color:"rgba(0,0,0,0.5)",alpha:.5,gap:5,left:void 0,top:void 0,angle:0,selectable:!0},a),i=10,r=i,c=i,s=function(w,O){if(typeof w=="function")return w(t.canvas,t.options);if(typeof w=="string"&&w.endsWith("%")){var B=parseFloat(w)/100;return Math.floor((t.canvas?t.canvas.getWidth():0)*B)}return w??O};if(e.left===void 0&&this._lastMask){var f,v=this._lastMask,_=v.left;if(v.getScaledWidth)_+=v.getScaledWidth();else if(v.width){var m;_+=v.width*((m=v.scaleX)!==null&&m!==void 0?m:1)}r=Math.round(_+e.gap),c=(f=v.top)!==null&&f!==void 0?f:i}else r=s(e.left,i),c=s(e.top,i);if(e.width=s(e.width,this.options.defaultMaskWidth),e.height=s(e.height,this.options.defaultMaskHeight),this.options.expandCanvasToImage&&n==="rect"){var S=Math.ceil(r+e.width+10),M=Math.ceil(c+e.height+10),L=this.containerEl?Math.floor(this.containerEl.clientWidth||0):0,j=this.containerEl?Math.floor(this.containerEl.clientHeight||0):0,A=Math.max(this.canvas.getWidth(),L,S),y=Math.max(this.canvas.getHeight(),j,M);this._setCanvasSizeInt(A,y)}var h;if(typeof e.fabricGenerator=="function")h=e.fabricGenerator(e,this.canvas,this.options);else switch(n){case"circle":h=new fabric.Circle(H({left:r,top:c,radius:s(e.radius,Math.min(e.width,e.height)/2),fill:e.color,opacity:e.alpha,angle:e.angle},e.styles));break;case"ellipse":h=new fabric.Ellipse(H({left:r,top:c,rx:s(e.rx,e.width/2),ry:s(e.ry,e.height/2),fill:e.color,opacity:e.alpha,angle:e.angle},e.styles));break;case"polygon":var g=e.points||[];Array.isArray(g)&&g.length&&F(g[0])==="object"&&(g=g.map(function(k){return{x:Number(k.x),y:Number(k.y)}})),h=new fabric.Polygon(g,H({left:r,top:c,fill:e.color,opacity:e.alpha,angle:e.angle},e.styles));break;case"rect":default:h=new fabric.Rect(H({left:r,top:c,width:s(e.width,this.options.defaultMaskWidth),height:s(e.height,this.options.defaultMaskHeight),fill:e.color,opacity:e.alpha,angle:e.angle,rx:e.rx,ry:e.ry},e.styles))}h.selectable=e.selectable!==!1,h.hasControls="hasControls"in e?e.hasControls:!0,h.lockRotation=!this.options.maskRotatable,h.borderColor=e.borderColor||"red",h.cornerColor=e.cornerColor||"black",h.cornerSize=e.cornerSize||8,h.transparentCorners="transparentCorners"in e?e.transparentCorners:!1,h.stroke=e.styles&&e.styles.stroke||"#ccc",h.strokeWidth=e.styles&&e.styles.strokeWidth||1,h.strokeUniform="strokeUniform"in e?e.strokeUniform:!0,e.styles&&e.styles.strokeDashArray&&(h.strokeDashArray=e.styles.strokeDashArray),h.originalAlpha=e.alpha;var p={stroke:h.stroke,strokeWidth:h.strokeWidth,opacity:h.originalAlpha},d={stroke:"#ff5500",strokeWidth:2,opacity:Math.min(h.originalAlpha+.2,1)};return h.on("mouseover",function(){h.set(d),h.canvas.requestRenderAll()}),h.on("mouseout",function(){h.set(p),h.canvas.requestRenderAll()}),this._lastMaskInitialLeft=r,this._lastMaskInitialTop=c,this._lastMaskInitialWidth=s(e.width,this.options.defaultMaskWidth),h.maskId=++this.maskCounter,h.maskName="".concat(this.options.maskName).concat(h.maskId),this._lastMask=h,this.canvas.add(h),this.canvas.bringToFront(h),e.selectable&&this.canvas.setActiveObject(h),this._onSelectionChanged([h]),this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.saveState(),typeof e.onCreate=="function"&&e.onCreate(h,this.canvas),h}},{key:"removeSelectedMask",value:function(){var t=this.canvas.getActiveObject();!t||!t.maskId||(this._removeLabelForMask(t),this.canvas.remove(t),this.canvas.discardActiveObject(),this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.saveState())}},{key:"removeAllMasks",value:function(){var t=this,a=this.canvas.getObjects().filter(function(n){return n.maskId});a.forEach(function(n){return t._removeLabelForMask(n)}),a.forEach(function(n){return t.canvas.remove(n)}),this.canvas.discardActiveObject(),this._lastMaskInitialLeft=null,this._lastMaskInitialTop=null,this._lastMaskInitialWidth=null,this._updateMaskList(),this._updateUI(),this.canvas.renderAll(),this.saveState()}},{key:"_removeLabelForMask",value:function(t){if(!(!t||!this.canvas)&&t.__label){try{var a=this.canvas.getObjects();a.includes(t.__label)&&this.canvas.remove(t.__label)}catch{}try{delete t.__label}catch{}}}},{key:"_createLabelForMask",value:function(t){if(!(!t||!this.options.maskLabelOnSelect)){this._removeLabelForMask(t);var a=null;if(this.options.label&&typeof this.options.label.create=="function"&&(a=this.options.label.create(t,fabric)),!a){var n=t.maskName,e={left:0,top:0,fontSize:12,fill:"#fff",backgroundColor:"rgba(0,0,0,0.7)",selectable:!1,evented:!1,padding:2,originX:"left",originY:"top"};this.options.label&&(typeof this.options.label.getText=="function"&&(n=this.options.label.getText(t,this.maskCounter)),this.options.label.textOptions&&Object.assign(e,this.options.label.textOptions)),a=new fabric.Text(n,e)}a.maskLabel=!0,t.__label=a,this.canvas.add(a),this.canvas.bringToFront(a),this._syncMaskLabel(t)}}},{key:"_hideAllMaskLabels",value:function(){var t=this;if(this.canvas){var a=this.canvas.getObjects(),n=a.filter(function(e){return e.maskLabel});n.forEach(function(e){try{a.includes(e)&&t.canvas.remove(e)}catch{}}),a.forEach(function(e){if(e.maskId&&e.__label)try{delete e.__label}catch{}})}}},{key:"_syncMaskLabel",value:function(t){var a;if(t&&this.options.maskLabelOnSelect&&t.__label){var n=t.getCoords?t.getCoords():null;if(!(!n||n.length<4)){var e=n[0],i=t.getCenterPoint(),r=i.x-e.x,c=i.y-e.y,s=Math.sqrt(r*r+c*c)||1,f=r/s,v=c/s,_=Math.max(0,(a=this.options.maskLabelOffset)!==null&&a!==void 0?a:3),m=e.x+f*_,S=e.y+v*_;t.__label.set({left:Math.round(m),top:Math.round(S),angle:t.angle||0,originX:"left",originY:"top",visible:!0}),t.__label.setCoords(),this.canvas.renderAll()}}}},{key:"_showLabelForMask",value:function(t){t&&this.options.maskLabelOnSelect&&(t.__label||this._createLabelForMask(t),t.__label.visible=!0,this._syncMaskLabel(t))}},{key:"_onSelectionChanged",value:function(t){var a=this,n=(t||[]).find(function(i){return i.maskId}),e=this.canvas.getObjects().filter(function(i){return i.maskId});e.forEach(function(i){if(i!==n){if(i.__label){try{a.canvas.remove(i.__label)}catch{}delete i.__label}i.set({stroke:"#ccc",strokeWidth:1})}else i.set({stroke:"#ff0000",strokeWidth:1})}),n&&this._showLabelForMask(n),this._updateMaskListSelection(n),this.canvas.renderAll(),this._updateUI()}},{key:"_updateMaskList",value:function(){var t=this,a=document.getElementById(this.elements.maskList);if(a){a.innerHTML="";var n=this.canvas.getObjects().filter(function(e){return e.maskId});n.forEach(function(e){var i=document.createElement("li");i.className="list-group-item mask-item",i.textContent=e.maskName,i.onclick=function(){t.canvas.setActiveObject(e),t._onSelectionChanged([e])},a.appendChild(i)})}}},{key:"_updateMaskListSelection",value:function(t){var a=document.getElementById(this.elements.maskList);if(a){var n=a.querySelectorAll(".mask-item");n.forEach(function(e){var i=!!t&&e.textContent===t.maskName;e.classList.toggle("active",i)})}}},{key:"merge",value:function(){var o=D(P().m(function a(){var n,e,i;return P().w(function(r){for(;;)switch(r.p=r.n){case 0:if(this.originalImage){r.n=1;break}return r.a(2);case 1:if(n=this.canvas.getObjects().filter(function(c){return c.maskId}),n.length){r.n=2;break}return r.a(2);case 2:return this.canvas.discardActiveObject(),this.canvas.renderAll(),r.p=3,r.n=4,this.getImageBase64({exportImageArea:!0,multiplier:this.options.exportMultiplier});case 4:return e=r.v,this.removeAllMasks(),r.n=5,this.loadImage(e);case 5:this.saveState(),r.n=7;break;case 6:r.p=6,i=r.v,console.error("merge error",i),this.canvasEl&&(this.canvasEl.style.visibility="");case 7:return r.a(2)}},a,this,[[3,6]])}));function t(){return o.apply(this,arguments)}return t}()},{key:"downloadImage",value:function(){var t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:this.options.defaultDownloadFileName;if(this.originalImage){var a=this.options.exportImageAreaByDefault;this.getImageBase64({exportImageArea:a,multiplier:this.options.exportMultiplier}).then(function(n){var e=document.createElement("a");e.download=t,e.href=n,document.body.appendChild(e),e.click(),document.body.removeChild(e)}).catch(function(n){return console.error("download error",n)})}}},{key:"getImageBase64",value:function(){var o=D(P().m(function a(){var n=this,e,i,r,c,s,f,v,_,m,S,M,L,j,A,y,h,g=arguments;return P().w(function(p){for(;;)switch(p.n){case 0:if(e=g.length>0&&g[0]!==void 0?g[0]:{},this.originalImage){p.n=1;break}throw new Error("No image loaded");case 1:if(i=typeof e.exportImageArea=="boolean"?e.exportImageArea:this.options.exportImageAreaByDefault,r=e.multiplier||this.options.exportMultiplier||1,i){p.n=3;break}if(c=this.originalImage.getElement?this.originalImage.getElement():this.originalImage._element||null,c){p.n=2;break}return p.a(2,this.canvas.toDataURL({format:"jpeg",quality:this.options.downsampleQuality,multiplier:r}));case 2:return s=this.originalImage.width,f=this.originalImage.height,v=document.createElement("canvas"),v.width=s,v.height=f,_=v.getContext("2d"),_.drawImage(c,0,0,s,f),p.a(2,v.toDataURL("image/jpeg",this.options.downsampleQuality));case 3:return m=this.canvas.getObjects().filter(function(d){return d.maskId}),S=m.map(function(d){return{obj:d,opacity:d.opacity,fill:d.fill,strokeWidth:d.strokeWidth,stroke:d.stroke,selectable:d.selectable,lockRotation:d.lockRotation}}),m.forEach(function(d){return n._removeLabelForMask(d)}),this.canvas.discardActiveObject(),this.canvas.renderAll(),m.forEach(function(d){d.set({opacity:1,fill:"#000000",strokeWidth:0,stroke:null,selectable:!1}),d.setCoords()}),this.canvas.renderAll(),this.originalImage.setCoords(),M=this.originalImage.getBoundingRect(!0,!0),L=Math.max(0,Math.round(M.left)),j=Math.max(0,Math.round(M.top)),A=Math.max(1,Math.round(M.width)),y=Math.max(1,Math.round(M.height)),p.n=4,new Promise(function(d,k){try{var w=n.canvas.toDataURL({format:"jpeg",quality:n.options.downsampleQuality,multiplier:r}),O=new Image;O.onload=function(){try{var B=Math.round(L*r),C=Math.round(j*r),x=Math.round(A*r),W=Math.round(y*r),R=document.createElement("canvas");R.width=x,R.height=W;var U=R.getContext("2d");U.drawImage(O,B,C,x,W,0,0,x,W);var q=R.toDataURL("image/jpeg",n.options.downsampleQuality);d(q)}catch(G){k(G)}},O.onerror=k,O.src=w}catch(B){k(B)}});case 4:return h=p.v,S.forEach(function(d){try{d.obj.set({opacity:d.opacity,fill:d.fill,strokeWidth:d.strokeWidth,stroke:d.stroke,selectable:d.selectable,lockRotation:d.lockRotation}),d.obj.setCoords()}catch{}}),this.canvas.renderAll(),p.a(2,h)}},a,this)}));function t(){return o.apply(this,arguments)}return t}()},{key:"exportImageFile",value:function(){var o=D(P().m(function a(){var n,e,i,r,c,s,f,v,_,m,S,M,L,j,A,y,h,g,p,d,k,w,O,B=arguments;return P().w(function(C){for(;;)switch(C.n){case 0:if(r=B.length>0&&B[0]!==void 0?B[0]:{},this.originalImage){C.n=1;break}throw new Error("No image loaded");case 1:if(c=r.mergeMask,s=c===void 0?!0:c,f=r.fileType,v=f===void 0?"jpeg":f,_=r.quality,m=_===void 0?(n=this.options.downsampleQuality)!==null&&n!==void 0?n:.92:_,S=r.multiplier,M=S===void 0?(e=this.options.exportMultiplier)!==null&&e!==void 0?e:1:S,L=r.fileName,j=L===void 0?(i=this.options.defaultDownloadFileName)!==null&&i!==void 0?i:"exported_image.jpg":L,A={jpeg:"jpeg",jpg:"jpeg","image/jpeg":"jpeg",png:"png","image/png":"png",webp:"webp","image/webp":"webp"},y=A[String(v).toLowerCase()]||"jpeg",!s){C.n=3;break}return C.n=2,this.getImageBase64({exportImageArea:!0,multiplier:M});case 2:h=C.v,C.n=5;break;case 3:return C.n=4,this.getImageBase64({exportImageArea:!1,multiplier:M});case 4:h=C.v;case 5:if(g=h,g.startsWith("data:image/".concat(y))){C.n=7;break}return C.n=6,new Promise(function(x,W){var R=new window.Image;R.crossOrigin="Anonymous",R.onload=function(){try{var U=document.createElement("canvas");U.width=R.width,U.height=R.height;var q=U.getContext("2d");q.drawImage(R,0,0);var G=U.toDataURL("image/".concat(y),m);x(G)}catch(V){W(V)}},R.onerror=W,R.src=h});case 6:g=C.v;case 7:for(p=atob(g.split(",")[1]),d="image/".concat(y),k=p.length,w=new Uint8Array(k);k--;)w[k]=p.charCodeAt(k);return O=new File([w],j,{type:d}),C.a(2,O)}},a,this)}));function t(){return o.apply(this,arguments)}return t}()},{key:"enterCropMode",value:function(){var t=this;if(!(!this.canvas||!this.originalImage||this._cropMode)&&this.isImageLoaded()){this._cropMode=!0,this._prevSelectionSetting=this.canvas.selection,this.canvas.selection=!1,this.canvas.discardActiveObject(),this.originalImage.setCoords();var a=this.originalImage.getBoundingRect(!0,!0),n=this.options.crop&&this.options.crop.padding?this.options.crop.padding:10,e=Math.max(0,Math.floor(a.left+n)),i=Math.max(0,Math.floor(a.top+n)),r=Math.min(this.options.crop.minWidth||50,Math.floor(a.width-n*2)),c=Math.min(this.options.crop.minHeight||50,Math.floor(a.height-n*2)),s=new fabric.Rect({left:e,top:i,width:r,height:c,fill:"rgba(0,0,0,0.12)",stroke:"#00aaff",strokeDashArray:[6,4],strokeWidth:1,strokeUniform:!0,selectable:!0,hasRotatingPoint:!!(this.options.crop&&this.options.crop.allowRotationOfCropRect),lockRotation:!(this.options.crop&&this.options.crop.allowRotationOfCropRect),cornerSize:8,objectCaching:!1,originX:"left",originY:"top"});this.canvas.add(s),s.isCropRect=!0,this.canvas.bringToFront(s),this.canvas.setActiveObject(s),this._cropRect=s,this._cropPrevEvented=[],this.canvas.getObjects().forEach(function(v){if(v!==s){t._cropPrevEvented.push({obj:v,evented:v.evented,selectable:v.selectable});try{v.evented=!1,v.selectable=!1}catch{}}});var f=function(){try{s.setCoords(),t.canvas.requestRenderAll()}catch{}};s.on("modified",f),s.on("moving",f),s.on("scaling",f),this._cropHandlers.push({target:s,handlers:[{evt:"modified",fn:f},{evt:"moving",fn:f},{evt:"scaling",fn:f}]}),this._updateUI(),this.canvas.renderAll()}}},{key:"cancelCrop",value:function(){if(!(!this.canvas||!this._cropMode)){if(this._cropRect){try{this._cropHandlers&&this._cropHandlers.length&&this._cropHandlers.forEach(function(t){t.handlers.forEach(function(a){return t.target.off(a.evt,a.fn)})})}catch{}try{this.canvas.remove(this._cropRect)}catch{}this._cropRect=null}Array.isArray(this._cropPrevEvented)&&this._cropPrevEvented.forEach(function(t){try{t.obj.evented=t.evented,t.obj.selectable=t.selectable}catch{}}),this._cropPrevEvented=null,this._cropHandlers=[],this._cropMode=!1,this.canvas.selection=!!this._prevSelectionSetting,this._prevSelectionSetting=void 0,this.canvas.discardActiveObject(),this._updateUI(),this.canvas.renderAll()}}},{key:"applyCrop",value:function(){var o=D(P().m(function a(){var n=this,e,i,r,c,s,f,v,_,m,S,M,L,j,A,y,h;return P().w(function(g){for(;;)switch(g.p=g.n){case 0:if(!(!this.canvas||!this._cropMode||!this._cropRect)){g.n=1;break}return g.a(2);case 1:this._cropRect.setCoords(),e=this._cropRect.getBoundingRect(!0,!0),i=Math.max(0,Math.round(e.left)),r=Math.max(0,Math.round(e.top)),c=Math.max(1,Math.round(Math.min(e.width,this.canvas.getWidth()-i))),s=Math.max(1,Math.round(Math.min(e.height,this.canvas.getHeight()-r))),f=null;try{v=this.canvas.toJSON(["maskId","maskName","isCropRect"]),Array.isArray(v.objects)&&(v.objects=v.objects.filter(function(p){return!p.isCropRect})),f=JSON.stringify(v)}catch(p){console.warn("applyCrop: could not serialize before state",p),f=null}try{_=this.canvas.getObjects().filter(function(p){return p.maskId}),_&&_.length&&(_.forEach(function(p){try{n._removeLabelForMask(p),n.canvas.remove(p)}catch(d){console.warn("applyCrop: failed to remove mask",d)}}),this.canvas.discardActiveObject(),this.canvas.renderAll())}catch(p){console.warn("applyCrop: error while removing masks",p)}try{if(this._cropRect){try{this._cropHandlers&&this._cropHandlers.length&&this._cropHandlers.forEach(function(p){p.handlers.forEach(function(d){return p.target.off(d.evt,d.fn)})})}catch{}try{this.canvas.remove(this._cropRect)}catch{}this._cropRect=null}}catch{}return this._cropMode=!1,this.canvas.selection=!!this._prevSelectionSetting,this._prevSelectionSetting=void 0,g.p=2,S=this.canvas.toDataURL({format:"jpeg",quality:this.options.downsampleQuality||.92,multiplier:1}),g.n=3,new Promise(function(p,d){var k=new Image;k.onload=function(){try{var w=document.createElement("canvas");w.width=c,w.height=s;var O=w.getContext("2d");O.drawImage(k,i,r,c,s,0,0,c,s);var B=w.toDataURL("image/jpeg",n.options.downsampleQuality||.92);p(B)}catch(C){d(C)}},k.onerror=function(w){return d(w)},k.src=S});case 3:m=g.v,g.n=5;break;case 4:return g.p=4,y=g.v,console.error("applyCrop: failed to create cropped image",y),this._updateUI(),g.a(2);case 5:return g.p=5,g.n=6,this.loadImage(m);case 6:g.n=8;break;case 7:return g.p=7,h=g.v,console.error("applyCrop: loadImage(croppedBase64) failed",h),this._updateUI(),g.a(2);case 8:M=null;try{L=this.canvas.toJSON(["maskId","maskName","isCropRect"]),Array.isArray(L.objects)&&(L.objects=L.objects.filter(function(p){return!p.isCropRect})),M=JSON.stringify(L)}catch(p){console.warn("applyCrop: failed to serialize after state",p),M=null}try{j=this,A=new I(function(){M&&j.loadFromState(M)},function(){f&&j.loadFromState(f)}),this.historyManager||(this.historyManager=new b(this.maxHistorySize||50)),this.historyManager.currentIndex<this.historyManager.history.length-1&&(this.historyManager.history=this.historyManager.history.slice(0,this.historyManager.currentIndex+1)),this.historyManager.history.push(A),this.historyManager.history.length>this.historyManager.maxSize?this.historyManager.history.shift():this.historyManager.currentIndex++}catch(p){console.warn("applyCrop: failed to push history command",p)}this._updateUI(),this.canvas.renderAll();case 9:return g.a(2)}},a,this,[[5,7],[2,4]])}));function t(){return o.apply(this,arguments)}return t}()},{key:"_updateInputs",value:function(){var t=document.getElementById(this.elements.scaleRate);t&&(t.value=Math.round(this.currentScale*100))}},{key:"_updateUI",value:function(){var t,a,n=!!this.originalImage,e=n?this.canvas.getObjects().filter(function(j){return j.maskId}):[],i=e.length>0,r=this.canvas.getActiveObject(),c=r&&r.maskId,s=this.currentScale===1&&this.currentRotation===0,f=(t=this.historyManager)===null||t===void 0?void 0:t.canUndo(),v=(a=this.historyManager)===null||a===void 0?void 0:a.canRedo(),_=!!this._cropMode;if(_){for(var m=0,S=Object.keys(this.elements||{});m<S.length;m++){var M=S[m],L=document.getElementById(this.elements[M]);L&&(M==="applyCropBtn"||M==="cancelCropBtn"?L.disabled=!1:L.disabled=!0)}return}this._setDisabled("zoomInBtn",!n||this.isAnimating||this.currentScale>=this.options.maxScale),this._setDisabled("zoomOutBtn",!n||this.isAnimating||this.currentScale<=this.options.minScale),this._setDisabled("rotateLeftBtn",!n||this.isAnimating),this._setDisabled("rotateRightBtn",!n||this.isAnimating),this._setDisabled("addMaskBtn",!n||this.isAnimating),this._setDisabled("removeMaskBtn",!c||this.isAnimating),this._setDisabled("removeAllMasksBtn",!i||this.isAnimating),this._setDisabled("mergeBtn",!n||!i||this.isAnimating),this._setDisabled("downloadBtn",!n||this.isAnimating),this._setDisabled("resetBtn",!n||s||this.isAnimating),this._setDisabled("undoBtn",!n||this.isAnimating||!f),this._setDisabled("redoBtn",!n||this.isAnimating||!v),this._setDisabled("cropBtn",!n||this.isAnimating),this._setDisabled("applyCropBtn",!0),this._setDisabled("cancelCropBtn",!0)}},{key:"_setDisabled",value:function(t,a){var n=document.getElementById(this.elements[t]);n&&(n.disabled=!!a)}},{key:"_updatePlaceholderStatus",value:function(){this.options.showPlaceholder&&this._setPlaceholderVisible(!this.originalImage)}},{key:"_setPlaceholderVisible",value:function(t){this.placeholderEl&&(t?(this.placeholderEl.classList.remove("d-none"),this.placeholderEl.classList.add("d-flex"),this.containerEl.classList.add("d-none")):(this.placeholderEl.classList.remove("d-flex"),this.placeholderEl.classList.add("d-none"),this.containerEl.classList.remove("d-none")))}},{key:"dispose",value:function(){var t=this;try{var a=function(){var i=t._boundHandlers[n]||[],r=document.getElementById(t.elements[n]);if(!r)return 1;i.forEach(function(c){try{r.removeEventListener(c.event,c.handler)}catch{}})};for(var n in this._boundHandlers||{})a()}catch{}if(this._cropRect){try{this.canvas.remove(this._cropRect)}catch{}this._cropRect=null}if(this.canvas){try{this.canvas.dispose()}catch{}this.canvas=null,this.canvasEl=null,this.isImageLoadedToCanvas=!1}this._boundHandlers={}}}])}(),l=function(){function E(){z(this,E),this.queue=[],this.running=!1}return Q(E,[{key:"add",value:function(){var o=D(P().m(function a(n){var e=this;return P().w(function(i){for(;;)switch(i.n){case 0:return i.a(2,new Promise(function(r,c){e.queue.push({fn:n,resolve:r,reject:c}),e.running||e.processQueue()}))}},a)}));function t(a){return o.apply(this,arguments)}return t}()},{key:"processQueue",value:function(){var o=D(P().m(function a(){var n,e,i,r,c,s;return P().w(function(f){for(;;)switch(f.p=f.n){case 0:if(this.queue.length!==0){f.n=1;break}return this.running=!1,f.a(2);case 1:return this.running=!0,n=this.queue.shift(),e=n.fn,i=n.resolve,r=n.reject,f.p=2,f.n=3,e();case 3:c=f.v,i(c),f.n=5;break;case 4:f.p=4,s=f.v,r(s);case 5:this.processQueue();case 6:return f.a(2)}},a,this,[[2,4]])}));function t(){return o.apply(this,arguments)}return t}()}])}(),I=Q(function E(o,t){z(this,E),this.execute=o,this.undo=t}),b=function(){function E(){var o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:50;z(this,E),this.history=[],this.currentIndex=-1,this.maxSize=o}return Q(E,[{key:"execute",value:function(t){t.execute(),this.currentIndex<this.history.length-1&&(this.history=this.history.slice(0,this.currentIndex+1)),this.history.push(t),this.history.length>this.maxSize?this.history.shift():this.currentIndex++}},{key:"canUndo",value:function(){return this.currentIndex>=0}},{key:"canRedo",value:function(){return this.currentIndex<this.history.length-1}},{key:"undo",value:function(){this.currentIndex>=0&&(this.history[this.currentIndex].undo(),this.currentIndex--)}},{key:"redo",value:function(){this.currentIndex<this.history.length-1&&(this.currentIndex++,this.history[this.currentIndex].execute())}}])}();return u})});return ae();})();
14
14
  //# sourceMappingURL=image-editor.min.js.map