phantasmal-world/src/quest_editor/gui/QuestEditorToolBar.ts

import { ToolBar } from "../../core/gui/ToolBar";
import { FileButton } from "../../core/gui/FileButton";
import { Button } from "../../core/gui/Button";
import { undo_manager } from "../../core/undo/UndoManager";
import { Select } from "../../core/gui/Select";
import { Icon } from "../../core/gui/dom";
import { DropDown } from "../../core/gui/DropDown";
import { Episode } from "../../core/data_formats/parsing/quest/Episode";
import {
    AreaAndLabel,
    QuestEditorToolBarController,
} from "../controllers/QuestEditorToolBarController";

export class QuestEditorToolBar extends ToolBar {
    constructor(ctrl: QuestEditorToolBarController) {
        const new_quest_button = new DropDown({
            text: "New quest",
            icon_left: Icon.NewFile,
            items: [Episode.I],
            to_label: episode => `Episode ${Episode[episode]}`,
        });
        const open_file_button = new FileButton("Open file...", {
            icon_left: Icon.File,
            accept: ".qst",
            tooltip: "Open a quest file (Ctrl-O)",
        });
        const save_as_button = new Button("Save as...", {
            icon_left: Icon.Save,
            tooltip: "Save this quest to new file (Ctrl-Shift-S)",
        });
        const undo_button = new Button("Undo", {
            icon_left: Icon.Undo,
            tooltip: undo_manager.first_undo.map(
                action =>
                    (action ? `Undo "${action.description}"` : "Nothing to undo") + " (Ctrl-Z)",
            ),
        });
        const redo_button = new Button("Redo", {
            icon_left: Icon.Redo,
            tooltip: undo_manager.first_redo.map(
                action =>
                    (action ? `Redo "${action.description}"` : "Nothing to redo") +
                    " (Ctrl-Shift-Z)",
            ),
        });
        // TODO: make sure select menu is updated when entity counts change.
        const area_select = new Select<AreaAndLabel>({
            items: ctrl.areas,
            to_label: ({ label }) => label,
        });
        const debug_button = new Button("Debug", {
            icon_left: Icon.Play,
            tooltip: "Debug the current quest in a virtual machine (F5)",
        });
        const resume_button = new Button("Continue", {
            icon_left: Icon.SquareArrowRight,
            tooltip: "Resume execution (F6)",
        });
        const step_over_button = new Button("Step over", {
            icon_left: Icon.LongArrowRight,
            tooltip: "Execute the next line and step over any function calls (F8)",
        });
        const step_in_button = new Button("Step into", {
            icon_left: Icon.LevelDown,
            tooltip: "Execute the next line and step inside any function calls (F7)",
        });
        const step_out_button = new Button("Step out", {
            icon_left: Icon.LevelUp,
            tooltip: "Execute until outside of current call frame (Shift-F8)",
        });
        const stop_button = new Button("Stop", {
            icon_left: Icon.Stop,
            tooltip: "Stop execution (Shift-F5)",
        });

        const children = [
            new_quest_button,
            open_file_button,
            save_as_button,
            undo_button,
            redo_button,
            area_select,
        ];

        if (ctrl.vm_feature_active) {
            children.push(
                debug_button,
                resume_button,
                step_over_button,
                step_in_button,
                step_out_button,
                stop_button,
            );
        }

        super({ children });

        this.disposables(
            new_quest_button.chosen.observe(({ value: episode }) => ctrl.create_new_quest(episode)),

            open_file_button.files.observe(({ value: files }) => {
                if (files.length) {
                    ctrl.open_file(files[0]);
                }
            }),

            save_as_button.click.observe(ctrl.save_as),
            save_as_button.enabled.bind_to(ctrl.can_save),

            undo_button.click.observe(() => undo_manager.undo()),
            undo_button.enabled.bind_to(ctrl.can_undo),

            redo_button.click.observe(() => undo_manager.redo()),
            redo_button.enabled.bind_to(ctrl.can_redo),

            area_select.selected.bind_to(ctrl.current_area),
            area_select.selected.observe(({ value }) => ctrl.set_area(value!)),
            area_select.enabled.bind_to(ctrl.can_select_area),

            debug_button.click.observe(ctrl.debug),
            debug_button.enabled.bind_to(ctrl.can_debug),

            resume_button.click.observe(ctrl.resume),
            resume_button.enabled.bind_to(ctrl.can_step),

            step_over_button.click.observe(ctrl.step_over),
            step_over_button.enabled.bind_to(ctrl.can_step),

            step_in_button.click.observe(ctrl.step_in),
            step_in_button.enabled.bind_to(ctrl.can_step),

            step_out_button.click.observe(ctrl.step_out),
            step_out_button.enabled.bind_to(ctrl.can_step),

            stop_button.click.observe(ctrl.stop),
            stop_button.enabled.bind_to(ctrl.can_stop),
        );

        this.finalize_construction();
    }
}