@cropper/element-selection
Version:
A custom selection element for the Cropper.
2 lines (1 loc) • 14.5 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).CropperSelection=e()}(this,(function(){"use strict";const t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{};t&&e.document.documentElement;const i="cropper",s=`${i}-canvas`,n=`${i}-image`,h=`${i}-selection`,a="select",o="scale",c="n-resize",r="e-resize",l="s-resize",d="w-resize",u="ne-resize",$="nw-resize",p="se-resize",m="sw-resize",g="keydown",v="action",f="actionend",b="actionstart",y="change",w=Number.isNaN||e.isNaN;function S(t){return"number"==typeof t&&!w(t)}function k(t){return S(t)&&t>0&&t<1/0}function C(t){return"object"==typeof t&&null!==t}const{hasOwnProperty:A}=Object.prototype;function x(t){if(!C(t))return!1;try{const{constructor:e}=t,{prototype:i}=e;return e&&i&&A.call(i,"isPrototypeOf")}catch(t){return!1}}const E=/([a-z\d])([A-Z])/g;function D(t){return String(t).replace(E,"$1-$2").toLowerCase()}const T=/-[A-z\d]/g;function R(t){return t.replace(T,(t=>t.slice(1).toUpperCase()))}const z=/\s\s*/;function N(t,e,i,s){e.trim().split(z).forEach((e=>{t.removeEventListener(e,i,s)}))}function O(t,e,i,s){e.trim().split(z).forEach((e=>{t.addEventListener(e,i,s)}))}const M={bubbles:!0,cancelable:!0,composed:!0};const j=Promise.resolve();function K(t){const{documentElement:i}=t.ownerDocument,s=t.getBoundingClientRect();return{left:s.left+(e.pageXOffset-i.clientLeft),top:s.top+(e.pageYOffset-i.clientTop)}}const P="contain";function L(t,e=P){const{aspectRatio:i}=t;let{width:s,height:n}=t;const h=k(s),a=k(n);if(h&&a){const t=n*i;e===P&&t>s||"cover"===e&&t<s?n=s/i:s=n*i}else h?n=s/i:a&&(s=n*i);return{width:s,height:n}}const W=/left|top|width|height/i,X="open",H=new WeakMap,Y=new WeakMap,B=new Map,U=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class q extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var t,e;super(),this.shadowRootMode=X,this.slottable=!0;const i=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;i&&B.set(i,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,i){if(Object.is(i,e))return;const s=R(t);let n=i;switch(typeof this[s]){case"boolean":n=null!==i&&"false"!==i;break;case"number":n=Number(i)}switch(this[s]=n,t){case"theme-color":{const t=Y.get(this),e=this.$sharedStyle;t&&e&&(U?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(t=D(t),typeof i){case"boolean":!0===i?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":i=w(i)?"":String(i);default:i?this.getAttribute(t)!==i&&this.setAttribute(t,i):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=R(t);let i=this[e];(function(t){return void 0===t})(i)||this.$propertyChangedCallback(e,void 0,i),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>i,set(t){const s=i;i=t,this.$propertyChangedCallback(e,s,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||X});if(this.shadowRoot||H.set(this,t),Y.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(){Y.has(this)&&Y.delete(this),H.has(this)&&H.delete(this)}$getTagNameOf(t){var e;return null!==(e=B.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let i=t[e];S(i)&&(i=0!==i&&W.test(e)?`${i}px`:String(i)),this.style[e]=i})),this}$getShadowRoot(){return this.shadowRoot||H.get(this)}$addStyles(t){let e;const i=this.$getShadowRoot();return U?(e=new CSSStyleSheet,e.replaceSync(t),i.adoptedStyleSheets=i.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,i.appendChild(e)),e}$emit(t,e,i){return function(t,e,i,s){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},M),{detail:i}),s)))}(this,t,e,i)}$nextTick(t){return function(t,e){return e?j.then(t?e.bind(t):e):j}(this,t)}static $define(i,s){C(i)&&(s=i,i=""),i||(i=this.$name||this.name),i=D(i),t&&e.customElements&&!e.customElements.get(i)&&customElements.define(i,this,s)}}q.$version="2.0.0";const I=new WeakMap;class Z extends q{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onCanvasActionEnd=null,this.$onDocumentKeyDown=null,this.$action="",this.$actionStartTarget=null,this.$changing=!1,this.$style=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}',this.$initialSelection={x:0,y:0,width:0,height:0},this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.linked=!1,this.dynamic=!1,this.movable=!1,this.resizable=!1,this.zoomable=!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){I.set(this,t)}get $canvas(){return I.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","dynamic","height","initial-aspect-ratio","initial-coverage","keyboard","linked","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"x":case"y":case"width":case"height":this.$changing||this.$nextTick((()=>{this.$change(this.x,this.y,this.width,this.height,this.aspectRatio,!0)}));break;case"aspectRatio":case"initialAspectRatio":this.$nextTick((()=>{this.$initSelection()}));break;case"initialCoverage":this.$nextTick((()=>{k(i)&&i<=1&&this.$initSelection(!0,!0)}));break;case"keyboard":this.$nextTick((()=>{this.$canvas&&(i?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),O(this.ownerDocument,g,this.$onDocumentKeyDown)):this.$onDocumentKeyDown&&(N(this.ownerDocument,g,this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))}));break;case"multiple":this.$nextTick((()=>{if(this.$canvas){const t=this.$getSelections();i?(t.forEach((t=>{t.active=!1})),this.active=!0,this.$emit(y,{x:this.x,y:this.y,width:this.width,height:this.height})):(this.active=!1,t.slice(1).forEach((t=>{this.$removeSelection(t)})))}}));break;case"precise":this.$nextTick((()=>{this.$change(this.x,this.y)}));break;case"linked":i&&(this.dynamic=!0)}}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(s));t?(this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render(),this.$initSelection(!0),this.$onCanvasActionStart=this.$handleActionStart.bind(this),this.$onCanvasActionEnd=this.$handleActionEnd.bind(this),this.$onCanvasAction=this.$handleAction.bind(this),O(t,b,this.$onCanvasActionStart),O(t,f,this.$onCanvasActionEnd),O(t,v,this.$onCanvasAction)):this.$render()}disconnectedCallback(){const{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(N(t,b,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(N(t,f,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(N(t,v,this.$onCanvasAction),this.$onCanvasAction=null)),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(h)))),t}$initSelection(t=!1,e=!1){const{initialCoverage:i,parentElement:s}=this;if(k(i)&&s){const n=this.aspectRatio||this.initialAspectRatio;let h=(e?0:this.width)||s.offsetWidth*i,a=(e?0:this.height)||s.offsetHeight*i;k(n)&&({width:h,height:a}=L({aspectRatio:n,width:h,height:a})),this.$change(this.x,this.y,h,a),t&&this.$center(),this.$initialSelection={x:this.x,y:this.y,width:this.width,height:this.height}}}$createSelection(){const t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),t.initialCoverage=NaN,this.active=!1,this.parentElement&&this.parentElement.insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){const e=this.$getSelections();if(e.length>1){const i=e.indexOf(t),s=e[i+1]||e[i-1];s&&(t.active=!1,this.parentElement.removeChild(t),s.active=!0,s.$emit(y,{x:s.x,y:s.y,width:s.width,height:s.height}))}else this.$clear()}}$handleActionStart(t){var e,i;const s=null===(i=null===(e=t.detail)||void 0===e?void 0:e.relatedEvent)||void 0===i?void 0:i.target;this.$action="",this.$actionStartTarget=s,!this.hidden&&this.multiple&&!this.active&&s===this&&this.parentElement&&(this.$getSelections().forEach((t=>{t.active=!1})),this.active=!0,this.$emit(y,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){const{currentTarget:e,detail:i}=t;if(!e||!i)return;const{relatedEvent:s}=i;let{action:n}=i;if(!n&&this.multiple&&(n=this.$action||(null==s?void 0:s.target.action),this.$action=n),!n||this.hidden&&n!==a||this.multiple&&!this.active&&n!==o)return;const h=i.endX-i.startX,c=i.endY-i.startY,{width:r,height:l}=this;let{aspectRatio:d}=this;switch(!k(d)&&s.shiftKey&&(d=k(r)&&k(l)?r/l:1),n){case a:if(0!==h&&0!==c){const{$canvas:t}=this,s=K(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(i.startX-s.left,i.startY-s.top,Math.abs(h),Math.abs(c),d),h<0?c<0?n=$:c>0&&(n=m):h>0&&(c<0?n=u:c>0&&(n=p)),t&&(t.$action=n)}break;case"move":this.movable&&(this.dynamic||this.$actionStartTarget&&this.contains(this.$actionStartTarget))&&this.$move(h,c);break;case o:if(s&&this.zoomable&&(this.dynamic||this.contains(s.target))){const t=K(e);this.$zoom(i.scale,s.pageX-t.left,s.pageY-t.top)}break;default:this.$resize(n,h,c,d)}}$handleActionEnd(){this.$action="",this.$actionStartTarget=null}$handleKeyDown(t){if(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented)return;const{activeElement:e}=document;if(!e||!["INPUT","TEXTAREA"].includes(e.tagName)&&!["true","plaintext-only"].includes(e.contentEditable))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1)}}$center(){const{parentElement:t}=this;if(!t)return this;const e=(t.offsetWidth-this.width)/2,i=(t.offsetHeight-this.height)/2;return this.$change(e,i)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,i=0,s=this.aspectRatio){if(!this.resizable)return this;const n=k(s),{$canvas:h}=this;let{x:a,y:o,width:g,height:v}=this;switch(t){case c:o+=i,v-=i,v<0&&(t=l,v=-v,o-=v),n&&(a+=(e=i*s)/2,g-=e,g<0&&(g=-g,a-=g));break;case r:g+=e,g<0&&(t=d,g=-g,a-=g),n&&(o-=(i=e/s)/2,v+=i,v<0&&(v=-v,o-=v));break;case l:v+=i,v<0&&(t=c,v=-v,o-=v),n&&(a-=(e=i*s)/2,g+=e,g<0&&(g=-g,a-=g));break;case d:a+=e,g-=e,g<0&&(t=r,g=-g,a-=g),n&&(o+=(i=e/s)/2,v-=i,v<0&&(v=-v,o-=v));break;case u:n&&(i=-e/s),o+=i,v-=i,g+=e,g<0&&v<0?(t=m,g=-g,v=-v,a-=g,o-=v):g<0?(t=$,g=-g,a-=g):v<0&&(t=p,v=-v,o-=v);break;case $:n&&(i=e/s),a+=e,o+=i,g-=e,v-=i,g<0&&v<0?(t=p,g=-g,v=-v,a-=g,o-=v):g<0?(t=u,g=-g,a-=g):v<0&&(t=m,v=-v,o-=v);break;case p:n&&(i=e/s),g+=e,v+=i,g<0&&v<0?(t=$,g=-g,v=-v,a-=g,o-=v):g<0?(t=m,g=-g,a-=g):v<0&&(t=u,v=-v,o-=v);break;case m:n&&(i=-e/s),a+=e,g-=e,v+=i,g<0&&v<0?(t=u,g=-g,v=-v,a-=g,o-=v):g<0?(t=p,g=-g,a-=g):v<0&&(t=$,v=-v,o-=v)}return h&&h.$setAction(t),this.$change(a,o,g,v)}$zoom(t,e,i){if(!this.zoomable||0===t)return this;t<0?t=1/(1-t):t+=1;const{width:s,height:n}=this,h=s*t,a=n*t;let o=this.x,c=this.y;return S(e)&&S(i)?(o-=(h-s)*((e-this.x)/s),c-=(a-n)*((i-this.y)/n)):(o-=(h-s)/2,c-=(a-n)/2),this.$change(o,c,h,a)}$change(t,e,i=this.width,s=this.height,n=this.aspectRatio,h=!1){return this.$changing||!S(t)||!S(e)||!S(i)||!S(s)||i<0||s<0?this:(k(n)&&({width:i,height:s}=L({aspectRatio:n,width:i,height:s},"cover")),this.precise||(t=Math.round(t),e=Math.round(e),i=Math.round(i),s=Math.round(s)),t===this.x&&e===this.y&&i===this.width&&s===this.height&&Object.is(n,this.aspectRatio)&&!h?this:(this.hidden&&(this.hidden=!1),!1===this.$emit(y,{x:t,y:e,width:i,height:s})?this:(this.$changing=!0,this.x=t,this.y=e,this.width=i,this.height=s,this.$changing=!1,this.$render())))}$reset(){const{x:t,y:e,width:i,height:s}=this.$initialSelection;return this.$change(t,e,i,s)}$clear(){return this.$change(0,0,0,0,NaN,!0),this.hidden=!0,this}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise(((e,i)=>{if(!this.isConnected)return void i(new Error("The current element is not connected to the DOM."));const s=document.createElement("canvas");let{width:h,height:a}=this,o=1;if(x(t)&&(k(t.width)||k(t.height))&&(({width:h,height:a}=L({aspectRatio:h/a,width:t.width,height:t.height})),o=h/this.width),s.width=h,s.height=a,!this.$canvas)return void e(s);const c=this.$canvas.querySelector(this.$getTagNameOf(n));c?c.$ready().then((i=>{const n=s.getContext("2d");if(n){const[e,r,l,d,u,$]=c.$getTransform(),p=-this.x,m=-this.y,g=(p*d-l*m)/(e*d-l*r),v=(m*e-r*p)/(e*d-l*r);let f=e*g+l*v+u,b=r*g+d*v+$,y=i.naturalWidth,w=i.naturalHeight;1!==o&&(f*=o,b*=o,y*=o,w*=o);const S=y/2,k=w/2;n.fillStyle="transparent",n.fillRect(0,0,h,a),x(t)&&"function"==typeof t.beforeDraw&&t.beforeDraw.call(this,n,s),n.save(),n.translate(S,k),n.transform(e,r,l,d,f,b),n.translate(-S,-k),n.drawImage(i,0,0,y,w),n.restore()}e(s)})).catch(i):e(s)}))}}return Z.$name=h,Z.$version="2.0.0",Z}));