feat(additional-components): add position prop to MiniMap & Controls

packages/additional-components/src/controls/Controls.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { useVueFlow } from '@vue-flow/core'
+import type { PanelPosition } from '../panel'
+import { Panel } from '../panel'
 import type { ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from './icons/plus.svg'
@@ -8,7 +10,13 @@ import FitView from './icons/fitview.svg'
 import Lock from './icons/lock.svg'
 import Unlock from './icons/unlock.svg'
 
-const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
+const {
+  showZoom = true,
+  showFitView = true,
+  showInteractive = true,
+  fitViewParams,
+  position = 'bottom-left' as PanelPosition,
+} = defineProps<ControlProps>()
 
 const emit = defineEmits<{
   (event: 'zoomIn'): void
@@ -49,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="vue-flow__controls">
+  <Panel class="vue-flow__controls" :position="position">
     <slot name="top"></slot>
     <template v-if="showZoom">
       <slot name="control-zoom-in">
@@ -89,5 +97,5 @@ export default {
       </slot>
     </template>
     <slot></slot>
-  </div>
+  </Panel>
 </template>

packages/additional-components/src/controls/types.ts

@@ -1,4 +1,5 @@
 import type { FitViewParams } from '@vue-flow/core'
+import type { PanelPosition } from '../panel'
 
 export interface ControlProps {
   /** Show the zoom icon */
@@ -9,4 +10,6 @@ export interface ControlProps {
   showInteractive?: boolean
   /** Params to use on fitView */
   fitViewParams?: FitViewParams
+  /** Position of the controls {@link PanelPosition} */
+  position: PanelPosition
 }

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { GraphNode } from '@vue-flow/core'
 import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
+import type { PanelPosition } from '../panel'
+import { Panel } from '../panel'
 import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode'
 
@@ -13,6 +15,7 @@ const {
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
+  position = 'bottom-right' as PanelPosition,
 } = defineProps<MiniMapProps>()
 
 const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
@@ -22,7 +25,7 @@ const attrs: Record<string, any> = useAttrs()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { edges, viewport, dimensions, emits, getNodes } = useVueFlow()
+const { id, edges, viewport, dimensions, emits, getNodes } = useVueFlow()
 
 const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
@@ -117,36 +120,19 @@ export default {
 </script>
 
 <template>
-  <svg
+  <Panel :position="position" class="vue-flow__minimap">
-    :width="elementWidth"
+    <svg
-    :height="elementHeight"
+      :width="elementWidth"
-    :viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
+      :height="elementHeight"
-    class="vue-flow__minimap"
+      :viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
-  >
+      role="img"
-    <MiniMapNode
+      :aria-labelledby="`vue-flow__minimap-${id}`"
-      v-for="node of getNodes"
-      :id="node.id"
-      :key="node.id"
-      :position="node.computedPosition"
-      :dimensions="node.dimensions"
-      :style="node.style"
-      :class="nodeClassNameFunc(node)"
-      :color="nodeColorFunc(node)"
-      :border-radius="nodeBorderRadius"
-      :stroke-color="nodeStrokeColorFunc(node)"
-      :stroke-width="nodeStrokeWidth"
-      :shape-rendering="shapeRendering"
-      @click="onNodeClick($event, node)"
-      @dblclick="onNodeDblClick($event, node)"
-      @mouseenter="onNodeMouseEnter($event, node)"
-      @mousemove="onNodeMouseMove($event, node)"
-      @mouseleave="onNodeMouseLeave($event, node)"
     >
-      <slot
+      <title :id="`vue-flow__minimap-${id}`">Vue Flow mini map</title>
+      <MiniMapNode
+        v-for="node of getNodes"
         :id="node.id"
-        :name="`node-${node.type}`"
+        :key="node.id"
-        :parent-node="node.parentNode"
-        :selected="node.selected"
         :position="node.computedPosition"
         :dimensions="node.dimensions"
         :style="node.style"
@@ -156,8 +142,29 @@ export default {
         :stroke-color="nodeStrokeColorFunc(node)"
         :stroke-width="nodeStrokeWidth"
         :shape-rendering="shapeRendering"
-      />
+        @click="onNodeClick($event, node)"
-    </MiniMapNode>
+        @dblclick="onNodeDblClick($event, node)"
-    <path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
+        @mouseenter="onNodeMouseEnter($event, node)"
-  </svg>
+        @mousemove="onNodeMouseMove($event, node)"
+        @mouseleave="onNodeMouseLeave($event, node)"
+      >
+        <slot
+          :id="node.id"
+          :name="`node-${node.type}`"
+          :parent-node="node.parentNode"
+          :selected="node.selected"
+          :position="node.computedPosition"
+          :dimensions="node.dimensions"
+          :style="node.style"
+          :class="nodeClassNameFunc(node)"
+          :color="nodeColorFunc(node)"
+          :border-radius="nodeBorderRadius"
+          :stroke-color="nodeStrokeColorFunc(node)"
+          :stroke-width="nodeStrokeWidth"
+          :shape-rendering="shapeRendering"
+        />
+      </MiniMapNode>
+      <path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
+    </svg>
+  </Panel>
 </template>

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

@@ -1,5 +1,6 @@
 import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
 import type { CSSProperties } from 'vue'
+import type { PanelPosition } from '../panel'
 
 /** expects a node and returns a color value */
 export type MiniMapNodeFunc = (node: GraphNode) => string
@@ -22,6 +23,8 @@ export interface MiniMapProps {
   nodeStrokeWidth?: number
   /** Background color of minimap */
   maskColor?: string
+  /** Position of the minimap {@link PanelPosition} */
+  position?: PanelPosition
 
   width?: number
   height?: number