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

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

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-08-28 21:36:45 +02:00
parent f100220176
commit 5446f77202
42 changed files with 502 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

24
src/application/gui/NavigationButton.css Normal file
View File

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

29
src/application/gui/NavigationButton.ts Normal file
View File

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

25
src/application/gui/NavigationView.css
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,35 +1,39 @@
import { Widget } from "./Widget";
import { Widget, WidgetOptions } from "./Widget";
import { create_element } from "./dom";
import "./ToolBar.css";
import { LabelledControl } from "./LabelledControl";
export class ToolBar extends Widget {
readonly element = create_element("div", { class: "core_ToolBar" });
export type ToolBarOptions = WidgetOptions & {
children?: Widget[];
};
export class ToolBar extends Widget {
readonly height = 33;
constructor(...children: Widget[]) {
super();
constructor(options?: ToolBarOptions) {
super(create_element("div", { class: "core_ToolBar" }), options);
this.element.style.height = `${this.height}px`;
for (const child of children) {
if (child instanceof LabelledControl) {
const group = create_element("div", { class: "core_ToolBar_group" });
if (options && options.children) {
for (const child of options.children) {
if (child instanceof LabelledControl) {
const group = create_element("div", { class: "core_ToolBar_group" });
if (
child.preferred_label_position === "left" ||
child.preferred_label_position === "top"
) {
group.append(child.label.element, child.element);
if (
child.preferred_label_position === "left" ||
child.preferred_label_position === "top"
) {
group.append(child.label.element, child.element);
} else {
group.append(child.element, child.label.element);
}
this.element.append(group);
} else {
group.append(child.element, child.label.element);
this.element.append(child.element);
this.disposable(child);
}
this.element.append(group);
} else {
this.element.append(child.element);
this.disposable(child);
}
}
}

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

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

10
src/core/gui/dom.ts
View File

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

2
src/core/observable/WidgetProperty.ts
View File

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

24
src/core/undo/SimpleUndo.ts
View File

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

6
src/core/undo/UndoManager.ts
View File

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

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

@ -26,24 +26,24 @@ editor.defineTheme("phantasmal-world", {
const DUMMY_MODEL = editor.createModel("", "psoasm");
export class AsmEditorView extends ResizableWidget {
readonly element = el.div();
private readonly editor: IStandaloneCodeEditor = this.disposable(
editor.create(this.element, {
theme: "phantasmal-world",
scrollBeyondLastLine: false,
autoIndent: true,
fontSize: 13,
wordBasedSuggestions: false,
wordWrap: "on",
wrappingIndent: "indent",
renderIndentGuides: false,
folding: false,
}),
);
private readonly editor: IStandaloneCodeEditor;
constructor() {
super();
super(el.div());
this.editor = this.disposable(
editor.create(this.element, {
theme: "phantasmal-world",
scrollBeyondLastLine: false,
autoIndent: true,
fontSize: 13,
wordBasedSuggestions: false,
wordWrap: "on",
wrappingIndent: "indent",
renderIndentGuides: false,
folding: false,
}),
);
this.disposables(
asm_editor_store.did_undo.observe(({ value: source }) => {

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

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

1
src/quest_editor/gui/EntityInfoView.css
View File

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

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

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

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

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

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

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

44
src/quest_editor/gui/QuestEditorToolBar.ts Normal file
View File

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

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

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

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

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

48
src/quest_editor/gui/ToolBarView.ts
View File

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

207
src/viewer/gui/Model3DView.ts
View File

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

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

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

27
src/viewer/gui/ViewerView.ts
View File

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

13
src/viewer/gui/Model3DView.css → src/viewer/gui/model_3d/Model3DSelectListView.css
View File

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

64
src/viewer/gui/model_3d/Model3DSelectListView.ts Normal file
View File

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

69
src/viewer/gui/model_3d/Model3DToolBar.ts Normal file
View File

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

4
src/viewer/gui/model_3d/Model3DView.css Normal file
View File

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

73
src/viewer/gui/model_3d/Model3DView.ts Normal file
View File

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