feat(stage): export MoveableActionsAble; 在选中框上面自定义按钮

packages/stage/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',
           {

packages/stage/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;
   }
 

packages/stage/src/index.ts

@@ -18,12 +18,14 @@
 
 import StageCore from './StageCore';
 
-export type { MoveableOptions, OnDragStart } 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 'moveable';
 export * from './types';
 export * from './const';
 export * from './util';
+export * from './MoveableActionsAble';
+export { default as MoveableActionsAble } from './MoveableActionsAble';
 export default StageCore;