Merge branch 'koonpeng/hammer-jazzy-base' of github.com:open-rmf/rmf-…

…web into koonpeng/hammer-jazzy-base

packages/dashboard/package.json

@@ -54,11 +54,9 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/debug": "^4.1.5",
     "@types/jest": "^29.5.12",
-    "@types/leaflet": "^1.5.17",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-grid-layout": "^1.3.2",
-    "@types/react-leaflet": "^2.5.2",
     "@types/three": "^0.166.0",
     "ajv": "^8.10.0",
     "api-client": "workspace:*",
@@ -94,7 +92,6 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "keycloak-js": "^11.0.2",
-    "leaflet": "^1.7.1",
     "mini-css-extract-plugin": "^2.4.5",
     "node-vibrant": "^3.1.6",
     "postcss": "^8.4.4",
@@ -109,7 +106,6 @@
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
     "react-grid-layout": "^1.3.4",
-    "react-leaflet": "^2.7.0",
     "react-refresh": "^0.11.0",
     "react-router": "^6.14.1",
     "react-router-dom": "^6.14.1",

packages/dashboard/src/components/app-base.tsx

@@ -5,13 +5,12 @@ import {
   CircularProgress,
   createTheme,
   CssBaseline,
-  GlobalStyles,
   Grid,
   Snackbar,
 } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import React from 'react';
-import { rmfDark, rmfDarkLeaflet, rmfLight } from 'react-components';
+import { rmfDark, rmfLight } from 'react-components';
 import { loadSettings, saveSettings, Settings, ThemeMode } from '../settings';
 import { AppController, AppControllerContext, SettingsContext } from './app-contexts';
 import AppBar from './appbar';
@@ -84,7 +83,6 @@ export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      {settings.themeMode === ThemeMode.RmfDark && <GlobalStyles styles={rmfDarkLeaflet} />}
       {openLoadingBackdrop && (
         <Backdrop
           sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}

packages/dashboard/src/components/app.css

@@ -6,24 +6,3 @@ body,
   margin: 0;
   padding: 0;
 }
-
-.leaflet-touch .leaflet-bar a {
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
-}
-
-.leaflet-touch .leaflet-control-zoom-in,
-.leaflet-touch .leaflet-control-zoom-out {
-  font-size: 44px;
-}
-
-.leaflet-touch .leaflet-control-layers-toggle {
-  width: 60px;
-  height: 60px;
-}
-
-.leaflet-control-layers label {
-  display: block;
-  font-size: 2.16em;
-}

packages/dashboard/src/components/map-app.tsx

@@ -28,7 +28,7 @@ import { createMicroApp } from './micro-app';
 import { RmfAppContext } from './rmf-app';
 import { RobotSummary } from './robots/robot-summary';
 import { CameraControl, Door, LayersController, Lifts, RobotThree } from './three-fiber';
-import { TrajectoryData } from './trajectories-overlay';
+import { TrajectoryData } from '../managers/robot-trajectory-manager';
 
 const debug = Debug('MapApp');
 
@@ -201,8 +201,8 @@ export const MapApp = styled(
     const defaultZoom = isScreenHeightLessThan800
       ? resourceManager?.defaultZoom || DEFAULT_ZOOM_LEVEL
       : resourceManager?.defaultZoom
-      ? resourceManager.defaultZoom * 2
-      : DEFAULT_ZOOM_LEVEL;
+        ? resourceManager.defaultZoom * 2
+        : DEFAULT_ZOOM_LEVEL;
     const [zoom, setZoom] = React.useState<number>(defaultZoom);
     const [sceneBoundingBox, setSceneBoundingBox] = React.useState<Box3 | undefined>(undefined);
     const [distance, setDistance] = React.useState<number>(0);

packages/dashboard/src/index.tsx

@@ -1,4 +1,3 @@
-import 'leaflet/dist/leaflet.css';
 import ReactDOM from 'react-dom/client';
 import { LocalizationProvider } from 'react-components';
 import { BrowserRouter } from 'react-router-dom';

packages/dashboard/src/managers/robot-trajectory-manager.ts

@@ -52,6 +52,17 @@ export interface TrajectoryResponse {
   error?: string;
 }
 
+export interface TrajectoryData extends React.PropsWithRef<{}> {
+  trajectory: Trajectory;
+  color: string;
+  conflict?: boolean;
+  loopAnimation?: boolean;
+  /**
+   * default: 1
+   */
+  animationScale?: number;
+}
+
 export type Conflict = number[];
 
 export interface RobotTrajectoryManager {

packages/dashboard/src/util/css-utils.ts

@@ -1,12 +1,3 @@
-import * as L from 'leaflet';
-
-export function viewBoxFromLeafletBounds(bounds: L.LatLngBoundsExpression): string {
-  const lbounds = bounds instanceof L.LatLngBounds ? bounds : new L.LatLngBounds(bounds);
-  const width = lbounds.getEast() - lbounds.getWest();
-  const height = lbounds.getNorth() - lbounds.getSouth();
-  return `${lbounds.getWest()} ${-lbounds.getNorth()} ${width} ${height}`;
-}
-
 let id = 0;
 export function uniqueId(): string {
   return (id++).toString();