@tmagic/stage 1.8.0-beta.4 → 1.8.0-beta.5

package/dist/es/StageCore.js

@@ -39,7 +39,10 @@ var StageCore = class extends EventEmitter {
 			disabledRule: config.disabledRule
 		});
 		this.actionManager = new ActionManager(this.getActionManagerConfig(config));
-		this.flashHighlight = new StageFlashHighlight({ container: this.mask.content });
+		this.flashHighlight = new StageFlashHighlight({
+			container: this.mask.content,
+			updateDragEl: config.updateDragEl
+		});
 		this.initRenderEvent();
 		this.initActionEvent();
 		this.initMaskEvent();

package/dist/es/StageFlashHighlight.js

@@ -1,5 +1,5 @@
-import { ZIndex } from "./const.js";
-import { getOffset } from "./util.js";
+import { FLASH_EL_ID_PREFIX, ZIndex } from "./const.js";
+import TargetShadow from "./TargetShadow.js";
 import { getDocument, injectStyle } from "@tmagic/core";
 //#region packages/stage/src/StageFlashHighlight.ts
 /** 闪烁提示节点的 class name */
@@ -14,13 +14,17 @@ var FLASH_DURATION = 1500;
 * 帮助用户快速定位组件在画布中的位置。
 */
 var StageFlashHighlight = class {
-	/** 闪烁节点挂载的容器（蒙层的content） */
-	container;
-	el;
+	/** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+	targetShadow;
 	timer;
 	styleEl;
 	constructor(config) {
-		this.container = config.container;
+		this.targetShadow = new TargetShadow({
+			container: config.container,
+			updateDragEl: config.updateDragEl,
+			zIndex: ZIndex.SELECTED_EL,
+			idPrefix: FLASH_EL_ID_PREFIX
+		});
 	}
 	/**
 	* 在目标元素所在区域做一次高亮闪烁
@@ -30,23 +34,11 @@ var StageFlashHighlight = class {
 		if (!el) return;
 		this.injectStyle();
 		this.clear();
-		const offset = getOffset(el);
-		const { transform } = getComputedStyle(el);
-		const flashEl = globalThis.document.createElement("div");
-		flashEl.className = FLASH_TIP_CLASS_NAME;
-		flashEl.style.cssText = `
-      position: absolute;
-      box-sizing: border-box;
-      pointer-events: none;
-      transform: ${transform};
-      left: ${offset.left}px;
-      top: ${offset.top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.SELECTED_EL};
-    `;
-		this.container.appendChild(flashEl);
-		this.el = flashEl;
+		const flashEl = this.targetShadow.update(el);
+		flashEl.classList.add(FLASH_TIP_CLASS_NAME);
+		flashEl.style.boxSizing = "border-box";
+		flashEl.style.pointerEvents = "none";
+		flashEl.style.border = "";
 		this.timer = globalThis.setTimeout(() => {
 			this.clear();
 		}, FLASH_DURATION);
@@ -59,14 +51,14 @@ var StageFlashHighlight = class {
 			globalThis.clearTimeout(this.timer);
 			this.timer = void 0;
 		}
-		this.el?.remove();
-		this.el = void 0;
+		this.targetShadow.destroyEl();
 	}
 	/**
 	* 销毁实例
 	*/
 	destroy() {
 		this.clear();
+		this.targetShadow.destroy();
 		this.styleEl?.remove();
 		this.styleEl = void 0;
 	}

package/dist/es/const.js

@@ -5,6 +5,8 @@ var GHOST_EL_ID_PREFIX = "ghost_el_";
 var DRAG_EL_ID_PREFIX = "drag_el_";
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 var HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+/** 闪烁提示时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+var FLASH_EL_ID_PREFIX = "flash_el_";
 var CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
 var PAGE_CLASS = "magic-ui-page";
 /** 默认放到缩小倍数 */
@@ -88,4 +90,4 @@ var StageDragStatus = /* @__PURE__ */ function(StageDragStatus) {
 	return StageDragStatus;
 }({});
 //#endregion
-export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragStatus, ZIndex };
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, FLASH_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragStatus, ZIndex };

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragStatus, ZIndex } from "./const.js";
+import { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, FLASH_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragStatus, ZIndex } from "./const.js";
 import { addSelectedClassName, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up } from "./util.js";
 import MoveableActionsAble_default from "./MoveableActionsAble.js";
 import StageDragResize from "./StageDragResize.js";
