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

package/src/type.ts

@@ -335,6 +335,7 @@ export interface EditorNodeInfo {
   node: MNode | null;
   parent: MContainer | null;
   page: MPage | MPageFragment | null;
+  path: MNode[];
 }
 // #endregion EditorNodeInfo
 
@@ -736,6 +737,14 @@ export type HistoryOpSource =
   | (string & {});
 // #endregion HistoryOpSource
 
+// #region DslOpWithHistoryIdsResult
+/** *AndGetHistoryId 系列方法返回值：原操作结果 + 本次写入历史记录的 uuid 列表（未入栈时为 `[]`）。 */
+export type DslOpWithHistoryIdsResult<T> = {
+  result: T;
+  historyIds: string[];
+};
+// #endregion DslOpWithHistoryIdsResult
+
 // #region StepDiffItem
 /**
  * 单条变更的 diff 描述，统一表达「页面节点 / 代码块 / 数据源」的变化内容，
@@ -953,32 +962,26 @@ export interface PageHistoryGroup {
 }
 
 /**
- * 代码块历史面板分组。
- * - 同一 codeBlockId 的栈内，相邻的 'update' 操作会合并成一个 group；
- * - 'add' / 'remove' 始终独立成组（语义上是一次性事件）。
- */
-export interface CodeBlockHistoryGroup {
-  kind: 'code-block';
-  /** 关联的 codeBlock id */
-  id: Id;
-  /** 该分组的操作类型 */
-  opType: HistoryOpType;
-  /** 组内所有步骤，按时间正序 */
-  steps: { step: CodeBlockStepValue; index: number; applied: boolean; isCurrent?: boolean }[];
-  /** 组内最后一步是否已应用，用于整组的状态展示 */
-  applied: boolean;
-  /** 是否为当前所在的分组（包含该栈最近一次已应用步骤的那一组）。 */
-  isCurrent?: boolean;
-}
-
-/**
- * 数据源历史面板分组，结构同 CodeBlockHistoryGroup。
+ * 数据源 / 代码块历史面板分组（按 id 分栈展示）。
+ * 二者结构完全一致，仅 `kind` 与 step 类型不同，统一由该泛型描述：
+ * - 数据源：`StackHistoryGroup<DataSourceStepValue, 'data-source'>`；
+ * - 代码块：`StackHistoryGroup<CodeBlockStepValue, 'code-block'>`。
+ *
+ * 每条操作记录独立成组，不做相邻合并（与页面历史 {@link PageHistoryGroup} 不同），故 `steps` 恒为单元素。
  */
