@tmagic/stage 1.2.0-beta.2 → 1.2.0-beta.21

package/src/types.ts

@@ -16,25 +16,44 @@
  * limitations under the License.
  */
 
-import { MoveableOptions } from 'moveable';
+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 type TargetElement = HTMLElement | SVGElement;
 
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
-
+export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+/** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
+export type CustomizeMoveableOptions =
+  | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
+  | MoveableOptions
+  | undefined;
+/** render提供给的接口，如果是id则转成el，如果是el则直接返回 */
+export type GetTargetElement = (idOrEl: Id | HTMLElement) => HTMLElement;
+/** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
+export type GetElementsFromPoint = (point: Point) => HTMLElement[];
+export type GetRenderDocument = () => Document | undefined;
+export type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+export type MarkContainerEnd = () => HTMLElement | null;
+export type GetRootContainer = () => HTMLDivElement | undefined;
+
+/** 将组件添加到容器的方式 */
 export enum ContainerHighlightType {
+  /** 默认方式：组件在容器上方悬停一段时间后加入 */
   DEFAULT = 'default',
+  /** 按住alt键，并在容器上方悬停一段时间后加入 */
   ALT = 'alt',
 }
 
-export type StageCoreConfig = {
+export type UpdateDragEl = (el: TargetElement, target: TargetElement) => void;
+
+export interface StageCoreConfig {
   /** 需要对齐的dom节点的CSS选择器字符串 */
   snapElementQuerySelector?: string;
   /** 放大倍数，默认1倍 */
@@ -44,17 +63,45 @@ export 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 {
-  core: StageCore;
+  runtimeUrl?: string;
+  zoom: number | undefined;
+  customizedRender?: () => Promise<HTMLElement | null>;
 }
 
 export interface StageMaskConfig {
@@ -62,9 +109,34 @@ export interface StageMaskConfig {
 }
 
 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 enum SelectStatus {
+  /** 单选 */
+  SELECT = 'select',
+  /** 多选 */
+  MULTI_SELECT = 'multiSelect',
 }
 
 /** 拖动状态 */
@@ -87,6 +159,11 @@ export interface Offset {
   top: number;
 }
 
+export interface Point {
+  clientX: number;
+  clientY: number;
+}
+
 export interface GuidesEventData {
   type: GuidesType;
   guides: number[];
@@ -153,13 +230,14 @@ export interface RuntimeWindow extends Window {
 }
 
 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/src/util.ts

@@ -18,7 +18,7 @@
 import { removeClassName } from '@tmagic/utils';
 
 import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
-import type { Offset, SortEventData } from './types';
+import type { Offset, SortEventData, TargetElement } from './types';
 
 const getParents = (el: Element, relative: Element) => {
   let cur: Element | null = el.parentElement;
@@ -30,12 +30,16 @@ const getParents = (el: Element, relative: Element) => {
   return parents;
 };
 
-export const getOffset = (el: HTMLElement): Offset => {
-  const { offsetParent } = el;
+export const getOffset = (el: TargetElement): Offset => {
+  const htmlEl = el as HTMLElement;
+  const { offsetParent } = htmlEl;
 
-  const left = el.offsetLeft;
-  const top = el.offsetTop;
+  const left = htmlEl.offsetLeft || 0;
+  const top = htmlEl.offsetTop || 0;
 
+  // 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。
+  // 在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）
+  // body offsetParent 为 null
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent as HTMLElement);
     return {
@@ -51,7 +55,7 @@ export const getOffset = (el: HTMLElement): Offset => {
 };
 
 // 将蒙层占位节点覆盖在原节点上方
-export const getTargetElStyle = (el: HTMLElement) => {
+export const getTargetElStyle = (el: TargetElement, zIndex?: ZIndex) => {
   const offset = getOffset(el);
   const { transform } = getComputedStyle(el);
   return `
@@ -61,13 +65,16 @@ export const getTargetElStyle = (el: HTMLElement) => {
     top: ${offset.top}px;
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
-    z-index: ${ZIndex.DRAG_EL};
+    ${typeof zIndex !== 'undefined' ? `z-index: ${zIndex};` : ''}
   `;
 };
 
 export const getAbsolutePosition = (el: HTMLElement, { top, left }: Offset) => {
   const { offsetParent } = el;
 
+  // 在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。
+  // 在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）
+  // body offsetParent 为 null
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent as HTMLElement);
     return {
@@ -87,7 +94,7 @@ export const isStatic = (style: CSSStyleDeclaration): boolean => style.position
 
 export const isFixed = (style: CSSStyleDeclaration): boolean => style.position === 'fixed';
 
-export const isFixedParent = (el: HTMLElement) => {
+export const isFixedParent = (el: Element) => {
   let fixed = false;
   let dom = el;
   while (dom) {
@@ -104,7 +111,7 @@ export const isFixedParent = (el: HTMLElement) => {
   return fixed;
 };
 
-export const getMode = (el: HTMLElement): Mode => {
+export const getMode = (el: Element): Mode => {
   if (isFixedParent(el)) return Mode.FIXED;
   const style = getComputedStyle(el);
   if (isStatic(style) || isRelative(style)) return Mode.SORTABLE;
@@ -119,6 +126,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;
@@ -165,7 +175,7 @@ export const calcValueByFontsize = (doc: Document, value: number) => {
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
+export const down = (deltaTop: number, target: TargetElement): SortEventData | void => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
@@ -201,7 +211,7 @@ export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEv
  * @param {number} deltaTop 偏移量
  * @param {Object} detail 当前选中的组件配置
  */
-export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
+export const up = (deltaTop: number, target: TargetElement): SortEventData | void => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
     (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
   );
@@ -229,3 +239,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/ActionManager.d.ts

@@ -0,0 +1,141 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import EventEmitter from 'events';
+import { Id } from '@tmagic/schema';
+import { GuidesType } from './const';
+import { ActionManagerConfig, SelectStatus } from './types';
+/**
+ * 管理蒙层mask之上的操作：1、监听键盘鼠标事件，判断形成单选、多选、高亮操作；2、管理单选、多选、高亮三个类协同工作。
+ * @extends EventEmitter
+ */
+export default class ActionManager extends EventEmitter {
+    private dr;
+    private multiDr;
+    private highlightLayer;
+    /** 单选、多选、高亮的容器（蒙层的content） */
+    private container;
+    /** 当前选中的节点 */
+    private selectedEl;
+    /** 多选选中的节点组 */
+    private selectedElList;
+    /** 当前高亮的节点 */
+    private highlightedEl;
+    /** 当前是否处于多选状态 */
+    private isMultiSelectStatus;
+    /** 当拖拽组件到容器上方进入可加入容器状态时，给容器添加的一个class名称 */
+    private containerHighlightClassName;
+    /** 当拖拽组件到容器上方时，需要悬停多久才能将组件加入容器 */
+    private containerHighlightDuration;
+    /** 将组件加入容器的操作方式 */
+    private containerHighlightType?;
+    private isAltKeydown;
+    private getTargetElement;
+    private getElementsFromPoint;
+    private canSelect;
+    private isContainer;
+    private getRenderDocument;
+    private mouseMoveHandler;
+    constructor(config: ActionManagerConfig);
+    /**
+     * 设置水平/垂直参考线
+     * @param type 参考线类型
+     * @param guidelines 参考线坐标数组
+     */
+    setGuidelines(type: GuidesType, guidelines: number[]): void;
+    /**
+     * 清空所有参考线
+     */
+    clearGuides(): void;
+    /**
+     * 更新moveable，外部主要调用场景是元素配置变更、页面大小变更
+     * @param el 变更的元素
+     */
+    updateMoveable(el?: HTMLElement): void;
+    /**
+     * 判断是否单选选中的元素
+     */
+    isSelectedEl(el: HTMLElement): boolean;
+    setSelectedEl(el: HTMLElement): void;
+    getSelectedEl(): HTMLElement | undefined;
+    getSelectedElList(): HTMLElement[];
+    /**
+     * 获取鼠标下方第一个可选中元素，如果元素层叠，返回到是最上层元素
+     * @param event 鼠标事件
+     * @returns 鼠标下方第一个可选中元素
+     */
+    getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined>;
+    /**
+     * 判断一个元素能否在当前场景被选中
+     * @param el 被判断的元素
+     * @param event 鼠标事件
+     * @param stop 通过该元素如果得知剩下的元素都不可被选中，通知调用方终止对剩下元素的判断
+     * @returns 能否选中
+     */
+    isElCanSelect(el: HTMLElement, event: MouseEvent, stop: () => boolean): Promise<boolean>;
+    /**
+     * 判断一个元素是否可以被多选，如果当前元素是page，则调stop函数告诉调用方不必继续判断其它元素了
+     */
+    canMultiSelect(el: HTMLElement, stop: () => boolean): boolean;
+    select(el: HTMLElement, event: MouseEvent | undefined): void;
+    multiSelect(idOrElList: HTMLElement[] | Id[]): void;
+    getHighlightEl(): HTMLElement | undefined;
+    setHighlightEl(el: HTMLElement | undefined): void;
+    highlight(idOrEl: Id | HTMLElement): void;
+    clearHighlight(): void;
+    /**
+     * 用于在切换选择模式时清除上一次的状态
+     * @param selectType 需要清理的选择模式
+     */
+    clearSelectStatus(selectType: SelectStatus): void;
+    /**
+     * 找到鼠标下方的容器，通过添加className对容器进行标记
+     * @param event 鼠标事件
+     * @param excludeElList 计算鼠标点所在容器时要排除的元素列表
+     */
+    addContainerHighlightClassName(event: MouseEvent, excludeElList: Element[]): Promise<void>;
+    /**
+     * 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
+     * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
+     * @param event 鼠标事件
+     * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+     * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
+     */
+    delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout;
+    destroy(): void;
+    private changeCallback;
+    /**
+     * 在执行多选逻辑前，先准备好多选选中元素
+     * @param el 新选中的元素
+     * @returns 多选选中的元素列表
+     */
+    private beforeMultiSelect;
+    /**
+     * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+     */
+    private canAddToContainer;
+    /**
+     * 结束对container的标记状态
+     * @returns 标记的容器元素，没有标记的容器时返回null
+     */
+    private markContainerEnd;
+    private initMouseEvent;
+    /**
+     * 初始化键盘事件监听
+     */
+    private initKeyEvent;
+    /**
+     * 处理单选、多选抛出来的事件
+     */
+    private initActionEvent;
+    /**
+     * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
+     */
+    private mouseDownHandler;
+    private isStopTriggerSelect;
+    /**
+     * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
+     */
+    private mouseUpHandler;
+    private mouseLeaveHandler;
+    private mouseWheelHandler;
+}

package/types/DragResizeHelper.d.ts

@@ -0,0 +1,70 @@
+import { OnDrag, OnDragGroup, OnDragGroupStart, OnDragStart, OnResize, OnResizeGroup, OnResizeGroupStart, OnResizeStart, OnRotate, OnRotateStart, OnScale, OnScaleStart } from 'moveable';
+import MoveableHelper from 'moveable-helper';
+import { Mode } from './const';
+import { DragResizeHelperConfig, TargetElement } from './types';
+/**
+ * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
+ * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
+ * 有个特殊情况是流式布局下，moveableHelper不支持，targetShadow也是DragResizeHelper直接改的
+ */
+export default class DragResizeHelper {
+    /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
+    private targetShadow;
+    /** 要操作的原始目标节点 */
+    private target;
+    /** 多选:目标节点组 */
+    private targetList;
+    /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
+     * MoveableHelper里面的方法是成员属性，如果DragResizeHelper用继承的方式将无法通过super去调这些方法 */
+    private moveableHelper;
+    /** 流式布局下，目标节点的镜像节点 */
+    private ghostEl;
+    /** 用于记录节点被改变前的位置 */
+    private frameSnapShot;
+    /** 多选模式下的多个节点 */
+    private framesSnapShot;
+    /** 布局方式：流式布局、绝对定位、固定定位 */
+    private mode;
+    constructor(config: DragResizeHelperConfig);
+    destroy(): void;
+    destroyShadowEl(): void;
+    getShadowEl(): TargetElement | undefined;
+    updateShadowEl(el: HTMLElement): void;
+    setMode(mode: Mode): void;
+    /**
+     * 改变大小事件开始
+     * @param e 包含了拖拽节点的dom，moveableHelper会直接修改拖拽节点
+     */
+    onResizeStart(e: OnResizeStart): void;
+    onResize(e: OnResize): void;
+    onDragStart(e: OnDragStart): void;
+    onDrag(e: OnDrag): void;
+    onRotateStart(e: OnRotateStart): void;
+    onRotate(e: OnRotate): void;
+    onScaleStart(e: OnScaleStart): void;
+    onScale(e: OnScale): void;
+    getGhostEl(): HTMLElement | undefined;
+    destroyGhostEl(): void;
+    clear(): void;
+    getFrame(el: HTMLElement | SVGElement): ReturnType<MoveableHelper['getFrame']>;
+    getShadowEls(): TargetElement[];
+    updateGroup(els: HTMLElement[]): void;
+    setTargetList(targetList: HTMLElement[]): void;
+    clearMultiSelectStatus(): void;
+    onResizeGroupStart(e: OnResizeGroupStart): void;
+    /**
+     * 多选状态下通过拖拽边框改变大小，所有选中组件会一起改变大小
+     */
+    onResizeGroup(e: OnResizeGroup): void;
+    onDragGroupStart(e: OnDragGroupStart): void;
+    onDragGroup(e: OnDragGroup): void;
+    /**
+     * 多选状态设置多个节点的快照
+     */
+    private setFramesSnapShot;
+    /**
+     * 流式布局把目标节点复制一份进行拖拽，在拖拽结束前不影响页面原布局样式
+     */
+    private generateGhostEl;
+    private setGhostElChildrenId;
+}

package/types/MoveableOptionsManager.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="node" />
+import EventEmitter from 'events';
+import { MoveableOptions } from 'moveable';
+import { GuidesType, Mode } from './const';
+import { MoveableOptionsManagerConfig } from './types';
+/**
+ * 单选和多选的父类，用于管理moveableOptions
+ * @extends EventEmitter
+ */
+export default class MoveableOptionsManager extends EventEmitter {
+    /** 布局方式：流式布局、绝对定位、固定定位 */
+    mode: Mode;
+    /** 画布容器 */
+    protected container: HTMLElement;
+    /** 水平参考线 */
+    private horizontalGuidelines;
+    /** 垂直参考线 */
+    private verticalGuidelines;
+    /** 对齐元素集合 */
+    private elementGuidelines;
+    /** 由外部调用方（编辑器）传入进来的moveable默认参数，可以为空，也可以是一个回调函数 */
+    private customizedOptions?;
+    /** 获取整个画布的根元素（在StageCore的mount函数中挂载的container） */
+    private getRootContainer;
+    constructor(config: MoveableOptionsManagerConfig);
+    /**
+     * 设置水平/垂直参考线
+     * @param type 参考线类型
+     * @param guidelines 参考线坐标数组
+     */
+    setGuidelines(type: GuidesType, guidelines: number[]): void;
+    /**
+     * 清除横向和纵向的参考线
+     */
+    clearGuides(): void;
+    /**
+     * 设置有哪些元素要辅助对齐
+     * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+     * @param allElList 全部元素列表
+     */
+    protected setElementGuidelines(selectedElList: HTMLElement[], allElList: HTMLElement[]): void;
+    /**
+     * 获取moveable参数
+     * @param isMultiSelect 是否多选模式
+     * @param runtimeOptions 调用时实时传进来的的moveable参数
+     * @returns moveable所需参数
+     */
+    protected getOptions(isMultiSelect: boolean, runtimeOptions?: MoveableOptions): MoveableOptions;
+    /**
+     * 获取单选和多选的moveable公共参数
+     * @returns moveable公共参数
+     */
+    private getDefaultOptions;
+    /**
+     * 获取单选下的差异化参数
+     * @returns {MoveableOptions} moveable options参数
+     */
+    private getSingleOptions;
+    /**
+     * 获取多选下的差异化参数
+     * @returns {MoveableOptions} moveable options参数
+     */
+    private getMultiOptions;
+    /**
+     * 获取业务方自定义的moveable参数
+     */
+    private getCustomizeOptions;
+    /**
+     * 这是给selectParentAbles的回调函数，用于触发选中父元素事件
+     */
+    private selectParentHandler;
+    /**
+     * 为需要辅助对齐的元素创建div
+     * @param selectedElList 选中的元素列表，需要排除在对齐元素之外
+     * @param allElList 全部元素列表
+     * @returns frame 辅助对齐元素集合的页面片
+     */
+    private createGuidelineElements;
+    /**
+     * 判断一个元素是否在元素列表里面
+     * @param ele 元素
+     * @param eleList 元素列表
+     * @returns 是否在元素列表里面
+     */
+    private isInElementList;
+}

package/types/MoveableSelectParentAble.d.ts

@@ -0,0 +1,8 @@
+import { MoveableManagerInterface, Renderer } from 'moveable';
+declare const _default: (selectParentHandler: () => void) => {
+    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;
     /**
      * 清空所有参考线