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; } }