feat: added padding and borderRadius options to overlay element

You can now add padding and borderRadius to overlay element

BREAKING CHANGE: disableOverlay option is replaced with overlay.enabled

docs/pages/3.props/2.options.md

@@ -16,7 +16,11 @@ You can override `ROnboardingWrapper`'s options by passing options to `ROnboardi
 ```js
 {
   popper: {},
-  disableOverlay: false,
+  overlay: {
+    enabled: true,
+    padding: 0,
+    borderRadius: 0
+  },
   scrollToStep: {
     enabled: true,
     options: {
@@ -31,9 +35,12 @@ You can override `ROnboardingWrapper`'s options by passing options to `ROnboardi
 | Name | Type | Default |
 | :-------- | :-------- | :-------- |
 | `popper` | [PopperJS options](https://popper.js.org/docs/v2/constructors/#options) | `{}` |
-| `disableOverlay` | Boolean | `false` |
+| `overlay` | | |
+| `overlay.enabled` | `Boolean` | `true` |
+| `overlay.padding` | `Number` `{ top: 0, right: 0, bottom: 0, left: 0 }` | `0` |
+| `overlay.borderRadius` | `Number` `{ leftTop: 0, rightTop: 0, rightBottom: 0, leftBottom: 0 }` | `0` |
 | `scrollToStep` | | |
-| `scrollToStep.enabled` | Boolean | `true` |
+| `scrollToStep.enabled` | `Boolean` | `true` |
 | `scrollToStep.options` | [Scroll Into View Options](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) | `{ behavior: 'smooth', block: 'center', inline: 'center'    }` |
 
 

src/components/ROnboardingStep.tsx

@@ -44,8 +44,11 @@ export default function ({ children }: { children?: JSX.Element }) {
     if (mergedOptions?.scrollToStep?.enabled) {
       element.scrollIntoView(mergedOptions?.scrollToStep?.options)
     }
-    if (!mergedOptions?.disableOverlay) {
-      updatePath(element);
+    if (mergedOptions?.overlay?.enabled) {
+      updatePath(element, {
+        padding: mergedOptions?.overlay?.padding,
+        borderRadius: mergedOptions?.overlay?.borderRadius,
+      });
     }
     setTargetElementClassName(element);
   };

src/hooks/useSvgOverlay.ts

@@ -1,18 +1,60 @@
+import { defaultROnboardingWrapperOptions, SvgOverlayOptions } from "@/types/ROnboardingWrapper"
 import { useEffect, useRef, useState } from "react"
 
 export default function useSvgOverlay() {
   const [path, setPath] = useState('')
   const target = useRef<Element | null>(null)
+  const paddingValue = useRef<SvgOverlayOptions['padding']>(defaultROnboardingWrapperOptions.overlay?.padding ?? 0)
+  const borderRadiusValue = useRef<SvgOverlayOptions['borderRadius']>(defaultROnboardingWrapperOptions.overlay?.borderRadius ?? 0)
 
   const onScroll = () => {
-    updatePath(target.current)
+    updatePath(target.current, {
+      padding: paddingValue.current,
+      borderRadius: borderRadiusValue.current,
+    })
   }
-  const updatePath = async (element: Element | null) => {
+  const updatePath = async (element: Element | null, options: Omit<SvgOverlayOptions, 'enabled'> = defaultROnboardingWrapperOptions.overlay!) => {
     if (!element) return
     const { innerWidth, innerHeight } = window
     const { left, top, width, height } = element.getBoundingClientRect()
-    setPath(`M${innerWidth},${innerHeight}H0V0H${innerWidth}V${innerHeight}ZM${left},${top}a0,0,0,0,0-0,0V${top + height}a0,0,0,0,0,0,0H${left + width}a0,0,0,0,0,0-0V${top}a0,0,0,0,0-0-0Z`)
+    const padding = typeof options.padding === 'number' ? {
+      top: options.padding,
+      right: options.padding,
+      bottom: options.padding,
+      left: options.padding,
+    } : options.padding
+    const radius = typeof options.borderRadius === 'number' ? {
+      leftTop: options.borderRadius,
+      rightTop: options.borderRadius,
+      rightBottom: options.borderRadius,
+      leftBottom: options.borderRadius,
+    } : options.borderRadius
+    const edges = {
+      top: top - (padding?.top ?? 0),
+      right: left + width + (padding?.right ?? 0),
+      bottom: top + height + (padding?.bottom ?? 0),
+      left: left - (padding?.left ?? 0),
+    }
+    const pointsPath = {
+      leftTop: `M${edges.left + (radius?.leftTop ?? 0)},${edges.top} Q${edges.left},${edges.top} ${edges.left},${edges.top + (radius?.leftTop ?? 0)}`,
+      rightTop: `V${edges.top + (radius?.rightTop ?? 0)} Q${edges.right},${edges.top} ${edges.right - (radius?.rightTop ?? 0)},${edges.top}`,
+      rightBottom: `H${edges.right - (radius?.rightBottom ?? 0)} Q${edges.right},${edges.bottom} ${edges.right},${edges.bottom - (radius?.rightBottom ?? 0)}`,
+      leftBottom: `V${edges.bottom - (radius?.leftBottom ?? 0)} Q${edges.left},${edges.bottom} ${edges.left + (radius?.leftBottom ?? 0)},${edges.bottom}`
+    }
+    setPath(`
+      M${innerWidth},${innerHeight}
+      H0V0
+      H${innerWidth}V${innerHeight}
+      Z
+      ${pointsPath.leftTop}
+      ${pointsPath.leftBottom}
+      ${pointsPath.rightBottom}
+      ${pointsPath.rightTop}
+      Z
+    `)
     target.current = element
+    paddingValue.current = padding
+    borderRadiusValue.current = radius
   }
 
   useEffect(() => {

src/types/ROnboardingWrapper.ts

@@ -1,9 +1,25 @@
 import type { createPopper } from "@popperjs/core/lib/createPopper";
 import { StepEntity } from "./StepEntity";
 
+export interface SvgOverlayOptions {
+  enabled?: boolean
+  padding?: number | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  }
+  borderRadius?: number | {
+    leftTop?: number;
+    rightTop?: number;
+    rightBottom?: number;
+    leftBottom?: number;
+  }
+}
+
 export interface ROnboardingWrapperOptions {
   popper?: Parameters<typeof createPopper>[2]
-  disableOverlay?: boolean
+  overlay?: SvgOverlayOptions,
   scrollToStep?: {
     enabled?: boolean
     options?: ScrollIntoViewOptions
@@ -12,7 +28,11 @@ export interface ROnboardingWrapperOptions {
 
 export const defaultROnboardingWrapperOptions: ROnboardingWrapperOptions = {
   popper: {},
-  disableOverlay: false,
+  overlay: {
+    enabled: true,
+    padding: 0,
+    borderRadius: 0,
+  },
   scrollToStep: {
     enabled: true,
     options: {