diff --git a/qml/DomainGraphLayout.qml b/qml/DomainGraphLayout.qml index 6d3533ee..47e7f82d 100644 --- a/qml/DomainGraphLayout.qml +++ b/qml/DomainGraphLayout.qml @@ -39,24 +39,14 @@ Item 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 - property int max_host_width_: 0 // host entity box width management - property int max_user_width_: 0 // user entity box width management - property int max_process_width_: 0 // process entity box width management - property int max_participant_width_: 0 // participant entity box width management - property int max_endpoint_width_: 0 // endpoint entity box width management - - // Private (resize) signals resize_elements_ will trigger a bunch of resize methods per entities and - // HOST TOPIC ─┐ topics, when 2 iterations are performed. The first one is aimed to - // 3↓ ... ↑2 1│ ↑ 5└─>CONNECTIONS resize "parents" based on max "child" size, and then the second one takes - // ENDPOINT <───┘ │ place to ensure the well format if a "parent" has a size longer than a - // 4└─────────────┘ "child". After that, with the final results, connections between topics - // and endpoints are generated + property int entity_box_width_: 0 // entity box width management + + // Private (resize) signals Signal resize_elements_ will trigger a bunch of resize methods per entities + // HOST TOPIC ─┐ and topics, run in cascade from host to connections as shown in the left + // 1↓ ... ↓4 5↑ 6└─>CONNECTIONS figure. After that, with the final results, connections between topics + // ENDPOINT ─────┘ and endpoints are generated. + signal resize_elements_() - signal update_endpoints_() - signal update_participants_() - signal update_processes_() - signal update_users_() - signal update_hosts_() signal topics_updated_() signal endpoints_updated_() signal participants_updated_() @@ -97,8 +87,8 @@ Item Flickable { id: topicView anchors.top: parent.top; anchors.bottom: parent.bottom - anchors.left: parent.left; anchors.leftMargin: max_host_width_ + elements_spacing_ - width: parent.width - max_host_width_ - 2*elements_spacing_ + anchors.left: parent.left; anchors.leftMargin: entity_box_width_ + elements_spacing_ + width: parent.width - entity_box_width_ - 2*elements_spacing_ flickableDirection: Flickable.HorizontalFlick boundsBehavior: Flickable.StopAtBounds @@ -156,12 +146,6 @@ Item { target: domainGraphLayout - function onResize_elements_() - { - topicsList.resize() - update_endpoints_() - } - function onEndpoints_updated_() { topicsList.resize() @@ -365,7 +349,7 @@ Item Flickable { id: mainView anchors.left: parent.left ; anchors.top: parent.top; anchors.bottom: parent.bottom - width: max_host_width_ + elements_spacing_ + width: entity_box_width_ + elements_spacing_ anchors.topMargin: 2* elements_spacing_ + label_height_ flickableDirection: Flickable.VerticalFlick boundsBehavior: Flickable.StopAtBounds @@ -452,7 +436,7 @@ Item { target: domainGraphLayout - function onUpdate_hosts_() + function onResize_elements_() { hostsList.resize() hosts_updated_() @@ -476,23 +460,21 @@ Item if (hostsList.currentItem != null) { listViewHeight += hostsList.currentItem.height + elements_spacing_ - max_host_width_ = Math.max(max_host_width_, hostsList.currentItem.width) - max_host_width_ = Math.max(max_host_width_, (2*elements_spacing_)+max_user_width_) - hostsList.currentItem.width = max_host_width_ + entity_box_width_ = Math.max(entity_box_width_, hostsList.currentItem.width) } } hostsList.height = listViewHeight - hostsList.width = max_host_width_ + hostsList.width = entity_box_width_ } // Host delegated item box delegate: Item { height: host_tag.height + usersList.height - width: hostRowLayout.implicitWidth > max_host_width_ + width: hostRowLayout.implicitWidth > entity_box_width_ ? hostRowLayout.implicitWidth - : max_host_width_ + : entity_box_width_ // background Rectangle @@ -509,9 +491,9 @@ Item { id: host_tag anchors.horizontalCenter: parent.horizontalCenter - implicitWidth: hostRowLayout.implicitWidth > max_host_width_ + implicitWidth: hostRowLayout.implicitWidth > entity_box_width_ ? hostRowLayout.implicitWidth - : max_host_width_ + : entity_box_width_ height: label_height_ color: host_color_ radius: radius_ @@ -573,11 +555,6 @@ Item { target: domainGraphLayout - function onUpdate_users_() - { - usersList.resize() - update_hosts_() - } function onHosts_updated_() { usersList.resize() @@ -604,24 +581,21 @@ Item if (usersList.currentItem != null) { listViewHeight += usersList.currentItem.height + elements_spacing_ - max_user_width_ = Math.max(max_user_width_, usersList.currentItem.width) - max_user_width_ = Math.max(max_user_width_, max_process_width_+(2*elements_spacing_)) - max_user_width_ = Math.max(max_user_width_, max_host_width_-(2*elements_spacing_)) - usersList.currentItem.width = max_user_width_ + entity_box_width_ = Math.max(entity_box_width_, usersList.currentItem.width+(2*elements_spacing_)) } } usersList.height = listViewHeight + elements_spacing_ - usersList.width = max_user_width_ + usersList.width = entity_box_width_-(2*elements_spacing_) } // User delegated item box delegate: Item { height: user_tag.height + processesList.height - width: userRowLayout.implicitWidth > max_user_width_ + width: userRowLayout.implicitWidth > entity_box_width_-(2*elements_spacing_) ? userRowLayout.implicitWidth - : max_user_width_ + : entity_box_width_-(2*elements_spacing_) // background Rectangle @@ -639,9 +613,9 @@ Item id: user_tag anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter - implicitWidth: userRowLayout.implicitWidth > max_user_width_ + implicitWidth: userRowLayout.implicitWidth > entity_box_width_-(2*elements_spacing_) ? userRowLayout.implicitWidth - : max_user_width_ + : entity_box_width_-(2*elements_spacing_) height: label_height_ color: user_color_ radius: radius_ @@ -703,12 +677,6 @@ Item { target: domainGraphLayout - function onUpdate_processes_() - { - processesList.resize() - update_users_() - } - function onUsers_updated_() { processesList.resize() @@ -733,23 +701,20 @@ Item { processesList.currentIndex = c listViewHeight += processesList.currentItem.height + elements_spacing_ - max_process_width_ = Math.max(max_process_width_, processesList.currentItem.width) - max_process_width_ = Math.max(max_process_width_, max_participant_width_+(2*elements_spacing_)) - max_process_width_ = Math.max(max_process_width_, max_user_width_-(2*elements_spacing_)) - processesList.currentItem.width = max_process_width_ + entity_box_width_ = Math.max(entity_box_width_, processesList.currentItem.width+(4*elements_spacing_)) } processesList.height = listViewHeight + elements_spacing_ - processesList.width = max_process_width_ + processesList.width = entity_box_width_-(4*elements_spacing_) } // Process delegated item box delegate: Item { height: process_tag.height + participantsList.height - width: processRowLayout.implicitWidth > max_process_width_ + width: processRowLayout.implicitWidth > entity_box_width_-(4*elements_spacing_) ? processRowLayout.implicitWidth - : max_process_width_ + : entity_box_width_-(4*elements_spacing_) // background Rectangle @@ -767,9 +732,9 @@ Item id: process_tag anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter - implicitWidth: processRowLayout.implicitWidth > max_process_width_ + implicitWidth: processRowLayout.implicitWidth > entity_box_width_-(4*elements_spacing_) ? processRowLayout.implicitWidth - : max_process_width_ + : entity_box_width_-(4*elements_spacing_) height: label_height_ color: process_color_ radius: radius_ @@ -831,11 +796,6 @@ Item { target: domainGraphLayout - function onUpdate_participants_() - { - participantsList.resize() - update_processes_() - } function onProcesses_updated_() { participantsList.resize() @@ -860,23 +820,20 @@ Item { participantsList.currentIndex = c listViewHeight += participantsList.currentItem.height + elements_spacing_ - max_participant_width_ = Math.max(max_participant_width_, participantsList.currentItem.width) - max_participant_width_ = Math.max(max_participant_width_, max_endpoint_width_+(2*elements_spacing_)) - max_participant_width_ = Math.max(max_participant_width_, max_process_width_-(2*elements_spacing_)) - participantsList.currentItem.width = max_participant_width_ + entity_box_width_ = Math.max(entity_box_width_, participantsList.currentItem.width+(6*elements_spacing_)) } participantsList.height = listViewHeight + elements_spacing_ - participantsList.width = max_participant_width_ + participantsList.width = entity_box_width_-(6*elements_spacing_) } // Participant delegated item box delegate: Item { height: participant_tag.height + endpointsList.height - width: participantRowLayout.implicitWidth > max_participant_width_ + width: participantRowLayout.implicitWidth > entity_box_width_-(6*elements_spacing_) ? participantRowLayout.implicitWidth - : max_participant_width_ + : entity_box_width_-(6*elements_spacing_) // background Rectangle @@ -894,9 +851,9 @@ Item id: participant_tag anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter - implicitWidth: participantRowLayout.implicitWidth > max_participant_width_ + implicitWidth: participantRowLayout.implicitWidth > entity_box_width_-(6*elements_spacing_) ? participantRowLayout.implicitWidth - : max_participant_width_ + : entity_box_width_-(6*elements_spacing_) height: label_height_ color: participant_color_ radius: radius_ @@ -955,12 +912,6 @@ Item { target: domainGraphLayout - function onUpdate_endpoints_() - { - endpointsList.resize() - update_participants_() - } - function onParticipants_updated_() { endpointsList.resize() @@ -986,13 +937,11 @@ Item { endpointsList.currentIndex = c listViewHeight += endpointsList.currentItem.height + elements_spacing_ - max_endpoint_width_ = Math.max(max_endpoint_width_, endpointsList.currentItem.width) - max_endpoint_width_ = Math.max(max_endpoint_width_, max_participant_width_-(2*elements_spacing_)) - endpointsList.currentItem.width = max_endpoint_width_ + entity_box_width_ = Math.max(entity_box_width_, endpointsList.currentItem.width+(8*elements_spacing_)) } endpointsList.height = listViewHeight + elements_spacing_ - endpointsList.width = max_endpoint_width_ + endpointsList.width = entity_box_width_-(8*elements_spacing_) } function record_connections() @@ -1008,9 +957,9 @@ Item delegate: Item { id: endpointComponent - width: endpointRowLayout.implicitWidth > max_endpoint_width_ + width: endpointRowLayout.implicitWidth > entity_box_width_-(8*elements_spacing_) ? endpointRowLayout.implicitWidth - : max_endpoint_width_ + : entity_box_width_-(8*elements_spacing_) height: endpoint_height_ // Saves the endpoint needed info for connection representation @@ -1045,9 +994,9 @@ Item id: endpoint_tag anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter - implicitWidth: endpointRowLayout.implicitWidth > max_endpoint_width_ + implicitWidth: endpointRowLayout.implicitWidth > entity_box_width_-(8*elements_spacing_) ? endpointRowLayout.implicitWidth - : max_endpoint_width_ + : entity_box_width_-(8*elements_spacing_) height: endpoint_height_ color: endpoint_background.color radius: radius_ @@ -1090,11 +1039,11 @@ Item } } Rectangle { - visible: endpoint_tag.implicitWidth < max_endpoint_width_ + visible: endpoint_tag.implicitWidth < entity_box_width_-(8*elements_spacing_) anchors.left: endpoint_tag.right anchors.verticalCenter: parent.verticalCenter height: endpoint_tag.height - width: max_endpoint_width_ - endpoint_tag.implicitWidth + width: entity_box_width_-(8*elements_spacing_) - endpoint_tag.implicitWidth color: endpoint_background.color radius: radius_ } @@ -1150,7 +1099,7 @@ Item anchors.top: parent.top anchors.left: parent.left height: 2* elements_spacing_ + label_height_ - width: max_host_width_ +2* elements_spacing_ + width: entity_box_width_ +2* elements_spacing_ color: "white" // Refresh button @@ -1160,8 +1109,8 @@ Item height: label_height_ anchors.top: parent.top; anchors.topMargin: elements_spacing_ anchors.left: parent.left - anchors.leftMargin: max_host_width_/2 + elements_spacing_ - refresh_button.width /2 < 40 - ? 5* elements_spacing_ : (max_host_width_/2) + elements_spacing_ - (refresh_button.width /2) + anchors.leftMargin: entity_box_width_/2 + elements_spacing_ - refresh_button.width /2 < 40 + ? 5* elements_spacing_ : (entity_box_width_/2) + elements_spacing_ - (refresh_button.width /2) text: "Refresh" onClicked:{ @@ -1175,7 +1124,7 @@ Item anchors.bottom: parent.bottom anchors.left: parent.left height: elements_spacing_ - width: max_host_width_ + 2*elements_spacing_ + width: entity_box_width_ + 2*elements_spacing_ color: "white" z: 14 } @@ -1370,11 +1319,7 @@ Item topic_painted_ = [] vertical_bar.position = 0 horizontal_bar.position = 0 - max_host_width_ = 0; - max_user_width_ = 0; - max_process_width_ = 0; - max_participant_width_ = 0; - max_endpoint_width_ = 0; + entity_box_width_ = 0; for (var i = 0; i < mainSpace.children.length; i++) {