From ffedbd2aae9d7a4e4f5dca28b27f6fe3cd340ace Mon Sep 17 00:00:00 2001
From: BRKP5614 <sandrine.gateau@orange.com>
Date: Mon, 13 Sep 2021 11:01:23 +0200
Subject: [PATCH] IOTMAPCOMP-170 : pouvoir afficher des images dans les
 markers.

---
 src/iotMapManager/css/markers.css             | 43 ++++++++++++-------
 src/iotMapManager/src/iot-map-icons.ts        | 12 ++----
 .../src/iot-map-marker-manager.ts             | 10 ++++-
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/iotMapManager/css/markers.css b/src/iotMapManager/css/markers.css
index f5f56ef8..47da097d 100644
--- a/src/iotMapManager/css/markers.css
+++ b/src/iotMapManager/css/markers.css
@@ -48,42 +48,55 @@
 
 .iotmap-markericon > .iotmap-innerspan {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 5px;
+  left: 5px;
   z-index: 25;
   text-align: center;
   font-family: "Helvetica Neue", 'helvetica';
-
 }
 
 .iotmap-markericon .iotmap-labelUnselected{
-  width:30px;
-  height:30px;
+  width:20px;
+  height:20px;
   font-size:18px;
-  line-height: 30px;
+  line-height: 20px;
   font-weight: bold;
 }
 
 .iotmap-markericon .iotmap-labelSelected{
-  width:50px;
-  height:50px;
+  width:40px;
+  height:40px;
   font-size:30px;
-  line-height:50px;
+  line-height:45px;
   font-weight: bold;
 }
 
 .iotmap-markericon .iotmap-iconUnselected{
-  width:30px;
-  height:30px;
+  width:20px;
+  height:20px;
   font-size:18px;
-  line-height:30px;
+  line-height: 20px;
 }
 
 .iotmap-markericon .iotmap-iconSelected{
-  width:50px;
-  height:50px;
+  width:40px;
+  height:40px;
   font-size:26px;
-  line-height:50px;
+  line-height:45px;
+}
+
+.iotmap-markericon .iotmap-imgUnselected{
+  width:20px;
+  height:20px;
+  font-size:18px;
+  line-height: 20px;
+}
+
+.iotmap-markericon .iotmap-imgSelected{
+  width:40px;
+  height:40px;
+  font-size:26px;
+  line-height:45px;
 }
 
 /********************
diff --git a/src/iotMapManager/src/iot-map-icons.ts b/src/iotMapManager/src/iot-map-icons.ts
index dc49ceaa..e0f71017 100644
--- a/src/iotMapManager/src/iot-map-icons.ts
+++ b/src/iotMapManager/src/iot-map-icons.ts
@@ -482,19 +482,15 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
   if (marker.inner) {
     const innerColor = (marker.inner.color !== undefined) ? marker.inner.color : config.markers.default.inner.color
 
-    if (marker.inner.icon) { // icon
+    if (marker.inner.img) {
+      innerDesign = `<img src='${marker.inner.img}' class='iotmap-innerspan ${((selected) ? ' iotmap-imgSelected' : ' iotmap-imgUnselected')}'>`
+    } else if (marker.inner.icon) { // icon
       innerDesign = `<span class='iotmap-innerspan ${marker.inner.icon} ${((selected) ? ' iotmap-iconSelected' : ' iotmap-iconUnselected')}'
       style='color: ${innerColor}'></span>`
-
-    } else if (marker.inner.img) {
-      innerDesign = `<img src='${marker.inner.img}'>`
-    }
-    
-    else if (marker.inner.label) { // label
+    } else if (marker.inner.label) { // label
       innerDesign = `<span class='iotmap-innerspan ${((selected) ? ' iotmap-labelSelected' : ' iotmap-labelUnselected')}'
                            style='color: ${innerColor}'>${marker.inner.label[0]}</span>`
     }
-    
   }
 
   // state / gauge
diff --git a/src/iotMapManager/src/iot-map-marker-manager.ts b/src/iotMapManager/src/iot-map-marker-manager.ts
index 63a69081..81594d2d 100644
--- a/src/iotMapManager/src/iot-map-marker-manager.ts
+++ b/src/iotMapManager/src/iot-map-marker-manager.ts
@@ -158,14 +158,22 @@ export class IotMapMarkerManager {
 
       // inner modified
       if (params.inner !== undefined) {
+        if (params.inner.img === null) { // cmd to remove icon
+          currentMarkerInfos.inner.img = undefined
+        }
+        if (params.inner.icon === null) { // cmd to remove icon
+          currentMarkerInfos.inner.icon = undefined
+        }
         currentMarkerInfos.inner = {
           color: params.inner?.color ?? currentMarkerInfos.inner?.color ?? this.config.markers.default.inner.color,
+          img: params.inner?.img ?? currentMarkerInfos.inner?.img,
           icon: params.inner?.icon ?? currentMarkerInfos.inner?.icon,
-          label: (params.inner?.icon === undefined) ? (params.inner?.label ?? currentMarkerInfos.inner?.label) : undefined
+          label: params.inner?.label ?? currentMarkerInfos.inner?.label
         }
         htmlModificationNeeded = true
       }
 
+
       // template modified
       if (params.template !== undefined) {
         const template = this.config.markerTemplates[params.template]