@sapui5/sap.ui.vbm 1.140.0 → 1.142.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.vbm",
-  "version": "1.140.0",
+  "version": "1.142.0",
   "description": "SAPUI5 Library sap.ui.vbm",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/ui/vbm/.library

@@ -3,7 +3,7 @@
 	<name>sap.ui.vbm</name>
 	<vendor>SAP SE</vendor>
 	<copyright>SAP UI development toolkit for HTML5 (SAPUI5) (c) Copyright 2009-2012 SAP AG. All rights reserved</copyright>
-	<version>1.140.0</version>
+	<version>1.142.0</version>
 
 	<documentation>SAP UI library: sap.ui.vbm</documentation>
 

package/src/sap/ui/vbm/Adapter.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new object
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @extends sap.ui.core.Element
 	 * @constructor
 	 * @public

package/src/sap/ui/vbm/Adapter3D.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new object
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @extends sap.ui.core.Element
 	 * @constructor
 	 * @public

package/src/sap/ui/vbm/AnalyticMap.js

@@ -117,11 +117,12 @@ sap.ui.define([
 			"_sap_ui_vbm_shared_ChartDataPointBorderHoverSelectedColor",
 			"_sap_ui_vbm_shared_ChartDataPointNotSelectedBackgroundOpacity"
 		] });
-		
-	AnalyticMap.DefaultRegionColor = values?values["_sap_ui_vbm_shared_ChoroplethRegionBG"] : "rgb(213,218,221)";
-	AnalyticMap.DefaultRegionColorBorder = values?values["_sap_ui_vbm_shared_ChoroplethRegionBorder"] : "rgb(255,255,255)";
-	AnalyticMap.AltBorderColor = values?values["_sap_ui_vbm_shared_ChartDataPointBorderHoverSelectedColor"] : "#676767";
-	nonSelectOpacity = values?values["_sap_ui_vbm_shared_ChartDataPointNotSelectedBackgroundOpacity"] : "0.6";
+	const isValues= Object.keys(values || {}).length > 0;
+
+	AnalyticMap.DefaultRegionColor = isValues?values["_sap_ui_vbm_shared_ChoroplethRegionBG"] : "rgb(213,218,221)";
+	AnalyticMap.DefaultRegionColorBorder = isValues?values["_sap_ui_vbm_shared_ChoroplethRegionBorder"] : "rgb(255,255,255)";
+	AnalyticMap.AltBorderColor = isValues?values["_sap_ui_vbm_shared_ChartDataPointBorderHoverSelectedColor"] : "#676767";
+	nonSelectOpacity = isValues?values["_sap_ui_vbm_shared_ChartDataPointNotSelectedBackgroundOpacity"] : "0.6";
 
 	AnalyticMap.DefaultRegionNonSelectColor = "RHLSA(0;1;1;" + nonSelectOpacity + ")";
 
@@ -992,8 +993,9 @@ sap.ui.define([
 					"_sap_ui_vbm_shared_ChoroplethRegionBG",
 					"_sap_ui_vbm_shared_ChoroplethRegionBorder"
 				] });
-				sColC = AnalyticMap.DefaultRegionColor = oColValues? oColValues["_sap_ui_vbm_shared_ChoroplethRegionBG"] : AnalyticMap.DefaultRegionColor;
-				sColCB = AnalyticMap.DefaultRegionColorBorder = oColValues? oColValues["_sap_ui_vbm_shared_ChoroplethRegionBorder"] : AnalyticMap.DefaultRegionColorBorder;
+				const isValues= Object.keys(oColValues || {}).length > 0;
+				sColC = AnalyticMap.DefaultRegionColor = isValues? oColValues["_sap_ui_vbm_shared_ChoroplethRegionBG"] : AnalyticMap.DefaultRegionColor;
+				sColCB = AnalyticMap.DefaultRegionColorBorder = isValues? oColValues["_sap_ui_vbm_shared_ChoroplethRegionBorder"] : AnalyticMap.DefaultRegionColorBorder;
 			if (this.getPlugin()) { // plug-in mode -> make sure color format matches plugin requirements
 				sColC = window.VBI.Utilities.String2VBColor(sColC);
 				sColCB = window.VBI.Utilities.String2VBColor(sColCB);

package/src/sap/ui/vbm/Viewport.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @extends sap.ui.core.Control
 	 * @alias sap.ui.vbm.Viewport
 	 */

package/src/sap/ui/vbm/VoBase.js

@@ -341,10 +341,11 @@ sap.ui.define([
 			   "_sap_ui_vbm_shared_ChartGood",
 			   "_sap_ui_vbm_shared_ChartNeutral"] });
 
