@netless/appliance-plugin 1.1.31 → 1.1.33-beta.0

package/READMA.zh-CN.md

@@ -1,6 +1,6 @@
 # appliance-plugin
 
-[English Documentation](README.md)
+[English Documentation](https://github.com/netless-io/fastboard/blob/main/docs/en/appliance-plugin.md)
 
 该插件基于 white-web-sdk 的插件机制，实现了一套功能丰富的白板教具绘制工具。同时也基于 @netless/window-manager，实现了可在多窗口上使用。
 
@@ -309,9 +309,9 @@ injectMethodToObject(windowmanager.mainView,'setMemberState');
 - `getElements` - 获取场景下的所有元素 (Version >=1.1.19)
 - `stopDraw` - 停止Draw事件 (Version >=1.1.19)
 - `setViewLocalScenePathChange` - 设置白板本地场景路径变化 (Version >=1.1.27)
-- `insertMarkmap` - 插入markdow文本到白板 (Version >=1.1.30) **该方法需要开启extras.useBackgroundThread**
-- `updateMarkmap` - 修改白板中的markdow文本 (Version >=1.1.30) **该方法需要开启extras.useBackgroundThread**
-- `insertBackgroundImage` - 插入白板的背景图片 (Version >=1.1.30) **该方法需要开启extras.useBackgroundThread**
+- `insertMarkmap` - 插入markdow文本到白板 (Version >=1.1.32) **该方法需要开启extras.useBackgroundThread**
+- `updateMarkmap` - 修改白板中的markdow文本 (Version >=1.1.32) **该方法需要开启extras.useBackgroundThread**
+- `insertBackgroundImage` - 插入白板的背景图片 (Version >=1.1.32) **该方法需要开启extras.useBackgroundThread**
 
 5. 不兼容接口
 - [`exportScene`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#exportScene) - appliance-plugin 开启后，笔记不能按 room 的方式导出
@@ -638,7 +638,7 @@ plugin.usePlugin(autoDrawPlugin);
 ```
 ![Image](https://github.com/user-attachments/assets/c388691c-ae72-44ec-bbb7-e92c3a73c9c7)
 
-##### 插入思维导图(需要markdown文本)
+##### 插入思维导图(需要markdown文本) (Version >=1.1.32)
 ```ts
 import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
 const plugin = await ApplianceMultiPlugin.getInstance(manager, {
@@ -684,7 +684,7 @@ plugin.updateMarkmap(viewId, markId, {
 
 ```
 ![Image](https://github.com/user-attachments/assets/0d278bd5-1cc7-413f-881c-8a43ef1429e3)
-##### 插入背景图
+##### 插入背景图  (Version >=1.1.32)
 ```ts
 import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
 const plugin = await ApplianceMultiPlugin.getInstance(manager, {
@@ -939,3 +939,6 @@ MIT License
 - [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)
 - [fastboard](https://github.com/netless-io/fastboard)
 - [官方文档](https://doc.shengwang.cn/)
+
+
+## [changelog](https://github.com/duty-os/appliance-plugin/blob/master/CHANGELOG.md)

package/README.md

@@ -6,13 +6,38 @@ This plugin is based on the plugin mechanism of white-web-sdk, and realizes a se
 
 ## Introduction
 
-appliance-plugin, Depend on [white-web-SDK](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager), And based on web API support for [offscreenCanvas](https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas).
+appliance-plugin is a high-performance whiteboard drawing plugin that depends on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk) and [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager), and is based on Web API support for [OffscreenCanvas](https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas).
+
+### Key Features
+
+- 🎨 **Rich Drawing Tools**: Supports pencil, eraser, shape tools, text, images, and more
+- ⚡ **High Performance Rendering**: Uses dual WebWorker + OffscreenCanvas mechanism, improving drawing efficiency by more than 40% compared to the main thread
+- 🖼️ **Multi-window Support**: Supports multi-window scenarios, can be used independently on different windows
+- 🎯 **Laser Pen Tool**: Supports laser pen functionality, suitable for presentation scenarios
+- 📝 **Text Editing**: Supports text insertion, editing, and style settings
+- 🗺️ **Minimap Function**: Provides minimap navigation for viewing overall content
+- 🔄 **Undo/Redo**: Supports global undo/redo functionality
+- 🎭 **Custom Styles**: Supports custom brush styles, text styles, etc.
+- 🔌 **Plugin Extension**: Supports extending functionality through plugin mechanism (e.g., autoDraw handwriting graphics auto-association)
 
 ## 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 and rendering logic in a separate worker thread, not occupying the CPU tasks of the main thread.
-3. For mobile terminals that do not support OffscreenCanvas, it will be processed in the main thread.
+1. **Rendering Engine**: The plugin is mainly based on SpriteJS's 2D functionality, supports WebGL2 rendering, and is backward compatible with downgrades to WebGL and Canvas2D.
+2. **Multi-threaded Architecture**: The plugin uses the dual WebWorker + OffscreenCanvas mechanism to process drawing calculations and rendering logic in independent worker threads, not occupying the CPU tasks of the main thread.
+   - **Full Worker**: Thread responsible for drawing complete data
+   - **Sub Worker**: Thread responsible for drawing one frame of data
+3. **Compatibility Handling**: For mobile terminals that do not support OffscreenCanvas, it will automatically downgrade to main thread processing.
+
+### Supported Drawing Tools
+
+The plugin supports the following drawing tools:
+
+- **Basic Tools**: Pencil, eraser, partial eraser, bitmap eraser, selector tool, hand tool
+- **Shape Tools**: Straight line, arrow, rectangle, circle, triangle, diamond, polygon, star, speech balloon
+- **Text Tool**: Supports text input, editing, and style settings
+- **Image Tool**: Supports image insertion and editing
+- **Special Tools**: Laser pen, background SVG
+- **Interactive Tools**: Click interactive tool (for plugin custom behavior)
 
 ## Plugin usage
 
@@ -233,43 +258,43 @@ injectMethodToObject(windowmanager.mainView,'setMemberState');
 The following interfaces are involved:
 
 1. Interfaces on room
-- [`setMemberState`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#setmemberstate)
-- [`undo`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#undo)
-- [`redo`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#redo)
-- [`callbacks`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#callbacks)
-- [`insertImage`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#insertImage)
-- [`lockImage`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#lockImage)
-- [`completeImageUpload`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#completeImageUpload)
+- [`setMemberState`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#setmemberstate)
+- [`undo`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#undo)
+- [`redo`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#redo)
+- [`callbacks`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#callbacks)
+- [`insertImage`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#insertimage)
+- [`lockImage`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#lockimage)
+- [`completeImageUpload`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#completeimageupload)
 - `getImagesInformation`
-- [`cleanCurrentScene`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#cleanCurrentScene)
+- [`cleanCurrentScene`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#cleancurrentscene)
 
 2. WindowManager interfaces
-- [`cleanCurrentScene`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#cleanCurrentScene)
-- [`canUndoSteps`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#canUndoSteps)
-- [`canRedoSteps`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#canRedoSteps)
+- [`cleanCurrentScene`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#cleancurrentscene)
+- [`canUndoSteps`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#canundosteps)
+- [`canRedoSteps`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#canredosteps)
 
 3. Interfaces on WindowManager's mainView
-- [`setMemberState`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#setmemberstate)
-- [`undo`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#undo)
-- [`redo`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#redo)
-- [`callbacks`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#callbacks)
-- [`insertImage`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#insertImage)
-- [`lockImage`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#lockImage)
-- [`completeImageUpload`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#completeImageUpload)
+- [`setMemberState`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#setmemberstate)
+- [`undo`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#undo)
+- [`redo`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#redo)
+- [`callbacks`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#callbacks)
+- [`insertImage`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#insertimage)
+- [`lockImage`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#lockimage)
+- [`completeImageUpload`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#completeimageupload)
 - `getImagesInformation`
-- [`cleanCurrentScene`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#cleanCurrentScene)
+- [`cleanCurrentScene`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#cleancurrentscene)
 
 4. Custom interfaces
 - `getBoundingRectAsync` - Replace interface `room.getBoundingRect`
-- `screenshotToCanvasAsync` - Replace interface [room.screenshotToCanvas](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#screenshotToCanvas)
-- `scenePreviewAsync` - Replace interface [room.scenePreview](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#scenePreview)
-- `fillSceneSnapshotAsync` - Replace interface [room.fillSceneSnapshot](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#fillSceneSnapshot)
+- `screenshotToCanvasAsync` - Replace interface [room.screenshotToCanvasAsync](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#screenshottocanvasasync)
+- `scenePreviewAsync` - Replace interface [room.scenePreview](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#scenepreview)
+- `fillSceneSnapshotAsync` - Replace interface [room.fillSceneSnapshot](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#fillscenesnapshot)
 - `destroy` - Destroy the instance of appliance-plugin
 - `addListener` - Add appliance-plugin internal event listener
 - `removeListener` - Remove appliance-plugin internal event listener
-- `disableDeviceInputs` - Replace interface [room.disableDeviceInputs](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#disableDeviceInputs)
-- `disableEraseImage` - Replace interface [room.disableEraseImage](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#disableEraseImage) **This method only prohibits the eraser that erases the entire image from erasing images, partial eraser is invalid**
-- `disableCameraTransform` - Replace interface [room.disableCameraTransform](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#disableCameraTransform) (Version >=1.1.17)
+- `disableDeviceInputs` - Replace interface [room.disableDeviceInputs](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#disabledeviceinputs)
+- `disableEraseImage` - Replace interface [room.disableEraseImage](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#disableeraseimage) **This method only prohibits the eraser that erases the entire image from erasing images, partial eraser is invalid**
+- `disableCameraTransform` - Replace interface [room.disableCameraTransform](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#disablecameratransform) (Version >=1.1.17)
 - `insertText` - Insert text at the specified position (Version >=1.1.18)
 - `updateText` - Edit the content of the specified text (Version >=1.1.18)
 - `blurText` - Remove text focus (Version >=1.1.19)
@@ -277,10 +302,13 @@ The following interfaces are involved:
 - `getElements` - Get all elements in the specified scene (Version >=1.1.19)
 - `stopDraw` - Stop Draw event (Version >=1.1.19)
 - `setViewLocalScenePathChange` - Set the local scene path change for the whiteboard view (Version >=1.1.27)
+- `insertMarkmap` - Insert markdown text to whiteboard (Version >=1.1.32) **This method requires enabling extras.useBackgroundThread**
+- `updateMarkmap` - Update markdown text in whiteboard (Version >=1.1.32) **This method requires enabling extras.useBackgroundThread**
+- `insertBackgroundImage` - Insert whiteboard background image (Version >=1.1.32) **This method requires enabling extras.useBackgroundThread**
 
 5. Incompatible interfaces
-- [`exportScene`](https://doc.shengwang.cn/api-ref/whiteboard/javascript/interfaces/room#exportScene) - After appliance-plugin is enabled, notes cannot be exported in room mode
-- [Server-side screenshot](https://doc.shengwang.cn/doc/whiteboard/restful/fastboard-sdk/restful-wb/operations/post-v5-rooms-uuid-screenshots) - After appliance-plugin is enabled, notes cannot be obtained by calling server-side screenshot, but need to use `screenshotToCanvasAsync` to obtain the screenshot
+- [`exportScene`](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#exportscene) - After appliance-plugin is enabled, notes cannot be exported in room mode
+- [Server-side screenshot](https://docs.agora.io/en/interactive-whiteboard/reference/whiteboard-api/screenshots?platform=web#screenshot-a-scene-post) - After appliance-plugin is enabled, notes cannot be obtained by calling server-side screenshot, but need to use `screenshotToCanvasAsync` to obtain the screenshot
 
 #### New Features
 ##### Laser Pen Tool (Version >=1.1.1)
@@ -291,7 +319,7 @@ room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType:
 ![Image](https://github.com/user-attachments/assets/3cd10c3a-b17b-4c01-b9d4-868c69116d96)
 
 ##### Extended Tools (Version >=1.1.1)
-On the original [whiteboard tools](https://doc.shengwang.cn/api-ref/whiteboard/javascript/globals.html#memberstate) type, some extended function attributes have been added, as follows:
+On the original [whiteboard tools](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/globals.html#memberstate) type, some extended function attributes have been added, as follows:
 
 ```js
 export enum EStrokeType {
@@ -574,6 +602,75 @@ html {
 }
 ```
 
+##### Insert Mind Map (requires markdown text) (Version >=1.1.32)
+```ts
+import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
+const plugin = await ApplianceMultiPlugin.getInstance(manager, {
+    options: {
+        cdn: {...}
+        extras: {
+            ...,
+            useBackgroundThread: true,
+        }
+    },
+});
+const markId = await plugin.insertMarkmap(viewId, {
+    data: `# First Level Title
+## Second Level Title 1
+### Third Level Title 1
+### Third Level Title 2
+#### Fourth Level Title 1
+#### Fourth Level Title 2
+#### Fourth Level Title 3
+## Second Level Title 2
+### Third Level Title 1
+### Third Level Title 2`,
+    uuid: 'unique identifier',
+    centerX: 0,
+    centerY: 0,
+    width: 200,
+    height: 200,
+    locked: false,
+});
+plugin.updateMarkmap(viewId, markId, {
+    data: `# First Level Title
+## Second Level Title 1
+## Second Level Title 2
+### Third Level Title 1
+### Third Level Title 2`,
+    uuid: 'unique identifier',
+    centerX: 0,
+    centerY: 0,
+    width: 200,
+    height: 200,
+    locked: false,
+} )
+
+```
+![Image](https://github.com/user-attachments/assets/0d278bd5-1cc7-413f-881c-8a43ef1429e3)
+##### Insert Background Image (Version >=1.1.32)
+```ts
+import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
+const plugin = await ApplianceMultiPlugin.getInstance(manager, {
+    options: {
+        cdn: {...}
+        extras: {
+            ...,
+            useBackgroundThread: true,
+        }
+    },
+});
+plugin.insertBackgroundImage(viewId, {
+    src: 'https://example.com/background.png'
+    uuid: 'unique identifier',
+    centerX: 0,
+    centerY: 0,
+    width: 200,
+    height: 200,
+    locked: true,
+})
+```
+
 ##### Handwriting graphics automatic association function:`autoDraw`, need to combine [@netless/appliance-extend-auto-draw-plugin](https://www.npmjs.com/package/@netless/appliance-extend-auto-draw-plugin)
 ```js
 export interface AutoDrawOptions {
@@ -654,6 +751,11 @@ plugin.usePlugin(autoDrawPlugin);
             * mainThread: Use main thread, canvas drawing data.
             */
             useWorker?: UseWorkerType;
+            /** Whether to use backgroundThread, default value is ``false``
+             * true: Use backgroundThread, can call ``insertMarkmap``, ``updateMarkmap``, ``insertBackgroundImage``
+             * false: Do not use backgroundThread
+             */
+            useBackgroundThread?: boolean;
             /** Synchronization data configuration item */
             syncOpt?: SyncOpt;
             /** Canvas configuration item */
@@ -690,3 +792,162 @@ const appliancePlugin = await ApplianceSinglePlugin.getInstance(...)
 appliancePlugin.currentManager  // Can view package version number, internal status, etc.
 appliancePlugin.currentManager.consoleWorkerInfo()  // Can view drawing information on worker
 ```
+
+## Usage Examples
+
+### Basic Usage Example
+
+```js
+import { ApplianceSinglePlugin } from '@netless/appliance-plugin';
+import '@netless/appliance-plugin/dist/style.css';
+
+// Method 1: Using CDN (recommended for production)
+const plugin = await ApplianceSinglePlugin.getInstance(room, {
+  options: {
+    cdn: {
+      fullWorkerUrl: 'https://your-cdn.com/fullWorker.js',
+      subWorkerUrl: 'https://your-cdn.com/subWorker.js',
+    },
+  },
+});
+
+// Method 2: Using local worker files (suitable for development)
+import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
+import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
+const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
+const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
+const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
+const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
+
+const plugin = await ApplianceSinglePlugin.getInstance(room, {
+  options: {
+    cdn: {
+      fullWorkerUrl,
+      subWorkerUrl,
+    },
+  },
+});
+```
+
+### Switch Drawing Tools
+
+```js
+import { ApplianceNames, EStrokeType } from '@netless/appliance-plugin';
+
+// Switch to pencil tool
+room.setMemberState({ currentApplianceName: ApplianceNames.pencil });
+
+// Switch to rectangle tool
+room.setMemberState({ currentApplianceName: ApplianceNames.rectangle });
+
+// Switch to laser pen tool
+room.setMemberState({ 
+  currentApplianceName: ApplianceNames.laserPen,
+  strokeType: EStrokeType.Normal 
+});
+
+// Switch to text tool
+room.setMemberState({ currentApplianceName: ApplianceNames.text });
+```
+
+### Custom Style Example
+
+```js
+// Set brush style to dotted line
+room.setMemberState({ 
+  strokeType: EStrokeType.Dotted,
+  strokeOpacity: 0.8 
+});
+
+// Set shape fill
+room.setMemberState({ 
+  fillColor: [255, 0, 0],  // Red
+  fillOpacity: 0.5 
+});
+
+// Set text style
+room.setMemberState({ 
+  textOpacity: 0.9,
+  textBgColor: [255, 255, 0],  // Yellow background
+  textBgOpacity: 0.3 
+});
+```
+
+### Text Editing Example
+
+```js
+// Insert text at specified position
+const textId = plugin.insertText(100, 100, 'Hello World');
+
+// Edit text content
+plugin.updateText(textId, 'Updated Text');
+
+// Remove text focus
+plugin.blurText();
+```
+
+### Minimap Function Example
+
+```js
+// Create minimap
+const minimapDiv = document.getElementById('minimap');
+await plugin.createMiniMap('mainView', minimapDiv);
+
+// Destroy minimap
+await plugin.destroyMiniMap('mainView');
+```
+
+### Undo/Redo Example
+
+```js
+// Undo operation
+const undoSteps = plugin.undo();
+
+// Redo operation
+const redoSteps = plugin.redo();
+
+// Check if undo/redo is possible
+const canUndo = plugin.canUndoSteps() > 0;
+const canRedo = plugin.canRedoSteps() > 0;
+```
+
+## FAQ
+
+### 1. How to choose the right integration method?
+
+- **fastboard**: If you are using the fastboard framework, it is recommended to use fastboard's integration method, which has the simplest configuration
+- **Multi-window scenario**: If you need multi-window functionality, use `ApplianceMultiPlugin`
+- **Single whiteboard scenario**: If you only need single whiteboard functionality, use `ApplianceSinglePlugin`
+
+### 2. Worker file deployment method selection?
+
+- **CDN deployment** (recommended): Suitable for production environments, can reduce main package size (main package ~400kB, two workers ~800kB each)
+- **Local packaging**: Suitable for development environments or scenarios where package size is not a concern
+
+### 3. Performance optimization recommendations
+
+- Use CDN deployment for worker files to reduce main package size
+- Reasonably configure `bufferSize` to adjust canvas cache size according to device performance
+- On mobile or low-performance devices, consider using `useSimple: true` simple mode
+- If there are unnecessary features, you can avoid enabling `useBackgroundThread: true`
+
+### 4. Compatibility notes
+
+- Supports modern browsers (Chrome, Firefox, Safari, Edge)
+- Mobile browser support depends on OffscreenCanvas support
+- Devices that do not support OffscreenCanvas will automatically downgrade to main thread mode
+
+## Version History
+
+For detailed version update records, please refer to [CHANGELOG.md](./CHANGELOG.md)
+
+## License
+
+MIT License
+
+## Related Links
+
+- [white-web-sdk](https://www.npmjs.com/package/white-web-sdk)
+- [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)
+- [fastboard](https://github.com/netless-io/fastboard)
+- [Official Documentation](https://doc.shengwang.cn/)

package/cdn/cdn.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="/fullWorker-8cQCRH.js",e="/subWorker-Bj1Oy7.js";exports.fullWorkerUrl=r;exports.subWorkerUrl=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="/fullWorker-D5ZxtP.js",e="/subWorker-DJi31K.js";exports.fullWorkerUrl=r;exports.subWorkerUrl=e;