examples/declarative/text/textselection/textselection.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40 import QtQuick 2.0
  41
  42 Rectangle {
  43     id: editor
  44     color: "lightGrey"
  45     width: 640; height: 480
  46
  47     Rectangle {
  48         color: "white"
  49         anchors.fill: parent
  50         anchors.margins: 20
  51
  52         BorderImage {
  53             id: startHandle
  54             source: "pics/startHandle.sci"
  55             opacity: 0.0
  56             width: 10
  57             x: edit.positionToRectangle(edit.selectionStart).x - flick.contentX-width
  58             y: edit.positionToRectangle(edit.selectionStart).y - flick.contentY
  59             height: edit.positionToRectangle(edit.selectionStart).height
  60         }
  61
  62         BorderImage {
  63             id: endHandle
  64             source: "pics/endHandle.sci"
  65             opacity: 0.0
  66             width: 10
  67             x: edit.positionToRectangle(edit.selectionEnd).x - flick.contentX
  68             y: edit.positionToRectangle(edit.selectionEnd).y - flick.contentY
  69             height: edit.positionToRectangle(edit.selectionEnd).height
  70         }
  71
  72         Flickable {
  73             id: flick
  74
  75             anchors.fill: parent
  76             contentWidth: edit.paintedWidth
  77             contentHeight: edit.paintedHeight
  78             interactive: true
  79             clip: true
  80
  81             function ensureVisible(r) {
  82                 if (contentX >= r.x)
  83                     contentX = r.x;
  84                 else if (contentX+width <= r.x+r.width)
  85                     contentX = r.x+r.width-width;
  86                 if (contentY >= r.y)
  87                     contentY = r.y;
  88                 else if (contentY+height <= r.y+r.height)
  89                     contentY = r.y+r.height-height;
  90             }
  91
  92             TextEdit {
  93                 id: edit
  94                 width: flick.width
  95                 height: flick.height
  96                 focus: true
  97                 wrapMode: TextEdit.Wrap
  98                 textFormat: TextEdit.RichText
  99
 100                 onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
 101
 102                 text: "<h1>Text Selection</h1>"
 103                     +"<p>This example is a whacky text selection mechanisms, showing how these can be implemented in the TextEdit element, to cater for whatever style is appropriate for the target platform."
 104                     +"<p><b>Press-and-hold</b> to select a word, then drag the selection handles."
 105                     +"<p><b>Drag outside the selection</b> to scroll the text."
 106                     +"<p><b>Click inside the selection</b> to cut/copy/paste/cancel selection."
 107                     +"<p>It's too whacky to let you paste if there is no current selection."
 108
 109             }
 110         }
 111
 112         Item {
 113             id: menu
 114             opacity: 0.0
 115             width: 100
 116             height: 120
 117             anchors.centerIn: parent
 118
 119             Rectangle {
 120                 border.width: 1
 121                 border.color: "darkBlue"
 122                 radius: 15
 123                 color: "#806080FF"
 124                 anchors.fill: parent
 125             }
 126
 127             Column {
 128                 anchors.centerIn: parent
 129                 spacing: 8
 130
 131                 Rectangle {
 132                     border.width: 1
 133                     border.color: "darkBlue"
 134                     color: "#ff7090FF"
 135                     width: 60
 136                     height: 16
 137
 138                     Text { anchors.centerIn: parent; text: "Cut" }
 139
 140                     MouseArea {
 141                         anchors.fill: parent
 142                         onClicked: { edit.cut(); editor.state = "" }
 143                     }
 144                 }
 145
 146                 Rectangle {
 147                     border.width: 1
 148                     border.color: "darkBlue"
 149                     color: "#ff7090FF"
 150                     width: 60
 151                     height: 16
 152
 153                     Text { anchors.centerIn: parent; text: "Copy" }
 154
 155                     MouseArea {
 156                         anchors.fill: parent
 157                         onClicked: { edit.copy(); editor.state = "selection" }
 158                     }
 159                 }
 160
 161                 Rectangle {
 162                     border.width: 1
 163                     border.color: "darkBlue"
 164                     color: "#ff7090FF"
 165                     width: 60
 166                     height: 16
 167
 168                     Text { anchors.centerIn: parent; text: "Paste" }
 169
 170                     MouseArea {
 171                         anchors.fill: parent
 172                         onClicked: { edit.paste(); edit.cursorPosition = edit.selectionEnd; editor.state = "" }
 173                     }
 174                 }
 175
 176                 Rectangle {
 177                     border.width: 1
 178                     border.color: "darkBlue"
 179                     color: "#ff7090FF"
 180                     width: 60
 181                     height: 16
 182
 183                     Text { anchors.centerIn: parent; text: "Deselect" }
 184
 185                     MouseArea {
 186                         anchors.fill: parent
 187                         onClicked: {
 188                             edit.cursorPosition = edit.selectionEnd;
 189                             edit.deselect();
 190                             editor.state = ""
 191                         }
 192                     }
 193                 }
 194             }
 195         }
 196     }
 197
 198     states: [
 199         State {
 200             name: "selection"
 201             PropertyChanges { target: startHandle; opacity: 1.0 }
 202             PropertyChanges { target: endHandle; opacity: 1.0 }
 203         },
 204         State {
 205             name: "menu"
 206             PropertyChanges { target: startHandle; opacity: 0.5 }
 207             PropertyChanges { target: endHandle; opacity: 0.5 }
 208             PropertyChanges { target: menu; opacity: 1.0 }
 209         }
 210     ]
 211 }