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

Comparing version 0.2.9 to 0.3.0

dist/DocsViewer/index.d.ts

 import type { ReadonlyTeleBox } from "@netless/window-manager";
-import { SideEffectManager } from "side-effect-manager";
-export interface DocsViewerPage {
-    src: string;
-    height: number;
-    width: number;
-    thumbnail?: string;
+import { type ReadonlyVal, Val, type ValEnhancedResult } from "value-enhancer";
+import type { DocsViewerEventData, DocsViewerPage } from "./typings";
+import { Preview } from "./Preview";
+import { Footer } from "./Footer";
+import { Remitter } from "remitter";
+export * from "./typings";
+export declare type ValConfig = {
+    pages: Val<DocsViewerPage[]>;
+};
+export interface DocsViewer extends ValEnhancedResult<ValConfig> {
 }
 export interface DocsViewerConfig {
-    readonly: boolean;
+    readonly$: ReadonlyVal<boolean>;
+    pagesIndex$: ReadonlyVal<number>;
+    pages?: DocsViewerPage[];
     box: ReadonlyTeleBox;
-    pages: DocsViewerPage[];
-    onNewPageIndex: (index: number) => void;
-    onPlay?: () => void;
+    playable: boolean;
 }
 export declare class DocsViewer {
-    constructor({ readonly, box, pages, onNewPageIndex, onPlay }: DocsViewerConfig);
-    protected readonly: boolean;
-    protected pages: DocsViewerPage[];
-    protected box: ReadonlyTeleBox;
-    protected onNewPageIndex: (index: number) => void;
-    protected onPlay?: () => void;
-    $content: HTMLElement;
-    $preview: HTMLElement;
-    $previewMask: HTMLElement;
-    $footer: HTMLElement;
-    $pageNumberInput: HTMLInputElement;
-    pageIndex: number;
-    mount(): void;
-    unmount(): void;
-    setReadonly(readonly: boolean): void;
+    constructor({ readonly$, pagesIndex$, box, pages, playable }: DocsViewerConfig);
+    preview: Preview;
+    footer: Footer;
     destroy(): void;
-    setPageIndex(pageIndex: number): void;
-    setSmallBox(isSmallBox: boolean): void;
-    render(): HTMLElement;
-    protected renderContent(): HTMLElement;
-    protected renderPreview(): HTMLElement;
-    protected renderPreviewMask(): HTMLElement;
-    protected renderFooter(): HTMLElement;
-    protected renderFooterBtn(className: string, $icon: SVGElement, $iconActive?: SVGElement): HTMLButtonElement;
-    protected togglePreview(isShowPreview?: boolean): void;
-    protected wrapClassName(className: string): string;
-    protected namespace: string;
-    protected isShowPreview: boolean;
-    protected isSmallBox: boolean;
-    protected sideEffect: SideEffectManager;
+    private wrapClassName;
+    readonly namespace = "netless-app-docs-viewer";
+    private readonly sideEffect;
+    readonly events: Remitter<DocsViewerEventData>;
 }

dist/DynamicDocsViewer/index.d.ts

@@ -1,8 +0,11 @@
-import type { ReadonlyTeleBox, View, Displayer, AppContext } from "@netless/window-manager";
+import type { ReadonlyTeleBox, AppContext, WhiteBoardView } from "@netless/window-manager";
 import { SideEffectManager } from "side-effect-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import { Val } from "value-enhancer";
 import type { DocsViewerPage } from "../DocsViewer";
 import { DocsViewer } from "../DocsViewer";
 export interface DynamicDocsViewerConfig {
+    readonly$: ReadonlyVal<boolean>;
     context: AppContext;
-    whiteboardView: View;
+    whiteboard: WhiteBoardView;
     box: ReadonlyTeleBox;
@@ -12,3 +15,4 @@ pages: DocsViewerPage[];
 export declare class DynamicDocsViewer {
-    constructor({ context, whiteboardView, box, pages }: DynamicDocsViewerConfig);
+    pagesIndex$: Val<number, boolean>;
+    constructor({ readonly$, context, whiteboard, box, pages }: DynamicDocsViewerConfig);
     protected sideEffect: SideEffectManager;
@@ -18,21 +22,10 @@ protected context: AppContext;
     protected box: ReadonlyTeleBox;
-    protected whiteboardView: View;
-    protected displayer: Displayer;
+    protected whiteboard: WhiteBoardView;
     viewer: DocsViewer;
-    $mask: HTMLElement;
-    $whiteboardView: HTMLDivElement;
-    mount(): this;
-    unmount(): this;
     destroy(): void;
-    getPageIndex(): number;
-    jumpToPage(index: number, reset?: boolean): void;
-    onPlayPPT: () => void;
+    nextPage(): void;
+    prevPage(): void;
+    jumpToPage(pageIndex: number, isUserAction?: boolean): void;
     render(): void;
-    protected renderMask(): HTMLElement;
-    protected renderWhiteboardView(): HTMLDivElement;
-    protected _scaleDocsToFitImpl: () => void;
-    protected _scaleDocsToFitDebounced: () => void;
-    protected scaleDocsToFit: () => void;
-    protected onNewPageIndex: (index: number) => void;
     protected wrapClassName(className: string): string;
 }

dist/main.cjs.js

@@ -1,4 +0,3 @@
-"use strict";var _t=Object.defineProperty,$t=Object.defineProperties;var It=Object.getOwnPropertyDescriptors;var xe=Object.getOwnPropertySymbols;var Nt=Object.prototype.hasOwnProperty,kt=Object.prototype.propertyIsEnumerable;var ye=(t,e,s)=>e in t?_t(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,Z=(t,e)=>{for(var s in e||(e={}))Nt.call(e,s)&&ye(t,s,e[s]);if(xe)for(var s of xe(e))kt.call(e,s)&&ye(t,s,e[s]);return t},Q=(t,e)=>$t(t,It(e));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var Rt=`.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;color:#191919}.netless-app-docs-viewer-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.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;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-docs-viewer-footer-btn:hover{background:transparent!important}}.netless-app-docs-viewer-footer-btn>svg{width:100%;height:100%}.netless-app-docs-viewer-footer-btn>svg:nth-of-type(2){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(2){display:initial}.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;white-space:nowrap;word-break:keep-all}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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-readonly.netless-app-docs-viewer-float-footer{display:none}.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:active,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:focus,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-docs-viewer-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-docs-viewer-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-docs-viewer-preview{background:rgba(50,50,50,.9)}.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,.4);box-shadow:1px 1px 8px #ffffffb3;opacity:0;transition:background .4s,opacity .4s 3s,transform .2s;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.6);opacity:1;transition:background .4s,opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.page-renderer-pages-container{position:relative;overflow:hidden}.page-renderer-page{position:absolute;top:0;left:0;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-pages-container.is-hwa .page-renderer-page{will-change:transform}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.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,.netless-app-docs-viewer-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-dynamic-wb-view .cursor-clicker .ppt-event-source{cursor:pointer}
-`;const Ot=(t,e,s,i)=>{if(s==="length"||s==="prototype"||s==="arguments"||s==="caller")return;const r=Object.getOwnPropertyDescriptor(t,s),o=Object.getOwnPropertyDescriptor(e,s);!Lt(r,o)&&i||Object.defineProperty(t,s,o)},Lt=function(t,e){return t===void 0||t.configurable||t.writable===e.writable&&t.enumerable===e.enumerable&&t.configurable===e.configurable&&(t.writable||t.value===e.value)},Pt=(t,e)=>{const s=Object.getPrototypeOf(e);s!==Object.getPrototypeOf(t)&&Object.setPrototypeOf(t,s)},zt=(t,e)=>`/* Wrapped ${t}*/
-${e}`,At=Object.getOwnPropertyDescriptor(Function.prototype,"toString"),Ht=Object.getOwnPropertyDescriptor(Function.prototype.toString,"name"),Mt=(t,e,s)=>{const i=s===""?"":`with ${s.trim()}() `,r=zt.bind(null,i,e.toString());Object.defineProperty(r,"name",Ht),Object.defineProperty(t,"toString",Q(Z({},At),{value:r}))};function Vt(t,e,{ignoreNonConfigurable:s=!1}={}){const{name:i}=t;for(const r of Reflect.ownKeys(e))Ot(t,e,r,s);return Pt(t,e),Mt(t,e,i),t}const Bt=(t,e={})=>{if(typeof t!="function")throw new TypeError(`Expected the first argument to be a function, got \`${typeof t}\``);const{wait:s=0,maxWait:i=Number.Infinity,before:r=!1,after:o=!0}=e;if(!r&&!o)throw new Error("Both `before` and `after` are false, function wouldn't be called.");let n,a,c;const l=function(...h){const d=this,G=()=>{n=void 0,a&&(clearTimeout(a),a=void 0),o&&(c=t.apply(d,h))},X=()=>{a=void 0,n&&(clearTimeout(n),n=void 0),o&&(c=t.apply(d,h))},q=r&&!n;return clearTimeout(n),n=setTimeout(G,s),i>0&&i!==Number.Infinity&&!a&&(a=setTimeout(X,i)),q&&(c=t.apply(d,h)),c};return Vt(l,t),l.cancel=()=>{n&&(clearTimeout(n),n=void 0),a&&(clearTimeout(a),a=void 0)},l},Ve="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Dt=Ve.length,Ee=Array(20),$=()=>{for(let t=0;t<20;t++)Ee[t]=Ve.charAt(Math.random()*Dt);return Ee.join("")};class W{constructor(){this.disposers=new Map}add(e,s=$()){return this.flush(s),this.disposers.set(s,e()),s}addDisposer(e,s=$()){return this.flush(s),this.disposers.set(s,e),s}addEventListener(e,s,i,r,o=$()){return this.add(()=>(e.addEventListener(s,i,r),()=>e.removeEventListener(s,i,r)),o),o}setTimeout(e,s,i=$()){return this.add(()=>{const r=window.setTimeout(()=>{this.remove(i),e()},s);return()=>window.clearTimeout(r)},i)}setInterval(e,s,i=$()){return this.add(()=>{const r=window.setInterval(e,s);return()=>window.clearInterval(r)},i)}remove(e){const s=this.disposers.get(e);return this.disposers.delete(e),s}flush(e){const s=this.remove(e);if(s)try{s()}catch(i){console.error(i)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(s){console.error(s)}}),this.disposers.clear()}}var b=[],Wt=function(){return b.some(function(t){return t.activeTargets.length>0})},Ft=function(){return b.some(function(t){return t.skippedTargets.length>0})},Te="ResizeObserver loop completed with undelivered notifications.",Ut=function(){var t;typeof ErrorEvent=="function"?t=new ErrorEvent("error",{message:Te}):(t=document.createEvent("Event"),t.initEvent("error",!1,!1),t.message=Te),window.dispatchEvent(t)},k;(function(t){t.BORDER_BOX="border-box",t.CONTENT_BOX="content-box",t.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"})(k||(k={}));var m=function(t){return Object.freeze(t)},Yt=function(){function t(e,s){this.inlineSize=e,this.blockSize=s,m(this)}return t}(),Be=function(){function t(e,s,i,r){return this.x=e,this.y=s,this.width=i,this.height=r,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,m(this)}return t.prototype.toJSON=function(){var e=this,s=e.x,i=e.y,r=e.top,o=e.right,n=e.bottom,a=e.left,c=e.width,l=e.height;return{x:s,y:i,top:r,right:o,bottom:n,left:a,width:c,height:l}},t.fromRect=function(e){return new t(e.x,e.y,e.width,e.height)},t}(),re=function(t){return t instanceof SVGElement&&"getBBox"in t},De=function(t){if(re(t)){var e=t.getBBox(),s=e.width,i=e.height;return!s&&!i}var r=t,o=r.offsetWidth,n=r.offsetHeight;return!(o||n||t.getClientRects().length)},Ce=function(t){var e,s;if(t instanceof Element)return!0;var i=(s=(e=t)===null||e===void 0?void 0:e.ownerDocument)===null||s===void 0?void 0:s.defaultView;return!!(i&&t instanceof i.Element)},jt=function(t){switch(t.tagName){case"INPUT":if(t.type!=="image")break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return!0}return!1},N=typeof window!="undefined"?window:{},A=new WeakMap,_e=/auto|scroll/,Gt=/^tb|vertical/,Xt=/msie|trident/i.test(N.navigator&&N.navigator.userAgent),u=function(t){return parseFloat(t||"0")},y=function(t,e,s){return t===void 0&&(t=0),e===void 0&&(e=0),s===void 0&&(s=!1),new Yt((s?e:t)||0,(s?t:e)||0)},$e=m({devicePixelContentBoxSize:y(),borderBoxSize:y(),contentBoxSize:y(),contentRect:new Be(0,0,0,0)}),We=function(t,e){if(e===void 0&&(e=!1),A.has(t)&&!e)return A.get(t);if(De(t))return A.set(t,$e),$e;var s=getComputedStyle(t),i=re(t)&&t.ownerSVGElement&&t.getBBox(),r=!Xt&&s.boxSizing==="border-box",o=Gt.test(s.writingMode||""),n=!i&&_e.test(s.overflowY||""),a=!i&&_e.test(s.overflowX||""),c=i?0:u(s.paddingTop),l=i?0:u(s.paddingRight),h=i?0:u(s.paddingBottom),d=i?0:u(s.paddingLeft),G=i?0:u(s.borderTopWidth),X=i?0:u(s.borderRightWidth),q=i?0:u(s.borderBottomWidth),xt=i?0:u(s.borderLeftWidth),ve=d+l,we=c+h,J=xt+X,K=G+q,be=a?t.offsetHeight-K-t.clientHeight:0,me=n?t.offsetWidth-J-t.clientWidth:0,yt=r?ve+J:0,Et=r?we+K:0,P=i?i.width:u(s.width)-yt-me,z=i?i.height:u(s.height)-Et-be,Tt=P+ve+me+J,Ct=z+we+be+K,Se=m({devicePixelContentBoxSize:y(Math.round(P*devicePixelRatio),Math.round(z*devicePixelRatio),o),borderBoxSize:y(Tt,Ct,o),contentBoxSize:y(P,z,o),contentRect:new Be(d,c,P,z)});return A.set(t,Se),Se},Fe=function(t,e,s){var i=We(t,s),r=i.borderBoxSize,o=i.contentBoxSize,n=i.devicePixelContentBoxSize;switch(e){case k.DEVICE_PIXEL_CONTENT_BOX:return n;case k.BORDER_BOX:return r;default:return o}},qt=function(){function t(e){var s=We(e);this.target=e,this.contentRect=s.contentRect,this.borderBoxSize=m([s.borderBoxSize]),this.contentBoxSize=m([s.contentBoxSize]),this.devicePixelContentBoxSize=m([s.devicePixelContentBoxSize])}return t}(),Ue=function(t){if(De(t))return 1/0;for(var e=0,s=t.parentNode;s;)e+=1,s=s.parentNode;return e},Jt=function(){var t=1/0,e=[];b.forEach(function(n){if(n.activeTargets.length!==0){var a=[];n.activeTargets.forEach(function(l){var h=new qt(l.target),d=Ue(l.target);a.push(h),l.lastReportedSize=Fe(l.target,l.observedBox),d<t&&(t=d)}),e.push(function(){n.callback.call(n.observer,a,n.observer)}),n.activeTargets.splice(0,n.activeTargets.length)}});for(var s=0,i=e;s<i.length;s++){var r=i[s];r()}return t},Ie=function(t){b.forEach(function(s){s.activeTargets.splice(0,s.activeTargets.length),s.skippedTargets.splice(0,s.skippedTargets.length),s.observationTargets.forEach(function(r){r.isActive()&&(Ue(r.target)>t?s.activeTargets.push(r):s.skippedTargets.push(r))})})},Kt=function(){var t=0;for(Ie(t);Wt();)t=Jt(),Ie(t);return Ft()&&Ut(),t>0},ee,Ye=[],Zt=function(){return Ye.splice(0).forEach(function(t){return t()})},Qt=function(t){if(!ee){var e=0,s=document.createTextNode(""),i={characterData:!0};new MutationObserver(function(){return Zt()}).observe(s,i),ee=function(){s.textContent=""+(e?e--:e++)}}Ye.push(t),ee()},es=function(t){Qt(function(){requestAnimationFrame(t)})},V=0,ts=function(){return!!V},ss=250,is={attributes:!0,characterData:!0,childList:!0,subtree:!0},Ne=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],ke=function(t){return t===void 0&&(t=0),Date.now()+t},te=!1,rs=function(){function t(){var e=this;this.stopped=!0,this.listener=function(){return e.schedule()}}return t.prototype.run=function(e){var s=this;if(e===void 0&&(e=ss),!te){te=!0;var i=ke(e);es(function(){var r=!1;try{r=Kt()}finally{if(te=!1,e=i-ke(),!ts())return;r?s.run(1e3):e>0?s.run(e):s.start()}})}},t.prototype.schedule=function(){this.stop(),this.run()},t.prototype.observe=function(){var e=this,s=function(){return e.observer&&e.observer.observe(document.body,is)};document.body?s():N.addEventListener("DOMContentLoaded",s)},t.prototype.start=function(){var e=this;this.stopped&&(this.stopped=!1,this.observer=new MutationObserver(this.listener),this.observe(),Ne.forEach(function(s){return N.addEventListener(s,e.listener,!0)}))},t.prototype.stop=function(){var e=this;this.stopped||(this.observer&&this.observer.disconnect(),Ne.forEach(function(s){return N.removeEventListener(s,e.listener,!0)}),this.stopped=!0)},t}(),se=new rs,Re=function(t){!V&&t>0&&se.start(),V+=t,!V&&se.stop()},os=function(t){return!re(t)&&!jt(t)&&getComputedStyle(t).display==="inline"},ns=function(){function t(e,s){this.target=e,this.observedBox=s||k.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}return t.prototype.isActive=function(){var e=Fe(this.target,this.observedBox,!0);return os(this.target)&&(this.lastReportedSize=e),this.lastReportedSize.inlineSize!==e.inlineSize||this.lastReportedSize.blockSize!==e.blockSize},t}(),as=function(){function t(e,s){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=e,this.callback=s}return t}(),H=new WeakMap,Oe=function(t,e){for(var s=0;s<t.length;s+=1)if(t[s].target===e)return s;return-1},M=function(){function t(){}return t.connect=function(e,s){var i=new as(e,s);H.set(e,i)},t.observe=function(e,s,i){var r=H.get(e),o=r.observationTargets.length===0;Oe(r.observationTargets,s)<0&&(o&&b.push(r),r.observationTargets.push(new ns(s,i&&i.box)),Re(1),se.schedule())},t.unobserve=function(e,s){var i=H.get(e),r=Oe(i.observationTargets,s),o=i.observationTargets.length===1;r>=0&&(o&&b.splice(b.indexOf(i),1),i.observationTargets.splice(r,1),Re(-1))},t.disconnect=function(e){var s=this,i=H.get(e);i.observationTargets.slice().forEach(function(r){return s.unobserve(e,r.target)}),i.activeTargets.splice(0,i.activeTargets.length)},t}(),cs=function(){function t(e){if(arguments.length===0)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if(typeof e!="function")throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");M.connect(this,e)}return t.prototype.observe=function(e,s){if(arguments.length===0)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Ce(e))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");M.observe(this,e,s)},t.prototype.unobserve=function(e){if(arguments.length===0)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Ce(e))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");M.unobserve(this,e)},t.prototype.disconnect=function(){M.disconnect(this)},t.toString=function(){return"function ResizeObserver () { [polyfill code] }"},t}();function ls(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-sidebar`),s.setAttribute("viewBox","0 0 64 64");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M50 8H14c-3.309 0-6 2.691-6 6v36c0 3.309 2.691 6 6 6h36c3.309 0 6-2.691 6-6V14c0-3.309-2.691-6-6-6zM12 50V14c0-1.103.897-2 2-2h8v40h-8c-1.103 0-2-.897-2-2zm40 0c0 1.103-.897 2-2 2H26V12h24c1.103 0 2 .897 2 2z"),s.appendChild(i),s}function hs(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-left`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M177.81 249.959L337.473 90.295c2.722-2.865 2.651-7.378-.143-10.1-2.793-2.65-7.163-2.65-9.956 0l-164.75 164.75c-2.793 2.793-2.793 7.306 0 10.1l164.75 164.75c2.865 2.722 7.378 2.65 10.099-.143 2.651-2.794 2.651-7.163 0-9.957L177.809 249.959z"),s.appendChild(i),s}function ds(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-right`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M322.19 250.041L162.527 409.705c-2.722 2.865-2.651 7.378.143 10.1 2.793 2.65 7.163 2.65 9.956 0l164.75-164.75c2.793-2.793 2.793-7.306 0-10.1l-164.75-164.75c-2.865-2.722-7.378-2.65-10.099.143-2.651 2.794-2.651 7.163 0 9.957l159.664 159.736z"),s.appendChild(i),s}function ps(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-play`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M418.158 257.419L174.663 413.33c-6.017 3.919-15.708 3.772-21.291-.29-2.791-2.018-4.295-4.483-4.295-7.084V94.109c0-5.65 6.883-10.289 15.271-10.289 4.298 0 8.391 1.307 11.181 3.332l242.629 155.484c6.016 3.917 6.451 10.292.649 14.491-.216.154-.432.154-.649.292zM170.621 391.288l223.116-141.301L170.71 107.753l-.089 283.535z"),s.appendChild(i),s}function us(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-pause`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M312.491 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261zM165.257 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261z"),s.appendChild(i),s}const S=typeof window!="undefined",je=S&&!("onscroll"in window)||typeof navigator!="undefined"&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),Ge=S&&"IntersectionObserver"in window,Xe=S&&"classList"in document.createElement("p"),qe=S&&window.devicePixelRatio>1,gs={elements_selector:".lazy",container:je||S?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},Je=t=>Object.assign({},gs,t),Le=function(t,e){let s;const i="LazyLoad::Initialized",r=new t(e);try{s=new CustomEvent(i,{detail:{instance:r}})}catch{s=document.createEvent("CustomEvent"),s.initCustomEvent(i,!1,!1,{instance:r})}window.dispatchEvent(s)},fs=(t,e)=>{if(!!e)if(!e.length)Le(t,e);else for(let s=0,i;i=e[s];s+=1)Le(t,i)},f="src",oe="srcset",ne="sizes",Ke="poster",R="llOriginalAttrs",Ze="data",ae="loading",Qe="loaded",et="applied",vs="entered",ce="error",tt="native",st="data-",it="ll-status",p=(t,e)=>t.getAttribute(st+e),ws=(t,e,s)=>{var i=st+e;if(s===null){t.removeAttribute(i);return}t.setAttribute(i,s)},O=t=>p(t,it),x=(t,e)=>ws(t,it,e),F=t=>x(t,null),le=t=>O(t)===null,bs=t=>O(t)===ae,ms=t=>O(t)===ce,he=t=>O(t)===tt,Ss=[ae,Qe,et,ce],xs=t=>Ss.indexOf(O(t))>=0,w=(t,e,s,i)=>{if(!!t){if(i!==void 0){t(e,s,i);return}if(s!==void 0){t(e,s);return}t(e)}},_=(t,e)=>{if(Xe){t.classList.add(e);return}t.className+=(t.className?" ":"")+e},g=(t,e)=>{if(Xe){t.classList.remove(e);return}t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},ys=t=>{t.llTempImage=document.createElement("IMG")},Es=t=>{delete t.llTempImage},rt=t=>t.llTempImage,U=(t,e)=>{if(!e)return;const s=e._observer;!s||s.unobserve(t)},Ts=t=>{t.disconnect()},Cs=(t,e,s)=>{e.unobserve_entered&&U(t,s)},de=(t,e)=>{!t||(t.loadingCount+=e)},_s=t=>{!t||(t.toLoadCount-=1)},ot=(t,e)=>{!t||(t.toLoadCount=e)},$s=t=>t.loadingCount>0,Is=t=>t.toLoadCount>0,nt=t=>{let e=[];for(let s=0,i;i=t.children[s];s+=1)i.tagName==="SOURCE"&&e.push(i);return e},pe=(t,e)=>{const s=t.parentNode;if(!s||s.tagName!=="PICTURE")return;nt(s).forEach(e)},at=(t,e)=>{nt(t).forEach(e)},Y=[f],ct=[f,Ke],B=[f,oe,ne],lt=[Ze],j=t=>!!t[R],ht=t=>t[R],dt=t=>delete t[R],E=(t,e)=>{if(j(t))return;const s={};e.forEach(i=>{s[i]=t.getAttribute(i)}),t[R]=s},Ns=t=>{j(t)||(t[R]={backgroundImage:t.style.backgroundImage})},ks=(t,e,s)=>{if(!s){t.removeAttribute(e);return}t.setAttribute(e,s)},T=(t,e)=>{if(!j(t))return;const s=ht(t);e.forEach(i=>{ks(t,i,s[i])})},Rs=t=>{if(!j(t))return;const e=ht(t);t.style.backgroundImage=e.backgroundImage},Os=(t,e,s)=>{_(t,e.class_applied),x(t,et),s&&(e.unobserve_completed&&U(t,e),w(e.callback_applied,t,s))},pt=(t,e,s)=>{_(t,e.class_loading),x(t,ae),s&&(de(s,1),w(e.callback_loading,t,s))},v=(t,e,s)=>{!s||t.setAttribute(e,s)},Pe=(t,e)=>{v(t,ne,p(t,e.data_sizes)),v(t,oe,p(t,e.data_srcset)),v(t,f,p(t,e.data_src))},Ls=(t,e)=>{pe(t,s=>{E(s,B),Pe(s,e)}),E(t,B),Pe(t,e)},Ps=(t,e)=>{E(t,Y),v(t,f,p(t,e.data_src))},zs=(t,e)=>{at(t,s=>{E(s,Y),v(s,f,p(s,e.data_src))}),E(t,ct),v(t,Ke,p(t,e.data_poster)),v(t,f,p(t,e.data_src)),t.load()},As=(t,e)=>{E(t,lt),v(t,Ze,p(t,e.data_src))},Hs=(t,e,s)=>{const i=p(t,e.data_bg),r=p(t,e.data_bg_hidpi),o=qe&&r?r:i;!o||(t.style.backgroundImage=`url("${o}")`,rt(t).setAttribute(f,o),pt(t,e,s))},Ms=(t,e,s)=>{const i=p(t,e.data_bg_multi),r=p(t,e.data_bg_multi_hidpi),o=qe&&r?r:i;!o||(t.style.backgroundImage=o,Os(t,e,s))},ut={IMG:Ls,IFRAME:Ps,VIDEO:zs,OBJECT:As},Vs=(t,e)=>{const s=ut[t.tagName];!s||s(t,e)},Bs=(t,e,s)=>{const i=ut[t.tagName];!i||(i(t,e),pt(t,e,s))},Ds=["IMG","IFRAME","VIDEO","OBJECT"],Ws=t=>Ds.indexOf(t.tagName)>-1,gt=(t,e)=>{e&&!$s(e)&&!Is(e)&&w(t.callback_finish,e)},ze=(t,e,s)=>{t.addEventListener(e,s),t.llEvLisnrs[e]=s},Fs=(t,e,s)=>{t.removeEventListener(e,s)},ue=t=>!!t.llEvLisnrs,Us=(t,e,s)=>{ue(t)||(t.llEvLisnrs={});const i=t.tagName==="VIDEO"?"loadeddata":"load";ze(t,i,e),ze(t,"error",s)},ie=t=>{if(!ue(t))return;const e=t.llEvLisnrs;for(let s in e){const i=e[s];Fs(t,s,i)}delete t.llEvLisnrs},ft=(t,e,s)=>{Es(t),de(s,-1),_s(s),g(t,e.class_loading),e.unobserve_completed&&U(t,s)},Ys=(t,e,s,i)=>{const r=he(e);ft(e,s,i),_(e,s.class_loaded),x(e,Qe),w(s.callback_loaded,e,i),r||gt(s,i)},js=(t,e,s,i)=>{const r=he(e);ft(e,s,i),_(e,s.class_error),x(e,ce),w(s.callback_error,e,i),r||gt(s,i)},ge=(t,e,s)=>{const i=rt(t)||t;if(ue(i))return;Us(i,n=>{Ys(n,t,e,s),ie(i)},n=>{js(n,t,e,s),ie(i)})},Gs=(t,e,s)=>{ys(t),ge(t,e,s),Ns(t),Hs(t,e,s),Ms(t,e,s)},Xs=(t,e,s)=>{ge(t,e,s),Bs(t,e,s)},fe=(t,e,s)=>{Ws(t)?Xs(t,e,s):Gs(t,e,s)},qs=(t,e,s)=>{t.setAttribute("loading","lazy"),ge(t,e,s),Vs(t,e),x(t,tt)},Ae=t=>{t.removeAttribute(f),t.removeAttribute(oe),t.removeAttribute(ne)},Js=t=>{pe(t,e=>{Ae(e)}),Ae(t)},vt=t=>{pe(t,e=>{T(e,B)}),T(t,B)},Ks=t=>{at(t,e=>{T(e,Y)}),T(t,ct),t.load()},Zs=t=>{T(t,Y)},Qs=t=>{T(t,lt)},ei={IMG:vt,IFRAME:Zs,VIDEO:Ks,OBJECT:Qs},ti=t=>{const e=ei[t.tagName];if(!e){Rs(t);return}e(t)},si=(t,e)=>{le(t)||he(t)||(g(t,e.class_entered),g(t,e.class_exited),g(t,e.class_applied),g(t,e.class_loading),g(t,e.class_loaded),g(t,e.class_error))},ii=(t,e)=>{ti(t),si(t,e),F(t),dt(t)},ri=(t,e,s,i)=>{!s.cancel_on_exit||!bs(t)||t.tagName==="IMG"&&(ie(t),Js(t),vt(t),g(t,s.class_loading),de(i,-1),F(t),w(s.callback_cancel,t,e,i))},oi=(t,e,s,i)=>{const r=xs(t);x(t,vs),_(t,s.class_entered),g(t,s.class_exited),Cs(t,s,i),w(s.callback_enter,t,e,i),!r&&fe(t,s,i)},ni=(t,e,s,i)=>{le(t)||(_(t,s.class_exited),ri(t,e,s,i),w(s.callback_exit,t,e,i))},ai=["IMG","IFRAME","VIDEO"],wt=t=>t.use_native&&"loading"in HTMLImageElement.prototype,ci=(t,e,s)=>{t.forEach(i=>{ai.indexOf(i.tagName)!==-1&&qs(i,e,s)}),ot(s,0)},li=t=>t.isIntersecting||t.intersectionRatio>0,hi=t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}),di=(t,e,s)=>{t.forEach(i=>li(i)?oi(i.target,i,e,s):ni(i.target,i,e,s))},pi=(t,e)=>{e.forEach(s=>{t.observe(s)})},ui=(t,e)=>{Ts(t),pi(t,e)},gi=(t,e)=>{!Ge||wt(t)||(e._observer=new IntersectionObserver(s=>{di(s,t,e)},hi(t)))},bt=t=>Array.prototype.slice.call(t),D=t=>t.container.querySelectorAll(t.elements_selector),fi=t=>bt(t).filter(le),vi=t=>ms(t),wi=t=>bt(t).filter(vi),He=(t,e)=>fi(t||D(e)),bi=(t,e)=>{wi(D(t)).forEach(i=>{g(i,t.class_error),F(i)}),e.update()},mi=(t,e)=>{!S||window.addEventListener("online",()=>{bi(t,e)})},L=function(t,e){const s=Je(t);this._settings=s,this.loadingCount=0,gi(s,this),mi(s,this),this.update(e)};L.prototype={update:function(t){const e=this._settings,s=He(t,e);if(ot(this,s.length),je||!Ge){this.loadAll(s);return}if(wt(e)){ci(s,e,this);return}ui(this._observer,s)},destroy:function(){this._observer&&this._observer.disconnect(),D(this._settings).forEach(t=>{dt(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;He(t,e).forEach(i=>{U(i,this),fe(i,e,this)})},restoreAll:function(){const t=this._settings;D(t).forEach(e=>{ii(e,t)})}};L.load=(t,e)=>{const s=Je(e);fe(t,s)};L.resetStatus=t=>{F(t)};S&&fs(L,window.lazyLoadOptions);class mt{constructor({readonly:e,box:s,pages:i,onNewPageIndex:r,onPlay:o}){if(this.pageIndex=0,this.namespace="netless-app-docs-viewer",this.isShowPreview=!1,this.isSmallBox=!1,this.sideEffect=new W,i.length<=0)throw new Error("[DocsViewer] Empty pages.");this.readonly=e,this.box=s,this.pages=i,this.onNewPageIndex=r,this.onPlay=o,this.render()}mount(){this.box.mountContent(this.$content),this.box.mountFooter(this.$footer),this.sideEffect.add(()=>{const e=new L({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.flushAll(),this.unmount()}setPageIndex(e){Number.isNaN(e)||(this.pageIndex=e,this.$pageNumberInput.value=String(e+1))}setSmallBox(e){this.isSmallBox!==e&&(this.isSmallBox=e,this.$footer.classList.toggle(this.wrapClassName("float-footer"),e))}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 s=this.wrapClassName("preview-page"),i=this.wrapClassName("preview-page-name");this.pages.forEach((r,o)=>{var d;const n=(d=r.thumbnail)!=null?d:r.src.startsWith("ppt")?void 0:r.src;if(!n)return;const a=String(o),c=document.createElement("a");c.className=s+" "+this.wrapClassName(`preview-page-${o}`),c.setAttribute("href","#"),c.dataset.pageIndex=a;const l=document.createElement("span");l.className=i,l.textContent=String(o+1),l.dataset.pageIndex=a;const h=document.createElement("img");h.width=r.width,h.height=r.height,h.dataset.src=n,h.dataset.pageIndex=a,c.appendChild(h),c.appendChild(l),e.appendChild(c)}),this.sideEffect.addEventListener(e,"click",r=>{var n;if(this.readonly)return;const o=(n=r.target.dataset)==null?void 0:n.pageIndex;o&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation(),this.onNewPageIndex(Number(o)),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");if(e.className=this.wrapClassName("footer"),this.$footer=e,this.readonly&&e.classList.add(this.wrapClassName("readonly")),this.isSmallBox&&e.classList.add(this.wrapClassName("float-footer")),this.pages.some(c=>c.thumbnail||!c.src.startsWith("ppt"))){const c=this.renderFooterBtn("btn-sidebar",ls(this.namespace));this.sideEffect.addEventListener(c,"click",()=>{this.readonly||this.togglePreview()}),this.$footer.appendChild(c)}const s=document.createElement("div");s.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back",hs(this.namespace));if(this.sideEffect.addEventListener(i,"click",()=>{this.readonly||this.onNewPageIndex(this.pageIndex-1)}),s.appendChild(i),this.onPlay){const c=this.renderFooterBtn("btn-page-play",ps(this.namespace),us(this.namespace)),l=()=>{this.sideEffect.setTimeout(()=>{c.classList.toggle(this.wrapClassName("footer-btn-playing"),!1)},500,"returnPlay")};this.sideEffect.addEventListener(c,"click",()=>{this.readonly||(c.classList.toggle(this.wrapClassName("footer-btn-playing"),!0),this.onPlay&&this.onPlay(),l())}),s.appendChild(c)}const r=this.renderFooterBtn("btn-page-next",ds(this.namespace));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 n=document.createElement("input");n.className=this.wrapClassName("page-number-input"),n.value=String(this.pageIndex+1),this.readonly&&(n.disabled=!0),this.$pageNumberInput=n,this.sideEffect.addEventListener(n,"focus",()=>{n.select()}),this.sideEffect.addEventListener(n,"change",()=>{this.readonly||n.value&&this.onNewPageIndex(Number(n.value)-1)});const a=document.createElement("span");a.textContent=" / "+this.pages.length,o.appendChild(n),o.appendChild(a),this.$footer.appendChild(s),this.$footer.appendChild(o)}return this.$footer}renderFooterBtn(e,s,i){const r=document.createElement("button");return r.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e),r.appendChild(s),i&&r.appendChild(i),r}togglePreview(e){if(this.isShowPreview=e!=null?e:!this.isShowPreview,this.$content.classList.toggle(this.wrapClassName("preview-active"),this.isShowPreview),this.isShowPreview){const s=this.$preview.querySelector("."+this.wrapClassName(`preview-page-${this.pageIndex}`));s&&this.$preview.scrollTo({top:s.offsetTop-16})}}wrapClassName(e){return`${this.namespace}-${e}`}}function C(t,e,s){return Math.min(Math.max(t,e),s)}function Me(t){return t.touches?t.touches[0]:t}function St(t){t.stopPropagation(),t.cancelable&&t.preventDefault()}class Si{constructor(e){var s,i,r;this.velocity=0,this.paused=!0,this._animationFrameID=null,this._loopTimestamp=0,this.looper=o=>{if(this.paused)return;let n=Math.floor((o-this._loopTimestamp)/1e3*60)+1;for(this._loopTimestamp=o;n-- >0;)this.stepper();this.onStep(this.current,this),!this.paused&&this.current!==this.target&&window.requestAnimationFrame(this.looper)},this.current=(s=e.start)!=null?s:0,this.target=this.current,this.stiffness=(i=e.stiffness)!=null?i:170,this.damping=(r=e.damping)!=null?r:26,this.onStep=e.onStep}stepTo(e,s){this.paused&&s!=null&&(this.current=s),this.paused=!1,this.target=e,this.onStep(this.current,this),this._loopTimestamp=Date.now(),window.requestAnimationFrame(this.looper)}pause(){this.paused=!0}destroy(){this.pause()}stepper(){const e=-this.stiffness*(this.current-this.target),s=-this.damping*this.velocity,i=this.velocity+(e+s)/60,r=this.current+i/60;Math.abs(i-0)<.01&&Math.abs(r-this.target)<.01?(this.current=this.target,this.velocity=0):(this.current=r,this.velocity=i)}}class xi{constructor(e,s,i,r){this.scale=1,this.lastVisit=Date.now(),this.pageOffsetY=0,this.pageOffsetX=0,this.visible=!0,this.index=e,this.page=s,this.scale=i,this.pageOffsetX=(r-s.width)/2;const o=document.createElement("div");o.className="page-renderer-page",o.dataset.index=`${e}`,o.style.width=`${s.width*i}px`,o.style.height=`${s.height*i}px`,s.thumbnail&&(o.style.backgroundImage=`url("${s.thumbnail}")`);const n=document.createElement("img");n.className="page-renderer-page-img",n.width=s.width,n.height=s.height,n.src=s.src,o.appendChild(n),this.$page=o}translateY(e){Math.abs(e-this.pageOffsetY)>=.001&&(this.pageOffsetY=e,this.$page.style.transform=`translate(${this.pageOffsetX*this.scale}px, ${this.pageOffsetY*this.scale}px)`)}setScale(e){Math.abs(e-this.scale)>=.001&&(this.scale=e,this.$page.style.width=`${this.page.width*this.scale}px`,this.$page.style.height=`${this.page.height*this.scale}px`,this.$page.style.transform=`translate(${this.pageOffsetX*this.scale}px, ${this.pageOffsetY*this.scale}px)`)}setVisible(e){e!==this.visible&&(this.visible=e,this.$page.style.opacity=e?"1":"0")}}const yi=window.requestIdleCallback||(t=>window.setTimeout(t,5e3)),Ei=window.cancelIdleCallback||window.clearTimeout;class Ti{constructor(e,s,i){this.pages=e,this.pagesIntrinsicWidth=s,this.scale=i,this.els=new Map,this.maxElCount=200,this.gcTimer=null,this.gc=()=>{if(this.gcTimer=null,this.els.size>this.maxElCount){const r=[...this.els.values()].sort((o,n)=>n.lastVisit-o.lastVisit);for(let o=Math.floor(this.maxElCount/4);o<r.length;o++)this.els.delete(r[o].index)}}}getEl(e){let s=this.els.get(e);return s||(s=new xi(e,this.pages[e],this.scale,this.pagesIntrinsicWidth),this.els.set(e,s)),s.lastVisit=Date.now(),this.els.size>this.maxElCount&&this.gcTimer===null&&(this.gcTimer=yi(this.gc)),s}setScale(e){e!==this.scale&&(this.scale=e,this.els.forEach(s=>s.setScale(e)))}destroy(){this.els.clear(),this.gcTimer!==null&&(Ei(this.gcTimer),this.gcTimer=null)}}class Ci{constructor(e){this._hwaTimeout=NaN,this._turnOffHWA=()=>{window.clearTimeout(this._hwaTimeout),this._hwaTimeout=NaN,this.$pages.classList.toggle("is-hwa",!1)},this.pagesScrollTop=e.pagesScrollTop||0,this.containerWidth=e.containerWidth||1,this.containerHeight=e.containerHeight||1,this.pages=e.pages.map(o=>{if(o.thumbnail)return o;try{const n=new URL(o.src);return n.searchParams.set("x-oss-process","image/resize,l_50"),Q(Z({},o),{thumbnail:n.toString()})}catch(n){return console.error(n),o}});const s=Array(this.pages.length);let i=1/0,r=0;this.pagesIntrinsicHeight=this.pages.reduce((o,n,a)=>(s[a]=o,n.width>r&&(r=n.width),n.height<=i&&(i=n.height),o+n.height),0),this.pagesIntrinsicWidth=r,this.pagesMinHeight=i,this.pagesIntrinsicYs=s,this.scale=this._calcScale(),this.threshold=this._calcThreshold(),this.onPageIndexChanged=e.onPageIndexChanged,this.pageScrollIndex=0,this.pagesScrollTop!==0&&(this.pageScrollIndex=this.findScrollPageIndex(),this.onPageIndexChanged&&this.pageScrollIndex>0&&this.onPageIndexChanged(this.pageScrollIndex)),this.pageElManager=new Ti(this.pages,r,this.scale),this.$pages=this.renderPages()}setContainerSize(e,s){e>0&&s>0&&(e!==this.containerWidth||s!==this.containerHeight)&&(this.containerWidth=e,this.containerHeight=s,this.$pages.style.width=`${this.containerWidth}px`,this.$pages.style.height=`${this.containerHeight}px`,this.scale=this._calcScale(),this.threshold=this._calcThreshold(),this.pageElManager.setScale(this.scale),this.$pages.parentElement&&this.pagesScrollTo(this.pagesScrollTop,!0))}renderPages(){const e=document.createElement("div");return e.className="page-renderer-pages-container",e.style.width=`${this.containerWidth}px`,e.style.height=`${this.containerHeight}px`,e}pagesScrollTo(e,s){if(e=C(e,0,this.pagesIntrinsicHeight-this.containerHeight/this.scale),s||Math.abs(e-this.pagesScrollTop)>=.001){this._turnOnHWA(),this.pagesScrollTop=e;const i=this.findScrollPageIndex(),r=Math.max(i-this.threshold,0),o=Math.min(i+this.threshold,this.pages.length-1);for(let n=0;n<this.$pages.children.length;n++){const a=this.$pages.children[n],c=Number(a.dataset.index);c>=r&&c<=o||(a.remove(),n--)}for(let n=r;n<=o;n++){const a=this.pageElManager.getEl(n);a.$page.parentElement!==this.$pages&&this.$pages.appendChild(a.$page),a.translateY(this.pagesIntrinsicYs[n]-this.pagesScrollTop)}i!==this.pageScrollIndex&&(this.pageScrollIndex=i,this.onPageIndexChanged&&this.onPageIndexChanged(i))}}findScrollPageIndex(){for(let e=0;e<this.pagesIntrinsicYs.length;e++)if(this.pagesIntrinsicYs[e]+this.pages[e].height-this.pagesScrollTop>=.001)return e;return this.pagesIntrinsicYs.length-1}mount(e){e.appendChild(this.$pages),this.pagesScrollTo(this.pagesScrollTop,!0)}unmount(){this.$pages.remove()}destroy(){this.unmount(),this.onPageIndexChanged=void 0,this.pageElManager.destroy(),this._hwaTimeout&&(window.clearTimeout(this._hwaTimeout),this._hwaTimeout=NaN)}_calcScale(){return this.containerWidth/this.pagesIntrinsicWidth||1}_calcThreshold(){return C(Math.ceil(this.containerHeight/this.scale/this.pagesMinHeight/2),1,this.pages.length)}_turnOnHWA(){this._hwaTimeout?window.clearTimeout(this._hwaTimeout):this.$pages.classList.toggle("is-hwa",!0),this._hwaTimeout=window.setTimeout(this._turnOffHWA,1e3)}}const _i=30;class $i{constructor(e){this.sideEffect=new W,this.pagesScrollTop=e.pagesScrollTop||0,this.containerWidth=e.containerWidth||1,this.containerHeight=e.containerHeight||1,this.pagesWidth=e.pagesWidth||1,this.pagesHeight=e.pagesHeight||1,this.scale=this._calcScale(),this.scrollbarMinHeight=e.scrollbarMinHeight||_i,this.scrollbarHeight=this._calcScrollbarHeight(),this.readonly=e.readonly,this.wrapClassName=e.wrapClassName,this.onDragScroll=e.onDragScroll,this.$scrollbar=this.renderScrollbar()}mount(e){e.appendChild(this.$scrollbar),this.pagesScrollTo(this.pagesScrollTop,!0)}unmount(){this.$scrollbar.remove()}setReadonly(e){this.readonly=e}setContainerSize(e,s){e>0&&s>0&&(e!==this.containerWidth||s!==this.containerHeight)&&(this.containerWidth=e,this.containerHeight=s,this.scale=this._calcScale(),this._updateScrollbarHeight(),this.$scrollbar.parentElement&&this.pagesScrollTo(this.pagesScrollTop,!0))}pagesScrollTo(e,s){if(e=C(e,0,this.pagesHeight-this.containerHeight/this.scale),s||Math.abs(e-this.pagesScrollTop)>=.001){this.pagesScrollTop=e;const i=this.pagesScrollTop*this.scale,r=this.pagesHeight*this.scale,o=i/(r-this.containerHeight)*(this.containerHeight-this.scrollbarHeight);window.requestAnimationFrame?window.requestAnimationFrame(()=>{this.$scrollbar.style.transform=`translateY(${o}px)`}):this.$scrollbar.style.transform=`translateY(${o}px)`}}destroy(){this.unmount(),this.onDragScroll=void 0,this.sideEffect.flushAll()}renderScrollbar(){const e=document.createElement("button");e.className=this.wrapClassName("scrollbar"),e.style.minHeight=`${this.scrollbarMinHeight}px`,e.style.height=`${this.scrollbarHeight}px`;const s=i=>{if(this.readonly||i.button!=null&&i.button!==0)return;St(i);const r=this.wrapClassName("scrollbar-dragging");e.classList.toggle(r,!0);const o=this.pagesScrollTop,{clientY:n}=Me(i),a=l=>{if(this.readonly)return;const{clientY:h}=Me(l),d=(h-n)/this.scale;Math.abs(d)>0&&this.onDragScroll&&this.onDragScroll(o+d*(this.pagesHeight*this.scale/this.containerHeight))},c=()=>{e.classList.toggle(r,!1),window.removeEventListener("mousemove",a,!0),window.removeEventListener("touchmove",a,!0),window.removeEventListener("mouseup",c,!0),window.removeEventListener("touchend",c,!0),window.removeEventListener("touchcancel",c,!0)};window.addEventListener("mousemove",a,!0),window.addEventListener("touchmove",a,!0),window.addEventListener("mouseup",c,!0),window.addEventListener("touchend",c,!0),window.addEventListener("touchcancel",c,!0)};return this.sideEffect.addEventListener(e,"mousedown",s),this.sideEffect.addEventListener(e,"touchstart",s),e}_calcScale(){return this.containerWidth/this.pagesWidth||1}_calcScrollbarHeight(){return C(this.containerHeight/(this.pagesHeight*this.scale)*this.containerHeight,this.scrollbarMinHeight,this.containerHeight)}_updateScrollbarHeight(){const e=this._calcScrollbarHeight();Math.abs(e-this.scrollbarHeight)>.001&&(this.scrollbarHeight=e,this.$scrollbar.style.height=`${e}px`)}}const Ii=window.ResizeObserver||cs,I=640;class Ni{constructor({whiteboardView:e,readonly:s,box:i,pages:r,pageScrollTop:o=0,mountWhiteboard:n,onUserScroll:a}){this.sideEffect=new W,this.userScrolling=!1,this.onNewPageIndex=d=>{this.scrollToPage(d)},this.whiteboardView=e,this.readonly=s,this.box=i,this.pages=r,this.mountWhiteboard=n,this._onUserScroll=a;const c=this.debounce(()=>{this.userScrolling=!1,this._onUserScroll&&this._onUserScroll(this.pageRenderer.pagesScrollTop)},{wait:80},"debounce-updateUserScroll");this.updateUserScroll=()=>{this.userScrolling=!0,c()},this.viewer=new mt({readonly:s,box:i,pages:r,onNewPageIndex:this.onNewPageIndex});const{width:l,height:h}=this.whiteboardView.size;this.pageRenderer=new Ci({pagesScrollTop:o,pages:this.pages,containerWidth:l,containerHeight:h,onPageIndexChanged:this.viewer.setPageIndex.bind(this.viewer)}),this.scrollbar=new $i({pagesScrollTop:this.pageRenderer.pagesScrollTop,containerWidth:l,containerHeight:h,pagesWidth:this.pageRenderer.pagesIntrinsicWidth,pagesHeight:this.pageRenderer.pagesIntrinsicHeight,readonly:this.readonly,wrapClassName:this.wrapClassName.bind(this),onDragScroll:d=>{this.pageScrollTo(d),this.updateUserScroll()}}),this.pageScrollStepper=new Si({start:this.pageRenderer.pagesScrollTop,onStep:d=>{this.pageScrollTo(d)}}),this.render()}mount(){this.viewer.mount(),this.setupScrollListener();const e=this.debounce(this.renderRatioHeight.bind(this),{wait:80});return this.sideEffect.add(()=>{const s=new Ii(e);return s.observe(this.viewer.$content),()=>s.disconnect()}),this.sideEffect.setTimeout(()=>{this.userScrolling||this.pageScrollTo(this.pageRenderer.pagesScrollTop)},100),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e),this.scrollbar.setReadonly(e))}destroy(){this.sideEffect.flushAll(),this.pageScrollStepper.destroy(),this._onUserScroll=void 0,this.unmount(),this.viewer.destroy(),this.pageRenderer.destroy(),this.scrollbar.destroy()}syncPageScrollTop(e){!this.userScrolling&&e>=0&&Math.abs(this.pageRenderer.pagesScrollTop-e)>.01&&this.pageScrollStepper.stepTo(e,this.pageRenderer.pagesScrollTop)}render(){this.pageRenderer.mount(this.viewer.$content),this.viewer.$content.appendChild(this.renderWhiteboardView()),this.scrollbar.mount(this.viewer.$content),this.renderRatioHeight()}renderRatioHeight(){const e=this.box.absoluteHeight,s=e<=I;if(this.viewer.setSmallBox(s),s){const i=26/I,r=26/e,o=26/I,n=0,a=Math.max((i+o-(r+n))/2,0);if(this.box.$titleBar){const c=r+a;this.box.$titleBar.style.height=`${c*100}%`}if(this.box.$footer){const c=n+a;this.box.$footer.style.height=`${c*100}%`}}else{if(this.box.$titleBar){const i=Math.max(26/I,26/e);this.box.$titleBar.style.height=`${i*100}%`}if(this.box.$footer){const i=Math.max(26/I,26/e);this.box.$footer.style.height=`${i*100}%`}}}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.mountWhiteboard(this.$whiteboardView),this.sideEffect.addEventListener(this.$whiteboardView,"wheel",e=>{St(e),this.readonly||(this.pageScrollTo(this.pageRenderer.pagesScrollTop+e.deltaY),this.updateUserScroll())},{passive:!1,capture:!0}),this.sideEffect.addEventListener(this.$whiteboardView,"touchmove",e=>{this.readonly||e.touches.length<=1||this.updateUserScroll()},{passive:!0,capture:!0})),this.$whiteboardView}scrollTopPageToEl(e){return e*this.pageRenderer.scale}scrollTopElToPage(e){return e/this.pageRenderer.scale}elScrollTo(e){this.pageScrollTo(this.scrollTopElToPage(e))}pageScrollTo(e){const s=this.scrollTopElToPage(this.whiteboardView.size.height/2);this.whiteboardView.moveCamera({centerY:C(e+s,s,this.pageRenderer.pagesIntrinsicHeight-s),animationMode:"immediately"})}scrollToPage(e){if(!this.readonly&&!Number.isNaN(e)){const s=this.pageRenderer.pagesIntrinsicYs[e];s>=0&&(this.pageScrollTo(s+5/this.pageRenderer.scale),this.updateUserScroll())}}setupScrollListener(){this.sideEffect.add(()=>{const e=s=>{const{width:i,height:r}=this.whiteboardView.size;if(i<=0||r<=0)return;const o=s.centerY-this.pageRenderer.containerHeight/this.pageRenderer.scale/2;this.pageRenderer.pagesScrollTo(o),this.scrollbar.pagesScrollTo(o)};return this.whiteboardView.callbacks.on("onCameraUpdated",e),()=>this.whiteboardView.callbacks.off("onCameraUpdated",e)}),this.sideEffect.add(()=>{const e=({width:s,height:i})=>{if(s<=0||i<=0)return;this.pageRenderer.setContainerSize(s,i),this.scrollbar.setContainerSize(s,i);const{pagesIntrinsicWidth:r,pagesIntrinsicHeight:o}=this.pageRenderer;this.whiteboardView.moveCameraToContain({originX:0,originY:this.pageRenderer.pagesScrollTop,width:r,height:i/this.pageRenderer.scale,animationMode:"immediately"}),this.whiteboardView.setCameraBound({damping:1,maxContentMode:()=>this.pageRenderer.scale,minContentMode:()=>this.pageRenderer.scale,centerX:r/2,centerY:o/2,width:r,height:o})};return this.whiteboardView.callbacks.on("onSizeUpdated",e),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",e)}},"whiteboard-size-update"),this.sideEffect.addEventListener(window,"keyup",e=>{if(this.readonly||!this.box.focus||this.box.minimized)return;let s=null;switch(e.key){case"PageDown":{s=this.pageRenderer.pagesScrollTop+this.pageRenderer.containerHeight/this.pageRenderer.scale;break}case"PageUp":{s=this.pageRenderer.pagesScrollTop-this.pageRenderer.containerHeight/this.pageRenderer.scale;break}case"ArrowDown":{s=this.pageRenderer.pagesScrollTop+this.pageRenderer.containerHeight/4/this.pageRenderer.scale;break}case"ArrowUp":{s=this.pageRenderer.pagesScrollTop-this.pageRenderer.containerHeight/4/this.pageRenderer.scale;break}}s!==null&&(this._onUserScroll?this._onUserScroll(s):(this.pageScrollTo(s),this.updateUserScroll()))},{capture:!0})}debounce(e,s,i){const r=Bt(e,s);return this.sideEffect.addDisposer(()=>r.cancel(),i),r}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}}class ki{constructor({context:e,whiteboardView:s,box:i,pages:r}){this.sideEffect=new W,this.onPlayPPT=()=>{const o=this.context.getRoom();o&&o.pptNextStep()},this._scaleDocsToFitImpl=()=>{const o=this.pages[this.getPageIndex()];o&&(this.whiteboardView.moveCameraToContain({originX:-o.width/2,originY:-o.height/2,width:o.width,height:o.height,animationMode:"immediately"}),this.whiteboardView.setCameraBound({damping:1,maxContentMode:()=>this.whiteboardView.camera.scale,minContentMode:()=>this.whiteboardView.camera.scale,centerX:0,centerY:0,width:o.width,height:o.height}))},this._scaleDocsToFitDebounced=()=>{this.sideEffect.setTimeout(this._scaleDocsToFitImpl,1e3,"_scaleDocsToFitDebounced")},this.scaleDocsToFit=()=>{this._scaleDocsToFitImpl(),this._scaleDocsToFitDebounced()},this.onNewPageIndex=o=>{this.jumpToPage(o,!0)},this.context=e,this.whiteboardView=s,this.box=i,this.pages=r,this.displayer=e.getDisplayer(),this.viewer=new mt({readonly:!e.getIsWritable(),box:i,pages:r,onNewPageIndex:this.onNewPageIndex,onPlay:this.onPlayPPT}),this.render(),this.sideEffect.add(()=>{const o=n=>{this.viewer.setReadonly(!n)};return this.context.emitter.on("writableChange",o),()=>this.context.emitter.off("writableChange",o)}),this.sideEffect.add(()=>{const o=n=>{this.jumpToPage(n.index)};return this.context.emitter.on("sceneStateChange",o),()=>this.context.emitter.off("sceneStateChange",o)})}mount(){this.viewer.mount();const e=this.getPageIndex();return e!==0&&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}destroy(){this.sideEffect.flushAll(),this.unmount(),this.viewer.destroy()}getPageIndex(){return this.displayer.state.sceneState.index}jumpToPage(e,s){var i,r;if(e=C(e,0,this.pages.length-1),e!==this.getPageIndex()&&this.context.getIsWritable()){const o=this.context.getInitScenePath(),n=(r=(i=this.context.getScenes())==null?void 0:i[e])==null?void 0:r.name;o&&n&&this.context.setScenePath(`${o}/${n}`),this.scaleDocsToFit()}if(e!==this.viewer.pageIndex&&this.viewer.setPageIndex(e),s){const o=this.context.getRoom();if(o){const n=o.state.globalState.__pptState;o.setGlobalState({__pptState:n&&{uuid:n.uuid,pageIndex:e,disableAutoPlay:n.disableAutoPlay}})}}}render(){this.viewer.$content.appendChild(this.renderMask()),this.viewer.$content.appendChild(this.renderWhiteboardView()),this.sideEffect.addEventListener(window,"keydown",e=>{var s;if(this.box.focus)switch(e.key){case"ArrowUp":case"ArrowLeft":{this.jumpToPage(this.getPageIndex()-1,!0);break}case"ArrowRight":case"ArrowDown":{(s=this.context.getRoom())==null||s.pptNextStep();break}}})}renderMask(){if(!this.$mask){const e=document.createElement("div");e.className=this.wrapClassName("mask"),this.$mask=e;const s=document.createElement("button");s.className=this.wrapClassName("back");const i=document.createElement("button");i.className=this.wrapClassName("next")}return this.$mask}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.sideEffect.addEventListener(this.$whiteboardView,"click",e=>{var i;const s=this.context.getRoom();if(s&&s.state.memberState.currentApplianceName==="clicker"){for(let r=e.target;r;r=r.parentElement)if((i=r.classList)!=null&&i.contains("ppt-event-source"))return;s.pptNextStep()}}),this.context.mountView(this.$whiteboardView)),this.$whiteboardView}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Ri="DocsViewer",Oi={kind:Ri,setup(t){const e=t.getBox(),s=t.getScenes();if(!s)throw new Error("[Docs Viewer]: scenes not found.");const i=t.getView();if(!i)throw new Error("[Docs Viewer]: no whiteboard view.");const r=s.map(({ppt:o})=>o?{width:o.width,height:o.height,src:o.src,thumbnail:o.previewURL}:null).filter(o=>Boolean(o));if(r.length<=0)throw new Error("[Docs Viewer]: empty scenes.");e.mountStyles(Rt),r[0].src.startsWith("ppt")?Pi(t,i,e,r):Li(t,i,e,r)}};function Li(t,e,s,i){var o;e.disableCameraTransform=!t.getIsWritable();const r=new Ni({whiteboardView:e,readonly:!t.getIsWritable(),box:s,pages:i,pageScrollTop:(o=t.getAttributes())==null?void 0:o.pageScrollTop,mountWhiteboard:t.mountView.bind(t),onUserScroll:n=>{var a;((a=t.getAttributes())==null?void 0:a.pageScrollTop)!==n&&!s.readonly&&t.updateAttributes(["pageScrollTop"],n)}}).mount();t.emitter.on("attributesUpdate",n=>{n&&n.pageScrollTop!=null&&r.syncPageScrollTop(n.pageScrollTop)}),t.emitter.on("writableChange",n=>{r.setReadonly(!n),e.disableCameraTransform=!n})}function Pi(t,e,s,i){e.disableCameraTransform=!0;const r=new ki({context:t,whiteboardView:e,box:s,pages:i}).mount();t.mountView(r.$whiteboardView),t.isAddApp&&e.callbacks.once("onSizeUpdated",({width:o,height:n})=>{if(i.length>0&&s.state!=="maximized"){const{width:a,height:c}=i[0],h=c/a*o-n;h!==0&&t.getIsWritable()&&t.emitter.emit("setBoxSize",{width:s.width,height:s.height+h/s.containerRect.height})}})}exports.default=Oi;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var Ke=(()=>`.netless-app-docs-viewer-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;font-family:PingFang SC,Source Han Sans SC,Microsoft YaHei,Helvetica Neue,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif}.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;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-docs-viewer-footer-btn:hover{background:transparent!important}}.netless-app-docs-viewer-footer-btn>svg{width:100%;height:100%}.netless-app-docs-viewer-footer-btn>svg:nth-of-type(2){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(2){display:initial}.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{display:flex;align-items:center;height:26px;margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 .5em 0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;font-family:PingFang SC,Source Han Sans SC,Microsoft YaHei,Helvetica Neue,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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}.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:active,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:focus,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:hover{color:currentColor;background:#25282e}.telebox-color-scheme-dark .netless-app-docs-viewer-footer{border-top:none}.telebox-color-scheme-dark .netless-app-docs-viewer-footer-btn:hover{background:#212126}.netless-app-docs-viewer-preview.netless-app-docs-viewer-preview-active{transform:translate(0)}.netless-app-docs-viewer-content{position:relative;height:100%;overflow:hidden}.netless-app-docs-viewer-preview-mask{position:absolute;z-index:10200;top:0;left:0;width:100%;height:100%}.netless-app-docs-viewer-preview{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;position:absolute;z-index:10300;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;user-select:none}.telebox-color-scheme-dark .netless-app-docs-viewer-preview{background:rgba(50,50,50,.9)}.netless-app-docs-viewer-static-scrollbar{box-sizing:border-box;position:absolute;top:0;right:0;z-index:2147483647;width:16px;min-height:30px;margin:0;padding:0 0 0 8px;border:none;outline:none;opacity:0;background:transparent;transition:opacity .4s 3s,transform .1s;user-select:none;touch-action:none}.netless-app-docs-viewer-static-scrollbar:after{content:"";display:block;width:8px;height:100%;border-radius:4px;background:rgba(68,78,96,.4);box-shadow:1px 1px 8px #ffffffb3;transition:background .4s}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrolling{opacity:1;transition:opacity .4s,transform .1s}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{opacity:1;transition:opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging:after{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-static-scrollbar:hover:after,.netless-app-docs-viewer-static-scrollbar:focus:after{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active:after{background:rgba(68,78,96,.6)}.telebox-body-wrap:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:opacity .4s,transform .1s}.telebox-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.page-renderer-pages-container{position:relative;width:100%;height:100%}.page-renderer-page{position:absolute;top:0;left:0;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-pages-container.is-hwa .page-renderer-page{will-change:transform}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.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-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-dynamic-wb-view .cursor-clicker .ppt-event-source{cursor:pointer}
+`)();const be="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Qe=be.length,ne=Array(20),Ze=()=>{for(let t=0;t<20;t++)ne[t]=be.charAt(Math.random()*Qe);return ne.join("")};function ce(t){try{return t()}catch(e){console.error(e)}}class D{constructor(){this.disposers=new Map}addDisposer(e,s=this.genUID()){return this.flush(s),this.disposers.set(s,Array.isArray(e)?()=>e.forEach(ce):e),s}add(e,s=this.genUID()){const r=e();return r?this.addDisposer(r,s):s}addEventListener(e,s,r,i,a=this.genUID()){return e.addEventListener(s,r,i),this.addDisposer(()=>e.removeEventListener(s,r,i),a),a}setTimeout(e,s,r=this.genUID()){const i=window.setTimeout(()=>{this.remove(r),e()},s);return this.addDisposer(()=>window.clearTimeout(i),r)}setInterval(e,s,r=this.genUID()){const i=window.setInterval(e,s);return this.addDisposer(()=>window.clearInterval(i),r)}remove(e){const s=this.disposers.get(e);return this.disposers.delete(e),s}flush(e){const s=this.remove(e);if(s)try{s()}catch(r){console.error(r)}}flushAll(){this.disposers.forEach(ce),this.disposers.clear()}genUID(){let e;do e=Ze();while(this.disposers.has(e));return e}}var et=Object.defineProperty,tt=Object.defineProperties,st=Object.getOwnPropertyDescriptors,le=Object.getOwnPropertySymbols,rt=Object.prototype.hasOwnProperty,it=Object.prototype.propertyIsEnumerable,W=(t,e,s)=>e in t?et(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,we=(t,e)=>{for(var s in e||(e={}))rt.call(e,s)&&W(t,s,e[s]);if(le)for(var s of le(e))it.call(e,s)&&W(t,s,e[s]);return t},ve=(t,e)=>tt(t,st(e)),$=(t,e,s)=>(W(t,typeof e!="symbol"?e+"":e,s),s);class at{constructor(e){$(this,"_subscribers"),$(this,"_bSub"),$(this,"_bSubDisposer"),this._bSub=e}get size(){return this._subscribers?this._subscribers.size:0}invoke(e,s){this._subscribers&&this._subscribers.forEach(r=>r(e,s))}add(e){this._bSub&&(!this._subscribers||this._subscribers.size<=0)&&(this._bSubDisposer=this._bSub()),this._subscribers||(this._subscribers=new Set),this._subscribers.add(e)}remove(e){if(this._subscribers&&this._subscribers.delete(e),this._subscribers&&this._subscribers.size<=0&&this._bSubDisposer){const s=this._bSubDisposer;this._bSubDisposer=null,s()}}clear(){if(this._subscribers&&this._subscribers.clear(),this._bSubDisposer){const e=this._bSubDisposer;this._bSubDisposer=null,e()}}destroy(){this.clear()}}class G{constructor(e,s){$(this,"_subscribers"),$(this,"_value"),this._value=e;let r;if(s&&(s.compare&&(this.compare=s.compare),s.beforeSubscribe)){const i=s.beforeSubscribe,a=this._setValue.bind(this);r=()=>i(a)}this._subscribers=new at(r)}_setValue(e,s){this.compare(e,this._value)||(this._value=e,this._subscribers.invoke(e,s))}get value(){return this._value}reaction(e){return this._subscribers.add(e),()=>{this._subscribers.remove(e)}}subscribe(e,s){const r=this.reaction(e);return e(this._value,s),r}destroy(){this._subscribers.destroy()}unsubscribe(e){this._subscribers.remove(e)}get size(){return this._subscribers.size}compare(e,s){return e===s}}class S extends G{constructor(){super(...arguments),$(this,"setValue",this._setValue)}}class ot extends G{constructor(e,s,r={}){super(s(e.value),ve(we({},r),{beforeSubscribe:i=>{const a=e.subscribe((n,c)=>i(s(n),c));if(r.beforeSubscribe){const n=r.beforeSubscribe(i);if(n)return()=>{a(),n()}}return a}})),$(this,"_srcValue"),this._srcValue=()=>s(e.value)}get value(){if(this.size<=0){const e=this._srcValue();return this.compare(e,this._value)?this._value:e}return this._value}}function P(t,e=r=>r,s={}){return new ot(t,e,s)}class nt extends G{constructor(e,s,r={}){super(s(j(e)),ve(we({},r),{beforeSubscribe:i=>{let a=j(e);i(s(a));const n=e.map((l,o)=>l.reaction((d,p)=>{a=a.slice(),a[o]=d,i(s(a),p)})),c=()=>n.forEach(l=>l());if(r.beforeSubscribe){const l=r.beforeSubscribe(i);if(l)return()=>{c(),l()}}return c}})),$(this,"_srcValue"),this._srcValue=()=>s(j(e))}get value(){if(this.size<=0){const e=this._srcValue();return this.compare(e,this._value)?this._value:e}return this._value}}function j(t){return t.map(ct)}function ct(t){return t.value}function w(t,e=r=>r,s={}){return new nt(t,e,s)}function me(t){t.onValChanged||(t.onValChanged=lt)}function lt(t,e){const s=this[`_${t}$`]||this[t];if(!(s!=null&&s.reaction))throw new TypeError(`"${t}" is not related to a Val in this instance`);return s.reaction(e)}function dt(t,e,s){Object.keys(e).forEach(r=>{ht(t,r,e[r]),s&&s.attach(e[r])}),me(t)}function ht(t,e,s){return Object.defineProperties(t,{[e]:{get(){return s.value}},[`_${e}$`]:{value:s}}),t}function pt(t,e,s){Object.keys(e).forEach(r=>{ut(t,r,e[r]),s&&s.attach(e[r])}),me(t)}function ut(t,e,s){return Object.defineProperties(t,{[e]:{get(){return s.value},set(r){s.setValue(r)}},[`_${e}$`]:{value:s},[`set${gt(e)}`]:{value:(r,i)=>s.setValue(r,i)}}),t}function gt(t){return t[0].toUpperCase()+t.slice(1)}const C=typeof window!="undefined",Se=C&&!("onscroll"in window)||typeof navigator!="undefined"&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),_e=C&&"IntersectionObserver"in window,Ee=C&&"classList"in document.createElement("p"),ye=C&&window.devicePixelRatio>1,ft={elements_selector:".lazy",container:Se||C?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_bg_set:"bg-set",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,restore_on_error:!1},$e=t=>Object.assign({},ft,t),de=function(t,e){let s;const r="LazyLoad::Initialized",i=new t(e);try{s=new CustomEvent(r,{detail:{instance:i}})}catch{s=document.createEvent("CustomEvent"),s.initCustomEvent(r,!1,!1,{instance:i})}window.dispatchEvent(s)},bt=(t,e)=>{if(!!e)if(!e.length)de(t,e);else for(let s=0,r;r=e[s];s+=1)de(t,r)},_="src",q="srcset",J="sizes",xe="poster",z="llOriginalAttrs",Ce="data",X="loading",Le="loaded",ke="applied",wt="entered",K="error",De="native",Ie="data-",Te="ll-status",b=(t,e)=>t.getAttribute(Ie+e),vt=(t,e,s)=>{var r=Ie+e;if(s===null){t.removeAttribute(r);return}t.setAttribute(r,s)},O=t=>b(t,Te),I=(t,e)=>vt(t,Te,e),H=t=>I(t,null),Q=t=>O(t)===null,mt=t=>O(t)===X,St=t=>O(t)===K,Z=t=>O(t)===De,_t=[X,Le,ke,K],Et=t=>_t.indexOf(O(t))>=0,L=(t,e,s,r)=>{if(!!t){if(r!==void 0){t(e,s,r);return}if(s!==void 0){t(e,s);return}t(e)}},N=(t,e)=>{if(Ee){t.classList.add(e);return}t.className+=(t.className?" ":"")+e},m=(t,e)=>{if(Ee){t.classList.remove(e);return}t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},yt=t=>{t.llTempImage=document.createElement("IMG")},$t=t=>{delete t.llTempImage},Ne=t=>t.llTempImage,B=(t,e)=>{if(!e)return;const s=e._observer;!s||s.unobserve(t)},xt=t=>{t.disconnect()},Ct=(t,e,s)=>{e.unobserve_entered&&B(t,s)},ee=(t,e)=>{!t||(t.loadingCount+=e)},Lt=t=>{!t||(t.toLoadCount-=1)},Ae=(t,e)=>{!t||(t.toLoadCount=e)},kt=t=>t.loadingCount>0,Dt=t=>t.toLoadCount>0,Pe=t=>{let e=[];for(let s=0,r;r=t.children[s];s+=1)r.tagName==="SOURCE"&&e.push(r);return e},te=(t,e)=>{const s=t.parentNode;if(!s||s.tagName!=="PICTURE")return;Pe(s).forEach(e)},Ve=(t,e)=>{Pe(t).forEach(e)},U=[_],ze=[_,xe],V=[_,q,J],Oe=[Ce],F=t=>!!t[z],Me=t=>t[z],Re=t=>delete t[z],T=(t,e)=>{if(F(t))return;const s={};e.forEach(r=>{s[r]=t.getAttribute(r)}),t[z]=s},It=t=>{F(t)||(t[z]={backgroundImage:t.style.backgroundImage})},Tt=(t,e,s)=>{if(!s){t.removeAttribute(e);return}t.setAttribute(e,s)},k=(t,e)=>{if(!F(t))return;const s=Me(t);e.forEach(r=>{Tt(t,r,s[r])})},Nt=t=>{if(!F(t))return;const e=Me(t);t.style.backgroundImage=e.backgroundImage},He=(t,e,s)=>{N(t,e.class_applied),I(t,ke),s&&(e.unobserve_completed&&B(t,e),L(e.callback_applied,t,s))},Be=(t,e,s)=>{N(t,e.class_loading),I(t,X),s&&(ee(s,1),L(e.callback_loading,t,s))},x=(t,e,s)=>{!s||t.setAttribute(e,s)},he=(t,e)=>{x(t,J,b(t,e.data_sizes)),x(t,q,b(t,e.data_srcset)),x(t,_,b(t,e.data_src))},At=(t,e)=>{te(t,s=>{T(s,V),he(s,e)}),T(t,V),he(t,e)},Pt=(t,e)=>{T(t,U),x(t,_,b(t,e.data_src))},Vt=(t,e)=>{Ve(t,s=>{T(s,U),x(s,_,b(s,e.data_src))}),T(t,ze),x(t,xe,b(t,e.data_poster)),x(t,_,b(t,e.data_src)),t.load()},zt=(t,e)=>{T(t,Oe),x(t,Ce,b(t,e.data_src))},Ot=(t,e,s)=>{const r=b(t,e.data_bg),i=b(t,e.data_bg_hidpi),a=ye&&i?i:r;!a||(t.style.backgroundImage=`url("${a}")`,Ne(t).setAttribute(_,a),Be(t,e,s))},Mt=(t,e,s)=>{const r=b(t,e.data_bg_multi),i=b(t,e.data_bg_multi_hidpi),a=ye&&i?i:r;!a||(t.style.backgroundImage=a,He(t,e,s))},Rt=(t,e,s)=>{const r=b(t,e.data_bg_set);if(!r)return;const i=r.split("|");let a=i.map(n=>`image-set(${n})`);t.style.backgroundImage=a.join(),t.style.backgroundImage===""&&(a=i.map(n=>`-webkit-image-set(${n})`),t.style.backgroundImage=a.join()),He(t,e,s)},Ue={IMG:At,IFRAME:Pt,VIDEO:Vt,OBJECT:zt},Ht=(t,e)=>{const s=Ue[t.tagName];!s||s(t,e)},Bt=(t,e,s)=>{const r=Ue[t.tagName];!r||(r(t,e),Be(t,e,s))},Ut=["IMG","IFRAME","VIDEO","OBJECT"],Ft=t=>Ut.indexOf(t.tagName)>-1,Fe=(t,e)=>{e&&!kt(e)&&!Dt(e)&&L(t.callback_finish,e)},pe=(t,e,s)=>{t.addEventListener(e,s),t.llEvLisnrs[e]=s},jt=(t,e,s)=>{t.removeEventListener(e,s)},se=t=>!!t.llEvLisnrs,Wt=(t,e,s)=>{se(t)||(t.llEvLisnrs={});const r=t.tagName==="VIDEO"?"loadeddata":"load";pe(t,r,e),pe(t,"error",s)},Y=t=>{if(!se(t))return;const e=t.llEvLisnrs;for(let s in e){const r=e[s];jt(t,s,r)}delete t.llEvLisnrs},je=(t,e,s)=>{$t(t),ee(s,-1),Lt(s),m(t,e.class_loading),e.unobserve_completed&&B(t,s)},Yt=(t,e,s,r)=>{const i=Z(e);je(e,s,r),N(e,s.class_loaded),I(e,Le),L(s.callback_loaded,e,r),i||Fe(s,r)},Gt=(t,e,s,r)=>{const i=Z(e);je(e,s,r),N(e,s.class_error),I(e,K),L(s.callback_error,e,r),s.restore_on_error&&k(e,V),i||Fe(s,r)},re=(t,e,s)=>{const r=Ne(t)||t;if(se(r))return;Wt(r,n=>{Yt(n,t,e,s),Y(r)},n=>{Gt(n,t,e,s),Y(r)})},qt=(t,e,s)=>{yt(t),re(t,e,s),It(t),Ot(t,e,s),Mt(t,e,s),Rt(t,e,s)},Jt=(t,e,s)=>{re(t,e,s),Bt(t,e,s)},ie=(t,e,s)=>{Ft(t)?Jt(t,e,s):qt(t,e,s)},Xt=(t,e,s)=>{t.setAttribute("loading","lazy"),re(t,e,s),Ht(t,e),I(t,De)},ue=t=>{t.removeAttribute(_),t.removeAttribute(q),t.removeAttribute(J)},Kt=t=>{te(t,e=>{ue(e)}),ue(t)},We=t=>{te(t,e=>{k(e,V)}),k(t,V)},Qt=t=>{Ve(t,e=>{k(e,U)}),k(t,ze),t.load()},Zt=t=>{k(t,U)},es=t=>{k(t,Oe)},ts={IMG:We,IFRAME:Zt,VIDEO:Qt,OBJECT:es},ss=t=>{const e=ts[t.tagName];if(!e){Nt(t);return}e(t)},rs=(t,e)=>{Q(t)||Z(t)||(m(t,e.class_entered),m(t,e.class_exited),m(t,e.class_applied),m(t,e.class_loading),m(t,e.class_loaded),m(t,e.class_error))},is=(t,e)=>{ss(t),rs(t,e),H(t),Re(t)},as=(t,e,s,r)=>{!s.cancel_on_exit||!mt(t)||t.tagName==="IMG"&&(Y(t),Kt(t),We(t),m(t,s.class_loading),ee(r,-1),H(t),L(s.callback_cancel,t,e,r))},os=(t,e,s,r)=>{const i=Et(t);I(t,wt),N(t,s.class_entered),m(t,s.class_exited),Ct(t,s,r),L(s.callback_enter,t,e,r),!i&&ie(t,s,r)},ns=(t,e,s,r)=>{Q(t)||(N(t,s.class_exited),as(t,e,s,r),L(s.callback_exit,t,e,r))},cs=["IMG","IFRAME","VIDEO"],Ye=t=>t.use_native&&"loading"in HTMLImageElement.prototype,ls=(t,e,s)=>{t.forEach(r=>{cs.indexOf(r.tagName)!==-1&&Xt(r,e,s)}),Ae(s,0)},ds=t=>t.isIntersecting||t.intersectionRatio>0,hs=t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}),ps=(t,e,s)=>{t.forEach(r=>ds(r)?os(r.target,r,e,s):ns(r.target,r,e,s))},us=(t,e)=>{e.forEach(s=>{t.observe(s)})},gs=(t,e)=>{xt(t),us(t,e)},fs=(t,e)=>{!_e||Ye(t)||(e._observer=new IntersectionObserver(s=>{ps(s,t,e)},hs(t)))},Ge=t=>Array.prototype.slice.call(t),R=t=>t.container.querySelectorAll(t.elements_selector),bs=t=>Ge(t).filter(Q),ws=t=>St(t),vs=t=>Ge(t).filter(ws),ge=(t,e)=>bs(t||R(e)),ms=(t,e)=>{vs(R(t)).forEach(r=>{m(r,t.class_error),H(r)}),e.update()},Ss=(t,e)=>{!C||(e._onlineHandler=()=>{ms(t,e)},window.addEventListener("online",e._onlineHandler))},_s=t=>{!C||window.removeEventListener("online",t._onlineHandler)},M=function(t,e){const s=$e(t);this._settings=s,this.loadingCount=0,fs(s,this),Ss(s,this),this.update(e)};M.prototype={update:function(t){const e=this._settings,s=ge(t,e);if(Ae(this,s.length),Se||!_e){this.loadAll(s);return}if(Ye(e)){ls(s,e,this);return}gs(this._observer,s)},destroy:function(){this._observer&&this._observer.disconnect(),_s(this),R(this._settings).forEach(t=>{Re(t)}),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;ge(t,e).forEach(r=>{B(r,this),ie(r,e,this)})},restoreAll:function(){const t=this._settings;R(t).forEach(e=>{is(e,t)})}};M.load=(t,e)=>{const s=$e(e);ie(t,s)};M.resetStatus=t=>{H(t)};C&&bt(M,window.lazyLoadOptions);class Es{constructor({namespace:e,pages$:s,sideEffect:r,readonly$:i,events:a,wrapClassName:n,root:c,pagesIndex$:l}){this.showPreview$=new S(!1),this.namespace=e,this.pages$=s,this.sideEffect=r,this.readonly$=i,this.events=a,this.wrapClassName=n,this.sideEffect.addDisposer(this.events.on("togglePreview",()=>{this.showPreview$.setValue(!this.showPreview$.value)})),this.sideEffect.addDisposer(this.showPreview$.subscribe(o=>{this.sideEffect.add(()=>{const d=this.renderPreview(),p=this.renderPreviewMask();if(o){c.appendChild(d),c.appendChild(p),d.scrollTop;const u=d.querySelector("."+this.wrapClassName(`preview-page-${l.value}`));return u&&d.scrollTo({top:u.offsetTop-16}),d.classList.toggle(this.wrapClassName("preview-active"),!0),this.previewLazyLoad=new M({container:this.$preview,elements_selector:"."+this.wrapClassName("preview-page>img")}),()=>{var h;return(h=this.previewLazyLoad)==null?void 0:h.destroy()}}else return d.classList.toggle(this.wrapClassName("preview-active"),!1),this.sideEffect.setTimeout(()=>{d.remove(),p.remove()},500,"preview-remove"),null},"preview-lazyload")}))}destroy(){var e,s;(e=this.$preview)==null||e.remove(),(s=this.$previewMask)==null||s.remove()}renderPreview(){if(this.$preview)return this.$preview;const e=document.createElement("div");return e.className=this.wrapClassName("preview")+" tele-fancy-scrollbar",this.$preview=e,this.sideEffect.addEventListener(e,"wheel",s=>s.stopPropagation(),{passive:!1}),this.sideEffect.addDisposer(this.pages$.subscribe(s=>{var r;this.sideEffect.add(()=>{const i=s.map((a,n)=>{var u;const c=(u=a.thumbnail)!=null?u:a.src.startsWith("ppt")?void 0:a.src;if(!c)return;const l=String(n),o=document.createElement("a");o.className=this.wrapClassName("preview-page")+" "+this.wrapClassName(`preview-page-${n}`),o.setAttribute("href","#"),o.dataset.pageIndex=l;const d=document.createElement("span");d.className=this.wrapClassName("preview-page-name"),d.textContent=String(n+1),d.dataset.pageIndex=l;const p=document.createElement("img");return p.width=a.width,p.height=a.height,p.dataset.src=c,p.dataset.pageIndex=l,o.appendChild(p),o.appendChild(d),e.appendChild(o),o});return()=>i.forEach(a=>a==null?void 0:a.remove())},"render-preview-pages"),(r=this.previewLazyLoad)==null||r.update()})),this.sideEffect.addEventListener(e,"click",s=>{var i;if(this.readonly$.value)return;const r=(i=s.target.dataset)==null?void 0:i.pageIndex;r&&(s.preventDefault(),s.stopPropagation(),s.stopImmediatePropagation(),this.events.emit("jumpPage",Number(r)),this.showPreview$.setValue(!1))}),e}renderPreviewMask(){if(this.$previewMask)return this.$previewMask;const e=document.createElement("div");return e.className=this.wrapClassName("preview-mask"),this.$previewMask=e,this.sideEffect.addEventListener(e,"click",s=>{this.readonly$.value||s.target===e&&this.showPreview$.setValue(!1)}),e}}function ys(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-sidebar`),s.setAttribute("viewBox","0 0 64 64");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M50 8H14c-3.309 0-6 2.691-6 6v36c0 3.309 2.691 6 6 6h36c3.309 0 6-2.691 6-6V14c0-3.309-2.691-6-6-6zM12 50V14c0-1.103.897-2 2-2h8v40h-8c-1.103 0-2-.897-2-2zm40 0c0 1.103-.897 2-2 2H26V12h24c1.103 0 2 .897 2 2z"),s.appendChild(r),s}function $s(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-left`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M177.81 249.959L337.473 90.295c2.722-2.865 2.651-7.378-.143-10.1-2.793-2.65-7.163-2.65-9.956 0l-164.75 164.75c-2.793 2.793-2.793 7.306 0 10.1l164.75 164.75c2.865 2.722 7.378 2.65 10.099-.143 2.651-2.794 2.651-7.163 0-9.957L177.809 249.959z"),s.appendChild(r),s}function xs(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-right`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M322.19 250.041L162.527 409.705c-2.722 2.865-2.651 7.378.143 10.1 2.793 2.65 7.163 2.65 9.956 0l164.75-164.75c2.793-2.793 2.793-7.306 0-10.1l-164.75-164.75c-2.865-2.722-7.378-2.65-10.099.143-2.651 2.794-2.651 7.163 0 9.957l159.664 159.736z"),s.appendChild(r),s}function Cs(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-play`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M418.158 257.419L174.663 413.33c-6.017 3.919-15.708 3.772-21.291-.29-2.791-2.018-4.295-4.483-4.295-7.084V94.109c0-5.65 6.883-10.289 15.271-10.289 4.298 0 8.391 1.307 11.181 3.332l242.629 155.484c6.016 3.917 6.451 10.292.649 14.491-.216.154-.432.154-.649.292zM170.621 391.288l223.116-141.301L170.71 107.753l-.089 283.535z"),s.appendChild(r),s}function Ls(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-pause`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M312.491 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261zM165.257 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261z"),s.appendChild(r),s}class ks{constructor({namespace:e,pages$:s,sideEffect:r,readonly$:i,events:a,playable:n,wrapClassName:c,pagesIndex$:l,root:o}){this.namespace=e,this.pages$=s,this.sideEffect=r,this.readonly$=i,this.events=a,this.wrapClassName=c,this.pagesIndex$=l,this.playable=n,this.$footer=this.render(),o.appendChild(this.$footer)}destroy(){this.$footer.remove()}render(){const e=document.createElement("div");e.className=this.wrapClassName("footer"),this.sideEffect.addDisposer(this.readonly$.subscribe(o=>e.classList.toggle(this.wrapClassName("readonly"),o)));const s=this.renderFooterBtn("btn-sidebar",ys(this.namespace));this.sideEffect.addEventListener(s,"click",()=>{this.readonly$.value||this.events.emit("togglePreview")}),e.appendChild(s),this.sideEffect.addDisposer(this.pages$.subscribe(o=>{const d=o.some(p=>p.thumbnail||!p.src.startsWith("ppt"));s.style.display=d?"":"none"}));const r=document.createElement("div");r.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back",$s(this.namespace));if(this.sideEffect.addEventListener(i,"click",()=>{this.readonly$.value||this.events.emit("back")}),r.appendChild(i),this.playable){const o=this.renderFooterBtn("btn-page-play",Cs(this.namespace),Ls(this.namespace));this.sideEffect.addEventListener(o,"click",()=>{this.readonly$.value||(o.classList.toggle(this.wrapClassName("footer-btn-playing"),!0),this.events.emit("play"),this.sideEffect.setTimeout(()=>o.classList.toggle(this.wrapClassName("footer-btn-playing"),!1),500,"returnPlay"))}),r.appendChild(o)}const a=this.renderFooterBtn("btn-page-next",xs(this.namespace));this.sideEffect.addEventListener(a,"click",()=>{this.readonly$.value||this.events.emit("next")}),r.appendChild(a);const n=document.createElement("div");n.className=this.wrapClassName("page-number");const c=document.createElement("input");c.className=this.wrapClassName("page-number-input"),this.sideEffect.addDisposer(this.readonly$.subscribe(o=>c.disabled=o)),this.sideEffect.addDisposer(this.pagesIndex$.subscribe(o=>c.value=String(o+1))),this.sideEffect.addEventListener(c,"focus",()=>{c.select()}),this.sideEffect.addEventListener(c,"change",()=>{if(this.readonly$.value)return;const o=Number(c.value)-1;o>=0&&this.events.emit("jumpPage",o)});const l=document.createElement("span");return this.sideEffect.addDisposer(this.pages$.subscribe(o=>{l.textContent=" / "+o.length})),n.appendChild(c),n.appendChild(l),e.appendChild(r),e.appendChild(n),e}renderFooterBtn(e,s,r){const i=document.createElement("button");return i.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e),i.appendChild(s),r&&i.appendChild(r),i}}class Ds{constructor(){this.listeners=new Map,this.relayListeners=new Set}emit(e,s){var r;(r=this.listeners.get(e))==null||r.forEach(i=>i(s))}on(e,s){let r=this.listeners.get(e);return r||(r=new Set,this.listeners.set(e,r)),r.add(s),r.size===1&&this.relayListeners.forEach(i=>i.start(e)),()=>{this.off(e,s)}}off(e,s){const r=this.listeners.get(e);if(r){const i=r.delete(s);return r.size<=0&&(this.listeners.delete(e),this.relayListeners.forEach(a=>a.dispose(e))),i}return!1}clear(e){var s;e?(s=this.listeners.get(e))==null||s.clear():this.listeners.clear()}count(e){var s;if(e)return((s=this.listeners.get(e))==null?void 0:s.size)||0;{let r=0;return this.listeners.forEach(i=>{r+=i.size}),r}}remit(e,s){let r;const i={start:a=>{a===e&&(r=s(this))},dispose:a=>{r&&(!a||a===e)&&r()}};return this.relayListeners.add(i),()=>{this.relayListeners.delete(i),r&&r()}}destroy(){this.clear(),this.relayListeners.forEach(e=>e.dispose()),this.relayListeners.clear()}}class qe{constructor({readonly$:e,pagesIndex$:s,box:r,pages:i=[],playable:a}){this.wrapClassName=c=>`${this.namespace}-${c}`,this.namespace="netless-app-docs-viewer",this.sideEffect=new D,this.events=new Ds;const n=new S(i);pt(this,{pages:n}),this.preview=new Es({pages$:n,readonly$:e,pagesIndex$:s,root:r.$body,sideEffect:this.sideEffect,events:this.events,namespace:this.namespace,wrapClassName:this.wrapClassName}),this.footer=new ks({pages$:n,readonly$:e,playable:a,pagesIndex$:s,root:r.$footer,namespace:this.namespace,sideEffect:this.sideEffect,events:this.events,wrapClassName:this.wrapClassName})}destroy(){this.preview.destroy(),this.footer.destroy(),this.sideEffect.flushAll(),this.events.destroy()}}function y(t,e,s){return Math.min(Math.max(t,e),s)}function fe(t){return t.touches?t.touches[0]:t}function Je(t){t.stopPropagation(),t.cancelable&&t.preventDefault()}function Xe(t,e){return t.width===e.width&&t.height===e.height}class Is{constructor(e){var s,r,i;this.velocity=0,this._paused=!0,this._animationFrameID=null,this._loopTimestamp=0,this.looper=a=>{var c;if(this._paused)return;let n=Math.floor((a-this._loopTimestamp)/1e3*60)+1;for(this._loopTimestamp=a;n-- >0;)this.stepper();(c=this.onStep)==null||c.call(this,this.current),this._paused?this._animationFrameID=null:this._animationFrameID=window.requestAnimationFrame(this.looper)},this.current=(s=e.start)!=null?s:0,this.target=this.current,this.stiffness=(r=e.stiffness)!=null?r:170,this.damping=(i=e.damping)!=null?i:26,this.onStep=e.onStep}get paused(){return this._paused}stepTo(e,s){var r;this._paused&&s!=null&&(this.current=s),this._paused=!1,this.target=e,(r=this.onStep)==null||r.call(this,this.current),this._loopTimestamp=Date.now(),this._animationFrameID=window.requestAnimationFrame(this.looper)}pause(){this._paused=!0,this._animationFrameID!=null&&window.cancelAnimationFrame(this._animationFrameID)}destroy(){this.pause(),this.onStep=void 0}stepper(){const e=-this.stiffness*(this.current-this.target),s=-this.damping*this.velocity,r=this.velocity+(e+s)/60,i=this.current+r/60;Math.abs(r-0)<.01&&Math.abs(i-this.target)<.01?(this.current=this.target,this.velocity=0,this._paused=!0):(this.current=i,this.velocity=r)}}class Ts{constructor(e,s,r,i,a,n){this.index=e,this.lastVisit=Date.now(),this.sideEffect=new D;const c=P(s,u=>u[e]||{width:0,height:0}),l=w([c,r],([u,h])=>(h.width-u.width)/2),o=w([a,n],([u,h])=>(u[e]||0)-h),d=document.createElement("div");d.className="page-renderer-page",d.dataset.index=`${e}`;const p=document.createElement("img");p.className="page-renderer-page-img",d.appendChild(p),this.sideEffect.addDisposer([w([c,i]).subscribe(([u,h])=>{d.style.width=`${u.width*h}px`,d.style.height=`${u.height*h}px`}),c.subscribe(u=>{u.thumbnail&&(d.style.backgroundImage=`url("${u.thumbnail}")`),p.width=u.width,p.height=u.height,p.src=u.src}),w([l,o,i]).subscribe(([u,h,g])=>{d.style.transform=`translate(${u*g}px, ${h*g}px)`})]),this.$page=d}destroy(){this.sideEffect.flushAll(),this.$page.remove()}}const Ns=window.requestIdleCallback||(t=>window.setTimeout(t,5e3)),As=window.cancelIdleCallback||window.clearTimeout;class Ps{constructor(e,s,r,i,a){this.pages$=e,this.pagesSize$=s,this.scale$=r,this.pagesYs$=i,this.pagesScrollTop$=a,this.els=new Map,this.maxElCount=200,this.gcTimer=null,this.gc=()=>{var n;if(this.gcTimer=null,this.els.size>this.maxElCount){const c=[...this.els.values()].sort((l,o)=>o.lastVisit-l.lastVisit);for(let l=Math.floor(this.maxElCount/4);l<c.length;l++)(n=this.els.get(c[l].index))==null||n.destroy(),this.els.delete(c[l].index)}}}getEl(e){let s=this.els.get(e);return s||(s=new Ts(e,this.pages$,this.pagesSize$,this.scale$,this.pagesYs$,this.pagesScrollTop$),this.els.set(e,s)),s.lastVisit=Date.now(),this.els.size>this.maxElCount&&this.gcTimer===null&&(this.gcTimer=Ns(this.gc)),s}destroy(){this.els.forEach(e=>e.destroy()),this.els.clear(),this.gcTimer!==null&&(As(this.gcTimer),this.gcTimer=null)}}class Vs{constructor({pagesScrollTop$:e,containerRect$:s,pages$:r,pagesSize$:i}){this.sideEffect=new D,r=P(r,h=>h.map(g=>{if(g.thumbnail)return g;try{const f=new URL(g.src);return f.searchParams.set("x-oss-process","image/resize,l_50"),{...g,thumbnail:f.toString()}}catch(f){return console.error(f),g}}));const a=P(r,h=>{const g=Array(h.length);for(let f=0;f<h.length;f++)g[f]=f>0?g[f-1]+h[f-1].height:0;return g}),n=P(r,h=>{let g=1/0;for(let f=h.length-1;f>=0;f--)h[f].height<=g&&(g=h[f].height);return g}),c=w([e,a,r],([h,g,f])=>{for(let v=0;v<g.length;v++)if(g[v]+f[v].height-h>=.001)return v;return g.length-1}),l=w([s,i],([h,g])=>h.width/g.width||1),o=w([r,s,n,l],([h,g,f,v])=>y(Math.ceil(g.height/v/f/2),1,h.length));dt(this,{pagesScrollTop:e,containerRect:s,pages:r,pagesSize:i,pagesIndex:c,pagesYs:a,pagesMinHeight:n,scale:l}),this.pageElManager=new Ps(r,i,l,a,e),this.$pages=this.renderPages();const d=new S(!1);this.sideEffect.addDisposer(d.subscribe(h=>this.$pages.classList.toggle("is-hwa",h)));const p=()=>d.setValue(!1),u=()=>{this.sideEffect.setTimeout(p,1e3,"turn-off-hwa"),d.setValue(!0)};this.sideEffect.addDisposer(w([c,o,r]).subscribe(([h,g,f])=>{u();const v=Math.max(h-g,0),ae=Math.min(h+g,f.length-1);for(let E=0;E<this.$pages.children.length;E++){const A=this.$pages.children[E],oe=Number(A.dataset.index);oe>=v&&oe<=ae||(A.remove(),E--)}for(let E=v;E<=ae;E++){const A=this.pageElManager.getEl(E);A.$page.parentElement!==this.$pages&&this.$pages.appendChild(A.$page)}}))}renderPages(){const e=document.createElement("div");return e.className="page-renderer-pages-container",this.sideEffect.addDisposer(this._containerRect$.subscribe(s=>{e.style.width=`${s.width}px`,e.style.height=`${s.height}px`}),"render-pages-size"),e}destroy(){this.sideEffect.flushAll(),this.$pages.remove(),this.pageElManager.destroy()}}const zs=30;class Os{constructor({pagesScrollTop$:e,containerRect$:s,stageRect$:r,pagesSize$:i,readonly$:a,scrollbarMinHeight:n=zs,wrapClassName:c,onDragScroll:l}){this.sideEffect=new D,this.scrolling$=new S(!1),this.pagesScrollTop$=e,this.containerRect$=s,this.stageRect$=r,this.pagesSize$=i,this.scrollbarMinHeight=n,this.readonly$=a,this.wrapClassName=c,this.onDragScroll=l,this.scrollbarHeight$=w([s,r,i],([o,d,p])=>y(d.height/(d.width/p.width*p.height)*o.height,n,o.height)),this.scrollTop$=w([s,r,i,this.scrollbarHeight$,this.pagesScrollTop$],([o,d,p,u,h])=>y(h/(p.height-p.width/d.width*d.height)*(o.height-u),0,o.height-u)),this.$scrollbar=this.renderScrollbar()}mount(e){e.appendChild(this.$scrollbar)}destroy(){this.$scrollbar.remove(),this.onDragScroll=void 0,this.sideEffect.flushAll()}renderScrollbar(){const e=document.createElement("button");e.className=this.wrapClassName("scrollbar"),e.style.minHeight=`${this.scrollbarMinHeight}px`,this.sideEffect.addDisposer([this.scrollbarHeight$.subscribe(r=>{e.style.height=`${r}px`}),this.scrollTop$.subscribe(r=>{this.scrolling$.setValue(!0),this.sideEffect.setTimeout(()=>this.scrolling$.setValue(!1),100,"reset-scrolling");const i=()=>e.style.transform=`translateY(${r}px)`;window.requestAnimationFrame?window.requestAnimationFrame(i):i()}),this.scrolling$.subscribe(r=>{e.classList.toggle(this.wrapClassName("scrolling"),r)})]);const s=r=>{if(!r.isPrimary||this.readonly$.value||r.button!=null&&r.button!==0)return;Je(r);const i=this.wrapClassName("scrollbar-dragging");e.classList.toggle(i,!0);const a=this.pagesScrollTop$.value,{clientY:n}=fe(r),c=o=>{if(!o.isPrimary||this.readonly$.value)return;const{clientY:d}=fe(o),p=d-n;Math.abs(p)>0&&this.onDragScroll&&this.onDragScroll(a+p/this.containerRect$.value.height*this.pagesSize$.value.height)},l=o=>{!o.isPrimary||(e.classList.toggle(i,!1),window.removeEventListener("pointermove",c,!0),window.removeEventListener("pointerup",l,!0),window.removeEventListener("pointercancel",l,!0))};window.addEventListener("pointermove",c,!0),window.addEventListener("pointerup",l,!0),window.addEventListener("pointercancel",l,!0)};return this.sideEffect.addEventListener(e,"pointerdown",s),e}}class Ms{constructor({whiteboard:e,readonly$:s,box:r,pages:i,pagesScrollTop:a=0,onUserScroll:n}){this.sideEffect=new D,this.userScrolling=!1,this.whiteboard=e,this.readonly$=s,this.box=r,this.pages=i,this.onUserScroll=n;const c=()=>{var o;this.userScrolling=!1,(o=this.onUserScroll)==null||o.call(this,this.pagesScrollTop$.value)};this.debounceOnUserScroll=()=>{this.userScrolling=!0,this.sideEffect.setTimeout(c,80,"debounceOnUserScroll")};const l=new S(i);this.pagesScrollTop$=new S(a),this.pagesSize$=P(l,o=>{let d=0,p=0;for(let u=o.length-1;u>=0;u--){const h=o[u];h.width>d&&(d=h.width),p+=h.height}return{width:Math.max(1,d),height:Math.max(1,p)}},{compare:Xe}),this.pageRenderer=new Vs({pagesScrollTop$:this.pagesScrollTop$,containerRect$:r._stageRect$,pages$:l,pagesSize$:this.pagesSize$}),this.viewer=new qe({readonly$:s,pagesIndex$:this.pageRenderer._pagesIndex$,box:r,pages:i,playable:!1}),this.sideEffect.addDisposer([this.viewer.events.on("next",()=>{this.userScrollByPercent(.8)}),this.viewer.events.on("back",()=>{this.userScrollByPercent(-.8)})]),this.scrollbar=new Os({pagesScrollTop$:this.pagesScrollTop$,containerRect$:r._bodyRect$,stageRect$:r._stageRect$,pagesSize$:this.pagesSize$,readonly$:s,wrapClassName:this.wrapClassName.bind(this),onDragScroll:o=>{this.pageScrollTo(o),this.debounceOnUserScroll()}}),this.pageScrollStepper=new Is({start:this.pagesScrollTop$.value,onStep:o=>{this.pageScrollTo(o)}}),this.sideEffect.addDisposer(this.viewer.events.on("jumpPage",o=>this.userScrollToPageIndex(o))),this.render(),this.setupScrollListener(),this.sideEffect.setTimeout(()=>{this.userScrolling||this.pageScrollTo(this.pageRenderer.pagesScrollTop)},100)}get pagesScrollTop(){return this.pagesScrollTop$.value}destroy(){this.sideEffect.flushAll(),this.pageScrollStepper.destroy(),this.onUserScroll=void 0,this.viewer.destroy(),this.pageRenderer.destroy(),this.scrollbar.destroy()}syncPageScrollTop(e){!this.userScrolling&&e>=0&&Math.abs(this.pagesScrollTop$.value-e)>.01&&this.pageScrollStepper.stepTo(e,this.pagesScrollTop$.value)}render(){this.box.$content.style.overflow="hidden",this.box.mountStage(this.pageRenderer.$pages),this.scrollbar.mount(this.box.$body)}pageScrollTo(e){const s=this.whiteboard.view.size.height/2/this.pageRenderer.scale;this.whiteboard.view.moveCamera({centerY:y(e+s,s,this.pagesSize$.value.height-s),animationMode:"immediately"})}userScrollToPageIndex(e){var s;if(e=y(e,0,this.pages.length-1),!this.readonly$.value&&!Number.isNaN(e)){const r=this.pageRenderer.pagesYs[e];r>=0&&((s=this.onUserScroll)==null||s.call(this,r+5/this.pageRenderer.scale))}}userScrollByPercent(e){var s;this.readonly$.value||(s=this.onUserScroll)==null||s.call(this,y(this.pageRenderer.pagesScrollTop+this.pageRenderer.containerRect.height/this.pageRenderer.scale*y(e,-1,1),0,this.pageRenderer.pagesSize.height-this.pageRenderer.containerRect.height/this.pageRenderer.scale))}setupScrollListener(){this.sideEffect.addEventListener(this.box.$main,"wheel",e=>{Je(e),!this.readonly$.value&&this.pageScrollStepper.paused&&(this.pageScrollTo(this.pagesScrollTop+e.deltaY),this.debounceOnUserScroll())},{passive:!1}),this.sideEffect.addEventListener(this.box.$main,"touchmove",e=>{!this.readonly$.value&&e.touches.length>1&&this.debounceOnUserScroll()},{passive:!0,capture:!0}),this.sideEffect.add(()=>{const e=s=>{const{width:r,height:i}=this.whiteboard.view.size;if(r<=0||i<=0)return;const a=s.centerY-this.pageRenderer.containerRect.height/this.pageRenderer.scale/2;this.pagesScrollTop$.setValue(a)};return this.whiteboard.view.callbacks.on("onCameraUpdated",e),()=>this.whiteboard.view.callbacks.off("onCameraUpdated",e)}),this.sideEffect.addDisposer(this.box._stageRect$.subscribe(e=>{const{width:s,height:r}=this.pagesSize$.value;this.whiteboard.view.moveCameraToContain({originX:0,originY:this.pageRenderer.pagesScrollTop,width:s,height:e.height/this.pageRenderer.scale,animationMode:"immediately"}),this.whiteboard.view.setCameraBound({damping:1,maxContentMode:()=>this.pageRenderer.scale,minContentMode:()=>this.pageRenderer.scale,centerX:s/2,centerY:r/2,width:s,height:r})}),"whiteboard-size-update"),this.sideEffect.addEventListener(window,"keyup",e=>{if(!(this.readonly$.value||!this.box.focus||this.box.minimized))switch(e.key){case"PageDown":{this.userScrollByPercent(.8);break}case"PageUp":{this.userScrollByPercent(-.8);break}case"ArrowLeft":{this.userScrollByPercent(-.25);break}case"ArrowRight":{this.userScrollByPercent(.25);break}case"ArrowDown":{this.userScrollByPercent(.5);break}case"ArrowUp":{this.userScrollByPercent(-.5);break}}},{capture:!0})}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}}class Rs{constructor({readonly$:e,context:s,whiteboard:r,box:i,pages:a}){this.sideEffect=new D,this.context=s,this.whiteboard=r,this.box=i,this.pages=a;const n=new S(s.displayer.state.sceneState.index||0);this.pagesIndex$=n,this.sideEffect.add(()=>{const c=l=>{this.jumpToPage(l.index)};return this.context.emitter.on("sceneStateChange",c),()=>this.context.emitter.off("sceneStateChange",c)}),this.viewer=new qe({readonly$:e,pagesIndex$:n,box:i,pages:a,playable:!0}),this.sideEffect.addDisposer([this.viewer.events.on("jumpPage",c=>this.jumpToPage(c,!0)),this.viewer.events.on("play",()=>{var c;return(c=this.context.room)==null?void 0:c.pptNextStep()}),this.viewer.events.on("back",()=>this.prevPage()),this.viewer.events.on("next",()=>this.nextPage())]),this.render(),this.sideEffect.addDisposer(n.subscribe((c,l)=>{var p,u;if(e.value)return;const o=this.context.getInitScenePath(),d=(u=(p=this.context.getScenes())==null?void 0:p[c])==null?void 0:u.name;if(o&&d&&this.context.setScenePath(`${o}/${d}`),l){const h=this.context.room;if(h){const g=h.state.globalState.__pptState;h.setGlobalState({__pptState:g&&{uuid:g.uuid,pageIndex:c,disableAutoPlay:g.disableAutoPlay}})}}}))}destroy(){this.sideEffect.flushAll(),this.viewer.destroy()}nextPage(){this.jumpToPage(this.pagesIndex$.value+1,!0)}prevPage(){this.jumpToPage(this.pagesIndex$.value-1,!0)}jumpToPage(e,s=!1){this.pagesIndex$.setValue(y(e,0,this.pages.length-1),s)}render(){var s;this.box.mountStage(document.createElement("div")),this.sideEffect.addEventListener(window,"keydown",r=>{var i;if(this.box.focus)switch(r.key){case"ArrowUp":case"ArrowLeft":{this.prevPage();break}case"ArrowRight":case"ArrowDown":{(i=this.context.room)==null||i.pptNextStep();break}}});const e=(s=this.whiteboard.view.divElement)==null?void 0:s.parentElement;e&&this.sideEffect.addEventListener(e,"click",r=>{var a;const i=this.context.room;if(i&&i.state.memberState.currentApplianceName==="clicker"){for(let n=r.target;n;n=n.parentElement)if((a=n.classList)!=null&&a.contains("ppt-event-source"))return;i.pptNextStep()}})}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Hs="DocsViewer",Bs={kind:Hs,setup(t){const e=t.box,s=t.getScenes();if(!s)throw new Error("[Docs Viewer]: scenes not found.");const r=new D,i=s.map(({ppt:n})=>n?{width:n.width,height:n.height,src:n.src,thumbnail:n.previewURL}:null).filter(n=>Boolean(n));if(i.length<=0)throw new Error("[Docs Viewer]: empty scenes.");e.mountStyles(Ke);const a=new S(!t.isWritable);r.addDisposer(t.emitter.on("writableChange",n=>{a.setValue(!n)})),i[0].src.startsWith("ppt")?Fs(r,t,e,i,a):Us(r,t,e,i,a),r.addDisposer(t.emitter.on("destroy",()=>{r.flushAll()}))}};function Us(t,e,s,r,i){const a=e.createWhiteBoardView({syncCamera:!1});t.addDisposer(i.subscribe(o=>{a.view.disableCameraTransform=o}));const n=e.createStorage("static-docs-viewer",{pagesScrollTop:0}),c=new Ms({whiteboard:a,readonly$:i,box:s,pages:r,pagesScrollTop:n.state.pagesScrollTop,onUserScroll:o=>{e.isWritable&&n.setState({pagesScrollTop:o})}});t.addDisposer(()=>c.destroy()),t.addDisposer(n.addStateChangedListener(o=>{o.pagesScrollTop&&c.syncPageScrollTop(o.pagesScrollTop.newValue||0)}));let l=1;if(r.length>0){const{width:o,height:d}=r[0];d<=o?l=d/o:l=1/2*d/o}t.addDisposer(w([s._maximized$,s._managerStageRect$,s._intrinsicSize$],([o,d,p])=>o?l:p.height*(d.height/d.width)/p.width).subscribe(o=>{s.setStageRatio(o)}))}function Fs(t,e,s,r,i){const a=e.createWhiteBoardView();a.view.disableCameraTransform=!0;const n=new Rs({context:e,whiteboard:a,box:s,pages:r,readonly$:i});t.addDisposer(()=>n.destroy());const c=new S({width:r[0].width,height:r[0].height},{compare:Xe});if(t.addDisposer(n.pagesIndex$.subscribe(l=>{const o=r[l];o&&c.setValue({width:o.width,height:o.height})})),t.addDisposer(c.subscribe(l=>{i.value||a.setBaseRect(l)})),e.isAddApp){const l=t.add(()=>{const o=({width:d,height:p})=>{if(r.length>0&&s.state!=="maximized"){const{width:u,height:h}=r[0],f=h/u*d-p;f!==0&&e.isWritable&&e.emitter.emit("setBoxSize",{width:s.intrinsicWidth,height:s.intrinsicHeight+f/s.rootRect.height})}t.remove(l)};return a.view.callbacks.once("onSizeUpdated",o),()=>a.view.callbacks.off("onSizeUpdated",o)})}}exports.default=Bs;
 //# sourceMappingURL=main.cjs.js.map

dist/main.iife.js

@@ -1,4 +0,3 @@
-var $i=Object.defineProperty,Ii=Object.defineProperties;var Ni=Object.getOwnPropertyDescriptors;var yt=Object.getOwnPropertySymbols;var ki=Object.prototype.hasOwnProperty,Ri=Object.prototype.propertyIsEnumerable;var Et=(u,p,f)=>p in u?$i(u,p,{enumerable:!0,configurable:!0,writable:!0,value:f}):u[p]=f,we=(u,p)=>{for(var f in p||(p={}))ki.call(p,f)&&Et(u,f,p[f]);if(yt)for(var f of yt(p))Ri.call(p,f)&&Et(u,f,p[f]);return u},be=(u,p)=>Ii(u,Ni(p));var NetlessAppDocsViewer=function(u){"use strict";var p=`.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;color:#191919}.netless-app-docs-viewer-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.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;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-docs-viewer-footer-btn:hover{background:transparent!important}}.netless-app-docs-viewer-footer-btn>svg{width:100%;height:100%}.netless-app-docs-viewer-footer-btn>svg:nth-of-type(2){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(2){display:initial}.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;white-space:nowrap;word-break:keep-all}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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-readonly.netless-app-docs-viewer-float-footer{display:none}.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:active,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:focus,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-docs-viewer-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-docs-viewer-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-docs-viewer-preview{background:rgba(50,50,50,.9)}.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,.4);box-shadow:1px 1px 8px #ffffffb3;opacity:0;transition:background .4s,opacity .4s 3s,transform .2s;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.6);opacity:1;transition:background .4s,opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.page-renderer-pages-container{position:relative;overflow:hidden}.page-renderer-page{position:absolute;top:0;left:0;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-pages-container.is-hwa .page-renderer-page{will-change:transform}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.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,.netless-app-docs-viewer-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-dynamic-wb-view .cursor-clicker .ppt-event-source{cursor:pointer}
-`;const f=(t,e,s,i)=>{if(s==="length"||s==="prototype"||s==="arguments"||s==="caller")return;const r=Object.getOwnPropertyDescriptor(t,s),o=Object.getOwnPropertyDescriptor(e,s);!Tt(r,o)&&i||Object.defineProperty(t,s,o)},Tt=function(t,e){return t===void 0||t.configurable||t.writable===e.writable&&t.enumerable===e.enumerable&&t.configurable===e.configurable&&(t.writable||t.value===e.value)},Ct=(t,e)=>{const s=Object.getPrototypeOf(e);s!==Object.getPrototypeOf(t)&&Object.setPrototypeOf(t,s)},_t=(t,e)=>`/* Wrapped ${t}*/
-${e}`,$t=Object.getOwnPropertyDescriptor(Function.prototype,"toString"),It=Object.getOwnPropertyDescriptor(Function.prototype.toString,"name"),Nt=(t,e,s)=>{const i=s===""?"":`with ${s.trim()}() `,r=_t.bind(null,i,e.toString());Object.defineProperty(r,"name",It),Object.defineProperty(t,"toString",be(we({},$t),{value:r}))};function kt(t,e,{ignoreNonConfigurable:s=!1}={}){const{name:i}=t;for(const r of Reflect.ownKeys(e))f(t,e,r,s);return Ct(t,e),Nt(t,e,i),t}const Rt=(t,e={})=>{if(typeof t!="function")throw new TypeError(`Expected the first argument to be a function, got \`${typeof t}\``);const{wait:s=0,maxWait:i=Number.Infinity,before:r=!1,after:o=!0}=e;if(!r&&!o)throw new Error("Both `before` and `after` are false, function wouldn't be called.");let n,a,c;const l=function(...h){const d=this,pe=()=>{n=void 0,a&&(clearTimeout(a),a=void 0),o&&(c=t.apply(d,h))},ue=()=>{a=void 0,n&&(clearTimeout(n),n=void 0),o&&(c=t.apply(d,h))},ge=r&&!n;return clearTimeout(n),n=setTimeout(pe,s),i>0&&i!==Number.Infinity&&!a&&(a=setTimeout(ue,i)),ge&&(c=t.apply(d,h)),c};return kt(l,t),l.cancel=()=>{n&&(clearTimeout(n),n=void 0),a&&(clearTimeout(a),a=void 0)},l},me="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Ot=me.length,Se=Array(20),k=()=>{for(let t=0;t<20;t++)Se[t]=me.charAt(Math.random()*Ot);return Se.join("")};class H{constructor(){this.disposers=new Map}add(e,s=k()){return this.flush(s),this.disposers.set(s,e()),s}addDisposer(e,s=k()){return this.flush(s),this.disposers.set(s,e),s}addEventListener(e,s,i,r,o=k()){return this.add(()=>(e.addEventListener(s,i,r),()=>e.removeEventListener(s,i,r)),o),o}setTimeout(e,s,i=k()){return this.add(()=>{const r=window.setTimeout(()=>{this.remove(i),e()},s);return()=>window.clearTimeout(r)},i)}setInterval(e,s,i=k()){return this.add(()=>{const r=window.setInterval(e,s);return()=>window.clearInterval(r)},i)}remove(e){const s=this.disposers.get(e);return this.disposers.delete(e),s}flush(e){const s=this.remove(e);if(s)try{s()}catch(i){console.error(i)}}flushAll(){this.disposers.forEach(e=>{try{e()}catch(s){console.error(s)}}),this.disposers.clear()}}var x=[],Lt=function(){return x.some(function(t){return t.activeTargets.length>0})},Pt=function(){return x.some(function(t){return t.skippedTargets.length>0})},xe="ResizeObserver loop completed with undelivered notifications.",zt=function(){var t;typeof ErrorEvent=="function"?t=new ErrorEvent("error",{message:xe}):(t=document.createEvent("Event"),t.initEvent("error",!1,!1),t.message=xe),window.dispatchEvent(t)},R;(function(t){t.BORDER_BOX="border-box",t.CONTENT_BOX="content-box",t.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"})(R||(R={}));var y=function(t){return Object.freeze(t)},At=function(){function t(e,s){this.inlineSize=e,this.blockSize=s,y(this)}return t}(),ye=function(){function t(e,s,i,r){return this.x=e,this.y=s,this.width=i,this.height=r,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,y(this)}return t.prototype.toJSON=function(){var e=this,s=e.x,i=e.y,r=e.top,o=e.right,n=e.bottom,a=e.left,c=e.width,l=e.height;return{x:s,y:i,top:r,right:o,bottom:n,left:a,width:c,height:l}},t.fromRect=function(e){return new t(e.x,e.y,e.width,e.height)},t}(),J=function(t){return t instanceof SVGElement&&"getBBox"in t},Ee=function(t){if(J(t)){var e=t.getBBox(),s=e.width,i=e.height;return!s&&!i}var r=t,o=r.offsetWidth,n=r.offsetHeight;return!(o||n||t.getClientRects().length)},Te=function(t){var e,s;if(t instanceof Element)return!0;var i=(s=(e=t)===null||e===void 0?void 0:e.ownerDocument)===null||s===void 0?void 0:s.defaultView;return!!(i&&t instanceof i.Element)},Ht=function(t){switch(t.tagName){case"INPUT":if(t.type!=="image")break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return!0}return!1},O=typeof window!="undefined"?window:{},V=new WeakMap,Ce=/auto|scroll/,Vt=/^tb|vertical/,Mt=/msie|trident/i.test(O.navigator&&O.navigator.userAgent),v=function(t){return parseFloat(t||"0")},C=function(t,e,s){return t===void 0&&(t=0),e===void 0&&(e=0),s===void 0&&(s=!1),new At((s?e:t)||0,(s?t:e)||0)},_e=y({devicePixelContentBoxSize:C(),borderBoxSize:C(),contentBoxSize:C(),contentRect:new ye(0,0,0,0)}),$e=function(t,e){if(e===void 0&&(e=!1),V.has(t)&&!e)return V.get(t);if(Ee(t))return V.set(t,_e),_e;var s=getComputedStyle(t),i=J(t)&&t.ownerSVGElement&&t.getBBox(),r=!Mt&&s.boxSizing==="border-box",o=Vt.test(s.writingMode||""),n=!i&&Ce.test(s.overflowY||""),a=!i&&Ce.test(s.overflowX||""),c=i?0:v(s.paddingTop),l=i?0:v(s.paddingRight),h=i?0:v(s.paddingBottom),d=i?0:v(s.paddingLeft),pe=i?0:v(s.borderTopWidth),ue=i?0:v(s.borderRightWidth),ge=i?0:v(s.borderBottomWidth),yi=i?0:v(s.borderLeftWidth),wt=d+l,bt=c+h,fe=yi+ue,ve=pe+ge,mt=a?t.offsetHeight-ve-t.clientHeight:0,St=n?t.offsetWidth-fe-t.clientWidth:0,Ei=r?wt+fe:0,Ti=r?bt+ve:0,X=i?i.width:v(s.width)-Ei-St,q=i?i.height:v(s.height)-Ti-mt,Ci=X+wt+St+fe,_i=q+bt+mt+ve,xt=y({devicePixelContentBoxSize:C(Math.round(X*devicePixelRatio),Math.round(q*devicePixelRatio),o),borderBoxSize:C(Ci,_i,o),contentBoxSize:C(X,q,o),contentRect:new ye(d,c,X,q)});return V.set(t,xt),xt},Ie=function(t,e,s){var i=$e(t,s),r=i.borderBoxSize,o=i.contentBoxSize,n=i.devicePixelContentBoxSize;switch(e){case R.DEVICE_PIXEL_CONTENT_BOX:return n;case R.BORDER_BOX:return r;default:return o}},Bt=function(){function t(e){var s=$e(e);this.target=e,this.contentRect=s.contentRect,this.borderBoxSize=y([s.borderBoxSize]),this.contentBoxSize=y([s.contentBoxSize]),this.devicePixelContentBoxSize=y([s.devicePixelContentBoxSize])}return t}(),Ne=function(t){if(Ee(t))return 1/0;for(var e=0,s=t.parentNode;s;)e+=1,s=s.parentNode;return e},Dt=function(){var t=1/0,e=[];x.forEach(function(n){if(n.activeTargets.length!==0){var a=[];n.activeTargets.forEach(function(l){var h=new Bt(l.target),d=Ne(l.target);a.push(h),l.lastReportedSize=Ie(l.target,l.observedBox),d<t&&(t=d)}),e.push(function(){n.callback.call(n.observer,a,n.observer)}),n.activeTargets.splice(0,n.activeTargets.length)}});for(var s=0,i=e;s<i.length;s++){var r=i[s];r()}return t},ke=function(t){x.forEach(function(s){s.activeTargets.splice(0,s.activeTargets.length),s.skippedTargets.splice(0,s.skippedTargets.length),s.observationTargets.forEach(function(r){r.isActive()&&(Ne(r.target)>t?s.activeTargets.push(r):s.skippedTargets.push(r))})})},Wt=function(){var t=0;for(ke(t);Lt();)t=Dt(),ke(t);return Pt()&&zt(),t>0},K,Re=[],Ft=function(){return Re.splice(0).forEach(function(t){return t()})},Ut=function(t){if(!K){var e=0,s=document.createTextNode(""),i={characterData:!0};new MutationObserver(function(){return Ft()}).observe(s,i),K=function(){s.textContent=""+(e?e--:e++)}}Re.push(t),K()},Yt=function(t){Ut(function(){requestAnimationFrame(t)})},M=0,jt=function(){return!!M},Gt=250,Xt={attributes:!0,characterData:!0,childList:!0,subtree:!0},Oe=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],Le=function(t){return t===void 0&&(t=0),Date.now()+t},Z=!1,qt=function(){function t(){var e=this;this.stopped=!0,this.listener=function(){return e.schedule()}}return t.prototype.run=function(e){var s=this;if(e===void 0&&(e=Gt),!Z){Z=!0;var i=Le(e);Yt(function(){var r=!1;try{r=Wt()}finally{if(Z=!1,e=i-Le(),!jt())return;r?s.run(1e3):e>0?s.run(e):s.start()}})}},t.prototype.schedule=function(){this.stop(),this.run()},t.prototype.observe=function(){var e=this,s=function(){return e.observer&&e.observer.observe(document.body,Xt)};document.body?s():O.addEventListener("DOMContentLoaded",s)},t.prototype.start=function(){var e=this;this.stopped&&(this.stopped=!1,this.observer=new MutationObserver(this.listener),this.observe(),Oe.forEach(function(s){return O.addEventListener(s,e.listener,!0)}))},t.prototype.stop=function(){var e=this;this.stopped||(this.observer&&this.observer.disconnect(),Oe.forEach(function(s){return O.removeEventListener(s,e.listener,!0)}),this.stopped=!0)},t}(),Q=new qt,Pe=function(t){!M&&t>0&&Q.start(),M+=t,!M&&Q.stop()},Jt=function(t){return!J(t)&&!Ht(t)&&getComputedStyle(t).display==="inline"},Kt=function(){function t(e,s){this.target=e,this.observedBox=s||R.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}return t.prototype.isActive=function(){var e=Ie(this.target,this.observedBox,!0);return Jt(this.target)&&(this.lastReportedSize=e),this.lastReportedSize.inlineSize!==e.inlineSize||this.lastReportedSize.blockSize!==e.blockSize},t}(),Zt=function(){function t(e,s){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=e,this.callback=s}return t}(),B=new WeakMap,ze=function(t,e){for(var s=0;s<t.length;s+=1)if(t[s].target===e)return s;return-1},D=function(){function t(){}return t.connect=function(e,s){var i=new Zt(e,s);B.set(e,i)},t.observe=function(e,s,i){var r=B.get(e),o=r.observationTargets.length===0;ze(r.observationTargets,s)<0&&(o&&x.push(r),r.observationTargets.push(new Kt(s,i&&i.box)),Pe(1),Q.schedule())},t.unobserve=function(e,s){var i=B.get(e),r=ze(i.observationTargets,s),o=i.observationTargets.length===1;r>=0&&(o&&x.splice(x.indexOf(i),1),i.observationTargets.splice(r,1),Pe(-1))},t.disconnect=function(e){var s=this,i=B.get(e);i.observationTargets.slice().forEach(function(r){return s.unobserve(e,r.target)}),i.activeTargets.splice(0,i.activeTargets.length)},t}(),Qt=function(){function t(e){if(arguments.length===0)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if(typeof e!="function")throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");D.connect(this,e)}return t.prototype.observe=function(e,s){if(arguments.length===0)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Te(e))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");D.observe(this,e,s)},t.prototype.unobserve=function(e){if(arguments.length===0)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Te(e))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");D.unobserve(this,e)},t.prototype.disconnect=function(){D.disconnect(this)},t.toString=function(){return"function ResizeObserver () { [polyfill code] }"},t}();function es(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-sidebar`),s.setAttribute("viewBox","0 0 64 64");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M50 8H14c-3.309 0-6 2.691-6 6v36c0 3.309 2.691 6 6 6h36c3.309 0 6-2.691 6-6V14c0-3.309-2.691-6-6-6zM12 50V14c0-1.103.897-2 2-2h8v40h-8c-1.103 0-2-.897-2-2zm40 0c0 1.103-.897 2-2 2H26V12h24c1.103 0 2 .897 2 2z"),s.appendChild(i),s}function ts(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-left`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M177.81 249.959L337.473 90.295c2.722-2.865 2.651-7.378-.143-10.1-2.793-2.65-7.163-2.65-9.956 0l-164.75 164.75c-2.793 2.793-2.793 7.306 0 10.1l164.75 164.75c2.865 2.722 7.378 2.65 10.099-.143 2.651-2.794 2.651-7.163 0-9.957L177.809 249.959z"),s.appendChild(i),s}function ss(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-right`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M322.19 250.041L162.527 409.705c-2.722 2.865-2.651 7.378.143 10.1 2.793 2.65 7.163 2.65 9.956 0l164.75-164.75c2.793-2.793 2.793-7.306 0-10.1l-164.75-164.75c-2.865-2.722-7.378-2.65-10.099.143-2.651 2.794-2.651 7.163 0 9.957l159.664 159.736z"),s.appendChild(i),s}function is(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-play`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M418.158 257.419L174.663 413.33c-6.017 3.919-15.708 3.772-21.291-.29-2.791-2.018-4.295-4.483-4.295-7.084V94.109c0-5.65 6.883-10.289 15.271-10.289 4.298 0 8.391 1.307 11.181 3.332l242.629 155.484c6.016 3.917 6.451 10.292.649 14.491-.216.154-.432.154-.649.292zM170.621 391.288l223.116-141.301L170.71 107.753l-.089 283.535z"),s.appendChild(i),s}function rs(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-pause`),s.setAttribute("viewBox","0 0 500 500");const i=document.createElementNS(e,"path");return i.setAttribute("fill","currentColor"),i.setAttribute("d","M312.491 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261zM165.257 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261z"),s.appendChild(i),s}const E=typeof window!="undefined",Ae=E&&!("onscroll"in window)||typeof navigator!="undefined"&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),He=E&&"IntersectionObserver"in window,Ve=E&&"classList"in document.createElement("p"),Me=E&&window.devicePixelRatio>1,os={elements_selector:".lazy",container:Ae||E?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},Be=t=>Object.assign({},os,t),De=function(t,e){let s;const i="LazyLoad::Initialized",r=new t(e);try{s=new CustomEvent(i,{detail:{instance:r}})}catch{s=document.createEvent("CustomEvent"),s.initCustomEvent(i,!1,!1,{instance:r})}window.dispatchEvent(s)},ns=(t,e)=>{if(!!e)if(!e.length)De(t,e);else for(let s=0,i;i=e[s];s+=1)De(t,i)},b="src",ee="srcset",te="sizes",We="poster",L="llOriginalAttrs",Fe="data",se="loading",Ue="loaded",Ye="applied",as="entered",ie="error",je="native",Ge="data-",Xe="ll-status",g=(t,e)=>t.getAttribute(Ge+e),cs=(t,e,s)=>{var i=Ge+e;if(s===null){t.removeAttribute(i);return}t.setAttribute(i,s)},P=t=>g(t,Xe),T=(t,e)=>cs(t,Xe,e),W=t=>T(t,null),re=t=>P(t)===null,ls=t=>P(t)===se,hs=t=>P(t)===ie,oe=t=>P(t)===je,ds=[se,Ue,Ye,ie],ps=t=>ds.indexOf(P(t))>=0,m=(t,e,s,i)=>{if(!!t){if(i!==void 0){t(e,s,i);return}if(s!==void 0){t(e,s);return}t(e)}},_=(t,e)=>{if(Ve){t.classList.add(e);return}t.className+=(t.className?" ":"")+e},w=(t,e)=>{if(Ve){t.classList.remove(e);return}t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},us=t=>{t.llTempImage=document.createElement("IMG")},gs=t=>{delete t.llTempImage},qe=t=>t.llTempImage,F=(t,e)=>{if(!e)return;const s=e._observer;!s||s.unobserve(t)},fs=t=>{t.disconnect()},vs=(t,e,s)=>{e.unobserve_entered&&F(t,s)},ne=(t,e)=>{!t||(t.loadingCount+=e)},ws=t=>{!t||(t.toLoadCount-=1)},Je=(t,e)=>{!t||(t.toLoadCount=e)},bs=t=>t.loadingCount>0,ms=t=>t.toLoadCount>0,Ke=t=>{let e=[];for(let s=0,i;i=t.children[s];s+=1)i.tagName==="SOURCE"&&e.push(i);return e},ae=(t,e)=>{const s=t.parentNode;if(!s||s.tagName!=="PICTURE")return;Ke(s).forEach(e)},Ze=(t,e)=>{Ke(t).forEach(e)},U=[b],Qe=[b,We],Y=[b,ee,te],et=[Fe],j=t=>!!t[L],tt=t=>t[L],st=t=>delete t[L],$=(t,e)=>{if(j(t))return;const s={};e.forEach(i=>{s[i]=t.getAttribute(i)}),t[L]=s},Ss=t=>{j(t)||(t[L]={backgroundImage:t.style.backgroundImage})},xs=(t,e,s)=>{if(!s){t.removeAttribute(e);return}t.setAttribute(e,s)},I=(t,e)=>{if(!j(t))return;const s=tt(t);e.forEach(i=>{xs(t,i,s[i])})},ys=t=>{if(!j(t))return;const e=tt(t);t.style.backgroundImage=e.backgroundImage},Es=(t,e,s)=>{_(t,e.class_applied),T(t,Ye),s&&(e.unobserve_completed&&F(t,e),m(e.callback_applied,t,s))},it=(t,e,s)=>{_(t,e.class_loading),T(t,se),s&&(ne(s,1),m(e.callback_loading,t,s))},S=(t,e,s)=>{!s||t.setAttribute(e,s)},rt=(t,e)=>{S(t,te,g(t,e.data_sizes)),S(t,ee,g(t,e.data_srcset)),S(t,b,g(t,e.data_src))},Ts=(t,e)=>{ae(t,s=>{$(s,Y),rt(s,e)}),$(t,Y),rt(t,e)},Cs=(t,e)=>{$(t,U),S(t,b,g(t,e.data_src))},_s=(t,e)=>{Ze(t,s=>{$(s,U),S(s,b,g(s,e.data_src))}),$(t,Qe),S(t,We,g(t,e.data_poster)),S(t,b,g(t,e.data_src)),t.load()},$s=(t,e)=>{$(t,et),S(t,Fe,g(t,e.data_src))},Is=(t,e,s)=>{const i=g(t,e.data_bg),r=g(t,e.data_bg_hidpi),o=Me&&r?r:i;!o||(t.style.backgroundImage=`url("${o}")`,qe(t).setAttribute(b,o),it(t,e,s))},Ns=(t,e,s)=>{const i=g(t,e.data_bg_multi),r=g(t,e.data_bg_multi_hidpi),o=Me&&r?r:i;!o||(t.style.backgroundImage=o,Es(t,e,s))},ot={IMG:Ts,IFRAME:Cs,VIDEO:_s,OBJECT:$s},ks=(t,e)=>{const s=ot[t.tagName];!s||s(t,e)},Rs=(t,e,s)=>{const i=ot[t.tagName];!i||(i(t,e),it(t,e,s))},Os=["IMG","IFRAME","VIDEO","OBJECT"],Ls=t=>Os.indexOf(t.tagName)>-1,nt=(t,e)=>{e&&!bs(e)&&!ms(e)&&m(t.callback_finish,e)},at=(t,e,s)=>{t.addEventListener(e,s),t.llEvLisnrs[e]=s},Ps=(t,e,s)=>{t.removeEventListener(e,s)},ce=t=>!!t.llEvLisnrs,zs=(t,e,s)=>{ce(t)||(t.llEvLisnrs={});const i=t.tagName==="VIDEO"?"loadeddata":"load";at(t,i,e),at(t,"error",s)},le=t=>{if(!ce(t))return;const e=t.llEvLisnrs;for(let s in e){const i=e[s];Ps(t,s,i)}delete t.llEvLisnrs},ct=(t,e,s)=>{gs(t),ne(s,-1),ws(s),w(t,e.class_loading),e.unobserve_completed&&F(t,s)},As=(t,e,s,i)=>{const r=oe(e);ct(e,s,i),_(e,s.class_loaded),T(e,Ue),m(s.callback_loaded,e,i),r||nt(s,i)},Hs=(t,e,s,i)=>{const r=oe(e);ct(e,s,i),_(e,s.class_error),T(e,ie),m(s.callback_error,e,i),r||nt(s,i)},he=(t,e,s)=>{const i=qe(t)||t;if(ce(i))return;zs(i,n=>{As(n,t,e,s),le(i)},n=>{Hs(n,t,e,s),le(i)})},Vs=(t,e,s)=>{us(t),he(t,e,s),Ss(t),Is(t,e,s),Ns(t,e,s)},Ms=(t,e,s)=>{he(t,e,s),Rs(t,e,s)},de=(t,e,s)=>{Ls(t)?Ms(t,e,s):Vs(t,e,s)},Bs=(t,e,s)=>{t.setAttribute("loading","lazy"),he(t,e,s),ks(t,e),T(t,je)},lt=t=>{t.removeAttribute(b),t.removeAttribute(ee),t.removeAttribute(te)},Ds=t=>{ae(t,e=>{lt(e)}),lt(t)},ht=t=>{ae(t,e=>{I(e,Y)}),I(t,Y)},Ws={IMG:ht,IFRAME:t=>{I(t,U)},VIDEO:t=>{Ze(t,e=>{I(e,U)}),I(t,Qe),t.load()},OBJECT:t=>{I(t,et)}},Fs=t=>{const e=Ws[t.tagName];if(!e){ys(t);return}e(t)},Us=(t,e)=>{re(t)||oe(t)||(w(t,e.class_entered),w(t,e.class_exited),w(t,e.class_applied),w(t,e.class_loading),w(t,e.class_loaded),w(t,e.class_error))},Ys=(t,e)=>{Fs(t),Us(t,e),W(t),st(t)},js=(t,e,s,i)=>{!s.cancel_on_exit||!ls(t)||t.tagName==="IMG"&&(le(t),Ds(t),ht(t),w(t,s.class_loading),ne(i,-1),W(t),m(s.callback_cancel,t,e,i))},Gs=(t,e,s,i)=>{const r=ps(t);T(t,as),_(t,s.class_entered),w(t,s.class_exited),vs(t,s,i),m(s.callback_enter,t,e,i),!r&&de(t,s,i)},Xs=(t,e,s,i)=>{re(t)||(_(t,s.class_exited),js(t,e,s,i),m(s.callback_exit,t,e,i))},qs=["IMG","IFRAME","VIDEO"],dt=t=>t.use_native&&"loading"in HTMLImageElement.prototype,Js=(t,e,s)=>{t.forEach(i=>{qs.indexOf(i.tagName)!==-1&&Bs(i,e,s)}),Je(s,0)},Ks=t=>t.isIntersecting||t.intersectionRatio>0,Zs=t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}),Qs=(t,e,s)=>{t.forEach(i=>Ks(i)?Gs(i.target,i,e,s):Xs(i.target,i,e,s))},ei=(t,e)=>{e.forEach(s=>{t.observe(s)})},ti=(t,e)=>{fs(t),ei(t,e)},si=(t,e)=>{!He||dt(t)||(e._observer=new IntersectionObserver(s=>{Qs(s,t,e)},Zs(t)))},pt=t=>Array.prototype.slice.call(t),G=t=>t.container.querySelectorAll(t.elements_selector),ii=t=>pt(t).filter(re),ri=t=>hs(t),oi=t=>pt(t).filter(ri),ut=(t,e)=>ii(t||G(e)),ni=(t,e)=>{oi(G(t)).forEach(i=>{w(i,t.class_error),W(i)}),e.update()},ai=(t,e)=>{!E||window.addEventListener("online",()=>{ni(t,e)})},z=function(t,e){const s=Be(t);this._settings=s,this.loadingCount=0,si(s,this),ai(s,this),this.update(e)};z.prototype={update:function(t){const e=this._settings,s=ut(t,e);if(Je(this,s.length),Ae||!He){this.loadAll(s);return}if(dt(e)){Js(s,e,this);return}ti(this._observer,s)},destroy:function(){this._observer&&this._observer.disconnect(),G(this._settings).forEach(t=>{st(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;ut(t,e).forEach(i=>{F(i,this),de(i,e,this)})},restoreAll:function(){const t=this._settings;G(t).forEach(e=>{Ys(e,t)})}},z.load=(t,e)=>{const s=Be(e);de(t,s)},z.resetStatus=t=>{W(t)},E&&ns(z,window.lazyLoadOptions);class gt{constructor({readonly:e,box:s,pages:i,onNewPageIndex:r,onPlay:o}){if(this.pageIndex=0,this.namespace="netless-app-docs-viewer",this.isShowPreview=!1,this.isSmallBox=!1,this.sideEffect=new H,i.length<=0)throw new Error("[DocsViewer] Empty pages.");this.readonly=e,this.box=s,this.pages=i,this.onNewPageIndex=r,this.onPlay=o,this.render()}mount(){this.box.mountContent(this.$content),this.box.mountFooter(this.$footer),this.sideEffect.add(()=>{const e=new z({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.flushAll(),this.unmount()}setPageIndex(e){Number.isNaN(e)||(this.pageIndex=e,this.$pageNumberInput.value=String(e+1))}setSmallBox(e){this.isSmallBox!==e&&(this.isSmallBox=e,this.$footer.classList.toggle(this.wrapClassName("float-footer"),e))}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 s=this.wrapClassName("preview-page"),i=this.wrapClassName("preview-page-name");this.pages.forEach((r,o)=>{var d;const n=(d=r.thumbnail)!=null?d:r.src.startsWith("ppt")?void 0:r.src;if(!n)return;const a=String(o),c=document.createElement("a");c.className=s+" "+this.wrapClassName(`preview-page-${o}`),c.setAttribute("href","#"),c.dataset.pageIndex=a;const l=document.createElement("span");l.className=i,l.textContent=String(o+1),l.dataset.pageIndex=a;const h=document.createElement("img");h.width=r.width,h.height=r.height,h.dataset.src=n,h.dataset.pageIndex=a,c.appendChild(h),c.appendChild(l),e.appendChild(c)}),this.sideEffect.addEventListener(e,"click",r=>{var n;if(this.readonly)return;const o=(n=r.target.dataset)==null?void 0:n.pageIndex;o&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation(),this.onNewPageIndex(Number(o)),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");if(e.className=this.wrapClassName("footer"),this.$footer=e,this.readonly&&e.classList.add(this.wrapClassName("readonly")),this.isSmallBox&&e.classList.add(this.wrapClassName("float-footer")),this.pages.some(c=>c.thumbnail||!c.src.startsWith("ppt"))){const c=this.renderFooterBtn("btn-sidebar",es(this.namespace));this.sideEffect.addEventListener(c,"click",()=>{this.readonly||this.togglePreview()}),this.$footer.appendChild(c)}const s=document.createElement("div");s.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back",ts(this.namespace));if(this.sideEffect.addEventListener(i,"click",()=>{this.readonly||this.onNewPageIndex(this.pageIndex-1)}),s.appendChild(i),this.onPlay){const c=this.renderFooterBtn("btn-page-play",is(this.namespace),rs(this.namespace)),l=()=>{this.sideEffect.setTimeout(()=>{c.classList.toggle(this.wrapClassName("footer-btn-playing"),!1)},500,"returnPlay")};this.sideEffect.addEventListener(c,"click",()=>{this.readonly||(c.classList.toggle(this.wrapClassName("footer-btn-playing"),!0),this.onPlay&&this.onPlay(),l())}),s.appendChild(c)}const r=this.renderFooterBtn("btn-page-next",ss(this.namespace));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 n=document.createElement("input");n.className=this.wrapClassName("page-number-input"),n.value=String(this.pageIndex+1),this.readonly&&(n.disabled=!0),this.$pageNumberInput=n,this.sideEffect.addEventListener(n,"focus",()=>{n.select()}),this.sideEffect.addEventListener(n,"change",()=>{this.readonly||n.value&&this.onNewPageIndex(Number(n.value)-1)});const a=document.createElement("span");a.textContent=" / "+this.pages.length,o.appendChild(n),o.appendChild(a),this.$footer.appendChild(s),this.$footer.appendChild(o)}return this.$footer}renderFooterBtn(e,s,i){const r=document.createElement("button");return r.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e),r.appendChild(s),i&&r.appendChild(i),r}togglePreview(e){if(this.isShowPreview=e!=null?e:!this.isShowPreview,this.$content.classList.toggle(this.wrapClassName("preview-active"),this.isShowPreview),this.isShowPreview){const s=this.$preview.querySelector("."+this.wrapClassName(`preview-page-${this.pageIndex}`));s&&this.$preview.scrollTo({top:s.offsetTop-16})}}wrapClassName(e){return`${this.namespace}-${e}`}}function N(t,e,s){return Math.min(Math.max(t,e),s)}function ft(t){return t.touches?t.touches[0]:t}function vt(t){t.stopPropagation(),t.cancelable&&t.preventDefault()}class ci{constructor(e){var s,i,r;this.velocity=0,this.paused=!0,this._animationFrameID=null,this._loopTimestamp=0,this.looper=o=>{if(this.paused)return;let n=Math.floor((o-this._loopTimestamp)/1e3*60)+1;for(this._loopTimestamp=o;n-- >0;)this.stepper();this.onStep(this.current,this),!this.paused&&this.current!==this.target&&window.requestAnimationFrame(this.looper)},this.current=(s=e.start)!=null?s:0,this.target=this.current,this.stiffness=(i=e.stiffness)!=null?i:170,this.damping=(r=e.damping)!=null?r:26,this.onStep=e.onStep}stepTo(e,s){this.paused&&s!=null&&(this.current=s),this.paused=!1,this.target=e,this.onStep(this.current,this),this._loopTimestamp=Date.now(),window.requestAnimationFrame(this.looper)}pause(){this.paused=!0}destroy(){this.pause()}stepper(){const e=-this.stiffness*(this.current-this.target),s=-this.damping*this.velocity,i=this.velocity+(e+s)/60,r=this.current+i/60;Math.abs(i-0)<.01&&Math.abs(r-this.target)<.01?(this.current=this.target,this.velocity=0):(this.current=r,this.velocity=i)}}class li{constructor(e,s,i,r){this.scale=1,this.lastVisit=Date.now(),this.pageOffsetY=0,this.pageOffsetX=0,this.visible=!0,this.index=e,this.page=s,this.scale=i,this.pageOffsetX=(r-s.width)/2;const o=document.createElement("div");o.className="page-renderer-page",o.dataset.index=`${e}`,o.style.width=`${s.width*i}px`,o.style.height=`${s.height*i}px`,s.thumbnail&&(o.style.backgroundImage=`url("${s.thumbnail}")`);const n=document.createElement("img");n.className="page-renderer-page-img",n.width=s.width,n.height=s.height,n.src=s.src,o.appendChild(n),this.$page=o}translateY(e){Math.abs(e-this.pageOffsetY)>=.001&&(this.pageOffsetY=e,this.$page.style.transform=`translate(${this.pageOffsetX*this.scale}px, ${this.pageOffsetY*this.scale}px)`)}setScale(e){Math.abs(e-this.scale)>=.001&&(this.scale=e,this.$page.style.width=`${this.page.width*this.scale}px`,this.$page.style.height=`${this.page.height*this.scale}px`,this.$page.style.transform=`translate(${this.pageOffsetX*this.scale}px, ${this.pageOffsetY*this.scale}px)`)}setVisible(e){e!==this.visible&&(this.visible=e,this.$page.style.opacity=e?"1":"0")}}const hi=window.requestIdleCallback||(t=>window.setTimeout(t,5e3)),di=window.cancelIdleCallback||window.clearTimeout;class pi{constructor(e,s,i){this.pages=e,this.pagesIntrinsicWidth=s,this.scale=i,this.els=new Map,this.maxElCount=200,this.gcTimer=null,this.gc=()=>{if(this.gcTimer=null,this.els.size>this.maxElCount){const r=[...this.els.values()].sort((o,n)=>n.lastVisit-o.lastVisit);for(let o=Math.floor(this.maxElCount/4);o<r.length;o++)this.els.delete(r[o].index)}}}getEl(e){let s=this.els.get(e);return s||(s=new li(e,this.pages[e],this.scale,this.pagesIntrinsicWidth),this.els.set(e,s)),s.lastVisit=Date.now(),this.els.size>this.maxElCount&&this.gcTimer===null&&(this.gcTimer=hi(this.gc)),s}setScale(e){e!==this.scale&&(this.scale=e,this.els.forEach(s=>s.setScale(e)))}destroy(){this.els.clear(),this.gcTimer!==null&&(di(this.gcTimer),this.gcTimer=null)}}class ui{constructor(e){this._hwaTimeout=NaN,this._turnOffHWA=()=>{window.clearTimeout(this._hwaTimeout),this._hwaTimeout=NaN,this.$pages.classList.toggle("is-hwa",!1)},this.pagesScrollTop=e.pagesScrollTop||0,this.containerWidth=e.containerWidth||1,this.containerHeight=e.containerHeight||1,this.pages=e.pages.map(o=>{if(o.thumbnail)return o;try{const n=new URL(o.src);return n.searchParams.set("x-oss-process","image/resize,l_50"),be(we({},o),{thumbnail:n.toString()})}catch(n){return console.error(n),o}});const s=Array(this.pages.length);let i=1/0,r=0;this.pagesIntrinsicHeight=this.pages.reduce((o,n,a)=>(s[a]=o,n.width>r&&(r=n.width),n.height<=i&&(i=n.height),o+n.height),0),this.pagesIntrinsicWidth=r,this.pagesMinHeight=i,this.pagesIntrinsicYs=s,this.scale=this._calcScale(),this.threshold=this._calcThreshold(),this.onPageIndexChanged=e.onPageIndexChanged,this.pageScrollIndex=0,this.pagesScrollTop!==0&&(this.pageScrollIndex=this.findScrollPageIndex(),this.onPageIndexChanged&&this.pageScrollIndex>0&&this.onPageIndexChanged(this.pageScrollIndex)),this.pageElManager=new pi(this.pages,r,this.scale),this.$pages=this.renderPages()}setContainerSize(e,s){e>0&&s>0&&(e!==this.containerWidth||s!==this.containerHeight)&&(this.containerWidth=e,this.containerHeight=s,this.$pages.style.width=`${this.containerWidth}px`,this.$pages.style.height=`${this.containerHeight}px`,this.scale=this._calcScale(),this.threshold=this._calcThreshold(),this.pageElManager.setScale(this.scale),this.$pages.parentElement&&this.pagesScrollTo(this.pagesScrollTop,!0))}renderPages(){const e=document.createElement("div");return e.className="page-renderer-pages-container",e.style.width=`${this.containerWidth}px`,e.style.height=`${this.containerHeight}px`,e}pagesScrollTo(e,s){if(e=N(e,0,this.pagesIntrinsicHeight-this.containerHeight/this.scale),s||Math.abs(e-this.pagesScrollTop)>=.001){this._turnOnHWA(),this.pagesScrollTop=e;const i=this.findScrollPageIndex(),r=Math.max(i-this.threshold,0),o=Math.min(i+this.threshold,this.pages.length-1);for(let n=0;n<this.$pages.children.length;n++){const a=this.$pages.children[n],c=Number(a.dataset.index);c>=r&&c<=o||(a.remove(),n--)}for(let n=r;n<=o;n++){const a=this.pageElManager.getEl(n);a.$page.parentElement!==this.$pages&&this.$pages.appendChild(a.$page),a.translateY(this.pagesIntrinsicYs[n]-this.pagesScrollTop)}i!==this.pageScrollIndex&&(this.pageScrollIndex=i,this.onPageIndexChanged&&this.onPageIndexChanged(i))}}findScrollPageIndex(){for(let e=0;e<this.pagesIntrinsicYs.length;e++)if(this.pagesIntrinsicYs[e]+this.pages[e].height-this.pagesScrollTop>=.001)return e;return this.pagesIntrinsicYs.length-1}mount(e){e.appendChild(this.$pages),this.pagesScrollTo(this.pagesScrollTop,!0)}unmount(){this.$pages.remove()}destroy(){this.unmount(),this.onPageIndexChanged=void 0,this.pageElManager.destroy(),this._hwaTimeout&&(window.clearTimeout(this._hwaTimeout),this._hwaTimeout=NaN)}_calcScale(){return this.containerWidth/this.pagesIntrinsicWidth||1}_calcThreshold(){return N(Math.ceil(this.containerHeight/this.scale/this.pagesMinHeight/2),1,this.pages.length)}_turnOnHWA(){this._hwaTimeout?window.clearTimeout(this._hwaTimeout):this.$pages.classList.toggle("is-hwa",!0),this._hwaTimeout=window.setTimeout(this._turnOffHWA,1e3)}}const gi=30;class fi{constructor(e){this.sideEffect=new H,this.pagesScrollTop=e.pagesScrollTop||0,this.containerWidth=e.containerWidth||1,this.containerHeight=e.containerHeight||1,this.pagesWidth=e.pagesWidth||1,this.pagesHeight=e.pagesHeight||1,this.scale=this._calcScale(),this.scrollbarMinHeight=e.scrollbarMinHeight||gi,this.scrollbarHeight=this._calcScrollbarHeight(),this.readonly=e.readonly,this.wrapClassName=e.wrapClassName,this.onDragScroll=e.onDragScroll,this.$scrollbar=this.renderScrollbar()}mount(e){e.appendChild(this.$scrollbar),this.pagesScrollTo(this.pagesScrollTop,!0)}unmount(){this.$scrollbar.remove()}setReadonly(e){this.readonly=e}setContainerSize(e,s){e>0&&s>0&&(e!==this.containerWidth||s!==this.containerHeight)&&(this.containerWidth=e,this.containerHeight=s,this.scale=this._calcScale(),this._updateScrollbarHeight(),this.$scrollbar.parentElement&&this.pagesScrollTo(this.pagesScrollTop,!0))}pagesScrollTo(e,s){if(e=N(e,0,this.pagesHeight-this.containerHeight/this.scale),s||Math.abs(e-this.pagesScrollTop)>=.001){this.pagesScrollTop=e;const i=this.pagesScrollTop*this.scale,r=this.pagesHeight*this.scale,o=i/(r-this.containerHeight)*(this.containerHeight-this.scrollbarHeight);window.requestAnimationFrame?window.requestAnimationFrame(()=>{this.$scrollbar.style.transform=`translateY(${o}px)`}):this.$scrollbar.style.transform=`translateY(${o}px)`}}destroy(){this.unmount(),this.onDragScroll=void 0,this.sideEffect.flushAll()}renderScrollbar(){const e=document.createElement("button");e.className=this.wrapClassName("scrollbar"),e.style.minHeight=`${this.scrollbarMinHeight}px`,e.style.height=`${this.scrollbarHeight}px`;const s=i=>{if(this.readonly||i.button!=null&&i.button!==0)return;vt(i);const r=this.wrapClassName("scrollbar-dragging");e.classList.toggle(r,!0);const o=this.pagesScrollTop,{clientY:n}=ft(i),a=l=>{if(this.readonly)return;const{clientY:h}=ft(l),d=(h-n)/this.scale;Math.abs(d)>0&&this.onDragScroll&&this.onDragScroll(o+d*(this.pagesHeight*this.scale/this.containerHeight))},c=()=>{e.classList.toggle(r,!1),window.removeEventListener("mousemove",a,!0),window.removeEventListener("touchmove",a,!0),window.removeEventListener("mouseup",c,!0),window.removeEventListener("touchend",c,!0),window.removeEventListener("touchcancel",c,!0)};window.addEventListener("mousemove",a,!0),window.addEventListener("touchmove",a,!0),window.addEventListener("mouseup",c,!0),window.addEventListener("touchend",c,!0),window.addEventListener("touchcancel",c,!0)};return this.sideEffect.addEventListener(e,"mousedown",s),this.sideEffect.addEventListener(e,"touchstart",s),e}_calcScale(){return this.containerWidth/this.pagesWidth||1}_calcScrollbarHeight(){return N(this.containerHeight/(this.pagesHeight*this.scale)*this.containerHeight,this.scrollbarMinHeight,this.containerHeight)}_updateScrollbarHeight(){const e=this._calcScrollbarHeight();Math.abs(e-this.scrollbarHeight)>.001&&(this.scrollbarHeight=e,this.$scrollbar.style.height=`${e}px`)}}const vi=window.ResizeObserver||Qt,A=640;class wi{constructor({whiteboardView:e,readonly:s,box:i,pages:r,pageScrollTop:o=0,mountWhiteboard:n,onUserScroll:a}){this.sideEffect=new H,this.userScrolling=!1,this.onNewPageIndex=d=>{this.scrollToPage(d)},this.whiteboardView=e,this.readonly=s,this.box=i,this.pages=r,this.mountWhiteboard=n,this._onUserScroll=a;const c=this.debounce(()=>{this.userScrolling=!1,this._onUserScroll&&this._onUserScroll(this.pageRenderer.pagesScrollTop)},{wait:80},"debounce-updateUserScroll");this.updateUserScroll=()=>{this.userScrolling=!0,c()},this.viewer=new gt({readonly:s,box:i,pages:r,onNewPageIndex:this.onNewPageIndex});const{width:l,height:h}=this.whiteboardView.size;this.pageRenderer=new ui({pagesScrollTop:o,pages:this.pages,containerWidth:l,containerHeight:h,onPageIndexChanged:this.viewer.setPageIndex.bind(this.viewer)}),this.scrollbar=new fi({pagesScrollTop:this.pageRenderer.pagesScrollTop,containerWidth:l,containerHeight:h,pagesWidth:this.pageRenderer.pagesIntrinsicWidth,pagesHeight:this.pageRenderer.pagesIntrinsicHeight,readonly:this.readonly,wrapClassName:this.wrapClassName.bind(this),onDragScroll:d=>{this.pageScrollTo(d),this.updateUserScroll()}}),this.pageScrollStepper=new ci({start:this.pageRenderer.pagesScrollTop,onStep:d=>{this.pageScrollTo(d)}}),this.render()}mount(){this.viewer.mount(),this.setupScrollListener();const e=this.debounce(this.renderRatioHeight.bind(this),{wait:80});return this.sideEffect.add(()=>{const s=new vi(e);return s.observe(this.viewer.$content),()=>s.disconnect()}),this.sideEffect.setTimeout(()=>{this.userScrolling||this.pageScrollTo(this.pageRenderer.pagesScrollTop)},100),this}unmount(){return this.viewer.unmount(),this}setReadonly(e){this.readonly!==e&&(this.readonly=e,this.viewer.setReadonly(e),this.scrollbar.setReadonly(e))}destroy(){this.sideEffect.flushAll(),this.pageScrollStepper.destroy(),this._onUserScroll=void 0,this.unmount(),this.viewer.destroy(),this.pageRenderer.destroy(),this.scrollbar.destroy()}syncPageScrollTop(e){!this.userScrolling&&e>=0&&Math.abs(this.pageRenderer.pagesScrollTop-e)>.01&&this.pageScrollStepper.stepTo(e,this.pageRenderer.pagesScrollTop)}render(){this.pageRenderer.mount(this.viewer.$content),this.viewer.$content.appendChild(this.renderWhiteboardView()),this.scrollbar.mount(this.viewer.$content),this.renderRatioHeight()}renderRatioHeight(){const e=this.box.absoluteHeight,s=e<=A;if(this.viewer.setSmallBox(s),s){const i=26/A,r=26/e,o=26/A,n=0,a=Math.max((i+o-(r+n))/2,0);if(this.box.$titleBar){const c=r+a;this.box.$titleBar.style.height=`${c*100}%`}if(this.box.$footer){const c=n+a;this.box.$footer.style.height=`${c*100}%`}}else{if(this.box.$titleBar){const i=Math.max(26/A,26/e);this.box.$titleBar.style.height=`${i*100}%`}if(this.box.$footer){const i=Math.max(26/A,26/e);this.box.$footer.style.height=`${i*100}%`}}}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.mountWhiteboard(this.$whiteboardView),this.sideEffect.addEventListener(this.$whiteboardView,"wheel",e=>{vt(e),this.readonly||(this.pageScrollTo(this.pageRenderer.pagesScrollTop+e.deltaY),this.updateUserScroll())},{passive:!1,capture:!0}),this.sideEffect.addEventListener(this.$whiteboardView,"touchmove",e=>{this.readonly||e.touches.length<=1||this.updateUserScroll()},{passive:!0,capture:!0})),this.$whiteboardView}scrollTopPageToEl(e){return e*this.pageRenderer.scale}scrollTopElToPage(e){return e/this.pageRenderer.scale}elScrollTo(e){this.pageScrollTo(this.scrollTopElToPage(e))}pageScrollTo(e){const s=this.scrollTopElToPage(this.whiteboardView.size.height/2);this.whiteboardView.moveCamera({centerY:N(e+s,s,this.pageRenderer.pagesIntrinsicHeight-s),animationMode:"immediately"})}scrollToPage(e){if(!this.readonly&&!Number.isNaN(e)){const s=this.pageRenderer.pagesIntrinsicYs[e];s>=0&&(this.pageScrollTo(s+5/this.pageRenderer.scale),this.updateUserScroll())}}setupScrollListener(){this.sideEffect.add(()=>{const e=s=>{const{width:i,height:r}=this.whiteboardView.size;if(i<=0||r<=0)return;const o=s.centerY-this.pageRenderer.containerHeight/this.pageRenderer.scale/2;this.pageRenderer.pagesScrollTo(o),this.scrollbar.pagesScrollTo(o)};return this.whiteboardView.callbacks.on("onCameraUpdated",e),()=>this.whiteboardView.callbacks.off("onCameraUpdated",e)}),this.sideEffect.add(()=>{const e=({width:s,height:i})=>{if(s<=0||i<=0)return;this.pageRenderer.setContainerSize(s,i),this.scrollbar.setContainerSize(s,i);const{pagesIntrinsicWidth:r,pagesIntrinsicHeight:o}=this.pageRenderer;this.whiteboardView.moveCameraToContain({originX:0,originY:this.pageRenderer.pagesScrollTop,width:r,height:i/this.pageRenderer.scale,animationMode:"immediately"}),this.whiteboardView.setCameraBound({damping:1,maxContentMode:()=>this.pageRenderer.scale,minContentMode:()=>this.pageRenderer.scale,centerX:r/2,centerY:o/2,width:r,height:o})};return this.whiteboardView.callbacks.on("onSizeUpdated",e),()=>{this.whiteboardView.callbacks.off("onSizeUpdated",e)}},"whiteboard-size-update"),this.sideEffect.addEventListener(window,"keyup",e=>{if(this.readonly||!this.box.focus||this.box.minimized)return;let s=null;switch(e.key){case"PageDown":{s=this.pageRenderer.pagesScrollTop+this.pageRenderer.containerHeight/this.pageRenderer.scale;break}case"PageUp":{s=this.pageRenderer.pagesScrollTop-this.pageRenderer.containerHeight/this.pageRenderer.scale;break}case"ArrowDown":{s=this.pageRenderer.pagesScrollTop+this.pageRenderer.containerHeight/4/this.pageRenderer.scale;break}case"ArrowUp":{s=this.pageRenderer.pagesScrollTop-this.pageRenderer.containerHeight/4/this.pageRenderer.scale;break}}s!==null&&(this._onUserScroll?this._onUserScroll(s):(this.pageScrollTo(s),this.updateUserScroll()))},{capture:!0})}debounce(e,s,i){const r=Rt(e,s);return this.sideEffect.addDisposer(()=>r.cancel(),i),r}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}}class bi{constructor({context:e,whiteboardView:s,box:i,pages:r}){this.sideEffect=new H,this.onPlayPPT=()=>{const o=this.context.getRoom();o&&o.pptNextStep()},this._scaleDocsToFitImpl=()=>{const o=this.pages[this.getPageIndex()];o&&(this.whiteboardView.moveCameraToContain({originX:-o.width/2,originY:-o.height/2,width:o.width,height:o.height,animationMode:"immediately"}),this.whiteboardView.setCameraBound({damping:1,maxContentMode:()=>this.whiteboardView.camera.scale,minContentMode:()=>this.whiteboardView.camera.scale,centerX:0,centerY:0,width:o.width,height:o.height}))},this._scaleDocsToFitDebounced=()=>{this.sideEffect.setTimeout(this._scaleDocsToFitImpl,1e3,"_scaleDocsToFitDebounced")},this.scaleDocsToFit=()=>{this._scaleDocsToFitImpl(),this._scaleDocsToFitDebounced()},this.onNewPageIndex=o=>{this.jumpToPage(o,!0)},this.context=e,this.whiteboardView=s,this.box=i,this.pages=r,this.displayer=e.getDisplayer(),this.viewer=new gt({readonly:!e.getIsWritable(),box:i,pages:r,onNewPageIndex:this.onNewPageIndex,onPlay:this.onPlayPPT}),this.render(),this.sideEffect.add(()=>{const o=n=>{this.viewer.setReadonly(!n)};return this.context.emitter.on("writableChange",o),()=>this.context.emitter.off("writableChange",o)}),this.sideEffect.add(()=>{const o=n=>{this.jumpToPage(n.index)};return this.context.emitter.on("sceneStateChange",o),()=>this.context.emitter.off("sceneStateChange",o)})}mount(){this.viewer.mount();const e=this.getPageIndex();return e!==0&&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}destroy(){this.sideEffect.flushAll(),this.unmount(),this.viewer.destroy()}getPageIndex(){return this.displayer.state.sceneState.index}jumpToPage(e,s){var i,r;if(e=N(e,0,this.pages.length-1),e!==this.getPageIndex()&&this.context.getIsWritable()){const o=this.context.getInitScenePath(),n=(r=(i=this.context.getScenes())==null?void 0:i[e])==null?void 0:r.name;o&&n&&this.context.setScenePath(`${o}/${n}`),this.scaleDocsToFit()}if(e!==this.viewer.pageIndex&&this.viewer.setPageIndex(e),s){const o=this.context.getRoom();if(o){const n=o.state.globalState.__pptState;o.setGlobalState({__pptState:n&&{uuid:n.uuid,pageIndex:e,disableAutoPlay:n.disableAutoPlay}})}}}render(){this.viewer.$content.appendChild(this.renderMask()),this.viewer.$content.appendChild(this.renderWhiteboardView()),this.sideEffect.addEventListener(window,"keydown",e=>{var s;if(this.box.focus)switch(e.key){case"ArrowUp":case"ArrowLeft":{this.jumpToPage(this.getPageIndex()-1,!0);break}case"ArrowRight":case"ArrowDown":{(s=this.context.getRoom())==null||s.pptNextStep();break}}})}renderMask(){if(!this.$mask){const e=document.createElement("div");e.className=this.wrapClassName("mask"),this.$mask=e;const s=document.createElement("button");s.className=this.wrapClassName("back");const i=document.createElement("button");i.className=this.wrapClassName("next")}return this.$mask}renderWhiteboardView(){return this.$whiteboardView||(this.$whiteboardView=document.createElement("div"),this.$whiteboardView.className=this.wrapClassName("wb-view"),this.sideEffect.addEventListener(this.$whiteboardView,"click",e=>{var i;const s=this.context.getRoom();if(s&&s.state.memberState.currentApplianceName==="clicker"){for(let r=e.target;r;r=r.parentElement)if((i=r.classList)!=null&&i.contains("ppt-event-source"))return;s.pptNextStep()}}),this.context.mountView(this.$whiteboardView)),this.$whiteboardView}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const mi={kind:"DocsViewer",setup(t){const e=t.getBox(),s=t.getScenes();if(!s)throw new Error("[Docs Viewer]: scenes not found.");const i=t.getView();if(!i)throw new Error("[Docs Viewer]: no whiteboard view.");const r=s.map(({ppt:o})=>o?{width:o.width,height:o.height,src:o.src,thumbnail:o.previewURL}:null).filter(o=>Boolean(o));if(r.length<=0)throw new Error("[Docs Viewer]: empty scenes.");e.mountStyles(p),r[0].src.startsWith("ppt")?xi(t,i,e,r):Si(t,i,e,r)}};function Si(t,e,s,i){var o;e.disableCameraTransform=!t.getIsWritable();const r=new wi({whiteboardView:e,readonly:!t.getIsWritable(),box:s,pages:i,pageScrollTop:(o=t.getAttributes())==null?void 0:o.pageScrollTop,mountWhiteboard:t.mountView.bind(t),onUserScroll:n=>{var a;((a=t.getAttributes())==null?void 0:a.pageScrollTop)!==n&&!s.readonly&&t.updateAttributes(["pageScrollTop"],n)}}).mount();t.emitter.on("attributesUpdate",n=>{n&&n.pageScrollTop!=null&&r.syncPageScrollTop(n.pageScrollTop)}),t.emitter.on("writableChange",n=>{r.setReadonly(!n),e.disableCameraTransform=!n})}function xi(t,e,s,i){e.disableCameraTransform=!0;const r=new bi({context:t,whiteboardView:e,box:s,pages:i}).mount();t.mountView(r.$whiteboardView),t.isAddApp&&e.callbacks.once("onSizeUpdated",({width:o,height:n})=>{if(i.length>0&&s.state!=="maximized"){const{width:a,height:c}=i[0],h=c/a*o-n;h!==0&&t.getIsWritable()&&t.emitter.emit("setBoxSize",{width:s.width,height:s.height+h/s.containerRect.height})}})}return u.default=mi,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),u}({});
+var NetlessAppDocsViewer=function(j){"use strict";var Qe=(()=>`.netless-app-docs-viewer-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;font-family:PingFang SC,Source Han Sans SC,Microsoft YaHei,Helvetica Neue,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif}.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;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-docs-viewer-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-docs-viewer-footer-btn:hover{background:transparent!important}}.netless-app-docs-viewer-footer-btn>svg{width:100%;height:100%}.netless-app-docs-viewer-footer-btn>svg:nth-of-type(2){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-docs-viewer-footer-btn.netless-app-docs-viewer-footer-btn-playing>svg:nth-of-type(2){display:initial}.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{display:flex;align-items:center;height:26px;margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-docs-viewer-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 .5em 0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;font-family:PingFang SC,Source Han Sans SC,Microsoft YaHei,Helvetica Neue,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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}.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:active,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:focus,.telebox-color-scheme-dark .netless-app-docs-viewer-page-number-input:hover{color:currentColor;background:#25282e}.telebox-color-scheme-dark .netless-app-docs-viewer-footer{border-top:none}.telebox-color-scheme-dark .netless-app-docs-viewer-footer-btn:hover{background:#212126}.netless-app-docs-viewer-preview.netless-app-docs-viewer-preview-active{transform:translate(0)}.netless-app-docs-viewer-content{position:relative;height:100%;overflow:hidden}.netless-app-docs-viewer-preview-mask{position:absolute;z-index:10200;top:0;left:0;width:100%;height:100%}.netless-app-docs-viewer-preview{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;position:absolute;z-index:10300;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;user-select:none}.telebox-color-scheme-dark .netless-app-docs-viewer-preview{background:rgba(50,50,50,.9)}.netless-app-docs-viewer-static-scrollbar{box-sizing:border-box;position:absolute;top:0;right:0;z-index:2147483647;width:16px;min-height:30px;margin:0;padding:0 0 0 8px;border:none;outline:none;opacity:0;background:transparent;transition:opacity .4s 3s,transform .1s;user-select:none;touch-action:none}.netless-app-docs-viewer-static-scrollbar:after{content:"";display:block;width:8px;height:100%;border-radius:4px;background:rgba(68,78,96,.4);box-shadow:1px 1px 8px #ffffffb3;transition:background .4s}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrolling{opacity:1;transition:opacity .4s,transform .1s}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{opacity:1;transition:opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging:after{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-static-scrollbar:hover:after,.netless-app-docs-viewer-static-scrollbar:focus:after{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active:after{background:rgba(68,78,96,.6)}.telebox-body-wrap:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:opacity .4s,transform .1s}.telebox-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.page-renderer-pages-container{position:relative;width:100%;height:100%}.page-renderer-page{position:absolute;top:0;left:0;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-pages-container.is-hwa .page-renderer-page{will-change:transform}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.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-dynamic-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-docs-viewer-dynamic-wb-view .cursor-clicker .ppt-event-source{cursor:pointer}
+`)();const oe="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",Ze=oe.length,ne=Array(20),et=()=>{for(let t=0;t<20;t++)ne[t]=oe.charAt(Math.random()*Ze);return ne.join("")};function ce(t){try{return t()}catch(e){console.error(e)}}class k{constructor(){this.disposers=new Map}addDisposer(e,s=this.genUID()){return this.flush(s),this.disposers.set(s,Array.isArray(e)?()=>e.forEach(ce):e),s}add(e,s=this.genUID()){const r=e();return r?this.addDisposer(r,s):s}addEventListener(e,s,r,i,a=this.genUID()){return e.addEventListener(s,r,i),this.addDisposer(()=>e.removeEventListener(s,r,i),a),a}setTimeout(e,s,r=this.genUID()){const i=window.setTimeout(()=>{this.remove(r),e()},s);return this.addDisposer(()=>window.clearTimeout(i),r)}setInterval(e,s,r=this.genUID()){const i=window.setInterval(e,s);return this.addDisposer(()=>window.clearInterval(i),r)}remove(e){const s=this.disposers.get(e);return this.disposers.delete(e),s}flush(e){const s=this.remove(e);if(s)try{s()}catch(r){console.error(r)}}flushAll(){this.disposers.forEach(ce),this.disposers.clear()}genUID(){let e;do e=et();while(this.disposers.has(e));return e}}var tt=Object.defineProperty,st=Object.defineProperties,rt=Object.getOwnPropertyDescriptors,le=Object.getOwnPropertySymbols,it=Object.prototype.hasOwnProperty,at=Object.prototype.propertyIsEnumerable,W=(t,e,s)=>e in t?tt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,de=(t,e)=>{for(var s in e||(e={}))it.call(e,s)&&W(t,s,e[s]);if(le)for(var s of le(e))at.call(e,s)&&W(t,s,e[s]);return t},he=(t,e)=>st(t,rt(e)),E=(t,e,s)=>(W(t,typeof e!="symbol"?e+"":e,s),s);class ot{constructor(e){E(this,"_subscribers"),E(this,"_bSub"),E(this,"_bSubDisposer"),this._bSub=e}get size(){return this._subscribers?this._subscribers.size:0}invoke(e,s){this._subscribers&&this._subscribers.forEach(r=>r(e,s))}add(e){this._bSub&&(!this._subscribers||this._subscribers.size<=0)&&(this._bSubDisposer=this._bSub()),this._subscribers||(this._subscribers=new Set),this._subscribers.add(e)}remove(e){if(this._subscribers&&this._subscribers.delete(e),this._subscribers&&this._subscribers.size<=0&&this._bSubDisposer){const s=this._bSubDisposer;this._bSubDisposer=null,s()}}clear(){if(this._subscribers&&this._subscribers.clear(),this._bSubDisposer){const e=this._bSubDisposer;this._bSubDisposer=null,e()}}destroy(){this.clear()}}class Y{constructor(e,s){E(this,"_subscribers"),E(this,"_value"),this._value=e;let r;if(s&&(s.compare&&(this.compare=s.compare),s.beforeSubscribe)){const i=s.beforeSubscribe,a=this._setValue.bind(this);r=()=>i(a)}this._subscribers=new ot(r)}_setValue(e,s){this.compare(e,this._value)||(this._value=e,this._subscribers.invoke(e,s))}get value(){return this._value}reaction(e){return this._subscribers.add(e),()=>{this._subscribers.remove(e)}}subscribe(e,s){const r=this.reaction(e);return e(this._value,s),r}destroy(){this._subscribers.destroy()}unsubscribe(e){this._subscribers.remove(e)}get size(){return this._subscribers.size}compare(e,s){return e===s}}class S extends Y{constructor(){super(...arguments),E(this,"setValue",this._setValue)}}class nt extends Y{constructor(e,s,r={}){super(s(e.value),he(de({},r),{beforeSubscribe:i=>{const a=e.subscribe((n,c)=>i(s(n),c));if(r.beforeSubscribe){const n=r.beforeSubscribe(i);if(n)return()=>{a(),n()}}return a}})),E(this,"_srcValue"),this._srcValue=()=>s(e.value)}get value(){if(this.size<=0){const e=this._srcValue();return this.compare(e,this._value)?this._value:e}return this._value}}function A(t,e=r=>r,s={}){return new nt(t,e,s)}class ct extends Y{constructor(e,s,r={}){super(s(G(e)),he(de({},r),{beforeSubscribe:i=>{let a=G(e);i(s(a));const n=e.map((l,o)=>l.reaction((d,p)=>{a=a.slice(),a[o]=d,i(s(a),p)})),c=()=>n.forEach(l=>l());if(r.beforeSubscribe){const l=r.beforeSubscribe(i);if(l)return()=>{c(),l()}}return c}})),E(this,"_srcValue"),this._srcValue=()=>s(G(e))}get value(){if(this.size<=0){const e=this._srcValue();return this.compare(e,this._value)?this._value:e}return this._value}}function G(t){return t.map(lt)}function lt(t){return t.value}function w(t,e=r=>r,s={}){return new ct(t,e,s)}function pe(t){t.onValChanged||(t.onValChanged=dt)}function dt(t,e){const s=this[`_${t}$`]||this[t];if(!(s!=null&&s.reaction))throw new TypeError(`"${t}" is not related to a Val in this instance`);return s.reaction(e)}function ht(t,e,s){Object.keys(e).forEach(r=>{pt(t,r,e[r]),s&&s.attach(e[r])}),pe(t)}function pt(t,e,s){return Object.defineProperties(t,{[e]:{get(){return s.value}},[`_${e}$`]:{value:s}}),t}function ut(t,e,s){Object.keys(e).forEach(r=>{gt(t,r,e[r]),s&&s.attach(e[r])}),pe(t)}function gt(t,e,s){return Object.defineProperties(t,{[e]:{get(){return s.value},set(r){s.setValue(r)}},[`_${e}$`]:{value:s},[`set${ft(e)}`]:{value:(r,i)=>s.setValue(r,i)}}),t}function ft(t){return t[0].toUpperCase()+t.slice(1)}const y=typeof window!="undefined",ue=y&&!("onscroll"in window)||typeof navigator!="undefined"&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),ge=y&&"IntersectionObserver"in window,fe=y&&"classList"in document.createElement("p"),be=y&&window.devicePixelRatio>1,bt={elements_selector:".lazy",container:ue||y?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_bg_set:"bg-set",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,restore_on_error:!1},we=t=>Object.assign({},bt,t),ve=function(t,e){let s;const r="LazyLoad::Initialized",i=new t(e);try{s=new CustomEvent(r,{detail:{instance:i}})}catch{s=document.createEvent("CustomEvent"),s.initCustomEvent(r,!1,!1,{instance:i})}window.dispatchEvent(s)},wt=(t,e)=>{if(!!e)if(!e.length)ve(t,e);else for(let s=0,r;r=e[s];s+=1)ve(t,r)},_="src",q="srcset",J="sizes",me="poster",P="llOriginalAttrs",Se="data",X="loading",_e="loaded",Ee="applied",vt="entered",K="error",ye="native",$e="data-",xe="ll-status",b=(t,e)=>t.getAttribute($e+e),mt=(t,e,s)=>{var r=$e+e;if(s===null){t.removeAttribute(r);return}t.setAttribute(r,s)},V=t=>b(t,xe),D=(t,e)=>mt(t,xe,e),R=t=>D(t,null),Q=t=>V(t)===null,St=t=>V(t)===X,_t=t=>V(t)===K,Z=t=>V(t)===ye,Et=[X,_e,Ee,K],yt=t=>Et.indexOf(V(t))>=0,$=(t,e,s,r)=>{if(!!t){if(r!==void 0){t(e,s,r);return}if(s!==void 0){t(e,s);return}t(e)}},T=(t,e)=>{if(fe){t.classList.add(e);return}t.className+=(t.className?" ":"")+e},v=(t,e)=>{if(fe){t.classList.remove(e);return}t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},$t=t=>{t.llTempImage=document.createElement("IMG")},xt=t=>{delete t.llTempImage},Ce=t=>t.llTempImage,H=(t,e)=>{if(!e)return;const s=e._observer;!s||s.unobserve(t)},Ct=t=>{t.disconnect()},Lt=(t,e,s)=>{e.unobserve_entered&&H(t,s)},ee=(t,e)=>{!t||(t.loadingCount+=e)},kt=t=>{!t||(t.toLoadCount-=1)},Le=(t,e)=>{!t||(t.toLoadCount=e)},Dt=t=>t.loadingCount>0,It=t=>t.toLoadCount>0,ke=t=>{let e=[];for(let s=0,r;r=t.children[s];s+=1)r.tagName==="SOURCE"&&e.push(r);return e},te=(t,e)=>{const s=t.parentNode;if(!s||s.tagName!=="PICTURE")return;ke(s).forEach(e)},De=(t,e)=>{ke(t).forEach(e)},B=[_],Ie=[_,me],z=[_,q,J],Te=[Se],U=t=>!!t[P],Ne=t=>t[P],Ae=t=>delete t[P],N=(t,e)=>{if(U(t))return;const s={};e.forEach(r=>{s[r]=t.getAttribute(r)}),t[P]=s},Tt=t=>{U(t)||(t[P]={backgroundImage:t.style.backgroundImage})},Nt=(t,e,s)=>{if(!s){t.removeAttribute(e);return}t.setAttribute(e,s)},I=(t,e)=>{if(!U(t))return;const s=Ne(t);e.forEach(r=>{Nt(t,r,s[r])})},At=t=>{if(!U(t))return;const e=Ne(t);t.style.backgroundImage=e.backgroundImage},Pe=(t,e,s)=>{T(t,e.class_applied),D(t,Ee),s&&(e.unobserve_completed&&H(t,e),$(e.callback_applied,t,s))},Ve=(t,e,s)=>{T(t,e.class_loading),D(t,X),s&&(ee(s,1),$(e.callback_loading,t,s))},x=(t,e,s)=>{!s||t.setAttribute(e,s)},ze=(t,e)=>{x(t,J,b(t,e.data_sizes)),x(t,q,b(t,e.data_srcset)),x(t,_,b(t,e.data_src))},Pt=(t,e)=>{te(t,s=>{N(s,z),ze(s,e)}),N(t,z),ze(t,e)},Vt=(t,e)=>{N(t,B),x(t,_,b(t,e.data_src))},zt=(t,e)=>{De(t,s=>{N(s,B),x(s,_,b(s,e.data_src))}),N(t,Ie),x(t,me,b(t,e.data_poster)),x(t,_,b(t,e.data_src)),t.load()},Ot=(t,e)=>{N(t,Te),x(t,Se,b(t,e.data_src))},Mt=(t,e,s)=>{const r=b(t,e.data_bg),i=b(t,e.data_bg_hidpi),a=be&&i?i:r;!a||(t.style.backgroundImage=`url("${a}")`,Ce(t).setAttribute(_,a),Ve(t,e,s))},Rt=(t,e,s)=>{const r=b(t,e.data_bg_multi),i=b(t,e.data_bg_multi_hidpi),a=be&&i?i:r;!a||(t.style.backgroundImage=a,Pe(t,e,s))},Ht=(t,e,s)=>{const r=b(t,e.data_bg_set);if(!r)return;const i=r.split("|");let a=i.map(n=>`image-set(${n})`);t.style.backgroundImage=a.join(),t.style.backgroundImage===""&&(a=i.map(n=>`-webkit-image-set(${n})`),t.style.backgroundImage=a.join()),Pe(t,e,s)},Oe={IMG:Pt,IFRAME:Vt,VIDEO:zt,OBJECT:Ot},Bt=(t,e)=>{const s=Oe[t.tagName];!s||s(t,e)},Ut=(t,e,s)=>{const r=Oe[t.tagName];!r||(r(t,e),Ve(t,e,s))},Ft=["IMG","IFRAME","VIDEO","OBJECT"],jt=t=>Ft.indexOf(t.tagName)>-1,Me=(t,e)=>{e&&!Dt(e)&&!It(e)&&$(t.callback_finish,e)},Re=(t,e,s)=>{t.addEventListener(e,s),t.llEvLisnrs[e]=s},Wt=(t,e,s)=>{t.removeEventListener(e,s)},se=t=>!!t.llEvLisnrs,Yt=(t,e,s)=>{se(t)||(t.llEvLisnrs={});const r=t.tagName==="VIDEO"?"loadeddata":"load";Re(t,r,e),Re(t,"error",s)},re=t=>{if(!se(t))return;const e=t.llEvLisnrs;for(let s in e){const r=e[s];Wt(t,s,r)}delete t.llEvLisnrs},He=(t,e,s)=>{xt(t),ee(s,-1),kt(s),v(t,e.class_loading),e.unobserve_completed&&H(t,s)},Gt=(t,e,s,r)=>{const i=Z(e);He(e,s,r),T(e,s.class_loaded),D(e,_e),$(s.callback_loaded,e,r),i||Me(s,r)},qt=(t,e,s,r)=>{const i=Z(e);He(e,s,r),T(e,s.class_error),D(e,K),$(s.callback_error,e,r),s.restore_on_error&&I(e,z),i||Me(s,r)},ie=(t,e,s)=>{const r=Ce(t)||t;if(se(r))return;Yt(r,n=>{Gt(n,t,e,s),re(r)},n=>{qt(n,t,e,s),re(r)})},Jt=(t,e,s)=>{$t(t),ie(t,e,s),Tt(t),Mt(t,e,s),Rt(t,e,s),Ht(t,e,s)},Xt=(t,e,s)=>{ie(t,e,s),Ut(t,e,s)},ae=(t,e,s)=>{jt(t)?Xt(t,e,s):Jt(t,e,s)},Kt=(t,e,s)=>{t.setAttribute("loading","lazy"),ie(t,e,s),Bt(t,e),D(t,ye)},Be=t=>{t.removeAttribute(_),t.removeAttribute(q),t.removeAttribute(J)},Qt=t=>{te(t,e=>{Be(e)}),Be(t)},Ue=t=>{te(t,e=>{I(e,z)}),I(t,z)},Zt={IMG:Ue,IFRAME:t=>{I(t,B)},VIDEO:t=>{De(t,e=>{I(e,B)}),I(t,Ie),t.load()},OBJECT:t=>{I(t,Te)}},es=t=>{const e=Zt[t.tagName];if(!e){At(t);return}e(t)},ts=(t,e)=>{Q(t)||Z(t)||(v(t,e.class_entered),v(t,e.class_exited),v(t,e.class_applied),v(t,e.class_loading),v(t,e.class_loaded),v(t,e.class_error))},ss=(t,e)=>{es(t),ts(t,e),R(t),Ae(t)},rs=(t,e,s,r)=>{!s.cancel_on_exit||!St(t)||t.tagName==="IMG"&&(re(t),Qt(t),Ue(t),v(t,s.class_loading),ee(r,-1),R(t),$(s.callback_cancel,t,e,r))},is=(t,e,s,r)=>{const i=yt(t);D(t,vt),T(t,s.class_entered),v(t,s.class_exited),Lt(t,s,r),$(s.callback_enter,t,e,r),!i&&ae(t,s,r)},as=(t,e,s,r)=>{Q(t)||(T(t,s.class_exited),rs(t,e,s,r),$(s.callback_exit,t,e,r))},os=["IMG","IFRAME","VIDEO"],Fe=t=>t.use_native&&"loading"in HTMLImageElement.prototype,ns=(t,e,s)=>{t.forEach(r=>{os.indexOf(r.tagName)!==-1&&Kt(r,e,s)}),Le(s,0)},cs=t=>t.isIntersecting||t.intersectionRatio>0,ls=t=>({root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}),ds=(t,e,s)=>{t.forEach(r=>cs(r)?is(r.target,r,e,s):as(r.target,r,e,s))},hs=(t,e)=>{e.forEach(s=>{t.observe(s)})},ps=(t,e)=>{Ct(t),hs(t,e)},us=(t,e)=>{!ge||Fe(t)||(e._observer=new IntersectionObserver(s=>{ds(s,t,e)},ls(t)))},je=t=>Array.prototype.slice.call(t),F=t=>t.container.querySelectorAll(t.elements_selector),gs=t=>je(t).filter(Q),fs=t=>_t(t),bs=t=>je(t).filter(fs),We=(t,e)=>gs(t||F(e)),ws=(t,e)=>{bs(F(t)).forEach(r=>{v(r,t.class_error),R(r)}),e.update()},vs=(t,e)=>{!y||(e._onlineHandler=()=>{ws(t,e)},window.addEventListener("online",e._onlineHandler))},ms=t=>{!y||window.removeEventListener("online",t._onlineHandler)},O=function(t,e){const s=we(t);this._settings=s,this.loadingCount=0,us(s,this),vs(s,this),this.update(e)};O.prototype={update:function(t){const e=this._settings,s=We(t,e);if(Le(this,s.length),ue||!ge){this.loadAll(s);return}if(Fe(e)){ns(s,e,this);return}ps(this._observer,s)},destroy:function(){this._observer&&this._observer.disconnect(),ms(this),F(this._settings).forEach(t=>{Ae(t)}),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;We(t,e).forEach(r=>{H(r,this),ae(r,e,this)})},restoreAll:function(){const t=this._settings;F(t).forEach(e=>{ss(e,t)})}},O.load=(t,e)=>{const s=we(e);ae(t,s)},O.resetStatus=t=>{R(t)},y&&wt(O,window.lazyLoadOptions);class Ss{constructor({namespace:e,pages$:s,sideEffect:r,readonly$:i,events:a,wrapClassName:n,root:c,pagesIndex$:l}){this.showPreview$=new S(!1),this.namespace=e,this.pages$=s,this.sideEffect=r,this.readonly$=i,this.events=a,this.wrapClassName=n,this.sideEffect.addDisposer(this.events.on("togglePreview",()=>{this.showPreview$.setValue(!this.showPreview$.value)})),this.sideEffect.addDisposer(this.showPreview$.subscribe(o=>{this.sideEffect.add(()=>{const d=this.renderPreview(),p=this.renderPreviewMask();if(o){c.appendChild(d),c.appendChild(p),d.scrollTop;const u=d.querySelector("."+this.wrapClassName(`preview-page-${l.value}`));return u&&d.scrollTo({top:u.offsetTop-16}),d.classList.toggle(this.wrapClassName("preview-active"),!0),this.previewLazyLoad=new O({container:this.$preview,elements_selector:"."+this.wrapClassName("preview-page>img")}),()=>{var h;return(h=this.previewLazyLoad)==null?void 0:h.destroy()}}else return d.classList.toggle(this.wrapClassName("preview-active"),!1),this.sideEffect.setTimeout(()=>{d.remove(),p.remove()},500,"preview-remove"),null},"preview-lazyload")}))}destroy(){var e,s;(e=this.$preview)==null||e.remove(),(s=this.$previewMask)==null||s.remove()}renderPreview(){if(this.$preview)return this.$preview;const e=document.createElement("div");return e.className=this.wrapClassName("preview")+" tele-fancy-scrollbar",this.$preview=e,this.sideEffect.addEventListener(e,"wheel",s=>s.stopPropagation(),{passive:!1}),this.sideEffect.addDisposer(this.pages$.subscribe(s=>{var r;this.sideEffect.add(()=>{const i=s.map((a,n)=>{var u;const c=(u=a.thumbnail)!=null?u:a.src.startsWith("ppt")?void 0:a.src;if(!c)return;const l=String(n),o=document.createElement("a");o.className=this.wrapClassName("preview-page")+" "+this.wrapClassName(`preview-page-${n}`),o.setAttribute("href","#"),o.dataset.pageIndex=l;const d=document.createElement("span");d.className=this.wrapClassName("preview-page-name"),d.textContent=String(n+1),d.dataset.pageIndex=l;const p=document.createElement("img");return p.width=a.width,p.height=a.height,p.dataset.src=c,p.dataset.pageIndex=l,o.appendChild(p),o.appendChild(d),e.appendChild(o),o});return()=>i.forEach(a=>a==null?void 0:a.remove())},"render-preview-pages"),(r=this.previewLazyLoad)==null||r.update()})),this.sideEffect.addEventListener(e,"click",s=>{var i;if(this.readonly$.value)return;const r=(i=s.target.dataset)==null?void 0:i.pageIndex;r&&(s.preventDefault(),s.stopPropagation(),s.stopImmediatePropagation(),this.events.emit("jumpPage",Number(r)),this.showPreview$.setValue(!1))}),e}renderPreviewMask(){if(this.$previewMask)return this.$previewMask;const e=document.createElement("div");return e.className=this.wrapClassName("preview-mask"),this.$previewMask=e,this.sideEffect.addEventListener(e,"click",s=>{this.readonly$.value||s.target===e&&this.showPreview$.setValue(!1)}),e}}function _s(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-sidebar`),s.setAttribute("viewBox","0 0 64 64");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M50 8H14c-3.309 0-6 2.691-6 6v36c0 3.309 2.691 6 6 6h36c3.309 0 6-2.691 6-6V14c0-3.309-2.691-6-6-6zM12 50V14c0-1.103.897-2 2-2h8v40h-8c-1.103 0-2-.897-2-2zm40 0c0 1.103-.897 2-2 2H26V12h24c1.103 0 2 .897 2 2z"),s.appendChild(r),s}function Es(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-left`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M177.81 249.959L337.473 90.295c2.722-2.865 2.651-7.378-.143-10.1-2.793-2.65-7.163-2.65-9.956 0l-164.75 164.75c-2.793 2.793-2.793 7.306 0 10.1l164.75 164.75c2.865 2.722 7.378 2.65 10.099-.143 2.651-2.794 2.651-7.163 0-9.957L177.809 249.959z"),s.appendChild(r),s}function ys(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-arrow-right`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M322.19 250.041L162.527 409.705c-2.722 2.865-2.651 7.378.143 10.1 2.793 2.65 7.163 2.65 9.956 0l164.75-164.75c2.793-2.793 2.793-7.306 0-10.1l-164.75-164.75c-2.865-2.722-7.378-2.65-10.099.143-2.651 2.794-2.651 7.163 0 9.957l159.664 159.736z"),s.appendChild(r),s}function $s(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-play`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M418.158 257.419L174.663 413.33c-6.017 3.919-15.708 3.772-21.291-.29-2.791-2.018-4.295-4.483-4.295-7.084V94.109c0-5.65 6.883-10.289 15.271-10.289 4.298 0 8.391 1.307 11.181 3.332l242.629 155.484c6.016 3.917 6.451 10.292.649 14.491-.216.154-.432.154-.649.292zM170.621 391.288l223.116-141.301L170.71 107.753l-.089 283.535z"),s.appendChild(r),s}function xs(t){const e="http://www.w3.org/2000/svg",s=document.createElementNS(e,"svg");s.setAttribute("class",`${t}-footer-icon-pause`),s.setAttribute("viewBox","0 0 500 500");const r=document.createElementNS(e,"path");return r.setAttribute("fill","currentColor"),r.setAttribute("d","M312.491 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261zM165.257 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261z"),s.appendChild(r),s}class Cs{constructor({namespace:e,pages$:s,sideEffect:r,readonly$:i,events:a,playable:n,wrapClassName:c,pagesIndex$:l,root:o}){this.namespace=e,this.pages$=s,this.sideEffect=r,this.readonly$=i,this.events=a,this.wrapClassName=c,this.pagesIndex$=l,this.playable=n,this.$footer=this.render(),o.appendChild(this.$footer)}destroy(){this.$footer.remove()}render(){const e=document.createElement("div");e.className=this.wrapClassName("footer"),this.sideEffect.addDisposer(this.readonly$.subscribe(o=>e.classList.toggle(this.wrapClassName("readonly"),o)));const s=this.renderFooterBtn("btn-sidebar",_s(this.namespace));this.sideEffect.addEventListener(s,"click",()=>{this.readonly$.value||this.events.emit("togglePreview")}),e.appendChild(s),this.sideEffect.addDisposer(this.pages$.subscribe(o=>{const d=o.some(p=>p.thumbnail||!p.src.startsWith("ppt"));s.style.display=d?"":"none"}));const r=document.createElement("div");r.className=this.wrapClassName("page-jumps");const i=this.renderFooterBtn("btn-page-back",Es(this.namespace));if(this.sideEffect.addEventListener(i,"click",()=>{this.readonly$.value||this.events.emit("back")}),r.appendChild(i),this.playable){const o=this.renderFooterBtn("btn-page-play",$s(this.namespace),xs(this.namespace));this.sideEffect.addEventListener(o,"click",()=>{this.readonly$.value||(o.classList.toggle(this.wrapClassName("footer-btn-playing"),!0),this.events.emit("play"),this.sideEffect.setTimeout(()=>o.classList.toggle(this.wrapClassName("footer-btn-playing"),!1),500,"returnPlay"))}),r.appendChild(o)}const a=this.renderFooterBtn("btn-page-next",ys(this.namespace));this.sideEffect.addEventListener(a,"click",()=>{this.readonly$.value||this.events.emit("next")}),r.appendChild(a);const n=document.createElement("div");n.className=this.wrapClassName("page-number");const c=document.createElement("input");c.className=this.wrapClassName("page-number-input"),this.sideEffect.addDisposer(this.readonly$.subscribe(o=>c.disabled=o)),this.sideEffect.addDisposer(this.pagesIndex$.subscribe(o=>c.value=String(o+1))),this.sideEffect.addEventListener(c,"focus",()=>{c.select()}),this.sideEffect.addEventListener(c,"change",()=>{if(this.readonly$.value)return;const o=Number(c.value)-1;o>=0&&this.events.emit("jumpPage",o)});const l=document.createElement("span");return this.sideEffect.addDisposer(this.pages$.subscribe(o=>{l.textContent=" / "+o.length})),n.appendChild(c),n.appendChild(l),e.appendChild(r),e.appendChild(n),e}renderFooterBtn(e,s,r){const i=document.createElement("button");return i.className=this.wrapClassName("footer-btn")+" "+this.wrapClassName(e),i.appendChild(s),r&&i.appendChild(r),i}}class Ls{constructor(){this.listeners=new Map,this.relayListeners=new Set}emit(e,s){var r;(r=this.listeners.get(e))==null||r.forEach(i=>i(s))}on(e,s){let r=this.listeners.get(e);return r||(r=new Set,this.listeners.set(e,r)),r.add(s),r.size===1&&this.relayListeners.forEach(i=>i.start(e)),()=>{this.off(e,s)}}off(e,s){const r=this.listeners.get(e);if(r){const i=r.delete(s);return r.size<=0&&(this.listeners.delete(e),this.relayListeners.forEach(a=>a.dispose(e))),i}return!1}clear(e){var s;e?(s=this.listeners.get(e))==null||s.clear():this.listeners.clear()}count(e){var s;if(e)return((s=this.listeners.get(e))==null?void 0:s.size)||0;{let r=0;return this.listeners.forEach(i=>{r+=i.size}),r}}remit(e,s){let r;const i={start:a=>{a===e&&(r=s(this))},dispose:a=>{r&&(!a||a===e)&&r()}};return this.relayListeners.add(i),()=>{this.relayListeners.delete(i),r&&r()}}destroy(){this.clear(),this.relayListeners.forEach(e=>e.dispose()),this.relayListeners.clear()}}class Ye{constructor({readonly$:e,pagesIndex$:s,box:r,pages:i=[],playable:a}){this.wrapClassName=c=>`${this.namespace}-${c}`,this.namespace="netless-app-docs-viewer",this.sideEffect=new k,this.events=new Ls;const n=new S(i);ut(this,{pages:n}),this.preview=new Ss({pages$:n,readonly$:e,pagesIndex$:s,root:r.$body,sideEffect:this.sideEffect,events:this.events,namespace:this.namespace,wrapClassName:this.wrapClassName}),this.footer=new Cs({pages$:n,readonly$:e,playable:a,pagesIndex$:s,root:r.$footer,namespace:this.namespace,sideEffect:this.sideEffect,events:this.events,wrapClassName:this.wrapClassName})}destroy(){this.preview.destroy(),this.footer.destroy(),this.sideEffect.flushAll(),this.events.destroy()}}function C(t,e,s){return Math.min(Math.max(t,e),s)}function Ge(t){return t.touches?t.touches[0]:t}function qe(t){t.stopPropagation(),t.cancelable&&t.preventDefault()}function Je(t,e){return t.width===e.width&&t.height===e.height}class ks{constructor(e){var s,r,i;this.velocity=0,this._paused=!0,this._animationFrameID=null,this._loopTimestamp=0,this.looper=a=>{var c;if(this._paused)return;let n=Math.floor((a-this._loopTimestamp)/1e3*60)+1;for(this._loopTimestamp=a;n-- >0;)this.stepper();(c=this.onStep)==null||c.call(this,this.current),this._paused?this._animationFrameID=null:this._animationFrameID=window.requestAnimationFrame(this.looper)},this.current=(s=e.start)!=null?s:0,this.target=this.current,this.stiffness=(r=e.stiffness)!=null?r:170,this.damping=(i=e.damping)!=null?i:26,this.onStep=e.onStep}get paused(){return this._paused}stepTo(e,s){var r;this._paused&&s!=null&&(this.current=s),this._paused=!1,this.target=e,(r=this.onStep)==null||r.call(this,this.current),this._loopTimestamp=Date.now(),this._animationFrameID=window.requestAnimationFrame(this.looper)}pause(){this._paused=!0,this._animationFrameID!=null&&window.cancelAnimationFrame(this._animationFrameID)}destroy(){this.pause(),this.onStep=void 0}stepper(){const e=-this.stiffness*(this.current-this.target),s=-this.damping*this.velocity,r=this.velocity+(e+s)/60,i=this.current+r/60;Math.abs(r-0)<.01&&Math.abs(i-this.target)<.01?(this.current=this.target,this.velocity=0,this._paused=!0):(this.current=i,this.velocity=r)}}class Ds{constructor(e,s,r,i,a,n){this.index=e,this.lastVisit=Date.now(),this.sideEffect=new k;const c=A(s,u=>u[e]||{width:0,height:0}),l=w([c,r],([u,h])=>(h.width-u.width)/2),o=w([a,n],([u,h])=>(u[e]||0)-h),d=document.createElement("div");d.className="page-renderer-page",d.dataset.index=`${e}`;const p=document.createElement("img");p.className="page-renderer-page-img",d.appendChild(p),this.sideEffect.addDisposer([w([c,i]).subscribe(([u,h])=>{d.style.width=`${u.width*h}px`,d.style.height=`${u.height*h}px`}),c.subscribe(u=>{u.thumbnail&&(d.style.backgroundImage=`url("${u.thumbnail}")`),p.width=u.width,p.height=u.height,p.src=u.src}),w([l,o,i]).subscribe(([u,h,g])=>{d.style.transform=`translate(${u*g}px, ${h*g}px)`})]),this.$page=d}destroy(){this.sideEffect.flushAll(),this.$page.remove()}}const Is=window.requestIdleCallback||(t=>window.setTimeout(t,5e3)),Ts=window.cancelIdleCallback||window.clearTimeout;class Ns{constructor(e,s,r,i,a){this.pages$=e,this.pagesSize$=s,this.scale$=r,this.pagesYs$=i,this.pagesScrollTop$=a,this.els=new Map,this.maxElCount=200,this.gcTimer=null,this.gc=()=>{var n;if(this.gcTimer=null,this.els.size>this.maxElCount){const c=[...this.els.values()].sort((l,o)=>o.lastVisit-l.lastVisit);for(let l=Math.floor(this.maxElCount/4);l<c.length;l++)(n=this.els.get(c[l].index))==null||n.destroy(),this.els.delete(c[l].index)}}}getEl(e){let s=this.els.get(e);return s||(s=new Ds(e,this.pages$,this.pagesSize$,this.scale$,this.pagesYs$,this.pagesScrollTop$),this.els.set(e,s)),s.lastVisit=Date.now(),this.els.size>this.maxElCount&&this.gcTimer===null&&(this.gcTimer=Is(this.gc)),s}destroy(){this.els.forEach(e=>e.destroy()),this.els.clear(),this.gcTimer!==null&&(Ts(this.gcTimer),this.gcTimer=null)}}class As{constructor({pagesScrollTop$:e,containerRect$:s,pages$:r,pagesSize$:i}){this.sideEffect=new k,r=A(r,h=>h.map(g=>{if(g.thumbnail)return g;try{const f=new URL(g.src);return f.searchParams.set("x-oss-process","image/resize,l_50"),{...g,thumbnail:f.toString()}}catch(f){return console.error(f),g}}));const a=A(r,h=>{const g=Array(h.length);for(let f=0;f<h.length;f++)g[f]=f>0?g[f-1]+h[f-1].height:0;return g}),n=A(r,h=>{let g=1/0;for(let f=h.length-1;f>=0;f--)h[f].height<=g&&(g=h[f].height);return g}),c=w([e,a,r],([h,g,f])=>{for(let m=0;m<g.length;m++)if(g[m]+f[m].height-h>=.001)return m;return g.length-1}),l=w([s,i],([h,g])=>h.width/g.width||1),o=w([r,s,n,l],([h,g,f,m])=>C(Math.ceil(g.height/m/f/2),1,h.length));ht(this,{pagesScrollTop:e,containerRect:s,pages:r,pagesSize:i,pagesIndex:c,pagesYs:a,pagesMinHeight:n,scale:l}),this.pageElManager=new Ns(r,i,l,a,e),this.$pages=this.renderPages();const d=new S(!1);this.sideEffect.addDisposer(d.subscribe(h=>this.$pages.classList.toggle("is-hwa",h)));const p=()=>d.setValue(!1),u=()=>{this.sideEffect.setTimeout(p,1e3,"turn-off-hwa"),d.setValue(!0)};this.sideEffect.addDisposer(w([c,o,r]).subscribe(([h,g,f])=>{u();const m=Math.max(h-g,0),Xe=Math.min(h+g,f.length-1);for(let L=0;L<this.$pages.children.length;L++){const M=this.$pages.children[L],Ke=Number(M.dataset.index);Ke>=m&&Ke<=Xe||(M.remove(),L--)}for(let L=m;L<=Xe;L++){const M=this.pageElManager.getEl(L);M.$page.parentElement!==this.$pages&&this.$pages.appendChild(M.$page)}}))}renderPages(){const e=document.createElement("div");return e.className="page-renderer-pages-container",this.sideEffect.addDisposer(this._containerRect$.subscribe(s=>{e.style.width=`${s.width}px`,e.style.height=`${s.height}px`}),"render-pages-size"),e}destroy(){this.sideEffect.flushAll(),this.$pages.remove(),this.pageElManager.destroy()}}const Ps=30;class Vs{constructor({pagesScrollTop$:e,containerRect$:s,stageRect$:r,pagesSize$:i,readonly$:a,scrollbarMinHeight:n=Ps,wrapClassName:c,onDragScroll:l}){this.sideEffect=new k,this.scrolling$=new S(!1),this.pagesScrollTop$=e,this.containerRect$=s,this.stageRect$=r,this.pagesSize$=i,this.scrollbarMinHeight=n,this.readonly$=a,this.wrapClassName=c,this.onDragScroll=l,this.scrollbarHeight$=w([s,r,i],([o,d,p])=>C(d.height/(d.width/p.width*p.height)*o.height,n,o.height)),this.scrollTop$=w([s,r,i,this.scrollbarHeight$,this.pagesScrollTop$],([o,d,p,u,h])=>C(h/(p.height-p.width/d.width*d.height)*(o.height-u),0,o.height-u)),this.$scrollbar=this.renderScrollbar()}mount(e){e.appendChild(this.$scrollbar)}destroy(){this.$scrollbar.remove(),this.onDragScroll=void 0,this.sideEffect.flushAll()}renderScrollbar(){const e=document.createElement("button");e.className=this.wrapClassName("scrollbar"),e.style.minHeight=`${this.scrollbarMinHeight}px`,this.sideEffect.addDisposer([this.scrollbarHeight$.subscribe(r=>{e.style.height=`${r}px`}),this.scrollTop$.subscribe(r=>{this.scrolling$.setValue(!0),this.sideEffect.setTimeout(()=>this.scrolling$.setValue(!1),100,"reset-scrolling");const i=()=>e.style.transform=`translateY(${r}px)`;window.requestAnimationFrame?window.requestAnimationFrame(i):i()}),this.scrolling$.subscribe(r=>{e.classList.toggle(this.wrapClassName("scrolling"),r)})]);const s=r=>{if(!r.isPrimary||this.readonly$.value||r.button!=null&&r.button!==0)return;qe(r);const i=this.wrapClassName("scrollbar-dragging");e.classList.toggle(i,!0);const a=this.pagesScrollTop$.value,{clientY:n}=Ge(r),c=o=>{if(!o.isPrimary||this.readonly$.value)return;const{clientY:d}=Ge(o),p=d-n;Math.abs(p)>0&&this.onDragScroll&&this.onDragScroll(a+p/this.containerRect$.value.height*this.pagesSize$.value.height)},l=o=>{!o.isPrimary||(e.classList.toggle(i,!1),window.removeEventListener("pointermove",c,!0),window.removeEventListener("pointerup",l,!0),window.removeEventListener("pointercancel",l,!0))};window.addEventListener("pointermove",c,!0),window.addEventListener("pointerup",l,!0),window.addEventListener("pointercancel",l,!0)};return this.sideEffect.addEventListener(e,"pointerdown",s),e}}class zs{constructor({whiteboard:e,readonly$:s,box:r,pages:i,pagesScrollTop:a=0,onUserScroll:n}){this.sideEffect=new k,this.userScrolling=!1,this.whiteboard=e,this.readonly$=s,this.box=r,this.pages=i,this.onUserScroll=n;const c=()=>{var o;this.userScrolling=!1,(o=this.onUserScroll)==null||o.call(this,this.pagesScrollTop$.value)};this.debounceOnUserScroll=()=>{this.userScrolling=!0,this.sideEffect.setTimeout(c,80,"debounceOnUserScroll")};const l=new S(i);this.pagesScrollTop$=new S(a),this.pagesSize$=A(l,o=>{let d=0,p=0;for(let u=o.length-1;u>=0;u--){const h=o[u];h.width>d&&(d=h.width),p+=h.height}return{width:Math.max(1,d),height:Math.max(1,p)}},{compare:Je}),this.pageRenderer=new As({pagesScrollTop$:this.pagesScrollTop$,containerRect$:r._stageRect$,pages$:l,pagesSize$:this.pagesSize$}),this.viewer=new Ye({readonly$:s,pagesIndex$:this.pageRenderer._pagesIndex$,box:r,pages:i,playable:!1}),this.sideEffect.addDisposer([this.viewer.events.on("next",()=>{this.userScrollByPercent(.8)}),this.viewer.events.on("back",()=>{this.userScrollByPercent(-.8)})]),this.scrollbar=new Vs({pagesScrollTop$:this.pagesScrollTop$,containerRect$:r._bodyRect$,stageRect$:r._stageRect$,pagesSize$:this.pagesSize$,readonly$:s,wrapClassName:this.wrapClassName.bind(this),onDragScroll:o=>{this.pageScrollTo(o),this.debounceOnUserScroll()}}),this.pageScrollStepper=new ks({start:this.pagesScrollTop$.value,onStep:o=>{this.pageScrollTo(o)}}),this.sideEffect.addDisposer(this.viewer.events.on("jumpPage",o=>this.userScrollToPageIndex(o))),this.render(),this.setupScrollListener(),this.sideEffect.setTimeout(()=>{this.userScrolling||this.pageScrollTo(this.pageRenderer.pagesScrollTop)},100)}get pagesScrollTop(){return this.pagesScrollTop$.value}destroy(){this.sideEffect.flushAll(),this.pageScrollStepper.destroy(),this.onUserScroll=void 0,this.viewer.destroy(),this.pageRenderer.destroy(),this.scrollbar.destroy()}syncPageScrollTop(e){!this.userScrolling&&e>=0&&Math.abs(this.pagesScrollTop$.value-e)>.01&&this.pageScrollStepper.stepTo(e,this.pagesScrollTop$.value)}render(){this.box.$content.style.overflow="hidden",this.box.mountStage(this.pageRenderer.$pages),this.scrollbar.mount(this.box.$body)}pageScrollTo(e){const s=this.whiteboard.view.size.height/2/this.pageRenderer.scale;this.whiteboard.view.moveCamera({centerY:C(e+s,s,this.pagesSize$.value.height-s),animationMode:"immediately"})}userScrollToPageIndex(e){var s;if(e=C(e,0,this.pages.length-1),!this.readonly$.value&&!Number.isNaN(e)){const r=this.pageRenderer.pagesYs[e];r>=0&&((s=this.onUserScroll)==null||s.call(this,r+5/this.pageRenderer.scale))}}userScrollByPercent(e){var s;this.readonly$.value||(s=this.onUserScroll)==null||s.call(this,C(this.pageRenderer.pagesScrollTop+this.pageRenderer.containerRect.height/this.pageRenderer.scale*C(e,-1,1),0,this.pageRenderer.pagesSize.height-this.pageRenderer.containerRect.height/this.pageRenderer.scale))}setupScrollListener(){this.sideEffect.addEventListener(this.box.$main,"wheel",e=>{qe(e),!this.readonly$.value&&this.pageScrollStepper.paused&&(this.pageScrollTo(this.pagesScrollTop+e.deltaY),this.debounceOnUserScroll())},{passive:!1}),this.sideEffect.addEventListener(this.box.$main,"touchmove",e=>{!this.readonly$.value&&e.touches.length>1&&this.debounceOnUserScroll()},{passive:!0,capture:!0}),this.sideEffect.add(()=>{const e=s=>{const{width:r,height:i}=this.whiteboard.view.size;if(r<=0||i<=0)return;const a=s.centerY-this.pageRenderer.containerRect.height/this.pageRenderer.scale/2;this.pagesScrollTop$.setValue(a)};return this.whiteboard.view.callbacks.on("onCameraUpdated",e),()=>this.whiteboard.view.callbacks.off("onCameraUpdated",e)}),this.sideEffect.addDisposer(this.box._stageRect$.subscribe(e=>{const{width:s,height:r}=this.pagesSize$.value;this.whiteboard.view.moveCameraToContain({originX:0,originY:this.pageRenderer.pagesScrollTop,width:s,height:e.height/this.pageRenderer.scale,animationMode:"immediately"}),this.whiteboard.view.setCameraBound({damping:1,maxContentMode:()=>this.pageRenderer.scale,minContentMode:()=>this.pageRenderer.scale,centerX:s/2,centerY:r/2,width:s,height:r})}),"whiteboard-size-update"),this.sideEffect.addEventListener(window,"keyup",e=>{if(!(this.readonly$.value||!this.box.focus||this.box.minimized))switch(e.key){case"PageDown":{this.userScrollByPercent(.8);break}case"PageUp":{this.userScrollByPercent(-.8);break}case"ArrowLeft":{this.userScrollByPercent(-.25);break}case"ArrowRight":{this.userScrollByPercent(.25);break}case"ArrowDown":{this.userScrollByPercent(.5);break}case"ArrowUp":{this.userScrollByPercent(-.5);break}}},{capture:!0})}wrapClassName(e){return"netless-app-docs-viewer-static-"+e}}class Os{constructor({readonly$:e,context:s,whiteboard:r,box:i,pages:a}){this.sideEffect=new k,this.context=s,this.whiteboard=r,this.box=i,this.pages=a;const n=new S(s.displayer.state.sceneState.index||0);this.pagesIndex$=n,this.sideEffect.add(()=>{const c=l=>{this.jumpToPage(l.index)};return this.context.emitter.on("sceneStateChange",c),()=>this.context.emitter.off("sceneStateChange",c)}),this.viewer=new Ye({readonly$:e,pagesIndex$:n,box:i,pages:a,playable:!0}),this.sideEffect.addDisposer([this.viewer.events.on("jumpPage",c=>this.jumpToPage(c,!0)),this.viewer.events.on("play",()=>{var c;return(c=this.context.room)==null?void 0:c.pptNextStep()}),this.viewer.events.on("back",()=>this.prevPage()),this.viewer.events.on("next",()=>this.nextPage())]),this.render(),this.sideEffect.addDisposer(n.subscribe((c,l)=>{var p,u;if(e.value)return;const o=this.context.getInitScenePath(),d=(u=(p=this.context.getScenes())==null?void 0:p[c])==null?void 0:u.name;if(o&&d&&this.context.setScenePath(`${o}/${d}`),l){const h=this.context.room;if(h){const g=h.state.globalState.__pptState;h.setGlobalState({__pptState:g&&{uuid:g.uuid,pageIndex:c,disableAutoPlay:g.disableAutoPlay}})}}}))}destroy(){this.sideEffect.flushAll(),this.viewer.destroy()}nextPage(){this.jumpToPage(this.pagesIndex$.value+1,!0)}prevPage(){this.jumpToPage(this.pagesIndex$.value-1,!0)}jumpToPage(e,s=!1){this.pagesIndex$.setValue(C(e,0,this.pages.length-1),s)}render(){var s;this.box.mountStage(document.createElement("div")),this.sideEffect.addEventListener(window,"keydown",r=>{var i;if(this.box.focus)switch(r.key){case"ArrowUp":case"ArrowLeft":{this.prevPage();break}case"ArrowRight":case"ArrowDown":{(i=this.context.room)==null||i.pptNextStep();break}}});const e=(s=this.whiteboard.view.divElement)==null?void 0:s.parentElement;e&&this.sideEffect.addEventListener(e,"click",r=>{var a;const i=this.context.room;if(i&&i.state.memberState.currentApplianceName==="clicker"){for(let n=r.target;n;n=n.parentElement)if((a=n.classList)!=null&&a.contains("ppt-event-source"))return;i.pptNextStep()}})}wrapClassName(e){return"netless-app-docs-viewer-dynamic-"+e}}const Ms={kind:"DocsViewer",setup(t){const e=t.box,s=t.getScenes();if(!s)throw new Error("[Docs Viewer]: scenes not found.");const r=new k,i=s.map(({ppt:n})=>n?{width:n.width,height:n.height,src:n.src,thumbnail:n.previewURL}:null).filter(n=>Boolean(n));if(i.length<=0)throw new Error("[Docs Viewer]: empty scenes.");e.mountStyles(Qe);const a=new S(!t.isWritable);r.addDisposer(t.emitter.on("writableChange",n=>{a.setValue(!n)})),i[0].src.startsWith("ppt")?Hs(r,t,e,i,a):Rs(r,t,e,i,a),r.addDisposer(t.emitter.on("destroy",()=>{r.flushAll()}))}};function Rs(t,e,s,r,i){const a=e.createWhiteBoardView({syncCamera:!1});t.addDisposer(i.subscribe(o=>{a.view.disableCameraTransform=o}));const n=e.createStorage("static-docs-viewer",{pagesScrollTop:0}),c=new zs({whiteboard:a,readonly$:i,box:s,pages:r,pagesScrollTop:n.state.pagesScrollTop,onUserScroll:o=>{e.isWritable&&n.setState({pagesScrollTop:o})}});t.addDisposer(()=>c.destroy()),t.addDisposer(n.addStateChangedListener(o=>{o.pagesScrollTop&&c.syncPageScrollTop(o.pagesScrollTop.newValue||0)}));let l=1;if(r.length>0){const{width:o,height:d}=r[0];d<=o?l=d/o:l=.5*d/o}t.addDisposer(w([s._maximized$,s._managerStageRect$,s._intrinsicSize$],([o,d,p])=>o?l:p.height*(d.height/d.width)/p.width).subscribe(o=>{s.setStageRatio(o)}))}function Hs(t,e,s,r,i){const a=e.createWhiteBoardView();a.view.disableCameraTransform=!0;const n=new Os({context:e,whiteboard:a,box:s,pages:r,readonly$:i});t.addDisposer(()=>n.destroy());const c=new S({width:r[0].width,height:r[0].height},{compare:Je});if(t.addDisposer(n.pagesIndex$.subscribe(l=>{const o=r[l];o&&c.setValue({width:o.width,height:o.height})})),t.addDisposer(c.subscribe(l=>{i.value||a.setBaseRect(l)})),e.isAddApp){const l=t.add(()=>{const o=({width:d,height:p})=>{if(r.length>0&&s.state!=="maximized"){const{width:u,height:h}=r[0],f=h/u*d-p;f!==0&&e.isWritable&&e.emitter.emit("setBoxSize",{width:s.intrinsicWidth,height:s.intrinsicHeight+f/s.rootRect.height})}t.remove(l)};return a.view.callbacks.once("onSizeUpdated",o),()=>a.view.callbacks.off("onSizeUpdated",o)})}}return j.default=Ms,Object.defineProperties(j,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),j}({});
 //# sourceMappingURL=main.iife.js.map

dist/PageRenderer/index.d.ts

 import type { DocsViewerPage } from "../DocsViewer";
 import { PageElManager } from "./PageElManager";
+import { type ReadonlyVal, type ReadonlyValEnhancedResult } from "value-enhancer";
+import type { TeleBoxRect } from "@netless/window-manager";
 export interface PageRendererConfig {
-    pagesScrollTop?: number;
-    containerWidth: number;
-    containerHeight: number;
-    pages: ReadonlyArray<DocsViewerPage>;
-    onPageIndexChanged?: (index: number) => void;
+    pagesScrollTop$: ReadonlyVal<number>;
+    containerRect$: ReadonlyVal<TeleBoxRect>;
+    pages$: ReadonlyVal<DocsViewerPage[]>;
+    pagesSize$: ReadonlyVal<{
+        width: number;
+        height: number;
+    }>;
 }
+export declare type ReadonlyValConfig = {
+    pagesScrollTop: PageRendererConfig["pagesScrollTop$"];
+    containerRect: PageRendererConfig["containerRect$"];
+    pages: PageRendererConfig["pages$"];
+    pagesSize: PageRendererConfig["pagesSize$"];
+    pagesIndex: ReadonlyVal<number>;
+    pagesYs: ReadonlyVal<number[]>;
+    pagesMinHeight: ReadonlyVal<number>;
+    /** containerRect.width / pagesSize.width, (el / intrinsic) */
+    scale: ReadonlyVal<number>;
+};
+export interface PageRenderer extends ReadonlyValEnhancedResult<ReadonlyValConfig> {
+}
 /**
@@ -15,29 +32,7 @@ * High-performance renderer for large number of page images
     readonly $pages: HTMLDivElement;
-    readonly pages: ReadonlyArray<DocsViewerPage>;
-    readonly pagesIntrinsicYs: ReadonlyArray<number>;
-    readonly pagesIntrinsicWidth: number;
-    readonly pagesIntrinsicHeight: number;
-    readonly pagesMinHeight: number;
+    private readonly sideEffect;
     readonly pageElManager: PageElManager;
-    containerWidth: number;
-    containerHeight: number;
-    threshold: number;
-    scale: number;
-    pagesScrollTop: number;
-    pageScrollIndex: number;
-    onPageIndexChanged?: (index: number) => void;
-    constructor(config: PageRendererConfig);
-    setContainerSize(width: number, height: number): void;
+    constructor({ pagesScrollTop$, containerRect$, pages$, pagesSize$ }: PageRendererConfig);
     renderPages(): HTMLDivElement;
-    pagesScrollTo(pagesScrollTop: number, force?: boolean): void;
-    findScrollPageIndex(): number;
-    mount($parent: HTMLElement): void;
-    unmount(): void;
     destroy(): void;
-    private _calcScale;
-    private _calcThreshold;
-    private _hwaTimeout;
-    /** Hardware Acceleration */
-    private _turnOnHWA;
-    private _turnOffHWA;
 }

