Changing an entity's position via the entity info component now results in an action on the undo stack.

src/rendering/QuestEntityControls.ts

@@ -271,21 +271,10 @@ export class QuestEntityControls {
     private stop_transforming = () => {
         if (this.moved_since_last_mouse_down && this.selected && this.pick) {
             const entity = this.selected.entity;
-            const initial_position = this.pick.initial_position;
-            const new_position = entity.position;
-            const entity_type =
-                entity instanceof QuestNpc ? entity.type.name : (entity as QuestObject).type.name;
-
-            quest_editor_store.undo.push_action(
-                `Move ${entity_type}`,
-                () => {
-                    entity.position = initial_position;
-                    quest_editor_store.set_selected_entity(entity);
-                },
-                () => {
-                    entity.position = new_position;
-                    quest_editor_store.set_selected_entity(entity);
-                }
+            quest_editor_store.push_entity_move_action(
+                entity,
+                this.pick.initial_position,
+                entity.position
             );
         }
 

src/stores/QuestEditorStore.ts

@@ -6,7 +6,7 @@ import { parse_quest, write_quest_qst } from "../data_formats/parsing/quest";
 import { Vec3 } from "../data_formats/vector";
 import { Area, Episode, Quest, QuestEntity, Section } from "../domain";
 import { read_file } from "../read_file";
-import { UndoStack, SimpleUndo } from "../undo";
+import { SimpleUndo, UndoStack } from "../undo";
 import { application_store } from "./ApplicationStore";
 import { area_store } from "./AreaStore";
 import { create_new_quest } from "./quest_creation";
@@ -118,6 +118,21 @@ class QuestEditorStore {
         this.save_dialog_open = false;
     };
 
+    @action
+    push_entity_move_action = (entity: QuestEntity, initial_position: Vec3, new_position: Vec3) => {
+        this.undo.push_action(
+            `Move ${entity.type.name}`,
+            () => {
+                entity.position = initial_position;
+                quest_editor_store.set_selected_entity(entity);
+            },
+            () => {
+                entity.position = new_position;
+                quest_editor_store.set_selected_entity(entity);
+            }
+        );
+    };
+
     @action
     private set_quest = flow(function* set_quest(this: QuestEditorStore, quest?: Quest) {
         if (quest !== this.current_quest) {

src/ui/quest_editor/EntityInfoComponent.css

@@ -1,20 +0,0 @@
-.EntityInfoComponent-container {
-    width: 100%;
-    height: 100%;
-    padding: 2px 10px 10px 10px;
-    display: flex;
-    flex-direction: column;
-}
-
-.EntityInfoComponent-table {
-    border-collapse: collapse;
-}
-
-.EntityInfoComponent-coord {
-    width: 100px !important;
-}
-
-.EntityInfoComponent-coord input {
-    text-align: right;
-    padding-right: 24px !important;
-}

src/ui/quest_editor/EntityInfoComponent.less

@@ -0,0 +1,29 @@
+.qe-EntityInfoComponent-container {
+    width: 100%;
+    height: 100%;
+    padding: 2px 10px 10px 10px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.qe-EntityInfoComponent-table {
+    border-collapse: collapse;
+
+    & th:not([colspan]) {
+        width: 65px;
+    }
+}
+
+.qe-EntityInfoComponent-coord-label {
+    padding: 0px 5px 0px 10px;
+}
+
+.qe-EntityInfoComponent-coord {
+    width: 100px !important;
+
+    & input {
+        text-align: right;
+        padding-right: 24px !important;
+    }
+}

src/ui/quest_editor/EntityInfoComponent.tsx

@@ -5,7 +5,8 @@ import React, { Component, PureComponent, ReactNode } from "react";
 import { QuestEntity, QuestNpc, QuestObject } from "../../domain";
 import { quest_editor_store } from "../../stores/QuestEditorStore";
 import { DisabledTextComponent } from "../DisabledTextComponent";
-import "./EntityInfoComponent.css";
+import "./EntityInfoComponent.less";
+import { Vec3 } from "../../data_formats/vector";
 
 @observer
 export class EntityInfoComponent extends Component {
@@ -15,84 +16,30 @@ export class EntityInfoComponent extends Component {
 
         if (entity) {
             const section_id = entity.section ? entity.section.id : entity.section_id;
-            let name = null;
-
-            if (entity instanceof QuestObject) {
-                name = (
-                    <tr>
-                        <td>Object: </td>
-                        <td colSpan={2}>{entity.type.name}</td>
-                    </tr>
-                );
-            } else if (entity instanceof QuestNpc) {
-                name = (
-                    <tr>
-                        <td>NPC: </td>
-                        <td>{entity.type.name}</td>
-                    </tr>
-                );
-            }
 
             body = (
-                <table className="EntityInfoComponent-table">
+                <table className="qe-EntityInfoComponent-table">
                     <tbody>
-                        {name}
                         <tr>
-                            <td>Section: </td>
+                            <th>{entity instanceof QuestNpc ? "NPC" : "Object"}:</th>
+                            <td>{entity.type.name}</td>
+                        </tr>
+                        <tr>
+                            <th>Section:</th>
                             <td>{section_id}</td>
                         </tr>
                         <tr>
-                            <td colSpan={2}>World position: </td>
+                            <th colSpan={2}>World position:</th>
                         </tr>
+                        <CoordRow entity={entity} position_type="position" coord="x" />
+                        <CoordRow entity={entity} position_type="position" coord="y" />
+                        <CoordRow entity={entity} position_type="position" coord="z" />
                         <tr>
-                            <td colSpan={2}>
-                                <table>
-                                    <tbody>
-                                        <CoordRow
-                                            entity={entity}
-                                            position_type="position"
-                                            coord="x"
-                                        />
-                                        <CoordRow
-                                            entity={entity}
-                                            position_type="position"
-                                            coord="y"
-                                        />
-                                        <CoordRow
-                                            entity={entity}
-                                            position_type="position"
-                                            coord="z"
-                                        />
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td colSpan={2}>Section position: </td>
-                        </tr>
-                        <tr>
-                            <td colSpan={2}>
-                                <table>
-                                    <tbody>
-                                        <CoordRow
-                                            entity={entity}
-                                            position_type="section_position"
-                                            coord="x"
-                                        />
-                                        <CoordRow
-                                            entity={entity}
-                                            position_type="section_position"
-                                            coord="y"
-                                        />
-                                        <CoordRow
-                                            entity={entity}
-                                            position_type="section_position"
-                                            coord="z"
-                                        />
-                                    </tbody>
-                                </table>
-                            </td>
+                            <th colSpan={2}>Section position:</th>
                         </tr>
+                        <CoordRow entity={entity} position_type="section_position" coord="x" />
+                        <CoordRow entity={entity} position_type="section_position" coord="y" />
+                        <CoordRow entity={entity} position_type="section_position" coord="z" />
                     </tbody>
                 </table>
             );
@@ -101,7 +48,7 @@ export class EntityInfoComponent extends Component {
         }
 
         return (
-            <div className="EntityInfoComponent-container" tabIndex={-1}>
+            <div className="qe-EntityInfoComponent-container" tabIndex={-1}>
                 {body}
             </div>
         );
@@ -118,7 +65,9 @@ class CoordRow extends PureComponent<CoordProps> {
     render(): ReactNode {
         return (
             <tr>
-                <td>{this.props.coord.toUpperCase()}: </td>
+                <th className="qe-EntityInfoComponent-coord-label">
+                    {this.props.coord.toUpperCase()}:
+                </th>
                 <td>
                     <CoordInput {...this.props} />
                 </td>
@@ -127,10 +76,10 @@ class CoordRow extends PureComponent<CoordProps> {
     }
 }
 
-class CoordInput extends Component<CoordProps, { value: number }> {
+class CoordInput extends Component<CoordProps, { value: number; initial_position: Vec3 }> {
     private disposer?: IReactionDisposer;
 
-    state = { value: 0 };
+    state = { value: 0, initial_position: new Vec3(0, 0, 0) };
 
     componentDidMount(): void {
         this.start_observing();
@@ -152,7 +101,9 @@ class CoordInput extends Component<CoordProps, { value: number }> {
                 value={this.state.value}
                 size="small"
                 precision={3}
-                className="EntityInfoComponent-coord"
+                className="qe-EntityInfoComponent-coord"
+                onFocus={this.focus}
+                onBlur={this.blur}
                 onChange={this.changed}
             />
         );
@@ -174,6 +125,20 @@ class CoordInput extends Component<CoordProps, { value: number }> {
         );
     }
 
+    private focus = () => {
+        this.setState({ initial_position: this.props.entity.position });
+    };
+
+    private blur = () => {
+        if (!this.state.initial_position.equals(this.props.entity.position)) {
+            quest_editor_store.push_entity_move_action(
+                this.props.entity,
+                this.state.initial_position,
+                this.props.entity.position
+            );
+        }
+    };
+
     private changed = (value?: number) => {
         if (value != null) {
             const entity = this.props.entity;