diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index 3bb6d473f..8327aa058 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/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 diff --git a/src/components/graph/SelectionOverlay.vue b/src/components/graph/SelectionOverlay.vue index 380d2afc1..11f67ca23 100644 --- a/src/components/graph/SelectionOverlay.vue +++ b/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 diff --git a/src/composables/widgets/useImagePreviewWidget.ts b/src/composables/widgets/useImagePreviewWidget.ts index 64816ef44..20aa430db 100644 --- a/src/composables/widgets/useImagePreviewWidget.ts +++ b/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) { diff --git a/src/extensions/core/previewAny.ts b/src/extensions/core/previewAny.ts index ed19d2812..9931ddaa1 100644 --- a/src/extensions/core/previewAny.ts +++ b/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' diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts index 8ce1a35a0..9ec7e86ca 100644 --- a/src/stores/executionStore.ts +++ b/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' diff --git a/src/stores/graphStore.ts b/src/stores/graphStore.ts index 85d04f365..a0d929f48 100644 --- a/src/stores/graphStore.ts +++ b/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(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(null) /** * The selected items on the canvas. All stored items are raw. */ - const selectedItems = ref([]) + const selectedItems = ref[]>([]) const updateSelectedItems = () => { const items = Array.from(canvas.value?.selectedItems ?? []) selectedItems.value = items.map((item) => markRaw(item)) diff --git a/src/types/index.ts b/src/types/index.ts index 42c94e676..20d38a345 100644 --- a/src/types/index.ts +++ b/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 + } }