From 17de9725d0054d86a356038c851a9b181ad7c064 Mon Sep 17 00:00:00 2001
From: dwelle <luzar.david@gmail.com>
Date: Tue, 5 Sep 2023 22:58:49 +0200
Subject: [PATCH] add radius to fancy background

---
 src/scene/fancyBackground.ts | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts
index a5cc85e91..d23168b66 100644
--- a/src/scene/fancyBackground.ts
+++ b/src/scene/fancyBackground.ts
@@ -291,8 +291,31 @@ const addImageBackgroundToSvg = async ({
     fancyBackgroundImage.setAttribute("filter", IMAGE_INVERT_FILTER);
   }
 
-  svgRoot.appendChild(fancyBackgroundImage);
+  const clipRect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
+  clipRect.setAttribute("x", "0");
+  clipRect.setAttribute("y", "0");
+  clipRect.setAttribute("width", `${dimensions.width}`);
+  clipRect.setAttribute("height", `${dimensions.height}`);
+  clipRect.setAttribute("rx", FANCY_BG_BORDER_RADIUS.toString());
+  clipRect.setAttribute("ry", FANCY_BG_BORDER_RADIUS.toString());
+
+  const clipPath = svgRoot.ownerDocument!.createElementNS(SVG_NS, "clipPath");
+  clipPath.setAttribute("id", "fancyBackgroundImageClipPath");
+  clipPath.appendChild(clipRect);
+  clipRect.setAttribute("preserveAspectRatio", "xMidYMid slice");
+
+  const fancyBgGroup = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
+  fancyBgGroup.setAttributeNS(
+    SVG_NS,
+    "clip-path",
+    `url(#fancyBackgroundImageClipPath)`,
+  );
+  fancyBgGroup.appendChild(fancyBackgroundImage);
+
+  svgRoot.appendChild(clipPath);
+  svgRoot.appendChild(fancyBgGroup);
 };
+
 const addContentBackgroundToSvg = ({
   svgRoot,
   contentSize,