IOTMAPCOMP-170 : pouvoir afficher des images dans les markers.

Orange-OpenSource · Sep 13, 2021 · ffedbd2 · ffedbd2
1 parent 4c88bc1
commit ffedbd2
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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]