Removed bind_bi from Property.

src/core/gui/ComboBox.ts

@@ -4,7 +4,6 @@ import "./ComboBox.css";
 import "./Input.css";
 import { Menu } from "./Menu";
 import { Property } from "../observable/property/Property";
-import { property } from "../observable";
 import { WritableProperty } from "../observable/property/WritableProperty";
 import { WidgetProperty } from "../observable/property/WidgetProperty";
 
@@ -35,14 +34,12 @@ export class ComboBox<T> extends LabelledControl {
         this._selected = new WidgetProperty<T | undefined>(this, undefined, this.set_selected);
         this.selected = this._selected;
 
-        const menu_visible = property(false);
-
         this.menu = this.disposable(new Menu(options.items, options.to_label, this.element));
         this.menu.element.onmousedown = e => e.preventDefault();
 
         this.input_element.placeholder = options.placeholder_text || "";
         this.input_element.onmousedown = () => {
-            menu_visible.val = true;
+            this.menu.visible.set_val(true, { silent: false });
         };
 
         this.input_element.onkeydown = (e: Event) => {
@@ -83,14 +80,14 @@ export class ComboBox<T> extends LabelledControl {
         }
 
         this.input_element.onblur = () => {
-            menu_visible.val = false;
+            this.menu.visible.set_val(false, { silent: false });
         };
 
         const down_arrow_element = el.span({}, icon(Icon.TriangleDown));
-        this.bind_hidden(down_arrow_element, menu_visible);
+        this.bind_hidden(down_arrow_element, this.menu.visible);
 
         const up_arrow_element = el.span({}, icon(Icon.TriangleUp));
-        this.bind_hidden(up_arrow_element, menu_visible.map(v => !v));
+        this.bind_hidden(up_arrow_element, this.menu.visible.map(v => !v));
 
         const button_element = el.span(
             { class: "core_ComboBox_button" },
@@ -99,7 +96,7 @@ export class ComboBox<T> extends LabelledControl {
         );
         button_element.onmousedown = e => {
             e.preventDefault();
-            menu_visible.val = !menu_visible.val;
+            this.menu.visible.set_val(!this.menu.visible.val, { silent: false });
         };
 
         this.element.append(
@@ -112,9 +109,7 @@ export class ComboBox<T> extends LabelledControl {
         );
 
         this.disposables(
-            this.menu.visible.bind_bi(menu_visible),
+            this.menu.visible.observe(({ value: visible }) => {
-
-            menu_visible.observe(({ value: visible }) => {
                 if (visible) {
                     this.menu.hover_next();
                 }

src/core/gui/Menu.ts

@@ -65,14 +65,14 @@ export class Menu<T> extends Widget {
     }
 
     hover_next(): void {
-        this.visible.val = true;
+        this.visible.set_val(true, { silent: false });
         this.hover_item(
             this.hovered_index != undefined ? (this.hovered_index + 1) % this.items.val.length : 0,
         );
     }
 
     hover_prev(): void {
-        this.visible.val = true;
+        this.visible.set_val(true, { silent: false });
         this.hover_item(this.hovered_index ? this.hovered_index - 1 : this.items.val.length - 1);
     }
 

src/core/observable/property/SimpleProperty.ts

@@ -43,15 +43,4 @@ export class SimpleProperty<T> extends AbstractProperty<T> implements WritablePr
 
         return observable.observe(event => (this.val = event.value));
     }
-
-    bind_bi(property: WritableProperty<T>): Disposable {
-        const bind_1 = this.bind_to(property);
-        const bind_2 = property.bind_to(this);
-        return {
-            dispose(): void {
-                bind_1.dispose();
-                bind_2.dispose();
-            },
-        };
-    }
 }

src/core/observable/property/WritableProperty.ts

@@ -15,6 +15,4 @@ export interface WritableProperty<T> extends Property<T> {
      * @param observable the observable who's events will be propagated to this property.
      */
     bind_to(observable: Observable<T>): Disposable;
-
-    bind_bi(property: WritableProperty<T>): Disposable;
 }

src/core/observable/property/list/SimpleListProperty.ts

@@ -114,17 +114,6 @@ export class SimpleListProperty<T> extends AbstractProperty<readonly T[]>
         }
     }
 
-    bind_bi(property: WritableProperty<readonly T[]>): Disposable {
-        const bind_1 = this.bind_to(property);
-        const bind_2 = property.bind_to(this);
-        return {
-            dispose(): void {
-                bind_1.dispose();
-                bind_2.dispose();
-            },
-        };
-    }
-
     update(f: (element: T[]) => T[]): void {
         this.splice(0, this.values.length, ...f(this.values));
     }

src/viewer/gui/model_3d/Model3DSelectListView.ts

@@ -1,7 +1,7 @@
 import { ResizableWidget } from "../../../core/gui/ResizableWidget";
 import { create_element } from "../../../core/gui/dom";
-import { WritableProperty } from "../../../core/observable/property/WritableProperty";
 import "./Model3DSelectListView.css";
+import { Property } from "../../../core/observable/property/Property";
 
 export class Model3DSelectListView<T extends { name: string }> extends ResizableWidget {
     readonly element = create_element("ul", { class: "viewer_Model3DSelectListView" });
@@ -19,7 +19,11 @@ export class Model3DSelectListView<T extends { name: string }> extends Resizable
     private selected_model?: T;
     private selected_element?: HTMLLIElement;
 
-    constructor(private models: T[], private selected: WritableProperty<T | undefined>) {
+    constructor(
+        private models: readonly T[],
+        private selected: Property<T | undefined>,
+        private set_selected: (selected: T) => void,
+    ) {
         super();
 
         this.element.onclick = this.list_click;
@@ -62,7 +66,7 @@ export class Model3DSelectListView<T extends { name: string }> extends Resizable
             const index = parseInt(e.target.dataset["index"]!, 10);
 
             this.selected_element = e.target;
-            this.selected.val = this.models[index];
+            this.set_selected(this.models[index]);
         }
     };
 }

src/viewer/gui/model_3d/Model3DToolBar.ts

@@ -48,7 +48,7 @@ export class Model3DToolBar extends ToolBar {
                 if (files.length) model_store.load_file(files[0]);
             }),
 
-            model_store.show_skeleton.bind_to(skeleton_checkbox.checked),
+            skeleton_checkbox.checked.observe(({ value }) => model_store.set_show_skeleton(value)),
         );
 
         // Controls that are only enabled when an animation is selected.
@@ -56,16 +56,23 @@ export class Model3DToolBar extends ToolBar {
 
         this.disposables(
             play_animation_checkbox.enabled.bind_to(enabled),
-            model_store.animation_playing.bind_bi(play_animation_checkbox.checked),
+            play_animation_checkbox.checked.bind_to(model_store.animation_playing),
+            play_animation_checkbox.checked.observe(({ value }) =>
+                model_store.set_animation_playing(value),
+            ),
 
             animation_frame_rate_input.enabled.bind_to(enabled),
-            model_store.animation_frame_rate.bind_to(animation_frame_rate_input.value),
+            animation_frame_rate_input.value.observe(({ value }) =>
+                model_store.set_animation_frame_rate(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_input.value.observe(({ value }) =>
+                model_store.set_animation_frame(value),
+            ),
 
             animation_frame_count_label.enabled.bind_to(enabled),
         );

src/viewer/gui/model_3d/Model3DView.ts

@@ -26,10 +26,18 @@ export class Model3DView extends ResizableWidget {
 
         this.tool_bar_view = this.disposable(new Model3DToolBar());
         this.model_list_view = this.disposable(
-            new Model3DSelectListView(model_store.models, model_store.current_model),
+            new Model3DSelectListView(
+                model_store.models,
+                model_store.current_model,
+                model_store.set_current_model,
+            ),
         );
         this.animation_list_view = this.disposable(
-            new Model3DSelectListView(model_store.animations, model_store.current_animation),
+            new Model3DSelectListView(
+                model_store.animations,
+                model_store.current_animation,
+                model_store.set_current_animation,
+            ),
         );
         this.renderer_view = this.disposable(new RendererWidget(new Model3DRenderer()));
 
@@ -45,7 +53,7 @@ export class Model3DView extends ResizableWidget {
             ),
         );
 
-        model_store.current_model.val = model_store.models[5];
+        model_store.set_current_model(model_store.models[5]);
 
         this.renderer_view.start_rendering();
 

src/viewer/stores/Model3DStore.ts

@@ -28,7 +28,22 @@ export type NjData = {
 };
 
 export class Model3DStore implements Disposable {
-    readonly models: CharacterClassModel[] = [
+    private readonly _current_model: WritableProperty<CharacterClassModel | undefined> = property(
+        undefined,
+    );
+    private readonly _current_nj_data = property<NjData | undefined>(undefined);
+    private readonly _current_xvm = property<Xvm | undefined>(undefined);
+    private readonly _show_skeleton: WritableProperty<boolean> = property(false);
+    private readonly _current_animation: WritableProperty<
+        CharacterClassAnimationModel | undefined
+    > = property(undefined);
+    private readonly _current_nj_motion = property<NjMotion | undefined>(undefined);
+    private readonly _animation_playing: WritableProperty<boolean> = property(true);
+    private readonly _animation_frame_rate: WritableProperty<number> = property(PSO_FRAME_RATE);
+    private readonly _animation_frame: WritableProperty<number> = property(0);
+    private readonly disposables: Disposable[] = [];
+
+    readonly models: readonly CharacterClassModel[] = [
         new CharacterClassModel("HUmar", 1, 10, new Set([6])),
         new CharacterClassModel("HUnewearl", 1, 10, new Set()),
         new CharacterClassModel("HUcast", 5, 0, new Set()),
@@ -43,36 +58,24 @@ export class Model3DStore implements Disposable {
         new CharacterClassModel("FOnewearl", 1, 10, new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])),
     ];
 
-    readonly animations: CharacterClassAnimationModel[] = new Array(572)
+    readonly animations: readonly CharacterClassAnimationModel[] = new Array(572)
         .fill(undefined)
         .map((_, i) => new CharacterClassAnimationModel(i, `Animation ${i + 1}`));
 
-    readonly current_model: WritableProperty<CharacterClassModel | undefined> = property(undefined);
+    readonly current_model: Property<CharacterClassModel | undefined> = this._current_model;
-
-    private readonly _current_nj_data = property<NjData | undefined>(undefined);
     readonly current_nj_data: Property<NjData | undefined> = this._current_nj_data;
-
-    private readonly _current_xvm = property<Xvm | undefined>(undefined);
     readonly current_xvm: Property<Xvm | undefined> = this._current_xvm;
-
+    readonly show_skeleton: Property<boolean> = this._show_skeleton;
-    readonly show_skeleton: WritableProperty<boolean> = property(false);
+    readonly current_animation: Property<CharacterClassAnimationModel | undefined> = this
-
+        ._current_animation;
-    readonly current_animation: WritableProperty<
-        CharacterClassAnimationModel | undefined
-    > = property(undefined);
-
-    private readonly _current_nj_motion = property<NjMotion | undefined>(undefined);
     readonly current_nj_motion: Property<NjMotion | undefined> = this._current_nj_motion;
-
+    readonly animation_playing: Property<boolean> = this._animation_playing;
-    readonly animation_playing: WritableProperty<boolean> = property(true);
+    readonly animation_frame_rate: Property<number> = this._animation_frame_rate;
-    readonly animation_frame_rate: WritableProperty<number> = property(PSO_FRAME_RATE);
+    readonly animation_frame: Property<number> = this._animation_frame;
-    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[] = [];
-
     constructor() {
         this.disposables.push(
             this.current_model.observe(({ value }) => this.load_model(value)),
@@ -84,6 +87,38 @@ export class Model3DStore implements Disposable {
         this.disposables.forEach(d => d.dispose());
     }
 
+    set_current_model = (current_model: CharacterClassModel): void => {
+        this._current_model.val = current_model;
+    };
+
+    clear_current_model = (): void => {
+        this._current_model.val = undefined;
+    };
+
+    set_show_skeleton = (show_skeleton: boolean): void => {
+        this._show_skeleton.val = show_skeleton;
+    };
+
+    set_current_animation = (animation: CharacterClassAnimationModel): void => {
+        this._current_animation.val = animation;
+    };
+
+    clear_current_animation = (): void => {
+        this._current_animation.val = undefined;
+    };
+
+    set_animation_playing = (playing: boolean): void => {
+        this._animation_playing.val = playing;
+    };
+
+    set_animation_frame_rate = (frame_rate: number): void => {
+        this._animation_frame_rate.val = frame_rate;
+    };
+
+    set_animation_frame = (frame: number): void => {
+        this._animation_frame.val = frame;
+    };
+
     // TODO: notify user of problems.
     load_file = async (file: File): Promise<void> => {
         try {
@@ -91,7 +126,7 @@ export class Model3DStore implements Disposable {
             const cursor = new ArrayBufferCursor(buffer, Endianness.Little);
 
             if (file.name.endsWith(".nj")) {
-                this.current_model.val = undefined;
+                this.clear_current_model();
 
                 const nj_object = parse_nj(cursor)[0];
 
@@ -101,7 +136,7 @@ export class Model3DStore implements Disposable {
                     has_skeleton: true,
                 });
             } else if (file.name.endsWith(".xj")) {
-                this.current_model.val = undefined;
+                this.clear_current_model();
 
                 const nj_object = parse_xj(cursor)[0];
 
@@ -111,13 +146,13 @@ export class Model3DStore implements Disposable {
                     has_skeleton: false,
                 });
             } else if (file.name.endsWith(".njm")) {
-                this.current_animation.val = undefined;
+                this.clear_current_animation();
                 this._current_nj_motion.val = undefined;
 
                 const nj_data = this.current_nj_data.val;
 
                 if (nj_data) {
-                    this.animation_playing.val = true;
+                    this.set_animation_playing(true);
                     this._current_nj_motion.val = parse_njm(cursor, nj_data.bone_count);
                 }
             } else if (file.name.endsWith(".xvm")) {
@@ -133,7 +168,7 @@ export class Model3DStore implements Disposable {
     };
 
     private load_model = async (model?: CharacterClassModel): Promise<void> => {
-        this.current_animation.val = undefined;
+        this.clear_current_animation();
 
         if (model) {
             const nj_object = await this.get_nj_object(model);
@@ -219,7 +254,7 @@ export class Model3DStore implements Disposable {
 
         if (nj_data && animation) {
             this._current_nj_motion.val = await this.get_nj_motion(animation, nj_data.bone_count);
-            this.animation_playing.val = true;
+            this.set_animation_playing(true);
         } else {
             this._current_nj_motion.val = undefined;
         }