Webcam capture Node

src/composables/graph/useGraphNodeManager.ts

@@ -75,6 +75,16 @@ export interface GraphNodeManager {
   // Access to original LiteGraph nodes (non-reactive)
   getNode(id: string): LGraphNode | undefined
 
+  // Update widget options (e.g., hidden, disabled) - triggers Vue reactivity
+  updateVueWidgetOptions(
+    nodeId: string,
+    widgetName: string,
+    options: Record<string, unknown>
+  ): void
+
+  // Refresh Vue widgets from LiteGraph node - use after modifying node.widgets
+  refreshVueWidgets(nodeId: string): void
+
   // Lifecycle methods
   cleanup(): void
 }
@@ -298,6 +308,67 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
+  /**
+   * Updates Vue state when widget options change (e.g., hidden, disabled)
+   */
+  const updateVueWidgetOptions = (
+    nodeId: string,
+    widgetName: string,
+    options: Record<string, unknown>
+  ): void => {
+    try {
+      const currentData = vueNodeData.get(nodeId)
+      if (!currentData?.widgets) return
+
+      const updatedWidgets = currentData.widgets.map((w) =>
+        w.name === widgetName
+          ? { ...w, options: { ...w.options, ...options } }
+          : w
+      )
+      // Create a completely new object to ensure Vue reactivity triggers
+      const updatedData = {
+        ...currentData,
+        widgets: updatedWidgets
+      }
+
+      vueNodeData.set(nodeId, updatedData)
+    } catch (error) {
+      console.error('Error updating widget options:', error)
+    }
+  }
+
+  /**
+   * Refreshes Vue widget state from LiteGraph node widgets.
+   * Use this after directly modifying node.widgets to sync Vue state.
+   */
+  const refreshVueWidgets = (nodeId: string): void => {
+    try {
+      const node = nodeRefs.get(nodeId)
+      const currentData = vueNodeData.get(nodeId)
+      if (!node || !currentData) return
+
+      // Re-extract widgets from node
+      const slotMetadata = new Map<string, WidgetSlotMetadata>()
+      node.inputs?.forEach((input, index) => {
+        if (!input?.widget?.name) return
+        slotMetadata.set(input.widget.name, {
+          index,
+          linked: input.link != null
+        })
+      })
+
+      const freshWidgets =
+        node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
+
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        widgets: freshWidgets
+      })
+    } catch (error) {
+      console.error('Error refreshing Vue widgets:', error)
+    }
+  }
+
   /**
    * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
    */
@@ -624,6 +695,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   return {
     vueNodeData,
     getNode,
+    updateVueWidgetOptions,
+    refreshVueWidgets,
     cleanup
   }
 }

src/locales/en/main.json

@@ -95,6 +95,9 @@
     "save": "Save",
     "saving": "Saving",
     "no": "No",
+    "yes": "Yes",
+    "on": "On",
+    "off": "Off",
     "cancel": "Cancel",
     "close": "Close",
     "pressKeysForNewBinding": "Press keys for new binding",
@@ -144,6 +147,18 @@
     "control_before_generate": "control before generate",
     "choose_file_to_upload": "choose file to upload",
     "capture": "capture",
+    "capturePhoto": "Capture Photo",
+    "captureModeOnRun": "On Run",
+    "captureModeManual": "Manually",
+    "capturedImage": "Captured Image",
+    "retakePhoto": "Retake photo",
+    "clickToStopLivePreview": "Click to stop live preview",
+    "failedToCaptureImage": "Failed to capture image",
+    "noWebcamImageCaptured": "No webcam image captured",
+    "errorCapturingImage": "Error capturing image: {error}",
+    "unableToLoadWebcam": "Unable to load webcam: {error}",
+    "webcamRequiresTLS": "Unable to load webcam. TLS is required when not on localhost. Error: {error}",
+    "turnOnCamera": "Turn on Camera",
     "nodes": "Nodes",
     "community": "Community",
     "all": "All",

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -133,7 +133,9 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
   for (const widget of widgets) {
     // Skip if widget is in the hidden list for this node type
-    if (widget.options?.hidden) continue
+    if (widget.options?.hidden) {
+      continue
+    }
     if (widget.options?.canvasOnly) continue
     if (!widget.type) continue
     if (!shouldRenderAsVue(widget)) continue

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
-      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
+      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2 my-2"
       v-bind="filteredProps"
       :aria-label="widget.label"
       size="small"

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectToggle.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | boolean>
+}>()
+
+const modelValue = defineModel<string | number | boolean>({ required: true })
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+interface ToggleOption {
+  label: string
+  value: string | number | boolean
+}
+
+const options = computed<ToggleOption[]>(() => {
+  // Get options from widget spec or widget options
+  const widgetOptions = props.widget.options?.values || props.widget.spec?.[0]
+
+  if (Array.isArray(widgetOptions)) {
+    // If options are strings/numbers, convert to {label, value} format
+    return widgetOptions.map((opt) => {
+      if (
+        typeof opt === 'object' &&
+        opt !== null &&
+        'label' in opt &&
+        'value' in opt
+      ) {
+        return opt as ToggleOption
+      }
+      return { label: String(opt), value: opt }
+    })
+  }
+
+  // Default options for boolean widgets
+  if (typeof modelValue.value === 'boolean') {
+    return [
+      { label: t('g.on', 'On'), value: true },
+      { label: t('g.off', 'Off'), value: false }
+    ]
+  }
+
+  // Fallback default options
+  return [
+    { label: t('g.yes', 'Yes'), value: true },
+    { label: t('g.no', 'No'), value: false }
+  ]
+})
+
+function handleSelect(value: string | number | boolean) {
+  modelValue.value = value
+}
+</script>
+
+<template>
+  <WidgetLayoutField :widget>
+    <div
+      v-bind="filteredProps"
+      :class="cn(WidgetInputBaseClass, 'flex gap-0.5 p-0.5 w-full')"
+      role="group"
+      :aria-label="widget.name"
+    >
+      <button
+        v-for="option in options"
+        :key="String(option.value)"
+        type="button"
+        :class="
+          cn(
+            'flex-1 px-2 py-1 text-xs font-medium rounded transition-all duration-150',
+            'bg-transparent border-none',
+            'focus:outline-none',
+            modelValue === option.value
+              ? 'bg-interface-menu-component-surface-selected text-base-foreground'
+              : 'text-muted-foreground hover:bg-interface-menu-component-surface-hovered'
+          )
+        "
+        :aria-pressed="modelValue === option.value"
+        @click="handleSelect(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </WidgetLayoutField>
+</template>