diff --git a/src/components/features/PresetView.svelte b/src/components/features/PresetView.svelte
index 4dcc1b4..bdd1a32 100644
--- a/src/components/features/PresetView.svelte
+++ b/src/components/features/PresetView.svelte
@@ -10,6 +10,7 @@
let { preset }: PresetViewProps = $props();
const sortedTagsList = $derived(preset.settings.tags.toSorted((a, b) => a.localeCompare(b)));
+ const requiredTagsList = $derived(preset.settings.requiredTags.toSorted((a, b) => a.localeCompare(b)));
@@ -24,3 +25,11 @@
be automatically removed from the editor.
{/if}
+{#if preset.settings.conditional}
+
+ This preset will only appear when one of the tags below are present on image.
+
+
+
+
+{/if}
diff --git a/src/content/components/extension/presets/PresetTableRow.ts b/src/content/components/extension/presets/PresetTableRow.ts
index 025e3da..a38fa9e 100644
--- a/src/content/components/extension/presets/PresetTableRow.ts
+++ b/src/content/components/extension/presets/PresetTableRow.ts
@@ -5,11 +5,13 @@ import { EVENT_PRESET_TAG_CHANGE_APPLIED } from "$content/components/events/pres
import { createFontAwesomeIcon } from "$lib/dom-utils";
export default class PresetTableRow extends BaseComponent {
- #preset: TagEditorPreset;
+ readonly #preset: TagEditorPreset;
+ readonly #applyAllButton = document.createElement('button');
+ readonly #removeAllButton = document.createElement('button');
+ readonly #exclusiveWarning = document.createElement('div');
+ readonly #alternateColorDummy = document.createElement('span');
+
#tagsList: HTMLElement[] = [];
- #applyAllButton = document.createElement('button');
- #removeAllButton = document.createElement('button');
- #exclusiveWarning = document.createElement('div');
constructor(container: HTMLElement, preset: TagEditorPreset) {
super(container);
@@ -78,6 +80,8 @@ export default class PresetTableRow extends BaseComponent {
tagsCell,
actionsCell,
);
+
+ this.#alternateColorDummy.style.display = 'none';
}
protected init() {
@@ -146,6 +150,26 @@ export default class PresetTableRow extends BaseComponent {
});
}
+ #maybeRefreshVisibilityFromTags(sourceTags: Set) {
+ if (!this.#preset.settings.conditional || this.#isMatchesConditional(sourceTags)) {
+ this.container.style.display = '';
+ this.#alternateColorDummy.remove();
+ return;
+ }
+
+ this.container.style.display = 'none';
+ this.container.after(this.#alternateColorDummy);
+ }
+
+ #isMatchesConditional(sourceTags: Set): boolean {
+ const listOfRequiredTags = this.#preset.settings.requiredTags;
+
+ return Boolean(
+ listOfRequiredTags.length
+ && listOfRequiredTags.some(tagName => sourceTags.has(tagName))
+ );
+ }
+
updateTags(tags: Set) {
let presentTagsAmount = 0;
@@ -171,6 +195,8 @@ export default class PresetTableRow extends BaseComponent {
this.#exclusiveWarning.style.display = 'none';
}
}
+
+ this.#maybeRefreshVisibilityFromTags(tags);
}
remove() {
diff --git a/src/lib/extension/entities/TagEditorPreset.ts b/src/lib/extension/entities/TagEditorPreset.ts
index 3932862..ba708a6 100644
--- a/src/lib/extension/entities/TagEditorPreset.ts
+++ b/src/lib/extension/entities/TagEditorPreset.ts
@@ -4,6 +4,8 @@ interface TagEditorPresetSettings {
name: string;
tags: string[];
exclusive: boolean;
+ conditional: boolean;
+ requiredTags: string[];
}
export default class TagEditorPreset extends StorageEntity {
@@ -11,7 +13,9 @@ export default class TagEditorPreset extends StorageEntity([]);
let isExclusive = $state(false);
+ let isConditional = $state(false);
+ let requiredTags = $state([]);
$effect(() => {
if (presetId === 'new') {
@@ -42,6 +44,8 @@
presetName = targetPreset.settings.name;
tagsList = [...targetPreset.settings.tags].sort((a, b) => a.localeCompare(b));
isExclusive = targetPreset.settings.exclusive;
+ isConditional = targetPreset.settings.conditional;
+ requiredTags = [...targetPreset.settings.requiredTags].sort((a, b) => a.localeCompare(b));
});
async function savePreset() {
@@ -53,6 +57,8 @@
targetPreset.settings.name = presetName;
targetPreset.settings.tags = [...tagsList];
targetPreset.settings.exclusive = isExclusive;
+ targetPreset.settings.conditional = isConditional;
+ targetPreset.settings.requiredTags = [...requiredTags];
await targetPreset.save();
await goto(`/features/presets/${targetPreset.id}`);
@@ -76,6 +82,16 @@
Keep only one tag from this preset active at a time.
+
+
+ Show this preset only when any of specified tags are provided.
+
+
+ {#if isConditional}
+
+
+
+ {/if}