fix: sync node.imgs for legacy context menu in Vue Nodes mode (#8143)

## Summary

Fixes missing "Copy Image", "Open Image", "Save Image", and "Open in
Mask Editor" context menu options on SaveImage nodes when Vue Nodes mode
is enabled.

## Changes

- Add `syncLegacyNodeImgs` store method to sync loaded image elements to
`node.imgs`
- Call sync on image load in ImagePreview component
- Simplify mask editor handling to call composable directly

## Technical Details

- Only runs when `vueNodesMode` is enabled (no impact on legacy mode)
- Reuses already-loaded `<img>` element from Vue (no duplicate network
requests)
- Store owns the sync logic, component just hands off the element

Supersedes #7416

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8143-fix-sync-node-imgs-for-legacy-context-menu-in-Vue-Nodes-mode-2ec6d73d365081c59d42cd1722779b61)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>

src/stores/imagePreviewStore.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import type { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type {
   ExecutedWsMessage,
@@ -394,6 +395,32 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     revokeAllPreviews()
   }
 
+  /**
+   * Sync legacy node.imgs property for backwards compatibility.
+   *
+   * In Vue Nodes mode, legacy systems (Copy Image, Open Image, Save Image,
+   * Open in Mask Editor) rely on `node.imgs` containing HTMLImageElement
+   * references. Since Vue handles image rendering, we need to sync the
+   * already-loaded element from the Vue component to the node.
+   *
+   * @param nodeId - The node ID
+   * @param element - The loaded HTMLImageElement from the Vue component
+   * @param activeIndex - The current image index (for multi-image outputs)
+   */
+  function syncLegacyNodeImgs(
+    nodeId: string | number,
+    element: HTMLImageElement,
+    activeIndex: number = 0
+  ) {
+    if (!LiteGraph.vueNodesMode) return
+
+    const node = app.rootGraph?.getNodeById(Number(nodeId))
+    if (!node) return
+
+    node.imgs = [element]
+    node.imageIndex = activeIndex
+  }
+
   return {
     // Getters
     getNodeOutputs,
@@ -407,6 +434,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     setNodePreviewsByExecutionId,
     setNodePreviewsByNodeId,
     updateNodeImages,
+    syncLegacyNodeImgs,
 
     // Cleanup
     revokePreviewsByExecutionId,