@tmagic/stage 1.2.0-beta.7 → 1.2.0-beta.9

package/types/StageCore.d.ts

@@ -25,6 +25,7 @@ export default class StageCore extends EventEmitter {
     containerHighlightType?: ContainerHighlightType;
     isContainer: IsContainer;
     private canSelect;
+    private pageResizeObserver;
     constructor(config: StageCoreConfig);
     getElementsFromPoint(event: MouseEvent): HTMLElement[];
     getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined>;
@@ -73,5 +74,13 @@ export default class StageCore extends EventEmitter {
      * 销毁实例
      */
     destroy(): void;
+    /**
+     * 监听页面大小变化
+     */
+    private observePageResize;
+    /**
+     * 传入stageRender供其回调，获取业务方自定义渲染画布页面渲染结果
+     */
+    private render;
     private getTargetElement;
 }

package/types/StageMask.d.ts

@@ -1,7 +1,5 @@
 import { Mode } from './const';
 import Rule from './Rule';
-import type StageCore from './StageCore';
-import type { StageMaskConfig } from './types';
 /**
  * 蒙层
  * @description 用于拦截页面的点击动作，避免点击时触发组件自身动作；在编辑器中点击组件应当是选中组件；
@@ -9,9 +7,7 @@ import type { StageMaskConfig } from './types';
 export default class StageMask extends Rule {
     content: HTMLDivElement;
     wrapper: HTMLDivElement;
-    core: StageCore;
     page: HTMLElement | null;
-    pageScrollParent: HTMLElement | null;
     scrollTop: number;
     scrollLeft: number;
     width: number;
@@ -20,24 +16,34 @@ export default class StageMask extends Rule {
     wrapperWidth: number;
     maxScrollTop: number;
     maxScrollLeft: number;
-    intersectionObserver: IntersectionObserver | null;
     isMultiSelectStatus: Boolean;
     private mode;
-    private pageResizeObserver;
+    private pageScrollParent;
+    private intersectionObserver;
     private wrapperResizeObserver;
     /**
      * 高亮事件处理函数
      * @param event 事件对象
      */
     private highlightHandler;
-    constructor(config: StageMaskConfig);
+    constructor();
     setMode(mode: Mode): void;
     /**
-     * 监听页面大小变化
-     * @description 同步页面与mask的大小
+     * 初始化视窗和蒙层监听，监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
+     * @description 初始化视窗和蒙层监听
      * @param page 页面Dom节点
      */
     observe(page: HTMLElement): void;
+    /**
+     * 处理页面大小变更，同步页面和mask大小
+     * @param entries ResizeObserverEntry，获取页面最新大小
+     */
+    pageResize(entries: ResizeObserverEntry[]): void;
+    /**
+     * 监听一个组件是否在画布可视区域内
+     * @param el 被选中的组件，可能是左侧目录树中选中的
+     */
+    observerIntersection(el: HTMLElement): void;
     /**
      * 挂载Dom节点
      * @param el 将蒙层挂载到该Dom节点上
@@ -49,6 +55,22 @@ export default class StageMask extends Rule {
      * 销毁实例
      */
     destroy(): void;
+    /**
+     * 初始化content的事件监听
+     */
+    private initContentEventListener;
+    /**
+     * 初始化多选事件监听
+     */
+    private initMultiSelectEvent;
+    /**
+     * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
+     */
+    private initObserverIntersection;
+    /**
+     * 监听mask的容器大小变化
+     */
+    private initObserverWrapper;
     private scroll;
     private scrollTo;
     /**

package/types/StageRender.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
-import StageCore from './StageCore';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
 export default class StageRender extends EventEmitter {
     /** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
@@ -8,9 +7,8 @@ export default class StageRender extends EventEmitter {
     runtime: Runtime | null;
     iframe?: HTMLIFrameElement;
     runtimeUrl?: string;
-    core: StageCore;
     private render?;
-    constructor({ core }: StageRenderConfig);
+    constructor({ runtimeUrl, render }: StageRenderConfig);
     getMagicApi: () => {
         onPageElUpdate: (el: HTMLElement) => boolean;
         onRuntimeReady: (runtime: Runtime) => void;
@@ -21,6 +19,7 @@ export default class StageRender extends EventEmitter {
      */
     mount(el: HTMLDivElement): Promise<void>;
     getRuntime: () => Promise<Runtime>;
+    getDocument(): Document | undefined;
     /**
      * 销毁实例
      */

package/types/types.d.ts

@@ -30,7 +30,8 @@ export declare type StageCoreConfig = {
     updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
 };
 export interface StageRenderConfig {
-    core: StageCore;
+    runtimeUrl?: string;
+    render?: () => Promise<HTMLElement | null>;
 }
 export interface StageMaskConfig {
     core: StageCore;

package/types/util.d.ts

@@ -30,3 +30,4 @@ export declare const down: (deltaTop: number, target: HTMLElement | SVGElement)
  * @param {Object} detail 当前选中的组件配置
  */
 export declare const up: (deltaTop: number, target: HTMLElement | SVGElement) => SortEventData | void;
+export declare const isMoveableButton: (target: Element) => boolean | undefined;