基礎編 Undo/Redo機能

記事作成日: 2023-10-11

mxgraphでUndo/Redo機能を実装するにはmxUndoManagerクラスを使用します。複雑なコードは必要なく、以下のコードをコピペするだけで簡単にアプリに実装できました｡

const undoManager = new mxUndoManager();
const listener = function(sender, evt)
{
	undoManager.undoableEditHappened(evt.getProperty('edit'));
};
graph.getModel().addListener(mxEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener);

[Undo][Redo]ボタンの作成は普通にJSで作成しても問題ありませんが､mxUtilsクラスのbuttonメソッドを使うと楽に作れます。

document.body.appendChild(mxUtils.button('Undo', function()
{
	undoManager.undo();
}));

document.body.appendChild(mxUtils.button('Redo', function()
{
	undoManager.redo();
}));

参考リンク

mxUtils
mxUndoManager