Cleanup and made plan-window's position normalized so it will be in, relatively to width/height, the same spot

src-tauri/src/config.rs

@@ -8,10 +8,10 @@ use ts_rs::TS;
 #[derive(Serialize, Deserialize, Debug, Default, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct Rect {
-    x: i32,
-    y: i32,
-    width: u32,
-    height: u32,
+    x: f32,
+    y: f32,
+    width: f32,
+    height: f32,
 }
 
 #[cfg_attr(not(build_only), derive(TS))]

src-tauri/src/main.rs

@@ -1,16 +1,15 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-use std::{collections::HashMap, sync::Mutex};
+use std::sync::Mutex;
 
 use config::Config;
 use crossbeam::channel::Sender;
 use overlay::{Event, LockedOverlayData, Overlay};
 
-use poe_data::world_area::WorldArea;
+use poe_data::world_area::WorldAreasMap;
 use simple_logger::SimpleLogger;
 use storage::Storage;
-// use overlay::{Overlay, Manager};
 use tauri::Manager;
 
 mod config;
@@ -37,7 +36,7 @@ fn set_auto_hide(auto_hide: bool, state: tauri::State<LockedOverlayData>) {
 }
 
 #[tauri::command]
-fn load_world_areas() -> HashMap<String, WorldArea> {
+fn load_world_areas() -> WorldAreasMap {
     log::info!("Loading world areas");
     poe_data::world_area::load_world_areas_map(include_str!(
         "../../data/processed_world_areas.json"
@@ -45,12 +44,8 @@ fn load_world_areas() -> HashMap<String, WorldArea> {
 }
 
 #[tauri::command]
-fn load_config(state: tauri::State<Mutex<Storage>>) -> Config {
-    if let Ok(storage) = state.lock() {
-        log::info!("Loaded config from storage: {:?}", storage.config);
-        return storage.config.clone();
-    }
-    panic!("ERROR!")
+fn load_config(state: tauri::State<Mutex<Storage>>) -> Option<Config> {
+    Some(state.lock().ok()?.config.clone())
 }
 
 #[tauri::command]
@@ -79,7 +74,6 @@ fn main() {
             app.manage(tx);
             app.manage(Mutex::new(Storage::default()));
 
-
             app.get_window("Overlay")
                 .expect("Could not get main overlay window")
                 .open_devtools();

src-tauri/src/plan.rs

@@ -1,5 +1,4 @@
-use poe_data::world_area::WorldArea;
-use serde::{Serialize, Deserialize};
+use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize, Debug)]
 pub struct Plan {
@@ -7,8 +6,8 @@ pub struct Plan {
     current: usize,
 }
 
-#[derive(Serialize, Deserialize, Debug)]
+#[derive(Debug, Deserialize, Serialize)]
 pub struct PlanElement {
-    area: WorldArea,
+    area_key: String,
     notes: String,
 }

src/app/app.component.html

@@ -1,11 +1,7 @@
-<plan-display [plan]="false" [backgroundColor]="planColor"></plan-display>
+<div *ngIf="overlayService.visible">
+    <plan-display [plan]="false" [backgroundColor]="planColor"></plan-display>
 
-<!-- <div *ngIf="areas && areas.matcher && areas.world_areas">
-    <ul>
-        <li *ngFor="let item of areas.fuzz()">{{item}}</li>
-    </ul>
-</div> -->
+    <span *ngIf="worldAreas.matcher">matched init</span>
 
-<span *ngIf="worldAreas.matcher">matched init</span>
-
-<color-picker [initialColor]="'#00000010'" (color)="planColor = $event">Click me for color picker!</color-picker>
+    <color-picker [initialColor]="'#00000010'" (color)="planColor = $event">Click me for color picker!</color-picker>
+</div>

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { EventsService } from "./services/events.service";
 import { WorldAreaService } from "./services/world-area.service";
 import { Color } from "./color-picker/color-picker.component";
 import { OverlayService } from "./services/overlay.service";
+import { ConfigService } from "./services/config.service";
 
 @Component({
   selector: "app-root",
@@ -18,15 +19,16 @@ export class AppComponent implements OnInit {
   planColor?: Color;
 
   constructor(
-    private overlayService: OverlayService,
+    public overlayService: OverlayService,
     public worldAreas: WorldAreaService,
     private shortcuts: ShortcutService,
-    private events: EventsService
+    private events: EventsService,
+    public configService: ConfigService,
   ) { }
 
 
   ngOnInit(): void {
-
+    
   }
 
 

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

@@ -1,11 +1,9 @@
-import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { NgxMoveableComponent, OnDragEnd, OnResize, OnResizeEnd } from 'ngx-moveable';
 import { OnDrag } from 'ngx-moveable';
 import { ConfigService } from '../services/config.service';
 import { Rect } from '../models/generated/Rect';
-import { Plan } from '../models/plan';
 import { Color } from '../color-picker/color-picker.component';
-import { Subject } from 'rxjs';
 
 @Component({
   selector: 'plan-display',
@@ -13,7 +11,7 @@ import { Subject } from 'rxjs';
   styleUrls: ['./plan-display.component.scss']
 })
 export class PlanDisplayComponent implements AfterViewInit {
-  @ViewChild('targetRef') targetRef: any;
+  @ViewChild('targetRef') targetRef!: ElementRef;
   @Input() plan: boolean = false;
   @Input() backgroundColor?: Color;
   draggable: boolean = true;
@@ -34,7 +32,14 @@ export class PlanDisplayComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.rect = this.configService.config.initialPlanWindowPosition;
+    const cfgRect = this.configService.config.initialPlanWindowPosition;
+    console.log(window.innerWidth);
+    this.rect = {
+      x: cfgRect.x * window.innerWidth,
+      y: cfgRect.y * window.innerHeight,
+      width: cfgRect.width * window.innerWidth,
+      height: cfgRect.height * window.innerHeight,
+    }
     this.cdr.detectChanges();
   }
 
@@ -44,7 +49,7 @@ export class PlanDisplayComponent implements AfterViewInit {
   }
 
   onDragEnd(e: OnDragEnd) {
-    this.configService.config.initialPlanWindowPosition = this.rect!;
+    this.saveRect();
   }
 
   onResize(e: OnResize) {
@@ -56,6 +61,16 @@ export class PlanDisplayComponent implements AfterViewInit {
   }
 
   onResizeEnd(e: OnResizeEnd) {
-    this.configService.config.initialPlanWindowPosition = this.rect!;
+    this.saveRect();
+  }
+
+  saveRect() {
+    const toCfgRect = this.rect!;
+    this.configService.config.initialPlanWindowPosition = {
+      x: toCfgRect.x / window.innerWidth,
+      y: toCfgRect.y / window.innerHeight,
+      width: toCfgRect.width / window.innerWidth,
+      height: toCfgRect.height / window.innerHeight,
+    }
   }
 }

src/app/services/config.service.ts

@@ -18,6 +18,10 @@ export class ConfigService {
 
   init() {
     return invoke<Config>('load_config').then(cfg => {
+      if(!cfg) {
+        console.error("Could not load config, should generally not happen :')");
+        return;
+      }
       const _this = this;
       // Mostly to wrap setters so we can run the (debounced) sync function on any config changes!
       this.config = new Proxy(cfg, {

src/app/services/overlay.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { ShortcutService } from './shortcut.service';
 import { EventsService } from './events.service';
 import { Event } from "@tauri-apps/api/event";
@@ -17,18 +17,21 @@ class StateEvent {
 export class OverlayService {
   interactable: boolean = false;
   isBinding: boolean = false;
+  visible: boolean = false;
 
 
-  constructor(private shortcuts: ShortcutService, private events: EventsService, private configService: ConfigService) {
-    this.shortcuts.register(this.configService.config.toggleOverlay, this.onToggleOverlay);
-    this.events.listen<StateEvent>("OverlayStateChange").subscribe(this.onOverlayStateChange);
+  constructor(private shortcuts: ShortcutService, private events: EventsService, private configService: ConfigService, private zone: NgZone) {
+    this.shortcuts.register(this.configService.config.toggleOverlay, this.onToggleOverlay.bind(this));
+    this.events.listen<StateEvent>("OverlayStateChange").subscribe(this.onOverlayStateChange.bind(this));
   }
 
   onOverlayStateChange(event: Event<StateEvent>) {
-    this.interactable = event.payload.Interactable != null;
+      this.interactable = event.payload.Interactable != null;
+      if (event.payload.Hidden) {this.visible = false} else {this.visible = true};
+      console.log("visible: ", this.visible);
   }
 
-  onToggleOverlay = () => {
+  onToggleOverlay() {
     if (this.interactable) {
       this.interactable = false;
     } else {