Done map navigation with keyboard

bioretics · Nov 20, 2024 · 473d70c · 473d70c
1 parent a08a550
commit 473d70c
Show file tree

Hide file tree

Showing 9 changed files with 373 additions and 315 deletions.
diff --git a/lib/ReactViews/Map/MapNavigation/registerMapNavigations.tsx b/lib/ReactViews/Map/MapNavigation/registerMapNavigations.tsx
@@ -253,12 +253,12 @@ export const registerMapNavigations = (viewState: ViewState) => {
     toolName: KEYBOARD_MODE_ID,
     viewState: viewState,
     getToolComponent: () => KeyboardMode as any,
-    icon: GLYPHS.tour
+    icon: GLYPHS.keyboard
   });
   mapNavigationModel.addItem({
     id: KEYBOARD_MODE_ID,
-    name: "translate#pedestrianMode.toolButtonTitle",
-    title: "translate#pedestrianMode.toolButtonTitle",
+    name: "translate#keyboardControls.toolButtonTitle",
+    title: "translate#keyboardControls.toolButtonTitle",
     location: "TOP",
     screenSize: "medium",
     controller: keyboardModeToolController,

diff --git a/lib/ReactViews/Tools/KeyboardMode/KeyboardMode.tsx b/lib/ReactViews/Tools/KeyboardMode/KeyboardMode.tsx
@@ -1,19 +1,18 @@
-import { reaction } from "mobx";
 import { observer } from "mobx-react";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import Cesium from "../../../Models/Cesium";
 import ViewState from "../../../ReactViewModels/ViewState";
 import PositionRightOfWorkbench from "../../Workbench/PositionRightOfWorkbench";
 import MovementControls from "./MovementControls";
 
 
-type PedestrianModeProps = {
+type KeyboardModeProps = {
   viewState: ViewState;
 };
 export const KEYBOARD_MODE_ID = "keyboard-mode";
 
-const KeyboardMode: React.FC<PedestrianModeProps> = observer((props) => {
+const KeyboardMode: React.FC<KeyboardModeProps> = observer((props) => {
   const { viewState } = props;
 
   const cesium = viewState.terria.currentViewer;

diff --git a/lib/ReactViews/Tools/KeyboardMode/MovementControls.tsx b/lib/ReactViews/Tools/KeyboardMode/MovementControls.tsx
@@ -4,15 +4,11 @@ import styled from "styled-components";
 import Cesium from "../../../Models/Cesium";
 import Box from "../../../Styled/Box";
 import Button from "../../../Styled/Button";
-import Spacing from "../../../Styled/Spacing";
 import Text from "../../../Styled/Text";
 import Icon, { StyledIcon } from "../../../Styled/Icon";
 import MovementsController from "./MovementsController";
 
-
-const mouseControlsImage = require("../../../../wwwroot/images/mouse-control.svg");
-const wasdControlsImage = require("../../../../wwwroot/images/wasd.svg");
-const heightControlsImage = require("../../../../wwwroot/images/height-controls.svg");
+const wasdControlsImage = require("../../../../wwwroot/images/keyboard_controls.svg");
 
 type MovementControlsProps = {
   cesium: Cesium;
@@ -36,18 +32,15 @@ const MovementControls: React.FC<MovementControlsProps> = (props) => {
   return (
     <Container>
       <Title>
-        <Text medium>{t("pedestrianMode.controls.title")}</Text>
+        <Text medium>{t("keyboardControls.header")}</Text>
         <MinimizeMaximizeButton
           onClick={toggleMaximized}
           maximized={isMaximized}
         />
       </Title>
       {isMaximized && (
         <Body>
-          <img alt="Mouse controls" src={mouseControlsImage} />
           <img alt="Direction controls" src={wasdControlsImage} />
-          <Spacing bottom={1} />
-          <img alt="Height controls" src={heightControlsImage} />
         </Body>
       )}
     </Container>