mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-06-04 10:58:33 +08:00
0446202ba6
- 新增 history-list 模块（面板、Tab、Bucket、GroupRow 与 composables） - NavMenu 接入历史记录面板入口 - history/editor/codeBlock/dataSource service 配合面板能力调整 - utils/undo-redo 适配新面板 - 扩展 type.ts 相关类型定义 - 新增 history-list-panel.scss 并在 theme.scss 引入 - 补充 history-list 模块完整单元测试 - playground 同步小幅调整
103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
/*
|
||
* 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 { cloneDeep } from 'lodash-es';
|
||
|
||
// #region UndoRedo
|
||
export class UndoRedo<T = any> {
|
||
private elementList: T[];
|
||
private listCursor: number;
|
||
private listMaxSize: number;
|
||
|
||
constructor(listMaxSize = 100) {
|
||
const minListMaxSize = 2;
|
||
this.elementList = [];
|
||
this.listCursor = 0;
|
||
this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
|
||
}
|
||
|
||
public pushElement(element: T): void {
|
||
// 新元素进来时，把游标之外的元素全部丢弃，并把新元素放进来
|
||
this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
|
||
this.listCursor += 1;
|
||
// 如果list中的元素超过maxSize，则移除第一个元素
|
||
if (this.elementList.length > this.listMaxSize) {
|
||
this.elementList.shift();
|
||
this.listCursor -= 1;
|
||
}
|
||
}
|
||
|
||
public canUndo(): boolean {
|
||
return this.listCursor > 0;
|
||
}
|
||
|
||
/** 返回被撤销的操作 */
|
||
public undo(): T | null {
|
||
if (!this.canUndo()) {
|
||
return null;
|
||
}
|
||
this.listCursor -= 1;
|
||
return cloneDeep(this.elementList[this.listCursor]);
|
||
}
|
||
|
||
public canRedo() {
|
||
return this.elementList.length > this.listCursor;
|
||
}
|
||
|
||
/** 返回被重做的操作 */
|
||
public redo(): T | null {
|
||
if (!this.canRedo()) {
|
||
return null;
|
||
}
|
||
const element = cloneDeep(this.elementList[this.listCursor]);
|
||
this.listCursor += 1;
|
||
return element;
|
||
}
|
||
|
||
public getCurrentElement(): T | null {
|
||
if (this.listCursor < 1) {
|
||
return null;
|
||
}
|
||
return cloneDeep(this.elementList[this.listCursor - 1]);
|
||
}
|
||
|
||
/**
|
||
* 返回栈内全部元素的浅克隆数组（按时间顺序，索引 0 为最早一步）。
|
||
* 仅用于历史面板等只读展示场景，不应直接修改返回值。
|
||
*/
|
||
public getElementList(): T[] {
|
||
return this.elementList.slice();
|
||
}
|
||
|
||
/**
|
||
* 当前游标位置：表示已应用的步骤数量。
|
||
* - cursor === 0 表示全部已撤销
|
||
* - cursor === length 表示已重做到末尾
|
||
* 历史面板用于区分"已应用 / 已撤销"两段。
|
||
*/
|
||
public getCursor(): number {
|
||
return this.listCursor;
|
||
}
|
||
|
||
/** 栈内总步数。 */
|
||
public getLength(): number {
|
||
return this.elementList.length;
|
||
}
|
||
}
|
||
// #endregion UndoRedo
|