@netless/forge-slide 0.1.0-alpha.0 → 0.1.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.1-alpha.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/Slide.ts

@@ -22,6 +22,18 @@ export interface SlideEvents  {
      * @param {number} pageIndex 页面索引
      */
     renderEnd: (pageIndex: number) => void;
+
+    /**
+     * 主序列动画完成时触发
+     * @param {number} animateIndex 主动画索引
+     */
+    mainSeqStepEnd: (animateIndex: number) => void;
+
+    /**
+     * 主序列动画开始时触发
+     * @param {number} animateIndex 主动画索引
+     */
+    mainSeqStepStart: (animateIndex: number) => void;
 }
 
 
@@ -29,6 +41,7 @@ export class SlideForge extends EventEmitter<SlideEvents> implements Application
 
     public readonly view!: HTMLDivElement;
     public readonly permissions!: ForgeSlidePermissions;
+    public readonly footView!: HTMLDivElement;
     /**
      * 当前页面索引, 从 0 开始
      */
@@ -41,25 +54,41 @@ export class SlideForge extends EventEmitter<SlideEvents> implements Application
      * 切换到参数指定页面, index 从 0 开始
      * @param {number} index 页面索引
      */
-    public goto!: (index: number) => Promise<void>
+    public goto!: (index: number) => void
     /**
      * 下一步, 如果已经是本页的最后一步, 则切换到下一页
      */
-    public nextStep!: () => Promise<void>
+    public nextStep!: () => void
     /**
      * 上一步, 如果已经是本页的第一步, 则切换到上一页
      */
-    public prevStep!: () => Promise<void>
+    public prevStep!: () => void
     /**
      * 下一页, 如果是最后一页, 则不执行任何操作
      */
-    public nextPage!: () => Promise<void>
+    public nextPage!: () => void
     /**
      * 上一页, 如果是第一页, 则不执行任何操作
      */
-    public prevPage!: () => Promise<void>
+    public prevPage!: () => void
     /**
      * 切换侧栏显示状态
      */
-    public sideBarToggle!: () => Promise<void>
+    public sideBarToggle!: () => void
+
+    /**
+     * 获取预览图图片内容, base64 编码
+     * @param {number} index 页面索引
+     */
+    public imgContent!: (index: number) => Promise<string>;
+    /**
+     * 获取预览图图片链接
+     * @param {number} index 页面索引
+     */
+    public imgUrl!: (index: number) => Promise<string>;
+    /**
+     * 获取预览图图片尺寸
+     * @param {number} index 页面索引
+     */
+    public imgSize!: (index: number) => Promise<{width: number, height: number}>;
 }

package/src/SlideApplication.ts

@@ -7,6 +7,7 @@ import {FooterView} from "./FoorerView";
 import * as Y from "yjs";
 import {SideBarView} from "./SiderBarView";
 import {deepEqual, delay} from "./utils";
+import { kvStore } from "@netless/forge-room";
 
 export interface SlideApplicationOption {
     prefix: string;
@@ -18,6 +19,13 @@ export interface SlideApplicationOption {
     inheritWhiteboardId?: string;
 }
 
+interface PreviewImage {
+    url: string;
+    src: string;
+    width: number;
+    height: number;
+}
+
 export const Slide_APP_NAME = "forge_slide";
 
 export class SlideApplication extends AbstractApplication<SlideApplicationOption, SlideForge> {
@@ -38,6 +46,8 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     private sideBar: SideBarView;
     private slide!: Slide;
     private currentSlideIndex: number = 0;
+    private taskId: string = "";
+    private prefix: string = "";
 
     constructor() {
         super();
@@ -118,6 +128,10 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
 
         this.rootView.appendChild(this.contentContainer);
 
+        this.permissions.on("change", (userId, flags, value) => {
+            this.emitter.emit("permissionChange", userId, flags, value);
+        })
+
         this.emitter.on("renderStart", pageIndex => {
             this.footer.prevPageState(pageIndex !== 0);
         });
@@ -133,6 +147,11 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
                 return that.permissions;
             }
         });
+        Object.defineProperty(this.emitter, "footView", {
+            get(): any {
+                return that.footer.root;
+            }
+        })
         Object.defineProperty(this.emitter, "pageIndex", {
             get(): any {
                 return that.currentSlideIndex;
@@ -185,6 +204,90 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
                 this.footer.emit("sideBarToggle");
             }
         })
