From a351705cf16bb62a127e155e6784b1853627fb6b Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Fri, 23 Feb 2024 15:31:56 +0100
Subject: [PATCH] First draft

---
 src/iotMapManager/css/markers.css           | 4 ++++
 src/iotMapManager/css/shadows.css           | 6 ++++++
 src/iotMapManager/src/iot-map-common-svg.ts | 8 ++++----
 src/iotMapManager/src/iot-map-icons.ts      | 2 +-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/iotMapManager/css/markers.css b/src/iotMapManager/css/markers.css
index 8b1f27d7..bedc453d 100644
--- a/src/iotMapManager/css/markers.css
+++ b/src/iotMapManager/css/markers.css
@@ -15,11 +15,15 @@
 /* markers.css */
 
 .iotmap-markericon{
+  --marker-border-color: white;
   position: relative;
   width: 0px;
   height: 0px;
   box-sizing: border-box;
 }
+.iotmap-markericon:hover {
+  --marker-border-color: black;
+}
 .iotmap-markericon .iotmap-svgMarker {
   position: absolute;
   top:0px;
diff --git a/src/iotMapManager/css/shadows.css b/src/iotMapManager/css/shadows.css
index 54a2fe61..43166019 100644
--- a/src/iotMapManager/css/shadows.css
+++ b/src/iotMapManager/css/shadows.css
@@ -21,6 +21,7 @@
   width:70px;
   height: 26px;
   z-index: 5;
+  pointer-events: none;
 }
 
 .iotmap-markericon .iotmap-selected-square-shadow {
@@ -30,6 +31,7 @@
   width:70px;
   height: 24px;
   z-index: 5;
+  pointer-events: none;
 }
 
 .iotmap-markericon .iotmap-circle-shadow {
@@ -39,6 +41,7 @@
   width: 66px;
   height: 66px;
   z-index: 5;
+  pointer-events: none;
 }
 
 .iotmap-markericon .iotmap-circle-pin-shadow {
@@ -48,6 +51,7 @@
   width:70px;
   height: 24px;
   z-index: 5;
+  pointer-events: none;
 }
 
 .iotmap-markericon .iotmap-square-shadow {
@@ -57,6 +61,7 @@
   width:70px;
   height: 70px;
   z-index: 5;
+  pointer-events: none;
 }
 
 .iotmap-markericon .iotmap-square-pin-shadow {
@@ -66,4 +71,5 @@
   width:70px;
   height: 26px;
   z-index: 5;
+  pointer-events: none;
 }
