From f5174ebe10dd91008820c05e7e67dc7d6d6f3c2f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Apr 2022 21:28:44 +0200
Subject: [PATCH] refactor: Change minimap nodes to functional components

---
 .../additional-components/MiniMap/MiniMap.vue |  2 +-
 .../MiniMap/MiniMapNode.ts                    | 42 +++++++++++++++++++
 .../MiniMap/MiniMapNode.vue                   | 40 ------------------
 3 files changed, 43 insertions(+), 41 deletions(-)
 create mode 100644 package/src/additional-components/MiniMap/MiniMapNode.ts
 delete mode 100644 package/src/additional-components/MiniMap/MiniMapNode.vue

diff --git a/package/src/additional-components/MiniMap/MiniMap.vue b/package/src/additional-components/MiniMap/MiniMap.vue
index 9d5eaaab..b1c3761e 100644
--- a/package/src/additional-components/MiniMap/MiniMap.vue
+++ b/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',
diff --git a/package/src/additional-components/MiniMap/MiniMapNode.ts b/package/src/additional-components/MiniMap/MiniMapNode.ts
new file mode 100644
index 00000000..16c75c71
--- /dev/null
+++ b/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
diff --git a/package/src/additional-components/MiniMap/MiniMapNode.vue b/package/src/additional-components/MiniMap/MiniMapNode.vue
deleted file mode 100644
index a0b03619..00000000
--- a/package/src/additional-components/MiniMap/MiniMapNode.vue
+++ /dev/null
@@ -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>