Some improvements around configuration

src-tauri/src/config.rs

@@ -24,36 +24,85 @@ pub struct Rect {
 #[derive(Serialize, Deserialize, Debug, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct Config {
+    #[serde(default)]
     pub initial_plan_window_position: Rect,
+    #[serde(default)]
     pub hide_on_unfocus: bool,
-
+    #[serde(default)]
     pub toggle_overlay: String,
+    #[serde(default)]
     pub prev: String,
+    #[serde(default)]
     pub next: String,
-
+    #[serde(default)]
     pub plan_bg: String,
+    #[serde(default)]
     pub backdrop_bg: String,
-
+    #[serde(default)]
+    pub note_default_fg: String,
+    #[serde(default)]
     pub poe_client_log_path: Option<PathBuf>,
 }
 
 impl Default for Config {
     fn default() -> Self {
         Self {
-            initial_plan_window_position: Default::default(),
-            hide_on_unfocus: true,
-            toggle_overlay: "F6".into(),
-            prev: "F7".into(),
-            next: "F8".into(),
-            plan_bg: "#00000010".to_string(),
-            backdrop_bg: "#00000030".to_string(),
+            initial_plan_window_position: Self::default_initial_plan_window_position(),
+            hide_on_unfocus: Self::default_hide_on_unfocus(),
+            toggle_overlay: Self::default_toggle_overlay(),
+            prev: Self::default_prev(),
+            next: Self::default_next(),
+            plan_bg: Self::default_plan_bg(),
+            backdrop_bg: Self::default_backdrop_bg(),
             #[cfg(build_only)]
-            poe_client_log_path: poe_reader::get_poe_path(),
+            poe_client_log_path: Self::default_poe_client_log_path(),
             #[cfg(not(build_only))]
-            poe_client_log_path: None,
-
+            poe_client_log_path: Self::default_poe_client_log_path(),
+            note_default_fg: Self::default_note_default_fg(),
         }
     }
 }
 
+impl Config {
+    fn default_initial_plan_window_position() -> Rect {
+        Default::default()
+    }
+
+    fn default_hide_on_unfocus() -> bool {
+        true
+    }
+
+    fn default_toggle_overlay() -> String {
+        "F6".into()
+    }
+
+    fn default_prev() -> String {
+        "ArrowLeft".into()
+    }
+
+    fn default_next() -> String {
+        "ArrowRight".into()
+    }
+
+    fn default_plan_bg() -> String {
+        "#00000010".to_string()
+    }
+
+    fn default_backdrop_bg() -> String {
+        "#00000030".to_string()
+    }
+
+    #[cfg(build_only)]
+    fn default_poe_client_log_path() -> Option<PathBuf> {
+        poe_reader::get_poe_path()
+    }
+            #[cfg(not(build_only))]
+    fn default_poe_client_log_path() -> Option<PathBuf> {
+        None
+    }
+
+    fn default_note_default_fg() -> String {
+        "#bfbfbfff".to_string()
+    }
+}
 

src-tauri/src/main.rs

@@ -95,6 +95,12 @@ fn load_stored_plans() -> Vec<String> {
     Storage::enumerate_plans()
 }
 
