Feature: undo/redo for app builder

[gondar00]

This PR adds a shortcut i.e ⌘Z for undo-ing a change made to a component
This PR adds a shortcut i.e ⌘+shift+Z for redo-ing a change made to a component

Define change made to a component?

Change can be user activities such as resizing, deleting, moving the element on the canvas, add-edit component to canvas.

Screen.Recording.2021-11-23.at.5.05.44.PM.mov

---

Implementing Undo-Redo Functionality in Editor.jsx using Immer

What is Immer patches?

To know more about immer please visit their website.
Immer brings in a feature called Patches. That allows us to implement many cool features – one of them being Undo-Redo.

Immer records all the changes that are performed on the draft object and generates an array of JSON objects indicating what has changed. These arrays are called Patches. Immer also produces inverse patches, which are patches that need to be applied if you want to go back to the previous state.

Implementation

appDefinition is the place where all the components including their layout changes are stored. Whenever a change is made to appDefinition: appDefinitionChanged is the callback function invoked every-time any changes to appDefinition are made.

In this callback function have added: immer function i.e

    produce(
      this.state.appDefinition,
      (draft) => {
        draft.components = newDefinition.components;
      },
      this.handleAddPatch
    );

Next, handleAddPatch function handles 5 things:

1. Updating the currentVersion
2. Add the redo and undo keys to the currentVersionChanges object
3. Sets canUndo & canRedo properties
4. When a new patch is added it deletes the redo version i.e. delete currentVersion + 1
5. Maintains the max number of version as a lot of versions can effect the browser perf. currently set to 100. i.e if the currentVersion is 100 then it starts deleting the 0th version, 101 then it deletes the 1st version and so on, such that at any given point in time the maximum number of component versions stored inside currentVersionChanges are 100 to preserve browser performance due to the deeply nested nature of appDefinition the currentVersionChanges can be a very large object.

  handleAddPatch = (patches, inversePatches) => {
    if (isEmpty(patches) && isEmpty(inversePatches)) return;
    this.currentVersion++;
    this.currentVersionChanges[this.currentVersion] = {
      redo: patches,
      undo: inversePatches,
    };

    this.canUndo = this.currentVersionChanges.hasOwnProperty(this.currentVersion - 1);
    this.canRedo = this.currentVersionChanges.hasOwnProperty(this.currentVersion + 1);

    delete this.currentVersionChanges[this.currentVersion + 1];
    delete this.currentVersionChanges[this.currentVersion - this.noOfVersionsSupported];
  }

Things to keep in mind

1. When we receive an undoable action – we can always undo but cannot redo anymore.
2. Whenever you perform an undo – you can always redo and keep doing undo as long as we have a patch for it.
3. Whenever you redo – you can always undo and keep doing redo as long as we have a patch for it.

[Navaneeth-pk]

Please fix the merge conflicts.
@gondar00

[gondar00]

@Navaneeth-pk fixed merge conflict 👍

[sherfin94]

Adding an event handler, and undoing a couple of times seems to crash the app:

[sherfin94]

Adding an event handler, and undoing a couple of times seems to crash the app:

Actually, now I think the crash happens whenever the inspector panel is open.

1. Add any component
2. Open its inspector panel
3. Undo several times

@gondar00

[gondar00]

Thanks @sherfin94

I was able to reproduce this bug, its related to inspector panel

Screen.Recording.2021-12-08.at.4.53.41.PM.mov

1. click on widget
2. open inspector
3. undo, undo, undo
4. app crashes

It's related to inspector panel click event when it opens, I am looking into it, will post the fix soon

[gondar00]

@sherfin94 added the fix

[akshaysasidrn]

Apologies for late question, do we also have to add some buttons as well for undo/redo?

[akshaysasidrn]

nitpick: will this be confusing later b/w app's current version and immer patch's current version? ́😅

[gondar00]

Actually app version can be version 1, but the immer patch's current version can be anywhere between a range of 1-100,

[akshaysasidrn]

I meant we store currentVersionId for apps at db, was speaking in terms of that.

[sherfin94]

@sherfin94 added the fix

Hey @gondar00, looks like the crash still happens in certain scenarios:

1. Add a button first
2. Then add a table
3. Click on table handle (so that inspector opens)
4. Undo twice

[gondar00]

@sherfin94 added the fix

Hey @gondar00, looks like the crash still happens in certain scenarios:

1. Add a button first
2. Then add a table
3. Click on table handle (so that inspector opens)
4. Undo twice

This I've added a check it seems to work fine now, thanks ^^

[sherfin94]

Looks like a great PR @gondar00 👏🏼 👏🏼

One small thing, unrelated to the main purpose of this PR that we'll have to fix is, the new type of toasts doesn't show different colors when different types of alert is selected (success, failure etc).

[akshaysasidrn]

Great work @gondar00 🙌🏽