mirror of
https://github.com/nasa/openmct.git
synced 2025-03-18 10:05:22 +00:00
add canvas click events
This commit is contained in:
parent
d426ae86b8
commit
0aaa7998f5
@ -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());
|
||||
|
@ -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() {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -407,6 +407,7 @@ export default {
|
||||
svg.setAttribute('height', this.$refs.compassRoseWrapper.clientHeight);
|
||||
},
|
||||
toggleLockCompass() {
|
||||
console.debug(`toggleLockCompass: ${this.lockCompass}`);
|
||||
this.lockCompass = !this.lockCompass;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user