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

package/dist/Slide.d.ts

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

package/dist/Slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["../src/Slide.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEzF,MAAM,WAAW,WAAW;IACxB;;;;;OAKG;IACH,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7F;;;OAGG;IACH,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAGD,qBAAa,UAAW,SAAQ,YAAY,CAAC,WAAW,CAAE,YAAW,uBAAuB;IAExF,SAAgB,IAAI,EAAG,cAAc,CAAC;IACtC,SAAgB,WAAW,EAAG,qBAAqB,CAAC;IACpD,SAAgB,SAAS,EAAG,MAAM,CAAC;IAEnC;;;OAGG;IACI,IAAI,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACjD"}
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["../src/Slide.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEzF,MAAM,WAAW,WAAW;IACxB;;;;;OAKG;IACH,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7F;;;OAGG;IACH,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,cAAc,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/C;;;OAGG;IACH,gBAAgB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAGD,qBAAa,UAAW,SAAQ,YAAY,CAAC,WAAW,CAAE,YAAW,uBAAuB;IAExF,SAAgB,IAAI,EAAG,cAAc,CAAC;IACtC,SAAgB,WAAW,EAAG,qBAAqB,CAAC;IACpD,SAAgB,QAAQ,EAAG,cAAc,CAAC;IAC1C;;OAEG;IACH,SAAgB,SAAS,EAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAgB,SAAS,EAAG,MAAM,CAAC;IACnC;;;OAGG;IACI,IAAI,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC;;OAEG;IACI,QAAQ,EAAG,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACI,QAAQ,EAAG,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACI,QAAQ,EAAG,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACI,QAAQ,EAAG,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACI,aAAa,EAAG,MAAM,IAAI,CAAA;IAEjC;;;OAGG;IACI,UAAU,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACvD;;;OAGG;IACI,MAAM,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACnD;;;OAGG;IACI,OAAO,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;CAChF"}

package/dist/SlideApplication.d.ts

