@netless/window-manager 1.0.0-canary.9 → 1.0.0

package/src/BoxManager.ts

@@ -1,6 +1,6 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
+import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions, AppInitState } from "./index";
@@ -18,7 +18,6 @@ import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
-import { SideEffectManager } from "side-effect-manager";
 
 export { TELE_BOX_STATE };
 
@@ -46,12 +45,11 @@ export type CreateTeleBoxManagerConfig = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
-    stageRatio?: number;
-    highlightStage?: boolean;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
+    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,6 +70,7 @@ export const createBoxManager = (
     return new BoxManager(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
+            getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
@@ -80,7 +79,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );
@@ -88,93 +87,95 @@ export const createBoxManager = (
 
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
-    protected sideEffectManager: SideEffectManager;
 
     constructor(
         private context: BoxManagerContext,
-        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
-        this.sideEffectManager = new SideEffectManager();
         const { emitter, callbacks, boxEmitter } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-        this.sideEffectManager.add(() => [
-            // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-            this.teleBoxManager._state$.reaction(state => {
-                callbacks.emit("boxStateChange", state);
-                emitter.emit("boxStateChange", state);
-            }),
-            this.teleBoxManager._darkMode$.reaction(darkMode => {
-                callbacks.emit("darkModeChange", darkMode);
-            }),
-            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
-                callbacks.emit("prefersColorSchemeChange", colorScheme);
-            }),
-            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
-                if (skipUpdate) {
-                    return;
-                }
-                this.context.safeSetAttributes({ minimized });
-                if (minimized) {
-                    this.context.cleanFocus();
-                    this.blurAllBox();
-                } else {
-                    const topBox = this.getTopBox();
-                    if (topBox) {
-                        this.context.setAppFocus(topBox.id);
-                        this.focusBox({ appId: topBox.id }, false);
-                    }
-                }
-            }),
-            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
-                if (skipUpdate) {
-                    return;
+
+        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+        this.teleBoxManager._state$.reaction(state => {
+            callbacks.emit("boxStateChange", state);
+            emitter.emit("boxStateChange", state);
+        });
+
+        this.teleBoxManager._darkMode$.reaction(darkMode => {
+            callbacks.emit("darkModeChange", darkMode);
+        });
+        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            callbacks.emit("prefersColorSchemeChange", colorScheme);
+        });
+
+        // ppt 在最小化后刷新恢复正常大小，拿不到正确的宽高，需要手动触发一下窗口的 resize
+        this.teleBoxManager._minimized$.reaction(minimized => {
+            if (!minimized) {
+                setTimeout(() => {
+                    const offset = 0.001 * (Math.random() > 0.5 ? 1 : -1);
+                    this.teleBoxManager.boxes.forEach(box => {
+                        box.resize(box.intrinsicWidth + offset, box.intrinsicHeight + offset, true);
+                    });
+                }, 400);
+            }
+        });
+
+        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
+        this.teleBoxManager.events.on("minimized", minimized => {
+            this.context.safeSetAttributes({ minimized });
+            if (minimized) {
+                this.context.cleanFocus();
+                this.blurAllBox();
+            } else {
+                const topBox = this.getTopBox();
+                if (topBox) {
+                    this.context.setAppFocus(topBox.id);
+                    this.focusBox({ appId: topBox.id }, false);
                 }
-                this.context.safeSetAttributes({ maximized });
-            }),
-            this.teleBoxManager.events.on("removed", boxes => {
-                boxes.forEach(box => {
-                    boxEmitter.emit("close", { appId: box.id });
+            }
+        });
+        this.teleBoxManager.events.on("maximized", maximized => {
+            this.context.safeSetAttributes({ maximized });
+        });
+        this.teleBoxManager.events.on("removed", boxes => {
+            boxes.forEach(box => {
+                boxEmitter.emit("close", { appId: box.id });
+            });
+        });
+        this.teleBoxManager.events.on(
+            "intrinsic_move",
+            debounce((box: ReadonlyTeleBox): void => {
+                boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+            }, 50)
+        );
+        this.teleBoxManager.events.on(
+            "intrinsic_resize",
+            debounce((box: ReadonlyTeleBox): void => {
+                boxEmitter.emit("resize", {
+                    appId: box.id,
+                    width: box.intrinsicWidth,
+                    height: box.intrinsicHeight,
                 });
-            }),
-            this.teleBoxManager.events.on(
-                "intrinsic_move",
-                debounce((box: ReadonlyTeleBox): void => {
-                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
-                }, 50)
-            ),
-            this.teleBoxManager.events.on(
-                "intrinsic_resize",
-                debounce((box: ReadonlyTeleBox): void => {
-                    boxEmitter.emit("resize", {
-                        appId: box.id,
-                        width: box.intrinsicWidth,
-                        height: box.intrinsicHeight,
-                    });
-                }, 200)
-            ),
-            this.teleBoxManager.events.on("focused", box => {
-                if (box) {
-                    if (this.canOperate) {
-                        boxEmitter.emit("focus", { appId: box.id });
-                    } else {
-                        this.teleBoxManager.blurBox(box.id);
-                    }
+            }, 200)
+        );
+        this.teleBoxManager.events.on("focused", box => {
+            if (box) {
+                if (this.canOperate) {
+                    boxEmitter.emit("focus", { appId: box.id });
+                } else {
+                    this.teleBoxManager.blurBox(box.id);
                 }
-            }),
-            this.teleBoxManager.events.on("z_index", box => {
-                this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
-            }),
-            this.teleBoxManager._stageRect$.subscribe(stage => {
-                emitter.emit("playgroundSizeChange", stage);
-                this.context.notifyContainerRectUpdate(stage);
-            }),
-            emitter.on("writableChange", isWritable => {
-                this.teleBoxManager.setHighlightStage(isWritable);
-            }),
-            emitter.on("containerSizeRatioUpdate", ratio => {
-                this.teleBoxManager._stageRatio$.setValue(ratio);
-            }),
-        ]);
+            }
+        });
+        this.teleBoxManager.events.on("z_index", box => {
+            this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
+        });
+        emitter.on("playgroundSizeChange", () => this.updateManagerRect());
+        emitter.on("updateManagerRect", () => this.updateManagerRect());
+    }
+
+    private get mainView() {
+        return this.context.getMainView();
     }
 
     private get canOperate() {
@@ -205,16 +206,12 @@ export class BoxManager {
         return this.teleBoxManager.boxes.length;
     }
 
-    public get stageRect() {
-        return this.teleBoxManager.stageRect;
-    }
-
-    public createBox(params: CreateBoxParams): ReadonlyTeleBox | undefined {
+    public createBox(params: CreateBoxParams): void {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
         const { width, height } = params.app.config ?? {};
         const title = params.options?.title || params.appId;
-        const rect = this.teleBoxManager.rootRect;
+        const rect = this.teleBoxManager.containerRect;
 
         if (minwidth > 1) {
             minwidth = minwidth / rect.width;
@@ -232,21 +229,40 @@ export class BoxManager {
             height,
             id: params.appId,
         };
-        const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+        this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
-        return box;
+    }
+
+    public setBoxInitState(appId: string): void {
+        const box = this.teleBoxManager.queryOne({ id: appId });
+        if (box) {
+            if (box.state === TELE_BOX_STATE.Maximized) {
+                this.context.boxEmitter.emit("resize", {
+                    appId: appId,
+                    x: box.x,
+                    y: box.y,
+                    width: box.intrinsicWidth,
+                    height: box.intrinsicHeight,
+                });
+            }
+        }
     }
 
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
-        const root = WindowManager.playground;
+        const root = WindowManager.wrapper ? WindowManager.wrapper : document.body;
+        const rect = root.getBoundingClientRect();
         const initManagerState: TeleBoxManagerConfig = {
-            stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
+            containerRect: {
+                x: 0,
+                y: 0,
+                width: rect.width,
+                height: rect.height,
+            },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
-            highlightStage: createTeleBoxManagerConfig?.highlightStage,
         };
 
         const manager = new TeleBoxManager(initManagerState);
@@ -254,16 +270,20 @@ export class BoxManager {
             this.teleBoxManager.destroy();
         }
         this.teleBoxManager = manager;
-        const container = createTeleBoxManagerConfig?.collectorContainer;
+        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
         if (container) {
-            this.teleBoxManager.collector.set$collector(container);
-        }
-        if (createTeleBoxManagerConfig?.collectorStyles) {
-            this.teleBoxManager.collector.setStyles(createTeleBoxManagerConfig.collectorStyles);
+            this.setCollectorContainer(container);
         }
         return manager;
     }
 
+    public setCollectorContainer(container: HTMLElement) {
+        const collector = new TeleBoxCollector({
+            styles: this.createTeleBoxManagerConfig?.collectorStyles,
+        }).mount(container);
+        this.teleBoxManager.setCollector(collector);
+    }
+
     public getBox(appId: string): ReadonlyTeleBox | undefined {
         return this.teleBoxManager.queryOne({ id: appId });
     }
@@ -316,6 +336,15 @@ export class BoxManager {
         }
     }
 
+    public updateManagerRect(): void {
+        const rect = this.mainView.divElement?.getBoundingClientRect();
+        if (rect && rect.width > 0 && rect.height > 0) {
+            const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
+            this.teleBoxManager.setContainerRect(containerRect);
+            this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
+        }
+    }
+
     public moveBox({ appId, x, y }: MoveBoxParams): void {
         this.teleBoxManager.update(appId, { x, y }, true);
     }
@@ -387,16 +416,7 @@ export class BoxManager {
         this.teleBoxManager.update(id, { zIndex }, skipUpdate);
     }
 
-    public setRoot(root: HTMLElement) {
-        this.teleBoxManager._root$.setValue(root);
-    }
-
-    public setCollector(collector: HTMLElement) {
-        this.teleBoxManager.collector.set$collector(collector);
-    }
-
     public destroy() {
-        this.sideEffectManager.flushAll();
         this.teleBoxManager.destroy();
     }
 }

package/src/ContainerResizeObserver.ts

@@ -0,0 +1,75 @@
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { isFunction } from "lodash";
+import { WindowManager } from "./index";
+import type { EmitterType } from "./InternalEmitter";
+import type { UnsubscribeFn } from "emittery";
+
+const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+
+export class ContainerResizeObserver {
+    private containerResizeObserver?: ResizeObserver;
+    private disposer?: UnsubscribeFn;
+
+    constructor(private emitter: EmitterType) {}
+
+    public static create(
+        container: HTMLElement,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement,
+        emitter: EmitterType
+    ) {
+        const containerResizeObserver = new ContainerResizeObserver(emitter);
+        containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
+        return containerResizeObserver;
+    }
+
+    public observePlaygroundSize(
+        container: HTMLElement,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement
+    ) {
+        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+
+        this.containerResizeObserver = new ResizeObserver(entries => {
+            const containerRect = entries[0]?.contentRect;
+            if (containerRect) {
+                this.updateSizer(containerRect, sizer, wrapper);
+                this.emitter.emit("playgroundSizeChange", containerRect);
+            }
+        });
+
+        this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
+            const containerRect = container.getBoundingClientRect();
+            this.updateSizer(containerRect, sizer, wrapper);
+            this.emitter.emit("playgroundSizeChange", containerRect);
+        });
+
+        this.containerResizeObserver.observe(container);
+    }
+
+    public updateSizer(
+        { width, height }: DOMRectReadOnly,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement
+    ) {
+        if (width && height) {
+            if (height / width > WindowManager.containerSizeRatio) {
+                height = width * WindowManager.containerSizeRatio;
+                sizer.classList.toggle("netless-window-manager-sizer-horizontal", true);
+            } else {
+                width = height / WindowManager.containerSizeRatio;
+                sizer.classList.toggle("netless-window-manager-sizer-horizontal", false);
+            }
+            wrapper.style.width = `${width}px`;
+            wrapper.style.height = `${height}px`;
+        }
+    }
+
+    public disconnect() {
+        this.containerResizeObserver?.disconnect();
+        if (isFunction(this.disposer)) {
+            this.disposer();
+            this.disposer = undefined;
+        }
+    }
+}

package/src/Cursor/Cursor.svelte

@@ -2,6 +2,7 @@
     import { isEmpty } from "lodash";
     import { ApplianceNames } from "white-web-sdk";
 
+    export let uid: string;
     export let cursorName: string;
     export let tagName: string | undefined;
     export let backgroundColor: string;
@@ -15,12 +16,17 @@
     export let color: string;
     export let cursorTagBackgroundColor: string;
     export let opacity: number;
+    export let pencilEraserSize: number | undefined;
+    export let custom: boolean | undefined;
 
     $: hasName = !isEmpty(cursorName);
     $: hasTagName = !isEmpty(tagName);
     $: hasAvatar = !isEmpty(avatar);
-    $: display = visible ? "initial" : "none";
+    $: display = visible ? "" : "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({
@@ -36,11 +42,12 @@
 </script>
 
 <div
-    class="netless-window-manager-cursor-mid"
+    class={"netless-window-manager-cursor-mid" + (custom ? " netless-window-manager-cursor-custom" : "")}
     style="transform: translateX({x}px) translateY({y}px);display: {display}"
->   
+    data-cursor-uid={uid}
+>
     {#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 +70,10 @@
         </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.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+
+declare class Cursor extends SvelteComponentTyped<{
+    readonly cursorName: string;
+    readonly tagName?: string;
+    readonly backgroundColor: string;
+    readonly appliance: string;
+    readonly x: number;
+    readonly y: number;
+    readonly src?: string;
+    readonly visible: boolean;
+    readonly avatar: string;
+    readonly theme: string;
+    readonly color: string;
+    readonly cursorTagBackgroundColor: string;
+    readonly opacity: number;
+    readonly pencilEraserSize?: number;
+    readonly custom?: boolean;
+}> {}
+
+export default Cursor;

package/src/Cursor/Cursor.ts

@@ -1,12 +1,15 @@
-import App from "./Cursor.svelte";
-import { ApplianceNames } from "white-web-sdk";
-import { findMemberByUid } from "../Helper";
-import { omit } from "lodash";
-import type { Position } from "../AttributesDelegate";
 import type { RoomMember } from "white-web-sdk";
-import type { CursorManager } from "./index";
-import type { SvelteComponent } from "svelte";
+import type { CursorOptions } from "../index";
 import type { AppManager } from "../AppManager";
+import type { Position } from "../AttributesDelegate";
+import type { CursorManager } from "./index";
+
+import { omit } from "lodash";
+import { ApplianceNames } from "white-web-sdk";
+
+import { findMemberByUid } from "../Helper";
+import App from "./Cursor.svelte";
+import { remoteIcon } from "./icons2";
 
 export type Payload = {
     [key: string]: any;
@@ -15,7 +18,8 @@ export type Payload = {
 export class Cursor {
     private member?: RoomMember;
     private timer?: number;
-    private component?: SvelteComponent;
+    private component?: App;
+    private style: CursorOptions["style"] & string = "default";
 
     constructor(
         private manager: AppManager,
@@ -26,6 +30,7 @@ export class Cursor {
         this.updateMember();
         this.createCursor();
         this.autoHidden();
+        this.setStyle(cursorManager.style);
     }
 
     public move = (position: Position) => {
@@ -46,6 +51,16 @@ export class Cursor {
         }
     };
 
+    public setStyle = (style: typeof this.style) => {
+        this.style = style;
+        if (this.component) {
+            this.component.$set({
+                src: this.getIcon(),
+                custom: this.isCustomIcon(),
+            });
+        }
+    };
+
     public leave = () => {
         this.hide();
     };
@@ -56,6 +71,10 @@ export class Cursor {
         if (point) {
             let translateX = point.x - 2;
             let translateY = point.y - 18;
+            if (this.isCustomIcon()) {
+                translateX -= 11;
+                translateY += 4;
+            }
             if (type === "app") {
                 const wrapperRect = this.cursorManager.wrapperRect;
                 if (wrapperRect) {
@@ -80,6 +99,11 @@ export class Cursor {
         return `rgb(${rgb})`;
     }
 
+    public get memberColorHex(): string {
+        const [r, g, b] = this.member?.memberState?.strokeColor || [236, 52, 85];
+        return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+
     private get payload(): Payload | undefined {
         return this.member?.payload;
     }
@@ -140,11 +164,13 @@ export class Cursor {
 
     private initProps() {
         return {
+            uid: this.memberId,
             x: 0,
             y: 0,
             appliance: this.memberApplianceName as string,
             avatar: this.memberAvatar,
             src: this.getIcon(),
+            custom: this.isCustomIcon(),
             visible: false,
             backgroundColor: this.memberColor,
             cursorName: this.memberCursorName,
@@ -153,15 +179,53 @@ 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];
+    private getIcon(): string | undefined {
+        if (!this.member) return;
+
+        const { memberApplianceName, memberColorHex } = this;
+        const { userApplianceIcons, applianceIcons } = this.cursorManager;
+
+        let iconsKey: string | undefined = this.memberApplianceName;
+        if (iconsKey === ApplianceNames.pencilEraser) {
+            iconsKey = `${iconsKey}${this.member?.memberState.pencilEraserSize || 1}`;
+        }
+
+        const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
+        if (userApplianceSrc) return userApplianceSrc;
+
+        if (this.style === "custom" && memberApplianceName) {
+            const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
+            if (customApplianceSrc) return customApplianceSrc;
+        }
+
+        const applianceSrc = applianceIcons[iconsKey || ApplianceNames.shape];
+        return applianceSrc || applianceIcons[ApplianceNames.shape];
+    }
+
+    private isCustomIcon(): boolean {
+        if (!this.member) return false;
+
+        const { memberApplianceName, memberColorHex } = this;
+        const { userApplianceIcons } = this.cursorManager;
+
+        let iconsKey: string | undefined = this.memberApplianceName;
+        if (iconsKey === ApplianceNames.pencilEraser) {
+            iconsKey = `${iconsKey}${this.member?.memberState.pencilEraserSize || 1}`;
         }
+
+        const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
+        if (userApplianceSrc) return false;
+
+        if (this.style === "custom" && memberApplianceName) {
+            const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
+            if (customApplianceSrc) return true;
+        }
+
+        return false;
     }
 
     public updateMember() {

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,
 };