Add zooming to the shapes example

Pick-to: 6.6
Change-Id: If10ffe77b5e61f605f9f735c51f639c422844b2d
Reviewed-by: Eirik Aavitsland <[email protected]>

6 files changed, 161 insertions, 3 deletions

diff --git a/examples/quick/shapes/CMakeLists.txt b/examples/quick/shapes/CMakeLists.txt
index db80983dca..ea9df6818a 100644
--- a/examples/quick/shapes/CMakeLists.txt
+++ b/examples/quick/shapes/CMakeLists.txt
@@ -57,6 +57,7 @@ qt_add_qml_module(shapesexample
         "shapegallery.qml"
         "tapableTriangle.qml"
         "tiger.qml"
+        "zoomtiger.qml"
 )
 
 install(TARGETS shapesexample
diff --git a/examples/quick/shapes/main.qml b/examples/quick/shapes/main.qml
index 7dc644be1d..ddd6e4edf0 100644
--- a/examples/quick/shapes/main.qml
+++ b/examples/quick/shapes/main.qml
@@ -13,6 +13,7 @@ Item {
             addExample(qsTr("Shape Gallery"), qsTr("Simple path rendering examples"), Qt.resolvedUrl("shapegallery.qml"))
             addExample(qsTr("Interactive Shape"), qsTr("Dynamic, interactive path rendering examples"), Qt.resolvedUrl("interactive.qml"))
             addExample(qsTr("Anti-aliasing"), qsTr("Improving quality"), Qt.resolvedUrl("sampling.qml"))
+            addExample(qsTr("Magnify My Tiger!"), qsTr("Path zooming example"), Qt.resolvedUrl("zoomtiger.qml"))
             addExample(qsTr("Clip My Tiger!"), qsTr("Clip examples, a.k.a. What Not To Do"), Qt.resolvedUrl("clippedtigers.qml"))
         }
     }
diff --git a/examples/quick/shapes/sampling.qml b/examples/quick/shapes/sampling.qml
index 27515b6722..ef922ed5f2 100644
--- a/examples/quick/shapes/sampling.qml
+++ b/examples/quick/shapes/sampling.qml
@@ -203,7 +203,7 @@ Rectangle {
                 }
             }
             Text {
-                text: qsTr("CurveRenderer")
+                text: qsTr("CurveRenderer [tech preview]")
             }
 
             // Now let's use CurveRenderer with built-in antialiasing support.
diff --git a/examples/quick/shapes/shapes.qrc b/examples/quick/shapes/shapes.qrc
index 846984b301..413816dba2 100644
--- a/examples/quick/shapes/shapes.qrc
+++ b/examples/quick/shapes/shapes.qrc
@@ -23,5 +23,6 @@
         <file>arcRotation.qml</file>
         <file>tigerLoader.qml</file>
         <file>text.qml</file>
+        <file>zoomtiger.qml</file>
     </qresource>
 </RCC>
