fix(ui): Draw stroke before fill for map structures that have text to…

… fix rendering on firefox mobile
Hypfer · Jun 10, 2024 · 7d9255b · 7d9255b
1 parent 09e2083
commit 7d9255b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/frontend/src/map/structures/client_structures/ZoneClientStructure.ts b/frontend/src/map/structures/client_structures/ZoneClientStructure.ts
@@ -75,10 +75,15 @@ class ZoneClientStructure extends ClientStructure {
         ctxWrapper.save();
         ctx.textAlign = "start";
         ctx.fillStyle = "rgba(255, 255, 255, 1)";
+        ctx.strokeStyle = "rgba(18, 18, 18, 1)";
         ctx.font = Math.round(6 * scaleFactor).toString(10) + "px sans-serif";
-        ctx.fillText(label, p0.x, p0.y - 8);
+
+        ctx.lineWidth = 3;
         ctx.strokeText(label, p0.x, p0.y - 8);
 
+        ctx.lineWidth = 1;
+        ctx.fillText(label, p0.x, p0.y - 8);
+
         ctxWrapper.restore();
 
         if (this.active) {

diff --git a/frontend/src/map/structures/map_structures/ObstacleMapStructure.ts b/frontend/src/map/structures/map_structures/ObstacleMapStructure.ts
@@ -39,10 +39,14 @@ class ObstacleMapStructure extends MapStructure {
             ctx.textAlign = "center";
             ctx.font = "32px sans-serif";
             ctx.fillStyle = "rgba(255, 255, 255, 1)";
+            ctx.strokeStyle = "rgba(18, 18, 18, 1)";
 
-            ctx.fillText(this.label, p0.x , p0.y + (scaledSize.height/2) + 32);
+            ctx.lineWidth = 2.5;
             ctx.strokeText(this.label, p0.x , p0.y + (scaledSize.height/2) + 32);
 
+            ctx.lineWidth = 1;
+            ctx.fillText(this.label, p0.x , p0.y + (scaledSize.height/2) + 32);
+
             ctxWrapper.restore();
         }
     }

diff --git a/frontend/src/map/structures/map_structures/SegmentLabelMapStructure.ts b/frontend/src/map/structures/map_structures/SegmentLabelMapStructure.ts
@@ -88,10 +88,14 @@ class SegmentLabelMapStructure extends MapStructure {
             ctx.textAlign = "center";
             ctx.font = `${fontSize}px sans-serif`;
             ctx.fillStyle = "rgba(255, 255, 255, 1)";
+            ctx.strokeStyle = "rgba(18, 18, 18, 1)";
 
-            ctx.fillText(this.topLabel, p0.x , p0.y - yOffset);
+            ctx.lineWidth = 2.5;
             ctx.strokeText(this.topLabel, p0.x , p0.y - yOffset);
 
+            ctx.lineWidth = 1;
+            ctx.fillText(this.topLabel, p0.x , p0.y - yOffset);
+
             ctxWrapper.restore();
         }
 
@@ -100,22 +104,28 @@ class SegmentLabelMapStructure extends MapStructure {
             ctx.textAlign = "center";
             ctx.font = "45px sans-serif";
             ctx.fillStyle = "rgba(255, 255, 255, 1)";
+            ctx.strokeStyle = "rgba(18, 18, 18, 1)";
 
             if (this.name) {
-                ctx.fillText(this.name, p0.x , p0.y + ((this.scaledIconSize.height/3)*2) + 20 + (this.active ? 25 : 0));
+                ctx.lineWidth = 2.5;
                 ctx.strokeText(this.name, p0.x , p0.y + ((this.scaledIconSize.height/3)*2) + 20 + (this.active ? 25 : 0));
+
+                ctx.lineWidth = 1;
+                ctx.fillText(this.name, p0.x , p0.y + ((this.scaledIconSize.height/3)*2) + 20 + (this.active ? 25 : 0));
             }
 
             if (scaleFactor >= 11) {
                 let metaString = (this.area / 10000).toPrecision(2) + " m²";
                 metaString += ` (id=${this.id})`;
 
                 ctx.font = "35px sans-serif";
-                ctx.fillStyle = "rgba(255, 255, 255, 1)";
-                ctx.fillText(metaString, p0.x , p0.y + ((this.scaledIconSize.height/3)*2) + 20 + (this.active ? 25 : 0) + (this.name ? 45 : 0));
+
+                ctx.lineWidth = 2.5;
                 ctx.strokeText(metaString, p0.x , p0.y + ((this.scaledIconSize.height/3)*2) + 20 + (this.active ? 25 : 0) + (this.name ? 45 : 0));
-            }
 
+                ctx.lineWidth = 1;
+                ctx.fillText(metaString, p0.x , p0.y + ((this.scaledIconSize.height/3)*2) + 20 + (this.active ? 25 : 0) + (this.name ? 45 : 0));
+            }
 
 
             ctxWrapper.restore();