QmlDesigner: Enable toggling the helper grid on/off

Also remove the toolbar buttons from the puppet side and few other
clean-ups.

Task-number: QDS-1849
Change-Id: I075753552043a9f1bc649f6baf54dc7b689e4f64
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h

@@ -43,7 +43,8 @@ public:
                 SelectionModeToggle,
                 CameraToggle,
                 OrientationToggle,
-                EditLightToggle
+                EditLightToggle,
+                ShowGrid
               };
 
     explicit View3DActionCommand(Type type, bool enable);

share/qtcreator/qml/qmlpuppet/mockfiles/EditView3D.qml

@@ -24,7 +24,6 @@
 ****************************************************************************/
 
 import QtQuick 2.12
-import QtQuick.Window 2.12
 import QtQuick3D 1.15
 import QtQuick.Controls 2.0
 import QtGraphicalEffects 1.0
@@ -40,11 +39,18 @@ Item {
     property View3D editView: null
     property string sceneId
 
-    property alias showEditLight: btnEditViewLight.toggled
+    property bool showEditLight: false
-    property alias usePerspective: btnPerspective.toggled
+    property bool showGrid: true
-    property alias globalOrientation: btnLocalGlobal.toggled
+    property bool usePerspective: true
+    property bool globalOrientation: false
     property alias contentItem: contentItem
 
+    enum SelectionMode { Item, Group }
+    enum TransformMode { Move, Rotate, Scale }
+
+    property int selectionMode: EditView3D.SelectionMode.Item
+    property int transformMode: EditView3D.TransformMode.Move
+
     property Node selectedNode: null // This is non-null only in single selection case
     property var selectedNodes: [] // All selected nodes
 
@@ -53,16 +59,18 @@ Item {
     property var selectionBoxes: []
     property rect viewPortRect: Qt.rect(0, 0, 1000, 1000)
 
-    property bool showButtons: false
-
     signal selectionChanged(var selectedNodes)
     signal commitObjectProperty(var object, var propName)
     signal changeObjectProperty(var object, var propName)
     signal notifyActiveSceneChange()
 
     onUsePerspectiveChanged:    _generalHelper.storeToolState(sceneId, "usePerspective", usePerspective)
-    onShowEditLightChanged: _generalHelper.storeToolState(sceneId,"showEditLight", showEditLight)
+    onShowEditLightChanged:     _generalHelper.storeToolState(sceneId, "showEditLight", showEditLight)
     onGlobalOrientationChanged: _generalHelper.storeToolState(sceneId, "globalOrientation", globalOrientation)
+    onShowGridChanged:          _generalHelper.storeToolState(sceneId, "showGrid", showGrid);
+    onSelectionModeChanged:     _generalHelper.storeToolState(sceneId, "selectionMode", selectionMode);
+    onTransformModeChanged:     _generalHelper.storeToolState(sceneId, "transformMode", transformMode);
+
     onActiveSceneChanged: updateActiveScene()
 
     function createEditView()
@@ -72,11 +80,13 @@ Item {
             editView = component.createObject(viewRect,
                                               {"usePerspective": usePerspective,
                                                "showSceneLight": showEditLight,
+                                               "showGrid": showGrid,
                                                "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.cameraZoomFactor = Qt.binding(function() {return cameraControl._zoomFactor;});
 
             selectionBoxes.length = 0;
@@ -148,41 +158,31 @@ Item {
             showEditLight = toolStates.showEditLight;
         else if (resetToDefault)
             showEditLight = false;
+
+        if ("showGrid" in toolStates)
+            showGrid = toolStates.showGrid;
+        else if (resetToDefault)
+            showGrid = true;
+
         if ("usePerspective" in toolStates)
             usePerspective = toolStates.usePerspective;
         else if (resetToDefault)
-            usePerspective = false;
+            usePerspective = true;
+
         if ("globalOrientation" in toolStates)
             globalOrientation = toolStates.globalOrientation;
         else if (resetToDefault)
             globalOrientation = false;
 
-        var groupIndex;
+        if ("selectionMode" in toolStates)
-        var group;
+            selectionMode = toolStates.selectionMode;
-        var i;
+        else if (resetToDefault)
+            selectionMode = EditView3D.SelectionMode.Item;
 
-        if ("groupSelect" in toolStates) {
+        if ("transformMode" in toolStates)
-            groupIndex = toolStates.groupSelect;
+            transformMode = toolStates.transformMode;
-            group = toolbarButtons.buttonGroups["groupSelect"];
+        else if (resetToDefault)
-            for (i = 0; i < group.length; ++i)
+            selectionMode = EditView3D.TransformMode.Move;
-                group[i].selected = (i === groupIndex);
-            _generalHelper.storeToolState(sceneId, "groupSelect", groupIndex)
-        } else if (resetToDefault) {
-            btnSelectItem.selected = true;
-            btnSelectGroup.selected = false;
-        }
-
-        if ("groupTransform" in toolStates) {
-            groupIndex = toolStates.groupTransform;
-            group = toolbarButtons.buttonGroups["groupTransform"];
-            for (i = 0; i < group.length; ++i)
-                group[i].selected = (i === groupIndex);
-            _generalHelper.storeToolState(sceneId, "groupTransform", groupIndex)
-        } else if (resetToDefault) {
-            btnRotate.selected = false;
-            btnScale.selected = false;
-            btnMove.selected = true;
-        }
 
         if ("editCamState" in toolStates)
             cameraControl.restoreCameraState(toolStates.editCamState);
@@ -193,25 +193,11 @@ Item {
     function storeCurrentToolStates()
     {
         _generalHelper.storeToolState(sceneId, "showEditLight", showEditLight)
+        _generalHelper.storeToolState(sceneId, "showGrid", showGrid)
         _generalHelper.storeToolState(sceneId, "usePerspective", usePerspective)
         _generalHelper.storeToolState(sceneId, "globalOrientation", globalOrientation)
-
+        _generalHelper.storeToolState(sceneId, "selectionMode", selectionMode);
-        var group = toolbarButtons.buttonGroups["groupSelect"];
+        _generalHelper.storeToolState(sceneId, "transformMode", transformMode);
-        var i;
-        for (i = 0; i < group.length; ++i) {
-            if (group[i].selected) {
-                _generalHelper.storeToolState(sceneId, "groupSelect", i)
-                break;
-            }
-        }
-
-        group = toolbarButtons.buttonGroups["groupTransform"];
-        for (i = 0; i < group.length; ++i) {
-            if (group[i].selected) {
-                _generalHelper.storeToolState(sceneId, "groupTransform", i)
-                break;
-            }
-        }
 
         cameraControl.storeCameraState(0);
     }
@@ -259,7 +245,7 @@ Item {
     function handleObjectClicked(object, multi)
     {
         var theObject = object;
-        if (btnSelectGroup.selected) {
+        if (selectionMode === EditView3D.SelectionMode.Group) {
             while (theObject && theObject !== activeScene && theObject.parent !== activeScene)
                 theObject = theObject.parent;
         }
@@ -434,7 +420,7 @@ Item {
             highlightOnHover: true
             targetNode: viewRoot.selectedNode
             globalOrientation: viewRoot.globalOrientation
-            visible: viewRoot.selectedNode && btnMove.selected
+            visible: viewRoot.selectedNode && transformMode === EditView3D.TransformMode.Move
             view3D: overlayView
             dragHelper: gizmoDragHelper
 
@@ -447,7 +433,7 @@ Item {
             scale: autoScale.getScale(Qt.vector3d(5, 5, 5))
             highlightOnHover: true
             targetNode: viewRoot.selectedNode
-            visible: viewRoot.selectedNode && btnScale.selected
+            visible: viewRoot.selectedNode && transformMode === EditView3D.TransformMode.Scale
             view3D: overlayView
             dragHelper: gizmoDragHelper
 
@@ -461,7 +447,7 @@ Item {
             highlightOnHover: true
             targetNode: viewRoot.selectedNode
             globalOrientation: viewRoot.globalOrientation
-            visible: viewRoot.selectedNode && btnRotate.selected
+            visible: viewRoot.selectedNode && transformMode === EditView3D.TransformMode.Rotate
             view3D: overlayView
             dragHelper: gizmoDragHelper
 
@@ -626,107 +612,6 @@ Item {
             }
         }
 
-        Rectangle { // toolbar
-            id: toolbar
-            color: "#9F000000"
-            width: 35
-            height: toolbarButtons.height
-            visible: viewRoot.showButtons
-
-            Column {
-                id: toolbarButtons
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 5
-                padding: 5
-
-                // Button groups must be defined in parent object of buttons
-                property var buttonGroups: {
-                    "groupSelect": [btnSelectGroup, btnSelectItem],
-                    "groupTransform": [btnMove, btnRotate, btnScale]
-                }
-
-                ToolBarButton {
-                    id: btnSelectItem
-                    selected: true
-                    tooltip: qsTr("Select Item")
-                    shortcut: "Q"
-                    currentShortcut: selected ? "" : shortcut
-                    tool: "item_selection"
-                    buttonGroup: "groupSelect"
-                    sceneId: viewRoot.sceneId
-                }
-
-                ToolBarButton {
-                    id: btnSelectGroup
-                    tooltip: qsTr("Select Group")
-                    shortcut: "Q"
-                    currentShortcut: btnSelectItem.currentShortcut === shortcut ? "" : shortcut
-                    tool: "group_selection"
-                    buttonGroup: "groupSelect"
-                    sceneId: viewRoot.sceneId
-                }
-
-                Rectangle { // separator
-                    width: 25
-                    height: 1
-                    color: "#f1f1f1"
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-
-                ToolBarButton {
-                    id: btnMove
-                    selected: true
-                    tooltip: qsTr("Move current selection")
-                    shortcut: "W"
-                    currentShortcut: shortcut
-                    tool: "move"
-                    buttonGroup: "groupTransform"
-                    sceneId: viewRoot.sceneId
-                }
-
-                ToolBarButton {
-                    id: btnRotate
-                    tooltip: qsTr("Rotate current selection")
-                    shortcut: "E"
-                    currentShortcut: shortcut
-                    tool: "rotate"
-                    buttonGroup: "groupTransform"
-                    sceneId: viewRoot.sceneId
-                }
-
-                ToolBarButton {
-                    id: btnScale
-                    tooltip: qsTr("Scale current selection")
-                    shortcut: "R"
-                    currentShortcut: shortcut
-                    tool: "scale"
-                    buttonGroup: "groupTransform"
-                    sceneId: viewRoot.sceneId
-                }
-
-                Rectangle { // separator
-                    width: 25
-                    height: 1
-                    color: "#f1f1f1"
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-
-                ToolBarButton {
-                    id: btnFit
-                    tooltip: qsTr("Fit camera to current selection")
-                    shortcut: "F"
-                    currentShortcut: shortcut
-                    tool: "fit"
-                    togglable: false
-
-                    onSelectedChanged: {
-                        if (selected)
-                            viewRoot.fitToView();
-                    }
-                }
-            }
-        }
-
         AxisHelper {
             anchors.right: parent.right
             anchors.top: parent.top
@@ -735,41 +620,5 @@ Item {
             editCameraCtrl: cameraControl
             selectedNode : viewRoot.selectedNodes.length ? selectionBoxes[0].model : null
         }
-
-        Rectangle { // top controls bar
-            color: "#aa000000"
-            width: 290
-            height: btnPerspective.height + 10
-            anchors.top: parent.top
-            anchors.right: parent.right
-            anchors.rightMargin: 100
-            visible: viewRoot.showButtons
-
-            Row {
-                padding: 5
-                anchors.fill: parent
-                ToggleButton {
-                    id: btnPerspective
-                    width: 105
-                    tooltip: qsTr("Toggle Perspective / Orthographic Projection")
-                    states: [{iconId: "ortho", text: qsTr("Orthographic")}, {iconId: "persp",  text: qsTr("Perspective")}]
-                }
-
-                ToggleButton {
-                    id: btnLocalGlobal
-                    width: 65
-                    tooltip: qsTr("Toggle Global / Local Orientation")
-                    states: [{iconId: "local",  text: qsTr("Local")}, {iconId: "global", text: qsTr("Global")}]
-                }
-
-                ToggleButton {
-                    id: btnEditViewLight
-                    width: 110
-                    toggleBackground: true
-                    tooltip: qsTr("Toggle Edit Light")
-                    states: [{iconId: "edit_light_off",  text: qsTr("Edit Light Off")}, {iconId: "edit_light_on", text: qsTr("Edit Light On")}]
-                }
-            }
-        }
     }
 }

share/qtcreator/qml/qmlpuppet/mockfiles/SceneView3D.qml

@@ -23,7 +23,6 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.12
 import QtQuick3D 1.15
 
 View3D {
@@ -31,7 +30,8 @@ View3D {
     anchors.fill: parent
 
     property bool usePerspective: false
-    property bool showSceneLight: false
+    property alias showSceneLight: sceneLight.visible
+    property alias showGrid: helperGrid.visible
     property alias sceneHelpers: sceneHelpers
     property alias perspectiveCamera: scenePerspectiveCamera
     property alias orthoCamera: sceneOrthoCamera
@@ -62,7 +62,6 @@ View3D {
 
         PointLight {
             id: sceneLight
-            visible: showSceneLight
             position: usePerspective ? scenePerspectiveCamera.position
                                      : sceneOrthoCamera.position
             quadraticFade: 0

share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp

@@ -1162,19 +1162,19 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
 
     switch (command.type()) {
     case View3DActionCommand::MoveTool:
-        updatedState.insert("groupTransform", 0);
+        updatedState.insert("transformMode", 0);
         break;
     case View3DActionCommand::RotateTool:
-        updatedState.insert("groupTransform", 1);
+        updatedState.insert("transformMode", 1);
         break;
     case View3DActionCommand::ScaleTool:
-        updatedState.insert("groupTransform", 2);
+        updatedState.insert("transformMode", 2);
         break;
     case View3DActionCommand::FitToView:
         QMetaObject::invokeMethod(m_editView3DRootItem, "fitToView");
         break;
     case View3DActionCommand::SelectionModeToggle:
-        updatedState.insert("groupSelect", command.isEnabled() ? 0 : 1);
+        updatedState.insert("selectionMode", command.isEnabled() ? 1 : 0);
         break;
     case View3DActionCommand::CameraToggle:
         updatedState.insert("usePerspective", command.isEnabled());
@@ -1187,6 +1187,9 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
     case View3DActionCommand::EditLightToggle:
         updatedState.insert("showEditLight", command.isEnabled());
         break;
+    case View3DActionCommand::ShowGrid:
+        updatedState.insert("showGrid", command.isEnabled());
+        break;
     default:
         break;
     }

src/plugins/qmldesigner/components/edit3d/edit3d.qrc

@@ -8,6 +8,10 @@
         <file>images/edit_light_off@2x.png</file>
         <file>images/edit_light_on.png</file>
         <file>images/edit_light_on@2x.png</file>
+        <file>images/grid_off.png</file>
+        <file>images/grid_off@2x.png</file>
+        <file>images/grid_on.png</file>
+        <file>images/grid_on@2x.png</file>
         <file>images/fit_selected.png</file>
         <file>images/fit_selected@2x.png</file>
         <file>images/move_off.png</file>

src/plugins/qmldesigner/components/edit3d/edit3dview.cpp

@@ -102,11 +102,12 @@ void Edit3DView::renderImage3DChanged(const QImage &img)
 void Edit3DView::updateActiveScene3D(const QVariantMap &sceneState)
 {
     const QString sceneKey       = QStringLiteral("sceneInstanceId");
-    const QString selectKey = QStringLiteral("groupSelect");
+    const QString selectKey      = QStringLiteral("selectionMode");
-    const QString transformKey = QStringLiteral("groupTransform");
+    const QString transformKey   = QStringLiteral("transformMode");
     const QString perspectiveKey = QStringLiteral("usePerspective");
     const QString orientationKey = QStringLiteral("globalOrientation");
     const QString editLightKey   = QStringLiteral("showEditLight");
+    const QString gridKey        = QStringLiteral("showGrid");
 
     if (sceneState.contains(sceneKey)) {
         qint32 newActiveScene = sceneState[sceneKey].value<qint32>();
@@ -115,7 +116,7 @@ void Edit3DView::updateActiveScene3D(const QVariantMap &sceneState)
     }
 
     if (sceneState.contains(selectKey))
-        m_selectionModeAction->action()->setChecked(sceneState[selectKey].toInt() == 0);
+        m_selectionModeAction->action()->setChecked(sceneState[selectKey].toInt() == 1);
     else
         m_selectionModeAction->action()->setChecked(false);
 
@@ -135,14 +136,21 @@ void Edit3DView::updateActiveScene3D(const QVariantMap &sceneState)
         m_cameraModeAction->action()->setChecked(sceneState[perspectiveKey].toBool());
     else
         m_cameraModeAction->action()->setChecked(false);
+
     if (sceneState.contains(orientationKey))
         m_orientationModeAction->action()->setChecked(sceneState[orientationKey].toBool());
     else
         m_orientationModeAction->action()->setChecked(false);
+
     if (sceneState.contains(editLightKey))
         m_editLightAction->action()->setChecked(sceneState[editLightKey].toBool());
     else
         m_editLightAction->action()->setChecked(false);
+
+    if (sceneState.contains(gridKey))
+        m_showGridAction->action()->setChecked(sceneState[gridKey].toBool());
+    else
+        m_showGridAction->action()->setChecked(false);
 }
 
 void Edit3DView::modelAttached(Model *model)
@@ -247,6 +255,12 @@ void Edit3DView::createEdit3DActions()
                 QKeySequence(Qt::Key_U), true, false, Icons::EDIT3D_LIGHT_OFF.icon(),
                 Icons::EDIT3D_LIGHT_ON.icon());
 
+    m_showGridAction = new Edit3DAction(
+                QmlDesigner::Constants::EDIT3D_EDIT_SHOW_GRID, View3DActionCommand::ShowGrid,
+                QCoreApplication::translate("ShowGridAction", "Toggle grid visibility"),
+                QKeySequence(Qt::Key_G), true, true, Icons::EDIT3D_GRID_OFF.icon(),
+                Icons::EDIT3D_GRID_ON.icon());
+
     SelectionContextOperation resetTrigger = [this](const SelectionContext &) {
         setCurrentStateNode(rootModelNode());
         resetPuppet();
@@ -270,6 +284,7 @@ void Edit3DView::createEdit3DActions()
     m_leftActions << m_cameraModeAction;
     m_leftActions << m_orientationModeAction;
     m_leftActions << m_editLightAction;
+    m_leftActions << m_showGridAction;
 
     m_rightActions << m_resetAction;
 }

src/plugins/qmldesigner/components/edit3d/edit3dview.h

@@ -87,6 +87,7 @@ private:
     Edit3DAction *m_cameraModeAction = nullptr;
     Edit3DAction *m_orientationModeAction = nullptr;
     Edit3DAction *m_editLightAction = nullptr;
+    Edit3DAction *m_showGridAction = nullptr;
     Edit3DAction *m_resetAction = nullptr;
 };
 

src/plugins/qmldesigner/qmldesignerconstants.h

@@ -62,6 +62,7 @@ const char EDIT3D_FIT_SELECTED[] = "QmlDesigner.Editor3D.FitSelected";
 const char EDIT3D_EDIT_CAMERA[]    = "QmlDesigner.Editor3D.EditCameraToggle";
 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_RESET_VIEW[]     = "QmlDesigner.Editor3D.ResetView";
 
 const char QML_DESIGNER_SUBFOLDER[] = "/designer/";

src/plugins/qmldesigner/qmldesignericons.h

@@ -51,6 +51,10 @@ const Utils::Icon EDIT3D_LIGHT_ON({
         {QLatin1String(":/edit3d/images/edit_light_on.png"), Utils::Theme::IconsBaseColor}});
 const Utils::Icon EDIT3D_LIGHT_OFF({
         {QLatin1String(":/edit3d/images/edit_light_off.png"), Utils::Theme::IconsBaseColor}});
+const Utils::Icon EDIT3D_GRID_ON({
+        {QLatin1String(":/edit3d/images/grid_on.png"), Utils::Theme::IconsBaseColor}});
+const Utils::Icon EDIT3D_GRID_OFF({
+        {QLatin1String(":/edit3d/images/grid_off.png"), Utils::Theme::IconsBaseColor}});
 const Utils::Icon EDIT3D_SELECTION_MODE_ON({
         {QLatin1String(":/edit3d/images/select_group.png"), Utils::Theme::IconsBaseColor}});
 const Utils::Icon EDIT3D_SELECTION_MODE_OFF({