@netless/app-slide 0.2.84 → 0.2.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.84",
+  "version": "0.2.86",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",

package/src/DocsViewer/ResizableContainer.ts

@@ -0,0 +1,193 @@
+import {Slide} from "@netless/slide";
+import {ScrollBar} from "./ScrollBar";
+import type {AppContext} from "@netless/window-manager";
+import type {Attributes, MagixEvents} from "../typings";
+import type {AppOptions} from "../index";
+
+export class ResizableContainer {
+
+  private root: HTMLDivElement;
+  public container: HTMLDivElement;
+  private scrollContainer: HTMLDivElement;
+  public onScaleChanged: ((scale: number) => void) | null = null;
+
+  private parent: HTMLElement;
+  private whiteboardContainer: HTMLDivElement | null = null;
+  private slide: Slide | null = null;
+  private scale = 1;
+  private resizeObserver: ResizeObserver | null = null;
+  private slideWidth = 1;
+  private slideHeight = 1;
+  private scrollBar: ScrollBar;
+  private context: AppContext<Attributes, MagixEvents, AppOptions>;
+
+  // 每次 scale 后, 重置为居中
+  private translateX = 0.5;
+  private translateY = 0.5;
+
+  private lastTriggerTime = 0;
+  private enableResize: boolean;
+
+  constructor(
+    parent: HTMLElement,
+    context: AppContext<Attributes, MagixEvents, AppOptions>,
+    enableResize: boolean
+  ) {
+    this.enableResize = enableResize || true;
+    this.parent = parent;
+    this.context = context;
+    this.root = document.createElement('div');
+    this.root.style.width = '100%';
+    this.root.style.height = '100%';
+    this.root.style.overflow = 'hidden';
+    this.parent.appendChild(this.root);
+    this.scrollContainer = document.createElement('div');
+    this.scrollContainer.setAttribute("data-resizable-scroll", "true");
+    this.scrollContainer.style.width = '100%';
+    this.scrollContainer.style.height = '100%';
+    this.scrollContainer.style.position = 'relative';
+    this.scrollContainer.style.overflow = 'hidden';
+    this.container = document.createElement('div');
+    this.container.style.position = 'relative';
+    this.container.setAttribute("data-resizable-container", "true");
+    this.scrollContainer.appendChild(this.container);
+    this.root.appendChild(this.scrollContainer);
+
+    // 初始化滚动条
+    this.scrollBar = new ScrollBar(this.root, this);
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateResizableContainer();
+    });
+    this.resizeObserver.observe(this.scrollContainer);
+  }
+
+  public getTranslate(): {x: number, y: number} {
+    return { x: this.translateX, y: this.translateY };
+  }
+
+  public getScale(): number {
+    return this.scale;
+  }
+
+  private renderScrollBar(width: number, overflowWidth: number, height: number, overflowHeight: number): void {
+    if (this.scrollBar) {
+      this.scrollBar.render(width, height, overflowWidth, overflowHeight);
+    }
+  }
+
+  public setSlideObject(slide: Slide) {
+    this.slide = slide;
+    this.slide.on("renderEnd", this.updateSlideSize);
+  }
+
+  private updateSlideSize = () => {
+    if (this.slide) {
+      let updateContainer = false;
+      if (this.slideWidth !== this.slide.width || this.slideHeight !== this.slide.height) {
+        this.slideWidth = this.slide.width;
+        this.slideHeight = this.slide.height;
+        updateContainer = true;
+      }
+      if (updateContainer) {
+        this.updateResizableContainer();
+      }
+    }
+  };
+
+  public updateResizableContainer() {
+    if (Date.now() - this.lastTriggerTime < 50) {
+      return;
+    }
+    this.lastTriggerTime = Date.now();
+    const parentBounds = this.scrollContainer.getBoundingClientRect();
+    this.container.style.width = `${parentBounds.width * this.scale}px`;
+    this.container.style.height = `${parentBounds.height * this.scale}px`;
+
+    if (this.whiteboardContainer) {
+      const whiteboardBounds = this.whiteboardContainer.getBoundingClientRect();
+      if (whiteboardBounds.width / whiteboardBounds.height > this.slideWidth / this.slideHeight) {
+        // 裁剪两边
+        const renderWidth = (whiteboardBounds.height * this.slideWidth / this.slideHeight);
+        const padding = (whiteboardBounds.width - renderWidth) / 2;
+        this.whiteboardContainer.style.clipPath = `inset(0px ${padding}px 0px ${padding}px)`;
+      } else if (whiteboardBounds.width / whiteboardBounds.height < this.slideWidth / this.slideHeight) {
+        // 裁剪上下
+        const renderHeight = (whiteboardBounds.width * this.slideHeight / this.slideWidth);
+        const padding = (whiteboardBounds.height - renderHeight) / 2;
+        this.whiteboardContainer.style.clipPath = `inset(${padding}px 0px ${padding}px 0px)`;
+      }
+    }
+
+    this.translateX = 0.5;
+    this.translateY = 0.5;
+
+    this.renderScrollBar(parentBounds.width, parentBounds.width * this.scale, parentBounds.height, parentBounds.height * this.scale);
+    this.handleNormalizeTranslate(this.translateX, this.translateY, {
+      triggerScrollBar: true,
+      triggerSync: true,
+    });
+  }
+
+  // x, y 范围 0 ~ 1
+  public handleNormalizeTranslate(x: number, y: number, options: {
+    triggerScrollBar: boolean,
+    triggerSync: boolean,
+  }) {
+    if (Math.abs(x - this.translateX) < 0.001 && Math.abs(y - this.translateY) < 0.001 && !options.triggerSync) {
+      return;
+    }
+    const parentBounds = this.scrollContainer.getBoundingClientRect();
+    const selfBounds = this.container.getBoundingClientRect();
+    const translateX = -x * (selfBounds.width - parentBounds.width);
+    const translateY = -y * (selfBounds.height - parentBounds.height);
+    this.translateX = x;
+    this.translateY = y;
+    this.container.style.transform = `translate(${translateX}px, ${translateY}px)`;
+    if (options.triggerScrollBar) {
+      this.scrollBar.handleNormalizeTranslate(x, y);
+    }
+    if (options.triggerSync) {
+      this.context.storage.setState({ translateX: this.translateX, translateY: this.translateY });
+    }
+  }
+
+  public scaleContainer(applyScale: number) {
+    if (Math.abs(this.scale - applyScale) < 0.001) {
+      return;
+    }
+    if (applyScale > 1.0) {
+      this.scrollContainer.style.width = 'calc(100% - 6px)';
+      this.scrollContainer.style.height = 'calc(100% - 6px)';
+    } else {
+      this.scrollContainer.style.width = '100%';
+      this.scrollContainer.style.height = '100%';
+    }
+    applyScale = this.enableResize ? applyScale : 1;
+    if (this.onScaleChanged && this.enableResize) {
+      this.onScaleChanged(applyScale);
+    }
+    this.scale = applyScale;
+    setTimeout(() => {
+      this.updateResizableContainer();
+    });
+  }
+
+  public addSlideContainer(slideContainer: HTMLDivElement) {
+    this.container.appendChild(slideContainer);
+  }
+
+  public addWhiteboardContainer(whiteboardContainer: HTMLDivElement) {
+    this.container.appendChild(whiteboardContainer);
+    this.whiteboardContainer = whiteboardContainer;
+  }
+
+  public getCurrentScale(): number {
+    return this.scale;
+  }
+
+  public destroy(): void {
+    this.resizeObserver?.disconnect();
+    this.scrollBar?.destroy();
+  }
+}

