From 5d9641b42842e2c259b4b8364d024f5d0598906b Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Sat, 15 Feb 2020 17:40:11 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E5=9D=90=E6=A0=87=E6=98=BE=E7=A4=BA=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  1 +
 .../src/editor/status/EditorStatusBar.jsx     | 40 +++++++++++++++----
 .../src/editor/status/css/EditorStatusBar.css |  6 +++
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 30c324b3..34581f1e 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ Supported Languages: 中文 / [繁體中文](README-tw.md) / [English](README-en
 5. 组件菜单添加`天空球`组件。
 6. 修复`未保存材质的模型`和`多材质模型`发布场景报错的bug。
 7. 性能监视器、网格、视角帮助器、物理引擎、扔小球设置由`状态栏`移动到`视图`菜单中。
+8. 状态栏新增鼠标坐标显示。
 
 ## v0.4.2更新【[更新日志](docs-dev/update/UpdateLog.md)】
 
diff --git a/ShadowEditor.Web/src/editor/status/EditorStatusBar.jsx b/ShadowEditor.Web/src/editor/status/EditorStatusBar.jsx
index 316d5903..6040994f 100644
--- a/ShadowEditor.Web/src/editor/status/EditorStatusBar.jsx
+++ b/ShadowEditor.Web/src/editor/status/EditorStatusBar.jsx
@@ -20,17 +20,21 @@ class EditorStatusBar extends React.Component {
         };
 
         this.state = {
+            x: '',
+            y: '',
             objects: 0,
             vertices: 0,
             triangles: 0
         };
 
+        this.handleUpdateMousePosition = this.handleUpdateMousePosition.bind(this);
+        this.handleUpdateSceneInfo = this.handleUpdateSceneInfo.bind(this);
         this.handleChangeSelectMode = this.handleChangeSelectMode.bind(this);
         this.handleChangeControlMode = this.handleChangeControlMode.bind(this);
     }
 
     render() {
-        const { objects, vertices, triangles } = this.state;
+        const { x, y, objects, vertices, triangles } = this.state;
 
         const selectMode = app.storage.get('selectMode');
         const controlMode = app.storage.get('controlMode');
@@ -38,12 +42,17 @@ class EditorStatusBar extends React.Component {
         const isLogin = !app.server.enableAuthority || app.server.isLogin;
 
         return <Toolbar className={'EditorStatusBar'}>
+            <Label>{_t('X')}</Label>
+            <Label className={'mouse-position'}>{x}</Label>
+            <Label>{_t('Y')}</Label>
+            <Label className={'mouse-position'}>{y}</Label>
+            <ToolbarSeparator />
             <Label>{_t('Object')}</Label>
-            <Label>{objects}</Label>
+            <Label className={'value'}>{objects}</Label>
             <Label>{_t('Vertex')}</Label>
-            <Label>{vertices}</Label>
+            <Label className={'value'}>{vertices}</Label>
             <Label>{_t('Triangle')}</Label>
-            <Label>{triangles}</Label>
+            <Label className={'value'}>{triangles}</Label>
             <ToolbarSeparator />
             {isLogin && <>
                 <Label>{_t('Selected Mode')}</Label>
@@ -67,12 +76,27 @@ class EditorStatusBar extends React.Component {
     }
 
     componentDidMount() {
-        app.on('objectAdded.' + this.id, this.onUpdateInfo.bind(this));
-        app.on('objectRemoved.' + this.id, this.onUpdateInfo.bind(this));
-        app.on('geometryChanged.' + this.id, this.onUpdateInfo.bind(this));
+        app.on(`mousemove.EditorStatusBar`, this.handleUpdateMousePosition);
+        app.on(`objectAdded.EditorStatusBar`, this.handleUpdateSceneInfo);
+        app.on(`objectRemoved.EditorStatusBar`, this.handleUpdateSceneInfo);
+        app.on(`geometryChanged.EditorStatusBar`, this.handleUpdateSceneInfo);
     }
 
-    onUpdateInfo() {
+    handleUpdateMousePosition(event) {
+        if (event.target !== app.editor.renderer.domElement) {
+            this.setState({
+                x: '',
+                y: ''
+            });
+            return;
+        }
+        this.setState({
+            x: event.offsetX,
+            y: event.offsetY
+        });
+    }
+
+    handleUpdateSceneInfo() {
         var editor = app.editor;
 
         var scene = editor.scene;
diff --git a/ShadowEditor.Web/src/editor/status/css/EditorStatusBar.css b/ShadowEditor.Web/src/editor/status/css/EditorStatusBar.css
index 195a9653..8b96b231 100644
--- a/ShadowEditor.Web/src/editor/status/css/EditorStatusBar.css
+++ b/ShadowEditor.Web/src/editor/status/css/EditorStatusBar.css
@@ -2,6 +2,12 @@
     margin: 0 8px;
 }
 
+.EditorStatusBar>.Label.mouse-position {
+    width: 24px;
+    text-align: center;
+    overflow: visible;
+}
+
 .EditorStatusBar>.ToolbarSeparator {
     margin: 0 8px;
 }