@tmagic/stage 1.3.0-alpha.9 → 1.3.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.9",
+  "version": "1.3.0-beta.1",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -29,14 +29,14 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@scena/guides": "^0.23.3",
-    "@tmagic/core": "1.3.0-alpha.9",
-    "@tmagic/schema": "1.3.0-alpha.9",
-    "@tmagic/utils": "1.3.0-alpha.9",
+    "@scena/guides": "^0.29.2",
+    "@tmagic/core": "1.3.0-beta.1",
+    "@tmagic/schema": "1.3.0-beta.1",
+    "@tmagic/utils": "1.3.0-beta.1",
     "events": "^3.3.0",
-    "keycon": "^1.1.2",
+    "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.43.1",
+    "moveable": "^0.51.1",
     "moveable-helper": "^0.4.0"
   },
   "devDependencies": {
@@ -46,6 +46,6 @@
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1"
+    "vite": "^4.4.4"
   }
 }

package/src/ActionManager.ts

@@ -19,9 +19,10 @@ import EventEmitter from 'events';
 
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
+import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import { Env } from '@tmagic/core';
-import { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/schema';
 import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
 
 import { CONTAINER_HIGHLIGHT_CLASS_NAME, GHOST_EL_ID_PREFIX, GuidesType, MouseButton, PAGE_CLASS } from './const';
@@ -87,6 +88,9 @@ export default class ActionManager extends EventEmitter {
       this.clearHighlight();
       return;
     }
+
+    this.emit('mousemove', event);
+
     this.highlight(el);
   }, throttleTime);
 
