From 13cda7de41edf19c7ec27da798be2f8c9d21d19f Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 16 Jul 2024 11:21:23 -0400
Subject: [PATCH] Annotate `settings.ts` (#134)

* Annotate settings.ts

* nit
---
 src/scripts/app.ts               |  4 +--
 src/scripts/ui/menu/workflows.ts |  5 +++-
 src/scripts/ui/settings.ts       | 46 ++++++--------------------------
 src/types/settingTypes.ts        | 39 +++++++++++++++++++++++++++
 4 files changed, 53 insertions(+), 41 deletions(-)
 create mode 100644 src/types/settingTypes.ts

diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 00c529a24..2bee19a53 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -30,6 +30,7 @@ import {
   LGraphNode,
   LiteGraph,
 } from "@comfyorg/litegraph";
+import { StorageLocation } from "@/types/settingTypes";
 
 // CSS imports. style.css must be imported later as it overwrites some litegraph styles.
 import "@comfyorg/litegraph/css/litegraph.css";
@@ -104,8 +105,7 @@ export class ComfyApp {
   progress: { value: number; max: number } | null;
   configuringGraph: boolean;
   isNewUserSession: boolean;
-  // Are there any other options than "server"?
-  storageLocation: string;
+  storageLocation: StorageLocation;
   multiUserServer: boolean;
   ctx: CanvasRenderingContext2D;
   widgets: Record<string, ComfyWidgetConstructor>;
diff --git a/src/scripts/ui/menu/workflows.ts b/src/scripts/ui/menu/workflows.ts
index a996f0f91..11494a1e1 100644
--- a/src/scripts/ui/menu/workflows.ts
+++ b/src/scripts/ui/menu/workflows.ts
@@ -233,7 +233,10 @@ export class ComfyWorkflowsMenu {
         ) {
           const r = getExtraMenuOptions?.apply?.(this, arguments);
           if (
-            app.ui.settings.getSettingValue("Comfy.UseNewMenu", false) === true
+            app.ui.settings.getSettingValue<boolean>(
+              "Comfy.UseNewMenu",
+              false
+            ) === true
           ) {
             const t = this;
             let img;
diff --git a/src/scripts/ui/settings.ts b/src/scripts/ui/settings.ts
index dd2ee4c60..7508fe6c7 100644
--- a/src/scripts/ui/settings.ts
+++ b/src/scripts/ui/settings.ts
@@ -2,44 +2,14 @@ import { $el } from "../ui";
 import { api } from "../api";
 import { ComfyDialog } from "./dialog";
 import type { ComfyApp } from "../app";
-
-/* The Setting entry stored in `ComfySettingsDialog` */
-interface Setting {
-  id: string;
-  onChange?: (value: any, oldValue?: any) => void;
-  name: string;
-  render: () => HTMLElement;
-}
-
-interface SettingOption {
-  text: string;
-  value?: string;
-}
-
-interface SettingParams {
-  id: string;
-  name: string;
-  type:
-    | string
-    | ((
-        name: string,
-        setter: (v: any) => void,
-        value: any,
-        attrs: any
-      ) => HTMLElement);
-  defaultValue: any;
-  onChange?: (newValue: any, oldValue?: any) => void;
-  attrs?: any;
-  tooltip?: string;
-  options?: Array<string | SettingOption> | ((value: any) => SettingOption[]);
-}
+import type { Setting, SettingParams } from "@/types/settingTypes";
 
 export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
   app: ComfyApp;
   settingsValues: any;
   settingsLookup: Record<string, Setting>;
 
-  constructor(app) {
+  constructor(app: ComfyApp) {
     super();
     this.app = app;
     this.settingsValues = {};
@@ -83,7 +53,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     return Object.values(this.settingsLookup);
   }
 
-  #dispatchChange(id, value, oldValue?) {
+  #dispatchChange<T>(id: string, value: T, oldValue?: T) {
     this.dispatchEvent(
       new CustomEvent(id + ".change", {
         detail: {
@@ -109,26 +79,26 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     }
   }
 
-  getId(id) {
+  getId(id: string) {
     if (this.app.storageLocation === "browser") {
       id = "Comfy.Settings." + id;
     }
     return id;
   }
 
-  getSettingValue(id, defaultValue?) {
+  getSettingValue<T>(id: string, defaultValue?: T): T {
     let value = this.settingsValues[this.getId(id)];
     if (value != null) {
       if (this.app.storageLocation === "browser") {
         try {
-          value = JSON.parse(value);
+          value = JSON.parse(value) as T;
         } catch (error) {}
       }
     }
     return value ?? defaultValue;
   }
 
-  async setSettingValueAsync(id, value) {
+  async setSettingValueAsync(id: string, value: any) {
     const json = JSON.stringify(value);
     localStorage["Comfy.Settings." + id] = json; // backwards compatibility for extensions keep setting in storage
 
@@ -143,7 +113,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     await api.storeSetting(id, value);
   }
 
-  setSettingValue(id, value) {
+  setSettingValue(id: string, value: any) {
     this.setSettingValueAsync(id, value).catch((err) => {
       alert(`Error saving setting '${id}'`);
       console.error(err);
diff --git a/src/types/settingTypes.ts b/src/types/settingTypes.ts
new file mode 100644
index 000000000..c35dd0eb4
--- /dev/null
+++ b/src/types/settingTypes.ts
@@ -0,0 +1,39 @@
+export type StorageLocation = "browser" | "server";
+
+export type SettingInputType =
+  | "boolean"
+  | "number"
+  | "slider"
+  | "combo"
+  | "text"
+  | "hidden";
+
+export type SettingCustomRenderer = (
+  name: string,
+  setter: (v: any) => void,
+  value: any,
+  attrs: any
+) => HTMLElement;
+
+export interface SettingOption {
+  text: string;
+  value?: string;
+}
+
+export interface Setting {
+  id: string;
+  onChange?: (value: any, oldValue?: any) => void;
+  name: string;
+  render: () => HTMLElement;
+}
+
+export interface SettingParams {
+  id: string;
+  name: string;
+  type: SettingInputType | SettingCustomRenderer;
+  defaultValue: any;
+  onChange?: (newValue: any, oldValue?: any) => void;
+  attrs?: any;
+  tooltip?: string;
+  options?: Array<string | SettingOption> | ((value: any) => SettingOption[]);
+}