visible indicator that a node handle is clickable for tools menu

eccenca · Aug 8, 2023 · 2177bdc · 2177bdc
1 parent fac2830
commit 2177bdc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx
@@ -52,11 +52,12 @@ export const HandleDefault = memo(({ flowVersion, data, tooltip, children, ...ha
     if (isToolsContent && !toolsDisplayed) {
         handleContent = <HandleContent {...data}></HandleContent>;
     }
-    const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), [])
+    const handleClick = React.useCallback(() => setToolsDisplayed(!toolsDisplayed), []);
 
     const handleConfig = {
         ...handleProps,
         ...tooltipTitle,
+        className: isToolsContent ? "clickable" : undefined,
         onClick: isToolsContent ? handleClick : undefined,
     };
 

diff --git a/src/extensions/react-flow/handles/_handles.scss b/src/extensions/react-flow/handles/_handles.scss
@@ -13,8 +13,8 @@ div.react-flow__handle {
 
     &::before {
         position: absolute;
-        inset: $eccgui-size-block-whitespace * -0.5 $eccgui-size-block-whitespace * -0.5 $eccgui-size-block-whitespace *
-            -0.5 $eccgui-size-block-whitespace * -0.5;
+        inset: $eccgui-size-block-whitespace * -0.5;
+        z-index: 1;
         display: none;
         content: " ";
         background-color: currentcolor;
@@ -23,6 +23,19 @@ div.react-flow__handle {
         opacity: 0.61;
     }
 
+    &.clickable {
+        &::after {
+            position: absolute;
+            inset: $eccgui-size-block-whitespace * -0.75;
+            z-index: -1;
+            display: none;
+            cursor: pointer;
+            content: " ";
+            border-radius: 100%;
+            outline: dotted $eccgui-size-block-whitespace * 0.25 currentcolor;
+        }
+    }
+
     &:hover {
         &::before {
             box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentcolor;
@@ -43,6 +56,12 @@ div.react-flow__handle {
         }
     }
 
+    .react-flow__node:hover &.clickable {
+        &::after {
+            display: block;
+        }
+    }
+
     &.react-flow__handle-connecting:hover,
     &.invalid-handle {
         color: $eccgui-color-danger-text;