dist/PageRenderer/PageEl.d.ts

@@ -0,15 +1,13 @@
+import { type ReadonlyVal } from "value-enhancer";
 import type { DocsViewerPage } from "../DocsViewer";
 export declare class PageEl {
-    index: number;
-    page: DocsViewerPage;
-    scale: number;
+    readonly index: number;
     lastVisit: number;
     $page: HTMLDivElement;
-    pageOffsetY: number;
-    pageOffsetX: number;
-    visible: boolean;
-    constructor(index: number, page: DocsViewerPage, scale: number, pagesIntrinsicWidth: number);
-    translateY(pageOffsetY: number): void;
-    setScale(scale: number): void;
-    setVisible(visible: boolean): void;
+    private sideEffect;
+    constructor(index: number, pages$: ReadonlyVal<DocsViewerPage[]>, pagesSize$: ReadonlyVal<{
+        width: number;
+        height: number;
+    }>, scale$: ReadonlyVal<number>, pagesYs$: ReadonlyVal<number[]>, pagesScrollTop$: ReadonlyVal<number>);
+    destroy(): void;
 }

dist/PageRenderer/PageElManager.d.ts

@@ -0,15 +1,20 @@
+import type { ReadonlyVal } from "value-enhancer";
 import type { DocsViewerPage } from "../DocsViewer";
 import { PageEl } from "./PageEl";
 export declare class PageElManager {
-    private pages;
-    private pagesIntrinsicWidth;
-    private scale;
+    private pages$;
+    private pagesSize$;
+    private scale$;
+    private pagesYs$;
+    private pagesScrollTop$;
     els: Map<number, PageEl>;
     private maxElCount;
     private gcTimer;
-    constructor(pages: ReadonlyArray<DocsViewerPage>, pagesIntrinsicWidth: number, scale: number);
+    constructor(pages$: ReadonlyVal<DocsViewerPage[]>, pagesSize$: ReadonlyVal<{
+        width: number;
+        height: number;
+    }>, scale$: ReadonlyVal<number>, pagesYs$: ReadonlyVal<number[]>, pagesScrollTop$: ReadonlyVal<number>);
     getEl(index: number): PageEl;
-    setScale(scale: number): void;
     destroy(): void;
     private gc;
 }

