From ca077b66c345599293b721afadf40444945838b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Beye?= <github@hypfer.de>
Date: Tue, 6 Aug 2024 17:50:09 +0200
Subject: [PATCH] feat(ui): Draw half-transparent path in virtual restrictions
 edit map to make placing restrictions correctly easier

---
 frontend/src/map/EditMap.tsx   | 16 ++++++++++++++++
 frontend/src/map/PathDrawer.ts | 13 +++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/map/EditMap.tsx b/frontend/src/map/EditMap.tsx
index a2c7dc9b1dd..e425165cbfd 100644
--- 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
index 2947a1607be..57784e2c172 100644
--- 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\"";