Single-update undo/redo #1374

apedroferreira · 2022-11-22T19:06:46Z

Closes #845
Closes #1192
Preview URL: https://toolpad-pr-1374.onrender.com/

Update the DOM only a single time for each drag & drop operation/resizing/delete, so that undo/redo works without throttling.

apedroferreira · 2022-11-29T17:49:50Z

@Janpot I've removed some methods from domApi in the last commit, the ones that seemed most likely to be used in updates with more than one change. Let me know if you think I should remove more or less methods.

bytasv

If dom changes are done in atomic update why do we still need throttle? Wouldn't the goal of this PR be to get rid of throttle entirely?
You mentioned in other PR that throttle might still be needed when undoing changes in a text input, though our undo/redo implementation should not be even triggered inside text inputs, so I'm wondering if it's related to that?

Janpot · 2022-11-30T13:01:25Z

The undo would happen natively in the text input, but the toolpad undo stack won't reflect this, it will just add another stack entry on top instead of popping one off. a subsequent redo will behave wrong.

example (this is already current behavior):

add a button
focus the content prop and add text at the end " foo", it should now read "Button Text foo"
Cmd+Z, it should now read "Button Text" again
remove focus from the input
Cmd+Z, it should now remove the button, but instead it adds back " foo", you'll have to Cmd+Z twice more to get the button removed.

We'll need to fix this and ☝️ can be an integration test

The problem will compound the more text you write and undo/redo in the text input.

As soon as we remove the throttling, every update to the textinput will get its own stack entry. So one entry for every letter typed, and then one entry for every time undo or redo is called within the textinput.

bytasv · 2022-11-30T14:19:31Z

Thanks for explanation Jan (I missed your reply in another PR), now its clear to me. I agree we need to fix that and cover with test

apedroferreira · 2022-12-14T21:48:57Z

Can I get a final review here in order to merge, please? All suggestions should have been addressed already.
Changing views is ready in #1417, but I can't get a preview live until I merge this part.

Edit: Ah nevermind this still needs the text input changes or it's a bit broken - feel free to pre-approve this PR anyway so I can do that in a separate PR

bytasv · 2022-12-15T07:53:43Z

test/integration/undo-redo/index.spec.ts

@@ -42,42 +41,3 @@ test('test basic undo and redo', async ({ page, browserName, api }) => {
 // Redo should bring back text field
 await expect(canvasInputLocator).toHaveCount(3);
 });
-
-test('test batching quick actions into single undo entry', async ({ page, browserName, api }) => {


This spec should still be relevant, specifically for text field changes

We can have something more specific once we have specific logic for text inputs?
Anyway I won't merge this until I add a test that does the same that this one did.

This test should work fine after all, I had the impression that it was testing more general changes but I was wrong!

bytasv

Apart from from spec comment all seems to be working great 👍

apedroferreira · 2022-12-15T17:26:20Z

I've merged text input undo/redo into this PR so that it works as a whole and can be merged (#1459).
In that PR I'm just using debouncing for text input changes + disabling the native browser undo/redo in text inputs (in the page view only - native undo/redo won't be blocked in other views).

Also re-added the batching test as looks like it's perfect for testing the text inputs after all!

Preview URL: https://toolpad-pr-1374.onrender.com/

apedroferreira · 2022-12-16T10:44:28Z

I'm gonna merge this PR later today if it's ok!
Feel free to check these changes (just 4 files) #1459, and the preview at https://toolpad-pr-1374.onrender.com/ (includes atomic updates + text input undo/redo) in case there's any more comments.
I shouldn't have requested for reviews yesterday until having added these extra changes, so sorry for that.

Janpot · 2022-12-16T10:54:00Z

packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx

 },
- [connectionNode, domApi],
+ [connectionNode, dom, domApi],


🙂 I think this is why I suggested to use a function in domApi.update. This callback invalidates on every dom change, and it's also not 100% sure it will get the last dom. e.g. imagine a function:

