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

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 = 300;
 
 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,53 @@ 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;
+
+  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, true);
-    this.content.addEventListener('contextmenu', this.contextmenuHandler, true);
+    this.content.addEventListener('mousedown', this.mouseDownHandler);
     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);
   }
 
-  /**
-   * 设置成绝对定位模式
-   */
-  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 +127,26 @@ 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.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.wrapperResizeObserver.observe(this.wrapper);
     }
   }
 
@@ -151,12 +158,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,144 +170,115 @@ 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();
+    super.destroy();
   }
 
-  /**
-   * 是否显示标尺
-   * @param show 是否显示
-   */
-  public showGuides(show = true) {
-    this.hGuides.setState({
-      showGuides: show,
-    });
-
-    this.vGuides.setState({
-      showGuides: show,
-    });
-  }
+  private scroll() {
+    let { scrollLeft, scrollTop } = this;
 
-  /**
-   * 是否显示标尺
-   * @param show 是否显示
-   */
-  public showRule(show = true) {
-    this.hGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
-
-    this.vGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+    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.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.content.style.width = `${width}px`;
   }
 
   /**
    * 点击事件处理函数
    * @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.select(event);
+    this.content.removeEventListener('mousemove', this.highlightHandler);
+
+    this.emit('beforeSelect', event);
+
+    // 如果是右键点击，这里的mouseup事件监听没有效果
+    globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
   };
 
   private mouseUpHandler = (): void => {
-    this.content?.removeEventListener('mouseup', this.mouseUpHandler, true);
-    this.emit('selected', this.target);
-    this.target = null;
+    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 { height, wrapperHeight, width, wrapperWidth } = this;
 
-    const doc = renderer.contentWindow?.document;
-    let x = event.clientX;
-    let y = event.clientY;
+    const maxScrollTop = height - wrapperHeight;
+    const maxScrollLeft = width - wrapperWidth;
 
-    if (renderer.iframe) {
-      const rect = renderer.iframe.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
+    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);
       }
     }
 
-    const els = doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
-
-    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.emit('select', el, event);
-        this.target = el;
-        // 如果是右键点击，这里的mouseup事件监听没有效果
-        this.content?.addEventListener('mouseup', this.mouseUpHandler, true);
-        break;
+    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);
       }
     }
-  }
 
-  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%',
-  });
+    if (this.mode !== Mode.FIXED) {
+      this.scrollTo(this.scrollLeft, this.scrollTop);
+    }
+
+    if (this.pageScrollParent) {
+      this.pageScrollParent.scrollTo({
+        top: this.scrollTop,
+        left: this.scrollLeft,
+      });
+    }
+    this.scroll();
 
-  private createGuides = (type: 'horizontal' | 'vertical'): Guides =>
-    new Guides(this.wrapper, {
-      type,
-      displayDragPos: true,
-      backgroundColor: '#fff',
-      lineColor: '#000',
-      textColor: '#000',
-      style: this.getGuidesStyle(type),
-    });
+    this.emit('scroll', event);
+  };
 }

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/const.ts

@@ -19,5 +19,31 @@
 // 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀
 export const GHOST_EL_ID_PREFIX = 'ghost_el_';
 
+export const DRAG_EL_ID_PREFIX = 'drag_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';

package/src/types.ts

@@ -1,10 +1,29 @@
+/*
+ * 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 { MoveableOptions } from 'react-moveable/declaration/types';
 
 import { Id, MApp, MNode } from '@tmagic/schema';
 
+import { GuidesType } from './const';
 import StageCore from './StageCore';
 
-export type CanSelect = (el: HTMLElement, stop: () => boolean) => boolean | Promise<boolean>;
+export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 
 export type StageCoreConfig = {
   /** 需要对齐的dom节点的CSS选择器字符串 */
@@ -41,23 +60,10 @@ export interface Offset {
   top: number;
 }
 
-/*
- * 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.
- */
+export interface GuidesEventData {
+  type: GuidesType;
+  guides: number[];
+}
 
 export interface UpdateEventData {
   el: HTMLElement;
@@ -88,7 +94,7 @@ export interface RemoveData {
 
 export interface Runtime {
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
-  getSnapElements?: (el: HTMLElement) => HTMLElement[];
+  getSnapElements?: (el?: HTMLElement) => HTMLElement[];
   updateRootConfig: (config: MApp) => void;
   updatePageId?: (id: Id) => void;
   select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
@@ -109,13 +115,7 @@ export interface RuntimeWindow extends Window {
   magic: Magic;
 }
 
-export enum ZIndex {
-  MASK = '99999',
-  GHOST_EL = '99998',
-}
-
-export enum MouseButton {
-  LEFT = 0,
-  MIDDLE = 1,
-  RIGHT = 2,
+export interface StageHighlightConfig {
+  core: StageCore;
+  container: HTMLElement;
 }

package/src/util.ts

@@ -16,14 +16,9 @@
  * limitations under the License.
  */
 
+import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
-export enum Mode {
-  ABSOLUTE = 'absolute',
-  FIXED = 'fixed',
-  SORTABLE = 'sortable',
-}
-
 export const getOffset = (el: HTMLElement): Offset => {
   const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
@@ -113,8 +108,63 @@ export const isFixed = (el?: HTMLElement): boolean => {
   return getComputedStyle(el).position === 'fixed';
 };
 
+export const isFixedParent = (el: HTMLElement) => {
+  let fixed = false;
+  let dom = el;
+  while (dom) {
+    fixed = isFixed(dom);
+    if (fixed) {
+      break;
+    }
+    const { parentElement } = dom;
+    if (!parentElement || parentElement.tagName === 'BODY') {
+      break;
+    }
+    dom = parentElement;
+  }
+  return fixed;
+};
+
 export const getMode = (el: HTMLElement): Mode => {
-  if (isFixed(el)) return Mode.FIXED;
+  if (isFixedParent(el)) return Mode.FIXED;
   if (isStatic(el) || isRelative(el)) return Mode.SORTABLE;
   return Mode.ABSOLUTE;
 };
+
+export const getScrollParent = (element: HTMLElement, includeHidden = false): HTMLElement | null => {
+  let style = getComputedStyle(element);
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+  if (isFixed(element)) return null;
+  for (let parent = element; parent.parentElement; ) {
+    parent = parent.parentElement;
+    style = getComputedStyle(parent);
+    if (isAbsolute(element) && isStatic(element)) {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+  }
+
+  return null;
+};
+
+export const createDiv = ({ className, cssText }: { className: string; cssText: string }) => {
+  const el = globalThis.document.createElement('div');
+  el.className = className;
+  el.style.cssText = cssText;
+  return el;
+};
+
+export const removeSelectedClassName = (doc: Document) => {
+  const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+
+  if (oldEl) {
+    oldEl.classList.remove(SELECTED_CLASS);
+    (oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`);
+  }
+};
+
+export const addSelectedClassName = (el: Element) => {
+  el.classList.add(SELECTED_CLASS);
+  (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+};