diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts index 8089873..a26314c 100644 --- a/src/app/carousel/carousel.component.ts +++ b/src/app/carousel/carousel.component.ts @@ -1,6 +1,6 @@ import { animate, keyframes, state, style, transition, trigger } from '@angular/animations'; import { NgStyle } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AngularResizeEventModule, ResizedEvent } from 'angular-resize-event'; import { Subject, debounceTime } from 'rxjs'; @@ -33,10 +33,9 @@ import { Subject, debounceTime } from 'rxjs'; ]) ] }) -export class CarouselComponent implements OnInit, AfterViewInit { +export class CarouselComponent implements OnInit, AfterViewInit, OnChanges { @Output() afterInitSelf: EventEmitter> = new EventEmitter>(); - @Output() changedIndex: EventEmitter = new EventEmitter(); @Input() slides?: T[]; @ContentChild(TemplateRef) template?: TemplateRef; @ViewChild('carouselWindow') window!: ElementRef; @@ -45,6 +44,7 @@ export class CarouselComponent implements OnInit, AfterViewInit { @Input() initIndex?: number; current: number = 0; + intersectionObserver?: IntersectionObserver; visibleSlides?: IntersectingSlide[]; increasing: boolean = true; @@ -53,12 +53,10 @@ export class CarouselComponent implements OnInit, AfterViewInit { animation: string = 'vertical'; directionTime: number = 0; @Input() numVisible: number = 1; - + @Input() offset: number = 0; containerDirectionLength: number = 0; - private debouncedOnchange: Subject = new Subject(); - - + constructor(private cdr: ChangeDetectorRef) { this.visibleSlides = []; this.debouncedOnchange.pipe(debounceTime(500)).subscribe(() => this.realOnChange()); @@ -67,9 +65,9 @@ export class CarouselComponent implements OnInit, AfterViewInit { } } + ngOnInit(): void { this.afterInitSelf.next(this); - this.intersectionObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { const runIntersectionHandling = () => { @@ -77,38 +75,35 @@ export class CarouselComponent implements OnInit, AfterViewInit { if (!entryIndex && entryIndex != 0) { return; } - const entryIntersectingSlide = this.visibleSlides?.find((s) => { - return s.index == entryIndex; - }); - + + const entryIntersectingSlide = this.visibleSlides?.find(s => s.index == entryIndex); if (!entryIntersectingSlide) { return; } entryIntersectingSlide.currentlyIntersecting = entry.isIntersecting; - - if (entryIntersectingSlide.hasBeenVisible && !entry.isIntersecting) { - this.visibleSlides = this.visibleSlides?.filter(e => e.index != entryIndex); - this.intersectionObserver?.unobserve(entry.target); - } }; runIntersectionHandling(); this.onChange(); }) }) - } numExtraNext() { - return Math.floor((this.numVisible - 1) / 2); + return this.numVisible + this.offset - 1; } numExtraPrev() { - return Math.ceil((this.numVisible - 1) / 2); + return 0 + this.offset; } - ngAfterViewInit(): void { + ngOnChanges(changes: SimpleChanges): void { + if(changes['numVisible'] || changes['offset']) { + this.reinitializeVisibleSlides(); + } + } + ngAfterViewInit(): void { this.slideElements.changes.subscribe((comps: QueryList) => { comps.forEach((comp) => this.handleNewDomSlide(comp)) }); @@ -123,7 +118,6 @@ export class CarouselComponent implements OnInit, AfterViewInit { for (let i = 0; i <= this.numExtraNext() && i < this.slides!.length; i++) { this.visibleSlides?.push({ index: i, - hasBeenVisible: false, currentlyIntersecting: false, }) } @@ -135,20 +129,19 @@ export class CarouselComponent implements OnInit, AfterViewInit { setIndex(slideIndex: number) { this.current = slideIndex; - console.log("setIndex", slideIndex); - this.visibleSlides!.length = 0; - console.log("length", this.slides!.length); + this.reinitializeVisibleSlides(); + this.onChange(); + } - for (let i = -this.numExtraPrev(); i <= this.numExtraNext(); i++) { - console.log("i, ", i); - if (this.current + i >= 0 && this.current + i < this.slides!.length) { - console.log("pushing", this.current + i); + reinitializeVisibleSlides() { + this.visibleSlides!.length = 0; + const start = Math.max(0, this.current - this.numExtraPrev()); + const end = Math.min(this.current + this.numExtraNext(), this.slides!.length - 1); + for (let i = start; i <= end; i++) { this.visibleSlides?.push({ - index: this.current + i, - hasBeenVisible: false, + index: i, currentlyIntersecting: false, }); - } } this.onChange(); @@ -158,12 +151,10 @@ export class CarouselComponent implements OnInit, AfterViewInit { this.increasing = true; if (this.slides && this.current + 1 < this.slides?.length) { this.current += 1; - this.changedIndex.emit(this.current); if (this.current + this.numExtraNext() < this.slides.length) { if (!this.visibleSlides?.find(e => e.index == this.current + this.numExtraNext())) { this.visibleSlides?.push({ index: this.current + this.numExtraNext(), - hasBeenVisible: false, currentlyIntersecting: false, }); } @@ -176,13 +167,10 @@ export class CarouselComponent implements OnInit, AfterViewInit { this.increasing = false; if (this.current - 1 >= 0) { this.current -= 1; - this.changedIndex.emit(this.current); - if (this.current - this.numExtraPrev() >= 0) { if (!this.visibleSlides?.find(e => e.index == this.current - this.numExtraPrev())) { this.visibleSlides?.push({ index: this.current - this.numExtraPrev(), - hasBeenVisible: false, currentlyIntersecting: false, }); } @@ -196,47 +184,36 @@ export class CarouselComponent implements OnInit, AfterViewInit { } realOnChange() { - const safetyFactor = this.numVisible == 1 ? 1 : 2; - { - const intersecting = this.visibleSlides?.filter(e => e.currentlyIntersecting).sort((e1, e2) => e1.index - e2.index); - if (intersecting && intersecting.length > 0) { - const lowestIntersecting = intersecting![0]; - this.visibleSlides = this.visibleSlides?.filter(e => e.index + safetyFactor >= lowestIntersecting!.index && e.index >= this.current - this.numExtraPrev()); - } - } - { + const safetyFactor = (this.numVisible == 1 ? 1 : 2); + const intersecting = this.visibleSlides?.filter(e => e.currentlyIntersecting).sort((e1, e2) => e1.index - e2.index); + if (intersecting && intersecting.length > 0) { + const lowestIntersecting = intersecting![0]; + const highestIntersecting = intersecting![intersecting!.length - 1]; - const intersecting = this.visibleSlides?.filter(e => e.currentlyIntersecting).sort((e1, e2) => e1.index - e2.index).reverse(); - if (intersecting && intersecting.length > 0) { - const highestIntersecting = intersecting![0] - this.visibleSlides = this.visibleSlides?.filter(e => e.index - safetyFactor <= highestIntersecting!.index && e.index <= this.current + this.numExtraNext()); - } + const min = Math.min(lowestIntersecting.index - safetyFactor, this.current - this.numExtraPrev()); + const max = Math.max(highestIntersecting.index + safetyFactor, this.current + this.numExtraNext()); + + this.visibleSlides = this.visibleSlides?.filter(e => e.index >= min && e.index <= max); } } translation() { - let num = (this.current - this.numExtraNext() - (this.numVisible % 2 == 0 ? 1 : 0)) * (-1 / this.numVisible) * 100; const step = this.containerDirectionLength / this.numVisible; - const pos = (this.current - this.numExtraNext() - (this.numVisible % 2 == 0 ? 1 : 0)); - - const offset = pos * -step; + const translation = -((this.current - this.offset) * step); if (this.vertical) { - return `0 ${offset}px` + return `0 ${translation}px` } else { - return `${offset}px 0` + return `${translation}px 0` } } - templateValue() { const len = this.slides?.length; return `repeat(${len}, ${this.containerDirectionLength / this.numVisible}px)`; } style() { - let style: any = { - - }; + let style: any = {}; if (this.vertical) { style['grid-template-rows'] = this.templateValue(); @@ -281,11 +258,9 @@ export class CarouselComponent implements OnInit, AfterViewInit { this.containerDirectionLength = event.newRect.width; } } - } interface IntersectingSlide { index: number; - hasBeenVisible: boolean; currentlyIntersecting: boolean; } \ No newline at end of file diff --git a/src/app/plan-display/plan-display.component.html b/src/app/plan-display/plan-display.component.html index ecae143..b966b3f 100644 --- a/src/app/plan-display/plan-display.component.html +++ b/src/app/plan-display/plan-display.component.html @@ -1,13 +1,15 @@
-
- +
@@ -35,6 +37,10 @@ +
; currentSlides?: CarouselComponent; @@ -57,16 +42,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { }) }); - // const test = this.events.listen("OverlayStateChange").subscribe(event => { - // if (!this.hasAttachedOnce) { - // this.hasAttachedOnce = true; - // test.unsubscribe(); - // if (!event.payload.Hidden) - // overlayService.setInteractable(); - // } - - // }); - appWindow.listen("entered", (entered) => { if (this.planService.currentPlan) { const current = this.planService.currentPlan.current; @@ -175,6 +150,7 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { this.zoneSlides = carousel; this.zoneSlides.setIndex(this.slideIndex); } + registerCurrentSlides(carousel: CarouselComponent) { this.currentSlides = carousel; this.currentSlides.setIndex(this.slideIndex); @@ -201,11 +177,9 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { this.slideIndex = index; if (this.currentSlides) { this.currentSlides.setIndex(index); - } if (this.zoneSlides) { this.zoneSlides.setIndex(index); - } } @@ -215,31 +189,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { }); } - onResizeNote(noteSlide: NotesComponent) { - if (!noteSlide.ref) { return; } - - let bounds = noteSlide.ref.nativeElement.getBoundingClientRect(); - const children = noteSlide.ref.nativeElement.children; - - let sumWidth = 0; - let sumHeight = 0; - for (let child of children) { - const c = child.getBoundingClientRect(); - sumWidth += c.width; - sumHeight += c.height; - } - - const scale = Math.min( - sumWidth / bounds.width, - sumHeight / bounds.height, - ) - - for (let child of children) { - child.style.transform = `scale(1, ${scale})`; - } - - } - settingsClick(event: any) { this.settingsOpen = !this.settingsOpen; event.stopPropagation(); @@ -277,10 +226,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { }) } - enumeratedPlans() { - - } - onScroll(event: WheelEvent) { if (event.deltaY < 0) { this.prev(); @@ -288,4 +233,14 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { this.next(); } } + + specialClasses() { + const waypoint = this.hasWaypoint() ? 'active' : ''; + const trial = this.hasTrial() ? 'trial-active' : ''; + return `${waypoint} ${trial}`; + } + + clampedOffset(): number { + return Math.min(this.configService.config.numVisible - 1, this.configService.config.offset); + } } diff --git a/src/app/plan-display/plan-display.module.ts b/src/app/plan-display/plan-display.module.ts index bbd1a52..6ec14b5 100644 --- a/src/app/plan-display/plan-display.module.ts +++ b/src/app/plan-display/plan-display.module.ts @@ -12,6 +12,7 @@ import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatListModule } from '@angular/material/list'; import { ScalableComponent } from '../Scalable/scalable.component'; +import {MatTooltipModule} from '@angular/material/tooltip'; @NgModule({ declarations: [ PlanDisplayComponent @@ -29,7 +30,8 @@ import { ScalableComponent } from '../Scalable/scalable.component'; MatButtonModule, MatIconModule, MatListModule, - ScalableComponent + ScalableComponent, + MatTooltipModule ], exports: [ PlanDisplayComponent diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 5b62bb8..ebf0e0d 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -6,17 +6,22 @@
- Plan window - background + + Plan window background +
- Overlay - backdrop color + + Overlay backdrop color +
- Overlay - default - font color + + Overlay default font color +
@@ -25,15 +30,26 @@ [(ngModel)]="configService.config.hideOnUnfocus">
- +
- +
- + +
+ + +
+ +
+
+
\ No newline at end of file diff --git a/src/assets/material-help.svg b/src/assets/material-help.svg new file mode 100644 index 0000000..439616e --- /dev/null +++ b/src/assets/material-help.svg @@ -0,0 +1 @@ + \ No newline at end of file