애플리케이션에 작업 실행 취소와 다시 실행 기능이 포함되면, 사용자들이 더욱 편리하게 작업할 수 있으며, 생산성도 높아집니다.

하지만 HTML은 매우 기본적인 실행 취소/다시 실행 기능만 제공하며 이 지원조차도 브라우저 간에 일관성이 없습니다. 현재 어떤 브라우저에서도 구현되지 않은 HTML UndoManager 클래스에 대한 제안이 있습니다.

최근에 유연하고 사용하기 쉬운 폼(Form) 수준의 실행 취소/다시 실행 스택 클래스의 동기 부여 및 구현을 설명하는 포스팅을 게시했습니다.

해당 리소스에 대한 링크는 다음과 같습니다.

(영문) https://www.grapecity.com/blogs/easy-undo-redo-for-html-forms

Wijmo 2019 V2에는 UndoStack 클래스가 있는 "실행 취소" 모듈이 추가되었습니다.

UndoStack 클래스를 사용하여 웹 페이지 또는 폼에 실행 취소/다시 실행 기능을 제공할 수 있습니다. UndoStack의 클래스는 모든 HTML 입력 요소뿐만 아니라 FlexGrid, ComboBox, InputDate, Gauge와 같은 Wijmo 컨트롤까지 자동으로 모니터링합니다.

UndoStack 클래스를 사용하려면 클래스의 인스턴스를 작성하고 관리해야 하는 요소(일반적으로 HTML 양식, DIV 또는 전체 페이지)의 선택기에 전달합니다.

예를 들면 다음과 같습니다.

import { UndoStack } from '@grapecity/wijmo.undo';

// create the UndoStack
let undoStack = new UndoStack('#undoable-form', {
    maxActions: 50,
    stateChanged: (s: UndoStack, e) => {
        btnUndo.disabled = !s.canUndo;
        btnRedo.disabled = !s.canRedo;
        cnt.textContent = s.actionCount.toString();
    }
});

// hook up undo/redo/clear buttons
btnUndo.addEventListener('click', () => {
    undoStack.undo();
});
btnRedo.addEventListener('click', () => {
    undoStack.redo();
});

위의 코드는 최대 50개의 작업을 추적하는 UndoStack 을 만듭니다. 표준 실행 취소/다시 실행 단축키(ctrl+Y, ctrl+Z)를 처리하기 위해 키보드를 자동으로 모니터링합니다. 사용자 지정 실행 취소/다시 실행 버튼을 활성화/비활성화하는 UndoStack의 stateChanged 이벤트와 버튼을 처리하기 위한 실행 취소 및 다시 실행 메소드를 코드화합니다.

이처럼 편리한 기능을 여러분의 애플리케이션에 적용해보세요.