@tmagic/stage 1.2.0-beta.6 → 1.2.0-beta.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.6",
+  "version": "1.2.0-beta.8",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.2.0-beta.6",
-    "@tmagic/schema": "1.2.0-beta.6",
-    "@tmagic/utils": "1.2.0-beta.6",
+    "@tmagic/core": "1.2.0-beta.8",
+    "@tmagic/schema": "1.2.0-beta.8",
+    "@tmagic/utils": "1.2.0-beta.8",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",

package/src/MoveableSelectParentAble.ts

@@ -0,0 +1,78 @@
+import { MoveableManagerInterface, Renderer } from 'moveable';
+
+import type StageDragResize from './StageDragResize';
+
+export default (dr: StageDragResize) => ({
+  name: 'selectParent',
+  props: {},
+  events: {},
+  render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+    const rect = moveable.getRect();
+    const { pos2 } = moveable.state;
+
+    // use css for able
+    const editableViewer = moveable.useCSS(
+      'div',
+      `
+      {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        will-change: transform;
+        transform-origin: 0px 0px;
+        display: flex;
+      }
+      .moveable-button {
+        width: 20px;
+        height: 20px;
+        background: #4af;
+        border-radius: 4px;
+        appearance: none;
+        border: 0;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      `,
+    );
+    // Add key (required)
+    // Add class prefix moveable-(required)
+    return React.createElement(
+      editableViewer,
+      {
+        className: 'moveable-editable',
+        style: {
+          transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`,
+        },
+      },
+      React.createElement(
+        'button',
+        {
+          className: 'moveable-button',
+          title: '选中父组件',
+          onClick: () => {
+            dr.emit('select-parent');
+          },
+        },
+        React.createElement(
+          'svg',
+          {
+            width: '1em',
+            height: '1em',
+            viewBox: '0 0 16 16',
+            fill: 'none',
+            xmlns: 'http://www.w3.org/2000/svg',
+            style: {
+              transform: 'rotate(90deg)',
+            },
+          },
+          React.createElement('path', {
+            d: 'M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z',
+            fill: 'currentColor',
+            fillOpacity: '0.9',
+          }),
+        ),
+      ),
+    );
+  },
+});

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,
     });
   }
 
@@ -135,6 +138,7 @@ export default class Rule extends EventEmitter {
       lineColor: '#000',
       textColor: '#000',
       style: this.getGuidesStyle(type),
+      showGuides: this.isShowGuides,
     });
 
   private hGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {

package/src/StageCore.ts

@@ -62,6 +62,7 @@ export default class StageCore extends EventEmitter {
   public isContainer: IsContainer;
 
   private canSelect: CanSelect;
+  private pageResizeObserver: ResizeObserver | null = null;
 
   constructor(config: StageCoreConfig) {
     super();
@@ -75,8 +76,8 @@ export default class StageCore extends EventEmitter {
     this.containerHighlightDuration = config.containerHighlightDuration || 800;
     this.containerHighlightType = config.containerHighlightType;
 
-    this.renderer = new StageRender({ core: this });
-    this.mask = new StageMask({ core: this });
+    this.renderer = new StageRender({ runtimeUrl: config.runtimeUrl, render: this.render.bind(this) });
+    this.mask = new StageMask();
     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 });
@@ -86,6 +87,7 @@ export default class StageCore extends EventEmitter {
     });
     this.renderer.on('page-el-update', (el: HTMLElement) => {
       this.mask?.observe(el);
+      this.observePageResize(el);
     });
 
     this.mask
@@ -144,6 +146,9 @@ export default class StageCore extends EventEmitter {
       })
       .on('sort', (data: UpdateEventData) => {
         setTimeout(() => this.emit('sort', data));
+      })
+      .on('select-parent', () => {
+        this.emit('select-parent');
       });
 
     this.multiDr
@@ -160,7 +165,6 @@ export default class StageCore extends EventEmitter {
   public getElementsFromPoint(event: MouseEvent) {
     const { renderer, zoom } = this;
 
-    const doc = renderer.contentWindow?.document;
     let x = event.clientX;
     let y = event.clientY;
 
@@ -172,7 +176,7 @@ export default class StageCore extends EventEmitter {
       }
     }
 
-    return doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+    return renderer.getDocument()?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
   }
 
   public async getElementFromPoint(event: MouseEvent) {
@@ -220,15 +224,16 @@ export default class StageCore extends EventEmitter {
     this.dr.select(el, event);
 
     if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
-      this.mask.intersectionObserver?.observe(el);
+      this.mask.observerIntersection(el);
     }
 
     this.selectedDom = el;
 
-    if (this.renderer.contentWindow) {
-      removeSelectedClassName(this.renderer.contentWindow.document);
+    const doc = this.renderer.getDocument();
+    if (doc) {
+      removeSelectedClassName(doc);
       if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
+        addSelectedClassName(this.selectedDom, doc);
       }
     }
   }
@@ -254,7 +259,7 @@ export default class StageCore extends EventEmitter {
       runtime?.update?.(data);
       // 更新配置后，需要等组件渲染更新
       setTimeout(() => {
-        const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
+        const el = this.renderer.getDocument()?.getElementById(`${config.id}`);
         // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
         if (el && el.id === this.selectedDom?.id) {
           this.selectedDom = el;
@@ -337,7 +342,7 @@ export default class StageCore extends EventEmitter {
   public async addContainerHighlightClassName(event: MouseEvent, exclude: Element[]) {
     const els = this.getElementsFromPoint(event);
     const { renderer } = this;
-    const doc = renderer.contentWindow?.document;
+    const doc = renderer.getDocument();
 
     if (!doc) return;
 
@@ -359,21 +364,49 @@ export default class StageCore extends EventEmitter {
    * 销毁实例
    */
   public destroy(): void {
-    const { mask, renderer, dr, highlightLayer } = this;
+    const { mask, renderer, dr, highlightLayer, pageResizeObserver } = this;
 
     renderer.destroy();
     mask.destroy();
     dr.destroy();
     highlightLayer.destroy();
+    pageResizeObserver?.disconnect();
 
     this.removeAllListeners();
 
     this.container = undefined;
   }
 
+  /**
+   * 监听页面大小变化
+   */
+  private observePageResize(page: HTMLElement): void {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.pageResizeObserver = new ResizeObserver((entries) => {
+        this.mask.pageResize(entries);
+
+        if (this.dr.moveable) {
+          this.dr.updateMoveable();
+        }
+      });
+
+      this.pageResizeObserver.observe(page);
+    }
+  }
+
+  /**
+   * 传入stageRender供其回调，获取业务方自定义渲染画布页面渲染结果
+   */
+  private async render(): Promise<HTMLElement | null> {
+    if (this.config?.render) {
+      return await this.config.render(this);
+    }
+    return null;
+  }
+
   private async getTargetElement(idOrEl: Id | HTMLElement): Promise<HTMLElement> {
     if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
-      const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
+      const el = this.renderer.getDocument()?.getElementById(`${idOrEl}`);
       if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
       return el;
     }

package/src/StageDragResize.ts

@@ -27,6 +27,7 @@ import MoveableHelper from 'moveable-helper';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
+import selectParentAbles from './MoveableSelectParentAble';
 import StageCore from './StageCore';
 import StageMask from './StageMask';
 import type { StageDragResizeConfig } from './types';
@@ -593,6 +594,13 @@ export default class StageDragResize extends EventEmitter {
         bottom: isSortable ? undefined : this.container.clientHeight,
         ...(moveableOptions.bounds || {}),
       },
+
+      props: {
+        selectParent: true,
+      },
+
+      ables: [selectParentAbles(this)],
+
       ...options,
       ...moveableOptions,
     };

package/src/StageMask.ts

@@ -23,9 +23,7 @@ import { createDiv, injectStyle } from '@tmagic/utils';
 
 import { Mode, MouseButton, ZIndex } from './const';
 import Rule from './Rule';
-import type StageCore from './StageCore';
-import type { StageMaskConfig } from './types';
-import { getScrollParent, isFixedParent } from './util';
+import { getScrollParent, isFixedParent, isMoveableButton } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
 const throttleTime = 100;
@@ -71,9 +69,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,12 +78,13 @@ 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 事件对象
@@ -96,35 +93,16 @@ export default class StageMask extends Rule {
     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.initContentEventListener();
     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.initMultiSelectEvent();
   }
 
   public setMode(mode: Mode) {
@@ -140,63 +118,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 +180,89 @@ 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();
   }
 
+  /**
+   * 初始化content的事件监听
+   */
+  private initContentEventListener(): void {
+    this.content.addEventListener('mousedown', this.mouseDownHandler);
+    this.content.addEventListener('wheel', this.mouseWheelHandler);
+    this.content.addEventListener('mousemove', this.highlightHandler);
+    this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
+  }
+
+  /**
+   * 初始化多选事件监听
+   */
+  private initMultiSelectEvent(): void {
+    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;
+    });
+  }
+
+  /**
+   * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
+   */
+  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();
 
@@ -315,13 +343,16 @@ export default class StageMask extends Rule {
     event.stopPropagation();
 
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
+    if (!event.target) return;
+
+    const targetClassList = (event.target as HTMLDivElement).classList;
 
     // 如果单击多选选中区域，则不需要再触发选中了，而可能是拖动行为
-    if (!this.isMultiSelectStatus && (event.target as HTMLDivElement).className.indexOf('moveable-area') !== -1) {
+    if (!this.isMultiSelectStatus && targetClassList.contains('moveable-area')) {
       return;
     }
-    // 点击对象如果是边框锚点，则可能是resize
-    if ((event.target as HTMLDivElement).className.indexOf('moveable-control') !== -1) {
+    // 点击对象如果是边框锚点，则可能是resize; 点击对象是功能按钮
+    if (targetClassList.contains('moveable-control') || isMoveableButton(event.target as Element)) {
       return;
     }
 

package/src/StageRender.ts

@@ -20,7 +20,6 @@ import { EventEmitter } from 'events';
 
 import { getHost, injectStyle, isSameDomain } from '@tmagic/utils';
 
-import StageCore from './StageCore';
 import style from './style.css?raw';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
 
@@ -34,16 +33,13 @@ export default class StageRender extends EventEmitter {
 
   public runtimeUrl?: string;
 
-  public core: StageCore;
+  private render?: () => Promise<HTMLElement | null>;
 
-  private render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
-
-  constructor({ core }: StageRenderConfig) {
+  constructor({ runtimeUrl, render }: StageRenderConfig) {
     super();
 
-    this.core = core;
-    this.runtimeUrl = core.config.runtimeUrl || '';
-    this.render = core.config.render;
+    this.runtimeUrl = runtimeUrl || '';
+    this.render = render;
 
     this.iframe = globalThis.document.createElement('iframe');
     // 同源，直接加载
@@ -101,6 +97,10 @@ export default class StageRender extends EventEmitter {
     });
   };
 
+  public getDocument(): Document | undefined {
+    return this.contentWindow?.document;
+  }
+
   /**
    * 销毁实例
    */
@@ -120,7 +120,7 @@ export default class StageRender extends EventEmitter {
     if (!this.contentWindow) return;
 
     if (this.render) {
-      const el = await this.render(this.core);
+      const el = await this.render();
       if (el) {
         this.contentWindow.document?.body?.appendChild(el);
       }

package/src/types.ts

@@ -54,7 +54,8 @@ export type StageCoreConfig = {
 };
 
 export interface StageRenderConfig {
-  core: StageCore;
+  runtimeUrl?: string;
+  render?: () => Promise<HTMLElement | null>;
 }
 
 export interface StageMaskConfig {

package/src/util.ts

@@ -119,6 +119,9 @@ export const getScrollParent = (element: HTMLElement, includeHidden = false): HT
 
   for (let parent = element; parent.parentElement; ) {
     parent = parent.parentElement;
+
+    if (parent.tagName === 'HTML') return parent;
+
     style = getComputedStyle(parent);
 
     if (isAbsolute(style) && isStatic(style)) continue;
@@ -229,3 +232,6 @@ export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEven
     dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
   };
 };
+
+export const isMoveableButton = (target: Element) =>
+  target.classList.contains('moveable-button') || target.parentElement?.classList.contains('moveable-button');

package/types/MoveableSelectParentAble.d.ts

@@ -0,0 +1,9 @@
+import { MoveableManagerInterface, Renderer } from 'moveable';
+import type StageDragResize from './StageDragResize';
+declare const _default: (dr: StageDragResize) => {
+    name: string;
+    props: {};
+    events: {};
+    render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
+};
+export default _default;

package/types/Rule.d.ts

@@ -8,12 +8,13 @@ export default class Rule extends EventEmitter {
     verticalGuidelines: number[];
     private container;
     private containerResizeObserver;
+    private isShowGuides;
     constructor(container: HTMLDivElement);
     /**
-     * 是否显示标尺
-     * @param show 是否显示
+     * 是否显示辅助线
+     * @param isShowGuides 是否显示
      */
-    showGuides(show?: boolean): void;
+    showGuides(isShowGuides?: boolean): void;
     setGuides([hLines, vLines]: [number[], number[]]): void;
     /**
      * 清空所有参考线