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

package/dist/index.umd.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("p-retry"), require("emittery"), require("lodash"), require("white-web-sdk"), require("uuid"), require("side-effect-manager"), require("value-enhancer"), require("@juggle/resize-observer")) : typeof define === "function" && define.amd ? define(["exports", "p-retry", "emittery", "lodash", "white-web-sdk", "uuid", "side-effect-manager", "value-enhancer", "@juggle/resize-observer"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.WindowManager = {}, global.pRetry, global.Emittery, global.lodash, global.whiteWebSdk, global.uuid, global.sideEffectManager, global.valueEnhancer, global.resizeObserver));
-})(this, function(exports2, pRetry, Emittery, lodash, whiteWebSdk, uuid, sideEffectManager, valueEnhancer, resizeObserver) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("p-retry"), require("emittery"), require("lodash"), require("white-web-sdk"), require("uuid"), require("@netless/synced-store"), require("value-enhancer"), require("side-effect-manager"), require("@juggle/resize-observer")) : typeof define === "function" && define.amd ? define(["exports", "p-retry", "emittery", "lodash", "white-web-sdk", "uuid", "@netless/synced-store", "value-enhancer", "side-effect-manager", "@juggle/resize-observer"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.WindowManager = {}, global.pRetry, global.Emittery, global.lodash, global.whiteWebSdk, global.uuid, global.syncedStore, global.valueEnhancer, global.sideEffectManager, global.resizeObserver));
+})(this, function(exports2, pRetry, Emittery, lodash, whiteWebSdk, uuid, syncedStore, valueEnhancer, sideEffectManager, resizeObserver) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -96,6 +96,8 @@ var __objRest = (source, exclude) => {
   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() {
@@ -516,67 +518,6 @@ var __objRest = (source, exclude) => {
     }, 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;
@@ -677,16 +618,7 @@ var __objRest = (source, exclude) => {
         }
       };
       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);
@@ -754,292 +686,6 @@ var __objRest = (source, exclude) => {
       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;
@@ -1068,11 +714,12 @@ var __objRest = (source, exclude) => {
         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) => {
@@ -1272,10 +919,20 @@ var __objRest = (source, exclude) => {
       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;
       };
@@ -1338,7 +995,7 @@ var __objRest = (source, exclude) => {
     }
     get storage() {
       if (!this._storage) {
-        this._storage = new Storage(this);
+        this._storage = this.createStorage(this.appId, this.getAttributes());
       }
       return this._storage;
     }
@@ -1396,6 +1053,77 @@ var __objRest = (source, exclude) => {
       (_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;
@@ -1413,8 +1141,9 @@ var __objRest = (source, exclude) => {
       };
       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
@@ -1463,10 +1192,13 @@ var __objRest = (source, exclude) => {
           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();
@@ -1477,9 +1209,13 @@ var __objRest = (source, exclude) => {
         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();
         }
@@ -2560,6 +2296,51 @@ var __objRest = (source, exclude) => {
       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;
@@ -2619,24 +2400,176 @@ var __objRest = (source, exclude) => {
       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();
@@ -2645,7 +2578,7 @@ var __objRest = (source, exclude) => {
         }
         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];
@@ -2696,11 +2629,11 @@ var __objRest = (source, exclude) => {
         }
       };
       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);
@@ -2718,8 +2651,8 @@ var __objRest = (source, exclude) => {
         });
       };
       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}`);
         }
@@ -2790,8 +2723,8 @@ var __objRest = (source, exclude) => {
         });
       };
       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);
           });
@@ -2808,13 +2741,13 @@ var __objRest = (source, exclude) => {
         }
       };
       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) {
@@ -2840,14 +2773,14 @@ var __objRest = (source, exclude) => {
         });
       };
       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);
         }
       };
@@ -2887,11 +2820,11 @@ var __objRest = (source, exclude) => {
         }
       };
       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));
         }
@@ -2904,6 +2837,7 @@ var __objRest = (source, exclude) => {
           }
         }
         emitter.emit("writableChange", isWritable);
+        this.isWritable$.setValue(isWritable);
       };
       this.updateSceneIndex = () => {
         const scenePath = this.store.getMainViewScenePath();
@@ -2936,10 +2870,10 @@ var __objRest = (source, exclude) => {
       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();
@@ -2958,6 +2892,16 @@ var __objRest = (source, exclude) => {
         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);
@@ -6895,7 +6839,7 @@ var __objRest = (source, exclude) => {
       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;
@@ -6938,7 +6882,7 @@ var __objRest = (source, exclude) => {
         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);
       }
@@ -6952,6 +6896,9 @@ var __objRest = (source, exclude) => {
         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;
@@ -11689,70 +11636,35 @@ var __objRest = (source, exclude) => {
   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;
@@ -11799,6 +11711,9 @@ var __objRest = (source, exclude) => {
       }
       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);
@@ -11816,6 +11731,9 @@ var __objRest = (source, exclude) => {
       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;
@@ -11884,6 +11802,7 @@ var __objRest = (source, exclude) => {
           this.bindMainView(mainViewElement, params.disableCameraTransform);
           if (_WindowManager.playground) {
             (_b = this.cursorManager) == null ? void 0 : _b.setupWrapper(_WindowManager.playground);
+            this.playground$.setValue(_WindowManager.playground);
           }
         }
       }
@@ -12099,10 +12018,11 @@ var __objRest = (source, exclude) => {
       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;
@@ -12253,6 +12173,10 @@ var __objRest = (source, exclude) => {
         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();
@@ -12271,6 +12195,12 @@ var __objRest = (source, exclude) => {
       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);
     }