アンドゥおよびリドゥ

［Ctrl］+［Z］キーを使用すると、ウィジェット内のアクションをアンドゥできます。続いて［Ctrl］+［Y］キーを押すと、取り消したアクションをリドゥできます。

アンドゥが可能なアクションの種類は、次のとおりです。

テキストの編集
ダブルクリックによるサイズの自動調整
ヘッダのサイズ変更
マウスによる列または行のドラッグ
グループボタンによるグループの展開または折りたたみ
タブストリップのダブルクリックによるシートタブ名の編集
［Ctrl］+［V］キーによる貼り付け
Commandsクラスを使用したアクションの実行
ビューポート領域で実行されたコンテキストメニュー操作

以下のアクションは、［Ctrl］+［Z］キーで取り消すことはできません。

ドロップダウンボタンによる並べ替えまたはフィルタリング
範囲の選択
特定のセルへのナビゲート
スクロール
サイズ変更ボックスによるタブストリップのサイズ変更
タブストリップの［新規］タブオプションのクリック
シートタブ領域で実行されたコンテキストメニュー操作
CommandManagerクラスのexecute()メソッド内での、Workbook.fromJSONメソッドまたはWorksheet.fromJSONメソッドの呼び出し
CommandManagerクラスのexecute()メソッド内での、UndoManagerクラスのUndoメソッドまたはRedoメソッドの呼び出し

アクションのアンドゥを有効にするかどうかをコード内で指定するには、 options.allowUndo プロパティを使用します。

allowUndoプロパティをtrueに設定すると、操作のアンドゥおよびリドゥが可能になります。これにはstartTransaction()メソッド、undoTransaction()メソッド、およびendTransaction()メソッドを使用します。

コードの使用

次のサンプルコードは、 options.allowUndo プロパティを設定し、アクションを指定します。

spread.options.allowUndo = true;
spread.commandManager().execute({cmd: "outlineRow", sheetName: activeSheet.name(), index: 3, count: 5});

次のサンプルコードは、startTransaction()、undoTransaction()、およびendTransaction()メソッドを使用して、セルの背景色を変更します。

var command = { canUndo: true, execute: function (context, options, isUndo)

                { var Commands = GC.Spread.Sheets.Commands;
                  if (isUndo)

                  {
                     Commands.undoTransaction(context, options);
                     return true;
                  }

                    else

                  {
                    Commands.startTransaction(context, options);
                    var sheet = context.getSheetFromName(options.sheetName);
                    var cell = sheet.getCell(options.row, options.col);
                    cell.backColor(options.backColor);
                    Commands.endTransaction(context, options);
                    return true;
                   } 

                 }
                };
var spread = GC.Spread.Sheets.findControl(document.getElementById("sampleDiv"));
var commandManager = spread.commandManager();
commandManager.register("changeBackColor", command);
commandManager.execute({ cmd: "changeBackColor", sheetName: spread.getSheet(0).name(), row: 1, col: 2, backColor: "red" });

アンドゥおよびリドゥ操作の数の制限

アンドゥおよびリドゥ操作の数に制限を設定するには、undoManagerクラスの maxSize メソッドを使用して、アンドゥおよびリドゥのスタックサイズを制御します。これにより、メモリ消費を削減し、アプリケーションのパフォーマンスを向上させることができます。

メモ： maxSizeメソッドに無効な値が渡された場合、undoManagerが返されます。

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
let undoManager = spread.undoManager();
undoManager.maxSize(20);        // 最大サイズを設定します。 
let maxSize = undoManager.maxSize();    // 最大サイズを取得します。

アンドゥおよびリドゥスタックの取得

アンドゥおよびリドゥスタックを取得するには、 getUndoStack と getRedoStack 関数を使用できます。これらの関数は、オブジェクトとしてコマンドとシート名の文字列値を含むスタックを返します。

function getUndoStackFunction() {
    console.log(spread.undoManager().getUndoStack());
}

function getRedoStackFunction() {
    console.log(spread.undoManager().getRedoStack());
}

また、これらの関数を使用して、スプレッドシートにカスタムのメニューを作成したり、アンドゥおよびリドゥ操作のリストを表示したりすることもできます。

<body>
    <input type="button" value="アンドゥスタックを取得します。" onclick="getUndoStackFunction()">
    <input type="button" value="リドゥスタックを取得します。" onclick="getRedoStackFunction()">
</body>

SpreadJS デザイナは、アンドゥおよびリドゥのスタックを操作のリストとしてドロップダウンリストに表示します。これにより、任意の操作を選択してスプレッドシートをナビゲートできます。