@tmagic/editor 1.8.0-beta.5 → 1.8.0-beta.7

package/dist/es/utils/editor.js

@@ -74,12 +74,26 @@ var getMiddleTop = (node, parentNode, stage) => {
 	}
 	return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
+var removeConflictPosition = (style, primary, secondary) => {
+	const isInvalid = (value) => value === "" || value === 0 || value === void 0 || value === null;
+	if (!(primary in style) || !(secondary in style)) return;
+	const primaryValue = style[primary];
+	const secondaryValue = style[secondary];
+	const primaryInvalid = isInvalid(primaryValue);
+	const secondaryInvalid = isInvalid(secondaryValue);
+	if (primaryInvalid && !secondaryInvalid) delete style[primary];
+	else if (secondaryInvalid && !primaryInvalid) delete style[secondary];
+	else if (primaryInvalid && secondaryInvalid) if (secondaryValue === 0 && primaryValue !== 0) delete style[primary];
+	else delete style[secondary];
+};
 var getInitPositionStyle = (style = {}, layout) => {
 	if (layout === Layout.ABSOLUTE) {
 		const newStyle = {
 			...style,
 			position: "absolute"
 		};
+		removeConflictPosition(newStyle, "left", "right");
+		removeConflictPosition(newStyle, "top", "bottom");
 		if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") newStyle.left = 0;
 		return newStyle;
 	}
@@ -104,58 +118,63 @@ var setLayout = (node, layout) => {
 	}
 	return node;
 };
-var change2Fixed = (node, root) => {
+var hasPositionValue = (style, key) => typeof style?.[key] !== "undefined" && style?.[key] !== "";
+/**
+* 沿节点路径累加（或抵消）某一方向上的定位偏移量
+* 当路径上的祖先使用了反方向定位（例如计算 left 时祖先用了 right）或非数值定位时，
+* 无法简单地通过求和换算坐标，此时返回 0 表示放弃补偿、保持原值
+* @param path 从根到目标节点的路径（含节点自身）
+* @param dir 需要累加的定位方向
+* @param opposite 反方向定位属性
+* @param sign change2Fixed 取 1（累加祖先偏移），Fixed2Other 取 -1（抵消祖先偏移）
+* @param init 偏移量初始值
+*/
+var accumulatePositionOffset = (path, dir, opposite, sign, init = 0) => {
+	let offset = init;
+	for (const value of path) {
+		if (hasPositionValue(value.style, opposite) || !isNumber(value.style?.[dir] || 0)) return 0;
+		offset = offset + sign * Number(value.style?.[dir] || 0);
+	}
+	return offset;
+};
+var change2Fixed = (node, path) => {
 	const style = { ...node.style || {} };
-	const path = getNodePath(node.id, root.items);
-	const offset = {
-		left: 0,
-		top: 0
-	};
-	if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
-		if (value.style?.right || !isNumber(value.style?.left || 0)) {
-			offset.left = 0;
-			break;
-		}
-		offset.left = offset.left + Number(value.style?.left || 0);
+	if (!hasPositionValue(node.style, "right") && isNumber(node.style?.left || 0)) {
+		const left = accumulatePositionOffset(path, "left", "right", 1);
+		if (left) style.left = left;
+	} else if (hasPositionValue(node.style, "right") && isNumber(node.style?.right || 0)) {
+		const right = accumulatePositionOffset(path, "right", "left", 1);
+		if (right) style.right = right;
 	}
-	if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
-		if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
-			offset.top = 0;
-			break;
-		}
-		offset.top = offset.top + Number(value.style?.top || 0);
+	if (!hasPositionValue(node.style, "bottom") && isNumber(node.style?.top || 0)) {
+		const top = accumulatePositionOffset(path, "top", "bottom", 1);
+		if (top) style.top = top;
+	} else if (hasPositionValue(node.style, "bottom") && isNumber(node.style?.bottom || 0)) {
+		const bottom = accumulatePositionOffset(path, "bottom", "top", 1);
+		if (bottom) style.bottom = bottom;
 	}
-	if (offset.left) style.left = offset.left;
-	if (offset.top) style.top = offset.top;
 	return style;
 };
