parent
2e3e4bb4ca
commit
c754789ffb
@ -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>
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
import { WorldArea } from "./world-area";
|
||||
|
||||
export interface Plan {
|
||||
elements: PlanElement[];
|
||||
plan: PlanElement[];
|
||||
current: number;
|
||||
}
|
||||
|
||||
interface PlanElement {
|
||||
area: WorldArea;
|
||||
note: string;
|
||||
export interface PlanElement {
|
||||
area_key: string;
|
||||
notes?: string;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
export interface WorldArea {
|
||||
name: string
|
||||
namedId: string
|
||||
named_id: string
|
||||
act: number
|
||||
_rid: number
|
||||
isTown: boolean
|
||||
hasWaypoint: boolean
|
||||
connections_WorldAreasKeys: number[]
|
||||
key_id: number
|
||||
is_town: boolean
|
||||
has_waypoint: boolean
|
||||
connections_world_areas_keys: number[]
|
||||
}
|
||||
@ -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>;
|
||||
matcher?: Fuzzr;
|
||||
private worldAreasSubject = new ReplaySubject<Map<string, WorldArea>>();
|
||||
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),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue