Initial base for editor. Some tweaks

src-tauri/poe_data/src/world_area.rs

@@ -48,25 +48,12 @@ pub type AreaName = String;
 
 #[derive(Default, Debug, Clone, PartialEq, Eq, Serialize, Deserialize, Hash)]
 pub struct WorldArea {
-    #[serde(rename = "Name")]
     pub name: String,
-
-    #[serde(rename = "NamedId")]
     pub named_id: String,
-
-    #[serde(rename = "Act")]
     pub act: i64,
-
-    #[serde(rename = "_rid")]
     pub key_id: usize,
-
-    #[serde(rename = "IsTown")]
     pub is_town: bool,
-
-    #[serde(rename = "HasWaypoint")]
     pub has_waypoint: bool,
-
-    #[serde(rename = "Connections_WorldAreasKeys")]
     pub connections_world_areas_keys: Vec<i64>,
 }
 

src-tauri/src/main.rs

@@ -93,9 +93,9 @@ fn main() {
             app.manage(tx);
             app.manage(Mutex::new(Storage::default()));
 
-            app.get_window("Overlay")
+            // app.get_window("Overlay")
-                .expect("Could not get main overlay window")
+            //     .expect("Could not get main overlay window")
-                .open_devtools();
+            //     .open_devtools();
 
             Ok(())
         })

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="overlayService.visible">
+<div [ngStyle]="overlayService.visible ? {} : {'display': 'none'}">
     <plan-display *ngIf="planService.currentPlan" [backgroundColor]="planColor"></plan-display>
 
     <color-picker [initialColor]="'#00000010'" (color)="planColor = $event">Click me for color picker!</color-picker>
@@ -6,3 +6,7 @@
     <button (click)="openDialog()">Browse Plans</button>
 </div>
 
+<div [ngStyle]="overlayService.visible ? {} : {'display': 'none'}" style="height: 100%;">
+    <plan-editor></plan-editor>
+</div>
+

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { APP_INITIALIZER, NgModule } from "@angular/core";
-import { BrowserModule} from "@angular/platform-browser";
+import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule  } from "@angular/platform-browser/animations";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { AppComponent } from "./app.component";
 import { FormsModule } from "@angular/forms";
@@ -9,6 +9,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 { EditorComponent } from "./editor/editor.component";
 
 export function initializeApp(configService: ConfigService) {
   return (): Promise<any> => {
@@ -18,21 +19,22 @@ export function initializeApp(configService: ConfigService) {
 
 @NgModule({
   declarations: [
-    AppComponent, 
+    AppComponent,
-    RecordKeyChord, ColorPickerComponent
+    RecordKeyChord, ColorPickerComponent,
   ],
   imports: [
-    BrowserModule, 
+    BrowserModule,
     FormsModule,
     PlanDisplayModule,
     MatButtonModule,
     BrowserAnimationsModule,
+    EditorComponent,
   ],
   providers: [
     {
       // Makes sure we can get the config initialized ASAP as we might need it in lots of places really early.
       provide: APP_INITIALIZER,
-      useFactory: initializeApp, 
+      useFactory: initializeApp,
       deps: [ConfigService],
       multi: true
     }

src/app/editor/editor.component.html

@@ -0,0 +1,26 @@
+<div cdkDropListGroup *ngIf="areas" class="editor-container">
+    <div class="container">
+      <h2>available items</h2>
+        
+      <div
+        cdkDropList
+        [cdkDropListData]="areas"
+        class="list areas"
+        cdkDropListSortingDisabled
+        (cdkDropListDropped)="dropHandler($event)">
+        <div class="box" *ngFor="let item of areas" cdkDrag>Name: {{item.name}}<br> in act {{item.act}}</div>
+      </div>
+    </div>
+  
+    <div class="container">
+      <h2>Shopping basket</h2>
+      <div
+        cdkDropList
+        [cdkDropListData]="plan.plan"
+        class="list"
+        (cdkDropListDropped)="dropHandler($event)">
+        <div class="box" *ngFor="let item of plan.plan" cdkDrag>{{item.area_key}}</div>
+      </div>
+    </div>
+  </div>
+  

src/app/editor/editor.component.scss

@@ -0,0 +1,68 @@
+:host {
+    height: 100%;
+}
+
+.container {
+    width: 400px;
+    max-width: 100%;
+    margin: 0 25px 25px 0;
+    display: inline-block;
+    vertical-align: top;
+    flex-grow: 1 1 auto;
+  }
+  
+  .list {
+    border: solid 1px #ccc;
+    min-height: 60px;
+    background: white;
+    border-radius: 4px;
+    display: block;
+    padding-bottom: 50px;
+    overflow: auto;
+    max-height: 100%;
+  }
+  
+  .box {
+    padding: 20px 10px;
+    border-bottom: solid 1px #ccc;
+    color: rgba(0, 0, 0, 0.87);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    cursor: move;
+    background: white;
+    font-size: 14px;
+  }
+  
+  .cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+  
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+  
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+  .box:last-child {
+    border: none;
+  }
+  
+  .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+
+.editor-container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}

src/app/editor/editor.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditorComponent } from './editor.component';
+
+describe('EditorComponent', () => {
+  let component: EditorComponent;
+  let fixture: ComponentFixture<EditorComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditorComponent]
+    });
+    fixture = TestBed.createComponent(EditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/editor/editor.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDropList,
+  CdkDropListGroup,
+  moveItemInArray,
+  transferArrayItem,
+} from '@angular/cdk/drag-drop';
+
+import { CommonModule } from '@angular/common';
+import { WorldArea } from '../models/world-area';
+import { Plan, PlanElement } from '../models/plan';
+import { WorldAreaService } from '../services/world-area.service';
+
+@Component({
+  selector: 'plan-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    CdkDropListGroup,
+    CdkDropList,
+    CdkDrag
+  ],
+})
+export class EditorComponent implements OnInit {
+  areas?: WorldArea[];
+  planAreas: WorldArea[];
+  plan: Plan;
+
+  constructor(public worldAreaService: WorldAreaService) {
+    this.plan = {
+      plan: [],
+      current: 0,
+    }
+
+    this.planAreas = [];
+  }
+
+  ngOnInit(): void {
+    this.worldAreaService.getWorldAreas().subscribe(worldAreas => {
+      this.areas = [...worldAreas.values()];
+      console.log(this.areas);
+    });
+  }
+
+  dropHandler(event: CdkDragDrop<WorldArea[]> | CdkDragDrop<PlanElement[]>) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(this.plan.plan, event.previousIndex, event.currentIndex);
+    } else
+      if (this.plan && this.areas) {
+        this.plan.plan.splice(event.currentIndex, 0, this.planItemFromArea(this.areas[event.previousIndex]));
+      }
+  }
+
+  planItemFromArea(area: WorldArea): PlanElement {
+    return {
+      area_key: area.named_id,
+      notes: undefined,
+    };
+  }
+}

