// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \title Qt Quick Demo - Photo Surface
    \ingroup qtquickdemos
    \example demos/photosurface
    \brief A QML app for touch devices that uses a Repeater with a
    FolderListModel to access content in a folder, and a PinchArea that contains
    a MouseArea to handle pinch gestures on the fetched content.
    \image qtquick-demo-photosurface-small.png

    \e{Photo Surface} demonstrates how to use a \l{Repeater} with a
    FolderListModel and a FolderDialog to access images from a folder selected
    by a user and how to handle dragging, rotation and pinch zooming within the
    same item using a \l PinchArea that contains a \l MouseArea.

    All the app code is contained in one QML file, \c photosurface.qml. Inline
    JavaScript code is used to place, rotate, and scale images on the photo
    surface.

    \include examples-run.qdocinc

    \section1 Creating the Main Window

    To create the main window for the Photo Surface app, we use the \l{Window}
    QML type as the root item. It automatically sets up the window for use with
    \l{Qt Quick} graphical types:

    \quotefromfile demos/photosurface/photosurface.qml
    \skipto Window {
    \printuntil currentFrame

    To use the \l{Window} type, we must import it:

    \code
    import QtQuick.Window
    \endcode

    \section1 Accessing Folder Contents

    We use a \l{Repeater} QML type together with the FolderListModel to display
    GIF, JPG, and PNG images located in a folder:

    \quotefromfile demos/photosurface/photosurface.qml
    \skipto Repeater
    \printuntil }

    To use the FolderListModel type, we must import it:

    \code
    import Qt.labs.folderlistmodel
    \endcode

    We use a FolderDialog to enable users to select the folder that contains
    the images:

    \quotefromfile demos/photosurface/photosurface.qml
    \skipto FolderDialog
    \printuntil }

    To use the FolderDialog type, we add the following import statement:

    \code
    import Qt.labs.platform
    \endcode

    We use the \c {folderDialog.open()} function to open the file dialog when the
    app starts:

    \code
    Component.onCompleted: folderDialog.open()
    \endcode

    Users can also click the folder dialog icon to open it. We use
    an \l{Image} QML type to display the icon. Inside the \l{Image} type, we
    use a MouseArea with the \c onClicked signal handler to call the
    \c {folderDialog.open()} function:

    \quotefromfile demos/photosurface/photosurface.qml
    \skipuntil Image {
    \skipto Image {
    \printuntil }
    \printuntil }

    \section1 Displaying Images on the Photo Surface

    We use a \l{Rectangle} as a delegate for a \l{Repeater} to provide a frame
    for each image that the FolderListModel finds in the selected folder. We use
    JavaScript \c Math() methods to place the frames randomly on the photo
    surface and to rotate them at random angles, as well as to scale the images:

    \quotefromfile demos/photosurface/photosurface.qml
    \skipto Rectangle
    \printuntil Component.onCompleted
    \printuntil }

    \section1 Handling Pinch Gestures

    We use a PinchArea that contains a MouseArea in the photo frames to handle
    dragging, rotation and pinch zooming of the frame:

    \skipto PinchArea
    \printuntil onPinchStarted

    We use the \c pinch group property to control how the photo frames react to
    pinch gestures. The \c pinch.target sets \c photoFrame as the item to
    manipulate. The rotation properties specify that the frames can be rotated
    at all angles and the scale properties specify that they can be scaled
    between \c 0.1 and \c 10.

    In the MouseArea's \c onPressed signal handler, we raise the selected photo
    frame to the top by increasing the value of its \c z property. The root item
    stores the z value of the top-most frame. The border color of the photo
    frame is controlled in the \c onEntered signal handler to highlight the
    selected image:

    \skipto MouseArea
    \printuntil onEntered

    To enable you to test the example on the desktop, we use the MouseArea's
    \c onWheel signal handler to simulate pinch gestures by using a mouse:

    \printuntil photoFrame.scale
    \printuntil }
    \printuntil }

    The \c onWheel signal handler is called in response to mouse wheel gestures.
    Use the vertical wheel to zoom and Ctrl and the vertical wheel to rotate
    frames. If the mouse has a horizontal wheel, use it to rotate frames.

    \sa {QML Applications}
*/
