From 1dde4e58072d3c1abd083c9e3716fb59a6975d5e Mon Sep 17 00:00:00 2001
From: "Kyle J. Kemp" <kyle@seiyria.com>
Date: Mon, 9 Sep 2024 08:41:59 -0500
Subject: [PATCH] swap traits when using the editor if it exists in the tree to
 make it more usable.

---
 .../input-trait/input-trait.component.html    |  4 +-
 .../trait-trees-editor.component.html         | 11 +++--
 .../trait-trees-editor.component.ts           | 40 +++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/components/input-trait/input-trait.component.html b/src/app/shared/components/input-trait/input-trait.component.html
index c6aace4..122f68b 100644
--- a/src/app/shared/components/input-trait/input-trait.component.html
+++ b/src/app/shared/components/input-trait/input-trait.component.html
@@ -1,6 +1,6 @@
 <div class="relative">
   <ng-select class="form-control" [items]="values()" [(ngModel)]="trait" bindLabel="value" bindValue="value"
-    placeholder="Select trait..." (change)="change.emit($event)">
+    placeholder="Select trait..." (change)="change.emit($event?.value)">
 
     <ng-template ng-option-tmp let-item="item">
       <div class="relative">
@@ -14,4 +14,4 @@
   </ng-select>
 
   <app-input-floating-label>{{ label() }}</app-input-floating-label>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.html b/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.html
index a717e36..f88fd6e 100644
--- a/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.html
+++ b/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.html
@@ -88,11 +88,13 @@
 }
 
 @default {
-@let tree = editingData.data.trees[editingData.data.treeOrder[activeTab() - 1]].tree;
+@let treeName = editingData.data.treeOrder[activeTab() - 1];
+@let treeTab = editingData.data.trees[treeName];
+@let tree = treeTab.tree;
 
-@for(row of tree; track $index) {
+@for(row of tree; let rowIndex = $index; track $index) {
 <div class="flex flex-row">
-  @for(col of tree[$index].traits; track $index + ' ' + col.name) {
+  @for(col of tree[$index].traits; let colIndex = $index;track $index + ' ' + col.name) {
   <div class="flex-1">
     <div class="flex flex-col p-4">
       <div class="flex items-center justify-center">
@@ -109,7 +111,8 @@
       </div>
 
       <div class="form-row">
-        <app-input-trait [(trait)]="col.name" label="Trait" [allowSpells]="true"></app-input-trait>
+        <app-input-trait [trait]="col.name" label="Trait" [allowSpells]="true"
+          (change)="changeTrait($event, tree, treeName, rowIndex, colIndex)"></app-input-trait>
       </div>
 
       <div class="form-row">
diff --git a/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.ts b/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.ts
index 7dd359a..2fdd139 100644
--- a/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.ts
+++ b/src/app/tabs/trait-trees/trait-trees-editor/trait-trees-editor.component.ts
@@ -157,6 +157,46 @@ export class TraitTreesEditorComponent
       );
   }
 
+  changeTrait(
+    $event: string | undefined,
+    tree: ITraitTreeRow[],
+    treeName: string,
+    row: number,
+    col: number
+  ): void {
+    this.editing.update(() => {
+      const newTree = structuredClone(this.editing());
+
+      let oldTraitValue: ITraitTreeRowTrait | undefined;
+      let oldTraitRow = -1;
+      let oldTraitCol = -1;
+
+      newTree.data.trees[treeName].tree.forEach((traitRow, ri) => {
+        traitRow.traits.forEach((trait, ci) => {
+          if (trait.name !== $event || (ci === col && ri === row)) return;
+
+          oldTraitValue = trait;
+          oldTraitCol = ci;
+          oldTraitRow = ri;
+        });
+      });
+
+      if (oldTraitValue) {
+        const curTraitValue = tree[row].traits[col];
+
+        newTree.data.trees[treeName].tree[row].traits[col] = oldTraitValue;
+        newTree.data.trees[treeName].tree[oldTraitRow].traits[oldTraitCol] =
+          curTraitValue;
+      } else {
+        newTree.data.trees[treeName].tree[row].traits[col].name = $event ?? '';
+        newTree.data.trees[treeName].tree[row].traits[col].maxLevel = 1;
+        newTree.data.trees[treeName].tree[row].traits[col].requires = '';
+      }
+
+      return newTree;
+    });
+  }
+
   public doSave() {
     const item = this.editing();