@lancercomet/zoom-pan 0.2.2 → 0.4.0

package/dist/index.module.js

@@ -1 +1 @@
-function t(t,i,e,s){return new(e||(e=Promise))(function(n,h){function o(t){try{r(s.next(t))}catch(t){h(t)}}function a(t){try{r(s.throw(t))}catch(t){h(t)}}function r(t){var i;t.done?n(t.value):(i=t.value,i instanceof e?i:new e(function(t){t(i)})).then(o,a)}r((s=s.apply(t,i||[])).next())})}function i(t,i,e,s){if("a"===e&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof i?t!==i||!s:!i.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?s:"a"===e?s.call(t):s?s.value:i.get(t)}function e(t,i,e,s,n){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof i?t!==i||!n:!i.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?n.call(t,e):n?n.value=e:i.set(t,e),e}"function"==typeof SuppressedError&&SuppressedError;const s=(i,e)=>t(void 0,void 0,void 0,function*(){return new Promise((t,s)=>{const n=new Image;"string"==typeof i?(void 0!==e&&(n.crossOrigin=e),n.src=i):n.src=URL.createObjectURL(i),n.onload=()=>{t(n)},n.onerror=()=>{s(new Error("Image load failed"))}})}),n=(t,i,e)=>Math.min(Math.max(t,i),e);class h{get zoom(){return Math.exp(this._currentLogZ)}get minZoom(){return this._options.minZoom}get maxZoom(){return this._options.maxZoom}get isAnimating(){return this._isAnimatingTransform}get dpr(){return this._dpr}use(t){return this._plugins.has(t.name)?(console.warn(`Plugin "${t.name}" is already installed.`),t):(this._plugins.set(t.name,t),t.install(this),t)}unuse(t){const i=this._plugins.get(t);i&&(i.destroy(),this._plugins.delete(t))}getPlugin(t){return this._plugins.get(t)}onUpdate(t){this._updateCallbacks.add(t)}offUpdate(t){this._updateCallbacks.delete(t)}onBeforeRender(t){this._beforeRenderCallbacks.add(t)}offBeforeRender(t){this._beforeRenderCallbacks.delete(t)}onAfterRender(t){this._afterRenderCallbacks.add(t)}offAfterRender(t){this._afterRenderCallbacks.delete(t)}requestRender(){this._needsRender=!0}_clampLog(t){return n(t,this.LOG_MIN,this.LOG_MAX)}_setTargetLogZoomAtScreen(t,i,e){Number.isFinite(e)&&(this._anchorX=t,this._anchorY=i,this._targetLogZ=this._clampLog(e),this._needsRender=!0)}zoomToAtScreen(t,i,e){this._setTargetLogZoomAtScreen(t,i,Math.log(e))}zoomToAtScreenRaw(t,i,e){if(!Number.isFinite(e))return;const s=Math.max(1e-8,this._options.minZoom),h=this._options.maxZoom,o=n(e,s,h),a=Math.exp(this._currentLogZ),r=o;if(!Number.isFinite(a)||a<=0)return;if(Math.abs(r-a)<1e-12)return;const c=Math.log(o);this._currentLogZ=c,this._targetLogZ=c;const _=r/a;this._tx=t-(t-this._tx)*_,this._ty=i-(i-this._ty)*_,this._needsRender=!0}zoomToAtWorld(t,i,e){const{x:s,y:n}=this.toScreen(t,i);this.zoomToAtScreen(s,n,e)}zoomByFactorAtScreen(t,i,e){if(e<=0||!Number.isFinite(e))return;const s=Math.log(e);this._setTargetLogZoomAtScreen(t,i,this._targetLogZ+s)}zoomByLogAtScreen(t,i,e){this._setTargetLogZoomAtScreen(t,i,this._targetLogZ+e)}zoomByFactorAtWorld(t,i,e){const{x:s,y:n}=this.toScreen(t,i);this.zoomByFactorAtScreen(s,n,e)}panBy(t,i){this._tx+=t,this._ty+=i,this._needsRender=!0}setPan(t,i){this._tx=t,this._ty=i,this._needsRender=!0}setTransform(t,i,e){const s=n(t,this._options.minZoom,this._options.maxZoom);this._currentLogZ=Math.log(s),this._targetLogZ=this._currentLogZ,this._tx=i,this._ty=e,this._targetTx=null,this._targetTy=null,this._needsRender=!0}setTransformSmooth(t,i,e){const s=n(t,this._options.minZoom,this._options.maxZoom);this._targetLogZ=Math.log(s),this._targetTx=i,this._targetTy=e,this._isAnimatingTransform=!0,this._needsRender=!0}_ensureOffscreenSizeLike(t,i){t.width===i.width&&t.height===i.height||(t.width=i.width,t.height=i.height)}_loop(){if(this._isResizing)return void(this._raf=requestAnimationFrame(()=>this._loop()));const t=performance.now(),i=Math.max(1,t-this._lastFrameTs);this._lastFrameTs=t;const{approachKZoom:e}=this._options,s=Math.exp(this._currentLogZ),n=this._targetLogZ-this._currentLogZ,h=Math.abs(n)>1e-6;if(h){const t=1-Math.exp(-e*i);this._currentLogZ+=n*t}const o=Math.exp(this._currentLogZ);if(o!==s){const t=this._anchorX,i=this._anchorY,e=o/s;this._tx=t-(t-this._tx)*e,this._ty=i-(i-this._ty)*e}let a=!1;if(null!==this._targetTx&&null!==this._targetTy){const t=1-Math.exp(-this._options.approachKPan*i),e=this._targetTx-this._tx,s=this._targetTy-this._ty;a=Math.abs(e)>.5||Math.abs(s)>.5,a?(this._tx+=e*t,this._ty+=s*t):(this._tx=this._targetTx,this._ty=this._targetTy,this._targetTx=null,this._targetTy=null)}if(this._isAnimatingTransform){const t=Math.abs(this._targetLogZ-this._currentLogZ)<1e-5,i=null===this._targetTx&&null===this._targetTy;t&&i&&(this._isAnimatingTransform=!1)}if(this._isResetting){const t=1-Math.exp(-this._options.approachKPan*i);this._tx+=(0-this._tx)*t,this._ty+=(0-this._ty)*t;const e=Math.abs(this._currentLogZ)<.001&&Math.abs(this._targetLogZ)<1e-6,s=Math.abs(this._tx)<.5&&Math.abs(this._ty)<.5;e&&s&&(this._currentLogZ=0,this._targetLogZ=0,this._tx=0,this._ty=0,this._isResetting=!1)}for(const t of this._updateCallbacks)t(i);if(!(this._needsRender||h||a||this._isResetting))return void(this._raf=requestAnimationFrame(()=>this._loop()));this._needsRender=!1;const r=this.contentCanvas,c=this.contentContext,_=this.topScreenCanvas,l=this.topScreenContext,d=this.canvas,u=this.context;this._ensureOffscreenSizeLike(r,d),this._ensureOffscreenSizeLike(_,d),c.setTransform(1,0,0,1,0,0),l.setTransform(1,0,0,1,0,0),u.setTransform(1,0,0,1,0,0);const g=this._options.background;"string"==typeof g&&""!==g.trim()&&"transparent"!==g.toLowerCase()?(u.fillStyle=g,u.fillRect(0,0,d.width,d.height)):u.clearRect(0,0,d.width,d.height),c.clearRect(0,0,r.width,r.height),l.clearRect(0,0,_.width,_.height),c.setTransform(this._dpr*o,0,0,this._dpr*o,this._dpr*this._tx,this._dpr*this._ty);for(const t of this._beforeRenderCallbacks)t(c);this._render(this);for(const t of this._afterRenderCallbacks)t(c);u.drawImage(r,0,0),u.drawImage(_,0,0),this._raf=requestAnimationFrame(()=>this._loop())}applyWorldTransform(t){const i=Math.exp(this._currentLogZ);t.setTransform(this._dpr*i,0,0,this._dpr*i,this._dpr*this._tx,this._dpr*this._ty)}applyScreenTransform(t){t.setTransform(this._dpr,0,0,this._dpr,0,0)}getPixelColorAtScreen(t,i){const e=Math.floor(t*this._dpr),s=Math.floor(i*this._dpr);if(e<0||s<0||e>=this.canvas.width||s>=this.canvas.height)return{r:0,g:0,b:0,a:0,rgba:"rgba(0,0,0,0)",hex:"#000000"};const n=this.contentContext.getImageData(e,s,1,1).data,h=n[0],o=n[1],a=n[2],r=n[3]/255,c=t=>t.toString(16).padStart(2,"0"),_=`#${c(h)}${c(o)}${c(a)}`;return{r:h,g:o,b:a,a:r,rgba:`rgba(${h},${o},${a},${r.toFixed(3)})`,hex:_}}getPixelColorAtWorld(t,i){const{x:e,y:s}=this.toScreen(t,i);return this.getPixelColorAtScreen(e,s)}registerLayerManager(t){t&&(this._layerManagers.includes(t)||(this._layerManagers.push(t),this._needsRender=!0))}unregisterLayerManager(t){const i=this._layerManagers.indexOf(t);i>=0&&(this._layerManagers.splice(i,1),this._needsRender=!0)}getLayerManagers(){return[...this._layerManagers]}resetSmooth(){this._isResetting=!0,this._targetLogZ=0,this._needsRender=!0}resetInstant(){this._currentLogZ=0,this._targetLogZ=0,this._tx=0,this._ty=0,this._needsRender=!0}toWorld(t,i){const e=Math.exp(this._currentLogZ);return{wx:(t-this._tx)/e,wy:(i-this._ty)/e}}toScreen(t,i){const e=Math.exp(this._currentLogZ);return{x:t*e+this._tx,y:i*e+this._ty}}getTransform(){return{zoom:Math.exp(this._currentLogZ),tx:this._tx,ty:this._ty}}getViewportBounds(){const t=Math.exp(this._currentLogZ),i=this.canvas.width/this._dpr,e=this.canvas.height/this._dpr,s=-this._tx/t,n=-this._ty/t,h=(i-this._tx)/t,o=(e-this._ty)/t;return{left:s,top:n,right:h,bottom:o,width:h-s,height:o-n}}setZoomRange(t,i){this._options.minZoom=t,this._options.maxZoom=i,this.LOG_MIN=Math.log(t),this.LOG_MAX=Math.log(i),this._targetLogZ=Math.min(this.LOG_MAX,Math.max(this.LOG_MIN,this._targetLogZ))}resizeToParent(){this._isResizing=!0;const t=(this.canvas.parentElement||this.canvas).getBoundingClientRect();this._dpr=Math.max(1,window.devicePixelRatio||1);const i=Math.max(1,Math.round(t.width)),e=Math.max(1,Math.round(t.height));this.canvas.width=Math.round(i*this._dpr),this.canvas.height=Math.round(e*this._dpr),this.canvas.style.width=`${i}px`,this.canvas.style.height=`${e}px`,this._ensureOffscreenSizeLike(this.contentCanvas,this.canvas),this._ensureOffscreenSizeLike(this.topScreenCanvas,this.canvas),clearTimeout(this._resizeReleaseTimer),this._resizeReleaseTimer=window.setTimeout(()=>{this._isResizing=!1},50)}destroy(){cancelAnimationFrame(this._raf);for(const t of this._plugins.values())t.destroy();this._plugins.clear(),this._resizeObserver&&this._resizeObserver.disconnect(),this._layerManagers=[],this._updateCallbacks.clear(),this._beforeRenderCallbacks.clear(),this._afterRenderCallbacks.clear()}constructor(t,i,e){this._layerManagers=[],this._plugins=new Map,this._isResetting=!1,this._isResizing=!1,this._needsRender=!0,this._raf=0,this._lastFrameTs=performance.now(),this._tx=0,this._ty=0,this._anchorX=0,this._anchorY=0,this._currentLogZ=Math.log(1),this._targetLogZ=Math.log(1),this._targetTx=null,this._targetTy=null,this._isAnimatingTransform=!1,this._updateCallbacks=new Set,this._beforeRenderCallbacks=new Set,this._afterRenderCallbacks=new Set,this._dpr=Math.max(1,window.devicePixelRatio||1);const s=t.getContext("2d",{willReadFrequently:!0,alpha:!0});if(!s)throw new Error("2D context not available");this.canvas=t,this.context=s,this._render=i,this.contentCanvas=document.createElement("canvas"),this.contentCanvas.width=t.width,this.contentCanvas.height=t.height,this.contentContext=this.contentCanvas.getContext("2d",{alpha:!0,willReadFrequently:!0}),this.topScreenCanvas=document.createElement("canvas"),this.topScreenCanvas.width=t.width,this.topScreenCanvas.height=t.height,this.topScreenContext=this.topScreenCanvas.getContext("2d",{alpha:!0}),this._options=Object.assign({minZoom:.5,maxZoom:10,approachKZoom:.022,approachKPan:.022,autoResize:!0,background:"#fff"},e),this.LOG_MIN=Math.log(this._options.minZoom),this.LOG_MAX=Math.log(this._options.maxZoom),this._options.autoResize&&(this._resizeObserver=new ResizeObserver(()=>this.resizeToParent()),this._resizeObserver.observe(this.canvas.parentElement||this.canvas)),this.resizeToParent(),this._lastFrameTs=performance.now(),this._raf=requestAnimationFrame(()=>this._loop())}}let o=0;class a{constructor(t,i,e="world"){this.space="world",this.visible=!0,this.opacity=1,this.blend="source-over",this.name=t,this.id=`layer_${i}_${++o}`,this.type=i,this.space=e}}class r extends a{beginStroke(t,i){const{lx:e,ly:s}=this.toLocalPoint(t,i);this._lastX=e,this._lastY=s,this._drawing=!0}stroke(t,i,e,s,n=1,h="brush"){if(!this._drawing)return;const{lx:o,ly:a}=this.toLocalPoint(t,i);this.context.beginPath(),this.context.moveTo(this._lastX,this._lastY),this.context.lineTo(o,a),"eraser"===h?(this.context.globalCompositeOperation="destination-out",this.context.strokeStyle="rgba(0, 0, 0, 1)"):(this.context.globalCompositeOperation="source-over",this.context.strokeStyle=e),this.context.lineWidth=s*n,this.context.lineCap="round",this.context.lineJoin="round",this.context.stroke(),this.context.closePath(),this._lastX=o,this._lastY=a}endStroke(){this._drawing=!1}isDrawing(){return this._drawing}captureSnapshot(t){try{if(t){const{x:i,y:e,width:s,height:n}=t,h=Math.max(0,Math.floor(i)),o=Math.max(0,Math.floor(e)),a=Math.min(this.canvas.width-h,Math.ceil(s)),r=Math.min(this.canvas.height-o,Math.ceil(n));return a<=0||r<=0?null:this.context.getImageData(h,o,a,r)}return this.context.getImageData(0,0,this.canvas.width,this.canvas.height)}catch(t){return null}}restoreSnapshot(t,i){var e,s;const n=null!==(e=null==i?void 0:i.x)&&void 0!==e?e:0,h=null!==(s=null==i?void 0:i.y)&&void 0!==s?s:0;this.context.putImageData(t,n,h)}clearRegion(t){t?this.context.clearRect(t.x,t.y,t.width,t.height):this.context.clearRect(0,0,this.canvas.width,this.canvas.height)}requestRedraw(){var t;null===(t=this._redraw)||void 0===t||t.call(this,this.context,this.canvas)}drawImage(t,i,e,s,n){this.context.drawImage(t,i,e,null!=s?s:t.width,null!=n?n:t.height)}hitTest(t,i){const{lx:e,ly:s}=this.toLocalPoint(t,i);return e>=0&&e<=this.canvas.width&&s>=0&&s<=this.canvas.height}toLocalPoint(t,i){const e=t-this.x,s=i-this.y,n=Math.cos(-this.rotation),h=Math.sin(-this.rotation),o=e*h+s*n,a=(e*n-s*h)/this.scale,r=o/this.scale;return{lx:a+("center"===this.anchor?this.canvas.width/2:0),ly:r+("center"===this.anchor?this.canvas.height/2:0)}}render(t,i){if(!this.visible)return;const e=this.canvas.width*this.scale,s=this.canvas.height*this.scale,n="center"===this.anchor?-e/2:0,h="center"===this.anchor?-s/2:0;t.save(),t.globalAlpha=this.opacity,t.globalCompositeOperation=this.blend,t.translate(this.x,this.y),t.rotate(this.rotation),t.drawImage(this.canvas,n,h,e,s),t.restore()}cropTo(t){const i=Math.max(1,Math.floor(t.width)),e=Math.max(1,Math.floor(t.height));if(i===this.canvas.width&&e===this.canvas.height)return;const s=this._cloneCanvas(),n=Math.min(s.width,i),h=Math.min(s.height,e);this._setCanvasSize(i,e),n>0&&h>0&&this.context.drawImage(s,0,0,n,h,0,0,n,h)}resizeTo(t){const i=Math.max(1,Math.floor(t.width)),e=Math.max(1,Math.floor(t.height));if(i===this.canvas.width&&e===this.canvas.height)return;const s=this._cloneCanvas();this._setCanvasSize(i,e),s.width>0&&s.height>0&&this.context.drawImage(s,0,0,s.width,s.height,0,0,i,e)}_cloneCanvas(){const t=document.createElement("canvas");if(t.width=this.canvas.width,t.height=this.canvas.height,0===t.width||0===t.height)return t;const i=t.getContext("2d");if(!i)throw new Error("Offscreen 2D context unavailable");return i.drawImage(this.canvas,0,0),t}_setCanvasSize(t,i){this.canvas.width=t,this.canvas.height=i,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,t,i)}destroy(){this.canvas.width=0,this.canvas.height=0}constructor(t){var i,e;if(super(t.name||"","canvas",null!==(i=t.space)&&void 0!==i?i:"world"),this.x=0,this.y=0,this.scale=1,this.rotation=0,this.anchor="topLeft",this._drawing=!1,this._lastX=0,this._lastY=0,"canvas"in t&&t.canvas)this.canvas=t.canvas;else{const i=t;this.canvas=document.createElement("canvas"),this.canvas.width=i.width,this.canvas.height=i.height}const s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Offscreen 2D context unavailable");this.context=s,this.x=t.x||0,this.y=t.y||0,this.scale=null!==(e=t.scale)&&void 0!==e?e:1,this.rotation=t.rotation||0,t.anchor&&(this.anchor=t.anchor),this._redraw=t.redraw,this._redraw&&this._redraw(this.context,this.canvas)}}var c;class _ extends r{static fromImage(i){return t(this,void 0,void 0,function*(){var t,n,h,o,a,r,l,d;const u=yield s(i.src,i.crossOrigin),g=null!==(t=i.width)&&void 0!==t?t:u.naturalWidth,v=null!==(n=i.height)&&void 0!==n?n:u.naturalHeight,p=new _({name:i.name,space:null!==(h=i.space)&&void 0!==h?h:"world",x:null!==(o=i.x)&&void 0!==o?o:0,y:null!==(a=i.y)&&void 0!==a?a:0,scale:null!==(r=i.scale)&&void 0!==r?r:1,rotation:null!==(l=i.rotation)&&void 0!==l?l:0,anchor:null!==(d=i.anchor)&&void 0!==d?d:"topLeft",width:g,height:v});return p.context.clearRect(0,0,p.canvas.width,p.canvas.height),p.context.drawImage(u,0,0,g,v),"string"!=typeof i.src&&e(p,c,u.src.startsWith("blob:")?u.src:null,"f"),p})}setSource(n,h){return t(this,void 0,void 0,function*(){const t=yield s(n,h);if(this.canvas.width=t.naturalWidth,this.canvas.height=t.naturalHeight,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.drawImage(t,0,0),i(this,c,"f")){try{URL.revokeObjectURL(i(this,c,"f"))}catch(t){}e(this,c,null,"f")}"string"!=typeof n&&e(this,c,t.src.startsWith("blob:")?t.src:null,"f")})}paint(t){t(this.context,this.canvas)}getImageData(t=0,i=0,e=this.canvas.width,s=this.canvas.height){return this.context.getImageData(t,i,e,s)}putImageData(t,i=0,e=0){this.context.putImageData(t,i,e)}toDataURL(t="image/png",i){return this.canvas.toDataURL(t,i)}toImageBitmap(t){return createImageBitmap(this.canvas,null!=t?t:{})}destroy(){var t;if(null===(t=super.destroy)||void 0===t||t.call(this),i(this,c,"f")){try{URL.revokeObjectURL(i(this,c,"f"))}catch(t){}e(this,c,null,"f")}}constructor(t){var i,e;super({name:t.name,space:null!==(i=t.space)&&void 0!==i?i:"world",x:t.x,y:t.y,scale:t.scale,rotation:t.rotation,anchor:null!==(e=t.anchor)&&void 0!==e?e:"topLeft",width:t.width,height:t.height}),c.set(this,null),this.type="bitmap"}}c=new WeakMap;class l{constructor(){this._worldLayers=[],this._screenLayers=[]}_renderAllLayersIn(t,i){i.save(),t.applyWorldTransform(i);for(const e of this._worldLayers)!e.visible||e.opacity<=0||(i.save(),e.render(i,t),i.restore());i.restore(),i.save(),t.applyScreenTransform(i);for(const e of this._screenLayers)!e.visible||e.opacity<=0||(i.save(),e.render(i,t),i.restore());i.restore()}addLayer(t,i){const e="world"===t.space?this._worldLayers:this._screenLayers;return"number"==typeof i&&i>=0&&i<e.length?(e.splice(i,0,t),t.id):(e.push(t),t.id)}createImageLayer(i){return t(this,void 0,void 0,function*(){const t=yield _.fromImage(i);return this.addLayer(t),t})}createCanvasLayer(t){const i=new r(t);return this.addLayer(i),i}removeLayer(t){var i,e,s,n;const h=this._worldLayers.findIndex(i=>i.id===t);if(h>=0)return null===(e=(i=this._worldLayers[h]).destroy)||void 0===e||e.call(i),void this._worldLayers.splice(h,1);const o=this._screenLayers.findIndex(i=>i.id===t);o>=0&&(null===(n=(s=this._screenLayers[o]).destroy)||void 0===n||n.call(s),this._screenLayers.splice(o,1))}detachLayer(t){const i=this._worldLayers.findIndex(i=>i.id===t);if(i>=0)return void this._worldLayers.splice(i,1);const e=this._screenLayers.findIndex(i=>i.id===t);e>=0&&this._screenLayers.splice(e,1)}moveLayer(t,i){const e=this._worldLayers.findIndex(i=>i.id===t);if(e>=0){const[t]=this._worldLayers.splice(e,1),s=Math.max(0,Math.min(i,this._worldLayers.length));return void this._worldLayers.splice(s,0,t)}const s=this._screenLayers.findIndex(i=>i.id===t);if(s>=0){const[t]=this._screenLayers.splice(s,1),e=Math.max(0,Math.min(i,this._screenLayers.length));this._screenLayers.splice(e,0,t)}}reorderLayers(t){const i=[];for(const e of t){const t=this._worldLayers.find(t=>t.id===e);t&&i.push(t)}for(const e of this._worldLayers)t.includes(e.id)||i.push(e);this._worldLayers=i}getLayer(t){return this._worldLayers.find(i=>i.id===t)||this._screenLayers.find(i=>i.id===t)}getAllLayers(t){return t?("world"===t?this._worldLayers:this._screenLayers).slice():[...this._worldLayers,...this._screenLayers]}hitTest(t,i,e="world"){const s=this.getAllLayers(e);for(let e=s.length-1;e>=0;e--){const n=s[e];if(n.hitTest&&n.hitTest(t,i))return n}}destroy(){var t;for(const i of[...this._worldLayers,...this._screenLayers])null===(t=i.destroy)||void 0===t||t.call(i);this._worldLayers=[],this._screenLayers=[]}}class d extends l{constructor(){super(...arguments),this._compositeCache=null,this._compositeCacheCtx=null,this._compositeDirty=!0,this._lastCacheWidth=0,this._lastCacheHeight=0,this._cachedBoundsMinX=0,this._cachedBoundsMinY=0}markDirty(){this._compositeDirty=!0}addLayer(t,i){return this._compositeDirty=!0,super.addLayer(t,i)}removeLayer(t){this._compositeDirty=!0,super.removeLayer(t)}detachLayer(t){this._compositeDirty=!0,super.detachLayer(t)}removeAllLayers(t){var i,e;if(!t||"world"===t){for(const t of this._worldLayers)null===(i=t.destroy)||void 0===i||i.call(t);this._worldLayers=[]}if(!t||"screen"===t){for(const t of this._screenLayers)null===(e=t.destroy)||void 0===e||e.call(t);this._screenLayers=[]}}moveLayer(t,i){this._compositeDirty=!0,super.moveLayer(t,i)}renderAllLayersIn(t){const i=t.contentContext,e=this._worldLayers;0!==e.length&&(this._compositeDirty&&this._rebuildCompositeCache(e),this._compositeCache&&this._compositeCacheCtx&&i.drawImage(this._compositeCache,this._cachedBoundsMinX,this._cachedBoundsMinY))}_rebuildCompositeCache(t){let i=0,e=0,s=0,n=0,h=!1;for(const o of t){const t=o,a=t.canvas.width*t.scale,r=t.canvas.height*t.scale,c="center"===t.anchor?-a/2:0,_="center"===t.anchor?-r/2:0,l=Math.cos(t.rotation),d=Math.sin(t.rotation),u=[{x:c,y:_},{x:c+a,y:_},{x:c,y:_+r},{x:c+a,y:_+r}];let g=1/0,v=1/0,p=-1/0,m=-1/0;for(const i of u){const e=i.x*l-i.y*d+t.x,s=i.x*d+i.y*l+t.y;g=Math.min(g,e),v=Math.min(v,s),p=Math.max(p,e),m=Math.max(m,s)}h?(i=Math.min(i,g),e=Math.min(e,v),s=Math.max(s,p),n=Math.max(n,m)):(i=g,e=v,s=p,n=m,h=!0)}if(!h)return void(this._compositeDirty=!1);const o=Math.ceil(s-i),a=Math.ceil(n-e);this._compositeCache||(this._compositeCache=document.createElement("canvas"),this._compositeCacheCtx=this._compositeCache.getContext("2d",{alpha:!0})),this._lastCacheWidth===o&&this._lastCacheHeight===a||(this._compositeCache.width=o,this._compositeCache.height=a,this._lastCacheWidth=o,this._lastCacheHeight=a),this._cachedBoundsMinX=i,this._cachedBoundsMinY=e;const r=this._compositeCacheCtx;r.clearRect(0,0,o,a),r.save(),r.translate(-i,-e);for(const i of t)!i.visible||i.opacity<=0||(r.save(),i.render(r),r.restore());r.restore(),this._compositeDirty=!1}destroy(){super.destroy(),this._compositeCache=null,this._compositeCacheCtx=null}}class u extends l{renderAllLayersIn(t){const i=t.topScreenContext;this._renderAllLayersIn(t,i)}}class g{constructor(t){this.name="interaction",this._view=null,this._dragging=!1,this._vx=0,this._vy=0,this._lastMoveTs=0,this._activePointerId=null,this._lastPointerX=0,this._lastPointerY=0,this._touchPointers=new Map,this._isTouchPanning=!1,this._isPinching=!1,this._lastPinchDistance=0,this._lastPinchCenterX=0,this._lastPinchCenterY=0,this._lastTouchX=0,this._lastTouchY=0,this._onDownBound=t=>this._onPointerDown(t),this._onMoveBound=t=>this._onPointerMove(t),this._onUpBound=t=>this._onPointerUp(t),this._onCancelBound=t=>this._onPointerCancel(t),this._onWheelBound=t=>this._onWheel(t),this._onUpdate=t=>{if(!this._view)return;const{friction:i,stopSpeed:e}=this._options,s=Math.hypot(this._vx,this._vy)>=e;if(!(this._dragging||this._isTouchPanning||this._isPinching)&&s){const s=this._vx*t,n=this._vy*t;this._view.panBy(s,n),this._vx*=i,this._vy*=i,Math.hypot(this._vx,this._vy)<e&&(this._vx=0,this._vy=0)}},this._options=Object.assign({panEnabled:!0,zoomEnabled:!0,friction:.92,stopSpeed:.02,emaAlpha:.25,idleNoInertiaMs:120,wheelSensitivity:.0015},t),this._panEnabled=this._options.panEnabled,this._zoomEnabled=this._options.zoomEnabled}install(t){this._view=t;const i=t.canvas;i.style.touchAction="none",i.addEventListener("wheel",this._onWheelBound,{passive:!1}),i.addEventListener("pointerdown",this._onDownBound),window.addEventListener("pointermove",this._onMoveBound),window.addEventListener("pointerup",this._onUpBound),window.addEventListener("pointercancel",this._onCancelBound),t.onUpdate(this._onUpdate)}destroy(){if(!this._view)return;const t=this._view.canvas;t.removeEventListener("wheel",this._onWheelBound),t.removeEventListener("pointerdown",this._onDownBound),window.removeEventListener("pointermove",this._onMoveBound),window.removeEventListener("pointerup",this._onUpBound),window.removeEventListener("pointercancel",this._onCancelBound),this._touchPointers.clear(),this._isPinching=!1,this._isTouchPanning=!1,this._view.offUpdate(this._onUpdate),this._view=null}isPanEnabled(){return this._panEnabled}isZoomEnabled(){return this._zoomEnabled}setPanEnabled(t){this._panEnabled!==t&&(this._panEnabled=t,t||null===this._activePointerId||(this._dragging=!1,this._vx=0,this._vy=0))}setZoomEnabled(t){this._zoomEnabled!==t&&(this._zoomEnabled=t,!t&&this._isPinching&&this._endPinch())}setWheelSensitivity(t){this._options.wheelSensitivity=t}isDragging(){return this._dragging||this._isTouchPanning||this._isPinching}_onPointerDown(t){var i,e;if(!(null===(i=this._view)||void 0===i?void 0:i.isAnimating))if("touch"!==t.pointerType){if(("mouse"!==t.pointerType||0===t.button)&&this._panEnabled&&null===this._activePointerId){t.preventDefault(),this._dragging=!0,this._vx=0,this._vy=0,this._lastMoveTs=performance.now(),this._activePointerId=t.pointerId,this._lastPointerX=t.clientX,this._lastPointerY=t.clientY;try{null===(e=this._view)||void 0===e||e.canvas.setPointerCapture(t.pointerId)}catch(t){}}}else this._onTouchDown(t)}_onPointerMove(t){var i;if(null===(i=this._view)||void 0===i?void 0:i.isAnimating)return;if("touch"===t.pointerType)return void this._onTouchMove(t);if(t.pointerId!==this._activePointerId)return;if(!this._dragging||!this._panEnabled||!this._view)return;const e=performance.now(),s=Math.max(1,e-(this._lastMoveTs||e-16));this._lastMoveTs=e;const n=t.clientX-this._lastPointerX,h=t.clientY-this._lastPointerY;this._lastPointerX=t.clientX,this._lastPointerY=t.clientY,this._view.panBy(n,h);const o=this._options.emaAlpha,a=n/s,r=h/s;this._vx=(1-o)*this._vx+o*a,this._vy=(1-o)*this._vy+o*r}_onPointerUp(t){if("touch"===t.pointerType)return void this._onTouchUp(t);if(t.pointerId!==this._activePointerId)return;if(!this._dragging)return;this._dragging=!1;const i=performance.now(),e=this._lastMoveTs?i-this._lastMoveTs:1/0;if(null!=this._activePointerId&&this._view){try{this._view.canvas.releasePointerCapture(this._activePointerId)}catch(t){}this._activePointerId=null}if(e>=this._options.idleNoInertiaMs)this._vx=0,this._vy=0;else{const t=Math.pow(this._options.friction,e/16);this._vx*=t,this._vy*=t}Math.hypot(this._vx,this._vy)<this._options.stopSpeed&&(this._vx=0,this._vy=0)}_onPointerCancel(t){"touch"!==t.pointerType?t.pointerId===this._activePointerId&&(this._dragging=!1,this._vx=0,this._vy=0,this._activePointerId=null):this._onTouchCancel(t)}_onTouchDown(t){if(t.preventDefault(),this._touchPointers.set(t.pointerId,{x:t.clientX,y:t.clientY}),2===this._touchPointers.size&&this._zoomEnabled)return this._isTouchPanning=!1,void this._startPinch();1===this._touchPointers.size&&(this._isTouchPanning=!0,this._vx=0,this._vy=0,this._lastMoveTs=performance.now(),this._lastTouchX=t.clientX,this._lastTouchY=t.clientY)}_onTouchMove(t){if(this._touchPointers.has(t.pointerId))if(this._touchPointers.set(t.pointerId,{x:t.clientX,y:t.clientY}),this._isPinching&&2===this._touchPointers.size)this._handlePinchMove();else if(this._isTouchPanning&&1===this._touchPointers.size&&this._view){const i=performance.now(),e=Math.max(1,i-(this._lastMoveTs||i-16));this._lastMoveTs=i;const s=t.clientX-this._lastTouchX,n=t.clientY-this._lastTouchY;this._lastTouchX=t.clientX,this._lastTouchY=t.clientY,this._view.panBy(s,n);const h=this._options.emaAlpha,o=s/e,a=n/e;this._vx=(1-h)*this._vx+h*o,this._vy=(1-h)*this._vy+h*a}}_onTouchUp(t){if(this._touchPointers.delete(t.pointerId),this._isPinching){if(this._endPinch(),1===this._touchPointers.size){const[[,t]]=this._touchPointers.entries();this._isTouchPanning=!0,this._lastTouchX=t.x,this._lastTouchY=t.y,this._vx=0,this._vy=0,this._lastMoveTs=performance.now()}}else if(this._isTouchPanning&&0===this._touchPointers.size){this._isTouchPanning=!1;const t=performance.now(),i=this._lastMoveTs?t-this._lastMoveTs:1/0;if(i>=this._options.idleNoInertiaMs)this._vx=0,this._vy=0;else{const t=Math.pow(this._options.friction,i/16);this._vx*=t,this._vy*=t}Math.hypot(this._vx,this._vy)<this._options.stopSpeed&&(this._vx=0,this._vy=0)}}_onTouchCancel(t){this._touchPointers.delete(t.pointerId),this._isPinching&&this._endPinch(),0===this._touchPointers.size&&(this._isTouchPanning=!1,this._vx=0,this._vy=0)}_startPinch(){this._isPinching=!0;const[t,i]=Array.from(this._touchPointers.values());this._lastPinchDistance=Math.hypot(i.x-t.x,i.y-t.y),this._lastPinchCenterX=(t.x+i.x)/2,this._lastPinchCenterY=(t.y+i.y)/2}_handlePinchMove(){if(!this._view||!this._zoomEnabled)return;const t=Array.from(this._touchPointers.values());if(2!==t.length)return;const[i,e]=t,s=Math.hypot(e.x-i.x,e.y-i.y),n=(i.x+e.x)/2,h=(i.y+e.y)/2;if(this._lastPinchDistance>0){const t=s/this._lastPinchDistance,i=this._view.canvas.getBoundingClientRect(),e=n-i.left,o=h-i.top;this._view.zoomByFactorAtScreen(e,o,t);const a=n-this._lastPinchCenterX,r=h-this._lastPinchCenterY;this._view.panBy(a,r)}this._lastPinchDistance=s,this._lastPinchCenterX=n,this._lastPinchCenterY=h}_endPinch(){this._isPinching=!1,this._lastPinchDistance=0,this._lastPinchCenterX=0,this._lastPinchCenterY=0}_getLineHeightPx(){if(!this._view)return 16;const t=getComputedStyle(this._view.canvas).lineHeight;if(!t||"normal"===t)return 16;const i=parseFloat(t);return Number.isFinite(i)?i:16}_normalizeWheelDelta(t){if(!this._view)return 0;let i=t.deltaY;if(1===t.deltaMode)i*=this._getLineHeightPx();else if(2===t.deltaMode){i*=this._view.canvas.clientHeight||window.innerHeight||800}return i}_onWheel(t){var i;if(null===(i=this._view)||void 0===i?void 0:i.isAnimating)return;if(!this._zoomEnabled||!this._view)return;t.preventDefault(),t.stopPropagation();const e=this._normalizeWheelDelta(t),s=this._view.canvas.getBoundingClientRect(),n=t.clientX-s.left,h=t.clientY-s.top;let o=-e*this._options.wheelSensitivity;t.ctrlKey||t.metaKey?o*=1.6:t.shiftKey&&(o*=.6),this._view.zoomByLogAtScreen(n,h,o)}}function v(t){return new g(t)}class p{constructor(t){var i,e,s,n,h;this.name="document",this._view=null,this._enabled=!1,this._x=0,this._y=0,this._width=0,this._height=0,this._marginL=0,this._marginR=0,this._marginT=0,this._marginB=0,this._panClampMode="minVisible",this._background=null,this._shadow=null,this._onUpdate=()=>{this._enabled&&this._view&&this._clampPan()},this._onBeforeRender=t=>{var i,e,s,n,h;this._enabled&&this._view&&(this._shadow?(t.save(),t.shadowColor=null!==(i=this._shadow.color)&&void 0!==i?i:p._defaultShadow.color,t.shadowBlur=null!==(e=this._shadow.blur)&&void 0!==e?e:p._defaultShadow.blur,t.shadowOffsetX=null!==(s=this._shadow.offsetX)&&void 0!==s?s:p._defaultShadow.offsetX,t.shadowOffsetY=null!==(n=this._shadow.offsetY)&&void 0!==n?n:p._defaultShadow.offsetY,t.fillStyle=null!==(h=this._background)&&void 0!==h?h:"#ffffff",t.fillRect(this._x,this._y,this._width,this._height),t.restore()):this._background&&(t.save(),t.fillStyle=this._background,t.fillRect(this._x,this._y,this._width,this._height),t.restore()),t.save(),t.beginPath(),t.rect(this._x,this._y,this._width,this._height),t.clip())},this._onAfterRender=t=>{if(this._enabled&&this._view&&(t.restore(),this._options.drawBorder)){const i=this._view.zoom;t.save(),t.lineWidth=1/i,t.strokeStyle="#cfcfcf",t.strokeRect(this._x,this._y,this._width,this._height),t.restore()}},this._options=Object.assign({rect:{x:0,y:0,width:0,height:0},margins:{},drawBorder:!1,minVisiblePx:30,panClampMode:"minVisible",background:null,shadow:!1},t),(null==t?void 0:t.rect)&&(this._enabled=!0,this._x=t.rect.x,this._y=t.rect.y,this._width=t.rect.width,this._height=t.rect.height),(null==t?void 0:t.margins)&&(this._marginL=null!==(i=t.margins.left)&&void 0!==i?i:0,this._marginR=null!==(e=t.margins.right)&&void 0!==e?e:0,this._marginT=null!==(s=t.margins.top)&&void 0!==s?s:0,this._marginB=null!==(n=t.margins.bottom)&&void 0!==n?n:0),this._panClampMode=this._options.panClampMode,this._background=null!==(h=this._options.background)&&void 0!==h?h:null,!0===this._options.shadow?this._shadow=Object.assign({},p._defaultShadow):this._options.shadow&&"object"==typeof this._options.shadow&&(this._shadow=Object.assign(Object.assign({},p._defaultShadow),this._options.shadow))}install(t){this._view=t,t.onUpdate(this._onUpdate),t.onBeforeRender(this._onBeforeRender),t.onAfterRender(this._onAfterRender)}destroy(){this._view&&(this._view.offUpdate(this._onUpdate),this._view.offBeforeRender(this._onBeforeRender),this._view.offAfterRender(this._onAfterRender),this._view=null)}isEnabled(){return this._enabled}getRect(){return{x:this._x,y:this._y,width:this._width,height:this._height}}setRect(t,i,e,s){this._enabled=!0,this._x=t,this._y=i,this._width=e,this._height=s}clearRect(){this._enabled=!1}setMargins(t){var i,e,s,n;this._marginL=null!==(i=t.left)&&void 0!==i?i:this._marginL,this._marginR=null!==(e=t.right)&&void 0!==e?e:this._marginR,this._marginT=null!==(s=t.top)&&void 0!==s?s:this._marginT,this._marginB=null!==(n=t.bottom)&&void 0!==n?n:this._marginB}getMargins(){return{left:this._marginL,right:this._marginR,top:this._marginT,bottom:this._marginB}}setPanClampMode(t){this._panClampMode=t}getPanClampMode(){return this._panClampMode}cropTo(t){this._doResize("crop",t)}resizeTo(t){this._doResize("resize",t)}zoomToFit(t){var i,e,s;const n=null!==(i=null==t?void 0:t.mode)&&void 0!==i?i:"contain",h=null===(e=null==t?void 0:t.animate)||void 0===e||e,o=null!==(s=null==t?void 0:t.maxScale)&&void 0!==s?s:1/0;if(!this._enabled||!this._view)return;const a=this._view.dpr,r=this._view.canvas.width/a,c=this._view.canvas.height/a,_=Math.max(1,r-(this._marginL+this._marginR)),l=Math.max(1,c-(this._marginT+this._marginB));let d;const u=_/this._width,g=l/this._height;d="contain"===n?Math.min(u,g):"cover"===n?Math.max(u,g):"fitWidth"===n?u:g,d=Math.min(d,o),d=Math.min(this._view.maxZoom,Math.max(this._view.minZoom,d));const v=this._marginL+(_-d*this._width)/2,p=this._marginT+(l-d*this._height)/2,m=v-d*this._x,y=p-d*this._y;h?this._view.setTransformSmooth(d,m,y):this._view.setTransform(d,m,y)}isPointInDocument(t,i){return!this._enabled||t>=this._x&&t<=this._x+this._width&&i>=this._y&&i<=this._y+this._height}get background(){return this._background}setBackground(t){var i;this._background=t,null===(i=this._view)||void 0===i||i.requestRender()}get shadow(){return this._shadow?Object.assign({},this._shadow):null}setShadow(t){var i;this._shadow=!0===t?Object.assign({},p._defaultShadow):t&&"object"==typeof t?Object.assign(Object.assign({},p._defaultShadow),t):null,null===(i=this._view)||void 0===i||i.requestRender()}_clampPan(){if(!this._view)return;const{zoom:t,tx:i,ty:e}=this._view.getTransform(),s=t,n=this._view.dpr,h=this._view.canvas.width/n,o=this._view.canvas.height/n,a=this._x,r=this._y,c=this._x+this._width,_=this._y+this._height;let l=i,d=e;if("margin"===this._panClampMode){const t=this._marginL-s*a,n=h-this._marginR-s*c,u=this._marginT-s*r,g=o-this._marginB-s*_,v=Math.max(1,h-(this._marginL+this._marginR)),p=Math.max(1,o-(this._marginT+this._marginB));l=s*this._width<=v?this._marginL+(v-s*this._width)/2-s*this._x:Math.min(t,Math.max(n,i)),d=s*this._height<=p?this._marginT+(p-s*this._height)/2-s*this._y:Math.min(u,Math.max(g,e))}else if("minVisible"===this._panClampMode){const t=s*this._width,n=s*this._height,u=Math.min(this._options.minVisiblePx,t),g=Math.min(this._options.minVisiblePx,n),v=h-u-s*a,p=u-s*c,m=o-g-s*r,y=g-s*_;l=p<=v?Math.min(v,Math.max(p,i)):(p+v)/2,d=y<=m?Math.min(m,Math.max(y,e)):(y+m)/2}l===i&&d===e||this._view.setPan(l,d)}_doResize(t,i){if(!this._view)return;const e=Math.max(1,Math.floor(i.width)),s=Math.max(1,Math.floor(i.height)),n={width:e,height:s},h=this._view.getLayerManagers();for(const i of h){const e=i.getAllLayers("world");for(const i of e){const e=i;"function"==typeof e.cropTo&&"function"==typeof e.resizeTo&&("crop"===t?e.cropTo(n):e.resizeTo(n))}}this._width=e,this._height=s,this._enabled&&this._clampPan()}}function m(t){return new p(t)}p._defaultShadow={color:"rgba(0, 0, 0, 0.3)",blur:20,offsetX:0,offsetY:4};class y{constructor(t,i,e,s){this.type="snapshot",this._isExecuted=!0,this._target=t,this._beforeData=i,this._afterData=e,this._region=null==s?void 0:s.region}execute(){if(this._isExecuted)return;const t=this._region?{x:this._region.x,y:this._region.y}:void 0;this._target.restoreSnapshot(this._afterData,t),this._isExecuted=!0}undo(){if(!this._isExecuted)return;const t=this._region?{x:this._region.x,y:this._region.y}:void 0;this._target.restoreSnapshot(this._beforeData,t),this._isExecuted=!1}canMerge(){return!1}merge(){return this}}function f(t,i,e,s){return i&&e?new y(t,i,e,s):null}class w{constructor(t){this.type="create-layer",this._layer=t.layer,this._layerManager=t.layerManager,this._insertIndex=t.insertIndex,this._previousSelectedId=t.previousSelectedId,this._getLayerList=t.getLayerList,this._setSelectedId=t.setSelectedId}execute(){this._layerManager.addLayer(this._layer,this._insertIndex);this._getLayerList().splice(this._insertIndex,0,this._layer),this._setSelectedId(this._layer.id)}undo(){this._layerManager.detachLayer(this._layer.id);const t=this._getLayerList(),i=t.findIndex(t=>t.id===this._layer.id);i>-1&&t.splice(i,1),this._setSelectedId(this._previousSelectedId)}}class x{constructor(t){this.type="delete-layer",this._layer=t.layer,this._layerManager=t.layerManager,this._originalIndex=t.originalIndex,this._previousSelectedId=t.previousSelectedId,this._newSelectedId=t.newSelectedId,this._getLayerList=t.getLayerList,this._setSelectedId=t.setSelectedId}execute(){this._layerManager.detachLayer(this._layer.id);const t=this._getLayerList(),i=t.findIndex(t=>t.id===this._layer.id);i>-1&&t.splice(i,1),this._setSelectedId(this._newSelectedId)}undo(){this._layerManager.addLayer(this._layer,this._originalIndex);this._getLayerList().splice(this._originalIndex,0,this._layer),this._setSelectedId(this._previousSelectedId)}}class M{executeCommand(t){t.execute(),this.addCommand(t)}addCommand(t){var i,e;this._redoStack.splice(0,this._redoStack.length);const s=this._undoStack[this._undoStack.length-1];if(s&&(null===(i=s.canMerge)||void 0===i?void 0:i.call(s,t))&&s.merge){const i=null!==(e=s.merge(t))&&void 0!==e?e:s;return void(i!==s&&(this._undoStack[this._undoStack.length-1]=i))}this._undoStack.push(t),this._undoStack.length>this._maxHistorySize&&this._undoStack.shift()}undo(){if(0===this._undoStack.length)return null;const t=this._undoStack.pop();return t.undo(),this._redoStack.push(t),t}redo(){if(0===this._redoStack.length)return null;const t=this._redoStack.pop();return t.execute(),this._undoStack.push(t),t}canUndo(){return this._undoStack.length>0}canRedo(){return this._redoStack.length>0}clear(){this._undoStack.splice(0,this._undoStack.length),this._redoStack.splice(0,this._redoStack.length)}setMaxHistorySize(t){if(this._maxHistorySize=Math.max(1,t),this._undoStack.length>this._maxHistorySize){const t=this._undoStack.length-this._maxHistorySize;this._undoStack.splice(0,t)}}constructor(t){var i,e,s;this._undoStack=[],this._redoStack=[],this._maxHistorySize=null!==(i=null==t?void 0:t.maxHistorySize)&&void 0!==i?i:50,this._undoStack=null!==(e=null==t?void 0:t.undoStack)&&void 0!==e?e:[],this._redoStack=null!==(s=null==t?void 0:t.redoStack)&&void 0!==s?s:[]}}export{_ as BitmapLayer,r as CanvasLayer,d as ContentLayerManager,w as CreateLayerCommand,x as DeleteLayerCommand,p as DocumentPlugin,M as HistoryManager,g as InteractionPlugin,a as LayerBase,l as LayerManagerBase,y as SnapshotCommand,u as TopScreenLayerManager,h as ViewManager,m as createDocumentPlugin,v as createInteractionPlugin,f as createSnapshotCommand};
+function t(t,e,i,s){return new(i||(i=Promise))(function(n,r){function o(t){try{a(s.next(t))}catch(t){r(t)}}function h(t){try{a(s.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i(function(t){t(e)})).then(o,h)}a((s=s.apply(t,e||[])).next())})}function e(t,e,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(t):s?s.value:e.get(t)}function i(t,e,i,s,n){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?n.call(t,i):n?n.value=i:e.set(t,i),i}"function"==typeof SuppressedError&&SuppressedError;const s=(e,i)=>t(void 0,void 0,void 0,function*(){return new Promise((t,s)=>{const n=new Image;"string"==typeof e?(void 0!==i&&(n.crossOrigin=i),n.src=e):n.src=URL.createObjectURL(e),n.onload=()=>{t(n)},n.onerror=()=>{s(new Error("Image load failed"))}})}),n=(t,e,i)=>Math.min(Math.max(t,e),i);class r{constructor(){this._passes=[]}addPass(t){this._passes.push(t),this._sort()}removePass(t){const e=this._passes.findIndex(e=>e.name===t);e>=0&&this._passes.splice(e,1)}getPass(t){return this._passes.find(e=>e.name===t)}listPasses(){return[...this._passes]}renderPhase(t,e){for(const i of this._passes)i.phase===t&&!1!==i.enabled&&i.render(e)}_sort(){this._passes.sort((t,e)=>{var i,s;const n=null!==(i=t.order)&&void 0!==i?i:0,r=null!==(s=e.order)&&void 0!==s?s:0;return n!==r?n-r:t.name.localeCompare(e.name)})}}class o{constructor(){this.type="canvas2d",this._canvas=null,this._ctx=null,this._contentCanvas=null,this._contentCtx=null,this._topScreenCanvas=null,this._topScreenCtx=null,this._dpr=1,this._currentTransform={zoom:1,tx:0,ty:0,dpr:1}}init(t){this._canvas=t,this._ctx=t.getContext("2d",{willReadFrequently:!0,alpha:!0}),this._contentCanvas=document.createElement("canvas"),this._contentCanvas.width=t.width,this._contentCanvas.height=t.height,this._contentCtx=this._contentCanvas.getContext("2d",{alpha:!0,willReadFrequently:!0}),this._topScreenCanvas=document.createElement("canvas"),this._topScreenCanvas.width=t.width,this._topScreenCanvas.height=t.height,this._topScreenCtx=this._topScreenCanvas.getContext("2d",{alpha:!0})}dispose(){this._canvas=null,this._ctx=null,this._contentCanvas=null,this._contentCtx=null,this._topScreenCanvas=null,this._topScreenCtx=null}resize(t,e,i){this._dpr=i,this._contentCanvas&&(this._contentCanvas.width=t,this._contentCanvas.height=e),this._topScreenCanvas&&(this._topScreenCanvas.width=t,this._topScreenCanvas.height=e)}clear(t){if(!this._ctx||!this._canvas)return;this._ctx.setTransform(1,0,0,1,0,0);"string"==typeof t&&""!==t.trim()&&"transparent"!==t.toLowerCase()?(this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)):this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}beginFrame(){this._contentCtx&&this._contentCanvas&&this._topScreenCtx&&this._topScreenCanvas&&(this._contentCtx.setTransform(1,0,0,1,0,0),this._topScreenCtx.setTransform(1,0,0,1,0,0),this._contentCtx.clearRect(0,0,this._contentCanvas.width,this._contentCanvas.height),this._topScreenCtx.clearRect(0,0,this._topScreenCanvas.width,this._topScreenCanvas.height))}endFrame(){this._ctx&&this._contentCanvas&&this._topScreenCanvas&&(this._ctx.setTransform(1,0,0,1,0,0),this._ctx.drawImage(this._contentCanvas,0,0),this._ctx.drawImage(this._topScreenCanvas,0,0))}setWorldTransform(t){if(!this._contentCtx)return;this._currentTransform=t;const{zoom:e,tx:i,ty:s,dpr:n}=t;this._contentCtx.setTransform(n*e,0,0,n*e,n*i,n*s)}setScreenTransform(t){this._topScreenCtx&&this._topScreenCtx.setTransform(t,0,0,t,0,0)}drawImage(t,e,i,s,n,r){if(!this._contentCtx)return;const o=this._contentCtx,h=o.globalAlpha;void 0!==r&&1!==r&&(o.globalAlpha=r),o.drawImage(t,e,i,s,n),void 0!==r&&1!==r&&(o.globalAlpha=h)}fillRect(t,e,i,s,n){this._contentCtx&&(this._contentCtx.fillStyle=n,this._contentCtx.fillRect(t,e,i,s))}strokeRect(t,e,i,s,n,r){if(!this._contentCtx)return;const o=this._contentCtx,h=o.lineWidth;o.strokeStyle=n,void 0!==r&&(o.lineWidth=r),o.strokeRect(t,e,i,s),void 0!==r&&(o.lineWidth=h)}save(){var t;null===(t=this._contentCtx)||void 0===t||t.save()}restore(){var t;null===(t=this._contentCtx)||void 0===t||t.restore()}clipRect(t,e,i,s){this._contentCtx&&(this._contentCtx.beginPath(),this._contentCtx.rect(t,e,i,s),this._contentCtx.clip())}getPixelColor(t,e){if(!this._contentCtx||!this._contentCanvas)return{r:0,g:0,b:0,a:0};const i=Math.floor(t*this._dpr),s=Math.floor(e*this._dpr);if(i<0||s<0||i>=this._contentCanvas.width||s>=this._contentCanvas.height)return{r:0,g:0,b:0,a:0};const n=this._contentCtx.getImageData(i,s,1,1).data;return{r:n[0],g:n[1],b:n[2],a:n[3]/255}}getContentContext(){return this._contentCtx}getTopScreenContext(){return this._topScreenCtx}get contentCanvas(){return this._contentCanvas}get topScreenCanvas(){return this._topScreenCanvas}}const h="\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform vec2 u_resolution;\nuniform mat3 u_transform;\n\nvarying vec2 v_texCoord;\n\nvoid main() {\n  // Apply transform matrix\n  vec2 position = (u_transform * vec3(a_position, 1.0)).xy;\n  \n  // Convert from pixels to clip space (-1, 1)\n  vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n  \n  // Flip Y axis\n  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n  v_texCoord = a_texCoord;\n}\n";class a{constructor(){this.type="webgl",this._canvas=null,this._gl=null,this._contentCanvas=null,this._contentCtx=null,this._topScreenCanvas=null,this._topScreenCtx=null,this._textureProgram=null,this._colorProgram=null,this._positionBuffer=null,this._texCoordBuffer=null,this._textureCache=new Map,this._contentTexture=null,this._topScreenTexture=null,this._dpr=1,this._width=0,this._height=0,this._currentTransform={zoom:1,tx:0,ty:0,dpr:1},this._stateStack=[],this._isContextLost=!1,this._onContextLost=null,this._onContextRestored=null}static isSupported(){try{const t=document.createElement("canvas");return null!==(t.getContext("webgl")||t.getContext("experimental-webgl"))}catch(t){return!1}}init(t){this._canvas=t;const e=t.getContext("webgl",{alpha:!0,premultipliedAlpha:!0,antialias:!1,preserveDrawingBuffer:!0});if(!e)throw new Error("WebGL not supported");this._gl=e,this._contentCanvas=document.createElement("canvas"),this._contentCanvas.width=t.width,this._contentCanvas.height=t.height,this._contentCtx=this._contentCanvas.getContext("2d",{alpha:!0,willReadFrequently:!0}),this._topScreenCanvas=document.createElement("canvas"),this._topScreenCanvas.width=t.width,this._topScreenCanvas.height=t.height,this._topScreenCtx=this._topScreenCanvas.getContext("2d",{alpha:!0}),this._initWebGL(),this._onContextLost=t=>{t.preventDefault(),this._isContextLost=!0,console.warn("WebGL context lost")},this._onContextRestored=()=>{console.info("WebGL context restored, reinitializing..."),this._isContextLost=!1,this._textureProgram=null,this._colorProgram=null,this._positionBuffer=null,this._texCoordBuffer=null,this._contentTexture=null,this._topScreenTexture=null,this._textureCache.clear(),this._initWebGL(),this._gl&&this._width>0&&this._height>0&&(this._gl.viewport(0,0,this._width,this._height),this._contentTexture=this._createTexture(),this._topScreenTexture=this._createTexture())},t.addEventListener("webglcontextlost",this._onContextLost),t.addEventListener("webglcontextrestored",this._onContextRestored)}_initWebGL(){const t=this._gl;t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),this._textureProgram=this._createProgram(h,"\nprecision mediump float;\n\nuniform sampler2D u_texture;\nuniform float u_opacity;\n\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec4 color = texture2D(u_texture, v_texCoord);\n  gl_FragColor = color * u_opacity;\n}\n"),this._colorProgram=this._createProgram(h,"\nprecision mediump float;\n\nuniform vec4 u_color;\n\nvoid main() {\n  gl_FragColor = u_color;\n}\n"),this._positionBuffer=t.createBuffer(),this._texCoordBuffer=t.createBuffer(),t.bindBuffer(t.ARRAY_BUFFER,this._texCoordBuffer),t.bufferData(t.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),t.STATIC_DRAW)}_createShader(t,e){const i=this._gl,s=i.createShader(t);if(i.shaderSource(s,e),i.compileShader(s),!i.getShaderParameter(s,i.COMPILE_STATUS)){const t=i.getShaderInfoLog(s);throw i.deleteShader(s),new Error("Shader compile error: "+t)}return s}_createProgram(t,e){const i=this._gl,s=this._createShader(i.VERTEX_SHADER,t),n=this._createShader(i.FRAGMENT_SHADER,e),r=i.createProgram();if(i.attachShader(r,s),i.attachShader(r,n),i.linkProgram(r),!i.getProgramParameter(r,i.LINK_STATUS)){const t=i.getProgramInfoLog(r);throw new Error("Program link error: "+t)}return i.deleteShader(s),i.deleteShader(n),r}_createTexture(){const t=this._gl,e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),e}_updateTexture(t,e){const i=this._gl;i.bindTexture(i.TEXTURE_2D,t),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,e)}dispose(){const t=this._gl;if(t){for(const e of this._textureCache.values())t.deleteTexture(e);this._contentTexture&&t.deleteTexture(this._contentTexture),this._topScreenTexture&&t.deleteTexture(this._topScreenTexture),this._positionBuffer&&t.deleteBuffer(this._positionBuffer),this._texCoordBuffer&&t.deleteBuffer(this._texCoordBuffer),this._textureProgram&&t.deleteProgram(this._textureProgram),this._colorProgram&&t.deleteProgram(this._colorProgram)}this._canvas&&(this._onContextLost&&this._canvas.removeEventListener("webglcontextlost",this._onContextLost),this._onContextRestored&&this._canvas.removeEventListener("webglcontextrestored",this._onContextRestored)),this._onContextLost=null,this._onContextRestored=null,this._textureCache.clear(),this._canvas=null,this._gl=null,this._contentCanvas=null,this._contentCtx=null,this._topScreenCanvas=null,this._topScreenCtx=null,this._isContextLost=!1}resize(t,e,i){this._width=t,this._height=e,this._dpr=i,this._gl&&!this._isContextLost&&this._gl.viewport(0,0,t,e),this._contentCanvas&&(this._contentCanvas.width=t,this._contentCanvas.height=e),this._topScreenCanvas&&(this._topScreenCanvas.width=t,this._topScreenCanvas.height=e),this._gl&&!this._isContextLost&&(this._contentTexture&&this._gl.deleteTexture(this._contentTexture),this._topScreenTexture&&this._gl.deleteTexture(this._topScreenTexture),this._contentTexture=this._createTexture(),this._topScreenTexture=this._createTexture())}clear(t){const e=this._gl;if(e&&!this._isContextLost){if(t&&"transparent"!==t){const i=this._parseColor(t);e.clearColor(i.r,i.g,i.b,i.a)}else e.clearColor(0,0,0,0);e.clear(e.COLOR_BUFFER_BIT)}}_parseColor(t){if(t.startsWith("#")){const e=t.slice(1);if(3===e.length)return{r:parseInt(e[0]+e[0],16)/255,g:parseInt(e[1]+e[1],16)/255,b:parseInt(e[2]+e[2],16)/255,a:1};if(6===e.length)return{r:parseInt(e.slice(0,2),16)/255,g:parseInt(e.slice(2,4),16)/255,b:parseInt(e.slice(4,6),16)/255,a:1}}return{r:1,g:1,b:1,a:1}}beginFrame(){this._contentCtx&&this._contentCanvas&&this._topScreenCtx&&this._topScreenCanvas&&(this._contentCtx.setTransform(1,0,0,1,0,0),this._topScreenCtx.setTransform(1,0,0,1,0,0),this._contentCtx.clearRect(0,0,this._contentCanvas.width,this._contentCanvas.height),this._topScreenCtx.clearRect(0,0,this._topScreenCanvas.width,this._topScreenCanvas.height))}endFrame(){this._gl&&this._contentCanvas&&this._topScreenCanvas&&!this._isContextLost&&this._contentTexture&&this._topScreenTexture&&(this._updateTexture(this._contentTexture,this._contentCanvas),this._updateTexture(this._topScreenTexture,this._topScreenCanvas),this._drawFullScreenQuad(this._contentTexture),this._drawFullScreenQuad(this._topScreenTexture))}_drawFullScreenQuad(t){const e=this._gl,i=this._textureProgram;e.useProgram(i);const s=e.getUniformLocation(i,"u_resolution");e.uniform2f(s,this._width,this._height);const n=e.getUniformLocation(i,"u_transform");e.uniformMatrix3fv(n,!1,[1,0,0,0,1,0,0,0,1]);const r=e.getUniformLocation(i,"u_opacity");e.uniform1f(r,1),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t);const o=e.getUniformLocation(i,"u_texture");e.uniform1i(o,0);const h=e.getAttribLocation(i,"a_position");e.bindBuffer(e.ARRAY_BUFFER,this._positionBuffer),e.bufferData(e.ARRAY_BUFFER,new Float32Array([0,0,this._width,0,0,this._height,0,this._height,this._width,0,this._width,this._height]),e.DYNAMIC_DRAW),e.enableVertexAttribArray(h),e.vertexAttribPointer(h,2,e.FLOAT,!1,0,0);const a=e.getAttribLocation(i,"a_texCoord");e.bindBuffer(e.ARRAY_BUFFER,this._texCoordBuffer),e.enableVertexAttribArray(a),e.vertexAttribPointer(a,2,e.FLOAT,!1,0,0),e.drawArrays(e.TRIANGLES,0,6)}setWorldTransform(t){if(!this._contentCtx)return;this._currentTransform=t;const{zoom:e,tx:i,ty:s,dpr:n}=t;this._contentCtx.setTransform(n*e,0,0,n*e,n*i,n*s)}setScreenTransform(t){this._topScreenCtx&&this._topScreenCtx.setTransform(t,0,0,t,0,0)}drawImage(t,e,i,s,n,r){if(!this._contentCtx)return;const o=this._contentCtx,h=o.globalAlpha;void 0!==r&&1!==r&&(o.globalAlpha=r),o.drawImage(t,e,i,s,n),void 0!==r&&1!==r&&(o.globalAlpha=h)}fillRect(t,e,i,s,n){this._contentCtx&&(this._contentCtx.fillStyle=n,this._contentCtx.fillRect(t,e,i,s))}strokeRect(t,e,i,s,n,r){if(!this._contentCtx)return;const o=this._contentCtx,h=o.lineWidth;o.strokeStyle=n,void 0!==r&&(o.lineWidth=r),o.strokeRect(t,e,i,s),void 0!==r&&(o.lineWidth=h)}save(){var t;null===(t=this._contentCtx)||void 0===t||t.save(),this._stateStack.push(Object.assign({},this._currentTransform))}restore(){var t;null===(t=this._contentCtx)||void 0===t||t.restore();const e=this._stateStack.pop();e&&(this._currentTransform=e)}clipRect(t,e,i,s){this._contentCtx&&(this._contentCtx.beginPath(),this._contentCtx.rect(t,e,i,s),this._contentCtx.clip())}getPixelColor(t,e){if(!this._contentCtx||!this._contentCanvas)return{r:0,g:0,b:0,a:0};const i=Math.floor(t*this._dpr),s=Math.floor(e*this._dpr);if(i<0||s<0||i>=this._contentCanvas.width||s>=this._contentCanvas.height)return{r:0,g:0,b:0,a:0};const n=this._contentCtx.getImageData(i,s,1,1).data;return{r:n[0],g:n[1],b:n[2],a:n[3]/255}}getContentContext(){return this._contentCtx}getTopScreenContext(){return this._topScreenCtx}get contentCanvas(){return this._contentCanvas}get topScreenCanvas(){return this._topScreenCanvas}}class _{get zoom(){return Math.exp(this._currentLogZ)}get minZoom(){return this._options.minZoom}get maxZoom(){return this._options.maxZoom}get isAnimating(){return this._isAnimatingTransform}get dpr(){return this._dpr}get renderer(){return this._renderer}get rendererType(){return this._renderer.type}addRenderPass(t){this.pipeline.addPass(t),this.requestRender()}removeRenderPass(t){this.pipeline.removePass(t),this.requestRender()}getRenderPass(t){return this.pipeline.getPass(t)}listRenderPasses(){return this.pipeline.listPasses()}get context(){return this._renderer.getContentContext()}get contentContext(){return this._renderer.getContentContext()}get topScreenContext(){return this._renderer.getTopScreenContext()}get contentCanvas(){return this._renderer.contentCanvas||this.canvas}get topScreenCanvas(){return this._renderer.topScreenCanvas||this.canvas}use(t){if(this._plugins.has(t.name))return console.warn(`Plugin "${t.name}" is already installed.`),t;try{t.install(this)}catch(e){try{t.destroy()}catch(t){}throw console.error("[ViewManager] plugin.install() failed:",e),e}return this._plugins.set(t.name,t),t}unuse(t){const e=this._plugins.get(t);if(e)try{e.destroy()}catch(t){console.error("[ViewManager] plugin.destroy() failed:",t)}finally{this._plugins.delete(t)}}hasPlugin(t){return this._plugins.has(t)}listPlugins(){return Array.from(this._plugins.keys())}clearPlugins(){for(const t of this.listPlugins())this.unuse(t)}getPlugin(t){return this._plugins.get(t)}onUpdate(t){this._updateCallbacks.add(t)}offUpdate(t){this._updateCallbacks.delete(t)}onBeforeRender(t){this._beforeRenderCallbacks.add(t)}offBeforeRender(t){this._beforeRenderCallbacks.delete(t)}onAfterRender(t){this._afterRenderCallbacks.add(t)}offAfterRender(t){this._afterRenderCallbacks.delete(t)}requestRender(){this._needsRender=!0}_clampLog(t){return n(t,this.LOG_MIN,this.LOG_MAX)}_setTargetLogZoomAtScreen(t,e,i){Number.isFinite(i)&&(this._anchorX=t,this._anchorY=e,this._targetLogZ=this._clampLog(i),this._needsRender=!0)}zoomToAtScreen(t,e,i){this._setTargetLogZoomAtScreen(t,e,Math.log(i))}zoomToAtScreenRaw(t,e,i){if(!Number.isFinite(i))return;const s=Math.max(1e-8,this._options.minZoom),r=this._options.maxZoom,o=n(i,s,r),h=Math.exp(this._currentLogZ),a=o;if(!Number.isFinite(h)||h<=0)return;if(Math.abs(a-h)<1e-12)return;const _=Math.log(o);this._currentLogZ=_,this._targetLogZ=_;const c=a/h;this._tx=t-(t-this._tx)*c,this._ty=e-(e-this._ty)*c,this._needsRender=!0}zoomToAtWorld(t,e,i){const{x:s,y:n}=this.toScreen(t,e);this.zoomToAtScreen(s,n,i)}zoomByFactorAtScreen(t,e,i){if(i<=0||!Number.isFinite(i))return;const s=Math.log(i);this._setTargetLogZoomAtScreen(t,e,this._targetLogZ+s)}zoomByLogAtScreen(t,e,i){this._setTargetLogZoomAtScreen(t,e,this._targetLogZ+i)}zoomByFactorAtWorld(t,e,i){const{x:s,y:n}=this.toScreen(t,e);this.zoomByFactorAtScreen(s,n,i)}panBy(t,e){this._tx+=t,this._ty+=e,this._needsRender=!0}setPan(t,e){this._tx=t,this._ty=e,this._needsRender=!0}setTransform(t,e,i){const s=n(t,this._options.minZoom,this._options.maxZoom);this._currentLogZ=Math.log(s),this._targetLogZ=this._currentLogZ,this._tx=e,this._ty=i,this._targetTx=null,this._targetTy=null,this._needsRender=!0}setTransformSmooth(t,e,i){const s=n(t,this._options.minZoom,this._options.maxZoom);this._targetLogZ=Math.log(s),this._targetTx=e,this._targetTy=i,this._isAnimatingTransform=!0,this._needsRender=!0}_loop(){if(this._isResizing)return void(this._raf=requestAnimationFrame(()=>this._loop()));const t=performance.now(),e=Math.max(1,t-this._lastFrameTs);this._lastFrameTs=t;const{approachKZoom:i}=this._options,s=Math.exp(this._currentLogZ),n=this._targetLogZ-this._currentLogZ,r=Math.abs(n)>1e-6;if(r){const t=1-Math.exp(-i*e);this._currentLogZ+=n*t}const o=Math.exp(this._currentLogZ);if(o!==s){const t=this._anchorX,e=this._anchorY,i=o/s;this._tx=t-(t-this._tx)*i,this._ty=e-(e-this._ty)*i}let h=!1;if(null!==this._targetTx&&null!==this._targetTy){const t=1-Math.exp(-this._options.approachKPan*e),i=this._targetTx-this._tx,s=this._targetTy-this._ty;h=Math.abs(i)>.5||Math.abs(s)>.5,h?(this._tx+=i*t,this._ty+=s*t):(this._tx=this._targetTx,this._ty=this._targetTy,this._targetTx=null,this._targetTy=null)}if(this._isAnimatingTransform){const t=Math.abs(this._targetLogZ-this._currentLogZ)<1e-5,e=null===this._targetTx&&null===this._targetTy;t&&e&&(this._isAnimatingTransform=!1)}if(this._isResetting){const t=1-Math.exp(-this._options.approachKPan*e);this._tx+=(0-this._tx)*t,this._ty+=(0-this._ty)*t;const i=Math.abs(this._currentLogZ)<.001&&Math.abs(this._targetLogZ)<1e-6,s=Math.abs(this._tx)<.5&&Math.abs(this._ty)<.5;i&&s&&(this._currentLogZ=0,this._targetLogZ=0,this._tx=0,this._ty=0,this._isResetting=!1)}for(const t of this._updateCallbacks)t(e);if(!(this._needsRender||r||h||this._isResetting))return void(this._raf=requestAnimationFrame(()=>this._loop()));this._needsRender=!1;const a=this._renderer;a.clear(this._options.background),a.beginFrame(),a.setWorldTransform({zoom:o,tx:this._tx,ty:this._ty,dpr:this._dpr});const _={view:this,renderer:a};this.pipeline.renderPhase("beforeWorld",_),this.pipeline.renderPhase("world",_),this.pipeline.renderPhase("afterWorld",_),this.pipeline.renderPhase("screen",_),a.endFrame(),this._raf=requestAnimationFrame(()=>this._loop())}applyWorldTransform(t){const e=Math.exp(this._currentLogZ);t.setTransform(this._dpr*e,0,0,this._dpr*e,this._dpr*this._tx,this._dpr*this._ty)}applyScreenTransform(t){t.setTransform(this._dpr,0,0,this._dpr,0,0)}getPixelColorAtScreen(t,e){const{r:i,g:s,b:n,a:r}=this._renderer.getPixelColor(t,e),o=t=>t.toString(16).padStart(2,"0"),h=`#${o(i)}${o(s)}${o(n)}`;return{r:i,g:s,b:n,a:r,rgba:`rgba(${i},${s},${n},${r.toFixed(3)})`,hex:h}}getPixelColorAtWorld(t,e){const{x:i,y:s}=this.toScreen(t,e);return this.getPixelColorAtScreen(i,s)}registerLayerManager(t){t&&(this._layerManagers.includes(t)||(this._layerManagers.push(t),this._needsRender=!0))}unregisterLayerManager(t){const e=this._layerManagers.indexOf(t);e>=0&&(this._layerManagers.splice(e,1),this._needsRender=!0)}getLayerManagers(){return[...this._layerManagers]}resetSmooth(){this._isResetting=!0,this._targetLogZ=0,this._needsRender=!0}resetInstant(){this._currentLogZ=0,this._targetLogZ=0,this._tx=0,this._ty=0,this._needsRender=!0}toWorld(t,e){const i=Math.exp(this._currentLogZ);return{wx:(t-this._tx)/i,wy:(e-this._ty)/i}}toScreen(t,e){const i=Math.exp(this._currentLogZ);return{x:t*i+this._tx,y:e*i+this._ty}}getTransform(){return{zoom:Math.exp(this._currentLogZ),tx:this._tx,ty:this._ty}}getViewportBounds(){const t=Math.exp(this._currentLogZ),e=this.canvas.width/this._dpr,i=this.canvas.height/this._dpr,s=-this._tx/t,n=-this._ty/t,r=(e-this._tx)/t,o=(i-this._ty)/t;return{left:s,top:n,right:r,bottom:o,width:r-s,height:o-n}}setZoomRange(t,e){this._options.minZoom=t,this._options.maxZoom=e,this.LOG_MIN=Math.log(t),this.LOG_MAX=Math.log(e),this._targetLogZ=Math.min(this.LOG_MAX,Math.max(this.LOG_MIN,this._targetLogZ))}resizeToParent(){this._isResizing=!0;const t=(this.canvas.parentElement||this.canvas).getBoundingClientRect();this._dpr=Math.max(1,window.devicePixelRatio||1);const e=Math.max(1,Math.round(t.width)),i=Math.max(1,Math.round(t.height));this.canvas.width=Math.round(e*this._dpr),this.canvas.height=Math.round(i*this._dpr),this.canvas.style.width=`${e}px`,this.canvas.style.height=`${i}px`,this._renderer.resize(this.canvas.width,this.canvas.height,this._dpr),clearTimeout(this._resizeReleaseTimer),this._resizeReleaseTimer=window.setTimeout(()=>{this._isResizing=!1},50)}destroy(){cancelAnimationFrame(this._raf),this.clearPlugins(),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer.dispose(),this._layerManagers=[],this._updateCallbacks.clear(),this._beforeRenderCallbacks.clear(),this._afterRenderCallbacks.clear();for(const t of this.pipeline.listPasses())this.pipeline.removePass(t.name)}constructor(t,e){var i;this._layerManagers=[],this._plugins=new Map,this._isResetting=!1,this._isResizing=!1,this._needsRender=!0,this._raf=0,this._lastFrameTs=performance.now(),this._tx=0,this._ty=0,this._anchorX=0,this._anchorY=0,this._currentLogZ=Math.log(1),this._targetLogZ=Math.log(1),this._targetTx=null,this._targetTy=null,this._isAnimatingTransform=!1,this._updateCallbacks=new Set,this._beforeRenderCallbacks=new Set,this._afterRenderCallbacks=new Set,this._defaultRenderPassName="compat.render",this._dpr=Math.max(1,window.devicePixelRatio||1),this.canvas=t,this._render=null!==(i=null==e?void 0:e.render)&&void 0!==i?i:null,this.pipeline=new r,this._renderer=this._createRenderer(null==e?void 0:e.renderer),this._renderer.init(t),this._options=Object.assign({minZoom:.5,maxZoom:10,approachKZoom:.022,approachKPan:.022,autoResize:!0,background:"#fff"},e),this.LOG_MIN=Math.log(this._options.minZoom),this.LOG_MAX=Math.log(this._options.maxZoom),this._options.autoResize&&(this._resizeObserver=new ResizeObserver(()=>this.resizeToParent()),this._resizeObserver.observe(this.canvas.parentElement||this.canvas)),this.resizeToParent(),this._installDefaultRenderPasses(),this._lastFrameTs=performance.now(),this._raf=requestAnimationFrame(()=>this._loop())}_installDefaultRenderPasses(){this.pipeline.addPass({name:"compat.beforeRender",phase:"beforeWorld",order:0,render:({view:t})=>{const e=t._tryGet2DWorldContext();if(e)for(const i of t._beforeRenderCallbacks)i(e)}}),this.pipeline.addPass({name:this._defaultRenderPassName,phase:"world",order:0,render:({view:t})=>{if(t._render)t._render(t);else for(const e of t._layerManagers){const i=e;"function"==typeof i.renderWorldLayersIn?i.renderWorldLayersIn(t):e.renderAllLayersIn(t)}}}),this.pipeline.addPass({name:"compat.renderScreen",phase:"screen",order:0,render:({view:t})=>{if(!t._render)for(const e of t._layerManagers){const i=e;"function"==typeof i.renderScreenLayersIn&&i.renderScreenLayersIn(t)}}}),this.pipeline.addPass({name:"compat.afterRender",phase:"afterWorld",order:0,render:({view:t})=>{const e=t._tryGet2DWorldContext();if(e)for(const i of t._afterRenderCallbacks)i(e)}})}_tryGet2DWorldContext(){const t=this._renderer.contentCanvas;return t?t.getContext("2d"):null}_createRenderer(t){return t&&"canvas2d"!==t?"webgl"===t?new a:"auto"===t?a.isSupported()?new a:new o:"object"==typeof t&&"type"in t?t:new o:new o}}let c=0;class l{constructor(t,e,i="world"){this.space="world",this.visible=!0,this.opacity=1,this.blend="source-over",this.name=t,this.id=`layer_${e}_${++c}`,this.type=e,this.space=i}}class d extends l{consumeDirtyRegion(){if(!this._dirtyRegion)return null;const t={x:Math.floor(this._dirtyRegion.minX),y:Math.floor(this._dirtyRegion.minY),width:Math.ceil(this._dirtyRegion.maxX-this._dirtyRegion.minX)+1,height:Math.ceil(this._dirtyRegion.maxY-this._dirtyRegion.minY)+1};return this._dirtyRegion=null,t}_expandDirtyRegion(t,e,i,s){this._dirtyRegion?(this._dirtyRegion.minX=Math.min(this._dirtyRegion.minX,t),this._dirtyRegion.minY=Math.min(this._dirtyRegion.minY,e),this._dirtyRegion.maxX=Math.max(this._dirtyRegion.maxX,i),this._dirtyRegion.maxY=Math.max(this._dirtyRegion.maxY,s)):this._dirtyRegion={minX:t,minY:e,maxX:i,maxY:s}}beginStroke(t,e){const{lx:i,ly:s}=this.toLocalPoint(t,e);this._lastX=i,this._lastY=s,this._drawing=!0}stroke(t,e,i,s,n=1,r="brush"){if(!this._drawing)return null;const{lx:o,ly:h}=this.toLocalPoint(t,e),a=s*n/2+1,_=Math.min(this._lastX,o)-a,c=Math.min(this._lastY,h)-a,l=Math.max(this._lastX,o)+a,d=Math.max(this._lastY,h)+a;return this._expandDirtyRegion(_,c,l,d),this.context.beginPath(),this.context.moveTo(this._lastX,this._lastY),this.context.lineTo(o,h),"eraser"===r?(this.context.globalCompositeOperation="destination-out",this.context.strokeStyle="rgba(0, 0, 0, 1)"):(this.context.globalCompositeOperation="source-over",this.context.strokeStyle=i),this.context.lineWidth=s*n,this.context.lineCap="round",this.context.lineJoin="round",this.context.stroke(),this.context.closePath(),this._lastX=o,this._lastY=h,{x:Math.floor(_),y:Math.floor(c),width:Math.ceil(l-_)+1,height:Math.ceil(d-c)+1}}endStroke(){this._drawing=!1}isDrawing(){return this._drawing}captureSnapshot(t){try{if(t){const{x:e,y:i,width:s,height:n}=t,r=Math.max(0,Math.floor(e)),o=Math.max(0,Math.floor(i)),h=Math.min(this.canvas.width-r,Math.ceil(s)),a=Math.min(this.canvas.height-o,Math.ceil(n));return h<=0||a<=0?null:this.context.getImageData(r,o,h,a)}return this.context.getImageData(0,0,this.canvas.width,this.canvas.height)}catch(t){return null}}restoreSnapshot(t,e){var i,s;const n=null!==(i=null==e?void 0:e.x)&&void 0!==i?i:0,r=null!==(s=null==e?void 0:e.y)&&void 0!==s?s:0;this.context.putImageData(t,n,r)}clearRegion(t){t?this.context.clearRect(t.x,t.y,t.width,t.height):this.context.clearRect(0,0,this.canvas.width,this.canvas.height)}requestRedraw(){var t;null===(t=this._redraw)||void 0===t||t.call(this,this.context,this.canvas)}drawImage(t,e,i,s,n){this.context.drawImage(t,e,i,null!=s?s:t.width,null!=n?n:t.height)}hitTest(t,e){const{lx:i,ly:s}=this.toLocalPoint(t,e);return i>=0&&i<=this.canvas.width&&s>=0&&s<=this.canvas.height}toLocalPoint(t,e){const i=t-this.x,s=e-this.y,n=Math.cos(-this.rotation),r=Math.sin(-this.rotation),o=i*r+s*n,h=(i*n-s*r)/this.scale,a=o/this.scale;return{lx:h+("center"===this.anchor?this.canvas.width/2:0),ly:a+("center"===this.anchor?this.canvas.height/2:0)}}render(t,e){if(!this.visible)return;const i=this.canvas.width*this.scale,s=this.canvas.height*this.scale,n="center"===this.anchor?-i/2:0,r="center"===this.anchor?-s/2:0;t.save(),t.globalAlpha=this.opacity,t.globalCompositeOperation=this.blend,t.translate(this.x,this.y),t.rotate(this.rotation),t.drawImage(this.canvas,n,r,i,s),t.restore()}cropTo(t){const e=Math.max(1,Math.floor(t.width)),i=Math.max(1,Math.floor(t.height));if(e===this.canvas.width&&i===this.canvas.height)return;const s=this._cloneCanvas(),n=Math.min(s.width,e),r=Math.min(s.height,i);this._setCanvasSize(e,i),n>0&&r>0&&this.context.drawImage(s,0,0,n,r,0,0,n,r)}resizeTo(t){const e=Math.max(1,Math.floor(t.width)),i=Math.max(1,Math.floor(t.height));if(e===this.canvas.width&&i===this.canvas.height)return;const s=this._cloneCanvas();this._setCanvasSize(e,i),s.width>0&&s.height>0&&this.context.drawImage(s,0,0,s.width,s.height,0,0,e,i)}_cloneCanvas(){const t=document.createElement("canvas");if(t.width=this.canvas.width,t.height=this.canvas.height,0===t.width||0===t.height)return t;const e=t.getContext("2d");if(!e)throw new Error("Offscreen 2D context unavailable");return e.drawImage(this.canvas,0,0),t}_setCanvasSize(t,e){this.canvas.width=t,this.canvas.height=e,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,t,e)}destroy(){this.canvas.width=0,this.canvas.height=0}constructor(t){var e,i;if(super(t.name||"","canvas",null!==(e=t.space)&&void 0!==e?e:"world"),this.x=0,this.y=0,this.scale=1,this.rotation=0,this.anchor="topLeft",this._drawing=!1,this._lastX=0,this._lastY=0,this._dirtyRegion=null,"canvas"in t&&t.canvas)this.canvas=t.canvas;else{const e=t;this.canvas=document.createElement("canvas"),this.canvas.width=e.width,this.canvas.height=e.height}const s=this.canvas.getContext("2d",{willReadFrequently:!0});if(!s)throw new Error("Offscreen 2D context unavailable");this.context=s,this.x=t.x||0,this.y=t.y||0,this.scale=null!==(i=t.scale)&&void 0!==i?i:1,this.rotation=t.rotation||0,t.anchor&&(this.anchor=t.anchor),this._redraw=t.redraw,this._redraw&&this._redraw(this.context,this.canvas)}}var u;class g extends d{static fromImage(e){return t(this,void 0,void 0,function*(){var t,n,r,o,h,a,_,c;const l=yield s(e.src,e.crossOrigin),d=null!==(t=e.width)&&void 0!==t?t:l.naturalWidth,p=null!==(n=e.height)&&void 0!==n?n:l.naturalHeight,v=new g({name:e.name,space:null!==(r=e.space)&&void 0!==r?r:"world",x:null!==(o=e.x)&&void 0!==o?o:0,y:null!==(h=e.y)&&void 0!==h?h:0,scale:null!==(a=e.scale)&&void 0!==a?a:1,rotation:null!==(_=e.rotation)&&void 0!==_?_:0,anchor:null!==(c=e.anchor)&&void 0!==c?c:"topLeft",width:d,height:p});return v.context.clearRect(0,0,v.canvas.width,v.canvas.height),v.context.drawImage(l,0,0,d,p),"string"!=typeof e.src&&i(v,u,l.src.startsWith("blob:")?l.src:null,"f"),v})}setSource(n,r){return t(this,void 0,void 0,function*(){const t=yield s(n,r);if(this.canvas.width=t.naturalWidth,this.canvas.height=t.naturalHeight,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.drawImage(t,0,0),e(this,u,"f")){try{URL.revokeObjectURL(e(this,u,"f"))}catch(t){}i(this,u,null,"f")}"string"!=typeof n&&i(this,u,t.src.startsWith("blob:")?t.src:null,"f")})}paint(t){t(this.context,this.canvas)}getImageData(t=0,e=0,i=this.canvas.width,s=this.canvas.height){return this.context.getImageData(t,e,i,s)}putImageData(t,e=0,i=0){this.context.putImageData(t,e,i)}toDataURL(t="image/png",e){return this.canvas.toDataURL(t,e)}toImageBitmap(t){return createImageBitmap(this.canvas,null!=t?t:{})}destroy(){var t;if(null===(t=super.destroy)||void 0===t||t.call(this),e(this,u,"f")){try{URL.revokeObjectURL(e(this,u,"f"))}catch(t){}i(this,u,null,"f")}}constructor(t){var e,i;super({name:t.name,space:null!==(e=t.space)&&void 0!==e?e:"world",x:t.x,y:t.y,scale:t.scale,rotation:t.rotation,anchor:null!==(i=t.anchor)&&void 0!==i?i:"topLeft",width:t.width,height:t.height}),u.set(this,null),this.type="bitmap"}}u=new WeakMap;class p{constructor(){this._worldLayers=[],this._screenLayers=[],this._eventListeners=new Map}on(t,e){this._eventListeners.has(t)||this._eventListeners.set(t,new Set),this._eventListeners.get(t).add(e)}off(t,e){var i;null===(i=this._eventListeners.get(t))||void 0===i||i.delete(e)}_emit(t,...e){const i=this._eventListeners.get(t);if(i)for(const t of i)t(...e)}_renderAllLayersIn(t,e){e.save(),t.applyWorldTransform(e);for(const i of this._worldLayers)!i.visible||i.opacity<=0||(e.save(),i.render(e,t),e.restore());e.restore(),e.save(),t.applyScreenTransform(e);for(const i of this._screenLayers)!i.visible||i.opacity<=0||(e.save(),i.render(e,t),e.restore());e.restore()}_renderWorldLayersIn(t,e){e.save(),t.applyWorldTransform(e);for(const i of this._worldLayers)!i.visible||i.opacity<=0||(e.save(),i.render(e,t),e.restore());e.restore()}_renderScreenLayersIn(t,e){e.save(),t.applyScreenTransform(e);for(const i of this._screenLayers)!i.visible||i.opacity<=0||(e.save(),i.render(e,t),e.restore());e.restore()}renderWorldLayersIn(t){const e=t.contentContext;this._renderWorldLayersIn(t,e)}renderScreenLayersIn(t){const e=t.contentContext;this._renderScreenLayersIn(t,e)}renderAllLayersIn(t){const e=t.contentContext;this._renderAllLayersIn(t,e)}addLayer(t,e){const i="world"===t.space?this._worldLayers:this._screenLayers;let s;return"number"==typeof e&&e>=0&&e<i.length?(i.splice(e,0,t),s=e):(i.push(t),s=i.length-1),this._emit("layerAdded",t,s),t.id}createImageLayer(e){return t(this,void 0,void 0,function*(){const t=yield g.fromImage(e);return this.addLayer(t),t})}createCanvasLayer(t){const e=new d(t);return this.addLayer(e),e}removeLayer(t){var e,i;const s=this._worldLayers.findIndex(e=>e.id===t);if(s>=0){const t=this._worldLayers[s];return null===(e=t.destroy)||void 0===e||e.call(t),this._worldLayers.splice(s,1),void this._emit("layerRemoved",t,s)}const n=this._screenLayers.findIndex(e=>e.id===t);if(n>=0){const t=this._screenLayers[n];null===(i=t.destroy)||void 0===i||i.call(t),this._screenLayers.splice(n,1),this._emit("layerRemoved",t,n)}}detachLayer(t){const e=this._worldLayers.findIndex(e=>e.id===t);if(e>=0){const t=this._worldLayers[e];return this._worldLayers.splice(e,1),void this._emit("layerRemoved",t,e)}const i=this._screenLayers.findIndex(e=>e.id===t);if(i>=0){const t=this._screenLayers[i];this._screenLayers.splice(i,1),this._emit("layerRemoved",t,i)}}moveLayer(t,e){const i=this._worldLayers.findIndex(e=>e.id===t);if(i>=0){const[t]=this._worldLayers.splice(i,1),s=Math.max(0,Math.min(e,this._worldLayers.length));return this._worldLayers.splice(s,0,t),void this._emit("layersReordered",this._worldLayers.map(t=>t.id))}const s=this._screenLayers.findIndex(e=>e.id===t);if(s>=0){const[t]=this._screenLayers.splice(s,1),i=Math.max(0,Math.min(e,this._screenLayers.length));this._screenLayers.splice(i,0,t),this._emit("layersReordered",this._screenLayers.map(t=>t.id))}}reorderLayers(t){const e=[];for(const i of t){const t=this._worldLayers.find(t=>t.id===i);t&&e.push(t)}for(const i of this._worldLayers)t.includes(i.id)||e.push(i);this._worldLayers=e,this._emit("layersReordered",this._worldLayers.map(t=>t.id))}getLayer(t){return this._worldLayers.find(e=>e.id===t)||this._screenLayers.find(e=>e.id===t)}getAllLayers(t){return t?("world"===t?this._worldLayers:this._screenLayers).slice():[...this._worldLayers,...this._screenLayers]}hitTest(t,e,i="world"){const s=this.getAllLayers(i);for(let i=s.length-1;i>=0;i--){const n=s[i];if(n.hitTest&&n.hitTest(t,e))return n}}destroy(){var t;for(const e of[...this._worldLayers,...this._screenLayers])null===(t=e.destroy)||void 0===t||t.call(e);this._worldLayers=[],this._screenLayers=[],this._eventListeners.clear()}}class v extends p{constructor(){super(...arguments),this._compositeCache=null,this._compositeCacheCtx=null,this._compositeDirty=!0,this._lastCacheWidth=0,this._lastCacheHeight=0,this._cachedBoundsMinX=0,this._cachedBoundsMinY=0,this._dirtyRegions=[],this._fullRebuildNeeded=!0}markDirty(){this._compositeDirty=!0,this._fullRebuildNeeded=!0}markDirtyRegion(t){this._compositeDirty=!0,this._fullRebuildNeeded||this._dirtyRegions.push(t)}markDirtyRegionFromLayer(t,e){const i=t.scale,s=Math.abs(Math.cos(t.rotation)),n=Math.abs(Math.sin(t.rotation)),r="center"===t.anchor?-t.canvas.width/2:0,o="center"===t.anchor?-t.canvas.height/2:0,h=(e.x+r)*i,a=(e.y+o)*i,_=e.width*i,c=e.height*i,l=_*s+c*n,d=_*n+c*s,u=t.x+h+_/2,g=t.y+a+c/2;this.markDirtyRegion({x:u-l/2-2,y:g-d/2-2,width:l+4,height:d+4})}addLayer(t,e){return this._compositeDirty=!0,this._fullRebuildNeeded=!0,super.addLayer(t,e)}removeLayer(t){this._compositeDirty=!0,this._fullRebuildNeeded=!0,super.removeLayer(t)}detachLayer(t){this._compositeDirty=!0,this._fullRebuildNeeded=!0,super.detachLayer(t)}removeAllLayers(t){var e,i;if(!t||"world"===t){for(const t of this._worldLayers)null===(e=t.destroy)||void 0===e||e.call(t);this._worldLayers=[]}if(!t||"screen"===t){for(const t of this._screenLayers)null===(i=t.destroy)||void 0===i||i.call(t);this._screenLayers=[]}this._fullRebuildNeeded=!0}moveLayer(t,e){this._compositeDirty=!0,this._fullRebuildNeeded=!0,super.moveLayer(t,e)}renderWorldLayersIn(t){const e=t.contentContext,i=this._worldLayers;0!==i.length&&(this._compositeDirty&&(this._fullRebuildNeeded?this._rebuildCompositeCache(i):this._updateDirtyRegions(i)),e.save(),t.applyWorldTransform(e),this._compositeCache&&this._compositeCacheCtx&&e.drawImage(this._compositeCache,this._cachedBoundsMinX,this._cachedBoundsMinY),e.restore())}renderAllLayersIn(t){this.renderWorldLayersIn(t),this.renderScreenLayersIn(t)}_rebuildCompositeCache(t){let e=0,i=0,s=0,n=0,r=!1;for(const o of t){const t=o,h=t.canvas.width*t.scale,a=t.canvas.height*t.scale,_="center"===t.anchor?-h/2:0,c="center"===t.anchor?-a/2:0,l=Math.cos(t.rotation),d=Math.sin(t.rotation),u=[{x:_,y:c},{x:_+h,y:c},{x:_,y:c+a},{x:_+h,y:c+a}];let g=1/0,p=1/0,v=-1/0,m=-1/0;for(const e of u){const i=e.x*l-e.y*d+t.x,s=e.x*d+e.y*l+t.y;g=Math.min(g,i),p=Math.min(p,s),v=Math.max(v,i),m=Math.max(m,s)}r?(e=Math.min(e,g),i=Math.min(i,p),s=Math.max(s,v),n=Math.max(n,m)):(e=g,i=p,s=v,n=m,r=!0)}if(!r)return void(this._compositeDirty=!1);const o=Math.ceil(s-e),h=Math.ceil(n-i);this._compositeCache||(this._compositeCache=document.createElement("canvas"),this._compositeCacheCtx=this._compositeCache.getContext("2d",{alpha:!0})),this._lastCacheWidth===o&&this._lastCacheHeight===h||(this._compositeCache.width=o,this._compositeCache.height=h,this._lastCacheWidth=o,this._lastCacheHeight=h),this._cachedBoundsMinX=e,this._cachedBoundsMinY=i;const a=this._compositeCacheCtx;a.clearRect(0,0,o,h),a.save(),a.translate(-e,-i);for(const e of t)!e.visible||e.opacity<=0||(a.save(),e.render(a),a.restore());a.restore(),this._compositeDirty=!1,this._fullRebuildNeeded=!1,this._dirtyRegions=[]}_updateDirtyRegions(t){if(!this._compositeCache||!this._compositeCacheCtx||0===this._dirtyRegions.length)return this._compositeDirty=!1,void(this._dirtyRegions=[]);const e=this._compositeCacheCtx,i=this._cachedBoundsMinX,s=this._cachedBoundsMinY,n=this._mergeDirtyRegions(this._dirtyRegions);for(const r of n){const n=r.x-i,o=r.y-s,h=Math.max(0,Math.floor(n)),a=Math.max(0,Math.floor(o)),_=Math.min(this._lastCacheWidth-h,Math.ceil(r.width+(n-h))),c=Math.min(this._lastCacheHeight-a,Math.ceil(r.height+(o-a)));if(!(_<=0||c<=0)){e.clearRect(h,a,_,c),e.save(),e.beginPath(),e.rect(h,a,_,c),e.clip(),e.translate(-i,-s);for(const i of t)!i.visible||i.opacity<=0||(e.save(),i.render(e),e.restore());e.restore()}}this._compositeDirty=!1,this._dirtyRegions=[]}_mergeDirtyRegions(t){if(t.length<=1)return t;if(t.length>10){let e=1/0,i=1/0,s=-1/0,n=-1/0;for(const r of t)e=Math.min(e,r.x),i=Math.min(i,r.y),s=Math.max(s,r.x+r.width),n=Math.max(n,r.y+r.height);return[{x:e,y:i,width:s-e,height:n-i}]}return t}destroy(){super.destroy(),this._compositeCache=null,this._compositeCacheCtx=null}}class m extends p{renderScreenLayersIn(t){const e=t.topScreenContext;this._renderScreenLayersIn(t,e)}renderAllLayersIn(t){this.renderWorldLayersIn(t),this.renderScreenLayersIn(t)}}class f{constructor(t){this.name="interaction",this._view=null,this._dragging=!1,this._vx=0,this._vy=0,this._lastMoveTs=0,this._activePointerId=null,this._lastPointerX=0,this._lastPointerY=0,this._touchPointers=new Map,this._isTouchPanning=!1,this._isPinching=!1,this._lastPinchDistance=0,this._lastPinchCenterX=0,this._lastPinchCenterY=0,this._lastTouchX=0,this._lastTouchY=0,this._onDownBound=t=>this._onPointerDown(t),this._onMoveBound=t=>this._onPointerMove(t),this._onUpBound=t=>this._onPointerUp(t),this._onCancelBound=t=>this._onPointerCancel(t),this._onWheelBound=t=>this._onWheel(t),this._onUpdate=t=>{if(!this._view)return;const{friction:e,stopSpeed:i}=this._options,s=Math.hypot(this._vx,this._vy)>=i;if(!(this._dragging||this._isTouchPanning||this._isPinching)&&s){const s=this._vx*t,n=this._vy*t;this._view.panBy(s,n),this._vx*=e,this._vy*=e,Math.hypot(this._vx,this._vy)<i&&(this._vx=0,this._vy=0)}},this._options=Object.assign({panEnabled:!0,zoomEnabled:!0,friction:.92,stopSpeed:.02,emaAlpha:.25,idleNoInertiaMs:120,wheelSensitivity:.0015},t),this._panEnabled=this._options.panEnabled,this._zoomEnabled=this._options.zoomEnabled}install(t){if(this._view)return;this._view=t;const e=t.canvas;e.style.touchAction="none",e.addEventListener("wheel",this._onWheelBound,{passive:!1}),e.addEventListener("pointerdown",this._onDownBound),window.addEventListener("pointermove",this._onMoveBound),window.addEventListener("pointerup",this._onUpBound),window.addEventListener("pointercancel",this._onCancelBound),t.onUpdate(this._onUpdate)}destroy(){if(!this._view)return;const t=this._view.canvas;t.removeEventListener("wheel",this._onWheelBound),t.removeEventListener("pointerdown",this._onDownBound),window.removeEventListener("pointermove",this._onMoveBound),window.removeEventListener("pointerup",this._onUpBound),window.removeEventListener("pointercancel",this._onCancelBound),this._touchPointers.clear(),this._isPinching=!1,this._isTouchPanning=!1,this._view.offUpdate(this._onUpdate),this._view=null}isPanEnabled(){return this._panEnabled}isZoomEnabled(){return this._zoomEnabled}setPanEnabled(t){this._panEnabled!==t&&(this._panEnabled=t,t||null===this._activePointerId||(this._dragging=!1,this._vx=0,this._vy=0))}setZoomEnabled(t){this._zoomEnabled!==t&&(this._zoomEnabled=t,!t&&this._isPinching&&this._endPinch())}setWheelSensitivity(t){this._options.wheelSensitivity=t}isDragging(){return this._dragging||this._isTouchPanning||this._isPinching}cancel(){if(this._view){if(null!=this._activePointerId)try{this._view.canvas.releasePointerCapture(this._activePointerId)}catch(t){}this._resetState()}else this._resetState()}_onPointerDown(t){var e,i;if(!(null===(e=this._view)||void 0===e?void 0:e.isAnimating))if("touch"!==t.pointerType){if(("mouse"!==t.pointerType||0===t.button)&&this._panEnabled&&null===this._activePointerId){t.preventDefault(),this._dragging=!0,this._vx=0,this._vy=0,this._lastMoveTs=performance.now(),this._activePointerId=t.pointerId,this._lastPointerX=t.clientX,this._lastPointerY=t.clientY;try{null===(i=this._view)||void 0===i||i.canvas.setPointerCapture(t.pointerId)}catch(t){}}}else this._onTouchDown(t)}_onPointerMove(t){var e;if(null===(e=this._view)||void 0===e?void 0:e.isAnimating)return;if("touch"===t.pointerType)return void this._onTouchMove(t);if(t.pointerId!==this._activePointerId)return;if(!this._dragging||!this._panEnabled||!this._view)return;const i=performance.now(),s=Math.max(1,i-(this._lastMoveTs||i-16));this._lastMoveTs=i;const n=t.clientX-this._lastPointerX,r=t.clientY-this._lastPointerY;this._lastPointerX=t.clientX,this._lastPointerY=t.clientY,this._view.panBy(n,r);const o=this._options.emaAlpha,h=n/s,a=r/s;this._vx=(1-o)*this._vx+o*h,this._vy=(1-o)*this._vy+o*a}_onPointerUp(t){if("touch"===t.pointerType)return void this._onTouchUp(t);if(t.pointerId!==this._activePointerId)return;if(!this._dragging)return;this._dragging=!1;const e=performance.now(),i=this._lastMoveTs?e-this._lastMoveTs:1/0;if(null!=this._activePointerId&&this._view){try{this._view.canvas.releasePointerCapture(this._activePointerId)}catch(t){}this._activePointerId=null}if(i>=this._options.idleNoInertiaMs)this._vx=0,this._vy=0;else{const t=Math.pow(this._options.friction,i/16);this._vx*=t,this._vy*=t}Math.hypot(this._vx,this._vy)<this._options.stopSpeed&&(this._vx=0,this._vy=0)}_onPointerCancel(t){"touch"!==t.pointerType?t.pointerId===this._activePointerId&&this._resetState():this._onTouchCancel(t)}_resetState(){this._dragging=!1,this._vx=0,this._vy=0,this._lastMoveTs=0,this._activePointerId=null,this._touchPointers.clear(),this._isTouchPanning=!1,this._isPinching=!1,this._lastPinchDistance=0}_onTouchDown(t){if(t.preventDefault(),this._touchPointers.set(t.pointerId,{x:t.clientX,y:t.clientY}),2===this._touchPointers.size&&this._zoomEnabled)return this._isTouchPanning=!1,void this._startPinch();1===this._touchPointers.size&&(this._isTouchPanning=!0,this._vx=0,this._vy=0,this._lastMoveTs=performance.now(),this._lastTouchX=t.clientX,this._lastTouchY=t.clientY)}_onTouchMove(t){if(this._touchPointers.has(t.pointerId))if(this._touchPointers.set(t.pointerId,{x:t.clientX,y:t.clientY}),this._isPinching&&2===this._touchPointers.size)this._handlePinchMove();else if(this._isTouchPanning&&1===this._touchPointers.size&&this._view){const e=performance.now(),i=Math.max(1,e-(this._lastMoveTs||e-16));this._lastMoveTs=e;const s=t.clientX-this._lastTouchX,n=t.clientY-this._lastTouchY;this._lastTouchX=t.clientX,this._lastTouchY=t.clientY,this._view.panBy(s,n);const r=this._options.emaAlpha,o=s/i,h=n/i;this._vx=(1-r)*this._vx+r*o,this._vy=(1-r)*this._vy+r*h}}_onTouchUp(t){if(this._touchPointers.delete(t.pointerId),this._isPinching){if(this._endPinch(),1===this._touchPointers.size){const[[,t]]=this._touchPointers.entries();this._isTouchPanning=!0,this._lastTouchX=t.x,this._lastTouchY=t.y,this._vx=0,this._vy=0,this._lastMoveTs=performance.now()}}else if(this._isTouchPanning&&0===this._touchPointers.size){this._isTouchPanning=!1;const t=performance.now(),e=this._lastMoveTs?t-this._lastMoveTs:1/0;if(e>=this._options.idleNoInertiaMs)this._vx=0,this._vy=0;else{const t=Math.pow(this._options.friction,e/16);this._vx*=t,this._vy*=t}Math.hypot(this._vx,this._vy)<this._options.stopSpeed&&(this._vx=0,this._vy=0)}}_onTouchCancel(t){this._touchPointers.delete(t.pointerId),this._isPinching&&this._endPinch(),0===this._touchPointers.size&&(this._isTouchPanning=!1,this._vx=0,this._vy=0)}_startPinch(){this._isPinching=!0;const[t,e]=Array.from(this._touchPointers.values());this._lastPinchDistance=Math.hypot(e.x-t.x,e.y-t.y),this._lastPinchCenterX=(t.x+e.x)/2,this._lastPinchCenterY=(t.y+e.y)/2}_handlePinchMove(){if(!this._view||!this._zoomEnabled)return;const t=Array.from(this._touchPointers.values());if(2!==t.length)return;const[e,i]=t,s=Math.hypot(i.x-e.x,i.y-e.y),n=(e.x+i.x)/2,r=(e.y+i.y)/2;if(this._lastPinchDistance>0){const t=s/this._lastPinchDistance,e=this._view.canvas.getBoundingClientRect(),i=n-e.left,o=r-e.top;this._view.zoomByFactorAtScreen(i,o,t);const h=n-this._lastPinchCenterX,a=r-this._lastPinchCenterY;this._view.panBy(h,a)}this._lastPinchDistance=s,this._lastPinchCenterX=n,this._lastPinchCenterY=r}_endPinch(){this._isPinching=!1,this._lastPinchDistance=0,this._lastPinchCenterX=0,this._lastPinchCenterY=0}_getLineHeightPx(){if(!this._view)return 16;const t=getComputedStyle(this._view.canvas).lineHeight;if(!t||"normal"===t)return 16;const e=parseFloat(t);return Number.isFinite(e)?e:16}_normalizeWheelDelta(t){if(!this._view)return 0;let e=t.deltaY;if(1===t.deltaMode)e*=this._getLineHeightPx();else if(2===t.deltaMode){e*=this._view.canvas.clientHeight||window.innerHeight||800}return e}_onWheel(t){var e;if(null===(e=this._view)||void 0===e?void 0:e.isAnimating)return;if(!this._zoomEnabled||!this._view)return;t.preventDefault(),t.stopPropagation();const i=this._normalizeWheelDelta(t),s=this._view.canvas.getBoundingClientRect(),n=t.clientX-s.left,r=t.clientY-s.top;let o=-i*this._options.wheelSensitivity;t.ctrlKey||t.metaKey?o*=1.6:t.shiftKey&&(o*=.6),this._view.zoomByLogAtScreen(n,r,o)}}function x(t){return new f(t)}class y{constructor(t){var e,i,s,n,r;this.name="bounds",this._uid=++y._uidSeed,this._view=null,this._enabled=!1,this._x=0,this._y=0,this._width=0,this._height=0,this._marginL=0,this._marginR=0,this._marginT=0,this._marginB=0,this._panClampMode="minVisible",this._background=null,this._shadow=null,this._beforePass=null,this._afterPass=null,this._onUpdate=()=>{this._enabled&&this._view&&this._clampPan()},this._onBeforeRender=t=>{this._enabled&&this._view&&(this._drawBackgroundAndShadow(t),this._applyClip(t))},this._onAfterRender=t=>{this._enabled&&this._view&&(this._restoreClip(t),this._drawBorder(t))},this._options=Object.assign({rect:{x:0,y:0,width:0,height:0},margins:{},drawBorder:!1,minVisiblePx:30,panClampMode:"minVisible",background:null,shadow:!1,passOrder:{}},t),this._passBeforeName=`bounds.beforeWorld#${this._uid}`,this._passAfterName=`bounds.afterWorld#${this._uid}`,(null==t?void 0:t.rect)&&(this._enabled=!0,this._x=t.rect.x,this._y=t.rect.y,this._width=t.rect.width,this._height=t.rect.height),(null==t?void 0:t.margins)&&(this._marginL=null!==(e=t.margins.left)&&void 0!==e?e:0,this._marginR=null!==(i=t.margins.right)&&void 0!==i?i:0,this._marginT=null!==(s=t.margins.top)&&void 0!==s?s:0,this._marginB=null!==(n=t.margins.bottom)&&void 0!==n?n:0),this._panClampMode=this._options.panClampMode,this._background=null!==(r=this._options.background)&&void 0!==r?r:null,!0===this._options.shadow?this._shadow=Object.assign({},y._defaultShadow):this._options.shadow&&"object"==typeof this._options.shadow&&(this._shadow=Object.assign(Object.assign({},y._defaultShadow),this._options.shadow))}install(t){var e,i;this._view||(this._view=t,t.onUpdate(this._onUpdate),this._beforePass={name:this._passBeforeName,phase:"beforeWorld",order:null!==(e=this._options.passOrder.beforeWorld)&&void 0!==e?e:-100,render:({view:t})=>{const e=t.renderer.getContentContext();this._onBeforeRender(e)}},this._afterPass={name:this._passAfterName,phase:"afterWorld",order:null!==(i=this._options.passOrder.afterWorld)&&void 0!==i?i:100,render:({view:t})=>{const e=t.renderer.getContentContext();this._onAfterRender(e)}},t.addRenderPass(this._beforePass),t.addRenderPass(this._afterPass))}destroy(){this._view&&(this._view.offUpdate(this._onUpdate),this._view.removeRenderPass(this._passBeforeName),this._view.removeRenderPass(this._passAfterName),this._beforePass=null,this._afterPass=null,this._view=null)}isEnabled(){return this._enabled}getRect(){return{x:this._x,y:this._y,width:this._width,height:this._height}}setRect(t,e,i,s){this._enabled=!0,this._x=t,this._y=e,this._width=i,this._height=s}clearRect(){this._enabled=!1}setMargins(t){var e,i,s,n;this._marginL=null!==(e=t.left)&&void 0!==e?e:this._marginL,this._marginR=null!==(i=t.right)&&void 0!==i?i:this._marginR,this._marginT=null!==(s=t.top)&&void 0!==s?s:this._marginT,this._marginB=null!==(n=t.bottom)&&void 0!==n?n:this._marginB}getMargins(){return{left:this._marginL,right:this._marginR,top:this._marginT,bottom:this._marginB}}setPanClampMode(t){this._panClampMode=t}getPanClampMode(){return this._panClampMode}cropTo(t){this._doResize("crop",t)}resizeTo(t){this._doResize("resize",t)}zoomToFit(t){var e,i,s;const n=null!==(e=null==t?void 0:t.mode)&&void 0!==e?e:"contain",r=null===(i=null==t?void 0:t.animate)||void 0===i||i,o=null!==(s=null==t?void 0:t.maxScale)&&void 0!==s?s:1/0;if(!this._enabled||!this._view)return;const h=this._view.dpr,a=this._view.canvas.width/h,_=this._view.canvas.height/h,c=Math.max(1,a-(this._marginL+this._marginR)),l=Math.max(1,_-(this._marginT+this._marginB));let d;const u=c/this._width,g=l/this._height;d="contain"===n?Math.min(u,g):"cover"===n?Math.max(u,g):"fitWidth"===n?u:g,d=Math.min(d,o),d=Math.min(this._view.maxZoom,Math.max(this._view.minZoom,d));const p=this._marginL+(c-d*this._width)/2,v=this._marginT+(l-d*this._height)/2,m=p-d*this._x,f=v-d*this._y;r?this._view.setTransformSmooth(d,m,f):this._view.setTransform(d,m,f)}isPointInBounds(t,e){return!this._enabled||t>=this._x&&t<=this._x+this._width&&e>=this._y&&e<=this._y+this._height}get background(){return this._background}setBackground(t){var e;this._background=t,null===(e=this._view)||void 0===e||e.requestRender()}get shadow(){return this._shadow?Object.assign({},this._shadow):null}setShadow(t){var e;this._shadow=!0===t?Object.assign({},y._defaultShadow):t&&"object"==typeof t?Object.assign(Object.assign({},y._defaultShadow),t):null,null===(e=this._view)||void 0===e||e.requestRender()}_drawBackgroundAndShadow(t){var e,i,s,n,r;this._shadow?(t.save(),t.shadowColor=null!==(e=this._shadow.color)&&void 0!==e?e:y._defaultShadow.color,t.shadowBlur=null!==(i=this._shadow.blur)&&void 0!==i?i:y._defaultShadow.blur,t.shadowOffsetX=null!==(s=this._shadow.offsetX)&&void 0!==s?s:y._defaultShadow.offsetX,t.shadowOffsetY=null!==(n=this._shadow.offsetY)&&void 0!==n?n:y._defaultShadow.offsetY,t.fillStyle=null!==(r=this._background)&&void 0!==r?r:"#ffffff",t.fillRect(this._x,this._y,this._width,this._height),t.restore()):this._background&&(t.save(),t.fillStyle=this._background,t.fillRect(this._x,this._y,this._width,this._height),t.restore())}_applyClip(t){t.save(),t.beginPath(),t.rect(this._x,this._y,this._width,this._height),t.clip()}_restoreClip(t){t.restore()}_drawBorder(t){if(!this._options.drawBorder||!this._view)return;const e=this._view.zoom;t.save(),t.lineWidth=1/e,t.strokeStyle="#cfcfcf",t.strokeRect(this._x,this._y,this._width,this._height),t.restore()}_clampPan(){if(!this._view)return;const{zoom:t,tx:e,ty:i}=this._view.getTransform(),s=t,n=this._view.dpr,r=this._view.canvas.width/n,o=this._view.canvas.height/n,h=this._x,a=this._y,_=this._x+this._width,c=this._y+this._height;let l=e,d=i;if("margin"===this._panClampMode){const t=this._marginL-s*h,n=r-this._marginR-s*_,u=this._marginT-s*a,g=o-this._marginB-s*c,p=Math.max(1,r-(this._marginL+this._marginR)),v=Math.max(1,o-(this._marginT+this._marginB));l=s*this._width<=p?this._marginL+(p-s*this._width)/2-s*this._x:Math.min(t,Math.max(n,e)),d=s*this._height<=v?this._marginT+(v-s*this._height)/2-s*this._y:Math.min(u,Math.max(g,i))}else if("minVisible"===this._panClampMode){const t=s*this._width,n=s*this._height,u=Math.min(this._options.minVisiblePx,t),g=Math.min(this._options.minVisiblePx,n),p=r-u-s*h,v=u-s*_,m=o-g-s*a,f=g-s*c;l=v<=p?Math.min(p,Math.max(v,e)):(v+p)/2,d=f<=m?Math.min(m,Math.max(f,i)):(f+m)/2}l===e&&d===i||this._view.setPan(l,d)}_doResize(t,e){if(!this._view)return;const i=Math.max(1,Math.floor(e.width)),s=Math.max(1,Math.floor(e.height)),n={width:i,height:s},r=this._view.getLayerManagers();for(const e of r){const i=e.getAllLayers("world");for(const e of i){const i=e;"function"==typeof i.cropTo&&"function"==typeof i.resizeTo&&("crop"===t?i.cropTo(n):i.resizeTo(n))}}this._width=i,this._height=s,this._enabled&&this._clampPan()}}function w(t){return new y(t)}y._uidSeed=0,y._defaultShadow={color:"rgba(0, 0, 0, 0.3)",blur:20,offsetX:0,offsetY:4};class C{execute(){if(this._isExecuted)return;const t=this._region?{x:this._region.x,y:this._region.y}:void 0;this._target.restoreSnapshot(this._afterData,t),this._isExecuted=!0}undo(){if(!this._isExecuted)return;const t=this._region?{x:this._region.x,y:this._region.y}:void 0;this._target.restoreSnapshot(this._beforeData,t),this._isExecuted=!1}canMerge(){return!1}merge(){return this}constructor(t,e,i,s){this.type="snapshot",this._isExecuted=!0,this._target=t,this._beforeData=e,this._afterData=i,this._region=null==s?void 0:s.region}}class M{get layer(){return this._layer}get insertIndex(){return this._insertIndex}execute(){this._layerManager.addLayer(this._layer,this._insertIndex)}undo(){this._layerManager.detachLayer(this._layer.id)}constructor(t){this.type="create-layer",this._layer=t.layer,this._layerManager=t.layerManager,this._insertIndex=t.insertIndex}}class L{get layer(){return this._layer}get originalIndex(){return this._originalIndex}execute(){this._layerManager.detachLayer(this._layer.id)}undo(){this._layerManager.addLayer(this._layer,this._originalIndex)}constructor(t){this.type="delete-layer",this._layer=t.layer,this._layerManager=t.layerManager,this._originalIndex=t.originalIndex}}class T{get orderedIdsBefore(){return this._orderedIdsBefore}get orderedIdsAfter(){return this._orderedIdsAfter}execute(){this._layerManager.reorderLayers(this._orderedIdsAfter)}undo(){this._layerManager.reorderLayers(this._orderedIdsBefore)}constructor(t){this.type="reorder-layers",this._layerManager=t.layerManager,this._orderedIdsBefore=t.orderedIdsBefore.slice(),this._orderedIdsAfter=t.orderedIdsAfter.slice()}}class b{execute(){this.layer.x=this.toX,this.layer.y=this.toY}undo(){this.layer.x=this.fromX,this.layer.y=this.fromY}constructor(t,e,i,s,n){this.type="move-layer",this.name=`Move ${t.name}`,this.layer=t,this.fromX=e,this.fromY=i,this.toX=s,this.toY=n}}class R{executeCommand(t){t.execute(),this.addCommand(t)}addCommand(t){var e,i;this._redoStack.splice(0,this._redoStack.length);const s=this._undoStack[this._undoStack.length-1];if(s&&(null===(e=s.canMerge)||void 0===e?void 0:e.call(s,t))&&s.merge){const e=null!==(i=s.merge(t))&&void 0!==i?i:s;return void(e!==s&&(this._undoStack[this._undoStack.length-1]=e))}this._undoStack.push(t),this._undoStack.length>this._maxHistorySize&&this._undoStack.shift()}undo(){if(0===this._undoStack.length)return null;const t=this._undoStack.pop();return t.undo(),this._redoStack.push(t),t}redo(){if(0===this._redoStack.length)return null;const t=this._redoStack.pop();return t.execute(),this._undoStack.push(t),t}canUndo(){return this._undoStack.length>0}canRedo(){return this._redoStack.length>0}clear(){this._undoStack.splice(0,this._undoStack.length),this._redoStack.splice(0,this._redoStack.length)}setMaxHistorySize(t){if(this._maxHistorySize=Math.max(1,t),this._undoStack.length>this._maxHistorySize){const t=this._undoStack.length-this._maxHistorySize;this._undoStack.splice(0,t)}}constructor(t){var e,i,s;this._undoStack=[],this._redoStack=[],this._maxHistorySize=null!==(e=null==t?void 0:t.maxHistorySize)&&void 0!==e?e:50,this._undoStack=null!==(i=null==t?void 0:t.undoStack)&&void 0!==i?i:[],this._redoStack=null!==(s=null==t?void 0:t.redoStack)&&void 0!==s?s:[]}}export{g as BitmapLayer,y as BoundsPlugin,o as Canvas2DRenderer,d as CanvasLayer,v as ContentLayerManager,M as CreateLayerCommand,L as DeleteLayerCommand,R as HistoryManager,f as InteractionPlugin,l as LayerBase,p as LayerManagerBase,b as MoveLayerCommand,r as RenderPipeline,T as ReorderLayersCommand,C as SnapshotCommand,m as TopScreenLayerManager,_ as ViewManager,a as WebGLRenderer,w as createBoundsPlugin,x as createInteractionPlugin};

