Undo/Redoのビルトインアクション

UndoStackクラスの以下のビルトインアクションを使用して、Undo/Redoの操作の際に各アクションの動作を制御（アクションの制限、特定の処理の追加など）ができます。

各アクションはUndoableActionを継承しています。

アクション名	説明	生成のタイミング	スタックにプッシュ
InputChangeAction	通常の入力値の変化を追跡するアクション	-	-
CheckboxClickAction	チェックボックスの状態変化を追跡するアクション	focus	blur
RadioClickAction	ラジオの状態の変化を追跡するアクション	-	click
GaugeChangeAction	Gaugeコントロールの値の変化を追跡するアクション	focus	blur
GridEditAction	グリッドセルの値の変更を追跡するアクション	beginningEdit, pastingCell	cellEditEnded, pastedCell
GridSortAction	グリッドのソート列の状態の変更を追跡するアクション	sortingColumn	sortedColumn
GridResizeAction	グリッド列のサイズの変更を追跡するアクション	resizingColumn, autoSizingColumn	resizedColumn, autoSizedColumn
GridDragAction	グリッド列のドラッグ状態の変化を追跡するアクション	draggingColumn	draggedColumn
GridAddRowAction	グリッド行に追加された状態の変化を追跡するアクション	-	rowAdded
GridRemoveRowAction	グリッド行の削除状態の変化を追跡するアクション	-	deletingRow
ExpandCollapseColumnGroupAction	グループの折りたたみ状態の変化を追跡するアクション	columnGroupCollapsedChanging	columnGroupCollapsedChanged
TreeViewEditAction	ツリービューのセル値の変更を追跡するアクション	nodeEditStarted	nodeEditEnded
TreeViewCheckAction	ツリービューのチェック状態の変更を追跡するアクション	isCheckedChanging	isCheckedChanged

次に使用例を示します。

以下は、Undo/Redo時にデータのソート及び列のサイズ変更のアクションを追跡しない及び、セルの値のUndo操作の場合にアラートを表示するサンプルです。

import { UndoStack, GridSortAction, GridResizeAction, GridEditAction, } from '@mescius/wijmo.undo';

const stack = new UndoStack('#undoable-form', {
    addingAction: (s, e) => {
      const action = e.action;
      // Undo/Redo時にデータのソート及び列のサイズ変更のアクションを追跡しない
      if (
        action instanceof GridSortAction ||
        action instanceof GridResizeAction
      ) {
        e.cancel = true;
      }
    },
    undoneAction: (s, e) => {
      const action = e.action;
      // セルの値のUndo操作の場合にアラートを表示する
      if (action instanceof GridEditAction) {
        alert('セルの値を元に戻す');
      }
    },
  });