center image properly

package.json

@@ -34,7 +34,7 @@
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
     "html-loader": "^0.5.5",
-    "html2canvas": "^1.0.0-alpha.12",
+    "html2canvas": "^1.0.0-rc.7",
     "imports-loader": "^0.8.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.1.0",

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

@@ -23,23 +23,20 @@
 <template>
 <div
     class="c-compass"
-    :style="`width: ${ sizedImageDimensions.width }px; height: ${ sizedImageDimensions.height }px`"
+    :style="`width: 100%; height: 100%`"
 >
     <CompassHUD
-        v-if="hasCameraFieldOfView"
         :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
     />
     <CompassRose
-        v-if="hasCameraFieldOfView"
-        :heading="heading"
-        :sized-image-width="sizedImageDimensions.width"
-        :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
-        :lock-compass="lockCompass"
-        @toggle-lock-compass="toggleLockCompass"
+        :compass-rose-sizing-classes="compassRoseSizingClasses"
+        :heading="heading"
+        :sized-image-dimensions="sizedImageDimensions"
+        :sun-heading="sunHeading"
     />
 </div>
 </template>
@@ -56,42 +53,20 @@ export default {
         CompassRose
     },
     props: {
-        containerWidth: {
-            type: Number,
-            required: true
-        },
-        containerHeight: {
-            type: Number,
-            required: true
-        },
-        naturalAspectRatio: {
-            type: Number,
+        compassRoseSizingClasses: {
+            type: String,
             required: true
         },
         image: {
             type: Object,
             required: true
         },
-        lockCompass: {
-            type: Boolean,
+        sizedImageDimensions: {
+            type: Object,
             required: true
         }
     },
     computed: {
-        sizedImageDimensions() {
-            let sizedImageDimensions = {};
-            if ((this.containerWidth / this.containerHeight) > this.naturalAspectRatio) {
-                // container is wider than image
-                sizedImageDimensions.width = this.containerHeight * this.naturalAspectRatio;
-                sizedImageDimensions.height = this.containerHeight;
-            } else {
-                // container is taller than image
-                sizedImageDimensions.width = this.containerWidth;
-                sizedImageDimensions.height = this.containerWidth * this.naturalAspectRatio;
-            }
-
-            return sizedImageDimensions;
-        },
         hasCameraFieldOfView() {
             return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
         },
@@ -110,11 +85,6 @@ export default {
         cameraAngleOfView() {
             return CAMERA_ANGLE_OF_VIEW;
         }
-    },
-    methods: {
-        toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
-        }
     }
 };
 </script>

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

@@ -104,7 +104,10 @@ export default {
         },
         cameraPan: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         }
     },
     computed: {

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

@@ -25,7 +25,7 @@
     class="w-direction-rose"
     :class="compassRoseSizingClasses"
 >
-    <div
+    <div ref="directionRose"
          class="c-direction-rose"
          @click="toggleLockCompass"
     >
@@ -33,14 +33,33 @@
             class="c-nsew"
             :style="compassRoseStyle"
         >
-            <svg
-                class="c-nsew__minor-ticks"
+        </div>
+
+        <div
+            v-if="hasHeading"
+            class="c-spacecraft-body"
+            :style="headingStyle"
+        >
+        </div>
+
+        <div
+            v-if="hasSunHeading"
+            class="c-sun"
+            :style="sunHeadingStyle"
+        ></div>
+
+        <div ref="camField"
+             class="c-cam-field"
+             :style="cameraPanStyle"
+        >
+            <svg ref="camFieldSVG"
                  viewBox="0 0 100 100"
             >
                 <rect
                     class="c-nsew__tick c-tick-ne"
                     x="49"
                     y="0"
+                    fill="red"
                     width="2"
                     height="5"
                 />
@@ -65,91 +84,14 @@
                     width="5"
                     height="2"
                 />
-
+                <path fill="gray"
+                      d="M50, 50
+                        L30,8
+                        A40 40 0 0 1 70,8
+                        Z
+                        "
+                />
             </svg>
-
-            <svg
-                class="c-nsew__ticks"
-                viewBox="0 0 100 100"
-            >
-                <polygon
-                    class="c-nsew__tick c-tick-n"
-                    points="50,0 60,10 40,10"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-e"
-                    x="95"
-                    y="49"
-                    width="5"
-                    height="2"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-w"
-                    x="0"
-                    y="49"
-                    width="5"
-                    height="2"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-s"
-                    x="49"
-                    y="95"
-                    width="2"
-                    height="5"
-                />
-
-                <text
-                    class="c-nsew__label c-label-n"
-                    text-anchor="middle"
-                    :transform="northTextTransform"
-                >N</text>
-                <text
-                    class="c-nsew__label c-label-e"
-                    text-anchor="middle"
-                    :transform="eastTextTransform"
-                >E</text>
-                <text
-                    class="c-nsew__label c-label-w"
-                    text-anchor="middle"
-                    :transform="southTextTransform"
-                >W</text>
-                <text
-                    class="c-nsew__label c-label-s"
-                    text-anchor="middle"
-                    :transform="westTextTransform"
-                >S</text>
-            </svg>
-        </div>
-
-        <div
-            v-if="hasHeading"
-            class="c-spacecraft-body"
-            :style="headingStyle"
-        >
-        </div>
-
-        <div
-            v-if="hasSunHeading"
-            class="c-sun"
-            :style="sunHeadingStyle"
-        ></div>
-
-        <div
-            class="c-cam-field"
-            :style="cameraPanStyle"
-        >
-            <div class="cam-field-half cam-field-half-l">
-                <div
-                    class="cam-field-area"
-                    :style="cameraFOVStyleLeftHalf"
-                ></div>
-            </div>
-            <div class="cam-field-half cam-field-half-r">
-                <div
-                    class="cam-field-area"
-                    :style="cameraFOVStyleRightHalf"
-                ></div>
-            </div>
         </div>
     </div>
 </div>
@@ -157,16 +99,20 @@
 
 <script>
 import { rotate } from './utils';
+import { throttle } from 'lodash';
 
 export default {
     props: {
-        sizedImageWidth: {
-            type: Number,
+        compassRoseSizingClasses: {
+            type: String,
             required: true
         },
         heading: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         },
         sunHeading: {
             type: Number,
@@ -178,26 +124,22 @@ export default {
         },
         cameraPan: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         },
-        lockCompass: {
-            type: Boolean,
+        sizedImageDimensions: {
+            type: Object,
             required: true
         }
     },
+    data() {
+        return {
+            lockCompass: true
+        };
+    },
     computed: {
-        compassRoseSizingClasses() {
-            let compassRoseSizingClasses = '';
-            if (this.sizedImageWidth < 300) {
-                compassRoseSizingClasses = '--rose-small --rose-min';
-            } else if (this.sizedImageWidth < 500) {
-                compassRoseSizingClasses = '--rose-small';
-            } else if (this.sizedImageWidth > 1000) {
-                compassRoseSizingClasses = '--rose-max';
-            }
-
-            return compassRoseSizingClasses;
-        },
         compassRoseStyle() {
             return { transform: `rotate(${ this.north }deg)` };
         },
@@ -273,9 +215,29 @@ export default {
             };
         }
     },
+    watch: {
+        sizedImageDimensions() {
+            this.debounceResizeSvg();
+        }
+    },
+    mounted() {
+        this.debounceResizeSvg = throttle(this.resizeSvg, 100);
+
+        this.$nextTick(() => {
+            this.debounceResizeSvg();
+        });
+    },
     methods: {
+        resizeSvg() {
+            const svg = this.$refs.camFieldSVG;
+            svg.setAttribute('width', this.$refs.camField.clientWidth);
+            svg.setAttribute('height', this.$refs.camField.clientHeight);
+        },
+        rotateSVG() {
+            this.$refs.camField.style.transform = "rotate(45deg)";
+        },
         toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
+            this.lockCompass = !this.lockCompass;
         }
     }
 };

