Merge branch 'main' into lazy-widgets-refresh-button

browser_tests/assets/widgets/seed_widget.json

@@ -0,0 +1,43 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "DevToolsNodeWithSeedInput",
+      "pos": [
+        20,
+        50
+      ],
+      "size": [
+        315,
+        82
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithSeedInput"
+      },
+      "widgets_values": [
+        0,
+        "randomize"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -62,6 +62,9 @@ export class NodeWidgetReference {
     readonly node: NodeReference
   ) {}
 
+  /**
+   * @returns The position of the widget's center
+   */
   async getPosition(): Promise<Position> {
     const pos: [number, number] = await this.node.comfyPage.page.evaluate(
       ([id, index]) => {
@@ -89,6 +92,22 @@ export class NodeWidgetReference {
       position: await this.getPosition()
     })
   }
+
+  async dragHorizontal(delta: number) {
+    const pos = await this.getPosition()
+    const canvas = this.node.comfyPage.canvas
+    const canvasPos = (await canvas.boundingBox())!
+    this.node.comfyPage.dragAndDrop(
+      {
+        x: canvasPos.x + pos.x,
+        y: canvasPos.y + pos.y
+      },
+      {
+        x: canvasPos.x + pos.x + delta,
+        y: canvasPos.y + pos.y
+      }
+    )
+  }
 }
 
 export class NodeReference {

browser_tests/widget.spec.ts

@@ -40,3 +40,47 @@ test.describe('Boolean widget', () => {
     )
   })
 })
+
+test.describe('Slider widget', () => {
+  test('Can drag adjust value', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('simple_slider')
+    await comfyPage.page.waitForTimeout(300)
+    const node = (await comfyPage.getFirstNodeRef())!
+    const widget = await node.getWidget(0)
+
+    await comfyPage.page.evaluate(() => {
+      const widget = window['app'].graph.nodes[0].widgets[0]
+      widget.callback = (value: number) => {
+        window['widgetValue'] = value
+      }
+    })
+    await widget.dragHorizontal(50)
+    await expect(comfyPage.canvas).toHaveScreenshot('slider_widget_dragged.png')
+
+    expect(
+      await comfyPage.page.evaluate(() => window['widgetValue'])
+    ).toBeDefined()
+  })
+})
+
+test.describe('Number widget', () => {
+  test('Can drag adjust value', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('widgets/seed_widget')
+    await comfyPage.page.waitForTimeout(300)
+
+    const node = (await comfyPage.getFirstNodeRef())!
+    const widget = await node.getWidget(0)
+    await comfyPage.page.evaluate(() => {
+      const widget = window['app'].graph.nodes[0].widgets[0]
+      widget.callback = (value: number) => {
+        window['widgetValue'] = value
+      }
+    })
+    await widget.dragHorizontal(50)
+    await expect(comfyPage.canvas).toHaveScreenshot('seed_widget_dragged.png')
+
+    expect(
+      await comfyPage.page.evaluate(() => window['widgetValue'])
+    ).toBeDefined()
+  })
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.9.10",
+  "version": "1.9.12",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.16",
-    "@comfyorg/litegraph": "^0.8.75",
+    "@comfyorg/litegraph": "^0.8.76",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

scripts/update-litegraph.js

@@ -26,8 +26,10 @@ try {
 
   // Create the PR
   console.log('Creating PR...')
+  const prBody = `Automated update of litegraph to version ${newVersion}.
+Ref: https://github.com/Comfy-Org/litegraph.js/releases/tag/v${newVersion}`
   execSync(
-    `gh pr create --title "Update litegraph ${newVersion}" --label "dependencies" --body "Automated update of litegraph to version ${newVersion}"`,
+    `gh pr create --title "Update litegraph ${newVersion}" --label "dependencies" --body "${prBody}"`,
     { stdio: 'inherit' }
   )
 

src/components/load3d/Load3DAnimationControls.vue

@@ -3,9 +3,18 @@
     <Load3DControls
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
+      :showPreview="showPreview"
+      :lightIntensity="lightIntensity"
+      :showLightIntensityButton="showLightIntensityButton"
+      :fov="fov"
+      :showFOVButton="showFOVButton"
+      :showPreviewButton="showPreviewButton"
       @toggleCamera="onToggleCamera"
       @toggleGrid="onToggleGrid"
+      @togglePreview="onTogglePreview"
       @updateBackgroundColor="onUpdateBackgroundColor"
+      @updateLightIntensity="onUpdateLightIntensity"
+      @updateFOV="onUpdateFOV"
       ref="load3dControlsRef"
     />
 
@@ -56,15 +65,24 @@ const props = defineProps<{
   playing: boolean
   backgroundColor: string
   showGrid: boolean
+  showPreview: boolean
+  lightIntensity: number
+  showLightIntensityButton: boolean
+  fov: number
+  showFOVButton: boolean
+  showPreviewButton: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'toggleCamera'): void
   (e: 'toggleGrid', value: boolean): void
+  (e: 'togglePreview', value: boolean): void
   (e: 'updateBackgroundColor', color: string): void
   (e: 'togglePlay', value: boolean): void
   (e: 'speedChange', value: number): void
   (e: 'animationChange', value: number): void
+  (e: 'updateLightIntensity', value: number): void
+  (e: 'updateFOV', value: number): void
 }>()
 
 const animations = ref(props.animations)
@@ -73,6 +91,12 @@ const selectedSpeed = ref(1)
 const selectedAnimation = ref(0)
 const backgroundColor = ref(props.backgroundColor)
 const showGrid = ref(props.showGrid)
+const showPreview = ref(props.showPreview)
+const lightIntensity = ref(props.lightIntensity)
+const showLightIntensityButton = ref(props.showLightIntensityButton)
+const fov = ref(props.fov)
+const showFOVButton = ref(props.showFOVButton)
+const showPreviewButton = ref(props.showPreviewButton)
 const load3dControlsRef = ref(null)
 
 const speedOptions = [
@@ -87,13 +111,36 @@ watch(backgroundColor, (newValue) => {
   load3dControlsRef.value.backgroundColor = newValue
 })
 
+watch(showLightIntensityButton, (newValue) => {
+  load3dControlsRef.value.showLightIntensityButton = newValue
+})
+
+watch(showFOVButton, (newValue) => {
+  load3dControlsRef.value.showFOVButton = newValue
+})
+
+watch(showPreviewButton, (newValue) => {
+  load3dControlsRef.value.showPreviewButton = newValue
+})
+
 const onToggleCamera = () => {
   emit('toggleCamera')
 }
 const onToggleGrid = (value: boolean) => emit('toggleGrid', value)
+const onTogglePreview = (value: boolean) => {
+  emit('togglePreview', value)
+}
 const onUpdateBackgroundColor = (color: string) =>
   emit('updateBackgroundColor', color)
 
+const onUpdateLightIntensity = (lightIntensity: number) => {
+  emit('updateLightIntensity', lightIntensity)
+}
+
+const onUpdateFOV = (fov: number) => {
+  emit('updateFOV', fov)
+}
+
 const togglePlay = () => {
   playing.value = !playing.value
   emit('togglePlay', playing.value)
@@ -112,6 +159,10 @@ defineExpose({
   selectedAnimation,
   playing,
   backgroundColor,
-  showGrid
+  showGrid,
+  lightIntensity,
+  showLightIntensityButton,
+  fov,
+  showFOVButton
 })
 </script>