ModuleView.qml 20.4 KB
Newer Older
1
2
3
4
import QtQuick 2.11
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
import custom.licht 1.0
5
6
import QtQuick.Controls.Material 2.2
import QtQuick.Dialogs 1.2
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Item{
    id: root

    Item{
        clip: true
        anchors.top : parent.top
        anchors.bottom:  parent.bottom
        width: 300
        id: swipeView
        Page{

            id:tab1
            width: parent.width
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            clip: true
            ListView{
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right:  parent.right
Leander Schulten's avatar
Leander Schulten committed
28
                anchors.bottom: parent.bottom
29
30
                id:listView
                delegate: ItemDelegate{
Leander Schulten's avatar
Leander Schulten committed
31
                    property var itemData : modelData
32
                    width: parent.width
Leander Schulten's avatar
Leander Schulten committed
33
34
                    height: 60
                    text: modelData.name +  " (" + moduleTypeModel[modelData.type] + ')'
35
36
37
38
39
40
41
42
                    onClicked: {
                        listView.currentIndex = index;
                    }
                }
                highlight: Rectangle{
                    color: "blue"
                    opacity: 0.7
                }
Leander Schulten's avatar
Leander Schulten committed
43
                model: modulesModel
44
45
46
47
48
49
50
51
52

            }
            footer: RowLayout{
                Button{
                    Layout.preferredWidth: listView.width/2-5
                    Layout.leftMargin: 5
                    id: buttonAdd
                    text:"Add"
                    font.pixelSize: 15
Leander Schulten's avatar
Leander Schulten committed
53
                    onClicked: {ModelManager.addModule(); console.log("test");}
54
55
56
57
58
59
60
                }
                Button{
                    Layout.preferredWidth: listView.width/2-10
                    Layout.rightMargin: 10
                    id: buttonRemove
                    text:"Remove"
                    font.pixelSize: 15
61
62
63
64
65
66
67
68
69
                    onClicked: {
                        var index = listView.currentIndex;
                        if(index === 0){
                            listView.currentIndex = 1;
                        }else{
                            listView.currentIndex = index - 1;
                        }
                        ModelManager.removeModule(index);
                    }
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
                }
            }
        }
    }

    GridLayout{
        anchors.left: swipeView.right
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        columns: 2
        Label{
            text: "Name:"
        }
        TextInputField{
            Layout.fillWidth: true
Leander Schulten's avatar
Leander Schulten committed
88
89
90
            enabled: listView.currentIndex !== -1
            text: listView.currentItem ? listView.currentItem.itemData.name : "Select one Module"
            onTextChanged: listView.currentItem.itemData.name = text;
91
92
93
            validator: RegExpValidator{
                regExp: /[^\s]+/
            }
94
95
96
97
98
99
100
        }

        Label{
            text: "Description:"
        }
        TextInputField{
            Layout.fillWidth: true
Leander Schulten's avatar
Leander Schulten committed
101
102
103
            enabled: listView.currentIndex !== -1
            text: listView.currentItem ? listView.currentItem.itemData.description : "Select one Module"
            onTextChanged: listView.currentItem.itemData.description = text;
104
105
106
107
108
        }

        Label{
            text: "Type:"
        }
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
        RowLayout{
            ComboBox{
                model: moduleTypeModel
                Layout.preferredWidth: implicitWidth+5
                currentIndex: listView.currentItem.itemData.type
                onCurrentIndexChanged: {
                    listView.currentItem.itemData.type = currentIndex;
                    if(currentIndex == 0/*Program*/ || currentIndex == 1/*LoopProgram*/){
                        outputType.visible = true;
                        inputType.visible = false;
                    }else if(currentIndex == 2/*Filter*/){
                        outputType.visible = true;
                        inputType.visible = true;
                    }
                }
            }
            Label{
                text: "Input:"
                visible:inputType.visible
            }
            ComboBox{
                id: inputType
                model: valueTypeList
                currentIndex: listView.currentItem.itemData.inputType
                Layout.preferredWidth: implicitWidth+5
                onCurrentIndexChanged: listView.currentItem.itemData.inputType = currentIndex;
            }
            Label{text: "Output:"
                visible: outputType.visible
            }
            ComboBox{
                id:outputType
                model: valueTypeList
                currentIndex: listView.currentItem.itemData.outputType
                Layout.preferredWidth: implicitWidth+5
                onCurrentIndexChanged: listView.currentItem.itemData.outputType = currentIndex;
            }
146
147
148
149
150
151
152
153
        }

        Label{
            text: "Properties:"
        }
        ListView{
            id: propertyView
            Layout.fillWidth: true
154
155
156
            anchors.bottomMargin: -20
            clip: true
            Layout.preferredHeight: Math.max(50,Math.min(model.rowCount() * 20,120))
157
            /*onModelChanged:{ for (var prop in model) {
158
159
                                print(prop += " (" + typeof(model[prop]) + ") = " + model[prop]);
                            }
160
            }*/
161
            model: listView.currentItem.itemData.properties
162
            delegate: ItemDelegate{
163
164
165
                id:delegate
                property var modelEntry : modelData
                text: modelData.name
166
167
                width: propertyView.width
                height: 20
168
169
170
171
                Component.onCompleted: console.log(modelEntry)
                onClicked: {
                    dialog.prop = modelEntry;
                    dialog.visible = true;
172
                }
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
                Button{
                    id:removeProp
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.right: addProp.left
                    anchors.topMargin: -4
                    anchors.bottomMargin: -4
                    Material.elevation: 0
                    width: height
                    onClicked: listView.currentItem.itemData.removeProperty(delegate.modelEntry)
                    Image {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        height: 24
                        width: 24
                        source: "icons/remove.svg"
                    }
190
                }
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
                Button{
                    id: addProp
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    anchors.topMargin: -4
                    anchors.bottomMargin: -4
                    width: height
                    Material.elevation: 0
                    onClicked: {
                        dialog.prop = listView.currentItem.itemData.createNewProperty();
                        dialog.visible = true;
                    }
                    Image {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        height: 24
                        width: 24
                        source: "icons/add.svg"
                    }
                }
            }
            Button{
                visible: propertyView.count === 0
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                width: height
                Material.elevation: 0
                onClicked: {
                    dialog.prop = listView.currentItem.itemData.createNewProperty();
                    dialog.visible = true;
                }
                Image {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    height: 24
                    width: 24
                    source: "icons/add.svg"
230
231
232
233
234
235
236
237
238
239
240
241
242
                }
            }
        }

        Label{
            text: "Code"
            font.underline: true
            Layout.columnSpan: 2
        }
        ScrollView{
            Layout.columnSpan: 2
            Layout.fillHeight: true
            Layout.fillWidth: true
Leander Schulten's avatar
Leander Schulten committed
243
            onHoveredChanged: if(!hovered)listView.currentItem.itemData.code = codeEditor.text
244
245
246
247
248
249
            TextArea{
                font.family: "Liberation Mono"
                font.pointSize: 10
                tabStopDistance: 16
                id: codeEditor
                selectByMouse: true
Leander Schulten's avatar
Leander Schulten committed
250
                text: listView.currentItem.itemData.code
251
252
253
254
255
                onCursorPositionChanged: {
                    if(codeCompletionPopup.visible){
                        codeEditorHelper.updateCodeCompletionModel(codeEditor.cursorPosition);
                    }
                }
Leander Schulten's avatar
Leander Schulten committed
256
                //onTextChanged: listView.currentItem.itemData.code = text
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
                Keys.onDownPressed: {
                    if(codeCompletionPopup.visible){
                        event.accepted = true;
                        codeCompletionListView.incrementCurrentIndex();
                    }else{
                        event.accepted = false;
                    }
                }
                Keys.onUpPressed: {
                    if(codeCompletionPopup.visible){
                        event.accepted = true;
                        codeCompletionListView.decrementCurrentIndex();
                    }else{
                        event.accepted = false;
                    }
                }

                Keys.onSpacePressed: {
                    if(event.modifiers & (Qt.MetaModifier|Qt.ControlModifier)){
                        event.accepted = true;
                        var old = codeCompletionPopup.visible;
                        //descriptionPopup.visible = !old;
                        codeCompletionPopup.visible = !old;

                    }else{
                        event.accepted = false;
                    }
                }                
                Keys.onReturnPressed: {
                    if(codeCompletionPopup.visible){
                        event.accepted = true;
                        codeCompletionListView.clickCurrentItem();
                    }else{
                        event.accepted = false;
                    }
                }

                Popup{
                    id: descriptionPopup
                    x: codeCompletionPopup.x
                    y: codeCompletionPopup.y - 20 - descriptionPopup.height
                    width: codeCompletionPopup.width
                    padding: 0
                    height: descriptionLabel.implicitHeight + 4*2
                    contentItem: Rectangle{
                        Label{
                            anchors.margins: 4
                            anchors.fill: parent
                            id: descriptionLabel
                            wrapMode: "WordWrap"
                            text: codeCompletionListView.currentItem.itemData.description
                            background: null
                        }
                        color: "beige"
                    }

                }

                Popup{
                    padding: 0
                    id:codeCompletionPopup                    
                    x: codeEditor.cursorRectangle.x
                    y: codeEditor.cursorRectangle.y + codeEditor.cursorRectangle.height
                    width: contentItem.implicitWidth
                    height: Math.max(Math.min(150,codeCompletionListView.count*20),20)
                    onAboutToShow: {
                        codeEditorHelper.updateCodeCompletionModel(codeEditor.cursorPosition);
                        descriptionPopup.visible = codeCompletionListView.count > 0;
                        codeCompletionListView.updateWidth();
                    }
                    onAboutToHide: descriptionPopup.visible = false
                    contentItem: ListView{
                        clip: true
                        id: codeCompletionListView
                        model: codeEditorHelper.codeCompletions                        
                        delegate: ItemDelegate {
                            property var itemData: modelData
                            text: modelData.completion.replace(/\n*\t*/g,"")
                            onClicked: codeCompletionListView.clickCurrentItem()
                            highlighted: ListView.isCurrentItem
                            width: codeCompletionPopup.width
                            height: 20
                            leftPadding: 1
                            rightPadding: 1
                            onHoveredChanged: {
                                if(hovered){
                                    codeCompletionListView.currentIndex = index;
                                }
                            }
                            background: Rectangle{
                                color: parent.ListView.isCurrentItem?Qt.darker("beige"):"beige"
                            }
                        }
                        implicitWidth: 150
                        onCountChanged: {
                            if(codeCompletionPopup.opened){
                                descriptionPopup.visible = count > 0;
                            }
                            updateWidth();
                        }
                        function updateWidth(){
                            var max = 150;
                            for(var child in codeCompletionListView.contentItem.children){
                                max = Math.max(max,codeCompletionListView.contentItem.children[child].implicitWidth);
                            }
                            codeCompletionListView.implicitWidth = max;
                        }
                        function clickCurrentItem(){
                            if(codeCompletionListView.currentIndex!==-1){
                                console.log("close after " + codeCompletionListView.currentItem.itemData.closeAfterCompletion);
                                if(codeCompletionListView.currentItem.itemData.closeAfterCompletion){
                                    codeCompletionPopup.visible = false;
                                    descriptionPopup.visible = false;
                                }
                                // finde heraus was schon eingegeben wurde
                                var start = codeEditor.cursorPosition-1;
                                while(start>=0 && /[\w_\d]/.test(codeEditor.text.charAt(start))){
                                    --start;
                                }
                                // wenn wir uns in dem zu vervollständigem Wort befinden und das Wort schon vervollständigt im code steht, springen wir mit dem Cursor zum Ende des Wortes
                                var completion = codeCompletionListView.currentItem.itemData.completion;
                                if(codeEditor.text.substr(start+1,completion.length) === codeCompletionListView.completion){
                                    codeEditor.cursorPosition += completion.length - (codeEditor.cursorPosition-start) + 1;
                                    return;
                                }
                                codeEditor.insert(codeEditor.cursorPosition,completion.substring(codeEditor.cursorPosition-start-1));
                            }
                        }
                    }                    
                }
Leander Schulten's avatar
Leander Schulten committed
387

388
                CodeEditorHelper{
Leander Schulten's avatar
Leander Schulten committed
389
390
                    id:codeEditorHelper
                    module: listView.currentItem.itemData
391
392
                    document: codeEditor.textDocument
                    onInsertText: {
393
                        console.log(newText);
394
395
                        codeEditor.insert(codeEditor.cursorPosition,newText);
                        // Hack to display all new text, sometimes new text disappear
396
397
                        //codeEditor.selectAll();
                        //codeEditor.deselect();
398
399
                        codeEditor.cursorPosition = pos;
                    }
400
401
402
403
                    onInformation:{
                        informationDialog.text = text
                        informationDialog.visible = true;
                    }
404
405
406
407
408
409
410
                }
            }
        }
        Button{
            Layout.columnSpan: 2
            Layout.fillWidth: true
            text: "Compile, test and save"
Leander Schulten's avatar
Leander Schulten committed
411
            onClicked: codeEditorHelper.compile()
412
413
414
415
416
        }

    }


417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
    MessageDialog{
        id: informationDialog
    }

    Dialog{
        property var prop;
        onPropChanged: print(prop.typ)
        modality: Qt.WindowModal
        title: "Add/Change Property"
        width:300
        id: dialog
        contentItem: Pane {
            GridLayout{
                anchors.fill: parent
                columns: 2
                Label{
                    text: "Name"
                }
                TextInputField{
                    id:name
                    Layout.fillWidth: true
                    text:dialog.prop.name
                    validator: RegExpValidator{
                        regExp: /[a-z][a-z_0-9]*$/i
                    }
                }
                Label{
                    text:"Beschreibung"
                }
                TextInputField{
                    id:besch
                    Layout.fillWidth: true
                    text:dialog.prop.description
                }
                Label{
                    text:"Typ"
                }
                ComboBox{
                    currentIndex: dialog.prop.type
                    id:type
                    model: modolePropertyTypeList
                    Layout.fillWidth: true
                    onCurrentIndexChanged: {
                        // "Int" << "Long" << "Float" << "Double" << "Bool" << "String";
                            minVal.enabled = currentIndex>=0 && currentIndex <=3;
                            maxVal.enabled = currentIndex>=0 && currentIndex <=3;
                        defaultVal.enabled = currentIndex>=0 && currentIndex <=4;
                    }
                }
                Label{
                    text:"min value"
                }
                TextInputField{
                    Layout.fillWidth: true
                    id: minVal
                    validator: IntValidator{}
                    text:type.currentIndex === 4 ? "0" : type.currentIndex === 5 ? "" : dialog.prop.minValue
                }

                Label{
                    text:"max value"
                }
                TextInputField{
                    Layout.fillWidth: true
                    id:maxVal
                    validator: IntValidator{}
                    text:type.currentIndex === 4 ? "1" : type.currentIndex === 5 ? "" : dialog.prop.maxValue
                }
                Label{
                    text:"default value"
487

488
489
490
491
492
493
494
                }
                TextInputField{
                    text: type.currentIndex !== 5 ? dialog.prop.defaultValue : ""
                    Layout.fillWidth: true
                    id:defaultVal
                    enabled: type.currentIndex !== 5
                    validator: IntValidator{
495
496
                        top:  maxVal.text
                        bottom: minVal.text
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
                    }
                }
                RowLayout{
                    Layout.columnSpan: 2
                    Button{
                        Layout.fillWidth:  true
                        text:"Abbrechen"
                        onClicked: dialog.visible = false
                    }
                    Button{
                        Layout.fillWidth:  true
                        text:"Übernehmen"
                        onClicked: {
                            dialog.visible = false
                            dialog.prop.name = name.text;
                            dialog.prop.description = besch.text;
                            dialog.prop.type = type.currentIndex;
                            if(minVal.text.length!==0)dialog.prop.minValue = minVal.text
                            if(maxVal.text.length!==0)dialog.prop.maxValue = maxVal.text
                            if(defaultVal.text.length!==0)dialog.prop.defaultValue = defaultVal.text
                        }
                    }
                }
            }
        }
    }
523
}