Skip to content
Snippets Groups Projects
Commit 2aa34f4e authored by Xiao Gui's avatar Xiao Gui
Browse files

bugfix: altas layer selector dynamic positioning

parent 92725796
No related branches found
No related tags found
No related merge requests found
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(),
......
.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;
......
......@@ -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
......
......@@ -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)
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment