From 2177bdc6589c85750d7b23477bb00da9d20a07b8 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 8 Aug 2023 13:32:39 +0200
Subject: [PATCH] visible indicator that a node handle is clickable for tools
 menu

---
 .../react-flow/handles/HandleDefault.tsx      |  3 ++-
 .../react-flow/handles/_handles.scss          | 23 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx
index 00b81248..3bc9a0c2 100644
--- 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
index 6ffe615a..a362b157 100644
--- 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;