@netless/fastboard 0.0.6 → 0.0.7

package/package.json

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

package/src/components/Root.tsx

@@ -10,7 +10,7 @@ export interface RootProps {
   instance: Instance;
 }
 
-export default function Root({ instance: app }: RootProps) {
+export function Root({ instance: app }: RootProps) {
   const [mux] = useState(() => new Lock());
 
   const useWhiteboard = useCallback(
@@ -21,21 +21,40 @@ export default function Root({ instance: app }: RootProps) {
     [app, mux]
   );
 
+  const {
+    Toolbar: toolbar = true,
+    RedoUndo: redo_undo = true,
+    ZoomControl: zoom_control = true,
+    PageControl: page_control = true,
+  } = app.config.layout || {};
+
+  const props = {
+    room: app.room,
+    manager: app.manager,
+    i18n: app.i18n,
+  };
+
   return (
     <Instance.Context.Provider value={app}>
       <div className="fastboard-root">
         {!app.room && <div className="fastboard-loading">Loading&hellip;</div>}
         <div className="fastboard-view" ref={useWhiteboard} />
-        <div className="fastboard-left">
-          <Toolbar room={app.room} manager={app.manager} i18n={app.i18n} />
-        </div>
-        <div className="fastboard-bottom-left">
-          <RedoUndo room={app.room} manager={app.manager} i18n={app.i18n} />
-          <ZoomControl room={app.room} manager={app.manager} i18n={app.i18n} />
-        </div>
-        <div className="fastboard-bottom-right">
-          <PageControl room={app.room} manager={app.manager} i18n={app.i18n} />
-        </div>
+        {toolbar && (
+          <div className="fastboard-left">
+            <Toolbar {...props} />
+          </div>
+        )}
+        {(redo_undo || zoom_control) && (
+          <div className="fastboard-bottom-left">
+            {redo_undo && <RedoUndo {...props} />}
+            {zoom_control && <ZoomControl {...props} />}
+          </div>
+        )}
+        {page_control && (
+          <div className="fastboard-bottom-right">
+            <PageControl {...props} />
+          </div>
+        )}
       </div>
     </Instance.Context.Provider>
   );

package/src/internal/Instance.tsx

@@ -1,3 +1,4 @@
+import type { Mutable } from "type-fest";
 import type { WindowManager } from "@netless/window-manager";
 import type { Room, SceneDefinition, WhiteWebSdk } from "white-web-sdk";
 import type { JoinRoom, ManagerConfig, SdkConfig } from "./mount-whiteboard";
@@ -6,7 +7,7 @@ import type { i18n } from "i18next";
 import React, { createContext, useContext } from "react";
 import ReactDOM from "react-dom";
 
-import Root from "../components/Root";
+import { Root } from "../components/Root";
 import { mountWhiteboard } from "./mount-whiteboard";
 import { noop } from "./helpers";
 
@@ -36,10 +37,18 @@ export type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;
 
 export type Language = "zh-CN" | "en-US";
 
+export interface Layout {
+  Toolbar?: boolean;
+  PageControl?: boolean;
+  RedoUndo?: boolean;
+  ZoomControl?: boolean;
+}
+
 export interface WhiteboardAppConfig {
   readonly sdkConfig: SdkConfig;
   readonly joinRoom: JoinRoom;
   readonly managerConfig?: Omit<ManagerConfig, "container">;
+  readonly layout?: Layout;
   readonly toolbar?: {
     apps?: {
       enable?: boolean;
@@ -60,7 +69,7 @@ export interface Essentials {
 export class Instance {
   static readonly Context = createContext<Instance | null>(null);
 
-  readonly config: WhiteboardAppConfig;
+  config: Mutable<WhiteboardAppConfig>;
 
   sdk: WhiteWebSdk | null = null;
   room: Room | null = null;
@@ -82,13 +91,11 @@ export class Instance {
   }
 
   constructor(config: WhiteboardAppConfig) {
-    this.config = config;
+    this.config = { ...config };
     this.refreshReadyPromise();
     this.initialize();
   }
 
-  private _target: HTMLElement | null = null;
-
   async initialize() {
     const essentials = await mountWhiteboard(
       this.config.sdkConfig,
@@ -100,26 +107,23 @@ export class Instance {
     this.resolveReady();
   }
 
-  get target(): HTMLElement | null {
-    return this._target;
-  }
-
-  set target(value: HTMLElement | null) {
-    if (this._target && value) {
-      ReactDOM.unmountComponentAtNode(this._target);
-    }
-    this._target = value;
-    this.forceUpdate();
-  }
-
+  target: HTMLElement | null = null;
   collector: HTMLElement | null = null;
 
   bindElement(target: HTMLElement | null, collector: HTMLElement | null) {
+    if (this.target && target) {
+      ReactDOM.unmountComponentAtNode(this.target);
+    }
     this.target = target;
     this.collector = collector;
     this.forceUpdate();
   }
 
+  updateLayout(layout: Layout) {
+    this.config.layout = layout;
+    this.forceUpdate();
+  }
+
   async forceUpdate() {
     await this.readyPromise;
     if (this.target) {

package/src/internal/mount-whiteboard.ts

@@ -4,7 +4,7 @@ import type {
   RoomCallbacks,
   WhiteWebSdkConfiguration,
 } from "white-web-sdk";
-import type { Essentials, Language } from "./instance";
+import type { Essentials, Language } from "./Instance";
 
 import { WindowManager } from "@netless/window-manager";
 import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";