Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-05 15:28:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Removed bind_bi from Property.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-10-26 17:03:12 +02:00
parent 22cf7165f8
commit a8997e66a9
9 changed files with 99 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/core/gui/ComboBox.ts
View File

@ -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),
menu_visible.observe(({ value: visible }) => {
this.menu.visible.observe(({ value: visible }) => {
if (visible) {
this.menu.hover_next();
}

4
src/core/gui/Menu.ts
View File

@ -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);
}

11
src/core/observable/property/SimpleProperty.ts
View File

@ -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();
},
};
}
}

2
src/core/observable/property/WritableProperty.ts
View File

@ -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;
}

11
src/core/observable/property/list/SimpleListProperty.ts
View File

@ -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));
}

10
src/viewer/gui/model_3d/Model3DSelectListView.ts
View File

@ -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]);
}
};
}

15
src/viewer/gui/model_3d/Model3DToolBar.ts
View File

@ -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),
);

14
src/viewer/gui/model_3d/Model3DView.ts
View File

@ -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();

89
src/viewer/stores/Model3DStore.ts
View File

@ -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);
private readonly _current_nj_data = property<NjData | undefined>(undefined);
readonly current_model: Property<CharacterClassModel | undefined> = this._current_model;
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: WritableProperty<boolean> = property(false);
readonly current_animation: WritableProperty<
CharacterClassAnimationModel | undefined
> = property(undefined);
private readonly _current_nj_motion = property<NjMotion | undefined>(undefined);
readonly show_skeleton: Property<boolean> = this._show_skeleton;
readonly current_animation: Property<CharacterClassAnimationModel | undefined> = this
._current_animation;
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_playing: Property<boolean> = this._animation_playing;
readonly animation_frame_rate: Property<number> = this._animation_frame_rate;
readonly animation_frame: Property<number> = this._animation_frame;
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;
}