1.撤销
const undo = () => {
const undoStack = graph.value.getUndoStack();
console.log(undoStack);
if (!undoStack || undoStack.length === 0) {
return;
}
const currentData = undoStack.pop();
console.log(currentData);
if (currentData) {
const { action } = currentData;
console.log(action);
graph.value.pushStack(action, currentData.data, 'redo');
let data = currentData.data.before;
if (action === 'add') {
data = currentData.data.after;
}
if (!data) return;
switch (action) {
case 'visible': {
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
const item = graph.value.findById(model.id);
if (model.visible) {
graph.value.showItem(item, false);
} else {
graph.value.hideItem(item, false);
}
});
});
break;
}
case 'render':
case 'update':
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
const item = graph.value.findById(model.id);
delete model.id;
graph.value.updateItem(item, model, false);
if (item.getType() === 'combo') graph.value.updateCombo(item as ICombo);
});
});
break;
case 'changedata':
graph.value.changeData(data, false);
break;
case 'delete': {
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
const itemType = model.itemType;
delete model.itemType;
graph.value.addItem(itemType, model, false);
});
});
break;
}
case 'add':
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
graph.value.removeItem(model.id, false);
});
});
break;
case 'updateComboTree':
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
graph.value.updateComboTree(model.id, model.parentId, false);
});
});
break;
case 'createCombo':
const afterCombos = currentData.data.after.combos;
const createdCombo = afterCombos[afterCombos.length - 1];
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
graph.value.updateComboTree(model.id, model.parentId, false);
});
});
graph.value.removeItem(createdCombo.id, false);
break;
case 'uncombo':
const targetCombo = data.combos[data.combos.length - 1];
const childrenIds = data.nodes
.concat(data.combos)
.map((child) => child.id)
.filter((id) => id !== targetCombo.id);
graph.value.createCombo(targetCombo, childrenIds, false);
break;
case 'layout':
graph.value.updateLayout(data, undefined, undefined, false);
break;
default:
}
}
};
2.重做
// 重做
const redo = () => {
const redoStack = graph.value.getRedoStack();
console.log(redoStack);
if (!redoStack || redoStack.length === 0) {
return;
}
const currentData = redoStack.pop();
console.log(currentData);
if (currentData) {
const { action } = currentData;
let data = currentData.data.after;
graph.value.pushStack(action, currentData.data);
if (action === 'delete') {
data = currentData.data.before;
}
if (!data) return;
switch (action) {
case 'visible': {
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
const item = graph.value.findById(model.id);
if (model.visible) {
graph.value.showItem(item, false);
} else {
graph.value.hideItem(item, false);
}
});
});
break;
}
case 'render':
case 'update':
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
const item = graph.value.findById(model.id);
delete model.id;
graph.value.updateItem(item, model, false);
if (item.getType() === 'combo') graph.value.updateCombo(item as ICombo);
});
});
break;
case 'changedata':
graph.value.changeData(data, false);
break;
case 'delete':
if (data.edges) {
data.edges.forEach((model) => {
graph.value.removeItem(model.id, false);
});
}
if (data.nodes) {
data.nodes.forEach((model) => {
graph.value.removeItem(model.id, false);
});
}
if (data.combos) {
data.combos.forEach((model) => {
graph.value.removeItem(model.id, false);
});
}
break;
case 'add': {
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
const itemType = model.itemType;
delete model.itemType;
graph.value.addItem(itemType, model, false);
});
});
break;
}
case 'updateComboTree':
Object.keys(data).forEach((key) => {
const array = data[key];
if (!array) return;
array.forEach((model) => {
graph.value.updateComboTree(model.id, model.parentId, false);
});
});
break;
case 'createCombo':
const createdCombo = data.combos[data.combos.length - 1];
graph.value.createCombo(
createdCombo,
createdCombo.children.map((child) => child.id),
false,
);
break;
case 'uncombo':
const beforeCombos = currentData.data.before.combos;
const targertCombo = beforeCombos[beforeCombos.length - 1];
graph.value.uncombo(targertCombo.id, false);
break;
case 'layout':
graph.value.updateLayout(data, undefined, undefined, false);
break;
default:
}
}
};