@tmagic/stage 1.2.0-beta.2 → 1.2.0-beta.21

package/src/StageMask.ts

@@ -16,22 +16,16 @@
  * limitations under the License.
  */
 
-import KeyController from 'keycon';
-import { throttle } from 'lodash-es';
+import { createDiv, getDocument, injectStyle } from '@tmagic/utils';
 
-import { createDiv, injectStyle } from '@tmagic/utils';
-
-import { Mode, MouseButton, ZIndex } from './const';
+import { Mode, ZIndex } from './const';
 import Rule from './Rule';
-import type StageCore from './StageCore';
-import type { StageMaskConfig } from './types';
 import { getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
-const throttleTime = 100;
 
 const hideScrollbar = () => {
-  injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
+  injectStyle(getDocument(), `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
 };
 
 const createContent = (): HTMLDivElement =>
@@ -71,9 +65,7 @@ const createWrapper = (): HTMLDivElement => {
 export default class StageMask extends Rule {
   public content: HTMLDivElement = createContent();
   public wrapper: HTMLDivElement;
-  public core: StageCore;
   public page: HTMLElement | null = null;
-  public pageScrollParent: HTMLElement | null = null;
   public scrollTop = 0;
   public scrollLeft = 0;
   public width = 0;
@@ -82,54 +74,28 @@ export default class StageMask extends Rule {
   public wrapperWidth = 0;
   public maxScrollTop = 0;
   public maxScrollLeft = 0;
-  public intersectionObserver: IntersectionObserver | null = null;
-  public isMultiSelectStatus: Boolean = false;
 
   private mode: Mode = Mode.ABSOLUTE;
-  private pageResizeObserver: ResizeObserver | null = null;
+  private pageScrollParent: HTMLElement | null = null;
+  private intersectionObserver: IntersectionObserver | null = null;
   private wrapperResizeObserver: ResizeObserver | null = null;
-  /**
-   * 高亮事件处理函数
-   * @param event 事件对象
-   */
-  private highlightHandler = throttle((event: MouseEvent): void => {
-    this.emit('highlight', event);
-  }, throttleTime);
 
-  constructor(config: StageMaskConfig) {
+  constructor() {
     const wrapper = createWrapper();
     super(wrapper);
 
     this.wrapper = wrapper;
-    this.core = config.core;
 
-    this.content.addEventListener('mousedown', this.mouseDownHandler);
-    this.wrapper.appendChild(this.content);
     this.content.addEventListener('wheel', this.mouseWheelHandler);
-    this.content.addEventListener('mousemove', this.highlightHandler);
-    this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
-
-    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-
-    const ctrl = isMac ? 'meta' : 'ctrl';
-
-    KeyController.global.keydown(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = true;
-    });
-    // ctrl+tab切到其他窗口，需要将多选状态置为false
-    KeyController.global.on('blur', () => {
-      this.isMultiSelectStatus = false;
-    });
-    KeyController.global.keyup(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
-    });
+    this.wrapper.appendChild(this.content);
   }
 
   public setMode(mode: Mode) {
     this.mode = mode;
     this.scroll();
+
+    this.content.dataset.mode = mode;
+
     if (mode === Mode.FIXED) {
       this.content.style.width = `${this.wrapperWidth}px`;
       this.content.style.height = `${this.wrapperHeight}px`;
@@ -140,63 +106,37 @@ export default class StageMask extends Rule {
   }
 
   /**
-   * 监听页面大小变化
-   * @description 同步页面与mask的大小
+   * 初始化视窗和蒙层监听，监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
+   * @description 初始化视窗和蒙层监听
    * @param page 页面Dom节点
    */
   public observe(page: HTMLElement): void {
     if (!page) return;
 
     this.page = page;
-    this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
-    this.pageResizeObserver?.disconnect();
-    this.wrapperResizeObserver?.disconnect();
-    this.intersectionObserver?.disconnect();
-
-    if (typeof IntersectionObserver !== 'undefined') {
-      this.intersectionObserver = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            const { target, intersectionRatio } = entry;
-            if (intersectionRatio <= 0) {
-              this.scrollIntoView(target);
-            }
-            this.intersectionObserver?.unobserve(target);
-          });
-        },
-        {
-          root: this.pageScrollParent,
-          rootMargin: '0px',
-          threshold: 1.0,
-        },
-      );
-    }
-
-    if (typeof ResizeObserver !== 'undefined') {
-      this.pageResizeObserver = new ResizeObserver((entries) => {
-        const [entry] = entries;
-        const { clientHeight, clientWidth } = entry.target;
-        this.setHeight(clientHeight);
-        this.setWidth(clientWidth);
+    this.initObserverIntersection();
+    this.initObserverWrapper();
+  }
 
-        this.scroll();
-        if (this.core.dr.moveable) {
-          this.core.dr.updateMoveable();
-        }
-      });
+  /**
+   * 处理页面大小变更，同步页面和mask大小
+   * @param entries ResizeObserverEntry，获取页面最新大小
+   */
+  public pageResize(entries: ResizeObserverEntry[]): void {
+    const [entry] = entries;
+    const { clientHeight, clientWidth } = entry.target;
+    this.setHeight(clientHeight);
+    this.setWidth(clientWidth);
 
-      this.pageResizeObserver.observe(page);
+    this.scroll();
+  }
 
-      this.wrapperResizeObserver = new ResizeObserver((entries) => {
-        const [entry] = entries;
-        const { clientHeight, clientWidth } = entry.target;
-        this.wrapperHeight = clientHeight;
-        this.wrapperWidth = clientWidth;
-        this.setMaxScrollLeft();
-        this.setMaxScrollTop();
-      });
-      this.wrapperResizeObserver.observe(this.wrapper);
-    }
+  /**
+   * 监听一个组件是否在画布可视区域内
+   * @param el 被选中的组件，可能是左侧目录树中选中的
+   */
+  public observerIntersection(el: HTMLElement): void {
+    this.intersectionObserver?.observe(el);
   }
 
   /**
@@ -228,13 +168,56 @@ export default class StageMask extends Rule {
     this.content?.remove();
     this.page = null;
     this.pageScrollParent = null;
-    this.pageResizeObserver?.disconnect();
     this.wrapperResizeObserver?.disconnect();
 
-    this.content.removeEventListener('mouseleave', this.mouseLeaveHandler);
     super.destroy();
   }
 
+  /**
+   * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
+   */
+  private initObserverIntersection(): void {
+    this.pageScrollParent = getScrollParent(this.page as HTMLElement) || null;
+    this.intersectionObserver?.disconnect();
+
+    if (typeof IntersectionObserver !== 'undefined') {
+      this.intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            const { target, intersectionRatio } = entry;
+            if (intersectionRatio <= 0) {
+              this.scrollIntoView(target);
+            }
+            this.intersectionObserver?.unobserve(target);
+          });
+        },
+        {
+          root: this.pageScrollParent,
+          rootMargin: '0px',
+          threshold: 1.0,
+        },
+      );
+    }
+  }
+
+  /**
+   * 监听mask的容器大小变化
+   */
+  private initObserverWrapper(): void {
+    this.wrapperResizeObserver?.disconnect();
+    if (typeof ResizeObserver !== 'undefined') {
+      this.wrapperResizeObserver = new ResizeObserver((entries) => {
+        const [entry] = entries;
+        const { clientHeight, clientWidth } = entry.target;
+        this.wrapperHeight = clientHeight;
+        this.wrapperWidth = clientWidth;
+        this.setMaxScrollLeft();
+        this.setMaxScrollTop();
+      });
+      this.wrapperResizeObserver.observe(this.wrapper);
+    }
+  }
+
   private scroll() {
     this.fixScrollValue();
 
@@ -258,6 +241,17 @@ export default class StageMask extends Rule {
 
   private scrollTo(scrollLeft: number, scrollTop: number): void {
     this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
+
+    const event = new CustomEvent<{
+      scrollLeft: number;
+      scrollTop: number;
+    }>('customScroll', {
+      detail: {
+        scrollLeft: this.scrollLeft,
+        scrollTop: this.scrollTop,
+      },
+    });
+    this.content.dispatchEvent(event);
   }
 
   /**
@@ -305,48 +299,7 @@ export default class StageMask extends Rule {
     if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
   }
 
-  /**
-   * 点击事件处理函数
-   * @param event 事件对象
-   */
-  private mouseDownHandler = (event: MouseEvent): void => {
-    this.emit('clearHighlight');
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
-
-    // 如果单击多选选中区域，则不需要再触发选中了，而可能是拖动行为
-    if (!this.isMultiSelectStatus && (event.target as HTMLDivElement).className.indexOf('moveable-area') !== -1) {
-      return;
-    }
-    // 点击对象如果是边框锚点，则可能是resize
-    if ((event.target as HTMLDivElement).className.indexOf('moveable-control') !== -1) {
-      return;
-    }
-
-    this.content.removeEventListener('mousemove', this.highlightHandler);
-
-    // 判断触发多选还是单选
-    if (this.isMultiSelectStatus) {
-      this.emit('beforeMultiSelect', event);
-    } else {
-      this.emit('beforeSelect', event);
-    }
-    // 如果是右键点击，这里的mouseup事件监听没有效果
-    globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
-  };
-
-  private mouseUpHandler = (): void => {
-    globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
-    this.content.addEventListener('mousemove', this.highlightHandler);
-    if (!this.isMultiSelectStatus) {
-      this.emit('select');
-    }
-  };
-
   private mouseWheelHandler = (event: WheelEvent) => {
-    this.emit('clearHighlight');
     if (!this.page) throw new Error('page 未初始化');
 
     const { deltaY, deltaX } = event;
@@ -363,11 +316,6 @@ export default class StageMask extends Rule {
     }
 
     this.scroll();
-
     this.emit('scroll', event);
   };
-
-  private mouseLeaveHandler = () => {
-    setTimeout(() => this.emit('clearHighlight'), throttleTime);
-  };
 }