src/app/models/plan.ts

@@ -1,10 +1,11 @@
 import { WorldArea } from "./world-area";
 
 export interface Plan {
-    elements: PlanElement[];
+    plan: PlanElement[];
+    current: number;
 }
 
-interface PlanElement {
+export interface PlanElement {
-    area: WorldArea;
+    area_key: string;
-    note: string;
+    notes?: string;
 }

src/app/models/world-area.ts

@@ -1,9 +1,9 @@
 export interface WorldArea {
     name: string
-    namedId: string
+    named_id: string
     act: number
-    _rid: number
+    key_id: number
-    isTown: boolean
+    is_town: boolean
-    hasWaypoint: boolean
+    has_waypoint: boolean
-    connections_WorldAreasKeys: number[]
+    connections_world_areas_keys: number[]
-}
+}

src/app/services/world-area.service.ts

@@ -1,25 +1,42 @@
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import init, { Fuzzr } from 'fuzzr/pkg';
 import { WorldArea } from '../models/world-area';
 import { invoke } from '@tauri-apps/api';
-import { from } from 'rxjs';
+import { Observable, ReplaySubject, Subject, filter, from, map } from 'rxjs';
 
 
 @Injectable({
   providedIn: 'root'
 })
 export class WorldAreaService {
+  private worldAreas?: Map<string, WorldArea>;
+  private matcher?: Fuzzr;
 
-  world_areas?: Map<string, WorldArea>;
+  private worldAreasSubject = new ReplaySubject<Map<string, WorldArea>>();
-  matcher?: Fuzzr;
+  private matcherSubject = new ReplaySubject<Fuzzr>();
 
-  constructor() {
+  constructor(private zone: NgZone) {
     from(invoke<Map<string, WorldArea>>('load_world_areas')).subscribe((data) => {
-      this.world_areas = new Map(Object.entries(data));
+      this.worldAreas = new Map(Object.entries(data));
+      console.log("pre next worldareas");
+      this.zone.run(() => this.worldAreasSubject.next(this.worldAreas!));
+      console.log("post next worldareas");
       from(init("/fuzzr/pkg/fuzzr_bg.wasm")).subscribe(() => {
-        this.matcher = new Fuzzr(this.world_areas);
+        this.matcher = new Fuzzr(this.worldAreas);
+        this.zone.run(() => this.matcherSubject.next(this.matcher!));
       });
     });
+  }
+
+  getWorldAreas(): Observable<Map<string, WorldArea>> {
+    return this.worldAreasSubject.asObservable().pipe(
+      filter(worldAreas => !!worldAreas),
+    );
+  }
 
+  getMatcher(): Observable<Fuzzr> {
+    return this.matcherSubject.asObservable().pipe(
+      filter(matcher => !!matcher),
+    );
   }
 }