@tmagic/stage 1.8.0-manmanyu.8 → 1.8.0

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/MoveableOptionsManager.js

@@ -81,7 +81,7 @@ var MoveableOptionsManager = class extends EventEmitter$1 {
 	*/
 	getDefaultOptions(isMultiSelect) {
 		const isSortable = this.mode === Mode.SORTABLE;
-		return merge({
+		const commonOptions = {
 			draggable: true,
 			resizable: true,
 			rootContainer: this.getRootContainer(),
@@ -97,7 +97,9 @@ var MoveableOptionsManager = class extends EventEmitter$1 {
 				right: this.container.clientWidth,
 				bottom: isSortable ? void 0 : this.container.clientHeight
 			}
-		}, isMultiSelect ? this.getMultiOptions() : this.getSingleOptions());
+		};
+		const differenceOptions = isMultiSelect ? this.getMultiOptions() : this.getSingleOptions();
+		return merge(commonOptions, differenceOptions);
 	}
 	/**
 	* 获取单选下的差异化参数

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);
@@ -242,11 +243,21 @@ var StageCore = class extends EventEmitter {
 			this.pageResizeObserver.observe(page);
 		}
 	}
+	/**
+	* page-el-update 后，若当前选中节点仍在新页面文档中且需要自动滚动，则重新触发 scrollIntoView
+	*/
+	scrollSelectedIntoViewAfterPageUpdate() {
+		const selected = this.actionManager?.getSelectedEl();
+		if (!selected?.isConnected) return;
+		if (!(this.autoScrollIntoView || selected.dataset.autoScrollIntoView)) return;
+		this.mask?.observerIntersection(selected);
+	}
 	getActionManagerConfig(config) {
 		return {
 			containerHighlightClassName: config.containerHighlightClassName,
 			containerHighlightDuration: config.containerHighlightDuration,
 			containerHighlightType: config.containerHighlightType,
+			containerHighlightAddOnly: config.containerHighlightAddOnly,
 			moveableOptions: config.moveableOptions,
 			container: this.mask.content,
 			disabledDragStart: config.disabledDragStart,
@@ -269,6 +280,7 @@ var StageCore = class extends EventEmitter {
 		this.renderer?.on("page-el-update", (el) => {
 			this.mask?.observe(el);
 			this.observePageResize(el);
+			this.scrollSelectedIntoViewAfterPageUpdate();
 			this.emit("page-el-update", el);
 		});
 	}

package/dist/es/StageDragResize.js

@@ -144,12 +144,14 @@ var StageDragResize = class extends MoveableOptionsManager {
 				timeout = void 0;
 			}
 			const parentEl = this.markContainerEnd();
-			if (this.dragStatus === StageDragStatus.ING) if (parentEl) this.update(false, parentEl);
-			else switch (this.mode) {
-				case Mode.SORTABLE:
-					this.sort();
-					break;
-				default: this.update();
+			if (this.dragStatus === StageDragStatus.ING) {
+				if (parentEl) this.update(false, parentEl);
+				else switch (this.mode) {
+					case Mode.SORTABLE:
+						this.sort();
+						break;
+					default: this.update();
+				}
 			}
 			this.dragStatus = StageDragStatus.END;
 			this.dragResizeHelper.destroyGhostEl();
@@ -202,9 +204,10 @@ var StageDragResize = class extends MoveableOptionsManager {
 		const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
 		const { top: oriTop } = this.target.getBoundingClientRect();
 		const deltaTop = top - oriTop;
-		if (Math.abs(deltaTop) >= this.target.clientHeight / 2) if (deltaTop > 0) this.emit("sort", down(deltaTop, this.target));
-		else this.emit("sort", up(deltaTop, this.target));
-		else {
+		if (Math.abs(deltaTop) >= this.target.clientHeight / 2) {
+			if (deltaTop > 0) this.emit("sort", down(deltaTop, this.target));
+			else this.emit("sort", up(deltaTop, this.target));
+		} else {
 			const id = getIdFromEl()(this.target);
 			id && this.emit("sort", {
 				src: id,

package/dist/es/StageFlashHighlight.js

@@ -99,4 +99,4 @@ var StageFlashHighlight = class {
 	}
 };
 //#endregion
-export { StageFlashHighlight as default };
+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
@@ -73,25 +73,38 @@ var StageMask = class extends Rule {
 	}
 	/**
 	* 初始化视窗和蒙层监听，监听元素是否在视窗区域、监听mask蒙层所在的wrapper大小变化
-	* @description 初始化视窗和蒙层监听
+	* @description 初始化视窗和蒙层监听；切换到新页面 DOM 时重置滚动
 	* @param page 页面Dom节点
 	*/
 	observe(page) {
 		if (!page) return;
+		const pageChanged = this.page !== page;
 		this.page = page;
 		this.initObserverIntersection();
 		this.initObserverWrapper();
+		if (pageChanged) {
+			this.pageScrollParent?.scrollTo({
+				top: 0,
+				left: 0
+			});
+			this.scrollTop = 0;
+			this.scrollLeft = 0;
+			this.scroll();
+		}
+		this.syncPageSize();
 	}
 	/**
-	* 处理页面大小变更，同步页面和mask大小
+	* 处理页面大小变更，同步页面和 mask 大小
+	* @description 仅处理当前 page 且仍挂载在文档中的 entry；非当前页、已卸载或宽高为 0 的回调会被忽略
 	* @param entries ResizeObserverEntry，获取页面最新大小
 	*/
 	pageResize(entries) {
-		const [entry] = entries;
-		const { clientHeight, clientWidth } = entry.target;
-		this.setHeight(clientHeight);
-		this.setWidth(clientWidth);
-		this.scroll();
+		if (!this.page || !entries.length) return;
+		const entry = entries.find((item) => item.target === this.page);
+		if (!entry) return;
+		const { target } = entry;
+		if (!target.isConnected) return;
+		this.applyPageSize(target.clientWidth, target.clientHeight);
 	}
 	/**
 	* 监听一个组件是否在画布可视区域内
@@ -118,8 +131,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();
@@ -132,6 +145,7 @@ var StageMask = class extends Rule {
 		this.content?.remove();
 		this.page = null;
 		this.pageScrollParent = null;
+		this.intersectionObserver?.disconnect();
 		this.wrapperResizeObserver?.disconnect();
 	}
 	on(eventName, listener) {
@@ -202,6 +216,22 @@ var StageMask = class extends Rule {
 		this.content.dispatchEvent(event);
 	}
 	/**
+	* 从当前页面同步蒙层宽高，并修正滚动偏移
+	*/
+	syncPageSize() {
+		if (!this.page?.isConnected) return;
+		this.applyPageSize(this.page.clientWidth, this.page.clientHeight);
+	}
+	/**
+	* 应用页面尺寸到蒙层；宽高为 0 时忽略，避免切换/布局过程中把 editor-mask 置空
+	*/
+	applyPageSize(clientWidth, clientHeight) {
+		if (clientWidth <= 0 || clientHeight <= 0) return;
+		this.setHeight(clientHeight);
+		this.setWidth(clientWidth);
+		this.scroll();
+	}
+	/**
 	* 设置蒙层高度
 	* @param height 高度
 	*/

package/dist/es/index.js

@@ -1,5 +1,5 @@
 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 { 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, 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 };
+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/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 };