@sapui5/sap.ui.vbm 1.130.0 → 1.131.0

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

@@ -0,0 +1,146 @@
+
+sap.ui.define([
+    "sap/ui/base/Object",
+], function (BaseObject) {
+    'use strict';
+
+    const VectorUtils = BaseObject.extend("sap.ui.vbm.vector.VectorUtils", /** @lends sap.ui.vbm.vector.VectorUtils.prototype */ {
+    });
+
+    VectorUtils.createMap = (geoJSON, map_container) => {
+
+        return new maplibregl.Map({
+            container: map_container,
+            renderWorldCopies: false,
+            attributionControl: false,
+            dragRotate: false,
+            touchZoomRotate: false,
+            style: geoJSON[0].provider,
+            center: geoJSON[0].center,
+            zoom: geoJSON[0].zoom,
+            // Use transformRequest to modify requests for specific maps
+            transformRequest: (url, resourceType) => {
+                // Add the headers only for the specific types of requests
+                if (Object.keys(geoJSON[0].header).length != 0) {
+                    return {
+                        url: url,
+                        headers: geoJSON[0].header // Add the header
+                    };
+                } else {
+
+                    return { url: url }; // For other maps, use the default request
+                }
+            }
+        });
+    };
+
+    VectorUtils.createSpotElement = (marker) => {
+        // create a DOM element for the marker (parent div)
+        const el = document.createElement('div');
+
+        // Set background image for the marker
+        var base64decoded = "data:image/png;base64," + marker.properties.base64;
+        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;
+    };
+
+    VectorUtils.createIconElement = (Icon) => {
+        const child_el = document.createElement('div');
+        child_el.className = 'marker';
+        child_el.style.position = 'absolute';  // Position it absolutely inside the parent
+        child_el.style.top = '30%';  // Adjust positioning
+        child_el.style.left = '50%';
+        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
+        var iconInfo = sap.ui.core.IconPool.getIconInfo(Icon);
+        child_el.innerHTML = iconInfo.content;
+        return child_el;
+    }
+
+    VectorUtils.createDropdownMenu = (menuData) => {
+        const dropdown = document.createElement('div');
+        dropdown.classList.add('dropdown');
+
+        const menuContainer = document.createElement('div');
+        menuContainer.classList.add('dropdown-content');
+
+
+        function createMenu(items) {
+            const ul = document.createElement('ul');
+            if (Array.isArray(items)) {
+                items.forEach(items => {
+                    const li = document.createElement('li');
+                    li.textContent = items.text;
+
+
+
+                    if (items.MenuItem) {
+                        const submenu = createMenu(items.MenuItem);
+                        submenu.style.display = 'none'; // Hide submenu initially
+                        submenu.style.position = 'absolute'; // Position it absolutely
+                        submenu.style.left = '100%'; // Position submenu to the right of the parent
+                        submenu.style.top = '0'; // Align to the top of the parent
+                        submenu.style.backgroundColor = 'white';
+                        submenu.style.display = 'none'; // Hide submenu initially
+                        li.appendChild(submenu);
+                        // Keep submenu open on hover
+                        li.addEventListener('mouseenter', () => {
+                            submenu.style.display = 'block'; // Show submenu on hover
+                        });
+                        // Toggle submenu visibility on click
+                        li.addEventListener('click', (event) => {
+                            event.stopPropagation(); // Prevent click event from propagating
+                            submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
+
+                            // Close other submenus
+                            document.querySelectorAll('.dropdown-content ul').forEach(sub => {
+                                if (sub !== submenu) {
+                                    sub.style.display = 'none';
+                                }
+                            });
+                        });
+                    }
+
+                    ul.appendChild(li);
+                });
+            }
+            return ul;
+
+        }
+        const mainMenu = createMenu(menuData.MenuItem);
+        menuContainer.appendChild(mainMenu);
+        dropdown.appendChild(menuContainer);
+
+        // Hide menu when clicking outside
+        document.addEventListener('click', () => {
+            menuContainer.style.display = 'none';
+            // Hide all submenus
+            menuContainer.querySelectorAll('ul').forEach(sub => {
+                sub.style.display = 'none';
+            });
+        });
+        // Toggle main dropdown visibility
+        dropdown.addEventListener('mouseenter', () => {
+            dropdown.style.display = 'block';
+        });
+        // Add dropdown to the body
+        document.body.appendChild(dropdown);
+
+        return dropdown;
+    };
+
+    // Method to format the coordinates
+    VectorUtils.formatCoordinates = function (coords) {
+        return `${coords.lng};${coords.lat};0.0`;
+    };
+
+
+    return VectorUtils;
+
+});
+
+