Date: Tue, 21 Dec 2021 09:47:37 +0200
Subject: [PATCH 10/10] Add tooltip offset settings for map widgets. Improve
default values handling by json schema form component.
---
.../components/widget/lib/maps/map-models.ts | 4 ++++
.../components/widget/lib/maps/markers.ts | 14 +++++++----
.../components/widget/lib/maps/schemes.ts | 24 ++++++++++++++-----
.../react/json-form-base-component.tsx | 16 ++++++-------
4 files changed, 40 insertions(+), 18 deletions(-)
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index a472a99915..981e71d787 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/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',
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index 5550706402..f2fae19ab0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/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(`${settings.labelText}
`,
- { 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],
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
index b42da7d8b0..2924ff688e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
+++ b/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',
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
index ce1f570f7f..17885e7c50 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
@@ -67,10 +67,10 @@ export default ThingsboardBaseComponent => class
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
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
}
}
} 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;
}
}