Window resize problem

[Bob64]

@Vijaykarthikeyan it's not a very active forum. There are only a couple of real experts who hang out here and I imagine they are busy. Unless an answer is obvious or you make it really easy to reproduce a problem - i.e. by providing a small example which can be run easily - it is unlikely that you will get a lot of help.

I have asked a few questions here that have gone unanswered. That's the way it is. Nobody owes me anything.

[JonB]

@Vijaykarthikeyan
Intended as a constructive suggestion: if you are not happy with the answers here, maybe post a question to https://stackoverflow.com/ ? If you get an answer there they tend to be more "formal", perhaps will give you a solution in the form you would like.

[GrecKo]

Here's a screenshot of what I have when running your code :

Not really self explanatory. Why is it 100 lines long to swap 2 items?
It also refers to variable not declared, root, map_x, map_y.

Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.

Anyway, here's what I would do if I understood correctly what you want:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root

    width: 640
    height: 480
    visible: true

    property bool graphInCorner: true

    Rectangle {
        id: fullContainer
        width: parent.width
        height: parent.height
        border.width: 1
    }

    Rectangle {
        id: cornerContainer
        width: 0.18 * parent.width
        height: 0.24 * parent.height
        border.width: 1
    }
    Text {
        parent: root.graphInCorner ? fullContainer : cornerContainer
        anchors.fill: parent
        text: "MAP"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        MouseArea {
            anchors.fill: parent
            onClicked: root.graphInCorner = !root.graphInCorner
        }
    }
    Text {
        parent: root.graphInCorner ? cornerContainer : fullContainer
        anchors.fill: parent
        text: "GRAPH"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        MouseArea {
            anchors.fill: parent
            onClicked: root.graphInCorner = !root.graphInCorner
        }
    }
}

Have two container parents and swap the parent of the graph and map items to one of those.

[Vijaykarthikeyan]

@GrecKo understood..can i have some question

[Vijaykarthikeyan]

@JonB Whenever I asking any doubt,at the end of the day,the intend of the topic diverted as off your desire. Then.what's the purpose of asking question? When I came here for one small doubt, you guys totally diverting it to somewhere which is not important,indeed not relevant to the topic, finally leads to find the solution on my own

[Vijaykarthikeyan]

@Bob64 I ready to give anything the speakers need to see..Perhaps,they are totally diverting the intent of the question. If I gave a code snippet,they didn't tell me to repost it or correct it but always insulting the needy like go and study the documrentation, go and study the documentation.. I go through the documentation many times before coming here, If the solution was there,why should I coming here to clear my doubt?

[Vijaykarthikeyan]

@GrecKo That is because of the relative positioning.These 2 components should swap with respect to the 3rd element in 3 different positions. each of these 3 components have 2 positions so,6 different fucntions are needed according to the positions

[Vijaykarthikeyan]

@GrecKo

As I explained the reason why I used a lot of lines for swapping ,this is the picture of what i want to achieve. Actually, these are the 3 components..each have to swap from their respective position to fill the window. But,their sizes and positions should be dynamically attached with the window for any resolution. So,according to the logics, the swapping must be bigger.

And in my updtaed swapping,there are only 10-15 lines of code for swappuing and it works..no issue with that

[lemons]

@Vijaykarthikeyan
Instead of using x and y coordinates, I would place 3 of the same objects into the view and align them according to what you want in the end. Here you should apply all resizing and alignment constrains, so that they represent the final "wrapper" of your different views, which resize automatically with window changes.

Then add your components as children to those 3 objects. As each of your components now has the same type of parent object, you can simply swap the parents.

Here a very basic example of what I understood from your question.
Note: I would use anchors and layouts, so all resizing is managed automatically.

ApplicationWindow {
    width: 860
    height: 640
    visible: true

    // switch parents
    function switchParents(item1, item2) {
        let temp = item1.parent
        item1.parent = item2.parent
        item2.parent = temp
    }

    // full screen view
    // note: main view should use the same parent object as mini views
    // to swap parents without issues
    // in this example "ColumnLayout"
    ColumnLayout {
        id: viewManager
        anchors.fill: parent
        Rectangle {
            id: map
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "red"
            Text {
                anchors.centerIn: parent
                text: "Map"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    switchParents(parent, viewManager.children[0])
                }
            }
        }
    }
    // mini views
    Item {
        id: miniViews
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        // adjust to your liking
        height: parent.height * 2 / 3
        width: height < 250 ? parent.width / 2 : parent.width / 4
        // use gridlayout to easily switch between vertical and horizontal
        // alignment of mini views
        GridLayout {
            anchors.fill: parent
            anchors.margins: 20
            // make the miniviews be shown next to each other
            // if the height is smaller than a breakpoint
            columns: height >= 250 ? 1 : 2
            columnSpacing: 20
            rowSpacing: 20
            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Rectangle {
                    id: cam
                    color: "green"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Text {
                        anchors.centerIn: parent
                        text: "Cam"
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            switchParents(parent, viewManager.children[0])
                        }
                    }
                }
            }
            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Rectangle {
                    id: graph
                    color: "yellow"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Text {
                        anchors.centerIn: parent
                        text: "Graph"
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            switchParents(parent, viewManager.children[0])
                        }
                    }
                }
            }
        }
    }
}

[Vijaykarthikeyan]

@lemons Thank you for the logic