@sapui5/sap.ui.vbm 1.136.1 → 1.136.2

package/src/sap/ui/vbm/vector/VectorUtils.js

@@ -34,23 +34,32 @@ sap.ui.define([
         });
     };
 
-    VectorUtils.createSpotElement = (marker) => {
-        // create a DOM element for the marker (parent div)
+     VectorUtils.createSpotElement = (marker, spotid) => {
         const el = document.createElement('div');
-        
-        // Set background image for the marker
-        var base64decoded = "data:image/png;base64," + marker.properties.base64;
+        const base64decoded = "data:image/png;base64," + (marker.properties.base64 || "");
+        el.id = '__mapmarker' + spotid++;
         el.style.backgroundImage = `url(${base64decoded})`;
-        el.style.width = marker.properties.width;
-        el.style.height = marker.properties.height;
-        el.style.backgroundSize = 'cover'; // Ensure image fits
-        return el;
+        el.style.backgroundSize = 'cover';
+        el.style.display = 'inline-block';
+        el.style.transform = 'translate(-50%, -100%)'; 
+    
+        // load the image to get natural size 
+        const img = new Image();
+        img.src = base64decoded;
+        img.onload = () => {
+            const scaleParts = (marker.properties.Scale || "1;1;1").split(';').map(Number);
+            const [sx, sy] = scaleParts.some(isNaN) ? [1, 1] : [scaleParts[0], scaleParts[1]];
+            el.style.width = `${img.naturalWidth * sx}px`;
+            el.style.height = `${img.naturalHeight * sy}px`;
+        };
+        return {spotEl:el, spotId:spotid};        
     };
+    
     VectorUtils.isAccepted = (drag, drop) => {
         var validDrop = drag.some(item => drop.includes(item));
         return validDrop;
     };
-    VectorUtils.createIconElement = (Icon) => {
+    VectorUtils.createIconElement = (Icon, iconColor) => {
         const child_el = document.createElement('div');
         child_el.className = 'marker';
         child_el.style.position = 'absolute';  // Position it absolutely inside the parent
@@ -59,15 +68,16 @@ sap.ui.define([
         child_el.style.transform = 'translate(-50%, -50%)'; // Center the icon
         child_el.style.fontFamily = 'SAP-icons';
         child_el.style.fontSize = '20px';  // Adjust size as needed
+        child_el.style.color = iconColor;
         var iconInfo = sap.ui.core.IconPool.getIconInfo(Icon);
         child_el.innerHTML = iconInfo.content;
         return child_el;
     }
     //Function to set the canvas id
-	VectorUtils._setcanvasid = () => {
-		var mapCanvas = '__mapcanvas';
+    VectorUtils._setcanvasid = () => {
+        var mapCanvas = '__mapcanvas';
         return mapCanvas;
-	}
+    }
 
     VectorUtils.createDropdownMenu = (menuData) => {
         const dropdown = document.createElement('div');
@@ -231,6 +241,107 @@ sap.ui.define([
 
         return windowContainer;
     };
+
+    VectorUtils.createMarkerLabel = (label, labelcolor) => {
+        var r, g, b, a;
+        const obj = document.createElement('div');
+        obj.className = 'marker-label';
+        obj.textContent = label;
+        obj.style.color = labelcolor;
+        obj.style.position = 'absolute';
+        obj.style.top = '100%';
+        if (!labelcolor) {
+            [r, g, b, a] = [211, 211, 211, 1];
+        } else {
+            [r, g, b, a] = VectorUtils.parseRGBAString(labelcolor);
+        }
+        obj.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+        obj.style.border = `2px solid rgba(${r}, ${g}, ${b}, ${a})`;
+        const textColor = VectorUtils.getContrastTextColor(r, g, b);
+        obj.style.color = textColor;
+        obj.style.fontFamily = 'Arial, sans-serif';
+        obj.style.fontSize = '14px';
+        obj.style.padding = '2px 6px';
+        obj.style.borderRadius = '4px';
+        obj.style.whiteSpace = 'pre-wrap';   
+        obj.style.boxSizing = 'border-box';
+        obj.style.textAlign = 'center';
+    
+        return obj;
+    }
+
+VectorUtils.createRouteLabel = (label, labelcolor) => {
+    let r, g, b, a;
+    const obj = document.createElement('div');
+    obj.className = 'route-label';
+    obj.textContent = label;
+
+    if (!labelcolor) {
+        [r, g, b, a] = [211, 211, 211, 1]; 
+    } else {
+        [r, g, b, a] = VectorUtils.parseRGBAString(labelcolor);
+    }
+
+    const textColor = VectorUtils.getContrastTextColor(r, g, b);
+
+    obj.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+    obj.style.border = `2px solid rgba(${r}, ${g}, ${b}, ${a})`;
+    obj.style.color = textColor;
+    obj.style.fontFamily = 'Arial, sans-serif';
+    obj.style.fontSize = '14px';
+    obj.style.padding = '2px 6px';
+    obj.style.borderRadius = '4px';
+    obj.style.whiteSpace = 'pre-wrap';   
+    obj.style.boxSizing = 'border-box';
+    obj.style.textAlign = 'center';
+
+    return obj;
+};
+
+    VectorUtils.rgbaToHexAndOpacity = (rgbaString) => {
+        const rgbaRegex = /rgba?\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i;
+        const match = rgbaString.match(rgbaRegex);
+
+        if (!match) {
+            throw new Error("Invalid RGBA format");
+        }
+
+        const r = parseInt(match[1], 10);
+        const g = parseInt(match[2], 10);
+        const b = parseInt(match[3], 10);
+        const a = parseFloat(match[4]);
+
+        const toHex = (value) => value.toString(16).padStart(2, '0');
+
+        const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+
+        return {
+            hexColor: hex,
+            opacity: a
+        };
+        }
+
+
+    VectorUtils.parseRGBAString = (rgbaStr) => {
+        const match = rgbaStr.match(/rgba?\s*\(\s*(\d+),\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/i);
+
+        if (!match) return null;
+
+        const r = parseInt(match[1]);
+        const g = parseInt(match[2]);
+        const b = parseInt(match[3]);
+        const a = parseInt(match[4]) / 255; 
+
+        return [r, g, b, parseFloat(a.toFixed(3))];
+    }
+
+    VectorUtils.getContrastTextColor = (r, g, b) => {
+        if (r === 0 && g === 0 && b === 0) {
+            return '#000000';
+        }
+        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
+        return brightness < 128 ? '#FFFFFF' : '#000000';
+    }
     VectorUtils.createSubCaption = (item) => {
         const obj = document.createElement('div');
         obj.setAttribute("role", sap.ui.core.AccessibleRole.Secondary);