@sapui5/sap.ui.vk 1.139.0 → 1.141.0

package/src/sap/ui/vk/svg/Ellipse.js

@@ -59,6 +59,10 @@ sap.ui.define([
 			parametric.major = this.rx;
 			parametric.minor = this.ry;
 		}
+		if (this.cx || this.cy) {
+			parametric.cx = this.cx;
+			parametric.cy = this.cy;
+		}
 		return parametric;
 	};
 

package/src/sap/ui/vk/svg/HotspotHelper.js

@@ -13,6 +13,7 @@ sap.ui.define([
 	"./Rectangle",
 	"./Path",
 	"sap/base/assert",
+	"sap/base/Log",
 	"sap/base/util/uid",
 	"../TransformationMatrix",
 	"../thirdparty/imagetracer",
@@ -23,6 +24,7 @@ sap.ui.define([
 	Rectangle,
 	Path,
 	assert,
+	Log,
 	uid,
 	TransformationMatrix,
 	ImageTracer,
@@ -75,7 +77,7 @@ sap.ui.define([
 	 * They had references to other geometry nodes via joint nodes.
 	 *
 	 * This method creates copies of joint nodes with geometries and adds the copies as child nodes
-	 * of the hotspot.
+	 * to the hotspot.
 	 *
 	 * A better solution would be updating the data in the backend service.
 	 *
@@ -83,24 +85,16 @@ sap.ui.define([
 	 * @private
 	 */
 	HotspotHelper.prototype.updateHotspot = function(hotspotNode) {
-		// TODO: The original comment for the following loop said "remove all previous joint nodes".
-		// It's unclear what "previous" means in this context as the children of hotspotNode are
-		// created by this method.
-		var i = hotspotNode.children.length;
-		while (i-- > 0) {
-			var child = hotspotNode.children[i];
-			if (child.userData.sourceJointNode !== undefined) {
-				hotspotNode.remove(child);
-			}
-		}
+		const parentMatrixWorldInv = Element._invertMatrix(hotspotNode._matrixWorld());
 
-		var parentMatrixWorldInv = Element._invertMatrix(hotspotNode._matrixWorld());
 		function addNodeGeometry(jointNode) {
 			jointNode.traverse(function(child) {
 				if (child.nodeContentType === NodeContentType.Hotspot || child.parent === hotspotNode) {
 					return; // ignore this joint node because it is already embedded in the hotspot
 				}
-				var clone;
+
+				let clone;
+
 				if (child.type === "Image") {
 					clone = new Rectangle({
 						x: child.x,
@@ -110,8 +104,11 @@ sap.ui.define([
 					});
 				} else if (child.type !== "Group") {
 					clone = new child.constructor().copy(child, false);
+				} else {
+					Log.warning(`Unsupported child node type "${child.type}" is tried to be embedded in hotspot node "${hotspotNode.name}"`);
 				}
-				if (clone) {
+
+				if (clone != null) {
 					clone.matrix = Element._multiplyMatrices(parentMatrixWorldInv, child._matrixWorld());
 					clone.userData.sourceJointNode = child;
 					hotspotNode.add(clone);
@@ -119,14 +116,26 @@ sap.ui.define([
 			});
 		}
 
+		// First, remove all child nodes added from joint nodes in the previous call to this method.
+		for (let i = hotspotNode.children.length - 1; i >= 0; --i) {
+			const child = hotspotNode.children[i];
+
+			if (child.userData.sourceJointNode !== undefined) {
+				hotspotNode.remove(child);
+			}
+		}
+
+
+		// Then, add copies of joint nodes as child nodes to `hotspotNode`.
 		const jointNodes = hotspotNode.userData.jointNodes;
-		if (jointNodes) {
-			jointNodes.forEach(function(jointNode) {
+
+		if (jointNodes != null) {
+			for (const jointNode of jointNodes) {
 				// skip joint nodes already embedded in the hotspot
 				if (jointNode.nodeContentType !== NodeContentType.Hotspot && jointNode.parent !== hotspotNode) {
 					addNodeGeometry(jointNode);
 				}
-			});
+			}
 		}
 
 		hotspotNode._initAsHotspot();
@@ -583,6 +592,10 @@ sap.ui.define([
 				nodeInfo.contentType = "HOTSPOT";
 			}
 
+			if (element.nodeContentType === NodeContentType.DynamicContent) {
+				nodeInfo.contentType = "DYNAMICCONTENT";
+			}
+
 			if (element.userData.duplicatedFrom) {
 				nodeInfo.duplicatedFrom = element.userData.duplicatedFrom;
 				delete element.userData.duplicatedFrom;

package/src/sap/ui/vk/svg/MiniMap.js

@@ -72,6 +72,7 @@ sap.ui.define([
 
 		this._sceneBBox = null; // [x, y, width, height]
 		this._width = this._height = 0;
+		this._lockPosition = { x: -16, y: 16 };
 
 		this._canvas = document.createElement("canvas");
 		this._canvas.classList.add("sapUiVkMiniMapViewCanvas");
@@ -150,7 +151,61 @@ sap.ui.define([
 	MiniMap.prototype.ontouchstart = function(event) {
 		const viewport = Element.getElementById(this.getViewport());
 		const sceneBBox = this._sceneBBox;
-		if (!viewport || !sceneBBox) {
+		const dialogDomRef = this.getParent()?.getDomRef();
+		if (!viewport || !sceneBBox || !dialogDomRef) {
+			return;
+		}
+
+		if (event.button === 2) { // dragging the minimap with right mouse button
+			const viewportRect = viewport.getDomRef()?.getBoundingClientRect();
+			const miniMapDialogRect = dialogDomRef.getBoundingClientRect();
+			if (!viewportRect || !miniMapDialogRect) {
+				return;
+			}
+			const dragStart = {
+				x: event.pageX,
+				y: event.pageY,
+				elementX: parseInt(dialogDomRef.style.left, 10) || 0,
+				elementY: parseInt(dialogDomRef.style.top, 10) || 0
+			};
+
+			let onMouseUp;
+			const onMouseMove = (event) => {
+				if (event.buttons !== 2) {
+					onMouseUp();
+					return;
+				}
+				let x = dragStart.elementX + event.pageX - dragStart.x;
+				let y = dragStart.elementY + event.pageY - dragStart.y;
+				// clip position to be inside the viewport
+				x = Math.min(Math.max(x, viewportRect.x), viewportRect.x + viewportRect.width - miniMapDialogRect.width - 1);
+				y = Math.min(Math.max(y, viewportRect.y), viewportRect.y + viewportRect.height - miniMapDialogRect.height - 1);
+
+				dialogDomRef.style.left = x + "px";
+				dialogDomRef.style.top = y + "px";
+
+				const left = x - viewportRect.x;
+				const top = y - viewportRect.y;
+				const right = viewportRect.x + viewportRect.width - (x + miniMapDialogRect.width);
+				const bottom = viewportRect.y + viewportRect.height - (y + miniMapDialogRect.height);
+
+				this._lockPosition.x = left < right ? left : -right;
+				this._lockPosition.y = top < bottom ? top : -bottom;
+
+				event.setMarked();
+				event.preventDefault();
+			};
+
+			// ontouchmove and ontouchend are not fired when the touch is outside the MiniMap, so we have to use document events for dragging
+			const $document = jQuery(document);
+			onMouseUp = (event) => {
+				$document.off("mousemove", onMouseMove);
+				$document.off("mouseup", onMouseUp);
+				dialogDomRef.style.cursor = null;
+			};
+			$document.on("mousemove", onMouseMove);
+			$document.on("mouseup", onMouseUp);
+			dialogDomRef.style.cursor = "grab";
 			return;
 		}
 
@@ -178,10 +233,17 @@ sap.ui.define([
 		const onMouseUp = (event) => {
 			$document.off("mousemove", onMouseMove);
 			$document.off("mouseup", onMouseUp);
+			dialogDomRef.style.cursor = null;
 			viewport.endGesture();
 		};
 		$document.on("mousemove", onMouseMove);
 		$document.on("mouseup", onMouseUp);
+		dialogDomRef.style.cursor = "crosshair";
+	};
+
+	MiniMap.prototype.oncontextmenu = function(event) {
+		event.preventDefault();
+		event.stopPropagation();
 	};
 
 	MiniMap.prototype._onContentUpdate = function() {

package/src/sap/ui/vk/svg/NodeHierarchy.js

@@ -55,7 +55,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.NodeHierarchy
 	 * @alias sap.ui.vk.svg.NodeHierarchy
 	 */
@@ -397,6 +397,22 @@ sap.ui.define([
 		return nodes;
 	};
 
+	/**
+	 * Returns a list of dynamic content node references.
+	 *
+	 * @returns {any[]} A list of dynamic content node references.
+	 * @public
+	 */
+	NodeHierarchy.prototype.getDynamicContentNodeRefs = function() {
+		var nodes = [];
+		this._scene.getRootElement().traverse(function(node) {
+			if (node._vkGetNodeContentType() === NodeContentType.DynamicContent) {
+				nodes.push(node);
+			}
+		});
+		return nodes;
+	};
+
 	NodeHierarchy.prototype.attachChanged = function(data, func, listener) {
 		return this.attachEvent("changed", data, func, listener);
 	};

package/src/sap/ui/vk/svg/NodeProxy.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.NodeProxy
 	 * @alias sap.ui.vk.svg.NodeProxy
 	 */

package/src/sap/ui/vk/svg/OrthographicCamera.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.OrthographicCamera
 	 * @alias sap.ui.vk.svg.OrthographicCamera
 	 * @since 1.80.0

package/src/sap/ui/vk/svg/Scene.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.Scene
 	 * @alias sap.ui.vk.svg.Scene
 	 */

package/src/sap/ui/vk/svg/SceneBuilder.js

@@ -66,7 +66,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 */
 	var SceneBuilder = function(rootNode, contentResource, resolve, reject) {
 		this._rootNode = rootNode;
@@ -122,14 +122,37 @@ sap.ui.define([
 	 */
 	SceneBuilder.prototype.setScene = function(info) {
 		this._yIndex = 1; // VDS4 file geometry data
-		this._rootNode.matrix[3] = info.upAxis === 2 ? -1 : 1; // (0 = +X, 1 = -X, 2 = +Y, 3 = -Y, 4 = +Z, 5 = -Z)
-		var camera = this._cameras.get(info.cameraId);
+		this._rootNode.matrix[3] = info.upAxis === 2 || info.upAxis === 4 ? -1 : 1; // (0 = +X, 1 = -X, 2 = +Y, 3 = -Y, 4 = +Z, 5 = -Z)
+		const camera = this._cameras.get(info.cameraId);
+		const outputSettings = info.outputSettings;
+		if (outputSettings && camera) {
+			// update line width in materials if coordinate space is in device/paper units
+			const outputDPI = 72; // ignore outputSettings.dpi as VEA ignores DPI setting and always uses 72 DPI
+			const mmToInch = 1 / 25.4; // 1 inch = 25.4 mm
+			const pointToPixel = 4 / 3; // 1 inch = 72 points(common for older screens) = 96 pixels(standard web displays), so 1 point = 96 / 72 pixels = 4 / 3 pixels
+			const mmToPixels = mmToInch * outputDPI * pointToPixel; // convert mm to pixels (mm -> inches -> points -> pixels)
+			const outputSize = Math.min(outputSettings.width, outputSettings.height) * mmToPixels;
+
+			this._materialMap.forEach(function(material) {
+				if (material.lineStyle.widthCoordinateSpace === 4) { // sap::ve::core::Material::CoordinateSpace::Device (device/paper units)
+					if (!info.showPaperSpace) {
+						// this mode has a weird behavior in VE Author, the line thickness is measured in weird units that are converted
+						// to pixels (doesn't depend on the zoom factor), but it depends on the viewport size
+						material.lineWidth = material.lineStyle.width * 1024 / outputSize; // 1024 is a medium viewport size in pixels
+						material.lineStyle.widthCoordinateSpace = 0; // convert to screen space
+					}
+					// material.lineWidth = material.lineStyle.width / (outputSize * camera._initialZoom);
+				}
+			});
+		}
+
 		Log.info("setScene", JSON.stringify(info), camera);
 		this._resolve?.({
 			node: this._rootNode,
-			camera: camera,
+			camera,
 			backgroundTopColor: info.backgroundTopColor,
 			backgroundBottomColor: info.backgroundBottomColor,
+			outputSettings,
 			contentResource: this._contentResource,
 			builder: this
 		});
@@ -691,6 +714,7 @@ sap.ui.define([
 	 * @param {any} nodeInfo The node information object containing the following properties <br/>
 	 *							<code>sid</code>: String. The id of node.
 	 * 							<code>parametricId</code>: String. The id of object's parametric representation.
+	 * 							<code>dynamicContentId</code>: String. The id of object's dynamic content representation.
 	 * 							<code>name</code>: String. The name of the node. Optional.<br/>
 	 * 							<code>visible</code>: Boolean. True if the node is visible. Default true. Optional<br/>
 	 * 							<code>visualisable</code>: Boolean. False if the node is skipped. Default true. Optional<br/>
@@ -737,12 +761,14 @@ sap.ui.define([
 
 		if (nodeInfo.parametricId) {
 			userData.parametricId = nodeInfo.parametricId;
+		} else if (nodeInfo.dynamicContentId) {
+			userData.dynamicContentId = nodeInfo.dynamicContentId;
 		} else if (nodeInfo.meshId) {
 			this._setMeshNode(node, nodeInfo.meshId);
 		}
 
 		userData.treeNode = nodeInfo;
-		node.setVisible(1, nodeInfo.visible ? nodeInfo.visible : true);
+		node.setVisible(1, nodeInfo.visible ?? true);
 
 		if (nodeInfo.visualisable === false) {
 			userData.skipIt = true; // Don't display this node in scene tree
@@ -778,6 +804,8 @@ sap.ui.define([
 
 		if (nodeInfo.contentType === "HOTSPOT") {
 			node._vkSetNodeContentType(NodeContentType.Hotspot);
+		} else if (nodeInfo.contentType === "DYNAMIC_CONTENT") {
+			node._vkSetNodeContentType(NodeContentType.DynamicContent);
 		} else if (nodeInfo.contentType === "ANNOTATION") {
 			node._vkSetNodeContentType(NodeContentType.Annotation);
 		} else if (nodeInfo.contentType === "SVG") {
@@ -994,6 +1022,28 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Set dynamic content (represented as "parametric rectange") to scene node
+	 * @param {string} nodeId Identifier of the node which will have dynamic content assigned
+	 * @param {any} dynamicContent The dynamic content object
+	 * @param {any} sceneId The scene identifier
+	 * @public
+	 */
+	SceneBuilder.prototype.setDynamicContent = function(nodeId, dynamicContent, sceneId) {
+		this._resetCurrentScene(sceneId);
+		const node = this._nodes.get(nodeId);
+		if (node) {
+			node.userData.templateId = dynamicContent.templateId;
+			const parametricContent = {
+				type: "rectangle",
+				width: 1,
+				height: 1
+			};
+			const rectangle = this._createObject(parametricContent, node);
+			rectangle.fill = rectangle.stroke = [0, 0, 0, 0];
+		}
+	};
+
 	function polarToCartesian(cx, cy, rx, ry, angle) {
 		return [cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)];
 	}
@@ -1083,6 +1133,8 @@ sap.ui.define([
 			}
 			node.add(shape);
 		}
+
+		return shape;
 	};
 
 	SceneBuilder.prototype.createImageNote = function(annotation, sceneId) {

package/src/sap/ui/vk/svg/Text.js

@@ -17,6 +17,11 @@ sap.ui.define([
 ) {
 	"use strict";
 
+	// Parametric text content types (sap::ve::core::ParametricType)
+	const ptParametricTextData = 10;
+	const ptParametricTextSpan = 11;
+	const ptParametricTextPath = 12;
+
 	var Text = function(parameters) {
 		parameters = parameters || {};
 		Element.call(this, parameters);
@@ -28,12 +33,11 @@ sap.ui.define([
 		this.style.size = this.style.size || "1em";
 		this.x = parameters.x || 0;
 		this.y = parameters.y || 0;
-		if (parameters.dx) {
-			this.dx = parameters.dx;
-		}
-		if (parameters.dy) {
-			this.dy = parameters.dy;
-		}
+		["dx", "dy", "textAnchor", "alignmentBaseline", "pivot", "anchor"].forEach((prop) => {
+			if (parameters[prop] != null) {
+				this[prop] = parameters[prop];
+			}
+		});
 
 		// If not specified then set default colours for text objects
 		this.fillStyle = parameters.fillStyle || { colour: [0, 0, 0, 1] };
@@ -139,6 +143,12 @@ sap.ui.define([
 		if (this.dy) {
 			setAttributeFunc("dy", this.dy);
 		}
+		if (this.textAnchor) {
+			setAttributeFunc("text-anchor", this.textAnchor);
+		}
+		if (this.alignmentBaseline) {
+			setAttributeFunc("alignment-baseline", this.alignmentBaseline);
+		}
 		setStyle(this.style, setAttributeFunc, true);
 	};
 
@@ -165,12 +175,12 @@ sap.ui.define([
 		for (var i = 0, l = content.length; i < l; i++) {
 			var c = content[i];
 			switch (c.type) {
-				case 10: // ptParametricTextData
+				case ptParametricTextData:
 				case undefined:
 				case "text":
 					rm.text(c.text);
 					break;
-				case 11: // ptParametricTextSpan
+				case ptParametricTextSpan:
 				case "span":
 					rm.openStart("tspan");
 					setContentAttributes(c, setAttributeFunc);
@@ -184,7 +194,7 @@ sap.ui.define([
 					renderContent(c.content, rm);
 					rm.close("tspan");
 					break;
-				case 12: // ptParametricTextPath
+				case ptParametricTextPath:
 				case "path":
 					rm.openStart("textPath");
 					setContentAttributes(c, setAttributeFunc);
@@ -232,12 +242,12 @@ sap.ui.define([
 		for (var i = 0, l = content.length; i < l; i++) {
 			var c = content[i];
 			switch (c.type) {
-				case 10: // ptParametricTextData
+				case ptParametricTextData:
 				case undefined:
 				case "text":
 					parentDomRef.append(c.text);
 					break;
-				case 11: // ptParametricTextSpan
+				case ptParametricTextSpan:
 				case "span":
 					domRef = document.createElementNS(Element._svgNamespace, "tspan");
 					setAttributeFunc = domRef.setAttribute.bind(domRef);
@@ -251,7 +261,7 @@ sap.ui.define([
 					createContent(c.content, domRef);
 					parentDomRef.append(domRef);
 					break;
-				case 12: // ptParametricTextPath
+				case ptParametricTextPath:
 				case "path":
 					domRef = document.createElementNS(Element._svgNamespace, "textPath");
 					setAttributeFunc = domRef.setAttribute.bind(domRef);
@@ -289,17 +299,21 @@ sap.ui.define([
 	};
 
 	function toPixels(size) {
+		let value;
 		switch (typeof size) {
-			case "number": return size;
+			case "number": value = size; break;
 			case "string":
 				if (size.endsWith("pt")) {
-					return parseFloat(size) * 4 / 3;
+					value = parseFloat(size) * 4 / 3;
 				} else if (size.endsWith("em")) {
-					return parseFloat(size) * 16;
+					value = parseFloat(size) * 16;
+				} else {
+					value = parseFloat(size);
 				}
-				return parseFloat(size);
-			default: return 0;
+				break;
+			default: value = 0; break;
 		}
+		return typeof value === "number" && isFinite(value) ? value : 0;
 	}
 
 	function getContent(p) {
@@ -308,12 +322,12 @@ sap.ui.define([
 			var node = p.childNodes[i];
 			if (node.data !== undefined) {
 				content.push({
-					type: 10,
+					type: ptParametricTextData,
 					text: node.data
 				});
 			} else if (node.childNodes.length > 0) {
 				var tspan = {
-					type: 11,
+					type: ptParametricTextSpan,
 					content: getContent(node)
 				};
 				var nodeStyle = node.style;
@@ -363,6 +377,7 @@ sap.ui.define([
 	}
 
 	Text.prototype.setHtmlTextContent = function(htmlText) {
+		// console.log("setHtmlTextContent", htmlText);
 		var htmlElem = document.createElement("html");
 		htmlElem.innerHTML = htmlText;
 		var content = [];
@@ -379,8 +394,8 @@ sap.ui.define([
 					y += i > 0 ? maxFontSize : 0;
 				}
 				content.push({
-					type: 11,
-					x: (node.style.paddingLeft || 0) + this.x,
+					type: ptParametricTextSpan,
+					x: toPixels(node.style.paddingLeft) + this.x,
 					y: y,
 					content: getContent(node)
 				});
@@ -389,7 +404,7 @@ sap.ui.define([
 				}
 			} else if (node.data) {// text node
 				content.push({
-					type: 10,
+					type: ptParametricTextData,
 					text: node.data
 				});
 			}
@@ -406,14 +421,14 @@ sap.ui.define([
 		for (var i = 0; i < content.length; i++) {
 			var c = content[i];
 			switch (c.type) {
-				case 10:
+				case ptParametricTextData:
 				case undefined:
 				case "text":
 					value += c.text;
 					break;
-				case 11:
+				case ptParametricTextSpan:
 				case "span":
-				case 12:
+				case ptParametricTextPath:
 				case "path":
 					var style = c.style;
 					if (!inlineContent || c.y !== undefined || c.dy !== undefined) {
@@ -485,12 +500,12 @@ sap.ui.define([
 			switch (c.type) {
 				case undefined:
 				case "text":
-					content.push({ type: 10, text: c.text });
+					content.push({ type: ptParametricTextData, text: c.text });
 					break;
 				default:
 				case "span":
 				case "path":
-					var tspan = { type: c.type === "path" ? 12 : 11 };
+					var tspan = { type: c.type === "path" ? ptParametricTextPath : ptParametricTextSpan };
 					if (c.x !== undefined) {
 						tspan.x = c.x;
 					}
@@ -524,13 +539,13 @@ sap.ui.define([
 		for (var i = 0; i < content.length; i++) {
 			var c = content[i];
 			switch (c.type) {
-				case 10:
+				case ptParametricTextData:
 				case undefined:
 					children.push({ text: c.text });
 					break;
-				case 11:
+				case ptParametricTextSpan:
 				case "span":
-				case 12:
+				case ptParametricTextPath:
 				case "path":
 					var span = { type: "span" };
 					if (c.x !== undefined) {
@@ -620,5 +635,32 @@ sap.ui.define([
 		return this;
 	};
 
+	Element.prototype.setCustomText = function(options) {
+		if (options == null || (options.text == null && options.htmlText == null)) {
+			this.customText = null;
+			return this;
+		}
+
+		const customText = this.customText = new Text({
+			text: options.text,
+			pivot: options.pivot ?? [0.5, 0.5],
+			anchor: options.anchor ?? [0.5, 0.5],
+			style: {
+				size: options.size ?? "0px",
+				fontFace: options.fontFamily ?? options.fontFace ?? "Arial",
+				fontStyle: options.fontStyle,
+				fontWeight: options.fontWeight,
+				textDecoration: options.textDecoration,
+				fill: options.fill ?? "black"
+			}
+		});
+		if (options.htmlText) {
+			customText.setHtmlTextContent(options.htmlText);
+		}
+		customText.userData.customText = true; // mark the custom text element for special hit test handling
+		return this;
+	};
+
+
 	return Text;
 });

package/src/sap/ui/vk/svg/ViewStateManager.js

@@ -49,7 +49,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] Initial settings for the new ViewStateManager object.
 	 * @public
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.ViewStateManagerBase
 	 * @alias sap.ui.vk.svg.ViewStateManager
 	 * @since 1.80.0
@@ -442,7 +442,7 @@ sap.ui.define([
 		var selected = parentSelected || this._selectedNodes.has(nodeRef);
 
 		nodeRef.setSelected(this._mask, selected, this._highlightColorABGR);
-		if (nodeRef.nodeContentType !== NodeContentType.Hotspot) {// recursively update highlight color for regular nodes
+		if (nodeRef.nodeContentType !== NodeContentType.Hotspot && nodeRef.nodeContentType !== NodeContentType.DynamicContent) {// recursively update highlight color for regular nodes
 			var children = nodeRef.children;
 			for (var i = 0, l = children.length; i < l; i++) {
 				this._updateHighlightColor(children[i], selected);