+#[tauri::command]
+fn base_plan() -> Plan {
+    const BASE_PLAN_STRING: &str = include_str!("../../data/base_plan.json");
+    serde_json::from_str(BASE_PLAN_STRING).expect("could not load base_plan")
+}
+
 fn main() {
     SimpleLogger::new()
         .with_module_level("underlayer", log::LevelFilter::Info)
@@ -143,7 +149,8 @@ fn main() {
             set_config,
             load_plan,
             load_stored_plans,
-            save_plan
+            save_plan,
+            base_plan
         ])
         .system_tray(system_tray)
         .on_system_tray_event(|app, event| match event {
@@ -154,6 +161,7 @@ fn main() {
                 "editor" | "settings" => {
                     if let Some(window) = app.get_window("Normal") {
                         window.show().ok();
+                        window.emit_to("Normal", "loadTab", id);
                     }
                 }
                 _ => {}

src/app/app.component.html

@@ -1,5 +1,8 @@
 <div *ngIf="!overlayService.isOverlay" class="main-container standalone">
-    <mat-tab-group mat-stretch-tabs="false" class="tabs">
+    <mat-tab-group 
+    [selectedIndex]="selected.value"
+               (selectedIndexChange)="selected.setValue($event)"
+    mat-stretch-tabs="false" class="tabs">
         <mat-tab>
             <ng-template mat-tab-label>
                 <span class="tab-label">Settings</span>

src/app/app.component.ts

@@ -9,6 +9,7 @@ import { ConfigService } from "./services/config.service";
 import { PlanService } from "./services/plan.service";
 import { from } from "rxjs";
 import { appWindow } from "@tauri-apps/api/window"
+import { FormControl } from "@angular/forms";
 
 @Component({
   selector: "app-root",
@@ -19,21 +20,28 @@ export class AppComponent implements OnInit {
   auto_hide: boolean = true;
   interactable: boolean = false;
   isBinding: boolean = false;
-  isOverlay: boolean;
   overlayShowSettings: boolean = false;
   hasAttachedOnce: boolean = false;
+  
+  selected = new FormControl(0);
 
   constructor(
     public overlayService: OverlayService,
     public worldAreas: WorldAreaService,
     public planService: PlanService,
     public configService: ConfigService,
-    private zone: NgZone,
-  ) { 
-    this.isOverlay = appWindow.label === "Overlay";
+    private events: EventsService,
+  ) {
+    this.events.listen<String>("loadTab").subscribe(event => {
+      if (event.payload === "editor") {
+        this.selected.setValue(1);
+      } else {
+        this.selected.setValue(0);
+      }
+    })
   }
 
   ngOnInit(): void {
-
+    
   }
 }

src/app/carousel/carousel.component.ts

@@ -129,7 +129,6 @@ export class CarouselComponent<T> implements OnInit, AfterViewInit {
     if (this.slides && this.current + 1 < this.slides?.length) {
       this.current += 1;
           this.changedIndex.emit(this.current);
-      console.log("numextra", this.numExtraNext());
       if (this.current + this.numExtraNext() < this.slides.length) {
         if (!this.visibleSlides?.find(e => e.index == this.current + this.numExtraNext() )) {
           this.visibleSlides?.push({

src/app/editor/editor.component.html

@@ -1,5 +1,9 @@
+<div class="buttons">
 <button (click)="save()">Save plan</button>
 <button (click)="openPlan()">Open plan for editing</button>
+<button (click)="loadBasePlan()">Load base plan preset</button>
+</div>
+
 <div cdkDropListGroup *ngIf="areas" class="editor-container">
   <div class="container">
     Area filter<input type="text" [(ngModel)]="areaSearchString">

src/app/editor/editor.component.scss

@@ -42,12 +42,19 @@
   font-size: 14px;
   padding: 20px 20px 20px 5px;
   width: 100%;
-
+  overflow-x: hidden;
   &:hover {
     background-color: rgba(0, 0, 0, 0.1);
   }
 }
 
+.buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  justify-content: center;
+}
+
 .delete {
   display: flex;
   justify-content: center;
@@ -58,7 +65,7 @@
   color: darken(red, 10%);
   position: absolute;
   top: 0px;
-  right: 0px;
+  right: 13px;
   width: 15px;
   height: 15px;
   overflow: visible;
@@ -68,6 +75,12 @@
   }
 }
 
+.notes {
+  position: absolute;
+  right: 65px;
+
+}
+
 
 .cdk-drag-preview {
   box-sizing: border-box;
@@ -99,4 +112,5 @@
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
+  justify-content: center;
 }

src/app/editor/editor.component.ts

@@ -122,7 +122,6 @@ export class EditorComponent implements OnInit {
   }
 
   remove(item: PlanElement) {
-    console.log("delete");
     this.plan.plan.splice(this.planIndexOf(item), 1);
   }
 
@@ -226,8 +225,14 @@ export class EditorComponent implements OnInit {
     });
   }
 
+  loadBasePlan() {
+    this.planService.loadBasePlan().subscribe(plan => {
+      this.plan.plan.length = 0;
+      plan.plan.forEach(p => this.plan.plan.push(p));
+    })
+  }
+
   addNote(event: MouseEvent, item: PlanElement) {
-    console.log("right click", event, item);
     event.preventDefault();
 
     const dialogRef = this.dialog.open(EditNotesComponentDialog, {

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

@@ -10,32 +10,32 @@
                 <carousel [numVisible]="3" [slides]="planService.currentPlan.plan"
                     (afterInitSelf)="registerZoneSlides($event)">
                     <ng-template let-slide let-index="index">
-                        <div class="zone-slide" [style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">{{worldAreaMap!.get(slide.area_key)!.name}}<div class="waypoint-text" *ngIf="hasWaypoint(slide.area_key)">(W)</div></div>
-                        
+                        <div class="zone-slide" [style.color]="configService.config.noteDefaultFg" [style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">{{worldAreaMap!.get(slide.area_key)!.name}}<div class="waypoint-text" *ngIf="hasWaypoint(slide.area_key)">(W)</div></div>
                     </ng-template>
                 </carousel>
                 <carousel [slides]="planService.currentPlan.plan" (afterInitSelf)="registerCurrentSlides($event)">
                     <ng-template let-slide>
-                        <notes [note]="slide.notes" #noteSlide (resized)="onResizeNote(noteSlide)"></notes>
+                        <notes [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide (resized)="onResizeNote(noteSlide)"></notes>
                     </ng-template>
                 </carousel>
 
             </ng-container>
-            <button mat-icon-button *ngIf="overlayService.interactable" class="settings-button" (click)="settingsOpen = !settingsOpen"><img src="assets/material-settings.svg"></button>
+            <button mat-icon-button *ngIf="overlayService.interactable" class="settings-button" (click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img src="assets/material-settings.svg"></button>
         </div>
 
-        <ngx-moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable" [resizable]="true && overlayService.interactable" (drag)="onDrag($event)"
+        <ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable" [resizable]="true && overlayService.interactable" (drag)="onDrag($event)"
             (resize)="onResize($event)" (dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)"
             [bounds]="bounds" [snappable]="true" [style.visibility]="overlayService.interactable ? 'visible' : 'hidden'"></ngx-moveable>
 
     </ng-container>
 
     <ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable"
-        [cdkConnectedOverlayOrigin]="globalTopLeft">
+        [cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
         <div class="overlay">
             <div class="planChooser">
-                <div [ngStyle]="planService.currentPlan ? {'display': 'none'} : {}">
+                <div>
                     <button mat-raised-button (click)="openDialog()">Browse Plans</button>
+                    <button mat-raised-button (click)="loadBasePlan()">Load base plan</button>
                 </div>
             </div>
             <settings></settings>

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

@@ -36,6 +36,7 @@
         box-shadow: 0 0px 15px rgba(25, 255, 255, 0.5);
         transition: opacity 0.3s ease-in-out;
         opacity: 0;
+        pointer-events: none;
 
         content: "";
         position: absolute;

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

@@ -30,6 +30,9 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
   rect?: Rect;
   bounds: any = { "left": 0, "top": 0, "right": 0, "bottom": 0, "position": "css" };
 
+
+  @ViewChild("moveable") moveable?: NgxMoveableComponent;
+
   // slides: PlanElement[] = [];
   slideIndex: number = 0;
   zoneSlides?: CarouselComponent<PlanElement>;
@@ -39,8 +42,12 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
   init: boolean = false;
   hasAttachedOnce: boolean = false;
 
-  constructor(private events: EventsService, private configService: ConfigService, private cdr: ChangeDetectorRef, private shortcut: ShortcutService, public planService: PlanService, public worldAreaService: WorldAreaService, public overlayService: OverlayService, private zone: NgZone) {
-    window.addEventListener("resize", this.windowInitHandler.bind(this));
+  constructor(private events: EventsService, public configService: ConfigService, private cdr: ChangeDetectorRef, private shortcut: ShortcutService, public planService: PlanService, public worldAreaService: WorldAreaService, public overlayService: OverlayService, private zone: NgZone) {
+    window.addEventListener("resize", () => {
+      this.zone.run(() => {
+        this.windowInitHandler()
+      })
+    });
 
     // const test = this.events.listen<StateEvent>("OverlayStateChange").subscribe(event => {
     //   if (!this.hasAttachedOnce) {
@@ -53,7 +60,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
     // });
 
     appWindow.listen("entered", (entered) => {
-      console.log("entered", entered);
       if (this.planService.currentPlan) {
         const current = this.planService.currentPlan.current;
         const length = this.planService.currentPlan.plan.length;
@@ -82,7 +88,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
   }
 
   transform() {
-    console.log("transform:", `translate(${this.rect!.x}px, ${this.rect!.y}px)`, "rect", this.rect);
     return `translate(${this.rect!.x}px, ${this.rect!.y}px)`;
   }
 
@@ -99,23 +104,21 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
       key = this.planService.currentPlan!.plan[this.planService.currentPlan!.current].area_key;
     }
     const world_area = this.worldAreaMap?.get(key);
-    console.log("waypoint: ", world_area!.has_waypoint);
     return world_area!.has_waypoint;
   }
 
   ngAfterViewInit(): void {
     if (window.innerWidth > 0) {
+      console.log("recalculating");
       const cfgRect = this.configService.config.initialPlanWindowPosition;
-      console.log("cfgrect", cfgRect);
-      console.log("window res", window.innerWidth);
-      console.log("window res", window.innerHeight);
+
       this.rect = {
         x: cfgRect.x * window.innerWidth,
         y: cfgRect.y * window.innerHeight,
         width: cfgRect.width * window.innerWidth,
         height: cfgRect.height * window.innerHeight,
       }
-      console.log("rect", this.rect);
+      this.moveable?.updateRect();
 
       setTimeout(() => this.cdr.detectChanges(), 0);
       this.init = true;
@@ -153,7 +156,6 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
 
   registerZoneSlides(carousel: CarouselComponent<PlanElement>) {
     this.zoneSlides = carousel;
-    console.log("zone slides");
   }
   registerCurrentSlides(carousel: CarouselComponent<PlanElement>) {
     this.currentSlides = carousel;
@@ -202,6 +204,11 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
     noteSlide.ref.nativeElement.style.transform = `scale(1, ${scale})`;
   }
 
+  settingsClick(event: any) {
+    this.settingsOpen = !this.settingsOpen; 
+    event.stopPropagation();
+  }
+
   openDialog() {
     from(open({
       multiple: false,
@@ -221,4 +228,10 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
       }
     });
   }
+
+  loadBasePlan() {
+    this.planService.loadBasePlan().subscribe(plan => {
+      this.planService.currentPlan = plan;
+    })
+  }
 }

src/app/services/config.service.ts

@@ -18,7 +18,6 @@ export class ConfigService {
     // Let's do some premature optimization! Now we can do lots of config changes quickly from FE without as many sync calls :D
     this.syncSubject.pipe(debounceTime(100)).subscribe(() => this.underlyingSync());
     events.listen<Config>("config").subscribe(cfg => {
-      console.log("Got new config");
       Object.assign(this.cfg, cfg.payload);
       // this.cfg = cfg.payload;
     }

src/app/services/plan.service.ts

@@ -29,12 +29,15 @@ export class PlanService {
     );
   }
 
+  loadBasePlan() {
+    return from(invoke<Plan>('base_plan'));
+  }
+
   savePlan(path: string, plan: Plan) {
     plan.plan.forEach(elem => {
       if (!elem.notes) { elem.notes = "" }
     })
     return from(invoke<boolean>('save_plan', { path, plan })).subscribe(status => {
-      console.log("save plan", status);
     });
   }
 

src/app/services/shortcut.service.ts

@@ -31,7 +31,6 @@ export class ShortcutService {
       {
         error: (_err) => {
           if (prevShortcut) {
-            console.log("Got error during binding, rebinding previous");
             this.register(prevShortcut, handler);
           }
           return EMPTY;

src/app/settings/settings.component.html

@@ -1,15 +1,19 @@
 <div class="settings">
     <div class="colors">
-    <color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
-        background</color-picker>
-    <color-picker [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
-        backdrop color</color-picker>
+        <color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
+            background</color-picker>
+        <color-picker [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
+            backdrop color</color-picker>
+        <color-picker [setColor]="configService.config.noteDefaultFg" (color)="onNoteColorChange($event)">Overlay default font color</color-picker>
     </div>
     <div class="checkboxes">
-        <mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'" [(ngModel)]="configService.config.hideOnUnfocus">Auto hide on unfocus</mat-slide-toggle>
+        <mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'"
+            [(ngModel)]="configService.config.hideOnUnfocus">Auto hide on unfocus</mat-slide-toggle>
     </div>
 
-    <button mat-raised-button (click)="rebindOverlayToggle()">Overlay toggle shortcut: {{configService.config.toggleOverlay}}</button>
-    <button mat-raised-button (click)="rebindPreviousZone()">Previous zone shortcut: {{configService.config.prev}}</button>
+    <button mat-raised-button (click)="rebindOverlayToggle()">Overlay toggle shortcut:
+        {{configService.config.toggleOverlay}}</button>
+    <button mat-raised-button (click)="rebindPreviousZone()">Previous zone shortcut:
+        {{configService.config.prev}}</button>
     <button mat-raised-button (click)="rebindNextZone()">Next zone shortcut: {{configService.config.next}}</button>
 </div>

src/app/settings/settings.component.ts

@@ -45,6 +45,12 @@ export class SettingsComponent {
     this.zone.run(() => this.configService.config.backdropBg = color.rgbaString);
   }
 
+  onNoteColorChange(color: Color) {
+    this.zone.run(() => this.configService.config.noteDefaultFg = color.rgbaString);
+  }
+
+  
+
   rebindOverlayToggle() {
     const dialogRef = this.dialog.open(BindDialog, {
       data: {chord: this.configService.config.toggleOverlay},

src/styles.scss

@@ -43,7 +43,6 @@ div.picker_wrapper.popup {
   flex-grow: 1;
 }
 
-
 .mat-primary-on-dark {
   --mdc-theme-text-primary-on-background: white;
 }