元に戻す・やり直し

操作の取り消し・やり直しの方法を説明します。

キーボードショートカット

ActionManager API

プログラムから Undo / Redo を制御します。

const { actionManager } = grid;

// Undo
actionManager.undo();

// Redo
actionManager.redo();

// 状態の確認
actionManager.canUndo(); // boolean
actionManager.canRedo(); // boolean

// 履歴のクリア
actionManager.clear();

Undo / Redo 状態の監視

actionManager.onUndoRedoChange(() => {
  console.log('canUndo:', actionManager.canUndo());
  console.log('canRedo:', actionManager.canRedo());
});

Action によるセル操作

ActionManager を通して操作を実行すると、自動的に Undo / Redo 対応になります。

セル値の変更

import { SetCellInputAction } from '@reogrid/lite';

actionManager.execute(
  new SetCellInputAction(grid.worksheet, 0, 0, 'Hello')
);

セルスタイルの変更

import { SetCellStyleAction, createSetRangeStyleAction } from '@reogrid/lite';

// 単一セル
actionManager.execute(
  new SetCellStyleAction(grid.worksheet, 0, 0, { bold: true })
);

// 範囲
actionManager.execute(
  createSetRangeStyleAction(grid.worksheet, 0, 0, 4, 3, { backgroundColor: '#dbeafe' })
);

列幅・行高の変更

import { SetColumnWidthAction, SetRowHeightAction } from '@reogrid/lite';

actionManager.execute(new SetColumnWidthAction(grid.worksheet, 0, 200));
actionManager.execute(new SetRowHeightAction(grid.worksheet, 0, 40));

セル結合

import { MergeCellsAction, UnmergeCellsAction } from '@reogrid/lite';

actionManager.execute(new MergeCellsAction(grid.worksheet, 0, 0, 0, 4));
actionManager.execute(new UnmergeCellsAction(grid.worksheet, 0, 0, 0, 4));

ボーダー

import { SetRangeBorderAction } from '@reogrid/lite';

actionManager.execute(
  new SetRangeBorderAction(grid.worksheet, 0, 0, 4, 3, {
    style: 'solid',
    color: '#000',
  })
);

行・列の挿入/削除

import {
  InsertRowsAction, DeleteRowsAction,
  InsertColumnsAction, DeleteColumnsAction,
} from '@reogrid/lite';

actionManager.execute(new InsertRowsAction(grid.worksheet, 2, 3));
actionManager.execute(new DeleteRowsAction(grid.worksheet, 2, 3));
actionManager.execute(new InsertColumnsAction(grid.worksheet, 1, 2));
actionManager.execute(new DeleteColumnsAction(grid.worksheet, 1, 2));

行・列の表示/非表示

import { SetRowHiddenAction, SetColumnHiddenAction } from '@reogrid/lite';

actionManager.execute(new SetRowHiddenAction(grid.worksheet, [2, 3], true));
actionManager.execute(new SetColumnHiddenAction(grid.worksheet, [1], false));

ソート

import { SortColumnAction } from '@reogrid/lite';

actionManager.execute(new SortColumnAction(grid.worksheet, 0, 'asc'));

グループ化

import {
  GroupRowsAction, UngroupRowsAction,
  GroupColumnsAction, UngroupColumnsAction,
} from '@reogrid/lite';

actionManager.execute(new GroupRowsAction(grid.worksheet, 1, 4));
actionManager.execute(new UngroupRowsAction(grid.worksheet, 1, 4));

ペースト・クリア

import { PasteAction, ClearRangeAction } from '@reogrid/lite';

actionManager.execute(new ClearRangeAction(grid.worksheet, 0, 0, 4, 3));

利用可能な Action 一覧

保護されたセルのチェック

actionManager.execute() はセル保護を自動的にチェックします。保護されたセルへの変更は拒否され、false が返されます。

const success = actionManager.execute(
  new SetCellInputAction(grid.worksheet, 0, 0, 'new value')
);
if (!success) {
  console.log('Operation blocked by cell protection');
}

Undo 容量

デフォルトでは最大 30 ステップの Undo 履歴が保持されます。createReogrid() の undoCapacity オプションで変更可能です。

const grid = createReogrid({
  workspace: '#grid',
  undoCapacity: 100,
});