@netless/app-slide 0.2.13 → 0.2.15

package/dist/utils/freezer.d.ts

@@ -1,4 +1,4 @@
-import type { RegisterParams } from "@netless/window-manager";
+import type { ReadonlyTeleBox, RegisterParams } from "@netless/window-manager";
 export interface FreezableSlide {
     freeze: () => void;
     unfreeze: () => void;
@@ -7,9 +7,10 @@ export declare let useFreezer: boolean;
 export declare const FreezerLength = 2;
 export declare const apps: {
     map: Map<string, FreezableSlide>;
+    boxes: Map<string, ReadonlyTeleBox>;
     queue: string[];
     validateQueue(): void;
-    set(appId: string, slide: FreezableSlide): void;
+    set(appId: string, slide: FreezableSlide, box: ReadonlyTeleBox): void;
     delete(appId: string): void;
     focus(appId: string): void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",

package/src/DocsViewer/index.ts

@@ -71,6 +71,7 @@ export class DocsViewer {
   }
 
   public destroy(): void {
+    this.previewLazyLoad?.destroy();
     this.sideEffect.flushAll();
     this.unmount();
   }
@@ -126,13 +127,6 @@ export class DocsViewer {
       const $preview = document.createElement("div");
       $preview.className = this.wrapClassName("preview") + " tele-fancy-scrollbar";
       this.$preview = $preview;
-      this.sideEffect.add(() => {
-        this.previewLazyLoad = new LazyLoad({
-          container: this.$preview,
-          elements_selector: `.${this.wrapClassName("preview-page>img")}`,
-        });
-        return () => this.previewLazyLoad?.destroy();
-      });
 
       this.refreshPreview();
 
@@ -347,6 +341,10 @@ export class DocsViewer {
         "." + this.wrapClassName(`preview-page-${this.pageIndex}`)
       );
       if ($previewPage) {
+        this.previewLazyLoad ||= new LazyLoad({
+          container: this.$preview,
+          elements_selector: `.${this.wrapClassName("preview-page>img")}`,
+        });
         this.$preview.scrollTo({
           top: $previewPage.offsetTop - 16,
         });

package/src/index.ts

@@ -126,7 +126,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
         ...options,
         onPageChanged,
       });
-      if (useFreezer) apps.set(context.appId, slideController);
+      if (useFreezer) apps.set(context.appId, slideController, box);
       logger.setAppController(context.appId, slideController);
       if (import.meta.env.DEV) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/utils/freezer.ts

@@ -1,4 +1,4 @@
-import type { RegisterParams } from "@netless/window-manager";
+import type { ReadonlyTeleBox, RegisterParams } from "@netless/window-manager";
 import { log } from "./logger";
 
 export interface FreezableSlide {
@@ -15,8 +15,15 @@ const inspect = (arr: string[]) => {
 
 export const apps = {
   map: new Map<string, FreezableSlide>(),
+  boxes: new Map<string, ReadonlyTeleBox>(),
   queue: [] as string[],
   validateQueue() {
+    // queue = [5, 4, 3, 2, 1]
+    this.queue.sort((a, b) => {
+      const za = this.boxes.get(a)?.zIndex ?? 0;
+      const zb = this.boxes.get(b)?.zIndex ?? 0;
+      return -(za - zb);
+    });
     log("[Slide] freezer: validate", inspect(this.queue));
     while (this.queue.length > FreezerLength) {
       const appId = this.queue.pop() as string;
@@ -27,9 +34,10 @@ export const apps = {
       }
     }
   },
-  set(appId: string, slide: FreezableSlide) {
+  set(appId: string, slide: FreezableSlide, box: ReadonlyTeleBox) {
     log("[Slide] freezer: add", appId, inspect(this.queue));
     this.map.set(appId, slide);
+    this.boxes.set(appId, box);
     if (!this.queue.includes(appId)) {
       this.queue.unshift(appId);
     }
@@ -37,6 +45,7 @@ export const apps = {
   },
   delete(appId: string) {
     this.map.delete(appId);
+    this.boxes.delete(appId);
     this.queue = this.queue.filter(id => id !== appId);
     log("[Slide] freezer: delete", appId, inspect(this.queue));
   },