@netless/forge-slide 0.1.1-alpha.8 → 1.0.0-alpha.1

package/src/SiderBarView.ts

@@ -1,112 +1,193 @@
-import {SlideApplicationOption} from "./SlideApplication";
-import EventEmitter from "eventemitter3";
+import { SlideApplicationOption } from './SlideApplication';
+import EventEmitter from 'eventemitter3';
+import { kvStore } from '@netless/forge-room';
 
 interface SideBarViewEvents {
     pageChange: (index: number) => void;
 }
 
 export class SideBarView extends EventEmitter<SideBarViewEvents> {
-    public readonly root: HTMLDivElement = document.createElement("div");
-    private isShow: boolean = false;
-    private itemList: HTMLDivElement[] = [];
-
-    public constructor() {
-        super();
-        this.root.style.backgroundColor = '#eee';
-        this.root.className = "forge-slide-sidebar";
-        this.root.style.width = "240px";
-        this.root.style.height = "100%";
-        this.root.style.position = "absolute";
-        this.root.style.left = "-240px";
-        this.root.style.top = "0";
-        this.root.style.zIndex = "5";
-        this.root.style.transition = "left 0.3s ease-in-out";
-        this.root.style.overflow = "auto";
-        this.root.style.display = "flex";
-        this.root.style.flexDirection = "column";
-        this.root.style.justifyContent = "flex-start";
-        this.root.style.alignItems = "center";
+  public readonly root: HTMLDivElement = document.createElement('div');
+  private isShow: boolean = false;
+  private eventsMap: Map<HTMLDivElement, (() => void)[]> = new Map();
+  private taskId: string = '';
+  private prefix: string = '';
+  private addImagesPool: number[] = [];
+  private scheduleId: number = 0;
+  private isSchedule = false;
+
+  public constructor() {
+    super();
+    this.root.style.backgroundColor = '#eee';
+    this.root.className = 'forge-slide-sidebar';
+    this.root.style.width = '240px';
+    this.root.style.height = '100%';
+    this.root.style.position = 'absolute';
+    this.root.style.left = '-240px';
+    this.root.style.top = '0';
+    this.root.style.zIndex = '5';
+    this.root.style.transition = 'left 0.3s ease-in-out';
+    this.root.style.overflow = 'auto';
+    this.root.style.display = 'flex';
+    this.root.style.flexDirection = 'column';
+    this.root.style.justifyContent = 'flex-start';
+    this.root.style.alignItems = 'center';
+    this.root.style.userSelect = 'none';
+  }
+
+  get isShowSideBar(): boolean {
+    return this.isShow;
+  }
+
+  public async getPreviewImage(imageUrl: string) {
+    const image = await fetch(imageUrl);
+    const blob = await image.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 appendPreviewImage(pageIndex: number) {
+    const itemContainer = document.createElement('div');
+    itemContainer.style.width = '60%';
+    itemContainer.style.display = 'flex';
+    itemContainer.style.justifyContent = 'center';
+    itemContainer.style.alignItems = 'flex-start';
+    itemContainer.style.position = 'relative';
+    itemContainer.style.borderRadius = '4px';
+    itemContainer.style.transition = 'border-color .3s';
+    itemContainer.style.marginBottom = '10px';
+
+    const onMouseOverHandle = () => {
+      itemContainer.style.borderColor = '#ccc';
+    };
+    const onMouseOutHandle = () => {
+      itemContainer.style.borderColor = 'transparent';
+    };
+    const onClickHandle = () => {
+      this.emit('pageChange', pageIndex);
+    };
+
+    itemContainer.addEventListener('click', onClickHandle);
+    itemContainer.addEventListener('mouseover', onMouseOverHandle);
+    itemContainer.addEventListener('mouseout', onMouseOutHandle);
+    this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
+
+    const pageIndexContainer = document.createElement('span');
+    pageIndexContainer.textContent = `${pageIndex}`;
+    pageIndexContainer.style.position = 'absolute';
+    pageIndexContainer.style.top = '1px';
+    pageIndexContainer.style.left = '-10px';
+    pageIndexContainer.style.transform = 'translate(-100%)';
+    pageIndexContainer.style.fontSize = '12px';
+    pageIndexContainer.style.color = '#5f5f5f';
+
+    const previewUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
+    const preview = document.createElement('img');
+    const cachePreview = await kvStore.getItem(previewUrl);
+    if (cachePreview) {
+      const { src } = JSON.parse(cachePreview);
+      preview.src = src;
+    } else {
+      const previewInfo = await this.getPreviewImage(previewUrl);
+      await kvStore.setItem(previewUrl, JSON.stringify(previewInfo));
+      const { src } = previewInfo;
+      preview.src = src;
     }
 
-    get isShowSideBar(): boolean {
-        return this.isShow;
-    }
+    preview.style.width = '100%';
+    preview.style.display = 'inline-block';
 
-    private onMouseOver = (itemContainer: HTMLDivElement) => {
-        itemContainer.style.borderColor = "#ccc";
-    }
+    itemContainer.appendChild(preview);
+    itemContainer.appendChild(pageIndexContainer);
 
-    private onMouseOut = (itemContainer: HTMLDivElement) => {
-        itemContainer.style.borderColor = "transparent";
-    }
+    this.root.appendChild(itemContainer);
+  }
 
-    private onClickHandle = (index: number) => {
-        this.emit("pageChange", index);
+  private async scheduleGetPreviewImage() {
+    if (!this.isSchedule) {
+      this.scheduleId = setTimeout(async () => {
+        await this.scheduleGetPreviewImage();
+      }, 32) as unknown as number;
+      return;
     }
-
-    public initialize(slideCount: number, option: SlideApplicationOption): void {
-        for (let i = 1; i <= slideCount; i++) {
-            const itemContainer = document.createElement("div");
-            this.itemList.push(itemContainer);
-            itemContainer.style.width = "60%";
-            itemContainer.style.display = "flex";
-            itemContainer.style.justifyContent = "center";
-            itemContainer.style.alignItems = "flex-start";
-            itemContainer.style.position = "relative";
-            itemContainer.style.borderRadius = "4px"
-            itemContainer.style.transition = "border-color .3s";
-            itemContainer.style.marginBottom = "10px";
-
-            itemContainer.addEventListener("mouseover", () => this.onMouseOver(itemContainer))
-            itemContainer.addEventListener("mouseout", () => this.onMouseOut(itemContainer))
-            itemContainer.addEventListener("click", () => this.onClickHandle(i))
-
-            const pageIndex = document.createElement("span");
-            pageIndex.textContent = `${i}`;
-            pageIndex.style.position = "absolute";
-            pageIndex.style.top = "1px";
-            pageIndex.style.left = "-10px";
-            pageIndex.style.transform = "translate(-100%)";
-            pageIndex.style.fontSize = "12px";
-            pageIndex.style.color = "#5f5f5f";
-
-            const preview = document.createElement("img");
-            preview.style.width = "100%";
-            preview.style.display = "inline-block";
-            preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
-
-            itemContainer.appendChild(preview);
-            itemContainer.appendChild(pageIndex);
-
-            this.root.appendChild(itemContainer);
-        }
+    const pageIndex = this.addImagesPool.shift();
+    if (!pageIndex) {
+      clearTimeout(this.scheduleId);
+      this.scheduleId = 0;
+      return;
     }
-
-    public hidden() {
-        if (!this.root) {
-            return;
-        }
-        this.root.style.left = "-240px";
-        this.root.style.border = "none";
-        this.root.style.boxShadow = "none";
-        this.isShow = false;
+    await this.appendPreviewImage(pageIndex);
+    this.scheduleId = setTimeout(async () => {
+      await this.scheduleGetPreviewImage();
+    }, 32) as unknown as number;
+  }
+
+  public async startGetPreviewImageSchedule() {
+    this.isSchedule = true;
+  }
+
+  public pauseGetPreviewImageSchedule() {
+    this.isSchedule = false;
+  }
+
+  public initialize(slideCount: number, option: SlideApplicationOption): void {
+    this.taskId = option.taskId;
+    this.prefix = option.prefix;
+    for (let i = 1; i <= slideCount; i++) {
+      this.addImagesPool.push(i);
     }
+    this.scheduleGetPreviewImage();
+  }
 
-    public show() {
-        if (!this.root) {
-            return;
-        }
-        this.root.style.left = "0";
-        this.root.style.border = "1px solid #ccc";
-        this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
-        this.isShow = true;
+  public hidden() {
+    if (!this.root || !this.isShow) {
+      return;
     }
-
-    public dispose() {
-        this.itemList.forEach(item => {
-            item.removeEventListener("mouseover", () => this.onMouseOver(item))
-            item.removeEventListener("mouseout", () => this.onMouseOut(item))
-        })
+    this.root.style.left = '-240px';
+    this.root.style.border = 'none';
+    this.root.style.boxShadow = 'none';
+    this.isShow = false;
+  }
+
+  public show() {
+    if (!this.root) {
+      return;
     }
+    this.root.style.left = '0';
+    this.root.style.border = '1px solid #ccc';
+    this.root.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
+    this.isShow = true;
+  }
+
+  public dispose() {
+    this.removeAllListeners();
+    this.eventsMap.forEach((handlers, element) => {
+      const [clickEvent, mouseOverEvent, mouseOutEvent] = handlers;
+      element.removeEventListener('click', clickEvent);
+      element.removeEventListener('mouseover', mouseOverEvent);
+      element.removeEventListener('mouseout', mouseOutEvent);
+    });
+  }
+}
 
-}
+interface PreviewImage {
+  url: string;
+  src: string;
+  width: number;
+  height: number;
+}

package/src/Slide.ts

@@ -1,6 +1,6 @@
-import EventEmitter from "eventemitter3";
-import { ApplicationInstanceType } from "@netless/forge-room";
-import { ForgeSlidePermissionFlag, ForgeSlidePermissions } from "./ForgeSlidePermession";
+import EventEmitter from 'eventemitter3';
+import { ApplicationInstanceType } from '@netless/forge-room';
+import { ForgeSlidePermissionFlag, ForgeSlidePermissions } from './ForgeSlidePermession';
 
 export interface SlideEvents  {
     /**
@@ -39,58 +39,57 @@ export interface SlideEvents  {
 
 export class SlideForge extends EventEmitter<SlideEvents> implements ApplicationInstanceType {
 
-    public readonly view!: HTMLDivElement;
-    public readonly permissions!: ForgeSlidePermissions;
-    public readonly footView!: HTMLDivElement;
-    public readonly sideBarView!: HTMLDivElement;
-    public readonly whiteboardView!: HTMLDivElement;
-    /**
+  public readonly view!: HTMLDivElement;
+  public readonly permissions!: ForgeSlidePermissions;
+  public readonly footView!: HTMLDivElement;
+  public readonly sideBarView!: HTMLDivElement;
+  /**
      * 当前页面索引, 从 0 开始
      */
-    public readonly pageIndex!: number;
-    /**
+  public readonly pageIndex!: number;
+  /**
      * 总页数
      */
-    public readonly pageCount!: number;
-    /**
+  public readonly pageCount!: number;
+  /**
      * 切换到参数指定页面, index 从 0 开始
      * @param {number} index 页面索引
      */
-    public goto!: (index: number) => void
-    /**
+  public goto!: (index: number) => void;
+  /**
      * 下一步, 如果已经是本页的最后一步, 则切换到下一页
      */
-    public nextStep!: () => void
-    /**
+  public nextStep!: () => void;
+  /**
      * 上一步, 如果已经是本页的第一步, 则切换到上一页
      */
-    public prevStep!: () => void
-    /**
+  public prevStep!: () => void;
+  /**
      * 下一页, 如果是最后一页, 则不执行任何操作
      */
-    public nextPage!: () => void
-    /**
+  public nextPage!: () => void;
+  /**
      * 上一页, 如果是第一页, 则不执行任何操作
      */
-    public prevPage!: () => void
-    /**
+  public prevPage!: () => void;
+  /**
      * 切换侧栏显示状态
      */
-    public sideBarToggle!: () => void
+  public sideBarToggle!: () => void;
 
-    /**
+  /**
      * 获取预览图图片内容, base64 编码
      * @param {number} index 页面索引
      */
-    public imgContent!: (index: number) => Promise<string>;
-    /**
+  public imgContent!: (index: number) => Promise<string>;
+  /**
      * 获取预览图图片链接
      * @param {number} index 页面索引
      */
-    public imgUrl!: (index: number) => Promise<string>;
-    /**
+  public imgUrl!: (index: number) => Promise<string>;
+  /**
      * 获取预览图图片尺寸
      * @param {number} index 页面索引
      */
-    public imgSize!: (index: number) => Promise<{width: number, height: number}>;
+  public imgSize!: (index: number) => Promise<{width: number, height: number}>;
 }