@sapui5/sap.ui.vk 1.120.12 → 1.120.13

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

@@ -10,6 +10,7 @@ sap.ui.define([
 	"../NodeHierarchy",
 	"sap/ui/base/ObjectPool",
 	"./Element",
+	"./Text",
 	"./BaseNodeProxy",
 	"./NodeProxy",
 	"../Messages",
@@ -22,6 +23,7 @@ sap.ui.define([
 	NodeHierarchyBase,
 	ObjectPool,
 	Element,
+	Text, // needed for Element.setCustomText to work
 	BaseNodeProxy,
 	NodeProxy,
 	Messages,
@@ -55,7 +57,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.120.12
+	 * @version 1.120.13
 	 * @extends sap.ui.vk.NodeHierarchy
 	 * @alias sap.ui.vk.svg.NodeHierarchy
 	 */
@@ -599,5 +601,51 @@ sap.ui.define([
 		return this;
 	};
 
+	/**
+	 * Attaches a custom text to this elements.
+	 * @param {sap.ui.vk.svg.Element|sap.ui.vk.svg.Element[]} nodeRefs The node or array of nodes to set the custom text to.
+	 * @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 <code>htmlText</code> option.
+	 * Line breaks are not supported, use <code>htmlText</code> option for multi-line text.
+	 * @param {string} [options.htmlText] The HTML text to display, it's mutually exclusive with <code>text</code> option.
+	 * Line breaks are supported using paragraphs: <code>"&lt;p&gt;Line 1&lt;/p&gt;&lt;p&gt;Line 2&lt;/p&gt;"</code>.
+	 * @param {number} [options.size] The font size of the text in scene coordinate units. 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, but better
+	 * to specify it explicitly to avoid unexpected results.
+	 * @param {string} [options.fontFamily] The font family of the text. Default is <code>"Arial"</code>.
+	 * @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 {string} [options.fill] The fill color of the text in CSS format. Default is "black".
+	 * @param {number[]} [options.pivot] The pivot point of the custom text, relative to the text bounding box.
+	 * The pivot point is used together with the anchor point to position the text.
+	 * Default is <code>[0.5, 0.5]</code> (middle of the custom text). <code>[0, 0]</code> is top-left, <code>[1, 1]</code> is bottom-right.
+	 * @param {number[]} [options.anchor] The anchor point of the text, relative to the bounding box of the node to which
+	 * the custom text is attached.
+	 * Default is <code>[0.5, 0.5]</code> (center of node). <code>[0, 0]</code> is top-left, <code>[1, 1]</code> is bottom-right.
+	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @public
+	 * @experimental
+	 * @since 1.120.0
+	 * @example <caption>Add custom text to the center of the <code>nodeRef</code> with HTML formatting and three separate lines of text:</caption>
+	 * nodeHierarchy.setCustomText(nodeRef, {
+	 *     htmlText: `&lt;p&gt;Line &lt;strong&gt;1&lt;/strong&gt;&lt;/p&gt;
+	 *                &lt;p&gt;Line &lt;em&gt;2&lt;/em&gt;&lt;/p&gt;
+	 *                &lt;p&gt;Line &lt;span style="font-size: 24pt;color: blue;font-family: 'courier new';"&gt;3&lt;/span&gt;&lt;/p&gt;`,
+	 *     size: 16,
+	 *     fontFamily: "lucida console, monospace",
+	 *     fill: "red",
+	 *     pivot: [0.5, 0.5],
+	 *     anchor: [0.5, 0.5]
+	 * });
+	 */
+	NodeHierarchy.prototype.setCustomText = function(nodeRefs, options) {
+		nodeRefs = Array.isArray(nodeRefs) ? nodeRefs : [nodeRefs];
+		nodeRefs.forEach(function(nodeRef) {
+			nodeRef.setCustomText(options);
+		});
+		return this;
+	};
+
 	return NodeHierarchy;
 });

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

@@ -36,7 +36,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.120.12
+	 * @version 1.120.13
 	 * @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.120.12
+	 * @version 1.120.13
 	 * @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.120.12
+	 * @version 1.120.13
 	 * @extends sap.ui.vk.Scene
 	 * @alias sap.ui.vk.svg.Scene
 	 */

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

@@ -64,7 +64,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.120.12
+	 * @version 1.120.13
 	 * @experimental Since 1.81.0 This class is experimental and might be modified or removed in future versions.
 	 */
 	var SceneBuilder = function(rootNode, contentResource, resolve, reject) {
@@ -133,14 +133,44 @@ sap.ui.define([
 			this._reject(err);
 		} else {
 			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 mmPerInch = 25.4; // 1 inch = 25.4 mm
+				const outputSizeMM = Math.min(outputSettings.width, outputSettings.height); // in mm
+				const outputSize = outputSizeMM * (outputDPI / mmPerInch); // in dots (1 dot = 1/72 inch)
+				const mediumViewportSize = 768; // medium viewport size in pixels (1024x768)
+				// console.log(`setScene outputSettings: ${JSON.stringify(outputSettings)}`);
+
+				this._materialMap.forEach(function(material) {
+					if (material.lineStyle.widthCoordinateSpace === 3) { // sap::ve::core::Material::CoordinateSpace::NormalizedViewport
+						// 2D viewport space (x and y values range from -1.0 to 1.0, the origin representing the center of view)
+						material.lineWidth = material.lineStyle.width * mediumViewportSize * 0.5; // 768 is a medium viewport size in pixels
+						material.lineStyle.widthCoordinateSpace = 0; // convert to screen space
+					} else if (material.lineStyle.widthCoordinateSpace === 4) { // sap::ve::core::Material::CoordinateSpace::Device (device/paper units)
+						if (info.showPaperSpace) {
+							// this mode requires conversion to world space units, so that the line thickness is affected by initial camera zoom factor
+							material.lineWidth = material.lineStyle.width * 2 / (outputSize * camera._initialZoom);
+						} else {
+							// 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 * mediumViewportSize / outputSize;
+							material.lineStyle.widthCoordinateSpace = 0; // convert to screen space
+						}
+					}
+				});
+			}
+
 			Log.info("setScene", JSON.stringify(info), camera);
-			this._resolve({
+			this._resolve?.({
 				node: this._rootNode,
-				camera: camera,
+				camera,
 				backgroundTopColor: info.backgroundTopColor,
 				backgroundBottomColor: info.backgroundBottomColor,
+				outputSettings,
 				contentResource: this._contentResource,
 				builder: this
 			});
@@ -359,6 +389,19 @@ sap.ui.define([
 		}
 	};
 
+	SceneBuilder.prototype.setSubmeshes = function(meshes) {
+		var mesh, submeshes, submesh, j, len;
+		for (var i = 0, count = meshes.length; i < count; ++i) {
+			mesh = meshes[i];
+			submeshes = mesh.submeshes;
+
+			for (j = 0, len = submeshes.length; j < len; ++j) {
+				submesh = submeshes[j];
+				this.insertSubmesh(submesh);
+			}
+		}
+	};
+
 	SceneBuilder.prototype.insertSubmesh = function(submeshInfo) {
 		// console.log("insertSubmesh", submeshInfo);
 		if (!submeshInfo.lods) {

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,42 @@ 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
+		customText.parent = this;
+
+		if (this.domRef) {
+			this.invalidate(); // in case if the element was previously a simple group element (did not have its own domRef)
+			customText.domRef = customText._createDomElement();
+			this.domRef.appendChild(customText.domRef);
+			this._updateCustomText();
+			this._updateColor();
+		}
+
+		return this;
+	};
+
+
 	return Text;
 });

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

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] Initial settings for the new ViewStateManager object.
 	 * @public
 	 * @author SAP SE
-	 * @version 1.120.12
+	 * @version 1.120.13
 	 * @extends sap.ui.vk.ViewStateManagerBase
 	 * @alias sap.ui.vk.svg.ViewStateManager
 	 * @since 1.80.0

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

@@ -68,7 +68,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.120.12
+	 * @version 1.120.13
 	 * @extends sap.ui.vk.ViewportBase
 	 * @alias sap.ui.vk.svg.Viewport
 	 */
@@ -261,6 +261,99 @@ 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";
+				node.customText.setHtmlTextContent(node.customText.getHtmlTextContent()); // recreate the HTML content with new font size
+				node._updateCustomText(); // update position of the custom text
+			}
+		});
+	};
+
+	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 (let 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));
 
@@ -271,6 +364,8 @@ sap.ui.define([
 			var root = this._scene.getRootElement();
 			root._setDomRef(document.getElementById(root.uid));
 			this._svgElement = root.domRef.parentNode;
+
+			this._updateCustomText();
 		}
 
 		this._handleResize({
@@ -459,28 +554,51 @@ 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 (hit.userData.customText && hit.parent && hit.parent._vkGetNodeContentType() === NodeContentType.DynamicContent) {
+				return hit.parent;
+			}
+
+			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 (let 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) {