Window resize problem

SGaist

That's not a minimal sample.

Please reduce it to the bare minimum (and a minimum that can be used directly to test).

Vijaykarthikeyan

Rectangle
            {
                id:mapContainer
                width:parent.width
                height: parent.height
                z:0
                MouseArea
                            {
                                id:click
                                anchors.fill: parent
                                acceptedButtons: Qt.LeftButton| Qt.RightButton

                                onClicked: function(mouse)
                                    {
                                        mouse.accepted=true
                                        
                                       
                               if((mapContainer.width<model.width)&& 
                                   (mapContainer.height<model.height))
                                                {
                                                    swapped();
                                                }
                                    }
                            }

                    }
            
 Rectangle
            {
                id: model
                width:0.18*root.width
                height:.24*root.height              
                visible: true
                z:1
                anchors.margins: 0.01*parent.width
             
                        MouseArea
                            {
                                id:model_area
                                anchors.fill: parent

                                onClicked:
                                    {
                                        
                              if((model.width<mapContainer.width)&& 
                              (model.height<mapContainer.height))
                                            {
                                               swapped()                                 
                                    }
                            }
                    }
}

function swapped()
        {

            if (mapContainer.z==0)
                {
                    map_x  = mapContainer.x
                    map_y  = mapContainer.y
                    width2 = mapContainer.width
                    height2= mapContainer.height

                    mapContainer.x = model.x
                    mapContainer.y = model.y
                    mapContainer.z = 1
                    mapContainer.width = model.width
                    mapContainer.height= model.height
                    mapContainer.anchors.margins=0.01*root.width
                    model.x = map_x
                    model.y = map_y
                    model.z=0
                    model.width = width2
                    model.height= height2
                    model.anchors.margins=0
                    cam.z=1
                }

            else
                {
                    map_x  = model.x
                    map_y  = model.y
                    width2 = model.width
                    height2= model.height

                    model.x = mapContainer.x
                    model.y = mapContainer.y
                    model.width = mapContainer.width
                    model.anchors.margins=10

                    mapContainer.x = map_x
                    mapContainer.y = map_y
                    mapContainer.z=0
                    mapContainer.width = width2
                    mapContainer.height= height2
                    mapContainer.anchors.margins=0

            }
        }

JonB

@Vijaykarthikeyan
So in response to @SGaist's request for a "bare minimum" you have copied and pasted what you had already posted, right?

Vijaykarthikeyan

@JonB No..wrong..reduced the code to the atmost minimum..beyond that,you can't get the code structure correct..defining 2 rectangles..defining swapping function..called it in both rectangles..Besides that,how could one reduce as much as it is?

JonB

@Vijaykarthikeyan
So I was wrong even though I compared the two, they were within one line of each other and the only difference I could see was the removal one one already commented-out line? And all those lines are required, without reducing it the problem does not happen?

Anyway, good luck, perhaps someone will accept this.

Vijaykarthikeyan

@JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.

JonB

@Vijaykarthikeyan
Yes, you say the same each time. Everybody here is bad. Not much point asking if you never get any useful help and sort it out yourself.

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