@netless/app-slide 0.0.21 → 0.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.21",
+  "version": "0.0.25",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.1.25",
-    "side-effect-manager": "^0.1.3",
+    "@netless/slide": "^0.1.30",
+    "side-effect-manager": "^0.1.5",
     "vanilla-lazyload": "^17.5.0"
   },
   "scripts": {

package/src/SlideController/helpers.ts

@@ -35,5 +35,14 @@ export function syncSceneWithSlide(
     room.putScenes(baseScenePath, scenes);
   }
 
-  context.setScenePath(scenePath);
+  let currentScenePath: string;
+  if (context.getBox().focus) {
+    currentScenePath = room.state.sceneState.scenePath;
+  } else {
+    currentScenePath = context.getView()?.focusScenePath || "";
+  }
+
+  if (currentScenePath !== scenePath) {
+    context.setScenePath(scenePath);
+  }
 }

package/src/SlideController/index.ts

@@ -50,6 +50,8 @@ export class SlideController {
   private readonly onTransitionEnd: SlideControllerOptions["onTransitionEnd"];
   private readonly onError: SlideControllerOptions["onError"];
 
+  private syncStateOnceFlag: boolean;
+
   public constructor({
     context,
     anchor,
@@ -68,6 +70,8 @@ export class SlideController {
     this.player = this.room ? undefined : (context.getDisplayer() as Player);
     this.debug = import.meta.env.DEV || !!context.getAppOptions()?.debug;
     this.slide = this.createSlide(anchor);
+    // the adder does not need to sync state
+    this.syncStateOnceFlag = !this.context.isAddApp;
     this.initialize();
   }
 
@@ -109,6 +113,23 @@ export class SlideController {
   private registerEventListeners() {
     const { context, slide } = this;
 
+    // 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,
+        () => {
+          this.syncStateOnce();
+          disposer();
+        }
+      );
+      // mobx already has a "disposed" flag in reaction,
+      // so we don't need to check it here
+      return disposer;
+    });
+
     this.sideEffect.add(() => {
       const displayer = context.getDisplayer();
       displayer.addMagixEventListener(this.channel, this.magixEventListener, {
@@ -150,12 +171,14 @@ export class SlideController {
         if (this.debug) {
           console.log("[Slide] receive", payload);
         }
-        this.slide.emit(SLIDE_EVENTS.syncReceive, payload);
+        // only emit the event if the slide state is sync-ed
+        if (!this.syncStateOnceFlag) {
+          this.slide.emit(SLIDE_EVENTS.syncReceive, payload);
+        }
       }
     }
   };
 
-  private syncStateOnceFlag = true;
   private syncStateOnce() {
     // sync state before the first event, so that they can be in the correct order
     if (this.syncStateOnceFlag) {
@@ -222,6 +245,7 @@ export class SlideController {
         autoFPS: true,
         autoResolution: true,
         resolution: this.context.getAppOptions()?.resolution,
+        transactionBgColor: "#f9f9fc",
       },
       timestamp: this.timestamp,
     });
@@ -238,7 +262,7 @@ export class SlideController {
     this.sideEffect.flushAll();
     if (!this.destroyed) {
       if (this.debug) {
-        console.log("[Slide] destroy (once)");
+        console.log("[Slide] destroy slide (once)");
       }
       this.slide.destroy();
       this.destroyed = true;

package/src/index.ts

@@ -70,7 +70,7 @@ const SlideApp: NetlessApp<Attributes> = {
       box,
       view,
       mountSlideController,
-      mountWhiteboard: dom => context.mountView(dom),
+      mountWhiteboard: context.mountView.bind(context),
     });
 
     if (import.meta.env.DEV) {