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

src/core/gui/Input.ts

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

src/core/gui/NumberInput.ts

@@ -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;
-            const { min, max, step } = options;
+        this.set_attr("min", min, String);
-            this.set_attr("min", min, String);
+        this.set_attr("max", max, String);
-            this.set_attr("max", max, String);
+        this.set_attr("step", step, 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;
     }
 }

src/core/gui/dom.ts

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

src/core/observable/DependentProperty.ts

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

src/core/observable/FlatMappedProperty.ts

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

src/old/quest_editor/ui/AddObjectComponent.tsx

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

src/quest_editor/actions/TranslateEntityAction.ts

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

src/quest_editor/gui/AsmEditorView.ts

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

src/quest_editor/gui/DisabledView.css

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

src/quest_editor/gui/DisabledView.ts

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

src/quest_editor/gui/EntityInfoView.css

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

src/quest_editor/gui/EntityInfoView.ts

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

src/quest_editor/gui/NpcCountsView.css

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

src/quest_editor/gui/NpcCountsView.ts

@@ -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_view = new DisabledView("No quest loaded.");
-    private readonly no_quest_label = this.disposable(
-        new Label("No quest loaded.", { enabled: false }),
-    );
 
     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.table_element, no_quest);
-        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.disposables(
+            this.no_quest_view.visible.bind_to(no_quest),
+
             quest.observe(({ value }) => this.update_view(value), {
                 call_now: true,
             }),

src/quest_editor/gui/QuesInfoView.css

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

src/quest_editor/gui/QuesInfoView.ts

@@ -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_view = new DisabledView("No quest loaded.");
-    private readonly no_quest_label = this.disposable(
-        new Label("No quest loaded.", { enabled: false }),
-    );
 
     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;
-
+        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.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();
 

src/quest_editor/gui/QuestEditorView.ts

@@ -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",
+                title: "Entity",
-            //     type: "component",
+                type: "component",
-            //     componentName: Component.EntityInfo,
+                componentName: VIEW_TO_NAME.get(EntityInfoView),
-            //     isClosable: false,
+                isClosable: false,
-            //     width: 2,
+                width: 2,
-            // },
+            },
         ],
     },
 ];

src/quest_editor/rendering/QuestEntityControls.ts

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

src/quest_editor/stores/QuestEditorStore.ts

@@ -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> {