[ui] UIGraph: add hoveredNode property + node hovering visual feedback

* keep track of currently hovered node in UIGraph on Python side
* Node: show border on hover + make MouseArea contain everything else to always get hover events, even when cursor is over children attribute pins

meshroom/ui/graph.py

@@ -202,6 +202,7 @@ class UIGraph(QObject):
         self._sortedDFSChunks = QObjectListModel(parent=self)
         self._layout = GraphLayout(self)
         self._selectedNode = None
+        self._hoveredNode = None
         if filepath:
             self.load(filepath)
 
@@ -236,6 +237,7 @@ class UIGraph(QObject):
 
     def clear(self):
         if self._graph:
+            self.clearNodeHover()
             self.clearNodeSelection()
             self._graph.deleteLater()
             self._graph = None
@@ -472,6 +474,10 @@ class UIGraph(QObject):
         """ Clear node selection. """
         self.selectedNode = None
 
+    def clearNodeHover(self):
+        """ Reset currently hovered node to None. """
+        self.hoveredNode = None
+
     undoStack = Property(QObject, lambda self: self._undoStack, constant=True)
     graphChanged = Signal()
     graph = Property(Graph, lambda self: self._graph, notify=graphChanged)
@@ -490,3 +496,7 @@ class UIGraph(QObject):
     selectedNodeChanged = Signal()
     # Currently selected node
     selectedNode = makeProperty(QObject, "_selectedNode", selectedNodeChanged, clearNodeSelection)
+
+    hoveredNodeChanged = Signal()
+    # Currently hovered node
+    hoveredNode = makeProperty(QObject, "_hoveredNode", hoveredNodeChanged, clearNodeHover)

meshroom/ui/qml/GraphEditor/GraphEditor.qml

@@ -308,6 +308,7 @@ Item {
                     width: uigraph.layout.nodeWidth
                     readOnly: root.readOnly
                     selected: uigraph.selectedNode === node
+                    hovered: uigraph.hoveredNode === node
                     onSelectedChanged: if(selected) forceActiveFocus()
 
                     onAttributePinCreated: registerAttributePin(attribute, pin)
@@ -331,6 +332,9 @@ Item {
 
                     onMoved: uigraph.moveNode(node, position)
 
+                    onEntered: uigraph.hoveredNode = node
+                    onExited: uigraph.hoveredNode = null
+
                     Keys.onDeletePressed: uigraph.removeNode(node)
 
                     Behavior on x {

meshroom/ui/qml/GraphEditor/Node.qml

@@ -13,14 +13,17 @@ Item {
     readonly property bool isCompatibilityNode: node.hasOwnProperty("compatibilityIssue")
     readonly property color defaultColor: isCompatibilityNode ? "#444" : "#607D8B"
     property bool selected: false
+    property bool hovered: false
 
     signal pressed(var mouse)
     signal doubleClicked(var mouse)
     signal moved(var position)
+    signal entered()
+    signal exited()
     signal attributePinCreated(var attribute, var pin)
     signal attributePinDeleted(var attribute, var pin)
 
-    implicitHeight: body.height
+    implicitHeight: childrenRect.height
     objectName: node.name
 
     SystemPalette { id: activePalette }
@@ -39,7 +42,8 @@ Item {
     }
 
     MouseArea {
-        anchors.fill: parent
+        width: parent.width
+        height: body.height
         drag.target: parent
         // small drag threshold to avoid moving the node by mistake
         drag.threshold: 2
@@ -47,19 +51,20 @@ Item {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onPressed: root.pressed(mouse)
         onDoubleClicked: root.doubleClicked(mouse)
+        onEntered: root.entered()
+        onExited: root.exited()
         drag.onActiveChanged: {
             if(!drag.active)
                 root.moved(Qt.point(root.x, root.y))
         }
-    }
 
         // Selection border
         Rectangle {
             anchors.fill: parent
             anchors.margins: -border.width
-        visible: root.selected
+            visible: root.selected || root.hovered
             border.width: 2.5
-        border.color: activePalette.highlight
+            border.color: root.selected ? activePalette.highlight : Qt.darker(activePalette.highlight, 1.5)
             opacity: 0.9
             color: "transparent"
         }
@@ -172,3 +177,4 @@ Item {
             }
         }
     }
+}