@sapui5/sap.ui.vk 1.139.0 → 1.141.0

package/src/sap/ui/vk/i18n/messagebundle_zh_CN.properties

@@ -44,7 +44,7 @@ SCENETREE_VISIBILITYSTATEHIDDEN=\u5355\u51FB\u4EE5\u53D8\u4E3A\u53EF\u89C1
 SCENETREE_VISIBILITYSTATEVISIBLEALL=\u5355\u51FB\u4EE5\u5168\u90E8\u9690\u85CF
 SCENETREE_VISIBILITYSTATEHIDDENALL=\u5355\u51FB\u4EE5\u5168\u90E8\u663E\u793A
 SCENETREE_SELECTIONSTATESELECTED=\u5DF2\u9009\u62E9
-
+SCENETREE_SELECTED_SCENE_TREE_ITEM_INFO=\u5DF2\u9009\u62E9\uFF1A{0}
 
 CONTAINERBASE_FULLSCREEN=\u5168\u5C4F
 CONTAINERBASE_SETTINGS=\u8BBE\u7F6E
@@ -378,7 +378,6 @@ ELEMENTS_BUTTONTOOLTIP=\u5143\u7D20
 
 TOGGLE_HOTSPOTS_BUTTONTOOLTIP=\u5207\u6362\u70ED\u70B9
 
-LAYERS_PANEL_NO_DATA=\u65E0\u4EFB\u4F55\u5C42
 LAYERS_PANEL_SHOW_BUTTON=\u663E\u793A
 LAYERS_PANEL_SHOW_BUTTON_TOOLTIP=\u663E\u793A\u6240\u9009\u5C42\u7684\u5143\u7D20
 LAYERS_PANEL_HIDE_BUTTON=\u9690\u85CF
@@ -389,7 +388,6 @@ LAYERS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP=\u6240\u6709\u5143\u7D20\u90FD\u53EF
 LAYERS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP=\u4E00\u4E9B\u5143\u7D20\u53EF\u89C1\uFF0C\u4E00\u4E9B\u5143\u7D20\u5DF2\u9690\u85CF
 LAYERS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP=\u6240\u6709\u5143\u7D20\u90FD\u5DF2\u9690\u85CF
 
-ELEMENTS_PANEL_NO_DATA=\u65E0\u4EFB\u4F55\u5143\u7D20
 ELEMENTS_PANEL_SHOW_BUTTON=\u663E\u793A
 ELEMENTS_PANEL_SHOW_BUTTON_TOOLTIP=\u5728\u89C6\u53E3\u4E2D\u663E\u793A\u5143\u7D20
 ELEMENTS_PANEL_HIDE_BUTTON=\u9690\u85CF
@@ -402,6 +400,7 @@ ELEMENTS_PANEL_VISIBLE_COLUMN=\u53EF\u89C1\u6027
 ELEMENTS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP=\u53EF\u89C1\u5143\u7D20
 ELEMENTS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP=\u90E8\u5206\u53EF\u89C1\u5143\u7D20
 ELEMENTS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP=\u5DF2\u9690\u85CF\u5143\u7D20
+
 ELEMENTS_PANEL_TYPE_COMPONENT=\u7EC4\u4EF6
 ELEMENTS_PANEL_TYPE_NET=\u7F51
 ELEMENTS_PANEL_TYPE_UNKNOWN=\u672A\u77E5

package/src/sap/ui/vk/i18n/messagebundle_zh_TW.properties

@@ -44,7 +44,7 @@ SCENETREE_VISIBILITYSTATEHIDDEN=\u6309\u4E00\u4E0B\u4EE5\u986F\u793A
 SCENETREE_VISIBILITYSTATEVISIBLEALL=\u6309\u4E00\u4E0B\u4EE5\u5168\u90E8\u96B1\u85CF
 SCENETREE_VISIBILITYSTATEHIDDENALL=\u6309\u4E00\u4E0B\u4EE5\u5168\u90E8\u986F\u793A
 SCENETREE_SELECTIONSTATESELECTED=\u5DF2\u9078\u64C7
