diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts index 83412e4a..3cd4ba79 100644 --- a/packages/stage/src/StageDragResize.ts +++ b/packages/stage/src/StageDragResize.ts @@ -28,9 +28,13 @@ import StageCore from './StageCore'; import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types'; import { getAbsolutePosition, getMode, getOffset } from './util'; +/** 拖动状态 */ enum ActionStatus { + /** 开始拖动 */ START = 'start', + /** 拖动中 */ ING = 'ing', + /** 拖动结束 */ END = 'end', } @@ -39,17 +43,27 @@ enum ActionStatus { */ export default class StageDragResize extends EventEmitter { public core: StageCore; + /** 画布容器 */ public container: HTMLElement; + /** 目标节点 */ public target?: HTMLElement; + /** 目标节点在蒙层中的占位节点 */ public dragEl: HTMLElement; + /** Moveable拖拽类实例 */ public moveable?: Moveable; + /** 水平参考线 */ public horizontalGuidelines: number[] = []; + /** 垂直参考线 */ public verticalGuidelines: number[] = []; + /** 对齐元素集合 */ public elementGuidelines: HTMLElement[] = []; + /** 布局方式:流式布局、绝对定位、固定定位 */ public mode: Mode = Mode.ABSOLUTE; private moveableOptions: MoveableOptions = {}; + /** 拖动状态 */ private dragStatus: ActionStatus = ActionStatus.END; + /** 流式布局下,目标节点的镜像节点 */ private ghostEl: HTMLElement | undefined; private moveableHelper?: MoveableHelper; diff --git a/packages/stage/src/const.ts b/packages/stage/src/const.ts index 4fd0f800..268e4d28 100644 --- a/packages/stage/src/const.ts +++ b/packages/stage/src/const.ts @@ -16,36 +16,53 @@ * limitations under the License. */ -// 流式布局下拖动时需要clone一个镜像节点,镜像节点的id前缀 +/** 流式布局下拖动时需要clone一个镜像节点,镜像节点的id前缀 */ export const GHOST_EL_ID_PREFIX = 'ghost_el_'; +/** 拖动的时候需要在蒙层中创建一个占位节点,该节点的id前缀 */ export const DRAG_EL_ID_PREFIX = 'drag_el_'; +/** 高亮事需要在蒙层中创建一个占位节点,该节点的id前缀 */ export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_'; -// 默认放到缩小倍数 +/** 默认放到缩小倍数 */ export const DEFAULT_ZOOM = 1; +/** 参考线类型 */ export enum GuidesType { + /** 水平 */ HORIZONTAL = 'horizontal', + /** 垂直 */ VERTICAL = 'vertical', } +/** css z-index */ export enum ZIndex { + /** 蒙层,用于监听用户操作,需要置于顶层 */ MASK = '99999', + /** 选中的节点 */ SELECTED_EL = '666', } +/** 鼠标按键 */ export enum MouseButton { + /** 左键 */ LEFT = 0, + /** z中健 */ MIDDLE = 1, + /** 右键 */ RIGHT = 2, } +/** 布局方式 */ export enum Mode { + /** 绝对定位布局 */ ABSOLUTE = 'absolute', + /** 固定定位布局 */ FIXED = 'fixed', + /** 流式布局 */ SORTABLE = 'sortable', } +/** 选中节点的class name */ export const SELECTED_CLASS = 'tmagic-stage-selected-area';