@netless/forge-slide 1.0.10 → 1.1.0-beta.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@netless/forge-slide",
-  "version": "1.0.10",
+  "version": "1.1.0-beta.2",
   "description": "",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/slide.js",
+  "module": "dist/slide.esm.js",
   "types": "dist/index.d.ts",
   "dependencies": {
     "@netless/slide": "^1.4.21"
@@ -12,8 +12,8 @@
     "eventemitter3": "^5.0.1",
     "yjs": "^13.6.18",
     "uuid": "^11.0.5",
-    "@netless/forge-room": "1.0.10",
-    "@netless/forge-whiteboard": "1.0.10"
+    "@netless/forge-room": "1.1.0-beta.2",
+    "@netless/forge-whiteboard": "1.1.0-beta.2"
   },
   "keywords": [],
   "author": "",

package/src/Slide.ts

@@ -93,4 +93,15 @@ export class SlideForge extends EventEmitter<SlideEvents> implements Application
      * @param {number} index 页面索引
      */
   public imgSize!: (index: number) => Promise<{width: number, height: number}>;
+
+  /**
+     * 冻结当前幻灯片, 释放资源
+     * @param {() => void} [callback] 冻结完成回调
+     */
+  public frozen!: (callback?: () => void) => void;
+  /**
+     * 解冻冻结的幻灯片, 重新获取资源
+     * @param {() => void} [callback] 解冻完成回调
+     */
+  public release!: (callback?: () => void) => void;
 }

package/src/SlideApplication.ts

@@ -7,6 +7,7 @@ import { FooterView } from './FooterView';
 import * as Y from 'yjs';
 import { SideBarView } from './SiderBarView';
 import { deepEqual } from './utils';
+import { SlidePool } from './SlidePool';
 
 export interface SlideApplicationOption {
     prefix: string;
@@ -30,6 +31,7 @@ export const Slide_APP_NAME = 'forge_slide';
 export class SlideApplication extends AbstractApplication<SlideApplicationOption, SlideForge> {
 
   static applicationName = Slide_APP_NAME;
+  static slidePool: SlidePool = new SlidePool();
 
   public readonly name: string = Slide_APP_NAME;
   public readonly emitter: SlideForge = new SlideForge();
@@ -228,7 +230,20 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         return this.getImageSize(pageIndex);
       },
     });
-    this.applySlideState();
+    Object.defineProperty(this.emitter, 'frozen', {
+      writable: false,
+      enumerable: false,
+      value: (callback?: () => void) => {
+        return this.slide.frozen(callback);
+      },
+    });
+    Object.defineProperty(this.emitter, 'release', {
+      writable: false,
+      enumerable: false,
+      value: (callback?: () => void) => {
+        return this.slide.release(callback);
+      },
+    });
   }
 
   private getPreviewImageUrl (pageIndex: number) {
@@ -276,27 +291,19 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     return preview.src;
   }
 