@@ -14,6 +14,7 @@ export declare const Slide_APP_NAME = "forge_slide";
 export declare class SlideApplication extends AbstractApplication<SlideApplicationOption, SlideForge> {
     static applicationName: string;
     readonly name: string;
+    readonly emitter: SlideForge;
     private whiteboardApp;
     private whiteboard;
     private rootView;
@@ -25,8 +26,13 @@ export declare class SlideApplication extends AbstractApplication<SlideApplicati
     private sideBar;
     private slide;
     private currentSlideIndex;
+    private taskId;
+    private prefix;
     constructor();
-    emitter: SlideForge;
+    private getPreviewImage;
+    private getImageUrl;
+    private getImageSize;
+    private getImageContent;
     private applySlideState;
     private onSlideEventHandler;
     initialize(option: SlideApplicationOption): Promise<void>;

package/dist/SlideApplication.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideApplication.d.ts","sourceRoot":"","sources":["../src/SlideApplication.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAOnC,MAAM,WAAW,sBAAsB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAE5C,qBAAa,gBAAiB,SAAQ,mBAAmB,CAAC,sBAAsB,EAAE,UAAU,CAAC;IAEzF,MAAM,CAAC,eAAe,SAAkB;IAExC,SAAgB,IAAI,EAAE,MAAM,CAAkB;IAE9C,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,gBAAgB,CAAiD;IACzE,OAAO,CAAC,mBAAmB,CAAiD;IAC5E,OAAO,CAAC,cAAc,CAAiD;IACvE,OAAO,CAAC,WAAW,CAAyB;IAC5C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,iBAAiB,CAAa;;IA6GtC,OAAO,EAAE,UAAU,CAAoB;IAEvC,OAAO,CAAC,eAAe,CAiBtB;IAED,OAAO,CAAC,mBAAmB,CAS1B;IAEY,UAAU,CAAC,MAAM,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC;IAwHtE,OAAO,CAAC,OAAO;IAIF,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CASxC"}
+{"version":3,"file":"SlideApplication.d.ts","sourceRoot":"","sources":["../src/SlideApplication.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAQnC,MAAM,WAAW,sBAAsB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;AASD,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAE5C,qBAAa,gBAAiB,SAAQ,mBAAmB,CAAC,sBAAsB,EAAE,UAAU,CAAC;IAEzF,MAAM,CAAC,eAAe,SAAkB;IAExC,SAAgB,IAAI,EAAE,MAAM,CAAkB;IAC9C,SAAgB,OAAO,EAAE,UAAU,CAAoB;IAEvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,QAAQ,CAAiD;IACjE,OAAO,CAAC,gBAAgB,CAAiD;IACzE,OAAO,CAAC,mBAAmB,CAAiD;IAC5E,OAAO,CAAC,cAAc,CAAiD;IACvE,OAAO,CAAC,WAAW,CAAyB;IAC5C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,iBAAiB,CAAa;IACtC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,MAAM,CAAc;;YAsLd,eAAe;YAuBf,WAAW;YAIX,YAAY;YAiBZ,eAAe;IAiB7B,OAAO,CAAC,eAAe,CAYtB;IAED,OAAO,CAAC,mBAAmB,CAS1B;IAEY,UAAU,CAAC,MAAM,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC;IAmItE,OAAO,CAAC,OAAO;IAIF,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CASxC"}

package/dist/index.esm.js

@@ -66585,12 +66585,55 @@ import EventEmitter14 from "eventemitter3";
 var SlideForge = class extends EventEmitter14 {
   view;
   permissions;
+  footView;
+  /**
+   * 当前页面索引, 从 0 开始
+   */
   pageIndex;
+  /**
+   * 总页数
+   */
+  pageCount;
   /**
    * 切换到参数指定页面, index 从 0 开始
    * @param {number} index 页面索引
    */
   goto;
+  /**
+   * 下一步, 如果已经是本页的最后一步, 则切换到下一页
+   */
+  nextStep;
+  /**
+   * 上一步, 如果已经是本页的第一步, 则切换到上一页
+   */
+  prevStep;
+  /**
+   * 下一页, 如果是最后一页, 则不执行任何操作
+   */
+  nextPage;
+  /**
+   * 上一页, 如果是第一页, 则不执行任何操作
+   */
+  prevPage;
+  /**
+   * 切换侧栏显示状态
+   */
+  sideBarToggle;
+  /**
+   * 获取预览图图片内容, base64 编码
+   * @param {number} index 页面索引
+   */
+  imgContent;
+  /**
+   * 获取预览图图片链接
+   * @param {number} index 页面索引
+   */
+  imgUrl;
+  /**
+   * 获取预览图图片尺寸
+   * @param {number} index 页面索引
+   */
+  imgSize;
 };
 
 // src/ForgeSlidePermession.ts
@@ -66934,10 +66977,12 @@ async function delay2(time) {
 }
 
 // src/SlideApplication.ts
+import { kvStore } from "@netless/forge-room";
 var Slide_APP_NAME = "forge_slide";
 var SlideApplication = class extends AbstractApplication2 {
   static applicationName = Slide_APP_NAME;
   name = Slide_APP_NAME;
+  emitter = new SlideForge();
   whiteboardApp;
   whiteboard;
   rootView = document.createElement("div");
@@ -66949,8 +66994,11 @@ var SlideApplication = class extends AbstractApplication2 {
   sideBar;
   slide;
   currentSlideIndex = 0;
+  taskId = "";
+  prefix = "";
   constructor() {
     super();
+    window.emitter = this.emitter;
     this.rootView.setAttribute("data-forge-app", Slide_APP_NAME);
     this.rootView.style.background = "#f0f0f0f0";
     this.rootView.style.overflow = "hidden";
@@ -66963,7 +67011,9 @@ var SlideApplication = class extends AbstractApplication2 {
     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(1 /* changeStep */)) {
@@ -67018,6 +67068,9 @@ var SlideApplication = class extends AbstractApplication2 {
       }
     });
     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);
     });
@@ -67032,28 +67085,147 @@ var SlideApplication = class extends AbstractApplication2 {
         return that.permissions;
       }
     });
