From 6e7144815829a0e5aede79a49febe9909043632e Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 3 Sep 2024 19:39:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage):=20export=20MoveableActionsAble;=20?=
 =?UTF-8?q?=E5=9C=A8=E9=80=89=E4=B8=AD=E6=A1=86=E4=B8=8A=E9=9D=A2=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/MoveableActionsAble.ts    | 26 +++++++++++++++++---
 packages/stage/src/MoveableOptionsManager.ts |  3 ++-
 packages/stage/src/index.ts                  |  4 ++-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/stage/src/MoveableActionsAble.ts b/packages/stage/src/MoveableActionsAble.ts
index d3aebfe6..a409e82f 100644
--- a/packages/stage/src/MoveableActionsAble.ts
+++ b/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',
           {
diff --git a/packages/stage/src/MoveableOptionsManager.ts b/packages/stage/src/MoveableOptionsManager.ts
index d343b7a0..6a5ae502 100644
--- a/packages/stage/src/MoveableOptionsManager.ts
+++ b/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;
   }
 
diff --git a/packages/stage/src/index.ts b/packages/stage/src/index.ts
index 03e64b2a..00ca34f4 100644
--- a/packages/stage/src/index.ts
+++ b/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;