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

package/src/SlidePool.ts

@@ -0,0 +1,110 @@
+import { Slide } from '@netless/slide';
+import { delay } from './utils';
+
+export interface PoolItem {
+  key: string;
+  slide: Slide;
+}
+
+export class SlidePool {
+  private pool: PoolItem[] = [];
+  private maxActiveSize: number = 2;
+  private renderingQueue: string[] = [];
+  private renderingQueueCallback: (() => void) | undefined;
+  
+  constructor(maxActiveSize?: number) {
+    if (maxActiveSize) {
+      this.setMaxActiveSize(maxActiveSize);
+    }
+  }
+  
+  private async freeze(poolItem: PoolItem): Promise<boolean> {
+    return new Promise<boolean>((resolve, _reject) => {
+      if (!poolItem.slide.view) {
+        resolve(false);
+      } else {
+        poolItem.slide.frozen(() => {
+          resolve(true);
+        });
+      }
+    });
+  }
+  
+  private async unfreeze(poolItem: PoolItem): Promise<boolean> {
+    return new Promise<boolean>((resolve, _reject) => {
+      if (poolItem.slide.view) {
+        resolve(false);
+      } else {
+        poolItem.slide.release(() => {
+          resolve(true);
+        });
+      }
+    });
+  }
+
+  private async checkPool() {
+    for (let i = 0; i < this.pool.length; i ++) {
+      const poolItem = this.pool[i];
+      if (i < this.maxActiveSize) {
+        await this.unfreeze(poolItem);
+      } else {
+        await this.freeze(poolItem);
+      }
+    }
+  }
+
+  onRenderEnd(appId: string, isFocus: boolean) {
+    const index = this.renderingQueue.findIndex(item => item === appId);
+    if (index > -1) {
+      this.renderingQueue.splice(index, 1);
+    }
+    if (isFocus) {
+      this.renderingQueueCallback = () => {
+        const poolItem = this.pool.find(item => item.key === appId);
+        if (poolItem) {
+          this.active(appId, poolItem.slide);
+        }
+      };
+    }
+    if (this.renderingQueue.length === 0 && this.renderingQueueCallback) {
+      this.renderingQueueCallback();
+    }
+  }
+
+  setMaxActiveSize(maxActiveSize: number) {
+    this.maxActiveSize = maxActiveSize > 8 ? 8 : maxActiveSize;
+    if (maxActiveSize > 8) {
+      console.warn('maxActiveSize should not be greater than 8');
+    }
+  }
+
+  async waitUntilReady(appId: string) {
+    if (this.renderingQueue.length < this.maxActiveSize) {
+      this.renderingQueue.push(appId);
+      return;
+    } else {
+      await delay(200);
+      await this.waitUntilReady(appId);
+    }
+  }
+
+  async active(key: string, slide: Slide) {
+    const index = this.pool.findIndex(item => item.key === key);
+    if (index < 0) {
+      this.pool.unshift({ key, slide });
+    } else {
+      this.pool.splice(index, 1);
+      this.pool.unshift({ key, slide });
+    }
+    await this.checkPool();
+  }
+
+  remove(key: string) {
+    const index = this.pool.findIndex(item => item.key === key);
+    if (index >= 0) {
+      this.pool.splice(index, 1);
+    }
+  }
+}
+
+export const slidePool = new SlidePool();

package/src/icons.ts

