Vue Flow MiniMap

import { MiniMap, MiniMapNode } from "@vue-flow/minimap";
import type { 
  MiniMapProps, MiniMapNodeProps, MiniMapEmits, MiniMapNodeEmits,
  MiniMapSlots, MiniMapNodeFunc, ShapeRendering 
} from "@vue-flow/minimap";

const { MiniMap, MiniMapNode } = require("@vue-flow/minimap");

<script setup>
import { VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'

// Import default minimap styles
import '@vue-flow/minimap/dist/style.css'

const elements = ref([
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 300, y: 200 } },
])
</script>

<template>
  <VueFlow v-model="elements" class="vue-flow-basic-example">
    <MiniMap 
      :nodeColor="'#e2e2e2'"
      :nodeStrokeColor="'transparent'"
      :pannable="true"
      :zoomable="true"
      position="bottom-right"
    />
  </VueFlow>
</template>

/**
 * Vue Flow minimap component providing overview and navigation
 */
interface MiniMapComponent {
  props: MiniMapProps;
  emits: MiniMapEmits;
  slots: MiniMapSlots;
}

interface MiniMapProps {
  /** Node color, can be either a string or a string func that receives the current node */
  nodeColor?: string | MiniMapNodeFunc;
  /** Node stroke color, can be either a string or a string func that receives the current node */
  nodeStrokeColor?: string | MiniMapNodeFunc;
  /** Additional node class name, can be either a string or a string func that receives the current node */
  nodeClassName?: string | MiniMapNodeFunc;
  /** Node border radius */
  nodeBorderRadius?: number;
  /** Node stroke width */
  nodeStrokeWidth?: number;
  /** Background color of minimap mask */
  maskColor?: string;
  /** Border color of minimap mask */
  maskStrokeColor?: string;
  /** Border width of minimap mask */
  maskStrokeWidth?: number;
  /** Position of the minimap */
  position?: PanelPositionType | PanelPosition;
  /** Enable drag minimap to drag viewport */
  pannable?: boolean;
  /** Enable zoom minimap to zoom viewport */
  zoomable?: boolean;
  /** Width of minimap */
  width?: number;
  /** Height of minimap */
  height?: number;
  /** ARIA label for accessibility */
  ariaLabel?: string | null;
  /** Enable inverse panning, i.e. drag minimap to move viewport in opposite direction */
  inversePan?: boolean;
  /** Specify zoom step */
  zoomStep?: number;
  /** Specify minimap scale */
  offsetScale?: number;
  /** Mask border radius */
  maskBorderRadius?: number;
}

interface MiniMapEmits {
  /** Emitted when minimap is clicked */
  (event: 'click', params: { event: MouseEvent; position: { x: number; y: number } }): void;
  /** Emitted when a node in the minimap is clicked */
  (event: 'nodeClick', params: NodeMouseEvent): void;
  /** Emitted when a node in the minimap is double-clicked */
  (event: 'nodeDblclick', params: NodeMouseEvent): void;
  /** Emitted when mouse enters a node in the minimap */
  (event: 'nodeMouseenter', params: NodeMouseEvent): void;
  /** Emitted when mouse moves over a node in the minimap */
  (event: 'nodeMousemove', params: NodeMouseEvent): void;
  /** Emitted when mouse leaves a node in the minimap */
  (event: 'nodeMouseleave', params: NodeMouseEvent): void;
}

interface MiniMapSlots extends Record<`node-${string}`, (nodeProps: MiniMapNodeProps) => any> {}

// Default prop values from the component
const defaultProps = {
  nodeColor: '#e2e2e2',
  nodeStrokeColor: 'transparent',
  nodeBorderRadius: 5,
  nodeStrokeWidth: 2,
  maskColor: 'rgb(240, 240, 240, 0.6)',
  position: 'bottom-right',
  maskStrokeColor: 'none',
  maskStrokeWidth: 1,
  maskBorderRadius: 0,
  pannable: false,
  zoomable: false,
  ariaLabel: 'Vue Flow mini map',
  inversePan: false,
  zoomStep: 1,
  offsetScale: 5
};

<!-- Basic minimap -->
<MiniMap />

<!-- Customized minimap with styling -->
<MiniMap 
  :nodeColor="(node) => node.selected ? '#ff6b6b' : '#e2e2e2'"
  :nodeStrokeColor="'#333'"
  :nodeStrokeWidth="2"
  :nodeBorderRadius="8"
  :maskColor="'rgba(240, 240, 240, 0.8)'"
  position="top-left"
  :pannable="true"
  :zoomable="true"
  :width="250"
  :height="180"
/>

<!-- With event handlers -->
<MiniMap 
  @nodeClick="handleNodeClick"
  @click="handleMinimapClick"
