Dragable Rectangle won't drag as a child of a Scroll View unless I remove content width & height.

JoeJoe_000

Hello,
I can't seem to get drag functionality on these draggable rectangles I have in my project. You can download and view the code from this repo:

https://github.com/joejoe909/QMLZoomEnviorment
pull: https://github.com/joejoe909/QMLZoomEnviorment.git

I have three files Dragable - dragable QML component that uses the MouseArea.
McIda - this is a rectangle that uses Dragable and Dragable is a child of McIda.
main.qml - this has a mouse area which lets you zoom out via ctrl + wheel it also has a scroll area that ideally will alow you to zoom out from 1 to .1. This works but.....

in main.qml on lines 17 and 18 by cementing out we get the desired drag functionality and zoom but lose
scroll functionality. When uncommenting we get scroll capability but drag is compromised.

Any guidance would be much appreciated. Thanks.

I've also pasted all the code below.

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Zoom Enviorment")
    color: "gray"


    ScrollView{
        id: scrollVw
        anchors.fill: parent
        contentWidth: mindScape.width   // comment these to gain drag functionality
        contentHeight: mindScape.height //  uncomment to get get scroll capability.
        clip: true
          


        //Zoom Functionality.
        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.NoButton
            hoverEnabled: false


            onPositionChanged: {
                root.title ="Zoom Enviorment " + mindScape.scale  + " mouse position: " + mouseX + "," + mouseY
            }

            onWheel: {
                wheel.accepted = true
                if(wheel.modifiers & Qt.ControlModifier)
                {

                    if (wheel.angleDelta.y > 0)
                    {

                        //see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
                        mindScape.scale = Number((mindScape.scale + mindScape.zoomStep).toFixed(1))
                        root.title ="Zoom Enviorment " + mindScape.scale + " mouse position: " + mouseX + "," + mouseY
                    }else if(wheel.angleDelta.y < 0){
                        mindScape.scale = Number((mindScape.scale - mindScape.zoomStep).toFixed(1));  //toFixed(n) - will formats number using fixed point notation
                        root.title ="Zoom Enviorment " + mindScape.scale  + " mouse position: " + mouseX + "," + mouseY
                    }

                }
            }



        }//end mouseArea

            Rectangle{
                id: mindScape
                x: 0; y: 0; width: 10000; height: 10000
                color: "blue"
                scale: 1
                property real zoom: 0.0
                property real zoomStep: 0.1

                McIda{
                   x: 300; y: 25; width: 250; height: 150
                }

                McIda{
                   x: 25; y: 25; width: 250; height: 150
                }

               }


            }//end scrollView

//    }

}

Dragable.qml

import QtQuick 2.0
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.5
//DragFunctionality
Item {
    id: iT

    property bool isDragging
    property int offsetX : 0
    property int offsetY : 0

    QtObject {
        id: lastPosition
        property int x : iT.parent.x
        property int y : iT.parent.y
    }

    MouseArea {
           id: mouseArea
           anchors.bottomMargin: 0
           anchors.fill: parent

           onPressed: {
               iT.focus = true
               iT.parent.focus = false
               iT.isDragging = true;

               var globalMouse = iT.mapToGlobal(mouse.x, mouse.y);
               iT.offsetX = globalMouse.x - iT.parent.x;
               iT.offsetY = globalMouse.y - iT.parent.y;
           }

           onPositionChanged: {
               if (iT.isDragging) {
                   //var globalMouse = iT.parent.mapToGlobal(mouse.x, mouse.y);
                   var globalMouse = iT.mapToGlobal(mouse.x, mouse.y);
                   iT.parent.x =  ((lastPosition.x - iT.parent.x) + (globalMouse.x - iT.offsetX));
                   iT.parent.y =  ((lastPosition.y - iT.parent.y) + (globalMouse.y - iT.offsetY));
               }
           }

      }


}

McIda.qml

import QtQuick 2.0


    Rectangle {
        id: base
        scale: 1 //Math.min(root.width / width, root.height / height, 1) + zoom
        property real zoom: 0.0
        property real zoomStep: 0.1
        color: "#805e00"

        Row {
            id: row_top
            anchors.top: parent
            width: parent.width
            height: 10



            Rectangle{
                anchors.fill: parent
                color: "green"

            }

        }

        Text {
            id: mousePositionDisp
            text: ""
            x: 10
            y: 10
            color: "black"
        }

        Dragable{
            anchors.fill: parent

            Text {
                id: coord
                text: qsTr("x=" + Number(base.x).toFixed(1) + " " + "y=" + Number(base.y).toFixed(1) + " " + "w=" + base.width + " " + "h=" + base.height  )
                x: 50
                y: 50
            }
        }

    }

JoeJoe_000

Looks like I was able to get it by fixing a few things. (I updated the repo)

in dragable.qml I added the following to the MouseArea.....

  drag.target: parent

in McIda I added corrected the titleBar rectangle.

  Rectangle{
                id: titleBar
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.top: parent.top
                height: 10
                color: "green"

            }

My next concern is when you zoom out the item you drag while zoomed out follows the mouse cursor in proportion to amount you're zoomed out at. The more you zoom out the more your drag trails the mouse cursor.
Perhaps that's a diffrent question. If you know how to address this it would be great help. As I've encountered this issue when also working with GraphcisView Framework and I'm just not able to also figure that out.