can now edit blocks

can now add blocks

manifest.json

@@ -1,6 +1,6 @@
 {
     "id": "obsidian-5e-statblocks",
-    "name": "5e Statblocks",
+    "name": "TTRPG Statblocks",
     "version": "1.5.7",
     "description": "Create 5e styled statblocks in Obsidian.md",
     "minAppVersion": "0.12.0",

package.json

@@ -32,6 +32,7 @@
         "esbuild": "^0.13.14",
         "esbuild-loader": "^2.16.0",
         "esbuild-svelte": "^0.5.7",
+        "fast-copy": "^2.1.1",
         "fast-sort": "^3.0.2",
         "mini-css-extract-plugin": "^2.4.5",
         "obsidian": "^0.12.17",

src/settings/StatblockCreator.svelte

@@ -3,20 +3,21 @@
         addIcon,
         ButtonComponent,
         ExtraButtonComponent,
-        Menu,
-        Modal,
         TextComponent
     } from "obsidian";
 
     import type { Layout, StatblockItem } from "src/data/constants";
     import type StatBlockPlugin from "src/main";
     import { createEventDispatcher } from "svelte";
-import AddButton from "./ui/AddButton.svelte";
+    import { generate } from "./add";
+    import AddButton from "./ui/AddButton.svelte";
     import Creator from "./ui/Creator.svelte";
 
     export let layout: Layout;
     export let plugin: StatBlockPlugin;
 
+    $: items = layout.blocks;
+
     const dispatch = createEventDispatcher();
 
     const handleSorted = (e: CustomEvent<StatblockItem[]>) => {
@@ -82,33 +83,20 @@ import AddButton from "./ui/AddButton.svelte";
             });
     };
 
