🎨 Highlight the add edge button on block hover (#258)

pyflow/blocks/codeblock.py

@@ -3,7 +3,7 @@
 
 """ Module for the base Code Block."""
 
-from typing import OrderedDict, Tuple
+from typing import TYPE_CHECKING, OrderedDict, Tuple
 
 from ansi2html import Ansi2HTMLConverter
 from PyQt5.QtGui import QColor, QPen
@@ -16,6 +16,9 @@
 
 ansi2html_converter = Ansi2HTMLConverter()
 
+if TYPE_CHECKING:
+    from PyQt5.QtWidgets import QGraphicsSceneHoverEvent
+
 
 class CodeBlock(ExecutableBlock):
 
@@ -84,6 +87,8 @@ def __init__(self, source: str = "", **kwargs):
         # Build root widget into holder
         self.holder.setWidget(self.root)
 
+        self.setAcceptHoverEvents(True)
+
         self.update_all()  # Set the geometry of display and source_editor
 
     def init_output_panel(self):
@@ -133,6 +138,16 @@ def handle_run_left(self):
         else:
             self.run_left()
 
+    def hoverEnterEvent(self, event: "QGraphicsSceneHoverEvent") -> None:
+        """Handle the event when the mouse enters the block."""
+        self.add_edge_button.set_highlight(True)
+        return super().hoverEnterEvent(event)
+
+    def hoverLeaveEvent(self, event: "QGraphicsSceneHoverEvent") -> None:
+        """Handle the event when the mouse leaves the block."""
+        self.add_edge_button.set_highlight(False)
+        return super().hoverLeaveEvent(event)
+
     def run_code(self):
         """Run the code in the block."""
 

pyflow/core/add_edge_button.py

@@ -33,16 +33,23 @@ def __init__(
 
         self.edges: List["Edge"] = []
 
-        self.radius = 10
+        self.radius = 12
         self._pen = QPen(QColor("#44000000"))
         self._pen.setWidth(int(1))
 
-        self._normal_brush = QBrush(QColor("#4455FFF0"))
-        self._hover_brush = QBrush(QColor("#AA55FFF0"))
+        self._normal_brush = QBrush(QColor("#1155FFF0"))
+        self._hover_brush = QBrush(QColor("#FF23E9D8"))
+        self._block_hover_brush = QBrush(QColor("#8855FFF0"))
         self._brush = self._normal_brush
 
         self.setAcceptHoverEvents(True)
 
+    def set_highlight(self, value: bool) -> None:
+        if value:
+            self._brush = self._block_hover_brush
+        else:
+            self._brush = self._normal_brush
+
     def hoverEnterEvent(self, event: "QGraphicsSceneHoverEvent") -> None:
         """Handle the event when the mouse enters the button."""
         self._brush = self._hover_brush

pyflow/graphics/view.py

@@ -491,7 +491,7 @@ def drag_edge(self, event: QMouseEvent, action="press"):
                 LOGGER.debug("Start draging edge from existing socket.")
                 return
             # If it is the add edge button, create a new socket and a new edge from it.
-            elif (
+            if (
                 isinstance(item_at_click, AddEdgeButton)
                 and self.mode != self.MODE_EDGE_DRAG
             ):

pyflow/scene/ipynb_conversion_constants.py

@@ -6,7 +6,7 @@
 from typing import Dict
 
 MARGIN_Y: float = 120
-MARGIN_BETWEEN_BLOCKS_Y: float = 40
+MARGIN_BETWEEN_BLOCKS_Y: float = 60
 BLOCK_WIDTH: float = 600
 TITLE_MAX_LENGTH: int = 60