@netless/appliance-plugin 1.0.0-beta.0

package/README.md

@@ -0,0 +1,138 @@
+ # appliance-plugin 
+
+ [中文文档](https://github.com/hqer927/appliance-plugin/blob/master/READMA.zh-CN.md)
+ 
+The plug-in is attached to the plug-in mechanism of white-web-sdk to achieve a set of whiteboard teaching AIDS, state synchronization, playback, scene switching and other functions still rely on white-web-sdk or window-manager. 
+ 
+## Introduction 
+ 
+A whiteboard pencil drawing plugin based on SpriteJS as a rendering engine. 
+ 
+The following two demos are implemented in the example folder for reference only. 
+| scenario | demo path | depends on | 
+| :-- | :----: | :-- | 
+| multi-window | example/src/multi.ts | @netless/window-manager, white-web-sdk | 
+| white-board | example/src/single.ts | white-web-sdk | 
+<!-- | fastboard | todo | todo | -->
+ 
+## Principle 
+ 
+1. The plugin is mainly based on the 2D functionality of SpriteJS, supports webgl2 rendering, and is backward compatible with downgrades to webgl and canvas2d 
+2. The plugin uses the dual webWorker+offscreenCanvas mechanism to process the drawing calculation + rendering logic in a separate worker thread. Does not occupy cpu tasks of the main thread. 
+ 
+## Plugin usage 
+ 
+### Install 
+ 
+```bash 
+npm install @netless/appliance-plugin 
+``` 
+ 
+### Sign up for plugins 
+ 
+Plug-ins can support two scenarios, their access plug-in names are different:
+- Multi-window 'ApplianceMultiPlugin' 
+```js 
+// All bundled
+import { ApplianceMultiPlugin } from '@netless/appliance-plugin'; 
+// cdn 
+// import { ApplianceMultiPlugin } from '@netless/appliance-plugin/cdn'; 
+``` 
+- Single whiteboard 'ApplianceSinglePlugin' 
+```js 
+// All bundled
+import { ApplianceSinglePlugin } from '@netless/appliance-plugin'; 
+// cdn 
+// import { ApplianceSinglePlugin } from '@netless/appliance-plugin/cdn'; 
+``` 
+ 
+> About cdn version description 
+> 
+> Since worker is logic independent of main thread js, public packages in worker, such as spritejs, etc. These are all repeated into workerjs, so we have introduced the cdn version to include these public packages in the cdn 
+> 
+> - **cdn package is about 700kb, full package is about 2100kb.** If you need to consider the size of the package to be built, please choose reasonably. 
+> - The cdn version reduces the size of the package, but there are network problems, please fully consider it 
+ 
+### Access mode reference 
+ 
+#### Multi-window mode (Interconnecting with window-manager) 
+```js 
+import '@netless/window-manager/dist/style.css'; 
+import '@netless/appliance-plugin/dist/style.css'; 
+import { WhiteWebSdk } from "white-web-sdk"; 
+import { WindowManager } from "@netless/window-manager"; 
+// All bundled
+import { ApplianceMultiPlugin } from '@netless/appliance-plugin'; 
+// cdn 
+// import { ApplianceMultiPlugin } from '@netless/appliance-plugin/cdn'; 
+ 
+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, supportTeachingAidsPlugin: true}); 
+if (manager) { 
+await manager.switchMainViewToWriter(); 
+await ApplianceMultiPlugin.getInstance(manager); 
+} 
+``` 
+#### Single whiteboard (interconnection with white-web-sdk) 
+```js 
+import { WhiteWebSdk } from "white-web-sdk"; 
+// All bundled
+import { ApplianceSinglePlugin, ApplianceSigleWrapper } from '@netless/appliance-plugin'; 
+// cdn 
+// import { ApplianceMultiPlugin } from '@netless/appliance-plugin/cdn'; 
+ 
+const whiteWebSdk = new WhiteWebSdk(...) 
+const room = await whiteWebSdk.joinRoom({ 
+... 
+invisiblePlugins: [ApplianceSinglePlugin], 
+wrappedComponents: [ApplianceSigleWrapper] 
+}) 
+await ApplianceSinglePlugin.getInstance(room); 
+``` 
+ 
+### Call introduction 
+The plug-in re-implements some interfaces of the same name on room or window or manager. If you do not use the interface on the plug-in, you will not get the desired effect. But we can use injectMethodToObject to re-inject it back into the original object to get the plugin's intended effect. As follows: 
+1. Interface on room 
+- `setMemberState` 
+- `undo` 
+- `redo` 
+- `callbacks` 
+- `insertImage` 
+- `lockImage` 
+- `completeImageUpload` 
+- `getImagesInformation` 
+- `cleanCurrentScene` 
+ 
+2. windowmanager upper interface 
+- `cleanCurrentScene` 
+ 
+3. The mainview interface of windowmanager 
+- `setMemberState` 
+- `undo` 
+- `redo` 
+- `callbacks` 
+- `insertImage` 
+- `lockImage` 
+- `completeImageUpload` 
+- `getImagesInformation` 
+- `cleanCurrentScene` 
+ 
+4. Customize 
+- `getBoundingRectAsync` 
+- `screenshotToCanvasAsync` 
+- `scenePreviewAsync` 
+- `destroy` 
+- `injectMethodToObject` 
+ 
+**The injectMethodToObject interface can rebind the plugin's reimplemented method to the desired object.** For example: 
+ 
+```js 
+// The purpose is to bind the plugin's undo operation to room. Keep outside calls to undo logic from room. 
+plugin.injectMethodToObject(room,'undo'); 
+``` 
+So, the interface of the same name on room,window-manager, or Window-Manager.mainView can be injected into the original object using injectMethodToObject.