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

package/src/StageCore.ts

@@ -18,25 +18,37 @@
 
 import { EventEmitter } from 'events';
 
-import { GuidesEvents } from '@scena/guides';
-
 import { Id } from '@tmagic/schema';
 
-import { DEFAULT_ZOOM } from './const';
+import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX } from './const';
 import StageDragResize from './StageDragResize';
+import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
 import StageRender from './StageRender';
-import { RemoveData, Runtime, SortEventData, StageCoreConfig, UpdateData, UpdateEventData } from './types';
-import { isFixed } from './util';
+import {
+  CanSelect,
+  GuidesEventData,
+  RemoveData,
+  Runtime,
+  SortEventData,
+  StageCoreConfig,
+  UpdateData,
+  UpdateEventData,
+} from './types';
+import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageCore extends EventEmitter {
   public selectedDom: Element | undefined;
+  public highlightedDom: Element | undefined;
 
   public renderer: StageRender;
   public mask: StageMask;
   public dr: StageDragResize;
+  public highlightLayer: StageHighlight;
   public config: StageCoreConfig;
   public zoom = DEFAULT_ZOOM;
+  public container?: HTMLDivElement;
+  private canSelect: CanSelect;
 
   constructor(config: StageCoreConfig) {
     super();
@@ -44,77 +56,165 @@ export default class StageCore extends EventEmitter {
     this.config = config;
 
     this.setZoom(config.zoom);
+    this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
 
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });
     this.dr = new StageDragResize({ core: this, container: this.mask.content });
+    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.mask.on('select', async (el: Element, event: MouseEvent) => {
-      await this.dr?.select(el as HTMLElement);
-      setTimeout(() => this.dr?.moveable?.dragStart(event));
+    this.renderer.on('runtime-ready', (runtime: Runtime) => {
+      this.emit('runtime-ready', runtime);
     });
-    this.mask.on('selected', (el: Element) => {
-      this.select(el as HTMLElement);
-      this.emit('select', el);
+    this.renderer.on('page-el-update', (el: HTMLElement) => {
+      this.mask?.observe(el);
     });
 
-    this.dr.on('update', (data: UpdateEventData) => this.emit('update', data));
-    this.dr.on('sort', (data: UpdateEventData) => this.emit('sort', data));
+    this.mask
+      .on('beforeSelect', (event: MouseEvent) => {
+        this.setElementFromPoint(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) => {
+        await this.setElementFromPoint(event);
+        if (this.highlightedDom === this.selectedDom) {
+          this.highlightLayer.clearHighlight();
+          return;
+        }
+        this.highlightLayer.highlight(this.highlightedDom as HTMLElement);
+        this.emit('highlight', this.highlightedDom);
+      })
+      .on('clearHighlight', async () => {
+        this.highlightLayer.clearHighlight();
+      });
+
+    // 要先触发select，在触发update
+    this.dr
+      .on('update', (data: UpdateEventData) => {
+        setTimeout(() => this.emit('update', data));
+      })
+      .on('sort', (data: UpdateEventData) => {
+        setTimeout(() => this.emit('sort', data));
+      });
+  }
+
+  public async setElementFromPoint(event: MouseEvent) {
+    const { renderer, zoom } = this;
+
+    const doc = renderer.contentWindow?.document;
+    let x = event.clientX;
+    let y = event.clientY;
+
+    if (renderer.iframe) {
+      const rect = renderer.iframe.getClientRects()[0];
+      if (rect) {
+        x = x - rect.left;
+        y = y - rect.top;
+      }
+    }
+
+    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, event, stop))) {
+        if (stopped) break;
+        if (event.type === 'mousemove') {
+          this.highlight(el);
+          break;
+        }
+        this.select(el, event);
+        break;
+      }
+    }
   }
 
   /**
    * 选中组件
    * @param idOrEl 组件Dom节点的id属性，或者Dom节点
    */
-  public async select(idOrEl: Id | HTMLElement): Promise<void> {
-    let el;
-    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
-      const runtime = await this.renderer?.getRuntime();
-      el = await runtime?.select?.(`${idOrEl}`);
-      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
-    } else {
-      el = idOrEl;
-    }
+  public async select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void> {
+    const el = await this.getTargetElement(idOrEl);
 
-    if (this.selectedDom === el) return;
+    if (el === this.selectedDom) return;
 
-    await this.beforeSelect(el);
+    const runtime = await this.renderer.getRuntime();
+
+    await runtime?.select?.(el.id);
+
+    if (runtime?.beforeSelect) {
+      await runtime.beforeSelect(el);
+    }
 
+    this.mask.setLayout(el);
+    this.dr.select(el, event);
     this.selectedDom = el;
-    this.setMaskLayout(el);
-    this.dr?.select(el);
+
+    if (this.renderer.contentWindow) {
+      removeSelectedClassName(this.renderer.contentWindow.document);
+      if (this.selectedDom) {
+        addSelectedClassName(this.selectedDom);
+      }
+    }
   }
 
-  public update(data: UpdateData): void {
+  /**
+   * 更新选中的节点
+   * @param data 更新的数据
+   */
+  public update(data: UpdateData): Promise<void> {
     const { config } = data;
 
-    this.renderer?.getRuntime().then((runtime) => {
+    return this.renderer?.getRuntime().then((runtime) => {
       runtime?.update?.(data);
       // 更新配置后，需要等组件渲染更新
       setTimeout(() => {
         const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
-        if (el) {
+        // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
+        if (el && el.id === this.selectedDom?.id) {
+          this.selectedDom = el;
           // 更新了组件的布局，需要重新设置mask是否可以滚动
-          this.setMaskLayout(el);
+          this.mask.setLayout(el);
+          this.dr.updateMoveable(el);
         }
-        this.dr?.refresh();
       }, 0);
     });
   }
 
-  public sortNode(data: SortEventData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
+  /**
+   * 高亮选中组件
+   * @param el 页面Dom节点
+   */
+  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) return;
+    this.highlightLayer.highlight(el);
+    this.highlightedDom = el;
   }
 
-  public add(data: UpdateData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+  public sortNode(data: SortEventData): Promise<void> {
+    return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
   }
 
-  public remove(data: RemoveData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(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));
   }
 
   public setZoom(zoom: number = DEFAULT_ZOOM): void {
@@ -126,17 +226,12 @@ export default class StageCore extends EventEmitter {
    * @param el 将stage挂载到该Dom节点上
    */
   public mount(el: HTMLDivElement): void {
+    this.container = el;
     const { mask, renderer } = this;
 
     renderer.mount(el);
     mask.mount(el);
 
-    const { wrapper: maskWrapper, hGuides, vGuides } = mask;
-
-    maskWrapper.addEventListener('scroll', this.maskScrollHandler);
-    hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler);
-    vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler);
-
     this.emit('mounted');
   }
 
@@ -145,78 +240,31 @@ export default class StageCore extends EventEmitter {
    */
   public clearGuides() {
     this.mask.clearGuides();
-    this.dr.setHGuidelines([]);
-    this.dr.setVGuidelines([]);
+    this.dr.clearGuides();
   }
 
   /**
    * 销毁实例
    */
   public destroy(): void {
-    const { mask, renderer, dr } = this;
-    const { wrapper: maskWrapper, hGuides, vGuides } = mask;
+    const { mask, renderer, dr, highlightLayer } = this;
 
     renderer.destroy();
     mask.destroy();
     dr.destroy();
-    maskWrapper.removeEventListener('scroll', this.maskScrollHandler);
-    hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler);
-    vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler);
-    this.removeAllListeners();
-  }
-
-  private maskScrollHandler = (event: Event) => {
-    const { mask, renderer } = this;
-    const { wrapper: maskWrapper, hGuides, vGuides } = mask;
-    const { scrollTop } = maskWrapper;
-
-    renderer?.contentWindow?.document.documentElement.scrollTo({ top: scrollTop });
-
-    hGuides.scrollGuides(scrollTop);
-    hGuides.scroll(0);
-
-    vGuides.scrollGuides(0);
-    vGuides.scroll(scrollTop);
+    highlightLayer.destroy();
 
-    this.emit('scroll', event);
-  };
-
-  private hGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
-    this.dr.setHGuidelines(e.guides);
-    this.emit('changeGuides');
-  };
-
-  private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
-    this.dr.setVGuidelines(e.guides);
-    this.emit('changeGuides');
-  };
-
-  private setMaskLayout(el: HTMLElement): void {
-    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;
-    }
+    this.removeAllListeners();
 
-    if (fixed) {
-      this.mask?.setFixed();
-    } else {
-      this.mask?.setAbsolute();
-    }
+    this.container = undefined;
   }
 
-  private async beforeSelect(el: HTMLElement): Promise<void> {
-    const runtime = await this.renderer?.getRuntime();
-    if (runtime?.beforeSelect) {
-      await runtime.beforeSelect(el);
+  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;
     }
+    return idOrEl;
   }
 }