@netless/fastboard-ui 1.0.0-canary.8 → 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,46 +1,87 @@
-import { FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
-import { SvelteComponentTyped } from 'svelte';
+import { Color, FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
+import { SvelteComponentTyped } from 'svelte/internal';
+export { SvelteComponentTyped } from 'svelte/internal';
 
-declare interface PageControlProps {
+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<"prev" | "next" | "add">;
+  icons?: GenericIcon<"undo" | "redo">;
 }
 
-declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
 
-declare interface PlayerControlProps {
-  player?: FastboardPlayer | null;
+declare interface PageControlProps {
+  app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"play" | "pause" | "loading">;
+  icons?: GenericIcon<"prev" | "next" | "add">;
 }
 
-declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
 
-declare interface RedoUndoProps {
+declare interface ZoomControlProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"undo" | "redo">;
+  icons?: GenericIcon<"plus" | "minus" | "reset">;
 }
 
-declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
-
-declare interface ToolbarConfig {
-  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 class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
 
 declare interface ToolbarProps {
   app?: FastboardApp | null;
@@ -51,74 +92,39 @@ declare interface ToolbarProps {
 
 declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
 
-declare interface ZoomControlProps {
-  app?: FastboardApp | null;
+declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
-  icons?: GenericIcon<"plus" | "minus" | "reset">;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
 }
 
-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 class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
 
 declare interface ReplayFastboardProps {
-    player?: FastboardPlayer | null;
-    theme?: Theme;
-    language?: Language;
-    config?: ReplayFastboardUIConfig;
-    containerRef?: (container: HTMLDivElement | null) => void;
-}
-declare class ReplayFastboard extends SvelteComponentTyped<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;
-    containerRef?: (container: HTMLDivElement | null) => void;
-    config?: FastboardUIConfig;
-}
-declare class Fastboard extends SvelteComponentTyped<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;
@@ -126,8 +132,6 @@ interface UI {
     update(props?: FastboardProps): void;
     /** remove UI */
     destroy(): void;
-    /** div == null ? destroy() : mount() */
-    setElement(div: Element | null): void;
 }
 /**
  * @example
@@ -142,8 +146,6 @@ interface ReplayUI {
     update(props?: ReplayFastboardProps): void;
     /** remove UI */
     destroy(): void;
-    /** div == null ? destroy() : mount() */
-    setElement(div: Element | null): void;
 }
 /**
  * @example
@@ -171,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 };