[fix] Fix viewport sync in minimap and subgraphs navigation (#4644)

src/composables/useMinimap.ts

@@ -8,7 +8,6 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 interface GraphCallbacks {
@@ -21,7 +20,6 @@ export function useMinimap() {
   const settingStore = useSettingStore()
   const canvasStore = useCanvasStore()
   const colorPaletteStore = useColorPaletteStore()
-  const workflowStore = useWorkflowStore()
 
   const containerRef = ref<HTMLDivElement>()
   const canvasRef = ref<HTMLCanvasElement>()
@@ -110,29 +108,6 @@ export function useMinimap() {
   const canvas = computed(() => canvasStore.canvas)
   const graph = ref(app.canvas?.graph)
 
-  // Update graph ref when subgraph context changes
-  watch(
-    () => workflowStore.activeSubgraph,
-    () => {
-      graph.value = app.canvas?.graph
-      // Force viewport update when switching subgraphs
-      if (initialized.value && visible.value) {
-        updateViewport()
-      }
-    }
-  )
-
-  // Update viewport when switching workflows
-  watch(
-    () => workflowStore.activeWorkflow,
-    () => {
-      // Force viewport update when switching workflows
-      if (initialized.value && visible.value) {
-        updateViewport()
-      }
-    }
-  )
-
   const containerStyles = computed(() => ({
     width: `${width}px`,
     height: `${height}px`,
@@ -377,6 +352,8 @@ export function useMinimap() {
       needsBoundsUpdate.value = false
       updateFlags.value.bounds = false
       needsFullRedraw.value = true
+      // When bounds change, we need to update the viewport position
+      updateFlags.value.viewport = true
     }
 
     if (
@@ -386,6 +363,11 @@ export function useMinimap() {
     ) {
       renderMinimap()
     }
+
+    // Update viewport if needed (e.g., after bounds change)
+    if (updateFlags.value.viewport) {
+      updateViewport()
+    }
   }
 
   const checkForChanges = useThrottleFn(() => {
@@ -660,7 +642,7 @@ export function useMinimap() {
         await init()
       }
     },
-    { immediate: true }
+    { immediate: true, flush: 'post' }
   )
 
   watch(visible, async (isVisible) => {
@@ -678,6 +660,8 @@ export function useMinimap() {
 
       await nextTick()
 
+      await nextTick()
+
       updateMinimap()
       updateViewport()
       resumeChangeDetection()

src/stores/subgraphNavigationStore.ts

@@ -33,6 +33,17 @@ export const useSubgraphNavigationStore = defineStore(
       maxSize: 32
     })
 
+    /**
+     * Get the ID of the root graph for the currently active workflow.
+     * @returns The ID of the root graph for the currently active workflow.
+     */
+    const getCurrentRootGraphId = () => {
+      const canvas = canvasStore.getCanvas()
+      if (!canvas) return 'root'
+
+      return canvas.graph?.rootGraph?.id ?? 'root'
+    }
+
     /**
      * A stack representing subgraph navigation history from the root graph to
      * the current opened subgraph.
@@ -117,13 +128,13 @@ export const useSubgraphNavigationStore = defineStore(
         saveViewport(prevSubgraph.id)
       } else if (!prevSubgraph && subgraph) {
         // Leaving root graph to enter a subgraph
-        saveViewport('root')
+        saveViewport(getCurrentRootGraphId())
       }
 
       const isInRootGraph = !subgraph
       if (isInRootGraph) {
         idStack.value.length = 0
-        restoreViewport('root')
+        restoreViewport(getCurrentRootGraphId())
         return
       }