@netless/fastboard-ui 1.0.0-canary.1 → 1.0.0-canary.2

package/dist/index.d.ts

@@ -1,67 +1,38 @@
 import { FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
 import { SvelteComponentTyped } from 'svelte';
 
-interface SvelteAction<T = void> {
-    (node: HTMLElement, parameters: T): void | {
-        update?: (parameters: T) => void;
-        destroy?: () => void;
-    };
-}
-declare type Theme = "light" | "dark";
-declare type Language = "en" | "zh-CN";
-declare type IconType = "normal" | "disable";
-declare type GenericIcon<K extends string, E extends string = IconType> = {
-    [key in K]: {
-        [kind in E]: string;
-    };
-};
-declare type I18nData<T extends string> = Record<Language, Record<T, string>>;
-interface ToolbarConfig {
-    apps?: {
-        enable?: boolean;
-    };
-}
-interface FastboardUIConfig {
-    toolbar?: {
-        enable?: boolean;
-    } & ToolbarConfig;
-    redo_undo?: {
-        enable?: boolean;
-    };
-    zoom_control?: {
-        enable?: boolean;
-    };
-    page_control?: {
-        enable?: boolean;
-    };
-}
-
-declare interface RedoUndoProps {
+declare interface PageControlProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"undo" | "redo">;
+  icons?: GenericIcon<"prev" | "next" | "add">;
 }
 
-declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
 
-declare interface PageControlProps {
-  app?: FastboardApp | null;
+declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"prev" | "next" | "add">;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
 }
 
-declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
 
-declare interface ZoomControlProps {
+declare interface RedoUndoProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"plus" | "minus" | "reset">;
+  icons?: GenericIcon<"undo" | "redo">;
 }
 
-declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+
+declare interface ToolbarConfig {
+  apps?: {
+    enable?: boolean;
+  };
+}
 
 declare interface ToolbarProps {
   app?: FastboardApp | null;
@@ -72,19 +43,59 @@ declare interface ToolbarProps {
 
 declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
 
-declare interface PlayerControlProps {
-  player?: FastboardPlayer | null;
+declare interface ZoomControlProps {
+  app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"play" | "pause" | "loading">;
+  icons?: GenericIcon<"plus" | "minus" | "reset">;
 }
 
-declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+
+interface SvelteAction<T = void> {
+    (node: HTMLElement, parameters: T): void | {
+        update?: (parameters: T) => void;
+        destroy?: () => void;
+    };
+}
+declare type Theme = "light" | "dark";
+declare type Language = "en" | "zh-CN";
+declare type IconType = "normal" | "disable";
+declare type GenericIcon<K extends string, E extends string = IconType> = {
+    [key in K]: {
+        [kind in E]: string;
+    };
+};
+declare type I18nData<T extends string> = Record<Language, Record<T, string>>;
+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"];
+    };
+}
+interface ReplayFastboardUIConfig {
+    player_control?: {
+        enable?: boolean;
+        icons?: PlayerControlProps["icons"];
+    };
+}
 
 declare interface ReplayFastboardProps {
     player?: FastboardPlayer | null;
     theme?: Theme;
     language?: Language;
+    config?: ReplayFastboardUIConfig;
     containerRef?: (container: HTMLDivElement | null) => void;
 }
 declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {
@@ -102,32 +113,36 @@ declare class Fastboard extends SvelteComponentTyped<FastboardProps> {
 
 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;
 }
 /**
  * @example
  * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
  * ui.update({ theme: "dark" })
  */
-declare function createUI(app: FastboardApp, div?: Element): UI;
+declare function createUI(app?: FastboardApp | null, div?: Element): UI;
 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;
 }
 /**
  * @example
  * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
  * ui.update({ theme: "dark" })
  */
-declare function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI;
+declare function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI;
 
 interface AppInToolbar {
     kind: string;
@@ -150,4 +165,4 @@ declare class AppsInToolbar {
 
 declare const apps: AppsInToolbar;
 
-export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };
+export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayFastboardUIConfig, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };