@netless/window-manager 0.4.70 → 0.4.71

package/dist/index.mjs

@@ -954,6 +954,9 @@ class AppContext {
         setTimeout(() => {
           var _a;
           (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
+          if (WindowManager.supportTeachingAidsPlugin) {
+            callbacks$1.emit("onAppViewMounted", { appId: this.appId, view });
+          }
         }, 1e3);
       }
     };
@@ -1397,6 +1400,9 @@ class AppProxy {
       var _a2;
       if (this.view && fullPath && fullPath !== ((_a2 = this.view) == null ? void 0 : _a2.focusScenePath)) {
         setViewFocusScenePath(this.view, fullPath);
+        if (WindowManager.supportTeachingAidsPlugin) {
+          callbacks$1.emit("onAppScenePathChange", { appId: this.id, view: this.view });
+        }
       }
     }, 50);
     this.notifyPageStateChange = debounce$1(() => {
@@ -1514,6 +1520,9 @@ class AppProxy {
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.afterSetupApp(boxInitState);
           this.fixMobileSize();
+          if (WindowManager.supportTeachingAidsPlugin) {
+            callbacks$1.emit("onAppSetup", appId);
+          }
         }, SETUP_APP_DELAY);
       });
       (_a = this.boxManager) == null ? void 0 : _a.createBox({
@@ -2243,6 +2252,9 @@ class AppManager {
         x: payload.x,
         y: payload.y
       });
+      if (WindowManager.supportTeachingAidsPlugin) {
+        callbacks$1.emit("onBoxMove", payload);
+      }
     };
     this.onBoxResize = (payload) => {
       if (payload.width && payload.height) {
@@ -2251,19 +2263,31 @@ class AppManager {
           width: payload.width,
           height: payload.height
         });
+        if (WindowManager.supportTeachingAidsPlugin) {
+          callbacks$1.emit("onBoxResize", payload);
+        }
       }
     };
     this.onBoxFocus = (payload) => {
       this.windowManger.safeSetAttributes({ focus: payload.appId });
+      if (WindowManager.supportTeachingAidsPlugin) {
+        callbacks$1.emit("onBoxFocus", payload);
+      }
     };
     this.onBoxClose = (payload) => {
       const appProxy = this.appProxies.get(payload.appId);
       if (appProxy) {
         appProxy.destroy(false, true, true, payload.error);
       }
+      if (WindowManager.supportTeachingAidsPlugin) {
+        callbacks$1.emit("onBoxClose", payload);
+      }
     };
     this.onBoxStateChange = (payload) => {
       this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
+      if (WindowManager.supportTeachingAidsPlugin) {
+        callbacks$1.emit("onBoxStateChange", payload);
+      }
     };
     this.addAppsChangeListener = () => {
       this.refresher.add("apps", () => {
@@ -2417,6 +2441,10 @@ class AppManager {
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
     });
   }
+  getMemberState() {
+    var _a;
+    return ((_a = this.room) == null ? void 0 : _a.state.memberState) || { strokeColor: [0, 0, 0] };
+  }
   async onRootDirRemoved(needClose = true) {
     this.setMainViewScenePath(INIT_DIR);
     this.createRootDirScenesCallback();
@@ -2593,6 +2621,9 @@ class AppManager {
       this.setMainViewFocusPath();
     }
     internalEmitter.emit("mainViewMounted");
+    if (WindowManager.supportTeachingAidsPlugin) {
+      callbacks$1.emit("onMainViewMounted", mainView);
+    }
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -6764,8 +6795,8 @@ function create_if_block(ctx) {
   let t1;
   let t2;
   let div1_class_value;
-  let if_block0 = ctx[16] && create_if_block_2(ctx);
-  let if_block1 = ctx[17] && create_if_block_1(ctx);
+  let if_block0 = ctx[17] && create_if_block_2(ctx);
+  let if_block1 = ctx[18] && create_if_block_1(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6786,7 +6817,7 @@ function create_if_block(ctx) {
       set_style(div0, "background-color", ctx[2]);
       set_style(div0, "color", ctx[9]);
       set_style(div0, "opacity", ctx[11]);
-      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-name " + ctx[14] + " " + ctx[13]);
+      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-name " + ctx[15] + " " + ctx[14]);
     },
     m(target, anchor) {
       insert(target, div1, anchor);
@@ -6801,7 +6832,7 @@ function create_if_block(ctx) {
         if_block1.m(div0, null);
     },
     p(ctx2, dirty) {
-      if (ctx2[16]) {
+      if (ctx2[17]) {
         if (if_block0) {
           if_block0.p(ctx2, dirty);
         } else {
@@ -6815,7 +6846,7 @@ function create_if_block(ctx) {
       }
       if (dirty & 1)
         set_data(t1, ctx2[0]);
-      if (ctx2[17]) {
+      if (ctx2[18]) {
         if (if_block1) {
           if_block1.p(ctx2, dirty);
         } else {
@@ -6839,7 +6870,7 @@ function create_if_block(ctx) {
       if (dirty & 2048) {
         set_style(div0, "opacity", ctx2[11]);
       }
-      if (dirty & 24576 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-name " + ctx2[14] + " " + ctx2[13])) {
+      if (dirty & 49152 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-name " + ctx2[15] + " " + ctx2[14])) {
         attr(div1, "class", div1_class_value);
       }
     },
@@ -6860,7 +6891,7 @@ function create_if_block_2(ctx) {
     c() {
       img = element("img");
       attr(img, "class", "netless-window-manager-cursor-selector-avatar");
-      attr(img, "style", ctx[18]());
+      attr(img, "style", ctx[19]());
       if (!src_url_equal(img.src, img_src_value = ctx[7]))
         attr(img, "src", img_src_value);
       attr(img, "alt", "avatar");
@@ -6913,7 +6944,8 @@ function create_fragment(ctx) {
   let img;
   let img_class_value;
   let img_src_value;
-  let if_block = !ctx[12] && create_if_block(ctx);
+  let div1_class_value;
+  let if_block = !ctx[13] && create_if_block(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6922,14 +6954,14 @@ function create_fragment(ctx) {
       t2 = space();
       div0 = element("div");
       img = element("img");
-      attr(img, "class", img_class_value = "netless-window-manager-cursor-" + ctx[3] + "-image " + ctx[13]);
+      attr(img, "class", img_class_value = "netless-window-manager-cursor-" + ctx[3] + "-image " + ctx[14]);
       if (!src_url_equal(img.src, img_src_value = ctx[6]))
         attr(img, "src", img_src_value);
       attr(img, "alt", ctx[3]);
       attr(div0, "class", "cursor-image-wrapper");
-      attr(div1, "class", "netless-window-manager-cursor-mid");
+      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-mid" + (ctx[12] ? " netless-window-manager-cursor-custom" : ""));
       set_style(div1, "transform", "translateX(" + ctx[4] + "px) translateY(" + ctx[5] + "px)");
-      set_style(div1, "display", ctx[15]);
+      set_style(div1, "display", ctx[16]);
     },
     m(target, anchor) {
       insert(target, div1, anchor);
@@ -6940,7 +6972,7 @@ function create_fragment(ctx) {
       append(div0, img);
     },
     p(ctx2, [dirty]) {
-      if (!ctx2[12]) {
+      if (!ctx2[13]) {
         if (if_block) {
           if_block.p(ctx2, dirty);
         } else {
@@ -6952,7 +6984,7 @@ function create_fragment(ctx) {
         if_block.d(1);
         if_block = null;
       }
-      if (dirty & 8200 && img_class_value !== (img_class_value = "netless-window-manager-cursor-" + ctx2[3] + "-image " + ctx2[13])) {
+      if (dirty & 16392 && img_class_value !== (img_class_value = "netless-window-manager-cursor-" + ctx2[3] + "-image " + ctx2[14])) {
         attr(img, "class", img_class_value);
       }
       if (dirty & 64 && !src_url_equal(img.src, img_src_value = ctx2[6])) {
@@ -6961,11 +6993,14 @@ function create_fragment(ctx) {
       if (dirty & 8) {
         attr(img, "alt", ctx2[3]);
       }
+      if (dirty & 4096 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-mid" + (ctx2[12] ? " netless-window-manager-cursor-custom" : ""))) {
+        attr(div1, "class", div1_class_value);
+      }
       if (dirty & 48) {
         set_style(div1, "transform", "translateX(" + ctx2[4] + "px) translateY(" + ctx2[5] + "px)");
       }
-      if (dirty & 32768) {
-        set_style(div1, "display", ctx2[15]);
+      if (dirty & 65536) {
+        set_style(div1, "display", ctx2[16]);
       }
     },
     i: noop,
@@ -7001,6 +7036,7 @@ function instance($$self, $$props, $$invalidate) {
   let { cursorTagBackgroundColor } = $$props;
   let { opacity } = $$props;
   let { pencilEraserSize } = $$props;
+  let { custom } = $$props;
   const computedAvatarStyle = () => {
     return Object.entries({
       width: (hasName ? 19 : 28) + "px",
@@ -7026,7 +7062,7 @@ function instance($$self, $$props, $$invalidate) {
     if ("src" in $$props2)
       $$invalidate(6, src = $$props2.src);
     if ("visible" in $$props2)
-      $$invalidate(19, visible = $$props2.visible);
+      $$invalidate(20, visible = $$props2.visible);
     if ("avatar" in $$props2)
       $$invalidate(7, avatar = $$props2.avatar);
     if ("theme" in $$props2)
@@ -7038,32 +7074,34 @@ function instance($$self, $$props, $$invalidate) {
     if ("opacity" in $$props2)
       $$invalidate(11, opacity = $$props2.opacity);
     if ("pencilEraserSize" in $$props2)
-      $$invalidate(20, pencilEraserSize = $$props2.pencilEraserSize);
+      $$invalidate(21, pencilEraserSize = $$props2.pencilEraserSize);
+    if ("custom" in $$props2)
+      $$invalidate(12, custom = $$props2.custom);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 1) {
       hasName = !isEmpty(cursorName);
     }
     if ($$self.$$.dirty & 2) {
-      $$invalidate(17, hasTagName = !isEmpty(tagName));
+      $$invalidate(18, hasTagName = !isEmpty(tagName));
     }
     if ($$self.$$.dirty & 128) {
-      $$invalidate(16, hasAvatar = !isEmpty(avatar));
+      $$invalidate(17, hasAvatar = !isEmpty(avatar));
     }
-    if ($$self.$$.dirty & 524288) {
-      $$invalidate(15, display = visible ? "initial" : "none");
+    if ($$self.$$.dirty & 1048576) {
+      $$invalidate(16, display = visible ? "initial" : "none");
     }
     if ($$self.$$.dirty & 8) {
-      $$invalidate(12, isLaserPointer = appliance === ApplianceNames.laserPointer);
+      $$invalidate(13, isLaserPointer = appliance === ApplianceNames.laserPointer);
     }
-    if ($$self.$$.dirty & 4104) {
-      $$invalidate(21, isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser);
+    if ($$self.$$.dirty & 8200) {
+      $$invalidate(22, isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser);
     }
-    if ($$self.$$.dirty & 2097152) {
-      $$invalidate(14, offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "");
+    if ($$self.$$.dirty & 4194304) {
+      $$invalidate(15, offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "");
     }
-    if ($$self.$$.dirty & 1048576) {
-      $$invalidate(13, pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "");
+    if ($$self.$$.dirty & 2097152) {
+      $$invalidate(14, pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "");
     }
   };
   return [
@@ -7079,6 +7117,7 @@ function instance($$self, $$props, $$invalidate) {
     color2,
     cursorTagBackgroundColor,
     opacity,
+    custom,
     isLaserPointer,
     pencilEraserSize3ImageOffset,
     offset,
@@ -7102,22 +7141,78 @@ class Cursor$1 extends SvelteComponent {
       x: 4,
       y: 5,
       src: 6,
-      visible: 19,
+      visible: 20,
       avatar: 7,
       theme: 8,
       color: 9,
       cursorTagBackgroundColor: 10,
       opacity: 11,
-      pencilEraserSize: 20
+      pencilEraserSize: 21,
+      custom: 12
     });
   }
 }
+const staticCircle = `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23000' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23FFF'/%3E%3C/g%3E%3C/svg%3E`;
+function circleUrl(color2) {
+  return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23${color2}' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23${color2}'/%3E%3C/g%3E%3C/svg%3E`;
+}
+function crossUrl(color2) {
+  return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23${color2}' stroke-linejoin='round'/%3E%3Cpath d='M12 5V19' stroke='%23${color2}' stroke-linejoin='round'/%3E%3C/svg%3E`;
+}
+function cssCursor(url) {
+  return `url("${url}") 12 12, auto`;
+}
+function makeStyleContent(config) {
+  let result = "";
+  for (const cursor in config) {
+    result += `.netless-whiteboard.${cursor} {cursor: ${config[cursor]}}
+`;
+  }
+  return result;
+}
+const $style = document.createElement("style");
+function enableLocal(memberState) {
+  const [r2, g, b] = memberState.strokeColor;
+  const hex2 = ((1 << 24) + (r2 << 16) + (g << 8) + b).toString(16).slice(1);
+  $style.textContent = makeStyleContent({
+    "cursor-pencil": cssCursor(circleUrl(hex2)),
+    "cursor-eraser": cssCursor(staticCircle),
+    "cursor-rectangle": cssCursor(crossUrl(hex2)),
+    "cursor-ellipse": cssCursor(crossUrl(hex2)),
+    "cursor-straight": cssCursor(crossUrl(hex2)),
+    "cursor-arrow": cssCursor(crossUrl(hex2)),
+    "cursor-shape": cssCursor(crossUrl(hex2))
+  });
+  document.head.appendChild($style);
+  return () => {
+    if ($style.parentNode == null)
+      return;
+    document.head.removeChild($style);
+  };
+}
+const shapeAppliances = /* @__PURE__ */ new Set([
+  ApplianceNames.rectangle,
+  ApplianceNames.ellipse,
+  ApplianceNames.straight,
+  ApplianceNames.arrow,
+  ApplianceNames.shape
+]);
+function remoteIcon(applianceName, hex2) {
+  if (applianceName === ApplianceNames.pencil) {
+    return circleUrl(hex2);
+  } else if (applianceName === ApplianceNames.eraser) {
+    return staticCircle;
+  } else if (shapeAppliances.has(applianceName)) {
+    return crossUrl(hex2);
+  }
+}
 class Cursor {
   constructor(manager, memberId, cursorManager, wrapper) {
     this.manager = manager;
     this.memberId = memberId;
     this.cursorManager = cursorManager;
     this.wrapper = wrapper;
+    this.style = "default";
     this.move = (position) => {
       var _a;
       if (position.type === "main") {
@@ -7136,12 +7231,22 @@ class Cursor {
         }
       }
     };
+    this.setStyle = (style2) => {
+      this.style = style2;
+      if (this.component) {
+        this.component.$set({
+          src: this.getIcon(),
+          custom: this.isCustomIcon()
+        });
+      }
+    };
     this.leave = () => {
       this.hide();
     };
     this.updateMember();
     this.createCursor();
     this.autoHidden();
+    this.setStyle(cursorManager.style);
   }
   moveCursor(cursor, rect, view) {
     var _a, _b;
@@ -7150,6 +7255,10 @@ 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) {
@@ -7173,6 +7282,11 @@ class Cursor {
     const rgb = (_b = (_a = this.member) == null ? void 0 : _a.memberState) == null ? void 0 : _b.strokeColor.join(",");
     return `rgb(${rgb})`;
   }
+  get memberColorHex() {
+    var _a, _b;
+    const [r2, g, b] = ((_b = (_a = this.member) == null ? void 0 : _a.memberState) == null ? void 0 : _b.strokeColor) || [236, 52, 85];
+    return ((1 << 24) + (r2 << 16) + (g << 8) + b).toString(16).slice(1);
+  }
   get payload() {
     var _a;
     return (_a = this.member) == null ? void 0 : _a.payload;
@@ -7236,6 +7350,7 @@ class Cursor {
       appliance: this.memberApplianceName,
       avatar: this.memberAvatar,
       src: this.getIcon(),
+      custom: this.isCustomIcon(),
       visible: false,
       backgroundColor: this.memberColor,
       cursorName: this.memberCursorName,
@@ -7249,17 +7364,44 @@ class Cursor {
   }
   getIcon() {
     var _a;
-    if (this.member) {
-      const icons = this.cursorManager.applianceIcons;
-      let applianceSrc = icons[ApplianceNames.shape];
-      if (this.memberApplianceName === ApplianceNames.pencilEraser) {
-        const size2 = ((_a = this.member) == null ? void 0 : _a.memberState.pencilEraserSize) || 1;
-        applianceSrc = icons[`${this.memberApplianceName}${size2}`];
-      } else {
-        applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
-      }
-      return applianceSrc || icons[ApplianceNames.shape];
+    if (!this.member)
+      return;
+    const { memberApplianceName, memberColorHex } = this;
+    const { userApplianceIcons, applianceIcons } = this.cursorManager;
+    let iconsKey = this.memberApplianceName;
+    if (iconsKey === ApplianceNames.pencilEraser) {
+      iconsKey = `${iconsKey}${((_a = this.member) == null ? void 0 : _a.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];
+  }
+  isCustomIcon() {
+    var _a;
+    if (!this.member)
+      return false;
+    const { memberApplianceName, memberColorHex } = this;
+    const { userApplianceIcons } = this.cursorManager;
+    let iconsKey = this.memberApplianceName;
+    if (iconsKey === ApplianceNames.pencilEraser) {
+      iconsKey = `${iconsKey}${((_a = this.member) == null ? void 0 : _a.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;
   }
   updateMember() {
     this.member = findMemberByUid(this.manager.room, this.memberId);
@@ -7306,15 +7448,18 @@ const ApplianceMap = {
   ["pencilEraser2"]: pencilEraser2,
   ["pencilEraser3"]: pencilEraser3
 };
+const LocalCursorSideEffectId = "local-cursor";
 class CursorManager {
-  constructor(manager, enableCursor, applianceIcons) {
+  constructor(manager, enableCursor, cursorOptions, applianceIcons) {
     var _a;
     this.manager = manager;
     this.enableCursor = enableCursor;
     this.cursorInstances = /* @__PURE__ */ new Map();
+    this.userApplianceIcons = {};
     this.sideEffectManager = new SideEffectManager$1();
     this.store = this.manager.store;
-    this.applianceIcons = ApplianceMap;
+    this.leaveFlag = true;
+    this._style = "default";
     this.onCursorMove = (payload) => {
       const cursorInstance = this.initCursorInstance(payload.uid);
       if (payload.state === CursorState.Leave) {
@@ -7347,7 +7492,18 @@ class CursorManager {
       const now2 = Date.now();
       if (now2 - this.mouseMoveTimer > 48) {
         this.mouseMoveTimer = now2;
+        if (WindowManager.supportTeachingAidsPlugin && isRoom(WindowManager.displayer) && WindowManager.displayer.disableDeviceInputs) {
+          if (this.leaveFlag) {
+            this.manager.dispatchInternalEvent(Events.CursorMove, {
+              uid: this.manager.uid,
+              state: CursorState.Leave
+            });
+            this.leaveFlag = false;
+          }
+          return;
+        }
         this.mouseMoveListener_(event, isTouch);
+        this.leaveFlag = true;
       }
     };
     this.mouseLeaveListener = () => {
@@ -7391,9 +7547,43 @@ class CursorManager {
     this.sideEffectManager.add(() => {
       return internalEmitter.on("playgroundSizeChange", () => this.updateContainerRect());
     });
+    const room = this.manager.room;
+    if (room) {
+      this.sideEffectManager.add(() => {
+        const update2 = (state) => {
+          if (this.style === "custom" && state.memberState)
+            this.enableCustomCursor();
+        };
+        room.callbacks.on("onRoomStateChanged", update2);
+        return () => room.callbacks.off("onRoomStateChanged", update2);
+      });
+    }
     if (applianceIcons) {
-      this.applianceIcons = __spreadValues(__spreadValues({}, ApplianceMap), applianceIcons);
+      this.userApplianceIcons = applianceIcons;
     }
+    this.style = (cursorOptions == null ? void 0 : cursorOptions.style) || "default";
+  }
+  get applianceIcons() {
+    return __spreadValues(__spreadValues({}, ApplianceMap), this.userApplianceIcons);
+  }
+  get style() {
+    return this._style;
+  }
+  set style(value) {
+    if (this._style !== value) {
+      this._style = value;
+      this.cursorInstances.forEach((cursor) => {
+        cursor.setStyle(value);
+      });
+      if (value === "custom") {
+        this.enableCustomCursor();
+      } else {
+        this.sideEffectManager.flush(LocalCursorSideEffectId);
+      }
+    }
+  }
+  enableCustomCursor() {
+    this.sideEffectManager.add(() => enableLocal(this.manager.getMemberState()), LocalCursorSideEffectId);
   }
   canMoveCursor(member) {
     const isLaserPointer = (member == null ? void 0 : member.memberState.currentApplianceName) === ApplianceNames.laserPointer;
@@ -18236,7 +18426,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.70";
+    this.version = "0.4.71";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.28", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.17", "@netless/app-media-player": "0.1.0-beta.6", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
@@ -18248,6 +18438,7 @@ const _WindowManager = class extends InvisiblePlugin {
   static async mount(params) {
     const room = params.room;
     _WindowManager.container = params.container;
+    _WindowManager.supportTeachingAidsPlugin = params.supportTeachingAidsPlugin;
     const containerSizeRatio = params.containerSizeRatio;
     const debug2 = params.debug;
     const cursor = params.cursor;
@@ -18296,7 +18487,7 @@ const _WindowManager = class extends InvisiblePlugin {
     manager.appManager = new AppManager(manager);
     manager.appManager.polling = params.polling || false;
     manager._pageState = new PageStateImpl(manager.appManager);
-    manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
+    manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.cursorOptions, params.applianceIcons);
     if (containerSizeRatio) {
       manager.containerSizeRatio = containerSizeRatio;
     }
@@ -18336,11 +18527,7 @@ const _WindowManager = class extends InvisiblePlugin {
     return manager;
   }
   static initContainer(manager, container, params) {
-    const {
-      chessboard,
-      overwriteStyles,
-      fullscreen
-    } = params;
+    const { chessboard, overwriteStyles, fullscreen } = params;
     if (!_WindowManager.container) {
       _WindowManager.container = container;
     }
@@ -18718,6 +18905,16 @@ const _WindowManager = class extends InvisiblePlugin {
       this.appManager.polling = b;
     }
   }
+  get cursorStyle() {
+    var _a;
+    return ((_a = this.cursorManager) == null ? void 0 : _a.style) || "default";
+  }
+  set cursorStyle(value) {
+    if (!this.cursorManager) {
+      throw new Error("[WindowManager]: cursor is not enabled, please set { cursor: true }.");
+    }
+    this.cursorManager.style = value;
+  }
   get mainViewSceneIndex() {
     var _a;
     return ((_a = this._pageState) == null ? void 0 : _a.index) || 0;