allow to undo more than 1 step

src/mol-plugin-ui/structure/components.tsx

@@ -113,7 +113,7 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
                 <ToggleButton icon='bookmarks' label='Preset' toggle={this.togglePreset} isSelected={this.state.action === 'preset'} disabled={this.isDisabled} />
                 <ToggleButton icon='plus' label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
                 <ToggleButton icon='cog' label='' title='Options' style={{ flex: '0 0 40px' }} toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.isDisabled} />
-                <IconButton customClass='msp-flex-item' style={{ flex: '0 0 40px' }} onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} icon='ccw' title='Some mistakes of the past can be undone.' />
+                <IconButton customClass='msp-flex-item' style={{ flex: '0 0 40px' }} onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} icon='back' title='Some mistakes of the past can be undone.' />
             </div>
             {this.state.action === 'preset' && this.presetControls}
             {this.state.action === 'add' && <div className='msp-control-offset'>

src/mol-state/state.ts

@@ -89,11 +89,20 @@ class State {
         return this.history.length > 0;
     }
 
+    private undoingHistory = false;
+
     undo() {
-        const tree = this.history.shift();
-        if (!tree) return;
-        this.events.historyUpdated.next({ state: this });
-        return this.updateTree(tree, { canUndo: false });
+        return Task.create('Undo', async ctx => {
+            const tree = this.history.shift();
+            if (!tree) return;
+            this.events.historyUpdated.next({ state: this });
+            this.undoingHistory = true;
+            try {
+                await this.updateTree(tree, { canUndo: false }).runInContext(ctx);
+            } finally {
+                this.undoingHistory = false;
+            }
+        });
     }
 
     getSnapshot(): State.Snapshot {
@@ -234,7 +243,7 @@ class State {
                 
                 this.events.isUpdating.next(false);
                 if (!options?.canUndo) {
-                    this.clearHistory();
+                    if (!this.undoingHistory) this.clearHistory();
                 } else if (!reverted) {
                     this.addHistory(snapshot!);
                 }