diff --git a/src/iotMapManager/src/iot-map-common-svg.ts b/src/iotMapManager/src/iot-map-common-svg.ts
index 0971c0ac..91f89f69 100644
--- a/src/iotMapManager/src/iot-map-common-svg.ts
+++ b/src/iotMapManager/src/iot-map-common-svg.ts
@@ -38,8 +38,8 @@ export const circle = {
   selFunColour: `fill='white' r='19' cx='50' cy='50'/><path d='M83,49.951A33,33,0,1,0,41.175,81.711a6.832,6.832,0,0,1,3.281,2.052L50,90l5.544-6.237a6.832,6.832,0,0,1,3.281-2.052A32.973,32.973,0,0,0,83,49.951Z'`,
 
   // borders
-  pinBorder: ` <path fill='white' d="M49.975,28.6A21.267,21.267,0,0,1,56.827,70.03l-6.852,9.1-6.852-9.1A21.267,21.267,0,0,1,49.975,28.6m0-1.6A22.985,22.985,0,0,0,28.806,40.968a22.816,22.816,0,0,0,2.6,22.368,23.022,23.022,0,0,0,10.73,8.039l6.56,8.708,1.282,1.7,1.282-1.7,6.56-8.708a23.022,23.022,0,0,0,10.73-8.039A22.783,22.783,0,0,0,66.22,33.7,22.959,22.959,0,0,0,49.975,27h0Z"/>`,
-  border: `<path fill='white' d="M50,27A23,23,0,1,1,27,50,23,23,0,0,1,50,27Zm0,2A21,21,0,1,1,29,50,21,21,0,0,1,50,29Z"/>`,
+  pinBorder: ` <path fill='var(--marker-border-color, white)' d="M49.975,28.6A21.267,21.267,0,0,1,56.827,70.03l-6.852,9.1-6.852-9.1A21.267,21.267,0,0,1,49.975,28.6m0-1.6A22.985,22.985,0,0,0,28.806,40.968a22.816,22.816,0,0,0,2.6,22.368,23.022,23.022,0,0,0,10.73,8.039l6.56,8.708,1.282,1.7,1.282-1.7,6.56-8.708a23.022,23.022,0,0,0,10.73-8.039A22.783,22.783,0,0,0,66.22,33.7,22.959,22.959,0,0,0,49.975,27h0Z"/>`,
+  border: `<path fill='var(--marker-border-color, white)' d="M50,27A23,23,0,1,1,27,50,23,23,0,0,1,50,27Zm0,2A21,21,0,1,1,29,50,21,21,0,0,1,50,29Z"/>`,
 
   // backgrounds
   funBg: `<circle fill='white' r='16' cx='50' cy='50'/>`,
@@ -71,8 +71,8 @@ export const square = {
   selFunColour: `fill-rule='evenodd' d='M74,18H26a8.192,8.192,0,0,0-8,8V74a8.192,8.192,0,0,0,8,8H41a6.682,6.682,0,0,1,4.707,2.037L50,90l4.3-5.963A6.661,6.661,0,0,1,59,82H74a7.947,7.947,0,0,0,8.025-7.691L82,26A8.192,8.192,0,0,0,74,18ZM71.875,75H28.125A3.125,3.125,0,0,1,25,71.875V28.125A3.125,3.125,0,0,1,28.125,25h43.75A3.125,3.125,0,0,1,75,28.125v43.75A3.125,3.125,0,0,1,71.875,75Z'`,
 
   // borders
-  pinBorder: `<path fill='white' d='M65,70H57.675a5,5,0,0,0-4.159,2.226L50,77.5l-3.516-5.274A5,5,0,0,0,42.325,70H35a5.015,5.015,0,0,1-5-5V35a5.015,5.015,0,0,1,5-5H65a5.015,5.015,0,0,1,5,5V65A5.015,5.015,0,0,1,65,70ZM64.728,28.007H35.346A7.38,7.38,0,0,0,28,35.4V64.991A6.768,6.768,0,0,0,35,72h7a3.891,3.891,0,0,1,2.556,1.485L48,78.687,50,82l2.074-3.314,3.444-5.2A3.735,3.735,0,0,1,58,72h7a6.828,6.828,0,0,0,7.073-7.009V35.4a7.38,7.38,0,0,0-7.345-7.4h0Z'/>`,
-  border: `<path fill='white' d='M34,28H66a6,6,0,0,1,6,6V66a6,6,0,0,1-6,6H34a6,6,0,0,1-6-6V34A6,6,0,0,1,34,28Zm1,2H65a5,5,0,0,1,5,5V65a5,5,0,0,1-5,5H35a5,5,0,0,1-5-5V35A5,5,0,0,1,35,30Z'/>`,
+  pinBorder: `<path fill='var(--marker-border-color, white)' d='M65,70H57.675a5,5,0,0,0-4.159,2.226L50,77.5l-3.516-5.274A5,5,0,0,0,42.325,70H35a5.015,5.015,0,0,1-5-5V35a5.015,5.015,0,0,1,5-5H65a5.015,5.015,0,0,1,5,5V65A5.015,5.015,0,0,1,65,70ZM64.728,28.007H35.346A7.38,7.38,0,0,0,28,35.4V64.991A6.768,6.768,0,0,0,35,72h7a3.891,3.891,0,0,1,2.556,1.485L48,78.687,50,82l2.074-3.314,3.444-5.2A3.735,3.735,0,0,1,58,72h7a6.828,6.828,0,0,0,7.073-7.009V35.4a7.38,7.38,0,0,0-7.345-7.4h0Z'/>`,
+  border: `<path fill='var(--marker-border-color, white)' d='M34,28H66a6,6,0,0,1,6,6V66a6,6,0,0,1-6,6H34a6,6,0,0,1-6-6V34A6,6,0,0,1,34,28Zm1,2H65a5,5,0,0,1,5,5V65a5,5,0,0,1-5,5H35a5,5,0,0,1-5-5V35A5,5,0,0,1,35,30Z'/>`,
 
   // backgrounds
   funBg: `<rect fill='white' x='35' y='35' width='30' height='30' rx='3.125' ry='3.125'/>`,
diff --git a/src/iotMapManager/src/iot-map-icons.ts b/src/iotMapManager/src/iot-map-icons.ts
index 6cac063c..ab94c850 100644
--- a/src/iotMapManager/src/iot-map-icons.ts
+++ b/src/iotMapManager/src/iot-map-icons.ts
@@ -463,7 +463,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
     const arrowConf = config.markers.size.directionArrow
     const shift = (selected) ? 0 : 3 * arrowConf.height / 4
     const arrowColor = (marker.shape.percent) ? marker.shape.color : funColor
-    const strokeColor = (selected) ? funColor : 'white'
+    const strokeColor = (selected) ? funColor : 'var(--marker-border-color, white)'
 
     svgDirection = `<div class='${((selected) ? 'iotmap-directionSelected' : 'iotmap-directionUnselected')}'>
                     <svg xmlns='http://www.w3.org/2000/svg'