Skip to content

Commit

Permalink
[Refactor] Extract litegraph settings sync to a composable (#2461)
Browse files Browse the repository at this point in the history
  • Loading branch information
huchenlei authored Feb 6, 2025
1 parent 7ddcac8 commit 2da23fd
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 114 deletions.
116 changes: 2 additions & 114 deletions src/components/graph/GraphCanvas.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
</template>

<script setup lang="ts">
import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
import { computed, onMounted, ref, watch, watchEffect } from 'vue'
import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
Expand All @@ -45,6 +44,7 @@ import { useCanvasDrop } from '@/composables/useCanvasDrop'
import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
import { useCopy } from '@/composables/useCopy'
import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
import { usePaste } from '@/composables/usePaste'
import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
import { CORE_SETTINGS } from '@/constants/coreSettings'
Expand Down Expand Up @@ -79,42 +79,6 @@ const canvasMenuEnabled = computed(() =>
)
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(() => {
nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
})
Expand All @@ -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(
() => settingStore.get('Comfy.WidgetControlMode'),
() => {
Expand Down Expand Up @@ -247,12 +140,6 @@ watch(
}
)
watchEffect(() => {
LiteGraph.context_menu_scaling = settingStore.get(
'LiteGraph.ContextMenu.Scaling'
)
})
const loadCustomNodesI18n = async () => {
try {
const i18nData = await api.getCustomNodesI18n()
Expand All @@ -267,6 +154,7 @@ const loadCustomNodesI18n = async () => {
const comfyAppReady = ref(false)
const workflowPersistence = useWorkflowPersistence()
useCanvasDrop(canvasRef)
useLitegraphSettings()
onMounted(async () => {
useGlobalLitegraph()
Expand Down
128 changes: 128 additions & 0 deletions src/composables/useLitegraphSettings.ts
Original file line number Diff line number Diff line change
@@ -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'
)
})
}

0 comments on commit 2da23fd

Please sign in to comment.