@netless/app-slide 0.1.0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,11 +11,11 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.2.7",
+    "@netless/slide": "^0.2.10",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.0",
     "side-effect-manager": "^0.1.5",
-    "vanilla-lazyload": "^17.5.0"
+    "vanilla-lazyload": "^17.6.1"
   },
   "scripts": {
     "types": "cross-env NODE_ENV=production tsc --declaration --emitDeclarationOnly --outDir dist",

package/src/SlideController/index.ts

@@ -14,7 +14,7 @@ import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typin
 
 import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
-import { clamp, deepClone } from "../utils/helpers";
+import { clamp } from "../utils/helpers";
 import { cachedGetBgColor } from "../utils/bgcolor";
 import { logger, log, verbose } from "../utils/logger";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
@@ -55,6 +55,9 @@ export class SlideController {
 
   private syncStateOnceFlag: boolean;
 
+  private visible: boolean;
+  private savedIsFrozen: boolean;
+
   public constructor({
     context,
     anchor,
@@ -73,6 +76,8 @@ export class SlideController {
     this.slide = this.createSlide(anchor);
     // the adder does not need to sync state
     this.syncStateOnceFlag = !this.context.isAddApp;
+    this.visible = document.visibilityState === "visible";
+    this.savedIsFrozen = false;
     this.initialize();
   }
 
@@ -100,13 +105,16 @@ export class SlideController {
 
   private kickStart() {
     const { context, slide } = this;
-    const { taskId, url, state } = { ...EmptyAttributes, ...this.context.getAttributes() };
+    if (context.getIsWritable()) {
+      context.storage.ensureState(EmptyAttributes);
+    }
+    const { taskId, url, state } = context.storage.state;
     slide.setResource(taskId, url || DefaultUrl);
     if (state) {
       // if we already have state, try restore from it
-      log("[Slide] init with state", deepClone(state));
+      log("[Slide] init with state", state);
       this.syncStateOnceFlag = false;
-      slide.setSlideState(deepClone(state));
+      slide.setSlideState(state);
     } else if (context.isAddApp) {
       // otherwise, maybe this slide is just added, let the adder kick start first render
       log("[Slide] init by renderSlide", 1);
@@ -124,19 +132,14 @@ export class SlideController {
     // it is possible that we miss the first `renderSlide(1)` event
     // and the attributes has no value yet, so we need to sync state
     // when there's state change. we only have to do it once
-    this.sideEffect.add(() => {
-      const disposer = context.mobxUtils.reaction(
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        () => context.getAttributes()!.state,
-        () => {
+    const disposerId = this.sideEffect.addDisposer(
+      context.storage.addStateChangedListener(() => {
+        if (context.storage.state.state) {
           this.syncStateOnce();
-          disposer();
+          this.sideEffect.flush(disposerId);
         }
-      );
-      // mobx already has a "disposed" flag in reaction,
-      // so we don't need to check it here
-      return disposer;
-    });
+      })
+    );
 
     this.sideEffect.add(() =>
       context.addMagixEventListener(SLIDE_EVENTS.syncDispatch, this.magixEventListener, {
@@ -154,6 +157,11 @@ export class SlideController {
     slide.on(SLIDE_EVENTS.syncDispatch, this.onSyncDispatch);
 
     slide.on(SLIDE_EVENTS.renderEnd, this.resolveReady);
+
+    this.sideEffect.add(() => {
+      document.addEventListener("visibilitychange", this.onVisibilityChange);
+      return () => document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    });
   }
 
   private onSyncDispatch = (event: SyncEvent) => {
@@ -179,10 +187,13 @@ export class SlideController {
   private syncStateOnce() {
     // sync state before the first event, so that they can be in the correct order
     if (this.syncStateOnceFlag) {
-      const { state } = { ...EmptyAttributes, ...this.context.storage.state };
+      if (this.context.getIsWritable()) {
+        this.context.storage.ensureState(EmptyAttributes);
+      }
+      const { state } = this.context.storage.state;
       if (state) {
-        log("[Slide] sync with state (once)", deepClone(state));
-        this.slide.setSlideState(deepClone(state));
+        log("[Slide] sync with state (once)", state);
+        this.slide.setSlideState(state);
         this.syncStateOnceFlag = false;
       }
     }
@@ -307,6 +318,7 @@ export class SlideController {
   };
 
   public unfreeze = async () => {
+    if (!this.visible) return;
     if (this.ready) {
       log("[Slide] unfreeze", this.context.appId);
       if (this.freezePromise) {
@@ -319,4 +331,17 @@ export class SlideController {
       this._toFreeze = -1;
     }
   };
+
+  private onVisibilityChange = async () => {
+    if (!(this.visible = document.visibilityState === "visible")) {
+      this.savedIsFrozen = this.freezePromise ? this._toFreeze === 1 : this.isFrozen;
+      log("[Slide] freeze because tab becomes invisible");
+      this.freeze();
+    } else {
+      log("[Slide] unfreeze because tab becomes visible", { savedIsFrozen: this.savedIsFrozen });
+      if (!this.savedIsFrozen) {
+        this.unfreeze();
+      }
+    }
+  };
 }

package/src/SlideDocsViewer/index.ts

@@ -169,6 +169,15 @@ export class SlideDocsViewer {
           height,
           animationMode: "immediately" as AnimationMode.Immediately,
         });
+        this.whiteboardView.setCameraBound({
+          damping: 1,
+          maxContentMode: () => this.whiteboardView.camera.scale,
+          minContentMode: () => this.whiteboardView.camera.scale,
+          centerX: 0,
+          centerY: 0,
+          width,
+          height,
+        });
         if (!this.isViewMounted) {
           this.isViewMounted = true;
           console.log("[Slide] mount whiteboard view");