diff --git a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts
index 86aaff323552bd05d79edd6d0be537e23ddd57b3..bf2e48c1259e640eb0fe98a975a63ab82f40a617 100644
--- a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts
+++ b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts
@@ -1,18 +1,39 @@
-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(),
diff --git a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.style.css b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.style.css
index 4e20ddc781223acdeb53989f89b946ed306d8194..9d43dc845dcf18755d5326699abaf0ce4139011b 100644
--- a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.style.css
+++ b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.style.css
@@ -1,7 +1,5 @@
.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;
diff --git a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html
index 2676a48d52a76eb8c071a3b61943d55393178d2e..c6e4db70b3c81bb994a7290d78f486df3287c16b 100644
--- a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html
+++ b/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
diff --git a/src/ui/quickTour/quickTourThis.directive.ts b/src/ui/quickTour/quickTourThis.directive.ts
index 32054b1a5d69689624253f9f3bfd6a7b36235e6b..ceec5f72cd5cf083917583c439519d5be0598150 100644
--- a/src/ui/quickTour/quickTourThis.directive.ts
+++ b/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)
+ }
}