@netless/window-manager 1.0.0-canary.53 → 1.0.0-canary.55

package/dist/index.cjs.js

@@ -36,8 +36,9 @@ var Emittery = require("emittery");
 var lodash = require("lodash");
 var whiteWebSdk = require("white-web-sdk");
 var uuid = require("uuid");
-var sideEffectManager = require("side-effect-manager");
+var syncedStore = require("@netless/synced-store");
 var valueEnhancer = require("value-enhancer");
+var sideEffectManager = require("side-effect-manager");
 var resizeObserver = require("@juggle/resize-observer");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -102,6 +103,8 @@ const ROOT_DIR = "/";
 const INIT_DIR = "/init";
 const SETUP_APP_DELAY = 50;
 const MAX_PAGE_SIZE = 500;
+const SCROLL_MODE_BASE_WIDTH = 1600;
+const SCROLL_MODE_BASE_HEIGHT = SCROLL_MODE_BASE_WIDTH * 3;
 const callbacks = new Emittery__default["default"]();
 class AppCreateQueue {
   constructor() {
@@ -522,67 +525,6 @@ const isRootDirPage = (scenePath) => {
   }, 0);
   return delimiterCount === 1;
 };
-class CameraSynchronizer {
-  constructor(saveCamera) {
-    this.saveCamera = saveCamera;
-    this.setRect = (rect, updateCamera = true) => {
-      this.rect = rect;
-      if (this.remoteCamera && this.remoteSize && updateCamera) {
-        this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
-      }
-    };
-    this.onRemoteUpdate = lodash.throttle((camera, size) => {
-      this.remoteCamera = camera;
-      this.remoteSize = size;
-      if (this.remoteSize && this.rect) {
-        const nextScale = camera.scale * computedMinScale(size, this.rect);
-        const config = {
-          scale: nextScale
-        };
-        if (camera.centerX !== null) {
-          config.centerX = camera.centerX;
-        }
-        if (camera.centerY !== null) {
-          config.centerY = camera.centerY;
-        }
-        console.trace("moveCamera");
-        this.moveCamera(config);
-      }
-    }, 10);
-  }
-  setView(view) {
-    this.view = view;
-  }
-  onRemoteSizeUpdate(size) {
-    var _a;
-    this.remoteSize = size;
-    const needMoveCamera = !lodash.isEqual(lodash.pick(this.rect, ["width", "height"]), lodash.pick(size, ["width", "height"]));
-    if (this.rect && this.remoteCamera && needMoveCamera) {
-      if (!this.view)
-        return;
-      const currentCamera = this.view.camera;
-      (_a = this.view) == null ? void 0 : _a.moveCameraToContain({
-        width: size.width,
-        height: size.height,
-        originX: currentCamera.centerX - size.width / 2,
-        originY: currentCamera.centerY - size.height / 2
-      });
-    }
-  }
-  onLocalCameraUpdate(camera) {
-    this.saveCamera(camera);
-    this.remoteCamera = camera;
-  }
-  moveCamera(camera) {
-    var _a;
-    (_a = this.view) == null ? void 0 : _a.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: whiteWebSdk.AnimationMode.Immediately }));
-  }
-}
-const computedMinScale = (remoteSize, currentSize) => {
-  const wScale = currentSize.width / remoteSize.width;
-  const hScale = currentSize.height / remoteSize.height;
-  return Math.min(wScale, hScale);
-};
 class AppListeners {
   constructor(manager) {
     this.manager = manager;
@@ -683,16 +625,7 @@ class AppListeners {
       }
     };
     this.moveCameraHandler = (payload) => {
-      var _a;
-      const cameraPayload = payload;
-      if (payload.scale) {
-        const remoteSize = this.manager.mainViewProxy.size$.value;
-        const currentSize = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
-        if (remoteSize && currentSize) {
-          cameraPayload.scale = payload.scale * computedMinScale(remoteSize, currentSize);
-        }
-      }
-      this.manager.mainView.moveCamera(cameraPayload);
+      this.manager.mainView.moveCamera(payload);
     };
     this.moveCameraToContainHandler = (payload) => {
       this.manager.mainView.moveCameraToContain(payload);
@@ -760,292 +693,6 @@ class BindContainerRoomPhaseInvalidError extends Error {
     this.message = "[WindowManager]: room phase only Connected can be bindContainer";
   }
 }
-const onObjectByEvent = (event) => {
-  return (object, func) => {
-    if (object === void 0)
-      return;
-    if (whiteWebSdk.listenUpdated) {
-      const listener = (events) => {
-        const kinds = events.map((e) => e.kind);
-        if (kinds.includes(event)) {
-          func();
-        }
-      };
-      whiteWebSdk.listenUpdated(object, listener);
-      func();
-      return () => whiteWebSdk.unlistenUpdated(object, listener);
-    } else {
-      return whiteWebSdk.reaction(() => object, () => {
-        func();
-      }, {
-        fireImmediately: true
-      });
-    }
-  };
-};
-const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
-  let disposeListenUpdated = null;
-  const disposeReaction = whiteWebSdk.reaction(getProps, () => {
-    if (disposeListenUpdated) {
-      disposeListenUpdated();
-      disposeListenUpdated = null;
-    }
-    const props = getProps();
-    if (lodash.isObject(props)) {
-      disposeListenUpdated = () => whiteWebSdk.unlistenUpdated(props, callback);
-      whiteWebSdk.listenUpdated(props, callback);
-    } else {
-      onDestroyed == null ? void 0 : onDestroyed(props);
-    }
-  }, { fireImmediately: true });
-  return () => {
-    disposeListenUpdated == null ? void 0 : disposeListenUpdated();
-    disposeReaction();
-  };
-};
-const onObjectRemoved = onObjectByEvent(whiteWebSdk.UpdateEventKind.Removed);
-onObjectByEvent(whiteWebSdk.UpdateEventKind.Inserted);
-const plainObjectKeys = Object.keys;
-function isRef(e) {
-  return Boolean(lodash.has(e, "__isRef"));
-}
-function makeRef(v) {
-  return { k: sideEffectManager.genUID(), v, __isRef: true };
-}
-class StorageEvent {
-  constructor() {
-    this.listeners = /* @__PURE__ */ new Set();
-  }
-  get length() {
-    return this.listeners.size;
-  }
-  dispatch(message) {
-    this.listeners.forEach((callback) => callback(message));
-  }
-  addListener(listener) {
-    this.listeners.add(listener);
-  }
-  removeListener(listener) {
-    this.listeners.delete(listener);
-  }
-}
-const STORAGE_NS = "_WM-STORAGE_";
-class Storage {
-  constructor(context, id, defaultState) {
-    this._sideEffect = new sideEffectManager.SideEffectManager();
-    this._destroyed = false;
-    this._refMap = /* @__PURE__ */ new WeakMap();
-    this._lastValue = /* @__PURE__ */ new Map();
-    this.onStateChanged = new StorageEvent();
-    if (defaultState && !lodash.isObject(defaultState)) {
-      throw new Error(`Default state for Storage ${id} is not an object.`);
-    }
-    this._context = context;
-    this.id = id || null;
-    this._state = {};
-    const rawState = this._getRawState(this._state);
-    if (this._context.isWritable) {
-      if (this.id === null) {
-        if (context.isAddApp && defaultState) {
-          this.setState(defaultState);
-        }
-      } else {
-        if (rawState === this._state || !lodash.isObject(rawState)) {
-          if (!lodash.get(this._context.getAttributes(), [STORAGE_NS])) {
-            this._context.updateAttributes([STORAGE_NS], {});
-          }
-          this._context.updateAttributes([STORAGE_NS, this.id], this._state);
-          if (defaultState) {
-            this.setState(defaultState);
-          }
-        }
-      }
-    }
-    plainObjectKeys(rawState).forEach((key) => {
-      if (this.id === null && key === STORAGE_NS) {
-        return;
-      }
-      try {
-        const rawValue = lodash.isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
-        if (isRef(rawValue)) {
-          this._state[key] = rawValue.v;
-          if (lodash.isObject(rawValue.v)) {
-            this._refMap.set(rawValue.v, rawValue);
-          }
-        } else {
-          this._state[key] = rawValue;
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    });
-    this._sideEffect.addDisposer(safeListenPropsUpdated(() => this.id === null ? context.getAttributes() : lodash.get(context.getAttributes(), [STORAGE_NS, this.id]), this._updateProperties.bind(this), this.destroy.bind(this)));
-  }
-  get state() {
-    if (this._destroyed) {
-      console.warn(`Accessing state on destroyed Storage "${this.id}"`);
-    }
-    return this._state;
-  }
-  addStateChangedListener(handler) {
-    this.onStateChanged.addListener(handler);
-    return () => this.onStateChanged.removeListener(handler);
-  }
-  ensureState(state) {
-    return this.setState(plainObjectKeys(state).reduce((payload, key) => {
-      if (!lodash.has(this._state, key)) {
-        payload[key] = state[key];
-      }
-      return payload;
-    }, {}));
-  }
-  setState(state) {
-    if (this._destroyed) {
-      console.error(new Error(`Cannot call setState on destroyed Storage "${this.id}".`));
-      return;
-    }
-    if (!this._context.isWritable) {
-      console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
-      return;
-    }
-    const keys = plainObjectKeys(state);
-    if (keys.length > 0) {
-      keys.forEach((key) => {
-        const value = state[key];
-        if (value === this._state[key]) {
-          return;
-        }
-        if (value === void 0) {
-          this._lastValue.set(key, this._state[key]);
-          delete this._state[key];
-          this._setRawState(key, value);
-        } else {
-          this._lastValue.set(key, this._state[key]);
-          this._state[key] = value;
-          let payload = value;
-          if (lodash.isObject(value)) {
-            let refValue = this._refMap.get(value);
-            if (!refValue) {
-              refValue = makeRef(value);
-              this._refMap.set(value, refValue);
-            }
-            payload = refValue;
-          }
-          this._setRawState(key, payload);
-        }
-      });
-    }
-  }
-  emptyStorage() {
-    if (lodash.size(this._state) <= 0) {
-      return;
-    }
-    if (this._destroyed) {
-      console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
-      return;
-    }
-    if (!this._context.isWritable) {
-      console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
-      return;
-    }
-    this.setState(lodash.mapValues(this._state, lodash.noop));
-  }
-  deleteStorage() {
-    if (this.id === null) {
-      throw new Error(`Cannot delete main Storage`);
-    }
-    if (!this._context.isWritable) {
-      console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
-      return;
-    }
-    this.destroy();
-    this._context.updateAttributes([STORAGE_NS, this.id], void 0);
-  }
-  get destroyed() {
-    return this._destroyed;
-  }
-  destroy() {
-    this._destroyed = true;
-    this._sideEffect.flushAll();
-  }
-  _getRawState(defaultValue) {
-    var _a;
-    if (this.id === null) {
-      return (_a = this._context.getAttributes()) != null ? _a : defaultValue;
-    } else {
-      return lodash.get(this._context.getAttributes(), [STORAGE_NS, this.id], defaultValue);
-    }
-  }
-  _setRawState(key, value) {
-    if (this.id === null) {
-      if (key === STORAGE_NS) {
-        throw new Error(`Cannot set attribute internal filed "${STORAGE_NS}"`);
-      }
-      return this._context.updateAttributes([key], value);
-    } else {
-      return this._context.updateAttributes([STORAGE_NS, this.id, key], value);
-    }
-  }
-  _updateProperties(actions) {
-    var _a;
-    if (this._destroyed) {
-      console.error(new Error(`Cannot call _updateProperties on destroyed Storage "${this.id}".`));
-      return;
-    }
-    if (actions.length > 0) {
-      const diffs = {};
-      for (let i = 0; i < actions.length; i++) {
-        try {
-          const action = actions[i];
-          const key = action.key;
-          if (this.id === null && key === STORAGE_NS) {
-            continue;
-          }
-          const value = lodash.isObject(action.value) ? JSON.parse(JSON.stringify(action.value)) : action.value;
-          let oldValue;
-          if (this._lastValue.has(key)) {
-            oldValue = this._lastValue.get(key);
-            this._lastValue.delete(key);
-          }
-          switch (action.kind) {
-            case 2: {
-              if (lodash.has(this._state, key)) {
-                oldValue = this._state[key];
-                delete this._state[key];
-              }
-              diffs[key] = { oldValue };
-              break;
-            }
-            default: {
-              let newValue = value;
-              if (isRef(value)) {
-                const { k: k2, v } = value;
-                const curValue = this._state[key];
-                if (lodash.isObject(curValue) && ((_a = this._refMap.get(curValue)) == null ? void 0 : _a.k) === k2) {
-                  newValue = curValue;
-                } else {
-                  newValue = v;
-                  if (lodash.isObject(v)) {
-                    this._refMap.set(v, value);
-                  }
-                }
-              }
-              if (newValue !== this._state[key]) {
-                oldValue = this._state[key];
-                this._state[key] = newValue;
-              }
-              diffs[key] = { newValue, oldValue };
-              break;
-            }
-          }
-        } catch (e) {
-          console.error(e);
-        }
-      }
-      this.onStateChanged.dispatch(diffs);
-    }
-  }
-}
 class WhiteBoardView {
   constructor(view, appContext, appProxy, ensureSize) {
     this.view = view;
@@ -1074,11 +721,12 @@ class WhiteBoardView {
       const scenePath = this.appProxy.scenePath;
       if (!scenePath)
         return;
+      const scenes = Array.isArray(scene) ? scene : [scene || {}];
       if (after) {
         const nextIndex = this.pageState.index + 1;
-        putScenes(this.appContext.room, scenePath, [scene || {}], nextIndex);
+        putScenes(this.appContext.room, scenePath, scenes, nextIndex);
       } else {
-        putScenes(this.appContext.room, scenePath, [scene || {}]);
+        putScenes(this.appContext.room, scenePath, scenes);
       }
     };
     this.removePage = async (index2) => {
@@ -1278,10 +926,20 @@ class AppContext {
     this.getAppOptions = () => {
       return typeof this.appOptions === "function" ? this.appOptions() : this.appOptions;
     };
-    this.createStorage = (storeId, defaultState) => {
-      const storage = new Storage(this, storeId, defaultState);
+    this.createStorage = (namespace, defaultState) => {
+      const isWritable$ = new valueEnhancer.Val(this.isWritable);
+      const plugin$ = new valueEnhancer.Val(this.manager.windowManger);
+      const storage = new syncedStore.Storage({
+        plugin$,
+        isWritable$,
+        namespace,
+        defaultState
+      });
+      this.emitter.on("writableChange", (writable) => {
+        isWritable$.setValue(writable);
+      });
       this.emitter.on("destroy", () => {
-        storage.destroy();
+        storage.disconnect();
       });
       return storage;
     };
@@ -1344,7 +1002,7 @@ class AppContext {
   }
   get storage() {
     if (!this._storage) {
-      this._storage = new Storage(this);
+      this._storage = this.createStorage(this.appId, this.getAttributes());
     }
     return this._storage;
   }
@@ -1402,6 +1060,77 @@ class AppPageStateImpl {
     (_a = this.sceneNode) == null ? void 0 : _a.dispose();
   }
 }
+class CameraSynchronizer {
+  constructor(saveCamera) {
+    this.saveCamera = saveCamera;
+    this.scale = 1;
+    this.setRect = (rect, updateCamera = true) => {
+      this.rect = rect;
+      if (this.remoteCamera && this.remoteSize && updateCamera) {
+        this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+      }
+    };
+    this.onRemoteUpdate = lodash.throttle((camera, size) => {
+      this.remoteCamera = camera;
+      this.remoteSize = size;
+      if (this.remoteSize && this.rect) {
+        requestAnimationFrame(() => {
+          this.moveCameraToContian(size);
+          this.moveCamera(camera);
+        });
+      }
+    }, 32);
+  }
+  setView(view) {
+    this.view = view;
+  }
+  onRemoteSizeUpdate(size) {
+    var _a;
+    this.remoteSize = size;
+    const needMoveCamera = !lodash.isEqual(lodash.pick(this.rect, ["width", "height"]), lodash.pick(size, ["width", "height"]));
+    if (this.rect && this.remoteCamera && needMoveCamera) {
+      if (!this.view)
+        return;
+      const currentCamera = this.view.camera;
+      (_a = this.view) == null ? void 0 : _a.moveCameraToContain({
+        width: size.width,
+        height: size.height,
+        originX: currentCamera.centerX - size.width / 2,
+        originY: currentCamera.centerY - size.height / 2
+      });
+    }
+  }
+  onLocalCameraUpdate(camera) {
+    this.saveCamera(camera);
+    this.remoteCamera = camera;
+  }
+  moveCameraToContian(size) {
+    if (!lodash.isEmpty(size) && this.view) {
+      this.view.moveCameraToContain({
+        width: size.width,
+        height: size.height,
+        originX: -size.width / 2,
+        originY: -size.height / 2,
+        animationMode: whiteWebSdk.AnimationMode.Immediately
+      });
+      this.scale = this.view.camera.scale;
+    }
+  }
+  moveCamera(camera) {
+    if (!lodash.isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+      if (lodash.isEqual(camera, this.view.camera))
+        return;
+      const { centerX, centerY, scale: scale2 } = camera;
+      const needScale = scale2 * (this.scale || 1);
+      this.view.moveCamera({
+        centerX,
+        centerY,
+        scale: needScale,
+        animationMode: whiteWebSdk.AnimationMode.Immediately
+      });
+    }
+  }
+}
 class ViewSync {
   constructor(context) {
     this.context = context;
@@ -1419,8 +1148,9 @@ class ViewSync {
     };
     this.subscribeView = () => {
       return this.context.view$.subscribe((view) => {
+        var _a;
         const currentCamera = this.context.camera$.value;
-        if (currentCamera && this.context.size$.value) {
+        if (currentCamera && this.context.size$.value && ((_a = this.needRecoverCamera$) == null ? void 0 : _a.value)) {
           view == null ? void 0 : view.moveCamera({
             scale: 1,
             animationMode: whiteWebSdk.AnimationMode.Immediately
@@ -1469,10 +1199,13 @@ class ViewSync {
         return;
       if (!this.isBroadcastMode)
         return;
-      if (this.context.size$.value && this.context.stageRect$.value) {
-        const diffScale = computedMinScale(this.context.size$.value, this.context.stageRect$.value);
-        const remoteScale = camera.scale / diffScale;
-        this.synchronizer.onLocalCameraUpdate(__spreadProps(__spreadValues({}, camera), { scale: remoteScale, id: this.context.uid }));
+      const { size$, stageRect$, view$ } = this.context;
+      if (size$.value && stageRect$.value && view$.value) {
+        this.synchronizer.onLocalCameraUpdate(__spreadProps(__spreadValues({}, camera), { id: this.context.uid }));
+        const newSize = __spreadProps(__spreadValues({}, view$.value.size), { id: this.context.uid });
+        if (!lodash.isEqual(size$.value, newSize)) {
+          this.context.storeSize(newSize);
+        }
       }
     };
     this.synchronizer = this.createSynchronizer();
@@ -1483,9 +1216,13 @@ class ViewSync {
       this.subscribeSize(),
       this.subscribeStageRect()
     ]);
+    if (context.viewMode$) {
+      this.needRecoverCamera$ = valueEnhancer.derive(context.viewMode$, (mode) => mode !== "scroll");
+    }
     const camera$size$ = valueEnhancer.combine([this.context.camera$, this.context.size$]);
     camera$size$.reaction(([camera, size]) => {
-      if (camera && size) {
+      var _a;
+      if (camera && size && ((_a = this.needRecoverCamera$) == null ? void 0 : _a.value)) {
         this.synchronizer.onRemoteUpdate(camera, size);
         camera$size$.destroy();
       }
@@ -2566,6 +2303,51 @@ class MainViewProxy {
     this.sideEffectManager.flushAll();
   }
 }
+const onObjectByEvent = (event) => {
+  return (object, func) => {
+    if (object === void 0)
+      return;
+    if (whiteWebSdk.listenUpdated) {
+      const listener = (events) => {
+        const kinds = events.map((e) => e.kind);
+        if (kinds.includes(event)) {
+          func();
+        }
+      };
+      whiteWebSdk.listenUpdated(object, listener);
+      func();
+      return () => whiteWebSdk.unlistenUpdated(object, listener);
+    } else {
+      return whiteWebSdk.reaction(() => object, () => {
+        func();
+      }, {
+        fireImmediately: true
+      });
+    }
+  };
+};
+const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
+  let disposeListenUpdated = null;
+  const disposeReaction = whiteWebSdk.reaction(getProps, () => {
+    if (disposeListenUpdated) {
+      disposeListenUpdated();
+      disposeListenUpdated = null;
+    }
+    const props = getProps();
+    if (lodash.isObject(props)) {
+      disposeListenUpdated = () => whiteWebSdk.unlistenUpdated(props, callback);
+      whiteWebSdk.listenUpdated(props, callback);
+    } else {
+      onDestroyed == null ? void 0 : onDestroyed(props);
+    }
+  }, { fireImmediately: true });
+  return () => {
+    disposeListenUpdated == null ? void 0 : disposeListenUpdated();
+    disposeReaction();
+  };
+};
+const onObjectRemoved = onObjectByEvent(whiteWebSdk.UpdateEventKind.Removed);
+onObjectByEvent(whiteWebSdk.UpdateEventKind.Inserted);
 class RedoUndo {
   constructor(context) {
     this.context = context;
@@ -2625,24 +2407,176 @@ class RedoUndo {
     this.disposePrevFocusViewRedoUndoListeners(this.context.focus());
   }
 }
+const createScrollStorage = (manager) => {
+  return new syncedStore.Storage({
+    plugin$: new valueEnhancer.Val(manager.windowManger),
+    isWritable$: manager.isWritable$,
+    namespace: "scrollStorage",
+    defaultState: { scrollTop: 0 }
+  });
+};
+function clamp$2(x2, min, max) {
+  return x2 < min ? min : x2 > max ? max : x2;
+}
+class ScrollMode {
+  constructor(manager) {
+    var _a;
+    this.manager = manager;
+    this.sideEffect = new sideEffectManager.SideEffectManager();
+    this.baseWidth = SCROLL_MODE_BASE_WIDTH;
+    this.baseHeight = SCROLL_MODE_BASE_HEIGHT;
+    this.initScroll = () => {
+      const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
+      const scrollTop = this._scrollTop$.value;
+      this._scrollTop$.setValue(clamp$2(scrollTop, halfWbHeight, this.baseHeight - halfWbHeight) - 0.01);
+    };
+    this.getWhiteboardElement = (root) => {
+      const className = ".netless-window-manager-main-view";
+      return root && root.querySelector(className);
+    };
+    this.onWheel = (ev) => {
+      var _a2;
+      const target = ev.target;
+      if (this.manager.canOperate && ((_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) {
+          const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
+          const scrollTop = this._scrollTop$.value + dy / this._scale$.value;
+          this.scrollStorage.setState({
+            scrollTop: clamp$2(scrollTop, halfWbHeight, this.baseHeight - halfWbHeight)
+          });
+          callbacks.emit("userScroll");
+        }
+      }
+    };
+    this._root$ = new valueEnhancer.Val(null);
+    this._mainView$ = new valueEnhancer.Val(this.manager.mainView);
+    this._mainView$.value.disableCameraTransform = true;
+    if ((_a = manager.scrollBaseSize$) == null ? void 0 : _a.value) {
+      this.baseWidth = manager.scrollBaseSize$.value.width;
+      this.baseHeight = manager.scrollBaseSize$.value.height;
+    }
+    this.scrollStorage = createScrollStorage(manager);
+    const scrollTop$ = new valueEnhancer.Val(this.scrollStorage.state.scrollTop);
+    this._scrollTop$ = scrollTop$;
+    this.sideEffect.push(this.scrollStorage.on("stateChanged", () => {
+      this._scrollTop$.setValue(this.scrollStorage.state.scrollTop);
+    }));
+    const size$ = new valueEnhancer.Val({ width: 0, height: 0 }, { compare: (a, b2) => a.width === b2.width && a.height === b2.height });
+    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);
+    });
+    this.sideEffect.add(() => {
+      const onCameraUpdated = (camera) => {
+        const halfWbHeight = size$.value.height / 2 / scale$.value;
+        const scrollTop = camera.centerY;
+        this.scrollStorage.setState({
+          scrollTop: clamp$2(scrollTop, halfWbHeight, this.baseHeight - halfWbHeight)
+        });
+        callbacks.emit("userScroll");
+      };
+      this._mainView$.value.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+      return () => this._mainView$.value.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
+    });
+    const scale$ = valueEnhancer.derive(size$, (size) => size.width / this.baseWidth);
+    this._scale$ = scale$;
+    const page$ = new valueEnhancer.Val(0);
+    this.sideEffect.push(valueEnhancer.combine([scrollTop$, size$, scale$]).subscribe(([scrollTop, size, scale2]) => {
+      if (scale2 > 0) {
+        const wbHeight = size.height / scale2;
+        page$.setValue(Math.max(scrollTop / wbHeight - 0.5, 0));
+      }
+    }));
+    this._page$ = page$;
+    this.sideEffect.push(valueEnhancer.combine([scrollTop$, scale$]).subscribe(([scrollTop, scale2]) => {
+      this.updateBound(scrollTop, size$.value, scale2);
+    }));
+    this.sideEffect.push(size$.reaction(() => {
+      this.updateScroll(scrollTop$.value);
+    }));
+    const whiteboard$ = valueEnhancer.derive(this._root$, this.getWhiteboardElement);
+    this._whiteboard$ = whiteboard$;
+    this.sideEffect.push(whiteboard$.reaction((el) => {
+      if (el == null ? void 0 : el.parentElement) {
+        this.sideEffect.addEventListener(el.parentElement, "wheel", this.onWheel, { capture: true, passive: false }, "wheel");
+      }
+    }));
+    const maxScrollPage$ = valueEnhancer.combine([this._size$, this._scale$], ([size, scale2]) => {
+      const halfWbHeight = size.height / 2 / scale2;
+      return (this.baseHeight - halfWbHeight) / halfWbHeight / 2 - 0.51;
+    });
+    this.scrollState$ = valueEnhancer.combine([this._scrollTop$, this._page$, maxScrollPage$], ([scrollTop, page, maxScrollPage]) => {
+      return {
+        scrollTop,
+        page,
+        maxScrollPage
+      };
+    });
+    this.updateScroll(scrollTop$.value);
+    this.sideEffect.push(this.scrollState$.subscribe((state) => callbacks.emit("scrollStateChange", state)));
+    this.initScroll();
+  }
+  setRoot(root) {
+    this._root$.setValue(root);
+  }
+  updateScroll(scrollTop) {
+    this._mainView$.value.moveCamera({
+      centerY: scrollTop,
+      animationMode: whiteWebSdk.AnimationMode.Immediately
+    });
+  }
+  updateBound(scrollTop, { height }, scale2) {
+    if (scale2 > 0) {
+      this._mainView$.value.moveCameraToContain({
+        originX: 0,
+        originY: scrollTop - height / scale2 / 2,
+        width: this.baseWidth,
+        height: height / scale2,
+        animationMode: whiteWebSdk.AnimationMode.Immediately
+      });
+      this._mainView$.value.setCameraBound({
+        damping: 1,
+        maxContentMode: () => scale2,
+        minContentMode: () => scale2,
+        centerX: this.baseWidth / 2,
+        centerY: this.baseHeight / 2,
+        width: this.baseWidth,
+        height: this.baseHeight
+      });
+    }
+  }
+  dispose() {
+    this.sideEffect.flushAll();
+  }
+}
 class AppManager {
   constructor(windowManger) {
+    var _a;
     this.windowManger = windowManger;
     this.appProxies = /* @__PURE__ */ new Map();
     this.appStatus = /* @__PURE__ */ new Map();
     this.store = store;
     this.isReplay = this.windowManger.isReplay;
     this.mainViewScenesLength = 0;
+    this.scrollBaseSize$ = new valueEnhancer.Val(null);
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
     this.sceneIndex$ = new valueEnhancer.Val(void 0);
     this.focused$ = new valueEnhancer.Val(void 0);
     this.members$ = new valueEnhancer.Val([]);
+    this.isWritable$ = new valueEnhancer.Val(Boolean((_a = this.room) == null ? void 0 : _a.isWritable));
     this.sideEffectManager = new sideEffectManager.SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
     this.onRemoveScenes = async (params) => {
-      var _a, _b;
+      var _a2, _b;
       const { scenePath } = params;
       if (scenePath === ROOT_DIR) {
         await this.onRootDirRemoved();
@@ -2651,7 +2585,7 @@ class AppManager {
       }
       if (isRootDirPage(scenePath)) {
         let nextIndex = this.mainView.focusSceneIndex || 0;
-        let sceneName = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[nextIndex];
+        let sceneName = (_a2 = this.callbacksNode) == null ? void 0 : _a2.scenes[nextIndex];
         if (!sceneName) {
           nextIndex = 0;
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
@@ -2702,11 +2636,11 @@ class AppManager {
       }
     };
     this.removeSceneByIndex = async (index2) => {
-      var _a;
+      var _a2;
       const nextIndex = calculateNextIndex(index2, this.windowManger.pageState);
       this.setSceneIndexWithoutSync(nextIndex);
       this.dispatchInternalEvent(Events.SetAppFocusIndex, { type: "main", index: nextIndex });
-      const scene = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[index2];
+      const scene = (_a2 = this.callbacksNode) == null ? void 0 : _a2.scenes[index2];
       setTimeout(() => {
         if (scene) {
           removeScenes(this.room, `${ROOT_DIR}${scene}`, index2);
@@ -2724,8 +2658,8 @@ class AppManager {
       });
     };
     this.setSceneIndexWithoutSync = (index2) => {
-      var _a;
-      const sceneName = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[index2];
+      var _a2;
+      const sceneName = (_a2 = this.callbacksNode) == null ? void 0 : _a2.scenes[index2];
       if (sceneName) {
         this.mainViewProxy.setFocusScenePath(`${ROOT_DIR}${sceneName}`);
       }
@@ -2796,8 +2730,8 @@ class AppManager {
       });
     };
     this.addAppCloseListener = () => {
-      var _a;
-      (_a = this.refresher) == null ? void 0 : _a.add("appsClose", () => {
+      var _a2;
+      (_a2 = this.refresher) == null ? void 0 : _a2.add("appsClose", () => {
         return onObjectRemoved(this.attributes.apps, () => {
           this.onAppDelete(this.attributes.apps);
         });
@@ -2814,13 +2748,13 @@ class AppManager {
       }
     };
     this.onFocusChange = (focused) => {
-      var _a;
+      var _a2;
       if (this.focused$.value !== focused) {
         callbacks.emit("focusedChange", focused);
         emitter.emit("focusedChange", { focused, prev: this.focused$.value });
         this.focused$.setValue(focused);
         if (focused !== void 0) {
-          (_a = this.boxManager) == null ? void 0 : _a.focusBox({ appId: focused });
+          (_a2 = this.boxManager) == null ? void 0 : _a2.focusBox({ appId: focused });
           setTimeout(() => {
             const appProxy = this.appProxies.get(focused);
             if (appProxy) {
@@ -2846,14 +2780,14 @@ class AppManager {
       });
     };
     this.onMinimized = (minimized) => {
-      var _a, _b;
-      if (((_a = this.boxManager) == null ? void 0 : _a.minimized) !== minimized) {
+      var _a2, _b;
+      if (((_a2 = this.boxManager) == null ? void 0 : _a2.minimized) !== minimized) {
         if (minimized === true) {
           (_b = this.boxManager) == null ? void 0 : _b.blurAllBox();
         }
         setTimeout(() => {
-          var _a2;
-          (_a2 = this.boxManager) == null ? void 0 : _a2.setMinimized(Boolean(minimized));
+          var _a3;
+          (_a3 = this.boxManager) == null ? void 0 : _a3.setMinimized(Boolean(minimized));
         }, 0);
       }
     };
@@ -2893,11 +2827,11 @@ class AppManager {
       }
     };
     this.displayerWritableListener = (isReadonly) => {
-      var _a, _b;
+      var _a2, _b;
       const isWritable = !isReadonly;
       const isManualWritable = this.windowManger.readonly === void 0 || !this.windowManger.readonly;
       if (this.windowManger.readonly === void 0) {
-        (_a = this.boxManager) == null ? void 0 : _a.setReadonly(isReadonly);
+        (_a2 = this.boxManager) == null ? void 0 : _a2.setReadonly(isReadonly);
       } else {
         (_b = this.boxManager) == null ? void 0 : _b.setReadonly(!(isWritable && isManualWritable));
       }
@@ -2910,6 +2844,7 @@ class AppManager {
         }
       }
       emitter.emit("writableChange", isWritable);
+      this.isWritable$.setValue(isWritable);
     };
     this.updateSceneIndex = () => {
       const scenePath = this.store.getMainViewScenePath();
@@ -2942,10 +2877,10 @@ class AppManager {
     this.refresher.setContext({ emitter });
     this.sideEffectManager.add(() => {
       return () => {
-        var _a, _b, _c;
+        var _a2, _b, _c;
         this.appCreateQueue.destroy();
         this.mainViewProxy.destroy();
-        (_a = this.refresher) == null ? void 0 : _a.destroy();
+        (_a2 = this.refresher) == null ? void 0 : _a2.destroy();
         this.viewManager.destroy();
         (_b = this.boxManager) == null ? void 0 : _b.destroy();
         (_c = this.callbacksNode) == null ? void 0 : _c.dispose();
@@ -2964,6 +2899,16 @@ class AppManager {
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
     });
     this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
+    emitter.on("mainViewMounted", () => {
+      this.windowManger.viewMode$.subscribe((viewMode) => {
+        const playground = this.windowManger.playground$.value;
+        if (viewMode === "scroll" && playground) {
+          const scrollMode = new ScrollMode(this);
+          this.scrollMode = scrollMode;
+          scrollMode.setRoot(playground);
+        }
+      });
+    });
   }
   async onRootDirRemoved(needClose = true) {
     await this.setMainViewScenePath(INIT_DIR);
@@ -6901,7 +6846,7 @@ class CursorManager {
     this.initCursorInstance = (uid) => {
       let cursorInstance = this.cursorInstances.get(uid);
       if (!cursorInstance) {
-        cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
+        cursorInstance = new Cursor(this.manager, uid, this, this.playground$.value);
         this.cursorInstances.set(uid, cursorInstance);
       }
       return cursorInstance;
@@ -6944,7 +6889,7 @@ class CursorManager {
       this.hideCursor(this.manager.uid);
     };
     this.roomMembers = (_a = this.manager.room) == null ? void 0 : _a.state.roomMembers;
-    const playground = WindowManager.playground;
+    const playground = this.playground$.value;
     if (playground) {
       this.setupWrapper(playground);
     }
@@ -6958,6 +6903,9 @@ class CursorManager {
       this.applianceIcons = __spreadValues(__spreadValues({}, ApplianceMap), applianceIcons);
     }
   }
+  get playground$() {
+    return this.manager.windowManger.playground$;
+  }
   canMoveCursor(member) {
     const isLaserPointer = (member == null ? void 0 : member.memberState.currentApplianceName) === whiteWebSdk.ApplianceNames.laserPointer;
     return this.enableCursor || isLaserPointer;
@@ -11695,70 +11643,35 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.53";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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", "less": "^4.1.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+    this.version = "1.0.0-canary.54";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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", "less": "^4.1.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "^2.16.35" } };
     this.emitter = callbacks;
     this.viewMode = whiteWebSdk.ViewMode.Broadcaster;
     this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
+    this.playground$ = new valueEnhancer.Val(void 0);
     this.isReplay = whiteWebSdk.isPlayer(this.displayer);
-    this.cameraUpdating = 0;
-    this.nextCamera = null;
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     this.moveCamera = (camera) => {
       var _a;
+      const pureCamera = lodash.omit(camera, ["animationMode"]);
       const mainViewCamera = __spreadValues({}, this.mainView.camera);
-      const nextCamera = __spreadValues(__spreadValues({}, mainViewCamera), camera);
-      if (lodash.isEqual(nextCamera, mainViewCamera))
+      if (lodash.isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
         return;
-      if (!this.appManager)
-        return;
-      if (camera.animationMode === whiteWebSdk.AnimationMode.Immediately) {
-        this.appManager.mainViewProxy.storeCamera(__spreadValues({
-          id: this.appManager.uid
-        }, nextCamera));
-      } else {
-        const remoteCamera = this.appManager.mainViewProxy.size$.value;
-        const currentSize = (_a = this.boxManager) == null ? void 0 : _a.stageRect;
-        let nextScale;
-        if (camera.scale && remoteCamera && currentSize) {
-          nextScale = camera.scale * computedMinScale(remoteCamera, currentSize);
-        }
-        if (nextScale) {
-          this.mainView.moveCamera(__spreadProps(__spreadValues({}, camera), {
-            scale: nextScale
-          }));
-        } else {
-          this.mainView.moveCamera(camera);
-        }
-        this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
-        this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
-        clearTimeout(this.cameraUpdating);
-        this.cameraUpdating = 0;
-        this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
-        if (nextScale) {
-          this.nextCamera = nextCamera;
-        }
-      }
-    };
-    this.onCameraUpdated = () => {
-      if (this.cameraUpdating) {
-        clearTimeout(this.cameraUpdating);
-        this.cameraUpdating = 0;
-      }
-      this.cameraUpdating = setTimeout(() => {
-        this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
-        clearTimeout(this.cameraUpdating);
-        this.cameraUpdating = 0;
-        if (!this.appManager || !this.nextCamera)
-          return;
-        this.appManager.mainViewProxy.storeCamera(__spreadValues({
-          id: this.appManager.uid
-        }, this.nextCamera));
-        this.nextCamera = null;
-      }, 50);
+      this.debouncedStoreCamera();
+      this.mainView.moveCamera(camera);
+      (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCamera, camera);
+    };
+    this.debouncedStoreCamera = () => {
+      const storeCamera = lodash.debounce(() => {
+        var _a, _b;
+        (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.storeCurrentCamera();
+        (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
+        this.mainView.callbacks.off("onCameraUpdated", storeCamera);
+      }, 200);
+      this.mainView.callbacks.on("onCameraUpdated", storeCamera);
     };
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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", "less": "^4.1.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.3", "@netless/app-plyr": "0.2.2", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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", "less": "^4.1.3", "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", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "^2.16.35" } };
   }
   static async mount(params) {
     var _a;
@@ -11805,6 +11718,9 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     }
     manager.containerSizeRatio = _WindowManager.containerSizeRatio;
     await manager.ensureAttributes();
+    if (params.viewMode) {
+      manager.viewMode$.setValue(params.viewMode);
+    }
     manager.appManager = new AppManager(manager);
     manager._pageState = new PageStateImpl(manager.appManager);
     manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
@@ -11822,6 +11738,9 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     if (params.container) {
       manager.bindContainer(params.container);
     }
+    if (params.scrollModeWidth && params.scrollModeHeight) {
+      manager.appManager.scrollBaseSize$.setValue({ width: params.scrollModeWidth, height: params.scrollModeHeight });
+    }
     replaceRoomFunction(room, manager);
     emitter.emit("onCreated");
     _WindowManager.isCreated = true;
@@ -11890,6 +11809,7 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
         this.bindMainView(mainViewElement, params.disableCameraTransform);
         if (_WindowManager.playground) {
           (_b = this.cursorManager) == null ? void 0 : _b.setupWrapper(_WindowManager.playground);
+          this.playground$.setValue(_WindowManager.playground);
         }
       }
     }
@@ -12105,10 +12025,11 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     if (mode === whiteWebSdk.ViewMode.Broadcaster) {
       if (this.canOperate) {
         mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
+        mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
       }
       mainViewProxy == null ? void 0 : mainViewProxy.start();
     }
-    if (mode === whiteWebSdk.ViewMode.Freedom) {
+    if (mode === whiteWebSdk.ViewMode.Freedom || mode === "scroll") {
       mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
     this.viewMode = mode;
@@ -12259,6 +12180,10 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
       throw new AppManagerNotInitError();
     }
   }
+  get scrollState() {
+    var _a, _b;
+    return (_b = (_a = this.appManager) == null ? void 0 : _a.scrollMode) == null ? void 0 : _b.scrollState$.value;
+  }
   get teleboxManager() {
     if (!this.boxManager) {
       throw new BoxManagerNotInitializeError();
@@ -12277,6 +12202,12 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     var _a;
     return (_a = this.appManager) == null ? void 0 : _a.closeApp(appId);
   }
+  moveCameraToContain(rectangle) {
+    var _a;
+    this.debouncedStoreCamera();
+    this.mainView.moveCameraToContain(rectangle);
+    (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+  }
   convertToPointInWorld(point) {
     return this.mainView.convertToPointInWorld(point);
   }