feat(ui): Draw half-transparent path in virtual restrictions edit map…

… to make placing restrictions correctly easier
Hypfer · Aug 6, 2024 · ca077b6 · ca077b6
1 parent f054230
commit ca077b6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/frontend/src/map/EditMap.tsx b/frontend/src/map/EditMap.tsx
@@ -16,6 +16,7 @@ import HelpDialog from "../components/HelpDialog";
 import HelpAction from "./actions/edit_map_actions/HelpAction";
 import {ProviderContext} from "notistack";
 import React from "react";
+import {PathDrawer} from "./PathDrawer";
 
 export type mode = "segments" | "virtual_restrictions";
 
@@ -79,6 +80,21 @@ class EditMap extends Map<EditMapProps, EditMapState> {
 
         this.updateStructures(this.props.mode);
 
+        if (this.props.mode === "virtual_restrictions") {
+            const pathsImage = 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,
+                opacity: 0.5
+            });
+
+            this.drawableComponents.push(pathsImage);
+        }
+
         this.updateState();
 
         this.drawableComponentsMutex.leave();

diff --git a/frontend/src/map/PathDrawer.ts b/frontend/src/map/PathDrawer.ts
@@ -7,7 +7,8 @@ type PathDrawerOptions = {
     mapHeight: number,
     pixelSize: number,
     paletteMode: PaletteMode,
-    width?: number
+    width?: number,
+    opacity?: number,
 };
 
 export class PathDrawer {
@@ -36,7 +37,8 @@ export class PathDrawer {
             paletteMode,
             paths,
             pixelSize,
-            width
+            width,
+            opacity
         } = options;
 
         let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${mapWidth}" height="${mapHeight}" viewBox="0 0 ${mapWidth} ${mapHeight}">`;
@@ -57,7 +59,8 @@ export class PathDrawer {
                 path.type,
                 pixelSize,
                 pathColor,
-                width
+                width,
+                opacity
             );
         });
 
@@ -72,8 +75,10 @@ export class PathDrawer {
         pixelSize: number,
         color: string,
         width?: number,
+        opacity?: number,
     ) {
         const pathWidth = width ?? 0.5;
+        const pathOpacity = opacity ?? 1;
         let svgPath = "<path d=\"";
 
         for (let i = 0; i < points.length; i = i + 2) {
@@ -86,7 +91,7 @@ export class PathDrawer {
             svgPath += `${type} ${points[i] / pixelSize} ${points[i + 1] / pixelSize} `;
         }
 
-        svgPath += `" fill="none" stroke="${color}" stroke-width="${pathWidth}" stroke-linecap="round" stroke-linejoin="round"`;
+        svgPath += `" fill="none" stroke="${color}" stroke-width="${pathWidth}" stroke-opacity="${pathOpacity}" stroke-linecap="round" stroke-linejoin="round"`;
 
         if (type === RawMapEntityType.PredictedPath) {
             svgPath += " stroke-dasharray=\"1,1\"";