@@ -9,4 +9,4 @@ export * from "moveable";
 //#region packages/stage/src/index.ts
 var src_default = StageCore;
 //#endregion
-export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, MoveableActionsAble_default as MoveableActionsAble, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, src_default as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, FLASH_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, MoveableActionsAble_default as MoveableActionsAble, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, src_default as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };

package/dist/tmagic-stage.umd.cjs

@@ -2175,6 +2175,8 @@
 	var DRAG_EL_ID_PREFIX = "drag_el_";
 	/** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 	var HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+	/** 闪烁提示时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+	var FLASH_EL_ID_PREFIX = "flash_el_";
 	var CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
 	var PAGE_CLASS = "magic-ui-page";
 	/** 默认放到缩小倍数 */
@@ -4006,13 +4008,17 @@
 	* 帮助用户快速定位组件在画布中的位置。
 	*/
 	var StageFlashHighlight = class {
-		/** 闪烁节点挂载的容器（蒙层的content） */
-		container;
-		el;
+		/** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+		targetShadow;
 		timer;
 		styleEl;
 		constructor(config) {
-			this.container = config.container;
+			this.targetShadow = new TargetShadow({
+				container: config.container,
+				updateDragEl: config.updateDragEl,
+				zIndex: ZIndex.SELECTED_EL,
+				idPrefix: FLASH_EL_ID_PREFIX
+			});
 		}
 		/**
 		* 在目标元素所在区域做一次高亮闪烁
@@ -4022,23 +4028,11 @@
 			if (!el) return;
 			this.injectStyle();
 			this.clear();
-			const offset = getOffset(el);
-			const { transform } = getComputedStyle(el);
-			const flashEl = globalThis.document.createElement("div");
-			flashEl.className = FLASH_TIP_CLASS_NAME;
-			flashEl.style.cssText = `
-      position: absolute;
-      box-sizing: border-box;
-      pointer-events: none;
-      transform: ${transform};
-      left: ${offset.left}px;
-      top: ${offset.top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.SELECTED_EL};
-    `;
-			this.container.appendChild(flashEl);
-			this.el = flashEl;
+			const flashEl = this.targetShadow.update(el);
+			flashEl.classList.add(FLASH_TIP_CLASS_NAME);
+			flashEl.style.boxSizing = "border-box";
+			flashEl.style.pointerEvents = "none";
+			flashEl.style.border = "";
 			this.timer = globalThis.setTimeout(() => {
 				this.clear();
 			}, FLASH_DURATION);
@@ -4051,14 +4045,14 @@
 				globalThis.clearTimeout(this.timer);
 				this.timer = void 0;
 			}
-			this.el?.remove();
-			this.el = void 0;
+			this.targetShadow.destroyEl();
 		}
 		/**
 		* 销毁实例
 		*/
 		destroy() {
 			this.clear();
+			this.targetShadow.destroy();
 			this.styleEl?.remove();
 			this.styleEl = void 0;
 		}
@@ -4717,7 +4711,10 @@
 				disabledRule: config.disabledRule
 			});
 			this.actionManager = new ActionManager(this.getActionManagerConfig(config));
-			this.flashHighlight = new StageFlashHighlight({ container: this.mask.content });
+			this.flashHighlight = new StageFlashHighlight({
+				container: this.mask.content,
+				updateDragEl: config.updateDragEl
+			});
 			this.initRenderEvent();
 			this.initActionEvent();
 			this.initMaskEvent();
@@ -5040,6 +5037,7 @@
 	exports.ContainerHighlightType = ContainerHighlightType;
 	exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
 	exports.DRAG_EL_ID_PREFIX = DRAG_EL_ID_PREFIX;
+	exports.FLASH_EL_ID_PREFIX = FLASH_EL_ID_PREFIX;
 	exports.GHOST_EL_ID_PREFIX = GHOST_EL_ID_PREFIX;
 	exports.GuidesType = GuidesType;
 	exports.HIGHLIGHT_EL_ID_PREFIX = HIGHLIGHT_EL_ID_PREFIX;

package/package.json

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

package/src/StageCore.ts

@@ -83,7 +83,10 @@ export default class StageCore extends EventEmitter {
       disabledRule: config.disabledRule,
     });
     this.actionManager = new ActionManager(this.getActionManagerConfig(config));
