reorganize shared props passing

src/plugins/imagery/components/Compass/Compass.vue

@@ -26,16 +26,19 @@
     :style="`width: 100%; height: 100%`"
 >
     <CompassHUD
-        :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
+        :heading="heading"
         :camera-azimuth="cameraAzimuth"
+        :transformations="transformations"
+        :sun-heading="sunHeading"
     />
     <CompassRose
-        :camera-azimuth="cameraAzimuth"
+        :camera-angle-of-view="cameraAngleOfView"
         :heading="heading"
-        :sized-image-dimensions="sizedImageDimensions"
-        :sun-heading="sunHeading"
+        :camera-azimuth="cameraAzimuth"
         :transformations="transformations"
+        :sun-heading="sunHeading"
+        :sized-image-dimensions="sizedImageDimensions"
     />
 </div>
 </template>
@@ -75,11 +78,8 @@ export default {
         cameraAzimuth() {
             return this.image.cameraPan;
         },
-        hasCameraAzimuth() {
-            return this.cameraAzimuth !== undefined;
-        },
         cameraAngleOfView() {
-            return this.transformations?.cameraAngleOfView;
+            return this.transformations.cameraAngleOfView;
         },
         transformations() {
             return this.image.transformations;

src/plugins/imagery/components/Compass/CompassHUD.vue

@@ -94,17 +94,25 @@ const COMPASS_POINTS = [
 
 export default {
     props: {
-        sunHeading: {
-            type: Number,
-            default: undefined
-        },
         cameraAngleOfView: {
             type: Number,
-            default: undefined
+            required: true
+        },
+        heading: {
+            type: Number,
+            required: true
         },
         cameraAzimuth: {
             type: Number,
+            default: undefined
+        },
+        transformations: {
+            type: Object,
             required: true
+        },
+        sunHeading: {
+            type: Number,
+            default: undefined
         }
     },
     computed: {

src/plugins/imagery/components/Compass/CompassRose.vue

@@ -259,16 +259,13 @@ import { throttle } from 'lodash';
 
 export default {
     props: {
+        cameraAngleOfView: {
+            type: Number,
+            required: true
+        },
         heading: {
             type: Number,
-            required: true,
-            default() {
-                return 0;
-            }
-        },
-        sunHeading: {
-            type: Number,
-            default: undefined
+            required: true
         },
         cameraAzimuth: {
             type: Number,
@@ -276,6 +273,10 @@ export default {
         },
         transformations: {
             type: Object,
+            required: true
+        },
+        sunHeading: {
+            type: Number,
             default: undefined
         },
         sizedImageDimensions: {
@@ -298,9 +299,6 @@ export default {
                 ? rotate(this.cameraAzimuth)
                 : rotate(this.heading, -this.transformations?.rotation ?? 0);
         },
-        cameraAngleOfView() {
-            return this.transformations?.cameraAngleOfView;
-        },
         camAngleAndPositionStyle() {
             const translateX = this.transformations?.translateX;
             const translateY = this.transformations?.translateY;

src/plugins/imagery/components/ImageryView.vue

@@ -430,10 +430,12 @@ export default {
                 && imageHeightAndWidth
                 && this.zoomFactor === 1
                 && this.imagePanned !== true;
-            const hasCameraConfigurations = this.focusedImage?.transformations !== undefined;
             const hasHeading = this.focusedImage?.heading !== undefined;
+            const hasCameraAngleOfView = this.focusedImage?.transformations?.cameraAngleOfView > 0;
 
-            return display && hasCameraConfigurations && hasHeading;
+            return display
+                && hasCameraAngleOfView
+                && hasHeading;
         },
         isSpacecraftPositionFresh() {
             let isFresh = undefined;