@netless/fastboard-ui 1.0.0-canary.0 → 1.0.0-canary.10

package/src/helpers/index.ts

@@ -5,11 +5,13 @@ import { Fastboard, ReplayFastboard } from "../components/Fastboard";
 
 export interface UI {
   /** render UI to div */
-  mount(div: Element, props?: Omit<FastboardProps, "app">): UI;
+  mount(div: Element, props?: FastboardProps): UI;
   /** update UI (theme, language, etc.) */
-  update(props?: Omit<FastboardProps, "app">): void;
+  update(props?: FastboardProps): void;
   /** remove UI */
   destroy(): void;
+  /** div == null ? destroy() : mount() */
+  setElement(div: Element | null): void;
 }
 
 /**
@@ -17,32 +19,42 @@ export interface UI {
  * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
  * ui.update({ theme: "dark" })
  */
-export function createUI(app: FastboardApp, div?: Element): UI {
+export function createUI(app?: FastboardApp | null, div?: Element): UI {
   let fastboard: Fastboard | undefined;
 
-  const ui: UI = {
-    mount(div: Element, props?: Omit<FastboardProps, "app">) {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = new Fastboard({ target: div, props: { app, ...props } });
-      return ui;
-    },
-    update(props?: Omit<FastboardProps, "app">) {
-      if (fastboard) {
-        fastboard.$set(props);
-      }
-    },
-    destroy() {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = undefined;
-    },
-  };
+  function mount(div: Element, props?: FastboardProps) {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = new Fastboard({ target: div, props: { app, ...props } });
+    return ui;
+  }
+
+  function update(props?: FastboardProps) {
+    if (fastboard) {
+      fastboard.$set(props);
+    }
+  }
+
+  function destroy() {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = undefined;
+  }
+
+  function setElement(div: Element | null) {
+    if (div) {
+      mount(div);
+    } else {
+      destroy();
+    }
+  }
+
+  const ui: UI = { mount, update, destroy, setElement };
 
   if (div) {
-    ui.mount(div);
+    mount(div, { app });
   }
 
   return ui;
@@ -50,11 +62,13 @@ export function createUI(app: FastboardApp, div?: Element): UI {
 
 export interface ReplayUI {
   /** render UI to div */
-  mount(div: Element, props?: Omit<ReplayFastboardProps, "player">): ReplayUI;
+  mount(div: Element, props?: ReplayFastboardProps): ReplayUI;
   /** update UI (theme, language, etc.) */
-  update(props?: Omit<ReplayFastboardProps, "player">): void;
+  update(props?: ReplayFastboardProps): void;
   /** remove UI */
   destroy(): void;
+  /** div == null ? destroy() : mount() */
+  setElement(div: Element | null): void;
 }
 
 /**
@@ -62,32 +76,42 @@ export interface ReplayUI {
  * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
  * ui.update({ theme: "dark" })
  */
-export function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI {
+export function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI {
   let fastboard: ReplayFastboard | undefined;
 
-  const ui: ReplayUI = {
-    mount(div: Element, props?: Omit<ReplayFastboardProps, "player">) {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
-      return ui;
-    },
-    update(props?: Omit<ReplayFastboardProps, "player">) {
-      if (fastboard) {
-        fastboard.$set(props);
-      }
-    },
-    destroy() {
-      if (fastboard) {
-        fastboard.$destroy();
-      }
-      fastboard = undefined;
-    },
-  };
+  function mount(div: Element, props?: ReplayFastboardProps) {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
+    return ui;
+  }
+
+  function update(props?: ReplayFastboardProps) {
+    if (fastboard) {
+      fastboard.$set(props);
+    }
+  }
+
+  function destroy() {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = undefined;
+  }
+
+  function setElement(div: Element | null) {
+    if (div) {
+      mount(div);
+    } else {
+      destroy();
+    }
+  }
+
+  const ui: ReplayUI = { mount, update, destroy, setElement };
 
   if (div) {
-    ui.mount(div);
+    mount(div, { player });
   }
 
   return ui;

package/src/index.ts

@@ -1,3 +1,5 @@
+import "./style.scss";
+
 export * from "./typings";
 
 export { default as RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
@@ -5,10 +7,12 @@ export { default as PageControl, type PageControlProps } from "./components/Page
 export { default as ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
 export { default as Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { default as PlayerControl, type PlayerControlProps } from "./components/PlayerControl";
-export { Fastboard, ReplayFastboard } from "./components/Fastboard";
-export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
+export {
+  Fastboard,
+  ReplayFastboard,
+  type FastboardProps,
+  type ReplayFastboardProps,
+} from "./components/Fastboard";
 
 export * from "./helpers";
 export * from "./behaviors";
-
-import "./style.scss";

package/src/style.scss

@@ -34,3 +34,7 @@
     padding: 8px;
   }
 }
+
+.netless-whiteboard:focus-visible {
+  outline: none;
+}

package/src/typings.ts

@@ -1,3 +1,9 @@
+import type { PageControlProps } from "./components/PageControl";
+import type { PlayerControlProps } from "./components/PlayerControl";
+import type { RedoUndoProps } from "./components/RedoUndo";
+import type { ToolbarConfig } from "./components/Toolbar";
+import type { ZoomControlProps } from "./components/ZoomControl";
+
 export interface SvelteAction<T = void> {
   (node: HTMLElement, parameters: T): void | {
     update?: (parameters: T) => void;
@@ -16,23 +22,27 @@ export type GenericIcon<K extends string, E extends string = IconType> = {
 
 export type I18nData<T extends string> = Record<Language, Record<T, string>>;
 
-export interface ToolbarConfig {
-  apps?: {
-    enable?: boolean;
-  };
-}
-
 export interface FastboardUIConfig {
   toolbar?: {
     enable?: boolean;
   } & ToolbarConfig;
   redo_undo?: {
     enable?: boolean;
+    icons?: RedoUndoProps["icons"];
   };
   zoom_control?: {
     enable?: boolean;
+    icons?: ZoomControlProps["icons"];
   };
   page_control?: {
     enable?: boolean;
+    icons?: PageControlProps["icons"];
+  };
+}
+
+export interface ReplayFastboardUIConfig {
+  player_control?: {
+    enable?: boolean;
+    icons?: PlayerControlProps["icons"];
   };
 }