dist/ScrollBar/index.d.ts

@@ -0,8 +1,13 @@
+import type { TeleBoxRect } from "@netless/window-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import { Val } from "value-enhancer";
 export interface ScrollBarConfig {
-    pagesScrollTop?: number;
-    containerWidth: number;
-    containerHeight: number;
-    pagesWidth: number;
-    pagesHeight: number;
-    readonly: boolean;
+    pagesScrollTop$: ReadonlyVal<number>;
+    containerRect$: ReadonlyVal<TeleBoxRect>;
+    stageRect$: ReadonlyVal<TeleBoxRect>;
+    pagesSize$: ReadonlyVal<{
+        width: number;
+        height: number;
+    }>;
+    readonly$: ReadonlyVal<boolean>;
     scrollbarMinHeight?: number;
@@ -14,25 +19,18 @@ wrapClassName: (className: string) => string;
     private sideEffect;
-    containerWidth: number;
-    containerHeight: number;
-    readonly pagesWidth: number;
-    readonly pagesHeight: number;
     readonly scrollbarMinHeight: number;
-    readonly: boolean;
+    readonly readonly$: ScrollBarConfig["readonly$"];
     wrapClassName: (className: string) => string;
     onDragScroll?: (pageScrollTop: number) => void;
-    scale: number;
-    pagesScrollTop: number;
-    scrollbarHeight: number;
     readonly $scrollbar: HTMLButtonElement;
-    constructor(config: ScrollBarConfig);
+    readonly pagesScrollTop$: ScrollBarConfig["pagesScrollTop$"];
+    readonly containerRect$: ScrollBarConfig["containerRect$"];
+    readonly stageRect$: ScrollBarConfig["stageRect$"];
+    readonly pagesSize$: ScrollBarConfig["pagesSize$"];
+    readonly scrolling$: Val<boolean, any>;
+    readonly scrollbarHeight$: ReadonlyVal<number>;
+    readonly scrollTop$: ReadonlyVal<number>;
+    constructor({ pagesScrollTop$, containerRect$, stageRect$, pagesSize$, readonly$, scrollbarMinHeight, wrapClassName, onDragScroll, }: ScrollBarConfig);
     mount($parent: HTMLElement): void;
-    unmount(): void;
-    setReadonly(readonly: boolean): void;
-    setContainerSize(width: number, height: number): void;
-    pagesScrollTo(pagesScrollTop: number, force?: boolean): void;
     destroy(): void;
     private renderScrollbar;
-    private _calcScale;
-    private _calcScrollbarHeight;
-    private _updateScrollbarHeight;
 }

dist/StaticDocsViewer/index.d.ts

@@ -1,4 +0,2 @@
-import type { ReadonlyTeleBox } from "@netless/window-manager";
-import type { View } from "white-web-sdk";
-import type { DebouncedFunction, Options } from "debounce-fn";
+import type { ReadonlyTeleBox, WhiteBoardView } from "@netless/window-manager";
 import { SideEffectManager } from "side-effect-manager";
@@ -10,14 +8,21 @@ import type { DocsViewerPage } from "../DocsViewer";
 import { ScrollBar } from "../ScrollBar";
+import { Val, type ReadonlyVal } from "value-enhancer";
 export interface StaticDocsViewerConfig {
-    whiteboardView: View;
-    readonly: boolean;
+    whiteboard: WhiteBoardView;
+    readonly$: ReadonlyVal<boolean>;
     box: ReadonlyTeleBox;
     pages: DocsViewerPage[];
-    mountWhiteboard: (dom: HTMLDivElement) => void;
     /** Scroll Top of the original page */
-    pageScrollTop?: number;
+    pagesScrollTop?: number;
     onUserScroll?: (pageScrollTop: number) => void;
 }
 export declare class StaticDocsViewer {
-    constructor({ whiteboardView, readonly, box, pages, pageScrollTop, mountWhiteboard, onUserScroll, }: StaticDocsViewerConfig);
+    readonly readonly$: StaticDocsViewerConfig["readonly$"];
+    readonly pagesScrollTop$: Val<number>;
+    get pagesScrollTop(): number;
+    readonly pagesSize$: ReadonlyVal<{
+        width: number;
+        height: number;
+    }>;
+    constructor({ whiteboard, readonly$, box, pages, pagesScrollTop, onUserScroll, }: StaticDocsViewerConfig);
     readonly pageRenderer: PageRenderer;
@@ -28,13 +33,8 @@ readonly scrollbar: ScrollBar;
     protected userScrolling: boolean;
-    protected readonly: boolean;
     protected pages: DocsViewerPage[];
     protected box: ReadonlyTeleBox;
-    protected whiteboardView: View;
-    protected mountWhiteboard: (dom: HTMLDivElement) => void;
-    _onUserScroll?: (pageScrollTop: number) => void;
+    protected whiteboard: WhiteBoardView;
+    onUserScroll?: (pageScrollTop: number) => void;
+    debounceOnUserScroll: () => void;
     viewer: DocsViewer;
-    $whiteboardView: HTMLDivElement;
-    mount(): this;
-    unmount(): this;
-    setReadonly(readonly: boolean): void;
     destroy(): void;
@@ -44,16 +44,8 @@ /** Sync scrollTop from writable user */
     render(): void;
-    protected renderRatioHeight(): void;
-    protected renderWhiteboardView(): HTMLDivElement;
-    protected scrollTopPageToEl(pageScrollTop: number): number;
-    protected scrollTopElToPage(elScrollTop: number): number;
-    /** Scroll base on DOM rect */
-    protected elScrollTo(elScrollTop: number): void;
     /** Scroll base on docs size */
-    protected pageScrollTo(pageScrollTop: number): void;
-    protected scrollToPage(index: number): void;
+    private pageScrollTo;
+    private userScrollToPageIndex;
+    private userScrollByPercent;
     protected setupScrollListener(): void;
-    protected debounce<ArgumentsType extends unknown[], ReturnType>(fn: (...args: ArgumentsType) => ReturnType, options?: Options, disposerID?: string): DebouncedFunction<ArgumentsType, ReturnType | undefined>;
-    protected updateUserScroll: () => void;
-    protected wrapClassName(className: string): string;
-    protected onNewPageIndex: (index: number) => void;
+    private wrapClassName;
 }

