separate into canvas

src/plugins/imagery/components/AnnotationsCanvas.vue

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+<canvas
+    ref="canvas"
+    class="c-compass"
+    style="width: 100%; height: 100%;"
+></canvas>
+</template>
+
+<script>
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    props: {
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {
+        this.drawAnnotations();
+    },
+    beforeDestroy() {
+    },
+    methods: {
+        drawAnnotations() {
+            const canvas = this.$refs.canvas;
+            const context = canvas.getContext("2d");
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            const iterations = Math.floor(Math.random() * 20);
+            for (let i = 0; i < iterations; i++) {
+                context.beginPath();
+                context.lineWidth = "2";
+                context.fillStyle = "rgba(199, 87, 231, 0.2)";
+                context.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * i)})`;
+
+                const left = Math.floor(Math.random() * canvas.width);
+                const top = Math.floor(Math.random() * canvas.height);
+                const size = Math.floor(Math.random() * 50);
+                context.rect(left, top, size, size);
+                context.fill();
+                context.stroke();
+            }
+        }
+    }
+};
+</script>

src/plugins/imagery/components/ImageryView.vue

@@ -96,11 +96,9 @@
                     :image="focusedImage"
                     :sized-image-dimensions="sizedImageDimensions"
                 />
-                <canvas
-                    ref="canvas"
-                    class="c-compass"
-                    style="width: 100%; height: 100%;"
-                ></canvas>
+                <AnnotationsCanvas
+                    v-if="shouldDisplayCompass"
+                />
             </div>
         </div>
 
@@ -205,6 +203,7 @@ import Compass from './Compass/Compass.vue';
 import ImageControls from './ImageControls.vue';
 import ImageThumbnail from './ImageThumbnail.vue';
 import imageryData from "../../imagery/mixins/imageryData";
+import AnnotationsCanvas from './AnnotationsCanvas.vue';
 
 const REFRESH_CSS_MS = 500;
 const DURATION_TRACK_MS = 1000;
@@ -237,7 +236,8 @@ export default {
     components: {
         Compass,
         ImageControls,
-        ImageThumbnail
+        ImageThumbnail,
+        AnnotationsCanvas
     },
     mixins: [imageryData],
     inject: ['openmct', 'domainObject', 'objectPath', 'currentView', 'imageFreshnessOptions'],
@@ -678,7 +678,6 @@ export default {
 
         this.listenTo(this.focusedImageWrapper, 'wheel', this.wheelZoom, this);
         this.loadVisibleLayers();
-        this.drawAnnotations();
     },
     beforeDestroy() {
         this.persistVisibleLayers();
@@ -719,25 +718,6 @@ export default {
                 transition: `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`
             };
         },
-        drawAnnotations() {
-            const canvas = this.$refs.canvas;
-            const context = canvas.getContext("2d");
-            context.clearRect(0, 0, canvas.width, canvas.height);
-            const iterations = Math.floor(Math.random() * 20);
-            for (let i = 0; i < iterations; i++) {
-                context.beginPath();
-                context.lineWidth = "2";
-                context.fillStyle = "rgba(199, 87, 231, 0.2)";
-                context.strokeStyle = "#c757e7";
-
-                const left = Math.floor(Math.random() * canvas.width);
-                const top = Math.floor(Math.random() * canvas.height);
-                const size = Math.floor(Math.random() * 50);
-                context.rect(left, top, size, size);
-                context.fill();
-                context.stroke();
-            }
-        },
         setTimeContext() {
             this.stopFollowingTimeContext();
             this.timeContext = this.openmct.time.getContextForView(this.objectPath);