refactor: Change minimap nodes to functional components

package/src/additional-components/MiniMap/MiniMap.vue

@@ -3,7 +3,7 @@ import { ShapeRendering, MiniMapNodeFunc, GraphNode } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
-import MiniMapNode from './MiniMapNode.vue'
+import MiniMapNode from './MiniMapNode'
 
 const props = withDefaults(defineProps<MiniMapProps>(), {
   nodeStrokeColor: '#555',

package/src/additional-components/MiniMap/MiniMapNode.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, FunctionalComponent } from 'vue'
+import { MiniMapNodeProps } from '~/types'
+
+const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
+  {
+    position: { x, y },
+    dimensions: { height, width },
+    strokeWidth,
+    strokeColor,
+    borderRadius,
+    color,
+    shapeRendering = 'geometricPrecision',
+  },
+  { attrs, emit, slots },
+) {
+  const style = (attrs.style ?? {}) as CSSProperties
+
+  return [
+    h('rect', {
+      class: ['vue-flow__minimap-node', attrs.class].join(' '),
+      style,
+      x,
+      y,
+      rx: borderRadius,
+      ry: borderRadius,
+      width,
+      height,
+      fill: color || (style.background as string) || style.backgroundColor,
+      stroke: strokeColor,
+      strokeWidth,
+      shapeRendering,
+      onClick: emit('click'),
+      onDblClick: emit('dbl-click'),
+    }),
+    slots?.default?.(),
+  ]
+}
+
+MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
+MiniMapNode.emits = ['click', 'dbl-click']
+
+export default MiniMapNode

package/src/additional-components/MiniMap/MiniMapNode.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import type { MiniMapNodeProps } from '../../types/components'
-
-const props = withDefaults(defineProps<MiniMapNodeProps>(), {
-  shapeRendering: 'geometricPrecision',
-})
-
-const emit = defineEmits(['click', 'dblClick'])
-
-const attrs: any = useAttrs()
-
-const styles = (attrs.style ?? {}) as CSSProperties
-const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
-</script>
-<script lang="ts">
-export default {
-  name: 'MiniMapNode',
-}
-</script>
-<template>
-  <rect
-    class="vue-flow__minimap-node"
-    :class="attrs.class"
-    :style="attrs.style"
-    :x="props.position.x"
-    :y="props.position.y"
-    :rx="props.borderRadius"
-    :ry="props.borderRadius"
-    :width="props.dimensions.width"
-    :height="props.dimensions.height"
-    :fill="fill"
-    :stroke="props.strokeColor"
-    :stroke-width="props.strokeWidth"
-    :shape-rendering="props.shapeRendering"
-    @click="emit('click')"
-    @dblClick="emit('dblClick')"
-  />
-  <slot />
-</template>