raffaello 1.0.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.
Files changed (4) hide show
  1. package/README.md +4 -0
  2. package/dist/raffaello.min.css +15 -0
  3. package/dist/raffaello.min.js +36 -0
  4. package/package.json +31 -0
package/README.md ADDED
@@ -0,0 +1,4 @@
1
+ # RAFFAELLO
2
+
3
+ Private repo for RAFFELLO main source
4
+
package/dist/raffaello.min.css ADDED
@@ -0,0 +1,15 @@
1
+ /*!
2
+ * Cropper.js v1.5.13
3
+ * https://fengyuanchen.github.io/cropperjs
4
+ *
5
+ * Copyright 2015-present Chen Fengyuan
6
+ * Released under the MIT license
7
+ *
8
+ * Date: 2022-11-20T05:30:43.444Z
9
+ */.cropper-container{border-radius:3px;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{border-radius:2px;bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.8}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.25);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:0;position:absolute;width:100%;z-index:10}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{opacity:1}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:9px;opacity:1;width:9px}.cropper-point.point-e{cursor:ew-resize;margin-top:-5px;right:-5px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-5px;top:-5px}.cropper-point.point-w{cursor:ew-resize;left:-5px;margin-top:-5px;top:50%}.cropper-point.point-s{bottom:-5px;cursor:s-resize;left:50%;margin-left:-5px}.cropper-point.point-ne{cursor:nesw-resize;right:-5px;top:-5px}.cropper-point.point-nw{cursor:nwse-resize;left:-5px;top:-5px}.cropper-point.point-sw{bottom:-5px;cursor:nesw-resize;left:-5px}.cropper-point.point-se{bottom:-5px;cursor:nwse-resize;right:-5px}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
10
+
11
+ /*!
12
+ * RAFFAELLO
13
+ * (c) 2025 Theo Francart
14
+ * Proprietary License - All Rights Reserved
15
+ */.raffaello-imageContainer{border-radius:5px;display:block;max-width:100%;position:relative}.raffaello-imageContainer>*{border-radius:3px}.raffaello-imageContainer img{border:0!important;box-shadow:0!important}.raffaello-upload{align-items:center;background-color:#e7e7ee;border:0!important;cursor:pointer;display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:3}.raffaello-upload img{height:40px;opacity:.8;pointer-events:none;user-select:none;width:40px}.raffaello-loading{align-items:center;background-color:rgba(231,231,238,.5);border:0!important;display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:2}.raffaello-loading-circle{animation:raffaello-spin 1s linear infinite;border:4px solid hsla(0,0%,98%,.575);border-radius:50%;border-top-color:#333;height:50px;width:50px}@keyframes raffaello-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.raffaello-templateName{align-items:flex-end;display:flex;flex-direction:row;gap:10px;justify-content:space-between}.raffaello-restart{cursor:pointer;opacity:.7;width:25px}.raffaello-restart img{height:25px;pointer-events:none;user-select:none;width:25px}.raffaello-canvas-to-overlay{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.raffaello-nav{align-items:flex-start;display:flex;filter:drop-shadow(0 0 5px rgba(32,32,72,.1));height:120px;margin-left:40px;margin-top:0;opacity:1;z-index:10}@media screen and (min-width:1400px){.raffaello-nav{margin-left:1170px}}@media screen and (max-width:1400px){.raffaello-nav{margin-left:calc(100vw - 230px)}}
package/dist/raffaello.min.js ADDED
@@ -0,0 +1,36 @@
1
+ /*!
2
+ * RAFFAELLO - v1.0.0
3
+ *
4
+ * ,%DDJ*.
5
+ * .P +D+ .,. ,,
6
+ * ,Y@Y .. $%Y .D%. +@D. $%DP,
7
+ * Y Y@@@@J%**+. .. J% ... .J*D, $D@*,
8
+ * ,J@*. .*J@JJY$D $D@@%PJD, D@@JPPJ@P. .%JJP.+JJ*. $J@Y ,D%,
9
+ * .D%. $%@P, Y@@D .*@%, PJP.P@P ,%@P .*@J$ P@@D, .PD%P.$JP .%*. Y*%%$
10
+ * ,D% $D%, .+J@@Y Y@*$$..%@*Y@J $J*. *@%. ,JJ$ ,*@DY $JJ. .%D, YJP. $J%
11
+ * ,@D .+D@@JDY %JD*DD$YJ@@@%.D@* .+JP$YP*DJJJDP*J@JJJD+YDJ@%$+@D@D$$Y%D$ .+J%
12
+ * Y@% . ,, ,Y$..P@@@D.
13
+ * .%D$
14
+ * +JP
15
+ * , P@P
16
+ * *@JJ*
17
+ *
18
+ *
19
+ * Coded with ♡ by Theo Francart
20
+ *
21
+ * Released and licensed under a proprietary commercial license.
22
+ * Unauthorized use, modification, or distribution is strictly prohibited.
23
+ * © 2025 Theo Francart | RTS - Radio Television Suisse. All rights reserved.
24
+ *
25
+ * Build: 2025-04-14
26
+ */
27
+ !function(){"use strict";
28
+ /*!
29
+ * Cropper.js v1.5.13
30
+ * https://fengyuanchen.github.io/cropperjs
31
+ *
32
+ * Copyright 2015-present Chen Fengyuan
33
+ * Released under the MIT license
34
+ *
35
+ * Date: 2022-11-20T05:30:46.114Z
36
+ */var t,e;t=window,e=function(){function ownKeys(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,a)}return i}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(i),!0).forEach((function(e){_defineProperty(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):ownKeys(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function _typeof(t){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},_typeof(t)}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function _defineProperty(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function _toConsumableArray(t){return function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}(t)||function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?_arrayLikeToArray(t,e):void 0}}(t)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,a=new Array(e);i<e;i++)a[i]=t[i];return a}var t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{},i=!(!t||!e.document.documentElement)&&"ontouchstart"in e.document.documentElement,a=!!t&&"PointerEvent"in e,n="cropper",o="all",r="crop",s="move",h="zoom",l="e",c="w",d="s",p="n",u="ne",m="nw",g="se",f="sw",v="".concat(n,"-crop"),y="".concat(n,"-disabled"),w="".concat(n,"-hidden"),x="".concat(n,"-hide"),b="".concat(n,"-invisible"),C="".concat(n,"-modal"),L="".concat(n,"-move"),S="".concat(n,"Action"),k="".concat(n,"Preview"),D="crop",E="move",M="none",R="crop",I="cropend",T="cropmove",N="cropstart",B="dblclick",A=a?"pointerdown":i?"touchstart":"mousedown",O=a?"pointermove":i?"touchmove":"mousemove",_=a?"pointerup pointercancel":i?"touchend touchcancel":"mouseup",z="ready",W="resize",P="wheel",F="zoom",H="image/jpeg",j=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,U=/^data:/,X=/^data:image\/jpeg;base64,/,Y=/^img|canvas$/i,q={viewMode:0,dragMode:D,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},$=Number.isNaN||e.isNaN;function isNumber(t){return"number"==typeof t&&!$(t)}var G=function isPositiveNumber(t){return t>0&&t<1/0};function isUndefined(t){return void 0===t}function isObject(t){return"object"===_typeof(t)&&null!==t}var K=Object.prototype.hasOwnProperty;function isPlainObject(t){if(!isObject(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&K.call(i,"isPrototypeOf")}catch(t){return!1}}function isFunction(t){return"function"==typeof t}var Z=Array.prototype.slice;function toArray(t){return Array.from?Array.from(t):Z.call(t)}function forEach(t,e){return t&&isFunction(e)&&(Array.isArray(t)||isNumber(t.length)?toArray(t).forEach((function(i,a){e.call(t,i,a,t)})):isObject(t)&&Object.keys(t).forEach((function(i){e.call(t,t[i],i,t)}))),t}var V=Object.assign||function assign(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),a=1;a<e;a++)i[a-1]=arguments[a];return isObject(t)&&i.length>0&&i.forEach((function(e){isObject(e)&&Object.keys(e).forEach((function(i){t[i]=e[i]}))})),t},Q=/\.\d*(?:0|9){12}\d*$/;function normalizeDecimalNumber(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1e11;return Q.test(t)?Math.round(t*e)/e:t}var J=/^width|height|left|top|marginLeft|marginTop$/;function setStyle(t,e){var i=t.style;forEach(e,(function(t,e){J.test(e)&&isNumber(t)&&(t="".concat(t,"px")),i[e]=t}))}function addClass(t,e){if(e)if(isNumber(t.length))forEach(t,(function(t){addClass(t,e)}));else if(t.classList)t.classList.add(e);else{var i=t.className.trim();i?i.indexOf(e)<0&&(t.className="".concat(i," ").concat(e)):t.className=e}}function removeClass(t,e){e&&(isNumber(t.length)?forEach(t,(function(t){removeClass(t,e)})):t.classList?t.classList.remove(e):t.className.indexOf(e)>=0&&(t.className=t.className.replace(e,"")))}function toggleClass(t,e,i){e&&(isNumber(t.length)?forEach(t,(function(t){toggleClass(t,e,i)})):i?addClass(t,e):removeClass(t,e))}var tt=/([a-z\d])([A-Z])/g;function toParamCase(t){return t.replace(tt,"$1-$2").toLowerCase()}function getData(t,e){return isObject(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-".concat(toParamCase(e)))}function setData(t,e,i){isObject(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-".concat(toParamCase(e)),i)}var et=/\s\s*/,it=function(){var i=!1;if(t){var a=!1,n=function listener(){},o=Object.defineProperty({},"once",{get:function get(){return i=!0,a},set:function set(t){a=t}});e.addEventListener("test",n,o),e.removeEventListener("test",n,o)}return i}();function removeListener(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=i;e.trim().split(et).forEach((function(e){if(!it){var o=t.listeners;o&&o[e]&&o[e][i]&&(n=o[e][i],delete o[e][i],0===Object.keys(o[e]).length&&delete o[e],0===Object.keys(o).length&&delete t.listeners)}t.removeEventListener(e,n,a)}))}function addListener(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=i;e.trim().split(et).forEach((function(e){if(a.once&&!it){var o=t.listeners,r=void 0===o?{}:o;n=function handler(){delete r[e][i],t.removeEventListener(e,n,a);for(var o=arguments.length,s=new Array(o),h=0;h<o;h++)s[h]=arguments[h];i.apply(t,s)},r[e]||(r[e]={}),r[e][i]&&t.removeEventListener(e,r[e][i],a),r[e][i]=n,t.listeners=r}t.addEventListener(e,n,a)}))}function dispatchEvent(t,e,i){var a;return isFunction(Event)&&isFunction(CustomEvent)?a=new CustomEvent(e,{detail:i,bubbles:!0,cancelable:!0}):(a=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i),t.dispatchEvent(a)}function getOffset(t){var e=t.getBoundingClientRect();return{left:e.left+(window.pageXOffset-document.documentElement.clientLeft),top:e.top+(window.pageYOffset-document.documentElement.clientTop)}}var at=e.location,nt=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function isCrossOriginURL(t){var e=t.match(nt);return null!==e&&(e[1]!==at.protocol||e[2]!==at.hostname||e[3]!==at.port)}function addTimestamp(t){var e="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+e}function getTransforms(t){var e=t.rotate,i=t.scaleX,a=t.scaleY,n=t.translateX,o=t.translateY,r=[];isNumber(n)&&0!==n&&r.push("translateX(".concat(n,"px)")),isNumber(o)&&0!==o&&r.push("translateY(".concat(o,"px)")),isNumber(e)&&0!==e&&r.push("rotate(".concat(e,"deg)")),isNumber(i)&&1!==i&&r.push("scaleX(".concat(i,")")),isNumber(a)&&1!==a&&r.push("scaleY(".concat(a,")"));var s=r.length?r.join(" "):"none";return{WebkitTransform:s,msTransform:s,transform:s}}function getPointer(t,e){var i=t.pageX,a=t.pageY,n={endX:i,endY:a};return e?n:_objectSpread2({startX:i,startY:a},n)}function getAdjustedSizes(t){var e=t.aspectRatio,i=t.height,a=t.width,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"contain",o=G(a),r=G(i);if(o&&r){var s=i*e;"contain"===n&&s>a||"cover"===n&&s<a?i=a/e:a=i*e}else o?i=a/e:r&&(a=i*e);return{width:a,height:i}}var ot=String.fromCharCode,rt=/^data:.*,/;function resetAndGetOrientation(t){var e,i=new DataView(t);try{var a,n,o;if(255===i.getUint8(0)&&216===i.getUint8(1))for(var r=i.byteLength,s=2;s+1<r;){if(255===i.getUint8(s)&&225===i.getUint8(s+1)){n=s;break}s+=1}if(n){var h=n+10;if("Exif"===function getStringFromCharCode(t,e,i){var a="";i+=e;for(var n=e;n<i;n+=1)a+=ot(t.getUint8(n));return a}(i,n+4,4)){var l=i.getUint16(h);if(((a=18761===l)||19789===l)&&42===i.getUint16(h+2,a)){var c=i.getUint32(h+4,a);c>=8&&(o=h+c)}}}if(o){var d,p,u=i.getUint16(o,a);for(p=0;p<u;p+=1)if(d=o+12*p+2,274===i.getUint16(d,a)){d+=8,e=i.getUint16(d,a),i.setUint16(d,1,a);break}}}catch(t){e=1}return e}var st={render:function render(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function initContainer(){var t=this.element,e=this.options,i=this.container,a=this.cropper,n=Number(e.minContainerWidth),o=Number(e.minContainerHeight);addClass(a,w),removeClass(t,w);var r={width:Math.max(i.offsetWidth,n>=0?n:200),height:Math.max(i.offsetHeight,o>=0?o:100)};this.containerData=r,setStyle(a,{width:r.width,height:r.height}),addClass(t,w),removeClass(a,w)},initCanvas:function initCanvas(){var t=this.containerData,e=this.imageData,i=this.options.viewMode,a=Math.abs(e.rotate)%180==90,n=a?e.naturalHeight:e.naturalWidth,o=a?e.naturalWidth:e.naturalHeight,r=n/o,s=t.width,h=t.height;t.height*r>t.width?3===i?s=t.height*r:h=t.width/r:3===i?h=t.width/r:s=t.height*r;var l={aspectRatio:r,naturalWidth:n,naturalHeight:o,width:s,height:h};this.canvasData=l,this.limited=1===i||2===i,this.limitCanvas(!0,!0),l.width=Math.min(Math.max(l.width,l.minWidth),l.maxWidth),l.height=Math.min(Math.max(l.height,l.minHeight),l.maxHeight),l.left=(t.width-l.width)/2,l.top=(t.height-l.height)/2,l.oldLeft=l.left,l.oldTop=l.top,this.initialCanvasData=V({},l)},limitCanvas:function limitCanvas(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,r=i.viewMode,s=n.aspectRatio,h=this.cropped&&o;if(t){var l=Number(i.minCanvasWidth)||0,c=Number(i.minCanvasHeight)||0;r>1?(l=Math.max(l,a.width),c=Math.max(c,a.height),3===r&&(c*s>l?l=c*s:c=l/s)):r>0&&(l?l=Math.max(l,h?o.width:0):c?c=Math.max(c,h?o.height:0):h&&(l=o.width,(c=o.height)*s>l?l=c*s:c=l/s));var d=getAdjustedSizes({aspectRatio:s,width:l,height:c});l=d.width,c=d.height,n.minWidth=l,n.minHeight=c,n.maxWidth=1/0,n.maxHeight=1/0}if(e)if(r>(h?0:1)){var p=a.width-n.width,u=a.height-n.height;n.minLeft=Math.min(0,p),n.minTop=Math.min(0,u),n.maxLeft=Math.max(0,p),n.maxTop=Math.max(0,u),h&&this.limited&&(n.minLeft=Math.min(o.left,o.left+(o.width-n.width)),n.minTop=Math.min(o.top,o.top+(o.height-n.height)),n.maxLeft=o.left,n.maxTop=o.top,2===r&&(n.width>=a.width&&(n.minLeft=Math.min(0,p),n.maxLeft=Math.max(0,p)),n.height>=a.height&&(n.minTop=Math.min(0,u),n.maxTop=Math.max(0,u))))}else n.minLeft=-n.width,n.minTop=-n.height,n.maxLeft=a.width,n.maxTop=a.height},renderCanvas:function renderCanvas(t,e){var i=this.canvasData,a=this.imageData;if(e){var n=function getRotatedSizes(t){var e=t.width,i=t.height,a=t.degree;if(90==(a=Math.abs(a)%180))return{width:i,height:e};var n=a%90*Math.PI/180,o=Math.sin(n),r=Math.cos(n),s=e*r+i*o,h=e*o+i*r;return a>90?{width:h,height:s}:{width:s,height:h}}({width:a.naturalWidth*Math.abs(a.scaleX||1),height:a.naturalHeight*Math.abs(a.scaleY||1),degree:a.rotate||0}),o=n.width,r=n.height,s=i.width*(o/i.naturalWidth),h=i.height*(r/i.naturalHeight);i.left-=(s-i.width)/2,i.top-=(h-i.height)/2,i.width=s,i.height=h,i.aspectRatio=o/r,i.naturalWidth=o,i.naturalHeight=r,this.limitCanvas(!0,!1)}(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCanvas(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,setStyle(this.canvas,V({width:i.width,height:i.height},getTransforms({translateX:i.left,translateY:i.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function renderImage(t){var e=this.canvasData,i=this.imageData,a=i.naturalWidth*(e.width/e.naturalWidth),n=i.naturalHeight*(e.height/e.naturalHeight);V(i,{width:a,height:n,left:(e.width-a)/2,top:(e.height-n)/2}),setStyle(this.image,V({width:i.width,height:i.height},getTransforms(V({translateX:i.left,translateY:i.top},i)))),t&&this.output()},initCropBox:function initCropBox(){var t=this.options,e=this.canvasData,i=t.aspectRatio||t.initialAspectRatio,a=Number(t.autoCropArea)||.8,n={width:e.width,height:e.height};i&&(e.height*i>e.width?n.height=n.width/i:n.width=n.height*i),this.cropBoxData=n,this.limitCropBox(!0,!0),n.width=Math.min(Math.max(n.width,n.minWidth),n.maxWidth),n.height=Math.min(Math.max(n.height,n.minHeight),n.maxHeight),n.width=Math.max(n.minWidth,n.width*a),n.height=Math.max(n.minHeight,n.height*a),n.left=e.left+(e.width-n.width)/2,n.top=e.top+(e.height-n.height)/2,n.oldLeft=n.left,n.oldTop=n.top,this.initialCropBoxData=V({},n)},limitCropBox:function limitCropBox(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,r=this.limited,s=i.aspectRatio;if(t){var h=Number(i.minCropBoxWidth)||0,l=Number(i.minCropBoxHeight)||0,c=r?Math.min(a.width,n.width,n.width+n.left,a.width-n.left):a.width,d=r?Math.min(a.height,n.height,n.height+n.top,a.height-n.top):a.height;h=Math.min(h,a.width),l=Math.min(l,a.height),s&&(h&&l?l*s>h?l=h/s:h=l*s:h?l=h/s:l&&(h=l*s),d*s>c?d=c/s:c=d*s),o.minWidth=Math.min(h,c),o.minHeight=Math.min(l,d),o.maxWidth=c,o.maxHeight=d}e&&(r?(o.minLeft=Math.max(0,n.left),o.minTop=Math.max(0,n.top),o.maxLeft=Math.min(a.width,n.left+n.width)-o.width,o.maxTop=Math.min(a.height,n.top+n.height)-o.height):(o.minLeft=0,o.minTop=0,o.maxLeft=a.width-o.width,o.maxTop=a.height-o.height))},renderCropBox:function renderCropBox(){var t=this.options,e=this.containerData,i=this.cropBoxData;(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCropBox(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,t.movable&&t.cropBoxMovable&&setData(this.face,S,i.width>=e.width&&i.height>=e.height?s:o),setStyle(this.cropBox,V({width:i.width,height:i.height},getTransforms({translateX:i.left,translateY:i.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function output(){this.preview(),dispatchEvent(this.element,R,this.getData())}},ht={initPreview:function initPreview(){var t=this.element,e=this.crossOrigin,i=this.options.preview,a=e?this.crossOriginUrl:this.url,n=t.alt||"The image to preview",o=document.createElement("img");if(e&&(o.crossOrigin=e),o.src=a,o.alt=n,this.viewBox.appendChild(o),this.viewBoxImage=o,i){var r=i;"string"==typeof i?r=t.ownerDocument.querySelectorAll(i):i.querySelector&&(r=[i]),this.previews=r,forEach(r,(function(t){var i=document.createElement("img");setData(t,k,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),e&&(i.crossOrigin=e),i.src=a,i.alt=n,i.style.cssText='display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"',t.innerHTML="",t.appendChild(i)}))}},resetPreview:function resetPreview(){forEach(this.previews,(function(t){var e=getData(t,k);setStyle(t,{width:e.width,height:e.height}),t.innerHTML=e.html,function removeData(t,e){if(isObject(t[e]))try{delete t[e]}catch(i){t[e]=void 0}else if(t.dataset)try{delete t.dataset[e]}catch(i){t.dataset[e]=void 0}else t.removeAttribute("data-".concat(toParamCase(e)))}(t,k)}))},preview:function preview(){var t=this.imageData,e=this.canvasData,i=this.cropBoxData,a=i.width,n=i.height,o=t.width,r=t.height,s=i.left-e.left-t.left,h=i.top-e.top-t.top;this.cropped&&!this.disabled&&(setStyle(this.viewBoxImage,V({width:o,height:r},getTransforms(V({translateX:-s,translateY:-h},t)))),forEach(this.previews,(function(e){var i=getData(e,k),l=i.width,c=i.height,d=l,p=c,u=1;a&&(p=n*(u=l/a)),n&&p>c&&(d=a*(u=c/n),p=c),setStyle(e,{width:d,height:p}),setStyle(e.getElementsByTagName("img")[0],V({width:o*u,height:r*u},getTransforms(V({translateX:-s*u,translateY:-h*u},t))))})))}},lt={bind:function bind(){var t=this.element,e=this.options,i=this.cropper;isFunction(e.cropstart)&&addListener(t,N,e.cropstart),isFunction(e.cropmove)&&addListener(t,T,e.cropmove),isFunction(e.cropend)&&addListener(t,I,e.cropend),isFunction(e.crop)&&addListener(t,R,e.crop),isFunction(e.zoom)&&addListener(t,F,e.zoom),addListener(i,A,this.onCropStart=this.cropStart.bind(this)),e.zoomable&&e.zoomOnWheel&&addListener(i,P,this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&addListener(i,B,this.onDblclick=this.dblclick.bind(this)),addListener(t.ownerDocument,O,this.onCropMove=this.cropMove.bind(this)),addListener(t.ownerDocument,_,this.onCropEnd=this.cropEnd.bind(this)),e.responsive&&addListener(window,W,this.onResize=this.resize.bind(this))},unbind:function unbind(){var t=this.element,e=this.options,i=this.cropper;isFunction(e.cropstart)&&removeListener(t,N,e.cropstart),isFunction(e.cropmove)&&removeListener(t,T,e.cropmove),isFunction(e.cropend)&&removeListener(t,I,e.cropend),isFunction(e.crop)&&removeListener(t,R,e.crop),isFunction(e.zoom)&&removeListener(t,F,e.zoom),removeListener(i,A,this.onCropStart),e.zoomable&&e.zoomOnWheel&&removeListener(i,P,this.onWheel,{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&removeListener(i,B,this.onDblclick),removeListener(t.ownerDocument,O,this.onCropMove),removeListener(t.ownerDocument,_,this.onCropEnd),e.responsive&&removeListener(window,W,this.onResize)}},ct={resize:function resize(){if(!this.disabled){var t,e,i=this.options,a=this.container,n=this.containerData,o=a.offsetWidth/n.width,r=a.offsetHeight/n.height,s=Math.abs(o-1)>Math.abs(r-1)?o:r;1!==s&&(i.restore&&(t=this.getCanvasData(),e=this.getCropBoxData()),this.render(),i.restore&&(this.setCanvasData(forEach(t,(function(e,i){t[i]=e*s}))),this.setCropBoxData(forEach(e,(function(t,i){e[i]=t*s})))))}},dblclick:function dblclick(){this.disabled||this.options.dragMode===M||this.setDragMode(function hasClass(t,e){return t.classList?t.classList.contains(e):t.className.indexOf(e)>-1}(this.dragBox,v)?E:D)},wheel:function wheel(t){var e=this,i=Number(this.options.wheelZoomRatio)||.1,a=1;this.disabled||(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout((function(){e.wheeling=!1}),50),t.deltaY?a=t.deltaY>0?1:-1:t.wheelDelta?a=-t.wheelDelta/120:t.detail&&(a=t.detail>0?1:-1),this.zoom(-a*i,t)))},cropStart:function cropStart(t){var e=t.buttons,i=t.button;if(!(this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(isNumber(e)&&1!==e||isNumber(i)&&0!==i||t.ctrlKey))){var a,n=this.options,o=this.pointers;t.changedTouches?forEach(t.changedTouches,(function(t){o[t.identifier]=getPointer(t)})):o[t.pointerId||0]=getPointer(t),a=Object.keys(o).length>1&&n.zoomable&&n.zoomOnTouch?h:getData(t.target,S),j.test(a)&&!1!==dispatchEvent(this.element,N,{originalEvent:t,action:a})&&(t.preventDefault(),this.action=a,this.cropping=!1,a===r&&(this.cropping=!0,addClass(this.dragBox,C)))}},cropMove:function cropMove(t){var e=this.action;if(!this.disabled&&e){var i=this.pointers;t.preventDefault(),!1!==dispatchEvent(this.element,T,{originalEvent:t,action:e})&&(t.changedTouches?forEach(t.changedTouches,(function(t){V(i[t.identifier]||{},getPointer(t,!0))})):V(i[t.pointerId||0]||{},getPointer(t,!0)),this.change(t))}},cropEnd:function cropEnd(t){if(!this.disabled){var e=this.action,i=this.pointers;t.changedTouches?forEach(t.changedTouches,(function(t){delete i[t.identifier]})):delete i[t.pointerId||0],e&&(t.preventDefault(),Object.keys(i).length||(this.action=""),this.cropping&&(this.cropping=!1,toggleClass(this.dragBox,C,this.cropped&&this.options.modal)),dispatchEvent(this.element,I,{originalEvent:t,action:e}))}}},dt={change:function change(t){var e,i=this.options,a=this.canvasData,n=this.containerData,v=this.cropBoxData,y=this.pointers,x=this.action,b=i.aspectRatio,C=v.left,L=v.top,S=v.width,k=v.height,D=C+S,E=L+k,M=0,R=0,I=n.width,T=n.height,N=!0;!b&&t.shiftKey&&(b=S&&k?S/k:1),this.limited&&(M=v.minLeft,R=v.minTop,I=M+Math.min(n.width,a.width,a.left+a.width),T=R+Math.min(n.height,a.height,a.top+a.height));var B=y[Object.keys(y)[0]],A={x:B.endX-B.startX,y:B.endY-B.startY},O=function check(t){switch(t){case l:D+A.x>I&&(A.x=I-D);break;case c:C+A.x<M&&(A.x=M-C);break;case p:L+A.y<R&&(A.y=R-L);break;case d:E+A.y>T&&(A.y=T-E)}};switch(x){case o:C+=A.x,L+=A.y;break;case l:if(A.x>=0&&(D>=I||b&&(L<=R||E>=T))){N=!1;break}O(l),(S+=A.x)<0&&(x=c,C-=S=-S),b&&(k=S/b,L+=(v.height-k)/2);break;case p:if(A.y<=0&&(L<=R||b&&(C<=M||D>=I))){N=!1;break}O(p),k-=A.y,L+=A.y,k<0&&(x=d,L-=k=-k),b&&(S=k*b,C+=(v.width-S)/2);break;case c:if(A.x<=0&&(C<=M||b&&(L<=R||E>=T))){N=!1;break}O(c),S-=A.x,C+=A.x,S<0&&(x=l,C-=S=-S),b&&(k=S/b,L+=(v.height-k)/2);break;case d:if(A.y>=0&&(E>=T||b&&(C<=M||D>=I))){N=!1;break}O(d),(k+=A.y)<0&&(x=p,L-=k=-k),b&&(S=k*b,C+=(v.width-S)/2);break;case u:if(b){if(A.y<=0&&(L<=R||D>=I)){N=!1;break}O(p),k-=A.y,L+=A.y,S=k*b}else O(p),O(l),A.x>=0?D<I?S+=A.x:A.y<=0&&L<=R&&(N=!1):S+=A.x,A.y<=0?L>R&&(k-=A.y,L+=A.y):(k-=A.y,L+=A.y);S<0&&k<0?(x=f,L-=k=-k,C-=S=-S):S<0?(x=m,C-=S=-S):k<0&&(x=g,L-=k=-k);break;case m:if(b){if(A.y<=0&&(L<=R||C<=M)){N=!1;break}O(p),k-=A.y,L+=A.y,S=k*b,C+=v.width-S}else O(p),O(c),A.x<=0?C>M?(S-=A.x,C+=A.x):A.y<=0&&L<=R&&(N=!1):(S-=A.x,C+=A.x),A.y<=0?L>R&&(k-=A.y,L+=A.y):(k-=A.y,L+=A.y);S<0&&k<0?(x=g,L-=k=-k,C-=S=-S):S<0?(x=u,C-=S=-S):k<0&&(x=f,L-=k=-k);break;case f:if(b){if(A.x<=0&&(C<=M||E>=T)){N=!1;break}O(c),S-=A.x,C+=A.x,k=S/b}else O(d),O(c),A.x<=0?C>M?(S-=A.x,C+=A.x):A.y>=0&&E>=T&&(N=!1):(S-=A.x,C+=A.x),A.y>=0?E<T&&(k+=A.y):k+=A.y;S<0&&k<0?(x=u,L-=k=-k,C-=S=-S):S<0?(x=g,C-=S=-S):k<0&&(x=m,L-=k=-k);break;case g:if(b){if(A.x>=0&&(D>=I||E>=T)){N=!1;break}O(l),k=(S+=A.x)/b}else O(d),O(l),A.x>=0?D<I?S+=A.x:A.y>=0&&E>=T&&(N=!1):S+=A.x,A.y>=0?E<T&&(k+=A.y):k+=A.y;S<0&&k<0?(x=m,L-=k=-k,C-=S=-S):S<0?(x=f,C-=S=-S):k<0&&(x=u,L-=k=-k);break;case s:this.move(A.x,A.y),N=!1;break;case h:this.zoom(function getMaxZoomRatio(t){var e=_objectSpread2({},t),i=0;return forEach(t,(function(t,a){delete e[a],forEach(e,(function(e){var a=Math.abs(t.startX-e.startX),n=Math.abs(t.startY-e.startY),o=Math.abs(t.endX-e.endX),r=Math.abs(t.endY-e.endY),s=Math.sqrt(a*a+n*n),h=(Math.sqrt(o*o+r*r)-s)/s;Math.abs(h)>Math.abs(i)&&(i=h)}))})),i}(y),t),N=!1;break;case r:if(!A.x||!A.y){N=!1;break}e=getOffset(this.cropper),C=B.startX-e.left,L=B.startY-e.top,S=v.minWidth,k=v.minHeight,A.x>0?x=A.y>0?g:u:A.x<0&&(C-=S,x=A.y>0?f:m),A.y<0&&(L-=k),this.cropped||(removeClass(this.cropBox,w),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))}N&&(v.width=S,v.height=k,v.left=C,v.top=L,this.action=x,this.renderCropBox()),forEach(y,(function(t){t.startX=t.endX,t.startY=t.endY}))}},pt={crop:function crop(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&addClass(this.dragBox,C),removeClass(this.cropBox,w),this.setCropBoxData(this.initialCropBoxData)),this},reset:function reset(){return this.ready&&!this.disabled&&(this.imageData=V({},this.initialImageData),this.canvasData=V({},this.initialCanvasData),this.cropBoxData=V({},this.initialCropBoxData),this.renderCanvas(),this.cropped&&this.renderCropBox()),this},clear:function clear(){return this.cropped&&!this.disabled&&(V(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),removeClass(this.dragBox,C),addClass(this.cropBox,w)),this},replace:function replace(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!this.disabled&&t&&(this.isImg&&(this.element.src=t),e?(this.url=t,this.image.src=t,this.ready&&(this.viewBoxImage.src=t,forEach(this.previews,(function(e){e.getElementsByTagName("img")[0].src=t})))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(t))),this},enable:function enable(){return this.ready&&this.disabled&&(this.disabled=!1,removeClass(this.cropper,y)),this},disable:function disable(){return this.ready&&!this.disabled&&(this.disabled=!0,addClass(this.cropper,y)),this},destroy:function destroy(){var t=this.element;return t[n]?(t[n]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate(),this):this},move:function move(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=i.left,n=i.top;return this.moveTo(isUndefined(t)?t:a+Number(t),isUndefined(e)?e:n+Number(e))},moveTo:function moveTo(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.movable&&(isNumber(t)&&(i.left=t,a=!0),isNumber(e)&&(i.top=e,a=!0),a&&this.renderCanvas(!0)),this},zoom:function zoom(t,e){var i=this.canvasData;return t=(t=Number(t))<0?1/(1-t):1+t,this.zoomTo(i.width*t/i.naturalWidth,null,e)},zoomTo:function zoomTo(t,e,i){var a=this.options,n=this.canvasData,o=n.width,r=n.height,s=n.naturalWidth,h=n.naturalHeight;if((t=Number(t))>=0&&this.ready&&!this.disabled&&a.zoomable){var l=s*t,c=h*t;if(i){var d=this.pointers,p=getOffset(this.cropper),u=d&&Object.keys(d).length?function getPointersCenter(t){var e=0,i=0,a=0;return forEach(t,(function(t){var n=t.startX,o=t.startY;e+=n,i+=o,a+=1})),{pageX:e/=a,pageY:i/=a}}(d):{pageX:i.pageX,pageY:i.pageY};n.left-=(l-o)*((u.pageX-p.left-n.left)/o),n.top-=(c-r)*((u.pageY-p.top-n.top)/r)}else isPlainObject(e)&&isNumber(e.x)&&isNumber(e.y)?(n.left-=(l-o)*((e.x-n.left)/o),n.top-=(c-r)*((e.y-n.top)/r)):(n.left-=(l-o)/2,n.top-=(c-r)/2);if(n.width=l,n.height=c,this.renderCanvas(!0),!1===dispatchEvent(this.element,F,{ratio:t,oldRatio:o/s,originalEvent:i}))return this}return this},rotate:function rotate(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function rotateTo(t){return isNumber(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function scaleX(t){var e=this.imageData.scaleY;return this.scale(t,isNumber(e)?e:1)},scaleY:function scaleY(t){var e=this.imageData.scaleX;return this.scale(isNumber(e)?e:1,t)},scale:function scale(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=this.imageData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.scalable&&(isNumber(t)&&(i.scaleX=t,a=!0),isNumber(e)&&(i.scaleY=e,a=!0),a&&this.renderCanvas(!0,!0)),this},getData:function getData(){var t,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],i=this.options,a=this.imageData,n=this.canvasData,o=this.cropBoxData;if(this.ready&&this.cropped){t={x:o.left-n.left,y:o.top-n.top,width:o.width,height:o.height};var r=a.width/a.naturalWidth;if(forEach(t,(function(e,i){t[i]=e/r})),e){var s=Math.round(t.y+t.height),h=Math.round(t.x+t.width);t.x=Math.round(t.x),t.y=Math.round(t.y),t.width=h-t.x,t.height=s-t.y}}else t={x:0,y:0,width:0,height:0};return i.rotatable&&(t.rotate=a.rotate||0),i.scalable&&(t.scaleX=a.scaleX||1,t.scaleY=a.scaleY||1),t},setData:function setData(t){var e=this.options,i=this.imageData,a=this.canvasData,n={};if(this.ready&&!this.disabled&&isPlainObject(t)){var o=!1;e.rotatable&&isNumber(t.rotate)&&t.rotate!==i.rotate&&(i.rotate=t.rotate,o=!0),e.scalable&&(isNumber(t.scaleX)&&t.scaleX!==i.scaleX&&(i.scaleX=t.scaleX,o=!0),isNumber(t.scaleY)&&t.scaleY!==i.scaleY&&(i.scaleY=t.scaleY,o=!0)),o&&this.renderCanvas(!0,!0);var r=i.width/i.naturalWidth;isNumber(t.x)&&(n.left=t.x*r+a.left),isNumber(t.y)&&(n.top=t.y*r+a.top),isNumber(t.width)&&(n.width=t.width*r),isNumber(t.height)&&(n.height=t.height*r),this.setCropBoxData(n)}return this},getContainerData:function getContainerData(){return this.ready?V({},this.containerData):{}},getImageData:function getImageData(){return this.sized?V({},this.imageData):{}},getCanvasData:function getCanvasData(){var t=this.canvasData,e={};return this.ready&&forEach(["left","top","width","height","naturalWidth","naturalHeight"],(function(i){e[i]=t[i]})),e},setCanvasData:function setCanvasData(t){var e=this.canvasData,i=e.aspectRatio;return this.ready&&!this.disabled&&isPlainObject(t)&&(isNumber(t.left)&&(e.left=t.left),isNumber(t.top)&&(e.top=t.top),isNumber(t.width)?(e.width=t.width,e.height=t.width/i):isNumber(t.height)&&(e.height=t.height,e.width=t.height*i),this.renderCanvas(!0)),this},getCropBoxData:function getCropBoxData(){var t,e=this.cropBoxData;return this.ready&&this.cropped&&(t={left:e.left,top:e.top,width:e.width,height:e.height}),t||{}},setCropBoxData:function setCropBoxData(t){var e,i,a=this.cropBoxData,n=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&isPlainObject(t)&&(isNumber(t.left)&&(a.left=t.left),isNumber(t.top)&&(a.top=t.top),isNumber(t.width)&&t.width!==a.width&&(e=!0,a.width=t.width),isNumber(t.height)&&t.height!==a.height&&(i=!0,a.height=t.height),n&&(e?a.height=a.width/n:i&&(a.width=a.height*n)),this.renderCropBox()),this},getCroppedCanvas:function getCroppedCanvas(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.ready||!window.HTMLCanvasElement)return null;var e=this.canvasData,i=function getSourceCanvas(t,e,i,a){var n=e.aspectRatio,o=e.naturalWidth,r=e.naturalHeight,s=e.rotate,h=void 0===s?0:s,l=e.scaleX,c=void 0===l?1:l,d=e.scaleY,p=void 0===d?1:d,u=i.aspectRatio,m=i.naturalWidth,g=i.naturalHeight,f=a.fillColor,v=void 0===f?"transparent":f,y=a.imageSmoothingEnabled,w=void 0===y||y,x=a.imageSmoothingQuality,b=void 0===x?"low":x,C=a.maxWidth,L=void 0===C?1/0:C,S=a.maxHeight,k=void 0===S?1/0:S,D=a.minWidth,E=void 0===D?0:D,M=a.minHeight,R=void 0===M?0:M,I=document.createElement("canvas"),T=I.getContext("2d"),N=getAdjustedSizes({aspectRatio:u,width:L,height:k}),B=getAdjustedSizes({aspectRatio:u,width:E,height:R},"cover"),A=Math.min(N.width,Math.max(B.width,m)),O=Math.min(N.height,Math.max(B.height,g)),_=getAdjustedSizes({aspectRatio:n,width:L,height:k}),z=getAdjustedSizes({aspectRatio:n,width:E,height:R},"cover"),W=Math.min(_.width,Math.max(z.width,o)),P=Math.min(_.height,Math.max(z.height,r)),F=[-W/2,-P/2,W,P];return I.width=normalizeDecimalNumber(A),I.height=normalizeDecimalNumber(O),T.fillStyle=v,T.fillRect(0,0,A,O),T.save(),T.translate(A/2,O/2),T.rotate(h*Math.PI/180),T.scale(c,p),T.imageSmoothingEnabled=w,T.imageSmoothingQuality=b,T.drawImage.apply(T,[t].concat(_toConsumableArray(F.map((function(t){return Math.floor(normalizeDecimalNumber(t))}))))),T.restore(),I}(this.image,this.imageData,e,t);if(!this.cropped)return i;var a=this.getData(),n=a.x,o=a.y,r=a.width,s=a.height,h=i.width/Math.floor(e.naturalWidth);1!==h&&(n*=h,o*=h,r*=h,s*=h);var l=r/s,c=getAdjustedSizes({aspectRatio:l,width:t.maxWidth||1/0,height:t.maxHeight||1/0}),d=getAdjustedSizes({aspectRatio:l,width:t.minWidth||0,height:t.minHeight||0},"cover"),p=getAdjustedSizes({aspectRatio:l,width:t.width||(1!==h?i.width:r),height:t.height||(1!==h?i.height:s)}),u=p.width,m=p.height;u=Math.min(c.width,Math.max(d.width,u)),m=Math.min(c.height,Math.max(d.height,m));var g=document.createElement("canvas"),f=g.getContext("2d");g.width=normalizeDecimalNumber(u),g.height=normalizeDecimalNumber(m),f.fillStyle=t.fillColor||"transparent",f.fillRect(0,0,u,m);var v=t.imageSmoothingEnabled,y=void 0===v||v,w=t.imageSmoothingQuality;f.imageSmoothingEnabled=y,w&&(f.imageSmoothingQuality=w);var x,b,C,L,S,k,D=i.width,E=i.height,M=n,R=o;M<=-r||M>D?(M=0,x=0,C=0,S=0):M<=0?(C=-M,M=0,S=x=Math.min(D,r+M)):M<=D&&(C=0,S=x=Math.min(r,D-M)),x<=0||R<=-s||R>E?(R=0,b=0,L=0,k=0):R<=0?(L=-R,R=0,k=b=Math.min(E,s+R)):R<=E&&(L=0,k=b=Math.min(s,E-R));var I=[M,R,x,b];if(S>0&&k>0){var T=u/r;I.push(C*T,L*T,S*T,k*T)}return f.drawImage.apply(f,[i].concat(_toConsumableArray(I.map((function(t){return Math.floor(normalizeDecimalNumber(t))}))))),g},setAspectRatio:function setAspectRatio(t){var e=this.options;return this.disabled||isUndefined(t)||(e.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped&&this.renderCropBox())),this},setDragMode:function setDragMode(t){var e=this.options,i=this.dragBox,a=this.face;if(this.ready&&!this.disabled){var n=t===D,o=e.movable&&t===E;t=n||o?t:M,e.dragMode=t,setData(i,S,t),toggleClass(i,v,n),toggleClass(i,L,o),e.cropBoxMovable||(setData(a,S,t),toggleClass(a,v,n),toggleClass(a,L,o))}return this}},ut=e.Cropper,mt=function(){function Cropper(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,Cropper),!t||!Y.test(t.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=t,this.options=V({},q,isPlainObject(e)&&e),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}return function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}(Cropper,[{key:"init",value:function init(){var t,e=this.element,i=e.tagName.toLowerCase();if(!e[n]){if(e[n]=this,"img"===i){if(this.isImg=!0,t=e.getAttribute("src")||"",this.originalUrl=t,!t)return;t=e.src}else"canvas"===i&&window.HTMLCanvasElement&&(t=e.toDataURL());this.load(t)}}},{key:"load",value:function load(t){var e=this;if(t){this.url=t,this.imageData={};var i=this.element,a=this.options;if(a.rotatable||a.scalable||(a.checkOrientation=!1),a.checkOrientation&&window.ArrayBuffer)if(U.test(t))X.test(t)?this.read(function dataURLToArrayBuffer(t){var e=t.replace(rt,""),i=atob(e),a=new ArrayBuffer(i.length),n=new Uint8Array(a);return forEach(n,(function(t,e){n[e]=i.charCodeAt(e)})),a}(t)):this.clone();else{var n=new XMLHttpRequest,o=this.clone.bind(this);this.reloading=!0,this.xhr=n,n.onabort=o,n.onerror=o,n.ontimeout=o,n.onprogress=function(){n.getResponseHeader("content-type")!==H&&n.abort()},n.onload=function(){e.read(n.response)},n.onloadend=function(){e.reloading=!1,e.xhr=null},a.checkCrossOrigin&&isCrossOriginURL(t)&&i.crossOrigin&&(t=addTimestamp(t)),n.open("GET",t,!0),n.responseType="arraybuffer",n.withCredentials="use-credentials"===i.crossOrigin,n.send()}else this.clone()}}},{key:"read",value:function read(t){var e=this.options,i=this.imageData,a=resetAndGetOrientation(t),n=0,o=1,r=1;if(a>1){this.url=function arrayBufferToDataURL(t,e){for(var i=[],a=new Uint8Array(t);a.length>0;)i.push(ot.apply(null,toArray(a.subarray(0,8192)))),a=a.subarray(8192);return"data:".concat(e,";base64,").concat(btoa(i.join("")))}(t,H);var s=function parseOrientation(t){var e=0,i=1,a=1;switch(t){case 2:i=-1;break;case 3:e=-180;break;case 4:a=-1;break;case 5:e=90,a=-1;break;case 6:e=90;break;case 7:e=90,i=-1;break;case 8:e=-90}return{rotate:e,scaleX:i,scaleY:a}}(a);n=s.rotate,o=s.scaleX,r=s.scaleY}e.rotatable&&(i.rotate=n),e.scalable&&(i.scaleX=o,i.scaleY=r),this.clone()}},{key:"clone",value:function clone(){var t=this.element,e=this.url,i=t.crossOrigin,a=e;this.options.checkCrossOrigin&&isCrossOriginURL(e)&&(i||(i="anonymous"),a=addTimestamp(e)),this.crossOrigin=i,this.crossOriginUrl=a;var n=document.createElement("img");i&&(n.crossOrigin=i),n.src=a||e,n.alt=t.alt||"The image to crop",this.image=n,n.onload=this.start.bind(this),n.onerror=this.stop.bind(this),addClass(n,x),t.parentNode.insertBefore(n,t.nextSibling)}},{key:"start",value:function start(){var t=this,i=this.image;i.onload=null,i.onerror=null,this.sizing=!0;var a=e.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(e.navigator.userAgent),n=function done(e,i){V(t.imageData,{naturalWidth:e,naturalHeight:i,aspectRatio:e/i}),t.initialImageData=V({},t.imageData),t.sizing=!1,t.sized=!0,t.build()};if(!i.naturalWidth||a){var o=document.createElement("img"),r=document.body||document.documentElement;this.sizingImage=o,o.onload=function(){n(o.width,o.height),a||r.removeChild(o)},o.src=i.src,a||(o.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",r.appendChild(o))}else n(i.naturalWidth,i.naturalHeight)}},{key:"stop",value:function stop(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function build(){if(this.sized&&!this.ready){var t=this.element,e=this.options,i=this.image,a=t.parentNode,r=document.createElement("div");r.innerHTML='<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>';var s=r.querySelector(".".concat(n,"-container")),h=s.querySelector(".".concat(n,"-canvas")),l=s.querySelector(".".concat(n,"-drag-box")),c=s.querySelector(".".concat(n,"-crop-box")),d=c.querySelector(".".concat(n,"-face"));this.container=a,this.cropper=s,this.canvas=h,this.dragBox=l,this.cropBox=c,this.viewBox=s.querySelector(".".concat(n,"-view-box")),this.face=d,h.appendChild(i),addClass(t,w),a.insertBefore(s,t.nextSibling),removeClass(i,x),this.initPreview(),this.bind(),e.initialAspectRatio=Math.max(0,e.initialAspectRatio)||NaN,e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,addClass(c,w),e.guides||addClass(c.getElementsByClassName("".concat(n,"-dashed")),w),e.center||addClass(c.getElementsByClassName("".concat(n,"-center")),w),e.background&&addClass(s,"".concat(n,"-bg")),e.highlight||addClass(d,b),e.cropBoxMovable&&(addClass(d,L),setData(d,S,o)),e.cropBoxResizable||(addClass(c.getElementsByClassName("".concat(n,"-line")),w),addClass(c.getElementsByClassName("".concat(n,"-point")),w)),this.render(),this.ready=!0,this.setDragMode(e.dragMode),e.autoCrop&&this.crop(),this.setData(e.data),isFunction(e.ready)&&addListener(t,z,e.ready,{once:!0}),dispatchEvent(t,z)}}},{key:"unbuild",value:function unbuild(){if(this.ready){this.ready=!1,this.unbind(),this.resetPreview();var t=this.cropper.parentNode;t&&t.removeChild(this.cropper),removeClass(this.element,w)}}},{key:"uncreate",value:function uncreate(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}],[{key:"noConflict",value:function noConflict(){return window.Cropper=ut,Cropper}},{key:"setDefaults",value:function setDefaults(t){V(q,isPlainObject(t)&&t)}}]),Cropper}();return V(mt.prototype,st,ht,lt,ct,dt,pt),mt},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Cropper=e();class Raffaello_CanvasLayer{constructor(t,e,i="normal",a=null){this.canvas=document.createElement("canvas"),this.canvas.width=t,this.canvas.height=e,this.context=this.canvas.getContext("2d",{willReadFrequently:!0}),this.type=i,this.effect=a,this.drawInstructions=null,this.bounds={minX:null,minY:null,maxX:null,maxY:null},this.isDrawn=!1}draw(t){return this.drawInstructions=t,this.drawInstructions(),this.isDrawn=!0,this}drawText(t){if(!t.text)return void(this.bounds={minX:null,maxX:null,minY:null,maxY:null});let e;if(t.text instanceof HTMLInputElement||t.text instanceof HTMLTextAreaElement)e=t.text.value;else{if("string"!=typeof t.text)return console.log("Error on the drawText(), the text input is not a valid string."),void console.log(t.text);e=t.text}const i={fontKerningOptical:!1,fontLetterSpacing:0,textAlign:{horizontal:"left",vertical:"bottom"},textBaseline:"alphabetic",anchorPoint:"none",position:{max_width:0,max_width_rescale:!1,max_lines:0,ignore_empty_lines:!0,ignore_double_spaces:!0},bounds:[!0,!0]},a={...i,...t,textAlign:{...i.textAlign,...t.textAlign},bounds:{...i.bounds,...t.bounds},position:{...i.position,...t.position}};a.fontLineHeight=t.fontLineHeight||t.fontSize;let n=e.split("\n");!1!==a.position.ignore_empty_lines&&(n=n.filter((t=>t.trim().length>0))),n=n.map((t=>t.trim())),!1!==a.position.ignore_double_spaces&&(n=n.map((t=>t.replace(/\s+/g," ")))),this.context.font=`${a.fontSize}px ${a.fontFamily}`,this.context.letterSpacing=a.fontSize/100*a.fontLetterSpacing+"px",this.context.textAlign=a.textAlign.horizontal,this.context.textBaseline=a.textBaseline,this.context.fontKerning=a.fontKerningOptical?"auto":"normal";let o=n.reduce(((t,e)=>Math.max(t,this.context.measureText(e.replaceAll("§","")).actualBoundingBoxRight+this.context.measureText(e.replaceAll("§","")).actualBoundingBoxLeft)),0),r=1;if(a.position.max_width&&a.position.max_width_rescale)r=o>a.position.max_width?1/o*a.position.max_width:1;else if(a.position.max_width&&!a.position.max_width_rescale){let t=[];n.forEach((e=>{let i=e.split(" "),n="";i.forEach(((e,o)=>{let r=n+(n?" ":"")+e;this.context.measureText(r.replaceAll("§","")).width>a.position.max_width&&""!==n?(t.push(n),n=e):n=r,o===i.length-1&&t.push(n)}))})),n=t,o=n.reduce(((t,e)=>Math.max(t,this.context.measureText(e.replaceAll("§","")).actualBoundingBoxRight+this.context.measureText(e.replaceAll("§","")).actualBoundingBoxLeft)),0)}a.position.max_lines&&(n=n.slice(0,a.position.max_lines)),this.context.font=`${a.fontSize*r}px ${a.fontFamily}`,this.context.letterSpacing=a.fontSize*r/100*a.fontLetterSpacing+"px";let s=this.context.measureText("Lp");a.bounds&&(!a.bounds[0]&&a.bounds[1]?s=this.context.measureText("p"):a.bounds[0]&&!a.bounds[1]?s=this.context.measureText("L"):a.bounds[0]||a.bounds[1]||(s=this.context.measureText("x")));let h=0;switch(a.position.true_anchorPoint_x&&(this.context.textAlign="left",h=this.context.measureText("L").actualBoundingBoxLeft,this.context.textAlign=a.textAlign.horizontal),this.context.textAlign="left",a.anchorPoint){default:case"none":break;case"true":h=this.context.measureText(n[0].slice(0,1)).actualBoundingBoxLeft;break;case"L":h=this.context.measureText("L").actualBoundingBoxLeft}this.context.textAlign=a.textAlign.horizontal;let l=a.position.pos_x,c=a.position.pos_y+s.actualBoundingBoxDescent,d=l+o*r,p=a.position.pos_y-s.actualBoundingBoxAscent,u=a.fontLineHeight*r*(n.length-1);switch(a.textAlign.vertical){default:case"top":c+=u;break;case"center":c+=u/2,p-=u/2;break;case"bottom":p-=u}switch(a.textAlign.horizontal){default:case"left":break;case"center":l-=o*r/2,d-=o*r/2;break;case"right":l-=o*r,d-=o*r}if(this.bounds={minX:l,maxX:d,minY:p,maxY:c},a.background){"string"==typeof a.background&&(a.background={fill_color:a.background,round_radius:0});let t={top:0,right:0,left:0,bottom:0};a.background.margins&&(a.background.margins.top&&(t.top=a.background.margins.top),a.background.margins.bottom&&(t.bottom=a.background.margins.bottom),a.background.margins.left&&(t.left=a.background.margins.left),a.background.margins.right&&(t.right=a.background.margins.right));let e=this.bounds.minX-t.left,i=this.bounds.maxX-this.bounds.minX+t.right+t.left,n=this.bounds.minY-t.top,o=this.bounds.maxY-this.bounds.minY+t.top+t.bottom,r=0;a.background.round_radius&&(r=a.background.round_radius),this.context.fillStyle=a.background.fill_color,a.background.stroke&&(this.context.lineWidth=a.background.stroke.width||10,this.context.strokeStyle=a.background.stroke.color||"black"),this.context.beginPath(),this.context.roundRect(e,n,i,o,r),this.context.fill(),a.background.stroke&&this.context.stroke()}n.forEach(((t,e)=>{let i,o=a.position.pos_x+h;if("center"===a.textAlign.horizontal){this.context.textAlign="left",o-=(this.context.measureText(t.replaceAll("§","")).actualBoundingBoxRight+this.context.measureText(t.replaceAll("§","")).actualBoundingBoxLeft)/2}switch(a.textAlign.vertical){default:case"top":i=e*a.fontLineHeight*r;break;case"bottom":i=-(n.length-1-e)*a.fontLineHeight*r;break;case"center":i=-(n.length-1)*a.fontLineHeight*r/2+e*a.fontLineHeight*r}const s=t.replace(/§+$/,"").split("§");for(let t=0;t<s.length;t++){let e="right"===a.textAlign.horizontal?s.length-1-t:t,n=s[e];if(this.context.fillStyle=a.fontFillColor,a.highlight&&e%2==1){this.context.fillStyle=a.highlight.fontFillColor?a.highlight.fontFillColor:a.fontFillColor;let t=a.highlight.fontSize?a.highlight.fontSize:a.fontSize,e=a.highlight.fontFamily?a.highlight.fontFamily:a.fontFamily;this.context.font=`${t*r}px ${e}`,this.context.letterSpacing=a.highlight.fontLetterSpacing?t*r/100*a.highlight.fontLetterSpacing+"px":t*r/100*a.fontLetterSpacing+"px"}this.context.fillText(n,o,a.position.pos_y+i),o+=("right"===a.textAlign.horizontal?-1:1)*this.context.measureText(n).width}})),this.isDrawn=!0}drawImage(...t){let e,i,a,n;if(this.context.drawImage(...t),3===t.length){const[o,r,s]=t;e=r,i=s,a=r+o.width,n=s+o.height}else if(5===t.length){const[,,,o,r,s,h]=t;e=s,i=h,a=s+o,n=h+r}else if(9===t.length){const[,,,,,o,r,s,h]=t;e=o,i=r,a=o+s,n=r+h}this.bounds={minX:e,minY:i,maxX:a,maxY:n},this.context.filter="none",this.isDrawn=!0}drawImageInput(t,e,i){this.context.drawImage(t.config.rawImage,Math.round(t.config.cropInfo.x),Math.round(t.config.cropInfo.y),Math.round(t.config.cropInfo.width),Math.round(t.config.cropInfo.height),e,i,Math.round(t.config.width),Math.round(t.config.height))}drawRect(t){const e={...{x:0,y:0,width:this.canvas.width,height:this.canvas.height,color:"rgba(1,0,0,1)",radius:0},...t};this.context.fillStyle=e.color,this.context.fillRect(e.x,e.y,e.width,e.height)}drawStar(t){const e={x_center:0,y_center:0,spikes:5,color:"rgba(0,0,0,1)",outerRadius:100,innerRadius:150,...t};var i=Math.PI/2*3,a=e.x_center,n=e.y_center,o=Math.PI/e.spikes;this.context.beginPath(),this.context.moveTo(e.x_center,e.y_center-e.outerRadius);for(let t=0;t<e.spikes;t++)a=e.x_center+Math.cos(i)*e.outerRadius,n=e.y_center+Math.sin(i)*e.outerRadius,this.context.lineTo(a,n),i+=o,a=e.x_center+Math.cos(i)*e.innerRadius,n=e.y_center+Math.sin(i)*e.innerRadius,this.context.lineTo(a,n),i+=o;this.context.lineTo(e.x_center,e.y_center-e.outerRadius),this.context.closePath(),this.context.fillStyle=e.color,this.context.fill()}drawGradient(t){const e={x:0,y:0,width:100,height:100,direction:"DOWN",gradient:[[0,"rgba(0,0,0, 0)"],[1,"rgba(0,0,0, 1)"]],...t};if(!["UP","RIGHT","DOWN","LEFT"].includes(e.direction))throw new Error('Invalid direction value. It must be "UP", "RIGHT", "DOWN", or "LEFT".');let i,a,n,o;"UP"===e.direction?(i=e.x,a=e.y+e.height,n=e.x,o=e.y):"RIGHT"===e.direction?(i=e.x,a=e.y,n=e.x+e.width,o=e.y):"DOWN"===e.direction?(i=e.x,a=e.y,n=e.x,o=e.y+e.height):"LEFT"===e.direction&&(i=e.x+e.width,a=e.y,n=e.x,o=e.y);const r=this.context.createLinearGradient(i,a,n,o);for(let t=0;t<e.gradient.length;t++){let i=e.gradient[t][0],a=e.gradient[t][1];r.addColorStop(i,a)}this.context.fillStyle=r,this.context.fillRect(e.x,e.y,e.width,e.height)}prepareFilter(t){this.context.filter=t}applyFilter(t){this.context.filter=t,this.context.drawImage(this.canvas,0,0),this.context.filter="none"}applyLUT(t){t.isLoaded||console.log("LUT not loaded",t.name);const e=this.context.getImageData(0,0,this.canvas.width,this.canvas.height),i=e.data;for(let e=0;e<i.length;e+=4){const a=i[e]/255,n=i[e+1]/255,o=i[e+2]/255,[r,s,h]=apply3DLUT(a,n,o,t.lutData);i[e]=255*r,i[e+1]=255*s,i[e+2]=255*h}function apply3DLUT(t,e,i,{size:a,lut:n}){const o=a-1;return n[Math.min(Math.floor(t*o),o)+Math.min(Math.floor(e*o),o)*a+Math.min(Math.floor(i*o),o)*a*a]}this.context.putImageData(e,0,0)}update(){this.drawInstructions&&(this.clear(),this.drawInstructions())}clear(){this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.isDrawn=!1}}class Raffaello_ImageCropper{constructor(t,e){this.container=t,this.config=e,this.config.imageReady=!1,this.initDynamicElements(),this.initElements(),this.initCropper(),this.bindEvents(),this.initRatioSelect(),this.initWatermark(),this.filterValues={},this.initFilterControls()}initDynamicElements(){const t=this.container.querySelector(".raffaello-imageContainer");t.style.backgroundColor="rgb(51, 51, 51)";const e=document.createElement("input");e.type="file",e.className="raffaello-imageInput",e.accept="image/*",e.style.display="none",t.innerHTML+="\x3c!-- FILE INPUT --\x3e",t.appendChild(e);const i=document.createElement("div");i.className="raffaello-upload";const a=document.createElement("img");checkImageSrc("src/svg/upload.svg",(t=>{a.src=t?"src/svg/upload.svg":"raffaello/src/svg/upload.svg"})),a.className="icon",i.appendChild(a),t.innerHTML+="\x3c!-- UPLOAD INPUT --\x3e",t.appendChild(i);const n=document.createElement("div");n.className="raffaello-loading";const o=document.createElement("div");o.className="raffaello-loading-circle",n.appendChild(o),t.appendChild(n);const r=this.container.querySelector(".raffaello-imageFiltres");if(r){r.classList.add("flex-row"),r.style.gap="2px";const t=document.createElement("p");t.className="small-p-2 brightness-label",r.appendChild(t);const e=document.createElement("input");e.type="range",e.name="brightness",e.displayName="Luminosité",e.min="-100",e.max="100",e.value="20",r.appendChild(e);const i=document.createElement("p");i.className="small-p-2 contrast-label",r.appendChild(i);const a=document.createElement("input");a.type="range",a.name="contrast",a.displayName="Contraste",a.min="-100",a.max="100",a.value="20",r.appendChild(a);const n=document.createElement("p");n.className="small-p-2 saturate-label",r.appendChild(n);const o=document.createElement("input");o.type="range",o.name="saturate",o.displayName="Saturation",o.min="-100",o.max="100",o.value="20",r.appendChild(o)}const s=this.container.querySelector(".raffaello-cropperRestart");if(s){this.cropperRestart=s,s.classList.add("raffaello-restart"),s.style.display="none";const t=document.createElement("img");checkImageSrc("src/svg/restart.svg",(e=>{t.src=e?"src/svg/restart.svg":"raffaello/src/svg/restart.svg"})),t.className="icon",s.innerHTML+="\x3c!-- REFRESH SVG --\x3e",s.appendChild(t)}}initElements(){this.dropzone=this.container.querySelector(".raffaello-imageContainer"),this.imageInput=this.container.querySelector(".raffaello-imageInput"),this.upload=this.container.querySelector(".raffaello-upload"),this.loading=this.container.querySelector(".raffaello-loading"),this.cropperContainer=this.container.querySelector(".raffaello-cropperContainer")}initCropper(){this.cropper=new Cropper(this.cropperContainer,{aspectRatio:this.config.aspectRatio??this.config.width/this.config.height,viewMode:this.config.viewMode??2,autoCropArea:1,zoomOnWheel:this.config.zoomOnWheel??0,ready:()=>{this.applyFilters(),this.config.rawImage=this.cropperContainer,this.config.cropInfo=this.cropper.getData(),this.config.imageReady=!0,this.config.onImageReady?this.config.onImageReady():console.log(this.config)}})}bindEvents(){this.upload.addEventListener("click",(()=>{"INPUT"===this.imageInput.tagName&&"file"===this.imageInput.type||console.warn('Warning: this.imageInput is not an <input> element of type "file". Nothing should have a class "raffaello-imageInput"'),this.imageInput.click()})),this.imageInput.addEventListener("change",(t=>{this.loadSelectedImage(t)})),this.dropzone.addEventListener("dragover",(t=>t.preventDefault())),this.dropzone.addEventListener("drop",(t=>{t.preventDefault(),console.log("We have a drop");const e=t.dataTransfer.files[0];e.type.match(/^image\//)?this.loadSelectedImage({target:{files:[e]}}):console.log("Invalid file type. Only image files are allowed.")})),this.cropperContainer.addEventListener("crop",(t=>{this.config.cropInfo=this.cropper.getData()})),this.cropperRestart&&this.cropperRestart.addEventListener("click",(()=>{this.imageInput.click()})),this.config.onCrop&&this.cropperContainer.addEventListener("crop",this.config.onCrop),this.config.onCropStart&&this.cropperContainer.addEventListener("cropstart",this.config.onCropStart),this.config.onCropEnd&&this.cropperContainer.addEventListener("cropend",this.config.onCropEnd),this.config.onZoom&&this.cropperContainer.addEventListener("zoom",this.config.onZoom),void 0!==this.config.layerIndex&&void 0!==this.config.layerRef&&(this.config.onImageReady=()=>{this.config.layerRef.initiateDrawing()},this.config.onFilterChange=()=>{this.config.layerRef.canvas.updateLayers([this.config.layerIndex])},this.cropperContainer.addEventListener("onCrop",(()=>{})),this.cropperContainer.addEventListener("cropstart",(()=>{this.config.layerRef.canvas.previewContainer.style.opacity=.5})),this.cropperContainer.addEventListener("cropend",(()=>{this.config.layerRef.canvas.previewContainer.style.opacity=1,this.config.layerRef.canvas.updateLayers([this.config.layerIndex])})))}showBackInitialUI(){"none"==this.upload.style.display&&(this.upload.style.display="flex");const t=this.cropperRestart;t&&(t.style.display="none")}loadSelectedImage(t){return new Promise(((e,i)=>{const a=t.target.files[0];if(!a)return;"none"!==this.upload.style.display&&(this.upload.style.display="none"),"none"===this.loading.style.display&&(this.loading.style.display="flex");const n=this.cropperRestart;n&&(n.style.display="block");const o=new FileReader;o.addEventListener("load",(()=>{this.loading.style.display="none",this.container.querySelectorAll(".pending").forEach((t=>t.classList.remove("pending")));let t=a.name.split(".")[0];this.config.fileName=t,this.cropperContainer.src=o.result,this.cropper.replace(this.cropperContainer.src),e(t)})),o.readAsDataURL(a)}))}initRatioSelect(){this.imageRatioSelect=this.container.querySelector(".raffaello-imageRatioSelect"),this.imageRatioSelect&&this.imageRatioSelect.addEventListener("change",(()=>{const t=this.imageRatioSelect.options[this.imageRatioSelect.selectedIndex].dataset.width,e=this.imageRatioSelect.options[this.imageRatioSelect.selectedIndex].dataset.height;this.config.width=t,this.config.height=e;const i=t/e;this.cropper.setAspectRatio(i),this.watermarkSelect&&this.resetWatermarkList()}))}setNewSize(t,e){const i=t/e;this.cropper.setAspectRatio(i)}initWatermark(){this.watermarkDiv=this.container.querySelector(".raffaello-watermark"),this.watermarkDiv&&(this.watermarkDiv.classList.add("raffaello-canvas-to-overlay","icon"),""!==this.watermarkDiv.src&&this.watermarkDiv.src!==window.location.href||(this.watermarkDiv.style.display="none"),this.cropperContainer.addEventListener("crop",(()=>{this.updateWatermarkPositionAndSize()})),this.watermarkSelect=this.container.querySelector(".raffaello-watermarkSelect"),this.watermarkSelect&&this.watermarkSelect.addEventListener("change",(()=>{this.updateWatermark()})))}updateWatermark(){const t=this.watermarkSelect.options[this.watermarkSelect.selectedIndex].dataset.watermark;t?(this.watermarkDiv.src=t,this.watermarkDiv.style.display="block"):(this.watermarkDiv.src="",this.watermarkDiv.style.display="none"),this.updateWatermarkPositionAndSize()}updateWatermarkPositionAndSize(){const t=this.cropper.getCropBoxData();this.watermarkDiv.style.width=Math.ceil(t.width)+1+"px",this.watermarkDiv.style.height=Math.ceil(t.height)+1+"px",this.watermarkDiv.style.left=t.left-.5+"px",this.watermarkDiv.style.top=t.top-.5+"px"}resetWatermarkList(){this.watermarkSelect.selectedIndex=0,this.watermarkDiv.src="",this.watermarkDiv.style.display="none";const t=this.imageRatioSelect.options[this.imageRatioSelect.selectedIndex].dataset.ratio;for(let e=1;e<this.watermarkSelect.options.length;e++){const i=this.watermarkSelect.options[e];i.dataset.ratio===t?i.style.display="block":i.style.display="none"}}initFilterControls(){const t=this.container.querySelector(".raffaello-imageFiltres");if(t){t.querySelectorAll('input[type="range"]').forEach((t=>{const e=t.name||t.dataset.filter,i=t.displayName;this.filterValues[e]=t.value,this.updateFilterValue(e,i,t.value),t.addEventListener("input",(t=>{this.updateFilterValue(e,i,t.target.value),this.applyFilters()})),t.addEventListener("dblclick",(t=>{t.target.value=20,this.updateFilterValue(e,i,t.target.value),this.applyFilters()})),this.config.onFilterChange&&(t.addEventListener("input",this.config.onFilterChange),t.addEventListener("dblclick",this.config.onFilterChange))}))}}linear(t,e,i,a,n){return(t-e)/(i-e)*(n-a)+a}updateFilterValue(t,e,i){let a;a="brightness"===t?i<0?this.linear(i,-100,0,.8,1):this.linear(i,0,100,1,1.4):"contrast"===t?i<0?this.linear(i,-100,0,.9,1):this.linear(i,0,100,1,1.3):"saturate"===t?i<0?this.linear(i,-100,0,0,1):this.linear(i,0,100,1,1.3):i;let n=i,o=this.container.querySelector(`.${t}-label`);o&&(o.innerHTML=`${e.charAt(0).toUpperCase()+e.slice(1)} <i>(${n})</i>`),this.filterValues[t]=a}applyFilters(){let t=Object.entries(this.filterValues).map((([t,e])=>`${t}(${e})`)).join(" ");this.config.filter=t;const e=this.container.querySelector(".cropper-crop-box .cropper-view-box"),i=this.container.querySelector(".cropper-wrap-box div");e&&(e.style.filter=t),i&&(i.style.filter=t)}}function checkImageSrc(t,e){const i=new Image;i.onload=()=>e(!0),i.onerror=()=>e(!1),i.src=t}window.Raffaello_Canvas=class Raffaello_Canvas{constructor(t){if(this.width=t.width??1e3,this.height=t.height??1e3,this.cornerRadius=t.cornerRadius??0,this.previewContainer=t.previewContainer??null,this.nameInputContainer=t.nameInputContainer??null,this.previewQuality=t.previewQuality??"0.8",this.renderQuality=t.renderQuality??"0.96",this.layers=[],this.previewContainer){const e=window.getComputedStyle(this.previewContainer).backgroundColor;t.previewBackgroundColor?this.previewBackgroundColor=t.previewBackgroundColor:e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e&&(this.previewBackgroundColor=e)}}addLayer(t="normal",e=null){let i=new Raffaello_CanvasLayer(this.width,this.height,t,e);return this.layers.push(i),i}updateLayers(t){for(const e of t)this.layers[e]?this.layers[e].update():console.warn(`> updateLayers([${e}]): The canvas does not have a layer ${e}`);this.renderPreview()}resetLayers(){this.layers=[]}render(t=!1){let e=document.createElement("canvas");e.width=this.width,e.height=this.height;let i=e.getContext("2d");this.cornerRadius>0&&(i.save(),i.beginPath(),i.roundRect(0,0,e.width,e.height,this.cornerRadius),i.clip()),t&&null!=this.previewBackgroundColor&&(i.fillStyle=this.previewBackgroundColor,i.fillRect(0,0,e.width,e.height));for(let t=0;t<this.layers.length;t++){const e=this.layers[t],a=this.layers[t+1];let n=e.canvas;if("alpha"===a?.type){let t=document.createElement("canvas");t.width=this.width,t.height=this.height;let i=t.getContext("2d");i.drawImage(a.canvas,0,0),i.globalCompositeOperation="source-in",i.drawImage(e.canvas,0,0),i.globalCompositeOperation="source-over",n=t}["image","normal"].includes(e.type)&&i.drawImage(n,0,0),"effect"===e.type&&(i.globalCompositeOperation=e.effect,i.drawImage(n,0,0),i.globalCompositeOperation="source-over")}return this.cornerRadius>0&&i.restore(),e}renderPreview(){if(!this.previewContainer)return;const t=this.previewContainer;/iPad|iPhone|iPod/.test(navigator.userAgent)?t.src=this.render().toDataURL("image/jpeg",.9):t.src=this.render(!0).toDataURL("image/jpeg",this.previewQuality)}downloadImage(){const t=this.render();let e,i,a=this.nameInputContainer.value.trim(),n=a?a.split(".")[0].replace(/[^a-zA-Z0-9\_-]/g,""):"Image_Raffaello";switch(a.split(".").pop().toLowerCase()){case"jpg":case"jpeg":e="image/jpeg",i=".jpg";break;default:e="image/png",i=".png"}if(/iPad|iPhone|iPod/.test(navigator.userAgent))window.alert("Appuyez et maintenez l'image pour l'enregistrer.");else{const a=document.createElement("a");a.download=n+i,a.href=t.toDataURL(e,"image/jpeg"===e?this.renderQuality:void 0),document.body.appendChild(a),a.click(),document.body.removeChild(a)}}},window.Raffaello_CanvasLayer=Raffaello_CanvasLayer,window.Raffaello_ImageCropper=Raffaello_ImageCropper,window.Raffaello_BatchImageCropper=class Raffaello_BatchImageCropper{constructor(t,e){this.input=t,this.container=this.input.container,this.canvas=this.input.canvas,this.imageConfigs=e,this.imagesAreReady=e.map((t=>!0===t.isOptionnal)),this.inputImages=[],this.initializeCroppers()}initializeCroppers(){this.inputImages=this.imageConfigs.map(((t,e)=>new Raffaello_ImageCropper(this.container.querySelector(t.selector),{width:t.width,height:t.height,viewMode:t.viewMode??2,zoomOnWheel:t.zoomOnWheel??0,onImageReady:()=>{this.markImageAsReady(e)},onCropStart:()=>{this.canvas.previewContainer.style.opacity=.5},onCropEnd:()=>{this.canvas.previewContainer.style.opacity=1,this.canvas.updateLayers([t.layerIndex])},onZoom:()=>{this.canvas.updateLayers([t.layerIndex])},onFilterChange:()=>{this.canvas.updateLayers([t.layerIndex])}})))}markImageAsReady(t){this.imagesAreReady[t]=!0,this.checkImagesAreReady()}checkImagesAreReady(){this.imagesAreReady.every((t=>t))&&(this.removePendingState(),console.log("All images are ready, starting to draw..."),this.input.initiateDrawing())}removePendingState(){this.container.querySelectorAll(".pending").forEach((t=>t.classList.remove("pending")))}},window.Raffaello_Image=class Raffaello_Image{constructor(t){const e=t.url;this.img=new Image,this.img.src=e,this.isLoaded=!1,this.img.onload=()=>{this.isLoaded=!0,console.log(`✅ Image ${e.split("/").slice(-1)} loaded successfully.`)},this.img.onerror=()=>{console.error("❌ Failed to load image:",e)}}getImage(){return this.isLoaded?this.img:(console.warn("❌ Image not loaded yet."),null)}isLoaded(){return this.isLoaded}},window.Raffaello_Font=class Raffaello_Font{constructor(t){const e=t.name;this.font=new FontFace(e,`url(${t.url})`),this.isLoaded=!1;let i=this.font;document.fonts.add(i),i.load().then((()=>{this.isLoaded=!0,console.log(`✅ Font ${e} loaded successfully.`)})).catch((()=>{console.error("❌ Failed to load font:",e)}))}isLoaded(){return this.isLoaded}},window.Raffaello_LUT=class Raffaello_LUT{constructor(t){const e=t.url;this.lutData=null,this.isLoaded=!1,this.name=e.split("/").slice(-1),this.loadLUT(e).then((t=>{this.lutData=t,this.isLoaded=!0,console.log(`✅ LUT ${this.name} loaded successfully.`)})).catch((t=>{console.log(`❌ Failed to load LUT: ${e}`),console.error(t)}))}async loadLUT(t){try{const e=await fetch(t),i=(await e.text()).split("\n"),a=[];let n=0;for(const t of i)if(t.startsWith("LUT_3D_SIZE"))n=parseInt(t.split(" ")[1],10);else if(!t.startsWith("#")&&""!==t.trim()){const e=t.split(" ").map(Number);3===e.length&&a.push(e)}if(!n)throw new Error("Invalid LUT file.");return{size:n,lut:a}}catch(t){throw new Error(`Error parsing LUT file: ${t.message}`)}}getLUT(){return this.isLoaded?this.lutData:(console.warn("❌ LUT not loaded yet."),null)}isLUTLoaded(){return this.isLoaded}},window.Raffaello_FullScreen=class Raffaello_FullScreen{constructor(t){this.previewContainers=document.querySelectorAll(`.${t.previewContainer}`),this.fullScreenElement=null,this.isFullScreen=!1,this.previewContainers.length?(this.initializeFullScreen(),this.setupEventListeners()):console.error("RAFFAELLO - No preview containers found.")}initializeFullScreen(){this.fullScreenElement=document.createElement("div"),this.fullScreenElement.classList.add("raffaello-fullscreen-overlay"),this.fullScreenElement.style.position="fixed",this.fullScreenElement.style.top="0",this.fullScreenElement.style.left="0",this.fullScreenElement.style.width="100%",this.fullScreenElement.style.height="100%",this.fullScreenElement.style.padding="25px",this.fullScreenElement.style.backgroundColor="rgba(0, 0, 0, 0.9)",this.fullScreenElement.style.display="none",this.fullScreenElement.style.zIndex="9999",this.fullScreenElement.style.cursor="pointer",this.fullScreenElement.style.alignItems="center",this.fullScreenElement.style.justifyContent="center";const t=document.createElement("img");t.style.maxWidth="100%",t.style.maxHeight="100%",t.setAttribute("draggable","false"),t.addEventListener("dragstart",(function(t){t.preventDefault()})),t.addEventListener("contextmenu",(function(t){t.preventDefault()})),this.fullScreenElement.appendChild(t),document.body.appendChild(this.fullScreenElement)}toggleFullScreen(){this.isFullScreen=!this.isFullScreen,this.isFullScreen?(this.fullScreenElement.style.display="flex",document.body.style.overflow="hidden"):(this.fullScreenElement.style.display="none",document.body.style.overflow="auto")}setupEventListeners(){this.previewContainers.forEach((t=>{t.style.cursor="pointer",t.addEventListener("click",(()=>{const e=t.src;this.fullScreenElement.querySelector("img").src=e,this.toggleFullScreen()}))})),this.fullScreenElement.addEventListener("click",(()=>{this.toggleFullScreen()}))}},window.Raffaello_PersistentInputs=class Raffaello_PersistentInputs{constructor({inputs:t,timeout:e}){this.textareas=document.querySelectorAll(`.${t}`),this.timeout=e,this.textareas.length?this.init():console.error(`INFO: No element with class ${t}`)}init(){this.cleanupOldKeys(),this.textareas.forEach(((t,e)=>{const i=this.generateKey(e);this.loadAndValidateContent(t,i);const a=this.debounce((()=>this.saveContent(t,i)),500);t.addEventListener("input",a)}))}cleanupOldKeys(){for(let t=0;t<localStorage.length;t++){const e=localStorage.key(t);e&&e.startsWith("textareaContent_")&&localStorage.removeItem(e)}}generateKey(t){return`${window.location.pathname}_textareaContent_${this.timeout}_${t}`}loadAndValidateContent(t,e){const i=`${e}_timestamp`,a=localStorage.getItem(e),n=localStorage.getItem(i);if(a&&n){const o=Date.now()-parseInt(n,10);console.log("elapsed",o),console.log("this.timeout",this.timeout),o<=this.timeout?t.value=a:(console.log(`Key expired: ${e}`),localStorage.removeItem(e),localStorage.removeItem(i))}else localStorage.removeItem(e),localStorage.removeItem(i)}saveContent(t,e){const i=`${e}_timestamp`;localStorage.setItem(e,t.value),localStorage.setItem(i,Date.now().toString())}debounce(t,e){let i;return(...a)=>{clearTimeout(i),i=setTimeout((()=>t(...a)),e)}}},async function v_k(){const t=document.currentScript||document.querySelector('script[src*="raffaello"]'),e=t?.dataset?.key,i=atob("UkFGRkFFTExPOiBObyBsaWNlbnNlIGtleSBwcm92aWRlZA==");atob("UkFGRkFFTExPOiBJbnZhbGlkIG9yIHVuYXV0aG9yaXplZCBsaWNlbnNlIGtleQ=="),atob("UkFGRkFFTExPOiBDb3VsZCBub3QgdmFsaWRhdGUgbGljZW5zZSBrZXkgKG5ldHdvcmsgaXNzdWU/KQ=="),e||console.warn(i)}()}();
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "raffaello",
3
+ "version": "1.0.0",
4
+ "description": "A suite of client-side JavaScript objects and tools for image templatisation.",
5
+ "main": "dist/raffaello.min.js",
6
+ "style": "dist/raffaello.min.css",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "scripts": {
11
+ "build": "rollup -c"
12
+ },
13
+ "keywords": [
14
+ "javascript",
15
+ "browser",
16
+ "library",
17
+ "client-side",
18
+ "image-template"
19
+ ],
20
+ "author": "Theo Francart @ RTS - Radio Television Suisse",
21
+ "license": "UNLICENSED",
22
+ "private": false,
23
+ "devDependencies": {
24
+ "rollup": "^2.79.2",
25
+ "rollup-plugin-postcss": "^4.0.2",
26
+ "rollup-plugin-terser": "^7.0.2"
27
+ },
28
+ "dependencies": {
29
+ "cropperjs": "^1.5.13"
30
+ }
31
+ }