Fastboard Web SDK API 参考

createFastboard<TEventData extends Record<string, any> = any>(options: FastboardOptions): Promise<FastboardApp<TEventData>>;

function createUI(app?: FastboardApp | null, div?: Element): UI;

replayFastboard<TEventData extends Record<string, any> = any>(options: FastboardReplayOptions): Promise<FastboardPlayer<TEventData>>;

function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI;

function dispatchDocsEvent(fastboard: FastboardApp | WindowManager, event: DocsEvent, options?: DocsEventOptions): Promise<DispatchDocsEventResult>;

mount(app: FastboardApp, div: HTMLDivElement, options?: MountProps): {
 update(props?: MountProps | undefined): void;
 destroy(): void;
};

get canOperate(): boolean;

undo(): void;

redo(): void;

moveCamera(camera: Partial<Camera> & {
        animationMode?: AnimationMode | undefined;
    }): void;

app.moveCamera({ centerX: 0, centerY: 0, scale: 1 });

moveCameraToContain(rectangle: Rectangle & {
        animationMode?: AnimationMode;
    }): void;

setAppliance(appliance: ExtendApplianceNames | Appliance, shape?: ShapeType | ExtendShapeType | Shape): void;

setStrokeWidth(strokeWidth: number): void;

setStrokeColor(strokeColor: Color): void;

setTextColor(textColor: Color): void;

toggleDottedLine(force?: boolean): void;

setPencilEraserSize(size: number): void;

setTextSize(textSize: number): void;

insertImage(url: string, crossOrigin?: boolean | string): Promise<void>;

insertMedia(title: string, src: string): Promise<string | undefined>;

insertDocs(
    filename: string,
    status: ConversionResponse,
    options?: InsertDocsOptions
  ): Promise<string | undefined>;
insertDocs(
    filename: string,
    response: ProjectorResponse,
    options?: InsertDocsOptions
  ): Promise<string | undefined>;
insertDocs(params: InsertDocsParams, options?: InsertDocsOptions): Promise<string | undefined>;

insertDocs(params: InsertDocsParams, options?: InsertDocsOptions): Promise<string | undefined>;

insertCodeEditor(): Promise<string | undefined>;

insertCountdown(): Promise<string | undefined>;

insertGeoGebra(): Promise<string | undefined>;

removePage(index?: number): Promise<boolean>;

jumpPage(index: number): Promise<boolean>;

destroy(): Promise<void>;

focusApp(appId: string): Promise<boolean>;

getPageState(options?: PageStateOptions): Promise<UnifiedPageState>;

readonly appliancePlugin?: AppliancePluginInstance;

readonly sdk: WhiteWebSdk;

readonly room: Room;

readonly manager: WindowManager;

readonly hotKeys: Partial<HotKeys>;

readonly syncedStore: SyncedStore<TEventData>;

readonly appInMainViewPlugin?: AppInMainViewInstance | undefined;

bindContainer(container: HTMLElement): void;

bindCollector(container: HTMLElement): void;

readonly writable: Writable<boolean>;

readonly phase: Readable<"connecting" | "connected" | "reconnecting" | "disconnecting" | "disconnected">;

readonly boxState: Readable<"normal" | "minimized" | "maximized" | undefined>;

readonly focusedApp: Readable<string | undefined>;

readonly canRedoSteps: Readable<number>;

readonly canUndoSteps: Readable<number>;

readonly camera: Readable<CameraState>;

readonly memberState: Readable<MemberState>;

readonly sceneIndex: Writable<number>;

readonly sceneLength: Readable<number>;

readonly appsStatus: Readable<AppsStatus>;

readonly visibleApps: Readable<Set<string>>;

cleanCurrentScene(): void;

setMemberState(state: Partial<ExtendMemberState>): void;

prevPage(): Promise<boolean>;

nextPage(): Promise<boolean>;

addPage(params?: AddPageParams): Promise<void>;

dispatchDocsEvent(event: DocsEvent, options?: DocsEventOptions): Promise<DispatchDocsEventResult>;

push(...data: AppInToolbar[]): void;

// 在插件中心添加一个 YouTube 按钮。点击按钮后，在白板应用中插入 Plyr 播放器并播放指定的视频。
apps.push({
    icon: "https://api.iconify.design/logos:youtube-icon.svg?color=currentColor",
    kind: "Plyr",
    label: "YouTube",
    onClick(app) {
        app.manager.addApp({
            kind: "Plyr",
            options: { title: "YouTube" },
            attributes: {
                src: "https://www.youtube.com/embed/bTqVqk7FSmY",
                provider: "youtube",
            },
        });
    },
});

insert(data: AppInToolbar, index: number): void;

delete(filter: (data: AppInToolbar) => boolean): void;

clear(): void;

interface AppInToolbar {
    kind: string;
    icon: string;
    label: string;
    onClick: (app: FastboardApp) => void | Promise<unknown>;
}

selector = "selector"

clicker = "clicker"

laserPointer = "laserPointer"

pencil = "pencil"

rectangle = "rectangle"

ellipse = "ellipse"

shape = "shape"

eraser = "eraser"

text = "text"

straight = "straight"

arrow = "arrow"

hand = "hand"

interface DocsEventOptions {
    target?: string;
    /** @deprecated 使用 target */
    appId?: string;
    page?: number;
    scale?: number;
}

interface FastboardOptions {
    sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState"> & {
        region: NonNullable<WhiteWebSdkConfiguration["region"]>;
    };
    joinRoom: Omit<JoinRoomParams, "useMultiViews" | "disableNewPencil" | "disableMagixEventDispatchLimit"> & {
        callbacks?: Partial<Omit<RoomCallbacks, "onCanRedoStepsUpdate" | "onCanUndoStepsUpdate">>;
    };
    managerConfig?: Omit<MountParams, "room">;
    netlessApps?: NetlessApp[];
    enableAppliancePlugin?: AppliancePluginOptions;
    /** Runtime callbacks/logger/cursor adapter; functions must not be placed in options.extras. */
    appliancePluginAdaptor?: Omit<ApplianceAdaptor, "options">;
    enableAppInMainViewPlugin?: true | AppInMainViewOptions;
}

interface FastboardReplayOptions {
    sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState"> & {
        region: NonNullable<WhiteWebSdkConfiguration["region"]>;
    };
    replayRoom: Omit<ReplayRoomParams, "useMultiViews"> & {
        callbacks?: Partial<PlayerCallbacks>;
    };
    managerConfig?: Omit<MountParams, "room">;
    netlessApps?: NetlessApp[];
    enableAppliancePlugin?: AppliancePluginOptions;
    appliancePluginAdaptor?: Omit<ApplianceAdaptor, "options">;
    enableAppInMainViewPlugin?: true | AppInMainViewOptions;
}

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;
  /** Whether to forcibly display the toolbar */
  force_show_toolbar?: boolean;
  /** Whether to force the display of the redo undo button */
  force_show_redo_undo?: boolean;
  /** Whether to force the display of the zoom control button */
  force_show_zoom_control?: boolean;
  /** Whether to forcibly display the page control button */
  force_show_page_control?: boolean;
}

interface FastboardUIConfig {
    toolbar?: {
        enable?: boolean;
    } & ToolbarConfig;
    redo_undo?: {
        enable?: boolean;
    };
    zoom_control?: {
        enable?: boolean;
    };
    page_control?: {
        enable?: boolean;
    };
}

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 InsertDocsDynamic {
    readonly fileType: "pptx";
    /** Unique string for binding whiteboard view to the doc. Must start with `/`. */
    readonly scenePath: string;
    /** Conversion task id, see https://developer.netless.link/server-en/home/server-conversion#get-query-task-conversion-progress. */
    readonly taskId: string;
    /** Window title. */
    readonly title?: string;
    /** Where the slide resource placed. @default `https://convertcdn.netless.link/dynamicConvert` */
    readonly url?: string;
    /** @example [{ name: '1' }, { name: '2' }, { name: '3' }] */
    readonly scenes?: SceneDefinition[];
}

interface InsertDocsStatic {
    readonly fileType: "pdf";
    /** Unique string for binding whiteboard view to the doc. Must start with `/`. */
    readonly scenePath: string;
    /** @example [{ name: '1', ppt: { src: 'url/to/ppt/1.png' } }] */
    readonly scenes: SceneDefinition[];
    /** Window title. */
    readonly title?: string;
}

type MountProps = {
 app?: FastboardApp | null;
 theme?: Theme;
 language?: Language;
 containerRef?: (container: HTMLDivElement | null) => void;
 config?: FastboardUIConfig;
}

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;
}

Triangle = "triangle"

Rhombus = "rhombus"

Pentagram = "pentagram"

SpeechBalloon = "speechBalloon"

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;
    /** force show toolbar */
    forceShowToolbar(): void;
    /** force hide toolbar */
    forceHideToolbar(): void;
    /** recover show toolbar */
    recoverToolbar(): void;
    /** force show redo undo */
    forceShowRedoUndo(): void;
    /** force hide redo undo */
    forceHideRedoUndo(): void;
    /** recover show redo undo */
    recoverRedoUndo(): void;
    /** force show zoom control */
    forceShowZoomControl(): void;
    /** force hide zoom control */
    forceHideZoomControl(): void;
    /** recover show zoom control */
    recoverZoomControl(): void;
    /** force show page control */
    forceShowPageControl(): void;
    /** force hide page control */
    forceHidePageControl(): void;
    /** recover show page control */
    recoverPageControl(): void;
}

interface InsertDocsOptions {
    /** Renderer for static documents. Dynamic documents always use Slide. @default "docsViewer" */
    readonly staticRenderer?: "docsViewer" | "presentation";
}

export type UnifiedPageState = {
    target: "mainView" | "DocsViewer" | "Slide" | "Presentation";
    appId?: string;
    page: number;
    pageCount: number;
    /** MainView/Slide/Presentation actual scale relative to fitted size. */
    scale?: number;
};

// const player = await replayFastboard(options);

readonly sdk: WhiteWebSdk;

readonly player: Player;

readonly manager: WindowManager;

readonly syncedStore: SyncedStore<TEventData>;

readonly appliancePlugin?: AppliancePluginInstance | undefined;

readonly appInMainViewPlugin?: AppInMainViewInstance | undefined;

destroy(): Promise<void>;

bindContainer(container: HTMLElement): void;

bindCollector(container: HTMLElement): void;

readonly currentTime: Writable<number>;

readonly phase: Readable<"waitingFirstFrame" | "playing" | "pause" | "stop" | "ended" | "buffering">;

readonly canplay: Readable<boolean>;

readonly playbackRate: Writable<number>;

readonly duration: Readable<number>;

readonly state: Readable<PlayerState>;

seek(timestamp: number): Promise<PlayerSeekingResult>;

play(): void;

pause(): void;

stop(): void;

setPlaybackRate(value: number): void;

interface Writable<T> extends Readable<T> {}

readonly value: T;

subscribe(this: void, run: Subscriber<T>): Unsubscriber;

reaction(this: void, run: Subscriber<T>): Unsubscriber;

dispose(value?: T): void;

set(this: void, value: T): void;

update(this: void, updater: Updater<T>): void;

const unsubscribe = app.phase.subscribe(phase => console.log(phase));
app.writable.set(true);
const index = app.sceneIndex.value;
// 业务组件卸载时释放自己的监听。
unsubscribe();