mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 18:22:40 +00:00
remove logging from vue node layouting modules (#5111)
This commit is contained in:
committed by
Benjamin Lu
parent
934c650790
commit
5a74c019c7
@@ -4,18 +4,10 @@
|
|||||||
* Implements one-way sync from Layout Store to LiteGraph.
|
* Implements one-way sync from Layout Store to LiteGraph.
|
||||||
* The layout store is the single source of truth.
|
* The layout store is the single source of truth.
|
||||||
*/
|
*/
|
||||||
import log from 'loglevel'
|
|
||||||
import { onUnmounted } from 'vue'
|
import { onUnmounted } from 'vue'
|
||||||
|
|
||||||
import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
|
import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
|
||||||
|
|
||||||
// Create a logger for layout debugging
|
|
||||||
const logger = log.getLogger('layout')
|
|
||||||
// In dev mode, always show debug logs
|
|
||||||
if (import.meta.env.DEV) {
|
|
||||||
logger.setLevel('debug')
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Composable for syncing LiteGraph with the Layout system
|
* Composable for syncing LiteGraph with the Layout system
|
||||||
* This replaces the bidirectional sync with a one-way sync
|
* This replaces the bidirectional sync with a one-way sync
|
||||||
@@ -32,12 +24,6 @@ export function useLayoutSync() {
|
|||||||
|
|
||||||
// Subscribe to layout changes
|
// Subscribe to layout changes
|
||||||
unsubscribe = layoutStore.onChange((change) => {
|
unsubscribe = layoutStore.onChange((change) => {
|
||||||
logger.debug('Layout sync received change:', {
|
|
||||||
source: change.source,
|
|
||||||
nodeIds: change.nodeIds,
|
|
||||||
type: change.type
|
|
||||||
})
|
|
||||||
|
|
||||||
// Apply changes to LiteGraph regardless of source
|
// Apply changes to LiteGraph regardless of source
|
||||||
// The layout store is the single source of truth
|
// The layout store is the single source of truth
|
||||||
for (const nodeId of change.nodeIds) {
|
for (const nodeId of change.nodeIds) {
|
||||||
@@ -52,10 +38,6 @@ export function useLayoutSync() {
|
|||||||
liteNode.pos[0] !== layout.position.x ||
|
liteNode.pos[0] !== layout.position.x ||
|
||||||
liteNode.pos[1] !== layout.position.y
|
liteNode.pos[1] !== layout.position.y
|
||||||
) {
|
) {
|
||||||
logger.debug(`Updating LiteGraph node ${nodeId} position:`, {
|
|
||||||
from: { x: liteNode.pos[0], y: liteNode.pos[1] },
|
|
||||||
to: layout.position
|
|
||||||
})
|
|
||||||
liteNode.pos[0] = layout.position.x
|
liteNode.pos[0] = layout.position.x
|
||||||
liteNode.pos[1] = layout.position.y
|
liteNode.pos[1] = layout.position.y
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -86,7 +86,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import log from 'loglevel'
|
|
||||||
import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
|
import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
|
||||||
|
|
||||||
// Import the VueNodeData type
|
// Import the VueNodeData type
|
||||||
@@ -101,13 +100,6 @@ import NodeHeader from './NodeHeader.vue'
|
|||||||
import NodeSlots from './NodeSlots.vue'
|
import NodeSlots from './NodeSlots.vue'
|
||||||
import NodeWidgets from './NodeWidgets.vue'
|
import NodeWidgets from './NodeWidgets.vue'
|
||||||
|
|
||||||
// Create logger for vue nodes
|
|
||||||
const logger = log.getLogger('vue-nodes')
|
|
||||||
// In dev mode, always show debug logs
|
|
||||||
if (import.meta.env.DEV) {
|
|
||||||
logger.setLevel('debug')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extended props for main node component
|
// Extended props for main node component
|
||||||
interface LGraphNodeProps {
|
interface LGraphNodeProps {
|
||||||
nodeData: VueNodeData
|
nodeData: VueNodeData
|
||||||
@@ -166,25 +158,6 @@ const {
|
|||||||
endDrag
|
endDrag
|
||||||
} = useNodeLayout(props.nodeData.id)
|
} = useNodeLayout(props.nodeData.id)
|
||||||
|
|
||||||
// Debug layout position
|
|
||||||
watch(
|
|
||||||
layoutPosition,
|
|
||||||
(newPos, oldPos) => {
|
|
||||||
logger.debug(`Layout position changed for node ${props.nodeData.id}:`, {
|
|
||||||
newPos,
|
|
||||||
oldPos,
|
|
||||||
layoutPositionValue: layoutPosition.value
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ immediate: true, deep: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
logger.debug(`LGraphNode mounted for ${props.nodeData.id}`, {
|
|
||||||
layoutPosition: layoutPosition.value,
|
|
||||||
propsPosition: props.position,
|
|
||||||
nodeDataId: props.nodeData.id
|
|
||||||
})
|
|
||||||
|
|
||||||
// Drag state for styling
|
// Drag state for styling
|
||||||
const isDragging = ref(false)
|
const isDragging = ref(false)
|
||||||
const dragStyle = computed(() => ({
|
const dragStyle = computed(() => ({
|
||||||
|
|||||||
@@ -4,20 +4,12 @@
|
|||||||
* Uses customRef for shared write access with Canvas renderer.
|
* Uses customRef for shared write access with Canvas renderer.
|
||||||
* Provides dragging functionality and reactive layout state.
|
* Provides dragging functionality and reactive layout state.
|
||||||
*/
|
*/
|
||||||
import log from 'loglevel'
|
|
||||||
import { computed, inject } from 'vue'
|
import { computed, inject } from 'vue'
|
||||||
|
|
||||||
import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
|
import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
|
||||||
import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
|
import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
|
||||||
import type { Point } from '@/renderer/core/layout/types'
|
import type { Point } from '@/renderer/core/layout/types'
|
||||||
|
|
||||||
// Create a logger for layout debugging
|
|
||||||
const logger = log.getLogger('layout')
|
|
||||||
// In dev mode, always show debug logs
|
|
||||||
if (import.meta.env.DEV) {
|
|
||||||
logger.setLevel('debug')
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Composable for individual Vue node components
|
* Composable for individual Vue node components
|
||||||
* Uses customRef for shared write access with Canvas renderer
|
* Uses customRef for shared write access with Canvas renderer
|
||||||
@@ -37,20 +29,10 @@ export function useNodeLayout(nodeId: string) {
|
|||||||
// Get the customRef for this node (shared write access)
|
// Get the customRef for this node (shared write access)
|
||||||
const layoutRef = store.getNodeLayoutRef(nodeId)
|
const layoutRef = store.getNodeLayoutRef(nodeId)
|
||||||
|
|
||||||
logger.debug(`useNodeLayout initialized for node ${nodeId}`, {
|
|
||||||
hasLayout: !!layoutRef.value,
|
|
||||||
initialPosition: layoutRef.value?.position
|
|
||||||
})
|
|
||||||
|
|
||||||
// Computed properties for easy access
|
// Computed properties for easy access
|
||||||
const position = computed(() => {
|
const position = computed(() => {
|
||||||
const layout = layoutRef.value
|
const layout = layoutRef.value
|
||||||
const pos = layout?.position ?? { x: 0, y: 0 }
|
const pos = layout?.position ?? { x: 0, y: 0 }
|
||||||
logger.debug(`Node ${nodeId} position computed:`, {
|
|
||||||
pos,
|
|
||||||
hasLayout: !!layout,
|
|
||||||
layoutRefValue: layout
|
|
||||||
})
|
|
||||||
return pos
|
return pos
|
||||||
})
|
})
|
||||||
const size = computed(
|
const size = computed(
|
||||||
@@ -96,12 +78,6 @@ export function useNodeLayout(nodeId: string) {
|
|||||||
*/
|
*/
|
||||||
const handleDrag = (event: PointerEvent) => {
|
const handleDrag = (event: PointerEvent) => {
|
||||||
if (!isDragging || !dragStartPos || !dragStartMouse || !transformState) {
|
if (!isDragging || !dragStartPos || !dragStartMouse || !transformState) {
|
||||||
logger.debug(`Drag skipped for node ${nodeId}:`, {
|
|
||||||
isDragging,
|
|
||||||
hasDragStartPos: !!dragStartPos,
|
|
||||||
hasDragStartMouse: !!dragStartMouse,
|
|
||||||
hasTransformState: !!transformState
|
|
||||||
})
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -125,13 +101,6 @@ export function useNodeLayout(nodeId: string) {
|
|||||||
y: dragStartPos.y + canvasDelta.y
|
y: dragStartPos.y + canvasDelta.y
|
||||||
}
|
}
|
||||||
|
|
||||||
logger.debug(`Dragging node ${nodeId}:`, {
|
|
||||||
mouseDelta,
|
|
||||||
canvasDelta,
|
|
||||||
newPosition,
|
|
||||||
currentLayoutPos: layoutRef.value?.position
|
|
||||||
})
|
|
||||||
|
|
||||||
// Apply mutation through the layout system
|
// Apply mutation through the layout system
|
||||||
mutations.moveNode(nodeId, newPosition)
|
mutations.moveNode(nodeId, newPosition)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user