@cropper/element-image
Version:
A custom image element for the Cropper.
2 lines (1 loc) • 10.5 kB
JavaScript
const t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{};t&&e.document.documentElement;const s="cropper",i=`${s}-canvas`,a=`${s}-image`,n=`${s}-selection`,o="scale",r="rotate",h="transform",c="error",l="load",d="action",$="actionend",u="actionstart",m=Number.isNaN||e.isNaN;function b(t){return"number"==typeof t&&!m(t)}const g=/([a-z\d])([A-Z])/g;function f(t){return String(t).replace(g,"$1-$2").toLowerCase()}const p=/-[A-z\d]/g;function v(t){return t.replace(p,(t=>t.slice(1).toUpperCase()))}const C=/\s\s*/;function y(t,e,s,i){e.trim().split(C).forEach((e=>{t.removeEventListener(e,s,i)}))}function S(t,e,s,i){e.trim().split(C).forEach((e=>{t.addEventListener(e,s,i)}))}function w(t,e,s,i){S(t,e,s,Object.assign(Object.assign({},i),{once:!0}))}const A={bubbles:!0,cancelable:!0,composed:!0};const k=Promise.resolve();const x=/deg|g?rad|turn$/i;function E(t){const e=parseFloat(t)||0;if(0!==e){const[s="rad"]=String(t).match(x)||[];switch(s.toLowerCase()){case"deg":return e/360*(2*Math.PI);case"grad":return e/400*(2*Math.PI);case"turn":return e*(2*Math.PI)}}return e}function T(t,...e){if(0===e.length)return t;const[s,i,a,n,o,r]=t,[h,c,l,d,$,u]=e[0];return T(t=[s*h+a*c,i*h+n*c,s*l+a*d,i*l+n*d,s*$+a*u+o,i*$+n*u+r],...e.slice(1))}const O=/left|top|width|height/i,M="open",j=new WeakMap,L=new WeakMap,R=new Map,N=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class z extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var t,e;super(),this.shadowRootMode=M,this.slottable=!0;const s=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;s&&R.set(s,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const i=v(t);let a=s;switch(typeof this[i]){case"boolean":a=null!==s&&"false"!==s;break;case"number":a=Number(s)}switch(this[i]=a,t){case"theme-color":{const t=L.get(this),e=this.$sharedStyle;t&&e&&(N?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,s){if(!Object.is(s,e))switch(t=f(t),typeof s){case"boolean":!0===s?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":s=m(s)?"":String(s);default:s?this.getAttribute(t)!==s&&this.setAttribute(t,s):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=v(t);let s=this[e];(function(t){return void 0===t})(s)||this.$propertyChangedCallback(e,void 0,s),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>s,set(t){const i=s;s=t,this.$propertyChangedCallback(e,i,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||M});if(this.shadowRoot||j.set(this,t),L.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){L.has(this)&&L.delete(this),j.has(this)&&j.delete(this)}$getTagNameOf(t){var e;return null!==(e=R.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let s=t[e];b(s)&&(s=0!==s&&O.test(e)?`${s}px`:String(s)),this.style[e]=s})),this}$getShadowRoot(){return this.shadowRoot||j.get(this)}$addStyles(t){let e;const s=this.$getShadowRoot();return N?(e=new CSSStyleSheet,e.replaceSync(t),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,s.appendChild(e)),e}$emit(t,e,s){return function(t,e,s,i){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},A),{detail:s}),i)))}(this,t,e,s)}$nextTick(t){return function(t,e){return e?k.then(t?e.bind(t):e):k}(this,t)}static $define(s,i){var a;"object"==typeof(a=s)&&null!==a&&(i=s,s=""),s||(s=this.$name||this.name),s=f(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,i)}}z.$version="2.0.0";const P=new WeakMap,B=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class W extends z{constructor(){super(...arguments),this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$actionStartTarget=null,this.$style=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}",this.$image=new Image,this.initialCenterSize="contain",this.rotatable=!1,this.scalable=!1,this.skewable=!1,this.slottable=!1,this.translatable=!1}set $canvas(t){P.set(this,t)}get $canvas(){return P.get(this)}static get observedAttributes(){return super.observedAttributes.concat(B,["initial-center-size","rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,s){Object.is(s,e)||(super.attributeChangedCallback(t,e,s),B.includes(t)&&this.$image.setAttribute(t,s))}$propertyChangedCallback(t,e,s){if(!Object.is(s,e)&&(super.$propertyChangedCallback(t,e,s),"initialCenterSize"===t))this.$nextTick((()=>{this.$center(s)}))}connectedCallback(){super.connectedCallback();const{$image:t}=this,e=this.closest(this.$getTagNameOf(i));e&&(this.$canvas=e,this.$setStyles({display:"block",position:"absolute"}),this.$onCanvasActionStart=t=>{var e,s;this.$actionStartTarget=null===(s=null===(e=t.detail)||void 0===e?void 0:e.relatedEvent)||void 0===s?void 0:s.target},this.$onCanvasActionEnd=()=>{this.$actionStartTarget=null},this.$onCanvasAction=this.$handleAction.bind(this),S(e,u,this.$onCanvasActionStart),S(e,$,this.$onCanvasActionEnd),S(e,d,this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),S(t,l,this.$onLoad),this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$image:t,$canvas:e}=this;e&&(this.$onCanvasActionStart&&(y(e,u,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(y(e,$,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(y(e,d,this.$onCanvasAction),this.$onCanvasAction=null)),t&&this.$onLoad&&(y(t,l,this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(t),super.disconnectedCallback()}$handleLoad(){const{$image:t}=this;this.$setStyles({width:t.naturalWidth,height:t.naturalHeight}),this.$canvas&&this.$center(this.initialCenterSize)}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;const{$canvas:e}=this,{detail:s}=t;if(s){const{relatedEvent:t}=s;let{action:i}=s;switch(i!==h||this.rotatable&&this.scalable||(i=this.rotatable?r:this.scalable?o:"none"),i){case"move":if(this.translatable){let i=null;t&&(i=t.target.closest(this.$getTagNameOf(n))),i||(i=e.querySelector(this.$getTagNameOf(n))),i&&i.multiple&&!i.active&&(i=e.querySelector(`${this.$getTagNameOf(n)}[active]`)),i&&!i.hidden&&i.movable&&!i.dynamic&&this.$actionStartTarget&&i.contains(this.$actionStartTarget)||this.$move(s.endX-s.startX,s.endY-s.startY)}break;case r:if(this.rotatable)if(t){const{x:e,y:i}=this.getBoundingClientRect();this.$rotate(s.rotate,t.clientX-e,t.clientY-i)}else this.$rotate(s.rotate);break;case o:if(this.scalable)if(t){const e=t.target.closest(this.$getTagNameOf(n));if(!e||!e.zoomable||e.zoomable&&e.dynamic){const{x:e,y:i}=this.getBoundingClientRect();this.$zoom(s.scale,t.clientX-e,t.clientY-i)}}else this.$zoom(s.scale);break;case h:if(this.rotatable&&this.scalable){const{rotate:e}=s;let{scale:i}=s;i<0?i=1/(1-i):i+=1;const a=Math.cos(e),n=Math.sin(e),[o,r,h,c]=[a*i,n*i,-n*i,a*i];if(t){const e=this.getBoundingClientRect(),s=t.clientX-e.x,i=t.clientY-e.y,[a,n,l,d]=this.$matrix,$=s-e.width/2,u=i-e.height/2,m=($*d-l*u)/(a*d-l*n),b=(u*a-n*$)/(a*d-l*n);this.$transform(o,r,h,c,m*(1-o)+b*h,b*(1-c)+m*r)}else this.$transform(o,r,h,c,0,0)}}}}$ready(t){const{$image:e}=this,s=new Promise(((t,s)=>{const i=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?t(e):s(i);else{const a=()=>{y(e,c,n),t(e)},n=()=>{y(e,l,a),s(i)};w(e,l,a),w(e,c,n)}}));return"function"==typeof t&&s.then((e=>(t(e),e))),s}$center(t){const{parentElement:e}=this;if(!e)return this;const s=e.getBoundingClientRect(),i=s.width,a=s.height,{x:n,y:o,width:r,height:h}=this.getBoundingClientRect(),c=n+r/2,l=o+h/2,d=s.x+i/2,$=s.y+a/2;if(this.$move(d-c,$-l),t&&(r!==i||h!==a)){const e=i/r,s=a/h;switch(t){case"cover":this.$scale(Math.max(e,s));break;case"contain":this.$scale(Math.min(e,s))}}return this}$move(t,e=t){if(this.translatable&&b(t)&&b(e)){const[s,i,a,n]=this.$matrix,o=(t*n-a*e)/(s*n-a*i),r=(e*s-i*t)/(s*n-a*i);this.$translate(o,r)}return this}$moveTo(t,e=t){if(this.translatable&&b(t)&&b(e)){const[s,i,a,n]=this.$matrix,o=(t*n-a*e)/(s*n-a*i),r=(e*s-i*t)/(s*n-a*i);this.$setTransform(s,i,a,n,o,r)}return this}$rotate(t,e,s){if(this.rotatable){const i=E(t),a=Math.cos(i),n=Math.sin(i),[o,r,h,c]=[a,n,-n,a];if(b(e)&&b(s)){const[t,i,a,n]=this.$matrix,{width:l,height:d}=this.getBoundingClientRect(),$=e-l/2,u=s-d/2,m=($*n-a*u)/(t*n-a*i),b=(u*t-i*$)/(t*n-a*i);this.$transform(o,r,h,c,m*(1-o)-b*h,b*(1-c)-m*r)}else this.$transform(o,r,h,c,0,0)}return this}$zoom(t,e,s){if(!this.scalable||0===t)return this;if(t<0?t=1/(1-t):t+=1,b(e)&&b(s)){const[i,a,n,o]=this.$matrix,{width:r,height:h}=this.getBoundingClientRect(),c=e-r/2,l=s-h/2,d=(c*o-n*l)/(i*o-n*a),$=(l*i-a*c)/(i*o-n*a);this.$transform(t,0,0,t,d*(1-t),$*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){const s=E(t),i=E(e);this.$transform(1,Math.tan(i),Math.tan(s),1,0,0)}return this}$translate(t,e=t){return this.translatable&&b(t)&&b(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,s,i,a,n){return b(t)&&b(e)&&b(s)&&b(i)&&b(a)&&b(n)?this.$setTransform(T(this.$matrix,[t,e,s,i,a,n])):this}$setTransform(t,e,s,i,a,n){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,s,i,a,n]=t),b(t)&&b(e)&&b(s)&&b(i)&&b(a)&&b(n))){const o=[...this.$matrix],r=[t,e,s,i,a,n];if(!1===this.$emit("transform",{matrix:r,oldMatrix:o}))return this;this.$matrix=r,this.style.transform=`matrix(${r.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}W.$name=a,W.$version="2.0.0";export{W as default};