border radius / margin around target element about react-native-copilot HOT 3 CLOSED

This is actually not possible with the current mask implementation. We currently do not have any plans for supporting masks with custom shapes. PRs are welcome though!

from react-native-copilot.

hi, i was going through this problem. you can edit the file in
/node_modules/react-native-copilot/dist/index.js

`var init_SvgMask = __esm({
position,
canvasSize
}) => {

•  const cornerRadius = 10; // You can adjust this value based on the desired radius
   const positionX = position.x._value;
   const positionY = position.y._value;
   const sizeX = size.x._value;
   const sizeY = size.y._value;
  

•  return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
  

• return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0Z
• M${positionX + cornerRadius}, ${positionY}
• H${positionX + sizeX - cornerRadius}
• Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}
• V${positionY + sizeY - cornerRadius}
• Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}
• H${positionX + cornerRadius}
• Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}
• V${positionY + cornerRadius}
• Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}
• Z };

from react-native-copilot.

hi, i was going through this problem. you can edit the file in /node_modules/react-native-copilot/dist/index.js

`var init_SvgMask = __esm({ position, canvasSize }) => {

•  const cornerRadius = 10; // You can adjust this value based on the desired radius
   const positionX = position.x._value;
   const positionY = position.y._value;
   const sizeX = size.x._value;
   const sizeY = size.y._value;
  

•  return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
  

• return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0Z

• M${positionX + cornerRadius}, ${positionY}

• H${positionX + sizeX - cornerRadius}

• Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}

• V${positionY + sizeY - cornerRadius}

• Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}

• H${positionX + cornerRadius}

• Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}

• V${positionY + cornerRadius}

• Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}

• Z };

in case anyone has a hard time copying the changes that @paragspacetotech does, this is the patch-package file

index b9127da..ef60d7b 100644
--- a/node_modules/react-native-copilot/dist/index.js
+++ b/node_modules/react-native-copilot/dist/index.js
@@ -188,11 +188,12 @@ var init_SvgMask = __esm({
       position,
       canvasSize
     }) => {
+      const cornerRadius = 12; // You can adjust this value based on the desired radius
       const positionX = position.x._value;
       const positionY = position.y._value;
       const sizeX = size.x._value;
       const sizeY = size.y._value;
-      return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
+      return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX + cornerRadius}, ${positionY}H${positionX + sizeX - cornerRadius}Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}V${positionY + sizeY - cornerRadius}Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}H${positionX + cornerRadius}Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}V${positionY + cornerRadius}Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}Z`;
     };
     SvgMask = ({
       size,

from react-native-copilot.