Add canvas maximum FPS setting (#1727)

* Add canvas maximum FPS setting

* Update litegraph

---------

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

package-lock.json

@@ -1,17 +1,17 @@
 {
-  "name": "comfyui-frontend",
+  "name": "@comfyorg/comfyui-frontend",
   "version": "1.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "comfyui-frontend",
+      "name": "@comfyorg/comfyui-frontend",
       "version": "1.5.0",
       "license": "GPL-3.0-only",
       "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",
@@ -1929,9 +1929,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.39",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.39.tgz",
-      "integrity": "sha512-DvS61hMsKtCOwuiWoc9inNcyNItX/TV4TzM14ITgOeVVBK8glqAJ/7p7XIMzypM9CffyRYW+qRHiqu2BhNLfjQ==",
+      "version": "0.8.40",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.40.tgz",
+      "integrity": "sha512-JYoih4/JaeUQlgyzyI7/jOPJxXdsxY6CErHHb5YSSk7h6oiDv0wi2zYBQ9Jy68KxTys35+CeO8N2rhx/4H5raA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

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()
 )