diff --git a/skyvern-frontend/src/components/RadialMenu.tsx b/skyvern-frontend/src/components/RadialMenu.tsx
index fe64fc59..ed266a8d 100644
--- a/skyvern-frontend/src/components/RadialMenu.tsx
+++ b/skyvern-frontend/src/components/RadialMenu.tsx
@@ -99,38 +99,24 @@ export function RadialMenu({
const radiusValue = radius || `${calculatedRadius}px`;
const numRadius = parseFloat(radiusValue);
const visibleItems = items.filter((item) => !item.hidden);
- const padSize = numRadius * 2.75;
+ const padSizeVertical = numRadius * 2;
+ const padSizeHorizontal = padSizeVertical * 4;
return (
{
- // only close if we're leaving the entire component area
- const rect = dom.root.current?.getBoundingClientRect();
- if (!rect) return;
-
- const { clientX, clientY } = e;
- const padding = padSize / 2;
- const centerX = rect.left + rect.width / 2;
- const centerY = rect.top + rect.height / 2;
-
- // if mouse is outside the pad area, we deactivate
- const distance = Math.sqrt(
- Math.pow(clientX - centerX, 2) + Math.pow(clientY - centerY, 2),
- );
-
- if (distance > padding) {
- setIsOpen(false);
- }
+ onMouseLeave={() => {
+ setIsOpen(false);
}}
>
{/* a pad (buffer) to increase the deactivation area when leaving the component */}
@@ -199,16 +185,20 @@ export function RadialMenu({
{item.text && (
{
+ item.onClick();
+ setIsOpen(false);
+ }}
+ className="absolute left-1/2 top-1/2 z-30 cursor-pointer whitespace-nowrap rounded bg-white px-2 py-1 text-xs text-gray-700 shadow-md transition-all duration-300 ease-out"
style={{
transform: isOpen
? rotateText
? `translate(0%, -50%) translate(${x + textX}px, ${y + textY}px) rotate(${angleDegrees}deg) scale(1)`
: `translate(0%, -50%) translate(${x + textX}px, ${y + textY}px) scale(1)`
- : "translate(0%, -50%) translate(0, 0) scale(0.5)",
+ : `translate(0%, -50%) translate(0, 0) scale(0.5) rotate(${angleDegrees}deg)`,
opacity: isOpen ? (isEnabled ? 1 : 0.5) : 0,
transformOrigin: "left center",
- pointerEvents: "none",
+ pointerEvents: isOpen ? "auto" : "none",
transitionDelay: isOpen ? `${index * 50}ms` : "0ms",
}}
>
@@ -217,7 +207,7 @@ export function RadialMenu({
display: "inline-block",
transform: textTransform,
opacity: isEnabled ? 1 : 0.5,
- cursor: isEnabled ? "default" : "not-allowed",
+ cursor: isEnabled ? "pointer" : "not-allowed",
}}
>
{item.text}
diff --git a/skyvern-frontend/src/routes/workflows/editor/edges/EdgeWithAddButton.tsx b/skyvern-frontend/src/routes/workflows/editor/edges/EdgeWithAddButton.tsx
index f5467017..ec10930e 100644
--- a/skyvern-frontend/src/routes/workflows/editor/edges/EdgeWithAddButton.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/edges/EdgeWithAddButton.tsx
@@ -131,9 +131,7 @@ function EdgeWithAddButton({
const menu = (