mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 11:11:53 +00:00
fix(vueNodes): sync extension-driven node.setSize() to Vue components
This commit is contained in:
@@ -16,6 +16,7 @@ import type {
|
|||||||
IWidgetOptions
|
IWidgetOptions
|
||||||
} from '@/lib/litegraph/src/types/widgets'
|
} from '@/lib/litegraph/src/types/widgets'
|
||||||
import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
|
import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
|
||||||
|
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
||||||
import { LayoutSource } from '@/renderer/core/layout/types'
|
import { LayoutSource } from '@/renderer/core/layout/types'
|
||||||
import type { NodeId } from '@/renderer/core/layout/types'
|
import type { NodeId } from '@/renderer/core/layout/types'
|
||||||
import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
|
import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
|
||||||
@@ -322,7 +323,7 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
|
|||||||
|
|
||||||
export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
|
export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
|
||||||
// Get layout mutations composable
|
// Get layout mutations composable
|
||||||
const { createNode, deleteNode, setSource } = useLayoutMutations()
|
const { createNode, deleteNode, resizeNode, setSource } = useLayoutMutations()
|
||||||
// Safe reactive data extracted from LiteGraph nodes
|
// Safe reactive data extracted from LiteGraph nodes
|
||||||
const vueNodeData = reactive(new Map<string, VueNodeData>())
|
const vueNodeData = reactive(new Map<string, VueNodeData>())
|
||||||
|
|
||||||
@@ -396,6 +397,14 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
|
|||||||
// Store non-reactive reference to original node
|
// Store non-reactive reference to original node
|
||||||
nodeRefs.set(id, node)
|
nodeRefs.set(id, node)
|
||||||
|
|
||||||
|
// Chain onResize to propagate extension-driven size changes to the store
|
||||||
|
node.onResize = useChainCallback(node.onResize, (size) => {
|
||||||
|
const current = layoutStore.getNodeLayoutRef(id).value?.size
|
||||||
|
if (current?.width === size[0] && current?.height === size[1]) return
|
||||||
|
setSource(LayoutSource.Canvas)
|
||||||
|
resizeNode(id, { width: size[0], height: size[1] })
|
||||||
|
})
|
||||||
|
|
||||||
// Extract initial data for Vue (may be incomplete during graph configure)
|
// Extract initial data for Vue (may be incomplete during graph configure)
|
||||||
vueNodeData.set(id, extractVueNodeData(node))
|
vueNodeData.set(id, extractVueNodeData(node))
|
||||||
|
|
||||||
|
|||||||
@@ -164,6 +164,7 @@ import {
|
|||||||
nextTick,
|
nextTick,
|
||||||
onErrorCaptured,
|
onErrorCaptured,
|
||||||
onMounted,
|
onMounted,
|
||||||
|
onUnmounted,
|
||||||
ref,
|
ref,
|
||||||
watch
|
watch
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
@@ -186,6 +187,7 @@ import { useTelemetry } from '@/platform/telemetry'
|
|||||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||||
import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
|
import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
|
||||||
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
||||||
|
import { LayoutSource } from '@/renderer/core/layout/types'
|
||||||
import SlotConnectionDot from '@/renderer/extensions/vueNodes/components/SlotConnectionDot.vue'
|
import SlotConnectionDot from '@/renderer/extensions/vueNodes/components/SlotConnectionDot.vue'
|
||||||
import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
|
import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
|
||||||
import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
|
import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
|
||||||
@@ -343,6 +345,25 @@ function initSizeStyles() {
|
|||||||
el.style.setProperty(`--node-height${suffix}`, `${height}px`)
|
el.style.setProperty(`--node-height${suffix}`, `${height}px`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// React to extension-driven resize operations (e.g., KJNodes spline editor)
|
||||||
|
const unsubscribeResize = layoutStore.onChange((change) => {
|
||||||
|
if (change.source !== LayoutSource.Canvas) return
|
||||||
|
if (change.operation.type !== 'resizeNode') return
|
||||||
|
if (!change.nodeIds.includes(nodeData.id)) return
|
||||||
|
if (isCollapsed.value) return
|
||||||
|
|
||||||
|
const el = nodeContainerRef.value
|
||||||
|
if (!el) return
|
||||||
|
|
||||||
|
const newSize = size.value
|
||||||
|
el.style.setProperty('--node-width', `${newSize.width}px`)
|
||||||
|
el.style.setProperty('--node-height', `${newSize.height}px`)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
unsubscribeResize()
|
||||||
|
})
|
||||||
|
|
||||||
const baseResizeHandleClasses =
|
const baseResizeHandleClasses =
|
||||||
'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40'
|
'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40'
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user