From ab35c9e667be273f908d1cb40631bb7055865af0 Mon Sep 17 00:00:00 2001 From: isark Date: Fri, 4 Aug 2023 23:24:34 +0200 Subject: [PATCH] Decided on carousel implementation for the 'plan elements'. Still need 'content' section of current plan element --- angular.json | 13 ++++-- package.json | 1 - src/app/app.component.html | 2 +- src/app/app.module.ts | 1 + src/app/carousel/carousel.component.html | 14 ++++++ src/app/carousel/carousel.component.scss | 32 ++++++++++++++ src/app/carousel/carousel.component.ts | 44 +++++++++++++++++++ .../plan-display/plan-display.component.html | 11 ++++- .../plan-display/plan-display.component.ts | 41 +++++++++++++++-- src/app/plan-display/plan-display.module.ts | 4 +- src/app/services/overlay.service.ts | 2 + src/main.ts | 1 - yarn.lock | 2 +- 13 files changed, 152 insertions(+), 16 deletions(-) create mode 100644 src/app/carousel/carousel.component.html create mode 100644 src/app/carousel/carousel.component.scss create mode 100644 src/app/carousel/carousel.component.ts diff --git a/angular.json b/angular.json index 9d2b439..e51cc8b 100644 --- a/angular.json +++ b/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": { @@ -79,4 +84,4 @@ "cli": { "analytics": false } -} +} \ No newline at end of file diff --git a/package.json b/package.json index f1b0229..090f1cb 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.html b/src/app/app.component.html index c8ebc1f..9cd655d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,5 @@
- + matched init diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b852c89..27f099f 100644 --- a/src/app/app.module.ts +++ b/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 => { diff --git a/src/app/carousel/carousel.component.html b/src/app/carousel/carousel.component.html new file mode 100644 index 0000000..9e21fa7 --- /dev/null +++ b/src/app/carousel/carousel.component.html @@ -0,0 +1,14 @@ + + +
+
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/src/app/carousel/carousel.component.scss b/src/app/carousel/carousel.component.scss new file mode 100644 index 0000000..920c932 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts new file mode 100644 index 0000000..b5b3259 --- /dev/null +++ b/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 = new EventEmitter(); + @Input() slides?: any[]; + @ContentChild(TemplateRef) template?: TemplateRef; + 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` + } +} diff --git a/src/app/plan-display/plan-display.component.html b/src/app/plan-display/plan-display.component.html index 6aa85db..e4ef28a 100644 --- a/src/app/plan-display/plan-display.component.html +++ b/src/app/plan-display/plan-display.component.html @@ -1,8 +1,15 @@
+ [style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'" + #targetRef> - Has Plan! + + + + {{slide}} + + +
diff --git a/src/app/plan-display/plan-display.component.ts b/src/app/plan-display/plan-display.component.ts index d040ed5..c02c56e 100644 --- a/src/app/plan-display/plan-display.component.ts +++ b/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); + } + } } diff --git a/src/app/plan-display/plan-display.module.ts b/src/app/plan-display/plan-display.module.ts index 042955a..100b59d 100644 --- a/src/app/plan-display/plan-display.module.ts +++ b/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 diff --git a/src/app/services/overlay.service.ts b/src/app/services/overlay.service.ts index 64ec5b7..54f023b 100644 --- a/src/app/services/overlay.service.ts +++ b/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() { diff --git a/src/main.ts b/src/main.ts index 83f7c50..c8de310 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,4 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; - import { AppModule } from "./app/app.module"; platformBrowserDynamic() diff --git a/yarn.lock b/yarn.lock index 4ae4351..1980769 100644 --- a/yarn.lock +++ b/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==