-
+ {#if label}
+
+ {/if}
diff --git a/src/lib/stores/configDefs.ts b/src/lib/stores/configDefs.ts
new file mode 100644
index 0000000..df75e9f
--- /dev/null
+++ b/src/lib/stores/configDefs.ts
@@ -0,0 +1,148 @@
+/*
+ * Supported config option types.
+ */
+type ConfigDefType = "boolean" | "number" | "string" | "string[]";
+
+// A simple parameter description interface
+export interface ConfigDef {
+ // This generic `IdType` is what makes the "array of keys and values to new
+ // interface definition" thing work
+ name: IdType;
+
+ type: TypeType,
+
+ description?: string,
+
+ category: string,
+
+ defaultValue: ValueType,
+
+ options: OptionsType
+}
+
+export type ConfigDefAny = ConfigDef
+type ConfigDefBoolean = ConfigDef;
+
+type NumberOptions = {
+ min?: number,
+ max?: number,
+ step: number
+}
+type ConfigDefNumber = ConfigDef;
+
+type ConfigDefString = ConfigDef;
+type ConfigDefStringArray = ConfigDef;
+
+// Configuration parameters ------------------------------------
+
+const defComfyUIHostname: ConfigDefString<"comfyUIHostname"> = {
+ name: "comfyUIHostname",
+ type: "string",
+ defaultValue: "localhost",
+ category: "backend",
+ description: "Backend domain for ComfyUI",
+ options: {}
+};
+
+const defComfyUIPort: ConfigDefNumber<"comfyUIPort"> = {
+ name: "comfyUIPort",
+ type: "number",
+ defaultValue: 8188,
+ category: "backend",
+ description: "Backend port for ComfyUI",
+ options: {
+ min: 1,
+ max: 65535,
+ step: 1
+ }
+};
+
+const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
+ name: "alwaysStripUserState",
+ type: "boolean",
+ defaultValue: false,
+ category: "behavior",
+ description: "Strip user state even if saving to local storage",
+ options: {}
+};
+
+const defPromptForWorkflowName: ConfigDefBoolean<"promptForWorkflowName"> = {
+ name: "promptForWorkflowName",
+ type: "boolean",
+ defaultValue: false,
+ category: "behavior",
+ description: "When saving, always prompt for a name to save the workflow as",
+ options: {}
+};
+
+const defConfirmWhenUnloadingUnsavedChanges: ConfigDefBoolean<"confirmWhenUnloadingUnsavedChanges"> = {
+ name: "confirmWhenUnloadingUnsavedChanges",
+ type: "boolean",
+ defaultValue: true,
+ category: "behavior",
+ description: "When closing the tab, open the confirmation window if there's unsaved changes",
+ options: {}
+};
+
+const defCacheBuiltInResources: ConfigDefBoolean<"cacheBuiltInResources"> = {
+ name: "cacheBuiltInResources",
+ type: "boolean",
+ defaultValue: true,
+ category: "behavior",
+ description: "Cache loading of built-in resources to save network use",
+ options: {}
+};
+
+const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
+ name: "builtInTemplates",
+ type: "string[]",
+ defaultValue: ["ControlNet", "LoRA x5", "Model Loader", "Positive_Negative", "Seed Randomizer"],
+ category: "templates",
+ description: "Basenames of templates that can be loaded from public/templates. Saves LocalStorage space.",
+ options: {}
+};
+
+// Configuration exports ------------------------------------
+
+export const CONFIG_DEFS = [
+ defComfyUIHostname,
+ defComfyUIPort,
+ defAlwaysStripUserState,
+ defPromptForWorkflowName,
+ defConfirmWhenUnloadingUnsavedChanges,
+ defCacheBuiltInResources,
+ defBuiltInTemplates,
+] as const;
+
+export const CONFIG_DEFS_BY_NAME: Record
+ = CONFIG_DEFS.reduce((dict, def) => {
+ if (def.name in dict)
+ throw new Error(`Duplicate named config definition: ${def.name}`)
+ dict[def.name] = def;
+ return dict
+ }, {})
+
+export const CONFIG_DEFS_BY_CATEGORY: Record
+ = CONFIG_DEFS.reduce((dict, def) => {
+ dict[def.category] ||= []
+ dict[def.category].push(def)
+ return dict
+ }, {})
+
+export const CONFIG_CATEGORIES: string[]
+ = CONFIG_DEFS.reduce((arr, def) => {
+ if (!arr.includes(def.category))
+ arr.push(def.category)
+ return arr
+ }, [])
+
+type Config>>> = {
+ [K in T[number]["name"]]: Extract["defaultValue"]
+} extends infer O
+ ? { [P in keyof O]: O[P] }
+ : never;
+
+export type ConfigState = Config
+
+const pairs: [string, any][] = CONFIG_DEFS.map(item => { return [item.name, structuredClone(item.defaultValue)] })
+export const defaultConfig: ConfigState = pairs.reduce((dict, v) => { dict[v[0]] = v[1]; return dict; }, {}) as any;
diff --git a/src/lib/stores/configState.ts b/src/lib/stores/configState.ts
index a05dcd3..1772bca 100644
--- a/src/lib/stores/configState.ts
+++ b/src/lib/stores/configState.ts
@@ -1,130 +1,85 @@
import { debounce } from '$lib/utils';
+import { toHashMap } from '@litegraph-ts/core';
import { get, writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
-import { z, type ZodTypeAny } from "zod"
-
-type ConfigDefType = "boolean" | "number" | "string" | "string[]";
+import { defaultConfig, type ConfigState, type ConfigDefAny, CONFIG_DEFS_BY_NAME } from './configDefs';
type ConfigStateOps = {
getBackendURL: () => string,
- save: () => void,
- load: () => ConfigState
+ load: (data: any) => ConfigState
+ loadDefault: () => ConfigState
+ setConfigOption: (def: ConfigDefAny, v: any) => boolean
+ validateConfigOption: (def: ConfigDefAny, v: any) => boolean
}
export type WritableConfigStateStore = Writable & ConfigStateOps;
-const store: Writable = writable(
- {
- comfyUIHostname: "localhost",
- comfyUIPort: 8188,
- alwaysStripUserState: false,
- promptForWorkflowName: false,
- confirmWhenUnloadingUnsavedChanges: true,
- builtInTemplates: [],
- cacheBuiltInResources: true,
- })
-
-type Conf2 = {
- name: string;
- type: ZodTypeAny;
- defaultValue: any;
- description: string;
-};
-
-const def2ComfyUIHostname: Conf2 = {
- name: 'backend.comfyUIHostname',
- type: z.string(),
- defaultValue: 'localhost',
- description: 'Backend domain for ComfyUI',
-};
-
-const def2ComfyUIPort: Conf2 = {
- name: 'backend.comfyUIPort',
- type: z.number(),
- defaultValue: 8188,
- description: 'Backend port for ComfyUI',
-};
-
-const def2AlwaysStripUserState: Conf2 = {
- name: 'behavior.alwaysStripUserState',
- type: z.boolean(),
- defaultValue: false,
- description: 'Strip user state even if saving to local storage',
-};
-
-export const allconfs: ReadonlyArray = [
- def2ComfyUIHostname,
- def2ComfyUIPort,
- def2AlwaysStripUserState,
-] as const;
-
-const confItems: any = {};
-const confDefaults: any = {}
-
-for (const item of allconfs) {
- const trail = item.name.split('.');
- let theI = confItems;
- let theDef = confDefaults;
- for (const category of trail.slice(0, -1)) {
- theI[category] ||= { __category__: true };
- theI = theI[category];
-
- theDef[category] ||= {};
- theDef = theDef[category];
- }
- const optionName = trail[trail.length - 1];
- theI[optionName] = item;
- theDef[optionName] = item.defaultValue;
-}
-
-function recurse(item: Record, trail: string[] = []): ZodTypeAny {
- let defaultValue = confDefaults
- for (const name of trail) {
- defaultValue = defaultValue[name];
- }
-
- for (const [key, value] of Object.entries(item)) {
- if (value.__category__) {
- delete value['__category__'];
- item[key] = recurse(value, trail.concat(key));
- } else {
- const result = value.type.safeParse(value.defaultValue);
- if (!result.success) {
- throw new Error(
- `Default value for config item ${value.name} did not pass type matcher: ${result.error}`
- );
- }
- item[key] = value.type.catch(value.defaultValue);
- }
- }
- return z.object(item).catch({ ...defaultValue });
-}
-
-export const Config2 = recurse(confItems);
-export type ConfigStore = z.infer;
-
-const stor: ConfigStore = {
- backend: {},
- a: "foo"
-}
+const store: Writable = writable({ ...defaultConfig })
function getBackendURL(): string {
const state = get(store);
return `${window.location.protocol}//${state.comfyUIHostname}:${state.comfyUIPort}`
}
-function save() {
-
+function validateConfigOption(def: ConfigDefAny, v: any): boolean {
+ switch (def.type) {
+ case "boolean":
+ return typeof v === "boolean";
+ case "number":
+ return typeof v === "number";
+ case "string":
+ return typeof v === "string";
+ case "string[]":
+ return Array.isArray(v) && v.every(vs => typeof vs === "string");
+ }
+ return false;
}
-function load(): ConfigState {
+function setConfigOption(def: ConfigDefAny, v: any): boolean {
+ let valid = false;
+ store.update(state => {
+ valid = validateConfigOption(def, v);
+ if (!valid) {
+ console.warn(`[configState] Invalid value for option ${def.name} (${v}), setting to default (${def.defaultValue})`);
+ state[def.name] = structuredClone(def.defaultValue);
+ }
+ else {
+ state[def.name] = v
+ }
+
+ return state;
+ })
+ return valid;
+}
+
+function load(data: any): ConfigState {
+ store.set({ ...defaultConfig })
+ if (data != null && typeof data === "object") {
+ for (const [k, v] of Object.entries(data)) {
+ const def = CONFIG_DEFS_BY_NAME[k]
+ if (def == null) {
+ delete data[k]
+ continue;
+ }
+
+ setConfigOption(def, v);
+ }
+ }
+
+ return get(store);
+}
+
+function loadDefault() {
+ return load(null);
}
const configStateStore: WritableConfigStateStore =
{
...store,
getBackendURL,
- save,
- load
+ validateConfigOption,
+ setConfigOption,
+ load,
+ loadDefault
}
export default configStateStore;
diff --git a/src/lib/stores/layoutStates.ts b/src/lib/stores/layoutStates.ts
index 9af726a..0dcd911 100644
--- a/src/lib/stores/layoutStates.ts
+++ b/src/lib/stores/layoutStates.ts
@@ -690,7 +690,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
}
]
}
-];
+] as const;
// This is needed so the specs can be iterated with svelte's keyed #each.
let i = 0;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 5093fec..1f967ca 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -109,6 +109,9 @@ body {
&:hover:not(:disabled) {
background: var(--block-background-fill);
}
+ &.selected {
+ background: var(--panel-background-fill);
+ }
}
&:hover:not(:disabled) {
@@ -117,11 +120,12 @@ body {
&:active:not(:disabled) {
filter: brightness(50%)
}
- &.selected:not(:disabled) {
- filter: brightness(80%)
+ &.selected {
+ color: var(--body-text-color);
+ filter: none;
}
- &:disabled {
+ &:disabled:not(.selected) {
background: var(--neutral-700);
color: var(--neutral-400);
opacity: 50%;
diff --git a/src/tests/stores/configStateTests.ts b/src/tests/stores/configStateTests.ts
index 0f35323..23bffab 100644
--- a/src/tests/stores/configStateTests.ts
+++ b/src/tests/stores/configStateTests.ts
@@ -1,60 +1,33 @@
import { get } from "svelte/store";
-import configState, { Config2 } from "$lib/stores/configState"
+import configState, { type ConfigState } from "$lib/stores/configState"
import { expect } from 'vitest';
import UnitTest from "../UnitTest";
import { Watch } from "@litegraph-ts/nodes-basic";
export default class configStateTests extends UnitTest {
- test__parse__parsesBasic() {
- const testConf = {
- backend: {
- comfyUIHostname: 'test',
- comfyUIPort: 8187,
- },
- behavior: {
- alwaysStripUserState: false,
- },
- };
+ test__loadsDefaultsFromInvalid() {
+ const saved = "foo"
- expect(Config2.safeParse(testConf).success).toEqual(true);
+ const config = configState.load(saved)
+ expect(config).toBeInstanceOf(Object)
+ expect(config.comfyUIHostname).toEqual("localhost")
}
- test__parse__parsesFallbacks() {
- const testConf = {
- backend: {},
- behavior: {}
- };
+ test__loadsDefaultsFromBlank() {
+ const saved = {}
- const result = Config2.safeParse(testConf)
-
- console.warn(result)
- expect(result.success).toEqual(true);
- expect(result.data).toEqual({
- backend: {
- comfyUIHostname: "localhost",
- comfyUIPort: 8188
- },
- behavior: {
- alwaysStripUserState: false
- }
- });
+ const config = configState.load(saved)
+ expect(config).toBeInstanceOf(Object)
+ expect(config.comfyUIHostname).toEqual("localhost")
}
- test__parse__parsesFallbacks2() {
- const testConf = "foo";
+ test__loadsDefaultsFromInvalidValues() {
+ const saved = {
+ comfyUIHostname: 1234 as any
+ }
- const result = Config2.safeParse(testConf)
-
- console.warn(result)
- expect(result.success).toEqual(true);
- expect(result.data).toEqual({
- backend: {
- comfyUIHostname: "localhost",
- comfyUIPort: 8188
- },
- behavior: {
- alwaysStripUserState: false
- }
- });
+ const config = configState.load(saved)
+ expect(config).toBeInstanceOf(Object)
+ expect(config.comfyUIHostname).toEqual("localhost")
}
}