-
+SCENETREE_SELECTED_SCENE_TREE_ITEM_INFO=\u5DF2\u9078\u64C7\uFF1A{0}
 
 CONTAINERBASE_FULLSCREEN=\u5168\u756B\u9762
 CONTAINERBASE_SETTINGS=\u8A2D\u5B9A
@@ -378,7 +378,6 @@ ELEMENTS_BUTTONTOOLTIP=\u5143\u7D20
 
 TOGGLE_HOTSPOTS_BUTTONTOOLTIP=\u5207\u63DB\u71B1\u9EDE
 
-LAYERS_PANEL_NO_DATA=\u6C92\u6709\u5C64
 LAYERS_PANEL_SHOW_BUTTON=\u986F\u793A
 LAYERS_PANEL_SHOW_BUTTON_TOOLTIP=\u986F\u793A\u6240\u9078\u5C64\u7684\u5143\u7D20
 LAYERS_PANEL_HIDE_BUTTON=\u96B1\u85CF
@@ -389,7 +388,6 @@ LAYERS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP=\u6240\u6709\u5143\u7D20\u7686\u53EF
 LAYERS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP=\u90E8\u4EFD\u5143\u7D20\u53EF\u898B\uFF0C\u90E8\u4EFD\u5143\u7D20\u5247\u96B1\u85CF
 LAYERS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP=\u6240\u6709\u5143\u7D20\u7686\u96B1\u85CF
 
-ELEMENTS_PANEL_NO_DATA=\u6C92\u6709\u5143\u7D20
 ELEMENTS_PANEL_SHOW_BUTTON=\u986F\u793A
 ELEMENTS_PANEL_SHOW_BUTTON_TOOLTIP=\u986F\u793A\u6AA2\u8996\u5340\u4E2D\u7684\u5143\u7D20
 ELEMENTS_PANEL_HIDE_BUTTON=\u96B1\u85CF
@@ -402,6 +400,7 @@ ELEMENTS_PANEL_VISIBLE_COLUMN=\u53EF\u898B\u5EA6
 ELEMENTS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP=\u53EF\u898B\u5143\u7D20
 ELEMENTS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP=\u90E8\u4EFD\u53EF\u898B\u5143\u7D20
 ELEMENTS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP=\u96B1\u85CF\u5143\u7D20
+
 ELEMENTS_PANEL_TYPE_COMPONENT=\u5143\u4EF6
 ELEMENTS_PANEL_TYPE_NET=\u6DE8\u503C
 ELEMENTS_PANEL_TYPE_UNKNOWN=\u672A\u77E5

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

@@ -62,7 +62,7 @@ sap.ui.define([
 	 * @namespace
 	 * @name sap.ui.vk
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @public
 	 */
 
@@ -150,7 +150,7 @@ sap.ui.define([
 			"sap.ui.vk.tools.PoiManipulationTool"
 		],
 		noLibraryCSS: false,
-		version: "1.139.0",
+		version: "1.141.0",
 		designtime: "sap/ui/vk/designtime/library.designtime"
 	});
 

package/src/sap/ui/vk/measurements/Angle.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @param {object} [settings] A JSON-like object.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Angle
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/measurements/Area.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @param {object} [settings] A JSON-like object.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Area
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/measurements/Distance.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @param {object} [settings] A JSON-like object.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Distance
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/measurements/Edge.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @param {float[]} [settings.edge] World coordinates of the edge ends in form <code>[x1, y1, z1, x2, y2, z2]</code>.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Edge
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/measurements/Face.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 *     where <code>e</code> is the number of edges in the list.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Face
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/measurements/Feature.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @abstract
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Feature
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/measurements/Vertex.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @param {float[]} [settings.vertex] World coordinates of the vertex in form <code>[x, y, z]</code>.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @alias sap.ui.vk.measurement.Vertex
 	 * @since 1.101.0
 	 */

package/src/sap/ui/vk/pdf/ContentManager.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] Initial settings for the new ContentManager object.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.ContentManager
 	 * @alias sap.ui.vk.pdf.ContentManager
 	 * @since 1.123.0
