Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Refactor] Extract litegraph settings sync to a composable (#2461)

Browse Source
This commit is contained in:
Chenlei Hu
2025-02-06 15:21:11 -05:00
committed by GitHub
parent 7ddcac88d7
commit 2da23fd373
2 changed files with 130 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/graph/GraphCanvas.vue
View File

@@ -29,7 +29,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
import { computed, onMounted, ref, watch, watchEffect } from 'vue' import { computed, onMounted, ref, watch, watchEffect } from 'vue'
import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue' import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -45,6 +44,7 @@ import { useCanvasDrop } from '@/composables/useCanvasDrop'
import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation' import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
import { useCopy } from '@/composables/useCopy' import { useCopy } from '@/composables/useCopy'
import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph' import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
import { usePaste } from '@/composables/usePaste' import { usePaste } from '@/composables/usePaste'
import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence' import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
import { CORE_SETTINGS } from '@/constants/coreSettings' import { CORE_SETTINGS } from '@/constants/coreSettings'
@@ -79,42 +79,6 @@ const canvasMenuEnabled = computed(() =>
) )
const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips')) const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
watchEffect(() => {
const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
if (canvasStore.canvas) {
canvasStore.canvas.show_info = canvasInfoEnabled
}
})
watchEffect(() => {
const zoomSpeed = settingStore.get('Comfy.Graph.ZoomSpeed')
if (canvasStore.canvas) {
canvasStore.canvas.zoom_speed = zoomSpeed
}
})
watchEffect(() => {
LiteGraph.snaps_for_comfy = settingStore.get('Comfy.Node.AutoSnapLinkToSlot')
})
watchEffect(() => {
LiteGraph.snap_highlights_node = settingStore.get(
'Comfy.Node.SnapHighlightsNode'
)
})
watchEffect(() => {
LGraphNode.keepAllLinksOnBypass = settingStore.get(
'Comfy.Node.BypassAllLinksOnDelete'
)
})
watchEffect(() => {
LiteGraph.middle_click_slot_add_default_node = settingStore.get(
'Comfy.Node.MiddleClickRerouteNode'
)
})
watchEffect(() => { watchEffect(() => {
nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated') nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
}) })
@@ -137,77 +101,6 @@ watchEffect(() => {
}) })
}) })
watchEffect(() => {
const linkRenderMode = settingStore.get('Comfy.LinkRenderMode')
if (canvasStore.canvas) {
canvasStore.canvas.links_render_mode = linkRenderMode
canvasStore.canvas.setDirty(/* fg */ false, /* bg */ true)
}
})
watchEffect(() => {
const lowQualityRenderingZoomThreshold = settingStore.get(
'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
)
if (canvasStore.canvas) {
canvasStore.canvas.low_quality_zoom_threshold =
lowQualityRenderingZoomThreshold
canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
}
})
watchEffect(() => {
const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
const { canvas } = canvasStore
if (canvas) {
canvas.linkMarkerShape = linkMarkerShape
canvas.setDirty(false, true)
}
})
watchEffect(() => {
const reroutesEnabled = settingStore.get('Comfy.RerouteBeta')
const { canvas } = canvasStore
if (canvas) {
canvas.reroutesEnabled = reroutesEnabled
canvas.setDirty(false, true)
}
})
watchEffect(() => {
const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
const { canvas } = canvasStore
if (canvas) canvas.maximumFps = maximumFps
})
watchEffect(() => {
const dragZoomEnabled = settingStore.get('Comfy.Graph.CtrlShiftZoom')
const { canvas } = canvasStore
if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
})
watchEffect(() => {
CanvasPointer.doubleClickTime = settingStore.get(
'Comfy.Pointer.DoubleClickTime'
)
})
watchEffect(() => {
CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
})
watchEffect(() => {
CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
})
watchEffect(() => {
LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
})
watchEffect(() => {
LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
})
watch( watch(
() => settingStore.get('Comfy.WidgetControlMode'), () => settingStore.get('Comfy.WidgetControlMode'),
() => { () => {
@@ -247,12 +140,6 @@ watch(
} }
) )
watchEffect(() => {
LiteGraph.context_menu_scaling = settingStore.get(
'LiteGraph.ContextMenu.Scaling'
)
})
const loadCustomNodesI18n = async () => { const loadCustomNodesI18n = async () => {
try { try {
const i18nData = await api.getCustomNodesI18n() const i18nData = await api.getCustomNodesI18n()
@@ -267,6 +154,7 @@ const loadCustomNodesI18n = async () => {
const comfyAppReady = ref(false) const comfyAppReady = ref(false)
const workflowPersistence = useWorkflowPersistence() const workflowPersistence = useWorkflowPersistence()
useCanvasDrop(canvasRef) useCanvasDrop(canvasRef)
useLitegraphSettings()
onMounted(async () => { onMounted(async () => {
useGlobalLitegraph() useGlobalLitegraph()

128
src/composables/useLitegraphSettings.ts Normal file
View File

@@ -0,0 +1,128 @@
import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
import { watchEffect } from 'vue'
import { useCanvasStore } from '@/stores/graphStore'
import { useSettingStore } from '@/stores/settingStore'
/**
* Watch for changes in the setting store and update the LiteGraph settings accordingly.
*/
export const useLitegraphSettings = () => {
const settingStore = useSettingStore()
const canvasStore = useCanvasStore()
watchEffect(() => {
const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
if (canvasStore.canvas) {
canvasStore.canvas.show_info = canvasInfoEnabled
}
})
watchEffect(() => {
const zoomSpeed = settingStore.get('Comfy.Graph.ZoomSpeed')
if (canvasStore.canvas) {
canvasStore.canvas.zoom_speed = zoomSpeed
}
})
watchEffect(() => {
LiteGraph.snaps_for_comfy = settingStore.get(
'Comfy.Node.AutoSnapLinkToSlot'
)
})
watchEffect(() => {
LiteGraph.snap_highlights_node = settingStore.get(
'Comfy.Node.SnapHighlightsNode'
)
})
watchEffect(() => {
LGraphNode.keepAllLinksOnBypass = settingStore.get(
'Comfy.Node.BypassAllLinksOnDelete'
)
})
watchEffect(() => {
LiteGraph.middle_click_slot_add_default_node = settingStore.get(
'Comfy.Node.MiddleClickRerouteNode'
)
})
watchEffect(() => {
const linkRenderMode = settingStore.get('Comfy.LinkRenderMode')
if (canvasStore.canvas) {
canvasStore.canvas.links_render_mode = linkRenderMode
canvasStore.canvas.setDirty(/* fg */ false, /* bg */ true)
}
})
watchEffect(() => {
const lowQualityRenderingZoomThreshold = settingStore.get(
'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
)
if (canvasStore.canvas) {
canvasStore.canvas.low_quality_zoom_threshold =
lowQualityRenderingZoomThreshold
canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
}
})
watchEffect(() => {
const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
const { canvas } = canvasStore
if (canvas) {
canvas.linkMarkerShape = linkMarkerShape
canvas.setDirty(false, true)
}
})
watchEffect(() => {
const reroutesEnabled = settingStore.get('Comfy.RerouteBeta')
const { canvas } = canvasStore
if (canvas) {
canvas.reroutesEnabled = reroutesEnabled
canvas.setDirty(false, true)
}
})
watchEffect(() => {
const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
const { canvas } = canvasStore
if (canvas) canvas.maximumFps = maximumFps
})
watchEffect(() => {
const dragZoomEnabled = settingStore.get('Comfy.Graph.CtrlShiftZoom')
const { canvas } = canvasStore
if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
})
watchEffect(() => {
CanvasPointer.doubleClickTime = settingStore.get(
'Comfy.Pointer.DoubleClickTime'
)
})
watchEffect(() => {
CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
})
watchEffect(() => {
CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
})
watchEffect(() => {
LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
})
watchEffect(() => {
LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
})
watchEffect(() => {
LiteGraph.context_menu_scaling = settingStore.get(
'LiteGraph.ContextMenu.Scaling'
)
})
}