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

package/dist/es/StageCore.js

@@ -1,5 +1,6 @@
 import "./const.js";
 import ActionManager from "./ActionManager.js";
+import StageFlashHighlight from "./StageFlashHighlight.js";
 import StageMask from "./StageMask.js";
 import StageRender from "./StageRender.js";
 import { EventEmitter } from "events";
@@ -13,13 +14,17 @@ var StageCore = class extends EventEmitter {
 	renderer = null;
 	mask = null;
 	actionManager = null;
+	flashHighlight = null;
 	pageResizeObserver = null;
 	autoScrollIntoView;
 	customizedRender;
+	/** 非点击画布选中组件时，是否对选中区域做高亮闪烁提示，默认开启 */
+	disabledFlashTip;
 	constructor(config) {
 		super();
 		this.autoScrollIntoView = config.autoScrollIntoView;
 		this.customizedRender = config.render;
+		this.disabledFlashTip = config.disabledFlashTip ?? false;
 		this.renderer = new StageRender({
 			runtimeUrl: config.runtimeUrl,
 			zoom: config.zoom,
@@ -34,6 +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,
+			updateDragEl: config.updateDragEl
+		});
 		this.initRenderEvent();
 		this.initActionEvent();
 		this.initMaskEvent();
@@ -42,7 +51,7 @@ var StageCore = class extends EventEmitter {
 	* 单选选中元素
 	* @param id 选中的id
 	*/
-	async select(id, event) {
+	async select(id, event, options = {}) {
 		if (!this.renderer) return;
 		let el = this.renderer.getTargetElement(id) || null;
 		if (!el) el = await new Promise((resolve) => {
@@ -73,6 +82,8 @@ var StageCore = class extends EventEmitter {
 		if (el) this.mask?.setLayout(el);
 		this.actionManager?.select(el, event);
 		if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) this.mask?.observerIntersection(el);
+		const isPage = el === this.mask?.page || el?.className.includes("magic-ui-page");
+		if (el && !event && options.flash !== false && !this.disabledFlashTip && !isPage) this.flashHighlight?.flash(el);
 	}
 	/**
 	* 多选选中多个元素
@@ -198,16 +209,18 @@ var StageCore = class extends EventEmitter {
 	* 销毁实例
 	*/
 	destroy() {
-		const { mask, renderer, actionManager, pageResizeObserver } = this;
+		const { mask, renderer, actionManager, flashHighlight, pageResizeObserver } = this;
 		renderer?.destroy();
 		mask?.destroy();
 		actionManager?.destroy();
+		flashHighlight?.destroy();
 		pageResizeObserver?.disconnect();
 		this.removeAllListeners();
 		this.container = void 0;
 		this.renderer = null;
 		this.mask = null;
 		this.actionManager = null;
+		this.flashHighlight = null;
 		this.pageResizeObserver = null;
 	}
 	on(eventName, listener) {

package/dist/es/StageFlashHighlight.js

@@ -0,0 +1,102 @@
+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 */
+var FLASH_TIP_CLASS_NAME = "tmagic-stage-flash-tip";
+/** 闪烁动画名称 */
+var FLASH_ANIMATION_NAME = "tmagic-stage-flash";
+/** 闪烁动画时长（ms） */
+var FLASH_DURATION = 1500;
+/**
+* 选中区域闪烁提示
+* @description 当组件不是通过点击画布选中（如从图层树、面包屑等外部选中）时，在画布上对选中区域做一次高亮闪烁，
+* 帮助用户快速定位组件在画布中的位置。
+*/
+var StageFlashHighlight = class {
+	/** 复用 TargetShadow 负责节点的定位校准（updateDragEl、fixed、滚动偏移等） */
+	targetShadow;
+	timer;
+	styleEl;
+	constructor(config) {
+		this.targetShadow = new TargetShadow({
+			container: config.container,
+			updateDragEl: config.updateDragEl,
+			zIndex: ZIndex.SELECTED_EL,
+			idPrefix: FLASH_EL_ID_PREFIX
+		});
+	}
+	/**
+	* 在目标元素所在区域做一次高亮闪烁
+	* @param el 选中组件的Dom节点元素
+	*/
+	flash(el) {
+		if (!el) return;
+		this.injectStyle();
+		this.clear();
+		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);
+	}
+	/**
+	* 清除闪烁节点
+	*/
+	clear() {
+		if (this.timer) {
+			globalThis.clearTimeout(this.timer);
+			this.timer = void 0;
+		}
+		this.targetShadow.destroyEl();
+	}
+	/**
+	* 销毁实例
+	*/
+	destroy() {
+		this.clear();
+		this.targetShadow.destroy();
+		this.styleEl?.remove();
+		this.styleEl = void 0;
+	}
+	/**
+	* 注入闪烁动画样式（仅注入一次）
+	*/
+	injectStyle() {
+		if (this.styleEl) return;
+		this.styleEl = injectStyle(getDocument(), `
+      @keyframes ${FLASH_ANIMATION_NAME} {
+        0% {
+          opacity: 0;
+          background-color: rgba(146, 84, 222, 0);
+        }
+        20% {
+          opacity: 1;
+          background-color: rgba(146, 84, 222, 0.7);
+        }
+        45% {
+          opacity: 0.6;
+          background-color: rgba(146, 84, 222, 0.4);
+        }
+        70% {
+          opacity: 1;
+          background-color: rgba(146, 84, 222, 0.7);
+        }
+        100% {
+          opacity: 0;
+          background-color: rgba(146, 84, 222, 0);
+        }
+      }
+      .${FLASH_TIP_CLASS_NAME} {
+        border: 2px solid #9254de;
+        border-radius: 2px;
+        animation: ${FLASH_ANIMATION_NAME} ${FLASH_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1) both;
+      }
+      `);
+	}
+};
+//#endregion
+export { StageFlashHighlight as default };

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