Quick: Add support for replacing touch handles with delegates

Task-number: QTBUG-85043
Change-Id: I1c87aff352e07eb309d5ba8747b9e50a191d478e
Reviewed-by: Michal Klocek <michal.klocek@qt.io>

9 files changed, 337 insertions, 0 deletions

diff --git a/examples/webenginequick/CMakeLists.txt b/examples/webenginequick/CMakeLists.txt
index 8105b6c9a..dc42b3dfe 100644
--- a/examples/webenginequick/CMakeLists.txt
+++ b/examples/webenginequick/CMakeLists.txt
@@ -1,4 +1,5 @@
 qt_internal_add_example(customdialogs)
+qt_internal_add_example(customtouchhandle)
 qt_internal_add_example(lifecycle)
 qt_internal_add_example(minimal)
 qt_internal_add_example(quicknanobrowser)
diff --git a/examples/webenginequick/customtouchhandle/CMakeLists.txt b/examples/webenginequick/customtouchhandle/CMakeLists.txt
new file mode 100644
index 000000000..5062e5d53
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/CMakeLists.txt
@@ -0,0 +1,45 @@
+cmake_minimum_required(VERSION 3.16)
+project(customtouchhandle LANGUAGES CXX)
+
+set(CMAKE_AUTOMOC ON)
+
+if(NOT DEFINED INSTALL_EXAMPLESDIR)
+    set(INSTALL_EXAMPLESDIR "examples")
+endif()
+
+set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginequick/customtouchhandle")
+
+find_package(Qt6 COMPONENTS Core Gui WebEngineQuick)
+
+qt_add_executable(customtouchhandle
+    main.cpp
+)
+
+set_target_properties(customtouchhandle PROPERTIES
+    WIN32_EXECUTABLE TRUE
+    MACOSX_BUNDLE TRUE
+)
+
+target_link_libraries(customtouchhandle PUBLIC
+    Qt::Core
+    Qt::Gui
+    Qt::WebEngineQuick
+)
+
+# Resources:
+set(qml_resource_files
+    "main.qml"
+)
+
+qt6_add_resources(customtouchhandle "qml"
+    PREFIX
+        "/"
+    FILES
+        ${qml_resource_files}
+)
+
+install(TARGETS customtouchhandle
+    RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
+    BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+)
diff --git a/examples/webenginequick/customtouchhandle/customtouchhandle.pro b/examples/webenginequick/customtouchhandle/customtouchhandle.pro
new file mode 100644
index 000000000..a74ef3146
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/customtouchhandle.pro
@@ -0,0 +1,10 @@
+TEMPLATE = app
+
+QT += webenginequick
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/webenginequick/customtouchhandle
+INSTALLS += target
diff --git a/examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg b/examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg
new file mode 100644
index 000000000..bd65c083d
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg
diff --git a/examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc b/examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc
new file mode 100644
index 000000000..5b39e7973
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** 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 The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/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: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \example webenginequick/customtouchhandle
+    \title WebEngine Qt Quick Custom Touch Handle Example
+    \ingroup webengine-examples
+    \brief Shows custom touch handles upon touch selection events.
+
+    \image customtouchhandle.jpg
+
+    \e {WebEngine Qt Quick Touch Handle Example} demonstrates how to use
+    custom touch handles when a touch selection event happens. It shows the
+    minimum amount of code needed to use custom touch handle delegates, and
+    can be used as a basis for further experimentation.
+
+    \section1 Custom Touch Handle
+
+    In \c main.qml we create the custom touch handle delegate.
+
+    \quotefromfile webenginequick/customtouchhandle/main.qml
+    \skipto WebEngineView
+    \printuntil /^\ {4}\}/
+
+    \section1 QML Code
+
+    In \c main.qml we create the top level window filled by a
+    \l{WebEngineView} item loading the \l{Qt Homepage}.
+    To display custom touch handles, a QML item should be delegated to
+    \l{WebEngineView::touchHandleDelegate}.
+
+    The touch handle's position, opacity, and visibility is automatically updated.
+
+    \note If no delegate is provided, Chromium's default touch handles will appear.
+
+    \section1 Requirements
+
+    The example requires a working internet connection to render the
+    \l{Qt Homepage} and a touch-enabled input device to trigger touch
+    events.
+    An optional system proxy should be picked up automatically.
+*/
diff --git a/examples/webenginequick/customtouchhandle/main.cpp b/examples/webenginequick/customtouchhandle/main.cpp
new file mode 100644
index 000000000..2739e1ad0
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/main.cpp
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QtWebEngineQuick/qtwebenginequickglobal.h>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setOrganizationName("QtExamples");
+    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
+    QtWebEngineQuick::initialize();
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+    return app.exec();
+}
diff --git a/examples/webenginequick/customtouchhandle/main.qml b/examples/webenginequick/customtouchhandle/main.qml
new file mode 100644
index 000000000..478b59a0e
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/main.qml
@@ -0,0 +1,143 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Window
+import QtWebEngine
+import QtQuick.Layouts
+import QtQuick.Controls
+
+ApplicationWindow {
+    width: 1024
+    height: 750
+    visible: true
+    header: ToolBar {
+        RowLayout {
+            anchors.fill: parent
+
+            ToolButton {
+                property int itemAction: WebEngineView.Back
+                text: webEngineView.action(itemAction).text
+                enabled: webEngineView.action(itemAction).enabled
+                onClicked: webEngineView.action(itemAction).trigger()
+                icon.name: webEngineView.action(itemAction).iconName
+                display: AbstractButton.TextUnderIcon
+            }
+
+            ToolButton {
+                property int itemAction: WebEngineView.Forward
+                text: webEngineView.action(itemAction).text
+                enabled: webEngineView.action(itemAction).enabled
+                onClicked: webEngineView.action(itemAction).trigger()
+                icon.name: webEngineView.action(itemAction).iconName
+                display: AbstractButton.TextUnderIcon
+            }
+
+            ToolButton {
+                property int itemAction: webEngineView.loading ? WebEngineView.Stop : WebEngineView.Reload
+                text: webEngineView.action(itemAction).text
+                enabled: webEngineView.action(itemAction).enabled
+                onClicked: webEngineView.action(itemAction).trigger()
+                icon.name: webEngineView.action(itemAction).iconName
+                display: AbstractButton.TextUnderIcon
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: webEngineView.url
+                selectByMouse: true
+                onEditingFinished: webEngineView.url = text
+            }
+
+            Label { text: 'Handle: ' }
+            ComboBox {
+                model: [ 'Default', 'Circle', 'Square' ]
+
+                onCurrentValueChanged: {
+                    if (currentValue == 'Circle')
+                        webEngineView.touchHandleDelegate = circleTouchHandle
+                    else if (currentValue == 'Square')
+                        webEngineView.touchHandleDelegate = rectTouchHandle
+                    else
+                        webEngineView.touchHandleDelegate = null
+                }
+
+                Component.onCompleted: currentIndex = indexOfValue('Square')
+            }
+        }
+    }
+
+    Component {
+        id: circleTouchHandle
+        Rectangle {
+            color: "blue"
+            border.color: "black"
+            border.width: 2
+            radius: 50
+        }
+    }
+
+    Component {
+        id: rectTouchHandle
+        Rectangle {
+            border.color: "black"
+            border.width: 2
+            radius: 2
+            onVisibleChanged: if (visible) { color = 'yellow'; cAnim.restart(); }
+            ColorAnimation on color { id: cAnim; to: 'red'; duration: 1000 }
+        }
+    }
+
+    WebEngineView {
+        anchors.fill: parent
+        id: webEngineView
+        url: "https://www.qt.io"
+    }
+}
diff --git a/examples/webenginequick/customtouchhandle/qml.qrc b/examples/webenginequick/customtouchhandle/qml.qrc
new file mode 100644
index 000000000..5f6483ac3
--- /dev/null
+++ b/examples/webenginequick/customtouchhandle/qml.qrc
@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+    </qresource>
+</RCC>
diff --git a/examples/webenginequick/webenginequick.pro b/examples/webenginequick/webenginequick.pro
index 058868395..edf4315a0 100644
--- a/examples/webenginequick/webenginequick.pro
+++ b/examples/webenginequick/webenginequick.pro
@@ -2,6 +2,7 @@ TEMPLATE=subdirs
 
 SUBDIRS += \
     customdialogs \
+    customtouchhandle \
     minimal \
     quicknanobrowser \
     webengineaction