+    Object.defineProperty(this.emitter, "footView", {
+      get() {
+        return that.footer.root;
+      }
+    });
     Object.defineProperty(this.emitter, "pageIndex", {
       get() {
         return that.currentSlideIndex;
       }
     });
-    Object.defineProperty(this.emitter, "goto", {
+    Object.defineProperty(this.emitter, "pageCount", {
       get() {
-        return (index) => {
-          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) => {
+        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) => {
+        return this.getImageContent(pageIndex);
+      }
+    });
+    Object.defineProperty(this.emitter, "imgUrl", {
+      writable: false,
+      enumerable: false,
+      value: (pageIndex) => {
+        return this.getImageUrl(pageIndex);
+      }
+    });
+    Object.defineProperty(this.emitter, "imgSize", {
+      writable: false,
+      enumerable: false,
+      value: (pageIndex) => {
+        return this.getImageSize(pageIndex);
       }
     });
   }
-  emitter = new SlideForge();
+  async getPreviewImage(imageUrl) {
+    const image = fetch(imageUrl);
+    return await image.then((res) => res.blob()).then((blob) => {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64Data = reader.result;
+          const img = document.createElement("img");
+          img.src = base64Data;
+          img.onload = () => {
+            resolve({
+              url: imageUrl,
+              src: base64Data,
+              width: img.width,
+              height: img.height
+            });
+          };
+        };
+        reader.readAsDataURL(blob);
+      });
+    });
+  }
+  async getImageUrl(pageIndex) {
+    return `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+  }
+  async getImageSize(pageIndex) {
+    const imageUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+    let preview = 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 };
+  }
+  async getImageContent(pageIndex) {
+    const imageUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+    let preview = 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;
+  }
   applySlideState = async (slideState, lastDispatch) => {
     if (this.slide.slideState.currentSlideIndex < 0) {
       this.slide.emit(import_slide.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(import_slide.SLIDE_EVENTS.syncReceive, lastDispatch);
     } else {
@@ -67073,6 +67245,8 @@ var SlideApplication = class extends AbstractApplication2 {
     }
   };
   async initialize(option) {
+    this.prefix = option.prefix;
+    this.taskId = option.taskId;
     const whiteboardApp = new WhiteboardApplication();
     whiteboardApp.roomDoc = this.roomDoc;
     whiteboardApp.appId = `${option.taskId}_wb`;
@@ -67106,7 +67280,6 @@ var SlideApplication = class extends AbstractApplication2 {
     this.contentContainer.appendChild(this.sideBar.root);
     if (option.inheritWhiteboardId) {
       whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
-      console.log("inheritWhiteboardId", option.inheritWhiteboardId);
     }
     this.whiteboard.setViewModeToMain();
     this.slideContainer.setAttribute("builder", "slide-builder");
@@ -67129,14 +67302,22 @@ var SlideApplication = class extends AbstractApplication2 {
         dispatch: event
       });
     });
+    this.slide.on("mainSeqStepStart", (animateIndex) => {
+      this.emitter.emit("mainSeqStepStart", animateIndex);
+    });
+    this.slide.on("mainSeqStepEnd", (animateIndex) => {
+      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);
@@ -67144,6 +67325,7 @@ var SlideApplication = class extends AbstractApplication2 {
     this.getMap(this.name).observe(this.onSlideEventHandler);
     window.slide = this.slide;
     window.slideWhiteboard = this.whiteboardApp;
+    window.forgeSlide = this;
     const syncSlide = this.getMap(this.name).get("slideState");
     if (syncSlide && syncSlide.taskId === option.taskId) {
       await this.slide.setSlideState(syncSlide);
@@ -67154,7 +67336,6 @@ var SlideApplication = class extends AbstractApplication2 {
       return this.userMap(userId);
     });
     this.permissions.on("change", (userId, flags, value) => {
-      console.log(userId, flags, value);
       if (this.userId === userId) {
         if (flags.includes(4 /* clickAnim */)) {
           this.slideContainer.style.pointerEvents = "auto";