const addConnection = React.useCallback(() => domApi.update(appDom.addConnection(dom)), [dom]); // somewhere else, this function called twice addConnection(); addConnection();

Those would get the same initial version of dom, meaning only one connection is added. While I would expect to have two connections. It would be different if

const addConnection = React.useCallback( () => domApi.update((draft) => appDom.addConnection(draft)), [], );

Would it work to restore and use methods such as domApi.setNodeNamespacedProp (which I had deleted) in cases like this?
And use domApi.update as I'm using it but only when a temporary DOM is needed? domApi.update replaces the whole DOM anyway so in those cases maybe it's fine?

Still thinking of better alternatives, your proposal does seem more "atomic", it's just more difficult to use in RenderOverlay.

I'll try supporting domApi.update((draft) => ... and use it as much as possible where I can, except in the few cases where it's hard to use, I think that should be possible.

Still thinking of better alternatives, your proposal does seem more "atomic", it's just more difficult to use in RenderOverlay.

We can support both methods, like

update: (draft: React.SetStateAction<AppDom>) => void

Also, wouldn't necessarily recommend it, but nothing prevents you from doing:

const addConnection = React.useCallback( () => domApi.update(() => appDom.addConnection(dom)), [dom], );

Looks like I was able to use an updater function everywhere after all!
Commit: 1f7779e
After the refactoring I had made in RenderOverlay I guess it wasn't so difficult there.

As this PR is using the updater function now I will merge this part already!

Use drafts, remove throttling

1575413

apedroferreira requested a review from Janpot November 22, 2022 19:11

apedroferreira self-assigned this Nov 22, 2022

apedroferreira added core Infrastructure work going on behind the scenes enhancement This is not a bug, nor a new feature labels Nov 22, 2022

apedroferreira added 7 commits November 22, 2022 19:14

Forgot one dom

ee45df3

Merge remote-tracking branch 'origin/master' into atomic-undo-redo

9a8d071

Fix types

a3bb650

Try not using nested functions

28d5799

Atomic column normalization

6b332f7

Use draft page nodes

4c667d8

Fix element removal

65e7e7f

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 November 24, 2022 15:42 — with Render Destroyed

apedroferreira marked this pull request as ready for review November 24, 2022 15:47

Merge remote-tracking branch 'origin/master' into atomic-undo-redo

a157576

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 November 24, 2022 15:48 — with Render View deployment

apedroferreira requested a review from a team November 24, 2022 15:49

Fix moving elements

ea42bfb

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 November 24, 2022 19:41 — with Render Destroyed

Janpot mentioned this pull request Nov 28, 2022

Undo/Redo action #226

Closed

10 tasks

Re-add throttling

4ae076d

oliviertassinari requested a deployment to atomic-undo-redo - toolpad-db PR #1374 November 28, 2022 18:46 — with Render Abandoned

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 November 28, 2022 18:48 — with Render View deployment

Remove some domAPI methods

d5f6b69

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 November 29, 2022 17:31 — with Render View deployment

bytasv reviewed Nov 30, 2022

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 30, 2022

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 December 12, 2022 18:38 — with Render View deployment

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 14, 2022

apedroferreira requested a review from bytasv December 14, 2022 21:47

Merge remote-tracking branch 'origin/master' into atomic-undo-redo

34f59a1

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 December 14, 2022 21:50 — with Render View deployment

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 14, 2022

Remove batching test

baabb44

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 December 14, 2022 22:07 — with Render View deployment

bytasv reviewed Dec 15, 2022

View reviewed changes

bytasv approved these changes Dec 15, 2022

View reviewed changes

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 December 15, 2022 16:02 — with Render Destroyed

apedroferreira force-pushed the atomic-undo-redo branch from 0aa258c to baabb44 Compare December 15, 2022 16:06

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 December 15, 2022 16:06 — with Render View deployment

