Fix selection of text with negative right bearing

Selecting text with a negative right bearing (like italic text)
would cause clipping to occur at the edges of the characters.

The algorithm for drawing text and text selection tried to
divide the text into two: 1. Selected text, and 2. Unselected text.
However, the selected text might be drawn outside the selection
rect when it has a negative right bearing. Similarly, unselected
text before the selection might overlap with the selection rect
when it has a negative right bearing, or unselected text after
the selection might overlap if it has a negative left bearing.

See added test textinput_italic_selected.qml for an example.

To rectify this, we do drawing of selected text like this:
1. Draw all text with unselected color
2. Draw selection rects
3. Draw the following in the selection text color and clipped
   to the selection rect:
     A. The selected text
     B. The unselected text right before the selection
     C. The unselected text right after the selection

To avoid drawing the same text twice for extra boldness,
we check if 3B or 3C actually contain 3A, in which case we skip
3A.

[ChangeLog][Text] Fixed clipping when selecting text with negative
right bearing.

Task-number: QTBUG-34233
Change-Id: I3506b3a72a2d963c5f24c5b819bbb92769b9aee1
Reviewed-by: Samuel Nevala <samuel.nevala@digia.com>
Reviewed-by: Lars Knoll <lars.knoll@digia.com>
Reviewed-by: Gunnar Sletta <gunnar@sletta.org>

6 files changed, 120 insertions, 0 deletions

diff --git a/tests/manual/scenegraph_lancelot/data/text/textedit_bidi_selected_first.qml b/tests/manual/scenegraph_lancelot/data/text/textedit_bidi_selected_first.qml
new file mode 100644
index 0000000000..78451c0570
--- /dev/null
+++ b/tests/manual/scenegraph_lancelot/data/text/textedit_bidi_selected_first.qml
@@ -0,0 +1,17 @@
+import QtQuick 2.0
+
+Item {
+    width: 320
+    height: 480
+    TextEdit {
+        anchors.centerIn: parent
+        id: textEdit
+        font.family: "Arial"
+        font.pixelSize: 14
+        text: "Lorem ipsum لمّ استبدال dolor sit."
+
+        Component.onCompleted: {
+            textEdit.select(0, 1)
+        }
+    }
+}
diff --git a/tests/manual/scenegraph_lancelot/data/text/textedit_multiline_selected_first_line.qml b/tests/manual/scenegraph_lancelot/data/text/textedit_multiline_selected_first_line.qml
new file mode 100644
index 0000000000..b2eacee344
--- /dev/null
+++ b/tests/manual/scenegraph_lancelot/data/text/textedit_multiline_selected_first_line.qml
@@ -0,0 +1,22 @@
+import QtQuick 2.0
+
+Item {
+    width: 320
+    height: 480
+
+    TextEdit {
+        id: textEdit
+        anchors.centerIn: parent
+        font.family: "Arial"
+        font.pixelSize: 16
+        width: 200
+        textFormat: TextEdit.RichText
+        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+        text: "Lorem<br /> ipsum dolor sit amet, consectetur adipiscing elit. In id diam vitae enim fringilla vestibulum. Pellentesque non leo justo, quis vestibulum augue"
+
+        Component.onCompleted: {
+            textEdit.select(0, 5)
+        }
+    }
+
+}
diff --git a/tests/manual/scenegraph_lancelot/data/text/textedit_multiline_selected_two_first_lines.qml b/tests/manual/scenegraph_lancelot/data/text/textedit_multiline_selected_two_first_lines.qml
new file mode 100644
index 0000000000..4df83b0203
--- /dev/null
+++ b/tests/manual/scenegraph_lancelot/data/text/textedit_multiline_selected_two_first_lines.qml
@@ -0,0 +1,22 @@
+import QtQuick 2.0
+
+Item {
+    width: 320
+    height: 480
+
+    TextEdit {
+        id: textEdit
+        anchors.centerIn: parent
+        font.family: "Arial"
+        font.pixelSize: 16
+        width: 200
+        textFormat: TextEdit.RichText
+        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+        text: "Lorem<br />ipsum<br />dolor sit amet, consectetur adipiscing elit. In id diam vitae enim fringilla vestibulum. Pellentesque non leo justo, quis vestibulum augue"
+
+        Component.onCompleted: {
+            textEdit.select(0, 11)
+        }
+    }
+
+}
diff --git a/tests/manual/scenegraph_lancelot/data/text/textedit_selected_inline_image_selection_outside.qml b/tests/manual/scenegraph_lancelot/data/text/textedit_selected_inline_image_selection_outside.qml
new file mode 100644
index 0000000000..e6e54cb487
--- /dev/null
+++ b/tests/manual/scenegraph_lancelot/data/text/textedit_selected_inline_image_selection_outside.qml
@@ -0,0 +1,20 @@
+import QtQuick 2.0
+
+Item {
+    width: 320
+    height: 480
+
+    TextEdit {
+        id: textEdit
+        anchors.centerIn: parent
+        font.pixelSize: 16
+        width: parent.width
+        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+        textFormat: Text.RichText
+        text: "This is selected from here and <img width=16 height=16 src=\"data/logo.png\" /> to here but not further"
+
+        Component.onCompleted: {
+            textEdit.select(2, 3)
+        }
+    }
+}
diff --git a/tests/manual/scenegraph_lancelot/data/text/textedit_selection_color_separate_item.qml b/tests/manual/scenegraph_lancelot/data/text/textedit_selection_color_separate_item.qml
new file mode 100644
index 0000000000..69679ed882
--- /dev/null
+++ b/tests/manual/scenegraph_lancelot/data/text/textedit_selection_color_separate_item.qml
@@ -0,0 +1,22 @@
+import QtQuick 2.0
+
+Item {
+    width: 320
+    height: 480
+
+    TextEdit {
+        id: textEdit
+        anchors.centerIn: parent
+        width: parent.width
+        font.pixelSize: 14
+        text: "Lorem ipsum dolor sit amet, э consectetur adipiscing elit. Maecenas nibh"
+        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+
+        selectionColor: "red"
+        selectedTextColor: "blue"
+
+        Component.onCompleted: {
+            textEdit.select(28, 29)
+        }
+    }
+}
diff --git a/tests/manual/scenegraph_lancelot/data/text/textinput_italic_selected.qml b/tests/manual/scenegraph_lancelot/data/text/textinput_italic_selected.qml
new file mode 100644
index 0000000000..1df07e6269
--- /dev/null
+++ b/tests/manual/scenegraph_lancelot/data/text/textinput_italic_selected.qml
@@ -0,0 +1,17 @@
+import QtQuick 2.0
+
+Item {
+    width: 320
+    height: 480
+    TextInput {
+        anchors.centerIn: parent
+        id: textInput
+        font.pixelSize: 44
+        font.italic: true
+        text: "777"
+
+        Component.onCompleted: {
+            textInput.select(1, 2)
+        }
+    }
+}