← Back to branch summary

~zsombi/ubuntu-ui-toolkit/textinput-carets

« back to all changes in this revision

Viewing changes to modules/Ubuntu/Components/TextCursor.qml

  • Committer: Zsombor Egri
  • Date: 2014-04-25 08:18:46 UTC
  • Revision ID: zsombor.egri@canonical.com-20140425081846-v3edgpfjcm9idyua
text cursor delegate can be changed independently from caret handler.

Show diffs side-by-side

added added

removed removed

Lines of Context:
modules/Ubuntu/Components/TextCursor.qml
15
15
 */
16
16
 
17
17
import QtQuick 2.0
18
 
import Ubuntu.Components 1.0
 
18
import Ubuntu.Components 1.0 as Ubuntu
19
19
import Ubuntu.Components.Popups 1.0
20
20
 
21
 
StyledItem {
 
21
Item {
22
22
    id: cursorItem
23
23
 
24
24
    width: units.dp(1)
25
25
 
26
26
    /*
27
 
      Property holding the text input item instance.
 
27
      Property holding the text input item instance. This points to the main
 
28
      component not to the input itself!
28
29
      */
29
30
    property var editorItem
30
31
 
45
46
    property var popover
46
47
 
47
48
    /*
48
 
      The property holding the cursor component of the input
49
 
      */
50
 
    property Component cursorDelegate
51
 
 
52
 
    /*
53
49
        The function opens the text input popover setting the text cursor as caller.
54
50
      */
55
51
    function openPopover() {
69
65
        }
70
66
    }
71
67
 
72
 
    style: Theme.createStyleComponent("TextCursorStyle.qml", cursorItem)
 
68
    // cursor visual loader
 
69
    Loader {
 
70
        id: cursorLoader
 
71
        sourceComponent: editorItem.cursorDelegate
 
72
        onItemChanged: {
 
73
            if (item) {
 
74
                item.height = cursorItem.height;
 
75
                cursorItem.width = item.width;
 
76
            }
 
77
        }
 
78
    }
 
79
 
 
80
    // caret loader
 
81
    Loader {
 
82
        id: caretLoader
 
83
        sourceComponent: editorItem.__styleInstance.defaultCaret
 
84
        // apply anchoring
 
85
        onItemChanged: if (item) item.parent = cursorItem
 
86
        property int caretX: x + (item ? item.x : 0)
 
87
        property int caretY: y + (item ? item.y : 0)
 
88
    }
73
89
 
74
90
    Component.onCompleted: {
75
91
        handler.pressAndHold.connect(cursorItem.openPopover);
86
102
    //dragged item
87
103
    Rectangle { opacity: 0.5; color: "blue"
88
104
        id: draggedItem
89
 
        width: __styleInstance.caretHandler ? __styleInstance.caretHandler.width : 0
90
 
        height: __styleInstance.caretHandler ? __styleInstance.caretHandler.height : 0
 
105
        width: caretLoader.width
 
106
        height: caretLoader.height
91
107
        parent: handler.input
 
108
        visible: cursorItem.visible
92
109
 
93
110
        onStateChanged: print('dragstate=', state)
94
111
 
106
123
                draggedItem.moveToCaret(mouse.x, mouse.y);
107
124
                draggedItem.state = "dragging";
108
125
            }
109
 
            Mouse.forwardTo: [dragger]
 
126
            Ubuntu.Mouse.forwardTo: [dragger]
110
127
            /*
111
128
              As we are forwarding the events to the upper mouse area, the release
112
129
              will not get into the normal MosueArea onRelease signal as the preventStealing
117
134
              will end up in a binding loop on the moveToCaret() next time the caret
118
135
              handler is grabbed.
119
136
              */
120
 
            Mouse.onReleased: if (!dragger.drag.active) draggedItem.state = ""
 
137
            Ubuntu.Mouse.onReleased: if (!dragger.drag.active) draggedItem.state = ""
121
138
        }
122
139
 
123
140
        // aligns the draggedItem to the caret and resets the dragger
124
141
        function moveToCaret(cx, cy) {
125
142
            if (cx === undefined && cy === undefined) {
126
 
                cx = cursorItem.x + (__styleInstance.caretHandler ? __styleInstance.caretHandler.x : 0);
127
 
                cy = cursorItem.y + (__styleInstance.caretHandler ? __styleInstance.caretHandler.y : 0);
 
143
                cx = cursorItem.x + caretLoader.caretX;
 
144
                cy = cursorItem.y + caretLoader.caretY;
128
145
            } else {
129
146
                cx += draggedItem.x;
130
147
                cy += draggedItem.y;
146
163
    MouseArea {
147
164
        id: dragger
148
165
        // fill the entire component area
149
 
        parent: handler.main
 
166
        parent: editorItem
150
167
        anchors.fill: parent
151
168
        hoverEnabled: true
152
169
        preventStealing: drag.active
160
177
        property int dragAmountY: dragger.drag.target.y - dragStartY
161
178
 
162
179
        function resetDrag() {
163
 
            thumbStartX = cursorItem.x + (__styleInstance.caretHandler ? __styleInstance.caretHandler.x : 0);
164
 
            thumbStartY = cursorItem.y + (__styleInstance.caretHandler ? __styleInstance.caretHandler.y : 0);
 
180
            thumbStartX = cursorItem.x + caretLoader.caretX;
 
181
            thumbStartY = cursorItem.y + caretLoader.caretY;
165
182
            dragStartX = drag.target.x;
166
183
            dragStartY = drag.target.y;
167
184
        }