Removed leaflet

Signed-off-by: Aaron Chong <[email protected]>

packages/dashboard/package.json

@@ -51,11 +51,9 @@
     "@react-three/drei": "^9.84.0",
     "@react-three/fiber": "^8.14.2",
     "@types/debug": "^4.1.5",
-    "@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/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/three": "^0.156.0",
@@ -65,15 +63,13 @@
     "debug": "^4.2.0",
     "eventemitter3": "^4.0.7",
     "keycloak-js": "^11.0.2",
-    "leaflet": "^1.7.1",
     "node-vibrant": "^3.1.6",
     "react": "^18.2.0",
     "react-components": "workspace:*",
     "react-customizable-progressbar": "^1.0.3",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-grid-layout": "^1.3.4",
-    "react-leaflet": "^2.7.0",
     "react-router": "^6.14.1",
     "react-router-dom": "^6.14.1",
     "rmf-auth": "workspace:*",

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');
 

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();

packages/react-components/lib/map/three-fiber/circle-shape.spec.tsx → packages/react-components/lib/map/circle-shape.spec.tsx

@@ -2,9 +2,20 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { CircleShape } from './circle-shape';
 import { Euler, Vector3 } from 'three';
-import { makeRobotData } from '../test-utils.spec';
+import { RobotData } from './robot-three-maker';
 import { Canvas } from '@react-three/fiber';
 
+export function makeRobotData(robot: Partial<RobotData> = {}): RobotData {
+  return {
+    fleet: 'test_fleet',
+    name: 'test_robot',
+    model: 'test_model',
+    footprint: 1,
+    color: '#00a000',
+    ...robot,
+  };
+}
+
 describe('CircleShape', () => {
   it('should render a circle and a line correctly', () => {
     const position = new Vector3(1, 1, 0);