@tmagic/stage 1.2.0-beta.17 → 1.2.0-beta.19

package/types/types.d.ts

@@ -1,17 +1,32 @@
+/// <reference types="node" />
 import type { MoveableOptions } from 'moveable';
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
-import { GuidesType } from './const';
+import { GuidesType, ZIndex } from './const';
 import StageCore from './StageCore';
-import StageDragResize from './StageDragResize';
-import StageMask from './StageMask';
+export declare type TargetElement = HTMLElement | SVGElement;
 export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export declare type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
+export declare type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+/** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
+export declare type CustomizeMoveableOptions = ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions) | MoveableOptions | undefined;
+/** render提供给的接口，如果是id则转成el，如果是el则直接返回 */
+export declare type GetTargetElement = (idOrEl: Id | HTMLElement) => HTMLElement;
+/** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
+export declare type GetElementsFromPoint = (point: Point) => HTMLElement[];
+export declare type GetRenderDocument = () => Document | undefined;
+export declare type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+export declare type MarkContainerEnd = () => HTMLElement | null;
+export declare type GetRootContainer = () => HTMLDivElement | undefined;
+/** 将组件添加到容器的方式 */
 export declare enum ContainerHighlightType {
+    /** 默认方式：组件在容器上方悬停一段时间后加入 */
     DEFAULT = "default",
+    /** 按住alt键，并在容器上方悬停一段时间后加入 */
     ALT = "alt"
 }