/>

/**
 * Vue component representing individual nodes in the minimap
 */
interface MiniMapNodeComponent {
  props: MiniMapNodeProps;
  emits: MiniMapNodeEmits;
}

interface MiniMapNodeProps {
  /** Node identifier */
  id: string;
  /** Node type */
  type: string;
  /** Whether node is selected */
  selected?: boolean;
  /** Whether node is being dragged */
  dragging?: boolean;
  /** Node position coordinates */
  position: XYPosition;
  /** Node dimensions */
  dimensions: Dimensions;
  /** Border radius */
  borderRadius?: number;
  /** Node color */
  color?: string;
  /** Shape rendering mode */
  shapeRendering?: ShapeRendering;
  /** Stroke color */
  strokeColor?: string;
  /** Stroke width */
  strokeWidth?: number;
  /** Whether node is hidden */
  hidden?: boolean;
}

interface MiniMapNodeEmits {
  /** Emitted when node is clicked */
  (event: 'click', params: MouseEvent): void;
  /** Emitted when node is double-clicked */
  (event: 'dblclick', params: MouseEvent): void;
  /** Emitted when mouse enters node */
  (event: 'mouseenter', params: MouseEvent): void;
  /** Emitted when mouse moves over node */
  (event: 'mousemove', params: MouseEvent): void;
  /** Emitted when mouse leaves node */
  (event: 'mouseleave', params: MouseEvent): void;
}

<!-- Custom node rendering via slots -->
<MiniMap>
  <template #node-custom="nodeProps">
    <circle
      :cx="nodeProps.position.x + nodeProps.dimensions.width / 2"
      :cy="nodeProps.position.y + nodeProps.dimensions.height / 2"
      :r="Math.min(nodeProps.dimensions.width, nodeProps.dimensions.height) / 2"
      :fill="nodeProps.color"
      :stroke="nodeProps.strokeColor"
      :stroke-width="nodeProps.strokeWidth"
    />
  </template>
</MiniMap>

/**
 * Function that receives a node and returns a color value
 */
type MiniMapNodeFunc = (node: GraphNode) => string;

// Color nodes based on type
const nodeColorFunc: MiniMapNodeFunc = (node) => {
  switch (node.type) {
    case 'input': return '#4CAF50';
    case 'output': return '#f44336';
    case 'process': return '#2196F3';
    default: return '#e2e2e2';
  }
};

// Color nodes based on selection state
const selectionColorFunc: MiniMapNodeFunc = (node) => 
  node.selected ? '#ff6b6b' : '#e2e2e2';

/** Vue Flow core types used by minimap */
interface XYPosition {
  x: number;
  y: number;
}

interface Dimensions {
  width: number;
  height: number;
}

interface GraphNode {
  id: string;
  type: string;
  selected?: boolean;
  dragging?: boolean;
  hidden?: boolean;
  position: XYPosition;
  dimensions: Dimensions;
  style?: CSSProperties;
  data?: any;
}

interface NodeMouseEvent {
  event: MouseEvent;
  node: GraphNode;
  connectedEdges: Edge[];
}

interface Edge<Data = any, CustomEvents = any, Type extends string = string> {
  /** Unique edge id */
  id: string;
  /** Edge source node id */
  source: string;
  /** Edge target node id */
  target: string;
  /** Source handle id */
  sourceHandle?: string | null;
  /** Target handle id */
  targetHandle?: string | null;
  /** Edge type */
  type?: Type;
  /** Edge label */
  label?: string;
  /** Animated edge */
  animated?: boolean;
  /** Whether edge is selected */
  selected?: boolean;
  /** Whether edge is hidden */
  hidden?: boolean;
  /** Additional edge data */
  data?: Data;
}

/** Panel positioning types */
type PanelPositionType = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';

interface PanelPosition {
  x: number;
  y: number;
}

/** SVG shape rendering mode */
type ShapeRendering = CSSProperties['shapeRendering'];

/** Vue injection key for minimap slots */
const Slots: InjectionKey<MiniMapSlots>;

/* Import default styles */
@import '@vue-flow/minimap/dist/style.css';

/* Available CSS classes */
.vue-flow__minimap {
  /* Main minimap container */
}

.vue-flow__minimap.pannable {
  /* Minimap when pannable is enabled */
  cursor: grab;
}

.vue-flow__minimap.zoomable {
  /* Minimap when zoomable is enabled */
}

.vue-flow__minimap-node {
  /* Individual minimap node */
}

.vue-flow__minimap-node.selected {
  /* Selected minimap node */
}

.vue-flow__minimap-node.dragging {
  /* Dragging minimap node */
}

.vue-flow__minimap-mask {
  /* Viewport mask overlay */
}