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