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

package/dist/index.es.js

@@ -31,11 +31,12 @@ var __objRest = (source, exclude) => {
 };
 import pRetry from "p-retry";
 import Emittery from "emittery";
-import { debounce, throttle, isEqual, pick, isObject, has, get, size, mapValues, noop as noop$1, isBoolean, isNumber, omitBy, isUndefined, isInteger, orderBy, isEmpty, omit, isFunction, isNull } from "lodash";
-import { ScenePathType, AnimationMode, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, toJS, WhiteVersion, autorun, listenDisposed, unlistenDisposed, ViewMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
+import { debounce, pick, isBoolean, isNumber, throttle, isEqual, isEmpty, get, omitBy, isUndefined, isObject, isInteger, orderBy, omit, isFunction, isNull } from "lodash";
+import { ScenePathType, toJS, WhiteVersion, autorun, reaction, listenUpdated, unlistenUpdated, listenDisposed, unlistenDisposed, AnimationMode, ViewMode, UpdateEventKind, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
-import { genUID, SideEffectManager } from "side-effect-manager";
-import { Val, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
+import { Storage } from "@netless/synced-store";
+import { Val, derive, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer } from "value-enhancer";
+import { SideEffectManager, genUID } from "side-effect-manager";
 import { ResizeObserver as ResizeObserver$2 } from "@juggle/resize-observer";
 var Events = /* @__PURE__ */ ((Events2) => {
   Events2["AppMove"] = "AppMove";
@@ -95,6 +96,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();
 class AppCreateQueue {
   constructor() {
@@ -515,67 +518,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 = throttle((camera, size2) => {
-      this.remoteCamera = camera;
-      this.remoteSize = size2;
-      if (this.remoteSize && this.rect) {
-        const nextScale = camera.scale * computedMinScale(size2, 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(size2) {
-    var _a;
-    this.remoteSize = size2;
-    const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size2, ["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: size2.width,
-        height: size2.height,
-        originX: currentCamera.centerX - size2.width / 2,
-        originY: currentCamera.centerY - size2.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: 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;
@@ -676,16 +618,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);
@@ -753,292 +686,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 (listenUpdated) {
-      const listener = (events) => {
-        const kinds = events.map((e) => e.kind);
-        if (kinds.includes(event)) {
-          func();
-        }
-      };
-      listenUpdated(object, listener);
-      func();
-      return () => unlistenUpdated(object, listener);
-    } else {
-      return reaction(() => object, () => {
-        func();
-      }, {
-        fireImmediately: true
-      });
-    }
-  };
-};
-const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
-  let disposeListenUpdated = null;
-  const disposeReaction = reaction(getProps, () => {
-    if (disposeListenUpdated) {
-      disposeListenUpdated();
-      disposeListenUpdated = null;
-    }
-    const props = getProps();
-    if (isObject(props)) {
-      disposeListenUpdated = () => unlistenUpdated(props, callback);
-      listenUpdated(props, callback);
-    } else {
-      onDestroyed == null ? void 0 : onDestroyed(props);
-    }
-  }, { fireImmediately: true });
-  return () => {
-    disposeListenUpdated == null ? void 0 : disposeListenUpdated();
-    disposeReaction();
-  };
-};
-const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
-onObjectByEvent(UpdateEventKind.Inserted);
-const plainObjectKeys = Object.keys;
-function isRef(e) {
-  return Boolean(has(e, "__isRef"));
-}
-function makeRef(v) {
-  return { k: 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();
-    this._destroyed = false;
-    this._refMap = /* @__PURE__ */ new WeakMap();
-    this._lastValue = /* @__PURE__ */ new Map();
-    this.onStateChanged = new StorageEvent();
-    if (defaultState && !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 || !isObject(rawState)) {
-          if (!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 = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
-        if (isRef(rawValue)) {
-          this._state[key] = rawValue.v;
-          if (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() : 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 (!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 (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 (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(mapValues(this._state, noop$1));
-  }
-  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 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 = 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 (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 (isObject(curValue) && ((_a = this._refMap.get(curValue)) == null ? void 0 : _a.k) === k2) {
-                  newValue = curValue;
-                } else {
-                  newValue = v;
-                  if (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;
@@ -1067,11 +714,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) => {
@@ -1100,9 +748,9 @@ class WhiteBoardView {
           camera$.setValue(pickCamera(camera));
         }
       }),
-      appProxy.size$.subscribe((size2) => {
-        if (size2) {
-          baseRect$.setValue(pick(size2, ["width", "height"]));
+      appProxy.size$.subscribe((size) => {
+        if (size) {
+          baseRect$.setValue(pick(size, ["width", "height"]));
         }
       })
     ]);
@@ -1235,18 +883,18 @@ class AppContext {
       this.appProxy.whiteBoardViewCreated$.setValue(true);
       return this.whiteBoardView;
     };
-    this.ensurePageSize = (size2) => {
+    this.ensurePageSize = (size) => {
       var _a;
-      if (!isNumber(size2))
+      if (!isNumber(size))
         return;
       if (!this.appProxy.scenePath)
         return;
-      if (this.appProxy.pageState.length >= size2)
+      if (this.appProxy.pageState.length >= size)
         return;
-      if (size2 <= 0 || size2 >= MAX_PAGE_SIZE) {
-        throw Error(`[WindowManager]: size ${size2} muse be in range [1, ${MAX_PAGE_SIZE}]`);
+      if (size <= 0 || size >= MAX_PAGE_SIZE) {
+        throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
       }
-      const needInsert = size2 - this.appProxy.pageState.length;
+      const needInsert = size - this.appProxy.pageState.length;
       const scenes = new Array(needInsert).fill({});
       (_a = this.room) == null ? void 0 : _a.putScenes(this.appProxy.scenePath, scenes);
     };
@@ -1271,10 +919,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 Val(this.isWritable);
+      const plugin$ = new Val(this.manager.windowManger);
+      const storage = new Storage({
+        plugin$,
+        isWritable$,
+        namespace,
+        defaultState
+      });
+      this.emitter.on("writableChange", (writable) => {
+        isWritable$.setValue(writable);
+      });
       this.emitter.on("destroy", () => {
-        storage.destroy();
+        storage.disconnect();
       });
       return storage;
     };
@@ -1337,7 +995,7 @@ class AppContext {
   }
   get storage() {
     if (!this._storage) {
-      this._storage = new Storage(this);
+      this._storage = this.createStorage(this.appId, this.getAttributes());
     }
     return this._storage;
   }
@@ -1395,6 +1053,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 = 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 = !isEqual(pick(this.rect, ["width", "height"]), 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 (!isEmpty(size) && this.view) {
+      this.view.moveCameraToContain({
+        width: size.width,
+        height: size.height,
+        originX: -size.width / 2,
+        originY: -size.height / 2,
+        animationMode: AnimationMode.Immediately
+      });
+      this.scale = this.view.camera.scale;
+    }
+  }
+  moveCamera(camera) {
+    if (!isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+      if (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: AnimationMode.Immediately
+      });
+    }
+  }
+}
 class ViewSync {
   constructor(context) {
     this.context = context;
@@ -1412,8 +1141,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: AnimationMode.Immediately
@@ -1427,16 +1157,16 @@ class ViewSync {
       return this.context.camera$.subscribe((camera, skipUpdate) => {
         if (skipUpdate)
           return;
-        const size2 = this.context.size$.value;
-        if (camera && size2) {
-          this.synchronizer.onRemoteUpdate(camera, size2);
+        const size = this.context.size$.value;
+        if (camera && size) {
+          this.synchronizer.onRemoteUpdate(camera, size);
         }
       });
     };
     this.subscribeSize = () => {
-      return this.context.size$.subscribe((size2) => {
-        if (size2 && this.isBroadcastMode) {
-          this.synchronizer.onRemoteSizeUpdate(size2);
+      return this.context.size$.subscribe((size) => {
+        if (size && this.isBroadcastMode) {
+          this.synchronizer.onRemoteSizeUpdate(size);
         }
       });
     };
@@ -1462,10 +1192,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 (!isEqual(size$.value, newSize)) {
+          this.context.storeSize(newSize);
+        }
       }
     };
     this.synchronizer = this.createSynchronizer();
@@ -1476,10 +1209,14 @@ class ViewSync {
       this.subscribeSize(),
       this.subscribeStageRect()
     ]);
+    if (context.viewMode$) {
+      this.needRecoverCamera$ = derive(context.viewMode$, (mode) => mode !== "scroll");
+    }
     const camera$size$ = combine([this.context.camera$, this.context.size$]);
-    camera$size$.reaction(([camera, size2]) => {
-      if (camera && size2) {
-        this.synchronizer.onRemoteUpdate(camera, size2);
+    camera$size$.reaction(([camera, size]) => {
+      var _a;
+      if (camera && size && ((_a = this.needRecoverCamera$) == null ? void 0 : _a.value)) {
+        this.synchronizer.onRemoteUpdate(camera, size);
         camera$size$.destroy();
       }
     });
@@ -1632,13 +1369,13 @@ class AttributesDelegate {
   setMainViewCamera(camera) {
     this.context.safeSetAttributes({ ["mainViewCamera"]: __spreadValues({}, camera) });
   }
-  setMainViewSize(size2) {
-    this.context.safeSetAttributes({ ["mainViewSize"]: __spreadValues({}, size2) });
+  setMainViewSize(size) {
+    this.context.safeSetAttributes({ ["mainViewSize"]: __spreadValues({}, size) });
   }
-  setMainViewCameraAndSize(camera, size2) {
+  setMainViewCameraAndSize(camera, size) {
     this.context.safeSetAttributes({
       ["mainViewCamera"]: __spreadValues({}, camera),
-      ["mainViewSize"]: __spreadValues({}, size2)
+      ["mainViewSize"]: __spreadValues({}, size)
     });
   }
   updateCursor(uid, position) {
@@ -1798,8 +1535,8 @@ class AppProxy {
     this.storeCamera = (camera) => {
       this.store.updateAppAttributes(this.id, Fields.Camera, camera);
     };
-    this.storeSize = (size2) => {
-      this.store.updateAppAttributes(this.id, Fields.Size, size2);
+    this.storeSize = (size) => {
+      this.store.updateAppAttributes(this.id, Fields.Size, size);
     };
     this.updateSize = (width, height) => {
       const iSize = {
@@ -1835,9 +1572,9 @@ class AppProxy {
       this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-size`, () => reaction(() => {
         var _a2;
         return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
-      }, (size2) => {
-        if (size2) {
-          const rawSize = toJS(size2);
+      }, (size) => {
+        if (size) {
+          const rawSize = toJS(size);
           if (!isEqual(rawSize, this.size$.value)) {
             this.size$.setValue(rawSize);
           }
@@ -2374,8 +2111,8 @@ class MainViewProxy {
     this.storeCamera = (camera) => {
       this.store.setMainViewCamera(camera);
     };
-    this.storeSize = (size2) => {
-      this.store.setMainViewSize(size2);
+    this.storeSize = (size) => {
+      this.store.setMainViewSize(size);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
@@ -2388,9 +2125,9 @@ class MainViewProxy {
       }, { fireImmediately: true });
     };
     this.sizeReaction = () => {
-      return reaction(() => this.mainViewSize, (size2) => {
-        if (size2) {
-          const rawSize = toJS(size2);
+      return reaction(() => this.mainViewSize, (size) => {
+        if (size) {
+          const rawSize = toJS(size);
           if (!isEqual(rawSize, this.size$.value)) {
             this.size$.setValue(rawSize);
           }
@@ -2400,8 +2137,8 @@ class MainViewProxy {
     this.mainViewClickListener = () => {
       this.mainViewClickHandler();
     };
-    this.setMainViewSize = debounce((size2) => {
-      this.store.setMainViewSize(__spreadProps(__spreadValues({}, size2), { id: this.manager.uid }));
+    this.setMainViewSize = debounce((size) => {
+      this.store.setMainViewSize(__spreadProps(__spreadValues({}, size), { id: this.manager.uid }));
     }, 50);
     this.onCameraOrSizeUpdated = () => {
       callbacks.emit("cameraStateChange", this.cameraState);
@@ -2432,9 +2169,9 @@ class MainViewProxy {
         callbacks.emit("baseCameraChange", camera);
       }
     });
-    this.size$.reaction((size2) => {
-      if (size2) {
-        callbacks.emit("baseSizeChange", size2);
+    this.size$.reaction((size) => {
+      if (size) {
+        callbacks.emit("baseSizeChange", size);
       }
     });
   }
@@ -2559,6 +2296,51 @@ class MainViewProxy {
     this.sideEffectManager.flushAll();
   }
 }
+const onObjectByEvent = (event) => {
+  return (object, func) => {
+    if (object === void 0)
+      return;
+    if (listenUpdated) {
+      const listener = (events) => {
+        const kinds = events.map((e) => e.kind);
+        if (kinds.includes(event)) {
+          func();
+        }
+      };
+      listenUpdated(object, listener);
+      func();
+      return () => unlistenUpdated(object, listener);
+    } else {
+      return reaction(() => object, () => {
+        func();
+      }, {
+        fireImmediately: true
+      });
+    }
+  };
+};
+const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
+  let disposeListenUpdated = null;
+  const disposeReaction = reaction(getProps, () => {
+    if (disposeListenUpdated) {
+      disposeListenUpdated();
+      disposeListenUpdated = null;
+    }
+    const props = getProps();
+    if (isObject(props)) {
+      disposeListenUpdated = () => unlistenUpdated(props, callback);
+      listenUpdated(props, callback);
+    } else {
+      onDestroyed == null ? void 0 : onDestroyed(props);
+    }
+  }, { fireImmediately: true });
+  return () => {
+    disposeListenUpdated == null ? void 0 : disposeListenUpdated();
+    disposeReaction();
+  };
+};
+const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
+onObjectByEvent(UpdateEventKind.Inserted);
 class RedoUndo {
   constructor(context) {
     this.context = context;
@@ -2618,24 +2400,176 @@ class RedoUndo {
     this.disposePrevFocusViewRedoUndoListeners(this.context.focus());
   }
 }
+const createScrollStorage = (manager) => {
+  return new Storage({
+    plugin$: new 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();
+    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 Val(null);
+    this._mainView$ = new 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 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 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$ = derive(size$, (size) => size.width / this.baseWidth);
+    this._scale$ = scale$;
+    const page$ = new Val(0);
+    this.sideEffect.push(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(combine([scrollTop$, scale$]).subscribe(([scrollTop, scale2]) => {
+      this.updateBound(scrollTop, size$.value, scale2);
+    }));
+    this.sideEffect.push(size$.reaction(() => {
+      this.updateScroll(scrollTop$.value);
+    }));
+    const whiteboard$ = 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$ = combine([this._size$, this._scale$], ([size, scale2]) => {
+      const halfWbHeight = size.height / 2 / scale2;
+      return (this.baseHeight - halfWbHeight) / halfWbHeight / 2 - 0.51;
+    });
+    this.scrollState$ = 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: 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: 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 Val(null);
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
     this.sceneIndex$ = new Val(void 0);
     this.focused$ = new Val(void 0);
     this.members$ = new Val([]);
+    this.isWritable$ = new Val(Boolean((_a = this.room) == null ? void 0 : _a.isWritable));
     this.sideEffectManager = new 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();
@@ -2644,7 +2578,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];
@@ -2695,11 +2629,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);
@@ -2717,8 +2651,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}`);
       }
@@ -2789,8 +2723,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);
         });
@@ -2807,13 +2741,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) {
@@ -2839,14 +2773,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);
       }
     };
@@ -2886,11 +2820,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));
       }
@@ -2903,6 +2837,7 @@ class AppManager {
         }
       }
       emitter.emit("writableChange", isWritable);
+      this.isWritable$.setValue(isWritable);
     };
     this.updateSceneIndex = () => {
       const scenePath = this.store.getMainViewScenePath();
@@ -2935,10 +2870,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();
@@ -2957,6 +2892,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);
@@ -3997,8 +3942,8 @@ var progressToPixels = function(progress, length) {
   return px.transform(progress * length);
 };
 var unmeasured = { x: 0, y: 0, width: 0, height: 0 };
-function calcOrigin(origin, offset, size2) {
-  return typeof origin === "string" ? origin : px.transform(offset + size2 * origin);
+function calcOrigin(origin, offset, size) {
+  return typeof origin === "string" ? origin : px.transform(offset + size * origin);
 }
 function calculateSVGTransformOrigin(dimensions, originX, originY) {
   return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height);
@@ -4475,9 +4420,9 @@ class TeleBox {
       }, skipUpdate);
     }));
     const intrinsicCoord$ = new Val({ x: x2, y: y2 }, { compare: shallowequal });
-    const pxIntrinsicSize$ = combine([intrinsicSize$, managerStageRect$], ([size2, managerStageRect]) => ({
-      width: managerStageRect.width * size2.width,
-      height: managerStageRect.height * size2.height
+    const pxIntrinsicSize$ = combine([intrinsicSize$, managerStageRect$], ([size, managerStageRect]) => ({
+      width: managerStageRect.width * size.width,
+      height: managerStageRect.height * size.height
     }), { compare: shallowequal });
     const pxIntrinsicCoord$ = combine([intrinsicCoord$, managerStageRect$], ([intrinsicCoord, managerStageRect]) => ({
       x: intrinsicCoord.x * managerStageRect.width,
@@ -6894,7 +6839,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;
@@ -6937,7 +6882,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);
     }
@@ -6951,6 +6896,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) === ApplianceNames.laserPointer;
     return this.enableCursor || isLaserPointer;
@@ -11688,70 +11636,35 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends 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 = ViewMode.Broadcaster;
     this.viewMode$ = new Val(ViewMode.Broadcaster);
+    this.playground$ = new Val(void 0);
     this.isReplay = isPlayer(this.displayer);
-    this.cameraUpdating = 0;
-    this.nextCamera = null;
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     this.moveCamera = (camera) => {
       var _a;
+      const pureCamera = omit(camera, ["animationMode"]);
       const mainViewCamera = __spreadValues({}, this.mainView.camera);
-      const nextCamera = __spreadValues(__spreadValues({}, mainViewCamera), camera);
-      if (isEqual(nextCamera, mainViewCamera))
-        return;
-      if (!this.appManager)
+      if (isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
         return;
-      if (camera.animationMode === 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 = 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;
@@ -11798,6 +11711,9 @@ const _WindowManager = class extends 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);
@@ -11815,6 +11731,9 @@ const _WindowManager = class extends 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;
@@ -11883,6 +11802,7 @@ const _WindowManager = class extends InvisiblePlugin {
         this.bindMainView(mainViewElement, params.disableCameraTransform);
         if (_WindowManager.playground) {
           (_b = this.cursorManager) == null ? void 0 : _b.setupWrapper(_WindowManager.playground);
+          this.playground$.setValue(_WindowManager.playground);
         }
       }
     }
@@ -12098,10 +12018,11 @@ const _WindowManager = class extends InvisiblePlugin {
     if (mode === 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 === ViewMode.Freedom) {
+    if (mode === ViewMode.Freedom || mode === "scroll") {
       mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
     this.viewMode = mode;
@@ -12252,6 +12173,10 @@ const _WindowManager = class extends 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();
@@ -12270,6 +12195,12 @@ const _WindowManager = class extends 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);
   }
@@ -12406,9 +12337,9 @@ const _WindowManager = class extends InvisiblePlugin {
     var _a;
     (_a = this.boxManager) == null ? void 0 : _a.teleBoxManager.setStageStyle(style2);
   }
-  setBaseSize(size2) {
+  setBaseSize(size) {
     var _a;
-    (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.setMainViewSize(size2);
+    (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.setMainViewSize(size);
     setTimeout(() => {
       if (!this.appManager || !this.appManager.mainViewProxy.camera$.value)
         return;