1import{DialogCloseEvent}from"./dialog.js";import{clamp,preventDefault,isMobileBreakpoint}from"./utilities.js";import{Component}from"@theme/component";const MIN_ZOOM=1,MAX_ZOOM=5,DEFAULT_ZOOM=1.5,DOUBLE_TAP_DELAY=300,DOUBLE_TAP_DISTANCE=50,DRAG_THRESHOLD=10;export class DragZoomWrapper extends Component{requiredRefs=["image"];#t=new AbortController;#s=1.5;#e=0;#i=1.5;#a={x:0,y:0};#n={x:0,y:0};#r={x:0,y:0};#o=!1;#h=!1;#l=null;#c=0;#m=null;#d=!1;#g=!1;get#u(){return this.refs.image}connectedCallback(){super.connectedCallback(),this.#u&&(this.#p(),window.addEventListener(DialogCloseEvent.eventName,this.#T),isMobileBreakpoint()&&(this.#y(),this.#D()))}#p(){this.#f.observe(this)}#y(){if(this.#h)return;this.#h=!0;const{signal:t}=this.#t,s={passive:!1,signal:t};this.addEventListener("touchstart",this.#x,s),this.addEventListener("touchmove",this.#v,s),this.addEventListener("touchend",this.#z,s),this.#D()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(DialogCloseEvent.eventName,this.#T),this.#t.abort(),this.#f.disconnect(),this.#P()}#E=()=>{!this.#h&&isMobileBreakpoint()&&this.#y(),this.#h&&this.#F()};#f=new ResizeObserver(this.#E);#x=t=>{preventDefault(t);const s=t.touches.length;if(2===s){const s=t.touches[0],e=t.touches[1];if(!s||!e)return;this.#M(s,e)}else if(1===s){const s=t.touches[0];if(!s)return;const e=performance.now();if(e-this.#c>=300)return this.#b(e,s),void this.#Z(s);if(this.#m){if(getDistance(s,this.#m)<50)return this.#L(s),this.#c=0,void(this.#m=null)}this.#b(e,s),this.#Z(s)}};#M(t,s){this.#e=getDistance(t,s),this.#i=this.#s,this.#o=!1}#Z(t){this.#n={x:t.clientX,y:t.clientY},this.#r={x:this.#a.x,y:this.#a.y},this.#o=!0,this.#d=!1}#b(t,s){this.#c=t,this.#m={x:s.clientX,y:s.clientY}}#L(t){const s=this.clientWidth/2,e=this.clientHeight/2;let i;if(this.#g)i=1,this.#g=!1,this.#a={x:0,y:0};else{const t=.05;i=Math.abs(this.#s-1)<t?1.5:1}if(1!==i){const a=this.#s;this.#s=Math.min(5,i);const n={x:t.clientX-s,y:t.clientY-e},r=this.#s/a-1;this.#a.x-=n.x*r/this.#s,this.#a.y-=n.y*r/this.#s}else this.#s=i,this.#a={x:0,y:0};this.#F()}#v=t=>{preventDefault(t);const s=t.touches.length;if(2===s){const s=t.touches[0],e=t.touches[1];s&&e&&this.#w(s,e)}else if(1===s&&this.#o){const s=t.touches[0];s&&this.#A(s)}};#w(t,s){const e=(t.clientX+s.clientX)/2,i=(t.clientY+s.clientY)/2,a=getDistance(t,s),n=this.#s,r=a/this.#e*this.#i;this.#s=clamp(r,1,5),this.#g=!0;const o=e-this.clientWidth/2,h=i-this.clientHeight/2,l=this.#s/n-1;this.#a.x-=o*l/this.#s,this.#a.y-=h*l/this.#s,this.#F(),this.#o=!1}#A(t){const s=getDistance(t,this.#n);if(!this.#d&&s<10)return;this.#d=!0;const e=t.clientX-this.#n.x,i=t.clientY-this.#n.y;this.#a.x=this.#r.x+e/this.#s,this.#a.y=this.#r.y+i/this.#s,this.#F()}#z=t=>{0===t.touches.length&&(this.#o=!1,this.#F(),this.#d=!1)};#O(){const t=this.clientWidth,s=this.clientHeight;if(!t||!s||!this.#u)return;if(this.#s=clamp(this.#s,1,5),this.#s<=1)return this.#a.x=0,void(this.#a.y=0);const e=this.getBoundingClientRect(),i=this.#u;let a,n;i.naturalWidth>0&&i.naturalHeight>0?(a=i.naturalWidth,n=i.naturalHeight):(a=e.width,n=e.width);const r=a/n;let o,h;r>e.width/e.height?(o=e.width,h=o/r):(h=e.height,o=h*r);const l=o*this.#s,c=h*this.#s,m=Math.max(0,l-e.width),d=Math.max(0,c-e.height),g=m/2/this.#s,u=d/2/this.#s;this.#a.x=clamp(this.#a.x,-g,g),this.#a.y=clamp(this.#a.y,-u,u),this.style.setProperty("--drag-zoom-scale",this.#s.toString()),this.style.setProperty("--drag-zoom-translate-x",`${this.#a.x}px`),this.style.setProperty("--drag-zoom-translate-y",`${this.#a.y}px`)}#F=()=>{this.#l||(this.#l=requestAnimationFrame(this.#D))};#P(){this.#l&&(cancelAnimationFrame(this.#l),this.#l=null)}#D=()=>{this.#l=null,this.#O(),this.style.setProperty("--drag-zoom-scale",this.#s.toString()),this.style.setProperty("--drag-zoom-translate-x",`${this.#a.x}px`),this.style.setProperty("--drag-zoom-translate-y",`${this.#a.y}px`)};#T=()=>{this.#s=1.5,this.#i=1.5,this.#a.x=0,this.#a.y=0,this.#n={x:0,y:0},this.#r={x:0,y:0},this.#o=!1,this.#c=0,this.#m=null,this.#d=!1,this.style.setProperty("--drag-zoom-scale",1.5.toString()),this.style.setProperty("--drag-zoom-translate-x","0px"),this.style.setProperty("--drag-zoom-translate-y","0px")};destroy(){this.#t.abort(),this.#P()}}function getDistance(t,s){const e=t.x??t.clientX,i=t.y??t.clientY,a=e-(s.x??s.clientX),n=i-(s.y??s.clientY);return Math.sqrt(a*a+n*n)}customElements.get("drag-zoom-wrapper")||customElements.define("drag-zoom-wrapper",DragZoomWrapper);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.