[CodeHealth] Remove remaining uses of global app var (#3868)

Author: webfiltered

src/components/graph/GraphCanvas.vue

@@ -292,10 +292,8 @@ onMounted(async () => {
   canvasStore.canvas.render_canvas_border = false
   workspaceStore.spinner = false
 
-  // @ts-expect-error fixme ts strict error
-  window['app'] = comfyApp
-  // @ts-expect-error fixme ts strict error
-  window['graph'] = comfyApp.graph
+  window.app = comfyApp
+  window.graph = comfyApp.graph
 
   comfyAppReady.value = true
 

src/components/graph/SelectionOverlay.vue

@@ -79,7 +79,7 @@ watch(
     if (draggingItems === false) {
       setTimeout(() => {
         visible.value = true
-        positionSelectionOverlay(canvasStore.canvas as LGraphCanvas)
+        positionSelectionOverlay(canvasStore.getCanvas())
       }, 100)
     } else {
       // Selection change update to visible state is delayed by a frame. Here

src/composables/widgets/useImagePreviewWidget.ts

@@ -8,6 +8,7 @@ import type {
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { calculateImageGrid } from '@/scripts/ui/imagePreview'
 import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
 
@@ -16,7 +17,7 @@ const renderPreview = (
   node: LGraphNode,
   shiftY: number
 ) => {
-  const canvas = app.canvas
+  const canvas = useCanvasStore().getCanvas()
   const mouse = canvas.graph_mouse
 
   if (!canvas.pointer_is_down && node.pointerDown) {

src/extensions/core/previewAny.ts

@@ -3,6 +3,7 @@ Preview Any - original implement from
 https://github.com/rgthree/rgthree-comfy/blob/main/py/display_any.py
 upstream requested in https://github.com/Kosinkadink/rfcs/blob/main/rfcs/0000-corenodes.md#preview-nodes
  */
+import { app } from '@/scripts/app'
 import { DOMWidget } from '@/scripts/domWidget'
 import { ComfyWidgets } from '@/scripts/widgets'
 import { useExtensionService } from '@/services/extensionService'

src/stores/executionStore.ts

@@ -17,6 +17,7 @@ import type {
   NodeId
 } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 
 import { ComfyWorkflow } from './workflowStore'
 

src/stores/graphStore.ts

@@ -1,7 +1,7 @@
 import type { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
 import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
-import { markRaw, ref, shallowRef } from 'vue'
+import { type Raw, markRaw, ref, shallowRef } from 'vue'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -15,13 +15,13 @@ export const useCanvasStore = defineStore('canvas', () => {
   /**
    * The LGraphCanvas instance.
    *
-   * The root LGraphCanvas object is shallow reactive.
+   * The root LGraphCanvas object is a shallow ref.
    */
   const canvas = shallowRef<LGraphCanvas | null>(null)
   /**
    * The selected items on the canvas. All stored items are raw.
    */
-  const selectedItems = ref<Positionable[]>([])
+  const selectedItems = ref<Raw<Positionable>[]>([])
   const updateSelectedItems = () => {
     const items = Array.from(canvas.value?.selectedItems ?? [])
     selectedItems.value = items.map((item) => markRaw(item))

src/types/index.ts

@@ -1,3 +1,5 @@
+import type { LGraph } from '@comfyorg/litegraph'
+
 import type {
   DeviceStats,
   EmbeddingsResponse,
@@ -54,5 +56,11 @@ export type {
 }
 
 declare global {
-  const app: ComfyApp
+  interface Window {
+    /** For use by extensions and in the browser console. Where possible, import `app` from '@/scripts/app' instead. */
+    app?: ComfyApp
+
+    /** For use by extensions and in the browser console. Where possible, import `app` and access via `app.graph` instead. */
+    graph?: LGraph
+  }
 }