@sapui5/sap.ui.vk 1.140.0 → 1.142.0

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

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.140.0
+	 * @version 1.142.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.140.0
+	 * @version 1.142.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.140.0
+	 * @version 1.142.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.140.0
+	 * @version 1.142.0
 	 * @extends sap.ui.vk.Scene
 	 * @alias sap.ui.vk.svg.Scene
 	 */