[backport cloud/1.35] Fix: Minimap rendering (#7724)

Backport of #7639 to cloud/1.35

## Original PR
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7639

## Conflicts resolved
- All test snapshots: accepted PR version (all were changed in original
PR)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7724-backport-cloud-1-35-Fix-Minimap-rendering-2d16d73d365081999fd0dfa09501e2e0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/renderer/extensions/minimap/MiniMap.vue

@@ -16,6 +16,7 @@
     />
 
     <div
+      ref="containerRef"
       class="litegraph-minimap relative border border-interface-stroke bg-comfy-menu-bg shadow-interface"
       :style="containerStyles"
     >
@@ -50,7 +51,12 @@
         }"
       />
 
-      <canvas :width="width" :height="height" class="minimap-canvas" />
+      <canvas
+        ref="canvasRef"
+        :width="width"
+        :height="height"
+        class="minimap-canvas"
+      />
 
       <div class="minimap-viewport" :style="viewportStyles" />
 
@@ -69,7 +75,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
@@ -77,8 +83,9 @@ import { useCommandStore } from '@/stores/commandStore'
 import MiniMapPanel from './MiniMapPanel.vue'
 
 const commandStore = useCommandStore()
-
 const minimapRef = ref<HTMLDivElement>()
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
 
 const {
   initialized,
@@ -101,7 +108,10 @@ const {
   handlePointerCancel,
   handleWheel,
   setMinimapRef
-} = useMinimap()
+} = useMinimap({
+  containerRefMaybe: containerRef,
+  canvasRefMaybe: canvasRef
+})
 
 const showOptionsPanel = ref(false)
 

src/renderer/extensions/minimap/composables/useMinimap.ts

@@ -1,5 +1,6 @@
 import { useRafFn } from '@vueuse/core'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import type { ShallowRef } from 'vue'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -13,14 +14,20 @@ import { useMinimapRenderer } from './useMinimapRenderer'
 import { useMinimapSettings } from './useMinimapSettings'
 import { useMinimapViewport } from './useMinimapViewport'
 
-export function useMinimap() {
+export function useMinimap({
+  canvasRefMaybe,
+  containerRefMaybe
+}: {
+  canvasRefMaybe?: Readonly<ShallowRef<HTMLCanvasElement | null>>
+  containerRefMaybe?: Readonly<ShallowRef<HTMLDivElement | null>>
+} = {}) {
   const canvasStore = useCanvasStore()
   const workflowStore = useWorkflowStore()
   const settingStore = useSettingStore()
 
-  const containerRef = ref<HTMLDivElement>()
-  const canvasRef = ref<HTMLCanvasElement>()
   const minimapRef = ref<HTMLElement | null>(null)
+  const canvasRef = canvasRefMaybe ?? shallowRef(null)
+  const containerRef = containerRefMaybe ?? shallowRef(null)
 
   const visible = ref(true)
   const initialized = ref(false)
@@ -223,8 +230,6 @@ export function useMinimap() {
     visible: computed(() => visible.value),
     initialized: computed(() => initialized.value),
 
-    containerRef,
-    canvasRef,
     containerStyles,
     viewportStyles,
     panelStyles,

src/renderer/extensions/minimap/composables/useMinimapInteraction.ts

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 
 import type { MinimapCanvas } from '../types'
 
 export function useMinimapInteraction(
-  containerRef: Ref<HTMLDivElement | undefined>,
+  containerRef: Readonly<ShallowRef<HTMLDivElement | null>>,
   bounds: Ref<{ minX: number; minY: number; width: number; height: number }>,
   scale: Ref<number>,
   width: number,

src/renderer/extensions/minimap/composables/useMinimapRenderer.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 
@@ -7,7 +7,7 @@ import { renderMinimapToCanvas } from '../minimapCanvasRenderer'
 import type { UpdateFlags } from '../types'
 
 export function useMinimapRenderer(
-  canvasRef: Ref<HTMLCanvasElement | undefined>,
+  canvasRef: Readonly<ShallowRef<HTMLCanvasElement | null>>,
   graph: Ref<LGraph | null>,
   bounds: Ref<{ minX: number; minY: number; width: number; height: number }>,
   scale: Ref<number>,