[refactor] Refactor minimap initialization logic (#5052)

* move ref initialization to the component

* remove redundant init

src/components/graph/GraphCanvas.vue

@@ -21,7 +21,6 @@
 
       <MiniMap
         v-if="comfyAppReady && minimapEnabled"
-        ref="minimapRef"
         class="pointer-events-auto"
       />
     </template>
@@ -71,7 +70,6 @@ import { useContextMenuTranslation } from '@/composables/useContextMenuTranslati
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
-import { useMinimap } from '@/composables/useMinimap'
 import { usePaste } from '@/composables/usePaste'
 import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
@@ -119,9 +117,7 @@ const selectionToolboxEnabled = computed(() =>
   settingStore.get('Comfy.Canvas.SelectionToolbox')
 )
 
-const minimapRef = ref<InstanceType<typeof MiniMap>>()
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
-const minimap = useMinimap()
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -358,13 +354,6 @@ onMounted(async () => {
     }
   )
 
-  whenever(
-    () => minimapRef.value,
-    (ref) => {
-      minimap.setMinimapRef(ref)
-    }
-  )
-
   whenever(
     () => useCanvasStore().canvas,
     (canvas) => {

src/components/graph/MiniMap.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="visible && initialized"
+    ref="minimapRef"
     class="minimap-main-container flex absolute bottom-[20px] right-[90px] z-[1000]"
   >
     <MiniMapPanel
@@ -54,15 +55,13 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 import { useMinimap } from '@/composables/useMinimap'
-import { useCanvasStore } from '@/stores/graphStore'
 
 import MiniMapPanel from './MiniMapPanel.vue'
 
-const minimap = useMinimap()
+const minimapRef = ref<HTMLDivElement>()
-const canvasStore = useCanvasStore()
 
 const {
   initialized,
@@ -80,13 +79,13 @@ const {
   renderBypass,
   renderError,
   updateOption,
-  init,
   destroy,
   handlePointerDown,
   handlePointerMove,
   handlePointerUp,
-  handleWheel
+  handleWheel,
-} = minimap
+  setMinimapRef
+} = useMinimap()
 
 const showOptionsPanel = ref(false)
 
@@ -94,20 +93,8 @@ const toggleOptionsPanel = () => {
   showOptionsPanel.value = !showOptionsPanel.value
 }
 
-watch(
+onMounted(() => {
-  () => canvasStore.canvas,
+  setMinimapRef(minimapRef.value)
-  async (canvas) => {
-    if (canvas && !initialized.value) {
-      await init()
-    }
-  },
-  { immediate: true }
-)
-
-onMounted(async () => {
-  if (canvasStore.canvas) {
-    await init()
-  }
 })
 
 onUnmounted(() => {