@netless/forge-imagery-doc 0.1.2 → 0.1.3-appha.1

package/src/InfinityScroll.ts

@@ -1,4 +1,4 @@
-import EventEmitter from "eventemitter3";
+import EventEmitter from 'eventemitter3';
 
 interface InfinityScrollEvents {
     scale: (value: number) => void;
@@ -7,49 +7,50 @@ interface InfinityScrollEvents {
 
 export class InfinityScroll extends EventEmitter<InfinityScrollEvents> {
 
-    public readonly view: HTMLDivElement;
-    private lastDelta: {x: number, y: number} = { x: 0, y: 0 };
-    private lastTriggerTime: number = 0;
+  public readonly view: HTMLDivElement;
+  private lastDelta: {x: number, y: number} = { x: 0, y: 0 };
+  private lastTriggerTime: number = 0;
 
-    public constructor(view: HTMLDivElement) {
-        super();
-        this.view = view;
-        this.view.addEventListener("wheel", this.handleWheel, { passive: false, capture: true });
-    }
-
-    private handleWheel = (evt: WheelEvent) => {
-        evt.preventDefault();
-        evt.stopImmediatePropagation();
-        evt.stopPropagation();
+  public constructor(view: HTMLDivElement) {
+    super();
+    this.view = view;
+    this.view.addEventListener('wheel', this.handleWheel, { passive: false, capture: true });
+  }
 
-        if (Date.now() - this.lastTriggerTime < 32) {
-            this.lastDelta.y += evt.deltaY;
-            this.lastDelta.x += evt.deltaX;
-            return;
-        }
-        if (evt.ctrlKey) { // 双指捏合
-            // @ts-ignore
-            const wheelDelta = Math.sign((evt.wheelDelta || 100)) * 120;
-            const deltaY = evt.deltaY + this.lastDelta.y;
-            let scale: number;
-            if (deltaY > 0) {
-                scale = Math.max(1 - Math.abs(deltaY / wheelDelta), 0.00000001)
-            } else { // 放大
-                scale = 1 + Math.abs(deltaY / wheelDelta)
-            }
-            scale = Math.max(0.9, scale);
-            scale = Math.min(1.1, scale);
-            this.emit("scale", scale);
-        } else { // 拖动
-            const deltaX = this.lastDelta.x + evt.deltaX;
-            const deltaY = this.lastDelta.y + evt.deltaY;
-            this.emit("translate", deltaX, deltaY);
-        }
-        this.lastTriggerTime = Date.now();
-        this.lastDelta = { x: 0, y: 0 };
-    };
+  private handleWheel = (evt: WheelEvent) => {
+    evt.preventDefault();
+    evt.stopImmediatePropagation();
+    evt.stopPropagation();
 
-    public dispose() {
-        this.view.removeEventListener("wheel", this.handleWheel);
+    if (Date.now() - this.lastTriggerTime < 32) {
+      this.lastDelta.y += evt.deltaY;
+      this.lastDelta.x += evt.deltaX;
+      return;
     }
+    if (evt.ctrlKey) { // 双指捏合
+      // @ts-ignore
+      const wheelDelta = Math.sign((evt.wheelDelta || 100)) * 120;
+      const deltaY = evt.deltaY + this.lastDelta.y;
+      let scale: number;
+      if (deltaY > 0) {
+        scale = Math.max(1 - Math.abs(deltaY / wheelDelta), 0.00000001);
+      } else { // 放大
+        scale = 1 + Math.abs(deltaY / wheelDelta);
+      }
+      scale = Math.max(0.9, scale);
+      scale = Math.min(1.1, scale);
+      this.emit('scale', scale);
+    } else { // 拖动
+      const deltaX = this.lastDelta.x + evt.deltaX;
+      const deltaY = this.lastDelta.y + evt.deltaY;
+      this.emit('translate', deltaX, deltaY);
+    }
+    this.lastTriggerTime = Date.now();
+    this.lastDelta = { x: 0, y: 0 };
+  };
+
+  public dispose() {
+    this.view.removeEventListener('wheel', this.handleWheel);
+    this.removeAllListeners();
+  }
 }

package/src/LazyImage.ts

@@ -1,66 +1,66 @@
-import { kvStore } from "@netless/forge-room";
+import { kvStore } from '@netless/forge-room';
 
 export class LazyImage {
 
-    public readonly view: HTMLDivElement;
-    public readonly width: number;
-    public readonly height: number;
-    private src: string;
+  public readonly view: HTMLDivElement;
+  public readonly width: number;
+  public readonly height: number;
+  private src: string;
 
-    public constructor(src: string, width: number, height: number) {
-        this.src = src;
-        this.width = width;
-        this.height = height;
-        this.view = document.createElement("div");
-        this.view.setAttribute("data-forge-src", src);
-        this.view.style.width = `${width}px`;
-        this.view.style.height = `${height}px`;
-        this.view.style.transformOrigin = "0 0";
-    }
+  public constructor(src: string, width: number, height: number) {
+    this.src = src;
+    this.width = width;
+    this.height = height;
+    this.view = document.createElement('div');
+    this.view.setAttribute('data-forge-src', src);
+    this.view.style.width = `${width}px`;
+    this.view.style.height = `${height}px`;
+    this.view.style.transformOrigin = '0 0';
+  }
+
+  public scale(scale: number) {
+    // this.localScale = scale;
+    this.view.style.width = `${this.width * scale}px`;
+    this.view.style.height = `${this.height * scale}px`;
+    // this.img.style.width = "100%";
+  }
 
-    public scale(scale: number) {
-        // this.localScale = scale;
-        this.view.style.width = `${this.width * scale}px`;
-        this.view.style.height = `${this.height * scale}px`;
-        // this.img.style.width = "100%";
+  public async getImgContent(): Promise<string> {
+    let base64Data: string | null = null;
+    try {
+      base64Data = await kvStore.getItem(this.src);
+    } catch {
+      // ignore
+    }
+    if (base64Data) {
+      return base64Data;
     }
 
-    public async getImgContent(): Promise<string> {
-        let base64Data: string | null = null;
-        try {
-            base64Data = await kvStore.getItem(this.src);
-        } catch {
-            // ignore
-        }
-        if (base64Data) {
-            return base64Data;
-        }
+    const response = await fetch(this.src);
+    const blob = await response.blob();
+    return new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (_e) => {
+        kvStore.setItem(this.src, reader.result as string);
+        resolve(reader.result as string);
+      };
+      reader.onerror = () => {
+        reject(reader.error);
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
 
-        const response = await fetch(this.src);
-        const blob = await response.blob();
-        return new Promise<string>((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                kvStore.setItem(this.src, reader.result as string);
-                resolve(reader.result as string);
-            };
-            reader.onerror = () => {
-                reject(reader.error);
-            };
-            reader.readAsDataURL(blob);
-        });
+  public async prepare(): Promise<void> {
+    if (this.view.children.length > 0) {
+      return;
     }
-
-    public async prepare(): Promise<void> {
-        if (this.view.children.length > 0) {
-            return;
-        }
-        const base64Data: string = await this.getImgContent();
-        const img = document.createElement("img");
-        img.src = base64Data;
-        img.style.width = "100%";
-        if (this.view.children.length === 0) {
-            this.view.appendChild(img);
-        }
+    const base64Data: string = await this.getImgContent();
+    const img = document.createElement('img');
+    img.src = base64Data;
+    img.style.width = '100%';
+    if (this.view.children.length === 0) {
+      this.view.appendChild(img);
     }
+  }
 }