@netless/fastboard-ui 1.0.0-canary.9 → 1.0.0

package/dist/full.d.ts

@@ -0,0 +1,178 @@
+import { Color, FastboardApp, FastboardPlayer } from '@netless/fastboard-core/full';
+import { SvelteComponentTyped } from 'svelte/internal';
+export { SvelteComponentTyped } from 'svelte/internal';
+
+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>>;
+type ToolbarItem = "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "hand" | "laserPointer";
+interface ToolbarConfig {
+    /** @default "left" */
+    placement?: "left" | "right";
+    /** @default ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"] */
+    items?: ToolbarItem[];
+    /**
+     * Note: updating this option does not take effect when the element was mounted.
+     * Make sure to set this option in `UI.mount(div, { configs: { toolbar: { collapsed: true } } })`.
+     * @default false
+     */
+    collapsed?: boolean;
+    /** Control the last button which opens apps stock on toolbar. */
+    apps?: {
+        enable?: boolean;
+    };
+    /** 颜色 */
+    colors?: Color[];
+}
+interface FastboardUIConfig {
+    toolbar?: {
+        enable?: boolean;
+    } & ToolbarConfig;
+    redo_undo?: {
+        enable?: boolean;
+    };
+    zoom_control?: {
+        enable?: boolean;
+    };
+    page_control?: {
+        enable?: boolean;
+    };
+}
+interface ReplayFastboardUIConfig {
+    player_control?: {
+        enable?: boolean;
+    };
+}
+
+declare interface RedoUndoProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"undo" | "redo">;
+}
+
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+
+declare interface PageControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"prev" | "next" | "add">;
+}
+
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+
+declare interface ZoomControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"plus" | "minus" | "reset">;
+}
+
+declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+
+declare interface ToolbarProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  config?: ToolbarConfig;
+}
+
+declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
+
+declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
+}
+
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+
+declare interface ReplayFastboardProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  containerRef?: (container: HTMLDivElement | null) => void;
+  config?: ReplayFastboardUIConfig;
+}
+
+declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
+
+declare interface FastboardProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  /**
+   * Note: updating this option does not take effect when the element was mounted.
+   * Make sure to set this option in `UI.mount(div, { containerRef })`.
+   */
+  containerRef?: (container: HTMLDivElement | null) => void;
+  config?: FastboardUIConfig;
+}
+
+declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}
+
+interface UI {
+    /** render UI to div */
+    mount(div: Element, props?: FastboardProps): UI;
+    /** update UI (theme, language, etc.) */
+    update(props?: FastboardProps): void;
+    /** remove UI */
+    destroy(): void;
+}
+/**
+ * @example
+ * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+declare function createUI(app?: FastboardApp | null, div?: Element): UI;
+interface ReplayUI {
+    /** render UI to div */
+    mount(div: Element, props?: ReplayFastboardProps): ReplayUI;
+    /** update UI (theme, language, etc.) */
+    update(props?: ReplayFastboardProps): void;
+    /** remove UI */
+    destroy(): void;
+}
+/**
+ * @example
+ * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+declare function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI;
+
+interface AppInToolbar {
+    kind: string;
+    icon: string;
+    label: string;
+    onClick: (app: FastboardApp) => void;
+}
+declare class AppsInToolbar {
+    private _data;
+    _listeners: Array<(data: AppInToolbar[]) => void>;
+    constructor(_data: AppInToolbar[]);
+    get data(): AppInToolbar[];
+    get length(): number;
+    subscribe(fn: (data: AppInToolbar[]) => void): () => void;
+    push(...data: AppInToolbar[]): void;
+    insert(data: AppInToolbar, index: number): void;
+    delete(filter: (data: AppInToolbar) => boolean): void;
+    clear(): void;
+}
+
+declare const apps: AppsInToolbar;
+
+export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayFastboardUIConfig, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarItem, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };

package/dist/index.d.ts

@@ -1,67 +1,6 @@
-import { FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
-import { SvelteComponentTyped } from 'svelte';
-
-declare interface PageControlProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  icons?: GenericIcon<"prev" | "next" | "add">;
-}
-
-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;
-  language?: Language;
-  icons?: GenericIcon<"undo" | "redo">;
-}
-
-declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
-
-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;
-  config?: ToolbarConfig;
-}
-
-declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
-
-declare interface ZoomControlProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  icons?: GenericIcon<"plus" | "minus" | "reset">;
-}
-
-declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+import { Color, FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
+import { SvelteComponentTyped } from 'svelte/internal';
+export { SvelteComponentTyped } from 'svelte/internal';
 
 interface SvelteAction<T = void> {
     (node: HTMLElement, parameters: T): void | {
@@ -78,36 +17,96 @@ type GenericIcon<K extends string, E extends string = IconType> = {
     };
 };
 type I18nData<T extends string> = Record<Language, Record<T, string>>;
+type ToolbarItem = "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "hand" | "laserPointer";
+interface ToolbarConfig {
+    /** @default "left" */
+    placement?: "left" | "right";
+    /** @default ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"] */
+    items?: ToolbarItem[];
+    /**
+     * Note: updating this option does not take effect when the element was mounted.
+     * Make sure to set this option in `UI.mount(div, { configs: { toolbar: { collapsed: true } } })`.
+     * @default false
+     */
+    collapsed?: boolean;
+    /** Control the last button which opens apps stock on toolbar. */
+    apps?: {
+        enable?: boolean;
+    };
+    /** 颜色 */
+    colors?: Color[];
+}
 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 RedoUndoProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"undo" | "redo">;
+}
+
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+
+declare interface PageControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"prev" | "next" | "add">;
+}
+
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+
+declare interface ZoomControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"plus" | "minus" | "reset">;
+}
+
+declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+
+declare interface ToolbarProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  config?: ToolbarConfig;
+}
+
+declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
+
+declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
+}
+
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+
 declare interface ReplayFastboardProps {
   player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
-  config?: ReplayFastboardUIConfig;
   containerRef?: (container: HTMLDivElement | null) => void;
+  config?: ReplayFastboardUIConfig;
 }
 
 declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
@@ -116,6 +115,10 @@ declare interface FastboardProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
+  /**
+   * Note: updating this option does not take effect when the element was mounted.
+   * Make sure to set this option in `UI.mount(div, { containerRef })`.
+   */
   containerRef?: (container: HTMLDivElement | null) => void;
   config?: FastboardUIConfig;
 }
@@ -129,8 +132,6 @@ interface UI {
     update(props?: FastboardProps): void;
     /** remove UI */
     destroy(): void;
-    /** div == null ? destroy() : mount() */
-    setElement(div: Element | null): void;
 }
 /**
  * @example
@@ -145,8 +146,6 @@ interface ReplayUI {
     update(props?: ReplayFastboardProps): void;
     /** remove UI */
     destroy(): void;
-    /** div == null ? destroy() : mount() */
-    setElement(div: Element | null): void;
 }
 /**
  * @example
@@ -174,6 +173,6 @@ declare class AppsInToolbar {
     clear(): void;
 }
 
-declare const stockedApps: AppsInToolbar;
+declare const apps: AppsInToolbar;
 
-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 };
+export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayFastboardUIConfig, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarItem, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };