Skip to content

Fix: Minimap rendering #7639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DrJKL merged 5 commits into from
Dec 19, 2025
Merged

Fix: Minimap rendering #7639

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
29b7dc6
Fix: use a templateref in the Minimap instead of binding refs exposed…
DrJKL Dec 19, 2025
608fb36
test: Fix unit test. So many things I'm not touching in here...
DrJKL Dec 19, 2025
0db3087
test: Fix additional minimap unit tests
DrJKL Dec 19, 2025
059f6f6
[automated] Update test expectations
invalid-email-address Dec 19, 2025
75a5951
Merge branch 'main' into drjkl/fix/minimap
simula-r Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/renderer/extensions/minimap/MiniMap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
/>

<div
ref="containerRef"
class="litegraph-minimap relative border border-interface-stroke bg-comfy-menu-bg shadow-interface"
:style="containerStyles"
>
Expand Down Expand Up @@ -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" />

Expand All @@ -69,16 +75,17 @@

<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'

import MiniMapPanel from './MiniMapPanel.vue'

const commandStore = useCommandStore()

const minimapRef = ref<HTMLDivElement>()
const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')

const {
initialized,
Expand All @@ -101,7 +108,10 @@ const {
handlePointerCancel,
handleWheel,
setMinimapRef
} = useMinimap()
} = useMinimap({
containerRefMaybe: containerRef,
canvasRefMaybe: canvasRef
})

const showOptionsPanel = ref(false)

Expand Down
17 changes: 11 additions & 6 deletions src/renderer/extensions/minimap/composables/useMinimap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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)
Expand Down Expand Up @@ -223,8 +230,6 @@ export function useMinimap() {
visible: computed(() => visible.value),
initialized: computed(() => initialized.value),

containerRef,
canvasRef,
containerStyles,
viewportStyles,
panelStyles,
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/extensions/minimap/composables/useMinimapRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { ref } from 'vue'
import type { Ref } from 'vue'
import type { Ref, ShallowRef } from 'vue'

import type { LGraph } from '@/lib/litegraph/src/litegraph'

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>,
Expand Down
100 changes: 28 additions & 72 deletions tests-ui/tests/composables/useMinimap.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { nextTick } from 'vue'
import { nextTick, shallowRef } from 'vue'

const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0))

Expand Down Expand Up @@ -164,10 +164,11 @@ describe('useMinimap', () => {
let mockContainerElement: any
let mockContext2D: any

const createAndInitializeMinimap = async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
async function createAndInitializeMinimap() {
const minimap = useMinimap({
containerRefMaybe: shallowRef(mockContainerElement),
canvasRefMaybe: shallowRef(mockCanvasElement)
})
await minimap.init()
await nextTick()
await flushPromises()
Expand Down Expand Up @@ -301,10 +302,7 @@ describe('useMinimap', () => {
})

it('should initialize minimap when canvas is available', async () => {
const minimap = useMinimap()

minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()
Comment on lines +305 to 307

@coderabbitai coderabbitai Bot Dec 19, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove redundant init() calls after createAndInitializeMinimap.

Multiple tests call minimap.init() after using the createAndInitializeMinimap() helper, which already calls init() on line 172. This results in double-initialization, which doesn't accurately test normal usage patterns.

While the composable's init() function has an early return guard (if (initialized.value) return), making the second call a no-op, this still represents incorrect test behavior that:

  • Tests unintended double-initialization scenarios rather than single initialization
  • Creates inconsistency with tests that correctly use the helper without re-calling init() (e.g., lines 522, 537, 558, 582, 597, 618, 639, 654, 874, 884)
  • Could mask initialization timing or race condition issues
🔎 Tests affected (remove the duplicate init() call in each)

Lines that need the redundant await minimap.init() removed:

  • Line 307 (initialization test)
  • Line 339 (setup event listeners)
  • Line 350 (handle visibility)
  • Line 361 (cleanup test)
  • Line 386 (restore callbacks)
  • Line 426 (verify context)
  • Line 449 (render at least once)
  • Line 489 (not render when context null)
  • Line 503 (handle empty graph)
  • Line 682 (wheel zoom in)
  • Line 705 (wheel zoom out)
  • Line 728 (zoom limits)
  • Line 751 (update container rect)
  • Line 774 (viewport transform)
  • Line 791 (canvas dimension updates)
  • Line 814 (node addition)
  • Line 834 (node removal)
  • Line 849 (connection changes)
  • Line 895 (high DPI)
  • Line 905 (nodes without color)

Example fix for the test at line 305:

-      const minimap = await createAndInitializeMinimap()
-
-      await minimap.init()
+      const minimap = await createAndInitializeMinimap()

       expect(minimap.initialized.value).toBe(true)

Based on coding guidelines, tests should accurately reflect real-world usage patterns and not include redundant operations.

Also applies to: 337-339, 346-350, 359-361, 384-386, 422-426, 447-449, 487-489, 501-503, 680-682, 703-705, 726-728, 749-751, 772-774, 789-791, 812-814, 832-834, 847-849, 893-895, 903-905

🤖 Prompt for AI Agents 
tests-ui/tests/composables/useMinimap.test.ts around lines 305-307: the test
calls await minimap.init() after using createAndInitializeMinimap(), but that
helper already calls init() (see line 172), so remove the redundant await
minimap.init() here and in the other listed locations (337-339, 346-350,
359-361, 384-386, 422-426, 447-449, 487-489, 501-503, 680-682, 703-705, 726-728,
749-751, 772-774, 789-791, 812-814, 832-834, 847-849, 893-895, 903-905); simply
delete the extra await minimap.init() calls so each test relies on the helper’s
single initialization, then run the test suite to confirm no regressions.

@DrJKL DrJKL Dec 19, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create a commit cleaning these up.

@coderabbitai coderabbitai Bot Dec 19, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Read the test file and identify the lines with redundant init() calls
cat tests-ui/tests/composables/useMinimap.test.ts | head -n 920 | tail -n +300 | grep -n "await minimap.init()"

Length of output: 643

🏁 Script executed:

#!/bin/bash

# Create a cleaned version of the file by removing redundant init() calls
# We'll use sed to remove lines matching "await minimap.init()" that come after createAndInitializeMinimap

cat tests-ui/tests/composables/useMinimap.test.ts > /tmp/original.ts

# Remove the redundant init calls by matching the pattern where createAndInitializeMinimap is followed by init()
# We need to be careful to only remove the redundant ones

python3 << 'PYTHON_SCRIPT'
import re

with open('tests-ui/tests/composables/useMinimap.test.ts', 'r') as f:
    content = f.read()
    lines = content.split('\n')

# Line numbers (0-indexed) where we need to remove await minimap.init()
# Converting from 1-indexed to 0-indexed
redundant_lines = [306, 338, 349, 360, 385, 425, 448, 488, 502, 681, 704, 727, 750, 773, 790, 813, 833, 848, 894, 904]

# Filter out lines
new_lines = []
for i, line in enumerate(lines):
    if i in redundant_lines and 'await minimap.init()' in line:
        # Skip this line (it's redundant)
        continue
    new_lines.append(line)

# Write the cleaned version
with open('/tmp/cleaned.ts', 'w') as f:
    f.write('\n'.join(new_lines))

print("Cleaned version created")
PYTHON_SCRIPT

# Generate a unified diff
diff -u tests-ui/tests/composables/useMinimap.test.ts /tmp/cleaned.ts > /tmp/minimap-test-cleanup.patch || true
cat /tmp/minimap-test-cleanup.patch

Length of output: 4880

@DrJKL I've generated the changes to clean up the redundant await minimap.init() calls. The diff removes 20 redundant initialization calls from tests that use the createAndInitializeMinimap() helper (which already calls init() internally).

Here's what needs to be done:

Changes Summary

The patch removes redundant await minimap.init() calls from 20 test cases in tests-ui/tests/composables/useMinimap.test.ts:

  • Initialization tests: Lines 307, 339, 350
  • Destroy tests: Lines 361, 386
  • Rendering tests: Lines 426, 449, 489, 503
  • Wheel interaction tests: Lines 682, 705, 728, 751
  • Viewport tests: Lines 774, 791
  • Graph change tests: Lines 814, 834, 849
  • Edge case tests: Lines 895, 905

Applying the Changes

You can apply this patch in one of two ways:

Option 1: Apply the patch file

# The patch has been generated and saved
patch -p0 < /tmp/minimap-test-cleanup.patch

Option 2: Manual removal
Simply remove the line await minimap.init() from each of the 20 locations listed above. Each removal leaves a blank line which keeps the test formatting clean.

After applying the changes, run the test suite to confirm everything still passes:

npm test tests-ui/tests/composables/useMinimap.test.ts

Note: I cannot commit code directly to the repository per policy, but I've prepared the complete diff above for you to review and commit.

🧬 Code Graph Analysis Results

src/scripts/api.ts
<line_range>1306-1306</line_range>

export const api = new ComfyApi()

src/renderer/extensions/minimap/composables/useMinimap.ts
<line_range>17-257</line_range>

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 minimapRef = ref<HTMLElement | null>(null)
  const canvasRef = canvasRefMaybe ?? shallowRef(null)
  const containerRef = containerRefMaybe ?? shallowRef(null)

  const visible = ref(true)
  const initialized = ref(false)

  const width = 250
  const height = 200

  const canvas = computed(() => canvasStore.canvas as MinimapCanvas | null)
  const graph = computed(() => {
    // If we're in a subgraph, use that; otherwise use the canvas graph
    const activeSubgraph = workflowStore.activeSubgraph
    return (activeSubgraph || canvas.value?.graph) as LGraph | null
  })

  // Settings
  const settings = useMinimapSettings()
  const {
    nodeColors,
    showLinks,
    showGroups,
    renderBypass,
    renderError,
    containerStyles,
    panelStyles
  } = settings

  const updateOption = async (key: MinimapSettingsKey, value: boolean) => {
    await settingStore.set(key, value)
    renderer.forceFullRedraw()
    renderer.updateMinimap(viewport.updateBounds, viewport.updateViewport)
  }

  // Viewport management
  const viewport = useMinimapViewport(canvas, graph, width, height)

  // Interaction handling
  const interaction = useMinimapInteraction(
    containerRef,
    viewport.bounds,
    viewport.scale,
    width,
    height,
    viewport.centerViewOn,
    canvas
  )

  // Graph event management
  const graphManager = useMinimapGraph(graph, () => {
    renderer.forceFullRedraw()
    renderer.updateMinimap(viewport.updateBounds, viewport.updateViewport)
  })

  // Rendering
  const renderer = useMinimapRenderer(
    canvasRef,
    graph,
    viewport.bounds,
    viewport.scale,
    graphManager.updateFlags,
    settings,
    width,
    height
  )

  // RAF loop for continuous updates
  const { pause: pauseChangeDetection, resume: resumeChangeDetection } =
    useRafFn(
      async () => {
        if (visible.value) {
          const hasChanges = await graphManager.checkForChanges()
          if (hasChanges) {
            renderer.updateMinimap(
              viewport.updateBounds,
              viewport.updateViewport
            )
          }
        }
      },
      { immediate: false }
    )

  const init = async () => {
    if (initialized.value) return

    visible.value = settingStore.get('Comfy.Minimap.Visible')

    if (canvas.value && graph.value) {
      graphManager.init()

      if (containerRef.value) {
        interaction.updateContainerRect()
      }
      viewport.updateCanvasDimensions()

      window.addEventListener('resize', interaction.updateContainerRect)
      window.addEventListener('scroll', interaction.updateContainerRect)
      window.addEventListener('resize', viewport.updateCanvasDimensions)

      renderer.forceFullRedraw()
      renderer.updateMinimap(viewport.updateBounds, viewport.updateViewport)
      viewport.updateViewport()

      if (visible.value) {
        resumeChangeDetection()
        viewport.startViewportSync()
      }
      initialized.value = true
    }
  }

  const destroy = () => {
    pauseChangeDetection()
    viewport.stopViewportSync()
    graphManager.destroy()

    window.removeEventListener('resize', interaction.updateContainerRect)
    window.removeEventListener('scroll', interaction.updateContainerRect)
    window.removeEventListener('resize', viewport.updateCanvasDimensions)

    initialized.value = false
  }

  watch(
    canvas,
    async (newCanvas, oldCanvas) => {
      if (oldCanvas) {
        graphManager.cleanupEventListeners()
        pauseChangeDetection()
        viewport.stopViewportSync()
        graphManager.destroy()
        window.removeEventListener('resize', interaction.updateContainerRect)
        window.removeEventListener('scroll', interaction.updateContainerRect)
        window.removeEventListener('resize', viewport.updateCanvasDimensions)
      }
      if (newCanvas && !initialized.value) {
        await init()
      }
    },
    { immediate: true, flush: 'post' }
  )

  // Watch for graph changes (e.g., when navigating to/from subgraphs)
  watch(graph, (newGraph, oldGraph) => {
    if (newGraph && newGraph !== oldGraph) {
      graphManager.cleanupEventListeners(oldGraph || undefined)
      graphManager.setupEventListeners()
      renderer.forceFullRedraw()
      renderer.updateMinimap(viewport.updateBounds, viewport.updateViewport)
    }
  })

  watch(visible, async (isVisible) => {
    if (isVisible) {
      if (containerRef.value) {
        interaction.updateContainerRect()
      }
      viewport.updateCanvasDimensions()

      renderer.forceFullRedraw()

      await nextTick()
      await nextTick()

      renderer.updateMinimap(viewport.updateBounds, viewport.updateViewport)
      viewport.updateViewport()
      resumeChangeDetection()
      viewport.startViewportSync()
    } else {
      pauseChangeDetection()
      viewport.stopViewportSync()
    }
  })

  const toggle = async () => {
    visible.value = !visible.value
    await settingStore.set('Comfy.Minimap.Visible', visible.value)
  }

  const setMinimapRef = (ref: HTMLElement | null) => {
    minimapRef.value = ref
  }

  // Dynamic viewport styles based on actual viewport transform
  const viewportStyles = computed(() => {
    const transform = viewport.viewportTransform.value
    return {
      transform: `translate(${transform.x}px, ${transform.y}px)`,
      width: `${transform.width}px`,
      height: `${transform.height}px`,
      border: `2px solid ${settings.isLightTheme.value ? '#E0E0E0' : '#FFF'}`,
      backgroundColor: `rgba(255, 255, 255, 0.2)`,
      willChange: 'transform',
      backfaceVisibility: 'hidden' as const,
      perspective: '1000px',
      pointerEvents: 'none' as const
    }
  })

  return {
    visible: computed(() => visible.value),
    initialized: computed(() => initialized.value),

    containerStyles,
    viewportStyles,
    panelStyles,
    width,
    height,

    nodeColors,
    showLinks,
    showGroups,
    renderBypass,
    renderError,

    init,
    destroy,
    toggle,
    renderMinimap: renderer.renderMinimap,
    handlePointerDown: interaction.handlePointerDown,
    handlePointerMove: interaction.handlePointerMove,
    handlePointerUp: interaction.handlePointerUp,
    handlePointerCancel: interaction.handlePointerCancel,
    handleWheel: interaction.handleWheel,
    setMinimapRef,
    updateOption
  }
}
🧠 Learnings used 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to tests-ui/**/*.test.ts : For mocking, leverage Vitest's utilities where possible

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to tests-ui/**/*.test.ts : Be parsimonious in testing - do not write redundant tests

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to tests-ui/**/*.test.ts : For Component testing, use Vue Test Utils and follow advice about making components easy to test


Expand Down Expand Up @@ -336,9 +334,7 @@ describe('useMinimap', () => {
})

it('should setup event listeners on graph', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -349,9 +345,7 @@ describe('useMinimap', () => {

it('should handle visibility from settings', async () => {
defaultSettingStore.get.mockReturnValue(false)
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -362,9 +356,7 @@ describe('useMinimap', () => {

describe('destroy', () => {
it('should cleanup all resources', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()
minimap.destroy()
Expand All @@ -389,9 +381,7 @@ describe('useMinimap', () => {
mockGraph.onNodeRemoved = originalCallbacks.onNodeRemoved
mockGraph.onConnectionChange = originalCallbacks.onConnectionChange

const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()
minimap.destroy()
Expand Down Expand Up @@ -429,9 +419,7 @@ describe('useMinimap', () => {

describe('rendering', () => {
it('should verify context is obtained during render', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

const getContextSpy = vi.spyOn(mockCanvasElement, 'getContext')

Expand All @@ -456,9 +444,7 @@ describe('useMinimap', () => {
})

it('should render at least once after initialization', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand Down Expand Up @@ -498,9 +484,7 @@ describe('useMinimap', () => {
it('should not render when context is null', async () => {
mockCanvasElement.getContext = vi.fn().mockReturnValue(null)

const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()
await new Promise((resolve) => setTimeout(resolve, 100))
Expand All @@ -514,9 +498,7 @@ describe('useMinimap', () => {
const originalNodes = [...mockGraph._nodes]
mockGraph._nodes = []

const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand Down Expand Up @@ -695,9 +677,7 @@ describe('useMinimap', () => {

describe('wheel interactions', () => {
it('should handle wheel zoom in', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -720,9 +700,7 @@ describe('useMinimap', () => {
})

it('should handle wheel zoom out', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -745,9 +723,7 @@ describe('useMinimap', () => {
})

it('should respect zoom limits', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -770,9 +746,7 @@ describe('useMinimap', () => {
})

it('should update container rect if needed', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -795,9 +769,7 @@ describe('useMinimap', () => {

describe('viewport updates', () => {
it('should update viewport transform correctly', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()
await nextTick()
Expand All @@ -814,9 +786,7 @@ describe('useMinimap', () => {
})

it('should handle canvas dimension updates', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -839,9 +809,7 @@ describe('useMinimap', () => {

describe('graph change handling', () => {
it('should handle node addition', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -861,9 +829,7 @@ describe('useMinimap', () => {
})

it('should handle node removal', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -878,9 +844,7 @@ describe('useMinimap', () => {
})

it('should handle connection changes', async () => {
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -907,9 +871,7 @@ describe('useMinimap', () => {
describe('edge cases', () => {
it('should handle missing node outputs', async () => {
mockGraph._nodes[0].outputs = null
const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await expect(minimap.init()).resolves.not.toThrow()
expect(minimap.initialized.value).toBe(true)
Expand All @@ -919,9 +881,7 @@ describe('useMinimap', () => {
mockGraph.links.link1.target_id = 'invalid-node'
mockGraph.getNodeById.mockReturnValue(null)

const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await expect(minimap.init()).resolves.not.toThrow()
expect(minimap.initialized.value).toBe(true)
Expand All @@ -930,9 +890,7 @@ describe('useMinimap', () => {
it('should handle high DPI displays', async () => {
window.devicePixelRatio = 2

const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand All @@ -942,9 +900,7 @@ describe('useMinimap', () => {
it('should handle nodes without color', async () => {
mockGraph._nodes[0].color = undefined

const minimap = useMinimap()
minimap.containerRef.value = mockContainerElement
minimap.canvasRef.value = mockCanvasElement
const minimap = await createAndInitializeMinimap()

await minimap.init()

Expand Down
Loading