@tmagic/stage 1.5.0-beta.1 → 1.5.0-beta.11

package/src/StageCore.ts

@@ -47,9 +47,9 @@ import type {
  */
 export default class StageCore extends EventEmitter {
   public container?: HTMLDivElement;
-  public renderer: StageRender;
-  public mask: StageMask;
-  public actionManager: ActionManager;
+  public renderer: StageRender | null = null;
+  public mask: StageMask | null = null;
+  public actionManager: ActionManager | null = null;
 
   private pageResizeObserver: ResizeObserver | null = null;
   private autoScrollIntoView: boolean | undefined;
@@ -87,17 +87,18 @@ export default class StageCore extends EventEmitter {
    * @param id 选中的id
    */
   public async select(id: Id, event?: MouseEvent): Promise<void> {
-    const el = this.renderer.getTargetElement(id);
-    if (el === this.actionManager.getSelectedEl()) return;
+    const el = this.renderer?.getTargetElement(id) || null;
+    if (el === this.actionManager?.getSelectedEl()) return;
 
-    await this.renderer.select([id]);
+    await this.renderer?.select([id]);
 
-    el && this.mask.setLayout(el);
-
-    this.actionManager.select(el, event);
+    if (el) {
+      this.mask?.setLayout(el);
+    }
+    this.actionManager?.select(el, event);
 
     if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
-      this.mask.observerIntersection(el);
+      this.mask?.observerIntersection(el);
     }
   }
 
@@ -106,20 +107,20 @@ export default class StageCore extends EventEmitter {
    * @param ids 选中元素的id列表
    */
   public async multiSelect(ids: Id[]): Promise<void> {
-    const els = ids.map((id) => this.renderer.getTargetElement(id)).filter((el) => Boolean(el));
+    const els = ids.map((id) => this.renderer?.getTargetElement(id)).filter((el) => Boolean(el));
     if (els.length === 0) return;
 
     const lastEl = els[els.length - 1];
     // 是否减少了组件选择
-    const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
-    await this.renderer.select(ids);
+    const isReduceSelect = els.length < this.actionManager!.getSelectedElList().length;
+    await this.renderer?.select(ids);
 
-    lastEl && this.mask.setLayout(lastEl);
+    lastEl && this.mask?.setLayout(lastEl);
 
-    this.actionManager.multiSelect(ids);
+    this.actionManager?.multiSelect(ids);
 
     if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
-      this.mask.observerIntersection(lastEl);
+      this.mask?.observerIntersection(lastEl);
     }
   }
 
@@ -128,11 +129,11 @@ export default class StageCore extends EventEmitter {
    * @param el 要高亮的元素
    */
   public highlight(id: Id): void {
-    this.actionManager.highlight(id);
+    this.actionManager?.highlight(id);
   }
 
   public clearHighlight(): void {
-    this.actionManager.clearHighlight();
+    this.actionManager?.clearHighlight();
   }
 
   /**
@@ -142,13 +143,13 @@ export default class StageCore extends EventEmitter {
   public async update(data: UpdateData): Promise<void> {
     const { config } = data;
 
-    await this.renderer.update(data);
+    await this.renderer?.update(data);
     // 通过setTimeout等画布中组件完成渲染更新
     setTimeout(() => {
-      const el = this.renderer.getTargetElement(`${config.id}`);
-      if (el && this.actionManager.isSelectedEl(el)) {
+      const el = this.renderer?.getTargetElement(`${config.id}`);
+      if (el && this.actionManager?.isSelectedEl(el)) {
         // 更新了组件的布局，需要重新设置mask是否可以滚动
-        this.mask.setLayout(el);
+        this.mask?.setLayout(el);
         // 组件有更新，需要set
         this.actionManager.setSelectedEl(el);
         this.actionManager.updateMoveable(el);
@@ -161,7 +162,7 @@ export default class StageCore extends EventEmitter {
    * @param data 组件信息数据
    */
   public async add(data: UpdateData): Promise<void> {
-    return await this.renderer.add(data);
+    return await this.renderer?.add(data);
   }
 
   /**
@@ -169,11 +170,11 @@ export default class StageCore extends EventEmitter {
    * @param data 组件信息数据
    */
   public async remove(data: RemoveData): Promise<void> {
-    return await this.renderer.remove(data);
+    return await this.renderer?.remove(data);
   }
 
   public setZoom(zoom: number = DEFAULT_ZOOM): void {
-    this.renderer.setZoom(zoom);
+    this.renderer?.setZoom(zoom);
   }
 
   /**
@@ -184,8 +185,8 @@ export default class StageCore extends EventEmitter {
     this.container = el;
     const { mask, renderer } = this;
 
-    await renderer.mount(el);
-    mask.mount(el);
+    await renderer?.mount(el);
+    mask?.mount(el);
 
     this.emit('mounted');
   }
@@ -194,8 +195,8 @@ export default class StageCore extends EventEmitter {
    * 清空所有参考线
    */
   public clearGuides() {
-    this.mask.clearGuides();
-    this.actionManager.clearGuides();
+    this.mask?.clearGuides();
+    this.actionManager?.clearGuides();
   }
 
   /**
@@ -216,23 +217,23 @@ export default class StageCore extends EventEmitter {
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
   public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout | undefined {
-    return this.actionManager.delayedMarkContainer(event, excludeElList);
+    return this.actionManager?.delayedMarkContainer(event, excludeElList);
   }
 
   public getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined {
-    return this.actionManager.getMoveableOption(key);
+    return this.actionManager?.getMoveableOption(key);
   }
 
   public getDragStatus() {
-    return this.actionManager.getDragStatus();
+    return this.actionManager?.getDragStatus();
   }
 
   public disableMultiSelect() {
-    this.actionManager.disableMultiSelect();
+    this.actionManager?.disableMultiSelect();
   }
 
   public enableMultiSelect() {
-    this.actionManager.enableMultiSelect();
+    this.actionManager?.enableMultiSelect();
   }
 
   /**
@@ -241,14 +242,18 @@ export default class StageCore extends EventEmitter {
   public destroy(): void {
     const { mask, renderer, actionManager, pageResizeObserver } = this;
 
-    renderer.destroy();
-    mask.destroy();
-    actionManager.destroy();
+    renderer?.destroy();
+    mask?.destroy();
+    actionManager?.destroy();
     pageResizeObserver?.disconnect();
 
     this.removeAllListeners();
 
     this.container = undefined;
+    this.renderer = null;
+    this.mask = null;
+    this.actionManager = null;
+    this.pageResizeObserver = null;
   }
 
   public on<Name extends keyof CoreEvents, Param extends CoreEvents[Name]>(
@@ -272,8 +277,8 @@ export default class StageCore extends EventEmitter {
 
     if (typeof ResizeObserver !== 'undefined') {
       this.pageResizeObserver = new ResizeObserver((entries) => {
-        this.mask.pageResize(entries);
-        this.actionManager.updateMoveable();
+        this.mask?.pageResize(entries);
+        this.actionManager?.updateMoveable();
       });
 
       this.pageResizeObserver.observe(page);
@@ -286,26 +291,26 @@ export default class StageCore extends EventEmitter {
       containerHighlightDuration: config.containerHighlightDuration,
       containerHighlightType: config.containerHighlightType,
       moveableOptions: config.moveableOptions,
-      container: this.mask.content,
+      container: this.mask!.content,
       disabledDragStart: config.disabledDragStart,
       disabledMultiSelect: config.disabledMultiSelect,
       canSelect: config.canSelect,
       isContainer: config.isContainer,
       updateDragEl: config.updateDragEl,
       getRootContainer: () => this.container,
-      getRenderDocument: () => this.renderer.getDocument(),
-      getTargetElement: (id: Id) => this.renderer.getTargetElement(id),
-      getElementsFromPoint: (point: Point) => this.renderer.getElementsFromPoint(point),
+      getRenderDocument: () => this.renderer!.getDocument(),
+      getTargetElement: (id: Id) => this.renderer!.getTargetElement(id),
+      getElementsFromPoint: (point: Point) => this.renderer!.getElementsFromPoint(point),
     };
 
     return actionManagerConfig;
   }
 
   private initRenderEvent(): void {
-    this.renderer.on('runtime-ready', (runtime: Runtime) => {
+    this.renderer?.on('runtime-ready', (runtime: Runtime) => {
       this.emit('runtime-ready', runtime);
     });
-    this.renderer.on('page-el-update', (el: HTMLElement) => {
+    this.renderer?.on('page-el-update', (el: HTMLElement) => {
       this.mask?.observe(el);
       this.observePageResize(el);
 
@@ -314,8 +319,8 @@ export default class StageCore extends EventEmitter {
   }
 
   private initMaskEvent(): void {
-    this.mask.on('change-guides', (data: GuidesEventData) => {
-      this.actionManager.setGuidelines(data.type, data.guides);
+    this.mask?.on('change-guides', (data: GuidesEventData) => {
+      this.actionManager?.setGuidelines(data.type, data.guides);
       this.emit('change-guides', data);
     });
   }
@@ -336,7 +341,7 @@ export default class StageCore extends EventEmitter {
    */
   private initActionManagerEvent(): void {
     this.actionManager
-      .on('before-select', (el: HTMLElement, event?: MouseEvent) => {
+      ?.on('before-select', (el: HTMLElement, event?: MouseEvent) => {
         const id = getIdFromEl()(el);
         id && this.select(id, event);
       })
@@ -359,7 +364,7 @@ export default class StageCore extends EventEmitter {
    */
   private initDrEvent(): void {
     this.actionManager
-      .on('update', (data: UpdateEventData) => {
+      ?.on('update', (data: UpdateEventData) => {
         this.emit('update', data);
       })
       .on('sort', (data: SortEventData) => {
@@ -379,11 +384,11 @@ export default class StageCore extends EventEmitter {
   private initMulDrEvent(): void {
     this.actionManager
       // 多选切换到单选
-      .on('change-to-select', (id: Id, e: MouseEvent) => {
+      ?.on('change-to-select', (id: Id, e: MouseEvent) => {
         this.select(id);
         // 先保证画布内完成渲染，再通知外部更新
         setTimeout(() => {
-          const el = this.renderer.getTargetElement(id);
+          const el = this.renderer?.getTargetElement(id);
           el && this.emit('select', el, e);
         });
       })
@@ -396,7 +401,7 @@ export default class StageCore extends EventEmitter {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   private initHighlightEvent(): void {
-    this.actionManager.on('highlight', (highlightEl: HTMLElement) => {
+    this.actionManager?.on('highlight', (highlightEl: HTMLElement) => {
       this.emit('highlight', highlightEl);
     });
   }
@@ -406,7 +411,7 @@ export default class StageCore extends EventEmitter {
    */
   private initMouseEvent(): void {
     this.actionManager
-      .on('mousemove', (event: MouseEvent) => {
+      ?.on('mousemove', (event: MouseEvent) => {
         this.emit('mousemove', event);
       })
       .on('mouseleave', (event: MouseEvent) => {

package/src/StageDragResize.ts

@@ -22,7 +22,7 @@ import Moveable, { MoveableOptions } from 'moveable';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { Mode, StageDragStatus } from './const';
-import DragResizeHelper from './DragResizeHelper';
+import type DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
 import type {
   DelayedMarkContainer,
@@ -125,6 +125,7 @@ export default class StageDragResize extends MoveableOptionsManager {
    * 销毁实例
    */
   public destroy(): void {
+    this.target = null;
     this.moveable?.destroy();
     this.dragResizeHelper.destroy();
     this.dragStatus = StageDragStatus.END;

package/src/StageHighlight.ts

@@ -81,6 +81,7 @@ export default class StageHighlight extends EventEmitter {
    * 销毁实例
    */
   public destroy(): void {
+    this.target = undefined;
     this.moveable?.destroy();
     this.targetShadow?.destroy();
     this.moveable = undefined;

package/src/StageRender.ts

@@ -155,6 +155,19 @@ export default class StageRender extends EventEmitter {
     return getElById()(this.getDocument(), id);
   }
 
+  public postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+    this.contentWindow.magic = this.getMagicApi();
+
+    this.contentWindow.postMessage(
+      {
+        tmagicRuntimeReady: true,
+      },
+      '*',
+    );
+  }
+
   /**
    * 销毁实例
    */
@@ -236,17 +249,4 @@ export default class StageRender extends EventEmitter {
 
     injectStyle(this.contentWindow.document, style);
   };
-
-  private postTmagicRuntimeReady() {
-    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
-
-    this.contentWindow.magic = this.getMagicApi();
-
-    this.contentWindow.postMessage(
-      {
-        tmagicRuntimeReady: true,
-      },
-      '*',
-    );
-  }
 }

package/src/index.ts

@@ -18,12 +18,16 @@
 
 import StageCore from './StageCore';
 
-export type { MoveableOptions, OnDragStart } from 'moveable';
+export * from 'moveable';
 export type { GuidesOptions } from '@scena/guides';
+
 export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';
 export * from './types';
 export * from './const';
 export * from './util';
+export * from './MoveableActionsAble';
+export { default as MoveableActionsAble } from './MoveableActionsAble';
+
 export default StageCore;

package/src/util.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { removeClassName } from '@tmagic/utils';
+import { getIdFromEl, removeClassName } from '@tmagic/utils';
 
 import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
 import type { Offset, SortEventData, TargetElement } from './types';
@@ -88,13 +88,13 @@ export const getAbsolutePosition = (el: HTMLElement, { top, left }: Offset) => {
   return { left, top };
 };
 
-export const isAbsolute = (style: CSSStyleDeclaration): boolean => style.position === 'absolute';
+export const isAbsolute = (style: { position?: string }): boolean => style.position === 'absolute';
 
-export const isRelative = (style: CSSStyleDeclaration): boolean => style.position === 'relative';
+export const isRelative = (style: { position?: string }): boolean => style.position === 'relative';
 
-export const isStatic = (style: CSSStyleDeclaration): boolean => style.position === 'static';
+export const isStatic = (style: { position?: string }): boolean => style.position === 'static';
 
-export const isFixed = (style: CSSStyleDeclaration): boolean => style.position === 'fixed';
+export const isFixed = (style: { position?: string }): boolean => style.position === 'fixed';
 
 export const isFixedParent = (el: Element) => {
   let fixed = false;
@@ -170,7 +170,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+    (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX),
   );
   const index = brothers.indexOf(target);
   // 往下移动
@@ -189,9 +189,12 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+
+  const src = getIdFromEl()(target) || '';
+
   return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
+    src,
+    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || '' : src,
   };
 };
 
@@ -204,7 +207,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
  */
 export const up = (deltaTop: number, target: TargetElement): SortEventData => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+    (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX),
   );
   const index = brothers.indexOf(target);
   // 往上移动
@@ -225,9 +228,12 @@ export const up = (deltaTop: number, target: TargetElement): SortEventData => {
 
     swapIndex = i;
   }
+
+  const src = getIdFromEl()(target) || '';
+
   return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
+    src,
+    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || '' : src,
   };
 };
 

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
-import { OnResizeStart, OnResize, OnDragStart, OnDrag, OnRotateStart, OnRotate, OnScaleStart, OnScale, OnResizeGroupStart, OnResizeGroup, OnDragGroupStart, OnDragGroup, MoveableOptions } from 'moveable';
-export { MoveableOptions, OnDragStart } from 'moveable';
+import { OnResizeStart, OnResize, OnDragStart, OnDrag, OnRotateStart, OnRotate, OnScaleStart, OnScale, OnResizeGroupStart, OnResizeGroup, OnDragGroupStart, OnDragGroup, MoveableOptions, Renderer, MoveableManagerInterface } from 'moveable';
+export * from 'moveable';
 import { Id, MApp, MNode, MContainer } from '@tmagic/schema';
 import Guides, { GuidesOptions } from '@scena/guides';
 export { GuidesOptions } from '@scena/guides';
@@ -406,7 +406,7 @@ interface MultiDrEvents {
  */
 declare class ActionManager extends EventEmitter {
     private dr;
-    private multiDr?;
+    private multiDr;
     private highlightLayer;
     /** 单选、多选、高亮的容器（蒙层的content） */
     private container;
@@ -502,7 +502,7 @@ declare class ActionManager extends EventEmitter {
      * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
-    getDragStatus(): StageDragStatus;
+    getDragStatus(): StageDragStatus | undefined;
     destroy(): void;
     on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, listener: (...args: Param) => void): this;
     emit<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, ...args: Param): boolean;
@@ -698,6 +698,7 @@ declare class StageRender extends EventEmitter$1 {
      */
     getElementsFromPoint(point: Point): HTMLElement[];
     getTargetElement(id: Id): HTMLElement | null;
+    postTmagicRuntimeReady(): void;
     /**
      * 销毁实例
      */
@@ -712,7 +713,6 @@ declare class StageRender extends EventEmitter$1 {
      */
     private flagSelectedEl;
     private iframeLoadHandler;
-    private postTmagicRuntimeReady;
 }
 
 /**
@@ -720,9 +720,9 @@ declare class StageRender extends EventEmitter$1 {
  */
 declare class StageCore extends EventEmitter$1 {
     container?: HTMLDivElement;
-    renderer: StageRender;
-    mask: StageMask;
-    actionManager: ActionManager;
+    renderer: StageRender | null;
+    mask: StageMask | null;
+    actionManager: ActionManager | null;
     private pageResizeObserver;
     private autoScrollIntoView;
     private customizedRender?;
@@ -781,7 +781,7 @@ declare class StageCore extends EventEmitter$1 {
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
-    getDragStatus(): StageDragStatus;
+    getDragStatus(): StageDragStatus | undefined;
     disableMultiSelect(): void;
     enableMultiSelect(): void;
     /**
@@ -959,10 +959,18 @@ declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
     left: number;
     top: number;
 };
-declare const isAbsolute: (style: CSSStyleDeclaration) => boolean;
-declare const isRelative: (style: CSSStyleDeclaration) => boolean;
-declare const isStatic: (style: CSSStyleDeclaration) => boolean;
-declare const isFixed: (style: CSSStyleDeclaration) => boolean;
+declare const isAbsolute: (style: {
+    position?: string;
+}) => boolean;
+declare const isRelative: (style: {
+    position?: string;
+}) => boolean;
+declare const isStatic: (style: {
+    position?: string;
+}) => boolean;
+declare const isFixed: (style: {
+    position?: string;
+}) => boolean;
 declare const isFixedParent: (el: Element) => boolean;
 declare const getMode: (el: Element) => Mode;
 declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
@@ -994,4 +1002,20 @@ declare const getBorderWidth: (el: Element) => {
     borderBottomWidth: number;
 };
 
-export { AbleActionEventType, type ActionManagerConfig, type ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, type CanSelect, ContainerHighlightType, type CoreEvents, type CustomizeMoveableOptions, type CustomizeMoveableOptionsCallbackConfig, type CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, type DelayedMarkContainer, type DrEvents, type DragResizeHelperConfig, GHOST_EL_ID_PREFIX, type GetElementsFromPoint, type GetRenderDocument, type GetRootContainer, type GetTargetElement, type GuidesEventData, GuidesType, HIGHLIGHT_EL_ID_PREFIX, type IsContainer, type Magic, type MarkContainerEnd, type MaskEvents, Mode, MouseButton, type MoveableOptionsManagerConfig, type MultiDrEvents, type Offset, PAGE_CLASS, type Point, type Rect, type RemoveData, type RemoveEventData, type RenderEvents, RenderType, type RuleOptions, type Runtime, type RuntimeWindow, SELECTED_CLASS, SelectStatus, type SortEventData, type StageCoreConfig, StageDragResize, type StageDragResizeConfig, StageDragStatus, type StageHighlightConfig, StageMask, type StageMaskConfig, type StageMultiDragResizeConfig, StageRender, type StageRenderConfig, type TargetElement, type TargetShadowConfig, type UpdateData, type UpdateDragEl, type UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+interface AbleCustomizedButton {
+    props: {
+        className?: string;
+        onClick?(e: MouseEvent): void;
+        [key: string]: any;
+    };
+    children: ReturnType<Renderer['createElement']>[];
+}
+declare const _default: (handler: (type: AbleActionEventType) => void, customizedButton?: ((react: Renderer) => AbleCustomizedButton)[]) => {
+    name: string;
+    props: never[];
+    always: boolean;
+    events: never[];
+    render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
+};
+
+export { AbleActionEventType, type AbleCustomizedButton, type ActionManagerConfig, type ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, type CanSelect, ContainerHighlightType, type CoreEvents, type CustomizeMoveableOptions, type CustomizeMoveableOptionsCallbackConfig, type CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, type DelayedMarkContainer, type DrEvents, type DragResizeHelperConfig, GHOST_EL_ID_PREFIX, type GetElementsFromPoint, type GetRenderDocument, type GetRootContainer, type GetTargetElement, type GuidesEventData, GuidesType, HIGHLIGHT_EL_ID_PREFIX, type IsContainer, type Magic, type MarkContainerEnd, type MaskEvents, Mode, MouseButton, _default as MoveableActionsAble, type MoveableOptionsManagerConfig, type MultiDrEvents, type Offset, PAGE_CLASS, type Point, type Rect, type RemoveData, type RemoveEventData, type RenderEvents, RenderType, type RuleOptions, type Runtime, type RuntimeWindow, SELECTED_CLASS, SelectStatus, type SortEventData, type StageCoreConfig, StageDragResize, type StageDragResizeConfig, StageDragStatus, type StageHighlightConfig, StageMask, type StageMaskConfig, type StageMultiDragResizeConfig, StageRender, type StageRenderConfig, type TargetElement, type TargetShadowConfig, type UpdateData, type UpdateDragEl, type UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };