@netless/app-slide 0.2.88 → 0.2.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.88",
+  "version": "0.2.90",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "1.4.44",
+    "@netless/slide": "1.4.45",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/DocsViewer/ResizableContainer.ts

@@ -18,14 +18,13 @@ export class ResizableContainer {
   private resizeObserver: ResizeObserver | null = null;
   private slideWidth = 1;
   private slideHeight = 1;
-  private scrollBar: ScrollBar;
+  private scrollBar: ScrollBar | null = null;
   private context: AppContext<Attributes, MagixEvents, AppOptions>;
 
   // 每次 scale 后, 重置为居中
   private translateX = 0.5;
   private translateY = 0.5;
 
-  private lastTriggerTime = 0;
   private enableResize: boolean;
 
   constructor(
@@ -33,7 +32,7 @@ export class ResizableContainer {
     context: AppContext<Attributes, MagixEvents, AppOptions>,
     enableResize: boolean
   ) {
-    this.enableResize = enableResize || true;
+    this.enableResize = enableResize;
     this.parent = parent;
     this.context = context;
     this.root = document.createElement('div');
@@ -53,8 +52,10 @@ export class ResizableContainer {
     this.scrollContainer.appendChild(this.container);
     this.root.appendChild(this.scrollContainer);
 
-    // 初始化滚动条
-    this.scrollBar = new ScrollBar(this.root, this);
+    if (this.enableResize) {
+      // 初始化滚动条
+      this.scrollBar = new ScrollBar(this.root, this);
+    }
 
     this.resizeObserver = new ResizeObserver(() => {
       this.updateResizableContainer();
@@ -96,15 +97,11 @@ export class ResizableContainer {
   };
 
   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) {
+    if (this.whiteboardContainer && this.enableResize) {
       const whiteboardBounds = this.whiteboardContainer.getBoundingClientRect();
       if (whiteboardBounds.width / whiteboardBounds.height > this.slideWidth / this.slideHeight) {
         // 裁剪两边
@@ -145,7 +142,7 @@ export class ResizableContainer {
     this.translateY = y;
     this.container.style.transform = `translate(${translateX}px, ${translateY}px)`;
     if (options.triggerScrollBar) {
-      this.scrollBar.handleNormalizeTranslate(x, y);
+      this.scrollBar?.handleNormalizeTranslate(x, y);
     }
     if (options.triggerSync) {
       this.context.storage.setState({ translateX: this.translateX, translateY: this.translateY });
@@ -153,7 +150,7 @@ export class ResizableContainer {
   }
 
   public scaleContainer(applyScale: number) {
-    if (Math.abs(this.scale - applyScale) < 0.001) {
+    if (Math.abs(this.scale - applyScale) < 0.001 || !this.enableResize) {
       return;
     }
     if (applyScale > 1.0) {

package/src/DocsViewer/style.scss

@@ -93,6 +93,9 @@ $namespace: $slide-namespace;
   align-items: center;
   padding: 0 16px;
   border-top: 1px solid #eeeef7;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -user-select: none;
   color: #191919;
 }