How to set minimap node color for a custom node without background color

[lucasoares]

Hello.

I'm currently using a custom node and want this node's background color to be different in the minimap.

All nodes have their background color the same. Currently, I differ their borders using CSS.

How to do it? I tried many different configurations without success.

Custom node usage:

        <template #node-custom-input="{ data }">
          <CustomNode :data="data" />
        </template>

        <template #node-custom-output="{ data }">
          <CustomNode :data="data" />
        </template>

        <template #node-custom-processor="{ data }">
          <CustomNode :data="data" />
        </template>

What should I set here?

        <MiniMap>
          <template #node-custom-input="props">
            <MiniMapNode v-bind="props" />
          </template>
          <template #node-custom-output="props">
            <MiniMapNode v-bind="props" />
          </template>
          <template #node-custom-processor="props">
            <MiniMapNode v-bind="props" />
          </template>
        </MiniMap>

Thanks.

[bcakmakoglu]

You don't need to pass custom minimap nodes to achieve that effect :)

The minimap accepts a nodeColor prop which you can use the color the background of each minimap node.
There's also a nodeStrokeColor prop (for the border of each minimap node) and nodeStrokeWidth (the border width basically).

So an example would look like this

<script lang="ts" setup>
...

// this is a minimap node function, you can use this sort of function for nodeColor, nodeStrokeColor and nodeClassName
const nodeColor: MiniMapNodeFunc = (node) => {
  switch (node.id) {
    case '1':
      return 'green'
    case '2':
      return 'red'
    case '3':
      return 'blue'
    case '4':
      return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`
  }
  return ''
}
</script>

<template>
	<VueFlow v-model="elements">
		<!-- either pass a minimap node function (as above) or simply pass a static string -->
		<MiniMap :node-color="nodeColor" node-stroke-color="yellow" />
	</VueFlow>
</template>