@@ -5,7 +5,7 @@ const prevPage = (color: string) => `<svg xmlns="http://www.w3.org/2000/svg" wid
     <path d="M14.375 4V7H15.625V4H14.375ZM16 8.625H19V7.375H16V8.625ZM14.375 7C14.375 7.89746 15.1025 8.625 16 8.625V7.375C15.7929 7.375 15.625 7.20711 15.625 7H14.375Z" fill="${color}"/>
     <path d="M13 16H5" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
     <path d="M9 12L7 14L5 16L7 18L9 20" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
-</svg>`
+</svg>`;
 
 const nextPage = (color: string) => `
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
@@ -14,13 +14,13 @@ const nextPage = (color: string) => `
         <path d="M14.375 4V7H15.625V4H14.375ZM16 8.625H19V7.375H16V8.625ZM14.375 7C14.375 7.89746 15.1025 8.625 16 8.625V7.375C15.7929 7.375 15.625 7.20711 15.625 7H14.375Z" fill="${color}"/>
         <path d="M11 16H19" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
         <path d="M15 12L17 14L19 16L17 18L15 20" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
-    </svg>`
+    </svg>`;
 const prevStep = (color: string) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 12.3926 16.9629"><g><rect height="16.9629" opacity="0" width="12.3926" x="0" y="0"/><path d="M0 8.47656C0 8.7207 0.0878906 8.93555 0.273438 9.12109L8.01758 16.6895C8.18359 16.8652 8.39844 16.9531 8.65234 16.9531C9.16016 16.9531 9.55078 16.5723 9.55078 16.0645C9.55078 15.8105 9.44336 15.5957 9.28711 15.4297L2.17773 8.47656L9.28711 1.52344C9.44336 1.35742 9.55078 1.13281 9.55078 0.888672C9.55078 0.380859 9.16016 0 8.65234 0C8.39844 0 8.18359 0.0878906 8.01758 0.253906L0.273438 7.83203C0.0878906 8.00781 0 8.23242 0 8.47656Z" fill="${color}"/></g></svg>`;
 const nextStep = (color: string) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 11.6895 16.9629"><g><rect height="16.9629" opacity="0" width="11.6895" x="0" y="0"/><path d="M11.6895 8.47656C11.6895 8.23242 11.5918 8.00781 11.4062 7.83203L3.67188 0.253906C3.49609 0.0878906 3.28125 0 3.02734 0C2.5293 0 2.13867 0.380859 2.13867 0.888672C2.13867 1.13281 2.23633 1.35742 2.39258 1.52344L9.50195 8.47656L2.39258 15.4297C2.23633 15.5957 2.13867 15.8105 2.13867 16.0645C2.13867 16.5723 2.5293 16.9531 3.02734 16.9531C3.28125 16.9531 3.49609 16.8652 3.67188 16.6895L11.4062 9.12109C11.5918 8.93555 11.6895 8.7207 11.6895 8.47656Z" fill="${color}"/></g></svg>`;
 const sideBar = (color: string) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 23.3887 17.998"><g><rect height="17.998" opacity="0" width="23.3887" x="0" y="0"/><path d="M3.06641 17.998L19.9609 17.998C22.0117 17.998 23.0273 16.9824 23.0273 14.9707L23.0273 3.04688C23.0273 1.03516 22.0117 0.0195312 19.9609 0.0195312L3.06641 0.0195312C1.02539 0.0195312 0 1.02539 0 3.04688L0 14.9707C0 16.9922 1.02539 17.998 3.06641 17.998ZM3.08594 16.4258C2.10938 16.4258 1.57227 15.9082 1.57227 14.8926L1.57227 3.125C1.57227 2.10938 2.10938 1.5918 3.08594 1.5918L19.9414 1.5918C20.9082 1.5918 21.4551 2.10938 21.4551 3.125L21.4551 14.8926C21.4551 15.9082 20.9082 16.4258 19.9414 16.4258ZM7.44141 16.7285L8.97461 16.7285L8.97461 1.29883L7.44141 1.29883ZM5.56641 5.21484C5.85938 5.21484 6.12305 4.95117 6.12305 4.66797C6.12305 4.375 5.85938 4.12109 5.56641 4.12109L3.4668 4.12109C3.17383 4.12109 2.91992 4.375 2.91992 4.66797C2.91992 4.95117 3.17383 5.21484 3.4668 5.21484ZM5.56641 7.74414C5.85938 7.74414 6.12305 7.48047 6.12305 7.1875C6.12305 6.89453 5.85938 6.65039 5.56641 6.65039L3.4668 6.65039C3.17383 6.65039 2.91992 6.89453 2.91992 7.1875C2.91992 7.48047 3.17383 7.74414 3.4668 7.74414ZM5.56641 10.2637C5.85938 10.2637 6.12305 10.0195 6.12305 9.72656C6.12305 9.43359 5.85938 9.17969 5.56641 9.17969L3.4668 9.17969C3.17383 9.17969 2.91992 9.43359 2.91992 9.72656C2.91992 10.0195 3.17383 10.2637 3.4668 10.2637Z" fill="${color}"/></g></svg>`;
 
 export const Icons = {
-    prevPage, nextPage,
-    prevStep, nextStep,
-    sideBar,
+  prevPage, nextPage,
+  prevStep, nextStep,
+  sideBar,
 };

package/src/index.ts

