@netless/app-presentation 0.1.7 → 0.1.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.7",
+  "version": "0.1.8-beta.0",
   "description": "Netless App for presentation slides (images)",
   "author": "netless",
   "license": "MIT",

package/src/app-presentation.ts

@@ -1,13 +1,16 @@
-import type { AnimationMode, AppContext, NetlessApp, ReadonlyTeleBox, Room, SceneDefinition, Storage, View, WindowManager } from "@netless/window-manager"
+import type { AnimationMode, AppContext, AppPayload, NetlessApp, PublicEvent, ReadonlyTeleBox, Room, SceneDefinition, View, WindowManager } from "@netless/window-manager"
 
 import { disposableStore } from '@wopjs/disposable'
 import { listen } from '@wopjs/dom'
 
 import styles from './style.scss?inline'
 import { Presentation, type PresentationConfig, type PresentationPage } from "./presentation";
+import { readable, type Readable } from "./store";
 
 export type Logger = (...data: any[]) => void
 
+const emptySceneName = '$$empty$$'
+
 interface Viewport {
   readonly x: number;
   readonly y: number;
@@ -71,6 +74,18 @@ const createLogger = (room: Room | undefined): Logger => {
     return (...args) => console.log(...args)
   }
 }
+``
+const scenesEqual = (scenes1?: SceneDefinition[], scenes2?: SceneDefinition[]): boolean => {
+  if (!scenes1 || !scenes2) {return false}
+  if (scenes1.length !== scenes2.length) return false;
+  return scenes1.every((scene, index) => {
+    const scene2 = scenes2[index];
+    return scene.name === scene2.name && 
+           scene.ppt?.width === scene2.ppt?.width &&
+           scene.ppt?.height === scene2.ppt?.height &&
+           scene.ppt?.src === scene2.ppt?.src;
+  });
+};
 
 export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions, PresentationController> = {
   kind: "Presentation",
@@ -99,45 +114,107 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
     const log = options.log || createLogger(context.getRoom())
     log(`[Presentation] new ${context.appId}`)
 
+    const dispose = disposableStore()
+    dispose.add(() => log(`[Presentation] dispose ${context.appId}`))
+
+    const view$$ = context.createStorage('view', { uid: "", originX: 0, originY: 0, width: 0, height: 0 })
+
+
+    const _addScenePathListener = (
+      name: keyof PublicEvent,
+      listener: any
+    ) => {
+      const windowManger = (context as any).manager.windowManger as WindowManager;
+      windowManger.emitter.on(name, listener)
+      return () => windowManger?.emitter.off(name, listener)
+    }
+
+    const getPageIndex = (view: View) => {
+      const focusScenePath = view.focusScenePath;
+      const name = focusScenePath?.split('/').pop();
+      let _pageIndex = pages.findIndex((page, index) => {
+        const n = page.name ?? String(index + 1);
+        return n === name;
+      });
+      if (_pageIndex === -1) {
+        _pageIndex = 0;
+      }
+      return _pageIndex;
+    }
+
+    let pageIndex = getPageIndex(view);
+    const pageIndex$ = readable<number>(pageIndex, set => {
+      set(pageIndex);
+      return _addScenePathListener("onAppScenePathChange", (payload: AppPayload)=>{
+        const { appId } = payload;
+        if (appId === context.appId) {
+          const _pageIndex = getPageIndex(payload.view);
+          set(_pageIndex)
+        }
+      });
+    });
+
+    dispose.add(() => {
+      pageIndex$.dispose();
+    })
+
     // Prepare scenes.
     // Caution: some user may insert a 500-page PDF.
     if (context.isAddApp) {
       if (pages.length > 100)
         console.warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`)
 
-      const room = context.getRoom()
+      let redirectResolve: ((bol:boolean) => void) | undefined = undefined;
+      const room = context.getRoom();
       if (room && room.isWritable) {
         const scenes = room.entireScenes()[scenePath];
-        for (let i = 0; i < pages.length; i++) {
-          const p = pages[i];
-          const name = p.name ?? String(i + 1);
-          const scene = scenes.find(scene => scene.name == name && scene.ppt)
-          if (scene) {
-            if (scene.ppt && scene.ppt?.src === p.src) {
-              continue;
-            }
-            room.removeScenes(`${scenePath}/${name}`)
-          }
-          room.putScenes(scenePath, pages.map((p, index) => ({
+        if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
+          throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
+        }
+        new Promise((resolve) => {
+          const {name, ppt} = scenes[pageIndex$.value];
+          redirectResolve = resolve;
+          const _scenes = pages.map((p, index) => ({
             name: p.name ?? String(index + 1),
             ppt: { width: p.width, height: p.height, src: p.src }
-          })))
-        }
+          }))
+          
+          if (!scenesEqual(scenes, _scenes)) {
+            room.removeScenes(scenePath)
+            room.putScenes(scenePath, _scenes)
+          }
+          if(name === _scenes[pageIndex$.value].name && !ppt){
+            context.addPage({ scene: { name: emptySceneName } }).then(() => {
+              log(`[Presentation] setup setScenePath ${scenePath}/${emptySceneName}`);
+              context.setScenePath(`${scenePath}/${emptySceneName}`).then(()=>{
+                redirectResolve && redirectResolve(true);
+              })
+            });
+          } else {
+            redirectResolve && redirectResolve(false)
+          }
+        }).then(async(bol)=>{
+          await syncPage(pageIndex$.value, (room as any).logger);
+          if (bol) {
+            log(`[Presentation] setup removeScenes ${scenePath}/${emptySceneName}`);
+            room.removeScenes(`${scenePath}/${emptySceneName}`);
+          }
+        });
       }
     }
 
-    const dispose = disposableStore()
-    dispose.add(() => log(`[Presentation] dispose ${context.appId}`))
+    // let lastIndex = -1
 
-    const page$$ = context.createStorage('page', { index: 0 })
-    const view$$ = context.createStorage('view', { uid: "", originX: 0, originY: 0, width: 0, height: 0 })
+    const me = context.getRoom()?.uid || context.getDisplayer().observerId + ''
 
-    let lastIndex = -1
-    const syncPage = async (index: number) => {
-      if (lastIndex !== index) {
-        lastIndex = index
-        context.dispatchAppEvent('pageStateChange', { index, length: pages.length })
-      }
+    let throttleSyncView = 0
+
+    const syncPage = async (index: number, logger?: any) => {
+      // if (lastIndex !== index) {
+      //   lastIndex = index
+      //   console.log('dispatchAppEvent===>pageStateChange', index);
+      //   context.dispatchAppEvent('pageStateChange', { index, length: pages.length })
+      // }
 
       if (!context.getIsWritable()) return
 
@@ -153,6 +230,10 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
         await context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } })
       }
 
+      if (logger) {
+        logger.info(`[Presentation] syncPage ${scenePath}/${name}`);
+      }
+
       // Switch to that page.
       await context.setScenePath(`${scenePath}/${name}`)
     }
@@ -178,16 +259,16 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       const name = p.name ?? String(index + 1);
 
       if (!scenes.some(scene => scene.name === name)) {
-        context.addPage({ scene: { name } })
+        context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } })
       }
 
-      page$$.setState({ index })
+      syncPage(index);
       return true
     }
 
-    const prevPage = () => jumpPage(page$$.state.index - 1)
-    const nextPage = () => jumpPage(page$$.state.index + 1)
-    const pageState = () => ({ index: page$$.state.index, length: pages.length })
+    const prevPage = () => jumpPage(pageIndex$.value - 1)
+    const nextPage = () => jumpPage(pageIndex$.value + 1)
+    const pageState = () => ({ index: pageIndex$.value, length: pages.length })
 
     const scaleDocsToFit = () => {
       const { width, height } = app.page() || {}
@@ -207,10 +288,6 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
         syncViewFromRemote(true)
       }
     }
-
-    const me = context.getRoom()?.uid || context.getDisplayer().observerId + ''
-
-    let throttleSyncView = 0
     const syncView = () => {
       if (throttleSyncView > 0) return
       const { width, height } = app.page() || {}
@@ -243,12 +320,10 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       }
     }
 
-    syncPage(page$$.state.index)
-    dispose.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)))
     dispose.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)))
 
     const box = context.getBox()
-    const app = dispose.add(createPresentation(box, pages, jumpPage, page$$, options.thumbnail))
+    const app = dispose.add(createPresentation(box, pages, jumpPage, pageIndex$, options.thumbnail))
     app.contentDOM.dataset.appPresentationVersion = __VERSION__
     app.scaleDocsToFit = scaleDocsToFit
     app.log = log
@@ -444,6 +519,7 @@ class AppPresentation extends Presentation {
 
   override updateImage() {
     // Do nothing, the image was set in the whiteboard scene.
+    super.updateImage();
   }
 
   override onNewPageIndex(index: number, origin: "navigation" | "keydown" | "input" | "preview") {
@@ -465,7 +541,7 @@ function createPresentation(
   box: ReadonlyTeleBox,
   pages: PresentationPage[],
   jumpPage: (index: number) => void,
-  page$$: Storage<{ index: number }>,
+  pageIndex$: Readable<number>,
   thumbnail?: (src: string) => string,
 ): AppPresentation {
   box.mountStyles(styles)
@@ -475,10 +551,7 @@ function createPresentation(
   box.mountContent(app.contentDOM)
   box.mountFooter(app.footerDOM)
 
-  app.setPageIndex(page$$.state.index)
-  app.dispose.add(page$$.addStateChangedListener(() => {
-    app.setPageIndex(page$$.state.index)
-  }))
+  app.dispose.add(pageIndex$.subscribe(pageIndex => { app.setPageIndex(pageIndex) }))
 
   return app
 }

package/src/preload.ts

@@ -1,9 +1,19 @@
 import type { IDisposable } from "@wopjs/disposable";
 import type { PresentationPage } from "./presentation";
 
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscriber = () => void;
+export type Updater<T> = (value: T) => T;
+
+export interface PageIndex<T> {
+  readonly value: T;
+  subscribe(this: void, run: Subscriber<T>): Unsubscriber;
+  reaction(this: void, run: Subscriber<T>): Unsubscriber;
+  dispose(value?: T): void;
+}
+
 export enum ELoadState {
   unloaded,
-  loading,
   loaded,
   error
 }
@@ -15,10 +25,14 @@ export interface IPreloadMapValue {
 
 export class Preload implements IDisposable {
   static maxLinks: number = 5;
-  readonly loadingLinks: Map<number, HTMLLinkElement> = new Map();
+  // 正在加载的链接
+  readonly loadingLinks: Map<number, {
+    link: HTMLLinkElement,
+    isForce: boolean
+  }> = new Map();
+  // 需要预加载的链接集合
   readonly preloadMap = new Map<number, IPreloadMapValue>();
-  readonly waitingLoadSet: Set<number> = new Set();
-  readonly waitinglinks: number[] = [];
+  // 当前触摸的索引
   touchIndex: number = 0;
   preloadSize: number = 0;
   constructor(readonly pages: PresentationPage[]) {
@@ -26,118 +40,87 @@ export class Preload implements IDisposable {
       src: e.src,
       state: ELoadState.unloaded
     }]));
-    this.waitingLoadSet = new Set(pages.map((e,index) => index));
     this.preloadSize = this.preloadMap.size;
-    this.touch(0);
-  }
-  async touch(index: number): Promise<ELoadState> {
-    this.touchIndex = index;
-    const value = this.preloadMap.get(index);
-    let state = ELoadState.unloaded;
-    if (value) {
-      state = value.state;
-      if (value.state === ELoadState.unloaded) {
-        if (this.loadingLinks.size) {
-          for (const [i,link] of this.loadingLinks) {
-            this.destroyLink(i, link);
-            this.waitingLoadSet.add(i);
-            const v = this.preloadMap.get(i);
-            if (v) {
-              v.state = ELoadState.unloaded;
-              this.preloadMap.set(i, v);
-            }
-          }
-          for (const i of this.waitinglinks) {
-            this.waitingLoadSet.add(i);
-          }
-          this.waitinglinks.length = 0;
-        }
-        if (this.waitinglinks.includes(index)) {
-          this.waitinglinks.splice(this.waitinglinks.indexOf(index), 1);
-        }
-        state = await new Promise<ELoadState>(resolve => {
-          this.waitingLoadSet.delete(index);
-          this.createLink(index, resolve);
-        })
-      }
-    }
-    if (this.waitingLoadSet.size) {
-      this.requestAsyncCallBack(()=>{
-        this.autoTouch();
-      }, 1000)
-    }
-    return state;
+    this.touch(0, true);
   }
-  private autoTouch(){
-    this.handler();
-    if (this.waitingLoadSet.size === 0) {
-      return;
+  touch(index: number, force: boolean = false) {
+    if (index >= this.preloadSize) {
+      this.touchIndex = 0;
+    } else {
+      this.touchIndex = index;
     }
-    let nextTouchDelay = 1000;
-    this.touchIndex = (this.touchIndex + 1) % this.preloadSize;
     const value = this.preloadMap.get(this.touchIndex);
-    if (value) {
-      switch (value.state) {
-        case ELoadState.unloaded:
-        case ELoadState.error:
-          if (!this.waitinglinks.includes(this.touchIndex)) {
-            this.waitinglinks.push(this.touchIndex);
-            this.waitingLoadSet.delete(this.touchIndex);
-          }
-          nextTouchDelay = 0;
-          break;
+    if (value && value.state === ELoadState.unloaded) {
+      this.createLink(this.touchIndex, force);
+    }
+    if (this.loadingLinks.size < Preload.maxLinks) {
+      const willLoad = [...this.preloadMap.entries()].find(([i, e]) => i > this.touchIndex && e.state !== ELoadState.loaded);
+      if (willLoad) {
+        this.requestAsyncCallBack(()=>{this.touch(willLoad[0], false)}, 100);
       }
     }
-    this.requestAsyncCallBack(()=>{
-      this.autoTouch();
-    }, nextTouchDelay)
   }
 
-  private createLink(index: number, resolve?:(state:ELoadState)=>void) {
+  private createLink(index: number, force: boolean = false):ELoadState {
     const value = this.preloadMap.get(index);
+    if (force) { 
+      this.destroySomeLink(index);
+    }
     if (value) {
-      const link = document.createElement('link');
-      link.rel = 'preload';
-      link.as = 'image';
-      link.href = value.src;
-      link.dataset.order = index + '';
-      document.head.appendChild(link);
-      link.onload = () => {
-        value.state = ELoadState.loaded;
-        this.preloadMap.set(index, value);
-        document.head.contains(link) && document.head.removeChild(link);
-        this.loadingLinks.delete(index);
-        resolve && resolve(ELoadState.loaded);
-        this.autoTouch();
+      if (value.state === ELoadState.loaded) {
+        return ELoadState.loaded;
+      }
+      const curlink = this.loadingLinks.get(index);
+      if (curlink) {
+        if (curlink.isForce !== force) {
+          curlink.isForce = force;
+          this.loadingLinks.set(index, curlink);
+        }
+        return ELoadState.unloaded;
+      }
+      if (this.loadingLinks.size > Preload.maxLinks) {
+        return ELoadState.unloaded;
+      }
+      const linkDom = document.createElement('link');
+      linkDom.rel = 'preload';
+      linkDom.as = 'image';
+      linkDom.href = value.src;
+      linkDom.dataset.order = index + '';
+      document.head.appendChild(linkDom);
+      linkDom.onload = () => {
+        const value = this.preloadMap.get(index);
+        if (value) {
+          value.state = ELoadState.loaded;
+          this.preloadMap.set(index, value);
+          document.head.contains(linkDom) && document.head.removeChild(linkDom);
+          this.loadingLinks.delete(index);
+          this.touch(this.touchIndex + 1, false);
+        }
       }
-      link.onerror = () => {
-        value.state = ELoadState.error;
-        this.preloadMap.set(index, value);
-        if (!this.waitinglinks.includes(index)) {
-          this.waitinglinks.push(index);
-          this.waitingLoadSet.delete(this.touchIndex);
+      linkDom.onerror = () => {
+        const value = this.preloadMap.get(index);
+        if (value?.src) {
+          linkDom.href = value.src;
         }
-        document.head.contains(link) && document.head.removeChild(link);
-        this.loadingLinks.delete(index);
-        resolve && resolve(ELoadState.error);
-        this.autoTouch();
       }
-      this.loadingLinks.set(index, link);
-      value.state = ELoadState.loading;
+      this.loadingLinks.set(index, {
+        link: linkDom,
+        isForce: force
+      });
+      value.state = ELoadState.unloaded;
       this.preloadMap.set(index, value);
+      return ELoadState.unloaded;
     }
+    return ELoadState.error;
   }
-  private handler() {
-    if(!this.waitinglinks.length) {
-      return;
-    }
-    let i = this.loadingLinks.size;
-    while (i < Preload.maxLinks) {
-      const index = this.waitinglinks.shift();
-      if (index !== undefined) {
-        this.createLink(index);
+
+  private destroySomeLink(excludeIndex?: number) {
+    for (const [index, { link }] of this.loadingLinks) {
+      if (excludeIndex !== undefined && index === excludeIndex) {
+        continue;
       }
-      i++;
+      document.head.contains(link) && document.head.removeChild(link);
+      this.loadingLinks.delete(index);
     }
   }
   private async requestAsyncCallBack (callBack:()=>void, timeout:number):Promise<void> {
@@ -154,16 +137,8 @@ export class Preload implements IDisposable {
       });
       callBack();
   }
-  private destroyLink(index: number, link: HTMLLinkElement) {
-    document.head.contains(link) && document.head.removeChild(link)
-    this.loadingLinks.delete(index)
-  }
   dispose() {
-    for (const [index,link] of this.loadingLinks) {
-      this.destroyLink(index, link);
-    }
+    this.destroySomeLink();
     this.preloadMap.clear();
-    this.waitingLoadSet.clear();
-    this.waitinglinks.length = 0;
   }
 }

package/src/presentation.ts

@@ -11,7 +11,7 @@ export interface PresentationPage {
   width: number;
   height: number;
   thumbnail?: string | undefined;
-  name?: string | undefined;
+  name?: string;
 }
 
 export interface PresentationConfig {
@@ -298,16 +298,15 @@ export class Presentation implements IDisposable<void> {
     }
     this.timer = setTimeout(() => {
       this.timer = null;
-      this.preload.touch(this.pageIndex).then(() => {
-        const page = this.page()
-        if (!page) {
-          this.image.src = ''
-          return
-        }
-        this.image.width = page.width
-        this.image.height = page.height
-        this.image.src = page.src
-      })
+      this.preload.touch(this.pageIndex, true);
+      // const page = this.page()
+      // if (!page) {
+      //   this.image.src = ''
+      //   return
+      // }
+      // this.image.width = page.width
+      // this.image.height = page.height
+      // this.image.src = page.src
     }, 200)
   }
 

package/src/store.ts

@@ -0,0 +1,103 @@
+// This is a simple mimic of svelte/store.
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscriber = () => void;
+export type Updater<T> = (value: T) => T;
+export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
+
+export interface Readable<T> {
+  readonly value: T;
+  subscribe(this: void, run: Subscriber<T>): Unsubscriber;
+  reaction(this: void, run: Subscriber<T>): Unsubscriber;
+  dispose(value?: T): void;
+}
+
+export interface Writable<T> extends Readable<T> {
+  set(this: void, value: T): void;
+  update(this: void, updater: Updater<T>): void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}
+
+function safe_not_equal(a: unknown, b: unknown) {
+  return a != a ? b == b : a !== b || (a && typeof a === "object") || typeof a === "function";
+}
+
+export function readable<T>(value: T, start: StartStopNotifier<T> = noop): Readable<T> {
+  let stop: Unsubscriber | undefined;
+  const subscribers = new Set<Subscriber<T>>();
+  function set(new_value: T) {
+    if (safe_not_equal(value, new_value)) {
+      value = new_value;
+      if (stop) {
+        for (const run of subscribers) {
+          run(value);
+        }
+      }
+    }
+  }
+  function subscribe(run: Subscriber<T>) {
+    subscribers.add(run);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    run(value);
+    return () => {
+      subscribers.delete(run);
+      if (subscribers.size === 0) {
+        stop && stop();
+        stop = undefined;
+      }
+    };
+  }
+  function reaction(run: Subscriber<T>) {
+    subscribers.add(run);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    return () => {
+      subscribers.delete(run);
+      if (subscribers.size === 0) {
+        stop && stop();
+        stop = undefined;
+      }
+    };
+  }
+  function dispose(new_value?: T) {
+    if (new_value !== undefined) {
+      set(new_value);
+    }
+    subscribers.clear();
+    stop && stop();
+    stop = undefined;
+  }
+  return {
+    get value() {
+      if (subscribers.size === 0) {
+        stop = start(set) || noop;
+        stop();
+        stop = undefined;
+      }
+      return value;
+    },
+    subscribe,
+    reaction,
+    dispose,
+  };
+}
+
+export function writable<T>(value: T, start: StartStopNotifier<T> = noop, set: Subscriber<T>): Writable<T> {
+  const internal = readable(value, start);
+  return {
+    get value() {
+      return internal.value;
+    },
+    subscribe: internal.subscribe,
+    reaction: internal.reaction,
+    set,
+    update(fn: Updater<T>) {
+      set(fn(internal.value));
+    },
+    dispose: internal.dispose,
+  };
+}