dist/StaticDocsViewer/stepper.d.ts

@@ -5,3 +5,3 @@ export interface StepperConfig {
     damping?: number;
-    onStep: (value: number) => void;
+    onStep?: (value: number) => void;
 }
@@ -14,6 +14,7 @@ export declare class Stepper {
     velocity: number;
-    onStep: (value: number, stepper: Stepper) => void;
-    paused: boolean;
-    protected _animationFrameID: number | null;
-    protected _loopTimestamp: number;
+    onStep?: (value: number) => void;
+    get paused(): boolean;
+    private _paused;
+    private _animationFrameID;
+    private _loopTimestamp;
     constructor(config: StepperConfig);
@@ -20,0 +21,0 @@ stepTo(target: number, start?: number): 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;
+export declare function sameSize(size1: {
+    width: number;
+    height: number;
+}, size2: {
+    width: number;
+    height: number;
+}): boolean;

package.json

 {
   "name": "@netless/app-docs-viewer",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "Netless App Docs Viewer",
@@ -19,9 +19,9 @@ "repository": "netless-io/netless-app",
   "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "debounce-fn": "^5.1.0",
-    "vanilla-lazyload": "^17.6.1"
+    "remitter": "^0.2.3",
+    "value-enhancer": "^1.3.2",
+    "vanilla-lazyload": "^17.8.2"
   },
   "devDependencies": {
     "@netless/app-shared": "0.1.2",
-    "side-effect-manager": "^0.1.5"
+    "side-effect-manager": "^1.1.1"
   },
@@ -33,4 +33,3 @@ "scripts": {
     "cleanup": "rimraf ./dist"
-  },
-  "readme": "## @netless/app-docs-viewer\n\nNetless App for viewing static documents and animated slides.\n\n### Usage\n\nSee [playground](https://github.com/netless-io/netless-app/tree/master/packages/playground).\n\n### Licence\n\nMIT @ [netless](https://github.com/netless-io)\n"
+  }
 }