Debounce text input changes (#1459)

ab64a1c

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 December 15, 2022 17:24 — with Render Destroyed

Merge remote-tracking branch 'origin/master' into atomic-undo-redo

8c10a84

oliviertassinari deployed to atomic-undo-redo - toolpad PR #1374 December 15, 2022 17:28 — with Render View deployment

Janpot reviewed Dec 16, 2022

View reviewed changes

Use updater function in DOM API updates

1f7779e

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 December 16, 2022 12:48 — with Render Destroyed

Readd method

5d1fd30

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 December 16, 2022 12:53 — with Render Destroyed

Merge remote-tracking branch 'origin/master' into atomic-undo-redo

1d8b49e

oliviertassinari temporarily deployed to atomic-undo-redo - toolpad PR #1374 December 16, 2022 12:54 — with Render Destroyed

bharatkashyap approved these changes Dec 20, 2022

View reviewed changes

apedroferreira merged commit 1bab118 into master Dec 20, 2022

apedroferreira deleted the atomic-undo-redo branch December 20, 2022 09:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Single-update undo/redo #1374

Single-update undo/redo #1374

apedroferreira commented Nov 22, 2022 •

edited

Loading

apedroferreira commented Nov 29, 2022 •

edited

Loading

bytasv left a comment

Janpot commented Nov 30, 2022 •

edited

Loading

bytasv commented Nov 30, 2022

apedroferreira commented Dec 14, 2022 •

edited

Loading

bytasv Dec 15, 2022

apedroferreira Dec 15, 2022 •

edited

Loading

apedroferreira Dec 15, 2022

bytasv left a comment

apedroferreira commented Dec 15, 2022 •

edited

Loading

apedroferreira commented Dec 16, 2022

Janpot Dec 16, 2022 •

edited

Loading

apedroferreira Dec 16, 2022

apedroferreira Dec 16, 2022

apedroferreira Dec 16, 2022 •

edited

Loading

Janpot Dec 16, 2022 •

edited

Loading

apedroferreira Dec 16, 2022 •

edited

Loading

apedroferreira Dec 20, 2022

Single-update undo/redo #1374

Single-update undo/redo #1374

Conversation

apedroferreira commented Nov 22, 2022 • edited Loading

apedroferreira commented Nov 29, 2022 • edited Loading

bytasv left a comment

Choose a reason for hiding this comment

Janpot commented Nov 30, 2022 • edited Loading

bytasv commented Nov 30, 2022

apedroferreira commented Dec 14, 2022 • edited Loading

bytasv Dec 15, 2022

Choose a reason for hiding this comment

apedroferreira Dec 15, 2022 • edited Loading

Choose a reason for hiding this comment

apedroferreira Dec 15, 2022

Choose a reason for hiding this comment

bytasv left a comment

Choose a reason for hiding this comment

apedroferreira commented Dec 15, 2022 • edited Loading

apedroferreira commented Dec 16, 2022

Janpot Dec 16, 2022 • edited Loading

Choose a reason for hiding this comment

apedroferreira Dec 16, 2022

Choose a reason for hiding this comment

apedroferreira Dec 16, 2022

Choose a reason for hiding this comment

apedroferreira Dec 16, 2022 • edited Loading

Choose a reason for hiding this comment

Janpot Dec 16, 2022 • edited Loading

Choose a reason for hiding this comment

apedroferreira Dec 16, 2022 • edited Loading

Choose a reason for hiding this comment

apedroferreira Dec 20, 2022

Choose a reason for hiding this comment

apedroferreira commented Nov 22, 2022 •

edited

Loading

apedroferreira commented Nov 29, 2022 •

edited

Loading

Janpot commented Nov 30, 2022 •

edited

Loading

apedroferreira commented Dec 14, 2022 •

edited

Loading

apedroferreira Dec 15, 2022 •

edited

Loading

apedroferreira commented Dec 15, 2022 •

edited

Loading

Janpot Dec 16, 2022 •

edited

Loading

apedroferreira Dec 16, 2022 •

edited

Loading

Janpot Dec 16, 2022 •

edited

Loading

apedroferreira Dec 16, 2022 •

edited

Loading