+        Object.defineProperty(this.emitter, "imgContent", {
+            writable: false,
+            enumerable: false,
+            value: (pageIndex: number) => {
+                return this.getImageContent(pageIndex);
+            }
+        })
+
+        Object.defineProperty(this.emitter, "imgUrl", {
+            writable: false,
+            enumerable: false,
+            value: (pageIndex: number) => {
+                return this.getImageUrl(pageIndex);
+            }
+        })
+
+        Object.defineProperty(this.emitter, "imgSize", {
+            writable: false,
+            enumerable: false,
+            value: (pageIndex: number) => {
+                return this.getImageSize(pageIndex);
+            }
+        })
+    }
+
+    private async getPreviewImage(imageUrl: string) {
+        const image = fetch(imageUrl);
+        return await image.then(res => res.blob()).then(blob => {
+            return new Promise<PreviewImage>(resolve => {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    const base64Data = reader.result as string;
+                    const img = document.createElement("img");
+                    img.src = base64Data;
+                    img.onload = () => {
+                        resolve({
+                            url: imageUrl,
+                            src: base64Data,
+                            width: img.width,
+                            height: img.height,
+                        });
+                    }
+                }
+                reader.readAsDataURL(blob);
+            })
+        });
+    }
+
+    private async getImageUrl(pageIndex: number) {
+        return `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+    }
+
+    private async getImageSize(pageIndex: number) {
+        const imageUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+        let preview: PreviewImage | null = null;
+        try {
+            const result = await kvStore.getItem(imageUrl);
+            preview = result ? JSON.parse(result) : null;
+        } catch (e) {
+            console.warn("kvStore getItem error", e);
+        }
+        if (preview) {
+            return { width: preview.width, height: preview.height };
+        }
+        preview = await this.getPreviewImage(imageUrl);
+        await kvStore.setItem(imageUrl, JSON.stringify(preview));
+        return { width: preview.width, height: preview.height };
+    }
+
+    private async getImageContent(pageIndex: number) {
+        const imageUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+        let preview: PreviewImage | null = null;
+        try {
+            const result = await kvStore.getItem(imageUrl);
+            preview = result ? JSON.parse(result) : null;
+        } catch (e) {
+            console.warn("kvStore getItem error", e);
+        }
+        if (preview) {
+            return preview.src;
+        }
+        preview = await this.getPreviewImage(imageUrl);
+        await kvStore.setItem(imageUrl, JSON.stringify(preview));
+        return preview.src;
     }
 
     private applySlideState = async (slideState: any, lastDispatch: any) => {
@@ -192,7 +295,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
             this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
             return;
         }
-        console.log('%cisEqual', 'color: blue; font-size: 20px;', deepEqual(this.slide.slideState, slideState));
         if (this.slide.slideState.currentSlideIndex > 0 && deepEqual(this.slide.slideState, slideState)) {
             this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
         } else {
@@ -214,6 +316,8 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     }
 
     public async initialize(option: SlideApplicationOption): Promise<void> {
+        this.prefix = option.prefix;
+        this.taskId = option.taskId;
         const whiteboardApp = new WhiteboardApplication();
         // @ts-ignore
         whiteboardApp.roomDoc = this.roomDoc;
@@ -256,7 +360,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
 
         if (option.inheritWhiteboardId) {
             whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
-            console.log("inheritWhiteboardId", option.inheritWhiteboardId);
         }
 
         this.whiteboard.setViewModeToMain();
@@ -284,25 +387,36 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
             })
         })
 
+        this.slide.on("mainSeqStepStart", (animateIndex: number) => {
+            this.emitter.emit("mainSeqStepStart", animateIndex);
+        })
+
+        this.slide.on("mainSeqStepEnd", (animateIndex: number) => {
+            this.emitter.emit("mainSeqStepEnd", animateIndex);
+        })
+
         this.slide.on("renderStart", (slideIndex) => {
             this.whiteboardApp.emitter.view.style.opacity = "0";
             this.whiteboardApp.emitter.addPage(`${slideIndex}`);
             this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+            this.emitter.emit("renderStart", slideIndex);
         })
 
         this.slide.on("renderEnd", (slideIndex) => {
             this.currentSlideIndex = slideIndex;
             this.whiteboardApp.emitter.view.style.opacity = "1";
+            this.emitter.emit("renderEnd", slideIndex);
         });
 
-        this.slide.on("stateChange", (state) => {
-            this.getMap(this.name).set("slideState", state)
-        })
+       this.slide.on("stateChange", (state) => {
+           this.getMap(this.name).set("slideState", state)
+       })
 
         this.getMap(this.name).observe(this.onSlideEventHandler);
 
         (window as any).slide = this.slide;
         (window as any).slideWhiteboard = this.whiteboardApp;
+        (window as any).forgeSlide = this;
 
         const syncSlide = this.getMap(this.name).get("slideState");
         if (syncSlide && syncSlide.taskId === option.taskId) {
@@ -315,7 +429,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
             return this.userMap(userId);
         });
         this.permissions.on("change", (userId, flags, value) => {
-            console.log(userId, flags, value);
             if (this.userId === userId) {
                 if (flags.includes(ForgeSlidePermissionFlag.clickAnim)) {
                     this.slideContainer.style.pointerEvents = "auto";