diff --git a/examples/quick/shapes/tiger.qml b/examples/quick/shapes/tiger.qml
index 148039aff1..40fcaf7fc2 100644
--- a/examples/quick/shapes/tiger.qml
+++ b/examples/quick/shapes/tiger.qml
@@ -7,7 +7,7 @@ import QtQuick.Shapes
 Shape {
     asynchronous: true
     width: 494; height: 510
-
+    property bool highlightOnTap: true
     ShapePath {
         fillColor: "#ffffff"
         strokeColor: "#000000"
@@ -3574,7 +3574,10 @@ Shape {
         opacity: tapHandler.pressed ? 1 : 0
         containsMode: Shape.FillContains
 
-        TapHandler { id: tapHandler }
+        TapHandler {
+            id: tapHandler
+            enabled: highlightOnTap
+        }
 
         ShapePath {
             strokeColor: "red"
diff --git a/examples/quick/shapes/zoomtiger.qml b/examples/quick/shapes/zoomtiger.qml
new file mode 100644
index 0000000000..fb79042dd8
--- /dev/null
+++ b/examples/quick/shapes/zoomtiger.qml
@@ -0,0 +1,152 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Shapes
+import QtQuick.Controls
+
+Rectangle {
+    id: root
+    width: 1024
+    height: 768
+
+    readonly property color col: "lightsteelblue"
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: Qt.tint(root.col, "#20FFFFFF")
+        }
+        GradientStop {
+            position: 0.1
+            color: Qt.tint(root.col, "#20AAAAAA")
+        }
+        GradientStop {
+            position: 0.9
+            color: Qt.tint(root.col, "#20666666")
+        }
+        GradientStop {
+            position: 1.0
+            color: Qt.tint(root.col, "#20000000")
+        }
+    }
+
+    layer.enabled: msaaCheckBox.checked
+    layer.samples: 4
+
+    Item {
+        id: zoomView
+        anchors.fill: parent
+        anchors.margins: 10
+        anchors.leftMargin: 100
+        property bool zoomedIn: false
+        property rect zoomTarget: "0, 0, 100x100"
+        property rect zoomRect: zoomTarget
+        Behavior on zoomRect {
+            id: zoomBehavior
+            PropertyAnimation { id: zoomAnimation; duration: 800 }
+        }
+        property real zoomScale: Math.min(width / zoomRect.width, height / zoomRect.height)
+
+        Item {
+            width: loader1.width
+            height: loader1.height
+            scale: zoomView.zoomScale
+            transformOrigin: Item.TopLeft
+            Loader {
+                id: loader1
+                x: -zoomView.zoomRect.x
+                y: -zoomView.zoomRect.y
+                property rect br: item ? item.boundingRect : "0,0,100x100"
+                source: "tiger.qml"
+                asynchronous: true
+                visible: status === Loader.Ready
+                onLoaded: {
+                    item.highlightOnTap = false
+                    zoomView.zoomTarget = br
+                    width = br
+                    height = br
+                }
+            }
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+
+        property vector2d clickPoint
+        property vector2d zoomPoint
+        property bool dragged: false
+        property real targetSize: 30
+        enabled: !zoomAnimation.running
+        onPressed: (event) =>  {
+                       clickPoint = Qt.vector2d(event.x, event.y)
+                       zoomPoint = Qt.vector2d(zoomView.zoomRect.x, zoomView.zoomRect.y)
+                       dragged = false
+                       zoomBehavior.enabled = false
+                   }
+        onReleased: (event) => {
+                        if (!dragged)
+                        doTap(Qt.point(event.x, event.y))
+                    }
+        onPositionChanged: (event) => {
+                               if (!dragged) {
+                                   let delta = Qt.vector2d(event.x, event.y).minus(clickPoint)
+                                   if (delta.length() < drag.threshold)
+                                   return
+                               }
+                               dragged = true
+                               if (zoomView.zoomedIn) {
+                                   doDrag(Qt.point(event.x, event.y))
+                               }
+                           }
+        function doDrag(pos) {
+            let r = zoomView.zoomTarget
+            let xx = zoomPoint.x - (pos.x - clickPoint.x) / zoomView.zoomScale
+            let yy = zoomPoint.y - (pos.y - clickPoint.y) / zoomView.zoomScale
+            zoomView.zoomTarget = Qt.rect(xx, yy, r.width, r.height)
+        }
+        function doTap(pos) {
+            if (zoomView.zoomedIn) {
+                zoomBehavior.enabled = true
+                zoomView.zoomTarget = loader1.item.boundingRect
+                zoomView.zoomedIn = false
+            } else {
+                let localPos = loader1.mapFromItem(root, pos)
+                let xx = localPos.x - loader1.br.left
+                let yy = localPos.y - loader1.br.top
+                if (loader1.item.contains(Qt.point(xx,yy))) {
+                    zoomBehavior.enabled = true
+                    zoomView.zoomTarget = Qt.rect(xx - 184 - targetSize/2, yy - 144 - targetSize/2, targetSize, targetSize)
+                    zoomView.zoomedIn = true
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        opacity: 0.5
+        color: "white"
+        x: settings.childrenRect.x
+        y: settings.childrenRect.y
+        width: settings.childrenRect.width
+        height:  settings.childrenRect.height
+    }
+    Column {
+        id: settings
+        RadioButton {
+            id: curveRendererCheckBox
+            text: "Curve Renderer [tech preview]"
+            onCheckedChanged: {
+                loader1.item.preferredRendererType = checked ? Shape.CurveRenderer : Shape.GeometryRenderer
+            }
+        }
+        RadioButton {
+            id: geometryRendererCheckBox
+            text: "Geometry Renderer"
+            checked: true
+        }
+        RadioButton {
+            id: msaaCheckBox
+            text: "Geometry Renderer 4x MSAA"
+        }
+    }
+}