Added ASM editor history navigation with mouse buttons and keyboard.

src/quest_editor/gui/AsmEditorView.ts

@@ -3,6 +3,7 @@ import { el } from "../../core/gui/dom";
 import { editor, KeyCode, KeyMod } from "monaco-editor";
 import { asm_editor_store } from "../stores/AsmEditorStore";
 import { AsmEditorToolBar } from "./AsmEditorToolBar";
+import { EditorHistory } from "./EditorHistory";
 import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 
 editor.defineTheme("phantasmal-world", {
@@ -29,6 +30,7 @@ const DUMMY_MODEL = editor.createModel("", "psoasm");
 export class AsmEditorView extends ResizableWidget {
     private readonly tool_bar_view = this.disposable(new AsmEditorToolBar());
     private readonly editor: IStandaloneCodeEditor;
+    private readonly history: EditorHistory;
 
     readonly element = el.div();
 
@@ -51,13 +53,25 @@ export class AsmEditorView extends ResizableWidget {
             }),
         );
 
-        this.editor.addCommand(KeyMod.CtrlCmd | KeyCode.KEY_Z, () => {});
-        this.editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KEY_Z, () => {});
-        const quick_command = this.editor.getAction("editor.action.quickCommand");
-        this.editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KEY_P, () => {
-            quick_command.run();
-        });
+        this.history = this.disposable(new EditorHistory(this.editor));
 
+        // Commands and actions.
+        this.editor.addCommand(KeyMod.CtrlCmd | KeyCode.KEY_Z, () => {});
+
+        this.editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KEY_Z, () => {});
+
+        const quick_command = this.editor.getAction("editor.action.quickCommand");
+
+        this.disposables(
+            this.editor.addAction({
+                id: "editor.action.quickCommand",
+                label: "Command Palette",
+                keybindings: [KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KEY_P],
+                run: () => quick_command.run(),
+            }),
+        );
+
+        // Undo/Redo
         this.disposables(
             asm_editor_store.did_undo.observe(({ value: source }) => {
                 this.editor.trigger(source, "undo", undefined);
@@ -71,6 +85,7 @@ export class AsmEditorView extends ResizableWidget {
                 ({ value: model }) => {
                     this.editor.updateOptions({ readOnly: model == undefined });
                     this.editor.setModel(model || DUMMY_MODEL);
+                    this.history.reset();
                 },
                 { call_now: true },
             ),

src/quest_editor/gui/EditorHistory.ts

@@ -0,0 +1,102 @@
+import { Disposable } from "../../core/observable/Disposable";
+import { editor, IPosition, KeyCode, KeyMod } from "monaco-editor";
+import { Disposer } from "../../core/observable/Disposer";
+import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
+import ICursorPositionChangedEvent = editor.ICursorPositionChangedEvent;
+import IEditorMouseEvent = editor.IEditorMouseEvent;
+import ScrollType = editor.ScrollType;
+
+export class EditorHistory implements Disposable {
+    private readonly history: IPosition[] = [];
+    private history_index = -1;
+    private capture_history = true;
+    private readonly disposer = new Disposer();
+
+    constructor(private readonly editor: IStandaloneCodeEditor) {
+        this.disposer.add_all(
+            this.editor.onDidChangeCursorPosition(this.did_change_cursor_position),
+
+            this.editor.addAction({
+                id: "phantasmal.action.back",
+                label: "Back",
+                keybindings: [KeyMod.Alt | KeyCode.LeftArrow],
+                run: this.back,
+            }),
+
+            this.editor.addAction({
+                id: "phantasmal.action.forward",
+                label: "Forward",
+                keybindings: [KeyMod.Alt | KeyCode.RightArrow],
+                run: this.forward,
+            }),
+
+            this.editor.onMouseUp(this.mouse_up),
+        );
+    }
+
+    dispose(): void {
+        this.disposer.dispose();
+    }
+
+    reset(): void {
+        this.history.splice(0, Infinity);
+        this.history_index = -1;
+    }
+
+    private did_change_cursor_position = (e: ICursorPositionChangedEvent): void => {
+        if (!this.capture_history) return;
+
+        this.history.splice(this.history_index + 1, Infinity);
+
+        if (
+            e.source === "api" ||
+            this.history_index === -1 ||
+            Math.abs(e.position.lineNumber - this.history[this.history_index].lineNumber) >= 10
+        ) {
+            this.history.push(e.position);
+            this.history_index++;
+        } else {
+            this.history[this.history_index] = e.position;
+        }
+    };
+
+    private back = async (): Promise<void> => {
+        if (this.history_index > 0) {
+            this.set_position(this.history[--this.history_index]);
+        }
+    };
+
+    private forward = async (): Promise<void> => {
+        if (this.history_index + 1 < this.history.length) {
+            this.set_position(this.history[++this.history_index]);
+        }
+    };
+
+    private set_position = (position: IPosition): void => {
+        this.capture_history = false;
+        this.editor.setPosition(position);
+        this.editor.revealPositionInCenterIfOutsideViewport(position, ScrollType.Immediate);
+        this.capture_history = true;
+    };
+
+    private mouse_up = (e: IEditorMouseEvent): void => {
+        const button = e.event.browserEvent.button;
+        const buttons = e.event.browserEvent.buttons;
+
+        if (button === 3) {
+            if (buttons === 0) {
+                e.event.preventDefault();
+                this.back();
+            }
+
+            this.editor.focus();
+        } else if (button === 4) {
+            if (buttons === 0) {
+                e.event.preventDefault();
+                this.forward();
+            }
+
+            this.editor.focus();
+        }
+    };
+}