src/plugins/imagery/components/Compass/compass.scss

@@ -12,9 +12,8 @@ $elemBg: rgba(black, 0.7);
 .c-compass {
     pointer-events: none; // This allows the image element to receive a browser-level context click
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: 0%;
+    top: 0%;
     z-index: 1;
     @include userSelectNone;
 }
@@ -121,7 +120,6 @@ $elemBg: rgba(black, 0.7);
 /***************************** CAMERA FIELD ANGLE */
 .c-cam-field {
     $color: white;
-    opacity: 0.3;
     top: 0;
     right: 0;
     bottom: 0;

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -55,11 +55,17 @@
                 ></a>
             </span>
         </div>
-        <div class="c-imagery__main-image__bg"
+        <div ref="imageBG"
+             class="c-imagery__main-image__bg"
              :class="{'paused unnsynced': isPaused,'stale':false }"
         >
-            <img
-                ref="focusedImage"
+            <div class="image-wrapper"
+                 :style="{
+                     'width': `${sizedImageDimensions.width}px`,
+                     'height': `${sizedImageDimensions.height}px`
+                 }"
+            >
+                <img ref="focusedImage"
                      class="c-imagery__main-image__image js-imageryView-image"
                      :src="imageUrl"
                      :style="{
@@ -70,14 +76,13 @@
                 >
                 <Compass
                     v-if="shouldDisplayCompass"
