EffectComposer: Add advanced mode button

In advanced mode, users can add/edit/remove properties and shader code
of non-custom nodes.

Fixes: QDS-14219
Change-Id: I9fe0b64da0201c47b83e31fbc5fd55d99c323316
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposerTopBar.qml

@@ -82,6 +82,7 @@ Rectangle {
             enabled: root.backendModel ? root.backendModel.isEnabled
                                          && root.backendModel.currentComposition !== ""
                                        : false
+            visible: root.backendModel ? root.backendModel.advancedMode : false
 
             onClicked: root.backendModel.openMainCodeEditor()
 
@@ -111,22 +112,43 @@ Rectangle {
         color: StudioTheme.Values.themeTextColor
     }
 
-    HelperWidgets.AbstractButton {
+    Row {
-        objectName: "btnEffectComposerHelp"
+        spacing: 5
-
         anchors.verticalCenter: parent.verticalCenter
         anchors.rightMargin: 5
         anchors.right: parent.right
 
-        style: StudioTheme.Values.viewBarButtonStyle
+        HelperWidgets.AbstractButton {
-        buttonIcon: StudioTheme.Constants.help
+            objectName: "btnEffectComposerAdvancedMode"
-        tooltip: qsTr("How to use Effect Composer:
+
+            anchors.verticalCenter: parent.verticalCenter
+
+            style: StudioTheme.Values.viewBarButtonStyle
+            buttonIcon: StudioTheme.Constants.settings_medium
+            tooltip: qsTr("In advanced mode, you can manage effect properties and edit shader code for all effects.")
+            checkable: true
+            checked: root.backendModel ? root.backendModel.advancedMode : false
+
+            onClicked: root.backendModel.advancedMode = !root.backendModel.advancedMode
+        }
+
+        HelperWidgets.AbstractButton {
+            id: openHelpButton
+
+            objectName: "btnEffectComposerHelp"
+
+            anchors.verticalCenter: parent.verticalCenter
+
+            style: StudioTheme.Values.viewBarButtonStyle
+            buttonIcon: StudioTheme.Constants.help
+            tooltip: qsTr("How to use Effect Composer:
 1. Click \"+ Add Effect\" to add effect node
 2. Adjust the effect nodes properties
 3. Change the order of the effects, if you like
 4. See the preview
 5. Save in the assets library, if you wish to reuse the effect later")
 
-        onClicked: Qt.openUrlExternally("https://doc.qt.io/qtdesignstudio/qtquick-effect-composer-view.html")
+            onClicked: Qt.openUrlExternally("https://doc.qt.io/qtdesignstudio/qtquick-effect-composer-view.html")
+        }
     }
 }

share/qtcreator/qmldesigner/effectComposerQmlSources/EffectCompositionNode.qml

@@ -219,6 +219,7 @@ HelperWidgets.Section {
                     editing: root.editedUniformIndex === index
                     disableMoreMenu: root.editedUniformIndex >= 0
                     isDependencyNode: isDependency
+                    isCustomNode: isCustom
 
                     onReset: nodeUniformsModel.resetData(index)
                     onRemove: {
@@ -282,7 +283,7 @@ HelperWidgets.Section {
 
             Row {
                 height: 40
-                visible: !isDependency && !addPropertyForm.visible
+                visible: (root.backendModel.advancedMode || isCustom) && !isDependency && !addPropertyForm.visible
                 anchors.horizontalCenter: parent.horizontalCenter
                 spacing: 10
 

share/qtcreator/qmldesigner/effectComposerQmlSources/EffectCompositionNodeUniform.qml

@@ -14,8 +14,10 @@ Item {
 
     property bool editing: false
     property bool disableMoreMenu: false
-    property bool isDependencyNode: true
+    property bool isDependencyNode: false
+    property bool isCustomNode: false
     property alias editPropertyFormParent: editPropertyFormPlaceholder
+    readonly property var backendModel: EffectComposerBackend.effectComposerModel
 
     height: layout.implicitHeight + editPropertyFormPlaceholder.height + column.spacing
     visible: !uniformUseCustomValue
@@ -146,7 +148,7 @@ Item {
                     tooltip: root.disableMoreMenu ? qsTr("Additional actions disabled while editing existing property.")
                                                   : qsTr("Access additional property actions.")
                     enabled: !root.disableMoreMenu
-                    visible: !root.isDependencyNode
+                    visible: (root.backendModel.advancedMode || root.isCustomNode) && !root.isDependencyNode
 
                     onClicked: menuLoader.show()
                 }

src/plugins/effectcomposer/effectcomposermodel.h

@@ -61,6 +61,7 @@ class EffectComposerModel : public QAbstractListModel
     Q_PROPERTY(int customPreviewImageCount READ customPreviewImageCount NOTIFY customPreviewImageCountChanged)
     Q_PROPERTY(int mainCodeEditorIndex READ mainCodeEditorIndex CONSTANT)
     Q_PROPERTY(QString effectErrors READ effectErrors NOTIFY effectErrorsChanged)
+    Q_PROPERTY(bool advancedMode MEMBER m_advancedMode NOTIFY advancedModeChanged)
 
 public:
     EffectComposerModel(QObject *parent = nullptr);
@@ -181,6 +182,7 @@ signals:
     void currentPreviewImageChanged();
     void previewImagesChanged();
     void customPreviewImageCountChanged();
+    void advancedModeChanged();
 
 private:
     enum ErrorTypes {
@@ -291,6 +293,7 @@ private:
     QUrl m_currentPreviewImage;
     QList<QUrl> m_customPreviewImages;
     int m_currentBakeCounter = 0;
+    bool m_advancedMode = false;
 
     const QRegularExpression m_spaceReg = QRegularExpression("\\s+");
 };