Refactored widgets to make it possible to centralize processing of constructor-provided options. Made widget event/data flow unidirectional.

src/application/gui/ApplicationView.ts

@@ -1,16 +1,14 @@
 import { NavigationView } from "./NavigationView";
 import { MainContentView } from "./MainContentView";
-import { create_element } from "../../core/gui/dom";
+import { el } from "../../core/gui/dom";
 import { ResizableWidget } from "../../core/gui/ResizableWidget";
 
 export class ApplicationView extends ResizableWidget {
-    readonly element = create_element("div", { class: "application_ApplicationView" });
-
     private menu_view = this.disposable(new NavigationView());
     private main_content_view = this.disposable(new MainContentView());
 
     constructor() {
-        super();
+        super(el.div({ class: "application_ApplicationView" }));
 
         this.element.id = "root";
 

src/application/gui/MainContentView.ts

@@ -1,4 +1,4 @@
-import { create_element } from "../../core/gui/dom";
+import { el } from "../../core/gui/dom";
 import { gui_store, GuiTool } from "../../core/stores/GuiStore";
 import { LazyWidget } from "../../core/gui/LazyWidget";
 import { ResizableWidget } from "../../core/gui/ResizableWidget";
@@ -13,14 +13,12 @@ const TOOLS: [GuiTool, () => Promise<ResizableWidget>][] = [
 ];
 
 export class MainContentView extends ResizableWidget {
-    readonly element = create_element("div", { class: "application_MainContentView" });
-
     private tool_views = new Map(
         TOOLS.map(([tool, create_view]) => [tool, this.disposable(new LazyWidget(create_view))]),
     );
 
     constructor() {
-        super();
+        super(el.div({ class: "application_MainContentView" }));
 
         for (const tool_view of this.tool_views.values()) {
             this.element.append(tool_view.element);

src/application/gui/NavigationButton.css

@@ -0,0 +1,24 @@
+.application_NavigationButton input {
+    display: none;
+}
+
+.application_NavigationButton label {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 13px;
+    height: 100%;
+    padding: 0 20px;
+    color: hsl(0, 0%, 65%);
+}
+
+.application_NavigationButton label:hover {
+    color: hsl(0, 0%, 85%);
+    background-color: hsl(0, 0%, 12%);
+}
+
+.application_NavigationButton input:checked + label {
+    color: hsl(0, 0%, 85%);
+    background-color: var(--bg-color);
+}

src/application/gui/NavigationButton.ts

@@ -0,0 +1,29 @@
+import { Widget } from "../../core/gui/Widget";
+import { create_element, el } from "../../core/gui/dom";
+import { GuiTool } from "../../core/stores/GuiStore";
+import "./NavigationButton.css";
+
+export class NavigationButton extends Widget {
+    private input: HTMLInputElement = create_element("input");
+    private label: HTMLLabelElement = create_element("label");
+
+    constructor(tool: GuiTool, text: string) {
+        super(el.span({ class: "application_NavigationButton" }));
+
+        const tool_str = GuiTool[tool];
+
+        this.input.type = "radio";
+        this.input.name = "application_NavigationButton";
+        this.input.value = tool_str;
+        this.input.id = `application_NavigationButton_${tool_str}`;
+
+        this.label.append(text);
+        this.label.htmlFor = `application_NavigationButton_${tool_str}`;
+
+        this.element.append(this.input, this.label);
+    }
+
+    set checked(checked: boolean) {
+        this.input.checked = checked;
+    }
+}

src/application/gui/NavigationView.css

@@ -6,28 +6,3 @@
     background-color: hsl(0, 0%, 10%);
     border-bottom: solid 2px var(--bg-color);
 }
-
-.application_ToolButton input {
-    display: none;
-}
-
-.application_ToolButton label {
-    box-sizing: border-box;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 13px;
-    height: 100%;
-    padding: 0 20px;
-    color: hsl(0, 0%, 65%);
-}
-
-.application_ToolButton label:hover {
-    color: hsl(0, 0%, 85%);
-    background-color: hsl(0, 0%, 12%);
-}
-
-.application_ToolButton input:checked + label {
-    color: hsl(0, 0%, 85%);
-    background-color: var(--bg-color);
-}

src/application/gui/NavigationView.ts

@@ -1,7 +1,8 @@
-import { create_element } from "../../core/gui/dom";
+import { el } from "../../core/gui/dom";
 import "./NavigationView.css";
 import { gui_store, GuiTool } from "../../core/stores/GuiStore";
 import { Widget } from "../../core/gui/Widget";
+import { NavigationButton } from "./NavigationButton";
 
 const TOOLS: [GuiTool, string][] = [
     [GuiTool.Viewer, "Viewer"],
@@ -10,16 +11,14 @@ const TOOLS: [GuiTool, string][] = [
 ];
 
 export class NavigationView extends Widget {
-    readonly element = create_element("div", { class: "application_NavigationView" });
-
     readonly height = 30;
 
-    private buttons = new Map<GuiTool, ToolButton>(
+    private buttons = new Map<GuiTool, NavigationButton>(
-        TOOLS.map(([value, text]) => [value, this.disposable(new ToolButton(value, text))]),
+        TOOLS.map(([value, text]) => [value, this.disposable(new NavigationButton(value, text))]),
     );
 
     constructor() {
-        super();
+        super(el.div({ class: "application_NavigationView" }));
 
         this.element.style.height = `${this.height}px`;
         this.element.onmousedown = this.mousedown;
@@ -43,31 +42,3 @@ export class NavigationView extends Widget {
         if (button) button.checked = true;
     };
 }
-
-class ToolButton extends Widget {
-    element: HTMLElement = create_element("span");
-
-    private input: HTMLInputElement = create_element("input");
-    private label: HTMLLabelElement = create_element("label");
-
-    constructor(tool: GuiTool, text: string) {
-        super();
-
-        const tool_str = GuiTool[tool];
-
-        this.input.type = "radio";
-        this.input.name = "application_ToolButton";
-        this.input.value = tool_str;
-        this.input.id = `application_ToolButton_${tool_str}`;
-
-        this.label.append(text);
-        this.label.htmlFor = `application_ToolButton_${tool_str}`;
-
-        this.element.className = "application_ToolButton";
-        this.element.append(this.input, this.label);
-    }
-
-    set checked(checked: boolean) {
-        this.input.checked = checked;
-    }
-}

src/core/gui/Button.ts

@@ -1,27 +1,28 @@
-import { create_element } from "./dom";
+import { el } from "./dom";
 import "./Button.css";
 import { Observable } from "../observable/Observable";
 import { emitter } from "../observable";
 import { Control } from "./Control";
 import { Emitter } from "../observable/Emitter";
-import { ViewOptions } from "./Widget";
+import { WidgetOptions } from "./Widget";
 
-export class Button extends Control {
+type ButtonOptions = WidgetOptions & {
-    readonly element: HTMLButtonElement = create_element("button", { class: "core_Button" });
+    text?: string;
+};
 
+export class Button extends Control<HTMLButtonElement> {
     readonly click: Observable<MouseEvent>;
 
     private readonly _click: Emitter<MouseEvent> = emitter<MouseEvent>();
 
-    constructor(text: string, options?: ViewOptions) {
+    constructor(text: string, options?: ButtonOptions) {
-        super(options);
+        super(
+            el.button({ class: "core_Button" }, el.span({ class: "core_Button_inner", text })),
+            options,
+        );
 
         this.click = this._click;
 
-        this.element.append(create_element("span", { class: "core_Button_inner", text }));
-
-        this.disposables(this.enabled.observe(({ value }) => (this.element.disabled = !value)));
-
         this.element.onclick = (e: MouseEvent) => this._click.emit({ value: e });
     }
 

src/core/gui/CheckBox.ts

@@ -5,9 +5,7 @@ import { WidgetProperty } from "../observable/WidgetProperty";
 
 export type CheckBoxOptions = LabelledControlOptions;
 
-export class CheckBox extends LabelledControl {
+export class CheckBox extends LabelledControl<HTMLInputElement> {
-    readonly element: HTMLInputElement = create_element("input", { class: "core_CheckBox" });
-
     readonly preferred_label_position = "right";
 
     readonly checked: WritableProperty<boolean>;
@@ -15,14 +13,15 @@ export class CheckBox extends LabelledControl {
     private readonly _checked: WidgetProperty<boolean>;
 
     constructor(checked: boolean = false, options?: CheckBoxOptions) {
-        super(options);
+        super(create_element("input", { class: "core_CheckBox" }), options);
 
         this._checked = new WidgetProperty(this, checked, this.set_checked);
         this.checked = this._checked;
         this.set_checked(checked);
 
         this.element.type = "checkbox";
-        this.element.onchange = () => (this._checked.val = this.element.checked);
+        this.element.onchange = () =>
+            this._checked.set_val(this.element.checked, { silent: false });
     }
 
     protected set_enabled(enabled: boolean): void {

src/core/gui/Control.ts

@@ -1,3 +1,3 @@
 import { Widget } from "./Widget";
 
-export abstract class Control extends Widget {}
+export abstract class Control<E extends HTMLElement> extends Widget<E> {}

src/core/gui/FileButton.ts

@@ -6,11 +6,7 @@ import { Property } from "../observable/Property";
 import { Control } from "./Control";
 import { WritableProperty } from "../observable/WritableProperty";
 
-export class FileButton extends Control {
+export class FileButton extends Control<HTMLElement> {
-    readonly element: HTMLLabelElement = create_element("label", {
-        class: "core_FileButton core_Button",
-    });
-
     readonly files: Property<File[]>;
 
     private input: HTMLInputElement = create_element("input", {
@@ -20,7 +16,11 @@ export class FileButton extends Control {
     private readonly _files: WritableProperty<File[]> = property<File[]>([]);
 
     constructor(text: string, accept: string = "") {
-        super();
+        super(
+            create_element("label", {
+                class: "core_FileButton core_Button",
+            }),
+        );
 
         this.files = this._files;
 

src/core/gui/Input.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-dupe-class-members */
 import { LabelledControl, LabelledControlOptions } from "./LabelledControl";
-import { create_element } from "./dom";
+import { create_element, el } from "./dom";
 import { WritableProperty } from "../observable/WritableProperty";
 import { is_any_property, Property } from "../observable/Property";
 import "./Input.css";
@@ -8,9 +8,7 @@ import { WidgetProperty } from "../observable/WidgetProperty";
 
 export type InputOptions = LabelledControlOptions;
 
-export abstract class Input<T> extends LabelledControl {
+export abstract class Input<T> extends LabelledControl<HTMLElement> {
-    readonly element: HTMLElement;
-
     readonly value: WritableProperty<T>;
 
     protected readonly input: HTMLInputElement;
@@ -25,19 +23,17 @@ export abstract class Input<T> extends LabelledControl {
         input_class_name: string,
         options?: InputOptions,
     ) {
-        super(options);
+        super(el.span({ class: `${class_name} core_Input` }), options);
 
         this._value = new WidgetProperty<T>(this, value, this.set_value);
         this.value = this._value;
 
-        this.element = create_element("span", { class: `${class_name} core_Input` });
-
         this.input = create_element("input", {
             class: `${input_class_name} core_Input_inner`,
         });
         this.input.type = input_type;
         this.input.onchange = () => {
-            this._value.val = this.get_value();
+            this._value.set_val(this.get_value(), { silent: false });
         };
 
         this.element.append(this.input);

src/core/gui/Label.ts

@@ -1,13 +1,11 @@
-import { ViewOptions, Widget } from "./Widget";
+import { WidgetOptions, Widget } from "./Widget";
 import { create_element } from "./dom";
 import { WritableProperty } from "../observable/WritableProperty";
 import "./Label.css";
 import { Property } from "../observable/Property";
 import { WidgetProperty } from "../observable/WidgetProperty";
 
-export class Label extends Widget {
+export class Label extends Widget<HTMLLabelElement> {
-    readonly element = create_element<HTMLLabelElement>("label", { class: "core_Label" });
-
     set for(id: string) {
         this.element.htmlFor = id;
     }
@@ -16,8 +14,8 @@ export class Label extends Widget {
 
     private readonly _text = new WidgetProperty<string>(this, "", this.set_text);
 
-    constructor(text: string | Property<string>, options?: ViewOptions) {
+    constructor(text: string | Property<string>, options?: WidgetOptions) {
-        super(options);
+        super(create_element("label", { class: "core_Label" }), options);
 
         this.text = this._text;
 

src/core/gui/LabelledControl.ts

@@ -1,12 +1,12 @@
 import { Label } from "./Label";
 import { Control } from "./Control";
-import { ViewOptions } from "./Widget";
+import { WidgetOptions } from "./Widget";
 
-export type LabelledControlOptions = ViewOptions & {
+export type LabelledControlOptions = WidgetOptions & {
     label?: string;
 };
 
-export abstract class LabelledControl extends Control {
+export abstract class LabelledControl<E extends HTMLElement = HTMLElement> extends Control<E> {
     abstract readonly preferred_label_position: "left" | "right" | "top" | "bottom";
 
     get label(): Label {
@@ -26,8 +26,8 @@ export abstract class LabelledControl extends Control {
     private readonly _label_text: string;
     private _label?: Label;
 
-    protected constructor(options?: LabelledControlOptions) {
+    protected constructor(element: E, options?: LabelledControlOptions) {
-        super(options);
+        super(element, options);
 
         this._label_text = (options && options.label) || "";
     }

src/core/gui/LazyWidget.ts

@@ -1,16 +1,14 @@
 import { Widget } from "./Widget";
-import { create_element } from "./dom";
+import { el } from "./dom";
 import { Resizable } from "./Resizable";
 import { ResizableWidget } from "./ResizableWidget";
 
 export class LazyWidget extends ResizableWidget {
-    readonly element = create_element("div", { class: "core_LazyView" });
-
     private initialized = false;
     private view: Widget & Resizable | undefined;
 
     constructor(private create_view: () => Promise<Widget & Resizable>) {
-        super();
+        super(el.div({ class: "core_LazyView" }));
 
         this.visible.val = false;
     }

src/core/gui/RendererWidget.ts

@@ -3,10 +3,8 @@ import { create_element } from "./dom";
 import { Renderer } from "../rendering/Renderer";
 
 export class RendererWidget extends ResizableWidget {
-    readonly element = create_element("div");
-
     constructor(private renderer: Renderer) {
-        super();
+        super(create_element("div"));
 
         this.element.append(renderer.dom_element);
 

src/core/gui/ResizableWidget.ts

@@ -1,7 +1,8 @@
 import { Widget } from "./Widget";
 import { Resizable } from "./Resizable";
 
-export abstract class ResizableWidget extends Widget implements Resizable {
+export abstract class ResizableWidget<E extends HTMLElement = HTMLElement> extends Widget<E>
+    implements Resizable {
     protected width: number = 0;
     protected height: number = 0;
 

src/core/gui/TabContainer.ts

@@ -1,5 +1,5 @@
 import { Widget } from "./Widget";
-import { create_element } from "./dom";
+import { create_element, el } from "./dom";
 import { LazyWidget } from "./LazyWidget";
 import { Resizable } from "./Resizable";
 import { ResizableWidget } from "./ResizableWidget";
@@ -16,14 +16,12 @@ type TabInfo = Tab & { tab_element: HTMLSpanElement; lazy_view: LazyWidget };
 const BAR_HEIGHT = 28;
 
 export class TabContainer extends ResizableWidget {
-    readonly element = create_element("div", { class: "core_TabContainer" });
-
     private tabs: TabInfo[] = [];
-    private bar_element = create_element("div", { class: "core_TabContainer_Bar" });
+    private bar_element = el.div({ class: "core_TabContainer_Bar" });
-    private panes_element = create_element("div", { class: "core_TabContainer_Panes" });
+    private panes_element = el.div({ class: "core_TabContainer_Panes" });
 
     constructor(...tabs: Tab[]) {
-        super();
+        super(el.div({ class: "core_TabContainer" }));
 
         this.bar_element.onmousedown = this.bar_mousedown;
 

src/core/gui/TextArea.ts

@@ -1,6 +1,5 @@
 import { LabelledControl, LabelledControlOptions } from "./LabelledControl";
 import { el } from "./dom";
-import { property } from "../observable";
 import { WritableProperty } from "../observable/WritableProperty";
 import "./TextArea.css";
 import { WidgetProperty } from "../observable/WidgetProperty";
@@ -13,8 +12,6 @@ export type TextAreaOptions = LabelledControlOptions & {
 };
 
 export class TextArea extends LabelledControl {
-    readonly element: HTMLElement = el.div({ class: "core_TextArea" });
-
     readonly preferred_label_position = "left";
 
     readonly value: WritableProperty<string>;
@@ -26,7 +23,7 @@ export class TextArea extends LabelledControl {
     private readonly _value = new WidgetProperty<string>(this, "", this.set_value);
 
     constructor(value = "", options?: TextAreaOptions) {
-        super(options);
+        super(el.div({ class: "core_TextArea" }), options);
 
         if (options) {
             if (options.max_length != undefined) this.text_element.maxLength = options.max_length;
@@ -39,7 +36,8 @@ export class TextArea extends LabelledControl {
         this.value = this._value;
         this.set_value(value);
 
-        this.text_element.onchange = () => (this._value.val = this.text_element.value);
+        this.text_element.onchange = () =>
+            this._value.set_val(this.text_element.value, { silent: false });
 
         this.element.append(this.text_element);
     }

src/core/gui/ToolBar.ts

@@ -1,19 +1,22 @@
-import { Widget } from "./Widget";
+import { Widget, WidgetOptions } from "./Widget";
 import { create_element } from "./dom";
 import "./ToolBar.css";
 import { LabelledControl } from "./LabelledControl";
 
-export class ToolBar extends Widget {
+export type ToolBarOptions = WidgetOptions & {
-    readonly element = create_element("div", { class: "core_ToolBar" });
+    children?: Widget[];
+};
 
+export class ToolBar extends Widget {
     readonly height = 33;
 
-    constructor(...children: Widget[]) {
+    constructor(options?: ToolBarOptions) {
-        super();
+        super(create_element("div", { class: "core_ToolBar" }), options);
 
         this.element.style.height = `${this.height}px`;
 
-        for (const child of children) {
+        if (options && options.children) {
+            for (const child of options.children) {
                 if (child instanceof LabelledControl) {
                     const group = create_element("div", { class: "core_ToolBar_group" });
 
@@ -34,3 +37,4 @@ export class ToolBar extends Widget {
             }
         }
     }
+}

src/core/gui/Widget.ts

@@ -4,11 +4,15 @@ import { Observable } from "../observable/Observable";
 import { bind_hidden } from "./dom";
 import { WritableProperty } from "../observable/WritableProperty";
 import { WidgetProperty } from "../observable/WidgetProperty";
+import { Property } from "../observable/Property";
 
-export type ViewOptions = {};
+export type WidgetOptions = {
+    enabled?: boolean | Property<boolean>;
+    tooltip?: string | Property<string>;
+};
 
-export abstract class Widget implements Disposable {
+export abstract class Widget<E extends HTMLElement = HTMLElement> implements Disposable {
-    abstract readonly element: HTMLElement;
+    readonly element: E;
 
     get id(): string {
         return this.element.id;
@@ -20,16 +24,46 @@ export abstract class Widget implements Disposable {
 
     readonly visible: WritableProperty<boolean>;
     readonly enabled: WritableProperty<boolean>;
+    readonly tooltip: WritableProperty<string>;
 
     protected disposed = false;
 
-    private disposer = new Disposer();
+    private readonly disposer = new Disposer();
-    private _visible = new WidgetProperty<boolean>(this, true, this.set_visible);
+    private readonly _visible: WidgetProperty<boolean> = new WidgetProperty<boolean>(
-    private _enabled = new WidgetProperty<boolean>(this, true, this.set_enabled);
+        this,
+        true,
+        this.set_visible,
+    );
+    private readonly _enabled: WidgetProperty<boolean> = new WidgetProperty<boolean>(
+        this,
+        true,
+        this.set_enabled,
+    );
+    private readonly _tooltip: WidgetProperty<string> = new WidgetProperty<string>(
+        this,
+        "",
+        this.set_tooltip,
+    );
 
-    constructor(_options?: ViewOptions) {
+    protected constructor(element: E, options?: WidgetOptions) {
+        this.element = element;
         this.visible = this._visible;
         this.enabled = this._enabled;
+        this.tooltip = this._tooltip;
+
+        if (options) {
+            if (typeof options.enabled === "boolean") {
+                this.enabled.val = options.enabled;
+            } else if (options.enabled) {
+                this.enabled.bind_to(options.enabled);
+            }
+
+            if (typeof options.tooltip === "string") {
+                this.tooltip.val = options.tooltip;
+            } else if (options.tooltip) {
+                this.tooltip.bind_to(options.tooltip);
+            }
+        }
     }
 
     focus(): void {
@@ -54,11 +88,11 @@ export abstract class Widget implements Disposable {
         }
     }
 
-    protected bind_hidden(element: HTMLElement, observable: Observable<boolean>): void {
+    protected set_tooltip(tooltip: string): void {
-        this.disposable(bind_hidden(element, observable));
+        this.element.title = tooltip;
     }
 
-    protected bind_disabled(element: HTMLElement, observable: Observable<boolean>): void {
+    protected bind_hidden(element: HTMLElement, observable: Observable<boolean>): void {
         this.disposable(bind_hidden(element, observable));
     }
 

src/core/gui/dom.ts

@@ -4,10 +4,15 @@ import { is_property } from "../observable/Property";
 
 export const el = {
     div: (
-        attributes?: { class?: string; tab_index?: number },
+        attributes?: { class?: string; tab_index?: number; text?: string },
         ...children: HTMLElement[]
     ): HTMLDivElement => create_element("div", attributes, ...children),
 
+    span: (
+        attributes?: { class?: string; tab_index?: number; text?: string },
+        ...children: HTMLElement[]
+    ): HTMLSpanElement => create_element("span", attributes, ...children),
+
     table: (attributes?: {}, ...children: HTMLElement[]): HTMLTableElement =>
         create_element("table", attributes, ...children),
 
@@ -24,6 +29,9 @@ export const el = {
         ...children: HTMLElement[]
     ): HTMLTableCellElement => create_element("td", attributes, ...children),
 
+    button: (attributes?: {}, ...children: HTMLElement[]): HTMLButtonElement =>
+        create_element("button", attributes, ...children),
+
     textarea: (attributes?: {}, ...children: HTMLElement[]): HTMLTextAreaElement =>
         create_element("textarea", attributes, ...children),
 };

src/core/observable/WidgetProperty.ts

@@ -8,6 +8,6 @@ export class WidgetProperty<T> extends SimpleProperty<T> {
 
     set_val(val: T, options?: { silent?: boolean }): void {
         this.set_value.call(this.widget, val);
-        super.set_val(val, options);
+        super.set_val(val, { silent: true, ...options });
     }
 }

src/core/undo/SimpleUndo.ts

@@ -14,6 +14,18 @@ export class SimpleUndo implements Undo {
 
     constructor(description: string, undo: () => void, redo: () => void) {
         this.action = property({ description, undo, redo });
+
+        this.first_undo = map(
+            (action, can_undo) => (can_undo ? action : undefined),
+            this.action,
+            this.can_undo,
+        );
+
+        this.first_redo = map(
+            (action, can_redo) => (can_redo ? action : undefined),
+            this.action,
+            this.can_redo,
+        );
     }
 
     make_current(): void {
@@ -30,17 +42,9 @@ export class SimpleUndo implements Undo {
 
     readonly can_redo = property(false);
 
-    readonly first_undo: Property<Action | undefined> = map(
+    readonly first_undo: Property<Action | undefined>;
-        (action, can_undo) => (can_undo ? action : undefined),
-        this.action,
-        this.can_undo,
-    );
 
-    readonly first_redo: Property<Action | undefined> = map(
+    readonly first_redo: Property<Action | undefined>;
-        (action, can_redo) => (can_redo ? action : undefined),
-        this.action,
-        this.can_redo,
-    );
 
     undo(): boolean {
         if (this.can_undo) {

src/core/undo/UndoManager.ts

@@ -1,4 +1,4 @@
-import { if_defined, property } from "../observable";
+import { property } from "../observable";
 import { Undo } from "./Undo";
 import { NOOP_UNDO } from "./noop_undo";
 
@@ -14,11 +14,11 @@ class UndoManager {
     first_redo = this.current.flat_map(c => c.first_redo);
 
     undo(): boolean {
-        return if_defined(this.current, c => c.undo(), false);
+        return this.current.val.undo();
     }
 
     redo(): boolean {
-        return if_defined(this.current, c => c.redo(), false);
+        return this.current.val.redo();
     }
 }
 

src/quest_editor/gui/AsmEditorView.ts

@@ -26,9 +26,12 @@ editor.defineTheme("phantasmal-world", {
 const DUMMY_MODEL = editor.createModel("", "psoasm");
 
 export class AsmEditorView extends ResizableWidget {
-    readonly element = el.div();
+    private readonly editor: IStandaloneCodeEditor;
 
-    private readonly editor: IStandaloneCodeEditor = this.disposable(
+    constructor() {
+        super(el.div());
+
+        this.editor = this.disposable(
             editor.create(this.element, {
                 theme: "phantasmal-world",
                 scrollBeyondLastLine: false,
@@ -42,9 +45,6 @@ export class AsmEditorView extends ResizableWidget {
             }),
         );
 
-    constructor() {
-        super();
-
         this.disposables(
             asm_editor_store.did_undo.observe(({ value: source }) => {
                 this.editor.trigger(source, "undo", undefined);

src/quest_editor/gui/DisabledView.ts

@@ -4,12 +4,10 @@ import { Label } from "../../core/gui/Label";
 import "./DisabledView.css";
 
 export class DisabledView extends Widget {
-    readonly element = el.div({ class: "quest_editor_DisabledView" });
-
     private readonly label: Label;
 
     constructor(text: string) {
-        super();
+        super(el.div({ class: "quest_editor_DisabledView" }));
 
         this.label = this.disposable(new Label(text, { enabled: false }));
 

src/quest_editor/gui/EntityInfoView.css

@@ -7,7 +7,6 @@
 
 .quest_editor_EntityInfoView table {
     table-layout: fixed;
-    user-select: text;
     width: 100%;
     max-width: 300px;
     margin: 0 auto;

src/quest_editor/gui/EntityInfoView.ts

@@ -12,8 +12,6 @@ import { Vec3 } from "../../core/data_formats/vector";
 import { QuestEntityModel } from "../model/QuestEntityModel";
 
 export class EntityInfoView extends ResizableWidget {
-    readonly element = el.div({ class: "quest_editor_EntityInfoView", tab_index: -1 });
-
     private readonly no_entity_view = new DisabledView("No entity selected.");
 
     private readonly table_element = el.table();
@@ -43,7 +41,7 @@ export class EntityInfoView extends ResizableWidget {
     private readonly entity_disposer = new Disposer();
 
     constructor() {
-        super();
+        super(el.div({ class: "quest_editor_EntityInfoView", tab_index: -1 }));
 
         const entity = quest_editor_store.selected_entity;
         const no_entity = entity.map(e => e == undefined);
@@ -153,9 +151,9 @@ export class EntityInfoView extends ResizableWidget {
         this.entity_disposer.add_all(
             pos.observe(
                 ({ value: { x, y, z } }) => {
-                    x_input.value.set_val(x, { silent: true });
+                    x_input.value.val = x;
-                    y_input.value.set_val(y, { silent: true });
+                    y_input.value.val = y;
-                    z_input.value.set_val(z, { silent: true });
+                    z_input.value.val = z;
                 },
                 { call_now: true },
             ),

src/quest_editor/gui/NpcCountsView.ts

@@ -7,14 +7,12 @@ import "./NpcCountsView.css";
 import { DisabledView } from "./DisabledView";
 
 export class NpcCountsView extends ResizableWidget {
-    readonly element = el.div({ class: "quest_editor_NpcCountsView" });
-
     private readonly table_element = el.table();
 
     private readonly no_quest_view = new DisabledView("No quest loaded.");
 
     constructor() {
-        super();
+        super(el.div({ class: "quest_editor_NpcCountsView" }));
 
         this.element.append(this.table_element, this.no_quest_view.element);
 

src/quest_editor/gui/QuesInfoView.ts

@@ -10,8 +10,6 @@ import "./QuesInfoView.css";
 import { DisabledView } from "./DisabledView";
 
 export class QuesInfoView extends ResizableWidget {
-    readonly element = el.div({ class: "quest_editor_QuesInfoView", tab_index: -1 });
-
     private readonly table_element = el.table();
     private readonly episode_element: HTMLElement;
     private readonly id_input = this.disposable(new NumberInput());
@@ -42,7 +40,7 @@ export class QuesInfoView extends ResizableWidget {
     private readonly quest_disposer = this.disposable(new Disposer());
 
     constructor() {
-        super();
+        super(el.div({ class: "quest_editor_QuesInfoView", tab_index: -1 }));
 
         const quest = quest_editor_store.current_quest;
         const no_quest = quest.map(q => q == undefined);

src/quest_editor/gui/QuestEditorToolBar.ts

@@ -0,0 +1,44 @@
+import { ToolBar } from "../../core/gui/ToolBar";
+import { FileButton } from "../../core/gui/FileButton";
+import { Button } from "../../core/gui/Button";
+import { quest_editor_store } from "../stores/QuestEditorStore";
+import { undo_manager } from "../../core/undo/UndoManager";
+
+export class QuestEditorToolBar extends ToolBar {
+    constructor() {
+        const open_file_button = new FileButton("Open file...", ".qst");
+        const save_as_button = new Button("Save as...");
+        const undo_button = new Button("Undo", {
+            tooltip: undo_manager.first_undo.map(action =>
+                action ? `Undo "${action.description}"` : "Nothing to undo",
+            ),
+        });
+        const redo_button = new Button("Redo", {
+            tooltip: undo_manager.first_redo.map(action =>
+                action ? `Redo "${action.description}"` : "Nothing to redo",
+            ),
+        });
+
+        super({
+            children: [open_file_button, save_as_button, undo_button, redo_button],
+        });
+
+        this.disposables(
+            open_file_button.files.observe(({ value: files }) => {
+                if (files.length) {
+                    quest_editor_store.open_file(files[0]);
+                }
+            }),
+
+            save_as_button.enabled.bind_to(
+                quest_editor_store.current_quest.map(q => q != undefined),
+            ),
+
+            undo_button.enabled.bind_to(undo_manager.can_undo),
+            undo_button.click.observe(() => undo_manager.undo()),
+
+            redo_button.enabled.bind_to(undo_manager.can_redo),
+            redo_button.click.observe(() => undo_manager.redo()),
+        );
+    }
+}

src/quest_editor/gui/QuestEditorView.ts

@@ -1,6 +1,6 @@
 import { ResizableWidget } from "../../core/gui/ResizableWidget";
-import { create_element } from "../../core/gui/dom";
+import { create_element, el } from "../../core/gui/dom";
-import { ToolBarView } from "./ToolBarView";
+import { QuestEditorToolBar } from "./QuestEditorToolBar";
 import GoldenLayout, { Container, ContentItem, ItemConfigType } from "golden-layout";
 import { quest_editor_ui_persister } from "../persistence/QuestEditorUiPersister";
 import { QuesInfoView } from "./QuesInfoView";
@@ -9,8 +9,8 @@ import "../../core/gui/golden_layout_theme.css";
 import { NpcCountsView } from "./NpcCountsView";
 import { QuestRendererView } from "./QuestRendererView";
 import { AsmEditorView } from "./AsmEditorView";
-import Logger = require("js-logger");
 import { EntityInfoView } from "./EntityInfoView";
+import Logger = require("js-logger");
 
 const logger = Logger.get("quest_editor/gui/QuestEditorView");
 
@@ -92,9 +92,7 @@ const DEFAULT_LAYOUT_CONTENT: ItemConfigType[] = [
 ];
 
 export class QuestEditorView extends ResizableWidget {
-    readonly element = create_element("div", { class: "quest_editor_QuestEditorView" });
+    private readonly tool_bar_view = this.disposable(new QuestEditorToolBar());
-
-    private readonly tool_bar_view = this.disposable(new ToolBarView());
 
     private readonly layout_element = create_element("div", { class: "quest_editor_gl_container" });
     private readonly layout: Promise<GoldenLayout>;
@@ -102,7 +100,7 @@ export class QuestEditorView extends ResizableWidget {
     private readonly sub_views = new Map<string, ResizableWidget>();
 
     constructor() {
-        super();
+        super(el.div({ class: "quest_editor_QuestEditorView" }));
 
         this.element.append(this.tool_bar_view.element, this.layout_element);
 

src/quest_editor/gui/QuestRendererView.ts

@@ -6,12 +6,10 @@ import { gui_store, GuiTool } from "../../core/stores/GuiStore";
 import { quest_editor_store } from "../stores/QuestEditorStore";
 
 export class QuestRendererView extends ResizableWidget {
-    readonly element = el.div({ class: "quest_editor_QuestRendererView", tab_index: -1 });
-
     private renderer_view = this.disposable(new RendererWidget(new QuestRenderer()));
 
     constructor() {
-        super();
+        super(el.div({ class: "quest_editor_QuestRendererView", tab_index: -1 }));
 
         this.element.append(this.renderer_view.element);
 

src/quest_editor/gui/ToolBarView.ts

@@ -1,48 +0,0 @@
-import { Widget } from "../../core/gui/Widget";
-import { ToolBar } from "../../core/gui/ToolBar";
-import { FileButton } from "../../core/gui/FileButton";
-import { Button } from "../../core/gui/Button";
-import { quest_editor_store } from "../stores/QuestEditorStore";
-import { undo_manager } from "../../core/undo/UndoManager";
-
-export class ToolBarView extends Widget {
-    private readonly open_file_button = new FileButton("Open file...", ".qst");
-    private readonly save_as_button = new Button("Save as...");
-    private readonly undo_button = new Button("Undo");
-    private readonly redo_button = new Button("Redo");
-
-    private readonly tool_bar = new ToolBar(
-        this.open_file_button,
-        this.save_as_button,
-        this.undo_button,
-        this.redo_button,
-    );
-
-    readonly element = this.tool_bar.element;
-
-    get height(): number {
-        return this.tool_bar.height;
-    }
-
-    constructor() {
-        super();
-
-        this.disposables(
-            this.open_file_button.files.observe(({ value: files }) => {
-                if (files.length) {
-                    quest_editor_store.open_file(files[0]);
-                }
-            }),
-
-            this.save_as_button.enabled.bind_to(
-                quest_editor_store.current_quest.map(q => q != undefined),
-            ),
-
-            this.undo_button.enabled.bind_to(undo_manager.can_undo),
-            this.undo_button.click.observe(() => undo_manager.undo()),
-
-            this.redo_button.enabled.bind_to(undo_manager.can_redo),
-            this.redo_button.click.observe(() => undo_manager.redo()),
-        );
-    }
-}

src/viewer/gui/Model3DView.ts

@@ -1,207 +0,0 @@
-import { create_element } from "../../core/gui/dom";
-import { ResizableWidget } from "../../core/gui/ResizableWidget";
-import { ToolBar } from "../../core/gui/ToolBar";
-import "./Model3DView.css";
-import { model_store } from "../stores/Model3DStore";
-import { WritableProperty } from "../../core/observable/WritableProperty";
-import { RendererWidget } from "../../core/gui/RendererWidget";
-import { Model3DRenderer } from "../rendering/Model3DRenderer";
-import { Widget } from "../../core/gui/Widget";
-import { FileButton } from "../../core/gui/FileButton";
-import { CheckBox } from "../../core/gui/CheckBox";
-import { NumberInput } from "../../core/gui/NumberInput";
-import { Label } from "../../core/gui/Label";
-import { gui_store, GuiTool } from "../../core/stores/GuiStore";
-import { PSO_FRAME_RATE } from "../../core/rendering/conversion/ninja_animation";
-
-const MODEL_LIST_WIDTH = 100;
-const ANIMATION_LIST_WIDTH = 140;
-
-export class Model3DView extends ResizableWidget {
-    readonly element = create_element("div", { class: "viewer_Model3DView" });
-
-    private tool_bar_view = this.disposable(new ToolBarView());
-    private container_element = create_element("div", { class: "viewer_Model3DView_container" });
-    private model_list_view = this.disposable(
-        new ModelSelectListView(model_store.models, model_store.current_model),
-    );
-    private animation_list_view = this.disposable(
-        new ModelSelectListView(model_store.animations, model_store.current_animation),
-    );
-    private renderer_view = this.disposable(new RendererWidget(new Model3DRenderer()));
-
-    constructor() {
-        super();
-
-        this.animation_list_view.borders = true;
-
-        this.container_element.append(
-            this.model_list_view.element,
-            this.animation_list_view.element,
-            this.renderer_view.element,
-        );
-
-        this.element.append(this.tool_bar_view.element, this.container_element);
-
-        model_store.current_model.val = model_store.models[5];
-
-        this.renderer_view.start_rendering();
-
-        this.disposable(
-            gui_store.tool.observe(({ value: tool }) => {
-                if (tool === GuiTool.Viewer) {
-                    this.renderer_view.start_rendering();
-                } else {
-                    this.renderer_view.stop_rendering();
-                }
-            }),
-        );
-    }
-
-    resize(width: number, height: number): this {
-        super.resize(width, height);
-
-        const container_height = Math.max(0, height - this.tool_bar_view.height);
-
-        this.model_list_view.resize(MODEL_LIST_WIDTH, container_height);
-        this.animation_list_view.resize(ANIMATION_LIST_WIDTH, container_height);
-        this.renderer_view.resize(
-            Math.max(0, width - MODEL_LIST_WIDTH - ANIMATION_LIST_WIDTH),
-            container_height,
-        );
-
-        return this;
-    }
-}
-
-class ToolBarView extends Widget {
-    private readonly open_file_button = new FileButton("Open file...", ".nj, .njm, .xj, .xvm");
-    private readonly skeleton_checkbox = new CheckBox(false, { label: "Show skeleton" });
-    private readonly play_animation_checkbox = new CheckBox(true, { label: "Play animation" });
-    private readonly animation_frame_rate_input = new NumberInput(PSO_FRAME_RATE, {
-        label: "Frame rate:",
-        min: 1,
-        max: 240,
-        step: 1,
-    });
-    private readonly animation_frame_input = new NumberInput(1, {
-        label: "Frame:",
-        min: 1,
-        max: model_store.animation_frame_count,
-        step: 1,
-    });
-    private readonly animation_frame_count_label = new Label(
-        model_store.animation_frame_count.map(count => `/ ${count}`),
-    );
-
-    private readonly tool_bar = this.disposable(
-        new ToolBar(
-            this.open_file_button,
-            this.skeleton_checkbox,
-            this.play_animation_checkbox,
-            this.animation_frame_rate_input,
-            this.animation_frame_input,
-            this.animation_frame_count_label,
-        ),
-    );
-
-    readonly element = this.tool_bar.element;
-
-    get height(): number {
-        return this.tool_bar.height;
-    }
-
-    constructor() {
-        super();
-
-        // Always-enabled controls.
-        this.disposables(
-            this.open_file_button.files.observe(({ value: files }) => {
-                if (files.length) model_store.load_file(files[0]);
-            }),
-
-            model_store.show_skeleton.bind_to(this.skeleton_checkbox.checked),
-        );
-
-        // Controls that are only enabled when an animation is selected.
-        const enabled = model_store.current_nj_motion.map(njm => njm != undefined);
-
-        this.disposables(
-            this.play_animation_checkbox.enabled.bind_to(enabled),
-            model_store.animation_playing.bind_bi(this.play_animation_checkbox.checked),
-
-            this.animation_frame_rate_input.enabled.bind_to(enabled),
-            model_store.animation_frame_rate.bind_to(this.animation_frame_rate_input.value),
-
-            this.animation_frame_input.enabled.bind_to(enabled),
-            model_store.animation_frame.bind_to(this.animation_frame_input.value),
-            this.animation_frame_input.value.bind_to(
-                model_store.animation_frame.map(v => Math.round(v)),
-            ),
-
-            this.animation_frame_count_label.enabled.bind_to(enabled),
-        );
-    }
-}
-
-class ModelSelectListView<T extends { name: string }> extends ResizableWidget {
-    element = create_element("ul", { class: "viewer_ModelSelectListView" });
-
-    set borders(borders: boolean) {
-        if (borders) {
-            this.element.style.borderLeft = "solid 1px var(--border-color)";
-            this.element.style.borderRight = "solid 1px var(--border-color)";
-        } else {
-            this.element.style.borderLeft = "none";
-            this.element.style.borderRight = "none";
-        }
-    }
-
-    private selected_model?: T;
-    private selected_element?: HTMLLIElement;
-
-    constructor(private models: T[], private selected: WritableProperty<T | undefined>) {
-        super();
-
-        this.element.onclick = this.list_click;
-
-        models.forEach((model, index) => {
-            this.element.append(
-                create_element("li", { text: model.name, data: { index: index.toString() } }),
-            );
-        });
-
-        this.disposable(
-            selected.observe(({ value: model }) => {
-                if (this.selected_element) {
-                    this.selected_element.classList.remove("active");
-                    this.selected_element = undefined;
-                }
-
-                if (model && model !== this.selected_model) {
-                    const index = this.models.indexOf(model);
-
-                    if (index !== -1) {
-                        this.selected_element = this.element.childNodes[index] as HTMLLIElement;
-                        this.selected_element.classList.add("active");
-                    }
-                }
-            }),
-        );
-    }
-
-    private list_click = (e: MouseEvent) => {
-        if (e.target instanceof HTMLLIElement && e.target.dataset["index"]) {
-            if (this.selected_element) {
-                this.selected_element.classList.remove("active");
-            }
-
-            e.target.classList.add("active");
-
-            const index = parseInt(e.target.dataset["index"]!, 10);
-
-            this.selected_element = e.target;
-            this.selected.val = this.models[index];
-        }
-    };
-}

src/viewer/gui/TextureView.ts

@@ -1,4 +1,4 @@
-import { create_element } from "../../core/gui/dom";
+import { el } from "../../core/gui/dom";
 import { ResizableWidget } from "../../core/gui/ResizableWidget";
 import { FileButton } from "../../core/gui/FileButton";
 import { ToolBar } from "../../core/gui/ToolBar";
@@ -8,8 +8,6 @@ import { TextureRenderer } from "../rendering/TextureRenderer";
 import { gui_store, GuiTool } from "../../core/stores/GuiStore";
 
 export class TextureView extends ResizableWidget {
-    readonly element = create_element("div", { class: "viewer_TextureView" });
-
     private readonly open_file_button = new FileButton("Open file...", ".xvm");
 
     private readonly tool_bar = this.disposable(new ToolBar(this.open_file_button));
@@ -17,7 +15,7 @@ export class TextureView extends ResizableWidget {
     private readonly renderer_view = this.disposable(new RendererWidget(new TextureRenderer()));
 
     constructor() {
-        super();
+        super(el.div({ class: "viewer_TextureView" }));
 
         this.element.append(this.tool_bar.element, this.renderer_view.element);
 

src/viewer/gui/ViewerView.ts

@@ -1,29 +1,22 @@
 import { TabContainer } from "../../core/gui/TabContainer";
-import { ResizableWidget } from "../../core/gui/ResizableWidget";
 
-export class ViewerView extends ResizableWidget {
+export class ViewerView extends TabContainer {
-    private tabs = this.disposable(
+    constructor() {
-        new TabContainer(
+        super(
             {
                 title: "Models",
                 key: "model",
-                create_view: async () => new (await import("./Model3DView")).Model3DView(),
+                create_view: async function() {
+                    return new (await import("./model_3d/Model3DView")).Model3DView();
+                },
             },
             {
                 title: "Textures",
                 key: "texture",
-                create_view: async () => new (await import("./TextureView")).TextureView(),
+                create_view: async function() {
+                    return new (await import("./TextureView")).TextureView();
+                },
             },
-        ),
         );
-
-    get element(): HTMLElement {
-        return this.tabs.element;
-    }
-
-    resize(width: number, height: number): this {
-        super.resize(width, height);
-        this.tabs.resize(width, height);
-        return this;
     }
 }

src/viewer/gui/model_3d/Model3DSelectListView.css

@@ -1,9 +1,4 @@
-.viewer_Model3DView_container {
+.viewer_Model3DSelectListView {
-    display: flex;
-    flex-direction: row;
-}
-
-.viewer_ModelSelectListView {
     box-sizing: border-box;
     list-style: none;
     padding: 0;
@@ -11,16 +6,16 @@
     overflow: auto;
 }
 
-.viewer_ModelSelectListView li {
+.viewer_Model3DSelectListView li {
     padding: 4px 8px;
 }
 
-.viewer_ModelSelectListView li:hover {
+.viewer_Model3DSelectListView li:hover {
     color: hsl(0, 0%, 90%);
     background-color: hsl(0, 0%, 18%);
 }
 
-.viewer_ModelSelectListView li.active {
+.viewer_Model3DSelectListView li.active {
     color: hsl(0, 0%, 90%);
     background-color: hsl(0, 0%, 21%);
 }

src/viewer/gui/model_3d/Model3DSelectListView.ts

@@ -0,0 +1,64 @@
+import { ResizableWidget } from "../../../core/gui/ResizableWidget";
+import { create_element } from "../../../core/gui/dom";
+import { WritableProperty } from "../../../core/observable/WritableProperty";
+import "./Model3DSelectListView.css";
+
+export class Model3DSelectListView<T extends { name: string }> extends ResizableWidget {
+    set borders(borders: boolean) {
+        if (borders) {
+            this.element.style.borderLeft = "solid 1px var(--border-color)";
+            this.element.style.borderRight = "solid 1px var(--border-color)";
+        } else {
+            this.element.style.borderLeft = "none";
+            this.element.style.borderRight = "none";
+        }
+    }
+
+    private selected_model?: T;
+    private selected_element?: HTMLLIElement;
+
+    constructor(private models: T[], private selected: WritableProperty<T | undefined>) {
+        super(create_element("ul", { class: "viewer_Model3DSelectListView" }));
+
+        this.element.onclick = this.list_click;
+
+        models.forEach((model, index) => {
+            this.element.append(
+                create_element("li", { text: model.name, data: { index: index.toString() } }),
+            );
+        });
+
+        this.disposable(
+            selected.observe(({ value: model }) => {
+                if (this.selected_element) {
+                    this.selected_element.classList.remove("active");
+                    this.selected_element = undefined;
+                }
+
+                if (model && model !== this.selected_model) {
+                    const index = this.models.indexOf(model);
+
+                    if (index !== -1) {
+                        this.selected_element = this.element.childNodes[index] as HTMLLIElement;
+                        this.selected_element.classList.add("active");
+                    }
+                }
+            }),
+        );
+    }
+
+    private list_click = (e: MouseEvent) => {
+        if (e.target instanceof HTMLLIElement && e.target.dataset["index"]) {
+            if (this.selected_element) {
+                this.selected_element.classList.remove("active");
+            }
+
+            e.target.classList.add("active");
+
+            const index = parseInt(e.target.dataset["index"]!, 10);
+
+            this.selected_element = e.target;
+            this.selected.val = this.models[index];
+        }
+    };
+}

src/viewer/gui/model_3d/Model3DToolBar.ts

@@ -0,0 +1,69 @@
+import { ToolBar } from "../../../core/gui/ToolBar";
+import { FileButton } from "../../../core/gui/FileButton";
+import { CheckBox } from "../../../core/gui/CheckBox";
+import { NumberInput } from "../../../core/gui/NumberInput";
+import { PSO_FRAME_RATE } from "../../../core/rendering/conversion/ninja_animation";
+import { model_store } from "../../stores/Model3DStore";
+import { Label } from "../../../core/gui/Label";
+
+export class Model3DToolBar extends ToolBar {
+    constructor() {
+        const open_file_button = new FileButton("Open file...", ".nj, .njm, .xj, .xvm");
+        const skeleton_checkbox = new CheckBox(false, { label: "Show skeleton" });
+        const play_animation_checkbox = new CheckBox(true, { label: "Play animation" });
+        const animation_frame_rate_input = new NumberInput(PSO_FRAME_RATE, {
+            label: "Frame rate:",
+            min: 1,
+            max: 240,
+            step: 1,
+        });
+        const animation_frame_input = new NumberInput(1, {
+            label: "Frame:",
+            min: 1,
+            max: model_store.animation_frame_count,
+            step: 1,
+        });
+        const animation_frame_count_label = new Label(
+            model_store.animation_frame_count.map(count => `/ ${count}`),
+        );
+
+        super({
+            children: [
+                open_file_button,
+                skeleton_checkbox,
+                play_animation_checkbox,
+                animation_frame_rate_input,
+                animation_frame_input,
+                animation_frame_count_label,
+            ],
+        });
+
+        // Always-enabled controls.
+        this.disposables(
+            open_file_button.files.observe(({ value: files }) => {
+                if (files.length) model_store.load_file(files[0]);
+            }),
+
+            model_store.show_skeleton.bind_to(skeleton_checkbox.checked),
+        );
+
+        // Controls that are only enabled when an animation is selected.
+        const enabled = model_store.current_nj_motion.map(njm => njm != undefined);
+
+        this.disposables(
+            play_animation_checkbox.enabled.bind_to(enabled),
+            model_store.animation_playing.bind_bi(play_animation_checkbox.checked),
+
+            animation_frame_rate_input.enabled.bind_to(enabled),
+            model_store.animation_frame_rate.bind_to(animation_frame_rate_input.value),
+
+            animation_frame_input.enabled.bind_to(enabled),
+            model_store.animation_frame.bind_to(animation_frame_input.value),
+            animation_frame_input.value.bind_to(
+                model_store.animation_frame.map(v => Math.round(v)),
+            ),
+
+            animation_frame_count_label.enabled.bind_to(enabled),
+        );
+    }
+}

src/viewer/gui/model_3d/Model3DView.css

@@ -0,0 +1,4 @@
+.viewer_Model3DView_container {
+    display: flex;
+    flex-direction: row;
+}

src/viewer/gui/model_3d/Model3DView.ts

@@ -0,0 +1,73 @@
+import { el } from "../../../core/gui/dom";
+import { ResizableWidget } from "../../../core/gui/ResizableWidget";
+import "./Model3DView.css";
+import { gui_store, GuiTool } from "../../../core/stores/GuiStore";
+import { RendererWidget } from "../../../core/gui/RendererWidget";
+import { model_store } from "../../stores/Model3DStore";
+import { Model3DRenderer } from "../../rendering/Model3DRenderer";
+import { Model3DToolBar } from "./Model3DToolBar";
+import { Model3DSelectListView } from "./Model3DSelectListView";
+import { CharacterClassModel } from "../../model/CharacterClassModel";
+import { CharacterClassAnimationModel } from "../../model/CharacterClassAnimationModel";
+
+const MODEL_LIST_WIDTH = 100;
+const ANIMATION_LIST_WIDTH = 140;
+
+export class Model3DView extends ResizableWidget {
+    private tool_bar_view: Model3DToolBar;
+    private model_list_view: Model3DSelectListView<CharacterClassModel>;
+    private animation_list_view: Model3DSelectListView<CharacterClassAnimationModel>;
+    private renderer_view: RendererWidget;
+
+    constructor() {
+        super(el.div({ class: "viewer_Model3DView" }));
+
+        this.tool_bar_view = this.disposable(new Model3DToolBar());
+        this.model_list_view = this.disposable(
+            new Model3DSelectListView(model_store.models, model_store.current_model),
+        );
+        this.animation_list_view = this.disposable(
+            new Model3DSelectListView(model_store.animations, model_store.current_animation),
+        );
+        this.renderer_view = this.disposable(new RendererWidget(new Model3DRenderer()));
+
+        this.animation_list_view.borders = true;
+
+        const container_element = el.div({ class: "viewer_Model3DView_container" });
+        container_element.append(
+            this.model_list_view.element,
+            this.animation_list_view.element,
+            this.renderer_view.element,
+        );
+        this.element.append(this.tool_bar_view.element, container_element);
+
+        model_store.current_model.val = model_store.models[5];
+
+        this.renderer_view.start_rendering();
+
+        this.disposable(
+            gui_store.tool.observe(({ value: tool }) => {
+                if (tool === GuiTool.Viewer) {
+                    this.renderer_view.start_rendering();
+                } else {
+                    this.renderer_view.stop_rendering();
+                }
+            }),
+        );
+    }
+
+    resize(width: number, height: number): this {
+        super.resize(width, height);
+
+        const container_height = Math.max(0, height - this.tool_bar_view.height);
+
+        this.model_list_view.resize(MODEL_LIST_WIDTH, container_height);
+        this.animation_list_view.resize(ANIMATION_LIST_WIDTH, container_height);
+        this.renderer_view.resize(
+            Math.max(0, width - MODEL_LIST_WIDTH - ANIMATION_LIST_WIDTH),
+            container_height,
+        );
+
+        return this;
+    }
+}