Added photosurface example to demo PinchArea/MouseArea together

It seems to be important to put the MouseArea inside the PinchArea
in order to support simultaneous drag/rotate/pinch.

Change-Id: Ic3ec6a131bd2d4c7f8a8560cd9c3015a717fef20
Reviewed-by: Gunnar Sletta <gunnar.sletta@digia.com>

5 files changed, 196 insertions, 0 deletions

diff --git a/examples/quick/demos/demos.pro b/examples/quick/demos/demos.pro
index 474b5b1bc0..67128a905f 100644
--- a/examples/quick/demos/demos.pro
+++ b/examples/quick/demos/demos.pro
@@ -8,4 +8,5 @@ SUBDIRS = samegame \
 EXAMPLE_FILES = \
     clocks \
     photoviewer \
+    photosurface \
     rssnews
diff --git a/examples/quick/demos/photosurface/doc/images/qml-photosurface-example-small.png b/examples/quick/demos/photosurface/doc/images/qml-photosurface-example-small.png
new file mode 100644
index 0000000000..a0cd823999
--- /dev/null
+++ b/examples/quick/demos/photosurface/doc/images/qml-photosurface-example-small.png
diff --git a/examples/quick/demos/photosurface/doc/src/photosurface.qdoc b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc
new file mode 100644
index 0000000000..343acce14a
--- /dev/null
+++ b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc
@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.  Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \title QML Demo - Photo Surface
+    \example demos/photosurface
+    \brief This is the typical touch photo-shuffling example written in QML.
+    \image qml-photosurface-example-small.png
+    \ingroup qtquickexamples
+
+    This example demonstrates how to handle dragging, rotation and
+    pinch zooming within the same item using a PinchArea containing a MouseArea.
+*/
diff --git a/examples/quick/demos/photosurface/photosurface.qml b/examples/quick/demos/photosurface/photosurface.qml
new file mode 100644
index 0000000000..80957180d0
--- /dev/null
+++ b/examples/quick/demos/photosurface/photosurface.qml
@@ -0,0 +1,138 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtQml module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtQuick.Dialogs 1.0
+import Qt.labs.folderlistmodel 1.0
+
+Rectangle {
+    id: root
+    width: 1024; height: 600
+    color: "black"
+    visible: true
+    property int highestZ: 0
+    property real defaultSize: 200
+
+    FileDialog {
+        id: fileDialog
+        title: "Choose a folder with some images"
+        selectFolder: true
+        onAccepted: { folderModel.folder = filePaths[0] + "/" }
+    }
+
+    Repeater {
+        model: FolderListModel {
+            id: folderModel
+            objectName: "folderModel"
+            showDirs: false
+            nameFilters: ["*.png", "*.jpg", "*.gif"]
+        }
+        Rectangle {
+            id: photoFrame
+            width: image.width * image.scale + 20
+            height: image.height * image.scale + 20
+            border.color: "black"
+            border.width: 2
+            smooth: true
+            antialiasing: true
+            x: Math.random() * root.width - defaultSize
+            y: Math.random() * root.height - defaultSize
+            rotation: Math.random() * 13 - 6
+            Image {
+                id: image
+                anchors.centerIn: parent
+                fillMode: Image.PreserveAspectFit
+                source: folderModel.folder + fileName
+                scale: defaultSize / Math.max(sourceSize.width, sourceSize.height)
+                antialiasing: true
+            }
+            PinchArea {
+                anchors.fill: parent
+                property real initialScale
+                property real initialRotation
+                onPinchStarted: {
+                    initialScale = image.scale
+                    initialRotation = parent.rotation
+                }
+                onPinchUpdated: {
+                    image.scale = initialScale * pinch.scale;
+                    parent.rotation = initialRotation + pinch.rotation
+                    if (Math.abs(photoFrame.rotation) < 4)
+                        parent.rotation = 0;
+                }
+                onPinchFinished: photoFrame.border.color = "black";
+                MouseArea {
+                    id: dragArea
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    drag.target: photoFrame
+                    onPressed: photoFrame.z = ++root.highestZ;
+                    onEntered: photoFrame.border.color = "red";
+                    onExited: photoFrame.border.color = "black";
+                    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 = image.scale;
+                            image.scale += image.scale * wheel.angleDelta.y / 120 / 10;
+                            photoFrame.x -= image.width * (image.scale - scaleBefore) / 2.0;
+                            photoFrame.y -= image.height * (image.scale - scaleBefore) / 2.0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    Text {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: 10
+        color: "darkgrey"
+        text: "On a touchscreen: use two fingers to zoom and rotate, one finger to drag\n" +
+              "With a mouse: drag normally, use the vertical wheel to zoom, horizontal wheel to rotate, or hold Ctrl while using the vertical wheel to rotate"
+    }
+
+    Component.onCompleted: fileDialog.open()
+}
diff --git a/examples/quick/demos/photosurface/photosurface.qmlproject b/examples/quick/demos/photosurface/photosurface.qmlproject
new file mode 100644
index 0000000000..ae2065f59c
--- /dev/null
+++ b/examples/quick/demos/photosurface/photosurface.qmlproject
@@ -0,0 +1,20 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "photosurface.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    Files {
+        filter: "*.ts"
+        directory: "i18n"
+    }
+}