feat(stage,editor): 拖入指定容器支持配置成按住alt才开启

docs/src/api/editor/editor.md

@@ -360,6 +360,22 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
   
 识别到容器后，会给其dom上添加的class
 
+### containerHighlightType
+
+- **类型：** 'default' | 'alt' | '';
+  
+- **默认值：** 'default'
+  
+- **详情：**
+  
+启动方式
+
+default: 停留在画布上启动识别
+
+alt: 按住alt键启动识别
+
+其他值：不启动
+
 
 ## slots
 

packages/editor/src/Editor.vue

@@ -30,7 +30,7 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+        <props-panel ref="propsPanel" @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
@@ -49,7 +49,7 @@ import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { CONTAINER_HIGHLIGHT_CLASS, MoveableOptions } from '@tmagic/stage';
+import { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import Framework from './layouts/Framework.vue';
 import NavMenu from './layouts/NavMenu.vue';
@@ -170,6 +170,11 @@ export default defineComponent({
       default: 800,
     },
 
+    containerHighlightType: {
+      type: String as PropType<ContainerHighlightType>,
+      default: ContainerHighlightType.DEFAULT,
+    },
+
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
@@ -289,6 +294,7 @@ export default defineComponent({
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType,
       }),
     );
 

packages/editor/src/layouts/workspace/Stage.vue

@@ -81,6 +81,7 @@ watchEffect(() => {
     isContainer: stageOptions.isContainer,
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select

packages/editor/src/type.ts

@@ -21,7 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
@@ -53,6 +53,7 @@ export interface StageOptions {
   autoScrollIntoView: boolean;
   containerHighlightClassName: string;
   containerHighlightDuration: number;
+  containerHighlightType: ContainerHighlightType;
   render: () => HTMLDivElement;
   moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;

packages/stage/src/StageCore.ts

@@ -21,7 +21,7 @@ import { EventEmitter } from 'events';
 import type { Id } from '@tmagic/schema';
 import { addClassName } from '@tmagic/utils';
 
-import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } from './const';
+import { CONTAINER_HIGHLIGHT_CLASS, DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } from './const';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
@@ -29,6 +29,7 @@ import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
 import {
   CanSelect,
+  ContainerHighlightType,
   GuidesEventData,
   IsContainer,
   RemoveData,
@@ -57,6 +58,7 @@ export default class StageCore extends EventEmitter {
   public zoom = DEFAULT_ZOOM;
   public containerHighlightClassName: string;
   public containerHighlightDuration: number;
+  public containerHighlightType?: ContainerHighlightType;
   public isContainer: IsContainer;
 
   private canSelect: CanSelect;
@@ -69,8 +71,9 @@ export default class StageCore extends EventEmitter {
     this.setZoom(config.zoom);
     this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
     this.isContainer = config.isContainer;
-    this.containerHighlightClassName = config.containerHighlightClassName;
+    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
-    this.containerHighlightDuration = config.containerHighlightDuration;
+    this.containerHighlightDuration = config.containerHighlightDuration || 800;
+    this.containerHighlightType = config.containerHighlightType;
 
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });

packages/stage/src/StageDragResize.ts

@@ -19,6 +19,7 @@
 /* eslint-disable no-param-reassign */
 import { EventEmitter } from 'events';
 
+import KeyController from 'keycon';
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
@@ -29,7 +30,7 @@ import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from
 import StageCore from './StageCore';
 import StageMask from './StageMask';
 import type { StageDragResizeConfig } from './types';
-import { StageDragStatus } from './types';
+import { ContainerHighlightType, StageDragStatus } from './types';
 import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
 
 /**
@@ -61,6 +62,7 @@ export default class StageDragResize extends EventEmitter {
   /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
   private moveableHelper?: MoveableHelper;
+  private isContainerHighlight: Boolean = false;
 
   constructor(config: StageDragResizeConfig) {
     super();
@@ -68,6 +70,20 @@ export default class StageDragResize extends EventEmitter {
     this.core = config.core;
     this.container = config.container;
     this.mask = config.mask;
+
+    KeyController.global.keydown('alt', (e) => {
+      e.inputEvent.preventDefault();
+      this.isContainerHighlight = true;
+    });
+    KeyController.global.keyup('alt', (e) => {
+      e.inputEvent.preventDefault();
+
+      const doc = this.core.renderer.contentWindow?.document;
+      if (doc && this.canContainerHighlight()) {
+        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+      }
+      this.isContainerHighlight = false;
+    });
   }
 
   /**
@@ -302,7 +318,9 @@ export default class StageDragResize extends EventEmitter {
           timeout = undefined;
         }
 
-        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        if (this.canContainerHighlight()) {
+          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        }
 
         this.dragStatus = StageDragStatus.ING;
 
@@ -325,7 +343,7 @@ export default class StageDragResize extends EventEmitter {
 
         let parentEl: HTMLElement | null = null;
 
-        if (doc) {
+        if (doc && this.canContainerHighlight()) {
           parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
         }
 
@@ -561,4 +579,11 @@ export default class StageDragResize extends EventEmitter {
       ...moveableOptions,
     };
   }
+
+  private canContainerHighlight() {
+    return (
+      this.core.containerHighlightType === ContainerHighlightType.DEFAULT ||
+      (this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight)
+    );
+  }
 }

packages/stage/src/types.ts

@@ -29,6 +29,11 @@ import StageMask from './StageMask';
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
 
+export enum ContainerHighlightType {
+  DEFAULT = 'default',
+  ALT = 'alt',
+}
+
 export type StageCoreConfig = {
   /** 需要对齐的dom节点的CSS选择器字符串 */
   snapElementQuerySelector?: string;
@@ -36,8 +41,9 @@ export type StageCoreConfig = {
   zoom?: number;
   canSelect?: CanSelect;
   isContainer: IsContainer;
-  containerHighlightClassName: string;
+  containerHighlightClassName?: string;
-  containerHighlightDuration: number;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
   moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */