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

package/dist/index.d.ts

@@ -1,41 +1,24 @@
 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;
-    };
+declare interface PageControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"prev" | "next" | "add">;
 }
-interface FastboardUIConfig {
-    toolbar?: {
-        enable?: boolean;
-    } & ToolbarConfig;
-    redo_undo?: {
-        enable?: boolean;
-    };
-    zoom_control?: {
-        enable?: boolean;
-    };
-    page_control?: {
-        enable?: boolean;
-    };
+
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+
+declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
 }
 
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+
 declare interface RedoUndoProps {
   app?: FastboardApp | null;
   theme?: Theme;
@@ -45,14 +28,31 @@ declare interface RedoUndoProps {
 
 declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
 
-declare interface PageControlProps {
+declare interface ToolbarConfig {
+  pencil?: {
+    dotted?: boolean;
+  };
+  apps?: {
+    enable?: boolean;
+  };
+  eraser?: {
+    /**
+     * - delete: remove shapes under eraser
+     * - pencil: wipe out part of strokes under eraser, like a real eraser
+     * - both (default): will show a panel to choose different behavior
+     */
+    behavior?: "delete" | "pencil" | "both";
+  };
+}
+
+declare interface ToolbarProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"prev" | "next" | "add">;
+  config?: ToolbarConfig;
 }
 
-declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
 
 declare interface ZoomControlProps {
   app?: FastboardApp | null;
@@ -63,71 +63,97 @@ declare interface ZoomControlProps {
 
 declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
 
-declare interface ToolbarProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  config?: ToolbarConfig;
+interface SvelteAction<T = void> {
+    (node: HTMLElement, parameters: T): void | {
+        update?: (parameters: T) => void;
+        destroy?: () => void;
+    };
+}
+type Theme = "light" | "dark";
+type Language = "en" | "zh-CN";
+type IconType = "normal" | "disable";
+type GenericIcon<K extends string, E extends string = IconType> = {
+    [key in K]: {
+        [kind in E]: string;
+    };
+};
+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 class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
-
-declare interface PlayerControlProps {
+declare interface ReplayFastboardProps {
   player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"play" | "pause" | "loading">;
+  config?: ReplayFastboardUIConfig;
+  containerRef?: (container: HTMLDivElement | null) => void;
 }
 
-declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
-
-declare interface ReplayFastboardProps {
-    player?: FastboardPlayer | null;
-    theme?: Theme;
-    language?: Language;
-    containerRef?: (container: HTMLDivElement | null) => void;
-}
-declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {
-}
+declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
 
 declare interface FastboardProps {
-    app?: FastboardApp | null;
-    theme?: Theme;
-    language?: Language;
-    containerRef?: (container: HTMLDivElement | null) => void;
-    config?: FastboardUIConfig;
-}
-declare class Fastboard extends SvelteComponentTyped<FastboardProps> {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  containerRef?: (container: HTMLDivElement | null) => void;
+  config?: FastboardUIConfig;
 }
 
+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;
@@ -148,6 +174,6 @@ declare class AppsInToolbar {
     clear(): void;
 }
 
-declare const apps: AppsInToolbar;
+declare const stockedApps: 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, createReplayUI, createUI, stockedApps };