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

Widget's element property is now abstract and is overridden in every concrete subclass. This often simplifies widget code.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-09-15 19:32:34 +02:00
parent da622aab61
commit 87c6ae37e4
39 changed files with 207 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/application/gui/ApplicationView.ts
View File

@ -7,13 +7,17 @@ export class ApplicationView extends ResizableWidget {
private menu_view = this.disposable(new NavigationView());
private main_content_view = this.disposable(new MainContentView());
readonly element = el.div(
{ class: "application_ApplicationView" },
this.menu_view.element,
this.main_content_view.element,
);
constructor() {
super(el.div({ class: "application_ApplicationView" }));
super();
this.element.id = "root";
this.element.append(this.menu_view.element, this.main_content_view.element);
this.finalize_construction(ApplicationView.prototype);
}

4
src/application/gui/MainContentView.ts
View File

@ -18,12 +18,14 @@ const TOOLS: [GuiTool, () => Promise<ResizableWidget>][] = [
];
export class MainContentView extends ResizableWidget {
readonly element = el.div({ class: "application_MainContentView" });
private tool_views = new Map(
TOOLS.map(([tool, create_view]) => [tool, this.disposable(new LazyWidget(create_view))]),
);
constructor() {
super(el.div({ class: "application_MainContentView" }));
super();
for (const tool_view of this.tool_views.values()) {
this.element.append(tool_view.element);

4
src/application/gui/NavigationButton.ts
View File

@ -4,11 +4,13 @@ import { GuiTool } from "../../core/stores/GuiStore";
import "./NavigationButton.css";
export class NavigationButton extends Widget {
readonly element = el.span({ class: "application_NavigationButton" });
private input: HTMLInputElement = create_element("input");
private label: HTMLLabelElement = create_element("label");
constructor(tool: GuiTool, text: string) {
super(el.span({ class: "application_NavigationButton" }));
super();
const tool_str = GuiTool[tool];

72
src/application/gui/NavigationView.ts
View File

@ -13,49 +13,51 @@ const TOOLS: [GuiTool, string][] = [
];
export class NavigationView extends Widget {
readonly height = 30;
private buttons = new Map<GuiTool, NavigationButton>(
private readonly buttons = new Map<GuiTool, NavigationButton>(
TOOLS.map(([value, text]) => [value, this.disposable(new NavigationButton(value, text))]),
);
private readonly server_select = this.disposable(
new Select(property(["Ephinea"]), server => server, {
label: "Server:",
enabled: false,
selected: "Ephinea",
tooltip: "Only Ephinea is supported at the moment",
}),
);
readonly element = el.div(
{ class: "application_NavigationView" },
...[...this.buttons.values()].map(button => button.element),
el.div({ class: "application_NavigationView_spacer" }),
this.server_select.element,
el.span(
{ class: "application_NavigationView_server" },
this.server_select.label!.element,
this.server_select.element,
),
el.a(
{
class: "application_NavigationView_github",
href: "https://github.com/DaanVandenBosch/phantasmal-world",
title: "GitHub",
},
icon(Icon.GitHub),
),
);
readonly height = 30;
constructor() {
super(el.div({ class: "application_NavigationView" }));
super();
this.element.style.height = `${this.height}px`;
this.element.onmousedown = this.mousedown;
for (const button of this.buttons.values()) {
this.element.append(button.element);
}
this.element.append(el.div({ class: "application_NavigationView_spacer" }));
const server_select = this.disposable(
new Select(property(["Ephinea"]), server => server, {
label: "Server:",
enabled: false,
selected: "Ephinea",
tooltip: "Only Ephinea is supported at the moment",
}),
);
this.element.append(
el.span(
{ class: "application_NavigationView_server" },
server_select.label!.element,
server_select.element,
),
el.a(
{
class: "application_NavigationView_github",
href: "https://github.com/DaanVandenBosch/phantasmal-world",
title: "GitHub",
},
icon(Icon.GitHub),
),
);
this.mark_tool_button(gui_store.tool.val);
this.disposable(gui_store.tool.observe(({ value }) => this.mark_tool_button(value)));

9
src/core/gui/Button.ts
View File

@ -14,7 +14,8 @@ export type ButtonOptions = WidgetOptions & {
icon_right?: Icon;
};
export class Button extends Control<HTMLButtonElement> {
export class Button extends Control {
readonly element = el.button({ class: "core_Button" });
readonly mousedown: Observable<MouseEvent>;
readonly mouseup: Observable<MouseEvent>;
readonly click: Observable<MouseEvent>;
@ -27,9 +28,9 @@ export class Button extends Control<HTMLButtonElement> {
private readonly center_element: HTMLSpanElement;
constructor(text: string | Property<string>, options?: ButtonOptions) {
const inner_element = el.span({ class: "core_Button_inner" });
super(options);
super(el.button({ class: "core_Button" }, inner_element), options);
const inner_element = el.span({ class: "core_Button_inner" });
this.center_element = el.span({ class: "core_Button_center" });
@ -64,6 +65,8 @@ export class Button extends Control<HTMLButtonElement> {
this.text.bind_to(text);
}
this.element.append(inner_element);
this.finalize_construction(Button.prototype);
}

6
src/core/gui/CheckBox.ts
View File

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

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

@ -16,6 +16,8 @@ export type ComboBoxOptions<T> = LabelledControlOptions & {
};
export class ComboBox<T> extends LabelledControl {
readonly element = el.span({ class: "core_ComboBox core_Input" });
readonly preferred_label_position = "left";
readonly selected: WritableProperty<T | undefined>;
@ -26,7 +28,7 @@ export class ComboBox<T> extends LabelledControl {
private readonly _selected: WidgetProperty<T | undefined>;
constructor(options: ComboBoxOptions<T>) {
super(el.span({ class: "core_ComboBox core_Input" }), options);
super(options);
this.to_label = options.to_label;

2
src/core/gui/Control.ts
View File

@ -2,4 +2,4 @@ import { Widget, WidgetOptions } from "./Widget";
export type ControlOptions = WidgetOptions;
export abstract class Control<E extends HTMLElement = HTMLElement> extends Widget<E> {}
export abstract class Control extends Widget {}

24
src/core/gui/DropDown.ts
View File

@ -11,6 +11,8 @@ import { emitter } from "../observable";
export type DropDownOptions = ButtonOptions;
export class DropDown<T> extends Control {
readonly element = el.div({ class: "core_DropDown" });
readonly chosen: Observable<T>;
private readonly button: Button;
@ -24,17 +26,15 @@ export class DropDown<T> extends Control {
to_label: (element: T) => string,
options?: DropDownOptions,
) {
const element = el.div({ class: "core_DropDown" });
const button = new Button(text, {
icon_left: options && options.icon_left,
icon_right: Icon.TriangleDown,
});
const menu = new Menu<T>(items, to_label, element);
super(options);
super(element, options);
this.button = this.disposable(button);
this.menu = this.disposable(menu);
this.button = this.disposable(
new Button(text, {
icon_left: options && options.icon_left,
icon_right: Icon.TriangleDown,
}),
);
this.menu = this.disposable(new Menu<T>(items, to_label, this.element));
this.element.append(this.button.element, this.menu.element);
this._chosen = emitter();
@ -43,11 +43,11 @@ export class DropDown<T> extends Control {
this.just_opened = false;
this.disposables(
disposable_listener(button.element, "mousedown", () => this.button_mousedown(), {
disposable_listener(this.button.element, "mousedown", () => this.button_mousedown(), {
capture: true,
}),
button.mouseup.observe(() => this.button_mouseup()),
this.button.mouseup.observe(() => this.button_mouseup()),
this.menu.selected.observe(({ value }) => {
if (value) {

13
src/core/gui/FileButton.ts
View File

@ -11,7 +11,11 @@ export type FileButtonOptions = ControlOptions & {
icon_left?: Icon;
};
export class FileButton extends Control<HTMLElement> {
export class FileButton extends Control {
readonly element = create_element("label", {
class: "core_FileButton core_Button",
});
readonly files: Property<File[]>;
private input: HTMLInputElement = create_element("input", {
@ -21,12 +25,7 @@ export class FileButton extends Control<HTMLElement> {
private readonly _files: WritableProperty<File[]> = property<File[]>([]);
constructor(text: string, options?: FileButtonOptions) {
super(
create_element("label", {
class: "core_FileButton core_Button",
}),
options,
);
super(options);
this.files = this._files;

8
src/core/gui/Input.ts
View File

@ -8,7 +8,9 @@ import { WidgetProperty } from "../observable/property/WidgetProperty";
export type InputOptions = LabelledControlOptions;
export abstract class Input<T> extends LabelledControl<HTMLElement> {
export abstract class Input<T> extends LabelledControl {
readonly element: HTMLElement;
readonly value: WritableProperty<T>;
protected readonly input_element: HTMLInputElement;
@ -22,7 +24,9 @@ export abstract class Input<T> extends LabelledControl<HTMLElement> {
input_class_name: string,
options?: InputOptions,
) {
super(el.span({ class: `${class_name} core_Input` }), options);
super(options);
this.element = el.span({ class: `${class_name} core_Input` });
this._value = new WidgetProperty<T>(this, value, this.set_value);
this.value = this._value;

6
src/core/gui/Label.ts
View File

@ -5,7 +5,9 @@ import "./Label.css";
import { Property } from "../observable/property/Property";
import { WidgetProperty } from "../observable/property/WidgetProperty";
export class Label extends Widget<HTMLLabelElement> {
export class Label extends Widget {
readonly element = create_element<HTMLLabelElement>("label", { class: "core_Label" });
set for(id: string) {
this.element.htmlFor = id;
}
@ -15,7 +17,7 @@ export class Label extends Widget<HTMLLabelElement> {
private readonly _text = new WidgetProperty<string>(this, "", this.set_text);
constructor(text: string | Property<string>, options?: WidgetOptions) {
super(create_element("label", { class: "core_Label" }), options);
super(options);
this.text = this._text;

6
src/core/gui/LabelledControl.ts
View File

@ -8,7 +8,7 @@ export type LabelledControlOptions = WidgetOptions & {
export type LabelPosition = "left" | "right" | "top" | "bottom";
export abstract class LabelledControl<E extends HTMLElement = HTMLElement> extends Control<E> {
export abstract class LabelledControl extends Control {
abstract readonly preferred_label_position: LabelPosition;
get label(): Label | undefined {
@ -28,8 +28,8 @@ export abstract class LabelledControl<E extends HTMLElement = HTMLElement> exten
private readonly _label_text?: string;
private _label?: Label;
protected constructor(element: E, options?: LabelledControlOptions) {
super(element, options);
protected constructor(options?: LabelledControlOptions) {
super(options);
this._label_text = options && options.label;
}

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

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

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

@ -7,6 +7,7 @@ import { WidgetProperty } from "../observable/property/WidgetProperty";
import "./Menu.css";
export class Menu<T> extends Widget {
readonly element = el.div({ class: "core_Menu", tab_index: -1 });
readonly selected: WritableProperty<T | undefined>;
private readonly to_label: (element: T) => string;
@ -22,7 +23,7 @@ export class Menu<T> extends Widget {
to_label: (element: T) => string,
related_element: HTMLElement,
) {
super(el.div({ class: "core_Menu", tab_index: -1 }));
super();
this.visible.val = false;

6
src/core/gui/RendererWidget.ts
View File

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

3
src/core/gui/ResizableWidget.ts
View File

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

22
src/core/gui/Select.ts
View File

@ -12,6 +12,8 @@ export type SelectOptions<T> = LabelledControlOptions & {
};
export class Select<T> extends LabelledControl {
readonly element = el.div({ class: "core_Select" });
readonly preferred_label_position: LabelPosition;
readonly selected: WritableProperty<T | undefined>;
@ -27,19 +29,17 @@ export class Select<T> extends LabelledControl {
to_label: (element: T) => string,
options?: SelectOptions<T>,
) {
const element = el.div({ class: "core_Select" });
const button = new Button(" ", {
icon_right: Icon.TriangleDown,
});
const menu = new Menu<T>(items, to_label, element);
super(element, options);
super(options);
this.preferred_label_position = "left";
this.to_label = to_label;
this.button = this.disposable(button);
this.menu = this.disposable(menu);
this.button = this.disposable(
new Button(" ", {
icon_right: Icon.TriangleDown,
}),
);
this.menu = this.disposable(new Menu<T>(items, to_label, this.element));
this.element.append(this.button.element, this.menu.element);
this._selected = new WidgetProperty<T | undefined>(this, undefined, this.set_selected);
@ -48,9 +48,9 @@ export class Select<T> extends LabelledControl {
this.just_opened = false;
this.disposables(
disposable_listener(button.element, "mousedown", e => this.button_mousedown(e)),
disposable_listener(this.button.element, "mousedown", e => this.button_mousedown(e)),
button.mouseup.observe(() => this.button_mouseup()),
this.button.mouseup.observe(() => this.button_mouseup()),
this.menu.selected.observe(({ value }) =>
this._selected.set_val(value, { silent: false }),

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

@ -20,12 +20,14 @@ type TabInfo = Tab & { tab_element: HTMLSpanElement; lazy_view: LazyWidget };
const BAR_HEIGHT = 28;
export class TabContainer extends ResizableWidget {
readonly element = el.div({ class: "core_TabContainer" });
private tabs: TabInfo[] = [];
private bar_element = el.div({ class: "core_TabContainer_Bar" });
private panes_element = el.div({ class: "core_TabContainer_Panes" });
constructor(options: TabContainerOptions) {
super(el.div({ class: "core_TabContainer" }), options);
super(options);
this.bar_element.onmousedown = this.bar_mousedown;

6
src/core/gui/Table.ts
View File

@ -38,7 +38,9 @@ export type TableOptions<T> = WidgetOptions & {
sort?(sort_columns: { column: Column<T>; direction: SortDirection }[]): void;
};
export class Table<T> extends Widget<HTMLTableElement> {
export class Table<T> extends Widget {
readonly element = el.table({ class: "core_Table" });
private readonly table_disposer = this.disposable(new Disposer());
private readonly tbody_element = el.tbody();
private readonly footer_row_element?: HTMLTableRowElement;
@ -46,7 +48,7 @@ export class Table<T> extends Widget<HTMLTableElement> {
private readonly columns: Column<T>[];
constructor(options: TableOptions<T>) {
super(el.table({ class: "core_Table" }), options);
super(options);
this.values = options.values;
this.columns = options.columns;

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

@ -12,6 +12,8 @@ export type TextAreaOptions = LabelledControlOptions & {
};
export class TextArea extends LabelledControl {
readonly element = el.div({ class: "core_TextArea" });
readonly preferred_label_position = "left";
readonly value: WritableProperty<string>;
@ -23,7 +25,7 @@ export class TextArea extends LabelledControl {
private readonly _value = new WidgetProperty<string>(this, "", this.set_value);
constructor(value = "", options?: TextAreaOptions) {
super(el.div({ class: "core_TextArea" }), options);
super(options);
if (options) {
if (options.max_length != undefined) this.text_element.maxLength = options.max_length;

3
src/core/gui/ToolBar.ts
View File

@ -8,10 +8,11 @@ export type ToolBarOptions = WidgetOptions & {
};
export class ToolBar extends Widget {
readonly element = create_element("div", { class: "core_ToolBar" });
readonly height = 33;
constructor(options?: ToolBarOptions) {
super(create_element("div", { class: "core_ToolBar" }), options);
super(options);
this.element.style.height = `${this.height}px`;

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

@ -15,8 +15,8 @@ export type WidgetOptions = {
tooltip?: string | Property<string>;
};
export abstract class Widget<E extends HTMLElement = HTMLElement> implements Disposable {
readonly element: E;
export abstract class Widget implements Disposable {
abstract readonly element: HTMLElement;
get id(): string {
return this.element.id;
@ -51,18 +51,13 @@ export abstract class Widget<E extends HTMLElement = HTMLElement> implements Dis
private readonly options: WidgetOptions;
private construction_finalized = false;
protected constructor(element: E, options?: WidgetOptions) {
this.element = element;
protected constructor(options?: WidgetOptions) {
this.visible = this._visible;
this.enabled = this._enabled;
this.tooltip = this._tooltip;
this.options = options || {};
if (this.options.class) {
this.element.classList.add(this.options.class);
}
setTimeout(() => {
if (!this.construction_finalized) {
logger.warn(
@ -87,7 +82,9 @@ export abstract class Widget<E extends HTMLElement = HTMLElement> implements Dis
protected finalize_construction(proto: any): void {
if (Object.getPrototypeOf(this) !== proto) return;
this.construction_finalized = true;
if (this.options.class) {
this.element.classList.add(this.options.class);
}
if (typeof this.options.enabled === "boolean") {
this.enabled.val = this.options.enabled;
@ -100,6 +97,8 @@ export abstract class Widget<E extends HTMLElement = HTMLElement> implements Dis
} else if (this.options.tooltip) {
this.tooltip.bind_to(this.options.tooltip);
}
this.construction_finalized = true;
}
protected set_visible(visible: boolean): void {

37
src/hunt_optimizer/gui/HelpView.ts
View File

@ -3,26 +3,25 @@ import { ResizableWidget } from "../../core/gui/ResizableWidget";
import "./HelpView.css";
export class HelpView extends ResizableWidget {
constructor() {
super(
el.div(
{ class: "hunt_optimizer_HelpView" },
el.p({
text:
"Add some items with the combo box on the left to see the optimal combination of hunt methods on the right.",
}),
el.p({
text:
'At the moment a hunt method is simply a quest run-through. Partial quest run-throughs are coming. View the list of methods on the "Methods" tab. Each method takes a certain amount of time, which affects the optimization result. Make sure the times are correct for you.',
}),
el.p({ text: "Only enemy drops are considered. Box drops are coming." }),
el.p({
text:
"The optimal result is calculated using linear optimization. The optimizer takes into account rare enemies and the fact that pan arms can be split in two.",
}),
),
);
readonly element = el.div(
{ class: "hunt_optimizer_HelpView" },
el.p({
text:
"Add some items with the combo box on the left to see the optimal combination of hunt methods on the right.",
}),
el.p({
text:
'At the moment a hunt method is simply a quest run-through. Partial quest run-throughs are coming. View the list of methods on the "Methods" tab. Each method takes a certain amount of time, which affects the optimization result. Make sure the times are correct for you.',
}),
el.p({ text: "Only enemy drops are considered. Box drops are coming." }),
el.p({
text:
"The optimal result is calculated using linear optimization. The optimizer takes into account rare enemies and the fact that pan arms can be split in two.",
}),
);
constructor() {
super();
this.finalize_construction(HelpView.prototype);
}
}

4
src/hunt_optimizer/gui/MethodsForEpisodeView.ts
View File

@ -16,12 +16,14 @@ import { SortDirection, Table } from "../../core/gui/Table";
import { list_property } from "../../core/observable";
export class MethodsForEpisodeView extends ResizableWidget {
readonly element = el.div({ class: "hunt_optimizer_MethodsForEpisodeView" });
private readonly episode: Episode;
private readonly enemy_types: NpcType[];
private hunt_methods_observer?: Disposable;
constructor(episode: Episode) {
super(el.div({ class: "hunt_optimizer_MethodsForEpisodeView" }));
super();
this.episode = episode;

12
src/hunt_optimizer/gui/OptimizationResultView.ts
View File

@ -11,16 +11,16 @@ import "./OptimizationResultView.css";
import { Duration } from "luxon";
export class OptimizationResultView extends Widget {
readonly element = el.div(
{ class: "hunt_optimizer_OptimizationResultView" },
el.h2({ text: "Ideal Combination of Methods" }),
);
private results_observer?: Disposable;
private table?: Table<OptimalMethodModel>;
constructor() {
super(
el.div(
{ class: "hunt_optimizer_OptimizationResultView" },
el.h2({ text: "Ideal Combination of Methods" }),
),
);
super();
this.disposable(
hunt_optimizer_stores.observe_current(

4
src/hunt_optimizer/gui/OptimizerView.ts
View File

@ -5,8 +5,10 @@ import "./OptimizerView.css";
import { OptimizationResultView } from "./OptimizationResultView";
export class OptimizerView extends ResizableWidget {
readonly element = el.div({ class: "hunt_optimizer_OptimizerView" });
constructor() {
super(el.div({ class: "hunt_optimizer_OptimizerView" }));
super();
this.element.append(
this.disposable(new WantedItemsView()).element,

4
src/hunt_optimizer/gui/WantedItemsView.ts
View File

@ -15,12 +15,14 @@ import { list_property } from "../../core/observable";
import { ItemType } from "../../core/model/items";
export class WantedItemsView extends Widget {
readonly element = el.div({ class: "hunt_optimizer_WantedItemsView" });
private readonly tbody_element = el.tbody();
private readonly table_disposer = this.disposable(new Disposer());
private readonly store_disposer = this.disposable(new Disposer());
constructor() {
super(el.div({ class: "hunt_optimizer_WantedItemsView" }));
super();
const huntable_items = list_property<ItemType>();
const filtered_huntable_items = list_property<ItemType>();

4
src/quest_editor/gui/AsmEditorView.ts
View File

@ -26,10 +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;
constructor() {
super(el.div());
super();
this.editor = this.disposable(
editor.create(this.element, {

4
src/quest_editor/gui/DisabledView.ts
View File

@ -4,10 +4,12 @@ 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(el.div({ class: "quest_editor_DisabledView" }));
super();
this.label = this.disposable(new Label(text, { enabled: false }));

4
src/quest_editor/gui/EntityInfoView.ts
View File

@ -12,6 +12,8 @@ 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();
@ -41,7 +43,7 @@ export class EntityInfoView extends ResizableWidget {
private readonly entity_disposer = new Disposer();
constructor() {
super(el.div({ class: "quest_editor_EntityInfoView", tab_index: -1 }));
super();
const entity = quest_editor_store.selected_entity;
const no_entity = entity.map(e => e == undefined);

4
src/quest_editor/gui/NpcCountsView.ts
View File

@ -7,12 +7,14 @@ 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(el.div({ class: "quest_editor_NpcCountsView" }));
super();
this.element.append(this.table_element, this.no_quest_view.element);

1
src/quest_editor/gui/QuestEditorToolBar.ts
View File

@ -11,7 +11,6 @@ import { DropDown } from "../../core/gui/DropDown";
import { Episode } from "../../core/data_formats/parsing/quest/Episode";
import { area_store } from "../stores/AreaStore";
import { gui_store, GuiTool } from "../../core/stores/GuiStore";
import { asm_editor_store } from "../stores/AsmEditorStore";
export class QuestEditorToolBar extends ToolBar {
constructor() {

4
src/quest_editor/gui/QuestEditorView.ts
View File

@ -94,6 +94,8 @@ const DEFAULT_LAYOUT_CONTENT: ItemConfigType[] = [
];
export class QuestEditorView extends ResizableWidget {
readonly element = el.div({ class: "quest_editor_QuestEditorView" });
private readonly tool_bar_view = this.disposable(new QuestEditorToolBar());
private readonly layout_element = create_element("div", { class: "quest_editor_gl_container" });
@ -102,7 +104,7 @@ export class QuestEditorView extends ResizableWidget {
private readonly sub_views = new Map<string, ResizableWidget>();
constructor() {
super(el.div({ class: "quest_editor_QuestEditorView" }));
super();
this.element.append(this.tool_bar_view.element, this.layout_element);

4
src/quest_editor/gui/QuestInfoView.ts
View File

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

4
src/quest_editor/gui/QuestRendererView.ts
View File

@ -6,10 +6,12 @@ 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(el.div({ class: "quest_editor_QuestRendererView", tab_index: -1 }));
super();
this.element.append(this.renderer_view.element);

4
src/viewer/gui/TextureView.ts
View File

@ -8,6 +8,8 @@ import { TextureRenderer } from "../rendering/TextureRenderer";
import { gui_store, GuiTool } from "../../core/stores/GuiStore";
export class TextureView extends ResizableWidget {
readonly element = el.div({ class: "viewer_TextureView" });
private readonly open_file_button = new FileButton("Open file...", {
icon_left: Icon.File,
accept: ".xvm",
@ -18,7 +20,7 @@ export class TextureView extends ResizableWidget {
private readonly renderer_view = this.disposable(new RendererWidget(new TextureRenderer()));
constructor() {
super(el.div({ class: "viewer_TextureView" }));
super();
this.element.append(this.tool_bar.element, this.renderer_view.element);

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

@ -4,6 +4,8 @@ import { WritableProperty } from "../../../core/observable/property/WritableProp
import "./Model3DSelectListView.css";
export class Model3DSelectListView<T extends { name: string }> extends ResizableWidget {
readonly element = create_element("ul", { class: "viewer_Model3DSelectListView" });
set borders(borders: boolean) {
if (borders) {
this.element.style.borderLeft = "var(--border)";
@ -18,7 +20,7 @@ export class Model3DSelectListView<T extends { name: string }> extends Resizable
private selected_element?: HTMLLIElement;
constructor(private models: T[], private selected: WritableProperty<T | undefined>) {
super(create_element("ul", { class: "viewer_Model3DSelectListView" }));
super();
this.element.onclick = this.list_click;

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

@ -14,13 +14,15 @@ const MODEL_LIST_WIDTH = 100;
const ANIMATION_LIST_WIDTH = 140;
export class Model3DView extends ResizableWidget {
readonly element = el.div({ class: "viewer_Model3DView" });
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" }));
super();
this.tool_bar_view = this.disposable(new Model3DToolBar());
this.model_list_view = this.disposable(
@ -33,13 +35,15 @@ export class Model3DView extends ResizableWidget {
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,
el.div(
{ class: "viewer_Model3DView_container" },
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];