Merge pull request #2644 from alicevision/dev/EdgesRemoval

[ui]: Introduction of multiple ways to remove Node Edges

Author: fabiencastan

meshroom/ui/components/edge.py

@@ -1,4 +1,4 @@
-from PySide6.QtCore import Signal, Property, QPointF, Qt, QObject
+from PySide6.QtCore import Signal, Property, QPointF, Qt, QObject, Slot, QRectF
 from PySide6.QtGui import QPainterPath, QVector2D
 from PySide6.QtQuick import QQuickItem
 
@@ -110,6 +110,17 @@ def setContainsMouse(self, value):
         self._containsMouse = value
         self.containsMouseChanged.emit()
 
+    @Slot(QPointF, QPointF, result=bool)
+    def intersectsSegment(self, p1, p2):
+        """ Checks whether the given segment (p1, p2) intersects with the Path. """
+        path = QPainterPath()
+        # Starting point
+        path.moveTo(p1)
+        # Create a diagonal line to the other end of the rect
+        path.lineTo(p2)
+        v = self._path.intersects(path)
+        return v
+
     thicknessChanged = Signal()
     thickness = Property(float, getThickness, setThickness, notify=thicknessChanged)
     curveScaleChanged = Signal()

meshroom/ui/graph.py

@@ -870,6 +870,25 @@ def removeEdge(self, edge):
         else:
             self.push(commands.RemoveEdgeCommand(self._graph, edge))
 
+    @Slot(list)
+    def deleteEdgesByIndices(self, indices):
+        with self.groupedGraphModification("Remove Edges"):
+            copied = list(self._graph.edges)
+            for index in indices:
+                self.removeEdge(copied[index])
+
+    @Slot()
+    def disconnectSelectedNodes(self):
+        with self.groupedGraphModification("Disconnect Nodes"):
+            selectedNodes = self.getSelectedNodes()
+            for edge in self._graph.edges[:]:
+                # Remove only the edges which are coming or going out of the current selection
+                if edge.src.node in selectedNodes and edge.dst.node in selectedNodes:
+                    continue
+
+                if edge.dst.node in selectedNodes or edge.src.node in selectedNodes:
+                    self.removeEdge(edge)
+
     @Slot(Edge, Attribute, Attribute, result=Edge)
     def replaceEdge(self, edge, newSrc, newDst):
         with self.groupedGraphModification(f"Replace Edge '{edge.src.getFullNameToNode()}'->'{edge.dst.getFullNameToNode()}' with '{newSrc.getFullNameToNode()}'->'{newDst.getFullNameToNode()}'"):

meshroom/ui/qml/Controls/DelegateSelectionLine.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import Meshroom.Helpers
+
+/*
+A SelectionLine that can be used to select delegates in a model instantiator (Repeater, ListView...).
+Interesection test is done in the coordinate system of the container Item, using delegate's bounding boxes.
+The list of selected indices is emitted when the selection ends.
+*/
+
+SelectionLine {
+    id: root
+
+    // The Item instantiating the delegates.
+    property Item modelInstantiator
+    // The Item containing the delegates (used for coordinate mapping).
+    property Item container
+    // Emitted when the selection has ended, with the list of selected indices and modifiers.
+    signal delegateSelectionEnded(list<int> indices, int modifiers)
+
+    onSelectionEnded: function(selectionP1, selectionP2, modifiers) {
+        let selectedIndices = [];
+        const mappedP1 = mapToItem(container, selectionP1);
+        const mappedP2 = mapToItem(container, selectionP2);
+        for (var i = 0; i < modelInstantiator.count; ++i) {
+            const delegate = modelInstantiator.itemAt(i);
+            if (delegate.intersectsSegment(mappedP1, mappedP2)) {
+                selectedIndices.push(i);
+            }
+        }
+        delegateSelectionEnded(selectedIndices, modifiers);
+    }
+}

meshroom/ui/qml/Controls/SelectionLine.qml