-	VoBase.prototype.DefaultColorBad = colorParams? colorParams["_sap_ui_vbm_shared_ChartBad"] : "rgb(211, 32, 48)";
-	VoBase.prototype.DefaultColorCritical = colorParams? colorParams["_sap_ui_vbm_shared_ChartCritical"] : "rgb(225, 123, 36)";
-	VoBase.prototype.DefaultColorGood = colorParams? colorParams["_sap_ui_vbm_shared_ChartGood"] : "rgb(97, 166, 86)";
-	VoBase.prototype.DefaultColorNeutral = colorParams? colorParams["_sap_ui_vbm_shared_ChartNeutral"] : "rgb(132, 143, 148)";
+	const isValues= Object.keys(colorParams || {}).length > 0;
+	VoBase.prototype.DefaultColorBad = isValues? colorParams["_sap_ui_vbm_shared_ChartBad"] : "rgb(211, 32, 48)";
+	VoBase.prototype.DefaultColorCritical = isValues? colorParams["_sap_ui_vbm_shared_ChartCritical"] : "rgb(225, 123, 36)";
+	VoBase.prototype.DefaultColorGood = isValues? colorParams["_sap_ui_vbm_shared_ChartGood"] : "rgb(97, 166, 86)";
+	VoBase.prototype.DefaultColorNeutral = isValues? colorParams["_sap_ui_vbm_shared_ChartNeutral"] : "rgb(132, 143, 148)";
 
 	// VO Interface implementation ..............................................//
 

package/src/sap/ui/vbm/adapter3d/ColladaBounds.js

