fix: fixes issue where clicking a creature name will reset its name (c…

…lose #24)

src/svelte/App.svelte

@@ -53,6 +53,7 @@
 
     let addNew = false;
     export let addNewAsync = false;
+    let editCreature: Creature = null;
     const addButton = (node: HTMLElement) => {
         new ExtraButtonComponent(node)
             .setTooltip("Add Creature")
@@ -125,6 +126,9 @@
         on:tag={(evt) => {
             updatingStatus = evt.detail;
         }}
+        on:edit={(evt) => {
+            editCreature = evt.detail;
+        }}
     />
     {#if plugin.data.displayDifficulty}
         <Difficulty {creatures} />
@@ -205,11 +209,18 @@
         <LoadEncounter on:cancel={() => (loading = false)} />
     {:else}
         <div class="add-creature-container">
-            {#if addNew || addNewAsync}
+            {#if editCreature || addNew || addNewAsync}
                 <Create
+                    editing={editCreature != null}
+                    name={editCreature?.name}
+                    hp={`${editCreature?.hp}`}
+                    initiative={editCreature?.initiative}
+                    modifier={editCreature?.modifier}
+                    ac={`${editCreature?.ac}`}
                     on:cancel={() => {
                         addNew = false;
                         addNewAsync = false;
+                        editCreature = null;
                         dispatch("cancel-add-new-async");
                     }}
                     on:save={(evt) => {
@@ -229,6 +240,12 @@
                         );
                         if (addNewAsync) {
                             dispatch("add-new-async", newCreature);
+                        } else if (editCreature) {
+                            editCreature.name = creature.name;
+                            editCreature.ac = creature.ac;
+                            editCreature.initiative = creature.initiative;
+                            editCreature.modifier = creature.modifier;
+                            view.updateCreature(editCreature, {name: creature.name});
                         } else {
                             const number = Math.max(
                                 isNaN(creature.number) ? 1 : creature.number,
@@ -242,6 +259,7 @@
                         }
                         addNew = false;
                         addNewAsync = false;
+                        editCreature = null;
                     }}
                 />
             {:else}

src/svelte/Create.svelte

@@ -12,11 +12,12 @@
 
     let view = getContext<TrackerView>("view");
 
-    let name: string;
-    let hp: string;
-    let initiative: number;
-    let ac: string;
-    let modifier: number;
+    export let editing = false;
+    export let name: string = null;
+    export let hp: string = null;
+    export let initiative: number = null;
+    export let ac: string = null;
+    export let modifier: number = null;
     let xp: number;
     let player: boolean;
     let level: number;
@@ -67,7 +68,6 @@
                     Math.floor(Math.random() * 19 + 1) + (modifier ?? 0);
             });
     };
-
     const openModal = (nameInput: HTMLInputElement) => {
         const modal = new SRDMonsterSuggestionModal(view.plugin, nameInput);
         modal.onClose = async () => {
@@ -145,16 +145,18 @@
         />
         <div class="dice" use:diceButton />
     </div>
-    <div class="amount">
-        <label for="add-init">Amount</label>
-        <input
-            bind:value={number}
-            id="add-init"
-            type="number"
-            name="initiative"
-            tabindex="0"
-        />
-    </div>
+    {#if !editing}
+        <div class="amount">
+            <label for="add-init">Amount</label>
+            <input
+                bind:value={number}
+                id="add-init"
+                type="number"
+                name="initiative"
+                tabindex="0"
+            />
+        </div>
+    {/if}
 </div>
 <div class="context-buttons">
     <div class="add-button" use:saveButton />

src/svelte/Creature.svelte

@@ -14,7 +14,6 @@
     const dispatch = createEventDispatcher();
 
     const updateName = (evt: FocusEvent) => {
-        
         view.updateCreature(creature, {
             name: (evt.target as HTMLSpanElement).textContent
         });
@@ -45,19 +44,7 @@
         {#if creature.player}
             <span class="name">{creature.name}</span>
         {:else}
-            <span
-                contenteditable
-                class="editable name"
-                type="text"
-                on:blur={updateName}
-                on:keydown={function (evt) {
-                    if (evt.key === "Enter" || evt.key === "Tab") {
-                        evt.preventDefault();
-                        this.blur();
-                        return;
-                    }
-                }}>{name()}</span
-            >
+            <span class="name">{name()}</span>
         {/if}
     </div>
     <div class="statuses" on:click={(e) => e.stopPropagation()}>
@@ -91,6 +78,7 @@
     <CreatureControls
         on:click={(e) => e.stopPropagation()}
         on:tag
+        on:edit
         {view}
         {creature}
     />

src/svelte/CreatureControls.svelte

@@ -17,6 +17,13 @@
         hamburger.extraSettingsEl.onclick = (evt) => {
             evt.stopPropagation();
             const menu = new Menu(view.plugin.app);
+            menu.addItem((item) => {
+                item.setIcon("pencil")
+                    .setTitle("Edit")
+                    .onClick(() => {
+                        dispatch("edit", creature);
+                    });
+            });
             menu.addItem((item) => {
                 item.setIcon(TAG)
                     .setTitle("Add Status")

src/svelte/Table.svelte

@@ -87,7 +87,7 @@
                         animate:flip={{ duration: flipDurationMs }}
                         on:click={() => openView(creature)}
                     >
-                        <CreatureTemplate {creature} on:hp on:tag />
+                        <CreatureTemplate {creature} on:hp on:tag on:edit />
                     </tr>
                 {/each}
             </tbody>

src/view.ts

@@ -414,6 +414,7 @@ export default class TrackerView extends ItemView {
             marker?: string;
         }
     ) {
+
         if (initiative) {
             creature.initiative = Number(initiative);
         }