Я нашел это решение: https://codepen.io/durga598/pen/gXQjdw
, которое я считаю хорошим, но я пытался реализовать отмену повторения с полигоном безуспешно. Я просто не могу обернуть голову, как это сделать.
У меня есть этот код для обработки отмены / повтора на основных c вещах, но полигон более сложный, и я не могу заставить его работать:
save = (
type: TransactionType,
canvasJSON?: any,
_isWorkarea: boolean = true
) => {
if (!this.handler.keyEvent.transaction) {
return;
}
try {
if (this.state) {
const json = JSON.stringify(this.state);
this.redos = [];
this.undos.push({
type,
json
});
}
const { objects }: { objects: FabricObject[] } =
canvasJSON ||
this.handler.canvas.toJSON(this.handler.propertiesToInclude);
this.state = objects.filter(obj => {
if (obj.id === 'workarea') {
return false;
} else if (obj.id === 'grid') {
return false;
} else if (obj.superType === 'port') {
return false;
}
return true;
});
} catch (error) {
console.error(error);
}
};
/**
* @description Undo transaction
* @returns
*/
undo = throttle(() => {
const undo = this.undos.pop();
if (!undo) {
return;
}
this.redos.push({
type: 'redo',
json: JSON.stringify(this.state)
});
this.replay(undo);
}, 100);
/**
* @description Redo transaction
* @returns
*/
redo = throttle(() => {
const redo = this.redos.pop();
if (!redo) {
return;
}
this.undos.push({
type: 'undo',
json: JSON.stringify(this.state)
});
this.replay(redo);
}, 100);
/**
* @description Replay transaction
*/
replay = (transaction: TransactionEvent) => {
const objects = JSON.parse(transaction.json) as FabricObject[];
this.state = objects;
this.active = true;
this.handler.canvas.renderOnAddRemove = false;
this.handler.clear();
this.handler.canvas.discardActiveObject();
fabric.util.enlivenObjects(
objects,
(enlivenObjects: FabricObject[]) => {
enlivenObjects.forEach(obj => {
const targetIndex = this.handler.canvas._objects.length;
if (obj.superType === 'node') {
this.handler.canvas.insertAt(obj, targetIndex, false);
this.handler.portHandler.create(obj as NodeObject);
} else if (obj.superType === 'link') {
const link = obj as LinkObject;
this.handler.objects = this.handler.getObjects();
this.handler.linkHandler.create({
type: 'curvedLink',
fromNode: link.fromNode.id,
fromPort: link.fromPort.id,
toNode: link.toNode.id,
toPort: link.toPort.id
});
} else {
this.handler.canvas.insertAt(obj, targetIndex, false);
}
});
this.handler.canvas.renderOnAddRemove = true;
this.active = false;
this.handler.canvas.selection = false;
this.handler.canvas.renderAndReset();
this.handler.objects = this.handler.getObjects();
if (this.handler.onTransaction) {
this.handler.onTransaction(transaction);
}
},
null
);
};
Я, например, попытался осмотреться, но не могу, и этот вопрос так трудно решить.