QDS Editor 3D: Allow the user to select (and reset) the color of grid lines

Task-number: QDS-7122
Change-Id: I686269e61b53bd5e3d5d1225376930612d869072
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

22 files changed, 286 insertions, 128 deletions

diff --git a/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h b/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h
index c69d478875..47196df8d2 100644
--- a/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h
+++ b/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h
@@ -61,7 +61,8 @@ public:
                                 QSize captureImageMinimumSize,
                                 QSize captureImageMaximumSize,
                                 qint32 stateInstanceId,
-                                const QList<QColor> &edit3dBackgroundColor)
+                                const QList<QColor> &edit3dBackgroundColor,
+                                const QColor &edit3dGridColor)
         : instances(instanceContainer)
         , reparentInstances(reparentContainer)
         , ids(idVector)
@@ -78,6 +79,7 @@ public:
         , captureImageMaximumSize(captureImageMaximumSize)
         , stateInstanceId{stateInstanceId}
         , edit3dBackgroundColor{edit3dBackgroundColor}
+        , edit3dGridColor{edit3dGridColor}
     {}
 
     friend QDataStream &operator<<(QDataStream &out, const CreateSceneCommand &command)
@@ -98,6 +100,7 @@ public:
         out << command.captureImageMinimumSize;
         out << command.captureImageMaximumSize;
         out << command.edit3dBackgroundColor;
+        out << command.edit3dGridColor;
 
         return out;
     }
@@ -120,6 +123,7 @@ public:
         in >> command.captureImageMinimumSize;
         in >> command.captureImageMaximumSize;
         in >> command.edit3dBackgroundColor;
+        in >> command.edit3dGridColor;
 
         return in;
     }
@@ -141,6 +145,7 @@ public:
     QSize captureImageMaximumSize;
     qint32 stateInstanceId = 0;
     QList<QColor> edit3dBackgroundColor;
+    QColor edit3dGridColor;
 };
 
 QDebug operator<<(QDebug debug, const CreateSceneCommand &command);
diff --git a/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h b/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h
index cc3611df76..a1dc133032 100644
--- a/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h
+++ b/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h
@@ -57,6 +57,7 @@ public:
                 ParticlesRestart,
                 ParticlesSeek,
                 SelectBackgroundColor,
