Update Litegraph: Canvas Pointer (#1556)

* Litegraph: canvas.pointer

Clear @ts-expect-error

Fix exception thrown on slot double-click

Long-standing bug but has no real impact in prod - just logs an error.
Required for new connecting_link features.

Add settings: CanvasPointer options

Update litegraph 0.8.28

Fix regression in snap to grid render

Fix snap to grid marker always on

Update snap to grid to use Positionable API

Fix test clicks registering as double-click

Improve test precision

Current test proves it has changed to something smaller.
New test proves it is exactly what was specified.
Will need refinement when a limit is put on latent width.

Fix test expects collapse node to select node

Remove redundant code

Resolved by CanvasPointer

Fix flaky test - ContextMenu

Fix settings group

* Update litegraph

* Remove snapToGrid extension

* Update test expectations [skip ci]

---------

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

src/components/graph/GraphCanvas.vue

@@ -47,7 +47,8 @@ import {
   DragAndScale,
   LGraphCanvas,
   ContextMenu,
-  LGraphBadge
+  LGraphBadge,
+  CanvasPointer
 } from '@comfyorg/litegraph'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { useCanvasStore } from '@/stores/graphStore'
@@ -162,6 +163,29 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  CanvasPointer.doubleClickTime = settingStore.get(
+    'Comfy.Pointer.DoubleClickTime'
+  )
+})
+
+watchEffect(() => {
+  CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
+})
+
+watchEffect(() => {
+  CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
+})
+
+watchEffect(() => {
+  LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
+})
+
+watchEffect(() => {
+  comfyApp.graph.config.alwaysSnapToGrid =
+    settingStore.get('pysssss.SnapToGrid')
+})
+
 watchEffect(() => {
   if (!canvasStore.canvas) return
 

src/extensions/core/index.ts

@@ -15,7 +15,6 @@ import './rerouteNode'
 import './saveImageExtraOutput'
 import './simpleTouchSupport'
 import './slotDefaults'
-import './snapToGrid'
 import './uploadImage'
 import './webcamCapture'
 import './widgetInputs'

src/extensions/core/simpleTouchSupport.ts

@@ -44,7 +44,7 @@ app.registerExtension({
             lastTouch = getMultiTouchCenter(e)
 
             touchDist = getMultiTouchPos(e)
-            app.canvas.pointer_is_down = false
+            app.canvas.pointer.isDown = false
           }
         }
       },
@@ -78,7 +78,7 @@ app.registerExtension({
         touchTime = null
         if (e.touches?.length === 2 && lastTouch && !e.ctrlKey && !e.shiftKey) {
           e.preventDefault() // Prevent browser from zooming when two textareas are touched
-          app.canvas.pointer_is_down = false
+          app.canvas.pointer.isDown = false
           touchZooming = true
 
           LiteGraph.closeAllContextMenus(window)
@@ -137,7 +137,7 @@ LGraphCanvas.prototype.processMouseDown = function (e) {
   if (touchZooming || touchCount) {
     return
   }
-  app.canvas.pointer_is_down = false // Prevent context menu from opening on second tap
+  app.canvas.pointer.isDown = false // Prevent context menu from opening on second tap
   return processMouseDown.apply(this, arguments)
 }
 

src/extensions/core/snapToGrid.ts

@@ -1,40 +0,0 @@
-import { app } from '../../scripts/app'
-import { LiteGraph } from '@comfyorg/litegraph'
-
-app.registerExtension({
-  name: 'Comfy.SnapToGrid',
-  init() {
-    // Add setting to control grid size
-    app.ui.settings.addSetting({
-      id: 'Comfy.SnapToGrid.GridSize',
-      category: ['LiteGraph', 'Canvas', 'GridSize'],
-      name: 'Snap to grid size',
-      type: 'slider',
-      attrs: {
-        min: 1,
-        max: 500
-      },
-      tooltip:
-        'When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.',
-      defaultValue: LiteGraph.CANVAS_GRID_SIZE,
-      onChange(value) {
-        LiteGraph.CANVAS_GRID_SIZE = +value || 10
-      }
-    })
-
-    // Keep the 'pysssss.SnapToGrid' setting id so we don't need to migrate setting values.
-    // Using a new setting id can cause existing users to lose their existing settings.
-    app.ui.settings.addSetting({
-      id: 'pysssss.SnapToGrid',
-      category: ['LiteGraph', 'Canvas', 'AlwaysSnapToGrid'],
-      name: 'Always snap to grid',
-      type: 'boolean',
-      defaultValue: false,
-      versionAdded: '1.3.13',
-      versionModified: '1.3.42',
-      onChange(value) {
-        app.graph.config.alwaysSnapToGrid = !!value
-      }
-    })
-  }
-})

src/extensions/core/widgetInputs.ts

@@ -894,7 +894,7 @@ app.registerExtension({
         // Not a widget input or already handled input
         if (
           !(input.type in ComfyWidgets) &&
-          !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)
+          !(input.widget?.[GET_CONFIG]?.()?.[0] instanceof Array)
         ) {
           return r //also Not a ComfyWidgets input or combo (do nothing)
         }

src/scripts/app.ts

@@ -1089,7 +1089,6 @@ export class ComfyApp {
       'dragover',
       (e) => {
         this.canvas.adjustMouseEvent(e)
-        // @ts-expect-error: canvasX and canvasY are added by adjustMouseEvent in litegraph
         const node = this.graph.getNodeOnPos(e.canvasX, e.canvasY)
         if (node) {
           // @ts-expect-error This is not a standard event. TODO fix it.

src/stores/coreSettings.ts

@@ -535,5 +535,75 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: true,
     versionAdded: '1.4.0'
+  },
+  {
+    id: 'Comfy.Pointer.ClickDrift',
+    category: ['LiteGraph', 'Pointer', 'ClickDrift'],
+    name: 'Pointer click drift (maximum distance)',
+    tooltip:
+      'If the pointer moves more than this distance while holding a button down, it is considered dragging (rather than clicking).\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking.',
+    experimental: true,
+    type: 'slider',
+    attrs: {
+      min: 0,
+      max: 20,
+      step: 1
+    },
+    defaultValue: 6,
+    versionAdded: '1.4.3'
+  },
+  {
+    id: 'Comfy.Pointer.ClickBufferTime',
+    category: ['LiteGraph', 'Pointer', 'ClickBufferTime'],
+    name: 'Pointer click drift delay',
+    tooltip:
+      'After pressing a pointer button down, this is the maximum time (in milliseconds) that pointer movement can be ignored for.\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking.',
+    experimental: true,
+    type: 'slider',
+    attrs: {
+      min: 0,
+      max: 1000,
+      step: 25
+    },
+    defaultValue: 150,
+    versionAdded: '1.4.3'
+  },
+  {
+    id: 'Comfy.Pointer.DoubleClickTime',
+    category: ['LiteGraph', 'Pointer', 'DoubleClickTime'],
+    name: 'Double click interval (maximum)',
+    tooltip:
+      'The maximum time in milliseconds between the two clicks of a double-click.  Increasing this value may assist if double-clicks are sometimes not registered.',
+    type: 'slider',
+    attrs: {
+      min: 100,
+      max: 1000,
+      step: 50
+    },
+    defaultValue: 300,
+    versionAdded: '1.4.3'
+  },
+  {
+    id: 'Comfy.SnapToGrid.GridSize',
+    category: ['LiteGraph', 'Canvas', 'GridSize'],
+    name: 'Snap to grid size',
+    type: 'slider',
+    attrs: {
+      min: 1,
+      max: 500
+    },
+    tooltip:
+      'When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.',
+    defaultValue: LiteGraph.CANVAS_GRID_SIZE
+  },
+  // Keep the 'pysssss.SnapToGrid' setting id so we don't need to migrate setting values.
+  // Using a new setting id can cause existing users to lose their existing settings.
+  {
+    id: 'pysssss.SnapToGrid',
+    category: ['LiteGraph', 'Canvas', 'AlwaysSnapToGrid'],
+    name: 'Always snap to grid',
+    type: 'boolean',
+    defaultValue: false,
+    versionAdded: '1.3.13'
   }
 ]