Graph Editor: Add backdrop button to navigation toolbar with selection-aware creation

meshroom/ui/graph.py

@@ -1020,6 +1020,27 @@ def resizeAndMoveNode(self, node, width, height, position=None):
             if position:
                 self.moveNode(node, Position(position.x(), position.y()))
 
+    @Slot(QPoint, int, int, result=QObject)
+    def addBackdropNode(self, position, width, height):
+        """[Undoable]
+        Create a new Backdrop Node at the given position with the given dimensions as a single undo entry.
+
+        Args:
+            position (QPoint): the position of the backdrop node.
+            width (int): the width of the backdrop node.
+            height (int): the height of the backdrop node.
+
+        Returns:
+            BackdropNode: the created node.
+        """
+        with self.groupedGraphModification("Add Backdrop"):
+            node = self.addNewNode("Backdrop", position)
+            if node.hasInternalAttribute("nodeWidth"):
+                self.setAttribute(node.internalAttribute("nodeWidth"), width)
+            if node.hasInternalAttribute("nodeHeight"):
+                self.setAttribute(node.internalAttribute("nodeHeight"), height)
+        return node
+
     @Slot(QPoint)
     def moveSelectedNodesBy(self, offset: QPoint):
         """ Move all the selected nodes by the given `offset`. """

meshroom/ui/qml/GraphEditor/GraphEditor.qml

@@ -1349,6 +1349,41 @@ Item {
                 ToolTip.text: "Auto-Layout"
                 onClicked: uigraph.layout.reset()
             }
+            // Add Backdrop
+            MaterialToolButton {
+                text: MaterialIcons.sticky_note_2
+                ToolTip.text: "Add Backdrop"
+                onClicked: {
+                    var selectedNodes = uigraph.getSelectedNodes()
+                    var backdrop
+                    if (selectedNodes.length > 0) {
+                        // Calculate bounding box of selected nodes
+                        var padding = uigraph.layout.gridSpacing * 0.5
+                        var minX = Number.MAX_VALUE
+                        var minY = Number.MAX_VALUE
+                        var maxX = -Number.MAX_VALUE
+                        var maxY = -Number.MAX_VALUE
+                        for (var i = 0; i < selectedNodes.length; i++) {
+                            var n = selectedNodes[i]
+                            var nw = n.nodeWidth > 0 ? n.nodeWidth : uigraph.layout.nodeWidth
+                            var nh = n.nodeHeight > 0 ? n.nodeHeight : uigraph.layout.nodeHeight
+                            minX = Math.min(minX, n.x)
+                            minY = Math.min(minY, n.y)
+                            maxX = Math.max(maxX, n.x + nw)
+                            maxY = Math.max(maxY, n.y + nh)
+                        }
+                        var bboxX = minX - padding
+                        var bboxY = minY - 2 * padding  // minus padding and title bar height
+                        var bboxW = Math.round(maxX - minX + 2 * padding)
+                        var bboxH = Math.round(maxY - minY + 2 * padding)
+                        backdrop = uigraph.addBackdropNode(Qt.point(bboxX, bboxY), bboxW, bboxH)
+                    } else {
+                        backdrop = uigraph.addNewNode("Backdrop", getCenterPosition())
+                    }
+                    uigraph.selectedNode = backdrop
+                    uigraph.selectNodes([backdrop])
+                }
+            }
 
             // Separator
             Rectangle {