@@ -288,31 +288,51 @@ sap.ui.define([
 	};
 
 	function addNodesToScene(sceneBuilder, sceneId, nodes, parametrics) {
-		for (const node of nodes) {
-			const parametric = parametrics[node.parametric];
+		// Recursively process each tree node.
+		function processNodeRecursively(treeNode) {
+			const { node, children = [], parentId } = treeNode;
+
+			// Set parent ID if parent exists. `parentId` is used by `SceneBuilder` to set up the
+			// parent-child relationship when creating the node.
+			if (parentId != null) {
+				node.parentId = parentId;
+			} else if (node.parent != null) {
+				node.parentId = node.parent;
+			}
+
+			// // Handle parametric content.
+			const parametric = node.parametric == null
+				? null
+				: parametrics[node.parametric];
 
 			if (parametric != null) {
 				node.parametricId = parametric.id;
 			}
 
-			sceneBuilder.createNode(node, sceneId);
+			// Create the node in the scene.
+			const nodeRef = sceneBuilder.createNode(node, sceneId);
 
+			// Set parametric content if available.
 			if (parametric != null) {
 				sceneBuilder.setParametricContent(node.sid, parametric, sceneId);
 			}
-		}
 
-		/*
-		TODO: HotspotHelper.updateHotspot is used to modify the runtime structure of hotspot nodes which were created as
-		part of mering two or more other hotspots. This is not supported in the PDF content manager yet as the backend
-		does not return joints in responses from `GET v1/scenes/{sceneId}` requests.
+			// Recursively process all children.
+			for (const childTreeNode of children) {
+				processNodeRecursively(childTreeNode);
+			}
+
+			// Initialize as hotspot.
+			nodeRef._initAsHotspot();
+		}
 
-		const hotspotHelper = new HotspotHelper();
+		// Convert flat array to forest (array of root trees).
+		const forest = convertFlatListToForest(nodes);
 
-		for (const node of nodes) {
-			hotspotHelper.updateHotspot(sceneBuilder.getNode(node.sid, sceneId));
+		// Process each root tree in the forest.
+		for (const rootTreeNode of forest) {
+			processNodeRecursively(rootTreeNode);
 		}
-		*/
 	}
 
 	function buildGetSceneUrl(contentResource, parameters) {
@@ -337,5 +357,57 @@ sap.ui.define([
 		return source;
 	}
 
+	/**
+	 * @typedef {object} Node
+	 * @property {string} sid         The node's persistent ID.
+	 * @property {string} name        The name of the node.
+	 * @property {string} [parent]    The persistent ID of the node's parent.
+	 * @property {int[]} [children]   The indices of the node's children in the flat list of nodes.
+	 * @property {int} [parametric]   The index of the node's parametric in the <code>parametrics</code> array.
+	 * @property {object} [transform] The node's transformation matrix.
+	 * @property {boolean} [visible]  Whether the node is visible.
+	 * @property {int} [pageIndex]    The zero-based index of the page on which the node is located.
+	 * @property {string} contentType The type of content. E.g. for hotspots this is always "HOTSPOT".
+	 */
+
+	/**
+	 * @typedef {object} TreeNode
+	 * @property {Node} node             The node.
+	 * @property {string} [parentId]     The persistent ID of the node's parent.
+	 * @property {TreeNode} [parent]     The node's parent.
+	 * @property {TreeNode[]} [children] The node's children.
+	 */
+
+	/**
+	 * Converts a flat list of nodes received from the backend into a forest (an array of root nodes).
+	 *
+	 * The input nodes are not modified.
+	 *
+	 * @param {Node[]} nodes The flat list of nodes
+	 * @returns {TreeNode[]} The forest of nodes (root nodes)
+	 */
+	function convertFlatListToForest(nodes) {
+		// First create a TreeNode object for each node in the flat list.
+		/** @type TreeNode[] */
+		const treeNodes = nodes.map((node) => ({ node }));
+
+		// Then set up parent-child relationships between the TreeNode objects.
+		treeNodes
+			.filter(({ node: { children } }) => children != null)
+			.forEach((treeNode) => {
+				const { node } = treeNode;
+
+				treeNode.children = node.children.map((childIndex) => {
+					const childNode = treeNodes[childIndex];
+					childNode.parentId = node.sid;
+					childNode.parent = treeNode;
+					return childNode;
+				});
+			});
+
+		// Finally, return the roots of the trees in the forest.
+		return treeNodes.filter(({ parent }) => parent == null);
+	}
+
 	return ContentManager;
 });

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

@@ -64,7 +64,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.vk.ViewportBase
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @constructor
 	 * @public
 	 * @alias sap.ui.vk.pdf.Viewport

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

@@ -35,7 +35,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.BaseNodeProxy
 	 * @implements sap.ui.base.Poolable
 	 * @alias sap.ui.vk.svg.BaseNodeProxy

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

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @class Provides a class to communicate with content delivery service.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.base.ManagedObject
 	 * @alias sap.ui.vk.svg.ContentDeliveryService
 	 */

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

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] Initial settings for the new ContentManager object.
 	 * @protected
 	 * @author SAP SE
-	 * @version 1.139.0
+	 * @version 1.141.0
 	 * @extends sap.ui.vk.ContentManager
 	 * @alias sap.ui.vk.svg.ContentManager
 	 * @since 1.80.0
@@ -137,6 +137,7 @@ sap.ui.define([
 						var value = values[0];
 						scene.backgroundTopColor = value.backgroundTopColor; // hex color or undefined
 						scene.backgroundBottomColor = value.backgroundBottomColor; // hex color or undefined
+						scene.outputSettings = value.outputSettings;
 					}
 
 					// add loader information to content to show who loaded it

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

@@ -11,12 +11,14 @@ sap.ui.define([
 	"../cssColorToColor",
 	"../NodeContentType",
 	"sap/base/assert",
+	"sap/base/Log",
 	"sap/base/util/uid"
 ], function(
 	abgrToColor,
 	cssColorToColor,
 	NodeContentType,
 	assert,
+	Log,
 	uid
 ) {
 	"use strict";
@@ -136,6 +138,7 @@ sap.ui.define([
 				this.stroke = convertColor(material.lineColor, 1);
 				this.strokeWidth = material.lineWidth !== undefined ? material.lineWidth : 1;
 				this.strokeDashArray = (material.lineStyle && material.lineStyle.dashPattern) || [];
+				this.coordinateSpace = material.lineStyle?.widthCoordinateSpace ?? unknownCoordinateSpace;
 			}
 		}
 
@@ -208,6 +211,11 @@ sap.ui.define([
 			this._updateHotspotDescendants(hasHostpotAncestor ? null : this);
 		}
 
+		const hasDynamicContentAncestor = this._hasDynamicContentAncestor();
+		if (hasDynamicContentAncestor || this.nodeContentType === NodeContentType.DynamicContent) {
+			this._updateHotspotDescendants(hasDynamicContentAncestor ? null : this);
+		}
+
 		if (this.domRef) {
 			element.traverse(function(child) {
 				if (!child.domRef) {
@@ -274,6 +282,19 @@ sap.ui.define([
 
 			node.userData.skipIt = true;
 
+			if (hotspotNode && node._isGeometryNode()) {
+				Object.defineProperty(node, "filter", {
+					get: function() {
+						return hotspotNode.getHotspotEffectDef().name;
+					},
+					configurable: true
+				});
+			}
+
+			if (node.hasOwnProperty("opacity")) {
+				delete node.opacity;
+			}
+
 			if (node._isGeometryNode()) {
 				node.fill = node.stroke = new Float32Array([1, 1, 1, 1]);
 				node._updateColor();
@@ -289,6 +310,29 @@ sap.ui.define([
 			return; // ignore this hotspot node because it has a hotspot ancestor
 		}
 
+		Object.defineProperty(this, "opacity", {
+			get: function() {
+				return this.highlightColor || this.customHotspotColor || this.hotspotColor ? 1 : 0;
+			},
+			configurable: true
+		});
+
+		this._updateHotspotDescendants(this);
+
+		if (this.domRef !== null) {
+			if (this.domRef === (this.parent && this.parent.domRef)) {
+				this.invalidate();
+			} else {
+				this._updateColor();
+			}
+		}
+	};
+
+	Element.prototype._initAsDynamicContent = function() {
+		if (this._hasDynamicContentAncestor()) {
+			return; // ignore this dynamic content node because it has a dynamic content ancestor
+		}
+
 		this._updateHotspotDescendants(this);
 
 		if (this.domRef !== null) {
@@ -305,6 +349,10 @@ sap.ui.define([
 		if (nodeContentType === NodeContentType.Hotspot) {
 			this._initAsHotspot();
 		}
+
+		if (nodeContentType === NodeContentType.DynamicContent) {
+			this._initAsDynamicContent();
+		}
 	};
 
 	Element.prototype.traverse = function(callback) {
@@ -362,8 +410,28 @@ sap.ui.define([
 		var domRef = this.domRef;
 		if (domRef !== null) {
 			if (this.nodeContentType === NodeContentType.Hotspot && !this._hasHostpotAncestor()) {
-				domRef.setAttribute("filter", "url(#" + this.getHotspotEffectDef().name + ")");
-				domRef.setAttribute("opacity", this._getHotspotOpacity());
+				if (this.customText) {
+					this.customText.filter = this.getHotspotEffectDef().name + "-custom-text";
+					this.customText.domRef?.setAttribute("filter", `url(#${this.customText.filter})`);
+				}
+				this.traverse((node) => {
+					const filter = node.filter;
+					if (filter) {
+						node.domRef?.setAttribute("filter", `url(#${filter})`);
+					}
+				});
+				domRef.setAttribute("opacity", this.opacity);
+			} else if (this.nodeContentType === NodeContentType.DynamicContent && !this._hasDynamicContentAncestor()) {
+				if (this.customText) {
+					this.customText.filter = this.getHotspotEffectDef().name + "-custom-text";
+					this.customText.domRef?.setAttribute("filter", `url(#${this.customText.filter})`);
+				}
+				this.traverse((node) => {
+					const filter = node.filter;
+					if (filter) {
+						node.domRef?.setAttribute("filter", `url(#${filter})`);
+					}
+				});
 			} else {
 				var setAttributeFunc = domRef.setAttribute.bind(domRef);
 				if (this.highlightColor || this.tintColor) {
@@ -397,10 +465,6 @@ sap.ui.define([
 		}
 	};
 
-	Element.prototype._getHotspotOpacity = function() {
-		return this.highlightColor || this.customHotspotColor || this.hotspotColor ? 1 : 0;
-	};
-
 	Element._hotspotEffectName = function(color) {
 		return "hotspot-effect-" + rgbaToCSS(color.red, color.green, color.blue, color.alpha);
 	};
@@ -440,7 +504,7 @@ sap.ui.define([
 	};
 
 	Element.prototype.setTintColor = function(mask, tintColor) {
-		assert(this.nodeContentType !== NodeContentType.Hotspot && "setTintColor() method is not for hotspots, use setHotspotColor() method");
+		assert(this.nodeContentType !== NodeContentType.Hotspot, "setTintColor() method is not for hotspots, use setHotspotColor() method");
 		this.tintColor = tintColor;
 		this._updateColor(mask);
 	};
@@ -450,13 +514,13 @@ sap.ui.define([
 	};
 
 	Element.prototype.setHotspotColor = function(mask, color) {
-		assert(this.nodeContentType === NodeContentType.Hotspot && "setHotspotColor() method is only for hotspots");
+		assert((this.nodeContentType === NodeContentType.Hotspot || this.nodeContentType === NodeContentType.DynamicContent), "setHotspotColor() method is only for hotspots or dynamic content");
 		this.hotspotColor = color;
 		this._updateColor(mask);
 	};
 
 	Element.prototype.setCustomHotspotColor = function(mask, color) {
-		assert(this.nodeContentType === NodeContentType.Hotspot && "setCustomHotspotColor() method is only for hotspots");
+		assert(this.nodeContentType === NodeContentType.Hotspot, "setCustomHotspotColor() method is only for hotspots");
 		this.customHotspotColor = color;
 		this._updateColor(mask);
 	};
@@ -466,7 +530,7 @@ sap.ui.define([
 	};
 
 	Element.prototype.setOpacity = function(opacity) {
-		assert(this.nodeContentType !== NodeContentType.Hotspot && "setOpacity() method is not for hotspots");
+		assert(this.nodeContentType !== NodeContentType.Hotspot, "setOpacity() method is not for hotspots");
 
 		if (this._isGeometryNode()) {
 			return;
@@ -502,6 +566,57 @@ sap.ui.define([
 				}
 			}
 		}
+		this._updateCustomText();
+	};
+
+	/**
+	 * Attaches a custom text to this element.
+	 * @param {object} [options] The custom text options. If not specified, the existing custom text will be removed.
+	 * @param {string} [options.text] The text to display, it's mutually exclusive with htmlText option.
+	 * @param {string} [options.htmlText] The HTML text to display, it's mutually exclusive with text option.
+	 * @param {string} [options.fontFamily] The font family of the text. Default is "Arial".
+	 * @param {string} [options.fontStyle] The font style of the text (normal | italic | oblique). Default is undefined ("normal").
+	 * @param {string} [options.fontWeight] The font weight of the text (normal | bold | bolder | lighter | <number>). Default is undefined ("normal").
+	 * @param {string} [options.textDecoration] The text decoration of the text (none | underline | line-through, etc). Default is undefined ("none").
+	 * @param {number} [options.size] The font size of the text in pixels. If not specified then the size will be automatically
+	 *                  determined based on the median text size in the scene or computed from the bounding box of the scene.
+	 * @param {string} [options.fill] The fill color of the text in CSS format. Default is "black".
+	 * @param {number[]} [options.pivot] The pivot point of the text relative to the bounding box of the element. Default is [0.5, 0.5] (center).
+	 * @param {number[]} [options.anchor] The anchor point of the text. Default is [0.5, 0.5] (center).
+	 * @returns {sap.ui.vk.svg.Element} Returns this element for method chaining.
+	 * @public
+	 * @experimental
+	 * @since 1.141.0
+	 */
+	Element.prototype.setCustomText = function(options) {
+		Log.warning("You need to import 'sap.ui.vk.svg.Text' module to call method setCustomText().");
+		return this;
+	};
+
+	Element.prototype._updateCustomText = function() {
+		if (this.customText) {
+			const bbox = this._getBBox(null, true);
+			const textBBox = this.customText.domRef?.getBBox();
+			if (bbox && textBBox) {
+				// calculate the matrix of the custom text element based on the bounding box of the element
+				const matrix = this._matrixWorld();
+				const pivot = this.customText.pivot ?? [0.5, 0.5]; // default pivot is center of the bonding box
+				const x = bbox.x + bbox.width * pivot[0];
+				const y = bbox.y + bbox.height * (matrix[3] < 0 ? 1 - pivot[1] : pivot[1]);
+				matrix[4] = matrix[5] = 0;
+				const p = Element._transformPoint(x, y, matrix);
+				const anchor = this.customText.anchor;
+				if (anchor) {
+					p.x -= textBBox.x + textBBox.width * anchor[0];
+					p.y -= textBBox.y + textBBox.height * anchor[1];
+				}
+				const invMatrix = Element._invertMatrix(matrix);
+				const p2 = Element._transformPoint(p.x, p.y, invMatrix);
+				invMatrix[4] = p2.x;
+				invMatrix[5] = p2.y;
+				this.customText.setMatrix(invMatrix);
+			}
+		}
 	};
 
 	Element._multiplyMatrices = function(a, b) {
@@ -650,10 +765,10 @@ sap.ui.define([
 	}
 
 	// This method returns aligned bounding box if the matrix is passed, or oriented bounding box if no matrix is passed
-	Element.prototype._getBBox = function(matrix) {
+	Element.prototype._getBBox = function(matrix, childrenOnly) {
 		if (this.domRef) {
 			var bbox;
-			if (!this.parent || this.domRef !== this.parent.domRef) {
+			if (!childrenOnly && this.domRef !== this.parent?.domRef) {
 				bbox = this.domRef.getBBox();
 				if (matrix && bbox) {// transform bounding box to parent coordinate system
 					bbox = transformBBox(bbox, matrix);
@@ -687,6 +802,7 @@ sap.ui.define([
 			isIdentityMatrix(element.matrix) &&
 			element.opacity === undefined &&
 			(element.nodeContentType !== NodeContentType.Hotspot || element._hasHostpotAncestor()) && // not a hotspot
+			(element.nodeContentType !== NodeContentType.DynamicContent || element._hasDynamicContentAncestor()) && // not a dynamic content
 			element.vMask === 1;
 	}
 
@@ -777,13 +893,14 @@ sap.ui.define([
 	Element.prototype._setBaseAttributes = function(setAttributeFunc, mask) {
 		setAttributeFunc("id", this.uid);
 
-		if (this.nodeContentType === NodeContentType.Hotspot) {
-			if (!this._hasHostpotAncestor()) {
-				setAttributeFunc("filter", "url(#" + this.getHotspotEffectDef().name + ")");
-				setAttributeFunc("opacity", this._getHotspotOpacity());
-			}
-		} else if (this.opacity !== undefined) {
-			setAttributeFunc("opacity", this.opacity);
+		const filter = this.filter; // filter can be defined as a getter for hotspots
+		if (filter != null) {
+			setAttributeFunc("filter", `url(#${filter})`);
+		}
+
+		const opacity = this.opacity; // opacity can be defined as a getter for hotspots
+		if (opacity != null) {
+			setAttributeFunc("opacity", opacity);
 		}
 		if (!isIdentityMatrix(this.matrix)) {
 			setAttributeFunc("transform", "matrix(" + this.matrix.join(",") + ")");
@@ -876,7 +993,7 @@ sap.ui.define([
 
 		var hotspots = [];
 		this.children.forEach(function(element) {
-			if (element.nodeContentType === NodeContentType.Hotspot) {
+			if (element.nodeContentType === NodeContentType.Hotspot || element.nodeContentType === NodeContentType.DynamicContent) {
 				hotspots.push(element);
 			} else {
 				element.render(rm, mask, viewport);
@@ -888,6 +1005,8 @@ sap.ui.define([
 			element.render(rm, mask);
 		});
 
+		this.customText?.render(rm, mask);
+
 		if (!skipIt) {
 			rm.close(tagName);
 		}
@@ -979,6 +1098,11 @@ sap.ui.define([
 			}
 			child._setDomRef(childDomRef);
 		}
+
+		if (this.customText) {
+			this.customText.domRef = document.getElementById(this.customText.uid);
+			this._updateCustomText();
+		}
 	};
 
 	Element.prototype.getElementByProperty = function(name, value) {
@@ -986,14 +1110,17 @@ sap.ui.define([
 			return this;
 		}
 
-		var children = this.children;
-		for (var i = 0, l = children.length; i < l; i++) {
-			var element = children[i].getElementByProperty(name, value);
+		for (const child of this.children) {
+			const element = child.getElementByProperty(name, value);
 			if (element !== null) {
 				return element;
 			}
 		}
 
+		if (this.customText && this.customText[name] === value) {
+			return this.customText;
+		}
+
 		return null;
 	};
 
@@ -1193,6 +1320,18 @@ sap.ui.define([
 		return false;
 	};
 
+	Element.prototype._hasDynamicContentAncestor = function() {
+		var ancestor = this.parent;
+		while (ancestor) {
+			if (ancestor.nodeContentType === NodeContentType.DynamicContent) {
+				return true;
+			}
+			ancestor = ancestor.parent;
+		}
+
+		return false;
+	};
+
 	/**
 	 * The string given as "className" will be added to the "class" attribute of this element's root HTML element.
 	 * @param {string} className the CSS class name to be added