@sapui5/sap.ui.vk 1.140.0 → 1.141.0

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

@@ -56,6 +56,12 @@ sap.ui.define([
 			var highlightColor = abgrToColor(vsm._highlightColorABGR);
 			var hotspotColor = abgrToColor(viewport.getHotspotColorABGR());
 			var tintColor = cssColorToColor(viewport.getShowAllHotspotsTintColor());
+			const customTextBlurStdDeviation = viewport.getHotspotCustomTextHaloWidth();
+			const customTextDilateRadius = customTextBlurStdDeviation * 0.1; // 10% of blur std deviation
+			const customTextOutlineColor = cssColorToColor(viewport.getHotspotCustomTextOutlineColor());
+			const customTextOutlineRadius = viewport.getHotspotCustomTextOutlineWidth();
+			const customTextFilterExpand = Math.max(customTextBlurStdDeviation + customTextDilateRadius, customTextOutlineRadius * 2);
+
 			hotspotEffects.set(Element._hotspotEffectName(highlightColor), highlightColor);
 			hotspotEffects.set(Element._hotspotEffectName(hotspotColor), hotspotColor);
 			hotspotEffects.set(Element._hotspotEffectName(tintColor), tintColor);
@@ -78,6 +84,82 @@ sap.ui.define([
 				rm.openEnd();
 				rm.close("feColorMatrix");
 				rm.close("filter");
+
+				rm.openStart("filter");
+				rm.attr("id", name + "-custom-text");
+				if (sap.ui.Device.browser.firefox) {
+					rm.attr("x", "-25%");
+					rm.attr("y", "-100%");
+					rm.attr("width", "150%");
+					rm.attr("height", "300%");
+				} else {
+					rm.attr("x", -customTextFilterExpand + "px");
+					rm.attr("y", -customTextFilterExpand + "px");
+					rm.attr("width", `calc(100% + ${customTextFilterExpand * 2}px)`);
+					rm.attr("height", `calc(100% + ${customTextFilterExpand * 2}px)`);
+				}
+				rm.openEnd();
+
+				rm.openStart("feMorphology");
+				rm.attr("in", "SourceAlpha");
+				rm.attr("result", "blurOut");
+				rm.attr("operator", "dilate");
+				rm.attr("radius", customTextDilateRadius);
+				rm.openEnd();
+				rm.close("feMorphology");
+
+				rm.openStart("feColorMatrix");
+				rm.attr("in", "blurOut");
+				rm.attr("result", "blurOut");
+				rm.attr("type", "matrix");
+				rm.attr("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 1 0");
+				rm.openEnd();
+				rm.close("feColorMatrix");
+
+				rm.openStart("feGaussianBlur");
+				rm.attr("in", "blurOut");
+				rm.attr("result", "blurOut");
+				rm.attr("stdDeviation", customTextBlurStdDeviation);
+				rm.openEnd();
+				rm.close("feGaussianBlur");
+
+				rm.openStart("feMorphology");
+				rm.attr("in", "SourceAlpha");
+				rm.attr("result", "outline");
+				rm.attr("operator", "dilate");
+				rm.attr("radius", customTextOutlineRadius);
+				rm.openEnd();
+				rm.close("feMorphology");
+
+				rm.openStart("feColorMatrix");
+				rm.attr("in", "outline");
+				rm.attr("result", "outline");
+				rm.attr("type", "matrix");
+				rm.attr("values", "0 0 0 0 " + (customTextOutlineColor.red / 255) + ", 0 0 0 0 " + (customTextOutlineColor.green / 255) + ", 0 0 0 0 " + (customTextOutlineColor.blue / 255) + ", 0 0 0 " + customTextOutlineColor.alpha + " 0");
+				rm.openEnd();
+				rm.close("feColorMatrix");
+
+				rm.openStart("feGaussianBlur");
+				rm.attr("in", "outline");
+				rm.attr("result", "outline");
+				rm.attr("stdDeviation", customTextOutlineRadius);
+				rm.openEnd();
+				rm.close("feGaussianBlur");
+
+				rm.openStart("feBlend");
+				rm.attr("in", "blurOut");
+				rm.attr("in2", "outline");
+				rm.attr("result", "blurOut");
+				rm.openEnd();
+				rm.close("feBlend");
+
+				rm.openStart("feBlend");
+				rm.attr("in", "SourceGraphic");
+				rm.attr("in2", "blurOut");
+				rm.openEnd();
+				rm.close("feBlend");
+
+				rm.close("filter");
 			});
 
 			scene.getRootElement().render(rm, vsm ? vsm._mask : (-1 | 0), viewport);