qmlTextEditor/CustomTextEditor.qml at master · MrL-Dev/qmlTextEditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3

Item {
    id: root
    property string fontFamily: "Consolas"
    property var fontPointSize: 15
    property alias readOnly: edit.readOnly
    property alias text: edit.text
    property alias selectionColor: edit.selectionColor
    property alias textDocument: edit.textDocument
    function append(txt) {
        edit.append(txt)
    }
    Flickable {
        id: flick
        focus: false
        anchors {
            fill: parent
        }
        contentWidth: edit.paintedWidth
        contentHeight: edit.paintedHeight + 5
        clip: true
        boundsBehavior:Flickable.StopAtBounds
        function ensureVisible(r) {
           if (contentX >= r.x)
               contentX = r.x;
           else if (contentX+width <= r.x+r.width)
               contentX = r.x+r.width-width;
           if (contentY >= r.y)
               contentY = r.y;
           else if (contentY+height <= r.y+r.height)
               contentY = r.y+r.height-height + 10;
        }
        Rectangle {
            id: textBg
            z: 0
            anchors.left: edit.left
            anchors.leftMargin: 5
            color: "#333"
            opacity: 0.2
            radius: 4
            Behavior on width {
               NumberAnimation { duration: 1000; easing.type: Easing.OutElastic }
            }
            Behavior on height {
               NumberAnimation { duration: 1000; easing.type: Easing.OutElastic }
            }
        }
        Column{
            id:lineNumberLabel
            anchors {
                left: parent.left
            }
            Repeater {
               model: edit.lineCount;
               Rectangle {
                   width: lineNumberWidth(edit.lineCount)
                   height: panding.contentHeight
                   color: "#333"
                   Text {
                       id:showLineNumber
                       anchors{
                           bottom:parent.bottom
                           bottomMargin: 1
                           horizontalCenter: parent.horizontalCenter
                       }
                       text:index + 1
                       color: "gray"
                       font.pointSize: fontPointSize
                       font.family: fontFamily
                   }
               }
            }
        }
        TextEdit{
            id: panding
            font.pointSize: fontPointSize
            visible: false
            font.family: fontFamily
            text: " "
        }
        TextEdit {
            property bool ctrlPressed: false
            anchors {
                left:lineNumberLabel.right
                leftMargin: -4
            }
            id: edit
            readOnly: root.readOnly
            selectByMouse: true
            tabStopDistance: 20
            activeFocusOnPress: true
            focus: true
            clip: true
            selectionColor: Material.accent
            wrapMode: TextEdit.WordWrap
            leftPadding: 5
            topPadding: 0.5
            font.pointSize: fontPointSize
            font.family: fontFamily
            width: flick.width - 10
            height: edit.contentHeight > flick.height ?
                        edit.contentHeight : flick.height
            anchors.margins: 10
            cursorVisible: true
            cursorDelegate: cursorDelegate
            onPaintedWidthChanged: {
                textBg.width = edit.paintedWidth + 10
            }
            onPaintedHeightChanged: {
                textBg.height = edit.paintedHeight + 1
            }
            onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
            MouseArea {
                anchors {
                    fill: parent
                }
                propagateComposedEvents: true
                onClicked: mouse.accepted = false;
                onPressed: mouse.accepted = false;
                onReleased: mouse.accepted = false;
                onDoubleClicked: mouse.accepted = false;
                onPositionChanged: mouse.accepted = false;
                onPressAndHold: mouse.accepted = false;
                cursorShape: Qt.IBeamCursor
                onWheel: {
                    var datl = wheel.angleDelta.y / 120
                    if (datl>0 && edit.ctrlPressed) {
                        fontPointSize += 1
                    } else if (datl<0 && edit.ctrlPressed) {
                        fontPointSize -= 1
                    }
                    wheel.accepted = false
                }
            }
            Keys.onPressed: {
                if(event.modifiers === Qt.ControlModifier) {
                    ctrlPressed = true
                }
                event.accepted = false
            }
            Keys.onReleased: {
                if(!(event.modifiers&Qt.ControlModifier)) {
                    ctrlPressed = false
                }
                event.accepted = false
            }
        }
        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }
    Component {
        id: cursorDelegate
        Rectangle {
            id: cursor
            color: Material.accent
            width: 2;
            height: 5
            SequentialAnimation {
                running: true;
                loops: ColorAnimation.Infinite
                NumberAnimation {
                    easing {
                        type: Easing.InQuint
                    }
                    property: "opacity"
                    target: cursor; from: 1.0; to: 0.0; duration: 800;
                }
                NumberAnimation {
                    easing {
                        type: Easing.InQuint
                    }
                    property: "opacity"
                    target: cursor;
                    from: 0.0;
                    to: 1.0;
                    duration: 800;
                }
            }
            Behavior on x {
                SpringAnimation { spring: 3; damping: 0.2  }
            }
            Behavior on y {
                SpringAnimation { spring: 3; damping: 0.2 }
            }
        }
    }
    function lineNumberWidth(lineCount) {
        var width = 1;
        var space = 0;
        while(lineCount >= 10) {
           lineCount /= 10;
           ++width;
        }
        return space = width * fontPointSize
    }
}