@tmagic/stage 1.8.0-beta.2 → 1.8.0-beta.21

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

@@ -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);
 	}
 	/**
 	* 多选选中多个元素
@@ -160,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);
@@ -198,16 +210,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) {
@@ -234,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/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 { FLASH_TIP_CLASS_NAME, StageFlashHighlight as default };

package/dist/es/StageMask.js

@@ -1,5 +1,5 @@
 import { Mode, ZIndex } from "./const.js";
-import { getScrollParent, isFixedParent } from "./util.js";
+import { getScrollParent, isFixedParent, scrollElementIntoView } from "./util.js";
 import Rule from "./Rule.js";
 import { createDiv, getDocument, injectStyle } from "@tmagic/core";
 //#region packages/stage/src/StageMask.ts
@@ -118,8 +118,8 @@ var StageMask = class extends Rule {
 			this.scrollIntoView(scrollParent);
 			return;
 		}
-		el.scrollIntoView();
 		if (!this.pageScrollParent) return;
+		scrollElementIntoView(el, this.pageScrollParent);
 		this.scrollLeft = this.pageScrollParent.scrollLeft;
 		this.scrollTop = this.pageScrollParent.scrollTop;
 		this.scroll();

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,5 +1,5 @@
-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 { addSelectedClassName, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up } from "./util.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, scrollElementIntoView, up } from "./util.js";
 import MoveableActionsAble_default from "./MoveableActionsAble.js";
 import StageDragResize from "./StageDragResize.js";
 import StageMask from "./StageMask.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, scrollElementIntoView, up };

package/dist/es/moveable-able.js

@@ -1,4 +1,4 @@
 //#region packages/stage/src/moveable-able.css?raw
-var moveable_able_default = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n  cursor: pointer;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n.moveable-rerender-button img {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n";
+var moveable_able_default = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: var(--el-color-primary,#4af);\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n  cursor: pointer;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n.moveable-rerender-button img {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n";
 //#endregion
 export { moveable_able_default as default };

package/dist/es/util.js

@@ -91,6 +91,33 @@ var getScrollParent = (element, includeHidden = false) => {
 	}
 	return null;
 };
+/**
+* 将元素滚动到指定滚动容器的可视区域内（仅垂直方向，滚动最小距离）
+* @description 与原生 scrollIntoView 不同，只滚动指定的容器自身，不会连带滚动外层祖先滚动容器，
+* 避免编辑器画布外层容器（如 stage 外层使用 transform 模拟滚动的容器）被浏览器自动滚动导致整个画布位移
+* @param el 目标元素
+* @param container 滚动容器
+*/
+var scrollElementIntoView = (el, container) => {
+	const { ownerDocument } = container;
+	const win = ownerDocument?.defaultView;
+	if (!ownerDocument || !win) return;
+	const elRect = el.getBoundingClientRect();
+	let viewTop = 0;
+	let viewHeight = 0;
+	if (container === ownerDocument.documentElement || container === ownerDocument.body) {
+		viewTop = 0;
+		viewHeight = win.innerHeight;
+	} else {
+		viewTop = container.getBoundingClientRect().top + container.clientTop;
+		viewHeight = container.clientHeight;
+	}
+	const viewBottom = viewTop + viewHeight;
+	let delta = 0;
+	if (elRect.top < viewTop) delta = elRect.top - viewTop;
+	else if (elRect.bottom > viewBottom) delta = Math.min(elRect.bottom - viewBottom, elRect.top - viewTop);
+	if (delta !== 0) container.scrollTop += delta;
+};
 var removeSelectedClassName = (doc) => {
 	const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
 	if (oldEl) {
@@ -189,4 +216,4 @@ var getBorderWidth = (el) => {
 	};
 };
 //#endregion
-export { addSelectedClassName, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { addSelectedClassName, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, scrollElementIntoView, up };