chore(minimap): cleanup

packages/minimap/src/MiniMap.vue

@@ -6,7 +6,7 @@ import type { D3ZoomEvent } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { computed, provide, ref, toRef, useAttrs, watchEffect } from 'vue'
 import type { MiniMapEmits, MiniMapNodeFunc, MiniMapProps, MiniMapSlots, ShapeRendering } from './types'
-import MiniMapNode from './MiniMapNode'
+import MiniMapNode from './MiniMapNode.vue'
 import { Slots } from './types'
 
 const {
@@ -38,7 +38,7 @@ const attrs: Record<string, any> = useAttrs()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { id, edges, viewport, translateExtent, dimensions, emits, nodes, d3Selection, d3Zoom } = useVueFlow()
+const { id, edges, viewport, translateExtent, dimensions, emits, d3Selection, d3Zoom, getNodesInitialized } = useVueFlow()
 
 const el = ref<SVGElement>()
 
@@ -60,7 +60,7 @@ const nodeClassNameFunc = computed<MiniMapNodeFunc>(() =>
   typeof nodeClassName === 'string' ? () => nodeClassName : typeof nodeClassName === 'function' ? nodeClassName : () => '',
 )
 
-const bb = computed(() => getRectOfNodes(nodes.value))
+const bb = computed(() => getRectOfNodes(getNodesInitialized.value))
 
 const viewBB = computed(() => ({
   x: -viewport.value.x / viewport.value.zoom,
@@ -69,7 +69,9 @@ const viewBB = computed(() => ({
   height: dimensions.value.height / viewport.value.zoom,
 }))
 
-const boundingRect = computed(() => (nodes.value && nodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
+const boundingRect = computed(() =>
+  getNodesInitialized.value && getNodesInitialized.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value,
+)
 
 const viewScale = computed(() => {
   const scaledWidth = boundingRect.value.width / elementWidth.value
@@ -223,7 +225,7 @@ export default {
       <title v-if="ariaLabel" :id="`vue-flow__minimap-${id}`">{{ ariaLabel }}</title>
 
       <MiniMapNode
-        v-for="node of nodes"
+        v-for="node of getNodesInitialized"
         :id="node.id"
         :key="node.id"
         :position="node.computedPosition"

packages/minimap/src/MiniMapNode.ts

@@ -1,43 +0,0 @@
-import type { CSSProperties } from 'vue'
-import { defineComponent, h, inject } from 'vue'
-import type { MiniMapNodeEmits, MiniMapNodeProps } from './types'
-import { Slots } from './types'
-
-export default defineComponent<MiniMapNodeProps, MiniMapNodeEmits>({
-  name: 'MiniMapNode',
-  compatConfig: { MODE: 3 },
-  setup(props, { attrs, emit }) {
-    const miniMapSlots = inject(Slots)!
-
-    return () => {
-      const style = (attrs.style ?? {}) as CSSProperties
-
-      const slot = miniMapSlots[`node-${props.type}`]
-
-      if (slot) {
-        return slot(props)
-      }
-
-      return h('rect', {
-        id: props.id,
-        class: ['vue-flow__minimap-node', attrs.class, { selected: props.selected, dragging: props.dragging }].join(' '),
-        style,
-        x: props.position.x,
-        y: props.position.y,
-        rx: props.borderRadius,
-        ry: props.borderRadius,
-        width: props.dimensions.width,
-        height: props.dimensions.height,
-        fill: props.color || (style.background as string) || style.backgroundColor,
-        stroke: props.strokeColor,
-        strokeWidth: props.strokeWidth,
-        shapeRendering: props.shapeRendering,
-        onClick: (e: MouseEvent) => emit('click', e),
-        onDblClick: (e: MouseEvent) => emit('dblclick', e),
-        onMouseenter: (e: MouseEvent) => emit('mouseenter', e),
-        onMousemove: (e: MouseEvent) => emit('mousemove', e),
-        onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
-      })
-    }
-  },
-})

packages/minimap/src/MiniMapNode.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { inject, toRef, useAttrs } from 'vue'
+import type { MiniMapNodeEmits, MiniMapNodeProps } from './types'
+import { Slots } from './types'
+
+const props = defineProps<MiniMapNodeProps>()
+
+const emits = defineEmits<MiniMapNodeEmits>()
+
+const miniMapSlots = inject(Slots)!
+
+const attrs = useAttrs()
+
+const style = toRef(() => (attrs.style ?? {}) as CSSProperties)
+
+function onClick(event: MouseEvent) {
+  emits('click', event)
+}
+
+function onDblclick(event: MouseEvent) {
+  emits('dblclick', event)
+}
+
+function onMouseEnter(event: MouseEvent) {
+  emits('mouseenter', event)
+}
+
+function onMouseMove(event: MouseEvent) {
+  emits('mousemove', event)
+}
+
+function onMouseLeave(event: MouseEvent) {
+  emits('mouseleave', event)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'MiniMapNode',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
+<template>
+  <component :is="miniMapSlots[`node-${props.type}`]" v-if="miniMapSlots[`node-${props.type}`]" v-bind="props" />
+
+  <rect
+    v-else
+    :id="id"
+    class="vue-flow__minimap-node"
+    :class="{ selected, dragging }"
+    :x="position.x"
+    :y="position.y"
+    :rx="borderRadius"
+    :ry="borderRadius"
+    :width="dimensions.width"
+    :height="dimensions.height"
+    :fill="color || (style.background as string) || style.backgroundColor"
+    :stroke="strokeColor"
+    :stroke-width="strokeWidth"
+    :shape-rendering="shapeRendering"
+    @click="onClick"
+    @dblclick="onDblclick"
+    @mouseenter="onMouseEnter"
+    @mousemove="onMouseMove"
+    @mouseleave="onMouseLeave"
+  />
+</template>

packages/minimap/src/index.ts

@@ -1,6 +1,6 @@
 import './style.css'
 
 export { default as MiniMap } from './MiniMap.vue'
-export { default as MiniMapNode } from './MiniMapNode'
+export { default as MiniMapNode } from './MiniMapNode.vue'
 
 export * from './types'