refactor(core): move MiniMap component into core pkg

.changeset/dry-guests-battle.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Move `MiniMap` component into core pkg.

.changeset/late-toys-play.md

@@ -1,5 +1,4 @@
 ---
-"@vue-flow/background": minor
 "@vue-flow/core": minor
 ---
 

docs/components/DocsRepl.vue

@@ -11,7 +11,6 @@ const { vueFlowVersion } = useVueFlow()
 
 let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion}/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion}/dist/theme-default.css';
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css';
 
 html,
@@ -66,7 +65,6 @@ await store.setFiles(
 // pre-set import map
 store.setImportMap({
   imports: {
-    '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
     '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
     '@vue-flow/node-resizer': `${location.origin}/vue-flow-node-resizer.mjs`,
     '@vue-flow/node-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,

docs/components/home/flows/Additional.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const emit = defineEmits(['pane'])
 

docs/components/home/flows/RGB.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { Background, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import type { MiniMapNodeFunc } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import { MiniMap } from '@vue-flow/minimap'
-import type { MiniMapNodeFunc } from '@vue-flow/minimap'
 
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'

docs/examples/basic/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background, ControlButton, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, ControlButton, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import Icon from './Icon.vue'
 

docs/examples/custom-node/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, toRef } from 'vue'
-import { MiniMap } from '@vue-flow/minimap'
-import { Position, VueFlow } from '@vue-flow/core'
+import { MiniMap, Position, VueFlow } from '@vue-flow/core'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 import OutputNode from './OutputNode.vue'
 import { presets } from './presets.js'

docs/examples/nested/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background, Controls, VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {

docs/examples/stress/App.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, MiniMap, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 

docs/package.json

@@ -16,7 +16,6 @@
     "@vercel/analytics": "^1.3.2",
     "@vercel/speed-insights": "^1.0.14",
     "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
     "@vue/repl": "3.4.0",

docs/src/.vitepress/plugins/copy.ts

@@ -13,7 +13,7 @@ function getPublicPath(fileName: string) {
 }
 
 function copyFiles(emit: Emit) {
-  ;['core', 'minimap', 'node-resizer', 'node-toolbar'].forEach((name) => {
+  ;['core', 'node-resizer', 'node-toolbar'].forEach((name) => {
     const fileName = `vue-flow-${name}.mjs`
 
     const filePath = resolve(__dirname, getPkgPath(name, fileName))

docs/src/.vitepress/theme/index.ts

@@ -2,7 +2,6 @@ import { inject } from '@vercel/analytics'
 import 'virtual:windi.css'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
-import '@vue-flow/minimap/dist/style.css'
 
 import Theme from 'vitepress/theme'
 import Layout from './layouts/default.vue'

docs/src/guide/components/minimap.md

@@ -1,14 +1,5 @@
 # MiniMap
 
-## Installation
-
-```bash
-yarn add @vue-flow/minimap
-
-# or
-npm install @vue-flow/minimap
-```
-
 ## Usage
 
 To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
@@ -19,11 +10,7 @@ Make sure you also import the styles as these are *not* part of the default them
 
 ```vue
 <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'
+import { MiniMap, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>

examples/nuxt3/components/Flow.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background, ControlButton, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, ControlButton, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import Icon from './Icon.vue'
 

examples/nuxt3/package.json

@@ -7,8 +7,7 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",

examples/quasar/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "@quasar/extras": "^1.16.12",
     "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*",
     "quasar": "^2.17.0",
     "vue": "^3.5.11",
     "vue-router": "^4.4.5"

examples/vite/index.css

@@ -4,8 +4,6 @@
 /* import the default theme (optional) */
 @import 'node_modules/@vue-flow/core/dist/theme-default.css';
 
-@import '@vue-flow/minimap/dist/style.css';
-
 body {
   color: #111;
 }

examples/vite/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
     "html-to-image": "^1.11.11",

examples/vite/src/Basic/Basic.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { Edge, Node } from '@vue-flow/core'
-import { Background, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
-
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, MiniMap, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 const nodes = ref<Node[]>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,8 +1,7 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { Background, Controls, VueFlow, isNode } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, isNode } from '@vue-flow/core'
 
-import { MiniMap } from '@vue-flow/minimap'
 import type { UnwrapNestedRefs } from 'vue'
 
 export default defineComponent({

examples/vite/src/CustomNode/CustomNode.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { Controls, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
-
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
 
 import ColorSelectorNode from './ColorSelectorNode.vue'
 

examples/vite/src/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Controls, VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
 
 import { getElements } from './utils'
 

examples/vite/src/Edges/EdgesExample.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, VueFlow } from '@vue-flow/core'
 
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'

examples/vite/src/Empty/EmptyExample.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'

examples/vite/src/Hidden/HiddenExample.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Controls, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const isHidden = ref(false)
 

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Controls, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const {
   nodesDraggable,

examples/vite/src/Nesting/Nesting.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { onConnect, addEdges, addNodes, findNode } = useVueFlow({
   fitViewOnInit: true,

examples/vite/src/Overview/Overview.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
-import { Background, Controls, MarkerType, VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@vue-flow/core'
 
 function onNodeDragStart(e: FlowEvents['nodeDragStart']) {
   return console.log('drag start', e)

examples/vite/vite.config.ts

@@ -20,6 +20,6 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    exclude: ['@vue-flow/core', '@vue-flow/minimap'],
+    exclude: ['@vue-flow/core'],
   },
 })

packages/minimap/src/MiniMap.vue → packages/core/src/components/MiniMap/MiniMap.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core'
-import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, isMacOs, useVueFlow, wheelDelta } from '@vue-flow/core'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import type { D3ZoomEvent } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { computed, provide, ref, toRef, useAttrs, watchEffect } from 'vue'
+import type { CoordinateExtent, GraphNode } from '../../types'
+import { useVueFlow } from '../../composables'
+import { getBoundsofRects, getConnectedEdges, getRectOfNodes, isMacOs, wheelDelta } from '../../utils'
+import Panel from '../Panel/Panel.vue'
 import type { MiniMapEmits, MiniMapNodeFunc, MiniMapProps, MiniMapSlots, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode.vue'
 import { Slots } from './types'
@@ -18,7 +20,7 @@ const {
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 240, 240, 0.6)',
-  position = 'bottom-right' as PanelPosition,
+  position = 'bottom-right',
   maskStrokeColor = 'none',
   maskStrokeWidth = 1,
   maskBorderRadius = 0,
@@ -218,14 +220,14 @@ export default {
 </script>
 
 <template>
-  <Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable }">
+  <Panel :class="{ pannable, zoomable }" :position="position" class="vue-flow__minimap">
     <svg
       ref="el"
       :width="elementWidth"
       :height="elementHeight"
       :viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
-      role="img"
       :aria-labelledby="`vue-flow__minimap-${id}`"
+      role="img"
       @click="onSvgClick"
     >
       <title v-if="ariaLabel" :id="`vue-flow__minimap-${id}`">{{ ariaLabel }}</title>
@@ -234,7 +236,6 @@ export default {
         v-for="node of getNodesInitialized"
         :id="node.id"
         :key="node.id"
-        f
         :position="node.computedPosition"
         :dimensions="node.dimensions"
         :selected="node.selected"
@@ -256,11 +257,11 @@ export default {
       />
 
       <path
-        class="vue-flow__minimap-mask"
         :d="d"
         :fill="maskColor"
         :stroke="maskStrokeColor"
         :stroke-width="maskStrokeWidth"
+        class="vue-flow__minimap-mask"
         fill-rule="evenodd"
       />
     </svg>