QML Image Zoom

[neda]

The Window of my program includes three parts (with blue,red,yellow background) (https://i.imgsafe.org/0a85a09.png).
I have an image in the red part.
I use a PinchArea that contains a MouseArea in the photo to handle dragging and pinch zooming of the photo.
The user can drag the image in the under yellow and red section, but I want User drag image just into red section.
main.qml:

RowLayout {

Rectangle {
Layout.fillHeight: true
Layout.fillWidth: true
color: "red"
ColumnLayout {
anchors.fill: parent
spacing: 0
RowLayout {
Layout.preferredHeight: 0.06*parent.height
Layout.fillHeight: false
Layout.fillWidth: true
Rectangle {
id:rectToolBar
Layout.fillHeight: true
Layout.fillWidth: true
color: "#2196f3"
ColumnLayout {
anchors.fill: parent
RowLayout {
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
ToolBar {
anchors.fill: parent
Layout.fillHeight: true
Layout.alignment: Qt.RightToLeft

style: ToolBarStyle {
background: Rectangle {
color: "transparent"
}
}

RowLayout {
anchors.fill: parent


MyToolButton{
id:tbCapture
iconSource:"images/capture.png"
MouseArea
{
id: maCapture
anchors.fill: parent
anchors.margins: -10
hoverEnabled:true
visible: camera.imageCapture.ready

onClicked: {
camera.imageCapture.capture()
}

cursorShape: Qt.PointingHandCursor
}
}
}
}


}
}


}
}

RowLayout {
spacing: 0
Layout.fillHeight: true
Layout.fillWidth: true

Rectangle{
Layout.fillHeight: true
Layout.fillWidth: true
color: "transparent"

Camera {
id: camera

imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash

exposure {
exposureCompensation: -1.0
exposureMode: Camera.ExposurePortrait
}

flash.mode: Camera.FlashRedEyeReduction

imageCapture {
onImageCaptured: {
photoPreview.source = preview // Show the preview in an Image
}

}


}

VideoOutput {
id: viewfinder
source: camera
anchors.fill: parent
focus : visible
visible: !capture
}

PhotoPreview {
id : photoPreview
anchors.fill : parent
focus: visible
visible: capture
}

}
}
}
}

Rectangle {
id:inputRect

Layout.fillHeight: true
Layout.preferredWidth: 0.3*parent.width
color: "yellow"

}
}

PhotoPreview.qml:


Item {
property alias source :image.source
signal closed
id:mywin
property int highestZ: 0
property real defaultSize: mywin.width
property var currentFrame: undefined
property real surfaceViewportRatio: 1.5
ScrollView {
anchors.fill: parent
frameVisible: true
highlightOnFocus: true
style: ScrollViewStyle {
transientScrollBars: true
handle: Item {
implicitWidth: 14
implicitHeight: 26
Rectangle {
color: "#424246"
anchors.fill: parent
anchors.topMargin: 6
anchors.leftMargin: 4
anchors.rightMargin: 4
anchors.bottomMargin: 6
}
}
scrollBarBackground: Item {
implicitWidth: 14
implicitHeight: 26
}
}

Flickable {
id: flick
anchors.fill: parent
contentWidth: parent.width
contentHeight: parent.height

Rectangle {
id: photoFrame
width: parent.width
height: parent.height
color:"transparent"
scale:defaultSize / parent.width
Behavior on scale { NumberAnimation { duration: 200 } }
Behavior on x { NumberAnimation { duration: 200 } }
Behavior on y { NumberAnimation { duration: 200 } }
smooth: true
antialiasing: true
Image {
id:image
anchors.fill: parent
fillMode: Image.PreserveAspectFit
smooth: true
}
PinchArea {
anchors.fill: parent
pinch.target: photoFrame
pinch.minimumRotation: -360
pinch.maximumRotation: 360
pinch.minimumScale: 0.1
pinch.maximumScale: 10
pinch.dragAxis: Pinch.XAndYAxis
property real zRestore: 0
onSmartZoom: {
if (pinch.scale > 0) {
photoFrame.rotation = 0;
photoFrame.scale = Math.min(mywin.width, mywin.height) / Math.max(image.sourceSize.width, image.sourceSize.height) * 0.85
photoFrame.x = flick.contentX + (flick.width - photoFrame.width) / 2
photoFrame.y = flick.contentY + (flick.height - photoFrame.height) / 2
zRestore = photoFrame.z
photoFrame.z = ++mywin.highestZ;
} else {
photoFrame.rotation = pinch.previousAngle
photoFrame.scale = pinch.previousScale
photoFrame.x = pinch.previousCenter.x - photoFrame.width / 2
photoFrame.y = pinch.previousCenter.y - photoFrame.height / 2
photoFrame.z = zRestore
--mywin.highestZ
}
}

MouseArea {
id: dragArea
hoverEnabled: true
anchors.fill: parent
drag.target: photoFrame
scrollGestureEnabled: false // 2-finger-flick gesture should pass through to the Flickable
onPressed: {
photoFrame.z = ++mywin.highestZ;
}

onWheel: {
if (wheel.modifiers & Qt.ControlModifier) {
photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
if (Math.abs(photoFrame.rotation) < 4)
photoFrame.rotation = 0;
} else {
photoFrame.rotation += wheel.angleDelta.x / 120;
if (Math.abs(photoFrame.rotation) < 0.6)
photoFrame.rotation = 0;
var scaleBefore = photoFrame.scale;
photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
}
}
}
}
}
}
}
}