@@ -1,5 +1,5 @@
-export { SlideApplication } from "./SlideApplication";
-export { SlideForge } from "./Slide";
-export { ForgeSlidePermissionFlag } from "./ForgeSlidePermession";
+export { SlideApplication } from './SlideApplication';
+export { SlideForge } from './Slide';
+export { ForgeSlidePermissionFlag } from './ForgeSlidePermession';
 
-export type { SlideApplicationOption } from "./SlideApplication";
+export type { SlideApplicationOption } from './SlideApplication';

package/src/utils.ts

@@ -1,62 +1,62 @@
-export function deepEqual(a: any, b: any, excludeKeys: string[] = ["time"]) {
-    // 严格相等检查
-    if (a === b) return true;
+export function deepEqual(a: any, b: any, excludeKeys: string[] = ['time']) {
+  // 严格相等检查
+  if (a === b) return true;
 
-    // 非对象类型检查
-    if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) return false;
+  // 非对象类型检查
+  if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) return false;
 
-    // 构造函数检查
-    if (a.constructor !== b.constructor) return false;
+  // 构造函数检查
+  if (a.constructor !== b.constructor) return false;
 
-    // 特殊对象处理
-    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-    if (a instanceof RegExp && b instanceof RegExp) return a.toString() === b.toString();
+  // 特殊对象处理
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  if (a instanceof RegExp && b instanceof RegExp) return a.toString() === b.toString();
 
-    // 获取并过滤属性键（核心修改点）
-    const filterKeys = (obj: any) =>
-        Reflect.ownKeys(obj).filter(k => typeof k === "string" ? !excludeKeys.includes(k) : false);
+  // 获取并过滤属性键（核心修改点）
+  const filterKeys = (obj: any) =>
+    Reflect.ownKeys(obj).filter(k => typeof k === 'string' ? !excludeKeys.includes(k) : false);
 
-    const keysA = filterKeys(a);
-    const keysB = filterKeys(b);
+  const keysA = filterKeys(a);
+  const keysB = filterKeys(b);
 
-    // 属性数量检查
-    if (keysA.length !== keysB.length) return false;
+  // 属性数量检查
+  if (keysA.length !== keysB.length) return false;
 
-    // 分类型处理属性名
-    const processKeys = (keys: (string | symbol)[]) => ({
-        strings: keys.filter(k => typeof k === 'string').sort(),
-        symbols: keys.filter(k => typeof k === 'symbol')
-    });
+  // 分类型处理属性名
+  const processKeys = (keys: (string | symbol)[]) => ({
+    strings: keys.filter(k => typeof k === 'string').sort(),
+    symbols: keys.filter(k => typeof k === 'symbol'),
+  });
 
-    const { strings: strA, symbols: symA } = processKeys(keysA);
-    const { strings: strB, symbols: symB } = processKeys(keysB);
+  const { strings: strA, symbols: symA } = processKeys(keysA);
+  const { strings: strB, symbols: symB } = processKeys(keysB);
 
-    // 字符串键顺序敏感比较
-    if (!arrayEqual(strA, strB)) return false;
+  // 字符串键顺序敏感比较
+  if (!arrayEqual(strA, strB)) return false;
 
-    // Symbol键存在性检查
-    if (symA.length !== symB.length) return false;
-    const symSet = new Set(symB);
-    if (!symA.every(k => symSet.has(k))) return false;
+  // Symbol键存在性检查
+  if (symA.length !== symB.length) return false;
+  const symSet = new Set(symB);
+  if (!symA.every(k => symSet.has(k))) return false;
 
-    // 合并所有需比较的键
-    const allKeys = [...strA, ...symA];
+  // 合并所有需比较的键
+  const allKeys = [...strA, ...symA];
 
-    // 递归比较属性值（传递排除键）
-    for (const key of allKeys) {
-        if (!deepEqual(a[key], b[key], excludeKeys)) return false;
-    }
+  // 递归比较属性值（传递排除键）
+  for (const key of allKeys) {
+    if (!deepEqual(a[key], b[key], excludeKeys)) return false;
+  }
 
-    return true;
+  return true;
 }
 
 // 辅助函数：比较数组是否严格相等
 function arrayEqual(arr1: any[], arr2: any[]) {
-    if (arr1.length !== arr2.length) return false;
-    for (let i = 0; i < arr1.length; i++) {
-        if (arr1[i] !== arr2[i]) return false;
-    }
-    return true;
+  if (arr1.length !== arr2.length) return false;
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) return false;
+  }
+  return true;
 }
 
 export async function delay(time: number): Promise<void> { return new Promise(resolve => setTimeout(resolve, time)); }

