3pp-mirror/Meshroom
1
0
Fork 0
mirror of https://github.com/alicevision/Meshroom.git synced 2025-05-24 06:26:29 +02:00
Code Issues Projects Releases Packages Wiki Activity

[ui] GraphEditor: visualize edges between params (non File attributes)

Browse source
This commit is contained in:
Fabien Castan 2020-12-18 01:13:54 +01:00
parent b75ccdb02f
commit ecf10a65f7
3 changed files with 254 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

2
meshroom/core/attribute.py
View file

@ -137,7 +137,7 @@ class Attribute(BaseObject):
self.valueChanged.emit() self.valueChanged.emit()
def resetValue(self): def resetValue(self):
self._value = "" self._value = self.attributeDesc.value
def requestGraphUpdate(self): def requestGraphUpdate(self):
if self.node.graph: if self.node.graph:

16
meshroom/ui/qml/GraphEditor/GraphEditor.qml
View file

@ -236,10 +236,10 @@ Item {
model: nodeRepeater.loaded && root.graph ? root.graph.edges : undefined model: nodeRepeater.loaded && root.graph ? root.graph.edges : undefined
delegate: Edge { delegate: Edge {
property var src: edge ? root._attributeToDelegate[edge.src] : undefined property var src: root._attributeToDelegate[edge.src]
property var dst: edge ? root._attributeToDelegate[edge.dst] : undefined property var dst: root._attributeToDelegate[edge.dst]
property var srcAnchor: src.nodeItem.mapFromItem(src, src.outputAnchorPos.x, src.outputAnchorPos.y) property bool isValidEdge: src != undefined && dst != undefined
property var dstAnchor: dst.nodeItem.mapFromItem(dst, dst.inputAnchorPos.x, dst.inputAnchorPos.y) visible: isValidEdge
property bool inFocus: containsMouse || (edgeMenu.opened && edgeMenu.currentEdge == edge) property bool inFocus: containsMouse || (edgeMenu.opened && edgeMenu.currentEdge == edge)
@ -247,10 +247,10 @@ Item {
color: inFocus ? activePalette.highlight : activePalette.text color: inFocus ? activePalette.highlight : activePalette.text
thickness: inFocus ? 2 : 1 thickness: inFocus ? 2 : 1
opacity: 0.7 opacity: 0.7
point1x: src.nodeItem.x + srcAnchor.x point1x: isValidEdge ? src.globalX + src.outputAnchorPos.x : 0
point1y: src.nodeItem.y + srcAnchor.y point1y: isValidEdge ? src.globalY + src.outputAnchorPos.y : 0
point2x: dst.nodeItem.x + dstAnchor.x point2x: isValidEdge ? dst.globalX + dst.inputAnchorPos.x : 0
point2y: dst.nodeItem.y + dstAnchor.y point2y: isValidEdge ? dst.globalY + dst.inputAnchorPos.y : 0
onPressed: { onPressed: {
const canEdit = !edge.dst.node.locked const canEdit = !edge.dst.node.locked

394
meshroom/ui/qml/GraphEditor/Node.qml
View file

@ -27,6 +27,11 @@ Item {
readonly property color defaultColor: isCompatibilityNode ? "#444" : activePalette.base readonly property color defaultColor: isCompatibilityNode ? "#444" : activePalette.base
property color baseColor: defaultColor property color baseColor: defaultColor
Item {
id: m
property bool displayParams: false
}
// Mouse interaction related signals // Mouse interaction related signals
signal pressed(var mouse) signal pressed(var mouse)
signal doubleClicked(var mouse) signal doubleClicked(var mouse)
@ -60,7 +65,7 @@ Item {
} }
// Whether an attribute can be displayed as an attribute pin on the node // Whether an attribute can be displayed as an attribute pin on the node
function isDisplayableAsPin(attribute) { function isFileAttributeBaseType(attribute) {
// ATM, only File attributes are meant to be connected // ATM, only File attributes are meant to be connected
// TODO: review this if we want to connect something else // TODO: review this if we want to connect something else
return attribute.type == "File" return attribute.type == "File"
@ -110,7 +115,7 @@ Item {
// Selection border // Selection border
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: nodeContent
anchors.margins: -border.width anchors.margins: -border.width
visible: root.selected || root.hovered visible: root.selected || root.hovered
border.width: 2.5 border.width: 2.5
@ -120,10 +125,9 @@ Item {
color: "transparent" color: "transparent"
} }
// Background
Rectangle { Rectangle {
id: background id: background
anchors.fill: parent anchors.fill: nodeContent
color: Qt.lighter(activePalette.base, 1.4) color: Qt.lighter(activePalette.base, 1.4)
layer.enabled: true layer.enabled: true
layer.effect: DropShadow { radius: 3; color: shadowColor } layer.effect: DropShadow { radius: 3; color: shadowColor }
@ -131,192 +135,284 @@ Item {
opacity: 0.7 opacity: 0.7
} }
// Data Layout Rectangle {
Column { id: nodeContent
id: body
width: parent.width width: parent.width
height: childrenRect.height
color: "transparent"
// Header // Data Layout
Rectangle { Column {
id: header id: body
width: parent.width width: parent.width
height: headerLayout.height
color: root.selected ? activePalette.highlight : root.baseColor
radius: background.radius
// Fill header's bottom radius // Header
Rectangle { Rectangle {
id: header
width: parent.width width: parent.width
height: parent.radius height: headerLayout.height
anchors.bottom: parent.bottom color: root.selected ? activePalette.highlight : root.baseColor
color: parent.color radius: background.radius
z: -1
}
// Header Layout // Fill header's bottom radius
RowLayout { Rectangle {
id: headerLayout width: parent.width
width: parent.width height: parent.radius
spacing: 0 anchors.bottom: parent.bottom
color: parent.color
// Node Name z: -1
Label {
Layout.fillWidth: true
text: node ? node.label : ""
padding: 4
color: root.selected ? "white" : activePalette.text
elide: Text.ElideMiddle
font.pointSize: 8
} }
// Node State icons // Header Layout
RowLayout { RowLayout {
Layout.fillWidth: true id: headerLayout
Layout.alignment: Qt.AlignRight width: parent.width
Layout.rightMargin: 2 spacing: 0
spacing: 2
// CompatibilityBadge icon for CompatibilityNodes // Node Name
Loader { Label {
active: root.isCompatibilityNode Layout.fillWidth: true
sourceComponent: CompatibilityBadge { text: node ? node.label : ""
sourceComponent: iconDelegate padding: 4
canUpgrade: root.node.canUpgrade color: root.selected ? "white" : activePalette.text
issueDetails: root.node.issueDetails elide: Text.ElideMiddle
font.pointSize: 8
}
// Node State icons
RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignRight
Layout.rightMargin: 2
spacing: 2
// CompatibilityBadge icon for CompatibilityNodes
Loader {
active: root.isCompatibilityNode
sourceComponent: CompatibilityBadge {
sourceComponent: iconDelegate
canUpgrade: root.node.canUpgrade
issueDetails: root.node.issueDetails
}
} }
}
// Data sharing indicator // Data sharing indicator
// Note: for an unknown reason, there are some performance issues with the UI refresh. // Note: for an unknown reason, there are some performance issues with the UI refresh.
// Example: a node duplicated 40 times will be slow while creating another identical node // Example: a node duplicated 40 times will be slow while creating another identical node
// (sharing the same uid) will not be as slow. If save, quit and reload, it will become slow. // (sharing the same uid) will not be as slow. If save, quit and reload, it will become slow.
MaterialToolButton { MaterialToolButton {
property string baseText: "<b>Shares internal folder (data) with other node(s). Hold click for details.</b>" property string baseText: "<b>Shares internal folder (data) with other node(s). Hold click for details.</b>"
property string toolTipText: visible ? baseText : "" property string toolTipText: visible ? baseText : ""
visible: node.hasDuplicates visible: node.hasDuplicates
text: MaterialIcons.layers text: MaterialIcons.layers
font.pointSize: 7 font.pointSize: 7
padding: 2 padding: 2
palette.text: Colors.sysPalette.text palette.text: Colors.sysPalette.text
ToolTip.text: toolTipText ToolTip.text: toolTipText
onPressed: { offsetReleased.running = false; toolTipText = visible ? generateDuplicateList() : "" } onPressed: { offsetReleased.running = false; toolTipText = visible ? generateDuplicateList() : "" }
onReleased: { toolTipText = "" ; offsetReleased.running = true } onReleased: { toolTipText = "" ; offsetReleased.running = true }
onCanceled: released() onCanceled: released()
// Used for a better user experience with the button // Used for a better user experience with the button
// Avoid to change the text too quickly // Avoid to change the text too quickly
Timer { Timer {
id: offsetReleased id: offsetReleased
interval: 750; running: false; repeat: false interval: 750; running: false; repeat: false
onTriggered: parent.toolTipText = visible ? parent.baseText : "" onTriggered: parent.toolTipText = visible ? parent.baseText : ""
}
} }
}
// Submitted externally indicator // Submitted externally indicator
MaterialLabel { MaterialLabel {
visible: ["SUBMITTED", "RUNNING"].includes(node.globalStatus) && node.chunks.count > 0 && node.globalExecMode === "EXTERN" visible: ["SUBMITTED", "RUNNING"].includes(node.globalStatus) && node.chunks.count > 0 && node.globalExecMode === "EXTERN"
text: MaterialIcons.cloud text: MaterialIcons.cloud
padding: 2 padding: 2
font.pointSize: 7 font.pointSize: 7
palette.text: Colors.sysPalette.text palette.text: Colors.sysPalette.text
ToolTip.text: "Computed Externally" ToolTip.text: "Computed Externally"
} }
// Lock indicator // Lock indicator
MaterialLabel { MaterialLabel {
visible: root.readOnly visible: root.readOnly
text: MaterialIcons.lock text: MaterialIcons.lock
padding: 2 padding: 2
font.pointSize: 7 font.pointSize: 7
palette.text: "red" palette.text: "red"
ToolTip.text: "Locked" ToolTip.text: "Locked"
}
} }
} }
} }
}
// Node Chunks // Node Chunks
NodeChunks { NodeChunks {
defaultColor: Colors.sysPalette.mid defaultColor: Colors.sysPalette.mid
implicitHeight: 3 implicitHeight: 3
width: parent.width width: parent.width
model: node ? node.chunks : undefined model: node ? node.chunks : undefined
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Colors.sysPalette.mid color: Colors.sysPalette.mid
z: -1 z: -1
}
} }
}
// Vertical Spacer // Vertical Spacer
Item { width: parent.width; height: 2 } Item { width: parent.width; height: 2 }
// Input/Output Attributes // Input/Output Attributes
Item { Item {
id: nodeAttributes id: nodeAttributes
width: parent.width - 2 width: parent.width - 2
height: childrenRect.height height: childrenRect.height
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
enabled: !root.readOnly && !root.isCompatibilityNode enabled: !root.readOnly && !root.isCompatibilityNode
Column {
width: parent.width
spacing: 5
bottomPadding: 2
Column { Column {
id: outputs id: attributesColumn
width: parent.width width: parent.width
spacing: 3 spacing: 5
Repeater { bottomPadding: 2
model: node ? node.attributes : undefined
delegate: Loader { Column {
id: outputLoader id: outputs
active: object.isOutput && isDisplayableAsPin(object) width: parent.width
anchors.right: parent.right spacing: 3
width: outputs.width Repeater {
model: node ? node.attributes : undefined
sourceComponent: AttributePin { delegate: Loader {
id: outPin id: outputLoader
nodeItem: root active: object.isOutput && isFileAttributeBaseType(object)
attribute: object anchors.right: parent.right
width: outputs.width
readOnly: root.readOnly sourceComponent: AttributePin {
onPressed: root.pressed(mouse) id: outPin
Component.onCompleted: attributePinCreated(object, outPin) nodeItem: root
Component.onDestruction: attributePinDeleted(attribute, outPin) attribute: object
property real globalX: root.x + nodeAttributes.x + outputs.x + outputLoader.x + outPin.x
property real globalY: root.y + nodeAttributes.y + outputs.y + outputLoader.y + outPin.y
readOnly: root.readOnly
onPressed: root.pressed(mouse)
Component.onCompleted: attributePinCreated(object, outPin)
Component.onDestruction: attributePinDeleted(attribute, outPin)
}
} }
} }
} }
}
Column { Column {
id: inputs id: inputs
width: parent.width width: parent.width
spacing: 3 spacing: 3
Repeater { Repeater {
model: node ? node.attributes : undefined model: node ? node.attributes : undefined
delegate: Loader { delegate: Loader {
active: !object.isOutput && isDisplayableAsPin(object) id: inputLoader
width: inputs.width active: !object.isOutput && isFileAttributeBaseType(object)
width: inputs.width
sourceComponent: AttributePin { sourceComponent: AttributePin {
id: inPin id: inPin
nodeItem: root nodeItem: root
attribute: object attribute: object
readOnly: root.readOnly
Component.onCompleted: attributePinCreated(attribute, inPin) property real globalX: root.x + nodeAttributes.x + inputs.x + inputLoader.x + inPin.x
Component.onDestruction: attributePinDeleted(attribute, inPin) property real globalY: root.y + nodeAttributes.y + inputs.y + inputLoader.y + inPin.y
onPressed: root.pressed(mouse)
onChildPinCreated: attributePinCreated(childAttribute, inPin) readOnly: root.readOnly
onChildPinDeleted: attributePinDeleted(childAttribute, inPin) Component.onCompleted: attributePinCreated(attribute, inPin)
Component.onDestruction: attributePinDeleted(attribute, inPin)
onPressed: root.pressed(mouse)
onChildPinCreated: attributePinCreated(childAttribute, inPin)
onChildPinDeleted: attributePinDeleted(childAttribute, inPin)
}
} }
} }
} }
// Vertical Spacer
Rectangle {
height: inputParams.height > 0 ? 3 : 0
visible: (height == 3)
Behavior on height { PropertyAnimation {easing.type: Easing.Linear} }
width: parent.width
color: Colors.sysPalette.mid
MaterialToolButton {
text: " "
width: parent.width
height: parent.height
padding: 0
spacing: 0
anchors.margins: 0
font.pointSize: 6
onClicked: {
m.displayParams = ! m.displayParams
}
}
}
Rectangle {
id: inputParamsRect
width: parent.width
height: childrenRect.height
color: "transparent"
Column {
id: inputParams
width: parent.width
spacing: 3
Repeater {
id: inputParamsRepeater
model: node ? node.attributes : undefined
delegate: Loader {
id: paramLoader
active: !object.isOutput && !isFileAttributeBaseType(object)
property bool isFullyActive: (m.displayParams || object.isLink || object.hasOutputConnections)
width: parent.width
sourceComponent: AttributePin {
id: inPin
nodeItem: root
property real globalX: root.x + nodeAttributes.x + inputParamsRect.x + paramLoader.x + inPin.x
property real globalY: root.y + nodeAttributes.y + inputParamsRect.y + paramLoader.y + inPin.y
height: isFullyActive ? childrenRect.height : 0
Behavior on height { PropertyAnimation {easing.type: Easing.Linear} }
visible: (height == childrenRect.height)
attribute: object
readOnly: root.readOnly
Component.onCompleted: attributePinCreated(attribute, inPin)
Component.onDestruction: attributePinDeleted(attribute, inPin)
onPressed: root.pressed(mouse)
onChildPinCreated: attributePinCreated(childAttribute, inPin)
onChildPinDeleted: attributePinDeleted(childAttribute, inPin)
}
}
}
}
}
MaterialToolButton {
text: root.hovered ? (m.displayParams ? MaterialIcons.arrow_drop_up : MaterialIcons.arrow_drop_down) : " "
Layout.alignment: Qt.AlignBottom
width: parent.width
height: 5
padding: 0
spacing: 0
anchors.margins: 0
font.pointSize: 10
onClicked: {
m.displayParams = ! m.displayParams
}
}
} }
} }
} }