package/src/DocsViewer/ScrollBar.ts

@@ -0,0 +1,327 @@
+import {ResizableContainer} from "./ResizableContainer";
+
+export class ScrollBar {
+  private container: HTMLElement;
+  private horizontalScrollBar: HTMLDivElement | null = null;
+  private verticalScrollBar: HTMLDivElement | null = null;
+  private resizableContainer: ResizableContainer;
+
+  // 跟踪拖动状态 - 分别跟踪水平和垂直滚动条
+  private isDraggingHorizontal = false;
+  private isDraggingVertical = false;
+
+  // 跟踪事件监听器以便清理
+  private eventListeners: Array<{
+    element: HTMLElement | Document;
+    type: string;
+    listener: (e: Event) => void;
+  }> = [];
+
+  constructor(container: HTMLElement, resizableContainer: ResizableContainer) {
+    this.container = container;
+    this.resizableContainer = resizableContainer;
+  }
+
+  /**
+   * 添加事件监听器并跟踪引用
+   */
+  private addTrackedListener<T extends HTMLElement | Document>(
+    element: T,
+    type: string,
+    listener: (e: any) => void
+  ): void {
+    element.addEventListener(type, listener);
+    this.eventListeners.push({ element, type, listener });
+  }
+
+  /**
+   * 移除所有跟踪的事件监听器
+   */
+  private removeAllListeners(): void {
+    this.eventListeners.forEach(({ element, type, listener }) => {
+      element.removeEventListener(type, listener);
+    });
+    this.eventListeners = [];
+  }
+
+
+
+  /**
+   * 渲染滚动条
+   * @param containerWidth 容器宽度
+   * @param containerHeight 容器高度
+   * @param contentWidth 内容宽度
+   * @param contentHeight 内容高度
+   */
+  public render(
+    containerWidth: number,
+    containerHeight: number,
+    contentWidth: number,
+    contentHeight: number
+  ): void {
+    this.clearScrollBars();
+
+    // 水平滚动条
+    if (contentWidth > containerWidth) {
+      this.createHorizontalScrollBar(containerWidth, contentWidth);
+    }
+
+    // 垂直滚动条
+    if (contentHeight > containerHeight) {
+      this.createVerticalScrollBar(containerHeight, contentHeight);
+    }
+  }
+
+  public handleNormalizeTranslate(x: number, y: number) {
+    // 确保坐标在有效范围内
+    const clampedX = Math.max(0, Math.min(1, x));
+    const clampedY = Math.max(0, Math.min(1, y));
+
+    // 更新水平滚动条 thumb 位置
+    if (this.horizontalScrollBar) {
+      const thumb = this.horizontalScrollBar.querySelector('.horizontal-thumb') as HTMLElement;
+      if (thumb) {
+        const trackWidth = this.horizontalScrollBar.offsetWidth;
+        const thumbWidth = thumb.offsetWidth;
+        const maxPosition = trackWidth - thumbWidth - 2; // 减去边距
+        if (maxPosition > 0) {
+          const newPosition = 1 + clampedX * maxPosition; // 1 是左边距
+          thumb.style.left = `${newPosition}px`;
+        }
+      }
+    }
+
+    // 更新垂直滚动条 thumb 位置
+    if (this.verticalScrollBar) {
+      const thumb = this.verticalScrollBar.querySelector('.vertical-thumb') as HTMLElement;
+      if (thumb) {
+        const trackHeight = this.verticalScrollBar.offsetHeight;
+        const thumbHeight = thumb.offsetHeight;
+        const maxPosition = trackHeight - thumbHeight - 2; // 减去边距
+        if (maxPosition > 0) {
+          const newPosition = 1 + clampedY * maxPosition; // 1 是上边距
+          thumb.style.top = `${newPosition}px`;
+        }
+      }
+    }
+  }
+
+
+  private clearScrollBars(): void {
+    // 清理所有事件监听器
+    this.removeAllListeners();
+
+    if (this.horizontalScrollBar) {
+      this.horizontalScrollBar.remove();
+      this.horizontalScrollBar = null;
+    }
+    if (this.verticalScrollBar) {
+      this.verticalScrollBar.remove();
+      this.verticalScrollBar = null;
+    }
+  }
+
+  private createHorizontalScrollBar(
+    containerWidth: number,
+    contentWidth: number
+  ): void {
+    const scrollBar = document.createElement('div');
+    scrollBar.className = 'scroll-bar horizontal';
+
+    // 计算滚动条thumb宽度
+    const availableWidth = containerWidth;
+    const trackWidth = availableWidth;
+    const thumbWidth = Math.max(30, Math.min(trackWidth, (trackWidth * availableWidth) / contentWidth));
+
+    // 滚动条轨道
+    scrollBar.style.cssText = `
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: ${trackWidth}px;
+      height: 6px;
+      z-index: 1000;
+      cursor: pointer;
+      opacity: 1;
+      transition: opacity 0.2s ease;
+    `;
+
+    // 滚动条始终显示，无需 hover 效果
+
+    // 滚动条thumb
+    const thumb = document.createElement('div');
+    thumb.className = 'scroll-bar-thumb horizontal-thumb';
+    thumb.style.cssText = `
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      width: ${thumbWidth}px;
+      height: 6px;
+      background: #9E9E9E;
+      border-radius: 4px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      cursor: grab;
+    `;
+
+    // 添加拖动事件
+    this.addThumbDragListener(thumb, 'horizontal', thumbWidth, trackWidth);
+
+    scrollBar.appendChild(thumb);
+    this.container.appendChild(scrollBar);
+    this.horizontalScrollBar = scrollBar;
+  }
+
+  private createVerticalScrollBar(
+    containerHeight: number,
+    contentHeight: number
+  ): void {
+    const scrollBar = document.createElement('div');
+    scrollBar.className = 'scroll-bar vertical';
+
+    // 计算滚动条thumb高度
+    const availableHeight = containerHeight;
+    const trackHeight = availableHeight;
+    const thumbHeight = Math.max(30, Math.min(trackHeight, (trackHeight * availableHeight) / contentHeight));
+
+    // 滚动条轨道
+    scrollBar.style.cssText = `
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6px;
+      height: ${trackHeight}px;
+      z-index: 1000;
+      cursor: pointer;
+      opacity: 1;
+      transition: opacity 0.2s ease;
+    `;
+
+    // 滚动条始终显示，无需 hover 效果
+
+    // 滚动条thumb
+    const thumb = document.createElement('div');
+    thumb.className = 'scroll-bar-thumb vertical-thumb';
+    thumb.style.cssText = `
+      position: absolute;
+      top: 1px;
+      left: 0px;
+      width: 6px;
+      height: ${thumbHeight}px;
+      background: #9E9E9E;
+      border-radius: 4px;
+      box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
+      cursor: grab;
+    `;
+
+    // 添加拖动事件
+    this.addThumbDragListener(thumb, 'vertical', thumbHeight, trackHeight);
+
+    scrollBar.appendChild(thumb);
+    this.container.appendChild(scrollBar);
+    this.verticalScrollBar = scrollBar;
+  }
+
+  /**
+   * 为thumb添加拖动事件监听器
+   */
+  private addThumbDragListener(
+    thumb: HTMLElement,
+    orientation: 'horizontal' | 'vertical',
+    thumbSize: number,
+    trackSize: number
+  ): void {
+    let startPos = 0;
+    let startThumbPos = 0;
+
+    const handleStart = (clientX: number, clientY: number) => {
+      if (orientation === 'horizontal') {
+        this.isDraggingHorizontal = true;
+      } else {
+        this.isDraggingVertical = true;
+      }
+      startPos = orientation === 'horizontal' ? clientX : clientY;
+      startThumbPos = orientation === 'horizontal'
+        ? parseFloat(thumb.style.left) || 0
+        : parseFloat(thumb.style.top) || 0;
+
+      thumb.style.cursor = 'grabbing';
+    };
+
+    const handleMove = (clientX: number, clientY: number) => {
+      const isDragging = orientation === 'horizontal' ? this.isDraggingHorizontal : this.isDraggingVertical;
+      if (!isDragging) return;
+
+      const currentPos = orientation === 'horizontal' ? clientX : clientY;
+      const delta = currentPos - startPos;
+
+      // 计算新的thumb位置
+      let newThumbPos = startThumbPos + delta;
+      newThumbPos = Math.max(1, Math.min(trackSize - thumbSize - 1, newThumbPos));
+
+      // 更新thumb位置
+      if (orientation === 'horizontal') {
+        thumb.style.left = `${newThumbPos}px`;
+      } else {
+        thumb.style.top = `${newThumbPos}px`;
+      }
+
+      // 计算滚动比例 (0 到 1)
+      const maxScroll = trackSize - thumbSize - 2;
+      let scrollRatio = 0;
+      if (maxScroll > 0) {
+        scrollRatio = (newThumbPos - 1) / maxScroll;
+        scrollRatio = Math.max(0, Math.min(1, scrollRatio)); // 确保在 0-1 范围内
+      }
+
+      // 调用ResizableContainer的handleNormalizeTranslate方法，传入 false 避免循环调用
+      if (orientation === 'horizontal') {
+        this.resizableContainer.handleNormalizeTranslate(scrollRatio, this.resizableContainer['translateY'] ?? 0.5, {
+          triggerScrollBar: false,
+          triggerSync: true,
+        });
+      } else {
+        this.resizableContainer.handleNormalizeTranslate(this.resizableContainer['translateX'] ?? 0.5, scrollRatio, {
+          triggerScrollBar: false,
+          triggerSync: true,
+        });
+      }
+    };
+
+    const handleEnd = () => {
+      if (orientation === 'horizontal') {
+        this.isDraggingHorizontal = false;
+      } else {
+        this.isDraggingVertical = false;
+      }
+      thumb.style.cursor = 'grab';
+    };
+
+    // 鼠标事件
+    const handleMouseDown = (e: MouseEvent) => {
+      handleStart(e.clientX, e.clientY);
+      e.preventDefault();
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      handleMove(e.clientX, e.clientY);
+    };
+
+    const handleMouseUp = () => {
+      handleEnd();
+      // 滚动条始终显示，无需隐藏逻辑
+    };
+
+    // 添加事件监听器
+    this.addTrackedListener(thumb, 'mousedown', handleMouseDown);
+    this.addTrackedListener(document, 'mousemove', handleMouseMove);
+    this.addTrackedListener(document, 'mouseup', handleMouseUp);
+  }
+
+  /**
+   * 销毁滚动条
+   */
+  public destroy(): void {
+    this.clearScrollBars();
+  }
+}
+

