@tmagic/editor 1.7.8 → 1.7.10

package/src/services/history.ts

@@ -56,15 +56,7 @@ class History extends BaseService {
     this.state.pageId = page.id;
 
     if (!this.state.pageSteps[this.state.pageId]) {
-      const undoRedo = new UndoRedo<StepValue>();
-
-      undoRedo.pushElement({
-        data: page,
-        modifiedNodeIds: new Map(),
-        nodeId: page.id,
-      });
-
-      this.state.pageSteps[this.state.pageId] = undoRedo;
+      this.state.pageSteps[this.state.pageId] = new UndoRedo<StepValue>();
     }
 
     this.setCanUndoRedo();

package/src/type.ts

@@ -20,10 +20,10 @@ import type { Component } from 'vue';
 import type EventEmitter from 'events';
 import type * as Monaco from 'monaco-editor';
 import type { default as Sortable, Options, SortableEvent } from 'sortablejs';
-import type { PascalCasedProperties } from 'type-fest';
+import type { PascalCasedProperties, Writable } from 'type-fest';
 
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
-import type { FormConfig, TableColumnConfig } from '@tmagic/form';
+import type { ChangeRecord, FormConfig, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -164,6 +164,8 @@ export interface StageOptions {
   disabledMultiSelect?: boolean;
   disabledRule?: boolean;
   zoom?: number;
+  /** 画布双击前的钩子函数，返回 false 则阻止默认的双击行为 */
+  beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
 }
 
 export interface StoreState {
@@ -541,14 +543,31 @@ export interface CodeParamStatement {
   /** 参数名称 */
   name: string;
   /** 参数类型 */
-  type?: string;
+  type?: string | TypeFunction<string>;
   [key: string]: any;
 }
 
+export type HistoryOpType = 'add' | 'remove' | 'update';
+
 export interface StepValue {
-  data: MPage | MPageFragment;
+  /** 页面信息 */
+  data: { name: string; id: Id };
+  opType: HistoryOpType;
+  /** 操作前选中的节点 ID，用于撤销后恢复选择状态 */
+  selectedBefore: Id[];
+  /** 操作后选中的节点 ID，用于重做后恢复选择状态 */
+  selectedAfter: Id[];
   modifiedNodeIds: Map<Id, Id>;
-  nodeId: Id;
+  /** opType 'add': 新增的节点 */
+  nodes?: MNode[];
+  /** opType 'add': 父节点 ID */
+  parentId?: Id;
+  /** opType 'add': 每个新增节点在父节点 items 中的索引 */
+  indexMap?: Record<string, number>;
+  /** opType 'remove': 被删除的节点及其位置信息 */
+  removedItems?: { node: MNode; parentId: Id; index: number }[];
+  /** opType 'update': 变更前后的节点快照 */
+  updatedItems?: { oldNode: MNode; newNode: MNode }[];
 }
 
 export interface HistoryState {
@@ -712,3 +731,44 @@ export type CustomContentMenuFunction = (
   menus: (MenuButton | MenuComponent)[],
   type: 'layer' | 'data-source' | 'viewer' | 'code-block',
 ) => (MenuButton | MenuComponent)[];
+
+export interface EditorEvents {
+  'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
+  select: [node: MNode | null];
+  add: [nodes: MNode[]];
+  remove: [nodes: MNode[]];
+  update: [nodes: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]];
+  'move-layer': [offset: number | LayerOffset];
+  'drag-to': [data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }];
+  'history-change': [data: MPage | MPageFragment];
+}
+
+export const canUsePluginMethods = {
+  async: [
+    'getLayout',
+    'highlight',
+    'select',
+    'multiSelect',
+    'doAdd',
+    'add',
+    'doRemove',
+    'remove',
+    'doUpdate',
+    'update',
+    'sort',
+    'copy',
+    'paste',
+    'doPaste',
+    'doAlignCenter',
+    'alignCenter',
+    'moveLayer',
+    'moveToContainer',
+    'dragTo',
+    'undo',
+    'redo',
+    'move',
+  ] as const,
+  sync: [],
+};
+
+export type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;

package/src/utils/editor-history.ts

@@ -0,0 +1,138 @@
+/*
+ * 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 { toRaw } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
+import type StageCore from '@tmagic/stage';
+import { isPage, isPageFragment } from '@tmagic/utils';
+
+import type { EditorNodeInfo, StepValue } from '@editor/type';
+import { getNodeIndex } from '@editor/utils/editor';
+
+export interface HistoryOpContext {
+  root: MApp;
+  stage: StageCore | null;
+  getNodeById(id: Id, raw?: boolean): MNode | null;
+  getNodeInfo(id: Id, raw?: boolean): EditorNodeInfo;
+  setRoot(root: MApp): void;
+  setPage(page: MPage | MPageFragment): void;
+  getPage(): MPage | MPageFragment | null;
+}
+
+/**
+ * 应用 add 类型的历史操作
+ * reverse=true（撤销）：从父节点中移除已添加的节点
+ * reverse=false（重做）：重新添加节点到父节点中
+ */
+export async function applyHistoryAddOp(step: StepValue, reverse: boolean, ctx: HistoryOpContext): Promise<void> {
+  const { root, stage } = ctx;
+
+  if (reverse) {
+    for (const node of step.nodes ?? []) {
+      const parent = ctx.getNodeById(step.parentId!, false) as MContainer;
+      if (!parent?.items) continue;
+      const idx = getNodeIndex(node.id, parent);
+      if (typeof idx === 'number' && idx !== -1) {
+        parent.items.splice(idx, 1);
+      }
+      await stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
+    }
+  } else {
+    const parent = ctx.getNodeById(step.parentId!, false) as MContainer;
+    if (parent?.items) {
+      for (const node of step.nodes ?? []) {
+        const idx = step.indexMap?.[node.id] ?? parent.items.length;
+        parent.items.splice(idx, 0, cloneDeep(node));
+        await stage?.add({
+          config: cloneDeep(node),
+          parent: cloneDeep(parent),
+          parentId: parent.id,
+          root: cloneDeep(root),
+        });
+      }
+    }
+  }
+}
+
+/**
+ * 应用 remove 类型的历史操作
+ * reverse=true（撤销）：将已删除的节点按原位置重新插入
+ * reverse=false（重做）：再次删除节点
+ */
+export async function applyHistoryRemoveOp(step: StepValue, reverse: boolean, ctx: HistoryOpContext): Promise<void> {
+  const { root, stage } = ctx;
+
+  if (reverse) {
+    const sorted = [...(step.removedItems ?? [])].sort((a, b) => a.index - b.index);
+    for (const { node, parentId, index } of sorted) {
+      const parent = ctx.getNodeById(parentId, false) as MContainer;
+      if (!parent?.items) continue;
+      parent.items.splice(index, 0, cloneDeep(node));
+      await stage?.add({ config: cloneDeep(node), parent: cloneDeep(parent), parentId, root: cloneDeep(root) });
+    }
+  } else {
+    for (const { node, parentId } of step.removedItems ?? []) {
+      const parent = ctx.getNodeById(parentId, false) as MContainer;
+      if (!parent?.items) continue;
+      const idx = getNodeIndex(node.id, parent);
+      if (typeof idx === 'number' && idx !== -1) {
+        parent.items.splice(idx, 1);
+      }
+      await stage?.remove({ id: node.id, parentId, root: cloneDeep(root) });
+    }
+  }
+}
+
+/**
+ * 应用 update 类型的历史操作
+ * reverse=true（撤销）：将节点恢复为 oldNode
+ * reverse=false（重做）：将节点更新为 newNode
+ */
+export async function applyHistoryUpdateOp(step: StepValue, reverse: boolean, ctx: HistoryOpContext): Promise<void> {
+  const { root, stage } = ctx;
+  const items = step.updatedItems ?? [];
+
+  for (const { oldNode, newNode } of items) {
+    const config = reverse ? oldNode : newNode;
+    if (config.type === NodeType.ROOT) {
+      ctx.setRoot(cloneDeep(config) as MApp);
+      continue;
+    }
+    const info = ctx.getNodeInfo(config.id, false);
+    if (!info.parent) continue;
+    const idx = getNodeIndex(config.id, info.parent);
+    if (typeof idx !== 'number' || idx === -1) continue;
+    info.parent.items![idx] = cloneDeep(config);
+
+    if (isPage(config) || isPageFragment(config)) {
+      ctx.setPage(config as MPage | MPageFragment);
+    }
+  }
+
+  const curPage = ctx.getPage();
+  if (stage && curPage) {
+    await stage.update({
+      config: cloneDeep(toRaw(curPage)),
+      parentId: root.id,
+      root: cloneDeep(toRaw(root)),
+    });
+  }
+}

package/src/utils/editor.ts

@@ -17,12 +17,13 @@
  */
 
 import { detailedDiff } from 'deep-object-diff';
-import { isObject } from 'lodash-es';
+import { cloneDeep, get, isObject } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
-import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { NODE_CONDS_KEY, NodeType } from '@tmagic/core';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
+import { NODE_CONDS_KEY, NodeType, Target, Watcher } from '@tmagic/core';
 import type StageCore from '@tmagic/stage';
+import { isFixed } from '@tmagic/stage';
 import {
   calcValueByFontsize,
   getElById,
@@ -34,7 +35,8 @@ import {
   isValueIncludeDataSource,
 } from '@tmagic/utils';
 
-import { Layout } from '@editor/type';
+import type { EditorNodeInfo } from '@editor/type';
+import { LayerOffset, Layout } from '@editor/type';
 
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 export const COPY_CODE_STORAGE_KEY = '$MagicEditorCopyCode';
@@ -436,3 +438,246 @@ export const buildChangeRecords = (value: any, basePath: string) => {
 
   return changeRecords;
 };
+
+/**
+ * 根据节点配置或ID解析出选中节点信息，并进行合法性校验
+ * @param config 节点配置或节点ID
+ * @param getNodeInfoFn 获取节点信息的回调函数
+ * @param rootId 根节点ID，用于排除根节点被选中
+ * @returns 选中节点的完整信息（node、parent、page）
+ */
+export const resolveSelectedNode = (
+  config: MNode | Id,
+  getNodeInfoFn: (id: Id) => EditorNodeInfo,
+  rootId?: Id,
+): EditorNodeInfo => {
+  const id: Id = typeof config === 'string' || typeof config === 'number' ? config : config.id;
+
+  if (!id) {
+    throw new Error('没有ID，无法选中');
+  }
+
+  const { node, parent, page } = getNodeInfoFn(id);
+  if (!node) throw new Error('获取不到组件信息');
+  if (node.id === rootId) throw new Error('不能选根节点');
+
+  return { node, parent, page };
+};
+
+/**
+ * 处理节点在 fixed 定位与其他定位之间的切换
+ * 当节点从非 fixed 变为 fixed 时，根据节点路径累加偏移量；反之则还原偏移量
+ * @param dist 更新后的节点配置（目标状态）
+ * @param src 更新前的节点配置（原始状态）
+ * @param root 根节点配置，用于计算节点路径上的偏移量
+ * @param getLayoutFn 获取父节点布局方式的回调函数
+ * @returns 处理后的节点配置（深拷贝）
+ */
+export const toggleFixedPosition = async (
+  dist: MNode,
+  src: MNode,
+  root: MApp,
+  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);
+    } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
+      newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
+    }
+  }
+
+  return newConfig;
+};
+
+/**
+ * 根据键盘移动的偏移量计算节点的新样式
+ * 仅对 absolute 或 fixed 定位的节点生效；优先修改 top/left，若未设置则修改 bottom/right
+ * @param style 节点当前样式
+ * @param left 水平方向偏移量（正值向右，负值向左）
+ * @param top 垂直方向偏移量（正值向下，负值向上）
+ * @returns 计算后的新样式对象，若节点不支持移动则返回 null
+ */
+export const calcMoveStyle = (style: Record<string, any>, left: number, top: number): Record<string, any> | null => {
+  if (!style || !['absolute', 'fixed'].includes(style.position)) return null;
+
+  const newStyle: Record<string, any> = { ...style };
+
+  if (top) {
+    if (isNumber(style.top)) {
+      newStyle.top = Number(style.top) + Number(top);
+      newStyle.bottom = '';
+    } else if (isNumber(style.bottom)) {
+      newStyle.bottom = Number(style.bottom) - Number(top);
+      newStyle.top = '';
+    }
+  }
+
+  if (left) {
+    if (isNumber(style.left)) {
+      newStyle.left = Number(style.left) + Number(left);
+      newStyle.right = '';
+    } else if (isNumber(style.right)) {
+      newStyle.right = Number(style.right) - Number(left);
+      newStyle.left = '';
+    }
+  }
+
+  return newStyle;
+};
+
+/**
+ * 计算节点水平居中对齐后的样式
+ * 流式布局（relative）下不做处理；优先通过 DOM 元素实际宽度计算，回退到配置中的 width 值
+ * @param node 需要居中的节点配置
+ * @param parent 父容器节点配置
+ * @param layout 当前布局方式
+ * @param doc 画布 document 对象，用于获取 DOM 元素实际宽度
+ * @returns 计算后的新样式对象，若不支持居中则返回 null
+ */
+export const calcAlignCenterStyle = (
+  node: MNode,
+  parent: MContainer,
+  layout: Layout,
+  doc?: Document,
+): Record<string, any> | null => {
+  if (layout === Layout.RELATIVE || !node.style) return null;
+
+  const style = { ...node.style };
+
+  if (doc) {
+    const el = getElById()(doc, node.id);
+    const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
+    if (parentEl && el) {
+      style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
+      style.right = '';
+    }
+  } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
+    style.left = (parent.style.width - node.style.width) / 2;
+    style.right = '';
+  }
+
+  return style;
+};
+
+/**
+ * 计算图层移动后的目标索引
+ * 流式布局与绝对定位布局的移动方向相反：流式布局中"上移"对应索引减小，绝对定位中"上移"对应索引增大
+ * @param currentIndex 节点当前在兄弟列表中的索引
+ * @param offset 移动偏移量，支持数值或 LayerOffset.TOP / LayerOffset.BOTTOM
+ * @param brothersLength 兄弟节点总数
+ * @param isRelative 是否为流式布局
+ * @returns 目标索引位置
+ */
+export const calcLayerTargetIndex = (
+  currentIndex: number,
+  offset: number | LayerOffset,
+  brothersLength: number,
+  isRelative: boolean,
+): number => {
+  if (offset === LayerOffset.TOP) {
+    return isRelative ? 0 : brothersLength;
+  }
+  if (offset === LayerOffset.BOTTOM) {
+    return isRelative ? brothersLength : 0;
+  }
+  return currentIndex + (isRelative ? -(offset as number) : (offset as number));
+};
+
+/**
+ * 节点配置合并策略：用于 mergeWith 的自定义回调
+ * - undefined 且 source 拥有该 key 时返回空字符串
+ * - 原来是数组而新值是对象时，使用新值
+ * - 新值是数组时，直接替换而非逐元素合并
+ */
+export const editorNodeMergeCustomizer = (objValue: any, srcValue: any, key: string, _object: any, source: any) => {
+  if (typeof srcValue === 'undefined' && Object.hasOwn(source, key)) {
+    return '';
+  }
+
+  if (isObject(srcValue) && Array.isArray(objValue)) {
+    return srcValue;
+  }
+  if (Array.isArray(srcValue)) {
+    return srcValue;
+  }
+};
+
+/**
+ * 收集复制节点关联的依赖节点，将关联节点追加到 copyNodes 数组中
+ * @param copyNodes 待复制的节点列表（会被就地修改）
+ * @param collectorOptions 依赖收集器配置
+ * @param getNodeById 根据 ID 获取节点的回调函数
+ */
+export const collectRelatedNodes = (
+  copyNodes: MNode[],
+  collectorOptions: TargetOptions,
+  getNodeById: (id: Id) => MNode | null,
+): void => {
+  const customTarget = new Target({ ...collectorOptions });
+  const coperWatcher = new Watcher();
+
+  coperWatcher.addTarget(customTarget);
+  coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+
+  Object.keys(customTarget.deps).forEach((nodeId: Id) => {
+    const node = getNodeById(nodeId);
+    if (!node) return;
+    customTarget.deps[nodeId].keys.forEach((key) => {
+      const relateNodeId = get(node, key);
+      const isExist = copyNodes.find((n) => n.id === relateNodeId);
+      if (!isExist) {
+        const relateNode = getNodeById(relateNodeId);
+        if (relateNode) {
+          copyNodes.push(relateNode);
+        }
+      }
+    });
+  });
+};
+
+export interface DragClassification {
+  sameParentIndices: number[];
+  crossParentConfigs: { config: MNode; parent: MContainer }[];
+  /** 当同父容器节点索引异常时置为 true，调用方应中止拖拽操作 */
+  aborted: boolean;
+}
+
+/**
+ * 对拖拽的节点进行分类：同父容器内移动 vs 跨容器移动
+ * @param configs 被拖拽的节点列表
+ * @param targetParent 目标父容器
+ * @param getNodeInfo 获取节点信息的回调
+ * @returns 分类结果，包含同容器索引列表和跨容器节点列表
+ */
+export const classifyDragSources = (
+  configs: MNode[],
+  targetParent: MContainer,
+  getNodeInfo: (id: Id, raw?: boolean) => EditorNodeInfo,
+): DragClassification => {
+  const sameParentIndices: number[] = [];
+  const crossParentConfigs: { config: MNode; parent: MContainer }[] = [];
+
+  for (const config of configs) {
+    const { parent, node: curNode } = getNodeInfo(config.id, false);
+    if (!parent || !curNode) continue;
+
+    const path = getNodePath(curNode.id, parent.items);
+    if (path.some((node) => `${targetParent.id}` === `${node.id}`)) continue;
+
+    const index = getNodeIndex(curNode.id, parent);
+
+    if (`${parent.id}` === `${targetParent.id}`) {
+      if (typeof index !== 'number' || index === -1) {
+        return { sameParentIndices, crossParentConfigs, aborted: true };
+      }
+      sameParentIndices.push(index);
+    } else {
+      crossParentConfigs.push({ config, parent });
+    }
+  }
+
+  return { sameParentIndices, crossParentConfigs, aborted: false };
+};