package/dist/layer/layer-manager.base.d.ts

@@ -3,13 +3,45 @@ import { SpaceType } from '../types';
 import { LayerBase } from './layer.base';
 import { BitmapLayer, ICreateBitmapLayerOptions } from './layer.bitmap';
 import { CanvasLayer, ICreateCanvasLayerOption, ICreateCanvasLayerFromCanvasOption } from './layer.canvas';
+type LayerEventMap = {
+    layerAdded: (layer: LayerBase, index: number) => void;
+    layerRemoved: (layer: LayerBase, index: number) => void;
+    layersReordered: (orderedIds: string[]) => void;
+};
+type LayerEventType = keyof LayerEventMap;
+type LayerEventCallback = LayerEventMap[LayerEventType];
 declare class LayerManagerBase {
     protected _worldLayers: LayerBase[];
     protected _screenLayers: LayerBase[];
+    private _eventListeners;
+    /**
+     * Subscribe to layer events.
+     */
+    on<K extends LayerEventType>(event: K, callback: LayerEventMap[K]): void;
+    /**
+     * Unsubscribe from layer events.
+     */
+    off<K extends LayerEventType>(event: K, callback: LayerEventMap[K]): void;
+    private _emit;
     /**
      * Render all layers in target view.
      */
     protected _renderAllLayersIn(view: ViewManager, context: CanvasRenderingContext2D): void;
+    protected _renderWorldLayersIn(view: ViewManager, context: CanvasRenderingContext2D): void;
+    protected _renderScreenLayersIn(view: ViewManager, context: CanvasRenderingContext2D): void;
+    /**
+     * Render world-space layers in target view.
+     */
+    renderWorldLayersIn(view: ViewManager): void;
+    /**
+     * Render screen-space layers in target view.
+     */
+    renderScreenLayersIn(view: ViewManager): void;
+    /**
+     * Render all layers in target view.
+     * Subclasses may override this for custom rendering behavior (e.g., caching).
+     */
+    renderAllLayersIn(view: ViewManager): void;
     addLayer(layer: LayerBase, insertAt?: number): string;
     createImageLayer(option: ICreateBitmapLayerOptions): Promise<BitmapLayer>;
     /**
@@ -48,3 +80,4 @@ declare class LayerManagerBase {
     destroy(): void;
 }
 export { LayerManagerBase };
+export type { LayerEventType, LayerEventCallback };

package/dist/layer/layer-manager.content.d.ts

@@ -1,9 +1,17 @@
 import { ViewManager } from '../core/view-manager';
 import { SpaceType } from '../types';
 import { LayerManagerBase } from './layer-manager.base';
+import type { CanvasLayer } from './layer.canvas';
+interface DirtyRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
 /**
  * Content Layer Manager is used to store content bitmaps.
  * Uses a composite cache to avoid re-rendering all layers every frame.
+ * Supports dirty region updates for incremental rendering.
  */
 declare class ContentLayerManager extends LayerManagerBase {
     private _compositeCache;
@@ -13,11 +21,24 @@ declare class ContentLayerManager extends LayerManagerBase {
     private _lastCacheHeight;
     private _cachedBoundsMinX;
     private _cachedBoundsMinY;
+    private _dirtyRegions;
+    private _fullRebuildNeeded;
     /**
-     * Mark the composite cache as dirty.
-     * Call this when any layer content changes.
+     * Mark the composite cache as dirty (full rebuild).
+     * Call this when layer structure changes (add/remove/reorder).
      */
     markDirty(): void;
+    /**
+     * Mark a specific region as dirty (incremental update).
+     * Coordinates are in world space.
+     * Call this when only a small part of a layer changes.
+     */
+    markDirtyRegion(rect: DirtyRect): void;
+    /**
+     * Mark a dirty region from a layer's local coordinates.
+     * Automatically converts to world coordinates.
+     */
+    markDirtyRegionFromLayer(layer: CanvasLayer, localRect: DirtyRect): void;
     /**
      * Override addLayer to mark cache dirty.
      */
@@ -43,11 +64,24 @@ declare class ContentLayerManager extends LayerManagerBase {
      * Render all layers in target view.
      * Uses composite cache for better performance with many layers.
      */
+    renderWorldLayersIn(view: ViewManager): void;
+    /**
+     * Backward-compatible wrapper.
+     */
     renderAllLayersIn(view: ViewManager): void;
     /**
      * Rebuild the composite cache from all world layers.
      */
     private _rebuildCompositeCache;
+    /**
+     * Update only the dirty regions in the composite cache.
+     * Much faster than full rebuild for small changes like brush strokes.
+     */
+    private _updateDirtyRegions;
+    /**
+     * Merge overlapping or adjacent dirty regions to reduce draw calls.
+     */
+    private _mergeDirtyRegions;
     /**
      * Override destroy to clean up cache.
      */

package/dist/layer/layer-manager.top-screen.d.ts

@@ -8,6 +8,10 @@ declare class TopScreenLayerManager extends LayerManagerBase {
     /**
      * Render all layers in target view.
      */
+    renderScreenLayersIn(view: ViewManager): void;
+    /**
+     * Backward-compatible wrapper.
+     */
     renderAllLayersIn(view: ViewManager): void;
 }
 export { TopScreenLayerManager };

package/dist/layer/layer.canvas.d.ts

@@ -63,14 +63,36 @@ declare class CanvasLayer extends LayerBase {
     private _drawing;
     private _lastX;
     private _lastY;
+    private _dirtyRegion;
+    /**
+     * Get and clear the dirty region since last call.
+     * Returns null if no dirty region.
+     * Coordinates are in local layer space.
+     */
+    consumeDirtyRegion(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    /**
+     * Expand the dirty region to include a rectangle.
+     */
+    private _expandDirtyRegion;
     /**
      * Begin a stroke at the given world coordinates.
      */
     beginStroke(wx: number, wy: number): void;
     /**
      * Continue a stroke to the given world coordinates.
+     * Returns the dirty region in local coordinates, or null if not drawing.
      */
-    stroke(wx: number, wy: number, color: string, size: number, pressure?: number, mode?: 'brush' | 'eraser'): void;
+    stroke(wx: number, wy: number, color: string, size: number, pressure?: number, mode?: 'brush' | 'eraser'): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
     /**
      * End the current stroke.
      */

package/dist/plugins/{document → bounds}/index.d.ts

@@ -2,7 +2,7 @@ import type { ViewManager } from '../../core/view-manager';
 import type { ILayerResizeConfig } from '../../layer/layer.canvas';
 import type { Plugin } from '../types';
 type PanClampMode = 'margin' | 'minVisible';
-interface DocumentShadowOptions {
+interface BoundsShadowOptions {
     /** Shadow color. Default 'rgba(0, 0, 0, 0.3)' */
     color?: string;
     /** Shadow blur radius. Default 20 */
@@ -12,7 +12,7 @@ interface DocumentShadowOptions {
     /** Shadow vertical offset. Default 4 */
     offsetY?: number;
 }
-interface DocumentPluginOptions {
+interface BoundsPluginOptions {
     /**
      * Initial document rectangle (world coordinates).
      */
@@ -50,15 +50,27 @@ interface DocumentPluginOptions {
     /**
      * Shadow configuration. Set to true for default shadow, or provide custom options. Default false.
      */
-    shadow?: DocumentShadowOptions | boolean;
+    shadow?: BoundsShadowOptions | boolean;
+    /**
+     * Pipeline pass ordering.
+     * Use this when you need to insert other passes before/after bounds clip.
+     */
+    passOrder?: {
+        /** Default -100 */
+        beforeWorld?: number;
+        /** Default 100 */
+        afterWorld?: number;
+    };
 }
 /**
- * Document Plugin
+ * Bounds Plugin
  *
  * Manages document bounds, margins, clipping, and pan clamping.
  */
-declare class DocumentPlugin implements Plugin {
-    readonly name = "document";
+declare class BoundsPlugin implements Plugin {
+    readonly name = "bounds";
+    private static _uidSeed;
+    private readonly _uid;
     private _view;
     private _options;
     private _enabled;
@@ -73,8 +85,12 @@ declare class DocumentPlugin implements Plugin {
     private _panClampMode;
     private _background;
     private _shadow;
+    private readonly _passBeforeName;
+    private readonly _passAfterName;
+    private _beforePass;
+    private _afterPass;
     private static readonly _defaultShadow;
-    constructor(options?: DocumentPluginOptions);
+    constructor(options?: BoundsPluginOptions);
     install(view: ViewManager): void;
     destroy(): void;
     isEnabled(): boolean;
@@ -122,7 +138,7 @@ declare class DocumentPlugin implements Plugin {
     /**
      * Check if a world point is inside the document.
      */
-    isPointInDocument(wx: number, wy: number): boolean;
+    isPointInBounds(wx: number, wy: number): boolean;
     /**
      * Get the current background color.
      */
@@ -135,21 +151,37 @@ declare class DocumentPlugin implements Plugin {
     /**
      * Get the current shadow configuration.
      */
-    get shadow(): DocumentShadowOptions | null;
+    get shadow(): BoundsShadowOptions | null;
     /**
      * Set the shadow configuration.
      * @param options Shadow options, true for default shadow, or false/null to disable.
      */
-    setShadow(options: DocumentShadowOptions | boolean | null): void;
+    setShadow(options: BoundsShadowOptions | boolean | null): void;
     private _onUpdate;
     private _onBeforeRender;
     private _onAfterRender;
+    /**
+     * Draw background color and/or shadow.
+     */
+    private _drawBackgroundAndShadow;
+    /**
+     * Apply clip to document bounds.
+     */
+    private _applyClip;
+    /**
+     * Restore context after clip.
+     */
+    private _restoreClip;
+    /**
+     * Draw border around document.
+     */
+    private _drawBorder;
     private _clampPan;
     private _doResize;
 }
 /**
- * Create a document plugin instance.
+ * Create a Bounds Plugin instance.
  */
-declare function createDocumentPlugin(options?: DocumentPluginOptions): DocumentPlugin;
-export { DocumentPlugin, createDocumentPlugin };
-export type { DocumentPluginOptions, DocumentShadowOptions, PanClampMode };
+declare function createBoundsPlugin(options?: BoundsPluginOptions): BoundsPlugin;
+export { BoundsPlugin, createBoundsPlugin };
+export type { BoundsPluginOptions, BoundsShadowOptions, PanClampMode };

package/dist/plugins/index.d.ts

@@ -1,4 +1,4 @@
 export * from './types';
 export * from './interaction';
-export * from './document';
-export * from './history';
+export * from './bounds';
+export * from '../history';

package/dist/plugins/interaction/index.d.ts

@@ -73,11 +73,17 @@ declare class InteractionPlugin implements Plugin {
     setZoomEnabled(enabled: boolean): void;
     setWheelSensitivity(s: number): void;
     isDragging(): boolean;
+    /**
+     * Cancel any ongoing interaction (drag/pinch/inertia).
+     * Useful when the page loses focus (blur/visibilitychange).
+     */
+    cancel(): void;
     private _onUpdate;
     private _onPointerDown;
     private _onPointerMove;
     private _onPointerUp;
     private _onPointerCancel;
+    private _resetState;
     private _onTouchDown;
     private _onTouchMove;
     private _onTouchUp;

package/package.json

@@ -1,33 +1,37 @@
-{
-  "name": "@lancercomet/zoom-pan",
-  "version": "0.2.2",
-  "description": "Yet another web 2D rendering lib.",
-  "main": "./dist/index.js",
-  "module": "./dist/index.module.js",
-  "files": [
-    "dist/**/*",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build:example": "vite build --mode example",
-    "build:lib": "rollup -c"
-  },
-  "keywords": [],
-  "author": "",
-  "devDependencies": {
-    "@lancercomet/eslint-config-eslint-rules": "^0.2.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@vitejs/plugin-vue-jsx": "^5.1.2",
-    "rollup": "^4.53.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.31.2",
-    "stylus": "^0.64.0",
-    "terser": "^5.44.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
-    "vite-plugin-dts": "^3.9.1",
-    "vue": "^3.5.22"
-  }
-}
+{
+  "name": "@lancercomet/zoom-pan",
+  "version": "0.4.0",
+  "description": "Yet another web 2D rendering lib.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.module.js",
+  "files": [
+    "dist/**/*",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:example": "vite build --mode example",
+    "build:lib": "rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@lancercomet/eslint-config-eslint-rules": "^0.2.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "rollup": "^4.53.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "stylus": "^0.64.0",
+    "terser": "^5.44.1",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.5.22"
+  }
+}

package/dist/plugins/history/index.d.ts

@@ -1,4 +0,0 @@
-export * from './types';
-export * from './snapshot-command';
-export * from './layer-commands';
-export * from './history-manager';