Nickel Palladium Manganese

    typed-undo
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.0 • Public • Published

    Minified + gzipped size NPM version License Stars Watchers Build Status Code Coverage

    An UndoManager for TypeScript (and JavaScript). The basic idea is based on the UndoManager from Java.

    Fair Warning

    With version 2, the target is now es2015, so if you want to support older browser, you'll have to ensure that this module is being transpiled to an older es version during your build-process.

    Why Typed-Undo?

    • Easily add memory-efficient undo/redo functionality.
      • You can merge and replace edits, just like in the Java UndoManager.
    • You can mark a save-point, to enable/disable your save-button.
    • Undo/Redo non-edit related changes, like focus change, without it being marked as needs-to-be-saved.
    • No dependencies
    • Automated unit tests with 100% code coverage
    • Liberal license: zlib/libpng
    • Fully documented using TypeDoc

    Installation via NPM

    npm install typed-undo --save

    Example

    import { UndoManager, UndoableEdit } from "typed-undo";
    
    class UndoableValueChange extends UndoableEdit {
        private readonly oldValue: string;
        private newValue: string;
        private readonly applyValue: (value: string) => void;
    
        public constructor(oldValue: string, newValue: string, applyValue: (value: string) => void) {
            super();
            this.oldValue = oldValue;
            this.newValue = newValue;
            this.applyValue = applyValue;
        }
    
        public undo(): void {
            this.applyValue(this.oldValue);
        }
    
        public redo(): void {
            this.applyValue(this.newValue);
        }
    
        public isSignificant(): boolean {
            return this.oldValue !== this.newValue;
        }
    
        public merge(edit: UndoableEdit): boolean {
            if (edit instanceof UndoableValueChange) {
                this.newValue = edit.newValue;
                return true;
            }
            return false;
        }
    }
    
    const manager = new UndoManager();
    manager.setListener(()=> {
        console.log((manager.canUndo() ? "enable" : "disable") + " the undo button");
        console.log((manager.canRedo() ? "enable" : "disable") + " the redo button");
        console.log((manager.isModified() ? "enable" : "disable") + " the save button");
    });
    const applyValue = (value:string)=> console.log(`Value changed to "${value}"`);
    const example = "basic";
    if(example === "basic") {
        applyValue("Foo Bar"); // Value changed to "Foo Bar"
        manager.add(new UndoableValueChange("Hello World", "Foo Bar", applyValue));
        manager.undo(); // Value changed to "Hello World"
        manager.redo(); // Value changed to "Foo Bar"
    } else if(example === "merge") {
        manager.add(new UndoableValueChange("Hello World", "Foo Bar", applyValue));
        console.log(manager.canUndo()); // true
        console.log(manager.isModified()); // true
        manager.add(new UndoableValueChange("Foo Bar", "Hello World", applyValue));
        console.log(manager.canUndo()); // false
        console.log(manager.isModified()); // false
    } else if(example === "modified") {
        console.log(manager.isModified()); // false
        manager.add(new UndoableValueChange("Hello World", "Foo Bar", applyValue));
        console.log(manager.isModified()); // true
        manager.setUnmodified();
        console.log(manager.isModified()); // false
        manager.undo();
        console.log(manager.isModified()); // true
        manager.redo();
        console.log(manager.isModified()); // false
    }

    Report isssues

    Something not working quite as expected? Do you need a feature that has not been implemented yet? Check the issue tracker and add a new one if your problem is not already listed. Please try to provide a detailed description of your problem, including the steps to reproduce it.

    Contribute

    Awesome! If you would like to contribute with a new feature or submit a bugfix, fork this repo and send a pull request. Please, make sure all the unit tests are passing before submitting and add new ones in case you introduced new features.

    License

    Typed-Undo has been released under the zlib/libpng license, meaning you can use it free of charge, without strings attached in commercial and non-commercial projects. Credits are appreciated but not mandatory.

    Install

    npm i typed-undo

    DownloadsWeekly Downloads

    111

    Version

    2.4.0

    License

    Zlib

    Unpacked Size

    20 kB

    Total Files

    9

    Last publish

    Collaborators

    • lusito