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

UI: Fix map marker icon transform fon safari browsers.

Browse Source
This commit is contained in:
Igor Kulikov 2025-03-13 17:04:31 +02:00
parent fb0ac70ec7
commit 2fb1e23c91
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,7 @@ interface MarkerIconContainerDefinition {
iconSize: number; iconSize: number;
iconColor: (color: tinycolor.Instance) => tinycolor.Instance; iconColor: (color: tinycolor.Instance) => tinycolor.Instance;
iconAlpha: (color: tinycolor.Instance) => number; iconAlpha: (color: tinycolor.Instance) => number;
appendIcon?: (svgElement: SVGElement, iconElement: Element) => void; appendIcon?: (svgElement: SVGElement, iconElement: Element, iconSize: number) => void;
} }
const emptyIconContainerDefinition: MarkerIconContainerDefinition = { const emptyIconContainerDefinition: MarkerIconContainerDefinition = {
@ -114,14 +114,16 @@ const defaultTripIconContainerDefinition: MarkerIconContainerDefinition = {
iconSize: 24, iconSize: 24,
iconColor: () => tinycolor('#000'), iconColor: () => tinycolor('#000'),
iconAlpha: () => 1, iconAlpha: () => 1,
appendIcon: (svgElement, iconElement) => { appendIcon: (svgElement, iconElement, iconSize) => {
const box = iconElement.bbox(); const box = iconElement.bbox();
const cx = iconSize/2 + box.x;
const cy = iconSize/2 + box.y;
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');
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.clone().fill('#000').translate(-box.cx, -box.cy)); iconContainer.add(iconElement.clone().fill('#000').translate(-cx, -cy));
} }
} }
elements = svgElement.getElementsByClassName('icon-mask-overlay'); elements = svgElement.getElementsByClassName('icon-mask-overlay');
@ -129,7 +131,7 @@ const defaultTripIconContainerDefinition: MarkerIconContainerDefinition = {
elements = elements[0].getElementsByClassName('marker-icon-container'); elements = elements[0].getElementsByClassName('marker-icon-container');
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.clone().fill('#fff').translate(-box.cx, -box.cy)); iconContainer.add(iconElement.clone().fill('#fff').translate(-cx, -cy));
} }
} }
} }
@ -302,14 +304,14 @@ export const createColorMarkerIconElement = (iconRegistry: MatIconRegistry, domS
if (svgElement) { if (svgElement) {
if (iconElement) { if (iconElement) {
if (definition.appendIcon) { if (definition.appendIcon) {
definition.appendIcon(svgElement, iconElement); definition.appendIcon(svgElement, iconElement, iconSize);
} else { } else {
const elements = svgElement.getElementsByClassName('marker-icon-container'); const elements = svgElement.getElementsByClassName('marker-icon-container');
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 box = iconElement.bbox();
iconElement.translate(-box.cx, -box.cy); iconElement.translate(-(iconSize/2 + box.x), -(iconSize/2 + box.y));
} }
} }
} }
@ -321,7 +323,7 @@ export const createColorMarkerIconElement = (iconRegistry: MatIconRegistry, domS
iconContainer.translate(iconSize/2,iconSize/2); iconContainer.translate(iconSize/2,iconSize/2);
iconContainer.add(iconElement); iconContainer.add(iconElement);
const box = iconElement.bbox(); const box = iconElement.bbox();
iconElement.translate(-box.cx, -box.cy); iconElement.translate(-(iconSize/2 + box.x), -(iconSize/2 + box.y));
svg.add(iconContainer); svg.add(iconContainer);
return svg.node; return svg.node;
} }