From 92b748c193f813c18f689d301f8c0f7a0692584b Mon Sep 17 00:00:00 2001
From: alevikx <131615202+alevikx@users.noreply.github.com>
Date: Mon, 9 Jun 2025 22:09:25 +0530
Subject: [PATCH] Update svgCutouts.js

---
 kaviraj/svgCutouts.js | 54 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/kaviraj/svgCutouts.js b/kaviraj/svgCutouts.js
index 714e872..2024ad1 100644
--- a/kaviraj/svgCutouts.js
+++ b/kaviraj/svgCutouts.js
@@ -1,8 +1,9 @@
-function applyCornerCircleCutoutsV2() {
+function applyCornerCircleCutoutsV3() {
   const targets = document.querySelectorAll('[data-cutout="true"], [data-cutout-child="true"]');
 
   targets.forEach((container, index) => {
     const isChild = container.getAttribute("data-cutout-child") === "true";
+    const hasInset = container.getAttribute("data-cutout-inset") === "true";
 
     // Prevent duplication if SVG already injected
     if (container.querySelector("svg.cutout-svg")) return;
@@ -48,9 +49,8 @@ function applyCornerCircleCutoutsV2() {
     svg.style.left = "0";
     svg.style.zIndex = "-1";
 
-    container.insertBefore(svg, container.firstChild); // Inject SVG
+    container.insertBefore(svg, container.firstChild);
 
-    // Apply cutout mask logic
     const parentWidth = container.offsetWidth;
     const parentHeight = container.offsetHeight;
 
@@ -59,23 +59,61 @@ function applyCornerCircleCutoutsV2() {
     svg.setAttribute("viewBox", `0 0 ${parentWidth} ${parentHeight}`);
 
     const maskId = `cutout-mask-${index}`;
-
-    // Apply mask to the container itself
     container.style.mask = `url(#${maskId})`;
-    container.style.webkitMask = `url(#${maskId})`; // For Safari
+    container.style.webkitMask = `url(#${maskId})`;
 
-    // Create <defs> and <mask>
     const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
     const mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
     mask.setAttribute("id", maskId);
     mask.setAttribute("maskUnits", "userSpaceOnUse");
 
+    // Base white rect
     const whiteRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
     whiteRect.setAttribute("width", "100%");
     whiteRect.setAttribute("height", "100%");
     whiteRect.setAttribute("fill", "white");
     mask.appendChild(whiteRect);
 
+    // Optional inset logic
+    if (hasInset) {
+      const insetWidthPercent = parseFloat(container.getAttribute("data-inset-width") || "40");
+      const insetPadding = parseFloat(container.getAttribute("data-inset-padding") || "10");
+
+      const insetTotalWidth = (insetWidthPercent / 100) * parentWidth;
+      const insetRectWidth = insetTotalWidth - insetPadding * 2;
+      const insetRectHeight = parentHeight - insetPadding * 2;
+      const insetX = parentWidth - insetRectWidth - insetPadding;
+      const insetY = insetPadding;
+      const expandedRadius = radius + insetPadding;
+
+      // Inset black rect
+      const insetRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+      insetRect.setAttribute("width", insetRectWidth);
+      insetRect.setAttribute("height", insetRectHeight);
+      insetRect.setAttribute("x", insetX);
+      insetRect.setAttribute("y", insetY);
+      insetRect.setAttribute("fill", "black");
+      mask.appendChild(insetRect);
+
+      // Inset white corner circles
+      const insetCircleData = [
+        [parentWidth - insetTotalWidth, 0],        // Top-left
+        [parentWidth, 0],                                             // Top-right
+        [parentWidth - insetTotalWidth, parentHeight], // Bottom-left
+        [parentWidth, parentHeight],                                  // Bottom-right
+      ];
+
+      insetCircleData.forEach(([cx, cy]) => {
+        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        circle.setAttribute("cx", cx);
+        circle.setAttribute("cy", cy);
+        circle.setAttribute("r", expandedRadius);
+        circle.setAttribute("fill", "white");
+        mask.appendChild(circle);
+      });
+    }
+
+    // Outer corner cutouts
     const positions = [
       [0 - offset, 0 - offset],
       [parentWidth + offset, 0 - offset],
@@ -97,7 +135,7 @@ function applyCornerCircleCutoutsV2() {
   });
 }
 
-window.addEventListener("load", applyCornerCircleCutoutsV2);
+window.addEventListener("load", applyCornerCircleCutoutsV3);
 window.addEventListener("resize", () => {
   document.querySelectorAll("svg.cutout-svg").forEach(el => el.remove());
   applyCornerCircleCutoutsV2();