src/DocsViewer/index.ts

@@ -1,349 +0,77 @@
-import { sidebarSVG } from "./icons/sidebar";
-import { arrowLeftSVG } from "./icons/arrow-left";
-import { arrowRightSVG } from "./icons/arrow-right";
-import { playSVG } from "./icons/play";
-import { pauseSVG } from "./icons/pause";
+import type { ReadonlyTeleBox } from "@netless/window-manager";
 
-import type { ReadonlyTeleBox } from "@netless/window-manager";
-import LazyLoad from "vanilla-lazyload";
 import { SideEffectManager } from "side-effect-manager";
+import { withValueEnhancer, type ReadonlyVal, Val, type ValEnhancedResult } from "value-enhancer";
+import type { DocsViewerEventData, DocsViewerPage } from "./typings";
+import { Preview } from "./Preview";
+import { Footer } from "./Footer";
+import { Remitter } from "remitter";
 
-export interface DocsViewerPage {
-  src: string;
-  height: number;
-  width: number;
-  thumbnail?: string;
-}
+export * from "./typings";
 
+export type ValConfig = {
+  pages: Val<DocsViewerPage[]>;
+};
+
+export interface DocsViewer extends ValEnhancedResult<ValConfig> {}
+
 export interface DocsViewerConfig {
-  readonly: boolean;
+  readonly$: ReadonlyVal<boolean>;
+  pagesIndex$: ReadonlyVal<number>;
+  pages?: DocsViewerPage[];
   box: ReadonlyTeleBox;
-  pages: DocsViewerPage[];
-  onNewPageIndex: (index: number) => void;
-  onPlay?: () => void;
+  playable: boolean;
 }
 
 export class DocsViewer {
-  public constructor({ readonly, box, pages, onNewPageIndex, onPlay }: DocsViewerConfig) {
-    if (pages.length <= 0) {
-      throw new Error("[DocsViewer] Empty pages.");
-    }
+  public constructor({ readonly$, pagesIndex$, box, pages = [], playable }: DocsViewerConfig) {
+    const pages$ = new Val(pages);
 
-    this.readonly = readonly;
-    this.box = box;
-    this.pages = pages;
-    this.onNewPageIndex = onNewPageIndex;
-    this.onPlay = onPlay;
+    withValueEnhancer(this, {
+      pages: pages$,
+    });
 
-    this.render();
-  }
+    this.preview = new Preview({
+      pages$,
+      readonly$,
+      pagesIndex$,
+      root: box.$body,
+      sideEffect: this.sideEffect,
+      events: this.events,
+      namespace: this.namespace,
+      wrapClassName: this.wrapClassName,
+    });
 
-  protected readonly: boolean;
-  protected pages: DocsViewerPage[];
-  protected box: ReadonlyTeleBox;
-  protected onNewPageIndex: (index: number) => void;
-  protected onPlay?: () => void;
-
-  public $content!: HTMLElement;
-  public $preview!: HTMLElement;
-  public $previewMask!: HTMLElement;
-  public $footer!: HTMLElement;
-  public $pageNumberInput!: HTMLInputElement;
-
-  public pageIndex = 0;
-
-  public mount(): void {
-    this.box.mountContent(this.$content);
-    this.box.mountFooter(this.$footer);
-
-    this.sideEffect.add(() => {
-      const previewLazyLoad = new LazyLoad({
-        container: this.$preview,
-        elements_selector: `.${this.wrapClassName("preview-page>img")}`,
-      });
-      return () => previewLazyLoad.destroy();
-    }, "preview-lazyload");
+    this.footer = new Footer({
+      pages$,
+      readonly$,
+      playable,
+      pagesIndex$,
+      root: box.$footer,
+      namespace: this.namespace,
+      sideEffect: this.sideEffect,
+      events: this.events,
+      wrapClassName: this.wrapClassName,
+    });
   }
 
-  public unmount(): void {
-    this.$content.remove();
-    this.$footer.remove();
-  }
+  public preview: Preview;
+  public footer: Footer;
 
-  public setReadonly(readonly: boolean): void {
-    if (this.readonly !== readonly) {
-      this.readonly = readonly;
-
-      this.$content.classList.toggle(this.wrapClassName("readonly"), readonly);
-
-      this.$footer.classList.toggle(this.wrapClassName("readonly"), readonly);
-
-      this.$pageNumberInput.disabled = readonly;
-    }
-  }
-
   public destroy(): void {
+    this.preview.destroy();
+    this.footer.destroy();
     this.sideEffect.flushAll();
-    this.unmount();
+    this.events.destroy();
   }
 
-  public setPageIndex(pageIndex: number): void {
-    if (!Number.isNaN(pageIndex)) {
-      this.pageIndex = pageIndex;
-      this.$pageNumberInput.value = String(pageIndex + 1);
-    }
-  }
-
-  public setSmallBox(isSmallBox: boolean): void {
-    if (this.isSmallBox !== isSmallBox) {
-      this.isSmallBox = isSmallBox;
-      this.$footer.classList.toggle(this.wrapClassName("float-footer"), isSmallBox);
-    }
-  }
-
-  public render(): HTMLElement {
-    this.renderContent();
-    this.renderFooter();
-    return this.$content;
-  }
-
-  protected renderContent(): HTMLElement {
-    if (!this.$content) {
-      const $content = document.createElement("div");
-      $content.className = this.wrapClassName("content");
-      this.$content = $content;
-
-      if (this.readonly) {
-        $content.classList.add(this.wrapClassName("readonly"));
-      }
-
-      $content.appendChild(this.renderPreviewMask());
-      $content.appendChild(this.renderPreview());
-    }
-    return this.$content;
-  }
-
-  protected renderPreview(): HTMLElement {
-    if (!this.$preview) {
-      const $preview = document.createElement("div");
-      $preview.className = this.wrapClassName("preview") + " tele-fancy-scrollbar";
-      this.$preview = $preview;
-
-      const pageClassName = this.wrapClassName("preview-page");
-      const pageNameClassName = this.wrapClassName("preview-page-name");
-      this.pages.forEach((page, i) => {
-        const previewSRC = page.thumbnail ?? (page.src.startsWith("ppt") ? void 0 : page.src);
-        if (!previewSRC) {
-          return;
-        }
-
-        const pageIndex = String(i);
-
-        const $page = document.createElement("a");
-        $page.className = pageClassName + " " + this.wrapClassName(`preview-page-${i}`);
-        $page.setAttribute("href", "#");
-        $page.dataset.pageIndex = pageIndex;
-
-        const $name = document.createElement("span");
-        $name.className = pageNameClassName;
-        $name.textContent = String(i + 1);
-        $name.dataset.pageIndex = pageIndex;
-
-        const $img = document.createElement("img");
-        $img.width = page.width;
-        $img.height = page.height;
-        $img.dataset.src = previewSRC;
-        $img.dataset.pageIndex = pageIndex;
-
-        $page.appendChild($img);
-        $page.appendChild($name);
-        $preview.appendChild($page);
-      });
-
-      this.sideEffect.addEventListener($preview, "click", ev => {
-        if (this.readonly) {
-          return;
-        }
-        const pageIndex = (ev.target as HTMLElement).dataset?.pageIndex;
-        if (pageIndex) {
-          ev.preventDefault();
-          ev.stopPropagation();
-          ev.stopImmediatePropagation();
-          this.onNewPageIndex(Number(pageIndex));
-          this.togglePreview(false);
-        }
-      });
-    }
-
-    return this.$preview;
-  }
-
-  protected renderPreviewMask(): HTMLElement {
-    if (!this.$previewMask) {
-      this.$previewMask = document.createElement("div");
-      this.$previewMask.className = this.wrapClassName("preview-mask");
-      this.sideEffect.addEventListener(this.$previewMask, "click", ev => {
-        if (this.readonly) {
-          return;
-        }
-        if (ev.target === this.$previewMask) {
-          this.togglePreview(false);
-        }
-      });
-    }
-    return this.$previewMask;
-  }
-
-  protected renderFooter(): HTMLElement {
-    if (!this.$footer) {
-      const $footer = document.createElement("div");
-      $footer.className = this.wrapClassName("footer");
-      this.$footer = $footer;
-
-      if (this.readonly) {
-        $footer.classList.add(this.wrapClassName("readonly"));
-      }
-
-      if (this.isSmallBox) {
-        $footer.classList.add(this.wrapClassName("float-footer"));
-      }
-
-      if (this.pages.some(page => page.thumbnail || !page.src.startsWith("ppt"))) {
-        const $btnSidebar = this.renderFooterBtn("btn-sidebar", sidebarSVG(this.namespace));
-        this.sideEffect.addEventListener($btnSidebar, "click", () => {
-          if (this.readonly) {
-            return;
-          }
-          this.togglePreview();
-        });
-        this.$footer.appendChild($btnSidebar);
-      }
-
-      const $pageJumps = document.createElement("div");
-      $pageJumps.className = this.wrapClassName("page-jumps");
-
-      const $btnPageBack = this.renderFooterBtn("btn-page-back", arrowLeftSVG(this.namespace));
-      this.sideEffect.addEventListener($btnPageBack, "click", () => {
-        if (this.readonly) {
-          return;
-        }
-        this.onNewPageIndex(this.pageIndex - 1);
-      });
-      $pageJumps.appendChild($btnPageBack);
-
-      if (this.onPlay) {
-        const $btnPlay = this.renderFooterBtn(
-          "btn-page-play",
-          playSVG(this.namespace),
-          pauseSVG(this.namespace)
-        );
-        const returnPlay = (): void => {
-          this.sideEffect.setTimeout(
-            () => {
-              $btnPlay.classList.toggle(this.wrapClassName("footer-btn-playing"), false);
-            },
-            500,
-            "returnPlay"
-          );
-        };
-        this.sideEffect.addEventListener($btnPlay, "click", () => {
-          if (this.readonly) {
-            return;
-          }
-          $btnPlay.classList.toggle(this.wrapClassName("footer-btn-playing"), true);
-          if (this.onPlay) {
-            this.onPlay();
-          }
-          returnPlay();
-        });
-
-        $pageJumps.appendChild($btnPlay);
-      }
-
-      const $btnPageNext = this.renderFooterBtn("btn-page-next", arrowRightSVG(this.namespace));
-      this.sideEffect.addEventListener($btnPageNext, "click", () => {
-        if (this.readonly) {
-          return;
-        }
-        this.onNewPageIndex(this.pageIndex + 1);
-      });
-      $pageJumps.appendChild($btnPageNext);
-
-      const $pageNumber = document.createElement("div");
-      $pageNumber.className = this.wrapClassName("page-number");
-
-      const $pageNumberInput = document.createElement("input");
-      $pageNumberInput.className = this.wrapClassName("page-number-input");
-      $pageNumberInput.value = String(this.pageIndex + 1);
-      if (this.readonly) {
-        $pageNumberInput.disabled = true;
-      }
-      this.$pageNumberInput = $pageNumberInput;
-      this.sideEffect.addEventListener($pageNumberInput, "focus", () => {
-        $pageNumberInput.select();
-      });
-      this.sideEffect.addEventListener($pageNumberInput, "change", () => {
-        if (this.readonly) {
-          return;
-        }
-        if ($pageNumberInput.value) {
-          this.onNewPageIndex(Number($pageNumberInput.value) - 1);
-        }
-      });
-
-      const $totalPage = document.createElement("span");
-      $totalPage.textContent = " / " + this.pages.length;
-
-      $pageNumber.appendChild($pageNumberInput);
-      $pageNumber.appendChild($totalPage);
-
-      this.$footer.appendChild($pageJumps);
-      this.$footer.appendChild($pageNumber);
-    }
-    return this.$footer;
-  }
-
-  protected renderFooterBtn(
-    className: string,
-    $icon: SVGElement,
-    $iconActive?: SVGElement
-  ): HTMLButtonElement {
-    const $btn = document.createElement("button");
-    $btn.className = this.wrapClassName("footer-btn") + " " + this.wrapClassName(className);
-
-    $btn.appendChild($icon);
-
-    if ($iconActive) {
-      $btn.appendChild($iconActive);
-    }
-
-    return $btn;
-  }
-
-  protected togglePreview(isShowPreview?: boolean): void {
-    this.isShowPreview = isShowPreview ?? !this.isShowPreview;
-    this.$content.classList.toggle(this.wrapClassName("preview-active"), this.isShowPreview);
-    if (this.isShowPreview) {
-      const $previewPage = this.$preview.querySelector<HTMLElement>(
-        "." + this.wrapClassName(`preview-page-${this.pageIndex}`)
-      );
-      if ($previewPage) {
-        this.$preview.scrollTo({
-          top: $previewPage.offsetTop - 16,
-        });
-      }
-    }
-  }
-
-  protected wrapClassName(className: string): string {
+  private wrapClassName = (className: string): string => {
     return `${this.namespace}-${className}`;
-  }
+  };
 
-  protected namespace = "netless-app-docs-viewer";
+  public readonly namespace = "netless-app-docs-viewer";
 
-  protected isShowPreview = false;
+  private readonly sideEffect = new SideEffectManager();
 
-  protected isSmallBox = false;
-
-  protected sideEffect = new SideEffectManager();
+  public readonly events = new Remitter<DocsViewerEventData>();
 }

src/DynamicDocsViewer/index.ts

 import type {
   ReadonlyTeleBox,
-  View,
-  Displayer,
-  AnimationMode,
   AppContext,
   SceneState,
+  WhiteBoardView,
 } from "@netless/window-manager";
 import { SideEffectManager } from "side-effect-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import { Val } from "value-enhancer";
 import type { DocsViewerPage } from "../DocsViewer";
@@ -15,4 +15,5 @@ import { DocsViewer } from "../DocsViewer";
 export interface DynamicDocsViewerConfig {
+  readonly$: ReadonlyVal<boolean>;
   context: AppContext;
-  whiteboardView: View;
+  whiteboard: WhiteBoardView;
   box: ReadonlyTeleBox;
@@ -23,34 +24,64 @@ pages: DocsViewerPage[];
 export class DynamicDocsViewer {
-  public constructor({ context, whiteboardView, box, pages }: DynamicDocsViewerConfig) {
+  public pagesIndex$: Val<number, boolean>;
+
+  public constructor({ readonly$, context, whiteboard, box, pages }: DynamicDocsViewerConfig) {
     this.context = context;
-    this.whiteboardView = whiteboardView;
+    this.whiteboard = whiteboard;
     this.box = box;
     this.pages = pages;
-    this.displayer = context.getDisplayer();
 
+    const pagesIndex$ = new Val<number, boolean>(context.displayer.state.sceneState.index || 0);
+    this.pagesIndex$ = pagesIndex$;
+
+    this.sideEffect.add(() => {
+      const handler = (sceneState: SceneState) => {
+        this.jumpToPage(sceneState.index);
+      };
+      this.context.emitter.on("sceneStateChange", handler);
+      return () => this.context.emitter.off("sceneStateChange", handler);
+    });
+
     this.viewer = new DocsViewer({
-      readonly: !context.getIsWritable(),
+      readonly$,
+      pagesIndex$,
       box,
       pages,
-      onNewPageIndex: this.onNewPageIndex,
-      onPlay: this.onPlayPPT,
+      playable: true,
     });
 
+    this.sideEffect.addDisposer([
+      this.viewer.events.on("jumpPage", pageIndex => this.jumpToPage(pageIndex, true)),
+      this.viewer.events.on("play", () => this.context.room?.pptNextStep()),
+      this.viewer.events.on("back", () => this.prevPage()),
+      this.viewer.events.on("next", () => this.nextPage()),
+    ]);
+
     this.render();
 
-    this.sideEffect.add(() => {
-      const handler = (isWritable: boolean): void => {
-        this.viewer.setReadonly(!isWritable);
-      };
-      this.context.emitter.on("writableChange", handler);
-      return () => this.context.emitter.off("writableChange", handler);
-    });
+    this.sideEffect.addDisposer(
+      pagesIndex$.subscribe((pageIndex, isUserAction) => {
+        if (readonly$.value) return;
 
-    this.sideEffect.add(() => {
-      const handler = (sceneState: SceneState) => {
-        this.jumpToPage(sceneState.index);
-      };
-      this.context.emitter.on("sceneStateChange", handler);
-      return () => this.context.emitter.off("sceneStateChange", handler);
-    });
+        const initScenePath = this.context.getInitScenePath();
+        const scene = this.context.getScenes()?.[pageIndex]?.name;
+        if (initScenePath && scene) {
+          this.context.setScenePath(`${initScenePath}/${scene}`);
+        }
+
+        if (isUserAction) {
+          const room = this.context.room;
+          if (room) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const pptState = (room.state.globalState as any).__pptState;
+            room.setGlobalState({
+              __pptState: pptState && {
+                uuid: pptState.uuid,
+                pageIndex,
+                disableAutoPlay: pptState.disableAutoPlay,
+              },
+            });
+          }
+        }
+      })
+    );
   }
@@ -63,85 +94,26 @@
   protected box: ReadonlyTeleBox;
-  protected whiteboardView: View;
-  protected displayer: Displayer;
+  protected whiteboard: WhiteBoardView;
 
   public viewer: DocsViewer;
 
-  public $mask!: HTMLElement;
-  public $whiteboardView!: HTMLDivElement;
-
-  public mount(): this {
-    this.viewer.mount();
-
-    const pageIndex = this.getPageIndex();
-    if (pageIndex !== 0) {
-      this.jumpToPage(pageIndex);
-    }
-
-    this.scaleDocsToFit();
-    this.sideEffect.add(() => {
-      this.whiteboardView.callbacks.on("onSizeUpdated", this.scaleDocsToFit);
-      return () => {
-        this.whiteboardView.callbacks.off("onSizeUpdated", this.scaleDocsToFit);
-      };
-    });
-
-    return this;
-  }
-
-  public unmount(): this {
-    this.viewer.unmount();
-    return this;
-  }
-
   public destroy(): void {
     this.sideEffect.flushAll();
-    this.unmount();
     this.viewer.destroy();
   }
 
-  public getPageIndex(): number {
-    return this.displayer.state.sceneState.index;
+  public nextPage(): void {
+    this.jumpToPage(this.pagesIndex$.value + 1, true);
   }
 
-  public jumpToPage(index: number, reset?: boolean): void {
-    index = clamp(index, 0, this.pages.length - 1);
-    if (index !== this.getPageIndex()) {
-      if (this.context.getIsWritable()) {
-        const initScenePath = this.context.getInitScenePath();
-        const scene = this.context.getScenes()?.[index]?.name;
-        if (initScenePath && scene) {
-          this.context.setScenePath(`${initScenePath}/${scene}`);
-        }
-        this.scaleDocsToFit();
-      }
-    }
-    if (index !== this.viewer.pageIndex) {
-      this.viewer.setPageIndex(index);
-    }
-    if (reset) {
-      const room = this.context.getRoom();
-      if (room) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const pptState = (room.state.globalState as any).__pptState;
-        room.setGlobalState({
-          __pptState: pptState && {
-            uuid: pptState.uuid,
-            pageIndex: index,
-            disableAutoPlay: pptState.disableAutoPlay,
-          },
-        });
-      }
-    }
+  public prevPage(): void {
+    this.jumpToPage(this.pagesIndex$.value - 1, true);
   }
 
-  public onPlayPPT = (): void => {
-    const room = this.context.getRoom();
-    if (room) {
-      room.pptNextStep();
-    }
-  };
+  public jumpToPage(pageIndex: number, isUserAction = false): void {
+    this.pagesIndex$.setValue(clamp(pageIndex, 0, this.pages.length - 1), isUserAction);
+  }
 
   public render(): void {
-    this.viewer.$content.appendChild(this.renderMask());
-    this.viewer.$content.appendChild(this.renderWhiteboardView());
+    this.box.mountStage(document.createElement("div"));
+
     this.sideEffect.addEventListener(window, "keydown", ev => {
@@ -152,3 +124,3 @@ if (this.box.focus) {
           case "ArrowLeft": {
-            this.jumpToPage(this.getPageIndex() - 1, true);
+            this.prevPage();
             break;
@@ -158,3 +130,3 @@ }
           case "ArrowDown": {
-            this.context.getRoom()?.pptNextStep();
+            this.context.room?.pptNextStep();
             break;
@@ -168,28 +140,7 @@ }
     });
-  }
 
-  protected renderMask(): HTMLElement {
-    if (!this.$mask) {
-      const $mask = document.createElement("div");
-      $mask.className = this.wrapClassName("mask");
-      this.$mask = $mask;
-
-      const $back = document.createElement("button");
-      $back.className = this.wrapClassName("back");
-
-      const $next = document.createElement("button");
-      $next.className = this.wrapClassName("next");
-
-      // this.$mask.appendChild($back)
-      // this.$mask.appendChild($next)
-    }
-    return this.$mask;
-  }
-
-  protected renderWhiteboardView(): HTMLDivElement {
-    if (!this.$whiteboardView) {
-      this.$whiteboardView = document.createElement("div");
-      this.$whiteboardView.className = this.wrapClassName("wb-view");
-      this.sideEffect.addEventListener(this.$whiteboardView, "click", ev => {
-        const room = this.context.getRoom();
+    const whiteboardWrapper = this.whiteboard.view.divElement?.parentElement;
+    if (whiteboardWrapper) {
+      this.sideEffect.addEventListener(whiteboardWrapper, "click", ev => {
+        const room = this.context.room;
         if (room && room.state.memberState.currentApplianceName === "clicker") {
@@ -204,42 +155,5 @@ for (let el = ev.target as HTMLElement | null; el; el = el.parentElement) {
       });
-      this.context.mountView(this.$whiteboardView);
     }
-    return this.$whiteboardView;
   }
 
-  protected _scaleDocsToFitImpl = (): void => {
-    const page = this.pages[this.getPageIndex()];
-    if (page) {
-      this.whiteboardView.moveCameraToContain({
-        originX: -page.width / 2,
-        originY: -page.height / 2,
-        width: page.width,
-        height: page.height,
-        animationMode: "immediately" as AnimationMode,
-      });
-      this.whiteboardView.setCameraBound({
-        damping: 1,
-        maxContentMode: () => this.whiteboardView.camera.scale,
-        minContentMode: () => this.whiteboardView.camera.scale,
-        centerX: 0,
-        centerY: 0,
-        width: page.width,
-        height: page.height,
-      });
-    }
-  };
-
-  protected _scaleDocsToFitDebounced = (): void => {
-    this.sideEffect.setTimeout(this._scaleDocsToFitImpl, 1000, "_scaleDocsToFitDebounced");
-  };
-
-  protected scaleDocsToFit = (): void => {
-    this._scaleDocsToFitImpl();
-    this._scaleDocsToFitDebounced();
-  };
-
-  protected onNewPageIndex = (index: number): void => {
-    this.jumpToPage(index, true);
-  };
-
   protected wrapClassName(className: string): string {
@@ -246,0 +160,0 @@ return "netless-app-docs-viewer-dynamic-" + className;

src/index.ts

 import styles from "./style.scss?inline";
 
 import type { NetlessApp, AppContext, ReadonlyTeleBox } from "@netless/window-manager";
-import type { View, Size } from "white-web-sdk";
+import type { Size } from "white-web-sdk";
 import { StaticDocsViewer } from "./StaticDocsViewer";
@@ -9,2 +9,6 @@ import type { DocsViewerPage } from "./DocsViewer";
 import { kind } from "./constants";
+import { SideEffectManager } from "side-effect-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import { combine, Val } from "value-enhancer";
+import { sameSize } from "./utils/helpers";
 
@@ -25,3 +29,3 @@ export type { DocsViewerPage } from "./DocsViewer";
   setup(context) {
-    const box = context.getBox();
+    const box = context.box;
 
@@ -33,6 +37,3 @@ const scenes = context.getScenes();
 
-    const whiteboardView = context.getView();
-    if (!whiteboardView) {
-      throw new Error("[Docs Viewer]: no whiteboard view.");
-    }
+    const sideEffect = new SideEffectManager();
 
@@ -58,17 +59,32 @@ const pages = scenes
 
+    const readonly$ = new Val(!context.isWritable);
+    sideEffect.addDisposer(
+      context.emitter.on("writableChange", isWritable => {
+        readonly$.setValue(!isWritable);
+      })
+    );
+
     if (pages[0].src.startsWith("ppt")) {
       setupDynamicDocsViewer(
+        sideEffect,
         context as AppContext<NetlessAppDynamicDocsViewerAttributes>,
-        whiteboardView,
         box,
-        pages
+        pages,
+        readonly$
       );
     } else {
       setupStaticDocsViewer(
+        sideEffect,
         context as AppContext<NetlessAppStaticDocsViewerAttributes>,
-        whiteboardView,
         box,
-        pages
+        pages,
+        readonly$
       );
     }
+
+    sideEffect.addDisposer(
+      context.emitter.on("destroy", () => {
+        sideEffect.flushAll();
+      })
+    );
   },
@@ -80,63 +96,114 @@ };
 function setupStaticDocsViewer(
+  sideEffect: SideEffectManager,
   context: AppContext<NetlessAppStaticDocsViewerAttributes>,
-  whiteboardView: View,
   box: ReadonlyTeleBox,
-  pages: DocsViewerPage[]
+  pages: DocsViewerPage[],
+  readonly$: Val<boolean>
 ): void {
-  whiteboardView.disableCameraTransform = !context.getIsWritable();
+  const whiteboard = context.createWhiteBoardView({ syncCamera: false });
 
-  const docsViewer = new StaticDocsViewer({
-    whiteboardView,
-    readonly: !context.getIsWritable(),
+  sideEffect.addDisposer(
+    readonly$.subscribe(readonly => {
+      whiteboard.view.disableCameraTransform = readonly;
+    })
+  );
+
+  const storage = context.createStorage("static-docs-viewer", { pagesScrollTop: 0 });
+
+  const staticDocsViewer = new StaticDocsViewer({
+    whiteboard,
+    readonly$,
     box,
-    pages: pages,
-    pageScrollTop: context.getAttributes()?.pageScrollTop,
-    mountWhiteboard: context.mountView.bind(context),
-    onUserScroll: pageScrollTop => {
-      if (context.getAttributes()?.pageScrollTop !== pageScrollTop && !box.readonly) {
-        context.updateAttributes(["pageScrollTop"], pageScrollTop);
+    pages,
+    pagesScrollTop: storage.state.pagesScrollTop,
+    onUserScroll: pagesScrollTop => {
+      if (context.isWritable) {
+        storage.setState({ pagesScrollTop });
       }
     },
-  }).mount();
+  });
+  sideEffect.addDisposer(() => staticDocsViewer.destroy());
 
+  sideEffect.addDisposer(
+    storage.addStateChangedListener(diff => {
+      if (diff.pagesScrollTop) {
+        staticDocsViewer.syncPageScrollTop(diff.pagesScrollTop.newValue || 0);
+      }
+    })
+  );
+
+  let maxRatio = 1;
+  if (pages.length > 0) {
+    const { width, height } = pages[0];
+    if (height <= width) {
+      maxRatio = height / width;
+    } else {
+      maxRatio = ((1 / 2) * height) / width;
+    }
+  }
+
+  //  ensure stage top-bottom will always touch box content area
+  sideEffect.addDisposer(
+    combine(
+      [box._maximized$, box._managerStageRect$, box._intrinsicSize$],
+      ([maximized, managerStageRect, size]) =>
+        maximized
+          ? maxRatio
+          : (size.height * (managerStageRect.height / managerStageRect.width)) / size.width
+    ).subscribe(ratio => {
+      box.setStageRatio(ratio);
+    })
+  );
+
   if (import.meta.env.DEV) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (window as any).docsViewer = docsViewer;
+    (window as any).staticDocsViewer = staticDocsViewer;
   }
-
-  context.emitter.on("attributesUpdate", attributes => {
-    if (attributes) {
-      if (attributes.pageScrollTop != null) {
-        docsViewer.syncPageScrollTop(attributes.pageScrollTop);
-      }
-    }
-  });
-
-  context.emitter.on("writableChange", isWritable => {
-    docsViewer.setReadonly(!isWritable);
-    whiteboardView.disableCameraTransform = !isWritable;
-  });
 }
 
 function setupDynamicDocsViewer(
+  sideEffect: SideEffectManager,
   context: AppContext<NetlessAppDynamicDocsViewerAttributes>,
-  whiteboardView: View,
   box: ReadonlyTeleBox,
-  pages: DocsViewerPage[]
+  pages: DocsViewerPage[],
+  readonly$: ReadonlyVal<boolean>
 ): void {
-  whiteboardView.disableCameraTransform = true;
+  const whiteboard = context.createWhiteBoardView();
 
-  const docsViewer = new DynamicDocsViewer({
+  whiteboard.view.disableCameraTransform = true;
+
+  const dynamicDocsViewer = new DynamicDocsViewer({
     context,
-    whiteboardView,
+    whiteboard,
     box,
     pages,
-  }).mount();
+    readonly$,
+  });
+  sideEffect.addDisposer(() => dynamicDocsViewer.destroy());
 
-  context.mountView(docsViewer.$whiteboardView);
+  const whiteboardBaseRect$ = new Val(
+    { width: pages[0].width, height: pages[0].height },
+    { compare: sameSize }
+  );
 
+  sideEffect.addDisposer(
+    dynamicDocsViewer.pagesIndex$.subscribe(pageIndex => {
+      const page = pages[pageIndex];
+      if (page) {
+        whiteboardBaseRect$.setValue({ width: page.width, height: page.height });
+      }
+    })
+  );
+
+  sideEffect.addDisposer(
+    whiteboardBaseRect$.subscribe(rect => {
+      if (!readonly$.value) {
+        whiteboard.setBaseRect(rect);
+      }
+    })
+  );
+
   if (context.isAddApp) {
-    whiteboardView.callbacks.once(
-      "onSizeUpdated",
-      ({ width: contentWidth, height: contentHeight }: Size) => {
+    const disposerID = sideEffect.add(() => {
+      const handler = ({ width: contentWidth, height: contentHeight }: Size) => {
         if (pages.length > 0 && box.state !== "maximized") {
@@ -146,11 +213,14 @@ const { width: pageWidth, height: pageHeight } = pages[0];
           const diff = preferHeight - contentHeight;
-          if (diff !== 0 && context.getIsWritable()) {
+          if (diff !== 0 && context.isWritable) {
             context.emitter.emit("setBoxSize", {
-              width: box.width,
-              height: box.height + diff / box.containerRect.height,
+              width: box.intrinsicWidth,
+              height: box.intrinsicHeight + diff / box.rootRect.height,
             });
           }
         }
-      }
-    );
+        sideEffect.remove(disposerID);
+      };
+      whiteboard.view.callbacks.once("onSizeUpdated", handler);
+      return () => whiteboard.view.callbacks.off("onSizeUpdated", handler);
+    });
   }
@@ -160,4 +230,4 @@
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (window as any).docsViewer = docsViewer;
+    (window as any).dynamicDocsViewer = dynamicDocsViewer;
   }
 }

src/PageRenderer/index.ts

 import type { DocsViewerPage } from "../DocsViewer";
 import { PageElManager } from "./PageElManager";
 import { clamp } from "../utils/helpers";
+import {
+  combine,
+  derive,
+  Val,
+  withReadonlyValueEnhancer,
+  type ReadonlyVal,
+  type ReadonlyValEnhancedResult,
+} from "value-enhancer";
+import type { TeleBoxRect } from "@netless/window-manager";
+import { SideEffectManager } from "side-effect-manager";
 
 export interface PageRendererConfig {
-  pagesScrollTop?: number;
-  containerWidth: number;
-  containerHeight: number;
-  pages: ReadonlyArray<DocsViewerPage>;
-  onPageIndexChanged?: (index: number) => void;
+  pagesScrollTop$: ReadonlyVal<number>;
+  containerRect$: ReadonlyVal<TeleBoxRect>;
+  pages$: ReadonlyVal<DocsViewerPage[]>;
+  pagesSize$: ReadonlyVal<{ width: number; height: number }>;
 }
 
+export type ReadonlyValConfig = {
+  pagesScrollTop: PageRendererConfig["pagesScrollTop$"];
+  containerRect: PageRendererConfig["containerRect$"];
+  pages: PageRendererConfig["pages$"];
+  pagesSize: PageRendererConfig["pagesSize$"];
+  pagesIndex: ReadonlyVal<number>;
+  pagesYs: ReadonlyVal<number[]>;
+  pagesMinHeight: ReadonlyVal<number>;
+  /** containerRect.width / pagesSize.width, (el / intrinsic) */
+  scale: ReadonlyVal<number>;
+};
+
+export interface PageRenderer extends ReadonlyValEnhancedResult<ReadonlyValConfig> {}
+
 /**
@@ -19,90 +42,114 @@ * High-performance renderer for large number of page images
 
-  readonly pages: ReadonlyArray<DocsViewerPage>;
-  readonly pagesIntrinsicYs: ReadonlyArray<number>;
-  readonly pagesIntrinsicWidth: number;
-  readonly pagesIntrinsicHeight: number;
-  readonly pagesMinHeight: number;
+  private readonly sideEffect = new SideEffectManager();
 
   readonly pageElManager: PageElManager;
 
-  containerWidth: number;
-  containerHeight: number;
+  constructor({ pagesScrollTop$, containerRect$, pages$, pagesSize$ }: PageRendererConfig) {
+    pages$ = derive(pages$, pages =>
+      pages.map(page => {
+        if (page.thumbnail) {
+          return page;
+        }
+        try {
+          const url = new URL(page.src);
+          url.searchParams.set("x-oss-process", "image/resize,l_50");
+          return { ...page, thumbnail: url.toString() };
+        } catch (e) {
+          console.error(e);
+          return page;
+        }
+      })
+    );
 
-  threshold: number;
-  scale: number;
-  pagesScrollTop: number;
-  pageScrollIndex: number;
-  onPageIndexChanged?: (index: number) => void;
+    const pagesYs$ = derive(pages$, pages => {
+      const pagesYs = Array(pages.length);
+      for (let i = 0; i < pages.length; i++) {
+        pagesYs[i] = i > 0 ? pagesYs[i - 1] + pages[i - 1].height : 0;
+      }
+      return pagesYs;
+    });
 
-  constructor(config: PageRendererConfig) {
-    this.pagesScrollTop = config.pagesScrollTop || 0;
-    this.containerWidth = config.containerWidth || 1;
-    this.containerHeight = config.containerHeight || 1;
-    this.pages = config.pages.map(page => {
-      if (page.thumbnail) {
-        return page;
+    const pagesMinHeight$ = derive(pages$, pages => {
+      let pagesMinHeight = Infinity;
+      for (let i = pages.length - 1; i >= 0; i--) {
+        if (pages[i].height <= pagesMinHeight) {
+          pagesMinHeight = pages[i].height;
+        }
       }
-      try {
-        const url = new URL(page.src);
-        url.searchParams.set("x-oss-process", "image/resize,l_50");
-        return { ...page, thumbnail: url.toString() };
-      } catch (e) {
-        console.error(e);
-        return page;
-      }
+      return pagesMinHeight;
     });
 
-    const pagesIntrinsicYs = Array(this.pages.length);
-    let pagesMinHeight = Infinity;
-    let pagesIntrinsicWidth = 0;
-    this.pagesIntrinsicHeight = this.pages.reduce((pageY, page, i) => {
-      pagesIntrinsicYs[i] = pageY;
-      if (page.width > pagesIntrinsicWidth) {
-        pagesIntrinsicWidth = page.width;
+    const pagesIndex$ = combine(
+      [pagesScrollTop$, pagesYs$, pages$],
+      ([pagesScrollTop, pagesYs, pages]) => {
+        for (let i = 0; i < pagesYs.length; i++) {
+          if (pagesYs[i] + pages[i].height - pagesScrollTop >= 0.001) {
+            return i;
+          }
+        }
+        return pagesYs.length - 1;
       }
-      if (page.height <= pagesMinHeight) {
-        pagesMinHeight = page.height;
-      }
-      return pageY + page.height;
-    }, 0);
-    this.pagesIntrinsicWidth = pagesIntrinsicWidth;
-    this.pagesMinHeight = pagesMinHeight;
-    this.pagesIntrinsicYs = pagesIntrinsicYs;
+    );
 
-    this.scale = this._calcScale();
-    this.threshold = this._calcThreshold();
+    const scale$ = combine(
+      [containerRect$, pagesSize$],
+      ([containerRect, pagesSize]) => containerRect.width / pagesSize.width || 1
+    );
 
-    this.onPageIndexChanged = config.onPageIndexChanged;
-    this.pageScrollIndex = 0;
-    if (this.pagesScrollTop !== 0) {
-      this.pageScrollIndex = this.findScrollPageIndex();
-      if (this.onPageIndexChanged && this.pageScrollIndex > 0) {
-        this.onPageIndexChanged(this.pageScrollIndex);
-      }
-    }
+    const threshold$ = combine(
+      [pages$, containerRect$, pagesMinHeight$, scale$],
+      ([pages, containerRect, pagesMinHeight, scale]) =>
+        clamp(Math.ceil(containerRect.height / scale / pagesMinHeight / 2), 1, pages.length)
+    );
 
-    this.pageElManager = new PageElManager(this.pages, pagesIntrinsicWidth, this.scale);
+    withReadonlyValueEnhancer(this, {
+      pagesScrollTop: pagesScrollTop$,
+      containerRect: containerRect$,
+      pages: pages$,
+      pagesSize: pagesSize$,
+      pagesIndex: pagesIndex$,
+      pagesYs: pagesYs$,
+      pagesMinHeight: pagesMinHeight$,
+      scale: scale$,
+    });
 
+    this.pageElManager = new PageElManager(pages$, pagesSize$, scale$, pagesYs$, pagesScrollTop$);
+
     this.$pages = this.renderPages();
-  }
 
-  setContainerSize(width: number, height: number): void {
-    if (width > 0 && height > 0) {
-      if (width !== this.containerWidth || height !== this.containerHeight) {
-        this.containerWidth = width;
-        this.containerHeight = height;
+    /** Hardware Acceleration */
+    const isHWAOn$ = new Val(false);
+    this.sideEffect.addDisposer(
+      isHWAOn$.subscribe(isHWAOn => this.$pages.classList.toggle("is-hwa", isHWAOn))
+    );
+    const turnOffHWA = () => isHWAOn$.setValue(false);
+    const turnOnHWA = () => {
+      this.sideEffect.setTimeout(turnOffHWA, 1000, "turn-off-hwa");
+      isHWAOn$.setValue(true);
+    };
 
-        this.$pages.style.width = `${this.containerWidth}px`;
-        this.$pages.style.height = `${this.containerHeight}px`;
+    this.sideEffect.addDisposer(
+      combine([pagesIndex$, threshold$, pages$]).subscribe(([pagesIndex, threshold, pages]) => {
+        turnOnHWA();
 
-        this.scale = this._calcScale();
-        this.threshold = this._calcThreshold();
+        const startIndex = Math.max(pagesIndex - threshold, 0);
+        const endIndex = Math.min(pagesIndex + threshold, pages.length - 1);
 
-        this.pageElManager.setScale(this.scale);
+        for (let i = 0; i < this.$pages.children.length; i++) {
+          const $page = this.$pages.children[i] as HTMLDivElement;
+          const index = Number($page.dataset.index);
+          if (!(index >= startIndex && index <= endIndex)) {
+            $page.remove();
+            i--;
+          }
+        }
 
-        if (this.$pages.parentElement) {
-          this.pagesScrollTo(this.pagesScrollTop, true);
+        for (let i = startIndex; i <= endIndex; i++) {
+          const pageEl = this.pageElManager.getEl(i);
+          if (pageEl.$page.parentElement !== this.$pages) {
+            this.$pages.appendChild(pageEl.$page);
+          }
         }
-      }
-    }
+      })
+    );
   }
@@ -113,104 +160,17 @@
     $pages.className = "page-renderer-pages-container";
-    $pages.style.width = `${this.containerWidth}px`;
-    $pages.style.height = `${this.containerHeight}px`;
+    this.sideEffect.addDisposer(
+      this._containerRect$.subscribe(containerRect => {
+        $pages.style.width = `${containerRect.width}px`;
+        $pages.style.height = `${containerRect.height}px`;
+      }),
+      "render-pages-size"
+    );
     return $pages;
   }
 
-  pagesScrollTo(pagesScrollTop: number, force?: boolean): void {
-    pagesScrollTop = clamp(
-      pagesScrollTop,
-      0,
-      this.pagesIntrinsicHeight - this.containerHeight / this.scale
-    );
-
-    if (force || Math.abs(pagesScrollTop - this.pagesScrollTop) >= 0.001) {
-      this._turnOnHWA();
-
-      this.pagesScrollTop = pagesScrollTop;
-
-      const pageScrollIndex = this.findScrollPageIndex();
-      const startIndex = Math.max(pageScrollIndex - this.threshold, 0);
-      const endIndex = Math.min(pageScrollIndex + this.threshold, this.pages.length - 1);
-
-      for (let i = 0; i < this.$pages.children.length; i++) {
-        const $page = this.$pages.children[i] as HTMLDivElement;
-        const index = Number($page.dataset.index);
-        if (!(index >= startIndex && index <= endIndex)) {
-          $page.remove();
-          i--;
-        }
-      }
-
-      for (let i = startIndex; i <= endIndex; i++) {
-        const pageEl = this.pageElManager.getEl(i);
-        if (pageEl.$page.parentElement !== this.$pages) {
-          this.$pages.appendChild(pageEl.$page);
-        }
-        pageEl.translateY(this.pagesIntrinsicYs[i] - this.pagesScrollTop);
-      }
-
-      if (pageScrollIndex !== this.pageScrollIndex) {
-        this.pageScrollIndex = pageScrollIndex;
-        if (this.onPageIndexChanged) {
-          this.onPageIndexChanged(pageScrollIndex);
-        }
-      }
-    }
-  }
-
-  findScrollPageIndex() {
-    for (let i = 0; i < this.pagesIntrinsicYs.length; i++) {
-      if (this.pagesIntrinsicYs[i] + this.pages[i].height - this.pagesScrollTop >= 0.001) {
-        return i;
-      }
-    }
-    return this.pagesIntrinsicYs.length - 1;
-  }
-
-  mount($parent: HTMLElement): void {
-    $parent.appendChild(this.$pages);
-    this.pagesScrollTo(this.pagesScrollTop, true);
-  }
-
-  unmount(): void {
+  destroy() {
+    this.sideEffect.flushAll();
     this.$pages.remove();
-  }
-
-  destroy() {
-    this.unmount();
-    this.onPageIndexChanged = void 0;
     this.pageElManager.destroy();
-    if (this._hwaTimeout) {
-      window.clearTimeout(this._hwaTimeout);
-      this._hwaTimeout = NaN;
-    }
   }
-
-  private _calcScale(): number {
-    return this.containerWidth / this.pagesIntrinsicWidth || 1;
-  }
-
-  private _calcThreshold(): number {
-    return clamp(
-      Math.ceil(this.containerHeight / this.scale / this.pagesMinHeight / 2),
-      1,
-      this.pages.length
-    );
-  }
-
-  private _hwaTimeout = NaN;
-  /** Hardware Acceleration */
-  private _turnOnHWA(): void {
-    if (this._hwaTimeout) {
-      window.clearTimeout(this._hwaTimeout);
-    } else {
-      this.$pages.classList.toggle("is-hwa", true);
-    }
-    this._hwaTimeout = window.setTimeout(this._turnOffHWA, 1000);
-  }
-  private _turnOffHWA = (): void => {
-    window.clearTimeout(this._hwaTimeout);
-    this._hwaTimeout = NaN;
-    this.$pages.classList.toggle("is-hwa", false);
-  };
 }

src/PageRenderer/PageEl.ts

@@ -0,66 +1,65 @@
+import { SideEffectManager } from "side-effect-manager";
+import { combine, derive, type ReadonlyVal } from "value-enhancer";
 import type { DocsViewerPage } from "../DocsViewer";
 
 export class PageEl {
-  index: number;
-  page: DocsViewerPage;
-  scale = 1;
-
   lastVisit = Date.now();
   $page: HTMLDivElement;
-  pageOffsetY = 0;
-  pageOffsetX = 0;
-  visible = true;
+  private sideEffect = new SideEffectManager();
 
-  constructor(index: number, page: DocsViewerPage, scale: number, pagesIntrinsicWidth: number) {
-    this.index = index;
-    this.page = page;
-    this.scale = scale;
-    this.pageOffsetX = (pagesIntrinsicWidth - page.width) / 2;
+  constructor(
+    public readonly index: number,
+    pages$: ReadonlyVal<DocsViewerPage[]>,
+    pagesSize$: ReadonlyVal<{ width: number; height: number }>,
+    scale$: ReadonlyVal<number>,
+    pagesYs$: ReadonlyVal<number[]>,
+    pagesScrollTop$: ReadonlyVal<number>
+  ) {
+    const page$ = derive(pages$, pages => pages[index] || { width: 0, height: 0 });
 
+    const pageOffsetX$ = combine(
+      [page$, pagesSize$],
+      ([page, pagesSize]) => (pagesSize.width - page.width) / 2
+    );
+
+    const pageOffsetY$ = combine(
+      [pagesYs$, pagesScrollTop$],
+      ([pagesYs, pagesScrollTop]) => (pagesYs[index] || 0) - pagesScrollTop
+    );
+
     const $page = document.createElement("div");
     $page.className = "page-renderer-page";
     $page.dataset.index = `${index}`;
-    $page.style.width = `${page.width * scale}px`;
-    $page.style.height = `${page.height * scale}px`;
-    if (page.thumbnail) {
-      $page.style.backgroundImage = `url("${page.thumbnail}")`;
-    }
 
     const $img = document.createElement("img");
     $img.className = "page-renderer-page-img";
-    $img.width = page.width;
-    $img.height = page.height;
-    $img.src = page.src;
-
     $page.appendChild($img);
 
+    this.sideEffect.addDisposer([
+      combine([page$, scale$]).subscribe(([page, scale]) => {
+        $page.style.width = `${page.width * scale}px`;
+        $page.style.height = `${page.height * scale}px`;
+      }),
+      page$.subscribe(page => {
+        if (page.thumbnail) {
+          $page.style.backgroundImage = `url("${page.thumbnail}")`;
+        }
+        $img.width = page.width;
+        $img.height = page.height;
+        $img.src = page.src;
+      }),
+      combine([pageOffsetX$, pageOffsetY$, scale$]).subscribe(
+        ([pageOffsetX, pageOffsetY, scale]) => {
+          $page.style.transform = `translate(${pageOffsetX * scale}px, ${pageOffsetY * scale}px)`;
+        }
+      ),
+    ]);
+
     this.$page = $page;
   }
 
-  translateY(pageOffsetY: number): void {
-    if (Math.abs(pageOffsetY - this.pageOffsetY) >= 0.001) {
-      this.pageOffsetY = pageOffsetY;
-      this.$page.style.transform = `translate(${this.pageOffsetX * this.scale}px, ${
-        this.pageOffsetY * this.scale
-      }px)`;
-    }
+  destroy(): void {
+    this.sideEffect.flushAll();
+    this.$page.remove();
   }
-
-  setScale(scale: number): void {
-    if (Math.abs(scale - this.scale) >= 0.001) {
-      this.scale = scale;
-      this.$page.style.width = `${this.page.width * this.scale}px`;
-      this.$page.style.height = `${this.page.height * this.scale}px`;
-      this.$page.style.transform = `translate(${this.pageOffsetX * this.scale}px, ${
-        this.pageOffsetY * this.scale
-      }px)`;
-    }
-  }
-
-  setVisible(visible: boolean): void {
-    if (visible !== this.visible) {
-      this.visible = visible;
-      this.$page.style.opacity = visible ? "1" : "0";
-    }
-  }
 }

src/PageRenderer/PageElManager.ts

@@ -0,1 +1,2 @@
+import type { ReadonlyVal } from "value-enhancer";
 import type { DocsViewerPage } from "../DocsViewer";
@@ -16,5 +17,7 @@ import { PageEl } from "./PageEl";
   constructor(
-    private pages: ReadonlyArray<DocsViewerPage>,
-    private pagesIntrinsicWidth: number,
-    private scale: number
+    private pages$: ReadonlyVal<DocsViewerPage[]>,
+    private pagesSize$: ReadonlyVal<{ width: number; height: number }>,
+    private scale$: ReadonlyVal<number>,
+    private pagesYs$: ReadonlyVal<number[]>,
+    private pagesScrollTop$: ReadonlyVal<number>
   ) {}
@@ -25,3 +28,10 @@
     if (!el) {
-      el = new PageEl(index, this.pages[index], this.scale, this.pagesIntrinsicWidth);
+      el = new PageEl(
+        index,
+        this.pages$,
+        this.pagesSize$,
+        this.scale$,
+        this.pagesYs$,
+        this.pagesScrollTop$
+      );
       this.els.set(index, el);
@@ -38,10 +48,4 @@ }
 
-  setScale(scale: number): void {
-    if (scale !== this.scale) {
-      this.scale = scale;
-      this.els.forEach(pageEl => pageEl.setScale(scale));
-    }
-  }
-
   destroy() {
+    this.els.forEach(el => el.destroy());
     this.els.clear();
@@ -60,2 +64,3 @@ if (this.gcTimer !== null) {
       for (let i = Math.floor(this.maxElCount / 4); i < sortedEls.length; i++) {
+        this.els.get(sortedEls[i].index)?.destroy();
         this.els.delete(sortedEls[i].index);
@@ -62,0 +67,0 @@ }

src/ScrollBar/index.ts

@@ -0,2 +1,5 @@
+import type { TeleBoxRect } from "@netless/window-manager";
 import { SideEffectManager } from "side-effect-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import { combine, Val } from "value-enhancer";
 import { preventEvent, flattenEvent, clamp } from "../utils/helpers";
@@ -7,8 +10,7 @@
 export interface ScrollBarConfig {
-  pagesScrollTop?: number;
-  containerWidth: number;
-  containerHeight: number;
-  pagesWidth: number;
-  pagesHeight: number;
-  readonly: boolean;
+  pagesScrollTop$: ReadonlyVal<number>;
+  containerRect$: ReadonlyVal<TeleBoxRect>;
+  stageRect$: ReadonlyVal<TeleBoxRect>;
+  pagesSize$: ReadonlyVal<{ width: number; height: number }>;
+  readonly$: ReadonlyVal<boolean>;
   scrollbarMinHeight?: number;
@@ -22,86 +24,69 @@ wrapClassName: (className: string) => string;
 
-  containerWidth: number;
-  containerHeight: number;
-  readonly pagesWidth: number;
-  readonly pagesHeight: number;
   readonly scrollbarMinHeight: number;
-  readonly: boolean;
+  readonly readonly$: ScrollBarConfig["readonly$"];
   wrapClassName: (className: string) => string;
   onDragScroll?: (pageScrollTop: number) => void;
 
-  scale: number;
-  pagesScrollTop: number;
-  scrollbarHeight: number;
-
   readonly $scrollbar: HTMLButtonElement;
 
-  constructor(config: ScrollBarConfig) {
-    this.pagesScrollTop = config.pagesScrollTop || 0;
-    this.containerWidth = config.containerWidth || 1;
-    this.containerHeight = config.containerHeight || 1;
-    this.pagesWidth = config.pagesWidth || 1;
-    this.pagesHeight = config.pagesHeight || 1;
-    this.scale = this._calcScale();
-    this.scrollbarMinHeight = config.scrollbarMinHeight || SCROLLBAR_DEFAULT_MIN_HEIGHT;
-    this.scrollbarHeight = this._calcScrollbarHeight(); // after scale is set
-    this.readonly = config.readonly;
-    this.wrapClassName = config.wrapClassName;
-    this.onDragScroll = config.onDragScroll;
+  readonly pagesScrollTop$: ScrollBarConfig["pagesScrollTop$"];
+  readonly containerRect$: ScrollBarConfig["containerRect$"];
+  readonly stageRect$: ScrollBarConfig["stageRect$"];
+  readonly pagesSize$: ScrollBarConfig["pagesSize$"];
 
-    this.$scrollbar = this.renderScrollbar();
-  }
+  readonly scrolling$ = new Val(false);
+  readonly scrollbarHeight$: ReadonlyVal<number>;
+  readonly scrollTop$: ReadonlyVal<number>;
 
-  mount($parent: HTMLElement): void {
-    $parent.appendChild(this.$scrollbar);
-    this.pagesScrollTo(this.pagesScrollTop, true);
-  }
+  constructor({
+    pagesScrollTop$,
+    containerRect$,
+    stageRect$,
+    pagesSize$,
+    readonly$,
+    scrollbarMinHeight = SCROLLBAR_DEFAULT_MIN_HEIGHT,
+    wrapClassName,
+    onDragScroll,
+  }: ScrollBarConfig) {
+    this.pagesScrollTop$ = pagesScrollTop$;
+    this.containerRect$ = containerRect$;
+    this.stageRect$ = stageRect$;
+    this.pagesSize$ = pagesSize$;
+    this.scrollbarMinHeight = scrollbarMinHeight;
+    this.readonly$ = readonly$;
+    this.wrapClassName = wrapClassName;
+    this.onDragScroll = onDragScroll;
 
-  unmount(): void {
-    this.$scrollbar.remove();
-  }
+    this.scrollbarHeight$ = combine(
+      [containerRect$, stageRect$, pagesSize$],
+      ([containerRect, stageRect, pagesSize]) =>
+        clamp(
+          (stageRect.height / ((stageRect.width / pagesSize.width) * pagesSize.height)) *
+            containerRect.height,
+          scrollbarMinHeight,
+          containerRect.height
+        )
+    );
 
-  setReadonly(readonly: boolean): void {
-    this.readonly = readonly;
-  }
+    this.scrollTop$ = combine(
+      [containerRect$, stageRect$, pagesSize$, this.scrollbarHeight$, this.pagesScrollTop$],
+      ([containerRect, stageRect, pagesSize, scrollbarHeight, pagesScrollTop]) =>
+        clamp(
+          (pagesScrollTop /
+            (pagesSize.height - (pagesSize.width / stageRect.width) * stageRect.height)) *
+            (containerRect.height - scrollbarHeight),
+          0,
+          containerRect.height - scrollbarHeight
+        )
+    );
 
-  setContainerSize(width: number, height: number): void {
-    if (width > 0 && height > 0) {
-      if (width !== this.containerWidth || height !== this.containerHeight) {
-        this.containerWidth = width;
-        this.containerHeight = height;
-
-        this.scale = this._calcScale();
-        this._updateScrollbarHeight();
-
-        if (this.$scrollbar.parentElement) {
-          this.pagesScrollTo(this.pagesScrollTop, true);
-        }
-      }
-    }
+    this.$scrollbar = this.renderScrollbar();
   }
 
-  pagesScrollTo(pagesScrollTop: number, force?: boolean): void {
-    pagesScrollTop = clamp(pagesScrollTop, 0, this.pagesHeight - this.containerHeight / this.scale);
-
-    if (force || Math.abs(pagesScrollTop - this.pagesScrollTop) >= 0.001) {
-      this.pagesScrollTop = pagesScrollTop;
-
-      const elScrollTop = this.pagesScrollTop * this.scale;
-      const elPagesHeight = this.pagesHeight * this.scale;
-      const translateY =
-        (elScrollTop / (elPagesHeight - this.containerHeight)) *
-        (this.containerHeight - this.scrollbarHeight);
-
-      if (window.requestAnimationFrame) {
-        window.requestAnimationFrame(() => {
-          this.$scrollbar.style.transform = `translateY(${translateY}px)`;
-        });
-      } else {
-        this.$scrollbar.style.transform = `translateY(${translateY}px)`;
-      }
-    }
+  mount($parent: HTMLElement): void {
+    $parent.appendChild(this.$scrollbar);
   }
 
   destroy() {
-    this.unmount();
+    this.$scrollbar.remove();
     this.onDragScroll = void 0;
@@ -115,10 +100,24 @@ this.sideEffect.flushAll();
     $scrollbar.style.minHeight = `${this.scrollbarMinHeight}px`;
-    $scrollbar.style.height = `${this.scrollbarHeight}px`;
 
-    const trackStart = (ev: MouseEvent | TouchEvent): void => {
-      if (this.readonly) {
+    this.sideEffect.addDisposer([
+      this.scrollbarHeight$.subscribe(scrollbarHeight => {
+        $scrollbar.style.height = `${scrollbarHeight}px`;
+      }),
+      this.scrollTop$.subscribe(scrollTop => {
+        this.scrolling$.setValue(true);
+        this.sideEffect.setTimeout(() => this.scrolling$.setValue(false), 100, "reset-scrolling");
+        const update = () => ($scrollbar.style.transform = `translateY(${scrollTop}px)`);
+        window.requestAnimationFrame ? window.requestAnimationFrame(update) : update();
+      }),
+      this.scrolling$.subscribe(scrolling => {
+        $scrollbar.classList.toggle(this.wrapClassName("scrolling"), scrolling);
+      }),
+    ]);
+
+    const trackStart = (ev: PointerEvent): void => {
+      if (!ev.isPrimary || this.readonly$.value) {
         return;
       }
 
-      if ((ev as MouseEvent).button != null && (ev as MouseEvent).button !== 0) {
+      if (ev.button != null && ev.button !== 0) {
         // Not left mouse
@@ -134,8 +133,8 @@ return;
 
-      const startTop = this.pagesScrollTop;
+      const startTop = this.pagesScrollTop$.value;
 
       const { clientY: startY } = flattenEvent(ev);
 
-      const tracking = (ev: MouseEvent | TouchEvent): void => {
-        if (this.readonly) {
+      const tracking = (ev: PointerEvent): void => {
+        if (!ev.isPrimary || this.readonly$.value) {
           return;
@@ -145,6 +144,6 @@ }
         const { clientY } = flattenEvent(ev);
-        const offsetY = (clientY - startY) / this.scale;
+        const offsetY = clientY - startY;
         if (Math.abs(offsetY) > 0 && this.onDragScroll) {
           this.onDragScroll(
-            startTop + offsetY * ((this.pagesHeight * this.scale) / this.containerHeight)
+            startTop + (offsetY / this.containerRect$.value.height) * this.pagesSize$.value.height
           );
@@ -154,43 +153,21 @@ }
 
-      const trackEnd = (): void => {
+      const trackEnd = (ev: PointerEvent): void => {
+        if (!ev.isPrimary) {
+          return;
+        }
         $scrollbar.classList.toggle(draggingClassName, 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.removeEventListener("pointermove", tracking, true);
+        window.removeEventListener("pointerup", trackEnd, true);
+        window.removeEventListener("pointercancel", 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);
+      window.addEventListener("pointermove", tracking, true);
+      window.addEventListener("pointerup", trackEnd, true);
+      window.addEventListener("pointercancel", trackEnd, true);
     };
 
-    this.sideEffect.addEventListener($scrollbar, "mousedown", trackStart);
-    this.sideEffect.addEventListener($scrollbar, "touchstart", trackStart);
+    this.sideEffect.addEventListener($scrollbar, "pointerdown", trackStart);
 
     return $scrollbar;
   }
-
-  private _calcScale(): number {
-    return this.containerWidth / this.pagesWidth || 1;
-  }
-
-  private _calcScrollbarHeight() {
-    return clamp(
-      (this.containerHeight / (this.pagesHeight * this.scale)) * this.containerHeight,
-      this.scrollbarMinHeight,
-      this.containerHeight
-    );
-  }
-
-  private _updateScrollbarHeight(): void {
-    const newHeight = this._calcScrollbarHeight();
-    if (Math.abs(newHeight - this.scrollbarHeight) > 0.001) {
-      this.scrollbarHeight = newHeight;
-      this.$scrollbar.style.height = `${newHeight}px`;
-    }
-  }
 }

src/StaticDocsViewer/index.ts

@@ -1,26 +0,19 @@
-import type { AnimationMode, ReadonlyTeleBox } from "@netless/window-manager";
-import type { View, Size, Camera } from "white-web-sdk";
-import type { DebouncedFunction, Options } from "debounce-fn";
-import debounceFn from "debounce-fn";
+import type { AnimationMode, ReadonlyTeleBox, WhiteBoardView } from "@netless/window-manager";
+import type { Camera } from "white-web-sdk";
 import { SideEffectManager } from "side-effect-manager";
-import { ResizeObserver as Polyfill } from "@juggle/resize-observer";
 import type { DocsViewerPage } from "../DocsViewer";
 import { DocsViewer } from "../DocsViewer";
-import { clamp, preventEvent } from "../utils/helpers";
+import { clamp, preventEvent, sameSize } from "../utils/helpers";
 import { Stepper } from "./stepper";
 import { PageRenderer } from "../PageRenderer";
 import { ScrollBar } from "../ScrollBar";
+import { derive, Val, type ReadonlyVal } from "value-enhancer";
 
-const ResizeObserver = window.ResizeObserver || Polyfill;
-
-const RATIO_BASE_CONTAINER_HEIGHT = 640;
-
 export interface StaticDocsViewerConfig {
-  whiteboardView: View;
-  readonly: boolean;
+  whiteboard: WhiteBoardView;
+  readonly$: ReadonlyVal<boolean>;
   box: ReadonlyTeleBox;
   pages: DocsViewerPage[];
-  mountWhiteboard: (dom: HTMLDivElement) => void;
   /** Scroll Top of the original page */
-  pageScrollTop?: number;
+  pagesScrollTop?: number;
   onUserScroll?: (pageScrollTop: number) => void;
@@ -30,62 +23,87 @@ }
 export class StaticDocsViewer {
+  readonly readonly$: StaticDocsViewerConfig["readonly$"];
+
+  readonly pagesScrollTop$: Val<number>;
+  get pagesScrollTop(): number {
+    return this.pagesScrollTop$.value;
+  }
+
+  readonly pagesSize$: ReadonlyVal<{ width: number; height: number }>;
+
   public constructor({
-    whiteboardView,
-    readonly,
+    whiteboard,
+    readonly$,
     box,
     pages,
-    pageScrollTop = 0,
-    mountWhiteboard,
+    pagesScrollTop = 0,
     onUserScroll,
   }: StaticDocsViewerConfig) {
-    this.whiteboardView = whiteboardView;
-    this.readonly = readonly;
+    this.whiteboard = whiteboard;
+    this.readonly$ = readonly$;
     this.box = box;
     this.pages = pages;
-    this.mountWhiteboard = mountWhiteboard;
-    this._onUserScroll = onUserScroll;
+    this.onUserScroll = onUserScroll;
 
-    const debouncedOnUserScroll = this.debounce(
-      () => {
-        this.userScrolling = false;
-        if (this._onUserScroll) {
-          this._onUserScroll(this.pageRenderer.pagesScrollTop);
+    const handleDebounceOnUserScroll = () => {
+      this.userScrolling = false;
+      this.onUserScroll?.(this.pagesScrollTop$.value);
+    };
+    this.debounceOnUserScroll = () => {
+      this.userScrolling = true;
+      this.sideEffect.setTimeout(handleDebounceOnUserScroll, 80, "debounceOnUserScroll");
+    };
+
+    const pages$ = new Val(pages);
+    this.pagesScrollTop$ = new Val(pagesScrollTop);
+    this.pagesSize$ = derive(
+      pages$,
+      pages => {
+        let width = 0;
+        let height = 0;
+        for (let i = pages.length - 1; i >= 0; i--) {
+          const page = pages[i];
+          if (page.width > width) {
+            width = page.width;
+          }
+          height += page.height;
         }
+        return { width: Math.max(1, width), height: Math.max(1, height) };
       },
-      { wait: 80 },
-      "debounce-updateUserScroll"
+      { compare: sameSize }
     );
 
-    this.updateUserScroll = () => {
-      this.userScrolling = true;
-      debouncedOnUserScroll();
-    };
+    this.pageRenderer = new PageRenderer({
+      pagesScrollTop$: this.pagesScrollTop$,
+      containerRect$: box._stageRect$,
+      pages$,
+      pagesSize$: this.pagesSize$,
+    });
 
     this.viewer = new DocsViewer({
-      readonly,
+      readonly$,
+      pagesIndex$: this.pageRenderer._pagesIndex$,
       box,
       pages,
-      onNewPageIndex: this.onNewPageIndex,
+      playable: false,
     });
 
-    const { width: containerWidth, height: containerHeight } = this.whiteboardView.size;
+    this.sideEffect.addDisposer([
+      this.viewer.events.on("next", () => {
+        this.userScrollByPercent(0.8);
+      }),
+      this.viewer.events.on("back", () => {
+        this.userScrollByPercent(-0.8);
+      }),
+    ]);
 
-    this.pageRenderer = new PageRenderer({
-      pagesScrollTop: pageScrollTop,
-      pages: this.pages,
-      containerWidth,
-      containerHeight,
-      onPageIndexChanged: this.viewer.setPageIndex.bind(this.viewer),
-    });
-
     this.scrollbar = new ScrollBar({
-      pagesScrollTop: this.pageRenderer.pagesScrollTop,
-      containerWidth,
-      containerHeight,
-      pagesWidth: this.pageRenderer.pagesIntrinsicWidth,
-      pagesHeight: this.pageRenderer.pagesIntrinsicHeight,
-      readonly: this.readonly,
+      pagesScrollTop$: this.pagesScrollTop$,
+      containerRect$: box._bodyRect$,
+      stageRect$: box._stageRect$,
+      pagesSize$: this.pagesSize$,
+      readonly$,
       wrapClassName: this.wrapClassName.bind(this),
       onDragScroll: pageScrollTop => {
         this.pageScrollTo(pageScrollTop);
-        this.updateUserScroll();
+        this.debounceOnUserScroll();
       },
@@ -95,3 +113,3 @@ });
     this.pageScrollStepper = new Stepper({
-      start: this.pageRenderer.pagesScrollTop,
+      start: this.pagesScrollTop$.value,
       onStep: pageScrollTop => {
@@ -102,3 +120,16 @@ this.pageScrollTo(pageScrollTop);
 
+    this.sideEffect.addDisposer(
+      this.viewer.events.on("jumpPage", pageIndex => this.userScrollToPageIndex(pageIndex))
+    );
+
     this.render();
+
+    this.setupScrollListener();
+
+    // guard scroll position
+    this.sideEffect.setTimeout(() => {
+      if (!this.userScrolling) {
+        this.pageScrollTo(this.pageRenderer.pagesScrollTop);
+      }
+    }, 100);
   }
@@ -114,57 +145,15 @@
 
-  protected readonly: boolean;
   protected pages: DocsViewerPage[];
   protected box: ReadonlyTeleBox;
-  protected whiteboardView: View;
-  protected mountWhiteboard: (dom: HTMLDivElement) => void;
+  protected whiteboard: WhiteBoardView;
 
-  public _onUserScroll?: (pageScrollTop: number) => void;
+  public onUserScroll?: (pageScrollTop: number) => void;
+  public debounceOnUserScroll: () => void;
 
   public viewer: DocsViewer;
 
-  public $whiteboardView!: HTMLDivElement;
-
-  public mount(): this {
-    this.viewer.mount();
-
-    this.setupScrollListener();
-
-    const debouncedRenderRatioHeight = this.debounce(this.renderRatioHeight.bind(this), {
-      wait: 80,
-    });
-
-    this.sideEffect.add(() => {
-      const observer = new ResizeObserver(debouncedRenderRatioHeight);
-      observer.observe(this.viewer.$content);
-      return () => observer.disconnect();
-    });
-
-    // guard scroll position
-    this.sideEffect.setTimeout(() => {
-      if (!this.userScrolling) {
-        this.pageScrollTo(this.pageRenderer.pagesScrollTop);
-      }
-    }, 100);
-
-    return this;
-  }
-
-  public unmount(): this {
-    this.viewer.unmount();
-    return this;
-  }
-
-  public setReadonly(readonly: boolean): void {
-    if (this.readonly !== readonly) {
-      this.readonly = readonly;
-      this.viewer.setReadonly(readonly);
-      this.scrollbar.setReadonly(readonly);
-    }
-  }
-
   public destroy(): void {
     this.sideEffect.flushAll();
     this.pageScrollStepper.destroy();
-    this._onUserScroll = void 0;
-    this.unmount();
+    this.onUserScroll = void 0;
     this.viewer.destroy();
@@ -180,5 +169,5 @@ this.pageRenderer.destroy();
       pageScrollTop >= 0 &&
-      Math.abs(this.pageRenderer.pagesScrollTop - pageScrollTop) > 0.01
+      Math.abs(this.pagesScrollTop$.value - pageScrollTop) > 0.01
     ) {
-      this.pageScrollStepper.stepTo(pageScrollTop, this.pageRenderer.pagesScrollTop);
+      this.pageScrollStepper.stepTo(pageScrollTop, this.pagesScrollTop$.value);
     }
@@ -188,103 +177,15 @@ }
   public render(): void {
-    this.pageRenderer.mount(this.viewer.$content);
-    this.viewer.$content.appendChild(this.renderWhiteboardView());
-    this.scrollbar.mount(this.viewer.$content);
-    this.renderRatioHeight();
+    this.box.$content.style.overflow = "hidden";
+    this.box.mountStage(this.pageRenderer.$pages);
+    this.scrollbar.mount(this.box.$body);
   }
 
-  protected renderRatioHeight(): void {
-    const boxHeight = this.box.absoluteHeight;
-    const isSmallBox = boxHeight <= RATIO_BASE_CONTAINER_HEIGHT;
-
-    this.viewer.setSmallBox(isSmallBox);
-
-    if (isSmallBox) {
-      const titleBarSupposedHeight = 26 / RATIO_BASE_CONTAINER_HEIGHT;
-      const titleBarActualHeight = 26 / boxHeight;
-      const footerSupposedHeight = 26 / RATIO_BASE_CONTAINER_HEIGHT;
-      const footerActualHeight = 0;
-
-      const emptySpace = Math.max(
-        (titleBarSupposedHeight +
-          footerSupposedHeight -
-          (titleBarActualHeight + footerActualHeight)) /
-          2,
-        0
-      );
-
-      if (this.box.$titleBar) {
-        const titleBarHeight = titleBarActualHeight + emptySpace;
-        this.box.$titleBar.style.height = `${titleBarHeight * 100}%`;
-      }
-
-      if (this.box.$footer) {
-        const footerHeight = footerActualHeight + emptySpace;
-        this.box.$footer.style.height = `${footerHeight * 100}%`;
-      }
-    } else {
-      if (this.box.$titleBar) {
-        const titleBarHeight = Math.max(26 / RATIO_BASE_CONTAINER_HEIGHT, 26 / boxHeight);
-        this.box.$titleBar.style.height = `${titleBarHeight * 100}%`;
-      }
-
-      if (this.box.$footer) {
-        const footerHeight = Math.max(26 / RATIO_BASE_CONTAINER_HEIGHT, 26 / boxHeight);
-        this.box.$footer.style.height = `${footerHeight * 100}%`;
-      }
-    }
-  }
-
-  protected renderWhiteboardView(): HTMLDivElement {
-    if (!this.$whiteboardView) {
-      this.$whiteboardView = document.createElement("div");
-      this.$whiteboardView.className = this.wrapClassName("wb-view");
-      this.mountWhiteboard(this.$whiteboardView);
-      this.sideEffect.addEventListener(
-        this.$whiteboardView,
-        "wheel",
-        ev => {
-          preventEvent(ev);
-          if (!this.readonly) {
-            this.pageScrollTo(this.pageRenderer.pagesScrollTop + ev.deltaY);
-            this.updateUserScroll();
-          }
-        },
-        { passive: false, capture: true }
-      );
-      this.sideEffect.addEventListener(
-        this.$whiteboardView,
-        "touchmove",
-        ev => {
-          if (this.readonly || ev.touches.length <= 1) {
-            return;
-          }
-          this.updateUserScroll();
-        },
-        { passive: true, capture: true }
-      );
-    }
-    return this.$whiteboardView;
-  }
-
-  protected scrollTopPageToEl(pageScrollTop: number): number {
-    return pageScrollTop * this.pageRenderer.scale;
-  }
-
-  protected scrollTopElToPage(elScrollTop: number): number {
-    return elScrollTop / this.pageRenderer.scale;
-  }
-
-  /** Scroll base on DOM rect */
-  protected elScrollTo(elScrollTop: number): void {
-    this.pageScrollTo(this.scrollTopElToPage(elScrollTop));
-  }
-
   /** Scroll base on docs size */
-  protected pageScrollTo(pageScrollTop: number): void {
-    const halfWbHeight = this.scrollTopElToPage(this.whiteboardView.size.height / 2);
-    this.whiteboardView.moveCamera({
+  private pageScrollTo(pagesScrollTop: number): void {
+    const halfWbHeight = this.whiteboard.view.size.height / 2 / this.pageRenderer.scale;
+    this.whiteboard.view.moveCamera({
       centerY: clamp(
-        pageScrollTop + halfWbHeight,
+        pagesScrollTop + halfWbHeight,
         halfWbHeight,
-        this.pageRenderer.pagesIntrinsicHeight - halfWbHeight
+        this.pagesSize$.value.height - halfWbHeight
       ),
@@ -295,8 +196,8 @@ animationMode: "immediately" as AnimationMode,
 
-  protected scrollToPage(index: number): void {
-    if (!this.readonly && !Number.isNaN(index)) {
-      const offsetY = this.pageRenderer.pagesIntrinsicYs[index];
+  private userScrollToPageIndex(index: number): void {
+    index = clamp(index, 0, this.pages.length - 1);
+    if (!this.readonly$.value && !Number.isNaN(index)) {
+      const offsetY = this.pageRenderer.pagesYs[index];
       if (offsetY >= 0) {
-        this.pageScrollTo(offsetY + 5 / this.pageRenderer.scale);
-        this.updateUserScroll();
+        this.onUserScroll?.(offsetY + 5 / this.pageRenderer.scale);
       }
@@ -306,40 +207,69 @@ }
 
+  private userScrollByPercent(percent: number): void {
+    if (!this.readonly$.value) {
+      this.onUserScroll?.(
+        clamp(
+          this.pageRenderer.pagesScrollTop +
+            (this.pageRenderer.containerRect.height / this.pageRenderer.scale) *
+              clamp(percent, -1, 1),
+          0,
+          this.pageRenderer.pagesSize.height -
+            this.pageRenderer.containerRect.height / this.pageRenderer.scale
+        )
+      );
+    }
+  }
+
   protected setupScrollListener(): void {
+    this.sideEffect.addEventListener(
+      this.box.$main,
+      "wheel",
+      ev => {
+        preventEvent(ev);
+        if (!this.readonly$.value && this.pageScrollStepper.paused) {
+          this.pageScrollTo(this.pagesScrollTop + ev.deltaY);
+          this.debounceOnUserScroll();
+        }
+      },
+      { passive: false }
+    );
+
+    this.sideEffect.addEventListener(
+      this.box.$main,
+      "touchmove",
+      ev => {
+        if (!this.readonly$.value && ev.touches.length > 1) {
+          this.debounceOnUserScroll();
+        }
+      },
+      { passive: true, capture: true }
+    );
+
     this.sideEffect.add(() => {
       const handleCameraUpdate = (camera: Camera) => {
-        const { width: wbWidth, height: wbHeight } = this.whiteboardView.size;
+        const { width: wbWidth, height: wbHeight } = this.whiteboard.view.size;
         if (wbWidth <= 0 || wbHeight <= 0) {
           return;
         }
-
         const pagesScrollTop =
-          camera.centerY - this.pageRenderer.containerHeight / this.pageRenderer.scale / 2;
-
-        this.pageRenderer.pagesScrollTo(pagesScrollTop);
-        this.scrollbar.pagesScrollTo(pagesScrollTop);
+          camera.centerY - this.pageRenderer.containerRect.height / this.pageRenderer.scale / 2;
+        this.pagesScrollTop$.setValue(pagesScrollTop);
       };
-      this.whiteboardView.callbacks.on("onCameraUpdated", handleCameraUpdate);
-      return () => this.whiteboardView.callbacks.off("onCameraUpdated", handleCameraUpdate);
+      this.whiteboard.view.callbacks.on("onCameraUpdated", handleCameraUpdate);
+      return () => this.whiteboard.view.callbacks.off("onCameraUpdated", handleCameraUpdate);
     });
 
-    this.sideEffect.add(() => {
-      const handleSizeUpdate = ({ width: wbWidth, height: wbHeight }: Size): void => {
-        if (wbWidth <= 0 || wbHeight <= 0) {
-          return;
-        }
+    this.sideEffect.addDisposer(
+      this.box._stageRect$.subscribe(stageRect => {
+        const { width: pagesIntrinsicWidth, height: pagesIntrinsicHeight } = this.pagesSize$.value;
 
-        this.pageRenderer.setContainerSize(wbWidth, wbHeight);
-        this.scrollbar.setContainerSize(wbWidth, wbHeight);
-
-        const { pagesIntrinsicWidth, pagesIntrinsicHeight } = this.pageRenderer;
-
-        this.whiteboardView.moveCameraToContain({
+        this.whiteboard.view.moveCameraToContain({
           originX: 0,
           originY: this.pageRenderer.pagesScrollTop,
           width: pagesIntrinsicWidth,
-          height: wbHeight / this.pageRenderer.scale,
+          height: stageRect.height / this.pageRenderer.scale,
           animationMode: "immediately" as AnimationMode,
         });
 
-        this.whiteboardView.setCameraBound({
+        this.whiteboard.view.setCameraBound({
           damping: 1,
@@ -353,8 +283,5 @@ maxContentMode: () => this.pageRenderer.scale,
         });
-      };
-      this.whiteboardView.callbacks.on("onSizeUpdated", handleSizeUpdate);
-      return () => {
-        this.whiteboardView.callbacks.off("onSizeUpdated", handleSizeUpdate);
-      };
-    }, "whiteboard-size-update");
+      }),
+      "whiteboard-size-update"
+    );
 
@@ -365,29 +292,28 @@ this.sideEffect.addEventListener(
       ev => {
-        if (this.readonly || !this.box.focus || this.box.minimized) {
+        if (this.readonly$.value || !this.box.focus || this.box.minimized) {
           return;
         }
-        let newPageScrollTop: number | null = null;
         switch (ev.key) {
           case "PageDown": {
-            newPageScrollTop =
-              this.pageRenderer.pagesScrollTop +
-              this.pageRenderer.containerHeight / this.pageRenderer.scale;
+            this.userScrollByPercent(0.8);
             break;
           }
           case "PageUp": {
-            newPageScrollTop =
-              this.pageRenderer.pagesScrollTop -
-              this.pageRenderer.containerHeight / this.pageRenderer.scale;
+            this.userScrollByPercent(-0.8);
             break;
           }
+          case "ArrowLeft": {
+            this.userScrollByPercent(-0.25);
+            break;
+          }
+          case "ArrowRight": {
+            this.userScrollByPercent(0.25);
+            break;
+          }
           case "ArrowDown": {
-            newPageScrollTop =
-              this.pageRenderer.pagesScrollTop +
-              this.pageRenderer.containerHeight / 4 / this.pageRenderer.scale;
+            this.userScrollByPercent(0.5);
             break;
           }
           case "ArrowUp": {
-            newPageScrollTop =
-              this.pageRenderer.pagesScrollTop -
-              this.pageRenderer.containerHeight / 4 / this.pageRenderer.scale;
+            this.userScrollByPercent(-0.5);
             break;
@@ -398,11 +324,2 @@ }
         }
-        if (newPageScrollTop !== null) {
-          if (this._onUserScroll) {
-            // this will trigger stepper for smooth scrolling effect
-            this._onUserScroll(newPageScrollTop);
-          } else {
-            this.pageScrollTo(newPageScrollTop);
-            this.updateUserScroll();
-          }
-        }
       },
@@ -413,21 +330,5 @@ { capture: true }
 
-  protected debounce<ArgumentsType extends unknown[], ReturnType>(
-    fn: (...args: ArgumentsType) => ReturnType,
-    options?: Options,
-    disposerID?: string
-  ): DebouncedFunction<ArgumentsType, ReturnType | undefined> {
-    const dFn = debounceFn(fn, options);
-    this.sideEffect.addDisposer(() => dFn.cancel(), disposerID);
-    return dFn;
-  }
-
-  protected updateUserScroll: () => void;
-
-  protected wrapClassName(className: string): string {
+  private wrapClassName(className: string): string {
     return "netless-app-docs-viewer-static-" + className;
   }
-
-  protected onNewPageIndex = (index: number): void => {
-    this.scrollToPage(index);
-  };
 }

src/StaticDocsViewer/stepper.ts

@@ -5,3 +5,3 @@ export interface StepperConfig {
   damping?: number;
-  onStep: (value: number) => void;
+  onStep?: (value: number) => void;
 }
@@ -16,8 +16,12 @@
   public velocity = 0;
-  public onStep: (value: number, stepper: Stepper) => void;
-  public paused = true;
+  public onStep?: (value: number) => void;
 
-  protected _animationFrameID: number | null = null;
-  protected _loopTimestamp = 0;
+  public get paused(): boolean {
+    return this._paused;
+  }
 
+  private _paused = true;
+  private _animationFrameID: number | null = null;
+  private _loopTimestamp = 0;
+
   public constructor(config: StepperConfig) {
@@ -32,14 +36,17 @@ this.current = config.start ?? 0;
   public stepTo(target: number, start?: number) {
-    if (this.paused && start != null) {
+    if (this._paused && start != null) {
       this.current = start;
     }
-    this.paused = false;
+    this._paused = false;
     this.target = target;
-    this.onStep(this.current, this);
+    this.onStep?.(this.current);
     this._loopTimestamp = Date.now();
-    window.requestAnimationFrame(this.looper);
+    this._animationFrameID = window.requestAnimationFrame(this.looper);
   }
 
   public pause() {
-    this.paused = true;
+    this._paused = true;
+    if (this._animationFrameID != null) {
+      window.cancelAnimationFrame(this._animationFrameID);
+    }
   }
@@ -49,6 +56,7 @@
     this.pause();
+    this.onStep = undefined;
   }
 
   protected looper = (timestamp: number) => {
-    if (this.paused) {
+    if (this._paused) {
       return;
@@ -63,6 +71,8 @@ }
 
-    this.onStep(this.current, this);
+    this.onStep?.(this.current);
 
-    if (!this.paused && this.current !== this.target) {
-      window.requestAnimationFrame(this.looper);
+    if (!this._paused) {
+      this._animationFrameID = window.requestAnimationFrame(this.looper);
+    } else {
+      this._animationFrameID = null;
     }
@@ -81,2 +91,3 @@ };
       this.velocity = 0;
+      this._paused = true;
     } else {
@@ -83,0 +94,0 @@ this.current = newCurrent;

src/utils/helpers.ts

@@ -15,1 +15,8 @@ export function clamp(value: number, min: number, max: number): number {
 }
+
+export function sameSize(
+  size1: { width: number; height: number },
+  size2: { width: number; height: number }
+): boolean {
+  return size1.width === size2.width && size1.height === size2.height;
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

61

increased by15.09%

Worsened metrics

Total package byte prevSize

686797

decreased by-12.93%

Lines of code

4510

decreased by-8.87%

Dependency changes

• + Addedremitter@^0.2.3

• + Addedvalue-enhancer@^1.3.2

• + Addedremitter@0.2.17(transitive)

• + Addedvalue-enhancer@1.3.2(transitive)

• - Removed@juggle/resize-observer@^3.3.1

• - Removeddebounce-fn@^5.1.0

• - Removed@juggle/resize-observer@3.4.0(transitive)

• - Removeddebounce-fn@5.1.2(transitive)

• - Removedmimic-fn@4.0.0(transitive)

• Updatedvanilla-lazyload@^17.8.2