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

Quest entity view is now ported to the new GUI system.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-08-27 14:50:16 +02:00
parent 0a9abcc7ed
commit 3fd4d7c882
19 changed files with 381 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,13 +29,19 @@ export abstract class Input<T> extends LabelledControl {
class: `${input_class_name} core_Input_inner`,
});
this.input.type = input_type;
this.input.onchange = () => (this.value.val = this.get_input_value());
this.input.onchange = () => {
if (this.input_value_changed()) {
this.value.val = this.get_input_value();
}
};
this.set_input_value(value.val);
this.element.append(this.input);
this.disposables(
this.value.observe(({ value }) => this.set_input_value(value)),
this.value.observe(({ value }) => {
this.set_input_value(value);
}),
this.enabled.observe(({ value }) => {
this.input.disabled = !value;
@ -49,6 +55,18 @@ export abstract class Input<T> extends LabelledControl {
);
}
set_value(value: T, options: { silent?: boolean } = {}): void {
this.value.set_val(value, options);
if (options.silent) {
this.set_input_value(value);
}
}
protected input_value_changed(): boolean {
return true;
}
protected abstract get_input_value(): T;
protected abstract set_input_value(value: T): void;

36
src/core/gui/NumberInput.ts
View File

@ -1,36 +1,49 @@
import { property } from "../observable";
import { Property } from "../observable/Property";
import { Input } from "./Input";
import "./NumberInput.css"
import "./NumberInput.css";
export class NumberInput extends Input<number> {
readonly preferred_label_position = "left";
private readonly rounding_factor: number;
private rounded_value: number = 0;
constructor(
value: number = 0,
options?: {
options: {
label?: string;
min?: number | Property<number>;
max?: number | Property<number>;
step?: number | Property<number>;
},
width?: number;
round_to?: number;
} = {},
) {
super(
property(value),
"core_NumberInput",
"number",
"core_NumberInput_inner",
options && options.label,
options.label,
);
if (options) {
const { min, max, step } = options;
this.set_attr("min", min, String);
this.set_attr("max", max, String);
this.set_attr("step", step, String);
const { min, max, step } = options;
this.set_attr("min", min, String);
this.set_attr("max", max, String);
this.set_attr("step", step, String);
if (options.round_to != undefined && options.round_to >= 0) {
this.rounding_factor = Math.pow(10, options.round_to);
} else {
this.rounding_factor = 1;
}
this.element.style.width = "54px";
this.element.style.width = `${options.width == undefined ? 54 : options.width}px`;
}
protected input_value_changed(): boolean {
return this.input.valueAsNumber !== this.rounded_value;
}
protected get_input_value(): number {
@ -38,6 +51,7 @@ export class NumberInput extends Input<number> {
}
protected set_input_value(value: number): void {
this.input.valueAsNumber = value;
this.input.valueAsNumber = this.rounded_value =
Math.round(this.rounding_factor * value) / this.rounding_factor;
}
}

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

@ -15,7 +15,7 @@ export const el = {
create_element("tr", attributes, ...children),
th: (
attributes?: { text?: string; col_span?: number },
attributes?: { class?: string; text?: string; col_span?: number },
...children: HTMLElement[]
): HTMLTableHeaderCellElement => create_element("th", attributes, ...children),

7
src/core/observable/DependentProperty.ts
View File

@ -32,7 +32,10 @@ export class DependentProperty<T> extends AbstractMinimalProperty<T> implements
super();
}
observe(observer: (event: PropertyChangeEvent<T>) => void): Disposable {
observe(
observer: (event: PropertyChangeEvent<T>) => void,
options: { call_now?: boolean } = {},
): Disposable {
const super_disposable = super.observe(observer);
if (this.dependency_disposables.length === 0) {
@ -49,6 +52,8 @@ export class DependentProperty<T> extends AbstractMinimalProperty<T> implements
);
}
this.emit(this._val!);
return {
dispose: () => {
super_disposable.dispose();

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

@ -42,6 +42,8 @@ export class FlatMappedProperty<T, U> extends AbstractMinimalProperty<U> impleme
this.compute_and_observe();
}
this.emit(this.get_val());
return {
dispose: () => {
super_disposable.dispose();

46
src/old/quest_editor/ui/AddObjectComponent.tsx
View File

@ -1,46 +0,0 @@
import * as React from "react";
import { Component, ReactNode } from "react";
import { observer } from "mobx-react";
import {
object_data,
OBJECT_TYPES,
ObjectType,
} from "../../../core/data_formats/parsing/quest/object_types";
const drag_helper = document.createElement("div");
drag_helper.id = "drag_helper";
drag_helper.style.width = "100px";
drag_helper.style.height = "100px";
drag_helper.style.position = "fixed";
drag_helper.style.top = "-200px";
document.body.append(drag_helper);
@observer
export class AddObjectComponent extends Component {
render(): ReactNode {
return (
<div>
{OBJECT_TYPES.map(type => (
<ObjectComponent key={type} object_type={type} />
))}
</div>
);
}
}
class ObjectComponent extends Component<{ object_type: ObjectType }> {
render(): ReactNode {
return (
<div
style={{
width: 100,
height: 100,
color: "black",
backgroundColor: "#ffff00",
}}
>
{object_data(this.props.object_type).name}
</div>
);
}
}

26
src/quest_editor/actions/TranslateEntityAction.ts
View File

@ -3,25 +3,47 @@ import { QuestEntityModel } from "../model/QuestEntityModel";
import { Vec3 } from "../../core/data_formats/vector";
import { entity_data } from "../../core/data_formats/parsing/quest/entities";
import { quest_editor_store } from "../stores/QuestEditorStore";
import { SectionModel } from "../model/SectionModel";
export class TranslateEntityAction implements Action {
readonly description: string;
constructor(
private entity: QuestEntityModel,
private old_section: SectionModel | undefined,
private new_section: SectionModel | undefined,
private old_position: Vec3,
private new_position: Vec3,
private world: boolean,
) {
this.description = `Move ${entity_data(entity.type).name}`;
}
undo(): void {
this.entity.set_world_position(this.old_position);
if (this.world) {
this.entity.set_world_position(this.old_position);
} else {
this.entity.set_position(this.old_position);
}
if (this.old_section) {
this.entity.set_section(this.old_section);
}
quest_editor_store.set_selected_entity(this.entity);
}
redo(): void {
this.entity.set_world_position(this.new_position);
if (this.world) {
this.entity.set_world_position(this.new_position);
} else {
this.entity.set_position(this.new_position);
}
if (this.new_section) {
this.entity.set_section(this.new_section);
}
quest_editor_store.set_selected_entity(this.entity);
}
}

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

@ -23,6 +23,8 @@ editor.defineTheme("phantasmal-world", {
},
});
const DUMMY_MODEL = editor.createModel("", "psoasm");
export class AsmEditorView extends ResizableView {
readonly element = el.div();
@ -55,7 +57,7 @@ export class AsmEditorView extends ResizableView {
asm_editor_store.model.observe(
({ value: model }) => {
this.editor.updateOptions({ readOnly: model == undefined });
this.editor.setModel(model || null);
this.editor.setModel(model || DUMMY_MODEL);
},
{ call_now: true },
),

7
src/quest_editor/gui/DisabledView.css Normal file
View File

@ -0,0 +1,7 @@
.quest_editor_DisabledView {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

18
src/quest_editor/gui/DisabledView.ts Normal file
View File

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

29
src/quest_editor/gui/EntityInfoView.css Normal file
View File

@ -0,0 +1,29 @@
.quest_editor_EntityInfoView {
outline: none;
box-sizing: border-box;
padding: 3px;
overflow: auto;
}
.quest_editor_EntityInfoView table {
table-layout: fixed;
user-select: text;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.quest_editor_EntityInfoView th {
width: 80px;
text-align: left;
}
.quest_editor_EntityInfoView td {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.quest_editor_EntityInfoView th.quest_editor_EntityInfoView_coord {
padding-left: 10px;
}

197
src/quest_editor/gui/EntityInfoView.ts Normal file
View File

@ -0,0 +1,197 @@
import { ResizableView } from "../../core/gui/ResizableView";
import { el } from "../../core/gui/dom";
import { DisabledView } from "./DisabledView";
import { quest_editor_store } from "../stores/QuestEditorStore";
import { QuestNpcModel } from "../model/QuestNpcModel";
import { entity_data } from "../../core/data_formats/parsing/quest/entities";
import "./EntityInfoView.css";
import { NumberInput } from "../../core/gui/NumberInput";
import { Disposer } from "../../core/observable/Disposer";
import { Property } from "../../core/observable/Property";
import { Vec3 } from "../../core/data_formats/vector";
import { QuestEntityModel } from "../model/QuestEntityModel";
export class EntityInfoView extends ResizableView {
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();
private readonly type_element: HTMLTableCellElement;
private readonly name_element: HTMLTableCellElement;
private readonly section_id_element: HTMLTableCellElement;
private readonly pos_x_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly pos_y_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly pos_z_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly world_pos_x_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly world_pos_y_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly world_pos_z_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly entity_disposer = new Disposer();
constructor() {
super();
const entity = quest_editor_store.selected_entity;
const no_entity = entity.map(e => e == undefined);
const coord_class = "quest_editor_EntityInfoView_coord";
this.table_element.append(
el.tr({}, el.th({ text: "Type:" }), (this.type_element = el.td())),
el.tr({}, el.th({ text: "Name:" }), (this.name_element = el.td())),
el.tr({}, el.th({ text: "Section:" }), (this.section_id_element = el.td())),
el.tr({}, el.th({ text: "Section position:", col_span: 2 })),
el.tr(
{},
el.th({ text: "X:", class: coord_class }),
el.td({}, this.pos_x_element.element),
),
el.tr(
{},
el.th({ text: "Y:", class: coord_class }),
el.td({}, this.pos_y_element.element),
),
el.tr(
{},
el.th({ text: "Z:", class: coord_class }),
el.td({}, this.pos_z_element.element),
),
el.tr({}, el.th({ text: "World position:", col_span: 2 })),
el.tr(
{},
el.th({ text: "X:", class: coord_class }),
el.td({}, this.world_pos_x_element.element),
),
el.tr(
{},
el.th({ text: "Y:", class: coord_class }),
el.td({}, this.world_pos_y_element.element),
),
el.tr(
{},
el.th({ text: "Z:", class: coord_class }),
el.td({}, this.world_pos_z_element.element),
),
);
this.element.append(this.table_element, this.no_entity_view.element);
this.element.addEventListener("focus", () => quest_editor_store.undo.make_current(), true);
this.bind_hidden(this.table_element, no_entity);
this.disposables(
this.no_entity_view.visible.bind_to(no_entity),
entity.observe(({ value: entity }) => {
this.entity_disposer.dispose_all();
if (entity) {
this.type_element.innerText =
entity instanceof QuestNpcModel ? "NPC" : "Object";
const name = entity_data(entity.type).name;
this.name_element.innerText = name;
this.name_element.title = name;
this.entity_disposer.add(
entity.section_id.observe(
({ value: section_id }) => {
this.section_id_element.innerText = section_id.toString();
},
{ call_now: true },
),
);
this.observe(
entity,
entity.position,
false,
this.pos_x_element,
this.pos_y_element,
this.pos_z_element,
);
this.observe(
entity,
entity.world_position,
true,
this.world_pos_x_element,
this.world_pos_y_element,
this.world_pos_z_element,
);
}
}),
);
}
dispose(): void {
super.dispose();
this.entity_disposer.dispose();
}
private observe(
entity: QuestEntityModel,
pos: Property<Vec3>,
world: boolean,
x_input: NumberInput,
y_input: NumberInput,
z_input: NumberInput,
): void {
this.entity_disposer.add_all(
pos.observe(
({ value: { x, y, z } }) => {
x_input.set_value(x, { silent: true });
y_input.set_value(y, { silent: true });
z_input.set_value(z, { silent: true });
},
{ call_now: true },
),
x_input.value.observe(({ value }) =>
quest_editor_store.push_translate_entity_action(
entity,
entity.section.val,
entity.section.val,
pos.val,
new Vec3(value, pos.val.y, pos.val.z),
world,
),
),
y_input.value.observe(({ value }) =>
quest_editor_store.push_translate_entity_action(
entity,
entity.section.val,
entity.section.val,
pos.val,
new Vec3(pos.val.x, value, pos.val.z),
world,
),
),
z_input.value.observe(({ value }) =>
quest_editor_store.push_translate_entity_action(
entity,
entity.section.val,
entity.section.val,
pos.val,
new Vec3(pos.val.x, pos.val.y, value),
world,
),
),
);
}
}

12
src/quest_editor/gui/NpcCountsView.css
View File

@ -1,12 +1,14 @@
.quest_editor_NpcCountsView {
user-select: text;
box-sizing: border-box;
padding: 3px;
overflow: auto;
}
.quest_editor_NpcCountsView table {
user-select: text;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.quest_editor_NpcCountsView th {
@ -17,11 +19,3 @@
.quest_editor_NpcCountsView td {
cursor: text;
}
.quest_editor_NpcCountsView_no_quest {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

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

@ -2,32 +2,30 @@ import { ResizableView } from "../../core/gui/ResizableView";
import { el } from "../../core/gui/dom";
import { quest_editor_store } from "../stores/QuestEditorStore";
import { npc_data, NpcType } from "../../core/data_formats/parsing/quest/npc_types";
import { Label } from "../../core/gui/Label";
import { QuestModel } from "../model/QuestModel";
import "./NpcCountsView.css";
import { DisabledView } from "./DisabledView";
export class NpcCountsView extends ResizableView {
readonly element = el.div({ class: "quest_editor_NpcCountsView" });
private readonly table_element = el.table();
private readonly no_quest_element = el.div({ class: "quest_editor_NpcCountsView_no_quest" });
private readonly no_quest_label = this.disposable(
new Label("No quest loaded.", { enabled: false }),
);
private readonly no_quest_view = new DisabledView("No quest loaded.");
constructor() {
super();
this.element.append(this.table_element, this.no_quest_view.element);
const quest = quest_editor_store.current_quest;
const no_quest = quest.map(q => q == undefined);
this.no_quest_element.append(this.no_quest_label.element);
this.bind_hidden(this.no_quest_element, quest.map(q => q != undefined));
this.no_quest_element.append(this.no_quest_label.element);
this.element.append(this.table_element, this.no_quest_element);
this.bind_hidden(this.table_element, no_quest);
this.disposables(
this.no_quest_view.visible.bind_to(no_quest),
quest.observe(({ value }) => this.update_view(value), {
call_now: true,
}),

8
src/quest_editor/gui/QuesInfoView.css
View File

@ -24,11 +24,3 @@
.quest_editor_QuesInfoView textarea {
width: 100%;
}
.quest_editor_QuesInfoView_no_quest {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

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

@ -7,7 +7,7 @@ import { Disposer } from "../../core/observable/Disposer";
import { TextInput } from "../../core/gui/TextInput";
import { TextArea } from "../../core/gui/TextArea";
import "./QuesInfoView.css";
import { Label } from "../../core/gui/Label";
import { DisabledView } from "./DisabledView";
export class QuesInfoView extends ResizableView {
readonly element = el.div({ class: "quest_editor_QuesInfoView", tab_index: -1 });
@ -37,10 +37,7 @@ export class QuesInfoView extends ResizableView {
}),
);
private readonly no_quest_element = el.div({ class: "quest_editor_QuesInfoView_no_quest" });
private readonly no_quest_label = this.disposable(
new Label("No quest loaded.", { enabled: false }),
);
private readonly no_quest_view = new DisabledView("No quest loaded.");
private readonly quest_disposer = this.disposable(new Disposer());
@ -48,9 +45,7 @@ export class QuesInfoView extends ResizableView {
super();
const quest = quest_editor_store.current_quest;
this.no_quest_element.append(this.no_quest_label.element);
this.bind_hidden(this.no_quest_element, quest.map(q => q != undefined));
const no_quest = quest.map(q => q == undefined);
this.table_element.append(
el.tr({}, el.th({ text: "Episode:" }), (this.episode_element = el.td())),
@ -61,13 +56,16 @@ export class QuesInfoView extends ResizableView {
el.tr({}, el.th({ text: "Long description:", col_span: 2 })),
el.tr({}, el.td({ col_span: 2 }, this.long_description_input.element)),
);
this.bind_hidden(this.table_element, quest.map(q => q == undefined));
this.element.append(this.table_element, this.no_quest_element);
this.bind_hidden(this.table_element, no_quest);
this.element.append(this.table_element, this.no_quest_view.element);
this.element.addEventListener("focus", () => quest_editor_store.undo.make_current(), true);
this.disposables(
this.no_quest_view.visible.bind_to(no_quest),
quest.observe(({ value: q }) => {
this.quest_disposer.dispose_all();

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

@ -10,6 +10,7 @@ import { NpcCountsView } from "./NpcCountsView";
import { QuestRendererView } from "./QuestRendererView";
import { AsmEditorView } from "./AsmEditorView";
import Logger = require("js-logger");
import { EntityInfoView } from "./EntityInfoView";
const logger = Logger.get("quest_editor/gui/QuestEditorView");
@ -19,7 +20,7 @@ const VIEW_TO_NAME = new Map<new () => ResizableView, string>([
[NpcCountsView, "npc_counts"],
[QuestRendererView, "quest_renderer"],
[AsmEditorView, "asm_editor"],
// [EntityInfoView, "entity_info"],
[EntityInfoView, "entity_info"],
// [AddObjectView, "add_object"],
]);
@ -79,13 +80,13 @@ const DEFAULT_LAYOUT_CONTENT: ItemConfigType[] = [
},
],
},
// {
// title: "Entity",
// type: "component",
// componentName: Component.EntityInfo,
// isClosable: false,
// width: 2,
// },
{
title: "Entity",
type: "component",
componentName: VIEW_TO_NAME.get(EntityInfoView),
isClosable: false,
width: 2,
},
],
},
];

7
src/quest_editor/rendering/QuestEntityControls.ts
View File

@ -18,6 +18,7 @@ type Highlighted = {
};
type Pick = {
initial_section?: SectionModel;
initial_position: Vec3;
grab_offset: Vector3;
drag_adjust: Vector3;
@ -260,7 +261,7 @@ export class QuestEntityControls implements Disposable {
selection.entity.set_section(section);
}
} else {
// If the cursor is not over any terrain, we translate the entity accross the horizontal plane in which the entity's origin lies.
// If the cursor is not over any terrain, we translate the entity across the horizontal plane in which the entity's origin lies.
this.raycaster.setFromCamera(pointer_position, this.renderer.camera);
const ray = this.raycaster.ray;
// ray.origin.add(data.dragAdjust);
@ -287,8 +288,11 @@ export class QuestEntityControls implements Disposable {
const entity = this.selected.entity;
quest_editor_store.push_translate_entity_action(
entity,
this.pick.initial_section,
entity.section.val,
this.pick.initial_position,
entity.world_position.val,
true,
);
}
@ -332,6 +336,7 @@ export class QuestEntityControls implements Disposable {
return {
mesh: intersection.object as Mesh,
entity,
initial_section: entity.section.val,
initial_position: entity.world_position.val,
grab_offset,
drag_adjust,

16
src/quest_editor/stores/QuestEditorStore.ts
View File

@ -165,10 +165,24 @@ export class QuestEditorStore implements Disposable {
push_translate_entity_action = (
entity: QuestEntityModel,
old_section: SectionModel | undefined,
new_section: SectionModel | undefined,
old_position: Vec3,
new_position: Vec3,
world: boolean,
) => {
this.undo.push(new TranslateEntityAction(entity, old_position, new_position)).redo();
this.undo
.push(
new TranslateEntityAction(
entity,
old_section,
new_section,
old_position,
new_position,
world,
),
)
.redo();
};
private async set_quest(quest?: QuestModel, filename?: string): Promise<void> {