app-in-mainview-plugin
中文文档
The plug-in based on @netless/window-manager multi-window mode, the app window (courseware, plug-in) are integrated into the main window, The app window can be hidden or displayed along with the page switch of the main whiteboard.

Plugin Usage
Installation
npm install @netless/app-in-mainview-plugin
Reference for access methods
fastboard(with fastboard)
import { useFastboard, Fastboard } from "@netless/fastboard-react";
const app = useFastboard(() => ({
sdkConfig: {
...
},
joinRoom: {
...
},
managerConfig: {
...
},
enableAppInMainViewPlugin: true || {
enableDefaultUI: true,
language: "en",
...
}
}));
import { createFastboard, createUI } from "@netless/fastboard";
const fastboard = await createFastboard({
sdkConfig: {
...
},
joinRoom: {
...
},
managerConfig: {
...
},
enableAppInMainViewPlugin: true || {
enableDefaultUI: true,
language: "en",
...
}
});
Multiple Windows(with window-manager)
import '@netless/window-manager/dist/style.css';
import '@netless/app-in-mainview-plugin/dist/style.css';
import { WhiteWebSdk } from "white-web-sdk";
import { WindowManager } from "@netless/window-manager";
import { AppInMainViewPlugin } from '@netless/app-in-mainview-plugin';
const whiteWebSdk = new WhiteWebSdk(...)
const room = await whiteWebSdk.joinRoom({
...
invisiblePlugins: [WindowManager, ApplianceMultiPlugin],
useMultiViews: true,
})
const manager = await WindowManager.mount({ room , container:elm, chessboard: true, cursor: true});
if (manager) {
const appInMainViewPlugin = await AppInMainViewPlugin.getInstance(manager as any, {
language: "en"
});
}
Note The css file import '@netless/app-in-mainview-plugin/dist/style.css
needs to be introduced in the project;
Call Introduction
Initialize the parameter configuration of the method
getInstance(wm: WindowManager, options: AppInMainViewOptions)
- wm:
WindowManager
. An instance object of Windows Manager。
- options?:
AppInMainViewOptions
. Configuration parameters. They can be left empty. If left empty, the default configuration will be used. The configuration is as follows.
export type AppInMainViewOptions = {
enableDefaultUI?: boolean;
containerUI?: HTMLDivElement;
onlyShowHidden?: boolean;
language?: Language;
theme?: 'light' | 'dark';
}
const DefaultAppInMainViewPluginOptions = {
enableDefaultUI: true,
onlyShowHidden: false,
language: 'en',
theme: 'light',
};
- logger?:
Logger
. Not required. Configure the log printer object. If not filled in, the default output will be in the local console. If it is necessary to upload the log to the specified server, manual configuration is required.
If it is necessary to upload to the whiteboard log server, the logger on room can be configured to this project. logger: room.logger
api Introduction
export type AppInMainViewInstance = {
readonly currentManager?: AppInMainViewManager;
readonly currentPageVisibleApps?: Set<AppId>;
readonly currentPageApps?: Map<AppId, AppStatus>;
readonly destroy: () => void;
readonly addListener: (eventName: PublicEvent, callback: PublicCallback<PublicEvent>) => void;
readonly removeListener: (eventName: PublicEvent, callback: PublicCallback<PublicEvent>) => void;
readonly hideApp: (appId: AppId) => void;
readonly showApp: (appId: AppId) => void;
readonly showCurrentPageApps: () => void;
readonly hiddenCurrentPageApps: () => void;
}
const appInMainViewPlugin = await AppInMainViewPlugin.getInstance(...)
appInMainViewPlugin.currentManager;
appInMainViewPlugin.currentPageVisibleApps;
appInMainViewPlugin.currentPageHiddenApps;
appInMainViewPlugin.hideApp(...);
appInMainViewPlugin.showApp(...);
appInMainViewPlugin.showCurrentPageApps();
appInMainViewPlugin.hiddenCurrentPageApps();
appInMainViewPlugin.destroy();
Introduction to Front-End Debugging
During the integration process, if you want to understand and track the internal status of the plugin, you can view the internal data through the following several console commands.
const appInMainViewPlugin = await AppInMainViewPlugin.getInstance(...)
appInMainViewPlugin.currentManager
Customize appMeun UI
- Hide the default UI and configure the ui container
{
enableDefaultUI: false,
containerUI: customContainerUI as HTMLDivElement,
...
}
- Obtain the app data on the current page in the initialization state
appInMainViewPlugin.currentPageApps;
appInMainViewPlugin.currentPageVisibleApps;
- Listen for changes in appMeun
appInMainViewPlugin.addListener('appMenuChange', (appMeun) => {
})
For specific reference: appMeun