[ui] improved GraphEditor design

meshroom/ui/qml/AttributePin.qml

@@ -99,14 +99,15 @@ Row {
             point1y: parent.width / 2
             point2x: dragTarget.x + dragTarget.width/2
             point2y: dragTarget.y + dragTarget.height/2
+            color: nameLabel.palette.text
         }
     }
 
     // Attribute name
     Label {
+        id: nameLabel
         text: attribute.name
         font.pointSize: 5
-        color: "#333"  // TODO: style
     }
 
     state: connectMA.pressed ? "Dragging" : ""

meshroom/ui/qml/Edge.qml

@@ -14,7 +14,10 @@ Shape {
     property real point2x
     property real point2y
     property alias thickness: path.strokeWidth
-    property color color
+    property alias color: path.strokeColor
+
+    // BUG: edgeArea is destroyed before path, need to test if not null to avoid warnings
+    readonly property bool containsMouse: edgeArea && edgeArea.containsMouse
 
     signal pressed(var event)
     signal released(var event)
@@ -37,8 +40,7 @@ Shape {
         startX: root.startX
         startY: root.startY
         fillColor: "transparent"
-        // BUG: edgeArea is destroyed before path, need to test if not null to avoid warnings
-        strokeColor: edgeArea && edgeArea.containsMouse ? "#E91E63" : "#3E3E3E"
+        strokeColor: "#3E3E3E"
         capStyle: ShapePath.RoundCap
         strokeWidth: 1
 

meshroom/ui/qml/GraphEditor.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.7
-import QtQuick.Controls 2.0
+import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
 /**
@@ -23,6 +23,7 @@ Item {
 
     clip: true
 
+    SystemPalette { id: palette }
 
     MouseArea {
         id: mouseArea
@@ -79,6 +80,8 @@ Item {
                     property var dstAnchor: dst.nodeItem.mapFromItem(dst, dst.edgeAnchorPos.x, dst.edgeAnchorPos.y)
 
                     edge: object
+                    color: containsMouse ? palette.highlight : palette.text
+                    opacity: 0.7
                     point1x: src.nodeItem.x + srcAnchor.x
                     point1y: src.nodeItem.y + srcAnchor.y
                     point2x: dst.nodeItem.x + dstAnchor.x
@@ -101,8 +104,6 @@ Item {
                 delegate: Node {
                     node: object
                     width: root.nodeWidth
-                    height: Math.max(root.nodeHeight, implicitHeight)
-                    border.color: root.selectedNode == node ? Qt.darker(color, 1.8) : Qt.darker(color, 1.1)
 
                     onAttributePinCreated: registerAttributePin(attribute, pin)
 
@@ -131,7 +132,7 @@ Item {
         }
 
         Button {
-            text: "AutoLayout"
+            text: "Layout"
             onClicked: root.doAutoLayout()
             z: 10
         }

meshroom/ui/qml/Node.qml

@@ -1,20 +1,19 @@
 import QtQuick 2.9
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
 
-Rectangle {
+Item {
     id: root
     property variant node: object
     property color baseColor: "#607D8B"
+    property color shadowColor: "black"
 
     signal pressed(var mouse)
     signal attributePinCreated(var attribute, var pin)
 
-    implicitHeight: body.height + 4
+    implicitHeight: body.height
 
-    color: baseColor
-    opacity: 0.9
-    radius: 2
     MouseArea {
         anchors.fill: parent
         drag.target: parent
@@ -45,32 +44,53 @@ Rectangle {
         }
     }
 
+// Cheaper shadow
+/*
+    Rectangle {
+        id: shadow
+        width: parent.width
+        height: parent.height
+        x: 0.5
+        y: 0.5
+        color: "black"
+        opacity: 0.4
+    }
+*/
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: palette.base
+        layer.enabled: true
+        layer.effect: DropShadow { radius: 2; color: shadowColor }
+    }
+
     Column {
         id: body
         width: parent.width
-        spacing: 2
 
         Label {
             width: parent.width
             horizontalAlignment: Text.AlignHCenter
-            topPadding: 2
+            padding: 4
             text: node.nodeType
             color: "#EEE"
             font.pointSize: 8
+            background: Rectangle {
+                color: root.baseColor
+            }
         }
 
         // Node Chunks
         Rectangle {
             height: 3
-            width: parent.width - 2
+            width: parent.width
             anchors.horizontalCenter: parent.horizontalCenter
-            color: Qt.darker(baseColor, 1.2)
+            color: Qt.darker(baseColor, 1.3)
 
             ListView {
                 id: chunksListView
                 anchors.fill: parent
-                anchors.topMargin: 1
-                anchors.bottomMargin: 1
+
                 interactive: false
                 orientation: Qt.Horizontal
 
@@ -94,6 +114,8 @@ Rectangle {
             }
         }
 
+        Item { width: 1; height: 2}
+
         RowLayout  {
             width: parent.width + 6
             anchors.horizontalCenter: parent.horizontalCenter
@@ -140,5 +162,6 @@ Rectangle {
                 }
             }
         }
+        Item { width: 1; height: 2}
     }
 }