Add tooltip offset settings for map widgets. Improve default values handling by json schema form component.

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts

@@ -104,6 +104,8 @@ export type MarkerSettings = {
     markerImageFunction?: MarkerImageFunction;
     markerOffsetX: number;
     markerOffsetY: number;
+    tooltipOffsetX: number;
+    tooltipOffsetY: number;
 };
 
 export interface FormattedData {
@@ -223,6 +225,8 @@ export const defaultSettings: any = {
     yPosKeyName: 'yPos',
     markerOffsetX: 0.5,
     markerOffsetY: 1,
+    tooltipOffsetX: 0,
+    tooltipOffsetY: -1,
     latKeyName: 'latitude',
     lngKeyName: 'longitude',
     polygonKeyName: 'coordinates',

ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts

@@ -33,6 +33,7 @@ import LeafletMap from './leaflet-map';
 
 export class Marker {
     leafletMarker: L.Marker;
+    labelOffset: L.LatLngTuple;
     tooltipOffset: L.LatLngTuple;
     markerOffset: L.LatLngTuple;
     tooltip: L.Popup;
@@ -49,9 +50,14 @@ export class Marker {
           isDefined(settings.markerOffsetY) ? settings.markerOffsetY : 1,
         ];
 
+        this.tooltipOffset = [
+          isDefined(settings.tooltipOffsetX) ? settings.tooltipOffsetX : 0,
+          isDefined(settings.tooltipOffsetY) ? settings.tooltipOffsetY : -1,
+        ];
+
         this.createMarkerIcon((iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
-            this.tooltipOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
+            this.labelOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
             this.updateMarkerLabel(settings);
         });
 
@@ -111,7 +117,7 @@ export class Marker {
             }
             settings.labelText = fillPattern(this.map.markerLabelText, this.map.replaceInfoLabelMarker, this.data);
             this.leafletMarker.bindTooltip(`<div style="color: ${settings.labelColor};"><b>${settings.labelText}</b></div>`,
-                { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset });
+                { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.labelOffset });
         }
     }
 
@@ -124,7 +130,7 @@ export class Marker {
     updateMarkerIcon(settings: MarkerSettings) {
         this.createMarkerIcon((iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
-            this.tooltipOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
+            this.labelOffset = [0, -iconInfo.size[1] * this.markerOffset[1] + 10];
             this.updateMarkerLabel(settings);
         });
     }
@@ -165,7 +171,7 @@ export class Marker {
                             iconUrl: currentImage.url,
                             iconSize: [width, height],
                             iconAnchor: [width * this.markerOffset[0], height * this.markerOffset[1]],
-                            popupAnchor: [0, -height]
+                            popupAnchor: [width * this.tooltipOffset[0], height * this.tooltipOffset[1]]
                         });
                         const iconInfo = {
                             size: [width, height],

ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts

@@ -343,15 +343,25 @@ export const commonMapSettingsSchema =
                 default: 'return {x: origXPos, y: origYPos};'
             },
             markerOffsetX: {
-                title: 'Marker X offset relative to position',
+                title: 'Marker X offset relative to position multiplied by marker width',
                 type: 'number',
                 default: 0.5
             },
             markerOffsetY: {
-                title: 'Marker Y offset relative to position',
+                title: 'Marker Y offset relative to position multiplied by marker height',
                 type: 'number',
                 default: 1
             },
+            tooltipOffsetX: {
+                title: 'Tooltip X offset relative to marker anchor multiplied by marker width',
+                type: 'number',
+                default: 0
+            },
+            tooltipOffsetY: {
+                title: 'Tooltip Y offset relative to marker anchor multiplied by marker height',
+                type: 'number',
+                default: -1
+            },
             color: {
                 title: 'Color',
                 type: 'string'
@@ -482,13 +492,15 @@ export const commonMapSettingsSchema =
             condition: 'model.showTooltip === true && model.useTooltipFunction === true'
         },
         {
-            key: 'markerOffsetX',
-            condition: 'model.provider === "image-map"'
+            key: 'tooltipOffsetX',
+            condition: 'model.showTooltip === true'
         },
         {
-            key: 'markerOffsetY',
-            condition: 'model.provider === "image-map"'
+            key: 'tooltipOffsetY',
+            condition: 'model.showTooltip === true'
         },
+        'markerOffsetX',
+        'markerOffsetY',
         {
             key: 'posFunction',
             type: 'javascript',

ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx

@@ -67,10 +67,10 @@ export default ThingsboardBaseComponent => class<P extends JsonFormFieldProps>
     defaultValue() {
         let value = JsonFormUtils.selectOrSet(this.props.form.key, this.props.model);
         if (this.props.form.schema.type === 'boolean') {
-            if (typeof value !== 'boolean' && this.props.form.default) {
+            if (typeof value !== 'boolean' && typeof this.props.form.default === 'boolean') {
                 value = this.props.form.default;
             }
-            if (typeof value !== 'boolean' && this.props.form.schema && this.props.form.schema.default) {
+            if (typeof value !== 'boolean' && this.props.form.schema && typeof this.props.form.schema.default === 'boolean') {
                 value = this.props.form.schema.default;
             }
             if (typeof value !== 'boolean' &&
@@ -79,13 +79,13 @@ export default ThingsboardBaseComponent => class<P extends JsonFormFieldProps>
                 value = false;
             }
         } else if (this.props.form.schema.type === 'integer' || this.props.form.schema.type === 'number') {
-            if (typeof value !== 'number' && this.props.form.default) {
+            if (typeof value !== 'number' && typeof this.props.form.default === 'number') {
                 value = this.props.form.default;
             }
-            if (typeof value !== 'number' && this.props.form.schema && this.props.form.schema.default) {
+            if (typeof value !== 'number' && this.props.form.schema && typeof this.props.form.schema.default === 'number') {
                 value = this.props.form.schema.default;
             }
-            if (typeof value !== 'number' && this.props.form.titleMap && this.props.form.titleMap[0].value) {
+            if (typeof value !== 'number' && this.props.form.titleMap && typeof this.props.form.titleMap[0].value === 'number') {
                 value = this.props.form.titleMap[0].value;
             }
             if (value && typeof value === 'string') {
@@ -96,13 +96,13 @@ export default ThingsboardBaseComponent => class<P extends JsonFormFieldProps>
                 }
             }
         } else {
-            if (!value && this.props.form.default) {
+            if (!value && typeof this.props.form.default !== 'undefined') {
                 value = this.props.form.default;
             }
-            if (!value && this.props.form.schema && this.props.form.schema.default) {
+            if (!value && this.props.form.schema && typeof this.props.form.schema.default !== 'undefined') {
                 value = this.props.form.schema.default;
             }
-            if (!value && this.props.form.titleMap && this.props.form.titleMap[0].value) {
+            if (!value && this.props.form.titleMap && typeof this.props.form.titleMap[0].value !== 'undefined') {
                 value = this.props.form.titleMap[0].value;
             }
         }