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

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@netless/slide": "^1.4.15"
+    "@netless/slide": "^1.4.15",
+    "uuid": "^11.0.5",
+    "@netless/forge-room": "0.1.8",
+    "@netless/forge-whiteboard": "0.1.14"
   },
   "peerDependencies": {
     "eventemitter3": "^5.0.1",
     "yjs": "^13.6.18",
-    "uuid": "^11.0.5",
-    "@netless/forge-room": "0.1.8",
-    "@netless/forge-whiteboard": "0.1.14"
+    "@netless/forge-room": "0.1.8"
   },
   "keywords": [],
   "author": "",

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,11 +41,54 @@ export class SlideForge extends EventEmitter<SlideEvents> implements Application
 
     public readonly view!: HTMLDivElement;
     public readonly permissions!: ForgeSlidePermissions;
+    public readonly footView!: HTMLDivElement;
+    /**
+     * 当前页面索引, 从 0 开始
+     */
     public readonly pageIndex!: number;
-
+    /**
+     * 总页数
+     */
+    public readonly pageCount!: number;
     /**
      * 切换到参数指定页面, index 从 0 开始
      * @param {number} index 页面索引
      */
-    public goto!: (index: number) => Promise<void>
+    public goto!: (index: number) => void
+    /**
+     * 下一步, 如果已经是本页的最后一步, 则切换到下一页
+     */
+    public nextStep!: () => void
+    /**
+     * 上一步, 如果已经是本页的第一步, 则切换到上一页
+     */
+    public prevStep!: () => void
+    /**
+     * 下一页, 如果是最后一页, 则不执行任何操作
+     */
+    public nextPage!: () => void
+    /**
+     * 上一页, 如果是第一页, 则不执行任何操作
+     */
+    public prevPage!: () => 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> {
@@ -25,6 +33,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     static applicationName = Slide_APP_NAME;
 
     public readonly name: string = Slide_APP_NAME;
+    public readonly emitter: SlideForge = new SlideForge();
 
     private whiteboardApp!: WhiteboardApplication;
     private whiteboard!: Whiteboard;
@@ -37,9 +46,12 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     private sideBar: SideBarView;
     private slide!: Slide;
     private currentSlideIndex: number = 0;
+    private taskId: string = "";
+    private prefix: string = "";
 
     constructor() {
         super();
+        (window as any).emitter = this.emitter;
         this.rootView.setAttribute("data-forge-app", Slide_APP_NAME);
         this.rootView.style.background = "#f0f0f0f0";
         this.rootView.style.overflow = "hidden";
@@ -56,7 +68,9 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         this.footer = new FooterView();
         this.sideBar = new SideBarView();
         this.sideBar.on("pageChange", index => {
-            this.slide.renderSlide(index);
+            if (index > 0 && index <= this.slide.slideCount) {
+                this.slide.renderSlide(index);
+            }
         });
         this.footer.on("prevStep", () => {
             if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changeStep)) {
@@ -129,34 +143,154 @@ 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;
             }
         });
-        Object.defineProperty(this.emitter, "goto", {
+        Object.defineProperty(this.emitter, "pageCount", {
             get(): any {
-                return (index: number) => {
-                    if (index > 0 && index < this.slide.slideCount) {
-                        this.slide.renderSlide(index);
-                    }
-                };
+                return that.slide.slideCount;
+            }
+        });
+        Object.defineProperty(this.emitter, "goto", {
+            writable: false,
+            enumerable: false,
+            value: (pageIndex: number) => {
+                this.sideBar.emit("pageChange", pageIndex);
             }
         });
+        Object.defineProperty(this.emitter, "nextStep", {
+            writable: false,
+            enumerable: false,
+            value: () => {
+                this.footer.emit("nextStep");
+            }
+        })
+        Object.defineProperty(this.emitter, "prevStep", {
+            writable: false,
+            enumerable: false,
+            value: () => {
+                this.footer.emit("prevStep");
+            }
+        })
+        Object.defineProperty(this.emitter, "nextPage", {
+            writable: false,
+            enumerable: false,
+            value: () => {
+                this.footer.emit("nextPage");
+            }
+        })
+        Object.defineProperty(this.emitter, "prevPage", {
+            writable: false,
+            enumerable: false,
+            value: () => {
+                this.footer.emit("prevPage");
+            }
+        })
+        Object.defineProperty(this.emitter, "sideBarToggle", {
+            writable: false,
+            enumerable: false,
+            value: () => {
+                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`;
     }
 
-    emitter: SlideForge = new SlideForge();
+    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) => {
-        // console.log('%cstate', 'color: blue; font-size: 20px;');
-        // console.log(slideStateFromServer);
-        // console.log('%cevent', 'color: blue; font-size: 20px;');
-        // console.log(dispatchFromServer);
         if (this.slide.slideState.currentSlideIndex < 0) {
             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 {
@@ -178,6 +312,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;
@@ -220,7 +356,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
 
         if (option.inheritWhiteboardId) {
             whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
-            console.log("inheritWhiteboardId", option.inheritWhiteboardId);
         }
 
         this.whiteboard.setViewModeToMain();
@@ -248,25 +383,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) {
@@ -279,7 +425,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
             return this.userMap(userId);
         });
         this.permissions.on("change", (userId, flags, value) => {
-            console.log(userId, flags, value);
+            this.emitter.emit("permissionChange", userId, flags, value);
             if (this.userId === userId) {
                 if (flags.includes(ForgeSlidePermissionFlag.clickAnim)) {
                     this.slideContainer.style.pointerEvents = "auto";