@netless/window-manager 1.0.0-canary.56 → 1.0.0-canary.58

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),
                 };
             }
         );
@@ -201,6 +202,15 @@ export class ScrollMode {
 
     public dispose(): void {
         this.sideEffect.flushAll();
+        this.scrollStorage.disconnect();
+        this._root$.destroy();
+        this._scale$.destroy();
+        this._scrollTop$.destroy();
+        this._whiteboard$.destroy();
+        this.scrollState$.destroy();
+        this._page$.destroy();
+        this._size$.destroy();
+        this._mainView$.destroy();
     }
 
     private getWhiteboardElement = (root: HTMLElement | null): HTMLElement | null => {

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

@@ -185,7 +185,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
     public emitter: Emittery<PublicEvent> = callbacks;
     public appManager?: AppManager;
     public cursorManager?: CursorManager;
-    public viewMode: ManagerViewMode = ViewMode.Broadcaster;
     public viewMode$ = new Val<ManagerViewMode>(ViewMode.Broadcaster);
     public playground$ = new Val<HTMLElement | undefined>(undefined);
     public isReplay = isPlayer(this.displayer);
@@ -638,7 +637,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         if (mode === ViewMode.Freedom || mode === "scroll") {
             mainViewProxy?.stop();
         }
-        this.viewMode = mode;
         this.viewMode$.setValue(mode);
     }
 
@@ -727,6 +725,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         return Boolean(this.appManager?.boxManager?.darkMode);
     }
 
+    public get viewMode() {
+        return this.viewMode$.value;
+    }
+
     public get prefersColorScheme(): TeleBoxColorScheme | undefined {
         if (this.appManager) {
             return this.appManager.boxManager?.prefersColorScheme;
@@ -1017,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] };