bugfix: altas layer selector dynamic positioning

src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts

-import {Component, OnInit, ViewChildren, QueryList, HostBinding } from "@angular/core";
+import { Component, OnInit, ViewChildren, QueryList, HostBinding, ViewChild, TemplateRef, ElementRef } from "@angular/core";
 import { select, Store } from "@ngrx/store";
 import { distinctUntilChanged, map, withLatestFrom, shareReplay, groupBy, mergeMap, toArray, switchMap, scan, filter } from "rxjs/operators";
-import {Observable, Subscription, from, zip, of, combineLatest } from "rxjs";
+import { Observable, Subscription, from, zip, of, combineLatest } from "rxjs";
 import { viewerStateSelectTemplateWithId, viewerStateToggleLayer } from "src/services/state/viewerState.store.helper";
 import { MatMenuTrigger } from "@angular/material/menu";
 import { viewerStateGetSelectedAtlas, viewerStateAtlasLatestParcellationSelector, viewerStateSelectedTemplateFullInfoSelector, viewerStateSelectedTemplatePureSelector, viewerStateSelectedParcellationSelector } from "src/services/state/viewerState/selectors";
 import { ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
 import { IQuickTourData } from "src/ui/quickTour/constrants";
+import { animate, state, style, transition, trigger } from "@angular/animations";
 
 @Component({
   selector: 'atlas-layer-selector',
   templateUrl: './atlasLayerSelector.template.html',
   styleUrls: ['./atlasLayerSelector.style.css'],
-  exportAs: 'atlasLayerSelector'
+  exportAs: 'atlasLayerSelector',
+  animations: [
+    trigger('toggleAtlasLayerSelector', [
+      state('false', style({
+        transform: 'scale(0)',
+        opacity: 0,
+        transformOrigin: '0% 100%'
+      })),
+      state('true', style({
+        transform: 'scale(1)',
+        opacity: 1,
+        transformOrigin: '0% 100%'
+      })),
+      transition('false => true', [
+        animate('200ms cubic-bezier(0.35, 0, 0.25, 1)')
+      ]),
+      transition('true => false', [
+        animate('200ms cubic-bezier(0.35, 0, 0.25, 1)')
+      ])
+    ])
+  ]
 })
 export class AtlasLayerSelector implements OnInit {
 
@@ -21,6 +42,9 @@ export class AtlasLayerSelector implements OnInit {
     @ViewChildren(MatMenuTrigger) matMenuTriggers: QueryList<MatMenuTrigger>
     public atlas: any
 
+    @ViewChild('selectorPanelTmpl', { read: ElementRef })
+    selectorPanelTemplateRef: ElementRef
+
     public selectedAtlas$: Observable<any> = this.store$.pipe(
       select(viewerStateGetSelectedAtlas),
       distinctUntilChanged(),

src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.style.css

 .singleLayerImageContainer img {
     flex-shrink: 0;
-    /*min-width: 100%;*/
-    /*min-height: 100%;*/
     width: 70px;
     height: 70px;
     border-radius: 10px;
@@ -26,81 +24,6 @@
     border: 2px solid #FED363;
 }
 
-.scale-up-bl {
-    -webkit-animation: scale-up-bl .2s cubic-bezier(.39, .575, .565, 1.000) both;
-    animation: scale-up-bl .2s cubic-bezier(.39, .575, .565, 1.000) both;
-}
-
-@-webkit-keyframes scale-up-bl {
-    0% {
-        -webkit-transform: scale(.5);
-        transform: scale(.5);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-    }
-    100% {
-        -webkit-transform: scale(1);
-        transform: scale(1);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-    }
-}
-
-@keyframes scale-up-bl {
-    0% {
-        -webkit-transform: scale(.5);
-        transform: scale(.5);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-    }
-    100% {
-        -webkit-transform: scale(1);
-        transform: scale(1);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-    }
-}
-
-
-.scale-down-bl {
-    -webkit-animation: scale-down-bl .2s cubic-bezier(.25, .46, .45, .94) both;
-    animation: scale-down-bl .2s cubic-bezier(.25, .46, .45, .94) both;
-}
-
-@-webkit-keyframes scale-down-bl {
-    0% {
-        -webkit-transform: scale(1);
-        transform: scale(1);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-        opacity: 1;
-    }
-    100% {
-        -webkit-transform: scale(.5);
-        transform: scale(.5);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-        opacity: 0;
-    }
-}
-
-@keyframes scale-down-bl {
-    0% {
-        -webkit-transform: scale(1);
-        transform: scale(1);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-        opacity: 1;
-    }
-    100% {
-        -webkit-transform: scale(.5);
-        transform: scale(.5);
-        -webkit-transform-origin: 0 100%;
-        transform-origin: 0 100%;
-        opacity: 0;
-    }
-}
-
 .folder-container
 {
     margin-right:0.5rem;

src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html

@@ -2,7 +2,11 @@
 
     <!-- selector panel when expanded -->
 
-    <mat-card class="selector-container position-absolute" [ngClass]="selectorExpanded ? 'scale-up-bl pe-all' : 'scale-down-bl pe-none'">
+    <mat-card class="selector-container position-absolute"
+        [ngClass]="{'pe-all': selectorExpanded}"
+        [@toggleAtlasLayerSelector]="selectorExpanded"
+        (@toggleAtlasLayerSelector.done)="atlasSelectorTour?.attachTo(selectorExpanded ? selectorPanelTemplateRef : null)"
+        #selectorPanelTmpl>
         <mat-card-content>
 
             <!-- templates -->
@@ -66,7 +70,8 @@
     <div class="position-relative m-2 cursor-pointer scale-up-bl pe-all"
         quick-tour
         [quick-tour-description]="quickTourData.description"
-        [quick-tour-order]="quickTourData.order">
+        [quick-tour-order]="quickTourData.order"
+        #atlasSelectorTour="quickTour">
         <button color="primary"
             matTooltip="Select layer"
             mat-mini-fab

src/ui/quickTour/quickTourThis.directive.ts

@@ -14,13 +14,15 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
   @Input('quick-tour-overwrite-position') overwritePosition: IQuickTourOverwritePosition
   @Input('quick-tour-overwrite-arrow') overWriteArrow: TemplateRef<any> | string
   
+  private attachedTmpl: ElementRef
+
   constructor(
     private quickTourService: QuickTourService,
     private el: ElementRef
   ) {}
 
   public getHostPos() {
-    const { x, y, width, height } = (this.el.nativeElement as HTMLElement).getBoundingClientRect()
+    const { x, y, width, height } = (this.attachedTmpl?.nativeElement || this.el.nativeElement as HTMLElement).getBoundingClientRect()
     return { x, y, width, height }
   }
 
@@ -35,4 +37,9 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy() {
     this.quickTourService.unregister(this)
   }
+
+  attachTo(tmp: ElementRef){
+    this.attachedTmpl = tmp
+    this.quickTourService.changeDetected(this)
+  }
 }