feat(ui): Improve coverage view

Hypfer · Aug 6, 2022 · 4ac2928 · 4ac2928
1 parent dac68c4
commit 4ac2928
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/frontend/src/map/Map.tsx b/frontend/src/map/Map.tsx
@@ -235,7 +235,7 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
                     mapWidth: this.props.rawMap.size.x,
                     mapHeight: this.props.rawMap.size.y,
                     pixelSize: this.props.rawMap.pixelSize,
-                    theme: this.props.theme,
+                    paletteMode: this.props.theme.palette.mode,
                 });
 
                 this.drawableComponents.push(pathsImage);

diff --git a/frontend/src/map/PathDrawer.ts b/frontend/src/map/PathDrawer.ts
@@ -1,12 +1,12 @@
 import {RawMapEntity, RawMapEntityType} from "../api";
-import {Theme} from "@mui/material";
+import {PaletteMode} from "@mui/material";
 
 type PathDrawerOptions = {
     paths: Array<RawMapEntity>,
     mapWidth: number,
     mapHeight: number,
     pixelSize: number,
-    theme: Theme,
+    paletteMode: PaletteMode,
     width?: number
 };
 
@@ -33,7 +33,7 @@ export class PathDrawer {
         const {
             mapWidth,
             mapHeight,
-            theme,
+            paletteMode,
             paths,
             pixelSize,
             width
@@ -42,7 +42,7 @@ export class PathDrawer {
         let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${mapWidth}" height="${mapHeight}" viewBox="0 0 ${mapWidth} ${mapHeight}">`;
         let pathColor : string;
 
-        switch (theme.palette.mode) {
+        switch (paletteMode) {
             case "light":
                 pathColor = "#ffffff";
                 break;

diff --git a/frontend/src/map/RobotCoverageMap.tsx b/frontend/src/map/RobotCoverageMap.tsx
@@ -42,15 +42,27 @@ class RobotCoverageMap extends Map<CleanupCoverageMapProps, CleanupCoverageMapSt
                 await this.mapLayerRenderer.draw(this.props.rawMap, this.props.theme);
                 this.drawableComponents.push(this.mapLayerRenderer.getCanvas());
 
+                const coveragePathImage = await PathDrawer.drawPaths( {
+                    paths: this.props.rawMap.entities.filter(e => {
+                        return e.type === RawMapEntityType.Path;
+                    }),
+                    mapWidth: this.props.rawMap.size.x,
+                    mapHeight: this.props.rawMap.size.y,
+                    pixelSize: this.props.rawMap.pixelSize,
+                    paletteMode: this.props.theme.palette.mode === "dark" ? "light" : "dark",
+                    width: 5
+                });
+
+                this.drawableComponents.push(coveragePathImage);
+
                 const pathsImage = await PathDrawer.drawPaths( {
                     paths: this.props.rawMap.entities.filter(e => {
                         return e.type === RawMapEntityType.Path || e.type === RawMapEntityType.PredictedPath;
                     }),
                     mapWidth: this.props.rawMap.size.x,
                     mapHeight: this.props.rawMap.size.y,
                     pixelSize: this.props.rawMap.pixelSize,
-                    theme: this.props.theme,
-                    width: 5
+                    paletteMode: this.props.theme.palette.mode,
                 });
 
                 this.drawableComponents.push(pathsImage);