diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts index a1e3b94471..c134f53bd9 100644 --- a/src/composables/graph/useGraphNodeManager.ts +++ b/src/composables/graph/useGraphNodeManager.ts @@ -3,7 +3,8 @@ * Provides event-driven reactivity with performance optimizations */ import { reactiveComputed } from '@vueuse/core' -import { reactive, shallowReactive } from 'vue' +import { reactive, ref, shallowReactive, watch } from 'vue' +import type { Ref } from 'vue' import { useChainCallback } from '@/composables/functional/useChainCallback' import type { @@ -20,7 +21,7 @@ import type { NodeId } from '@/renderer/core/layout/types' import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' import { isDOMWidget } from '@/scripts/domWidget' import { useNodeDefStore } from '@/stores/nodeDefStore' -import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget' +import type { WidgetValue, ControlOptions } from '@/types/simplifiedWidget' import { normalizeControlOption } from '@/types/simplifiedWidget' import type { @@ -42,14 +43,14 @@ export interface SafeWidgetData { name: string type: string value: WidgetValue + borderStyle?: string + callback?: ((value: unknown) => void) | undefined + controlWidget?: () => Ref + isDOMWidget?: boolean label?: string options?: IWidgetOptions - callback?: ((value: unknown) => void) | undefined - spec?: InputSpec slotMetadata?: WidgetSlotMetadata - isDOMWidget?: boolean - controlWidget?: SafeControlWidget - borderStyle?: string + spec?: InputSpec } export interface VueNodeData { @@ -86,15 +87,19 @@ export interface GraphNodeManager { cleanup(): void } -function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined { +function getControlWidget(widget: IBaseWidget): (() => Ref)|undefined { const cagWidget = widget.linkedWidgets?.find( (w) => w.name == 'control_after_generate' ) if (!cagWidget) return - return { - value: normalizeControlOption(cagWidget.value), - update: (value) => (cagWidget.value = normalizeControlOption(value)) - } + const cagRef = ref( + normalizeControlOption(cagWidget.value) + ) + watch(cagRef, (value) => { + cagWidget.value = normalizeControlOption(value) + cagWidget.callback?.(cagWidget.value) + }) + return () => cagRef } export function safeWidgetMapper( diff --git a/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue index 7ef00c30eb..0621e0e73b 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue @@ -3,15 +3,15 @@ import Button from 'primevue/button' import Popover from 'primevue/popover' import ToggleSwitch from 'primevue/toggleswitch' import { computed, ref } from 'vue' +import type { Ref } from 'vue' import { useSettingStore } from '@/platform/settings/settingStore' import { useDialogService } from '@/services/dialogService' - -import { NumberControlMode } from '../composables/useStepperControl' +import type { ControlOptions } from '@/types/simplifiedWidget' type ControlOption = { description: string - mode: NumberControlMode + mode: ControlOptions icon?: string text?: string title: string @@ -26,33 +26,21 @@ const toggle = (event: Event) => { } defineExpose({ toggle }) -const ENABLE_LINK_TO_GLOBAL = false - const controlOptions: ControlOption[] = [ - ...(ENABLE_LINK_TO_GLOBAL - ? ([ - { - mode: NumberControlMode.LINK_TO_GLOBAL, - icon: 'pi pi-link', - title: 'linkToGlobal', - description: 'linkToGlobalDesc' - } satisfies ControlOption - ] as ControlOption[]) - : []), { - mode: NumberControlMode.RANDOMIZE, + mode: 'randomize', icon: 'icon-[lucide--shuffle]', title: 'randomize', description: 'randomizeDesc' }, { - mode: NumberControlMode.INCREMENT, + mode: 'increment', text: '+1', title: 'increment', description: 'incrementDesc' }, { - mode: NumberControlMode.DECREMENT, + mode: 'decrement', text: '-1', title: 'decrement', description: 'decrementDesc' @@ -64,20 +52,16 @@ const widgetControlMode = computed(() => ) const props = defineProps<{ - controlMode: NumberControlMode + controlWidget: () => Ref }>() -const emit = defineEmits<{ - 'update:controlMode': [mode: NumberControlMode] -}>() - -const handleToggle = (mode: NumberControlMode) => { - if (props.controlMode === mode) return - emit('update:controlMode', mode) +const handleToggle = (mode: ControlOptions) => { + if (props.controlWidget().value === mode) return + props.controlWidget().value = mode } -const isActive = (mode: NumberControlMode) => { - return props.controlMode === mode +const isActive = (mode: ControlOptions) => { + return props.controlWidget().value === mode } const handleEditSettings = () => { @@ -131,10 +115,6 @@ const handleEditSettings = () => {
- - {{ $t('widgets.numberControl.linkToGlobal') }} - {{ $t('widgets.numberControl.linkToGlobalSeed') }} - {{ $t(`widgets.numberControl.${option.title}`) }} diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue index 0894114134..06b1c14645 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue @@ -1,11 +1,14 @@