diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 9c49e1704..4520f15b6 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -961,9 +961,7 @@ audio.comfy-audio.empty-audio-widget { /* Uses default styling - no overrides needed */ } -/* Smooth transitions between LOD levels */ .lg-node { - transition: min-height 0.2s ease; /* Disable text selection on all nodes */ user-select: none; -webkit-user-select: none; diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index 78ac4effd..754bd323a 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -8,7 +8,6 @@ :class=" cn( 'bg-white dark-theme:bg-charcoal-100', - 'min-w-[445px]', 'lg-node absolute rounded-2xl', // border 'border border-solid border-sand-100 dark-theme:border-charcoal-300', @@ -131,6 +130,7 @@ import { computed, inject, onErrorCaptured, + onMounted, provide, ref, toRef, @@ -170,6 +170,8 @@ interface LGraphNodeProps { const { nodeData, + position, + size, error = null, readonly = false, zoomLevel = 1 @@ -202,6 +204,21 @@ if (!selectedNodeIds) { ) } +// Inject transform state for coordinate conversion +const transformState = inject('transformState') as + | { + camera: { z: number } + canvasToScreen: (point: { x: number; y: number }) => { + x: number + y: number + } + screenToCanvas: (point: { x: number; y: number }) => { + x: number + y: number + } + } + | undefined + // Computed selection state - only this node re-evaluates when its selection changes const isSelected = computed(() => { return selectedNodeIds.value.has(nodeData.id) @@ -250,9 +267,21 @@ const { zIndex, startDrag, handleDrag: handleLayoutDrag, - endDrag + endDrag, + resize } = useNodeLayout(nodeData.id) +onMounted(() => { + if (size && transformState) { + const scale = transformState.camera.z + const screenSize = { + width: size.width * scale, + height: size.height * scale + } + resize(screenSize) + } +}) + // Drag state for styling const isDragging = ref(false) const dragStyle = computed(() => ({