add canvas click events

index.html

@@ -80,7 +80,6 @@
         openmct.install(openmct.plugins.example.Generator());
         openmct.install(openmct.plugins.example.EventGeneratorPlugin());
         openmct.install(openmct.plugins.example.ExampleImagery());
-        openmct.install(openmct.plugins.example.ExampleTags());
 
         openmct.install(openmct.plugins.Espresso());
         openmct.install(openmct.plugins.MyItems());

src/plugins/imagery/components/AnnotationsCanvas.vue

@@ -23,45 +23,115 @@
 <template>
 <canvas
     ref="canvas"
-    class="c-compass"
+    class="c-image-canvas"
     style="width: 100%; height: 100%;"
+    @mousedown="mouseDown"
+    @mouseup="mouseUp"
 ></canvas>
 </template>
 
 <script>
 
+const HANDLE_RADIUS = 10;
+
 export default {
     inject: ['openmct', 'domainObject'],
     props: {
     },
     data() {
         return {
+            h_th_left: null,
+            h_th_top: null,
+            h_th_right: null,
+            h_th_bottom: null,
+            dragTL: false,
+            dragBL: false,
+            dragTR: false,
+            dragBR: false,
+            dragWholeRect: false,
+            mouseX: null,
+            mouseY: null,
+            rect: {}
         };
     },
     mounted() {
+        console.debug(`🔮 AnnotationsCanvas mounted`);
+        this.h_th_left = document.getElementById('thb_left');
+        this.h_th_top = document.getElementById('thb_top');
+        this.h_th_right = document.getElementById('thb_right');
+        this.h_th_bottom = document.getElementById('thb_bottom');
+
         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();
+        getMousePos(canvas, evt) {
+            let clx; let cly;
+            if (evt.type === "touchstart" || evt.type === "touchmove") {
+                clx = evt.touches[0].clientX;
+                cly = evt.touches[0].clientY;
+            } else {
+                clx = evt.clientX;
+                cly = evt.clientY;
             }
+
+            const boundingRect = canvas.getBoundingClientRect();
+
+            return {
+                x: clx - boundingRect.left,
+                y: cly - boundingRect.top
+            };
+        },
+        checkInRect(x, y, r) {
+            return (x > r.left && x < (r.width + r.left)) && (y > r.top && y < (r.top + r.height));
+        },
+        checkCloseEnough(p1, p2) {
+            return Math.abs(p1 - p2) < HANDLE_RADIUS;
+        },
+        drawRectInCanvas() {
+            const canvas = this.$refs.canvas;
+            const ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.beginPath();
+            ctx.lineWidth = "6";
+            ctx.fillStyle = "rgba(199, 87, 231, 0.2)";
+            ctx.strokeStyle = "#c757e7";
+            ctx.rect(this.rect.left, this.rect.top, this.rect.width, this.rect.height);
+            ctx.fill();
+            ctx.stroke();
+        },
+        mouseUp(event) {
+            console.debug(`🐭 mouseUp`);
+            this.dragTL = this.dragTR = this.dragBL = this.dragBR = false;
+            this.dragWholeRect = false;
+        },
+        mouseDown(event) {
+            console.debug(`🐭 mouseDown: ${event.type}`);
+            const canvas = this.$refs.canvas;
+            let pos = this.getMousePos(canvas, event);
+            this.mouseX = pos.x;
+            this.mouseY = pos.y;
+            // 0. inside movable rectangle
+            if (this.checkInRect(this.mouseX, this.mouseY, this.rect)) {
+                this.dragWholeRect = true;
+                this.startX = this.mouseX;
+                this.startY = this.mouseY;
+            } else if (this.checkCloseEnough(this.mouseX, this.rect.left) && this.checkCloseEnough(this.mouseY, this.rect.top)) {
+                this.dragTL = true;
+            } else if (this.checkCloseEnough(this.mouseX, this.rect.left + this.rect.width) && this.checkCloseEnough(this.mouseY, this.rect.top)) {
+                this.dragTR = true;
+            } else if (this.checkCloseEnough(this.mouseX, this.rect.left) && this.checkCloseEnough(this.mouseY, this.rect.top + this.rect.height)) {
+                this.dragBL = true;
+            } else if (this.checkCloseEnough(this.mouseX, this.rect.left + this.rect.width) && this.checkCloseEnough(this.mouseY, this.rect.top + this.rect.height)) {
+                this.dragBR = true;
+            } else {
+                // handle not resizing
+            }
+
+            this.drawRectInCanvas();
+        },
+        drawAnnotations() {
         }
     }
 };

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

@@ -407,6 +407,7 @@ export default {
             svg.setAttribute('height', this.$refs.compassRoseWrapper.clientHeight);
         },
         toggleLockCompass() {
+            console.debug(`toggleLockCompass: ${this.lockCompass}`);
             this.lockCompass = !this.lockCompass;
         }
     }

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

@@ -10,7 +10,7 @@ $elemBg: rgba(black, 0.7);
 }
 
 .c-compass {
-    pointer-events: none; // This allows the image element to receive a browser-level context click
+    pointer-events: auto; // This allows the image element to receive a browser-level context click
     position: absolute;
     left: 0;
     top: 0;

src/plugins/imagery/components/ImageryView.vue

@@ -953,14 +953,15 @@ export default {
             });
         },
         async scrollToRight() {
-
             const scrollWidth = this.$refs?.thumbsWrapper?.scrollWidth ?? 0;
             if (!scrollWidth) {
                 return;
             }
 
             await Vue.nextTick();
-            this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
+            if (this.$refs.thumbsWrapper) {
+                this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
+            }
         },
         scrollHandler() {
             if (this.isPaused) {

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

@@ -519,3 +519,11 @@
         align-self: flex-end;
     }
 }
+
+.c-image-canvas {
+    pointer-events: auto; // This allows the image element to receive a browser-level context click
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+}