Added toggleable icons that represent breakpoints in the script editor.

src/quest_editor/gui/AsmEditorView.css

@@ -0,0 +1,26 @@
+:root {
+    --red-circle-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4c.367 0 .721.048 1.063.145a3.943 3.943 0 0 1 1.762 1.031 3.944 3.944 0 0 1 1.03 1.762c.097.34.145.695.145 1.062 0 .367-.048.721-.145 1.063a3.94 3.94 0 0 1-1.03 1.765 4.017 4.017 0 0 1-1.762 1.031C8.72 11.953 8.367 12 8 12s-.721-.047-1.063-.14a4.056 4.056 0 0 1-1.765-1.032A4.055 4.055 0 0 1 4.14 9.062 3.992 3.992 0 0 1 4 8c0-.367.047-.721.14-1.063.097-.34.232-.658.407-.953A4.089 4.089 0 0 1 5.98 4.546a3.94 3.94 0 0 1 .957-.401A3.89 3.89 0 0 1 8 4z' fill='%23E51400'/%3E%3C/svg%3E") 50% no-repeat;
+}
+
+.monaco-editor .margin-view-overlays > div:after {
+    cursor: pointer;
+    content: "";
+    position: absolute;
+    left: 0;
+    /* width of parent - width of icon */
+    right: 50px;
+    top: 0;
+    bottom: 0;
+    visibility: hidden;
+    opacity: 0.5;
+    background: var(--red-circle-svg);
+}
+
+.monaco-editor .margin-view-overlays > div:hover:after {
+    visibility: visible;
+}
+
+.quest_editor_AsmEditorView_breakpoint-enabled {
+    /* a red circle */
+    background: var(--red-circle-svg);
+}

src/quest_editor/gui/AsmEditorView.ts

@@ -1,10 +1,12 @@
 import { ResizableWidget } from "../../core/gui/ResizableWidget";
 import { el } from "../../core/gui/dom";
-import { editor, KeyCode, KeyMod } from "monaco-editor";
+import { editor, KeyCode, KeyMod, Range } from "monaco-editor";
 import { asm_editor_store } from "../stores/AsmEditorStore";
 import { AsmEditorToolBar } from "./AsmEditorToolBar";
 import { EditorHistory } from "./EditorHistory";
 import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
+import "./AsmEditorView.css";
+import { ListChangeType } from "../../core/observable/property/list/ListProperty";
 
 editor.defineTheme("phantasmal-world", {
     base: "vs-dark",
@@ -31,6 +33,7 @@ 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();
 
@@ -50,6 +53,7 @@ export class AsmEditorView extends ResizableWidget {
                 wrappingIndent: "indent",
                 renderIndentGuides: false,
                 folding: false,
+                glyphMargin: true,
             }),
         );
 
@@ -90,7 +94,40 @@ export class AsmEditorView extends ResizableWidget {
                 { call_now: true },
             ),
 
+            asm_editor_store.breakpoints.observe_list(change => {
+                if (change.type === ListChangeType.ListChange) {
+                    // update breakpoint icons
+                    this.editor_decoration_ids = this.editor.deltaDecorations(
+                        this.editor_decoration_ids,
+                        asm_editor_store.breakpoints.val.map(line_num => ({
+                            range: new Range(line_num, 0, line_num, 0),
+                            options: {
+                                glyphMarginClassName:
+                                    "quest_editor_AsmEditorView_breakpoint-enabled",
+                                glyphMarginHoverMessage: {
+                                    value: "Breakpoint"
+                                }
+                            },
+                        })),
+                    );
+                }
+            }),
+
             this.editor.onDidFocusEditorWidget(() => asm_editor_store.undo.make_current()),
+
+            this.editor.onMouseDown(e => {
+                switch (e.target.type) {
+                    case editor.MouseTargetType.GUTTER_GLYPH_MARGIN:
+                        const pos = e.target.position;
+                        if (!pos) {
+                            return;
+                        }
+                        asm_editor_store.toggle_breakpoint(pos.lineNumber);
+                        break;
+                    default:
+                        break;
+                }
+            }),
         );
 
         this.finalize_construction(AsmEditorView.prototype);

src/quest_editor/stores/AsmEditorStore.ts

@@ -7,7 +7,7 @@ import { quest_editor_store } from "./QuestEditorStore";
 import { ASM_SYNTAX } from "./asm_syntax";
 import { AssemblyError, AssemblyWarning } from "../scripting/assembly";
 import { Observable } from "../../core/observable/Observable";
-import { emitter, property } from "../../core/observable";
+import { emitter, property, list_property } from "../../core/observable";
 import { WritableProperty } from "../../core/observable/property/WritableProperty";
 import { Property } from "../../core/observable/property/Property";
 import ITextModel = editor.ITextModel;
@@ -15,6 +15,8 @@ import CompletionList = languages.CompletionList;
 import IMarkerData = editor.IMarkerData;
 import SignatureHelpResult = languages.SignatureHelpResult;
 import LocationLink = languages.LocationLink;
+import { WritableListProperty } from "../../core/observable/property/list/WritableListProperty";
+import { ListProperty } from "../../core/observable/property/list/ListProperty";
 
 const assembly_analyser = new AssemblyAnalyser();
 
@@ -88,6 +90,7 @@ export class AsmEditorStore implements Disposable {
     private readonly _did_undo = emitter<string>();
     private readonly _did_redo = emitter<string>();
     private readonly _inline_args_mode: WritableProperty<boolean> = property(true);
+    private readonly _breakpoints: WritableListProperty<number> = list_property();
 
     readonly model: Property<ITextModel | undefined> = this._model;
     readonly did_undo: Observable<string> = this._did_undo;
@@ -101,6 +104,7 @@ export class AsmEditorStore implements Disposable {
     readonly has_issues: Property<boolean> = assembly_analyser.issues.map(
         issues => issues.warnings.length + issues.errors.length > 0,
     );
+    readonly breakpoints: ListProperty<number> = this._breakpoints;
 
     constructor() {
         this.disposer.add_all(
@@ -240,6 +244,16 @@ export class AsmEditorStore implements Disposable {
             this._model.val = undefined;
         }
     }
+
+    public toggle_breakpoint(line_num: number): void {
+        const i = this._breakpoints.val.indexOf(line_num);
+
+        if (i === -1) {
+            this._breakpoints.push(line_num);
+        } else {
+            this._breakpoints.splice(i, 1);
+        }
+    }
 }
 
 export const asm_editor_store = new AsmEditorStore();