+                SelectGridColor,
                 ResetBackgroundColor,
               };
 
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml
index 9a95ca34b9..09a4ebdc3f 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml
@@ -47,6 +47,7 @@ Item {
     property alias contentItem: contentItem
     property color backgroundGradientColorStart: "#222222"
     property color backgroundGradientColorEnd: "#999999"
+    property color gridColor: "#aaaaaa"
 
     enum SelectionMode { Item, Group }
     enum TransformMode { Move, Rotate, Scale }
@@ -96,12 +97,14 @@ Item {
                                               {"usePerspective": usePerspective,
                                                "showSceneLight": showEditLight,
                                                "showGrid": showGrid,
+                                               "gridColor": gridColor,
                                                "importScene": activeScene,
                                                "cameraZoomFactor": cameraControl._zoomFactor,
                                                "z": 1});
             editView.usePerspective = Qt.binding(function() {return usePerspective;});
             editView.showSceneLight = Qt.binding(function() {return showEditLight;});
             editView.showGrid = Qt.binding(function() {return showGrid;});
+            editView.gridColor = Qt.binding(function() {return gridColor;});
             editView.cameraZoomFactor = Qt.binding(function() {return cameraControl._zoomFactor;});
 
             selectionBoxes.length = 0;
@@ -217,10 +220,19 @@ Item {
     function updateViewStates(viewStates)
     {
         if ("selectBackgroundColor" in viewStates) {
-            var color = viewStates.selectBackgroundColor
-            backgroundGradientColorStart = color[0];
-            backgroundGradientColorEnd = color[1];
+            if (Array.isArray(viewStates.selectBackgroundColor)) {
+                var colors = viewStates.selectBackgroundColor
+                backgroundGradientColorStart = colors[0];
+                backgroundGradientColorEnd = colors[1];
+            } else {
+                var color = viewStates.selectBackgroundColor
+                backgroundGradientColorStart = color;
+                backgroundGradientColorEnd = color;
+            }
         }
+
+        if ("selectGridColor" in viewStates)
+            viewRoot.gridColor = viewStates.selectGridColor
     }
 
     // If resetToDefault is true, tool states not specifically set to anything will be reset to
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/HelperGrid.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/HelperGrid.qml
index e450a5a796..d9df67fe7c 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/HelperGrid.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/HelperGrid.qml
@@ -33,6 +33,7 @@ Node {
     property alias lines: gridGeometry.lines
     property alias step: gridGeometry.step
     property alias subdivAlpha: subGridMaterial.opacity
+    property alias gridColor: mainGridMaterial.diffuseColor
 
     eulerRotation.x: 90
 
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/SceneView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/SceneView3D.qml
index 7a376179d8..4032e245ed 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/SceneView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/SceneView3D.qml
@@ -32,6 +32,7 @@ View3D {
     property bool usePerspective: false
     property alias showSceneLight: sceneLight.visible
     property alias showGrid: helperGrid.visible
+    property alias gridColor: helperGrid.gridColor
     property alias sceneHelpers: sceneHelpers
     property alias perspectiveCamera: scenePerspectiveCamera
     property alias orthoCamera: sceneOrthoCamera
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml
index 228154a9a4..a3f14e9d11 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml
@@ -48,6 +48,7 @@ Item {
     property alias contentItem: contentItem
     property color backgroundGradientColorStart: "#222222"
     property color backgroundGradientColorEnd: "#999999"
+    property color gridColor: "#aaaaaa"
 
     enum SelectionMode { Item, Group }
     enum TransformMode { Move, Rotate, Scale }
@@ -100,12 +101,14 @@ Item {
                                               {"usePerspective": usePerspective,
                                                "showSceneLight": showEditLight,
                                                "showGrid": showGrid,
+                                               "gridColor": gridColor,
                                                "importScene": activeScene,
                                                "cameraZoomFactor": cameraControl._zoomFactor,
                                                "z": 1});
             editView.usePerspective = Qt.binding(function() {return usePerspective;});
             editView.showSceneLight = Qt.binding(function() {return showEditLight;});
             editView.showGrid = Qt.binding(function() {return showGrid;});
+            editView.gridColor = Qt.binding(function() {return gridColor;});
             editView.cameraZoomFactor = Qt.binding(function() {return cameraControl._zoomFactor;});
 
             selectionBoxes.length = 0;
@@ -211,10 +214,19 @@ Item {
     function updateViewStates(viewStates)
     {
         if ("selectBackgroundColor" in viewStates) {
-            var color = viewStates.selectBackgroundColor
-            backgroundGradientColorStart = color[0];
-            backgroundGradientColorEnd = color[1];
+            if (Array.isArray(viewStates.selectBackgroundColor)) {
+                var colors = viewStates.selectBackgroundColor
+                backgroundGradientColorStart = colors[0];
+                backgroundGradientColorEnd = colors[1];
+            } else {
+                var color = viewStates.selectBackgroundColor
+                backgroundGradientColorStart = color;
+                backgroundGradientColorEnd = color;
+            }
         }
+
+        if ("selectGridColor" in viewStates)
+            viewRoot.gridColor = viewStates.selectGridColor
     }
 
     // If resetToDefault is true, tool states not specifically set to anything will be reset to
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/HelperGrid.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/HelperGrid.qml
index 66f383518e..ef10818eed 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/HelperGrid.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/HelperGrid.qml
@@ -33,6 +33,7 @@ Node {
     property alias lines: gridGeometry.lines
     property alias step: gridGeometry.step
     property alias subdivAlpha: subGridMaterial.opacity
+    property alias gridColor: mainGridMaterial.diffuseColor
 
     eulerRotation.x: 90
 
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/SceneView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/SceneView3D.qml
index e59392b1ee..1d0e0377d3 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/SceneView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/SceneView3D.qml
@@ -32,6 +32,7 @@ View3D {
     property bool usePerspective: false
     property alias showSceneLight: sceneLight.visible
     property alias showGrid: helperGrid.visible
+    property alias gridColor: helperGrid.gridColor
     property alias sceneHelpers: sceneHelpers
     property alias perspectiveCamera: scenePerspectiveCamera
     property alias orthoCamera: sceneOrthoCamera
diff --git a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
index effa871ce6..d614901ca9 100644
--- a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
+++ b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
@@ -1742,7 +1742,7 @@ QObject *Qt5InformationNodeInstanceServer::find3DSceneRoot(QObject *obj) const
 }
 
 void Qt5InformationNodeInstanceServer::setup3DEditView(const QList<ServerNodeInstance> &instanceList,
-                                                       const QHash<QString, QVariantMap> &toolStates)
+                                                       const CreateSceneCommand &command)
 {
 #ifdef QUICK3D_MODULE
     if (!m_editView3DData.rootItem)
@@ -1775,6 +1775,7 @@ void Qt5InformationNodeInstanceServer::setup3DEditView(const QList<ServerNodeIns
         Qt5InformationNodeInstanceServer::updateActiveSceneToEditView3D(true);
     });
 
+    const QHash<QString, QVariantMap> &toolStates = command.edit3dToolStates;
     QString lastSceneId;
     auto helper = qobject_cast<QmlDesigner::Internal::GeneralHelper *>(m_3dHelper);
     if (helper) {
@@ -1828,11 +1829,23 @@ void Qt5InformationNodeInstanceServer::setup3DEditView(const QList<ServerNodeIns
 
     createCameraAndLightGizmos(instanceList);
 
+    if (!command.edit3dBackgroundColor.isEmpty()) {
+        View3DActionCommand backgroundColorCommand(View3DActionCommand::SelectBackgroundColor,
+                                                   QVariant::fromValue(command.edit3dBackgroundColor));
+        view3DAction(backgroundColorCommand);
+    }
+
+    if (command.edit3dGridColor.isValid()) {
+        View3DActionCommand backgroundColorCommand(View3DActionCommand::SelectGridColor,
+                                                   QVariant::fromValue(command.edit3dGridColor));
+        view3DAction(backgroundColorCommand);
+    }
+
     // Queue two renders to make sure icon gizmos update properly
     render3DEditView(2);
 #else
     Q_UNUSED(instanceList)
-    Q_UNUSED(toolStates)
+    Q_UNUSED(command)
 #endif
 }
 
@@ -1954,7 +1967,7 @@ void Qt5InformationNodeInstanceServer::createScene(const CreateSceneCommand &com
     nodeInstanceClient()->componentCompleted(createComponentCompletedCommand(instanceList));
 
     if (ViewConfig::isQuick3DMode()) {
-        setup3DEditView(instanceList, command.edit3dToolStates);
+        setup3DEditView(instanceList, command);
         updateRotationBlocks(command.auxiliaryChanges);
     }
 
@@ -1963,12 +1976,6 @@ void Qt5InformationNodeInstanceServer::createScene(const CreateSceneCommand &com
 #ifdef IMPORT_QUICK3D_ASSETS
     QTimer::singleShot(0, this, &Qt5InformationNodeInstanceServer::resolveImportSupport);
 #endif
-
-    if (!command.edit3dBackgroundColor.isEmpty()) {
-        View3DActionCommand backgroundColorCommand(View3DActionCommand::SelectBackgroundColor,
-                                                   QVariant::fromValue(command.edit3dBackgroundColor));
-        view3DAction(backgroundColorCommand);
-    }
 }
 
 void Qt5InformationNodeInstanceServer::sendChildrenChangedCommand(const QList<ServerNodeInstance> &childList)
@@ -2233,9 +2240,12 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
     case View3DActionCommand::ShowCameraFrustum:
         updatedToolState.insert("showCameraFrustum", command.isEnabled());
         break;
-    case View3DActionCommand::SelectBackgroundColor: {
+    case View3DActionCommand::SelectBackgroundColor:
         updatedViewState.insert("selectBackgroundColor", command.value());
         break;
+    case View3DActionCommand::SelectGridColor: {
+        updatedViewState.insert("selectGridColor", command.value());
+        break;
     }
 #ifdef QUICK3D_PARTICLES_MODULE
     case View3DActionCommand::ShowParticleEmitter:
diff --git a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h
index 291b2c3eec..9f6e450690 100644
--- a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h
+++ b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h
@@ -114,7 +114,7 @@ private:
     void createEditView3D();
     void create3DPreviewView();
     void setup3DEditView(const QList<ServerNodeInstance> &instanceList,
-                         const QHash<QString, QVariantMap> &toolStates);
+                         const CreateSceneCommand &command);
     void createCameraAndLightGizmos(const QList<ServerNodeInstance> &instanceList) const;
     void add3DViewPorts(const QList<ServerNodeInstance> &instanceList);
     void add3DScenes(const QList<ServerNodeInstance> &instanceList);
diff --git a/src/plugins/qmldesigner/CMakeLists.txt b/src/plugins/qmldesigner/CMakeLists.txt
index 1ac2f477bf..bd55391a31 100644
--- a/src/plugins/qmldesigner/CMakeLists.txt
+++ b/src/plugins/qmldesigner/CMakeLists.txt
@@ -158,6 +158,7 @@ extend_qtc_plugin(QmlDesigner
   SOURCES_PREFIX components/edit3d
   SOURCES
   edit3dview.cpp edit3dview.h
+  edit3dviewconfig.h
   edit3dwidget.cpp edit3dwidget.h
   edit3dcanvas.cpp edit3dcanvas.h
   edit3dactions.cpp edit3dactions.h
diff --git a/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp
index 76db41a177..3d7a9207c0 100644
--- a/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp
+++ b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp
@@ -23,85 +23,56 @@
 **
 ****************************************************************************/
 
-#include "backgroundcolorselection.h"
+#pragma once
+
+#include <QColorDialog>
 
-#include <nodeinstanceview.h>
 #include <utils/qtcassert.h>
-#include <view3dactioncommand.h>
-#include <qmldesignerplugin.h>
+
+#include "backgroundcolorselection.h"
+#include "edit3dviewconfig.h"
 
 using namespace QmlDesigner;
 
-namespace {
-QList<QColor> readBackgroundColorConfiguration()
+void BackgroundColorSelection::showBackgroundColorSelectionWidget(QWidget *parent, const QByteArray &key,
+                                                                  View3DActionCommand::Type cmdType)
 {
-    QVariant var = QmlDesigner::DesignerSettings::getValue(
-        QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR);
-
-    if (!var.isValid())
-        return {};
-
-    auto colorNameList = var.value<QList<QString>>();
-    QTC_ASSERT(colorNameList.size() == 2, return {});
-
-    return {colorNameList[0], colorNameList[1]};
-}
+    if (m_dialog)
+        return;
 
-void setBackgroundColorConfiguration(const QList<QColor> &colorConfig)
-{
-    auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
-    View3DActionCommand cmd(View3DActionCommand::SelectBackgroundColor,
-                            QVariant::fromValue(colorConfig));
-    view->view3DAction(cmd);
-}
+    m_dialog = BackgroundColorSelection::createColorDialog(parent, key, cmdType);
+    QTC_ASSERT(m_dialog, return);
 
-void saveBackgroundColorConfiguration(const QList<QColor> &colorConfig)
-{
-    QList<QString> colorsSaved = {colorConfig[0].name(), colorConfig[1].name()};
-    QmlDesigner::DesignerSettings::setValue(
-        QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR,
-        QVariant::fromValue(colorsSaved));
+    QObject::connect(m_dialog, &QWidget::destroyed, m_dialog, [&]() {
+        m_dialog = nullptr;
+    });
 }
 
-} // namespace
-
-QColorDialog *BackgroundColorSelection::createDialog(QWidget *parent)
+QColorDialog *BackgroundColorSelection::createColorDialog(QWidget *parent, const QByteArray &key,
+                                                          View3DActionCommand::Type cmdType)
 {
     auto dialog = new QColorDialog(parent);
 
     dialog->setModal(true);
     dialog->setAttribute(Qt::WA_DeleteOnClose);
 
-    const QList<QColor> oldColorConfig = readBackgroundColorConfiguration();
+    QList<QColor> oldColorConfig = Edit3DViewConfig::load(key);
 
     dialog->show();
 
-    QObject::connect(dialog, &QColorDialog::currentColorChanged, dialog, [](const QColor &color) {
-        setBackgroundColorConfiguration({color, color});
+    QObject::connect(dialog, &QColorDialog::currentColorChanged, dialog, [cmdType](const QColor &color) {
+        Edit3DViewConfig::set(cmdType, color);
     });
 
-    QObject::connect(dialog, &QColorDialog::colorSelected, dialog, [](const QColor &color) {
-        saveBackgroundColorConfiguration({color, color});
+    QObject::connect(dialog, &QColorDialog::colorSelected, dialog, [key](const QColor &color) {
+        Edit3DViewConfig::save(key, color);
     });
 
-    if (!oldColorConfig.isEmpty()) {
-        QObject::connect(dialog, &QColorDialog::rejected, dialog, [oldColorConfig]() {
-            setBackgroundColorConfiguration(oldColorConfig);
+    if (Edit3DViewConfig::isValid(oldColorConfig)) {
+        QObject::connect(dialog, &QColorDialog::rejected, dialog, [cmdType, oldColorConfig]() {
+            Edit3DViewConfig::set(cmdType, oldColorConfig);
         });
     }
 
     return dialog;
 }
-
-void BackgroundColorSelection::showBackgroundColorSelectionWidget(QWidget *parent)
-{
-    if (m_dialog)
-        return;
-
-    m_dialog = BackgroundColorSelection::createDialog(parent);
-    QTC_ASSERT(m_dialog, return);
-
-    QObject::connect(m_dialog, &QWidget::destroyed, m_dialog, [&]() {
-        m_dialog = nullptr;
-    });
-}
diff --git a/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h
index d8832f40fd..f7df55b8e3 100644
--- a/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h
+++ b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h
@@ -25,9 +25,13 @@
 
 #pragma once
 
-#include <QColorDialog>
+#include <QByteArray>
+#include <view3dactioncommand.h>
+
+QT_FORWARD_DECLARE_CLASS(QColorDialog)
 
 namespace QmlDesigner {
+
 class BackgroundColorSelection : public QObject
 {
     Q_OBJECT
@@ -37,10 +41,13 @@ public:
         : QObject{parent}
     {}
 
-    static void showBackgroundColorSelectionWidget(QWidget *parent);
+    static void showBackgroundColorSelectionWidget(QWidget *parent, const QByteArray &key,
+                                                   View3DActionCommand::Type cmdType);
 
 private:
-    static QColorDialog *createDialog(QWidget *parent);
+    static QColorDialog *createColorDialog(QWidget *parent, const QByteArray &key,
+                                           View3DActionCommand::Type cmdType);
+
     inline static QColorDialog *m_dialog = nullptr;
 };
 
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp b/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp
index 76343584c9..e90f20767d 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp
@@ -48,7 +48,8 @@ Edit3DActionTemplate::Edit3DActionTemplate(const QString &description,
 
 void Edit3DActionTemplate::actionTriggered(bool b)
 {
-    if (m_type != View3DActionCommand::Empty && m_type != View3DActionCommand::SelectBackgroundColor) {
+    if (m_type != View3DActionCommand::Empty && m_type != View3DActionCommand::SelectBackgroundColor
+        && m_type != View3DActionCommand::SelectGridColor) {
         auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
         View3DActionCommand cmd(m_type, b);
         view->view3DAction(cmd);
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp b/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp
index 1ef3055ada..aa76d58370 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp
@@ -28,6 +28,8 @@
 #include "edit3dcanvas.h"
 #include "edit3dview.h"
 #include "edit3dwidget.h"
+#include "edit3dviewconfig.h"
+#include "backgroundcolorselection.h"
 
 #include <coreplugin/icore.h>
 #include <coreplugin/messagebox.h>
@@ -42,8 +44,6 @@
 #include <utils/qtcassert.h>
 #include <utils/utilsicons.h>
 
-#include <backgroundcolorselection.h>
-
 #include <QDebug>
 #include <QToolButton>
 
@@ -266,6 +266,70 @@ void Edit3DView::setSeeker(SeekerSlider *slider)
     m_seeker = slider;
 }
 
+Edit3DAction *Edit3DView::createSelectBackgrounColorAction()
+{
+    QString description = QCoreApplication::translate("SelectBackgroundColorAction",
+                                                      "Select Background Color");
+    QString tooltip = QCoreApplication::translate("SelectBackgroundColorAction",
+                                                  "Select a color for the background of the 3D Editor.");
+
+    auto operation = [this](const SelectionContext &) {
+        BackgroundColorSelection::showBackgroundColorSelectionWidget(
+            edit3DWidget(),
+            DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR,
+            View3DActionCommand::SelectBackgroundColor);
+    };
+
+    return new Edit3DAction(
+        Constants::EDIT3D_EDIT_SELECT_BACKGROUND_COLOR, View3DActionCommand::SelectBackgroundColor,
+        description,
+        {}, false, false, {}, {}, operation,
+        tooltip);
+}
+
+Edit3DAction *Edit3DView::createGridColorSelectionAction()
+{
+    QString description = QCoreApplication::translate("SelectGridColorAction", "Select Grid Color");
+    QString tooltip = QCoreApplication::translate("SelectGridColorAction",
+                                                  "Select a color for the grid lines of the 3D Editor.");
+
+    auto operation = [this](const SelectionContext &) {
+        BackgroundColorSelection::showBackgroundColorSelectionWidget(
+            edit3DWidget(),
+            DesignerSettingsKey::EDIT3DVIEW_GRID_COLOR,
+            View3DActionCommand::SelectGridColor);
+    };
+
+    return new Edit3DAction(
+        Constants::EDIT3D_EDIT_SELECT_GRID_COLOR, View3DActionCommand::SelectGridColor,
+        description, {}, false, false, {}, {}, operation,
+        tooltip);
+}
+
+Edit3DAction *Edit3DView::createResetColorAction()
+{
+    QString description = QCoreApplication::translate("ResetEdit3DColorsAction", "Reset Colors");
+    QString tooltip = QCoreApplication::translate("ResetEdit3DColorsAction",
+                                                  "Reset the background color and the color of the "
+                                                  "grid lines of the 3D Editor to the default valus.");
+
+    auto operation = [](const SelectionContext &) {
+        QList<QColor> bgColors = {QRgb(0x222222), QRgb(0x999999)};
+        Edit3DViewConfig::set(View3DActionCommand::SelectBackgroundColor, bgColors);
+        Edit3DViewConfig::save(DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR, bgColors);
+
+        QColor gridColor{0xaaaaaa};
+        Edit3DViewConfig::set(View3DActionCommand::SelectGridColor, gridColor);
+        Edit3DViewConfig::save(DesignerSettingsKey::EDIT3DVIEW_GRID_COLOR, gridColor);
+    };
+
+    return new Edit3DAction(
+        QmlDesigner::Constants::EDIT3D_EDIT_RESET_BACKGROUND_COLOR, View3DActionCommand::ResetBackgroundColor,
+        description,
+        {}, false, false, {}, {}, operation,
+        tooltip);
+}
+
 void Edit3DView::createEdit3DActions()
 {
     m_selectionModeAction
@@ -338,32 +402,6 @@ void Edit3DView::createEdit3DActions()
                 QKeySequence(Qt::Key_G), true, true, {}, {}, nullptr,
                 QCoreApplication::translate("ShowGridAction", "Toggle the visibility of the helper grid."));
 
-    SelectionContextOperation showBackgroundColorSelection = [this](const SelectionContext &) {
-        BackgroundColorSelection::showBackgroundColorSelectionWidget(edit3DWidget());
-    };
-
-    m_backgroundColorSelectionAction = new Edit3DAction(
-        QmlDesigner::Constants::EDIT3D_EDIT_SELECT_BACKGROUND_COLOR, View3DActionCommand::SelectBackgroundColor,
-        QCoreApplication::translate("SelectBackgroundColorAction", "Select Background Color"),
-        {}, false, false, {}, {}, showBackgroundColorSelection,
-        QCoreApplication::translate("SelectBackgroundColorAction", "Select a color for the background of the 3D Editor."));
-
-    m_resetBackgroundColorAction = new Edit3DAction(
-        QmlDesigner::Constants::EDIT3D_EDIT_RESET_BACKGROUND_COLOR, View3DActionCommand::ResetBackgroundColor,
-        QCoreApplication::translate("ResetBackgroundColorAction", "Reset Background Color"),
-        {}, false, false, {}, {}, [](const SelectionContext &) {
-            QList<QColor> colors = {QRgb(0x222222), QRgb(0x999999)};
-            auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
-            View3DActionCommand cmd(View3DActionCommand::SelectBackgroundColor, QVariant::fromValue(colors));
-            view->view3DAction(cmd);
-
-            QList<QString> colorsToSave = {colors[0].name(), colors[1].name()};
-            QmlDesigner::DesignerSettings::setValue(
-                QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR,
-                QVariant::fromValue(colorsToSave));
-        },
-        QCoreApplication::translate("ResetBackgroundColorAction", "Reset background color of the 3D Editor to the default value."));
-
     m_showSelectionBoxAction = new Edit3DAction(
                 QmlDesigner::Constants::EDIT3D_EDIT_SHOW_SELECTION_BOX, View3DActionCommand::ShowSelectionBox,
                 QCoreApplication::translate("ShowSelectionBoxAction", "Show Selection Boxes"),
@@ -521,8 +559,9 @@ void Edit3DView::createEdit3DActions()
     m_visibilityToggleActions << m_showCameraFrustumAction;
     m_visibilityToggleActions << m_showParticleEmitterAction;
 
-    m_backgroundColorActions << m_backgroundColorSelectionAction;
-    m_backgroundColorActions << m_resetBackgroundColorAction;
+    m_backgroundColorActions << createSelectBackgrounColorAction();
+    m_backgroundColorActions << createGridColorSelectionAction();
+    m_backgroundColorActions << createResetColorAction();
 }
 
 QVector<Edit3DAction *> Edit3DView::leftActions() const
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dview.h b/src/plugins/qmldesigner/components/edit3d/edit3dview.h
index e5cb2aba51..b817c20d1a 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dview.h
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dview.h
@@ -85,6 +85,10 @@ private:
     void createEdit3DWidget();
     void checkImports();
 
+    Edit3DAction *createSelectBackgrounColorAction();
+    Edit3DAction *createGridColorSelectionAction();
+    Edit3DAction *createResetColorAction();
+
     QPointer<Edit3DWidget> m_edit3DWidget;
     QVector<Edit3DAction *> m_leftActions;
     QVector<Edit3DAction *> m_rightActions;
@@ -101,8 +105,6 @@ private:
     Edit3DAction *m_orientationModeAction = nullptr;
     Edit3DAction *m_editLightAction = nullptr;
     Edit3DAction *m_showGridAction = nullptr;
-    Edit3DAction *m_backgroundColorSelectionAction = nullptr;
-    Edit3DAction *m_resetBackgroundColorAction = nullptr;
     Edit3DAction *m_showSelectionBoxAction = nullptr;
     Edit3DAction *m_showIconGizmoAction = nullptr;
     Edit3DAction *m_showCameraFrustumAction = nullptr;
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dviewconfig.h b/src/plugins/qmldesigner/components/edit3d/edit3dviewconfig.h
new file mode 100644
index 0000000000..8e4081176a
--- /dev/null
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dviewconfig.h
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#pragma once
+
+#include <view3dactioncommand.h>
+
+#include <nodeinstanceview.h>
+#include <qmldesignerplugin.h>
+
+#include <utils/algorithm.h>
+#include <utils/qtcassert.h>
+
+namespace QmlDesigner {
+
+class Edit3DViewConfig
+{
+public:
+    static QList<QColor> load(const char key[])
+    {
+        QVariant var = DesignerSettings::getValue(key);
+
+        if (!var.isValid())
+            return {};
+
+        auto colorNameList = var.value<QStringList>();
+
+        return Utils::transform(colorNameList, [](const QString &colorName) {
+            return QColor{colorName};
+        });
+    }
+
+    static void set(View3DActionCommand::Type type, const QList<QColor> &colorConfig)
+    {
+        if (colorConfig.size() == 1)
+            set(type, colorConfig.at(0));
+        else
+            setVariant(type, QVariant::fromValue(colorConfig));
+    }
+
+    static void set(View3DActionCommand::Type type, const QColor &color)
+    {
+        setVariant(type, QVariant::fromValue(color));
+    }
+
+    static void save(const QByteArray &key, const QList<QColor> &colorConfig)
+    {
+        QStringList colorNames = Utils::transform(colorConfig, [](const QColor &color) {
+            return color.name();
+        });
+
+        saveVariant(key, QVariant::fromValue(colorNames));
+    }
+
+    static void save(const QByteArray &key, const QColor &color)
+    {
+        saveVariant(key, QVariant::fromValue(color.name()));
+    }
+
+    static bool isValid(const QList<QColor> &colorConfig) { return !colorConfig.isEmpty(); }
+
+private:
+    static void setVariant(View3DActionCommand::Type type, const QVariant &colorConfig)
+    {
+        auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
+        View3DActionCommand cmd(type, colorConfig);
+        view->view3DAction(cmd);
+    }
+
+    static void saveVariant(const QByteArray &key, const QVariant &colorConfig)
+    {
+        DesignerSettings::setValue(key, colorConfig);
+    }
+};
+
+} // namespace QmlDesigner
diff --git a/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp b/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
index 278d65fcd9..196faf2848 100644
--- a/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
+++ b/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
@@ -94,6 +94,8 @@
 
 #include <coreplugin/messagemanager.h>
 
+#include <edit3d/edit3dviewconfig.h>
+
 #include <projectexplorer/kit.h>
 #include <projectexplorer/target.h>
 
@@ -983,17 +985,6 @@ QList<ModelNode> filterNodesForSkipItems(const QList<ModelNode> &nodeList)
     return filteredNodeList;
 }
 
-QList<QColor> readBackgroundColorConfiguration(const QVariant &var)
-{
-    if (!var.isValid())
-        return {};
-
-    auto colorNameList = var.value<QList<QString>>();
-    QTC_ASSERT(colorNameList.size() == 2, return {});
-
-    return {colorNameList[0], colorNameList[1]};
-}
-
 CreateSceneCommand NodeInstanceView::createCreateSceneCommand()
 {
     QList<ModelNode> nodeList = allModelNodes();
@@ -1148,16 +1139,15 @@ CreateSceneCommand NodeInstanceView::createCreateSceneCommand()
     if (stateNode.isValid() && stateNode.metaInfo().isSubclassOf("QtQuick.State", 1, 0))
         stateInstanceId = stateNode.internalId();
 
-    QVariant value
+    QColor gridColor;
+    QList<QColor> backgroundColor;
+
 #ifndef QMLDESIGNER_TEST
-            = QmlDesigner::DesignerSettings::getValue(
-                QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR);
-#else
-            = {};
+    backgroundColor = Edit3DViewConfig::load(DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR);
+    QList<QColor> gridColorList = Edit3DViewConfig::load(DesignerSettingsKey::EDIT3DVIEW_GRID_COLOR);
+    if (!gridColorList.isEmpty())
+        gridColor = gridColorList.at(0);
 #endif
-    QList<QColor> edit3dBackgroundColor;
-    if (value.isValid())
-        edit3dBackgroundColor = readBackgroundColorConfiguration(value);
 
     return CreateSceneCommand(
         instanceContainerList,
@@ -1180,7 +1170,8 @@ CreateSceneCommand NodeInstanceView::createCreateSceneCommand()
         m_captureImageMinimumSize,
         m_captureImageMaximumSize,
         stateInstanceId,
-        edit3dBackgroundColor);
+        backgroundColor,
+        gridColor);
 }
 
 ClearSceneCommand NodeInstanceView::createClearSceneCommand() const
diff --git a/src/plugins/qmldesigner/designersettings.cpp b/src/plugins/qmldesigner/designersettings.cpp
index 5474fd50d3..1b9651d471 100644
--- a/src/plugins/qmldesigner/designersettings.cpp
+++ b/src/plugins/qmldesigner/designersettings.cpp
@@ -82,6 +82,7 @@ void DesignerSettings::fromSettings(QSettings *settings)
     restoreValue(settings, DesignerSettingsKey::ASK_BEFORE_DELETING_ASSET, true);
     const QStringList defaultValue = QStringList() << "#222222" << "#999999";
     restoreValue(settings, DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR, defaultValue);
+    restoreValue(settings, DesignerSettingsKey::EDIT3DVIEW_GRID_COLOR, "#aaaaaa");
     restoreValue(settings, DesignerSettingsKey::SMOOTH_RENDERING, false);
 
     settings->endGroup();
diff --git a/src/plugins/qmldesigner/designersettings.h b/src/plugins/qmldesigner/designersettings.h
index 4dbee7752b..f39268b186 100644
--- a/src/plugins/qmldesigner/designersettings.h
+++ b/src/plugins/qmldesigner/designersettings.h
@@ -50,6 +50,7 @@ const char WARNING_FOR_DESIGNER_FEATURES_IN_EDITOR[] = "WarnAboutQtQuickDesigner
 const char SHOW_DEBUGVIEW[] = "ShowQtQuickDesignerDebugView";
 const char ENABLE_DEBUGVIEW[] = "EnableQtQuickDesignerDebugView";
 const char EDIT3DVIEW_BACKGROUND_COLOR[] = "Edit3DViewBackgroundColor";
+const char EDIT3DVIEW_GRID_COLOR[] = "Edit3DViewGridLineColor";
 const char ALWAYS_SAVE_IN_CRUMBLEBAR[] = "AlwaysSaveInCrumbleBar";
 const char USE_DEFAULT_PUPPET[] = "UseDefaultQml2Puppet";
 const char PUPPET_TOPLEVEL_BUILD_DIRECTORY[] = "PuppetToplevelBuildDirectory";
diff --git a/src/plugins/qmldesigner/qmldesignerconstants.h b/src/plugins/qmldesigner/qmldesignerconstants.h
index 8dc2b94749..b2ed51cd87 100644
--- a/src/plugins/qmldesigner/qmldesignerconstants.h
+++ b/src/plugins/qmldesigner/qmldesignerconstants.h
@@ -66,6 +66,7 @@ const char EDIT3D_ORIENTATION[]    = "QmlDesigner.Editor3D.OrientationToggle";
 const char EDIT3D_EDIT_LIGHT[]     = "QmlDesigner.Editor3D.EditLightToggle";
 const char EDIT3D_EDIT_SHOW_GRID[] = "QmlDesigner.Editor3D.ToggleGrid";
 const char EDIT3D_EDIT_SELECT_BACKGROUND_COLOR[] = "QmlDesigner.Editor3D.SelectBackgroundColor";
+const char EDIT3D_EDIT_SELECT_GRID_COLOR[] = "QmlDesigner.Editor3D.SelectGridColor";
 const char EDIT3D_EDIT_RESET_BACKGROUND_COLOR[] = "QmlDesigner.Editor3D.ResetBackgroundColor";
 const char EDIT3D_EDIT_SHOW_SELECTION_BOX[] = "QmlDesigner.Editor3D.ToggleSelectionBox";
 const char EDIT3D_EDIT_SHOW_ICON_GIZMO[] = "QmlDesigner.Editor3D.ToggleIconGizmo";
diff --git a/src/plugins/qmldesigner/qmldesignerplugin.qbs b/src/plugins/qmldesigner/qmldesignerplugin.qbs
index 5266a146a3..be482a22ca 100644
--- a/src/plugins/qmldesigner/qmldesignerplugin.qbs
+++ b/src/plugins/qmldesigner/qmldesignerplugin.qbs
@@ -530,6 +530,7 @@ Project {
                 "debugview/debugviewwidget.ui",
                 "edit3d/edit3dview.cpp",
                 "edit3d/edit3dview.h",
+                "edit3d/edit3dviewconfig.h",
                 "edit3d/backgroundcolorselection.cpp",
                 "edit3d/backgroundcolorselection.h",
                 "edit3d/edit3dwidget.cpp",