-export declare type StageCoreConfig = {
+export declare type UpdateDragEl = (el: TargetElement, target: TargetElement) => void;
+export interface StageCoreConfig {
     /** 需要对齐的dom节点的CSS选择器字符串 */
     snapElementQuerySelector?: string;
     /** 放大倍数，默认1倍 */
@@ -21,25 +36,71 @@ export declare type StageCoreConfig = {
     containerHighlightClassName?: string;
     containerHighlightDuration?: number;
     containerHighlightType?: ContainerHighlightType;
-    moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
-    multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
+    moveableOptions?: CustomizeMoveableOptions;
+    multiMoveableOptions?: CustomizeMoveableOptions;
     /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
     runtimeUrl?: string;
     render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
     autoScrollIntoView?: boolean;
-    updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
-};
+    updateDragEl?: UpdateDragEl;
+}
+export interface ActionManagerConfig {
+    container: HTMLElement;
+    containerHighlightClassName?: string;
+    containerHighlightDuration?: number;
+    containerHighlightType?: ContainerHighlightType;
+    moveableOptions?: CustomizeMoveableOptions;
+    multiMoveableOptions?: CustomizeMoveableOptions;
+    canSelect?: CanSelect;
+    isContainer: IsContainer;
+    getRootContainer: GetRootContainer;
+    getRenderDocument: GetRenderDocument;
+    updateDragEl?: UpdateDragEl;
+    getTargetElement: GetTargetElement;
+    getElementsFromPoint: GetElementsFromPoint;
+}
+export interface MoveableOptionsManagerConfig {
+    container: HTMLElement;
+    moveableOptions?: CustomizeMoveableOptions;
+    getRootContainer: GetRootContainer;
+}
+export interface CustomizeMoveableOptionsCallbackConfig {
+    targetElId?: string;
+}
 export interface StageRenderConfig {
     runtimeUrl?: string;
-    render?: () => Promise<HTMLElement | null>;
+    zoom: number | undefined;
+    customizedRender?: () => Promise<HTMLElement | null>;
 }
 export interface StageMaskConfig {
     core: StageCore;
 }
 export interface StageDragResizeConfig {
-    core: StageCore;
     container: HTMLElement;
-    mask: StageMask;
+    moveableOptions?: CustomizeMoveableOptions;
+    getRootContainer: GetRootContainer;
+    getRenderDocument: GetRenderDocument;
+    markContainerEnd: MarkContainerEnd;
+    delayedMarkContainer: DelayedMarkContainer;
+    updateDragEl?: UpdateDragEl;
+}
+export interface StageMultiDragResizeConfig {
+    container: HTMLElement;
+    multiMoveableOptions?: CustomizeMoveableOptions;
+    getRootContainer: GetRootContainer;
+    getRenderDocument: GetRenderDocument;
+    updateDragEl?: UpdateDragEl;
+}
+export interface DragResizeHelperConfig {
+    container: HTMLElement;
+    updateDragEl?: UpdateDragEl;
+}
+/** 选择状态 */
+export declare enum SelectStatus {
+    /** 单选 */
+    SELECT = "select",
+    /** 多选 */
+    MULTI_SELECT = "multiSelect"
 }
 /** 拖动状态 */
 export declare enum StageDragStatus {
@@ -58,6 +119,10 @@ export interface Offset {
     left: number;
     top: number;
 }
+export interface Point {
+    clientX: number;
+    clientY: number;
+}
 export interface GuidesEventData {
     type: GuidesType;
     guides: number[];
@@ -115,12 +180,13 @@ export interface RuntimeWindow extends Window {
     magic: Magic;
 }
 export interface StageHighlightConfig {
-    core: StageCore;
     container: HTMLElement;
+    updateDragEl?: UpdateDragEl;
+    getRootContainer: GetRootContainer;
 }
-export interface TargetCalibrateConfig {
-    parent: HTMLElement;
-    mask: StageMask;
-    dr: StageDragResize;
-    core: StageCore;
+export interface TargetShadowConfig {
+    container: HTMLElement;
+    zIndex?: ZIndex;
+    updateDragEl?: UpdateDragEl;
+    idPrefix?: string;
 }

package/types/util.d.ts

@@ -1,7 +1,7 @@
-import { Mode } from './const';
-import type { Offset, SortEventData } from './types';
-export declare const getOffset: (el: HTMLElement) => Offset;
-export declare const getTargetElStyle: (el: HTMLElement) => string;
+import { Mode, ZIndex } from './const';
+import type { Offset, SortEventData, TargetElement } from './types';
+export declare const getOffset: (el: TargetElement) => Offset;
+export declare const getTargetElStyle: (el: TargetElement, zIndex?: ZIndex) => string;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
     left: number;
     top: number;
@@ -10,8 +10,8 @@ export declare const isAbsolute: (style: CSSStyleDeclaration) => boolean;
 export declare const isRelative: (style: CSSStyleDeclaration) => boolean;
 export declare const isStatic: (style: CSSStyleDeclaration) => boolean;
 export declare const isFixed: (style: CSSStyleDeclaration) => boolean;
-export declare const isFixedParent: (el: HTMLElement) => boolean;
-export declare const getMode: (el: HTMLElement) => Mode;
+export declare const isFixedParent: (el: Element) => boolean;
+export declare const getMode: (el: Element) => Mode;
 export declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
 export declare const removeSelectedClassName: (doc: Document) => void;
 export declare const addSelectedClassName: (el: Element, doc: Document) => void;
@@ -21,7 +21,7 @@ export declare const calcValueByFontsize: (doc: Document, value: number) => numb
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export declare const down: (deltaTop: number, target: HTMLElement | SVGElement) => SortEventData | void;
+export declare const down: (deltaTop: number, target: TargetElement) => SortEventData | void;
 /**
  * 上移组件位置
  * @param {Array} brothers 处于同一容器下的所有子组件配置
@@ -29,5 +29,5 @@ export declare const down: (deltaTop: number, target: HTMLElement | SVGElement)
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export declare const up: (deltaTop: number, target: HTMLElement | SVGElement) => SortEventData | void;
+export declare const up: (deltaTop: number, target: TargetElement) => SortEventData | void;
 export declare const isMoveableButton: (target: Element) => boolean | undefined;

package/src/TargetCalibrate.ts

@@ -1,119 +0,0 @@
-/*
- * 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 { EventEmitter } from 'events';
-
-import { Mode, ZIndex } from './const';
-import StageCore from './StageCore';
-import StageDragResize from './StageDragResize';
-import StageMask from './StageMask';
-import type { Offset, TargetCalibrateConfig } from './types';
-import { getMode } from './util';
-
-/**
- * 将选中的节点修正定位后，添加一个操作节点到蒙层上
- */
-export default class TargetCalibrate extends EventEmitter {
-  public parent: HTMLElement;
-  public mask: StageMask;
-  public dr: StageDragResize;
-  public core: StageCore;
-  public operationEl: HTMLDivElement;
-
-  constructor(config: TargetCalibrateConfig) {
-    super();
-
-    this.parent = config.parent;
-    this.mask = config.mask;
-    this.dr = config.dr;
-    this.core = config.core;
-
-    this.operationEl = globalThis.document.createElement('div');
-    this.parent.append(this.operationEl);
-  }
-
-  public update(el: HTMLElement, prefix: String): HTMLElement {
-    const { left, top } = this.getOffset(el);
-    const { transform } = getComputedStyle(el);
-    this.operationEl.style.cssText = `
-      position: absolute;
-      transform: ${transform};
-      left: ${left}px;
-      top: ${top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.HIGHLIGHT_EL};
-    `;
-
-    this.operationEl.id = `${prefix}${el.id}`;
-
-    if (typeof this.core.config.updateDragEl === 'function') {
-      this.core.config.updateDragEl(this.operationEl, el);
-    }
-
-    return this.operationEl;
-  }
-
-  public destroy(): void {
-    this.operationEl?.remove();
-  }
-
-  private getOffset(el: HTMLElement): Offset {
-    const { offsetParent } = el;
-
-    const left = el.offsetLeft;
-    const top = el.offsetTop;
-
-    if (offsetParent) {
-      const parentOffset = this.getOffset(offsetParent as HTMLElement);
-      return {
-        left: left + parentOffset.left,
-        top: top + parentOffset.top,
-      };
-    }
-
-    // 选中固定定位元素后editor-mask高度被置为视窗大小
-    if (this.dr.mode === Mode.FIXED) {
-      // 弹窗的情况
-      if (getMode(el) === Mode.FIXED) {
-        return {
-          left,
-          top,
-        };
-      }
-
-      return {
-        left: left - this.mask.scrollLeft,
-        top: top - this.mask.scrollTop,
-      };
-    }
-
-    // 无父元素的固定定位需按滚动值计算
-    if (getMode(el) === Mode.FIXED) {
-      return {
-        left: left + this.mask.scrollLeft,
-        top: top + this.mask.scrollTop,
-      };
-    }
-
-    return {
-      left,
-      top,
-    };
-  }
-}

package/types/TargetCalibrate.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="node" />
-import { EventEmitter } from 'events';
-import StageCore from './StageCore';
-import StageDragResize from './StageDragResize';
-import StageMask from './StageMask';
-import type { TargetCalibrateConfig } from './types';
-/**
- * 将选中的节点修正定位后，添加一个操作节点到蒙层上
- */
-export default class TargetCalibrate extends EventEmitter {
-    parent: HTMLElement;
-    mask: StageMask;
-    dr: StageDragResize;
-    core: StageCore;
-    operationEl: HTMLDivElement;
-    constructor(config: TargetCalibrateConfig);
-    update(el: HTMLElement, prefix: String): HTMLElement;
-    destroy(): void;
-    private getOffset;
-}