@tmagic/stage 1.0.0-beta.7 → 1.0.0-rc.1

package/src/StageMask.ts

@@ -16,17 +16,16 @@
  * limitations under the License.
  */
 
-import { EventEmitter } from 'events';
+import { throttle } from 'lodash-es';
 
-import Guides from '@scena/guides';
-import { isNumber } from 'lodash';
-
-import { GHOST_EL_ID_PREFIX } from './const';
+import { Mode, MouseButton, ZIndex } from './const';
+import Rule from './Rule';
 import type StageCore from './StageCore';
-import type { CanSelect, StageMaskConfig } from './types';
-import { MouseButton, ZIndex } from './types';
+import type { StageMaskConfig } from './types';
+import { createDiv, getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
+const throttleTime = 100;
 
 const hideScrollbar = () => {
   const style = globalThis.document.createElement('style');
@@ -36,30 +35,30 @@ const hideScrollbar = () => {
   globalThis.document.head.appendChild(style);
 };
 
-const createContent = (): HTMLDivElement => {
-  const el = globalThis.document.createElement('div');
-  el.className = 'editor-mask';
-  el.style.cssText = `
+const createContent = (): HTMLDivElement =>
+  createDiv({
+    className: 'editor-mask',
+    cssText: `
     position: absolute;
     top: 0;
     left: 0;
     transform: translate3d(0, 0, 0);
-  `;
-  return el;
-};
+  `,
+  });
 
 const createWrapper = (): HTMLDivElement => {
-  const el = globalThis.document.createElement('div');
-  el.className = wrapperClassName;
-  el.style.cssText = `
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    z-index: ${ZIndex.MASK};
-  `;
+  const el = createDiv({
+    className: wrapperClassName,
+    cssText: `
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      z-index: ${ZIndex.MASK};
+    `,
+  });
 
   hideScrollbar();
 
@@ -70,54 +69,56 @@ const createWrapper = (): HTMLDivElement => {
  * 蒙层
  * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
  */
-export default class StageMask extends EventEmitter {
+export default class StageMask extends Rule {
   public content: HTMLDivElement = createContent();
-  public wrapper: HTMLDivElement = createWrapper();
+  public wrapper: HTMLDivElement;
   public core: StageCore;
   public page: HTMLElement | null = null;
-
-  public hGuides: Guides;
-  public vGuides: Guides;
-
-  private target: Element | null = null;
-  private resizeObserver: ResizeObserver | null = null;
-  private parentResizeObserver: ResizeObserver | null = null;
-  private canSelect: CanSelect;
+  public pageScrollParent: HTMLElement | null = null;
+  public scrollTop = 0;
+  public scrollLeft = 0;
+  public width = 0;
+  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;
+  private wrapperResizeObserver: ResizeObserver | null = null;
+  /**
+   * 高亮事件处理函数
+   * @param event 事件对象
+   */
+  private highlightHandler = throttle((event: MouseEvent): void => {
+    this.emit('highlight', event);
+  }, throttleTime);
 
   constructor(config: StageMaskConfig) {
-    super();
+    const wrapper = createWrapper();
+    super(wrapper);
 
+    this.wrapper = wrapper;
     this.core = config.core;
-    const { config: coreConfig } = config.core;
 
-    this.canSelect = coreConfig.canSelect || ((el: HTMLElement) => !!el.id);
     this.content.addEventListener('mousedown', this.mouseDownHandler);
-    this.content.addEventListener('contextmenu', this.contextmenuHandler);
     this.wrapper.appendChild(this.content);
-
-    this.hGuides = this.createGuides('horizontal');
-    this.vGuides = this.createGuides('vertical');
-  }
-
-  /**
-   * 设置成固定定位模式
-   */
-  public setFixed(): void {
-    this.wrapper.scrollTo({
-      top: 0,
-    });
-    this.wrapper.style.overflow = 'hidden';
-    // 要等滚动条滚上去，才刷新选中框
-    setTimeout(() => {
-      this.core.dr.refresh();
-    });
+    this.content.addEventListener('wheel', this.mouseWheelHandler);
+    this.content.addEventListener('mousemove', this.highlightHandler);
+    this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
   }
 
-  /**
-   * 设置成绝对定位模式
-   */
-  public setAbsolute(): void {
-    this.wrapper.style.overflow = 'auto';
+  public setMode(mode: Mode) {
+    this.mode = mode;
+    this.scroll();
+    if (mode === Mode.FIXED) {
+      this.content.style.width = `${this.wrapperWidth}px`;
+      this.content.style.height = `${this.wrapperHeight}px`;
+    } else {
+      this.content.style.width = `${this.width}px`;
+      this.content.style.height = `${this.height}px`;
+    }
   }
 
   /**
@@ -129,17 +130,32 @@ export default class StageMask extends EventEmitter {
     if (!page) return;
 
     this.page = page;
-    this.resizeObserver?.disconnect();
+    this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
+    this.pageResizeObserver?.disconnect();
 
     if (typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver((entries) => {
+      this.pageResizeObserver = new ResizeObserver((entries) => {
         const [entry] = entries;
         const { clientHeight, clientWidth } = entry.target;
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
+
+        this.fixScrollValue();
+        this.scroll();
+        this.core.dr.updateMoveable();
       });
 
-      this.resizeObserver.observe(page);
+      this.pageResizeObserver.observe(page);
+
+      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);
     }
   }
 
@@ -151,12 +167,10 @@ export default class StageMask extends EventEmitter {
     if (!this.content) throw new Error('content 不存在');
 
     el.appendChild(this.wrapper);
+  }
 
-    this.parentResizeObserver = new ResizeObserver(() => {
-      this.vGuides.resize();
-      this.hGuides.resize();
-    });
-    this.parentResizeObserver.observe(el);
+  public setLayout(el: HTMLElement): void {
+    this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
   }
 
   /**
@@ -165,165 +179,138 @@ export default class StageMask extends EventEmitter {
   public destroy(): void {
     this.content?.remove();
     this.page = null;
-    this.resizeObserver?.disconnect();
-    this.parentResizeObserver?.disconnect();
-    this.removeAllListeners();
-  }
+    this.pageScrollParent = null;
+    this.pageResizeObserver?.disconnect();
+    this.wrapperResizeObserver?.disconnect();
 
-  /**
-   * 是否显示标尺
-   * @param show 是否显示
-   */
-  public showGuides(show = true) {
-    this.hGuides.setState({
-      showGuides: show,
-    });
-
-    this.vGuides.setState({
-      showGuides: show,
-    });
+    this.content.removeEventListener('mouseleave', this.mouseLeaveHandler);
+    super.destroy();
   }
 
-  /**
-   * 是否显示标尺
-   * @param show 是否显示
-   */
-  public showRule(show = true) {
-    // 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理
-    if (show) {
-      this.hGuides.destroy();
-      this.hGuides = this.createGuides('horizontal', this.core.dr.horizontalGuidelines);
-
-      this.vGuides.destroy();
-      this.vGuides = this.createGuides('vertical', this.core.dr.verticalGuidelines);
-    } else {
-      this.hGuides.setState({
-        rulerStyle: {
-          visibility: 'hidden',
-        },
-      });
+  private scroll() {
+    let { scrollLeft, scrollTop } = this;
 
-      this.vGuides.setState({
-        rulerStyle: {
-          visibility: 'hidden',
-        },
+    if (this.pageScrollParent) {
+      this.pageScrollParent.scrollTo({
+        top: scrollTop,
+        left: scrollLeft,
       });
     }
+
+    if (this.mode === Mode.FIXED) {
+      scrollLeft = 0;
+      scrollTop = 0;
+    }
+
+    this.scrollRule(scrollTop);
+    this.scrollTo(scrollLeft, scrollTop);
   }
 
-  /**
-   * 清空所有参考线
-   */
-  public clearGuides() {
-    this.vGuides.setState({
-      defaultGuides: [],
-    });
-    this.hGuides.setState({
-      defaultGuides: [],
-    });
+  private scrollTo(scrollLeft: number, scrollTop: number): void {
+    this.content.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
   }
 
   /**
    * 设置蒙层高度
    * @param height 高度
    */
-  private setHeight(height: number | string): void {
-    this.content.style.height = isNumber(height) ? `${height}px` : height;
+  private setHeight(height: number): void {
+    this.height = height;
+    this.setMaxScrollTop();
+    this.content.style.height = `${height}px`;
   }
 
   /**
    * 设置蒙层宽度
    * @param width 宽度
    */
-  private setWidth(width: number | string): void {
-    this.content.style.width = isNumber(width) ? `${width}px` : width;
+  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 事件对象
    */
-  private mouseDownHandler = async (event: MouseEvent): Promise<void> => {
-    if (event.button !== MouseButton.LEFT) return;
+  private mouseDownHandler = (event: MouseEvent): void => {
+    this.emit('clearHighlight');
+
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
 
     // 点击的对象如果是选中框，则不需要再触发选中了，而可能是拖动行为
     if ((event.target as HTMLDivElement).className.indexOf('moveable-control') !== -1) {
       return;
     }
 
-    this.content.addEventListener('mousemove', this.mouseMoveHandler);
+    this.content.removeEventListener('mousemove', this.highlightHandler);
 
-    this.select(event);
-  };
+    this.emit('beforeSelect', event);
 
-  private mouseUpHandler = (): void => {
-    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
-    this.content.removeEventListener('mouseup', this.mouseUpHandler);
-    this.emit('selected', this.target);
-    this.target = null;
+    // 如果是右键点击，这里的mouseup事件监听没有效果
+    globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
   };
 
-  private mouseMoveHandler = (event: MouseEvent): void => {
-    // 避免触摸板轻触移动拖动组件
-    if (event.buttons) {
-      this.core.dr.moveable?.dragStart(event);
-    }
-    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+  private mouseUpHandler = (): void => {
+    globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
+    this.content.addEventListener('mousemove', this.highlightHandler);
+    this.emit('select');
   };
 
-  private contextmenuHandler = async (event: MouseEvent): Promise<void> => {
-    await this.select(event);
-    this.mouseUpHandler();
-  };
+  private mouseWheelHandler = (event: WheelEvent) => {
+    this.emit('clearHighlight');
+    if (!this.page) throw new Error('page 未初始化');
 
-  private async select(event: MouseEvent) {
-    const { renderer, zoom } = this.core;
+    const { deltaY, deltaX } = event;
 
-    const doc = renderer.contentWindow?.document;
-    let x = event.clientX;
-    let y = event.clientY;
+    if (this.page.clientHeight < this.wrapperHeight && deltaY) return;
+    if (this.page.clientWidth < this.wrapperWidth && deltaX) return;
 
-    if (renderer.iframe) {
-      const rect = renderer.iframe.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
+    if (this.maxScrollTop > 0) {
+      this.scrollTop = this.scrollTop + deltaY;
     }
 
-    const els = doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+    if (this.maxScrollLeft > 0) {
+      this.scrollLeft = this.scrollLeft + deltaX;
+    }
 
-    let stopped = false;
-    const stop = () => (stopped = true);
-    for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.canSelect(el, stop))) {
-        if (stopped) break;
+    this.fixScrollValue();
 
-        this.emit('select', el, event);
-        this.target = el;
-        // 如果是右键点击，这里的mouseup事件监听没有效果
-        this.content.addEventListener('mouseup', this.mouseUpHandler);
-        break;
-      }
-    }
-  }
+    this.scroll();
 
-  private getGuidesStyle = (type: 'horizontal' | 'vertical') => ({
-    position: 'fixed',
-    left: type === 'horizontal' ? 0 : '-30px',
-    top: type === 'horizontal' ? '-30px' : 0,
-    width: type === 'horizontal' ? '100%' : '30px',
-    height: type === 'horizontal' ? '30px' : '100%',
-  });
+    this.emit('scroll', event);
+  };
 
-  private createGuides = (type: 'horizontal' | 'vertical', defaultGuides: number[] = []): Guides =>
-    new Guides(this.wrapper, {
-      type,
-      defaultGuides,
-      displayDragPos: true,
-      backgroundColor: '#fff',
-      lineColor: '#000',
-      textColor: '#000',
-      style: this.getGuidesStyle(type),
-    });
+  private mouseLeaveHandler = () => {
+    setTimeout(() => this.emit('clearHighlight'), throttleTime);
+  };
 }

package/src/StageRender.ts

@@ -18,6 +18,7 @@
 
 import { EventEmitter } from 'events';
 
+import { SELECTED_CLASS, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
 import { getHost, isSameDomain } from './util';
@@ -52,15 +53,7 @@ export default class StageRender extends EventEmitter {
       height: 100%;
     `;
 
-    this.iframe.onload = async () => {
-      this.emit('onload');
-      if (this.render) {
-        const el = await this.render(this.core);
-        if (el) {
-          this.iframe?.contentDocument?.body?.appendChild(el);
-        }
-      }
-    };
+    this.iframe.addEventListener('load', this.loadHandler);
   }
 
   public getMagicApi = () => ({
@@ -113,9 +106,32 @@ export default class StageRender extends EventEmitter {
    * 销毁实例
    */
   public destroy(): void {
+    this.iframe?.removeEventListener('load', this.loadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
     this.iframe = undefined;
     this.removeAllListeners();
   }
+
+  private loadHandler = async () => {
+    this.emit('onload');
+
+    if (this.render) {
+      const el = await this.render(this.core);
+      if (el) {
+        this.iframe?.contentDocument?.body?.appendChild(el);
+      }
+    }
+
+    if (this.contentWindow) {
+      const style = this.contentWindow.document.createElement('style');
+      style.id = 'tmagic-stage-render';
+      style.innerHTML = `
+        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
+          z-index: ${ZIndex.SELECTED_EL};
+        }
+      `;
+      this.contentWindow.document.head.appendChild(style);
+    }
+  };
 }

package/src/TargetCalibrate.ts

@@ -0,0 +1,135 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable no-param-reassign */
+import { EventEmitter } from 'events';
+
+import { Mode } from './const';
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
+import type { Offset, TargetCalibrateConfig } from './types';
+import { getMode } from './util';
+
+/**
+ * 将选中的节点修正定位后，添加一个操作节点到蒙层上
+ */
+export default class TargetCalibrate extends EventEmitter {
+  public parent: HTMLElement;
+  public mask: StageMask;
+  public dr: StageDragResize;
+  public operationEl: HTMLElement;
+
+  constructor(config: TargetCalibrateConfig) {
+    super();
+
+    this.parent = config.parent;
+    this.mask = config.mask;
+    this.dr = config.dr;
+
+    this.operationEl = globalThis.document.createElement('div');
+    this.parent.append(this.operationEl);
+  }
+
+  public update(el: HTMLElement, prefix: String): HTMLElement {
+    const { width, height } = el.getBoundingClientRect();
+    const { left, top } = this.getOffset(el);
+    this.operationEl.style.cssText = `
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+
+    this.operationEl.id = `${prefix}${el.id}`;
+    return this.operationEl;
+  }
+
+  public destroy(): void {
+    this.operationEl?.remove();
+  }
+
+  private getOffset(el: HTMLElement): Offset {
+    const { transform } = getComputedStyle(el);
+    const { offsetParent } = el;
+
+    let left = el.offsetLeft;
+    let top = el.offsetTop;
+
+    if (transform.indexOf('matrix') > -1) {
+      let a = 1;
+      let b = 1;
+      let c = 1;
+      let d = 1;
+      let e = 0;
+      let f = 0;
+      transform.replace(
+        /matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/,
+        ($0: string, $1: string, $2: string, $3: string, $4: string, $5: string, $6: string): string => {
+          a = +$1;
+          b = +$2;
+          c = +$3;
+          d = +$4;
+          e = +$5;
+          f = +$6;
+          return transform;
+        },
+      );
+
+      left = a * left + c * top + e;
+      top = b * left + d * top + f;
+    }
+
+    if (offsetParent) {
+      const parentOffset = this.getOffset(offsetParent as HTMLElement);
+      return {
+        left: left + parentOffset.left,
+        top: top + parentOffset.top,
+      };
+    }
+
+    // 选中固定定位元素后editor-mask高度被置为视窗大小
+    if (this.dr.mode === Mode.FIXED) {
+      // 弹窗的情况
+      if (getMode(el) === Mode.FIXED) {
+        return {
+          left,
+          top,
+        };
+      }
+
+      return {
+        left: left - this.mask.scrollLeft,
+        top: top - this.mask.scrollTop,
+      };
+    }
+
+    // 无父元素的固定定位需按滚动值计算
+    if (getMode(el) === Mode.FIXED) {
+      return {
+        left: left + this.mask.scrollLeft,
+        top: top + this.mask.scrollTop,
+      };
+    }
+
+    return {
+      left,
+      top,
+    };
+  }
+}

package/src/const.ts

@@ -19,5 +19,33 @@
 // 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀
 export const GHOST_EL_ID_PREFIX = 'ghost_el_';
 
+export const DRAG_EL_ID_PREFIX = 'drag_el_';
+
+export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
+
 // 默认放到缩小倍数
 export const DEFAULT_ZOOM = 1;
+
+export enum GuidesType {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+export enum ZIndex {
+  MASK = '99999',
+  SELECTED_EL = '666',
+}
+
+export enum MouseButton {
+  LEFT = 0,
+  MIDDLE = 1,
+  RIGHT = 2,
+}
+
+export enum Mode {
+  ABSOLUTE = 'absolute',
+  FIXED = 'fixed',
+  SORTABLE = 'sortable',
+}
+
+export const SELECTED_CLASS = 'tmagic-stage-selected-area';