diff --git a/src/plugins/imagery/components/AnnotationsCanvas.vue b/src/plugins/imagery/components/AnnotationsCanvas.vue index 7cbf0a0eaa..797ebce908 100644 --- a/src/plugins/imagery/components/AnnotationsCanvas.vue +++ b/src/plugins/imagery/components/AnnotationsCanvas.vue @@ -58,7 +58,6 @@ export default { dragging: false, mouseDown: false, newAnnotationRectangle: {}, - annotationsForThisImage: [], keyString: null, context: null, canvas: null, @@ -67,35 +66,34 @@ export default { indexToAnnotationMap: {} }; }, + watch: { + imageryAnnotations() { + this.buildAnnotationIndex(); + } + }, mounted() { this.canvas = this.$refs.canvas; this.context = this.canvas.getContext("2d"); this.openmct.selection.on('change', this.updateSelection); - this.loadAnnotations(); + this.buildAnnotationIndex(); }, beforeDestroy() { this.openmct.selection.off('change', this.updateSelection); document.body.removeEventListener('click', this.cancelSelection); }, methods: { - async loadAnnotations() { - if (!this.openmct.annotation.getAvailableTags().length) { - // don't bother loading annotations if there are no tags + buildAnnotationIndex() { + if (!this.imageryAnnotations.length) { return; } // find annotations for this image time - const annotationsForThisObject = await this.openmct.annotation.getAnnotations(this.domainObject.identifier); this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier); - this.annotationsForThisImage = annotationsForThisObject.filter((foundAnnotation) => { - const annotationTime = foundAnnotation.targets[this.keyString].time; - return annotationTime === this.image.time; - }); - if (this.annotationsForThisImage.length) { + if (this.imageryAnnotations.length) { // create a flatbush index for the annotations - this.annotationsIndex = new Flatbush(this.annotationsForThisImage.length); - this.annotationsForThisImage.forEach((annotation) => { + this.annotationsIndex = new Flatbush(this.imageryAnnotations.length); + this.imageryAnnotations.forEach((annotation) => { const annotationRectangle = annotation.targets[this.keyString].rectangle; const indexNumber = this.annotationsIndex.add(annotationRectangle.x, annotationRectangle.y, annotationRectangle.x + annotationRectangle.width, annotationRectangle.y + annotationRectangle.height); this.indexToAnnotationMap[indexNumber] = annotation; @@ -107,7 +105,7 @@ export default { }, onAnnotationChange(annotations) { this.selectedAnnotations = annotations; - this.loadAnnotations(); + this.buildAnnotationIndex(); }, updateSelection(selection) { const selectionContext = selection?.[0]?.[0]?.context?.item; @@ -139,9 +137,8 @@ export default { }, prepareExistingAnnotationSelection(annotations) { - const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier); const targetDomainObjects = {}; - targetDomainObjects[keyString] = this.domainObject; + targetDomainObjects[this.keyString] = this.domainObject; const targetDetails = {}; annotations.forEach(annotation => { @@ -253,11 +250,10 @@ export default { console.debug(`🖼️ Creating new image annotation of size ${this.newAnnotationRectangle.width}x${this.newAnnotationRectangle.height} at ${this.newAnnotationRectangle.x},${this.newAnnotationRectangle.y}`); - const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier); const targetDomainObjects = {}; - targetDomainObjects[keyString] = this.domainObject; + targetDomainObjects[this.keyString] = this.domainObject; const targetDetails = {}; - targetDetails[keyString] = { + targetDetails[this.keyString] = { rectangle: { x: this.newAnnotationRectangle.x, y: this.newAnnotationRectangle.y, @@ -353,7 +349,7 @@ export default { }, drawAnnotations() { this.clearCanvas(); - this.annotationsForThisImage.forEach((annotation) => { + this.imageryAnnotations.forEach((annotation) => { if (this.isSelectedAnnotation(annotation)) { this.drawRectInCanvas(annotation.targets[this.keyString].rectangle, SELECTED_ANNOTATION_FILL_STYLE, SELECTED_ANNOTATION_STROKE_COLOR); } else {