@netless/window-manager 1.0.0-canary.73 → 1.0.0-canary.75

package/dist/View/ScrollMode.d.ts

@@ -2,6 +2,7 @@ import { SideEffectManager } from "side-effect-manager";
 import type { ReadonlyVal } from "value-enhancer";
 import type { AppManager } from "../AppManager";
 import type { ScrollStorage } from "../storage";
+import type { View } from "white-web-sdk";
 export declare type ScrollState = {
     scrollTop: number;
     page: number;
@@ -13,14 +14,14 @@ export declare class ScrollMode {
     private readonly _root$;
     private readonly _whiteboard$;
     private readonly _scrollTop$;
-    readonly _page$: ReadonlyVal<number>;
+    private readonly _page$;
     private readonly _scale$;
     private readonly _size$;
-    private readonly _mainView$;
     private baseWidth;
     private baseHeight;
-    scrollStorage: ScrollStorage;
+    readonly scrollStorage: ScrollStorage;
     readonly scrollState$: ReadonlyVal<ScrollState>;
+    get mainView(): View;
     setRoot(root: HTMLElement): void;
     constructor(manager: AppManager);
     private initScroll;
@@ -28,5 +29,6 @@ export declare class ScrollMode {
     private updateBound;
     dispose(): void;
     private getWhiteboardElement;
+    private shouldBroadcast;
     private onWheel;
 }

package/dist/index.js

@@ -2557,12 +2557,12 @@ class ScrollMode {
     this.onWheel = (ev) => {
       var _a2;
       const target = ev.target;
-      if (this.manager.canOperate && ((_a2 = this._whiteboard$.value) == null ? void 0 : _a2.contains(target))) {
+      if ((_a2 = this._whiteboard$.value) == null ? void 0 : _a2.contains(target)) {
         ev.preventDefault();
         ev.stopPropagation();
         const dy = ev.deltaY || 0;
         const { width } = this._size$.value;
-        if (dy && width > 0) {
+        if (this.shouldBroadcast() && dy && width > 0) {
           const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
           const scrollTop = this._scrollTop$.value + dy / this._scale$.value;
           this.scrollStorage.setState({
@@ -2573,8 +2573,7 @@ class ScrollMode {
       }
     };
     this._root$ = new valueEnhancer.Val(null);
-    this._mainView$ = new valueEnhancer.Val(this.manager.mainView);
-    this._mainView$.value.disableCameraTransform = false;
+    this.mainView.disableCameraTransform = false;
     if ((_a = manager.scrollBaseSize$) == null ? void 0 : _a.value) {
       this.baseWidth = manager.scrollBaseSize$.value.width;
       this.baseHeight = manager.scrollBaseSize$.value.height;
@@ -2594,9 +2593,9 @@ class ScrollMode {
     this._size$ = size$;
     this.sideEffect.add(() => {
       const onSizeUpdated = size$.setValue.bind(size$);
-      onSizeUpdated(this._mainView$.value.size);
-      this._mainView$.value.callbacks.on("onSizeUpdated", onSizeUpdated);
-      return () => this._mainView$.value.callbacks.off("onSizeUpdated", onSizeUpdated);
+      onSizeUpdated(this.mainView.size);
+      this.mainView.callbacks.on("onSizeUpdated", onSizeUpdated);
+      return () => this.mainView.callbacks.off("onSizeUpdated", onSizeUpdated);
     });
     this.sideEffect.add(() => {
       const onCameraUpdated = (camera) => {
@@ -2609,8 +2608,8 @@ class ScrollMode {
         });
         callbacks.emit("userScroll");
       };
-      this._mainView$.value.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
-      return () => this._mainView$.value.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
+      this.mainView.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+      return () => this.mainView.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
     });
     const scale$ = valueEnhancer.derive(size$, (size) => size.width / this.baseWidth);
     this._scale$ = scale$;
@@ -2677,25 +2676,28 @@ class ScrollMode {
       "initScroll"
     );
   }
+  get mainView() {
+    return this.manager.mainView;
+  }
   setRoot(root) {
     this._root$.setValue(root);
   }
   updateScroll(scrollTop) {
-    this._mainView$.value.moveCamera({
+    this.mainView.moveCamera({
       centerY: scrollTop,
       animationMode: whiteWebSdk.AnimationMode.Immediately
     });
   }
   updateBound(scrollTop, { height }, scale2) {
     if (scale2 > 0) {
-      this._mainView$.value.moveCameraToContain({
+      this.mainView.moveCameraToContain({
         originX: 0,
         originY: scrollTop - height / scale2 / 2,
         width: this.baseWidth,
         height: height / scale2,
         animationMode: whiteWebSdk.AnimationMode.Immediately
       });
-      this._mainView$.value.setCameraBound({
+      this.mainView.setCameraBound({
         damping: 1,
         maxContentMode: () => scale2,
         minContentMode: () => scale2,
@@ -2716,7 +2718,10 @@ class ScrollMode {
     this.scrollState$.destroy();
     this._page$.destroy();
     this._size$.destroy();
-    this._mainView$.destroy();
+  }
+  shouldBroadcast() {
+    var _a;
+    return this.manager.canOperate && ((_a = this.manager.room) == null ? void 0 : _a.disableDeviceInputs) === false;
   }
 }
 class AppManager {
@@ -12317,7 +12322,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.73";
+    this.version = "1.0.0-canary.75";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.4.0", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "jspdf": "^2.5.1", "lodash": "^4.17.21", "p-retry": "^5.1.2", "side-effect-manager": "^1.2.1", "uuid": "^9.0.0", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "1.0.0-canary.5", "@netless/app-plyr": "^0.2.4", "@playwright/test": "^1.28.1", "@rollup/plugin-commonjs": "^23.0.4", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-url": "^8.0.1", "@sveltejs/vite-plugin-svelte": "^2.0.2", "@tsconfig/svelte": "^3.0.0", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^9.0.0", "@typescript-eslint/eslint-plugin": "^5.46.1", "@typescript-eslint/parser": "^5.46.1", "@vitest/ui": "^0.25.7", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^8.29.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^4.0.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.8.1", "prettier-plugin-svelte": "^2.9.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^4.0.0", "svelte": "^3.54.0", "typescript": "^4.9.4", "vite": "^4.0.3", "vite-plugin-dts": "^1.7.1", "vitest": "^0.25.7", "white-web-sdk": "^2.16.40" } };
     this.emitter = callbacks;
     this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);

package/dist/index.mjs

@@ -2537,12 +2537,12 @@ class ScrollMode {
     this.onWheel = (ev) => {
       var _a2;
       const target = ev.target;
-      if (this.manager.canOperate && ((_a2 = this._whiteboard$.value) == null ? void 0 : _a2.contains(target))) {
+      if ((_a2 = this._whiteboard$.value) == null ? void 0 : _a2.contains(target)) {
         ev.preventDefault();
         ev.stopPropagation();
         const dy = ev.deltaY || 0;
         const { width } = this._size$.value;
-        if (dy && width > 0) {
+        if (this.shouldBroadcast() && dy && width > 0) {
           const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
           const scrollTop = this._scrollTop$.value + dy / this._scale$.value;
           this.scrollStorage.setState({
@@ -2553,8 +2553,7 @@ class ScrollMode {
       }
     };
     this._root$ = new Val(null);
-    this._mainView$ = new Val(this.manager.mainView);
-    this._mainView$.value.disableCameraTransform = false;
+    this.mainView.disableCameraTransform = false;
     if ((_a = manager.scrollBaseSize$) == null ? void 0 : _a.value) {
       this.baseWidth = manager.scrollBaseSize$.value.width;
       this.baseHeight = manager.scrollBaseSize$.value.height;
@@ -2574,9 +2573,9 @@ class ScrollMode {
     this._size$ = size$;
     this.sideEffect.add(() => {
       const onSizeUpdated = size$.setValue.bind(size$);
-      onSizeUpdated(this._mainView$.value.size);
-      this._mainView$.value.callbacks.on("onSizeUpdated", onSizeUpdated);
-      return () => this._mainView$.value.callbacks.off("onSizeUpdated", onSizeUpdated);
+      onSizeUpdated(this.mainView.size);
+      this.mainView.callbacks.on("onSizeUpdated", onSizeUpdated);
+      return () => this.mainView.callbacks.off("onSizeUpdated", onSizeUpdated);
     });
     this.sideEffect.add(() => {
       const onCameraUpdated = (camera) => {
@@ -2589,8 +2588,8 @@ class ScrollMode {
         });
         callbacks.emit("userScroll");
       };
-      this._mainView$.value.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
-      return () => this._mainView$.value.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
+      this.mainView.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+      return () => this.mainView.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
     });
     const scale$ = derive(size$, (size) => size.width / this.baseWidth);
     this._scale$ = scale$;
@@ -2657,25 +2656,28 @@ class ScrollMode {
       "initScroll"
     );
   }
+  get mainView() {
+    return this.manager.mainView;
+  }
   setRoot(root) {
     this._root$.setValue(root);
   }
   updateScroll(scrollTop) {
-    this._mainView$.value.moveCamera({
+    this.mainView.moveCamera({
       centerY: scrollTop,
       animationMode: AnimationMode.Immediately
     });
   }
   updateBound(scrollTop, { height }, scale2) {
     if (scale2 > 0) {
-      this._mainView$.value.moveCameraToContain({
+      this.mainView.moveCameraToContain({
         originX: 0,
         originY: scrollTop - height / scale2 / 2,
         width: this.baseWidth,
         height: height / scale2,
         animationMode: AnimationMode.Immediately
       });
-      this._mainView$.value.setCameraBound({
+      this.mainView.setCameraBound({
         damping: 1,
         maxContentMode: () => scale2,
         minContentMode: () => scale2,
@@ -2696,7 +2698,10 @@ class ScrollMode {
     this.scrollState$.destroy();
     this._page$.destroy();
     this._size$.destroy();
-    this._mainView$.destroy();
+  }
+  shouldBroadcast() {
+    var _a;
+    return this.manager.canOperate && ((_a = this.manager.room) == null ? void 0 : _a.disableDeviceInputs) === false;
   }
 }
 class AppManager {
@@ -12297,7 +12302,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.73";
+    this.version = "1.0.0-canary.75";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.4.0", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "jspdf": "^2.5.1", "lodash": "^4.17.21", "p-retry": "^5.1.2", "side-effect-manager": "^1.2.1", "uuid": "^9.0.0", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "1.0.0-canary.5", "@netless/app-plyr": "^0.2.4", "@playwright/test": "^1.28.1", "@rollup/plugin-commonjs": "^23.0.4", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-url": "^8.0.1", "@sveltejs/vite-plugin-svelte": "^2.0.2", "@tsconfig/svelte": "^3.0.0", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^9.0.0", "@typescript-eslint/eslint-plugin": "^5.46.1", "@typescript-eslint/parser": "^5.46.1", "@vitest/ui": "^0.25.7", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^8.29.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^4.0.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.8.1", "prettier-plugin-svelte": "^2.9.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^4.0.0", "svelte": "^3.54.0", "typescript": "^4.9.4", "vite": "^4.0.3", "vite-plugin-dts": "^1.7.1", "vitest": "^0.25.7", "white-web-sdk": "^2.16.40" } };
     this.emitter = callbacks;
     this.viewMode$ = new Val(ViewMode.Broadcaster);

package/dist/index.umd.js

@@ -2532,12 +2532,12 @@
       this.onWheel = (ev) => {
         var _a2;
         const target = ev.target;
-        if (this.manager.canOperate && ((_a2 = this._whiteboard$.value) == null ? void 0 : _a2.contains(target))) {
+        if ((_a2 = this._whiteboard$.value) == null ? void 0 : _a2.contains(target)) {
           ev.preventDefault();
           ev.stopPropagation();
           const dy = ev.deltaY || 0;
           const { width } = this._size$.value;
-          if (dy && width > 0) {
+          if (this.shouldBroadcast() && dy && width > 0) {
             const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
             const scrollTop = this._scrollTop$.value + dy / this._scale$.value;
             this.scrollStorage.setState({
@@ -2548,8 +2548,7 @@
         }
       };
       this._root$ = new valueEnhancer.Val(null);
-      this._mainView$ = new valueEnhancer.Val(this.manager.mainView);
-      this._mainView$.value.disableCameraTransform = false;
+      this.mainView.disableCameraTransform = false;
       if ((_a = manager.scrollBaseSize$) == null ? void 0 : _a.value) {
         this.baseWidth = manager.scrollBaseSize$.value.width;
         this.baseHeight = manager.scrollBaseSize$.value.height;
@@ -2569,9 +2568,9 @@
       this._size$ = size$;
       this.sideEffect.add(() => {
         const onSizeUpdated = size$.setValue.bind(size$);
-        onSizeUpdated(this._mainView$.value.size);
-        this._mainView$.value.callbacks.on("onSizeUpdated", onSizeUpdated);
-        return () => this._mainView$.value.callbacks.off("onSizeUpdated", onSizeUpdated);
+        onSizeUpdated(this.mainView.size);
+        this.mainView.callbacks.on("onSizeUpdated", onSizeUpdated);
+        return () => this.mainView.callbacks.off("onSizeUpdated", onSizeUpdated);
       });
       this.sideEffect.add(() => {
         const onCameraUpdated = (camera) => {
@@ -2584,8 +2583,8 @@
           });
           callbacks.emit("userScroll");
         };
-        this._mainView$.value.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
-        return () => this._mainView$.value.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
+        this.mainView.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+        return () => this.mainView.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
       });
       const scale$ = valueEnhancer.derive(size$, (size) => size.width / this.baseWidth);
       this._scale$ = scale$;
@@ -2652,25 +2651,28 @@
         "initScroll"
       );
     }
+    get mainView() {
+      return this.manager.mainView;
+    }
     setRoot(root) {
       this._root$.setValue(root);
     }
     updateScroll(scrollTop) {
-      this._mainView$.value.moveCamera({
+      this.mainView.moveCamera({
         centerY: scrollTop,
         animationMode: whiteWebSdk.AnimationMode.Immediately
       });
     }
     updateBound(scrollTop, { height }, scale2) {
       if (scale2 > 0) {
-        this._mainView$.value.moveCameraToContain({
+        this.mainView.moveCameraToContain({
           originX: 0,
           originY: scrollTop - height / scale2 / 2,
           width: this.baseWidth,
           height: height / scale2,
           animationMode: whiteWebSdk.AnimationMode.Immediately
         });
-        this._mainView$.value.setCameraBound({
+        this.mainView.setCameraBound({
           damping: 1,
           maxContentMode: () => scale2,
           minContentMode: () => scale2,
@@ -2691,7 +2693,10 @@
       this.scrollState$.destroy();
       this._page$.destroy();
       this._size$.destroy();
-      this._mainView$.destroy();
+    }
+    shouldBroadcast() {
+      var _a;
+      return this.manager.canOperate && ((_a = this.manager.room) == null ? void 0 : _a.disableDeviceInputs) === false;
     }
   }
   class AppManager {
@@ -12292,7 +12297,7 @@
   const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     constructor(context) {
       super(context);
-      this.version = "1.0.0-canary.73";
+      this.version = "1.0.0-canary.75";
       this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.4.0", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "jspdf": "^2.5.1", "lodash": "^4.17.21", "p-retry": "^5.1.2", "side-effect-manager": "^1.2.1", "uuid": "^9.0.0", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "1.0.0-canary.5", "@netless/app-plyr": "^0.2.4", "@playwright/test": "^1.28.1", "@rollup/plugin-commonjs": "^23.0.4", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-url": "^8.0.1", "@sveltejs/vite-plugin-svelte": "^2.0.2", "@tsconfig/svelte": "^3.0.0", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^9.0.0", "@typescript-eslint/eslint-plugin": "^5.46.1", "@typescript-eslint/parser": "^5.46.1", "@vitest/ui": "^0.25.7", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^8.29.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^4.0.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.8.1", "prettier-plugin-svelte": "^2.9.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^4.0.0", "svelte": "^3.54.0", "typescript": "^4.9.4", "vite": "^4.0.3", "vite-plugin-dts": "^1.7.1", "vitest": "^0.25.7", "white-web-sdk": "^2.16.40" } };
       this.emitter = callbacks;
       this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);

package/dist/shim.d.ts

@@ -1,11 +1,5 @@
-import type { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
 
-declare module "*.svelte" {
-    const app: SvelteComponent;
-    export default app;
-}
-
-declare global {
-    const __APP_VERSION__: string;
-    const __APP_DEPENDENCIES__: Record<string, string>;
-}
+declare const __APP_VERSION__: string;
+declare const __APP_DEPENDENCIES__: Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.73",
+  "version": "1.0.0-canary.75",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/View/ScrollMode.ts

@@ -26,26 +26,28 @@ export class ScrollMode {
     private readonly _root$: Val<HTMLElement | null>;
     private readonly _whiteboard$: ReadonlyVal<HTMLElement | null>;
     private readonly _scrollTop$: Val<number>;
-    public readonly _page$: ReadonlyVal<number>;
+    private readonly _page$: ReadonlyVal<number>;
     private readonly _scale$: ReadonlyVal<number>;
     private readonly _size$: Val<Size>;
-    private readonly _mainView$: Val<View>;
 
     private baseWidth = SCROLL_MODE_BASE_WIDTH;
     private baseHeight = SCROLL_MODE_BASE_HEIGHT;
 
-    public scrollStorage: ScrollStorage;
+    public readonly scrollStorage: ScrollStorage;
     public readonly scrollState$: ReadonlyVal<ScrollState>;
 
+    get mainView() {
+        return this.manager.mainView;
+    }
+
     public setRoot(root: HTMLElement): void {
         this._root$.setValue(root);
     }
 
     constructor(private manager: AppManager) {
         this._root$ = new Val<HTMLElement | null>(null);
-        this._mainView$ = new Val<View>(this.manager.mainView);
         // 滚动模式下确保 disableCameraTransform 为 false, 否则触摸屏无法滚动
-        this._mainView$.value.disableCameraTransform = false;
+        this.mainView.disableCameraTransform = false;
 
         if (manager.scrollBaseSize$?.value) {
             this.baseWidth = manager.scrollBaseSize$.value.width;
@@ -69,9 +71,9 @@ export class ScrollMode {
         this._size$ = size$;
         this.sideEffect.add(() => {
             const onSizeUpdated = size$.setValue.bind(size$);
-            onSizeUpdated(this._mainView$.value.size);
-            this._mainView$.value.callbacks.on("onSizeUpdated", onSizeUpdated);
-            return () => this._mainView$.value.callbacks.off("onSizeUpdated", onSizeUpdated);
+            onSizeUpdated(this.mainView.size);
+            this.mainView.callbacks.on("onSizeUpdated", onSizeUpdated);
+            return () => this.mainView.callbacks.off("onSizeUpdated", onSizeUpdated);
         });
 
         this.sideEffect.add(() => {
@@ -84,9 +86,9 @@ export class ScrollMode {
                 });
                 callbacks.emit("userScroll");
             };
-            this._mainView$.value.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+            this.mainView.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
             return () =>
-                this._mainView$.value.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
+                this.mainView.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
         });
 
         const scale$ = derive(size$, size => size.width / this.baseWidth);
@@ -174,7 +176,7 @@ export class ScrollMode {
     };
 
     private updateScroll(scrollTop: number): void {
-        this._mainView$.value.moveCamera({
+        this.mainView.moveCamera({
             centerY: scrollTop,
             animationMode: AnimationMode.Immediately,
         });
@@ -182,7 +184,7 @@ export class ScrollMode {
 
     private updateBound(scrollTop: number, { height }: Size, scale: number): void {
         if (scale > 0) {
-            this._mainView$.value.moveCameraToContain({
+            this.mainView.moveCameraToContain({
                 originX: 0,
                 originY: scrollTop - height / scale / 2,
                 width: this.baseWidth,
@@ -190,7 +192,7 @@ export class ScrollMode {
                 animationMode: AnimationMode.Immediately,
             });
 
-            this._mainView$.value.setCameraBound({
+            this.mainView.setCameraBound({
                 damping: 1,
                 maxContentMode: () => scale,
                 minContentMode: () => scale,
@@ -212,7 +214,6 @@ export class ScrollMode {
         this.scrollState$.destroy();
         this._page$.destroy();
         this._size$.destroy();
-        this._mainView$.destroy();
     }
 
     private getWhiteboardElement = (root: HTMLElement | null): HTMLElement | null => {
@@ -220,14 +221,18 @@ export class ScrollMode {
         return root && root.querySelector(className);
     };
 
+    private shouldBroadcast() {
+        return this.manager.canOperate && this.manager.room?.disableDeviceInputs === false;
+    }
+
     private onWheel = (ev: WheelEvent): void => {
         const target = ev.target as HTMLElement | null;
-        if (this.manager.canOperate && this._whiteboard$.value?.contains(target)) {
+        if (this._whiteboard$.value?.contains(target)) {
             ev.preventDefault();
             ev.stopPropagation();
             const dy = ev.deltaY || 0;
             const { width } = this._size$.value;
-            if (dy && width > 0) {
+            if (this.shouldBroadcast() && dy && width > 0) {
                 const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
                 const scrollTop = this._scrollTop$.value + dy / this._scale$.value;
                 this.scrollStorage.setState({

package/src/shim.d.ts

@@ -1,11 +1,5 @@
-import type { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
 
-declare module "*.svelte" {
-    const app: SvelteComponent;
-    export default app;
-}
-
-declare global {
-    const __APP_VERSION__: string;
-    const __APP_DEPENDENCIES__: Record<string, string>;
-}
+declare const __APP_VERSION__: string;
+declare const __APP_DEPENDENCIES__: Record<string, string>;