From 96c7b9e15b33e8c2de1e559ea2735f7086213911 Mon Sep 17 00:00:00 2001
From: Arthur Clemens <arthurclemens@gmail.com>
Date: Mon, 6 Mar 2023 17:13:52 +0100
Subject: [PATCH] Add grouping

---
 README.md                | 39 +++++++++++++++++++++++++---
 demo/index.html          |  7 +++++
 demo/js/circledrawer.js  | 11 ++++++++
 demo/js/demo.js          | 12 ++++++++-
 lib/undomanager.js       | 45 ++++++++++++++++++++------------
 package-lock.json        |  4 +--
 package.json             |  2 +-
 spec/SpecRunner.html     | 54 +++++++++++++++++++++++++++++++++++++++
 spec/undomanager.spec.js | 55 +++++++++++++++++++++++++++++++++-------
 9 files changed, 197 insertions(+), 32 deletions(-)
 create mode 100644 spec/SpecRunner.html

diff --git a/README.md b/README.md
index c729916..2314bdb 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ Simple undo manager to provide undo and redo actions in JavaScript applications.
 - [Installation](#installation)
 - [Example](#example)
 - [Methods](#methods)
+  - [add](#add)
   - [undo](#undo)
   - [redo](#redo)
   - [clear](#clear)
@@ -49,8 +50,7 @@ undoManager.add({
 });
 ```
 
-To make an action undoable, you'd add an undo/redo pair to the undo manager:
-
+To make an action undoable, you'd add an undo/redo command pair to the undo manager:
 
 ```js
 const undoManager = new UndoManager();
@@ -93,6 +93,34 @@ console.log(people); // logs: {101: "John"}
 
 ## Methods
 
+### add
+
+Adds an undo/redo command pair to the stack.
+
+```js
+function createPerson(id, name) {
+  // first creation
+  addPerson(id, name);
+
+  // make undoable
+  undoManager.add({
+    undo: () => removePerson(id),
+    redo: () => addPerson(id, name)
+  });
+}
+```
+
+Optionally add a `groupId` to identify related command pairs. Undo and redo actions will then be performed on all adjacent command pairs with that group id.
+
+```js
+undoManager.add({
+  groupId: 'auth',
+  undo: () => removePerson(id),
+  redo: () => addPerson(id, name)
+});
+```
+
+
 ### undo
 
 Performs the undo action.
@@ -101,6 +129,8 @@ Performs the undo action.
 undoManager.undo();
 ```
 
+If a `groupId` was set, the undo action will be performed on all adjacent command pairs with that group id.
+
 ### redo
 
 Performs the redo action.
@@ -109,6 +139,8 @@ Performs the redo action.
 undoManager.redo();
 ```
 
+If a `groupId` was set, the redo action will be performed on all adjacent command pairs with that group id.
+
 ### clear
 
 Clears all stored states.
@@ -159,10 +191,11 @@ const index = undoManager.getIndex();
 
 ### getCommands
 
-Returns the list of queued commands.
+Returns the list of queued commands, optionally filtered by group id.
 
 ```js
 const commands = undoManager.getCommands();
+const commands = undoManager.getCommands(groupId);
 ```
 
 ## Use with CommonJS
diff --git a/demo/index.html b/demo/index.html
index f31baaf..f1edb53 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -34,6 +34,13 @@
             placeholder="Limit: 0"
           />
           <div class="spacer"></div>
+          <button
+            type="button"
+            class="btn btn-default"
+            id="btnGroup"
+          >
+            Group
+          </button>
           <button
             type="button"
             class="btn btn-default"
diff --git a/demo/js/circledrawer.js b/demo/js/circledrawer.js
index f529a91..a1aadc2 100644
--- a/demo/js/circledrawer.js
+++ b/demo/js/circledrawer.js
@@ -10,6 +10,7 @@ const CircleDrawer = function (canvasId, undoManager) {
   const circles = [];
   const circleId = 0;
   const drawingCanvas = window.document.getElementById(canvasId);
+  let groupId;
 
   if (drawingCanvas.getContext === undefined) {
     return;
@@ -61,6 +62,7 @@ const CircleDrawer = function (canvasId, undoManager) {
     circles.push(attrs);
     draw();
     undoManager.add({
+      groupId,
       undo: function () {
         removeCircle(attrs.id);
       },
@@ -70,6 +72,13 @@ const CircleDrawer = function (canvasId, undoManager) {
     });
   }
 
+  function setGroupId(id) {
+    groupId = id;
+  }
+  function clearGroupId() {
+    groupId = undefined;
+  }
+
   drawingCanvas.addEventListener(
     'click',
     function (e) {
@@ -121,5 +130,7 @@ const CircleDrawer = function (canvasId, undoManager) {
 
   return {
     clearAll,
+    setGroupId,
+    clearGroupId,
   };
 };
diff --git a/demo/js/demo.js b/demo/js/demo.js
index 9f07bce..f6d7c3f 100644
--- a/demo/js/demo.js
+++ b/demo/js/demo.js
@@ -3,12 +3,12 @@ window.onload = function () {
 
   const undoManager = new window.UndoManager();
   const circleDrawer = new CircleDrawer('view', undoManager);
-
   const ctrlLimit = document.getElementById('ctrlLimit');
   const btnUndo = document.getElementById('btnUndo');
   const btnRedo = document.getElementById('btnRedo');
   const btnClearMemory = document.getElementById('btnClearMemory');
   const btnClearScreen = document.getElementById('btnClearScreen');
+  const btnGroup = document.getElementById('btnGroup');
 
   function updateUI() {
     btnUndo.disabled = !undoManager.hasUndo();
@@ -37,6 +37,16 @@ window.onload = function () {
     updateUI();
   });
 
+  btnGroup.addEventListener('click', function () {
+    const c = btnGroup.classList;
+    c.toggle('active');
+    if (c.contains('active')) {
+      circleDrawer.setGroupId(new Date().getTime());
+    } else {
+      circleDrawer.clearGroupId();
+    }
+  });
+
   function handleLimit(rawLimit) {
     const limit = parseInt(rawLimit, 10);
     if (!isNaN(limit)) {
diff --git a/lib/undomanager.js b/lib/undomanager.js
index 77f0c7d..6247b55 100644
--- a/lib/undomanager.js
+++ b/lib/undomanager.js
@@ -23,9 +23,7 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
       index = -1,
       limit = 0,
       isExecuting = false,
-      callback,
-      // functions
-      execute;
+      callback;
 
     /**
      * Executes a single command.
@@ -34,7 +32,7 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
      * @property {function} command.redo - Redo function
      * @property {string} action         - "undo" or "redo"
      */
-    execute = function (command, action) {
+    function execute(command, action) {
       if (!command || typeof command[action] !== 'function') {
         return this;
       }
@@ -44,14 +42,15 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
 
       isExecuting = false;
       return this;
-    };
+    }
 
     return {
       /**
        * Adds a command to the queue.
-       * @property {object} command        - Command
-       * @property {function} command.undo - Undo function
-       * @property {function} command.redo - Redo function
+       * @property {object} command           - Command
+       * @property {function} command.undo    - Undo function
+       * @property {function} command.redo    - Redo function
+       * @property {string} [command.groupId] - Optional group id
        */
       add: function (command) {
         if (isExecuting) {
@@ -60,7 +59,6 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
         // if we are here after having called undo,
         // invalidate items higher on the stack
         commands.splice(index + 1, commands.length - index);
-
         commands.push(command);
 
         // if limit is set, remove items from the start
@@ -76,7 +74,7 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
         return this;
       },
 
-      /** 
+      /**
        * Pass a function to be called on undo and redo actions.
        * @property {function} callbackFunc - Callback function
        */
@@ -92,8 +90,15 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
         if (!command) {
           return this;
         }
-        execute(command, 'undo');
-        index -= 1;
+
+        const groupId = command.groupId;
+        while (command.groupId === groupId) {
+          execute(command, 'undo');
+          index -= 1;
+          command = commands[index];
+          if (!command || !command.groupId) break;
+        }
+
         if (callback) {
           callback();
         }
@@ -108,8 +113,15 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
         if (!command) {
           return this;
         }
-        execute(command, 'redo');
-        index += 1;
+
+        const groupId = command.groupId;
+        while (command.groupId === groupId) {
+          execute(command, 'redo');
+          index += 1;
+          command = commands[index + 1];
+          if (!command || !command.groupId) break;
+        }
+
         if (callback) {
           callback();
         }
@@ -148,10 +160,11 @@ https://github.com/ArthurClemens/JavaScript-Undo-Manager
 
       /**
        * Returns the list of queued commands.
+       * @param {string} [groupId] - Optionally filter commands by group ID
        * @returns {array}
        */
-      getCommands: function () {
-        return commands;
+      getCommands: function (groupId) {
+        return groupId ? commands.filter(c => c.groupId === groupId) : commands;
       },
 
       /**
diff --git a/package-lock.json b/package-lock.json
index a5d9e0c..bb82fba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "undo-manager",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "undo-manager",
-      "version": "1.0.5",
+      "version": "1.1.0",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {
diff --git a/package.json b/package.json
index 2d5e3ae..6297786 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "undo-manager",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Simple undo manager to provide undo and redo actions in JavaScript applications.",
   "main": "lib/undomanager.js",
   "scripts": {
diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html
new file mode 100644
index 0000000..f78741f
--- /dev/null
+++ b/spec/SpecRunner.html
@@ -0,0 +1,54 @@
+<!-- Use this file to manually iterate on tests. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Jasmine Spec Runner for Undo Manager</title>
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.css"
+    />
+    <script
+      type="text/javascript"
+      src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine-html.js"
+    ></script>
+
+    <script type="text/javascript" src="../lib/undomanager.js"></script>
+    <script type="text/javascript" src="undomanager.spec.js"></script>
+
+    <script type="text/javascript">
+      (function () {
+        const jasmineEnv = jasmine.getEnv();
+        jasmineEnv.updateInterval = 1000;
+
+        const htmlReporter = new jasmine.HtmlReporter();
+
+        jasmineEnv.addReporter(htmlReporter);
+
+        jasmineEnv.specFilter = function (spec) {
+          return htmlReporter.specFilter(spec);
+        };
+
+        const currentWindowOnload = window.onload;
+
+        window.onload = function () {
+          if (currentWindowOnload) {
+            currentWindowOnload();
+          }
+          execJasmine();
+        };
+
+        function execJasmine() {
+          jasmineEnv.execute();
+        }
+      })();
+    </script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/spec/undomanager.spec.js b/spec/undomanager.spec.js
index ae99d57..6fab3f1 100644
--- a/spec/undomanager.spec.js
+++ b/spec/undomanager.spec.js
@@ -1,16 +1,17 @@
 describe('UndoManager Suite', function () {
-  let self, undoManager, items, addItem, removeItem, addItemToUndo;
+  let undoManager, items;
 
-  self = this;
-
-  addItem = function (item) {
+  function addItem(item) {
     items.push(item);
-  };
-  removeItem = function () {
+  }
+
+  function removeItem() {
     items.pop();
-  };
-  addItemToUndo = function (item) {
+  }
+
+  function addItemToUndo(item, groupId) {
     undoManager.add({
+      groupId,
       undo: function () {
         removeItem();
       },
@@ -18,7 +19,7 @@ describe('UndoManager Suite', function () {
         addItem(item);
       },
     });
-  };
+  }
 
   beforeEach(function () {
     // Always start with a clean slate
@@ -224,4 +225,40 @@ describe('UndoManager Suite', function () {
     expect(undoManager.hasRedo()).toBe(true);
     expect(undoManager.getCommands().length).toBe(3);
   });
+
+  it('Calling undo/redo/clear with group ID', function () {
+    let groupId;
+    addItem('A');
+    addItemToUndo('A');
+    addItem('B');
+    addItemToUndo('B');
+
+    groupId = 'CDE';
+    addItem('C');
+    addItemToUndo('C', groupId);
+    addItem('D');
+    addItemToUndo('D', groupId);
+    addItem('E');
+    addItemToUndo('E', groupId);
+    addItem('F');
+    addItemToUndo('F');
+
+    // Undo
+    expect(items.length).toBe(6);
+    undoManager.undo();
+    expect(items.length).toBe(5);
+    undoManager.undo();
+    expect(items.length).toBe(2);
+    expect(undoManager.getCommands(groupId).length).toBe(3);
+
+    // Redo
+    undoManager.redo();
+    expect(items.length).toBe(5);
+    undoManager.redo();
+    expect(items.length).toBe(6);
+
+    // Clear
+    undoManager.clear();
+    expect(undoManager.getCommands(groupId).length).toBe(0);
+  });
 });