forked from mullema/k3-image-clip
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
1 lines (1 loc) · 34.9 KB
/
index.js
1
var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(t,i,e)=>i in t?__defProp(t,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[i]=e,__spreadValues=(t,i)=>{for(var e in i||(i={}))__hasOwnProp.call(i,e)&&__defNormalProp(t,e,i[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(i))__propIsEnum.call(i,e)&&__defNormalProp(t,e,i[e]);return t};!function(){"use strict";function t(t,i,e,n,o,s,r,a){var h,l="function"==typeof t?t.options:t;if(i&&(l.render=i,l.staticRenderFns=e,l._compiled=!0),n&&(l.functional=!0),s&&(l._scopeId="data-v-"+s),r?(h=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},l._ssrRegister=h):o&&(h=a?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),h)if(l.functional){l._injectStyles=h;var c=l.render;l.render=function(t,i){return h.call(i),c(t,i)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,h):[h]}return{exports:t,options:l}}const i={};var e=t({extends:"k-files-field",props:{clip:{type:Object,default:null}},data:()=>({clip_image:{}}),methods:{openClipDialog(t){this.clip_image=this.value.find((i=>i.id===t)),this.$refs.clip.open()},clippedArea(t){this.clip_image.clip=t.clip,this.onInput(),this.getPreview(t.id,t.clip)},getPreview(t,i){this.$api.post(this.endpoints.field+"/preview",{id:t,width:i.width,height:i.height,top:i.top,left:i.left}).then((i=>{if(!i.image)throw new Error("image clip: no image for preview received.");{let e=this.name,n=this.$store.state.content.current,o=this.$store.getters["content/values"](n)[e];if(o){o.find((i=>i.id===t)).image=i.image,this.$store.dispatch("content/update",[e,o,n])}else{this.selected.find((i=>i.id===t)).image=i.image}}})).catch((t=>{console.log(t)}))}}},(function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-field",t._b({staticClass:"k-files-field",scopedSlots:t._u([t.more&&!t.disabled?{key:"options",fn:function(){return[e("k-button-group",{staticClass:"k-field-options"},[e("k-options-dropdown",t._b({ref:"options",on:{action:t.onAction}},"k-options-dropdown",t.options,!1))],1)]},proxy:!0}:null],null,!0)},"k-field",t.$props,!1),[e("k-dropzone",{attrs:{disabled:!1===t.more},on:{drop:t.drop}},[t.selected.length?[e("k-clip-items",{attrs:{items:t.selected,layout:t.layout,size:t.size,sortable:!t.disabled&&t.selected.length>1},on:{sort:t.onInput,sortChange:function(i){return t.$emit("change",i)},openClipDialog:t.openClipDialog},scopedSlots:t._u([{key:"options",fn:function(i){var n=i.index;return[t.disabled?t._e():e("k-button",{attrs:{tooltip:t.$t("remove"),icon:"remove"},on:{click:function(i){return t.remove(n)}}})]}}],null,!1,1805525116)})]:e("k-empty",{attrs:{layout:t.layout,"data-invalid":t.isInvalid,icon:"image"},on:{click:t.prompt}},[t._v(" "+t._s(t.empty||t.$t("field.files.empty"))+" ")])],2),e("k-files-dialog",{ref:"selector",on:{submit:t.select}}),e("k-upload",{ref:"fileUpload",on:{success:t.upload}}),e("k-clip-dialog",{ref:"clip",attrs:{size:"large",image:t.clip_image,clip:t.clip},on:{submit:t.clippedArea}})],1)}),[],!1,n,null,null,null);function n(t){for(let e in i)this[e]=i[e]}var o=function(){return e.exports}();const s={};var r=t({extends:"k-items",computed:{}},(function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-draggable",{staticClass:"k-items",class:"k-"+t.layout+"-items",attrs:{handle:!0,options:t.dragOptions,"data-layout":t.layout,"data-size":t.size,list:t.items},on:{change:function(i){return t.$emit("change",i)},end:function(i){return t.$emit("sort",t.items,i)}}},[t._t("default",(function(){return t._l(t.items,(function(i,n){return e("k-clip-item",t._b({key:i.id||n,class:{"k-draggable-item":t.sortable&&i.sortable},attrs:{image:t.imageOptions(i),layout:t.layout,sortable:t.sortable&&i.sortable,width:i.column},on:{click:function(e){return t.$emit("item",i,n)},drag:function(e){return t.onDragStart(e,i.dragText)},flag:function(e){return t.$emit("flag",i,n)},option:function(e){return t.$emit("option",e,i,n)},openClipDialog:function(i){return t.$emit("openClipDialog",i)}},nativeOn:{mouseover:function(e){return t.$emit("hover",e,i,n)}},scopedSlots:t._u([{key:"options",fn:function(){return[t._t("options",null,{item:i,index:n})]},proxy:!0}],null,!0)},"k-clip-item",i,!1))}))}))],2)}),[],!1,a,"20e62f27",null,null);function a(t){for(let i in s)this[i]=s[i]}var h=function(){return r.exports}(),l=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("article",t._b({staticClass:"k-item",class:!!t.layout&&"k-"+t.layout+"-item",attrs:{"data-has-figure":t.hasFigure,"data-has-info":Boolean(t.info),"data-has-label":Boolean(t.label),"data-has-options":Boolean(t.options),tabindex:"-1"},on:{click:function(i){return t.$emit("click",i)},dragstart:function(i){return t.$emit("drag",i)}}},"article",t.data,!1),[t.hasFigure?e("k-clip-item-image",{attrs:{image:t.image,layout:t.layout,width:t.width,id:t.id,resizable:t.resizable,disabled:t.disabled},on:{clicked:function(i){return t.$emit("openClipDialog",t.id)}}}):t._e(),t.sortable?e("k-sort-handle",{staticClass:"k-item-sort-handle"}):t._e(),e("header",{staticClass:"k-item-content"},[e("h3",{staticClass:"k-item-title"},[t.link?e("k-link",{staticClass:"k-item-title-link",attrs:{target:t.target,to:t.link}},[e("span",{domProps:{innerHTML:t._s(t.title)}})]):e("span",{domProps:{innerHTML:t._s(t.title)}})],1),t.info?e("p",{staticClass:"k-item-info",domProps:{innerHTML:t._s(t.info)}}):t._e()]),t.flag||t.options||t.$slots.options?e("footer",{staticClass:"k-item-footer"},[e("nav",{staticClass:"k-item-buttons",on:{click:function(t){t.stopPropagation()}}},[t.flag?e("k-status-icon",t._b({},"k-status-icon",t.flag,!1)):t._e(),t._t("options",(function(){return[t.options?e("k-options-dropdown",{staticClass:"k-item-options-dropdown",attrs:{options:t.options},on:{option:t.onOption}}):t._e()]}))],2)]):t._e()],1)};const c={extends:"k-item",props:{id:String,resizable:Boolean,disabled:Boolean},computed:{hasFigure(){return!1!==this.image&&Object.keys(this.image).length>0},title(){return this.text||"-"}}},d={};var u=t(c,l,[],!1,p,null,null,null);function p(t){for(let i in d)this[i]=d[i]}var m=function(){return u.exports}();const g={extends:"k-item-image",props:{id:String,resizable:Boolean,disabled:Boolean}},v={};var f=t(g,(function(){var t=this,i=t.$createElement,e=t._self._c||i;return t.image?e("div",{staticClass:"k-item-figure relative",style:{background:t.$helper.color(t.back)}},[t.resizable&&!t.disabled?e("k-clip-handle",{attrs:{layout:t.layout},on:{clicked:function(i){return t.$emit("clicked")}}}):t._e(),t.image.src?e("k-image",{staticClass:"k-item-image",attrs:{cover:t.image.cover,ratio:t.ratio,sizes:t.sizes,src:t.image.src,srcset:t.image.srcset}}):e("k-aspect-ratio",{attrs:{ratio:t.ratio}},[e("k-icon",{staticClass:"k-item-icon",attrs:{color:t.$helper.color(t.image.color),size:t.size,type:t.image.icon}})],1)],1):t._e()}),[],!1,w,"974829e6",null,null);function w(t){for(let i in v)this[i]=v[i]}var _=function(){return f.exports}();const b={};var y=t({extends:"k-sort-handle",props:{layout:String},methods:{open(){this.$emit("clicked")}}},(function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("span",{class:"k-sort-handle k-item-sort-handle k-icon k-icon-sort clip-handle "+t.layout+"-handle",attrs:{"aria-hidden":"true"}},[e("img",{staticClass:"clipicon",attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAMFBMVEUAAAAzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzPzX0yTAAAAD3RSTlMAQIDAEPDQYLAgoFBwMJALzXfXAAAAsElEQVRYw+3TPQoCMRCG4RgXVEQwrVXwFhbilt7AQu+QvYl7BQ9h72XshUUtP+NPQImBDAq7Webtn2I+GMFxXG1JVAzaDjJlm+CivMrvoINQOhnwSPpHG2jarAsGDH4BOREs1zQwMpiRwB44HwhAwlaV0SDb4t5GiOEqCvTxbG5lEQO6eHUErtHAVVDBKU3Qm76lG/MPH2CnbHkIhBonAwbKy7ijY3OzMmg74Djuj90AekzAtvxv03QAAAAASUVORK5CYII=",alt:"Clip"},on:{click:t.open}})])}),[],!1,x,"02c05879",null,null);function x(t){for(let i in b)this[i]=b[i]}var E=function(){return y.exports}(),z=("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self,{exports:{}});z.exports=function(){(function(){for(var t=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i,e){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout((function(){i(n+o)}),o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})})(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,i){i=i||{bubbles:!1,cancelable:!1,detail:void 0};var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),e}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(e){}function i(i,e){e=e||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(i,e.bubbles,e.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}i.prototype=Event.prototype,t.MouseEvent=i}(window);var t=function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")},i=function(){function t(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(i,e,n){return e&&t(i.prototype,e),n&&t(i,n),i}}(),e=function t(i,e,n){null===i&&(i=Function.prototype);var o=Object.getOwnPropertyDescriptor(i,e);if(void 0===o){var s=Object.getPrototypeOf(i);return null===s?void 0:t(s,e,n)}if("value"in o)return o.value;var r=o.get;return void 0!==r?r.call(n):void 0},n=function(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function, not "+typeof i);t.prototype=Object.create(i&&i.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),i&&(Object.setPrototypeOf?Object.setPrototypeOf(t,i):t.__proto__=i)},o=function(t,i){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!i||"object"!=typeof i&&"function"!=typeof i?t:i},s=function(){function t(t,i){var e=[],n=!0,o=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(n=(r=a.next()).done)&&(e.push(r.value),!i||e.length!==i);n=!0);}catch(h){o=!0,s=h}finally{try{!n&&a.return&&a.return()}finally{if(o)throw s}}return e}return function(i,e){if(Array.isArray(i))return i;if(Symbol.iterator in Object(i))return t(i,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r=function i(e,n,o,s){t(this,i);var r=this;function a(t){t.stopPropagation(),document.addEventListener("mouseup",h),document.addEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:r}}))}function h(t){t.stopPropagation(),document.removeEventListener("mouseup",h),document.removeEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:r}}))}function l(t){t.stopPropagation(),r.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=e,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",a)},a=function(){function e(i,n,o,s){t(this,e),this.x1=i,this.y1=n,this.x2=o,this.y2=s}return i(e,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==i?this.y1:i,this.x2=null==e?this.x2:e,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*e[0],o=this.y1+this.height()*e[1];return this.x1=n-t*e[0],this.y1=o-i*e[1],this.x2=this.x1+t,this.y2=this.y1+i,this}},{key:"scale",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],e=this.width()*t,n=this.height()*t;return this.resize(e,n,i),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=this.width(),n=this.height();return t=null===t?this.x1:t,i=null===i?this.y1:i,this.x1=t,this.y1=i,this.x2=t+e,this.y2=i+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.width()*t[0],this.height()*t[1]]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}},{key:"constrainToRatio",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height";if(null!==t)return this.width(),this.height(),"width"===e?this.resize(1*this.height()/t,this.height(),i):this.resize(this.width(),this.width()*t,i),this}},{key:"constrainToBoundary",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.getAbsolutePoint(e),o=s(n,2),r=o[0],a=o[1],h=r,l=a,c=t-r,d=i-a,u=-2*e[0]+1,p=-2*e[1]+1,m=null,g=null;switch(u){case-1:m=h;break;case 0:m=2*Math.min(h,c);break;case 1:m=c}switch(p){case-1:g=l;break;case 0:g=2*Math.min(l,d);break;case 1:g=d}if(this.width()>m){var v=m/this.width();this.scale(v,e)}if(this.height()>g){var f=g/this.height();this.scale(f,e)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null;if(s&&(s>1?(t=1*i/s,n=e*s):s<1&&(i=t*s,e=1*n/s)),t&&this.width()>t){var r=t,a=null===s?this.height():i;this.resize(r,a,o)}if(i&&this.height()>i){var h=null===s?this.width():t,l=i;this.resize(h,l,o)}if(e&&this.width()<e){var c=e,d=null===s?this.height():n;this.resize(c,d,o)}if(n&&this.height()<n){var u=null===s?this.width():e,p=n;this.resize(u,p,o)}return this}}]),e}();function h(t){t.addEventListener("touchstart",l),t.addEventListener("touchend",l),t.addEventListener("touchmove",l)}function l(t){t.preventDefault();var i=t.changedTouches[0],e={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"};i.target.dispatchEvent(new MouseEvent(e[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:i.clientX,clientY:i.clientY,screenX:i.screenX,screenY:i.screenY}))}var c=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],d=function(){function e(i,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t(this,e),this.options=e.parseOptions(n||{}),!i.nodeName&&null==(i=document.querySelector(i)))throw"Unable to find element.";if(!i.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:i.parentNode,element:i},s||(0===i.width||0===i.height?i.onload=function(){o.initialize(i)}:this.initialize(i))}return i(e,[{key:"initialize",value:function(t){this.createDOM(t),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)}},{key:"createDOM",value:function(t){this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,h(this.containerEl),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",t.getAttribute("src")),this.imageEl.setAttribute("alt",t.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var e=0;e<c.length;e++){var n=new r(c[e].position,c[e].constraints,c[e].cursor,this.eventBus);this.handles.push(n),i.appendChild(n.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),t.parentElement.replaceChild(this.containerEl,t)}},{key:"setImage",value:function(t){var i=this;return this.imageEl.onload=function(){i.box=i.initializeBox(i.options),i.redraw()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)}},{key:"initializeBox",value:function(t){var i=t.startSize.width,e=t.startSize.height,n=new a(0,0,i,e);n.constrainToRatio(t.aspectRatio,[.5,.5]);var o=t.minSize,s=t.maxSize;n.constrainToSize(s.width,s.height,o.width,o.height,[.5,.5],t.aspectRatio);var r=this.cropperEl.offsetWidth,h=this.cropperEl.offsetHeight;n.constrainToBoundary(r,h,[.5,.5]);var l=this.cropperEl.offsetWidth/2-n.width()/2,c=this.cropperEl.offsetHeight/2-n.height()/2;return n.move(l,c),n}},{key:"redraw",value:function(){var t=this,i=Math.round(this.box.width()),e=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame((function(){t.regionEl.style.transform="translate("+n+"px, "+o+"px)",t.regionEl.style.width=i+"px",t.regionEl.style.height=e+"px",t.imageClippedEl.style.clip="rect("+o+"px, "+s+"px, "+r+"px, "+n+"px)";for(var a=t.box.getAbsolutePoint([.5,.5]),h=a[0]-t.cropperEl.offsetWidth/2>>31,l=a[1]-t.cropperEl.offsetHeight/2>>31,c=-2*((h^l)+l+l+4)+8,d=0;d<t.handles.length;d++){var u=t.handles[d],p=u.el.offsetWidth,m=u.el.offsetHeight,g=n+i*u.position[0]-p/2,v=o+e*u.position[1]-m/2;u.el.style.transform="translate("+Math.round(g)+"px, "+Math.round(v)+"px)",u.el.style.zIndex=c==d?5:4}}))}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){var t=this.eventBus;function i(i){i.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}function e(i){i.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}function n(i){i.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}this.regionEl.addEventListener("mousedown",i),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){var t=4,i=this,e=null;function n(n){n.stopPropagation(),document.addEventListener("mouseup",s),document.addEventListener("mousemove",o);var r=i.cropperEl.getBoundingClientRect(),h=n.clientX-r.left,l=n.clientY-r.top;e=i.box,i.box=new a(h,l,h+1,l+1),i.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:i.handles[t]}}))}function o(t){t.stopPropagation(),i.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function s(t){t.stopPropagation(),document.removeEventListener("mouseup",s),document.removeEventListener("mousemove",o),1!==i.box.width()||1!==i.box.height()?i.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):i.box=e}this.overlayEl.addEventListener("mousedown",n)}},{key:"onHandleMoveStart",value:function(t){var i=t.detail.handle,e=[1-i.position[0],1-i.position[1]],n=this.box.getAbsolutePoint(e),o=s(n,2),r=o[0],a=o[1];this.activeHandle={handle:i,originPoint:e,originX:r,originY:a},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.cropperEl.getBoundingClientRect();e-=o.left,n-=o.top,e<0?e=0:e>o.width&&(e=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,c=1===l.constraints[0],d=1===l.constraints[1],u=1===l.constraints[2],p=1===l.constraints[3],m=(p||d)&&(c||u),g=p||d?r:this.box.x1,v=p||d?r:this.box.x2,f=c||u?h:this.box.y1,w=c||u?h:this.box.y2;g=p?e:g,v=d?e:v,f=c?n:f,w=u?n:w;var _=!1,b=!1;if((p||d)&&(_=p?e>r:e<r),(c||u)&&(b=c?n>h:n<h),_){var y=g;g=v,v=y,s[0]=1-s[0]}if(b){var x=f;f=w,w=x,s[1]=1-s[1]}var E=new a(g,f,v,w);if(this.options.aspectRatio){var z=this.options.aspectRatio,k=!1;m?k=n>E.y1+z*E.width()||n<E.y2-z*E.width():(c||u)&&(k=!0);var C=k?"width":"height";E.constrainToRatio(z,s,C)}var M=this.cropperEl.offsetWidth,S=this.cropperEl.offsetHeight;E.constrainToBoundary(M,S,s);var A=this.options.minSize,P=this.options.maxSize;E.constrainToSize(P.width,P.height,A.width,A.height,s,this.options.aspectRatio),E.x1<0||E.y1<0||E.x2>Math.ceil(o.width)||E.y2>Math.ceil(o.height)||(this.box=E,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()))}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.cropperEl.getBoundingClientRect();e-=o.left,n-=o.top,this.currentMove={offsetX:e-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,a=this.cropperEl.getBoundingClientRect();e-=a.left,n-=a.top,this.box.move(e-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>a.width&&this.box.move(a.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>a.height&&this.box.move(null,a.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.options.returnMode),"real"==t){var i=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),o=i/n.width,s=e/n.height;return{x:Math.round(this.box.x1*o),y:Math.round(this.box.y1*s),width:Math.round(this.box.width()*o),height:Math.round(this.box.height()*s)}}if("ratio"==t){var r=this.imageEl.getBoundingClientRect(),a=r.width,h=r.height;return{x:u(this.box.x1/a,3),y:u(this.box.y1/h,3),width:u(this.box.width()/a,3),height:u(this.box.height()/h,3)}}if("raw"==t)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}}}],[{key:"parseOptions",value:function(t){var i={aspectRatio:null,maxSize:{width:null,height:null},minSize:{width:null,height:null},startSize:{width:100,height:100,unit:"%"},returnMode:"real",onInitialize:null,onCropStart:null,onCropMove:null,onCropEnd:null},e=null;void 0!==t.aspectRatio&&("number"==typeof t.aspectRatio?e=t.aspectRatio:t.aspectRatio instanceof Array&&(e=t.aspectRatio[1]/t.aspectRatio[0]));var n=null;void 0!==t.maxSize&&null!==t.maxSize&&(n={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px"});var o=null;void 0!==t.minSize&&null!==t.minSize&&(o={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px"});var s=null;void 0!==t.startSize&&null!==t.startSize&&(s={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%"});var r=null;"function"==typeof t.onInitialize&&(r=t.onInitialize);var a=null;"function"==typeof t.onCropStart&&(a=t.onCropStart);var h=null;"function"==typeof t.onCropEnd&&(h=t.onCropEnd);var l=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=t.onUpdate),"function"==typeof t.onCropMove&&(l=t.onCropMove);var c=null;if(void 0!==t.returnMode){var d=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(d))throw"Invalid return mode.";c=d}var u=function(t){for(var i=t.offsetWidth,e=t.offsetHeight,n=["maxSize","minSize","startSize"],o=0;o<n.length;o++){var s=n[o];null!==this[s]&&("%"==this[s].unit&&(null!==this[s].width&&(this[s].width=this[s].width/100*i),null!==this[s].height&&(this[s].height=this[s].height/100*e)),delete this[s].unit)}},p=function(t,i){return null!==t?t:i};return{aspectRatio:p(e,i.aspectRatio),maxSize:p(n,i.maxSize),minSize:p(o,i.minSize),startSize:p(s,i.startSize),returnMode:p(c,i.returnMode),onInitialize:p(r,i.onInitialize),onCropStart:p(a,i.onCropStart),onCropMove:p(l,i.onCropMove),onCropEnd:p(h,i.onCropEnd),convertToPixels:u}}}]),e}();function u(t,i){return Number(Math.round(t+"e"+i)+"e-"+i)}var p=function(s){function r(i,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return t(this,r),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,i,e,n))}return n(r,s),i(r,[{key:"getValue",value:function(t){return e(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){return e(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"setImage",this).call(this,t)}},{key:"destroy",value:function(){return e(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,i){return this.box.move(t,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[.5,.5];return this.box.resize(t,i,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[.5,.5];return this.box.scale(t,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),r}(d);return p}();var k=z.exports;class C{constructor({el:t,originalDimensions:i,saved:e,clip:n,events:o}){this.el=t,this.original_dimensions=i,this.saved=e,this.min_width=n?n.minwidth:null,this.min_height=n?n.minheight:null,this.max_width=n?n.maxwidth:null,this.max_height=n?n.maxheight:null,this.limit_width=null,this.limit_height=null,this.ratio=n?n.ratio:null,this.events=o,this.validate(),this.cropInstance=this.init()}reset({position:t}){this.cropInstance.destroy(),this.saved=t,this.cropInstance=this.init()}init(){const t=__spreadValues({returnMode:"raw",onInitialize:t=>{document.getElementsByClassName("croppr-image")[0].addEventListener("load",(t=>{this.image=t.target,this.factor_w=this.original_dimensions.width/t.target.clientWidth,this.factor_h=this.original_dimensions.height/t.target.clientHeight,this.setStartPosition(),this.setSelectorBoundaries()}),!1)}},this.events);return this.min_width&&this.min_height&&(t.aspectRatio="fixed"===this.ratio?this.min_height/this.min_width:null,t.minSize=[this.min_width,this.min_height,"px"],this.limit_width=this.min_width,this.limit_height=this.min_height),this.max_width&&this.max_height&&(t.aspectRatio="fixed"===this.ratio?this.max_height/this.max_width:null,t.maxSize=[this.max_width,this.max_height,"px"],this.limit_width=this.max_width,this.limit_height=this.max_height),new k(this.el,t)}getCropArea(){const t=this.cropInstance.getValue(),i={width:this.roundSize(t.width*this.factor_w,this.limit_width),height:this.roundSize(t.height*this.factor_h,this.limit_height)};return i.left=this.adjustPosition(t.x*this.factor_w,i.width,this.original_dimensions.width),i.top=this.adjustPosition(t.y*this.factor_h,i.height,this.original_dimensions.height),i}setStartPosition(){let t={};t=this.saved?{width:Math.round(this.saved.width/this.factor_w),height:Math.round(this.saved.height/this.factor_h),left:Math.round(this.saved.left/this.factor_w),top:Math.round(this.saved.top/this.factor_h)}:{width:(this.max_width?this.max_width:this.original_dimensions.width)/this.factor_w,height:(this.max_height?this.max_height:this.original_dimensions.height)/this.factor_h,left:0,top:0},this.cropInstance.resizeTo(t.width,t.height),this.cropInstance.moveTo(t.left,t.top)}setSelectorBoundaries(){this.max_width&&this.max_height&&(this.cropInstance.options.maxSize={width:this.max_width/this.factor_w,height:this.max_height/this.factor_h}),this.min_width&&this.min_height&&(this.cropInstance.options.minSize={width:this.min_width/this.factor_w,height:this.min_height/this.factor_h})}validate(){if(this.min_width&&this.original_dimensions.width<this.min_width)throw new Error(`Image width (${this.original_dimensions.width}px) must be at least ${this.min_width}px`);if(this.min_height&&this.original_dimensions.height<this.min_height)throw new Error(`Image height (${this.original_dimensions.height}px) must be at least ${this.min_height}px`);if(this.min_width&&this.min_height&&this.max_width&&this.max_height&&"fixed"===this.ratio&&this.min_width/this.min_height!=this.max_width/this.max_height)throw new Error("Ratio must be same for min and max")}roundSize(t,i=null){return i&&i-t>=-1&&i-t<=1?i:Math.round(t)}adjustPosition(t,i,e){return t+i>e?e-i:Math.round(t)}}var M=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-overlay",{ref:"overlay",attrs:{autofocus:t.autofocus,centered:!0},on:{close:t.onOverlayClose,ready:function(i){return t.$emit("ready")}}},[e("div",{ref:"dialog",staticClass:"k-dialog",class:t.$vnode.data.staticClass,style:t.dialog_width,attrs:{"data-size":t.size},on:{mousedown:function(t){t.stopPropagation()}}},[t.notification?e("div",{staticClass:"k-dialog-notification",attrs:{"data-theme":t.notification.type}},[e("p",[t._v(t._s(t.notification.message))]),e("k-button",{attrs:{icon:"cancel"},on:{click:function(i){t.notification=null}}})],1):t._e(),t.image?e("div",{staticClass:"k-dialog-body"},[t.spinner?e("div",{staticClass:"preload"},[e("div",{staticClass:"spinner"},[e("div",{staticClass:"bounce1"}),e("div",{staticClass:"bounce2"}),e("div",{staticClass:"bounce3"})]),e("footer",{staticClass:"preload-dialog-footer"},[t._t("footer",(function(){return[e("k-button-group",[e("k-button",{staticClass:"k-dialog-button-cancel",attrs:{icon:"cancel"},on:{click:t.cancel}},[t._v(" "+t._s(t.$t("cancel"))+" ")])],1)]}))],2)]):t._e(),e("img",{attrs:{src:t.image.url,id:"croppr"}})]):t._e(),e("footer",{staticClass:"k-dialog-footer"},[t._t("footer",(function(){return[e("k-button-group",[e("k-button",{staticClass:"k-dialog-button-cancel",attrs:{icon:"cancel"},on:{click:t.cancel}},[t._v(" "+t._s(t.$t("cancel"))+" ")]),e("k-button",{staticClass:"k-dialog-button-submit",attrs:{icon:t.icon,theme:t.theme},on:{click:t.submit}},[t._v(" "+t._s(t.button||t.$t("confirm"))+" ")])],1)]}))],2)])])},S=[];const A={extends:"k-dialog",props:{image:{type:Object,default:null},clip:{type:Object,default:null}},data:()=>({cropprFacade:null,dialog_width:null,spinner:!0,freezeDialog:!1,was_moved:!1}),created(){this.$on("ready",this.isOpen),this.$on("close",this.isClosed)},beforeDestroy(){this.$off("ready",this.isOpen),this.$off("close",this.isClosed)},methods:{isOpen(){this.setDialogWidth(),this.showSpinner(),this.$nextTick((()=>{let t=document.getElementById("croppr");t.addEventListener("load",this.hideSpinner,!1),t.complete&&this.hideSpinner();try{this.cropprFacade=new C({el:t,originalDimensions:this.image.dimensions,clip:this.clip,saved:this.image.clip,events:{onCropStart:()=>{this.freezeDialog=!0,this.was_moved=!0},onCropEnd:()=>{setTimeout((()=>{this.freezeDialog=!1}),200)}}}),window.addEventListener("resize",this.showSpinner,!1),window.addEventListener("resize",this.resizeDialog,!1)}catch(i){this.cancel(),console.error(this.image.id+": "+i.message),this.$store.dispatch("notification/error",i.message)}}))},isClosed(){window.removeEventListener("resize",this.showSpinner,!1),window.removeEventListener("resize",this.resizeDialog,!1)},cancel(){this.freezeDialog||(this.$emit("cancel"),this.close())},remToPx:(t=1)=>t*parseInt(getComputedStyle(document.documentElement).fontSize),submit(){this.was_moved&&(this.$emit("submit",{id:this.image.id,clip:this.cropprFacade.getCropArea()}),this.was_moved=!1),this.close()},setDialogWidth(){let t=window.innerWidth-this.remToPx(6),i=window.innerHeight-this.remToPx(12),e=function({srcWidth:t,srcHeight:i,maxWidth:e,maxHeight:n}){let o=Math.min(e/t,n/i);return{width:t*o,height:i*o}}({srcWidth:this.image.dimensions.width,srcHeight:this.image.dimensions.height,maxWidth:t,maxHeight:i}),n=this.image.dimensions.width;(this.image.dimensions.width>t||this.image.dimensions.height>i)&&(n=e.width),this.dialog_width="width: "+n+"px;"},resizeDialog:function(t,i=100){let e;return function(...n){window.clearTimeout(e),e=window.setTimeout((()=>{t.apply(this,n)}),i)}}((function(){this.setDialogWidth();let t=this.cropprFacade.getCropArea();this.cropprFacade.reset({position:t}),this.spinner=!1}),500),hideSpinner:function(){this.spinner=!1},showSpinner:function(){!1===this.spinner&&(this.spinner=!0)}}},P={};var O=t(A,M,S,!1,$,null,null,null);function $(t){for(let i in P)this[i]=P[i]}var R=function(){return O.exports}();const B={};var T=t({extends:"k-files-field-preview"},undefined,undefined,!1,I,"fedf2864",null,null);function I(t){for(let i in B)this[i]=B[i]}var L=function(){return T.exports}();panel.plugin("mullema/image-clip",{fields:{"image-clip":o},components:{"k-clip-items":h,"k-clip-item":m,"k-clip-item-image":_,"k-clip-handle":E,"k-clip-dialog":R,"k-image-clip-field-preview":L}})}();