package/src/utils/props.ts

@@ -108,6 +108,10 @@ export const styleTabConfig: TabPaneConfig = {
             'borderColor',
           ],
         } as unknown as ChildConfig,
+        {
+          name: 'transform',
+          defaultValue: () => ({}),
+        },
       ],
     },
   ],

package/src/utils/undo-redo.ts

@@ -23,7 +23,7 @@ export class UndoRedo<T = any> {
   private listCursor: number;
   private listMaxSize: number;
 
-  constructor(listMaxSize = 20) {
+  constructor(listMaxSize = 100) {
     const minListMaxSize = 2;
     this.elementList = [];
     this.listCursor = 0;
@@ -42,29 +42,30 @@ export class UndoRedo<T = any> {
   }
 
   public canUndo(): boolean {
-    return this.listCursor > 1;
+    return this.listCursor > 0;
   }
 
-  // 返回undo后的当前元素
+  /** 返回被撤销的操作 */
   public undo(): T | null {
     if (!this.canUndo()) {
       return null;
     }
     this.listCursor -= 1;
-    return this.getCurrentElement();
+    return cloneDeep(this.elementList[this.listCursor]);
   }
 
   public canRedo() {
     return this.elementList.length > this.listCursor;
   }
 
-  // 返回redo后的当前元素
+  /** 返回被重做的操作 */
   public redo(): T | null {
     if (!this.canRedo()) {
       return null;
     }
+    const element = cloneDeep(this.elementList[this.listCursor]);
     this.listCursor += 1;
-    return this.getCurrentElement();
+    return element;
   }
 
   public getCurrentElement(): T | null {