History

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /**
       * Event for undo
       *
       * @example
       * ```typescript
       * grid.addEventListener(BEFORE_UNDO_EVENT, (e) => {
       *   console.log(e);
       * });
       */
      [BEFORE_UNDO_EVENT]: {
        detail: {
          data: BeforeRangeSaveDataDetails['data'];
          type: DimensionRows;
          lastChange: EventManagerEvent;
        };
      };
  /**
       * Event for redo
       *
       * @example
       * ```typescript
       * grid.addEventListener(BEFORE_REDO_EVENT, (e) => {
       *   console.log(e);
       * });
       */
      [BEFORE_REDO_EVENT]: {
        detail: {
          data: BeforeRangeSaveDataDetails['data'];
          type: DimensionRows;
          lastChange: EventManagerEvent;
        };
      }
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  history?: {
        undoStack: EventManagerEvent[];
        redoStack: EventManagerEvent[];
        maxStackSize: number;
        disabled: boolean;
      }
}

Plugin API

HistoryPlugin

The HistoryPlugin for RevoGrid provides undo and redo functionalities, allowing users to navigate through their editing history within the grid. This plugin is essential for enhancing user experience by offering flexibility to revert or reapply changes made during data manipulation.

Key Features:

• Undo/Redo Stacks: Maintains separate stacks for undo and redo operations, with a configurable (currently fixed at 200) maximum stack size to manage memory usage efficiently.
• Event Handling: Listens to ON_EDIT_EVENT to track changes and updates the undo stack accordingly. It also captures Ctrl+Z and Ctrl+Y (or Cmd on macOS) keystrokes via the BEFORE_KEYDOWN_EVENT to trigger undo and redo actions.
• Event Emission: Utilizes BEFORE_UNDO_EVENT and BEFORE_REDO_EVENT to allow pre-processing or cancellation of undo/redo actions. Emits FLASH_CELL_EVENT to visually highlight cells affected by these actions.
• Disabling and Clearing: Provides methods to disable the plugin (preventing changes from being added to stacks) and to clear both stacks, resetting the history.

Usage:

• Integrate the HistoryPlugin within the RevoGrid to enable robust undo/redo capabilities. This involves adding the plugin to the grid’s plugin list, allowing automatic management of editing actions.

Example

import { HistoryPlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [HistoryPlugin];

This plugin is ideal for applications requiring reliable data editing workflows, providing users with the ability to correct mistakes or revisit previous states seamlessly.

class HistoryPlugin {
  clear();

  disable(disable = true);

  undo();

  redo();
}