@netless/fastboard 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

package/src/WhiteboardApp.ts

@@ -10,11 +10,6 @@ export type { WhiteboardAppConfig, InsertDocsParams };
 export class WhiteboardApp {
   private readonly _instance: Instance;
 
-  private _target: HTMLElement | null = null;
-  public get target(): HTMLElement | null {
-    return this._target;
-  }
-
   constructor(readonly config: WhiteboardAppConfig) {
     this._instance = new Instance(config);
   }
@@ -35,9 +30,23 @@ export class WhiteboardApp {
     return this._instance.i18n;
   }
 
-  public bindElement(target?: HTMLElement | null) {
+  private _target: HTMLElement | null = null;
+  public get target(): HTMLElement | null {
+    return this._target;
+  }
+
+  private _collector: HTMLElement | null = null;
+  public get collector(): HTMLElement | null {
+    return this._collector;
+  }
+
+  public bindElement(
+    target?: HTMLElement | null,
+    collector?: HTMLElement | null
+  ) {
     this._target = target || null;
-    this._instance.target = target || null;
+    this._collector = collector || null;
+    this._instance.bindElement(this._target, this._collector);
   }
 
   public insertDocs(params: InsertDocsParams) {

package/src/components/PageControl.tsx

@@ -36,14 +36,14 @@ export function PageControl({
     if (manager && room) {
       await manager.switchMainViewToWriter();
       const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageCount);
-      await manager.setMainViewSceneIndex(pageIndex);
+      room.putScenes(path, [{}], pageIndex + 1);
+      await manager.setMainViewSceneIndex(pageIndex + 1);
     } else if (!manager && room) {
       const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageCount);
-      room.setSceneIndex(pageIndex);
+      room.putScenes(path, [{}], pageIndex + 1);
+      room.setSceneIndex(pageIndex + 1);
     }
-  }, [room, manager, pageCount, pageIndex]);
+  }, [room, manager, pageIndex]);
 
   const prevPage = useCallback(() => {
     if (room?.isWritable) {

package/src/hooks.ts

@@ -15,13 +15,16 @@ export type FastBoardConfig = WhiteboardAppConfig;
  */
 export function useFastboard(config: FastBoardConfig): readonly [
   app: WhiteboardApp | null,
-  ref: (div: HTMLDivElement | null) => void
+  ref: (div: HTMLDivElement | null) => void,
+  collectorRef: (div: HTMLDivElement | null) => void
 ] & {
   readonly app: WhiteboardApp | null;
   readonly ref: (div: HTMLDivElement | null) => void;
+  readonly collectorRef: (div: HTMLDivElement | null) => void;
 } {
   const [app, setApp] = useState<WhiteboardApp | null>(null);
   const [currentTarget, ref] = useState<HTMLDivElement | null>(null);
+  const [collector, collectorRef] = useState<HTMLDivElement | null>(null);
 
   useEffect(() => {
     let isMounted = true;
@@ -38,9 +41,13 @@ export function useFastboard(config: FastBoardConfig): readonly [
 
   useEffect(() => {
     if (app) {
-      app.bindElement(currentTarget);
+      app.bindElement(currentTarget, collector);
     }
-  }, [app, currentTarget]);
+  }, [app, collector, currentTarget]);
 
-  return Object.assign([app, ref] as const, { app, ref });
+  return Object.assign([app, ref, collectorRef] as const, {
+    app,
+    ref,
+    collectorRef,
+  });
 }

package/src/internal/Instance.tsx

@@ -112,6 +112,14 @@ export class Instance {
     this.forceUpdate();
   }
 
+  collector: HTMLElement | null = null;
+
+  bindElement(target: HTMLElement | null, collector: HTMLElement | null) {
+    this.target = target;
+    this.collector = collector;
+    this.forceUpdate();
+  }
+
   async forceUpdate() {
     await this.readyPromise;
     if (this.target) {
@@ -139,7 +147,12 @@ export class Instance {
 
   async mount(node: HTMLElement) {
     await this.readyPromise;
-    if (this.manager) {
+    if (!this.manager) {
+      throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
+    }
+    if (this.collector) {
+      this.manager.bindContainer(node, this.collector);
+    } else {
       this.manager.bindContainer(node);
     }
   }