-    const edit = (evt: CustomEvent<StatblockItem>) => {
-        console.log("🚀 ~ file: StatblockCreator.svelte ~ line 110 ~ evt", evt);
-        const modal = new BlockModal(plugin, evt.detail);
-        modal.open();
+    const add = async (e: CustomEvent<MouseEvent>) => {
+        const block = await generate(plugin, e.detail);
+        if (block) layout.blocks = [...layout.blocks, block];
     };
-
-    class BlockModal extends Modal {
-        constructor(
-            public plugin: StatBlockPlugin,
-            public block?: StatblockItem
-        ) {
-            super(plugin.app);
-        }
-    }
 </script>
 
 <div class="top">
     <div class="name" use:name />
-    <AddButton {plugin} />
+    <AddButton {plugin} on:add={add} />
 </div>
 <div class="creator-container">
-    <Creator
-        blocks={layout.blocks}
-        {plugin}
-        on:sorted={handleSorted}
-        on:edit={edit}
-    />
+    {#key layout}
+        <Creator blocks={items} {plugin} on:sorted={handleSorted} />
+    {/key}
 </div>
 <div class="bottom">
     <div class="save" use:save />

src/settings/add.ts

@@ -0,0 +1,125 @@
+import { nanoid } from "src/data/constants";
+import type {
+    StatblockItemType,
+    GroupItem,
+    HeadingItem,
+    StatblockItem,
+    InlineItem,
+    PropertyItem,
+    SavesItem,
+    SectionItem,
+    SpellsItem,
+    TableItem,
+    SubHeadingItem
+} from "src/data/constants";
+import type StatBlockPlugin from "src/main";
+import { Menu } from "obsidian";
+import { rejects } from "assert";
+
+function blockGenerator(type: "group"): GroupItem;
+function blockGenerator(type: "heading"): HeadingItem;
+function blockGenerator(type: "inline"): InlineItem;
+function blockGenerator(type: "property"): PropertyItem;
+function blockGenerator(type: "saves"): SavesItem;
+function blockGenerator(type: "section"): SectionItem;
+function blockGenerator(type: "spells"): SpellsItem;
+function blockGenerator(type: "subheading"): SubHeadingItem;
+function blockGenerator(type: "table"): TableItem;
+function blockGenerator(type: StatblockItemType): StatblockItem;
+function blockGenerator(type: string): StatblockItem {
+    switch (type) {
+        case "inline":
+        case "group": {
+            return {
+                type: "group",
+                id: nanoid(),
+                properties: [],
+                nested: []
+            };
+        }
+        case "heading": {
+            return {
+                type: "heading",
+                id: nanoid(),
+                properties: []
+            };
+        }
+        case "property": {
+            return {
+                type: "property",
+                id: nanoid(),
+                properties: []
+            };
+        }
+        case "saves": {
+            return {
+                type: "saves",
+                id: nanoid(),
+                properties: []
+            };
+        }
+        case "section": {
+            return {
+                type: "section",
+                id: nanoid(),
+                properties: []
+            };
+        }
+        case "spells": {
+            return {
+                type: "spells",
+                id: nanoid(),
+                properties: []
+            };
+        }
+        case "subheading": {
+            return {
+                type: "subheading",
+                id: nanoid(),
+                properties: []
+            };
+        }
+        case "table": {
+            return {
+                type: "table",
+                id: nanoid(),
+                properties: [],
+                headers: []
+            };
+        }
+    }
+}
+
+const types: Array<[StatblockItemType, string]> = [
+    ["group", "Group"],
+    ["heading", "Heading"],
+    ["inline", "Inline Group"],
+    ["property", "Property Line"],
+    ["saves", "Saves"],
+    ["spells", "Spells"],
+    ["subheading", "Subheading"],
+    ["table", "Table"],
+    ["section", "Traits"]
+];
+
+export const generate = async (
+    plugin: StatBlockPlugin,
+    evt: MouseEvent
+): Promise<StatblockItem | void> => {
+    return new Promise((resolve, reject) => {
+        const addMenu = new Menu(plugin.app).setNoIcon();
+        types.forEach((type) => {
+            addMenu.addItem((item) => {
+                item.setTitle(type[1]).onClick(() => {
+                    const gen = blockGenerator(type[0]);
+                    resolve(gen);
+                });
+            });
+        });
+        addMenu.onunload = () => {
+            resolve();
+        };
+
+        addMenu.showAtMouseEvent(evt);
+    });
+};

src/settings/settings.ts

@@ -17,6 +17,8 @@ import type StatBlockPlugin from "src/main";
 import StatblockCreator from "./StatblockCreator.svelte";
 import { MonsterSuggester } from "src/util/suggester";
 
+import fastCopy from "fast-copy";
+
 export default class StatblockSettingTab extends PluginSettingTab {
     constructor(app: App, private plugin: StatBlockPlugin) {
         super(app, plugin);
@@ -489,6 +491,24 @@ export default class StatblockSettingTab extends PluginSettingTab {
 
         this.buildCustomLayouts(layoutContainer);
     }
+    getDuplicate(layout: Layout) {
+        const names = this.plugin.settings.layouts
+            .filter((l) => l.name.contains(`${layout.name} Copy`))
+            .map((l) => l.name);
+
+        let temp = `${layout.name} Copy`;
+
+        let name = temp;
+        let index = 1;
+        while (names.includes(name)) {
+            name = `${temp} (${index})`;
+            index++;
+        }
+        return {
+            blocks: fastCopy(layout.blocks),
+            name: name
+        };
+    }
     buildCustomLayouts(layoutContainer: HTMLDivElement) {
         layoutContainer.empty();
         new Setting(layoutContainer)
@@ -497,10 +517,9 @@ export default class StatblockSettingTab extends PluginSettingTab {
                 b.setIcon("duplicate-glyph")
                     .setTooltip("Create Copy")
                     .onClick(async () => {
-                        this.plugin.settings.layouts.push({
-                            ...Layout5e,
-                            name: `${Layout5e.name} Copy`
-                        });
+                        this.plugin.settings.layouts.push(
+                            this.getDuplicate(Layout5e)
+                        );
                         await this.plugin.saveSettings();
                         this.buildCustomLayouts(layoutContainer);
                     });
@@ -512,10 +531,9 @@ export default class StatblockSettingTab extends PluginSettingTab {
                     b.setIcon("duplicate-glyph")
                         .setTooltip("Create Copy")
                         .onClick(async () => {
-                            this.plugin.settings.layouts.push({
-                                ...Layout5e,
-                                name: `${layout.name} Copy`
-                            });
+                            this.plugin.settings.layouts.push(
+                                this.getDuplicate(layout)
+                            );
                             await this.plugin.saveSettings();
                             this.buildCustomLayouts(layoutContainer);
                         });
@@ -572,7 +590,7 @@ class CreateStatblockModal extends Modal {
         }
     ) {
         super(plugin.app);
-        this.layout = { ...layout };
+        this.layout = fastCopy(layout);
     }
 
     onOpen() {

src/settings/ui/AddButton.svelte

@@ -12,28 +12,9 @@
             .setIcon("plus-with-circle")
             .setTooltip("Add Block");
     };
-
-    const types = [
-        "Traits",
-        "Heading",
-        "Subheading",
-        "Property",
-        "Table",
-        "Saves",
-        "Spells",
-        "Inline",
-        "Group"
-    ];
-
-    const addMenu = new Menu(plugin.app).setNoIcon();
-    types.forEach((type) => {
-        addMenu.addItem((item) => {
-            item.setTitle(type).onClick(() => dispatch("add", type));
-        });
-    });
 </script>
 
-<div class="add" use:add on:click={(evt) => addMenu.showAtMouseEvent(evt)} />
+<div class="add" use:add on:click={(evt) => dispatch("add", evt)} />
 
 <style>
     .add {