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

@@ -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(())
         })

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Nothing",
-    "version": "0.0.0"
+    "version": "0.0.1"
   },
   "tauri": {
     "systemTray": {

src/app/Scalable/scalable.component.html

@@ -0,0 +1,5 @@
+<div class="position-relative h-100 w-100" (resized)="onResize($event)" #container>
+    <div class="position-absolute" (resized)="onResize($event)" #element>
+        <ng-content></ng-content>
+    </div>
+</div>

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();
+  }
+}

src/app/carousel/carousel.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="template && slides">
-    <div class="carousel">
+    <div class="carousel" (resized)="carouselResize($event)">
         <div class="window" [style.translate]="translation()" #carouselWindow
             [@direction]="{value: this.animation, params: {directionTime: directionTime}}" [ngStyle]="style()"
             (@direction.done)="onAnimationEnd($event)" (@direction.start)="onAnimationStart($event)">

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<T> implements OnInit, AfterViewInit {
+
   @Output() afterInitSelf: EventEmitter<CarouselComponent<T>> = new EventEmitter<CarouselComponent<T>>();
   @Output() changedIndex: EventEmitter<number> = new EventEmitter<number>();
   @Input() slides?: T[];
@@ -51,13 +54,15 @@ export class CarouselComponent<T> implements OnInit, AfterViewInit {
   directionTime: number = 0;
   @Input() numVisible: number = 1;
 
+  containerDirectionLength: number = 0;
+
   private debouncedOnchange: Subject<void> = new Subject<void>();
 
 
   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<T> 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<T> 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<T> 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<T> 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<T> 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<T> 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<T> 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 {

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 {
   }
 }
 

src/app/plan-display/plan-display.component.html

@@ -19,8 +19,9 @@
                 <carousel [initIndex]="planService.currentPlan.current" [slides]="planService.currentPlan.plan"
                     (afterInitSelf)="registerCurrentSlides($event)">
                     <ng-template let-slide>
-                        <notes [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide
-                            (resized)="onResizeNote(noteSlide)"></notes>
+                        <scalable>
+                            <notes class="p-1" [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide></notes>
+                        </scalable>
                     </ng-template>
                 </carousel>
 
@@ -44,8 +45,10 @@
             <div class="row row-cols-2">
                 <div class="planChooser col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                     <div>
-                        <button class="col-xs-6" mat-raised-button color="accent" (click)="openDialog()">Browse Plans</button>
-                        <button class="col-xs-6" mat-raised-button color="accent" (click)="loadBasePlan()">Load base plan</button>
+                        <button class="col-xs-6" mat-raised-button color="accent" (click)="openDialog()">Browse
+                            Plans</button>
+                        <button class="col-xs-6" mat-raised-button color="accent" (click)="loadBasePlan()">Load base
+                            plan</button>
                     </div>
                     <div class="enumerated">
                         <mat-list role="list">
@@ -55,7 +58,8 @@
 
                     </div>
                 </div>
-                <settings class="col-xs-6 col-sm-6 offset-md-3 col-md-5 offset-lg-5 col-lg-4 offset-xl-5 col-xl-4"></settings>
+                <settings class="col-xs-6 col-sm-6 offset-md-3 col-md-5 offset-lg-5 col-lg-4 offset-xl-5 col-xl-4">
+                </settings>
             </div>
             <button mat-icon-button class="exit" *ngIf="planService.currentPlan"
                 (click)="settingsOpen = false"><span>+</span></button>

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 {

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