refactor(core): move MiniMap component into core pkg

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

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",

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/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",

packages/core/package.json

@@ -68,10 +68,10 @@
     "test": "exit 0"
   },
   "peerDependencies": {
-    "vue": "^3.3.0"
+    "vue": "^3.5.25"
   },
   "dependencies": {
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^14.1.0",
     "d3-drag": "^3.0.0",
     "d3-interpolate": "^3.0.1",
     "d3-selection": "^3.0.0",
@@ -86,13 +86,13 @@
     "@types/d3-selection": "^3.0.11",
     "@types/d3-transition": "^3.0.9",
     "@types/d3-zoom": "^3.0.8",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
-    "postcss-nested": "^6.0.1",
-    "vite": "^4.4.11",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "autoprefixer": "^10.4.22",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-nested": "^7.0.2",
+    "vite": "^7.2.7",
     "vite-svg-loader": "^5.1.0",
-    "vue-tsc": "^1.8.16"
+    "vue-tsc": "^3.1.8"
   }
 }

packages/minimap/src/MiniMap.vue …/core/src/components/MiniMap/MiniMap.vuepackages/minimap/src/MiniMap.vue renamed to packages/core/src/components/MiniMap/MiniMap.vue packages/minimap/src/MiniMap.vue renamed to 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>

packages/minimap/src/MiniMapNode.vue …e/src/components/MiniMap/MiniMapNode.vuepackages/minimap/src/MiniMapNode.vue renamed to packages/core/src/components/MiniMap/MiniMapNode.vue packages/minimap/src/MiniMapNode.vue renamed to packages/core/src/components/MiniMap/MiniMapNode.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import { inject, toRef, useAttrs } from 'vue'
+import { inject, useAttrs } from 'vue'
 import type { MiniMapNodeEmits, MiniMapNodeProps } from './types'
 import { Slots } from './types'
 
@@ -10,29 +9,7 @@ const emits = defineEmits<MiniMapNodeEmits>()
 
 const miniMapSlots = inject(Slots)!
 
-const attrs = useAttrs()
-
-const style = toRef(() => (attrs.style ?? {}) as CSSProperties)
-
-function onClick(event: MouseEvent) {
-  emits('click', event)
-}
-
-function onDblclick(event: MouseEvent) {
-  emits('dblclick', event)
-}
-
-function onMouseEnter(event: MouseEvent) {
-  emits('mouseenter', event)
-}
-
-function onMouseMove(event: MouseEvent) {
-  emits('mousemove', event)
-}
-
-function onMouseLeave(event: MouseEvent) {
-  emits('mouseleave', event)
-}
+const attrs = useAttrs() as Record<string, any>
 </script>
 
 <script lang="ts">
@@ -48,13 +25,13 @@ export default {
     <component
       :is="miniMapSlots[`node-${props.type}`]"
       v-if="miniMapSlots[`node-${props.type}`]"
-      v-bind="{ ...props, ...$attrs }"
+      v-bind="{ ...props, ...attrs }"
     />
 
     <rect
       v-else
       :id="id"
-      v-bind="$attrs"
+      v-bind="attrs"
       class="vue-flow__minimap-node"
       :class="{ selected, dragging }"
       :x="position.x"
@@ -63,15 +40,15 @@ export default {
       :ry="borderRadius"
       :width="dimensions.width"
       :height="dimensions.height"
-      :fill="color || (style.background as string) || style.backgroundColor"
+      :fill="color || (attrs.style?.background as string) || attrs.style?.backgroundColor"
       :stroke="strokeColor"
       :stroke-width="strokeWidth"
       :shape-rendering="shapeRendering"
-      @click="onClick"
-      @dblclick="onDblclick"
-      @mouseenter="onMouseEnter"
-      @mousemove="onMouseMove"
-      @mouseleave="onMouseLeave"
+      @click="emits('click', $event)"
+      @dblclick="emits('dblclick', $event)"
+      @mouseenter="emits('mouseenter', $event)"
+      @mousemove="emits('mousemove', $event)"
+      @mouseleave="emits('mouseleave', $event)"
     />
   </template>
 </template>

packages/minimap/src/index.ts …ges/core/src/components/MiniMap/index.tspackages/minimap/src/index.ts renamed to packages/core/src/components/MiniMap/index.ts packages/minimap/src/index.ts renamed to packages/core/src/components/MiniMap/index.ts

@@ -1,5 +1,5 @@
-import type { Dimensions, GraphNode, NodeMouseEvent, PanelPosition, PanelPositionType, XYPosition } from '@vue-flow/core'
 import type { CSSProperties, InjectionKey } from 'vue'
+import type { Dimensions, GraphNode, NodeMouseEvent, PanelPositionType, XYPosition } from '../../types'
 
 /** expects a node and returns a color value */
 export type MiniMapNodeFunc = (node: GraphNode) => string
@@ -24,7 +24,7 @@ export interface MiniMapProps {
   /** Border width of minimap mask */
   maskStrokeWidth?: number
   /** Position of the minimap {@link PanelPosition} */
-  position?: PanelPositionType | PanelPosition
+  position?: PanelPositionType
   /** Enable drag minimap to drag viewport */
   pannable?: boolean
   /** Enable zoom minimap to zoom viewport */
@@ -62,13 +62,7 @@ export interface MiniMapNodeProps {
 }
 
 export interface MiniMapEmits {
-  (
-    event: 'click',
-    params: {
-      event: MouseEvent
-      position: { x: number; y: number }
-    },
-  ): void
+  (event: 'click', params: { event: MouseEvent; position: { x: number; y: number } }): void
   (event: 'nodeClick', params: NodeMouseEvent): void
   (event: 'nodeDblclick', params: NodeMouseEvent): void
   (event: 'nodeMouseenter', params: NodeMouseEvent): void