package/dist/FoorerView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FoorerView.d.ts","sourceRoot":"","sources":["../src/FoorerView.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAGzC,UAAU,gBAAgB;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAID,qBAAa,UAAW,SAAQ,YAAY,CAAC,gBAAgB,CAAC;IAE1D,SAAgB,IAAI,EAAE,cAAc,CAAC;IAErC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,QAAQ,CAAiB;IAEjC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,QAAQ,CAAiB;IAEjC,OAAO,CAAC,aAAa,CAAiB;;IAyC/B,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAUpC,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAU3C,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;CAkBrB"}

package/src/FoorerView.ts

@@ -1,109 +0,0 @@
-import EventEmitter from "eventemitter3";
-import { Icons } from "./icons";
-
-interface FooterViewEvents {
-    prevPage: () => void;
-    nextPage: () => void;
-    prevStep: () => void;
-    nextStep: () => void;
-    sideBarToggle: () => void;
-}
-
-const EM_COLOR = "#8C8C8C";
-
-export class FooterView extends EventEmitter<FooterViewEvents> {
-
-    public readonly root: HTMLDivElement;
-
-    private prevStep: HTMLDivElement;
-    private nextStep: HTMLDivElement;
-
-    private prevPage: HTMLDivElement;
-    private nextPage: HTMLDivElement;
-
-    private sideBarToggle: HTMLDivElement;
-
-    public constructor() {
-        super();
-        this.root = document.createElement("div");
-        this.root.style.height = "24px";
-        this.root.style.zIndex = "6";
-        this.root.style.display = "flex";
-        this.root.style.alignItems = "center";
-        this.root.style.justifyContent = "center";
-        this.root.style.backgroundColor = "#fff";
-
-        this.prevStep = this.createIcon(Icons.prevStep(EM_COLOR), () => {
-            this.emit("prevStep");
-        });
-
-        this.nextStep = this.createIcon(Icons.nextStep(EM_COLOR), () => {
-            this.emit("nextStep");
-        });
-
-        this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
-            this.emit("prevPage");
-        });
-
-        this.nextPage = this.createIcon(Icons.nextPage(EM_COLOR), () => {
-            this.emit("nextPage");
-        });
-
-        this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), () => {
-            this.emit("sideBarToggle")
-        });
-
-        this.root.appendChild(this.sideBarToggle);
-        this.root.appendChild(this.createSpacer());
-        this.root.appendChild(this.prevPage);
-        this.root.appendChild(this.prevStep);
-        this.root.appendChild(this.nextStep);
-        this.root.appendChild(this.nextPage);
-        this.root.appendChild(this.createSpacer());
-    }
-
-    public prevPageState(enable: boolean): void {
-        if (enable) {
-            this.prevPage.style.pointerEvents = "all";
-            this.prevPage.style.opacity = "1";
-        } else {
-            this.prevPage.style.pointerEvents = "none";
-            this.prevPage.style.opacity = "0.5";
-        }
-    }
-
-    public nextPageState(enable: boolean): void {
-        if (enable) {
-            this.nextPage.style.pointerEvents = "all";
-            this.nextPage.style.opacity = "1";
-        } else {
-            this.nextPage.style.pointerEvents = "none";
-            this.nextPage.style.opacity = "0.5";
-        }
-    }
-
-    private createSpacer(): HTMLDivElement {
-        const div = document.createElement("div");
-        div.style.flex = "1 1 auto";
-        return div;
-    }
-
-    private createIcon(svgContent: string, action: () => void): HTMLDivElement {
-        const icon = document.createElement("div");
-        icon.style.width = "18px";
-        icon.style.height = "18px";
-        icon.style.borderRadius = "2px";
-        icon.style.margin = "6px";
-        icon.innerHTML = svgContent;
-        icon.addEventListener("click", () => {
-            action();
-        });
-        icon.addEventListener("mouseover", () => {
-            icon.style.backgroundColor = "#f0f0f0";
-        });
-        icon.addEventListener("mouseout", () => {
-            icon.style.backgroundColor = "transparent";
-        });
-        return icon;
-    }
-}