@sapui5/sap.ui.vk 1.140.0 → 1.141.0

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

@@ -66,7 +66,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.140.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.140.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);

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

@@ -76,23 +76,13 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.ViewportBase
 	 * @alias sap.ui.vk.svg.Viewport
 	 */
 	var Viewport = ViewportBase.extend("sap.ui.vk.svg.Viewport", /** @lends sap.ui.vk.svg.Viewport.prototype  */ {
 		metadata: {
 			library: "sap.ui.vk",
-			// properties: {
-			// 	zoomInLimit: {
-			// 		type: "float",
-			// 		defaultValue: 500
-			// 	},
-			// 	zoomOutLimit: {
-			// 		type: "float",
-			// 		defaultValue: 0.25
-			// 	}
-			// },
 			aggregations: {
 				miniMap: {
 					type: "sap.m.Dialog",
@@ -245,9 +235,11 @@ sap.ui.define([
 		miniMapDialog.attachBeforeOpen(function() { miniMapDialog.oPopup.setModal(false); }); // dialog should not be modal
 		miniMapDialog._calcPosition = () => {
 			const rect = this.getDomRef()?.getBoundingClientRect() ?? { top: 0, right: 0 }; // viewport's bounding rect
+			const miniMapRect = miniMapDialog.getDomRef()?.getBoundingClientRect() ?? { width: 0, height: 0 }; // mini map dialog's bounding rect
+			const lockPos = miniMap._lockPosition;
 			return {
-				top: rect.top + 16 + "px",
-				left: rect.right - miniMap._width - 16 - 4 + "px"
+				top: (lockPos.y >= 0 ? rect.top + lockPos.y : Math.max(rect.bottom + lockPos.y - miniMapRect.height, rect.top)) + "px",
+				left: (lockPos.x >= 0 ? rect.left + lockPos.x : Math.max(rect.right + lockPos.x - miniMapRect.width, rect.left)) + "px"
 			};
 		};
 		miniMap.attachSizeChanged((event) => {
@@ -309,6 +301,97 @@ sap.ui.define([
 		}
 	};
 
+	Viewport.prototype._updateCustomText = function() {
+		const root = this._scene.getRootElement();
+
+		// collect all font sizes in the scene
+		const fontSizes = [];
+		root.traverse(function(node) {
+			if (node.type === "Text") {
+				const fontSizeCSS = node.style.size;
+				const fontSize = parseFloat(fontSizeCSS);
+				if (fontSize > 0) {
+					let unitScale = 1;
+					if (typeof fontSizeCSS === "string") {
+						if (fontSizeCSS.endsWith("em")) {
+							unitScale = 16; // assuming 1em = 16px
+						} else if (fontSizeCSS.endsWith("pt")) {
+							unitScale = 1.333; // assuming 1pt = 1.333px
+						}
+					}
+
+					const m = node._matrixWorld();
+					fontSizes.push(fontSize * unitScale * Math.sqrt(m[2] * m[2] + m[3] * m[3]));
+				}
+			}
+		});
+
+		let fontSize;
+		if (fontSizes.length > 0) {// take median font size
+			fontSizes.sort();
+			fontSize = fontSizes[fontSizes.length >> 1];
+		} else {
+			const bbox = root.domRef.getBBox();
+			fontSize = Math.max(bbox.width, bbox.height) * 0.01;
+		}
+		fontSize = Math.round(fontSize * 100) / 100; // round to 2 decimal places
+
+		root.traverse(function(node) {
+			if (node.customText?.style.size === "0px") { // "0px" is a special case, it means "default font size"
+				node.customText.style.size = fontSize + "px";
+			}
+		});
+	};
+
+	Viewport.prototype._updateCustomTextFilters = function() {
+		const domRef = this._scene?.getRootElement()?.domRef;
+		if (domRef) {
+			const blurStdDeviation = this.getHotspotCustomTextHaloWidth();
+			const dilateRadius = blurStdDeviation * 0.1; // 10% of blur std deviation
+			const outlineWidth = this.getHotspotCustomTextOutlineWidth();
+			const expand = Math.max(blurStdDeviation + dilateRadius, outlineWidth * 2);
+			const color = cssColorToColor(this.getHotspotCustomTextOutlineColor());
+			for (const filter of domRef.parentNode.getElementsByTagName("filter")) {
+				if (filter.id.endsWith("-custom-text")) {
+					if (sap.ui.Device.browser.firefox) {
+						filter.setAttribute("x", "-25%");
+						filter.setAttribute("y", "-100%");
+						filter.setAttribute("width", "150%");
+						filter.setAttribute("height", "300%");
+					} else {
+						filter.setAttribute("x", -expand + "px");
+						filter.setAttribute("y", -expand + "px");
+						filter.setAttribute("width", `calc(100% + ${expand * 2}px)`);
+						filter.setAttribute("height", `calc(100% + ${expand * 2}px)`);
+					}
+					filter.childNodes[0].setAttribute("radius", dilateRadius); // set morphology dilate radius
+					filter.childNodes[2].setAttribute("stdDeviation", blurStdDeviation); // set gaussian blur std deviation
+					filter.childNodes[3].setAttribute("radius", outlineWidth); // set morphology dilate radius
+					filter.childNodes[5].setAttribute("stdDeviation", outlineWidth); // set gaussian blur std deviation
+					filter.childNodes[4].setAttribute("values", `0 0 0 0 ${color.red / 255}, 0 0 0 0 ${color.green / 255}, 0 0 0 0 ${color.blue / 255}, 0 0 0 ${color.alpha} 0`);
+				}
+			}
+		}
+	};
+
+	Viewport.prototype.setHotspotCustomTextOutlineColor = function(cssColor) {
+		this.setProperty("hotspotCustomTextOutlineColor", cssColor, true);
+		this._updateCustomTextFilters();
+		return this;
+	};
+
+	Viewport.prototype.setHotspotCustomTextOutlineWidth = function(width) {
+		this.setProperty("hotspotCustomTextOutlineWidth", width, true);
+		this._updateCustomTextFilters();
+		return this;
+	};
+
+	Viewport.prototype.setHotspotCustomTextHaloWidth = function(width) {
+		this.setProperty("hotspotCustomTextHaloWidth", width, true);
+		this._updateCustomTextFilters();
+		return this;
+	};
+
 	Viewport.prototype.onAfterRendering = function() {
 		this._resizeListenerId = ResizeHandler.register(this, this._handleResize.bind(this));
 
@@ -319,6 +402,8 @@ sap.ui.define([
 			var root = this._scene.getRootElement();
 			root._setDomRef(document.getElementById(root.uid));
 			this._svgElement = root.domRef.parentNode;
+
+			this._updateCustomText();
 		}
 
 		this._handleResize({
@@ -523,28 +608,47 @@ sap.ui.define([
 
 		var rootElement = this._scene.getRootElement();
 		var viewportRect = this.getDomRef().getBoundingClientRect();
+		x += viewportRect.x;
+		y += viewportRect.y;
 
-		var hitTest = function(x, y) {
-			var htmlElement;
-			if (ignoreHotspots) {
-				var htmlElements = document.elementsFromPoint(x + viewportRect.x, y + viewportRect.y);
-				for (var i = 0; i < htmlElements.length; i++) {
-					htmlElement = htmlElements[i];
-					var hit = htmlElement != null && htmlElement.id ? rootElement.getElementById(htmlElement.id) : null;
-					if (!hit) {
-						return null;
-					}
-					var elem = hit._getSceneTreeElement();
-					if (elem && elem._vkGetNodeContentType() !== NodeContentType.Hotspot) {
-						return hit;
-					}
+		function getHit(htmlElement) {
+			while (htmlElement && !htmlElement.id) {
+				htmlElement = htmlElement.parentElement; // go up the DOM tree to find an element with id
+			}
+			if (!htmlElement) {
+				return null; // element not found
+			}
+
+			const hit = rootElement.getElementById(htmlElement.id);
+			const elem = hit?._getSceneTreeElement();
+			if (!elem) {
+				return null; // element not found in the scene
+			}
+
+			if ((ignoreHotspots && elem._vkGetNodeContentType() === NodeContentType.Hotspot) ||
+				hit.userData.customText) {
+				return undefined; // ignore hotspots if the "ignoreHotspots" flag is set and ignore custom text elements
+			}
+
+			return hit;
+		}
+
+		function hitTest(x, y) {
+			const htmlElement = document.elementFromPoint(x, y);
+			const hit = getHit(htmlElement);
+			if (hit !== undefined) {
+				return hit;
+			}
+
+			for (const htmlElement of document.elementsFromPoint(x, y)) {
+				const hit = getHit(htmlElement);
+				if (hit !== undefined) {
+					return hit;
 				}
-				return null;
-			} else {
-				htmlElement = document.elementFromPoint(x + viewportRect.x, y + viewportRect.y);
-				return htmlElement !== null && htmlElement.id ? rootElement.getElementById(htmlElement.id) : null;
 			}
-		};
+
+			return null; // no hit found
+		}
 
 		var hit = hitTest(x, y);
 		if (withTolerance) {
@@ -1288,6 +1392,15 @@ sap.ui.define([
 			activeHotspotChanged = true;
 		}
 
+		if (this._dynamicContentElement && this._dynamicContentElement !== elem) {
+			this.fireHotspotLeave({ nodeRef: this._dynamicContentElement });
+			if (!this.getShowAllDynamicContents()) {
+				this._dynamicContentElement.setHotspotColor(vsm._mask, null);
+			}
+			this._dynamicContentElement = null;
+			activeHotspotChanged = true;
+		}
+
 		if (elem && elem._vkGetNodeContentType() === NodeContentType.Hotspot) {
 			this._hotspotElement = elem;
 			if (!this.getShowAllHotspots()) {
@@ -1297,6 +1410,15 @@ sap.ui.define([
 			activeHotspotChanged = true;
 		}
 
+		if (elem && elem._vkGetNodeContentType() === NodeContentType.DynamicContent) {
+			this._dynamicContentElement = elem;
+			if (!this.getShowAllDynamicContents()) {
+				elem.setHotspotColor(vsm._mask, this.getHotspotColorABGR());
+			}
+			this.fireHotspotEnter({ nodeRef: elem });
+			activeHotspotChanged = true;
+		}
+
 		if (activeHotspotChanged) {
 			this._invalidateRasterImage();
 		}
@@ -1645,6 +1767,30 @@ sap.ui.define([
 		return this;
 	};
 
+	Viewport.prototype.setShowAllDynamicContents = function(value) {
+		this.setProperty("showAllDynamicContents", value, true);
+		const vsm = this._getViewStateManagerSVG();
+		if (vsm) {
+			const vsmMask = vsm._mask;
+			const nodes = vsm.getNodeHierarchy().getDynamicContentNodeRefs();
+			const dynamicContentElement = this._dynamicContentElement;
+			const color = this.getShowAllHotspotsTintColor();
+			nodes.forEach(function(node) {
+				if (value) {
+					node.setHotspotColor(vsmMask, color);
+				} else if (node === dynamicContentElement) {
+					node.setHotspotColor(vsmMask, this.getHotspotColorABGR());
+				} else {
+					node.setHotspotColor(vsmMask, null);
+				}
+			}, this);
+
+			if (nodes.length > 0) {
+				this.invalidate();
+			}
+		}
+	};
+
 	Viewport.prototype._getFillStyleId = function(element) {
 		if (element.highlightColor || element.tintColor) {
 			return null;