From 7bdad335cacbd84527416e10fddd86ab18e574a7 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Wed, 29 Jan 2025 16:53:26 -0800
Subject: [PATCH] [Refactor] Extract global window litegraph as a composable
 (#2380)

---
 src/components/graph/GraphCanvas.vue | 27 +++------------------------
 src/hooks/litegraphHooks.ts          | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 src/hooks/litegraphHooks.ts

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index c83621e3f..619870c83 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -29,18 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  CanvasPointer,
-  ContextMenu,
-  DragAndScale,
-  LGraph,
-  LGraphBadge,
-  LGraphCanvas,
-  LGraphGroup,
-  LGraphNode,
-  LLink,
-  LiteGraph
-} from '@comfyorg/litegraph'
+import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -54,6 +43,7 @@ import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { useGlobalLitegraph } from '@/hooks/litegraphHooks'
 import { useWorkflowPersistence } from '@/hooks/workflowPersistenceHooks'
 import { i18n } from '@/i18n'
 import { api } from '@/scripts/api'
@@ -327,18 +317,7 @@ const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
 
 onMounted(async () => {
-  // Backward compatible
-  // Assign all properties of lg to window
-  window['LiteGraph'] = LiteGraph
-  window['LGraph'] = LGraph
-  window['LLink'] = LLink
-  window['LGraphNode'] = LGraphNode
-  window['LGraphGroup'] = LGraphGroup
-  window['DragAndScale'] = DragAndScale
-  window['LGraphCanvas'] = LGraphCanvas
-  window['ContextMenu'] = ContextMenu
-  window['LGraphBadge'] = LGraphBadge
-
+  useGlobalLitegraph()
   comfyApp.vueAppReady = true
 
   workspaceStore.spinner = true
diff --git a/src/hooks/litegraphHooks.ts b/src/hooks/litegraphHooks.ts
new file mode 100644
index 000000000..1ad5d9370
--- /dev/null
+++ b/src/hooks/litegraphHooks.ts
@@ -0,0 +1,27 @@
+// @ts-strict-ignore
+import {
+  ContextMenu,
+  DragAndScale,
+  LGraph,
+  LGraphBadge,
+  LGraphCanvas,
+  LGraphGroup,
+  LGraphNode,
+  LLink,
+  LiteGraph
+} from '@comfyorg/litegraph'
+
+/**
+ * Assign all properties of LiteGraph to window to make it backward compatible.
+ */
+export const useGlobalLitegraph = () => {
+  window['LiteGraph'] = LiteGraph
+  window['LGraph'] = LGraph
+  window['LLink'] = LLink
+  window['LGraphNode'] = LGraphNode
+  window['LGraphGroup'] = LGraphGroup
+  window['DragAndScale'] = DragAndScale
+  window['LGraphCanvas'] = LGraphCanvas
+  window['ContextMenu'] = ContextMenu
+  window['LGraphBadge'] = LGraphBadge
+}