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

UI: Fix Map icon marker pos calculation.

Browse Source
This commit is contained in:
Igor Kulikov 2025-03-14 15:51:02 +02:00
parent 3b4ee01aac
commit 4791be633e
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui-ngx/src/app/shared/models/widget/maps/marker-shape.models.ts
View File

@ -115,9 +115,9 @@ const defaultTripIconContainerDefinition: MarkerIconContainerDefinition = {
iconColor: () => tinycolor('#000'), iconColor: () => tinycolor('#000'),
iconAlpha: () => 1, iconAlpha: () => 1,
appendIcon: (svgElement, iconElement, iconSize) => { appendIcon: (svgElement, iconElement, iconSize) => {
const box = iconElement.bbox(); const iconCenter = calculateIconCenter(iconElement, iconSize);
const cx = iconSize/2 + box.x; const cx = iconCenter.cx;
const cy = iconSize/2 + box.y; const cy = iconCenter.cy;
let elements = svgElement.getElementsByClassName('icon-mask-exclude'); let elements = svgElement.getElementsByClassName('icon-mask-exclude');
if (elements.length) { if (elements.length) {
elements = elements[0].getElementsByClassName('marker-icon-container'); elements = elements[0].getElementsByClassName('marker-icon-container');
@ -310,8 +310,8 @@ export const createColorMarkerIconElement = (iconRegistry: MatIconRegistry, domS
if (elements.length) { if (elements.length) {
const iconContainer = new G(elements[0] as SVGGElement); const iconContainer = new G(elements[0] as SVGGElement);
iconContainer.add(iconElement); iconContainer.add(iconElement);
const box = iconElement.bbox(); const iconCenter = calculateIconCenter(iconElement, iconSize);
iconElement.translate(-(iconSize/2 + box.x), -(iconSize/2 + box.y)); iconElement.translate(-iconCenter.cx, -iconCenter.cy);
} }
} }
} }
@ -322,8 +322,8 @@ export const createColorMarkerIconElement = (iconRegistry: MatIconRegistry, domS
const iconContainer = new G(); const iconContainer = new G();
iconContainer.translate(iconSize/2,iconSize/2); iconContainer.translate(iconSize/2,iconSize/2);
iconContainer.add(iconElement); iconContainer.add(iconElement);
const box = iconElement.bbox(); const iconCenter = calculateIconCenter(iconElement, iconSize);
iconElement.translate(-(iconSize/2 + box.x), -(iconSize/2 + box.y)); iconElement.translate(-iconCenter.cx, -iconCenter.cy);
svg.add(iconContainer); svg.add(iconContainer);
return svg.node; return svg.node;
} }
@ -344,3 +344,18 @@ export const createPlaceItemIcon = (iconRegistry: MatIconRegistry, domSanitizer:
); );
return placeItemIconURI$; return placeItemIconURI$;
} }
const calculateIconCenter = (iconElement: Element, iconSize: number): {cx: number, cy: number} => {
const box = iconElement.bbox();
if (iconElement.type === 'text') {
return {
cx: iconSize/2 + box.x,
cy: iconSize/2 + box.y
};
} else {
return {
cx: box.cx,
cy: box.cy
};
}
}