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

package/src/Rule.ts

@@ -12,6 +12,7 @@ export default class Rule extends EventEmitter {
 
   private container: HTMLDivElement;
   private containerResizeObserver: ResizeObserver;
+  private isShowGuides = true;
 
   constructor(container: HTMLDivElement) {
     super();
@@ -32,16 +33,18 @@ export default class Rule extends EventEmitter {
   }
 
   /**
-   * 是否显示标尺
-   * @param show 是否显示
+   * 是否显示辅助线
+   * @param isShowGuides 是否显示
    */
-  public showGuides(show = true) {
+  public showGuides(isShowGuides = true) {
+    this.isShowGuides = isShowGuides;
+
     this.hGuides.setState({
-      showGuides: show,
+      showGuides: isShowGuides,
     });
 
     this.vGuides.setState({
-      showGuides: show,
+      showGuides: isShowGuides,
     });
   }
 
@@ -57,12 +60,12 @@ export default class Rule extends EventEmitter {
       defaultGuides: vLines,
     });
 
-    this.emit('changeGuides', {
+    this.emit('change-guides', {
       type: GuidesType.HORIZONTAL,
       guides: hLines,
     });
 
-    this.emit('changeGuides', {
+    this.emit('change-guides', {
       type: GuidesType.VERTICAL,
       guides: vLines,
     });
@@ -135,11 +138,12 @@ export default class Rule extends EventEmitter {
       lineColor: '#000',
       textColor: '#000',
       style: this.getGuidesStyle(type),
+      showGuides: this.isShowGuides,
     });
 
   private hGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
     this.horizontalGuidelines = e.guides;
-    this.emit('changeGuides', {
+    this.emit('change-guides', {
       type: GuidesType.HORIZONTAL,
       guides: this.horizontalGuidelines,
     });
@@ -147,7 +151,7 @@ export default class Rule extends EventEmitter {
 
   private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
     this.verticalGuidelines = e.guides;
-    this.emit('changeGuides', {
+    this.emit('change-guides', {
       type: GuidesType.VERTICAL,
       guides: this.verticalGuidelines,
     });

package/src/StageCore.ts

@@ -18,298 +18,149 @@
 
 import { EventEmitter } from 'events';
 
-import type { Id } from '@tmagic/schema';
-import { addClassName } from '@tmagic/utils';
+import { Id } from '@tmagic/schema';
 
-import { CONTAINER_HIGHLIGHT_CLASS, DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } from './const';
-import StageDragResize from './StageDragResize';
-import StageHighlight from './StageHighlight';
+import ActionManager from './ActionManager';
+import { DEFAULT_ZOOM } from './const';
 import StageMask from './StageMask';
-import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
 import {
-  CanSelect,
-  ContainerHighlightType,
+  ActionManagerConfig,
+  CustomizeRender,
   GuidesEventData,
-  IsContainer,
+  Point,
   RemoveData,
   Runtime,
-  SortEventData,
   StageCoreConfig,
-  StageDragStatus,
   UpdateData,
   UpdateEventData,
 } from './types';
-import { addSelectedClassName, removeSelectedClassName } from './util';
 
+/**
+ * 负责管理画布，管理renderer、mask、actionManager三个核心类，并负责统一对外通信，包括提供接口和抛事件
+ */
 export default class StageCore extends EventEmitter {
   public container?: HTMLDivElement;
-  // 当前选中的节点
-  public selectedDom: HTMLElement | undefined;
-  // 多选选中的节点组
-  public selectedDomList: HTMLElement[] = [];
-  public highlightedDom: Element | undefined;
   public renderer: StageRender;
   public mask: StageMask;
-  public dr: StageDragResize;
-  public multiDr: StageMultiDragResize;
-  public highlightLayer: StageHighlight;
-  public config: StageCoreConfig;
-  public zoom = DEFAULT_ZOOM;
-  public containerHighlightClassName: string;
-  public containerHighlightDuration: number;
-  public containerHighlightType?: ContainerHighlightType;
-  public isContainer: IsContainer;
-
-  private canSelect: CanSelect;
+
+  private actionManager: ActionManager;
+  private pageResizeObserver: ResizeObserver | null = null;
+  private autoScrollIntoView: boolean | undefined;
+  private customizedRender?: CustomizeRender;
 
   constructor(config: StageCoreConfig) {
     super();
 
-    this.config = config;
-
-    this.setZoom(config.zoom);
-    this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
-    this.isContainer = config.isContainer;
-    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
-    this.containerHighlightDuration = config.containerHighlightDuration || 800;
-    this.containerHighlightType = config.containerHighlightType;
-
-    this.renderer = new StageRender({ core: this });
-    this.mask = new StageMask({ core: this });
-    this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
-    this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
-    this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
-
-    this.renderer.on('runtime-ready', (runtime: Runtime) => {
-      this.emit('runtime-ready', runtime);
-    });
-    this.renderer.on('page-el-update', (el: HTMLElement) => {
-      this.mask?.observe(el);
-    });
+    this.autoScrollIntoView = config.autoScrollIntoView;
+    this.customizedRender = config.render;
 
-    this.mask
-      .on('beforeSelect', async (event: MouseEvent) => {
-        this.clearSelectStatus('multiSelect');
-        const el = await this.getElementFromPoint(event);
-        if (!el) return;
-        this.select(el, event);
-      })
-      .on('select', () => {
-        this.emit('select', this.selectedDom);
-      })
-      .on('changeGuides', (data: GuidesEventData) => {
-        this.dr.setGuidelines(data.type, data.guides);
-        this.emit('changeGuides', data);
-      })
-      .on('highlight', async (event: MouseEvent) => {
-        const el = await this.getElementFromPoint(event);
-        if (!el) return;
-        // 如果多选组件处于拖拽状态时不进行组件高亮
-        if (this.multiDr.dragStatus === StageDragStatus.ING) return;
-        await this.highlight(el);
-        if (this.highlightedDom === this.selectedDom) {
-          this.highlightLayer.clearHighlight();
-          return;
+    this.renderer = new StageRender({
+      runtimeUrl: config.runtimeUrl,
+      zoom: config.zoom,
+      customizedRender: async (): Promise<HTMLElement | null> => {
+        if (this?.customizedRender) {
+          return await this.customizedRender(this);
         }
-        this.emit('highlight', this.highlightedDom);
-      })
-      .on('clearHighlight', async () => {
-        this.highlightLayer.clearHighlight();
-      })
-      .on('beforeMultiSelect', async (event: MouseEvent) => {
-        const el = await this.getElementFromPoint(event);
-        if (!el) return;
-        // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
-        if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
-          this.selectedDomList.push(this.selectedDom as HTMLElement);
-          this.selectedDom = undefined;
-        }
-        // 判断元素是否已在多选列表
-        const existIndex = this.selectedDomList.findIndex((selectedDom) => selectedDom.id === el.id);
-        if (existIndex !== -1) {
-          // 再次点击取消选中
-          this.selectedDomList.splice(existIndex, 1);
-        } else {
-          this.selectedDomList.push(el);
-        }
-        this.multiSelect(this.selectedDomList);
-      });
-
-    // 要先触发select，在触发update
-    this.dr
-      .on('update', (data: UpdateEventData) => {
-        setTimeout(() => this.emit('update', data));
-      })
-      .on('sort', (data: UpdateEventData) => {
-        setTimeout(() => this.emit('sort', data));
-      });
+        return null;
+      },
+    });
+    this.mask = new StageMask();
+    this.actionManager = new ActionManager(this.getActionManagerConfig(config));
 
-    this.multiDr
-      .on('update', (data: UpdateEventData) => {
-        setTimeout(() => this.emit('update', data));
-      })
-      .on('select', async (id: Id) => {
-        const el = await this.getTargetElement(id);
-        this.select(el); // 选中
-        setTimeout(() => this.emit('select', el)); // set node
-      });
+    this.initRenderEvent();
+    this.initActionEvent();
+    this.initMaskEvent();
   }
 
-  public getElementsFromPoint(event: MouseEvent) {
-    const { renderer, zoom } = this;
-
-    const doc = renderer.contentWindow?.document;
-    let x = event.clientX;
-    let y = event.clientY;
+  /**
+   * 单选选中元素
+   * @param idOrEl 选中的id或者元素
+   */
+  public async select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void> {
+    const el = this.renderer.getTargetElement(idOrEl);
+    if (el === this.actionManager.getSelectedEl()) return;
 
-    if (renderer.iframe) {
-      const rect = renderer.iframe.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
-    }
+    await this.renderer.select([el]);
 
-    return doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
-  }
+    this.mask.setLayout(el);
 
-  public async getElementFromPoint(event: MouseEvent) {
-    const els = this.getElementsFromPoint(event);
-    let stopped = false;
-    const stop = () => (stopped = true);
-    for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
-        if (stopped) break;
-        return el;
-      }
-    }
-  }
+    this.actionManager.select(el, event);
 
-  public async isElCanSelect(el: HTMLElement, event: MouseEvent, stop: () => boolean): Promise<Boolean> {
-    // 执行业务方传入的判断逻辑
-    const canSelectByProp = await this.canSelect(el, event, stop);
-    if (!canSelectByProp) return false;
-    // 多选规则
-    if (this.mask.isMultiSelectStatus) {
-      return this.multiDr.canSelect(el, stop);
+    if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+      this.mask.observerIntersection(el);
     }
-    return true;
   }
 
   /**
-   * 选中组件
-   * @param idOrEl 组件Dom节点的id属性，或者Dom节点
+   * 多选选中多个元素
+   * @param idOrElList 选中元素的id或元素列表
    */
-  public async select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void> {
-    this.clearSelectStatus('multiSelect');
-    const el = await this.getTargetElement(idOrEl);
-
-    if (el === this.selectedDom) return;
-
-    const runtime = await this.renderer.getRuntime();
-
-    await runtime?.select?.(el.id);
-
-    if (runtime?.beforeSelect) {
-      await runtime.beforeSelect(el);
-    }
+  public async multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void> {
+    const els = idOrElList.map((idOrEl) => this.renderer.getTargetElement(idOrEl));
+    if (els.length === 0) return;
 
-    this.mask.setLayout(el);
-    this.dr.select(el, event);
+    const lastEl = els[els.length - 1];
+    // 是否减少了组件选择
+    const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
+    await this.renderer.select(els);
 
-    if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
-      this.mask.intersectionObserver?.observe(el);
-    }
+    this.mask.setLayout(lastEl);
 
-    this.selectedDom = el;
+    this.actionManager.multiSelect(idOrElList);
 
-    if (this.renderer.contentWindow) {
-      removeSelectedClassName(this.renderer.contentWindow.document);
-      if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
-      }
+    if ((this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
+      this.mask.observerIntersection(lastEl);
     }
   }
 
   /**
-   * 多选
-   * @param domList 多选节点
+   * 高亮选中元素
+   * @param el 要高亮的元素
    */
-  public async multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void> {
-    this.clearSelectStatus('select');
-    const elList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
-    this.multiDr.multiSelect(elList);
-    this.emit('multiSelect', elList);
+  public highlight(idOrEl: Id | HTMLElement): void {
+    this.actionManager.highlight(idOrEl);
   }
 
   /**
-   * 更新选中的节点
-   * @param data 更新的数据
+   * 更新组件
+   * @param data 更新组件的数据
    */
-  public update(data: UpdateData): Promise<void> {
+  public async update(data: UpdateData): Promise<void> {
     const { config } = data;
 
-    return this.renderer?.getRuntime().then((runtime) => {
-      runtime?.update?.(data);
-      // 更新配置后，需要等组件渲染更新
-      setTimeout(() => {
-        const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
-        // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
-        if (el && el.id === this.selectedDom?.id) {
-          this.selectedDom = el;
-          // 更新了组件的布局，需要重新设置mask是否可以滚动
-          this.mask.setLayout(el);
-          this.dr.updateMoveable(el);
-        }
-      }, 0);
+    await this.renderer.update(data);
+    // 通过setTimeout等画布中组件完成渲染更新
+    setTimeout(() => {
+      const el = this.renderer.getTargetElement(`${config.id}`);
+      if (el && this.actionManager.isSelectedEl(el)) {
+        // 更新了组件的布局，需要重新设置mask是否可以滚动
+        this.mask.setLayout(el);
+        // 组件有更新，需要set
+        this.actionManager.setSelectedEl(el);
+        this.actionManager.updateMoveable(el);
+      }
     });
   }
 
   /**
-   * 高亮选中组件
-   * @param el 页面Dom节点
+   * 往画布增加一个组件
+   * @param data 组件信息数据
    */
-  public async highlight(idOrEl: HTMLElement | Id): Promise<void> {
-    let el;
-    try {
-      el = await this.getTargetElement(idOrEl);
-    } catch (error) {
-      this.highlightLayer.clearHighlight();
-      return;
-    }
-    if (el === this.highlightedDom || !el) return;
-    this.highlightLayer.highlight(el);
-    this.highlightedDom = el;
+  public async add(data: UpdateData): Promise<void> {
+    return await this.renderer.add(data);
   }
 
-  public sortNode(data: SortEventData): Promise<void> {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
-  }
-
-  public add(data: UpdateData): Promise<void> {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
-  }
-
-  public remove(data: RemoveData): Promise<void> {
-    return this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
+  /**
+   * 从画布删除一个组件
+   * @param data 组件信息数据
+   */
+  public async remove(data: RemoveData): Promise<void> {
+    return await this.renderer.remove(data);
   }
 
   public setZoom(zoom: number = DEFAULT_ZOOM): void {
-    this.zoom = zoom;
-  }
-
-  /**
-   * 用于在切换选择模式时清除上一次的状态
-   * @param selectType 需要清理的选择模式 多选：multiSelect，单选：select
-   */
-  public clearSelectStatus(selectType: String) {
-    if (selectType === 'multiSelect') {
-      this.multiDr.clearSelectStatus();
-      this.selectedDomList = [];
-    } else {
-      this.dr.clearSelectStatus();
-    }
+    this.renderer.setZoom(zoom);
   }
 
   /**
@@ -331,52 +182,161 @@ export default class StageCore extends EventEmitter {
    */
   public clearGuides() {
     this.mask.clearGuides();
-    this.dr.clearGuides();
+    this.actionManager.clearGuides();
   }
 
-  public async addContainerHighlightClassName(event: MouseEvent, exclude: Element[]) {
-    const els = this.getElementsFromPoint(event);
-    const { renderer } = this;
-    const doc = renderer.contentWindow?.document;
-
-    if (!doc) return;
-
-    for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isContainer(el)) && !exclude.includes(el)) {
-        addClassName(el, doc, this.containerHighlightClassName);
-        break;
-      }
-    }
+  /**
+   * @deprecated 废弃接口，建议用delayedMarkContainer代替
+   */
+  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout {
+    return this.delayedMarkContainer(event, excludeElList);
   }
 
-  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude: Element[] = []): NodeJS.Timeout {
-    return globalThis.setTimeout(() => {
-      this.addContainerHighlightClassName(event, exclude);
-    }, this.containerHighlightDuration);
+  /**
+   * 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
+   * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
+   * @param event 鼠标事件
+   * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
+   */
+  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout {
+    return this.actionManager.delayedMarkContainer(event, excludeElList);
   }
 
   /**
    * 销毁实例
    */
   public destroy(): void {
-    const { mask, renderer, dr, highlightLayer } = this;
+    const { mask, renderer, actionManager, pageResizeObserver } = this;
 
     renderer.destroy();
     mask.destroy();
-    dr.destroy();
-    highlightLayer.destroy();
+    actionManager.destroy();
+    pageResizeObserver?.disconnect();
 
     this.removeAllListeners();
 
     this.container = undefined;
   }
 
-  private async getTargetElement(idOrEl: Id | HTMLElement): Promise<HTMLElement> {
-    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
-      const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
-      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
-      return el;
+  /**
+   * 监听页面大小变化
+   */
+  private observePageResize(page: HTMLElement): void {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.pageResizeObserver = new ResizeObserver((entries) => {
+        this.mask.pageResize(entries);
+        this.actionManager.updateMoveable();
+      });
+
+      this.pageResizeObserver.observe(page);
     }
-    return idOrEl;
+  }
+
+  private getActionManagerConfig(config: StageCoreConfig): ActionManagerConfig {
+    const actionManagerConfig: ActionManagerConfig = {
+      containerHighlightClassName: config.containerHighlightClassName,
+      containerHighlightDuration: config.containerHighlightDuration,
+      containerHighlightType: config.containerHighlightType,
+      moveableOptions: config.moveableOptions,
+      multiMoveableOptions: config.multiMoveableOptions,
+      container: this.mask.content,
+      canSelect: config.canSelect,
+      isContainer: config.isContainer,
+      updateDragEl: config.updateDragEl,
+      getRootContainer: () => this.container,
+      getRenderDocument: () => this.renderer.getDocument(),
+      getTargetElement: (idOrEl: Id | HTMLElement) => this.renderer.getTargetElement(idOrEl),
+      getElementsFromPoint: (point: Point) => this.renderer.getElementsFromPoint(point),
+    };
+
+    return actionManagerConfig;
+  }
+
+  private initRenderEvent(): void {
+    this.renderer.on('runtime-ready', (runtime: Runtime) => {
+      this.emit('runtime-ready', runtime);
+    });
+    this.renderer.on('page-el-update', (el: HTMLElement) => {
+      this.mask?.observe(el);
+      this.observePageResize(el);
+    });
+  }
+
+  private initMaskEvent(): void {
+    this.mask.on('change-guides', (data: GuidesEventData) => {
+      this.actionManager.setGuidelines(data.type, data.guides);
+      this.emit('change-guides', data);
+    });
+  }
+
+  /**
+   * 初始化操作相关事件监听
+   */
+  private initActionEvent(): void {
+    this.initActionManagerEvent();
+    this.initDrEvent();
+    this.initMulDrEvent();
+    this.initHighlightEvent();
+  }
+
+  /**
+   * 初始化ActionManager类本身抛出来的事件监听
+   */
+  private initActionManagerEvent(): void {
+    this.actionManager
+      .on('before-select', (idOrEl: Id | HTMLElement, event?: MouseEvent) => {
+        this.select(idOrEl, event);
+      })
+      .on('select', (selectedEl: HTMLElement) => {
+        this.emit('select', selectedEl);
+      })
+      .on('before-multi-select', (idOrElList: HTMLElement[] | Id[]) => {
+        this.multiSelect(idOrElList);
+      })
+      .on('multi-select', (selectedElList: HTMLElement[]) => {
+        this.emit('multi-select', selectedElList);
+      });
+  }
+
+  /**
+   * 初始化DragResize类通过ActionManager抛出来的事件监听
+   */
+  private initDrEvent(): void {
+    this.actionManager
+      .on('update', (data: UpdateEventData) => {
+        this.emit('update', data);
+      })
+      .on('sort', (data: UpdateEventData) => {
+        this.emit('sort', data);
+      })
+      .on('select-parent', () => {
+        this.emit('select-parent');
+      });
+  }
+
+  /**
+   * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
+   */
+  private initMulDrEvent(): void {
+    this.actionManager
+      // 多选切换到单选
+      .on('change-to-select', (el: HTMLElement) => {
+        this.select(el);
+        // 先保证画布内完成渲染，再通知外部更新
+        setTimeout(() => this.emit('select', el));
+      })
+      .on('multi-update', (data: UpdateEventData, parentEl: HTMLElement | null) => {
+        this.emit('update', { data, parentEl });
+      });
+  }
+
+  /**
+   * 初始化Highlight类通过ActionManager抛出来的事件监听
+   */
+  private initHighlightEvent(): void {
+    this.actionManager.on('highlight', async (highlightEl: HTMLElement) => {
+      this.emit('highlight', highlightEl);
+    });
   }
 }