From f3d72301b223bd6350442ce212c5f9d24c9b245c Mon Sep 17 00:00:00 2001 From: isark Date: Sat, 18 Nov 2023 16:04:34 +0100 Subject: [PATCH] Updated notes display and scaling. Moved carousel to absolute pixel positions manually calculated instead of % since that didn't work too well..." --- src-tauri/src/main.rs | 6 +-- src-tauri/tauri.conf.json | 2 +- src/app/Scalable/scalable.component.html | 5 ++ src/app/Scalable/scalable.component.ts | 51 +++++++++++++++++++ src/app/carousel/carousel.component.html | 2 +- src/app/carousel/carousel.component.ts | 45 +++++++++++----- src/app/editor/notes/notes.component.ts | 10 ++-- .../plan-display/plan-display.component.html | 14 +++-- .../plan-display/plan-display.component.ts | 4 -- src/app/plan-display/plan-display.module.ts | 4 +- 10 files changed, 109 insertions(+), 34 deletions(-) create mode 100644 src/app/Scalable/scalable.component.html create mode 100644 src/app/Scalable/scalable.component.ts diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 8ed83b2..931bd30 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -156,9 +156,9 @@ fn main() { ); } - // app.get_window("Overlay") - // .expect("Could not get main overlay window") - // .open_devtools(); + app.get_window("Overlay") + .expect("Could not get main overlay window") + .open_devtools(); Ok(()) }) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 8428f10..97ac930 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "Nothing", - "version": "0.0.0" + "version": "0.0.1" }, "tauri": { "systemTray": { diff --git a/src/app/Scalable/scalable.component.html b/src/app/Scalable/scalable.component.html new file mode 100644 index 0000000..d1ba39b --- /dev/null +++ b/src/app/Scalable/scalable.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/Scalable/scalable.component.ts b/src/app/Scalable/scalable.component.ts new file mode 100644 index 0000000..583d35a --- /dev/null +++ b/src/app/Scalable/scalable.component.ts @@ -0,0 +1,51 @@ +import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; +import { AngularResizeEventModule, ResizedEvent } from 'angular-resize-event'; + +@Component({ + selector: 'scalable', + templateUrl: './scalable.component.html', + imports: [ AngularResizeEventModule ], + standalone: true +}) +export class ScalableComponent implements AfterViewInit { + @ViewChild('container') container?: ElementRef; + @ViewChild('element') element?: ElementRef; + + ngAfterViewInit(): void { + if (!this.container || !this.element) { + return; + } + + setTimeout(() => this.update()); + } + + update() { + if(!this.container || !this.element) { + return; + } + + const containerWidth = this.container?.nativeElement.clientWidth; + const containerHeight = this.container?.nativeElement.clientHeight; + const elementWidth = this.element?.nativeElement.clientWidth; + const elementHeight = this.element?.nativeElement.clientHeight; + + this.element.nativeElement.style.transform = ""; + + this.element.nativeElement.style.left = '0'; + this.element.nativeElement.style.top = '0'; + + this.element.nativeElement.style.transformOrigin = "left top"; + + let scale = containerWidth / elementWidth; + + if(containerHeight < elementHeight * scale) { + scale = containerHeight / elementHeight; + } + + this.element.nativeElement.style.transform += `scale(${scale}, ${scale})`; + } + + onResize(_event: ResizedEvent) { + this.update(); + } +} diff --git a/src/app/carousel/carousel.component.html b/src/app/carousel/carousel.component.html index c5a15ab..968efa9 100644 --- a/src/app/carousel/carousel.component.html +++ b/src/app/carousel/carousel.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts index 70d8890..0fbd1e3 100644 --- a/src/app/carousel/carousel.component.ts +++ b/src/app/carousel/carousel.component.ts @@ -2,6 +2,7 @@ import { animate, keyframes, state, style, transition, trigger } from '@angular/ import { NgStyle } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { AngularResizeEventModule, ResizedEvent } from 'angular-resize-event'; import { Subject, debounceTime } from 'rxjs'; @Component({ @@ -10,21 +11,22 @@ import { Subject, debounceTime } from 'rxjs'; styleUrls: ['./carousel.component.scss'], standalone: true, imports: [ - BrowserModule + BrowserModule, + AngularResizeEventModule ], animations: [ trigger('direction', [ - + state('vertical', style({})), state('horizontal', style({})), - + state('hidden', style({ opacity: 0, })), state('unhidden', style({ opacity: 1, })), - + transition('* => hidden', animate(`{{directionTime}}ms`)), transition('hidden => unhidden', animate(`{{directionTime}}ms`)), transition('unhidden => *', animate('10ms')), @@ -32,6 +34,7 @@ import { Subject, debounceTime } from 'rxjs'; ] }) export class CarouselComponent implements OnInit, AfterViewInit { + @Output() afterInitSelf: EventEmitter> = new EventEmitter>(); @Output() changedIndex: EventEmitter = new EventEmitter(); @Input() slides?: T[]; @@ -51,13 +54,15 @@ export class CarouselComponent implements OnInit, AfterViewInit { directionTime: number = 0; @Input() numVisible: number = 1; + containerDirectionLength: number = 0; + private debouncedOnchange: Subject = new Subject(); constructor(private cdr: ChangeDetectorRef) { this.visibleSlides = []; this.debouncedOnchange.pipe(debounceTime(500)).subscribe(() => this.realOnChange()); - if(this.initIndex) { + if (this.initIndex) { this.current = this.initIndex; } } @@ -115,7 +120,7 @@ export class CarouselComponent implements OnInit, AfterViewInit { } initialize() { - for(let i = 0; i <= this.numExtraNext() && i < this.slides!.length; i++) { + for (let i = 0; i <= this.numExtraNext() && i < this.slides!.length; i++) { this.visibleSlides?.push({ index: i, hasBeenVisible: false, @@ -131,7 +136,7 @@ export class CarouselComponent implements OnInit, AfterViewInit { setIndex(slideIndex: number) { this.current = slideIndex; - for(let i = Math.max(-this.numExtraPrev(), 0); i <= this.numExtraNext(); i++) { + for (let i = Math.max(-this.numExtraPrev(), 0); i <= Math.min(this.numExtraNext(), this.slides!.length - 1); i++) { this.visibleSlides?.push({ index: this.current + i, hasBeenVisible: false, @@ -146,9 +151,9 @@ 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); + this.changedIndex.emit(this.current); if (this.current + this.numExtraNext() < this.slides.length) { - if (!this.visibleSlides?.find(e => e.index == this.current + this.numExtraNext() )) { + if (!this.visibleSlides?.find(e => e.index == this.current + this.numExtraNext())) { this.visibleSlides?.push({ index: this.current + this.numExtraNext(), hasBeenVisible: false, @@ -164,7 +169,7 @@ export class CarouselComponent implements OnInit, AfterViewInit { this.increasing = false; if (this.current - 1 >= 0) { this.current -= 1; - this.changedIndex.emit(this.current); + this.changedIndex.emit(this.current); if (this.current - this.numExtraPrev() >= 0) { if (!this.visibleSlides?.find(e => e.index == this.current - this.numExtraPrev())) { @@ -201,17 +206,21 @@ export class CarouselComponent implements OnInit, AfterViewInit { 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; if (this.vertical) { - return `0 ${num}%` + return `0 ${offset}px` } else { - return `${num}% 0` + return `${offset}px 0` } } templateValue() { const len = this.slides?.length; - return `repeat(${len}, minmax(calc(100% / ${this.numVisible}), 1fr))`; + return `repeat(${len}, ${this.containerDirectionLength / this.numVisible}px)`; } style() { @@ -222,7 +231,7 @@ export class CarouselComponent implements OnInit, AfterViewInit { if (this.vertical) { style['grid-template-rows'] = this.templateValue(); style['grid-auto-flow'] = 'column'; - + } else { style['grid-template-columns'] = this.templateValue(); style['grid-auto-flow'] = 'row'; @@ -255,6 +264,14 @@ export class CarouselComponent implements OnInit, AfterViewInit { this.animation = 'hidden'; } + carouselResize(event: ResizedEvent) { + if (this.vertical) { + this.containerDirectionLength = event.newRect.height; + } else { + this.containerDirectionLength = event.newRect.width; + } + } + } interface IntersectingSlide { diff --git a/src/app/editor/notes/notes.component.ts b/src/app/editor/notes/notes.component.ts index 5396aec..7620521 100644 --- a/src/app/editor/notes/notes.component.ts +++ b/src/app/editor/notes/notes.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, Inject, Input, ViewChild, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Inject, Input, ViewChild, ViewEncapsulation } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog'; import { CommonModule, NgIf } from '@angular/common'; import { MatButton, MatButtonModule } from '@angular/material/button'; @@ -20,15 +20,15 @@ interface DialogData { imports: [CommonModule, FormsModule, MatButtonModule], encapsulation: ViewEncapsulation.None, }) -export class NotesComponent { +export class NotesComponent implements AfterViewInit { @Input() note?: string; - + @ViewChild("ref") ref?: ElementRef - constructor(public md: MarkdownService) { - + constructor(public md: MarkdownService) {} + ngAfterViewInit(): void { } } diff --git a/src/app/plan-display/plan-display.component.html b/src/app/plan-display/plan-display.component.html index 7b7b054..d44da42 100644 --- a/src/app/plan-display/plan-display.component.html +++ b/src/app/plan-display/plan-display.component.html @@ -19,8 +19,9 @@ - + + + @@ -44,8 +45,10 @@
- - + +
@@ -55,7 +58,8 @@
- + +
diff --git a/src/app/plan-display/plan-display.component.ts b/src/app/plan-display/plan-display.component.ts index c51ffbd..99ed7a3 100644 --- a/src/app/plan-display/plan-display.component.ts +++ b/src/app/plan-display/plan-display.component.ts @@ -112,7 +112,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { ngAfterViewInit(): void { if (window.innerWidth > 0) { - console.log("recalculating"); const cfgRect = this.configService.config.initialPlanWindowPosition; this.rect = { @@ -172,14 +171,12 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { } next() { - console.log("next"); this.planService.currentPlan!.next(); this.currentSlides?.next(); this.zoneSlides?.next(); } prev() { - console.log("prev"); this.planService.currentPlan!.prev(); this.currentSlides?.prev(); this.zoneSlides?.prev(); @@ -263,7 +260,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit { } onScroll(event: WheelEvent) { - console.log("event", event ); if(event.deltaY < 0) { this.prev(); } else { diff --git a/src/app/plan-display/plan-display.module.ts b/src/app/plan-display/plan-display.module.ts index 0eac398..bbd1a52 100644 --- a/src/app/plan-display/plan-display.module.ts +++ b/src/app/plan-display/plan-display.module.ts @@ -11,6 +11,7 @@ import { OverlayModule } from '@angular/cdk/overlay'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatListModule } from '@angular/material/list'; +import { ScalableComponent } from '../Scalable/scalable.component'; @NgModule({ declarations: [ PlanDisplayComponent @@ -27,7 +28,8 @@ import { MatListModule } from '@angular/material/list'; MatIconModule, MatButtonModule, MatIconModule, - MatListModule + MatListModule, + ScalableComponent ], exports: [ PlanDisplayComponent