@netless/window-manager 1.0.0-canary.25 → 1.0.0-canary.28

package/src/index.ts

@@ -10,7 +10,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, omit, isNumber } from "lodash";
+import { isEqual, isNull, isObject, isNumber } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -27,6 +27,8 @@ import {
     putScenes,
     wait,
 } from "./Utils/Common";
+import { boxEmitter } from "./BoxEmitter";
+import { Val } from "value-enhancer";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
 import type { Apps, Position , ICamera, ISize } from "./AttributesDelegate";
@@ -37,15 +39,13 @@ import type {
     Room,
     InvisiblePluginContext,
     Camera,
-    AnimationMode,
     CameraBound,
     Point,
-    Rectangle,
     CameraState,
     Player,
     ImageInformation,
     SceneState,
-} from "white-web-sdk";
+ Rectangle} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
@@ -53,8 +53,6 @@ import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
-import { boxEmitter } from "./BoxEmitter";
-import { Val } from "value-enhancer";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -142,6 +140,8 @@ export type MountParams = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
+    containerStyle?: string;
+    stageStyle?: string;
     cursor?: boolean;
     debug?: boolean;
     disableCameraTransform?: boolean;
@@ -249,7 +249,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             collectorStyles: params.collectorStyles,
             prefersColorScheme: params.prefersColorScheme,
             stageRatio: WindowManager.containerSizeRatio,