@@ -111,7 +115,7 @@ export default class ActionManager extends EventEmitter {
     this.dr = new StageDragResize({
       container: config.container,
       disabledDragStart: config.disabledDragStart,
-      moveableOptions: this.changeCallback(config.moveableOptions),
+      moveableOptions: this.changeCallback(config.moveableOptions, false),
       dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
@@ -120,7 +124,7 @@ export default class ActionManager extends EventEmitter {
     });
     this.multiDr = new StageMultiDragResize({
       container: config.container,
-      multiMoveableOptions: config.multiMoveableOptions,
+      moveableOptions: this.changeCallback(config.moveableOptions, true),
       dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
@@ -186,6 +190,15 @@ export default class ActionManager extends EventEmitter {
     return this.selectedElList;
   }
 
+  public getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined {
+    if (this.dr.getTarget()) {
+      return this.dr.getOption(key);
+    }
+    if (this.multiDr.targetList.length) {
+      return this.multiDr.getOption(key);
+    }
+  }
+
   /**
    * 获取鼠标下方第一个可选中元素，如果元素层叠，返回到是最上层元素
    * @param event 鼠标事件
@@ -194,6 +207,8 @@ export default class ActionManager extends EventEmitter {
   public async getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined> {
     const els = this.getElementsFromPoint(event as Point);
 
+    this.emit('get-elements-from-point', els);
+
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
@@ -333,6 +348,10 @@ export default class ActionManager extends EventEmitter {
     return undefined;
   }
 
+  public getDragStatus() {
+    return this.dr.getDragStatus();
+  }
+
   public destroy(): void {
     this.container.removeEventListener('mousedown', this.mouseDownHandler);
     this.container.removeEventListener('mousemove', this.mouseMoveHandler);
@@ -343,14 +362,18 @@ export default class ActionManager extends EventEmitter {
     this.highlightLayer.destroy();
   }
 
-  private changeCallback(options: CustomizeMoveableOptions): CustomizeMoveableOptions {
+  private changeCallback(options: CustomizeMoveableOptions, isMulti: boolean): CustomizeMoveableOptions {
     // 在actionManager才能获取到各种参数，在这里传好参数有比较好的扩展性
     if (typeof options === 'function') {
       return () => {
         // 要再判断一次，不然过不了ts检查
         if (typeof options === 'function') {
           const cfg: CustomizeMoveableOptionsCallbackConfig = {
+            targetEl: this.selectedEl,
             targetElId: this.selectedEl?.id,
+            targetEls: this.selectedElList,
+            targetElIds: this.selectedElList?.map((item) => item.id),
+            isMulti,
           };
           return options(cfg);
         }
@@ -470,6 +493,9 @@ export default class ActionManager extends EventEmitter {
           data: [{ el: drTarget }],
         };
         this.emit('remove', data);
+      })
+      .on('drag-start', (e: OnDragStart) => {
+        this.emit('drag-start', e);
       });
 
     this.multiDr

package/src/MoveableActionsAble.ts

@@ -1,13 +1,12 @@
 import { MoveableManagerInterface, Renderer } from 'moveable';
 
+import ableCss from './moveable-able.css?raw';
 import { AbleActionEventType } from './types';
 
 export default (handler: (type: AbleActionEventType) => void) => ({
   name: 'actions',
-  props: {
-    selectParent: Boolean,
-  },
-  events: {},
+  props: [],
+  events: [],
   render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
     const rect = moveable.getRect();
     const { pos2 } = moveable.state;
@@ -24,34 +23,7 @@ export default (handler: (type: AbleActionEventType) => void) => ({
         transform-origin: 0px 0px;
         display: flex;
       }
-      .moveable-button {
-        width: 20px;
-        height: 20px;
-        background: #4af;
-        border-radius: 4px;
-        appearance: none;
-        border: 0;
-        color: white;
-        font-size: 12px;
-        font-weight: bold;
-        margin-left: 2px;
-        position: relative;
-      }
-      .moveable-remove-button:before, .moveable-remove-button:after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%) rotate(45deg);
-        width: 14px;
-        height: 2px;
-        background: #fff;
-        border-radius: 1px;
-        cursor: pointer;
-      }
-      .moveable-remove-button:after {
-        transform: translate(-50%, -50%) rotate(-45deg);
-      }
+      ${ableCss}
       `,
     );
     // Add key (required)
@@ -61,7 +33,7 @@ export default (handler: (type: AbleActionEventType) => void) => ({
       {
         className: 'moveable-editable',
         style: {
-          transform: `translate(${pos2[0] - 48}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg) translate(10px)`,
+          transform: `translate(${pos2[0] - 60}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`,
         },
       },
       [
@@ -74,27 +46,12 @@ export default (handler: (type: AbleActionEventType) => void) => ({
               handler(AbleActionEventType.SELECT_PARENT);
             },
           },
-          React.createElement(
-            'svg',
-            {
-              width: '20px',
-              height: '20px',
-              viewBox: '0 0 16 16',
-              fill: 'none',
-              xmlns: 'http://www.w3.org/2000/svg',
-              style: {
-                transform: 'rotate(90deg)',
-                position: 'absolute',
-                left: 0,
-                top: 0,
-              },
-            },
-            React.createElement('path', {
-              d: 'M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z',
-              fill: 'currentColor',
-              fillOpacity: '0.9',
-            }),
-          ),
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-top-icon',
+          }),
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-body-icon',
+          }),
         ),
         React.createElement('button', {
           className: 'moveable-button moveable-remove-button',
@@ -103,6 +60,31 @@ export default (handler: (type: AbleActionEventType) => void) => ({
             handler(AbleActionEventType.REMOVE);
           },
         }),
+        React.createElement(
+          'button',
+          {
+            className: 'moveable-button moveable-drag-area-button',
+            title: '拖动',
+          },
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-top',
+          }),
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-bottom',
+          }),
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-left',
+          }),
+          React.createElement('div', {
+            className: ' moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-right',
+          }),
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-body-icon-horizontal',
+          }),
+          React.createElement('div', {
+            className: 'moveable-select-parent-arrow-body-icon-vertical',
+          }),
+        ),
       ],
     );
   },

package/src/MoveableOptionsManager.ts

@@ -36,6 +36,7 @@ export default class MoveableOptionsManager extends EventEmitter {
 
   /** 画布容器 */
   protected container: HTMLElement;
+  protected options: MoveableOptions = {};
 
   /** 水平参考线 */
   private horizontalGuidelines: number[] = [];
@@ -55,6 +56,10 @@ export default class MoveableOptionsManager extends EventEmitter {
     this.getRootContainer = config.getRootContainer;
   }
 
+  public getOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] {
+    return this.options[key];
+  }
+
   /**
    * 设置水平/垂直参考线
    * @param type 参考线类型
@@ -106,7 +111,8 @@ export default class MoveableOptionsManager extends EventEmitter {
     const defaultOptions = this.getDefaultOptions(isMultiSelect);
     const customizedOptions = this.getCustomizeOptions();
 
-    return merge(defaultOptions, customizedOptions, runtimeOptions);
+    this.options = merge(defaultOptions, customizedOptions, runtimeOptions);
+    return this.options;
   }
 
   /**
@@ -128,9 +134,8 @@ export default class MoveableOptionsManager extends EventEmitter {
       elementGuidelines: this.elementGuidelines,
       bounds: {
         top: 0,
-        // 设置0的话无法移动到left为0，所以只能设置为-1
-        left: -1,
-        right: this.container.clientWidth - 1,
+        left: 0,
+        right: this.container.clientWidth,
         bottom: isSortable ? undefined : this.container.clientHeight,
       },
     };
@@ -171,7 +176,8 @@ export default class MoveableOptionsManager extends EventEmitter {
         left: isAbsolute,
       },
       isDisplayInnerSnapDigit: true,
-
+      dragTarget: '.moveable-drag-area-button',
+      dragTargetSelf: true,
       props: {
         actions: true,
       },

package/src/StageCore.ts

@@ -18,13 +18,15 @@
 
 import { EventEmitter } from 'events';
 
-import { Id } from '@tmagic/schema';
+import type { MoveableOptions, OnDragStart } from 'moveable';
+
+import type { Id } from '@tmagic/schema';
 
 import ActionManager from './ActionManager';
 import { DEFAULT_ZOOM } from './const';
 import StageMask from './StageMask';
 import StageRender from './StageRender';
-import {
+import type {
   ActionManagerConfig,
   CustomizeRender,
   GuidesEventData,
@@ -123,6 +125,10 @@ export default class StageCore extends EventEmitter {
     this.actionManager.highlight(idOrEl);
   }
 
+  public clearHighlight(): void {
+    this.actionManager.clearHighlight();
+  }
+
   /**
    * 更新组件
    * @param data 更新组件的数据
@@ -207,6 +213,14 @@ export default class StageCore extends EventEmitter {
     return this.actionManager.delayedMarkContainer(event, excludeElList);
   }
 
+  public getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined {
+    return this.actionManager.getMoveableOption(key);
+  }
+
+  public getDragStatus() {
+    return this.actionManager.getDragStatus();
+  }
+
   /**
    * 销毁实例
    */
@@ -243,7 +257,6 @@ export default class StageCore extends EventEmitter {
       containerHighlightDuration: config.containerHighlightDuration,
       containerHighlightType: config.containerHighlightType,
       moveableOptions: config.moveableOptions,
-      multiMoveableOptions: config.multiMoveableOptions,
       container: this.mask.content,
       disabledDragStart: config.disabledDragStart,
       canSelect: config.canSelect,
@@ -283,6 +296,7 @@ export default class StageCore extends EventEmitter {
     this.initDrEvent();
     this.initMulDrEvent();
     this.initHighlightEvent();
+    this.initMouseEvent();
   }
 
   /**
@@ -347,4 +361,20 @@ export default class StageCore extends EventEmitter {
       this.emit('highlight', highlightEl);
     });
   }
+
+  /**
+   * 初始化Highlight类通过ActionManager抛出来的事件监听
+   */
+  private initMouseEvent(): void {
+    this.actionManager
+      .on('mousemove', async (event: MouseEvent) => {
+        this.emit('mousemove', event);
+      })
+      .on('mouseleave', async (event: MouseEvent) => {
+        this.emit('mouseleave', event);
+      })
+      .on('drag-start', (e: OnDragStart) => {
+        this.emit('drag-start', e);
+      });
+  }
 }

package/src/StageDragResize.ts

@@ -95,14 +95,18 @@ export default class StageDragResize extends MoveableOptionsManager {
     Object.entries(options).forEach(([key, value]) => {
       (this.moveable as any)[key] = value;
     });
-    this.moveable.updateTarget();
+    this.moveable.updateRect();
   }
 
   public clearSelectStatus(): void {
     if (!this.moveable) return;
     this.dragResizeHelper.destroyShadowEl();
     this.moveable.target = null;
-    this.moveable.updateTarget();
+    this.moveable.updateRect();
+  }
+
+  public getDragStatus(): StageDragStatus {
+    return this.dragStatus;
   }
 
   /**
@@ -187,6 +191,7 @@ export default class StageDragResize extends MoveableOptionsManager {
         this.dragStatus = StageDragStatus.START;
 
         this.dragResizeHelper.onDragStart(e);
+        this.emit('drag-start', e);
       })
       .on('drag', (e) => {
         if (!this.target || !this.dragResizeHelper.getShadowEl()) return;

package/src/StageHighlight.ts

@@ -28,7 +28,7 @@ export default class StageHighlight extends EventEmitter {
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
-  public targetShadow: TargetShadow;
+  public targetShadow?: TargetShadow;
   private getRootContainer: GetRootContainer;
 
   constructor(config: StageHighlightConfig) {
@@ -52,14 +52,19 @@ export default class StageHighlight extends EventEmitter {
   public highlight(el: HTMLElement): void {
     if (!el || el === this.target) return;
     this.target = el;
-    this.moveable?.destroy();
 
-    this.moveable = new Moveable(this.container, {
-      target: this.targetShadow.update(el),
-      origin: false,
-      rootContainer: this.getRootContainer(),
-      zoom: 2,
-    });
+    this.targetShadow?.update(el);
+    if (this.moveable) {
+      this.moveable.zoom = 2;
+      this.moveable.updateRect();
+    } else {
+      this.moveable = new Moveable(this.container, {
+        target: this.targetShadow?.el,
+        origin: false,
+        rootContainer: this.getRootContainer(),
+        zoom: 2,
+      });
+    }
   }
 
   /**
@@ -67,9 +72,9 @@ export default class StageHighlight extends EventEmitter {
    */
   public clearHighlight(): void {
     if (!this.moveable || !this.target) return;
+    this.moveable.zoom = 0;
+    this.moveable.updateRect();
     this.target = undefined;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
   }
 
   /**
@@ -77,6 +82,8 @@ export default class StageHighlight extends EventEmitter {
    */
   public destroy(): void {
     this.moveable?.destroy();
-    this.targetShadow.destroy();
+    this.targetShadow?.destroy();
+    this.moveable = undefined;
+    this.targetShadow = undefined;
   }
 }

package/src/StageMultiDragResize.ts

@@ -47,7 +47,7 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
   constructor(config: StageMultiDragResizeConfig) {
     const moveableOptionsManagerConfig: MoveableOptionsManagerConfig = {
       container: config.container,
-      moveableOptions: config.multiMoveableOptions,
+      moveableOptions: config.moveableOptions,
       getRootContainer: config.getRootContainer,
     };
     super(moveableOptionsManagerConfig);
@@ -173,7 +173,7 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
     Object.entries(options).forEach(([key, value]) => {
       (this.moveableForMulti as any)[key] = value;
     });
-    this.moveableForMulti.updateTarget();
+    this.moveableForMulti.updateRect();
   }
 
   /**

package/src/index.ts

@@ -18,7 +18,7 @@
 
 import StageCore from './StageCore';
 
-export type { MoveableOptions } from 'moveable';
+export type { MoveableOptions, OnDragStart } from 'moveable';
 export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';

package/src/moveable-able.css

@@ -0,0 +1,108 @@
+.moveable-button {
+  width: 20px;
+  height: 20px;
+  background: #4af;
+  border-radius: 4px;
+  appearance: none;
+  border: 0;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  margin-left: 2px;
+  position: relative;
+}
+.moveable-remove-button:before, .moveable-remove-button:after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 14px;
+  height: 2px;
+  background: #fff;
+  border-radius: 1px;
+  cursor: pointer;
+}
+.moveable-remove-button:after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.moveable-select-parent-arrow-top-icon {
+  transform: rotateZ(-45deg);
+  width: 4px;
+  height: 4px;
+  border-color: #fff;
+  border-width: 2px 2px 0 0;
+  border-style: solid;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+}
+
+.moveable-select-parent-arrow-body-icon {
+  width: 7px;
+  height: 11px;
+  border-color: #fff;
+  border-width: 0 0 2px 2px;
+  border-style: solid;
+}
+
+.moveable-drag-area-button {
+  cursor: move;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {
+  width: 2px;
+  height: 2px;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {
+  transform: rotateZ(-45deg) translateX(-50%);
+  left: 50%;
+  top: 3px;
+  transform-origin: left;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {
+  transform: rotateZ(135deg) translateX(-50%);
+  transform-origin: left;
+  left: 50%;
+  top: auto;
+  bottom: 3px;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {
+  transform: rotateZ(45deg)  translateY(-50%);
+  transform-origin: top;
+  right: 3px;
+  left: auto;
+  top: 50%;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {
+  transform: rotateZ(235deg) translateY(-50%);
+  transform-origin: top;
+  left: 3px;
+  top: 50%;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {
+  width: 2px;
+  height: 11px;
+  background-color: #fff;
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  top: 4px;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {
+  width: 11px;
+  height: 2px;
+  background-color: #fff;
+  position: absolute;
+  transform: translateY(-50%);
+  left: 4px;
+  top: 50%;;
+}
+

package/src/types.ts

@@ -65,7 +65,6 @@ export interface StageCoreConfig {
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
   moveableOptions?: CustomizeMoveableOptions;
-  multiMoveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
@@ -80,7 +79,6 @@ export interface ActionManagerConfig {
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
   moveableOptions?: CustomizeMoveableOptions;
-  multiMoveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
   canSelect?: CanSelect;
   isContainer: IsContainer;
@@ -98,7 +96,11 @@ export interface MoveableOptionsManagerConfig {
 }
 
 export interface CustomizeMoveableOptionsCallbackConfig {
+  targetEl?: HTMLElement;
   targetElId?: string;
+  targetEls?: HTMLElement[];
+  targetElIds?: string[];
+  isMulti: boolean;
 }
 
 export interface StageRenderConfig {
@@ -125,7 +127,7 @@ export interface StageDragResizeConfig {
 export interface StageMultiDragResizeConfig {
   container: HTMLElement;
   dragResizeHelper: DragResizeHelper;
-  multiMoveableOptions?: CustomizeMoveableOptions;
+  moveableOptions?: CustomizeMoveableOptions;
   getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
   markContainerEnd: MarkContainerEnd;

package/types/ActionManager.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="node" />
 /// <reference types="node" />
 import EventEmitter from 'events';
-import { Id } from '@tmagic/schema';
+import type { MoveableOptions } from 'moveable';
+import type { Id } from '@tmagic/schema';
 import { GuidesType } from './const';
-import { ActionManagerConfig, SelectStatus } from './types';
+import { ActionManagerConfig, SelectStatus, StageDragStatus } from './types';
 /**
  * 管理蒙层mask之上的操作：1、监听键盘鼠标事件，判断形成单选、多选、高亮操作；2、管理单选、多选、高亮三个类协同工作。
  * @extends EventEmitter
@@ -58,6 +59,7 @@ export default class ActionManager extends EventEmitter {
     setSelectedEl(el: HTMLElement): void;
     getSelectedEl(): HTMLElement | undefined;
     getSelectedElList(): HTMLElement[];
+    getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
     /**
      * 获取鼠标下方第一个可选中元素，如果元素层叠，返回到是最上层元素
      * @param event 鼠标事件
@@ -101,6 +103,7 @@ export default class ActionManager extends EventEmitter {
      * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
+    getDragStatus(): StageDragStatus;
     destroy(): void;
     private changeCallback;
     /**