summaryrefslogtreecommitdiffstats
path: root/tools/qqem/qml/AddNodeDialog.qml
blob: 0715208e021f341e59f40befbf9c67395b26aec7 (plain)
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
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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
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
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only

import QtQuick
import QtQuick.Controls

CustomPopup {
    id: rootItem

    property int startNodeId: -1
    property int endNodeId: -1
    property string selectedNodeFile
    property string selectedNodeName
    property string selectedNodeDescription
    property string selectedNodeRequires
    property var selectedNodeProperties: []
    property bool selectedNodeCanBeAdded: true

    property real showHideAnimationSpeed: 400
    // All currently open node groups
    property var openGroups: []

    function reset() {
        startNodeId = -1;
        endNodeId = -1;
        selectedNodeFile = "";
        selectedNodeName = "";
        selectedNodeDescription = "";
        selectedNodeRequires = "";
        selectedNodeProperties = [];
        selectedNodeCanBeAdded = true;
    }

    function addSelectedNode() {
        effectManager.addEffectNode(selectedNodeFile, rootItem.startNodeId, rootItem.endNodeId);
        rootItem.close();
    }

    modal: true
    width: 700
    height: 500
    padding: 10

    Text {
        id: dialogTitle
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Add Effect Node"
        font.pixelSize: 16
        color: mainView.foregroundColor2
    }
    Row {
        anchors.top: dialogTitle.bottom
        anchors.topMargin: 10
        anchors.bottom: buttonBar.top
        anchors.bottomMargin: 10
        width: parent.width
        Component {
            id: sectionHeading
            Item {
                required property string section
                readonly property bool show: openGroups.includes(section)
                width: effectsListView.width - scrollBar.width - 5
                height: 40
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: 2
                    color: mainView.backgroundColor2
                    border.width: 1
                    border.color: mainView.foregroundColor1
                }
                Image {
                    x: 10
                    source: "images/icon_arrow.png"
                    anchors.verticalCenter: parent.verticalCenter
                    rotation: show ? 90 : 0
                    scale: 0.5
                    Behavior on rotation {
                        NumberAnimation {
                            duration: showHideAnimationSpeed
                            easing.type: Easing.InOutQuad
                        }
                    }
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    x: 30
                    color: mainView.foregroundColor2
                    font.bold: true
                    font.pixelSize: 12
                    text: parent.section
                    font.capitalization: Font.AllUppercase
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        // Show/hide the group
                        const index = openGroups.indexOf(section);
                        if (index > -1)
                            openGroups.splice(index, 1);
                        else
                            openGroups.push(section);
                        // Triggering manually required for array properties
                        // so 'show' is updated.
                        openGroupsChanged();
                        effectManager.showHideAddNodeGroup(parent.section, show);
                    }
                }
            }
        }
        ListView {
            id: effectsListView
            width: parent.width * 0.35
            height: parent.height
            model: effectManager.addNodeModel
            clip: true
            cacheBuffer: 10000
            ScrollBar.vertical: ScrollBar {
                id: scrollBar
                policy: ScrollBar.AlwaysOn
            }
            section.property: "group"
            section.criteria: ViewSection.FullString
            section.delegate: sectionHeading
            delegate: Item {
                property real showAnimated: model.show
                x: 2
                width: effectsListView.width - scrollBar.width - 9
                height: showAnimated * 30
                visible: opacity
                opacity: showAnimated
                Behavior on showAnimated {
                    NumberAnimation {
                        duration: showHideAnimationSpeed
                        easing.type: Easing.InOutQuad
                    }
                }

                Rectangle {
                    anchors.fill: parent
                    color: mainView.backgroundColor1
                    border.color: (selectedNodeFile === model.file) ? highlightColor : "transparent"
                    border.width: 2
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                    text: model.name
                    color: mainView.foregroundColor2
                    font.pixelSize: 14
                    elide: Text.ElideRight
                }
                Image {
                    anchors.right: parent.right
                    anchors.rightMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    height: parent.height * 0.4
                    width: height
                    source: "images/icon_requires.png"
                    mipmap: true
                    visible: model.requires !== ""
                    opacity: 0.2
                    MouseArea {
                        id: requiresIconMouseArea
                        anchors.fill: parent
                        hoverEnabled: true
                    }
                    ToolTip {
                        parent: parent
                        visible: requiresIconMouseArea.containsMouse
                        delay: 1000
                        text: "Requires: " + model.requires
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        selectedNodeName = model.name;
                        selectedNodeFile = model.file;
                        selectedNodeDescription = model.description;
                        selectedNodeRequires = model.requires;
                        selectedNodeProperties = model.properties;
                        selectedNodeCanBeAdded = model.canBeAdded;
                    }
                    onDoubleClicked: {
                        if (model.canBeAdded)
                            addSelectedNode();
                    }
                }
            }
            BusyIndicator {
                id: refreshNodesIndicator
                anchors.centerIn: parent
                opacity: 0.0
                running: opacity > 0
                visible: running
                function show() {
                    nodesLoadingIndicatorAnimation.restart();
                }
                SequentialAnimation {
                    id: nodesLoadingIndicatorAnimation
                    NumberAnimation {
                        target: refreshNodesIndicator
                        property: "opacity"
                        to: 1.0
                        duration: 250
                        easing.type: Easing.InOutQuad
                    }
                    PauseAnimation {
                        duration: 500
                    }
                    NumberAnimation {
                        target: refreshNodesIndicator
                        property: "opacity"
                        to: 0.0
                        duration: 250
                        easing.type: Easing.InOutQuad
                    }
                }
            }
        }
        Flickable {
            id: nodeInfoFlickable
            readonly property int padding: 10
            width: parent.width - effectsListView.width
            height: parent.height
            contentHeight: nodeInfo.height
            clip: true
            ScrollBar.vertical: ScrollBar {
                width: 15
                active: true
            }
            Column {
                id: nodeInfo
                y: nodeInfoFlickable.padding
                x: nodeInfoFlickable.padding
                width: parent.width - nodeInfoFlickable.padding * 3
                spacing: nodeInfoFlickable.padding
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: selectedNodeName
                    font.pixelSize: 16
                    font.bold: true
                    color: mainView.foregroundColor2
                }
                Text {
                    width: parent.width
                    text: selectedNodeDescription
                    font.pixelSize: 14
                    color: mainView.foregroundColor2
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                }
                Text {
                    width: parent.width
                    text: "Requires: " + selectedNodeRequires
                    font.pixelSize: 14
                    font.bold: true
                    color: mainView.foregroundColor2
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    visible: selectedNodeRequires !== ""
                }
                Text {
                    font.pixelSize: 12
                    font.bold: true
                    color: mainView.foregroundColor2
                    text: "PROPERTIES:"
                    visible: selectedNodeProperties.length > 0
                }
                Rectangle {
                    id: propertiesArea
                    width: parent.width
                    height: childrenRect.height + nodeInfoFlickable.padding
                    color: mainView.backgroundColor2
                    border.width: 1
                    border.color: mainView.foregroundColor1
                    visible: selectedNodeProperties.length > 0
                    Column {
                        width: parent.width - nodeInfoFlickable.padding * 2
                        x: nodeInfoFlickable.padding
                        y: nodeInfoFlickable.padding * 0.5
                        Repeater {
                            model: selectedNodeProperties
                            Text {
                                property var nodeProperty: selectedNodeProperties[index]
                                width: parent.width
                                elide: Text.ElideRight
                                font.pixelSize: 14
                                color: mainView.foregroundColor2
                                text: "<b>" + nodeProperty.type + "</b> " + nodeProperty.name
                            }
                        }
                    }
                }
                Item {
                    width: 1
                    height: nodeInfoFlickable.padding
                }
            }
        }
    }
    Item {
        id: buttonBar
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        height: 40
        Button {
            id: cancelButton
            anchors.left: parent.left
            height: parent.height
            text: "Cancel"
            onPressed: {
                rootItem.close();
            }
        }
        Button {
            id: refreshButton
            anchors.left: cancelButton.right
            anchors.leftMargin: 10
            height: parent.height
            text: "Refresh"
            onPressed: {
                refreshNodesIndicator.show();
                effectManager.refreshAddNodesList();
            }
        }
        Button {
            id: addButton
            anchors.right: parent.right
            height: parent.height
            text: "Add"
            enabled: selectedNodeFile != "" && selectedNodeCanBeAdded
            onPressed: {
                rootItem.addSelectedNode();
            }
        }
    }
}