dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Igor Kulikov 2021-12-21 09:47:37 +02:00
parent 5b4288ba4d
commit 3950b58845
4 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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