1 files changed, 47 insertions, 0 deletions
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
new file mode 100644
index 000000000..f5af09e5b
--- /dev/null
+++ b/src/client/views/UndoStack.tsx
@@ -0,0 +1,47 @@
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { UndoManager } from '../util/UndoManager';
+import './UndoStack.scss';
+
+interface UndoStackProps {
+    width?: number;
+    height?: number;
+    inline?: boolean;
+}
+@observer
+export class UndoStack extends React.Component<UndoStackProps> {
+    @observable static HideInline: boolean;
+    @observable static Expand: boolean;
+    render() {
+        return this.props.inline && UndoStack.HideInline ? null : (
+            <div
+                className="undoStack-outerContainer"
+                style={{ width: this.props.width, height: this.props.height ? (UndoStack.Expand ? 4 : 1) * this.props.height : undefined, top: UndoStack.Expand && this.props.height ? -this.props.height * 3 : undefined }}
+                onClick={action(e => (UndoStack.Expand = !UndoStack.Expand))}
+                onDoubleClick={action(e => (UndoStack.Expand = UndoStack.HideInline = false))}>
+                <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
+                    <div className="undoStack-resultContainer" key={0}>
+                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', textAlign: 'center' }}>
+                            Undo/Redo Stack
+                        </div>
+                    </div>
+                    {UndoManager.undoStackNames.map((name, i) => (
+                        <div className="undoStack-resultContainer" key={i}>
+                            <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
+                        </div>
+                    ))}
+                    {Array.from(UndoManager.redoStackNames)
+                        .reverse()
+                        .map((name, i) => (
+                            <div className="undoStack-resultContainer" key={i}>
+                                <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
+                                    {name.replace(/[^\.]*\./, '')}
+                                </div>
+                            </div>
+                        ))}
+                </div>
+            </div>
+        );
+    }
+}