-    this.flashHighlight = new StageFlashHighlight({ container: this.mask.content });
+    this.flashHighlight = new StageFlashHighlight({
+      container: this.mask.content,
+      updateDragEl: config.updateDragEl,
+    });
 
     this.initRenderEvent();
     this.initActionEvent();

package/src/StageFlashHighlight.ts

@@ -18,8 +18,9 @@
 
 import { getDocument, injectStyle } from '@tmagic/core';
 
-import { ZIndex } from './const';
-import { getOffset } from './util';
+import { FLASH_EL_ID_PREFIX, ZIndex } from './const';
+import TargetShadow from './TargetShadow';
+import type { StageFlashHighlightConfig } from './types';
 
 /** 闪烁提示节点的 class name */
 export const FLASH_TIP_CLASS_NAME = 'tmagic-stage-flash-tip';
@@ -34,14 +35,18 @@ const FLASH_DURATION = 1500;
  * 帮助用户快速定位组件在画布中的位置。
  */
 export default class StageFlashHighlight {
-  /** 闪烁节点挂载的容器（蒙层的content） */
-  private container: HTMLElement;
-  private el?: HTMLElement;
+  /** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+  private targetShadow: TargetShadow;
   private timer?: NodeJS.Timeout;
   private styleEl?: HTMLStyleElement;
 
-  constructor(config: { container: HTMLElement }) {
-    this.container = config.container;
+  constructor(config: StageFlashHighlightConfig) {
+    this.targetShadow = new TargetShadow({
+      container: config.container,
+      updateDragEl: config.updateDragEl,
+      zIndex: ZIndex.SELECTED_EL,
+      idPrefix: FLASH_EL_ID_PREFIX,
+    });
   }
 
   /**
@@ -52,27 +57,15 @@ export default class StageFlashHighlight {
     if (!el) return;
 
     this.injectStyle();
+    // 先销毁旧节点再 update，确保每次都拿到全新节点，让闪烁动画重新播放
     this.clear();
 
-    const offset = getOffset(el);
-    const { transform } = getComputedStyle(el);
-
-    const flashEl = globalThis.document.createElement('div');
-    flashEl.className = FLASH_TIP_CLASS_NAME;
-    flashEl.style.cssText = `
-      position: absolute;
-      box-sizing: border-box;
-      pointer-events: none;
-      transform: ${transform};
-      left: ${offset.left}px;
-      top: ${offset.top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.SELECTED_EL};
-    `;
-
-    this.container.appendChild(flashEl);
-    this.el = flashEl;
+    const flashEl = this.targetShadow.update(el);
+    flashEl.classList.add(FLASH_TIP_CLASS_NAME);
+    flashEl.style.boxSizing = 'border-box';
+    flashEl.style.pointerEvents = 'none';
+    // getTargetElStyle 会写入 target 的内联 border，需清掉以让动画 class 的边框生效
+    flashEl.style.border = '';
 
     this.timer = globalThis.setTimeout(() => {
       this.clear();
@@ -87,8 +80,7 @@ export default class StageFlashHighlight {
       globalThis.clearTimeout(this.timer);
       this.timer = undefined;
     }
-    this.el?.remove();
-    this.el = undefined;
+    this.targetShadow.destroyEl();
   }
 
   /**
@@ -96,6 +88,7 @@ export default class StageFlashHighlight {
    */
   public destroy(): void {
     this.clear();
+    this.targetShadow.destroy();
     this.styleEl?.remove();
     this.styleEl = undefined;
   }

package/src/const.ts

@@ -25,6 +25,9 @@ export const DRAG_EL_ID_PREFIX = 'drag_el_';
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
+/** 闪烁提示时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+export const FLASH_EL_ID_PREFIX = 'flash_el_';
+
 export const CONTAINER_HIGHLIGHT_CLASS_NAME = 'tmagic-stage-container-highlight';
 
 export const PAGE_CLASS = 'magic-ui-page';

package/src/types.ts

@@ -269,6 +269,11 @@ export interface TargetShadowConfig {
   idPrefix?: string;
 }
 
+export interface StageFlashHighlightConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+}
+
 export interface RuleOptions {
   guidesOptions?: Partial<GuidesOptions>;
   disabledRule?: boolean;

package/types/index.d.ts

@@ -13,6 +13,8 @@ declare const GHOST_EL_ID_PREFIX = "ghost_el_";
 declare const DRAG_EL_ID_PREFIX = "drag_el_";
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+/** 闪烁提示时需要在蒙层中创建一个占位节点，该节点的id前缀 */
+declare const FLASH_EL_ID_PREFIX = "flash_el_";
 declare const CONTAINER_HIGHLIGHT_CLASS_NAME = "tmagic-stage-container-highlight";
 declare const PAGE_CLASS = "magic-ui-page";
 /** 默认放到缩小倍数 */
@@ -368,6 +370,10 @@ interface TargetShadowConfig {
   updateDragEl?: UpdateDragEl;
   idPrefix?: string;
 }
+interface StageFlashHighlightConfig {
+  container: HTMLElement;
+  updateDragEl?: UpdateDragEl;
+}
 interface RuleOptions {
   guidesOptions?: Partial<GuidesOptions$1>;
   disabledRule?: boolean;
@@ -603,14 +609,11 @@ declare class ActionManager extends EventEmitter$1 {
  * 帮助用户快速定位组件在画布中的位置。
  */
 declare class StageFlashHighlight {
-  /** 闪烁节点挂载的容器（蒙层的content） */
-  private container;
-  private el?;
+  /** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+  private targetShadow;
   private timer?;
   private styleEl?;
-  constructor(config: {
-    container: HTMLElement;
-  });
+  constructor(config: StageFlashHighlightConfig);
   /**
    * 在目标元素所在区域做一次高亮闪烁
    * @param el 选中组件的Dom节点元素
@@ -1146,4 +1149,4 @@ declare const _default: (handler: (type: AbleActionEventType) => void, customize
   render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
 };
 //#endregion
-export { AbleActionEventType, AbleCustomizedButton, ActionManagerConfig, ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, CanDropIn, CanSelect, ContainerHighlightType, CoreEvents, CustomizeMoveableOptions, CustomizeMoveableOptionsCallbackConfig, CustomizeMoveableOptionsFunction, CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, DelayedMarkContainer, DrEvents, DragResizeHelperConfig, GHOST_EL_ID_PREFIX, GetElementsFromPoint, GetRenderDocument, GetRootContainer, GetTargetElement, GuidesEventData, type GuidesOptions, GuidesType, HIGHLIGHT_EL_ID_PREFIX, IsContainer, Magic, MarkContainerEnd, MaskEvents, Mode, MouseButton, _default as MoveableActionsAble, MoveableOptionsManagerConfig, MultiDrEvents, Offset, PAGE_CLASS, Point, Rect, RemoveData, RemoveEventData, RenderEvents, RenderType, RuleOptions, Runtime, RuntimeWindow, SELECTED_CLASS, SelectStatus, SortEventData, StageCoreConfig, StageDragResize, StageDragResizeConfig, StageDragStatus, StageHighlightConfig, StageMask, StageMaskConfig, StageMultiDragResizeConfig, StageRender, StageRenderConfig, TargetElement, TargetShadowConfig, UpdateData, UpdateDragEl, UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, AbleCustomizedButton, ActionManagerConfig, ActionManagerEvents, CONTAINER_HIGHLIGHT_CLASS_NAME, CanDropIn, CanSelect, ContainerHighlightType, CoreEvents, CustomizeMoveableOptions, CustomizeMoveableOptionsCallbackConfig, CustomizeMoveableOptionsFunction, CustomizeRender, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, DelayedMarkContainer, DrEvents, DragResizeHelperConfig, FLASH_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GetElementsFromPoint, GetRenderDocument, GetRootContainer, GetTargetElement, GuidesEventData, type GuidesOptions, GuidesType, HIGHLIGHT_EL_ID_PREFIX, IsContainer, Magic, MarkContainerEnd, MaskEvents, Mode, MouseButton, _default as MoveableActionsAble, MoveableOptionsManagerConfig, MultiDrEvents, Offset, PAGE_CLASS, Point, Rect, RemoveData, RemoveEventData, RenderEvents, RenderType, RuleOptions, Runtime, RuntimeWindow, SELECTED_CLASS, SelectStatus, SortEventData, StageCoreConfig, StageDragResize, StageDragResizeConfig, StageDragStatus, StageFlashHighlightConfig, StageHighlightConfig, StageMask, StageMaskConfig, StageMultiDragResizeConfig, StageRender, StageRenderConfig, TargetElement, TargetShadowConfig, UpdateData, UpdateDragEl, UpdateEventData, ZIndex, addSelectedClassName, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };