svelte-deep-zoom
Version:
 
2 lines (1 loc) • 7.29 kB
JavaScript
var T=class{constructor(e,i=0,n=1){this.duration=e;this.from=i;this.to=n;this._range=this.to-this.from}_range;_start=0;_position=0;update(e){this._start===0&&(this._start=e),this._position=Math.min(this.duration,e-this._start)/this.duration}reset(){this._start=0,this._position=0}get value(){return this._range*this._position+this.from}get animating(){return this._position<.9999}};var j=class{busyIn;busyOut;constructor(){}init(){this.busyIn=void 0,this.busyOut=void 0}render(e,i,n,s,r,m,c){c?this.busyIn?this.busyIn.update(i):this.busyOut?(this.busyIn=new T(60,this.busyOut.value,1),this.busyOut=void 0):this.busyIn=new T(60,0,1):this.busyOut?this.busyOut.update(i):this.busyIn?(this.busyOut=new T(500,this.busyIn.value,0),this.busyIn=void 0):this.busyOut=new T(500,1,0);let l=!1;return this.busyIn&&this.busyIn.animating&&(l=!0,this.renderSpinner(e,i,this.busyIn.value)),this.busyOut&&this.busyOut.animating&&(l=!0,this.renderSpinner(e,i,this.busyOut.value)),l}renderSpinner(e,i,n){let s=i/1e3%2,r=50,m=50,c=24,l=6,f=s*Math.PI,d=f+1*Math.PI;e.save(),e.resetTransform(),e.globalAlpha=n,e.beginPath(),e.arc(r,m,c,f,d,!1),e.lineWidth=l,e.strokeStyle="rgba(255,255,255,0.8)",e.stroke(),e.beginPath(),e.arc(r,m,c,d,f,!1),e.lineWidth=l,e.strokeStyle="rgba(0,0,0,0.4)",e.stroke(),e.restore()}};var H=class{constructor(e=["#437AB2","#1B9E77","#D95F02","#7570B3","#E7298A","#66A61E","#E6AB02","#A6761D"]){this.colors=e}init(){}render(e,i,n,s,r,m,c){let l=-1,f;e.font="16px arial",e.lineWidth=1;for(let d of m){let{tile:o,image:a,opacity:b,coords:g}=d,u=o.layer;u.level!==l&&(l>-1&&e.restore(),l=u.level,f=this.colors[l%this.colors.length],e.fillStyle=f,e.strokeStyle=f,e.save(),e.scale(u.deepzoom.width/u.width,u.deepzoom.height/u.height)),a&&(e.globalAlpha=b,e.strokeRect(g.x1,g.y1,g.w,g.h),e.fillText(`${o.layer.level}:${o.col}:${o.row}`,g.x1+2,g.y1+18))}return l>-1&&e.restore(),!1}};var A=class{constructor(e,i,n=256,s=0){this.width=e;this.height=i;this.size=n;this.overlap=s;this.minLevel=Math.ceil(Math.log2(n)),this.maxLevel=this.minLevel;let r=Math.ceil(Math.log2(Math.max(e,i)));for(let m=0;m<=r;m++){this.maxLevel=this.minLevel+m;let c=new F(this,m);if(this.layers.push(c),c.cols===1&&c.rows===1)break}}minLevel;maxLevel;layers=[];layer(e){return this.layers[this.maxLevel-e]}},F=class{constructor(e,i){this.deepzoom=e;this.depth=i;this.scale=Math.pow(.5,i),this.width=Math.ceil(e.width*this.scale),this.height=Math.ceil(e.height*this.scale),this.cols=Math.ceil(this.width/e.size),this.rows=Math.ceil(this.height/e.size)}scale;width;height;cols;rows;get level(){return this.deepzoom.maxLevel-this.depth}},Z=class{constructor(e,i,n){this.layer=e;this.col=i;this.row=n;let s=this.layer.deepzoom.size,r=this.layer.deepzoom.overlap;this.x1=Math.max(this.col*s-r,0),this.y1=Math.max(this.row*s-r,0),this.x2=Math.min((this.col+1)*s+r,this.layer.width),this.y2=Math.min((this.row+1)*s+r,this.layer.height)}x1;y1;x2;y2};var B=class{constructor(e,i,n,s,r){this.dz=e;this.minTileZoom=i;this.maxTileZoom=n;this.opacityDuration=s;this.adjust=r}cache=new Map;getImageTile(e,i,n){let s=`${e.level}:${i}:${n}`,r=this.cache.get(s);return r===void 0&&(r={tile:new Z(e,i,n),opacity:new T(this.opacityDuration),priority:0,failed:!1},this.cache.set(s,r)),r}render(e,i,n){let s=[];for(let o=this.dz.minLevel;o<=this.dz.maxLevel;o++){let a=this.dz.layer(o),b=i.xz/a.scale;if(b<this.minTileZoom)break;let g=b>1?1:(1-this.minTileZoom/b)/(1-this.minTileZoom),u={x1:i.x1*a.scale,y1:i.y1*a.scale,x2:i.x2*a.scale,y2:i.y2*a.scale};s[o]={layer:a,bounds:u,opacity:g}}let r=[],m=[],c=1,l=0,f=!1,d=(o=this.dz.minLevel,a=0,b=0,g=!0)=>{let u=s[o];if(u===void 0)return!1;let{layer:x,bounds:I}=u;if(a>=x.cols||b>=x.rows)return!0;let y=this.getImageTile(x,a,b),h=y.tile;if(h.x1>I.x2||h.x2<I.x1||h.y1>I.y2||h.y2<I.y1)return!0;let z=y.image&&y.image.complete,L=!1;if(o<this.dz.maxLevel){o++,a*=2,b*=2;let t=z&&!y.opacity.animating,v=d(o,a,b,t),w=d(o,a+1,b,t),_=d(o,a,b+1,t),D=d(o,a+1,b+1,t);L=v&&w&&_&&D}if(z){if(!L&&g){y.opacity.animating&&(f=!0,y.opacity.update(e));let t=y.image,v=y.opacity.value*u.opacity,w={x1:h.x1-this.adjust,y1:h.y1-this.adjust,w:h.x2-h.x1+this.adjust,h:h.y2-h.y1+this.adjust};y.failed||r.push({tile:h,image:t,opacity:v,coords:w}),c=Math.min(c,u.opacity),l=Math.max(l,v)}return u.opacity===1&&!y.opacity.animating&&!y.failed}if(!y.image){let t={x:(h.x1+h.x2)/2,y:(h.y1+h.y2)/2},v=n.x*x.scale-t.x,w=n.y*x.scale-t.y,_=v*v+w*w;y.priority=_,m.push(y)}return!1};return d(),r.reverse(),m.sort((o,a)=>o.tile.layer.level===a.tile.layer.level?o.priority-a.priority:o.tile.layer.level-a.tile.layer.level),{animating:f,drawTiles:r,required:m,maxOpacity:l}}};var R=class{constructor(e,i=0){this.src=e;this.concurrency=i}queue=[];active=0;load(e){this.queue=e,this.next()}next(){if(this.queue.length===0||this.concurrency>0&&this.active>=this.concurrency)return;this.active++;let e=this.queue.shift(),i=e.tile;e.image=new Image,e.image.onerror=()=>{e.failed=!0,this.active--,this.next()},e.image.onload=()=>{this.active--,this.next()},e.image.src=this.src(i.layer.level,i.col,i.row)}get count(){return this.queue.length+this.active}};import{panzoom as K}from"svelte-pan-zoom";var Q={size:256,overlap:1,concurrency:12,overlays:[],minTileZoom:.8,maxTileZoom:2,opacityDuration:250,imageSmoothing:"low"};function he(p,e){let{width:i,height:n,size:s,overlap:r,src:m,overlays:c,concurrency:l,minTileZoom:f,maxTileZoom:d,opacityDuration:o,imageSmoothing:a}={...Q,...e},b=p.getContext("2d",{desynchronized:!0}),g,u,x,I,y=K(p,{width:i,height:n,render:z,maxZoom:d});function h(){g=new A(i,n,s,r),u=new R(m,l),x=new B(g,f,d,o,r===0?.5:0);for(let t of c)t.init()}function z(t,v,w){if(!x)return;t.save(),t.resetTransform(),t.clearRect(0,0,p.width,p.height),t.restore(),a==="none"?t.imageSmoothingEnabled=!1:t.imageSmoothingQuality=a;let _=L(),{animating:D,drawTiles:M,required:k,maxOpacity:G}=x.render(v,_,w);u.load(k);let S=-1;for(let V of M){let{tile:O,image:q,opacity:U,coords:C}=V,E=O.layer;if(E.level!==S&&(S>-1&&t.restore(),S=E.level,t.save(),t.scale(g.width/E.width,g.height/E.height)),q&&q.complete){t.globalAlpha=U;try{t.drawImage(q,C.x1,C.y1,C.w,C.h)}catch(J){console.warn("failed to render tile",O.layer.level,O.col,O.row,J)}}}S>-1&&t.restore();let $=u.count>0,P=D||$;for(let V of c){let O=V.render(t,v,i,n,G,M,$);P=P||O}return P}function L(){let t=b.getTransform().inverse(),v=t.e,w=t.f,_=t.a*p.width+t.e,D=t.d*p.height+t.f,M=1/t.a,k=1/t.d;return{x1:v,y1:w,x2:_,y2:D,xz:M,yz:k}}return h(),{update(t){({width:i,height:n,size:s,overlap:r,src:m,overlays:c,concurrency:l,minTileZoom:f,maxTileZoom:d,opacityDuration:o,imageSmoothing:a}={...Q,...t}),y.update({width:i,height:n,render:z,maxZoom:d}),h()},destroy(){y.destroy()}}}var W=class{constructor(e){this.src=e;this._img=new Image,this._img.src=e}_img;_offset={x:0,y:0};_scale=0;init(){}render(e,i,n,s,r,m,c){if(this._img.complete){if(this._scale===0){let l=n/s;this._img.width/this._img.height>l?(this._scale=n/this._img.width,this._offset={x:0,y:(s/this._scale-this._img.height)/2}):(this._scale=s/this._img.height,this._offset={x:(n/this._scale-this._img.width)/2,y:0})}e.save(),e.scale(this._scale,this._scale),e.globalAlpha=r,e.drawImage(this._img,this._offset.x,this._offset.y),e.restore()}return!1}};export{j as Busy,H as Debug,W as Watermark,he as deepzoom};