package/src/SlideController/index.ts

@@ -17,7 +17,7 @@ import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
 import { clamp } from "../utils/helpers";
 import { cachedGetBgColor } from "../utils/bgcolor";
-import { logger, log, verbose, setRoomLogger } from "../utils/logger";
+import { log, verbose, setRoomLogger } from "../utils/logger";
 import { getRoomTracker } from "../utils/tracker";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
 
@@ -30,6 +30,9 @@ export const EmptyAttributes: Attributes = {
   resourceList: [],
   previewList: [],
   customLinks: [],
+  slideScale: 1,
+  translateX: 0.5,
+  translateY: 0.5,
 };
 
 export interface SlideControllerOptions {
@@ -289,7 +292,7 @@ export class SlideControllerBase {
       anchor,
       interactive: true,
       mode: "interactive",
-      controller: logger.enable,
+      controller: false,
       enableGlobalClick: options.enableGlobalClick ?? true,
       renderOptions: {
         minFPS: options.minFPS || 25,

package/src/SlideDocsViewer/index.ts

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ReadonlyTeleBox, AnimationMode, View, AppContext } from "@netless/window-manager";
+import type { ReadonlyTeleBox, AnimationMode, View, AppContext, StorageStateChangedListener } from "@netless/window-manager";
 import type { SlideController, SlideControllerOptions } from "../SlideController";
 
 import { SideEffectManager } from "side-effect-manager";
 import { createDocsViewerPages } from "../SlideController";
 import { DocsViewer, type DocsViewerPage } from "../DocsViewer";
+import { ResizableContainer } from "../DocsViewer/ResizableContainer";
 import { logger } from "../utils/logger";
 import { isEditable } from "../utils/helpers";
 import type { Attributes, MagixEvents } from "../typings";
@@ -29,6 +30,7 @@ export interface SlideDocsViewerConfig {
   baseScenePath: string;
   appId: string;
   urlInterrupter?: (url: string) => Promise<string>;
+  enableScale?: boolean;
   onPagesReady?: (pages: DocsViewerPage[]) => void;
   onNavigate?: (index: number, origin?: string) => void;
 }
@@ -52,6 +54,7 @@ export class SlideDocsViewer {
   protected readonly appId: string;
   protected isViewMounted = false;
   protected justSildeReadonly = false;
+  private enableScale: boolean;
 
   public constructor({
     context,
@@ -62,6 +65,7 @@ export class SlideDocsViewer {
     baseScenePath,
     appId,
     urlInterrupter,
+    enableScale,
     onPagesReady,
     onNavigate,
   }: SlideDocsViewerConfig) {
@@ -72,6 +76,7 @@ export class SlideDocsViewer {
     this.mountWhiteboard = mountWhiteboard;
     this.onNavigate = onNavigate || noop;
     this.baseScenePath = baseScenePath;
+    this.enableScale = enableScale ?? false;
     this.appId = appId;
     this.viewer = new DocsViewer({
       readonly: box.readonly,
@@ -101,11 +106,60 @@ export class SlideDocsViewer {
     });
 
     this.render();
+
+    // 在 render() 之后设置监听器，确保 ResizableContainer 已经创建
+    this.sideEffect.add(() => {
+      const applyScale = (scale: number) => {
+        if (this.resizableContainer) {
+          this.resizableContainer.scaleContainer(scale);
+        }
+      };
+
+      // 记录初始状态
+      console.log('[SlideDocsViewer] Initial storage state:', this.context.storage.state);
+      console.log('[SlideDocsViewer] Initial slideScale:', this.context.storage.state.slideScale);
+
+      // 应用初始的 slideScale 值（现在 ResizableContainer 应该已经创建）
+      if (this.context.storage.state.slideScale !== undefined) {
+        console.log('[SlideDocsViewer] Applying initial slideScale:', this.context.storage.state.slideScale);
+        applyScale(this.context.storage.state.slideScale);
+      } else {
+        console.log('[SlideDocsViewer] No initial slideScale found');
+      }
+
+      const handler: StorageStateChangedListener<Attributes> = (diff) => {
+        if (diff.slideScale !== undefined) {
+          // slideScale 是一个包含 newValue 和 oldValue 的对象
+          const newScale = diff.slideScale.newValue;
+          applyScale(newScale ?? 1);
+        }
+        if (diff.translateX !== undefined || diff.translateY !== undefined) {
+          const currentTranslate = this.resizableContainer.getTranslate();
+          const translateX = diff.translateX ? (diff.translateX.newValue ?? 0.5) : currentTranslate.x;
+          const translateY = diff.translateY ? (diff.translateY.newValue ?? 0.5) : currentTranslate.y;
+          if (this.resizableContainer) {
+            this.resizableContainer.handleNormalizeTranslate(translateX, translateY, {
+              triggerScrollBar: true,
+              triggerSync: false,
+            });
+          }
+        }
+      };
+
+      console.log('[SlideDocsViewer] Adding storage state listener');
+      this.context.storage.onStateChanged.addListener(handler);
+
+      return () => {
+        console.log('[SlideDocsViewer] Removing storage state listener');
+        this.context.storage.onStateChanged.removeListener(handler);
+      };
+    });
   }
 
   public $slide!: HTMLDivElement;
   public $whiteboardView!: HTMLDivElement;
   public $overlay!: HTMLDivElement;
+  public resizableContainer!: ResizableContainer;
 
   public setJustSildeReadonly(justSildeReadonly: boolean) {
     this.justSildeReadonly = justSildeReadonly;
@@ -113,9 +167,20 @@ export class SlideDocsViewer {
   }
 
   public render() {
-    this.viewer.$content.appendChild(this.renderSlideContainer());
-    this.viewer.$content.appendChild(this.renderWhiteboardView());
-    this.viewer.$content.appendChild(this.renderOverlay());
+    // 创建 ResizableContainer 来管理 slide 和 whiteboardView
+    if (!this.resizableContainer) {
+      this.resizableContainer = new ResizableContainer(this.viewer.$content, this.context, this.enableScale);
+    }
+
+    // 创建元素
+    this.renderSlideContainer();
+    this.renderWhiteboardView();
+    this.renderOverlay();
+
+    // 分别添加 slide 和 whiteboardView 到 ResizableContainer
+    this.resizableContainer.addSlideContainer(this.$slide);
+    this.resizableContainer.addWhiteboardContainer(this.$whiteboardView);
+    this.viewer.$content.appendChild(this.$overlay);
     this.sideEffect.addEventListener(window, "keydown", ev => {
       if (this.justSildeReadonly) {
         return;
@@ -184,6 +249,7 @@ export class SlideDocsViewer {
       onError: this.onError,
     });
 
+    this.resizableContainer.setSlideObject(this.slideController.slide);
     this.scaleDocsToFit();
     this.sideEffect.add(() => {
       this.whiteboardView.callbacks.on("onSizeUpdated", this.scaleDocsToFit);
@@ -248,6 +314,7 @@ export class SlideDocsViewer {
       this.slideController = null;
     }
     this.viewer.unmount();
+    this.resizableContainer.destroy();
     return this;
   }