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

package/src/utils/editor.ts

@@ -35,7 +35,7 @@ import {
   isValueIncludeDataSource,
 } from '@tmagic/utils';
 
-import type { EditorNodeInfo } from '@editor/type';
+import type { EditorNodeInfo, StepValue } from '@editor/type';
 import { LayerOffset, Layout } from '@editor/type';
 
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
@@ -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);
     }
   }
 
@@ -684,3 +750,43 @@ export const classifyDragSources = (
 
   return { sameParentIndices, crossParentConfigs, aborted: false };
 };
+
+/**
+ * 给「回滚」生成的新 step 用的简短描述生成器。
+ * 与 UI 层 `describePageStep` 同义，但避免 service 反向依赖 layouts/，故放在此工具函数中。
+ */
+export const describeStepForRevert = (step: StepValue): string => {
+  const items = step.diff ?? [];
+  // 在可读名后拼接组件 id，便于在历史面板中精确定位被回滚的组件；id 缺失时退化为仅展示名称。
+  const withId = (node: MNode | undefined, label: string): string => {
+    const id = node?.id;
+    if (id === undefined || id === null || `${id}` === '') return label;
+    return label ? `${label}（id: ${id}）` : `id: ${id}`;
+  };
+  switch (step.opType) {
+    case 'add': {
+      const count = items.length;
+      const node = items[0]?.newSchema;
+      const label = node?.name || node?.type || '';
+      return `撤回新增 ${count} 个节点${count === 1 ? `（${withId(node, label)}）` : ''}`;
+    }
+    case 'remove': {
+      const count = items.length;
+      const node = items[0]?.oldSchema;
+      const label = node?.name || node?.type || '';
+      return `还原已删除的 ${count} 个节点${count === 1 ? `（${withId(node, label)}）` : ''}`;
+    }
+    case 'update':
+    default: {
+      if (items.length === 1) {
+        const { newSchema, oldSchema, changeRecords } = items[0];
+        const node = newSchema || oldSchema;
+        const label = newSchema?.name || newSchema?.type || oldSchema?.name || oldSchema?.type || '';
+        const target = withId(node, label);
+        const propPath = changeRecords?.[0]?.propPath;
+        return propPath ? `还原 ${target} · ${propPath}` : `还原 ${target}`;
+      }
+      return `还原 ${items.length} 个节点的修改`;
+    }
+  }
+};

package/src/utils/event.ts

