QmlDesigner: Finalize camera visualization in edit 3D view

Added the UX approved camera icons, which will now turn transparent
and ignore mouse events when camera is selected so they do not
interfere with transform gizmos. Frustum visualization also changes
color according to selection state.

Change-Id: Id77066d9abb2b54696fae833201236afa238486a
Fixes: QDS-1208
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qml/qmlpuppet/mockfiles/CameraGizmo.qml

@@ -30,7 +30,7 @@ import CameraGeometry 1.0
 IconGizmo {
     id: cameraGizmo
 
-    iconSource: "qrc:///qtquickplugin/mockfiles/images/camera-pick-icon.png"
+    iconSource: "qrc:///qtquickplugin/mockfiles/images/editor_camera.png"
     gizmoModel.geometry: cameraGeometry
     property alias geometryName: cameraGeometry.name // Name must be unique for each geometry
     property alias viewPortRect: cameraGeometry.viewPortRect
@@ -43,7 +43,7 @@ IconGizmo {
     gizmoModel.materials: [
         DefaultMaterial {
             id: defaultMaterial
-            emissiveColor: "blue"
+            emissiveColor: cameraGizmo.targetNode === cameraGizmo.selectedNode ? "#FF0000" : "#555555"
             lighting: DefaultMaterial.NoLighting
             cullingMode: Material.DisableCulling
         }

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

@@ -66,9 +66,11 @@ Window {
         var component = Qt.createComponent("LightGizmo.qml");
         if (component.status === Component.Ready) {
             var gizmo = component.createObject(overlayScene,
-                                               {"view3D": overlayView, "targetNode": obj});
+                                               {"view3D": overlayView, "targetNode": obj,
+                                                "selectedNode": selectedNode});
             lightGizmos[lightGizmos.length] = gizmo;
-            gizmo.selected.connect(emitObjectClicked);
+            gizmo.clicked.connect(emitObjectClicked);
+            gizmo.selectedNode = Qt.binding(function() {return selectedNode;});
         }
     }
 
@@ -80,10 +82,11 @@ Window {
             var gizmo = component.createObject(
                         overlayScene,
                         {"view3D": overlayView, "targetNode": obj, "geometryName": geometryName,
-                         "viewPortRect": viewPortRect});
+                         "viewPortRect": viewPortRect, "selectedNode": selectedNode});
             cameraGizmos[cameraGizmos.length] = gizmo;
-            gizmo.selected.connect(emitObjectClicked);
+            gizmo.clicked.connect(emitObjectClicked);
             gizmo.viewPortRect = Qt.binding(function() {return viewPortRect;});
+            gizmo.selectedNode = Qt.binding(function() {return selectedNode;});
         }
     }
 

share/qtcreator/qml/qmlpuppet/mockfiles/IconGizmo.qml

@@ -32,12 +32,13 @@ Node {
     property View3D view3D
     property bool highlightOnHover: true
     property Node targetNode: null
+    property Node selectedNode: null
 
     property alias gizmoModel: gizmoModel
     property alias iconSource: iconImage.source
 
     signal positionCommit()
-    signal selected(Node node)
+    signal clicked(Node node)
 
     position: targetNode ? targetNode.scenePosition : Qt.vector3d(0, 0, 0)
     rotation: targetNode ? targetNode.sceneRotation : Qt.vector3d(0, 0, 0)
@@ -57,22 +58,27 @@ Node {
         parent: view3D
 
         Rectangle {
-            width: 24
+            width: iconImage.width
-            height: 24
+            height: iconImage.height
             x: -width / 2
             y: -height
             color: "transparent"
             border.color: "#7777ff"
-            border.width: highlightOnHover && iconMouseArea.containsMouse ? 2 : 0
+            border.width: iconGizmo.selectedNode === iconGizmo.targetNode
+                          || (iconGizmo.highlightOnHover && iconMouseArea.containsMouse) ? 2 : 0
             radius: 5
+            opacity: iconGizmo.selectedNode === iconGizmo.targetNode ? 0.3 : 1
             Image {
                 id: iconImage
-                anchors.fill: parent
+                fillMode: Image.Pad
                 MouseArea {
                     id: iconMouseArea
                     anchors.fill: parent
-                    onClicked: selected(targetNode)
+                    onClicked: iconGizmo.clicked(iconGizmo.targetNode)
-                    hoverEnabled: highlightOnHover
+                    hoverEnabled: iconGizmo.highlightOnHover
+                                  && iconGizmo.selectedNode !== iconGizmo.targetNode
+                    acceptedButtons: iconGizmo.selectedNode !== iconGizmo.targetNode
+                                     ? Qt.LeftButton : Qt.NoButton
                 }
             }
         }

share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc

@@ -28,8 +28,8 @@
         <file>mockfiles/meshes/scalerod.mesh</file>
         <file>mockfiles/meshes/ring.mesh</file>
         <file>mockfiles/meshes/ringselect.mesh</file>
-        <file>mockfiles/images/camera-pick-icon.png</file>
+        <file>mockfiles/images/editor_camera.png</file>
-        <file>mockfiles/images/camera-pick-icon@2x.png</file>
+        <file>mockfiles/images/editor_camera@2x.png</file>
         <file>mockfiles/images/light-pick-icon.png</file>
         <file>mockfiles/images/light-pick-icon@2x.png</file>
         <file>mockfiles/images/item_selection_active.png</file>