@netless/app-slide 0.2.7 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.7",
+  "version": "0.2.10",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,11 +10,10 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/app-shared": "0.1.2",
-    "@netless/slide": "^0.6.1",
+    "@netless/slide": "^0.6.5",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
-    "side-effect-manager": "^1.1.3",
+    "side-effect-manager": "^1.2.1",
     "vanilla-lazyload": "^17.8.3"
   },
   "scripts": {

package/src/SlideController/index.ts

@@ -31,6 +31,7 @@ export const EmptyAttributes: Attributes = {
 export interface SlideControllerOptions {
   context: AppContext<Attributes, MagixEvents, AppOptions>;
   anchor: HTMLDivElement;
+  onRenderEnd: () => void;
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
   onTransitionEnd: () => void;
@@ -252,7 +253,6 @@ export class SlideController {
       anchor,
       interactive: true,
       mode: "interactive",
-      resize: true,
       controller: logger.enable,
       enableGlobalClick: true,
       renderOptions: {

package/src/SlideDocsViewer/index.ts

@@ -54,10 +54,12 @@ export class SlideDocsViewer {
 
   public $slide!: HTMLDivElement;
   public $whiteboardView!: HTMLDivElement;
+  public $overlay!: HTMLDivElement;
 
   public render() {
     this.viewer.$content.appendChild(this.renderSlideContainer());
     this.viewer.$content.appendChild(this.renderWhiteboardView());
+    this.viewer.$content.appendChild(this.renderOverlay());
     this.sideEffect.addEventListener(window, "keydown", ev => {
       if (this.box.focus && this.slideController) {
         switch (ev.key) {
@@ -79,6 +81,15 @@ export class SlideDocsViewer {
     });
   }
 
+  protected renderOverlay(): HTMLDivElement {
+    if (!this.$overlay) {
+      const $overlay = document.createElement("div");
+      $overlay.className = this.wrapClassName("overlay");
+      this.$overlay = $overlay;
+    }
+    return this.$overlay;
+  }
+
   protected renderSlideContainer(): HTMLDivElement {
     if (!this.$slide) {
       const $slide = document.createElement("div");
@@ -103,6 +114,7 @@ export class SlideDocsViewer {
 
     this.slideController = this.mountSlideController({
       anchor: this.$slide,
+      onRenderEnd: this.onRenderEnd,
       onTransitionStart: this.viewer.setPlaying,
       onTransitionEnd: this.viewer.setPaused,
       onReady: this.refreshPages,
@@ -120,9 +132,15 @@ export class SlideDocsViewer {
 
   protected onError = ({ error }: { error: Error }) => {
     this.viewer.setPaused();
+    this.$overlay.textContent = `Error on slide[page=${this.slideController?.page}]: ${error.message}`;
+    this.$overlay.style.opacity = "1";
     logger.warn("[Slide] render error", error);
   };
 
+  protected onRenderEnd = () => {
+    this.$overlay.style.opacity = "";
+  };
+
   protected refreshPages = () => {
     if (this.slideController) {
       this.viewer.pages = createDocsViewerPages(this.slideController.slide);

package/src/SlideDocsViewer/style.scss

@@ -9,3 +9,19 @@ $namespace: "netless-app-slide";
   z-index: 100;
   overflow: hidden;
 }
+
+.#{$namespace}-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.25);
+  transition: opacity 0.3s;
+  opacity: 0;
+  pointer-events: none;
+}

package/src/SlidePreviewer/index.ts

@@ -119,7 +119,6 @@ export class SlidePreviewer {
       anchor: this.$slide,
       interactive: true,
       mode: "local",
-      resize: true,
       controller: this.debug,
       enableGlobalClick: true,
       renderOptions: {

package/src/index.ts

@@ -141,6 +141,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
         }
         const page = slideController.slide.slideState.currentSlideIndex;
         log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
+        slideController.slide.on("renderEnd", options.onRenderEnd);
       });
       return slideController;
     };