-var Fixed2Other = async (node, root, getLayout) => {
-	const path = getNodePath(node.id, root.items);
+var Fixed2Other = async (node, path, getLayout) => {
 	const cur = path.pop();
 	const offset = {
-		left: cur?.style?.left || 0,
-		top: cur?.style?.top || 0
+		left: 0,
+		top: 0,
+		right: 0,
+		bottom: 0
 	};
-	if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
-		if (value.style?.right || !isNumber(value.style?.left || 0)) {
-			offset.left = 0;
-			break;
-		}
-		offset.left = offset.left - Number(value.style?.left || 0);
-	}
-	if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
-		if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
-			offset.top = 0;
-			break;
-		}
-		offset.top = offset.top - Number(value.style?.top || 0);
-	}
+	if (!hasPositionValue(node.style, "right") && isNumber(node.style?.left || 0)) offset.left = accumulatePositionOffset(path, "left", "right", -1, Number(cur?.style?.left || 0));
+	else if (hasPositionValue(node.style, "right") && isNumber(node.style?.right || 0)) offset.right = accumulatePositionOffset(path, "right", "left", -1, Number(cur?.style?.right || 0));
+	if (!hasPositionValue(node.style, "bottom") && isNumber(node.style?.top || 0)) offset.top = accumulatePositionOffset(path, "top", "bottom", -1, Number(cur?.style?.top || 0));
+	else if (hasPositionValue(node.style, "bottom") && isNumber(node.style?.bottom || 0)) offset.bottom = accumulatePositionOffset(path, "bottom", "top", -1, Number(cur?.style?.bottom || 0));
 	const style = node.style || {};
 	const parent = path.pop();
 	if (!parent) return getRelativeStyle(style);
 	if (await getLayout(parent) !== Layout.RELATIVE) {
 		if (offset.left) style.left = offset.left;
 		if (offset.top) style.top = offset.top;
+		if (offset.right) style.right = offset.right;
+		if (offset.bottom) style.bottom = offset.bottom;
 		return {
 			...style,
 			position: "absolute"
@@ -187,11 +206,11 @@ var fixNodeLeft = (config, parent, doc) => {
 };
 var fixNodePosition = (config, parent, stage) => {
 	if (config.style?.position !== "absolute") return config.style;
-	return {
-		...config.style || {},
-		top: getMiddleTop(config, parent, stage),
-		left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
-	};
+	const style = { ...config.style || {} };
+	const baseStyle = config.style || {};
+	if (!("right" in baseStyle)) style.left = fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document);
+	if (!("top" in baseStyle) && !("bottom" in baseStyle)) style.top = getMiddleTop(config, parent, stage);
+	return style;
 };
 var serializeConfig = (config) => serialize(config, {
 	space: 2,
@@ -268,13 +287,14 @@ var buildChangeRecords = (value, basePath) => {
 var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
 	const id = typeof config === "string" || typeof config === "number" ? config : config.id;
 	if (!id) throw new Error("没有ID，无法选中");
-	const { node, parent, page } = getNodeInfoFn(id);
+	const { node, parent, page, path } = getNodeInfoFn(id);
 	if (!node) throw new Error("获取不到组件信息");
 	if (node.id === rootId) throw new Error("不能选根节点");
 	return {
 		node,
 		parent,
-		page
+		page,
+		path
 	};
 };
 /**
@@ -286,11 +306,11 @@ var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
 * @param getLayoutFn 获取父节点布局方式的回调函数
 * @returns 处理后的节点配置（深拷贝）
 */
-var toggleFixedPosition = async (dist, src, root, getLayoutFn) => {
+var toggleFixedPosition = async (dist, src, path, getLayoutFn) => {
 	const newConfig = cloneDeep$1(dist);
 	if (!isPop(src) && newConfig.style?.position) {
-		if (isFixed(newConfig.style) && !isFixed(src.style || {})) newConfig.style = change2Fixed(newConfig, root);
-		else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
+		if (isFixed(newConfig.style) && !isFixed(src.style || {})) newConfig.style = change2Fixed(newConfig, path);
+		else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig, path, getLayoutFn);
 	}
 	return newConfig;
 };

package/dist/es/utils/history.js

@@ -1,6 +1,7 @@
 import { UndoRedo } from "./undo-redo.js";
 import { guid } from "@tmagic/utils";
 import { cloneDeep } from "lodash-es";
+import serialize from "serialize-javascript";
 //#region packages/editor/src/utils/history.ts
 /**
 * 「回滚」生成的新 step 简短描述。代码块 / 数据源共用。
@@ -66,46 +67,29 @@ var markStackSaved = (undoRedo) => {
 };
 /**
 * 把单个「按 id 分栈」的历史栈（代码块 / 数据源）拆成若干 group：
-* - 把"新增/删除"独立成组（语义上属于一次性事件，不应与 update 合并）；
-* - 连续 'update' 合并到同一组，组内 steps 顺序就是发生顺序。
+* 每条操作记录独立成组，不做相邻 update 合并（与页面历史的合并策略不同）。
 *
 * 代码块与数据源除 `kind` 外结构完全一致，统一由本方法处理；`kind` 决定返回的具体分组类型。
 */
 var mergeStackSteps = (kind, id, list, cursor) => {
-	const groups = [];
-	let current = null;
 	const currentIndex = cursor - 1;
-	list.forEach((step, index) => {
-		const { opType } = step;
+	return list.map((step, index) => {
 		const applied = index < cursor;
 		const isCurrent = index === currentIndex;
-		if (opType === "update" && current?.opType === "update") {
-			current.steps.push({
+		return {
+			kind,
+			id,
+			opType: step.opType,
+			steps: [{
 				step,
 				index,
 				applied,
 				isCurrent
-			});
-			current.applied = applied;
-			if (isCurrent) current.isCurrent = true;
-		} else {
-			current = {
-				kind,
-				id,
-				opType,
-				steps: [{
-					step,
-					index,
-					applied,
-					isCurrent
-				}],
-				applied,
-				isCurrent
-			};
-			groups.push(current);
-		}
+			}],
+			applied,
+			isCurrent
+		};
 	});
-	return groups;
 };
 /**
 * 把页面栈拆成若干 group：
@@ -186,22 +170,45 @@ var detectPageTargetName = (step) => {
 		return items?.length ? `${items.length} 个节点` : void 0;
 	}
 };
-/** 把 `Record<Id, UndoRedo>` 整体序列化为 `Record<Id, SerializedUndoRedo>`。 */
+/**
+* 把 `Record<Id, UndoRedo>` 整体序列化为 `Record<Id, SerializedUndoRedo>`。
+*
+* 序列化（深克隆）的同一趟里，只把每条 step 中可能含函数的 `diff` 用 serialize-javascript 序列化成字符串，
+* 其余字段（uuid / opType / timestamp / `modifiedNodeIds` Map 等）原样保留，交给 IndexedDB 结构化克隆。
+* 这样既能写入函数，又避免序列化整份快照的开销；读取时再由 {@link parseStacksStepDiff} 还原 diff。
+* 不含 `diff` 的元素（如通用栈）原样透传。
+*/
 var serializeStacks = (stacks) => {
 	const result = {};
 	Object.entries(stacks).forEach(([id, undoRedo]) => {
-		if (undoRedo) result[id] = undoRedo.serialize();
+		if (!undoRedo) return;
+		const serialized = undoRedo.serialize();
+		result[id] = {
+			...serialized,
+			elementList: serialized.elementList.map((step) => step.diff === void 0 ? step : Object.assign({}, step, { diff: serialize(step.diff) }))
+		};
 	});
 	return result;
 };
 /**
 * 把 `Record<Id, SerializedUndoRedo>` 整体还原为 `Record<Id, UndoRedo>`。
 * 还原时把每个栈的游标定位到最近一条已保存（`saved === true`）记录之后。
+*
+* 与 {@link serializeStacks} 相反：当传入 `parse`（parseDSL）时，把每条 step 中以字符串形式存储的 `diff`
+* 解析回真实对象（含函数）；不含 `diff` 的元素（如通用栈）原样透传。
 */
-var deserializeStacks = (stacks = {}) => {
+var deserializeStacks = (stacks = {}, parse) => {
 	const result = {};
 	Object.entries(stacks).forEach(([id, serialized]) => {
-		if (serialized) result[id] = UndoRedo.fromSerialized(serialized, { isSavedStep: (element) => element.saved === true });
+		if (!serialized) return;
+		const elementList = parse ? serialized.elementList.map((step) => {
+			const { diff } = step;
+			return typeof diff === "string" ? Object.assign({}, step, { diff: parse(`(${diff})`) }) : step;
+		}) : serialized.elementList;
+		result[id] = UndoRedo.fromSerialized({
+			...serialized,
+			elementList
+		}, { isSavedStep: (element) => element.saved === true });
 	});
 	return result;
 };
@@ -219,5 +226,7 @@ var getOrCreateStack = (stacks, id) => {
 var undoFloor = (undoRedo) => {
 	return undoRedo.getElementList()[0]?.opType === "initial" ? 1 : 0;
 };
+/** 将单次 push 产生的 history uuid（或 null）转为 *AndGetHistoryId 返回用的 uuid 列表。 */
+var getLastPushedHistoryIds = (historyId) => historyId ? [historyId] : [];
 //#endregion
-export { createStackStep, describeRevertStep, deserializeStacks, detectPageTargetId, detectPageTargetName, detectStackOpType, getOrCreateStack, markStackSaved, mergePageSteps, mergeStackSteps, serializeStacks, undoFloor };
+export { createStackStep, describeRevertStep, deserializeStacks, detectPageTargetId, detectPageTargetName, detectStackOpType, getLastPushedHistoryIds, getOrCreateStack, markStackSaved, mergePageSteps, mergeStackSteps, serializeStacks, undoFloor };

package/dist/style.css

@@ -2093,9 +2093,12 @@ fieldset.m-fieldset .m-form-tip {
 .border-box-container .border-icon-container .border-icon + .border-icon {
   margin-left: 8px;
 }
+.border-box-container .border-icon-container .border-icon.configured {
+  border-color: var(--el-color-success, var(--td-success-color, #2ba471));
+}
 .border-box-container .border-icon-container .border-icon.active {
   border-width: 1px;
-  border-color: var(--el-color-primary);
+  border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
 }
 .border-box-container .border-icon-container .border-icon.border-icon-top {
   border-top-width: 2px;