-export interface DataSourceHistoryGroup {
-  kind: 'data-source';
+export interface StackHistoryGroup<
+  T extends BaseStepValue = BaseStepValue,
+  K extends 'code-block' | 'data-source' = 'code-block' | 'data-source',
+> {
+  /** 区分代码块 / 数据源。 */
+  kind: K;
+  /** 关联的代码块 / 数据源 id。 */
   id: Id;
+  /** 该分组的操作类型。 */
   opType: HistoryOpType;
-  steps: { step: DataSourceStepValue; index: number; applied: boolean; isCurrent?: boolean }[];
+  /** 组内所有步骤，按时间正序（不做相邻合并，恒为单元素）。 */
+  steps: { step: T; index: number; applied: boolean; isCurrent?: boolean }[];
+  /** 组内最后一步是否已应用，用于整组的状态展示。 */
   applied: boolean;
   /** 是否为当前所在的分组（包含该栈最近一次已应用步骤的那一组）。 */
   isCurrent?: boolean;
@@ -1147,6 +1150,8 @@ export type SyncHookPlugin<
 
 export interface EventBusEvent {
   'edit-data-source': [id: string];
+  'edit-data-source-method': [id: string, methodName: string];
+  'edit-data-source-field': [id: string, fieldPath: string[]];
   'remove-data-source': [id: string];
   'edit-code': [id: string];
 }
@@ -1180,7 +1185,11 @@ export type CustomContentMenuFunction = (
 ) => (MenuButton | MenuComponent)[];
 
 export interface EditorEvents {
-  'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
+  'root-change': [
+    value: StoreState['root'],
+    preValue?: StoreState['root'],
+    options?: { historySource?: HistoryOpSource },
+  ];
   select: [node: MNode | null];
   add: [nodes: MNode[]];
   remove: [nodes: MNode[]];
@@ -1281,8 +1290,11 @@ export interface DiffDialogPayload {
  * 各自实现一份，作为整体注入，避免把 describe* / isStep* 拆成多个独立 props 反复透传。
  */
 export interface HistoryRowDescriptor<T extends BaseStepValue = BaseStepValue> {
-  /** 组级描述文案生成器，接收一个 group，返回展示文本。 */
-  describeGroup: (_group: any) => string;
+  /**
+   * 组级描述文案生成器，接收一个 group，返回展示文本。
+   * 不传时回退到对组内最后一步调用 {@link describeStep}（适用于不做相邻合并、每组恒为单步的历史，如数据源/代码块）。
+   */
+  describeGroup?: (_group: any) => string;
   /** 单步描述文案生成器，接收一个 step，返回展示文本（合并组展开后的子步列表用）。 */
   describeStep: (_step: T) => string;
   /** 判断某个 step 是否可查看差异（前后值都存在）。不传则一律不展示差异入口。 */

package/src/utils/data-source/index.ts

@@ -10,6 +10,7 @@ const dataSourceFormConfig: TabConfig = {
   items: [
     {
       title: '数据定义',
+      status: 'fields',
       items: [
         {
           name: 'fields',
@@ -20,6 +21,7 @@ const dataSourceFormConfig: TabConfig = {
     },
     {
       title: '方法定义',
+      status: 'methods',
       items: [
         {
           name: 'methods',

package/src/utils/editor.ts

@@ -132,6 +132,34 @@ const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) =
   return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
 
+// 同时存在一对相反的定位属性（如 left/right）时只保留一个，避免元素被拉伸
+const removeConflictPosition = (style: Record<string, any>, primary: string, secondary: string) => {
+  // '' / 0 / undefined / null 视为无效值
+  const isInvalid = (value: any) => value === '' || value === 0 || value === undefined || 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) {
+    // 都是无效值时优先保留 0，否则保留 primary（left/top）
+    if (secondaryValue === 0 && primaryValue !== 0) {
+      delete style[primary];
+    } else {
+      delete style[secondary];
+    }
+  }
+};
+
 export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
   if (layout === Layout.ABSOLUTE) {
     const newStyle: Record<string, any> = {
@@ -139,6 +167,9 @@ export const getInitPositionStyle = (style: Record<string, any> = {}, layout: La
       position: 'absolute',
     };
 
+    removeConflictPosition(newStyle, 'left', 'right');
+    removeConflictPosition(newStyle, 'top', 'bottom');
+
     if (typeof newStyle.left === 'undefined' && typeof newStyle.right === 'undefined') {
       newStyle.left = 0;
     }
@@ -178,43 +209,68 @@ export const setLayout = (node: MNode, layout: Layout) => {
   return node;
 };
 
-export const change2Fixed = (node: MNode, root: MApp) => {
-  const style = {
-    ...(node.style || {}),
-  };
+type PositionKey = 'left' | 'top' | 'right' | 'bottom';
 
-  const path = getNodePath(node.id, root.items);
-  const offset = {
-    left: 0,
-    top: 0,
-  };
+// 判断 style 是否显式设置了某个定位属性，使用 typeof 判断以避免将 0（如 right: 0）误判为未设置
+const hasPositionValue = (style: Record<string, any> | undefined, key: PositionKey): boolean =>
+  typeof style?.[key] !== 'undefined' && style?.[key] !== '';
 
-  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);
+/**
+ * 沿节点路径累加（或抵消）某一方向上的定位偏移量
+ * 当路径上的祖先使用了反方向定位（例如计算 left 时祖先用了 right）或非数值定位时，
+ * 无法简单地通过求和换算坐标，此时返回 0 表示放弃补偿、保持原值
+ * @param path 从根到目标节点的路径（含节点自身）
+ * @param dir 需要累加的定位方向
+ * @param opposite 反方向定位属性
+ * @param sign change2Fixed 取 1（累加祖先偏移），Fixed2Other 取 -1（抵消祖先偏移）
+ * @param init 偏移量初始值
+ */
+const accumulatePositionOffset = (
+  path: MNode[],
+  dir: PositionKey,
+  opposite: PositionKey,
+  sign: 1 | -1,
+  init = 0,
+): number => {
+  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;
+};
 
-  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);
-    }
-  }
+export const change2Fixed = (node: MNode, path: MNode[]) => {
+  const style = {
+    ...(node.style || {}),
+  };
 
-  if (offset.left) {
-    style.left = offset.left;
+  // 水平方向：以 left 锚定则累加祖先 left，以 right 锚定则累加祖先 right
+  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 (offset.top) {
-    style.top = offset.top;
+  // 垂直方向：以 top 锚定则累加祖先 top，以 bottom 锚定则累加祖先 bottom
+  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;
+    }
   }
 
   return style;
@@ -222,34 +278,29 @@ export const change2Fixed = (node: MNode, root: MApp) => {
 
 export const Fixed2Other = async (
   node: MNode,
-  root: MApp,
+  path: MNode[],
   getLayout: (parent: MNode, node?: MNode) => Promise<Layout>,
 ) => {
-  const path = getNodePath(node.id, root.items);
   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 (!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 (!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)) {
+    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 || {};
@@ -269,6 +320,14 @@ export const Fixed2Other = async (
       style.top = offset.top;
     }
 
+    if (offset.right) {
+      style.right = offset.right;
+    }
+
+    if (offset.bottom) {
+      style.bottom = offset.bottom;
+    }
+
     return {
       ...style,
       position: 'absolute',
@@ -316,11 +375,18 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
     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;
 };
 
 // 序列化配置
@@ -460,11 +526,11 @@ export const resolveSelectedNode = (
     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 };
+  return { node, parent, page, path };
 };
 
 /**
@@ -479,16 +545,16 @@ export const resolveSelectedNode = (
 export const toggleFixedPosition = async (
   dist: MNode,
   src: MNode,
-  root: MApp,
+  path: MNode[],
   getLayoutFn: (parent: MNode, node?: MNode | null) => Promise<Layout>,
 ): Promise<MNode> => {
   const newConfig = cloneDeep(dist);
 
   if (!isPop(src) && newConfig.style?.position) {
     if (isFixed(newConfig.style) && !isFixed(src.style || {})) {
-      newConfig.style = change2Fixed(newConfig, root);
+      newConfig.style = change2Fixed(newConfig, path);
     } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
-      newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
+      newConfig.style = await Fixed2Other(newConfig, path, getLayoutFn);
     }
   }
 

package/src/utils/history.ts

@@ -17,6 +17,7 @@
  */
 
 import { cloneDeep } from 'lodash-es';
+import serialize from 'serialize-javascript';
 
 import type { Id } from '@tmagic/core';
 import type { ChangeRecord } from '@tmagic/form';
@@ -25,9 +26,9 @@ import { guid } from '@tmagic/utils';
 import type {
   BaseStepValue,
   HistoryOpSource,
-  HistoryOpType,
   PageHistoryGroup,
   PageHistoryStepEntry,
+  StackHistoryGroup,
   StepDiffItem,
   StepValue,
 } from '@editor/type';
@@ -121,8 +122,7 @@ export const markStackSaved = <S extends { saved?: boolean }>(undoRedo?: UndoRed
 
 /**
  * 把单个「按 id 分栈」的历史栈（代码块 / 数据源）拆成若干 group：
- * - 把"新增/删除"独立成组（语义上属于一次性事件，不应与 update 合并）；
- * - 连续 'update' 合并到同一组，组内 steps 顺序就是发生顺序。
+ * 每条操作记录独立成组，不做相邻 update 合并（与页面历史的合并策略不同）。
  *
  * 代码块与数据源除 `kind` 外结构完全一致，统一由本方法处理；`kind` 决定返回的具体分组类型。
  */
@@ -131,46 +131,20 @@ export const mergeStackSteps = <S extends BaseStepValue, K extends 'code-block'
   id: Id,
   list: S[],
   cursor: number,
-): {
-  kind: K;
-  id: Id;
-  opType: HistoryOpType;
-  steps: { step: S; index: number; applied: boolean; isCurrent?: boolean }[];
-  applied: boolean;
-  isCurrent?: boolean;
-}[] => {
-  type Group = {
-    kind: K;
-    id: Id;
-    opType: HistoryOpType;
-    steps: { step: S; index: number; applied: boolean; isCurrent?: boolean }[];
-    applied: boolean;
-    isCurrent?: boolean;
-  };
-  const groups: Group[] = [];
-  let current: Group | null = null;
+): StackHistoryGroup<S, K>[] => {
   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({ 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);
-    }
+    return {
+      kind,
+      id,
+      opType: step.opType,
+      steps: [{ step, index, applied, isCurrent }],
+      applied,
+      isCurrent,
+    };
   });
-  return groups;
 };
 
 /**
@@ -254,11 +228,25 @@ export const detectPageTargetName = (step: StepValue): string | undefined => {
   return undefined;
 };
 
-/** 把 `Record<Id, UndoRedo>` 整体序列化为 `Record<Id, SerializedUndoRedo>`。 */
-export const serializeStacks = <T>(stacks: Record<Id, UndoRedo<T>>) => {
+/**
+ * 把 `Record<Id, UndoRedo>` 整体序列化为 `Record<Id, SerializedUndoRedo>`。
+ *
+ * 序列化（深克隆）的同一趟里，只把每条 step 中可能含函数的 `diff` 用 serialize-javascript 序列化成字符串，
+ * 其余字段（uuid / opType / timestamp / `modifiedNodeIds` Map 等）原样保留，交给 IndexedDB 结构化克隆。
+ * 这样既能写入函数，又避免序列化整份快照的开销；读取时再由 {@link parseStacksStepDiff} 还原 diff。
+ * 不含 `diff` 的元素（如通用栈）原样透传。
+ */
+export const serializeStacks = <T extends { diff?: unknown }>(stacks: Record<Id, UndoRedo<T>>) => {
   const result: Record<Id, ReturnType<UndoRedo<T>['serialize']>> = {};
   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 === undefined ? step : Object.assign({}, step, { diff: serialize(step.diff) }),
+      ),
+    };
   });
   return result;
 };
@@ -266,15 +254,27 @@ export const serializeStacks = <T>(stacks: Record<Id, UndoRedo<T>>) => {
 /**
  * 把 `Record<Id, SerializedUndoRedo>` 整体还原为 `Record<Id, UndoRedo>`。
  * 还原时把每个栈的游标定位到最近一条已保存（`saved === true`）记录之后。
+ *
+ * 与 {@link serializeStacks} 相反：当传入 `parse`（parseDSL）时，把每条 step 中以字符串形式存储的 `diff`
+ * 解析回真实对象（含函数）；不含 `diff` 的元素（如通用栈）原样透传。
  */
 export const deserializeStacks = <T extends { saved?: boolean }>(
   stacks: Record<Id, ReturnType<UndoRedo<T>['serialize']>> = {},
+  parse?: (serialized: string) => unknown,
 ): Record<Id, UndoRedo<T>> => {
   const result: Record<Id, UndoRedo<T>> = {};
   Object.entries(stacks).forEach(([id, serialized]) => {
-    if (serialized) {
-      result[id] = UndoRedo.fromSerialized<T>(serialized, { isSavedStep: (element) => element.saved === true });
-    }
+    if (!serialized) return;
+    const elementList = parse
+      ? serialized.elementList.map((step) => {
+          const { diff } = step as { diff?: unknown };
+          return typeof diff === 'string' ? Object.assign({}, step, { diff: parse(`(${diff})`) }) : step;
+        })
+      : serialized.elementList;
+    result[id] = UndoRedo.fromSerialized<T>(
+      { ...serialized, elementList },
+      { isSavedStep: (element) => element.saved === true },
+    );
   });
   return result;
 };
@@ -296,3 +296,6 @@ export const getOrCreateStack = <T>(stacks: Record<Id, UndoRedo<T>>, id: Id): Un
 export const undoFloor = (undoRedo: UndoRedo<StepValue>): number => {
   return undoRedo.getElementList()[0]?.opType === 'initial' ? 1 : 0;
 };
+
+/** 将单次 push 产生的 history uuid（或 null）转为 *AndGetHistoryId 返回用的 uuid 列表。 */
+export const getLastPushedHistoryIds = (historyId: string | null): string[] => (historyId ? [historyId] : []);