@netless/window-manager 1.0.0-canary.40 → 1.0.0-canary.43

package/dist/src/index.d.ts

@@ -84,18 +84,18 @@ export declare type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** @deprecated */
-    chessboard?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
-    containerStyle?: string;
-    stageStyle?: string;
     cursor?: boolean;
     debug?: boolean;
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
+    /** @deprecated */
+    chessboard?: boolean;
     applianceIcons?: ApplianceIcons;
+    containerStyle?: string;
+    stageStyle?: string;
     fullscreen?: TeleBoxFullscreen;
     /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
     defaultBoxBodyStyle?: string | null;
@@ -126,6 +126,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     private _pageState?;
     private boxManager?;
     private static params?;
+    private cameraUpdating;
     containerSizeRatio: number;
     constructor(context: InvisiblePluginContext);
     static mount(params: MountParams): Promise<WindowManager>;
@@ -231,9 +232,9 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera: import("lodash").DebouncedFunc<(camera: Partial<Camera> & {
+    moveCamera: (camera: Partial<Camera> & {
         animationMode?: AnimationMode;
-    }) => void>;
+    }) => void;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;

package/docs/mirgrate-to-1.0.md

@@ -18,18 +18,31 @@
 
 ```html
 <div class="netless-window-manager-playground">
-    <div class="netless-window-manager-main-view"></div>
+    <div class="telebox-manager-container">
+        <div class="telebox-manager-stage">
+            <div class="netless-window-manager-main-view"></div>
+        </div>
+    </div>
 </div>
 ```
 
 
 ### `WindowManager.mount()` 迁移
 
-废弃 `chessboard` 属性
+废弃: `chessboard` 属性
 
-添加: `containerStyle` 配置
-添加: `stageStyle` 配置
-添加: `fullscreen` 配置
+- 添加: `containerStyle` 配置
+  - 配置 `telebox-manager-container` 的样式
+- 添加: `stageStyle` 配置**
+  - 配置 `telebox-manager-stage` 的样式
+- 添加: `defaultBoxBodyStyle` 配置
+  - 配置应用窗口默认 `body` 的样式
+- 添加: `defaultBoxStageStyle` 配置
+  - 配置应用窗口默认 `stage` 也就是内容区域的样式
+- 添加: `fullscreen` 配置
+  - 控制应用是否以全屏模式进入
+- 添加: `theme` 配置
+  - 配置默认的颜色变量
 
 ### `manager.setContainerSizeRatio()` 行为修改
 
@@ -37,3 +50,19 @@
 
 1.0 之后重复修改 `containerSizeRatio` 不会导致内容一致缩小
 
+### baseSize
+
+`baseSize` 主白板会去匹配内容到此大小
+
+添加: `manager.baseSize` 属性\
+添加: `manager.setBaseSize()` 方法\
+添加: `baseSizeChange` 回调
+
+### baseCamera
+
+主白板的 `camera` 会根据 `baseSize` 的值和 `baseCamera` 的值计算一个最终值
+
+添加: `manager.baseSize` 属性\
+添加: `baseCamera` 回调
+
+修改 `baseCamera` 依旧通过 `manager.moveCamera` 来实现

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.40",
+  "version": "1.0.0-canary.43",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.34",
+    "@netless/telebox-insider": "1.0.0-alpha.35",
     "emittery": "^0.11.0",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.2",

package/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@juggle/resize-observer': ^3.3.1
   '@netless/app-docs-viewer': ^0.3.0
   '@netless/app-plyr': 0.2.0
-  '@netless/telebox-insider': 1.0.0-alpha.34
+  '@netless/telebox-insider': 1.0.0-alpha.35
   '@playwright/test': ^1.23.2
   '@rollup/plugin-commonjs': ^20.0.0
   '@rollup/plugin-node-resolve': ^13.0.4
@@ -45,7 +45,7 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': 3.3.1
-  '@netless/telebox-insider': 1.0.0-alpha.34
+  '@netless/telebox-insider': 1.0.0-alpha.35
   emittery: 0.11.0
   lodash: 4.17.21
   p-retry: 4.6.2
@@ -247,8 +247,8 @@ packages:
     resolution: {integrity: sha512-7NzsJrba0R/mq/l10SkIZQwbrNVJyPxZYrjK6xL3Ts732iWAVuS2UB0u3s6iGeUVcqV39A679yva8APWRl4M0A==}
     dev: true
 
-  /@netless/telebox-insider/1.0.0-alpha.34:
-    resolution: {integrity: sha512-jU/+CR1WTwrzk0Wx73LfXZkXXUuxIEsltLDUtr9LiGEeb57EoXxO2hbimR/3EebRBv760VVthsI8hDfabiqZYA==}
+  /@netless/telebox-insider/1.0.0-alpha.35:
+    resolution: {integrity: sha512-uX/PUEoG/+CoaigeoWH+U07io93n+T89VjJDl5FRnd3gc/QfYf3ASSDQ9+7GjbOBUDUFwYHqVIxEhU67mGXCbw==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@types/shallowequal': 1.1.1

package/src/index.ts

@@ -10,7 +10,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { AnimationMode, InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, isNumber, debounce } from "lodash";
+import { isEqual, isNull, isObject, isNumber } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -135,18 +135,18 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** @deprecated */
-    chessboard?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
-    containerStyle?: string;
-    stageStyle?: string;
     cursor?: boolean;
     debug?: boolean;
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
+    /** @deprecated */
+    chessboard?: boolean;
     applianceIcons?: ApplianceIcons;
+    containerStyle?: string;
+    stageStyle?: string;
     fullscreen?: TeleBoxFullscreen;
     /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
     defaultBoxBodyStyle?: string | null;
@@ -184,6 +184,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
+    private cameraUpdating = 0;
+
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
     constructor(context: InvisiblePluginContext) {
@@ -805,7 +807,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera = debounce((camera: Partial<Camera> & { animationMode?: AnimationMode } ): void => {
+    public moveCamera = (camera: Partial<Camera> & { animationMode?: AnimationMode } ): void => {
         const mainViewCamera = { ...this.mainView.camera };
         const nextCamera = { ...mainViewCamera, ...camera };
         if (isEqual(nextCamera, mainViewCamera)) return;
@@ -831,15 +833,26 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 this.mainView.moveCamera(camera);
             }
             this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
-            setTimeout(() => {
-                if (!this.appManager) return;
-                this.appManager.mainViewProxy.storeCamera({
-                    id: this.appManager.uid,
-                    ...nextCamera
-                });
-            }, 200);
+            const onCameraUpdated = () => {
+                if (this.cameraUpdating) {
+                    clearTimeout(this.cameraUpdating);
+                }
+                this.cameraUpdating = setTimeout(() => {
+                    this.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
+                    clearTimeout(this.cameraUpdating);
+                    this.cameraUpdating = 0;
+                    if (!this.appManager) return;
+                    this.appManager.mainViewProxy.storeCamera({
+                        id: this.appManager.uid,
+                        ...nextCamera
+                    });
+                }, 50);
+            }
+            this.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
+            this.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
+            
         }
-    }, 200);
+    };
 
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);