@tmagic/stage 1.5.0-beta.4 → 1.5.0-beta.6

package/dist/tmagic-stage.js

@@ -4,7 +4,8 @@ import KeyController from 'keycon';
 import { merge, throttle } from 'lodash-es';
 import { Env } from '@tmagic/core';
 import MoveableHelper from 'moveable-helper';
-import Moveable from 'moveable';
+import Moveable__default from 'moveable';
+export * from 'moveable';
 import Guides from '@scena/guides';
 
 const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -610,9 +611,10 @@ class DragResizeHelper {
 
 const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
 
-const MoveableActionsAble = (handler) => ({
+const MoveableActionsAble = (handler, customizedButton = []) => ({
   name: "actions",
   props: [],
+  always: true,
   events: [],
   render(moveable, React) {
     const rect = moveable.getRect();
@@ -636,10 +638,14 @@ const MoveableActionsAble = (handler) => ({
       {
         className: "moveable-editable",
         style: {
-          transform: `translate(${pos2[0] - 60}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
+          transform: `translate(${pos2[0] - (customizedButton.length + 3) * 20}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
         }
       },
       [
+        ...customizedButton.map((buttonRenderer) => {
+          const options = buttonRenderer(React);
+          return React.createElement("button", options.props || {}, ...options.children || []);
+        }),
         React.createElement(
           "button",
           {
@@ -761,7 +767,7 @@ class MoveableOptionsManager extends EventEmitter {
    */
   getOptions(isMultiSelect, runtimeOptions = {}) {
     const defaultOptions = this.getDefaultOptions(isMultiSelect);
-    const customizedOptions = this.getCustomizeOptions();
+    const customizedOptions = this.getCustomizeOptions() || {};
     this.options = merge(defaultOptions, customizedOptions, runtimeOptions);
     return this.options;
   }
@@ -1001,7 +1007,7 @@ class StageDragResize extends MoveableOptionsManager {
     const options = this.init(el);
     this.dragResizeHelper.clear();
     this.moveable?.destroy();
-    this.moveable = new Moveable(this.container, {
+    this.moveable = new Moveable__default(this.container, {
       ...options
     });
     this.bindResizeEvent();
@@ -1183,7 +1189,7 @@ class StageHighlight extends EventEmitter$1 {
       this.moveable.zoom = 2;
       this.moveable.updateRect();
     } else {
-      this.moveable = new Moveable(this.container, {
+      this.moveable = new Moveable__default(this.container, {
         target: this.targetShadow?.el,
         origin: false,
         rootContainer: this.getRootContainer(),
@@ -1256,7 +1262,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
     this.setElementGuidelines(this.targetList);
     this.moveableForMulti?.destroy();
     this.dragResizeHelper.clear();
-    this.moveableForMulti = new Moveable(
+    this.moveableForMulti = new Moveable__default(
       this.container,
       this.getOptions(true, {
         target: this.dragResizeHelper.getShadowEls()
@@ -2370,6 +2376,16 @@ class StageRender extends EventEmitter$1 {
   getTargetElement(id) {
     return getElById()(this.getDocument(), id);
   }
+  postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow;
+    this.contentWindow.magic = this.getMagicApi();
+    this.contentWindow.postMessage(
+      {
+        tmagicRuntimeReady: true
+      },
+      "*"
+    );
+  }
   /**
    * 销毁实例
    */
@@ -2433,16 +2449,6 @@ class StageRender extends EventEmitter$1 {
     this.emit("onload");
     injectStyle(this.contentWindow.document, style);
   };
-  postTmagicRuntimeReady() {
-    this.contentWindow = this.iframe?.contentWindow;
-    this.contentWindow.magic = this.getMagicApi();
-    this.contentWindow.postMessage(
-      {
-        tmagicRuntimeReady: true
-      },
-      "*"
-    );
-  }
 }
 
 class StageCore extends EventEmitter$1 {
@@ -2746,4 +2752,4 @@ class StageCore extends EventEmitter$1 {
   }
 }
 
-export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, MoveableActionsAble, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };

package/dist/tmagic-stage.umd.cjs

@@ -607,9 +607,10 @@
 
   const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
 
-  const MoveableActionsAble = (handler) => ({
+  const MoveableActionsAble = (handler, customizedButton = []) => ({
     name: "actions",
     props: [],
+    always: true,
     events: [],
     render(moveable, React) {
       const rect = moveable.getRect();
@@ -633,10 +634,14 @@
         {
           className: "moveable-editable",
           style: {
-            transform: `translate(${pos2[0] - 60}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
+            transform: `translate(${pos2[0] - (customizedButton.length + 3) * 20}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
           }
         },
         [
+          ...customizedButton.map((buttonRenderer) => {
+            const options = buttonRenderer(React);
+            return React.createElement("button", options.props || {}, ...options.children || []);
+          }),
           React.createElement(
             "button",
             {
@@ -758,7 +763,7 @@
      */
     getOptions(isMultiSelect, runtimeOptions = {}) {
       const defaultOptions = this.getDefaultOptions(isMultiSelect);
-      const customizedOptions = this.getCustomizeOptions();
+      const customizedOptions = this.getCustomizeOptions() || {};
       this.options = lodashEs.merge(defaultOptions, customizedOptions, runtimeOptions);
       return this.options;
     }
@@ -2367,6 +2372,16 @@
     getTargetElement(id) {
       return utils.getElById()(this.getDocument(), id);
     }
+    postTmagicRuntimeReady() {
+      this.contentWindow = this.iframe?.contentWindow;
+      this.contentWindow.magic = this.getMagicApi();
+      this.contentWindow.postMessage(
+        {
+          tmagicRuntimeReady: true
+        },
+        "*"
+      );
+    }
     /**
      * 销毁实例
      */
@@ -2430,16 +2445,6 @@
       this.emit("onload");
       utils.injectStyle(this.contentWindow.document, style);
     };
-    postTmagicRuntimeReady() {
-      this.contentWindow = this.iframe?.contentWindow;
-      this.contentWindow.magic = this.getMagicApi();
-      this.contentWindow.postMessage(
-        {
-          tmagicRuntimeReady: true
-        },
-        "*"
-      );
-    }
   }
 
   class StageCore extends EventEmitter.EventEmitter {
@@ -2753,6 +2758,7 @@
   exports.HIGHLIGHT_EL_ID_PREFIX = HIGHLIGHT_EL_ID_PREFIX;
   exports.Mode = Mode;
   exports.MouseButton = MouseButton;
+  exports.MoveableActionsAble = MoveableActionsAble;
   exports.PAGE_CLASS = PAGE_CLASS;
   exports.RenderType = RenderType;
   exports.SELECTED_CLASS = SELECTED_CLASS;
@@ -2780,6 +2786,12 @@
   exports.isStatic = isStatic;
   exports.removeSelectedClassName = removeSelectedClassName;
   exports.up = up;
+  Object.keys(Moveable).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => Moveable[k]
+    });
+  });
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.4",
+  "version": "1.5.0-beta.6",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -45,9 +45,9 @@
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/core": "1.5.0-beta.4",
-    "@tmagic/schema": "1.5.0-beta.4",
-    "@tmagic/utils": "1.5.0-beta.4"
+    "@tmagic/schema": "1.5.0-beta.6",
+    "@tmagic/utils": "1.5.0-beta.6",
+    "@tmagic/core": "1.5.0-beta.6"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/MoveableActionsAble.ts

@@ -1,11 +1,24 @@
-import { MoveableManagerInterface, Renderer } from 'moveable';
+import type { MoveableManagerInterface, Renderer } from 'moveable';
 
 import { AbleActionEventType } from './const';
 import ableCss from './moveable-able.css?raw';
 
-export default (handler: (type: AbleActionEventType) => void) => ({
+export interface AbleCustomizedButton {
+  props: {
+    className?: string;
+    onClick?(e: MouseEvent): void;
+    [key: string]: any;
+  };
+  children: ReturnType<Renderer['createElement']>[];
+}
+
+export default (
+  handler: (type: AbleActionEventType) => void,
+  customizedButton: ((react: Renderer) => AbleCustomizedButton)[] = [],
+) => ({
   name: 'actions',
   props: [],
+  always: true,
   events: [],
   render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
     const rect = moveable.getRect();
@@ -33,10 +46,17 @@ export default (handler: (type: AbleActionEventType) => void) => ({
       {
         className: 'moveable-editable',
         style: {
-          transform: `translate(${pos2[0] - 60}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`,
+          transform: `translate(${pos2[0] - (customizedButton.length + 3) * 20}px, ${pos2[1] - 28}px) rotate(${
+            rect.rotation
+          }deg)`,
         },
       },
       [
+        ...customizedButton.map((buttonRenderer) => {
+          const options = buttonRenderer(React);
+          return React.createElement('button', options.props || {}, ...(options.children || []));
+        }),
+
         React.createElement(
           'button',
           {

package/src/MoveableOptionsManager.ts

@@ -112,9 +112,10 @@ export default class MoveableOptionsManager extends EventEmitter {
    */
   protected getOptions(isMultiSelect: boolean, runtimeOptions: MoveableOptions = {}): MoveableOptions {
     const defaultOptions = this.getDefaultOptions(isMultiSelect);
-    const customizedOptions = this.getCustomizeOptions();
+    const customizedOptions = this.getCustomizeOptions() || {};
 
     this.options = merge(defaultOptions, customizedOptions, runtimeOptions);
+
     return this.options;
   }
 

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

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

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';
@@ -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;
 }
 
 /**
@@ -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 };