fix(map-ruler): disable layer clicks during measurement (#1236)

alesiahil · vkozio · web-flow · commit 690a0d49298f · 2025-08-08T19:36:13.000+03:00
* fix(map-ruler): disable layer clicks during measurement

* test(map-ruler): mock registerMapListener correctly

* Delete src/features/map_ruler/renderers/MapRulerRenderer.test.ts

---------

Co-authored-by: VK &lt;112831093+vkozio@users.noreply.github.com&gt;
diff --git a/docs/architecture/ADR-002-MapPopover-Event-System-Integration.md b/docs/architecture/ADR-002-MapPopover-Event-System-Integration.md
@@ -45,7 +45,7 @@ graph TD
         A["MapLibre Click Event"] --> B["ConnectedMap Event Handler"]
 
         B --> D["Priority Chain Execution"]
-        D --> E1["Map Ruler (P:1)"]
+        D --> E1["Map Ruler (P:100)"]
         D --> E2["Draw Tools (P:10)"]
         D --> E3["Boundary Selector (P:50)"]
         D --> E4["Legacy Renderers (P:60)"]
@@ -68,7 +68,7 @@ graph TD
 **Problem 1: Event System Conflicts**
 
 - MapPopover operates independently of priority system
-- Tools like Map Ruler (priority 1) and Draw Tools (priority 10) can block all other interactions via `return false`
+- Tools like Map Ruler (priority 100) and Draw Tools (priority 10) can block all other interactions via `return false`
 - MapPopover still triggers despite tool exclusivity, creating UX inconsistencies
 
 **Problem 2: Duplicate Event Handling**
@@ -103,7 +103,7 @@ useMapPopoverInteraction({
 
 | System            | Priority | Propagation Behavior         | Integration Point                                                                                      |
 | ----------------- | -------- | ---------------------------- | ------------------------------------------------------------------------------------------------------ |
-| Map Ruler         | 1        | `return false` (blocks all)  | [`MapRulerRenderer.ts:109`](../../src/features/map_ruler/renderers/MapRulerRenderer.ts#L109)           |
+| Map Ruler         | 100      | `return false` (blocks all)  | [`MapRulerRenderer.ts:110`](../../src/features/map_ruler/renderers/MapRulerRenderer.ts#L110-L112)      |
 | Draw Tools        | 10       | `return false` (blocks all)  | [`DrawModeRenderer.ts:181`](../../src/core/draw_tools/renderers/DrawModeRenderer.ts#L181)              |
 | Boundary Selector | 50       | `return false` (blocks all)  | [`clickCoordinatesAtom.ts:27`](../../src/features/boundary_selector/atoms/clickCoordinatesAtom.ts#L27) |
 | Legacy Renderers  | 60       | `return true` (non-blocking) | [`GenericRenderer.ts:248`](../../src/core/logical_layers/renderers/GenericRenderer.ts#L248)            |
@@ -272,7 +272,7 @@ For ConnectedMap integration, the service call uses existing priority system:
 
 | System            | Priority | Behavior                 | Integration Method                     |
 | ----------------- | -------- | ------------------------ | -------------------------------------- |
-| Map Ruler         | 1        | Blocks all (unchanged)   | Existing priority listener             |
+| Map Ruler         | 100      | Blocks all (unchanged)   | Existing priority listener             |
 | Draw Tools        | 10       | Blocks all (unchanged)   | Existing priority listener             |
 | Boundary Selector | 50       | Blocks all (unchanged)   | Existing priority listener             |
 | **MapPopover**    | **55**   | **Non-blocking**         | **Service call via priority listener** |
diff --git a/docs/investigations/R006-map-event-management.md b/docs/investigations/R006-map-event-management.md
@@ -43,7 +43,7 @@ graph TD
         D --> E6
 
         subgraph "Consumer Systems"
-            F1["Map Ruler<br/>(Priority: 1)"]
+            F1["Map Ruler<br/>(Priority: 100)"]
             F2["Draw Tools<br/>(Priority: 10)"]
             F2_5["Boundary Selector<br/>(Priority: 10)"]
             F3["Generic/Feature Renderers<br/>(Priority: 60)"]
@@ -139,7 +139,7 @@ Each listener function returns a boolean value that controls event propagation:
 **Example Implementation (Blocking)**:
 
 ```typescript
-// From MapRulerRenderer (Priority: 1)
+// From MapRulerRenderer (Priority: 100)
 function preventClicking(e) {
   e.preventDefault();
   return false; // STOPS all other listeners
@@ -218,7 +218,7 @@ sequenceDiagram
     participant M as MapLibre Map
     participant C as ConnectedMap
     participant R as mapListenersAtom
-    participant L1 as Map Ruler<br/>(P: 1)
+    participant L1 as Map Ruler<br/>(P: 100)
     participant L2 as Draw Tools<br/>(P: 10)
     participant L3 as Boundary Selector<br/>(P: 10)
     participant L4 as Generic Renderer<br/>(P: 60)
@@ -268,7 +268,7 @@ Based on a full codebase analysis, these are the current priority assignments:
 
 | System                    | Priority | Events                             | Location                                                                                                                                                                           | Stops Propagation? |
 | :------------------------ | :------- | :--------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------- |
-| **Map Ruler**             | 1        | `click`, `mousemove`               | [`MapRulerRenderer.ts:109`](../../src/features/map_ruler/renderers/MapRulerRenderer.ts#L109)                                                                                       | ✅                 |
+| **Map Ruler**             | 100      | `click`, `mousemove`               | [`MapRulerRenderer.ts:110`](../../src/features/map_ruler/renderers/MapRulerRenderer.ts#L110-L112)                                                                                  | ✅                 |
 | **Draw Tools**            | 10       | `click`, `mousemove`               | [`DrawModeRenderer.ts:181`](../../src/core/draw_tools/renderers/DrawModeRenderer.ts#L181)                                                                                          | ✅                 |
 | **Boundary Selector**     | 10       | `click`, `mousemove`               | [`clickCoordinatesAtom.ts:27`](../../src/features/boundary_selector/atoms/clickCoordinatesAtom.ts#L27)                                                                             | ✅                 |
 | **Map Popover**           | 55       | `click`                            | [`useMapPopoverPriorityIntegration.ts`](../../src/core/map/hooks/useMapPopoverPriorityIntegration.ts)<br/>[`ConnectedMap.tsx`](../../src/components/ConnectedMap/ConnectedMap.tsx) | ❌                 |
@@ -287,7 +287,7 @@ This section provides a detailed breakdown of what each registered listener does
 
 These systems are designed to take exclusive control of the map and prevent any other interactions.
 
-1.  **Map Ruler** (Priority: 1)
+1.  **Map Ruler** (Priority: 100)
 
     - **Location**: `MapRulerRenderer.ts:109`
     - **`click` handler**: Calls `event.preventDefault()` and returns `false`.
diff --git a/docs/investigations/map-event-management-system.md b/docs/investigations/map-event-management-system.md
@@ -40,7 +40,7 @@ graph TD
         D --> E3
 
         subgraph "Consumer Systems"
-            F1["Map Ruler<br/>(Priority: 1)"]
+            F1["Map Ruler<br/>(Priority: 100)"]
             F2["Draw Tools<br/>(Priority: 10)"]
             F2_5["Boundary Selector<br/>(Priority: 50)"]
             F3["Generic/Feature Renderers<br/>(Priority: 60)"]
@@ -128,7 +128,7 @@ Each listener function returns a boolean value that controls event propagation:
 **Example Implementation (Blocking)**:
 
 ```typescript
-// From MapRulerRenderer (Priority: 1)
+// From MapRulerRenderer (Priority: 100)
 function preventClicking(e) {
   e.preventDefault();
   return false; // STOPS all other listeners
@@ -168,7 +168,7 @@ sequenceDiagram
     participant M as MapLibre Map
     participant C as ConnectedMap
     participant R as mapListenersAtom
-    participant L1 as Map Ruler<br/>(P: 1)
+    participant L1 as Map Ruler<br/>(P: 100)
     participant L2 as Draw Tools<br/>(P: 10)
     participant L3 as Boundary Selector<br/>(P: 50)
     participant L4 as Generic Renderer<br/>(P: 60)
@@ -211,7 +211,7 @@ Based on a full codebase analysis, these are the current priority assignments:
 
 | System                    | Priority | Events               | Location                                                                                                                                    | Stops Propagation? |
 | :------------------------ | :------- | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ | :----------------- |
-| **Map Ruler**             | 1        | `click`, `mousemove` | [`MapRulerRenderer.ts:109`](../../src/features/map_ruler/renderers/MapRulerRenderer.ts#L109)                                                | ✅                 |
+| **Map Ruler**             | 100      | `click`, `mousemove` | [`MapRulerRenderer.ts:110`](../../src/features/map_ruler/renderers/MapRulerRenderer.ts#L110-L112)                                           | ✅                 |
 | **Draw Tools**            | 10       | `click`, `mousemove` | [`DrawModeRenderer.ts:181`](../../src/core/draw_tools/renderers/DrawModeRenderer.ts#L181)                                                   | ✅                 |
 | **Boundary Selector**     | 10       | `click`, `mousemove` | [`clickCoordinatesAtom.ts:27`](../../src/features/boundary_selector/atoms/clickCoordinatesAtom.ts#L27)                                      | ✅                 |
 | **Active Contributors**   | 60       | `click`              | [`GenericRenderer.ts:231`](../../src/core/logical_layers/renderers/GenericRenderer.ts#L231)                                                 | ❌                 |
@@ -229,7 +229,7 @@ This section provides a detailed breakdown of what each registered listener does
 
 These systems are designed to take exclusive control of the map and prevent any other interactions.
 
-1.  **Map Ruler** (Priority: 1)
+1.  **Map Ruler** (Priority: 100)
 
     - **Location**: `MapRulerRenderer.ts:109`
     - **`click` handler**: Calls `event.preventDefault()` and returns `false`.
diff --git a/src/features/map_ruler/renderers/MapRulerRenderer.ts b/src/features/map_ruler/renderers/MapRulerRenderer.ts
@@ -107,7 +107,12 @@ export class MapRulerRenderer extends LogicalLayerDefaultRenderer {
     function preventMousemove(e) {
       return false;
     }
-    this._removeClickListener = registerMapListener('click', preventClicking, 1);
-    this._removeMousemoveListener = registerMapListener('mousemove', preventMousemove, 1);
+    // Use the highest priority to block map interactions from other layers
+    this._removeClickListener = registerMapListener('click', preventClicking, 100);
+    this._removeMousemoveListener = registerMapListener(
+      'mousemove',
+      preventMousemove,
+      100,
+    );
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,12 @@ export class MapRulerRenderer extends LogicalLayerDefaultRenderer {`
`107`	`107`	`function preventMousemove(e) {`
`108`	`108`	`return false;`
`109`	`109`	`}`
`110`		`- this._removeClickListener = registerMapListener('click', preventClicking, 1);`
`111`		`- this._removeMousemoveListener = registerMapListener('mousemove', preventMousemove, 1);`
	`110`	`+ // Use the highest priority to block map interactions from other layers`
	`111`	`+ this._removeClickListener = registerMapListener('click', preventClicking, 100);`
	`112`	`+ this._removeMousemoveListener = registerMapListener(`
	`113`	`+ 'mousemove',`
	`114`	`+ preventMousemove,`
	`115`	`+ 100,`
	`116`	`+ );`
`112`	`117`	`}`
`113`	`118`	`}`