fix: jumps to selected annotation region (DEV-4542) (#2074)

Co-authored-by: Irmantas Kaukas <[email protected]>
dasch-swiss · Feb 3, 2025 · d7f48a6 · d7f48a6
1 parent e0f721b
commit d7f48a6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/libs/vre/resource-editor/representations/src/lib/still-image/osd-drawer.service.ts b/libs/vre/resource-editor/representations/src/lib/still-image/osd-drawer.service.ts
@@ -41,6 +41,10 @@ export class OsdDrawerService implements OnDestroy {
     this._subscribeToRegions();
     this._subscribeToSelectedRegion();
     this._subscribeToCreatedRectangle();
+
+    this._osd.viewer.addHandler('canvas-click', event => {
+      this._regionService.selectRegion((<any>event).originalTarget.dataset.regionIri);
+    });
   }
 
   update(resource: ReadResource): void {
@@ -182,15 +186,11 @@ export class OsdDrawerService implements OnDestroy {
     regionComment: string
   ): void {
     const { regEle, loc } = this._createRectangle(regionIri, geometry, aspectRatio);
-    this._osd.viewer
-      .addOverlay({
-        id: regionIri,
-        element: regEle,
-        location: loc,
-      })
-      .addHandler('canvas-click', event => {
-        this._regionService.selectRegion((<any>event).originalTarget.dataset.regionIri);
-      });
+    this._osd.viewer.addOverlay({
+      id: regionIri,
+      element: regEle,
+      location: loc,
+    });
 
     this._paintedPolygons[regionIri].push(regEle);
     this._createTooltip(regionLabel, regionComment, regEle, regionIri);

diff --git a/libs/vre/resource-editor/resource-editor/src/lib/annotation-tab.component.ts b/libs/vre/resource-editor/resource-editor/src/lib/annotation-tab.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { RouteConstants } from '@dasch-swiss/vre/core/config';
+import { AppError } from '@dasch-swiss/vre/core/error-handler';
 import { RegionService } from '@dasch-swiss/vre/resource-editor/representations';
 import { DspResource, ResourceService } from '@dasch-swiss/vre/shared/app-common';
 import { Subscription } from 'rxjs';
@@ -9,8 +10,9 @@ import { take } from 'rxjs/operators';
   selector: 'app-annotation-tab',
   template: ` <div
     *ngFor="let annotation of regionService.regions$ | async; trackBy: trackAnnotationByFn"
-    [id]="annotation.res.id"
+    [attr.data-annotation-resource]="annotation.res.id"
     [class.active]="annotation.res.id === selectedRegion"
+    #annotationElement
     data-cy="annotation-border">
     <app-properties-display
       [resource]="annotation"
@@ -29,6 +31,7 @@ import { take } from 'rxjs/operators';
 })
 export class AnnotationTabComponent implements OnInit, OnDestroy {
   @Input({ required: true }) resource!: DspResource;
+  @ViewChildren('annotationElement') annotationElements!: QueryList<ElementRef>;
   selectedRegion: string | null = null;
 
   private _subscription!: Subscription;
@@ -55,16 +58,21 @@ export class AnnotationTabComponent implements OnInit, OnDestroy {
     this._subscription.unsubscribe();
   }
 
+  trackAnnotationByFn = (index: number, item: DspResource) => `${index}-${item.res.id}`;
+  protected readonly RouteConstants = RouteConstants;
+
   private _scrollToRegion(iri: string) {
-    const region = document.getElementById(iri);
-    if (region) {
-      region.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
+    const region = this.annotationElements.find(
+      element => element.nativeElement.getAttribute('data-annotation-resource') === iri
+    );
+
+    if (!region) {
+      throw new AppError('An overlay does not have corresponding resource');
     }
-  }
 
-  trackAnnotationByFn = (index: number, item: DspResource) => `${index}-${item.res.id}`;
-  protected readonly RouteConstants = RouteConstants;
+    region.nativeElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    });
+  }
 }