[Major Refactor] Use pinia store to manage setting & nodeDef (#202)

* Node def store and settings tore

* Fix initial values

* Remove legacy setting listen

* Fix searchbox test

src/scripts/app.ts

@@ -86,6 +86,7 @@ export class ComfyApp {
     DraggableList,
   };
 
+  vueAppReady: boolean;
   ui: ComfyUI;
   logging: ComfyLogging;
   extensions: ComfyExtension[];
@@ -118,6 +119,7 @@ export class ComfyApp {
   nodeDefs: Record<string, ComfyNodeDef>;
 
   constructor() {
+    this.vueAppReady = false;
     this.ui = new ComfyUI(this);
     this.logging = new ComfyLogging(this);
     this.workflowManager = new ComfyWorkflowManager(this);
@@ -1877,6 +1879,7 @@ export class ComfyApp {
     this.#addAfterConfigureHandler();
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph);
+    this.ui.settings.refreshSetting("Comfy.NodeSearchBoxImpl");
     this.ctx = canvasEl.getContext("2d");
 
     LiteGraph.release_link_on_empty_shows_menu = true;

src/scripts/ui/menu/index.ts

@@ -182,7 +182,6 @@ export class ComfyAppMenu {
           app.ui.menuContainer.style.removeProperty("display");
           this.element.style.display = "none";
           app.ui.restoreMenuPosition();
-          document.dispatchEvent(new Event("comfy:setting:beta-menu-disabled"));
         }
         window.dispatchEvent(new Event("resize"));
       },

src/scripts/ui/settings.ts

@@ -3,11 +3,13 @@ import { api } from "../api";
 import { ComfyDialog } from "./dialog";
 import type { ComfyApp } from "../app";
 import type { Setting, SettingParams } from "@/types/settingTypes";
+import { useSettingStore } from "@/stores/settingStore";
 
 export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
   app: ComfyApp;
   settingsValues: any;
   settingsLookup: Record<string, Setting>;
+  settingsParamLookup: Record<string, SettingParams>;
 
   constructor(app: ComfyApp) {
     super();
@@ -15,6 +17,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     this.app = app;
     this.settingsValues = {};
     this.settingsLookup = {};
+    this.settingsParamLookup = {};
     this.element = $el(
       "dialog",
       {
@@ -55,6 +58,14 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
   }
 
   #dispatchChange<T>(id: string, value: T, oldValue?: T) {
+    // Keep the settingStore updated. Not using `store.set` as it would trigger
+    // setSettingValue again.
+    // `load` re-dispatch the change for any settings added before load so
+    // settingStore is always up to date.
+    if (this.app.vueAppReady) {
+      useSettingStore().settingValues[id] = value;
+    }
+
     this.dispatchEvent(
       new CustomEvent(id + ".change", {
         detail: {
@@ -99,6 +110,11 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     return value ?? defaultValue;
   }
 
+  getSettingDefaultValue(id: string) {
+    const param = this.settingsParamLookup[id];
+    return param?.defaultValue;
+  }
+
   async setSettingValueAsync(id: string, value: any) {
     const json = JSON.stringify(value);
     localStorage["Comfy.Settings." + id] = json; // backwards compatibility for extensions keep setting in storage
@@ -165,8 +181,10 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     // Trigger initial setting of value
     if (!skipOnChange) {
       onChange?.(value, undefined);
+      this.#dispatchChange(id, value);
     }
 
+    this.settingsParamLookup[id] = params;
     this.settingsLookup[id] = {
       id,
       onChange,