-            highlightStage: params.highlightStage
+            containerStyle: params.containerStyle,
+            stageStyle: params.stageStyle,
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
@@ -292,12 +293,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     private static initContainer(
         container: HTMLElement,
+        target: HTMLElement,
         overwriteStyles: string | undefined
     ) {
         if (!WindowManager.container) {
             WindowManager.container = container;
         }
-        const { playground, mainViewElement } = setupWrapper(container);
+        const { playground, mainViewElement } = setupWrapper(container, target);
         WindowManager.playground = playground;
         if (overwriteStyles) {
             const style = document.createElement("style");
@@ -320,15 +322,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 container.appendChild(WindowManager.container.firstChild);
             }
         } else {
-            if (WindowManager.params) {
+            const teleboxContainer = this.boxManager?.teleBoxManager.$stage;
+            if (WindowManager.params && teleboxContainer) {
                 const params = WindowManager.params;
                 const mainViewElement = WindowManager.initContainer(
                     container,
+                    teleboxContainer,
                     params.overwriteStyles
                 );
                 if (this.boxManager && WindowManager.playground) {
                     this.boxManager.setRoot(WindowManager.playground);
-                    this.boxManager.mainViewElement$.setValue(mainViewElement);
                 }
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
                 if (WindowManager.playground) {
@@ -657,6 +660,22 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get baseCamera$() {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.camera$;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
+    public get baseSize$() {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.size$;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
     public get cameraState(): CameraState {
         if (this.appManager) {
             return this.appManager.mainViewProxy.cameraState;
@@ -763,30 +782,31 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(
-        camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }
-    ): void {
-        const pureCamera = omit(camera, ["animationMode"]);
+    public moveCamera(camera: Partial<Camera> ): void {
         const mainViewCamera = { ...this.mainView.camera };
-        if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
-        this.mainView.moveCamera(camera);
-        this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
-        setTimeout(() => {
-            this.appManager?.mainViewProxy.storeCurrentCamera();
-        }, 500);
-    }
-
-    public moveCameraToContain(
-        rectangle: Rectangle &
-            Readonly<{
-                animationMode?: AnimationMode;
-            }>
-    ): void {
-        this.mainView.moveCameraToContain(rectangle);
-        this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
-        setTimeout(() => {
-            this.appManager?.mainViewProxy.storeCurrentCamera();
-        }, 500);
+        const nextCamera = { ...mainViewCamera, ...camera };
+        if (isEqual(nextCamera, mainViewCamera)) return;
+        if (!this.appManager) return;
+        this.appManager.mainViewProxy.storeCamera({
+            id: this.appManager.uid,
+            ...nextCamera
+        });
+    }
+
+    public moveCameraToContain(rectangle: Rectangle): void {
+        if (!this.appManager) return;
+        const mainViewSize = this.appManager.mainViewProxy.size$.value;
+        if (mainViewSize) {
+            const wScale = mainViewSize.width / rectangle.width;
+            const hScale = mainViewSize.height / rectangle.height;
+            const nextScale = Math.min(wScale, hScale);
+            this.appManager.mainViewProxy.storeCamera({
+                id: this.appManager.uid,
+                scale: nextScale,
+                centerX: rectangle.originX,
+                centerY: rectangle.originY,
+            });
+        }
     }
 
     public convertToPointInWorld(point: Point): Point {
@@ -926,6 +946,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         emitter.emit("containerSizeRatioUpdate", ratio);
     }
 
+    public setContainerStyle(style: string) {
+        this.boxManager?.teleBoxManager.setContainerStyle(style);
+    }
+
+    public setStageStyle(style: string) {
+        this.boxManager?.teleBoxManager.setStageStyle(style);
+    }
+
     public createPPTHandler() {
         return {
             onPageJumpTo: (_pptUUID: string, index: number) => {
@@ -977,5 +1005,5 @@ setupBuiltin();
 
 export * from "./typings";
 
-export { BuiltinApps } from "./BuiltinApps";
+export { BuiltinApps, BuiltinAppsMap } from "./BuiltinApps";
 export type { PublicEvent } from "./callback";

package/src/style.css

@@ -7,49 +7,11 @@
     user-select: none;
 }
 
-.netless-window-manager-sizer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    overflow: hidden;
-    display: flex;
-}
-
-.netless-window-manager-sizer-horizontal {
-    flex-direction: column;
-}
-
-.netless-window-manager-sizer::before,
-.netless-window-manager-sizer::after {
-    flex: 1;
-    content: "";
-    display: block;
-}
-
-.netless-window-manager-chess-sizer::before,
-.netless-window-manager-chess-sizer::after {
-    background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%),
-        linear-gradient(-45deg, #b0b0b0 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #b0b0b0 75%),
-        linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
-    background-color: #fff;
-    background-size: 20px 20px;
-    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-}
-
-.netless-window-manager-wrapper {
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
 
 .netless-window-manager-main-view {
     position: absolute;
+    width: 100%;
+    height: 100%;
 }
 
 
@@ -180,5 +142,5 @@
 
 .window-manager-view-wrapper {
     position: absolute;
-    z-index: 1;
+    z-index: 10;
 }

package/src/typings.ts

@@ -30,6 +30,9 @@ export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptio
 
         /** App only single instance. */
         singleton?: boolean;
+
+        /** App box enableShadowDom. Default true */
+        enableShadowDOM?: boolean;
     };
     setup: (context: AppContext<Attributes, MagixEventPayloads, AppOptions>) => SetupResult;
 }
@@ -74,12 +77,15 @@ export type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any
     addHooks?: (emitter: Emittery<RegisterEvents<SetupResult>>) => void;
     /** dynamic load app package name */
     name?: string;
+    contentStyles?: string;
 };
 
 export type AppListenerKeys = keyof AppEmitterEvent;
 
 export type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
 
+export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
 export type { ReadonlyTeleBox, TeleBoxRect };

package/vite.config.js

@@ -1,4 +1,5 @@
 import path from "path";
+import dts from 'vite-plugin-dts'
 import { defineConfig } from 'vitest/config'
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { dependencies, peerDependencies, version, devDependencies } from "./package.json"
@@ -28,7 +29,8 @@ export default defineConfig(({ mode }) => {
                 experimental: {
                     useVitePreprocess: true,
                 },
-            })
+            }),
+            dts()
         ],
         build: {
             lib: {
@@ -45,7 +47,7 @@ export default defineConfig(({ mode }) => {
                     ...peerDependencies,
                 }),
             },
-            minify: isProd,
+            minify: isProd
         },
     };
-});
+})