如何合并原生的命令（Command）和自定义命令

收藏

本帖最后由 Joestar.Xu 于 2024-6-5 17:40 编辑

在项目开发过程中，经常会碰到需要自己定义一个Command的来满足可以撤回等需求的情况。

细心的朋友可能会发现，我们在自定义Command中调用SpreadJS原生的Command的时候，在撤销栈中会存在两个撤销选项。

这在撤销的时候非常不友好，用户需要撤销两次，但是实际上他可能只是点击了一个按钮。

面对这样的问题我们应该如何解决呢？

以粘贴操作举一个简单的例子：

let mySpecialPaste = Object.assign(
{},
GC.Spread.Sheets.Commands.clipboardPaste
);
mySpecialPaste.canUndo = false;
spread.commandManager().register("myClipboardPaste", mySpecialPaste);

复制代码

先创建一个clipboardPaste Command的拷贝，并修改其canUndo属性为false。

然后在自定义的Command中使用这个mySpecialPaste Command：

let test = {
canUndo: true,
name: "test",
execute: function (context, options, isUndo) {
let Commands = GC.Spread.Sheets.Commands;
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
let sheet = context.getSheetFromName(options.sheetName);
sheet.suspendPaint();
sheet.getCell(0, 0).value("123");
spread.commandManager().execute({
cmd: "myClipboardPaste",
sheetName: "Sheet1",
fromSheet: sheet,
fromRanges: fromRange,
pastedRanges: toRanges,
isCutting: true,
clipboardText: "",
pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all,
});
sheet.resumePaint();
Commands.endTransaction(context, options);
return true;
}
},
};

复制代码

最后我们将这个Command注册并重写oldOpenMenu将这个Command添加到右键菜单中，并修改它的撤销重做栈中的命名：

spread.commandManager().register("test", test);
let oldOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (
menuData,
itemsDataForShown,
hitInfo,
spread
) {
oldOpenMenu.apply(this, arguments);
console.log(itemsDataForShown);
itemsDataForShown.push({
text: "test",
name: "test",
command: "test",
workArea: "viewport",
});
};

复制代码

let undoList = GC.Spread.Sheets.Designer.getCommand(
GC.Spread.Sheets.Designer.CommandNames.UndoList
);
let redoList = GC.Spread.Sheets.Designer.getCommand(
GC.Spread.Sheets.Designer.CommandNames.RedoList
);
redoList.commandMap["test"] = "test";
undoList.commandMap["test"] = "test";
designerConfig.commandMap = {};
designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.UndoList] =
undoList;
designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.RedoList] =
redoList;
let designer = new GC.Spread.Sheets.Designer.Designer(
"gc-designer-container",
designerConfig
);

复制代码

以上就大功告成，此时执行命令就只有一个撤销选项了。

		自动登录	找回密码
密码			立即注册

如何合并原生的命令（Command）和自定义命令

0 个回复

SpreadJS 认证

SpreadJS 高级认证