refactor(stage): 添加注释

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;
 

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';