Highlight the source location currently being executed when VM pauses.

src/quest_editor/QuestRunner.ts

@@ -43,6 +43,7 @@ export class QuestRunner {
 
             const srcloc = this.vm.get_current_source_location();
             if (srcloc && asm_editor_store.breakpoints.val.includes(srcloc.line_no)) {
+                asm_editor_store.set_execution_location(srcloc.line_no);
                 break exec_loop;
             }
 
@@ -61,6 +62,7 @@ export class QuestRunner {
                     this.schedule_frame();
                     break;
                 case ExecutionResult.Halted:
+                    asm_editor_store.unset_execution_location();
                     break exec_loop;
             }
         }

src/quest_editor/gui/AsmEditorView.css

@@ -24,3 +24,7 @@
     /* a red circle */
     background: var(--red-circle-svg);
 }
+
+.quest_editor_AsmEditorView_execution-location {
+    background: hsla(80, 100%, 60%, 0.3);
+}

src/quest_editor/gui/AsmEditorView.ts

@@ -29,11 +29,90 @@ editor.defineTheme("phantasmal-world", {
 
 const DUMMY_MODEL = editor.createModel("", "psoasm");
 
+/**
+ * Merge Monaco decorations into one.
+ */
+function merge_monaco_decorations(
+    ...decos: readonly editor.IModelDeltaDecoration[]
+): editor.IModelDeltaDecoration {
+    if (decos.length === 0) {
+        throw new Error("At least 1 argument is required.");
+    }
+
+    const merged: any = Object.assign({}, decos[0]);
+    merged.options = Object.assign({}, decos[0].options);
+
+    if (decos.length === 1) {
+        return merged;
+    }
+
+    for (let i = 1; i < decos.length; i++) {
+        const deco = decos[i];
+        for (const key of Object.keys(deco.options)) {
+            if (deco.options.hasOwnProperty(key)) {
+                const val = (deco.options as any)[key];
+
+                switch (typeof val) {
+                    case "object":
+                    case "boolean":
+                    case "number":
+                    case "string":
+                        merged.options[key] = val;
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+    }
+
+    return merged;
+}
+/**
+ * Monaco doesn't normally support having more than one decoration per line.
+ * This function enables multiple decorations per line by merging them.
+ */
+function update_monaco_decorations(
+    editor: IStandaloneCodeEditor,
+    deco_opts: editor.IModelDecorationOptions,
+    ...line_nums: readonly number[]
+): void {
+    const old_decos: string[] = [];
+    const delta_decos: editor.IModelDeltaDecoration[] = [];
+
+    if (line_nums.length < 1) {
+        return;
+    }
+
+    for (const line_num of line_nums) {
+        const update_deco = {
+            range: new Range(line_num, 0, line_num, 0),
+            options: deco_opts,
+        };
+
+        const cur_decos = editor.getLineDecorations(line_num);
+        if (cur_decos) {
+            // save current decos for replacement
+            for (const deco of cur_decos) {
+                old_decos.push(deco.id);
+            }
+
+            // merge current and new decos
+            delta_decos.push(merge_monaco_decorations(...cur_decos, update_deco));
+        } else {
+            // nothing to update on this line
+            delta_decos.push(update_deco);
+        }
+    }
+
+    // commit changes
+    editor.deltaDecorations(old_decos, delta_decos);
+}
+
 export class AsmEditorView extends ResizableWidget {
     private readonly tool_bar_view = this.disposable(new AsmEditorToolBar());
     private readonly editor: IStandaloneCodeEditor;
     private readonly history: EditorHistory;
-    private editor_decoration_ids: string[] = [];
 
     readonly element = el.div();
 
@@ -96,19 +175,55 @@ export class AsmEditorView extends ResizableWidget {
 
             asm_editor_store.breakpoints.observe_list(change => {
                 if (change.type === ListChangeType.ListChange) {
-                    // update breakpoint icons
+                    // remove
-                    this.editor_decoration_ids = this.editor.deltaDecorations(
+                    update_monaco_decorations(
-                        this.editor_decoration_ids,
+                        this.editor,
-                        asm_editor_store.breakpoints.val.map(line_num => ({
+                        {
-                            range: new Range(line_num, 0, line_num, 0),
+                            glyphMarginClassName: null,
-                            options: {
+                            glyphMarginHoverMessage: null,
-                                glyphMarginClassName:
+                        },
-                                    "quest_editor_AsmEditorView_breakpoint-enabled",
+                        ...change.removed,
-                                glyphMarginHoverMessage: {
+                    );
-                                    value: "Breakpoint"
+
-                                }
+                    // add
+                    update_monaco_decorations(
+                        this.editor,
+                        {
+                            glyphMarginClassName: "quest_editor_AsmEditorView_breakpoint-enabled",
+                            glyphMarginHoverMessage: {
+                                value: "Breakpoint",
                             },
-                        })),
+                        },
+                        ...change.inserted,
+                    );
+                }
+            }),
+
+            asm_editor_store.execution_location.observe(e => {
+                const old_line_num = e.old_value;
+                const new_line_num = e.value;
+
+                // unset old
+                if (old_line_num !== undefined) {
+                    update_monaco_decorations(
+                        this.editor,
+                        {
+                            className: null,
+                            isWholeLine: false,
+                        },
+                        old_line_num,
+                    );
+                }
+
+                // set new
+                if (new_line_num !== undefined) {
+                    update_monaco_decorations(
+                        this.editor,
+                        {
+                            className: "quest_editor_AsmEditorView_execution-location",
+                            isWholeLine: true,
+                        },
+                        new_line_num,
                     );
                 }
             }),

src/quest_editor/stores/AsmEditorStore.ts

@@ -91,6 +91,7 @@ export class AsmEditorStore implements Disposable {
     private readonly _did_redo = emitter<string>();
     private readonly _inline_args_mode: WritableProperty<boolean> = property(true);
     private readonly _breakpoints: WritableListProperty<number> = list_property();
+    private readonly _execution_location: WritableProperty<number | undefined> = property(undefined);
 
     readonly model: Property<ITextModel | undefined> = this._model;
     readonly did_undo: Observable<string> = this._did_undo;
@@ -105,6 +106,7 @@ export class AsmEditorStore implements Disposable {
         issues => issues.warnings.length + issues.errors.length > 0,
     );
     readonly breakpoints: ListProperty<number> = this._breakpoints;
+    readonly execution_location: Property<number | undefined> = this._execution_location;
 
     constructor() {
         this.disposer.add_all(
@@ -254,6 +256,14 @@ export class AsmEditorStore implements Disposable {
             this._breakpoints.splice(i, 1);
         }
     }
+
+    public set_execution_location(line_num: number): void {
+        this._execution_location.val = line_num;
+    }
+
+    public unset_execution_location(): void {
+        this._execution_location.val = undefined;
+    }
 }
 
 export const asm_editor_store = new AsmEditorStore();