@@ -0,0 +1,78 @@
+import QtQuick
+import QtQuick.Shapes
+
+/*
+Simple selection line that can be used by a MouseArea.
+
+Usage:
+1. Create a MouseArea and a selectionShape.
+2. Bind the selectionShape to the MouseArea by setting the `mouseArea` property.
+3. Call startSelection() with coordinates when the selection starts.
+4. Call endSelection() when the selection ends.
+5. Listen to the selectionEnded signal to get the segment (defined by 2 points).
+*/
+
+Item {
+    id: root
+
+    property MouseArea mouseArea
+
+    readonly property bool active: mouseArea.drag.target == dragTarget
+
+    signal selectionEnded(point selectionP1, point selectionP2, int modifiers)
+
+    function startSelection(mouse) {
+        dragTarget.startPos.x = dragTarget.x = mouse.x;
+        dragTarget.startPos.y = dragTarget.y = mouse.y;
+        dragTarget.modifiers = mouse.modifiers;
+        mouseArea.drag.target = dragTarget;
+    }
+
+    function endSelection() {
+        if (!active) {
+            return;
+        }
+        mouseArea.drag.target = null;
+        const p1 = Qt.point(selectionShape.x, selectionShape.y);
+        const p2 = Qt.point(selectionShape.x + selectionShape.width, selectionShape.y + selectionShape.height);
+        selectionEnded(p1, p2, dragTarget.modifiers);
+    }
+
+    visible: active
+
+    Item {
+        id: selectionShape
+        x: dragTarget.startPos.x
+        y: dragTarget.startPos.y
+        width: dragTarget.x - dragTarget.startPos.x
+        height: dragTarget.y - dragTarget.startPos.y
+
+        Shape {
+            id: dynamicLine;
+            width: selectionShape.width;
+            height: selectionShape.height;
+            anchors.fill: parent;
+
+            ShapePath {
+                strokeWidth: 2;
+                strokeStyle: ShapePath.DashLine;
+                strokeColor: "#CC3E3E";
+                dashPattern: [3, 2];
+
+                startX: 0;
+                startY: 0;
+
+                PathLine {
+                    x: selectionShape.width;
+                    y: selectionShape.height;
+                }
+            }
+        }
+    }
+
+    Item {
+        id: dragTarget
+        property point startPos
+        property var modifiers
+    }
+}

meshroom/ui/qml/Controls/qmldir

@@ -18,4 +18,6 @@ MScrollBar 1.0 MScrollBar.qml
 MSplitView 1.0 MSplitView.qml
 DirectionalLightPane 1.0 DirectionalLightPane.qml
 SelectionBox 1.0 SelectionBox.qml
-DelegateSelectionBox 1.0 DelegateSelectionBox.qml
+SelectionLine 1.0 SelectionLine.qml
+DelegateSelectionBox 1.0 DelegateSelectionBox.qml
+DelegateSelectionLine 1.0 DelegateSelectionLine.qml

meshroom/ui/qml/GraphEditor/Edge.qml

@@ -23,7 +23,7 @@ Item {
     property int loopSize: 0
     property int iteration: 0
 
-    // BUG: edgeArea is destroyed before path, need to test if not null to avoid warnings
+    // Note: edgeArea is destroyed before path, so we need to test if not null to avoid warnings.
     readonly property bool containsMouse: (loopArea && loopArea.containsMouse) || (edgeArea && edgeArea.containsMouse)
 
     signal pressed(var event)
@@ -40,6 +40,16 @@ Item {
     property real endY: height
 
 
+    function intersectsSegment(p1, p2) {
+        /**
+         * Detects whether a line along the given rects diagonal intersects with the edge mouse area.
+         */
+        // The edgeArea is within the parent Item and its bounds and position are relative to its parent
+        // Map the original rect to the coordinates of the edgeArea by subtracting the parent's coordinates from the rect
+        // This mapped rect would ensure that the rect coordinates map to 0 of the edge area
+        return edgeArea.intersectsSegment(Qt.point(p1.x - x, p1.y - y), Qt.point(p2.x - x, p2.y - y));
+    }
+
     Shape {
         anchors.fill: parent
         // Cause rendering artifacts when enabled (and don't support hot reload really well)

meshroom/ui/qml/GraphEditor/GraphEditor.qml

@@ -113,9 +113,14 @@ Item {
             }
         } else if (event.key === Qt.Key_D) {
             duplicateNode(event.modifiers === Qt.AltModifier)
-        } else if (event.key === Qt.Key_X && event.modifiers === Qt.ControlModifier) {
-            copyNodes()
-            uigraph.removeSelectedNodes()
+        } else if (event.key === Qt.Key_X) {
+            if (event.modifiers === Qt.ControlModifier) {
+                copyNodes()
+                uigraph.removeSelectedNodes()
+            }
+            else {
+                uigraph.disconnectSelectedNodes()
+            }
         } else if (event.key === Qt.Key_C) {
             if (event.modifiers === Qt.ControlModifier) {
                 copyNodes()
@@ -138,6 +143,7 @@ Item {
         id: mouseArea
         anchors.fill: parent
         property double factor: 1.15
+        property bool removingEdges: false;
         // Activate multisampling for edges antialiasing
         layer.enabled: true
         layer.samples: 8
@@ -146,7 +152,7 @@ Item {
         acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
         drag.threshold: 0
         drag.smoothed: false
-        cursorShape: drag.target == draggable ? Qt.ClosedHandCursor : Qt.ArrowCursor
+        cursorShape: drag.target == draggable ? Qt.ClosedHandCursor : removingEdges ? Qt.CrossCursor : Qt.ArrowCursor
 
         onWheel: function(wheel) {
             var zoomFactor = wheel.angleDelta.y > 0 ? factor : 1 / factor
@@ -171,9 +177,15 @@ Item {
             if (mouse.button == Qt.MiddleButton || (mouse.button == Qt.LeftButton && mouse.modifiers & Qt.AltModifier)) {
                 drag.target = draggable // start drag
             }
+            if (mouse.button == Qt.LeftButton && (mouse.modifiers & Qt.ControlModifier) && (mouse.modifiers & Qt.AltModifier)) {
+                edgeSelectionLine.startSelection(mouse);
+                removingEdges = true;
+            }
         }
 
         onReleased: {
+            removingEdges = false;
+            edgeSelectionLine.endSelection()
             nodeSelectionBox.endSelection();
             drag.target = null;
             root.forceActiveFocus()
@@ -497,7 +509,7 @@ Item {
                         if (event.button) {
                             if (canEdit && (event.modifiers & Qt.AltModifier)) {
                                 uigraph.removeEdge(edge)
-                            } else {
+                            } else if (event.button == Qt.RightButton) {
                                 edgeMenu.currentEdge = edge
                                 edgeMenu.forLoop = forLoop
                                 var spawnPosition = mouseArea.mapToItem(draggable, mouseArea.mouseX, mouseArea.mouseY)
@@ -726,6 +738,13 @@ Item {
                             pasteNodes()
                         }
                     }
+                    MenuItem {
+                        text: "Disconnect Node(s)";
+                        enabled: true;
+                        ToolTip.text: "Disconnect all edges from the selected Node(s)";
+                        ToolTip.visible: hovered;
+                        onTriggered: uigraph.disconnectSelectedNodes();
+                    }
                     MenuItem {
                         text: "Duplicate Node(s)" + (duplicateFollowingButton.hovered ? " From Here" : "")
                         enabled: true
@@ -858,6 +877,10 @@ Item {
                     onAttributePinCreated: function(attribute, pin) { registerAttributePin(attribute, pin) }
                     onAttributePinDeleted: function(attribute, pin) { unregisterAttributePin(attribute, pin) }
 
+                    onShaked: {
+                        uigraph.disconnectSelectedNodes();
+                    }
+
                     onPressed: function(mouse) {
                         nodeRepeater.updateSelectionOnClick = true;
                         nodeRepeater.ongoingDrag = true;
@@ -953,6 +976,10 @@ Item {
                         if(!selected || !dragging) {
                             return;
                         }
+
+                        // Check for shake on the node
+                        checkForShake();
+
                         // Compute offset between the delegate and the stored node position.
                         const offset = Qt.point(x - node.x, y - node.y);
 
@@ -999,6 +1026,16 @@ Item {
             }
         }
 
+        DelegateSelectionLine {
+            id: edgeSelectionLine
+            mouseArea: mouseArea
+            modelInstantiator: edgesRepeater
+            container: draggable
+            onDelegateSelectionEnded: function(selectedIndices, modifiers) {
+                uigraph.deleteEdgesByIndices(selectedIndices);
+            }
+        }
+
         DropArea {
             id: dropArea
             anchors.fill: parent