@tmagic/stage 1.0.0-beta.10 → 1.0.0-beta.13

package/src/StageMask.ts

@@ -25,7 +25,7 @@ import type { StageMaskConfig } from './types';
 import { createDiv, getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
-const throttleTime = 300;
+const throttleTime = 100;
 
 const hideScrollbar = () => {
   const style = globalThis.document.createElement('style');
@@ -81,6 +81,8 @@ export default class StageMask extends Rule {
   public height = 0;
   public wrapperHeight = 0;
   public wrapperWidth = 0;
+  public maxScrollTop = 0;
+  public maxScrollLeft = 0;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
@@ -104,6 +106,7 @@ export default class StageMask extends Rule {
     this.wrapper.appendChild(this.content);
     this.content.addEventListener('wheel', this.mouseWheelHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
+    this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
   }
 
   public setMode(mode: Mode) {
@@ -136,6 +139,10 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
+
+        this.fixScrollValue();
+        this.scroll();
+        this.core.dr.updateMoveable();
       });
 
       this.pageResizeObserver.observe(page);
@@ -145,6 +152,8 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+        this.setMaxScrollLeft();
+        this.setMaxScrollTop();
       });
       this.wrapperResizeObserver.observe(this.wrapper);
     }
@@ -173,12 +182,21 @@ export default class StageMask extends Rule {
     this.pageScrollParent = null;
     this.pageResizeObserver?.disconnect();
     this.wrapperResizeObserver?.disconnect();
+
+    this.content.removeEventListener('mouseleave', this.mouseLeaveHandler);
     super.destroy();
   }
 
   private scroll() {
     let { scrollLeft, scrollTop } = this;
 
+    if (this.pageScrollParent) {
+      this.pageScrollParent.scrollTo({
+        top: scrollTop,
+        left: scrollLeft,
+      });
+    }
+
     if (this.mode === Mode.FIXED) {
       scrollLeft = 0;
       scrollTop = 0;
@@ -198,6 +216,7 @@ export default class StageMask extends Rule {
    */
   private setHeight(height: number): void {
     this.height = height;
+    this.setMaxScrollTop();
     this.content.style.height = `${height}px`;
   }
 
@@ -207,9 +226,35 @@ export default class StageMask extends Rule {
    */
   private setWidth(width: number): void {
     this.width = width;
+    this.setMaxScrollLeft();
     this.content.style.width = `${width}px`;
   }
 
+  /**
+   * 计算并设置最大滚动宽度
+   */
+  private setMaxScrollLeft(): void {
+    this.maxScrollLeft = this.width - this.wrapperWidth;
+  }
+
+  /**
+   * 计算并设置最大滚动高度
+   */
+  private setMaxScrollTop(): void {
+    this.maxScrollTop = this.height - this.wrapperHeight;
+  }
+
+  /**
+   * 修复滚动距离
+   * 由于滚动容器变化等因素，会导致当前滚动的距离不正确
+   */
+  private fixScrollValue(): void {
+    if (this.scrollTop < 0) this.scrollTop = 0;
+    if (this.scrollLeft < 0) this.scrollLeft = 0;
+    if (this.maxScrollTop < this.scrollTop) this.scrollTop = this.maxScrollTop;
+    if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
+  }
+
   /**
    * 点击事件处理函数
    * @param event 事件对象
@@ -246,39 +291,26 @@ export default class StageMask extends Rule {
     if (!this.page) throw new Error('page 未初始化');
 
     const { deltaY, deltaX } = event;
-    const { height, wrapperHeight, width, wrapperWidth } = this;
 
-    const maxScrollTop = height - wrapperHeight;
-    const maxScrollLeft = width - wrapperWidth;
+    if (this.page.clientHeight < this.wrapperHeight && deltaY) return;
+    if (this.page.clientWidth < this.wrapperWidth && deltaX) return;
 
-    if (maxScrollTop > 0) {
-      if (deltaY > 0) {
-        this.scrollTop = this.scrollTop + Math.min(maxScrollTop - this.scrollTop, deltaY);
-      } else {
-        this.scrollTop = Math.max(this.scrollTop + deltaY, 0);
-      }
+    if (this.maxScrollTop > 0) {
+      this.scrollTop = this.scrollTop + deltaY;
     }
 
-    if (width > wrapperWidth) {
-      if (deltaX > 0) {
-        this.scrollLeft = this.scrollLeft + Math.min(maxScrollLeft - this.scrollLeft, deltaX);
-      } else {
-        this.scrollLeft = Math.max(this.scrollLeft + deltaX, 0);
-      }
+    if (this.maxScrollLeft > 0) {
+      this.scrollLeft = this.scrollLeft + deltaX;
     }
 
-    if (this.mode !== Mode.FIXED) {
-      this.scrollTo(this.scrollLeft, this.scrollTop);
-    }
+    this.fixScrollValue();
 
-    if (this.pageScrollParent) {
-      this.pageScrollParent.scrollTo({
-        top: this.scrollTop,
-        left: this.scrollLeft,
-      });
-    }
     this.scroll();
 
     this.emit('scroll', event);
   };
+
+  private mouseLeaveHandler = () => {
+    setTimeout(() => this.emit('clearHighlight'), throttleTime);
+  };
 }

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": "../..",
-  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
-}

package/vite.config.ts

@@ -1,27 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineConfig } from 'vite';
-
-import { getBaseConfig } from '../vite-config';
-
-import pkg from './package.json';
-
-const deps = Object.keys(pkg.dependencies);
-
-export default defineConfig(getBaseConfig(deps, 'TMagicStage'));