Skip to content

Commit 4775cf5

Browse files
valentine195valentine195
committed
settings work
1 parent 01a09cd commit 4775cf5

15 files changed

+301
-172
lines changed

‎src/data/constants.ts

-33
Original file line numberDiff line numberDiff line change
@@ -76,39 +76,6 @@ type TableProps = {
7676
headers: string[];
7777
};
7878

79-
/* export interface StatblockItem {
80-
type: StatblockItemType;
81-
id: string;
82-
properties: Array<keyof Monster>;
83-
conditioned?: boolean;
84-
fallback?: string;
85-
display?: string;
86-
saveIcon?: boolean;
87-
downloadIcon?: boolean;
88-
hasRule?: boolean;
89-
heading?: string;
90-
headers?: string[];
91-
dice?: {
92-
default?: keyof Monster;
93-
text?: keyof Monster;
94-
conditioned?: boolean;
95-
parse?: boolean;
96-
};
97-
nested?: StatblockItem[];
98-
callback?: (monster: Monster) => string;
99-
} */
100-
101-
type ItemProps =
102-
| GroupProps
103-
| HeadingProps
104-
| InlineProps
105-
| PropertyProps
106-
| SavesProps
107-
| SectionProps
108-
| SpellsProps
109-
| SubHeadingProps
110-
| TableProps;
111-
11279
export type GroupItem = CommonProps & GroupProps;
11380
export type HeadingItem = CommonProps & HeadingProps;
11481
export type InlineItem = CommonProps & InlineProps;

‎src/main.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import {
33
MarkdownPostProcessorContext,
44
MarkdownView,
55
Notice,
6-
Plugin
6+
Plugin,
7+
TFile
78
} from "obsidian";
89
import domtoimage from "dom-to-image";
910

‎src/settings/StatblockCreator.svelte

+64-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,29 @@
11
<script lang="ts">
2-
import { ExtraButtonComponent, TextComponent } from "obsidian";
2+
import {
3+
addIcon,
4+
ButtonComponent,
5+
ExtraButtonComponent,
6+
TextComponent
7+
} from "obsidian";
38
4-
import type { Layout } from "src/data/constants";
9+
import type { Layout, StatblockItem } from "src/data/constants";
10+
import type StatBlockPlugin from "src/main";
11+
import { createEventDispatcher } from "svelte";
512
import Creator from "./ui/Creator.svelte";
613
714
export let layout: Layout;
15+
export let plugin: StatBlockPlugin;
16+
17+
const dispatch = createEventDispatcher();
18+
19+
const handleSorted = (e: CustomEvent<StatblockItem[]>) => {
20+
layout.blocks = [...e.detail];
21+
};
22+
23+
addIcon(
24+
"dropzone-grip",
25+
`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="grip-vertical" class="svg-inline--fa fa-grip-vertical fa-w-10" role="img" viewBox="0 0 320 512"><path fill="currentColor" d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"/></svg>`
26+
);
827
928
let editingName = false;
1029
const name = (node: HTMLElement) => {
@@ -41,21 +60,56 @@
4160
});
4261
}
4362
};
63+
64+
const add = (node: HTMLDivElement) => {
65+
new ExtraButtonComponent(node)
66+
.setIcon("plus-with-circle")
67+
.setTooltip("Add Block")
68+
.onClick(() => {});
69+
};
70+
const save = (node: HTMLDivElement) => {
71+
new ButtonComponent(node)
72+
.setIcon("checkmark")
73+
.setCta()
74+
.setTooltip("Save")
75+
.onClick(() => {
76+
dispatch("saved");
77+
});
78+
};
79+
const cancel = (node: HTMLDivElement) => {
80+
new ExtraButtonComponent(node)
81+
.setIcon("cross")
82+
.setTooltip("Cancel")
83+
.onClick(() => {
84+
dispatch("cancel");
85+
});
86+
};
4487
</script>
4588

46-
<div class="name" use:name />
89+
<div class="top">
90+
<div class="name" use:name />
91+
<div class="add" use:add />
92+
</div>
4793
<div class="creator-container">
4894
<div class="creator">
49-
<Creator blocks={layout.blocks} />
95+
<Creator blocks={layout.blocks} {plugin} on:sorted={handleSorted} />
5096
</div>
51-
<div class="options" />
97+
</div>
98+
<div class="bottom">
99+
<div class="save" use:save />
100+
<div class="cancel" use:cancel />
52101
</div>
53102

54103
<style>
55104
.creator {
56105
max-width: 75vw;
57106
max-height: 75vh;
58107
}
108+
.top {
109+
display: flex;
110+
align-items: center;
111+
justify-content: space-between;
112+
}
59113
.name {
60114
display: flex;
61115
/* justify-content: space-between; */
@@ -66,4 +120,9 @@
66120
justify-content: flex-end;
67121
align-items: center;
68122
}
123+
.bottom {
124+
display: flex;
125+
justify-content: flex-end;
126+
align-items: center;
127+
}
69128
</style>

‎src/settings/settings.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -453,14 +453,17 @@ export default class StatblockSettingTab extends PluginSettingTab {
453453

454454
class CreateStatblockModal extends Modal {
455455
creator: StatblockCreator;
456+
layout: Layout;
457+
saved: boolean = false;
456458
constructor(
457459
public plugin: StatBlockPlugin,
458-
public layout: Layout = {
460+
layout: Layout = {
459461
name: "Layout",
460462
blocks: []
461463
}
462464
) {
463465
super(plugin.app);
466+
this.layout = { ...layout };
464467
}
465468

466469
onOpen() {
@@ -471,8 +474,18 @@ class CreateStatblockModal extends Modal {
471474
this.creator = new StatblockCreator({
472475
target: this.contentEl,
473476
props: {
474-
layout: this.layout
477+
layout: this.layout,
478+
plugin: this.plugin
475479
}
476480
});
481+
482+
this.creator.$on("saved", () => {
483+
this.saved = true;
484+
console.log(...this.layout.blocks);
485+
this.close();
486+
});
487+
this.creator.$on("cancel", () => {
488+
this.close();
489+
});
477490
}
478491
}

‎src/settings/ui/Block.svelte

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<script lang="ts">
2+
import type { StatblockItem } from "src/data/constants";
3+
4+
import Group from "./Blocks/GroupBlock.svelte";
5+
import Inline from "./Blocks/InlineBlock.svelte";
6+
import Heading from "./Blocks/HeadingBlock.svelte";
7+
import Subheading from "./Blocks/SubheadingBlock.svelte";
8+
import type StatBlockPlugin from "src/main";
9+
import { ExtraButtonComponent } from "obsidian";
10+
11+
export let block: StatblockItem;
12+
export let plugin: StatBlockPlugin;
13+
14+
export const blockBuilder = (node: HTMLElement) => {
15+
switch (block.type) {
16+
case "inline": {
17+
new Inline({
18+
target: node,
19+
props: {
20+
block,
21+
plugin
22+
},
23+
context: new Map([["plugin", plugin]])
24+
});
25+
break;
26+
}
27+
28+
case "group": {
29+
new Group({
30+
target: node,
31+
props: {
32+
block,
33+
plugin
34+
},
35+
context: new Map([["plugin", plugin]])
36+
});
37+
break;
38+
}
39+
case "heading": {
40+
new Heading({
41+
target: node,
42+
props: {
43+
block,
44+
plugin
45+
},
46+
context: new Map([["plugin", plugin]])
47+
});
48+
break;
49+
}
50+
51+
case "subheading": {
52+
new Subheading({
53+
target: node,
54+
props: {
55+
block,
56+
plugin
57+
},
58+
context: new Map([["plugin", plugin]])
59+
});
60+
break;
61+
}
62+
default: {
63+
node.setText(block.type);
64+
}
65+
}
66+
};
67+
68+
const edit = (node: HTMLDivElement) => {
69+
new ExtraButtonComponent(node).setIcon("pencil");
70+
};
71+
let hovered = false;
72+
$: hovered = hovered;
73+
</script>
74+
75+
<div
76+
class="statblock-creator-container"
77+
class:hovered
78+
on:mouseenter={(e) => {
79+
e.stopPropagation();
80+
hovered = true;
81+
console.log("🚀 ~ file: Block.svelte ~ line 81 ~ hovered", hovered);
82+
}}
83+
on:mouseleave={(e) => {
84+
e.stopPropagation();
85+
hovered = false;
86+
}}
87+
>
88+
<div class="statblock-creator-block" use:blockBuilder />
89+
</div>
90+
91+
<style>
92+
.statblock-creator-container {
93+
display: flex;
94+
justify-content: space-between;
95+
/* align-items: center; */
96+
padding: 2px;
97+
margin: 2px;
98+
width: 100%;
99+
height: 100%;
100+
}
101+
.statblock-creator-block {
102+
width: 100%;
103+
}
104+
.edit {
105+
display: flex;
106+
}
107+
</style>

‎src/settings/ui/Blocks/Group.svelte

-16
This file was deleted.

‎src/settings/ui/Blocks/GroupBlock.svelte

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import type { GroupItem, StatblockItem } from "src/data/constants";
3+
import type StatBlockPlugin from "src/main";
4+
import Creator from "../Creator.svelte";
5+
6+
export let block: GroupItem;
7+
export let plugin: StatBlockPlugin;
8+
9+
const handleSorted = (e: CustomEvent<StatblockItem[]>) => {
10+
block.nested = [...e.detail];
11+
};
12+
</script>
13+
14+
<div class="group">
15+
<Creator
16+
blocks={block.nested}
17+
{plugin}
18+
on:sorted={handleSorted}
19+
dropFromOthersDisabled={true}
20+
/>
21+
</div>
22+
23+
<style>
24+
.group {
25+
border: 2px dashed grey;
26+
}
27+
</style>

‎src/settings/ui/Blocks/Heading.svelte renamed to ‎src/settings/ui/Blocks/HeadingBlock.svelte

+9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
<script lang="ts">
2+
import type { HeadingItem } from "src/data/constants";
3+
4+
import type StatBlockPlugin from "src/main";
5+
6+
export let block: HeadingItem;
7+
export let plugin: StatBlockPlugin;
8+
</script>
9+
110
<div class="heading">Heading</div>
211

312
<style>

‎src/settings/ui/Blocks/Inline.svelte renamed to ‎src/settings/ui/Blocks/InlineBlock.svelte

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script lang="ts">
22
import type { InlineItem } from "src/data/constants";
3+
import type StatBlockPlugin from "src/main";
4+
35
import Creator from "../Creator.svelte";
46
57
export let block: InlineItem;
8+
export let plugin: StatBlockPlugin;
69
</script>
710

811
<div class="group">
9-
<Creator blocks={block.nested} inline={true} />
12+
<Creator blocks={block.nested} inline={true} {plugin} />
1013
</div>
1114

1215
<style>

‎src/settings/ui/Blocks/Subheading.svelte

-10
This file was deleted.

0 commit comments

Comments
 (0)