Add canvas maximum FPS setting (#1727)

* Add canvas maximum FPS setting

* Update litegraph

---------

Co-authored-by: huchenlei <huchenlei@proton.me>

package.json

@@ -80,7 +80,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.3.19",
-    "@comfyorg/litegraph": "^0.8.39",
+    "@comfyorg/litegraph": "^0.8.40",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",

src/components/graph/GraphCanvas.vue

@@ -163,6 +163,12 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
+  const { canvas } = canvasStore
+  if (canvas) canvas.maximumFps = maximumFps
+})
+
 watchEffect(() => {
   CanvasPointer.doubleClickTime = settingStore.get(
     'Comfy.Pointer.DoubleClickTime'

src/constants/coreSettings.ts

@@ -636,5 +636,18 @@ export const CORE_SETTINGS: SettingParams[] = [
     },
     defaultValue: 64,
     versionAdded: '1.4.12'
+  },
+  {
+    id: 'LiteGraph.Canvas.MaximumFps',
+    name: 'Maxium FPS',
+    tooltip:
+      'The maximum frames per second that the canvas is allowed to render. Caps GPU usage at the cost of smoothness. If 0, the screen refresh rate is used. Default: 0',
+    type: 'slider',
+    attrs: {
+      min: 0,
+      max: 120
+    },
+    defaultValue: 0,
+    versionAdded: '1.5.1'
   }
 ]

src/types/apiTypes.ts

@@ -521,7 +521,8 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Node.AutoSnapLinkToSlot': z.boolean(),
       'Comfy.Node.SnapHighlightsNode': z.boolean(),
       'Comfy.Server.ServerConfigValues': z.record(z.string(), z.any()),
-      'Comfy.Server.LaunchArgs': z.record(z.string(), z.string())
+      'Comfy.Server.LaunchArgs': z.record(z.string(), z.string()),
+      'LiteGraph.Canvas.MaximumFps': z.number()
     })
     .optional()
 )