-                :container-width="imageContainerWidth"
-                :container-height="imageContainerHeight"
-                :natural-aspect-ratio="focusedImageNaturalAspectRatio"
+                    :compass-rose-sizing-classes="compassRoseSizingClasses"
                     :image="focusedImage"
-                :lock-compass="lockCompass"
-                @toggle-lock-compass="toggleLockCompass"
+                    :natural-aspect-ratio="focusedImageNaturalAspectRatio"
+                    :sized-image-dimensions="sizedImageDimensions"
                 />
             </div>
+        </div>
         <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
             <button class="c-nav c-nav--prev"
                     title="Previous image"
@@ -224,6 +229,18 @@ export default {
         };
     },
     computed: {
+        compassRoseSizingClasses() {
+            let compassRoseSizingClasses = '';
+            if (this.sizedImageDimensions.width < 300) {
+                compassRoseSizingClasses = '--rose-small --rose-min';
+            } else if (this.sizedImageDimensions.width < 500) {
+                compassRoseSizingClasses = '--rose-small';
+            } else if (this.sizedImageDimensions.width > 1000) {
+                compassRoseSizingClasses = '--rose-max';
+            }
+
+            return compassRoseSizingClasses;
+        },
         time() {
             return this.formatTime(this.focusedImage);
         },
@@ -347,6 +364,20 @@ export default {
             }
 
             return isFresh;
+        },
+        sizedImageDimensions() {
+            let sizedImageDimensions = {};
+            if ((this.imageContainerWidth / this.imageContainerHeight) > this.focusedImageNaturalAspectRatio) {
+                // container is wider than image
+                sizedImageDimensions.width = this.imageContainerHeight * this.focusedImageNaturalAspectRatio;
+                sizedImageDimensions.height = this.imageContainerHeight;
+            } else {
+                // container is taller than image
+                sizedImageDimensions.width = this.imageContainerWidth;
+                sizedImageDimensions.height = this.imageContainerWidth * this.focusedImageNaturalAspectRatio;
+            }
+
+            return sizedImageDimensions;
         }
     },
     watch: {
@@ -395,7 +426,7 @@ export default {
         _.debounce(this.resizeImageContainer, 400);
 
         this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
-        this.imageContainerResizeObserver.observe(this.$refs.focusedImage);
+        this.imageContainerResizeObserver.observe(this.$refs.imageBG);
 
         // For adjusting scroll bar size and position when resizing thumbs wrapper
         this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
@@ -833,12 +864,12 @@ export default {
             }, { once: true });
         },
         resizeImageContainer() {
-            if (this.$refs.focusedImage.clientWidth !== this.imageContainerWidth) {
-                this.imageContainerWidth = this.$refs.focusedImage.clientWidth;
+            if (this.$refs.imageBG.clientWidth !== this.imageContainerWidth) {
+                this.imageContainerWidth = this.$refs.imageBG.clientWidth;
             }
 
-            if (this.$refs.focusedImage.clientHeight !== this.imageContainerHeight) {
-                this.imageContainerHeight = this.$refs.focusedImage.clientHeight;
+            if (this.$refs.imageBG.clientHeight !== this.imageContainerHeight) {
+                this.imageContainerHeight = this.$refs.imageBG.clientHeight;
             }
         },
         handleThumbWindowResizeStart() {
@@ -858,9 +889,6 @@ export default {
             this.$nextTick(() => {
                 this.resizingWindow = false;
             });
-        },
-        toggleLockCompass() {
-            this.lockCompass = !this.lockCompass;
         }
     }
 };

src/plugins/imagery/components/imagery-view-layout.scss

@@ -22,6 +22,9 @@
         &__bg {
             background-color: $colorPlotBg;
             border: 1px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             flex: 1 1 auto;
             height: 0;
 
@@ -33,7 +36,6 @@
         &__image {
             height: 100%;
             width: 100%;
-            object-fit: contain;
         }
     }