+
{{ $t('Node Widgets Error') }}
@@ -56,12 +56,13 @@ import { computed, onErrorCaptured, ref } from 'vue'
import type {
SafeWidgetData,
- VueNodeData
+ VueNodeData,
+ WidgetSlotMetadata
} from '@/composables/graph/useGraphNodeManager'
import { useErrorHandling } from '@/composables/useErrorHandling'
import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
-// Import widget components directly
+import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue'
import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
import {
getComponent,
@@ -110,6 +111,7 @@ interface ProcessedWidget {
value: WidgetValue
updateHandler: (value: unknown) => void
tooltipConfig: any
+ slotMetadata?: WidgetSlotMetadata
}
const processedWidgets = computed((): ProcessedWidget[] => {
@@ -119,24 +121,42 @@ const processedWidgets = computed((): ProcessedWidget[] => {
const result: 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?.canvasOnly) continue
if (!widget.type) continue
if (!shouldRenderAsVue(widget)) continue
- const vueComponent = getComponent(widget.type) || WidgetInputText
+ const vueComponent =
+ getComponent(widget.type, widget.name) ||
+ (widget.isDOMWidget ? WidgetDOM : WidgetInputText)
+
+ const slotMetadata = widget.slotMetadata
+
+ let widgetOptions = widget.options
+ // Core feature: Disable Vue widgets when their input slots are connected
+ // This prevents conflicting input sources - when a slot is linked to another
+ // node's output, the widget should be read-only to avoid data conflicts
+ if (slotMetadata?.linked) {
+ widgetOptions = widget.options
+ ? { ...widget.options, disabled: true }
+ : { disabled: true }
+ }
const simplified: SimplifiedWidget = {
name: widget.name,
type: widget.type,
value: widget.value,
label: widget.label,
- options: widget.options,
+ options: widgetOptions,
callback: widget.callback,
spec: widget.spec
}
const updateHandler = (value: unknown) => {
+ // Update the widget value directly
+ widget.value = value as WidgetValue
+
if (widget.callback) {
widget.callback(value)
}
@@ -152,25 +172,11 @@ const processedWidgets = computed((): ProcessedWidget[] => {
simplified,
value: widget.value,
updateHandler,
- tooltipConfig
+ tooltipConfig,
+ slotMetadata
})
}
return result
})
-
-// TODO: Refactor to avoid O(n) lookup - consider storing input index on widget creation
-// or restructuring data model to unify widgets and inputs
-// Map a widget to its corresponding input slot index
-const getWidgetInputIndex = (widget: ProcessedWidget): number => {
- const inputs = nodeData?.inputs
- if (!inputs) return 0
-
- const idx = inputs.findIndex((input: any) => {
- if (!input || typeof input !== 'object') return false
- if (!('name' in input && 'type' in input)) return false
- return 'widget' in input && input.widget?.name === widget.name
- })
- return idx >= 0 ? idx : 0
-}
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 4847e13bc..a00e31c29 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -1,11 +1,11 @@
- ⚠️
+ ⚠️
{{ slotData.localized_name || slotData.name || `Output ${index}` }}
@@ -15,24 +15,21 @@
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 7a0ce4ff5..56666f833 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -3,7 +3,12 @@
-
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index 39104f545..afa290e48 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,9 +1,14 @@
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index f76365775..333966996 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -9,7 +9,8 @@
+import { onMounted, ref } from 'vue'
+
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { isDOMWidget } from '@/scripts/domWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+// Button widgets don't have a v-model value, they trigger actions
+const props = defineProps<{
+ widget: SimplifiedWidget
+ nodeId: string
+ readonly?: boolean
+}>()
+
+const domEl = ref()
+
+const { canvas } = useCanvasStore()
+onMounted(() => {
+ if (!domEl.value) return
+ const node = canvas?.graph?.getNodeById(props.nodeId) ?? undefined
+ if (!node) return
+ const widget = node.widgets?.find((w) => w.name === props.widget.name)
+ if (!widget || !isDOMWidget(widget)) return
+ domEl.value.replaceChildren(widget.element)
+})
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 2126a53cf..1dc890ede 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -7,10 +7,10 @@
style="width: calc(100% + 1rem)"
>
-
+
@@ -21,7 +21,7 @@
:options="[selectedFile?.name || '']"
:disabled="true"
v-bind="transformCompatProps"
- class="min-w-[8em] max-w-[20em] text-xs"
+ class="max-w-[20em] min-w-[8em] text-xs"
size="small"
:pt="{
option: 'text-xs'
@@ -30,7 +30,7 @@
@@ -38,31 +38,33 @@
-
-
![]()
+
+
![]()
@@ -75,10 +77,10 @@
style="width: calc(100% + 1rem)"
>
-
+
@@ -88,7 +90,7 @@
:options="[selectedFile?.name || '']"
:disabled="true"
v-bind="transformCompatProps"
- class="min-w-[8em] max-w-[20em] text-xs"
+ class="max-w-[20em] min-w-[8em] text-xs"
size="small"
:pt="{
option: 'text-xs'
@@ -97,16 +99,16 @@
-
+
@@ -116,7 +118,7 @@
-
{{ selectedFile?.name }}
+
{{ selectedFile?.name }}
{{
selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
@@ -128,10 +130,11 @@
@@ -141,14 +144,14 @@
-
+
{{ $t('Drop your file or') }}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
index fda5f1574..399edb514 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
@@ -7,10 +7,8 @@ import { createI18n } from 'vue-i18n'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import WidgetGalleria, {
- type GalleryImage,
- type GalleryValue
-} from './WidgetGalleria.vue'
+import WidgetGalleria from './WidgetGalleria.vue'
+import type { GalleryImage, GalleryValue } from './WidgetGalleria.vue'
const i18n = createI18n({
legacy: false,
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
index 3048eb618..e32acb781 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -29,18 +29,18 @@
item?.alt ||
`${t('g.galleryImage')} ${activeIndex + 1} of ${galleryImages.length}`
"
- class="w-full h-auto max-h-64 object-contain"
+ class="h-auto max-h-64 w-full object-contain"
/>
-
+
![]()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
index 798d5ee39..847ffc657 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
@@ -5,9 +5,8 @@ import { describe, expect, it } from 'vitest'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import WidgetImageCompare, {
- type ImageCompareValue
-} from './WidgetImageCompare.vue'
+import WidgetImageCompare from './WidgetImageCompare.vue'
+import type { ImageCompareValue } from './WidgetImageCompare.vue'
describe('WidgetImageCompare Display', () => {
const createMockWidget = (
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
index 83b3aa285..34516a120 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -11,14 +11,14 @@
![]()
![]()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index 46a2b10a7..ad1624f2d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -10,6 +10,7 @@ import {
filterWidgetProps
} from '@/utils/widgetPropFilter'
+import { useNumberWidgetButtonPt } from '../composables/useNumberWidgetButtonPt'
import { WidgetInputBaseClass } from './layout'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
@@ -65,17 +66,24 @@ const useGrouping = computed(() => {
// Check if increment/decrement buttons should be disabled due to precision limits
const buttonsDisabled = computed(() => {
- const currentValue = localValue.value || 0
- return !Number.isSafeInteger(currentValue)
+ const currentValue = localValue.value ?? 0
+ return (
+ !Number.isFinite(currentValue) ||
+ Math.abs(currentValue) > Number.MAX_SAFE_INTEGER
+ )
})
-// Tooltip message for disabled buttons
const buttonTooltip = computed(() => {
if (buttonsDisabled.value) {
return 'Increment/decrement disabled: value exceeds JavaScript precision limit (±2^53)'
}
return null
})
+
+const inputNumberPt = useNumberWidgetButtonPt({
+ roundedLeft: true,
+ roundedRight: true
+})
@@ -84,18 +92,14 @@ const buttonTooltip = computed(() => {
@@ -112,11 +116,16 @@ const buttonTooltip = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index 70ced5d46..e8d55741a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -10,6 +10,7 @@
v-bind="filteredProps"
class="flex-grow text-xs"
:step="stepValue"
+ :aria-label="widget.name"
@update:model-value="updateLocalValue"
/>
+
+
+
+
+
+
+
+ {{
+ isRecording
+ ? t('g.listening', 'Listening...')
+ : isPlaying
+ ? t('g.playing', 'Playing...')
+ : recordedURL
+ ? t('g.ready', 'Ready')
+ : ''
+ }}
+
+ {{ formatTime(timer) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+