add canvas click events

This commit is contained in:
Scott Bell 2023-04-11 12:32:33 -05:00
parent d426ae86b8
commit 0aaa7998f5
6 changed files with 101 additions and 22 deletions

View File

@ -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());

View File

@ -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() {
}
}
};

View File

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

View File

@ -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;

View File

@ -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) {

View File

@ -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;
}