@@ -22,7 +22,7 @@ sap.ui.define([
 		 *
 		 * @private
 		 * @author SAP SE
-		 * @version 1.140.0
+		 * @version 1.142.0
 		 * @alias sap.ui.vbm.adapter3d.ColladaBounds
 		 */
 	var ColladaBounds = BaseObject.extend("sap.ui.vbm.adapter3d.ColladaBounds", /** @lends sap.ui.vbm.adapter3d.ColladaBounds.prototype */ {

package/src/sap/ui/vbm/adapter3d/DragDropHandler.js

@@ -83,7 +83,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.DragDropHandler
 	 */
 	var DragDropHandler = BaseObject.extend("sap.ui.vbm.adapter3d.DragDropHandler", /** @lends sap.ui.vbm.adapter3d.DragDropHandler.prototype */ {

package/src/sap/ui/vbm/adapter3d/ModelHandler.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.ModelHandler
 	 */
 	var ModelHandler = BaseObject.extend("sap.ui.vbm.adapter3d.ModelHandler", /** @lends sap.ui.vbm.adapter3d.ModelHandler.prototype */ {

package/src/sap/ui/vbm/adapter3d/ObjectFactory.js

@@ -377,7 +377,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.ObjectFactory
 	 */
 	var ObjectFactory = BaseObject.extend("sap.ui.vbm.adapter3d.ObjectFactory", /** @lends sap.ui.vbm.adapter3d.ObjectFactory.prototype */ {});

package/src/sap/ui/vbm/adapter3d/PolygonHandler.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.PolygonHandler
 	 */
 	var PolygonHandler = BaseObject.extend("sap.ui.vbm.adapter3d.PolygonHandler", /** @lends sap.ui.vbm.adapter3d.PolygonHandler.prototype */ {

package/src/sap/ui/vbm/adapter3d/RectangleTracker.js

@@ -7,7 +7,7 @@ sap.ui.define([
 	var Vector2 = THREE.Vector2;
 	var _frustum = new THREE.Frustum;
 	var _center = new THREE.Vector3;
-	var _tmpPoint = new THREE.Vector3;
+	//var _tmpPoint = new THREE.Vector3;
 	var _vecNear = new THREE.Vector3;
 	var _vecTopLeft = new THREE.Vector3;
 	var _vecTopRight = new THREE.Vector3;
@@ -39,7 +39,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.RectangleTracker
 	 */
 	var RectangleTracker = BaseObject.extend("sap.ui.vbm.adapter3d.RectangleTracker", /** @lends sap.ui.vbm.adapter3d.RectangleTracker.prototype */ {
@@ -55,9 +55,11 @@ sap.ui.define([
 			this._selected = new Set();
 			this._renderer = this._renderer;
 			this.init();
-			var helper = new THREE.CameraHelper(this._camera);
-			helper.geometry.setDrawRange(0, 0);
-			this._addToScene(helper, this._scene, true, 1);
+			if (!this._adapter._cameraHelper) {
+				this._adapter._cameraHelper = new THREE.CameraHelper(this._camera);
+				this._adapter._cameraHelper.geometry.setDrawRange(0, 0);
+				this._addToScene(this._adapter._cameraHelper, this._scene, true, 1);
+			}
 			this._snapBox = new THREE.BoxHelper(undefined, 0x00ffff);
 			// invisible, layer #1 (disable hit test)
 			this._addToScene(this._snapBox, this._scene, false, 1);
@@ -148,82 +150,17 @@ sap.ui.define([
 	};
 
 	RectangleTracker.prototype._onPointerDown = function (event) {
+		if (event.button !== 0) {
+			return; // Don't start selection if it's not the left button
+		}
 		this._updateController(true);
 		this.onSelectStart(event);
-		var that = this;
 		event.cursor = event.cursor || this._getXY(event);
 		this._mouseDown = true;
 		var rect = this._viewport.getDomRef().getBoundingClientRect();
 		startPoint.x = (event.cursor.x / rect.width) * 2 - 1;
 		startPoint.y = -(event.cursor.y / rect.height) * 2 + 1;
-		var dataMap = new Map();
-		var dataType;
-		var keyAlias;
-		if (!event.ctrlKey) {
-			this._selected.forEach(function (item) {
-				if (item.type != 'InstancedMesh' || item.type != 'PlaneGeometry') {
-					var obj = {};
-					if (item._sapInstance != undefined) {
-						var val = item._sapInstance;
-						item._sapInstance["VB:s"] = "false";
-						that._adapter._sceneBuilder.updateHotInstance(val);
-					    dataType = item._sapInstance.voGroup.datasource; // VO group data source linked to a DataType by name
-						keyAlias = that._adapter._parser.getAttributeAlias(dataType, item._sapInstance.voGroup.keyAttributeName);
-						obj[keyAlias] = item._sapInstance.id;
-						obj["VB:s"] = "false";
-					} else if (item.userData.name == "ColladaBounds") {
-						if (item.userData._sapInstance["VB:s"] == "true") {
-							var instance = item.userData._sapInstance;
-							var selectionChanges = that._adapter._changeSelection(instance, "toggle", false);
-							that._adapter._sceneBuilder.updateSelection(selectionChanges.selected, selectionChanges.deselected);
-							dataType = item.userData._sapInstance.voGroup.datasource; // VO group data source linked to a DataType by name
-							keyAlias = that._adapter._parser.getAttributeAlias(dataType, item.userData._sapInstance.voGroup.keyAttributeName);
-							obj[keyAlias] = item.userData.id;
-							obj["VB:s"] = "false";
-						}
-					}
-					
-					var existingData = dataMap.get(dataType);
-					if (existingData != undefined ) {
-						// Check if there's already an entry for this dataType
-						var existingEntry = existingData.find(function (entry) {
-							return entry.name === dataType;
-						});
-
-						if (existingEntry) {
-							// If an entry exists for this dataType, push the new object to its E array if it's not already present
-							var existingObject = existingEntry.E.find(function (e) {
-								if (item._sapInstance != undefined)
-								  return e[keyAlias] ===  item._sapInstance.id
-								else
-								  return e[keyAlias] ===   item.userData.id;
-							});
-							if (!existingObject  && JSON.stringify(obj) !== '{}' ) {
-								// If the object doesn't exist, push it to the E array
-								existingEntry.E.push(obj);
-							}
-						}
-					} else {
-						// If no data exists for this dataType, create a new array and add the object
-						dataMap.set(dataType, [{
-							name: dataType,
-							E: [obj]
-						}]);
-					}
-				}
-			});
-			
-			if (dataMap != undefined) {
-				var payload = that._constructPayload(dataMap);
-				if (payload.Data.Merge.N.length > 0) {
-					this._adapter.fireSubmit({
-						data: JSON.stringify(payload)
-					});
-				}
-			}
-		}
-
-		this._selected.clear();
+		this._previousSelected = new Set(this._selected);
 	};
 
 	RectangleTracker.prototype._onPointerMove = function (event) {
@@ -239,102 +176,132 @@ sap.ui.define([
 		// 	this._cameraControls.enableRotate = false;
 		// }
 	}
-		RectangleTracker.prototype._onPointerUp = function (event) {
-			this._updateController(true);
-		if (!this._mouseDown) {
-			var that = this;
-			event.cursor = event.cursor || this._getXY(event);
-			var rect = this._viewport.getDomRef().getBoundingClientRect();
-			endPoint.x = (event.cursor.x / rect.width) * 2 - 1;
-			endPoint.y = -(event.cursor.y / rect.height) * 2 + 1;
-			endPoint.z = 0.5
-			var isSelected = this.selecting(_frustum);
-			var dataMap = new Map();
-			var dataType;
-			var keyAlias;
-			var obj = {};
-			if (isSelected.length > 0) {
-				for (var i = 0; i < isSelected.length; i++) {
-					this._selected.add(isSelected[i]);
+	RectangleTracker.prototype.buildEntry = function (item, selected, items) {
+		let dataType, keyAlias;
+		let obj = {};
+
+		if (item._sapInstance != undefined) {
+			const val = item._sapInstance;
+			item._sapInstance["VB:s"] = selected ? "true" : "false";
+			// maybe updateHotInstance only for selected?
+			this._adapter._sceneBuilder.updateHotInstance(val);
+			dataType = item._sapInstance.voGroup.datasource;
+			keyAlias = this._adapter._parser.getAttributeAlias(dataType, item._sapInstance.voGroup.keyAttributeName);
+			obj[keyAlias] = item._sapInstance.id;
+			obj["VB:s"] = selected ? "true" : "false";
+		} else if (item.userData.name === "ColladaBounds") {
+			if (selected === true) {
+				var id = item.userData.id;
+				var meshCount = item.userData.count;
+				var count = 0;
+				items.forEach(function (itemA) {
+					if (itemA.userData.id == id)
+						count++;
+				});
+				if (count == meshCount) {
+					var instance = item.userData._sapInstance;
+					var selectionChanges = this._adapter._changeSelection(instance, "select", false);
+					this._adapter._sceneBuilder.updateSelection(selectionChanges.selected, selectionChanges.deselected);
+					dataType = item.userData._sapInstance.voGroup.datasource; // VO group data source linked to a DataType by name
+					keyAlias = this._adapter._parser.getAttributeAlias(dataType, item.userData._sapInstance.voGroup.keyAttributeName);
+					obj[keyAlias] = item.userData.id;
+					obj["VB:s"] = "true";
 				}
-			}
-			this._selected.forEach(function (item) {
-			    obj = {};
-				if (item.type != 'InstancedMesh' || item.type != 'PlaneGeometry') {
-					if (item._sapInstance != undefined) {
-						var val = item._sapInstance;
-						item._sapInstance["VB:s"] = "true";
-						that._adapter._sceneBuilder.updateHotInstance(val);
-						dataType = item._sapInstance.voGroup.datasource; // VO group data source linked to a DataType by name
-						keyAlias = that._adapter._parser.getAttributeAlias(dataType, item._sapInstance.voGroup.keyAttributeName);
-						obj[keyAlias] = item._sapInstance.id;
-						obj["VB:s"] = "true";
-						// that._adapter._handleHover(val);	
-					} else if (item.userData.name == "ColladaBounds") {
-						var id = item.userData.id;
-						var meshCount = item.userData.count;
-						var count = 0;
-						that._selected.forEach(function (itemA) {
-							if (itemA.userData.id == id)
-								count++;
-						});
-						if (count == meshCount) {
-							var instance = item.userData._sapInstance;
-							var selectionChanges = that._adapter._changeSelection(instance, "select", false);
-							that._adapter._sceneBuilder.updateSelection(selectionChanges.selected, selectionChanges.deselected);
-							dataType = item.userData._sapInstance.voGroup.datasource; // VO group data source linked to a DataType by name
-							keyAlias = that._adapter._parser.getAttributeAlias(dataType, item.userData._sapInstance.voGroup.keyAttributeName);
-							obj[keyAlias] = item.userData.id;
-							obj["VB:s"] = "true";
-						}
-					}
-
-
-					var existingData = dataMap.get(dataType);
-					if (existingData != undefined) {
-						// Check if there's already an entry for this dataType
-						var existingEntry = existingData.find(function (entry) {
-							return entry.name === dataType;
-						});
-						if (existingEntry) {
-							// If an entry exists for this dataType, push the new object to its E array if it's not already present
-							var existingObject = existingEntry.E.find(function (e) {
-								if (item._sapInstance != undefined)
-									return e[keyAlias] === item._sapInstance.id
-								else
-									return e[keyAlias] === item.userData.id;
-							});
-							if (!existingObject && JSON.stringify(obj) !== '{}') {
-								// If the object doesn't exist, push it to the E array
-								existingEntry.E.push(obj);
-							}
-						}
-					} else {
-						// If no data exists for this dataType, create a new array and add the object
-						dataMap.set(dataType, [{
-							name: dataType,
-							E: [obj]
-						}]);
-					}
-			
+			} else {
+				if (item.userData._sapInstance["VB:s"] == "true") {
+					var instance = item.userData._sapInstance;
+					var selectionChanges = this._adapter._changeSelection(instance, "toggle", false);
+					this._adapter._sceneBuilder.updateSelection(selectionChanges.selected, selectionChanges.deselected);
+					// your ColladaBounds logic with selected/deselected
+					dataType = item.userData._sapInstance.voGroup.datasource;
+					keyAlias = this._adapter._parser.getAttributeAlias(dataType, item.userData._sapInstance.voGroup.keyAttributeName);
+					obj[keyAlias] = item.userData.id;
+					obj["VB:s"] = selected ? "true" : "false";
 				}
-			});
+			}
+		}
+
+		return { dataType, keyAlias, obj };
+	};
+
+	RectangleTracker.prototype.addToDataMap = function (dataMap, dataType, obj, keyAlias, item) {
+		if (!dataType || !obj) return;
+		const existingData = dataMap.get(dataType);
+		if (existingData) {
+			const existingEntry = existingData.find(entry => entry.name === dataType);
+			if (existingEntry) {
+				const existingObject = existingEntry.E.find(e => {
+					if (item._sapInstance != undefined)
+						return e[keyAlias] === item._sapInstance.id;
+					else
+						return e[keyAlias] === item.userData.id;
+				});
+				if (!existingObject && JSON.stringify(obj) !== '{}') existingEntry.E.push(obj);
+			}
+		} else {
+			dataMap.set(dataType, [{ name: dataType, E: [obj] }]);
+		}
+	};
+
+	RectangleTracker.prototype._onPointerUp = function (event) {
+		this._updateController(true);
+		if (this._mouseDown) return;
 
+		event.cursor = event.cursor || this._getXY(event);
+		var rect = this._viewport.getDomRef().getBoundingClientRect();
+		endPoint.x = (event.cursor.x / rect.width) * 2 - 1;
+		endPoint.y = -(event.cursor.y / rect.height) * 2 + 1;
+		endPoint.z = 0.5
+
+		const inside = this.selecting(_frustum); // all objects in rectangle
+		if (inside.length === 0) {
+			this._mouseDown = false;
+			this._dom.style.cursor = this._hovered ? "pointer" : "auto";
+			this.onSelectOver();
+			return;
 		}
-		if (dataMap != undefined) {
-			var payload = that._constructPayload(dataMap);
+		// build new selection set
+		const newSelected = new Set(inside);
+
+		// deselect items not in rectangle anymore
+		var deselected = [...this._previousSelected].filter(i => !newSelected.has(i));
+
+		// select items newly in rectangle
+		//const newlySelected = [...newSelected].filter(i => !this._previousSelected.has(i));
+
+		// update your internal set
+		this._selected.clear();
+		newSelected.forEach(i => this._selected.add(i));
+
+		// build a single dataMap for deselection + selection
+		const dataMap = new Map();
+
+		// handle deselection
+		deselected.forEach(item => {
+			const { dataType, keyAlias, obj } = this.buildEntry(item, false, deselected); // VB:s false
+			this.addToDataMap(dataMap, dataType, obj, keyAlias, item);
+		});
+
+		// handle selection
+		inside.forEach(item => {
+			const { dataType, keyAlias, obj } = this.buildEntry(item, true, inside); // VB:s true
+			this.addToDataMap(dataMap, dataType, obj, keyAlias, item);
+		});
+
+		if (dataMap.size > 0) {
+			const payload = this._constructPayload(dataMap);
 			if (payload.Data.Merge.N.length > 0) {
-				this._adapter.fireSubmit({
-					data: JSON.stringify(payload)
-				});
+				this._adapter.fireSubmit({ data: JSON.stringify(payload) });
 			}
 		}
+
 		this._mouseDown = false;
 		this._dom.style.cursor = this._hovered ? "pointer" : "auto";
 		this._updateController(true);
 		this.onSelectOver();
 	};
 
+
 	RectangleTracker.prototype._constructPayload = function (dataMap) {
 		var payload = {
 			version: "2.0",
@@ -420,6 +387,14 @@ sap.ui.define([
 		this.startPoint = startPoint || this.startPoint;
 		this.endPoint = endPoint || this.endPoint;
 		this.collection = [];
+		const dx = Math.abs(endPoint.x - startPoint.x);
+		const dy = Math.abs(endPoint.y - startPoint.y);
+
+		// if less than 2-3 pixels movement => treat as click, skip updateFrustum
+		if (dx < 0.002 && dy < 0.002) {
+			// 👉 handle as simple click (use raycaster for single object select)
+			return;
+		}
 		this.updateFrustum(this.startPoint, this.endPoint);
 		this.searchChildInFrustum(_frustum, this._scene);
 		this._scene.remove(this._planeMesh);
@@ -447,18 +422,20 @@ sap.ui.define([
 
 		if (this._camera.isPerspectiveCamera) {
 
-			_tmpPoint = startPoint;
-			_tmpPoint.x = Math.min(startPoint.x, endPoint.x);
-			_tmpPoint.y = Math.max(startPoint.y, endPoint.y);
-			endPoint.x = Math.max(startPoint.x, endPoint.x);
-			endPoint.y = Math.min(startPoint.y, endPoint.y);
+			// Normalize rectangle regardless of drag direction
+			var minX = Math.min(startPoint.x, endPoint.x);
+			var maxX = Math.max(startPoint.x, endPoint.x);
+			var minY = Math.min(startPoint.y, endPoint.y);
+			var maxY = Math.max(startPoint.y, endPoint.y);
 
-			_vecNear.setFromMatrixPosition(this._camera.matrixWorld);
-			_vecTopLeft.copy(_tmpPoint);
-			_vecTopRight.set(endPoint.x, _tmpPoint.y, 0);
-			_vecDownRight.copy(endPoint);
-			_vecDownLeft.set(_tmpPoint.x, endPoint.y, 0);
 
+			_vecNear.setFromMatrixPosition(this._camera.matrixWorld);
+			// Define corners in NDC (normalized device coordinates)
+			_vecTopLeft.set(minX, maxY, 0);
+			_vecTopRight.set(maxX, maxY, 0);
+			_vecDownRight.set(maxX, minY, 0);
+			_vecDownLeft.set(minX, minY, 0);
+			
 			_vecTopLeft.unproject(this._camera);
 			_vecTopRight.unproject(this._camera);
 			_vecDownRight.unproject(this._camera);
@@ -467,9 +444,12 @@ sap.ui.define([
 			_vectemp1.copy(_vecTopLeft).sub(_vecNear);
 			_vectemp2.copy(_vecTopRight).sub(_vecNear);
 			_vectemp3.copy(_vecDownRight).sub(_vecNear);
+			_vectemp4.copy(_vecDownLeft).sub(_vecNear)
+
 			_vectemp1.normalize();
 			_vectemp2.normalize();
 			_vectemp3.normalize();
+			_vectemp4.normalize();
 
 
 			_vectemp1.multiplyScalar(this.deep);
@@ -479,6 +459,7 @@ sap.ui.define([
 			_vectemp1.sub(_vecNear);
 			_vectemp2.sub(_vecNear);
 			_vectemp3.sub(_vecNear);
+			_vectemp4.sub(_vecNear);
 
 			var planes = _frustum.planes;
 
@@ -492,7 +473,7 @@ sap.ui.define([
 		}
 
 
-	}
+	};
 
 	RectangleTracker.prototype.searchChildInFrustum = function (frustum, object) {
 		var count = 0;

package/src/sap/ui/vbm/adapter3d/SceneBuilder.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.SceneBuilder
 	 */
 	var SceneBuilder = BaseObject.extend("sap.ui.vbm.adapter3d.SceneBuilder", /** @lends sap.ui.vbm.adapter3d.SceneBuilder.prototype */ {

package/src/sap/ui/vbm/adapter3d/VBIJSONParser.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @alias sap.ui.vbm.adapter3d.VBIJSONParser
 	 */
 	var VBIJSONParser = BaseObject.extend("sap.ui.vbm.adapter3d.VBIJSONParser", /** @lends sap.ui.vbm.adapter3d.VBIJSONParser.prototype */ {

package/src/sap/ui/vbm/library.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.vbm
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 * @public
 	 */
 
@@ -46,7 +46,7 @@ sap.ui.define([
 			"sap.ui.vbm.ClusterBase", "sap.ui.vbm.ClusterTree", "sap.ui.vbm.ClusterGrid", "sap.ui.vbm.ClusterDistance", "sap.ui.vbm.Heatmap",
 			"sap.ui.vbm.HeatPoint", "sap.ui.vbm.ClusterContainer", "sap.ui.vbm.Adapter", "sap.ui.vbm.Adapter3D"
 		],
-		version: "1.140.0"
+		version: "1.142.0"
 	});
 
 	sap.ui.loader.config({

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

@@ -163,7 +163,9 @@ sap.ui.define([
 				let markerCoordinates = marker.geometry.coordinates;
 				if (marker.geometry.type === 'Point') {
 					// create a DOM element for the marker (parent div)
-					const el = VectorUtils.createSpotElement(marker);
+					let createdSpot = VectorUtils.createSpotElement(marker, spotid);
+					const el = createdSpot.spotEl;
+					spotid = createdSpot.spotId;
 					if (marker.properties.Label) {
 						const child_e1 = VectorUtils.createMarkerLabel(marker.properties.Label, marker.properties.LabelBGColor);
 						el.appendChild(child_e1);
@@ -180,7 +182,7 @@ sap.ui.define([
 					let spot = new maplibregl.Marker({
 						element: el,
 						draggable: true,
-						offset: [0, -20]
+						anchor: 'bottom'
 					}).setLngLat(marker.geometry.coordinates)
 						.on('dragend', onDragEnd)
 						.addTo(map);
@@ -514,15 +516,21 @@ sap.ui.define([
 					}
 				} else if (marker.geometry.type == "LineString") {
 
-					const colorStr = marker.properties.LineColor; 
-					let textColor = '#000000'; // Default color
-
-					if (colorStr) {
-						const [r, g, b, a] = VectorUtils.parseRGBAString(colorStr);
-						textColor = VectorUtils.getContrastTextColor(r, g, b);
-					    marker.properties.labelHaloColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+					if (marker.properties.Label) {
+						const midpoint = getMidpoint(marker.geometry.coordinates);
+				
+						const routeLabelEl = VectorUtils.createRouteLabel(
+							marker.properties.Label,
+							marker.properties.LabelBGColor
+						);
+				
+						new maplibregl.Marker({
+							element: routeLabelEl,
+							anchor: 'left',   
+						})
+						.setLngLat(midpoint)
+						.addTo(map);
 					}
-					marker.properties.textColor = textColor;
 					const coords = marker.geometry.coordinates;
 					const startCoord = coords[0];  // First coordinate
 					const endCoord = coords[coords.length - 1];  // Last coordinate
@@ -621,29 +629,17 @@ sap.ui.define([
 				},
 				'filter': ['==', '$type', 'LineString']
 			});
-
-			map.addLayer({
-				id: 'line-labels',
-				type: 'symbol',
-				source: 'geojson-source',
-				layout: {
-					'symbol-placement': 'line-center',
-					'text-field': ['get', 'Label'],
-					'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
-					'text-size': 14,
-					'text-rotation-alignment': 'map',
-					'text-keep-upright': true
-				},
-                paint: {
-                    'text-color': ['get', 'lineLabelTextColor'], 
-                    'text-halo-color': ['get', 'labelHaloColor'], 
-                    'text-halo-width': 4,              
-                    'text-halo-blur': 0.8,
-                    'text-opacity': ['get', 'opacity']
-                },
-
-				filter: ['all', ['==', ['get', 'ShowLabel'], true]]
-			});
+			
+			function getMidpoint(coords) {
+				if (coords.length < 2) return coords[0]; 
+				
+				const start = coords[0];
+				const end = coords[coords.length - 1];
+				const midLng = (start[0] + end[0]) / 2;
+				const midLat = (start[1] + end[1]) / 2;
+				
+				return [midLng, midLat];
+			}
 
 			// Create a new FeatureCollection for the points
 			const pointGeoJSON = {
@@ -933,7 +929,7 @@ sap.ui.define([
 				PayloadGenerator.onMapContextMenu(coords, currentZoom, currentCenter, screenX, screenY);
 			}
 		};
-
+		
 		var that = this;
 		map.on('idle', () => {
 			const container = map.getContainer();

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

@@ -12,7 +12,7 @@ sap.ui.define([
          *
          * @private
          * @author SAP SE
-         * @version 1.140.0
+         * @version 1.142.0
          * @alias sap.ui.vbm.vector.PayloadGenerator
          */
     var adapter = {};

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

@@ -12,7 +12,7 @@ sap.ui.define([
          *
          * @private
          * @author SAP SE
-         * @version 1.140.0
+         * @version 1.142.0
          * @alias sap.ui.vbm.vector.RectangularSelection
          */
 

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

@@ -223,12 +223,10 @@ sap.ui.define([
                         "Image": currSpot.I ? currSpot.I : "",
                         "base64": resources.find(resource => resource.name === currSpot.I)?.value || defaultbase64,
                         "Key": currSpot.K ? currSpot.K : "",
-                        "Scale": currSpot.S ? currSpot.S : "",
+                        "Scale": currSpot.S ? currSpot.S : "1;1;1",
                         "DisplayRole": currSpot.R ? currSpot.R : "",
                         "DragData": currSpot.DD ? currSpot.DD : "",
                         "Alignment": currSpot.AL ? currSpot.AL : "",
-                        "height": resources.find(resource => resource.name === currSpot.I) ? '45px' : '30px',
-                        "width": resources.find(resource => resource.name === currSpot.I) ? '45px' : '24px',
                         "menu": menus,
                         "type": "{00100000-2012-0004-B001-64592B8DB964}"
                     };
@@ -273,15 +271,12 @@ sap.ui.define([
                     "Image": currSpot.I ? currSpot.I : "",
                     "base64": resources.find(resource => resource.name === currSpot.I)?.value || defaultbase64,
                     "Key": currSpot.K ? currSpot.K : "",
-                    "Scale": currSpot.S ? currSpot.S : "",
+                    "Scale": currSpot.S ? currSpot.S : "1;1;1",
                     "DisplayRole": currSpot.R ? currSpot.R : "",
                     "DragData": currSpot.DD ? currSpot.DD : "",
                     "Alignment": currSpot.AL ? currSpot.AL : "",
-                    "height": resources.find(resource => resource.name === currSpot.I) ? '45px' : '30px',
-                    "width": resources.find(resource => resource.name === currSpot.I) ? '45px' : '24px',
                     "type": "{00100000-2012-0004-B001-64592B8DB964}"
-
-                };
+                 };
 
                 let coord_array = currSpot.A.split(";");
 
@@ -361,7 +356,6 @@ sap.ui.define([
                         routeProperties["opacity"] = opacity;
                         }
 
-                    //itearate through the route points and add the coordinates to the GeoJSON
                     let coord_array = currRoute.H.split(";");
                     let coord_collection = [];
 
@@ -369,6 +363,7 @@ sap.ui.define([
                         coord_collection.push([Number(coord_array[i]), Number(coord_array[i + 1])])
                     }
 
+
                     let geometry = {
                         "coordinates": coord_collection,
                         "type": "LineString"
@@ -747,12 +742,27 @@ sap.ui.define([
                             // code block
                         }
                     }
-
                 }
             }
         }
 
-
+        featureCollection = Object.values(
+            featureCollection.reduce((acc, f) => {
+                const key = f.properties?.Key;
+                if (!key) return acc; // skip if no key
+
+                if (!acc[key]) {
+                    acc[key] = { ...f };
+                } else {
+                    // Merge properties if duplicate found
+                    acc[key].properties = {
+                        ...acc[key].properties,
+                        ...f.properties
+                    };
+                }
+                return acc;
+            }, {})
+        );
         if (obj.SAPVB.Data.Remove) {
 
             let del = obj.SAPVB.Data.Remove;
@@ -814,6 +824,13 @@ sap.ui.define([
             }
         }
 
+        if (obj.SAPVB.Data.Set && (typeof obj.SAPVB.Data.Set === 'object') && !(jQuery.isEmptyObject(obj.SAPVB.Data.Set))) {
+            if (!Array.isArray(obj.SAPVB.Data.Set) && !(obj.SAPVB.Data.Set.name) && !(obj.SAPVB.Data.Set.type)) {
+                //Full Update - Replace complete Data Section
+                featureCollection.splice(0, featureCollection.length);
+            }
+        }
+
     }
 
     // Get the datatypes 

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

@@ -34,18 +34,27 @@ 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;
@@ -252,8 +261,43 @@ sap.ui.define([
         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);