Add support for full screen handwriting input

This change adds support for the full screen handwriting input.

In full screen handwriting input, the user is able to use the
whole application screen as a container for handwriting input.

This feature is available to those application integrations,
which integrate the new HandwritingInputPanel type to the
application QML. The HandwritingInputPanel works as an add-on
to the existing InputPanel, so it cannot be used exclusively
without the InputPanel.

Change-Id: I11530b9ccbc66aa59b210bec94d7bb87f0826370
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>

7 files changed, 334 insertions, 1 deletions

diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/VirtualKeyboard-b2qt.qml b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/VirtualKeyboard-b2qt.qml
index 184176a3..4e6305d8 100644
--- a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/VirtualKeyboard-b2qt.qml
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/VirtualKeyboard-b2qt.qml
@@ -19,6 +19,7 @@
 import QtQuick 2.0
 import QtQuick.Window 2.2
 import QtQuick.Enterprise.VirtualKeyboard 2.0
+import "content"
 
 Item {
     implicitWidth: virtualKeyboard.implicitHeight
@@ -36,6 +37,59 @@ Item {
             anchors.right: parent.right
             anchors.bottom: inputPanel.top
         }
+
+        /*  Handwriting input panel for full screen handwriting input.
+
+            This component is an optional add-on for the InputPanel component, that
+            is, its use does not affect the operation of the InputPanel component,
+            but it also can not be used as a standalone component.
+
+            The handwriting input panel is positioned to cover the entire area of
+            application. The panel itself is transparent, but once it is active the
+            user can draw handwriting on it.
+        */
+        HandwritingInputPanel {
+            z: 79
+            id: handwritingInputPanel
+            anchors.fill: parent
+            inputPanel: inputPanel
+            Rectangle {
+                z: -1
+                anchors.fill: parent
+                color: "black"
+                opacity: 0.10
+            }
+        }
+
+        /*  Container area for the handwriting mode button.
+
+            Handwriting mode button can be moved freely within the container area.
+            In this example, a single click changes the handwriting mode and a
+            double-click changes the availability of the full screen handwriting input.
+        */
+        Item {
+            z: 89
+            visible: handwritingInputPanel.enabled && Qt.inputMethod.visible
+            anchors { left: parent.left; top: parent.top; right: parent.right; bottom: inputPanel.top; }
+            HandwritingModeButton {
+                id: handwritingModeButton
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.margins: 10
+                floating: true
+                flipable: true
+                width: handwritingInputPanel.height / 588 * 76
+                height: width
+                state: handwritingInputPanel.state
+                onClicked: handwritingInputPanel.active = !handwritingInputPanel.active
+                onDoubleClicked: handwritingInputPanel.available = !handwritingInputPanel.available
+            }
+        }
+
+        /*  Keyboard input panel.
+
+            The keyboard is anchored to the bottom of the application.
+        */
         InputPanel {
             id: inputPanel
             z: 99
@@ -44,7 +98,12 @@ Item {
             anchors.right: parent.right
             states: State {
                 name: "visible"
-                when: Qt.inputMethod.visible
+                /*  The visibility of the InputPanel can be bound to the Qt.inputMethod.visible property,
+                    but then the handwriting input panel and the keyboard input panel can be visible
+                    at the same time. Here the visibility is bound to InputPanel.active property instead,
+                    which allows the handwriting panel to control the visibility when necessary.
+                */
+                when: inputPanel.active
                 PropertyChanges {
                     target: inputPanel
                     y: appContainer.height - inputPanel.height
diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Active.svg b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Active.svg
new file mode 100644
index 00000000..ef108358
--- /dev/null
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Active.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="390px" height="390px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#5CAA15;}
+	.st4{fill:none;}
+</style>
+<g id="Active">
+	<g>
+		<circle class="st0" cx="195" cy="195" r="191"/>
+		<g class="st1">
+			<path class="st2" d="M195,4c105.5,0,191,85.5,191,191s-85.5,191-191,191S4,300.5,4,195S89.5,4,195,4 M195,0
+				c-26.3,0-51.9,5.2-75.9,15.3c-23.2,9.8-44.1,23.9-62,41.8s-32,38.8-41.8,62C5.2,143.1,0,168.7,0,195s5.2,51.9,15.3,75.9
+				c9.8,23.2,23.9,44.1,41.8,62s38.8,32,62,41.8c24,10.2,49.6,15.3,75.9,15.3s51.9-5.2,75.9-15.3c23.2-9.8,44.1-23.9,62-41.8
+				s32-38.8,41.8-62c10.2-24,15.3-49.6,15.3-75.9s-5.2-51.9-15.3-75.9c-9.8-23.2-23.9-44.1-41.8-62s-38.8-32-62-41.8
+				C246.9,5.2,221.3,0,195,0L195,0z"/>
+		</g>
+	</g>
+	<circle class="st3" cx="195" cy="195" r="141"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st2" d="M155.6,247.3c-10.1,0-18.9-5-23.1-13.6c-10.1-21,5.4-37.4,21.7-54.7c1.2-1.2,2.4-2.5,3.6-3.8
+				c5.3-5.7,5.2-11.5,3.5-14.8c-1.8-3.4-5.5-4.9-10.2-4.2c-16.5,2.6-21.2,26.4-21.2,26.6l-11.9-2.2c0.3-1.3,6.4-32.3,31.2-36.3
+				c9.8-1.6,18.5,2.4,22.7,10.4c4.7,8.9,2.6,20.1-5.3,28.6c-1.2,1.3-2.4,2.6-3.6,3.8c-16.7,17.8-25.9,28.5-19.6,41.4
+				c3.3,6.8,11.1,7.6,16.9,6.3c9.2-2.1,19.8-11.1,19.7-29.5c-0.2-28.1,16.2-41.8,30.2-44.9c14.5-3.2,28.4,3.6,34.7,17
+				c1.3,2.8,2.3,5.4,3.1,8.1c13.3,0.7,25.5,4.3,26,4.4l-3.4,11.5c-0.1,0-9.7-2.8-20.6-3.8c0.5,16.5-8.6,28.9-20.1,34.7
+				c-11.9,6-24,3.8-28.9-5.2c-3.1-5.6-1.9-14.7,2.9-22.5c7.9-13,21.3-17.4,31.5-18.8c-0.4-1.2-0.9-2.4-1.4-3.4
+				c-3.9-8.3-12.2-12.4-21.1-10.4c-9.7,2.2-21,12.1-20.8,33.1c0.2,25.5-15.6,38.1-29,41.3C160.5,247,158,247.3,155.6,247.3z
+				 M237.8,197.7c-14,1.5-20.6,8.5-23.4,12.9c-3.3,5.2-3.4,9.8-2.9,10.9c1.6,2.9,7.3,3,13,0.2C235.3,216.2,238.3,206.6,237.8,197.7z
+				"/>
+		</g>
+		<rect x="118" y="144" class="st4" width="156" height="104"/>
+	</g>
+</g>
+</svg>
diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Available.svg b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Available.svg
new file mode 100644
index 00000000..1178c8c6
--- /dev/null
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Available.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="390px" height="390px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#26282A;}
+	.st4{fill:none;}
+</style>
+<g id="Available">
+	<g>
+		<circle class="st0" cx="195" cy="195" r="191"/>
+		<g class="st1">
+			<path class="st2" d="M195,4c105.5,0,191,85.5,191,191s-85.5,191-191,191S4,300.5,4,195S89.5,4,195,4 M195,0
+				c-26.3,0-51.9,5.2-75.9,15.3c-23.2,9.8-44.1,23.9-62,41.8s-32,38.8-41.8,62C5.2,143.1,0,168.7,0,195s5.2,51.9,15.3,75.9
+				c9.8,23.2,23.9,44.1,41.8,62s38.8,32,62,41.8c24,10.2,49.6,15.3,75.9,15.3s51.9-5.2,75.9-15.3c23.2-9.8,44.1-23.9,62-41.8
+				s32-38.8,41.8-62c10.2-24,15.3-49.6,15.3-75.9s-5.2-51.9-15.3-75.9c-9.8-23.2-23.9-44.1-41.8-62s-38.8-32-62-41.8
+				C246.9,5.2,221.3,0,195,0L195,0z"/>
+		</g>
+	</g>
+	<circle class="st3" cx="195" cy="195" r="141"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st2" d="M155.6,247.3c-10.1,0-18.9-5-23.1-13.6c-10.1-21,5.4-37.4,21.7-54.7c1.2-1.2,2.4-2.5,3.6-3.8
+				c5.3-5.7,5.2-11.5,3.5-14.8c-1.8-3.4-5.5-4.9-10.2-4.2c-16.5,2.6-21.2,26.4-21.2,26.6l-11.9-2.2c0.3-1.3,6.4-32.3,31.2-36.3
+				c9.8-1.6,18.5,2.4,22.7,10.4c4.7,8.9,2.6,20.1-5.3,28.6c-1.2,1.3-2.4,2.6-3.6,3.8c-16.7,17.8-25.9,28.5-19.6,41.4
+				c3.3,6.8,11.1,7.6,16.9,6.3c9.2-2.1,19.8-11.1,19.7-29.5c-0.2-28.1,16.2-41.8,30.2-44.9c14.5-3.2,28.4,3.6,34.7,17
+				c1.3,2.8,2.3,5.4,3.1,8.1c13.3,0.7,25.5,4.3,26,4.4l-3.4,11.5c-0.1,0-9.7-2.8-20.6-3.8c0.5,16.5-8.6,28.9-20.1,34.7
+				c-11.9,6-24,3.8-28.9-5.2c-3.1-5.6-1.9-14.7,2.9-22.5c7.9-13,21.3-17.4,31.5-18.8c-0.4-1.2-0.9-2.4-1.4-3.4
+				c-3.9-8.3-12.2-12.4-21.1-10.4c-9.7,2.2-21,12.1-20.8,33.1c0.2,25.5-15.6,38.1-29,41.3C160.5,247,158,247.3,155.6,247.3z
+				 M237.8,197.7c-14,1.5-20.6,8.5-23.4,12.9c-3.3,5.2-3.4,9.8-2.9,10.9c1.6,2.9,7.3,3,13,0.2C235.3,216.2,238.3,206.6,237.8,197.7z
+				"/>
+		</g>
+		<rect x="118" y="144" class="st4" width="156" height="104"/>
+	</g>
+</g>
+</svg>
diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Unavailable.svg b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Unavailable.svg
new file mode 100644
index 00000000..d8149b53
--- /dev/null
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/FloatingButton_Unavailable.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="390px" height="390px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:none;}
+</style>
+<g id="Unavailable">
+	<g>
+		<circle class="st0" cx="195" cy="195" r="191"/>
+		<g class="st1">
+			<path class="st2" d="M195,4c105.5,0,191,85.5,191,191s-85.5,191-191,191S4,300.5,4,195S89.5,4,195,4 M195,0
+				c-26.3,0-51.9,5.2-75.9,15.3c-23.2,9.8-44.1,23.9-62,41.8s-32,38.8-41.8,62C5.2,143.1,0,168.7,0,195s5.2,51.9,15.3,75.9
+				c9.8,23.2,23.9,44.1,41.8,62s38.8,32,62,41.8c24,10.2,49.6,15.3,75.9,15.3s51.9-5.2,75.9-15.3c23.2-9.8,44.1-23.9,62-41.8
+				s32-38.8,41.8-62c10.2-24,15.3-49.6,15.3-75.9s-5.2-51.9-15.3-75.9c-9.8-23.2-23.9-44.1-41.8-62s-38.8-32-62-41.8
+				C246.9,5.2,221.3,0,195,0L195,0z"/>
+		</g>
+	</g>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st2" d="M155.6,247.3c-10.1,0-18.9-5-23.1-13.6c-10.1-21,5.4-37.4,21.7-54.7c1.2-1.2,2.4-2.5,3.6-3.8
+				c5.3-5.7,5.2-11.5,3.5-14.8c-1.8-3.4-5.5-4.9-10.2-4.2c-16.5,2.6-21.2,26.4-21.2,26.6l-11.9-2.2c0.3-1.3,6.4-32.3,31.2-36.3
+				c9.8-1.6,18.5,2.4,22.7,10.4c4.7,8.9,2.6,20.1-5.3,28.6c-1.2,1.3-2.4,2.6-3.6,3.8c-16.7,17.8-25.9,28.5-19.6,41.4
+				c3.3,6.8,11.1,7.6,16.9,6.3c9.2-2.1,19.8-11.1,19.7-29.5c-0.2-28.1,16.2-41.8,30.2-44.9c14.5-3.2,28.4,3.6,34.7,17
+				c1.3,2.8,2.3,5.4,3.1,8.1c13.3,0.7,25.5,4.3,26,4.4l-3.4,11.5c-0.1,0-9.7-2.8-20.6-3.8c0.5,16.5-8.6,28.9-20.1,34.7
+				c-11.9,6-24,3.8-28.9-5.2c-3.1-5.6-1.9-14.7,2.9-22.5c7.9-13,21.3-17.4,31.5-18.8c-0.4-1.2-0.9-2.4-1.4-3.4
+				c-3.9-8.3-12.2-12.4-21.1-10.4c-9.7,2.2-21,12.1-20.8,33.1c0.2,25.5-15.6,38.1-29,41.3C160.5,247,158,247.3,155.6,247.3z
+				 M237.8,197.7c-14,1.5-20.6,8.5-23.4,12.9c-3.3,5.2-3.4,9.8-2.9,10.9c1.6,2.9,7.3,3,13,0.2C235.3,216.2,238.3,206.6,237.8,197.7z
+				"/>
+		</g>
+		<rect x="118" y="144" class="st3" width="156" height="104"/>
+	</g>
+</g>
+</svg>
diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/HandwritingModeButton.qml b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/HandwritingModeButton.qml
new file mode 100644
index 00000000..6167ad94
--- /dev/null
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/content/HandwritingModeButton.qml
@@ -0,0 +1,148 @@
+/******************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd
+** All rights reserved.
+** For any questions to The Qt Company, please use contact form at http://qt.io
+**
+** This file is part of the Qt Virtual Keyboard module.
+**
+** Licensees holding valid commercial license for Qt may use this file in
+** accordance with the Qt License Agreement provided with the Software
+** or, alternatively, in accordance with the terms contained in a written
+** agreement between you and The Qt Company.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.io
+**
+******************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: handwritingModeButton
+    state: "unavailable"
+    property bool floating
+    property bool flipable
+    readonly property real __minWidthHeight: Math.min(width, height)
+
+    signal clicked()
+    signal doubleClicked()
+
+    Flipable {
+        id: flipableImage
+        anchors.fill: parent
+
+        property bool flipped
+
+        front: Image {
+            sourceSize.width: handwritingModeButton.__minWidthHeight
+            sourceSize.height: handwritingModeButton.__minWidthHeight
+            smooth: false
+            source: "qrc:/content/FloatingButton_Unavailable.svg"
+        }
+
+        back: Image {
+            id: buttonImage
+            sourceSize.width: handwritingModeButton.__minWidthHeight
+            sourceSize.height: handwritingModeButton.__minWidthHeight
+            smooth: false
+            source: "qrc:/content/FloatingButton_Available.svg"
+        }
+
+        states: State {
+            PropertyChanges { target: rotation; angle: 180 }
+            when: flipableImage.flipped
+        }
+
+        transform: Rotation {
+            id: rotation
+            origin.x: flipableImage.width / 2
+            origin.y: flipableImage.height / 2
+            axis { x: 0; y: 1; z: 0 }
+            angle: 0
+        }
+
+        transitions: Transition {
+            enabled: handwritingModeButton.flipable
+            NumberAnimation { target: rotation; property: "angle"; duration: 400 }
+        }
+    }
+
+    states: [
+        State {
+            name: "available"
+            PropertyChanges { target: flipableImage; flipped: true }
+        },
+        State {
+            name: "active"
+            PropertyChanges { target: flipableImage; flipped: true }
+            PropertyChanges { target: buttonImage; source: "qrc:/content/FloatingButton_Active.svg" }
+        }
+    ]
+
+    function snapHorizontal() {
+        if (!floating)
+            return
+        if (mouseArea.drag.maximumX > 0 && anchors.left !== parent.left && anchors.right !== parent.right) {
+            if (x + 20 >= mouseArea.drag.maximumX)
+                anchors.right = parent.right
+            else if (x - 20 <= mouseArea.drag.minimumX)
+                anchors.left = parent.left
+        }
+    }
+
+    function snapVertical() {
+        if (!floating)
+            return
+        if (mouseArea.drag.maximumY > 0 && anchors.bottom !== parent.bottom && anchors.top !== parent.top) {
+            if (y + 20 >= mouseArea.drag.maximumY)
+                anchors.bottom = parent.bottom
+            else if (y - 20 <= mouseArea.drag.minimumY)
+                anchors.top = parent.top
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        drag {
+            target: handwritingModeButton.floating ? handwritingModeButton : undefined
+            axis: Drag.XAxis | Drag.YAxis
+            minimumX: 0
+            maximumX: Math.max(handwritingModeButton.parent.width - handwritingModeButton.width, 0)
+            onMaximumXChanged: handwritingModeButton.snapHorizontal()
+            minimumY: 0
+            maximumY: Math.max(handwritingModeButton.parent.height - handwritingModeButton.height, 0)
+            onMaximumYChanged: handwritingModeButton.snapVertical()
+        }
+        onPressed: {
+            if (!handwritingModeButton.floating)
+                return
+            handwritingModeButton.anchors.left = undefined
+            handwritingModeButton.anchors.top = undefined
+            handwritingModeButton.anchors.right = undefined
+            handwritingModeButton.anchors.bottom = undefined
+        }
+        onReleased: {
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+        }
+        onClicked: {
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+            clickTimer.restart()
+        }
+        onDoubleClicked: {
+            clickTimer.stop()
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+            handwritingModeButton.doubleClicked()
+        }
+        Timer {
+            id: clickTimer
+            interval: Qt.styleHints ? Qt.styleHints.mouseDoubleClickInterval / 3 : 0
+            repeat: false
+            onTriggered: handwritingModeButton.clicked()
+        }
+    }
+}
diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/demo.qrc b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/demo.qrc
index ec99625a..bcb4a9d4 100644
--- a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/demo.qrc
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/demo.qrc
@@ -6,5 +6,9 @@
         <file>content/TextArea.qml</file>
         <file>content/TextBase.qml</file>
         <file>content/TextField.qml</file>
+        <file>content/HandwritingModeButton.qml</file>
+        <file>content/FloatingButton_Active.svg</file>
+        <file>content/FloatingButton_Available.svg</file>
+        <file>content/FloatingButton_Unavailable.svg</file>
     </qresource>
 </RCC>
diff --git a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/virtualkeyboard.pro b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/virtualkeyboard.pro
index 8dd69825..a3c596b5 100644
--- a/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/virtualkeyboard.pro
+++ b/examples/quick/enterprise/virtualkeyboard/virtualkeyboard/virtualkeyboard.pro
@@ -17,6 +17,7 @@ RESOURCES += \
 OTHER_FILES += \
     VirtualKeyboard.qml \
     VirtualKeyboard-b2qt.qml \
+    content/HandwritingModeButton.qml \
     content/ScrollBar.qml \
     content/TextArea.qml \
     content/TextBase.qml \