@netless/window-manager 1.0.0-canary.42 → 1.0.0-canary.45

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.42",
+  "version": "1.0.0-canary.45",
   "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",
@@ -34,7 +34,7 @@
     "value-enhancer": "^1.3.2"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.3.0",
+    "@netless/app-docs-viewer": "^0.3.2",
     "@netless/app-plyr": "0.2.0",
     "@playwright/test": "^1.23.2",
     "@rollup/plugin-commonjs": "^20.0.0",

package/pnpm-lock.yaml

@@ -2,9 +2,9 @@ lockfileVersion: 5.4
 
 specifiers:
   '@juggle/resize-observer': ^3.3.1
-  '@netless/app-docs-viewer': ^0.3.0
+  '@netless/app-docs-viewer': ^0.3.2
   '@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
@@ -54,7 +54,7 @@ dependencies:
   value-enhancer: 1.3.2
 
 devDependencies:
-  '@netless/app-docs-viewer': 0.3.0
+  '@netless/app-docs-viewer': 0.3.2
   '@netless/app-plyr': 0.2.0
   '@playwright/test': 1.23.2
   '@rollup/plugin-commonjs': 20.0.0
@@ -231,8 +231,8 @@ packages:
     resolution: {integrity: sha512-6Wci+Tp3CgPt/B9B0a3J4s3yMgLNSku6w5TV6mN+61C71UqsRBv2FUibBf3tPGlNxebgPHMEUzKpb1ggE8KCKw==}
     dev: true
 
-  /@netless/app-docs-viewer/0.3.0:
-    resolution: {integrity: sha512-L+637oRiLvROQzcppvod2Qwmri1qg0GBMuQKow1Qsrt4HT2KYjAXz8ShBELcUs/+ISgvsyont0CipiBrBlbYsA==}
+  /@netless/app-docs-viewer/0.3.2:
+    resolution: {integrity: sha512-3gO8/AblCYQlu5kEnvI6+qJBu0VycSnIyVXfP6xu5obHHfF5aa+JGnDJ1/wZ+8DpvaydhWTuKvv+oVtuXDG0gg==}
     dependencies:
       remitter: 0.2.6
       value-enhancer: 1.3.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

@@ -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;
@@ -185,6 +185,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     private static params?: MountParams;
 
     private cameraUpdating = 0;
+    private nextCamera: Camera | null = null;
 
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
@@ -261,6 +262,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             containerStyle: params.containerStyle,
             stageStyle: params.stageStyle,
             fullscreen: params.fullscreen,
+            theme: params.theme,
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
@@ -833,27 +835,32 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 this.mainView.moveCamera(camera);
             }
             this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
-            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);
-            
+            this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+            clearTimeout(this.cameraUpdating);
+            this.cameraUpdating = 0;
+            this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+            this.nextCamera = nextCamera;
         }
     };
 
+    private onCameraUpdated = () => {
+        if (this.cameraUpdating) {
+            clearTimeout(this.cameraUpdating);
+            this.cameraUpdating = 0;
+        }
+        this.cameraUpdating = setTimeout(() => {
+            this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+            clearTimeout(this.cameraUpdating);
+            this.cameraUpdating = 0;
+            if (!this.appManager || !this.nextCamera) return;
+            this.appManager.mainViewProxy.storeCamera({
+                id: this.appManager.uid,
+                ...this.nextCamera
+            });
+            this.nextCamera = null;
+        }, 50);
+    }
+
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);
     }

package/vite.config.js

@@ -5,8 +5,8 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { dependencies, peerDependencies, version, devDependencies } from "./package.json"
 import { omit } from "lodash";
 
-export default defineConfig(({ mode }) => {
-    const isProd = mode === "production";
+export default defineConfig(() => {
+    // const isProd = mode === "production";
 
     return {
         test: {
@@ -40,7 +40,8 @@ export default defineConfig(({ mode }) => {
                 entry: path.resolve(__dirname, "src/index.ts"),
                 formats: ["es", "umd", "cjs"],
                 name: "WindowManager",
-                fileName: "index"
+                fileName: "index",
+
             },
             outDir: "dist",
             rollupOptions: {
@@ -49,7 +50,7 @@ export default defineConfig(({ mode }) => {
                     ...peerDependencies,
                 }),
             },
-            minify: isProd
+            minify: false
         },
     };
 })