-  private nextTick = () => {
-    this.isSyncing = false;
-    requestAnimationFrame(() => {
-      this.applySlideState().catch((error) => {
-        console.error('Error in applySlideState:', error);
-      });
-    });
-  };
-
-  private applySlideState = async () => {
+  private applySlideState = async (): Promise<void> => {
     if (this.isSyncing) {
+      requestAnimationFrame(this.applySlideState);
       return;
     }
 
     const lastSyncMessage = this.syncMessageQueue.pop();
     if (!lastSyncMessage) {
-      return this.nextTick();
+      return;
     }
 
-    this.syncMessageQueue = [];
     this.isSyncing = true;
+    this.syncMessageQueue = [];
     const { state, dispatch } = lastSyncMessage;
     let ignoreKeys: string[] | undefined = undefined;
     if ( dispatch.type === 'mediaPlay' || dispatch.type === 'mediaPause' || dispatch.type === 'mediaFullscreen') {
@@ -305,7 +312,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     if (this.slide.slideState.currentSlideIndex < 0 || state.currentSlideIndex < 0) {
       // @ts-ignore
       await this.slide.receiveSyncHandler(dispatch);
-      return this.nextTick();
     } else if (!deepEqual(this.slide.slideState, state, ignoreKeys)) {
       await this.slide.setSlideState(state);
       // @ts-ignore
@@ -313,7 +319,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     } else {
       this.slide.emit(SLIDE_EVENTS.syncReceive, dispatch);
     }
-    return this.nextTick();
+    this.isSyncing = false;
 
   };
 
@@ -358,7 +364,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
 
   private async onFocusInstance() {
     this.bindKeyBoardEvent();
-    // await slidePool.active(this.appId, this.slide);
+    await SlideApplication.slidePool.active(this.appId, this.slide);
   }
 
   private onRefocusInstance() {
@@ -380,6 +386,8 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     whiteboardApp.userManager = this.userManager;
     // @ts-ignore
     whiteboardApp.deleteSubDoc = this.deleteSubDoc;
+    // @ts-ignore
+    whiteboardApp.writableManager = this.writableManager;
 
     const json = await fetch(`${option.prefix}/${option.taskId}/jsonOutput/slide-1.json`).then(res => res.json());
     this.slideCount = json.slideCount;
@@ -419,11 +427,14 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     }
 
     this.whiteboard.setViewModeToMain();
-
+    for (let i = 0; i < json.slideCount; i++) {
+      this.whiteboardApp.addPage(String(i), true);
+    }
+    this.whiteboard.setViewModeToFree();
 
     this.slideContainer.setAttribute('builder', 'slide-builder');
 
-    // await slidePool.waitUntilReady(this.appId);
+    await SlideApplication.slidePool.waitUntilReady(this.appId);
     this.slide = new Slide({
       ...option.options,
       interactive: true,
@@ -471,8 +482,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
       if (slideIndex >= 0) {
         this.sideBar.pauseGetPreviewImageSchedule();
         this.whiteboardApp.emitter.view.style.opacity = '0';
-        this.whiteboardApp.emitter.addPage(`${slideIndex}`);
-        this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+        this.whiteboardApp.emitter.gotoPage(String(slideIndex));
         this.sideBar.hidden();
         this.footer.changeIconToPause();
         this.emitter.emit('renderStart', slideIndex);
@@ -485,8 +495,8 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         this.currentSlideIndex = slideIndex;
         this.whiteboardApp.emitter.view.style.opacity = '1';
         this.footer.setCurrentPageIndex(slideIndex);
-        // slidePool.active(this.appId, this.slide);
-        // slidePool.onRenderEnd(this.appId, this.window?.focused ?? false);
+        SlideApplication.slidePool.active(this.appId, this.slide);
+        SlideApplication.slidePool.onRenderEnd(this.appId, this.window?.focused ?? false);
         this.footer.changeIconToNextStep();
         this.emitter.emit('renderEnd', slideIndex);
       }
@@ -512,7 +522,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     } else {
       this.slide.renderSlide(1);
     }
-    this.permissions = new ForgeSlidePermissions(this.userManager, (userId: string) => {
+    this.permissions = new ForgeSlidePermissions(this.writableManager, this.userManager, (userId: string) => {
       return this.userMap(userId);
     });
     this.permissions.on('change', (userId, flags, value) => {
@@ -551,10 +561,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
       });
       this.bindKeyBoardEvent();
     }
-    // @ts-ignore
-    window.__forge_slide = this;
-    // @ts-ignore
-    window.slidePermissions = this.permissions;
     return Promise.resolve(undefined);
   }
 
@@ -573,7 +579,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     this.getMap(this.name).unobserve(this.onSlideEventHandler);
     this.permissions.dispose();
     this.footer.dispose();
-    // slidePool.remove(this.appId);
+    SlideApplication.slidePool.remove(this.appId);
   }
 
 }