@@ -0,0 +1,237 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { EventOption, Id, MComponent, MContainer } from '@tmagic/core';
+import type { CascaderOption } from '@tmagic/form';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
+
+import dataSourceService from '@editor/services/dataSource';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import { getCascaderOptionsFromFields } from '@editor/utils/data-source';
+
+export const EVENT_NAME_VALUE_SEPARATOR = '.';
+
+export type EventNameSelectOption = { text: string; value: string };
+export type EventNameOption = EventOption | CascaderOption | EventNameSelectOption;
+
+/** 与 EventSelect 中 checkStrictly 一致：component 为 false，其余为 true */
+export const isEventNameCheckStrictly = (src?: string) => src !== 'component';
+
+/** 将动作 method 值规范为与 collectEventNameOptionValues 一致的字符串（cascader 无 valueSeparator 时存数组） */
+export const normalizeCompActionValue = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+  }
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  return `${value}`;
+};
+
+/**
+ * 组装事件名称下拉/级联 options，与 EventSelect 默认 eventNameConfig.options 逻辑一致。
+ */
+export const getEventNameOptions = (
+  src: string | undefined,
+  formValue: Record<string, any> = {},
+): EventNameOption[] => {
+  if (!formValue.type) {
+    return [];
+  }
+
+  if (src === 'component') {
+    const sourceNode = editorService.getNodeById(formValue.id);
+    let events: EventOption[] | CascaderOption[] = eventsService.getEvent(formValue.type, { node: sourceNode }) || [];
+
+    if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+      const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+      if (!pageFragment) {
+        return [];
+      }
+
+      events = [
+        {
+          label: pageFragment.name || '页面片容器',
+          value: pageFragment.id,
+          children: events,
+        },
+      ];
+
+      (pageFragment.items || []).forEach((item) => {
+        traverseNode<MComponent | MContainer>(item, (current) => {
+          if (!current.type) {
+            return;
+          }
+
+          const node = editorService.getNodeById(current.id) || current;
+          const nodeEvents = eventsService.getEvent(current.type, { node }) || [];
+          (events as CascaderOption[]).push({
+            label: `${current.name}_${current.id}`,
+            value: `${current.id}`,
+            children: nodeEvents,
+          });
+        });
+      });
+
+      return events;
+    }
+
+    return (events as EventOption[]).map((option) => ({
+      text: option.label,
+      value: option.value,
+    }));
+  }
+
+  if (src === 'datasource') {
+    const events: EventNameOption[] = dataSourceService.getFormEvent(formValue.type) || [];
+    const dataSource = dataSourceService.getDataSourceById(formValue.id);
+    const fields = dataSource?.fields || [];
+
+    if (fields.length > 0) {
+      return [
+        ...events,
+        {
+          label: '数据变化',
+          value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+          children: getCascaderOptionsFromFields(fields),
+        },
+      ];
+    }
+
+    return events;
+  }
+
+  return [];
+};
+
+/** 将 select / cascader options 展平为最终写入 name 的字符串集合（cascader 用 `.` 拼接） */
+export const collectEventNameOptionValues = (
+  options: EventNameOption[],
+  checkStrictly: boolean,
+  prefix: any[] = [],
+  result: Set<string> = new Set(),
+): Set<string> => {
+  options.forEach((option) => {
+    if (typeof option?.value === 'undefined') {
+      return;
+    }
+
+    const path = [...prefix, option.value];
+    const joined = path.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+    const children = 'children' in option ? option.children : undefined;
+
+    if (Array.isArray(children) && children.length) {
+      if (checkStrictly) {
+        result.add(joined);
+      }
+      collectEventNameOptionValues(children as EventNameOption[], checkStrictly, path, result);
+      return;
+    }
+
+    result.add(joined);
+  });
+
+  return result;
+};
+
+/**
+ * 解析 event-select 允许的 name 集合。
+ * 自定义 eventNameConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getEventNameAllowedValues = (
+  config: { src?: string; eventNameConfig?: { options?: unknown } } = {},
+  formValue: Record<string, any> = {},
+): Set<string> | null => {
+  if (typeof config.eventNameConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  if (config.src !== 'component' && config.src !== 'datasource') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getEventNameOptions(config.src, formValue), isEventNameCheckStrictly(config.src));
+};
+
+/**
+ * 组装联动组件动作下拉/级联 options，与 EventSelect 默认 compActionConfig.options 逻辑一致。
+ */
+export const getCompActionOptions = (toId?: Id): EventNameOption[] => {
+  if (typeof toId === 'undefined' || toId === null || toId === '') {
+    return [];
+  }
+
+  const node = editorService.getNodeById(toId);
+  if (!node?.type) {
+    return [];
+  }
+
+  let methods: EventOption[] | CascaderOption[] = eventsService.getMethod(node.type, { targetId: toId, node }) || [];
+
+  if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+    const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+    if (!pageFragment) {
+      return [];
+    }
+
+    methods = [];
+    (pageFragment.items || []).forEach((item: MComponent | MContainer) => {
+      traverseNode<MComponent | MContainer>(item, (current) => {
+        const node = editorService.getNodeById(current.id) || current;
+
+        if (!current.type) {
+          return;
+        }
+
+        const nodeMethods = eventsService.getMethod(current.type, { targetId: current.id, node }) || [];
+        if (!nodeMethods.length) {
+          return;
+        }
+
+        (methods as CascaderOption[]).push({
+          label: `${current.name}_${current.id}`,
+          value: `${current.id}`,
+          children: nodeMethods,
+        });
+      });
+    });
+
+    return methods;
+  }
+
+  return (methods as EventOption[]).map((method) => ({
+    text: method.label,
+    value: method.value,
+  }));
+};
+
+/**
+ * 解析 event-select 联动组件动作允许的 method 集合。
+ * 自定义 compActionConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getCompActionAllowedValues = (
+  config: { src?: string; compActionConfig?: { options?: unknown } } = {},
+  model: { to?: Id } = {},
+): Set<string> | null => {
+  if (typeof config.compActionConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getCompActionOptions(model.to), isEventNameCheckStrictly(config.src));
+};