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

package/src/ActionManager.ts

@@ -65,9 +65,9 @@ const defaultContainerHighlightDuration = 800;
  * @extends EventEmitter
  */
 export default class ActionManager extends EventEmitter {
-  private dr: StageDragResize;
-  private multiDr?: StageMultiDragResize;
-  private highlightLayer: StageHighlight;
+  private dr: StageDragResize | null = null;
+  private multiDr: StageMultiDragResize | null = null;
+  private highlightLayer: StageHighlight | null = null;
   /** 单选、多选、高亮的容器（蒙层的content） */
   private container: HTMLElement;
   /** 当前选中的节点 */
@@ -143,7 +143,7 @@ export default class ActionManager extends EventEmitter {
     this.disabledMultiSelect = true;
     if (this.multiDr) {
       this.multiDr.destroy();
-      this.multiDr = undefined;
+      this.multiDr = null;
     }
   }
 
@@ -161,7 +161,7 @@ export default class ActionManager extends EventEmitter {
    * @param guidelines 参考线坐标数组
    */
   public setGuidelines(type: GuidesType, guidelines: number[]): void {
-    this.dr.setGuidelines(type, guidelines);
+    this.dr?.setGuidelines(type, guidelines);
     this.multiDr?.setGuidelines(type, guidelines);
   }
 
@@ -169,7 +169,7 @@ export default class ActionManager extends EventEmitter {
    * 清空所有参考线
    */
   public clearGuides(): void {
-    this.dr.clearGuides();
+    this.dr?.clearGuides();
     this.multiDr?.clearGuides();
   }
 
@@ -178,7 +178,7 @@ export default class ActionManager extends EventEmitter {
    * @param el 变更的元素
    */
   public updateMoveable(el?: HTMLElement): void {
-    this.dr.updateMoveable(el);
+    this.dr?.updateMoveable(el);
     // 多选时不可配置元素，因此不存在多选元素变更，不需要传el
     this.multiDr?.updateMoveable();
   }
@@ -204,7 +204,7 @@ export default class ActionManager extends EventEmitter {
   }
 
   public getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined {
-    if (this.dr.getTarget()) {
+    if (this.dr?.getTarget()) {
       return this.dr.getOption(key);
     }
     if (this.multiDr?.targetList.length) {
@@ -271,7 +271,7 @@ export default class ActionManager extends EventEmitter {
   public select(el: HTMLElement | null, event?: MouseEvent): void {
     this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
-    this.dr.select(el, event);
+    this.dr?.select(el, event);
   }
 
   public multiSelect(ids: Id[]): void {
@@ -310,14 +310,14 @@ export default class ActionManager extends EventEmitter {
     }
     if (el === this.highlightedEl || !el) return;
 
-    this.highlightLayer.highlight(el);
+    this.highlightLayer?.highlight(el);
     this.highlightedEl = el;
     this.emit('highlight', el);
   }
 
   public clearHighlight(): void {
     this.setHighlightEl(undefined);
-    this.highlightLayer.clearHighlight();
+    this.highlightLayer?.clearHighlight();
   }
 
   /**
@@ -329,7 +329,7 @@ export default class ActionManager extends EventEmitter {
       this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
-      this.dr.clearSelectStatus();
+      this.dr?.clearSelectStatus();
     }
   }
 
@@ -373,7 +373,7 @@ export default class ActionManager extends EventEmitter {
   }
 
   public getDragStatus() {
-    return this.dr.getDragStatus();
+    return this.dr?.getDragStatus();
   }
 
   public destroy(): void {
@@ -382,9 +382,16 @@ export default class ActionManager extends EventEmitter {
     this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
     this.container.removeEventListener('wheel', this.mouseWheelHandler);
     this.container.removeEventListener('dblclick', this.dblclickHandler);
-    this.dr.destroy();
+    this.selectedEl = null;
+    this.selectedElList = [];
+
+    this.dr?.destroy();
     this.multiDr?.destroy();
-    this.highlightLayer.destroy();
+    this.highlightLayer?.destroy();
+
+    this.dr = null;
+    this.multiDr = null;
+    this.highlightLayer = null;
   }
 
   public on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(
@@ -431,7 +438,7 @@ export default class ActionManager extends EventEmitter {
         this.emit('select-parent');
       })
       .on(AbleActionEventType.REMOVE, () => {
-        const drTarget = this.dr.getTarget();
+        const drTarget = this.dr?.getTarget();
         if (!drTarget) return;
         const data: RemoveEventData = {
           data: [{ el: drTarget }],

package/src/DragResizeHelper.ts

@@ -39,8 +39,6 @@ import TargetShadow from './TargetShadow';
 import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
-const getId = getIdFromEl();
-
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@@ -50,7 +48,7 @@ export default class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   private targetShadow: TargetShadow;
   /** 要操作的原始目标节点 */
-  private target!: HTMLElement;
+  private target: HTMLElement | null = null;
   /** 多选:目标节点组 */
   private targetList: HTMLElement[] = [];
   /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
@@ -84,6 +82,8 @@ export default class DragResizeHelper {
   }
 
   public destroy(): void {
+    this.target = null;
+    this.targetList = [];
     this.targetShadow.destroy();
     this.destroyGhostEl();
     this.moveableHelper.clear();
@@ -114,8 +114,8 @@ export default class DragResizeHelper {
   public onResizeStart(e: OnResizeStart): void {
     this.moveableHelper.onResizeStart(e);
 
-    this.frameSnapShot.top = this.target.offsetTop;
-    this.frameSnapShot.left = this.target.offsetLeft;
+    this.frameSnapShot.top = this.target!.offsetTop;
+    this.frameSnapShot.left = this.target!.offsetLeft;
   }
 
   public onResize(e: OnResize): void {
@@ -123,33 +123,33 @@ export default class DragResizeHelper {
     const { beforeTranslate } = drag;
     // 流式布局
     if (this.mode === Mode.SORTABLE) {
-      this.target.style.top = '0px';
+      this.target!.style.top = '0px';
       if (this.targetShadow.el) {
         this.targetShadow.el.style.width = `${width}px`;
         this.targetShadow.el.style.height = `${height}px`;
       }
     } else {
       this.moveableHelper.onResize(e);
-      const { marginLeft, marginTop } = getMarginValue(this.target);
-      this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
-      this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
+      const { marginLeft, marginTop } = getMarginValue(this.target!);
+      this.target!.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
+      this.target!.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
     }
 
-    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target);
+    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target!);
 
-    this.target.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
-    this.target.style.height = `${height + borderTopWidth + borderBottomWidth}px`;
+    this.target!.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
+    this.target!.style.height = `${height + borderTopWidth + borderBottomWidth}px`;
   }
 
   public onDragStart(e: OnDragStart): void {
     this.moveableHelper.onDragStart(e);
 
     if (this.mode === Mode.SORTABLE) {
-      this.ghostEl = this.generateGhostEl(this.target);
+      this.ghostEl = this.generateGhostEl(this.target!);
     }
 
-    this.frameSnapShot.top = this.target.offsetTop;
-    this.frameSnapShot.left = this.target.offsetLeft;
+    this.frameSnapShot.top = this.target!.offsetTop;
+    this.frameSnapShot.left = this.target!.offsetLeft;
   }
 
   public onDrag(e: OnDrag): void {
@@ -161,10 +161,10 @@ export default class DragResizeHelper {
 
     this.moveableHelper.onDrag(e);
 
-    const { marginLeft, marginTop } = getMarginValue(this.target);
+    const { marginLeft, marginTop } = getMarginValue(this.target!);
 
-    this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
-    this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}px`;
+    this.target!.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
+    this.target!.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}px`;
   }
 
   public onRotateStart(e: OnRotateStart): void {
@@ -174,7 +174,7 @@ export default class DragResizeHelper {
   public onRotate(e: OnRotate): void {
     this.moveableHelper.onRotate(e);
     const frame = this.moveableHelper.getFrame(e.target);
-    this.target.style.transform = frame?.toCSSObject().transform || '';
+    this.target!.style.transform = frame?.toCSSObject().transform || '';
   }
 
   public onScaleStart(e: OnScaleStart): void {
@@ -184,7 +184,7 @@ export default class DragResizeHelper {
   public onScale(e: OnScale): void {
     this.moveableHelper.onScale(e);
     const frame = this.moveableHelper.getFrame(e.target);
-    this.target.style.transform = frame?.toCSSObject().transform || '';
+    this.target!.style.transform = frame?.toCSSObject().transform || '';
   }
 
   public getGhostEl(): HTMLElement | undefined {
@@ -241,15 +241,17 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),
+      );
 
       if (!isParentIncluded) {
         // 更新页面元素位置
@@ -279,18 +281,21 @@ export default class DragResizeHelper {
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id),
+        (frameItem) =>
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
         (targetItem) =>
-          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
-          getId(targetItem) &&
-          getId(ev.target)?.endsWith(getId(targetItem)!),
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getIdFromEl()(targetItem) &&
+          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),
+      );
       if (!isParentIncluded) {
         // 更新页面元素位置
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -317,7 +322,7 @@ export default class DragResizeHelper {
     const shadowEls = this.getShadowEls();
 
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ''));
+      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ''));
     }
 
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
@@ -354,11 +359,12 @@ export default class DragResizeHelper {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
         (targetItem) =>
-          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || ''),
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || ''),
       );
       if (!matchEventTarget) return;
 
-      const id = getId(matchEventTarget);
+      const id = getIdFromEl()(matchEventTarget);
       id &&
         this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
@@ -376,25 +382,31 @@ export default class DragResizeHelper {
       this.destroyGhostEl();
     }
 
-    const ghostEl = el.cloneNode(true) as HTMLElement;
-    this.setGhostElChildrenId(ghostEl);
+    const ghostEl = document.createElement('div') as HTMLElement;
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = '.5';
-    ghostEl.style.position = 'absolute';
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    ghostEl.style.marginLeft = '0';
-    ghostEl.style.marginTop = '0';
+
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+
+    ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
     el.after(ghostEl);
+
     return ghostEl;
   }
 
   private setGhostElChildrenId(el: Element): void {
     for (const child of Array.from(el.children)) {
       const el = child as HTMLElement;
-      const id = getId(el);
+      const id = getIdFromEl()(el);
       if (id) {
         setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
       }

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