@netless/window-manager 1.0.0-canary.57 → 1.0.0-canary.59

package/src/App/AppProxy.ts

@@ -114,7 +114,7 @@ export class AppProxy implements PageRemoveService {
             emitter.on("memberStateChange", this.onMemberStateChange)
         );
         this.sideEffectManager.add(() => [
-            this.syncCamera$.reaction(syncCamera => {
+            this.syncCamera$.subscribe(syncCamera => {
                 if (!syncCamera) {
                     if (this.viewSync) {
                         this.viewSync.destroy();
@@ -328,12 +328,18 @@ export class AppProxy implements PageRemoveService {
                 this.setViewFocusScenePath();
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
-                    const result = await app.setup(context);
-                    this.appResult = result;
-                    appRegister.notifyApp(this.kind, "created", { appId, result });
-                    this.fixMobileSize();
-                    if (this.isAddApp) {
-                        this.setupDone();
+                    try {
+                        const result = await app.setup(context);
+                        this.appResult = result;
+                        appRegister.notifyApp(this.kind, "created", { appId, result });
+                        this.fixMobileSize();
+                        if (this.isAddApp) {
+                            this.setupDone();
+                        }
+                    } catch (error) {
+                        console.error(error);
+                        this.setupFailed();
+                        this.destroy(false, true, true);
                     }
                 }, SETUP_APP_DELAY);
             });
@@ -355,7 +361,6 @@ export class AppProxy implements PageRemoveService {
                     width: this.box.intrinsicWidth,
                     height: this.box.intrinsicHeight,
                 });
-                this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
             console.error(error);
@@ -701,6 +706,13 @@ export class AppProxy implements PageRemoveService {
     private setupDone = () => {
         this.store.updateAppAttributes(this.id, "setup", true);
         this.manager.dispatchInternalEvent(Events.InvokeAttributesUpdateCallback);
+        if (this.boxManager && this.box) {
+            this.boxManager.focusBox({ appId: this.id }, false);
+        }
+    }
+
+    private setupFailed = () => {
+        this.store.cleanAppAttributes(this.id);
     }
 
     public close(): Promise<void> {

package/src/Cursor/Cursor.svelte

@@ -15,12 +15,16 @@
     export let color: string;
     export let cursorTagBackgroundColor: string;
     export let opacity: number;
+    export let pencilEraserSize: number;
 
     $: hasName = !isEmpty(cursorName);
     $: hasTagName = !isEmpty(tagName);
     $: hasAvatar = !isEmpty(avatar);
     $: display = visible ? "initial" : "none";
     $: isLaserPointer = appliance === ApplianceNames.laserPointer;
+    $: isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser;
+    $: offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "";
+    $: pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "";
 
     const computedAvatarStyle = () => {
         return Object.entries({
@@ -40,7 +44,7 @@
     style="transform: translateX({x}px) translateY({y}px);display: {display}"
 >   
     {#if !isLaserPointer}
-        <div class="netless-window-manager-cursor-name">
+        <div class="netless-window-manager-cursor-name {offset} {pencilEraserSize3ImageOffset}">
             <div
                 class={theme}
                 style="background-color: {backgroundColor};color: {color};opacity: {opacity}"
@@ -63,6 +67,6 @@
         </div>
     {/if}
     <div class="cursor-image-wrapper">
-        <img class="netless-window-manager-cursor-{appliance}-image" {src} alt={appliance} />
+        <img class="netless-window-manager-cursor-{appliance}-image {pencilEraserSize3ImageOffset}" {src} alt={appliance} />
     </div>
 </div>

package/src/Cursor/Cursor.ts

@@ -157,14 +157,21 @@ export class Cursor {
             cursorTagBackgroundColor: this.memberCursorTagBackgroundColor,
             opacity: this.memberOpacity,
             tagName: this.memberTagName,
+            pencilEraserSize: this.member?.memberState.pencilEraserSize,
         };
     }
 
     private getIcon() {
         if (this.member) {
             const icons = this.cursorManager.applianceIcons;
-            const applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
-            return applianceSrc || icons[ApplianceNames.shape];
+            let applianceSrc = icons[ApplianceNames.shape];
+            if (this.memberApplianceName === ApplianceNames.pencilEraser) {
+                const size = this.member?.memberState.pencilEraserSize || 1;
+                applianceSrc = icons[`${this.memberApplianceName}${size}`];
+            } else {
+                applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
+            }
+            return applianceSrc;
         }
     }
 

package/src/Cursor/icons.ts

@@ -5,6 +5,9 @@ import eraser from "../image/eraser-cursor.png";
 import shape from "../image/shape-cursor.svg";
 import text from "../image/text-cursor.svg";
 import laser from "../image/laser-pointer-cursor.svg";
+import pencilEraser1 from "../image/pencil-eraser-1.svg";
+import pencilEraser2 from "../image/pencil-eraser-2.svg";
+import pencilEraser3 from "../image/pencil-eraser-3.svg";
 
 export const ApplianceMap: {
     [key: string]: string;
@@ -15,4 +18,7 @@ export const ApplianceMap: {
     [ApplianceNames.shape]: shape,
     [ApplianceNames.text]: text,
     [ApplianceNames.laserPointer]: laser,
+    ["pencilEraser1"]: pencilEraser1,
+    ["pencilEraser2"]: pencilEraser2,
+    ["pencilEraser3"]: pencilEraser3,
 };

package/src/View/ScrollMode.ts

@@ -4,6 +4,7 @@ import { combine, derive, Val } from "value-enhancer";
 import { createScrollStorage } from "../storage";
 import { SCROLL_MODE_BASE_HEIGHT, SCROLL_MODE_BASE_WIDTH } from "../constants";
 import { SideEffectManager } from "side-effect-manager";
+import { round } from "lodash";
 import type { ReadonlyVal } from "value-enhancer";
 import type { AppManager } from "../AppManager";
 import type { ScrollStorage } from "../storage";
@@ -138,9 +139,9 @@ export class ScrollMode {
             [this._scrollTop$, this._page$, maxScrollPage$],
             ([scrollTop, page, maxScrollPage]) => {
                 return {
-                    scrollTop,
-                    page,
-                    maxScrollPage,
+                    scrollTop: round(scrollTop, 2),
+                    page: round(page, 2),
+                    maxScrollPage: round(maxScrollPage, 2),
                 };
             }
         );

package/src/View/ViewSync.ts

@@ -3,8 +3,9 @@ import { CameraSynchronizer } from "./CameraSynchronizer";
 import { combine, derive } from "value-enhancer";
 import { isEqual } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
+import { Val } from "value-enhancer";
 import type { Camera, View } from "white-web-sdk";
-import type { Val, ReadonlyVal } from "value-enhancer";
+import type { ReadonlyVal } from "value-enhancer";
 import type { ICamera, ISize } from "../AttributesDelegate";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { ManagerViewMode } from "../typings";
@@ -43,6 +44,8 @@ export class ViewSync {
         ]);
         if (context.viewMode$) {
             this.needRecoverCamera$ = derive(context.viewMode$, mode => mode !== "scroll");
+        } else {
+            this.needRecoverCamera$ = new Val(true);
         }
         const camera$size$ = combine([this.context.camera$, this.context.size$]);
         camera$size$.reaction(([camera, size]) => {

package/src/image/pencil-eraser-1.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="17" height="25" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/image/pencil-eraser-2.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="25" height="33" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/image/pencil-eraser-3.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="50" viewBox="0 0 34 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="33" height="49" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/index.ts

@@ -1019,6 +1019,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
             });
         }, 500);
     }
+    /**
+     * 切换 focus 到指定的 app, 并且把这个 app 放到最前面
+     */
+     public focusApp(appId: string) {
+        const box = this.boxManager?.getBox(appId);
+        if (box) {
+            this.boxManager?.focusBox({ appId }, false);
+            // 1.0 版本这里会有正式的 api
+            (this.boxManager?.teleBoxManager as any).makeBoxTop(box, false);
+        }
+    }
 
     public createPPTHandler() {
         return {

package/src/style.css

@@ -119,6 +119,20 @@
     margin-top: 3px;
 }
 
+.netless-window-manager-cursor-pencilEraser-image {
+    margin-left: -22px;
+    margin-top: 3px;
+}
+
+.netless-window-manager-laserPointer-pencilEraser-offset {
+    margin-left: -18px;
+}
+
+.netless-window-manager-pencilEraser-3-offset {
+    margin-top: -14px;
+    margin-left: -6px;
+}
+
 .netless-window-manager-cursor-name {
     width: 100%;
     height: 48px;

package/src/typings.ts

@@ -87,7 +87,7 @@ export type RegisterParams<AppOptions = any, SetupResult = any, Attributes exten
 
 export type AppListenerKeys = keyof AppEmitterEvent;
 
-export type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
+export type ApplianceIcons = Partial<Record<`${ApplianceNames}` | string, string>>;
 
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };