Event view widgets are now correctly disabled while debugging.

src/core/gui/Button.ts

@@ -2,16 +2,15 @@ import { button, Icon, icon, span } from "./dom";
 import "./Button.css";
 import { Observable } from "../observable/Observable";
 import { emitter } from "../observable";
-import { Control } from "./Control";
+import { Control, ControlOptions } from "./Control";
-import { WidgetOptions } from "./Widget";
 import { Property } from "../observable/property/Property";
 import { WritableProperty } from "../observable/property/WritableProperty";
 import { WidgetProperty } from "../observable/property/WidgetProperty";
 
-export type ButtonOptions = WidgetOptions & {
+export type ButtonOptions = ControlOptions & {
-    text?: string | Property<string>;
+    readonly text?: string | Property<string>;
-    icon_left?: Icon;
+    readonly icon_left?: Icon;
-    icon_right?: Icon;
+    readonly icon_right?: Icon;
 };
 
 export class Button extends Control {

src/core/gui/ComboBox.ts

@@ -134,6 +134,12 @@ export class ComboBox<T> extends LabelledControl {
         this.finalize_construction();
     }
 
+    protected set_enabled(enabled: boolean): void {
+        super.set_enabled(enabled);
+        this.input_element.disabled = !enabled;
+        this.menu.enabled.val = enabled;
+    }
+
     protected set_selected(selected?: T): void {
         this.input_element.value = selected ? this.to_label(selected) : "";
         this.menu.selected.val = selected;

src/core/gui/DropDown.ts

@@ -1,15 +1,16 @@
 import { disposable_listener, div, Icon } from "./dom";
 import "./DropDown.css";
 import { Property } from "../observable/property/Property";
-import { Button, ButtonOptions } from "./Button";
+import { Button } from "./Button";
 import { Menu } from "./Menu";
-import { Control } from "./Control";
+import { Control, ControlOptions } from "./Control";
 import { Observable } from "../observable/Observable";
 import { Emitter } from "../observable/Emitter";
 import { emitter } from "../observable";
 
-export type DropDownOptions<T> = ButtonOptions & {
+export type DropDownOptions<T> = ControlOptions & {
     readonly text: string;
+    readonly icon_left?: Icon;
     readonly items: readonly T[] | Property<readonly T[]>;
     readonly to_label?: (element: T) => string;
 };
@@ -71,6 +72,7 @@ export class DropDown<T> extends Control {
     protected set_enabled(enabled: boolean): void {
         super.set_enabled(enabled);
         this.button.enabled.val = enabled;
+        this.menu.enabled.val = enabled;
     }
 
     private button_mousedown = (): void => {

src/core/gui/LabelledControl.ts

@@ -1,8 +1,7 @@
 import { Label } from "./Label";
-import { Control } from "./Control";
+import { Control, ControlOptions } from "./Control";
-import { WidgetOptions } from "./Widget";
 
-export type LabelledControlOptions = WidgetOptions & {
+export type LabelledControlOptions = ControlOptions & {
     readonly label?: string;
 };
 

src/core/gui/Menu.ts

@@ -190,6 +190,7 @@ export class Menu<T> extends Widget {
     }
 
     private select_item(index: number): void {
+        if (!this.enabled.val) return;
         const item = this.items.val[index];
         if (item === undefined) return;
 

src/core/gui/Select.ts

@@ -81,6 +81,7 @@ export class Select<T> extends LabelledControl {
     protected set_enabled(enabled: boolean): void {
         super.set_enabled(enabled);
         this.button.enabled.val = enabled;
+        this.menu.enabled.val = enabled;
     }
 
     protected set_selected(selected?: T): void {

src/hunt_optimizer/gui/WantedItemsView.css

@@ -3,7 +3,7 @@
     flex-direction: column;
     align-items: stretch;
     padding: 0 6px;
-    min-width: 200px;
+    min-width: 220px;
 }
 
 .hunt_optimizer_WantedItemsView .hunt_optimizer_WantedItemsView_table_wrapper {

src/quest_editor/gui/EventView.ts

@@ -42,6 +42,7 @@ export class EventView extends View {
             new DropDown({
                 text: "Add action",
                 items: QuestEventActionTypes,
+                enabled: this.inputs_enabled,
                 to_label(type: QuestEventActionType): string {
                     switch (type) {
                         case QuestEventActionType.SpawnNpcs:
@@ -148,7 +149,12 @@ export class EventView extends View {
             );
         }
 
-        const remove_button = disposer.add(new Button({ icon_left: Icon.Remove }));
+        const remove_button = disposer.add(
+            new Button({
+                icon_left: Icon.Remove,
+                enabled: this.inputs_enabled,
+            }),
+        );
 
         disposer.add_all(
             remove_button.onclick.observe(() => this.ctrl.remove_action(this.event, action)),

src/quest_editor/gui/EventsView.ts

@@ -99,6 +99,10 @@ export class EventsView extends ResizableView {
     protected set_enabled(enabled: boolean): void {
         super.set_enabled(enabled);
 
+        for (const child of this.children) {
+            child.enabled.val = enabled;
+        }
+
         for (const dag_view of this.sub_graph_views.values()) {
             if (dag_view.element.parentNode) {
                 dag_view.enabled.val = enabled;

src/quest_editor/gui/QuestEditorView.ts

@@ -157,6 +157,7 @@ export class QuestEditorView extends ResizableView {
                 const layout = await this.layout;
 
                 if (quest_editor_store.quest_runner.running.val === running) {
+                    // Should return at most 1 item, but we loop over the array just to be sure.
                     const runner_items = layout.root.getItemsById(
                         this.view_map.get(QuestRunnerRendererView)!.name,
                     );