@tmagic/stage 1.8.0-beta.16 → 1.8.0-beta.18

package/dist/es/ActionManager.js

@@ -35,6 +35,8 @@ var ActionManager = class extends EventEmitter$1 {
 	containerHighlightDuration;
 	/** 将组件加入容器的操作方式 */
 	containerHighlightType;
+	/** 是否仅在新增组件时才启用将组件加入容器 */
+	containerHighlightAddOnly = false;
 	isAltKeydown = false;
 	getTargetElement;
 	getElementsFromPoint;
@@ -68,6 +70,7 @@ var ActionManager = class extends EventEmitter$1 {
 		this.containerHighlightClassName = config.containerHighlightClassName || "tmagic-stage-container-highlight";
 		this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
 		this.containerHighlightType = config.containerHighlightType;
+		this.containerHighlightAddOnly = config.containerHighlightAddOnly ?? false;
 		this.disabledMultiSelect = config.disabledMultiSelect ?? false;
 		this.alwaysMultiSelect = config.alwaysMultiSelect ?? false;
 		this.getTargetElement = config.getTargetElement;
@@ -299,10 +302,11 @@ var ActionManager = class extends EventEmitter$1 {
 	* 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
 	* @param event 鼠标事件
 	* @param excludeElList 计算鼠标所在容器时要排除的元素列表
+	* @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
 	* @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
 	*/
-	delayedMarkContainer(event, excludeElList = []) {
-		if (this.canAddToContainer()) return globalThis.setTimeout(() => {
+	delayedMarkContainer(event, excludeElList = [], isAdd = false) {
+		if (this.canAddToContainer(isAdd)) return globalThis.setTimeout(() => {
 			this.addContainerHighlightClassName(event, excludeElList);
 		}, this.containerHighlightDuration);
 	}
@@ -421,9 +425,12 @@ var ActionManager = class extends EventEmitter$1 {
 		} else this.selectedElList.push(el);
 	}
 	/**
-	* 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+	* 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入；
+	* 开启containerHighlightAddOnly时，画布中拖动已有组件不能加入容器
+	* @param isAdd 当前操作是否为新增组件
 	*/
-	canAddToContainer() {
+	canAddToContainer(isAdd = false) {
+		if (this.containerHighlightAddOnly && !isAdd) return false;
 		return this.containerHighlightType === ContainerHighlightType.DEFAULT || this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown;
 	}
 	/**
@@ -432,8 +439,9 @@ var ActionManager = class extends EventEmitter$1 {
 	*/
 	markContainerEnd() {
 		const doc = this.getRenderDocument();
-		if (doc && this.canAddToContainer()) return removeClassNameByClassName(doc, this.containerHighlightClassName);
-		return null;
+		if (!doc) return null;
+		const markedContainer = removeClassNameByClassName(doc, this.containerHighlightClassName);
+		return this.canAddToContainer() ? markedContainer : null;
 	}
 	initMouseEvent() {
 		this.container.addEventListener("mousedown", this.mouseDownHandler);

package/dist/es/StageCore.js

@@ -171,10 +171,11 @@ var StageCore = class extends EventEmitter {
 	* 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
 	* @param event 鼠标事件
 	* @param excludeElList 计算鼠标所在容器时要排除的元素列表
+	* @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
 	* @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
 	*/
-	delayedMarkContainer(event, excludeElList = []) {
-		return this.actionManager?.delayedMarkContainer(event, excludeElList);
+	delayedMarkContainer(event, excludeElList = [], isAdd = false) {
+		return this.actionManager?.delayedMarkContainer(event, excludeElList, isAdd);
 	}
 	getMoveableOption(key) {
 		return this.actionManager?.getMoveableOption(key);
@@ -247,6 +248,7 @@ var StageCore = class extends EventEmitter {
 			containerHighlightClassName: config.containerHighlightClassName,
 			containerHighlightDuration: config.containerHighlightDuration,
 			containerHighlightType: config.containerHighlightType,
+			containerHighlightAddOnly: config.containerHighlightAddOnly,
 			moveableOptions: config.moveableOptions,
 			container: this.mask.content,
 			disabledDragStart: config.disabledDragStart,

package/dist/tmagic-stage.umd.cjs

@@ -3567,6 +3567,8 @@
 		containerHighlightDuration;
 		/** 将组件加入容器的操作方式 */
 		containerHighlightType;
+		/** 是否仅在新增组件时才启用将组件加入容器 */
+		containerHighlightAddOnly = false;
 		isAltKeydown = false;
 		getTargetElement;
 		getElementsFromPoint;
@@ -3600,6 +3602,7 @@
 			this.containerHighlightClassName = config.containerHighlightClassName || "tmagic-stage-container-highlight";
 			this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
 			this.containerHighlightType = config.containerHighlightType;
+			this.containerHighlightAddOnly = config.containerHighlightAddOnly ?? false;
 			this.disabledMultiSelect = config.disabledMultiSelect ?? false;
 			this.alwaysMultiSelect = config.alwaysMultiSelect ?? false;
 			this.getTargetElement = config.getTargetElement;
@@ -3831,10 +3834,11 @@
 		* 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
 		* @param event 鼠标事件
 		* @param excludeElList 计算鼠标所在容器时要排除的元素列表
+		* @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
 		* @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
 		*/
-		delayedMarkContainer(event, excludeElList = []) {
-			if (this.canAddToContainer()) return globalThis.setTimeout(() => {
+		delayedMarkContainer(event, excludeElList = [], isAdd = false) {
+			if (this.canAddToContainer(isAdd)) return globalThis.setTimeout(() => {
 				this.addContainerHighlightClassName(event, excludeElList);
 			}, this.containerHighlightDuration);
 		}
@@ -3953,9 +3957,12 @@
 			} else this.selectedElList.push(el);
 		}
 		/**
-		* 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+		* 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入；
+		* 开启containerHighlightAddOnly时，画布中拖动已有组件不能加入容器
+		* @param isAdd 当前操作是否为新增组件
 		*/
-		canAddToContainer() {
+		canAddToContainer(isAdd = false) {
+			if (this.containerHighlightAddOnly && !isAdd) return false;
 			return this.containerHighlightType === ContainerHighlightType.DEFAULT || this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown;
 		}
 		/**
@@ -3964,8 +3971,9 @@
 		*/
 		markContainerEnd() {
 			const doc = this.getRenderDocument();
-			if (doc && this.canAddToContainer()) return (0, _tmagic_core.removeClassNameByClassName)(doc, this.containerHighlightClassName);
-			return null;
+			if (!doc) return null;
+			const markedContainer = (0, _tmagic_core.removeClassNameByClassName)(doc, this.containerHighlightClassName);
+			return this.canAddToContainer() ? markedContainer : null;
 		}
 		initMouseEvent() {
 			this.container.addEventListener("mousedown", this.mouseDownHandler);
@@ -4901,10 +4909,11 @@
 		* 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
 		* @param event 鼠标事件
 		* @param excludeElList 计算鼠标所在容器时要排除的元素列表
+		* @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
 		* @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
 		*/
-		delayedMarkContainer(event, excludeElList = []) {
-			return this.actionManager?.delayedMarkContainer(event, excludeElList);
+		delayedMarkContainer(event, excludeElList = [], isAdd = false) {
+			return this.actionManager?.delayedMarkContainer(event, excludeElList, isAdd);
 		}
 		getMoveableOption(key) {
 			return this.actionManager?.getMoveableOption(key);
@@ -4977,6 +4986,7 @@
 				containerHighlightClassName: config.containerHighlightClassName,
 				containerHighlightDuration: config.containerHighlightDuration,
 				containerHighlightType: config.containerHighlightType,
+				containerHighlightAddOnly: config.containerHighlightAddOnly,
 				moveableOptions: config.moveableOptions,
 				container: this.mask.content,
 				disabledDragStart: config.disabledDragStart,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.16",
+  "version": "1.8.0-beta.18",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": false,
@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "typescript": "^6.0.3",
-    "@tmagic/core": "1.8.0-beta.16"
+    "@tmagic/core": "1.8.0-beta.18"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionManager.ts

@@ -84,6 +84,8 @@ export default class ActionManager extends EventEmitter {
   private containerHighlightDuration: number;
   /** 将组件加入容器的操作方式 */
   private containerHighlightType?: ContainerHighlightType;
+  /** 是否仅在新增组件时才启用将组件加入容器 */
+  private containerHighlightAddOnly = false;
   private isAltKeydown = false;
   private getTargetElement: GetTargetElement;
   private getElementsFromPoint: GetElementsFromPoint;
@@ -124,6 +126,7 @@ export default class ActionManager extends EventEmitter {
     this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS_NAME;
     this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
     this.containerHighlightType = config.containerHighlightType;
+    this.containerHighlightAddOnly = config.containerHighlightAddOnly ?? false;
     this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.alwaysMultiSelect = config.alwaysMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
@@ -428,10 +431,15 @@ export default class ActionManager extends EventEmitter {
    * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
    * @param event 鼠标事件
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout | undefined {
-    if (this.canAddToContainer()) {
+  public delayedMarkContainer(
+    event: MouseEvent,
+    excludeElList: Element[] = [],
+    isAdd = false,
+  ): NodeJS.Timeout | undefined {
+    if (this.canAddToContainer(isAdd)) {
       return globalThis.setTimeout(() => {
         this.addContainerHighlightClassName(event, excludeElList);
       }, this.containerHighlightDuration);
@@ -609,9 +617,13 @@ export default class ActionManager extends EventEmitter {
   }
 
   /**
-   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入；
+   * 开启containerHighlightAddOnly时，画布中拖动已有组件不能加入容器
+   * @param isAdd 当前操作是否为新增组件
    */
-  private canAddToContainer(): boolean {
+  private canAddToContainer(isAdd = false): boolean {
+    if (this.containerHighlightAddOnly && !isAdd) return false;
+
     return (
       this.containerHighlightType === ContainerHighlightType.DEFAULT ||
       (this.containerHighlightType === ContainerHighlightType.ALT && this.isAltKeydown)
@@ -624,10 +636,10 @@ export default class ActionManager extends EventEmitter {
    */
   private markContainerEnd(): HTMLElement | null {
     const doc = this.getRenderDocument();
-    if (doc && this.canAddToContainer()) {
-      return removeClassNameByClassName(doc, this.containerHighlightClassName);
-    }
-    return null;
+    if (!doc) return null;
+
+    const markedContainer = removeClassNameByClassName(doc, this.containerHighlightClassName);
+    return this.canAddToContainer() ? markedContainer : null;
   }
 
   private initMouseEvent(): void {

package/src/StageCore.ts

@@ -263,10 +263,15 @@ export default class StageCore extends EventEmitter {
    * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
    * @param event 鼠标事件
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout | undefined {
-    return this.actionManager?.delayedMarkContainer(event, excludeElList);
+  public delayedMarkContainer(
+    event: MouseEvent,
+    excludeElList: Element[] = [],
+    isAdd = false,
+  ): NodeJS.Timeout | undefined {
+    return this.actionManager?.delayedMarkContainer(event, excludeElList, isAdd);
   }
 
   public getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined {
@@ -368,6 +373,7 @@ export default class StageCore extends EventEmitter {
       containerHighlightClassName: config.containerHighlightClassName,
       containerHighlightDuration: config.containerHighlightDuration,
       containerHighlightType: config.containerHighlightType,
+      containerHighlightAddOnly: config.containerHighlightAddOnly,
       moveableOptions: config.moveableOptions,
       container: this.mask!.content,
       disabledDragStart: config.disabledDragStart,

package/src/types.ts

@@ -53,7 +53,11 @@ export type GetTargetElement = (id: Id) => HTMLElement | null;
 /** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
 export type GetElementsFromPoint = (point: Point) => HTMLElement[];
 export type GetRenderDocument = () => Document | undefined;
-export type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+export type DelayedMarkContainer = (
+  event: MouseEvent,
+  exclude?: Element[],
+  isAdd?: boolean,
+) => NodeJS.Timeout | undefined;
 export type MarkContainerEnd = () => HTMLElement | null;
 export type GetRootContainer = () => HTMLDivElement | undefined;
 
@@ -74,6 +78,11 @@ export interface StageCoreConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用将组件拖入容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
@@ -102,6 +111,8 @@ export interface ActionManagerConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /** 见 StageCoreConfig.containerHighlightAddOnly */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
   disabledMultiSelect?: boolean;

package/types/index.d.ts

@@ -182,7 +182,7 @@ type GetTargetElement = (id: Id) => HTMLElement | null;
 /** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
 type GetElementsFromPoint = (point: Point) => HTMLElement[];
 type GetRenderDocument = () => Document | undefined;
-type DelayedMarkContainer = (event: MouseEvent, exclude: Element[]) => NodeJS.Timeout | undefined;
+type DelayedMarkContainer = (event: MouseEvent, exclude?: Element[], isAdd?: boolean) => NodeJS.Timeout | undefined;
 type MarkContainerEnd = () => HTMLElement | null;
 type GetRootContainer = () => HTMLDivElement | undefined;
 type UpdateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => void;
@@ -201,6 +201,11 @@ interface StageCoreConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用将组件拖入容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
@@ -228,6 +233,8 @@ interface ActionManagerConfig {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /** 见 StageCoreConfig.containerHighlightAddOnly */
+  containerHighlightAddOnly?: boolean;
   moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
   disabledMultiSelect?: boolean;
@@ -467,6 +474,8 @@ declare class ActionManager extends EventEmitter$1 {
   private containerHighlightDuration;
   /** 将组件加入容器的操作方式 */
   private containerHighlightType?;
+  /** 是否仅在新增组件时才启用将组件加入容器 */
+  private containerHighlightAddOnly;
   private isAltKeydown;
   private getTargetElement;
   private getElementsFromPoint;
@@ -557,9 +566,10 @@ declare class ActionManager extends EventEmitter$1 {
    * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
    * @param event 鼠标事件
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
+  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[], isAdd?: boolean): NodeJS.Timeout | undefined;
   getDragStatus(): StageDragStatus | undefined;
   updateMoveableOptions(): void;
   destroy(): void;
@@ -575,7 +585,9 @@ declare class ActionManager extends EventEmitter$1 {
    */
   private beforeMultiSelect;
   /**
-   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入
+   * 当前状态下能否将组件加入容器，默认是鼠标悬停一段时间加入，alt模式则是按住alt+鼠标悬停一段时间加入；
+   * 开启containerHighlightAddOnly时，画布中拖动已有组件不能加入容器
+   * @param isAdd 当前操作是否为新增组件
    */
   private canAddToContainer;
   /**
@@ -891,9 +903,10 @@ declare class StageCore extends EventEmitter {
    * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
    * @param event 鼠标事件
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
+   * @param isAdd 当前操作是否为新增组件（从组件列表拖入），开启 containerHighlightAddOnly 时只有新增才会标记
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
+  delayedMarkContainer(event: MouseEvent, excludeElList?: Element[], isAdd?: boolean): NodeJS.Timeout | undefined;
   getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
   getDragStatus(): import("@tmagic/editor").StageDragStatus | undefined;
   disableMultiSelect(): void;