From 9341cb606853c3e3ecd0cf1a28ac4abe8a778340 Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Mon, 18 Nov 2024 16:04:12 +0100 Subject: [PATCH 1/7] Refs #21818: Make topic label shorter in DomainGraph & add hover Signed-off-by: Carlosespicur --- qml/DomainGraphLayout.qml | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index 64f0ff18..95fbe5b6 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -67,6 +67,8 @@ Item readonly property int connection_thickness_: 6 readonly property int elements_spacing_: 5 readonly property int containers_spacing_: 100 + readonly property int topic_tag_size_: 150 + readonly property int max_topic_name_size_: 50 readonly property int endpoint_height_: 30 readonly property int first_indentation_: 5 readonly property int icon_size_: 18 @@ -78,6 +80,7 @@ Item readonly property int topic_thickness_: 10 readonly property int wheel_displacement_: 30 readonly property int timer_initial_ms_interval_: 200 + readonly property int hover_text_offset_: 50 readonly property string topic_color_: Theme.grey readonly property string host_color_: Theme.darkGrey readonly property string user_color_: Theme.eProsimaLightBlue @@ -217,7 +220,7 @@ Item Rectangle { id: topic_tag - implicitWidth: topicRowLayout.implicitWidth + implicitWidth: topic_tag_size_ height: label_height_ color: topic_color_ radius: radius_ @@ -237,12 +240,16 @@ Item text: modelData["alias"] Layout.rightMargin: 2* first_indentation_ color: "white" + Layout.preferredWidth: max_topic_name_size_ + elide: Text.ElideRight } } MouseArea { + id: topic_tag_mouse_area anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton + hoverEnabled: true onClicked: { if(mouse.button & Qt.RightButton) { @@ -252,6 +259,15 @@ Item } } } + Label { + id: hover_label + visible: false + anchors.top: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: hover_text_offset_ + ToolTip.text: modelData["alias"] + ToolTip.visible: topic_tag_mouse_area.containsMouse + } } // Topic vertical line From 0b94fa42aeece940be372b7e5c87079089140ac0 Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Tue, 19 Nov 2024 10:39:13 +0100 Subject: [PATCH 2/7] Refs #21818: Fix topic tag size, add hover & alternate colors Signed-off-by: Carlosespicur --- qml/DomainGraphLayout.qml | 13 +++++++++---- qml/GraphConnection.qml | 16 ++++++++++++++++ 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index 95fbe5b6..20c81034 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -40,6 +40,7 @@ Item // Private properties property var topic_locations_: {} // topic information needed for connection representation + property var topic_color_map_: {} // map with boolean values to alternate colors in tags and connections property var endpoint_topic_connections_: {} // endpoint information needed for connection representation property var topic_painted_: [] // already painted topic connection references property var endpoint_painted_: [] // already painted endpoint connection references @@ -82,6 +83,7 @@ Item readonly property int timer_initial_ms_interval_: 200 readonly property int hover_text_offset_: 50 readonly property string topic_color_: Theme.grey + readonly property string topic_color2_: Theme.darkGrey readonly property string host_color_: Theme.darkGrey readonly property string user_color_: Theme.eProsimaLightBlue readonly property string process_color_: Theme.eProsimaDarkBlue @@ -201,6 +203,7 @@ Item "id": topicsList.currentItem.topic_id, "width" : draw_width + topicsList.currentItem.width/2 } + topic_color_map_[topicsList.currentItem.topic_id] = topicsList.currentItem.even_position draw_width += topicsList.currentItem.width + elements_spacing_ } @@ -212,6 +215,7 @@ Item delegate: Rectangle { property string topic_id: modelData["id"] + property bool even_position: index % 2 === 0 implicitWidth: topic_tag.implicitWidth height: topicsList.height color: "transparent" @@ -222,7 +226,7 @@ Item id: topic_tag implicitWidth: topic_tag_size_ height: label_height_ - color: topic_color_ + color: parent.even_position ? topic_color_ : topic_color2_ radius: radius_ RowLayout { @@ -278,7 +282,7 @@ Item anchors.bottom: parent.bottom anchors.horizontalCenter: topic_tag.horizontalCenter width: topic_thickness_ - color: topic_color_ + color: parent.even_position ? topic_color_ : topic_color2_ } Connections { @@ -378,7 +382,7 @@ Item ,"y": endpoint_topic_connections_[key]["y"] - (connection_thickness_ / 2) ,"width": topic_locations_[topic_id]["width"] ,"height":connection_thickness_, "z":200, "left_margin": 2*elements_spacing_ - ,"arrow_color": topic_color_, "background_color": background_color.color + ,"arrow_color": topic_color_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color ,"endpoint_id": key } var connection_bar = arrow_component.createObject(topic_connections, input) topic_painted_[topic_painted_.length] = key; @@ -1331,7 +1335,7 @@ Item ,"left_direction": endpoint_topic_connections_[key]["left_direction"] ,"width": 5*elements_spacing_ ,"height":connection_thickness_, "z":200 - ,"arrow_color": topic_color_, "background_color": background_color.color + ,"arrow_color": topic_color_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color ,"endpoint_id": key } var connection_bar = arrow_component.createObject(mainSpace, input) endpoint_painted_[endpoint_painted_.length] = key @@ -1699,6 +1703,7 @@ Item function clear_graph() { topic_locations_ = {} + topic_color_map_ = {} endpoint_topic_connections_ = {} endpoint_painted_ = [] topic_painted_ = [] diff --git a/qml/GraphConnection.qml b/qml/GraphConnection.qml index aa984d02..8d9d6779 100644 --- a/qml/GraphConnection.qml +++ b/qml/GraphConnection.qml @@ -1,4 +1,5 @@ import QtQuick 2.0 +import QtGraphicalEffects 1.15 Item { id: graphConnection @@ -81,10 +82,18 @@ Item { anchors.left: parent.left; anchors.leftMargin: left_arrow_margin_ IconSVG { + id: left_arrow_icon name: "left_arrow" color: "grey" size: arrow_size_ } + + // Change left arrow icon color to fit base_arrow color + ColorOverlay { + anchors.fill: left_arrow_icon + source: left_arrow_icon + color: arrow_color + } } // main connection @@ -162,6 +171,13 @@ Item { color: "grey" size: arrow_size_ + right_arrow_margin_ } + + // Change right arrow icon color to fit base_arrow color + ColorOverlay { + anchors.fill: right_arrow + source: right_arrow + color: arrow_color + } } function topid_hidden(entityId, is_hidden) From 3c8aaf7b5f8f9c5aaec81bfcdd864ae3f87135cc Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Wed, 20 Nov 2024 11:03:55 +0100 Subject: [PATCH 3/7] Refs #21818: Intercalate DomainGraph topics Signed-off-by: Carlosespicur --- imports/Theme/Theme.qml | 1 + qml/DomainGraphLayout.qml | 59 ++++++++++++++++++++++----------------- 2 files changed, 34 insertions(+), 26 deletions(-) diff --git a/imports/Theme/Theme.qml b/imports/Theme/Theme.qml index 3c5655c2..1c48527f 100644 --- a/imports/Theme/Theme.qml +++ b/imports/Theme/Theme.qml @@ -10,6 +10,7 @@ QtObject { readonly property color eProsimaYellow: "#ffc001" readonly property color grey: "#808080" + readonly property color midGrey: "#585858" readonly property color lightGrey: "#d3d3d3" readonly property color darkGrey: "#3e3e3e" readonly property color x11Grey: "#BEBEBE" diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index 20c81034..81145adf 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -40,7 +40,7 @@ Item // Private properties property var topic_locations_: {} // topic information needed for connection representation - property var topic_color_map_: {} // map with boolean values to alternate colors in tags and connections + property var topic_style_map_: {} // map with boolean values to alternate style in topics tags and connections property var endpoint_topic_connections_: {} // endpoint information needed for connection representation property var topic_painted_: [] // already painted topic connection references property var endpoint_painted_: [] // already painted endpoint connection references @@ -69,7 +69,7 @@ Item readonly property int elements_spacing_: 5 readonly property int containers_spacing_: 100 readonly property int topic_tag_size_: 150 - readonly property int max_topic_name_size_: 50 + readonly property int max_topic_name_size_: 100 readonly property int endpoint_height_: 30 readonly property int first_indentation_: 5 readonly property int icon_size_: 18 @@ -83,7 +83,7 @@ Item readonly property int timer_initial_ms_interval_: 200 readonly property int hover_text_offset_: 50 readonly property string topic_color_: Theme.grey - readonly property string topic_color2_: Theme.darkGrey + readonly property string topic_color2_: Theme.midGrey readonly property string host_color_: Theme.darkGrey readonly property string user_color_: Theme.eProsimaLightBlue readonly property string process_color_: Theme.eProsimaDarkBlue @@ -142,12 +142,13 @@ Item ListView { id: topicsList + property int yOffset: label_height_ + elements_spacing_ model: domainGraphLayout.model ? domainGraphLayout.model["topics"] : undefined anchors.left: parent.left; anchors.leftMargin: 2 * elements_spacing_ anchors.top: parent.top; anchors.topMargin: elements_spacing_; anchors.bottom: parent.bottom contentWidth: contentItem.childrenRect.width - spacing: elements_spacing_ + spacing: -(topic_tag_size_/3 + elements_spacing_) orientation: ListView.Horizontal interactive: false @@ -182,6 +183,11 @@ Item { listViewHeight = topicsList.currentItem.height listViewWidth += topicsList.currentItem.width + elements_spacing_ + if (c > 1) + { + // The current item overlaps with the previous one + listViewWidth += topicsList.spacing + } } } topicsList.height = listViewHeight @@ -203,8 +209,8 @@ Item "id": topicsList.currentItem.topic_id, "width" : draw_width + topicsList.currentItem.width/2 } - topic_color_map_[topicsList.currentItem.topic_id] = topicsList.currentItem.even_position - draw_width += topicsList.currentItem.width + elements_spacing_ + topic_style_map_[topicsList.currentItem.topic_id] = topicsList.currentItem.even_position + draw_width += topicsList.currentItem.width + topicsList.spacing } // announce topics are ready @@ -228,26 +234,26 @@ Item height: label_height_ color: parent.even_position ? topic_color_ : topic_color2_ radius: radius_ + y: !parent.even_position ? topicsList.yOffset : 0 + property int textFullWidth: text_metrics.width - RowLayout { - id: topicRowLayout - spacing: spacing_icon_label_ + Label { + id: topic_tag_label anchors.centerIn: parent + text: modelData["alias"] + Layout.rightMargin: 2* first_indentation_ + color: "white" + width: max_topic_name_size_ + horizontalAlignment: Text.AlignHCenter + elide: Text.ElideRight + } - IconSVG { - name: "topic" - color: "white" - size: icon_size_ - Layout.leftMargin: first_indentation_ - } - Label { - text: modelData["alias"] - Layout.rightMargin: 2* first_indentation_ - color: "white" - Layout.preferredWidth: max_topic_name_size_ - elide: Text.ElideRight - } + // Save total text size (without eliding) + TextMetrics { + id: text_metrics + text: modelData["alias"] } + MouseArea { id: topic_tag_mouse_area @@ -270,7 +276,8 @@ Item anchors.horizontalCenter: parent.horizontalCenter anchors.topMargin: hover_text_offset_ ToolTip.text: modelData["alias"] - ToolTip.visible: topic_tag_mouse_area.containsMouse + // Show hover only if text is elided + ToolTip.visible: topic_tag_mouse_area.containsMouse && text_metrics.width > topic_tag.width } } @@ -382,7 +389,7 @@ Item ,"y": endpoint_topic_connections_[key]["y"] - (connection_thickness_ / 2) ,"width": topic_locations_[topic_id]["width"] ,"height":connection_thickness_, "z":200, "left_margin": 2*elements_spacing_ - ,"arrow_color": topic_color_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color + ,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color ,"endpoint_id": key } var connection_bar = arrow_component.createObject(topic_connections, input) topic_painted_[topic_painted_.length] = key; @@ -1335,7 +1342,7 @@ Item ,"left_direction": endpoint_topic_connections_[key]["left_direction"] ,"width": 5*elements_spacing_ ,"height":connection_thickness_, "z":200 - ,"arrow_color": topic_color_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color + ,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color ,"endpoint_id": key } var connection_bar = arrow_component.createObject(mainSpace, input) endpoint_painted_[endpoint_painted_.length] = key @@ -1703,7 +1710,7 @@ Item function clear_graph() { topic_locations_ = {} - topic_color_map_ = {} + topic_style_map_ = {} endpoint_topic_connections_ = {} endpoint_painted_ = [] topic_painted_ = [] From 457139ff0fe800954e6e8ca5e768742c020d0e2c Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Wed, 20 Nov 2024 12:33:47 +0100 Subject: [PATCH 4/7] Refs #21818: Add suggested changes Signed-off-by: Carlosespicur --- qml/GraphConnection.qml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/qml/GraphConnection.qml b/qml/GraphConnection.qml index 8d9d6779..640cbf6c 100644 --- a/qml/GraphConnection.qml +++ b/qml/GraphConnection.qml @@ -82,7 +82,6 @@ Item { anchors.left: parent.left; anchors.leftMargin: left_arrow_margin_ IconSVG { - id: left_arrow_icon name: "left_arrow" color: "grey" size: arrow_size_ @@ -90,8 +89,8 @@ Item { // Change left arrow icon color to fit base_arrow color ColorOverlay { - anchors.fill: left_arrow_icon - source: left_arrow_icon + anchors.fill: left_arrow + source: left_arrow color: arrow_color } } From 4b27305b4542bc6cfd3919d98998f9fa2d5eb281 Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Wed, 20 Nov 2024 18:34:46 +0100 Subject: [PATCH 5/7] Refs #21818: Show complete name for single topic graphs Signed-off-by: Carlosespicur --- qml/DomainGraphLayout.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index 81145adf..f0fe9a4c 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -69,6 +69,7 @@ Item readonly property int elements_spacing_: 5 readonly property int containers_spacing_: 100 readonly property int topic_tag_size_: 150 + readonly property int topic_tag_margin_: 30 readonly property int max_topic_name_size_: 100 readonly property int endpoint_height_: 30 readonly property int first_indentation_: 5 @@ -230,12 +231,12 @@ Item Rectangle { id: topic_tag - implicitWidth: topic_tag_size_ height: label_height_ color: parent.even_position ? topic_color_ : topic_color2_ radius: radius_ y: !parent.even_position ? topicsList.yOffset : 0 property int textFullWidth: text_metrics.width + implicitWidth: topicsList.count > 1 ? topic_tag_size_ : Math.max(topic_tag_label.width + topic_tag_margin_, topic_tag_size_) Label { id: topic_tag_label @@ -243,7 +244,7 @@ Item text: modelData["alias"] Layout.rightMargin: 2* first_indentation_ color: "white" - width: max_topic_name_size_ + width: topicsList.count > 1 ? max_topic_name_size_ : text.width horizontalAlignment: Text.AlignHCenter elide: Text.ElideRight } From 8c55f45664c837c624b15b9362ae3496fc1b4b2e Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Thu, 21 Nov 2024 10:46:13 +0100 Subject: [PATCH 6/7] Refs #21818: Fix segfault caused by ColorOverlay component Signed-off-by: Carlosespicur --- qml.qrc | 2 ++ qml/DomainGraphLayout.qml | 7 ++++++- qml/GraphConnection.qml | 20 +++---------------- .../icons/left_arrow/left_arrow_mid_grey.svg | 7 +++++++ .../right_arrow/right_arrow_mid_grey.svg | 7 +++++++ 5 files changed, 25 insertions(+), 18 deletions(-) create mode 100644 resources/images/icons/left_arrow/left_arrow_mid_grey.svg create mode 100644 resources/images/icons/right_arrow/right_arrow_mid_grey.svg diff --git a/qml.qrc b/qml.qrc index d34f60a4..17f6e2f9 100644 --- a/qml.qrc +++ b/qml.qrc @@ -236,10 +236,12 @@ resources/images/icons/left_arrow/left_arrow_black.svg resources/images/icons/left_arrow/left_arrow_eProsimaLightBlue.svg resources/images/icons/left_arrow/left_arrow_grey.svg + resources/images/icons/left_arrow/left_arrow_mid_grey.svg resources/images/icons/left_arrow/left_arrow_white.svg resources/images/icons/right_arrow/right_arrow_black.svg resources/images/icons/right_arrow/right_arrow_eProsimaLightBlue.svg resources/images/icons/right_arrow/right_arrow_grey.svg + resources/images/icons/right_arrow/right_arrow_mid_grey.svg resources/images/icons/right_arrow/right_arrow_white.svg resources/images/icons/rounded_left_arrow/rounded_left_arrow_black.svg resources/images/icons/rounded_left_arrow/rounded_left_arrow_eProsimaLightBlue.svg diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index f0fe9a4c..f190382b 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -84,7 +84,9 @@ Item readonly property int timer_initial_ms_interval_: 200 readonly property int hover_text_offset_: 50 readonly property string topic_color_: Theme.grey + readonly property string topic_color_alias_: "grey" // color alias for svg icons readonly property string topic_color2_: Theme.midGrey + readonly property string topic_color2_alias_: "mid_grey" // color alias for svg icons readonly property string host_color_: Theme.darkGrey readonly property string user_color_: Theme.eProsimaLightBlue readonly property string process_color_: Theme.eProsimaDarkBlue @@ -390,7 +392,9 @@ Item ,"y": endpoint_topic_connections_[key]["y"] - (connection_thickness_ / 2) ,"width": topic_locations_[topic_id]["width"] ,"height":connection_thickness_, "z":200, "left_margin": 2*elements_spacing_ - ,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color + ,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_ + ,"arrow_head_color": topic_style_map_[topic_id] ? "grey" : "mid_grey" + , "background_color": background_color.color ,"endpoint_id": key } var connection_bar = arrow_component.createObject(topic_connections, input) topic_painted_[topic_painted_.length] = key; @@ -1344,6 +1348,7 @@ Item ,"width": 5*elements_spacing_ ,"height":connection_thickness_, "z":200 ,"arrow_color": topic_style_map_[topic_id] ? topic_color_ : topic_color2_, "background_color": background_color.color + ,"arrow_head_color": topic_style_map_[topic_id] ? topic_color_alias_ : topic_color2_alias_ ,"endpoint_id": key } var connection_bar = arrow_component.createObject(mainSpace, input) endpoint_painted_[endpoint_painted_.length] = key diff --git a/qml/GraphConnection.qml b/qml/GraphConnection.qml index 640cbf6c..36e36539 100644 --- a/qml/GraphConnection.qml +++ b/qml/GraphConnection.qml @@ -1,5 +1,4 @@ import QtQuick 2.0 -import QtGraphicalEffects 1.15 Item { id: graphConnection @@ -8,6 +7,7 @@ Item { property bool right_direction: false // defines if the represented connection must draw a right arrow property int left_margin: 0 // left margin to be applied property string arrow_color: Theme.grey // connection color + property string arrow_head_color: "grey" property string background_color: "white" // background color property string endpoint_id: "" // graph refferred entity id property bool hidden_arrow: false // associated topic is not visible @@ -83,16 +83,9 @@ Item { IconSVG { name: "left_arrow" - color: "grey" + color: arrow_head_color size: arrow_size_ } - - // Change left arrow icon color to fit base_arrow color - ColorOverlay { - anchors.fill: left_arrow - source: left_arrow - color: arrow_color - } } // main connection @@ -167,16 +160,9 @@ Item { IconSVG { name: "right_arrow" - color: "grey" + color: arrow_head_color size: arrow_size_ + right_arrow_margin_ } - - // Change right arrow icon color to fit base_arrow color - ColorOverlay { - anchors.fill: right_arrow - source: right_arrow - color: arrow_color - } } function topid_hidden(entityId, is_hidden) diff --git a/resources/images/icons/left_arrow/left_arrow_mid_grey.svg b/resources/images/icons/left_arrow/left_arrow_mid_grey.svg new file mode 100644 index 00000000..1eaf12ea --- /dev/null +++ b/resources/images/icons/left_arrow/left_arrow_mid_grey.svg @@ -0,0 +1,7 @@ + + + + Layer 1 + + + \ No newline at end of file diff --git a/resources/images/icons/right_arrow/right_arrow_mid_grey.svg b/resources/images/icons/right_arrow/right_arrow_mid_grey.svg new file mode 100644 index 00000000..3a6950da --- /dev/null +++ b/resources/images/icons/right_arrow/right_arrow_mid_grey.svg @@ -0,0 +1,7 @@ + + + + Layer 1 + + + \ No newline at end of file From 4678bbe128eca82e0aa95cd8f31e21707a8cac9e Mon Sep 17 00:00:00 2001 From: Carlosespicur Date: Thu, 21 Nov 2024 11:33:38 +0100 Subject: [PATCH 7/7] Refs #21818: Add delay to label hover Signed-off-by: Carlosespicur --- qml/DomainGraphLayout.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index f190382b..fab90990 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -83,6 +83,7 @@ Item readonly property int wheel_displacement_: 30 readonly property int timer_initial_ms_interval_: 200 readonly property int hover_text_offset_: 50 + readonly property int hover_delay_: 250 readonly property string topic_color_: Theme.grey readonly property string topic_color_alias_: "grey" // color alias for svg icons readonly property string topic_color2_: Theme.midGrey @@ -281,6 +282,7 @@ Item ToolTip.text: modelData["alias"] // Show hover only if text is elided ToolTip.visible: topic_tag_mouse_area.containsMouse && text_metrics.width > topic_tag.width + ToolTip.delay: hover_delay_ } }