Decided on carousel implementation for the 'plan elements'. Still need 'content' section of current plan element

angular.json

@@ -15,7 +15,9 @@
             "outputPath": "dist/Nothing",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -26,8 +28,11 @@
                 "output": "/fuzzr"
               }
             ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -20,7 +20,6 @@
     "@angular/platform-browser": "^16.1.4",
     "@angular/platform-browser-dynamic": "^16.1.4",
     "@tauri-apps/api": "^1.2.0",
-    "copy-webpack-plugin": "^11.0.0",
     "fuzzr": "github:isark2/fuzzr#v0.3.1",
     "ngx-moveable": "^0.48.1",
     "rxjs": "~7.8.1",

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="overlayService.visible">
-    <plan-display [plan]="false" [backgroundColor]="planColor"></plan-display>
+    <plan-display [plan]="true" [backgroundColor]="planColor"></plan-display>
 
     <span *ngIf="worldAreas.matcher">matched init</span>
 

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { PlanDisplayModule } from "./plan-display/plan-display.module";
 import { ConfigService } from "./services/config.service";
 import { ColorPickerComponent } from './color-picker/color-picker.component';
 import { MatButtonModule } from "@angular/material/button";
+import { CarouselComponent } from './carousel/carousel.component';
 
 export function initializeApp(configService: ConfigService) {
   return (): Promise<any> => {

src/app/carousel/carousel.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf="template && slides">
+
+    <div class="carousel">
+        <div class="window" [style.translate]="translation()">
+            <ng-container *ngFor="let slide of slides">
+                <div class="slide"><ng-container
+                        *ngTemplateOutlet="template!; context: { $implicit: slide }"></ng-container></div>
+            </ng-container>
+        </div>
+    </div>
+    <button (click)="prev()">&lt;=prev</button>
+    <button (click)="next()">next&gt;</button>
+
+</ng-container>

src/app/carousel/carousel.component.scss

@@ -0,0 +1,32 @@
+:host {
+    width: 100%;
+    overflow: hidden;
+}
+
+.carousel {
+    display: flex;
+    flex-direction: row;
+}
+
+.slide {
+    width: 33.333%;
+    min-width: 33.333%;
+    max-width: 33.333%;
+    background-color: green;
+}
+
+.window {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    transition: 1s;
+}
+
+.current {
+    background-color: magenta;
+}
+
+.transparent {
+    opacity: 0;
+}

src/app/carousel/carousel.component.ts

@@ -0,0 +1,44 @@
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@Component({
+  selector: 'carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss'],
+  standalone: true,
+  imports: [
+    BrowserModule
+  ],
+  animations: [
+  ]
+})
+export class CarouselComponent implements OnInit {
+  @Output() afterInitSelf: EventEmitter<CarouselComponent> = new EventEmitter<CarouselComponent>();
+  @Input() slides?: any[];
+  @ContentChild(TemplateRef) template?: TemplateRef<any>;
+  current: number = 0;
+
+  
+  ngOnInit(): void {
+    this.afterInitSelf.next(this);
+  }
+
+  next(): void {
+    if (this.slides && this.current + 1 < this.slides?.length) {
+      console.log("incremented");
+      this.current += 1;
+    }
+  }
+
+  prev(): void {
+    console.log("decremented");
+    if (this.current - 1 >= 0) {
+      this.current -= 1;
+    }
+  }
+
+  translation() {
+    let num = (this.current - 1) * (-1/3) * 100;
+    return `${num}% 0`
+  }
+}

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

@@ -1,8 +1,15 @@
 <ng-container *ngIf="rect">
     <div class="target" [style.background-color]="backgroundColor ? backgroundColor.rgbaString : 'rgba(0, 0, 0, 0.1)'"
-        [style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'" #targetRef>
+        [style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'"
+        #targetRef>
         <ng-container *ngIf="plan">
-            Has Plan!
+            
+            <carousel [slides]="slides" (afterInitSelf)="registerCarousel($event)">
+                <ng-template let-slide>
+                    {{slide}}
+                </ng-template>
+            </carousel>
+
         </ng-container>
     </div>
 

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

@@ -4,20 +4,38 @@ import { OnDrag } from 'ngx-moveable';
 import { ConfigService } from '../services/config.service';
 import { Rect } from '../models/generated/Rect';
 import { Color } from '../color-picker/color-picker.component';
+import { ShortcutService } from '../services/shortcut.service';
+import { CarouselComponent } from '../carousel/carousel.component';
 
 @Component({
   selector: 'plan-display',
   templateUrl: './plan-display.component.html',
   styleUrls: ['./plan-display.component.scss']
 })
-export class PlanDisplayComponent implements AfterViewInit {
-  @ViewChild('targetRef') targetRef!: ElementRef;
+export class PlanDisplayComponent implements AfterViewInit, OnInit {
   @Input() plan: boolean = false;
   @Input() backgroundColor?: Color;
   draggable: boolean = true;
   rect?: Rect;
 
-  constructor(private configService: ConfigService, private cdr: ChangeDetectorRef) { }
+  slides!: number[];
+  slideIndex: number = 0;
+  carouselComponent?: CarouselComponent;
+
+
+  constructor(private configService: ConfigService, private cdr: ChangeDetectorRef, private shortcut: ShortcutService) {
+    this.slides = [];
+    for(let i = 0; i < 100; i++) {
+      this.slides.push(i);
+    }
+  }
+
+  ngOnInit() {
+  }
+
+  abs(v: number) {
+    return Math.abs(v);
+  }
 
   transform() {
     return `translate(${this.rect!.x}px, ${this.rect!.y}px)`;
@@ -40,7 +58,8 @@ export class PlanDisplayComponent implements AfterViewInit {
       width: cfgRect.width * window.innerWidth,
       height: cfgRect.height * window.innerHeight,
     }
-    this.cdr.detectChanges();
+
+    setTimeout(() => this.cdr.detectChanges(), 0);
   }
 
   onDrag(e: OnDrag) {
@@ -73,4 +92,18 @@ export class PlanDisplayComponent implements AfterViewInit {
       height: toCfgRect.height / window.innerHeight,
     }
   }
+
+  registerCarousel(carousel: CarouselComponent) {
+    this.carouselComponent = carousel
+    if (this.carouselComponent) {
+      this.shortcut.register("F7", () => {
+        this.carouselComponent?.prev();
+      });
+      this.shortcut.register("F8", () => {
+        this.carouselComponent?.next();
+      });
+    } else {
+      console.log("no carousel", this.carouselComponent);
+    }
+  }
 }

src/app/plan-display/plan-display.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgxMoveableComponent } from 'ngx-moveable';
 import { PlanDisplayComponent } from './plan-display.component';
-import {MatCardModule} from '@angular/material/card'; 
+import { CarouselComponent } from '../carousel/carousel.component';
 
 
 @NgModule({
@@ -12,7 +12,7 @@ import {MatCardModule} from '@angular/material/card';
   imports: [
     CommonModule,
     NgxMoveableComponent,
-    MatCardModule,
+    CarouselComponent
   ],
   exports: [
     PlanDisplayComponent

src/app/services/overlay.service.ts

@@ -29,6 +29,8 @@ export class OverlayService {
       this.interactable = event.payload.Interactable != null;
       if (event.payload.Hidden) {this.visible = false} else {this.visible = true};
       console.log("visible: ", this.visible);
+    invoke("set_interactable", { interactable: true }).then();
+
   }
 
   onToggleOverlay() {

src/main.ts

@@ -1,5 +1,4 @@
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-
 import { AppModule } from "./app/app.module";
 
 platformBrowserDynamic()

yarn.lock

@@ -3419,7 +3419,7 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.14.1"
 
-copy-webpack-plugin@11.0.0, copy-webpack-plugin@^11.0.0:
+copy-webpack-plugin@11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"
   integrity sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==