@netless/app-docs-viewer - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/index.d.ts

 import type { NetlessApp } from "@netless/window-manager";
-import { DocsViewerPage } from "./DocsViewer";
 export type { DocsViewerPage } from "./DocsViewer";
 export interface NetlessAppStaticDocsViewerAttributes {
-    dynamic?: false;
     /** ScrollTop base on the real page size */
     pageScrollTop?: number;
-    pages?: DocsViewerPage[];
 }
 export interface NetlessAppDynamicDocsViewerAttributes {
-    dynamic: true;
 }
 declare const NetlessAppDocsViewer: NetlessApp<NetlessAppStaticDocsViewerAttributes | NetlessAppDynamicDocsViewerAttributes>;
 export default NetlessAppDocsViewer;

dist/main.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,o=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i;const n="undefined"!=typeof window,l=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=n&&"IntersectionObserver"in window,c=n&&"classList"in document.createElement("p"),p=n&&window.devicePixelRatio>1,h={elements_selector:".lazy",container:l||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},g=e=>Object.assign({},h,e),u=function(e,t){var s;let i="LazyLoad::Initialized",a=new e(t);try{s=new CustomEvent(i,{detail:{instance:a}})}catch(r){(s=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:a})}window.dispatchEvent(s)},w=(e,t)=>e.getAttribute("data-"+t),m=e=>w(e,"ll-status"),b=(e,t)=>((e,t,s)=>{var i="data-"+t;null!==s?e.setAttribute(i,s):e.removeAttribute(i)})(e,"ll-status",t),v=e=>b(e,null),y=e=>null===m(e),M=e=>"native"===m(e),f=["loading","loaded","applied","error"],x=(e,t,s,i)=>{e&&(void 0===i?void 0===s?e(t):e(t,s):e(t,s,i))},N=(e,t)=>{c?e.classList.add(t):e.className+=(e.className?" ":"")+t},T=(e,t)=>{c?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const s=t._observer;s&&s.unobserve(e)},C=(e,t)=>{e&&(e.loadingCount+=t)},j=(e,t)=>{e&&(e.toLoadCount=t)},L=e=>{let t=[];for(let s,i=0;s=e.children[i];i+=1)"SOURCE"===s.tagName&&t.push(s);return t},A=(e,t,s)=>{s&&e.setAttribute(t,s)},D=(e,t)=>{e.removeAttribute(t)},S=e=>!!e.llOriginalAttrs,z=e=>{if(S(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},P=e=>{if(!S(e))return;const t=e.llOriginalAttrs;A(e,"src",t.src),A(e,"srcset",t.srcset),A(e,"sizes",t.sizes)},O=(e,t)=>{A(e,"sizes",w(e,t.data_sizes)),A(e,"srcset",w(e,t.data_srcset)),A(e,"src",w(e,t.data_src))},k=e=>{D(e,"src"),D(e,"srcset"),D(e,"sizes")},_=(e,t)=>{const s=e.parentNode;if(!s||"PICTURE"!==s.tagName)return;L(s).forEach(t)},$={IMG:(e,t)=>{_(e,(e=>{z(e),O(e,t)})),z(e),O(e,t)},IFRAME:(e,t)=>{A(e,"src",w(e,t.data_src))},VIDEO:(e,t)=>{((e,t)=>{L(e).forEach(t)})(e,(e=>{A(e,"src",w(e,t.data_src))})),A(e,"poster",w(e,t.data_poster)),A(e,"src",w(e,t.data_src)),e.load()}},V=(e,t)=>{const s=$[e.tagName];s&&s(e,t)},Y=(e,t,s)=>{N(e,t.class_applied),b(e,"applied"),t.unobserve_completed&&I(e,t),x(t.callback_applied,e,s)},U=(e,t,s)=>{C(s,1),N(e,t.class_loading),b(e,"loading"),x(t.callback_loading,e,s)},R=["IMG","IFRAME","VIDEO"],Z=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||x(e.callback_finish,t)},F=(e,t,s)=>{e.addEventListener(t,s),e.llEvLisnrs[t]=s},W=(e,t,s)=>{e.removeEventListener(t,s)},Q=e=>!!e.llEvLisnrs,H=e=>{if(!Q(e))return;const t=e.llEvLisnrs;for(let s in t){const i=t[s];W(e,s,i)}delete e.llEvLisnrs},B=(e,t,s)=>{(e=>{delete e.llTempImage})(e),C(s,-1),(e=>{e&&(e.toLoadCount-=1)})(s),T(e,t.class_loading),t.unobserve_completed&&I(e,s)},G=(e,t,s)=>{const i=E(e)||e;if(Q(i))return;((e,t,s)=>{Q(e)||(e.llEvLisnrs={});const i="VIDEO"===e.tagName?"loadeddata":"load";F(e,i,t),F(e,"error",s)})(i,(a=>{((e,t,s,i)=>{const a=M(t);B(t,s,i),N(t,s.class_loaded),b(t,"loaded"),x(s.callback_loaded,t,i),a||Z(s,i)})(0,e,t,s),H(i)}),(a=>{((e,t,s,i)=>{const a=M(t);B(t,s,i),N(t,s.class_error),b(t,"error"),x(s.callback_error,t,i),a||Z(s,i)})(0,e,t,s),H(i)}))},X=(e,t,s)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),G(e,t,s),((e,t,s)=>{const i=w(e,t.data_bg),a=w(e,t.data_bg_hidpi),r=p&&a?a:i;r&&(e.style.backgroundImage=`url("${r}")`,E(e).setAttribute("src",r),U(e,t,s))})(e,t,s),((e,t,s)=>{const i=w(e,t.data_bg_multi),a=w(e,t.data_bg_multi_hidpi),r=p&&a?a:i;r&&(e.style.backgroundImage=r,Y(e,t,s))})(e,t,s)},K=(e,t,s)=>{(e=>R.indexOf(e.tagName)>-1)(e)?((e,t,s)=>{G(e,t,s),V(e,t),U(e,t,s)})(e,t,s):X(e,t,s)},q=(e,t,s,i)=>{s.cancel_on_exit&&(e=>"loading"===m(e))(e)&&"IMG"===e.tagName&&(H(e),(e=>{_(e,(e=>{k(e)})),k(e)})(e),(e=>{_(e,(e=>{P(e)})),P(e)})(e),T(e,s.class_loading),C(i,-1),v(e),x(s.callback_cancel,e,t,i))},J=(e,t,s,i)=>{const a=(e=>f.indexOf(m(e))>=0)(e);b(e,"entered"),N(e,s.class_entered),T(e,s.class_exited),((e,t,s)=>{t.unobserve_entered&&I(e,s)})(e,s,i),x(s.callback_enter,e,t,i),a||K(e,s,i)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,se=(e,t,s)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,s)=>{e.setAttribute("loading","lazy"),G(e,t,s),V(e,t),b(e,"native")})(e,t,s)})),j(s,0)},ie=(e,t,s)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?J(e.target,e,t,s):((e,t,s,i)=>{y(e)||(N(e,s.class_exited),q(e,t,s,i),x(s.callback_exit,e,t,i))})(e.target,e,t,s)))},ae=(e,t)=>{d&&!te(e)&&(t._observer=new IntersectionObserver((s=>{ie(s,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))},re=e=>Array.prototype.slice.call(e),oe=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===m(e))(e),le=(e,t)=>(e=>re(e).filter(y))(e||oe(t)),de=(e,t)=>{var s;(s=oe(e),re(s).filter(ne)).forEach((t=>{T(t,e.class_error),v(t)})),t.update()},ce=function(e,t){const s=g(e);this._settings=s,this.loadingCount=0,ae(s,this),((e,t)=>{n&&window.addEventListener("online",(()=>{de(e,t)}))})(s,this),this.update(t)};ce.prototype={update:function(e){const t=this._settings,s=le(e,t);var i,a;(j(this,s.length),!l&&d)?te(t)?se(s,t,this):(i=this._observer,a=s,(e=>{e.disconnect()})(i),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(i,a)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),oe(this._settings).forEach((e=>{delete e.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;le(e,t).forEach((e=>{I(e,this),K(e,t,this)}))}},ce.load=(e,t)=>{const s=g(t);K(e,s)},ce.resetStatus=e=>{v(e)},n&&((e,t)=>{if(t)if(t.length)for(let s,i=0;s=t[i];i+=1)u(e,s);else u(e,t)})(ce,window.lazyLoadOptions);const pe=(e,t,s,i)=>{if("length"===s||"prototype"===s)return;if("arguments"===s||"caller"===s)return;const a=Object.getOwnPropertyDescriptor(e,s),r=Object.getOwnPropertyDescriptor(t,s);!he(a,r)&&i||Object.defineProperty(e,s,r)},he=function(e,t){return void 0===e||e.configurable||e.writable===t.writable&&e.enumerable===t.enumerable&&e.configurable===t.configurable&&(e.writable||e.value===t.value)},ge=(e,t)=>`/* Wrapped ${e}*/\n${t}`,ue=Object.getOwnPropertyDescriptor(Function.prototype,"toString"),we=Object.getOwnPropertyDescriptor(Function.prototype.toString,"name"),me=(e,n,l)=>{const d=""===l?"":`with ${l.trim()}() `,c=ge.bind(null,d,n.toString());var p;Object.defineProperty(c,"name",we),Object.defineProperty(e,"toString",(p=((e,t)=>{for(var s in t||(t={}))a.call(t,s)&&o(e,s,t[s]);if(i)for(var s of i(t))r.call(t,s)&&o(e,s,t[s]);return e})({},ue),t(p,s({value:c}))))};var be=(e,t,{ignoreNonConfigurable:s=!1}={})=>{const{name:i}=e;for(const a of Reflect.ownKeys(t))pe(e,t,a,s);return((e,t)=>{const s=Object.getPrototypeOf(t);s!==Object.getPrototypeOf(e)&&Object.setPrototypeOf(e,s)})(e,t),me(e,t,i),e};const ve=(e,t={})=>{if("function"!=typeof e)throw new TypeError(`Expected the first argument to be a function, got \`${typeof e}\``);const{wait:s=0,maxWait:i=Number.Infinity,before:a=!1,after:r=!0}=t;if(!a&&!r)throw new Error("Both `before` and `after` are false, function wouldn't be called.");let o,n,l;const d=function(...t){const d=this,c=()=>{n=void 0,o&&(clearTimeout(o),o=void 0),r&&(l=e.apply(d,t))},p=a&&!o;return clearTimeout(o),o=setTimeout((()=>{o=void 0,n&&(clearTimeout(n),n=void 0),r&&(l=e.apply(d,t))}),s),i>0&&i!==Number.Infinity&&!n&&(n=setTimeout(c,i)),p&&(l=e.apply(d,t)),l};return be(d,e),d.cancel=()=>{o&&(clearTimeout(o),o=void 0),n&&(clearTimeout(n),n=void 0)},d};class ye{constructor(){this.disposers=new Map,this.disposerIDGenCount=1}add(e,t=this.genDisposerID()){return this.flush(t),this.disposers.set(t,e()),t}addDisposer(e,t=this.genDisposerID()){return this.add((()=>e),t)}addEventListener(e,t,s,i){e.addEventListener(t,s,i);const a=this.genDisposerID();return this.disposers.set(a,(()=>{e.removeEventListener(t,s)})),a}remove(e){const t=this.disposers.get(e);return this.disposers.delete(e),t}flush(e){if(e){const s=this.remove(e);if(s)try{s()}catch(t){console.error(t)}}else this.disposers.forEach((e=>{try{e()}catch(t){console.error(t)}})),this.disposers.clear()}genDisposerID(){return"disposer-"+this.disposerIDGenCount++}}var Me="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTQxOC4xNTggMjU3LjQxOUwxNzQuNjYzIDQxMy4zM2MtNi4wMTcgMy45MTktMTUuNzA4IDMuNzcyLTIxLjI5MS0uMjktMi43OTEtMi4wMTgtNC4yOTUtNC40ODMtNC4yOTUtNy4wODRWOTQuMTA5YzAtNS42NSA2Ljg4My0xMC4yODkgMTUuMjcxLTEwLjI4OSA0LjI5OCAwIDguMzkxIDEuMzA3IDExLjE4MSAzLjMzMmwyNDIuNjI5IDE1NS40ODRjNi4wMTYgMy45MTcgNi40NTEgMTAuMjkyLjY0OSAxNC40OTEtLjIxNi4xNTQtLjQzMi4xNTQtLjY0OS4yOTJ6TTE3MC42MjEgMzkxLjI4OGwyMjMuMTE2LTE0MS4zMDFMMTcwLjcxIDEwNy43NTNsLS4wODkgMjgzLjUzNXoiIC8+Cjwvc3ZnPgo=";class fe{constructor({readonly:e,box:t,pages:s,onNewPageIndex:i,onPlay:a}){if(this.pageIndex=0,this.isShowPreview=!1,this.sideEffect=new ye,s.length<=0)throw new Error("[DocsViewer] Empty pages.");this.readonly=e,this.box=t,this.pages=s,this.onNewPageIndex=i,this.onPlay=a,this.render()}mount(){this.box.mountContent(this.$content),this.box.mountFooter(this.$footer),this.sideEffect.add((()=>{const e=new ce({container:this.$preview,elements_selector:`.${this.wrapClassName("preview-page>img")}`});return()=>e.destroy()}),"preview-lazyload")}unmount(){this.$content.remove(),this.$footer.remove()}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.$content.classList.toggle(this.wrapClassName("readonly"),e),this.$footer.classList.toggle(this.wrapClassName("readonly"),e),this.$pageNumberInput.disabled=e)}destroy(){this.sideEffect.flush(),this.unmount()}setPageIndex(e){Number.isNaN(e)||(this.pageIndex=e,this.$pageNumberInput.value=String(e+1))}render(){return this.renderContent(),this.renderFooter(),this.$content}renderContent(){if(!this.$content){const e=document.createElement("div");e.className=this.wrapClassName("content"),this.$content=e,this.readonly&&e.classList.add(this.wrapClassName("readonly")),e.appendChild(this.renderPreviewMask()),e.appendChild(this.renderPreview())}return this.$content}renderPreview(){if(!this.$preview){const e=document.createElement("div");e.className=this.wrapClassName("preview")+" tele-fancy-scrollbar",this.$preview=e;const t=this.wrapClassName("preview-page"),s=this.wrapClassName("preview-page-name");this.pages.forEach(((i,a)=>{var r;const o=String(a),n=document.createElement("a");n.className=t+" "+this.wrapClassName(`preview-page-${a}`),n.setAttribute("href","#"),n.dataset.pageIndex=o;const l=document.createElement("span");l.className=s,l.textContent=String(a+1),l.dataset.pageIndex=o;const d=document.createElement("img");d.width=i.width,d.height=i.height,d.dataset.src=null!=(r=i.thumbnail)?r:i.src,d.dataset.pageIndex=o,n.appendChild(d),n.appendChild(l),e.appendChild(n)})),this.sideEffect.addEventListener(e,"click",(e=>{var t;if(this.readonly)return;const s=null==(t=e.target.dataset)?void 0:t.pageIndex;s&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),this.onNewPageIndex(Number(s)),this.togglePreview(!1))}))}return this.$preview}renderPreviewMask(){return this.$previewMask||(this.$previewMask=document.createElement("div"),this.$previewMask.className=this.wrapClassName("preview-mask"),this.sideEffect.addEventListener(this.$previewMask,"click",(e=>{this.readonly||e.target===this.$previewMask&&this.togglePreview(!1)}))),this.$previewMask}renderFooter(){if(!this.$footer){const e=document.createElement("div");e.className=this.wrapClassName("footer"),this.$footer=e,this.readonly&&e.classList.add(this.wrapClassName("readonly"));const t=this.renderFooterBtn("btn-sidebar","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik01MCA4SDE0Yy0zLjMwOSAwLTYgMi42OTEtNiA2djM2YzAgMy4zMDkgMi42OTEgNiA2IDZoMzZjMy4zMDkgMCA2LTIuNjkxIDYtNlYxNGMwLTMuMzA5LTIuNjkxLTYtNi02ek0xMiA1MFYxNGMwLTEuMTAzLjg5Ny0yIDItMmg4djQwaC04Yy0xLjEwMyAwLTItLjg5Ny0yLTJ6bTQwIDBjMCAxLjEwMy0uODk3IDItMiAySDI2VjEyaDI0YzEuMTAzIDAgMiAuODk3IDIgMnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(t,"click",(()=>{this.readonly||this.togglePreview()}));const s=document.createElement("div");s.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTE3Ny44MSAyNDkuOTU5TDMzNy40NzMgOTAuMjk1YzIuNzIyLTIuODY1IDIuNjUxLTcuMzc4LS4xNDMtMTAuMS0yLjc5My0yLjY1LTcuMTYzLTIuNjUtOS45NTYgMGwtMTY0Ljc1IDE2NC43NWMtMi43OTMgMi43OTMtMi43OTMgNy4zMDYgMCAxMC4xbDE2NC43NSAxNjQuNzVjMi44NjUgMi43MjIgNy4zNzggMi42NSAxMC4wOTktLjE0MyAyLjY1MS0yLjc5NCAyLjY1MS03LjE2MyAwLTkuOTU3TDE3Ny44MDkgMjQ5Ljk1OXoiIC8+Cjwvc3ZnPgo=");if(this.sideEffect.addEventListener(i,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex-1)})),s.appendChild(i),this.onPlay){const e=this.renderFooterBtn("btn-page-play",Me),t=this.debounce((()=>{const t=e.querySelector("img");t&&(t.src=Me)}),500);this.sideEffect.addEventListener(e,"click",(()=>{if(this.readonly)return;const s=e.querySelector("img");s&&(s.src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTMxMi40OTEgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6TTE2NS4yNTcgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6IiAvPgo8L3N2Zz4K"),this.onPlay&&this.onPlay(),t()})),s.appendChild(e)}const a=this.renderFooterBtn("btn-page-next","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTMyMi4xOSAyNTAuMDQxTDE2Mi41MjcgNDA5LjcwNWMtMi43MjIgMi44NjUtMi42NTEgNy4zNzguMTQzIDEwLjEgMi43OTMgMi42NSA3LjE2MyAyLjY1IDkuOTU2IDBsMTY0Ljc1LTE2NC43NWMyLjc5My0yLjc5MyAyLjc5My03LjMwNiAwLTEwLjFsLTE2NC43NS0xNjQuNzVjLTIuODY1LTIuNzIyLTcuMzc4LTIuNjUtMTAuMDk5LjE0My0yLjY1MSAyLjc5NC0yLjY1MSA3LjE2MyAwIDkuOTU3bDE1OS42NjQgMTU5LjczNnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(a,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex+1)})),s.appendChild(a);const r=document.createElement("div");r.className=this.wrapClassName("page-number");const o=document.createElement("input");o.className=this.wrapClassName("page-number-input"),o.value=String(this.pageIndex+1),this.readonly&&(o.disabled=!0),this.$pageNumberInput=o,this.sideEffect.addEventListener(o,"change",(()=>{this.readonly||o.value&&this.onNewPageIndex(Number(o.value)-1)}));const n=document.createElement("span");n.textContent=" / "+this.pages.length,r.appendChild(o),r.appendChild(n),this.$footer.appendChild(t),this.$footer.appendChild(s),this.$footer.appendChild(r)}return this.$footer}renderFooterBtn(e,t){const s=document.createElement("button");s.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e);const i=document.createElement("img");return i.src=t,s.appendChild(i),s}togglePreview(e){if(this.isShowPreview=null!=e?e:!this.isShowPreview,this.$content.classList.toggle(this.wrapClassName("preview-active"),this.isShowPreview),this.isShowPreview){const e=this.$preview.querySelector("."+this.wrapClassName(`preview-page-${this.pageIndex}`));e&&this.$preview.scrollTo({top:e.offsetTop-16})}}debounce(e,t){const s=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>s.cancel())),s}wrapClassName(e){return"netless-app-docs-viewer-"+e}}function xe(e,t,s){return Math.min(Math.max(e,t),s)}class Ne{constructor({whiteboardView:e,readonly:t,box:s,pages:i,pagesSize:a,pageScrollTop:r=0,onUserScroll:o}){this.onNewPageIndex=e=>{this.scrollToPage(e)},this.sideEffect=new ye,this.whiteboardView=e,this.readonly=t,this.box=s,this.pages=i,this.pageScrollTop=r,this.pagesSize=a,this.onUserScroll=o,this.viewer=new fe({readonly:t,box:s,pages:i,onNewPageIndex:this.onNewPageIndex}),this.render()}mount(){return this.viewer.mount(),this.sideEffect.add((()=>{const e=new ce({container:this.$pages,elements_selector:`.${this.wrapClassName("page")}`});return()=>e.destroy()}),"page-lazyload"),this.setupWhiteboardCamera(),0!==this.pageScrollTop&&this.pageScrollTo(this.pageScrollTop),this.setupScrollTopEvent(),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.onUserScroll=void 0,this.unmount(),this.viewer.destroy()}syncPageScrollTop(e){e>=0&&Math.abs(this.pageScrollTop-e)>10&&this.pageScrollTo(e)}render(){this.viewer.$content.appendChild(this.renderPages()),this.viewer.$content.appendChild(this.renderWhiteboardView())}renderPages(){if(!this.$pages){const e=document.createElement("div");e.className=this.wrapClassName("pages"),this.$pages=e;const t=this.wrapClassName("page");this.pages.forEach(((s,i)=>{const a=document.createElement("img");a.className=t+" "+this.wrapClassName(`page-${i}`),a.draggable=!1,a.width=s.width,a.height=s.height,a.dataset.src=s.src,a.dataset.pageIndex=String(i),e.appendChild(a)}))}return this.$pages}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView,this.sideEffect.addEventListener(this.$whiteboardView,"wheel",(e=>{if(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),!this.readonly){const t=xe(this.pageScrollTop+e.deltaY,0,this.pagesSize.height);this.pageScrollTo(t),this.onUserScroll&&this.onUserScroll(t)}}),{passive:!1,capture:!0}),this.sideEffect.addEventListener(this.$whiteboardView,"touchstart",(e=>{e.touches.length>1&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),this.readonly)}),{passive:!1,capture:!0})),this.$whiteboardView}scrollTopPageToEl(e){const t=this.$pages.scrollHeight;return t>0?e*(t/this.pagesSize.height):null}scrollTopElToPage(e){const t=this.$pages.scrollHeight;return t>0?e*(this.pagesSize.height/t):null}elScrollTo(e){this.$pages.scrollTo({top:e})}pageScrollTo(e){const t=this.scrollTopPageToEl(e);null!==t&&this.elScrollTo(t)}scrollToPage(e){if(!this.readonly&&this.$pages&&!Number.isNaN(e)){e=xe(e,0,this.pages.length-1);const t=this.$pages.querySelector("."+this.wrapClassName(`page-${e}`));if(t){const e=t.offsetTop;if(this.elScrollTo(e),this.onUserScroll){const t=this.scrollTopElToPage(e);null!==t&&this.onUserScroll(t)}}}}setupScrollTopEvent(){const e=this.debounce((()=>{if(this.pages.length>0&&this.$pages){if(this.$pages.getBoundingClientRect().width>0){let e=0;for(let t=0;t<this.pages.length;t+=1)if(e+=this.pages[t].height,this.pageScrollTop<=e)return void this.viewer.setPageIndex(t);this.viewer.setPageIndex(this.pages.length-1)}}}),100,"debounce-updatePageIndex");this.$pages&&this.sideEffect.addEventListener(this.$pages,"scroll",(()=>{const t=this.$pages.scrollTop,s=this.scrollTopElToPage(t);null!==s&&(this.pageScrollTop=s);const i=this.whiteboardView.camera.scale;i>0&&this.whiteboardView.moveCamera({centerY:t/i,animationMode:"immediately"}),e()}))}setupWhiteboardCamera(){const e=this.debounce((()=>{this.$pages&&this.elScrollTo(this.$pages.scrollTop)}),100);this.sideEffect.add((()=>{const t=()=>{if(this.pages.length>0){const{width:t,height:s}=this.viewer.$content.getBoundingClientRect();t>0&&s>0&&(this.whiteboardView.moveCameraToContain({originX:0,originY:this.$pages?this.$pages.scrollTop*(this.pages[0].width/t):0,width:this.pages[0].width,height:this.pages[0].width/t*s,animationMode:"immediately"}),e())}};return this.whiteboardView.callbacks.on("onSizeUpdated",t),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",t)}}),"whiteboard-size-update")}debounce(e,t,s){const i=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>i.cancel()),s),i}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}}class Te{constructor({displayer:e,whiteboardView:t,getRoom:s,readonly:i,box:a,pages:r}){this.onPlayPPT=()=>{const e=this.getWhiteboardRoom();e&&e.pptNextStep()},this.scaleDocsToFit=()=>{const e=this.pages[this.getPageIndex()];e&&this.whiteboardView.moveCameraToContain({originX:-e.width/2,originY:-e.height/2,width:e.width,height:e.height})},this.onNewPageIndex=e=>{this.jumpToPage(e)},this.sideEffect=new ye,this.whiteboardView=t,this.readonly=i,this.box=a,this.pages=r,this.displayer=e,this.getWhiteboardRoom=s,this.viewer=new fe({readonly:i,box:a,pages:r,onNewPageIndex:this.onNewPageIndex,onPlay:this.onPlayPPT}),this.render()}mount(){this.viewer.mount();const e=this.getPageIndex();return 0!==e&&this.jumpToPage(e),this.scaleDocsToFit(),this.sideEffect.add((()=>(this.whiteboardView.callbacks.on("onSizeUpdated",this.scaleDocsToFit),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",this.scaleDocsToFit)}))),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.unmount(),this.viewer.destroy()}getPageIndex(){return this.displayer.state.sceneState.index}jumpToPage(e){if((e=xe(e,0,this.pages.length-1))!==this.getPageIndex()){const t=this.getWhiteboardRoom();t&&t.setSceneIndex(e)}e!==this.viewer.pageIndex&&this.viewer.setPageIndex(e)}render(){this.viewer.$content.appendChild(this.renderMask()),this.viewer.$content.appendChild(this.renderWhiteboardView())}renderMask(){if(!this.$mask){const e=document.createElement("div");e.className=this.wrapClassName("mask"),this.$mask=e;document.createElement("button").className=this.wrapClassName("back");document.createElement("button").className=this.wrapClassName("next")}return this.$mask}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView,this.sideEffect.addEventListener(this.$whiteboardView,"wheel",(e=>{e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),console.log("scroll",e.deltaY,e.deltaX)}),{passive:!1,capture:!0})),this.$whiteboardView}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Ee={kind:"DocsViewer",setup(e){const t=e.getBox();if(!t)throw new Error("[DocsViewer]: Missing `box` after `create` event.");const s=e.getAttributes();if(!s)throw new Error("[DocsViewer]: Missing initial attributes.");t.mountStyles(".netless-app-docs-viewer-content{position:relative;height:100%;overflow:hidden}.netless-app-docs-viewer-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-docs-viewer-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview-mask{display:block}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview{transform:translate(0)}.netless-app-docs-viewer-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-docs-viewer-preview-page:hover,.netless-app-docs-viewer-preview-page.netless-app-docs-viewer-preview-page-active{border-color:#444e601a}.netless-app-docs-viewer-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-docs-viewer-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-docs-viewer-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7}.netless-app-docs-viewer-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;background:transparent;transition:background .4s;cursor:pointer;user-select:none}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}.netless-app-docs-viewer-footer-btn>img{width:100%}.netless-app-docs-viewer-footer-btn~.netless-app-docs-viewer-footer-btn{margin-left:15px}.netless-app-docs-viewer-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-docs-viewer-page-number{margin-left:auto;font-size:13px;user-select:none}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:1.5em;text-align:right;border-radius:2px;background:transparent;transition:background .4s;user-select:text}.netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn:hover{background:transparent}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:active{background:transparent;box-shadow:none}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:disabled{color:inherit}.netless-app-docs-viewer-static-pages{overflow:hidden;position:relative;height:100%;user-select:none}.netless-app-docs-viewer-static-page{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}\n"),s.dynamic?function(e,t){const s=e.getInitScenePath();if(console.log(e.getDisplayer()),!s)throw new Error("[DocsViewer]: Missing initScenePath for dynamic ppt.");const i=e.getDisplayer(),a=i.entireScenes()[s],r=e.getView();r.disableCameraTransform=!0;const o=a.map((e=>e.ppt?{src:e.ppt.src,width:e.ppt.width,height:e.ppt.height,thumbnail:e.ppt.previewURL}:null)).filter((e=>Boolean(e)));if(o.length<=0)throw new Error("[DocsViewer]: Missing pages.");const n=new Te({displayer:i,whiteboardView:r,getRoom:()=>e.getIsWritable()?e.getDisplayer():void 0,readonly:t.readonly,box:t,pages:o}).mount();e.emitter.on("sceneStateChange",(e=>{n.jumpToPage(e.index)})),t.events.on("readonly",(e=>{n.setReadonly(e)}))}(e,t):function(e,t,s){const i=s.pages||[];if(i.length<=0)throw new Error("[DocsViewer]: Missing pages.");const a={width:i[0].width,height:i.reduce(((e,t)=>e+t.height*(i[0].width/t.width)),0)},r=e.getView();r.disableCameraTransform=!0;const o=new Ne({whiteboardView:r,readonly:t.readonly,box:t,pages:s.pages||[],pagesSize:a,pageScrollTop:s.pageScrollTop,onUserScroll:s=>{var i;(null==(i=e.getAttributes())?void 0:i.pageScrollTop)===s||t.readonly||e.updateAttributes(["pageScrollTop"],s)}}).mount();e.emitter.on("attributesUpdate",(e=>{e&&null!=e.pageScrollTop&&o.syncPageScrollTop(e.pageScrollTop)})),t.events.on("readonly",(e=>{o.setReadonly(e)}))}(e,t,s)}};module.exports=Ee;
+"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,a=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i;const n="undefined"!=typeof window,l=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=n&&"IntersectionObserver"in window,c=n&&"classList"in document.createElement("p"),h=n&&window.devicePixelRatio>1,p={elements_selector:".lazy",container:l||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},g=e=>Object.assign({},p,e),w=function(e,t){var s;let i="LazyLoad::Initialized",r=new e(t);try{s=new CustomEvent(i,{detail:{instance:r}})}catch(o){(s=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:r})}window.dispatchEvent(s)},u=(e,t)=>e.getAttribute("data-"+t),m=e=>u(e,"ll-status"),b=(e,t)=>((e,t,s)=>{var i="data-"+t;null!==s?e.setAttribute(i,s):e.removeAttribute(i)})(e,"ll-status",t),v=e=>b(e,null),y=e=>null===m(e),f=e=>"native"===m(e),M=["loading","loaded","applied","error"],x=(e,t,s,i)=>{e&&(void 0===i?void 0===s?e(t):e(t,s):e(t,s,i))},E=(e,t)=>{c?e.classList.add(t):e.className+=(e.className?" ":"")+t},N=(e,t)=>{c?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},T=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const s=t._observer;s&&s.unobserve(e)},L=(e,t)=>{e&&(e.loadingCount+=t)},C=(e,t)=>{e&&(e.toLoadCount=t)},j=e=>{let t=[];for(let s,i=0;s=e.children[i];i+=1)"SOURCE"===s.tagName&&t.push(s);return t},A=(e,t,s)=>{s&&e.setAttribute(t,s)},S=(e,t)=>{e.removeAttribute(t)},z=e=>!!e.llOriginalAttrs,D=e=>{if(z(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},P=e=>{if(!z(e))return;const t=e.llOriginalAttrs;A(e,"src",t.src),A(e,"srcset",t.srcset),A(e,"sizes",t.sizes)},k=(e,t)=>{A(e,"sizes",u(e,t.data_sizes)),A(e,"srcset",u(e,t.data_srcset)),A(e,"src",u(e,t.data_src))},O=e=>{S(e,"src"),S(e,"srcset"),S(e,"sizes")},$=(e,t)=>{const s=e.parentNode;if(!s||"PICTURE"!==s.tagName)return;j(s).forEach(t)},_={IMG:(e,t)=>{$(e,(e=>{D(e),k(e,t)})),D(e),k(e,t)},IFRAME:(e,t)=>{A(e,"src",u(e,t.data_src))},VIDEO:(e,t)=>{((e,t)=>{j(e).forEach(t)})(e,(e=>{A(e,"src",u(e,t.data_src))})),A(e,"poster",u(e,t.data_poster)),A(e,"src",u(e,t.data_src)),e.load()}},V=(e,t)=>{const s=_[e.tagName];s&&s(e,t)},Y=(e,t,s)=>{E(e,t.class_applied),b(e,"applied"),t.unobserve_completed&&I(e,t),x(t.callback_applied,e,s)},U=(e,t,s)=>{L(s,1),E(e,t.class_loading),b(e,"loading"),x(t.callback_loading,e,s)},R=["IMG","IFRAME","VIDEO"],Z=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||x(e.callback_finish,t)},W=(e,t,s)=>{e.addEventListener(t,s),e.llEvLisnrs[t]=s},F=(e,t,s)=>{e.removeEventListener(t,s)},H=e=>!!e.llEvLisnrs,Q=e=>{if(!H(e))return;const t=e.llEvLisnrs;for(let s in t){const i=t[s];F(e,s,i)}delete e.llEvLisnrs},B=(e,t,s)=>{(e=>{delete e.llTempImage})(e),L(s,-1),(e=>{e&&(e.toLoadCount-=1)})(s),N(e,t.class_loading),t.unobserve_completed&&I(e,s)},G=(e,t,s)=>{const i=T(e)||e;if(H(i))return;((e,t,s)=>{H(e)||(e.llEvLisnrs={});const i="VIDEO"===e.tagName?"loadeddata":"load";W(e,i,t),W(e,"error",s)})(i,(r=>{((e,t,s,i)=>{const r=f(t);B(t,s,i),E(t,s.class_loaded),b(t,"loaded"),x(s.callback_loaded,t,i),r||Z(s,i)})(0,e,t,s),Q(i)}),(r=>{((e,t,s,i)=>{const r=f(t);B(t,s,i),E(t,s.class_error),b(t,"error"),x(s.callback_error,t,i),r||Z(s,i)})(0,e,t,s),Q(i)}))},X=(e,t,s)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),G(e,t,s),((e,t,s)=>{const i=u(e,t.data_bg),r=u(e,t.data_bg_hidpi),o=h&&r?r:i;o&&(e.style.backgroundImage=`url("${o}")`,T(e).setAttribute("src",o),U(e,t,s))})(e,t,s),((e,t,s)=>{const i=u(e,t.data_bg_multi),r=u(e,t.data_bg_multi_hidpi),o=h&&r?r:i;o&&(e.style.backgroundImage=o,Y(e,t,s))})(e,t,s)},K=(e,t,s)=>{(e=>R.indexOf(e.tagName)>-1)(e)?((e,t,s)=>{G(e,t,s),V(e,t),U(e,t,s)})(e,t,s):X(e,t,s)},q=(e,t,s,i)=>{s.cancel_on_exit&&(e=>"loading"===m(e))(e)&&"IMG"===e.tagName&&(Q(e),(e=>{$(e,(e=>{O(e)})),O(e)})(e),(e=>{$(e,(e=>{P(e)})),P(e)})(e),N(e,s.class_loading),L(i,-1),v(e),x(s.callback_cancel,e,t,i))},J=(e,t,s,i)=>{const r=(e=>M.indexOf(m(e))>=0)(e);b(e,"entered"),E(e,s.class_entered),N(e,s.class_exited),((e,t,s)=>{t.unobserve_entered&&I(e,s)})(e,s,i),x(s.callback_enter,e,t,i),r||K(e,s,i)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,se=(e,t,s)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,s)=>{e.setAttribute("loading","lazy"),G(e,t,s),V(e,t),b(e,"native")})(e,t,s)})),C(s,0)},ie=(e,t,s)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?J(e.target,e,t,s):((e,t,s,i)=>{y(e)||(E(e,s.class_exited),q(e,t,s,i),x(s.callback_exit,e,t,i))})(e.target,e,t,s)))},re=(e,t)=>{d&&!te(e)&&(t._observer=new IntersectionObserver((s=>{ie(s,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))},oe=e=>Array.prototype.slice.call(e),ae=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===m(e))(e),le=(e,t)=>(e=>oe(e).filter(y))(e||ae(t)),de=(e,t)=>{var s;(s=ae(e),oe(s).filter(ne)).forEach((t=>{N(t,e.class_error),v(t)})),t.update()},ce=function(e,t){const s=g(e);this._settings=s,this.loadingCount=0,re(s,this),((e,t)=>{n&&window.addEventListener("online",(()=>{de(e,t)}))})(s,this),this.update(t)};ce.prototype={update:function(e){const t=this._settings,s=le(e,t);var i,r;(C(this,s.length),!l&&d)?te(t)?se(s,t,this):(i=this._observer,r=s,(e=>{e.disconnect()})(i),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(i,r)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),ae(this._settings).forEach((e=>{delete e.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;le(e,t).forEach((e=>{I(e,this),K(e,t,this)}))}},ce.load=(e,t)=>{const s=g(t);K(e,s)},ce.resetStatus=e=>{v(e)},n&&((e,t)=>{if(t)if(t.length)for(let s,i=0;s=t[i];i+=1)w(e,s);else w(e,t)})(ce,window.lazyLoadOptions);const he=(e,t,s,i)=>{if("length"===s||"prototype"===s)return;if("arguments"===s||"caller"===s)return;const r=Object.getOwnPropertyDescriptor(e,s),o=Object.getOwnPropertyDescriptor(t,s);!pe(r,o)&&i||Object.defineProperty(e,s,o)},pe=function(e,t){return void 0===e||e.configurable||e.writable===t.writable&&e.enumerable===t.enumerable&&e.configurable===t.configurable&&(e.writable||e.value===t.value)},ge=(e,t)=>`/* Wrapped ${e}*/\n${t}`,we=Object.getOwnPropertyDescriptor(Function.prototype,"toString"),ue=Object.getOwnPropertyDescriptor(Function.prototype.toString,"name"),me=(e,n,l)=>{const d=""===l?"":`with ${l.trim()}() `,c=ge.bind(null,d,n.toString());var h;Object.defineProperty(c,"name",ue),Object.defineProperty(e,"toString",(h=((e,t)=>{for(var s in t||(t={}))r.call(t,s)&&a(e,s,t[s]);if(i)for(var s of i(t))o.call(t,s)&&a(e,s,t[s]);return e})({},we),t(h,s({value:c}))))};var be=(e,t,{ignoreNonConfigurable:s=!1}={})=>{const{name:i}=e;for(const r of Reflect.ownKeys(t))he(e,t,r,s);return((e,t)=>{const s=Object.getPrototypeOf(t);s!==Object.getPrototypeOf(e)&&Object.setPrototypeOf(e,s)})(e,t),me(e,t,i),e};const ve=(e,t={})=>{if("function"!=typeof e)throw new TypeError(`Expected the first argument to be a function, got \`${typeof e}\``);const{wait:s=0,maxWait:i=Number.Infinity,before:r=!1,after:o=!0}=t;if(!r&&!o)throw new Error("Both `before` and `after` are false, function wouldn't be called.");let a,n,l;const d=function(...t){const d=this,c=()=>{n=void 0,a&&(clearTimeout(a),a=void 0),o&&(l=e.apply(d,t))},h=r&&!a;return clearTimeout(a),a=setTimeout((()=>{a=void 0,n&&(clearTimeout(n),n=void 0),o&&(l=e.apply(d,t))}),s),i>0&&i!==Number.Infinity&&!n&&(n=setTimeout(c,i)),h&&(l=e.apply(d,t)),l};return be(d,e),d.cancel=()=>{a&&(clearTimeout(a),a=void 0),n&&(clearTimeout(n),n=void 0)},d};class ye{constructor(){this.disposers=new Map,this.disposerIDGenCount=1}add(e,t=this.genDisposerID()){return this.flush(t),this.disposers.set(t,e()),t}addDisposer(e,t=this.genDisposerID()){return this.add((()=>e),t)}addEventListener(e,t,s,i){e.addEventListener(t,s,i);const r=this.genDisposerID();return this.disposers.set(r,(()=>{e.removeEventListener(t,s)})),r}remove(e){const t=this.disposers.get(e);return this.disposers.delete(e),t}flush(e){if(e){const s=this.remove(e);if(s)try{s()}catch(t){console.error(t)}}else this.disposers.forEach((e=>{try{e()}catch(t){console.error(t)}})),this.disposers.clear()}genDisposerID(){return"disposer-"+this.disposerIDGenCount++}}var fe="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTQxOC4xNTggMjU3LjQxOUwxNzQuNjYzIDQxMy4zM2MtNi4wMTcgMy45MTktMTUuNzA4IDMuNzcyLTIxLjI5MS0uMjktMi43OTEtMi4wMTgtNC4yOTUtNC40ODMtNC4yOTUtNy4wODRWOTQuMTA5YzAtNS42NSA2Ljg4My0xMC4yODkgMTUuMjcxLTEwLjI4OSA0LjI5OCAwIDguMzkxIDEuMzA3IDExLjE4MSAzLjMzMmwyNDIuNjI5IDE1NS40ODRjNi4wMTYgMy45MTcgNi40NTEgMTAuMjkyLjY0OSAxNC40OTEtLjIxNi4xNTQtLjQzMi4xNTQtLjY0OS4yOTJ6TTE3MC42MjEgMzkxLjI4OGwyMjMuMTE2LTE0MS4zMDFMMTcwLjcxIDEwNy43NTNsLS4wODkgMjgzLjUzNXoiIC8+Cjwvc3ZnPgo=";class Me{constructor({readonly:e,box:t,pages:s,onNewPageIndex:i,onPlay:r}){if(this.pageIndex=0,this.isShowPreview=!1,this.sideEffect=new ye,s.length<=0)throw new Error("[DocsViewer] Empty pages.");this.readonly=e,this.box=t,this.pages=s,this.onNewPageIndex=i,this.onPlay=r,this.render()}mount(){this.box.mountContent(this.$content),this.box.mountFooter(this.$footer),this.sideEffect.add((()=>{const e=new ce({container:this.$preview,elements_selector:`.${this.wrapClassName("preview-page>img")}`});return()=>e.destroy()}),"preview-lazyload")}unmount(){this.$content.remove(),this.$footer.remove()}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.$content.classList.toggle(this.wrapClassName("readonly"),e),this.$footer.classList.toggle(this.wrapClassName("readonly"),e),this.$pageNumberInput.disabled=e)}destroy(){this.sideEffect.flush(),this.unmount()}setPageIndex(e){Number.isNaN(e)||(this.pageIndex=e,this.$pageNumberInput.value=String(e+1))}render(){return this.renderContent(),this.renderFooter(),this.$content}renderContent(){if(!this.$content){const e=document.createElement("div");e.className=this.wrapClassName("content"),this.$content=e,this.readonly&&e.classList.add(this.wrapClassName("readonly")),e.appendChild(this.renderPreviewMask()),e.appendChild(this.renderPreview())}return this.$content}renderPreview(){if(!this.$preview){const e=document.createElement("div");e.className=this.wrapClassName("preview")+" tele-fancy-scrollbar",this.$preview=e;const t=this.wrapClassName("preview-page"),s=this.wrapClassName("preview-page-name");this.pages.forEach(((i,r)=>{var o;const a=String(r),n=document.createElement("a");n.className=t+" "+this.wrapClassName(`preview-page-${r}`),n.setAttribute("href","#"),n.dataset.pageIndex=a;const l=document.createElement("span");l.className=s,l.textContent=String(r+1),l.dataset.pageIndex=a;const d=document.createElement("img");d.width=i.width,d.height=i.height,d.dataset.src=null!=(o=i.thumbnail)?o:i.src,d.dataset.pageIndex=a,n.appendChild(d),n.appendChild(l),e.appendChild(n)})),this.sideEffect.addEventListener(e,"click",(e=>{var t;if(this.readonly)return;const s=null==(t=e.target.dataset)?void 0:t.pageIndex;s&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),this.onNewPageIndex(Number(s)),this.togglePreview(!1))}))}return this.$preview}renderPreviewMask(){return this.$previewMask||(this.$previewMask=document.createElement("div"),this.$previewMask.className=this.wrapClassName("preview-mask"),this.sideEffect.addEventListener(this.$previewMask,"click",(e=>{this.readonly||e.target===this.$previewMask&&this.togglePreview(!1)}))),this.$previewMask}renderFooter(){if(!this.$footer){const e=document.createElement("div");e.className=this.wrapClassName("footer"),this.$footer=e,this.readonly&&e.classList.add(this.wrapClassName("readonly"));const t=this.renderFooterBtn("btn-sidebar","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik01MCA4SDE0Yy0zLjMwOSAwLTYgMi42OTEtNiA2djM2YzAgMy4zMDkgMi42OTEgNiA2IDZoMzZjMy4zMDkgMCA2LTIuNjkxIDYtNlYxNGMwLTMuMzA5LTIuNjkxLTYtNi02ek0xMiA1MFYxNGMwLTEuMTAzLjg5Ny0yIDItMmg4djQwaC04Yy0xLjEwMyAwLTItLjg5Ny0yLTJ6bTQwIDBjMCAxLjEwMy0uODk3IDItMiAySDI2VjEyaDI0YzEuMTAzIDAgMiAuODk3IDIgMnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(t,"click",(()=>{this.readonly||this.togglePreview()}));const s=document.createElement("div");s.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTE3Ny44MSAyNDkuOTU5TDMzNy40NzMgOTAuMjk1YzIuNzIyLTIuODY1IDIuNjUxLTcuMzc4LS4xNDMtMTAuMS0yLjc5My0yLjY1LTcuMTYzLTIuNjUtOS45NTYgMGwtMTY0Ljc1IDE2NC43NWMtMi43OTMgMi43OTMtMi43OTMgNy4zMDYgMCAxMC4xbDE2NC43NSAxNjQuNzVjMi44NjUgMi43MjIgNy4zNzggMi42NSAxMC4wOTktLjE0MyAyLjY1MS0yLjc5NCAyLjY1MS03LjE2MyAwLTkuOTU3TDE3Ny44MDkgMjQ5Ljk1OXoiIC8+Cjwvc3ZnPgo=");if(this.sideEffect.addEventListener(i,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex-1)})),s.appendChild(i),this.onPlay){const e=this.renderFooterBtn("btn-page-play",fe),t=this.debounce((()=>{const t=e.querySelector("img");t&&(t.src=fe)}),500);this.sideEffect.addEventListener(e,"click",(()=>{if(this.readonly)return;const s=e.querySelector("img");s&&(s.src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTMxMi40OTEgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6TTE2NS4yNTcgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6IiAvPgo8L3N2Zz4K"),this.onPlay&&this.onPlay(),t()})),s.appendChild(e)}const r=this.renderFooterBtn("btn-page-next","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTMyMi4xOSAyNTAuMDQxTDE2Mi41MjcgNDA5LjcwNWMtMi43MjIgMi44NjUtMi42NTEgNy4zNzguMTQzIDEwLjEgMi43OTMgMi42NSA3LjE2MyAyLjY1IDkuOTU2IDBsMTY0Ljc1LTE2NC43NWMyLjc5My0yLjc5MyAyLjc5My03LjMwNiAwLTEwLjFsLTE2NC43NS0xNjQuNzVjLTIuODY1LTIuNzIyLTcuMzc4LTIuNjUtMTAuMDk5LjE0My0yLjY1MSAyLjc5NC0yLjY1MSA3LjE2MyAwIDkuOTU3bDE1OS42NjQgMTU5LjczNnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(r,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex+1)})),s.appendChild(r);const o=document.createElement("div");o.className=this.wrapClassName("page-number");const a=document.createElement("input");a.className=this.wrapClassName("page-number-input"),a.value=String(this.pageIndex+1),this.readonly&&(a.disabled=!0),this.$pageNumberInput=a,this.sideEffect.addEventListener(a,"change",(()=>{this.readonly||a.value&&this.onNewPageIndex(Number(a.value)-1)}));const n=document.createElement("span");n.textContent=" / "+this.pages.length,o.appendChild(a),o.appendChild(n),this.$footer.appendChild(t),this.$footer.appendChild(s),this.$footer.appendChild(o)}return this.$footer}renderFooterBtn(e,t){const s=document.createElement("button");s.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e);const i=document.createElement("img");return i.src=t,s.appendChild(i),s}togglePreview(e){if(this.isShowPreview=null!=e?e:!this.isShowPreview,this.$content.classList.toggle(this.wrapClassName("preview-active"),this.isShowPreview),this.isShowPreview){const e=this.$preview.querySelector("."+this.wrapClassName(`preview-page-${this.pageIndex}`));e&&this.$preview.scrollTo({top:e.offsetTop-16})}}debounce(e,t){const s=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>s.cancel())),s}wrapClassName(e){return"netless-app-docs-viewer-"+e}}function xe(e,t,s){return Math.min(Math.max(e,t),s)}function Ee(e){return e.touches?e.touches[0]:e}function Ne(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}class Te{constructor({whiteboardView:e,readonly:t,box:s,pages:i,pagesSize:r,pageScrollTop:o=0,onUserScroll:a}){this.onNewPageIndex=e=>{this.scrollToPage(e)},this.sideEffect=new ye,this.scrollbarHeight=30,this.whiteboardView=e,this.readonly=t,this.box=s,this.pages=i,this.pageScrollTop=o,this.pagesSize=r,this.onUserScroll=a,this.viewer=new Me({readonly:t,box:s,pages:i,onNewPageIndex:this.onNewPageIndex}),this.render()}mount(){return this.viewer.mount(),this.sideEffect.add((()=>{const e=new ce({container:this.$pages,elements_selector:`.${this.wrapClassName("page")}`});return()=>e.destroy()}),"page-lazyload"),this.setupWhiteboardCamera(),0!==this.pageScrollTop&&this.pageScrollTo(this.pageScrollTop),this.setupScrollTopEvent(),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.onUserScroll=void 0,this.unmount(),this.viewer.destroy()}syncPageScrollTop(e){e>=0&&Math.abs(this.pageScrollTop-e)>10&&this.pageScrollTo(e)}render(){this.viewer.$content.appendChild(this.renderPages()),this.viewer.$content.appendChild(this.renderWhiteboardView()),this.viewer.$content.appendChild(this.renderScrollbar()),this.box.$titleBar&&(this.box.$titleBar.style.height="8.125%"),this.box.$footer&&(this.box.$footer.style.height="8.125%")}renderPages(){if(!this.$pages){const e=document.createElement("div");e.className=this.wrapClassName("pages"),this.$pages=e;const t=this.wrapClassName("page");this.pages.forEach(((s,i)=>{const r=document.createElement("img");r.className=t+" "+this.wrapClassName(`page-${i}`),r.draggable=!1,r.width=s.width,r.height=s.height,r.dataset.src=s.src,r.dataset.pageIndex=String(i),e.appendChild(r)}))}return this.$pages}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView,this.sideEffect.addEventListener(this.$whiteboardView,"wheel",(e=>{if(Ne(e),!this.readonly){const t=xe(this.pageScrollTop+e.deltaY,0,this.pagesSize.height);this.pageScrollTo(t),this.onUserScroll&&this.onUserScroll(t)}}),{passive:!1,capture:!0}),this.sideEffect.addEventListener(this.$whiteboardView,"touchstart",(e=>{if(e.touches.length>1){if(Ne(e),this.readonly)return;this.handleSwipeScroll(e)}}),{passive:!1,capture:!0})),this.$whiteboardView}renderScrollbar(){if(!this.$scrollbar){const e=document.createElement("button");this.$scrollbar=e,e.className=this.wrapClassName("scrollbar"),e.style.minHeight="30px";const t=e=>{if(this.readonly)return;Ne(e),this.$scrollbar.classList.toggle(this.wrapClassName("scrollbar-dragging"),!0);const t=this.scrollTopPageToEl(this.pageScrollTop),s=this.whiteboardView.size.width/this.pagesSize.width*this.pagesSize.height,{clientY:i}=Ee(e),r=e=>{const{clientY:r}=Ee(e),{height:o}=this.whiteboardView.size;this.elScrollTo(xe(t+s/o*(r-i),0,s-this.scrollbarHeight*(s/o)))},o=()=>{this.$scrollbar.classList.toggle(this.wrapClassName("scrollbar-dragging"),!1),window.removeEventListener("mousemove",r,!0),window.removeEventListener("touchmove",r,!0),window.removeEventListener("mouseup",o,!0),window.removeEventListener("touchend",o,!0),window.removeEventListener("touchcancel",o,!0)};window.addEventListener("mousemove",r,!0),window.addEventListener("touchmove",r,!0),window.addEventListener("mouseup",o,!0),window.addEventListener("touchend",o,!0),window.addEventListener("touchcancel",o,!0)};this.sideEffect.addEventListener(e,"mousedown",t),this.sideEffect.addEventListener(e,"touchstart",t)}return this.$scrollbar}scrollTopPageToEl(e){return e*(this.whiteboardView.size.width/this.pagesSize.width)}scrollTopElToPage(e){return e/(this.whiteboardView.size.width/this.pagesSize.width)}elScrollTo(e){this.$pages.scrollTo({top:e})}pageScrollTo(e){this.elScrollTo(this.scrollTopPageToEl(e))}scrollToPage(e){if(!this.readonly&&this.$pages&&!Number.isNaN(e)){e=xe(e,0,this.pages.length-1);const t=this.$pages.querySelector("."+this.wrapClassName(`page-${e}`));if(t){const e=t.offsetTop;this.elScrollTo(e),this.onUserScroll&&this.onUserScroll(this.scrollTopElToPage(e))}}}setupScrollTopEvent(){const e=this.debounce((()=>{if(this.pages.length>0&&this.$pages){if(this.$pages.getBoundingClientRect().width>0){let e=0;for(let t=0;t<this.pages.length;t+=1)if(e+=this.pages[t].height,this.pageScrollTop<=e)return void this.viewer.setPageIndex(t);this.viewer.setPageIndex(this.pages.length-1)}}}),100,"debounce-updatePageIndex");this.sideEffect.addEventListener(this.$pages,"scroll",(()=>{const t=this.$pages.scrollTop,s=this.scrollTopElToPage(t);this.pageScrollTop=s;const{width:i,height:r}=this.whiteboardView.size,{width:o,height:a}=this.pagesSize;this.whiteboardView.moveCamera({centerY:this.scrollTopElToPage(t+r/2),animationMode:"immediately"}),this.setScrollbarHeight(r/(i/o*a)),this.$scrollbar.style.transform=`translateY(${s/a*r}px)`,e()}))}setupWhiteboardCamera(){this.sideEffect.add((()=>{const e=({width:e,height:t})=>{if(e>0&&t>0){const s=this.pagesSize.width,i=s/e;this.whiteboardView.moveCameraToContain({originX:0,originY:this.$pages.scrollTop*i,width:s,height:t*i,animationMode:"immediately"})}};return this.whiteboardView.callbacks.on("onSizeUpdated",e),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",e)}}),"whiteboard-size-update")}debounce(e,t,s){const i=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>i.cancel()),s),i}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}setScrollbarHeight(e){e=xe(e,30,this.whiteboardView.size.height),this.scrollbarHeight!==e&&(this.scrollbarHeight=e,this.$scrollbar.style.height=`${e}px`)}handleSwipeScroll(e){const t=this.scrollTopPageToEl(this.pageScrollTop),s=this.whiteboardView.size.width/this.pagesSize.width*this.pagesSize.height;let{clientY:i}=e.touches[0];const r=e=>{const{clientY:r}=e.touches[0];this.elScrollTo(xe(t+(i-r),0,s))},o=e=>{({clientY:i}=e.touches[0]),window.removeEventListener("touchmove",r,!0),window.removeEventListener("touchend",o,!0),window.removeEventListener("touchcancel",o,!0)};window.addEventListener("touchmove",r,!0),window.addEventListener("touchend",o,!0),window.addEventListener("touchcancel",o,!0)}}class Ie{constructor({displayer:e,whiteboardView:t,getRoom:s,readonly:i,box:r,pages:o}){this.onPlayPPT=()=>{const e=this.getWhiteboardRoom();e&&e.pptNextStep()},this.scaleDocsToFit=()=>{const e=this.pages[this.getPageIndex()];e&&this.whiteboardView.moveCameraToContain({originX:-e.width/2,originY:-e.height/2,width:e.width,height:e.height})},this.onNewPageIndex=e=>{this.jumpToPage(e)},this.sideEffect=new ye,this.whiteboardView=t,this.readonly=i,this.box=r,this.pages=o,this.displayer=e,this.getWhiteboardRoom=s,this.viewer=new Me({readonly:i,box:r,pages:o,onNewPageIndex:this.onNewPageIndex,onPlay:this.onPlayPPT}),this.render()}mount(){this.viewer.mount();const e=this.getPageIndex();return 0!==e&&this.jumpToPage(e),this.scaleDocsToFit(),this.sideEffect.add((()=>(this.whiteboardView.callbacks.on("onSizeUpdated",this.scaleDocsToFit),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",this.scaleDocsToFit)}))),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.unmount(),this.viewer.destroy()}getPageIndex(){return this.displayer.state.sceneState.index}jumpToPage(e){if((e=xe(e,0,this.pages.length-1))!==this.getPageIndex()){const t=this.getWhiteboardRoom();t&&t.setSceneIndex(e)}e!==this.viewer.pageIndex&&this.viewer.setPageIndex(e)}render(){this.viewer.$content.appendChild(this.renderMask()),this.viewer.$content.appendChild(this.renderWhiteboardView())}renderMask(){if(!this.$mask){const e=document.createElement("div");e.className=this.wrapClassName("mask"),this.$mask=e;document.createElement("button").className=this.wrapClassName("back");document.createElement("button").className=this.wrapClassName("next")}return this.$mask}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView),this.$whiteboardView}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Le={kind:"DocsViewer",setup(e){const t=e.getBox(),s=e.getScenes();if(!s)throw new Error("[Docs Viewer]: scenes not found.");const i=s.map((({ppt:e})=>e?{width:e.width,height:e.height,src:e.src,thumbnail:e.previewURL}:null)).filter((e=>Boolean(e)));if(i.length<=0)throw new Error("[Docs Viewer]: empty scenes.");t.mountStyles(".netless-app-docs-viewer-content{position:relative;height:100%;overflow:hidden}.netless-app-docs-viewer-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-docs-viewer-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview-mask{display:block}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview{transform:translate(0)}.netless-app-docs-viewer-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-docs-viewer-preview-page:hover,.netless-app-docs-viewer-preview-page.netless-app-docs-viewer-preview-page-active{border-color:#444e601a}.netless-app-docs-viewer-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-docs-viewer-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-docs-viewer-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7}.netless-app-docs-viewer-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;background:transparent;transition:background .4s;cursor:pointer;user-select:none}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}.netless-app-docs-viewer-footer-btn>img{width:100%}.netless-app-docs-viewer-footer-btn~.netless-app-docs-viewer-footer-btn{margin-left:15px}.netless-app-docs-viewer-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-docs-viewer-page-number{margin-left:auto;font-size:13px;user-select:none}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:1.5em;text-align:right;border-radius:2px;background:transparent;transition:background .4s;user-select:text}.netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn:hover{background:transparent}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:active{background:transparent;box-shadow:none}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:disabled{color:inherit}.netless-app-docs-viewer-static-pages{overflow:hidden;position:relative;height:100%;user-select:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1}.netless-app-docs-viewer-static-page{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-static-scrollbar{position:absolute;top:0;right:0;z-index:2147483647;width:8px;min-height:30px;margin:0;padding:0;border:none;outline:none;border-radius:4px;background:rgba(68,78,96,.1);opacity:0;transition:background .4s,opacity .4s,transform .2s;will-change:transform,height;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.2);opacity:1;transition:background .4s,opacity .4s}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.2)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.2)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}\n"),i[0].src.startsWith("ppt")?function(e,t,s){const i=e.getDisplayer(),r=e.getView();r.disableCameraTransform=!0;const o=new Ie({displayer:i,whiteboardView:r,getRoom:()=>e.getIsWritable()?e.getDisplayer():void 0,readonly:t.readonly,box:t,pages:s}).mount();e.emitter.on("sceneStateChange",(e=>{o.jumpToPage(e.index)})),t.events.on("readonly",(e=>{o.setReadonly(e)}))}(e,t,i):function(e,t,s){var i;const r={width:s[0].width,height:s.reduce(((e,t)=>e+t.height*(s[0].width/t.width)),0)},o=e.getView();o.disableCameraTransform=!0;const a=new Te({whiteboardView:o,readonly:t.readonly,box:t,pages:s,pagesSize:r,pageScrollTop:null==(i=e.getAttributes())?void 0:i.pageScrollTop,onUserScroll:s=>{var i;(null==(i=e.getAttributes())?void 0:i.pageScrollTop)===s||t.readonly||e.updateAttributes(["pageScrollTop"],s)}}).mount();e.emitter.on("attributesUpdate",(e=>{e&&null!=e.pageScrollTop&&a.syncPageScrollTop(e.pageScrollTop)})),t.events.on("readonly",(e=>{a.setReadonly(e)}))}(e,t,i)}};module.exports=Le;
 //# sourceMappingURL=main.cjs.js.map

dist/main.es.js

@@ -1,2 +0,2 @@
-var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,o=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i;const n="undefined"!=typeof window,l=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=n&&"IntersectionObserver"in window,c=n&&"classList"in document.createElement("p"),p=n&&window.devicePixelRatio>1,h={elements_selector:".lazy",container:l||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},g=e=>Object.assign({},h,e),u=function(e,t){var s;let i="LazyLoad::Initialized",a=new e(t);try{s=new CustomEvent(i,{detail:{instance:a}})}catch(r){(s=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:a})}window.dispatchEvent(s)},w=(e,t)=>e.getAttribute("data-"+t),m=e=>w(e,"ll-status"),b=(e,t)=>((e,t,s)=>{var i="data-"+t;null!==s?e.setAttribute(i,s):e.removeAttribute(i)})(e,"ll-status",t),v=e=>b(e,null),y=e=>null===m(e),M=e=>"native"===m(e),f=["loading","loaded","applied","error"],x=(e,t,s,i)=>{e&&(void 0===i?void 0===s?e(t):e(t,s):e(t,s,i))},N=(e,t)=>{c?e.classList.add(t):e.className+=(e.className?" ":"")+t},T=(e,t)=>{c?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const s=t._observer;s&&s.unobserve(e)},C=(e,t)=>{e&&(e.loadingCount+=t)},j=(e,t)=>{e&&(e.toLoadCount=t)},L=e=>{let t=[];for(let s,i=0;s=e.children[i];i+=1)"SOURCE"===s.tagName&&t.push(s);return t},A=(e,t,s)=>{s&&e.setAttribute(t,s)},D=(e,t)=>{e.removeAttribute(t)},S=e=>!!e.llOriginalAttrs,z=e=>{if(S(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},P=e=>{if(!S(e))return;const t=e.llOriginalAttrs;A(e,"src",t.src),A(e,"srcset",t.srcset),A(e,"sizes",t.sizes)},O=(e,t)=>{A(e,"sizes",w(e,t.data_sizes)),A(e,"srcset",w(e,t.data_srcset)),A(e,"src",w(e,t.data_src))},k=e=>{D(e,"src"),D(e,"srcset"),D(e,"sizes")},_=(e,t)=>{const s=e.parentNode;if(!s||"PICTURE"!==s.tagName)return;L(s).forEach(t)},$={IMG:(e,t)=>{_(e,(e=>{z(e),O(e,t)})),z(e),O(e,t)},IFRAME:(e,t)=>{A(e,"src",w(e,t.data_src))},VIDEO:(e,t)=>{((e,t)=>{L(e).forEach(t)})(e,(e=>{A(e,"src",w(e,t.data_src))})),A(e,"poster",w(e,t.data_poster)),A(e,"src",w(e,t.data_src)),e.load()}},V=(e,t)=>{const s=$[e.tagName];s&&s(e,t)},Y=(e,t,s)=>{N(e,t.class_applied),b(e,"applied"),t.unobserve_completed&&I(e,t),x(t.callback_applied,e,s)},U=(e,t,s)=>{C(s,1),N(e,t.class_loading),b(e,"loading"),x(t.callback_loading,e,s)},R=["IMG","IFRAME","VIDEO"],Z=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||x(e.callback_finish,t)},F=(e,t,s)=>{e.addEventListener(t,s),e.llEvLisnrs[t]=s},W=(e,t,s)=>{e.removeEventListener(t,s)},Q=e=>!!e.llEvLisnrs,H=e=>{if(!Q(e))return;const t=e.llEvLisnrs;for(let s in t){const i=t[s];W(e,s,i)}delete e.llEvLisnrs},B=(e,t,s)=>{(e=>{delete e.llTempImage})(e),C(s,-1),(e=>{e&&(e.toLoadCount-=1)})(s),T(e,t.class_loading),t.unobserve_completed&&I(e,s)},G=(e,t,s)=>{const i=E(e)||e;if(Q(i))return;((e,t,s)=>{Q(e)||(e.llEvLisnrs={});const i="VIDEO"===e.tagName?"loadeddata":"load";F(e,i,t),F(e,"error",s)})(i,(a=>{((e,t,s,i)=>{const a=M(t);B(t,s,i),N(t,s.class_loaded),b(t,"loaded"),x(s.callback_loaded,t,i),a||Z(s,i)})(0,e,t,s),H(i)}),(a=>{((e,t,s,i)=>{const a=M(t);B(t,s,i),N(t,s.class_error),b(t,"error"),x(s.callback_error,t,i),a||Z(s,i)})(0,e,t,s),H(i)}))},X=(e,t,s)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),G(e,t,s),((e,t,s)=>{const i=w(e,t.data_bg),a=w(e,t.data_bg_hidpi),r=p&&a?a:i;r&&(e.style.backgroundImage=`url("${r}")`,E(e).setAttribute("src",r),U(e,t,s))})(e,t,s),((e,t,s)=>{const i=w(e,t.data_bg_multi),a=w(e,t.data_bg_multi_hidpi),r=p&&a?a:i;r&&(e.style.backgroundImage=r,Y(e,t,s))})(e,t,s)},K=(e,t,s)=>{(e=>R.indexOf(e.tagName)>-1)(e)?((e,t,s)=>{G(e,t,s),V(e,t),U(e,t,s)})(e,t,s):X(e,t,s)},q=(e,t,s,i)=>{s.cancel_on_exit&&(e=>"loading"===m(e))(e)&&"IMG"===e.tagName&&(H(e),(e=>{_(e,(e=>{k(e)})),k(e)})(e),(e=>{_(e,(e=>{P(e)})),P(e)})(e),T(e,s.class_loading),C(i,-1),v(e),x(s.callback_cancel,e,t,i))},J=(e,t,s,i)=>{const a=(e=>f.indexOf(m(e))>=0)(e);b(e,"entered"),N(e,s.class_entered),T(e,s.class_exited),((e,t,s)=>{t.unobserve_entered&&I(e,s)})(e,s,i),x(s.callback_enter,e,t,i),a||K(e,s,i)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,se=(e,t,s)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,s)=>{e.setAttribute("loading","lazy"),G(e,t,s),V(e,t),b(e,"native")})(e,t,s)})),j(s,0)},ie=(e,t,s)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?J(e.target,e,t,s):((e,t,s,i)=>{y(e)||(N(e,s.class_exited),q(e,t,s,i),x(s.callback_exit,e,t,i))})(e.target,e,t,s)))},ae=(e,t)=>{d&&!te(e)&&(t._observer=new IntersectionObserver((s=>{ie(s,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))},re=e=>Array.prototype.slice.call(e),oe=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===m(e))(e),le=(e,t)=>(e=>re(e).filter(y))(e||oe(t)),de=(e,t)=>{var s;(s=oe(e),re(s).filter(ne)).forEach((t=>{T(t,e.class_error),v(t)})),t.update()},ce=function(e,t){const s=g(e);this._settings=s,this.loadingCount=0,ae(s,this),((e,t)=>{n&&window.addEventListener("online",(()=>{de(e,t)}))})(s,this),this.update(t)};ce.prototype={update:function(e){const t=this._settings,s=le(e,t);var i,a;(j(this,s.length),!l&&d)?te(t)?se(s,t,this):(i=this._observer,a=s,(e=>{e.disconnect()})(i),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(i,a)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),oe(this._settings).forEach((e=>{delete e.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;le(e,t).forEach((e=>{I(e,this),K(e,t,this)}))}},ce.load=(e,t)=>{const s=g(t);K(e,s)},ce.resetStatus=e=>{v(e)},n&&((e,t)=>{if(t)if(t.length)for(let s,i=0;s=t[i];i+=1)u(e,s);else u(e,t)})(ce,window.lazyLoadOptions);const pe=(e,t,s,i)=>{if("length"===s||"prototype"===s)return;if("arguments"===s||"caller"===s)return;const a=Object.getOwnPropertyDescriptor(e,s),r=Object.getOwnPropertyDescriptor(t,s);!he(a,r)&&i||Object.defineProperty(e,s,r)},he=function(e,t){return void 0===e||e.configurable||e.writable===t.writable&&e.enumerable===t.enumerable&&e.configurable===t.configurable&&(e.writable||e.value===t.value)},ge=(e,t)=>`/* Wrapped ${e}*/\n${t}`,ue=Object.getOwnPropertyDescriptor(Function.prototype,"toString"),we=Object.getOwnPropertyDescriptor(Function.prototype.toString,"name"),me=(e,n,l)=>{const d=""===l?"":`with ${l.trim()}() `,c=ge.bind(null,d,n.toString());var p;Object.defineProperty(c,"name",we),Object.defineProperty(e,"toString",(p=((e,t)=>{for(var s in t||(t={}))a.call(t,s)&&o(e,s,t[s]);if(i)for(var s of i(t))r.call(t,s)&&o(e,s,t[s]);return e})({},ue),t(p,s({value:c}))))};var be=(e,t,{ignoreNonConfigurable:s=!1}={})=>{const{name:i}=e;for(const a of Reflect.ownKeys(t))pe(e,t,a,s);return((e,t)=>{const s=Object.getPrototypeOf(t);s!==Object.getPrototypeOf(e)&&Object.setPrototypeOf(e,s)})(e,t),me(e,t,i),e};const ve=(e,t={})=>{if("function"!=typeof e)throw new TypeError(`Expected the first argument to be a function, got \`${typeof e}\``);const{wait:s=0,maxWait:i=Number.Infinity,before:a=!1,after:r=!0}=t;if(!a&&!r)throw new Error("Both `before` and `after` are false, function wouldn't be called.");let o,n,l;const d=function(...t){const d=this,c=()=>{n=void 0,o&&(clearTimeout(o),o=void 0),r&&(l=e.apply(d,t))},p=a&&!o;return clearTimeout(o),o=setTimeout((()=>{o=void 0,n&&(clearTimeout(n),n=void 0),r&&(l=e.apply(d,t))}),s),i>0&&i!==Number.Infinity&&!n&&(n=setTimeout(c,i)),p&&(l=e.apply(d,t)),l};return be(d,e),d.cancel=()=>{o&&(clearTimeout(o),o=void 0),n&&(clearTimeout(n),n=void 0)},d};class ye{constructor(){this.disposers=new Map,this.disposerIDGenCount=1}add(e,t=this.genDisposerID()){return this.flush(t),this.disposers.set(t,e()),t}addDisposer(e,t=this.genDisposerID()){return this.add((()=>e),t)}addEventListener(e,t,s,i){e.addEventListener(t,s,i);const a=this.genDisposerID();return this.disposers.set(a,(()=>{e.removeEventListener(t,s)})),a}remove(e){const t=this.disposers.get(e);return this.disposers.delete(e),t}flush(e){if(e){const s=this.remove(e);if(s)try{s()}catch(t){console.error(t)}}else this.disposers.forEach((e=>{try{e()}catch(t){console.error(t)}})),this.disposers.clear()}genDisposerID(){return"disposer-"+this.disposerIDGenCount++}}var Me="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTQxOC4xNTggMjU3LjQxOUwxNzQuNjYzIDQxMy4zM2MtNi4wMTcgMy45MTktMTUuNzA4IDMuNzcyLTIxLjI5MS0uMjktMi43OTEtMi4wMTgtNC4yOTUtNC40ODMtNC4yOTUtNy4wODRWOTQuMTA5YzAtNS42NSA2Ljg4My0xMC4yODkgMTUuMjcxLTEwLjI4OSA0LjI5OCAwIDguMzkxIDEuMzA3IDExLjE4MSAzLjMzMmwyNDIuNjI5IDE1NS40ODRjNi4wMTYgMy45MTcgNi40NTEgMTAuMjkyLjY0OSAxNC40OTEtLjIxNi4xNTQtLjQzMi4xNTQtLjY0OS4yOTJ6TTE3MC42MjEgMzkxLjI4OGwyMjMuMTE2LTE0MS4zMDFMMTcwLjcxIDEwNy43NTNsLS4wODkgMjgzLjUzNXoiIC8+Cjwvc3ZnPgo=";class fe{constructor({readonly:e,box:t,pages:s,onNewPageIndex:i,onPlay:a}){if(this.pageIndex=0,this.isShowPreview=!1,this.sideEffect=new ye,s.length<=0)throw new Error("[DocsViewer] Empty pages.");this.readonly=e,this.box=t,this.pages=s,this.onNewPageIndex=i,this.onPlay=a,this.render()}mount(){this.box.mountContent(this.$content),this.box.mountFooter(this.$footer),this.sideEffect.add((()=>{const e=new ce({container:this.$preview,elements_selector:`.${this.wrapClassName("preview-page>img")}`});return()=>e.destroy()}),"preview-lazyload")}unmount(){this.$content.remove(),this.$footer.remove()}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.$content.classList.toggle(this.wrapClassName("readonly"),e),this.$footer.classList.toggle(this.wrapClassName("readonly"),e),this.$pageNumberInput.disabled=e)}destroy(){this.sideEffect.flush(),this.unmount()}setPageIndex(e){Number.isNaN(e)||(this.pageIndex=e,this.$pageNumberInput.value=String(e+1))}render(){return this.renderContent(),this.renderFooter(),this.$content}renderContent(){if(!this.$content){const e=document.createElement("div");e.className=this.wrapClassName("content"),this.$content=e,this.readonly&&e.classList.add(this.wrapClassName("readonly")),e.appendChild(this.renderPreviewMask()),e.appendChild(this.renderPreview())}return this.$content}renderPreview(){if(!this.$preview){const e=document.createElement("div");e.className=this.wrapClassName("preview")+" tele-fancy-scrollbar",this.$preview=e;const t=this.wrapClassName("preview-page"),s=this.wrapClassName("preview-page-name");this.pages.forEach(((i,a)=>{var r;const o=String(a),n=document.createElement("a");n.className=t+" "+this.wrapClassName(`preview-page-${a}`),n.setAttribute("href","#"),n.dataset.pageIndex=o;const l=document.createElement("span");l.className=s,l.textContent=String(a+1),l.dataset.pageIndex=o;const d=document.createElement("img");d.width=i.width,d.height=i.height,d.dataset.src=null!=(r=i.thumbnail)?r:i.src,d.dataset.pageIndex=o,n.appendChild(d),n.appendChild(l),e.appendChild(n)})),this.sideEffect.addEventListener(e,"click",(e=>{var t;if(this.readonly)return;const s=null==(t=e.target.dataset)?void 0:t.pageIndex;s&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),this.onNewPageIndex(Number(s)),this.togglePreview(!1))}))}return this.$preview}renderPreviewMask(){return this.$previewMask||(this.$previewMask=document.createElement("div"),this.$previewMask.className=this.wrapClassName("preview-mask"),this.sideEffect.addEventListener(this.$previewMask,"click",(e=>{this.readonly||e.target===this.$previewMask&&this.togglePreview(!1)}))),this.$previewMask}renderFooter(){if(!this.$footer){const e=document.createElement("div");e.className=this.wrapClassName("footer"),this.$footer=e,this.readonly&&e.classList.add(this.wrapClassName("readonly"));const t=this.renderFooterBtn("btn-sidebar","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik01MCA4SDE0Yy0zLjMwOSAwLTYgMi42OTEtNiA2djM2YzAgMy4zMDkgMi42OTEgNiA2IDZoMzZjMy4zMDkgMCA2LTIuNjkxIDYtNlYxNGMwLTMuMzA5LTIuNjkxLTYtNi02ek0xMiA1MFYxNGMwLTEuMTAzLjg5Ny0yIDItMmg4djQwaC04Yy0xLjEwMyAwLTItLjg5Ny0yLTJ6bTQwIDBjMCAxLjEwMy0uODk3IDItMiAySDI2VjEyaDI0YzEuMTAzIDAgMiAuODk3IDIgMnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(t,"click",(()=>{this.readonly||this.togglePreview()}));const s=document.createElement("div");s.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTE3Ny44MSAyNDkuOTU5TDMzNy40NzMgOTAuMjk1YzIuNzIyLTIuODY1IDIuNjUxLTcuMzc4LS4xNDMtMTAuMS0yLjc5My0yLjY1LTcuMTYzLTIuNjUtOS45NTYgMGwtMTY0Ljc1IDE2NC43NWMtMi43OTMgMi43OTMtMi43OTMgNy4zMDYgMCAxMC4xbDE2NC43NSAxNjQuNzVjMi44NjUgMi43MjIgNy4zNzggMi42NSAxMC4wOTktLjE0MyAyLjY1MS0yLjc5NCAyLjY1MS03LjE2MyAwLTkuOTU3TDE3Ny44MDkgMjQ5Ljk1OXoiIC8+Cjwvc3ZnPgo=");if(this.sideEffect.addEventListener(i,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex-1)})),s.appendChild(i),this.onPlay){const e=this.renderFooterBtn("btn-page-play",Me),t=this.debounce((()=>{const t=e.querySelector("img");t&&(t.src=Me)}),500);this.sideEffect.addEventListener(e,"click",(()=>{if(this.readonly)return;const s=e.querySelector("img");s&&(s.src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTMxMi40OTEgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6TTE2NS4yNTcgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6IiAvPgo8L3N2Zz4K"),this.onPlay&&this.onPlay(),t()})),s.appendChild(e)}const a=this.renderFooterBtn("btn-page-next","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTMyMi4xOSAyNTAuMDQxTDE2Mi41MjcgNDA5LjcwNWMtMi43MjIgMi44NjUtMi42NTEgNy4zNzguMTQzIDEwLjEgMi43OTMgMi42NSA3LjE2MyAyLjY1IDkuOTU2IDBsMTY0Ljc1LTE2NC43NWMyLjc5My0yLjc5MyAyLjc5My03LjMwNiAwLTEwLjFsLTE2NC43NS0xNjQuNzVjLTIuODY1LTIuNzIyLTcuMzc4LTIuNjUtMTAuMDk5LjE0My0yLjY1MSAyLjc5NC0yLjY1MSA3LjE2MyAwIDkuOTU3bDE1OS42NjQgMTU5LjczNnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(a,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex+1)})),s.appendChild(a);const r=document.createElement("div");r.className=this.wrapClassName("page-number");const o=document.createElement("input");o.className=this.wrapClassName("page-number-input"),o.value=String(this.pageIndex+1),this.readonly&&(o.disabled=!0),this.$pageNumberInput=o,this.sideEffect.addEventListener(o,"change",(()=>{this.readonly||o.value&&this.onNewPageIndex(Number(o.value)-1)}));const n=document.createElement("span");n.textContent=" / "+this.pages.length,r.appendChild(o),r.appendChild(n),this.$footer.appendChild(t),this.$footer.appendChild(s),this.$footer.appendChild(r)}return this.$footer}renderFooterBtn(e,t){const s=document.createElement("button");s.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e);const i=document.createElement("img");return i.src=t,s.appendChild(i),s}togglePreview(e){if(this.isShowPreview=null!=e?e:!this.isShowPreview,this.$content.classList.toggle(this.wrapClassName("preview-active"),this.isShowPreview),this.isShowPreview){const e=this.$preview.querySelector("."+this.wrapClassName(`preview-page-${this.pageIndex}`));e&&this.$preview.scrollTo({top:e.offsetTop-16})}}debounce(e,t){const s=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>s.cancel())),s}wrapClassName(e){return"netless-app-docs-viewer-"+e}}function xe(e,t,s){return Math.min(Math.max(e,t),s)}class Ne{constructor({whiteboardView:e,readonly:t,box:s,pages:i,pagesSize:a,pageScrollTop:r=0,onUserScroll:o}){this.onNewPageIndex=e=>{this.scrollToPage(e)},this.sideEffect=new ye,this.whiteboardView=e,this.readonly=t,this.box=s,this.pages=i,this.pageScrollTop=r,this.pagesSize=a,this.onUserScroll=o,this.viewer=new fe({readonly:t,box:s,pages:i,onNewPageIndex:this.onNewPageIndex}),this.render()}mount(){return this.viewer.mount(),this.sideEffect.add((()=>{const e=new ce({container:this.$pages,elements_selector:`.${this.wrapClassName("page")}`});return()=>e.destroy()}),"page-lazyload"),this.setupWhiteboardCamera(),0!==this.pageScrollTop&&this.pageScrollTo(this.pageScrollTop),this.setupScrollTopEvent(),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.onUserScroll=void 0,this.unmount(),this.viewer.destroy()}syncPageScrollTop(e){e>=0&&Math.abs(this.pageScrollTop-e)>10&&this.pageScrollTo(e)}render(){this.viewer.$content.appendChild(this.renderPages()),this.viewer.$content.appendChild(this.renderWhiteboardView())}renderPages(){if(!this.$pages){const e=document.createElement("div");e.className=this.wrapClassName("pages"),this.$pages=e;const t=this.wrapClassName("page");this.pages.forEach(((s,i)=>{const a=document.createElement("img");a.className=t+" "+this.wrapClassName(`page-${i}`),a.draggable=!1,a.width=s.width,a.height=s.height,a.dataset.src=s.src,a.dataset.pageIndex=String(i),e.appendChild(a)}))}return this.$pages}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView,this.sideEffect.addEventListener(this.$whiteboardView,"wheel",(e=>{if(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),!this.readonly){const t=xe(this.pageScrollTop+e.deltaY,0,this.pagesSize.height);this.pageScrollTo(t),this.onUserScroll&&this.onUserScroll(t)}}),{passive:!1,capture:!0}),this.sideEffect.addEventListener(this.$whiteboardView,"touchstart",(e=>{e.touches.length>1&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),this.readonly)}),{passive:!1,capture:!0})),this.$whiteboardView}scrollTopPageToEl(e){const t=this.$pages.scrollHeight;return t>0?e*(t/this.pagesSize.height):null}scrollTopElToPage(e){const t=this.$pages.scrollHeight;return t>0?e*(this.pagesSize.height/t):null}elScrollTo(e){this.$pages.scrollTo({top:e})}pageScrollTo(e){const t=this.scrollTopPageToEl(e);null!==t&&this.elScrollTo(t)}scrollToPage(e){if(!this.readonly&&this.$pages&&!Number.isNaN(e)){e=xe(e,0,this.pages.length-1);const t=this.$pages.querySelector("."+this.wrapClassName(`page-${e}`));if(t){const e=t.offsetTop;if(this.elScrollTo(e),this.onUserScroll){const t=this.scrollTopElToPage(e);null!==t&&this.onUserScroll(t)}}}}setupScrollTopEvent(){const e=this.debounce((()=>{if(this.pages.length>0&&this.$pages){if(this.$pages.getBoundingClientRect().width>0){let e=0;for(let t=0;t<this.pages.length;t+=1)if(e+=this.pages[t].height,this.pageScrollTop<=e)return void this.viewer.setPageIndex(t);this.viewer.setPageIndex(this.pages.length-1)}}}),100,"debounce-updatePageIndex");this.$pages&&this.sideEffect.addEventListener(this.$pages,"scroll",(()=>{const t=this.$pages.scrollTop,s=this.scrollTopElToPage(t);null!==s&&(this.pageScrollTop=s);const i=this.whiteboardView.camera.scale;i>0&&this.whiteboardView.moveCamera({centerY:t/i,animationMode:"immediately"}),e()}))}setupWhiteboardCamera(){const e=this.debounce((()=>{this.$pages&&this.elScrollTo(this.$pages.scrollTop)}),100);this.sideEffect.add((()=>{const t=()=>{if(this.pages.length>0){const{width:t,height:s}=this.viewer.$content.getBoundingClientRect();t>0&&s>0&&(this.whiteboardView.moveCameraToContain({originX:0,originY:this.$pages?this.$pages.scrollTop*(this.pages[0].width/t):0,width:this.pages[0].width,height:this.pages[0].width/t*s,animationMode:"immediately"}),e())}};return this.whiteboardView.callbacks.on("onSizeUpdated",t),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",t)}}),"whiteboard-size-update")}debounce(e,t,s){const i=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>i.cancel()),s),i}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}}class Te{constructor({displayer:e,whiteboardView:t,getRoom:s,readonly:i,box:a,pages:r}){this.onPlayPPT=()=>{const e=this.getWhiteboardRoom();e&&e.pptNextStep()},this.scaleDocsToFit=()=>{const e=this.pages[this.getPageIndex()];e&&this.whiteboardView.moveCameraToContain({originX:-e.width/2,originY:-e.height/2,width:e.width,height:e.height})},this.onNewPageIndex=e=>{this.jumpToPage(e)},this.sideEffect=new ye,this.whiteboardView=t,this.readonly=i,this.box=a,this.pages=r,this.displayer=e,this.getWhiteboardRoom=s,this.viewer=new fe({readonly:i,box:a,pages:r,onNewPageIndex:this.onNewPageIndex,onPlay:this.onPlayPPT}),this.render()}mount(){this.viewer.mount();const e=this.getPageIndex();return 0!==e&&this.jumpToPage(e),this.scaleDocsToFit(),this.sideEffect.add((()=>(this.whiteboardView.callbacks.on("onSizeUpdated",this.scaleDocsToFit),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",this.scaleDocsToFit)}))),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.unmount(),this.viewer.destroy()}getPageIndex(){return this.displayer.state.sceneState.index}jumpToPage(e){if((e=xe(e,0,this.pages.length-1))!==this.getPageIndex()){const t=this.getWhiteboardRoom();t&&t.setSceneIndex(e)}e!==this.viewer.pageIndex&&this.viewer.setPageIndex(e)}render(){this.viewer.$content.appendChild(this.renderMask()),this.viewer.$content.appendChild(this.renderWhiteboardView())}renderMask(){if(!this.$mask){const e=document.createElement("div");e.className=this.wrapClassName("mask"),this.$mask=e;document.createElement("button").className=this.wrapClassName("back");document.createElement("button").className=this.wrapClassName("next")}return this.$mask}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView,this.sideEffect.addEventListener(this.$whiteboardView,"wheel",(e=>{e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),console.log("scroll",e.deltaY,e.deltaX)}),{passive:!1,capture:!0})),this.$whiteboardView}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Ee={kind:"DocsViewer",setup(e){const t=e.getBox();if(!t)throw new Error("[DocsViewer]: Missing `box` after `create` event.");const s=e.getAttributes();if(!s)throw new Error("[DocsViewer]: Missing initial attributes.");t.mountStyles(".netless-app-docs-viewer-content{position:relative;height:100%;overflow:hidden}.netless-app-docs-viewer-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-docs-viewer-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview-mask{display:block}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview{transform:translate(0)}.netless-app-docs-viewer-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-docs-viewer-preview-page:hover,.netless-app-docs-viewer-preview-page.netless-app-docs-viewer-preview-page-active{border-color:#444e601a}.netless-app-docs-viewer-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-docs-viewer-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-docs-viewer-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7}.netless-app-docs-viewer-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;background:transparent;transition:background .4s;cursor:pointer;user-select:none}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}.netless-app-docs-viewer-footer-btn>img{width:100%}.netless-app-docs-viewer-footer-btn~.netless-app-docs-viewer-footer-btn{margin-left:15px}.netless-app-docs-viewer-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-docs-viewer-page-number{margin-left:auto;font-size:13px;user-select:none}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:1.5em;text-align:right;border-radius:2px;background:transparent;transition:background .4s;user-select:text}.netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn:hover{background:transparent}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:active{background:transparent;box-shadow:none}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:disabled{color:inherit}.netless-app-docs-viewer-static-pages{overflow:hidden;position:relative;height:100%;user-select:none}.netless-app-docs-viewer-static-page{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}\n"),s.dynamic?function(e,t){const s=e.getInitScenePath();if(console.log(e.getDisplayer()),!s)throw new Error("[DocsViewer]: Missing initScenePath for dynamic ppt.");const i=e.getDisplayer(),a=i.entireScenes()[s],r=e.getView();r.disableCameraTransform=!0;const o=a.map((e=>e.ppt?{src:e.ppt.src,width:e.ppt.width,height:e.ppt.height,thumbnail:e.ppt.previewURL}:null)).filter((e=>Boolean(e)));if(o.length<=0)throw new Error("[DocsViewer]: Missing pages.");const n=new Te({displayer:i,whiteboardView:r,getRoom:()=>e.getIsWritable()?e.getDisplayer():void 0,readonly:t.readonly,box:t,pages:o}).mount();e.emitter.on("sceneStateChange",(e=>{n.jumpToPage(e.index)})),t.events.on("readonly",(e=>{n.setReadonly(e)}))}(e,t):function(e,t,s){const i=s.pages||[];if(i.length<=0)throw new Error("[DocsViewer]: Missing pages.");const a={width:i[0].width,height:i.reduce(((e,t)=>e+t.height*(i[0].width/t.width)),0)},r=e.getView();r.disableCameraTransform=!0;const o=new Ne({whiteboardView:r,readonly:t.readonly,box:t,pages:s.pages||[],pagesSize:a,pageScrollTop:s.pageScrollTop,onUserScroll:s=>{var i;(null==(i=e.getAttributes())?void 0:i.pageScrollTop)===s||t.readonly||e.updateAttributes(["pageScrollTop"],s)}}).mount();e.emitter.on("attributesUpdate",(e=>{e&&null!=e.pageScrollTop&&o.syncPageScrollTop(e.pageScrollTop)})),t.events.on("readonly",(e=>{o.setReadonly(e)}))}(e,t,s)}};export{Ee as default};
+var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,a=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i;const n="undefined"!=typeof window,l=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=n&&"IntersectionObserver"in window,c=n&&"classList"in document.createElement("p"),h=n&&window.devicePixelRatio>1,p={elements_selector:".lazy",container:l||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},g=e=>Object.assign({},p,e),w=function(e,t){var s;let i="LazyLoad::Initialized",r=new e(t);try{s=new CustomEvent(i,{detail:{instance:r}})}catch(o){(s=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:r})}window.dispatchEvent(s)},u=(e,t)=>e.getAttribute("data-"+t),m=e=>u(e,"ll-status"),b=(e,t)=>((e,t,s)=>{var i="data-"+t;null!==s?e.setAttribute(i,s):e.removeAttribute(i)})(e,"ll-status",t),v=e=>b(e,null),y=e=>null===m(e),f=e=>"native"===m(e),M=["loading","loaded","applied","error"],x=(e,t,s,i)=>{e&&(void 0===i?void 0===s?e(t):e(t,s):e(t,s,i))},E=(e,t)=>{c?e.classList.add(t):e.className+=(e.className?" ":"")+t},N=(e,t)=>{c?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},T=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const s=t._observer;s&&s.unobserve(e)},L=(e,t)=>{e&&(e.loadingCount+=t)},C=(e,t)=>{e&&(e.toLoadCount=t)},j=e=>{let t=[];for(let s,i=0;s=e.children[i];i+=1)"SOURCE"===s.tagName&&t.push(s);return t},A=(e,t,s)=>{s&&e.setAttribute(t,s)},S=(e,t)=>{e.removeAttribute(t)},z=e=>!!e.llOriginalAttrs,D=e=>{if(z(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},P=e=>{if(!z(e))return;const t=e.llOriginalAttrs;A(e,"src",t.src),A(e,"srcset",t.srcset),A(e,"sizes",t.sizes)},k=(e,t)=>{A(e,"sizes",u(e,t.data_sizes)),A(e,"srcset",u(e,t.data_srcset)),A(e,"src",u(e,t.data_src))},O=e=>{S(e,"src"),S(e,"srcset"),S(e,"sizes")},$=(e,t)=>{const s=e.parentNode;if(!s||"PICTURE"!==s.tagName)return;j(s).forEach(t)},_={IMG:(e,t)=>{$(e,(e=>{D(e),k(e,t)})),D(e),k(e,t)},IFRAME:(e,t)=>{A(e,"src",u(e,t.data_src))},VIDEO:(e,t)=>{((e,t)=>{j(e).forEach(t)})(e,(e=>{A(e,"src",u(e,t.data_src))})),A(e,"poster",u(e,t.data_poster)),A(e,"src",u(e,t.data_src)),e.load()}},V=(e,t)=>{const s=_[e.tagName];s&&s(e,t)},Y=(e,t,s)=>{E(e,t.class_applied),b(e,"applied"),t.unobserve_completed&&I(e,t),x(t.callback_applied,e,s)},U=(e,t,s)=>{L(s,1),E(e,t.class_loading),b(e,"loading"),x(t.callback_loading,e,s)},R=["IMG","IFRAME","VIDEO"],Z=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||x(e.callback_finish,t)},W=(e,t,s)=>{e.addEventListener(t,s),e.llEvLisnrs[t]=s},F=(e,t,s)=>{e.removeEventListener(t,s)},H=e=>!!e.llEvLisnrs,Q=e=>{if(!H(e))return;const t=e.llEvLisnrs;for(let s in t){const i=t[s];F(e,s,i)}delete e.llEvLisnrs},B=(e,t,s)=>{(e=>{delete e.llTempImage})(e),L(s,-1),(e=>{e&&(e.toLoadCount-=1)})(s),N(e,t.class_loading),t.unobserve_completed&&I(e,s)},G=(e,t,s)=>{const i=T(e)||e;if(H(i))return;((e,t,s)=>{H(e)||(e.llEvLisnrs={});const i="VIDEO"===e.tagName?"loadeddata":"load";W(e,i,t),W(e,"error",s)})(i,(r=>{((e,t,s,i)=>{const r=f(t);B(t,s,i),E(t,s.class_loaded),b(t,"loaded"),x(s.callback_loaded,t,i),r||Z(s,i)})(0,e,t,s),Q(i)}),(r=>{((e,t,s,i)=>{const r=f(t);B(t,s,i),E(t,s.class_error),b(t,"error"),x(s.callback_error,t,i),r||Z(s,i)})(0,e,t,s),Q(i)}))},X=(e,t,s)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),G(e,t,s),((e,t,s)=>{const i=u(e,t.data_bg),r=u(e,t.data_bg_hidpi),o=h&&r?r:i;o&&(e.style.backgroundImage=`url("${o}")`,T(e).setAttribute("src",o),U(e,t,s))})(e,t,s),((e,t,s)=>{const i=u(e,t.data_bg_multi),r=u(e,t.data_bg_multi_hidpi),o=h&&r?r:i;o&&(e.style.backgroundImage=o,Y(e,t,s))})(e,t,s)},K=(e,t,s)=>{(e=>R.indexOf(e.tagName)>-1)(e)?((e,t,s)=>{G(e,t,s),V(e,t),U(e,t,s)})(e,t,s):X(e,t,s)},q=(e,t,s,i)=>{s.cancel_on_exit&&(e=>"loading"===m(e))(e)&&"IMG"===e.tagName&&(Q(e),(e=>{$(e,(e=>{O(e)})),O(e)})(e),(e=>{$(e,(e=>{P(e)})),P(e)})(e),N(e,s.class_loading),L(i,-1),v(e),x(s.callback_cancel,e,t,i))},J=(e,t,s,i)=>{const r=(e=>M.indexOf(m(e))>=0)(e);b(e,"entered"),E(e,s.class_entered),N(e,s.class_exited),((e,t,s)=>{t.unobserve_entered&&I(e,s)})(e,s,i),x(s.callback_enter,e,t,i),r||K(e,s,i)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,se=(e,t,s)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,s)=>{e.setAttribute("loading","lazy"),G(e,t,s),V(e,t),b(e,"native")})(e,t,s)})),C(s,0)},ie=(e,t,s)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?J(e.target,e,t,s):((e,t,s,i)=>{y(e)||(E(e,s.class_exited),q(e,t,s,i),x(s.callback_exit,e,t,i))})(e.target,e,t,s)))},re=(e,t)=>{d&&!te(e)&&(t._observer=new IntersectionObserver((s=>{ie(s,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))},oe=e=>Array.prototype.slice.call(e),ae=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===m(e))(e),le=(e,t)=>(e=>oe(e).filter(y))(e||ae(t)),de=(e,t)=>{var s;(s=ae(e),oe(s).filter(ne)).forEach((t=>{N(t,e.class_error),v(t)})),t.update()},ce=function(e,t){const s=g(e);this._settings=s,this.loadingCount=0,re(s,this),((e,t)=>{n&&window.addEventListener("online",(()=>{de(e,t)}))})(s,this),this.update(t)};ce.prototype={update:function(e){const t=this._settings,s=le(e,t);var i,r;(C(this,s.length),!l&&d)?te(t)?se(s,t,this):(i=this._observer,r=s,(e=>{e.disconnect()})(i),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(i,r)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),ae(this._settings).forEach((e=>{delete e.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;le(e,t).forEach((e=>{I(e,this),K(e,t,this)}))}},ce.load=(e,t)=>{const s=g(t);K(e,s)},ce.resetStatus=e=>{v(e)},n&&((e,t)=>{if(t)if(t.length)for(let s,i=0;s=t[i];i+=1)w(e,s);else w(e,t)})(ce,window.lazyLoadOptions);const he=(e,t,s,i)=>{if("length"===s||"prototype"===s)return;if("arguments"===s||"caller"===s)return;const r=Object.getOwnPropertyDescriptor(e,s),o=Object.getOwnPropertyDescriptor(t,s);!pe(r,o)&&i||Object.defineProperty(e,s,o)},pe=function(e,t){return void 0===e||e.configurable||e.writable===t.writable&&e.enumerable===t.enumerable&&e.configurable===t.configurable&&(e.writable||e.value===t.value)},ge=(e,t)=>`/* Wrapped ${e}*/\n${t}`,we=Object.getOwnPropertyDescriptor(Function.prototype,"toString"),ue=Object.getOwnPropertyDescriptor(Function.prototype.toString,"name"),me=(e,n,l)=>{const d=""===l?"":`with ${l.trim()}() `,c=ge.bind(null,d,n.toString());var h;Object.defineProperty(c,"name",ue),Object.defineProperty(e,"toString",(h=((e,t)=>{for(var s in t||(t={}))r.call(t,s)&&a(e,s,t[s]);if(i)for(var s of i(t))o.call(t,s)&&a(e,s,t[s]);return e})({},we),t(h,s({value:c}))))};var be=(e,t,{ignoreNonConfigurable:s=!1}={})=>{const{name:i}=e;for(const r of Reflect.ownKeys(t))he(e,t,r,s);return((e,t)=>{const s=Object.getPrototypeOf(t);s!==Object.getPrototypeOf(e)&&Object.setPrototypeOf(e,s)})(e,t),me(e,t,i),e};const ve=(e,t={})=>{if("function"!=typeof e)throw new TypeError(`Expected the first argument to be a function, got \`${typeof e}\``);const{wait:s=0,maxWait:i=Number.Infinity,before:r=!1,after:o=!0}=t;if(!r&&!o)throw new Error("Both `before` and `after` are false, function wouldn't be called.");let a,n,l;const d=function(...t){const d=this,c=()=>{n=void 0,a&&(clearTimeout(a),a=void 0),o&&(l=e.apply(d,t))},h=r&&!a;return clearTimeout(a),a=setTimeout((()=>{a=void 0,n&&(clearTimeout(n),n=void 0),o&&(l=e.apply(d,t))}),s),i>0&&i!==Number.Infinity&&!n&&(n=setTimeout(c,i)),h&&(l=e.apply(d,t)),l};return be(d,e),d.cancel=()=>{a&&(clearTimeout(a),a=void 0),n&&(clearTimeout(n),n=void 0)},d};class ye{constructor(){this.disposers=new Map,this.disposerIDGenCount=1}add(e,t=this.genDisposerID()){return this.flush(t),this.disposers.set(t,e()),t}addDisposer(e,t=this.genDisposerID()){return this.add((()=>e),t)}addEventListener(e,t,s,i){e.addEventListener(t,s,i);const r=this.genDisposerID();return this.disposers.set(r,(()=>{e.removeEventListener(t,s)})),r}remove(e){const t=this.disposers.get(e);return this.disposers.delete(e),t}flush(e){if(e){const s=this.remove(e);if(s)try{s()}catch(t){console.error(t)}}else this.disposers.forEach((e=>{try{e()}catch(t){console.error(t)}})),this.disposers.clear()}genDisposerID(){return"disposer-"+this.disposerIDGenCount++}}var fe="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTQxOC4xNTggMjU3LjQxOUwxNzQuNjYzIDQxMy4zM2MtNi4wMTcgMy45MTktMTUuNzA4IDMuNzcyLTIxLjI5MS0uMjktMi43OTEtMi4wMTgtNC4yOTUtNC40ODMtNC4yOTUtNy4wODRWOTQuMTA5YzAtNS42NSA2Ljg4My0xMC4yODkgMTUuMjcxLTEwLjI4OSA0LjI5OCAwIDguMzkxIDEuMzA3IDExLjE4MSAzLjMzMmwyNDIuNjI5IDE1NS40ODRjNi4wMTYgMy45MTcgNi40NTEgMTAuMjkyLjY0OSAxNC40OTEtLjIxNi4xNTQtLjQzMi4xNTQtLjY0OS4yOTJ6TTE3MC42MjEgMzkxLjI4OGwyMjMuMTE2LTE0MS4zMDFMMTcwLjcxIDEwNy43NTNsLS4wODkgMjgzLjUzNXoiIC8+Cjwvc3ZnPgo=";class Me{constructor({readonly:e,box:t,pages:s,onNewPageIndex:i,onPlay:r}){if(this.pageIndex=0,this.isShowPreview=!1,this.sideEffect=new ye,s.length<=0)throw new Error("[DocsViewer] Empty pages.");this.readonly=e,this.box=t,this.pages=s,this.onNewPageIndex=i,this.onPlay=r,this.render()}mount(){this.box.mountContent(this.$content),this.box.mountFooter(this.$footer),this.sideEffect.add((()=>{const e=new ce({container:this.$preview,elements_selector:`.${this.wrapClassName("preview-page>img")}`});return()=>e.destroy()}),"preview-lazyload")}unmount(){this.$content.remove(),this.$footer.remove()}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.$content.classList.toggle(this.wrapClassName("readonly"),e),this.$footer.classList.toggle(this.wrapClassName("readonly"),e),this.$pageNumberInput.disabled=e)}destroy(){this.sideEffect.flush(),this.unmount()}setPageIndex(e){Number.isNaN(e)||(this.pageIndex=e,this.$pageNumberInput.value=String(e+1))}render(){return this.renderContent(),this.renderFooter(),this.$content}renderContent(){if(!this.$content){const e=document.createElement("div");e.className=this.wrapClassName("content"),this.$content=e,this.readonly&&e.classList.add(this.wrapClassName("readonly")),e.appendChild(this.renderPreviewMask()),e.appendChild(this.renderPreview())}return this.$content}renderPreview(){if(!this.$preview){const e=document.createElement("div");e.className=this.wrapClassName("preview")+" tele-fancy-scrollbar",this.$preview=e;const t=this.wrapClassName("preview-page"),s=this.wrapClassName("preview-page-name");this.pages.forEach(((i,r)=>{var o;const a=String(r),n=document.createElement("a");n.className=t+" "+this.wrapClassName(`preview-page-${r}`),n.setAttribute("href","#"),n.dataset.pageIndex=a;const l=document.createElement("span");l.className=s,l.textContent=String(r+1),l.dataset.pageIndex=a;const d=document.createElement("img");d.width=i.width,d.height=i.height,d.dataset.src=null!=(o=i.thumbnail)?o:i.src,d.dataset.pageIndex=a,n.appendChild(d),n.appendChild(l),e.appendChild(n)})),this.sideEffect.addEventListener(e,"click",(e=>{var t;if(this.readonly)return;const s=null==(t=e.target.dataset)?void 0:t.pageIndex;s&&(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),this.onNewPageIndex(Number(s)),this.togglePreview(!1))}))}return this.$preview}renderPreviewMask(){return this.$previewMask||(this.$previewMask=document.createElement("div"),this.$previewMask.className=this.wrapClassName("preview-mask"),this.sideEffect.addEventListener(this.$previewMask,"click",(e=>{this.readonly||e.target===this.$previewMask&&this.togglePreview(!1)}))),this.$previewMask}renderFooter(){if(!this.$footer){const e=document.createElement("div");e.className=this.wrapClassName("footer"),this.$footer=e,this.readonly&&e.classList.add(this.wrapClassName("readonly"));const t=this.renderFooterBtn("btn-sidebar","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik01MCA4SDE0Yy0zLjMwOSAwLTYgMi42OTEtNiA2djM2YzAgMy4zMDkgMi42OTEgNiA2IDZoMzZjMy4zMDkgMCA2LTIuNjkxIDYtNlYxNGMwLTMuMzA5LTIuNjkxLTYtNi02ek0xMiA1MFYxNGMwLTEuMTAzLjg5Ny0yIDItMmg4djQwaC04Yy0xLjEwMyAwLTItLjg5Ny0yLTJ6bTQwIDBjMCAxLjEwMy0uODk3IDItMiAySDI2VjEyaDI0YzEuMTAzIDAgMiAuODk3IDIgMnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(t,"click",(()=>{this.readonly||this.togglePreview()}));const s=document.createElement("div");s.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTE3Ny44MSAyNDkuOTU5TDMzNy40NzMgOTAuMjk1YzIuNzIyLTIuODY1IDIuNjUxLTcuMzc4LS4xNDMtMTAuMS0yLjc5My0yLjY1LTcuMTYzLTIuNjUtOS45NTYgMGwtMTY0Ljc1IDE2NC43NWMtMi43OTMgMi43OTMtMi43OTMgNy4zMDYgMCAxMC4xbDE2NC43NSAxNjQuNzVjMi44NjUgMi43MjIgNy4zNzggMi42NSAxMC4wOTktLjE0MyAyLjY1MS0yLjc5NCAyLjY1MS03LjE2MyAwLTkuOTU3TDE3Ny44MDkgMjQ5Ljk1OXoiIC8+Cjwvc3ZnPgo=");if(this.sideEffect.addEventListener(i,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex-1)})),s.appendChild(i),this.onPlay){const e=this.renderFooterBtn("btn-page-play",fe),t=this.debounce((()=>{const t=e.querySelector("img");t&&(t.src=fe)}),500);this.sideEffect.addEventListener(e,"click",(()=>{if(this.readonly)return;const s=e.querySelector("img");s&&(s.src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoIGZpbGw9IiMxZTIwMWQiCiAgICAgICAgZD0iTTMxMi40OTEgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6TTE2NS4yNTcgNzguMjYxYzAtNi4xNTkgNC44OTMtMTEuMjEzIDExLjA0LTExLjIxMyA2LjE1OCAwIDExLjIxMSA1LjA1NCAxMS4yMTEgMTEuMjEzdjM0My40NzhjMCA2LjE1OS01LjA1MyAxMS4yMTMtMTEuMjExIDExLjIxMy02LjE0NyAwLTExLjA0LTUuMDU0LTExLjA0LTExLjIxM1Y3OC4yNjF6IiAvPgo8L3N2Zz4K"),this.onPlay&&this.onPlay(),t()})),s.appendChild(e)}const r=this.renderFooterBtn("btn-page-next","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTMyMi4xOSAyNTAuMDQxTDE2Mi41MjcgNDA5LjcwNWMtMi43MjIgMi44NjUtMi42NTEgNy4zNzguMTQzIDEwLjEgMi43OTMgMi42NSA3LjE2MyAyLjY1IDkuOTU2IDBsMTY0Ljc1LTE2NC43NWMyLjc5My0yLjc5MyAyLjc5My03LjMwNiAwLTEwLjFsLTE2NC43NS0xNjQuNzVjLTIuODY1LTIuNzIyLTcuMzc4LTIuNjUtMTAuMDk5LjE0My0yLjY1MSAyLjc5NC0yLjY1MSA3LjE2MyAwIDkuOTU3bDE1OS42NjQgMTU5LjczNnoiIC8+Cjwvc3ZnPgo=");this.sideEffect.addEventListener(r,"click",(()=>{this.readonly||this.onNewPageIndex(this.pageIndex+1)})),s.appendChild(r);const o=document.createElement("div");o.className=this.wrapClassName("page-number");const a=document.createElement("input");a.className=this.wrapClassName("page-number-input"),a.value=String(this.pageIndex+1),this.readonly&&(a.disabled=!0),this.$pageNumberInput=a,this.sideEffect.addEventListener(a,"change",(()=>{this.readonly||a.value&&this.onNewPageIndex(Number(a.value)-1)}));const n=document.createElement("span");n.textContent=" / "+this.pages.length,o.appendChild(a),o.appendChild(n),this.$footer.appendChild(t),this.$footer.appendChild(s),this.$footer.appendChild(o)}return this.$footer}renderFooterBtn(e,t){const s=document.createElement("button");s.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e);const i=document.createElement("img");return i.src=t,s.appendChild(i),s}togglePreview(e){if(this.isShowPreview=null!=e?e:!this.isShowPreview,this.$content.classList.toggle(this.wrapClassName("preview-active"),this.isShowPreview),this.isShowPreview){const e=this.$preview.querySelector("."+this.wrapClassName(`preview-page-${this.pageIndex}`));e&&this.$preview.scrollTo({top:e.offsetTop-16})}}debounce(e,t){const s=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>s.cancel())),s}wrapClassName(e){return"netless-app-docs-viewer-"+e}}function xe(e,t,s){return Math.min(Math.max(e,t),s)}function Ee(e){return e.touches?e.touches[0]:e}function Ne(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}class Te{constructor({whiteboardView:e,readonly:t,box:s,pages:i,pagesSize:r,pageScrollTop:o=0,onUserScroll:a}){this.onNewPageIndex=e=>{this.scrollToPage(e)},this.sideEffect=new ye,this.scrollbarHeight=30,this.whiteboardView=e,this.readonly=t,this.box=s,this.pages=i,this.pageScrollTop=o,this.pagesSize=r,this.onUserScroll=a,this.viewer=new Me({readonly:t,box:s,pages:i,onNewPageIndex:this.onNewPageIndex}),this.render()}mount(){return this.viewer.mount(),this.sideEffect.add((()=>{const e=new ce({container:this.$pages,elements_selector:`.${this.wrapClassName("page")}`});return()=>e.destroy()}),"page-lazyload"),this.setupWhiteboardCamera(),0!==this.pageScrollTop&&this.pageScrollTo(this.pageScrollTop),this.setupScrollTopEvent(),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.onUserScroll=void 0,this.unmount(),this.viewer.destroy()}syncPageScrollTop(e){e>=0&&Math.abs(this.pageScrollTop-e)>10&&this.pageScrollTo(e)}render(){this.viewer.$content.appendChild(this.renderPages()),this.viewer.$content.appendChild(this.renderWhiteboardView()),this.viewer.$content.appendChild(this.renderScrollbar()),this.box.$titleBar&&(this.box.$titleBar.style.height="8.125%"),this.box.$footer&&(this.box.$footer.style.height="8.125%")}renderPages(){if(!this.$pages){const e=document.createElement("div");e.className=this.wrapClassName("pages"),this.$pages=e;const t=this.wrapClassName("page");this.pages.forEach(((s,i)=>{const r=document.createElement("img");r.className=t+" "+this.wrapClassName(`page-${i}`),r.draggable=!1,r.width=s.width,r.height=s.height,r.dataset.src=s.src,r.dataset.pageIndex=String(i),e.appendChild(r)}))}return this.$pages}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView,this.sideEffect.addEventListener(this.$whiteboardView,"wheel",(e=>{if(Ne(e),!this.readonly){const t=xe(this.pageScrollTop+e.deltaY,0,this.pagesSize.height);this.pageScrollTo(t),this.onUserScroll&&this.onUserScroll(t)}}),{passive:!1,capture:!0}),this.sideEffect.addEventListener(this.$whiteboardView,"touchstart",(e=>{if(e.touches.length>1){if(Ne(e),this.readonly)return;this.handleSwipeScroll(e)}}),{passive:!1,capture:!0})),this.$whiteboardView}renderScrollbar(){if(!this.$scrollbar){const e=document.createElement("button");this.$scrollbar=e,e.className=this.wrapClassName("scrollbar"),e.style.minHeight="30px";const t=e=>{if(this.readonly)return;Ne(e),this.$scrollbar.classList.toggle(this.wrapClassName("scrollbar-dragging"),!0);const t=this.scrollTopPageToEl(this.pageScrollTop),s=this.whiteboardView.size.width/this.pagesSize.width*this.pagesSize.height,{clientY:i}=Ee(e),r=e=>{const{clientY:r}=Ee(e),{height:o}=this.whiteboardView.size;this.elScrollTo(xe(t+s/o*(r-i),0,s-this.scrollbarHeight*(s/o)))},o=()=>{this.$scrollbar.classList.toggle(this.wrapClassName("scrollbar-dragging"),!1),window.removeEventListener("mousemove",r,!0),window.removeEventListener("touchmove",r,!0),window.removeEventListener("mouseup",o,!0),window.removeEventListener("touchend",o,!0),window.removeEventListener("touchcancel",o,!0)};window.addEventListener("mousemove",r,!0),window.addEventListener("touchmove",r,!0),window.addEventListener("mouseup",o,!0),window.addEventListener("touchend",o,!0),window.addEventListener("touchcancel",o,!0)};this.sideEffect.addEventListener(e,"mousedown",t),this.sideEffect.addEventListener(e,"touchstart",t)}return this.$scrollbar}scrollTopPageToEl(e){return e*(this.whiteboardView.size.width/this.pagesSize.width)}scrollTopElToPage(e){return e/(this.whiteboardView.size.width/this.pagesSize.width)}elScrollTo(e){this.$pages.scrollTo({top:e})}pageScrollTo(e){this.elScrollTo(this.scrollTopPageToEl(e))}scrollToPage(e){if(!this.readonly&&this.$pages&&!Number.isNaN(e)){e=xe(e,0,this.pages.length-1);const t=this.$pages.querySelector("."+this.wrapClassName(`page-${e}`));if(t){const e=t.offsetTop;this.elScrollTo(e),this.onUserScroll&&this.onUserScroll(this.scrollTopElToPage(e))}}}setupScrollTopEvent(){const e=this.debounce((()=>{if(this.pages.length>0&&this.$pages){if(this.$pages.getBoundingClientRect().width>0){let e=0;for(let t=0;t<this.pages.length;t+=1)if(e+=this.pages[t].height,this.pageScrollTop<=e)return void this.viewer.setPageIndex(t);this.viewer.setPageIndex(this.pages.length-1)}}}),100,"debounce-updatePageIndex");this.sideEffect.addEventListener(this.$pages,"scroll",(()=>{const t=this.$pages.scrollTop,s=this.scrollTopElToPage(t);this.pageScrollTop=s;const{width:i,height:r}=this.whiteboardView.size,{width:o,height:a}=this.pagesSize;this.whiteboardView.moveCamera({centerY:this.scrollTopElToPage(t+r/2),animationMode:"immediately"}),this.setScrollbarHeight(r/(i/o*a)),this.$scrollbar.style.transform=`translateY(${s/a*r}px)`,e()}))}setupWhiteboardCamera(){this.sideEffect.add((()=>{const e=({width:e,height:t})=>{if(e>0&&t>0){const s=this.pagesSize.width,i=s/e;this.whiteboardView.moveCameraToContain({originX:0,originY:this.$pages.scrollTop*i,width:s,height:t*i,animationMode:"immediately"})}};return this.whiteboardView.callbacks.on("onSizeUpdated",e),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",e)}}),"whiteboard-size-update")}debounce(e,t,s){const i=ve(e,{wait:t});return this.sideEffect.addDisposer((()=>i.cancel()),s),i}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}setScrollbarHeight(e){e=xe(e,30,this.whiteboardView.size.height),this.scrollbarHeight!==e&&(this.scrollbarHeight=e,this.$scrollbar.style.height=`${e}px`)}handleSwipeScroll(e){const t=this.scrollTopPageToEl(this.pageScrollTop),s=this.whiteboardView.size.width/this.pagesSize.width*this.pagesSize.height;let{clientY:i}=e.touches[0];const r=e=>{const{clientY:r}=e.touches[0];this.elScrollTo(xe(t+(i-r),0,s))},o=e=>{({clientY:i}=e.touches[0]),window.removeEventListener("touchmove",r,!0),window.removeEventListener("touchend",o,!0),window.removeEventListener("touchcancel",o,!0)};window.addEventListener("touchmove",r,!0),window.addEventListener("touchend",o,!0),window.addEventListener("touchcancel",o,!0)}}class Ie{constructor({displayer:e,whiteboardView:t,getRoom:s,readonly:i,box:r,pages:o}){this.onPlayPPT=()=>{const e=this.getWhiteboardRoom();e&&e.pptNextStep()},this.scaleDocsToFit=()=>{const e=this.pages[this.getPageIndex()];e&&this.whiteboardView.moveCameraToContain({originX:-e.width/2,originY:-e.height/2,width:e.width,height:e.height})},this.onNewPageIndex=e=>{this.jumpToPage(e)},this.sideEffect=new ye,this.whiteboardView=t,this.readonly=i,this.box=r,this.pages=o,this.displayer=e,this.getWhiteboardRoom=s,this.viewer=new Me({readonly:i,box:r,pages:o,onNewPageIndex:this.onNewPageIndex,onPlay:this.onPlayPPT}),this.render()}mount(){this.viewer.mount();const e=this.getPageIndex();return 0!==e&&this.jumpToPage(e),this.scaleDocsToFit(),this.sideEffect.add((()=>(this.whiteboardView.callbacks.on("onSizeUpdated",this.scaleDocsToFit),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",this.scaleDocsToFit)}))),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e))}destroy(){this.sideEffect.flush(),this.unmount(),this.viewer.destroy()}getPageIndex(){return this.displayer.state.sceneState.index}jumpToPage(e){if((e=xe(e,0,this.pages.length-1))!==this.getPageIndex()){const t=this.getWhiteboardRoom();t&&t.setSceneIndex(e)}e!==this.viewer.pageIndex&&this.viewer.setPageIndex(e)}render(){this.viewer.$content.appendChild(this.renderMask()),this.viewer.$content.appendChild(this.renderWhiteboardView())}renderMask(){if(!this.$mask){const e=document.createElement("div");e.className=this.wrapClassName("mask"),this.$mask=e;document.createElement("button").className=this.wrapClassName("back");document.createElement("button").className=this.wrapClassName("next")}return this.$mask}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.whiteboardView.divElement=this.$whiteboardView),this.$whiteboardView}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Le={kind:"DocsViewer",setup(e){const t=e.getBox(),s=e.getScenes();if(!s)throw new Error("[Docs Viewer]: scenes not found.");const i=s.map((({ppt:e})=>e?{width:e.width,height:e.height,src:e.src,thumbnail:e.previewURL}:null)).filter((e=>Boolean(e)));if(i.length<=0)throw new Error("[Docs Viewer]: empty scenes.");t.mountStyles(".netless-app-docs-viewer-content{position:relative;height:100%;overflow:hidden}.netless-app-docs-viewer-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-docs-viewer-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview-mask{display:block}.netless-app-docs-viewer-preview-active .netless-app-docs-viewer-preview{transform:translate(0)}.netless-app-docs-viewer-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-docs-viewer-preview-page:hover,.netless-app-docs-viewer-preview-page.netless-app-docs-viewer-preview-page-active{border-color:#444e601a}.netless-app-docs-viewer-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-docs-viewer-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-docs-viewer-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7}.netless-app-docs-viewer-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;background:transparent;transition:background .4s;cursor:pointer;user-select:none}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}.netless-app-docs-viewer-footer-btn>img{width:100%}.netless-app-docs-viewer-footer-btn~.netless-app-docs-viewer-footer-btn{margin-left:15px}.netless-app-docs-viewer-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-docs-viewer-page-number{margin-left:auto;font-size:13px;user-select:none}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:1.5em;text-align:right;border-radius:2px;background:transparent;transition:background .4s;user-select:text}.netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-footer-btn:hover{background:transparent}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input{cursor:not-allowed}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:hover,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:focus,.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:active{background:transparent;box-shadow:none}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-page-number-input:disabled{color:inherit}.netless-app-docs-viewer-static-pages{overflow:hidden;position:relative;height:100%;user-select:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1}.netless-app-docs-viewer-static-page{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-static-scrollbar{position:absolute;top:0;right:0;z-index:2147483647;width:8px;min-height:30px;margin:0;padding:0;border:none;outline:none;border-radius:4px;background:rgba(68,78,96,.1);opacity:0;transition:background .4s,opacity .4s,transform .2s;will-change:transform,height;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.2);opacity:1;transition:background .4s,opacity .4s}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.2)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.2)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}\n"),i[0].src.startsWith("ppt")?function(e,t,s){const i=e.getDisplayer(),r=e.getView();r.disableCameraTransform=!0;const o=new Ie({displayer:i,whiteboardView:r,getRoom:()=>e.getIsWritable()?e.getDisplayer():void 0,readonly:t.readonly,box:t,pages:s}).mount();e.emitter.on("sceneStateChange",(e=>{o.jumpToPage(e.index)})),t.events.on("readonly",(e=>{o.setReadonly(e)}))}(e,t,i):function(e,t,s){var i;const r={width:s[0].width,height:s.reduce(((e,t)=>e+t.height*(s[0].width/t.width)),0)},o=e.getView();o.disableCameraTransform=!0;const a=new Te({whiteboardView:o,readonly:t.readonly,box:t,pages:s,pagesSize:r,pageScrollTop:null==(i=e.getAttributes())?void 0:i.pageScrollTop,onUserScroll:s=>{var i;(null==(i=e.getAttributes())?void 0:i.pageScrollTop)===s||t.readonly||e.updateAttributes(["pageScrollTop"],s)}}).mount();e.emitter.on("attributesUpdate",(e=>{e&&null!=e.pageScrollTop&&a.syncPageScrollTop(e.pageScrollTop)})),t.events.on("readonly",(e=>{a.setReadonly(e)}))}(e,t,i)}};export{Le as default};
 //# sourceMappingURL=main.es.js.map

dist/StaticDocsViewer/index.d.ts

@@ -1,2 +0,4 @@
-import { ReadonlyTeleBox, View } from "@netless/window-manager";
+import type { ReadonlyTeleBox } from "@netless/window-manager";
+import type { View } from "white-web-sdk";
+import { DebouncedFunction } from "debounce-fn";
 import { SideEffectManager } from "../utils/SideEffectManager";
@@ -32,2 +34,3 @@ import { DocsViewer, DocsViewerPage } from "../DocsViewer";
     $whiteboardView: HTMLDivElement;
+    $scrollbar: HTMLElement;
     mount(): this;
@@ -42,4 +45,5 @@ unmount(): this;
     protected renderWhiteboardView(): HTMLDivElement;
-    protected scrollTopPageToEl(pageScrollTop: number): number | null;
-    protected scrollTopElToPage(elScrollTop: number): number | null;
+    protected renderScrollbar(): HTMLElement;
+    protected scrollTopPageToEl(pageScrollTop: number): number;
+    protected scrollTopElToPage(elScrollTop: number): number;
     /** Scroll base on DOM rect */
@@ -52,6 +56,9 @@ protected elScrollTo(elScrollTop: number): void;
     protected setupWhiteboardCamera(): void;
-    protected debounce(fn: () => void, wait: number, disposerID?: string): () => void;
+    protected debounce<ArgumentsType extends unknown[], ReturnType>(fn: (...args: ArgumentsType) => ReturnType, wait: number, disposerID?: string): DebouncedFunction<ArgumentsType, ReturnType | undefined>;
     protected wrapClassName(className: string): string;
     protected onNewPageIndex: (index: number) => void;
     protected sideEffect: SideEffectManager;
+    protected scrollbarHeight: number;
+    protected setScrollbarHeight(elScrollbarHeight: number): void;
+    protected handleSwipeScroll(ev: TouchEvent): void;
 }

dist/utils/helpers.d.ts

 export declare function clamp(value: number, min: number, max: number): number;
+export declare function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch;
+export declare function preventEvent(ev: Event): void;

package.json

 {
     "name": "@netless/app-docs-viewer",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "private": false,
@@ -53,3 +53,4 @@ "description": "Netless App Docs Viewer",
         "typescript": "^4.1.2",
-        "vite": "^2.5.0"
+        "vite": "^2.5.0",
+        "white-web-sdk": "^2.13.17"
     },
@@ -56,0 +57,0 @@ "dependencies": {

src/DynamicDocsViewer/index.ts

@@ -155,14 +155,2 @@ import type {
             this.whiteboardView.divElement = this.$whiteboardView;
-
-            this.sideEffect.addEventListener(
-                this.$whiteboardView,
-                "wheel",
-                (ev) => {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ev.stopImmediatePropagation();
-                    console.log("scroll", ev.deltaY, ev.deltaX);
-                },
-                { passive: false, capture: true }
-            );
             // @TODO support swipe
@@ -169,0 +157,0 @@ }

src/index.ts

@@ -16,11 +16,7 @@ import styles from "./style.scss?inline";
 export interface NetlessAppStaticDocsViewerAttributes {
-    dynamic?: false;
     /** ScrollTop base on the real page size */
     pageScrollTop?: number;
-    pages?: DocsViewerPage[];
 }
 
-export interface NetlessAppDynamicDocsViewerAttributes {
-    dynamic: true;
-}
+export interface NetlessAppDynamicDocsViewerAttributes {}
 
@@ -33,12 +29,23 @@ const NetlessAppDocsViewer: NetlessApp<
         const box = context.getBox();
-        if (!box) {
-            throw new Error(
-                "[DocsViewer]: Missing `box` after `create` event."
-            );
+
+        const scenes = context.getScenes();
+        if (!scenes) {
+            throw new Error("[Docs Viewer]: scenes not found.");
         }
 
-        const attrs = context.getAttributes();
+        const pages = scenes
+            .map(({ ppt }): DocsViewerPage | null =>
+                ppt
+                    ? {
+                          width: ppt.width,
+                          height: ppt.height,
+                          src: ppt.src,
+                          thumbnail: ppt.previewURL,
+                      }
+                    : null
+            )
+            .filter((page): page is DocsViewerPage => Boolean(page));
 
-        if (!attrs) {
-            throw new Error("[DocsViewer]: Missing initial attributes.");
+        if (pages.length <= 0) {
+            throw new Error("[Docs Viewer]: empty scenes.");
         }
@@ -48,6 +55,7 @@
 
-        if (attrs.dynamic) {
+        if (pages[0].src.startsWith("ppt")) {
             setupDynamicDocsViewer(
                 context as AppContext<NetlessAppDynamicDocsViewerAttributes>,
-                box
+                box,
+                pages
             );
@@ -58,3 +66,3 @@ } else {
                 box,
-                attrs
+                pages
             );
@@ -70,10 +78,4 @@ }
     box: ReadonlyTeleBox,
-    attrs: NetlessAppStaticDocsViewerAttributes
+    pages: DocsViewerPage[]
 ): void {
-    const pages = attrs.pages || [];
-
-    if (pages.length <= 0) {
-        throw new Error("[DocsViewer]: Missing pages.");
-    }
-
     const pagesSize = {
@@ -95,5 +97,5 @@ width: pages[0].width,
         box,
-        pages: attrs.pages || [],
+        pages: pages,
         pagesSize,
-        pageScrollTop: attrs.pageScrollTop,
+        pageScrollTop: context.getAttributes()?.pageScrollTop,
         onUserScroll: (pageScrollTop) => {
@@ -128,12 +130,6 @@ if (
     context: AppContext<NetlessAppDynamicDocsViewerAttributes>,
-    box: ReadonlyTeleBox
+    box: ReadonlyTeleBox,
+    pages: DocsViewerPage[]
 ): void {
-    const initScenePath = context.getInitScenePath();
-    console.log(context.getDisplayer());
-    if (!initScenePath) {
-        throw new Error("[DocsViewer]: Missing initScenePath for dynamic ppt.");
-    }
-
     const displayer = context.getDisplayer();
-    const scenes = displayer.entireScenes()[initScenePath];
 
@@ -143,19 +139,2 @@ const whiteboardView = context.getView();
 
-    const pages = scenes
-        .map((scene): DocsViewerPage | null =>
-            scene.ppt
-                ? {
-                      src: scene.ppt.src,
-                      width: scene.ppt.width,
-                      height: scene.ppt.height,
-                      thumbnail: scene.ppt.previewURL,
-                  }
-                : null
-        )
-        .filter((page): page is DocsViewerPage => Boolean(page));
-
-    if (pages.length <= 0) {
-        throw new Error("[DocsViewer]: Missing pages.");
-    }
-
     const docsViewer = new DynamicDocsViewer({
@@ -162,0 +141,0 @@ displayer,

src/StaticDocsViewer/index.ts

@@ -1,8 +0,11 @@
-import { AnimationMode, ReadonlyTeleBox, View } from "@netless/window-manager";
+import type { AnimationMode, ReadonlyTeleBox } from "@netless/window-manager";
+import type { View, Size } from "white-web-sdk";
 import LazyLoad from "vanilla-lazyload";
-import debounceFn from "debounce-fn";
+import debounceFn, { DebouncedFunction } from "debounce-fn";
 import { SideEffectManager } from "../utils/SideEffectManager";
 import { DocsViewer, DocsViewerPage } from "../DocsViewer";
-import { clamp } from "../utils/helpers";
+import { clamp, flattenEvent, preventEvent } from "../utils/helpers";
 
+const SCROLLBAR_MIN_HEIGHT = 30;
+
 export interface StaticDocsViewerConfig {
@@ -60,2 +63,3 @@ whiteboardView: View;
     public $whiteboardView!: HTMLDivElement;
+    public $scrollbar!: HTMLElement;
 
@@ -93,3 +97,2 @@ public mount(): this {
             this.readonly = readonly;
-
             this.viewer.setReadonly(readonly);
@@ -119,2 +122,9 @@ }
         this.viewer.$content.appendChild(this.renderWhiteboardView());
+        this.viewer.$content.appendChild(this.renderScrollbar());
+        if (this.box.$titleBar) {
+            this.box.$titleBar.style.height = `${(26 / 320) * 100}%`;
+        }
+        if (this.box.$footer) {
+            this.box.$footer.style.height = `${(26 / 320) * 100}%`;
+        }
     }
@@ -154,5 +164,3 @@
                 (ev) => {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ev.stopImmediatePropagation();
+                    preventEvent(ev);
                     if (!this.readonly) {
@@ -177,8 +185,7 @@ const scrollTop = clamp(
                     if (ev.touches.length > 1) {
-                        ev.preventDefault();
-                        ev.stopPropagation();
-                        ev.stopImmediatePropagation();
-                        if (!this.readonly) {
-                            // @TODO
+                        preventEvent(ev);
+                        if (this.readonly) {
+                            return;
                         }
+                        this.handleSwipeScroll(ev);
                     }
@@ -192,18 +199,89 @@ },
 
-    protected scrollTopPageToEl(pageScrollTop: number): number | null {
-        const height = this.$pages.scrollHeight;
-        if (height > 0) {
-            return pageScrollTop * (height / this.pagesSize.height);
+    protected renderScrollbar(): HTMLElement {
+        if (!this.$scrollbar) {
+            const $scrollbar = document.createElement("button");
+            this.$scrollbar = $scrollbar;
+            $scrollbar.className = this.wrapClassName("scrollbar");
+            $scrollbar.style.minHeight = `${SCROLLBAR_MIN_HEIGHT}px`;
+
+            const trackStart = (ev: MouseEvent | TouchEvent): void => {
+                if (this.readonly) {
+                    return;
+                }
+
+                preventEvent(ev);
+
+                this.$scrollbar.classList.toggle(
+                    this.wrapClassName("scrollbar-dragging"),
+                    true
+                );
+
+                const startTop = this.scrollTopPageToEl(this.pageScrollTop);
+                const elScrollHeight =
+                    (this.whiteboardView.size.width / this.pagesSize.width) *
+                    this.pagesSize.height;
+                const { clientY: startY } = flattenEvent(ev);
+
+                const tracking = (ev: MouseEvent | TouchEvent): void => {
+                    const { clientY } = flattenEvent(ev);
+                    const { height: wbHeight } = this.whiteboardView.size;
+                    this.elScrollTo(
+                        clamp(
+                            startTop +
+                                (clientY - startY) *
+                                    (elScrollHeight / wbHeight),
+                            0,
+                            elScrollHeight -
+                                this.scrollbarHeight *
+                                    (elScrollHeight / wbHeight)
+                        )
+                    );
+                };
+
+                const trackEnd = (): void => {
+                    this.$scrollbar.classList.toggle(
+                        this.wrapClassName("scrollbar-dragging"),
+                        false
+                    );
+                    window.removeEventListener("mousemove", tracking, true);
+                    window.removeEventListener("touchmove", tracking, true);
+                    window.removeEventListener("mouseup", trackEnd, true);
+                    window.removeEventListener("touchend", trackEnd, true);
+                    window.removeEventListener("touchcancel", trackEnd, true);
+                };
+
+                window.addEventListener("mousemove", tracking, true);
+                window.addEventListener("touchmove", tracking, true);
+                window.addEventListener("mouseup", trackEnd, true);
+                window.addEventListener("touchend", trackEnd, true);
+                window.addEventListener("touchcancel", trackEnd, true);
+            };
+            this.sideEffect.addEventListener(
+                $scrollbar,
+                "mousedown",
+                trackStart
+            );
+            this.sideEffect.addEventListener(
+                $scrollbar,
+                "touchstart",
+                trackStart
+            );
         }
-        return null;
+        return this.$scrollbar;
     }
 
-    protected scrollTopElToPage(elScrollTop: number): number | null {
-        const height = this.$pages.scrollHeight;
-        if (height > 0) {
-            return elScrollTop * (this.pagesSize.height / height);
-        }
-        return null;
+    protected scrollTopPageToEl(pageScrollTop: number): number {
+        return (
+            pageScrollTop *
+            (this.whiteboardView.size.width / this.pagesSize.width)
+        );
     }
 
+    protected scrollTopElToPage(elScrollTop: number): number {
+        return (
+            elScrollTop /
+            (this.whiteboardView.size.width / this.pagesSize.width)
+        );
+    }
+
     /** Scroll base on DOM rect */
@@ -218,6 +296,3 @@ protected elScrollTo(elScrollTop: number): void {
     protected pageScrollTo(pageScrollTop: number): void {
-        const elScrollTop = this.scrollTopPageToEl(pageScrollTop);
-        if (elScrollTop !== null) {
-            this.elScrollTo(elScrollTop);
-        }
+        this.elScrollTo(this.scrollTopPageToEl(pageScrollTop));
     }
@@ -235,6 +310,3 @@
                 if (this.onUserScroll) {
-                    const pageOffsetTop = this.scrollTopElToPage(elOffsetTop);
-                    if (pageOffsetTop !== null) {
-                        this.onUserScroll(pageOffsetTop);
-                    }
+                    this.onUserScroll(this.scrollTopElToPage(elOffsetTop));
                 }
@@ -268,49 +340,40 @@ }
 
-        if (this.$pages) {
-            this.sideEffect.addEventListener(this.$pages, "scroll", () => {
-                const elScrollTop = this.$pages.scrollTop;
-                const pageScrollTop = this.scrollTopElToPage(elScrollTop);
-                if (pageScrollTop !== null) {
-                    this.pageScrollTop = pageScrollTop;
-                }
+        this.sideEffect.addEventListener(this.$pages, "scroll", () => {
+            const elScrollTop = this.$pages.scrollTop;
+            const pageScrollTop = this.scrollTopElToPage(elScrollTop);
+            this.pageScrollTop = pageScrollTop;
 
-                const cameraScale = this.whiteboardView.camera.scale;
-                if (cameraScale > 0) {
-                    this.whiteboardView.moveCamera({
-                        centerY: elScrollTop / cameraScale,
-                        animationMode: "immediately" as AnimationMode,
-                    });
-                }
+            const { width: wbWidth, height: wbHeight } =
+                this.whiteboardView.size;
+            const { width: pageWidth, height: pageHeight } = this.pagesSize;
 
-                updatePageIndex();
+            this.whiteboardView.moveCamera({
+                centerY: this.scrollTopElToPage(elScrollTop + wbHeight / 2),
+                animationMode: "immediately" as AnimationMode,
             });
-        }
+
+            this.setScrollbarHeight(
+                wbHeight / ((wbWidth / pageWidth) * pageHeight)
+            );
+            this.$scrollbar.style.transform = `translateY(${
+                (pageScrollTop / pageHeight) * wbHeight
+            }px)`;
+
+            updatePageIndex();
+        });
     }
 
     protected setupWhiteboardCamera(): void {
-        const fixCamera = this.debounce(() => {
-            if (this.$pages) {
-                this.elScrollTo(this.$pages.scrollTop);
-            }
-        }, 100);
-
         this.sideEffect.add(() => {
-            const handleSizeUpdate = (): void => {
-                if (this.pages.length > 0) {
-                    const { width, height } =
-                        this.viewer.$content.getBoundingClientRect();
-                    if (width > 0 && height > 0) {
-                        // @FIXME calc originY on size changes
-                        this.whiteboardView.moveCameraToContain({
-                            originX: 0,
-                            originY: this.$pages
-                                ? this.$pages.scrollTop *
-                                  (this.pages[0].width / width)
-                                : 0,
-                            width: this.pages[0].width,
-                            height: (this.pages[0].width / width) * height,
-                            animationMode: "immediately" as AnimationMode,
-                        });
-                        fixCamera();
-                    }
+            const handleSizeUpdate = ({ width, height }: Size): void => {
+                if (width > 0 && height > 0) {
+                    const pageWidth = this.pagesSize.width;
+                    const ratio = pageWidth / width;
+                    this.whiteboardView.moveCameraToContain({
+                        originX: 0,
+                        originY: this.$pages.scrollTop * ratio,
+                        width: pageWidth,
+                        height: height * ratio,
+                        animationMode: "immediately" as AnimationMode,
+                    });
                 }
@@ -328,7 +391,7 @@ };
 
-    protected debounce(
-        fn: () => void,
+    protected debounce<ArgumentsType extends unknown[], ReturnType>(
+        fn: (...args: ArgumentsType) => ReturnType,
         wait: number,
         disposerID?: string
-    ): () => void {
+    ): DebouncedFunction<ArgumentsType, ReturnType | undefined> {
         const dFn = debounceFn(fn, { wait });
@@ -348,2 +411,42 @@ this.sideEffect.addDisposer(() => dFn.cancel(), disposerID);
     protected sideEffect = new SideEffectManager();
+
+    protected scrollbarHeight = SCROLLBAR_MIN_HEIGHT;
+
+    protected setScrollbarHeight(elScrollbarHeight: number): void {
+        elScrollbarHeight = clamp(
+            elScrollbarHeight,
+            SCROLLBAR_MIN_HEIGHT,
+            this.whiteboardView.size.height
+        );
+        if (this.scrollbarHeight !== elScrollbarHeight) {
+            this.scrollbarHeight = elScrollbarHeight;
+            this.$scrollbar.style.height = `${elScrollbarHeight}px`;
+        }
+    }
+
+    protected handleSwipeScroll(ev: TouchEvent): void {
+        const startTop = this.scrollTopPageToEl(this.pageScrollTop);
+        const elScrollHeight =
+            (this.whiteboardView.size.width / this.pagesSize.width) *
+            this.pagesSize.height;
+        let { clientY: startY } = ev.touches[0];
+
+        const tracking = (ev: TouchEvent): void => {
+            const { clientY } = ev.touches[0];
+            this.elScrollTo(
+                clamp(startTop + (startY - clientY), 0, elScrollHeight)
+            );
+        };
+
+        const trackEnd = (ev: TouchEvent): void => {
+            ({ clientY: startY } = ev.touches[0]);
+            window.removeEventListener("touchmove", tracking, true);
+            window.removeEventListener("touchend", trackEnd, true);
+            window.removeEventListener("touchcancel", trackEnd, true);
+        };
+
+        window.addEventListener("touchmove", tracking, true);
+        window.addEventListener("touchend", trackEnd, true);
+        window.addEventListener("touchcancel", trackEnd, true);
+    }
 }

src/utils/helpers.ts

 export function clamp(value: number, min: number, max: number): number {
     return Math.min(Math.max(value, min), max);
 }
+
+export function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch {
+    return (ev as TouchEvent).touches
+        ? (ev as TouchEvent).touches[0]
+        : (ev as MouseEvent);
+}
+
+export function preventEvent(ev: Event): void {
+    ev.stopPropagation();
+    if (ev.cancelable) {
+        ev.preventDefault();
+    }
+}

No alert changes

Improved metrics

Total package byte prevSize

333125

increased by6.69%

Number of package files

32

increased by3.23%

Lines of code

1479

increased by6.79%

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes