refactor(additional-components): use regular component for mini map nodes

packages/additional-components/src/minimap/MiniMap.vue

@@ -34,6 +34,15 @@ const { id, edges, viewport, dimensions, emits, getNodes, d3Selection, d3Zoom }
 
 const el = ref<SVGElement>()
 
+const slots = useSlots()
+
+const hasSlot = (type: string) => {
+  const slotType = slots[type]
+
+  console.log(slotType && slotType().length > 0)
+  return !!(slotType && slotType().length > 0)
+}
+
 const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
 const elementHeight = computed(() => height ?? attrs.style?.height ?? defaultHeight)
@@ -196,6 +205,7 @@ export default {
       @click="onSvgClick"
     >
       <title :id="`vue-flow__minimap-${id}`">Vue Flow mini map {{ id }}</title>
+
       <MiniMapNode
         v-for="node of getNodes"
         :id="node.id"
@@ -215,6 +225,7 @@ export default {
         @mousemove="onNodeMouseMove($event, node)"
         @mouseleave="onNodeMouseLeave($event, node)"
       >
+        <!-- todo: slot causes some lag spikes with FF when a lot of nodes are rendered -->
         <slot
           :id="node.id"
           :name="`node-${node.type}`"

packages/additional-components/src/minimap/MiniMapNode.ts

@@ -1,46 +1,35 @@
-import type { CSSProperties, FunctionalComponent } from 'vue'
+import type { CSSProperties } from 'vue'
 import type { MiniMapNodeProps } from './types'
 
-const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
-  {
-    position: { x, y },
-    dimensions: { height, width },
-    strokeWidth,
-    strokeColor,
-    borderRadius,
-    color,
-    shapeRendering = 'geometricPrecision',
+export default defineComponent({
+  name: 'MiniMapNode',
+  props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering'],
+  emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
+  setup(props: MiniMapNodeProps, { attrs, emit, slots }) {
+    const style = (attrs.style ?? {}) as CSSProperties
+
+    return () => [
+      h('rect', {
+        id: props.id,
+        class: ['vue-flow__minimap-node', attrs.class].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),
+      }),
+      slots?.default?.(),
+    ]
   },
-  { 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: (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),
-    }),
-    slots?.default?.(),
-  ]
-}
-
-MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
-
-MiniMapNode.emits = ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave']
-
-export default MiniMapNode
+})