Model viewer now completely build on the new UI system.

src/new/core/gui/Button.ts

@@ -2,17 +2,19 @@ import { create_el } from "./dom";
 import { View } from "./View";
 import "./Button.css";
 import { Observable } from "../observable/Observable";
+import { emitter } from "../observable";
 
 export class Button extends View {
-    element: HTMLButtonElement = create_el("button", "core_Button");
+    readonly element: HTMLButtonElement = create_el("button", "core_Button");
+
+    private readonly _click = emitter<MouseEvent>();
+    readonly click: Observable<MouseEvent> = this._click;
 
     constructor(text: string) {
         super();
 
         this.element.textContent = text;
 
-        this.element.onclick = (e: MouseEvent) => this.click.fire(e, undefined);
+        this.element.onclick = (e: MouseEvent) => this._click.emit(e, undefined);
     }
-
-    click = new Observable<MouseEvent>();
 }

src/new/core/gui/CheckBox.css

@@ -1,6 +0,0 @@
-.core_CheckBox {
-    display: inline-flex;
-    flex-direction: row;
-    height: 26px;
-    align-items: center;
-}

src/new/core/gui/CheckBox.ts

@@ -1,21 +1,27 @@
-import { View } from "./View";
 import { create_el } from "./dom";
-import "./CheckBox.css";
-import { Property } from "../observable/Property";
+import { WritableProperty } from "../observable/WritableProperty";
+import { property } from "../observable";
+import { LabelledControl } from "./LabelledControl";
 
-export class CheckBox extends View {
-    private input: HTMLInputElement = create_el("input");
+export class CheckBox extends LabelledControl {
+    readonly element: HTMLInputElement = create_el("input", "core_CheckBox");
 
-    element: HTMLLabelElement = create_el("label", "core_CheckBox");
+    readonly checked: WritableProperty<boolean> = property(false);
 
-    constructor(text: string) {
-        super();
+    readonly preferred_label_position = "right";
 
-        this.input.type = "checkbox";
-        this.input.onchange = () => this.checked.set(this.input.checked);
+    constructor(checked: boolean = false, label?: string) {
+        super(label);
 
-        this.element.append(this.input, text);
+        this.element.type = "checkbox";
+        this.element.onchange = () => this.checked.set(this.element.checked);
+
+        this.disposables(
+            this.checked.observe(checked => (this.element.checked = checked)),
+
+            this.enabled.observe(enabled => (this.element.disabled = !enabled)),
+        );
+
+        this.checked.set(checked);
     }
-
-    checked = new Property<boolean>(false);
 }

src/new/core/gui/Control.ts

@@ -0,0 +1,7 @@
+import { View } from "./View";
+import { WritableProperty } from "../observable/WritableProperty";
+import { property } from "../observable";
+
+export abstract class Control extends View {
+    readonly enabled: WritableProperty<boolean> = property(true);
+}

src/new/core/gui/FileButton.css

@@ -1,4 +1,4 @@
-.core_FileInput_input {
+.core_FileButton_input {
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     position: absolute;

src/new/core/gui/FileButton.ts

@@ -1,13 +1,17 @@
 import { create_el } from "./dom";
 import { View } from "./View";
-import "./FileInput.css";
+import "./FileButton.css";
 import "./Button.css";
+import { property } from "../observable";
 import { Property } from "../observable/Property";
 
-export class FileInput extends View {
-    private input: HTMLInputElement = create_el("input", "core_FileInput_input");
+export class FileButton extends View {
+    readonly element: HTMLLabelElement = create_el("label", "core_FileButton core_Button");
 
-    element: HTMLLabelElement = create_el("label", "core_FileInput core_Button");
+    private readonly _files = property<File[]>([]);
+    readonly files: Property<File[]> = this._files;
+
+    private input: HTMLInputElement = create_el("input", "core_FileButton_input");
 
     constructor(text: string, accept: string = "") {
         super();
@@ -16,15 +20,13 @@ export class FileInput extends View {
         this.input.accept = accept;
         this.input.onchange = () => {
             if (this.input.files && this.input.files.length) {
-                this.files.set([...this.input.files!]);
+                this._files.set([...this.input.files!]);
             } else {
-                this.files.set([]);
+                this._files.set([]);
             }
         };
 
         this.element.textContent = text;
         this.element.append(this.input);
     }
-
-    readonly files = new Property<File[]>([]);
 }

src/new/core/gui/Input.css

@@ -0,0 +1,23 @@
+.core_Input {
+    box-sizing: border-box;
+    height: 26px;
+    padding: 0 3px;
+    border: solid 1px var(--border-color);
+    background-color: var(--input-bg-color);
+    color: var(--text-color);
+    outline: none;
+}
+
+.core_Input:hover {
+    border: solid 1px var(--border-color-hover);
+}
+
+.core_Input:focus {
+    border: solid 1px var(--border-color-focus);
+}
+
+.core_Input:disabled {
+    color: var(--text-color-disabled);
+    background-color: var(--input-bg-color-disabled);
+    border: solid 1px var(--border-color);
+}

src/new/core/gui/Label.css

@@ -0,0 +1,3 @@
+.core_Label.disabled {
+    color: var(--text-color-disabled);
+}

src/new/core/gui/Label.ts

@@ -0,0 +1,37 @@
+import { View } from "./View";
+import { create_el } from "./dom";
+import { WritableProperty } from "../observable/WritableProperty";
+import "./Label.css";
+import { property } from "../observable";
+import { Property } from "../observable/Property";
+
+export class Label extends View {
+    readonly element = create_el<HTMLLabelElement>("label", "core_Label");
+
+    set for(id: string) {
+        this.element.htmlFor = id;
+    }
+
+    readonly enabled: WritableProperty<boolean> = property(true);
+
+    constructor(text: string | Property<string>) {
+        super();
+
+        if (typeof text === "string") {
+            this.element.append(text);
+        } else {
+            this.element.append(text.get());
+            this.disposable(text.observe(text => (this.element.textContent = text)));
+        }
+
+        this.disposables(
+            this.enabled.observe(enabled => {
+                if (enabled) {
+                    this.element.classList.remove("disabled");
+                } else {
+                    this.element.classList.add("disabled");
+                }
+            }),
+        );
+    }
+}

src/new/core/gui/LabelledControl.ts

@@ -0,0 +1,35 @@
+import { Label } from "./Label";
+import { Control } from "./Control";
+
+export abstract class LabelledControl extends Control {
+    abstract readonly preferred_label_position: "left" | "right";
+
+    private readonly _label_text: string;
+    private _label?: Label;
+
+    get label(): Label {
+        if (!this._label) {
+            this._label = this.disposable(new Label(this._label_text));
+
+            if (!this.id) {
+                this._label.for = this.id = unique_id();
+            }
+
+            this._label.enabled.bind_bi(this.enabled);
+        }
+
+        return this._label;
+    }
+
+    protected constructor(label: string | undefined) {
+        super();
+
+        this._label_text = label || "";
+    }
+}
+
+let id = 0;
+
+function unique_id(): string {
+    return String(id++);
+}

src/new/core/gui/LazyView.ts

@@ -4,7 +4,7 @@ import { Resizable } from "./Resizable";
 import { ResizableView } from "./ResizableView";
 
 export class LazyView extends ResizableView {
-    element = create_el("div", "core_LazyView");
+    readonly element = create_el("div", "core_LazyView");
 
     private _visible = false;
 

src/new/core/gui/NumberInput.css

@@ -0,0 +1,3 @@
+.core_NumberInput {
+    text-align: right;
+}

src/new/core/gui/NumberInput.ts

@@ -0,0 +1,50 @@
+import "./NumberInput.css";
+import "./Input.css";
+import { create_el } from "./dom";
+import { WritableProperty } from "../observable/WritableProperty";
+import { property } from "../observable";
+import { LabelledControl } from "./LabelledControl";
+import { is_property, Property } from "../observable/Property";
+
+export class NumberInput extends LabelledControl {
+    readonly element: HTMLInputElement = create_el("input", "core_NumberInput core_Input");
+
+    readonly value: WritableProperty<number> = property(0);
+
+    readonly preferred_label_position = "left";
+
+    constructor(
+        value = 0,
+        label?: string,
+        min: number | Property<number> = -Infinity,
+        max: number | Property<number> = Infinity,
+        step: number | Property<number> = 1,
+    ) {
+        super(label);
+
+        this.element.type = "number";
+        this.element.valueAsNumber = value;
+        this.element.style.width = "50px";
+
+        this.set_prop("min", min);
+        this.set_prop("max", max);
+        this.set_prop("step", step);
+
+        this.element.onchange = () => this.value.set(this.element.valueAsNumber);
+
+        this.disposables(
+            this.value.observe(value => (this.element.valueAsNumber = value)),
+
+            this.enabled.observe(enabled => (this.element.disabled = !enabled)),
+        );
+    }
+
+    private set_prop<T>(prop: "min" | "max" | "step", value: T | Property<T>): void {
+        if (is_property(value)) {
+            this.element[prop] = String(value.get());
+            this.disposable(value.observe(v => (this.element[prop] = String(v))));
+        } else {
+            this.element[prop] = String(value);
+        }
+    }
+}

src/new/core/gui/TabContainer.ts

@@ -16,7 +16,7 @@ type TabInfo = Tab & { tab_element: HTMLSpanElement; lazy_view: LazyView };
 const BAR_HEIGHT = 28;
 
 export class TabContainer extends ResizableView {
-    element = create_el("div", "core_TabContainer");
+    readonly element = create_el("div", "core_TabContainer");
 
     private tabs: TabInfo[] = [];
     private bar_element = create_el("div", "core_TabContainer_Bar");

src/new/core/gui/ToolBar.css

@@ -2,12 +2,23 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
+    align-items: center;
     padding-top: 1px;
     border-bottom: solid var(--border-color) 1px;
 }
 
 .core_ToolBar > * {
-    margin: 2px;
+    margin: 2px 4px;
+}
+
+.core_ToolBar > .core_ToolBar_group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.core_ToolBar > .core_ToolBar_group > * {
+    margin: 0 2px;
 }
 
 .core_ToolBar .core_Button {

src/new/core/gui/ToolBar.ts

@@ -1,10 +1,11 @@
 import { View } from "./View";
 import { create_el } from "./dom";
 import "./ToolBar.css";
+import { LabelledControl } from "./LabelledControl";
 
 export class ToolBar extends View {
     readonly element = create_el("div", "core_ToolBar");
-    readonly height = 32;
+    readonly height = 34;
 
     constructor(...children: View[]) {
         super();
@@ -12,8 +13,20 @@ export class ToolBar extends View {
         this.element.style.height = `${this.height}px`;
 
         for (const child of children) {
-            this.element.append(child.element);
-            this.disposable(child);
+            if (child instanceof LabelledControl) {
+                const group = create_el("div", "core_ToolBar_group");
+
+                if (child.preferred_label_position === "left") {
+                    group.append(child.label.element, child.element);
+                } else {
+                    group.append(child.element, child.label.element);
+                }
+
+                this.element.append(group);
+            } else {
+                this.element.append(child.element);
+                this.disposable(child);
+            }
         }
     }
 }

src/new/core/gui/View.ts

@@ -1,18 +1,29 @@
-import { Disposable } from "./Disposable";
+import { Disposable } from "../observable/Disposable";
 
 export abstract class View implements Disposable {
     abstract readonly element: HTMLElement;
 
-    private disposables: Disposable[] = [];
+    get id(): string {
+        return this.element.id;
+    }
+
+    set id(id: string) {
+        this.element.id = id;
+    }
+
+    private disposable_list: Disposable[] = [];
 
     protected disposable<T extends Disposable>(disposable: T): T {
-        this.disposables.push(disposable);
+        this.disposable_list.push(disposable);
         return disposable;
     }
 
+    protected disposables(...disposables: Disposable[]): void {
+        this.disposable_list.push(...disposables);
+    }
+
     dispose(): void {
         this.element.remove();
-        this.disposables.forEach(d => d.dispose());
-        this.disposables.splice(0, this.disposables.length);
+        this.disposable_list.splice(0, this.disposable_list.length).forEach(d => d.dispose());
     }
 }

src/new/core/gui/dom.ts

@@ -1,4 +1,4 @@
-import { Disposable } from "./Disposable";
+import { Disposable } from "../observable/Disposable";
 
 export function create_el<T extends HTMLElement>(
     tag_name: string,

src/new/core/observable/Emitter.ts

@@ -0,0 +1,5 @@
+import { Observable } from "./Observable";
+
+export interface Emitter<E, M> extends Observable<E, M> {
+    emit(event: E, meta: M): void;
+}

src/new/core/observable/MappedProperty.ts

@@ -0,0 +1,57 @@
+import { SimpleEmitter } from "./SimpleEmitter";
+import { Disposable } from "./Disposable";
+import { Property, PropertyMeta } from "./Property";
+
+/**
+ * Starts observing its origin when the first observer on this property is registered.
+ * Stops observing its origin when the last observer on this property is disposed.
+ * This way no extra disposables need to be managed when {@link Property.map} is used.
+ */
+export class MappedProperty<S, T> extends SimpleEmitter<T, PropertyMeta<T>> implements Property<T> {
+    readonly is_property = true;
+
+    private origin_disposable?: Disposable;
+    private value?: T;
+
+    constructor(private origin: Property<S>, private f: (value: S) => T) {
+        super();
+    }
+
+    observe(observer: (event: T, meta: PropertyMeta<T>) => void): Disposable {
+        const disposable = super.observe(observer);
+
+        if (this.origin_disposable == undefined) {
+            this.value = this.f(this.origin.get());
+
+            this.origin_disposable = this.origin.observe(origin_value => {
+                const old_value = this.value as T;
+                this.value = this.f(origin_value);
+
+                this.emit(this.value, { old_value });
+            });
+        }
+
+        return {
+            dispose: () => {
+                disposable.dispose();
+
+                if (this.observers.length === 0) {
+                    this.origin_disposable!.dispose();
+                    this.origin_disposable = undefined;
+                }
+            },
+        };
+    }
+
+    get(): T {
+        if (this.origin_disposable) {
+            return this.value as T;
+        } else {
+            return this.f(this.origin.get());
+        }
+    }
+
+    map<U>(f: (element: T) => U): Property<U> {
+        return new MappedProperty(this, f);
+    }
+}

src/new/core/observable/Observable.ts

@@ -1,31 +1,5 @@
-import { Disposable } from "../gui/Disposable";
+import { Disposable } from "./Disposable";
 
-export class Observable<E, M = undefined> {
-    private readonly observers: ((event: E, meta: M) => void)[] = [];
-
-    fire(event: E, meta: M): void {
-        for (const observer of this.observers) {
-            try {
-                observer(event, meta);
-            } catch (e) {
-                console.error(e);
-            }
-        }
-    }
-
-    observe(observer: (event: E, meta: M) => void): Disposable {
-        if (!this.observers.includes(observer)) {
-            this.observers.push(observer);
-        }
-
-        return {
-            dispose: () => {
-                const index = this.observers.indexOf(observer);
-
-                if (index !== -1) {
-                    this.observers.splice(index, 1);
-                }
-            },
-        };
-    }
+export interface Observable<E, M = undefined> {
+    observe(observer: (event: E, meta: M) => void): Disposable;
 }

src/new/core/observable/Property.ts

@@ -1,22 +1,15 @@
 import { Observable } from "./Observable";
 
-export class Property<T> extends Observable<T, { old_value: T }> {
-    private value: T;
+export interface Property<T> extends Observable<T, PropertyMeta<T>> {
+    readonly is_property: true;
 
-    constructor(value: T) {
-        super();
-        this.value = value;
-    }
+    get(): T;
 
-    get(): T {
-        return this.value;
-    }
-
-    set(value: T): void {
-        if (value !== this.value) {
-            const old_value = this.value;
-            this.value = value;
-            this.fire(value, { old_value });
-        }
-    }
+    map<U>(f: (element: T) => U): Property<U>;
+}
+
+export type PropertyMeta<T> = { old_value: T };
+
+export function is_property<T>(observable: any): observable is Property<T> {
+    return (observable as any).is_property;
 }

src/new/core/observable/SimpleEmitter.ts

@@ -0,0 +1,34 @@
+import { Disposable } from "./Disposable";
+import Logger from "js-logger";
+
+const logger = Logger.get("core/observable/SimpleEmitter");
+
+export class SimpleEmitter<E, M = undefined> {
+    protected readonly observers: ((event: E, meta: M) => void)[] = [];
+
+    emit(event: E, meta: M): void {
+        for (const observer of this.observers) {
+            try {
+                observer(event, meta);
+            } catch (e) {
+                logger.error("Observer threw error.", e);
+            }
+        }
+    }
+
+    observe(observer: (event: E, meta: M) => void): Disposable {
+        if (!this.observers.includes(observer)) {
+            this.observers.push(observer);
+        }
+
+        return {
+            dispose: () => {
+                const index = this.observers.indexOf(observer);
+
+                if (index !== -1) {
+                    this.observers.splice(index, 1);
+                }
+            },
+        };
+    }
+}

src/new/core/observable/SimpleProperty.ts

@@ -0,0 +1,54 @@
+import { SimpleEmitter } from "./SimpleEmitter";
+import { Disposable } from "./Disposable";
+import { Observable } from "./Observable";
+import { WritableProperty } from "./WritableProperty";
+import { Property, PropertyMeta, is_property } from "./Property";
+import { MappedProperty } from "./MappedProperty";
+
+export class SimpleProperty<T> extends SimpleEmitter<T, PropertyMeta<T>>
+    implements WritableProperty<T> {
+    readonly is_property = true;
+    readonly is_writable_property = true;
+
+    private value: T;
+
+    constructor(value: T) {
+        super();
+        this.value = value;
+    }
+
+    get(): T {
+        return this.value;
+    }
+
+    set(value: T): void {
+        if (value !== this.value) {
+            const old_value = this.value;
+            this.value = value;
+            this.emit(value, { old_value });
+        }
+    }
+
+    bind(observable: Observable<T, any>): Disposable {
+        if (is_property(observable)) {
+            this.set(observable.get());
+        }
+
+        return observable.observe(v => this.set(v));
+    }
+
+    bind_bi(property: WritableProperty<T>): Disposable {
+        const bind_1 = this.bind(property);
+        const bind_2 = property.bind(this);
+        return {
+            dispose(): void {
+                bind_1.dispose();
+                bind_2.dispose();
+            },
+        };
+    }
+
+    map<U>(f: (element: T) => U): Property<U> {
+        return new MappedProperty(this, f);
+    }
+}

src/new/core/observable/WritableProperty.ts

@@ -0,0 +1,19 @@
+import { Property } from "./Property";
+import { Observable } from "./Observable";
+import { Disposable } from "./Disposable";
+
+export interface WritableProperty<T> extends Property<T> {
+    is_writable_property: true;
+
+    set(value: T): void;
+
+    bind(observable: Observable<T, any>): Disposable;
+
+    bind_bi(property: WritableProperty<T>): Disposable;
+}
+
+export function is_writable_property<T>(
+    observable: Observable<T, any>,
+): observable is WritableProperty<T> {
+    return (observable as any).is_writable_property;
+}

src/new/core/observable/index.ts

@@ -0,0 +1,12 @@
+import { SimpleEmitter } from "./SimpleEmitter";
+import { WritableProperty } from "./WritableProperty";
+import { SimpleProperty } from "./SimpleProperty";
+import { Emitter } from "./Emitter";
+
+export function emitter<E, M = undefined>(): Emitter<E, M> {
+    return new SimpleEmitter();
+}
+
+export function property<T>(value: T): WritableProperty<T> {
+    return new SimpleProperty(value);
+}

src/new/core/stores/GuiStore.ts

@@ -1,5 +1,6 @@
-import { Property } from "../observable/Property";
-import { Disposable } from "../gui/Disposable";
+import { WritableProperty } from "../observable/WritableProperty";
+import { Disposable } from "../observable/Disposable";
+import { property } from "../observable";
 
 export enum GuiTool {
     Viewer,
@@ -15,7 +16,7 @@ const GUI_TOOL_TO_STRING = new Map([
 const STRING_TO_GUI_TOOL = new Map([...GUI_TOOL_TO_STRING.entries()].map(([k, v]) => [v, k]));
 
 class GuiStore implements Disposable {
-    tool = new Property<GuiTool>(GuiTool.Viewer);
+    readonly tool: WritableProperty<GuiTool> = property(GuiTool.Viewer);
 
     private hash_disposer = this.tool.observe(tool => {
         window.location.hash = `#/${gui_tool_to_string(tool)}`;

src/new/index.css

@@ -1,9 +1,16 @@
 :root {
     --bg-color: hsl(0, 0%, 20%);
     --text-color: hsl(0, 0%, 85%);
+    --text-color-disabled: hsl(0, 0%, 55%);
     --border-color: hsl(0, 0%, 30%);
+    --border-color-hover: hsl(0, 0%, 40%);
+    --border-color-focus: hsl(0, 0%, 50%);
+
     --scrollbar-color: hsl(0, 0%, 17%);
     --scrollbar-thumb-color: hsl(0, 0%, 23%);
+
+    --input-bg-color: hsl(0, 0%, 10%);
+    --input-bg-color-disabled: hsl(0, 0%, 15%);
 }
 
 * {

src/new/index.ts

@@ -1,5 +1,5 @@
 import { ApplicationView } from "./application/gui/ApplicationView";
-import { Disposable } from "./core/gui/Disposable";
+import { Disposable } from "./core/observable/Disposable";
 import "./index.css";
 import { throttle } from "lodash";
 

src/new/viewer/gui/ModelView.ts

@@ -3,12 +3,15 @@ import { ResizableView } from "../../core/gui/ResizableView";
 import { ToolBar } from "../../core/gui/ToolBar";
 import "./ModelView.css";
 import { model_store } from "../stores/ModelStore";
-import { Property } from "../../core/observable/Property";
+import { WritableProperty } from "../../core/observable/WritableProperty";
 import { RendererView } from "../../core/gui/RendererView";
 import { ModelRenderer } from "../rendering/ModelRenderer";
 import { View } from "../../core/gui/View";
-import { FileInput } from "../../core/gui/FileInput";
+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 { Label } from "../../core/gui/Label";
 
 const MODEL_LIST_WIDTH = 100;
 const ANIMATION_LIST_WIDTH = 150;
@@ -59,11 +62,36 @@ export class ModelView extends ResizableView {
 }
 
 class ToolBarView extends View {
-    private readonly open_file_button = new FileInput("Open file...", ".nj, .njm, .xj");
-    private readonly skeleton_checkbox = new CheckBox("Show skeleton");
+    private readonly open_file_button = new FileButton("Open file...", ".nj, .njm, .xj, .xvm");
+    private readonly skeleton_checkbox = new CheckBox(false, "Show skeleton");
+    private readonly play_animation_checkbox = new CheckBox(true, "Play animation");
+    private readonly animation_frame_rate_input = new NumberInput(
+        PSO_FRAME_RATE,
+        "Frame rate:",
+        1,
+        240,
+        1,
+    );
+    private readonly animation_frame_input = new NumberInput(
+        1,
+        "Frame:",
+        1,
+        model_store.animation_frame_count,
+        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),
+        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;
@@ -75,16 +103,32 @@ class ToolBarView extends View {
     constructor() {
         super();
 
-        this.disposable(
+        // Always-enabled controls.
+        this.disposables(
             this.open_file_button.files.observe(files => {
                 if (files.length) model_store.load_file(files[0]);
             }),
+
+            model_store.show_skeleton.bind(this.skeleton_checkbox.checked),
         );
 
-        this.disposable(
-            this.skeleton_checkbox.checked.observe(checked =>
-                model_store.show_skeleton.set(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(enabled),
+            model_store.animation_playing.bind_bi(this.play_animation_checkbox.checked),
+
+            this.animation_frame_rate_input.enabled.bind(enabled),
+            model_store.animation_frame_rate.bind(this.animation_frame_rate_input.value),
+
+            this.animation_frame_input.enabled.bind(enabled),
+            model_store.animation_frame.bind(this.animation_frame_input.value),
+            this.animation_frame_input.value.bind(
+                model_store.animation_frame.map(v => Math.round(v)),
             ),
+
+            this.animation_frame_count_label.enabled.bind(enabled),
         );
     }
 }
@@ -105,7 +149,7 @@ class ModelSelectListView<T extends { name: string }> extends ResizableView {
     private selected_model?: T;
     private selected_element?: HTMLLIElement;
 
-    constructor(private models: T[], private selected: Property<T | undefined>) {
+    constructor(private models: T[], private selected: WritableProperty<T | undefined>) {
         super();
 
         this.element.onclick = this.list_click;

src/new/viewer/rendering/ModelRenderer.ts

@@ -15,7 +15,7 @@ import {
 } from "three";
 import { Renderer } from "../../../core/rendering/Renderer";
 import { model_store } from "../stores/ModelStore";
-import { Disposable } from "../../core/gui/Disposable";
+import { Disposable } from "../../core/observable/Disposable";
 import { create_mesh, create_skinned_mesh } from "../../../core/rendering/conversion/create_mesh";
 import { ninja_object_to_buffer_geometry } from "../../../core/rendering/conversion/ninja_geometry";
 import { NjObject } from "../../../core/data_formats/parsing/ninja";
@@ -24,6 +24,7 @@ import {
     PSO_FRAME_RATE,
 } from "../../../core/rendering/conversion/ninja_animation";
 import { NjMotion } from "../../../core/data_formats/parsing/ninja/motion";
+import { xvm_to_textures } from "../../../core/rendering/conversion/ninja_textures";
 
 export class ModelRenderer extends Renderer implements Disposable {
     private readonly perspective_camera: PerspectiveCamera;
@@ -43,9 +44,13 @@ export class ModelRenderer extends Renderer implements Disposable {
         this.perspective_camera = this.camera as PerspectiveCamera;
 
         this.disposables.push(
-            model_store.current_nj_data.observe(this.nj_object_changed),
+            model_store.current_nj_data.observe(this.nj_data_or_xvm_changed),
+            model_store.current_xvm.observe(this.nj_data_or_xvm_changed),
             model_store.current_nj_motion.observe(this.nj_motion_changed),
             model_store.show_skeleton.observe(this.show_skeleton_changed),
+            model_store.animation_playing.observe(this.animation_playing_changed),
+            model_store.animation_frame_rate.observe(this.animation_frame_rate_changed),
+            model_store.animation_frame.observe(this.animation_frame_changed),
         );
     }
 
@@ -63,18 +68,18 @@ export class ModelRenderer extends Renderer implements Disposable {
     protected render(): void {
         if (this.animation) {
             this.animation.mixer.update(this.clock.getDelta());
-            // this.update_animation_frame();
         }
 
         this.light_holder.quaternion.copy(this.perspective_camera.quaternion);
         super.render();
 
         if (this.animation && !this.animation.action.paused) {
+            this.update_animation_frame();
             this.schedule_render();
         }
     }
 
-    private nj_object_changed = (nj_data?: { nj_object: NjObject; has_skeleton: boolean }) => {
+    private nj_data_or_xvm_changed = () => {
         if (this.mesh) {
             this.scene.remove(this.mesh);
             this.mesh = undefined;
@@ -88,13 +93,15 @@ export class ModelRenderer extends Renderer implements Disposable {
             this.animation = undefined;
         }
 
+        const nj_data = model_store.current_nj_data.get();
+
         if (nj_data) {
             const { nj_object, has_skeleton } = nj_data;
 
             let mesh: Mesh;
 
-            // TODO:
-            const textures: Texture[] | undefined = Math.random() > 1 ? [] : undefined;
+            const xvm = model_store.current_xvm.get();
+            const textures = xvm ? xvm_to_textures(xvm) : undefined;
 
             const materials =
                 textures &&
@@ -159,9 +166,6 @@ export class ModelRenderer extends Renderer implements Disposable {
 
         this.clock.start();
         this.animation.action.play();
-        // TODO:
-        // this.animation_playing = true;
-        // this.animation_frame_count = Math.round(PSO_FRAME_RATE * clip.duration) + 1;
         this.schedule_render();
     };
 
@@ -172,13 +176,41 @@ export class ModelRenderer extends Renderer implements Disposable {
         }
     };
 
-    private update(): void {
-        // if (!model_viewer_store.animation_playing) {
-        //     // Reference animation_frame here to make sure we render when the user sets the frame manually.
-        //     model_viewer_store.animation_frame;
-        //     this.schedule_render();
-        // }
+    private animation_playing_changed = (playing: boolean) => {
+        if (this.animation) {
+            this.animation.action.paused = !playing;
 
-        this.schedule_render();
+            if (playing) {
+                this.clock.start();
+                this.schedule_render();
+            } else {
+                this.clock.stop();
+            }
+        }
+    };
+
+    private animation_frame_rate_changed = (frame_rate: number) => {
+        if (this.animation) {
+            this.animation.mixer.timeScale = frame_rate / PSO_FRAME_RATE;
+        }
+    };
+
+    private animation_frame_changed = (frame: number) => {
+        const nj_motion = model_store.current_nj_motion.get();
+
+        if (this.animation && nj_motion) {
+            const frame_count = nj_motion.frame_count;
+            if (frame > frame_count) frame = 1;
+            if (frame < 1) frame = frame_count;
+            this.animation.action.time = (frame - 1) / PSO_FRAME_RATE;
+            this.schedule_render();
+        }
+    };
+
+    private update_animation_frame(): void {
+        if (this.animation && !this.animation.action.paused) {
+            const time = this.animation.action.time;
+            model_store.animation_frame.set(time * PSO_FRAME_RATE + 1);
+        }
     }
 }

src/new/viewer/stores/ModelStore.ts

@@ -4,24 +4,30 @@ import { NjMotion, parse_njm } from "../../../core/data_formats/parsing/ninja/mo
 import { NjObject, parse_nj, parse_xj } from "../../../core/data_formats/parsing/ninja";
 import { CharacterClassModel } from "../domain/CharacterClassModel";
 import { CharacterClassAnimation } from "../domain/CharacterClassAnimation";
-import { Property } from "../../core/observable/Property";
+import { WritableProperty } from "../../core/observable/WritableProperty";
 import {
     get_character_class_animation_data,
     get_character_class_data,
 } from "../../../viewer/loading/character_class";
-import { Disposable } from "../../core/gui/Disposable";
+import { Disposable } from "../../core/observable/Disposable";
 import { read_file } from "../../../core/read_file";
-import { create_animation_clip } from "../../../core/rendering/conversion/ninja_animation";
-import { parse_xvm } from "../../../core/data_formats/parsing/ninja/texture";
-import { xvm_to_textures } from "../../../core/rendering/conversion/ninja_textures";
+import { property } from "../../core/observable";
+import { Property } from "../../core/observable/Property";
+import { PSO_FRAME_RATE } from "../../../core/rendering/conversion/ninja_animation";
+import { parse_xvm, Xvm } from "../../../core/data_formats/parsing/ninja/texture";
 import Logger = require("js-logger");
 
 const logger = Logger.get("viewer/stores/ModelStore");
 const nj_object_cache: Map<string, Promise<NjObject>> = new Map();
 const nj_motion_cache: Map<number, Promise<NjMotion>> = new Map();
 
-// TODO: move all Three.js stuff into the renderer.
-class ModelStore implements Disposable {
+export type NjData = {
+    nj_object: NjObject;
+    bone_count: number;
+    has_skeleton: boolean;
+};
+
+export class ModelStore implements Disposable {
     readonly models: CharacterClassModel[] = [
         new CharacterClassModel("HUmar", 1, 10, new Set([6])),
         new CharacterClassModel("HUnewearl", 1, 10, new Set()),
@@ -41,27 +47,29 @@ class ModelStore implements Disposable {
         .fill(undefined)
         .map((_, i) => new CharacterClassAnimation(i, `Animation ${i + 1}`));
 
-    readonly current_model = new Property<CharacterClassModel | undefined>(undefined);
+    readonly current_model: WritableProperty<CharacterClassModel | undefined> = property(undefined);
 
-    readonly current_nj_data = new Property<
-        | {
-              nj_object: NjObject;
-              bone_count: number;
-              has_skeleton: boolean;
-          }
-        | undefined
-    >(undefined);
+    private readonly _current_nj_data = property<NjData | undefined>(undefined);
+    readonly current_nj_data: Property<NjData | undefined> = this._current_nj_data;
 
-    readonly current_animation = new Property<CharacterClassAnimation | undefined>(undefined);
+    private readonly _current_xvm = property<Xvm | undefined>(undefined);
+    readonly current_xvm: Property<Xvm | undefined> = this._current_xvm;
 
-    readonly current_nj_motion = new Property<NjMotion | undefined>(undefined);
+    readonly show_skeleton: WritableProperty<boolean> = property(false);
 
-    // @observable animation_playing: boolean = false;
-    // @observable animation_frame_rate: number = PSO_FRAME_RATE;
-    // @observable animation_frame: number = 0;
-    // @observable animation_frame_count: number = 0;
+    readonly current_animation: WritableProperty<CharacterClassAnimation | undefined> = property(
+        undefined,
+    );
 
-    readonly show_skeleton = new Property(false);
+    private readonly _current_nj_motion = property<NjMotion | undefined>(undefined);
+    readonly current_nj_motion: Property<NjMotion | undefined> = this._current_nj_motion;
+
+    readonly animation_playing: WritableProperty<boolean> = property(true);
+    readonly animation_frame_rate: WritableProperty<number> = property(PSO_FRAME_RATE);
+    readonly animation_frame: WritableProperty<number> = property(0);
+    readonly animation_frame_count: Property<number> = this.current_nj_motion.map(njm =>
+        njm ? njm.frame_count : 0,
+    );
 
     private disposables: Disposable[] = [];
 
@@ -76,23 +84,6 @@ class ModelStore implements Disposable {
         this.disposables.forEach(d => d.dispose());
     }
 
-    // set_animation_frame_rate = (rate: number) => {
-    //     if (this.animation) {
-    //         this.animation.mixer.timeScale = rate / PSO_FRAME_RATE;
-    //         this.animation_frame_rate = rate;
-    //     }
-    // };
-    //
-    // set_animation_frame = (frame: number) => {
-    //     if (this.animation) {
-    //         const frame_count = this.animation_frame_count;
-    //         if (frame > frame_count) frame = 1;
-    //         if (frame < 1) frame = frame_count;
-    //         this.animation.action.time = (frame - 1) / PSO_FRAME_RATE;
-    //         this.animation_frame = frame;
-    //     }
-    // };
-
     // TODO: notify user of problems.
     load_file = async (file: File) => {
         try {
@@ -101,40 +92,38 @@ class ModelStore implements Disposable {
 
             if (file.name.endsWith(".nj")) {
                 this.current_model.set(undefined);
-                this.current_nj_data.set(undefined);
 
                 const nj_object = parse_nj(cursor)[0];
 
-                this.current_nj_data.set({
+                this.set_current_nj_data({
                     nj_object,
                     bone_count: nj_object.bone_count(),
                     has_skeleton: true,
                 });
             } else if (file.name.endsWith(".xj")) {
                 this.current_model.set(undefined);
-                this.current_nj_data.set(undefined);
 
                 const nj_object = parse_xj(cursor)[0];
 
-                this.current_nj_data.set({
+                this.set_current_nj_data({
                     nj_object,
                     bone_count: 0,
                     has_skeleton: false,
                 });
             } else if (file.name.endsWith(".njm")) {
                 this.current_animation.set(undefined);
-                this.current_nj_motion.set(undefined);
+                this._current_nj_motion.set(undefined);
 
                 const nj_data = this.current_nj_data.get();
 
                 if (nj_data) {
-                    this.current_nj_motion.set(parse_njm(cursor, nj_data.bone_count));
+                    this._current_nj_motion.set(parse_njm(cursor, nj_data.bone_count));
+                }
+            } else if (file.name.endsWith(".xvm")) {
+                if (this.current_model) {
+                    const xvm = parse_xvm(cursor);
+                    this._current_xvm.set(xvm);
                 }
-                // } else if (file.name.endsWith(".xvm")) {
-                //     if (this.current_model) {
-                //         const xvm = parse_xvm(cursor);
-                //         this.set_textures(xvm_to_textures(xvm));
-                //     }
             } else {
                 logger.error(`Unknown file extension in filename "${file.name}".`);
             }
@@ -143,51 +132,30 @@ class ModelStore implements Disposable {
         }
     };
 
-    // pause_animation = () => {
-    //     if (this.animation) {
-    //         this.animation.action.paused = true;
-    //         this.animation_playing = false;
-    //         this.clock.stop();
-    //     }
-    // };
-    //
-    // toggle_animation_playing = () => {
-    //     if (this.animation) {
-    //         this.animation.action.paused = !this.animation.action.paused;
-    //         this.animation_playing = !this.animation.action.paused;
-    //
-    //         if (this.animation_playing) {
-    //             this.clock.start();
-    //         } else {
-    //             this.clock.stop();
-    //         }
-    //     }
-    // };
-
-    // update_animation_frame = () => {
-    //     if (this.animation && this.animation_playing) {
-    //         const time = this.animation.action.time;
-    //         this.animation_frame = Math.round(time * PSO_FRAME_RATE) + 1;
-    //     }
-    // };
-
     private load_model = async (model?: CharacterClassModel) => {
         this.current_animation.set(undefined);
 
         if (model) {
             const nj_object = await this.get_nj_object(model);
 
-            this.current_nj_data.set({
+            this.set_current_nj_data({
                 nj_object,
                 // Ignore the bones from the head parts.
                 bone_count: model ? 64 : nj_object.bone_count(),
                 has_skeleton: true,
             });
         } else {
-            this.current_nj_data.set(undefined);
+            this._current_nj_data.set(undefined);
         }
     };
 
+    private set_current_nj_data(nj_data: NjData): void {
+        this.current_model.set(undefined);
+        this._current_nj_data.set(undefined);
+        this._current_xvm.set(undefined);
+        this._current_nj_data.set(nj_data);
+    }
+
     private async get_nj_object(model: CharacterClassModel): Promise<NjObject> {
         let nj_object = nj_object_cache.get(model.name);
 
@@ -252,9 +220,10 @@ class ModelStore implements Disposable {
         const nj_data = this.current_nj_data.get();
 
         if (nj_data && animation) {
-            this.current_nj_motion.set(await this.get_nj_motion(animation, nj_data.bone_count));
+            this._current_nj_motion.set(await this.get_nj_motion(animation, nj_data.bone_count));
+            this.animation_playing.set(true);
         } else {
-            this.current_nj_motion.set(undefined);
+            this._current_nj_motion.set(undefined);
         }
     };
 
@@ -275,10 +244,6 @@ class ModelStore implements Disposable {
             return nj_motion;
         }
     }
-
-    // private set_textures = (textures: Texture[]) => {
-    //     this.set_obj3d(textures);
-    // };
 }
 
 export const model_store = new ModelStore();